/* ============================================================
   Bühne — Bild ungeteilt, Textkarte schwebt darüber

   Kein Zweispalter mit Mittelkante: das Foto läuft ungeschnitten
   durch, die Karte liegt darauf und überlappt die untere Kante.
   Das erzeugt Tiefe statt Baukasten und garantiert Lesbarkeit,
   weil der Text auf echter Fläche steht.
   ============================================================ */

.tafeln{scroll-snap-type:y proximity}

.tafel{position:relative;scroll-snap-align:start;background:#fff;
  padding-bottom:clamp(40px,5vw,72px)}

/* --- das Bild, ungeschnitten --- */
.tafel-bild{position:relative;overflow:hidden;
  height:clamp(340px,54svh,540px);
  border-radius:0 0 clamp(20px,3vw,40px) clamp(20px,3vw,40px)}
.tafel-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* nur ein Hauch Tiefe an der unteren Kante, damit die Karte nicht klebt */
.tafel-bild::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,20,.28) 0%, rgba(8,8,20,0) 32%)}

/* --- die Karte --- */
.tafel-sockel{position:relative;z-index:3;
  width:min(560px,calc(100% - clamp(32px,7vw,120px)));
  margin:clamp(-190px,-14vw,-130px) 0 0 clamp(24px,6vw,88px);
  background:#fff;border-radius:clamp(18px,2.2vw,26px);
  padding:clamp(26px,2.8vw,38px) clamp(26px,2.8vw,38px) clamp(26px,2.8vw,36px);
  box-shadow:0 2px 6px rgba(22,22,63,.06), 0 26px 60px -12px rgba(22,22,63,.26)}
.tafel--dunkel .tafel-sockel{background:var(--navy);color:#fff;
  box-shadow:0 2px 6px rgba(8,8,20,.16), 0 26px 60px -12px rgba(8,8,20,.4)}
@media (max-width:720px){
  .tafel-sockel{width:calc(100% - 32px);margin:-56px auto 0}
}

.tafel-marke{display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);margin-bottom:clamp(14px,1.8vw,20px)}
.tafel-marke::before{content:'';width:20px;height:1.5px;background:currentColor}
.tafel--dunkel .tafel-marke{color:rgba(255,255,255,.66)}

.tafel-kopf h1,.tafel-kopf h2{margin:0;font-weight:600;
  font-size:clamp(32px,3.2vw,46px);line-height:1.04;letter-spacing:-.038em;
  color:var(--tinte);text-wrap:balance}
.tafel--dunkel .tafel-kopf h1,.tafel--dunkel .tafel-kopf h2{color:#fff}
.tafel-kopf p{margin-top:clamp(14px,1.6vw,20px);max-width:40ch;
  font-size:clamp(16px,1.15vw,17.5px);font-weight:400;line-height:1.6;
  letter-spacing:-.008em;color:var(--text)}
.tafel--dunkel .tafel-kopf p{color:#D5D4E2}

.tafel-fuss{margin-top:clamp(22px,2.6vw,30px)}
.tafel-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.tafel-knoepfe a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--s);font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  text-decoration:none;padding:13px 26px;border-radius:999px;
  transition:background-color 200ms ease-out, color 200ms ease-out,
             border-color 200ms ease-out, transform 120ms ease-out}
.tafel-knoepfe a:active{transform:scale(.97)}
.tafel-k1{background:var(--rot);color:#fff}
.tafel-k1:hover{background:var(--rot-hell);color:#fff}
.tafel-k2{background:transparent;color:var(--tinte);border:1.5px solid var(--linie)}
.tafel-k2:hover{border-color:var(--tinte)}
.tafel--dunkel .tafel-k2{color:#fff;border-color:rgba(255,255,255,.34)}
.tafel--dunkel .tafel-k2:hover{background:#fff;color:var(--navy);border-color:#fff}

/* --- Auftritt --- */
.js .tafel-sockel{opacity:0;transform:translateY(22px)}
.js .tafel.da .tafel-sockel{opacity:1;transform:none;
  transition:opacity 700ms cubic-bezier(.16,1,.3,1) 180ms,
             transform 700ms cubic-bezier(.16,1,.3,1) 180ms}
.js .tafel-marke,.js .tafel-kopf h1,.js .tafel-kopf h2,
.js .tafel-kopf p,.js .tafel-fuss{opacity:0;transform:translateY(10px)}
.js .tafel.da .tafel-marke,.js .tafel.da .tafel-kopf h1,.js .tafel.da .tafel-kopf h2,
.js .tafel.da .tafel-kopf p,.js .tafel.da .tafel-fuss{opacity:1;transform:none;
  transition:opacity 560ms cubic-bezier(.16,1,.3,1), transform 560ms cubic-bezier(.16,1,.3,1)}
.js .tafel.da .tafel-marke{transition-delay:300ms}
.js .tafel.da .tafel-kopf h1,.js .tafel.da .tafel-kopf h2{transition-delay:360ms}
.js .tafel.da .tafel-kopf p{transition-delay:430ms}
.js .tafel.da .tafel-fuss{transition-delay:500ms}
.js .tafel-bild img{transform:scale(1.06);opacity:0}
.js .tafel.da .tafel-bild img{transform:none;opacity:1;
  transition:transform 1400ms cubic-bezier(.16,1,.3,1), opacity 800ms ease-out}

body.tesla .kopf{position:sticky}
body.tesla .dienst{background:#101033}
body.tesla .haupt{background:#fff}
body.tesla .mp > a,body.tesla .ruf{color:#16163F;text-shadow:none}
body.tesla .logo img{filter:none}
body.tesla .burger span{background:#16163F}
body.tesla .kopf::after{opacity:0}

@media (prefers-reduced-motion:reduce){
  .js .tafel-sockel,.js .tafel-marke,.js .tafel-kopf h1,.js .tafel-kopf h2,
  .js .tafel-kopf p,.js .tafel-fuss,.js .tafel-bild img{
    opacity:1!important;transform:none!important;transition:none!important}
}

.tafel-pfeil{position:absolute;left:50%;bottom:16px;z-index:3;transform:translateX(-50%);
  width:26px;height:26px;border:0;background:none;cursor:pointer;padding:0;color:inherit;opacity:.75}
.tafel-pfeil svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;
  animation:tippen 2.4s var(--aus) infinite}
@keyframes tippen{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:620px){.tafel-pfeil{display:none}}

@media (prefers-reduced-motion:reduce){
  .tafel-pfeil svg{animation:none}
  .tafel-knoepfe a:active{transform:none}
}
/* Bildtafel: höherer Rahmen, Ausschnitt zeigt das Fahrzeug statt Pflaster */
/* Die Fotos sind 16:9. Bekommt der Rahmen dasselbe Verhältnis, wird
   nichts abgeschnitten — man sieht den Umbau vollständig, auf jedem
   Bildschirm. Nur sehr breite Monitore begrenzen wir in der Höhe. */
/* Die Breite bestimmt die Höhe, nicht umgekehrt. Eine Höhenbegrenzung
   zusammen mit einem festen Seitenverhältnis lässt den Rahmen schmaler
   werden — dann steht das Bild nicht mehr über die ganze Breite. */
.tafel-bild{width:100%;aspect-ratio:16/9;height:auto;max-height:none}
.tafel-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Auf sehr hohen Fenstern bleibt es beim Format, der Inhalt rückt nach */
/* Sehr breite Monitore: Der Rahmen wird flacher, damit die Tafel nicht
   das ganze Fenster füllt. Das Bild wird dabei nicht angeschnitten,
   sondern vollständig gezeigt — die Ränder füllt die Hausfarbe. */
@media (min-width:1800px){
  .tafel-bild{aspect-ratio:21/9;background:#101033}
  .tafel-bild img{object-fit:contain!important}
}

/* ============================================================
   Bildtafel auf dem Rechner: Textfeld im Bild

   Vorher stand die Karte unter dem Bild. Auf breiten Monitoren wurde das
   Bild dadurch höher als der Bildschirm — man sah ein Foto und musste
   scrollen, um zu erfahren, worum es geht. Jetzt liegt der Text im Bild,
   so wie auf dem Handy. Die halbdurchsichtige Fläche sorgt dafür, dass
   der Kontrast unabhängig vom Bildinhalt gleich bleibt.
   ============================================================ */
@media (min-width:1001px){
  .tafel{position:relative}
  /* Höhe über die Breite berechnet (16:9), aber nie höher als das Fenster
     abzüglich Kopfbereich. Ein festes Seitenverhältnis mit Höhenbegrenzung
     würde stattdessen die Breite schrumpfen lassen. */
  .tafel-bild{width:100%;aspect-ratio:auto;
    height:min(56.25vw, calc(100svh - 150px));min-height:min(56.25vw,470px)}
  .tafel-bild img{object-fit:cover!important;object-position:50% 46%}

  /* Senkrecht mittig über automatische Außenabstände statt über eine
     Verschiebung — die Einblend-Animation nutzt transform selbst. */
  .tafel-sockel{position:absolute;left:0;top:0;bottom:0;z-index:2;
    height:max-content;margin-block:auto;
    display:flex;flex-direction:column;align-items:flex-start;
    margin-inline:clamp(28px,4vw,72px) 0;max-width:46ch;
    padding:clamp(34px,3.4vw,48px);
    background:rgba(16,16,51,.74);backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    border:1px solid rgba(255,255,255,.14);border-radius:22px;
    box-shadow:0 26px 60px -24px rgba(8,8,20,.6)}
  .tafel-sockel > *{position:static;margin:0;max-width:40ch}
  .tafel-marke{color:#FF9FA6;margin-bottom:14px}
  .tafel-kopf h1{color:#fff}
  .tafel-kopf p{color:#E9E8F2;margin-top:16px}
  .tafel-fuss{margin-top:30px;border:0;padding:0}
  .tafel-knoepfe{display:flex;flex-wrap:wrap;gap:14px}
  .tafel-k2{color:#fff;border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.08)}
  .tafel-k2:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
  /* Ohne Weichzeichner etwas deckender, damit es lesbar bleibt */
  @supports not (backdrop-filter:blur(7px)){
    .tafel-sockel{background:rgba(16,16,51,.88)}
  }
}
/* Flache Fenster (etwa Laptops mit 700 Pixel Höhe): Die Karte wird
   kompakter, damit sie vollständig ins Bild passt. */
@media (min-width:1001px) and (max-height:800px){
  .tafel-bild{min-height:min(56.25vw,540px)}
  .tafel-sockel{padding:26px 30px}
  .tafel-kopf h1{font-size:clamp(28px,3.1vw,42px)}
  .tafel-kopf p{margin-top:12px;font-size:15.5px}
  .tafel-fuss{margin-top:20px}
  .tafel-marke{margin-bottom:10px}
}