/* DIE KORREKTUR — Abschluss der Startseite (Entwurf 14.10.2026, nach Video.mp4 des Wirts).
   Funktion: das Argument „warum Sweet Spot". Vier gedruckte Wörter = Ärgernisse der Branche; ein
   handschriftlicher Strich nimmt sie zurück, die Handschrift daneben ist unsere Antwort. Seit 15.10.2026 (Wirt):
   PROVISION · RESERVIERUNGSLIMIT · ADD-ONS · ONBOARDING-KOSTEN; PROVISION führt zu den Preisen (preise.html —
   die Seite gibt es noch nicht).
   Nach dem Video (1280 × 798 gemessen): Zeilen zwischen feinen Linienpaaren, Nummer (01) klein links
   oben am Wort, Wort groß und mittig, Strich über das Wort hinaus, Notiz schräg daneben. Ablauf: der
   Übergang Weiß → Schwarz in Treppenstufen, die Wörter fliegen abwechselnd von links und rechts mit
   verwischter Spur herein, dann zeichnen sich die Striche, dann schreiben sich die Notizen; beim
   Drüberfahren läuft das Wort auseinander und leuchtet.
   Schrift: im Video eine Serifenschrift, die wir nicht haben (Breite : Großhöhe NOTES 3,92). Am
   nächsten Playfair Display 400 (4,40, 12 % breiter). Handschrift: Shadows Into Light Two (fonts/, OFL) — am nächsten an der des
   Videos: hoch, schmal, schräg (verglichen mit Caveat, Reenie Beanie, Gochi Hand, Kalam). Präfix kt-. */
@font-face{font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/shadowsintolight2.ttf) format('truetype')}
.kt{position:relative;background:#101013;color:#F6F7F7;padding:120px 0 140px;overflow:hidden}
.kt-zeilen{position:relative;width:100%}
.kt-zeile{position:relative;height:118px;display:flex;align-items:center;justify-content:center}
/* zwei feine Linien je Zeile, wie im Video */
.kt-zeile::before,.kt-zeile::after{content:"";position:absolute;left:32px;right:32px;height:1px;background:rgba(255,255,255,.07)}
.kt-zeile::before{top:6px}
.kt-zeile::after{bottom:6px}
.kt-wortbox{position:relative;display:inline-block}
.kt-nr{position:absolute;right:100%;top:6px;margin-right:6px;font-family:'Playfair Display',Georgia,serif;font-size:20px;line-height:1;color:rgba(246,247,247,.85)}
.kt-wort{position:relative;display:block;white-space:nowrap;font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:104px;line-height:1;letter-spacing:.01em;color:#F6F7F7;transition:letter-spacing .5s cubic-bezier(.2,.7,.2,1),text-shadow .5s}
.kt-geist{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;font:inherit;color:#F6F7F7;opacity:0}
.kt-wortbox:hover .kt-wort{letter-spacing:.07em;text-shadow:0 0 22px rgba(255,255,255,.45)}
.kt-strich{position:absolute;left:-14%;top:0;width:128%;height:100%;overflow:visible;pointer-events:none}
.kt-strich path{fill:none;stroke:#F6F7F7;stroke-linecap:round;stroke-linejoin:round}
.kt-notiz{position:absolute;white-space:nowrap;font-family:'Shadows Into Light Two','Ink Free',cursive;font-size:34px;line-height:1;
  color:#F6F7F7;transform:rotate(-4deg);clip-path:inset(0 100% 0 0);pointer-events:none}
.kt-notiz.oben-rechts{left:62%;bottom:88%}
.kt-notiz.links{right:100%;top:-8%;margin-right:-30px}
.kt-notiz.unten-rechts{left:72%;top:80%}
.kt-notiz.unten{left:22%;top:96%}
a.kt-wortbox{color:inherit;text-decoration:none;cursor:pointer}
/* Ein Wort über zwei Zeilen (<br> im Wort + .zwei an der Zeile): mittig, die Zeile höher, korrektur.js streicht jede Zeile.
   Gebraucht für „MAXIMALE RESERVIERUNGSANZAHL" — ersetzt durch RESERVIERUNGSLIMIT (Wirt, 15.10.2026: „zu viel Text") */
.kt-zeile.zwei{height:236px}
.kt-zeile.zwei .kt-wort,.kt-zeile.zwei .kt-geist{white-space:normal;text-align:center}

/* Die Zackenkante (Wirt, 14.10.2026: „im Video kommt die Sektion beim Scrollen von unten herauf"):
   kein eigener Streifen, sondern die Oberkante der schwarzen Sektion selbst — unruhige Blöcke
   verschiedener Breite, die sich beim Heraufkommen verschieben und oben zu einer glatten Kante werden.
   Die Fläche dahinter ist der weiße Grund der Seite. */
.seite-start{min-height:0;padding:90px 0 0;background:#FFFFFF}
.kt-kante{display:block;width:100%;height:170px;margin-bottom:-1px}

@media (max-width:1279px){ .kt-wort{font-size:92px} .kt-zeile{height:124px} .kt-zeile.zwei{height:220px} .kt-zeile.zwei .kt-wort{font-size:80px} .kt-notiz{font-size:32px} }
@media (max-width:999px){ .kt-wort{font-size:64px} .kt-zeile{height:96px} .kt-zeile.zwei,.kt-zeile.zwei .kt-wort{font-size:64px} .kt-zeile.zwei{height:170px} .kt-notiz{font-size:24px} .kt-nr{font-size:14px} }
@media (max-width:759px){ .kt-wort{font-size:40px} .kt-zeile{height:78px} .kt-zeile.zwei,.kt-zeile.zwei .kt-wort{font-size:40px} .kt-zeile.zwei{height:120px} .kt-notiz{font-size:18px} .kt-notiz.links{right:auto;left:0;top:auto;bottom:88%} }
@media (prefers-reduced-motion:reduce){ .kt-notiz{clip-path:none} .kt-wort{transition:none} }

/* Wie im Video: die vorige Sektion bleibt am Ende stehen, die schwarze schiebt sich DARÜBER (Wirt,
   14.10.2026). Die Schritte kleben, sobald ihr Ende den unteren Bildrand erreicht (top wird in
   korrektur.js aus der Höhe gerechnet); Kante und Korrektur liegen darüber — durch die Lücken der
   Kante sieht man die Schritte noch. */
/* seit 15.10.2026 steht der CLIP davor (clip.css) — er klebt, die Schritte scrollen normal weg */
.seite-start .kt-davor{position:sticky;z-index:0}   /* die letzte Video-Sektion (korrektur.js setzt die Klasse) */
.seite-start .kt-kante,.seite-start .kt,.seite-start .ks{position:relative;z-index:1}   /* alles nach den Schritten liegt über ihnen */

/* Der Kopf bleibt beim Scrollen stehen (Wirt, 14.10.2026) — wie auf der CRM-Seite, hier auf weißem Band */
.seite-start .kopf{position:fixed;left:0;right:0;top:0;z-index:20}
.seite-start .kopf::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:rgba(255,255,255,.94);z-index:-1}

/* Die schwarze Sektion rückt schon nach, während Schritt 3 noch heraufkommt (Wirt, 14.10.2026): sie liegt um
   so viel weiter oben, dass sie bei der Landung von Schritt 3 knapp (40 px) unter ihm steht — wie vorher
   jede nächste Karte unter der vorigen zu sehen war. 114 + 459 + 40 = 613 (Handy: 84 + 520 + 40 = 644). */
/* Seit dem Clip (15.10.2026): die Kante kommt direkt nach ihm herauf, sobald er ganz zu sehen ist — wie in Video.mp4
   (das Bild steht, dann erscheint unten die Zackenkante). Das vorgezogene Nachrücken galt den Schritten. */
.seite-start .kt-kante{margin-top:0}

/* GANZ SCHWARZ, DANN FREIGEBEN (Wirt, 14.10.2026: „sie muss sich ganz füllen, dann scrolle ich weiter und die
   gleiche Animation gibt die untere Sektion frei und schiebt sich darüber weg"):
   – die Korrektur ist 130vh hoch (vorher 170 — „zu lange scrollen"); die Zeilen stehen in der Bildmitte still (sticky), solange sie den
     Bildschirm füllt
   – unten eine GERADE Kante (Wirt, 14.10.2026: „beim Übergang von der zweiten zur dritten Sektion ein
     gerader Übergang") — die Zackenkante gibt es nur oben
   – das Karussell darunter steht still an seinem Platz, solange die schwarze Fläche darüber wegfährt
     (korrektur.js hält es fest) — deshalb liegen Korrektur und Kanten über ihm */
.seite-start .kt{min-height:130vh;padding:calc(50vh - 236px) 0 0;box-sizing:border-box;z-index:2;overflow:clip}   /* clip statt hidden: sonst stünden die Zeilen nicht still */
.seite-start .kt-zeilen{position:sticky;top:calc(50vh - 236px)}
.seite-start .kt-kante{z-index:2}
.seite-start .ks{z-index:1}
@media (max-width:999px){ .seite-start .kt{padding-top:calc(50vh - 200px)} .seite-start .kt-zeilen{top:calc(50vh - 200px)} }
@media (max-width:759px){ .seite-start .kt{padding-top:calc(50vh - 160px)} .seite-start .kt-zeilen{top:calc(50vh - 160px)} }