.reopen-consent {
    position: absolute;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border: 1px solid transparent;
    z-index: 900;
}

.reopen-consent:hover {
cursor:pointer;
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .reopen-consent {
        bottom: 15px;
        left: 15px;
        width: 36px;
        height: 36px;
    }
}

.consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    display: none;
}
.consent-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 30px;
    display: none;
    flex-direction: column;
    gap: 15px;
    box-shadow: var(--shadow-menu);
    z-index: 9999;
}
.consent-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.consent-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.consent-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-main);
    border: none;
    transition: opacity 0.2s, background-color 0.2s;
}
.consent-btn:hover {
    opacity: 0.9;
}
.btn-accept {
    background: var(--accent);
    color: var(--on-accent);
}
.btn-reject {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--text-secondary);
}
.btn-info {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}
.consent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}
.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 650px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
}
.modal-title {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}
.modal-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.6;
}
.modal-close {
    margin-top: 10px;
    background: var(--bg-raised);
    color: var(--text-primary);
    border: 1px solid transparent;
}
.modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}
@media (max-width: 768px) {
    .consent-banner {
        bottom: 10px;
        width: 95%;
        padding: 15px;
    }
    .consent-buttons {
        flex-direction: column;
    }
    .consent-btn {
        width: 100%;
        text-align: center;
    }
}

/* --- HEADER & NAV BASE --- */
header {
    padding: 14px 30px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Abstand zwischen Marke, Umschalter und Navigation. Der Umschalter
       schiebt sich per margin-left:auto nach rechts, die Luecke haelt ihn
       von der Navigation getrennt. */
    gap: 18px;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 16px 20px;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

nav a:hover {
    color: var(--accent);
}

nav .active {
    color: var(--text-primary);
    font-weight: 600;
}

/* --- SPRACHWAHL (Aufklappliste neben dem Hell/Dunkel-Schalter, seit
   24.09.2026 statt der drei Fahnen in der Navigation). Sieben Kopien:
   lw-theme/style.css und die sechs statischen Seiten. Verhalten in
   /blog/wp-content/themes/lw-theme/js/lw-sprachwahl.js --- */
.lw-sprachwahl { position: relative; flex: none; }
.lw-sprachwahl-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 8px 0 9px;
    font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
    color: var(--text-primary); background: var(--bg-body);
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.lw-sprachwahl-knopf:hover,
.lw-sprachwahl.offen .lw-sprachwahl-knopf { border-color: var(--accent); }
.lw-sprachwahl-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lw-sprachwahl img { display: block; width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex: none; }
.lw-sprachwahl-pfeil { display: block; width: 12px; height: 12px; color: var(--text-secondary); transition: transform 0.15s ease; }
.lw-sprachwahl.offen .lw-sprachwahl-pfeil { transform: rotate(180deg); }
.lw-sprachwahl-liste {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 170px; margin: 0; padding: 6px; list-style: none;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-menu);
}
.lw-sprachwahl.offen .lw-sprachwahl-liste { display: block; }
.lw-sprachwahl-liste li { margin: 0; padding: 0; }
.lw-sprachwahl-liste a {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    font-size: 0.95rem; color: var(--text-primary); text-decoration: none; border-radius: 7px;
}
.lw-sprachwahl-liste a:hover,
.lw-sprachwahl-liste a:focus-visible { color: var(--accent); background: var(--bg-raised); outline: none; }
.lw-sprachwahl-liste a[aria-current] { color: var(--accent); background: var(--accent-wash); font-weight: 600; }
/* Die offene Liste ragt unter die Kopfzeile; dort liegende Bloecke mit
   eigenem Stapel (Banner, Kategoriekasten) duerfen sie nicht verdecken. */
.site-container > header:has(.lw-sprachwahl.offen) { position: relative; z-index: 80; }
@media (max-width: 400px) {
    .lw-sprachwahl-knopf { gap: 5px; padding: 0 6px 0 7px; }
    .lw-sprachwahl-knopf span { display: none; }
}

/* --- FEATURED-TOOL-BANNER (eigene Zeile unter der Kopfzeile, seit die
   Sprachfahnen die Nav-Zeile zu eng gemacht haben) --- */
.featured-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
}
/* Zwei Karten wie die Seitenpaneele (26.09.2026): Symbol, kleine Zeile fuer
   die Art, darunter der Titel. Gekuerzt wird der Titel hier per CSS auf die
   verfuegbare Breite, nicht mehr serverseitig nach 50 Zeichen. */
.featured-banner a {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
    padding: 9px 14px 9px 9px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.featured-banner a:hover {
    color: var(--text-primary);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}
.featured-banner a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.featured-banner .fb-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-wash);
    color: var(--accent);
}
.featured-banner .fb-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.featured-banner .fb-art {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.featured-banner .fb-titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.featured-banner .fb-pfeil {
    flex: none;
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
}
.featured-banner a:hover .fb-pfeil {
    color: var(--accent);
    transform: translateX(2px);
}
@media (max-width: 650px) {
    .featured-banner { gap: 8px; padding: 10px 14px; }
    .featured-banner a { flex-basis: 100%; max-width: none; padding: 7px 12px 7px 7px; }
    .featured-banner .fb-symbol { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .featured-banner a, .featured-banner .fb-pfeil { transition: none; }
    .featured-banner a:hover, .featured-banner a:hover .fb-pfeil { transform: none; }
}

/* --- PRZYCISK BLOG --- */
nav a.nav-cta {
    background-color: var(--accent);
    color: var(--on-accent) !important;
    padding: 7px 18px;
    border-radius: 6px;
    font-weight: 700;
    transition: opacity 0.2s, transform 0.2s;
    display: inline-block;
}

nav a.nav-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* --- BADGE: FEATURED TOOL --- */
.nav-featured a {
    color: var(--accent) !important;
    font-weight: 600;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    padding: 6px 14px;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

.nav-featured a:hover {
    background: var(--accent);
    color: var(--on-accent) !important;
    box-shadow: 0 0 15px var(--accent-line);
}

/* --- RESPONSIVE: TABLET (<= 900px) --- */
@media (max-width: 900px) {
    header {
        flex-direction: column;
        gap: 14px;
        padding: 16px 20px;
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }
}

/* --- RESPONSIVE: SMARTFON (<= 650px) --- */
@media (max-width: 650px) {
    nav ul {
        gap: 10px 14px;
    }

    /* Przenosi badge GTM pod główne menu jako elegancki baner */
    .nav-featured {
        order: 10;
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }

    .nav-featured a {
        font-size: 0.82rem;
        padding: 6px 14px;
        white-space: normal; /* Pozwala na zgrabne zawinięcie na bardzo wąskich ekranach 320px */
        max-width: 100%;
    }

    nav a.nav-cta {
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* Subtelny badge po prawej stronie */
        .specs-badge {
		    padding-top:10px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 14px;
            background: var(--bg-panel, #1e1e24);
            border: 1px solid var(--border, #2a2a35);
            border-radius: 20px;
            font-family: monospace;
            font-size: 0.8rem;
            color: var(--text-secondary, #a0a6b0);
            transition: border-color 0.25s ease, transform 0.25s ease;
        }

        .specs-badge:hover {
            border-color: #ff6b6b;
            transform: translateY(-1px);
        }

        .heart-icon {
            transition: transform 0.25s ease;
        }

        .specs-badge:hover .heart-icon {
            transform: scale(1.15);
        }
		
		.specs-badge-upper {
			float: right;
		}
		
		@media all and (max-width:1060px) {
		 .specs-badge-upper {
			margin-top:14px;
			display:block;
			float: none;
		}
		}

		.footer-projects-mini {
			clear: both;
			margin-top: 1px;
			font-size: 0.72rem;
			line-height: 1.4;
			color: var(--text-secondary);
			opacity: 0.75;
		}
		.footer-projects-mini a {
			color: var(--text-secondary);
			text-decoration: none;
			font-weight: 600;
		}
		.footer-projects-mini a:hover { color: var(--accent); }

/* ---------------------------------------------------------- Burger-Menue */
/* Der Knopf ist am Schreibtisch unsichtbar und uebernimmt ab 900px, wo die
   Navigation neben der Marke keinen Platz mehr hat. Die drei Balken sind ein
   Element plus zwei Pseudoelemente, im offenen Zustand ein Kreuz. */
.nav-toggle {
    display: none; flex: none; width: 44px; height: 44px;
    align-items: center; justify-content: center;
    padding: 0; background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    background: currentColor; border-radius: 2px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
    /* z-index gehoert an die Kopfzeile, nicht nur an das Menue: backdrop-filter
       macht sie zu einem eigenen Stapelkontext, in dem der z-index des Menues
       eingeschlossen bleibt. Ohne diese Zeile legen sich positionierte Bloecke
       weiter unten ueber das offene Menue. */
    .site-container > header {
        position: relative;
        z-index: 60;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
    }
    .nav-toggle { display: inline-flex; }
    /* Das aufgeklappte Feld haengt an der Kopfzeile und legt sich ueber den
       Inhalt, statt ihn nach unten zu schieben. */
    .site-container > header > nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-menu);
    }
    .site-container > header.nav-open > nav { display: block; }
    .site-container > header nav ul { flex-wrap: wrap; gap: 0; align-items: stretch; padding: 4px 0 10px; }
    .site-container > header nav ul > li { flex: 1 0 100%; }
    .site-container > header nav ul > li > a { display: block; padding: 12px 16px; font-size: 0.95rem; }
    .site-container > header nav ul > li + li > a { border-top: 1px solid var(--border); }
    /* display und font-size stehen hier ausdruecklich, weil die aeltere
       Regel nav a.nav-cta beides mit hoeherem Gewicht setzt. */
    .site-container > header nav a.nav-cta {
        display: block; margin: 10px 16px 2px; padding: 10px 16px;
        font-size: 0.95rem; text-align: center; border-top: 0;
    }
    .site-container > header nav ul > li.lw-suche-li { padding: 10px 16px 2px; border-top: 1px solid var(--border); }
    .site-container > header nav ul > li.lw-suche-li .lw-suche-knopf { width: 100%; justify-content: center; padding: 9px 14px; }
}

/* ================================================================= Suche */
/* Dasselbe Fenster wie im Blog: /blog/.../js/lw-suche.js sucht im Browser
   ueber den Index aus dem Blog. Die Regeln stammen aus der style.css des
   Themes - diese Seite laedt die Theme-Datei nicht mit. */
.lw-suche-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; font-size: 0.85rem; font-family: inherit;
    color: var(--text-secondary); background: none;
    border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lw-suche-knopf:hover,
.lw-suche-knopf:focus-visible { color: var(--accent); border-color: var(--accent); }
body.lw-suche-offen { overflow: hidden; }
.lw-suche {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; justify-content: center; padding: 10vh 18px 18px;
    background: var(--overlay);
}
.lw-suche[hidden] { display: none; }
.lw-suche__kasten {
    width: 100%; max-width: 640px; max-height: 76vh;
    display: flex; flex-direction: column; padding: 18px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    /* Im hellen Design ist die Schicht dahinter selbst hell - ohne Schatten
       stuende ein weisser Kasten auf weissem Grund. */
    box-shadow: var(--shadow-card);
}
.lw-suche__feld {
    width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
    color: var(--text-primary); background: var(--bg-body);
    border: 1px solid var(--border); border-radius: 8px;
}
.lw-suche__feld:focus { outline: none; border-color: var(--accent); }
.lw-suche__hinweis { margin: 10px 2px 6px; font-size: 0.76rem; color: var(--text-secondary); opacity: 0.75; }
.lw-suche__liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.lw-suche__treffer {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 10px 12px; border-radius: 7px; text-decoration: none; color: var(--text-primary);
}
.lw-suche__treffer:hover,
.lw-suche__treffer:focus-visible { background: var(--accent-wash); color: var(--text-primary); }
.lw-suche__titel { font-size: 0.92rem; line-height: 1.4; }
.lw-suche__titel mark { color: var(--accent); background: none; font-weight: 700; }
.lw-suche__art {
    flex: 0 0 auto; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary); opacity: 0.7; white-space: nowrap;
}
.lw-suche__art--werkzeug { color: var(--accent); opacity: 1; }
@media (max-width: 700px) {
    .lw-suche { padding: 6vh 10px 10px; }
}

/* ==================================================================
   UMSCHALTER FUER HELL UND DUNKEL
   ------------------------------------------------------------------
   Drei Felder: hell, Systemvorgabe, dunkel. Welches hervorgehoben
   ist, haengt an data-theme-wahl am <html>-Element und nicht am
   Knopf - so ist es bereits gefaerbt, bevor das Schalter-Skript am
   Seitenende laeuft. Gleiche Regeln in lw-theme/style.css.
   ================================================================== */
.lw-thema {
    display: inline-flex; align-items: center; gap: 2px;
    flex: none; margin-left: auto; padding: 2px;
    background: var(--bg-body); border: 1px solid var(--border); border-radius: 8px;
}
.lw-thema-knopf {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 24px; padding: 0;
    color: var(--text-secondary); background: none; border: 0; border-radius: 6px;
    cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease;
}
/* Tastbereich vergroessern ohne die sichtbare Groesse zu aendern - 22-24px
   Hoehe liegt unter der empfohlenen Mindestgroesse (~44px) fuer den Finger.
   Nur vertikal, sonst ueberlappen sich die drei Knoepfe (2px Abstand). */
.lw-thema-knopf::before {
    content: "";
    position: absolute;
    top: -11px; bottom: -11px;
    left: -1px; right: -1px;
}
.lw-thema-knopf svg { display: block; width: 15px; height: 15px; }
.lw-thema-knopf:hover { color: var(--accent); }
.lw-thema-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-theme-wahl="light"]  .lw-thema-knopf[data-thema="light"],
:root[data-theme-wahl="system"] .lw-thema-knopf[data-thema="system"],
:root[data-theme-wahl="dark"]   .lw-thema-knopf[data-thema="dark"] {
    color: var(--on-accent); background: var(--accent);
}
/* Ohne Javascript gibt es keine Marke am <html>-Element und damit kein
   hervorgehobenes Feld - dann ist der Schalter wirkungslos. */
:root:not([data-theme-wahl]) .lw-thema { display: none; }
/* Samsung Internet im Dunkelmodus: dort faerbt der Browser selbst nach
   (siehe Kopfskript), der Schalter kann nichts ausrichten und steht
   deshalb auch nicht da. */
:root[data-theme-zwang] .lw-thema { display: none; }
/* Der Schalter braucht rund 82px in der Kopfzeile. Auf schmalen Geraeten
   reicht der Platz nicht fuer Bildmarke, Schriftzug, Schalter und
   Burger-Knopf zugleich - dort weicht der Schriftzug, die Bildmarke bleibt
   als Weg zur Startseite. Ohne diese Regel wird der Burger-Knopf vom
   overflow:hidden des .site-container abgeschnitten. */
@media (max-width: 470px) {
    .site-title { display: none; }
    .lw-thema-knopf { width: 24px; height: 22px; }
    .lw-thema-knopf svg { width: 13px; height: 13px; }
}