/* ==========================================================================
   Kay One – Website
   Alle Schriften lokal, keine externen Anfragen.
   Aufbau: 1 Grundlagen · 2 Bühne · 3 Kanäle · 4 Fuß · 5 Knöpfe & Dialoge
           6 Lightbox · 7 Rechtstexte · 8 Wartung · 9 Bewegung reduzieren
   ========================================================================== */

/* 1 · Grundlagen ------------------------------------------------------------ */
@font-face{font-family:"Roboto";src:url("../fonts/roboto-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/roboto-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/roboto-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo Black";src:url("../fonts/archivo-black-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#fff;
  --fg:#333;
  --tief:#111;
  --mute:#6f6f6f;
  --linie:#e8e8e8;
  --flaeche:#f5f5f4;
  --fokus:#2563eb;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breite:1200px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --federn:cubic-bezier(.2,1.4,.4,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html:has(dialog[open]){overflow:hidden}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{flex:1;outline:none}
/* Startseite: Bühne + Links mittig im Bildschirm (wichtig bei hohen Handy-Displays) */
.ist-start main{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(8px,4vh,48px) 0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
::selection{background:var(--tief);color:#fff}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;background:var(--tief);color:#fff;border-radius:8px;text-decoration:none}
.skip:focus{top:16px}

/* 2 · Bühne: Foto + Schriftzug als 3D-Szene, neigt sich mit der Maus ----------
   Größe: so breit wie möglich, aber nie höher als der Bildschirm (minus Platz für die Social Links).
   --v ist das Seitenverhältnis des Fotos (Breite/Höhe) – kommt als Klasse aus PHP, JS rechnet exakt nach. */
.buehne{
  display:grid;justify-items:center;
  padding:clamp(4px,1.5vw,16px) 16px 0;
  perspective:1600px;
  perspective-origin:50% 45%;
}
.buehne__rahmen{
  --v:1;
  width:min(100%, max(980px, 42vw), calc((100svh - var(--luft, 150px)) * var(--v)));
  container-type:inline-size;
}
.v-70{--v:.7}.v-80{--v:.8}.v-90{--v:.9}.v-100{--v:1}.v-110{--v:1.1}.v-125{--v:1.25}.v-140{--v:1.4}.v-160{--v:1.6}
@media (max-width:640px){.buehne__rahmen{--luft:120px}}
@media (orientation:landscape) and (max-height:560px){.buehne__rahmen{--luft:40px}} /* Handy quer */
.buehne__szene{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.buehne__bild{
  margin:0;
  transform:translateZ(-40px) scale(1.025); /* Foto liegt hinten … */
}
.buehne__bild img{
  width:100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
  animation:foto-rein 1.8s var(--ease) both;
}
.logo{
  position:absolute;
  left:0;right:0;bottom:2%;
  margin:0;
  text-align:center;
  transform:translateZ(70px);   /* … der Schriftzug schwebt davor */
  pointer-events:none;
}
.logo__zeile{
  display:inline-block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px,14.2cqw,250px);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--fg);
  white-space:nowrap;
  transform:rotate(-7deg);
  animation:schrift-rein 1.4s .55s var(--ease) both;
}
/* Logo als Bild (Standard): so breit wie beim bisherigen Logo, ca. 72 % der Fotobreite */
.logo__bild{
  display:block;
  width:72%;
  height:auto;
  margin:0 auto;
  animation:schrift-rein 1.4s .55s var(--ease) both;
}
.logo--klein .logo__bild{width:min(520px,80vw)}
/* Buchstaben wachsen nach rechts → Perspektive wie beim Original-Logo */
.logo__zeile span{display:inline-block}
.logo__zeile .luecke{width:.22em}
.g-80{font-size:0.80em}.g-82{font-size:0.82em}.g-84{font-size:0.84em}.g-86{font-size:0.86em}.g-88{font-size:0.88em}.g-90{font-size:0.90em}.g-92{font-size:0.92em}.g-94{font-size:0.94em}.g-96{font-size:0.96em}.g-98{font-size:0.98em}.g-100{font-size:1.00em}.g-102{font-size:1.02em}.g-104{font-size:1.04em}.g-106{font-size:1.06em}.g-108{font-size:1.08em}.g-110{font-size:1.10em}.g-112{font-size:1.12em}.g-114{font-size:1.14em}.g-116{font-size:1.16em}.g-118{font-size:1.18em}.g-120{font-size:1.20em}
/* Touch-Geräte: ohne Tiefenebenen rendern, damit Schrift und Foto auf Retina-Displays gestochen scharf bleiben */
@media (hover:none){.buehne__bild,.logo{transform:none}}
@keyframes foto-rein{from{opacity:0;scale:.92}}
@keyframes schrift-rein{from{opacity:0;translate:0 26px;filter:blur(10px)}}

/* 3 · Kanäle (Social Links): Schwarz mit feinem Ring, beim Darüberfahren metallisches Gold */
.kanaele-nav{margin:clamp(20px,3vw,36px) auto 0;padding:0 16px}
.kanaele{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.kanal{
  --gold-hell:#f7e7b0;--gold:#c9a24a;--gold-tief:#8c6b1f;
  position:relative;isolation:isolate;
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:999px;background:var(--tief);color:#fff;text-decoration:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgb(17 17 17/.85);
  transition:translate .45s var(--ease),color .3s,box-shadow .45s var(--ease);
}
.kanal svg{position:relative;z-index:2;width:21px;height:21px;transition:scale .45s var(--ease)}
/* Gold-Fläche mit Lichtreflex */
.kanal::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:
    linear-gradient(115deg,transparent 30%,rgb(255 255 255/.75) 45%,transparent 60%) 160% 0/250% 100% no-repeat,
    linear-gradient(145deg,var(--gold-hell) 0%,var(--gold) 38%,var(--gold-tief) 72%,#d9b968 100%);
  opacity:0;scale:.6;
  transition:opacity .35s var(--ease),scale .45s var(--ease),background-position 0s;
}
.kanal:hover,.kanal:focus-visible{
  translate:0 -3px;color:#1a1408;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--gold),0 14px 28px -12px rgb(140 107 31/.7);
}
.kanal:hover::before,.kanal:focus-visible::before{
  opacity:1;scale:1;background-position:-60% 0,0 0;
  transition:opacity .35s var(--ease),scale .45s var(--ease),background-position .9s .05s var(--ease);
}
.kanal:hover svg,.kanal:focus-visible svg{scale:1.06}
.kanal:active{translate:0 -1px}
/* Namensschild */
.kanal::after{
  content:attr(data-name);position:absolute;z-index:3;bottom:calc(100% + 12px);left:50%;
  translate:-50% 6px;padding:6px 12px;border-radius:999px;
  background:var(--tief);color:var(--gold-hell);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgb(0 0 0/.5);
  opacity:0;pointer-events:none;transition:opacity .25s,translate .35s var(--ease);
}
.kanal:hover::after,.kanal:focus-visible::after{opacity:1;translate:-50% 0}
@media (hover:none){.kanal::after{display:none}}

/* 4 · Fuß -------------------------------------------------------------------- */
.fuss{width:min(100% - 32px,var(--breite));margin:clamp(60px,8vw,100px) auto 0;padding:24px 0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:13px}
.fuss p{margin:0}
.fuss a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.fuss a:hover,.fuss a[aria-current]{background-size:100% 1px}
.fuss ul{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
@media (max-width:640px){.fuss{flex-direction:column;text-align:center}.fuss ul{justify-content:center}}
.nach-oben{position:fixed;right:16px;bottom:16px;z-index:20;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px;background:var(--tief);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgb(0 0 0/.2)}
.nach-oben svg{width:20px;height:20px}

/* 5 · Knöpfe & Hinweis-Dialog ------------------------------------------------ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:2px solid var(--fg);border-radius:999px;background:var(--fg);color:#fff;font:500 15px var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,translate .2s var(--ease)}
.knopf:hover{background:var(--tief);border-color:var(--tief)}
.knopf:active{translate:0 1px}
.knopf svg{width:16px;height:16px;transition:translate .25s var(--ease)}
.knopf:hover svg{translate:2px -2px}
.knopf--leer{background:transparent;color:var(--fg)}
.knopf--leer:hover{background:var(--flaeche);color:var(--fg);border-color:var(--fg)}
.knopf--klein{min-height:38px;padding:0 18px;font-size:14px}

dialog{color:var(--fg)}
dialog::backdrop{background:rgb(10 10 10/.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hinweis{width:min(100% - 32px,420px);padding:28px;border:0;border-radius:22px;background:var(--bg);box-shadow:0 40px 90px -20px rgb(0 0 0/.45)}
.hinweis[open]{animation:fenster-rein .35s var(--ease) both}
.hinweis__titel{margin:0 0 8px;font-size:22px;font-weight:700}
.hinweis__text{margin:0 0 16px;color:var(--mute)}
.hinweis__text strong{color:var(--fg);word-break:break-all}
.hinweis__merken{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--mute);cursor:pointer}
.hinweis__merken input{width:18px;height:18px;accent-color:var(--fg)}
.hinweis__knoepfe{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px}
@keyframes fenster-rein{from{opacity:0;scale:.96;translate:0 12px}}

/* 6 · Lightbox für Impressum, Datenschutz & Cookies --------------------------- */
.fenster{
  width:min(100% - 32px,780px);
  height:min(86dvh,900px);
  padding:0;border:0;border-radius:24px;
  background:var(--bg);
  box-shadow:0 50px 120px -30px rgb(0 0 0/.55);
  overflow:hidden;
}
.fenster[open]{display:flex;flex-direction:column;animation:fenster-rein .4s var(--ease) both}
.fenster__kopf{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--linie);background:rgb(255 255 255/.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fenster__reiter{display:flex;gap:4px;flex:1;min-width:0;padding:4px;border-radius:999px;background:var(--flaeche);overflow-x:auto;scrollbar-width:none}
.fenster__reiter::-webkit-scrollbar{display:none}
.fenster__reiter button{flex:1 0 auto;min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--mute);font:500 14px var(--sans);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.fenster__reiter button:hover{color:var(--fg)}
.fenster__reiter button[aria-selected="true"]{background:#fff;color:var(--fg);box-shadow:0 2px 8px -2px rgb(0 0 0/.15)}
.fenster__zu{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px;background:var(--flaeche);color:var(--fg);cursor:pointer;transition:background .2s,rotate .3s var(--ease)}
.fenster__zu:hover{background:var(--linie);rotate:90deg}
.fenster__zu svg{width:20px;height:20px}
.fenster__inhalt{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,5vw,48px);scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
.fenster__inhalt [role=tabpanel]{animation:tafel-rein .35s var(--ease) both;outline:none}
@keyframes tafel-rein{from{opacity:0;translate:0 8px}}
.recht__text .fenster__titel{margin:0 0 24px;font-family:var(--display);font-weight:400;font-size:clamp(26px,6.6vw,44px);line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
@media (max-width:640px){
  .fenster{width:100%;max-width:100%;height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .fenster[open]{animation:blatt-rein .45s var(--ease) both}
  .fenster__reiter button{padding:0 12px;font-size:13px}
}
@keyframes blatt-rein{from{translate:0 100%}}

/* 7 · Rechtstexte (eigene Seiten und Lightbox) -------------------------------- */
.recht{width:min(100% - 32px,760px);margin:0 auto;padding-top:clamp(32px,6vw,72px)}
.recht h1{margin:8px 0 28px;font-family:var(--display);font-weight:400;font-size:clamp(36px,6vw,56px);line-height:1.05;overflow-wrap:anywhere}
.recht__text h2{margin:34px 0 8px;font-size:19px;font-weight:700}
.recht__text .fenster__titel+h2,.recht__text>h2:first-child{margin-top:0}
.reiter-kurz{display:none}
@media (max-width:640px){.reiter-lang{display:none}.reiter-kurz{display:inline}}
.recht__text p,.recht__text ul{margin:0 0 12px}
.recht__text ul{padding-left:1.2em}
.recht__text li{margin-bottom:4px}
.recht__text a{text-underline-offset:3px}
.recht__kurz{font-size:17px;padding:16px 20px;border-left:4px solid var(--fg);background:var(--flaeche);border-radius:0 14px 14px 0}
.recht__stand{color:var(--mute);font-size:14px;margin-top:32px!important}
.angaben{display:grid;gap:1px;margin:16px 0 0;border-radius:14px;overflow:hidden;background:var(--linie)}
.angaben div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 16px;padding:10px 14px;background:var(--bg)}
.angaben dt{color:var(--mute);font-size:14px}
.angaben dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.angaben div{grid-template-columns:1fr;gap:0}}
.recht--mitte{text-align:center;padding-top:12vh}
.gross404{margin:0;font-family:var(--display);font-size:clamp(90px,22vw,200px);line-height:1;transform:perspective(600px) rotateY(-18deg) rotateZ(-6deg)}
.kruemel{display:flex;gap:8px;font-size:14px;color:var(--mute)}
.kruemel a{color:var(--mute)}

/* 8 · Wartung ---------------------------------------------------------------- */
.ist-wartung .wartung{flex:1;display:grid;place-content:center;justify-items:center;gap:0;max-width:600px;margin:0 auto;padding:48px 16px;text-align:center}
.wartung__kicker{margin:0 0 28px;font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.logo--klein{position:static;margin:0 0 36px;transform:none}
.logo--klein .logo__zeile{font-size:clamp(48px,12vw,96px)}
.wartung__titel{margin:0 0 12px;font-size:clamp(24px,5vw,34px)}
.wartung__text{margin:0 0 32px;color:var(--mute);font-size:17px}
.wartungsband{position:sticky;top:0;z-index:60;padding:8px 16px;background:var(--tief);color:#eee;font-size:14px;text-align:center}
.wartungsband a{color:#fff;font-weight:700;margin-left:4px}

/* 9 · Bewegung reduzieren ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .buehne__szene{transform:none!important}
}