:root{--ink:#26352e;--soft:#69756d;--orange:#c96832;--orange-deep:#a44e20;--green:#4d7656;--cream:#fbf7ef;--white:#fffefb;--line:#e7e0d4;--gold:#f7d194;--shadow:0 12px 34px rgba(61,55,43,.08);font-family:ui-rounded,"Aptos","Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:300px}.site-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px clamp(18px,4vw,62px);background:rgba(255,254,251,.95);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;min-width:0}.school-logo{width:64px;height:64px;object-fit:contain}.brand strong{font-size:clamp(17px,1.7vw,21px);line-height:1.2;display:block;letter-spacing:-.03em}.brand strong span{color:var(--orange)}.brand-overline{font-size:10px;letter-spacing:.1em;font-weight:800;color:#748078;display:block;margin-bottom:4px}.language-toggle{border:1px solid #dbdfd7;background:#fff;border-radius:999px;color:var(--ink);padding:10px 15px;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}.language-toggle:hover{border-color:var(--green);background:#f4f9f2}.app{flex:1;width:100%;max-width:1510px;margin:auto;padding:clamp(24px,3.8vw,56px) clamp(18px,4vw,62px) 64px;outline:none}footer{padding:24px;text-align:center;border-top:1px solid var(--line);font-weight:700;color:#64766a;font-size:14px;background:#fffefa}
.eyebrow{display:block;font-size:11px;letter-spacing:.15em;font-weight:850;color:var(--orange);text-transform:uppercase;margin-bottom:12px}.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(24px,5vw,75px);align-items:center;margin-bottom:30px}.hero h1,.menu-heading h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.045em;line-height:1.02;margin:0;color:#26382f}.hero h1{font-size:clamp(38px,5vw,68px);max-width:650px}.hero h1 em{font-style:normal;color:var(--orange)}.hero p{font-size:clamp(16px,1.55vw,19px);line-height:1.6;color:#5e6a62;max-width:530px}.hero-image{height:clamp(220px,24vw,345px);overflow:hidden;border-radius:22px;box-shadow:var(--shadow)}.hero-image img{width:100%;height:100%;object-fit:cover}.language-panel{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}.language-panel-head{display:flex;gap:16px;justify-content:space-between;align-items:end;margin-bottom:20px}.language-panel h2{font-family:Georgia,serif;font-size:26px;font-weight:500;margin:0 0 4px}.language-panel p{color:var(--soft);margin:0;line-height:1.5}.language-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lang-option{border:1px solid #e7e5dc;border-radius:13px;background:#fff;text-align:left;padding:13px 14px;min-height:68px;cursor:pointer;color:var(--ink);font:inherit;display:flex;align-items:center;gap:10px}.lang-option:hover,.lang-option:focus-visible{border-color:var(--green);background:#f3f8f0;transform:translateY(-1px)}.lang-option .flag{font-size:24px;line-height:1}.lang-option b{display:block;font-size:15px;line-height:1.25}.lang-option small{display:block;color:var(--soft);font-size:11px;margin-top:4px}.picker-help{font-size:12px!important;margin-top:17px!important}
.menu-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px}.menu-heading h1{font-size:clamp(35px,4vw,56px)}.menu-heading p{color:var(--soft);line-height:1.5;margin:10px 0 0}.menu-count{background:#edf4e9;border:1px solid #ddebd7;color:#527451;border-radius:16px;padding:13px 18px;white-space:nowrap;font-weight:750;font-size:13px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filter{font:inherit;font-size:13px;font-weight:750;border:1px solid #e5dfd4;color:#69756d;background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer}.filter.active{background:#314e3b;border-color:#314e3b;color:white}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 4px 13px rgba(45,52,42,.04);transition:transform .18s,box-shadow .18s;color:inherit;font:inherit;padding:0}.scene-card:hover,.scene-card:focus-visible{transform:translateY(-4px);box-shadow:0 13px 30px rgba(45,52,42,.12)}.scene-thumb{height:clamp(150px,14vw,210px);position:relative;background:#e9e8da}.scene-thumb img{width:100%;height:100%;object-fit:cover}.scene-num{position:absolute;left:12px;top:12px;background:rgba(255,254,250,.93);border-radius:999px;padding:6px 9px;font-weight:850;font-size:11px;color:#52625a}.scene-body{padding:16px 18px 18px}.scene-tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:850}.scene-title{display:block;font-family:Georgia,serif;font-size:22px;font-weight:500;line-height:1.15;margin:6px 0 12px}.scene-meta{font-size:12px;color:#77837a;display:flex;justify-content:space-between;gap:8px}.scene-arrow{color:var(--green);font-weight:900}
.scene-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:21px}.back-btn{border:0;background:none;color:var(--green);font:inherit;font-size:14px;font-weight:800;cursor:pointer;padding:4px 0;margin-bottom:14px}.scene-top h1{font-family:Georgia,serif;font-size:clamp(32px,3.5vw,49px);font-weight:500;letter-spacing:-.04em;line-height:1.05;margin:0}.scene-top p{margin:8px 0 0;color:var(--soft);font-size:14px}.progress-pill{border:1px solid #dce7d7;background:#f3f8ef;color:var(--green);border-radius:999px;padding:10px 14px;font-size:13px;font-weight:800;white-space:nowrap}.scene-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.72fr);gap:23px;align-items:start}.picture-frame{position:relative;aspect-ratio:1672/941;border-radius:20px;overflow:hidden;background:#e9e5d7;box-shadow:var(--shadow)}.picture-frame>img{width:100%;height:100%;display:block;object-fit:cover}.speaker{position:absolute;transform:translate(-50%,-50%);width:39px;height:39px;border:2px solid #fff;border-radius:50%;background:var(--orange);color:white;box-shadow:0 3px 10px rgba(0,0,0,.3);display:grid;place-items:center;cursor:pointer}.speaker svg{width:19px;height:19px;fill:currentColor}.speaker:hover,.speaker:focus-visible,.speaker.active{background:#2d6245;transform:translate(-50%,-50%) scale(1.14);z-index:2}.speaker.visited:not(.active){background:#4b7655}.sentence-panel{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:25px;min-height:clamp(330px,30vw,440px);box-shadow:var(--shadow);display:flex;flex-direction:column}.panel-kicker{color:var(--orange);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:850;margin:0 0 20px}.sentence-panel h2{font-size:22px;line-height:1.35;margin:0 0 15px}.sentence-panel .hint{font-size:14px;color:var(--soft);line-height:1.6}.sentence-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:#7c887e;margin:14px 0 8px}.sentence-german{font-family:Georgia,serif;font-size:clamp(23px,2vw,30px);line-height:1.3;margin:0}.sentence-translation{font-size:19px;line-height:1.55;font-weight:650;margin:0;color:#4d7656;overflow-wrap:anywhere}.divider{border:0;border-top:1px solid var(--line);width:100%;margin:24px 0 6px}.listen-btn{margin-top:auto;background:#2f5940;color:#fff;border:0;border-radius:12px;padding:13px 17px;font:inherit;font-weight:800;cursor:pointer;text-align:center}.listen-btn:hover{background:#214732}.audio-note{margin:12px 0 0;color:#7b887d;font-size:12px;line-height:1.4}.audio-error{color:#9a452c;font-size:13px;margin:12px 0}.scene-note{font-size:13px;color:var(--soft);line-height:1.55;margin:15px 4px 0}.empty{grid-column:1/-1;padding:40px;background:#fff;border-radius:16px;color:var(--soft)}button:focus-visible{outline:3px solid #e59d49;outline-offset:3px}
@media(max-width:1000px){.language-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-layout{grid-template-columns:1fr}.sentence-panel{min-height:245px}.scene-thumb{height:190px}}@media(max-width:650px){.topbar{padding:10px 14px}.school-logo{width:50px;height:50px}.brand{gap:8px}.brand-overline{font-size:8px}.brand strong{font-size:15px}.language-toggle{font-size:12px;padding:8px}.app{padding:25px 14px 42px}.hero{grid-template-columns:1fr;gap:18px}.hero-image{height:200px}.hero h1{font-size:42px}.language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lang-option{padding:10px;min-height:65px}.lang-option .flag{font-size:20px}.lang-option b{font-size:13px}.menu-heading{align-items:start;flex-direction:column;gap:12px}.scene-grid{gap:10px}.scene-thumb{height:125px}.scene-body{padding:12px}.scene-title{font-size:18px}.scene-meta{font-size:11px}.scene-top{align-items:start;flex-direction:column}.speaker{width:32px;height:32px}.speaker svg{width:16px;height:16px}.sentence-panel{padding:20px;min-height:250px}.picture-frame{border-radius:14px}footer{font-size:12px}}@media(max-width:365px){.scene-grid{grid-template-columns:1fr}.scene-thumb{height:180px}.language-grid{grid-template-columns:1fr 1fr}.lang-option small{font-size:10px}}

/* Flaggen als lokale Grafiken statt plattformabhängiger Emoji-Schrift. */
.country-flag{display:block;width:48px;height:31px;object-fit:contain;flex:0 0 48px}
#language-label{display:inline-flex;align-items:center;gap:7px}
#language-label .country-flag{width:29px;height:20px;flex-basis:29px}
@media(max-width:650px){
  .lang-option .country-flag{width:36px;height:25px;flex-basis:36px}
  #language-label .country-flag{width:25px;height:17px;flex-basis:25px}
}

/* Die deutsche Überschrift und ihre Übersetzung bleiben auf kleinen Karten gut lesbar. */
.scene-title{margin-bottom:5px}
.scene-title-translation{display:block;color:#3f6d54;font-size:15px;font-weight:700;line-height:1.4;margin:0 0 10px;overflow-wrap:anywhere;text-align:start}
.scene-heading-translation{display:block;color:var(--green);font-size:clamp(18px,1.8vw,23px);font-weight:700;line-height:1.4;margin-top:7px;overflow-wrap:anywhere;text-align:start}

/* Sprechübung mit gut sichtbaren, berührungsfreundlichen Bedienelementen. */
.speak-btn{margin-top:18px;width:100%;min-height:49px;background:#ab4d1d;color:#fff;border:0;border-radius:12px;padding:13px 17px;font:inherit;font-weight:800;line-height:1.3;cursor:pointer;text-align:center}
.speak-btn:hover{background:#883a14}
.speak-btn:focus-visible,.listen-btn:focus-visible{outline:3px solid #ec994c;outline-offset:3px}
.speak-btn:disabled{cursor:wait;opacity:.7}
.sentence-panel .listen-btn{margin-top:12px;min-height:49px}
.speech-privacy{margin:9px 0 0;color:#66756c;font-size:12px;line-height:1.4;text-align:start;overflow-wrap:anywhere}
.speech-listening,.speech-error{margin:12px 0 0;border-radius:11px;padding:11px 12px;font-size:14px;font-weight:700;line-height:1.4;text-align:start}
.speech-listening{background:#edf4ea;color:#315d42}
.speech-error{background:#fff3e3;color:#84421d}
.speech-feedback{margin:12px 0 0;border:1px solid transparent;border-radius:12px;padding:12px 14px;line-height:1.4;overflow-wrap:anywhere}
.speech-success{background:#eaf6e9;border-color:#cfe8ca;color:#245a33}
.speech-retry{background:#fff3df;border-color:#f4d9a7;color:#79501a}
.speech-feedback strong,.speech-feedback-local,.speech-feedback small{display:block}
.speech-feedback-local{font-weight:700;margin-top:3px;text-align:start}
.speech-feedback p{margin:9px 0 5px;font-size:13px}
.speech-feedback small{font-size:11px;line-height:1.4;opacity:.86;text-align:start}

/* Szenenmodus und Wortarten sind in beiden Sprachen sichtbar. */
.mode-switch{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.mode-btn,.word-filter,.word-zoom{font:inherit;cursor:pointer;border:1px solid #d9e4d6;background:#fff;border-radius:13px;color:#38513e;line-height:1.25}
.mode-btn{min-width:150px;padding:10px 18px;text-align:left;font-size:15px;font-weight:800}
.mode-btn.active{background:#2f5940;border-color:#2f5940;color:#fff}
.mode-btn small,.word-filter small,.word-zoom small{display:block;margin-top:3px;font-size:12px;font-weight:600;opacity:.9}
.word-filters{display:flex;align-items:stretch;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.word-filter,.word-zoom{display:flex;flex-direction:column;align-items:flex-start;position:relative;padding:8px 30px 8px 12px;font-size:13px;font-weight:800}
.word-filter.active{background:#ecf4e9;border-color:#609175}
.word-filter-count{position:absolute;right:8px;top:8px;font-size:10px;font-weight:800;color:#678474}
.word-filter-n{border-bottom:3px solid #a94e20}
.word-filter-a{border-bottom:3px solid #197868}
.word-filter-v{border-bottom:3px solid #70509c}
.word-zoom{padding:8px 12px;background:#f7f5ed}
.mode-btn:focus-visible,.word-filter:focus-visible,.word-zoom:focus-visible{outline:3px solid #ec994c;outline-offset:2px}
.picture-scroll{width:100%;overflow-x:auto;border-radius:20px}
.picture-frame.word-zoomed{width:max(200%,760px);max-width:none}
.speaker.word-speaker{width:29px;height:29px;border-width:2px}
.speaker.word-speaker svg{width:15px;height:15px}
.speaker.word-n,.speaker.word-n.visited:not(.active){background:#a94e20}
.speaker.word-a,.speaker.word-a.visited:not(.active){background:#197868}
.speaker.word-v,.speaker.word-v.visited:not(.active){background:#70509c}
.speaker.word-speaker.active{border-color:#fff6aa;box-shadow:0 0 0 3px #253c2b,0 3px 10px rgba(0,0,0,.3);z-index:3}
@media(max-width:600px){.mode-btn{min-width:125px;flex:1}.word-filter,.word-zoom{font-size:12px}.speaker.word-speaker{width:24px;height:24px}.speaker.word-speaker svg{width:13px;height:13px}}