@charset "UTF-8";
/* ============================================================
   Auto Service Kortmann · Ossenbeck
   Entwurf Studio Siemering, August 2026
   ============================================================

   Die Gestalt kommt aus der Wortmarke, sonst gibt es nichts.
   Kein Foto vom Betrieb, keine Hausfarbe außer der einen, keine
   gedruckte Vorlage. Nur ein Logo, und das hat drei Merkmale:

   1. Es ist durchgehend nach rechts geneigt, rund 15 Grad, auch
      der Kleinsatz. Das ist keine Verzierung, das ist die
      Aussage. Ein Betrieb, der "Antrieb" heißt, steht nicht
      gerade.
   2. Es kennt eine einzige Farbfamilie: Blaugrau auf sehr
      hellem Blaugrau. Gemessen aus der hinterlegten Datei,
      nicht geschätzt: #384c5c auf #f2f4f6.
   3. Über den Buchstaben liegt ein Lichtverlauf wie über
      lackiertem Blech. Der ist hier der einzige Akzent. Eine
      zweite Farbe gibt es nicht, und sie fehlt auch nicht.

   Daraus folgt die Regel für alles Weitere: Wo etwas
   hervorstechen soll, wird es geneigt oder es bekommt Licht.
   Nie bunt.
   ============================================================ */


/* ─── Schrift ──────────────────────────────────────────────
   Saira für alles Große und alles Technische. Eine variable
   Schrift über zwei Achsen: Breite (50 bis 125) und Gewicht.
   Die Wortmarke ist breit und fett, die Angaben darunter sind
   schmal und weit gesperrt. Beides dieselbe Familie, beides
   dieselbe Handschrift.

   IBM Plex Sans für den Fließtext. Sie kommt aus der
   Industrie und hat gerade genug Wärme, um die Sätze über
   einen Menschen nicht wie ein Datenblatt aussehen zu lassen.  */

@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url('../fonts/saira-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url('../fonts/saira-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url('../fonts/saira-roman-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url('../fonts/saira-roman-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plexsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/plexsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─── Werte ────────────────────────────────────────────────── */
:root {
  /* Alle fünf Farben aus der Wortmarke. Keine sechste. */
  --grund:      #f2f4f6;   /* der Grund, auf dem das Logo steht */
  --tief:       #10171f;   /* die Werkstatt hinter dem Blech */
  --tief-2:     #18222d;   /* eine Stufe darüber, für Absätze im Dunkeln */
  --stahl:      #384c5c;   /* der Grundton der Buchstaben */
  --stahl-hell: #6f8598;   /* aufgehellt, für Nebentext */
  --kante:      #c8d3dc;   /* die Lichtkante am Buchstabenrand */

  --schrift-1: 'Saira', 'Arial Narrow', sans-serif;
  --schrift-2: 'Plex', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 15 Grad. Der Winkel der Wortmarke, nachgemessen. */
  --neigung: -15deg;

  --rand:  clamp(1.25rem, 5vw, 5.5rem);
  --breit: 82rem;

  /* Der Lichtverlauf über lackiertem Blech. Der einzige Akzent
     dieser Seite. Er läuft schräg, im Winkel der Wortmarke.

     Es gibt ihn dreimal, und das ist kein Luxus: Ein Verlauf, der
     durch die Schrift hindurch sichtbar wird, muss über seine
     ganze Länge lesbar bleiben. Auf hellem Grund heißt das: nie
     heller als Mittelgrau. Auf dunklem: nie dunkler. Ein einziger
     Verlauf für beides hat in der ersten Fassung das Wort
     "beauftragter" verschwinden lassen. */
  --lack: linear-gradient(105deg,
            #2b3f51  0%, #43596b 16%, #7e97a8 30%,
            #dce6ee 40%, #f4f8fb 45%, #cad8e2 51%,
            #6e8698 62%, #3d5365 78%, #22323f 100%);

  /* Auf hellem Grund: der dunkle Teil des Blechs. */
  --lack-dunkel: linear-gradient(105deg,
            #2b3f51  0%, #35485a 14%, #4a6274 34%,
            #7b93a5 47%, #4e6678 62%, #33475a 82%, #2a3d4e 100%);

  /* Auf dunklem Grund: der helle Teil. */
  --lack-hell: linear-gradient(105deg,
            #93a9b9  0%, #b6c6d2 16%, #dde7ef 34%,
            #f6f9fc 46%, #cdd9e3 60%, #9fb3c2 78%, #8399a9 100%);

  /* Das Wort im Kopfbereich steht auf fast Schwarz und braucht
     deshalb einen eigenen, aufgehellten Verlauf: der dunkelste
     Ton der Wortmarke läge dort zu nah am Grund.

     Beide Enden liegen bewusst über dem Grund. Der letzte
     Buchstabe fällt sonst in eine der Lichtbahnen dahinter und
     ist kaum noch zu lesen. */
  --lack-wort: linear-gradient(105deg,
            #4b6076  0%, #56708a 14%, #7f9aad 27%,
            #bccedb 37%, #eef4f9 45%, #b6c9d7 53%,
            #7d96a9 66%, #556d82 84%, #4a6076 100%);
}


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

html {
  scroll-behavior: smooth;
  /* Die Kopfzeile klebt oben. Sprungziele dürfen nicht darunter
     verschwinden. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tief);
  font-family: var(--schrift-2);
  font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.19rem);
  line-height: 1.62;
  font-weight: 400;
  /* Nicht overflow-x: hidden am body. Das macht den Body zum
     Scroll-Container und stellt jede scroll-getriebene
     Animation still. Stattdessen unten pro Abschnitt. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--stahl);
  outline-offset: 3px;
  border-radius: 2px;
}
.stimmen :focus-visible,
.kommen :focus-visible,
.kopf :focus-visible,
.fuss :focus-visible { outline-color: var(--kante); }

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

.sprung {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--tief); color: var(--grund);
  padding: 0.6rem 1.1rem; text-decoration: none;
  font-family: var(--schrift-1); font-weight: 600;
  font-stretch: 85%; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.8rem;
  transition: top 0.16s ease;
}
.sprung:focus { top: 0.5rem; }


/* ─── Wiederkehrende Bausteine ─────────────────────────────── */

/* Die Marke über einem Abschnitt: ein geneigter Strich und ein
   Wort. Der Strich hat den Winkel der Wortmarke, weil er sonst
   nur ein Strich wäre. */
.marke {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1.1rem;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 78%;
  font-size: 0.78rem; letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--stahl);
}
.marke::before {
  content: ''; flex: 0 0 auto;
  width: 1.7rem; height: 0.45rem;
  background: var(--stahl);
  transform: skewX(var(--neigung));
}
.marke--hell { color: var(--kante); }
.marke--hell::before { background: var(--kante); }

/* Abschnittsüberschrift. Das kursive Wort darin ist nicht
   Betonung, sondern Anschluss an die Wortmarke: Was wichtig
   ist, neigt sich. */
.titel {
  font-family: var(--schrift-1);
  font-weight: 750; font-stretch: 108%;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9rem);
  line-height: 0.99;
  letter-spacing: -0.018em;
  margin: 0 0 1.4rem;
  color: var(--tief);
  /* Kein text-wrap: balance hier. Die Überschriften tragen ein
     eigenes <br>, und balance bricht dann ein zweites Mal um. */
}
.titel em {
  font-style: italic;
  font-stretch: 116%;
  font-weight: 800;
  background: var(--lack-dunkel);
  background-size: 190% 100%;
  background-position: 34% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Ohne das bekäme ein über zwei Zeilen laufendes Wort den
     Verlauf einmal über beide Zeilen gespannt, und die zweite
     stünde deutlich heller da als die erste. Mit clone fängt
     jede Zeile den Verlauf von vorn an. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.titel--hell { color: var(--grund); }
.titel--hell em { background-image: var(--lack-hell); }

.klein {
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 78%;
  font-size: 0.76rem; letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--stahl-hell);
  margin: 0 0 0.85rem;
}

/* Der Knopf. Zweizeilig, weil die Nummer die eigentliche
   Handlung ist und das Wort nur sagt, warum. */
.knopf {
  display: inline-grid; gap: 0.1rem;
  padding: 0.85rem 1.6rem 0.95rem;
  background: var(--tief);
  color: var(--grund);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), background-color 0.22s ease;
}
/* Das Licht, das beim Zeigen über den Knopf läuft. Es liegt
   hinter der Schrift, deshalb ein eigenes Element statt eines
   Hintergrunds. */
.knopf::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 34%,
              rgba(200, 211, 220, 0.22) 46%, transparent 58%);
  background-size: 280% 100%;
  background-position: 130% 0;
  transition: background-position 0.55s ease;
}
.knopf:hover, .knopf:focus-visible { transform: translateX(4px); }
.knopf:hover::after, .knopf:focus-visible::after { background-position: -40% 0; }
.knopf__vor {
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 78%;
  font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--kante);
}
.knopf__nr {
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 700; font-stretch: 106%;
  font-size: 1.28rem; letter-spacing: 0.01em;
  line-height: 1.1;
}
.knopf--gross { padding: 1.05rem 2rem 1.15rem; }
.knopf--gross .knopf__nr { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }

.verweis {
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 88%;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.18s ease;
}
.verweis:hover { opacity: 0.62; }


/* ─── Hinweisband ──────────────────────────────────────────
   M1. Betriebsurlaub, kurzfristige Änderungen. Das Feld, das der
   Betrieb am häufigsten benutzt.

   Der Kopf dieser Seite ist position: sticky. Das Band steht
   deshalb davor im normalen Fluss und scrollt mit weg; der Kopf
   klebt danach an der Oberkante. Bei einem fixed-Kopf läge es
   unsichtbar dahinter und müsste hinein.

   Farbe: das Blaugrau der Wortmarke. Ein Warnton wäre die
   sechste Farbe dieser Seite, und ein Betriebsurlaub ist keine
   Warnung. */
.hinweisband {
  margin: 0;
  background: var(--stahl);
  color: var(--grund);
  position: relative;
  z-index: 60;
}
.hinweisband p {
  margin: 0 auto;
  max-width: 62rem;
  padding: 0.7rem var(--rand) 0.75rem;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  /* Bricht die Zeile gleichmäßig, statt drei Wörter allein in die
     zweite zu setzen. Kein <br> dazu: balance bricht sonst ein
     zweites Mal um. */
  text-wrap: balance;
}


/* ─── Kopfzeile ────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.85rem var(--rand);
  background: rgba(16, 23, 31, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(200, 211, 220, 0.13);
  transition: padding 0.3s ease;
}
.kopf--eng { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.kopf__marke { flex: 0 0 auto; line-height: 0; }
.kopf__logo {
  width: auto; height: clamp(2.1rem, 3.6vw, 3.1rem);
  transition: height 0.3s ease;
}
.kopf--eng .kopf__logo { height: clamp(1.8rem, 3vw, 2.5rem); }

.kopf__weg {
  display: flex; gap: clamp(0.9rem, 2vw, 2rem);
  margin-left: auto;
}
.kopf__weg a {
  font-family: var(--schrift-1);
  font-weight: 500; font-stretch: 82%;
  font-size: 0.79rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--kante);
  text-decoration: none;
  padding-bottom: 3px;
  position: relative;
}
/* Der Unterstrich wächst aus der Neigung heraus. */
.kopf__weg a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--kante);
  transform: skewX(var(--neigung)) scaleX(0);
  transform-origin: left;
  transition: transform 0.26s cubic-bezier(.2,.7,.3,1);
}
.kopf__weg a:hover::after, .kopf__weg a:focus-visible::after {
  transform: skewX(var(--neigung)) scaleX(1);
}

.kopf__ruf {
  flex: 0 0 auto;
  display: grid; gap: 0;
  text-decoration: none;
  padding: 0.35rem 0.9rem 0.4rem;
  border: 1px solid rgba(200, 211, 220, 0.3);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.kopf__ruf:hover, .kopf__ruf:focus-visible {
  background: rgba(200, 211, 220, 0.1);
  border-color: var(--kante);
}
.kopf__ruf-wort {
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 76%;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stahl-hell);
  line-height: 1.3;
}
.kopf__ruf-nr {
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 700; font-stretch: 100%;
  font-size: 0.98rem; color: var(--grund); line-height: 1.15;
  white-space: nowrap;
}


/* ═══ 1 · Kopfbereich ══════════════════════════════════════ */
.oben {
  position: relative;
  background: var(--tief);
  color: var(--grund);
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(2.5rem, 6vh, 4rem);
  min-height: min(86svh, 48rem);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 6vh, 4.5rem);
  isolation: isolate;
  /* clip statt hidden: hidden würde diesen Abschnitt zum
     Scroll-Container machen und die Streifenbewegung einfrieren. */
  overflow: clip;
}

/* Drei geneigte Lichtbahnen im Grund. Sie sind der Verlauf der
   Wortmarke, auf Raumgröße gebracht: Licht, das schräg über
   Blech streicht. */
.oben__grund { position: absolute; inset: -20% -10%; z-index: -1; }
.oben__streifen {
  position: absolute; top: -30%; height: 160%;
  transform: skewX(var(--neigung));
  filter: blur(30px);
  opacity: 0;
  animation: streifen-an 1.6s 0.35s cubic-bezier(.2,.7,.3,1) forwards;
}
.oben__streifen--1 {
  left: 6%; width: 22%;
  background: linear-gradient(180deg, transparent, rgba(111, 133, 152, 0.42), transparent);
}
.oben__streifen--2 {
  left: 41%; width: 9%;
  background: linear-gradient(180deg, transparent, rgba(200, 211, 220, 0.3), transparent);
  animation-delay: 0.5s;
}
.oben__streifen--3 {
  left: 72%; width: 26%;
  background: linear-gradient(180deg, transparent, rgba(56, 76, 92, 0.55), transparent);
  animation-delay: 0.65s;
}
@keyframes streifen-an { to { opacity: 1; } }

.oben__satz { padding: 0 var(--rand); }

.oben__vor {
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 600; font-stretch: 92%;
  font-size: clamp(0.9rem, 0.72rem + 0.85vw, 1.5rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stahl-hell);
  margin: 0 0 0.2em;
  /* Sitzt eingerückt, wie im Logo die Zeile über ANTRIEB. */
  padding-left: 0.4em;
  opacity: 0;
  animation: auf 0.8s 0.15s cubic-bezier(.2,.7,.3,1) forwards;
}

/* Das Wort. Es füllt die Zeile bis an beide Ränder, weil es
   die Seite ist und nicht auf ihr steht. */
.oben__wort {
  margin: 0;
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 800;
  font-stretch: 118%;
  /* Ausgangsgröße. Bewusst eher zu klein: Das Skript misst nach
     und setzt sie auf die genaue Zeilenbreite. Ohne Skript soll
     das Wort lieber Luft lassen als über den Rand laufen. */
  font-size: clamp(3rem, 18vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  white-space: nowrap;
}
.oben__wort-text {
  display: inline-block;
  background: var(--lack-wort);
  /* Je weiter der Verlauf gestreckt ist, desto sanfter läuft er
     über das Wort. Bei 240 Prozent blieb vom Glanz über diese
     Breite kaum etwas übrig. */
  background-size: 175% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Einfahrt plus ein Lichtreflex, der einmal darüber läuft.
     Beides in einer Bewegung, nicht nacheinander. */
  animation: wort-ein 1.35s cubic-bezier(.16,.85,.25,1) both,
             wort-licht 2.4s 0.5s cubic-bezier(.4,0,.2,1) both;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes wort-ein {
  from { transform: translateX(-9%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
/* Das Licht wandert einmal von rechts über das Wort und bleibt
   links der Mitte stehen, wo das Auge zu lesen anfängt. */
@keyframes wort-licht {
  from { background-position: 100% 0; }
  to   { background-position: 42% 0; }
}

.oben__unten {
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vh, 2.6rem);
  align-items: end;
}

.oben__erklaerung {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 0.94rem + 0.5vw, 1.34rem);
  line-height: 1.44;
  color: var(--kante);
  opacity: 0;
  animation: auf 0.9s 0.85s cubic-bezier(.2,.7,.3,1) forwards;
}

.oben__tafel {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: clamp(1.2rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  animation: auf 0.9s 1.05s cubic-bezier(.2,.7,.3,1) forwards;
}
.oben__wer {
  margin: 0;
  font-size: 0.95rem; line-height: 1.5;
  color: var(--stahl-hell);
}
.oben__wer strong {
  display: block;
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 700; font-stretch: 104%;
  font-size: 1.22rem; letter-spacing: 0.005em;
  color: var(--grund);
  margin-bottom: 0.2rem;
}
.oben .knopf { background: var(--grund); color: var(--tief); }
.oben .knopf__vor { color: var(--stahl); }
.oben .knopf::after {
  background: linear-gradient(105deg, transparent 34%,
              rgba(16, 23, 31, 0.14) 46%, transparent 58%);
  background-size: 280% 100%; background-position: 130% 0;
}

/* Die Statuszeile schreibt das Skript. Ohne Skript steht dort
   nichts, statt etwas Falschem. */
.oben__status {
  margin: 0;
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 80%;
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stahl-hell);
}
.oben__status::before {
  content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--stahl-hell);
}
.oben__status[data-offen="ja"] { color: var(--kante); }
.oben__status[data-offen="ja"]::before {
  background: var(--kante);
  box-shadow: 0 0 0 0 rgba(200, 211, 220, 0.6);
  animation: puls 2.6s ease-out infinite;
}
@keyframes puls {
  70%  { box-shadow: 0 0 0 0.7rem rgba(200, 211, 220, 0); }
  100% { box-shadow: 0 0 0 0    rgba(200, 211, 220, 0); }
}

.oben__hinab {
  position: absolute; right: var(--rand); bottom: 1.4rem;
  margin: 0;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 76%;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stahl);
  display: flex; align-items: center; gap: 0.7rem;
}
.oben__hinab::after {
  content: ''; width: 2.6rem; height: 2px; background: var(--stahl);
  transform: skewX(var(--neigung));
  animation: schieben 2.4s ease-in-out infinite;
}
@keyframes schieben {
  0%, 100% { transform: skewX(var(--neigung)) translateX(0); opacity: 0.5; }
  50%      { transform: skewX(var(--neigung)) translateX(0.6rem); opacity: 1; }
}

@keyframes auf {
  from { opacity: 0; transform: translateY(0.9rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Die Fahrt am Scrollrad ───────────────────────────────
   Das Wort bleibt beim Scrollen nicht stehen, es fährt weiter
   nach links aus dem Bild. Die Hintergrundbahnen ziehen dabei
   in die Gegenrichtung, weil sie weiter hinten liegen.

   Zwei Dinge machen das haltbar:

   · Die Bewegung sitzt auf .oben__wort, die Einfahrt beim Laden
     auf .oben__wort-text. Beide brauchen ein transform, und zwei
     transform-Regeln auf demselben Element löschen einander aus.
   · scroll(root) statt view(): Das rechnet gegen die Scrollhöhe
     des Dokuments und nicht gegen die Lage des Elements. Damit
     beginnt die Fahrt zuverlässig beim ersten Rad, statt vom
     Zufall abzuhängen, wie weit das Wort beim Laden schon im
     Bild stand.

   .oben hat overflow: clip, nicht hidden. Hidden machte den
   Abschnitt zum Scroll-Container, und dann stünde diese
   Zeitachse still. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .oben__wort {
      animation: wort-fahren linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 88vh;
    }
    .oben__streifen {
      animation: streifen-an 1.6s 0.35s cubic-bezier(.2,.7,.3,1) forwards,
                 streifen-ziehen linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 88vh;
    }
    /* Die Verzögerungen der beiden hinteren Bahnen gelten nur
       für die Einblendung. Ohne diese zweite Angabe erbte die
       Scroll-Bewegung sie mit, und eine Zeitverzögerung auf einer
       Scroll-Zeitachse ergibt keinen Sinn. */
    .oben__streifen--2 { animation-delay: 0.5s, 0s; }
    .oben__streifen--3 { animation-delay: 0.65s, 0s; }
  }
}
@keyframes wort-fahren {
  to { transform: translateX(-9%); }
}
@keyframes streifen-ziehen {
  to { transform: skewX(var(--neigung)) translateX(4.5%); }
}


/* ═══ 2 · Die zwei Hälften ═════════════════════════════════
   Kein Kasten neben Kasten: die Trennung ist eine geneigte
   Fuge, und die beiden Seiten sitzen unterschiedlich hoch. */
.haelften {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
  padding: clamp(3.5rem, 8vh, 6rem) var(--rand) clamp(2rem, 5vh, 3.5rem);
  max-width: var(--breit);
  margin-inline: auto;
}

.haelfte { padding-block: 0; }
.haelfte--a { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.haelfte--b {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  /* Versatz: die zweite Hälfte sitzt tiefer. Zwei gleich hohe
     Spalten wären zwei Kästen. */
  padding-top: clamp(2rem, 7vh, 5.5rem);
}

.haelften__scheide {
  width: 2px;
  align-self: stretch;
  background: linear-gradient(180deg,
              transparent, var(--stahl) 18%, var(--stahl) 82%, transparent);
  transform: skewX(var(--neigung));
  opacity: 0.42;
}

.haelfte__titel {
  font-family: var(--schrift-1);
  font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}
.haelfte__titel em {
  font-style: italic;
  font-weight: 800; font-stretch: 112%;
  color: var(--stahl);
}
.haelfte__text { margin: 0 0 1.1rem; max-width: 38ch; }
.haelfte__zusatz {
  margin: 0;
  max-width: 34ch;
  font-size: 0.94rem;
  color: var(--stahl);
  padding-left: 1.1rem;
  border-left: 3px solid var(--stahl);
  border-image: linear-gradient(180deg, var(--stahl), transparent) 1;
}


/* ═══ 3 · Leistungen ═══════════════════════════════════════ */
.leistungen {
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--rand) clamp(3rem, 7vh, 5rem);
  max-width: var(--breit);
  margin-inline: auto;
}
.leistungen__kopf { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.leistungen__vor { margin: 0; color: var(--stahl); max-width: 48ch; }

/* Feste Spaltenzahl statt auto-fit. Die Liste hat zwölf Felder
   (drei doppelt breite und sechs einfache), und zwölf geht durch
   4, 2 und 1 ohne Rest auf. Mit auto-fit stünde bei fünf Spalten
   eine Lücke, und die sähe wie ein Fehler aus. */
.liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(56, 76, 92, 0.22);
}
.liste__punkt {
  background: var(--grund);
  padding: 1.5rem clamp(1rem, 2vw, 1.6rem) 1.7rem;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  /* Die Trennlinien sitzen an den Feldern, nicht als Fläche
     hinter dem Raster: sonst bliebe eine unbelegte Zelle als
     grauer Block stehen. */
  box-shadow: inset -1px -1px 0 0 rgba(56, 76, 92, 0.22);
  transition: background-color 0.24s ease;
}
/* Der geneigte Lichtstreifen fährt beim Zeigen durch das Feld. */
.liste__punkt::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(56, 76, 92, 0.08) 48%, transparent 58%);
  background-size: 300% 100%;
  background-position: 130% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.liste__punkt:hover { background: #eaeef2; }
.liste__punkt:hover::before { background-position: -50% 0; }

.liste__punkt--gross { grid-column: span 2; }
.liste__punkt--gross .liste__name { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); }

.liste__nr {
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 700; font-stretch: 96%;
  font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--stahl-hell);
}
.liste__name {
  font-family: var(--schrift-1);
  font-weight: 650; font-stretch: 100%;
  font-size: 1.16rem; line-height: 1.15;
  letter-spacing: -0.006em;
  margin: 0;
}
.liste__was {
  margin: 0;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--stahl);
  max-width: 30ch;
}

.leistungen__rand {
  margin: 1.6rem 0 0;
  font-family: var(--schrift-1);
  font-weight: 500; font-stretch: 84%;
  font-size: 0.84rem; letter-spacing: 0.05em;
  color: var(--stahl-hell);
}


/* ═══ 4 · Der Bewertungsspiegel ════════════════════════════
   Der eine Ort, an dem diese Seite laut wird. Fünf Zeilen,
   eine füllt sich, vier bleiben leer. Man wartet auf sie. */
/* Die geneigte Oberkante. Sie steckt im clip-path des Abschnitts
   selbst, nicht in einem überstehenden Hilfselement: das wäre vom
   overflow: clip dieses Abschnitts abgeschnitten worden und war in
   der ersten Fassung unsichtbar.

   Flacher als die 15 Grad der Wortmarke, und das mit Absicht: über
   volle Seitenbreite fräße dieser Winkel gut vierhundert Pixel
   Höhe. Die Richtung stimmt, das Maß ist auf die Breite gerechnet. */
.stimmen {
  background: var(--tief);
  color: var(--grund);
  padding: calc(clamp(3.5rem, 9vh, 6.5rem) + 2.5rem) var(--rand) clamp(3.5rem, 9vh, 6rem);
  margin-top: -2.5rem;
  position: relative;
  overflow: clip;
  clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}

.stimmen__kopf {
  position: relative;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.spiegel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2rem, 5vh, 3.2rem);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
  border-bottom: 1px solid rgba(200, 211, 220, 0.16);
}

.spiegel__zahl { text-align: left; }
.spiegel__note {
  margin: 0;
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 800; font-stretch: 116%;
  font-size: clamp(4.5rem, 3rem + 8vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
  background: var(--lack-hell);
  background-size: 200% 100%;
  background-position: 42% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.spiegel__von {
  margin: 0.3rem 0 0;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 76%;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stahl-hell);
}
.spiegel__anzahl {
  margin: 0.9rem 0 0;
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 600; font-stretch: 96%;
  font-size: 1.05rem;
  color: var(--kante);
  font-variant-numeric: tabular-nums;
}

.spiegel__balken { display: grid; gap: clamp(0.4rem, 1.2vh, 0.75rem); }

.reihe {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: 0.9rem;
}
.reihe__stern {
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 82%;
  font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--stahl-hell);
  white-space: nowrap;
}
.reihe__zeichen { font-size: 0.72em; }
/* Das leere Gleis ist eine Linie, kein Kasten. In der ersten
   Fassung war es ein dunkelgrauer Block, und vier davon sahen aus
   wie vier Balken mit einem Wert. Genau das Gegenteil der Aussage. */
.reihe__gleis {
  height: clamp(0.75rem, 1.8vh, 1.15rem);
  background: transparent;
  border-bottom: 1px solid rgba(200, 211, 220, 0.16);
  transform: skewX(var(--neigung));
  display: block;
  overflow: hidden;
}
.reihe__fuellung {
  display: block; height: 100%; width: 0;
  background: var(--lack-hell);
  background-size: 260% 100%;
  background-position: 100% 0;
  transition: width 1.15s cubic-bezier(.16,.85,.25,1),
              background-position 1.6s ease;
}
/* Das Licht wandert nach: Es läuft dem Balken hinterher und
   bleibt an seiner Spitze stehen. */
.reihe--sichtbar .reihe__fuellung { background-position: 34% 0; }
.reihe__wert {
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 700; font-stretch: 96%;
  font-size: 0.95rem;
  color: var(--stahl-hell);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reihe--voll .reihe__stern,
.reihe--voll .reihe__wert { color: var(--grund); }

/* Die Zitate. Unterschiedlich lang, deshalb kein gleichmäßiges
   Raster: sie füllen die Spalten so, wie sie kommen. */
.zitate {
  list-style: none; margin: 0; padding: 0;
  columns: 3 17rem;
  column-gap: clamp(1.5rem, 3vw, 2.6rem);
}
.zitat {
  break-inside: avoid;
  margin-bottom: clamp(1.5rem, 3vh, 2.4rem);
  padding-left: 1.15rem;
  position: relative;
}
.zitat::before {
  content: ''; position: absolute; left: 0; top: 0.45rem; bottom: 1.3rem;
  width: 3px; background: var(--stahl);
  transform: skewX(var(--neigung));
}
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  margin: 0;
  font-size: 0.99rem; line-height: 1.53;
  color: var(--kante);
}
.zitat--lang blockquote p { font-size: 0.95rem; }
.zitat__wer {
  margin: 0.55rem 0 0;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 78%;
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--stahl-hell);
}

.stimmen__fuss {
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  font-size: 0.83rem;
  color: var(--stahl-hell);
  max-width: 52ch;
}


/* ═══ 5 · Der Betrieb ══════════════════════════════════════
   Schließt farblich an den Bewertungsspiegel an: Die Rezensionen
   loben durchgehend eine Person, direkt danach ist der Platz für
   ihr Gesicht. Ein Farbwechsel dazwischen würde den Zusammenhang
   zerschneiden.

   Der Abschnitt hat KEINE eigene geneigte Oberkante. Zwei
   geneigte Kanten unmittelbar hintereinander sähen nach Muster
   aus statt nach Absicht. */
.halle {
  background: var(--tief);
  color: var(--grund);
  padding: 0 var(--rand) clamp(3.5rem, 9vh, 6rem);
  overflow: clip;
}
.halle__kopf {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
  padding-top: clamp(1rem, 3vh, 2rem);
  border-top: 1px solid rgba(200, 211, 220, 0.16);
}

/* Drei Plätze, unterschiedlich hoch und gegeneinander versetzt.
   Drei gleich große Kacheln nebeneinander wären genau der
   Baukasten, den diese Seite nicht sein soll. */
.halle__bilder {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 1.1fr;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
}
.halle__platz { position: relative; margin: 0; }
.halle__platz--quer  { aspect-ratio: 4 / 3; }
.halle__platz--hoch  { aspect-ratio: 4 / 5; margin-top: clamp(1.5rem, 5vh, 4rem); }
.halle__platz:last-child { margin-top: clamp(3rem, 9vh, 7rem); }

.halle__platz img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Falls ein Projekt spaeter bewusst ohne Standardmotiv ausgeliefert
   wird, bleibt dieser ehrliche Leerzustand erhalten. Bei Kortmann greifen
   im Entwurf zunaechst die Visualisierungen aus der Platzdefinition. */
.halle__leer {
  margin: 0;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px dashed rgba(200, 211, 220, 0.28);
  background: rgba(200, 211, 220, 0.035);
  font-family: var(--schrift-1);
  font-weight: 500; font-stretch: 84%;
  font-size: 0.88rem; letter-spacing: 0.04em;
  color: var(--stahl-hell);
}
.halle__leer span {
  font-style: italic;
  font-weight: 700; font-stretch: 104%;
  font-size: 1.05rem; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kante);
}

.halle__wort {
  margin: 0.7rem 0 0;
  font-family: var(--schrift-1);
  font-weight: 600; font-stretch: 78%;
  font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--stahl-hell);
  display: flex; align-items: center; gap: 0.6rem;
}
.halle__wort::before {
  content: ''; flex: 0 0 auto;
  width: 1.1rem; height: 0.32rem;
  background: var(--stahl);
  transform: skewX(var(--neigung));
}

/* Solange hier erzeugte Bilder stehen, muss das lesbar sein. Nicht
   klein und grau in der Ecke: Der Satz nimmt sich denselben Rand wie
   die Bilder und steht in ihrer Flucht. */
.halle__hinweis {
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  max-width: 58ch;
  padding-left: 1.15rem;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--stahl-hell);
}
.halle__hinweis::before {
  content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.3rem;
  width: 3px; background: var(--stahl);
  transform: skewX(var(--neigung));
}


/* ═══ 6 · Fuhrpark ═════════════════════════════════════════ */
.fuhrpark {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 7vh, 5.5rem) var(--rand);
  max-width: var(--breit);
  margin-inline: auto;
}
.fuhrpark__text p { margin: 0 0 1rem; max-width: 44ch; }
.fuhrpark__ruf { margin-top: 1.8rem; }

.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.karte {
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  border-left: 4px solid var(--stahl);
  position: relative;
  transition: transform 0.24s cubic-bezier(.2,.7,.3,1);
}
.karte:hover { transform: translateX(6px); }
.karte h3 {
  margin: 0 0 0.4rem;
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 700; font-stretch: 100%;
  font-size: 1.12rem;
  letter-spacing: 0.005em;
}
.karte p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--stahl); }


/* ═══ 6 · Kommen ═══════════════════════════════════════════ */
/* Dieselbe Kante, andere Richtung: die Seite schneidet nicht
   zweimal gleich. */
.kommen {
  background: var(--tief);
  color: var(--grund);
  padding: calc(clamp(3.5rem, 9vh, 6rem) + 2.5rem) var(--rand) clamp(3rem, 7vh, 4.5rem);
  margin-top: -2.5rem;
  position: relative;
  overflow: clip;
  clip-path: polygon(0 0, 100% 2.5rem, 100% 100%, 0 100%);
}
.kommen__kopf {
  position: relative;
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 5vh, 3.5rem);
}

.kommen__gitter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.kommen__block .klein { color: var(--stahl-hell); }
.kommen__adresse { margin: 0 0 1.1rem; line-height: 1.55; }
.kommen__weg { margin: 0; }

.kommen__daten { margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.kommen__tel {
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 700; font-stretch: 106%;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: 0.005em;
  text-decoration: none;
  background: var(--lack-hell);
  background-size: 200% 100%; background-position: 30% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  transition: background-position 0.6s ease;
  width: fit-content;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kommen__tel:hover { background-position: 72% 0; }
.kommen__mail {
  font-size: 0.95rem;
  color: var(--kante);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 211, 220, 0.4);
  width: fit-content;
}
.kommen__mail:hover { border-bottom-color: var(--kante); }
.kommen__hinweis { margin: 0; font-size: 0.9rem; color: var(--stahl-hell); max-width: 32ch; }

.zeiten { border-collapse: collapse; width: 100%; max-width: 20rem; }
.zeiten th, .zeiten td {
  padding: 0.32rem 0;
  text-align: left;
  font-size: 0.93rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(200, 211, 220, 0.11);
}
.zeiten th { color: var(--stahl-hell); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten--zu th, .zeiten--zu td { color: var(--stahl); }
/* Der heutige Tag wird vom Skript markiert. */
.zeiten .heute th, .zeiten .heute td { color: var(--grund); font-weight: 500; }
.zeiten .heute th { position: relative; padding-left: 0.85rem; }
.zeiten .heute th::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 0.42rem; height: 0.42rem; background: var(--kante);
  transform: skewX(var(--neigung));
}

.lageplan { position: relative; }
.lageplan__bild {
  position: relative;
  border: 1px solid rgba(200, 211, 220, 0.16);
  overflow: hidden;
}
.lageplan img { width: 100%; }

/* Die Markierung sitzt dort, wo Google den Betrieb führt:
   waagerecht in der Mitte, senkrecht bei 53,7 Prozent. Beide
   Werte sind beim Bau der Karte ausgerechnet worden, nicht
   geschoben. Wird der Ausschnitt neu erzeugt, gehören sie mit
   geändert. */
.lageplan__punkt {
  position: absolute;
  left: 50%; top: 53.7%;
  width: 0; height: 0;
}
.lageplan__ring {
  position: absolute; left: -0.55rem; top: -0.55rem;
  width: 1.1rem; height: 1.1rem;
  background: var(--grund);
  transform: skewX(var(--neigung));
  box-shadow: 0 0 0 0 rgba(242, 244, 246, 0.55);
  animation: ring 3s ease-out infinite;
}
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(242, 244, 246, 0.5); }
  70%  { box-shadow: 0 0 0 1.6rem rgba(242, 244, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 244, 246, 0); }
}
.lageplan__schild {
  position: absolute; left: 1.1rem; top: -0.85rem;
  white-space: nowrap;
  background: var(--grund); color: var(--tief);
  padding: 0.25rem 0.7rem 0.3rem;
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 700; font-stretch: 92%;
  font-size: 0.78rem; letter-spacing: 0.04em;
}
.lageplan__quelle {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--stahl);
}

/* Das Schild an der Einfahrt. Erscheint erst, wenn ein Bild
   dafür da ist: An der Gewerbering 5 sitzen mehrere Betriebe,
   und ein leerer Platz an dieser Stelle hülfe niemandem. */
.lageplan__schilderbild {
  /* figure bringt vierzig Punkte Rand mit, die hier nichts
     verloren haben. */
  margin: clamp(1rem, 3vh, 1.8rem) 0 0;
  max-width: 26rem;
}
.lageplan__schilderbild img {
  width: 100%;
  border: 1px solid rgba(200, 211, 220, 0.16);
}
.lageplan__schilderbild figcaption {
  margin-top: 0.5rem;
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 600; font-stretch: 90%;
  font-size: 0.85rem;
  color: var(--stahl-hell);
}

/* Eine Lücke im dunklen Abschnitt. Die helle Fassung steht bei
   den Rechtstexten. */
.kommen .luecke {
  background: rgba(200, 211, 220, 0.06);
  border-left-color: var(--stahl-hell);
  color: var(--kante);
}


/* ─── Fuß ──────────────────────────────────────────────────── */
.fuss {
  background: var(--tief-2);
  color: var(--stahl-hell);
  padding: clamp(2.5rem, 6vh, 4rem) var(--rand);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: start;
  border-top: 1px solid rgba(200, 211, 220, 0.1);
}
.fuss__marke img { height: 1.7rem; width: auto; opacity: 0.85; }
.fuss__marke p {
  margin: 0.55rem 0 0;
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 600; font-stretch: 88%;
  font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stahl);
}
.fuss__weg { display: flex; gap: 1.5rem; justify-self: end; }
.fuss__weg a {
  font-family: var(--schrift-1);
  font-weight: 500; font-stretch: 84%;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kante); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fuss__weg a:hover { border-bottom-color: var(--kante); }
.fuss__entwurf {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.8rem; line-height: 1.55;
  max-width: 62ch;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200, 211, 220, 0.1);
}
.fuss__entwurf strong { color: var(--kante); font-weight: 600; }


/* ─── Rechtstexte ──────────────────────────────────────────
   Zwei Seiten ohne Bewegung und ohne Gestaltungsanspruch. Sie
   sollen gelesen werden können, sonst nichts. */
.entwurfsband {
  margin: 0;
  background: var(--stahl);
  color: var(--grund);
  padding: 0.65rem var(--rand) 0.7rem;
  font-size: 0.86rem;
  line-height: 1.45;
}
.entwurfsband strong {
  font-family: var(--schrift-1);
  font-style: italic; font-weight: 700; font-stretch: 96%;
  letter-spacing: 0.02em;
}

.recht {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--rand) clamp(3rem, 8vh, 5rem);
}
.recht h1 {
  font-family: var(--schrift-1);
  font-style: italic;
  font-weight: 800; font-stretch: 114%;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  color: var(--stahl);
}
.recht h2 {
  font-family: var(--schrift-1);
  font-weight: 650; font-stretch: 96%;
  font-size: 1.16rem;
  letter-spacing: -0.004em;
  margin: 2.2rem 0 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(56, 76, 92, 0.2);
}
.recht p, .recht address {
  margin: 0 0 0.9rem;
  font-size: 0.97rem;
  line-height: 1.62;
  font-style: normal;
}
.recht__vor { font-size: 1.08rem; color: var(--stahl); }
.recht a { color: var(--stahl); }

/* Was noch geklärt werden muss, steht sichtbar da statt
   erfunden. */
.luecke {
  display: block;
  background: rgba(56, 76, 92, 0.08);
  border-left: 4px solid var(--stahl);
  padding: 0.85rem 1.1rem 0.9rem;
  color: var(--stahl);
  font-size: 0.92rem;
}
.luecke strong { color: var(--tief); }
.recht p.luecke + p.luecke { margin-top: -0.4rem; }


/* ─── Luft um Schrift mit Verlauf ──────────────────────────
   Steht am Ende, weil es die margin-Angaben der einzelnen
   Regeln überschreiben muss.

   Wo ein Verlauf durch die Buchstaben sichtbar wird, malt der
   Browser ihn nur **innerhalb der Elementbox**. Eine kursive
   Glyphe ragt aber über ihre Vorschubbreite hinaus: unten links
   beim A, oben rechts beim B und bei der 0. Dieser Überstand
   bekommt keine Farbe und bleibt durchsichtig, und das sieht
   aus wie ein sauber abgeschnittener Buchstabe.

   Das Polster vergrößert die Malfläche, das gleich große
   negative Maß nimmt es dem Layout wieder weg. Beide in em,
   damit sie mit jeder Schriftgröße mitgehen.

   Wer die Werte ändert, muss `wortPassen()` in main.js
   mitnehmen: Das Skript zieht dieses Polster von der gemessenen
   Breite wieder ab. */
.oben__wort-text,
.spiegel__note,
.kommen__tel,
.titel em {
  padding: 0.08em 0.16em;
  margin: -0.08em -0.16em;
}

/* Der Überstand ist nicht auf beiden Seiten gleich: Der schräge
   Fuß des A greift weiter nach links, als die Oberkante des B
   nach rechts greift. Gleich viel Polster auf beiden Seiten ließe
   deshalb rechts eine Lücke zum Rand, die wie ein Fehler aussieht.
   Nachgemessen im Standbild bei 500 und bei 1440 Punkten. */
.oben__wort-text {
  padding-right: 0.09em;
  margin-right: -0.09em;
}


/* ─── Einblenden beim Scrollen ─────────────────────────────
   Ein einziger Mechanismus für die ganze Seite. Was ein
   eigenes transform braucht, bekommt es über eine eigene
   Klasse: zwei transform-Regeln auf demselben Element würden
   sich gegenseitig löschen. */
.zeigen {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1),
              transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.zeigen--da { opacity: 1; transform: none; }


/* ─── Schmale Geräte ───────────────────────────────────────── */
@media (max-width: 62rem) {
  .haelften { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .haelften__scheide {
    width: auto; height: 2px; align-self: auto;
    background: linear-gradient(90deg, transparent, var(--stahl) 20%, var(--stahl) 80%, transparent);
    transform: skewY(-2deg);
  }
  .haelfte--a, .haelfte--b { padding: 0; }
  .fuhrpark { grid-template-columns: minmax(0, 1fr); }
  .spiegel { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halle__bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halle__platz--hoch { grid-row: span 2; }
  .halle__platz:last-child { margin-top: 0; }
}

@media (max-width: 46rem) {
  .kopf { flex-wrap: wrap; row-gap: 0.6rem; }
  .kopf__weg { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 0.2rem; }
  .kopf__ruf { margin-left: auto; }
  .oben { min-height: auto; padding-bottom: 3.5rem; }
  .oben__hinab { display: none; }
  .oben__unten { gap: 1.8rem; }
  .fuss { grid-template-columns: minmax(0, 1fr); }
  .fuss__weg { justify-self: start; }
  .reihe { grid-template-columns: 2.5rem minmax(0, 1fr) 2.2rem; gap: 0.6rem; }
  .zitate { columns: 1; }
  .liste { grid-template-columns: minmax(0, 1fr); }
  .liste__punkt--gross { grid-column: span 1; }
  .halle__bilder { grid-template-columns: minmax(0, 1fr); }
  .halle__platz--hoch { grid-row: auto; margin-top: 0; }
  /* Einspaltig hat kein Feld einen Nachbarn zur Rechten. Die
     senkrechte Linie stünde dann als Rahmenrest am Rand. */
  .liste__punkt { box-shadow: inset 0 -1px 0 0 rgba(56, 76, 92, 0.22); }
}

/* Grobe Zeigegeräte: Zustände, die nur beim Zeigen entstehen,
   gibt es dort nicht. Sie dürfen nicht am Finger kleben. */
@media (pointer: coarse) {
  .liste__punkt:hover { background: var(--grund); }
  .karte:hover, .knopf:hover { transform: none; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Die Balken
   stehen dann sofort auf ihrem Wert, statt gar nicht. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .oben__vor, .oben__erklaerung, .oben__tafel, .oben__streifen { opacity: 1; }
  .zeigen { opacity: 1; transform: none; }
}