:root{--paper:#faf8f1;--surface:#fffef9;--ink:#304b3c;--muted:#72816c;--green:#4b7050;--sage:#e9eedc;--line:#dce3d0;--honey:#f4e5bc;--blue:#e8eff0;--radius:18px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.45 'Trebuchet MS',ui-rounded,sans-serif}button,select,input{font:inherit}button,select{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 17px;min-height:46px;cursor:pointer}button:hover{background:var(--sage)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #aa7a30;outline-offset:4px}button:disabled{opacity:.7}button[hidden],[hidden]{display:none!important}button.active,button.selected{background:var(--sage);border-color:var(--green)}
.nature-masthead{position:relative;display:flex;justify-content:center;align-items:center;min-height:142px;overflow:hidden;border-bottom:1px solid var(--line);background:#f7f6ec}
.nature-brand{position:relative;z-index:1;text-align:center;padding:20px 16px}.brand-wordmark{display:flex;align-items:center;justify-content:center;gap:12px;font-size:38px;font-weight:800;letter-spacing:-1.5px;color:#365339}.brand-wordmark svg{width:39px;height:39px;fill:none;stroke:#61804b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nature-brand p{margin:4px 0 0;font-size:13px;letter-spacing:1px;color:#6f7c61}
.masthead-botanical{position:absolute;top:0;bottom:0;width:150px;background-image:url('Bilder/natur-entdecken-banner.png');background-size:auto 300px;opacity:.7;pointer-events:none}.botanical-left{left:0;background-position:left center;mask-image:linear-gradient(to right,#000 55%,transparent)}.botanical-right{right:0;background-position:right center;mask-image:linear-gradient(to left,#000 55%,transparent)}
main{width:100%;padding:25px 32px 12px;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.8px;font-weight:700;color:var(--muted);margin:0 0 5px}h1{font-size:clamp(28px,3vw,39px);letter-spacing:-1.2px;line-height:1.2;margin:0;font-weight:800}h1>span{color:var(--ink)}.badge{font-size:13px;color:var(--muted);padding:9px 14px;border:1px solid var(--line);border-radius:30px;white-space:nowrap}
nav{display:flex;gap:12px;margin:0 0 20px}nav button{display:flex;justify-content:center;align-items:center;gap:12px;flex:1;min-width:0;min-height:66px;border:1px solid var(--line);border-radius:15px;font-size:20px;font-weight:700;background:#f5f5eb;color:#63715a;transition:background .15s,border-color .15s}nav button.active{background:#e7edda;color:#36573c;border:2px solid #8da477;padding:10px 16px}nav button:hover{background:#edf1e4}.tab-icon{width:34px;height:34px;display:grid;place-items:center}.tab-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.instruction{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:5px 0 17px;margin:0 0 18px;border-bottom:1px solid var(--line)}#instruction{flex:1;min-width:180px;font-size:16px;line-height:1.55}#readInstruction{display:flex;align-items:center;gap:8px;background:var(--sage);border-color:#d0dcc1;font-weight:700;font-size:14px;white-space:nowrap;min-height:41px;padding:8px 13px}.hear-icon{font-family:Arial,sans-serif;font-size:19px}#progress{font-size:13px;color:#5e7855;white-space:nowrap;padding:9px 0 9px 6px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}#tools .row{margin:0 0 14px}#tools button,#tools select{font-size:14px;min-height:42px}#tools label{font-size:14px}
.play-layout{display:block}#landscape{position:relative;width:100%;aspect-ratio:1.85;border:1px solid #d2dcc5;border-radius:var(--radius);overflow:hidden;background:#bedfe2}.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.animal{position:absolute;transform:translate(-50%,-50%);width:12%;min-width:48px;min-height:48px;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;overflow:visible;isolation:isolate}.animal:hover,.animal.highlight{background:#fff9d57a;box-shadow:0 0 0 2px #ad9762}.animal.hint{background:#fff8cd99;border:3px dashed #a18341}.animal-picture{display:inline-block;width:100px;height:100px;flex-shrink:0;vertical-align:middle;background-image:url('Bilder/tiere-atlas.png');background-size:500% 300%;background-repeat:no-repeat}.animal .animal-picture{width:100%;height:100%;pointer-events:none}.animal-name{position:absolute;bottom:98%;left:50%;transform:translateX(-50%);background:#fffef5;border:1px solid #9eaf8d;border-radius:12px;padding:7px 13px;white-space:nowrap;font-size:clamp(14px,1.5vw,21px);font-weight:700;pointer-events:none;z-index:8}.animal-name.name-below{bottom:auto;top:94%}.animal:has(.animal-name){z-index:6}.zone{position:absolute;z-index:2;font-size:13px;font-weight:700;padding:6px 12px;min-height:35px;background:#fffef3ef;border:1px solid #d6dfc8;border-radius:11px}.zone[data-zone=air]{left:3%;top:5%}.zone[data-zone=ground]{left:3%;top:43%}.zone[data-zone=earth]{left:3%;top:75%}.zone[data-zone=water]{right:3%;top:61%}.zone.drop{border:2px dashed #91a37c}
body.sorting .play-layout{display:grid;grid-template-columns:clamp(100px,10vw,145px) minmax(0,1fr) clamp(100px,10vw,145px);gap:14px;align-items:start}body.sorting #landscape{position:sticky;top:12px;aspect-ratio:1.5}.animal-rail{display:flex;flex-direction:column;gap:8px;padding:7px;background:#edf0e4;border:1px solid var(--line);border-radius:var(--radius);position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:9px;text-align:center;min-width:130px;max-width:220px}.card.selected{background:#e8efda;border:2px solid #7e9c65}.card>button:first-child{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-width:100px;border:0;background:transparent;gap:5px;padding:6px}.card .animal-picture{width:90px;height:90px}.listen{padding:4px 12px;min-height:36px;font-size:14px;background:#f0f3e7}.cards{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.animal-rail .card{min-width:0;max-width:none;width:100%;padding:4px;border-radius:11px;cursor:grab;touch-action:none}.animal-rail .card>button:first-child{min-width:0;padding:3px;font-size:13px;line-height:1.2;gap:3px}.animal-rail .animal-picture{width:clamp(38px,5.5vh,60px);height:clamp(38px,5.5vh,60px)}.animal-rail .listen{min-height:28px;padding:1px 10px;font-size:12px;margin-top:2px}.rail-done{font-size:28px;color:var(--green);text-align:center}.drop-regions{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.drop-regions polygon{fill:transparent;stroke:#ffffff80;stroke-width:.4;stroke-dasharray:2 1}#landscape[data-hover-zone=air] [data-region=air],#landscape[data-hover-zone=ground] [data-region=ground],#landscape[data-hover-zone=earth] [data-region=earth],#landscape[data-hover-zone=water] [data-region=water]{fill:#fff8c14d;stroke:#bc9a47;stroke-width:.8}.touch-drag-ghost{position:fixed;z-index:1000;transform:translate(-50%,-50%);pointer-events:none;background:#fff8d499;border:2px solid #b89d5c;border-radius:50%;padding:5px}.touch-drag-ghost .animal-picture{width:85px;height:85px}
.sentence-lane{display:flex;align-items:stretch;gap:18px;padding:18px;margin:22px 0;background:#f2f2e7;border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}.target{flex:0 0 245px;background:#f5ecd3;border:1px solid #e1d3aa;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:12px}.target p{font-size:19px;line-height:1.45;margin:0}.target .mini-label{font-size:12px;letter-spacing:1px;color:#887747;font-weight:700}.target button{background:#fffaf0;border-color:#d9cba5;font-weight:700;font-size:15px}.sentence-build{flex:1;min-width:550px;padding:8px 0;display:flex;flex-direction:column;justify-content:center}.sentence-build h3{font-size:21px;margin:0 0 14px;color:var(--green)}.slots{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px}.slot{flex:1;min-width:155px;min-height:120px;border:2px dashed #a3b78b;border-radius:15px;background:#e8efdd;font-size:20px;font-weight:700;padding:13px}.slot:nth-child(2){background:#f5ead8;border-color:#c3aa82}.slot:nth-child(3){background:#e6eff0;border-color:#9cb8b7}.slot .animal-picture{width:64px;height:64px}.place-picture{display:inline-block;width:90px;height:68px;border-radius:11px;background-image:url('Bilder/landschaft.png');background-size:300% 300%;border:1px solid #b8c9ac;vertical-align:middle;flex-shrink:0}.place-air{background-position:25% 0}.place-ground{background-position:20% 48%}.place-earth{background-position:15% 100%}.place-water{background-position:100% 85%}.slot .place-picture{width:65px;height:55px}.sentence-choices{justify-content:center;gap:16px;padding:8px 0}.sentence-choices .card{min-width:160px;border:1px solid #bdcbaa;border-radius:16px}.sentence-choices .card>button:first-child{min-height:85px;font-size:22px;font-weight:700}.sentence-choices .listen{border-radius:30px;min-width:44px}.fullsentence{text-align:center;font-size:26px;font-weight:700;padding:20px;border:1px solid #bdcdaa;border-radius:16px;background:#e9efdc}.sentence-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:26px 0 18px}.sentence-navigation button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:155px;min-height:64px;padding:11px 20px;font-size:21px;font-weight:700;border-radius:16px}.sentence-navigation #prevSentence{background:#e9eff0;border-color:#bbcfcf}.sentence-navigation #nextSentence{background:#e8efda;border-color:#b8c9a0}.sentence-navigation #clearSentence{background:#f5ecd1;border-color:#dccba1}.nav-picture{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:50%;background:#fffaf3b3;font-family:Arial,sans-serif;font-size:28px}.sentence-navigation button:hover{filter:brightness(.97)}
#feedback{min-height:34px;margin:15px 0 0;font-size:16px;font-weight:700;color:#527346}.complete{color:#446b44;font-size:23px;text-align:center}footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center;line-height:1.8;margin-top:20px;padding:12px 0}footer small{font-size:11px}footer #settingsButton{display:block;margin:8px auto 12px;padding:4px 10px;min-height:28px;font-size:12px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px}footer #settings{text-align:left;max-width:950px;margin:18px auto;padding:20px;border:1px solid var(--line);border-radius:16px;background:#edf1e5;color:var(--ink);font-size:14px;line-height:1.5}#settings label{display:inline-flex;align-items:center;gap:8px;margin:8px}#settings p{font-size:13px}.pict{font-size:38px;display:block}
.arrive{pointer-events:none;z-index:4;transform-origin:center}.arrive-air{animation:fly-in .9s cubic-bezier(.2,.65,.25,1) both}.arrive-ground{animation:hop-in .75s ease-out both}.arrive-earth{animation:earth-in .8s ease-out both}.arrive-water{animation:swim-in .9s ease-out both}
@keyframes fly-in{0%{opacity:0;transform:translate(-140%,-110%) rotate(-14deg) scale(.7)}60%{opacity:1;transform:translate(-45%,-64%) rotate(5deg) scale(1.05)}100%{transform:translate(-50%,-50%) rotate(0) scale(1)}}
@keyframes hop-in{0%{opacity:0;transform:translate(-110%,-50%) scale(.7)}35%{opacity:1;transform:translate(-80%,-100%) scale(1)}70%{transform:translate(-55%,-40%) scale(1.05,.95)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes earth-in{0%{opacity:0;transform:translate(-50%,-15%) scale(.6)}70%{opacity:1;transform:translate(-50%,-55%) scale(1.03)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes swim-in{0%{opacity:0;transform:translate(20%,-40%) rotate(8deg) scale(.7)}50%{opacity:1;transform:translate(-35%,-60%) rotate(-4deg)}100%{transform:translate(-50%,-50%) rotate(0) scale(1)}}
body.reduce *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:1600px){main{padding-left:45px;padding-right:45px}.nature-masthead{min-height:156px}}
@media(max-width:850px){main{padding:20px 15px 10px}.badge{display:none}.heading{margin-bottom:18px}.nature-masthead{min-height:124px}.brand-wordmark{font-size:32px}.masthead-botanical{width:100px;opacity:.45;background-size:auto 220px}.brand-wordmark svg{width:30px;height:30px}.nature-brand p{font-size:12px}.animal{width:13%}body.sorting .play-layout{grid-template-columns:86px minmax(0,1fr) 86px;gap:6px}.animal-rail{padding:3px;gap:5px}.animal-rail .card>button:first-child{font-size:11px}body.sorting #landscape{aspect-ratio:1.05;top:6px}.sorting .animal{min-width:32px;min-height:32px}.sorting .zone{font-size:11px;min-height:30px;padding:3px 5px}.sentence-build{min-width:510px}.sentence-lane{gap:12px;padding:12px}.target{flex-basis:210px}.slot{font-size:18px;min-width:145px}.sentence-choices .card{min-width:130px}.sentence-choices .card>button:first-child{font-size:20px}}
@media(max-width:600px){main{padding:18px 11px 8px}.nature-masthead{min-height:115px}.nature-brand{padding:20px 8px}.brand-wordmark{font-size:29px;gap:8px;letter-spacing:-1px}.masthead-botanical{width:55px;opacity:.25;background-size:auto 180px}.nature-brand p{letter-spacing:.4px;font-size:12px}h1{font-size:29px}.eyebrow{font-size:10px;letter-spacing:1.4px}nav{gap:8px;margin-bottom:15px}nav button{flex-direction:column;gap:4px;min-height:76px;font-size:14px;padding:8px 4px;border-radius:13px}nav button.active{padding:7px 3px}.tab-icon{width:29px;height:29px}.tab-icon svg{width:25px;height:25px}#instruction{flex-basis:100%;font-size:15px}.instruction{gap:10px;padding-bottom:14px;margin-bottom:14px}#progress{margin-left:auto;font-size:12px}#landscape{aspect-ratio:1.35}.animal-name{font-size:13px;padding:5px 8px}.zone{font-size:12px;padding:4px 7px}.sentence-navigation{gap:10px}.sentence-navigation button{min-width:130px;min-height:59px;font-size:18px;padding:10px 14px}.nav-picture{width:30px;height:30px;font-size:25px}}
/* Satzaufgabe bleibt im Mittelpunkt; Landschaft dient hier als kleine Bildhilfe. */
.sentencing .play-layout{max-width:390px;margin:0 auto}
.sentencing #landscape{aspect-ratio:1.85}
.sentencing .animal{min-width:32px;min-height:32px}
/* Verspielte Spieloberfläche; der ruhige, kompakte Markenkopf bleibt bestehen. */
main{padding-top:25px}
.heading{gap:20px;padding:20px 25px 15px;margin-bottom:20px;background:linear-gradient(115deg,#f0f5df,#fff9e5 70%,#f0f5df);border:2px solid #e1e8c9;border-radius:30px}
.heading .eyebrow{text-transform:none;letter-spacing:.5px;font-size:17px;color:#6a8050;margin-bottom:8px;font-weight:700}
.heading h1{font-size:clamp(30px,3.8vw,54px);letter-spacing:-1.4px;color:#325e3f;margin:0 0 5px;line-height:1.2}
.heading h1>span{color:#aa7020;display:inline-block;background:#ffe5a4;padding:0 10px 4px;border-radius:45% 35% 40% 30%;transform:rotate(-3deg)}
.heading .badge{display:flex;align-items:center;gap:12px;background:#fffef8;border:2px solid #d4dfba;border-radius:23px;padding:12px 18px;color:#486440;font-size:16px;font-weight:700;line-height:1.35;flex-shrink:0;transform:rotate(2deg)}
.badge-number{display:grid;place-items:center;width:58px;height:58px;background:#e6edc6;border-radius:50%;font-size:32px;font-weight:800;color:#486440}
nav[aria-label="Spielseiten"]{gap:18px;margin-bottom:22px;padding:0 5px}
nav[aria-label="Spielseiten"] button{gap:13px;min-height:87px;border:3px solid;border-radius:25px;font-size:clamp(18px,1.7vw,25px);font-weight:800;box-shadow:0 5px 0 var(--tab-shadow);transition:transform .12s,box-shadow .12s;position:relative}
nav button[data-page="discover"]{background:#e8f2d4;border-color:#a9c77b;color:#3d642a;--tab-shadow:#c5d9a7}
nav button[data-page="sort"]{background:#e2f0fb;border-color:#94bdd5;color:#285c78;--tab-shadow:#b5cfdf}
nav button[data-page="sentence"]{background:#ffedcb;border-color:#dfb876;color:#855b23;--tab-shadow:#eed4a5}
nav[aria-label="Spielseiten"] button.active{outline:3px solid currentColor;outline-offset:3px;transform:translateY(-2px);padding:11px 17px}
nav button.active::after{content:'';position:absolute;bottom:-15px;left:calc(50% - 8px);border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid currentColor}
nav[aria-label="Spielseiten"] button:hover{transform:translateY(-3px)}
nav[aria-label="Spielseiten"] button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tab-shadow)}
.tab-icon{width:50px;height:50px;border-radius:17px;background:#fffdf4c9}.tab-icon svg{width:36px;height:36px;stroke-width:3}
.instruction{border:2px solid #e2e8d4;background:#fffef6;border-radius:22px;padding:14px 18px;gap:15px;margin-top:28px;margin-bottom:18px}
#instruction{font-size:clamp(17px,1.3vw,21px);font-weight:600}
#readInstruction{font-weight:800;background:#fff0c3;border:2px solid #dfbe6c;border-radius:18px;box-shadow:0 3px 0 #ecdbab;color:#765824;font-size:17px;min-height:46px;padding:11px 17px}
#progress{background:#e8f2dc;border:1px solid #cadbb7;border-radius:18px;padding:11px 14px;font-size:14px;font-weight:700}
#landscape{border:3px solid #e0e8cd;border-radius:25px}
button,select{border-radius:13px}.zone{border-radius:13px}
.card{border:2px solid #dfe6d7;border-radius:18px;background:#fffef9}.card.selected{border-color:#32694e;background:#e7f0da}
.animal-rail{background:#edf2e4;border:0;border-radius:18px}.animal-rail .card{border-radius:12px}
.sentence-lane{border:3px solid #dfd5b4;border-radius:28px;background:#fffdf4}
.sentence-lane .target{background:#fff0be;border:2px solid #e8c973;border-radius:22px}
.sentence-lane .target .mini-label{font-size:14px;color:#796020}
.sentence-lane .target button{background:white;border:2px solid #d6b66c;border-radius:18px}
.sentence-build h3{font-size:23px;color:#3b7256}
.sentence-build .slot{min-height:125px;border-radius:22px;border-width:3px;background:#eaf3df;font-size:21px;padding:15px}
.sentence-build .slot:nth-child(2){background:#ffeadc;border-color:#d79565}
.sentence-build .slot:nth-child(3){background:#e4f1fb;border-color:#7ca8be}
.sentence-choices .card{border:3px solid #b9d1a8;border-radius:23px;background:#fffef8;box-shadow:0 5px 0 #d7e3ca}
.sentence-choices .card>button:first-child{min-height:90px;font-size:23px;font-weight:700}
.sentencing .fullsentence{border:3px solid #bdd3a6;background:#eaf5dd;border-radius:24px;font-size:28px}
.sentence-navigation{gap:20px;margin:30px 0 18px}
.sentence-navigation button{gap:15px;min-width:175px;min-height:82px;padding:13px 23px;font-size:24px;font-weight:800;border:3px solid;border-radius:26px;box-shadow:0 6px 0 var(--button-shadow);transition:transform .12s,box-shadow .12s}
.sentence-navigation #prevSentence{background:#e4f2fd;border-color:#87badb;color:#235575;--button-shadow:#b1d0e5}
.sentence-navigation #nextSentence{background:#e4f3ce;border-color:#9fc36d;color:#355c23;--button-shadow:#bbd495}
.sentence-navigation #clearSentence{background:#fff0c6;border-color:#dbb65f;color:#725115;--button-shadow:#e7cf92}
.sentence-navigation .nav-picture{width:44px;height:44px;background:#ffffffbd;font-size:35px}
.sentence-navigation button:hover{transform:translateY(-2px);filter:none}
.sentence-navigation button:active{transform:translateY(5px);box-shadow:0 1px 0 var(--button-shadow)}
@media(max-width:700px){.heading{padding:17px;gap:10px}.heading .eyebrow{font-size:14px}.heading .badge{display:none}.heading h1{font-size:31px}nav[aria-label="Spielseiten"]{gap:10px;padding:0 3px}nav[aria-label="Spielseiten"] button{flex-direction:column;gap:6px;font-size:15px;padding:10px 5px;min-height:95px;border-radius:21px}.tab-icon{width:40px;height:40px;border-radius:13px}.tab-icon svg{width:29px;height:29px}.instruction{padding:12px;gap:10px}#instruction{flex-basis:100%;font-size:16px}#progress{margin-left:auto;font-size:13px;padding:10px}#readInstruction{font-size:15px}.sentence-build .slot{font-size:18px}.sentence-choices .card>button:first-child{font-size:20px}.sentence-navigation{gap:12px}.sentence-navigation button{min-width:145px;min-height:72px;font-size:21px;padding:10px 15px}.sentence-navigation .nav-picture{width:36px;height:36px;font-size:29px}}
@font-face{font-family:'Delight Coffee';src:url('Fonts/Delight-Coffee.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.brand-wordmark,.heading h1{font-family:'Delight Coffee','Trebuchet MS',sans-serif;font-weight:400;letter-spacing:.2px}
.brand-wordmark{font-size:clamp(35px,4vw,49px);line-height:1.2}
.heading h1{font-size:clamp(33px,4vw,54px);line-height:1.25}
@media(max-width:600px){.brand-wordmark{font-size:32px}.heading h1{font-size:33px}}