@font-face{font-family:"Science Gothic";src:url(../fonts/science-gothic.woff2) format("woff2");font-weight:100 900;font-stretch:50% 200%;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(../fonts/playfair.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(../fonts/playfair-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Mona Sans";src:url(../fonts/mona-sans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Mona Sans";src:url(../fonts/mona-sans-italic.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:italic;font-display:swap}

:root{
  --creme:#FAF6EA;--ink:#121212;--muted:#6E6D68;--line:#D9D7D0;
  --terracotta:#8A4330;--tanne:#3B5E43;--apfel:#B4C43B;
  --pad:clamp(20px,3.4vw,40px);
  --display:"Science Gothic",system-ui,sans-serif;
  --text:"Mona Sans",system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.125rem/1.5 var(--text);color:var(--ink);background:var(--creme);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 16px;background:var(--ink);color:var(--creme);border-radius:8px;transform:translateY(-150%);transition:transform .2s var(--ease-out)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Seitenübergang: Kreis wächst über die Seite, neue Seite startet verdeckt und öffnet sich */
.wipe{position:fixed;inset:0;z-index:90;background:var(--wipe,var(--ink));clip-path:circle(0% at 50% 50%);pointer-events:none}
.is-entering .wipe{clip-path:circle(150% at 50% 50%)}

.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px var(--pad);font-size:.875rem;border-top:1px solid var(--line)}
.footer nav{display:flex;gap:24px}
.footer a{text-decoration:none;text-underline-offset:4px}
.footer a:hover{text-decoration:underline}

.zurueck{display:inline-flex;align-items:center;gap:8px;font:500 .9375rem/1 var(--text);text-decoration:none;padding:12px 0}
.zurueck:hover{text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .wipe{display:none}
}

/* Zeichnung im Seitenübergang (Linien werden per stroke-dashoffset gezeichnet) */
.wipe-zeichnung{position:absolute;left:50%;top:50%;width:min(62vw,440px);height:auto;transform:translate(-50%,-50%);fill:none;stroke:var(--wipe-linie,#E0855A);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* Gemeinsames Menü aller Unterseiten: MG-Monogramm als Link zur Startseite, Akzent je Seite über --akzent-nav */
.kopf-links{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);flex-wrap:wrap}
.mg{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1.5px solid var(--akzent-nav,currentColor);border-radius:50%;font:800 .9375rem/1 var(--text);letter-spacing:-.04em;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.haupt-nav{display:flex;gap:clamp(14px,2.2vw,28px);flex-wrap:wrap}
.haupt-nav a{padding:6px 0;font-size:.9375rem;font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease-out),color .2s ease}
.haupt-nav a[aria-current="page"]{color:var(--akzent-text,var(--akzent-nav,currentColor));background-size:100% 1px}
@media (hover:hover) and (pointer:fine){
  .haupt-nav a:hover{background-size:100% 1px}
  .mg:hover{background:var(--akzent-nav,currentColor);color:var(--mg-hover,#fff)}
}
@media (max-width:420px){.haupt-nav{gap:12px}.haupt-nav a{font-size:.875rem}}

/* DE/EN-Umschalter auf allen Seiten, Farben aus den Menü-Variablen der Seite */
.sprache{display:flex;flex:none;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:100px;padding:3px}
.sprache button{border:0;background:none;min-width:40px;min-height:34px;padding:4px 10px;border-radius:100px;font:600 .75rem/1 var(--text);color:inherit;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.sprache button[aria-pressed="true"]{background:var(--akzent-nav,currentColor);color:var(--mg-hover,#fff)}
.kopf-rechts{display:flex;align-items:center;gap:20px}
.f-kopf,.s-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media (max-width:620px){
  .w-kopf,.f-kopf,.s-kopf{flex-wrap:wrap;row-gap:8px}
  .w-kopf .kopf-links,.f-kopf .kopf-links,.s-kopf .kopf-links{display:contents}
  .w-kopf .mg,.f-kopf .mg,.s-kopf .mg{order:1;width:40px;height:40px}
  .w-kopf .kopf-rechts,.f-kopf .sprache,.s-kopf .sprache{order:2;margin-left:auto}
  .w-kopf .haupt-nav,.f-kopf .haupt-nav,.s-kopf .haupt-nav{order:3;width:100%}
}

/* Ladeanimation (main.js baut .lader). Bis das Skript läuft, deckt ein Vorhang in Seitenfarbe ab;
   er verschwindet nach 3 s von selbst, falls das Skript nie kommt. */
.web{--lader-bg:#241812;--lader-fg:#F2E8D9;--lader-font:"Cormorant Garamond",Georgia,serif;--lader-gewicht:500;--wipe-linie:#E0855A}
.film{--lader-bg:#0A1426;--lader-bg-2:#0F1D38;--lader-fg:#EAF1FB;--lader-font:"Syne",var(--text);--lader-gewicht:700}
.ueber{--lader-bg:#FFFFFF;--lader-fg:#121212;--lader-font:var(--text);--lader-gewicht:500}
@media (prefers-reduced-motion:no-preference){
  body[data-lader]:not(.lader-an)::after{content:"";position:fixed;inset:0;z-index:96;background:var(--lader-bg);animation:lader-notaus 0s 3s forwards}
}
@keyframes lader-notaus{to{visibility:hidden}}
.lader{position:fixed;inset:0;z-index:96;display:grid;place-items:center;color:var(--lader-fg);pointer-events:none;clip-path:circle(150% at 50% 50%)}
.l-flaechen{position:absolute;inset:0;display:flex}
.l-flaechen i{flex:1;background:var(--lader-bg);margin-right:-1px}
.l-wort{position:relative;font-family:var(--lader-font);font-weight:var(--lader-gewicht,700);font-size:clamp(3rem,11vw,9rem);line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.l-zahl{position:absolute;right:var(--pad);bottom:22px;font-size:.875rem;font-variant-numeric:tabular-nums}
.l-zahl::after{content:" %"}
.l-flieger{position:absolute;left:50%;top:40%;width:min(40vw,240px);margin-left:calc(min(40vw,240px) / -2);margin-top:calc(min(40vw,240px) * -.35)}
.l-flieger svg{display:block;width:100%;height:auto;fill:var(--lader-fg);overflow:visible}
.lader-flieger .l-wort{margin-top:clamp(200px,30vw,300px);font-size:clamp(2.5rem,8vw,6rem);font-style:italic}
.l-blende{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.l-blende path{fill:var(--lader-bg);stroke:var(--lader-linie,rgba(255,255,255,.14));stroke-width:.3}
.l-blende path:nth-child(even){fill:var(--lader-bg-2,var(--lader-bg))}
.l-rec{position:absolute;left:var(--pad);top:24px;font-size:.875rem;letter-spacing:.08em;color:var(--lader-fg)}
.l-rec::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45em;border-radius:50%;background:#E5484D;vertical-align:.02em}
.l-ball{position:absolute;left:0;top:0;width:clamp(44px,8vmin,80px);aspect-ratio:1;margin:calc(clamp(44px,8vmin,80px) / -2) 0 0 calc(clamp(44px,8vmin,80px) / -2);border-radius:50%;background:var(--lader-ball,#BCD6E6)}
.lader-ball .l-wort{font-size:clamp(4rem,18vw,14rem);letter-spacing:-.05em}