/* =============================================================================
   Clearweb — Ben Thuelig, Beckum
   Eigenes Stylesheet. Tailwind liefert nur den Reset, die Gestalt steht hier.

   Dunkles Entwickler-Interface: Terminalfenster, Codepanels, Monospace-
   Beschriftungen, feines Punktraster. Sachlich, nicht verspielt.

   Inhalt
     1  Token und Grundlagen
     2  Raster, Container, vertikale Rhythmik
     3  Typografie und Beschriftungen
     4  Panels, Karten, Terminalbausteine
     5  Hero
     6  Kopfzeile, Navigation, mobiles Menue
     7  Knoepfe und Chips
     8  Bausteine: Listen, Schritte, Pakete, Projekte
     9  Akkordeon als Terminaldialog
    10  Karussell
    11  Formular
    12  Fusszeile
    13  Einblendungen und reduzierte Bewegung
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1  TOKEN UND GRUNDLAGEN
   -------------------------------------------------------------------------- */

:root {
  --grund: #0A0C10;
  --panel: #11151C;
  --rahmen: #1F2630;
  --text: #E4E9F0;          /* Fliesstext, Ziel mindestens 7:1  */
  --leise: #8A94A3;         /* Sekundaertext, Ziel mindestens 4,5:1 */

  /* Der einzige Akzentton. Als Schrift erst ab 20 px zugelassen. */
  --kupfer: #E0552B;

  /* Die einzige Ausnahme von der Ein-Akzent-Regel: Statusgruen. Es steht
     ausschliesslich an Haekchen in Leistungslisten und am Prompt-Zeichen der
     Terminalbausteine — nie im Fliesstext. */
  --gruen: #3FB950;

  /* Zwei Haekchenfarben in den Paketen — keine weiteren Akzente, sondern die
     Metalltoene der Stufen selbst. */
  --haken-silber: #A8B0B8;
  --haken-gold: #C9982B;

  /* Dritte Ausnahme: die Sternreihe der Bewertungen. Gold ist dort die
     erwartete Farbe; der Kupferton laese sich als Zustand missverstehen. */
  --stern: #E7B416;

  --feldgrund: #0D1117;     /* Eingabefelder, eine Spur dunkler als der Panel */
  --punkt: #232B37;         /* Punktraster, sichtbar ueber der ganzen Seite */
  --linie: #171D26;         /* das groebere Linienraster, dezent */

  /* Grosse Flaechen liegen halbdurchsichtig ueber dem Raster, damit die Punkte
     durchscheinen statt bei jeder Karte abzureissen. Der Wert ist so gewaehlt,
     dass die Punkte erkennbar bleiben und der Kontrast der Schrift haelt. */
  --panel-durch: rgba(17, 21, 28, .78);

  --rand: 24px;
  --spalte-max: 1280px;

  --takt-eng: clamp(2.5rem, 5vw, 4rem);
  --takt: clamp(4rem, 8vw, 6.5rem);
  --takt-weit: clamp(5.5rem, 11vw, 9rem);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (min-width: 768px)  { :root { --rand: 40px; } }
@media (min-width: 1024px) { :root { --rand: 64px; } }

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

html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .22vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;

  /* KEIN eigener Hintergrund auf dem body: der Grundton steht auf html. Ein
     Hintergrund am body wuerde die Rasterebene body::before (z-index: -1)
     vollstaendig verdecken — negative Ebenen liegen hinter dem Hintergrund
     ihres Elternelements. Genau daran war das Punktraster unsichtbar. */
  background-color: transparent;
  position: relative;
}

/* Hintergrund auf einer eigenen Ebene hinter dem Inhalt. Drei Lagen, alle aus
   CSS:
     1. der Kupferschimmer oben mitte, zurueckgenommen auf 4 %
     2. ein groeberes Linienraster, 1 px in #171D26 alle 128 px
     3. das feine Punktraster, 1 px in #232B37 alle 32 px
   Beide Raster laufen ueber die volle Seitenhoehe durch — ohne Maske. Eine
   Maske hatte sie im unteren Drittel ausgeblendet, und mit der alten, zu
   dunklen Punktfarbe war ueberhaupt nichts mehr zu sehen. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 0,
      rgba(224, 85, 43, .04) 0%,
      rgba(224, 85, 43, .02) 34%,
      rgba(224, 85, 43, 0) 62%),
    linear-gradient(to right, var(--linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linie) 1px, transparent 1px),
    radial-gradient(circle, var(--punkt) 1px, transparent 1px);
  background-size: 100% 900px, 128px 128px, 128px 128px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: 50% 0, 0 0, 0 0, 0 0;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--kupfer);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprunglink {
  position: fixed; top: 8px; left: 8px; z-index: 90;
  transform: translateY(-160%);
  background: var(--kupfer); color: var(--grund);
  font-family: var(--mono); font-weight: 600; font-size: .9rem;
  padding: 12px 18px; text-decoration: none;
  transition: transform .18s ease;
}
.sprunglink:focus-visible { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   2  RASTER, CONTAINER, RHYTHMIK
   -------------------------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--spalte-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Getrennt wird ueber eine 1-px-Linie, nicht ueber einen Farbwechsel:
   die Seite ist durchgehend dunkel. */
.sektion {
  position: relative;
  padding-block: var(--takt);
  border-top: 1px solid var(--rahmen);
}
.sektion--eng  { padding-block: var(--takt-eng); }
.sektion--weit { padding-block: var(--takt-weit); }
.sektion:first-of-type { border-top: 0; }

.raster-3 { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; align-items: start; }
.raster-2 { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; }
.raster-4 { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zweispalt { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
.zweispalt > * { min-width: 0; }
@media (min-width: 900px) {
  .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .zweispalt--breit-links  { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .zweispalt--breit-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .zweispalt--formular     { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   3  TYPOGRAFIE UND BESCHRIFTUNGEN
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -.02em;
}

.t-hero { font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem); line-height: 1.12; }
.t-h2   { font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem); }
.t-h3   { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); }
.t-h4   { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); }

/* Sektionsbeschriftung im Stil eines Kommentars: "// 03 — leistungen". */
.braue {
  display: block;
  font-family: var(--mono);
  font-size: clamp(.78rem, .74rem + .16vw, .875rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--leise);
  margin-bottom: .9rem;
}

/* Eine kurze Akzentlinie bleibt als Gliederung erhalten. */
.strich {
  width: 96px; height: 2px;
  background: var(--kupfer);
  margin: clamp(1rem, 2vw, 1.4rem) 0 clamp(1.2rem, 2.4vw, 1.8rem);
}

.lauf { max-width: 62ch; }
.lauf p + p { margin-top: 1em; }
.lead { font-size: clamp(1.03rem, 1rem + .4vw, 1.2rem); line-height: 1.6; max-width: 54ch; }
.leise { color: var(--leise); }

/* Grosse Umrissziffer hinter der Ueberschrift, jetzt in Monospace. */
.sektionsnummer {
  position: absolute;
  top: calc(var(--takt) * .05);
  left: var(--rand);
  z-index: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(5rem, 15vw, 11rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(224, 85, 43, .22);
  pointer-events: none;
  user-select: none;
}
.sektion > .huelle { position: relative; z-index: 1; }

/* Umrisszeile der Hero-Headline, jetzt im Akzentton. */
.umriss {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--kupfer);
  paint-order: stroke fill;
}

/* -----------------------------------------------------------------------------
   4  PANELS, KARTEN, TERMINALBAUSTEINE

   Alles rechteckig, 1 px Rahmen, Grund #11151C, Kopfzeile mit
   Monospace-Beschriftung. Die Akzentkante sitzt je Baustein an einer anderen
   Seite — links, oben oder unten.
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--panel-durch);
  border: 1px solid var(--rahmen);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.panel__kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--rahmen);
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--leise);
  letter-spacing: .02em;
}
.panel__kopf b { color: var(--text); font-weight: 500; }
.panel__marke {
  margin-left: auto;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grund); background: var(--kupfer);
  padding: .12rem .5rem;
}
.panel__inhalt {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex; flex-direction: column; gap: .7rem;
  flex: 1;
}

.kante-links  { border-left: 2px solid var(--kupfer); }
.kante-oben   { border-top: 2px solid var(--kupfer); }
.kante-unten  { border-bottom: 2px solid var(--kupfer); }

/* Die drei Punkte in der Kopfleiste eines Terminalfensters. */
.ampel { display: inline-flex; gap: .32rem; }
.ampel i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rahmen);
  display: block;
}

/* Terminalinhalt: Monospace, Prompt-Zeichen in Statusgruen. */
.terminal { font-family: var(--mono); font-size: clamp(.8rem, .76rem + .2vw, .9rem); line-height: 1.85; }
.terminal .zeile { display: flex; gap: .6rem; align-items: baseline; }
.terminal .prompt, .terminal .haken { color: var(--gruen); flex: none; }
.terminal .befehl { color: var(--text); }
.terminal .ausgabe { color: var(--leise); }

/* Der Cursor blinkt; bei reduzierter Bewegung steht er still. */
.cursor {
  display: inline-block;
  width: .55em; height: 1.05em;
  background: var(--kupfer);
  vertical-align: -.16em;
  animation: blinken 1.1s steps(1, end) infinite;
}
@keyframes blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* -----------------------------------------------------------------------------
   5  HERO — Headline links, Terminalfenster rechts
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(8rem, 19vh, 12rem) clamp(4rem, 10vh, 7rem);
  min-height: 72svh;
  display: flex; align-items: center;
}
.hero__text { max-width: 46ch; }
/* Das Terminalfenster ist so hoch wie sein Inhalt und wird nicht auf die
   Zeilenhoehe des Rasters gestreckt. */
.hero__raster .panel { height: auto; }

/* Kopfzone der Unterseiten: kein Bild, nur Beschriftung und Ueberschrift. */
.kopfzone {
  padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--rahmen);
}
.kopfzone__text { max-width: 52ch; }

/* Zwei Sektionen hintereinander ohne eigene Linie: die Linie kommt vom
   Nachbarn. Diese Klasse bleibt aus dem alten Markup erhalten und macht
   hier nichts weiter als eine Linie. */
.trennlinie { border-top: 1px solid var(--rahmen); }
.rasterband { border: 1px solid var(--rahmen); background: var(--panel-durch); padding: clamp(1.25rem, 3vw, 2rem); }

/* -----------------------------------------------------------------------------
   6  KOPFZEILE, NAVIGATION, MOBILES MENUE
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: .7rem 0;
  background: rgba(10, 12, 16, .94);
  border-bottom: 1px solid var(--rahmen);
}
.kopf.ist-gescrollt { background: var(--grund); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.marke {
  display: inline-flex; align-items: baseline; gap: .1rem;
  font-family: var(--mono);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -.02em;
}
/* Die Wortmarke steht bei 17 px — Kupfer als Schriftfarbe ist erst ab 20 px
   zugelassen. Der Akzent sitzt deshalb in der Unterkante, nicht in der Schrift. */
.marke span {
  color: var(--text);
  border-bottom: 2px solid var(--kupfer);
  padding-bottom: 1px;
}

.nav-pille { display: none; }
@media (min-width: 1024px) {
  .nav-pille { display: flex; align-items: center; gap: .1rem; }
  .nav-pille a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .8rem;
    font-family: var(--mono); font-size: .85rem;
    text-decoration: none;
    color: var(--leise);
    border: 1px solid transparent;
    transition: color .16s ease, border-color .16s ease;
  }
  .nav-pille a:hover { color: var(--text); border-color: var(--rahmen); }
  .nav-pille a[aria-current="page"] {
    color: var(--grund); background: var(--kupfer); border-color: var(--kupfer); font-weight: 600;
  }
}

.burger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 44px; min-height: 44px; padding: 0 .9rem;
  background: var(--panel);
  border: 1px solid var(--rahmen);
  color: var(--text);
  font-family: var(--mono); font-size: .85rem; font-weight: 500;
  cursor: pointer;
}
@media (min-width: 1024px) { .burger { display: none; } }

.menue {
  position: fixed; inset: 0; z-index: 70;
  background: var(--grund);
  display: flex; flex-direction: column;
  padding: clamp(1rem, 4vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.menue.ist-offen { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.menue__kopf { display: flex; justify-content: flex-end; }
.menue__liste { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.menue__liste a {
  display: block; padding: .8rem 0; min-height: 44px;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 1rem + 1.8vw, 1.8rem);
  text-decoration: none;
  border-bottom: 1px solid var(--rahmen);
}
.menue__liste a[aria-current="page"] { color: var(--kupfer); }

.schliessen {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--panel); border: 1px solid var(--rahmen);
  color: var(--text); cursor: pointer;
}

/* -----------------------------------------------------------------------------
   7  KNOEPFE UND CHIPS
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .75rem 1.4rem;
  font-family: var(--mono); font-size: .9rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--kupfer);
  background: var(--kupfer); color: var(--grund);
  transition: background-color .16s ease, color .16s ease;
}
.knopf:hover { background: #f0693f; border-color: #f0693f; }
.knopf--leise { background: transparent; color: var(--text); border-color: var(--rahmen); }
.knopf--leise:hover { background: var(--panel); border-color: var(--leise); }
.knopf .icon { width: 1.05em; height: 1.05em; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Chips: rechteckig, im gewaehlten Zustand Akzentflaeche mit dunkler Schrift. */
.chipfeld { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--rahmen);
  background: var(--feldgrund);
  color: var(--text);
  font-family: var(--mono); font-size: .85rem; line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { border-color: var(--leise); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) {
  background: var(--kupfer); border-color: var(--kupfer);
  color: var(--grund); font-weight: 600;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--kupfer); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   8  BAUSTEINE
   -------------------------------------------------------------------------- */

/* Karten sind Panels: gleicher Aufbau, gleiche Regeln. Zwei Namen, weil das
   Markup an vielen Stellen schon .karte benutzt. */
.karte {
  position: relative;
  /* Kein flacher Ton mehr, sondern ein sehr schwacher Verlauf von oben nach
     unten — genug, damit die Karte Tiefe bekommt, zu wenig, um aufzufallen.
     Halbdurchsichtig, damit das Punktraster unter den Karten nicht abreisst. */
  background: linear-gradient(180deg, rgba(20, 25, 34, .80) 0%, rgba(15, 19, 26, .80) 100%);
  border: 1px solid #232B37;
  display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              border-color .25s ease, box-shadow .25s ease;
}
/* Eine kurze Akzentlinie ueber der Kopfzeile, ein Drittel der Kartenbreite. */
.karte::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 33%; height: 2px;
  background: var(--kupfer);
}
.karte:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 85, 43, .4);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55);
}
.karte__kopf, .projekt__kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid #232B37;
  font-family: var(--mono); font-size: .72rem;
  color: var(--leise); letter-spacing: .08em;
}
.karte__inhalt {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
}
/* Das Symbol steht in einem eigenen Feld, nicht frei. */
.karte__icon {
  width: 44px; height: 44px;
  padding: 10px;
  border: 1px solid #232B37;
  background: #0C1015;
  color: var(--kupfer);
  margin-bottom: .6rem;
}
.karte h3 { margin-bottom: .5rem; }
.karte p { margin: 0; color: var(--leise); max-width: 46ch; }

.projekt {
  position: relative;
  background: var(--panel-durch);
  border: 1px solid var(--rahmen);
  display: flex; flex-direction: column; height: 100%;
}
.projekt__inhalt {
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: flex; flex-direction: column; gap: .5rem; flex: 1;
}

.beleg { display: flex; gap: .8rem; align-items: flex-start; padding-block: .25rem; }
.beleg .icon { width: 1.4rem; height: 1.4rem; color: var(--kupfer); margin-top: .2rem; }
.beleg b { display: block; font-family: var(--mono); font-size: .95rem; font-weight: 600; }
.beleg span { color: var(--leise); font-size: .95rem; }

/* Haekchen in Statusgruen — nur hier und im Terminal. */
.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hakenliste li { display: flex; gap: .65rem; align-items: flex-start; }
.hakenliste .icon { width: 1.05rem; height: 1.05rem; margin-top: .32rem; color: var(--gruen); }

/* In den Paketen zeigt die Farbe des Haekchens die Stufe an: Silber steht in
   beiden Paketen, Gold nur im Goldpaket. Statusgruen kommt hier nicht mehr
   vor — es bleibt allein das Prompt-Zeichen der Fragen. */
.haken-silber .icon, .icon.haken-silber { color: var(--haken-silber); }
.haken-gold   .icon, .icon.haken-gold   { color: var(--haken-gold); }

.paketlegende {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  justify-content: center;
  margin: clamp(1rem, 2.2vw, 1.5rem) auto 0;
  max-width: 900px;
  font-family: var(--mono); font-size: .8rem; color: var(--leise);
}
.paketlegende span { display: inline-flex; align-items: center; gap: .45rem; }
.paketlegende .icon { width: 1rem; height: 1rem; }
.hakenliste--aus .icon { color: var(--leise); }
.hakenliste--eng { gap: .45rem; font-size: .95rem; }

.schritt { position: relative; padding-top: 1.3rem; border-top: 1px solid var(--rahmen); }
.schritt__nr {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1; color: var(--kupfer); display: table; margin-bottom: .5rem;
  /* Die Ziffer steht frei auf der Seite, also auf dem Punktraster. Ein Punkt
     hinter der Glyphe hebt den Untergrund an und druecktden Kontrast von
     Kupfer auf Grund unter 4,5:1 (gemessen 4,44:1). Der Grundton unter der
     Ziffer nimmt genau diese Punkte weg — sichtbar aendert sich nichts. */
  background: var(--grund);
  padding-right: .12em;
}
.schritt h3 { margin-bottom: .35rem; }
.schritt p { margin: 0; color: var(--leise); }

/* Pakete als Konfigurationsbloecke. */
.paketraster {
  display: grid; gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: 1fr;
  max-width: 900px; margin-inline: auto;
}
@media (min-width: 768px) { .paketraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.paket__kopfzeile { display: flex; align-items: center; gap: 1rem; }
.paket__unter { color: var(--leise); margin: .35rem 0 0; font-size: .95rem; }

.preis {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height: 1.1; margin: 0;
}
.preis small {
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: .82rem; color: var(--leise); margin-top: .5rem; letter-spacing: 0;
}

/* Die empfohlene Karte traegt einen umlaufenden Akzentrahmen und einen sehr
   weichen Schein nach aussen — keine einseitige Kante mehr. */
.panel--gold {
  border: 2px solid var(--kupfer);
  box-shadow: 0 0 24px rgba(224, 85, 43, .18);
}
.panel--gold .panel__kopf { border-bottom-color: rgba(224, 85, 43, .45); }

/* Die Metallbarren sind jetzt kleine Videos aus derselben Quelle — Form und
   Bewegung sind in beiden Karten identisch, nur die Farbe unterscheidet sie.
   Ihr Hintergrund ist reines Schwarz; mit mix-blend-mode: screen faellt er
   weg und es entsteht keine sichtbare Kante auf dem Kartengrund. */
.paketvideo {
  flex: none;
  width: 128px; height: 128px;
  display: block;
  mix-blend-mode: screen;
  background: transparent;
}
@media (min-width: 1024px) { .paketvideo { width: 160px; height: 160px; } }

.preiszeile {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  justify-content: space-between;
  padding-block: .75rem;
  border-bottom: 1px solid var(--rahmen);
  font-size: .95rem;
}
.preiszeile b { font-family: var(--mono); font-weight: 500; font-size: .9rem; }
.preiszeile span { color: var(--leise); }

/* Sichtbarer Platzhalter: gestrichelter Rahmen im Akzentton, Schrift hell. */
.platzhalter {
  display: block;
  border: 1px dashed var(--kupfer);
  background: rgba(224, 85, 43, .08);
  color: var(--text);
  font-family: var(--mono); font-size: .82rem; line-height: 1.5;
  padding: .5rem .75rem;
}
.platzhalter + .platzhalter { margin-top: .5rem; }

/* Bilder sitzen in Panels und sind gedaempft, damit sie nicht aus der
   dunklen Flaeche springen. Kein Weichzeichner. */
.bildpanel { border: 1px solid var(--rahmen); background: var(--panel-durch); }
.bildpanel img { width: 100%; height: auto; filter: brightness(.88); }
.bildblock figcaption {
  margin: 0; padding: .6rem .8rem;
  font-family: var(--mono); font-size: .78rem; color: var(--leise);
  border-top: 1px solid var(--rahmen);
}

.projekt img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: brightness(.88); }
.projekt__marke {
  align-self: flex-start;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text);
  border: 1px dashed var(--kupfer);
  padding: .2rem .5rem;
}

.fakten { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fakt b {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.4rem); line-height: 1.2;
}
.fakt span { color: var(--leise); font-size: .92rem; }

/* -----------------------------------------------------------------------------
   9  AKKORDEON ALS TERMINALDIALOG
   -------------------------------------------------------------------------- */

.fragen { border-top: 1px solid var(--rahmen); }
.frage { border-bottom: 1px solid var(--rahmen); }
.frage > summary {
  display: flex; align-items: flex-start; gap: .7rem;
  list-style: none; cursor: pointer;
  padding: clamp(.9rem, 1.8vw, 1.2rem) 0;
  min-height: 44px;
  font-family: var(--mono);
  font-size: clamp(.95rem, .9rem + .35vw, 1.1rem);
  font-weight: 500;
  line-height: 1.4;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::before {
  content: "$";
  color: var(--gruen);
  flex: none;
}
.frage > summary .icon {
  width: 1.2rem; height: 1.2rem; color: var(--kupfer);
  margin-left: auto; margin-top: .15rem;
  transition: transform .2s ease;
}
.frage[open] > summary .icon { transform: rotate(180deg); }
.frage__antwort {
  padding: 0 0 clamp(.9rem, 1.8vw, 1.2rem) clamp(1.2rem, 3vw, 2rem);
  border-left: 1px solid var(--rahmen);
  margin-left: .35rem;
  max-width: 62ch;
  color: var(--leise);
}
.frage__antwort p { margin: 0 0 .8em; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   10  KARUSSELL
   -------------------------------------------------------------------------- */

.karussell { position: relative; }

/* Das Fenster schneidet die Spur ab. Angehalten wird daraus ein normaler
   Scrollbereich — nur so lassen sich die Karten im Stillstand noch mit den
   Pfeiltasten erreichen. */
.karussell__fenster { overflow: hidden; }
.karussell__fenster:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 3px; }
.karussell.ist-pause .karussell__fenster {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}

.karussell__spur {
  --luecke: clamp(1rem, 2.4vw, 1.5rem);
  display: flex; gap: 0;
  width: max-content; padding-bottom: 1rem;
  animation: stimmen-lauf 40s linear infinite;
}
/* Der Abstand haengt an der Karte, nicht als gap an der Spur: sonst fehlt am
   Ende des ersten Satzes genau ein halber Abstand und die Schleife springt.
   Die Breite kommt aus vw statt aus Prozent — bei width:max-content hat die
   Spur keine Bezugsbreite, an der sich Prozent messen liesse, und Chrome
   faellt auf die Textbreite der Karte zurueck. */
.karussell__spur > * {
  flex: 0 0 min(80vw, 380px);
  margin-right: var(--luecke);
  scroll-snap-align: start;
}

/* Ein Satz Karten ist breiter als das Fenster, deshalb genuegt der zweite
   Satz fuer die Schleife: bei -50 % steht die Spur wieder auf Anfang. */
@keyframes stimmen-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Zeigen haelt an, ohne Zustand: sobald die Maus weg ist, laeuft es weiter.
   Der Fokus haelt ebenfalls an, aber ueber .ist-pause aus dem Skript — sonst
   bliebe die Spur stehen, waehrend der Knopf "Abspielen" anbietet. */
.karussell:hover .karussell__spur,
.karussell.ist-pause .karussell__spur { animation-play-state: paused; }

.karussell__bedienung { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.rundknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 44px; min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--rahmen);
  background: var(--panel); color: var(--text);
  font-family: var(--mono); font-size: .85rem; cursor: pointer;
}
.rundknopf:hover { border-color: var(--leise); }

.stimme {
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border: 1px solid var(--punkt);
  background: linear-gradient(160deg, #141922, #0F131A);
}
.sternreihe { display: inline-flex; gap: .12rem; color: var(--kupfer); }
.sternreihe .icon { width: 1.05rem; height: 1.05rem; }

/* Sterne: 18 px und mit Abstand, damit die Reihe als Bewertung liest und
   nicht als Symbolleiste. */
.stimme .sternreihe { gap: .28rem; color: var(--stern); }
.stimme .sternreihe .icon { width: 18px; height: 18px; }

/* Hoechstens vier Zeilen. Ohne die Begrenzung reisst eine lange Stimme das
   Kartenraster auseinander, sobald echte Texte eingesetzt werden. */
.stimme__text {
  margin: 0; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}

.stimme__fuss {
  display: flex; align-items: center; gap: .7rem;
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--punkt);
}
.stimme__initial {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--feldgrund); border: 1px solid var(--punkt);
  /* 20 px, nicht kleiner: der Akzentton ist als Schrift erst ab dieser
     Groesse zugelassen. In den 32-px-Kreis passt der Grossbuchstabe damit
     immer noch mit Luft. */
  color: var(--kupfer); font-family: var(--mono); font-size: 20px; line-height: 1;
}
.stimme__wer { display: flex; flex-direction: column; min-width: 0; }
.stimme__name { font-family: var(--mono); font-size: .9rem; font-weight: 500; color: var(--text); }
.stimme__rolle { font-size: .78rem; color: var(--leise); }
.stimme__quelle { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--leise); }

/* -----------------------------------------------------------------------------
   11  FORMULAR
   -------------------------------------------------------------------------- */

.formularpanel { background: var(--panel-durch); border: 1px solid var(--rahmen); border-top: 2px solid var(--kupfer); }
.formularpanel > .zweispalt { padding: clamp(1.25rem, 3vw, 2.25rem); }

.feld { display: block; margin-bottom: 1rem; }
.feld > span.beschriftung,
legend {
  display: block;
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  color: var(--leise);
  margin-bottom: .4rem;
  padding: 0;
}
/* Jede Beschriftung traegt ein vorangestelltes Prompt-Zeichen. */
.feld > span.beschriftung::before,
legend::before { content: "> "; color: var(--leise); }
.pflicht { color: var(--kupfer); }

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld textarea {
  width: 100%; min-height: 46px; padding: .65rem .8rem;
  background: var(--feldgrund);
  border: 1px solid var(--rahmen);
  color: var(--text);
  font-family: var(--mono); font-size: .92rem;
  border-radius: 0;
}
.feld textarea { min-height: 8rem; resize: vertical; font-family: var(--sans); font-size: .98rem; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--leise); }
.feld input:hover, .feld textarea:hover { border-color: var(--leise); }
.feld input:focus, .feld textarea:focus { border-color: var(--kupfer); outline: none; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 1px; }
.feld input.ist-ungueltig, .feld textarea.ist-ungueltig { border-color: #ff8a63; }

.fehler { display: none; margin-top: .35rem; font-family: var(--mono); font-size: .8rem; color: #ffb59b; }
.fehler.ist-sichtbar { display: block; }

fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; }
.hilfe { color: var(--leise); font-size: .82rem; font-family: var(--mono); }

.zustimmung { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.1rem; }
.zustimmung input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: .28rem 0 0; padding: 0;
  accent-color: var(--kupfer);
}
.zustimmung span { font-size: .95rem; }

.honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.formularstatus { margin-top: 1rem; }
.formularstatus:empty { display: none; }
.meldung { border: 1px solid var(--kupfer); background: rgba(224, 85, 43, .12); padding: .7rem .9rem; font-size: .95rem; }

.kontaktspalte { display: flex; flex-direction: column; gap: 1.1rem; }
.kontaktzeile { display: flex; gap: .75rem; align-items: flex-start; }
.kontaktzeile .icon { width: 1.2rem; height: 1.2rem; color: var(--kupfer); margin-top: .3rem; }
.kontaktzeile b { display: block; font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--leise); }
.kontaktzeile .telefon { font-family: var(--mono); }

@media (max-width: 767px) { .knopf[type="submit"] { width: 100%; } }

/* -----------------------------------------------------------------------------
   12  FUSSZEILE
   -------------------------------------------------------------------------- */

.fuss { border-top: 1px solid var(--rahmen); padding-block: var(--takt-eng); }
.fuss a { color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--leise);
}
.fuss ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.fuss li a { display: inline-block; min-height: 32px; font-size: .95rem; }
.fuss__schluss {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--rahmen);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .8rem; color: var(--leise);
}

/* -----------------------------------------------------------------------------
   13  EINBLENDUNGEN
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1),
              transform .5s cubic-bezier(.16, 1, .3, 1);
}
.js .reveal.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cursor { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

[id] { scroll-margin-top: clamp(5rem, 11vh, 6.5rem); }
.icon-links { transform: rotate(180deg); }


/* -----------------------------------------------------------------------------
   14  HERO-BÜHNE — eine Website, die sich selbst aufbaut

   Reines HTML und CSS: kein Video, keine Bibliothek, keine externe Datei, kein
   JavaScript. Alle Elemente liegen von Anfang an im DOM; animiert werden
   ausschliesslich transform und opacity, damit die Arbeit im Kompositor bleibt
   und die Bildrate steht.

   Zeitachse: ein Durchlauf dauert 9 s und wiederholt sich endlos. Jedes Element
   traegt dieselbe Animationsdauer von 9 s und eine eigene Verzoegerung; dadurch
   bleiben alle Bausteine im selben Takt, statt nach dem ersten Durchgang
   auseinanderzulaufen. Die Einflugbewegung selbst dauert 0,55 s — das sind
   6,111 % des Zyklus.

   Die Buehne ist Dekoration: aria-hidden, nicht fokussierbar, kein vorgelesener
   Text. Ueber ihr liegt der Hero-Text auf einem Verlauf.
   -------------------------------------------------------------------------- */

.buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Deckkraft und Weichzeichner halten die Buehne im Hintergrund, damit der
     Text darueber lesbar bleibt. */
  opacity: .34;
  filter: blur(6px);
  perspective: 1600px;
  pointer-events: none;
}

.buehne__fenster {
  position: absolute;
  /* Groesser als der sichtbare Bereich: die Raender laufen aus dem Bild. */
  top: 12%; left: -6%; width: 112%; height: 104%;
  /* Die angedeutete Website ist HELL — so sieht eine Website nun einmal aus,
     und nur so bleibt bei 34 % Deckkraft ueber fast schwarzem Grund noch eine
     erkennbare Form uebrig. Dunkle Toene verschwinden dort vollstaendig. */
  background: #EEF2F7;
  border: 1px solid #9AA6B5;
  transform-origin: 60% 40%;
  transform: rotateX(6deg) rotateY(-9deg);
  animation: buehne-atmen 9s linear infinite;
  will-change: transform;
}

.fenster__leiste {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid #9AA6B5;
  background: #D3DBE5;
}
.fenster__leiste .ampel i { background: #8F9BAA; }
.fenster__adresse {
  font-family: var(--mono); font-size: .72rem; color: #3A45462;
  border: 1px solid #9AA6B5; background: #FFFFFF;
  padding: .1rem .6rem; border-radius: 2px;
}

/* Die leere Seite: feines Punktraster und graue Platzhalterbalken. */
.fenster__seite {
  position: relative;
  height: calc(100% - 2.4rem);
  background: #FFFFFF;
  background-image: radial-gradient(circle, #C3CCD8 1px, transparent 1px);
  background-size: 24px 24px;
}

.bs { position: absolute; background: #8393A8; border-radius: 2px; }
.bs-kopf { top: 4%; left: 4%; right: 4%; height: 6%; display: flex; align-items: center; gap: 1rem; background: none; }
.bs-logo { width: 84px; height: 55%; background: #46505F; border-radius: 2px; }
.bs-menue { margin-left: auto; display: flex; gap: .75rem; }
.bs-menue i { display: block; width: 46px; height: 8px; background: #8393A8; border-radius: 2px; }
.bs-bild {
  top: 14%; left: 4%; width: 44%; height: 22%;
  background: linear-gradient(135deg, #7C93B4 0%, #A9BDD6 55%, #6E86A8 100%);
  transform-origin: top center;
}
.bs-h  { top: 39%; left: 4%; width: 30%; height: 3.4%; background: #566374; }
.bs-z1 { top: 44.5%; left: 4%; width: 38%; height: 1.8%; }
.bs-z2 { top: 47.8%; left: 4%; width: 28%; height: 1.8%; }

.bs-karte { top: 14%; height: 22%; width: 13%; background: #FBFCFD; border: 1px solid #9AA6B5; }
.bs-karte.k1 { left: 52%; }
.bs-karte.k2 { left: 67%; }
.bs-karte.k3 { left: 82%; }

.bs-bewertung {
  top: 56%; left: 4%; width: 22%; height: 19%;
  background: #FBFCFD; border: 1px solid #9AA6B5;
  padding: .7rem; display: flex; flex-direction: column; gap: .45rem;
}
.bs-sterne { display: flex; gap: .2rem; }
.bs-sterne i {
  display: block; width: 10px; height: 10px; background: #E8B21F;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.bs-name { width: 55%; height: 9px; background: #566374; border-radius: 2px; }
.bs-zeile { width: 100%; height: 7px; background: #8393A8; border-radius: 2px; }
.bs-zeile.kurz { width: 72%; }

.bs-kalender {
  top: 56%; left: 29%; width: 21%; height: 19%;
  background: #FBFCFD; border: 1px solid #9AA6B5;
  padding: .5rem; display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; align-content: start; transform-origin: bottom center;
}
.bs-kalender i { display: block; aspect-ratio: 1; background: #AEBACA; border-radius: 1px; }
.bs-kalender i.an { background: var(--kupfer); }

.bs-formular {
  top: 56%; left: 54%; width: 26%; height: 19%;
  background: #FBFCFD; border: 1px solid #9AA6B5;
  padding: .7rem; display: flex; flex-direction: column; gap: .5rem;
}
.bs-feld { height: 13px; background: #FFFFFF; border: 1px solid #8393A8; border-radius: 2px; }
.bs-knopf { margin-top: auto; height: 16px; width: 46%; background: var(--kupfer); border-radius: 2px; }

.bs-notdienst { left: 0; right: 0; bottom: 0; height: 4%; background: #C6D0DC; border-top: 1px solid #9AA6B5; }

.bs-haken {
  position: absolute;
  top: 5%; right: 4%; width: 26px; height: 26px; background: #FFFFFF;
  border: 2px solid var(--gruen); border-radius: 50%;
}
.bs-haken::before {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 11px; height: 5px;
  border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}

/* Alle Bausteine tragen denselben Takt; die Verzoegerung setzt die Reihenfolge. */
.buehne [class*="bs-"], .buehne .bs, .bs-sterne i, .bs-kalender i.an {
  animation-duration: 9s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}


@keyframes rein-kopf {
  0%, 6.667% { opacity: 0; transform: translate3d(0, -24px, 0); }
  12.778%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-bild {
  0%, 14.444% { opacity: 0; transform: translate3d(0, 24px, 0); }
  20.556%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-h {
  0%, 22.222% { opacity: 0; transform: translate3d(-24px, 0, 0); }
  28.333%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-z1 {
  0%, 23.889% { opacity: 0; transform: translate3d(-24px, 0, 0); }
  30.0%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-z2 {
  0%, 25.556% { opacity: 0; transform: translate3d(-24px, 0, 0); }
  31.667%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-karte1 {
  0%, 30.0% { opacity: 0; transform: translate3d(24px, 0, 0); }
  36.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-karte2 {
  0%, 31.667% { opacity: 0; transform: translate3d(24px, 0, 0); }
  37.778%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-karte3 {
  0%, 33.333% { opacity: 0; transform: translate3d(24px, 0, 0); }
  39.444%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-bewertung {
  0%, 40.0% { opacity: 0; transform: translate3d(-24px, 0, 0); }
  46.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-stern1 {
  0%, 40.0% { opacity: 0; transform: scale(.4); }
  46.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-stern2 {
  0%, 40.889% { opacity: 0; transform: scale(.4); }
  47.0%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-stern3 {
  0%, 41.778% { opacity: 0; transform: scale(.4); }
  47.889%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-stern4 {
  0%, 42.667% { opacity: 0; transform: scale(.4); }
  48.778%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-stern5 {
  0%, 43.556% { opacity: 0; transform: scale(.4); }
  49.667%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-kalender {
  0%, 50.0% { opacity: 0; transform: translate3d(0, 24px, 0) scaleY(.6); }
  56.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-tag1 {
  0%, 53.333% { opacity: 0; transform: scale(.4); }
  59.444%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-tag2 {
  0%, 54.667% { opacity: 0; transform: scale(.4); }
  60.778%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-tag3 {
  0%, 56.0% { opacity: 0; transform: scale(.4); }
  62.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-formular {
  0%, 60.0% { opacity: 0; transform: translate3d(24px, 0, 0); }
  66.111%, 100% { opacity: 1; transform: none; }
}

@keyframes rein-notdienst {
  0%, 68.889% { opacity: 0; transform: translate3d(0, 24px, 0); }
  75.0%, 100% { opacity: 1; transform: none; }
}

.bs-kopf { animation-name: rein-kopf; }

.bs-bild { animation-name: rein-bild; }

.bs-h { animation-name: rein-h; }

.bs-z1 { animation-name: rein-z1; }

.bs-z2 { animation-name: rein-z2; }

.bs-karte.k1 { animation-name: rein-karte1; }

.bs-karte.k2 { animation-name: rein-karte2; }

.bs-karte.k3 { animation-name: rein-karte3; }

.bs-bewertung { animation-name: rein-bewertung; }

.bs-sterne i:nth-child(1) { animation-name: rein-stern1; }

.bs-sterne i:nth-child(2) { animation-name: rein-stern2; }

.bs-sterne i:nth-child(3) { animation-name: rein-stern3; }

.bs-sterne i:nth-child(4) { animation-name: rein-stern4; }

.bs-sterne i:nth-child(5) { animation-name: rein-stern5; }

.bs-kalender { animation-name: rein-kalender; }

.bs-kalender i.an:nth-of-type(1) { animation-name: rein-tag1; }

.bs-kalender i.an:nth-of-type(2) { animation-name: rein-tag2; }

.bs-kalender i.an:nth-of-type(3) { animation-name: rein-tag3; }

.bs-formular { animation-name: rein-formular; }

.bs-notdienst { animation-name: rein-notdienst; }


/* Der Haken erscheint bei 6,9 s, bleibt 0,8 s und geht dann wieder. */
@keyframes haken {
  0%, 76.667% { opacity: 0; transform: scale(.4); }
  78.889%, 85.556% { opacity: 1; transform: none; }
  88.889%, 100% { opacity: 0; transform: scale(.9); }
}
.bs-haken {
  animation: haken 9s cubic-bezier(.16, 1, .3, 1) infinite both;
}

/* Bei 7,7 s dreht sich die Buehne um 1,5 Grad zurueck — das Aufatmen, wenn
   alles steht. Danach bleibt sie ruhig, bis der Zyklus neu beginnt. */
@keyframes buehne-atmen {
  0%, 85.556% { transform: rotateX(6deg) rotateY(-9deg); }
  91.667%, 100% { transform: rotateX(6deg) rotateY(-7.5deg); }
}

/* Auf schmalen Geraeten laeuft nur das Noetigste: Kopfzeile, Bildfeld,
   Bewertungskarte und Kalender. Der Rest entfaellt, damit auch schwache
   Geraete die Bildrate halten. Kein Text geht dabei verloren — die Buehne
   traegt keinen. */
@media (max-width: 767px) {
  .bs-h, .bs-z1, .bs-z2, .bs-karte, .bs-formular, .bs-notdienst, .bs-haken { display: none; }
  .bs-bewertung { top: 56%; left: 5%; width: 42%; height: 26%; }
  .bs-kalender  { top: 56%; left: 52%; width: 42%; height: 26%; }
  .buehne { opacity: .3; }
}

/* Bei reduzierter Bewegung laeuft nichts: der Endzustand steht sofort. */
@media (prefers-reduced-motion: reduce) {
  .buehne *, .buehne__fenster { animation: none !important; opacity: 1; transform: none; }
  .buehne__fenster { transform: rotateX(6deg) rotateY(-7.5deg); }
}

/* Der Verlauf hinter dem Hero-Text. */
.hero__schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(10, 12, 16, .94) 0%,
    rgba(10, 12, 16, .94) calc(100% - 34rem),
    rgba(10, 12, 16, 0) 100%);
}
@media (max-width: 899px) {
  .hero__schleier { background: rgba(10, 12, 16, .94); }
}
.hero { position: relative; overflow: hidden; }
.hero > .huelle { position: relative; z-index: 2; }

/* -----------------------------------------------------------------------------
   15  REFERENZKACHELN

   Je Referenz ein Browserrahmen wie in der Hero-Buehne, darin die Aufnahme der
   fertigen Seite. Zwei Zustaende liegen uebereinander und wechseln nur ueber
   opacity — dadurch springt beim Umschalten nichts.
   -------------------------------------------------------------------------- */

.referenz { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.referenz > .panel { flex: 1; }

.referenz__schalter { display: flex; gap: 0; }
.referenz__schalter button {
  min-height: 44px; padding: .4rem 1rem;
  font-family: var(--mono); font-size: .8rem;
  background: transparent; color: var(--leise);
  border: 1px solid var(--rahmen);
  cursor: pointer;
}
.referenz__schalter button + button { border-left: 0; }
.referenz__schalter button:hover { color: var(--text); }
.referenz__schalter button[aria-pressed="true"] {
  background: var(--kupfer); border-color: var(--kupfer);
  color: var(--grund); font-weight: 600;
}

/* Beide Zustaende belegen dieselbe Flaeche; der Kasten behaelt sein
   Seitenverhaeltnis, damit beim Wechsel nichts umbricht. */
.referenz__buehne { position: relative; aspect-ratio: 960 / 600; background: var(--feldgrund); }
.referenz__lage {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.referenz__lage.ist-an { opacity: 1; visibility: visible; transition: opacity .3s ease; }
/* Beide Lagen fuellen die Buehne gleich aus. Das Innenmass stammt aus der
   Zeit, als hier ein Platzhaltertext stand; mit dem Vorher-Screenshot wuerde
   es beim Umschalten einen sichtbaren Sprung erzeugen. */
.referenz__lage video,
.referenz__lage[data-lage="vorher"] img { width: 100%; height: 100%; object-fit: cover; display: block; }

.referenz__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem clamp(.8rem, 2vw, 1.1rem);
  border-top: 1px solid var(--rahmen);
}
.referenz__fuss b { display: block; font-family: var(--mono); font-size: .92rem; }
.referenz__fuss span { color: var(--leise); font-size: .82rem; }
.referenz__anonym { display: block; font-family: var(--mono); font-size: .78rem; color: var(--leise); }
.referenz__fuss .rundknopf { flex: none; min-height: 44px; padding: 0 .7rem; font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .referenz__lage { transition: none; }

  /* Bei reduzierter Bewegung steht das Laufband still und wird zu einem
     Scrollbereich. Der zweite Kartensatz faellt weg — er ist nur fuer die
     Schleife da und stuende sonst als Dublette in der Spur. */
  .karussell__spur { animation: none; }
  .karussell__fenster { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .karussell__spur > [aria-hidden="true"] { display: none; }
}