/* ==========================================================================
   Heimwerker-Werkstatt — Ghost Theme
   "Bauplan trifft Werkstatt" — siehe design/DESIGN-GUIDE.md
   ========================================================================== */

:root {
    --color-bg:        #EAE6DD; /* Werkstatt-Beton-Grau, warm */
    --color-surface:    #F7F4EE; /* Papierweiß */
    --color-ink:       #211E1A; /* tiefes Tintenschwarz */
    --color-navy:      #28455B; /* Blaupause-Navy, Primär-Akzent */
    --color-orange:    #D9622B; /* Sicherheits-Orange – überschreibbar via Custom Theme Setting */
    --color-oak:       #A9744F; /* Eichenholz-Braun */
    --color-line:      #C9C2B2;
    --color-navy-ink:  #ffffff;

    /* Ghosts native Schriftarten-Auswahl (Design → Typografie) überschreibt diese beiden Variablen */
    --gh-font-heading: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --gh-font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-display: var(--gh-font-heading);
    --font-body:    var(--gh-font-body);
    --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

    --step-0: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);      /* 14–16 */
    --step-1: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);     /* 16–18 */
    --step-2: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);     /* 20–24 */
    --step-3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24–32 */
    --step-4: clamp(2rem, 1.6rem + 1.8vw, 3rem);           /* 32–48 */
    --step-5: clamp(2.5rem, 1.8rem + 3vw, 4rem);           /* 40–64 */

    --wrap: min(1180px, 100% - 2.5rem);
    --radius: 6px;
    --focus-ring: 3px solid var(--color-navy);

    color-scheme: light;
}

/* Ghost's native accent color (Admin → Design) drives links/focus states,
   with Blaupause-Navy as the considered default rather than being ignored. */
a, .site-nav a[aria-current="page"] { color: var(--ghost-accent-color, var(--color-navy)); }

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:clip fängt die paar Pixel horizontales "Wackeln" ab, die der
   randabfallende 100vw-Trick (.kg-width-wide/.kg-width-full, .ai-size-groß
   weiter unten) verursacht: 100vw zählt die Breite der Scrollbar mit, der
   sichtbare Viewport ist aber genau um die schmaler — ohne das hier würde
   der Inhalt um diesen kleinen Rest über den rechten Rand hinausragen und
   eine horizontale Scrollbar erzeugen.
   BEWUSST "clip" statt "hidden": "hidden" macht html/body zu einem eigenen
   Scroll-Container, wodurch position:sticky (.site-header weiter unten) die
   Bindung an den sichtbaren Viewport verliert und beim Scrollen einfach
   mitwegscrollt statt oben fixiert zu bleiben — "clip" kappt den Überstand
   genauso, ohne diesen Nebeneffekt. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    margin: 0;
    overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--step-1);
    line-height: 1.55;
}
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.wrap { width: var(--wrap); margin-inline: auto; }

.skip-link {
    position: absolute; left: 1rem; top: -3rem;
    background: var(--color-navy); color: #fff; padding: .6rem 1rem;
    border-radius: var(--radius); z-index: 200; transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Pegboard-Lochmuster (wiederverwendetes Hintergrundmotiv)
   ------------------------------------------------------------------------- */
[data-pegboard] {
    background-color: var(--color-navy);
    background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.5px, transparent 1.6px);
    background-size: 22px 22px;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header { color: #fff; position: sticky; top: 0; z-index: 40; }
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: 1rem; gap: 1rem; flex-wrap: wrap;
}
.site-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.site-logo img { max-height: 40px; }
.site-logo__mark { color: var(--color-orange); display: inline-flex; }
.site-logo__text {
    font-family: var(--font-display); font-weight: 700; letter-spacing: .01em;
    font-size: var(--step-3); text-transform: uppercase;
}

.nav-toggle {
    background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
    color: #fff; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.site-nav__list { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { color: #fff; text-decoration: none; font-weight: 500; padding: .3rem 0; }
.site-nav__list a[aria-current="page"] { color: var(--color-orange) !important; }

.pegboard-list__item { position: relative; display: flex; align-items: center; gap: .4rem; }
.pegboard-list__hole {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); flex: none;
}
.pegboard-list__hole--lg { width: 14px; height: 14px; background: var(--color-orange); margin-bottom: .5rem; }

.site-nav__tools { margin-left: 1rem; }
.icon-btn {
    background: transparent; border: none; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem; min-width: 44px; min-height: 44px; justify-content: center;
    font-family: var(--font-mono); font-size: var(--step-0);
}

@media (max-width: 780px) {
    .site-nav {
        position: absolute; inset-inline: 0; top: 100%;
        background: var(--color-navy); padding: 1rem 1.25rem 1.5rem;
        display: none;
        border-top: 1px solid rgba(255,255,255,.15);
    }
    .site-nav[data-open] { display: block; }
    .site-nav__list { flex-direction: column; gap: .9rem; }
    /* Kein eigenes position:relative mehr nötig — .site-header ist jetzt
       ohnehin immer sticky (siehe oben), das liefert denselben
       Bezugspunkt für die absolut positionierte Dropdown-Nav. Ein
       position:relative hier würde die Sticky-Fixierung auf Mobile
       überschreiben. */
}
@media (min-width: 781px) {
    .site-header__inner { flex-wrap: nowrap; }
    .site-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
    .nav-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   Maßlinie — Signatur-Element
   ------------------------------------------------------------------------- */
.measure-line { margin-block: 2.5rem; }
.measure-line span {
    display: block; position: relative; height: 1px; background: var(--color-line);
}
.measure-line span::before, .measure-line span::after {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
    border-left: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
    transform: translateY(-50%) rotate(45deg);
}
.measure-line span::before { left: 0; border: none; border-top: 1px solid var(--color-line); border-right: 1px solid var(--color-line); transform: translateY(-50%) rotate(45deg); }
.measure-line span::after { right: 0; border: none; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); transform: translateY(-50%) rotate(-45deg); }
.measure-line--label {
    display: flex; align-items: center; gap: .75rem;
    font-family: var(--font-mono); font-size: var(--step-0); color: var(--color-navy);
    text-transform: uppercase; letter-spacing: .05em;
}
.measure-line--label .measure-line__seg { flex: 1; height: 0; border-top: 1px dashed var(--color-line); }
.measure-line--label .measure-line__text { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero { margin-block: 2rem 2.5rem; position: relative; }
.hero__hook {
    position: absolute; left: 2rem; top: -10px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-oak); box-shadow: 0 3px 0 rgba(0,0,0,.15);
    z-index: 2;
}
.hero__card {
    display: grid; grid-template-columns: 1fr; background: var(--color-surface); text-decoration: none; color: inherit;
    border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 14px 30px -18px rgba(33,30,26,.35);
}
.hero__media { background: var(--color-bg); aspect-ratio: 16/10; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__body { padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 2rem; }
.eyebrow {
    font-family: var(--font-mono); font-size: var(--step-0); color: var(--color-oak);
    text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem;
}
.hero__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; margin: 0 0 .75rem; font-weight: 700; }
.hero__excerpt { max-width: 62ch; color: color-mix(in srgb, var(--color-ink) 80%, transparent); margin: 0 0 1rem; }

@media (min-width: 781px) {
    .hero__card { grid-template-columns: 1.1fr 1fr; }
    .hero__media { aspect-ratio: auto; }
}

.btn {
    display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
    padding: .7rem 1.25rem; border-radius: var(--radius); font-weight: 600; font-size: var(--step-0);
    border: 2px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--color-orange); color: #241000; }
.btn--primary:hover { filter: brightness(.95); }

/* -------------------------------------------------------------------------
   Kategorie-Leiste (Pegboard)
   ------------------------------------------------------------------------- */
.category-bar { margin-block: 1.5rem 2.5rem; }
.pegboard-list--wrap {
    display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0;
}
.pegboard-list--wrap .pegboard-list__item {
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 999px;
    padding: .45rem .9rem .45rem .7rem;
}
.pegboard-list--wrap .pegboard-list__hole { background: var(--color-oak); }
.pegboard-list--wrap a { color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--step-0); }
.category-bar__count { font-family: var(--font-mono); color: var(--color-navy); font-size: .85em; }

/* -------------------------------------------------------------------------
   Artikel-Grid & Karten
   ------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.post-card__link { display: block; color: inherit; text-decoration: none; position: relative; }
.post-card__media { position: relative; aspect-ratio: 4/3; background: var(--color-bg); border-bottom: 3px solid var(--color-oak); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__media--placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-oak); }
.post-card__pin { position: absolute; top: -6px; left: 1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-navy); }
.post-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.post-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.post-card__tag {
    display: inline-block; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-navy); background: color-mix(in srgb, var(--color-navy) 10%, transparent);
    padding: .15rem .5rem; border-radius: 3px; text-decoration: none;
}
.post-card__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin: 0 0 .5rem; font-weight: 700; }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; }
.post-card__excerpt { margin: 0 0 .85rem; color: color-mix(in srgb, var(--color-ink) 78%, transparent); font-size: var(--step-0); }

.post-card__meta, .post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
    font-family: var(--font-mono); font-size: .8rem; color: color-mix(in srgb, var(--color-ink) 70%, transparent);
}
.meta-item { display: inline-flex; align-items: center; gap: .3rem; }

/* Schwierigkeits-Badge: Icon-Reihe + Textlabel gemeinsam (nie nur Farbe) */
.difficulty-badge { display: inline-flex; align-items: center; gap: .4rem; }
.difficulty-badge__icons { display: inline-flex; gap: 2px; color: var(--color-line); }
.difficulty-badge__label { font-family: var(--font-mono); }
/* Schwierigkeitsgrad 0-5: wie viele der 5 Hammer-Icons gefüllt sind, hängt
   vom data-level auf .difficulty-badge ab (siehe partials/difficulty-badge.hbs
   + difficulty-icons.hbs — die rendern immer alle 5 Icons, nur die Anzahl
   der "gefüllten" bestimmt diese Regel hier). data-level="0" braucht keine
   eigene Regel, da .difficulty-badge__icons ohnehin ungefüllt startet. */
.difficulty-badge[data-level="1"] .icon:nth-child(-n+1) { color: var(--color-orange); }
.difficulty-badge[data-level="2"] .icon:nth-child(-n+2) { color: var(--color-orange); }
.difficulty-badge[data-level="3"] .icon:nth-child(-n+3) { color: var(--color-orange); }
.difficulty-badge[data-level="4"] .icon:nth-child(-n+4) { color: var(--color-orange); }
.difficulty-badge[data-level="5"] .icon:nth-child(-n+5) { color: var(--color-orange); }

/* -------------------------------------------------------------------------
   Artikel-Detailseite
   ------------------------------------------------------------------------- */
.post-header { margin-block: 2rem 1.25rem; max-width: 78ch; }
.post-header__title { font-family: var(--font-display); font-size: var(--step-5); line-height: 1.02; font-weight: 700; margin: .25rem 0 .75rem; }
.post-header__excerpt { font-size: var(--step-2); color: color-mix(in srgb, var(--color-ink) 78%, transparent); margin: 0 0 1rem; }
.post-meta { margin-bottom: .5rem; }
.post-meta__avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .3rem; }
.icon-btn--print { margin-left: auto; border: 1px solid var(--color-line); border-radius: var(--radius); padding: .3rem .7rem; }

.post-feature-image { margin: 1.5rem auto 2rem; }
.post-feature-image img { border-radius: var(--radius); border: 4px solid var(--color-oak); }
.post-feature-image figcaption { font-family: var(--font-mono); font-size: .8rem; text-align: center; margin-top: .5rem; color: color-mix(in srgb, var(--color-ink) 65%, transparent); }

.post-content { max-width: 72ch; font-size: var(--step-1); }
.post-content > * + * { margin-top: 1.25em; }
.post-content h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; margin-top: 2em; }
.post-content h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; margin-top: 1.75em; }
.post-content img { border-radius: var(--radius); }
.post-content figcaption { font-family: var(--font-mono); font-size: .8rem; text-align: center; color: color-mix(in srgb, var(--color-ink) 65%, transparent); }
.post-content a { color: var(--color-navy); text-decoration-color: var(--color-orange); text-underline-offset: 3px; }
.post-content blockquote { border-left: 3px solid var(--color-orange); margin: 1.5em 0; padding: .25em 0 .25em 1.25em; font-style: italic; color: color-mix(in srgb, var(--color-ink) 85%, transparent); }
.post-content code { font-family: var(--font-mono); background: var(--color-surface); padding: .15em .4em; border-radius: 3px; }
.post-content .kg-width-wide, .post-content .kg-width-full { max-width: none; margin-inline: calc(50% - 50vw + 8px); width: calc(100vw - 16px); }

/* Koenig-Trenner-Card (<hr>) automatisch als Maßlinie statt schlichtem Strich */
.post-content hr { border: none; height: 1px; background: var(--color-line); position: relative; margin: 2.5em 0; }
.post-content hr::before, .post-content hr::after {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg);
}
.post-content hr::before { left: 0; border-top: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.post-content hr::after { right: 0; transform: translateY(-50%) rotate(-45deg); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }

/* Materialliste — Bullet-Liste im Editor, gestylt wie ein Einkaufszettel.
   ">" statt Nachfahren-Selektor: gilt nur für OBERSTE Listen (direktes Kind
   von .post-content), nicht für Listen, die innerhalb eines <li> stecken —
   sonst verschachteln sich Kästen/Kreise ineinander, siehe die einfachere
   Verschachtelungs-Optik weiter unten. */
.post-content > ul {
    background: var(--color-surface); border: 1px dashed var(--color-oak); border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1.1rem 2.5rem; list-style: none;
}
.post-content > ul > li { position: relative; padding-left: .25rem; }
.post-content > ul > li + li { margin-top: .5rem; }
.post-content > ul > li::before {
    content: ""; position: absolute; left: -1.5rem; top: .55em; width: 8px; height: 8px;
    background: var(--color-oak); border-radius: 50%;
}

/* Schritt-für-Schritt — nummerierte Liste mit Maßband-Nummern. Auch hier ">"
   statt Nachfahren-Selektor, aus demselben Grund wie oben.
   BEWUSST kein display:flex/grid auf dem <li>: das reißt jedes Inline-Element
   im Listentext (fett, kursiv, ein Link mittendrin) als eigenes Flex-Item
   heraus, wodurch der Text in einzelne nebeneinanderstehende Blöcke statt
   eines zusammenhängenden, umbrechenden Absatzes zerfällt ("zerklüftet") —
   genau das ist mit der vorherigen Flexbox-Version passiert. Stattdessen:
   normaler Blockfluss + absolut positionierter Kreis, mit min-height, die
   die Trennlinie (li+li) explizit mit einrechnet — dadurch kann der Kreis
   auch bei kurzen Listenpunkten nie in die nächste Trennlinie hineinragen,
   ohne dass der Fließtext zerbricht. */
.post-content > ol { list-style: none; padding-left: 0; counter-reset: step; }
.post-content > ol > li { position: relative; padding-left: 3.25rem; min-height: 2.4rem; counter-increment: step; }
.post-content > ol > li + li {
    margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px dashed var(--color-line);
    min-height: calc(1.75rem + 2.4rem);
}
.post-content > ol > li::before {
    content: counter(step); position: absolute; left: 0; top: -.1em;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--color-navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 500; font-size: var(--step-1);
    border: 2px solid var(--color-orange);
}
.post-content > ol > li + li::before { top: calc(1.75rem - .1em); }

/* Verschachtelte Listen (ol/ul innerhalb eines <li>) — bewusst schlicht:
   normale Nummerierung statt Kreise/Kästen, kein counter-reset (zählt
   einfach im umgebenden Textfluss mit). Verhindert, dass sich die
   aufwendige Top-Level-Optik ineinander verschachtelt und dadurch Kreise
   überlappen oder Kästen ineinander stecken ("bugt").
   IMMER Nummern (list-style: decimal), auch bei <ul>: Ghosts Editor legt
   beim Einrücken (Tab) unter einem nummerierten Schritt standardmäßig eine
   Bullet-Unterliste an, selbst wenn inhaltlich eine Reihenfolge gemeint ist
   — die Tag-Wahl (ol/ul) ist in der Praxis also nicht zuverlässig gesetzt,
   deshalb hier einheitlich normale "1. 2. 3."-Nummerierung statt Punkte. */
.post-content li ol, .post-content li ul {
    margin: .5rem 0 0; padding-left: 1.5rem; background: none; border: none; border-radius: 0;
    list-style: decimal;
}
.post-content li ol > li, .post-content li ul > li {
    position: static; padding-left: 0; min-height: 0; margin-top: .35rem; border-top: none; padding-top: 0;
}
.post-content li ol > li::before, .post-content li ul > li::before { content: none; }

/* Tabellen (Koenig-Table-Card) — im Bauplan-Look statt Browser-Standard */
.post-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--step-0); }
.post-content thead th {
    font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    text-align: left; white-space: nowrap; background: var(--color-navy); color: #fff; padding: .65rem .9rem;
}
.post-content thead th:first-child { border-top-left-radius: var(--radius); }
.post-content thead th:last-child { border-top-right-radius: var(--radius); }
.post-content tbody td { padding: .65rem .9rem; border-bottom: 1px dashed var(--color-line); }
.post-content tbody tr:nth-child(even) { background: var(--color-surface); }
.post-content tbody tr:last-child td { border-bottom: 1px solid var(--color-line); }

/* KI-Kennzeichnung — siehe assets/js/main.js. Das Badge ist ein eigenes
   <span>, dessen right/bottom-Position per getBoundingClientRect() exakt
   auf die untere rechte Ecke des tatsächlichen Bildes berechnet wird (nicht
   auf den Container, der breiter/anders ausgerichtet sein kann als das
   sichtbare Bild). Die Höhe setzt main.js proportional zur Bildbreite als
   Inline-Style; die Breite ergibt sich hier automatisch aus aspect-ratio
   (je nach Label-Form: breiter Pill bei "generated"/"modified", quadratisch
   bei "basic"), passend zum jeweiligen SVG-viewBox-Seitenverhältnis. */
.ai-label {
    position: absolute; z-index: 2; pointer-events: none;
    height: 26px; width: auto;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.ai-label--generated-black, .ai-label--generated-white { aspect-ratio: 1789.84 / 566.93; }
.ai-label--modified-black,  .ai-label--modified-white  { aspect-ratio: 1700.79 / 566.93; }
.ai-label--basic-black,     .ai-label--basic-white     { aspect-ratio: 1 / 1; }
.ai-label--generated-black { background-image: url("../images/ai-labels/generated-black.svg"); }
.ai-label--modified-black  { background-image: url("../images/ai-labels/modified-black.svg"); }
.ai-label--basic-black     { background-image: url("../images/ai-labels/basic-black.svg"); }
.ai-label--generated-white { background-image: url("../images/ai-labels/generated-white.svg"); }
.ai-label--modified-white  { background-image: url("../images/ai-labels/modified-white.svg"); }
.ai-label--basic-white     { background-image: url("../images/ai-labels/basic-white.svg"); }

/* Größen-Tags (#klein/#mittel/#groß) — siehe assets/js/main.js. Steuern die
   tatsächliche Bildgröße auf der Beitragsseite, nicht das KI-Badge (das
   bleibt proportional und passt sich automatisch an die neue Breite an).
   clamp() statt starrer Prozentwerte: Auf Desktop gilt die Ziel-Prozentzahl,
   auf schmalen Handy-Screens greift die Mindestbreite, damit "klein"/
   "mittel" dort nicht auf eine unbrauchbare Briefmarkengröße schrumpfen.
   .ai-size-groß nutzt denselben randabfallenden Trick wie Ghosts eigene
   "Full width"-Bildkarte (.kg-width-full weiter oben in dieser Datei) —
   der ist bereits viewport-basiert und damit von Haus aus mobilfähig. */
.ai-size-klein  { width: clamp(200px, 40%, 460px) !important; max-width: 100% !important; margin-inline: auto !important; }
.ai-size-mittel { width: clamp(260px, 65%, 760px) !important; max-width: 100% !important; margin-inline: auto !important; }
.ai-size-groß {
    width: calc(100vw - 16px) !important; max-width: none !important;
    margin-inline: calc(50% - 50vw + 8px) !important;
}

/* Vorher/Nachher-Slider (siehe README.md für das HTML-Card-Snippet) */
.ba-slider { position: relative; border-radius: var(--radius); overflow: hidden; user-select: none; touch-action: pan-y; }
.ba-slider > img { display: block; width: 100%; }
.ba-slider__after { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.ba-slider__after img { display: block; height: 100%; max-width: none; object-fit: cover; }
.ba-slider__handle {
    position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px;
    border-left: 2px dashed var(--color-orange); pointer-events: none;
}
.ba-slider__handle::after {
    content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 34px; height: 34px; background: var(--color-orange); color: #241000; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ba-slider__range { width: 100%; margin-top: .6rem; accent-color: var(--color-navy); }
.ba-slider__labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .35rem; color: color-mix(in srgb, var(--color-ink) 65%, transparent); }

/* YouTube-Einbettung hinter Consent (DSGVO/TTDSG) - siehe README.md für das
   HTML-Card-Snippet. Vor Zustimmung nur ein Platzhalter, keine Verbindung
   zu Google. */
.yt-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--color-ink); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed__consent {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    padding: 1.5rem; text-align: center; color: #fff;
    background: var(--color-navy);
    background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.5px, transparent 1.6px);
    background-size: 22px 22px;
}
.yt-embed__consent-icon { color: var(--color-orange); }
.yt-embed__consent-text { max-width: 46ch; font-size: var(--step-0); color: rgba(255,255,255,.85); }
.yt-embed__consent-text a { color: #fff; text-decoration-color: var(--color-orange); position: relative; z-index: 1; }

/* Google-Anzeigen — "Anzeige"-Label ist Pflicht (Trennungsgebot § 5a UWG,
   dieselbe Logik wie beim Affiliate-Hinweis): Werbung darf nie wie
   redaktioneller Inhalt aussehen. Vor Zustimmung zur Marketing-Kategorie
   bleibt der Slot leer (kein Google-Skript geladen, siehe main.js). */
.ad-slot { margin-block: 2.5rem; }
.ad-slot__label {
    display: block; text-align: center; font-family: var(--font-mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--color-ink) 55%, transparent);
    margin-bottom: .5rem;
}
.ad-slot__unit { min-height: 100px; display: flex; align-items: center; justify-content: center; }
.ad-slot__note {
    margin: 0; text-align: center; font-size: var(--step-0); color: color-mix(in srgb, var(--color-ink) 60%, transparent);
    border: 1px dashed var(--color-line); border-radius: var(--radius); padding: 1rem 1.25rem; width: 100%;
}
.ad-slot__settings-link {
    display: inline; background: none; border: none; padding: 0; margin-left: .25rem;
    font: inherit; color: var(--color-navy); text-decoration: underline; text-decoration-color: var(--color-orange); cursor: pointer;
}
.ad-slot__note--debug {
    border-color: var(--color-orange); border-style: dashed; color: var(--color-oak);
    font-family: var(--font-mono); font-size: .8rem;
}
.ad-slot__house-link { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-line); }
.ad-slot__house-link img { width: 100%; height: auto; display: block; transition: filter .15s ease; }
.ad-slot__house-link:hover img { filter: brightness(.97); }

.post-footer__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; max-width: 72ch; margin-inline: auto; }
.post-footer__tags a {
    font-family: var(--font-mono); font-size: .8rem; text-decoration: none; color: var(--color-navy);
    border: 1px solid var(--color-line); border-radius: 999px; padding: .3rem .8rem;
}
/* .post-content ul (Materialliste-Optik) und .post-footer__tags (Pill-Liste,
   z. B. auf der generierten Tags-Übersichtsseite) kollidieren sonst: die
   Materiallisten-Bullet-Markierung vor jedem <li> ist hier fehl am Platz,
   der dashed-Rahmen als Gruppierung passt aber gut - bleibt erhalten. */
.post-content ul.post-footer__tags { padding-left: 1.25rem; }
.post-content ul.post-footer__tags li::before { content: none; }

.related .grid { margin-top: 1.5rem; }

/* -------------------------------------------------------------------------
   Archiv-/Autoren-Header, 404
   ------------------------------------------------------------------------- */
.archive-header, .error-page { margin-block: 2.5rem; max-width: 70ch; }
.archive-header__title, .error-page__title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; margin: 0 0 .5rem; }
.archive-header__avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1rem; }
.error-page { text-align: center; margin-inline: auto; }
.error-page__icon { color: var(--color-oak); display: inline-flex; margin-bottom: 1rem; }

/* -------------------------------------------------------------------------
   Pagination (Ghost-Standardmarkup)
   ------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.25rem; margin-block: 2rem 3rem; font-family: var(--font-mono); font-size: var(--step-0); }
.pagination a { color: var(--color-navy); text-decoration: none; }
.pagination .page-number { color: color-mix(in srgb, var(--color-ink) 60%, transparent); }
.pagination__arrow { flex: none; white-space: nowrap; }

/* Anklickbare Seitenzahlen — Inhalt von main.js gebaut, siehe pagination.hbs.
   Ohne JS bleibt einfach der "Seite X von Y"-Text aus dem Partial stehen. */
.pagination__numbers { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.pagination__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: var(--radius);
    color: var(--color-navy);
}
.pagination__num:hover { background: var(--color-surface); }
.pagination__num--current {
    background: var(--color-navy); color: #fff; font-weight: 600; cursor: default;
}
.pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; color: color-mix(in srgb, var(--color-ink) 45%, transparent); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-navy); color: #fff; margin-top: 3rem; padding-top: 3rem; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .site-logo__mark { display: inline-flex; color: var(--color-orange); margin-bottom: .5rem; }
.site-footer__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; margin: 0 0 .35rem; }
.site-footer__desc { color: rgba(255,255,255,.7); max-width: 42ch; margin: 0; }
.site-footer__heading { font-family: var(--font-mono); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; color: var(--color-orange); margin: 0 0 .75rem; }
.site-footer__nav ul, .site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer__social { flex-direction: row; gap: .9rem; }
.site-footer__nav a, .site-footer__social a { color: #fff; text-decoration: none; }
.site-footer__social a { display: inline-flex; }
.site-footer .measure-line span { background: rgba(255,255,255,.25); }
.site-footer .measure-line span::before, .site-footer .measure-line span::after { border-color: rgba(255,255,255,.25); }
.site-footer__bottom {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center;
    padding-block: 1.5rem 2rem; font-size: .8rem; color: rgba(255,255,255,.65);
}
.site-footer__legal { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; }
.site-footer__legal a { color: rgba(255,255,255,.85); }

/* -------------------------------------------------------------------------
   Reduced Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------------------
   Druckansicht
   ------------------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .hero, .category-bar, .related, .post-footer,
    .icon-btn--print, .skip-link, .measure-line, .yt-embed { display: none !important; }
    body { background: #fff; color: #000; }
    .post-content { max-width: none; font-size: 12pt; }
    .post-content > ul { border-color: #000 !important; }
    .post-content > ul > li::before { background: #000 !important; }
    .post-content > ol > li::before { background: #fff !important; color: #000 !important; border-color: #000 !important; }
    .post-content thead th { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; }
    .ai-label { display: none !important; }
    a { color: #000; text-decoration: underline; }
}