/* ============================================================
   Carlo Grosso – eigene Website, dritte Fassung (13./14.09.2026)

   Grundgedanke: die Bühne im Dunkeln. Fast schwarz, eine warme Lampe,
   eine einzige Schrift in sehr groß, harte Kanten, echte Bilder. Ein
   Stylesheet, kein Build. Die zweite Fassung (web/seite, helles Gerät
   mit Eckmarken) liegt unverändert daneben.

   Nur ein Farbton außer Grau, hier "Lampe" genannt: seit 14.09.2026
   das Signalorange der zweiten Fassung (Carlo hat es aus fünf Farben
   gewählt; das Gelb davor fand er "nicht ganz schön"). Sie sitzt auf
   Knöpfen, Nummern, dem einen Wort in der Überschrift und dem
   Lichtkegel, der am Rechner mit dem Zeiger geht. Alles ist eckig –
   keine Rundung, nirgends, außer den drei Lämpchen im Fensterrahmen,
   die einen Browser darstellen.
   ============================================================ */

:root {
  --grund:    #0D0C0B;
  --grund-2:  #121110;
  --platte:   #171614;
  --platte-2: #1F1D1A;
  --tinte:    #F3EFE7;
  --tinte-2:  #B4AEA3;
  --tinte-3:  #8F887D;
  --linie:    #2A2825;
  --linie-2:  #3B3833;

  --lampe:      #FF4D18;
  --lampe-hell: #FF6A3A;
  --auf-lampe:  #17120A;
  --lampe-fl:   #2E160D;
  /* Die Lampe als Schrift. Im Dunkeln dieselbe Farbe; im Hellen ist das
     Orange auf dem Grund zu blass, dort wird es zum Rotbraun. */
  --lampe-text: #FF4D18;
  --licht-farbe: rgba(255, 77, 24, .11);

  --gut:      #7ED4A0;
  --schlecht: #FF8A7A;
  --mittel:   #E8C572;

  --schatten:      rgba(0, 0, 0, .9);
  --schatten-rand: rgba(0, 0, 0, .5);
  --korn: .055;

  --bahn: 80rem;
  --luft: clamp(5rem, 10vw, 9rem);
  --schnell: 160ms;
  --weich: cubic-bezier(.22, 1, .36, 1);

  /* Stand dieser Datei, steht im Entwurfsbalken. Bei jeder Änderung
     mitziehen, mit der echten Uhrzeit. */
  --stand: "14. September, 01:10";
}

/* Die helle Ansicht, seit 14.09.2026 auf Carlos Frage. Dunkel bleibt der
   Normalzustand; umgeschaltet wird mit dem Knopf in der Kopfzeile oder
   über ?ansicht=hell in der Adresse. Warmes Hellgrau statt Weiß, damit
   die weißen Platten und das weiße Fenster noch abheben. Die Lampe
   bleibt auf den Knöpfen; als Schrift wird sie zum Rotbraun (5,2:1). */
:root[data-ansicht="hell"] {
  --grund:    #F2F0EB;
  --grund-2:  #EBE8E2;
  --platte:   #FFFFFF;
  --platte-2: #F6F4EF;
  --tinte:    #14120F;
  --tinte-2:  #4E4A44;
  --tinte-3:  #67625A;
  --linie:    #DDD9D1;
  --linie-2:  #C7C2B8;
  --lampe-fl:   #FFE2D6;
  --lampe-text: #B8350A;
  --licht-farbe: rgba(255, 77, 24, .16);
  --gut:      #1E7A4C;
  --schlecht: #B5311F;
  --mittel:   #8A5A00;
  --schatten:      rgba(30, 22, 8, .30);
  --schatten-rand: rgba(30, 22, 8, .12);
  --korn: .035;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background: var(--grund);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: 'Geist', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Feines Korn über allem, auf einer festen Schicht ohne Zeiger –
   damit die schwarze Fläche nicht wie Lack aussieht. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: var(--korn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  margin: 0; font-weight: 700;
  line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--lampe); color: var(--auf-lampe); }
:focus-visible { outline: 2px solid var(--lampe-text); outline-offset: 3px; }

main, .kopf, .zugang, .fuss { position: relative; z-index: 1; }

/* ---------- Die Lampe ---------- */

.licht {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40rem circle at var(--mx, 24%) var(--my, 32%),
              var(--licht-farbe), transparent 62%);
}

/* ---------- Entwurfsbalken, Sprung, Bahn ---------- */

.entwurf {
  margin: 0; background: var(--lampe); color: var(--auf-lampe);
  font-size: .8rem; line-height: 1.45; padding: .5rem 1.25rem; text-align: center;
  position: relative; z-index: 50;
}
.entwurf a { color: inherit; }
.entwurf__stand { opacity: .7; }

.sprung {
  position: absolute; left: -9999px; z-index: 90;
  background: var(--lampe); color: var(--auf-lampe);
  padding: .7rem 1.1rem; font-weight: 600; font-size: .9rem;
}
.sprung:focus { left: 1rem; top: 1rem; }

.bahn { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }
@media (min-width: 48em) { .bahn { width: min(100% - 5rem, var(--bahn)); } }

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

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--grund) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; gap: 1.2rem; height: 4.25rem; }

.marke { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; white-space: nowrap; }
.marke b { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.marke span { font-size: .8rem; color: var(--tinte-3); }
@media (max-width: 46em) { .marke span { display: none; } }

.kopf__nav { margin-left: auto; display: flex; gap: 1.6rem; font-size: .92rem; }
.kopf__nav a { text-decoration: none; color: var(--tinte-2); transition: color var(--schnell); }
.kopf__nav a:hover { color: var(--tinte); }
@media (max-width: 64em) { .kopf__nav { display: none; } }

.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
@media (min-width: 64em) { .kopf__rechts { margin-left: 1.6rem; } }

/* Hell oder dunkel: der Knopf zeigt die andere Ansicht an. */
.ansicht {
  font-family: inherit; font-size: .82rem; font-weight: 600;
  background: none; border: 1px solid var(--linie-2); color: var(--tinte-2);
  padding: .55rem .8rem; cursor: pointer; white-space: nowrap;
  transition: color var(--schnell), border-color var(--schnell);
}
.ansicht:hover { color: var(--tinte); border-color: var(--tinte-2); }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--lampe); color: var(--auf-lampe);
  font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  padding: .85rem 1.4rem; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 220ms var(--weich), background var(--schnell), border-color var(--schnell), color var(--schnell);
}
.knopf:hover { background: var(--lampe-hell); }
.knopf:active { transform: scale(.98); }
.knopf--leer { background: none; color: var(--tinte); border-color: var(--linie-2); }
.knopf--leer:hover { background: none; border-color: var(--tinte-2); }
.knopf--gross { font-size: 1.02rem; padding: 1rem 1.7rem; }
.knopf--klein { font-size: .86rem; padding: .6rem 1rem; }
.knopf[disabled] { opacity: .5; cursor: default; }

.klein {
  font-family: inherit; font-size: .8rem; font-weight: 600;
  background: none; border: 1px solid var(--linie-2); color: var(--tinte-2);
  padding: .5rem .8rem; cursor: pointer;
  transition: color var(--schnell), border-color var(--schnell);
}
.klein:hover { color: var(--tinte); border-color: var(--tinte-2); }

/* Die eine kleine Zeile über einer Überschrift – nur im Aufmacher
   und auf der Quittung. */
.etikett {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lampe-text); margin: 0 0 1.1rem;
}

/* ============================================================
   Auftakt: die Bühne
   Ohne Javascript oder mit "weniger Bewegung" steht alles untereinander.
   Mit Javascript setzt seite.js html.mit-umbau: dann wird die Bahn lang,
   der Kleber hält, und Überschrift und Fenster liegen übereinander –
   das Skript schiebt das Fenster an seinen Platz.
   ============================================================ */

.auftakt { position: relative; }
.auftakt__bahn { height: auto; }
.auftakt__kleber {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--luft);
  background: radial-gradient(70% 55% at 12% 30%, var(--licht-farbe), transparent 70%);
}
.auftakt__raster { display: grid; gap: 3rem; }

.auftakt__wort { max-width: 100%; }
.auftakt__fuss { display: grid; gap: 1.6rem; max-width: 34rem; margin-top: .4rem; }
.auftakt__satz { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--tinte-2); }
.auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Drei Zeilen links, rechts daneben der kleine Bildschirm. Die
   Überschrift bekommt deshalb nur gut die Hälfte der Bahn. */
.riese {
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .98;
  margin-bottom: 1.8rem; max-width: 100%;
}
.riese .zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.riese .zeile > span { display: block; }
.riese em { font-style: normal; color: var(--lampe-text); }
@media (min-width: 56.01em) { html.mit-umbau .auftakt__wort { max-width: 60%; } }

@media (prefers-reduced-motion: no-preference) {
  .riese .zeile > span { animation: steigen .9s var(--weich) both; }
  .auftakt__wort .etikett, .auftakt__satz, .auftakt__knoepfe { animation: erscheinen .8s var(--weich) both; }
  .auftakt__satz { animation-delay: .32s; }
  .auftakt__knoepfe { animation-delay: .44s; }
}
@keyframes steigen { from { transform: translateY(105%); } to { transform: none; } }
@keyframes erscheinen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Der Rahmen ist genau so breit wie das Fenster darin – sonst ragte er
   in der Startlage, nach rechts geschoben, unsichtbar über den
   Seitenrand und machte die Seite breiter als den Bildschirm. */
.auftakt__fenster {
  justify-self: center; transform-origin: center center;
  width: min(100%, calc((58svh - 2.4rem) * 16 / 9));
}
@media (max-width: 56em) { .auftakt__fenster { width: min(100%, calc((58svh - 2.4rem) * 4 / 5)); } }
.auftakt__fenster .umbau__wort,
.auftakt__fenster .zeitleiste { opacity: var(--beschriftung, 1); }

html.mit-umbau .auftakt__bahn { height: 420vh; }
html.mit-umbau .auftakt__kleber {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-items: center;
  padding: 4.25rem 0 1.5rem;
}
html.mit-umbau .auftakt__raster {
  grid-template-columns: 1fr; align-items: center;
  min-height: calc(100svh - 6rem);
}
html.mit-umbau .auftakt__wort,
html.mit-umbau .auftakt__fenster { grid-area: 1 / 1; }
html.mit-umbau .auftakt__wort { align-self: center; will-change: transform, opacity; }
html.mit-umbau .auftakt__wort.weg { visibility: hidden; }
html.mit-umbau .auftakt__fenster { align-self: center; will-change: transform; --beschriftung: 0; }
@media (max-width: 56em) {
  html.mit-umbau .auftakt__bahn { height: 360vh; }
  html.mit-umbau .auftakt__wort { align-self: start; padding-top: .5rem; }
}

.umbau__wort { margin: 0 0 .8rem; text-align: center; font-size: .92rem; color: var(--tinte-2); }

/* ---------- Das Fenster mit der Bühne ---------- */

.fenster {
  /* Der Umbau soll immer ganz zu sehen sein: die Breite wird aus der
     Bildschirmhöhe zurückgerechnet, das Seitenverhältnis bleibt. */
  --leiste: 2.4rem;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--linie-2);
  overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px -40px var(--schatten), 0 0 0 1px var(--schatten-rand);
}

.fenster__leiste {
  display: flex; align-items: center; gap: .8rem;
  height: var(--leiste); padding: 0 .85rem;
  background: var(--platte-2); border-bottom: 1px solid var(--linie-2);
  font-size: .72rem; color: var(--tinte-3);
}
.fenster__lampen { display: flex; gap: .35rem; flex: none; }
.fenster__lampen i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--linie-2); display: block; }
.fenster__adresse {
  flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--grund); color: var(--tinte-2); padding: .28rem .8rem;
}
.fenster__jahr { flex: none; color: var(--lampe-text); font-weight: 700; }

.buehne {
  position: relative; aspect-ratio: 16 / 9;
  container-type: inline-size;
  background: #FFFFFF; color: #111;
  overflow: hidden;
}
@media (max-width: 56em) { .buehne { aspect-ratio: 4 / 5; } }

/* ---------- Die Bauteile der Bühne ----------
   Unverändert aus der zweiten Fassung, nur die Schrift der heutigen
   Seite ist jetzt Geist. Die Musterseite im Fenster hat absichtlich
   eine eigene Farbe, ein Blau: sie stellt die Seite eines Kunden dar,
   nicht diese hier. Bis 14.09.2026 war sie orange – seit diese Seite
   selbst orange ist, sähen beide gleich aus. */

.bt { position: absolute; z-index: 1; will-change: left, top, width, height, opacity; }
.bt > span { position: absolute; inset: 0; display: block; }
.bt .neu { opacity: 0; }
.bt--grund, .bt--raster, .bt--navbalken { z-index: 0; }

.bt--grund .alt {
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 7px),
    #E4E9F1;
}
.bt--grund .neu {
  background-image:
    linear-gradient(rgba(255, 253, 248, .70), rgba(255, 253, 248, .70)),
    url("hintergrund-berge.webp");
  background-size: cover;
  background-position: center 28%;
}

.bt--band .alt {
  background: linear-gradient(#F6F8FC, #D3DCEC 58%, #B3C3DE);
  border-bottom: 2px solid #7D93BC;
  box-shadow: inset 0 -1px 0 #fff;
}
.bt--band .neu { background: #fff; border-bottom: 1px solid #ECE9E1; }

.bt--marke .alt {
  font-family: 'Times New Roman', Times, serif; font-weight: 700; color: #1E3A70;
  font-size: clamp(.7rem, 2.5cqw, 1.9rem); letter-spacing: .02em; white-space: nowrap;
  text-shadow: 1px 1px 0 #fff, 2px 2px 3px rgba(0,0,0,.35);
}
.bt--marke .neu {
  font-family: 'Geist', sans-serif; font-weight: 700; color: #111;
  font-size: clamp(.75rem, 2.1cqw, 1.6rem); letter-spacing: -.02em; white-space: nowrap;
  display: flex; align-items: center; gap: .45em;
}
.bt--marke .neu i { width: .55em; height: .55em; border-radius: 50%; background: #1F5FBF; flex: none; }

.bt--nav .alt {
  font-family: 'Times New Roman', Times, serif; color: #00A; text-decoration: underline;
  font-size: clamp(.42rem, 1.05cqw, .82rem); white-space: nowrap;
}
.bt--nav .alt em { font-style: normal; color: #551A8B; }
.bt--nav .neu {
  font-family: 'Geist', sans-serif; color: #56564F; font-weight: 500;
  font-size: clamp(.45rem, 1.05cqw, .82rem); white-space: nowrap; text-align: right;
}
.bt--navbalken {
  background: linear-gradient(#dfe6f5, #c3d0ea);
  border-top: 1px solid #97a9cd; border-bottom: 1px solid #97a9cd;
}

.bt--titel .alt {
  font-family: 'Times New Roman', Times, serif; font-weight: 700; color: #900;
  font-size: clamp(.62rem, 1.75cqw, 1.35rem); line-height: 1.25;
}
.bt--titel .neu {
  font-family: 'Geist', sans-serif; font-weight: 800; color: #111;
  font-size: clamp(1.05rem, 4.1cqw, 3.3rem); line-height: 1.02; letter-spacing: -.03em;
}
.bt--text .alt {
  font-family: 'Times New Roman', Times, serif; color: #222; text-align: justify;
  font-size: clamp(.42rem, 1.02cqw, .8rem); line-height: 1.42; overflow: hidden; hyphens: auto;
}
.bt--text .alt u { color: #00A; }
.bt--text .neu {
  font-family: 'Geist', sans-serif; color: #56564F; line-height: 1.5;
  font-size: clamp(.5rem, 1.15cqw, .9rem);
}
.bt--spruch {
  font-family: 'Times New Roman', Times, serif; font-style: italic; color: #666;
  font-size: clamp(.42rem, 1.05cqw, .82rem); white-space: nowrap;
}

.bt--tafel .alt {
  border: 1px solid #aaa; background: #fafafa; color: #444;
  font-family: 'Times New Roman', Times, serif; line-height: 1.45;
  font-size: clamp(.42rem, 1cqw, .8rem); padding: clamp(.35rem,1.2cqw,1rem);
}
.bt--tafel .alt b {
  display: block; background: #dde6f3; border-bottom: 1px solid #aab;
  margin: calc(-1 * clamp(.35rem,1.2cqw,1rem)) calc(-1 * clamp(.35rem,1.2cqw,1rem)) .7em;
  padding: .35em .6em; color: #113;
}
.bt--tafel .neu {
  overflow: hidden;
  background: linear-gradient(158deg, #A97F4F 0%, #6A4B31 66%, #4A3524 100%);
}
.bt--tafel .neu img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 64%; display: block;
}
.bt--tafel .neu i { position: absolute; display: block; pointer-events: none; }
.bt--tafel .neu .licht-tafel {
  inset: 0;
  background: radial-gradient(58% 46% at 76% 8%, rgba(255,241,214,.28), transparent 62%);
}
.bt--tafel .neu .tiefe {
  inset: 0;
  background:
    radial-gradient(105% 88% at 50% 34%, transparent 42%, rgba(28,18,10,.52) 100%),
    linear-gradient(to top, rgba(20,13,7,.60), transparent 42%);
}
.bt--tafel .neu b {
  position: absolute; left: 5%; bottom: 6%;
  font-family: 'Geist', sans-serif; font-weight: 600; color: #fff;
  font-size: clamp(.38rem, .92cqw, .72rem); letter-spacing: -.01em;
  background: rgba(18,12,6,.42); backdrop-filter: blur(2px);
  padding: .25em .55em; white-space: nowrap;
}

.bt--bild .alt {
  border: 2px inset #b6b6b6; background: #eee; color: #444;
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.36rem, .85cqw, .66rem);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .2em;
  padding: 3%; text-align: center;
}
.bt--bild .alt img {
  width: 100%; height: 100%; min-height: 0; display: block;
  object-fit: fill; image-rendering: pixelated;
  filter: saturate(1.7) contrast(1.15);
  border: 1px solid #000;
}
.bt--bild .alt b { font-weight: 400; font-style: italic; line-height: 1.1; }
.bt--bild3 .alt { border: 0; background: none; color: #00A; text-decoration: underline; place-items: center start; }

.bt--bild .neu {
  background: #fff; border: 1px solid #E6E2D8;
  padding: clamp(.4rem,1.3cqw,1rem);
  font-family: 'Geist', sans-serif;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.5);
}
.bt--bild .neu i {
  display: block; height: 40%; margin-bottom: .5em;
  background-size: cover; background-position: center;
  background-color: #7A5A3A;
  background-image:
    radial-gradient(70% 60% at 74% 10%, rgba(255,247,232,.28), transparent 66%),
    radial-gradient(120% 100% at 50% 40%, transparent 46%, rgba(30,20,12,.34) 100%),
    url("foto-schnittholz.webp");
}
.bt--bild2 .neu i {
  background-color: #3F3128;
  background-image:
    radial-gradient(70% 60% at 74% 10%, rgba(255,247,232,.22), transparent 66%),
    radial-gradient(120% 100% at 50% 40%, transparent 46%, rgba(16,12,8,.34) 100%),
    url("foto-holzstapel.webp");
  background-position: center 40%;
}
.bt--bild3 .neu i {
  background-color: #2C2A2E;
  background-image:
    radial-gradient(70% 60% at 74% 10%, rgba(240,247,255,.22), transparent 66%),
    radial-gradient(120% 100% at 50% 40%, transparent 46%, rgba(14,20,30,.32) 100%),
    url("foto-saegeblatt.webp");
  background-position: center 45%;
}
.bt--bild .neu b { display: block; color: #111; font-weight: 700; letter-spacing: -.01em; font-size: clamp(.45rem, 1.15cqw, .9rem); }
.bt--bild .neu em { display: block; font-style: normal; color: #6B6B63; margin-top: .2em; font-size: clamp(.38rem, .92cqw, .72rem); }

.bt--ruf .alt {
  font-family: 'Courier New', monospace; background: #000; color: #0f0;
  font-size: clamp(.4rem, .92cqw, .7rem); padding: .45em .6em;
  display: grid; place-items: center; white-space: nowrap;
}
.bt--ruf .neu {
  display: grid; place-items: center;
  background: #1F5FBF; color: #fff; border-radius: 999px; font-weight: 700;
  font-family: 'Geist', sans-serif; font-size: clamp(.45rem, 1.1cqw, .88rem);
  box-shadow: 0 8px 20px -12px rgba(31,95,191,.9);
}

.bt--zeiten .alt {
  background: #ffffcc; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
  overflow: hidden; display: grid; align-items: center;
}
.bt--zeiten .alt i {
  font-family: 'Times New Roman', Times, serif; font-style: normal; color: #a00;
  font-size: clamp(.4rem, .95cqw, .74rem); white-space: nowrap;
  padding-left: 100%; animation: laufen 11s linear infinite;
}
@keyframes laufen { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .bt--zeiten .alt i { animation: none; padding-left: 2%; } }
.bt--zeiten .neu {
  font-family: 'Geist', sans-serif; color: #56564F;
  font-size: clamp(.4rem, .98cqw, .78rem); white-space: nowrap;
  display: flex; align-items: center; gap: .5em;
}
.bt--zeiten .neu i { width: .5em; height: .5em; border-radius: 50%; background: #17904F; flex: none; box-shadow: 0 0 0 .18em rgba(23,144,79,.22); }

.bt--fuss .alt {
  border-top: 1px solid #ccc; background: #f0f0f0; color: #666;
  font-family: 'Times New Roman', Times, serif; font-size: clamp(.38rem, .9cqw, .7rem);
  display: grid; place-items: center; text-align: center; padding: 0 4%;
}
.bt--fuss .neu {
  border-top: 1px solid #ECE9E1; background: #fff; color: #56564F;
  font-family: 'Geist', sans-serif; font-size: clamp(.38rem, .9cqw, .7rem);
  display: grid; place-items: center; text-align: center;
}

.bt--raster {
  background:
    repeating-linear-gradient(to right, #e6e6e6 0 1px, transparent 1px 33.33%),
    repeating-linear-gradient(to bottom, #e6e6e6 0 1px, transparent 1px 25%);
  border: 1px solid #e6e6e6;
}
.bt--stern {
  display: grid; place-items: center; background: #ffe400;
  clip-path: polygon(50% 0,61% 20%,82% 12%,79% 35%,100% 43%,84% 58%,97% 77%,74% 78%,71% 100%,50% 88%,29% 100%,26% 78%,3% 77%,16% 58%,0 43%,21% 35%,18% 12%,39% 20%);
  animation: kreiseln 7s linear infinite;
}
.bt--stern span { font-family: 'Arial Black', 'Geist', sans-serif; font-weight: 900; color: #d40000; font-size: clamp(.42rem, 1.15cqw, .9rem); transform: rotate(-12deg); }
@keyframes kreiseln { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt--stern { animation: none; } }
.bt--uhr {
  font-family: 'Times New Roman', Times, serif; color: #777;
  font-size: clamp(.36rem, .88cqw, .68rem); text-align: center;
  display: grid; place-items: center; border-top: 1px dashed #ccc;
}
.bt--knopf98 {
  background: linear-gradient(#fdfdfd, #dcdcdc); border: 2px outset #eee; color: #222;
  font-family: 'Times New Roman', Times, serif; font-size: clamp(.38rem, .9cqw, .7rem);
  display: grid; place-items: center;
}
.bt--sterne {
  font-family: 'Geist', sans-serif; display: flex; align-items: center; gap: .5em;
  font-size: clamp(.4rem, .98cqw, .78rem); color: #56564F; white-space: nowrap;
}
.bt--sterne .reihe { letter-spacing: .08em; color: #E8A317; }
.bt--sterne em { font-style: normal; }
.bt--karte {
  font-family: 'Geist', sans-serif; display: flex; align-items: center; gap: .5em;
  font-size: clamp(.4rem, .98cqw, .78rem); color: #56564F; white-space: nowrap;
}
.bt--karte i { width: .8em; height: .8em; flex: none; background: #1F5FBF; clip-path: polygon(50% 100%, 12% 42%, 12% 22%, 30% 4%, 70% 4%, 88% 22%, 88% 42%); }

/* ---------- Zeitleiste unter dem Fenster ---------- */

.zeitleiste { display: grid; gap: .7rem; margin-top: 1.2rem; }
@media (min-width: 44em) { .zeitleiste { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; } }
.zeitleiste__wort { font-size: .8rem; font-weight: 600; color: var(--tinte-3); }
.zeitleiste__gleis { display: flex; align-items: center; gap: .8rem; }
.zeitleiste__marke { font-size: .78rem; color: var(--tinte-3); flex: none; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.6rem; background: none; cursor: grab; margin: 0;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--linie-2); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--linie-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.1rem; height: 1.1rem;
  background: var(--lampe); border: 2px solid var(--grund); margin-top: -.5rem;
  transition: transform 140ms var(--weich);
}
input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border: 2px solid var(--grund); border-radius: 0; background: var(--lampe); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--grund), 0 0 0 5px var(--lampe); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--grund), 0 0 0 5px var(--lampe); }

/* ============================================================
   Brücke und Module
   ============================================================ */

.bruecke { padding: var(--luft) 0 0; }
.bruecke__satz {
  font-size: clamp(1.4rem, 2.7vw, 2.4rem); font-weight: 500;
  letter-spacing: -.025em; line-height: 1.22; max-width: 34ch;
  color: var(--tinte-2);
}
.bruecke__satz b { color: var(--tinte); font-weight: 700; }

.modul { padding: var(--luft) 0; }
.modul--band { background: var(--grund-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

.modul__kopf { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.modul__kopf h2 { font-size: clamp(1.9rem, 3.8vw, 3.4rem); margin-bottom: 1.1rem; }
.modul__satz { color: var(--tinte-2); max-width: 40rem; font-size: 1.08rem; }

.fussnote { font-size: .88rem; color: var(--tinte-3); max-width: 44rem; line-height: 1.5; }
.fussnote b { color: var(--tinte-2); }
.fussnote a { color: var(--tinte-2); }
.fehler {
  margin-top: 1rem; font-size: .95rem; font-weight: 600; color: var(--schlecht);
  border-left: 2px solid var(--schlecht); padding-left: .8rem;
}

/* ---------- Felder ---------- */

.feld { display: grid; gap: .45rem; min-width: 0; }
.feld label, .haken span { font-size: .9rem; font-weight: 600; }
.pflicht { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--lampe-text); margin-left: .45rem; }

input[type="text"], input[type="email"], textarea, select {
  font: inherit; background: var(--platte); color: var(--tinte);
  border: 1px solid var(--linie-2); border-radius: 0;
  padding: .8rem .95rem; width: 100%; min-width: 0;
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--lampe-text);
  box-shadow: 0 0 0 3px rgba(255, 77, 24, .22);
}
input::placeholder, textarea::placeholder { color: var(--tinte-3); opacity: 1; }
textarea { resize: vertical; }
select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B4AEA3' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
:root[data-ansicht="hell"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234E4A44' stroke-width='1.8'/%3E%3C/svg%3E");
}
select option { background: var(--platte); color: var(--tinte); }
.grossschrift { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ---------- Befund ---------- */

.pruefer { display: grid; gap: 1rem; align-items: end; max-width: 52rem; }
@media (min-width: 40em) { .pruefer { grid-template-columns: 1fr auto; } }
.pruefer input { font-size: clamp(1.1rem, 2vw, 1.5rem); padding: 1rem 1.1rem; }
.pruefen .fussnote { margin-top: 1.4rem; }

.befund { margin-top: 2.6rem; display: grid; gap: 1.6rem; justify-items: start; }
.befund[hidden], #pruef-ergebnis[hidden] { display: none; }
.pruefstand {
  width: 100%;
  background: var(--platte); border: 1px solid var(--linie-2);
  padding: 1.6rem; min-height: 16rem;
}

.lauf__satz { margin: 0 0 .9rem; font-weight: 600; }
.lauf__balken { height: .35rem; background: var(--linie-2); overflow: hidden; margin-bottom: .9rem; }
.lauf__balken i { display: block; height: 100%; width: 4%; background: var(--lampe); transition: width 700ms var(--weich); }

.note { display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--linie-2); }
.note__zahl {
  flex: none; width: 4.4rem; height: 4.4rem; display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em;
  border: 2px solid var(--note-farbe, var(--linie-2)); color: var(--note-farbe, var(--tinte-2));
}
.note__text { min-width: 0; }
.note__text b { display: block; font-size: 1.1rem; }
.note__text i { display: block; font-style: normal; color: var(--tinte-2); font-size: .92rem; line-height: 1.45; margin-top: .15rem; }
.note__wo { margin-left: auto; align-self: flex-start; text-align: right; font-size: .75rem; color: var(--tinte-3); max-width: 40%; overflow-wrap: anywhere; }
.note__wo b { display: block; color: var(--tinte); font-weight: 500; font-size: .85rem; }

#pruef-ergebnis { display: grid; gap: 1.4rem; }
@media (min-width: 52em) { #pruef-ergebnis { grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: start; } }
.befund__rechts { min-width: 0; }

.handybild { margin: 0; background: var(--grund); border: 1px solid var(--linie-2); padding: 8px 8px 6px; width: max-content; max-width: 100%; }
.handybild img { width: 236px; max-width: 100%; height: auto; background: #fff; }
.handybild figcaption { margin-top: .5rem; font-size: .75rem; color: var(--tinte-3); text-align: center; line-height: 1.5; }

.teilnoten { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1.2rem; }
@media (min-width: 40em) { .teilnoten { grid-template-columns: repeat(4, 1fr); } }
.teilnoten li { display: flex; align-items: baseline; gap: .5rem; border-top: 1px solid var(--linie-2); padding-top: .5rem; }
.teilnoten b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--teil-farbe, var(--tinte)); }
.teilnoten span { font-size: .75rem; color: var(--tinte-3); }
.teil--rot { --teil-farbe: var(--schlecht); }
.teil--gelb { --teil-farbe: var(--mittel); }
.teil--gruen { --teil-farbe: var(--gut); }
.note--rot { --note-farbe: var(--schlecht); }
.note--gelb { --note-farbe: var(--mittel); }
.note--gruen { --note-farbe: var(--gut); }

.posten__paar { display: grid; gap: 1.4rem; }
@media (min-width: 46em) { .posten__paar { grid-template-columns: 1fr 1fr; align-items: start; } }
.posten { list-style: none; margin: 0; padding: 0; }
@media (max-width: 45.99em) { .posten + .posten { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie-2); } }
.posten li { position: relative; padding-left: 1.6rem; margin-bottom: .65rem; font-size: .97rem; line-height: 1.45; }
.posten li:last-child { margin-bottom: 0; }
.posten li b { font-weight: 600; }
.posten li span { display: block; color: var(--tinte-2); font-size: .88rem; margin-top: .1rem; }
.posten li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; background: var(--gut); }
.posten--rot li::before { background: var(--schlecht); }
.posten__ueber { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 0 0 .8rem; }

/* ---------- Ablauf ---------- */

.ablauf__raster { display: grid; gap: 2.5rem; }
@media (min-width: 60em) {
  .ablauf__raster { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .ablauf__kopf { position: sticky; top: 6rem; }
}
.ablauf__kopf .modul__kopf { margin-bottom: 0; }

.treppe { list-style: none; margin: 0; padding: 0; }
.stufe {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.4rem;
  padding: 1.8rem 0; border-top: 1px solid var(--linie-2);
}
.stufe:last-child { border-bottom: 1px solid var(--linie-2); }
.stufe__nr {
  grid-row: 1 / span 3;
  font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--lampe-text); min-width: 2.2em;
}
.stufe h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; }
.stufe p { color: var(--tinte-2); margin: 0; max-width: 36rem; }
.stufe__marke { font-size: .8rem; font-weight: 600; color: var(--tinte-3); }

/* ---------- Beispiele: die Galerie ---------- */

.beispiele__kopf { display: grid; gap: 1.2rem; max-width: none; }
@media (min-width: 60em) { .beispiele__kopf { grid-template-columns: minmax(0, 52rem) auto; align-items: end; justify-content: space-between; } }
.beispiele__kopf .modul__satz + .modul__satz { margin-top: .8em; }

.galerie__pfeile { display: none; gap: .5rem; }
@media (hover: hover) and (min-width: 60em) { .galerie__pfeile { display: flex; } }
.galerie__pfeile button {
  width: 3.2rem; height: 3.2rem; background: none; border: 1px solid var(--linie-2);
  color: var(--tinte); font-family: inherit; font-size: 1.2rem; cursor: pointer;
  transition: border-color var(--schnell), opacity var(--schnell);
}
.galerie__pfeile button:hover { border-color: var(--tinte-2); }
.galerie__pfeile button[disabled] { opacity: .3; cursor: default; }

.galerie { position: relative; }
.galerie__gleis {
  list-style: none; margin: 0;
  padding: .25rem max(1.25rem, calc((100% - var(--bahn)) / 2)) .25rem;
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(1.25rem, calc((100% - var(--bahn)) / 2));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
@media (min-width: 48em) {
  .galerie__gleis { padding-inline: max(2.5rem, calc((100% - var(--bahn)) / 2)); scroll-padding-inline: max(2.5rem, calc((100% - var(--bahn)) / 2)); }
}
.galerie__gleis::-webkit-scrollbar { display: none; }

.probe { flex: 0 0 min(80vw, 52rem); scroll-snap-align: start; }
.probe a { display: block; text-decoration: none; color: inherit; }
.probe img {
  width: 100%; height: auto; aspect-ratio: 1280 / 763; object-fit: cover; object-position: top;
  border: 1px solid var(--linie-2); background: var(--platte);
  transition: transform 500ms var(--weich), border-color var(--schnell);
}
.probe a:hover img { transform: translateY(-4px); border-color: var(--tinte-3); }
.probe__zeile { display: flex; align-items: baseline; gap: .8rem; margin: 1rem 0 .4rem; }
.probe__zeile b { font-size: 1.05rem; }
.probe__zeile em { font-style: normal; color: var(--lampe-text); font-weight: 600; }
.probe__satz { display: block; color: var(--tinte-2); font-size: .95rem; max-width: 40rem; }

/* ---------- Klartext ---------- */

.nichts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-2); }
.nichts li { display: grid; gap: .6rem 3rem; padding: 2.2rem 0; border-bottom: 1px solid var(--linie-2); }
@media (min-width: 56em) { .nichts li { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.nichts b { font-size: clamp(1.7rem, 3.6vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.nichts span { color: var(--tinte-2); font-size: 1.05rem; max-width: 34rem; }

/* ---------- Preis ---------- */

.preis__fuss { margin-top: 1.4rem; }

.wahl-danach { margin-top: clamp(2.5rem, 5vw, 4rem); }
.wahl-danach__titel { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 1.4rem; }
.wahl-danach__paar { display: grid; gap: 1rem; }
@media (min-width: 46em) { .wahl-danach__paar { grid-template-columns: 1fr 1fr; } }
.wahl-danach__karte { border: 1px solid var(--linie-2); padding: 1.6rem; }
.wahl-danach__karte h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.wahl-danach__zahl { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 1rem; }
.wahl-danach__zahl span { font-size: .95rem; font-weight: 600; color: var(--tinte-2); letter-spacing: 0; }
.wahl-danach__karte ul { list-style: none; margin: 0; padding: 0; }
.wahl-danach__karte li { position: relative; padding-left: 1.3rem; margin-bottom: .45rem; color: var(--tinte-2); font-size: .95rem; }
.wahl-danach__karte li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; background: var(--lampe); }
.wahl-danach .fussnote { margin-top: 1.4rem; }

/* ---------- Angebot ---------- */

.wer { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; margin-bottom: 2.4rem; max-width: 48rem; }
.wer__zeichen { width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border: 1px solid var(--lampe-text); color: var(--lampe-text); font-weight: 800; letter-spacing: -.03em; font-size: 1.4rem; }
.wer h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.wer p { color: var(--tinte-2); }

.formular { display: grid; gap: 1.4rem; max-width: 56rem; }
.formular[hidden] { display: none; }
.formular__raster { display: grid; gap: 1.2rem; }
@media (min-width: 44em) { .formular__raster { grid-template-columns: 1fr 1fr; } .feld--breit { grid-column: 1 / -1; } }
.honig { position: absolute; left: -9999px; }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.haken input { margin: .25rem 0 0; accent-color: var(--lampe); width: 1.05rem; height: 1.05rem; flex: none; }
.haken span { font-weight: 400; color: var(--tinte-2); }
.formular__fuss { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 44em) { .formular__fuss { grid-template-columns: auto 1fr; } }

.quittung { background: var(--platte); border: 1px solid var(--lampe); padding: 2rem; max-width: 40rem; }
.quittung[hidden] { display: none; }
.quittung h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.quittung p { color: var(--tinte-2); }

/* ---------- Zugang ---------- */

/* Nur fuer Vorleseprogramme: da steht etwas, man sieht es nur nicht.
   Ein Platzhalter ist keine Beschriftung - er verschwindet beim Tippen. */
.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* ---------- Der Brief-Streifen (28.09.2026) ----------
   Steht hinter dem Umbau, als eigener Abschnitt mit eigenem Grund.
   Zuerst stand das Feld im Aufmacher neben "Angebot anfordern" - dort
   sah es aus, als gehoere es dazu (Carlo). Hier gehoert es sich selbst:
   links die Frage, rechts das Feld. */
.brief__innen { display: grid; gap: 1.6rem 3rem; align-items: center; }
@media (min-width: 52em) {
  .brief__innen { grid-template-columns: 1fr minmax(20rem, 26rem); }
}
.brief__wort h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.brief__wort p { color: var(--tinte-2); max-width: 44ch; }
.brief .schloss { display: flex; gap: .6rem; max-width: none; margin: 0; }
.brief .schloss input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 1rem 1.1rem; }
.brief .schloss .knopf { white-space: nowrap; }
.brief .fehler { margin-top: .8rem; }
@media (max-width: 32em) {
  .brief .schloss { flex-wrap: wrap; }
  .brief .schloss input[type="text"],
  .brief .schloss .knopf { flex: 1 1 100%; }
}

.zugang { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.zugang .modul__kopf h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .7rem; }
.zugang__satz { color: var(--tinte-2); max-width: 38rem; }
.schloss { display: grid; gap: 1rem; align-items: end; max-width: 34rem; }
@media (min-width: 36em) { .schloss { grid-template-columns: 1fr auto; } }
.zugang .fussnote { margin-top: 1.4rem; }

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

.fuss { border-top: 1px solid var(--linie); padding: 2rem 0 3rem; font-size: .9rem; color: var(--tinte-2); }
.fuss__innen { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tinte); }
.fuss__marke { margin-right: auto; color: var(--tinte); }

/* ---------- Impressum und Datenschutz ----------
   Dieselbe Kopf- und Fußzeile wie die Startseite, dazwischen eine
   schmale Textspalte. Was noch fehlt, ist eingerahmt (.lueck). */

.recht { padding: clamp(3rem, 6vw, 5rem) 0 var(--luft); }
.bahn--schmal { max-width: 46rem; }
.recht h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 1rem; }
.recht__vor { color: var(--tinte-2); font-size: 1.1rem; max-width: 40rem; margin-bottom: 2.5rem; }
.recht__teil { padding: 1.8rem 0; border-top: 1px solid var(--linie-2); }
.recht__teil h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .9rem; }
.recht__teil p, .recht__teil li { color: var(--tinte-2); }
.recht__teil b { color: var(--tinte); }
.recht__teil ul { margin: 0 0 1em; padding-left: 1.2rem; }
.recht__teil li { margin-bottom: .35rem; }
.recht__teil a { color: var(--tinte); }
.recht__block { background: var(--platte); border: 1px solid var(--linie-2); padding: 1.1rem 1.3rem; margin-bottom: 1em; }
.recht__block p { color: var(--tinte); }
.recht__kurz { border-left: 3px solid var(--lampe); background: var(--lampe-fl); padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.recht__kurz p { color: var(--tinte); }
.recht__stand { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--linie-2); font-size: .9rem; color: var(--tinte-3); }
.recht__stand a { color: var(--tinte-2); }
.lueck { outline: 2px solid var(--lampe); outline-offset: 2px; padding: 0 .2em; color: var(--lampe-text); }

/* ---------- Auftauchen beim Scrollen ---------- */

.steig { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--weich), transform .7s var(--weich); }
.steig.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .steig { opacity: 1; transform: none; transition: none; } }