/* css/oeffentlich.css
   Die öffentlichen Seiten im Look „Pausenhof“ (O-742, Veröffentlichung am 29.10.2026): Startseite, Anmeldung und
   Registrierung in index.html, dazu FAQ, Datenschutz, Impressum, AGB, Sicherheit, Schullizenz, Erklärvideos, Handbuch.

   JEDE Regel hier steht unter html.ph-oe - die Klasse setzt js/oeffentlich.js im <head>, bis zur Veröffentlichung nur mit
   ?vorschau=pausenhof. Ohne sie wirkt diese Datei nicht (bis auf die @font-face, die nichts laden, solange niemand
   die Schrift verwendet). index.html blendet die neuen Teile zusätzlich inline aus (.lp-neu, .oe-nur), falls diese Datei
   einmal nicht ankommt.

   Nur ein Look: Nordic im Pausenhof, hell (Entscheidung vom 23.10.2026 - kein Dark Mode, kein Editorial).
   Hover ändert nur Farben, ohne transition (Fehlerklasse D15, „schwerfällig“-Fund). Die Stufe unter Karten und Knöpfen
   ist 3 px. Die kantige Ecke sitzt unten links.

   Die alten Seiten tragen ihre Gestaltung inline (index.html) oder in eigenen <style>-Blöcken. Wo ein inline gesetzter
   Wert übersteuert werden muss, steht !important - nur dort, und nur unter html.ph-oe. */

@font-face {
    font-family: 'SB Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../vendor/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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;
}
@font-face {
    font-family: 'SB Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../vendor/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* Cornelius' Handschrift - dieselbe Datei wie in den Erklärvideos (~/Projekte/SkooBase/Handschrift). Nur für Randnotizen,
   höchstens sechs Wörter. */
@font-face {
    font-family: 'SkooBase Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../vendor/skoobase-hand/skoobase-hand-01.woff) format('woff');
}
/* Zwei weitere eigene Schriften nur für die Stimmen (4g): die Druckschrift aus Cornelius' Vorlage und Rosa 1, von seiner
   Tochter geschrieben (tools/handschrift-bau, 29.10.2026). Beide tragen die Auslassungspunkte, die SkooBase Hand fehlen. */
@font-face {
    font-family: 'SkooBase Druckschrift';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../vendor/skoo-druck/skoobase-druckschrift-02.woff) format('woff');
}
@font-face {
    font-family: 'SkooBase Rosa 1';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../vendor/skoo-druck/skoobase-rosa-1-02.woff) format('woff');
}

/* ══ 1. GRUNDLAGE ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
html.ph-oe {
    --oe-petrol: #2B5B61;
    --oe-petrol-tief: #1A4449;
    --oe-apricot: #E8A572;
    --oe-apricot-hover: #F0B98C;
    --oe-tinte: #1B2A2C;
    --oe-tinte-hover: #2C4245;
    --oe-nebel: #F0F4F4;
    --oe-minze: #E8F0EE;
    --oe-kreide: #DDE5E5;
    --oe-leise: #5A7174;
    --oe-auf-petrol: #D3E2E3;
    --oe-blau: #2B5B61;            /* Fokusring auf hellem Grund (Petrol); auf dunklem Grund --oe-fokus-dunkel (Karl, SEK 7d2abba) */
    --oe-fokus-dunkel: #F5CDA9;    /* Fokusring auf Petrol 5,1:1, auf Tinte ebenso hell genug */
    --oe-apricot-hell: #F5CDA9;   /* Apricot als Schrift auf Petrol: 5,1:1 (das volle Apricot hat dort nur 3,6:1) */
    --oe-kalypso: #1F4D63;        /* SEK-Farbe für den Knopf „Zu SkooBase SEK“ */
    --oe-kalypso-hover: #2E6782;
    --oe-orange-rand: #EBC7A6;
    --oe-fleck: #E8A572;   /* der versetzte Fleck der Symbole (index.html, <symbol id="oe-i-…">) */
    --oe-weiss: #FFFFFF;
    /* die Zettelfarben der Pinnwand im Pausenhof */
    --oe-gelb: #F5EDD6;
    --oe-gruen: #E3EEE9;
    --oe-hellblau: #E3EDF2;
    --oe-rosa: #FAEDE3;
    --oe-lila: #E6E7F4;
    --oe-orange: #F7E1CF;
    --oe-schrift: 'SB Inter', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --oe-hand: 'SkooBase Hand', 'Segoe Print', 'Bradley Hand', cursive;
    --oe-ecke: 24px 24px 24px 6px;
    --oe-ecke-knopf: 14px 14px 14px 4px;
    --oe-rand: max(24px, env(safe-area-inset-left, 0px));
    --oe-rand-r: max(24px, env(safe-area-inset-right, 0px));
    color-scheme: light;
}
@media (max-width: 600px) {
    html.ph-oe { --oe-rand: max(16px, env(safe-area-inset-left, 0px)); --oe-rand-r: max(16px, env(safe-area-inset-right, 0px)); }
}

html.ph-oe .oe-innen {
    max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    padding-left: var(--oe-rand); padding-right: var(--oe-rand-r);
}
html.ph-oe .oe-hand { font-family: var(--oe-hand); font-weight: 400; line-height: 1.1; }

/* Skoo, die Marke */
html.ph-oe .oe-marke { display: block; flex-shrink: 0; }
html.ph-oe .oe-wort { font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
html.ph-oe .oe-wort span { font-weight: 400; }
/* „SkooBase“ groß im Satz (Überschrift, Knopf): dieselbe Wortmarke, Skoo 400, Base 800 - Cornelius, 26.10.2026 */
html.ph-oe h1 .oe-wort, html.ph-oe h2 .oe-wort, html.ph-oe h3 .oe-wort { letter-spacing: inherit; }

/* Die Strichsymbole: Tinte, Strich 2, versetzter Fleck in Apricot (wie das Menü der App) */
html.ph-oe .oe-ic {
    width: 28px; height: 28px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ══ 2. KNÖPFE ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
html.ph-oe .oe-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; max-width: 100%;
    padding: 13px 22px; border-radius: 16px 16px 16px 4px;
    border: 2px solid var(--oe-tinte); background: var(--oe-apricot); color: var(--oe-tinte);
    box-shadow: 0 3px 0 var(--oe-tinte);
    font-family: var(--oe-schrift); font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
    text-decoration: none; text-align: center; cursor: pointer; transition: none;
}
html.ph-oe .oe-knopf:hover { background: var(--oe-apricot-hover); color: var(--oe-tinte); text-decoration: none; }
html.ph-oe .oe-knopf:focus-visible { outline: 3px solid var(--oe-blau); outline-offset: 3px; }
/* auf dunklem Grund ein heller Ring, auf dem Schlusskasten Tinte - sonst verschwindet er dort, wo die ersten Tab-Stopps liegen */
html.ph-oe .oe-kopf .oe-knopf:focus-visible, html.ph-oe .oe-held .oe-knopf:focus-visible, html.ph-oe .oe-schutz .oe-knopf:focus-visible,
html.ph-oe .oe-preis--schule .oe-knopf:focus-visible, html.ph-oe .oe-kopf a:focus-visible, html.ph-oe .oe-fuss a:focus-visible,
html.ph-oe .oe-schutz a:focus-visible, html.ph-oe .oe-preis--schule a:focus-visible { outline: 3px solid var(--oe-fokus-dunkel); outline-offset: 3px; }
html.ph-oe .oe-schluss .oe-knopf:focus-visible, html.ph-oe .oe-schluss a:focus-visible { outline-color: var(--oe-tinte); }
html.ph-oe .oe-knopf--gross { padding: 15px 26px; font-size: 17px; }
html.ph-oe .oe-knopf--klein { padding: 9px 16px; font-size: 15px; }
/* auf Petrol: nur Rahmen */
html.ph-oe .oe-knopf--hell { background: transparent; color: var(--oe-weiss); border-color: rgba(255,255,255,0.65); box-shadow: none; }
html.ph-oe .oe-knopf--hell:hover { background: rgba(255,255,255,0.14); color: var(--oe-weiss); }
html.ph-oe .oe-knopf--tinte { background: var(--oe-tinte); color: var(--oe-weiss); box-shadow: 0 3px 0 var(--oe-petrol); }
html.ph-oe .oe-knopf--tinte:hover { background: var(--oe-tinte-hover); color: var(--oe-weiss); }
html.ph-oe .oe-knopf--weiss { background: var(--oe-weiss); }
html.ph-oe .oe-knopf--weiss:hover { background: var(--oe-minze); }
/* nur Rahmen auf hellem Grund */
html.ph-oe .oe-knopf--leer { background: transparent; box-shadow: none; }
html.ph-oe .oe-knopf--leer:hover { background: rgba(27,42,44,0.07); }

/* ══ 3. KOPF UND FUSS (Startseite statisch, Unterseiten über js/oeffentlich.js) ═══════════════════════════════════════ */
html.ph-oe .oe-kopf {
    position: sticky; top: 0; z-index: 100;
    background: var(--oe-petrol); color: var(--oe-weiss);
    font-family: var(--oe-schrift);
    border-bottom: 2px solid var(--oe-petrol-tief);
}
html.ph-oe .oe-kopf-innen {
    max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    padding: 14px var(--oe-rand-r) 14px var(--oe-rand);
    display: flex; align-items: center; gap: 12px 28px;
}
html.ph-oe .oe-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--oe-weiss); text-decoration: none; margin-right: auto; }
html.ph-oe .oe-logo .oe-wort { font-size: 23px; }
html.ph-oe .oe-logo:hover { color: var(--oe-weiss); text-decoration: none; }
html.ph-oe .oe-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 15px; font-weight: 600; }
html.ph-oe .oe-nav a { color: var(--oe-weiss); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: none; }
html.ph-oe .oe-nav a:hover { color: var(--oe-apricot); }
html.ph-oe .oe-nav a[aria-current="page"] { border-bottom-color: var(--oe-apricot); }
html.ph-oe .oe-kopf-knoepfe { display: flex; gap: 10px; align-items: center; }
@media (max-width: 860px) {
    html.ph-oe .oe-kopf-innen { flex-wrap: wrap; }
    html.ph-oe .oe-nav { order: 3; width: 100%; gap: 4px 18px; font-size: 14px; }
}
@media (max-width: 420px) {
    html.ph-oe .oe-logo .oe-wort { font-size: 20px; }
    html.ph-oe .oe-logo .oe-marke { width: 30px; height: 30px; }
    html.ph-oe .oe-kopf-knoepfe .oe-nur-breit { display: none; }
}

html.ph-oe .oe-fuss { background: var(--oe-petrol); color: var(--oe-weiss); font-family: var(--oe-schrift); margin-top: auto; }
html.ph-oe .oe-fuss-innen {
    max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    padding: 36px var(--oe-rand-r) 40px var(--oe-rand);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
}
html.ph-oe .oe-fuss-marke { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.ph-oe .oe-fuss-marke .oe-wort { font-size: 20px; }
html.ph-oe .oe-fuss-ort { font-size: 14px; color: var(--oe-auf-petrol); }
html.ph-oe .oe-fuss-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
html.ph-oe .oe-fuss-nav a { color: var(--oe-weiss); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 3px; transition: none; font-weight: 500; }
html.ph-oe .oe-fuss-nav a:hover { color: var(--oe-apricot); text-decoration-color: var(--oe-apricot); }
html.ph-oe .oe-fuss-nav a[aria-current="page"] { text-decoration-color: var(--oe-apricot); }
html.ph-oe .oe-fuss-copy { width: 100%; font-size: 13px; color: var(--oe-auf-petrol); border-top: 1px solid rgba(255,255,255,0.16); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
html.ph-oe .oe-fuss-copy a { color: var(--oe-auf-petrol); }

/* ══ 4. STARTSEITE (index.html, #landing-page) ═══════════════════════════════════════════════════════════════════ */
/* Der Rahmen bleibt, wie js/app.js ihn kennt (display wechselt flex/none) - nur Grund, Schrift und Farbe neu. */
html.ph-oe #landing-page { background: var(--oe-nebel) !important; color: var(--oe-tinte) !important; font-family: var(--oe-schrift) !important; scroll-behavior: smooth; }
html.ph-oe #landing-page .lp-alt { display: none; }
html.ph-oe #landing-page .lp-neu { display: flex; flex-direction: column; flex: 1 0 auto; }
/* in der Flex-Spalte schrumpfen Blöcke mit margin:auto sonst auf ihren Inhalt (SEK-Hinweis) */
html.ph-oe #landing-page .lp-neu > .oe-innen { width: 100%; }
@media (prefers-reduced-motion: reduce) { html.ph-oe #landing-page { scroll-behavior: auto; } }
html.ph-oe .lp-neu h1, html.ph-oe .lp-neu h2, html.ph-oe .lp-neu h3 { text-wrap: balance; }
html.ph-oe .lp-neu section[id] { scroll-margin-top: 84px; }

/* 4a Held */
html.ph-oe .oe-held { background: var(--oe-petrol); color: var(--oe-weiss); overflow: hidden; }
html.ph-oe .oe-held-innen { padding-top: 56px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 40px 56px; }
html.ph-oe .oe-held-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; container-type: inline-size; }
html.ph-oe .oe-held h1 {
    margin: 0; font-size: clamp(34px, 7vw, 70px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; color: var(--oe-weiss);
    font-size: clamp(30px, 10.5cqi, 74px); /* „Klassenverwaltung“ passt so in jede Spaltenbreite; &shy; im HTML bleibt der Rückfall */
    text-wrap: wrap; /* balance würde am &shy; trennen, obwohl das Wort passt */
}
html.ph-oe .oe-kringel { position: relative; display: inline-block; padding: 0 0.12em; white-space: nowrap; }
html.ph-oe .oe-kringel svg { position: absolute; left: -0.22em; top: -0.16em; width: calc(100% + 0.44em); height: calc(100% + 0.3em); overflow: visible; pointer-events: none; }
html.ph-oe .oe-held-unter { margin: 0; max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--oe-minze); }
html.ph-oe .oe-held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
/* Anmelden: der größte Knopf im Held, darunter Testen (weiß) und das Video (nur Rahmen) - wer ein Konto hat, sieht sofort, wo es weitergeht */
html.ph-oe .oe-knopf--anmelden { gap: 10px; min-width: min(260px, 100%); padding: 17px 40px; font-size: 20px; }
html.ph-oe .oe-knopf--anmelden svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-held-klein { margin: 0; font-size: 15px; line-height: 1.5; color: var(--oe-auf-petrol); }
html.ph-oe .oe-held-klein strong { color: var(--oe-weiss); font-weight: 700; }

html.ph-oe .oe-held-bild { position: relative; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 1 / 1; }
html.ph-oe .oe-held-kreis { position: absolute; inset: 8%; border-radius: 50%; background: var(--oe-petrol-tief); }
html.ph-oe .oe-held-kreis-strich { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.22); }
html.ph-oe .oe-held-skoo { position: absolute; left: 18%; top: 16%; width: 64%; height: auto; transform: rotate(-6deg); }
/* App-Schnipsel: aus Code gebaut, wie die Karten in der App */
html.ph-oe .oe-schnipsel {
    position: absolute; z-index: 2; box-sizing: border-box;
    background: var(--oe-weiss); color: var(--oe-tinte);
    border: 2px solid var(--oe-tinte); border-radius: 16px 16px 16px 4px; box-shadow: 0 3px 0 var(--oe-tinte);
    padding: 12px 14px; font-size: 13px; line-height: 1.3;
}
html.ph-oe .oe-schnipsel-kopf { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--oe-leise); font-size: 12px; }
html.ph-oe .oe-schnipsel-kopf .oe-ic { width: 18px; height: 18px; color: var(--oe-tinte); }
html.ph-oe .oe-schnipsel-wert { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
html.ph-oe .oe-schnipsel-wert small { font-size: 13px; font-weight: 600; color: var(--oe-leise); letter-spacing: 0; }
html.ph-oe .oe-schnipsel--da { left: -2%; bottom: 7%; width: 52%; max-width: 210px; transform: rotate(-4deg); }
html.ph-oe .oe-punkte { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 8px; }
html.ph-oe .oe-punkte i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--oe-petrol); }
html.ph-oe .oe-punkte i.weg { background: var(--oe-apricot); }
html.ph-oe .oe-schnipsel--hue { right: -3%; top: 5%; width: 50%; max-width: 200px; transform: rotate(5deg); }
html.ph-oe .oe-hue-zeile { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-weight: 600; }
html.ph-oe .oe-haken { width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px 6px 6px 2px; border: 2px solid var(--oe-tinte); background: var(--oe-weiss); display: inline-flex; align-items: center; justify-content: center; }
html.ph-oe .oe-haken.ja { background: var(--oe-apricot); }
html.ph-oe .oe-haken svg { width: 12px; height: 12px; fill: none; stroke: var(--oe-tinte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-held-notiz { position: absolute; z-index: 2; right: 2%; bottom: -1%; color: var(--oe-apricot); font-size: 27px; transform: rotate(-5deg); white-space: nowrap; }
@media (max-width: 900px) {
    html.ph-oe .oe-held-innen { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 64px; }
    html.ph-oe .oe-held-bild { max-width: 360px; }
}
@media (max-width: 420px) {
    html.ph-oe .oe-held-knoepfe .oe-knopf { flex: 1 1 100%; }
    html.ph-oe .oe-schnipsel { padding: 9px 10px; }
    html.ph-oe .oe-schnipsel-wert { font-size: 18px; }
    html.ph-oe .oe-held-notiz { font-size: 22px; }
}

/* 4b gemeinsame Abschnitte */
html.ph-oe .oe-abschnitt { padding-top: 88px; padding-bottom: 80px; }
html.ph-oe .oe-abschnitt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; margin-bottom: 14px; }
html.ph-oe .oe-h2 { margin: 0; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; max-width: 17em; color: inherit; }
html.ph-oe .oe-randnotiz { color: var(--oe-petrol); font-size: 30px; transform: rotate(-3deg); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html.ph-oe .oe-randnotiz svg { width: 44px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-einleitung { margin: 0 0 34px; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--oe-leise); }
@media (max-width: 600px) {
    html.ph-oe .oe-abschnitt { padding-top: 60px; padding-bottom: 56px; }
    html.ph-oe .oe-randnotiz { font-size: 23px; }
    html.ph-oe .oe-randnotiz svg { width: 34px; height: 24px; }
    html.ph-oe .oe-einleitung { font-size: 17px; }
}

/* Ohne Pfeil bis 400 px: mit ihm ragt „20 Bereiche, eine Anmeldung“ bei 375 px um 7 px über den Rand, und die Seite wischt seitlich */
@media (max-width: 400px) { html.ph-oe .oe-randnotiz svg { display: none; } }

/* 4c Wendekarten - die zwanzig Bereiche */
html.ph-oe .oe-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 18px; }
html.ph-oe .oe-karte {
    /* grid statt block: ein <button> zentriert seinen Inhalt sonst senkrecht, und die Karten einer Reihe stehen versetzt */
    display: grid; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit;
    font: inherit; text-align: left; cursor: pointer; perspective: 1000px; -webkit-tap-highlight-color: transparent;
}
html.ph-oe .oe-karte:focus-visible { outline: 3px solid var(--oe-blau); outline-offset: 4px; border-radius: 24px 24px 24px 6px; }
html.ph-oe .oe-karte-innen {
    display: grid; position: relative; min-height: 196px;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
html.ph-oe .oe-karte.ist-gedreht .oe-karte-innen { transform: rotateY(180deg); }
html.ph-oe .oe-karte-vorn, html.ph-oe .oe-karte-hinten {
    grid-area: 1 / 1; box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 20px 16px; border-radius: var(--oe-ecke);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
html.ph-oe .oe-karte-vorn { background: var(--oe-weiss); border: 2px solid var(--oe-kreide); }
html.ph-oe .oe-karte:hover .oe-karte-vorn { border-color: var(--oe-tinte); }
html.ph-oe .oe-karte-hinten {
    transform: rotateY(180deg); background: var(--oe-petrol); color: var(--oe-weiss);
    border: 2px solid var(--oe-tinte); box-shadow: 0 3px 0 var(--oe-tinte);
    justify-content: space-between;
}
html.ph-oe .oe-karte-kachel {
    width: 48px; height: 48px; border-radius: var(--oe-ecke-knopf); background: var(--oe-gelb);
    display: flex; align-items: center; justify-content: center; color: var(--oe-tinte); margin-bottom: 4px;
}
html.ph-oe .oe-karte:nth-child(6n+2) .oe-karte-kachel { background: var(--oe-gruen); }
html.ph-oe .oe-karte:nth-child(6n+3) .oe-karte-kachel { background: var(--oe-hellblau); }
html.ph-oe .oe-karte:nth-child(6n+4) .oe-karte-kachel { background: var(--oe-rosa); }
html.ph-oe .oe-karte:nth-child(6n+5) .oe-karte-kachel { background: var(--oe-lila); }
html.ph-oe .oe-karte:nth-child(6n+6) .oe-karte-kachel { background: var(--oe-orange); }
html.ph-oe .oe-karte-titel { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
html.ph-oe .oe-karte-unter { display: block; font-size: 15px; line-height: 1.45; color: var(--oe-leise); }
html.ph-oe .oe-karte-mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 700; color: var(--oe-petrol); }
html.ph-oe .oe-karte-mehr svg, html.ph-oe .oe-karte-zurueck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-karte-hinten-titel { display: block; font-size: 15px; font-weight: 800; color: var(--oe-apricot-hell); }
html.ph-oe .oe-karte-hinten-text { display: block; font-size: 15px; line-height: 1.5; }
html.ph-oe .oe-karte-zurueck { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; font-size: 13px; font-weight: 700; color: var(--oe-auf-petrol); }
@media (prefers-reduced-motion: reduce) {
    html.ph-oe .oe-karte-innen { transition: none; }
}
html.ph-oe .oe-karten-hinweis { margin: 18px 0 0; font-size: 14px; color: var(--oe-leise); }

/* 4d Aus Zettel-Chaos wird Ordnung (O-741). Der Tisch ist ein Container: Zettel, Etiketten und Dashboard messen in cqw und
   wachsen mit ihm wie ein Bild. Ab 640 px Breite und darunter (dieselbe Grenze in js/oeffentlich.js, zettelTisch) stehen die
   Stapel in vier Reihen und das Dashboard in Handy-Form. Ohne Skript zeigt der Tisch das fertige Dashboard. */
html.ph-oe .oe-wege-band { background: var(--oe-weiss); border-top: 2px solid var(--oe-kreide); border-bottom: 2px solid var(--oe-kreide); }
/* isolation: eigene Ebene - die z-index der Zettel (bis 48), des Dashboards (600) und der Notiz (700) gelten nur im Tisch.
   Chrome bildet sie schon wegen container-type, Safari nicht: dort lagen Zettel und Dashboard beim Scrollen über dem festen
   Kopf (z-index 100), am iPhone gesehen am 28.10.2026, im WKWebView gemessen 517 von 540 Punkten. */
html.ph-oe .oe-zd-tisch {
    position: relative; isolation: isolate; container-type: inline-size; aspect-ratio: 1100 / 640; overflow: hidden;
    background-color: var(--oe-nebel); border: 2px solid var(--oe-kreide); border-radius: var(--oe-ecke);
    background-image: radial-gradient(circle, rgba(27,42,44,0.08) 1px, transparent 1.5px); background-size: 22px 22px;
}
html.ph-oe .oe-zd-f-gelb { background-color: var(--oe-gelb); }
html.ph-oe .oe-zd-f-gruen { background-color: var(--oe-gruen); }
html.ph-oe .oe-zd-f-hellblau { background-color: var(--oe-hellblau); }
html.ph-oe .oe-zd-f-rosa { background-color: var(--oe-rosa); }
html.ph-oe .oe-zd-f-lila { background-color: var(--oe-lila); }
html.ph-oe .oe-zd-f-orange { background-color: var(--oe-orange); }
html.ph-oe .oe-zd-f-weiss { background-color: var(--oe-weiss); }
html.ph-oe .oe-zd-f-apricot { background-color: var(--oe-apricot); }

/* Zettel: außen Lage und Flug (left/top/transform), innen der Wurf (Animation) - zwei Elemente, damit sich beide nicht stören */
html.ph-oe .oe-zd-zt {
    position: absolute; width: 9.4cqw; aspect-ratio: 3 / 2;
    transition: left .72s cubic-bezier(.6,0,.25,1), top .72s cubic-bezier(.6,0,.25,1), transform .72s cubic-bezier(.6,0,.25,1), opacity .35s;
}
html.ph-oe .oe-zd-zt.zur-mitte { transition-duration: .95s, .95s, .95s, .35s; transition-timing-function: cubic-bezier(.45,0,.25,1), cubic-bezier(.45,0,.25,1), cubic-bezier(.45,0,.25,1), ease; }
html.ph-oe .oe-zd-zt.weg { opacity: 0; }
html.ph-oe .oe-zd-zt-in {
    position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
    padding: .5cqw .6cqw; border: 1.5px solid var(--oe-tinte); border-radius: 8px 8px 8px 2px; box-shadow: 0 2px 0 var(--oe-tinte);
    font-family: var(--oe-hand); font-size: 1.28cqw; line-height: 1.04; color: var(--oe-tinte);
    transition: background-color .45s;
    animation: oe-zd-wurf-1 .5s cubic-bezier(.2,.75,.3,1) backwards;
}
html.ph-oe .oe-zd-zt-in.p-liniert { background-image: repeating-linear-gradient(transparent 0, transparent 1.15cqw, rgba(43,91,97,.22) 1.15cqw, rgba(43,91,97,.22) calc(1.15cqw + 1px)); background-position: 0 .4cqw; }
html.ph-oe .oe-zd-zt-in.p-karo { background-image: linear-gradient(rgba(43,91,97,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(43,91,97,.16) 1px, transparent 1px); background-size: .8cqw .8cqw; }
html.ph-oe .oe-zd-zt-in.w2 { animation-name: oe-zd-wurf-2; }
html.ph-oe .oe-zd-zt-in.w3 { animation-name: oe-zd-wurf-3; }
html.ph-oe .oe-zd-zt-in.w4 { animation-name: oe-zd-wurf-4; }
@keyframes oe-zd-wurf-1 { from { transform: translate(-8cqw, 26cqw) rotate(-38deg) scale(1.9); opacity: 0; } 45% { opacity: 1; } to { transform: none; } }
@keyframes oe-zd-wurf-2 { from { transform: translate(10cqw, 30cqw) rotate(44deg) scale(2); opacity: 0; } 45% { opacity: 1; } to { transform: none; } }
@keyframes oe-zd-wurf-3 { from { transform: translate(-2cqw, 34cqw) rotate(18deg) scale(1.8); opacity: 0; } 45% { opacity: 1; } to { transform: none; } }
@keyframes oe-zd-wurf-4 { from { transform: translate(5cqw, 24cqw) rotate(-24deg) scale(2.1); opacity: 0; } 45% { opacity: 1; } to { transform: none; } }

/* Etiketten unter den Stapeln */
html.ph-oe .oe-zd-etikett {
    position: absolute; z-index: 5; width: 11.5cqw; transform: translate(-50%, .8cqw); opacity: 0;
    display: flex; flex-direction: column; align-items: center; gap: .35cqw; text-align: center;
    transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
html.ph-oe .oe-zd-etikett.ist-da { opacity: 1; transform: translate(-50%, 0); }
html.ph-oe .oe-zd-etikett b { font-size: 1.12cqw; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
html.ph-oe .oe-zd-kachel {
    width: 2.7cqw; height: 2.7cqw; box-sizing: border-box; flex-shrink: 0; border: 1.5px solid var(--oe-tinte);
    border-radius: 9px 9px 9px 2px; display: flex; align-items: center; justify-content: center;
}
html.ph-oe .oe-zd-kachel svg, html.ph-oe .oe-zd-menu svg { fill: none; stroke: var(--oe-tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-zd-kachel svg { width: 1.75cqw; height: 1.75cqw; }

/* Stift, Radierer, Klammer: liegen schief und legen sich am Ende gerade */
html.ph-oe .oe-zd-ding {
    position: absolute; z-index: 3; fill: none; stroke: var(--oe-tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: left 1s cubic-bezier(.6,0,.25,1), top 1s cubic-bezier(.6,0,.25,1), transform 1s cubic-bezier(.6,0,.25,1);
}
html.ph-oe .oe-zd-ding svg { display: block; width: 100%; height: auto; }
html.ph-oe .oe-zd-ding .fleck { fill: var(--oe-fleck); stroke: none; }
html.ph-oe .oe-zd-ding--stift { width: 15cqw; }
html.ph-oe .oe-zd-ding--radierer { width: 4.8cqw; }
html.ph-oe .oe-zd-ding--klammer { width: 4.4cqw; }

/* Das Dashboard, das aus dem Stapel wird - nachgebaut, die Namen der Kinder sind erfunden */
html.ph-oe .oe-zd-dash {
    position: absolute; left: 50%; top: 46%; z-index: 600; width: 66cqw; height: 37cqw; box-sizing: border-box;
    display: grid; grid-template-columns: 13.5cqw minmax(0, 1fr); overflow: hidden;
    background: var(--oe-weiss); border: 2px solid var(--oe-tinte); border-radius: 2.2cqw 2.2cqw 2.2cqw .6cqw;
    box-shadow: 0 3px 0 var(--oe-tinte), 0 3cqw 5cqw -2cqw rgba(27,42,44,.35);
    transform: translate(-50%, -50%) scale(.14) rotate(-3deg); opacity: 0; pointer-events: none;
    transition: transform .85s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
html.ph-oe .oe-zd-dash.ist-da { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
html.ph-oe .oe-zd-seite { background: var(--oe-nebel); border-right: 2px solid var(--oe-kreide); padding: 1.4cqw 1cqw; display: flex; flex-direction: column; gap: .45cqw; }
html.ph-oe .oe-zd-logo { display: flex; align-items: center; gap: .6cqw; margin: 0 0 1cqw .3cqw; font-size: 1.45cqw; }
html.ph-oe .oe-zd-logo svg { width: 2.6cqw; height: 2.6cqw; flex-shrink: 0; }
html.ph-oe .oe-zd-kopf-schmal { display: none; }
html.ph-oe .oe-zd-menu { display: flex; align-items: center; gap: .6cqw; padding: .5cqw .6cqw; border-radius: .9cqw .9cqw .9cqw .3cqw; font-size: 1cqw; font-weight: 600; border: 1.5px solid transparent; }
html.ph-oe .oe-zd-menu svg { width: 1.45cqw; height: 1.45cqw; flex-shrink: 0; }
html.ph-oe .oe-zd-menu.an { background: var(--oe-apricot); border-color: var(--oe-tinte); font-weight: 800; }
html.ph-oe .oe-zd-haupt { padding: 1.8cqw 2cqw; display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; }
html.ph-oe .oe-zd-gruss { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
html.ph-oe .oe-zd-gruss b { font-size: 2.5cqw; font-weight: 800; letter-spacing: -0.03em; }
html.ph-oe .oe-zd-gruss span { font-size: 1.1cqw; color: var(--oe-leise); font-weight: 600; }
html.ph-oe .oe-zd-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1cqw; }
html.ph-oe .oe-zd-w {
    background: var(--oe-weiss); border: 2px solid var(--oe-kreide); border-radius: 1.4cqw 1.4cqw 1.4cqw .4cqw;
    padding: 1cqw 1.1cqw; display: flex; flex-direction: column; gap: .55cqw; min-width: 0; min-height: 12.4cqw; box-sizing: border-box;
}
html.ph-oe .oe-zd-tisch.laeuft .oe-zd-dash.ist-da .oe-zd-w { animation: oe-zd-auf .45s cubic-bezier(.2,.8,.2,1) backwards; }
html.ph-oe .oe-zd-w:nth-child(1) { animation-delay: .45s; }
html.ph-oe .oe-zd-w:nth-child(2) { animation-delay: .55s; }
html.ph-oe .oe-zd-w:nth-child(3) { animation-delay: .65s; }
html.ph-oe .oe-zd-w:nth-child(4) { animation-delay: .75s; }
html.ph-oe .oe-zd-w:nth-child(5) { animation-delay: .85s; }
html.ph-oe .oe-zd-w:nth-child(6) { animation-delay: .95s; }
@keyframes oe-zd-auf { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
html.ph-oe .oe-zd-w-kopf { display: flex; align-items: center; gap: .6cqw; font-size: 1.1cqw; font-weight: 800; }
html.ph-oe .oe-zd-w-kopf .oe-zd-kachel { width: 2.1cqw; height: 2.1cqw; border-radius: 7px 7px 7px 2px; }
html.ph-oe .oe-zd-w-kopf .oe-zd-kachel svg { width: 1.35cqw; height: 1.35cqw; }
html.ph-oe .oe-zd-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6cqw; font-size: 1.02cqw; line-height: 1.3; background: var(--oe-nebel); border-radius: .6cqw .6cqw .6cqw .2cqw; padding: .35cqw .6cqw; }
html.ph-oe .oe-zd-zeile small { color: var(--oe-leise); font-size: .9cqw; white-space: nowrap; }
html.ph-oe .oe-zd-zeile.hell { background: var(--oe-orange); }
/* Kachel „Anwesenheit“ wie im neuen Look der App (seit e6c1792): oben „da 23 von 24“, darunter wer fehlt, rosa wie dort */
html.ph-oe .oe-zd-anw { font-size: 1.02cqw; line-height: 1.1; color: var(--oe-leise); font-weight: 700; }
html.ph-oe .oe-zd-anw b { font-size: 1.9cqw; font-weight: 800; color: var(--oe-tinte); letter-spacing: -0.02em; }
html.ph-oe .oe-zd-zeile.abw { background: var(--oe-rosa); }
html.ph-oe .oe-zd-balken { height: .7cqw; border-radius: 99px; background: var(--oe-kreide); overflow: hidden; }
html.ph-oe .oe-zd-balken i { display: block; height: 100%; width: 78%; background: var(--oe-petrol); border-radius: 99px; }
html.ph-oe .oe-zd-gross { font-size: 2cqw; font-weight: 800; letter-spacing: -0.02em; }

/* Randnotiz am Ende, rechts neben dem Dashboard */
html.ph-oe .oe-zd-notiz {
    position: absolute; z-index: 700; left: 84.8cqw; top: 14cqw; width: 13.5cqw; color: var(--oe-petrol); font-size: 2.3cqw;
    transform: rotate(-5deg); opacity: 0; transition: opacity .5s; display: flex; flex-direction: column; align-items: flex-start;
}
html.ph-oe .oe-zd-notiz svg { width: 5cqw; height: 4cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -1cqw; }
html.ph-oe .oe-zd-notiz.ist-da { opacity: 1; }

html.ph-oe .oe-zd-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 18px; }
html.ph-oe .oe-zd-fuss p { margin: 0; font-size: 15px; color: var(--oe-leise); }
html.ph-oe .oe-zd-fuss .oe-knopf[hidden] { display: none; }

@media (max-width: 640px) {
    html.ph-oe .oe-zd-tisch { aspect-ratio: 340 / 600; }
    html.ph-oe .oe-zd-zt { width: 20cqw; }
    html.ph-oe .oe-zd-zt-in { font-size: 2.7cqw; padding: 1cqw 1.2cqw; border-width: 1px; box-shadow: 0 1.5px 0 var(--oe-tinte); border-radius: 6px 6px 6px 2px; }
    html.ph-oe .oe-zd-etikett { width: 23cqw; gap: .7cqw; }
    html.ph-oe .oe-zd-etikett .oe-zd-kachel { width: 5.6cqw; height: 5.6cqw; border-radius: 7px 7px 7px 2px; }
    html.ph-oe .oe-zd-etikett .oe-zd-kachel svg { width: 3.6cqw; height: 3.6cqw; }
    html.ph-oe .oe-zd-etikett b { font-size: 2.55cqw; }
    html.ph-oe .oe-zd-ding { display: none; }
    html.ph-oe .oe-zd-dash { width: 88cqw; height: 114cqw; grid-template-columns: minmax(0, 1fr); border-radius: 5cqw 5cqw 5cqw 1.4cqw; }
    html.ph-oe .oe-zd-seite { display: none; }
    html.ph-oe .oe-zd-kopf-schmal { display: flex; font-size: 3.6cqw; gap: 1.6cqw; margin: 0; }
    html.ph-oe .oe-zd-kopf-schmal svg { width: 6.4cqw; height: 6.4cqw; }
    html.ph-oe .oe-zd-haupt { padding: 4.5cqw 4cqw; gap: 3cqw; }
    html.ph-oe .oe-zd-gruss b { font-size: 6cqw; }
    html.ph-oe .oe-zd-gruss span { font-size: 2.8cqw; }
    html.ph-oe .oe-zd-raster { grid-template-columns: minmax(0, 1fr); gap: 2.6cqw; }
    html.ph-oe .oe-zd-w { padding: 2.6cqw 3cqw; gap: 1.5cqw; border-radius: 3.6cqw 3.6cqw 3.6cqw 1cqw; min-height: 0; }
    html.ph-oe .oe-zd-w:nth-child(n+4) { display: none; }
    html.ph-oe .oe-zd-w-kopf { font-size: 3cqw; gap: 1.6cqw; }
    html.ph-oe .oe-zd-w-kopf .oe-zd-kachel { width: 5.6cqw; height: 5.6cqw; }
    html.ph-oe .oe-zd-w-kopf .oe-zd-kachel svg { width: 3.6cqw; height: 3.6cqw; }
    html.ph-oe .oe-zd-zeile { font-size: 2.8cqw; padding: 1cqw 1.6cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw .5cqw; }
    html.ph-oe .oe-zd-zeile small { font-size: 2.4cqw; }
    html.ph-oe .oe-zd-balken { height: 1.8cqw; }
    html.ph-oe .oe-zd-anw { font-size: 2.8cqw; }
    html.ph-oe .oe-zd-anw b { font-size: 5cqw; }
    html.ph-oe .oe-zd-notiz { display: none; }
}
/* Ohne Container-Maße (Safari vor 16) stimmen die Größen nicht - dann bleibt der Abschnitt bei Überschrift und Text */
@supports not (width: 1cqw) {
    html.ph-oe .oe-zd-tisch, html.ph-oe .oe-zd-fuss { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.ph-oe .oe-zd-zt, html.ph-oe .oe-zd-ding, html.ph-oe .oe-zd-etikett, html.ph-oe .oe-zd-dash, html.ph-oe .oe-zd-notiz { transition: none; }
    html.ph-oe .oe-zd-zt-in, html.ph-oe .oe-zd-tisch.laeuft .oe-zd-dash.ist-da .oe-zd-w { animation: none; }
}

/* 4e Datenschutz */
html.ph-oe .oe-schutz { background: var(--oe-tinte); color: var(--oe-weiss); }
html.ph-oe .oe-schutz-innen { padding-top: 76px; padding-bottom: 76px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px 48px; align-items: center; }
html.ph-oe .oe-schutz-schloss { width: 132px; height: 132px; fill: none; stroke: var(--oe-weiss); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.ph-oe .oe-schutz-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html.ph-oe .oe-schutz .oe-h2 { color: var(--oe-weiss); max-width: 18em; }
html.ph-oe .oe-schutz .oe-h2 em { font-style: normal; color: var(--oe-apricot); }
html.ph-oe .oe-schutz p { margin: 0; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--oe-kreide); }
html.ph-oe .oe-schutz p strong { color: var(--oe-weiss); }
html.ph-oe .oe-marken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
html.ph-oe .oe-marken li { border: 2px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--oe-weiss); }
html.ph-oe .oe-schutz-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 6px; }
html.ph-oe .oe-schutz-knoepfe a:not(.oe-knopf) { color: var(--oe-kreide); font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
html.ph-oe .oe-schutz-knoepfe a:not(.oe-knopf):hover { color: var(--oe-apricot); }
@media (max-width: 700px) {
    html.ph-oe .oe-schutz-innen { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 56px; }
    html.ph-oe .oe-schutz-schloss { width: 84px; height: 84px; }
    html.ph-oe .oe-schutz p { font-size: 17px; }
}

/* 4f Preise */
html.ph-oe .oe-preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
html.ph-oe .oe-preis {
    position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    background: var(--oe-weiss); border: 2px solid var(--oe-kreide); border-radius: var(--oe-ecke); padding: 26px 24px 24px;
}
html.ph-oe .oe-preis--stark { border-color: var(--oe-tinte); box-shadow: 0 3px 0 var(--oe-tinte); }
html.ph-oe .oe-preis--schule { background: var(--oe-petrol); color: var(--oe-weiss); border-color: var(--oe-tinte); box-shadow: 0 3px 0 var(--oe-tinte); }
html.ph-oe .oe-preis-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
html.ph-oe .oe-preis-betrag { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html.ph-oe .oe-preis-betrag b { font-size: 50px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
html.ph-oe .oe-preis-betrag span { font-size: 16px; font-weight: 600; color: var(--oe-leise); }
html.ph-oe .oe-preis--schule .oe-preis-betrag span { color: var(--oe-auf-petrol); }
html.ph-oe .oe-preis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.4; }
html.ph-oe .oe-preis li { display: flex; gap: 10px; align-items: flex-start; }
html.ph-oe .oe-preis li::before {
    content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px 6px 6px 2px;
    background: var(--oe-minze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A2C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html.ph-oe .oe-preis--schule li::before { background-color: var(--oe-apricot); }
html.ph-oe .oe-preis-fuss { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
html.ph-oe .oe-preis-fuss a:not(.oe-knopf) { font-size: 15px; font-weight: 700; color: var(--oe-petrol); text-underline-offset: 3px; }
html.ph-oe .oe-preis--schule .oe-preis-fuss a:not(.oe-knopf) { color: var(--oe-weiss); }
html.ph-oe .oe-preis-fuss a:not(.oe-knopf):hover { color: var(--oe-tinte); }
html.ph-oe .oe-preis--schule .oe-preis-fuss a:not(.oe-knopf):hover { color: var(--oe-apricot); }
html.ph-oe .oe-preis-notiz { position: absolute; top: -20px; right: 16px; color: var(--oe-petrol); font-size: 25px; transform: rotate(4deg); background: var(--oe-nebel); padding: 0 6px; }
html.ph-oe .oe-preis-hinweis { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--oe-leise); max-width: 52em; }
html.ph-oe .oe-preis-hinweis a { color: var(--oe-petrol); font-weight: 700; }
@media (max-width: 900px) {
    html.ph-oe .oe-preise { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

/* 4g Stimmen aus dem Kollegium - das Raster richtet sich nach der Zahl (js/oeffentlich.js, stimmen()): bis vier zwei Spalten,
   fünf und sechs drei (--drei; bei fünf steht die zweite Reihe mittig statt links neben einer Lücke - deshalb sechs halbe Spalten),
   ab sieben eine Reihe zum Wischen mit zwei Pfeilknöpfen (--reihe), ohne automatisches Weiterlaufen */
html.ph-oe .oe-stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding-top: 10px; }
@media (min-width: 901px) {
    html.ph-oe .oe-stimmen--drei { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html.ph-oe .oe-stimmen--drei > .oe-stimme { grid-column: span 2; }
    html.ph-oe .oe-stimmen--drei > .oe-stimme:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
html.ph-oe .oe-stimme {
    position: relative; margin: 0; padding: 30px 24px 22px; background: var(--oe-gelb);
    border-radius: 4px 4px 4px 4px; box-shadow: 0 2px 0 rgba(27,42,44,0.12), 0 10px 22px -12px rgba(27,42,44,0.35);
    display: flex; flex-direction: column; gap: 16px; transform: rotate(-1.2deg);
}
html.ph-oe .oe-stimme:nth-child(4n+2) { background: var(--oe-hellblau); transform: rotate(0.8deg); }
html.ph-oe .oe-stimme:nth-child(4n+3) { background: var(--oe-rosa); transform: rotate(-0.5deg); }
html.ph-oe .oe-stimme:nth-child(4n) { background: var(--oe-gruen); transform: rotate(1deg); }
/* Die Reihe: overflow schneidet ab, deshalb Platz für Klebestreifen (11 px über der Karte), Drehung und Schatten; der negative Rand
   hält die Karten trotzdem bündig mit der Überschrift. Rollbalken weg - weiter geht es mit Wischen, Pfeilknöpfen oder Pfeiltasten. */
html.ph-oe .oe-stimmen--reihe {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px;
    padding: 22px 8px 26px; margin: -12px -8px 0; scrollbar-width: none;
}
html.ph-oe .oe-stimmen--reihe::-webkit-scrollbar { display: none; }
html.ph-oe .oe-stimmen--reihe:focus-visible { outline: 3px solid var(--oe-blau); outline-offset: -3px; border-radius: 8px; }
html.ph-oe .oe-stimmen--reihe > .oe-stimme { flex: 0 0 calc((100% - 52px) / 3.25); scroll-snap-align: start; }
html.ph-oe .oe-stimmen-pfeile { display: flex; gap: 10px; }
html.ph-oe .oe-pfeil {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    border: 2px solid var(--oe-tinte); border-radius: 50%; background: var(--oe-weiss); color: var(--oe-tinte);
}
html.ph-oe .oe-pfeil:hover:not(:disabled) { background: var(--oe-nebel); }
html.ph-oe .oe-pfeil:focus-visible { outline: 3px solid var(--oe-blau); outline-offset: 3px; }
html.ph-oe .oe-pfeil:disabled { opacity: 0.35; cursor: default; }
html.ph-oe .oe-stimme::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: rgba(232,165,114,0.55); transform: rotate(-3deg); }
html.ph-oe .oe-stimme blockquote { margin: 0; font-size: 17px; line-height: 1.55; }
/* Jede Stimme in einer eigenen Schrift, reihum Rosa 1, Druckschrift, Hand (Cornelius, 29.10.2026 - wie auf dem Stimmen-Bogen
   der Kampagne). Die Handschriften sind kleiner im Bild als Inter, daher größer gesetzt. SkooBase Hand hat keine „…" - die
   kommen aus der Druckschrift, nicht aus Inter. */
html.ph-oe .oe-stimme:nth-child(3n+1) blockquote { font-family: 'SkooBase Rosa 1', 'SB Inter', sans-serif; font-size: 21px; line-height: 1.36; }
html.ph-oe .oe-stimme:nth-child(3n+2) blockquote { font-family: 'SkooBase Druckschrift', 'SB Inter', sans-serif; font-size: 21px; line-height: 1.36; }
html.ph-oe .oe-stimme:nth-child(3n) blockquote { font-family: 'SkooBase Hand', 'SkooBase Druckschrift', 'SB Inter', sans-serif; font-size: 21px; line-height: 1.36; }
html.ph-oe .oe-stimme figcaption { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--oe-leise); }
html.ph-oe .oe-stimme[data-platzhalter] blockquote { color: var(--oe-leise); font-style: italic; }
@media (max-width: 900px) {
    html.ph-oe .oe-stimmen { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    html.ph-oe .oe-stimmen--reihe { max-width: none; }
    html.ph-oe .oe-stimmen--reihe > .oe-stimme { flex-basis: 84%; }
}

/* 4h SEK-Hinweis und Schluss */
html.ph-oe .oe-sek {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
    background: var(--oe-weiss); border: 2px solid var(--oe-kreide); border-radius: var(--oe-ecke); padding: 22px 26px;
}
html.ph-oe .oe-sek p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 44em; }
html.ph-oe .oe-sek p b { font-weight: 800; }
html.ph-oe .oe-sek .oe-knopf { background: var(--oe-kalypso); color: var(--oe-weiss); box-shadow: 0 3px 0 var(--oe-tinte); }
html.ph-oe .oe-sek .oe-knopf:hover { background: var(--oe-kalypso-hover); color: var(--oe-weiss); }

html.ph-oe .oe-schluss {
    position: relative; overflow: hidden;
    background: var(--oe-apricot); border: 2px solid var(--oe-tinte); border-radius: 32px 32px 32px 8px; box-shadow: 0 3px 0 var(--oe-tinte);
    padding: 46px clamp(22px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 36px;
}
html.ph-oe .oe-schluss-text { display: flex; flex-direction: column; gap: 10px; flex: 1 1 420px; min-width: 0; }
html.ph-oe .oe-schluss .oe-h2 { color: var(--oe-tinte); }
html.ph-oe .oe-schluss p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--oe-tinte); max-width: 34em; }
html.ph-oe .oe-schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html.ph-oe .oe-schluss-post { width: 100%; font-size: 15px; color: var(--oe-tinte); }
html.ph-oe .oe-schluss-post a { color: var(--oe-tinte); font-weight: 700; text-underline-offset: 3px; }
html.ph-oe .oe-schluss-post a:hover { color: var(--oe-petrol-tief); }

/* ══ 5. ANMELDUNG (#login-overlay) ═══════════════════════════════════════════════════════════════════════════════ */
/* Wer einmal Dark Mode gewählt hatte, bringt body.theme-dark schon vor dem Login mit (Theme-Skript in index.html) - ohne
   diese Werte stünde in der Registrierung helle Schrift auf der weißen Karte (Karl, a18ff18). Eine Ebene unter body
   gesetzt, schlagen sie die Werte des Looks; alle Kinder erben Nordic. */
html.ph-oe #login-overlay, html.ph-oe #register-overlay {
    --bg-body: #F0F4F4; --bg-card: #FFFFFF; --bg-hover: #E8F0EE; --bg-sidebar: #2B5B61; --sidebar-text: #FFFFFF;
    --text-main: #1B2A2C; --text-muted: #5A7174; --border-color: #DDE5E5; --accent-main: #2B5B61;
    --danger: #e74c3c; --danger-fg: #A8453D; --success: #27ae60;
    color-scheme: light; color: var(--oe-tinte);
}
/* Grund in Petrol mit dem dunklen Kreis und dem gestrichelten Ring wie im Held der Startseite (Cornelius, 29.10.2026: „so viel
   weiß ... vllt ganz petrol"). Die Kreise liegen als ::before/::after hinter der Karte - absolut, sonst wären sie Flex-Kinder. */
html.ph-oe #login-overlay {
    background: var(--oe-petrol);
    font-family: var(--oe-schrift);
    overflow-y: auto; box-sizing: border-box;
    padding: 64px var(--oe-rand-r) 32px var(--oe-rand);
    align-items: safe center;
}
html.ph-oe #login-overlay::before, html.ph-oe #login-overlay::after {
    /* top: + 16px - die Karte sitzt so tief, weil das Overlay oben 64 px und unten 32 px Rand hat; so sind Kreis und Karte mittig */
    content: ""; position: fixed; left: 50%; top: calc(50% + 16px); border-radius: 50%; pointer-events: none; z-index: 0;
}
/* Der Kreis fasst die ganze Karte samt Ecken (420 x bis rund 520 px, Diagonale ~670 px) mit Luft - die Karte bleibt, wie sie ist
   (Cornelius, 29.10.2026: „nicht genau in den kreis passt … mach den kreis größer“). Am Handy ist die Karte breiter als jeder Kreis. */
html.ph-oe #login-overlay::before { width: min(780px, 130vw); height: min(780px, 130vw); margin: calc(min(780px, 130vw) / -2) 0 0 calc(min(780px, 130vw) / -2); background: var(--oe-petrol-tief); }
html.ph-oe #login-overlay::after { width: min(960px, 160vw); height: min(960px, 160vw); margin: calc(min(960px, 160vw) / -2) 0 0 calc(min(960px, 160vw) / -2); border: 2px dashed rgba(255,255,255,0.18); }
/* Am Handy ist die Karte fast so breit wie der Bildschirm - der Kreis wächst mit, damit auch dort die Ecken drin liegen */
@media (max-width: 560px) {
    html.ph-oe #login-overlay::before { width: 178vw; height: 178vw; margin: -89vw 0 0 -89vw; }
    html.ph-oe #login-overlay::after { width: 220vw; height: 220vw; margin: -110vw 0 0 -110vw; }
}
html.ph-oe #login-overlay .oe-login-zurueck { z-index: 2; }
html.ph-oe #login-overlay .login-box {
    position: relative; z-index: 1; max-width: 420px; padding: 0; overflow: hidden; text-align: center;
    background: var(--oe-weiss); color: var(--oe-tinte);
    border: 2px solid var(--oe-tinte); border-radius: 30px 30px 30px 8px; box-shadow: 0 3px 0 var(--oe-tinte);
}
html.ph-oe #login-overlay .logo-container { display: none !important; }
html.ph-oe #login-overlay .oe-login-kopf {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--oe-petrol); color: var(--oe-weiss); padding: 36px 20px 30px; overflow: hidden;
}
html.ph-oe .oe-login-kreis { position: absolute; width: 250px; height: 250px; left: 50%; top: 50%; margin: -125px 0 0 -125px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.22); }
html.ph-oe .oe-login-skoo { position: relative; width: 104px; height: 104px; transform: rotate(-6deg); }
html.ph-oe .oe-login-kopf .oe-wort { position: relative; font-size: 34px; }
html.ph-oe .oe-login-kopf .oe-hand { position: relative; font-size: 25px; color: var(--oe-apricot); }
html.ph-oe #login-overlay form { padding: 26px 26px 26px; margin: 0; }
html.ph-oe #login-overlay .login-box input {
    font-family: var(--oe-schrift); font-size: 16px; color: var(--oe-tinte);
    padding: 14px 15px; margin-bottom: 14px;
    background: var(--oe-nebel); border: 2px solid var(--oe-kreide); border-radius: var(--oe-ecke-knopf); transition: none;
}
html.ph-oe #login-overlay .login-box input::placeholder { color: var(--oe-leise); }
html.ph-oe #login-overlay .login-box input:focus { border-color: var(--oe-petrol); background: var(--oe-weiss); }
html.ph-oe #login-overlay .login-box button[type="submit"] {
    background: var(--oe-apricot) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important;
    border-radius: 16px 16px 16px 4px; box-shadow: 0 3px 0 var(--oe-tinte);
    font-family: var(--oe-schrift); font-size: 17px; font-weight: 800; padding: 14px; transition: none; filter: none;
}
html.ph-oe #login-overlay .login-box button[type="submit"]:hover { background: var(--oe-apricot-hover) !important; }
html.ph-oe #login-overlay .login-box .btn-gray {
    background: var(--oe-weiss) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-kreide) !important;
    border-radius: 16px 16px 16px 4px; box-shadow: none; font-family: var(--oe-schrift); font-size: 16px; font-weight: 700; padding: 12px; transition: none;
}
html.ph-oe #login-overlay .login-box .btn-gray:hover { border-color: var(--oe-tinte) !important; background: var(--oe-nebel) !important; }
html.ph-oe #login-overlay form a { color: var(--oe-petrol) !important; font-weight: 700; font-size: 14px !important; opacity: 1 !important; }
html.ph-oe #login-overlay form a:hover { color: var(--oe-tinte) !important; text-decoration: underline !important; }
html.ph-oe #login-overlay #login-step-2 > p:first-child { color: var(--oe-leise) !important; font-size: 14px !important; }
html.ph-oe #login-overlay #security-word-display {
    display: inline-block; margin: 6px auto 18px !important; padding: 8px 18px; border-radius: 14px 14px 14px 4px;
    background: var(--oe-minze); border: 2px solid var(--oe-kreide); color: var(--oe-petrol) !important; font-size: 1.5rem !important;
}
html.ph-oe #login-overlay #login-step-3 > div:first-child > div { background: var(--oe-minze) !important; border: 2px solid var(--oe-kreide); }
html.ph-oe #login-overlay #login-step-3 > div:first-child > div i { color: var(--oe-petrol) !important; }
html.ph-oe #login-overlay #login-step-3 p { color: var(--oe-tinte) !important; }
html.ph-oe #login-overlay #login-step-3 p + p { color: var(--oe-leise) !important; }
html.ph-oe .oe-login-zurueck {
    position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: var(--oe-rand);
    display: inline-flex !important; align-items: center; gap: 8px;
    font-family: var(--oe-schrift); font-size: 15px; font-weight: 700; color: var(--oe-petrol); text-decoration: none;
    padding: 8px 14px; border-radius: 14px 14px 14px 4px; border: 2px solid var(--oe-kreide); background: var(--oe-weiss);
}
html.ph-oe .oe-login-zurueck:hover { border-color: var(--oe-tinte); color: var(--oe-tinte); }
html.ph-oe .oe-login-zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-height: 720px) {
    html.ph-oe #login-overlay .oe-login-kopf { flex-direction: row; justify-content: center; padding: 18px 20px; gap: 12px; }
    html.ph-oe .oe-login-kreis, html.ph-oe .oe-login-kopf .oe-hand { display: none; }
    html.ph-oe .oe-login-skoo { width: 54px; height: 54px; }
    html.ph-oe .oe-login-kopf .oe-wort { font-size: 28px; }
}

/* ══ 6. REGISTRIERUNG (#register-overlay) - alles inline gesetzt, darum !important ═══════════════════════════════════ */
html.ph-oe #register-overlay { background: rgba(27,42,44,0.55) !important; font-family: var(--oe-schrift); }
html.ph-oe #register-overlay > div {
    background: var(--oe-weiss) !important; color: var(--oe-tinte);
    border: 2px solid var(--oe-tinte) !important; border-radius: 30px 30px 30px 8px !important; box-shadow: 0 3px 0 var(--oe-tinte) !important;
}
html.ph-oe #register-overlay > div > div:nth-of-type(1) > svg:not(.oe-reg-skoo) { display: none !important; }
html.ph-oe #register-overlay .oe-reg-skoo { display: block !important; width: 52px; height: 52px; margin: 0 auto; transform: rotate(-6deg); }
html.ph-oe #register-overlay > div > div:nth-of-type(1) > div { font-size: 1.5rem !important; letter-spacing: -0.03em; }
html.ph-oe #reg-dot-1, html.ph-oe #reg-dot-2, html.ph-oe #reg-dot-3 { border: 2px solid var(--oe-tinte); box-sizing: border-box; width: 12px !important; height: 12px !important; transition: none !important; }
html.ph-oe #register-overlay h3 { font-size: 1.35rem !important; font-weight: 800; letter-spacing: -0.02em; color: var(--oe-tinte) !important; }
html.ph-oe #register-overlay h3 i { color: var(--oe-petrol) !important; }
html.ph-oe #register-overlay label[style*="uppercase"] {
    text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--oe-tinte) !important;
}
html.ph-oe #register-overlay label i { color: var(--oe-petrol) !important; }
html.ph-oe #register-overlay input[type="text"]:not(#reg-hp), html.ph-oe #register-overlay input[type="email"] {
    background: var(--oe-nebel) !important; border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke-knopf) !important;
    color: var(--oe-tinte) !important; font-family: var(--oe-schrift) !important; font-size: 16px !important; transition: none !important;
}
html.ph-oe #register-overlay input[type="text"]:focus, html.ph-oe #register-overlay input[type="email"]:focus { border-color: var(--oe-petrol) !important; background: var(--oe-weiss) !important; }
html.ph-oe #register-overlay #reg-code { font-size: 2rem !important; letter-spacing: 12px !important; }
html.ph-oe #register-overlay input[type="checkbox"] { accent-color: var(--oe-petrol) !important; }
html.ph-oe #register-overlay label a { color: var(--oe-petrol) !important; font-weight: 700; }
html.ph-oe #btn-reg-submit, html.ph-oe #btn-reg-verify {
    background: var(--oe-apricot) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important;
    border-radius: 16px 16px 16px 4px !important; box-shadow: 0 3px 0 var(--oe-tinte) !important; font-weight: 800 !important; transition: none !important;
}
html.ph-oe #btn-reg-submit:hover, html.ph-oe #btn-reg-verify:hover { background: var(--oe-apricot-hover) !important; }
html.ph-oe #reg-phase-3 > button {
    background: var(--oe-weiss) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important;
    border-radius: 16px 16px 16px 4px !important; box-shadow: 0 3px 0 var(--oe-tinte) !important; font-weight: 800 !important;
}
html.ph-oe #reg-phase-3 > button:hover { background: var(--oe-minze) !important; }
html.ph-oe #register-overlay > div > button:first-child { color: var(--oe-tinte) !important; }

/* ══ 7. UNTERSEITEN (<html data-oe-huelle>) ═════════════════════════════════════════════════════════════════════════ */
/* Grund, Schrift, Rahmen. Die Seiten behalten ihren Inhalt Wort für Wort - Rechtstexte sind Cornelius' Sache. */
html.ph-oe[data-oe-huelle] {
    --bg-body: #F0F4F4; --bg-card: #FFFFFF; --text-main: #1B2A2C; --text-muted: #5A7174; --border-color: #DDE5E5;
    --accent-main: #2B5B61; --btn-blue: #2B5B61; --btn-blue-hover: #1A4449;
    background: var(--oe-nebel);
}
html.ph-oe[data-oe-huelle] body {
    display: flex !important; flex-direction: column; min-height: 100vh; min-height: 100dvh;
    margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; align-items: stretch !important;
    background: var(--oe-nebel) !important; color: var(--oe-tinte) !important;
    font-family: var(--oe-schrift) !important; font-size: 17px; line-height: 1.65;
}
/* body ist hier eine Flex-Spalte: ohne min-width:0 wächst ein Block mit breitem Inhalt (Tabelle) über den Bildschirm */
html.ph-oe[data-oe-huelle] body > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* margin:auto hebt das Strecken auf - die Blöcke nehmen sonst die Breite ihres breitesten Inhalts */
html.ph-oe[data-oe-huelle] .page-wrap, html.ph-oe[data-oe-huelle] .main { width: 100%; }
html.ph-oe[data-oe-huelle] .step-body, html.ph-oe[data-oe-huelle] .hb-section-header > * { min-width: 0; }
/* der eigene Rahmen der Seiten weicht dem gemeinsamen Kopf und Fuß */
html.ph-oe[data-oe-huelle] .back-btn,
html.ph-oe[data-oe-huelle] .copyright-footer,
html.ph-oe[data-oe-huelle] .page-footer,
html.ph-oe[data-oe-huelle] .hb-footer,
html.ph-oe[data-oe-huelle] .hero-logo,
html.ph-oe[data-oe-huelle] .logo-line { display: none !important; }

/* das Blatt: eine Karte wie in der App */
html.ph-oe[data-oe-huelle] .legal-container,
html.ph-oe[data-oe-huelle] .faq-container,
html.ph-oe[data-oe-huelle] .container {
    box-sizing: border-box; width: calc(100% - 32px); max-width: 880px; margin: 48px auto 72px !important;
    background: var(--oe-weiss) !important; border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important;
    box-shadow: none !important; padding: clamp(22px, 5vw, 52px) !important; line-height: 1.65;
}
html.ph-oe[data-oe-huelle] .legal-header,
html.ph-oe[data-oe-huelle] .faq-header,
html.ph-oe[data-oe-huelle="videos"] .page-header,
html.ph-oe[data-oe-huelle] .hb-header {
    display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--oe-kreide) !important;
    padding-bottom: 20px !important; margin-bottom: 28px !important; background: none !important; color: var(--oe-tinte) !important; text-align: left;
}
html.ph-oe[data-oe-huelle] .legal-header i,
html.ph-oe[data-oe-huelle] .faq-header i,
html.ph-oe[data-oe-huelle="videos"] .page-header > i,
html.ph-oe[data-oe-huelle] .hb-header > i {
    flex-shrink: 0; width: 56px; height: 56px; display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 18px 18px 18px 5px; background: var(--oe-gelb); color: var(--oe-tinte) !important; font-size: 1.5rem !important;
    box-shadow: inset 0 0 0 2px var(--oe-kreide);
}
html.ph-oe[data-oe-huelle] h1 { font-family: var(--oe-schrift); font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.1; color: var(--oe-tinte) !important; text-wrap: balance; }
html.ph-oe[data-oe-huelle] .legal-header h1,
html.ph-oe[data-oe-huelle] .faq-header h1,
html.ph-oe[data-oe-huelle="videos"] .page-header h1,
html.ph-oe[data-oe-huelle] .hb-header h1 { font-size: clamp(28px, 4.4vw, 42px) !important; margin: 0 !important; }
/* lange Wörter („Datenschutzerklärung“, Adressen) dürfen das Blatt am Handy nicht verbreitern */
html.ph-oe[data-oe-huelle] .legal-container,
html.ph-oe[data-oe-huelle] .faq-container,
html.ph-oe[data-oe-huelle] .container,
html.ph-oe[data-oe-huelle] .main,
html.ph-oe[data-oe-huelle] .page-wrap { overflow-wrap: break-word; }
html.ph-oe[data-oe-huelle] h1 { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 600px) {
    html.ph-oe[data-oe-huelle] .legal-header,
    html.ph-oe[data-oe-huelle] .faq-header,
    html.ph-oe[data-oe-huelle="videos"] .page-header,
    html.ph-oe[data-oe-huelle] .hb-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    html.ph-oe[data-oe-huelle] .legal-header i,
    html.ph-oe[data-oe-huelle] .faq-header i,
    html.ph-oe[data-oe-huelle="videos"] .page-header > i,
    html.ph-oe[data-oe-huelle] .hb-header > i { width: 46px; height: 46px; font-size: 1.2rem !important; }
    html.ph-oe[data-oe-huelle] .legal-header h1,
    html.ph-oe[data-oe-huelle] .faq-header h1,
    html.ph-oe[data-oe-huelle="videos"] .page-header h1,
    html.ph-oe[data-oe-huelle] .hb-header h1 { font-size: 27px !important; }
}
html.ph-oe[data-oe-huelle] h2 {
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--oe-tinte) !important;
    border-bottom: none !important; padding-bottom: 0 !important; margin: 40px 0 12px !important; font-size: clamp(21px, 2.6vw, 25px) !important;
}
html.ph-oe[data-oe-huelle] h3 { color: var(--oe-tinte); letter-spacing: -0.01em; }
html.ph-oe[data-oe-huelle] p, html.ph-oe[data-oe-huelle] li { color: var(--oe-tinte); }
html.ph-oe[data-oe-huelle] a { color: var(--oe-petrol); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(43,91,97,0.35); text-underline-offset: 3px; transition: none; }
html.ph-oe[data-oe-huelle] a:hover { color: var(--oe-tinte); text-decoration-color: var(--oe-tinte); }
html.ph-oe[data-oe-huelle] .oe-kopf a, html.ph-oe[data-oe-huelle] .oe-fuss a { text-decoration: none; }
html.ph-oe[data-oe-huelle] .oe-kopf .oe-nav a { color: var(--oe-weiss); font-weight: 600; }
html.ph-oe[data-oe-huelle] .oe-kopf .oe-nav a:hover { color: var(--oe-apricot); }
html.ph-oe[data-oe-huelle] .oe-kopf .oe-logo { color: var(--oe-weiss); }
html.ph-oe[data-oe-huelle] .oe-kopf .oe-knopf--hell { color: var(--oe-weiss); }
html.ph-oe[data-oe-huelle] .oe-fuss-nav a { color: var(--oe-weiss); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); font-weight: 500; }
html.ph-oe[data-oe-huelle] .oe-fuss-nav a:hover { color: var(--oe-apricot); }
html.ph-oe[data-oe-huelle] strong { color: inherit; }

/* AGB: Hinweis- und Kontaktkästen */
html.ph-oe[data-oe-huelle] .version-badge { background: var(--oe-minze) !important; color: var(--oe-petrol) !important; border: 2px solid var(--oe-kreide); border-radius: 999px; }
html.ph-oe[data-oe-huelle] h2 .par-num { background: var(--oe-apricot) !important; color: var(--oe-tinte) !important; border-radius: 10px 10px 10px 3px !important; vertical-align: 3px; }
html.ph-oe[data-oe-huelle] .highlight-box,
html.ph-oe[data-oe-huelle] .contact-box,
html.ph-oe[data-oe-huelle] .tip,
html.ph-oe[data-oe-huelle] .note {
    background: var(--oe-minze) !important; border: 2px solid var(--oe-kreide) !important; border-left-width: 2px !important;
    border-radius: 18px 18px 18px 5px !important; color: var(--oe-tinte) !important;
}
html.ph-oe[data-oe-huelle] .highlight-box.warning,
html.ph-oe[data-oe-huelle] .warning { background: var(--oe-orange) !important; border-color: var(--oe-orange-rand) !important; }

/* FAQ und Videos: aufklappbare Fragen */
html.ph-oe[data-oe-huelle] details {
    background: var(--oe-weiss) !important; border: 2px solid var(--oe-kreide) !important; border-radius: 18px 18px 18px 5px !important;
    box-shadow: none !important; margin-bottom: 10px !important; overflow: hidden;
}
html.ph-oe[data-oe-huelle] details[open] { border-color: var(--oe-tinte) !important; box-shadow: 0 3px 0 var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] summary { color: var(--oe-tinte) !important; font-weight: 700 !important; background: none !important; transition: none !important; }
html.ph-oe[data-oe-huelle] summary:hover { background: var(--oe-nebel) !important; }
html.ph-oe[data-oe-huelle] summary::after { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .faq-content { color: var(--oe-tinte) !important; border-top: 2px solid var(--oe-kreide) !important; background: var(--oe-weiss) !important; }
html.ph-oe[data-oe-huelle] .faq-section-title {
    color: var(--oe-tinte) !important; font-weight: 800 !important; font-size: 21px !important; letter-spacing: -0.02em;
    border-bottom: none !important; margin: 38px 0 14px !important; text-transform: none !important;
}
html.ph-oe[data-oe-huelle] .faq-section-title i { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .manual-btn,
html.ph-oe[data-oe-huelle] .yt-btn,
html.ph-oe[data-oe-huelle] a.yt-btn {
    display: inline-flex !important; align-items: center; gap: 8px; margin: 0 10px 12px 0 !important;
    padding: 12px 20px !important; border-radius: 16px 16px 16px 4px !important;
    background: var(--oe-weiss) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important;
    box-shadow: 0 3px 0 var(--oe-tinte) !important; font-weight: 800 !important; text-decoration: none !important; transition: none !important; width: auto !important;
    transform: none !important; /* faq.html hebt die Knöpfe beim Hover an - im Pausenhof springt nichts unter dem Zeiger (D15) */
}
html.ph-oe[data-oe-huelle] .yt-btn { background: var(--oe-apricot) !important; }
html.ph-oe[data-oe-huelle] .manual-btn:hover { background: var(--oe-minze) !important; }
html.ph-oe[data-oe-huelle] .yt-btn:hover { background: var(--oe-apricot-hover) !important; }
html.ph-oe[data-oe-huelle] summary .play-icon,
html.ph-oe[data-oe-huelle] summary .lock-icon { background: var(--oe-minze) !important; color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .locked-notice { background: var(--oe-nebel) !important; border-radius: 14px 14px 14px 4px; }
html.ph-oe[data-oe-huelle] #access-denied { color: var(--oe-tinte); }

/* Handbuch */
html.ph-oe[data-oe-huelle] .toc { background: var(--oe-nebel) !important; border: 2px solid var(--oe-kreide) !important; border-radius: 18px 18px 18px 5px !important; }
html.ph-oe[data-oe-huelle] .toc h2 { margin-top: 0 !important; }
html.ph-oe[data-oe-huelle] .hb-section { border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important; box-shadow: none !important; background: var(--oe-weiss) !important; overflow: hidden; }
html.ph-oe[data-oe-huelle] .hb-section-header { background: var(--oe-minze) !important; color: var(--oe-tinte) !important; border-bottom: 2px solid var(--oe-kreide) !important; }
html.ph-oe[data-oe-huelle] .hb-section-header h2 { margin: 0 !important; }
html.ph-oe[data-oe-huelle] .hb-section-header .icon-circle { background: var(--oe-weiss) !important; border-radius: 14px 14px 14px 4px !important; }
html.ph-oe[data-oe-huelle] .hb-section-header .icon-circle i { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .hb-sub h3 { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] kbd { background: var(--oe-nebel); border: 2px solid var(--oe-kreide); border-radius: 6px; color: var(--oe-tinte); }

/* Sicherheit: eigener Kopf und Kartenraster */
html.ph-oe[data-oe-huelle] .hero { background: var(--oe-petrol) !important; color: var(--oe-weiss) !important; border-bottom: 2px solid var(--oe-petrol-tief); }
html.ph-oe[data-oe-huelle] .hero::before { display: none !important; }
html.ph-oe[data-oe-huelle] .hero h1 { color: var(--oe-weiss) !important; font-size: clamp(32px, 5.4vw, 60px) !important; }
html.ph-oe[data-oe-huelle] .hero h1 .highlight { color: var(--oe-apricot) !important; background: none !important; -webkit-text-fill-color: var(--oe-apricot) !important; }
html.ph-oe[data-oe-huelle] .hero p { color: var(--oe-minze) !important; }
html.ph-oe[data-oe-huelle] .hero-shield { background: var(--oe-petrol-tief) !important; border: 2px dashed rgba(255,255,255,0.25) !important; color: var(--oe-apricot) !important; box-shadow: none !important; }
html.ph-oe[data-oe-huelle] .hero-shield i { color: var(--oe-apricot) !important; }
html.ph-oe[data-oe-huelle] .badge-row { background: var(--oe-nebel) !important; border-bottom: 2px solid var(--oe-kreide) !important; }
html.ph-oe[data-oe-huelle] .schema { border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important; }
html.ph-oe[data-oe-huelle] .badge { background: var(--oe-weiss) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-kreide) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600; }
html.ph-oe[data-oe-huelle] .badge i, html.ph-oe[data-oe-huelle] .badge.green i { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .badge.green { background: var(--oe-minze) !important; }
html.ph-oe[data-oe-huelle] .page-wrap { max-width: 1040px; box-sizing: border-box; padding-left: var(--oe-rand) !important; padding-right: var(--oe-rand-r) !important; }
html.ph-oe[data-oe-huelle] .section-title { color: var(--oe-tinte) !important; font-weight: 800 !important; letter-spacing: -0.02em; text-transform: none !important; }
/* lange Wörter in Abschnittstiteln (Flex mit Symbol) brechen am Handy um, statt die Seite zu verbreitern */
html.ph-oe[data-oe-huelle] .section-title { overflow-wrap: anywhere; }
html.ph-oe[data-oe-huelle] .section-title i { background: var(--oe-gelb) !important; color: var(--oe-tinte) !important; border-radius: 12px 12px 12px 4px !important; box-shadow: inset 0 0 0 2px var(--oe-kreide); }
html.ph-oe[data-oe-huelle] .section-divider { background: var(--oe-kreide) !important; height: 2px !important; }
html.ph-oe[data-oe-huelle] .card { background: var(--oe-weiss) !important; border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important; box-shadow: none !important; transform: none !important; transition: none !important; }
html.ph-oe[data-oe-huelle] .card:hover { border-color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .card::before { display: none !important; }
html.ph-oe[data-oe-huelle] .card-icon,
html.ph-oe[data-oe-huelle] .card-icon.green-icon,
html.ph-oe[data-oe-huelle] .card-icon.amber-icon,
html.ph-oe[data-oe-huelle] .card-icon.red-icon { background: var(--oe-gelb) !important; color: var(--oe-tinte) !important; border-radius: 14px 14px 14px 4px !important; }
html.ph-oe[data-oe-huelle] .card .tag { border-radius: 999px !important; }
html.ph-oe[data-oe-huelle] .callout,
html.ph-oe[data-oe-huelle] .dsgvo-box { background: var(--oe-minze) !important; border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important; box-shadow: none !important; color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .callout h3, html.ph-oe[data-oe-huelle] .dsgvo-box h4 { color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .callout p, html.ph-oe[data-oe-huelle] .dsgvo-box p { color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .callout-icon, html.ph-oe[data-oe-huelle] .dsgvo-box i { color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .specs-table,
html.ph-oe[data-oe-huelle] .compare-table { border: 2px solid var(--oe-kreide) !important; border-radius: 18px 18px 18px 5px !important; overflow: hidden; box-shadow: none !important; }
html.ph-oe[data-oe-huelle] .specs-table thead tr,
html.ph-oe[data-oe-huelle] .compare-table th { background: var(--oe-petrol) !important; color: var(--oe-weiss) !important; }
html.ph-oe[data-oe-huelle] .schema-box { border: 2px solid var(--oe-kreide) !important; border-radius: 16px 16px 16px 4px !important; background: var(--oe-weiss) !important; box-shadow: none !important; }
html.ph-oe[data-oe-huelle] .schema-box.lock-box { background: var(--oe-petrol) !important; border-color: var(--oe-tinte) !important; color: var(--oe-weiss) !important; }
html.ph-oe[data-oe-huelle] .schema-box.lock-box .sb-label, html.ph-oe[data-oe-huelle] .schema-box.lock-box .sb-value { color: var(--oe-weiss) !important; }
html.ph-oe[data-oe-huelle] .schema-arrow { color: var(--oe-petrol) !important; }
@media (max-width: 600px) {
    /* die Tabellen der Sicherheitsseite waren schon im alten Look am Handy zu breit - jetzt scrollen sie in sich */
    html.ph-oe[data-oe-huelle] .specs-table, html.ph-oe[data-oe-huelle] .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html.ph-oe[data-oe-huelle] .spec-value code { word-break: break-all; }
}

/* Schullizenz: bringt ein eigenes Dunkel mit - hier gilt nur das helle Pausenhof */
html.ph-oe[data-oe-huelle="schullizenz"] {
    --accent: #E8A572; --school: #2B5B61; --school-l: #1A4449; --bg: #F0F4F4; --surface: #FFFFFF; --surface2: #E8F0EE;
    --text: #1B2A2C; --muted: #5A7174; --border: #DDE5E5; --line: #DDE5E5;
}
html.ph-oe[data-oe-huelle="schullizenz"] .page-header { background: var(--oe-petrol) !important; color: var(--oe-weiss) !important; padding: 52px var(--oe-rand-r) 48px var(--oe-rand) !important; border-bottom: 2px solid var(--oe-petrol-tief); }
html.ph-oe[data-oe-huelle="schullizenz"] .page-header h1 { color: var(--oe-weiss) !important; font-size: clamp(30px, 5vw, 50px) !important; }
html.ph-oe[data-oe-huelle="schullizenz"] .header-sub { color: var(--oe-minze) !important; opacity: 1 !important; font-size: 17px !important; max-width: 34em !important; }
html.ph-oe[data-oe-huelle="schullizenz"] .header-pill { background: transparent !important; color: var(--oe-weiss) !important; border: 2px solid rgba(255,255,255,0.3) !important; }
html.ph-oe[data-oe-huelle] .main { box-sizing: border-box; max-width: 880px; margin: 40px auto 64px; padding-left: var(--oe-rand) !important; padding-right: var(--oe-rand-r) !important; }
html.ph-oe[data-oe-huelle] .step-num { background: var(--oe-apricot) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important; box-shadow: 0 3px 0 var(--oe-tinte); }
html.ph-oe[data-oe-huelle] .step-title { color: var(--oe-tinte) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
html.ph-oe[data-oe-huelle] .step-text, html.ph-oe[data-oe-huelle] .weg-text { color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .step-tag { text-transform: none !important; letter-spacing: 0 !important; color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .step-note,
html.ph-oe[data-oe-huelle] .summary { background: var(--oe-minze) !important; border: 2px solid var(--oe-kreide) !important; border-radius: 18px 18px 18px 5px !important; color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .summary-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--oe-petrol) !important; }
html.ph-oe[data-oe-huelle] .weg { background: var(--oe-weiss) !important; border: 2px solid var(--oe-kreide) !important; border-radius: var(--oe-ecke) !important; box-shadow: none !important; }
html.ph-oe[data-oe-huelle] .weg-marke { background: var(--oe-gelb) !important; color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .weg-b .weg-marke { background: var(--oe-hellblau) !important; }
html.ph-oe[data-oe-huelle] .step-img-wrap { border: 2px solid var(--oe-kreide) !important; border-radius: 18px 18px 18px 5px !important; box-shadow: none !important; }
html.ph-oe[data-oe-huelle] .cta-area { background: var(--oe-apricot) !important; border: 2px solid var(--oe-tinte) !important; border-radius: 30px 30px 30px 8px !important; box-shadow: 0 3px 0 var(--oe-tinte) !important; color: var(--oe-tinte) !important; }
html.ph-oe[data-oe-huelle] .cta-area * { color: var(--oe-tinte); }
html.ph-oe[data-oe-huelle] .cta-btn { background: var(--oe-tinte) !important; color: var(--oe-weiss) !important; border: 2px solid var(--oe-tinte) !important; border-radius: 16px 16px 16px 4px !important; box-shadow: 0 3px 0 var(--oe-petrol) !important; transition: none !important; transform: none !important; }
html.ph-oe[data-oe-huelle] .cta-btn:hover, html.ph-oe[data-oe-huelle] .cta-btn:focus { background: var(--oe-tinte-hover) !important; color: var(--oe-weiss) !important; }
html.ph-oe[data-oe-huelle] .cta-btn-secondary { background: var(--oe-weiss) !important; color: var(--oe-tinte) !important; border: 2px solid var(--oe-tinte) !important; border-radius: 16px 16px 16px 4px !important; transition: none !important; transform: none !important; }
html.ph-oe[data-oe-huelle] .cta-btn-secondary:hover, html.ph-oe[data-oe-huelle] .cta-btn-secondary:focus { background: var(--oe-minze) !important; }
/* Der alte Seitenstil zieht beim Überfahren einen 3-px-Ring mit Abstand um den Knopf und blendet ihn ab (schullizenz-anleitung.html,
   .cta-btn:hover) - wirkte wie ein zu großer Rahmen (Cornelius, 28.10.2026). Hier nur Farbe; der Ring bleibt für die Tastatur. */
html.ph-oe[data-oe-huelle] .cta-btn, html.ph-oe[data-oe-huelle] .cta-btn-secondary { outline: none !important; opacity: 1 !important; text-decoration: none !important; }
html.ph-oe[data-oe-huelle] .cta-btn:focus-visible, html.ph-oe[data-oe-huelle] .cta-btn-secondary:focus-visible { outline: 3px solid var(--oe-tinte) !important; outline-offset: 3px !important; }
html.ph-oe[data-oe-huelle] .badge-new { background: var(--oe-apricot) !important; color: var(--oe-tinte) !important; }

@media print {
    html.ph-oe .oe-kopf, html.ph-oe .oe-fuss { display: none !important; }
    html.ph-oe[data-oe-huelle] .legal-container,
    html.ph-oe[data-oe-huelle] .faq-container,
    html.ph-oe[data-oe-huelle] .container { border: none !important; margin: 0 auto !important; padding: 0 !important; }
}