@font-face{font-family:Comfortaa;src:url('./assets/fonts/Comfortaa.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/Nunito-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-latin-700-normal.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-latin-800-normal.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --tiefsee:#0F3B4C;--schaum:#F7FBFA;--blase:#7FD1C7;--blase-hell:#BDE8E1;--pfirsich:#FF9F6E;--sonne:#FFD65C;
  --surface:var(--schaum);--surface-raised:#FFFFFF;--surface-bubble:#E3F4F1;--line:#CFE3E0;--line-strong:#5C8C97;
  --ink:var(--tiefsee);--ink-muted:#46707D;--accent-text:#A8461A;--action:var(--tiefsee);--on-action:var(--schaum);--on-brand:var(--tiefsee);--focus:var(--tiefsee);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-sm:8px;--radius-md:16px;--radius-lg:28px;--radius-pill:999px;--radius-bubble:50%;
  --shadow-float:0 10px 28px rgba(15,59,76,.14);
  --font-display:Comfortaa,Nunito,system-ui,sans-serif;--font-body:Nunito,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0;background:var(--surface);color:var(--ink);font:400 17px/27px var(--font-body)}
img,svg{display:block;max-width:100%}
button,a{font:inherit}
a{color:inherit}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-3) var(--space-6);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill)}
.skip-link:focus{top:var(--space-4)}
.site-shell{width:min(100% - 2*var(--space-8),1360px);margin:0 auto;flex:1 0 auto}

.site-header{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.brand-link{display:inline-block;border-radius:var(--radius-pill);padding:var(--space-2);margin-left:calc(-1*var(--space-2))}
.brand-link img{width:270px;height:auto}
.site-nav{display:flex;align-items:center;gap:var(--space-4)}
.nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-6);border:2px solid var(--line-strong);border-radius:var(--radius-pill);font:700 16px/20px var(--font-body);text-decoration:none;transition:transform .2s,box-shadow .2s}
.nav-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.brand-link:focus-visible,.nav-link:focus-visible,.button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.hero{--surface:var(--tiefsee);--surface-raised:#164B5E;--surface-bubble:#1A5364;--ink:var(--schaum);--ink-muted:#A9CCD3;--action:var(--pfirsich);--on-action:var(--tiefsee);--focus:var(--sonne);position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--space-8);min-height:565px;padding:var(--space-16);background:var(--surface);color:var(--ink);border-radius:var(--radius-lg)}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-230px;top:-230px;border:1px solid #2C6070;border-radius:50%;pointer-events:none}
.hero-copy{position:relative;z-index:2;max-width:650px}
.eyebrow{display:block;font:800 12px/16px var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.hero h1{margin:var(--space-6) 0 var(--space-6);font:700 clamp(42px,4.1vw,56px)/1.075 var(--font-display);letter-spacing:-.01em;max-width:12.5ch}
.hero-lead{margin:0 0 var(--space-8);max-width:42ch;font:400 20px/30px var(--font-body);color:var(--ink-muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-3) var(--space-6);border:0;border-radius:var(--radius-pill);font:700 16px/20px var(--font-body);text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-float)}
.button-primary{background:var(--action);color:var(--on-action)}
.button-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-strong)}
.button:disabled{cursor:not-allowed;opacity:.65}
.hero-art{position:relative;z-index:1;display:grid;place-items:center;height:430px}
.hero-art::before{content:"";position:absolute;width:min(36vw,420px);height:min(36vw,420px);border-radius:50%;background:var(--surface-bubble);border:1px solid #6FA3AE}
.hero-art::after{content:"";position:absolute;width:min(42vw,480px);height:min(42vw,480px);border-radius:50%;border:1px solid #2C6070}
.hero-emblem{position:relative;z-index:2;width:min(29vw,330px);height:auto;animation:float 10s ease-in-out infinite}
.orbit-dot{position:absolute;z-index:3;border-radius:50%;border:2px solid var(--schaum);background:var(--blase-hell)}
.orbit-dot-one{width:22px;height:22px;left:11%;top:13%;animation:float 9s ease-in-out infinite}
.orbit-dot-two{width:12px;height:12px;right:8%;bottom:14%;animation:float 11s ease-in-out infinite reverse}
.orbit-dot-three{width:7px;height:7px;right:16%;top:11%;background:var(--sonne);border:0}
@keyframes float{50%{transform:translateY(-8px)}}

.books-section{padding:var(--space-16) 0 var(--space-16)}
.books-top{display:flex;align-items:end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-8)}
.books-top h2{margin:var(--space-2) 0 0;font:700 30px/36px var(--font-display)}
.books-top p{margin:0;max-width:34ch;color:var(--ink-muted);text-align:right;font:400 17px/27px var(--font-body)}
.book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.book-card{display:flex;flex-direction:column;min-width:0;padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
.book-stage{position:relative;display:flex;align-items:center;justify-content:center;height:390px;margin-bottom:var(--space-6);overflow:hidden;background:var(--surface-bubble);border-radius:var(--radius-md)}
.book-stage::before,.book-stage::after{content:"";position:absolute;border-radius:50%;border:1.5px solid var(--blase);pointer-events:none}
.book-stage::before{width:230px;height:230px;right:-110px;top:-105px}
.book-stage::after{width:94px;height:94px;left:-35px;bottom:-40px}
.book-stage .small-bubble{position:absolute;width:16px;height:16px;top:34px;left:42px;border:2px solid var(--tiefsee);border-radius:50%;background:var(--blase-hell)}
.cover-window{position:relative;z-index:1;overflow:hidden;flex:none;box-shadow:var(--shadow-float);border-radius:3px 8px 8px 3px}
.cover-window img{position:static;width:100%;height:100%;object-fit:contain}
.cover-frieda{height:338px;aspect-ratio:612/792}
.cover-mila{height:300px;aspect-ratio:8.25/6}
.book-label{color:var(--ink-muted);font:800 12px/16px var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.book-card h3{margin:var(--space-2) 0;font:700 22px/28px var(--font-display)}
.book-subtitle{margin:0 0 var(--space-4);color:var(--ink-muted);font:700 15px/22px var(--font-body)}
.book-description{margin:0 0 var(--space-4);max-width:65ch;font:400 15px/22px var(--font-body)}
.book-facts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;margin-bottom:var(--space-6)}
.fact{display:inline-flex;align-items:center;min-height:28px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface-bubble);color:var(--ink);font:700 13px/16px var(--font-body)}
.book-cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.book-cta .button{min-width:190px}
.link-note{color:var(--ink-muted);font:400 15px/22px var(--font-body)}

.site-footer{position:relative;overflow:hidden;background:var(--tiefsee);color:var(--schaum);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.site-footer::before{content:"";position:absolute;width:280px;height:280px;border:1px solid #2C6070;border-radius:50%;right:-100px;top:-140px}
.footer-inner{display:flex;align-items:end;justify-content:space-between;gap:var(--space-8);padding:var(--space-12) 0}
.footer-logo{width:230px;height:auto}
.footer-note{margin:var(--space-4) 0 0;color:#A9CCD3;font:400 15px/22px var(--font-body)}
.preview-status{display:inline-flex;align-items:center;gap:var(--space-2);max-width:31ch;padding:var(--space-3) var(--space-4);border:1px solid #6FA3AE;border-radius:var(--radius-md);color:#A9CCD3;font:400 15px/22px var(--font-body)}
.preview-status::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--sonne)}
.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);color:#A9CCD3;font:400 15px/22px var(--font-body)}
.footer-links nav{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.footer-links a:hover{text-decoration-thickness:2px;text-underline-offset:4px;color:var(--schaum)}
.footer-links a:focus-visible{outline:3px solid var(--sonne);outline-offset:4px}

.legal-main{padding:var(--space-8) 0 var(--space-16)}
.legal-hero{position:relative;overflow:hidden;background:var(--tiefsee);color:var(--schaum);padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg)}
.legal-hero::after{content:"";position:absolute;right:-60px;top:-100px;width:300px;height:300px;border:1px solid #2C6070;border-radius:50%}
.legal-hero .eyebrow{color:#A9CCD3}
.legal-hero h1{position:relative;z-index:1;margin:var(--space-4) 0 0;font:700 clamp(36px,4vw,48px)/1.12 var(--font-display)}
.legal-card{max-width:850px;margin:var(--space-8) auto 0;padding:var(--space-12);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg)}
.legal-card h2{margin:var(--space-8) 0 var(--space-3);font:700 22px/29px var(--font-display)}
.legal-card h2:first-child{margin-top:0}
.legal-card p,.legal-card address{margin:0 0 var(--space-4);font:400 16px/26px var(--font-body)}
.legal-card address{font-style:normal}
.legal-card a{text-underline-offset:3px}
.legal-card a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.legal-card .legal-date{margin-top:var(--space-8);color:var(--ink-muted);font-size:14px}
.legal-card .legal-back{display:inline-flex;margin-top:var(--space-4);font-weight:700}

@media(max-width:960px){
  .hero{min-height:510px;padding:var(--space-12);grid-template-columns:1.15fr .85fr}
  .hero-art{height:350px}
  .hero-emblem{width:min(28vw,260px)}
  .book-stage{height:320px}
  .cover-frieda{height:285px}.cover-mila{height:240px}
}
@media(max-width:700px){
  .site-shell{width:min(100% - 2*var(--space-4),600px)}
  .site-header{min-height:88px}
  .brand-link img{width:216px}
  .site-nav{display:none}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:var(--space-8) var(--space-6) var(--space-6)}
  .hero h1{font-size:clamp(36px,8vw,46px);line-height:1.1;max-width:13ch}
  .hero-lead{font-size:18px;line-height:27px;margin-bottom:var(--space-6)}
  .hero-art{height:245px;align-self:center;width:100%;margin-top:var(--space-4)}
  .hero-art::before{width:225px;height:225px}.hero-art::after{width:258px;height:258px}
  .hero-emblem{width:180px}
  .books-section{padding:var(--space-12) 0}
  .books-top{display:block;margin-bottom:var(--space-6)}
  .books-top p{margin-top:var(--space-3);text-align:left}
  .book-grid{grid-template-columns:1fr}
  .book-stage{height:340px}
  .cover-frieda{height:300px}.cover-mila{height:260px}
  .footer-inner{display:block}
  .preview-status{margin-top:var(--space-6)}
  .footer-links{align-items:flex-start;margin-top:var(--space-8)}
  .legal-main{padding:var(--space-4) 0 var(--space-12)}
  .legal-hero{padding:var(--space-8) var(--space-6)}
  .legal-card{padding:var(--space-6);margin-top:var(--space-4)}
}
@media(min-width:600px) and (max-width:700px){
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-card{padding:var(--space-4)}
  .book-stage{height:240px}
  .cover-frieda{height:205px}.cover-mila{height:160px}
  .book-cta .button{width:100%;min-width:0}
}
@media(max-width:420px){
  .brand-link img{width:190px}
  .hero{padding:var(--space-8) var(--space-4) var(--space-4)}
  .hero h1{font-size:36px}
  .book-card{padding:var(--space-4)}
  .book-stage{height:290px}
  .cover-frieda{height:260px}.cover-mila{height:min(215px,55vw)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-emblem,.orbit-dot{animation:none}.button,.nav-link{transition:none}}

/* Book pages use the existing CI roles, typography and spacing scale. */
a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.brand-link{padding:var(--space-4);margin-left:calc(-1*var(--space-4))}
.book-stage .cover-window{max-width:calc(100% - 2*var(--space-4))}
.book-stage .cover-mila{width:min(calc(100% - 2*var(--space-4)),412px);height:auto;aspect-ratio:8.25/6}
.book-title-link{border-radius:var(--radius-sm);text-decoration:none}
.book-title-link:hover{text-decoration:underline;text-underline-offset:4px}
.about-section{max-width:65ch;margin:0 auto;padding:0 0 var(--space-16)}
.about-section h2,.story-section h2,.related-section h2{font:700 30px/36px var(--font-display);margin:var(--space-3) 0 var(--space-6)}
.about-section p,.story-section p,.related-section p{font:400 17px/27px var(--font-body);max-width:65ch}
.about-section a{color:var(--accent-text);text-underline-offset:3px}
.book-main{padding:var(--space-4) 0 var(--space-16)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font:400 15px/22px var(--font-body);color:var(--ink-muted);margin:0 0 var(--space-8)}
.breadcrumb a{border-radius:var(--radius-pill);text-underline-offset:3px}
.book-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.detail-stage{height:auto;min-height:500px;margin:0;padding:var(--space-8)}
.detail-stage .cover-window{width:100%;height:auto;max-width:560px;aspect-ratio:8.25/6}
.detail-stage .cover-frieda{max-width:340px;aspect-ratio:612/792}
.detail-stage .cover-window img{height:auto}
.detail-copy h1{font:700 40px/46px var(--font-display);letter-spacing:-.01em;margin:var(--space-4) 0 var(--space-6);overflow-wrap:break-word}
.detail-lead{font:400 20px/30px var(--font-body);color:var(--ink-muted);max-width:42ch}
.book-details{margin:var(--space-8) 0}
.book-details div{display:grid;grid-template-columns:100px 1fr;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font:400 15px/22px var(--font-body)}
.book-details dt{font-weight:700}.book-details dd{margin:0}
.detail-copy .link-note{margin:var(--space-3) 0 0;max-width:40ch}
.story-section{max-width:65ch;margin:var(--space-16) auto}
.related-section{background:var(--surface-bubble);border-radius:var(--radius-lg);padding:var(--space-8);max-width:850px;margin:0 auto}
@media(max-width:960px){.book-detail{gap:var(--space-6)}.detail-stage{min-height:420px;padding:var(--space-6)}.detail-copy h1{font-size:30px;line-height:36px}}
@media(max-width:700px){.book-detail{grid-template-columns:1fr}.detail-stage{min-height:0;padding:var(--space-8) var(--space-6)}.detail-stage .cover-frieda{max-width:260px}.detail-copy h1{font-size:36px;line-height:42px}.book-main{padding-top:0}.story-section{margin:var(--space-12) 0}.related-section{padding:var(--space-6)}.about-section{padding-bottom:var(--space-12)}}
@media(min-width:600px) and (max-width:700px){.book-card h3{font-size:22px;line-height:28px}}

/* Language links use CI roles and work without scripts or stored preferences. */
.language-switch{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--line-strong);border-radius:var(--radius-pill);flex-shrink:0}
.language-switch a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-pill);font:700 15px/22px var(--font-body);text-decoration:none;color:var(--ink)}
.language-switch a[aria-current="page"]{background:var(--surface-bubble);text-decoration:underline;text-underline-offset:4px}
.language-switch a:hover{background:var(--surface-bubble)}
.site-header .site-nav{margin-left:auto}
.edition-note{font:400 15px/22px var(--font-body);color:var(--ink-muted);margin:var(--space-4) 0}
@media(max-width:700px){.site-header{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:var(--space-2);min-height:96px}.brand-link{margin:0;padding:var(--space-4) 0}.brand-link img{width:190px;max-width:100%}.language-switch a{font-size:14px;padding:0 var(--space-2)}}