@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#0b2926;--deep:#062b29;--gold:#f5bc56;--paper:#f6e9cb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.45 Inter,Arial,sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit}button,select{font:inherit}.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;background:#fff;padding:9px;clip:auto;z-index:90}.topbar{background:#082723;color:white;position:relative;z-index:10}.navwrap{min-height:70px;max-width:1480px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:25px}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:250px}.logo-symbol{color:#eebf69;font-size:32px}.logo strong{display:block;color:#fff8e8;font:700 31px/.95 'Cormorant Garamond',serif}.logo strong span{color:var(--gold)}.logo small{display:block;font-size:10px;margin-top:4px;color:#f5e1ae}.navlinks{display:flex;align-items:center;gap:22px;margin:auto}.navlinks a{text-decoration:none;white-space:nowrap;font-size:13px;font-weight:600}.navlinks a:hover,.navlinks a.active{color:#f4c777}.header-actions{display:flex;align-items:center;gap:9px}.header-actions>a{white-space:nowrap;padding:11px 15px;border-radius:11px;text-decoration:none;font-size:12px;font-weight:700}.header-outline{border:1px solid #f7e4b8}.header-gold{background:var(--gold);color:#1b241d}.header-actions select{padding:9px;background:#113933;color:#fff;border:1px solid #446257;border-radius:7px;font-size:12px}.menu-toggle{display:none}.hero{position:relative;width:100%;background:#123d34}.hero-art{display:block;width:100%;height:auto}.hero-hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border-radius:30px}.hotspot:focus-visible{outline:4px solid #fff;outline-offset:2px;background:rgba(255,255,255,.22)}.adventure-hotspot{left:30%;top:55.4%;width:23.2%;height:10.5%}.classic-hotspot{left:53.4%;top:55.4%;width:17.7%;height:10.5%}.mobile-hero-copy{display:none}.cream{background:radial-gradient(ellipse at top,#fff7e5,#f5e5c7 90%)}.content{max-width:1350px;padding:0 24px;margin:auto}.section-paths{padding:25px 0 0}.cream h2{font:700 clamp(34px,3.2vw,47px)/1 'Cormorant Garamond',Georgia,serif;text-align:center;margin:0 0 7px}.intro{text-align:center;font-size:15px;max-width:880px;margin:0 auto 19px}.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}.path{display:grid;grid-template-columns:44% 56%;min-height:316px;background:#072e2a;border-radius:18px;overflow:hidden;border:2px solid #caa169;color:white;box-shadow:0 6px 18px #3d2e1e44}.path>img{width:100%;height:100%;object-fit:cover}.path-body{padding:23px 22px;display:flex;flex-direction:column}.path h3{font:700 27px/1.04 'Cormorant Garamond',Georgia,serif;margin:0 0 8px;display:flex;align-items:center;gap:10px}.round-icon{width:39px;height:39px;border-radius:100%;background:#fff4d7;color:#123631;display:grid;place-items:center;flex-shrink:0;font-size:17px}.path p{margin:0 0 8px;font-size:13px}.path ul{padding:0;margin:3px 0 auto;list-style:none}.path li{font-size:12px;margin:5px 0}.path li:before{content:'✓';color:#ffe3ab;margin-right:8px}.cta{display:inline-block;text-align:center;text-decoration:none;border-radius:50px;padding:11px 16px;font-size:13px;font-weight:700;align-self:start}.cta.gold{background:linear-gradient(#ffd881,#e9a843);color:#142c27}.cta.outline{border:1px solid #f5cd7a;color:#fff8e7}.audience{padding:22px 0 12px}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.age-card{min-height:239px;border-radius:13px;overflow:hidden;border:2px solid #b79057;background-image:var(--age-image);background-size:cover;background-position:center;display:flex;align-items:end;box-shadow:0 4px 12px #6b512b33}.age-caption{background:rgba(3,43,38,.94);color:#fff;width:100%;padding:15px 20px}.age-caption h3{font:700 21px 'Cormorant Garamond',Georgia,serif;margin:0 0 2px}.age-caption p{font-size:12px;margin:0}.characters{padding:17px 0 25px}.portrait-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.portrait{width:110px;height:112px;border-radius:12px;overflow:hidden;border:2px solid #c29762;box-shadow:0 5px 12px #3d321c3b}.portrait img{width:100%;height:100%;object-fit:cover}.fineprint{text-align:center;color:#776e5e;font-size:11px;margin:13px auto 0}.world{background:linear-gradient(90deg,#052622dc,#0526229c 35%,#05262212 90%),url('../img/world-clean.webp') center 48% /cover;min-height:300px;display:flex;align-items:center;color:#fff}.world-content{width:min(1350px,100%);margin:auto;padding:25px 40px}.world h2{font:700 37px/1.1 'Cormorant Garamond',serif;margin:0 0 8px}.world p{max-width:565px;font-size:14px}.language-strip{background:#f1e0bc;padding:24px 0 30px}.language-strip h2{font:700 29px 'Cormorant Garamond',serif;text-align:center;margin:0 0 14px}.language-cards{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.language-card{border:1px solid #bd9669;border-radius:9px;padding:8px 14px;background:#fff6e0;display:flex;gap:12px;align-items:center;font-size:12px}.language-card span{font-size:10px;color:#816c4c}footer{background:#062b2a;color:#fff;padding:20px 28px 13px}.footer-grid{max-width:1370px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.footer-grid>div{display:flex;gap:13px;align-items:center}.footer-grid b{font-size:32px;line-height:1;color:#fff7dc}.footer-grid strong,.footer-grid small{display:block}.footer-grid strong{font-size:13px}.footer-grid small{font-size:11px;color:#d4e2d8}footer .fineprint{color:#9ebcb4;margin-top:23px}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #f8c55f;outline-offset:3px}
@media(max-width:1160px){.navwrap{gap:14px}.navlinks{gap:13px}.navlinks a{font-size:12px}.logo{min-width:195px}.logo strong{font-size:25px}.header-actions>a{padding:9px;font-size:11px}.path{grid-template-columns:39% 61%}.path-body{padding:16px}.path h3{font-size:22px}}
@media(max-width:870px){.navwrap{flex-wrap:wrap;min-height:62px}.logo{margin-right:auto}.menu-toggle{display:block;border:1px solid #6d8377;border-radius:7px;background:#16403b;color:#fff;padding:6px 10px}.navlinks{display:none;order:9;flex-basis:100%;padding:10px 0;flex-direction:column;align-items:start}.navlinks.open{display:flex}.header-actions .header-outline,.header-actions .header-gold{display:none}.paths{grid-template-columns:1fr}.path{grid-template-columns:39% 61%}.audience-grid{gap:8px}.age-card{min-height:205px}.world{min-height:330px}}
@media(max-width:600px){.navwrap{padding:0 16px}.logo strong{font-size:24px}.logo small{font-size:9px}.hero-art{height:350px;object-fit:cover;object-position:61% center;filter:brightness(.56)}.hero-hotspots{display:none}.mobile-hero-copy{display:block;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px 16px;color:white}.mobile-hero-copy h1{font:700 50px/.94 'Cormorant Garamond',Georgia,serif;margin:0}.mobile-hero-copy h1 span{color:#f5c367}.mobile-hero-copy h2{font:700 27px 'Cormorant Garamond',Georgia,serif;margin:7px 0}.mobile-hero-copy p{font-size:13px;max-width:420px}.hero-mobile-buttons{display:flex;gap:9px;margin-top:8px}.hero-mobile-buttons a{background:#efb95b;color:#152b26;padding:10px 12px;font-size:11px;font-weight:700;border-radius:24px;text-decoration:none}.hero-mobile-buttons a+a{background:#123e38;color:#fff}.content{padding:0 16px}.section-paths{padding-top:30px}.cream h2{font-size:34px}.intro{font-size:13px}.path{grid-template-columns:1fr}.path>img{height:170px}.path-body{padding:17px}.audience-grid{grid-template-columns:1fr}.age-card{min-height:220px}.portrait{width:78px;height:90px}.world-content{padding:34px 20px}.footer-grid{grid-template-columns:1fr 1fr;gap:20px}.footer-grid b{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v7: Seitenrahmen für große Monitore – maximal 1920 px und exakt mittig. */
body { background: #082420; }
.page-frame {
  width: 100%;
  max-width: 1920px;
  min-height: 100vh;
  margin-inline: auto;
  background: var(--paper);
  box-shadow: 0 0 56px rgba(0, 0, 0, .26);
}
/* Der Hero folgt immer der Breite des zentrierten Seitenrahmens.
   Auf kleineren Bildschirmen bleibt die bisherige responsive Gestaltung erhalten. */
.page-frame .hero { max-width: 100%; }
@media (max-width: 1920px) {
  .page-frame { box-shadow: none; }
}

/* v8: Erweiterte Bereiche unter dem unveränderten Hero v7. */
.section-overline{font:800 10px/1.4 Arial,sans-serif;letter-spacing:.23em;text-align:center;color:#9b6b2f;margin:0 0 8px;}
.audience{padding-top:28px;padding-bottom:26px;}
.audience .intro{max-width:790px;}
.audience-grid{gap:18px;}
.age-card{min-height:270px;position:relative;background-position:center;background-size:cover;border:2px solid #a58552;border-radius:17px;overflow:hidden;box-shadow:0 10px 22px #61482c33;}
.age-card:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(4,30,26,.1) 38%,rgba(4,30,26,.93) 100%);}
.age-caption{display:flex;align-items:flex-start;gap:13px;position:absolute;inset:auto 0 0;padding:18px 20px 19px;color:#fff;}
.age-caption h3{font:700 27px/1.08 'Cormorant Garamond',Georgia,serif;margin:0 0 4px;color:#fff7df;}
.age-caption p{font:400 13px/1.45 Inter,Arial,sans-serif;margin:0;color:#edf6ea;}
.age-symbol{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#f2e5bd;color:#153c34;font-size:23px;}
.section-small-note{text-align:center;font-size:12px;color:#756747;margin:16px 0 0;}
.characters{padding-top:35px;padding-bottom:30px;}
.characters .intro{max-width:780px;margin-bottom:22px;}
.character-gallery{display:flex;justify-content:center;align-items:center;gap:14px;max-width:1000px;margin:0 auto;}
.character-gallery .portrait-row{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;overflow-x:auto;scrollbar-width:thin;padding:8px 4px 16px;}
.character-gallery .portrait{flex:0 0 105px;width:105px;height:118px;background:#d5c7a2;border:3px solid #cfad6c;border-radius:13px;overflow:hidden;box-shadow:0 5px 13px #3e2e202e;cursor:pointer;padding:0;transition:transform .14s,border-color .14s,box-shadow .14s;}
.character-gallery .portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.character-gallery .portrait.is-selected{border-color:#b87518;box-shadow:0 0 0 3px #f1c768,0 8px 18px #3e2e204b;transform:translateY(-3px);}
.gallery-arrow{flex:0 0 35px;width:35px;height:35px;border:0;border-radius:50%;color:#fff;background:#644217;box-shadow:0 3px 8px #43291655;font-size:32px;line-height:1;cursor:pointer;}
.gallery-arrow:hover{background:#855a21;}
.character-feedback{font-size:12px;color:#705329;text-align:center;margin:0 0 14px;}
.character-action{text-align:center;}
.character-action .cta{display:inline-block;border-radius:50px;padding:10px 22px;}
.characters .fineprint{text-align:center;margin-top:16px;}
.language-strip{padding:42px 0 46px;background:radial-gradient(ellipse at 50% 0,#fff3d9,#ecdbb9);}
.language-strip h2{font-size:39px;}
.language-strip .intro{max-width:700px;}
.language-cards{gap:16px;}
.language-card{min-width:180px;min-height:94px;padding:18px;flex-direction:column;justify-content:center;gap:4px;border:1px solid #c4a16c;background:#fff7e6;border-radius:16px;box-shadow:0 5px 13px #6e54341b;}
.language-glyph{font-size:20px;color:#af7c33;line-height:1;}
.language-card strong{font-size:16px;}
.language-card .language-status{font-size:11px;color:#80633e;}
.language-strip .fineprint{text-align:center;}
@media(max-width:900px){.age-card{min-height:240px}.age-caption{padding:14px}.age-caption p{font-size:12px}.age-symbol{display:none}.character-gallery .portrait{flex-basis:88px;width:88px;height:102px;}}
@media(max-width:600px){.audience{padding-top:26px}.age-card{min-height:260px}.age-symbol{display:grid}.character-gallery{gap:6px}.gallery-arrow{flex-basis:31px;width:31px;height:31px}.character-gallery .portrait-row{justify-content:flex-start}.character-gallery .portrait{flex-basis:91px;width:91px;height:105px}.language-strip h2{font-size:32px}.language-card{min-width:130px;}}
@media(prefers-reduced-motion:reduce){.character-gallery .portrait{transition:none}}

/* v9: Fehlerkorrekturen – die bestätigte v7-Optik bleibt unverändert. */
.age-card{background-image:none;isolation:isolate;}
.age-card>.age-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;}
.age-card:before{z-index:-1;}
/* Weltmotiv rechts zeigen; den mit Schrift versehenen linken Bildteil nicht darstellen. */
.world{position:relative;isolation:isolate;overflow:hidden;background:#052622;min-height:420px;display:flex;align-items:center;}
.world::before{content:'';position:absolute;z-index:-2;inset:0;background:url('../img/world-clean.webp') center center / cover no-repeat;transform:scale(1.02);}
.world::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,38,34,.94) 0%,rgba(5,38,34,.90) 26%,rgba(5,38,34,.70) 48%,rgba(5,38,34,.30) 72%,rgba(5,38,34,.18) 100%),linear-gradient(180deg,rgba(5,38,34,.16) 0%,rgba(5,38,34,.10) 58%,rgba(5,38,34,.36) 100%);pointer-events:none;}
.world-content{position:relative;z-index:1;width:min(1350px,100%);margin:auto;padding:52px 42px;}
.world-content .cta{margin-top:14px;}

/* v11: world artwork without baked-in labels */
.world{background:#082e28;min-height:420px;}
.world::before{background-image:url('../img/world-clean.webp');background-position:center;background-size:cover;}
.world::after{background:linear-gradient(90deg,rgba(4,35,31,.97) 0%,rgba(4,35,31,.84) 29%,rgba(4,35,31,.44) 60%,rgba(4,35,31,.08) 100%);}
.world-content{position:relative;z-index:2;}
@media(max-width:600px){.world{min-height:350px}.world::after{background:linear-gradient(90deg,rgba(4,35,31,.95),rgba(4,35,31,.63));}}

/* v12: Ein einziges Weltmotiv – keine zusammengesetzten Bildhälften. */
.world{background:#052722;min-height:420px;}
.world::before{background-image:url('../img/world-seamless.webp');background-position:center center;background-size:cover;transform:none;}
.world::after{background:linear-gradient(90deg,rgba(4,35,31,.18) 0%,rgba(4,35,31,.08) 50%,transparent 100%);}
@media(max-width:600px){.world::after{background:linear-gradient(90deg,rgba(4,35,31,.70),rgba(4,35,31,.35));}.world::before{background-position:58% center;}}
