/* =========================================================
   SCHNELL-NAVIGATION / WICHTIGE STELLEN (ERKLÄRT)

   ALLGEMEIN

   Globaler Header         = .v2-header
      → obere Navigationsleiste

   Snap-Verhalten          = html, body -> scroll-snap-type
      → sorgt dafür, dass Kacheln „einrasten“ beim Scrollen


   ---------------------------------------------------------

   ARTIKELSEITE

   Hero-Höhe Desktop       = .hero -> min-height
      → Höhe des großen Header-Bereichs im Artikel

   Hero-Höhe Mobile        = @media (max-width: 768px) -> .hero -> min-height
      → kleinere Version für Mobile

   Hero-Headline           = .hero-title
      → große Überschrift im Artikel

   Meta-/Autorblock        = .article-hero-meta-block
      → Bereich unter der Headline (Datum, Autor etc.)

   Autorbild Artikel       = .article-author-img
      → Profilbild im Artikel


========================================================= */


/* =========================================================
   01) HEADER – GLOBALER KOPFBEREICH
   Alles, was auf allen öffentlichen Seiten oben fest sitzt
========================================================= */

.v2-header {
    position: fixed; /* Header bleibt beim Scrollen immer oben sichtbar */
    top: 0; /* Header sitzt direkt am oberen Fensterrand */
    left: 0; /* Header startet ganz links */
    width: 100%; /* Header geht über die komplette Bildschirmbreite */
    height: var(--header-height); /* Hier liegt die feste Header-Höhe aus den Root-Variablen */

    background: var(--color-bg); /* Hintergrundfarbe des Headers */
    border-bottom: 1px solid var(--color-border); /* Dünne Trennlinie unter dem Header */

    display: flex; /* Aktiviert Flexbox für linke und rechte Header-Seite */
    align-items: center; /* Richtet die Inhalte vertikal mittig aus */
    justify-content: space-between; /* Schiebt linken und rechten Bereich auseinander */

    padding: 0 var(--space-4); /* Innenabstand links/rechts im Header */
    z-index: 1000; /* Header liegt über dem normalen Seiteninhalt */
}

.v2-header-left {
    display: flex; /* Logo und Markenname nebeneinander */
    align-items: center; /* Vertikale Zentrierung von Logo und Text */
    gap: var(--space-3); /* Abstand zwischen Logo und Markenname */
    padding-left: 6px; /* Kleiner linker Innenabstand für optische Ausrichtung */
    text-decoration: none; /* Entfernt Unterstreichung beim Link */
    color: inherit; /* Nutzt die bestehende Textfarbe statt Standard-Linkfarbe */
}

.v2-logo-img {
    height: 32px; /* Hier liegt die sichtbare Logo-Höhe */
    width: auto; /* Breite passt sich proportional an */
}

.v2-brand-name {
    font-family: var(--font-heading); /* Schriftfamilie für Markenname */
    font-size: 0.9rem; /* Hier liegt die Schriftgröße des Markennamens */
    font-weight: 600; /* Mittlere bis kräftige Schriftstärke */
    letter-spacing: 0.2px; /* Leicht erhöhter Buchstabenabstand */
    line-height: 1; /* Kompakte Zeilenhöhe */
    color: var(--color-text); /* Textfarbe des Markennamens */
}

.v2-header-right {
    display: flex; /* Elemente rechts im Header nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
    gap: var(--space-2); /* Abstand zwischen den rechten Header-Elementen */
    cursor: pointer; /* Zeigt Mauszeiger als klickbar an */
    color: var(--color-primary); /* Primärfarbe für rechte Header-Elemente */
}

.v2-header-right svg {
    width: 22px; /* Icon-Breite */
    height: 22px; /* Icon-Höhe */
    fill: currentColor; /* Icon übernimmt automatisch die aktuelle Textfarbe */
}

.v2-share-text {
    font-family: var(--font-heading); /* Schriftfamilie des Share-Texts */
    font-size: 0.65rem; /* Kleine Schriftgröße für Label/Utility-Text */
    font-weight: 550; /* Etwas stärker als normal */
    text-transform: uppercase; /* Macht den Text komplett groß */
    letter-spacing: 0.4px; /* Mehr Abstand für UI-/Label-Charakter */
    opacity: 0.85; /* Leicht transparenter Text */
}


/* =========================================================
   02) PUBLIC HEADER UI
   Zusätzliche UI-Elemente im Header
========================================================= */

/* --- Info-Button-Gruppe im Header --- */
.v2-header-group {
    display: flex; /* Logo-Link und Info-Button nebeneinander */
    align-items: center; /* Vertikal mittig ausgerichtet */
    gap: 25px; /* Abstand zwischen Logo-Block und Info-Button */
}

.v2-info-btn {
    display: inline-flex; /* Flexbox auf Inline-Level für saubere Zentrierung */
    align-items: center; /* Icon vertikal mittig */
    justify-content: center; /* Icon horizontal mittig */
    width: 36px; /* Button-Breite */
    height: 36px; /* Button-Höhe */
    border-radius: 50%; /* Macht den Button rund */
    text-decoration: none; /* Keine Link-Unterstreichung */
    color: #fff; /* Icon-/Textfarbe */
    background: rgba(255,255,255,0.08); /* Halbtransparenter Glas-Hintergrund */
    border: 1px solid rgba(255,255,255,0.14); /* Dünner Rand für Glassmorphism-Effekt */
    flex-shrink: 0; /* Button darf in engen Layouts nicht schrumpfen */
    transition: opacity var(--transition-fast); /* Weicher Hover-Übergang bei Transparenz */
}

.v2-info-btn:hover {
    opacity: 1; /* Volle Sichtbarkeit beim Hover */
}

.v2-info-btn svg {
    width: 18px; /* Icon-Breite im Info-Button */
    height: 18px; /* Icon-Höhe im Info-Button */
    display: block; /* Verhindert Inline-Lücken */
    fill: currentColor; /* Icon übernimmt Button-Farbe */
}


/* =========================================================
   03) GLOBALER SNAP- / VIEWPORT-RAHMEN
========================================================= */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    background-color: #000;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}


/* =========================================================
   04) HEADER-LOGO – DIREKTBILD
========================================================= */

.v2-header-left img {
    width: 44px; /* Sichtbare Breite des Header-Logos */
    height: 44px; /* Sichtbare Höhe des Header-Logos */
    display: block; /* Verhindert Inline-Lücken */
    flex-shrink: 0; /* Logo darf nicht schrumpfen */
}


/* =========================================================
   05) ARTIKEL-HERO
   Große Hero-Fläche auf der Artikelseite
========================================================= */

.hero {
    position: relative;
    min-height: 42svh; /* Abstand zwichen Teaser und Autor Bild */
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: calc(var(--header-height) + 160px) 24px 32px; 
    box-sizing: border-box;
    overflow: hidden;
    background: #000;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.94) 0%,
        rgba(0,0,0,0.82) 22%,
        rgba(0,0,0,0.64) 48%,
        rgba(0,0,0,0.38) 70%,
        rgba(0,0,0,0.18) 88%,
        rgba(0,0,0,0.06) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.02;
    text-transform: none;
    margin: 0 0 16px 0;
    color: #fff;
}


/* =========================================================
   06) ARTIKEL-META / AUTORBLOCK IM HERO
========================================================= */

.article-hero-meta-block {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.article-author-link {
    margin-top: 0;
}

.hero .v2-badge {
    position: relative;
    top: -3px;
    left: 1px;
    margin-bottom: 12px;
    z-index: 5;
}

.article-author-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.article-author-img {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    object-fit: cover;
    display: block;
}

.article-author-text {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.3;
    text-transform: none;
}


/* =========================================================
   07) ARTIKEL-INHALT
   Fließtext, Video, Zwischenüberschriften, Quellen
========================================================= */

.article-body {
    max-width: 750px;
    margin: 0 auto;
    padding: 10px 20px 150px 20px;
    box-sizing: border-box;
}

.teaser {
    font-size: 1.1rem; /* Schriftgröße des Einleitungsteasers */
    font-weight: 400; /* Normale Schriftstärke */
    font-style: italic; /* Kursiver Teaser-Look */
    color: rgba(255,255,255,0.9); /* Helle, aber leicht abgeschwächte Textfarbe */
    margin-bottom: 35px; /* Abstand unter dem Teaser */
    line-height: 1.6; /* Zeilenhöhe des Teasers */
    position: relative; /* Basis für den dekorativen Strich */
}

.teaser::before {
    content: ""; /* Dekoratives Pseudoelement */
    display: inline-block; /* Kleiner Block vor dem Teaser */
    width: 20px; /* Breite des roten Strichs */
    height: 3px; /* Höhe des roten Strichs */
    background: var(--color-danger); /* Farbe des Strichs */
    margin-right: 12px; /* Abstand zwischen Strich und Text */
    vertical-align: middle; /* Vertikale Ausrichtung zum Text */
    margin-top: -3px; /* Kleine optische Feinkorrektur */
}

.video-wrapper {
    position: relative; /* Basis für absolut positioniertes iframe */
    padding-bottom: 56.25%; /* 16:9-Seitenverhältnis */
    height: 0; /* Höhe wird nur über das Seitenverhältnis erzeugt */
    overflow: hidden; /* Überstehende Inhalte werden abgeschnitten */
    margin-bottom: 45px; /* Abstand unter dem Video */
    border-radius: 12px; /* Abgerundete Video-Ecken */
    background: #111; /* Dunkler Fallback-Hintergrund */
    width: 100%; /* Video geht über die volle Breite des Containers */
}

.video-wrapper iframe {
    position: absolute; /* iframe liegt frei im Wrapper */
    top: 0; /* Start oben */
    left: 0; /* Start links */
    width: 100% !important; /* iframe füllt die komplette Breite */
    height: 100% !important; /* iframe füllt die komplette Höhe */
    border: 0; /* Kein Standard-Rahmen um das iframe */
}

.article-body h2 {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie der Zwischenüberschrift */
    font-size: 1.4rem; /* Schriftgröße der h2 */
    margin: 35px 0 25px 0; /* Abstand oberhalb und unterhalb der h2 */
    color: var(--color-primary); /* Primärfarbe der Zwischenüberschrift */
    letter-spacing: 1px; /* Erhöhter Buchstabenabstand */
}

.article-body p {
    margin-bottom: 25px; /* Abstand unter jedem Absatz */
    font-size: 1.05rem; /* Schriftgröße der Fließtext-Absätze */
    color: rgba(255,255,255,0.8); /* Etwas weichere Textfarbe für gute Lesbarkeit */
}

.related-article-box {
    margin: 22px 0 28px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
}

.related-article-label {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #b9c2cf;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.related-article-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    color: var(--color-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
    padding: 0;
}

.related-article-link + .related-article-link {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.related-article-link:hover {
    text-decoration: underline;
}

.fazit-box {
    padding: 10px 0; /* Innenabstand oben/unten im Fazitblock */
    margin: 30px 0 50px 0; /* Abstand vor und nach dem Fazitblock */
}

.fazit-box::before {
    content: "CHECK BOX"; /* Sichtbares Label über dem Fazit */
    display: inline-block; /* Label wird als Inline-Block dargestellt */
    background: linear-gradient(to right, rgba(0, 167, 216, 0.4), var(--color-primary)); /* Verlauf im Label-Hintergrund */
    color: rgba(255, 255, 255, 0.8); /* Textfarbe des Labels */
    padding: 5px 12px; /* Innenabstand des Labels */
    border-radius: 4px; /* Leicht abgerundete Ecken */
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie des Labels */
    font-weight: 900; /* Sehr kräftige Schrift */
    font-size: 0.95rem; /* Schriftgröße des Labels */
    letter-spacing: 1.5px; /* Starkes Tracking für Label-Look */
    margin-bottom: 20px; /* Abstand unter dem Label */
    line-height: 1; /* Kompakte Zeilenhöhe */
}

.fazit-text {
    font-size: 1.05rem; /* Schriftgröße des Fazittexts */
    line-height: 1.6; /* Zeilenhöhe des Fazittexts */
    color: rgba(255, 255, 255, 0.95); /* Sehr helle Textfarbe für Schwerpunkt */
}

.sources-container {
    margin-top: 30px; /* Abstand oberhalb der Quellenliste */
}

.sources-container h4 {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie der Quellenüberschrift */
    font-size: 0.85rem; /* Schriftgröße der Quellenüberschrift */
    text-transform: uppercase; /* Großbuchstabenstil */
    letter-spacing: 1.5px; /* Label-artiger Buchstabenabstand */
    color: var(--color-primary); /* Primärfarbe */
    margin-bottom: 20px; /* Abstand unter der Quellenüberschrift */
}

.sources-list {
    display: flex; /* Quellen als Flex-Container */
    flex-direction: column; /* Quellen untereinander */
    gap: 5px; /* Abstand zwischen einzelnen Quellen */
}

.source-link {
    display: flex; /* Icon-Bereich und Content nebeneinander */
    align-items: flex-start; /* Start-Ausrichtung für mehrzeilige Einträge */
    text-decoration: none; /* Keine Unterstreichung */
    transition: opacity 0.2s; /* Weicher Hover-Übergang */
}

.source-icon-box {
    flex-shrink: 0; /* Icon-Box darf nicht schrumpfen */
    display: flex; /* Favicon und Link-Icon nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
    gap: 8px; /* Abstand zwischen Favicon und Link-Icon */
    margin-right: 12px; /* Abstand zum Quelltext */
    margin-top: 3px; /* Kleine optische Ausrichtung nach unten */
}

.source-favicon {
    width: 18px; /* Größe des Favicons */
    height: 18px; /* Größe des Favicons */
    border-radius: 3px; /* Leicht abgerundete Ecken */
    object-fit: contain; /* Favicon wird vollständig angezeigt */
}

.source-blue-link {
    width: 16px; /* Größe des Link-Icons */
    height: 16px; /* Größe des Link-Icons */
    color: var(--color-primary); /* Primärfarbe des Link-Icons */
    flex-shrink: 0; /* Link-Icon darf nicht schrumpfen */
}

.source-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.source-domain {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: lowercase;
    line-height: 1.2;
}

.source-title {
    color: #eee;
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
}


/* =========================================================
   08) TEAM-SEITE
========================================================= */

.team-hero {
    height: 70vh; /* Höhe des Team-Heros */
    height: 70svh; /* Stabilere Mobile-Höhe für Team-Hero */
    width: 100%; /* Volle Breite */
    position: relative; /* Basis für Overlay */
    overflow: hidden; /* Alles außerhalb wird abgeschnitten */
    background-color: #000; /* Schwarzer Fallback-Hintergrund */
    background-repeat: no-repeat; /* Bild wiederholt sich nicht */
    display: flex; /* Flexbox für Team-Hero-Inhalt */
    flex-direction: column; /* Inhalte untereinander */
    justify-content: flex-end; /* Inhalte sitzen unten */
    padding: 40px 25px 12px 25px; /* Innenabstand des Team-Heros */
    box-sizing: border-box; /* Padding bleibt in der Gesamtbreite */
}

.team-hero::after {
    content: ""; /* Pseudoelement für unteren Verlauf */
    position: absolute; /* Overlay liegt frei im Hero */
    bottom: 0; /* Start unten */
    left: 0; /* Start links */
    width: 100%; /* Volle Breite */
    height: 80%; /* Höhe des unteren Verlaufs */
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); /* Verlauf für Lesbarkeit */
    z-index: 1; /* Overlay liegt über dem Bild */
}

@media (min-width: 1025px) {
    .team-hero {
        background-image: url('https://corenoda.com/assets/img/analyst/team-foto.webp?v=2.3'); /* Desktop-Bild der Team-Seite */
        background-size: cover; /* Bild füllt die Fläche */
        background-position: center; /* Bild bleibt mittig */
    }
}

@media (max-width: 1024px) {
    .team-hero {
        background-image: url('https://corenoda.com/assets/img/analyst/team-foto-hochformat.webp?v=2.3') !important; /* Mobile-Hochformat-Bild */
        background-size: cover !important; /* Bild füllt Fläche auf Mobile */
        background-position: center top !important; /* Fokus eher oben im Bild */
    }
}

.details-section {
    max-width: 750px; /* Maximale Breite des Team-Inhalts */
    margin: 0 auto; /* Zentriert den Inhaltsbereich */
    padding: 40px 20px 150px 20px; /* Innenabstand des Inhaltsbereichs */
    box-sizing: border-box; /* Padding bleibt in der Gesamtbreite */
}

@media (min-width: 851px) {
    .details-section {
        max-width: 850px; /* Größere Breite auf größeren Screens */
    }
}

.intro-text {
    font-size: 1.1rem; /* Schriftgröße des Intro-Textes */
    font-weight: 400; /* Normale Schriftstärke */
    font-style: italic; /* Kursivstil */
    color: rgba(255,255,255,0.9); /* Helle Textfarbe */
    margin-bottom: 35px; /* Abstand unter dem Intro-Text */
    line-height: 1.6; /* Zeilenhöhe des Intro-Textes */
    position: relative; /* Basis für den dekorativen Strich */
}

.intro-text::before {
    content: ""; /* Dekoratives Pseudoelement */
    display: inline-block; /* Strich vor dem Intro */
    width: 20px; /* Breite des Strichs */
    height: 3px; /* Höhe des Strichs */
    background: var(--color-danger); /* Farbe des Strichs */
    margin-right: 12px; /* Abstand zum Text */
    vertical-align: middle; /* Mittige Ausrichtung */
    margin-top: -3px; /* Optische Feinkorrektur */
}

.highlight-blue {
    color: var(--color-primary); /* Hebt Text in Primärfarbe hervor */
    font-weight: 800; /* Stärkere Gewichtung der Hervorhebung */
}

.analyst-grid {
    display: grid; /* Grid-Layout für Analysten */
    grid-template-columns: 1fr; /* Eine Spalte auf kleinen Screens */
    gap: 60px; /* Abstand zwischen den Grid-Elementen */
    margin-top: 50px; /* Abstand oberhalb des Grids */
}

@media (min-width: 851px) {
    .analyst-grid {
        grid-template-columns: 1fr 1fr 1fr; /* Drei Spalten auf größeren Screens */
        gap: 40px; /* Etwas kompakterer Abstand auf Desktop */
    }
}

.role-badge {
    display: inline-block; /* Badge soll wie Label wirken */
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-primary) 40%, transparent), /* Weicher Start des Verlaufs */
        var(--color-primary) /* Ende im Primärton */
    );
    color: #fff; /* Textfarbe im Badge */
    padding: 4px 10px; /* Innenabstand des Badges */
    border-radius: 4px; /* Leicht abgerundete Ecken */
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie des Badges */
    font-weight: 900; /* Sehr starke Schrift */
    font-size: 0.75rem; /* Badge-Schriftgröße */
    text-transform: uppercase; /* Großbuchstabenstil */
    letter-spacing: 1.2px; /* Starker Buchstabenabstand */
    margin-bottom: 15px; /* Abstand unter dem Badge */
    line-height: 1; /* Kompakte Zeilenhöhe */
}

.name-row {
    display: flex; /* Name und Mini-Bild nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
    gap: 12px; /* Abstand zwischen Bild und Name */
    margin: 0 0 15px 0; /* Abstand unter der Namenszeile */
}

.name-header {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie des Namens */
    font-size: 1.4rem; /* Schriftgröße des Namens */
    font-weight: 800; /* Kräftige Schrift */
    text-transform: uppercase; /* Name in Großbuchstaben */
    margin: 0; /* Entfernt Standardabstände */
    color: rgba(255, 255, 255, 0.95); /* Helle Textfarbe */
}

.analyst-mini-img {
    width: 32px; /* Größe des Mini-Profilbilds */
    height: 32px; /* Größe des Mini-Profilbilds */
    border-radius: 50%; /* Rundes Mini-Profilbild */
    border: 1px solid var(--color-primary); /* Rand in Primärfarbe */
    background: #111; /* Dunkler Fallback-Hintergrund */
    object-fit: cover; /* Sauberer Bildzuschnitt */
}

.desc-text {
    font-size: 1.05rem; /* Schriftgröße der Beschreibung */
    color: rgba(255,255,255,0.8); /* Etwas weichere Textfarbe */
    line-height: 1.6; /* Zeilenhöhe der Beschreibung */
}

.ai-label {
    font-size: 0.75rem; /* Schriftgröße des KI-Labels */
    color: var(--color-primary); /* Primärfarbe des Labels */
    font-style: italic; /* Kursivstil */
    margin-top: 20px; /* Abstand oberhalb des Labels */
    display: block; /* Eigenständige neue Zeile */
    border-top: 1px solid rgba(255,255,255,0.1); /* Dünne Trennlinie oberhalb */
    padding-top: 10px; /* Abstand zwischen Linie und Label */
}


/* =========================================================
   09) IMPRESSUM / LEGAL
========================================================= */

.hero-legal {
    min-height: 60vh; /* Mindesthöhe des Legal-Heros */
    width: 100%; /* Volle Breite */
    position: relative; /* Basis für Overlay */
    background-color: #111; /* Dunkler Fallback-Hintergrund */
    background-size: cover; /* Bild füllt die Fläche */
    background-position: center; /* Bild bleibt zentriert */
    display: flex; /* Flexbox für Hero-Inhalte */
    flex-direction: column; /* Inhalte untereinander */
    justify-content: flex-end; /* Inhalte sitzen unten */
    background-image: url('/assets/img/querformat-impressum.webp'); /* Desktop-/Standardbild für Impressum */
}

.hero-legal::after {
    content: ""; /* Pseudoelement für unteren Verlauf */
    position: absolute; /* Overlay liegt frei im Hero */
    bottom: 0; /* Start unten */
    left: 0; /* Start links */
    width: 100%; /* Volle Breite */
    height: 80%; /* Höhe des Verlaufs */
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); /* Verlauf für Lesbarkeit */
    z-index: 1; /* Overlay liegt über dem Bild */
}

.hero-inner-wrapper {
    max-width: 750px; /* Maximale Breite des Hero-Inhalts */
    width: 100%; /* Nutzt verfügbare Breite */
    margin: 0 auto; /* Zentriert den Hero-Inhalt */
    padding: 0 20px 40px 20px; /* Seitlicher und unterer Innenabstand */
    box-sizing: border-box; /* Padding bleibt in der Gesamtbreite */
    position: relative; /* Basis für Layering */
    z-index: 2; /* Inhalt liegt über dem Overlay */
}

.hero-red-title {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie der roten Hero-Headline */
    font-size: 1.2rem; /* Schriftgröße */
    text-transform: uppercase; /* Großbuchstabenstil */
    color: var(--color-danger); /* Warn-/Akzentfarbe */
    margin: 0; /* Entfernt Standardabstände */
    letter-spacing: 1px; /* Mehr Luft zwischen den Buchstaben */
    text-shadow: 0 4px 20px rgba(0,0,0,0.8); /* Schatten für bessere Lesbarkeit */
}

.legal-container {
    max-width: 750px; /* Maximale Breite des Legal-Contents */
    margin: 0 auto; /* Zentriert den Legal-Content */
    padding: 40px 20px 150px 20px; /* Innenabstand des Legal-Contents */
    box-sizing: border-box; /* Padding bleibt in der Gesamtbreite */
}

.no-link {
    color: rgba(255,255,255,0.8) !important; /* Link sieht wie normaler Text aus */
    text-decoration: none !important; /* Keine Unterstreichung */
    pointer-events: none; /* Link ist nicht klickbar */
    cursor: default; /* Standard-Cursor statt Pointer */
}

.legal-container h2 {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie der Legal-h2 */
    font-size: 1.2rem; /* Schriftgröße der Legal-h2 */
    text-transform: uppercase; /* Großbuchstabenstil */
    color: var(--color-danger); /* Warn-/Akzentfarbe */
    margin-top: 60px; /* Abstand oberhalb der Überschrift */
    margin-bottom: 20px; /* Abstand unterhalb der Überschrift */
}

.legal-container p {
    color: rgba(255,255,255,0.8); /* Etwas weichere Textfarbe */
    font-size: 1.05rem; /* Schriftgröße des Fließtexts */
    margin-bottom: 20px; /* Abstand unter dem Absatz */
}

.divider {
    height: 1px; /* Höhe der Trennlinie */
    background: rgba(255,255,255,0.1); /* Farbe der Trennlinie */
    margin: 60px 0; /* Abstand ober- und unterhalb der Trennlinie */
}

@media (max-width: 768px) {
    .hero-legal {
        background-image: url('/assets/img/hochformat-impressum.webp'); /* Mobile-Bild des Legal-Heros */
    }
}

.legal-mail {
    color: var(--color-primary); /* Primärfarbe für E-Mail-Links */
    text-decoration: none; /* Keine Unterstreichung */
    font-weight: 600; /* Etwas kräftigere Darstellung */
}


/* =========================================================
   10) 404-SEITE
========================================================= */

.error-body {
    margin: 0; /* Entfernt Standard-Außenabstand */
    padding: 0; /* Entfernt Standard-Innenabstand */
    width: 100%; /* Volle Breite */
    height: 100vh; /* Volle Viewport-Höhe */
    height: 100dvh; /* Dynamische Viewport-Höhe für moderne Mobile-Browser */
    overflow: hidden; /* Verhindert Scrollen auf der 404-Seite */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('https://corenoda.com/images/404-signal-lost.webp') no-repeat center center fixed; /* Hintergrundbild mit dunklem Overlay */
    background-size: cover; /* Bild füllt die Fläche */
    display: flex; /* Flexbox für die Zentrierung des Containers */
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
}

.error-container {
    width: 100%; /* Nutzt die verfügbare Breite */
    max-width: 500px; /* Maximale Breite der Fehlerbox */
    padding: 40px 30px; /* Innenabstand der Fehlerbox */
    border: 1px solid rgba(255,255,255,0.15); /* Dünner Rand */
    background: rgba(0,0,0,0.75); /* Dunkler, halbtransparenter Hintergrund */
    border-radius: 28px; /* Stark gerundete Ecken */
    backdrop-filter: blur(20px); /* Hier liegt der starke Blur-/Glas-Effekt der Fehlerbox */
    box-shadow: 0 25px 50px rgba(0,0,0,0.8); /* Starker Schatten für Tiefe */
    text-align: center; /* Inhalt zentriert */
    box-sizing: border-box; /* Padding bleibt in der Gesamtbreite */
    z-index: 5; /* Fehlerbox liegt über Hintergrund und Overlay */
}

.status-badge {
    display: inline-block; /* Badge verhält sich wie Label */
    padding: 6px 14px; /* Innenabstand des Badges */
    background: color-mix(in srgb, var(--color-danger) 20%, transparent); /* Leichter Warnfarb-Hintergrund */
    color: var(--color-danger); /* Textfarbe des Badges */
    border: 1px solid var(--color-danger); /* Rand in Warnfarbe */
    border-radius: 6px; /* Abgerundete Ecken */
    font-size: 0.7rem; /* Schriftgröße des Badges */
    margin-bottom: 20px; /* Abstand unter dem Badge */
    font-weight: 700; /* Schriftstärke des Badges */
}

.glitch-code {
    font-size: clamp(4.5rem, 20vw, 7rem); /* Größe der 404-Zahl */
    font-weight: 800; /* Sehr starke Schrift */
    margin: 0; /* Entfernt Standardabstände */
    color: var(--color-danger); /* Warnfarbe der 404-Zahl */
    text-shadow: 3px 3px 0px rgba(0, 167, 216, 0.4); /* Doppelter Farbschatten für Glitch-Look */
    letter-spacing: -4px; /* Engerer Zeichenabstand für massiven Look */
    line-height: 1; /* Kompakte Zeilenhöhe */
}

.error-title {
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie des Fehlertitels */
    text-transform: uppercase; /* Großbuchstabenstil */
    letter-spacing: 1px; /* Leicht erhöhter Buchstabenabstand */
    font-size: clamp(1.1rem, 5vw, 1.3rem); /* Größe des Fehlertitels */
    margin: 20px 0 12px; /* Abstand oberhalb und unterhalb */
    color: #fff; /* Textfarbe des Fehlertitels */
}

.error-text {
    color: rgba(255,255,255,0.7); /* Etwas weichere Textfarbe */
    line-height: 1.5; /* Zeilenhöhe des Fehlertexts */
    margin-bottom: 30px; /* Abstand unter dem Fehlertext */
    font-size: clamp(0.85rem, 4vw, 0.95rem); /* Responsive Schriftgröße des Fehlertexts */
}

.btn-back {
    display: block; /* Button nimmt eigene Zeile ein */
    background: var(--color-primary); /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe des Buttons */
    text-decoration: none; /* Keine Unterstreichung */
    padding: 18px; /* Innenabstand des Buttons */
    border-radius: 14px; /* Abgerundete Ecken */
    font-family: 'Montserrat', sans-serif; /* Schriftfamilie des Buttons */
    font-weight: 800; /* Kräftige Schrift */
    text-transform: uppercase; /* Großbuchstabenstil */
    font-size: 0.72rem; /* Schriftgröße des Buttons */
    letter-spacing: 1px; /* Mehr Luft zwischen den Buchstaben */
    border: 1px solid rgba(255,255,255,0.1); /* Dünner, heller Rand */
}


/* =========================================================
   11) ARTIKEL-HERO – MOBILE
========================================================= */

@media (max-width: 768px) {
    .hero {
        min-height: 62svh;
        padding: calc(var(--header-height) + 170px) 20px 24px; /* Abstände von headline nach unten */
    }

    .hero-content {
        max-width: 100%;
    }

    .article-hero-meta-block {
        margin-top: 6px;
        gap: 2px;
    }

    .meta-pill {
        margin-bottom: 12px;
    }

    .article-author-link {
        margin-top: 0;
    }

    .article-author-img {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .related-article-box {
        margin: 18px 0 24px 0;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .related-article-label {
        font-size: 0.76rem;
        margin-bottom: 8px;
        line-height: 1.15;
    }

    .related-article-link {
        font-size: 0.95rem;
        line-height: 1.22;
        -webkit-line-clamp: 2;
    }

    .related-article-link + .related-article-link {
        margin-top: 8px;
        padding-top: 8px;
    }
}

.v2-back-fab {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 167, 216, 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    text-decoration: none;
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.1s ease;
}

.v2-back-fab:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

.v2-back-fab svg {
    width: 30px;
    height: 30px;
    display: block;
    fill: currentColor;
    transform: scaleX(-1);
}