/* ============================================================
   BILDHAUS STUDIO — Markensystem (gemeinsam für alle Seiten)
   Schriften, Farben und Motive sind festgelegt und werden hier
   nur zentral gehalten, nicht verändert.
   ============================================================ */

/* ---------- Schriften — selbst gehostet, keine externen Server ---------- */
@font-face{font-family:'Newsreader';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/Newsreader-Regular.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/Newsreader-Medium.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;
  src:url('../fonts/Newsreader-Italic.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');}

:root{
  /* Markenfarben — unverändert */
  --rot:#C0391A;
  --rot-hell:#E0512C;
  --schwarz:#121212;
  --schwarz-2:#181818;
  --creme:#F3EBE1;
  --creme-2:#E9DFD2;
  --hell-text:#EDE4D6;
  --dunkel-text:#1A1A1A;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Raster */
  --max:1240px;
  --rand:48px;

  /* Bewegung */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-sanft:cubic-bezier(.33,1,.68,1);
  --e-film:cubic-bezier(.16,1,.3,1);
  /* Für Zeiger-Bewegungen: weicher Anlauf, langes Ausgleiten — nichts springt */
  --e-weich:cubic-bezier(.45,.05,.15,1);
  --t-weich:.9s;
  --t-kurz:.35s;
  --t-mittel:.7s;
  --t-lang:1.2s;

  /* Linien */
  --linie-hell:rgba(237,228,214,.14);
  --linie-dunkel:rgba(26,26,26,.16);

  /* Akzent für kleine Schrift: auf Dunkel reicht --rot nicht für 4,5:1 */
  --akzent:var(--rot-hell);
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--schwarz);color:var(--hell-text);font-family:var(--sans);
  font-weight:500;line-height:1.65;font-size:16px;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--rot);color:#FFF6EF}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand);width:100%}
.hell{background:var(--creme);color:var(--dunkel-text);--akzent:var(--rot)}
.dunkel{background:var(--schwarz);color:var(--hell-text)}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Fokus: sichtbar, aber ruhig ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--rot-hell);outline-offset:3px}
.hell :focus-visible{outline-color:var(--rot)}
.sprung{position:fixed;left:16px;top:-80px;z-index:200;background:var(--rot);color:#FFF6EF;
  padding:12px 18px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:top var(--t-kurz) var(--e)}
.sprung:focus{top:16px}

/* ---------- Typografie ---------- */
.kicker{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--akzent);display:flex;align-items:center;gap:10px;
  margin-bottom:26px}
.kicker::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;
  flex-shrink:0}
.kicker .kap{opacity:.75;font-variant-numeric:tabular-nums}
h1,h2,h3,.gross{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.08}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem);letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(1.95rem,3.8vw,3.45rem);margin-bottom:26px;text-wrap:balance}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.25}
/* Rot in großen Titeln bleibt --rot (Großschrift: 3:1 genügt) */
.rot{color:var(--rot)}
p{font-family:var(--sans);font-size:.98rem;line-height:1.78}
.lead{font-size:clamp(1rem,1.15vw,1.1rem);opacity:.8;max-width:52ch;text-wrap:pretty}
.hell .lead{opacity:.78}
.klein{font-size:.74rem;opacity:.66;line-height:1.75}

/* ---------- Eckklammern: das Gestaltungsmotiv ---------- */
.rahmen{position:absolute;inset:clamp(20px,2.6vw,38px) clamp(16px,2.2vw,34px);
  pointer-events:none;z-index:1}
.rahmen i{position:absolute;width:22px;height:22px;opacity:.55;border:0 solid var(--rot)}
.rahmen i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.rahmen i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.rahmen i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.rahmen i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
/* Die Klammern schließen sich wie ein Sucher um den Abschnitt */
html.motion .rahmen i{opacity:0;transition:opacity 1s var(--e-film) .1s,transform 1.4s var(--e-film) .1s}
html.motion .rahmen i:nth-child(1){transform:translate(-14px,-14px)}
html.motion .rahmen i:nth-child(2){transform:translate(14px,-14px)}
html.motion .rahmen i:nth-child(3){transform:translate(-14px,14px)}
html.motion .rahmen i:nth-child(4){transform:translate(14px,14px)}
html.motion .rahmen.sichtbar i{opacity:.55;transform:none}

/* ---------- Knöpfe ---------- */
.knopf-rot{background:var(--rot);color:#FFF6EF;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 24px;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  isolation:isolate;overflow:hidden;
  transition:background var(--t-mittel) var(--e-film),transform var(--t-mittel) var(--e-film),
    translate .8s var(--e-weich)}
/* Hover: die helle Fläche läuft wie eine Blende von links durch */
.knopf-rot::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rot-hell);
  transform:scaleX(0);transform-origin:right;transition:transform .75s var(--e-weich)}
.knopf-rot:hover::before,.knopf-rot:focus-visible::before{transform:scaleX(1);transform-origin:left}
.knopf-rot:hover{transform:translateY(-1px)}
.knopf-rot:active{transform:translateY(0)}
.knopf-rot .pfeil{display:inline-block;transition:transform var(--t-mittel) var(--e-film)}
.knopf-rot:hover .pfeil{transform:translateX(4px)}
.knopf-rot[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.knopf-rot .kurz{display:none}

/* Zweiter Weg: Textknopf mit gezeichneter Unterlinie */
.knopf-text{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;padding:15px 2px;position:relative}
.knopf-text::after{content:"";position:absolute;left:2px;right:2px;bottom:10px;height:1px;
  background:currentColor;opacity:.4;transform-origin:right;
  transition:transform var(--t-mittel) var(--e-film),opacity var(--t-mittel) var(--e-film)}
.knopf-text:hover::after{opacity:1;animation:linie-neu var(--t-mittel) var(--e-film)}
@keyframes linie-neu{0%{transform:scaleX(1);transform-origin:right}
  49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}}
.knopf-text .spiel{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor}

/* ---------- Unterstrichene Textlinks ---------- */
.textlink{box-shadow:inset 0 -1px 0 currentColor;transition:color var(--t-kurz) var(--e)}
.textlink:hover{color:var(--rot-hell)}
.hell .textlink:hover{color:var(--rot)}

/* ---------- Unterseiten (Rechtliches, Termin) ---------- */
.unterkopf{position:sticky;top:0;z-index:40;background:rgba(18,18,18,.94);
  border-bottom:1px solid var(--linie-hell)}
@supports (backdrop-filter:blur(1px)){.unterkopf{background:rgba(18,18,18,.82);backdrop-filter:blur(14px)}}
.unterkopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:14px;padding-bottom:14px}
.unterkopf .marke img{height:42px;width:auto}
.unterkopf .zurueck{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.8;display:inline-flex;gap:10px;align-items:center;transition:opacity var(--t-kurz) var(--e)}
.unterkopf .zurueck:hover{opacity:1}
.unterfuss{border-top:1px solid var(--linie-hell);margin-top:clamp(60px,7vw,100px)}
.unterfuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;
  padding-top:26px;padding-bottom:34px;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;opacity:.7}
.unterfuss nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.unterfuss a:hover{color:var(--rot-hell)}

/* Rechtstexte */
.recht{max-width:760px;padding-top:clamp(56px,7vw,100px)}
.recht h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:clamp(30px,4vw,48px)}
.recht h2{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--akzent);margin:46px 0 14px;display:flex;gap:12px;
  align-items:baseline}
.recht h2 .nr{font-variant-numeric:tabular-nums}
.recht h2[id],.recht [id]{scroll-margin-top:96px}
.recht h3{font-size:1.15rem;margin:26px 0 8px}
.recht p,.recht li,.recht address{font-style:normal;font-size:.95rem;line-height:1.8;opacity:.88}
.recht p+p{margin-top:12px}
.recht ul{margin:10px 0 0 20px}
.recht li{margin-bottom:6px}
.recht a{box-shadow:inset 0 -1px 0 rgba(237,228,214,.4)}
.recht a:hover{color:var(--rot-hell)}
.recht strong{font-weight:700}
.recht .kasten{border:1px solid rgba(224,81,44,.5);padding:20px 22px;margin-top:16px}
.recht .kasten p{opacity:.95}
.recht .offen{border-left:2px solid var(--rot-hell);padding:4px 0 4px 16px;margin-top:12px;
  font-size:.88rem;opacity:.8}
.recht .stand{margin-top:56px;padding-top:24px;border-top:1px solid var(--linie-hell);
  font-size:.8rem;opacity:.7;line-height:1.7}

/* ---------- Seitenwechsel: Schnitt statt Neuladen (Chrome, Edge, Safari 18.2+) ---------- */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:seite-ab .45s var(--e) both}
  ::view-transition-new(root){animation:seite-auf .9s var(--e-film) both}
}
@keyframes seite-ab{to{opacity:0;transform:scale(.985)}}
@keyframes seite-auf{from{clip-path:inset(14% 0 14% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}
@media(max-width:1080px){:root{--rand:32px}}
@media(max-width:720px){:root{--rand:22px}}
@media(max-width:520px){
  .unterkopf .marke img{height:34px}
  .unterkopf .zurueck .lang{display:none}
}