/* DAS KARUSSELL DER STARTSEITE (14.10.2026, nach small-getcasa….mp4 des Wirts) — unter der Korrektur.
   Inhalt (Wirt, 14.10.2026: „es soll um die E-Mails gehen"): sechs echte Vorlagen aus dem Katalog, gerendert
   vom Produkt; Überschrift „Jede E-Mail sieht aus wie dein Restaurant.", Knopf zur CRM-Seite.
   Gemessen am Video (Fenster 1280 × 798), gebaut × 1,5 für 1920:
     Etikett klein, Großbuchstaben, hellblaue Fläche · Überschrift Serife zwei Zeilen ≈ 52 → 78 (Playfair 400,
     wie Korrektur und Schritte) · Text drei Zeilen 15/17,5 → 22/27 · Knopf hohle Pille 116 × 36 → 174 × 54
     Karten: Seite 284 × 352 → 425 × 528, Mitte 326 × 405 → 489 × 608 (vertikal mittig), Abstand 30 → 45,
     Ecke ≈ 30 → 45 · auf jeder Karte ein mattweißes Kärtchen (Titel, Text, Schilder) und unten ein Schild
     Punkte darunter: aktiver als Strich 34 × 6 → 51 × 9, sonst 6 → 9
   Ablauf: rückt je eine Karte weiter, ≈ 0,55 s, schnell an und weich aus (gemessen 8 Bilder bei 15/s);
   die neue Mitte wächst dabei. Weiterrücken von selbst alle 3,2 s, Halt beim Darüberfahren, Punkte
   wählen direkt. Präfix ks-. */
/* Mindestens bildschirmhoch, Inhalt mittig (Wirt, 14.10.2026: „die dritte Sektion soll wieder den ganzen
   Bildschirm einnehmen — jetzt sehe ich schon den Footer") */
.ks{background:#FFFFFF;color:#101013;padding:120px 0 80px;overflow:hidden;min-height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center}
.ks-kopf{width:min(100% - 48px,900px);margin:0 auto;text-align:center}
.ks-etikett{display:inline-block;margin:0 0 26px;padding:5px 10px;border-radius:6px;background:#E6EDF7;
  font-weight:500;font-size:14px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#3B4A63}
.ks-titel{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:78px;line-height:84px;letter-spacing:-.01em;color:#101013}
.ks-text{width:min(100%,500px);margin:30px auto 0;font-size:22px;line-height:27px;color:#3A3A40}
.ks-knopf{display:inline-flex;align-items:center;justify-content:center;height:54px;margin-top:40px;padding:0 30px;border-radius:27px;
  box-shadow:inset 0 0 0 1.5px #CFCFCF;color:#101013;font-weight:500;font-size:19px;text-decoration:none;background:#fff}
.ks-knopf:hover{box-shadow:inset 0 0 0 1.5px #101013}

/* Die Bühne: Karten absolut, ihre Lage rechnet karussell-start.js */
.ks-buehne{position:relative;height:608px;margin-top:84px}
.ks-karte{position:absolute;left:50%;top:50%;width:425px;height:528px;border-radius:45px;overflow:hidden;
  background:#E7E5E0;transform:translate(-50%,-50%);transition:transform .55s cubic-bezier(.16,.84,.24,1),width .55s cubic-bezier(.16,.84,.24,1),height .55s cubic-bezier(.16,.84,.24,1)}
.ks-karte.ohne-zug{transition:none}
.ks-karte.mitte{width:489px;height:608px}
/* Die Karte zeigt den oberen Teil einer echten Vorlage, unten ihr Name als Schild (wie das Schild im Video) */
.ks-karte{margin:0;cursor:pointer}
.ks-karte.mitte{cursor:default}
.ks-karte img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.ks-schild{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;padding:10px 18px;border-radius:21px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.12);
  font-size:16px;line-height:22px;color:#101013}

.ks-punkte{display:flex;justify-content:center;gap:9px;margin-top:42px}
.ks-punkte button{width:9px;height:9px;padding:0;border:0;border-radius:5px;background:#D7D7D7;cursor:pointer;transition:width .35s ease,background-color .35s ease}
.ks-punkte button[aria-current="true"]{width:51px;background:#2A2A2A}
.ks-punkte button:focus-visible{outline:2px solid #B356FF;outline-offset:3px}

@media (max-width:1279px){ .ks-titel{font-size:62px;line-height:68px} }
@media (max-width:759px){
  .ks{padding:96px 0 80px}
  .ks-titel{font-size:40px;line-height:46px}
  .ks-text{font-size:17px;line-height:23px}
  .ks-buehne{height:440px;margin-top:56px}
  .ks-karte{width:260px;height:360px;border-radius:30px}
  .ks-karte.mitte{width:300px;height:420px}
}
@media (prefers-reduced-motion:reduce){ .ks-karte,.ks-punkte button{transition:none} }