/**
 * WBCEPaperLight – style.css
 *
 * Editorial Low-Data-Template im "Sustainable Web"-Stil.
 * Keine externen Webfonts, keine externen Icon-Fonts, keine CDN-Requests.
 * System-/Monospace-Schriftstapel, responsiv per clamp() ab 380px Breite.
 */

/* ── Design-Tokens ────────────────────────────────────────────────── */

:root {
    --wpl-bg:        #f7f2e7;
    --wpl-bg-alt:    #efe8d8;
    --wpl-surface:   #fffdf9;
    --wpl-text:      #2b2822;
    --wpl-muted:     #6b6558;
    --wpl-border:    #d8d0bd;
    --wpl-link:      #4a5a3a;

    --wpl-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Courier New", monospace;
    --wpl-font-sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --wpl-maxw:   69rem;
    --wpl-gutter: clamp(1rem, 4vw, 2rem);
}

/* No-JS-Fallback: Systempraeferenz respektieren, solange JS noch kein
   explizites data-theme gesetzt hat */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --wpl-bg:      #1b1a17;
        --wpl-bg-alt:  #232019;
        --wpl-surface: #201e19;
        --wpl-text:    #e8e2d3;
        --wpl-muted:   #a39d8c;
        --wpl-border:  #3a362c;
        --wpl-link:    #9fc48a;
    }
    :root:not([data-theme]) .wpl-logo { filter: invert(1); }
}

/* Expliziter Toggle (per JS gesetzt) gewinnt immer */
:root[data-theme="dark"] {
    --wpl-bg:      #1b1a17;
    --wpl-bg-alt:  #232019;
    --wpl-surface: #201e19;
    --wpl-text:    #e8e2d3;
    --wpl-muted:   #a39d8c;
    --wpl-border:  #3a362c;
    --wpl-link:    #9fc48a;
}

:root[data-theme="light"] {
    --wpl-bg:      #f7f2e7;
    --wpl-bg-alt:  #efe8d8;
    --wpl-surface: #fffdf9;
    --wpl-text:    #2b2822;
    --wpl-muted:   #6b6558;
    --wpl-border:  #d8d0bd;
    --wpl-link:    #4a5a3a;
}

/* ── Basis ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--wpl-bg);
    color: var(--wpl-text);
    font-family: var(--wpl-font-mono);
    font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem);
    line-height: 1.65;
    transition: background-color .15s ease, color .15s ease;
}

a { color: var(--wpl-link); }
a:hover, a:focus { color: var(--wpl-text); }

img { max-width: 100%; height: auto; }

.wpl-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--wpl-text);
    color: var(--wpl-bg);
    padding: .6rem 1rem;
    z-index: 100;
    text-decoration: none;
}
.wpl-skiplink:focus { left: .5rem; top: .5rem; }

/* ── Infozeile (live berechnete Kennzahlen, ganz oben, ueber der
   Kopfzeile/Topbar) ───────────────────────────────────────────────── */

.wpl-infoline {
    background: var(--wpl-bg-alt);
    border-bottom: 1px solid var(--wpl-border);
}

.wpl-infoline-inner {
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: .5rem var(--wpl-gutter);
    font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.8rem);
    color: var(--wpl-muted);
    letter-spacing: .02em;
    text-align: center;
    word-break: break-word;
}

/* Alter, fest verdrahteter Vergleichswert hinter REQUESTS (siehe Kommentar
   in index.php) - optisch als Nebeninfo abgesetzt, nicht als Live-Wert */
.wpl-infoline-inner .wpl-stat-baseline {
    font-style: italic;
    opacity: .75;
}

/* ── Kopfzeile / Topbar (Marke, Theme-Toggle) ─────────────────────── */

.wpl-topbar { border-bottom: 1px solid var(--wpl-border); }

.wpl-topbar-inner {
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: 1.3rem var(--wpl-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
}

/* Marken-/Topbar-Zeile um ca. 50% vergroessert (Schrift + Toggle-Button
   skalieren mit, siehe auch das erhoehte Padding oben) */
.wpl-brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--wpl-text);
    letter-spacing: .01em;
    /* Breiterer Bereich als sonst im Template ueblich, damit der
       Markenname bei schmalen Breiten deutlich staerker schrumpft statt
       (mit noch groesserem Logo daneben) auf mehrere Zeilen umzubrechen. */
    font-size: clamp(1.05rem, 0.75rem + 1.6vw, 1.58rem);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* Optionales Logo aus dem Media-Verzeichnis (siehe index.php), steht vor
   WEBSITE_TITLE, Breite folgt automatisch im Original-Seitenverhaeltnis
   der SVG. clamp() ist die Untergrenze (Standardgroesse +50% gegenueber
   der Textmarke, bewusst dominanter), max() erweitert per JS auf die
   tatsaechliche (ggf. mehrzeilige) Titelhoehe - siehe index.php. */
.wpl-logo {
    display: block;
    height: max(clamp(3.375rem, 2.55rem + 3vw, 4.875rem), var(--wpl-brand-text-h, 0px));
    width: auto;
    max-width: 100%;
}

/* Logo ist als reines Schwarz/Weiss-SVG angelegt (kein currentColor) -
   im Dark-Theme wird es deshalb per Filter invertiert statt eine zweite
   Datei zu pflegen. */
:root[data-theme="dark"] .wpl-logo { filter: invert(1); }

.wpl-topbar-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.wpl-theme-toggle,
.wpl-fontsize-toggle {
    border: 1px solid var(--wpl-border);
    background: var(--wpl-surface);
    color: var(--wpl-text);
    border-radius: 999px;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.wpl-theme-toggle svg { width: 1.6rem; height: 1.6rem; }
.wpl-theme-toggle .wpl-icon-moon { display: none; }
:root[data-theme="dark"] .wpl-theme-toggle .wpl-icon-sun  { display: none; }
:root[data-theme="dark"] .wpl-theme-toggle .wpl-icon-moon { display: inline-block; }

/* "Aa"-Icon: kleines + grosses A statt eines SVGs - zwei Textgroessen
   genuegen als allgemein verstaendliches Schriftgroessen-Symbol. */
.wpl-fontsize-toggle {
    font-family: var(--wpl-font-sans);
    font-weight: 700;
    line-height: 1;
}
.wpl-fontsize-toggle .wpl-fontsize-a-sm { font-size: .7rem; }
.wpl-fontsize-toggle .wpl-fontsize-a-lg { font-size: 1.15rem; margin-left: .05rem; }

/* Schriftgroessen-Toggle (siehe index.php): skaliert die Root-
   Schriftgroesse, praktisch das gesamte Template ist in rem gesetzt und
   skaliert dadurch proportional mit - Text, Abstaende, Logo etc. */
:root[data-fontsize="lg"] { font-size: 112.5%; }
:root[data-fontsize="xl"] { font-size: 125%; }

/* ── Kopfbereich (Hauptnavigation / Beschreibung) ─────────────────── */

.wpl-headerarea {
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: 1.1rem var(--wpl-gutter) 1.4rem;
}

/* Hauptnavigation: an der Stelle, an der zuvor die Breadcrumb-Navigation
   stand - horizontal ab 640px, darunter als natives <details>/<summary>-
   Hamburger-Menue (siehe index.php). */
.wpl-mainnav { margin-bottom: 1.1rem; }

.wpl-nav-toggle {
    border: 1px solid var(--wpl-border);
    background: var(--wpl-surface);
}
.wpl-nav-toggle > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--wpl-font-mono);
    font-weight: 700;
    font-size: .95rem;
}
.wpl-nav-toggle > summary::-webkit-details-marker { display: none; }
.wpl-nav-toggle[open] > summary { border-bottom: 1px solid var(--wpl-border); }

.wpl-nav-toggle-icon-open,
.wpl-nav-toggle-icon-close { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.wpl-nav-toggle-icon-close { display: none; }
.wpl-nav-toggle[open] .wpl-nav-toggle-icon-open  { display: none; }
.wpl-nav-toggle[open] .wpl-nav-toggle-icon-close { display: block; }

.wpl-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: .75rem .9rem;
}

.wpl-nav a {
    display: block;
    color: var(--wpl-text);
    text-decoration: none;
    padding: .2rem 0;
    border-bottom: 1px solid transparent;
}
.wpl-nav a:hover, .wpl-nav a:focus { border-bottom-color: var(--wpl-text); }
.wpl-nav li.menu-current > a { font-weight: 700; border-bottom-color: var(--wpl-text); }

.wpl-submenu {
    list-style: none;
    margin: .25rem 0 .25rem 1rem;
    padding: 0;
    display: block;
}

@media (min-width: 640px) {
    .wpl-nav-toggle { border: none; background: none; }
    .wpl-nav-toggle > summary { display: none; }

    .wpl-nav { flex-direction: row; gap: 1.5rem; padding: 0; }
    .wpl-nav > li { position: relative; }

    .wpl-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        min-width: 11rem;
        background: var(--wpl-surface);
        border: 1px solid var(--wpl-border);
        padding: .4rem;
        display: none;
        z-index: 20;
    }
    li.menu-expand:hover > .wpl-submenu,
    li.menu-expand:focus-within > .wpl-submenu { display: block; }
}

/* ── Inhalt (ein Block) ──────────────────────────────────────────── */

.wpl-content {
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: 0 var(--wpl-gutter) 3rem;
}

.wpl-content h2 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
.wpl-content h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }

.wpl-content img {
    display: block;
    border: 1px solid var(--wpl-border);
}
/* Optionale Klasse fuer geditherte 1-Bit-Grafiken (siehe README) */
.wpl-content img.dither { filter: grayscale(1) contrast(1.1); }

.wpl-content pre,
.wpl-content code {
    font-family: var(--wpl-font-mono);
    background: var(--wpl-bg-alt);
}
.wpl-content pre {
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--wpl-border);
}
.wpl-content code { padding: .1em .35em; }
.wpl-content pre code { padding: 0; background: none; }

/* Natives <details>/<summary> im selben Stil wie der Rest der Seite */
.wpl-content details {
    border: 1px solid var(--wpl-border);
    border-top: 0;
    margin-bottom: 0;
}
.wpl-content details:first-of-type { border-top: 1px solid var(--wpl-border); }
.wpl-content details > summary {
    cursor: pointer;
    font-weight: 700;
    padding: .7rem .9rem;
    background: var(--wpl-bg-alt);
    list-style: none;
}
.wpl-content details > summary::-webkit-details-marker { display: none; }
.wpl-content details[open] > summary { border-bottom: 1px solid var(--wpl-border); }
.wpl-content details > :not(summary) { padding: 0 .9rem; }
.wpl-content details > summary + * { padding-top: .9rem; }
.wpl-content details > :last-child { padding-bottom: .9rem; }

/* Anlehnung an das Modul "accordion" (eqd-accordion__*): umrandeter
   Block mit duennen Trennlinien statt dicker Randfarben, eigenes
   CSS-Chevron statt modul-eigener SVG-Icons (Icon-/Positions-Optionen
   der Sektion wirken sich dadurch nicht mehr aus). [aria-expanded] als
   zusaetzlicher Selektor erhoeht bewusst die Spezifitaet gegenueber dem
   modul-eigenen Selektor, sonst entscheidet die Ladereihenfolge der
   beiden Stylesheets. */
.wpl-content .eqd-accordion {
    margin: 1.5rem 0;
    border: 1px solid var(--wpl-border);
    border-bottom: none;
}
.wpl-content .eqd-accordion__heading { margin-top: 0; margin-bottom: 0; }

.wpl-content .eqd-accordion__button[aria-expanded] {
    position: relative;
    font-family: var(--wpl-font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--wpl-text);
    background-color: var(--wpl-surface);
    /* !important noetig: das Modul setzt bei Hover per background-image
       dasselbe Plus-Icon mit gleicher Spezifitaet - ohne !important kann
       das je nach Stylesheet-Reihenfolge auf Hover wieder durchschlagen. */
    background-image: none !important;
    border-bottom: 1px solid var(--wpl-border);
    padding: .9rem 3rem .9rem 1.1rem;
}
.wpl-content .eqd-accordion__button[aria-expanded]:hover,
.wpl-content .eqd-accordion__button[aria-expanded]:focus-visible {
    background-color: var(--wpl-bg-alt);
}

/* CSS-only-Chevron (Rahmenecke gedreht) statt der modul-eigenen Icon-Dateien */
.wpl-content .eqd-accordion__button[aria-expanded]::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: .6rem;
    height: .6rem;
    margin-top: -.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease, margin-top .15s ease;
}
.wpl-content .eqd-accordion__button[aria-expanded="true"]::after {
    margin-top: -.1rem;
    transform: rotate(-135deg);
}

.wpl-content .eqd-accordion__content {
    color: var(--wpl-text);
    background-color: var(--wpl-surface);
    border: none;
    border-bottom: 1px solid var(--wpl-border);
    padding: 1.25rem 1.5rem;
}
.wpl-content .eqd-accordion__content img { display: block; margin: 0 auto; }
.wpl-content .eqd-accordion__content figure { margin: 0 0 .5rem; }
.wpl-content .eqd-accordion__content figcaption {
    text-align: center;
    font-size: .8rem;
    font-style: italic;
    color: var(--wpl-muted);
    margin-top: .5rem;
}

/* Optionale Klasse fuer einen gedaempften Klammerzusatz im Fragetext,
   z. B. "01 // Rahmen & Gehaeuse <span class="wpl-meta">(Material: Alu)</span>" */
.wpl-content .eqd-accordion__button .wpl-meta { font-weight: 400; color: var(--wpl-muted); }

/* ── Footer ──────────────────────────────────────────────────────── */

.wpl-footer { border-top: 1px solid var(--wpl-border); margin-top: 1.5rem; }

.wpl-footernav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem 1.2rem;
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: 1.1rem var(--wpl-gutter) 0;
}
.wpl-footernav a {
    color: var(--wpl-muted);
    text-decoration: none;
    font-size: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
}
.wpl-footernav a:hover { color: var(--wpl-text); text-decoration: underline; }

.wpl-footertext {
    max-width: var(--wpl-maxw);
    margin: 0 auto;
    padding: .8rem var(--wpl-gutter) 1.6rem;
    font-size: clamp(0.75rem, 0.73rem + 0.1vw, 0.85rem);
    color: var(--wpl-muted);
}

/* ── Kleinstbreiten ──────────────────────────────────────────────── */

@media (max-width: 380px) {
    :root { --wpl-gutter: .75rem; }
}