/* ============================================================
   Beauty & Business INSiDE · TEAM #PLANB
   Recruiting App · Design-System
   Version 1.0 · 14.08.2026

   App-Style: Sandfarbener Hintergrund mit feinem Korn,
   alle Texte liegen in Karten mit weichen Ecken und Verlauf,
   Schrift ist Now in Light.

   AUFBAU DIESER DATEI
     1. Stellschrauben     alles, was du selbst ändern willst
     2. Schrift einbinden
     3. Grundlagen
     4. Layout
     5. Navigationsleiste
     6. Fortschritt als Segmente
     7. Karten
     8. Auswahlkarten
     9. Video
    10. Buttons
    11. Sticky-Leiste unten
    12. Hinweise und FAQ
    13. Menü von unten
    14. Wasserzeichen und Zierrat
    15. Hilfsklassen
    16. Videoübersicht
    17. Produktgruppen
    18. Formulare und Dankeseite
    19. Seitenübergänge
    20. Kleine Bildschirme
   ============================================================ */


/* ============================================================
   1. STELLSCHRAUBEN
   Hier stehen alle Werte, die du vermutlich mal ändern willst.
   Änderst du einen Wert hier, ändert er sich überall.
   ============================================================ */
:root{

  /* ---------- Farben, unverändert aus der Logodatei ---------- */
  --mauve-brand: #9B8CB1;   /* Logo, Dekor, große Flächen */
  --mauve-light: #7B6798;   /* Hover auf gefüllten Buttons */
  --mauve:       #6C5B86;   /* Links, Buttons, aktive Auswahl */
  --mauve-deep:  #4F4261;   /* Überschriften */
  --mauve-tint:  #F3F1F7;   /* zarte Fläche */

  --sand-brand:  #D9B583;   /* Fortschritt, Haken, Haupt-CTA */
  --sand-light:  #E8D2AE;   /* Hover */
  --sand-deep:   #8D642B;   /* wenn Sand als Text nötig ist */
  --sand-tint:   #FAF3E9;   /* warme Fläche */

  /* Das dunkle Navy ist mit dem Fußbereich weggefallen.
     Es kommt in der App nirgends mehr vor. Nur das Symbol der
     Seite auf dem Startbildschirm steht noch darauf. */
  --navy:        #1B2A4A;

  --white:       #FFFFFF;
  --success:     #2E7D5B;

  /* ---------- Der Hintergrund der App ----------
     Ein Sandton. Die Karten heben sich davon ab. */
  --grund:       #F4EBDE;

  /* ---------- Textfarben ----------
     Etwas dunkler als früher, weil die Schrift in Light läuft
     und dünne Striche mehr Kontrast brauchen. */
  --ink:         #453E51;   /* Fließtext */
  --ink-soft:    #635C71;   /* Nebentext */

  /* ---------- Die Fläche der Karten ----------
     Ein Verlauf von Mauve links oben nach Sand rechts unten,
     dieselbe Idee wie bei der Videofläche.
     Drei Stärken stehen bereit, im Einsatz ist Stufe 2.
     Zum Wechseln unten bei --karte-flaeche die Zahl tauschen. */
  --flaeche-1: linear-gradient(140deg, #FBF8FD 0%, #FFFFFF 48%, #FEFAF3 100%);
  --flaeche-2: linear-gradient(140deg, #F3EEF9 0%, #FCFAFD 52%, #FDF5EA 100%);
  --flaeche-3: linear-gradient(140deg, #E9E2F3 0%, #F5F2FA 55%, #FBF2E3 100%);

  --karte-flaeche: var(--flaeche-2);

  /* ---------- Stärke des Korns im Hintergrund ----------
     0 ist glatt, 0,25 ist grob. Im Einsatz ist 0,16. */
  --korn-staerke: .16;

  /* ---------- Verlauf hinter der Videoübersicht ----------
     Ein einziger großer Verlauf, den sich alle neun Kacheln
     teilen. Die Farben laufen von Mauve links oben nach Sand
     rechts unten. Hier ändern heißt: alle Kacheln ändern sich
     gemeinsam und passen weiter exakt zusammen. */
  --raster-verlauf: linear-gradient(135deg,
      #E4DCF1 0%,
      #EDE7F5 26%,
      #F6EFF2 48%,
      #FBEEDF 72%,
      #F2DFC0 100%);

  /* ---------- Schrift ----------
     Now ist die Hausschrift. Fällt sie aus, greifen die
     verwandten Schriften dahinter, damit nichts zerfällt. */
  --font: "Now", "Poppins", "Century Gothic", system-ui,
          "Segoe UI", Helvetica, Arial, sans-serif;

  /* Strichstärken. Light trägt den ganzen Auftritt,
     Medium ist nur für Dinge da, die angetippt werden. */
  --gewicht-leicht: 300;
  --gewicht-normal: 400;
  --gewicht-aktion: 500;

  /* Schriftgrößen */
  --fs-xs:  .74rem;
  --fs-sm:  .88rem;
  --fs-base:1.02rem;
  --fs-lg:  1.12rem;
  --fs-xl:  1.18rem;
  --fs-2xl: 1.34rem;
  --fs-3xl: 1.58rem;

  --zeilenhoehe: 1.52;

  /* ---------- Abstände und Raster ---------- */
  --wrap:      1120px;
  --wrap-text: 680px;
  --gap:       1.25rem;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3rem;
  --space-6: 4rem;

  /* ---------- Ecken ---------- */
  --radius:      22px;
  --radius-sm:   14px;
  --radius-pill: 999px;

  /* ---------- Schatten ----------
     Bewusst sehr weich. Sie sollen die Karte vom Sand abheben
     und selbst nicht auffallen. */
  --schatten:      0 1px 2px rgba(122,100,80,.05), 0 6px 18px rgba(122,100,80,.07);
  --schatten-tief: 0 2px 4px rgba(122,100,80,.06), 0 12px 30px rgba(122,100,80,.10);

  /* ---------- Bewegung ----------
     Eine Kurve und eine Dauer für alles. */
  --kurve: cubic-bezier(.22,.61,.36,1);
  --dauer: .22s;

  /* ---------- Feste Leisten ---------- */
  --nav-h:    72px;   /* Navigationsleiste oben */
  --header-h: 54px;   /* alter Name, wird noch von Altem benutzt */
  --sticky-h: 112px;  /* Leiste unten mit Knopf und Zweitweg */

  /* ---------- Logogrößen ---------- */
  --logo-h:     42px;
  --logo-h-mob: 34px;

  /* Das Signet in der Navigationsleiste oben, auf jeder Seite.
     Änderst du es, wächst die Leiste über --nav-h mit. */
  --signet-nav: 52px;

  /* Das volle Logo, gestapelt, also Schriftzug und Signet
     untereinander. Es steht nur auf der Code-Eingabe und auf
     der Anmeldung des Partnerbereichs.
     100 Prozent heißt: genau so breit wie die Überschrift
     darunter, also die volle Breite der Karte. */
  --logo-voll: 100%;

  /* Der Abstand zwischen dem vollen Logo und der Überschrift
     darunter. */
  --logo-abstand: 15px;

  /* ---------- Größe der Videos im Hochformat ----------
     Die Videos sind hochkant gedreht und sollen den Bildschirm
     möglichst ausfüllen. Angegeben wird die HÖHE, die Breite
     ergibt sich daraus von selbst im Verhältnis 9 zu 16.

     Auf dem Handy: 142vw entspricht 80 Prozent Bildschirmbreite.
     Der zweite Wert, 66vh, verhindert, dass das Video auf einem
     kurzen Display unter die Leiste unten rutscht. Es gilt
     immer der kleinere der beiden.

     Willst du das Video breiter haben, erhöhe die vw-Zahl:
     80 Prozent Breite sind 142vw, 90 Prozent wären 160vw. */
  --video-hoch-hoehe: min(66vh, 142vw);

  /* ---------- Illustrationen ----------
     Die gezeichneten Motive liegen in assets/img/illu/.
     Hier steht nur, wie groß sie erscheinen. Willst du sie
     überall kleiner haben, ändere diese eine Zahl. */
  --illu-breite:       330px;  /* ein Motiv oben in einer Karte */
  --illu-breite-klein: 150px;  /* Zweig, Blume, Herz */
  --illu-trenner-breite: 300px;/* die Linie mit dem Herz zwischen zwei Abschnitten */
  --illu-breite-frage: 420px;  /* die Zeichnung oben auf einer Frageseite */
}


/* ============================================================
   2. SCHRIFT EINBINDEN

   Seit dem 15.08.2026 erledigt. Die Schrift Now liegt als
   woff2 in assets/fonts/ auf dem eigenen Webspace. Es lädt
   nichts mehr von einem fremden Anbieter, es fließen also
   keine Daten von Besucherinnen zu Dritten.

   Vier Schnitte sind eingebunden:

     300  Light      der Normalfall, fast alles auf der Seite
     400  Regular    Reserve, falls irgendwo mehr Kraft nötig ist
     500  Medium     alles, was angetippt wird
     700  Bold       Reserve für einzelne kräftige Zahlen

   Wenn du einen weiteren Schnitt brauchst: die otf-Datei aus
   dem Ordner schrift/ nach woff2 wandeln, in assets/fonts/
   legen und hier einen weiteren Block anhängen.
   ============================================================ */
@font-face{
  font-family:"Now";
  src:url("../fonts/Now-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Now";
  src:url("../fonts/Now-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Now";
  src:url("../fonts/Now-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Now";
  src:url("../fonts/Now-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}


/* ============================================================
   3. GRUNDLAGEN
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--gewicht-leicht);
  font-size:var(--fs-base);
  line-height:var(--zeilenhoehe);
  color:var(--ink);
  background:var(--grund);
  padding-bottom:calc(var(--sticky-h) + 1rem);
  -webkit-tap-highlight-color:transparent;
}

/* Seiten ohne die Leiste unten brauchen den Platz dafür nicht.
   Die Klasse setzt footer.php, wenn $zeige_cta auf false steht. */
body.ohne-cta{padding-bottom:2rem}

img{max-width:100%;display:block}
a{color:var(--mauve);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:var(--gewicht-leicht);
  color:var(--mauve-deep);
  line-height:1.22;
  letter-spacing:-.005em;
  margin:0 0 var(--space-2);
}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
p{margin:0 0 var(--space-2)}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--mauve-brand);outline-offset:3px;border-radius:6px}

/* ---------- Das Korn über dem Hintergrund ----------
   Ein SVG-Rechteck mit Rauschfilter, das header.php ganz oben
   in die Seite legt. Es liegt hinter allen Karten, die Karten
   bleiben also glatt. Bewusst kein Bild im CSS, damit es auch
   in der lokalen Vorschau erscheint. */
.korn{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;user-select:none;
  opacity:var(--korn-staerke);
  mix-blend-mode:multiply;
}
.korn svg{width:100%;height:100%;display:block}
/* Der Filter selbst ist unsichtbar und liegt nur einmal in der Seite */
.korn-vorrat{position:absolute;width:0;height:0;overflow:hidden}

/* Alles Sichtbare der Seite liegt über dem Korn */
.seite{position:relative;z-index:1}


/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1rem}
.wrap--text{max-width:var(--wrap-text)}
.wrap--cards{max-width:900px;margin-top:var(--space-3)}

.section{padding:var(--space-4) 0}
.section--tight{padding:var(--space-2) 0}
/* Die farbigen Abschnittsflächen von früher werden nicht mehr
   gebraucht, weil jetzt die Karten die Flächen bilden. Sie
   bleiben als leere Klassen bestehen, damit ältere Seiten
   nicht kaputtgehen. */
.section--warm,.section--mauve,.section--sand{background:none}

.stack > * + *{margin-top:var(--space-2)}

.grid{display:grid;gap:.7rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}


/* ============================================================
   5. NAVIGATIONSLEISTE
   Flach, milchig, immer oben. Links zurück, in der Mitte wo
   man gerade ist, rechts das Menü. Der große Kopfbereich mit
   dem Logo ist entfallen, das volle Logo steht nur noch auf
   der Seite mit der Code-Eingabe.
   ============================================================ */
.navleiste{
  position:sticky;top:0;z-index:60;
  background:rgba(244,235,222,.82);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.navleiste__inner{
  height:var(--nav-h);
  display:flex;align-items:center;gap:.4rem;
  padding:0 .45rem;
  max-width:var(--wrap);margin:0 auto;
}
.navleiste__knopf{
  flex:none;width:40px;height:40px;
  display:grid;place-items:center;
  border:0;background:none;padding:0;
  color:var(--mauve-deep);cursor:pointer;
  border-radius:var(--radius-pill);
  transition:background var(--dauer) var(--kurve);
}
.navleiste__knopf:active{background:rgba(255,255,255,.75)}
.navleiste__knopf:hover{text-decoration:none}
/* Platzhalter, damit die Mitte auch ohne Zurück-Pfeil mittig bleibt */
.navleiste__knopf--leer{pointer-events:none}

.navleiste__mitte{
  flex:1;min-width:0;text-align:center;
  font-size:var(--fs-xs);font-weight:var(--gewicht-normal);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Wenn die Seite keinen Namen trägt, steht hier das Signet */
.navleiste__signet{display:block}
.navleiste__signet img{height:var(--signet-nav);width:auto;margin:0 auto}

/* Der alte Kopfbereich. Bleibt als leere Hülle bestehen,
   falls irgendwo noch die alten Klassen stehen. */
.site-header{position:sticky;top:0;z-index:60}
.site-header__inner{display:flex;align-items:center;justify-content:center}

.logo{display:block;text-decoration:none}
.logo:hover{text-decoration:none}
.logo img{height:var(--logo-h);width:auto;margin:0 auto}
/* Gestapelte Variante, etwa für die Code-Eingabe.
   Das padding-bottom schafft den Abstand zur Überschrift. Es ist
   bewusst ein Innenabstand und kein Außenabstand, weil sich ein
   Außenabstand mit dem der Überschrift verrechnen würde und dann
   weniger herauskäme als die eingestellten Pixel. */
.logo--stacked{padding-bottom:var(--logo-abstand)}
.logo--stacked img{height:auto;width:var(--logo-voll);max-width:100%}

/* ---------- Partner Login ganz unten ----------
   Steht auf jeder Seite als Letztes im Inhalt, klein und ruhig.
   Das Signet davor zeigt, dass dahinter unser eigener Bereich
   liegt. Größe und Farbe stellst du hier ein. */
.fuss-partner{margin:var(--space-4) 0 0;text-align:center}
.partner-knopf{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .95rem;
  border:1px solid rgba(108,91,134,.28);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--ink-soft);
  text-decoration:none;
  font-size:var(--fs-sm);
  line-height:1;
}
.partner-knopf:hover{border-color:var(--mauve);color:var(--mauve);text-decoration:none}
.partner-knopf img{height:20px;width:auto;display:block}

/* Das Signet, also das Monogramm aus den beiden B */
.signet{width:76px;height:76px;margin:0 auto var(--space-2)}
.signet--gross{width:118px;height:118px}
/* Klein und linksbündig, als Absender über einem Text.
   Es ersetzt bewusst einen Namen, weil hier das Team spricht. */
.signet--klein{width:40px;height:40px;margin:0 0 var(--space-1)}

/* ---------- Tages-Badge ----------
   Steht jetzt neben den Segmenten. Die Klassen von früher
   bleiben, damit ältere Seiten nicht kaputtgehen. */
.badge-days{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--karte-flaeche);color:var(--sand-deep);
  font-size:var(--fs-xs);font-weight:var(--gewicht-normal);
  padding:.34rem .72rem;border-radius:var(--radius-pill);
  white-space:nowrap;box-shadow:var(--schatten);
}
.badge-days::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sand-brand)}
.badge-days--inline{margin:0 auto var(--space-2)}
.hero__badge{display:none}


/* ============================================================
   6. FORTSCHRITT ALS SEGMENTE
   Sechs Abschnitte statt eines Prozentbalkens. So sieht man
   auf einen Blick, wie viele Etappen noch kommen.
   Die Anzahl stellt header.php über $schritte_gesamt ein.
   ============================================================ */
.schritte{
  display:flex;align-items:center;gap:.7rem;
  padding:0 .8rem .5rem;
  max-width:var(--wrap);margin:0 auto;
}
.schritte__leiste{flex:1;display:flex;gap:4px;min-width:0}
.schritte__segment{
  flex:1;height:3px;border-radius:2px;
  background:rgba(122,100,80,.18);overflow:hidden;
}
/* Die Füllung. Ihre Breite rechnet PHP aus, deshalb steht sie
   als einziger Wert direkt im HTML. */
.schritte__segment i{
  display:block;height:100%;border-radius:2px;
  background:var(--sand-brand);
  transition:width .5s var(--kurve);
}
.schritte__tag{
  flex:none;font-size:var(--fs-xs);font-weight:var(--gewicht-normal);
  color:var(--sand-deep);white-space:nowrap;
}

/* Der alte Prozentbalken. Bleibt für ältere Seiten bestehen. */
.progress{height:3px;background:rgba(122,100,80,.18)}
.progress__bar{height:100%;background:var(--sand-brand)}


/* ============================================================
   7. KARTEN
   Der wichtigste Baustein. Jeder zusammenhängende Textblock
   liegt in einer Karte.
   ============================================================ */
.karte,.card{
  background:var(--karte-flaeche);
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  padding:1.15rem;
}
.karte--luft,.card--pad{padding:1.5rem 1.35rem}
/* Eine Karte, die zurücktritt, etwa für Hinweise */
.karte--zart{background:rgba(255,255,255,.55);box-shadow:none}
/* Eine Karte, die hervorsticht */
.karte--hoch,.card--raised{box-shadow:var(--schatten-tief)}

/* Mehrere Karten untereinander bekommen immer denselben Abstand */
.karten{display:flex;flex-direction:column;gap:.7rem}


/* ---------- Hero ----------
   Kein eigener Farbverlauf mehr im Hintergrund. Der Hero ist
   jetzt einfach die erste und größte Karte. */
.hero{padding:var(--space-2) 0 var(--space-1);text-align:left}
.hero h1{margin-bottom:var(--space-1)}
.hero__kicker{
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand-deep);font-weight:var(--gewicht-normal);
  margin:0 0 .5rem;
}
.hero__lead{font-size:var(--fs-lg);color:var(--ink-soft);margin:0}
.hero__rule{
  width:72px;height:0;border:0;border-top:1px solid var(--sand-brand);
  margin:var(--space-2) 0 0;opacity:.8;
}
/* Karte, die früher in den Hero hineinragte. Wird nicht mehr
   gebraucht, bleibt als leere Klasse für ältere Seiten. */
.pull-up{margin-top:0}


/* ============================================================
   8. AUSWAHLKARTEN
   Für Quiz, Lebenssituation und Pfadwahl.
   Sie sind Handlung, deshalb tragen sie die kräftigere
   Strichstärke und reagieren sichtbar auf Berührung.
   ============================================================ */
.choice{
  /* Erste Zeile: Nummer, Überschrift, Pfeil.
     Der Beschreibungstext darunter bekommt über flex-basis:100%
     eine eigene Zeile. Dafür muss hier das Umbrechen erlaubt
     sein, sonst quetscht sich die Überschrift zusammen. */
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  width:100%;text-align:left;
  background:var(--karte-flaeche);
  border:0;border-radius:var(--radius);
  padding:.95rem 1rem;min-height:62px;
  box-shadow:var(--schatten);
  cursor:pointer;color:inherit;font:inherit;text-decoration:none;
  transition:transform var(--dauer) var(--kurve),
             box-shadow var(--dauer) var(--kurve);
}
/* Auf dem Handy gibt es kein Überfahren mit der Maus, deshalb
   arbeitet die Karte mit dem gedrückten Zustand. Sie sinkt
   sichtbar ein und gibt damit sofort Rückmeldung. */
.choice:active{transform:scale(.975);box-shadow:var(--schatten-tief)}
.choice:hover,.choice:focus-visible{box-shadow:var(--schatten-tief);text-decoration:none}

/* Die Nummer im Kreis links */
.choice__eyebrow{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(108,91,134,.11);color:var(--mauve);
  display:grid;place-items:center;
  font-size:var(--fs-sm);font-weight:var(--gewicht-normal);
  letter-spacing:0;text-transform:none;
}
.choice__title{
  flex:1;
  font-family:var(--font);font-size:var(--fs-base);
  font-weight:var(--gewicht-aktion);color:var(--mauve-deep);
  line-height:1.34;margin:0;
}
/* Zusatztext unter dem Titel, nur wo es einen gibt */
.choice__text{
  flex-basis:100%;order:3;
  font-size:var(--fs-sm);color:var(--ink-soft);margin:.35rem 0 0;
}
.choice__arrow{flex:none;color:var(--mauve-brand);font-size:var(--fs-lg);line-height:1}

/* Dieselbe Optik, aber als reine Anzeige der gewählten Antwort */
.choice__title--kompakt{margin:.25rem 0 0}


/* ============================================================
   9. VIDEO
   Die Fläche im Rahmen ist die Vorlage für alle Karten
   gewesen. Sie bleibt eine Spur kräftiger als der Rest, damit
   das Video weiter der Blickfang bleibt.
   ============================================================ */
.video{
  border-radius:var(--radius);overflow:hidden;
  background:var(--karte-flaeche);
  box-shadow:var(--schatten);
}
.video__frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:linear-gradient(140deg,#E4DDEE,#F3F1F7 60%,#FAF3E9);
}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Vorschaubild des Videos. Immer ein echtes Bildelement, nie
   ein Hintergrundbild im CSS. */
.video__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.video__placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;
  color:var(--mauve);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;
}
.video__play{
  width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--sand-deep);
  display:grid;place-items:center;font-size:1.2rem;
  box-shadow:0 10px 26px rgba(79,66,97,.18);
}
/* ---------- Videos im Hochformat ----------
   Alle Videos sind hochkant gedreht. Sie stehen deshalb frei
   auf dem Sand statt in einem breiten Kasten, damit sie so
   groß werden können wie möglich. Die Höhe steht ganz oben bei
   --video-hoch-hoehe, die Breite ergibt sich daraus.

   Der Titel steht darüber, die Zeile mit Zurück, Gesehen und
   Weiter darunter, und der Text kommt erst beim Scrollen. */
.video--hoch{background:none;box-shadow:none;overflow:visible}
.video--hoch .video__frame{
  aspect-ratio:9/16;
  height:var(--video-hoch-hoehe);
  width:auto;
  max-width:100%;
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--schatten-tief);
}

/* Der Titel über dem Video */
.video-kopf{text-align:center;margin-bottom:var(--space-2)}
.video-kopf__zaehler{
  font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand-deep);margin:0 0 .35rem;
}
.video-kopf h1{
  margin:0;font-size:var(--fs-2xl);line-height:1.25;
  color:var(--mauve-deep);font-weight:var(--gewicht-leicht);
}

/* Die Zeile unter dem Video. Sie ist genauso breit wie das
   Video selbst, deshalb die Rechnung: Höhe mal 0,5625 ergibt
   die Breite im Verhältnis 9 zu 16. */
.video-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:.4rem;
  width:100%;
  max-width:calc(var(--video-hoch-hoehe) * .5625);
  margin:.7rem auto 0;
}
.video-nav__pfeil{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:var(--fs-sm);color:var(--mauve);
  font-weight:var(--gewicht-aktion);text-decoration:none;
  padding:.45rem .6rem;border-radius:var(--radius-pill);
  white-space:nowrap;
}
.video-nav__pfeil:hover{background:rgba(255,255,255,.6)}
/* Beim ersten und beim letzten Video gibt es keinen Nachbarn.
   Der Pfeil bleibt stehen, damit die Zeile nicht springt, und
   tritt nur zurück. */
.video-nav__pfeil[aria-disabled="true"]{opacity:.28;pointer-events:none}
.video-nav .seen{padding:.45rem .3rem}
/* Steht der Haken allein, ohne Pfeile daneben, rueckt er in
   die Mitte. So auf der Willkommensseite. */
.video-nav--allein{justify-content:center}

/* Die beiden Wege am Ende einer Videoseite. Sie ersetzen dort
   die feste Leiste unten, die dem hohen Video die Höhe
   wegnehmen würde. */
.video-wege{margin-top:var(--space-3);text-align:center}
.video-wege__zweitweg{
  display:inline-block;margin-top:.6rem;
  font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:none;
}
.video-wege__zweitweg:hover{color:var(--mauve)}

/* Die Zeile unter dem Video mit dem Titel und dem Haken.
   Wird nur noch von Videos im Querformat benutzt.
   Ist der Titel lang, rutscht der Haken in eine zweite Zeile,
   damit der Titel nicht in eine schmale Spalte gequetscht wird. */
.video__bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.35rem .8rem;
  padding:.75rem .95rem;
}
.video__title{
  flex:1 1 100%;margin:0;
  font-family:var(--font);font-size:var(--fs-base);
  font-weight:var(--gewicht-normal);color:var(--mauve-deep);
  line-height:1.3;
}
/* Der Haken sitzt immer rechts, egal in welcher Zeile er landet */
.video__bar .seen{margin-left:auto}

/* Gesehen-Haken in Sandgold */
.seen{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:0;cursor:pointer;font-family:var(--font);
  font-size:var(--fs-xs);color:var(--ink-soft);
  white-space:nowrap;padding:.3rem;
}
.seen__dot{
  width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(122,100,80,.28);
  display:grid;place-items:center;
  font-size:.72rem;color:transparent;
  transition:all var(--dauer) var(--kurve);
}
.seen.is-done{color:var(--sand-deep)}
.seen.is-done .seen__dot{background:var(--sand-brand);border-color:var(--sand-brand);color:var(--white)}


/* ============================================================
   10. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--font);font-size:var(--fs-base);
  font-weight:var(--gewicht-aktion);
  padding:.9rem 1.5rem;min-height:52px;
  border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background var(--dauer) var(--kurve),
             transform var(--dauer) var(--kurve);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.975)}
.btn--sand{background:var(--sand-brand);color:#3F3220;box-shadow:0 6px 18px rgba(217,181,131,.45)}
.btn--sand:hover{background:var(--sand-light)}
.btn--primary{background:var(--mauve);color:var(--white)}
.btn--primary:hover{background:var(--mauve-light)}
.btn--ghost{background:var(--karte-flaeche);color:var(--mauve-deep);box-shadow:var(--schatten)}
.btn--outline{background:transparent;color:var(--mauve);border-color:var(--mauve-brand)}
.btn--outline:hover{background:var(--mauve-tint)}
.btn--block{width:100%}


/* ============================================================
   11. STICKY-LEISTE UNTEN
   Eine Hauptaktion, darunter der ruhigere zweite Weg. Zwei
   gleich laute Knöpfe machen die Entscheidung unnötig schwer.
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(244,235,222,.88);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 -8px 24px rgba(122,100,80,.10);
  /* Fängt unten den Balken des iPhones ab */
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta__inner{
  max-width:var(--wrap-text);margin:0 auto;
  padding:.6rem 1rem .7rem;text-align:center;
}
.sticky-cta__zweitweg{
  display:inline-block;margin-top:.45rem;
  font-size:var(--fs-sm);color:var(--ink-soft);
}


/* ============================================================
   12. HINWEISE UND FAQ
   ============================================================ */
.note{
  background:rgba(255,255,255,.55);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  font-size:var(--fs-sm);color:var(--ink-soft);
}
.note strong{color:var(--mauve-deep);font-weight:var(--gewicht-aktion)}
.note--sand{background:var(--sand-tint)}
.note--sand strong{color:var(--sand-deep)}

.faq{display:flex;flex-direction:column;gap:.5rem}
.faq details{
  background:var(--karte-flaeche);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  padding:0 1.1rem;
}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1rem 2rem 1rem 0;
  font-family:var(--font);font-size:var(--fs-base);
  font-weight:var(--gewicht-normal);color:var(--mauve-deep);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:0;top:.85rem;
  color:var(--sand-deep);font-size:1.3rem;line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
/* Antworttext. Eine Antwort darf aus mehreren Absätzen bestehen,
   deshalb steht der Abstand nach unten nur am letzten Absatz,
   sonst würde die Lücke zwischen den Absätzen zu groß. */
.faq details p{padding-bottom:0;margin:0 0 .7rem;color:var(--ink-soft);font-size:var(--fs-sm)}
.faq details > p:last-child{margin-bottom:0;padding-bottom:1.05rem}


/* ============================================================
   13. MENÜ VON UNTEN
   Ein natives dialog-Element, das von unten hereinfährt.
   Hier liegen FAQ, Über uns und die Rechtslinks, die früher
   im dunklen Fußbereich standen.
   ============================================================ */
.sheet{
  border:0;padding:0;margin:0 auto 0;
  width:100%;max-width:var(--wrap-text);
  max-height:88vh;
  background:none;
  position:fixed;left:0;right:0;bottom:0;top:auto;
}
.sheet::backdrop{background:rgba(43,34,54,.38);backdrop-filter:blur(2px)}
.sheet__inner{
  background:var(--karte-flaeche);
  border-radius:28px 28px 0 0;
  padding:.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px rgba(43,34,54,.26);
}
.sheet__griff{width:38px;height:4px;border-radius:2px;background:rgba(122,100,80,.25);margin:0 auto 1rem}
.sheet__liste{display:block;margin-bottom:1.1rem}
.sheet__zeile{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 0;
  border-bottom:1px solid rgba(122,100,80,.12);
  font-size:var(--fs-base);color:var(--mauve-deep);
}
.sheet__zeile:last-child{border-bottom:0}
.sheet__zeile:hover{text-decoration:none}
.sheet__zeile svg{flex:none;color:var(--mauve-brand)}
.sheet__copy{
  margin:1rem 0 0;text-align:center;
  font-size:var(--fs-xs);color:var(--ink-soft);
}

/* Hereinfahren von unten */
@keyframes sheet-auf{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.sheet[open] .sheet__inner{animation:sheet-auf .28s var(--kurve)}

/* Der alte dunkle Fußbereich ist am 14.08.2026 ersatzlos
   weggefallen, seine Regeln sind hier entfernt. Was dort stand,
   liegt jetzt im Menü, das von unten hereinfährt. */


/* ============================================================
   14. WASSERZEICHEN UND ZIERRAT

   Verwendung: dem Abschnitt .hat-wasserzeichen geben und als
   erstes Kind ein <img class="wasserzeichen" ...> einsetzen.
   ============================================================ */
.hat-wasserzeichen{position:relative;overflow:hidden}
.hat-wasserzeichen > *{position:relative;z-index:1}

.wasserzeichen{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:clamp(260px,38vw,460px);height:auto;
  opacity:.07;
  /* Leicht eingerückt, sonst wird das Ampersand abgeschnitten */
  left:-2%;top:-13%;
}
.wasserzeichen--rechts-oben{left:auto;right:-2%;top:-13%}
.wasserzeichen--links-unten{left:-2%;top:auto;bottom:-16%}
.wasserzeichen--rechts-unten{left:auto;right:-2%;top:auto;bottom:-16%}
.wasserzeichen--mitte{
  left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  width:clamp(300px,46vw,520px);opacity:.06;
}

.ornament{
  display:block;width:56px;height:0;border:0;
  border-top:1px solid var(--sand-brand);
  margin:var(--space-2) auto;opacity:.8;
}


/* ============================================================
   15. HILFSKLASSEN
   ============================================================ */
.center{text-align:center}
.muted{color:var(--ink-soft)}
.lead{font-size:var(--fs-lg)}
.mehr-link{text-align:center;margin-top:var(--space-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ============================================================
   16. VIDEOÜBERSICHT
   Neun Kacheln, drei pro Reihe. Jede Kachel zeigt ihren
   Ausschnitt aus einem gemeinsamen Verlauf, deshalb laufen
   die Farben über die Fugen hinweg ineinander.
   ============================================================ */
.video-raster{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
}

.video-kachel{
  position:relative;display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;
  box-shadow:var(--schatten);
  color:inherit;text-decoration:none;
  /* Der gemeinsame Verlauf. Er ist dreimal so groß wie eine
     Kachel, jede Kachel verschiebt ihn auf ihre Position. */
  background-image:var(--raster-verlauf);
  background-size:300% 300%;
  transition:transform var(--dauer) var(--kurve),
             box-shadow var(--dauer) var(--kurve);
}
.video-kachel:hover{text-decoration:none;box-shadow:var(--schatten-tief)}
.video-kachel:active{transform:scale(.97)}

/* Die neun Ausschnitte. Erste Zahl links nach rechts,
   zweite Zahl oben nach unten. */
.pos-1{background-position:  0%   0%}
.pos-2{background-position: 50%   0%}
.pos-3{background-position:100%   0%}
.pos-4{background-position:  0%  50%}
.pos-5{background-position: 50%  50%}
.pos-6{background-position:100%  50%}
.pos-7{background-position:  0% 100%}
.pos-8{background-position: 50% 100%}
.pos-9{background-position:100% 100%}

/* Der obere Teil einer Kachel. Hier sitzt später das
   Vorschaubild, solange es fehlt steht dort die Nummer. */
.video-kachel__bild{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:16/11;
}
.video-kachel__bild img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.video-kachel__nr{
  font-size:1.5rem;font-weight:var(--gewicht-leicht);
  color:var(--mauve-deep);opacity:.42;
}

/* Der Haken oben rechts. Er ist nur eine Anzeige, gesetzt
   wird er unten am Video selbst. Solange ein Video nicht
   gesehen ist, ist dort bewusst gar nichts, sonst sieht das
   Raster aus wie neun leere Kästchen zum Abhaken. */
.video-kachel__haken{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sand-brand);color:var(--white);
  opacity:0;transform:scale(.7);
  transition:opacity var(--dauer) var(--kurve),
             transform var(--dauer) var(--kurve);
}
.video-kachel.ist-gesehen .video-kachel__haken{opacity:1;transform:scale(1)}

.video-kachel__fuss{
  padding:.4rem .55rem .6rem;
  display:flex;flex-direction:column;gap:.15rem;
}
.video-kachel__titel{
  font-size:.74rem;line-height:1.24;color:var(--mauve-deep);
  font-weight:var(--gewicht-normal);
}
.video-kachel__dauer{font-size:.68rem;color:var(--ink-soft)}

/* Der Hinweis am nächsten offenen Video. Er ist normalerweise
   nicht da und erscheint nur, wo app.js die Klasse setzt. */
.video-kachel__weiter{display:none}
.video-kachel.ist-naechste{
  box-shadow:0 0 0 2px var(--sand-brand), var(--schatten-tief);
}
.video-kachel.ist-naechste .video-kachel__weiter{
  display:block;
  background:var(--sand-brand);color:#3F3220;
  font-size:.66rem;letter-spacing:.06em;text-align:center;
  padding:.22rem 0 .28rem;
}

/* Schon gesehene Kacheln treten leicht zurück, damit der
   Blick von selbst beim nächsten offenen Video landet. */
.video-kachel.ist-gesehen{opacity:.72}


/* ============================================================
   17. PRODUKTGRUPPEN

   Später soll jede Produktwelt ihre eigene Farbe bekommen.
   Dafür braucht die Seite oben nur eine dieser Klassen am
   body, zum Beispiel <body class="welt-vital">. Alle Karten
   der Seite wechseln dann automatisch mit.

   Die Werte unten sind ein erster Vorschlag und noch nicht
   abgestimmt. Sie bleiben bewusst hell, damit die Schrift in
   Light darauf sicher lesbar bleibt.
   ============================================================ */
.welt-beauty{
  --karte-flaeche: linear-gradient(140deg, #F7EDF3 0%, #FCFAFC 52%, #FDF5EA 100%);
}
.welt-vital{
  --karte-flaeche: linear-gradient(140deg, #EAF2EC 0%, #FAFCFA 52%, #FDF5EA 100%);
}
.welt-parfum{
  --karte-flaeche: linear-gradient(140deg, #F1EEF9 0%, #FBFAFD 52%, #FDF3E6 100%);
}
.welt-hygiene{
  --karte-flaeche: linear-gradient(140deg, #EAF0F6 0%, #FAFBFD 52%, #FDF5EA 100%);
}


/* ============================================================
   17b. STARTPAKETE

   Eine Paketkarte besteht aus dem Foto oben und dem Text
   darunter. Das Foto sitzt bündig in den Ecken der Karte,
   deshalb hat diese Karte ausnahmsweise keinen eigenen
   Innenabstand, der steckt unten im Textteil.

   Wenn du die Höhe der Bilder ändern willst, änderst du
   --paket-bildhoehe. Der Wert ist ein Seitenverhältnis,
   2/3 heißt zwei Teile breit zu drei Teilen hoch.

   2/3 ist genau das Format, in dem deine Paketfotos vorliegen,
   nämlich 1080 mal 1620 Punkte. Vorher stand hier 4/5, dadurch
   wurde oben und unten etwas abgeschnitten, weil das Bild in
   eine flachere Fläche gepresst wurde.
   ============================================================ */
:root{
  --paket-bildhoehe: 2/3;
}

.paket{
  padding:0;
  overflow:hidden;
}

/* Der Bildbereich. Das Foto wird vollständig hineingelegt und
   niemals beschnitten. Sollte ein Foto einmal ein anderes
   Format haben als die übrigen, bleibt links und rechts ein
   schmaler heller Rand stehen, aber es fehlt nichts. */
.paket__bild{
  position:relative;
  width:100%;
  aspect-ratio:var(--paket-bildhoehe);
  display:grid;place-items:center;
  background:var(--flaeche-3);
}
.paket__bild img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}

/* Fehlt das Foto, wird die Fläche flacher. Eine leere Fläche
   in voller Bildhöhe würde die Seite unnötig auseinanderziehen. */
.paket__bild--leer{aspect-ratio:16/7}

/* Steht statt des Fotos, solange keines hinterlegt ist. */
.paket__bild-leer{
  font-size:var(--fs-xl);
  color:var(--mauve-deep);
  opacity:.45;
  padding:0 1rem;text-align:center;
}

/* Das goldene Fähnchen oben links. Es wird nur gezeigt, wo in
   pakete-daten.php 'beliebt' auf true steht. Im Moment nutzt
   das keins, weil Beates Fotos die Schleife schon eingebaut
   haben und beides zusammen doppelt aussieht. */
.paket__fahne{
  position:absolute;top:.75rem;left:0;
  background:var(--sand-brand);color:#3F3220;
  font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .7rem .32rem;
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  box-shadow:var(--schatten);
}

.paket__text{padding:1.15rem 1.35rem 1.35rem}

/* Klein, Mittel oder Groß über dem Paketnamen. Bewusst nur
   Text und kein Kreis, der Kreis gehört zu den Antwortkarten. */
.paket__groesse{
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mauve-brand);font-weight:var(--gewicht-aktion);
  margin:0 0 .2rem;
}
.paket__name{font-size:var(--fs-2xl);margin:0 0 .9rem}

/* Die kleine Zeile über Inhalt und Vorteilen. */
.paket__label{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sand-deep);font-weight:var(--gewicht-aktion);
  margin:0 0 .35rem;
}

.paket__inhalt{
  list-style:none;margin:0 0 1.1rem;padding:0;
  display:flex;flex-direction:column;gap:.3rem;
}
.paket__inhalt li{
  position:relative;padding-left:1.1rem;
  font-size:var(--fs-sm);color:var(--ink);
}
.paket__inhalt li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;
  background:var(--sand-brand);
}

/* Der Satz "Genau das Richtige, wenn ..." direkt unter dem
   Namen. Er trägt die eigentliche Entscheidung, deshalb steht
   er oben und nicht am Ende der Karte. */
.paket__fuerwen{
  margin:0 0 1.15rem;
  color:var(--ink-soft);
  font-size:var(--fs-sm);
  line-height:1.5;
}

/* Der Preisblock. Die Zahl steht groß, die Erklärung leise
   darunter, damit der Preis nicht als Hürde wirkt. */
.paket__preis{
  margin:0 0 1.15rem;padding:.85rem 1rem;
  background:var(--sand-tint);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;gap:.3rem;
}
.paket__preis strong{
  font-size:var(--fs-xl);color:var(--mauve-deep);
  font-weight:var(--gewicht-aktion);
}
.paket__preis span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.45}

/* Der Hinweis bei einem Paket, das selbst schon Pro ist */
.paket__proschild{
  margin:0 0 .9rem;
  font-size:var(--fs-xs);
  color:var(--mauve);
  font-weight:var(--gewicht-aktion);
  text-align:center;
}

/* ---- Der Weg all in mit BusinessPro ----
   Steht unter dem ersten Knopf und ist bewusst ruhiger gehalten
   als der Basispreis darüber. Die einfache Entscheidung soll
   zuerst kommen, das Aufstocken ist das Angebot danach. */
.paket__pro{
  margin-top:1.1rem;padding:1rem;
  border:1px solid var(--mauve-brand);
  border-radius:var(--radius-sm);
  background:var(--mauve-tint);
}
.paket__pro-kopf{
  margin:0 0 .35rem;
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mauve);font-weight:var(--gewicht-aktion);
}
.paket__pro-preis{
  margin:0 0 .5rem;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.paket__pro-preis strong{
  font-size:var(--fs-lg);color:var(--mauve-deep);
  font-weight:var(--gewicht-aktion);
}
.paket__pro-preis span{font-size:var(--fs-xs);color:var(--ink-soft)}
.paket__pro-text{
  margin:0 0 .9rem;
  font-size:var(--fs-sm);color:var(--ink);line-height:1.5;
}


/* ============================================================
   17c. KARUSSELL

   Die Pakete liegen nebeneinander statt untereinander. Man
   wischt seitlich durch, jede Folie rastet dabei ein.

   Zwei Stellschrauben:

     --folie-breite      wie breit eine Folie auf dem Handy ist.
                         92% heißt, rechts schaut ein Streifen
                         des nächsten Pakets hervor. Genau das
                         ist das Signal "hier geht es weiter".
     --folie-breite-gr   dasselbe für große Bildschirme, dort
                         passen zwei Pakete nebeneinander.

   Das Ganze ist ein ganz normaler Scrollbereich. Ohne
   JavaScript kann man trotzdem wischen, es fehlen dann nur
   die Punkte und die Pfeile.
   ============================================================ */
:root{
  --folie-breite:    86%;
  --folie-breite-gr: 46%;
  --folie-abstand:   .85rem;
}

.karussell{margin:0 0 1rem}

.karussell__spur{
  display:flex;
  gap:var(--folie-abstand);

  overflow-x:auto;
  overscroll-behavior-x:contain;

  /* Jede Folie rastet mittig ein, sobald man loslässt. */
  scroll-snap-type:x mandatory;
  scroll-padding-inline:1.1rem;

  /* Links und rechts derselbe Abstand wie bei den Karten, damit
     die erste Folie mit dem Text darüber bündig steht. */
  padding:.2rem 1.1rem 1rem;

  /* Die graue Scrollleiste stört im App-Look. Wischen und
     Pfeile bleiben davon unberührt. */
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.karussell__spur::-webkit-scrollbar{display:none}

/* Tastaturbedienung: der Rahmen soll sichtbar sein, aber nicht
   hart am Kartenrand kleben. */
.karussell__spur:focus-visible{
  outline:2px solid var(--mauve-brand);
  outline-offset:-4px;
  border-radius:var(--radius-md);
}

.karussell__folie{
  flex:0 0 var(--folie-breite);
  scroll-snap-align:center;
  display:flex;
}
/* Alle Folien gleich hoch, der Knopf sitzt dadurch immer unten. */
.karussell__folie > .karte{width:100%;display:flex;flex-direction:column}
.karussell__folie .paket__text{display:flex;flex-direction:column;flex:1}
/* Schiebt Preis und Knopf ans untere Ende der Karte. */
.karussell__folie .paket__preis{margin-top:auto}

/* ---- Pfeile und Punkte unter dem Karussell ---- */
.karussell__steuerung{
  display:flex;align-items:center;justify-content:center;
  gap:.9rem;
  padding:0 1.1rem;
}

.karussell__pfeil{
  flex:0 0 auto;
  width:2.35rem;height:2.35rem;
  display:grid;place-items:center;
  font-size:1.35rem;line-height:1;
  color:var(--mauve-deep);
  background:var(--flaeche-2);
  border:1px solid var(--linie);
  border-radius:50%;
  cursor:pointer;
  transition:opacity .18s var(--kurve), transform .18s var(--kurve);
}
.karussell__pfeil:active{transform:scale(.94)}
/* Am ersten und am letzten Paket wird der Pfeil blass. Er
   verschwindet nicht, sonst springt die Zeile. */
.karussell__pfeil[disabled]{opacity:.28;cursor:default}

.karussell__punkte{display:flex;align-items:center;gap:.4rem}

.karussell__punkt{
  width:7px;height:7px;
  padding:0;border:0;border-radius:50%;
  background:var(--mauve-deep);
  opacity:.22;
  cursor:pointer;
  transition:opacity .2s var(--kurve), width .2s var(--kurve);
}
/* Der aktuelle Punkt wird zum kleinen Strich. Das liest sich
   auf einen Blick besser als ein nur dunklerer Punkt. */
.karussell__punkt.ist-aktiv{
  opacity:1;
  width:18px;
  border-radius:var(--radius-pill);
}

/* Auf großen Bildschirmen passen zwei Pakete nebeneinander. */
@media (min-width:861px){
  .karussell__folie{flex-basis:var(--folie-breite-gr)}
  .karussell__spur{padding-inline:1.25rem}
  .karussell__steuerung{padding-inline:1.25rem}
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt kein sanftes Gleiten, sondern harte Sprünge. */
/* ============================================================
   22. FREIGABE DER VIDEOS

   Die Fläche, die vor dem ersten Video statt des Players steht
   und nach der Zustimmung zu Vimeo fragt. Sie liegt genau im
   Rahmen des Videos und ist genauso groß, damit beim Zustimmen
   nichts springt.

   Was du hier vermutlich ändern willst:
     --videofrei-text   Schriftgröße des Textes darin
   ============================================================ */
:root{
  --videofrei-text: .82rem;
}

.videofrei{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.55rem;
  padding:1.1rem 1rem;
  text-align:center;
  overflow-y:auto;
}

.videofrei__titel{
  margin:0;
  font-size:var(--fs-sm);
  font-weight:var(--gewicht-aktion);
  color:var(--mauve-deep);
}

.videofrei__text{
  margin:0;
  font-size:var(--videofrei-text);
  line-height:1.5;
  color:var(--ink);
  max-width:34ch;
}

.videofrei__form{margin-top:.35rem}

/* Der Knopf darf im schmalen Hochformat nicht über den Rand
   hinauswachsen, deshalb bricht seine Beschriftung nicht um. */
.videofrei .btn{white-space:nowrap;padding-left:1.1rem;padding-right:1.1rem}

.videofrei__link{
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}


/* ============================================================
   23. PARTNERBEREICH

   Der Arbeitsplatz der Partner. Er benutzt dieselben Farben und
   dieselbe Schrift wie die App, ist aber nüchterner: keine
   Illustrationen zwischen den Blöcken, mehr Angaben auf
   weniger Platz.

   Was du hier vermutlich ändern willst:
     --einladung-abstand   Luft zwischen zwei Einladungen
   ============================================================ */
:root{
  --einladung-abstand: 1rem;
}

/* Der Abmeldeknopf oben rechts sitzt in einem Formular, das
   selbst keinen Platz einnehmen darf. */
.navleiste__abmelden{display:flex;margin:0}

/* ---------- Eine Einladung in der Liste ---------- */
.einladung{
  background:var(--karte-flaeche);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  padding:1rem 1.1rem 1.1rem;
  margin-bottom:var(--einladung-abstand);
}

.einladung__kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;
  margin-bottom:.5rem;
}

/* Der Code selbst. Feste Zeichenbreite, damit sich Ziffern und
   Buchstaben beim Abtippen nicht verwechseln lassen. */
.einladung__code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--mauve-deep);
  font-weight:var(--gewicht-aktion);
}

.einladung__status{
  font-size:var(--fs-xs);
  padding:.2rem .6rem;
  border-radius:999px;
  white-space:nowrap;
}
.einladung__status--gruen{background:#E4EFE6;color:#3A6B48}
.einladung__status--sand{background:var(--sand-tint);color:var(--sand-deep)}
.einladung__status--grau{background:#EDEAE4;color:var(--ink-soft)}

.einladung__name{
  margin:0 0 .2rem;
  font-size:1.05rem;
  color:var(--ink);
}

.einladung__stand{
  margin:0 0 .8rem;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:1.5;
}

/* Zeile aus Eingabefeld und Knopf nebeneinander. Auf schmalen
   Displays rutscht der Knopf unter das Feld. */
.einladung__form{
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.7rem;
}
.einladung__form .feld__eingabe{flex:1 1 12rem;min-height:44px}
.einladung__form .btn{flex:0 0 auto;min-height:44px}

/* Die Knöpfe unter einer Einladung. Jeder steckt in einem
   eigenen kleinen Formular, deshalb die Regel für form. */
.einladung__wege{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.einladung__wege form{margin:0}
.einladung__wege .btn{min-height:42px}

/* ---------- Ein frisch gezogener Code ---------- */
.codegross{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.5rem;
  letter-spacing:.08em;
  color:var(--mauve-deep);
  margin:.3rem 0 .6rem;
  word-break:break-all;
}
.codelink{
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  word-break:break-all;
  margin:0;
}

/* ---------- Was sie geantwortet hat ---------- */
.antwort{
  padding:.7rem 0;
  border-bottom:1px solid rgba(122,100,80,.16);
}
.antwort:last-child{border-bottom:0;padding-bottom:0}
.antwort__frage{
  margin:0 0 .2rem;
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sand-deep);
}
.antwort__text{margin:0;color:var(--ink);line-height:1.5}

/* ---------- Ihr Weg durch die App ---------- */
.weg{list-style:none;margin:0;padding:0}
.weg__punkt{
  display:flex;justify-content:space-between;gap:.8rem;
  padding:.4rem 0;
  border-bottom:1px solid rgba(122,100,80,.12);
  font-size:var(--fs-sm);
}
.weg__punkt:last-child{border-bottom:0}
.weg__was{color:var(--ink)}
.weg__wann{color:var(--ink-soft);white-space:nowrap}

/* ---------- Der Fuß des Partnerbereichs ---------- */
.partnerfuss{
  max-width:var(--wrap-text);
  margin:0 auto;
  padding:2rem 1.2rem 2.5rem;
  text-align:center;
}
.partnerfuss__hinweis{
  margin:0 0 .7rem;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  line-height:1.5;
}
.partnerfuss__links{margin:0;font-size:var(--fs-xs)}
.partnerfuss__links a{margin:0 .5rem;color:var(--ink-soft)}


@media (prefers-reduced-motion:reduce){
  .karussell__spur{scroll-behavior:auto}
}


/* ============================================================
   17d. HÄKCHENLISTE

   Für die Punkte, die in jedem Paket enthalten sind, und für
   die Zusatzvorteile von BusinessPro. Der Haken ersetzt den
   Aufzählungspunkt.
   ============================================================ */
.haken-liste{
  list-style:none;margin:.9rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;
}
.haken-liste li{
  position:relative;padding-left:1.6rem;
  font-size:var(--fs-sm);color:var(--ink);
  line-height:1.45;
}
.haken-liste li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--mauve-brand);
  font-weight:var(--gewicht-aktion);
}


/* ============================================================
   18. FORMULARE UND DANKESEITE

   Die Anmeldung und die Gesprächsanfrage. Beide liegen in einer
   Karte, damit sie zum Rest der App passen. Die Felder sind
   bewusst groß und weit auseinander, weil fast alle sie auf dem
   Handy mit dem Daumen ausfüllen.

   Was du hier vermutlich ändern willst:
     --feld-hoehe    wie hoch ein Eingabefeld ist
     --feld-abstand  wie weit die Felder auseinander liegen
   ============================================================ */
:root{
  --feld-hoehe:   52px;
  --feld-abstand: 1.15rem;
}

.formular{display:block}

/* Ein Feld, also Beschriftung, Eingabe, Hilfstext */
.feld{margin-bottom:var(--feld-abstand)}

.feld__label{
  display:block;
  margin-bottom:.35rem;
  font-size:var(--fs-sm);
  font-weight:var(--gewicht-aktion);
  color:var(--mauve-deep);
}

/* Der Stern hinter einer Pflichtangabe */
.feld__stern{color:var(--sand-deep);margin-left:.15rem}

/* Die Eingabe selbst. Sie liegt in Weiß auf der Karte, damit
   klar ist, wo man tippen kann. */
.feld__eingabe{
  width:100%;
  min-height:var(--feld-hoehe);
  padding:.75rem .9rem;
  border:1px solid rgba(122,100,80,.22);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.85);
  font-family:var(--font);
  font-size:1rem;              /* nicht kleiner, sonst zoomt das iPhone beim Antippen hinein */
  font-weight:var(--gewicht-leicht);
  color:var(--ink);
  line-height:1.45;
  transition:border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
  -webkit-appearance:none;
  appearance:none;
}
.feld__eingabe:focus{
  outline:none;
  border-color:var(--mauve);
  box-shadow:0 0 0 3px rgba(108,91,134,.14);
}
textarea.feld__eingabe{min-height:120px;resize:vertical}

/* Das Geburtsdatum. Ohne diese beiden Zeilen zeigt Safari auf
   dem iPhone das Datum kleiner und mittig, alle anderen Felder
   sind aber linksbündig. */
.feld__eingabe[type="date"]{min-height:var(--feld-hoehe);line-height:1.45}
.feld__eingabe[type="date"]::-webkit-date-and-time-value{text-align:left}

/* Die Liste zum Aufklappen bekommt ihr eigenes Pfeilchen,
   weil das des Browsers auf jedem Gerät anders aussieht. */
.feld__eingabe--auswahl{
  background-image:linear-gradient(45deg,transparent 50%,var(--mauve-brand) 50%),
                   linear-gradient(135deg,var(--mauve-brand) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.6rem;
}

.feld__hilfe{
  margin:.35rem 0 0;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}

/* Fehlt eine Angabe, wird das Feld rot umrandet und der Grund
   steht darunter. */
.feld__fehler{
  margin:.35rem 0 0;
  font-size:var(--fs-xs);
  color:#A0433A;
}
.feld--fehlt .feld__eingabe{border-color:#C2705F;background:#FFF7F5}

/* Das Häkchen für die Einwilligung */
.feld--check{margin-bottom:var(--feld-abstand)}
.check{
  display:flex;align-items:flex-start;gap:.7rem;
  cursor:pointer;
}
.check input{
  flex:none;
  width:22px;height:22px;margin-top:.1rem;
  accent-color:var(--mauve);
}
.check__text{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:1.45;
}
.feld--check.feld--fehlt .check__text{color:#A0433A}

/* Der Satz über dem Knopf und der Hinweis darunter */
.formular__pflicht{
  margin:0 0 .9rem;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.formular__fuss{
  margin:.9rem 0 0;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  line-height:1.5;
}

/* Die Karte über dem Formular mit dem gewählten Startpaket.
   Sie benutzt dieselben Bausteine wie die Paketkarte selbst,
   also .paket__label, .paket__inhalt und .paket__preis, damit
   beides gleich aussieht. */
.paketwahl__name{margin:0 0 .15rem}
.paketwahl__welt{
  margin:0 0 1.1rem;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.paketwahl__wechsel{
  margin:0;
  font-size:var(--fs-xs);
  text-align:center;
}

/* Der Hinweis unter dem Knopf, was das Absenden bedeutet.
   Er darf mehrere Absätze haben. */
.formular__recht{margin-top:1rem}
.formular__recht p{margin:0 0 .6rem}
.formular__recht p:last-child{margin-bottom:0}

/* Der Hinweiskasten, wenn etwas fehlt oder schiefgeht */
.note--fehler{background:#FDF1EE}
.note--fehler strong{color:#A0433A}

/* Die Falle für Maschinen. Sie darf nicht display:none sein,
   das durchschauen die besseren Spamprogramme. Stattdessen
   liegt sie außerhalb des Bildschirms. */
.honigtopf{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* Der große Haken auf der Dankeseite */
.danke__haken{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  margin:0 auto var(--space-2);
  border-radius:50%;
  background:var(--sand-brand);
  color:var(--white);
  font-size:1.7rem;
  line-height:1;
  box-shadow:0 6px 18px rgba(217,181,131,.45);
}


/* ============================================================
   19. SEITENÜBERGÄNGE
   Beim Wechsel auf die nächste Seite schiebt sich der neue
   Bildschirm herein, statt weiß aufzublitzen. Das ist der
   größte einzelne Unterschied zwischen Webseite und App.
   Alle großen Browser können das inzwischen, ältere zeigen
   einfach den gewohnten harten Wechsel.
   ============================================================ */
@view-transition{navigation:auto}

@keyframes herein-von-rechts{
  from{opacity:0;transform:translateX(24px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes hinaus-nach-links{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-18px)}
}
::view-transition-old(root){animation:hinaus-nach-links .2s var(--kurve) both}
::view-transition-new(root){animation:herein-von-rechts .28s var(--kurve) both}


/* ============================================================
   20. ILLUSTRATIONEN

   Die gezeichneten Motive. Sie stehen immer als echtes img in
   der Seite, niemals als Hintergrundbild im CSS.

   Verwendung: als erstes Kind einer Karte
   <img class="illu" src="assets/img/illu/wegweiser.svg" alt="" aria-hidden="true">

   Regel für den Auftritt: höchstens ein Motiv pro Karte und
   immer ganz oben. Das Auge bekommt zuerst das Bild, dann die
   Überschrift, dann den Text.

   Seit dem 17.08.2026 trägt auch jede Frageseite ein Motiv,
   Klasse .illu--frage. Diese Zeichnungen liegen als PNG mit
   durchsichtigem Hintergrund in assets/img/fragen/ und sind
   feiner gestrichelt als die Motive in illu/. Welches Bild auf
   welcher Frage steht, entscheidet das Feld 'bild' in
   includes/fragen.php, nicht dieses CSS.

   Die Farben der Striche stecken in den SVG-Dateien selbst,
   Mauve #4F4261 für die Linien und Rosé #EBC7C9 für die Flächen.
   ============================================================ */
.illu{
  display:block;
  width:100%;
  max-width:var(--illu-breite);
  height:auto;
  margin:0 auto var(--space-2);
}

/* Ein kleineres Motiv, etwa ein Zweig, eine Blume oder ein Herz */
.illu--klein{max-width:var(--illu-breite-klein);margin-bottom:var(--space-1)}

/* Ein Motiv, das die Karte über die volle Breite ausfüllt */
.illu--voll{max-width:100%}

/* Das Motiv oben auf einer Frageseite. Etwas breiter als die
   übrigen, weil diese Zeichnungen im Querformat liegen, und
   einen Hauch zurückgenommen, damit die Frage darunter führt. */
.illu--frage{max-width:var(--illu-breite-frage);opacity:.92}

/* Der Schriftzug unter einem persönlichen Absatz */
.illu--signatur{max-width:180px;margin-top:var(--space-2)}

/* Die Linie mit dem Herz. Sie steht zwischen zwei Abschnitten,
   nicht in einer Karte, und liegt deshalb direkt auf dem Sand. */
.illu-trenner{
  display:block;
  width:100%;
  max-width:var(--illu-trenner-breite);
  height:auto;
  margin:var(--space-3) auto var(--space-2);
  opacity:.7;
}


/* ============================================================
   21. KLEINE BILDSCHIRME
   Die App wird fast nur auf dem Handy benutzt, deshalb sind
   die Werte oben schon auf das Handy gerechnet. Hier stehen
   nur die Feinheiten.
   ============================================================ */
@media (min-width:861px){
  :root{
    --fs-3xl:2.2rem;--fs-2xl:1.75rem;--fs-xl:1.4rem;
    /* Am Rechner nimmt das Video ein Viertel der Fensterbreite.
       44,5vw Höhe entsprechen 25vw Breite. Die 78vh sorgen
       dafür, dass es auf einem flachen Bildschirm oben und
       unten nicht anstößt. */
    --video-hoch-hoehe:min(78vh, 44.5vw);
  }
  .wrap{padding:0 1.25rem}
  .grid{gap:1rem}
}

@media (max-width:860px){
  .grid--3,.grid--2{grid-template-columns:1fr}
}

@media (max-width:640px){
  :root{
    --logo-h:var(--logo-h-mob);
    /* Auf dem Handy dürfen die Motive etwas kleiner sein,
       damit über der Überschrift nicht zu viel Platz weggeht. */
    --illu-breite:270px;
    --illu-breite-frage:300px;
    --illu-trenner-breite:230px;
  }

  /* Das Wasserzeichen rutscht weiter in die Ecke, damit es auf
     dem schmalen Display nicht in die Überschrift läuft. */
  .wasserzeichen{width:46vw;opacity:.06;left:-14%;top:-7%}
  .wasserzeichen--rechts-oben{left:auto;right:-14%;top:-7%}
  .wasserzeichen--links-unten{left:-14%;top:auto;bottom:-9%}
  .wasserzeichen--rechts-unten{left:auto;right:-14%;top:auto;bottom:-9%}


  .sticky-cta__inner{padding:.55rem .9rem .65rem}
  .sticky-cta .btn{min-height:50px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}