/* ==========================================================================
   MINT Lernstudio — Design-System
   Neubau 2026-08-26. Eine Datei, ein System.

   Aufbau:  1 Schrift · 2 Tokens · 3 Reset · 4 Typografie · 5 Layout
            6 Navigation · 7 Buttons · 8 Hero · 9 Bausteine
            10 Videothek · 11 Apps · 12 Rechtstexte · 13 Footer
            14 Overlays · 15 Bewegung
   ========================================================================== */

/* --- 1 SCHRIFT -----------------------------------------------------------
   Inter wird SELBST GEHOSTET (assets/fonts/). Bewusst kein Google-Fonts-Link:
   das Nachladen von fonts.gstatic.com überträgt die IP der Besucher in die USA
   und ist in Deutschland abgemahnt worden (LG München I, 20.01.2022, 3 O 17493/20).
   Eine Seite, die "kein Tracking" verspricht, darf sich das nicht leisten.
   Lizenz: SIL Open Font License 1.1 — siehe assets/fonts/LIESMICH.txt
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2 TOKENS ------------------------------------------------------------- */
:root {
    /* Fläche & Schrift */
    --paper:      #ffffff;
    --paper-tint: #f6f7f9;   /* Sektionen zum Abheben */
    --paper-sink: #eef0f4;   /* Platzhalter, Skelette */
    --ink:        #0e131b;   /* Überschriften */
    --ink-body:   #444e5d;   /* Fließtext */
    --ink-mute:   #78828f;   /* Labels, Meta */
    --line:       #e4e7ec;
    --line-soft:  #eef0f3;

    /* Akzent — sparsam einsetzen. Ein Blau, sonst nichts. */
    --accent:      #194664;   /* Markenfarbe: das Navy aus dem Logo-Schriftzug */
    --accent-deep: #10314a;
    --accent-wash: #eef3f7;
    --btn-ink:     #ffffff;   /* Schrift auf gefuellten Akzentflaechen */

    /* Statusfarben als Token, damit der Dunkelmodus sie mitdrehen kann */
    --ok-bg:   #e8f6ee;  --ok-line:   #c3e6d2;  --ok-ink:   #1a6b3e;
    --warn-bg: #fff4e5;  --warn-line: #f6ddba;  --warn-ink: #8a5510;

    /* Dunkles Kontrastband (Footer, Zitate) */
    --navy:        #0b1524;
    --navy-soft:   #16233a;
    --navy-ink:    rgba(255, 255, 255, .70);
    --navy-mute:   rgba(255, 255, 255, .45);
    --navy-line:   rgba(255, 255, 255, .12);

    /* App-Farben — je App genau ein Ton, nur als feiner Akzent */
    --lk:  #0e7c72;   /* Lehrerkompass   — Teal   */
    --sk:  #b1552b;   /* Schülerkompass  — Terra  */
    --ak:  #3f3ca8;   /* Abikompass      — Indigo */
    --is:  #a8342f;   /* IronStride      — Crimson*/
    --pr:  #1d8a47;   /* Prompterly      — Grün, wie die Lesezeile im Icon */
    --lg:  #2f6496;   /* Liveglas        — Blau, wie das Monitorglas im Icon */

    /* Fachfarben — das Marken-Kit. Dieselben vier Töne wie im Kanalbanner
       und in den Vorschaubildern, damit ein Physikvideo überall grün ist. */
    --fach-mathe:      #2B6CB0;
    --fach-physik:     #3BAA3D;
    --fach-informatik: #F39C12;
    --fach-ki:         #A64AC9;

    /* Maße */
    --maxw:      1160px;
    --maxw-text: 720px;
    --gutter:    clamp(20px, 5vw, 40px);
    --section:   clamp(72px, 9vw, 132px);
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 3 RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--accent); color: var(--btn-ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: .9rem;
    font-weight: 600;
}
.skip-link:focus { top: 0; }

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

/* --- 4 TYPOGRAFIE --------------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 620;
    line-height: 1.15;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.display {
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.038em;
    font-weight: 650;
}

h2 {
    font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem);
    letter-spacing: -.032em;
    line-height: 1.08;
}

h3 { font-size: 1.2rem; letter-spacing: -.018em; }
h4 { font-size: 1.0625rem; letter-spacing: -.012em; }

p { text-wrap: pretty; }

.eyebrow {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.eyebrow-mute { color: var(--ink-mute); }

.lead {
    font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
    line-height: 1.6;
    color: var(--ink-body);
    max-width: 640px;
}

.section-intro { max-width: var(--maxw-text); margin-bottom: clamp(40px, 5vw, 68px); }
.section-intro p { margin-top: 18px; font-size: 1.08rem; }
.section-intro-center { margin-inline: auto; text-align: center; }
.section-intro-center .lead { margin-inline: auto; }

strong { color: var(--ink); font-weight: 600; }

/* --- 5 LAYOUT ------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap-text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(52px, 6vw, 88px); }
.section-tint { background: var(--paper-tint); }
.section-line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-stretch { align-items: stretch; }
.grid-split { align-items: start; gap: clamp(28px, 4vw, 64px); }

/* Kleine Abstandshelfer.
   Bewusst Klassen statt style="…": eine strenge CSP ohne 'unsafe-inline'
   blockiert sonst jedes style-Attribut. Siehe .htaccess. */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 28px; }

/* App-Farbtöne — setzen --tone für Unterelemente */
.tone-lk { --tone: var(--lk); }
.tone-sk { --tone: var(--sk); }
.tone-ak { --tone: var(--ak); }
.tone-is { --tone: var(--is); }
.tone-pr { --tone: var(--pr); }
.tone-lg { --tone: var(--lg); }
.tone-mathe      { --tone: var(--fach-mathe); }
.tone-physik     { --tone: var(--fach-physik); }
.tone-informatik { --tone: var(--fach-informatik); }
.tone-ki         { --tone: var(--fach-ki); }
.eyebrow-tone { color: var(--tone, var(--accent)); }

@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* --- 6 NAVIGATION --------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 66px;
    transition: height .3s var(--ease);
}
.nav.is-stuck .nav-inner { height: 56px; }

/* Wortmarke */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }

/* Die Nadel schwingt beim Überfahren — der einzige verspielte Moment
   auf der Seite, und er passt: die Apps heißen alle „…kompass". */
.brand-mark {
    width: 26px; height: 26px; flex: 0 0 26px;
    transition: transform .55s cubic-bezier(.34, 1.4, .5, 1);
}
.brand:hover .brand-mark { transform: rotate(135deg); }
.brand-text {
    font-size: 1.0rem;
    font-weight: 640;
    letter-spacing: -.028em;
    line-height: 1;
    white-space: nowrap;
}
.brand-text span { font-weight: 450; color: var(--ink-mute); }

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-link {
    position: relative;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink-body);
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--paper-tint); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-side { display: flex; align-items: center; gap: 10px; }

.nav-yt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 550;
    color: var(--ink);
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.nav-yt:hover { border-color: var(--ink-mute); background: var(--paper-tint); }
.nav-yt svg { width: 17px; height: 17px; color: #ff0033; }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
}
.nav-toggle svg { width: 19px; height: 19px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
        position: fixed;
        inset: 66px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px var(--gutter) 26px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px -28px rgba(14, 19, 27, .3);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: all .22s var(--ease);
    }
    .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
    .nav-link { padding: 13px 12px; font-size: 1.02rem; }
    .nav-yt { display: none; }
}

/* --- 7 BUTTONS ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: .97rem;
    font-weight: 570;
    letter-spacing: -.005em;
    white-space: nowrap;
    transition: background .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.988); }
.btn-primary:hover { box-shadow: 0 10px 22px -12px rgba(23, 64, 200, .6); }

.btn-primary { background: var(--accent); color: var(--btn-ink); }
.btn-primary:hover { background: var(--accent-deep); }

.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink-mute); background: var(--paper-tint); }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #000; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Textlink mit Pfeil */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .95rem;
    font-weight: 560;
    color: var(--accent);
}
.arrow-link::after {
    content: '';
    width: 15px; height: 15px;
    background: currentColor;
    -webkit-mask: var(--arrow) center / contain no-repeat;
    mask: var(--arrow) center / contain no-repeat;
    transition: transform .2s var(--ease);
}
.arrow-link:hover::after { transform: translateX(4px); }

:root {
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* --- 8 HERO --------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(64px, 9vw, 132px) clamp(52px, 7vw, 96px);
    overflow: hidden;
}

/* Sehr feines Raster im Hintergrund — Millimeterpapier, kaum sichtbar. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
                      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 72%);
    mask: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 72%);
    pointer-events: none;
}
.hero > * { position: relative; }

.hero-center { text-align: center; }
.hero-center .lead { margin-inline: auto; }
.hero-center .btn-row { justify-content: center; }

.hero .display { margin-bottom: 24px; }
.hero .lead { margin-bottom: 36px; }

/* Auftritt beim Laden.
   Bewusst reines CSS: eine Animation läuft immer zu Ende, egal was das
   JavaScript macht. Der Seitenkopf kann dadurch nicht hängen bleiben —
   anders als beim Einblenden per Beobachter weiter unten. */
@keyframes auftritt {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes auftritt-bild {
    from { opacity: 0; transform: translateY(20px) scale(.986); }
    to   { opacity: 1; transform: none; }
}

.hero-copy > *   { animation: auftritt .68s var(--ease) both; }
.hero-copy .eyebrow { animation-delay: .04s; }
.hero-copy .display { animation-delay: .12s; }
.hero-copy .lead    { animation-delay: .20s; }
.hero-copy .btn-row { animation-delay: .28s; }
.hero-portrait   { animation: auftritt-bild .9s var(--ease) .16s both; }
.hero .stats     { animation: auftritt .68s var(--ease) .38s both; }

/* Geteilter Seitenkopf: Text links, Porträt rechts.
   Die Behauptung „von jemandem, der es selbst unterrichtet" trägt erst,
   wenn dieser Jemand auch zu sehen ist. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: center;
}
.hero-grid .lead { margin-bottom: 32px; }

/* Im geteilten Kopf steht die Überschrift in einer schmaleren Spalte.
   Die Größe der ganzseitigen Fassung würde dort in vier Zeilen zerfallen —
   deshalb hier eine eigene, etwas ruhigere Staffelung.
   Kein <br> im Text: bei zwei Spalten sitzt ein fester Umbruch nie richtig,
   text-wrap: balance verteilt die Zeilen von selbst gleichmäßig. */
.hero-grid .display {
    font-size: clamp(2.35rem, 1.5rem + 2.9vw, 3.7rem);
    letter-spacing: -.034em;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    /* Auf schmalen Geräten zuerst die Aussage, dann das Gesicht —
       ein bildschirmfüllendes Porträt vor dem ersten Satz kostet nur Platz. */
    .hero-visual { order: 2; max-width: 420px; margin-inline: auto; width: 100%; }
}

/* Leben im Seitenkopf (02.10.2026): Marker unter der Kernaussage, schwebende
   Fach-Kärtchen ums Porträt, leichtes Mitkippen unter der Maus (site.js setzt
   --kx/--ky). Kärtchen bewegen sich über die Einzel-Eigenschaft „translate",
   damit sie sich nicht mit der Schwebe-Animation (transform) ins Gehege kommen. */
.marker { position: relative; white-space: nowrap; }
.marker-line {
    position: absolute;
    left: -2%;
    bottom: -.12em;
    width: 104%;
    height: .32em;
    overflow: visible;
    pointer-events: none;
}
.marker-line path {
    fill: none;
    stroke: var(--fach-informatik);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: marker-ziehen .9s var(--ease) .75s forwards;
}
@keyframes marker-ziehen { to { stroke-dashoffset: 0; } }

.hero-visual { position: relative; --kx: 0; --ky: 0; }
.hero-tilt {
    transform: perspective(1100px) rotateY(calc(var(--kx) * 5deg)) rotateX(calc(var(--ky) * -5deg));
    transition: transform .6s var(--ease);
}

.chip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 15px 11px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line));
    border-left: 4px solid var(--tone);
    box-shadow: 0 18px 36px -20px rgba(14, 19, 27, .45);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    white-space: nowrap;
    translate: calc(var(--kx) * var(--tiefe, 14px)) calc(var(--ky) * var(--tiefe, 14px) + var(--sp, 0) * var(--tiefe, 14px) * 2.2);
    transition: translate .6s var(--ease);
    animation: chip-auftritt .7s var(--ease) both, schweben 6s ease-in-out infinite;
}
.chip small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tone);
}
.chip sup, .chip sub { font-size: .66em; line-height: 0; }
.chip-1 { top: 9%;   left: -12%; --tiefe: 22px; animation-delay: .55s, 1.25s; }
.chip-2 { top: 30%;  right: -9%; --tiefe: 30px; animation-delay: .7s, 2.4s; }
.chip-3 { top: 63%;  left: -15%; --tiefe: 26px; animation-delay: .85s, .6s; }
.chip-4 { bottom: 6%; right: -6%; --tiefe: 18px; animation-delay: 1s, 3.1s; }

@keyframes chip-auftritt {
    from { opacity: 0; transform: translateY(18px) scale(.92); }
    to   { opacity: 1; transform: none; }
}
@keyframes schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (max-width: 900px) {
    .chip { font-size: .9rem; padding: 8px 12px 9px; }
    .chip-1 { left: -4%; }
    .chip-2 { right: -4%; }
    .chip-3 { left: -6%; }
    .chip-4 { right: -3%; }
}
@media (max-width: 480px) {
    .chip-2, .chip-3 { display: none; }
}

/* Live-Punkt vor „Direkt vom Kanal geladen" */
.live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 8px;
    vertical-align: 1px;
    border-radius: 50%;
    background: #e5392f;
    animation: puls 2.2s ease-out infinite;
}
@keyframes puls {
    0%   { box-shadow: 0 0 0 0 rgba(229, 57, 47, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(229, 57, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 47, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .marker-line path { animation: none; stroke-dashoffset: 0; }
    .chip { animation: none; translate: none; }
    .hero-tilt { transform: none; transition: none; }
    .live-dot { animation: none; }
}

/* --- Bild-Baustein -------------------------------------------------------
   Jedes Foto sitzt in einer <figure class="photo">. Seitenverhältnis und
   Zuschnitt stehen im CSS, nicht in der Datei — dadurch lässt sich ein
   Platzhalter gegen ein echtes Foto tauschen, ohne dass das Layout springt.
   -------------------------------------------------------------------------- */
.photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper-sink);
    border: 1px solid var(--line);
}
.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-portrait { aspect-ratio: 4 / 5; }
.photo-square   { aspect-ratio: 1 / 1; }
.photo-wide     { aspect-ratio: 16 / 9; }

.photo figcaption {
    margin-top: 14px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-mute);
}
/* Bildunterschrift gehört unter den Rahmen, nicht hinein */
.photo-with-caption { border: 0; background: none; overflow: visible; border-radius: 0; }
.photo-with-caption > img,
.photo-with-caption > .photo-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-sink);
    display: block;
    width: 100%;
}
.photo-with-caption > .photo-frame { aspect-ratio: 16 / 9; }
.photo-with-caption > .photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Solange ein Platzhalter drinsteckt: nicht beschneiden, sonst ist der
   Hinweistext angeschnitten. Beim echten Foto einfach entfernen. */
.is-placeholder img,
.photo-with-caption > .photo-frame.is-placeholder img { object-fit: contain; }

/* Kennzahlen — ruhig, typografisch, keine Marketing-Kacheln */
.stats {
    display: flex;
    flex-wrap: wrap;
    /* Linksbündig, weil der Seitenkopf seit dem Porträt asymmetrisch ist —
       zentrierte Zahlen unter linksbündigem Text wirken wie ein Fremdkörper. */
    justify-content: flex-start;
    column-gap: clamp(28px, 5vw, 64px);
    row-gap: 26px;
    margin-top: clamp(48px, 6vw, 76px);
    padding-top: clamp(30px, 4vw, 44px);
    border-top: 1px solid var(--line);
}
.stat { text-align: left; min-width: 88px; }
.stat-value {
    display: block;
    font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
    font-weight: 620;
    letter-spacing: -.035em;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-mute);
}
.stat-note {
    width: 100%;
    max-width: 620px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ink-mute);
}

/* --- 9 BAUSTEINE ---------------------------------------------------------- */

/* Karte */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.6vw, 34px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}
/* Ganze Karten sind oft Links. Ohne das hier erbt jeder Absatz darin
   die Linkfarbe und die Karte wird komplett blau. */
a.card { color: var(--ink-body); }
a.card:hover {
    border-color: var(--ink-mute);
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -26px rgba(14, 19, 27, .42);
}
.card h3 { margin-bottom: 10px; }
/* Einzelne Karte mittig mit Lesebreite (ersetzt ein früheres style-Attribut, das die CSP blockierte) */
.card-narrow { max-width: 46rem; margin-inline: auto; }
.card-wide { max-width: 52rem; margin-inline: auto; }
/* Kleingedrucktes unter einer Karte (ersetzt ebenfalls ein style-Attribut) */
.fineprint, .card .fineprint { font-size: .9rem; color: var(--ink-mute); }
.card p { font-size: .98rem; }
.card .arrow-link { margin-top: auto; padding-top: 20px; }

/* Nummerierte Merkmalspalten — ersetzt die alten Emoji-Kacheln */
.points { display: grid; gap: clamp(28px, 3vw, 44px); }
.point { padding-top: 22px; border-top: 2px solid var(--ink); }
.point-num {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--ink-mute);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.point h3 { margin-bottom: 10px; }
.point p { font-size: .98rem; }

/* Funktionsliste auf den App-Seiten */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.feature {
    padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px);
    border-top: 1px solid var(--line);
}
.features .feature:nth-child(odd)  { border-right: 1px solid var(--line); }
.feature h4 { margin-bottom: 8px; }
.feature p { font-size: .96rem; color: var(--ink-body); }
@media (max-width: 700px) {
    .features { grid-template-columns: 1fr; }
    .features .feature:nth-child(odd) { border-right: 0; }
    .feature { padding-inline: 0; }
}

/* Besonderheiten auf den App-Seiten — die Überschrift ist der Nutzen,
   der Funktionsname steht klein darüber. Die erste geht über die volle
   Breite: Sie ist der Grund, die Seite weiterzulesen. */
.specials { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.special { padding-top: 22px; border-top: 2px solid var(--tone, var(--ink)); }
.special-kicker {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tone, var(--accent));
    margin-bottom: 12px;
}
.special h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); line-height: 1.2; margin-bottom: 12px; }
.special p { font-size: 1rem; line-height: 1.65; }
.special .tags { margin-top: 18px; padding-top: 0; border-top: 0; }
.tag.tag-tone { background: color-mix(in srgb, var(--tone) 11%, transparent); color: var(--tone); }

.special-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 64px); }
.special-lead h3 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -.028em; line-height: 1.1; }
.special-lead p { font-size: 1.08rem; }
@media (max-width: 760px) {
    .specials, .special-lead { grid-template-columns: 1fr; }
}

/* --- Mitlaufende Bühne („Scrolly") ---------------------------------------
   Links ziehen die Besonderheiten vorbei, rechts steht ein iPad still und
   blendet zum Bild der Besonderheit über, die gerade in der Bildmitte ist.

   Ohne JavaScript (und auf schmalen Bildschirmen) bleibt es eine ruhige
   Folge: Text, darunter das Bild klein zum Vergrößern. Erst site.js setzt
   .is-staged, klont die Bilder in die Bühne und blendet die Einzelbilder aus.
   So hängt nichts Wichtiges am Skript. */
.scrolly { display: grid; gap: clamp(36px, 4vw, 56px); }
.scrolly .special-lead { grid-template-columns: 1fr; }

.step-shot { margin-top: 22px; max-width: 240px; }
.zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 14px;
}
.zoom img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px -22px rgba(14, 19, 27, .45);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.zoom:hover img { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(14, 19, 27, .5); }
.zoom:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 4px; }
.step-shot figcaption { margin-top: 10px; font-size: .82rem; color: var(--ink-mute); }

.scrolly-stage { display: none; }

/* Ohne Bühne (Telefon, schmale Fenster): Jedes Bild steht in einem Geräterahmen und
   kippt beim Scrollen ins Bild — site.js setzt --sp und .is-live auch hier. */
.scrolly:not(.is-staged) .step-shot { max-width: 300px; margin-inline: auto; perspective: 900px; }
.scrolly:not(.is-staged) .step-shot-phone { max-width: 230px; }
.scrolly:not(.is-staged) .step-shot .zoom {
    padding: 2.4%;
    border-radius: 7% / 5.4%;
    background: linear-gradient(150deg, #2c3038 0%, #121418 38%, #0b0c0f 100%);
    box-shadow: 0 0 0 1.5px #4a505a, 0 0 0 2.5px rgba(0, 0, 0, .55),
                0 34px 60px -30px rgba(14, 19, 27, .6);
    transform: rotateX(calc(var(--sp, 0) * -14deg)) translateY(calc(var(--sp, 0) * -16px)) scale(.94);
    transition: transform .6s var(--ease);
}
.scrolly:not(.is-staged) .step-shot-phone .zoom { padding: 3.4%; border-radius: 17% / 7.8%; }
.scrolly:not(.is-staged) .step-shot .zoom img { border: 0; box-shadow: none; border-radius: 4.6% / 3.4%; }
.scrolly:not(.is-staged) .step-shot-phone .zoom img { border-radius: 13% / 6%; }
.scrolly:not(.is-staged) .step-shot.is-live .zoom { transform: rotateX(calc(var(--sp, 0) * -8deg)) scale(1); }
.scrolly:not(.is-staged) .step-shot figcaption { text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .scrolly:not(.is-staged) .step-shot .zoom { transform: none; transition: none; }
}

@media (min-width: 768px) {
    .scrolly.is-staged {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 0 clamp(40px, 5vw, 80px);
        align-items: start;
    }
    .scrolly.is-staged .scrolly-steps { display: grid; }
    .scrolly.is-staged .step-shot { display: none; }

    /* Jede Besonderheit bekommt Luft, damit das Bild Zeit zum Wechseln hat */
    .scrolly.is-staged .special {
        min-height: 78vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-top: 0;
        padding-top: 0;
        opacity: .32;
        transition: opacity .5s var(--ease);
    }
    .scrolly.is-staged .special.is-active { opacity: 1; }
    .scrolly.is-staged .special:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 8vh; }

    /* Die Bühne ist so hoch wie der Bildschirm und klebt oben — das iPad steht
       dadurch immer in der Mitte, egal wie hoch das Fenster ist. */
    .scrolly.is-staged .scrolly-stage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        position: sticky;
        top: 0;
        height: 100vh;
        padding-block: 88px 40px;
    }
}

/* Das iPad. Seit 02.10.2026: Das Seitenverhältnis sitzt auf dem BILDSCHIRM, nicht auf dem
   Rahmen — Prozent-Innenabstände rechnen auch vertikal mit der Breite, das verschob das
   Verhältnis innen und schnitt die Aufnahmen seitlich an. Rahmen dünner, mit Titankante,
   Glasspiegelung und (beim iPhone) Seitentasten — damit es nach Gerät aussieht, nicht nach Kasten.
   Der Rahmen bleibt in beiden Modi dunkel — ein iPad wird nicht weiß, nur weil die Seite dunkel ist. */
.device {
    position: relative;
    /* Breite aus der Fensterhöhe abgeleitet — so passt das iPad auf der Bühne immer ganz ins Bild. */
    width: min(100%, calc((100vh - 170px) * 2064 / 2752), 680px);
    margin-inline: auto;
    /* Rand als margin des Bildschirms, nicht als padding hier: Prozent-padding rechnet mit
       der Breite des ELTERN-Elements — frei platzierte Geräte (Gerätegruppe) bekamen dadurch
       viel zu dicke Ränder. margin des Kindes rechnet mit der Breite dieses Rahmens. */
    display: flow-root;
    padding: 0;
    border-radius: 5.6% / 4.2%;
    background: linear-gradient(150deg, #2c3038 0%, #121418 38%, #0b0c0f 100%);
    box-shadow:
        0 0 0 1.5px #4a505a,                       /* Titankante */
        0 0 0 2.5px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 50px 90px -40px rgba(14, 19, 27, .6),
        0 18px 30px -18px rgba(14, 19, 27, .35);
}
.device-screen {
    position: relative;
    margin: 1.7%;
    aspect-ratio: 2064 / 2752;
    overflow: hidden;
    border-radius: 4.2% / 3.2%;
    background: var(--paper-sink);
}
/* Glasspiegelung über dem Bild */
.device-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 28%, transparent 42%);
    pointer-events: none;
}
.stage-pic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    opacity: 0;
    transform: scale(1.04) translateY(2%);
    filter: blur(6px);
    transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
    pointer-events: none;
}
.stage-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage-pic.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.stage-hint { text-align: center; font-size: .78rem; color: var(--ink-mute); }

/* Das iPhone: dieselbe Bühne, Seitenverhältnis der Aufnahmen vom iPhone 17 Pro Max
   (1320 × 2868), schmaler Rand, runde Ecken, Dynamic Island als Andeutung. */
.device-phone {
    /* Mehr Abzug als beim iPad: Das iPhone ist schlanker und würde sonst die ganze Höhe füllen. */
    width: min(100%, calc((100vh - 280px) * 1320 / 2868), 300px);
    border-radius: 17% / 7.8%;
}
.device-phone .device-screen { margin: 2.6%; aspect-ratio: 1320 / 2868; border-radius: 14.5% / 6.7%; }
.device-phone .device-screen::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 1.3%;
    left: 50%;
    width: 29%;
    height: 2.7%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #000;
    pointer-events: none;
}
/* Seitentasten: rechts die Seitentaste, links die Lautstärke */
.device-phone::before,
.device-phone::after {
    content: "";
    position: absolute;
    width: 1.6%;
    min-width: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3d424b, #5a606b);
}
.device-phone::before { right: -1.1%; top: 24%; height: 11%; }
.device-phone::after  { left: -1.1%;  top: 19%; height: 14%;
    box-shadow: 0 0 0 0 transparent; }
.step-shot-phone { max-width: 200px; }
/* Die Bühne klebt nur bis zum Ende ihres Abschnitts. Beim letzten Schritt schöbe sie das
   hohe iPhone sonst unter die Navigation — etwas Luft unter den Schritten verhindert das. */
@media (min-width: 768px) {
    .scrolly.is-staged:has(.device-phone) .scrolly-steps { padding-bottom: 16vh; }
}
.features-phone .feature-row { grid-template-columns: minmax(0, 1fr) 72px; }

@media (prefers-reduced-motion: reduce) {
    .stage-pic { transform: none; filter: none; transition: opacity .01s; }
    .scrolly.is-staged .special { transition: none; }
}

/* Grundfunktionen mit kleinem Bild daneben */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 18px; align-items: start; }
.feature-row .zoom img { border-radius: 8px; }

/* „Außerdem" — kleinere Besonderheiten als ruhige Zeile */
.also-block { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.also {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 22px clamp(20px, 2.4vw, 32px);
    list-style: none;
}
.also li { font-size: .94rem; line-height: 1.55; color: var(--ink-body); }
.also b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }

/* Zitate */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

.quote {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.6vw, 34px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.quote blockquote {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink);
    letter-spacing: -.012em;
    margin-bottom: 22px;
    flex: 1;
}
.quote figcaption { font-size: .86rem; color: var(--ink-mute); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 570; margin-bottom: 1px; }

/* Hinweiskasten */
.note {
    padding: clamp(22px, 2.4vw, 30px);
    background: var(--paper-tint);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.note h4 { margin-bottom: 9px; }
.note p { font-size: .96rem; }
.note + .note { margin-top: 16px; }
.note-accent { background: var(--accent-wash); border-color: #cfdde8; }

/* Statusetikett */
.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 560;
    letter-spacing: .01em;
    background: var(--paper-tint);
    color: var(--ink-body);
    border: 1px solid var(--line);
}
.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}
.status-live  { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok-ink); }
.status-soon  { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.status-build { background: var(--paper-tint); color: var(--ink-mute); }

/* Über mich */
.about { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.about-card {
    padding: clamp(26px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
    position: sticky;
    top: 92px;
}
@media (max-width: 860px) { .about-card { position: static; } }

/* Porträt in der Visitenkarte — ersetzt das frühere Monogramm */
.about-photo { width: 100%; margin-bottom: 20px; border-radius: 16px; }

/* Breites Unterrichtsbild unter dem Text, über beide Spalten */
.about-wide { margin-top: clamp(40px, 5vw, 64px); }

.monogram {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--navy);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}
.about-card h3 { font-size: 1.15rem; margin-bottom: 3px; }
.about-role { font-size: .9rem; color: var(--ink-mute); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 520;
    background: var(--paper-tint);
    color: var(--ink-body);
}
.tag-accent { background: var(--accent-wash); color: var(--accent); }

.prose > * + * { margin-top: 20px; }
.prose p { font-size: 1.05rem; line-height: 1.7; }
.prose h2 + p { margin-top: 24px; }

/* Erster Absatz eines App-Textes — trägt die Kernaussage */
.prose .pitch { font-size: 1.12rem; color: var(--ink); }

/* --- 10 VIDEOTHEK --------------------------------------------------------- */

/* Filterzeile */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.search {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 340px;
}
.search svg {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--ink-mute);
    pointer-events: none;
}
.search input {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    font-size: .95rem;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search input::placeholder { color: var(--ink-mute); }
.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}
.search-clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 6px;
    color: var(--ink-mute);
}
.search-clear:hover { background: var(--paper-tint); color: var(--ink); }
.search-clear svg { position: static; transform: none; width: 13px; height: 13px; color: inherit; }

.select {
    height: 44px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378828f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
    font-size: .95rem;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* Fach-Reiter */
.tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 14px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 520;
    color: var(--ink-body);
    white-space: nowrap;
    transition: all .18s var(--ease);
}
.tab:hover { border-color: var(--ink-mute); color: var(--ink); }
.tab[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 560; }

.filter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    margin-bottom: clamp(26px, 3vw, 38px);
    font-size: .92rem;
    color: var(--ink-mute);
    min-height: 24px;
}
.filter-meta b { color: var(--ink); font-weight: 560; }

/* Videoraster */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 900px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .videos { grid-template-columns: 1fr; } }

.videos-featured { margin-bottom: clamp(56px, 6vw, 80px); }

/* Beim Fachwechsel tauscht das Raster seinen Inhalt komplett aus.
   Ohne Überblendung wirkt das wie ein Bildfehler. Nur beim Filterwechsel,
   nicht bei jedem Tastendruck in der Suche — sonst flackert es. */
@keyframes raster-ein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.videos.is-swapping { animation: raster-ein .34s var(--ease) both; }

.video {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    border-radius: var(--r);
    transition: transform .22s var(--ease);
}
.video:hover { transform: translateY(-4px); }
.video:hover .video-title { color: var(--accent); }
.video-title { transition: color .18s var(--ease); }

.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-sink);
    border: 1px solid var(--line);
}
.video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.video:hover .video-thumb img { transform: scale(1.035); }

.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 21, 36, .18);
    opacity: 0;
    transition: opacity .22s var(--ease);
}
.video:hover .video-play, .video:focus-visible .video-play { opacity: 1; }
.video-play span {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .4);
}
.video-play svg { width: 17px; height: 17px; margin-left: 3px; color: var(--ink); }

.video-badge {
    position: absolute;
    top: 10px; left: 10px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--btn-ink);
    font-size: .71rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Laufzeit unten rechts im Vorschaubild — wie man es von Videoportalen kennt */
.video-duration {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(8, 12, 20, .82);
    color: #fff;
    font-size: .76rem;
    font-weight: 550;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-body { padding: 15px 2px 0; }
.video-title {
    font-size: .99rem;
    font-weight: 560;
    line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: .79rem;
    color: var(--ink-mute);
}
.video-meta span { padding: 2px 8px; border-radius: 5px; background: var(--paper-tint); }
/* Das Alter ist Beiwerk, kein Etikett — deshalb ohne Fläche */
.video-meta .video-age { padding: 2px 0; background: none; margin-left: auto; }

/* Auf getönten Abschnitten braucht das Etikett einen eigenen Grund,
   sonst verschwindet es in der Fläche. */
.section-tint .video-meta span { background: var(--paper); }
.section-tint .video-meta .video-age { background: none; }

/* Ladeskelett & Leermeldung */
.skeleton .video-thumb { background: var(--paper-sink); animation: pulse 1.5s ease-in-out infinite; }
.skeleton .video-body::after {
    content: '';
    display: block;
    height: 14px;
    border-radius: 4px;
    background: var(--paper-sink);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.empty {
    grid-column: 1 / -1;
    padding: clamp(40px, 6vw, 72px) 20px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    color: var(--ink-mute);
}
.empty b { display: block; color: var(--ink); font-weight: 570; margin-bottom: 6px; font-size: 1.05rem; }

/* --- 11 APPS -------------------------------------------------------------- */

/* Übersichtskarte.
   ACHTUNG: hier KEIN "--tone: …" setzen. .app-card und .tone-lk sind beide
   Ein-Klassen-Selektoren, also gleich stark — der spätere gewinnt, und das
   wäre diese Regel. Der Ersatzwert gehört deshalb an die Verwendungsstelle. */
.app-card { overflow: hidden; }
.app-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tone, var(--accent));
}
.app-icon {
    width: 60px; height: 60px;
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px -6px rgba(14, 19, 27, .35);
}
.app-card .status { margin-bottom: 14px; align-self: flex-start; }
.app-for {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tone, var(--accent));
    margin-bottom: 8px;
}

/* Kopf einer App-Detailseite — --tone kommt von .tone-xx, siehe Hinweis oben */
.app-hero { }
.app-hero .app-icon { width: 76px; height: 76px; border-radius: 18px; }
.app-hero .eyebrow { color: var(--tone, var(--accent)); }
.app-hero .display { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem); }

.app-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .89rem;
    font-weight: 520;
    color: var(--ink-mute);
    margin-bottom: 30px;
}
.app-back:hover { color: var(--ink); }
.app-back svg { width: 14px; height: 14px; }

/* Status + Gerät nebeneinander im Seitenkopf */
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-device { font-size: .88rem; color: var(--ink-mute); }

/* Schaufenster der Startseite — dieselbe Sprache wie die App-Seiten: echtes Bild im
   Geräterahmen, Überschrift = Nutzen. Die Lehrerkompass-Kachel geht über die volle
   Breite, das iPad läuft unten aus der Kachel heraus. Kein Anheben beim Überfahren:
   .js-ready .reveal.is-in setzt transform stärker und würde es ohnehin schlucken. */
.showcase { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.showcase-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }
a.show { color: var(--ink-body); }
.show {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(26px, 3vw, 44px);
    overflow: hidden;
    background: color-mix(in srgb, var(--tone) 5%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--line));
    border-radius: var(--r-lg);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.show:hover {
    border-color: color-mix(in srgb, var(--tone) 45%, var(--line));
    box-shadow: 0 24px 48px -34px rgba(14, 19, 27, .45);
}
.show-text { display: flex; flex-direction: column; align-items: flex-start; }
.show .app-icon { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 18px; }
.show h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 12px; }
.show p { font-size: .98rem; }
.show .tags { margin-top: 18px; padding-top: 0; border-top: 0; }
.show .arrow-link { margin-top: 22px; }

.show-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    padding-bottom: 0;
    align-items: end;
}
.show-lead .show-text { align-self: center; padding-bottom: clamp(26px, 3vw, 44px); }
.show-lead h3 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.028em; }
.show-lead p { font-size: 1.05rem; }

/* Gerät im Schaufenster: feste Größe statt der fensterhohen Bühnen-Rechnung */
.device.device-show { width: min(100%, 470px); margin: 0 auto -24%; transition: transform .5s var(--ease); }
.device-phone.device-show { width: 100%; margin: 0; }
.device-show .device-screen picture,
.device-show .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.show:hover .device-show { transform: translateY(-6px); }

@media (max-width: 960px) {
    .showcase-pair { grid-template-columns: 1fr; }
    .show-lead { grid-template-columns: 1fr; }
    .show-lead .show-text { padding-bottom: 0; }
    .device.device-show { margin-bottom: -30%; }
    .device-phone.device-show { margin: 0; }
}
@media (max-width: 520px) {
    .show { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
    .show-lead { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .device-show, .show:hover .device-show { transition: none; transform: none; }
}

/* Breite App-Kachel (apps.html): iPhone groß neben dem Text, läuft unten aus der Kachel.
   .show-flip stellt das Gerät nach rechts — die Kacheln wechseln die Seite. */
.show-wide {
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    padding-bottom: 0;
    padding-inline: clamp(26px, 4vw, 64px);
    align-items: end;
}
.show-flip { grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); }
.show-wide .show-text { align-self: center; padding-block: clamp(26px, 3vw, 44px); }
.show-wide .device-phone.device-show { margin-bottom: -38%; }
.show-wide h3, .show-lead h3 { margin-top: 2px; }
.show .status { margin-bottom: 14px; }
.show .ticks { margin-top: 14px; }
@media (max-width: 760px) {
    .show-wide, .show-flip { grid-template-columns: 1fr; padding-bottom: 0; }
    .show-wide .show-text { padding-bottom: 0; }
    .show-wide .device-show { order: 2; }
    .show-wide .device-phone.device-show { width: min(70%, 240px); margin: 0 auto -45%; }
}

/* Gerätegruppe im Kopf von apps.html: iPad hinten, zwei iPhones davor, alle schweben leicht */
.device-group { position: relative; padding: 4% 12% 10% 6%; }
.device.dg-pad { width: 100%; margin: 0; animation: auftritt-bild .9s var(--ease) .15s both; }
.device-phone.dg-phone {
    position: absolute;
    width: 27%;
    margin: 0;
    box-shadow: 0 0 0 1.5px #4a505a, 0 0 0 2.5px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(14, 19, 27, .6);
    animation: chip-auftritt .8s var(--ease) both, schweben 7s ease-in-out infinite;
}
.dg-phone-1 { left: -4%; bottom: 0; animation-delay: .45s, 1s; }
.dg-phone-2 { right: 0; bottom: 12%; animation-delay: .6s, 2.6s; }
@media (max-width: 900px) {
    .device-group { max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .device.dg-pad, .device-phone.dg-phone { animation: none; }
}

/* Videothek-Kachel: Übungsblatt + Vorschaubild als Collage, unten aus der Kachel laufend */
.collage { position: relative; height: clamp(300px, 30vw, 400px); }
.collage-sheet {
    position: absolute;
    right: 6%;
    top: 0;
    width: min(62%, 300px);
    height: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(14, 19, 27, .45), 0 0 0 1px rgba(14, 19, 27, .06);
    transform: rotate(3deg);
    transform-origin: bottom right;
    transition: transform .5s var(--ease);
}
.collage-video {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: min(62%, 320px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 26px 50px -24px rgba(14, 19, 27, .55);
    transform: rotate(-2.5deg);
    transition: transform .5s var(--ease);
}
.collage-video img { display: block; width: 100%; height: auto; }
/* Tiefe beim Scrollen (site.js setzt --sp): Geräte und Collage wandern gegen die Kachel */
.show .device-show, .show .collage { translate: 0 calc(var(--sp, 0) * 34px); }
.device-group .dg-phone-1 { translate: 0 calc(var(--sp, 0) * 46px); }
.device-group .dg-phone-2 { translate: 0 calc(var(--sp, 0) * -30px); }
.blatt-faecher .fan-2 { translate: 0 calc(var(--sp, 0) * 18px); }
@media (prefers-reduced-motion: reduce) {
    .show .device-show, .show .collage, .device-group .dg-phone, .blatt-faecher .fan-2 { translate: none; }
}

.collage-play {
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(14, 19, 27, .72);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.collage-play::after {
    content: "";
    position: absolute;
    left: 21px; top: 16px;
    border-style: solid;
    border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent #fff;
}
.show:hover .collage-sheet, .show.is-live .collage-sheet { transform: rotate(5deg) translateY(-8px); }
.show:hover .collage-video, .show.is-live .collage-video { transform: rotate(-4deg) translate(-6px, -4px); }
@media (max-width: 960px) {
    .collage { height: 300px; max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .collage-sheet, .collage-video { transition: none; }
}

/* Haltung: drei Kacheln in den Fachfarben — dasselbe Farbsystem wie der Fächerband darüber */
.stances { gap: clamp(16px, 2vw, 24px); }
.stance {
    position: relative;
    padding: clamp(24px, 2.6vw, 34px);
    overflow: hidden;
    background: color-mix(in srgb, var(--tone) 6%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line));
    border-radius: var(--r-lg);
}
.stance::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tone);
}
.stance .point-num {
    font-size: 2.6rem;
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1;
    color: color-mix(in srgb, var(--tone) 55%, transparent);
    margin-bottom: 18px;
}
.stance h3 { margin-bottom: 10px; }
.stance p { font-size: .98rem; }

/* Screenshot-Galerie */
.shots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 240px);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 22px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: thin;
}
.shot { scroll-snap-align: start; margin: 0; }
.shot button {
    display: block;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-sink);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.shot button:hover { border-color: var(--ink-mute); transform: translateY(-3px); }
.shot img { width: 100%; }
.shot figcaption { margin-top: 12px; font-size: .87rem; color: var(--ink-mute); line-height: 1.45; }

.shots-hint { margin-top: 6px; font-size: .85rem; color: var(--ink-mute); }

/* Nebenprojekt-Zeile */
.aside-project {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    align-items: start;
    padding: clamp(24px, 2.6vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper-tint);
}
.aside-project img { width: 64px; height: 64px; border-radius: 15px; }
@media (max-width: 560px) { .aside-project { grid-template-columns: 1fr; } }

/* Liste mit Häkchen-Ersatz (feiner Strich) */
.ticks { display: grid; gap: 12px; margin-top: 18px; }
.ticks li {
    position: relative;
    padding-left: 22px;
    font-size: .97rem;
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0; top: .62em;
    width: 10px; height: 2px;
    border-radius: 2px;
    background: var(--tone, var(--accent));
}

/* --- 12 RECHTSTEXTE ------------------------------------------------------- */
.legal { padding-block: clamp(52px, 7vw, 92px) var(--section); }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: 14px; }
.legal .updated { font-size: .9rem; color: var(--ink-mute); margin-bottom: clamp(32px, 4vw, 52px); }
.legal h2 { font-size: 1.5rem; margin-top: 48px; margin-bottom: 14px; letter-spacing: -.02em; }
.legal h3 { font-size: 1.08rem; margin-top: 30px; margin-bottom: 8px; }
.legal p, .legal li { font-size: 1rem; line-height: 1.72; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { display: grid; gap: 9px; margin-top: 14px; }
.legal ul li { position: relative; padding-left: 20px; }
.legal ul li::before {
    content: '';
    position: absolute; left: 0; top: .68em;
    width: 8px; height: 2px; border-radius: 2px;
    background: var(--ink-mute);
}
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); }
.legal code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--paper-tint);
    border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    color: var(--ink);
}
.legal .note p + p { margin-top: 12px; }
.legal .faq-question { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.legal .faq-answer { font-size: .97rem; }
/* Breite Tabellen scrollen in sich selbst, nie die ganze Seite */
.legal .tablewrap {
    overflow-x: auto;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.legal .tablewrap table { margin-top: 0; }
.legal .tablewrap th:first-child, .legal .tablewrap td:first-child { padding-left: 16px; }
.legal .tablewrap tr:last-child td { border-bottom: 0; }

.legal table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 570; background: var(--paper-tint); }

/* --- 13 FOOTER ------------------------------------------------------------ */
.footer {
    background: var(--navy);
    color: var(--navy-ink);
    padding-block: clamp(56px, 7vw, 88px) 34px;
}
.footer a { color: var(--navy-ink); }
.footer a:hover { color: #fff; }

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(38px, 5vw, 56px);
    border-bottom: 1px solid var(--navy-line);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; gap: 30px; } }

.footer .brand { color: #fff; }
.footer .brand-text span { color: var(--navy-mute); }
.footer-blurb { margin-top: 18px; font-size: .95rem; max-width: 330px; line-height: 1.6; }

.footer-col h4 { color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: .94rem; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 26px;
    font-size: .86rem;
    color: var(--navy-mute);
}
.footer-bottom a { color: var(--navy-mute); }

/* Der Satz, der die Seite als Privatprojekt kennzeichnet. */
.footer-private {
    margin-top: 18px;
    font-size: .84rem;
    color: var(--navy-mute);
    max-width: 620px;
    line-height: 1.6;
}

.socials { display: flex; gap: 8px; margin-top: 22px; }
.socials a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--navy-line);
    border-radius: 9px;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.socials a:hover { background: var(--navy-soft); border-color: rgba(255, 255, 255, .28); }
.socials svg { width: 17px; height: 17px; }

/* --- 14 OVERLAYS ---------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(8, 12, 20, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.overlay.is-open { opacity: 1; visibility: visible; }

.overlay-close {
    position: absolute;
    top: clamp(14px, 3vw, 26px);
    right: clamp(14px, 3vw, 26px);
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.overlay-close:hover { background: rgba(255, 255, 255, .2); }
.overlay-close svg { width: 17px; height: 17px; }

.overlay-video,
.overlay-shot {
    transform: scale(.965);
    transition: transform .3s var(--ease);
}
.overlay.is-open .overlay-video,
.overlay.is-open .overlay-shot { transform: none; }

.overlay-video {
    width: min(1040px, 100%);
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.overlay-video iframe { width: 100%; height: 100%; border: 0; }

.overlay-shot { display: grid; justify-items: center; gap: 18px; max-height: 100%; max-width: 100%; }
/* Feste Höhe, Breite folgt dem Seitenverhältnis. Vorher nur max-height + max-width: 100 % der
   Figur — deren Breite hängt aber am Inhalt; Safari löste das (v. a. direkt nach dem Bildwechsel,
   solange die Größe noch unbekannt ist) mit einem winzigen Bild auf. */
.overlay-shot img {
    height: min(80vh, 1000px);
    width: auto;
    max-width: min(92vw, 1400px);
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.overlay-shot figcaption { color: rgba(255, 255, 255, .8); font-size: .95rem; text-align: center; }

.overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.overlay-nav:hover { background: rgba(255, 255, 255, .22); }
.overlay-nav svg { width: 18px; height: 18px; }
.overlay-prev { left: clamp(10px, 2.5vw, 30px); }
.overlay-next { right: clamp(10px, 2.5vw, 30px); }

body.is-locked { overflow: hidden; }

/* --- 15 BEWEGUNG ---------------------------------------------------------- */
/* Einblenden beim Scrollen.
   WICHTIG: Inhalte werden nur dann versteckt, wenn zwei Dinge zutreffen —
   der Browser führt Skripte aus UND site.js hat .js-ready gesetzt.
   Sonst würde ein blockiertes oder fehlendes site.js (CSP, Netzfehler,
   Werbeblocker) die halbe Seite dauerhaft unsichtbar machen. Genau dieser
   Fehler fällt beim Testen nicht auf, weil lokal immer alles lädt. */
@media (scripting: enabled) {
    .js-ready .reveal {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .42s var(--ease), transform .42s var(--ease);
    }
    .js-ready .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   15b BEITRÄGE
   Eine Textseite je Video: Einordnung, Player, Übungsblatt, Fließtext.
   Bewusst schmaler als der Rest der Seite — Fließtext liest sich in
   ~68 Zeichen Zeilenlänge am besten.
   ========================================================================== */

.beitrag { max-width: 760px; padding-block: clamp(40px, 5vw, 72px); }
.beitrag .display { margin-top: 6px; }
.beitrag .lead { margin-top: 14px; }

.beitrag-video {
    margin-top: clamp(28px, 3vw, 40px);
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--ink);
    box-shadow: var(--shadow);
}
.beitrag-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.beitrag-text { margin-top: clamp(28px, 3vw, 40px); }
.beitrag-text h2 {
    margin-top: 2em;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    letter-spacing: -.01em;
}
.beitrag-text h2:first-child { margin-top: 0; }
.beitrag-text p, .beitrag-text li { color: var(--ink-body); line-height: 1.75; }
.beitrag-text p { margin-top: .9em; }
.beitrag-text ul { margin-top: .9em; padding-left: 1.1em; }
.beitrag-text li { margin-top: .45em; }
.beitrag-text strong { color: var(--ink); font-weight: 650; }

/* Der Kasten mit dem Übungsblatt — der eigentliche Grund, warum es die Seite gibt. */
.material {
    margin-top: clamp(28px, 3vw, 40px);
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper-tint);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}
.material h2 { margin-top: 4px; font-size: 1.15rem; }
.material p { margin-top: 6px; color: var(--ink-body); max-width: 46ch; }
.material .btn { flex: none; }

.beitrag-pdf {
    margin-top: auto;
    padding-top: 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tone, var(--accent));
}

/* Verweis von einer Videokarte auf den zugehörigen Beitrag.
   Steht bewusst NEBEN der Karte, nicht darin: die Karte ist ein <button>,
   ein <a> darin wäre ungültiges HTML. */
.video-wrap { display: flex; flex-direction: column; }
.video-beitrag {
    margin-top: 10px;
    align-self: flex-start;
    font-size: .84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.video-beitrag:hover { border-bottom-color: currentColor; }

@media (max-width: 560px) {
    .material { flex-direction: column; align-items: flex-start; }
    .material .btn { width: 100%; justify-content: center; }
}

/* Beitragskarten tragen ganze Satzüberschriften — in der Dreierspalte wird
   die Schriftgröße der normalen Karten dafür zu groß und der Titel bricht
   nach jedem zweiten Wort um. */
.beitrag-karte h2 {
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.25;
    letter-spacing: -.005em;
}
.beitrag-karte p { font-size: .93rem; }

/* ==========================================================================
   15c FACHSYSTEM
   Die vier Fachfarben sind die einzige bunte Ebene der Seite. Die Marke selbst
   ist navy — sonst könnte man Markenfläche und Fachfläche nicht unterscheiden.
   ========================================================================== */

/* Das Fächerband — die Übersetzung des Kanalbanners auf die Website.
   Vier Felder in den Fachfarben, aber mit Luft dazwischen und weichen Ecken:
   ein geschlossener Vollfarbbalken wirkt wie ein Werbebanner, vier ruhige
   Flächen wirken wie Navigation. Der Pfeil sagt, dass es weitergeht. */
.faecher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.fach {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 76px; padding: 18px 20px;
    border-radius: 16px;
    background-color: var(--tone, var(--accent));
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .12));
    color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25;
    box-shadow: 0 14px 28px -20px rgba(14, 25, 40, .85);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fach::after {
    content: "→"; font-weight: 500; opacity: .7;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.fach:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -20px rgba(14, 25, 40, .9); }
.fach:hover::after { transform: translateX(4px); opacity: 1; }
.fach:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.faecher-hinweis { margin-top: 14px; font-size: .9rem; color: var(--ink-mute); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
    .fach, .fach::after { transition: none; }
    .fach:hover { transform: none; }
}

@media (max-width: 860px) { .faecher { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .faecher { grid-template-columns: 1fr; } .fach { min-height: 64px; } }

/* Aktiver Filter trägt die Fachfarbe */
.tab[aria-checked="true"][data-subject="Mathe"]      { background: var(--fach-mathe);      border-color: var(--fach-mathe); }
.tab[aria-checked="true"][data-subject="Physik"]     { background: var(--fach-physik);     border-color: var(--fach-physik); }
.tab[aria-checked="true"][data-subject="Informatik"] { background: var(--fach-informatik); border-color: var(--fach-informatik); }
.tab[aria-checked="true"][data-subject="KI"]         { background: var(--fach-ki);         border-color: var(--fach-ki); }

/* Videokarten bekommen die Farbe ihres Fachs als Kante */
.video-thumb { position: relative; }
.v-mathe .video-thumb::after,
.v-physik .video-thumb::after,
.v-informatik .video-thumb::after,
.v-ki .video-thumb::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
}
.v-mathe      .video-thumb::after { background: var(--fach-mathe); }
.v-physik     .video-thumb::after { background: var(--fach-physik); }
.v-informatik .video-thumb::after { background: var(--fach-informatik); }
.v-ki         .video-thumb::after { background: var(--fach-ki); }

/* Fachangabe in der Kartenzeile — dieselbe Farbe wie die Kante darüber */
.video-meta .m-fach { font-weight: 600; }
.video-meta .f-mathe      { color: var(--fach-mathe); }
.video-meta .f-physik     { color: var(--fach-physik); }
.video-meta .f-informatik { color: var(--fach-informatik); }
.video-meta .f-ki         { color: var(--fach-ki); }

/* Beitragskarten und Beitragsseite */
.beitrag-karte { border-left: 3px solid var(--tone, var(--accent)); }

/* Seit 02.10.2026: Bild statt Textblock (LIESMICH, Grundsatz). Karten mit Vorschaubild
   oben bis an den Rand, Fachfarbe als Kante darunter statt links. */
.section-flush-top { padding-top: 0; }
.beitrag-karte:has(.beitrag-bild) { border-left-width: 1px; border-left-color: var(--line); overflow: hidden; }
.beitrag-bild {
    position: relative;
    display: block;
    margin: calc(-1 * clamp(24px, 2.6vw, 34px)) calc(-1 * clamp(24px, 2.6vw, 34px)) 20px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 4px solid var(--tone, var(--accent));
    background: var(--paper-sink);
}
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.beitrag-karte:hover .beitrag-bild img { transform: scale(1.04); }
.beitrag-bild .collage-play { width: 46px; height: 46px; opacity: 0; transition: opacity .3s var(--ease); }
.beitrag-bild .collage-play::after { left: 18px; top: 13px; border-width: 10px 0 10px 15px; }
.beitrag-karte:hover .beitrag-bild .collage-play { opacity: 1; }
.beitrag-bild-pdf {
    position: absolute;
    right: 10px; bottom: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: var(--tone, var(--accent));
}

/* Seitenkopf der Übersicht: drei echte Übungsblätter, aufgefächert */
.beitraege-kopf { padding-bottom: clamp(40px, 5vw, 72px); }
.blatt-faecher { position: relative; height: clamp(300px, 32vw, 420px); }
.blatt-faecher img {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(46%, 230px);
    height: auto;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 26px 50px -26px rgba(14, 19, 27, .5), 0 0 0 1px rgba(14, 19, 27, .07);
    transform-origin: 50% 100%;
    animation: auftritt-bild .9s var(--ease) both;
    transition: transform .5s var(--ease);
}
.blatt-faecher .fan-1 { transform: translateX(-112%) rotate(-9deg) translateY(18px); animation-delay: .2s; }
.blatt-faecher .fan-2 { transform: translateX(-50%); z-index: 2; animation-delay: .32s; }
.blatt-faecher .fan-3 { transform: translateX(12%) rotate(9deg) translateY(18px); animation-delay: .44s; }
.blatt-faecher:hover .fan-1, .blatt-faecher.is-live .fan-1 { transform: translateX(-122%) rotate(-13deg) translateY(10px); }
.blatt-faecher:hover .fan-3, .blatt-faecher.is-live .fan-3 { transform: translateX(22%) rotate(13deg) translateY(10px); }
/* Die Auftritts-Animation setzt transform — deshalb hier „translate“ getrennt
   halten: Erst nach dem Auftritt übernimmt die Fächer-Stellung. */
@keyframes auftritt-blatt { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.blatt-faecher img { animation-name: auftritt-blatt; animation-fill-mode: backwards; }
@media (max-width: 900px) {
    .blatt-faecher { height: 280px; max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .blatt-faecher img { animation: none; transition: none; }
}

/* Seitenkopf der Videothek: drei Vorschaubilder gestaffelt, Fachfarbe als Kante */
.video-faecher { position: relative; height: clamp(240px, 26vw, 340px); }
.video-faecher img {
    position: absolute;
    width: 66%;
    height: auto;
    border-radius: 12px;
    border-bottom: 4px solid var(--tone);
    box-shadow: 0 26px 50px -24px rgba(14, 19, 27, .55);
    animation: auftritt-blatt .9s var(--ease) backwards, schweben 7s ease-in-out infinite;
}
.video-faecher .vf-1 { left: 0;   top: 4%;  rotate: -5deg; animation-delay: .15s, .4s; }
.video-faecher .vf-2 { right: 0;  top: 0;   rotate: 4deg;  animation-delay: .3s, 2.2s; z-index: 1; }
.video-faecher .vf-3 { left: 16%; bottom: 0; rotate: -1deg; animation-delay: .45s, 3.6s; z-index: 2; }
@media (max-width: 900px) {
    .video-faecher { height: 240px; max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .video-faecher img { animation: none; }
}

/* „Worum es geht" auf den App-Seiten: verstreute Zettel ordnen sich zur App.
   Endzustand (geordnet, Farbe der App) ist der Normalfall — ohne JS und bei „Bewegung
   reduzieren" steht er sofort. Nur mit JS und Bewegung beginnt es als Durcheinander;
   site.js setzt .is-live, sobald die Grafik gut im Bild ist. */
.buendel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 88px;
    align-items: center;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 48px);
    max-width: 460px;
}
.buendel-zettel { position: relative; display: grid; gap: 8px; justify-items: start; }
.bz {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 560;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--line));
    border-left: 4px solid var(--tone);
    box-shadow: 0 10px 22px -16px rgba(14, 19, 27, .45);
    white-space: nowrap;
    transition: transform .9s var(--ease), background-color .6s var(--ease),
                border-color .6s var(--ease), color .6s var(--ease);
}
.buendel-pfeil {
    position: relative;
    height: 2px;
    background: var(--tone);
    border-radius: 2px;
    transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s;
    transform-origin: left center;
}
.buendel-pfeil::after {
    content: "";
    position: absolute;
    right: -2px; top: -5px;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent var(--tone);
}
.buendel-ziel {
    width: 88px; height: 88px;
    border-radius: 20px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 14%, transparent),
                0 18px 36px -16px rgba(14, 19, 27, .5);
    transition: transform .7s var(--ease) .6s, filter .7s var(--ease) .6s, box-shadow .7s var(--ease) .6s;
}

@media (prefers-reduced-motion: no-preference) {
    .js-ready .buendel:not(.is-live) .bz {
        color: var(--ink-mute);
        background: var(--paper-tint);
        border-color: var(--line);
        border-left-color: var(--line);
    }
    .js-ready .buendel:not(.is-live) .bz:nth-child(1) { transform: translate(22%, 64px) rotate(-8deg); }
    .js-ready .buendel:not(.is-live) .bz:nth-child(2) { transform: translate(48%, -8px) rotate(6deg); }
    .js-ready .buendel:not(.is-live) .bz:nth-child(3) { transform: translate(4%, 36px) rotate(4deg); }
    .js-ready .buendel:not(.is-live) .bz:nth-child(4) { transform: translate(40%, -56px) rotate(-6deg); }
    .js-ready .buendel:not(.is-live) .bz:nth-child(5) { transform: translate(12%, -26px) rotate(9deg); }
    .js-ready .buendel:not(.is-live) .bz:nth-child(6) { transform: translate(52%, -112px) rotate(-3deg); }
    .js-ready .buendel:not(.is-live) .buendel-pfeil { opacity: 0; transform: scaleX(.2); }
    .js-ready .buendel:not(.is-live) .buendel-ziel { transform: scale(.82); filter: grayscale(1) opacity(.55); box-shadow: none; }
    .bz:nth-child(2) { transition-delay: .06s; }
    .bz:nth-child(3) { transition-delay: .12s; }
    .bz:nth-child(4) { transition-delay: .18s; }
    .bz:nth-child(5) { transition-delay: .24s; }
    .bz:nth-child(6) { transition-delay: .30s; }
}
@media (max-width: 420px) {
    .buendel { grid-template-columns: minmax(0, 1fr) 28px 64px; gap: 10px; }
    .buendel-ziel { width: 64px; height: 64px; border-radius: 15px; }
    .bz { font-size: .8rem; padding: 7px 10px; }
}

/* Einleitung der Besonderheiten: Text links, rechts die Besonderheiten als Kacheln
   (zugleich Sprungmarken). Kacheln steigen nacheinander auf, sobald sie im Bild sind. */
.besonder-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: end;
}
.besonder-kopf .section-intro { margin-bottom: 0; }
.besonder-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 15px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    background: color-mix(in srgb, var(--tone) 7%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--tone) 20%, var(--line));
    transition: transform .55s var(--ease), opacity .55s var(--ease),
                border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bi:hover { border-color: var(--tone); box-shadow: 0 14px 28px -20px rgba(14, 19, 27, .5); }
.bi-nr {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1;
    color: color-mix(in srgb, var(--tone) 70%, transparent);
    font-variant-numeric: tabular-nums;
}
.special { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: no-preference) {
    .js-ready .besonder-index:not(.is-live) .bi { opacity: 0; transform: translateY(18px) scale(.97); }
    .bi:nth-child(2) { transition-delay: .06s; }
    .bi:nth-child(3) { transition-delay: .12s; }
    .bi:nth-child(4) { transition-delay: .18s; }
    .bi:nth-child(5) { transition-delay: .24s; }
    .bi:nth-child(6) { transition-delay: .30s; }
    .bi:nth-child(7) { transition-delay: .36s; }
    .bi:nth-child(8) { transition-delay: .42s; }
    .besonder-index.is-live .bi:hover { transition-delay: 0s; }
}
/* Fünf Bereiche (Lehrerkompass, #module): App-Symbol als Wurzel, Äste zu fünf kleinen Modulkarten.
   Wie beim Bündel ist der Endzustand der Normalfall; nur mit JS und Bewegung wachsen die Äste. */
.bereiche { display: flex; flex-direction: column; align-items: center; margin-top: clamp(8px, 2vw, 24px); }
.bereiche-wurzel {
    width: 72px; height: 72px; border-radius: 17px; position: relative; z-index: 1;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 14%, transparent),
                0 18px 36px -16px rgba(14, 19, 27, .5);
    transition: transform .6s var(--ease), filter .6s var(--ease);
}
.bereiche-reihe {
    position: relative; width: 100%;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
    padding-top: 56px;
}
/* Stamm vom Symbol nach unten und Querast über die Kartenmitten */
.bereiche-reihe::before, .bereiche-reihe::after {
    content: ""; position: absolute; background: color-mix(in srgb, var(--tone) 45%, var(--line));
    transition: transform .6s var(--ease) .15s;
}
.bereiche-reihe::before { left: 50%; top: 0; width: 2px; height: 28px; transform-origin: top; }
.bereiche-reihe::after { left: 10%; right: 10%; top: 28px; height: 2px; }
.bereich {
    position: relative;
    padding: 18px 16px 18px;
    border-radius: 14px;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line));
    border-top: 4px solid var(--tone);
    box-shadow: 0 12px 26px -20px rgba(14, 19, 27, .45);
    transition: transform .6s var(--ease), opacity .6s var(--ease), box-shadow .25s var(--ease);
}
/* Ast vom Querbalken zur Karte */
.bereich::before {
    content: ""; position: absolute; left: 50%; top: -32px; width: 2px; height: 28px;
    background: color-mix(in srgb, var(--tone) 45%, var(--line));
}
.bereich:hover { box-shadow: 0 18px 32px -20px rgba(14, 19, 27, .55); }
.bereich-tipp { background: color-mix(in srgb, var(--tone) 7%, var(--paper)); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.bereich-icon {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 11%, var(--paper));
}
.bereich-icon svg { width: 24px; height: 24px; }
.bereich-nr { display: block; margin: 14px 0 4px; font-size: .8rem; font-weight: 650; letter-spacing: .04em;
    color: color-mix(in srgb, var(--tone) 75%, transparent); font-variant-numeric: tabular-nums; }
.bereich h3 { margin: 0 0 6px; font-size: .98rem; line-height: 1.25; hyphens: manual; }
.bereich p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-body); }
.bereich-badge { position: absolute; top: -12px; right: 10px; padding: 3px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 650; color: #fff; background: var(--tone); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .js-ready .bereiche:not(.is-live) .bereiche-wurzel { transform: scale(.85); filter: grayscale(1) opacity(.6); }
    .js-ready .bereiche:not(.is-live) .bereiche-reihe::before { transform: scaleY(0); }
    .js-ready .bereiche:not(.is-live) .bereiche-reihe::after { transform: scaleX(0); }
    .js-ready .bereiche:not(.is-live) .bereich { opacity: 0; transform: translateY(22px); }
    .bereich:nth-child(1) { transition-delay: .25s; }
    .bereich:nth-child(2) { transition-delay: .32s; }
    .bereich:nth-child(3) { transition-delay: .39s; }
    .bereich:nth-child(4) { transition-delay: .46s; }
    .bereich:nth-child(5) { transition-delay: .53s; }
}
/* Schmal: Stamm links, Karten hängen als Liste daran */
@media (max-width: 860px) {
    .bereiche { align-items: flex-start; }
    .bereiche-wurzel { width: 56px; height: 56px; border-radius: 13px; }
    .bereiche-reihe { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 0 44px; }
    .bereiche-reihe::before { left: 27px; top: 0; height: 16px; }
    .bereiche-reihe::after { display: none; }
    .bereich::before { left: -17px; top: 40px; width: 17px; height: 2px; }
    /* Stamm stückweise je Karte, damit er beim letzten Ast endet */
    .bereich::after { content: ""; position: absolute; left: -17px; top: -17px; bottom: -1px; width: 2px;
        background: color-mix(in srgb, var(--tone) 45%, var(--line)); }
    .bereich:first-child::after { top: -5px; }
    .bereich:last-child::after { bottom: auto; height: 59px; }
    .bereich { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    .bereich-icon { grid-row: span 3; }
    .bereich-nr { margin-top: 0; }
}
@media (max-width: 860px) {
    .besonder-kopf { grid-template-columns: 1fr; }
}

/* Startseite unten (03.10.2026): Kommentare wie auf YouTube, versetzt und beim Scrollen
   driftend (site.js setzt --sp an .comments); „Über mich" mit vier Bild-Kacheln. */
.comments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    align-items: start;
}
.comment {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 2.4vw, 28px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--tone);
    border-radius: var(--r-lg);
    box-shadow: 0 22px 44px -34px rgba(14, 19, 27, .45);
    translate: 0 calc(var(--sp, 0) * var(--drift, 0px));
}
.comment:nth-child(1) { --drift: 18px; }
.comment:nth-child(2) { --drift: -26px; margin-top: 44px; }
.comment:nth-child(3) { --drift: 34px; margin-top: 16px; }
.comments { --sp: 0; }
.comment-kopf { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; }
.comment-kopf b { display: block; font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.comment-avatar {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 650;
    color: #fff;
    background: var(--tone);
}
.comment-rolle { font-size: .8rem; color: var(--tone); font-weight: 560; }
.comment-yt { width: 22px; height: 22px; color: #e5392f; }
.comment blockquote { font-size: 1.08rem; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.comments-mehr { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 900px) {
    .comments { grid-template-columns: 1fr; max-width: 560px; }
    .comment:nth-child(n) { margin-top: 0; }
    .comment:nth-child(2) { margin-left: 8%; }
}
@media (prefers-reduced-motion: reduce) { .comment { translate: none; } }

.about-main { display: grid; gap: clamp(32px, 4vw, 52px); }
.werk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
a.werk-karte { color: var(--ink-body); }
.werk-karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: color-mix(in srgb, var(--tone) 5%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line));
    border-radius: var(--r-lg);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.werk-karte:hover { border-color: var(--tone); box-shadow: 0 22px 44px -32px rgba(14, 19, 27, .5); }
.werk-bild {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 4px solid var(--tone);
    background: var(--paper-sink);
}
.werk-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.werk-karte:hover .werk-bild img { transform: scale(1.05); }
/* Blatt und App-Bild zeigen ihren oberen Teil — dort steht, worum es geht */
.werk-bild-blatt img, .werk-bild-app img { object-position: top; }
.werk-bild-blatt { background: #fff; }
.werk-text { display: block; padding: 18px 20px 22px; font-size: .94rem; line-height: 1.6; }
.werk-text b { display: block; margin-bottom: 6px; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 560px) { .werk { grid-template-columns: 1fr; } }

/* ==========================================================================
   IRONSTRIDE: sportlicher Auftritt (03.10.2026, Felix: „sehr viel sportlicher, weniger
   App für die Schule"). Nur über body.seite-sport — die Schul-Apps bleiben unberührt.
   Zweite Farbe ist das Lauf-Orange aus den Diagrammen der App.
   ========================================================================== */
.seite-sport { --energie: #ff7a1a; }

.sport-hero {
    --ink: #fff;
    --ink-body: rgba(255, 255, 255, .8);
    --ink-mute: rgba(255, 255, 255, .58);
    --line: rgba(255, 255, 255, .14);
    --paper: #15151d;
    color: var(--ink-body);
    background:
        radial-gradient(70% 90% at 82% 40%, color-mix(in srgb, var(--is) 55%, transparent) 0%, transparent 62%),
        radial-gradient(50% 60% at 100% 100%, rgba(255, 122, 26, .28) 0%, transparent 70%),
        linear-gradient(180deg, #0b0b12 0%, #12101c 100%);
    padding-block: clamp(48px, 7vw, 104px) clamp(56px, 8vw, 120px);
}
.sport-hero::before { display: none; }
/* Tempo-Streifen: feine Diagonalen, nach links ausgeblendet */
.sport-streifen {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .045) 46px 48px);
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 55%);
    mask: linear-gradient(90deg, transparent 0%, #000 55%);
    pointer-events: none;
}
.sport-hero .app-back { color: rgba(255, 255, 255, .6); }
.sport-hero .app-back:hover { color: #fff; }
.sport-marke { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.sport-marke .app-icon { width: 64px; height: 64px; margin: 0; border-radius: 15px; }
.sport-name { display: block; font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 6px; }
.sport-hero .app-device { color: rgba(255, 255, 255, .6); }
.sport-eyebrow { color: var(--energie); }

.sport-titel {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    font-size: clamp(3rem, 1.6rem + 5.4vw, 6.2rem);
    font-weight: 820;
    line-height: .9;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: #fff;
}
.sz { display: block; transform: skewX(-9deg); transform-origin: left bottom; }
.sz-3 {
    background: linear-gradient(90deg, var(--is) 0%, var(--energie) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .1em;
}
@keyframes sprint { from { opacity: 0; transform: skewX(-9deg) translateX(-60px); } to { opacity: 1; transform: skewX(-9deg); } }
.hero-copy .sport-titel { animation: none; }
.sport-titel .sz { animation: sprint .7s var(--ease) both; }
.sport-titel .sz-2 { animation-delay: .12s; }
.sport-titel .sz-3 { animation-delay: .24s; }
.sport-hero .lead { color: rgba(255, 255, 255, .82); }
.sport-hero .lead strong { color: #fff; }
.sport-hero .btn-primary { background: var(--energie); border-color: var(--energie); color: #111; }
.sport-hero .btn-primary:hover { background: #ff8f3d; }
.sport-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }

/* Drei iPhones, schräg gestaffelt, schweben und wandern beim Scrollen */
.sport-geraete { position: relative; height: clamp(440px, 46vw, 620px); }
.sport-geraete .device-phone.device-show {
    position: absolute;
    margin: 0;
    animation: chip-auftritt .8s var(--ease) both, schweben 7s ease-in-out infinite;
}
.sport-geraete .sg-vorn   { width: 44%; left: 28%; top: 6%; z-index: 2; animation-delay: .2s, 1s; translate: 0 calc(var(--sp, 0) * -24px); }
.sport-geraete .sg-links  { width: 36%; left: 0;   top: 16%; rotate: -8deg; filter: brightness(.82); animation-delay: .35s, 2.4s; translate: 0 calc(var(--sp, 0) * 30px); }
.sport-geraete .sg-rechts { width: 36%; right: 0;  top: 12%; rotate: 8deg;  filter: brightness(.82); animation-delay: .5s, 3.6s; translate: 0 calc(var(--sp, 0) * 40px); }
.sport-geraete .chip { --tone: var(--is); }
.sport-geraete .sport-lauf { --tone: var(--energie); }
.chip-s1 { top: 4%;  left: -2%; animation-delay: .8s, 1.3s; }
.chip-s2 { top: 44%; right: -4%; animation-delay: .95s, 2.2s; }
.chip-s3 { bottom: 8%; left: 4%; animation-delay: 1.1s, 3s; }
.sport-hero .chip { background: color-mix(in srgb, #15151d 82%, transparent); color: #fff; }

@media (max-width: 900px) {
    .sport-geraete { order: 2; height: 400px; max-width: 420px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sport-titel .sz, .sport-geraete .device-phone.device-show { animation: none; }
    .sport-geraete .device-phone { translate: none; }
}

/* Übrige Seite: kräftiger, Rubriken in Orange, Kacheln mit Tempo-Kante */
.seite-sport h2 { font-weight: 760; letter-spacing: -.03em; }
.seite-sport .eyebrow-tone, .seite-sport .special-kicker { color: var(--energie); }
.seite-sport .special h3 { font-weight: 760; }
.seite-sport .bi { border-left: 4px solid var(--energie); }
.seite-sport .bi-nr { color: var(--energie); font-style: italic; }
.seite-sport .special { border-top-color: var(--energie); }

/* Fragen zum Aufklappen (IronStride; auch für die Suche) */
.faq { display: grid; gap: 10px; max-width: 52rem; }
.faq-item {
    border: 1px solid color-mix(in srgb, var(--tone) 20%, var(--line));
    border-left: 4px solid var(--energie, var(--tone));
    border-radius: 12px;
    background: color-mix(in srgb, var(--tone) 4%, var(--paper));
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 650;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: 500; color: var(--energie, var(--tone)); transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 18px; color: var(--ink-body); line-height: 1.65; }

/* Übungsblatt-Kasten mit dem Blatt selbst */
.material-mit-blatt { flex-wrap: nowrap; justify-content: flex-start; }
.material-mit-blatt > div { flex: 1; }
.material-blatt {
    flex: none;
    width: 110px;
    transform: rotate(-3deg);
    transition: transform .35s var(--ease);
}
.material-blatt img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 14px 30px -16px rgba(14, 19, 27, .5), 0 0 0 1px rgba(14, 19, 27, .08);
}
.material-blatt:hover { transform: rotate(0) scale(1.04); }
@media (max-width: 560px) {
    .material-mit-blatt { flex-wrap: wrap; }
    .material-blatt { width: 90px; }
}

/* „Passt dazu" am Ende eines Beitrags */
.passt-dazu { padding-block: clamp(40px, 5vw, 72px) var(--section); border-top: 1px solid var(--line); }
.fach-linie {
    height: 4px; width: 64px; border-radius: 2px; margin-bottom: 18px;
    background: var(--tone, var(--accent));
}

/* --- DRUCK ---------------------------------------------------------------- */
@media print {
    .nav, .footer, .overlay, .btn-row, .socials { display: none !important; }
    body { color: #000; font-size: 11pt; }
    .hero::before { display: none; }
}

/* ==========================================================================
   16 DUNKELMODUS
   Folgt der Systemeinstellung des Besuchers (kein Umschalter auf der Seite —
   ein Schalter, den niemand findet, ist nur ein Knopf mehr).

   Alles hier ist reines Umdefinieren von Token plus die wenigen Stellen, an
   denen eine Farbe fest verdrahtet werden musste. Wenn du den Dunkelmodus
   nicht willst: diesen kompletten Abschnitt löschen, sonst ändert sich nichts.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --paper:      #0e141c;
        --paper-tint: #141c26;
        --paper-sink: #1b2532;
        --ink:        #eef2f7;
        --ink-body:   #a3aebd;
        --ink-mute:   #7b8697;
        --line:       #253040;
        --line-soft:  #1a2331;

        /* Auf dunklem Grund braucht Blau mehr Helligkeit, sonst verschwindet es.
           Die Schrift auf gefüllten Knöpfen wird dafür dunkel. */
        --accent:      #8bb8d8;
        --accent-deep: #a8ccE4;
        --accent-wash: #16283a;
        --btn-ink:     #0b111a;

        --navy:      #080d15;   /* Footer bleibt die dunkelste Fläche */
        --navy-soft: #131c2b;
        --navy-ink:  rgba(255, 255, 255, .72);
        --navy-mute: rgba(255, 255, 255, .46);
        --navy-line: rgba(255, 255, 255, .10);

        /* App-Töne aufhellen — die satten Tageslichtfarben werden sonst matschig */
        --lk: #35b6a8;
        --sk: #e0895c;
        --ak: #8f8cf0;
        --is: #e5726c;
        --pr: #4fd17f;
        --lg: #7fa9d6;

        /* Fachfarben ebenfalls aufhellen — auf dunklem Grund sacken die
           satten Kit-Töne sonst weg. Die Zuordnung bleibt gleich. */
        --fach-mathe:      #6ba7e8;
        --fach-physik:     #6ed071;
        --fach-informatik: #f5b95a;
        --fach-ki:         #c68df0;

        --ok-bg:   #10291c;  --ok-line:   #1f4b33;  --ok-ink:   #63d69b;
        --warn-bg: #2a2011;  --warn-line: #4d3a19;  --warn-ink: #e8b063;
    }

    /* Die Navigationsleiste ist durchscheinend — der Grundton muss mitdrehen */
    .nav { background: rgba(14, 20, 28, .82); }

    /* App-Icons und Bildschirmfotos sind für hellen Grund gebaut.
       Ein Hauch weniger Leuchtkraft nimmt ihnen die Grelle, ohne sie zu
       verfälschen. Fotos von Personen bleiben unangetastet. */
    .app-icon, .shot img { filter: brightness(.94); }

    /* Vorschaubilder auf dunklem Grund: der weiße Rahmen würde stören */
    .video-thumb { border-color: var(--line); }

    /* Der Schatten unter angehobenen Karten wird auf Dunkel unsichtbar —
       stattdessen hellt sich die Kante auf. */
    a.card:hover {
        box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .8);
        border-color: #3a4759;
    }

    /* Das Millimeterpapier im Kopf darf nur geahnt werden */
    .hero::before { opacity: .55; }
}

/* Vorschau aller Seiten eines Übungsblatts (Beitragsseiten) */
.blatt-vorschau { margin: 18px 0 8px; }
.blatt-vorschau .eyebrow { margin-bottom: 10px; }
.blatt-seiten {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
}
.blatt-seiten figure { flex: none; width: 150px; margin: 0; scroll-snap-align: start; }
.blatt-seiten .zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.blatt-seiten img {
    display: block; width: 100%; height: auto; border-radius: 4px; background: #fff;
    box-shadow: 0 10px 24px -14px rgba(14, 19, 27, .5), 0 0 0 1px rgba(14, 19, 27, .08);
    transition: transform .3s var(--ease);
}
.blatt-seiten .zoom:hover img { transform: translateY(-3px); }
.blatt-seiten figcaption { margin-top: 6px; font-size: .78rem; color: var(--ink-mute); text-align: center; }
@media (max-width: 560px) { .blatt-seiten figure { width: 120px; } }

/* --- RUCKELN AUF TOUCH-GERÄTEN (14.10.2026) ---------------------------------
   Felix: „Startseite ruckelt beim Scrollen auf dem iPad.“ Drei Dinge liefen dort bei jedem
   Scroll-Bild zusammen: Unschärfe (`backdrop-filter`) hinter der Leiste und hinter den
   schwebenden Kärtchen über bewegtem Inhalt, Elemente, deren Lage site.js je Bild über --sp
   setzt, und dazu Übergänge von .6 s, die dem Finger ständig hinterherliefen.
   Auf Geräten mit Maus bleibt alles wie es ist. */
@media (hover: none), (pointer: coarse) {
    .nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: color-mix(in srgb, var(--paper) 97%, transparent);
    }
    .chip {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--paper);
        transition: none;
    }
    .hero-tilt,
    .scrolly:not(.is-staged) .step-shot .zoom { transition: none; }
}

/* --- Prompterly: Geräte im Querformat (seit 26.10.2026) --------------------
   Ein Teleprompter steht meistens quer vor der Kamera — die Bilder sind deshalb Querformat.
   Gleicher Rahmen wie .device, nur Breite und Seitenverhältnis gedreht. */
.device-quer {
    width: min(100%, 720px);
    border-radius: 4.2% / 5.6%;
}
.device-quer .device-screen { aspect-ratio: 2752 / 2064; border-radius: 3.2% / 4.2%; margin: 1.3%; }
.device-quer .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-shots { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(32px, 4vw, 48px); }
.pr-shot {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}
.pr-shot:nth-child(even) > :first-child { order: 2; }
.pr-shot .zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pr-shot .zoom img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(14, 19, 27, .55);
}
@media (max-width: 820px) {
    .pr-shot { grid-template-columns: 1fr; }
    .pr-shot:nth-child(even) > :first-child { order: 0; }
}

/* App-Kachel mit querem iPad (apps.html, Prompterly) */
.show-quer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.show-quer .device-quer { width: 100%; margin: 0; transition: transform .5s var(--ease); }
.show-quer:hover .device-quer { transform: translateY(-6px); }
@media (max-width: 760px) { .show-quer { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .show-quer .device-quer, .show-quer:hover .device-quer { transition: none; transform: none; } }