/* Robin Akademie - Main Stylesheet */
@import url('../../font/stylesheet.css');

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Reserve unten unter den schwebenden Action-Buttons (E-Mail/Telefon/Instagram).
   180px = FAB-Höhe 52 + FAB-bottom-Offset 30 + Atemraum 48 + iOS-Safari-Bottombar ~50.
   Plus env(safe-area-inset-bottom) für den iPhone-Home-Indicator (34 px auf X+). */
:root {
    --fab-reserve: calc(180px + env(safe-area-inset-bottom, 0px));
    /* Einheitliche Größe der Inline-Link-Buttons (Video / Mehr lesen / Download).
       40% größer als die FRÜHEREN Inline-Icons (~18px ≈ eine Zeile → ~25px),
       bewusst kleiner als das FAB-Häuschen (52px). HD 30.6.2026.
       Eine Zahl ändern = alle drei Button-Typen ändern. */
    --linkbtn-size: 25px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #003875;
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: #003875;
    text-decoration: none;
}

a:hover {
    color: #0088cc;
}

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

ul, ol {
    list-style: none;
}


/* === Home Scroll Container === */
.home-scroll-container {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden; /* kein Horizontal-Scroll durch Hover-Panels/Transform */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.home-scroll-container::-webkit-scrollbar {
    display: none;
}

/* === Home Title Page === */
.home-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
}

/* === Home Section (below title) === */
.home-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 70px 0 0;
    scroll-snap-align: start;
}

.home-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Seite 2 trägt dasselbe Flipchart-Composite wie die Sektionsseiten (startseite =
   akademie-Geometrie) → exakt derselbe 25/25-Anker (HD 24.6.2026), damit das Flipchart
   auch hier beim Schmalerziehen konstant bei ~25%/25% bleibt. */
.home-content .home-bg-img {
    object-position: 25% 25%;
}

/* Horizontal white gradient band across center */
.home-hero {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80px;
    display: flex;
    align-items: center;
    background: linear-gradient(to right,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.85) 30%,
        rgba(255,255,255,0.5) 55%,
        rgba(255,255,255,0) 75%);
    z-index: 1;
}

.home-welcome {
    padding-left: 5%;
    opacity: 0;
    transform: translateX(-24px);
    animation: welcomeFadeIn 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}

.home-welcome h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: #003875;
    line-height: 1.3;
    white-space: nowrap;
}

@keyframes welcomeFadeIn {
    0%   { opacity: 0; transform: translateX(-24px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* === Inhaltliche Startseite (Navigations-Hub) === */
/* Feste Kantenlänge der weißen Symbol-/Logo-Felder auf Seite 2.
   EINE Quelle für Logo UND die drei Kategorie-Icons → sie sind immer exakt gleich groß
   (Briefing: „Symbole genauso groß wie das Logo"), unabhängig vom Umbruch.
   Wert hier zentral änderbar. */
:root {
    /* Logo bleibt groß; die Kategorie-Icons sind kleiner → zwei getrennte Variablen. */
    --hub-logo-size: 156px; /* Eck-Logo +30% (HD 25.6.2026); Kategorie-Icons unberührt (--hub-icon-size) */
    --hub-icon-size: 88px;
    /* Titelbalken (und Aufklapp-Panel) bewusst breiter als das Icon — wie in der
       Anleitung (Seite 2). Eigene Variable, damit Icon und Balken getrennt änderbar sind. */
    --hub-label-width: 210px;
}

.home-content-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Drei Hauptthemen rechts neben dem Flipchart (HD-Mockup Seite 2) */
.home-nav {
    position: absolute;
    top: 24%;
    left: 41%;
    right: 1%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.home-nav-themes {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(14px, 2.5vw, 44px);
}

.home-theme {
    pointer-events: auto;
    position: relative; /* Anker für das absolut schwebende Aufklapp-Panel (Design-System AreaTile) */
    /* Kartenbreite = Labelbreite → alle drei gleich breit, JS-Reihen-Layout misst hieran. */
    width: var(--hub-label-width);
    text-align: center;
    /* Die ganze Kachel ist EIN Anker auf die Bereichsseite (HD 30.6.2026). */
    display: block;
    text-decoration: none;
    color: var(--theme-color);
    cursor: pointer;
}

.home-theme-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-decoration: none;
    color: var(--theme-color);
}

/* Symbol in weißem Kästchen mit farbiger Oberkante (HD-Mockup Seite 2).
   Festes Quadrat = var(--hub-icon-size); NIE responsiv schrumpfend. */
/* Invertiert: Quadrat in der Bereichsfarbe, Icon weiß. Spitze Ecken (Wunsch 21.6.2026). */
.home-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* flex-shrink:0 → in der Zeilen-Ansicht (Icon neben Text) wird das Quadrat
       nicht horizontal gestaucht, bleibt also immer quadratisch */
    flex: 0 0 auto;
    width: var(--hub-icon-size);
    height: var(--hub-icon-size);
    background: var(--theme-color);
    border-radius: 0;
    box-shadow: 0 5px 16px rgba(0,0,0,0.18);
}
/* === Icon-System: einfärbbare Masken-Icons (HD-Wunsch 24.6.2026) ===
   <span class="icon icon--NAME"> rendert das PNG aus assets/img/icons/ als CSS-Maske.
   Die Fläche füllt background-color:currentColor → das Icon nimmt die Textfarbe seines
   Buttons an und wechselt sie beim Hover automatisch mit (kein Hover pro Icon nötig).
   Größe je Container über .container .icon { width/height } oder --icon-size.
   Erweitern: PNG in assets/img/icons/<name>.png ablegen + eine .icon--<name>-Zeile. */
.icon {
    display: inline-block;
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
    flex: 0 0 auto;
}
.icon--akademie        { --icon-url: url(../img/icons/akademie.png); }
.icon--erfolgsprojekte { --icon-url: url(../img/icons/erfolgsprojekte.png); }
.icon--erfolgswissen   { --icon-url: url(../img/icons/erfolgswissen.png); }
.icon--download        { --icon-url: url(../img/icons/download.png); }
.icon--home            { --icon-url: url(../img/icons/home.png); }
.icon--kontakt         { --icon-url: url(../img/icons/kontakt.png); }
.icon--print           { --icon-url: url(../img/icons/print.png); }
.icon--instagram       { --icon-url: url(../img/icons/instagram.png?v=2); } /* v2: bekanntes IG-Glyph (HD 6.7.2026) */

.home-theme-icon .icon {
    /* Glyph groß im Quadrat, weiß auf farbigem Grund. Rand ums Icon wie bei den
       kleinen Buttons (HD 27.6.2026): 62% → 82% — AreaTiles sind „große Buttons". */
    width: 82%;
    height: 82%;
    background-color: #fff;
}

/* Bereichs-Label: kein gefüllter Balken mehr (Design-System v3 „AreaTile") — die
   Schrift steht WEISS direkt auf dem Foto, mit Textschatten für Lesbarkeit. */
.home-theme-label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.2;
    color: #fff;
    padding: 5px 10px;
    transition: opacity 0.2s ease;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.40);
}
/* Bei Hover übernimmt der farbige Panel-Kopf (Dropdown-Breite) den Titel an gleicher
   Stelle → das weiße Standalone-Label wird ausgeblendet. NUR in hub-rowwide, denn nur
   dort ist das Panel (mit dem Titel-Kopf) sichtbar — in hub-col/hub-rowbottom (Spalte/
   unten/mobil) ist das Panel display:none, dort MUSS der Titel bleiben. HD 30.6.2026. */
.hub-rowwide .home-theme:hover .home-theme-label,
.hub-rowwide .home-theme:focus-within .home-theme-label {
    opacity: 0;
}
/* Farbiger Titel-Kopf des Dropdowns: hohes Band in Bereichsfarbe über die volle
   Panel-Breite, direkt am Body anschließend (Hintergrund des Titels = Dropdown-Breite). */
.home-theme-panel-head {
    display: block;
    background: var(--theme-color, #003875);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.2;
    text-align: center;
    padding: 5px 10px;
    white-space: nowrap;
}

/* Aufklapp-Panel (Design-System „AreaTile"): schwebendes Milchglas-Panel, das bei
   Hover unter dem Label erscheint. Oberkante in der Bereichsfarbe, Links in Robin-Blau.
   Absolut positioniert → reserviert keine Kartenhöhe (JS-Hub-Layout unberührt). */
.home-theme-panel {
    position: absolute;
    /* Kopf-Band auf Höhe des Labels ansetzen (Icon 88 + 10px Lücke = --hub-icon-size
       + Reihen-Gap). So bleibt zum Icon ein bisschen Abstand und der Titel springt
       beim Hover nicht. HD 30.6.2026. */
    top: calc(var(--hub-icon-size) + 10px);
    left: 50%;
    min-width: 188px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 0;
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0.25s;
    z-index: 20;
}
.home-theme:hover .home-theme-panel,
.home-theme:focus-within .home-theme-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Panel-Zeile: echter Link auf die Unterseite, linksbündig, Robin-Blau,
   Hover hinterlegt zart blau (Design-System PanelRow). */
.home-theme-subitem {
    display: block;
    padding: 9px 22px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: #003875;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}
/* Sub-Einträge sind nur Vorschau (keine eigenen Links) → KEIN Hover-Highlight.
   Ein Klick darauf blubbert zum Kachel-Anker (Bereichsseite). HD 30.6.2026. */

/* Fuß-Symbole: quadratisch, einheitliche Farbe, links (HD-Vorgabe 17.6.2026) */
.home-nav-foot {
    position: absolute;
    left: 4%;
    bottom: 6%;
    display: flex;
    gap: 14px;
    pointer-events: auto;
}
.home-foot-btn {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #003875;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}
.home-foot-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}
.home-foot-btn .icon {
    width: 26px;
    height: 26px;
    background-color: #fff;
}

/* === Seite-2 Hub: Karten-Layout (JS-gesteuert über .hub-col / .hub-row) ===
   layoutHomeHub (main.js) misst die Flipchart-Box im (festen) Composite und setzt für
   JEDE Viewport-Größe: object-position (Flipchart voll sichtbar + rechts vom Logo) und
   die Kachel-Position. CSS liefert nur die zwei Anordnungen (HD 27.6.2026):
   - genug Platz rechts  → Spalte rechts neben dem Flipchart, LINKSbündig
   - sonst               → Reihe UNTER dem Flipchart, OBENbündig */

/* 1) Desktop horizontal: Reihe rechts neben dem Flipchart, weit verteilt (space-between
      über die Breite des freien Bereichs), MIT Aufklapp-Menüs. Icon über Label. */
.home-nav-themes.hub-rowwide {
    flex-direction: row;
    align-items: flex-start;          /* obenbündig */
    /* space-evenly = 4 gleiche Abstände zwischen Bildmitte und Rand, Icons an den
       Knotenpunkten (HD 27.6.2026). gap:0 nötig, sonst addiert der Basis-Flex-`gap`
       nur die inneren Lücken und sie werden ungleich. */
    justify-content: space-evenly;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
}
.hub-rowwide .home-theme { width: auto; }
.hub-rowwide .home-theme-main { flex-direction: column; align-items: center; gap: 10px; }
.hub-rowwide .home-theme-label { width: auto; text-align: center; }

/* 2) Desktop vertikal (Fallback in der rechten Hälfte): linksbündig, OHNE Menüs. */
.home-nav-themes.hub-col {
    flex-direction: column;
    align-items: flex-start;          /* linksbündig */
    gap: clamp(14px, 2.2vh, 26px);
}
.hub-col .home-theme { width: auto; }
.hub-col .home-theme-main { flex-direction: row; align-items: center; gap: 12px; }
.hub-col .home-theme-label { width: auto; }

/* 3) Mobile: Reihe unten, obenbündig, OHNE Menüs. Schrumpft via JS-transform, wenn die
      Breite nicht reicht. Icon über Label. */
.home-nav-themes.hub-rowbottom {
    flex-direction: row;
    align-items: flex-start;          /* obenbündig */
    justify-content: center;
    gap: clamp(16px, 4vw, 40px);
    transform-origin: center top;
}
.hub-rowbottom .home-theme { width: auto; }
.hub-rowbottom .home-theme-main { flex-direction: column; align-items: center; gap: 8px; }
.hub-rowbottom .home-theme-label { width: auto; }

/* Aufklapp-Menüs NUR in der Desktop-Reihe (hub-rowwide). */
.hub-col .home-theme-panel,
.hub-rowbottom .home-theme-panel { display: none; }

/* Logo links oben auf schmalen Viewports kleiner → verdrängt das Flipchart nicht und
   gibt dem JS einen kleineren „Logo-Freiraum". */
@media (max-width: 900px) { :root { --hub-logo-size: 104px; } }
@media (max-width: 600px) { :root { --hub-logo-size: 72px; } }

/* FAB + Seite-2-Logo auf emotionaler Startseite (Seite 1) ausblenden */
body[data-view="emotional"] .floating-buttons,
body[data-view="emotional"] .home-logo-corner {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

body .floating-buttons,
body .home-logo-corner {
    transition: opacity 0.5s ease;
}

/* === Logo links oben: Erste-Seite-Logo (Puzzle + Schriftzug) in weißem Feld ===
   Auf allen Seiten AUSSER Seite 1 (HD-Wunsch 21.6.2026). Gemeinsamer Look für
   Seite 2 (.home-logo-corner, absolut im Scroll-Container) und alle übrigen
   Unterseiten (.site-logo-corner, fixed). Größe an --hub-icon-size gekoppelt. */
.site-logo-corner,
.home-logo-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--hub-logo-size);
    height: var(--hub-logo-size);
    padding: calc(var(--hub-logo-size) * 0.08);
    /* Kein Kasten mehr — nur das Dreieck, mit weichem weißem Schein (Wunsch 21.6.2026).
       Der Glow sitzt am SVG (folgt der Dreiecksform), siehe .home-logo-mark. */
    background: none;
    border-radius: 0;
}
.site-logo-corner {
    position: fixed;
    top: 18px;
    left: 30px;
    z-index: 950;
}
.home-logo-corner {
    position: absolute;
    top: 22px;
    left: 30px;
    z-index: 6;
}
/* Nur die Puzzleteile (kein Schriftzug). Weicher weißer Schein, der der Dreiecksform
   folgt und in die Wiese ausläuft — kein eckiger Kasten. Weichzeichnung weitläufig
   (HD 24.6.2026). Der dunkle Schatten ist enger und ein helles Grau statt Schwarz
   (HD 25.6.2026: schmaler/kleiner/hellgrauer) — nur als Kante/Tiefe, ohne Grauschleier,
   damit der weiße Schein klar rauskommt. */
.site-logo-corner .home-logo-mark,
.home-logo-corner .home-logo-mark {
    height: 84%;
    width: auto;
    display: block;
    filter:
        drop-shadow(0 2px 3px rgba(110, 110, 110, 0.28))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 32px rgba(255, 255, 255, 0.85))
        drop-shadow(0 0 120px rgba(255, 255, 255, 0.65));
}

/* Logo positioned over the sun (right side) */
/* Logo hoch in den Himmel, mittig-rechts (HD-Mockup Seite 1: „in den Himmel, nicht mittig") */
.home-brand {
    position: absolute;
    right: 28%;
    /* ~60px höher als 13% (HD-Wunsch 22.6.2026) */
    top: calc(13% - 60px);
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.home-puzzle {
    /* ~20% kleiner (200 → 160) */
    width: 160px;
    height: auto;
    filter: drop-shadow(2px 4px 12px rgba(0,0,0,0.15));
}

.home-foont {
    /* ~20% kleiner (280 → 224) */
    width: 224px;
    height: auto;
    filter: drop-shadow(1px 2px 6px rgba(0,0,0,0.1));
}

/* === Farbiger Reiter, linksbündig mit dem Textblock (HD-Mockup Seite 4) ===
   Bereichs-Icon-Quadrat + Bereich (gefüllt) + ggf. aktuelle Unterseite (weiß).
   Sitzt knapp über der Überschrift, am linken Rand der Textspalte (left:57%). */
.section-corner-tabs {
    position: absolute;
    /* gleiche Anker-Formel wie die Überschrift, das Reiter-Band knapp darüber */
    top: calc(0.22 * (100vh - 70px) + 4px);
    left: 57%;
    right: auto;
    z-index: 5;
    display: flex;
    align-items: stretch;
    height: 40px;
    font-family: 'Roboto', sans-serif;
}
/* Bereichs-Icon auf farbigem Quadrat (der „rote Fleck"); klickbar wie der Bereich.
   Kleiner Weißraum zum Themenbereich-Reiter dahinter (HD-Wunsch 21.6.2026). */
.corner-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    /* Reihenfolge neu (HD 6.7.2026): Icons stehen rechts nach dem Text → Lücke VOR
       jedem Icon (Text-Band | Fahne | Haus), statt wie früher dahinter. */
    margin-left: 8px;
    background: var(--tab-color, #003875);
    border-radius: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    text-decoration: none;
    transition: filter 0.2s;
}
.corner-tab-icon:hover {
    filter: brightness(1.2);
}
.corner-tab-icon .icon {
    /* Rand halbiert (HD 27.6.2026): 24px (60%) → 33px (≈82%) in 40px-Box. */
    width: 33px;
    height: 33px;
    background-color: #fff;
}
.section-corner-tab {
    display: flex;
    align-items: center;
    background: var(--tab-color, #003875);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 0 16px;
    /* schließt rechts an das Icon-Quadrat an; spitze Ecken */
    border-radius: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    text-decoration: none;
}
.section-corner-tab:hover {
    filter: brightness(1.2);
}
/* Klickbare Icons/Themen färben sich beim Hover NICHT blau — Schrift bleibt konstant weiß
   (überschreibt das globale a:hover). HD-Wunsch 21.6.2026. */
.section-corner-tab:hover,
.section-corner-tab:focus,
.corner-tab-icon:hover,
.corner-tab-icon:focus,
.home-theme-main:hover,
.home-theme-main:focus,
.home-theme-main:hover .home-theme-label {
    color: #fff;
}
/* Unter-Reiter hat WEISSEN Hintergrund + farbige Schrift → Hover NICHT weiß (sonst
   weiß auf weiß, unlesbar), sondern farbige Schrift behalten; brightness macht sie heller. */
.section-corner-tab--sub:hover,
.section-corner-tab--sub:focus {
    color: var(--tab-color, #003875);
}
/* Unter-Unter-Seite: Navi-Text farbig positiv (farbige Schrift auf Weiß), direkt
   im Anschluss an den Themenbereich — ohne Weißraum (HD-Wunsch 21.6.2026). */
.section-corner-tab--sub {
    margin-left: 0;
    background: #fff;
    color: var(--tab-color, #003875);
    border: 2px solid var(--tab-color, #003875);
    border-radius: 0;
    font-size: 0.95rem;
    padding: 0 14px;
}

/* === Download-Button (Prospekt/Flyer) ===
   Ersetzt den Text-Link; outlined in der Bereichsfarbe (--area-color), spitze Ecken,
   großes Download-Icon. Hover füllt sich (Wunsch 21.6.2026). */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* gleiche Kondition/Größe wie die anderen Inline-Link-Buttons (HD 30.6.2026) */
    width: var(--linkbtn-size, 70px);
    height: var(--linkbtn-size, 70px);
    /* HD 6.7.2026 (Punkt 13): keine Leerzeile nach oben (Icon direkt unter dem Text);
       nach unten 0 → die EINE Leerzeile zur Tagline liefert deren margin-top (1.6em). */
    margin: 0;
    border: 2.5px solid var(--area-color, #003875);
    background: #fff;
    color: var(--area-color, #003875);
    border-radius: 0;
    text-decoration: none;
    transition: filter 0.2s;
}
.download-btn .icon {
    /* Rand halbiert (HD 27.6.2026): 58% → 80%, knapp innerhalb des 2.5px-Rahmens. */
    width: 80%;
    height: 80%;
    /* outlined Button → Icon in Bereichsfarbe (gegen fremde Link-Farbregeln pinnen). */
    background-color: var(--area-color, #003875);
}
/* Hover: nur Farbe (Rand+Icon) heller, weiße Fläche bleibt, keine Bewegung (HD 24.6.2026).
   color fixieren, damit das globale a:hover (#0088cc) die Bereichsfarbe nicht überschreibt. */
.download-btn:hover {
    color: var(--area-color, #003875);
    filter: brightness(1.2);
}

/* === „aktueller ErfolgsBrief" — Download-Link mit Icon + kursivem Label ===
   Steht auf der ErfolgsBriefe-Seite direkt vor dem Abo-Absatz. Kleines Download-Icon
   links, kursives Label, Bereichsfarbe. Hover nur heller, keine Bewegung (Konvention
   24.6.2026). Ziel-PDF kommt aus der Einstellung erfolgsbrief_current_url. */
.erfolgsbrief-current-wrap {
    margin: 0 0 23px; /* HD 6.7.2026: keine Leerzeile nach oben */
}
/* Gleiche Kondition wie die anderen Inline-Link-Buttons (HD 30.6.2026):
   icon-only Outline-Button (weiß, area-farbiger Rahmen + Download-Icon),
   kein Label. Download-Icon in 80% wie der generische .download-btn (gleiches
   PNG → gleiche optische Größe). */
.erfolgsbrief-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--linkbtn-size, 70px);
    height: var(--linkbtn-size, 70px);
    padding: 0;
    background: #fff;
    border: 2.5px solid var(--area-color, #003875);
    color: var(--area-color, #003875);
    text-decoration: none;
    border-radius: 0;
    font-size: 0;
    transition: filter 0.2s;
}
.erfolgsbrief-current .icon {
    width: 80%;
    height: 80%;
    background-color: var(--area-color, #003875);
}
.erfolgsbrief-current em {
    display: none;
}
.erfolgsbrief-current:hover {
    color: var(--area-color, #003875);
    filter: brightness(1.2);
}

/* === Symbol am Ende des Textes (Wunsch 19.6.) ===
   Kein Pfeil mehr — es zeigt das Bereichs-Icon, farbig negativ (farbiges Quadrat, weißes
   Icon), Größe wie der Reiter-/Überschrift-Icon (40px). HD-Wunsch 21.6.2026. */
.text-home-btn,
.text-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--up-color, #003875);
    color: #fff;
    border: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    transition: transform 0.2s, filter 0.2s;
}
/* Hover: nur Hintergrund heller, Icon bleibt WEISS (color fixieren, sonst färbt das
   globale a:hover das Icon blau), keine Bewegung (HD 24.6.2026). */
.text-home-btn:hover,
.text-back-btn:hover {
    color: #fff;
    filter: brightness(1.2);
}
.text-home-btn .icon,
.text-back-btn .icon {
    /* Rand halbiert (HD 27.6.2026): 24px (60%) → 33px (≈82%) in 40px-Box. */
    width: 33px;
    height: 33px;
    /* gefüllter Button → Icon immer weiß (gegen fremde Link-Farbregeln pinnen);
       Hover ändert die Helligkeit, nicht die Farbe. */
    background-color: #fff;
}

/* „Nach oben"-Marke neben dem gescrollten Text (HD-Wunsch 23.6.2026).
   Sitzt als Geschwister AUSSERHALB der Scroll-Spalte im Gutter rechts daneben
   (gleicher Anker wie die Textspalte: top 22%, links bei 95% = 57%+38%), damit
   sie den Text nie überdeckt. JS toggelt .visible, sobald gescrollt wurde, und
   scrollt per Klick die Spalte (Desktop) bzw. das Fenster (Mobile) nach oben. */
.text-top-btn {
    position: absolute;
    top: calc(22% - 14px);
    left: calc(57% + 38% + 4px);
    z-index: 6;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--area-color, #003875);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, filter 0.2s, transform 0.2s;
}
.text-top-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.text-top-btn:hover {
    filter: brightness(1.2);
}
.text-top-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

@media (max-width: 1024px) {
    /* Mobile: kein Gutter neben dem (vollbreiten) Text → die Marke als kleine,
       feststehende „Nach oben"-Taste unten rechts (Fuß-Symbole sitzen unten links). */
    .text-top-btn {
        position: fixed;
        top: auto;
        left: auto;
        right: 16px;
        bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }
    .section-corner-tabs {
        /* Mobile: knapp über der Textkarte (beginnt bei 45vh), linksbündig mit deren Text */
        top: 45vh;
        left: 20px;
        transform: translateY(calc(-100% - 8px));
        height: 34px;
    }
    .corner-tab-icon { flex: 0 0 34px; }
    /* Rand halbiert (HD 27.6.2026): 20px (≈59%) → 28px (≈82%) in 34px-Box. */
    .corner-tab-icon .icon { width: 28px; height: 28px; }
    .section-corner-tab {
        font-size: 0.9rem;
        padding: 0 12px;
    }
    .section-corner-tab--sub {
        font-size: 0.82rem;
        padding: 0 10px;
    }
}

/* === Floating Action Buttons (global) === */
.floating-buttons {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    left: 30px;
    display: flex;
    gap: 14px;
    z-index: 900;
}

/* Glossy-Glas-Schein hinter den vier Fuß-Buttons (HD 30.6.2026):
   leicht verwischter Hintergrund (frosted glass), der nach außen mit weichem
   Gauß-Verlauf ausläuft — wie durch unregelmäßiges Glas, das zum Rand hin glatt/
   klar wird. Der harte Kasten-Rand von backdrop-filter wird per radialer Alpha-
   Maske weggefedert; die Maske blendet Mattierung UND Lichtschein gemeinsam aus.
   Liegt auf z-index:-1 im Stacking-Context von .floating-buttons → Icons bleiben
   scharf darüber, nur die Seite dahinter (Wiese/Textkarte) wird gemattet. */
.floating-buttons::before {
    content: "";
    position: absolute;
    /* Glossy-Sockel, halbe Ausbreitung + weicher Auslauf (HD 30.6.2026) */
    inset: -10px -12px -8px -12px;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px) saturate(1.08);
            backdrop-filter: blur(4px) saturate(1.08);
    /* dezenter Glossy-Lichtschein (oben-links einfallendes Licht), halbiert */
    background: radial-gradient(120% 140% at 34% 24%,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0) 75%);
    /* Rechteckiger Sockel mit WEICHEM Profil: zwei Achsen-Verläufe (quer + hoch),
       per mask-composite verschnitten. Der Auslauf hat einen Zwischenstopp (0.5 bei
       9px) → S-förmig statt harte Linear-Rampe, damit an den Enden kein sicht-
       barer Knick/Kante entsteht. Halbe Ausbreitung gegenüber vorher. */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0, rgba(0,0,0,0.5) 9px, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0.5) calc(100% - 9px), transparent 100%),
        linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.5) 9px, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0.5) calc(100% - 9px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0, rgba(0,0,0,0.5) 9px, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0.5) calc(100% - 9px), transparent 100%),
        linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.5) 9px, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0.5) calc(100% - 9px), transparent 100%);
    mask-composite: intersect;
}

/* Fuß-Symbole invertiert: outlined (Rahmen in Robin-Blau, transparent), Icon groß & blau,
   spitze Ecken, gleiche Buttongröße (Wunsch 21.6.2026). */
.fab-btn,
.fab-btn:link,
.fab-btn:visited,
.fab-btn:focus,
.fab-btn:active,
.fab-btn:hover {
    color: #003875;
}

.fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0;
    /* volle weiße Fläche (vorher halbtransparent) — Durchgängigkeit (HD 24.6.2026) */
    background: #fff;
    border: 2.5px solid #003875;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* Hover: nur Farbe (Rand+Icon) heller, weiße Fläche bleibt, keine Bewegung. */
.fab-btn:hover {
    filter: brightness(1.2);
}

.fab-btn .icon {
    /* Icon möglichst groß im Button, in Dunkelblau (gegen a:hover-Farbe pinnen);
       Hover ändert die Helligkeit, nicht die Farbe.
       Rand halbiert (HD 27.6.2026): 70% → 84%, nur dünne Kante zum Rahmen. */
    width: 84%;
    height: 84%;
    background-color: #003875;
}

/* === Contact Modal (Email / Phone) === */
.contact-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

.contact-modal-backdrop.active {
    display: flex;
}

.contact-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    animation: dropdownFade 0.25s ease;
    max-width: 90vw;
}

.contact-modal-label {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 12px;
}

.contact-modal-value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.contact-modal-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003875;
    letter-spacing: 0.5px;
    user-select: all;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-modal-value:hover {
    color: #0088cc;
    text-decoration: underline;
}

.contact-modal-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #f8f9fb;
    color: #003875;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.contact-modal-copy:hover {
    background: #e8f0fe;
    border-color: #003875;
}

.contact-modal-copied {
    font-size: 0.85rem;
    color: #28a745;
    font-weight: 500;
    height: 20px;
    margin-bottom: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.contact-modal-copied.visible {
    opacity: 1;
}

.contact-modal-close {
    background: #003875;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}

.contact-modal-close:hover {
    background: #0088cc;
}

/* === File Viewer Modal (PDF / Video) === */
.file-viewer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
}

.file-viewer-backdrop.active {
    display: flex;
}

.file-viewer-close {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 2001;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.file-viewer-close:hover {
    opacity: 1;
}

.file-viewer-content {
    width: 90vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-viewer-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    background: #fff;
}

.file-viewer-content video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    background: #000;
}

/* === Section Page (Einzel-Sektion, keine Snap-Scroll-Container) === */
.section-page {
    position: relative;
    height: 100vh;
    padding: 70px 0 0;
    overflow: hidden;
}

/* Background image + flipchart overlay wrapper */
.section-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

/* Flipchart-Seiten: Anker auf 25%/25% statt left/center (HD-Wunsch 24.6.2026 —
   „Skalierungsmittelpunkt", horizontal UND vertikal). Die Prozent-Variante von
   object-position legt die 25%-Linie des Composites auf die 25%-Linie des Viewports,
   unabhängig von der cover-Skalierung. Der Flipchart-Mittelpunkt sitzt bei ~25%
   der Composite-Breite (Quad-Mitte 1248/4921) und die Kalibrier-Oberkante bei ~24%
   der Composite-Höhe → das Flipchart bleibt über alle Desktop-Breiten konstant bei
   ~25%/25%, kein Drift mehr beim Schmalerziehen (weder vertikal noch horizontal).
   left/center treffen das nur bei genau einem Seitenverhältnis. Kontakt/Impressum
   nutzen dieselbe Klasse ohne Flipchart → gescopet. Mobile (≤1024px): center top. */
.section-page .section-bg-img,
.detail-page .section-bg-img {
    object-position: 25% 25%;
}
/* Impressum/Datenschutz/404 (single.php, 404.php) sind ebenfalls .detail-page, nutzen
   aber das SUBPAGE-Composite (anderes bg + Quad) → Flipchart sitzt dort bei ~20% der
   Breite / ~16% der Höhe. Eigener Anker, sonst würde der 25/25-Wert sie verschieben.
   Marker-Klasse .subpage-flip; Regel nach der .detail-page-Regel → gewinnt per Reihenfolge. */
.subpage-flip .section-bg-img {
    object-position: 20% 16%;
}

/* Golden ratio gradient overlay */
.section-bg-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.2) 38%,
        rgba(255,255,255,0.5) 44%,
        rgba(255,255,255,0.8) 52%,
        rgba(255,255,255,0.8) 100%);
    pointer-events: none;
}

.section-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.section-divider {
    height: 6px;
    background: #003875;
    scroll-snap-align: none;
    flex-shrink: 0;
}

/* === Section Content - Textblock rechts, vertikal zentriert === */
.section-content {
    position: absolute;
    left: 57%;
    /* HD-Vorgabe (26.5.): ABSOLUTER prozentualer Anker statt block-zentrierender Trick.
       22% von oben minus 14px Halbe-Zeile-Offset = der eine, verbindliche Startpunkt
       für sämtliche Überschriften aller Sektionspages und Detail-Subpages auf Desktop.
       Damit ist die Position content-unabhängig (kurze und lange Sektionen starten
       jetzt deterministisch an derselben Stelle). */
    top: calc(22% - 14px);
    transform: none;
    width: 38%;
    /* HD: „auf allen Seiten die Texte zum Scrollen" — gleiche Scroll-Logik wie .detail-content,
       damit lange Landing-/Kurzansicht-Texte nicht abgeschnitten werden. */
    max-height: calc(100vh - 22% + 14px - var(--fab-reserve));
    overflow-y: auto;
    padding: 0 3% var(--fab-reserve) 0;
}

/* Motto "Erfolg ..." auf allen Sektions-Seiten ausblenden (Vorgabe HD, Änderungen PDF) */
.section-motto {
    display: none;
}

/* Nummer-Badge entfällt überall */
.section-number {
    display: none;
}

.section-header {
    margin-bottom: 0;
}

.section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #003875;
    text-shadow: 1px 1px 3px rgba(255,255,255,0.8);
    /* halbe Zeile Abstand nach Haupt-Überschrift */
    margin-bottom: 0.4em;
    line-height: 1.2;
}

.section-text {
    color: #003875;
    line-height: 1.7;
    /* halbe statt ganze Leerzeile zwischen Text-Block und folgendem "Mehr erfahren..."-Link */
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}

/* Video-Modal-Link: kein Inline-Video mehr (HD-Vorgabe), sondern Trigger für File-Viewer */
.section-video-link {
    /* HD 6.7.2026: keine Leerzeile nach oben; unten 23px zum folgenden Text. */
    margin: 0 0 23px;
}

/* Gleiche Kondition wie die anderen Inline-Link-Buttons (HD 30.6.2026):
   icon-only Outline-Button (weiß, area-farbiger Rahmen + Play-Dreieck), kein Text. */
.section-video-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--linkbtn-size, 70px);
    height: var(--linkbtn-size, 70px);
    gap: 0;
    padding: 0;
    background: #fff;
    border: 2.5px solid var(--area-color, #003875);
    color: var(--area-color, #003875);
    text-decoration: none;
    border-radius: 0;
    font-size: 0;
    box-shadow: none;
    transition: filter 0.2s;
}

.section-video-link a:hover {
    background: #fff;
    transform: none;
    filter: brightness(1.2);
}

.section-video-link .play-icon {
    /* Play-Dreieck ~80% Füllung des Buttons (wie .more-link[video], HD 30.6.2026) */
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--area-color, #003875);
}

.section-text ul,
.section-text ol {
    margin: 10px 0;
    padding-left: 5px;
}

.section-text ul li {
    position: relative;
    padding-left: 18px;
    /* halbe Leerzeile zwischen Bullet-Items (HD-Vorgabe) */
    margin-bottom: 0.6em;
}

.section-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 10px;
    height: 10px;
    background: #003875;
}

.section-text ol {
    counter-reset: ol-counter;
}

.section-text ol li {
    position: relative;
    padding-left: 24px;
    /* halbe Leerzeile zwischen Listen-Items */
    margin-bottom: 0.6em;
    counter-increment: ol-counter;
}

.section-text ol li::before {
    content: counter(ol-counter) '.';
    position: absolute;
    left: 0;
    color: #003875;
    font-weight: bold;
}

.section-text p {
    margin-bottom: 0.4em;
}

/* Quill.js erzeugt leere <p><br></p> als "Leerzeile" — auf halbe Zeile schrumpfen */
.section-text p:empty,
.section-text p:has(br:only-child) {
    line-height: 0.6;
    margin-bottom: 0.3em;
}
/* Der LETZTE Leer-Absatz (Quill-Rest am Textende) ganz entfernen — sonst steht vor der
   Tagline „Ihr Erfolg ist unser Ziel." mehr als eine Leerzeile (HD 6.7.2026, Punkt 18). */
.section-text > p:last-child:empty,
.section-text > p:last-child:has(br:only-child) {
    display: none;
}

.section-text strong {
    color: #003875;
    font-weight: 700;
}

/* Tagline „Ihr Erfolg ist unser Ziel." — vom Template AM ENDE nach den Links gerendert.
   Vorher inline im content_short, jetzt global aus dem Template, damit die HD-Vorgabe
   „Bullets → Link → Tagline" auf ALLEN Seiten konsistent gilt. */
.section-tagline {
    /* eine Zeile Abstand nach oben (HD 30.6.2026) */
    margin-top: 1.6em;
    margin-bottom: 0;
    color: #003875;
    font-weight: 400;
    font-style: normal;
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
/* Nur der erste Satz „Ihr Erfolg ist unser Ziel." fett (HD 6.7.2026, Punkt 20:
   „überall in fett" — nicht mehr kursiv). display:block → Umbruch NACH dem ersten
   Satz, „Das ist …" kommt in die nächste Zeile (HD 30.6.2026). */
.section-tagline strong {
    display: block;
    font-weight: 700;
    font-style: normal;
}

/* HD 6.7.2026 (Punkt 19): auf den Erfolgsprojekte-Seiten die drei kursiv gesetzten
   Projektnamen (Diamant, Tandem, Erfolg 360°) zusätzlich fett. Gescopet über die
   Bereichs-Klasse am <main>, damit nur dort kursiver Text fett wird. */
.area-erfolgsprojekte .section-text em {
    font-weight: 700;
}

/* "Mehr erfahren ..." link - regular, underlined, italic */
/* Inline-Link-Button (Video / Mehr lesen) — icon-only Outline-Button, identische
   Kondition wie der Download-Button (HD 30.6.2026): weiße Fläche, area-farbiger
   Rahmen + area-farbiger Glyph, KEIN Text (font-size:0 → für Screenreader noch
   lesbar). Pfeil = Standard ("Mehr erfahren/entdecken"), Play = Video.
   Ausrichtung nach dem vorherigen Absatz: folgt eine Liste → eingerückt (23px,
   bündig mit dem Bullet-Text); folgt ein normaler Absatz → linksbündig.
   Kleiner oberer Abstand (sitzt wie eine neue Zeile am Text), Abstand nach
   unten kommt vom Folge-Absatz und bleibt. */
.more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--linkbtn-size, 70px);
    height: var(--linkbtn-size, 70px);
    /* HD 6.7.2026 (Punkt 13): keine Leerzeile nach oben; unten 0 → die eine Leerzeile
       zur Tagline liefert deren margin-top (1.6em). */
    margin: 0;
    border: 2.5px solid var(--area-color, #003875);
    background: #fff;
    border-radius: 0;
    font-size: 0;
    text-decoration: none;
    transition: filter 0.2s;
    --lb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9.5H12.5V5L21 12L12.5 19V14.5H3Z'/%3E%3C/svg%3E");
}

/* folgt einer Liste → wie der Listentext eingerückt (ul 5px + li 18px = 23px) */
ul + .more-link,
ol + .more-link {
    margin-left: 23px;
}

.more-link[data-file-type="video"] {
    --lb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 4L20 12L7 20Z'/%3E%3C/svg%3E");
}

.more-link::before {
    content: "";
    /* Glyph-Füllung wie bei den anderen Buttons (Download 80%, FAB/Breadcrumb 82–84%):
       großes Icon, dünner Rand (HD 30.6.2026). */
    width: 80%;
    height: 80%;
    background-color: var(--area-color, #003875);
    -webkit-mask: var(--lb-glyph) center / contain no-repeat;
            mask: var(--lb-glyph) center / contain no-repeat;
}

.more-link:hover {
    filter: brightness(1.2);
}

/* Scroll-to-top button */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: #003875;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background 0.3s, transform 0.3s, opacity 0.3s;
    box-shadow: 0 3px 10px rgba(0,56,117,0.3);
    opacity: 0;
}

.scroll-top-btn:hover {
    background: #0088cc;
    transform: scale(1.1);
}

.scroll-top-btn.visible {
    display: flex;
    opacity: 1;
}

/* === Detail Page === */
.detail-page {
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 70px 0 0;
}

.detail-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* Back link at bottom of detail content */
.detail-back-link {
    display: inline-block;
    margin-top: 30px;
    color: #003875;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.detail-back-link:hover {
    color: #0088cc;
}

.detail-content {
    position: absolute;
    left: 57%;
    /* HD-Vorgabe: Überschriften aller Subseiten sollen auf demselben Niveau prozentual
       von oben starten — fester Top-Anchor statt block-zentrierender Trick, damit das
       visuelle Niveau unabhängig vom Inhaltsumfang konsistent ist. 22% entspricht der
       Position der Akademie-Section-Überschrift. */
    top: calc(22% - 14px);
    width: 38%;
    max-height: calc(100vh - 22% + 14px - var(--fab-reserve));
    overflow-y: auto;
    text-align: left;
    background: none;
    padding: 0 3% var(--fab-reserve) 0;
    border-radius: 0;
    box-shadow: none;
}

.detail-content .section-motto {
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7);
}

.detail-content .section-title {
    /* HD-Vorgabe: Detail-Subseiten-Überschrift auf gleichem Niveau wie Section-Pages (1.8rem)
       statt eigener 2.2rem-Größe, damit das visuelle Niveau konsistent ist. */
    font-size: 1.8rem;
    margin-bottom: 0.4em;
    text-shadow: 0 1px 4px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7);
}

.detail-content .section-text {
    text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}

/* === Contact Page === */
.contact-page {
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 70px 0 0;
}

.contact-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* === Kontakt: Fotos von Conny & Hans-Dieter über der Wiese (HD-Mockup Seite 16) === */
.contact-portraits {
    position: absolute;
    left: 20%;
    top: 30%;
    /* Breite = Fotoreihe (auto), damit das Namens-Band exakt von links bis rechts reicht */
    width: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    pointer-events: none;
}
.contact-portraits-row {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.contact-portraits-row img {
    width: clamp(120px, 13vw, 178px);
    height: clamp(120px, 13vw, 178px);
    object-fit: cover;
    border: 5px solid #fff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.contact-portraits-caption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    color: #003875;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: clamp(0.9rem, 1.15vw, 1.15rem);
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.contact-info {
    position: absolute;
    left: 57%;
    /* HD-Vorgabe (26.5.): selber Top-Anchor wie .section-content und .detail-content,
       damit „Kontakt"-h1 auf gleicher Höhe wie Akademie/Erfolgsprojekte/Bibliothek startet. */
    top: calc(22% - 14px);
    transform: none;
    width: 38%;
    /* HD: Texte scrollen — wie .section-content/.detail-content */
    max-height: calc(100vh - 22% + 14px - var(--fab-reserve));
    overflow-y: auto;
    padding: 0 3% var(--fab-reserve) 0;
}

.contact-info h1 {
    /* Angeglichen an .section-title (1.8 rem + 0.4em margin-bottom), damit Kontakt-Heading
       optisch dasselbe Niveau wie Akademie/Erfolgsprojekte einnimmt (HD-Vorgabe 26.5.). */
    font-size: 1.8rem;
    font-weight: bold;
    color: #003875;
    margin-bottom: 0.4em;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(255,255,255,0.8);
}

.contact-info p {
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.7;
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}

/* Adresse + Telefon + Mail = ein enger Block, KEINE Leerzeile dazwischen; darunter
   genau EINE Leerzeile vor Impressum/Datenschutz (HD-Korrektur 6.7.2026). */
.contact-address p {
    margin-bottom: 0;
}
.contact-address {
    margin-bottom: 26px; /* ≈ eine Leerzeile (1 × line-height) */
}

.contact-info a {
    color: #0088cc;
    transition: color 0.2s;
}

.contact-info a:hover {
    color: #003875;
    text-decoration: underline;
}

.contact-links {
    /* Nur EINE Leerzeile vor Impressum (kommt aus .contact-address margin-bottom);
       kein Trennstrich/Extra-Abstand mehr (HD-Korrektur 6.7.2026). */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    gap: 20px;
}

.contact-links a {
    color: #003875;
    font-size: 0.9rem;
    transition: color 0.2s;
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}

.contact-links a:hover {
    color: #0088cc;
}

/* === Responsive: Tablet Landscape === */
@media (max-width: 1024px) {
    .section-inner {
        gap: 30px;
    }
    .detail-layout {
        gap: 30px;
    }

    .home-welcome h1 {
        font-size: 1.6rem;
    }

    .home-puzzle {
        width: 150px;
    }

    .home-foont {
        width: 220px;
    }

    .home-brand {
        right: 8%;
    }
}

/* === Mobile (≤ 1024 px): Bild oben, Text unten === */
@media (max-width: 1024px) {
    .home-page {
        padding: 80px 20px 30px;
    }

    .home-section {
        height: auto;
        min-height: calc(100vh - 70px);
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .home-section .detail-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        background: rgba(255,255,255,0.8);
        padding: 30px 20px 40px;
        border-radius: 0;
        flex: 1;
        margin-top: 45vh;
    }

    .home-section .detail-content::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 30%,
            rgba(255,255,255,0.5) 60%,
            rgba(255,255,255,0.8) 92%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
    }

    .home-section .section-bg-img {
        object-position: center top;
    }

    .section-page {
        /* Keine Kopfleiste mehr → Wiese beginnt ganz oben (HD-Konzept) */
        margin-top: 0;
        padding: 0;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* Mobile: bg image sits at top, no horizontal gradient */
    .section-bg-wrap::after {
        display: none;
    }

    /* Flipchart wie auf den Detail-Subseiten: Hintergrund hart auf 100vh begrenzt
       (statt mit dem hohen Flex-Container mitzuwachsen) → Flipchart bleibt klein,
       sitzt oben und ist voll sichtbar; die Textkarte (margin-top:45vh) scrollt
       darüber. HD-Vorgabe 29.6.2026: Section-Seiten sollen das gleiche Flipchart-
       Verhalten wie die Unterseiten (z. B. Diamant) haben. */
    .section-page > .section-bg-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
    }

    .section-bg-img {
        object-position: center top;
    }

    .section-page .section-bg-img,
    .detail-page .section-bg-img,
    .contact-page .section-bg-img {
        object-position: center top;
    }

    .section-inner {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 0;
        text-align: left;
        position: static;
    }

    .section-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        /* Mobil scrollt die Seite (nicht die Spalte) → overflow:visible, sonst schneidet
           das vom Desktop geerbte overflow:auto den Fade-::before oben ab (harte Kante,
           HD-Hinweis 24.6.2026). */
        overflow: visible;
        background: rgba(255,255,255,0.8);
        /* padding-bottom = FAB-Reserve: weißer Karten-Hintergrund läuft bis zum Body-Ende,
           Text endet darüber (siehe .detail-content) */
        padding: 30px 20px var(--fab-reserve);
        border-radius: 0;
        flex: 1;
        /* HD-Vorgabe (26.5.): Heading auf Mobile sitzt deterministisch nach
           45vh (= Flipchart-Höhe) + 30px Padding. Kein justify-content: center mehr,
           damit kurze Inhalte (z. B. Bibliothek-Passwortform) NICHT vertikal mittig
           verrutschen, sondern ebenfalls am Anchor starten. */
        margin-top: 45vh;
        display: flex;
        flex-direction: column;
    }

    .section-content::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 30%,
            rgba(255,255,255,0.5) 60%,
            rgba(255,255,255,0.8) 92%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
    }

    .section-header {
        justify-content: flex-start;
        margin-left: 0;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-text {
        font-size: 0.95rem;
    }

    .section-motto {
        font-size: 1rem;
    }

    .detail-page {
        /* Keine Kopfleiste mehr → Wiese beginnt ganz oben (HD-Konzept) */
        margin-top: 0;
        padding: 0;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .detail-page > .section-bg-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
    }

    .detail-page > .section-bg-wrap::after {
        display: none;
    }

    .detail-inner {
        padding: 0;
        height: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .detail-content {
        position: relative;
        z-index: 1;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        text-align: left;
        background: rgba(255,255,255,0.8);
        /* padding-bottom = FAB-Reserve, sodass weißer Karten-Hintergrund bis ganz nach unten
           durchläuft (= keine nackte Wiese zwischen Karte und FABs) und der letzte Text
           dennoch nicht von den FABs überdeckt wird */
        padding: 30px 20px var(--fab-reserve);
        border-radius: 0;
        font-size: 1.05rem;
        flex: 1;
        margin-top: 45vh;
    }

    .detail-content::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 30%,
            rgba(255,255,255,0.5) 60%,
            rgba(255,255,255,0.8) 92%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
    }

    /* === Smartphone-Fixierung der „Überschrift" (HD 6.7.2026) ===
       Auf allen Flipchart-Seiten (Unter- + Unter-Unter-Seiten) bleibt der Reiter
       mit Bereichs-Icon + Titel — die „Überschrift" — an den Füßen des Flipcharts
       (~Bildschirmmitte) STEHEN. Das Flipchart ist dadurch komplett sichtbar, und
       NUR der Text darunter scrollt (wie am Desktop, wo ebenfalls nur die Spalte
       scrollt). Reiter und Textkarte werden dafür viewport-fix verankert; --m-head
       ist der eine, verbindliche Anker (Füße des Flipcharts). Kontakt (.contact-page)
       ist bewusst ausgenommen — eigenes Portrait-Layout, keine Flipchart-Füße. */
    .section-page,
    .detail-page {
        --m-head: 50vh;
    }

    .section-page .section-corner-tabs,
    .detail-page .section-corner-tabs {
        position: fixed;
        top: var(--m-head);
        left: 20px;
        /* Reiter-Unterkante sitzt exakt auf dem Anker → er „deckelt" die Textkarte */
        transform: translateY(-100%);
        z-index: 6;
    }

    .section-page .section-content,
    .detail-page .detail-content {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--m-head);
        bottom: 0;
        margin-top: 0;
        max-height: none;
        height: auto;
        /* Nur der Text scrollt (die Seite bleibt stehen); Flipchart + Reiter fix. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Text startet knapp unter dem Reiter; unten FAB-Reserve wie gehabt */
        padding: 18px 20px var(--fab-reserve);
        z-index: 4;
    }

    /* Der alte, mitscrollende Top-Fade würde im Scroll-Container (overflow:auto)
       abgeschnitten → ersetzt durch einen viewport-fixen weichen Übergang direkt
       über der Kartenkante (Flipchart → weiße Karte), der hinter dem Reiter liegt. */
    .section-page .section-content::before,
    .detail-page .detail-content::before {
        display: none;
    }

    .section-page::after,
    .detail-page::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--m-head) - 70px);
        height: 70px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 35%,
            rgba(255,255,255,0.55) 70%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
        z-index: 3;
    }

    .contact-page {
        /* Keine Kopfleiste mehr → Wiese beginnt ganz oben (HD-Konzept) */
        margin-top: 0;
        padding: 0;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .contact-page > .section-bg-wrap::after {
        display: none;
    }

    /* Fotos oben — viewport-fix und UNTER dem Logo. Vorher lagen sie bei 6% der Höhe und
       das (je nach Breite große) fixe Logo überlappte die linke Ecke (HD 6.7.2026).
       top koppelt an die Logo-Größe (--hub-logo-size, skaliert je Breakpoint) → klärt das
       Logo über alle Handy-Breiten; position:fixed passt ins neue Fix-Modell (kein Scroll). */
    .contact-portraits {
        position: fixed;
        top: calc(18px + var(--hub-logo-size) + 12px);
        left: 0;
        right: 0;
        width: auto;
        padding: 0 16px;
        gap: 10px;
        z-index: 2;
    }
    .contact-portraits-row img {
        width: 40vw;
        height: 40vw;
        max-width: 165px;
        max-height: 165px;
    }

    .contact-inner {
        flex-direction: column;
        gap: 0;
        text-align: left;
        flex: 1;
        display: flex;
        height: auto;
    }

    .contact-info {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        /* wie .section-content: overflow:visible, damit der Fade-::before nicht abschneidet */
        overflow: visible;
        background: rgba(255,255,255,0.8);
        padding: 30px 20px 40px;
        border-radius: 0;
        flex: 1;
        margin-top: 45vh;
    }

    .contact-info::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 30%,
            rgba(255,255,255,0.5) 60%,
            rgba(255,255,255,0.8) 92%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
    }

    .contact-links {
        justify-content: center;
    }

    /* #4 (HD 6.7.2026): Kontakt mobil auf dasselbe fixe Modell wie die Flipchart-Seiten —
       Wiese, Porträts und Reiter bleiben STEHEN, nur die Textkarte scrollt (wie am Desktop).
       Anker --m-head = 45vh (unter den Porträts, wo Reiter/Karte schon sitzen). */
    .contact-page {
        --m-head: 45vh;
    }
    .contact-page > .section-bg-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
    }
    .contact-page .section-corner-tabs {
        position: fixed;
        top: var(--m-head);
        left: 20px;
        transform: translateY(-100%);
        z-index: 6;
    }
    .contact-page .contact-info {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--m-head);
        bottom: 0;
        margin-top: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 20px var(--fab-reserve);
        z-index: 4;
    }
    /* alter, im Scroll-Container abgeschnittener Fade → viewport-fixer Ersatz (wie Section/Detail) */
    .contact-page .contact-info::before {
        display: none;
    }
    .contact-page::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--m-head) - 70px);
        height: 70px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 35%,
            rgba(255,255,255,0.55) 70%,
            rgba(255,255,255,0.8) 100%);
        pointer-events: none;
        z-index: 3;
    }

    .home-hero {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        padding: 0 20px;
    }

    .home-welcome {
        padding-left: 0;
        text-align: center;
        order: -1;
        margin-bottom: 25px;
    }

    .home-welcome h1 {
        font-size: 1.6rem;
        white-space: normal;
        line-height: 1.4;
    }

    .home-brand {
        position: absolute;
        right: auto;
        left: 50%;
        top: 12%;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .home-puzzle {
        width: 120px;
    }

    .home-foont {
        width: 200px;
    }

    .floating-buttons {
        bottom: 20px;
        gap: 10px;
    }

    .fab-btn {
        width: 44px;
        height: 44px;
    }

    .fab-btn .icon {
        /* Rand halbiert (HD 27.6.2026): 20px (≈45%) → 37px (≈84%). */
        width: 37px;
        height: 37px;
    }

    .phone-modal {
        padding: 30px 25px;
    }

    .phone-modal-number {
        font-size: 1.4rem;
    }

}

/* === Responsive: Smartphone Portrait === */
@media (max-width: 480px) {
    .site-logo-corner {
        top: 14px;
        left: 16px;
        padding: 6px 9px;
    }
    .site-logo-corner img {
        height: 32px;
    }

    .home-page {
        padding: 0;
    }

    .home-welcome h1 {
        font-size: 1.2rem;
    }

    .home-puzzle {
        width: 80px;
    }

    .home-foont {
        width: 130px;
    }

    .floating-buttons {
        bottom: 15px;
    }

    .section {
        padding: 0;
    }

    .section-content {
        padding: 20px 15px var(--fab-reserve);
    }

    .section-title {
        font-size: 1.3rem;
    }

    .section-number {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .section-motto {
        font-size: 0.95rem;
    }

    .section-text {
        font-size: 0.9rem;
    }

    .detail-page {
        margin-top: 60px;
        min-height: calc(100vh - 60px);
    }

    .detail-content {
        /* padding-bottom = FAB-Reserve auch im 480px-Override beibehalten */
        padding: 15px 15px var(--fab-reserve);
    }

    .detail-content .section-title {
        font-size: 1.6rem;
    }

    .contact-page {
        margin-top: 60px;
        min-height: calc(100vh - 60px);
    }

    .contact-info {
        padding: 20px;
    }

    .contact-info h1 {
        font-size: 1.6rem;
    }

    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .bibliothek-inner {
        padding: 30px 20px;
    }
    .bibliothek-title {
        font-size: 2rem;
    }
    .bibliothek-boxes {
        flex-direction: column;
        gap: 20px;
    }
    .bibliothek-box {
        min-width: 0;
        width: 100%;
    }

    /* Mobile-Overrides für .bibliothek-with-flipchart .bibliothek-inner stehen
       weiter unten NACH der Desktop-Regel — sonst gewinnt Desktop wegen Cascade-Order
       (gleiche Spezifität, aber spätere Quell-Reihenfolge). */
}

/* === Bibliothek (passwortgeschützt) === */
.bibliothek-page {
    position: relative;
    min-height: 100vh;
    padding-top: 70px;
    overflow: hidden;
}

.bibliothek-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bibliothek-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Konsistent mit .section-bg-img — Flipchart sitzt links im Composite */
    object-position: left center;
}

.bibliothek-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
}

/* Variante mit Flipchart-Composite: Schleier exakt wie auf den normalen Section-Pages
   (0.8 max, Golden-Ratio-Übergang 30%→52%). Vorher hatte ich 0.92 — der Schleier wirkte
   für HD zu stark weiß (Diagnose: zwei weiße Schichten übereinander). */
.bibliothek-with-flipchart .bibliothek-bg::after {
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.2) 38%,
        rgba(255,255,255,0.5) 44%,
        rgba(255,255,255,0.8) 52%,
        rgba(255,255,255,0.8) 100%);
}

/* Inner-Box rechts auf dem weißen Schleier — exakt gleiches Positionierungs-Schema
   wie .section-content (left: 57%, top: 50%, halbe Zeile höher),
   damit Passwort-Formular / Auswahl-Box auf derselben Höhe starten wie die
   Überschriften der anderen Sektionsseiten (HD-Vorgabe). */
.bibliothek-with-flipchart .bibliothek-inner {
    position: absolute;
    z-index: 1;
    left: 57%;
    top: 50%;
    transform: translateY(calc(-50% - 14px));
    width: 38%;
    max-width: none;
    margin: 0;
    padding: 0 3% 0 0;
    text-align: left;
}

/* (Frühere Zentrier-Regeln für .bibliothek-inner--unlocked entfernt, da Template
   seit Refactor auf .section-page basiert und die Klassen nicht mehr existieren.
   HD-Vorgabe ist außerdem inzwischen: alles linksbündig wie der Rest der Seite.) */

/* Mobile-Override für die Bibliothek-Flipchart-Variante.
   Steht hier (nach der Desktop-Regel), damit die Quell-Reihenfolge im Cascade
   den Vorrang gibt — die identisch-spezifische Desktop-Regel würde sonst auf
   Mobile gewinnen (Bug am 24.5.: iPhone XR Preview zeigte Boxen rechts überlaufend). */
@media (max-width: 1024px) {
    .bibliothek-with-flipchart .bibliothek-inner {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-left: 0;
        width: 100%;
        padding: 30px 20px var(--fab-reserve);
        margin-top: 45vh;
        /* min-height schließt die Lücke zur Viewport-Unterkante.
           45vh nimmt Flipchart, 70px Header — Rest geht an die Karte. */
        min-height: calc(55vh - 70px);
        /* Statt solid rgba(0.85) jetzt linear-gradient: fade-in oben (transparent→weiß),
           Plateau in der Mitte (0.85 white-transparent), fade-out unten (weiß→transparent).
           Damit verschwinden die harten Kanten oben und unten — der Wald-Hintergrund
           geht stufenlos in die weiße Karte über und wieder zurück. */
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.85) 60px,
            rgba(255,255,255,0.85) calc(100% - 80px),
            rgba(255,255,255,0) 100%);
    }
    .bibliothek-with-flipchart .bibliothek-bg::after {
        display: none;
    }
}

.bibliothek-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: 60px 40px;
    text-align: center;
    color: #003875;
}

.bibliothek-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    margin-bottom: 16px;
    color: #003875;
}

.bibliothek-intro {
    font-size: 1.1rem;
    margin-bottom: 32px;
    font-weight: 300;
}

.bibliothek-form {
    /* Input + Button NEBENEINANDER, teilen sich 50-50 die Breite (HD 30.6.2026).
       Fehlermeldung bricht per flex-basis:100% in eine eigene Zeile darunter. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    max-width: 320px;
    margin: 0;
}

.bibliothek-form label {
    text-align: left;
    font-weight: 500;
    font-size: 0.95rem;
}

.bibliothek-form input[type="password"] {
    /* 50-50 mit dem Button; min-width:0 erlaubt das Schrumpfen unter die Textbreite.
       border-box → exakt gleiche Außenbreite wie der Button (sonst +4px Rahmen). */
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 2px solid #003875;
    border-radius: 4px;
    background: #fff;
    color: #003875;
    font-family: 'Roboto', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.bibliothek-form input[type="password"]:focus {
    border-color: #0088cc;
}

.bibliothek-form button,
.bibliothek-logout button {
    padding: 14px 28px;
    background: #003875;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Roboto', sans-serif;
}

/* Freischalten-Button teilt sich die Breite 50-50 mit dem Input (HD 30.6.2026) */
.bibliothek-form button {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.95rem;
    white-space: nowrap;
}

.bibliothek-form button:hover,
.bibliothek-logout button:hover {
    background: #0088cc;
}

/* Newsletter-Abmeldung (/ihre-abmeldung) — schlichtes Formular über dem Gradient-Overlay */
.unsub-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    max-width: 360px;
}
.unsub-form label {
    font-weight: 500;
    font-size: 0.95rem;
    color: #003875;
}
.unsub-form input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 2px solid #003875;
    border-radius: 4px;
    background: #fff;
    color: #003875;
    font-family: 'Roboto', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.unsub-form input[type="email"]:focus {
    border-color: #0088cc;
}
.unsub-btn {
    align-self: flex-start;
    padding: 10px 24px;
    background: #003875;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: background 0.2s;
}
.unsub-btn:hover {
    background: #0088cc;
}
.unsub-success {
    color: #1a7a3a;
    font-weight: 600;
}
.unsub-error {
    color: #c0392b;
    font-weight: 500;
}

/* Freischalt-Block auf der Erfolgswissen-Oberseite (HD 23.6.2026, überarbeitet 24.6.).
   Eigenes, klar abgegrenztes Kästchen mit konstanter Überschrift „Zugang zum
   ErfolgsBuch" — nur die Aktion darunter wechselt (Eingabe ↔ Öffnen). Damit ist der
   Block in sich verständlich und nicht mehr „ausgerückt" im Textfluss. */
/* Spezifität muss .section-text p (margin-bottom:0.4em) schlagen, sonst hätte der
   ErfolgsBrief-Button unten nur 6px statt der 23px der anderen Link-Buttons. */
.section-text .erfolgsbrief-current-wrap {
    /* HD 6.7.2026 (Punkt 14): keine Leerzeile nach oben; unten 23px zum Abo-Absatz. */
    margin: 0 0 23px;
}

.biblio-unlock {
    /* Eingerückt wie der Bullet-Text darüber (ul 5px + li 18px = 23px), damit das
       Feld linksbündig mit dem Absatz darüber liegt (HD 30.6.2026). Karten-Chrome
       (Hintergrund/Rahmen/Padding) entfernt, sonst schöbe die Padding das Input
       von der Bullet-Textkante weg. Oberer Abstand klein wie bei den Link-Buttons. */
    margin: 6px 0 0 23px;
    max-width: 320px;
    padding: 0;
    background: none;
    border: none;
}
.biblio-unlock-title {
    font-weight: 700;
    color: #003875;
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.biblio-unlock-status {
    margin: 0 0 12px;
    color: #1aa138;
    font-weight: 600;
}
.biblio-unlock-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.biblio-unlock-open {
    display: inline-block;
    padding: 12px 22px;
    background: #003875;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.biblio-unlock-open:hover {
    background: #0088cc;
    color: #fff;
}
.biblio-unlock .bibliothek-logout button {
    padding: 10px 16px;
    font-size: 0.85rem;
    background: #fff;
    color: #003875;
    border: 1.5px solid #003875;
    transition: filter 0.2s;
}
.biblio-unlock .bibliothek-logout button:hover {
    filter: brightness(1.2);
}
.bibliothek-error {
    color: #c0392b;
    font-size: 0.9rem;
    font-weight: 500;
}

.bibliothek-error {
    color: #b00020;
    font-size: 0.95rem;
    margin-top: 4px;
    /* in der 50-50-Flex-Zeile: volle Breite, bricht unter Input+Button um */
    flex: 1 0 100%;
}

/* ErfolgsBuch-Kacheln: Foto mit eingebackenem blauem Rahmen + Label-Overlay
   (weiße Box, blauer Rahmen) wie im Mockup. Vertikal gestapelt (HD 23.6.2026). */
.bibliothek-boxes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 22px;
    margin-bottom: 30px;
    max-width: 520px;
}

.bibliothek-box {
    position: relative;
    display: block;
    line-height: 0; /* kein Inline-Gap unter dem Bild */
    text-decoration: none;
    transition: transform 0.2s, filter 0.2s;
}

.bibliothek-box:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.bibliothek-box-img {
    width: 100%;
    height: auto;
    display: block;
}

.bibliothek-box-label {
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    background: #fff;
    border: 3px solid #1d6fb8;
    color: #003875;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1.1;
    padding: 5px 24px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Lehrwerk-Galerie */
.bibliothek-intro {
    text-align: center;
    color: #003875;
    font-size: 1rem;
    margin: 0 0 24px;
}
.lehrwerk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    margin: 24px 0 32px;
}
.lehrwerk-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 18px;
    background: #fff;
    border: 3px solid #003875;
    border-radius: 6px;
    color: #003875;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(0, 56, 117, 0.15);
    min-height: 180px;
}
.lehrwerk-tile:hover {
    background: #003875;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 56, 117, 0.25);
}
.lehrwerk-tile-icon { line-height: 0; }
.lehrwerk-tile-label {
    font-weight: 700;
    font-size: 1.2rem;
}
.lehrwerk-tile-meta {
    font-size: 0.8rem;
    opacity: 0.75;
    font-weight: 400;
}
.lehrwerk-tile-empty {
    cursor: not-allowed;
    background: rgba(255,255,255,0.6);
    border-style: dashed;
    border-color: #99a8c0;
    color: #99a8c0;
    box-shadow: none;
}
.lehrwerk-tile-empty:hover {
    transform: none;
    background: rgba(255,255,255,0.6);
    color: #99a8c0;
    box-shadow: none;
}
.lehrwerk-back {
    display: inline-block;
    color: #0088cc;
    text-decoration: none;
    margin-top: 8px;
    font-size: 0.95rem;
}
.lehrwerk-back:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .lehrwerk-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 768px) {
    .lehrwerk-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .lehrwerk-tile { min-height: 150px; padding: 22px 12px; }
    .lehrwerk-tile-label { font-size: 1rem; }
}
@media (max-width: 480px) {
    .lehrwerk-grid { grid-template-columns: 1fr; }
}

.bibliothek-logout {
    margin-top: 12px;
}

.bibliothek-logout button {
    background: transparent;
    color: #003875;
    border: 2px solid #003875;
    padding: 10px 20px;
    font-size: 0.9rem;
}

.bibliothek-logout button:hover {
    background: #003875;
    color: #fff;
}

/* Druck-Kopf/-Fuß nur beim Drucken zeigen */
.print-header, .print-footer { display: none; }

/* === Druck-Layout: nur Text, kein Hintergrund, keine Buttons (HD-Wunsch 21.6.2026) ===
   Telefon-Fuß-Symbol wurde durch ein Druck-Symbol ersetzt (window.print()). */
@media print {
    @page { margin: 1.5cm; }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }

    /* Breites Kombi-Logo (Puzzle + Schriftzug) oben, Trennlinie unter dem Logo,
       darunter der Seitentitel (eigenes Element, kein Brotkrumen-Ballast). */
    .print-header {
        display: block !important;
        margin: 0 0 0.6cm 0;
    }
    .print-logo {
        height: 1.5cm;
        width: auto;
        display: block;
        padding-bottom: 7pt;
        border-bottom: 1.5pt solid #003875;
    }
    .print-title {
        margin-top: 0.32cm;
        font-size: 14pt;
        font-weight: 700;
        color: #000;
    }
    /* Brotkrumen-Reiter im Druck nicht zeigen (Titel kommt aus .print-title) */
    .section-corner-tabs { display: none !important; }

    /* Fußzeile nach dem Inhalt */
    .print-footer {
        display: block !important;
        margin-top: 0.8cm;
        padding-top: 6pt;
        border-top: 1pt solid #003875;
        text-align: center;
        font-size: 8pt;
        color: #003875;
    }

    /* Dekor, Symbole und Buttons NICHT drucken */
    .section-bg-wrap, .home-bg-wrap,
    .floating-buttons,
    .site-logo-corner, .home-logo-corner,
    .corner-tab-icon,
    .download-btn, .text-home-btn, .text-back-btn,
    .text-top-btn,
    .section-video-link,
    .home-nav, .home-brand, .home-welcome,
    .contact-portraits,
    .scroll-top-btn,
    .detail-back-link {
        display: none !important;
    }

    /* Container & Inhaltsspalten in den normalen Textfluss, volle Breite */
    .home-scroll-container, .home-page, .home-content,
    .section-page, .detail-page, .contact-page,
    .section-inner, .detail-inner, .contact-inner {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
    }
    .section-content, .detail-content, .contact-info {
        position: static !important;
        inset: auto !important;
        left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        background: none !important;
        color: #000 !important;
        /* überschreibt die Mobile-Regel margin-top:45vh (sonst klafft im Druck eine halbe Seite) */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Alle Texte schwarz; Links ohne Sonderfarbe/Unterstrich */
    .section-content *, .detail-content *, .contact-info * {
        color: #000 !important;
        text-shadow: none !important;
    }
    a { color: #000 !important; text-decoration: none !important; }
}