/* Die Startseite. Dieselbe Stube wie die App, nur mit mehr Luft.
   Sie muss in fünf Sekunden erklären, was das hier ist — jemandem, der
   gerade an einem Schaukasten steht und skeptisch ist. */

:root{
  --creme:#F8F3EA; --papier:#FFFDF9; --schiefer:#414B54; --schiefer2:#7E8891;
  --sand:#E8E0D1; --ton:#B47850; --ton-soft:#DCAF92; --ton-fill:#D2A489;
  --ton-hell:#F4E9DD; --ton-text:#613F2B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:70px;}  /* die Kopfleiste klebt oben */
body{background:var(--creme); font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;
  color:var(--schiefer); line-height:1.65; -webkit-font-smoothing:antialiased;}

.bahn{padding:0 22px;}
.mitte{max-width:660px; margin:0 auto;}
.eng{max-width:540px; margin:0 auto;}

/* ---- Kopf ---- */
.kopfleiste{position:sticky; top:0; z-index:20; background:rgba(248,243,234,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s;}
.kopfleiste.fest{border-bottom-color:var(--sand);}
.kopfinhalt{max-width:960px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:10px;}
.kopfmarke{font-family:Fraunces,Georgia,serif; font-size:19px; font-weight:600; letter-spacing:-.3px;
  color:var(--schiefer); text-decoration:none; flex-shrink:0;}

/* Die Abschnitts-Navigation. Auf dem Telefon hat sie keinen Platz und keinen
   Nutzen — dort scrollt man ohnehin durch. Sichtbar ab 820 px. */
.navleiste{display:none;}
@media (min-width:820px){
  .navleiste{display:flex; gap:22px; margin:0 auto;}
  .navleiste a{font-size:14px; color:var(--schiefer2); text-decoration:none; padding:4px 0;
    border-bottom:1.5px solid transparent; transition:color .16s ease, border-color .16s ease;}
  .navleiste a:hover{color:var(--ton-text); border-bottom-color:var(--ton-fill);}
}
.kopfleiste .rein{margin-left:auto; flex-shrink:0;}

/* ---- Knöpfe ---- */
.rein{display:inline-block; border:none; background:var(--ton-soft); color:var(--ton-text);
  font-family:inherit; font-weight:700; font-size:15px; border-radius:99px; padding:12px 28px;
  cursor:pointer; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease;}
.rein:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(180,120,80,.22);}
.rein.klein{font-size:13.5px; padding:8px 18px;}
.rein.gross{font-size:16.5px; padding:15px 38px;}
.leise{display:inline-block; margin-top:14px; font-size:13.5px; color:var(--schiefer2); text-decoration:underline; text-underline-offset:3px;}

/* ---- Aufmacher ---- */
.auf{padding-top:56px; padding-bottom:64px; text-align:center;}
.kranz{width:70px; height:70px; margin:0 auto 30px; display:block;}
/* Zehn leere Plätze, die sich der Reihe nach füllen — im Uhrzeigersinn, von
   zwölf Uhr aus. Vier Sekunden läuft das Licht herum, danach bleibt der Kreis
   kurz vollständig stehen und leert sich wieder in derselben Richtung.
   Der feine Rand hält die weißen Punkte auf dem cremefarbenen Grund sichtbar. */
.kranz circle{
  stroke:var(--sand); stroke-width:.35;
  animation:kranzfuellen 24s ease-in-out infinite;
}
/* Zwei Zeiten stecken hier drin, und sie sind unabhängig voneinander:
   Wie lange ein einzelner Punkt zum Umfärben braucht (12,5 % = 3 s — das ist
   der sanfte Wechsel), und wie schnell die Welle herumläuft (0,6 s von Punkt
   zu Punkt, also 5,4 s einmal rundherum).
   Der Rest ist Arithmetik: Der letzte Punkt ist bei 8,4 s voll, der erste
   verblasst erst ab 15 s — dazwischen steht der Ring sechseinhalb Sekunden
   vollständig. Ab 23,4 s ist er ganz leer, bei 24 s beginnt es von vorn. */
@keyframes kranzfuellen{
  0%            {fill:#FFFFFF;}
  12.5%, 62.5%  {fill:var(--ton);}
  75%,   100%   {fill:#FFFFFF;}
}
h1{font-family:Fraunces,Georgia,serif; font-size:40px; font-weight:600; line-height:1.18;
  letter-spacing:-.9px; color:var(--schiefer); max-width:15ch; margin:0 auto;
  text-wrap:balance;}   /* keine harten Umbrüche — die passen nie auf allen Geräten */
.ueberzeile{font-size:12.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ton); margin-bottom:16px;}
.aufsatz{font-size:17.5px; color:var(--schiefer2); margin:18px auto 0; max-width:520px; line-height:1.65;}
.aufknopf{margin-top:32px;}
.auf .schlussnote{margin-top:16px;}

/* ---- Die drei Kernsätze unter dem Aufmacher ----
   Sie sagen in drei Zeilen, was die Seite darunter ausführt. Auf dem Telefon
   untereinander, ab Tablet nebeneinander — gleich hoch, damit es ruhig wirkt. */
.drei{display:grid; grid-template-columns:1fr; gap:11px; margin-top:52px; text-align:left;}
@media (min-width:720px){ .drei{grid-template-columns:repeat(3,1fr);} }
.dreikachel{background:var(--papier); border:1px solid var(--sand); border-radius:18px;
  padding:18px 19px; display:flex; flex-direction:column; gap:5px;}
.dreikachel b{font-family:Fraunces,Georgia,serif; font-size:16px; font-weight:600; color:var(--schiefer); line-height:1.35;}
.dreikachel span{font-size:14px; color:var(--schiefer2); line-height:1.55;}
.einladung{display:inline-block; margin:0 auto 22px; background:var(--ton-hell); border:1px solid var(--ton-fill);
  color:var(--ton-text); border-radius:99px; padding:7px 18px; font-size:14px; font-weight:600;}

/* ---- Abschnitte ---- */
.teil{padding-top:52px; padding-bottom:52px; border-top:1px solid var(--sand);}
.teil.hell{background:var(--papier);}
h2{font-family:Fraunces,Georgia,serif; font-size:25px; font-weight:600; line-height:1.3;
  letter-spacing:-.4px; color:var(--schiefer); margin-bottom:14px;}
h3{font-family:Fraunces,Georgia,serif; font-size:17px; font-weight:600; color:var(--schiefer); margin-bottom:4px;}
p{font-size:15.5px; line-height:1.7;}
a{color:var(--ton-text); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--ton);}
p + p{margin-top:13px;}
.dick{font-size:17px;}

/* ---- Ein Blick hinein ----
   Dieselben Bausteine wie in der App, nur eingerahmt. Kein Bildschirmfoto:
   so altert nichts, es lädt nichts nach, und auf jedem Bildschirm ist es
   scharf. */
.blick .fenster{
  margin:28px auto 0; max-width:420px;
  background:var(--creme); border:1px solid #DDD2BC; border-radius:20px;
  box-shadow:0 18px 50px rgba(62,74,84,.13); overflow:hidden;
  /* Spalte mit dehnbarer Mitte: Solange das Gespräch noch nicht vollständig
     ist, wächst der Chat-Bereich mit — das Eingabefeld bleibt trotzdem unten
     am Rand, wie in einer echten App. */
  display:flex; flex-direction:column;
}
.fkopf{display:flex; align-items:center; gap:11px; padding:13px 15px 11px;
  border-bottom:1px solid var(--sand); background:var(--creme);}
.fkreis{width:32px; height:32px; flex-shrink:0;}
.fkopf b{display:block; font-family:Fraunces,Georgia,serif; font-size:16px; font-weight:600;
  color:var(--schiefer); line-height:1.3;}
.fkopf span{display:block; font-size:11.5px; color:var(--schiefer2); line-height:1.4;}

.fchat{padding:15px 14px 8px; display:flex; flex-direction:column; gap:11px; background:var(--creme);
  flex:1; min-height:0; align-content:flex-start;}

.fimpuls{background:var(--papier); border:1px solid var(--sand); border-radius:15px; padding:11px 14px;}
.fimpuls span{font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#9C7B44;}
.fimpuls p{font-family:Fraunces,Georgia,serif; font-size:15.5px; font-weight:600; color:var(--schiefer);
  line-height:1.35; margin-top:4px;}

.fzeile{display:flex; flex-direction:column; align-items:flex-start; max-width:84%;}
.fzeile.ich{align-self:flex-end; align-items:flex-end;}
.fwer{font-size:11px; font-weight:700; margin:0 0 3px 3px;}
.fblase{background:var(--papier); border:1px solid var(--sand); border-radius:15px 15px 15px 5px;
  padding:8px 12px; font-size:14px; color:var(--schiefer); line-height:1.45;}
.fzeile.ich .fblase{background:var(--ton-hell); border-color:#E6D5C2; color:var(--ton-text);
  border-radius:15px 15px 5px 15px;}
/* Die Tippen-Zeile — dieselbe wie in der App: eine Textzeile, kein erfundenes
   Blasen-Symbol. Sie steht immer direkt unter der letzten Nachricht und
   wechselt mit, wer gerade dran ist. */
.ftippt{font-size:12px; color:var(--schiefer2); font-style:italic; padding:2px 4px 0;}
.ftippt b{font-weight:700; font-style:normal; color:var(--schiefer2); transition:color .3s ease;}
.ftippt i{display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor;
  margin-left:3px; vertical-align:2px; opacity:.25; animation:tippen 1.5s ease-in-out infinite;}
.ftippt i:nth-child(2){animation-delay:.22s;}
.ftippt i:nth-child(3){animation-delay:.44s;}
@keyframes tippen{0%,65%,100%{opacity:.22;} 30%{opacity:.85;}}

/* ---- Das Gespräch läuft an, wenn man hinschaut ----
   Erst schreibt jemand, dann kommt seine Nachricht — so herum, wie es echt
   ist. Die Zeilen, die noch nicht dran sind, nehmen keinen Platz weg
   (`display:none`); dafür bekommt der Kasten vorher seine Endhöhe fest
   zugewiesen. So füllt sich das Gespräch von oben, die Tippen-Zeile wandert
   direkt darunter mit — und unter dem Kasten springt trotzdem nichts.
   Läuft genau einmal. Ohne JavaScript steht alles sofort da. */
.fenster.laeuft .fzeile{display:none;}
.fenster.laeuft .fzeile.da{display:flex; animation:blase .45s cubic-bezier(.2,.8,.3,1) both;}
@keyframes blase{from{opacity:0; transform:translateY(9px) scale(.98);} to{opacity:1; transform:none;}}

.fenster.laeuft .ftippt{visibility:hidden;}          /* Platz bleibt, Text nicht */
.fenster.laeuft .ftippt.da{visibility:visible; animation:auftauchen .3s ease both;}
@keyframes auftauchen{from{opacity:0;} to{opacity:1;}}

/* Der eigene Text wird unten ins Feld getippt, bevor er als Blase hochgeht.
   Der Cursor blinkt dabei, und lange Sätze schieben sich nach links raus —
   genau wie in einem echten Eingabefeld. */
.ffuss span{white-space:nowrap; overflow:hidden;}
.ffuss span.schreibt{color:var(--schiefer); text-align:left;}
.ffuss span.schreibt::after{content:""; display:inline-block; width:1.5px; height:1em;
  background:var(--ton); vertical-align:-2px; margin-left:2px; animation:cursor 1.05s steps(1) infinite;}
@keyframes cursor{0%,50%{opacity:1;} 51%,100%{opacity:0;}}

@media (prefers-reduced-motion:reduce){
  .ftippt i, .ffuss span.schreibt::after{animation:none; opacity:.4;}
  .fenster.laeuft .fzeile{display:flex; animation:none;}
  .fenster.laeuft .ftippt{visibility:visible;}
}

.ffuss{padding:11px 15px 14px; border-top:1px solid var(--sand); background:var(--creme);}
.ffuss span{display:block; background:var(--papier); border:1px solid var(--sand); border-radius:99px;
  padding:9px 16px; font-size:13.5px; color:var(--schiefer2);}

.blicknote{font-size:14.5px; color:var(--schiefer2); text-align:center;
  max-width:420px; margin:22px auto 0; line-height:1.6;}

@media (max-width:560px){
  .blick .fenster{max-width:none;}
  .fblase{font-size:13.5px;}
}

/* ---- Drei Schritte ---- */
.schritte{display:flex; flex-direction:column; gap:2px; margin-top:24px;}
.schritt{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--sand);}
.schritt:last-child{border-bottom:none;}
.znr{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--ton-hell);
  border:1px solid var(--ton-fill); color:var(--ton-text); font-family:Fraunces,Georgia,serif;
  font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:2px;}
.schritt p{font-size:14.5px; color:var(--schiefer2); margin-top:2px;}

.nachschritte{font-size:14.5px; color:var(--schiefer2); margin-top:20px; line-height:1.65;}

/* ---- Vier Punkte: warum klein ----
   Kein Gitter aus Kästen, sondern eine ruhige Liste mit feiner Linie. Auf
   breiten Schirmen zwei Spalten, damit die Seite nicht in die Länge zieht. */
.vier{display:grid; grid-template-columns:1fr; gap:0; margin-top:22px;}
.vierpunkt{padding:17px 0; border-bottom:1px solid var(--sand);}
.vierpunkt:last-child{border-bottom:none;}
.vierpunkt b{display:block; font-family:Fraunces,Georgia,serif; font-size:16.5px; font-weight:600;
  color:var(--schiefer); line-height:1.35; margin-bottom:4px;}
.vierpunkt span{display:block; font-size:14.5px; color:var(--schiefer2); line-height:1.6;}
@media (min-width:680px){
  .vier{grid-template-columns:1fr 1fr; column-gap:34px;}
  .vierpunkt:nth-last-child(2){border-bottom:none;}
}

/* ---- Zwei ruhige Textlinks nebeneinander ---- */
.zweilinks{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}
.linkknopf{display:inline-block; border:1px solid var(--sand); background:var(--creme);
  border-radius:99px; padding:9px 20px; font-size:14px; font-weight:600; color:var(--schiefer);
  text-decoration:none; transition:border-color .16s ease, color .16s ease, background .16s ease;}
.teil.hell .linkknopf{background:var(--papier);}
.linkknopf:hover{border-color:var(--ton-fill); color:var(--ton-text); background:var(--ton-hell);}

/* ---- Kacheln (Formate, Schutz) ---- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:11px; margin-top:24px;}
.kachel{background:var(--creme); border:1px solid var(--sand); border-radius:18px; padding:16px 17px;}
.teil.hell .kachel{background:var(--papier);}
.kachel h3{font-size:15.5px; margin-bottom:5px;}
.kachel p{font-size:13.5px; color:var(--schiefer2); line-height:1.55;}
.kmark{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:11px; border:1px solid;}
.kmark svg{width:19px; height:19px;}
/* Bei ungerader Anzahl bliebe unten rechts ein Loch — die letzte Kachel nimmt
   dann die ganze Zeile. Greift von selbst, egal wie viele es einmal werden. */
@media (min-width:560px){
  .kacheln .kachel:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* ---- Kein Dating ----
   Der einzige Abschnitt, der eine eigene Farbe bekommt. Nicht laut, aber
   unübersehbar: Wer aus dem falschen Grund hier ist, soll es sofort merken. */
.grenze{background:var(--ton-hell); border-top:1px solid var(--ton-fill); border-bottom:1px solid var(--ton-fill);}
.grenze h2{color:var(--ton-text);}
.grenze .dick{color:var(--ton-text); font-weight:600;}
.grenze p{color:#6E5442;}
.grenze a{color:var(--ton-text); text-decoration-thickness:1.5px;}

/* ---- Preis ---- */
.preis{background:var(--creme); border:1px solid var(--sand); border-radius:20px; padding:22px 22px; margin-top:22px;}
.teil.hell .preis{background:var(--papier);}
.preiszeile{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.preiszahl{font-family:Fraunces,Georgia,serif; font-size:30px; font-weight:600; color:var(--schiefer);}
.preisnote{font-size:14px; color:var(--schiefer2);}

/* ---- Schluss ---- */
.schluss{padding-top:66px; padding-bottom:72px; text-align:center;}
.schluss h2{font-size:28px; max-width:18ch; margin:0 auto; text-wrap:balance;}
.schlusssatz{font-size:17px; color:var(--schiefer2); margin:16px auto 30px; max-width:440px; line-height:1.6;}
.schlussnote{font-size:13.5px; color:var(--schiefer2); margin-top:20px;}

/* ---- Fuß ---- */
.fussleiste{border-top:1px solid var(--sand); padding:26px 22px 40px; background:var(--papier);}
.fussinhalt{max-width:660px; margin:0 auto; display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--schiefer2);}
.fussinhalt a{color:var(--schiefer2); text-underline-offset:2px;}
.fussinhalt .weit{margin-left:auto;}

@media (max-width:560px){
  h1{font-size:31px; letter-spacing:-.6px; max-width:none;}
  .aufsatz{font-size:16px;}
  h2{font-size:22px;}
  .auf{padding-top:42px; padding-bottom:50px;}
  .teil{padding-top:42px; padding-bottom:42px;}
  .schluss{padding-top:52px; padding-bottom:58px;}
  .schluss h2{max-width:none;}
  .drei{margin-top:40px;}
  .fussinhalt .weit{margin-left:0; width:100%;}
}

/* Wer die Bewegung nicht mag, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  /* Ohne die laufende Animation blieben die Punkte weiß — ein leerer Ring.
     Dann steht er eben vollständig gefüllt da. */
  .kranz circle{fill:var(--ton);}
}