/* ## HIER ÄNDERN: Zentrale Farben und die zwei Bilder.
   Eigene Midjourney-Bilder nach assets/ kopieren und hier Dateinamen einsetzen.
   Beispiel: --bild-schule: url("schule.jpg");
   Empfehlung: je Bild mindestens 1400 × 1600 Pixel, Motiv im oberen Bereich.
   Alle Bildpfade sind relativ zu dieser CSS-Datei. */
:root{--bild-schule:url("schule-beispiel.svg");--bild-abenteuer:url("../fuchs-poster.jpg");--ink:#102c32;--cream:#fff5dc;--gold:#ffd17b;--mint:#c3e8df;--cut:polygon(0 0,calc(50% + 46px) 0,calc(50% - 19px) 35%,calc(50% + 35px) 34%,calc(50% - 11px) 64.5%,calc(50% + 48px) 62.5%,calc(50% + 4px) 100%,0 100%)}
*{box-sizing:border-box}body{margin:0;background:#102c32;color:var(--cream);font-family:"Trebuchet MS",Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffbf63;outline-offset:6px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;z-index:20;top:10px;left:10px;background:white;color:#102c32;padding:15px}
.masthead{height:90px;padding:0 4%;display:flex;align-items:center;gap:34px;background:#102c32;border-bottom:1px solid #ffffff16}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;letter-spacing:2px;font-size:19px;font-weight:bold}.brand b{color:var(--gold)}.brand-icon{display:grid;place-content:center;position:relative;width:40px;height:43px;border:1px solid #d8b76c;border-radius:12px 3px;color:var(--gold);font:bold 32px Georgia}.brand-icon span{position:absolute;right:1px;top:2px;font:14px Georgia}.masthead p{font:italic 15px Georgia;color:#c0d0cb}.header-note{margin-left:auto;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#c0d0cb}
/* ## HIER ÄNDERN: Höhe der Bühne, Bildausschnitte und Helligkeit. */
.split{position:relative;isolation:isolate;min-height:760px;height:calc(100svh - 158px);max-height:1100px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#123b32}.scene{position:absolute;inset:0;z-index:-3;background-size:cover;background-repeat:no-repeat}.scene-school{z-index:-2;clip-path:var(--cut);background-image:linear-gradient(0deg,#0b2a32 1%,#0b2a32ed 20%,#0b2a3200 65%),var(--bild-schule);background-size:100% 100%,57% auto;background-position:center,left 12%;background-color:#1d454f}.scene-adventure{background-image:linear-gradient(0deg,#15261c 1%,#15261cf5 20%,#15261c00 66%),var(--bild-abenteuer);background-size:100% 100%,auto 85%;background-position:center,calc(100% + 220px) 0}.scene-adventure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#102c3280,transparent 25%)}
.intro{position:absolute;top:34px;left:0;right:0;text-align:center;z-index:3;pointer-events:none;text-shadow:0 2px 15px #000}.intro span{font-size:10px;letter-spacing:4px;color:#f3d99f}.intro p{font:italic 22px Georgia;margin:10px 0}.lightning{position:absolute;left:calc(50% - 40px);top:0;height:100%;width:140px;z-index:2;pointer-events:none;filter:drop-shadow(0 0 5px #ffd17288) drop-shadow(0 0 20px #ffae3040);fill:#ffdb8b}
.choice{display:flex;align-items:flex-end;padding:60px 10% 44px;min-width:0}.choice-copy{position:relative;z-index:3;max-width:510px}.school{padding-right:8%}.adventure{padding-left:14%}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2.3px;color:#bdddd7;margin:0 0 20px}.eyebrow span{margin-right:12px;opacity:.65}.adventure .eyebrow{color:#ebcb8d}h2{font:normal clamp(28px,2.75vw,45px)/1.12 Georgia,serif;letter-spacing:-1.1px;margin:0 0 18px}h2 em{font-style:normal;color:#a7d9ce}.adventure h2 em{color:var(--gold)}.description{max-width:380px;color:#d1dcd5;font-size:15px;line-height:1.65;margin:0 0 26px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:54px;padding:16px 23px;border-radius:5px;border:1px solid transparent;text-decoration:none;font-weight:bold;font-size:14px;cursor:pointer;transition:transform .2s,filter .2s}.cta span{font-size:21px;line-height:1}.cta:hover{transform:translateY(-3px);filter:brightness(1.08)}.cta-school{background:#d2eee5;color:#153a3e;border-color:#edfdf5}.cta-game{background:linear-gradient(110deg,#ffe0a0,#f8b75b);color:#372410;border-color:#ffe4ad;box-shadow:0 5px 24px #f6a93d20}.audience{font-size:11px;letter-spacing:.4px;color:#afc4bb;margin:17px 0 0}
footer{min-height:68px;display:flex;align-items:center;gap:28px;padding:18px 4%;background:#0c2228;color:#a6b9b6;font-size:11px}footer nav{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}footer a{text-decoration:none;padding:6px 0}footer a:hover{text-decoration:underline;color:#fff}.footer-brand{font-weight:bold;white-space:nowrap}.footer-note{margin-left:auto;font:italic 12px Georgia}.coming{display:flex;align-items:center;gap:7px}.coming small{border:1px solid #42605e;border-radius:4px;padding:2px 4px;font-size:9px}
dialog{width:min(570px,calc(100% - 36px));max-height:85svh;overflow:auto;padding:48px 36px 32px;background:#f5f4ea;color:#17383c;border:1px solid #c2dcd2;border-radius:16px;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#031a21bd;backdrop-filter:blur(6px)}dialog h2{font-size:32px}dialog p:not(.eyebrow){line-height:1.65;font-size:15px}dialog .eyebrow{color:#50706a}dialog .close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:30px;color:#17383c;cursor:pointer;width:38px;height:38px}dialog small{display:block;margin-top:24px;color:#526762;line-height:1.5}details{margin-top:25px;padding-top:20px;border-top:1px solid #b8c9c1;font-size:13px}summary{cursor:pointer}code{background:#dde8df;padding:3px 5px;overflow-wrap:anywhere}
/* ## HIER ÄNDERN: Mobilansicht. Unter 760px stehen die Wege untereinander.
   Der Blitz wird als gezackte horizontale Trennlinie dargestellt. */
@media(min-width:1500px){.scene-adventure{background-position:center,calc(100% + 130px) 0}}
@media(max-width:1000px){.header-note,.footer-note{display:none}.masthead{justify-content:space-between}.split{min-height:740px}.choice{padding-left:8%;padding-right:6%}.adventure{padding-left:14%}.description{font-size:14px}.cta{gap:18px;padding:15px 17px}footer{justify-content:space-between}footer nav{gap:16px}}
@media(max-width:759px){.masthead{height:76px;padding:0 22px}.masthead p{display:none}.brand{font-size:16px}.split{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0}.intro{top:25px}.intro p{font-size:19px}.intro span{font-size:9px}.scene{display:none}.choice{position:relative;min-height:660px;padding:330px 28px 42px;isolation:isolate}.choice::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-repeat:no-repeat}.school::before{background-image:linear-gradient(0deg,#0b2a32 6%,#0b2a32f0 35%,transparent 77%),var(--bild-schule);background-position:center,center 35px}.adventure{min-height:650px;padding-top:350px}.adventure::before{background-image:linear-gradient(0deg,#15261c 4%,#15261cee 35%,transparent 78%),var(--bild-abenteuer);background-position:center,center top}.adventure::after{content:"";position:absolute;top:-11px;left:0;width:100%;height:25px;background:var(--gold);clip-path:polygon(0 38%,35% 5%,33% 42%,65% 18%,62% 60%,100% 35%,100% 52%,58% 100%,61% 58%,28% 83%,31% 47%,0 60%)}.lightning{display:none}.choice-copy{max-width:450px;width:100%;margin:auto}.eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:16px}h2{font-size:34px}.description{font-size:14px;max-width:350px}.cta{font-size:14px}.audience{font-size:10px}footer{padding:24px;flex-direction:column;gap:18px}footer nav{gap:12px 20px}dialog{padding:48px 24px 28px}dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ## HIER ÄNDERN: Kompakte Smartphone-Ansicht.
   Jeder Weg erhält die Hälfte der sichtbaren Höhe nach Abzug des 60px-Headers.
   svh berücksichtigt die eingeblendeten Browserleisten auf dem iPhone.
   15rem Mindesthöhe schützt die Lesbarkeit auf sehr kleinen Displays und bei
   großer Schrift. Dann darf die Seite natürlich weiterhin gescrollt werden.
   Desktop und iPad ab 760px Breite verwenden unverändert das bisherige Layout. */
@media (max-width: 759px) {
  .masthead { height: 60px; }
  .brand-icon { width: 32px; height: 35px; font-size: 27px; }
  .split { overflow: visible; }
  .intro { display: none; }
  .choice,
  .adventure {
    /* vh ist der Ersatz für ältere Browser ohne svh-Unterstützung. */
    min-height: max(15rem, calc((100vh - 60px) / 2));
    min-height: max(15rem, calc((100svh - 60px) / 2));
    padding: 90px 24px 18px;
    flex-shrink: 0;
  }
  .choice-copy { margin: 0 auto; }
  .choice .eyebrow { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 8px; }
  .choice h2 { font-size: clamp(23px, 6vw, 29px); line-height: 1.12; margin-bottom: 12px; letter-spacing: -.6px; }
  /* Die kurzen Überschriften und Buttons tragen auf dem Handy die Auswahl.
     Die ausführlichen Beschreibungen bleiben auf größeren Displays sichtbar. */
  .choice .description,
  .choice .audience { display: none; }
  .choice .cta { min-height: 44px; padding: 11px 16px; font-size: 13px; }
  .school::before {
    background-image: linear-gradient(0deg, #0b2a32 0%, #0b2a32e8 30%, #0b2a3210 90%), var(--bild-schule);
    background-position: center, center 37%;
  }
  .adventure::before {
    background-image: linear-gradient(0deg, #15261c 0%, #15261ce8 30%, #15261c00 90%), var(--bild-abenteuer);
    background-position: center, center 43%;
  }
}

/* ## HIER ÄNDERN: Bilder/Videos werden jetzt ausschließlich in index.html gewählt.
   Die älteren --bild-Variablen sind nicht mehr aktiv. Bild und Video nutzen
   dieselben Ausschnitte. Die Farbverläufe sichern die Lesbarkeit der Texte. */
.choice { position: relative; }
.panel-media { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.panel-media img, .panel-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fokus-desktop, 50% 35%);
}
.panel-media video { opacity: 0; }
.panel-media video.is-playing { opacity: 1; }
.panel-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #0b2a32 0%, #0b2a32d9 24%, #0b2a3200 62%); }
.school .panel-media { z-index: 1; width: calc(100% + 60px);
  clip-path: polygon(0 0,calc(100% - 14px) 0,calc(100% - 79px) 35%,calc(100% - 25px) 34%,calc(100% - 71px) 64.5%,calc(100% - 12px) 62.5%,calc(100% - 56px) 100%,0 100%); }
.adventure .panel-media { z-index: 0; left: -60px; width: calc(100% + 60px); }
.adventure .panel-media::after { background: linear-gradient(0deg, #351807 0%, #351807db 24%, #35180700 62%); }
.lightning { z-index: 4; }
.intro { z-index: 5; }
.motion-toggle { position: absolute; z-index: 6; right: 18px; top: 18px;
  border: 1px solid #ffffff88; border-radius: 5px; padding: 9px 12px;
  color: #fff5dc; background: #102c32e8; font-size: 12px; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
@media (max-width: 759px) {
  .choice::before { display: none; }
  .school .panel-media, .adventure .panel-media { inset: 0; width: 100%; clip-path: none; z-index: -1; }
  .panel-media img, .panel-media video { object-position: var(--fokus-mobil, 50% 32%); }
  .school .panel-media::after { background: linear-gradient(0deg, #0b2a32f5, #0b2a32c9 32%, #0b2a3200 78%); }
  .adventure .panel-media::after { background: linear-gradient(0deg, #351807f5, #351807c9 32%, #35180700 78%); }
  .adventure::after { z-index: 4; }
  .motion-toggle { top: 8px; right: 10px; font-size: 11px; }
}

/* ## HIER ÄNDERN: Handy im Querformat – beide Wege nebeneinander,
   kompakte Texte, kein 760px hoher Desktopbereich auf einem flachen Display. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
  .masthead { height: 52px; }
  .split { display: grid; grid-template-columns: 1fr 1fr; height: auto;
    min-height: calc(100svh - 52px); max-height: none; overflow: hidden; }
  .intro { display: none; }
  .choice, .adventure { min-height: calc(100svh - 52px); padding: 65px 22px 18px; }
  .choice-copy { margin: 0; }
  .choice h2 { font-size: 24px; margin-bottom: 12px; }
  .choice .eyebrow { font-size: 8px; letter-spacing: .7px; margin-bottom: 8px; }
  .choice .description, .choice .audience { display: none; }
  .choice .cta { min-height: 44px; padding: 10px 14px; font-size: 12px; gap: 14px; }
  .choice::before, .adventure::after { display: none; }
  .school .panel-media, .adventure .panel-media { inset: 0; width: 100%; clip-path: none; }
  .lightning { display: block; left: calc(50% - 18px); width: 36px; }
  .panel-media img, .panel-media video { object-position: var(--fokus-mobil); }
}

/* ## HIER ÄNDERN: Großes Info-Popup. Breite: 1080px; Höhe: maximal 92svh.
   Nur der Dialog scrollt; der Schließen-Knopf bleibt oben erreichbar. */
body:has(dialog[open]) { overflow: hidden; }
dialog.school-dialog { width: min(1080px, calc(100% - 32px)); max-width: none;
  max-height: 92vh; max-height: 92svh; padding: 0; border-radius: 20px;
  background: #f7f6ee; color: #17383c; overscroll-behavior: contain; }
.school-dialog-top { position: sticky; top: 0; z-index: 10; display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: #f7f6eef5; border-bottom: 1px solid #dce3d9;
  backdrop-filter: blur(12px); font-size: 10px; letter-spacing: 2px; font-weight: bold; }
.school-dialog-top > span > span { margin: 0 12px; color: #8ba69c; }
.school-dialog .close { position: static; flex-shrink: 0; width: 44px; height: 44px; }
.school-dialog-body { padding: 32px; }
.school-dialog .eyebrow { margin-bottom: 14px; color: #487468; font-size: 10px; }
.school-promo-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; }
.school-dialog h2 { font-size: clamp(32px, 4vw, 49px); line-height: 1.08; margin-bottom: 22px; }
.school-dialog h2 em { color: #318271; }
.school-dialog h3 { font: normal 30px/1.15 Georgia,serif; letter-spacing: -.5px; margin: 0 0 18px; }
.school-dialog h4 { font-size: 17px; margin: 16px 0 10px; }
.school-dialog p { color: #4c655f; }
.school-dialog .promo-lead { font-size: 18px; line-height: 1.55; color: #264a43; }
.school-dialog figure { margin: 0; min-width: 0; }
.school-dialog figure img { display: block; width: 100%; object-fit: cover; border-radius: 14px; }
.promo-world img { aspect-ratio: 1 / 1; object-position: 50% 15%; }
.school-dialog figcaption { font-size: 10px; color: #657c73; line-height: 1.5; margin-top: 9px; }
.promo-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.promo-tags span { background: #e3ede2; color: #376556; border-radius: 30px; padding: 7px 12px; font-size: 11px; }
.promo-benefits { padding: 42px 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.benefit-grid article { padding: 24px; background: #eef0e5; border: 1px solid #dce4d7; border-radius: 14px; }
.benefit-number { color: #548779; font: italic 24px Georgia,serif; }
.school-dialog .benefit-grid p { font-size: 14px; margin-bottom: 0; }
.promo-admin { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; padding: 28px; background: #e4ede5; border-radius: 18px; }
.promo-admin img { aspect-ratio: 1 / 1; object-position: 50% 15%; }
.promo-checks { padding-left: 19px; font-size: 14px; line-height: 1.7; color: #36594e; }
.promo-checks li { padding: 5px 0; }
.school-dialog .promo-note { font-size: 13px; }
.promo-test { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; margin-top: 34px; padding: 30px; border-radius: 18px; background: #173d3c; }
.school-dialog .promo-test h3 { color: #fff1ce; }
.school-dialog .promo-test .eyebrow { color: #b4d9c8; }
.school-dialog .promo-test p { color: #d0e0d8; font-size: 14px; }
.promo-login { text-align: center; }
.school-dialog .promo-login p { font-size: 12px; margin: 14px auto 0; max-width: 230px; }
.test-account { color: #fff1ce; border-color: #ffffff30; margin-top: 18px; padding-top: 18px; }
.test-account summary { line-height: 1.6; padding: 4px 0; font-size: 14px; }
.test-account dl { margin: 18px 0; }
.test-account dl > div { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 12px 0; }
.test-account dt { width: 105px; color: #c6ddd0; font-size: 13px; }
.test-account dd { margin: 0; }
.test-account code { color: #17383c; user-select: all; }
.school-dialog .test-account p { font-size: 12px; }
@media (max-width: 700px) {
  dialog.school-dialog { width: calc(100% - 16px); max-height: 94svh; border-radius: 14px; }
  .school-dialog-top { padding: 8px 14px; font-size: 9px; letter-spacing: 1px; }
  .school-dialog-top > span > span { margin: 0 6px; }
  .school-dialog-body { padding: 22px 18px; }
  .school-promo-hero, .promo-admin, .promo-test, .benefit-grid { grid-template-columns: 1fr; gap: 20px; }
  .school-dialog h2 { font-size: 34px; }
  .school-dialog h3 { font-size: 27px; }
  .school-dialog .promo-lead { font-size: 17px; }
  .promo-world img { aspect-ratio: 1.25 / 1; }
  .promo-benefits { padding: 30px 0; }
  .benefit-grid article { padding: 20px; }
  .promo-admin, .promo-test { padding: 20px; }
  .promo-login { text-align: left; }
  .school-dialog .promo-login p { margin-left: 0; max-width: none; }
}