/* Struktur-/Layout-Styles. Farben etc. kommen aus theme.css (CSS-Variablen). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Sanftes Scrollen zu den Sprungzielen im Kopfbereich (#buy, #info) -
   ein harter Sprung laesst nicht erkennen, wohin man gelandet ist. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--color-accent-light); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-text);
    margin: 0 0 0.5em;
    letter-spacing: var(--heading-letter-spacing, normal);
}
h1 { font-weight: 700; font-size: var(--font-size-h1); line-height: 1.1; }
h2 { font-weight: 700; font-size: var(--font-size-h2); line-height: 1.2; }
h3 { font-weight: 600; font-size: var(--font-size-h3); line-height: 1.3; }
h4 { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }

input, select, textarea, button {
    font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent-dark);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

/* ---------- Header ---------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 72px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text);
}
.brand:hover { text-decoration: none; color: var(--color-text); }
.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-accent-dark);
    color: var(--color-text-on-accent);
    font-size: 1.1rem;
}
.main-nav { display: flex; gap: 24px; }
.main-nav a {
    font-family: var(--btn-font, var(--font-body));
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.main-nav a:hover { color: var(--color-accent-light); }

.lang-switch select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: var(--color-surface);
    font-family: var(--font-body);
    color: var(--color-text);
}

/* ---------- Hero (mit Bild-Slider) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    /* Cinematic Vollbild-Opener statt kompaktem Banner. */
    min-height: 92vh;
    display: flex;
    align-items: center;
}
.hero--no-slider {
    background:
        radial-gradient(1100px 480px at 12% -10%, rgba(var(--color-accent-rgb), 0.22), transparent 60%),
        linear-gradient(180deg, #000000, #121214);
    min-height: 0;
    padding: 88px 0;
}
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slider__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slider__slide.is-active { opacity: 1; z-index: 1; }
.hero-slider__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(900px 460px at 10% 0%, rgba(var(--color-accent-rgb), 0.28), transparent 60%),
        linear-gradient(90deg, rgba(var(--color-scrim-rgb), 0.94) 0%, rgba(var(--color-scrim-rgb), 0.8) 58%, rgba(var(--color-scrim-rgb), 0.45) 100%),
        linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.85) 0%, rgba(var(--color-scrim-rgb), 0) 45%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* Pre-Launch-Hinweis: eigene Vollbreiten-Leiste ueber dem Hero (siehe
   index.php - liegt bewusst ausserhalb von .container), damit sie sofort
   als Seitenhinweis auffaellt statt wie ein Element INNERHALB des
   Hero-Claims zu wirken. */
.wip-notice {
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border-strong);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.4;
    text-align: center;
}
/* Content-Stack: pro Hero-Slide ein eigener .hero__content-Block (Titel,
   Teaser, CTA), alle auf derselben Grid-Zelle uebereinandergelegt (Grid
   sizet sich automatisch auf den hoechsten Block) und per .is-active
   ein-/ausgeblendet - siehe hero-slider.js. visibility ist bewusst per
   transition-delay gestaffelt: beim Ausblenden erst NACH der Opacity-
   Transition auf hidden wechseln (sonst harter Cut statt Crossfade),
   beim Einblenden sofort sichtbar werden. */
.hero__content-stack { display: grid; }
.hero__content {
    grid-area: 1 / 1;
    max-width: 760px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero__content.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1.2s ease, visibility 0s linear 0s;
}
.hero h1 {
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
}
/* Headline-Formel aus dem Styleguide: gedaempfte Setup-Zeile, dann die
   eigentliche Aussage in voller Staerke/Farbe. */
.hero h1 .muted, .hero h1 .strong { display: block; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.hero h1 .muted { color: var(--color-text-muted); }
.hero h1 .strong { color: var(--color-text); }
.hero p {
    max-width: 620px;
    font-size: var(--font-size-body-lg);
    color: var(--color-text-muted);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-slider__controls {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.hero-slider__dots { display: flex; gap: 8px; }
.hero-slider__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background: rgba(255, 255, 255, 0.15);
    padding: 0;
    cursor: pointer;
}
.hero-slider__dot.is-active { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn {
    display: inline-block;
    padding: 12px 26px;
    /* --btn-radius/--btn-font sind Theme-Hooks mit sicherem Fallback auf
       das bisherige Verhalten (siehe theme.css) - nur theme-nightreel.css
       setzt sie um auf Pill-Radius + Display-Schrift, wie es der
       Styleguide fuer Buttons vorsieht (Pill-Radius ist dort reserviert
       fuer Buttons/Tags, nie fuer Cards). */
    border-radius: var(--btn-radius, var(--radius-sm));
    font-weight: 600;
    font-size: var(--font-size-body);
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    font-family: var(--btn-font, var(--font-body));
}
.btn-accent {
    background: var(--color-accent-dark);
    color: var(--color-text-on-accent);
}
.btn-accent:hover { filter: brightness(1.3); text-decoration: none; color: var(--color-text-on-accent); }
/* Gefuellte Elemente behalten ihre Textfarbe auch beim Hover - sonst greift die
   globale a:hover-Akzentfarbe (Amber) auf dem violetten Grund. */
.pagination .is-current:hover { color: var(--color-text-on-accent); }
.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-accent-dark); color: var(--color-accent-light); text-decoration: none; }
/* Zurueckhaltende dritte Stufe: fuer Wege, die weder Kauf noch Hauptziel
   sind. */
.btn-quiet {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    padding: 12px 18px;
}
.btn-quiet:hover { color: var(--color-accent-light); text-decoration: none; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
/* Sprungziele (#buy, #info) liegen sonst unter der klebenden Kopfzeile. */
.section[id] { scroll-margin-top: 80px; }
.section-alt { background: var(--color-surface-alt); }
.section-title { text-align: center; margin-bottom: 32px; }
.narrow-content { max-width: 760px; margin: 0 auto; text-align: center; }
.narrow-content h2 { text-align: center; }
.narrow-content > p { color: var(--color-text-muted); text-align: left; }
.section-intro {
    text-align: center;
    max-width: 640px;
    margin: -12px auto 32px;
    color: var(--color-text-muted);
}

/* Dekorativer Orbital-Glow hinter "Ueber uns"/Statistik (Styleguide:
   "large, softly-glowing gradient arcs and spheres drifting behind copy
   on dark sections - the only purely abstract motif on the site"). Zwei
   grosse verschwommene Farbkreise, rein CSS statt Bild. */
.about-section { position: relative; overflow: hidden; }
.about-section__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.about-section__glow--a {
    width: 520px;
    height: 520px;
    top: -220px;
    left: -140px;
    background: rgba(var(--color-glow-1-rgb), 0.28);
}
.about-section__glow--b {
    width: 440px;
    height: 440px;
    bottom: -200px;
    right: -120px;
    background: rgba(var(--color-glow-2-rgb), 0.16);
}
.about-section__inner { position: relative; z-index: 1; }
.about-section__features { margin-top: 40px; }
.about-section__text { margin-top: 40px; }

/* ---------- Stats-Leiste (Startseite, "Was bringt dir diese Seite") ---------- */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin-top: 40px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.stats-strip__item {
    background: var(--color-surface);
    padding: 22px 16px;
    text-align: center;
}
.stats-strip__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-cobalt-light, var(--color-accent-light));
}
.stats-strip__label {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* ---------- Cards / Grid ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}
/* Die Pfeile sitzen in einem eigenen Streifen links und rechts NEBEN der
   Kartenspur, nicht darueber - sonst verdecken sie die Artikeltitel. */
.card-slider-wrap {
    position: relative;
    padding: 0 52px;
}
@media (max-width: 700px) {
    /* Dort sind die Pfeile ohnehin ausgeblendet, gewischt wird per Finger. */
    .card-slider-wrap { padding: 0; }
}
.card-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 2px;
    margin: -2px;
    /* Scrollbar optisch ausblenden - gescrollt wird per Pfeil-Buttons, Wischen
       oder Mausrad, die Leiste selbst braucht dafuer nicht sichtbar zu sein. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.card-slider::-webkit-scrollbar { display: none; }
.card-slider .card {
    flex: 0 0 330px;
    scroll-snap-align: start;
}
.card-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-size: 1.1rem;
}
.card-slider__nav:hover { background: var(--color-surface-alt); }
.card-slider__nav--prev { left: 0; }
.card-slider__nav--next { right: 0; }
@media (max-width: 700px) {
    .card-slider__nav { display: none; }
}
.section-cta {
    margin-top: 24px;
    text-align: center;
}

/* ---------- "Neue Instrumente" Bildmosaik mit Scroll-Parallax ---------- */
/* Ueberschrift und Spalten werden per JS (latest-parallax.js) per
   transform verschoben - overflow:hidden (nur auf der Sektion, nicht auf
   dem Grid selbst!) verhindert, dass die dabei entstehenden Ueberhaenge
   horizontales Scrollen der Seite verursachen. Das Grid selbst clippt
   bewusst nicht (sonst sichtbar abgeschnittene Kacheln) - stattdessen
   sorgt ein GROSSER FESTER Sockelabstand (100px, siehe die beiden calc()
   unten) plus der beim Scrollen zusaetzlich schrumpfende Teil
   (--parallax-heading-gap/-cta-gap) dafuer, dass selbst der maximale
   Parallax-Versatz (siehe MAX_COLUMN_OFFSET in latest-parallax.js) nie
   sichtbar in Ueberschrift oder Button hineinragt. */
.latest-parallax { position: relative; overflow: hidden; }
/* Nebelmaschinen-Loop im Hintergrund der gesamten Sektion. screen-blend
   macht den schwarzen Clip-Hintergrund unsichtbar, nur der helle Nebel
   bleibt - Deckkraft haelt den Effekt dezent statt aufdringlich. Startet
   erst per IntersectionObserver (siehe latest-parallax.js), daher kein
   Deckkraft-Uebergang beim ersten Erscheinen noetig. */
.latest-parallax__fog {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    /* Duenner, verteilter Nebel-Clip (statt dichter Nahaufnahme-Schwaden) -
       niedrige Deckkraft haelt den Eindruck von "weiter weg" statt einer
       aufdringlichen Nahaufnahme. */
    opacity: 0.28;
    pointer-events: none;
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
    /* Auf kleinen Screens lieber Datenvolumen sparen als den Effekt zu
       erzwingen - der Clip wird bei reduzierter Bewegung ohnehin nicht
       gestartet (siehe JS), hier zusaetzlich display:none, damit er gar
       nicht erst im DOM Platz beansprucht/geladen wird. */
    .latest-parallax__fog { display: none; }
}
.latest-parallax__head {
    position: relative;
    /* Zweite Sicherheitsebene falls doch mal knapp: Ueberschrift bleibt
       so oder so lesbar ueber der Bildreihe. */
    z-index: 2;
    text-align: center;
    /* Startabstand zur Bildreihe - der dynamische Teil schrumpft beim
       Scrollen Richtung 0 (siehe --parallax-heading-gap), der feste
       Sockel (100px) bleibt immer bestehen. */
    margin-bottom: calc(130px + var(--parallax-heading-gap, 160px));
}
.latest-parallax__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.latest-parallax__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    will-change: transform;
    /* Ohne das bemisst sich die automatische Mindestbreite des Grid-Items
       am nicht umbrechenden Bildunterschrift-Text (white-space: nowrap),
       nicht an der gekuerzten Ellipsis-Darstellung - Spalten mit langen
       Titeln wurden dadurch breiter als andere und ihre Kacheln (fixes
       Seitenverhaeltnis) dadurch hoeher, wodurch die Spalten unten sehr
       unterschiedlich hoch endeten. */
    min-width: 0;
}
/* Dezenter statischer Versatz je Spalte, damit das Mosaik nicht wie ein
   starres Karten-Raster wirkt - der eigentliche "unterschiedlich schnell"-
   Eindruck kommt aus data-parallax-speed (siehe latest-parallax.js). */
.latest-parallax__col:nth-child(2) { margin-top: 26px; }
.latest-parallax__col:nth-child(3) { margin-top: 8px; }
.latest-parallax__col:nth-child(4) { margin-top: 36px; }
.latest-parallax__tile { display: block; }
.latest-parallax__tile-media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-alt);
}
.latest-parallax__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-hover, ease);
}
.latest-parallax__tile:hover .latest-parallax__tile-media img { transform: scale(1.06); }
/* Dunkler Verlauf schraeg von unten-links (dunkel, mit einem Hauch
   Akzentfarbe fuer die "Glasoptik") nach oben-rechts (transparent) - dient
   gleichzeitig als Kontrastflaeche fuer den Titel unten links. Hellt beim
   Hover auf, damit das Foto selbst besser erkennbar wird. */
.latest-parallax__tile-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        45deg,
        rgba(8, 6, 16, 0.88) 0%,
        rgba(var(--color-accent-rgb), 0.55) 30%,
        rgba(var(--color-accent-rgb), 0.16) 60%,
        rgba(var(--color-accent-rgb), 0) 85%
    );
    transition: opacity 0.3s var(--ease-hover, ease);
}
.latest-parallax__tile:hover .latest-parallax__tile-overlay { opacity: 0.45; }
.latest-parallax__tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    /* Lange Instrumententitel nicht umbrechen lassen, sondern in einer
       Zeile ausblenden - haelt jede Kachel gleich hoch. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.latest-parallax .section-cta {
    position: relative;
    z-index: 2;
    /* Symmetrisches Gegenstueck zu --parallax-heading-gap oben - der feste
       Sockel (100px) bleibt immer bestehen, der Rest schrumpft beim
       Scrollen Richtung 0 (siehe --parallax-cta-gap). */
    margin-top: calc(130px + var(--parallax-cta-gap, 160px));
}
@media (max-width: 900px) {
    .latest-parallax__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .latest-parallax__grid { gap: 14px; }
    .latest-parallax__col { margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .latest-parallax__head { margin-bottom: 130px; }
    .latest-parallax .section-cta { margin-top: 130px; }
    .latest-parallax__col { transform: none !important; }
}

.card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform .15s var(--ease-hover, ease), box-shadow .15s var(--ease-hover, ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--color-surface-alt); border-color: rgba(var(--color-accent-rgb), 0.2); }
.card__image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: var(--color-surface-alt);
}
.card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__tag {
    font-family: var(--font-mono, inherit);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-cobalt-light, var(--color-accent-light));
    font-weight: 700;
}
.card__title { font-size: 1.1rem; margin: 0; }
.card__meta { font-size: var(--font-size-small); color: var(--color-text-muted); }
.card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

/* Vollflaechen-Variante: das Foto fuellt die ganze Karte statt eines
   190px-Streifens oben - bei Instrumentenfotos (oft hochformatig gerahmt)
   blieb vom eigentlichen Instrument sonst kaum etwas sichtbar. Bild und
   Glasbox sind normale Flex-Kinder von .card (flex-direction: column):
   das Bild waechst (flex:1) und fuellt allen Platz oberhalb der Box,
   die Box bleibt content-gross - der Flex-"gap" erzwingt so *exakt*
   12px Abstand zwischen Bildkante und Box, unabhaengig vom Textinhalt.
   .card__cta::after (inset:0) bleibt trotzdem relativ zu .card (dem
   naechsten positionierten Vorfahren) positioniert und deckt die ganze
   Karte ab - Bild und Box sind selbst nicht positioniert, aendern also
   nichts am "ganze Karte anklickbar"-Trick.
   WICHTIG: "isolation: isolate" erzwingt einen eigenen Stacking-Context
   auf .card--cover, damit die negativ gestapelten Verlauf/Glow-Ebenen
   (::before/::after, z-index:-1) lokal hinter Bild+Box bleiben statt
   hinter den Seitenhintergrund zu rutschen. */
.card--cover { min-height: 410px; isolation: isolate; gap: 12px; }
.card--cover .card__image {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
}
/* Verlaufsflaeche, die schon im unteren Bilddrittel zu greifen beginnt
   (statt erst an der Bildkante) - so verschwindet die harte Kante am
   Fotoende im Normalzustand komplett und wird erst beim Hover (niedrigere
   Opacity) dezent sichtbar. Fast schwarz statt violett getoent, damit es
   nicht zu bunt wird - die violetten Akzente kommen ueber Glow/Rahmen. */
.card--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 6, 14, 0.98) 0%, rgba(6, 6, 14, 0.93) 20%, rgba(6, 6, 14, 0.75) 40%, rgba(6, 6, 14, 0.35) 60%, transparent 85%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
/* Bild soll im Listing immer sichtbar sein (dunkel abgesetzt fuer die
   Textlesbarkeit), beim Hover heller/klarer werden statt komplett
   dunkel zu bleiben - der Bildeindruck ist hier bewusst Teil des
   Stoeberns durchs Sortiment. */
.card--cover:hover::after { opacity: 0.55; }
/* Farbige Glow-Akzente, rotierend durch die Nightreel-Akzentfarben
   (Iris/Electric/Coral/Cobalt/Amber) - rein dekorativ ueber dem Foto. */
.card--cover { --card-glow-rgb: 137, 82, 253; }
.card-grid .card--cover:nth-child(5n+2) { --card-glow-rgb: 71, 235, 235; }
.card-grid .card--cover:nth-child(5n+3) { --card-glow-rgb: 228, 87, 46; }
.card-grid .card--cover:nth-child(5n+4) { --card-glow-rgb: 91, 83, 255; }
.card-grid .card--cover:nth-child(5n+5) { --card-glow-rgb: 224, 168, 62; }
.card--cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 85% 10%, rgba(var(--card-glow-rgb), 0.45), transparent 60%);
    mix-blend-mode: screen;
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.card--cover:hover::before { opacity: 1; }
/* Frosted-Glass-Panel fuer den Textbereich statt direkt auf dem Scrim -
   gleiche Optik wie der ".glass-card"-Demo-Baustein im Styleguide.
   Bewusst klein gehalten (max. 30% der Kachelhoehe) und nur ~5% ins
   Bild ragend, damit das Foto der Star der Kachel bleibt. */
.card--cover .card__body {
    flex: 0 0 auto;
    margin: 0 12px 12px;
    padding: 10px 14px;
    gap: 6px;
    border-radius: var(--radius-md);
    background: rgba(18, 19, 29, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--card-glow-rgb), 0.35);
    box-shadow: 0 0 20px rgba(var(--card-glow-rgb), 0.18);
}
.card--cover .card__title {
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card--cover .card__meta { color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.card--cover .card__footer { margin-top: 2px; padding-top: 0; border-top: none; }
.card--cover .rarity-scale__label { color: rgba(255, 255, 255, 0.85); }
.card__price { margin: 0; }
.card__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.4);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.card--cover:hover .card__cta { background: rgba(var(--color-accent-rgb), 0.75); transform: translateX(2px); }
/* Ganze Kachel klickbar: ein eigener, unsichtbarer Overlay-Link statt
   des "::after auf dem Fuss-Link"-Tricks - der scheiterte daran, dass
   Flex-Items (Bild, Glasbox) in eigener Reihenfolge gemalt werden und
   ein z-index:auto-Pseudoelement tief in der Glasbox das Bild nicht
   zuverlaessig ueberdeckte. Der sichtbare Pfeil (.card__cta) ist nur
   noch Dekoration (span, aria-hidden). */
.card__link-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}
/* Angebote-Anzahl als violette Glas-Pille oben rechts auf dem Foto -
   ersetzt das textlastige "Angebote: X" im Footer. */
.card__offer-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.5);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---------- Why-us grid ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px;
}
.feature-grid__item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--color-border);
}
/* ---------- "Fuer wen ist diese Seite" Kacheln: Vollflaechenbild im
   Hero-Stil statt Icon-Karte, 2x2 (50% Breite je Kachel). ---------- */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 700px) {
    .audience-grid { grid-template-columns: 1fr; }
}
.audience-card {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-size: cover;
    background-position: center;
}
.audience-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.92) 0%, rgba(var(--color-scrim-rgb), 0.6) 50%, rgba(var(--color-scrim-rgb), 0.15) 100%);
}
.audience-card__content { position: relative; z-index: 1; padding: 28px; }
.audience-card h3 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.audience-card p {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    max-width: 480px;
}

/* ---------- Ratgeber-Kategorie-Kacheln (articles.php): gleiche
   Vollflaechenbild-im-Hero-Stil-Optik wie .audience-card, aber eigene
   Klassen (3 statt 2 Spalten) statt die Startseiten-Klassen umzuwidmen. ---------- */
.category-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1000px) {
    .category-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .category-tile-grid { grid-template-columns: 1fr; }
}
.category-tile {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    isolation: isolate;
}
.category-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.92) 0%, rgba(var(--color-scrim-rgb), 0.6) 50%, rgba(var(--color-scrim-rgb), 0.15) 100%);
}
.category-tile__content { position: relative; z-index: 1; padding: 24px; }
.category-tile h3 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); margin: 0 0 6px; }
.category-tile p {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* ---------- "Wie funktioniert's" Schritte ---------- */
.how-it-works__head { max-width: 700px; margin-bottom: 44px; }
.how-it-works__eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono, inherit);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt-light, var(--color-accent-light));
    margin-bottom: 14px;
}
.how-it-works__title { margin: 0 0 14px; }
.how-it-works__intro {
    margin: 0;
    max-width: 640px;
    font-size: var(--font-size-body-lg);
    color: var(--color-text-muted);
}
.how-it-works__cta { margin-top: 24px; }
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 28px;
}
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .steps-grid { grid-template-columns: 1fr; }
}
.steps-grid__item { text-align: left; }
.steps-grid__number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    /* Farbverlauf statt Volltonfarbe fuer den etwas "startup-igen" Auftritt
       - background-clip:text mit Fallback-color fuer Browser ohne
         Unterstuetzung. */
    color: var(--color-cobalt-light, var(--color-accent-light));
    background: linear-gradient(135deg, var(--color-cobalt-light, var(--color-accent-light)), var(--color-cobalt, var(--color-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
}
.steps-grid__item h3 { margin: 0 0 8px; font-size: 1.05rem; }
.steps-grid__item p { margin: 0; color: var(--color-text-muted); }

/* Finanzierungshinweis: bewusst als eigener, sichtbar abgesetzter Block
   nach den 4 Schritten - transparente, direkte Ansage zum Geschaeftsmodell
   (kostenlos, ueber Affiliate-Links finanziert) statt es zu verstecken. */
.how-it-works__funding {
    margin-top: 48px;
    padding: 28px 32px;
    max-width: 820px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.14), transparent 60%),
        var(--color-surface);
}
.how-it-works__funding h3 { margin: 0 0 10px; font-size: 1.2rem; }
.how-it-works__funding p { margin: 0; color: var(--color-text-muted); }

/* ---------- Instrument-Kategorien (Startseite): Bild/Text im Wechsel ---------- */
.category-showcase-section .narrow-content { margin-bottom: 8px; }
.category-showcase {
    display: flex;
    align-items: center;
    margin: 56px 0;
}
.category-showcase:first-of-type { margin-top: 24px; }
.category-showcase:last-of-type { margin-bottom: 0; }
.category-showcase__media {
    flex: 0 0 42%;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--color-surface-alt);
}
.category-showcase__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 45%, var(--color-surface-alt) 96%);
}
.category-showcase__content {
    flex: 0 0 58%;
    max-width: 58%;
    position: relative;
    z-index: 2;
    margin-left: -70px;
    padding: 8px 8px 8px 48px;
}
.category-showcase__content p { color: var(--color-text-muted); }

.category-showcase--reverse { flex-direction: row-reverse; }
.category-showcase--reverse .category-showcase__scrim {
    background: linear-gradient(to left, transparent 45%, var(--color-surface-alt) 96%);
}
.category-showcase--reverse .category-showcase__content {
    margin-left: 0;
    margin-right: -70px;
    padding: 8px 48px 8px 8px;
}

@media (max-width: 760px) {
    .category-showcase, .category-showcase--reverse { flex-direction: column; margin: 40px 0; }
    .category-showcase__media { flex-basis: auto; width: 100%; aspect-ratio: 16 / 10; }
    .category-showcase__scrim,
    .category-showcase--reverse .category-showcase__scrim {
        background: linear-gradient(to bottom, transparent 40%, var(--color-surface-alt) 96%);
    }
    .category-showcase__content,
    .category-showcase--reverse .category-showcase__content {
        max-width: 100%;
        margin: -56px 0 0;
        padding: 40px 4px 0;
    }
}

/* Die vollflaechigen Panels darunter sollen bis an den naechsten
   Abschnitt reichen - die generische .section-Bodenpolsterung wuerde
   sonst einen sichtbaren Streifen Fuellfarbe zwischen letztem Panel und
   naechster Sektion erzeugen. Oben bleibt das Padding (Abstand zur
   Einleitung/Ueberschrift). */
.home-categories-section { padding-bottom: 0; }

/* ---------- Instrument-Kategorien (Startseite): vollflaechige Bild-
   Abschnitte im Hero-Stil (siehe .hero-slider__scrim), Bild/Text-Seite
   wechselt pro Gruppe ueber .category-section--right. ---------- */
.category-sections { display: flex; flex-direction: column; }
.category-section {
    position: relative;
    display: flex;
    align-items: center;
    /* Cinematic full-screen Banner statt kompaktem Streifen - eine Gruppe
       pro Bildschirmfuellung beim Durchscrollen, wie im Hero. Fixed statt
       scroll: das Bild "steht" im Viewport, der naechste Abschnitt schiebt
       sich davor - klassischer Parallax-Reveal ganz ohne JS, ersetzt die
       vorherige harte Trennlinie zwischen den Gruppen. */
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}
.category-section::after {
    /* Vertikale Vignette blendet die Bildkanten oben/unten in den
       Scrim-Ton ein, damit der Wechsel zwischen zwei fixierten
       Hintergruenden weich wirkt statt hart abzuschneiden. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(var(--color-scrim-rgb), 0.9) 0%,
        transparent 12%,
        transparent 88%,
        rgba(var(--color-scrim-rgb), 0.9) 100%
    );
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
    /* iOS Safari ignoriert fixed-Hintergruende ohnehin, Android kann dabei
       ruckeln - unter 760px und bei reduzierter Bewegung lieber normales
       Scrollen statt halbem Effekt. */
    .category-section { background-attachment: scroll; }
}
.category-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, inherit);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt-light, var(--color-accent-light));
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 14px;
}
.category-section__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 460px at 10% 0%, rgba(var(--color-accent-rgb), 0.28), transparent 60%),
        linear-gradient(90deg, rgba(var(--color-scrim-rgb), 0.94) 0%, rgba(var(--color-scrim-rgb), 0.75) 45%, rgba(var(--color-scrim-rgb), 0.35) 100%),
        linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.85) 0%, rgba(var(--color-scrim-rgb), 0) 45%);
}
.category-section--right .category-section__scrim {
    background:
        radial-gradient(900px 460px at 90% 0%, rgba(var(--color-accent-rgb), 0.28), transparent 60%),
        linear-gradient(270deg, rgba(var(--color-scrim-rgb), 0.94) 0%, rgba(var(--color-scrim-rgb), 0.75) 45%, rgba(var(--color-scrim-rgb), 0.35) 100%),
        linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.85) 0%, rgba(var(--color-scrim-rgb), 0) 45%);
}
.category-section__inner { position: relative; z-index: 2; width: 100%; display: flex; }
.category-section--right .category-section__inner { justify-content: flex-end; }
.category-section__content { max-width: 620px; padding: 48px 0; }
.category-section__content h3 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: var(--heading-letter-spacing, normal);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.category-section__content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-body-lg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    max-width: 52ch;
}
.category-section__content .category-links { margin-top: 26px; }
@media (max-width: 760px) {
    .category-section { min-height: 100vh; padding: 40px 0; }
    .category-section--right .category-section__inner { justify-content: flex-start; }
    .category-section__content { max-width: 100%; }
}

.category-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 20px;
}
.category-links__item {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 600;
}
.category-links__item:hover {
    border-color: var(--color-accent-dark);
    color: var(--color-accent-light);
    text-decoration: none;
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.faq-item {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.faq-item summary * { cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    color: var(--color-accent-light);
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 12px 0 0; color: var(--color-text-muted); }

/* ---------- Filter form ---------- */
.filter-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 28px;
}
.filter-bar form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    align-items: end;
}
.filter-bar label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.filter-bar input, .filter-bar select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    background: var(--color-bg);
    color: var(--color-text);
}
/* Ohne appearance:none rendert Safari ein natives Lupen-/Clear-Icon-Feld
   mit eigenem Rundungs-Stil statt der einheitlichen .filter-bar-Optik. */
.filter-bar input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.filter-bar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.filter-bar .filter-actions {
    display: flex;
    gap: 10px;
}
/* Volle Breite und an erster Stelle im Markup, damit die Textsuche als
   eigene Zeile ueber den uebrigen (schmaleren) Filtern steht - sie ist der
   prominenteste Einstiegspunkt ("fender stratocaster" tippen), die anderen
   Felder dienen eher der Verfeinerung danach. */
.filter-search {
    grid-column: 1 / -1;
}
.filter-sound-tags {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
/* Rechteckig wie die anderen Filterfelder (kein .btn-Pillenradius) - eine
   Pillenform stoesst an ihre Grenzen, sobald mehrere Tag-Badges umbrechen
   muessen (siehe Git-Historie: brach bei vielen ausgewaehlten Tags optisch). */
.filter-sound-tags__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 41px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.filter-sound-tags__trigger:hover { border-color: var(--color-border-strong); }
.filter-sound-tags__trigger:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.filter-sound-tags__trigger-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    flex: 1;
    min-width: 0;
}
.filter-sound-tags__trigger-placeholder { color: var(--color-text-muted); }
.filter-sound-tags__trigger-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 0.7em;
    line-height: 1;
}

/* ---------- Klangcharakter-Auswahl als Popup ----------
   Vollflaechiges Musikfoto + Glass-Panel (Styleguide-Komponente
   "Glass panel"), damit die Auswahl sich in den Nightreel-Look statt in
   ein generisches Browser-Popup einfuegt. */
.sound-tags-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sound-tags-modal[hidden] { display: none; }
.sound-tags-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-scrim-rgb), 0.75);
}
.sound-tags-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(640px, 90vh);
    display: flex;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background-size: cover;
    background-position: center;
}
.sound-tags-modal__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--color-scrim-rgb), 0.35) 0%, rgba(var(--color-scrim-rgb), 0.55) 100%);
}
.sound-tags-modal__content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow-y: auto;
    background: rgba(var(--color-scrim-rgb), 0.32);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.sound-tags-modal__content h2 {
    margin: 0 0 6px;
    color: #fff;
}
.sound-tags-modal__hint {
    margin: 0 0 18px;
    font-size: var(--font-size-small);
    color: rgba(255, 255, 255, 0.75);
}
.sound-tags-modal__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 24px;
}
.sound-tags-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* Klangcharakter-Optionen als anklickbare Pillen statt nativer
   Browser-Checkboxen (sahen auf dem dunklen Glass-Panel wie ein
   Windows-Formular aus, zu stark abgesetzt vom sonstigen Design). Die
   Checkbox bleibt technisch vorhanden (Formularsemantik, Tastatur-Fokus),
   wird aber visuell versteckt - der Zustand kommt rein aus CSS per
   :has(input:checked), keine JS-Klasse noetig. */
.sound-tag-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sound-tag-pill:hover { border-color: rgba(255, 255, 255, 0.5); }
.sound-tag-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.sound-tag-pill:has(input:checked) {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-on-accent);
}
.sound-tag-pill:has(input:focus-visible) {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
}

.guides-search {
    display: flex;
    gap: 10px;
    margin: 20px 0 28px;
}
.guides-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    background: var(--color-surface);
    color: var(--color-text);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    color: var(--color-text-muted);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-state--hint {
    padding-top: 0;
    margin-top: -40px;
}

/* Live-Suche: Ergebnisbereich waehrend des Nachladens leicht abdunkeln */
[data-listing-results] {
    transition: opacity 0.15s ease;
}

[data-listing-results][aria-busy="true"] {
    opacity: 0.55;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: 8px;
    margin-top: 32px;
}
.pagination a, .pagination span {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.pagination .is-current { background: var(--color-accent-dark); color: var(--color-text-on-accent); border-color: var(--color-accent-dark); }
.pagination__ellipsis { border: none; padding: 8px 4px; color: var(--color-text-muted); }

/* ---------- Detail page ---------- */
.post-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    padding: 40px 0;
}
/* Grid-Kinder haben per Default min-width:auto - ohne diese Regel zwingt
   die intrinsische Bildbreite die Spalte (und damit die ganze Seite) zum
   horizontalen Scrollen, sobald ein Bild breiter als die Spalte waere. */
.post-hero > * { min-width: 0; }
/* Als Inline-Block-Links haben die Buttons ohne Flex/Gap keinen Abstand
   zueinander, wenn sie auf schmalen Screens umbrechen - sie kleben dann
   direkt aufeinander. */
.post-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 800px) { .post-hero { grid-template-columns: 1fr; } }
.post-hero h1 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
/* Die Sektion direkt nach dem Hero (Info-Reiter) braucht nicht die volle
   .section-Standardpolsterung obendrauf - zusammen mit dem Hero-eigenen
   Bottom-Padding (40px) ergab das einen unnoetig grossen Leerraum, der die
   Reiter weit nach unten schob. */
.post-hero + .section { padding-top: 16px; }

.gallery__primary { position: relative; }
.gallery__main-link {
    position: relative;
    display: block;
    cursor: zoom-in;
}
/* Quadratisch und "contain" statt beschnitten: bei Instrumenten ist die
   Form das Erkennungsmerkmal - ein angeschnittener Korpus hilft niemandem.
   Der Rahmen bleibt dadurch bei jedem Seitenverhaeltnis gleich hoch. */
.gallery__main {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--color-surface-alt);
}
/* Blaetterpfeile liegen auf dem Bild, wie man es aus Shops kennt. */
.gallery__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.gallery__control:hover { opacity: 1; background: var(--color-surface-alt); }
.gallery__control:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
/* Ohne dies wuerde "display: flex" oben die UA-Regel "[hidden] { display:
   none }" immer ueberstimmen (Autoren- schlaegt UA-Regeln unabhaengig von
   der Spezifitaet) - die Pfeile blieben dann auch ohne JavaScript sichtbar,
   obwohl sie ohne die Klick-Handler aus gallery.js nichts tun wuerden. */
.gallery__control[hidden] { display: none; }
.gallery__control--prev { left: 10px; }
.gallery__control--next { right: 10px; }
/* Lupe unten rechts als Hinweis, dass das Bild sich vergroessern laesst. */
.gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    transition: background 0.15s ease;
}
.gallery__main-link:hover .gallery__zoom { background: rgba(0, 0, 0, 0.8); }

/* Miniaturen: viele Bilder pro Angebot sind normal, daher waagerecht
   scrollbar statt umbrechend - der Kopfbereich soll nicht wachsen. */
.gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.gallery__thumb {
    flex: 0 0 auto;
    display: block;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    line-height: 0;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0.7;
}
/* Miniaturen quadratisch beschnitten - hier zaehlt der schnelle Ueberblick,
   nicht die vollstaendige Form. */
.gallery__thumb img {
    width: 72px; height: 72px;
    object-fit: cover;
    background: var(--color-surface-alt);
    border-radius: calc(var(--radius-sm) - 1px);
    display: block;
}
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--color-accent-dark); opacity: 1; }
.gallery__thumb:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* Vollbild-Ebene. Wird von assets/js/gallery.js erzeugt und liegt direkt
   im body, damit kein uebergeordnetes overflow/transform sie beschneidet. */
body.has-lightbox { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}
.lightbox__image {
    max-width: 100%;
    /* Platz fuer den Zaehler unten frei lassen. */
    max-height: calc(100vh - 110px);
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.lightbox__nav,
.lightbox__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lightbox__nav { width: 48px; height: 48px; font-size: 1.8rem; }
.lightbox__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 40px; height: 40px;
    font-size: 1.5rem;
    line-height: 1;
}
.lightbox__nav:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__nav:focus-visible,
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-small);
}
@media (max-width: 700px) {
    .lightbox { padding: 12px; }
    .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
}

.breadcrumb { font-size: var(--font-size-small); color: var(--color-text-muted); margin-bottom: 18px; }

/* Ratgeber-Fliesstext: schmalere Spalte statt voller Seitenbreite, damit
   laengere Artikel angenehm lesbar bleiben. */
.article-body { max-width: 760px; }
.article-body p { margin: 0 0 16px; line-height: 1.7; }
.article-body h2, .article-body h3 { margin: 32px 0 12px; line-height: 1.3; }
.article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; line-height: 1.6; }
.article-body li > ul, .article-body li > ol { margin-top: 6px; }
.article-body strong { color: var(--color-text); }

.spec-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.spec-table th, .spec-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-body);
}
.spec-table th { color: var(--color-text-muted); width: 40%; font-weight: 500; }

/* ---------- Preis-/Verfuegbarkeits-Kompaktblock (Hero) ---------- */
/* Bewusst kompakt statt eigener h2-Ueberschriften pro Zeile (Marktpreis,
   Verfuegbarkeit) - der Block soll im Kopfbereich moeglichst wenig Platz
   brauchen, die ausfuehrlichen Varianten stehen weiter unten im
   Preisverlauf-Reiter (siehe .price-history-chart--detailed). */
.price-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 20px 0;
}
.price-panel--compact { padding: 14px 18px; }
.price-panel__price,
.price-panel__availability {
    font-size: var(--font-size-body);
    margin: 6px 0;
}
.price-panel__price strong,
.price-panel__availability strong { font-weight: 700; }

.price-history-chart {
    width: 100%;
    height: auto;
    margin-top: 12px;
    color: var(--color-text-muted);
}
.price-history-chart--detailed { margin-top: 16px; }
.price-history-legend {
    display: flex;
    gap: 18px;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-top: 4px;
}
.price-history-legend span { display: flex; align-items: center; gap: 6px; }
.price-history-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.price-history-legend .dot.low { background: var(--color-price-low); }
.price-history-legend .dot.high { background: var(--color-price-high); }

/* Preisverlauf im Hero ist per <details> zugeklappt (Platzgrund) - nativ
   statt per JS, damit der Inhalt fuer Suchmaschinen/KI-Crawler unabhaengig
   vom Aufklapp-Zustand im DOM steht. Der Umschalter ist bewusst als
   Pill-Chip ausgezeichnet (gleiche Sprache wie .info-tabs__toggle weiter
   unten) statt als schlichter Fliesstext mit Pfeilchen davor - das war zu
   unauffaellig, man hat dem Preisverlauf seine Aufklappbarkeit nicht
   angesehen. */
.price-history-collapse { margin: 10px 0 2px; }
.price-history-collapse summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-accent-light);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.price-history-collapse summary::-webkit-details-marker { display: none; }
.price-history-collapse summary:hover,
.price-history-collapse summary:focus-visible {
    border-color: var(--color-accent-dark);
    background: rgba(var(--color-accent-rgb), 0.16);
}
.price-history-collapse summary::before {
    content: '\25BE';
    font-size: 0.8em;
    transition: transform 0.15s ease;
}
.price-history-collapse[open] summary::before { transform: rotate(180deg); }
.price-history-collapse[open] summary {
    border-color: var(--color-accent-dark);
    background: rgba(var(--color-accent-rgb), 0.16);
}

/* ---------- Klangcharakter (Detailseite, jetzt im Info-Reiter) ---------- */
.sound-character__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.sound-tag-badge {
    display: inline-block;
    font-size: var(--font-size-small);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-accent-light);
}

/* ---------- Affiliate-Links ---------- */
/* Zwei Karten pro Zeile (je 50% Breite) statt einer vollen Zeile pro Angebot -
   bei einem 100x100-Bild plus Titel waere eine einzelne Zeile unnoetig breit.
   Unter 700px (siehe Media Query unten) wieder eine Spalte. */
.buy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    align-items: stretch;
}
/* Siehe .buy-list__item[hidden] weiter unten - dieselbe Begruendung: eine
   Autoren-Regel mit "display" schlaegt sonst immer die UA-Regel "[hidden] {
   display: none }", egal welche Spezifitaet sie hat. */
.buy-list[hidden] { display: none; }
.buy-list__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
}
/* Ohne dies wuerde der obige "display: flex" (Autoren-Regel) den
   Standard-UA-Stil "[hidden] { display: none }" IMMER ueberstimmen, egal
   welche Spezifitaet er hat (Autoren- schlaegt UA-Regeln bei gleicher
   Wichtigkeit grundsaetzlich) - der JS-Filter (buy-list.js: item.hidden =
   true) haette dadurch nie sichtbar etwas ausgeblendet. Genau das war die
   Ursache dafuer, dass Plattform-/Preisfilter auf der Instrumentenseite
   wirkungslos blieben. */
.buy-list__item[hidden] { display: none; }
.buy-list__item--best { border-color: var(--color-accent-dark); background: var(--color-surface-alt); }
.buy-list__item:hover { border-color: var(--color-accent-dark); }
/* Macht die ganze Karte klickbar (nicht nur den "Details ansehen"-Button):
   der Link selbst bleibt der einzige <a>, sein Klickbereich wird per
   ::after ueber die gesamte Karte ausgedehnt ("stretched link"-Technik).
   Der Button selbst bleibt unpositioniert, damit sich ::after am naechsten
   positionierten Vorfahren (.buy-list__item) ausrichtet statt nur am Button. */
.buy-list__item > a.btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

.buy-list__thumb-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    cursor: zoom-in;
    /* Bewusst OHNE overflow: hidden - das wuerde auch das Zoom-Flyout
       abschneiden (siehe buy-list.js), das aus Platzgruenden ueber den
       Rand dieser Box hinausragt. Die runde Ecke kommt stattdessen vom
       border-radius direkt auf dem Bild unten. */
}
.buy-list__thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

/* Vergroesserungs-Flyout beim Hovern des Vorschaubilds (siehe buy-list.js
   setUpThumbZoom): zeigt einen ausschnittsweise gezoomten Bereich des
   Originalbilds, der der Mausposition folgt - wie eine Lupe. Reines
   Progressive-Enhancement-Extra: ohne JS bleibt nur das normale Vorschaubild. */
.buy-list__zoom-flyout {
    position: absolute;
    top: 0;
    z-index: 20;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-alt);
    background-repeat: no-repeat;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.buy-list__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.buy-list__platform-pill {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-muted);
}
.buy-list__title {
    font-size: var(--font-size-small);
    color: var(--color-text);
    /* Auf 2 Zeilen begrenzen, damit ein langer Plattform-Titel die Karten
       nicht unterschiedlich hoch macht. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.buy-list__price-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.buy-list__badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    /* 15%-Tint statt Vollflaeche: volle Akzentflaeche + weisse Schrift ist
       fuer Status-Pills bewusst reserviert fuer starke Warnzustaende, nicht
       fuer eine neutrale Info wie "guenstigstes Angebot". */
    background: rgba(var(--color-accent-rgb), 0.16);
    color: var(--color-accent-light);
    font-size: var(--font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.buy-list__price { color: var(--color-accent-light); font-weight: 700; }
.buy-list__price--none { color: var(--color-text-muted); font-weight: 400; font-style: italic; }

.buy-list__cta { flex: 0 0 auto; align-self: center; }

@media (max-width: 700px) {
    .buy-list { grid-template-columns: 1fr; }
}

/* Ab data-visible-rows Eintraegen scrollbar (Klasse wird in
   assets/js/buy-list.js gesetzt) - die Kauf-Sektion steht oben auf der Seite
   und soll sie nicht endlos verlaengern. Ohne JS bleibt die Liste vollstaendig
   sichtbar. Fester statt gemessener Wert: bei zwei Spalten haette eine exakte
   "N Karten hoch"-Messung Spalten-Rundungsfehler, ein fester Deckel reicht. */
/* Bewusst OHNE overscroll-behavior: contain. Am Ende der Liste soll das
   Scrollen auf die Seite uebergehen, sonst wirkt es, als hoere die Seite
   dort auf - obwohl darunter noch alle Texte stehen. */
.buy-list--scrollable {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.buy-list--scrollable::-webkit-scrollbar { width: 8px; }
.buy-list--scrollable::-webkit-scrollbar-track { background: transparent; }
.buy-list--scrollable::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

/* Ausklappbarer Bereich (technische Daten). Ohne JS bleibt alles sichtbar:
   die Begrenzung wird erst per JS gesetzt, wenn wirklich gekuerzt wird. */
.collapsible { position: relative; }
/* position: relative gehoert an den Inhalt, nicht an den Rahmen: sonst
   bezieht sich der Verlauf unten auf das GESAMTE Element inklusive Button -
   der lag dann zur Haelfte im Nebel und war schlecht lesbar. */
.collapsible__content { position: relative; overflow: hidden; transition: max-height 0.25s ease; }
/* Ausblendung nach unten macht sichtbar, dass der Inhalt weitergeht. */
.collapsible.is-collapsed .collapsible__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
}
.collapsible__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.collapsible__toggle[hidden] { display: none; }
.collapsible__toggle:hover { border-color: var(--color-accent-dark); background: var(--color-surface-alt); }
.collapsible__toggle:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.collapsible__toggle::after { content: '\25BE'; font-size: 0.9em; }
.collapsible:not(.is-collapsed) .collapsible__toggle::after { content: '\25B4'; }

/* Plattform-Filter ueber der Liste */
.buy-filter[hidden] { display: none; }
.buy-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.buy-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.buy-filter__label { font-size: var(--font-size-small); color: var(--color-text-muted); }
.buy-filter__options { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-filter__price-range { display: inline-flex; align-items: center; gap: 6px; }
.buy-filter__price-range input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-small);
}
.buy-filter__price-range input:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 1px; }
.buy-filter__price-sep { color: var(--color-text-muted); }
.buy-filter__sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}
.buy-filter__sort-label select {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-small);
}
.buy-filter__sort-label select:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 1px; }
.buy-filter__chip { cursor: pointer; }
/* Checkbox nur visuell entfernen, nicht aus dem Fokus-/Screenreader-Fluss. */
.buy-filter__chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.buy-filter__chip-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.buy-filter__chip input:checked + .buy-filter__chip-text {
    border-color: var(--color-accent-dark);
    background: var(--color-surface-alt);
    color: var(--color-text);
}
.buy-filter__chip input:focus-visible + .buy-filter__chip-text {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 2px;
}
.buy-filter__chip-text:hover { border-color: var(--color-accent-dark); }
.buy-filter__count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text);
    font-size: 0.78em;
    text-align: center;
}
.buy-filter__chip input:checked + .buy-filter__chip-text .buy-filter__count {
    background: var(--color-accent-dark);
    color: var(--color-text-on-accent);
}
.disclaimer-note { font-size: var(--font-size-small); color: var(--color-text-muted); margin-top: 8px; }

/* ---------- Instrumenten-Finder (finder.php) ---------- */
/* Bewusst KEIN Hinweiskasten (Border/Hintergrund) - liest sich wie normaler
   Seiteninhalt mit Ueberschrift + Fliesstext, siehe Nutzerfeedback. */
.finder-intro { max-width: 760px; margin-bottom: 40px; }
.finder-intro__title { margin-bottom: 14px; }
.finder-intro__subtitle { margin-top: 28px; font-size: var(--font-size-h4, 1.125rem); }
.finder-intro__text { color: var(--color-text-muted); margin: 0 0 4px; }
.finder .section-intro { text-align: left; margin-left: 0; margin-right: 0; }
.finder-progress { margin-bottom: 28px; }
.finder-progress__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.finder-progress__fill {
    height: 100%;
    background: var(--color-accent-dark);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.finder-progress__label {
    margin: 8px 0 0;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.finder-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 24px 0;
}
/* Text-Kacheln: gleiches :has(input:checked)-Muster wie .sound-tag-pill,
   nur als groessere, klickbarere Karte statt schmaler Pille - hier gibt es
   pro Schritt selten mehr als 6-9 Optionen, keine Pillen-Wand noetig. */
.finder-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.finder-tile:hover { border-color: var(--color-accent-dark); }
.finder-tile input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.finder-tile:has(input:checked) {
    border-color: var(--color-accent-dark);
    background: rgba(var(--color-accent-rgb), 0.12);
}
.finder-tile:has(input:focus-visible) {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
}
.finder-tile__label { font-weight: 600; }
.finder-tile__desc { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* Bild-Kacheln (Familien-/Optik-Auswahl): gleiches Bild+Scrim-Muster wie
   .category-tile, aber als anklickbares Formularfeld statt Link. */
.finder-tile-grid--image { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.finder-tile--image {
    min-height: 160px;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    border-color: transparent;
    isolation: isolate;
}
.finder-tile--image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-md);
    background: linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.9) 0%, rgba(var(--color-scrim-rgb), 0.35) 70%, rgba(var(--color-scrim-rgb), 0.05) 100%);
}
.finder-tile--image .finder-tile__label { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.finder-tile--image:has(input:checked) { outline: 3px solid var(--color-accent-dark); outline-offset: -3px; }

.finder-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
}
.finder-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.finder-encouragement {
    margin-top: 24px;
    font-style: italic;
    color: var(--color-text-muted);
}
.finder-reasons {
    list-style: none;
    padding: 0;
    margin: 8px 0 20px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}
.finder-reasons li { margin-bottom: 4px; }

.finder-result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.finder-share-status { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* Prozent-Aufteilung auf der result_types-Zwischenseite ("50% Gitarre, 25%
   Schlagzeug, ..."). Ein Balken pro Kandidat, feste Farbreihenfolge (siehe
   finder.php $chartPalette - gegen den dataviz-Validator geprueft, nicht
   erwuerfelt), Prozentzahl UND Instrumentname immer direkt als Text sichtbar
   (nie nur ueber Farbe unterscheidbar). */
.finder-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0 32px;
    max-width: 760px;
}
.finder-chart__row {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr 44px auto;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}
.finder-chart__row:hover { background: rgba(255, 255, 255, 0.05); }
.finder-chart__row input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.finder-chart__row:has(input:checked) { background: rgba(var(--color-accent-rgb), 0.12); }
.finder-chart__row:has(input:focus-visible) { outline: 2px solid var(--color-accent-light); outline-offset: 2px; }
@media (max-width: 640px) {
    .finder-chart__row { grid-template-columns: 1fr; row-gap: 6px; }
    .finder-chart__percent { display: none; }
}
.finder-chart__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--font-size-small);
}
.finder-chart__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.finder-chart__track {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.finder-chart__fill {
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
}
.finder-chart__percent {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text-muted);
}
.finder-chart__link {
    font-size: var(--font-size-small);
    white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    margin-top: 60px;
}
.site-footer__inner { padding: 28px 0; text-align: center; font-size: var(--font-size-small); }
.site-footer__disclaimer { max-width: 640px; margin: 0 auto 8px; }
.site-footer__links { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
.site-footer__links a { color: var(--color-text); text-decoration: underline; opacity: 0.85; }
.site-footer__links a:hover { opacity: 1; color: var(--color-accent-light); }

/* ---------- Ad-Slot ---------- */
.ad-slot {
    margin: 32px 0;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ad-slot__caption {
    align-self: flex-start;
    font-family: var(--font-mono, inherit);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ad-slot__unit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}
/* Feste Mindesthoehe reserviert den Platz VOR dem Laden der echten Anzeige -
   verhindert Layout-Shift (CLS), sobald echter AdSense-Code eingebunden wird. */
.ad-slot--rectangle .ad-slot__unit { min-height: 250px; }
.ad-slot--leaderboard .ad-slot__unit { min-height: 100px; }
@media (max-width: 600px) {
    .ad-slot--leaderboard .ad-slot__unit { min-height: 100px; }
    .ad-slot--rectangle .ad-slot__unit { min-height: 250px; }
}

/* ---------- Cookie-Consent-Banner ---------- */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: none;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cookie-banner__inner p { margin: 0; max-width: 640px; font-size: 0.9rem; }

/* ---------- Info-Reiter (post.php: Allgemein/Erfahrungen/Handling/...) ---------- */
/* "Akte mit Tabs": eine Reihe kurzer Stichwort-Buttons, jeder klappt sein
   eigenes Panel unabhaengig auf/zu (kein exklusives Umschalten wie bei
   klassischen Tabs) - so sieht man auf einen Blick, was es alles gibt, ohne
   erst durch lange Fliesstexte scrollen zu muessen. */
/* Glaskachel: transluzente Flaeche + Weichzeichner auf allem dahinter
   (siehe .depth-bg weiter unten, das ist die Detailseite hinter der ganzen
   Seite liegende Tiefen-Ebene) statt einer schlicht deckenden Karte - dazu
   zwei dezente Farbverlaeufe aus denselben zwei Glow-Farben, die auch die
   .depth-bg-Kreise benutzen (--color-glow-1/-2-rgb), damit Kachel und
   Hintergrund optisch zur selben Szene gehoeren statt zwei getrennten
   Deko-Elementen. rgba(...-scrim-rgb, 0.55) als Basis (statt der
   deckenden --color-surface) haelt die Flaeche durchscheinend genug, dass
   der Hintergrund durch den Blur hindurch erkennbar bleibt. */
.info-tabs {
    /* Gleicher Wert wie .section[id] (Zeile ~264): der Sprunglink zu #info
       (post-hero__actions) landete sonst leicht zu weit unten, weil #info
       hier auf diesem div sitzt statt auf einem .section-Element, das die
       Kompensation fuer den sticky Site-Header (72px) sonst schon haette. */
    scroll-margin-top: 80px;
    position: relative;
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 12% -10%, rgba(var(--color-glow-1-rgb), 0.4), transparent 55%),
        radial-gradient(circle at 105% 115%, rgba(var(--color-glow-2-rgb), 0.2), transparent 60%),
        rgba(var(--color-scrim-rgb), 0.55);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Ohne Weichzeichner-Unterstuetzung braeuchte die Flaeche mehr eigene
       Deckkraft, sonst ist der Text auf dem unscharfen Hintergrund
       schlecht lesbar. */
    .info-tabs { background-color: rgba(var(--color-scrim-rgb), 0.9); }
}
@media (max-width: 760px) {
    .info-tabs { padding: 20px; }
}
.info-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.info-tabs__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.info-tabs__toggle::after {
    content: '\25BE';
    font-size: 0.85em;
    transition: transform 0.15s ease;
}
.info-tabs__toggle:hover { border-color: var(--color-accent-dark); }
.info-tabs__toggle:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.info-tabs__toggle[aria-expanded="true"] {
    background: rgba(var(--color-accent-rgb), 0.16);
    border-color: var(--color-accent-dark);
    color: var(--color-accent-light);
}
.info-tabs__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* "Hier zu kaufen"-Reiter: soll staerker zum Klicken einladen als die
   gleichrangigen Text-Reiter (Nutzeranforderung) - deshalb durchgehend
   gefuellt statt nur bei aria-expanded="true", wie ein Primaer-Button. */
.info-tabs__toggle--accent {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-on-accent);
}
.info-tabs__toggle--accent:hover { filter: brightness(1.15); border-color: var(--color-accent-dark); }
.info-tabs__toggle--accent[aria-expanded="true"] {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-on-accent);
    filter: brightness(1.15);
}

.info-tabs__panel {
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
}
.info-tabs__panel:first-of-type { border-top: none; padding-top: 0; }
/* Siehe .buy-list__item[hidden] weiter oben fuer die Begruendung dieser
   Regel (Autoren-"display" schlaegt sonst immer die UA-Regel fuer [hidden]). */
.info-tabs__panel[hidden] { display: none; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Tiefen-Hintergrund (post.php: .depth-bg) ---------- */
/* Fixierte Ebene HINTER der gesamten Instrumenten-Detailseite (nicht nur
   einer Sektion): mehrere weiche, stark verschwommene Farbkreise - dasselbe
   abstrakte Motiv wie .about-section__glow oben ("large, softly-glowing
   gradient arcs and spheres drifting behind copy", siehe Styleguide),
   hier aber als Ebene hinter der ganzen Seite statt nur einem Abschnitt.
   Bewusst rein CSS statt des Nebel-Videos von der Startseite
   (.latest-parallax__fog) - das liess sich nicht fein/diffus genug
   abstimmen und wirkte zu nah/gross (Nutzer-Feedback); hier laesst sich
   Groesse/Unschaerfe/Deckkraft frei justieren, ausserdem kein
   Video-Download auf jeder einzelnen Instrumentenseite.
   Jeder Kreis liegt in einer eigenen .depth-bg__layer, die per JS
   (detail-parallax.js, data-depth-speed) beim Scrollen leicht versetzt
   wird - unterschiedliche Tempi je Ebene erzeugen den Tiefeneindruck
   ("man scrollt durch einen Raum", nicht an einer flachen Wand entlang).
   Die eigentliche Drift-Animation (@keyframes) sitzt bewusst auf dem
   Kreis SELBST, nicht auf der von JS bewegten Layer-Huelle - sonst wuerde
   die naechste inline transform-Zuweisung aus JS die CSS-Animation bei
   jedem Scroll-Event ueberschreiben. */
.depth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--color-bg);
}
.depth-bg__layer { position: absolute; inset: 0; will-change: transform; }
.depth-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: depth-bg-drift 26s ease-in-out infinite;
}
.depth-bg__orb--a {
    width: 620px; height: 620px;
    top: -200px; left: -140px;
    background: rgba(var(--color-glow-1-rgb), 0.42);
    animation-duration: 24s;
}
.depth-bg__orb--b {
    width: 520px; height: 520px;
    top: 26%; right: -180px;
    background: rgba(var(--color-glow-2-rgb), 0.2);
    animation-duration: 30s;
    animation-direction: reverse;
}
.depth-bg__orb--c {
    width: 460px; height: 460px;
    bottom: -180px; left: 10%;
    background: rgba(var(--color-glow-1-rgb), 0.28);
    animation-duration: 27s;
}
.depth-bg__orb--d {
    width: 360px; height: 360px;
    bottom: 6%; right: 16%;
    background: rgba(var(--color-glow-2-rgb), 0.16);
    animation-duration: 34s;
    animation-direction: reverse;
}
/* Deutlich groesserer Bewegungsradius als der erste Entwurf (war bei
   36px/26px kaum wahrnehmbar, siehe Nutzer-Feedback) - bei Formen dieser
   Groesse/Unschaerfe braucht es einen spuerbar groesseren Weg, damit die
   Drift ueberhaupt auffaellt. */
@keyframes depth-bg-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(110px, -90px) scale(1.18); }
}
@media (max-width: 760px) {
    /* Weniger Ebenen + weniger Unschaerfe auf schmalen Screens: spart
       Fuellrate/Repaint-Kosten auf schwaecheren Mobilgeraeten. */
    .depth-bg__orb { filter: blur(70px); }
    .depth-bg__orb--b, .depth-bg__orb--d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .depth-bg__orb { animation: none; }
}

/* Lichtschacht: als stuende oben RECHTS in der Decke ein Loch und Licht
   faellt schraeg von dort nach links unten in den dunklen Raum -
   klassischer "God Ray"/volumetrischer Lichteffekt aus aufwendigen
   3D-Spielen, hier rein in CSS nachgebaut. mix-blend-mode:screen macht
   daraus additives Licht statt einer deckenden Flaeche - er hellt nur auf,
   verdunkelt nie. Bewusst OHNE Scroll-Parallax auf dem Kegel selbst (kein
   data-depth-speed, siehe detail-parallax.js) - ein Loch in der Decke
   bleibt oben, waehrend man durch den Raum darunter scrollt, anders als
   die frei driftenden Nebel-Kreise.

   Aufbau in mehreren geschachtelten Ebenen - WICHTIG: clip-path und filter:blur
   duerfen NICHT auf demselben Element stehen. Browser wenden clip-path
   offenbar NACH dem Filter an, dann schneidet der harte Trapez-Zuschnitt
   die vom Blur erzeugte weiche Kante wieder exakt ab - Ergebnis war ein
   trotz Blur gestochen scharfer Rand (siehe Nutzer-Screenshot). Deshalb
   jetzt strikt getrennt: erst zuschneiden (.depth-bg__beam-clip), danach
   erst das FERTIG zugeschnittene Ergebnis als Ganzes weichzeichnen
   (.depth-bg__beam-cone, kein eigener clip-path mehr).
     .depth-bg__beam-wrap  - Positionierung + der schraege Kippwinkel
                              (transform-origin sitzt auf dem "Loch" selbst,
                              damit der Kegel um genau diesen Punkt schwenkt;
                              positiver Winkel = faellt nach LINKS unten, ein
                              negativer Winkel hatte ihn faelschlich nach
                              rechts unten kippen lassen)
     .depth-bg__beam-cone  - NUR der Weichzeichner, kein eigener Zuschnitt
     .depth-bg__beam-clip  - NUR der Zuschnitt auf die Kegelform (Trapez)
     .depth-bg__beam-fade  - der Verlauf, der den Kegel schon nach kurzer
                              Strecke ausblenden laesst ("verschwindet, je
                              weiter er in den Raum faellt")
     .depth-bg__beam-ray   - NEUN EINZELNE Elemente (--1 bis --9), keine
                              einzelne geteilte Textur mehr (siehe
                              Nutzer-Feedback: ein gemeinsames, eng
                              repetierendes Gradient-Muster verschmolz unter
                              dem Blur-Radius zu einer einzigen Flaeche statt
                              als getrennte Strahlen erkennbar zu bleiben).
                              Jeder Strahl ist ein eigener senkrechter Balken
                              mit eigener Position/Dicke/Deckkraft, ueber die
                              Kegelbreite verteilt - dadurch bleiben sie auch
                              unter starkem Blur klar voneinander getrennt,
                              UND jeder kann sich beim Scrollen unabhaengig
                              bewegen (siehe detail-parallax.js: pro Strahl
                              eigene Sinuskurve fuer seitliches Wandern +
                              Helligkeit, ueber data-ray-amp/data-ray-phase).
                              Komplett bewegungslos im Ruhezustand (keine
                              CSS-Zeitanimation, Nutzeranforderung "nur
                              Bewegung beim Scroll"). */
.depth-bg__beam-wrap {
    position: absolute;
    top: -40px;
    /* +150px gegenueber der reinen Prozentposition (Nutzeranforderung: der
       Ursprungspunkt oben soll weiter nach rechts) - calc() statt eines
       neuen reinen %-Werts, damit der Versatz auf allen Bildschirmbreiten
       dieselben 150px bleibt statt mitzuskalieren. */
    left: calc(78% + 150px);
    /* Schmaler als der letzte Entwurf (war 760px) - sollte nicht so breit
       wirken (Nutzer-Feedback), naeher am Referenzfoto: ein einzelner,
       eher schlanker Schacht statt einer halben Bildbreite. */
    width: 520px;
    height: 190%;
    margin-left: -260px;
    transform-origin: 50% 0%;
    /* Steiler als der letzte Entwurf (war 30deg) - faellt jetzt naeher an
       der Diagonalen Richtung untere linke Ecke (Nutzeranforderung). */
    transform: rotate(42deg);
    mix-blend-mode: screen;
}
.depth-bg__beam-source {
    position: absolute;
    top: -70px;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(226, 233, 255, 0.35) 45%, transparent 72%);
    filter: blur(16px);
}
/* ZWEI Weichzeichner-Stufen statt einer gemeinsamen (Nutzer-Feedback: ein
   grosser, breiter, stark verwaschener Strahl "verdeckte" die duenneren -
   unter demselben grossen Blur-Radius bluehte die breiteste/hellste Flaeche
   optisch zu stark auf und schluckte die feineren Nachbarn). Jetzt zwei
   parallele Kegel-Instanzen mit demselben Zuschnitt: .depth-bg__beam-cone
   fuer die weiten, gedaempften "Fuell"-Strahlen (starker Blur, bleiben
   diffuses Umgebungslicht) und .depth-bg__beam-cone--sharp fuer die
   duennen, helleren "Kontur"-Strahlen (deutlich weniger Blur + hoehere
   Deckkraft) - die duennen Strahlen scheinen dadurch definiert aus den
   breiten hervor statt darin unterzugehen. Siehe post.php: welche der neun
   .depth-bg__beam-ray--N in welchen der beiden Kegel gehoert. */
.depth-bg__beam-cone {
    position: absolute;
    inset: 0;
    filter: blur(28px);
}
.depth-bg__beam-cone--sharp {
    filter: blur(9px);
}
.depth-bg__beam-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: polygon(46% 0%, 54% 0%, 86% 100%, 14% 100%);
}
.depth-bg__beam-fade {
    position: absolute;
    inset: 0;
    /* Laenger auslaufend als der letzte Entwurf (war schon bei 52% auf 0,
       wirkte zu kurz - Nutzer-Feedback) - der Lichtschacht soll trotzdem
       spuerbar verschwinden, je weiter er in den Raum faellt, nur eben
       spaeter. */
    background: linear-gradient(to bottom, rgba(226, 233, 255, 0.62) 0%, rgba(226, 233, 255, 0.26) 40%, rgba(226, 233, 255, 0) 78%);
}
/* Jeder Strahl: senkrechter Balken, der vom SELBEN Punkt oben (dem "Loch")
   ausgehend um einen eigenen kleinen Winkel auffaechert - GENAU wie
   .depth-bg__beam-wrap weiter oben (transform-origin auf dem Ursprung,
   rotate() um genau diesen Punkt), nur hier pro Einzelstrahl statt fuer
   den ganzen Kegel. Erster Entwurf hatte stattdessen feste left-Prozente
   als PARALLELE senkrechte Balken - die meisten lagen dadurch ausserhalb
   des sich nach unten oeffnenden Trapez-Zuschnitts (der oben nur 46-54%
   breit ist, siehe .depth-bg__beam-clip) und wurden komplett weggeschnitten,
   nur der mittlere Strahl blieb durchgehend sichtbar (sah aus wie "nur
   einer", Nutzer-Feedback). Divergierende Winkel statt paralleler Linien
   loesen das, weil sie genauso auffaechern wie der Trapez-Zuschnitt selbst.
   Weich ausgeblendet an beiden Seiten (linear-gradient 90deg) - Dicke =
   width, Helligkeit = der mittlere Alpha-Wert (je hoeher, desto heller, je
   transparenter, desto dunkler - Nutzer-Formulierung). Dick+dunkel und
   duenn+hell wechseln sich bewusst unregelmaessig ab. */
.depth-bg__beam-ray {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    transform-origin: 50% 0%;
    /* Jeder Strahl blendet ueber SEINE EIGENE Laengsachse aus (Maske statt
       Verlass auf den gemeinsamen Trapez-Zuschnitt) - vorher endeten
       staerker abgewinkelte Strahlen sichtbar frueher/hoeher, weil sie den
       Rand des (unrotierten) Trapez-Zuschnitts schon nach kuerzerer
       Wegstrecke verliessen als die mittleren, kaum abgewinkelten
       (Nutzer-Feedback: "muessen auf derselben Hoehe aufhoeren"). Die Maske
       dreht sich mit dem jeweiligen rotate() JEDES Strahls mit (sie sitzt
       auf demselben Element), faedet also entlang der eigenen
       Strahlrichtung aus statt entlang der Bildschirm-Vertikalen - bei
       aehnlichen Winkelgraden kommt dabei fuer alle neun ein sehr
       aehnlicher Punkt heraus, an dem sie verblassen. Laenger als der
       letzte Entwurf (war schon bei 58% ausgeblendet, wirkte zu kurz -
       Nutzer-Feedback). */
    mask-image: linear-gradient(to bottom, black 0%, black 24%, transparent 82%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 24%, transparent 82%);
    will-change: transform, opacity;
}
/* Faecherwinkel als STATISCHER Teil jeder Modifier-Klasse (nicht per JS
   gesetzt) - das ist bewusst so, damit die Faecherung auch ohne JS oder bei
   prefers-reduced-motion korrekt steht (detail-parallax.js liest dann gar
   nicht erst aus/laeuft nicht). detail-parallax.js kennt denselben Winkel
   zusaetzlich ueber data-ray-angle (post.php) und baut beim Scrollen daraus
   "translateX(-50%) rotate(Winkel) translateX(Schwingung)" neu zusammen -
   der Winkel muss an beiden Stellen uebereinstimmen. Winkel-Spanne breiter
   als im letzten Entwurf (-15..16deg -> -20..22deg), gleicht den jetzt
   steileren Gesamtwinkel des Kegels aus (Nutzeranforderung: die Strahlen
   sollen unten etwas weiter auseinander liegen). */
/* SHARP (--1,3,5,7,8,9): duenn und deutlich heller, gehoeren in
   .depth-bg__beam-cone--sharp (wenig Blur) - das sind die "Kontur"-Strahlen,
   die klar erkennbar hervorstechen sollen.
   SOFT (--2,4,6): breiter und gedaempfter, gehoeren in .depth-bg__beam-cone
   (starker Blur) - reines diffuses Fuelllicht im Hintergrund, absichtlich
   zurueckhaltender als im letzten Entwurf, damit sie die duennen nicht mehr
   uebertoenen. */
.depth-bg__beam-ray--1 { width: 8px;  transform: translateX(-50%) rotate(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent); }
.depth-bg__beam-ray--2 { width: 26px; transform: translateX(-50%) rotate(-15deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
.depth-bg__beam-ray--3 { width: 12px; transform: translateX(-50%) rotate(-9deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); }
.depth-bg__beam-ray--4 { width: 32px; transform: translateX(-50%) rotate(-4deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); }
.depth-bg__beam-ray--5 { width: 6px;  transform: translateX(-50%) rotate(0deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent); }
.depth-bg__beam-ray--6 { width: 22px; transform: translateX(-50%) rotate(5deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
.depth-bg__beam-ray--7 { width: 14px; transform: translateX(-50%) rotate(11deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent); }
.depth-bg__beam-ray--8 { width: 9px;  transform: translateX(-50%) rotate(16deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent); }
.depth-bg__beam-ray--9 { width: 11px; transform: translateX(-50%) rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); }
@media (max-width: 760px) {
    .depth-bg__beam-wrap { width: 340px; margin-left: -170px; }
}