/* =========================================================================
   Karriereportal Kesseler Garten- und Landschaftsbau
   Gestaltungsentscheidung siehe ../../../DESIGN.md
   Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Bausteine · 5 Bereiche
   ========================================================================= */

/* --- 1 Schriften ------------------------------------------------------- */

@font-face {
  font-family: 'Univers';
  src: url('../fonts/univers-45-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/univers-65-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Univers Cond';
  src: url('../fonts/univers-67-cond-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- 2 Tokens ---------------------------------------------------------- */

:root {
  /* Farbe */
  --nacht:        #1A0820;
  --nacht-2:      #24102C;
  --nacht-3:      #2F1739;
  --violett:      #662281;
  --violett-hell: #A855C4;   /* Grafik, Linien, Rahmen — muss keine 4,5:1 halten */
  --violett-text: #C48BD8;   /* kleiner Text auf dunklem Grund, hält 4,5:1 */
  --violett-glas: rgba(168, 85, 196, .22);
  --gruen:        #7EB61A;   /* Knopfgrund und Grafik — nie als Text auf Hell */
  --gruen-tief:   #6A9A14;   /* Hover-Zustand für Knöpfe */
  --gruen-text:   #47690B;   /* Grün als Text auf --kalk: 5,8:1 */
  --kalk:         #F2EEE9;
  --kalk-2:       #E6DFD6;
  --stein:        #4A4048;
  --stein-hell:   #6E6470;
  --weiss:        #FFFFFF;
  /* Text auf dunklem Grund ist durchgehend reinweiß. Der frühere Lilastich
     war zwar kontraststark genug, wirkte aber grau statt klar. */
  --hell-auf-dunkel: #FFFFFF;
  --gedimmt-dunkel:  #FFFFFF;
  /* Nur dort, wo ein Farbunterschied eine Aussage trägt: die linke Spalte
     der Gegenüberstellung. Wären beide Seiten gleich weiß, verschwände der
     Unterschied zwischen „Anderswo" und „Bei Kesseler". */
  --zurueckgenommen: #CFC3D4;

  /* Schrift */
  --schrift-text:    'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift-display: 'Univers Cond', 'Univers', 'Helvetica Neue Condensed',
                     'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;

  /* Raum */
  --raum-max:  1280px;
  --raum-rand: clamp(1.25rem, 5vw, 4rem);
  --bahn-luft: clamp(4.5rem, 10vw, 9rem);

  /* Bewegung */
  --weich: cubic-bezier(.22, .61, .36, 1);
  --tempo: .7s;
}

/* --- 3 Grundlagen ------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--stein);
  font-family: var(--schrift-text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Klassen wie .knopf setzen display und würden das hidden-Attribut
   sonst aushebeln. Das Attribut muss gewinnen. */
[hidden] { display: none !important; }

:where(a, button, summary, details > summary):focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skiplink {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 999;
  background: var(--gruen); color: var(--nacht);
  font-family: var(--schrift-display); text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none;
  padding: .85rem 1.6rem;
}
.skiplink:focus { transform: translate(-50%, 0); }

/* --- 4 Bausteine ------------------------------------------------------- */

/* 4.1 Raum */
.raum {
  width: 100%;
  max-width: var(--raum-max);
  margin-inline: auto;
  padding-inline: var(--raum-rand);
}

/* 4.2 Marke — Sektionsauszeichnung auf kurzem senkrechten Balken */
.marke {
  font-family: var(--schrift-display);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violett-text);
  margin: 0 0 1.5rem;
  line-height: 1.4;
}
/* Namensschild wie auf den Sammelkarten: eine schräg angeschnittene Platte
   mit hellem Text darauf. Der Text bleibt aufrecht, nur der Grund ist
   geschert — sonst wird die Schrift schief und schlecht lesbar. */
.marke--balken {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .42rem 1.05rem .46rem .95rem;
  color: var(--weiss);
}
.marke--balken::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--violett) 0%, #7C2D99 100%);
  transform: skewX(-13deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
/* Schmaler Lichtstreifen an der Kante, wie die Metallfassung der Karten */
.marke--balken::after {
  content: '';
  position: absolute; left: -.18rem; top: 0; bottom: 0;
  width: 3px;
  z-index: -1;
  background: linear-gradient(180deg, var(--violett-hell), var(--gruen));
  transform: skewX(-13deg);
}
.bahn--hell .marke { color: var(--violett); }
.bahn--hell .marke--balken { color: var(--weiss); }

/* 4.3 Überschriften */
.titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: .98;
  letter-spacing: -.005em;
  margin: 0 0 1.5rem;
  color: var(--nacht);
  text-wrap: balance;
}
.titel--gross { font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: .92; }
.bahn--dunkel .titel,
.bahn--nacht  .titel { color: var(--weiss); }
.titel em {
  font-style: normal;
  color: var(--violett-hell);
}
.bahn--hell .titel em { color: var(--violett); }

/* 4.4 Lead */
.lead {
  font-size: clamp(1.0625rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.lead--breit { max-width: 54ch; }
.bahn--dunkel .lead,
.bahn--nacht  .lead { color: var(--gedimmt-dunkel); }

/* 4.5 Knopf */
.knopf {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 3.25rem;
  padding: .9rem 1.9rem;
  background: var(--violett);
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-size: 1rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--violett);
  transition: background .35s var(--weich), color .35s var(--weich),
              border-color .35s var(--weich), transform .35s var(--weich);
}
.knopf:hover { background: var(--violett-hell); border-color: var(--violett-hell); transform: translateY(-2px); }
.knopf--leer { background: transparent; border-color: rgba(255,255,255,.5); color: var(--weiss); }
.knopf--leer:hover { background: var(--weiss); border-color: var(--weiss); color: var(--nacht); }
.knopf--gruen { background: var(--gruen); border-color: var(--gruen); color: var(--nacht); }
.knopf--gruen:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--nacht); }
.knopf--klein { min-height: 2.75rem; padding: .55rem 1.25rem; font-size: .875rem; }
.knopf--breit { width: 100%; max-width: 34rem; text-align: center; }

/* 4.6 Bahnen */
.bahn { padding-block: var(--bahn-luft); position: relative; }
.bahn--hell   { background: var(--kalk);   color: var(--stein); }
.bahn--dunkel { background: var(--nacht-2); color: var(--hell-auf-dunkel); }
.bahn--nacht  { background: var(--nacht);  color: var(--hell-auf-dunkel); }
.bahn--eng    { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Feine Trennkante zwischen dunklen Bahnen */
.bahn--dunkel + .bahn--dunkel { border-top: 1px solid rgba(168,85,196,.16); }

/* --- 5 Bereiche -------------------------------------------------------- */

/* 5.1 Stele — Signature, Scrollfortschritt am linken Rand */
.stele {
  position: fixed;
  left: clamp(.75rem, 1.6vw, 1.75rem);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 42vh;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(102,34,129,.14), rgba(102,34,129,.30));
  border: 1px solid var(--violett-glas);
  backdrop-filter: blur(2px);
  display: none;
}
.stele__fuellung {
  display: block;
  width: 100%;
  height: var(--fortschritt, 0%);
  background: linear-gradient(180deg, var(--violett-hell), var(--violett));
  box-shadow: 0 0 14px rgba(168,85,196,.55);
  transition: height .12s linear;
}
@media (min-width: 1100px) { .stele { display: block; } }

/* 5.2 Kopf */
.kopf {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  transition: background .4s var(--weich), box-shadow .4s var(--weich);
}
.kopf__innen {
  max-width: var(--raum-max);
  margin-inline: auto;
  padding: 1rem var(--raum-rand);
  display: flex; align-items: center; gap: 1.5rem;
}
.kopf__logo { flex: 0 0 auto; line-height: 0; }
.kopf__logo img {
  width: clamp(132px, 15vw, 178px); height: auto;
}
.kopf.ist-fest {
  background: rgba(26, 8, 32, .92);
  box-shadow: 0 1px 0 rgba(168,85,196,.22);
  backdrop-filter: blur(10px);
}

.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--weiss); text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--weich), color .3s var(--weich);
}
.kopf__nav a:hover { border-bottom-color: var(--violett-hell); }
.kopf__cta { flex: 0 0 auto; }
/* Die beiden Knoepfe gehoeren zusammen: halber Abstand statt 1,5rem */
.kopf__cta + .kopf__cta { margin-left: -.75rem; }

.kopf__schalter {
  display: none;
  margin-left: auto;
  width: 3rem; height: 3rem;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.kopf__schalter-balken,
.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
  position: absolute; left: 50%; width: 26px; height: 2px;
  background: var(--weiss); transform: translateX(-50%);
  transition: transform .35s var(--weich), opacity .2s linear;
}
.kopf__schalter-balken { top: 50%; margin-top: -1px; }
.kopf__schalter-balken::before { content: ''; top: -8px; }
.kopf__schalter-balken::after  { content: ''; top:  8px; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::before { transform: translateX(-50%) translateY(8px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::after  { transform: translateX(-50%) translateY(-8px) rotate(-45deg); }

/* Burger-Menue schon bis 1279 px: Darunter passen fuenf Menuepunkte und
   zwei Knoepfe nicht mehr in eine Zeile. Die Knoepfe bleiben bis 920 px
   neben dem Schalter stehen. */
@media (max-width: 1279px) {
  .kopf__schalter { display: block; margin-left: 0; }
  .kopf__nav + .kopf__cta { margin-left: auto; }
  .kopf__nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(21rem, 82vw);
    background: var(--nacht);
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform .45s var(--weich);
    border-left: 1px solid rgba(168,85,196,.25);
    overflow-y: auto;
  }
  .kopf__nav.ist-offen { transform: translateX(0); }
  .kopf__nav ul { flex-direction: column; gap: 0; }
  .kopf__nav li { border-bottom: 1px solid rgba(168,85,196,.18); }
  .kopf__nav a {
    display: block; padding: 1.1rem 0; font-size: 1rem; border-bottom: 0;
  }
}
@media (max-width: 919px) {
  .kopf__schalter { margin-left: auto; }
  .kopf__cta { display: none; }
}

/* 5.3 Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem 0 0;
  background: var(--nacht);
  overflow: hidden;
  isolation: isolate;
}
.hero__medium { position: absolute; inset: 0; z-index: -1; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Schleier: oben so viel, dass der Kopf lesbar bleibt, in der Mitte offen,
   unten links so viel, dass die Schrift trägt. Das Team soll sichtbar bleiben. */
.hero__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26,8,32,.60) 0%, rgba(26,8,32,.10) 24%,
      rgba(26,8,32,.10) 40%, rgba(26,8,32,.74) 86%, rgba(26,8,32,.94) 100%),
    linear-gradient(100deg,
      rgba(26,8,32,.74) 0%, rgba(26,8,32,.30) 44%, rgba(26,8,32,0) 74%);
}
@media (max-width: 767px) {
  /* Am Handy steht der Text über dem Bild statt daneben — mehr Grundabdunklung */
  .hero__schleier {
    background: linear-gradient(180deg,
      rgba(26,8,32,.66) 0%, rgba(26,8,32,.22) 22%,
      rgba(26,8,32,.62) 52%, rgba(26,8,32,.92) 100%);
  }
}

.hero__inhalt {
  width: 100%; max-width: var(--raum-max);
  margin-inline: auto;
  padding: 0 var(--raum-rand);
}
.hero .marke { color: var(--gedimmt-dunkel); margin-bottom: 1.25rem; }

.hero__titel {
  font-family: var(--schrift-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.85rem, 11.5vw, 8rem);
  line-height: .88;
  letter-spacing: -.012em;
  color: var(--weiss);
  margin: 0 0 1.75rem;
  max-width: 15ch;
}
.hero__titel .zeile { display: block; overflow: hidden; }
.hero__titel .zeile > span {
  display: block;
  transform: translateY(105%);
  animation: vorhang .95s var(--weich) forwards;
}
.hero__titel .zeile:nth-child(1) > span { animation-delay: .12s; }
.hero__titel .zeile:nth-child(2) > span { animation-delay: .24s; }
.hero__titel .zeile:nth-child(3) > span { animation-delay: .36s; color: var(--violett-hell); }
@keyframes vorhang { to { transform: translateY(0); } }

.hero__lead {
  color: var(--hell-auf-dunkel);
  font-size: clamp(1.0625rem, 2vw, 1.3rem);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 0 2.25rem;
  opacity: 0;
  animation: auftauchen .9s var(--weich) .55s forwards;
}
.hero__aktionen {
  display: flex; flex-wrap: wrap; gap: .85rem;
  opacity: 0;
  animation: auftauchen .9s var(--weich) .7s forwards;
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__fuss {
  width: 100%; max-width: var(--raum-max);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  padding: 1.5rem var(--raum-rand) clamp(2rem, 5vw, 3rem);
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.16);
}
/* Anhalten des Hintergrundvideos. Zurückhaltend gestaltet, weil es eine
   Pflichtfunktion ist und kein Gestaltungselement. */
.hero__pause {
  margin-left: auto;
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: rgba(26,8,32,.45);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s var(--weich), border-color .3s var(--weich);
}
.hero__pause:hover { background: rgba(26,8,32,.75); border-color: var(--weiss); }
.hero__pause:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* Zwei Balken für Pause */
.hero__pause-zeichen {
  width: .7rem; height: .85rem;
  border-left: 3px solid var(--weiss);
  border-right: 3px solid var(--weiss);
}
/* Im angehaltenen Zustand ein Dreieck für Abspielen */
.hero__pause.ist-angehalten .hero__pause-zeichen {
  width: 0; height: 0;
  margin-left: .18rem;
  border: 0;
  border-left: .7rem solid var(--weiss);
  border-top: .45rem solid transparent;
  border-bottom: .45rem solid transparent;
}

/* Der Pfeil rutscht nach, wenn der Pausenknopf da ist */
.hero__pause:not([hidden]) + .hero__weiter { margin-left: .75rem; }
.hero__weiter { margin-left: auto; }
.hero__gehalt {
  margin: 0;
  font-size: .9375rem;
  color: var(--gedimmt-dunkel);
  letter-spacing: .01em;
}
.hero__gehalt strong {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gruen);
  letter-spacing: .02em;
  margin-right: .4rem;
}
.hero__weiter {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}
.hero__weiter span {
  width: 9px; height: 9px;
  border-right: 2px solid var(--weiss);
  border-bottom: 2px solid var(--weiss);
  transform: translateY(-2px) rotate(45deg);
  animation: sinken 1.9s var(--weich) infinite;
}
@keyframes sinken {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .55; }
  50%      { transform: translateY( 2px) rotate(45deg); opacity: 1; }
}
@media (max-width: 599px) { .hero__weiter { display: none; } }

/* 5.3b Sammelkarten — Kommunikationslinie von Christoph Keßeler.
   Am Rechner liegen die Karten aufgefächert wie ein Blatt auf der Hand und
   richten sich beim Überfahren auf, mit Neigung und Glanz wie bei einer
   Folienkarte. Am Handy wird daraus ein Wischstreifen. */

.karten-bahn {
  overflow: hidden;
  position: relative;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Lichtkegel hinter dem Blatt: gibt den Karten einen Ort, statt sie im
   Nichts schweben zu lassen. */
.karten-bahn::after {
  content: '';
  position: absolute; left: 50%; bottom: -14%;
  width: min(1100px, 96vw); height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(52% 58% at 50% 46%, rgba(102,34,129,.55), transparent 72%);
  pointer-events: none;
}
.karten-bahn .raum { position: relative; z-index: 1; margin-bottom: clamp(1rem, 2vw, 1.75rem); }
/* Der Satz gehört in eine Zeile, der Standardwert bricht ihn zu früh um */
.karten-bahn .lead { max-width: 68ch; text-wrap: pretty; }

.karten {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.karte-3d {
  flex: 0 0 auto;
  /* Fünf Karten müssen nebeneinander passen, siehe Umbruch unten */
  --kartenbreite: clamp(150px, 17.5vw, 250px);
  width: var(--kartenbreite);
  transition: transform .45s var(--weich), z-index 0s;
  transform-style: preserve-3d;
}

/* Auffächern: jede Karte etwas gedreht, versetzt und leicht abgesenkt */
@media (min-width: 760px) {
  .karten {
    padding-block: clamp(1.25rem, 2.5vw, 2rem) 0;
    flex-wrap: wrap;
  }
  /* Ein grosser Faecher statt zwei getrennter Reihen: Die untere Reihe
     schiebt sich ueber das untere Drittel der oberen. Beim Zeigen hebt
     sich jede Karte nach vorn (z-index im Hover), also bleibt nichts verdeckt. */
  .karten__umbruch ~ .karte-3d { margin-top: calc(var(--kartenbreite) * -.78); }
  .karte-3d {
    /* Nur so viel Überlappung, dass ein Blatt entsteht. Mehr, und die
       linken Karten verlieren ihre Werte hinter der nächsten. */
    margin-inline: calc(var(--kartenbreite) * -0.055);
    /* --platz und --mitte kommen über data-platz und data-reihe, siehe unten.
       Kein abs(): Das kennen ältere Browser nicht und verwerfen dann die ganze
       Drehung. Das Quadrat des Abstands ergibt ohnehin den schöneren Bogen,
       weil die äußeren Karten stärker abfallen als die inneren. */
    --abstand: calc(var(--platz) - var(--mitte, 1.5));
    --dreh: calc(var(--abstand) * 7deg);
    --hoch: calc(var(--abstand) * var(--abstand) * 11px);
    transform: rotate(var(--dreh)) translateY(var(--hoch));
  }
  .karte-3d:hover, .karte-3d:focus-within {
    transform: rotate(0deg) translateY(-26px) scale(1.07);
    z-index: 5;
  }
}

/* Position im Fächer. Kommt bewusst nicht als style-Attribut aus dem HTML:
   Die Content-Security-Policy in der .htaccess (style-src 'self') verwirft
   Inline-Styles, dann fehlten die Werte und alle Karten stünden gerade. */
.karte-3d[data-platz="0"] { --platz: 0; }
.karte-3d[data-platz="1"] { --platz: 1; }
.karte-3d[data-platz="2"] { --platz: 2; }
.karte-3d[data-platz="3"] { --platz: 3; }
.karte-3d[data-platz="4"] { --platz: 4; }
.karte-3d[data-reihe="fuenf"] { --mitte: 2; }
.karte-3d[data-reihe="vier"]  { --mitte: 1.5; }

/* Erzwingt die zweite Fächerreihe; am Handy gibt es nur einen Streifen */
.karten__umbruch { flex: 0 0 100%; height: 0; list-style: none; }
@media (max-width: 759px) { .karten__umbruch { display: none; } }

.karte-3d__flaeche {
  position: relative;
  /* Folgt der freigestellten Rundung der Karten: 6,4 % der Breite */
  border-radius: 6.4% / 4.267%;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  transition: box-shadow .4s var(--weich);
  /* Wird vom Skript gesetzt, wenn der Zeiger über der Karte ist */
  transform: rotateX(var(--kippx, 0deg)) rotateY(var(--kippy, 0deg));
  will-change: transform;
}
.karte-3d:hover .karte-3d__flaeche { box-shadow: 0 26px 54px rgba(0,0,0,.6); }
.karte-3d img { width: 100%; height: auto; display: block; }

/* Folienglanz: ein Lichtstreifen, der dem Zeiger folgt */
.karte-3d__glanz {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--weich);
  background:
    radial-gradient(circle at var(--zx, 50%) var(--zy, 50%),
      rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 26%, transparent 55%),
    linear-gradient(105deg,
      transparent 32%, rgba(168,85,196,.35) 45%,
      rgba(126,182,26,.30) 52%, transparent 66%);
  mix-blend-mode: soft-light;
}
.karte-3d:hover .karte-3d__glanz,
.karte-3d:focus-within .karte-3d__glanz { opacity: 1; }

/* Am Handy: Wischstreifen statt Fächer */
@media (max-width: 759px) {
  .karten {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: .8rem;
    padding: 0 var(--raum-rand) .5rem;
    scroll-padding-inline: var(--raum-rand);
    perspective: none;
  }
  .karte-3d { width: 62%; scroll-snap-align: center; }
  .karte-3d__flaeche { transform: none; }
}

/* --- Einzelne Karte außerhalb des Fächers -------------------------------
   Christoph und Peggy sollen dieselbe Neigung und denselben Folienglanz
   bekommen wie die Sammelkarten. Statt das Verhalten ein zweites Mal zu
   bauen, hängen sie in derselben Mechanik — .karte-3d liefert Skript und
   Glanz, diese Klasse nimmt nur die Fächer-Geometrie wieder heraus.
   Steht bewusst NACH dem Handy-Block, damit die Breite dort gewinnt. */
.karte-3d--solo {
  width: 100%;
  max-width: 26rem;
  margin-inline: 0;
  perspective: 1200px;
  transform: none;
  scroll-snap-align: none;
}
@media (min-width: 760px) {
  /* Kein Aufrichten aus der Fächerlage, nur ein Anheben */
  .karte-3d--solo:hover,
  .karte-3d--solo:focus-within { transform: translateY(-10px) scale(1.025); }
}
.karte-3d--solo .karte-3d__flaeche {
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}
@media (max-width: 759px) {
  /* Ohne Zeiger gibt es keine Neigung, also auch keine Perspektive */
  .karte-3d--solo { perspective: none; }
  .karte-3d--solo .karte-3d__flaeche { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .karte-3d, .karte-3d__flaeche, .karte-3d__glanz { transition: none !important; }
  .karte-3d__flaeche { transform: none !important; }
}

/* 5.4 Belegstreifen — läuft dunkel aus dem Hero weiter, damit der Sog nicht
   abreißt. Der helle Bruch kommt erst bei der Galerie. */
.beleg {
  position: relative;
  background: var(--nacht);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
/* Schwacher violetter Lichtschein oben — Nachhall des Hero-Schleiers */
.beleg::before {
  content: '';
  position: absolute; inset: -60% 0 auto 0; height: 120%;
  background: radial-gradient(58% 46% at 24% 0%, rgba(102,34,129,.5), transparent 70%);
  pointer-events: none;
}
.beleg .raum { position: relative; }

/* --- Kennzahlen --- */

.kennzahlen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }

.kennzahl { position: relative; padding-top: 1.15rem; }
/* Feine Kante statt Kasten — die Zahl soll die Fläche tragen, nicht der Rahmen */
.kennzahl::before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gruen) 0%, var(--gruen) 22%, rgba(168,85,196,.28) 22%);
}
.kennzahl > a { text-decoration: none; display: block; }

.kennzahl__wert {
  display: block;
  font-family: var(--schrift-display);
  font-size: clamp(3.4rem, 9vw, 5.75rem);
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--weiss);
  font-variant-numeric: tabular-nums;   /* springt beim Hochzählen nicht */
}
.kennzahl__einheit {
  display: block; margin-top: .3rem;
  font-family: var(--schrift-display);
  font-size: clamp(.875rem, 1.7vw, 1.0625rem);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gruen);
}
.kennzahl__text {
  display: block; margin-top: .5rem;
  font-size: .875rem; line-height: 1.4;
  color: var(--gedimmt-dunkel);
  max-width: 20ch;
}

/* Die vierte Kachel führt zur Stellenliste. Sie muss als bedienbar zu
   erkennen sein, ohne die Reihe der drei anderen zu sprengen — deshalb
   kein unterstrichener Text, sondern eine ganze Fläche mit Pfeil. */
.kennzahl--handlung { padding-top: 0; }
.kennzahl--handlung::before { display: none; }

.kennzahl--handlung > a {
  display: block;
  padding: 1.15rem .9rem 1.1rem;
  margin-inline: -.9rem;
  position: relative;
  transition: background .3s var(--weich);
}
.kennzahl--handlung > a::before {
  content: '';
  position: absolute; left: .9rem; right: .9rem; top: 0;
  height: 2px;
  background: var(--gruen);
}
.kennzahl--handlung > a:hover { background: rgba(126,182,26,.09); }
.kennzahl--handlung > a:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }

.kennzahl--handlung .kennzahl__wert { color: var(--gruen); }
.kennzahl--handlung .kennzahl__einheit {
  display: flex; align-items: center; gap: .55rem;
  color: var(--weiss);
}
.kennzahl--handlung .kennzahl__text { color: var(--gedimmt-dunkel); }

/* Pfeil in der Einheitenzeile — rückt beim Überfahren nach rechts */
.kennzahl__pfeil {
  position: relative;
  width: 1.5rem; height: .75rem;
  flex: 0 0 auto;
  transition: transform .3s var(--weich);
}
.kennzahl__pfeil::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1.4rem; height: 2px; margin-top: -1px;
  background: var(--gruen);
}
.kennzahl__pfeil::after {
  content: ''; position: absolute; right: .1rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.28rem;
  border-top: 2px solid var(--gruen); border-right: 2px solid var(--gruen);
  transform: rotate(45deg);
}
.kennzahl--handlung > a:hover .kennzahl__pfeil { transform: translateX(.3rem); }

/* --- Auszeichnungen --- */

.auszeichnungen {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(168,85,196,.2);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) { .auszeichnungen { grid-template-columns: 1fr auto auto; } }

.auszeichnungen__vorspann {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.15; text-transform: uppercase;
  color: var(--weiss);
  max-width: 22ch;
}
.auszeichnungen__vorspann span {
  display: block; margin-top: .45rem;
  font-family: var(--schrift-text); font-weight: 300;
  font-size: .9375rem; letter-spacing: 0; text-transform: none;
  color: var(--gedimmt-dunkel);
  max-width: 30ch;
}

.ehrung { display: flex; align-items: center; gap: 1rem; }
/* Helles Podest: das Callwey-Siegel ist dunkle Strichgrafik und würde
   auf dem dunklen Grund sonst verschwinden. */
.ehrung__scheibe {
  flex: 0 0 auto;
  width: clamp(72px, 9vw, 92px);
  height: clamp(72px, 9vw, 92px);
  border-radius: 50%;
  background: var(--kalk);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(168,85,196,.3), 0 10px 28px rgba(0,0,0,.35);
}
.ehrung__scheibe img { width: 84%; height: auto; }
.ehrung__text strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--weiss);
  margin-bottom: .2rem;
}
.ehrung__text > span {
  display: block;
  font-size: .8125rem; line-height: 1.4;
  color: var(--gedimmt-dunkel);
  max-width: 22ch;
}

/* 5.5 Wechsel — jede Zumutung bekommt ihre Antwort direkt daneben */
.wechsel { margin-top: clamp(1rem, 3vw, 2rem); }

.wechsel__kopfzeile { display: none; }
@media (min-width: 880px) {
  .wechsel__kopfzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.15fr);
    gap: 0 1.25rem;
    margin-bottom: .35rem;
  }
}
.wechsel__spaltenkopf {
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .7rem;
}
.wechsel__spaltenkopf--alt {
  color: var(--gedimmt-dunkel);
  border-bottom: 1px solid rgba(188,169,196,.28);
}
.wechsel__spaltenkopf--neu {
  color: var(--gruen);
  border-bottom: 2px solid var(--gruen);
}

.wechsel__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(168,85,196,.14);
}
@media (min-width: 880px) {
  .wechsel__zeile {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.15fr);
    gap: 0 1.25rem;
    align-items: center;
    padding: .9rem 0;
  }
}

/* Zurückgenommen statt durchgestrichen. Die Spaltenüberschrift und der grüne
   Pfeil sagen bereits, welche Seite welche ist; ein Durchstrich macht den
   Text zusätzlich schwer lesbar. Kein opacity, sonst sinkt der Kontrast
   unkontrolliert mit ab. */
.wechsel__alt {
  margin: 0;
  color: var(--zurueckgenommen);
  font-size: 1rem; line-height: 1.45;
  max-width: 40ch;
}

.wechsel__pfeil {
  justify-self: start;
  width: 1.6rem; height: 1rem;
  position: relative;
}
.wechsel__pfeil::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1.5rem; height: 2px; margin-top: -1px;
  background: var(--gruen);
}
.wechsel__pfeil::after {
  content: ''; position: absolute; right: .05rem; top: 50%;
  width: .48rem; height: .48rem; margin-top: -.27rem;
  border-top: 2px solid var(--gruen); border-right: 2px solid var(--gruen);
  transform: rotate(45deg);
}
@media (max-width: 879px) {
  /* Am Handy stapeln die Paare, deshalb zeigt der Pfeil nach unten */
  .wechsel__pfeil { transform: rotate(90deg); margin-left: .3rem; }
}
@media (min-width: 880px) {
  .wechsel__pfeil { justify-self: center; }
}

/* Die Antwort bekommt Gewicht: Kante, leichter Grund, kräftigere Schrift.
   So liest sich jede Zeile als Paar und nicht als Tabelle. */
.wechsel__neu {
  margin: 0;
  color: var(--weiss);
  font-size: 1.0625rem; line-height: 1.45;
  font-weight: 700;
  padding: .7rem .9rem .7rem 1rem;
  border-left: 3px solid var(--gruen);
  background: linear-gradient(90deg, rgba(126,182,26,.10), rgba(126,182,26,0) 78%);
}

/* 5.5b Inhaber — Porträt und Zitat */
.inhaber { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .inhaber { grid-template-columns: 4fr 6fr; } }

/* Die Stele hinter dem Porträt ist entfallen: Seit das Bild in der
   Kartenfassung sitzt, schaute sie nur noch als Streifen hervor und sah
   nach Fehler aus. Die Fassung trägt das Bild jetzt selbst. */
.inhaber__bild { position: relative; }

/* --- Sammelkarte einer Person --------------------------------------------
   Christoph und Peggy stehen seit dem 18.08.2026 mit ihren echten Karten auf
   der Seite. Vorher war die Fassung in CSS nachgebaut und das Porträt saß
   darin; das war ein Notbehelf, solange es die Karten nur für die Baustellen-
   leute gab. Jetzt braucht es keine Nachahmung mehr.
   Die Karte bringt ihren Rahmen im Bild mit, deshalb steht hier fast nichts:
   Neigung, Glanz und Schatten kommen von .karte-3d--solo. */
.sammelkarte { display: block; width: 100%; height: auto; }

.inhaber__zitat { margin: 0; }
.inhaber__zitat blockquote {
  margin: 0 0 1.6rem;
  position: relative;
  font-family: var(--schrift-display);
  font-size: clamp(1.7rem, 4.6vw, 3.15rem);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--weiss);
}
.inhaber__zitat blockquote em { font-style: normal; color: var(--gruen); }
/* Anführungszeichen als gesetztes Zeichen, nicht als Dekoration */
.inhaber__zitat blockquote::before {
  content: '»';
  display: block;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: .7;
  color: var(--violett-hell);
  margin-bottom: .35rem;
}
.inhaber__zitat figcaption { font-size: .9375rem; line-height: 1.55; }
.inhaber__zitat figcaption strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.15rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: .3rem;
}
.inhaber__zitat figcaption span { display: block; color: var(--gedimmt-dunkel); }
.inhaber__jahre { margin-top: .5rem; font-size: .875rem; color: #FFFFFF; }

/* 5.6 Galerie */
.galerie {
  display: grid;
  gap: clamp(.6rem, 1.4vw, 1.25rem);
  align-items: start;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--raum-rand);
}
.galerie__stueck { margin: 0; position: relative; overflow: hidden; }
.galerie__stueck img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 1.1s var(--weich), filter 1.1s var(--weich);
}
.galerie__stueck--stele img   { aspect-ratio: 3 / 4; }
.galerie__stueck--quadrat img { aspect-ratio: 1 / 1; }
.galerie__stueck--panorama img{ aspect-ratio: 21 / 9; }
.galerie__stueck--abschluss img { aspect-ratio: 16 / 7; }
.galerie__stueck:hover img { transform: scale(1.035); }

/* Bildunterschriften stehen auf sehr hellen Fotos — der Verlauf muss tragen */
.galerie__stueck figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 4.5rem 1.25rem 1.15rem;
  background: linear-gradient(180deg,
    rgba(26,8,32,0) 0%, rgba(26,8,32,.55) 45%, rgba(26,8,32,.94) 100%);
  color: #FFFFFF;
  font-size: .875rem;
  line-height: 1.4;
  /* Der Verlauf allein trägt nicht: darunter liegen sehr helle Fotos
     (Kies, Naturstein, Gegenlicht). Der Schatten sichert die Lesbarkeit. */
  text-shadow: 0 1px 3px rgba(12,3,16,.85), 0 0 14px rgba(12,3,16,.6);
}
.galerie__stueck figcaption span {
  display: block;
  font-family: var(--schrift-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8125rem;
  color: var(--weiss);
  margin-bottom: .2rem;
}

@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(12, 1fr); }
  .galerie__stueck            { grid-column: span 6; }
  .galerie__stueck--breit     { grid-column: span 7; }
  .galerie__stueck--stele     { grid-column: span 5; }
  .galerie__stueck--quadrat   { grid-column: span 7; }
  .galerie__stueck--panorama  { grid-column: 1 / -1; }
  .galerie__stueck--abschluss { grid-column: 1 / -1; }
}
/* Am Handy nicht acht Bilder untereinander stapeln. Gestapelt waren das
   allein 3.000 px Scrollweg, bei 82 % Mobilzugriffen zu viel. Stattdessen
   ein Wischstreifen; das angeschnittene nächste Bild zeigt, dass es weitergeht. */
@media (max-width: 899px) {
  .galerie {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--raum-rand);
    padding-bottom: .5rem;
    gap: .7rem;
  }
  .galerie__stueck {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .galerie__stueck img,
  .galerie__stueck--stele img,
  .galerie__stueck--quadrat img,
  .galerie__stueck--panorama img,
  .galerie__stueck--abschluss img { aspect-ratio: 4 / 5; }
  .galerie:focus-visible { outline: 3px solid var(--violett); outline-offset: 4px; }
}

/* 5.7 Stellen */
.stellen { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(168,85,196,.24); }
.stelle { border-bottom: 1px solid rgba(168,85,196,.24); }

.stelle details { position: relative; }
.stelle summary {
  list-style: none; cursor: pointer;
  display: block; position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem) 3.25rem clamp(1.5rem, 3vw, 2.25rem) 0;
  overflow: hidden;
}
.stelle summary::-webkit-details-marker { display: none; }

/* Lichtbahn — die Stele fährt beim Überfahren durch die Zeile */
.stelle summary::before {
  content: '';
  position: absolute; inset: 0 auto 0 -18%;
  width: 14%;
  background: linear-gradient(90deg, transparent, var(--violett-glas), transparent);
  opacity: 0;
  transition: none;
  pointer-events: none;
}
.stelle summary:hover::before {
  opacity: 1;
  animation: lichtbahn 1.1s var(--weich);
}
@keyframes lichtbahn {
  from { transform: translateX(0); }
  to   { transform: translateX(940%); }
}

.stelle__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.5rem;
  margin-bottom: .4rem;
}
.stelle__titel {
  font-family: var(--schrift-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 3.2vw, 2.05rem);
  line-height: 1.02;
  color: var(--weiss);
  flex: 1 1 16ch;
}
.stelle__mwd { color: var(--gedimmt-dunkel); font-size: .62em; letter-spacing: .04em; }
/* Kennwertplakette wie das „KP 92" oben rechts auf den Sammelkarten.
   Gleiche Rolle: die eine Zahl, nach der man die Karte einordnet. */
.stelle__zahl {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .3rem .75rem .34rem .65rem;
  border: 1px solid rgba(126,182,26,.5);
  background: linear-gradient(100deg, rgba(126,182,26,.18), rgba(126,182,26,.05));
  font-family: var(--schrift-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: .03em;
  color: var(--gruen);
  white-space: nowrap;
}
.stelle__zahl::before {
  content: 'Gehalt';
  font-size: .68em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--weiss);
}
.stelle--ausbildung .stelle__zahl {
  color: var(--violett-text);
  border-color: rgba(168,85,196,.5);
  background: linear-gradient(100deg, rgba(168,85,196,.18), rgba(168,85,196,.05));
}
/* Bei der Ausbildung steht dort kein Betrag, also auch keine Einheit */
.stelle--ausbildung .stelle__zahl::before { content: none; }
/* Die Eckdatenzeile stand in Univers 45 Light bei 15 px auf fast schwarzem
   Grund. Die Farbe war schon reines Weiß — aber so dünne Striche in dieser
   Größe zerfallen beim Rastern zu Grau, und genau so sah es auch aus.
   Als Versalzeile im Schmalschnitt steht dieselbe Information fest auf dem
   Grund und wird beim Verkleinern nicht dünner. */
.stelle__meta {
  display: block;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--weiss);
}

.stelle__pfeil {
  position: absolute; right: .25rem; top: 50%;
  width: 1.75rem; height: 1.75rem;
  margin-top: -.875rem;
  display: grid; place-items: center;
}
.stelle__pfeil::before,
.stelle__pfeil::after {
  content: ''; position: absolute;
  background: var(--violett-hell);
  transition: transform .4s var(--weich), opacity .3s var(--weich);
}
.stelle__pfeil::before { width: 1.1rem; height: 2px; }
.stelle__pfeil::after  { width: 2px; height: 1.1rem; }
.stelle details[open] .stelle__pfeil::after { transform: scaleY(0); opacity: 0; }

/* Die aufgeklappte Stelle ist die Rückseite der Karte: eigene Fassung,
   heller Grat oben, alles Weitere darin. Ohne diesen Rahmen lag der Text
   frei auf der Bahn und die Stelle sah aus wie ein aufgeklappter Absatz,
   nicht wie ein eigenes Blatt. */
.stelle__koerper {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.15rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(168,85,196,.28);
  border-top: 3px solid var(--violett-hell);
  background:
    linear-gradient(165deg, rgba(168,85,196,.09) 0%, rgba(168,85,196,0) 55%),
    var(--nacht);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  animation: aufklappen .5s var(--weich);
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Merkmale: die harten Eckdaten vorweg, bevor jemand Fließtext liest.
   Machart der Kartenplaketten — gefüllt statt nur umrandet, damit sie auf
   dem dunklen Grund tragen. */
.merkmale {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  margin: 0 0 1.75rem; padding: 0;
}
.merkmale li {
  font-family: var(--schrift-display);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--weiss);
  border: 1px solid rgba(168,85,196,.45);
  background: linear-gradient(100deg, rgba(168,85,196,.20), rgba(168,85,196,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  padding: .42rem .8rem .46rem;
}
/* Die erste Plakette trägt die Vertragsart und ist die einzige grüne */
.merkmale li:first-child {
  border-color: rgba(126,182,26,.55);
  background: linear-gradient(100deg, rgba(126,182,26,.22), rgba(126,182,26,.06));
  color: var(--gruen);
}

.stelle__spalten { display: grid; gap: 1.75rem; max-width: 62rem; }
@media (min-width: 760px) { .stelle__spalten { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

/* Abschluss der Stelle: Geld links, Handlung rechts. Die Fußleiste der
   Karte — dieselbe Machart wie die Wertleiste unten auf den Sammelkarten. */
.stelle__fuss {
  margin-top: 2rem;
  padding: 1.35rem clamp(1rem, 2.5vw, 1.75rem);
  background: linear-gradient(100deg, rgba(126,182,26,.14), rgba(126,182,26,.04));
  border: 1px solid rgba(126,182,26,.35);
  border-left: 3px solid var(--gruen);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  display: grid; gap: 1.25rem; align-items: center;
  max-width: 62rem;
}
@media (min-width: 620px) {
  .stelle__fuss { grid-template-columns: 1fr auto; }
}
.stelle__lohn { margin: 0; }
.stelle__lohn span {
  display: block;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--weiss);
}
.stelle__lohn strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.1;
  color: var(--gruen);
  margin: .15rem 0;
}

/* Die Spaltenüberschriften bekommen dasselbe schräge Namensschild wie
   die Bereichsmarken der Seite. Damit trägt die aufgeklappte Stelle
   dieselbe Handschrift wie der Rest. */
.stelle__block h3 {
  position: relative; isolation: isolate;
  display: inline-block;
  margin: 0 0 1rem;
  padding: .34rem .95rem .38rem .85rem;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--weiss);
}
.stelle__block h3::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--violett) 0%, #7C2D99 100%);
  transform: skewX(-13deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.stelle__block ul { list-style: none; margin: 0; padding: 0; }
/* 17 px statt 16 und etwas mehr Zeilenabstand: Univers 45 Light braucht
   auf dunklem Grund die Größe, sonst liest es sich grau. */
.stelle__block li {
  position: relative;
  padding: .38rem 0 .38rem 1.5rem;
  color: var(--weiss);
  font-size: 1.0625rem; line-height: 1.6;
}
/* Kein Spiegelstrich mehr, sondern die Ecke der Karte im Kleinen */
.stelle__block li::before {
  content: ''; position: absolute; left: .1rem; top: .95em;
  width: .42rem; height: .42rem;
  background: var(--gruen);
  transform: rotate(45deg);
}

.stellen__hinweis {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: 1rem;
  color: var(--gedimmt-dunkel);
  max-width: 52ch;
}
.stellen__hinweis a { color: var(--gruen); text-underline-offset: .25em; }

/* 5.8 Leistungen */
.leistungen { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 860px) { .leistungen { grid-template-columns: repeat(3, 1fr); } }

/* Farbwelten der Sammelkarten: Gold, Blau, Grün. Die Zuordnung ist nicht
   zufällig — Geld trägt Gold, Familie und Gesundheit das ruhige Blau,
   Handwerk das Marken-Grün. Alle drei Töne halten auf --kalk über 5:1. */
.leistung-gruppe { --welt: var(--violett); }
.leistung-gruppe[data-welt="gold"]  { --welt: #7A5A0C; }
.leistung-gruppe[data-welt="blau"]  { --welt: #17415F; }
.leistung-gruppe[data-welt="gruen"] { --welt: #47690B; }

.leistung-gruppe__kopf {
  margin: 0 0 1.5rem;
  font-family: var(--schrift-display);
  font-size: 1.0625rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--welt);
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--welt);
}

/* Kein Trennstrich mehr zwischen den Punkten: die Zeichen geben den Takt vor.
   Zusätzliche Linien machten daraus wieder eine Tabelle. */
.leistung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }

.leistung {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .95rem;
  align-items: start;
  font-size: 1rem; line-height: 1.5;
}
.leistung strong { font-weight: 700; color: var(--nacht); }

.leistung__zeichen {
  width: 2.5rem; height: 2.5rem;
  padding: .5rem;
  flex: 0 0 auto;
  color: var(--welt);
  border: 1px solid color-mix(in srgb, var(--welt) 32%, transparent);
  background: color-mix(in srgb, var(--welt) 7%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.zeichenvorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 5.8b Film — Zwei-Klick-Lösung für die Vimeo-Videos.
   Vor dem Klick wird nichts von Vimeo geladen, deshalb bleibt die Seite
   bis dahin frei von Anfragen an Dritte. */

.film { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

.film__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--nacht-3);
  overflow: hidden;
  border: 1px solid rgba(168,85,196,.25);
}
.film__bild {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--weich), filter .5s var(--weich);
}
.film__rahmen:hover .film__bild { transform: scale(1.03); filter: brightness(.9); }

/* Die ganze Fläche ist das Ziel, die sichtbare Steuerung sitzt aber unten
   links. Mittig läge sie den Leuten im Video direkt im Gesicht. */
.film__start {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  width: 100%;
  padding: clamp(.9rem, 2vw, 1.35rem);
  background: linear-gradient(180deg, rgba(26,8,32,0) 42%, rgba(26,8,32,.72) 100%);
  border: 0; cursor: pointer;
  color: var(--weiss);
  transition: background .35s var(--weich);
}
.film__start:hover { background: linear-gradient(180deg, rgba(26,8,32,0) 32%, rgba(26,8,32,.82) 100%); }
.film__start:focus-visible { outline: 3px solid var(--gruen); outline-offset: -5px; }

.film__knopf {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .15em; text-transform: uppercase;
}

/* Abspielzeichen: Dreieck im Kreis, in der Signalfarbe */
.film__zeichen {
  flex: 0 0 auto;
  width: clamp(2.75rem, 4.5vw, 3.4rem);
  height: clamp(2.75rem, 4.5vw, 3.4rem);
  border-radius: 50%;
  background: var(--gruen);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: transform .3s var(--weich);
}
.film__zeichen::before {
  content: '';
  width: 0; height: 0;
  margin-left: .22em;
  border-left: .8rem solid var(--nacht);
  border-top: .52rem solid transparent;
  border-bottom: .52rem solid transparent;
}
.film__start:hover .film__zeichen { transform: scale(1.09); }

.film__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

.film figcaption {
  margin-top: 1.1rem;
  font-size: .9375rem; line-height: 1.5;
  color: var(--gedimmt-dunkel);
}
.film figcaption strong { display: block; color: var(--weiss); font-size: 1.0625rem; }
.film__hinweis { display: block; margin-top: .5rem; font-size: .8125rem; opacity: .85; }

/* Die Frage gehört ins Bild, nicht darunter. Sie ist der Aufhänger des
   ganzen Abschnitts und trägt die Fläche.

   Sie bekommt einen eigenen Grund statt nur einen Verlauf: Das Motiv hat
   oben links eine fast weiße Hauswand, dort verschwand weiße Schrift.
   Eine Platte trägt unabhängig davon, was im Bild liegt — auch wenn das
   Motiv später einmal getauscht wird. */
.film__titel {
  position: absolute;
  /* Über den Abspielknopf legen: der liegt mit inset:0 über der ganzen
     Fläche und steht im Markup nach dem Titel. Ohne z-index legt sich
     sein dunkler Verlauf über die Überschrift und färbt das Weiß grau. */
  z-index: 2;
  left: clamp(1rem, 2.5vw, 2rem);
  top: clamp(1rem, 2.5vw, 2rem);
  width: fit-content;
  max-width: min(14ch, calc(100% - 4rem));
  margin: 0;
  padding: .5rem .95rem .6rem 1rem;
  background: rgba(20, 6, 25, .88);
  backdrop-filter: blur(7px);
  border-left: 4px solid var(--gruen);
  font-family: var(--schrift-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--weiss);
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .film__titel { background: rgba(20, 6, 25, .94); }
}

/* Das Hauptvideo trägt einen eigenen Abschnitt und läuft über die volle
   Breite. Als kleiner Kasten in einer halben Spalte wirkte es abgestellt. */
.film--gross { margin-top: clamp(3rem, 6vw, 5rem); }
.film--gross .film__rahmen { border-color: rgba(168,85,196,.35); }
/* Oben zusätzlich abdunkeln, damit die Frage auf jedem Motiv trägt */
.film--gross .film__start {
  background:
    linear-gradient(180deg, rgba(26,8,32,.78) 0%, rgba(26,8,32,.30) 30%,
                            rgba(26,8,32,0) 52%, rgba(26,8,32,.74) 100%),
    linear-gradient(100deg, rgba(26,8,32,.55) 0%, rgba(26,8,32,0) 55%);
}
.film--gross .film__start:hover {
  background:
    linear-gradient(180deg, rgba(26,8,32,.72) 0%, rgba(26,8,32,.24) 28%,
                            rgba(26,8,32,0) 50%, rgba(26,8,32,.84) 100%),
    linear-gradient(100deg, rgba(26,8,32,.5) 0%, rgba(26,8,32,0) 55%);
}
@media (min-width: 900px) {
  .film--gross .film__rahmen { aspect-ratio: 21 / 9; }
  .film--gross .film__rahmen.ist-video { aspect-ratio: 16 / 9; }
}
.film--gross figcaption {
  display: grid; gap: .3rem;
  border-top: 1px solid rgba(168,85,196,.22);
  padding-top: 1.1rem;
}
.film--gross figcaption strong {
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  letter-spacing: .02em;
}

/* 5.8c Stimmen aus dem Team */

.stimmen { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 860px) { .stimmen { grid-template-columns: repeat(3, 1fr); } }

.stimme { margin: 0; display: flex; flex-direction: column; }
.stimme blockquote {
  margin: 0 0 1rem;
  flex: 1;
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--hell-auf-dunkel);
  position: relative;
  padding-left: 1.15rem;
  border-left: 2px solid var(--gruen);
}
.stimme blockquote::before { content: '„'; }
.stimme blockquote::after  { content: '“'; }
.stimme figcaption {
  font-size: .9375rem;
  padding-left: 1.15rem;
}
.stimme figcaption strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.0625rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--weiss);
}
.stimme figcaption span { color: var(--violett-text); }

/* Videos getrennt von den Zitaten. In den Filmen sprechen nicht dieselben
   Personen, denen die Zitate zugeordnet sind — eine gemeinsame Kachel
   hätte eine Verbindung behauptet, die es nicht gibt. */
.einblicke {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(168,85,196,.22);
}
.einblicke__kopf {
  margin: 0 0 1.5rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--weiss);
}
.einblicke__reihe { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); }
@media (min-width: 760px) { .einblicke__reihe { grid-template-columns: repeat(3, 1fr); } }
.einblick .film__rahmen { border-color: rgba(168,85,196,.28); }

/* Der Hinweis gehört zu allen drei Videos, deshalb läuft er über die
   volle Breite und sitzt auf einer Trennlinie statt in einer Spalte. */
.stimmen__hinweis {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(168,85,196,.22);
  font-size: .875rem;
  color: var(--gedimmt-dunkel);
  text-align: center;
}

/* 5.9 Team */
.team { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .team { grid-template-columns: 5fr 6fr; } }
/* Kein erzwungenes Seitenverhältnis: Auf einem Gruppenfoto würde ein
   Zuschnitt immer jemanden am Rand abschneiden. Das Bild behält seine
   eigenen Proportionen, egal welches Motiv später eingesetzt wird. */
.team__bild img { width: 100%; height: auto; }
.team__text p { color: var(--gedimmt-dunkel); margin: 0 0 1.1rem; max-width: 46ch; }
.team__text p:last-child { color: var(--hell-auf-dunkel); }

.handwerk {
  display: grid; gap: clamp(.6rem, 1.4vw, 1.25rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.handwerk figure { margin: 0; position: relative; overflow: hidden; }
.handwerk img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.handwerk figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(26,8,32,.9));
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--weiss);
}
@media (max-width: 620px) {
  .handwerk { grid-template-columns: 1fr; }
  .handwerk img { aspect-ratio: 16 / 9; }
}

/* 5.10 Ablauf */
.ablauf {
  list-style: none; margin: 0 0 clamp(3.5rem, 7vw, 6rem); padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  counter-reset: schritt;
}
@media (min-width: 820px) { .ablauf { grid-template-columns: repeat(3, 1fr); } }

.schritt { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--violett); }
.schritt__nr {
  display: block;
  font-family: var(--schrift-display);
  font-size: 2.75rem; line-height: 1;
  color: var(--violett);
  opacity: .32;
  margin-bottom: .5rem;
}
.schritt h3 {
  font-family: var(--schrift-display);
  font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nacht);
  margin: 0 0 .6rem;
}
.schritt p { margin: 0; font-size: 1rem; max-width: 34ch; }
.schritt__link {
  display: inline-block; margin-top: .9rem;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--gruen-text);
  text-decoration: none;
  border-bottom: 2px solid var(--gruen);
  padding-bottom: .2rem;
}
.schritt__link:hover { color: var(--violett); border-bottom-color: var(--violett); }
/* Der erste Schritt ist der, den wir wollen — der bekommt die Signalfarbe */
.schritt:first-child { border-top-color: var(--gruen); }
.schritt:first-child .schritt__nr { color: var(--gruen); opacity: .45; }

/* 5.11 FAQ */
.faq__kopf {
  font-family: var(--schrift-display);
  font-size: 1.0625rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--violett);
  margin: 0 0 1.25rem;
}
.faq { max-width: 46rem; }
.frage { border-top: 1px solid rgba(74,64,72,.18); }
.frage:last-of-type { border-bottom: 1px solid rgba(74,64,72,.18); }
.frage summary {
  list-style: none; cursor: pointer;
  position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--nacht);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.45rem;
  border-right: 2px solid var(--violett);
  border-bottom: 2px solid var(--violett);
  transform: rotate(45deg);
  transition: transform .35s var(--weich);
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.frage > div { padding: 0 2.75rem 1.35rem 0; animation: aufklappen .45s var(--weich); }
.frage p { margin: 0; max-width: 56ch; }

/* 5.12 Kontakt */
/* Der Kontaktbereich ist die Stelle, an der jemand anrufen soll. Überall
   sonst schauen Menschen von der Seite, ausgerechnet hier fehlte ein Gesicht. */
.kontakt__kopf { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .kontakt__kopf { grid-template-columns: 1.5fr 1fr; } }

/* Peggys Karte trägt ihren Namen im Bild. Trotzdem steht er darunter noch
   einmal als echter Text — zusammen mit den Zeiten, zu denen sie rangeht.
   Wer wissen will, wann jemand ans Telefon geht, darf das nicht aus einer
   Grafik lesen müssen. */
.kontakt__person { margin: 0; max-width: 21rem; justify-self: start; }
.kontakt__person__text {
  display: grid; gap: .2rem;
  margin-top: 1.1rem;
  padding-left: 1.15rem;
  border-left: 4px solid var(--gruen);
}
.kontakt__rolle {
  font-family: var(--schrift-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gruen);
}
.kontakt__person strong {
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--weiss);
  line-height: 1.05;
}
.kontakt__zeit { color: var(--weiss); font-size: .875rem; margin-top: .15rem; }

/* Der bezahlte Probetag ist das stärkste Versprechen im ganzen Angebot.
   Er stand bisher als dritter von drei Ablaufschritten begraben. */
.zitatblock {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.15rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(126,182,26,.4);
  border-left: 4px solid var(--gruen);
  background: rgba(126,182,26,.08);
  max-width: 62rem;
  color: var(--hell-auf-dunkel);
  font-size: 1rem; line-height: 1.55;
}
.zitatblock__marke {
  display: block;
  font-family: var(--schrift-display);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: .35rem;
}
.zitatblock strong {
  font-family: var(--schrift-display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: .02em;
  color: var(--weiss);
  display: block;
  margin-bottom: .35rem;
}

.hero__zusatzfakt {
  margin: 0;
  font-size: .9375rem;
  color: var(--gedimmt-dunkel);
}
.hero__zusatzfakt strong {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--weiss);
  letter-spacing: .02em;
  margin-right: .4rem;
}
@media (max-width: 719px) { .hero__zusatzfakt { display: none; } }

.kontakt__oder {
  display: flex; align-items: center; gap: 1rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--gedimmt-dunkel);
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  max-width: 34rem;
}
.kontakt__oder::before, .kontakt__oder::after {
  content: ''; flex: 1; height: 1px; background: rgba(168,85,196,.3);
}

.kontakt-wege {
  display: grid; gap: 1px;
  background: rgba(168,85,196,.24);
  border: 1px solid rgba(168,85,196,.24);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Anzahl der Kacheln passt sich an: aktuell zwei, mit WhatsApp wieder drei */
@media (min-width: 820px) { .kontakt-wege { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

.weg {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--nacht);
  text-decoration: none;
  transition: background .35s var(--weich);
}
.weg:hover { background: var(--nacht-3); }
.weg__art {
  display: block;
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violett-text);
  margin-bottom: .65rem;
}
.weg__wert {
  display: block;
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  color: var(--weiss);
  line-height: 1.1;
  margin-bottom: .45rem;
}
.weg--haupt .weg__wert { color: var(--gruen); }
.weg__zusatz { display: block; font-size: .875rem; color: var(--gedimmt-dunkel); }

.kontakt__adresse {
  margin: 0;
  font-size: .9375rem;
  color: var(--gedimmt-dunkel);
  line-height: 1.7;
}

/* 5.13 Fuß */
.fuss { background: var(--nacht); color: var(--gedimmt-dunkel); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(168,85,196,.2); }
.fuss__innen { display: grid; gap: 1.75rem; }
@media (min-width: 780px) { .fuss__innen { grid-template-columns: auto 1fr; align-items: center; } }
.fuss__logo { width: 150px; height: auto; }
.fuss__nav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; justify-content: flex-start; }
@media (min-width: 780px) { .fuss__nav ul { justify-content: flex-end; } }
.fuss__nav a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;          /* eigenständige Links, kein Fließtext: Tippziel */
  font-family: var(--schrift-display);
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gedimmt-dunkel); text-decoration: none;
}
.fuss__nav a:hover { color: var(--weiss); }
.fuss__hinweis { grid-column: 1 / -1; margin: 0; font-size: .8125rem; opacity: .7; max-width: 62ch; }

/* 5.14 Mobile Kontaktleiste */
.mobilleiste {
  position: fixed; inset: auto 0 0 0;
  z-index: 45;
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 1px;
  background: rgba(168,85,196,.3);
  border-top: 1px solid rgba(168,85,196,.3);
  transform: translateY(100%);
  transition: transform .4s var(--weich);
}
.mobilleiste.ist-sichtbar { transform: translateY(0); }
.mobilleiste__knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.5rem;
  background: var(--nacht);
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.mobilleiste__knopf--haupt { background: var(--gruen); color: var(--nacht); }
@media (min-width: 920px) { .mobilleiste { display: none; } }
@media (max-width: 919px) { body { padding-bottom: 3.5rem; } }

/* 5.15 Einblendungen */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--tempo) var(--weich), transform var(--tempo) var(--weich);
}
[data-anim].ist-sichtbar { opacity: 1; transform: none; }
[data-anim-gruppe] > *:nth-child(2)  { transition-delay: .09s; }
[data-anim-gruppe] > *:nth-child(3)  { transition-delay: .18s; }
[data-anim-gruppe] > *:nth-child(4)  { transition-delay: .27s; }
[data-anim-gruppe] > *:nth-child(5)  { transition-delay: .36s; }
[data-anim-gruppe] > *:nth-child(6)  { transition-delay: .45s; }

/* --- Rücksicht ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
  .hero__titel .zeile > span { transform: none; }
  .hero__lead, .hero__aktionen { opacity: 1; }
  .hero__video { display: none; }
  .hero__medium {
    background-image: url('../video/hero-poster.jpg');
    background-size: cover; background-position: center;
  }
}

@media print {
  .stele, .kopf, .mobilleiste, .hero__medium, .hero__weiter { display: none !important; }
  body { background: #fff; color: #000; }
  .bahn { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  .titel, .stelle__titel, .hero__titel { color: #000 !important; }
  .stelle__koerper { display: block !important; }
  .stelle details { }
}