/* Tenfourbyte Studios · gemeinsames Stylesheet
   Farben und Form aus dem Logo: Navy und Korallrot, Pixelstufen und Pfeil.
   Schrift Outfit liegt lokal (schrift/), nichts wird von fremden Servern geladen. */

@font-face{font-family:"Outfit";src:url("schrift/outfit.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --grund:#F4F5F7;
  --weiss:#FFFFFF;
  --navy:#19232B;
  --navy2:#24303B;
  --schiefer:#4A5A70;
  --still:#5D6B80;
  --hauch:#E7EAEF;
  --linie:rgba(25,35,43,.08);
  --linie2:rgba(25,35,43,.14);
  --akzent:#FE4E41;
  --nachtlinie:rgba(255,255,255,.09);
  --nachtleise:#A9B6C8;
  --schatten:0 1px 2px rgba(25,35,43,.04),0 8px 28px -12px rgba(25,35,43,.14);
  --schatten-hoch:0 2px 4px rgba(25,35,43,.05),0 22px 48px -18px rgba(25,35,43,.24);
  --feder:cubic-bezier(.2,.8,.2,1);
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --breite:1160px;
  --rand:clamp(16px,4vw,40px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--grund);color:var(--navy);
  font:400 17.5px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:rgba(254,78,65,.3)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:8px}

.innen{position:relative;z-index:1;max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

/* Rubrik über jedem Abschnitt, mit zwei Pixelquadraten */
.rubrik{display:flex;align-items:center;gap:10px;font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--still);margin:0}
.rubrik.mit-zeichen::before{content:"";width:13px;height:13px;flex:none;background:
  linear-gradient(var(--navy),var(--navy)) 0 100%/6px 6px no-repeat,
  linear-gradient(var(--akzent),var(--akzent)) 100% 0/6px 6px no-repeat}

/* Logo-Lockup: Zeichen, Wortmarke, „studios" */
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.marke .zeichen{height:30px;width:auto;flex:none;display:block}
.marke .wortmarke{height:19px;width:auto;flex:none;display:block;margin-top:3px}
.marke .studios{font:500 12px/1 var(--sans);letter-spacing:.32em;color:var(--navy);padding-left:12px;border-left:1px solid var(--linie2);height:20px;display:flex;align-items:center;margin-top:2px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);background:rgba(244,245,247,.78);border-bottom:1px solid transparent;transition:border-color .3s}
.kopf.gerollt{border-bottom-color:var(--linie)}
.kopf .innen{display:flex;align-items:center;gap:24px;height:72px}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{font-size:15px;font-weight:500;color:var(--schiefer);text-decoration:none;padding:8px 13px;border-radius:999px;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--navy);background:rgba(25,35,43,.05)}
.sprache{display:flex;background:var(--hauch);border-radius:999px;padding:3px;margin-left:10px}
.sprache button{font:600 11.5px/1 var(--sans);letter-spacing:.1em;color:var(--still);background:none;border:0;padding:8px 11px;border-radius:999px;cursor:pointer;transition:color .2s,background-color .2s,box-shadow .2s}
.sprache button[aria-pressed=true]{color:var(--navy);background:var(--weiss);box-shadow:0 1px 3px rgba(25,35,43,.12)}
@media (max-width:720px){.nav a.weg{display:none}}
@media (max-width:560px){.nav a{display:none}.sprache{margin-left:0}.marke .studios{display:none}.marke{gap:10px}.marke .zeichen{height:26px}.marke .wortmarke{height:17px}}

/* Karte */
.karte{position:relative;background:var(--weiss);border-radius:22px;box-shadow:var(--schatten),inset 0 0 0 1px var(--linie)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 15.5px/1 var(--sans);text-decoration:none;transition:transform .25s var(--feder),box-shadow .25s,background-color .2s}
.knopf.voll{color:#fff;background:var(--navy);box-shadow:0 10px 24px -12px rgba(25,35,43,.6)}
.knopf.voll:hover{transform:translateY(-1px);background:var(--navy2)}
.knopf.voll .pfeil{color:var(--akzent)}
.knopf.leer{color:var(--navy);background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie2)}
.knopf.leer:hover{box-shadow:inset 0 0 0 1px rgba(25,35,43,.28)}
.knopf:active{transform:scale(.98)}

/* Abschnitte */
section[id]{scroll-margin-top:72px}
.abschnitt{position:relative;z-index:1;padding:clamp(72px,10vw,124px) 0}
.abschnitt h2{font:600 clamp(34px,4.8vw,52px)/1.06 var(--sans);letter-spacing:-.025em;margin:16px 0 0;max-width:20ch}
.abschnitt .vorspann{color:var(--schiefer);max-width:56ch;margin:18px 0 0;font-size:19px}

/* Fuß */
.fuss{position:relative;z-index:1;border-top:1px solid var(--linie);padding:40px 0 56px;color:var(--still);font-size:14.5px}
.fuss .innen{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center}
.fuss .marke .zeichen{height:24px}
.fuss .marke .wortmarke{height:15px}
.fuss .marke .studios{height:16px;font-size:10.5px}
.fuss a{color:var(--schiefer);text-decoration:none}
.fuss a:hover{color:var(--navy)}
.fuss .rechts{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}

/* Rechtstexte */
.recht{position:relative;z-index:1;padding:clamp(56px,8vw,96px) 0 96px}
.recht .innen{max-width:780px}
.recht h1{font:600 clamp(40px,6vw,58px)/1.04 var(--sans);letter-spacing:-.025em;margin:14px 0 28px}
.recht h2{font:600 24px/1.25 var(--sans);letter-spacing:-.01em;margin:52px 0 10px}
.recht h3{font:600 16.5px/1.4 var(--sans);margin:28px 0 6px}
.recht p,.recht li{color:var(--schiefer)}
.recht strong{color:var(--navy);font-weight:600}
.recht ul{padding-left:20px}
.recht li{margin:6px 0}
.recht a{color:var(--navy);text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:3px}
.recht .anker{scroll-margin-top:92px}
.offen{background:rgba(254,78,65,.18);color:#B3261B;border-radius:6px;padding:1px 6px;font-size:.94em;white-space:nowrap}
.hinweis{padding:18px 22px;font-size:15.5px;color:var(--schiefer);margin-bottom:8px}
.hinweis strong{color:#B3261B}
.appkopf{display:flex;align-items:center;gap:14px;margin:56px 0 4px}
.appkopf img{width:44px;height:44px;border-radius:22.5%;box-shadow:0 0 0 1px var(--linie)}
.appkopf h2{margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Zweisprachige Unterseiten: nur die gewählte Sprache zeigen */
html[lang=en] [data-nur=de],html:not([lang=en]) [data-nur=en]{display:none!important}
.hinweis-en{color:var(--still);font-size:14.5px;margin:-6px 0 26px}