/* ninelights — Festbeleuchtung (18.09.2026)
   Die Seite ist eine Leuchtreklame: weiße, hinterleuchtete Tafeln mit schwarzen
   Steckbuchstaben, Petrol-Markisen mit Glühbirnen, der Markenpunkt ist eine Birne.
   Warmes Licht bedeutet immer „an“ und wird für nichts anderes benutzt. */

:root {
  --grund: #eef2f2;          /* Fassade um die Tafeln */
  --tafel: #ffffff;          /* hinterleuchtete Buchstabentafel */
  --tafel-kante: #d9e3e4;
  --schiene: #d3dcdd;        /* Schienen, auf denen die Buchstaben stecken */
  --tinte: #0f1416;
  --still: #46545a;
  --petrol: #0a687d;         /* Markenfarbe aus dem 9-Logo */
  --petrol-tief: #084f5f;
  --petrol-nacht: #04313b;
  --auf-petrol: #ffffff;
  --auf-petrol-still: #d2e6ea;
  --birne: #ffd27a;
  --birne-kern: #fff8e6;
  --birne-tief: #f0a53a;
  --glas: #c9d4d6;
  --magenta: #e4097f;        /* nur GoodCatering */
  --fehler: #a3231b;
  --fokus: var(--petrol);

  --steck: 'Archivo', 'Arial Narrow', sans-serif;
  --text: 'Manrope', system-ui, sans-serif;
  --weich: cubic-bezier(.16, 1, .3, 1);
  --rand: clamp(16px, 4vw, 56px);
  --breit: 1380px;
  --luft: clamp(5rem, 10vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--petrol) var(--grund);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
::selection { background: var(--birne); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 3px; }
input, textarea { caret-color: var(--petrol); }

.vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--petrol); color: #fff; padding: .7rem 1rem; border-radius: 4px;
}
.sprung:focus { top: 1rem; }

.innen { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Der Markenpunkt: eine Glühbirne ---------- */

.bp {
  --bp-licht: radial-gradient(circle at 38% 34%, var(--birne-kern) 0 20%, var(--birne) 48%, var(--birne-tief) 100%);
  display: inline-block;
  width: .2em; height: .2em;
  margin-left: .07em;
  border-radius: 50%;
  overflow: hidden;
  color: transparent;
  vertical-align: baseline;
  background: var(--bp-licht);
  box-shadow: 0 .03em .06em rgb(120 70 0 / .35), 0 .04em .3em .02em rgb(255 172 60 / .6);
  transition: background .3s, box-shadow .3s;
}
.bp--aus, .menue .bp {
  background: radial-gradient(circle at 38% 34%, #fff 0 16%, var(--glas) 58%, #93a6ab 100%);
  box-shadow: 0 .03em .06em rgb(4 49 59 / .3);
}

/* ---------- Glühbirnen am Rahmen (von seite.js gebaut) ---------- */

[data-birnen] { position: relative; isolation: isolate; --b-abstand: 34; --b-einzug: 17; --b-r: 4.4; }
.birnen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
.birnen .glas { fill: url(#glas); }
.birnen .licht { fill: url(#schein); opacity: 0; transition: opacity .6s var(--weich); }
.ist-an > .birnen .licht { opacity: 1; }
.ist-an > .birnen .l1 { transition-delay: .15s; }
.ist-an > .birnen .l2 { transition-delay: .3s; }

@keyframes lauf { 0%, 31% { opacity: 1; } 35%, 100% { opacity: .14; } }
.lauft > .birnen .licht { animation: lauf 1.65s linear infinite; }
.lauft > .birnen .l1 { animation-delay: -1.1s; }
.lauft > .birnen .l2 { animation-delay: -.55s; }
.lauft:not(.im-bild) > .birnen .licht { animation-play-state: paused; }

/* ---------- Tafeln & Steckbuchstaben ---------- */

.markise {
  --fr: 22px;
  background: var(--petrol);
  border-radius: 14px;
  padding: var(--fr);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .08),
    inset 0 -6px 0 var(--petrol-tief),
    0 34px 60px -30px rgb(4 49 59 / .6);
}

.tafel {
  background: var(--tafel);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgb(4 49 59 / .22),
    inset 0 3px 18px rgb(4 49 59 / .1);
  container-type: inline-size;
}

.steck {
  font-family: var(--steck);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1;
  color: var(--tinte);
}

/* Schienen: unter jeder Buchstabenzeile eine Leiste, oben eine zum Abschluss */
.schienen,
.tafel--buehne .steck,
.schild-wort {
  border-top: 3px solid var(--schiene);
  background: linear-gradient(to bottom, transparent calc(100% - 3px), var(--schiene) calc(100% - 3px)) 0 0 / 100% 1lh;
}

.b {
  display: inline-block;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
}
.wort-s { display: inline-block; white-space: nowrap; }
@keyframes stecken {
  from { opacity: 0; transform: translateY(-.34em) rotate(-7deg); }
}
.steckt .b { animation: stecken .8s var(--weich) both; animation-delay: calc(.2s + var(--i) * 36ms); }
.steckt .bp { animation: stecken .8s var(--weich) both; animation-delay: calc(.2s + var(--i-ende, 22) * 36ms); }
.b.neu { animation: stecken .45s var(--weich) both; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .75rem var(--rand);
  background: var(--grund);
  border-bottom: 3px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.kopf.ist-fest { border-bottom-color: var(--schiene); background: #f6f8f8; }

.wort {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font: 800 1.55rem/1 var(--steck);
  font-stretch: 70%;
  letter-spacing: -.005em;
}
.neun { width: 38px; height: 38px; border-radius: 9px; background: var(--petrol); padding: 3px; }

.menue { display: flex; gap: clamp(1rem, 2.4vw, 2rem); margin-left: auto; }
.menue a {
  font: 650 1.05rem/1 var(--steck);
  font-stretch: 82%;
  text-decoration: none;
  padding: .5rem .1rem;
  color: var(--tinte);
}
.menue a:hover .bp,
.menue a:focus-visible .bp,
.menue a[aria-current] .bp {
  background: radial-gradient(circle at 38% 34%, var(--birne-kern) 0 20%, var(--birne) 48%, var(--birne-tief) 100%);
  box-shadow: 0 .03em .06em rgb(120 70 0 / .35), 0 .04em .3em .02em rgb(255 172 60 / .6);
}

/* ---------- Knöpfe: die kleine Birne geht an, wenn man zeigt ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px;
  padding: .85rem 1.35rem;
  border: 2px solid var(--petrol);
  border-radius: 6px;
  background: var(--petrol);
  color: #fff;
  font: 750 1.08rem/1 var(--steck);
  font-stretch: 85%;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--weich);
}
.knopf::before {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0 16%, var(--glas) 58%, #93a6ab 100%);
  transition: background .2s, box-shadow .2s;
}
.knopf:hover::before, .knopf:focus-visible::before {
  background: radial-gradient(circle at 38% 34%, var(--birne-kern) 0 20%, var(--birne) 48%, var(--birne-tief) 100%);
  box-shadow: 0 0 10px 2px rgb(255 190 80 / .75);
}
.knopf:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); }
.knopf:active { transform: translateY(1px); }
.knopf svg { flex: none; }
.knopf--klein { min-height: 44px; padding: .6rem 1rem; font-size: 1rem; }

.knopf--hell { background: #fff; border-color: #fff; color: var(--petrol-nacht); }
.knopf--hell:hover { background: var(--birne-kern); border-color: var(--birne-kern); }
.knopf--linie { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; }
.knopf--linie:hover { background: rgb(255 255 255 / .1); border-color: #fff; }
.knopf--linie-dunkel { background: transparent; border-color: var(--petrol); color: var(--petrol-nacht); }
.knopf--linie-dunkel:hover { background: var(--petrol); color: #fff; }
.knopf--voll { width: 100%; }
.knopf--voll::before { display: none; }

/* ---------- Bühne ---------- */

.buehne { padding-top: clamp(.75rem, 2vw, 1.5rem); }
.buehne .markise { position: relative; z-index: 2; }

.tafel--buehne { padding: clamp(16px, 3vw, 44px) clamp(16px, 3.4vw, 52px) clamp(18px, 3.2vw, 46px); }
.tafel--buehne .steck {
  font-size: clamp(3.2rem, 14.6vw, 10.4rem);
  text-align: center;
  margin-inline: calc(-1 * clamp(16px, 3.4vw, 52px));
  padding-inline: clamp(16px, 3.4vw, 52px);
  text-wrap: balance;
}

.markise-unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 3rem;
  padding: clamp(1.25rem, 2.6vw, 2rem) .25rem .1rem;
  color: var(--auf-petrol);
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 56ch; color: var(--auf-petrol-still); }
.lead strong { color: #fff; font-weight: 700; }
.taten { display: flex; flex-wrap: wrap; gap: .75rem; }

.buehne-bild { margin: calc(-1 * clamp(48px, 7vw, 110px)) 0 0; position: relative; z-index: 1; }
.buehne-bild img {
  width: 100%;
  height: clamp(340px, 64vh, 760px);
  object-fit: cover;
  object-position: 50% 42%;
}

.fakten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--tafel);
  border-radius: 10px;
  margin-top: calc(-1 * clamp(40px, 5vw, 72px));
  position: relative; z-index: 2;
  box-shadow: inset 0 0 0 1px var(--tafel-kante), 0 30px 50px -34px rgb(4 49 59 / .55);
}
.fakten li {
  display: grid; gap: .35rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(1.1rem, 2.4vw, 2rem);
}
.fakten li + li { border-left: 3px solid var(--schiene); }
.fakten b {
  font: 800 clamp(1.35rem, 2.3vw, 1.9rem)/1.05 var(--steck);
  font-stretch: 66%;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.fakten span { color: var(--still); font-size: .98rem; line-height: 1.45; }

/* ---------- Grundsatz ---------- */

.satz { padding-block: var(--luft) 0; }
.satz p {
  max-width: 44ch;
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
  line-height: 1.38;
  font-weight: 450;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.leucht {
  font-family: var(--steck);
  font-stretch: 64%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: 1.14em;
  line-height: 1;
  padding-bottom: .14em;
  background:
    radial-gradient(circle, var(--glas) 0 2.6px, transparent 3.2px) 0 100% / 13px 8px repeat-x;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background .8s var(--weich);
}
.leucht.ist-an {
  background:
    radial-gradient(circle, var(--birne-kern) 0 1.4px, var(--birne) 2.4px, rgb(240 165 58 / .55) 3.4px, transparent 5px) 0 100% / 13px 10px repeat-x;
}

/* ---------- Abschnitte & Schilder ---------- */

.teil { padding-block: var(--luft); }

.schild {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  background: var(--tafel);
  border-radius: 8px;
  padding: clamp(14px, 2.4vw, 30px) clamp(16px, 3vw, 40px) clamp(16px, 2.6vw, 34px);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: inset 0 0 0 1px var(--tafel-kante), 0 26px 46px -34px rgb(4 49 59 / .5);
  color: var(--tinte);
  --fokus: var(--petrol);
}
.schild-wort {
  font: 800 clamp(3.6rem, 11vw, 8.6rem)/1 var(--steck);
  font-stretch: 62%;
  letter-spacing: .005em;
  padding-right: .05em;
}
.schild-satz {
  justify-self: end;
  max-width: 21ch;
  text-align: right;
  font: 650 clamp(1.2rem, 2.1vw, 1.8rem)/1.18 var(--steck);
  font-stretch: 80%;
  color: var(--still);
  padding-bottom: .5rem;
  text-wrap: balance;
}

.fliess { max-width: 66ch; color: var(--still); }
.einzug { margin-left: auto; max-width: 60ch; font-size: 1.12rem; }
.still { color: var(--still); }
.gross {
  font: 750 clamp(1.7rem, 3.4vw, 2.9rem)/1.08 var(--steck);
  font-stretch: 72%;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.handlung { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- event.: drei Akte ---------- */

.akte {
  list-style: none; margin: clamp(3rem, 7vw, 6rem) 0 0; padding: 0;
  display: grid; gap: clamp(4rem, 9vw, 8rem);
}
.akt {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}
.akt-bild { grid-column: 1 / span 7; margin: 0; position: relative; }
.akt-text { grid-column: 9 / span 4; }
.akt:nth-child(even) .akt-bild { grid-column: 6 / span 7; grid-row: 1; }
.akt:nth-child(even) .akt-text { grid-column: 1 / span 4; grid-row: 1; }

.akt-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 9px solid var(--petrol-nacht);
  border-radius: 8px;
  background: var(--petrol-nacht);
}
.akt:first-child .akt-bild img { aspect-ratio: 16 / 10; }

.ziffer {
  position: absolute; top: clamp(-40px, -3vw, -20px); left: clamp(-40px, -3vw, -14px);
  display: grid; place-items: center;
  width: clamp(92px, 9vw, 122px);
  aspect-ratio: 5 / 6.4;
  padding: clamp(10px, 1.1vw, 15px);
  background: var(--petrol);
  border-radius: 10px;
  box-shadow: inset 0 -5px 0 var(--petrol-tief), 0 20px 36px -18px rgb(4 49 59 / .7);
  font: 800 4rem/1 var(--steck); color: var(--birne);
}
.akt:nth-child(even) .ziffer { left: auto; right: clamp(-40px, -3vw, -14px); }
.ziffer svg { width: 100%; height: 100%; overflow: visible; }
.ziffer .glas { fill: url(#glas); }
.ziffer .aus { fill: rgb(255 255 255 / .12); }
.ziffer .licht { fill: url(#schein); opacity: 0; transition: opacity .4s; transition-delay: calc(var(--n) * 55ms); }
.ziffer.ist-an .licht { opacity: 1; }

.akt-text h3 {
  font: 800 clamp(1.9rem, 3vw, 2.7rem)/1 var(--steck);
  font-stretch: 66%;
  text-transform: uppercase;
  letter-spacing: .012em;
  padding-bottom: .9rem;
  margin-bottom: 1.3rem;
  border-bottom: 3px solid var(--schiene);
}
.akt-text p + p { margin-top: 1rem; }
.akt-text .still { font-size: .98rem; }

/* ---------- gastro.: Leuchtkästen an der Stange ---------- */

.teil--gastro {
  background: var(--petrol);
  color: var(--auf-petrol);
  --fokus: var(--birne);
}
.teil--gastro .schild { box-shadow: inset 0 0 0 1px rgb(4 49 59 / .3), 0 30px 50px -30px rgb(2 30 36 / .75); }
.teil--gastro .fliess { color: var(--auf-petrol-still); }

.strasse {
  list-style: none; margin: 0; padding: 44px 0 0;
  display: flex; gap: clamp(.75rem, 1.3vw, 1.15rem);
  position: relative;
}
.strasse::before {
  content: "";
  position: absolute; top: 0; left: -1rem; right: -1rem; height: 12px;
  background: var(--petrol-nacht);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .08), 0 8px 16px -8px rgb(0 0 0 / .45);
}
.kasten { flex: var(--f, 1) 1 0; min-width: 0; position: relative; }
.kasten-licht {
  position: relative;
  height: clamp(118px, 10vw, 146px);
  display: grid; place-items: center;
  padding: 14px;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 35%, #eef3f3 100%);
  border: 7px solid var(--petrol-nacht);
  border-radius: 9px;
  box-shadow: 0 22px 34px -20px rgb(0 0 0 / .6);
}
.kasten-licht::before {  /* zwei Aufhänger zur Stange */
  content: "";
  position: absolute; top: -51px; left: 22%; right: 22%; height: 44px;
  border-inline: 2px solid var(--petrol-nacht);
}
.kasten-licht img { max-height: clamp(64px, 6.4vw, 90px); max-width: 84%; width: auto; height: auto; object-fit: contain; }
.kasten--catering .kasten-licht { border-color: var(--magenta); }
.kasten-jahr {
  margin-top: 1rem;
  font: 800 1.7rem/1 var(--steck);
  font-stretch: 66%;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.kasten-was { margin-top: .35rem; font-size: .93rem; line-height: 1.4; color: var(--auf-petrol-still); }
.kasten--catering .kasten-was { color: #fff; font-weight: 600; }

/* Kein Flackern mehr (Tarik, 19.09.2026: „die Lichter blinken, bitte weg“). */

.gastro-unten {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  align-items: start;
}
.gastro-unten .handlung { margin-top: 2rem; }

/* ---------- team.: Garderobenspiegel ---------- */

.team-buehne {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.spiegel {
  --b-abstand: 44; --b-einzug: 16; --b-r: 5.2;
  margin: 0;
  padding: 32px;
  background: var(--petrol-nacht);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 40px 70px -40px rgb(4 49 59 / .75);
}
.spiegel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }

.zitat { margin: 0 0 2rem; }
.zitat p {
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.012em;
  text-indent: -.42em;
  text-wrap: pretty;
}
.zitat footer { display: grid; gap: .2rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 3px solid var(--schiene); }
.zitat .name {
  font: 800 1.45rem/1.05 var(--steck);
  font-stretch: 68%;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.zitat .rolle { color: var(--still); font-size: .98rem; }
.team-text .handlung { margin-top: 2rem; }

/* ---------- kontakt. ---------- */

.teil--kontakt { padding-top: 0; }
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.kontakt-links .fliess { font-size: 1.12rem; }
.wege { list-style: none; padding: 0; margin: 2.25rem 0 0; border-top: 3px solid var(--schiene); }
.weg {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1.1rem; row-gap: .3rem;
  align-items: center;
  padding: 1.2rem .5rem;
  border-bottom: 3px solid var(--schiene);
  text-decoration: none;
  transition: background-color .2s;
}
.weg:hover { background: var(--tafel); }
.weg-zeichen {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--petrol); color: #fff;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.weg:hover .weg-zeichen, .weg:focus-visible .weg-zeichen {
  background: var(--birne); color: var(--petrol-nacht);
  box-shadow: 0 0 18px 2px rgb(255 190 80 / .55);
}
.weg-was {
  font: 700 .82rem/1 var(--steck);
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--still);
}
.weg-wert {
  font: 800 clamp(1.35rem, 2.2vw, 1.8rem)/1.05 var(--steck);
  font-stretch: 70%;
  overflow-wrap: anywhere;
}

.anfrage {
  display: grid; gap: 1.1rem;
  background: var(--tafel);
  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 30px) clamp(14px, 2.4vw, 30px) clamp(20px, 3vw, 34px);
  box-shadow: inset 0 0 0 1px var(--tafel-kante), 0 36px 64px -40px rgb(4 49 59 / .55);
}
.vorschau { --fr: 16px; --b-abstand: 26; --b-einzug: 12; --b-r: 3.4; border-radius: 10px; margin-bottom: .6rem; }
.tafel--vorschau {
  display: grid; align-content: center; gap: .15rem;
  min-height: clamp(150px, 15vw, 190px);
  padding: 10px clamp(12px, 2vw, 22px);
}
.v-zeile {
  font-family: var(--steck);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 2px solid var(--schiene);
  padding: .05em 0 .06em;
  transition: color .3s;
}
.v-klein { font-size: clamp(.95rem, 1.3vw, 1.1rem); font-stretch: 80%; letter-spacing: .14em; color: var(--still); border-top: 2px solid var(--schiene); }
.v-gross { font-size: clamp(1.1rem, calc(100cqi / (var(--len, 9) * .62)), 3.5rem); letter-spacing: .01em; }
.v-mittel { font-size: clamp(1.05rem, 2.1vw, 1.5rem); letter-spacing: .03em; }
.v-zeile.leer { color: #a9b8bb; }

.anfrage label {
  display: grid; gap: .5rem;
  font: 700 .82rem/1 var(--steck);
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--still);
}
.anfrage label::before { content: none; }
.anfrage input, .anfrage textarea {
  width: 100%;
  min-height: 52px;
  font: 500 1.0625rem/1.4 var(--text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte);
  background: var(--grund);
  border: 0;
  border-bottom: 3px solid var(--schiene);
  border-radius: 6px 6px 0 0;
  padding: .8rem .95rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.anfrage textarea { resize: vertical; min-height: 120px; }
.anfrage input::placeholder, .anfrage textarea::placeholder { color: #5d6b70; opacity: 1; }
.anfrage input:hover, .anfrage textarea:hover { border-bottom-color: #b5c3c5; }
.anfrage input:focus, .anfrage textarea:focus {
  outline: none;
  background: #fff;
  border-bottom-color: var(--petrol);
  box-shadow: inset 0 0 0 2px var(--petrol);
}
.anfrage .hat-wert input, .anfrage .hat-wert textarea { border-bottom-color: var(--birne-tief); background: #fff; }
.anfrage [aria-invalid="true"] { border-bottom-color: var(--fehler); box-shadow: inset 0 0 0 2px var(--fehler); }
.anfrage-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fehler { color: var(--fehler); font-size: .95rem; margin-top: -.5rem; }
.anfrage .knopf--voll { margin-top: .4rem; min-height: 56px; font-size: 1.15rem; }
.anfrage-hinweis { font-size: .9rem; color: var(--still); text-align: center; }
.gesendet {
  text-align: center; font-weight: 600; color: var(--petrol-nacht);
  background: #fff4dc; border-radius: 6px; padding: .8rem 1rem;
}

/* ---------- Fuß ---------- */

.fuss {
  background: var(--petrol-nacht);
  color: var(--auf-petrol-still);
  padding-block: clamp(4rem, 8vw, 7rem) 2.5rem;
  --fokus: var(--birne);
}
.fuss-wort {
  font: 800 clamp(4rem, 15vw, 13rem)/.9 var(--steck);
  font-stretch: 62%;
  color: #fff;
  letter-spacing: -.005em;
}
.fuss-reihe {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 1.5rem 3rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 3px solid rgb(255 255 255 / .14);
}
.fuss-was { max-width: 38ch; }
.fuss-menue { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.fuss-menue a { text-decoration: none; padding-block: .35rem; font: 650 1.02rem/1.2 var(--steck); font-stretch: 85%; color: #fff; }
.fuss-menue a:hover { text-decoration: underline; }
.fuss-zeile { margin-top: 2.5rem; font-size: .88rem; color: #9fbfc6; }

/* ---------- Impressum ---------- */

.recht { padding-block: clamp(2rem, 5vw, 4rem) var(--luft); }
.recht .schild { margin-bottom: 3rem; }
.recht-text { max-width: 66ch; }
.recht-text h2 {
  font: 800 1.4rem/1.1 var(--steck); font-stretch: 70%; text-transform: uppercase; letter-spacing: .02em;
  margin: 2.6rem 0 .8rem; padding-bottom: .6rem; border-bottom: 3px solid var(--schiene);
}
.recht-text p + p { margin-top: .6rem; }
.recht-text a { color: var(--petrol); }
.offen {
  color: var(--still);
  background: #fff;
  border-radius: 6px;
  padding: .8rem 1rem;
  box-shadow: inset 0 0 0 2px var(--magenta);
  font-size: .98rem;
}

/* ---------- Anpassung ---------- */

@media (max-width: 1100px) {
  .strasse { flex-wrap: wrap; padding-top: 0; row-gap: 2.25rem; }
  .strasse::before, .kasten-licht::before { display: none; }
  .kasten { flex: 1 1 calc(25% - 1rem); }
}

@media (max-width: 980px) {
  .akt { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .akt-bild, .akt-text,
  .akt:nth-child(even) .akt-bild, .akt:nth-child(even) .akt-text { grid-column: 1; grid-row: auto; }
  .akt-bild { margin-inline: clamp(8px, 2vw, 20px); }
  .team-buehne, .kontakt-raster, .gastro-unten { grid-template-columns: minmax(0, 1fr); }
  .markise-unten { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .menue { display: none; }
  .kopf { justify-content: space-between; padding-block: .6rem; }
  .wort { font-size: 1.35rem; }
  .neun { width: 34px; height: 34px; }
  .markise { --fr: 14px; --b-abstand: 24; --b-einzug: 10; --b-r: 3.3; border-radius: 10px; }
  .markise-unten { padding-inline: 0; }
  .taten .knopf { flex: 1 1 auto; }
  .buehne-bild img { height: 56vh; min-height: 300px; }
  .fakten { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
  .fakten li + li { border-left: 0; border-top: 3px solid var(--schiene); }
  .schild { grid-template-columns: minmax(0, 1fr); }
  .schild-satz { justify-self: start; text-align: left; padding-bottom: .2rem; }
  .einzug { margin-left: 0; }
  .kasten { flex: 1 1 calc(50% - 1rem); }
  .spiegel { --b-abstand: 30; --b-einzug: 11; --b-r: 3.6; padding: 22px; }
  .vorschau { --fr: 12px; --b-abstand: 22; --b-einzug: 9; --b-r: 2.8; }
  .anfrage-zwei { grid-template-columns: minmax(0, 1fr); }
  .ziffer { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}