/* ==========================================================================
   BPS Workshop-Guide – Landing Page
   Stylesheet im Stil der Referenz-Website (annaruede.de / OMR Recap).
   ========================================================================== */

/* ==========================================================================
   Base
   ========================================================================== */

:root {
    /* Hero-Galerie-Bildhöhe — wird in einem Punkt gesteuert
       und sowohl von der Galerie als auch von der Folge-Sektion genutzt,
       damit Überlappung und Top-Padding immer synchron bleiben. */
    --img-h: 230px;
}

@media (min-width: 1024px) {
    :root { --img-h: 280px; }
}

@media (max-width: 767px) {
    :root { --img-h: 170px; }
}

body {
    background-color: #2a3a7b;        /* brand-primary */
    color: #f3f4f6;                   /* gray-100 */
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sektion direkt nach der Hero-Galerie:
   Bekommt zusätzliches Top-Padding, sodass ihr Inhalt
   unterhalb des Galerie-Überlapps (2/3 × --img-h) startet.
   Adjacent-Sibling-Selector greift für jede Sektion, die der Galerie folgt. */
section.hero-gallery + section {
    padding-top: calc(var(--img-h) * 2 / 3 + 4rem);
}

@media (min-width: 768px) {
    section.hero-gallery + section {
        padding-top: calc(var(--img-h) * 2 / 3 + 6rem);
    }
}

/* Smooth-Scroll-Offset für Sticky-Header */
section[id] {
    scroll-margin-top: 80px;
}

/* ==========================================================================
   Header (Sticky on Scroll)
   ========================================================================== */

.header-sticky {
    background-color: rgba(42, 58, 123, 0.9);   /* brand-primary mit Transparenz */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Menüpunkte in Großbuchstaben (Desktop + Mobile) */
#main-header nav a,
.mobile-link {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */

#mobile-menu {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ==========================================================================
   Hero – Pattern + Glow (kein Bild, ruhiger Look)
   ========================================================================== */

.hero-pattern {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 2px,
        transparent 2px,
        transparent 18px
    );
}

.hero-glow {
    background:
        radial-gradient(circle at 20% 30%, rgba(181, 197, 49, 0.10), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(181, 197, 49, 0.06), transparent 50%);
}

/* ==========================================================================
   Hero-Galerie (3 gleich große Bilder auf der Hero/Rückblick-Grenze).
   Verbindendes Element: 1/3 der Bildhöhe ragt in den Hero,
   2/3 in die Rückblick-Sektion. Über --img-h gesteuert.
   ========================================================================== */

.hero-gallery {
    position: relative;
    z-index: 5;
    margin-top:    calc(var(--img-h) / -3);          /* 1/3 ragt nach oben in den Hero */
    margin-bottom: calc(var(--img-h) * -2 / 3);      /* 2/3 ragen nach unten in den Rückblick */
    pointer-events: none;                            /* Klicks gehen durch ungenutzte Bereiche durch */
}

.hero-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-gallery__item {
    margin: 0;
    width: 100%;
    height: var(--img-h);
    pointer-events: auto;                            /* Hover/Klick wieder aktiv */
}

/* Echtes Bild (sobald Fotos eingesetzt werden — Markup einfach tauschen) */
.hero-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 25px 55px -15px rgba(0, 0, 0, 0.55);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-gallery__img:hover {
    transform: translateY(-4px);
    box-shadow: 0 35px 70px -20px rgba(0, 0, 0, 0.65);
}

/* Platzhalter-Variante */
.hero-gallery__placeholder {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background-color: #1e2a5a;                       /* brand-secondary */
    background-image:
        linear-gradient(135deg, rgba(181, 197, 49, 0.08) 0%, transparent 60%),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 2px,
            transparent 2px,
            transparent 14px);
    border: 1px dashed rgba(181, 197, 49, 0.3);
    box-shadow: 0 25px 55px -15px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    transition: border-color 0.3s ease, transform 0.4s ease;
}

.hero-gallery__placeholder:hover {
    border-color: rgba(181, 197, 49, 0.6);
    transform: translateY(-4px);
}

.hero-gallery__icon {
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(181, 197, 49, 0.55);
    margin-bottom: 0.6rem;
}

.hero-gallery__caption {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
    line-height: 1.4;
    margin: 0 0 0.6rem 0;
    max-width: 16ch;
}

.hero-gallery__num {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b5c531;
    letter-spacing: 0.18em;
}

/* Mobile-Anpassungen für die Galerie selbst.
   --img-h-Werte je Breakpoint sind global in :root gesetzt, damit
   die Folge-Sektion ihren Top-Abstand synchron mitskalieren kann. */
@media (max-width: 767px) {
    .hero-gallery__grid {
        gap: 0.75rem;
    }

    .hero-gallery__caption {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Scroll-Reveal-Animation
   ========================================================================== */

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gestaffeltes Erscheinen für Karten-Grids
   (statt Inline-Style transition-delay an jeder Karte) */
.grid > .animate-on-scroll:nth-child(2)  { transition-delay: 0.08s; }
.grid > .animate-on-scroll:nth-child(3)  { transition-delay: 0.16s; }
.grid > .animate-on-scroll:nth-child(4)  { transition-delay: 0.24s; }
.grid > .animate-on-scroll:nth-child(5)  { transition-delay: 0.32s; }
.grid > .animate-on-scroll:nth-child(6)  { transition-delay: 0.40s; }
.grid > .animate-on-scroll:nth-child(7)  { transition-delay: 0.48s; }
.grid > .animate-on-scroll:nth-child(8)  { transition-delay: 0.56s; }

.space-y-6 > .animate-on-scroll:nth-child(2) { transition-delay: 0.10s; }
.space-y-6 > .animate-on-scroll:nth-child(3) { transition-delay: 0.20s; }

/* ==========================================================================
   Step-Items (3 erste Schritte)
   ========================================================================== */

.step-item {
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.step-item:hover {
    transform: translateX(4px);
    border-color: rgba(181, 197, 49, 0.3);
}

/* Zeit-Badge neben der Step-Überschrift */
.step-time {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b5c531;
    background-color: rgba(181, 197, 49, 0.10);
    border: 1px solid rgba(181, 197, 49, 0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Geführte Sub-Schritte als Mini-Checkliste */
.step-checklist {
    list-style: none;
    margin: 0 0 1.25rem 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.step-checklist li {
    position: relative;
    padding-left: 1.75rem;
    color: #d1d5db;             /* gray-300 */
    line-height: 1.55;
}

.step-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.95rem;
    height: 0.95rem;
    border: 1.5px solid rgba(181, 197, 49, 0.55);
    border-radius: 4px;
    background-color: rgba(181, 197, 49, 0.06);
}

.step-checklist li strong {
    color: #ffffff;
    font-weight: 600;
}

/* Ergebnis-Zeile */
.step-outcome {
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: rgba(181, 197, 49, 0.08);
    border-left: 3px solid #b5c531;
    border-radius: 0 8px 8px 0;
    color: #e5e7eb;             /* gray-200 */
    font-size: 0.95rem;
    line-height: 1.5;
}

.step-outcome__label {
    display: inline-block;
    color: #b5c531;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

/* ==========================================================================
   Theme-Cards (8 Themen-Teaser)
   ========================================================================== */

.theme-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 197, 49, 0.4);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
}

.theme-card__num {
    color: #b5c531;                     /* brand-accent */
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.theme-card__cta {
    display: inline-flex;
    align-items: center;
    color: #b5c531;
    font-weight: 600;
    transition: color 0.2s ease;
}

.theme-card:hover .theme-card__cta {
    color: #ffffff;
}

.theme-card__cta span[aria-hidden] {
    display: inline-block;
    transition: transform 0.2s ease;
}

.theme-card:hover .theme-card__cta span[aria-hidden] {
    transform: translateX(4px);
}

/* ==========================================================================
   Reduced-Motion-Respektierung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .theme-card:hover,
    .step-item:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   Mobile-Refinements
   ========================================================================== */

@media (max-width: 640px) {
    .step-item {
        padding: 1.25rem;
        gap: 1rem;
    }

    .theme-card__num {
        font-size: 2rem;
    }
}

/* ==========================================================================
   CHECKLISTEN-SEITE (checkliste-erste-schritte.html)
   Eigenes "Druckbogen"-Layout: hell, klar, A4-tauglich.
   ========================================================================== */

body.is-checklist {
    background-color: #f5f5f0;
    color: #1f2937;             /* gray-800 */
    font-family: 'Inter', sans-serif;
}

.sheet {
    max-width: 800px;
    margin: 2rem auto;
    background: #ffffff;
    padding: 3rem 3.5rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.sheet__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #2a3a7b;
    margin-bottom: 2rem;
}

.sheet__brand {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a3a7b;
}

.sheet__brand span {
    color: #b5c531;
    margin: 0 0.3em;
}

.sheet__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.btn-pill svg {
    width: 1.1rem;
    height: 1.1rem;
}

.btn-pill--primary {
    background-color: #b5c531;
    color: #1e2a5a;
}

.btn-pill--primary:hover {
    background-color: #2a3a7b;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-pill--ghost {
    background-color: transparent;
    color: #2a3a7b;
    border: 1px solid rgba(42, 58, 123, 0.25);
}

.btn-pill--ghost:hover {
    background-color: rgba(42, 58, 123, 0.05);
}

.sheet h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
    color: #1e2a5a;
    margin: 0 0 0.5rem 0;
}

.sheet h1 em {
    font-style: normal;
    color: #b5c531;
}

.sheet__lead {
    font-size: 1.1rem;
    color: #4b5563;             /* gray-600 */
    line-height: 1.55;
    margin: 0 0 2rem 0;
}

.sheet__how-to {
    background-color: #f9fafb;
    border-left: 4px solid #b5c531;
    padding: 1.25rem 1.5rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 2.5rem;
}

.sheet__how-to-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a3a7b;
    margin: 0 0 0.5rem 0;
}

.sheet__how-to ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #374151;             /* gray-700 */
    line-height: 1.55;
}

.sheet__how-to li {
    margin-bottom: 0.25rem;
}

/* Schritt-Block */
.cl-step {
    margin-bottom: 2.5rem;
    page-break-inside: avoid;
}

.cl-step__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

.cl-step__num {
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #b5c531;
    line-height: 1;
}

.cl-step__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e2a5a;
    margin: 0;
    flex: 1;
}

.cl-step__time {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;             /* gray-500 */
    white-space: nowrap;
}

.cl-step__intro {
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* Checklisten-Items */
.cl-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cl-list label {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.5;
    color: #1f2937;
}

.cl-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    border: 2px solid #2a3a7b;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cl-list input[type="checkbox"]:hover {
    border-color: #b5c531;
}

.cl-list input[type="checkbox"]:checked {
    background-color: #b5c531;
    border-color: #b5c531;
}

.cl-list input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 11px;
    border: solid #1e2a5a;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.cl-list input[type="checkbox"]:checked + .cl-text {
    text-decoration: line-through;
    color: #9ca3af;             /* gray-400 */
}

.cl-text strong {
    color: #1e2a5a;
    font-weight: 700;
    display: block;
    margin-bottom: 0.1rem;
}

.cl-text small {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Notizfeld unter jedem Schritt */
.cl-notes {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #d1d5db;
}

.cl-notes__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.cl-notes__lines {
    height: 4.5rem;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1.4rem,
        #e5e7eb 1.4rem,
        #e5e7eb calc(1.4rem + 1px)
    );
    border-bottom: 1px solid #e5e7eb;
}

/* Final-Block "Im Zweifel" — abgesetzt mit dezentem Lime-Untergrund */
.cl-step--final {
    background: linear-gradient(135deg, rgba(181, 197, 49, 0.08), rgba(181, 197, 49, 0.02));
    border: 1px solid rgba(181, 197, 49, 0.3);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
}

.cl-step--final .cl-step__head {
    border-bottom-color: rgba(181, 197, 49, 0.25);
}

.cl-step--final .cl-step__num {
    color: #b5c531;
}

.cl-list--rules {
    gap: 0.6rem;
}

/* Footer der Checklisten-Seite */
.sheet__footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
}

.sheet__footer a {
    color: #2a3a7b;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   THEME-PAGE — gemeinsame Vorlage für alle 8 Themen
   ----------------------------------------------------------------------------
   Aufbau (immer gleich):
     1. theme-hero            (Hero mit Eyebrow, Titel, Pills, optional Disclaimer)
     2. tldr                  (Das Wichtigste in 30 Sekunden)
     3. theme-body            (zweispaltig: theme-toc + theme-article)
     4. next-up               (Vor/Zurück + CTA)
   ----------------------------------------------------------------------------
   Wiederverwendbare Bausteine im Artikel:
     - theme-section / theme-section__title / theme-section__eyebrow
     - theme-prose / theme-subhead / theme-note
     - callout (--tip / --warning)         Tipp- und Achtung-Boxen
     - pullquote                            Zitat
     - img-placeholder                      Grafik-Platzhalter
     - rule-grid / rule-card                3-Säulen-Karten
     - timeline                             Zeitstrahl
     - step-list / step-block               Nummerierte Schritte
     - risk-grid / risk-card                Risikoklassen-Tabelle
     - rule-list / check-mini               einfache Sub-Listen
     - qa-list / qa-item                    Frage-Antwort-Karten
     - cheat-grid / cheat-card              Cheat-Sheet
     - download-cta                         Print-/Download-Karte
     - sources                              Quellen-Liste
   ========================================================================== */

/* -- Lese-Fortschrittsleiste unter dem Header --------------------------- */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.06);
    z-index: 60;
    pointer-events: none;
}

.reading-progress__fill {
    height: 100%;
    width: 0%;
    background-color: #b5c531;
    transition: width 0.1s linear;
}

/* -- Theme-Hero --------------------------------------------------------- */
.theme-hero {
    position: relative;
    padding: 11rem 0 4rem;
    background:
        radial-gradient(circle at 20% 40%, rgba(181, 197, 49, 0.10), transparent 50%),
        linear-gradient(180deg, #2a3a7b 0%, #1e2a5a 100%);
    overflow: hidden;
}

.theme-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(229, 231, 235, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
}

.theme-hero__crumb:hover { color: #b5c531; }
.theme-hero__crumb svg   { width: 1rem; height: 1rem; }

.theme-hero__eyebrow {
    display: inline-block;
    color: #b5c531;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.theme-hero__title {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 1.25rem 0;
    max-width: 900px;
    letter-spacing: -0.01em;
}

.theme-hero__subtitle {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #d1d5db;
    max-width: 720px;
    margin: 0 0 2rem 0;
}

.theme-hero__pills {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.theme-hero__pills li {
    font-size: 0.85rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
    backdrop-filter: blur(4px);
}

.theme-hero__disclaimer {
    background-color: rgba(252, 211, 77, 0.10);
    border: 1px solid rgba(252, 211, 77, 0.35);
    border-left-width: 3px;
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1.25rem;
    color: #fde68a;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 720px;
}

.theme-hero__disclaimer strong { color: #fef3c7; }

/* -- TL;DR-Block -------------------------------------------------------- */
.tldr {
    padding: 4.5rem 0 5.5rem;
    background-color: #2a3a7b;
}

@media (min-width: 768px) {
    .tldr {
        padding: 6rem 0 7rem;
    }
}

.tldr__card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    background-color: #1e2a5a;
    border-radius: 1rem;
    border: 1px solid rgba(181, 197, 49, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

.tldr__label {
    display: inline-block;
    color: #b5c531;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.tldr__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.tldr__list li {
    position: relative;
    padding-left: 1.6rem;
    color: #e5e7eb;
    line-height: 1.55;
    font-size: 1rem;
}

.tldr__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: #b5c531;
}

.tldr__list strong { color: #ffffff; }

/* -- TLDR Columns-Variant: 3-spaltige Karten mit Nummer und Top-Border --
   Alternative zur Bullet-List, ohne dunklen Inner-Card-Hintergrund.
   Wird direkt auf <section class="tldr"> aufgesetzt (ohne .tldr__card).
   ------------------------------------------------------------------------ */
.tldr__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .tldr__columns { grid-template-columns: repeat(3, 1fr); }
}

.tldr__column {
    border-top: 3px solid #b5c531;
    padding-top: 1rem;
}

.tldr__column-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #b5c531;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.tldr__column-title {
    display: block;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.tldr__column-text {
    color: #e5e7eb;
    line-height: 1.6;
}

/* -- Theme-Body: zweispaltig auf Desktop --------------------------------
   Layout: Artikel links (breit), TOC rechts (schmal, sticky).
   DOM-Order: TOC first → auf Mobile oben als Akkordeon.
   Auf Desktop platzieren wir per grid-column explizit, statt order zu nutzen
   (order ändert in Grid nur die Auto-Placement-Reihenfolge, nicht die Spalte).
   ------------------------------------------------------------------------ */
.theme-body {
    display: block;
    padding-top: 4rem;
    padding-bottom: 6rem;
    max-width: 1280px;
}

.theme-article {
    max-width: 100%;
}

/* -- Sticky-TOC --------------------------------------------------------- */
.theme-toc {
    position: relative;
}

@media (min-width: 1024px) {
    .theme-toc {
        position: sticky;
        top: 110px;
        align-self: start;
        height: max-content;
    }
}

.theme-toc__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background-color: #1e2a5a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    color: #e5e7eb;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}

.theme-toc__toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s ease;
}

.theme-toc__toggle.is-open svg { transform: rotate(180deg); }

@media (min-width: 1024px) {
    .theme-toc__toggle { display: none; }
}

.theme-toc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-top: 0.5rem;
}

.theme-toc__panel.is-open { max-height: 600px; }

@media (min-width: 1024px) {
    .theme-toc__panel {
        max-height: none;
        overflow: visible;
        margin-top: 0;
        padding: 0;
    }
}

.theme-toc__label {
    display: none;
    color: #b5c531;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    margin: 0 0 0.85rem 0;
}

@media (min-width: 1024px) {
    .theme-toc__label { display: block; }
}

.theme-toc__list {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 1rem 1.25rem;
    background-color: #1e2a5a;
    border-radius: 0 0 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

@media (min-width: 1024px) {
    .theme-toc__list {
        background: transparent;
        padding: 0;
    }
}

.theme-toc__list li {
    counter-increment: toc;
    list-style: none;
}

.theme-toc__link {
    display: block;
    padding: 0.5rem 0 0.5rem 1.85rem;
    position: relative;
    color: rgba(229, 231, 235, 0.65);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.theme-toc__link::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(181, 197, 49, 0.5);
}

.theme-toc__link:hover    { color: #ffffff; }
.theme-toc__link.is-active {
    color: #ffffff;
    border-color: #b5c531;
}

.theme-toc__link.is-active::before { color: #b5c531; }

/* -- Theme-Article (volle Breite, Text aber begrenzt für Lesbarkeit) ---- */
.theme-article {
    max-width: 1100px;
    margin: 0 auto;
    color: #e5e7eb;
    font-size: 1.05rem;
    line-height: 1.7;
    /* Lange deutsche Komposita („Urheber-/AGG-/Geschäftsgeheimnisrecht")
       brechen — sonst sprengen sie die Spalten auf Mobile. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Fließtext + Headlines auf angenehme Lesebreite begrenzt — Grids und
   Karten dürfen aber voll spannen. */
.theme-section__title,
.theme-subhead,
.theme-prose {
    max-width: 760px;
}

/* Gleiches für die TL;DR-Karte und alle Karten mit langen Texten */
.tldr__list,
.qa-item,
.rule-card,
.timeline__content {
    overflow-wrap: break-word;
    word-break: break-word;
}

.theme-article > * + * { margin-top: 1.5rem; }

/* Auch Sibling-Elemente INNERHALB einer theme-section bekommen Atemraum —
   sonst klebt z. B. ein Callout direkt unter einer rule-list ohne Abstand. */
.theme-section > * + * { margin-top: 1.75rem; }

/* Sektion innerhalb des Artikels */
.theme-section {
    scroll-margin-top: 110px;
    padding-top: 2.5rem;
    margin-top: 3rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0 !important;
}

.theme-section__eyebrow {
    display: inline-block;
    color: #b5c531;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    margin-bottom: 0.6rem;
}

.theme-section__title {
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.01em;
}

.theme-subhead {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2.5rem 0 1.25rem 0;
    line-height: 1.3;
}

.theme-prose {
    color: #d1d5db;
    line-height: 1.7;
    margin: 0;
}

.theme-prose strong { color: #ffffff; font-weight: 600; }
.theme-prose em     { color: #e5e7eb; font-style: italic; }

.theme-prose--lead {
    font-size: 1.15rem;
    color: #e5e7eb;
}

.theme-note {
    font-size: 0.9rem;
    color: rgba(229, 231, 235, 0.7);
    line-height: 1.5;
    margin-top: 1rem;
}

.link-accent {
    color: #b5c531;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-accent:hover { color: #ffffff; }

/* -- Callouts (Tipp / Achtung) — Vollflächen-Stil ----------------------- */
.callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.85rem;
    border: none;
}

.callout__icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 0.1rem;
    /* Falls Emoji im Markup, ggf. ausblenden und SVG-Mask einsetzen — siehe Variants unten. */
}

.callout__body { flex: 1; }

.callout__title {
    font-weight: 700;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.callout__body p { margin: 0; line-height: 1.6; }
.callout__body p + p { margin-top: 0.5rem; }

/* TIPP — blauer Hintergrund (#3c78d8), weiße Schrift */
.callout--tip {
    background-color: #3c78d8;
    color: #ffffff;
}
.callout--tip .callout__title { color: #ffffff; }
.callout--tip strong          { color: #ffffff; }
.callout--tip a               { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.callout--tip a:hover         { color: rgba(255, 255, 255, 0.8); }
/* Glühbirnen-Emoji im Markup ist OK — bleibt sichtbar */

/* WARNING — Lime-Hintergrund (#b5c531), dunkelblaue Schrift */
.callout--warning {
    background-color: #b5c531;
    color: #1e2a5a;
}
.callout--warning .callout__title { color: #1e2a5a; }
.callout--warning strong          { color: #1e2a5a; }
.callout--warning a               { color: #1e2a5a; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.callout--warning a:hover         { color: rgba(30, 42, 90, 0.7); }

/* Warning bekommt ein „echtes" Warndreieck als SVG-Hintergrund-Icon —
   überschreibt das ⚠️-Emoji im Markup für konsistenten Look. */
.callout--warning .callout__icon {
    /* Emoji-Text ausblenden, eigenes Icon einsetzen */
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0;            /* Emoji unsichtbar */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2a5a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 0.05rem;
}

/* -- Pull-Quote --------------------------------------------------------- */
.pullquote {
    margin: 3rem auto;
    text-align: center;
    max-width: 640px;
    padding: 2rem 1.5rem;
}

.pullquote__mark {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(181, 197, 49, 0.4);
    margin: 0 auto 1rem;
    display: block;
}

.pullquote blockquote {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    font-style: italic;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.pullquote cite {
    font-style: normal;
    font-size: 0.85rem;
    color: #b5c531;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* -- Bild-Platzhalter --------------------------------------------------- */
.img-placeholder {
    margin: 2rem 0;
}

.img-placeholder__box {
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    background-color: rgba(30, 42, 90, 0.5);
    background-image:
        linear-gradient(135deg, rgba(181, 197, 49, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 2px,
            transparent 2px,
            transparent 14px);
    border: 1px dashed rgba(181, 197, 49, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.img-placeholder__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(181, 197, 49, 0.5);
    margin-bottom: 0.85rem;
}

.img-placeholder__caption {
    color: rgba(229, 231, 235, 0.8);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    max-width: 380px;
}

.img-placeholder__caption small {
    display: block;
    margin-top: 0.4rem;
    font-weight: 400;
    color: rgba(229, 231, 235, 0.5);
}

/* -- Rule-Grid (Drei Säulen) ------------------------------------------- */
.rule-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .rule-grid { grid-template-columns: repeat(3, 1fr); }
}

.rule-card {
    background-color: #1e2a5a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    padding: 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.rule-card:hover {
    border-color: rgba(181, 197, 49, 0.3);
    transform: translateY(-2px);
}

.rule-card__num {
    display: inline-block;
    color: rgba(181, 197, 49, 0.6);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.rule-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.rule-card__since {
    font-size: 0.8rem;
    color: rgba(229, 231, 235, 0.6);
    margin: 0 0 1rem 0;
}

.rule-card p:last-child {
    color: #d1d5db;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.rule-card strong { color: #ffffff; }

/* -- Timeline · horizontal, scrollbar bei >3 Items ---------------------
   Funktioniert sowohl für datierte Meilensteine als auch für nummerierte
   Sequenzen (z. B. „Auf einen Blick · 7 Schritte"). Items haben fixe Breite,
   Dots auf der gemeinsamen Connector-Linie oben.
   ---------------------------------------------------------------------- */
.timeline {
    list-style: none;
    margin: 1.5rem 0 0 0;
    padding: 0 0 1rem;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0.5rem;
}

/* Slim Scrollbar — nur sichtbar wenn nötig */
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.04); border-radius: 9999px; }
.timeline::-webkit-scrollbar-thumb { background-color: rgba(181, 197, 49, 0.35); border-radius: 9999px; }
.timeline::-webkit-scrollbar-thumb:hover { background-color: rgba(181, 197, 49, 0.6); }

.timeline__item {
    flex: 0 0 14rem;
    scroll-snap-align: start;
    position: relative;
    padding: 2rem 0 0;
}

/* Connector-Linie zwischen den Dots, oben */
.timeline__item::before {
    content: '';
    position: absolute;
    top: 0.85rem;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgba(181, 197, 49, 0.2);
    z-index: 0;
}
/* Erste Linie nur halb (von Dot nach rechts) */
.timeline__item:first-child::before { left: 50%; }
/* Letzte Linie nur halb (links bis Dot) */
.timeline__item:last-child::before  { right: 50%; }

.timeline__dot {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: rgba(181, 197, 49, 0.45);
    border: 3px solid #1e2a5a;
    box-shadow: 0 0 0 2px rgba(181, 197, 49, 0.4);
    z-index: 1;
}

.timeline__dot--past {
    background-color: rgba(181, 197, 49, 0.7);
    box-shadow: 0 0 0 2px rgba(181, 197, 49, 0.5);
}
.timeline__dot--now {
    background-color: #b5c531;
    box-shadow: 0 0 0 2px #b5c531, 0 0 0 7px rgba(181, 197, 49, 0.25);
}

.timeline__date {
    display: block;
    color: #b5c531;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.5rem;
}

.timeline__content {
    text-align: center;
    padding: 0 0.5rem;
}

.timeline__content h4 {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.timeline__content p {
    margin: 0;
    color: #d1d5db;
    line-height: 1.5;
    font-size: 0.85rem;
}

/* --- Compact-Variante · ALLES auf einen Blick (keine Scrollbar) ----------
   Items teilen sich gleichmäßig auf, jeder Step wird sichtbar.
   Ideal für „Auf einen Blick"-Übersichten mit knappen Step-Labels. */
.timeline--compact {
    overflow-x: visible;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-bottom: 0;
}
.timeline--compact .timeline__item {
    flex: 1 1 0;
    min-width: 0;
}
.timeline--compact .timeline__date {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}
.timeline--compact .timeline__content h4 {
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 0 0.15rem;
}
.timeline--compact .timeline__dot {
    width: 0.7rem;
    height: 0.7rem;
    top: 0.5rem;
}
.timeline--compact .timeline__item {
    padding-top: 1.5rem;
}
.timeline--compact .timeline__item::before {
    top: 0.7rem;
}

/* Auf engen Viewports darf Compact umbrechen (z. B. Mobile) */
@media (max-width: 767px) {
    .timeline--compact {
        flex-wrap: wrap;
    }
    .timeline--compact .timeline__item {
        flex: 0 0 calc(33.333% - 0.5rem);
    }
}

.timeline__content strong { color: #ffffff; }

.timeline__item--now .timeline__content {
    background-color: rgba(181, 197, 49, 0.08);
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem;
}

/* Step-List/step-block entfernt — Pattern wird durch step-item ersetzt.
   step-block__tag bleibt: kleines Lime-Pill-Badge innerhalb h3 (z. B. „~60 Min"). */

.step-block__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1e2a5a;
    background-color: #b5c531;
    padding: 0.2rem 0.7rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* -- Risiko-Grid -------------------------------------------------------- */
.risk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

@media (min-width: 640px) {
    .risk-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .risk-grid { grid-template-columns: repeat(4, 1fr); }
}

.risk-card {
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px solid;
    background-color: rgba(30, 42, 90, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 100%;
}

.risk-card__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.risk-card__example {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(229, 231, 235, 0.85);
    font-weight: 600;
}

.risk-card__duty {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(229, 231, 235, 0.7);
    line-height: 1.45;
}

.risk-card--minimal { border-color: rgba(34, 197, 94, 0.4); }
.risk-card--minimal .risk-card__label { color: #86efac; }

.risk-card--limited { border-color: rgba(181, 197, 49, 0.5); }
.risk-card--limited .risk-card__label { color: #b5c531; }

.risk-card--high    { border-color: rgba(251, 146, 60, 0.5); }
.risk-card--high .risk-card__label    { color: #fdba74; }

.risk-card--banned  { border-color: rgba(248, 113, 113, 0.5); background-color: rgba(248, 113, 113, 0.06); }
.risk-card--banned .risk-card__label  { color: #fca5a5; }

/* -- Rule-List ---------------------------------------------------------- */
.rule-list {
    list-style: none;
    margin: 0.85rem 0 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    max-width: 600px;
}

.rule-list li {
    background-color: rgba(255, 255, 255, 0.025);
    border-left: 3px solid rgba(181, 197, 49, 0.5);
    padding: 0.85rem 1rem;
    border-radius: 0 6px 6px 0;
    color: #d1d5db;
    font-size: 0.95rem;
    line-height: 1.55;
}

.rule-list strong { color: #ffffff; display: block; margin-bottom: 0.2rem; }

/* -- Q&A-Liste (Use-Case-Checkliste 5 Fragen) -------------------------- */
.qa-list {
    list-style: none;
    margin: 1.5rem 0 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.qa-item {
    background-color: #1e2a5a;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease;
}

.qa-item:hover { border-color: rgba(181, 197, 49, 0.25); }

.qa-item__head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qa-item__num {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b5c531;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.qa-item__question {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.qa-item__examples {
    margin: 0 0 1rem 0;
    color: rgba(229, 231, 235, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

.qa-item__examples strong {
    color: rgba(229, 231, 235, 0.85);
    font-style: normal;
}

.qa-item__answers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .qa-item__answers { grid-template-columns: 1fr 1fr; }
}

.qa-answer {
    padding: 0.95rem 1.1rem;
    border-radius: 0.65rem;
    border: 1px solid;
}

.qa-answer__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}

.qa-answer p {
    margin: 0;
    color: #e5e7eb;
    line-height: 1.5;
    font-size: 0.92rem;
}

.qa-answer strong { color: #ffffff; }

.qa-answer--no {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

.qa-answer--no .qa-answer__label {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.qa-answer--yes {
    background-color: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.3);
}

.qa-answer--yes .qa-answer__label {
    background-color: rgba(251, 146, 60, 0.2);
    color: #fdba74;
}

/* Cheat-Grid/Card/List/Check entfernt — Pattern wird durch rule-grid ersetzt. */

/* -- Download-CTA-Karte ------------------------------------------------- */
.download-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(181, 197, 49, 0.12), rgba(181, 197, 49, 0.04));
    border: 1px solid rgba(181, 197, 49, 0.4);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .download-cta {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.download-cta__icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: #b5c531;
    color: #1e2a5a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-cta__icon svg { width: 1.4rem; height: 1.4rem; }

.download-cta__body { flex: 1; }

.download-cta__body h3 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.download-cta__body p {
    margin: 0;
    color: rgba(229, 231, 235, 0.85);
    font-size: 0.92rem;
    line-height: 1.5;
}

.download-cta__btn { white-space: nowrap; }

/* -- Quellen ------------------------------------------------------------ */
.sources {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.sources li {
    color: #d1d5db;
    line-height: 1.5;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.95rem;
}

.sources li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #b5c531;
    font-weight: 700;
}

.sources strong { color: #ffffff; }

/* -- Next-Up (vor / zurück / hub) -------------------------------------- */
.next-up {
    background-color: #1e2a5a;
    padding: 4rem 0 5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.next-up__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .next-up__grid { grid-template-columns: 1fr 1fr 1fr; }
}

.next-up__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem 1.75rem;
    background-color: #2a3a7b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.85rem;
    color: #e5e7eb;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.next-up__card:hover {
    transform: translateY(-2px);
    border-color: rgba(181, 197, 49, 0.4);
}

.next-up__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(181, 197, 49, 0.85);
}

.next-up__title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.next-up__card--cta {
    background-color: #b5c531;
    border-color: #b5c531;
}

.next-up__card--cta .next-up__label,
.next-up__card--cta .next-up__title {
    color: #1e2a5a;
}

.next-up__card--cta:hover {
    background-color: #ffffff;
    border-color: #ffffff;
}

/* -- Theme-Figure (echte Bilder/Screenshots im Artikel) ----------------
   Unterscheidet sich vom .img-placeholder (gestrichelter Rahmen): sauber
   eingerahmtes Bild mit Drop-Shadow + Caption darunter. */

.theme-figure {
    margin: 1.5rem 0;
}

.theme-figure__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);
    background: rgba(30, 42, 90, 0.4);
}

.theme-figure__caption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: rgba(229, 231, 235, 0.7);
    text-align: center;
    line-height: 1.45;
    font-style: italic;
}

.theme-figure__caption strong {
    color: rgba(229, 231, 235, 0.95);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 0.45rem;
}

/* -- Code-Block (z. B. Systemprompt zum Kopieren) ---------------------- */

.code-block {
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.65rem;
    overflow: hidden;
}

.code-block__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(229, 231, 235, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.code-block__copy {
    background: #b5c531;
    color: #1e2a5a;
    border: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color 0.2s ease;
}

.code-block__copy:hover {
    background: #ffffff;
}

.code-block__copy.is-copied {
    background: #ffffff;
}

.code-block pre {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #d1d5db;
    max-height: 22rem;
    overflow-y: auto;
}

/* Klappbarer Container — falls <details><summary><div class="code-block">…</div></details> */
details > .code-block {
    margin-top: 0.85rem;
}

details.code-collapse summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    background: rgba(181, 197, 49, 0.08);
    border: 1px solid rgba(181, 197, 49, 0.3);
    border-radius: 0.65rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #b5c531;
    list-style: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

details.code-collapse summary::-webkit-details-marker { display: none; }

details.code-collapse summary::before {
    content: '▶ ';
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.2s ease;
}

details.code-collapse[open] summary::before {
    transform: rotate(90deg);
}

details.code-collapse[open] summary {
    background: rgba(181, 197, 49, 0.15);
    border-radius: 0.65rem 0.65rem 0 0;
    border-bottom: 0;
}

details.code-collapse[open] .code-block {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Decision-Tree entfernt — wird nicht mehr genutzt. */

/* -- Theme-Page: Print-Optimierung ------------------------------------- */
@media print {
    body.is-theme-page {
        background: #ffffff !important;
        color: #1f2937 !important;
    }

    body.is-theme-page #main-header,
    body.is-theme-page .reading-progress,
    body.is-theme-page .theme-toc,
    body.is-theme-page .theme-hero__pills,
    body.is-theme-page .theme-hero__crumb,
    body.is-theme-page .next-up,
    body.is-theme-page .download-cta__btn,
    body.is-theme-page .download-cta__icon,
    body.is-theme-page footer,
    body.is-theme-page #mobile-menu {
        display: none !important;
    }

    body.is-theme-page .theme-hero {
        padding: 0 0 1rem;
        background: #ffffff !important;
        border-bottom: 2px solid #2a3a7b;
        margin-bottom: 1.5rem;
    }

    body.is-theme-page .theme-hero__title,
    body.is-theme-page .theme-section__title,
    body.is-theme-page .theme-subhead,
    body.is-theme-page .qa-item__question,
    body.is-theme-page .rule-card__title,
    body.is-theme-page .download-cta__body h3 {
        color: #1e2a5a !important;
    }

    body.is-theme-page .theme-hero__subtitle,
    body.is-theme-page .theme-prose,
    body.is-theme-page .theme-prose strong,
    body.is-theme-page .rule-card p,
    body.is-theme-page .qa-answer p,
    body.is-theme-page .timeline__content p {
        color: #1f2937 !important;
    }

    body.is-theme-page .tldr__card,
    body.is-theme-page .qa-item,
    body.is-theme-page .rule-card,
    body.is-theme-page .download-cta {
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        page-break-inside: avoid;
    }

    body.is-theme-page .img-placeholder,
    body.is-theme-page .pullquote {
        display: none;
    }

    body.is-theme-page .theme-body {
        display: block;
    }

    body.is-theme-page .theme-article {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   PRINT-OPTIMIERUNG (greift auf der Checklisten-Seite & generell)
   ========================================================================== */

@media print {
    @page {
        size: A4;
        margin: 16mm 14mm;
    }

    body.is-checklist {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .sheet {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
    }

    /* Aktionen, Header-Buttons, Zurück-Link nicht drucken */
    .no-print,
    .sheet__actions {
        display: none !important;
    }

    .sheet__topbar {
        margin-bottom: 1.5rem;
    }

    .cl-step {
        margin-bottom: 2rem;
    }

    .cl-step__head {
        border-bottom: 1.5px solid #000000 !important;
    }

    /* Checkboxen so darstellen, dass sie auf Papier handcheckbar sind */
    .cl-list input[type="checkbox"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        background: #ffffff !important;
        border: 1.5px solid #000000 !important;
        width: 1.1rem !important;
        height: 1.1rem !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .cl-list input[type="checkbox"]:checked {
        background: #ffffff !important;
    }

    .cl-list input[type="checkbox"]:checked::after {
        border-color: #000000 !important;
    }

    /* Linien fürs handschriftliche Notieren stärker für den Druck */
    .cl-notes__lines {
        background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 1.4rem,
            #999999 1.4rem,
            #999999 calc(1.4rem + 0.5px)
        ) !important;
    }

    a {
        color: #000000 !important;
        text-decoration: none !important;
    }

    /* Animationen im Druck deaktivieren */
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Leistungen-Tabs (auf anna-ruede.html)
   ========================================================================== */

.tab-active {
    background-color: #b5c531;
    color: #1e2a5a;
}

/* ==========================================================================
   Onsite-Nav (horizontale Sprungmarken-Leiste, sticky nach Scroll)
   Liegt zwischen Hero und TL;DR, dockt nach Scroll an Header an.
   ========================================================================== */

.onsite-nav {
    position: sticky;
    top: var(--header-h, 3.5rem);
    z-index: 40;
    background-color: rgba(30, 42, 90, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.onsite-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 3rem;
    position: relative;
}

.onsite-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #d1d5db;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.onsite-nav__back:hover { color: #b5c531; }
.onsite-nav__back svg   { width: 0.85rem; height: 0.85rem; }

.onsite-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    gap: 0.25rem;
    flex-wrap: nowrap;
    align-items: center;
}

@media (min-width: 768px) {
    .onsite-nav__list { display: flex; }
}

.onsite-nav__link {
    color: #d1d5db;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.onsite-nav__link:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.06); }
.onsite-nav__link.is-active {
    color: #1e2a5a;
    background-color: #b5c531;
}

/* Mobile Toggle */
.onsite-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (min-width: 768px) {
    .onsite-nav__toggle { display: none; }
}
.onsite-nav__toggle svg { width: 0.85rem; height: 0.85rem; transition: transform 0.2s ease; }
.onsite-nav__toggle.is-open svg { transform: rotate(180deg); }

.onsite-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(30, 42, 90, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.75rem 1.5rem 1rem;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}
.onsite-nav__panel.is-open { display: flex; }
@media (min-width: 768px) {
    .onsite-nav__panel { display: none !important; }
}
.onsite-nav__panel .onsite-nav__link {
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.9rem;
}

/* ==========================================================================
   FAQ — Akkordeon (native <details>/<summary>)
   ========================================================================== */

.faq-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.faq-item {
    background-color: rgba(30, 42, 90, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(181, 197, 49, 0.4); }

.faq-item__summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.4rem 1.6rem;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { display: none; content: ''; }

.faq-item__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #b5c531;
    flex-shrink: 0;
    line-height: 1;
}

.faq-item__question {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .faq-item__question { font-size: 1.05rem; }
}

.faq-item__chevron {
    width: 1.1rem;
    height: 1.1rem;
    color: #b5c531;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__body {
    padding: 0 1.6rem 1.5rem;
    color: #d1d5db;
    line-height: 1.7;
    font-size: 0.98rem;
}
.faq-item__body p {
    margin: 0 0 0.85rem;
}
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body strong { color: #ffffff; }
.faq-item__body em     { color: #e5e7eb; }
.faq-item__body a      { color: #b5c531; text-decoration: underline; }
.faq-item__body a:hover { color: #ffffff; }

.faq-item__quote {
    border-left: 3px solid #b5c531;
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1.1rem;
    color: #e5e7eb;
    font-style: italic;
    background-color: rgba(181, 197, 49, 0.06);
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ==========================================================================
   Theme-Card · Placeholder ("Kommt bald" — deutlich ausgegraut)
   ========================================================================== */

/* Doppel-Klassen-Selektor schlägt die .animate-on-scroll.is-visible-Regel,
   die opacity sonst zurück auf 1 setzen würde. */
.theme-card.theme-card--placeholder,
.theme-card.theme-card--placeholder.is-visible {
    opacity: 0.4;
    filter: grayscale(0.85);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.theme-card.theme-card--placeholder:hover {
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* ==========================================================================
   Themen-Hub: Suche + Filter-Pills + Karten-Type-Eyebrow
   ========================================================================== */

.theme-hub {
    display: grid;
    gap: 1rem;
}

/* --- Suchfeld ------------------------------------------------------------- */
.theme-hub__search {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(42, 58, 123, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0 1.5rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.theme-hub__search:focus-within {
    border-color: #b5c531;
    background-color: rgba(42, 58, 123, 0.85);
}
.theme-hub__search-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #b5c531;
    flex-shrink: 0;
    margin-right: 0.85rem;
}
.theme-hub__search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1rem;
    padding: 1rem 0;
}
.theme-hub__search input::placeholder { color: #9ca3af; }
.theme-hub__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Filter-Pills --------------------------------------------------------- */
.theme-hub__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.theme-hub__pill {
    background-color: rgba(42, 58, 123, 0.5);
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.theme-hub__pill:hover {
    color: #ffffff;
    background-color: rgba(42, 58, 123, 0.8);
}
.theme-hub__pill.is-active {
    background-color: #b5c531;
    color: #1e2a5a;
    border-color: #b5c531;
}

/* --- Empty-State ---------------------------------------------------------- */
.theme-hub__empty {
    max-width: 600px;
    margin: 4rem auto 0;
    text-align: center;
    color: #9ca3af;
    font-size: 1.05rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
.theme-hub__empty[hidden] { display: none; }

/* --- Theme-Card: Header-Zeile mit Type-Eyebrow + Status-Badge ------------- */
.theme-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    min-height: 1.5rem;
}
.theme-card__type {
    color: #b5c531;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
.theme-card__badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    line-height: 1;
}

/* Smooth fade beim Filter-Wechsel */
.theme-card[hidden] { display: none; }

/* ==========================================================================
   Theme-Page Modifier · spacious (vormals centered)
   Mehr vertikaler Atemraum zwischen Sektionen + zwischen Article-Elementen.
   Texte/Headlines bleiben linksbündig (kein text-align: center).
   Zentrierung gibt es nur per inline-Klassen (Tailwind .text-center),
   etwa für Number-Circle-Triple-Karten oder explizite Hero-Sektionen.
   ========================================================================== */

.theme-page--centered .theme-section {
    padding-top: 4rem;
    margin-top: 5rem !important;
}
.theme-page--centered .theme-section:first-of-type {
    margin-top: 1rem !important;
}

@media (min-width: 768px) {
    .theme-page--centered .theme-section {
        padding-top: 5rem;
        margin-top: 6rem !important;
    }
}

/* Mehr Atem zwischen Article-Elementen */
.theme-page--centered .theme-article > * + * { margin-top: 2.25rem; }
.theme-page--centered .theme-section > * + * { margin-top: 2.5rem; }

/* ==========================================================================
   Step-Item · figured Variante (50/50 Bild + Text)
   Wenn ein step-item ein Bild enthält: figure links 50% / Text rechts 50%.
   Auf Mobile gestapelt (figure zuerst).
   ========================================================================== */

/* Body-Struktur:
   <div class="flex-1">
     <figure>...</figure>            ← Grid-Item 1 (links)
     <div class="step-text">…</div>  ← Grid-Item 2 (rechts)
   </div>

   2-Spalten-Grid 50/50. Beide Items beginnen oben (align-items: start).
   Das Grid wird so hoch wie das LÄNGERE Item — typischerweise die Text-Spalte.
   Folge: Wenn Text länger als Bild → Bild bleibt oben links sichtbar, darunter
   leerer Raum (gleicher blauer Boxhintergrund). Der NUTZER sieht durchgehend
   das Bild + die blaue Box, während er den Text rechts liest. Genau das
   gewünschte Verhalten, ohne sticky-Tricks und ohne Endlos-Scroll.

   Bild- vs. Text-Höhe ist self-balancing: gleich hoch → kein leerer Raum;
   Bild länger als Text → Text bleibt oben rechts; Text länger als Bild →
   Bild bleibt oben links (gleicher Effekt wie sticky, aber innerhalb der Box).
*/

@media (min-width: 768px) {
    .step-item--figured > .flex-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
    .step-item--figured > .flex-1 > figure.theme-figure {
        margin: 0 !important;
        align-self: start;
        position: sticky;
        top: 1rem;        /* sticky innerhalb der Grid-Cell — bleibt in der Box */
    }
    .step-item--figured > .flex-1 > .step-text > *:first-child {
        margin-top: 0;
    }
}

/* Mobile: gestapelt, figure zuerst */
@media (max-width: 767px) {
    .step-item--figured > .flex-1 > figure.theme-figure {
        margin: 0 0 1.5rem 0;
    }
}

/* figcaption etwas kompakter im figured-Layout */
.step-item--figured .theme-figure__caption {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* step-text bekommt eigene Sibling-Margins für Atemraum zwischen Textblöcken */
.step-text > * + * { margin-top: 1.25rem; }

/* ==========================================================================
   Section-Badge · Zielgruppen-/Use-Case-Pille direkt unter h2
   Klein, Lime-Outline, scannbar — zeigt für wen / wofür diese Sektion ist.
   ========================================================================== */

.section-badge {
    display: inline-block;
    margin: 0.75rem 0 1.5rem;
    padding: 0.5rem 1.1rem;
    background-color: rgba(181, 197, 49, 0.1);
    border: 1px solid rgba(181, 197, 49, 0.45);
    color: #b5c531;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 9999px;
    line-height: 1.4;
}

/* ==========================================================================
   Back-to-Top Button · subtil, auf jeder Seite injiziert
   Erscheint nach 400px Scroll, fixiert unten rechts. Wird per JS angehängt.
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 9999px;
    background-color: rgba(181, 197, 49, 0.92);
    color: #1e2a5a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 30;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: #b5c531;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.back-to-top:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.back-to-top svg {
    width: 1.1rem;
    height: 1.1rem;
}

@media (min-width: 768px) {
    .back-to-top {
        right: 2rem;
        bottom: 2rem;
        width: 3rem;
        height: 3rem;
    }
    .back-to-top svg { width: 1.2rem; height: 1.2rem; }
}

/* Beim Drucken (Checklisten) nicht anzeigen */
@media print {
    .back-to-top { display: none !important; }
}

/* ==========================================================================
   Themen-Hub · Sortierung
   Wenn unfiltered (kein Search-Query und „Alle"-Pill aktiv):
   verfügbare Themen zuerst, Placeholder-Karten danach.
   Bei aktivem Filter / Suche: natürliche HTML-Order.
   ========================================================================== */

/* Grid braucht display: flex/grid mit `order`-support — Tailwind grid hat das. */
[data-theme-cards].is-unfiltered .theme-card--placeholder {
    order: 10;
}

/* ==========================================================================
   Step-Item · Flow-Variante · harmonisch für content-reiche Schritte
   Statt schwerer blauer Box: nur Lime-Nummer + Content + dezente Trennlinie
   ========================================================================== */

.step-item--flow {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 1rem !important;
    padding: 2.5rem 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.step-item--flow:last-of-type {
    border-bottom: none;
}

/* Number-Kreis bleibt prominent, aber etwas kompakter im Flow */
.step-item--flow .step-num {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1rem !important;
}

@media (min-width: 768px) {
    .step-item--flow .step-num {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.15rem !important;
    }

    /* Bilder im Flow: max 30% Breite — kein Riesen-Fullsize */
    .step-item--flow figure.theme-figure,
    .step-item--flow figure.img-placeholder {
        max-width: 30%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Flow + figured: 70/30-Grid statt 50/50, kein Sticky */
    .step-item--flow.step-item--figured > .flex-1 {
        display: grid;
        grid-template-columns: 1fr 30%;
        gap: 2rem;
        align-items: start;
    }
    .step-item--flow.step-item--figured > .flex-1 > figure.theme-figure {
        grid-column: 2;
        grid-row: 1;
        max-width: 100%;
        margin: 0 !important;
        position: static !important;
        top: auto !important;
    }
    .step-item--flow.step-item--figured > .flex-1 > .step-text {
        grid-column: 1;
    }
}

/* ==========================================================================
   Step-Accordion · Klappbare Schritt-Karten mit Vorschau und Detail-Body
   Layout: 2-Spalten-Grid auf Desktop, 1-Spalte mobil. Karten bestehen aus
   <details>-Element mit Summary (Nummer, Titel, 2-Zeilen-Vorschau, Chevron)
   und expandierendem Body (Bild, Methoden-Grid, Split-Layout, Optionen).
   ========================================================================== */

.step-accordion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .step-accordion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.step-accordion-grid__item--wide {
    grid-column: 1 / -1;
}

.step-accordion {
    background-color: rgba(30, 42, 90, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.step-accordion[open] { border-color: rgba(181, 197, 49, 0.3); }

.step-accordion__summary {
    cursor: pointer;
    list-style: none;
    padding: 1.5rem;
}
.step-accordion__summary::-webkit-details-marker { display: none; }
.step-accordion__summary::marker { display: none; content: ''; }

.step-accordion__head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
}

.step-accordion__num {
    font-size: 2.25rem;
    font-weight: 800;
    color: #b5c531;
    line-height: 1;
    flex-shrink: 0;
}

.step-accordion__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.step-accordion__chevron {
    width: 1.1rem;
    height: 1.1rem;
    color: #b5c531;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    align-self: center;
}
.step-accordion[open] .step-accordion__chevron { transform: rotate(180deg); }

.step-accordion__preview {
    color: #d1d5db;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.step-accordion[open] .step-accordion__preview {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.step-accordion__preview strong { color: #ffffff; }

.step-accordion__body {
    padding: 0 1.5rem 1.5rem;
}

.step-accordion__image {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
}

.step-accordion__methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
    .step-accordion__methods { grid-template-columns: repeat(3, 1fr); }
}

.step-accordion__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .step-accordion__options { grid-template-columns: repeat(3, 1fr); }
}

.step-accordion__method,
.step-accordion__option {
    background-color: rgba(255, 255, 255, 0.025);
    border-left: 3px solid rgba(181, 197, 49, 0.5);
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1rem;
}
.step-accordion__option { padding: 0.7rem 0.85rem; }

.step-accordion__method-title,
.step-accordion__option-title {
    color: #ffffff;
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.step-accordion__method-text,
.step-accordion__option-text {
    color: #d1d5db;
    line-height: 1.55;
    font-size: 0.95rem;
}
.step-accordion__option-text { font-size: 0.9rem; line-height: 1.5; }

.step-accordion__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 768px) {
    .step-accordion__split { grid-template-columns: repeat(2, 1fr); }
}

.step-accordion__examples-heading {
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.step-accordion__examples-list {
    margin: 0;
    max-width: none;
}

.step-accordion__note {
    color: #d1d5db;
    line-height: 1.6;
    margin: 1rem 0 0;
}

/* ==========================================================================
   Lightbox · alle Bilder klickbar, Overlay-Ansicht
   ========================================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 36, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    cursor: zoom-out;
    animation: lightbox-fade 0.2s ease-out;
}

.lightbox.is-open { display: flex; }

@keyframes lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lightbox__close:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}
.lightbox__close:focus-visible {
    outline: 2px solid #b5c531;
    outline-offset: 2px;
}

/* Klickbare Bilder bekommen zoom-in Cursor */
.theme-figure__img,
.hero-gallery__img,
img.is-zoomable {
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}
.theme-figure__img:hover,
.hero-gallery__img:hover,
img.is-zoomable:hover {
    opacity: 0.92;
}

/* Innerhalb eines text-center-Wrappers im theme-section-Kontext:
   Block-Elemente mit eigener max-width auch horizontal zentrieren. */
.theme-section .text-center .theme-section__title,
.theme-section .text-center .theme-subhead,
.theme-section .text-center .theme-prose {
    margin-left: auto;
    margin-right: auto;
}