/* Forest Air — gemeinsamer Rahmen
   Night-Sky-Palette nach forest-air-brand.
   Kontrastgesetz: heller Grund -> Forest #565E4C, dunkler Grund -> Sage Fog #A1A58C. */

:root{
  --nachthimmel:#232323;
  --creme:#F5F2EB;
  --salbeidunst:#E7E4D6;
  --forest:#565E4C;
  --salbeinebel:#A1A58C;
  --mondlicht:#E7DCC9;
  --breite:1200px;
  --kopfhoehe:74px;

  /* SEITENRAND — eine Größe für die ganze Seite.
     ----------------------------------------------------------------
     Am 15.08. gemessen: Auf der Produktseite standen die Abschnitte
     auf dem Handy bei 18, 20, 24 und 81 Bildpunkten vom Rand — vier
     verschiedene Fluchtlinien auf einer Seite. Auf der Startseite
     waren es 16, 20 und 24. Jede Datei hatte sich ihren eigenen Rand
     gesetzt, und beim Scrollen wandert der Text dann sichtbar hin
     und her, ohne dass man sagen kann, woran es liegt.

     Ab hier gilt: JEDER Abschnittsbehälter benutzt var(--rand).
     Wer einen eigenen Wert einträgt, bricht die Flucht. */
  --rand:24px;
}
@media (max-width:700px){ :root{ --rand:20px; } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--nachthimmel);
  color:var(--creme);
  font-family:"Mulish","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}

.fa-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--creme);color:var(--nachthimmel);padding:12px 20px;border-radius:0 0 6px 0;
}
.fa-skip:focus{left:0}

/* ------------------------------------------------------------------ Kopf */
.fa-kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(35,35,35,.86);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(231,228,214,.14);
  transition:background .3s ease, border-color .3s ease;
}
.fa-kopf.gescrollt{background:rgba(35,35,35,.97)}
/* DIE KOPFZEILE MUSS IN DIE INHALTSSPALTE PASSEN — gemessen 15.08.
   ------------------------------------------------------------------
   Gefunden mit dem Geometrie-Prüfer, auf ALLEN 19 Seiten: der Inhalt
   der Kopfzeile war 1376 px breit, der Kasten aber auf 1200 gedeckelt.
   Weil overflow sichtbar ist und das Fenster breiter als 1376 war,
   entstand kein Rollbalken — die Knöpfe standen einfach 176 px über
   der rechten Kante der Inhaltsspalte.

   Sichtbar wurde das als KRUMMER RAND: links begann das Logo bei
   200 px (bündig mit allem darunter), rechts endete „Gespräch buchen"
   bei 1576 — also 24 px vom Fensterrand. Links 200, rechts 24. Genau
   das sieht man als „nicht sauber eingerückt", ohne benennen zu
   können, woran es liegt.

   Der Ausweg ist nicht ein breiterer Kasten (dann steht das Logo
   nicht mehr über dem Text darunter), sondern engere Maße in der
   Zeile selbst. Sie stehen unten gesammelt unter „Kopfzeile: Platz
   sparen". Sollwert: .fa-kopf-innen scrollWidth <= clientWidth. */
.fa-kopf-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  min-height:var(--kopfhoehe);
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
}
.fa-marke{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--creme);flex:0 0 auto}
.fa-marke-name{font-family:"Anton","Arial Narrow",sans-serif;letter-spacing:.14em;font-size:19px;line-height:1}
.fa-marke-claim{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--salbeinebel)}

.fa-nav{display:flex;gap:22px;margin-left:auto;flex-wrap:nowrap}
.fa-nav a{
  color:var(--creme);text-decoration:none;font-size:14px;letter-spacing:.04em;
  padding:6px 0;position:relative;white-space:nowrap;opacity:.86;
}
.fa-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--salbeinebel);transition:right .28s ease;
}
.fa-nav a:hover{opacity:1}
.fa-nav a:hover::after,.fa-nav a.aktiv::after{right:0}
.fa-nav a.aktiv{opacity:1;color:var(--mondlicht)}

.fa-kopf-rechts{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.fa-sprache{
  color:var(--salbeinebel);text-decoration:none;font-size:12px;letter-spacing:.12em;
  border:1px solid rgba(161,165,140,.45);border-radius:999px;padding:5px 11px;
  transition:background .2s ease,color .2s ease;
}
.fa-sprache:hover{background:var(--salbeinebel);color:var(--nachthimmel)}
.fa-cta{
  background:var(--mondlicht);color:var(--nachthimmel);text-decoration:none;
  font-size:13px;letter-spacing:.06em;padding:9px 18px;border-radius:999px;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}
.fa-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(231,220,201,.22)}

.fa-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.fa-burger span{display:block;width:24px;height:2px;background:var(--creme);margin:5px 0;transition:transform .3s,opacity .3s}
.fa-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fa-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fa-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------- Inhalt */
.fa-sektion{position:relative}
.fa-halter{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
}
.fa-halter.fa-breit{max-width:none;padding:0}
.fa-block{
  container-type:inline-size;
  position:relative;width:100%;
}
@media (min-width:1000px){
  .fa-halter{min-height:var(--hoehe,auto)}
}
.fa-zeile{
  max-width:var(--breite);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:var(--spalten);gap:32px;align-items:center;
}
/* WICHTIG: margin:0 auto muss hier weg.
   .fa-halter zentriert sich sonst per auto-Rand — und ein Rasterfeld mit
   automatischem Rand streckt sich nicht mehr auf seine Spalte, sondern nimmt
   die Breite seines Inhalts. Der Inhalt ist ein container-type:inline-size,
   und der steuert zur Breitenberechnung genau null bei. Ergebnis: eine Spalte
   mit 0 px Breite, ein unsichtbarer Textblock und ein grosses Loch neben dem
   Bild. Beide Regeln fuer sich sind harmlos, zusammen nicht. */
.fa-zeile > .fa-halter,
.fa-zeile > .fa-bild,
.fa-zeile > .fa-text{padding:0;margin:0;max-width:none;width:100%;min-width:0}
.fa-bild{margin:0;max-width:var(--breite);margin-inline:auto;padding:0 24px}
/* Nicht hochrechnen: die Grenze steht als max-width am Bild selbst und ist die
   echte Dateibreite (04_bauen.py). Ein Teil dieser Bilder liegt nur 254 bis 720
   Bildpunkte breit vor; auf 1152 gezogen werden sie matschig. */
.fa-bild img{display:block;width:100%;height:auto;
  margin-inline:auto;border-radius:4px}
/* In einer zweispaltigen Reihe steht das Foto neben einer Karte, die deutlich
   hoeher baut. Oben buendig statt mittig — so beginnen Karte und Foto auf
   derselben Linie, wie auf der Originalseite. */
.fa-zeile > .fa-bild{align-self:start}

/* --------------------------------------------------- Breiter Filmstreifen
   Der Abschnitt zwischen den Kundenstimmen und der Forschung. Auf der
   Wix-Seite ist der Film der Hintergrund einer leeren Sektion und wird
   formatfuellend beschnitten — 980 x 459 im Entwurf, also rund 3,1 : 1 bei
   1440 px. Die Hoehe waechst deshalb mit der Breite mit, wird aber nach unten
   begrenzt: bei 390 px waere ein 3,1 : 1-Streifen 125 px hoch und man saehe
   nichts mehr vom Geraet. */
.fa-videoband{
  position:relative;width:100%;overflow:hidden;
  height:clamp(230px,31.9vw,520px);
  background:var(--nachthimmel);
}
.fa-videoband > video{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.fa-text{max-width:var(--breite);margin:0 auto;padding:var(--rand);line-height:1.65}
.fa-text a{color:var(--salbeinebel)}
.fa-app{
  max-width:var(--breite);margin:24px auto;padding:34px 24px;text-align:center;
  border:1px dashed rgba(161,165,140,.4);border-radius:6px;color:var(--salbeinebel);font-size:14px;
}

/* ------------------------------------------------------------------ Shop */
.fa-korb{position:relative;color:var(--creme);opacity:.85;display:flex;align-items:center;text-decoration:none}
.fa-korb:hover{opacity:1}
.fa-korb span{
  position:absolute;top:-6px;right:-9px;min-width:16px;height:16px;line-height:16px;
  background:var(--mondlicht);color:var(--nachthimmel);border-radius:999px;
  font-size:10px;text-align:center;padding:0 4px;
}
.fa-schmal{max-width:820px;margin:0 auto;padding:56px 24px}
.fa-schmal h1{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  letter-spacing:.01em;font-size:32px;margin:0 0 26px}

.fa-produkt-innen{
  max-width:var(--breite);margin:0 auto;padding:56px var(--rand);
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
}
.fa-produkt-innen figure{margin:0}
.fa-produkt-innen img{width:100%;border-radius:5px;background:#2b2b2b}
.fa-produkt-text h1{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:300;font-size:clamp(30px,3.6vw,46px);letter-spacing:.01em;line-height:1.08;margin:0 0 16px}
.fa-produkt-kurz{color:var(--salbeinebel);line-height:1.7;margin:0 0 24px;max-width:44ch}
.fa-produkt-preis{font-size:30px;margin:0 0 26px;display:flex;align-items:baseline;gap:12px}
.fa-produkt-preis small{font-size:11.5px;color:var(--salbeinebel);letter-spacing:.04em}
.fa-produkt-text .fa-cta{border:0;cursor:pointer;font-family:inherit;font-size:14px;padding:13px 26px}

.fa-wk{width:100%;border-collapse:collapse}
.fa-wk td{border-bottom:1px solid rgba(231,228,214,.12);padding:16px 10px;vertical-align:middle}
.fa-wk-bild img{width:74px;border-radius:4px}
.fa-wk-name span{display:block;color:var(--salbeinebel);font-size:12.5px;margin-top:4px}
.fa-wk-menge input{
  width:64px;background:transparent;border:1px solid rgba(231,228,214,.25);
  color:var(--creme);padding:7px 9px;border-radius:4px;font:inherit;
}
.fa-wk-summe{text-align:right;white-space:nowrap}
.fa-wk td button{background:none;border:0;color:var(--salbeinebel);font-size:20px;cursor:pointer;line-height:1}
.fa-wk td button:hover{color:var(--creme)}
.fa-wk-fuss{display:flex;justify-content:space-between;align-items:baseline;padding:22px 10px 0;font-size:19px}
.fa-wk-hinweis{color:var(--salbeinebel);font-size:12.5px;margin:8px 10px 26px}
.fa-wk-weiter{display:inline-block}
.fa-wk-leer{color:var(--salbeinebel)}
.fa-wk-leer a{color:var(--mondlicht)}

.fa-kasse-zeile{display:flex;justify-content:space-between;gap:24px;padding:13px 0;
  border-bottom:1px solid rgba(231,228,214,.12)}
.fa-kasse-summe{font-size:19px;border-bottom:0;padding-top:18px}
.fa-zahlung-offen{
  margin-top:34px;padding:26px;border:1px dashed rgba(161,165,140,.45);border-radius:6px;
}
.fa-zahlung-offen strong{display:block;color:var(--mondlicht);margin-bottom:8px}
.fa-zahlung-offen p{color:var(--salbeinebel);line-height:1.7;margin:0 0 20px;font-size:14px}
.fa-zahlung-offen .fa-cta{display:inline-block}

/* --- Bezahlwege ------------------------------------------------------ */
.fa-zahlung-titel{font-size:21px;margin:38px 0 18px;color:var(--creme)}
.fa-zahlwege{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fa-zahlweg{
  display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;
  padding:22px;border:1px solid rgba(161,165,140,.38);border-radius:6px;
  background:rgba(231,228,214,.03);color:inherit;font:inherit;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.fa-zahlweg:hover:not(:disabled){
  border-color:var(--salbeinebel);background:rgba(231,228,214,.07);transform:translateY(-2px);
}
.fa-zahlweg:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
.fa-zahlweg:disabled{opacity:.5;cursor:default}
.fa-zahlweg-name{color:var(--mondlicht);font-size:16.5px}
.fa-zahlweg-text{color:var(--salbeinebel);font-size:13.5px;line-height:1.65}

.fa-ueberweisung{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.fa-ueberweisung-hinweis{color:var(--salbeinebel);font-size:14px;margin:0}
.fa-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fa-feld label{color:var(--salbeinebel);font-size:13px;letter-spacing:.04em}
.fa-optional{color:rgba(161,165,140,.7)}
.fa-feld input,.fa-feld textarea{
  background:rgba(231,228,214,.05);border:1px solid rgba(161,165,140,.34);border-radius:4px;
  color:var(--creme);font:inherit;font-size:15px;padding:11px 13px;width:100%;
}
.fa-feld textarea{resize:vertical;min-height:86px;line-height:1.6}
.fa-feld input:focus,.fa-feld textarea:focus{
  outline:none;border-color:var(--mondlicht);background:rgba(231,228,214,.09);
}
.fa-ueberweisung .fa-cta{align-self:flex-start;margin-top:4px}

.fa-meldung{margin:18px 0 0;font-size:14px;line-height:1.7;color:var(--salbeinebel);min-height:1em}
.fa-meldung.gut{color:var(--mondlicht)}
.fa-meldung.falsch{color:#D98B7A}
.fa-zahlung-fuss{color:var(--salbeinebel);font-size:12.5px;line-height:1.7;margin:26px 0 0}
.fa-leer{color:var(--salbeinebel)}

@media (max-width:700px){
  .fa-zahlwege{grid-template-columns:1fr}
}

@media (max-width:900px){
  .fa-produkt-innen{grid-template-columns:1fr;gap:28px;padding:34px 16px}
  .fa-produkt-text h1{font-size:31px}
  .fa-wk-bild{display:none}
}

/* ------------------------------------------------------------------ Fuss
   ACHTUNG, ZWEI ALTLASTEN, die hier standen und beim Nachmessen am
   15.08. aufgefallen sind. Beide sind entfernt, beide bitte nicht
   zurueckholen:

     1. .fa-fuss trug hier padding:52px 24px 34px — und .fa-fuss-innen
        weiter unten noch einmal clamp(48px,6vw,80px) oben und
        clamp(30px,4vw,44px) unten. Beides galt gleichzeitig. Bei
        1440 px waren das 210 px reines Polster, das niemand gewollt
        hat: die untere Regel ueberschreibt die obere NICHT, weil sie
        einen anderen Selektor trifft (.fa-fuss-innen statt .fa-fuss).
        Deshalb steht das Polster jetzt an genau EINER Stelle.

     2. .fa-fuss-marke p hat ALLE Absaetze im Markenblock in
        Grossbuchstaben mit 2,2 px Sperrung gesetzt — also auch den
        beschreibenden Satz, der 14 px und normal gesetzt sein sollte.
        Der Selektor ist spezifischer als .fa-fuss-satz und hat
        gewonnen, ohne dass es jemand gesehen haette. Der Satz wurde
        also seit dem Umbau in Versalien geschrien.

   .fa-fuss-nav gehoerte zur alten einreihigen Fassung und wird vom
   Generator nicht mehr ausgegeben — deshalb ersatzlos weg.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------- Schmal */
/* Zwischenbreiten: Navigation enger stellen, statt sie umbrechen zu lassen */
@media (max-width:1420px) and (min-width:1261px){
  .fa-nav{gap:17px}
  .fa-nav a{font-size:13px}
  .fa-kopf-innen{gap:18px}
}
@media (max-width:1260px){
  .fa-burger{display:block}
  .fa-nav{
    position:fixed;inset:var(--kopfhoehe) 0 auto 0;
    flex-direction:column;gap:0;margin:0;
    background:#1b1b1b;
    /* Polster erst im geoeffneten Zustand — sonst bleibt bei max-height:0
       ein sichtbarer Streifen stehen, in dem der erste Menuepunkt durchscheint */
    padding:0 24px;
    max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
  }
  .fa-nav.offen{max-height:70vh;padding:18px 24px 26px}
  .fa-nav a{padding:13px 0;border-bottom:1px solid rgba(231,228,214,.08);font-size:15px}
  .fa-kopf-rechts{order:3}
  /* Nur der Knopf IM KOPF weicht — der Knopf im Inhalt bleibt.
     Vorher galt die Regel fuer alle .fa-cta und hat auch den
     Hauptknopf im Hero verschwinden lassen. */
  .fa-kopf-rechts .fa-cta{display:none}
  .fa-zeile{grid-template-columns:1fr;gap:20px}
  /* Untereinander zuerst das Foto, dann der Text — so wie die Originalseite
     es auf dem Handy zeigt. Betrifft nur Reihen, in denen ueberhaupt ein
     Bild steht; alle anderen Reihen haben kein .fa-bild als Kind. */
  .fa-zeile > .fa-bild{order:-1}
}
@media (max-width:560px){
  .fa-fuss-nav{grid-template-columns:1fr 1fr;gap:10px 18px}
}
@media (max-width:900px){
  .fa-halter{padding:0 var(--rand)}
  .fa-bild,.fa-text{padding-inline:var(--rand)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Kopf auf sehr schmalen Geraeten */
@media (max-width:430px){
  .fa-marke-bild{height:19px}
  .fa-marke-claim{display:none}
  .fa-kopf-innen{gap:14px;padding:0 16px}
}

/* Der Zusatz unter dem Preis verweist auf die Seite, die Versand und Steuern
   erklaert — so wie es der Abschnitt "Versand & Steuern" auf der Originalseite
   tut. Eine Behauptung ueber enthaltene Steuern steht hier bewusst nicht. */
.fa-produkt-preis small a{color:var(--salbeinebel);text-decoration:none;
  border-bottom:1px solid rgba(161,165,140,.4);transition:color .25s ease,border-color .25s ease}
.fa-produkt-preis small a:hover{color:var(--creme);border-color:var(--creme)}

/* ==================================================== Sprungpalette (Cmd+K) */
.fa-lupe{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid rgba(161,165,140,.30);
  color:var(--salbeinebel);border-radius:999px;padding:6px 11px 6px 9px;
  font:inherit;font-size:11px;letter-spacing:.06em;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.fa-lupe:hover{border-color:rgba(231,228,214,.55);color:var(--creme);background:rgba(231,228,214,.06)}
.fa-lupe-taste{font-variant-numeric:tabular-nums;opacity:.75}
@media (max-width:1180px){.fa-lupe-taste{display:none}}
@media (max-width:820px){.fa-lupe{display:none}}

.fa-palette{
  position:fixed;inset:0;z-index:210;display:none;
  align-items:flex-start;justify-content:center;
  padding:clamp(60px,14vh,160px) 20px 20px;
  background:rgba(18,18,18,.72);backdrop-filter:blur(10px);
}
.fa-palette.auf{display:flex}
.fa-pal-kasten{
  width:min(560px,100%);background:#232323;color:var(--creme);
  border:1px solid rgba(231,228,214,.16);border-radius:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.55);padding:18px 18px 14px;
}
.fa-pal-titel{
  margin:0 0 12px;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-pal-feld{
  width:100%;box-sizing:border-box;background:rgba(231,228,214,.06);
  border:1px solid rgba(231,228,214,.18);border-radius:9px;
  color:var(--creme);font:inherit;font-size:16px;padding:12px 14px;
  outline:none;transition:border-color .25s ease;
}
.fa-pal-feld:focus{border-color:rgba(231,220,201,.6)}
.fa-pal-feld::placeholder{color:rgba(161,165,140,.8)}
.fa-pal-liste{list-style:none;margin:12px 0 0;padding:0;max-height:46vh;overflow:auto}
.fa-pal-liste li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 12px;border-radius:8px;cursor:pointer;font-size:15px;
}
.fa-pal-liste li.an{background:rgba(231,228,214,.12)}
.fa-pal-liste li:hover{background:rgba(231,228,214,.08)}
.fa-pal-pfad{font-size:12px;color:var(--salbeinebel);font-variant-numeric:tabular-nums}
.fa-pal-leer{color:var(--salbeinebel);cursor:default}
.fa-pal-hilfe{
  margin:12px 2px 0;font-size:11.5px;letter-spacing:.05em;color:var(--salbeinebel);opacity:.8;
}

/* ================================================= Warenkorb-Schublade */
.fa-schublade{position:fixed;inset:0;z-index:200;display:none}
.fa-schublade.auf{display:block}
.fa-schub-grund{
  position:absolute;inset:0;background:rgba(18,18,18,.62);backdrop-filter:blur(6px);
  animation:fa-schub-ein .35s ease both;
}
@keyframes fa-schub-ein{from{opacity:0}to{opacity:1}}
.fa-schub-blatt{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:#232323;color:var(--creme);
  border-left:1px solid rgba(231,228,214,.14);
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  animation:fa-schub-rein .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fa-schub-rein{from{transform:translateX(100%)}to{transform:none}}
body.rm .fa-schub-blatt,body.rm .fa-schub-grund{animation:none}
.fa-schub-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 20px 16px;border-bottom:1px solid rgba(231,228,214,.12);
}
.fa-schub-kopf p{
  margin:0;font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-schub-zu{
  background:transparent;border:1px solid rgba(231,228,214,.2);color:var(--creme);
  width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s ease,background .25s ease;
}
.fa-schub-zu:hover{border-color:rgba(231,228,214,.55);background:rgba(231,228,214,.08)}
.fa-schub-innen{flex:1;overflow:auto;padding:18px 20px 20px;display:flex;flex-direction:column}
.fa-schub-leer{margin:6px 0 18px;color:var(--salbeinebel)}
.fa-schub-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.fa-schub-liste li{display:flex;gap:14px;align-items:flex-start}
.fa-schub-liste img{
  width:76px;height:76px;object-fit:cover;border-radius:8px;flex:0 0 auto;
  background:#1b1b1b;
}
.fa-schub-pos{flex:1;min-width:0}
.fa-schub-pos b{display:block;font-size:15px;margin-bottom:3px}
.fa-schub-preis{display:block;font-size:14px;color:var(--mondlicht);margin-bottom:8px}
.fa-schub-menge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--salbeinebel)}
.fa-schub-menge button{
  width:26px;height:26px;border-radius:6px;cursor:pointer;font:inherit;
  background:rgba(231,228,214,.08);border:1px solid rgba(231,228,214,.18);color:var(--creme);
}
.fa-schub-menge button:hover{background:rgba(231,228,214,.16)}
.fa-schub-weg{
  width:auto !important;padding:0 9px;margin-left:auto;font-size:12px !important;
  color:var(--salbeinebel) !important;
}
.fa-schub-fuss{margin-top:auto;padding-top:20px}
.fa-schub-summe{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-top:1px solid rgba(231,228,214,.12);margin-bottom:14px;
}
.fa-schub-summe strong{font-family:"Space Grotesk",sans-serif;font-size:20px;color:var(--mondlicht)}
.fa-schub-cta{display:block;text-align:center;width:100%;box-sizing:border-box}
.fa-schub-zweit{display:block;text-align:center;margin-top:14px;font-size:13.5px}

/* Die Lupe hat den Kopf 14 px über den rechten Rand geschoben — gemessen auf
   allen 28 Seiten. Der Kopf hat bei 1440 px genau 1200 px Platz, und Marke,
   Navigation und rechte Gruppe brauchten zusammen 1214. Statt die Lupe wieder
   auszubauen, wird enger gesetzt: die Tastenkombination erscheint erst ab
   1500 px, die Navigation rückt zusammen. */
@media (max-width:1499px){
  .fa-lupe-taste{display:none}
  .fa-lupe{padding:6px 9px}
}
@media (max-width:1360px){
  .fa-nav{gap:16px}
  .fa-nav a{font-size:13px}
  .fa-kopf-rechts{gap:11px}
  .fa-kopf-innen{gap:14px}
}
@media (max-width:1200px){
  .fa-kopf-linie{display:none}
  .fa-nav{gap:13px}
}

/* ============================================ Gespräch buchen: drei Wege */
.fa-terminmenue{
  position:absolute;top:calc(100% + 12px);right:0;z-index:60;
  width:min(340px,86vw);padding:14px;
  background:#232323;border:1px solid rgba(231,228,214,.16);border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.fa-kopf-rechts{position:relative}
.fa-tm-titel{
  margin:2px 4px 12px;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-tm-weg{
  display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:10px;
  text-decoration:none;color:var(--creme);transition:background .25s ease;
}
.fa-tm-weg:hover{background:rgba(231,228,214,.09)}
.fa-tm-zeichen{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(231,228,214,.09);color:var(--mondlicht);
}
.fa-tm-weg b{display:block;font-size:14.5px;font-weight:500;margin-bottom:2px}
.fa-tm-weg small{display:block;font-size:12.5px;color:var(--salbeinebel);line-height:1.45}
@media (max-width:820px){.fa-terminmenue{right:auto;left:0}}

/* ==================================================== Berater (Chatfenster) */
.fa-be-knopf{
  position:fixed;right:20px;bottom:20px;z-index:150;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 18px;border-radius:999px;border:1px solid rgba(231,220,201,.3);
  background:var(--mondlicht);color:#232323;
  font:inherit;font-size:13.5px;letter-spacing:.02em;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  transition:transform .35s var(--e-satt),box-shadow .35s ease;
}
.fa-be-knopf:hover{transform:translateY(-2px);box-shadow:0 24px 54px rgba(0,0,0,.5)}
@media (max-width:620px){
  .fa-be-knopf span{display:none}
  .fa-be-knopf{padding:14px;right:16px;bottom:16px}
}
body.rm .fa-be-knopf{transition:none}

.fa-berater{
  position:fixed;right:20px;bottom:84px;z-index:151;
  width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 130px));
  display:flex;flex-direction:column;
  background:#232323;color:var(--creme);
  border:1px solid rgba(231,228,214,.16);border-radius:16px;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  animation:fa-be-rein .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fa-be-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.rm .fa-berater{animation:none}
.fa-be-kopf{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 13px;border-bottom:1px solid rgba(231,228,214,.12);
}
.fa-be-titel{margin:0 0 3px;font-family:"Space Grotesk",sans-serif;font-size:14.5px}
.fa-be-unter{margin:0;font-size:11.5px;color:var(--salbeinebel);line-height:1.45;max-width:30ch}
.fa-be-zu{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(231,228,214,.2);color:var(--creme);
  display:grid;place-items:center;transition:background .25s ease,border-color .25s ease;
}
.fa-be-zu:hover{background:rgba(231,228,214,.1);border-color:rgba(231,228,214,.5)}
.fa-be-verlauf{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.fa-be-blase{max-width:88%}
.fa-be-blase p{margin:0;font-size:14.5px;line-height:1.6}
.fa-be-bot{
  align-self:flex-start;background:rgba(231,228,214,.07);
  border:1px solid rgba(231,228,214,.1);border-radius:4px 14px 14px 14px;padding:12px 14px;
}
.fa-be-ich{
  align-self:flex-end;background:var(--mondlicht);color:#232323;
  border-radius:14px 4px 14px 14px;padding:11px 14px;
}
.fa-be-weiter{
  display:inline-block;margin-top:9px;font-size:13px;color:var(--mondlicht);
  text-decoration:none;border-bottom:1px solid rgba(231,220,201,.4);padding-bottom:2px;
}
.fa-be-weiter:hover{border-color:var(--mondlicht)}
.fa-be-vorschlaege{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fa-be-vorschlaege p{
  width:100%;margin:2px 0 2px;font-family:"Space Grotesk",sans-serif;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-be-vorschlaege button{
  cursor:pointer;font:inherit;font-size:12.5px;
  background:transparent;border:1px solid rgba(161,165,140,.32);color:var(--salbeinebel);
  border-radius:999px;padding:6px 12px;transition:border-color .25s ease,color .25s ease;
}
.fa-be-vorschlaege button:hover{border-color:rgba(231,228,214,.6);color:var(--creme)}
.fa-be-form{
  display:flex;gap:9px;padding:13px 14px;border-top:1px solid rgba(231,228,214,.12);
}
.fa-be-feld{
  flex:1;background:rgba(231,228,214,.06);border:1px solid rgba(231,228,214,.16);
  border-radius:999px;padding:10px 15px;color:var(--creme);font:inherit;font-size:14.5px;
  outline:none;transition:border-color .25s ease;
}
.fa-be-feld:focus{border-color:rgba(231,220,201,.55)}
.fa-be-feld::placeholder{color:rgba(161,165,140,.85)}
.fa-be-senden{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:var(--mondlicht);border:0;color:#232323;display:grid;place-items:center;
  transition:transform .3s var(--e-satt);
}
.fa-be-senden:hover{transform:translateX(2px)}
@media (max-width:620px){
  .fa-berater{right:12px;left:12px;width:auto;bottom:74px;max-height:calc(100vh - 110px)}
}

/* ============================================ Termin statt Fremd-Einbettung
   Auf den drei Partnerseiten stand ein Calendly-<iframe> mit 1500 px
   reservierter Hoehe. Ohne Netz laedt es nichts und hinterlaesst ein Loch;
   mit Netz schickt es die IP jedes Besuchers zu einem Dritten. An seiner
   Stelle steht jetzt der gleiche Weg als Verweis. */
.fa-termin-block{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(20px,3vh,34px) 0;
}
.fa-termin-hinweis{
  margin:0;font-family:"Barlow",system-ui,sans-serif;font-size:13.5px;
  color:var(--salbeinebel);
}
.fa-termin-wege{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:"Space Grotesk",sans-serif;font-size:13.5px;
}
.fa-termin-wege a{color:var(--mondlicht);text-decoration:none;
  border-bottom:1px solid rgba(231,220,201,.35);padding-bottom:2px}
.fa-termin-wege a:hover{border-bottom-color:var(--mondlicht)}
.fa-termin-wege span{color:var(--salbeinebel)}

/* Lange Adressen brechen. Auf dem Impressum lief
   "www.gov.uk/government/organisations/companies-house" bei 390 px 52 px ueber
   die Karte hinaus und wurde am Rand abgeschnitten. Ein Wort ohne Trennstelle
   bricht nur, wenn man es ausdruecklich erlaubt. */
.fa-text a,
.info-value-text a,
.fa-block a[href^="http"]{overflow-wrap:anywhere}

/* ====================================================================
   Kasse — als Weg gedacht, nicht als Formular
   Fortschritt oben, Ware sichtbar, ein Bezahlweg nach dem anderen,
   und am Ende ein Moment, der sich nach Ankunft anfühlt.
   ==================================================================== */

.fa-kasse{margin-top:40px}

/* Beim Scrollen einblenden. Wer Bewegung abbestellt hat, sieht alles sofort. */
.zeig{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e,cubic-bezier(.22,.61,.36,1)),transform .7s cubic-bezier(.22,.61,.36,1)}
.zeig.da{opacity:1;transform:none}
body.rm .zeig{opacity:1;transform:none;transition:none}

/* --- Fortschritt --- */
.fa-fortschritt{
  display:flex;align-items:center;gap:0;list-style:none;margin:0 0 40px;padding:0;
  counter-reset:s;
}
.fa-fortschritt-punkt{
  display:flex;align-items:center;gap:10px;color:var(--salbeinebel);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.45;
}
.fa-fortschritt-punkt + .fa-fortschritt-punkt::before{
  content:"";width:clamp(18px,6vw,64px);height:1px;background:rgba(161,165,140,.35);margin:0 14px;
}
.fa-fortschritt-kreis{
  width:26px;height:26px;border-radius:999px;border:1px solid rgba(161,165,140,.5);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
}
.fa-fortschritt-kreis svg{width:13px;height:13px}
.fa-fortschritt-punkt.jetzt{opacity:1;color:var(--mondlicht)}
.fa-fortschritt-punkt.jetzt .fa-fortschritt-kreis{
  border-color:var(--mondlicht);background:rgba(231,220,201,.12);
  box-shadow:0 0 0 4px rgba(231,220,201,.07);
}
.fa-fortschritt-punkt.erledigt{opacity:.85;color:var(--salbeinebel)}
.fa-fortschritt-punkt.erledigt .fa-fortschritt-kreis{
  border-color:var(--forest);background:var(--forest);color:var(--creme);
}

/* --- Kopf --- */
.fa-kasse-kopf{margin-bottom:30px}
.fa-kasse-marke{width:52px;height:52px;opacity:.9;margin-bottom:16px}
.fa-kasse-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:.01em;margin:0 0 8px;color:var(--creme);
}
.fa-kasse-unter{color:var(--salbeinebel);font-size:14.5px;line-height:1.65;margin:0;max-width:52ch}

/* --- Die Ware, sichtbar --- */
.fa-ware{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.fa-ware-zeile{
  display:flex;align-items:center;gap:18px;padding:16px 18px;
  border:1px solid rgba(161,165,140,.2);border-radius:8px;
  background:linear-gradient(135deg,rgba(231,228,214,.05),rgba(231,228,214,.015));
  transition:border-color .3s ease;
}
.fa-ware-zeile:hover{border-color:rgba(161,165,140,.4)}
.fa-ware-bild{
  width:78px;height:78px;flex:0 0 auto;object-fit:contain;border-radius:5px;
  background:radial-gradient(circle at 50% 40%,rgba(231,220,201,.1),transparent 70%);
}
.fa-ware-text{flex:1;min-width:0}
.fa-ware-name{margin:0;font-size:16.5px;color:var(--creme)}
.fa-ware-menge{margin:4px 0 0;font-size:12.5px;color:var(--salbeinebel);letter-spacing:.06em}
.fa-ware-preis{margin:0;font-size:17px;color:var(--mondlicht);white-space:nowrap}

/* --- Summe --- */
.fa-summe{
  border:1px solid rgba(161,165,140,.26);border-radius:8px;padding:19px 22px;
  background:linear-gradient(180deg,rgba(231,228,214,.045),rgba(231,228,214,.012));
}
.fa-summe-zeile{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-size:15px}
.fa-summe-klein{color:var(--salbeinebel);font-size:13.5px}
.fa-summe-rabatt{color:var(--mondlicht)}
.fa-summe-gesamt{
  margin-top:8px;padding-top:15px;border-top:1px solid rgba(161,165,140,.24);
  font-size:21px;color:var(--creme);
}
.fa-summe-gesamt span:last-child{font-weight:500;display:inline-block}
.puls{animation:fa-puls .5s cubic-bezier(.22,.61,.36,1)}
@keyframes fa-puls{0%{transform:scale(1)}38%{transform:scale(1.07);color:var(--mondlicht)}100%{transform:scale(1)}}

/* --- Gutschein --- */
.fa-gutschein{margin:16px 0 38px}
.fa-gutschein-auf{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--salbeinebel);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(161,165,140,.35);transition:color .2s ease;
}
.fa-gutschein-auf:hover{color:var(--mondlicht)}
.fa-gutschein-feld{animation:fa-auf .35s cubic-bezier(.22,.61,.36,1) both}
.fa-gutschein-titel{display:block;color:var(--salbeinebel);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.fa-gutschein-zeile{display:flex;gap:10px;max-width:430px}
.fa-gutschein-zeile input{
  flex:1;min-width:0;background:rgba(231,228,214,.05);border:1px solid rgba(161,165,140,.34);
  border-radius:5px;color:var(--creme);font:inherit;font-size:15px;padding:12px 14px;
  letter-spacing:.1em;text-transform:uppercase;
}
.fa-gutschein-zeile input:focus{outline:none;border-color:var(--mondlicht);background:rgba(231,228,214,.09)}
.fa-gutschein-zeile input:disabled{opacity:.55}
.fa-gutschein-knopf{
  flex:0 0 auto;background:none;border:1px solid rgba(161,165,140,.45);border-radius:5px;
  color:var(--mondlicht);font:inherit;font-size:14px;padding:0 20px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.fa-gutschein-knopf:hover:not(:disabled){border-color:var(--mondlicht);background:rgba(231,228,214,.07)}
.fa-gutschein-knopf:disabled{opacity:.5;cursor:default}
.fa-gutschein-meldung{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--salbeinebel);min-height:1em}
.fa-gutschein-meldung.gut{color:var(--mondlicht)}
.fa-gutschein-meldung.falsch{color:#D98B7A}

/* --- Bezahlwege --- */
.fa-wahl{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:19px;margin:0 0 16px;color:var(--creme);
}
.fa-wege{display:flex;flex-direction:column;gap:12px}
.fa-weg{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  padding:18px 20px;border:1px solid rgba(161,165,140,.3);border-radius:8px;
  background:rgba(231,228,214,.02);color:inherit;font:inherit;position:relative;overflow:hidden;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.fa-weg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(231,220,201,.07) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .7s ease;
}
.fa-weg:hover:not(:disabled)::before{transform:translateX(100%)}
.fa-weg:hover:not(:disabled){border-color:rgba(161,165,140,.6);background:rgba(231,228,214,.05);transform:translateY(-1px)}
.fa-weg:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
.fa-weg.gewaehlt{border-color:var(--mondlicht);background:rgba(231,220,201,.07);
  box-shadow:inset 0 0 0 1px rgba(231,220,201,.26)}
.fa-weg:disabled{opacity:.45;cursor:default}
.fa-weg-ico{flex:0 0 auto;width:26px;height:26px;color:var(--salbeinebel);transition:color .25s ease}
.fa-weg-ico svg{width:100%;height:100%}
.fa-weg.gewaehlt .fa-weg-ico{color:var(--mondlicht)}
.fa-weg-mitte{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fa-weg-name{color:var(--creme);font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fa-weg-merk{
  font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nachthimmel);background:var(--mondlicht);border-radius:999px;padding:3px 9px;
}
.fa-weg-text{color:var(--salbeinebel);font-size:12.5px;line-height:1.55}
.fa-weg-punkt{flex:0 0 auto;width:17px;height:17px;border-radius:999px;
  border:1px solid rgba(161,165,140,.5);position:relative;transition:border-color .25s ease}
.fa-weg.gewaehlt .fa-weg-punkt{border-color:var(--mondlicht)}
.fa-weg.gewaehlt .fa-weg-punkt::after{content:"";position:absolute;inset:3.5px;border-radius:999px;
  background:var(--mondlicht);animation:fa-punkt .3s cubic-bezier(.22,.61,.36,1)}
@keyframes fa-punkt{from{transform:scale(0)}to{transform:scale(1)}}

/* --- Tafel --- */
.fa-wegtafel{
  margin-top:18px;padding:22px;border:1px solid rgba(161,165,140,.22);border-radius:8px;
  background:rgba(231,228,214,.025);animation:fa-auf .36s cubic-bezier(.22,.61,.36,1) both;
}
.fa-wegtafel-text{margin:0;color:var(--salbeinebel);font-size:13.5px;line-height:1.7}
.fa-weiterknopf{display:inline-block;margin-top:18px;border:0;cursor:pointer;font:inherit}

.fa-adresse{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.fa-adresse-titel{margin:0;color:var(--salbeinebel);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase}
.fa-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fa-feld label{color:var(--salbeinebel);font-size:13px;letter-spacing:.03em}
.fa-feld input,.fa-feld textarea{
  background:rgba(231,228,214,.05);border:1px solid rgba(161,165,140,.34);border-radius:5px;
  color:var(--creme);font:inherit;font-size:15px;padding:12px 14px;width:100%;
  transition:border-color .2s ease,background .2s ease;
}
.fa-feld textarea{resize:vertical;min-height:82px;line-height:1.6}
.fa-feld input:focus,.fa-feld textarea:focus{outline:none;border-color:var(--mondlicht);
  background:rgba(231,228,214,.09)}
.fa-feld-hilfe{color:rgba(161,165,140,.82);font-size:12px;line-height:1.5}
.fa-abschicken{align-self:flex-start;margin-top:4px;border:0;cursor:pointer;font:inherit}

.fa-meldung{margin:18px 0 0;font-size:14px;line-height:1.7;color:var(--salbeinebel);min-height:1em}
.fa-meldung.gut{color:var(--mondlicht)}
.fa-meldung.falsch{color:#D98B7A}

/* --- Vertrauen und Hilfe --- */
.fa-vertrauen{display:flex;flex-wrap:wrap;gap:24px;margin:38px 0 0;padding-top:22px;
  border-top:1px solid rgba(161,165,140,.18)}
.fa-vertrauen span{display:inline-flex;align-items:center;gap:9px;
  color:var(--salbeinebel);font-size:12.5px}
.fa-vertrauen svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}
.fa-hilfe{margin-top:26px;padding:18px 20px;border-radius:8px;
  background:rgba(86,94,76,.14);border:1px solid rgba(86,94,76,.3)}
.fa-hilfe-titel{margin:0 0 5px;color:var(--creme);font-size:14.5px}
.fa-hilfe-text{margin:0;color:var(--salbeinebel);font-size:13.5px;line-height:1.65}
.fa-hilfe-text a{color:var(--mondlicht)}
.fa-kasse-fuss{color:rgba(161,165,140,.82);font-size:12px;line-height:1.7;margin:20px 0 0}

/* --- Ankunft --- */
.fa-fertig{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:60px 32px 52px;border:1px solid rgba(161,165,140,.3);border-radius:10px;
  background:
    radial-gradient(680px 240px at 50% 0%,rgba(86,94,76,.3),transparent 68%),
    linear-gradient(180deg,rgba(86,94,76,.1),rgba(86,94,76,.02));
  animation:fa-auf .55s cubic-bezier(.22,.61,.36,1) both;
}
.fa-fertig-ring{
  width:76px;height:76px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(231,220,201,.32);margin-bottom:22px;position:relative;color:var(--mondlicht);
}
.fa-fertig-ring::after{
  content:"";position:absolute;inset:-9px;border-radius:999px;
  border:1px solid rgba(231,220,201,.18);animation:fa-welle 2.6s ease-out infinite;
}
@keyframes fa-welle{0%{transform:scale(.9);opacity:.8}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
.fa-fertig-haken{width:34px;height:34px}
.fa-fertig-haken path{stroke-dasharray:26;stroke-dashoffset:26;
  animation:fa-strich .6s cubic-bezier(.65,0,.35,1) .3s forwards}
.fa-fertig-vor{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--salbeinebel)}
.fa-fertig-titel{margin:0;font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:300;font-size:clamp(24px,3.2vw,31px);color:var(--creme)}
.fa-fertig-label{margin:26px 0 5px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--salbeinebel)}
.fa-fertig-nr{margin:0;font-size:27px;letter-spacing:.08em;color:var(--mondlicht)}
.fa-fertig-text{margin:22px 0 0;color:var(--salbeinebel);font-size:14.5px;line-height:1.75;max-width:46ch}

.fa-schritte{margin-top:38px;padding-top:26px;border-top:1px solid rgba(161,165,140,.2);
  width:100%;max-width:430px;text-align:left}
.fa-schritte-titel{margin:0 0 16px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--salbeinebel);text-align:center}
.fa-schritt{display:flex;align-items:flex-start;gap:14px;padding:11px 0;
  opacity:0;animation:fa-auf .5s cubic-bezier(.22,.61,.36,1) forwards}
.fa-schritt-ico{flex:0 0 auto;width:20px;height:20px;color:var(--salbeinebel);margin-top:2px}
.fa-schritt-ico svg{width:100%;height:100%}
.fa-schritt strong{display:block;color:var(--creme);font-size:14.5px;font-weight:500}
.fa-schritt em{display:block;font-style:normal;color:var(--salbeinebel);font-size:13px;
  line-height:1.6;margin-top:2px}

@keyframes fa-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fa-strich{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .zeig{opacity:1;transform:none;transition:none}
  .fa-wegtafel,.fa-fertig,.fa-gutschein-feld,.fa-schritt{animation:none;opacity:1}
  .fa-fertig-haken path{stroke-dashoffset:0;animation:none}
  .fa-fertig-ring::after{animation:none}
  .fa-weg:hover{transform:none}
  .fa-weg::before{display:none}
  .puls{animation:none}
}

@media (max-width:640px){
  .fa-fortschritt{font-size:11px}
  .fa-fortschritt-punkt span:last-child{display:none}
  .fa-fortschritt-punkt + .fa-fortschritt-punkt::before{width:34px;margin:0 8px}
  .fa-gutschein-zeile{flex-direction:column}
  .fa-gutschein-knopf{padding:13px 20px}
  .fa-ware-zeile{padding:14px;gap:14px}
  .fa-ware-bild{width:60px;height:60px}
  .fa-weg{padding:16px}
  .fa-vertrauen{gap:14px}
  .fa-fertig{padding:44px 20px 38px}
}

/* ====================================================================
   Forest Air — Feinschliff für kleine Bildschirme
   --------------------------------------------------------------------
   Diese Datei ändert NUR unter 700 px Fensterbreite etwas. Am Desktop
   bleibt alles, wie es ist.

   Gemessen am 14.08.2026 auf 390 px:
     · 29 Tippflächen unter 40 px, die kleinste 7 × 7 px
     · 50 Textstellen unter 12,5 px, die kleinste 10 px
     · Sektionsabstände zwischen 0 und 48 px — Blöcke stoßen aneinander
     · kein echter Querlauf (die Überstände sind gewollte Bänder)

   Kein Element wird entfernt und nichts kleiner gemacht. Es geht um
   Luft und um Fingerkuppen: Eine Fingerkuppe ist rund 9 mm breit, das
   sind etwa 44 Bildpunkte. Alles darunter trifft man nur mit Glück.
   ==================================================================== */

@media (max-width: 700px) {

  /* --- Höhenrhythmus ------------------------------------------------
     Die Blöcke hatten zwischen 0 und 48 px Innenabstand. Wo gar keiner
     war, stießen zwei Themen unvermittelt aneinander — das ist der
     Grund für das erschlagende Gefühl. Ein Mindestabstand zwischen
     aufeinanderfolgenden Blöcken schafft Ruhe, ohne die Seite künstlich
     zu strecken: Nur dort, wo zwei Blöcke wirklich aufeinandertreffen. */
  .fa-sektion + .fa-sektion { margin-top: 12px; }

  /* Textblöcke bekommen Rand und Zeilenluft. */
  .fa-schmal { padding: 40px 20px; }
  .fa-text   { padding: var(--rand); line-height: 1.72; }
  .fa-text p + p { margin-top: 1.05em; }

  /* --- Lesbarkeit ---------------------------------------------------
     Kein Text unter 11,5 px. Die gesperrten Kleinschriften bleiben als
     Stilmittel erhalten, werden aber lesbar. Weniger Sperrung, weil
     enge Zeilen auf kleinen Schirmen sonst auseinanderfallen. */
  .fa-hero-fuer-titel,
  .fa-fb-ober,
  .fa-vt-ober,
  .fa-vt-marke,
  .fa-marke-claim,
  .fa-fortschritt-punkt,
  .fa-weg-merk        { font-size: 11.5px !important; letter-spacing: .13em; }
  /* Das Hero-Band ist jetzt bewusst groesser (12,5 px). Es aus der Gruppe
     oben herausgenommen, damit die 11,5-px-Regel es nicht wieder
     schrumpft — die Sperrung wird trotzdem enger. */
  .fa-hero-band       { font-size: 12.5px !important; letter-spacing: .18em; }
  .fa-vt-quelle,
  .pb-zeile,
  .fa-fb-unter        { font-size: 12.5px !important; }
  .fa-kasse-fuss,
  .fa-feld-hilfe,
  .fa-disclaimer      { font-size: 12.5px; line-height: 1.7; }

  /* --- Tippflächen --------------------------------------------------
     Die sichtbare Größe bleibt. Vergrößert wird die treffbare Fläche —
     über ein unsichtbares Feld, das über das Element hinausragt. So
     ändert sich am Aussehen nichts, am Treffen alles. */
  .fa-korb,
  .fa-sprache,
  .fa-sprachwahl a,
  .fa-burger,
  .pb-pfeil,
  .fa-zweit,
  .fa-nav a           { position: relative; }
  .fa-korb::after,
  .fa-sprachwahl a::after,
  .pb-pfeil::after,
  .fa-zweit::after,
  .fa-nav a::before   {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
    border-radius: 8px;
  }

  /* ── Nachtrag 15.08.: was bei dieser Liste gefehlt hat ───────────
     Mit dem Geometrie-Prüfer nachgemessen und dann per Tipp-Test
     bestätigt (elementFromPoint 21 px über und unter der Mitte —
     das ist die einzige ehrliche Messung, weil die unsichtbaren
     Felder oben in keiner Kastengröße auftauchen).

     Zwei Dinge waren dabei zu lernen:
       · Die Regeln oben wirken. Was der erste Messlauf als „zu klein"
         meldete (.fa-korb, .pb-pfeil, .fa-zweit, .fa-sprachwahl),
         ist in Wahrheit treffbar — gemessen wurde der sichtbare
         Kasten, nicht die Fläche.
       · Die folgenden Elemente standen NICHT in der Liste und sind
         wirklich zu klein. Sie sind neu dazugekommen, seit die Liste
         geschrieben wurde. */

  /* Der Hauptknopf im Klappmenü war 22 px hoch — halb so hoch wie
     nötig, und das ausgerechnet beim wichtigsten Weg der Seite. */
  .fa-nav .fa-cta{
    display:flex; align-items:center; justify-content:center;
    min-height:46px; padding:11px 20px;
  }
  /* Menüpunkte lagen bei 42, der Portalknopf bei 41 — je zwei bis
     drei Pixel zu wenig. Über min-height statt Polster, damit es
     auch bei anderer Schriftgröße stimmt. */
  .fa-nav a{ min-height:44px; display:flex; align-items:center; }
  .fa-nav a.fa-nav-portal{ min-height:46px; }
  /* Das Logo ist ein Link und war 23 px hoch. */
  .fa-marke{ min-height:44px; display:flex; align-items:center; }

  /* Kontaktzeilen im Band: 18 px. */
  .fa-band-kontakt a{ min-height:44px; display:inline-flex; align-items:center; }
  /* Verweise in der Vertrauensleiste: 15 px — der kleinste Wert
     auf der ganzen Seite. */
  .fa-vertrauen-innen li a{ min-height:44px; display:inline-flex; align-items:center; }
  /* Aufklapper „Die drei Gedanken dahinter": 28 px. */
  .fa-vt-knopf{ min-height:46px; display:flex; align-items:center; }
  /* Reiter der Welten-Tafel: 34 px. */
  .fa-welten-reiter button{ min-height:44px; }
  /* Sprungmarken der FAQ: 30 px. */
  .fa-fq-marke{ min-height:44px; display:inline-flex; align-items:center; }

  /* Die Punkte unter der Produktbühne stehen NICHT hier, sondern in
     produktbuehne.css. Diese Datei wird vorher geladen; eine Regel
     mit gleicher Spezifität hätte hier still verloren — genau der
     Fehler, der schon beim Bewegungsschalter in motion.css passiert
     ist. Suchbegriff dort: „Punkte unter der Bühne". */

  /* Kleinteile, die beim Tipp-Test durchgefallen sind. */
  .kt-mail,
  .kt-sozial a{ min-height:44px; display:inline-flex; align-items:center; }
  .fa-kt-formular input,
  .fa-kt-formular textarea,
  .fa-pp-feld input,
  .fa-pp-feld select{ min-height:46px; }
  /* Aufklapper „Inhaltsverzeichnis ansehen" war 14 px hoch. */
  .fa-hb-inhalt summary,
  details > summary{ min-height:44px; display:flex; align-items:center; }

  /* Mailadressen als eigenständige Zeile — 20 bis 24 px. */
  .fa-zb-mail a,
  .info-value a{ min-height:44px; display:inline-flex; align-items:center; }

  /* „Versand & Steuern" hängt im Kleingedruckten unter dem Preis und
     war 13 px hoch. Hier NICHT die Zeile aufblähen, sondern nur die
     treffbare Fläche — sonst reißt es die Preisangabe auseinander. */
  .fa-produkt-preis small a{ position:relative; display:inline-block; }
  .fa-produkt-preis small a::after{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px);
  }

  /* Das Kästchen im Kontaktformular stand auf 17 px, das im
     Partnerportal auf 22. Getroffen wird ohnehin die ganze Zeile
     über das <label> — aber 17 px sieht man auch kaum. */
  .kf-haken input{ width:22px; height:22px; }

  /* KEIN Befund, obwohl gemeldet: die Eingabefelder in .kt-falle und
     .fa-pp-falle sind die Honigfallen gegen Ausfüllroboter. Sie
     stehen mit left:-9999px außerhalb des Bildes und sollen genau so
     bleiben. Wer sie „repariert", macht das Formular für Maschinen
     wieder attraktiv. */
  /* Der Unterstrich der Navigation darf davon nicht betroffen sein. */
  .fa-nav a::before   { background: none; }

  .fa-korb            { padding: 4px; }
  .fa-burger          { padding: 12px; }
  .fa-cta             { padding: 13px 22px; }
  .fa-zweit           { padding: 8px 0; display: inline-block; }

  /* Karussellpunkte: 7 × 7 sichtbar, 44 × 44 treffbar. */
  .pb-punkte button,
  [class*="punkt"] button {
    position: relative;
    margin: 0 7px;
  }
  .pb-punkte button::after,
  [class*="punkt"] button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 999px;
  }

  /* --- Symbolreihen atmen lassen ------------------------------------
     Mehrere Symbole nebeneinander wirken auf 390 px wie eine Wand.
     Untereinander mit Luft gelesen sich das ruhiger. */
  .fa-vertrauen       { gap: 16px 20px; }
  .fa-hero-fuer       { gap: 14px; }
  .fa-ls-band,
  .fa-fb-band         { gap: 14px; }

  /* Querbänder: am Rand anschneiden, damit sichtbar wird, dass es
     weitergeht. Sonst wirkt ein abgeschnittenes Bild wie ein Fehler. */
  .fa-fb-rahmen,
  .fa-ls-band         { scroll-padding-left: 20px; }

  /* --- Kasse auf dem Handy ------------------------------------------ */
  .fa-kasse           { margin-top: 30px; }
  .fa-ware-zeile      { padding: 14px; gap: 13px; }
  .fa-weg             { padding: 17px 16px; gap: 13px; }
  .fa-summe           { padding: 17px 18px; }
  .fa-wegtafel        { padding: 18px 16px; }
}

/* Ganz schmale Geräte — iPhone SE und Ähnliches. */
@media (max-width: 380px) {
  .fa-schmal          { padding: 34px 16px; }
  .fa-kasse-titel     { font-size: 24px; }
  .fa-fertig-nr       { font-size: 23px; letter-spacing: .05em; }
  .fa-weg-name        { font-size: 15px; }
}

/* ==================================================================
   Nachtrag 14.08. — Weißraum unter „Für alle, die atmen"
   ------------------------------------------------------------------
   Gemessen bei 1440 px: der Abschnitt steht auf einer aus dem
   Wix-Modell übernommenen Mindesthöhe von 1377 px, sein Inhalt
   braucht aber nur 1206 px. Die Differenz von 171 px war eine leere
   weiße Fläche zwischen dem Schlusshinweis und dem Video darunter —
   zusammen mit dem Innenabstand des Blocks 251 px, also fast ein
   Viertel Bildschirm ohne Inhalt.

   Die Mindesthöhe wird nur für DIESEN einen Abschnitt aufgehoben, und
   der untere Innenabstand von 80 px auf 44 px gekürzt. Die Kennung im
   Selektor gewinnt gegen die im Embed mitgelieferte Klassenangabe,
   ohne dass die Embed-Datei angefasst werden muss — die wird vom
   Generator neu geschrieben.
   Auf dem Handy greift die Mindesthöhe ohnehin nicht (erst ab
   1000 px); dort wirkt nur die Kürzung des Innenabstands.
   ================================================================== */
#s-comp-mp0upoiq .fa-halter        { min-height: 0; }
#s-comp-mp0upoiq .section          { padding-bottom: 44px; }
#s-comp-mp0upoiq .section-disclaimer { margin-top: 30px; }

/* ==================================================================
   Empfehlungs-Leiste (14.08.)
   ------------------------------------------------------------------
   Erscheint nur, wenn jemand über einen Partnerlink kommt (?ref=).
   Alle anderen Besucher sehen sie nie — deshalb ist sie auch kein
   Cookie-Banner, sondern eine einzelne Frage an die eine Person, die
   es angeht. Begründung in functions/_middleware.js.

   Sie liegt unten und schiebt nichts weg: eine Leiste, die den Inhalt
   nach oben drückt, lässt beim Wegklicken die ganze Seite springen.
   ================================================================== */
.fa-empf{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  transform:translateY(110%); transition:transform .42s cubic-bezier(.2,.7,.3,1);
  background:rgba(27,29,25,.97);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid rgba(231,220,201,.22);
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.9);
}
.fa-empf.auf{ transform:none; }

/* Beim Messen gefunden, nicht vermutet: die Chat-Blase (.fa-be-knopf,
   fest unten rechts, z-index 150) lag GENAU auf dem Knopf „Ja, merken".
   Der Testklick lief 30 Sekunden ins Leere, weil die Blase die Klicks
   abfing. Auf einem echten Handy hätte niemand zustimmen können — und
   damit wäre jede Partnerempfehlung stillschweigend verlorengegangen,
   ohne dass es je jemandem aufgefallen wäre.
   Solange die Leiste steht, rückt die Blase über sie. */
body.fa-empf-offen .fa-be-knopf{
  bottom:calc(20px + var(--empf-hoehe, 84px));
  transition:bottom .42s cubic-bezier(.2,.7,.3,1);
}
.fa-empf-innen{
  max-width:var(--breite); margin:0 auto; padding:16px var(--rand);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.fa-empf-text{ flex:1 1 320px; }
.fa-empf-text p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--creme); }
.fa-empf-text b{ color:var(--mondlicht); font-weight:500; }
.fa-empf-klein{ margin-top:5px !important; font-size:12.5px !important; color:var(--salbeinebel) !important; }
.fa-empf-klein a{ color:var(--salbeinebel); }
.fa-empf-tat{ display:flex; gap:10px; flex:0 0 auto; margin-left:auto; }
.fa-empf-tat button{
  font:inherit; font-size:13.5px; letter-spacing:.04em; cursor:pointer;
  border-radius:999px; padding:11px 22px; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.fa-empf-nein{ background:none; border-color:rgba(161,165,140,.4); color:var(--salbeinebel); }
.fa-empf-nein:hover{ border-color:var(--mondlicht); color:var(--mondlicht); }
.fa-empf-ja{ background:var(--mondlicht); color:var(--nachthimmel); }
.fa-empf-ja:hover{ transform:translateY(-1px); }
.fa-empf-dank{ margin:0; font-size:14.5px; color:var(--mondlicht); }

@media (max-width:700px){
  .fa-empf-innen{ padding:14px var(--rand); gap:14px; }
  .fa-empf-tat{ width:100%; margin-left:0; }
  .fa-empf-tat button{ flex:1; padding:13px 16px; }
  .fa-empf-klein{ font-size:12.5px !important; }
}
@media (prefers-reduced-motion:reduce){
  .fa-empf{ transition:none; }
}

/* ==================================================================
   Kleinstschriften auf dem Handy — Nachtrag 14.08.
   ------------------------------------------------------------------
   Gemessen bei 390 px über dreizehn Seiten. Der Mobil-Block weiter
   oben hebt die Kleinschriften an, die er kennt; diese hier kamen aus
   Embeds und eigenen Bausteinen und waren ihm unbekannt.

   Angehoben werden nur die unter 10,5 px — sie sind auf einem Handy
   nicht mehr zuverlässig lesbar, die kleinste stand auf 8,5 px. Die
   Zeilen auf 10,5 px bleiben, wo sie sind: sie sind gesperrte
   Oberzeilen und als Stilmittel gewollt. Weniger Sperrung dazu, weil
   enge Zeilen auf kleinen Schirmen sonst auseinanderfallen.
   ================================================================== */
@media (max-width: 700px) {
  .fa-ef-stimme-kat,          /* Erfahrungen: Kategorie über der Stimme */
  .fa-pn-art,                 /* Partnernetz: Art der Praxis */
  .fa-pn-ort,                 /* Partnernetz: Ortszeile */
  .fa-pn-trenner,
  .fa-pn-marke,
  .fa-ls-name,                /* Lichtstrecke: Stationsname an der Achse */
  .fa-inst-nr,                /* Institutionen: laufende Nummer */
  .info-label,                /* aus den Wix-Embeds */
  .fa-wk-spur-marke span,     /* Warenkorb: Beschriftung der Fortschrittsspur */
  .pv-weg                     /* Portal-Vorschau: „Rabattcode" / „Ihr Link" */
  { font-size: 11.5px !important; letter-spacing: .1em; }
}

/* ==================================================================
   Ungefährer Preis in Euro und Dollar (14.08.)
   ------------------------------------------------------------------
   Steht immer NEBEN oder UNTER dem Pfundpreis, nie an seiner Stelle,
   und immer kleiner. Der Pfundpreis ist der Preis; die Umrechnung ist
   eine Orientierung. Wer sie gleich groß setzt, lädt zu dem
   Missverständnis ein, man könne in Euro bezahlen.
   ================================================================== */
.fa-preis-ca{
  display:block; margin-top:5px;
  font-size:13px; font-weight:400; letter-spacing:.02em;
  color:var(--salbeinebel); white-space:nowrap;
}
/* Auf hellem Grund die dunklere Nebenfarbe — Kontrastgesetz. */
.fa-hell .fa-preis-ca,
.fa-pp-form .fa-preis-ca{ color:var(--forest); }

/* In der Preiszeile des Datenkranzes: eigene Zeile, sehr leise. */
.pb-kranz .fa-preis-ca{
  margin-top:3px; font-size:11.5px; line-height:1.4; opacity:.8;
  white-space:normal;
}

/* Die alten Wix-Klammern („ca. 950 €") tragen jetzt echte Kurse. Sie
   behalten ihre Gestaltung aus dem Embed; hier wird nur sichergestellt,
   dass sie nicht umbrechen und nicht zu laut werden. */
.price-approx,
.card-price-approx{ white-space:nowrap; }

@media (max-width:700px){
  .fa-preis-ca{ font-size:12.5px; }
  .pb-kranz .fa-preis-ca{ font-size:11.5px; }
}

/* Die fest eingetragenen Näherungen („ca. 950 €") sind aus den Embeds
   entfernt — sie waren veraltet und wären bei einem Ausfall der
   Kursquelle als falsche Zahl stehengeblieben. Die Hüllen bleiben und
   werden vom Skript gefüllt. Leer heißt: keine Kurse, also nichts
   anzeigen und auch keinen Abstand hinterlassen. */
.price-approx:empty,
.card-price-approx:empty{ display:none; }

/* ==================================================================
   Kopf und Fuß — Überarbeitung 14.08.
   ================================================================== */

/* ---------------------------------------------- Fortschritt am Kopf
   Eine haarfeine Linie an der Unterkante, die mitwächst. Sie sagt
   ohne ein Wort, wie lang die Seite noch ist — auf einer Startseite
   mit siebzehn Bildschirmen ist das keine Spielerei, sondern eine
   Auskunft. Die Breite setzt rahmen.js über --gelesen.                */
.fa-kopf-fortschritt{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  pointer-events:none; overflow:hidden;
}
.fa-kopf-fortschritt i{
  display:block; height:100%; width:var(--gelesen, 0%);
  background:linear-gradient(90deg, var(--forest), var(--mondlicht));
  transform-origin:left;
}

/* Beim Scrollen rückt der Kopf enger zusammen. Vorher wechselte nur
   die Deckkraft des Hintergrunds — das merkt niemand. */
.fa-kopf{ transition:background .3s ease, border-color .3s ease,
                     min-height .35s cubic-bezier(.2,.7,.3,1); }
.fa-kopf.gescrollt .fa-kopf-innen{ min-height:62px; }
.fa-kopf.gescrollt .fa-marke-bild{ transform:scale(.92); }
.fa-marke-bild{ transition:transform .35s cubic-bezier(.2,.7,.3,1); transform-origin:left center; }
.fa-kopf-innen{ transition:min-height .35s cubic-bezier(.2,.7,.3,1); }

/* ------------------------------------------- Partnerportal als Knopf
   Er stand als elfter Textpunkt in der Navigation und ging dort unter,
   obwohl er als einziger etwas verkaufen soll. Jetzt steht er in der
   Reihe der Handlungen.

   BEWUSST MIT RAHMEN STATT GEFÜLLT: „Gespräch buchen" bleibt der eine
   volle Knopf. Zwei gefüllte Knöpfe nebeneinander heben sich
   gegenseitig auf — dann ist keiner mehr der Hauptweg. Der Rahmen
   sagt „auch wichtig, aber nicht das Erste".                          */
.fa-portal-knopf{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  flex:0 0 auto; white-space:nowrap; text-decoration:none;
  font-size:13px; letter-spacing:.05em; color:var(--creme);
  border:1px solid rgba(161,165,140,.45); border-radius:999px;
  padding:8px 16px; overflow:hidden;
  transition:border-color .28s ease, color .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}
.fa-portal-knopf:hover{
  border-color:var(--mondlicht); color:var(--mondlicht); transform:translateY(-1px);
}
.fa-portal-knopf.aktiv{
  border-color:rgba(231,220,201,.75); color:var(--mondlicht);
  background:rgba(231,220,201,.09);
}
/* Der Punkt pulst langsam — er sagt „hier ist etwas offen", ohne zu
   blinken. Ein Blinken im Kopf einer Seite ist zum Wegsehen. */
.fa-pk-punkt{
  width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--mondlicht); box-shadow:0 0 0 0 rgba(231,220,201,.5);
  animation:fa-pk-puls 3.4s ease-in-out infinite;
}
@keyframes fa-pk-puls{
  0%,100%{ box-shadow:0 0 0 0 rgba(231,220,201,.45); opacity:.85; }
  50%    { box-shadow:0 0 0 5px rgba(231,220,201,0); opacity:1; }
}
/* Lichtkante beim Überfahren — dieselbe Sprache wie auf den Karten. */
.fa-portal-knopf::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(231,220,201,.16) 50%,transparent 64%);
  transform:translateX(-130%); transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.fa-portal-knopf:hover::after{ transform:translateX(130%); }

/* ==================================================================
   Fuß
   ------------------------------------------------------------------
   Vorher: elf gleichrangige Links in einer Reihe — Zubehör neben
   Widerruf. Wer etwas suchte, las alle elf. Jetzt drei benannte
   Spalten plus Kontakt, dazu ein Markenblock, der die Seite
   abschließt statt sie auslaufen zu lassen.
   ================================================================== */
.fa-fuss{
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(86,94,76,.20) 0%, transparent 60%),
    #1a1c18;
  border-top:1px solid rgba(231,228,214,.10);
}
/* Das Polster steht NUR hier — siehe Altlast 1 weiter oben. */
.fa-fuss-innen{
  max-width:var(--breite); margin:0 auto;
  padding:clamp(38px,4.4vw,62px) 24px clamp(24px,2.6vw,34px);
  display:grid; grid-template-columns:minmax(228px,.78fr) 2.15fr;
  gap:clamp(28px,4vw,58px); align-items:start;
}

.fa-fuss-marke{ display:block; }
.fa-fuss-bild{ width:128px; height:auto; margin-bottom:11px; opacity:.95; }
.fa-fuss-claim{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--salbeinebel);
}
/* text-transform und letter-spacing stehen hier ausdruecklich, obwohl
   sie „normal“ sind: sie halten Altlast 2 in Schach, falls je wieder
   eine Sammelregel auf .fa-fuss-marke p gesetzt wird. */
.fa-fuss-satz{
  margin:0 0 15px; font-size:13px; line-height:1.62;
  letter-spacing:0; text-transform:none;
  color:rgba(161,165,140,.85); max-width:34ch;
}
/* Sozial-Knoepfe und Bewegungsschalter in EINER Reihe. Vorher standen
   sie untereinander und haben den Markenblock um eine Zeilenhoehe
   plus 20 px Abstand verlaengert, ohne dass es etwas gebracht haette. */
.fa-fuss-sozial{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fa-fuss-sozial a{
  font-size:11.5px; letter-spacing:.06em; text-decoration:none;
  color:var(--salbeinebel);
  border:1px solid rgba(161,165,140,.32); border-radius:999px;
  padding:6px 13px;
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.fa-fuss-sozial a:hover{
  border-color:var(--mondlicht); color:var(--mondlicht); transform:translateY(-1px);
}

.fa-fuss-spalten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:clamp(18px,2.2vw,32px);
}
.fa-fuss-spalte{ display:flex; flex-direction:column; align-items:flex-start; }
.fa-fuss-titel{
  margin:0 0 8px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mondlicht);
  padding-bottom:7px; border-bottom:1px solid rgba(231,228,214,.13);
  align-self:stretch;
}
.fa-fuss-spalte a{
  position:relative; display:inline-block;
  font-size:13.5px; line-height:1.42; color:var(--salbeinebel);
  text-decoration:none; padding:5px 0;
  transition:color .22s ease, transform .22s ease;
}
.fa-fuss-spalte a:hover{ color:var(--mondlicht); transform:translateX(3px); }
/* Ein Strich, der beim Überfahren von links einläuft. */
.fa-fuss-spalte a::after{
  content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px;
  background:rgba(231,220,201,.45); transition:right .3s ease;
}
.fa-fuss-spalte a:hover::after{ right:0; }

.fa-fuss-kontakt a{ word-break:break-word; }
.fa-fuss-termin{ color:var(--mondlicht) !important; }
.fa-fuss-anschrift{
  margin:9px 0 0; font-size:12px; line-height:1.6;
  color:rgba(161,165,140,.72);
}

/* Schlusszeile: Haftungshinweis und Jahresangabe nebeneinander statt
   untereinander. Zwei Blöcke mit je eigenem Abstand darüber kosteten
   zusammen 140 px für zwei Sätze Kleingedrucktes. */
.fa-fuss-schluss{
  max-width:var(--breite); margin:0 auto;
  padding:13px 24px 17px;
  border-top:1px solid rgba(231,228,214,.09);
  display:flex; gap:16px 32px; align-items:baseline;
  justify-content:space-between; flex-wrap:wrap;
}
/* 167 Zeichen je Zeile — gemessen auf allen 19 Seiten bei 1600 px.
   Ab etwa 90 Zeichen verliert das Auge beim Zeilensprung den Anschluss
   und liest dieselbe Zeile noch einmal. Bei einem Haftungshinweis ist
   das besonders unglücklich: Wer ihn nicht lesen kann, hat ihn nicht
   gelesen. 78ch ist der übliche Richtwert, hier reichen 86 —
   drei Zeilen statt zwei, dafür lesbar. */
.fa-disclaimer{
  margin:0; color:var(--salbeinebel);
  font-size:11px; line-height:1.65; flex:1 1 420px; min-width:0;
  max-width:86ch;
}
.fa-copy{
  margin:0; color:rgba(161,165,140,.7); font-size:11px;
  flex:0 0 auto; white-space:nowrap;
}

/* Der Bewegungsschalter bekommt einen Zustandspunkt — vorher war nur
   an der Beschriftung zu erkennen, ob er greift. */
.fa-bewegung{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid rgba(161,165,140,.3); border-radius:999px;
  color:var(--salbeinebel); font:inherit; font-size:11.5px; letter-spacing:.06em;
  padding:6px 13px; cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.fa-bewegung:hover{ border-color:var(--salbeinebel); color:var(--creme); }
.fa-bw-punkt{
  width:6px; height:6px; border-radius:50%; background:var(--salbeinebel);
  transition:background .25s ease, box-shadow .25s ease;
}
.fa-bewegung[aria-pressed="false"] .fa-bw-punkt{
  background:var(--mondlicht); box-shadow:0 0 0 3px rgba(231,220,201,.16);
}

@media (max-width:900px){
  .fa-fuss-innen{ grid-template-columns:1fr; gap:28px; }
  .fa-fuss-satz{ max-width:52ch; }
}
@media (max-width:700px){
  .fa-fuss-innen{ padding:32px 20px 22px; }
  .fa-fuss-spalten{ grid-template-columns:1fr 1fr; gap:20px 18px; }
  .fa-fuss-titel{ font-size:11px; letter-spacing:.18em; }
  .fa-fuss-claim{ font-size:11px; letter-spacing:.18em; }
  .fa-fuss-anschrift{ font-size:12px; }
  /* Tippflächen. Nicht über das Polster gerechnet, sondern über
     min-height: beim Polster muss man die Zeilenhöhe mitrechnen, und
     genau da lag der Fehler — 11 px Polster ergaben 41 px, nicht 44.
     min-height sagt, was gemeint ist, und stimmt auch dann noch, wenn
     jemand später die Schriftgröße anfasst. */
  .fa-fuss-spalte a{ padding:11px 0; min-height:44px; display:flex; align-items:center; }
  .fa-fuss-sozial a,
  .fa-bewegung{ min-height:44px; padding:6px 16px; }
  .fa-fuss-sozial a{ display:inline-flex; align-items:center; }
  .fa-fuss-schluss{ padding:12px var(--rand) 16px; }
}
@media (prefers-reduced-motion:reduce){
  .fa-pk-punkt{ animation:none; }
  .fa-portal-knopf::after{ display:none; }
  .fa-kopf, .fa-kopf-innen, .fa-marke-bild{ transition:none; }
}

/* Der Portalknopf im Klappmenü.
   ------------------------------------------------------------------
   Ohne ihn wäre das Partnerportal auf dem Handy gar nicht mehr
   erreichbar: Es steht nicht mehr in der Textnavigation, und der
   Knopf oben rechts hat im schmalen Kopf keinen Platz. Beim Bauen
   fast übersehen — deshalb steht er jetzt an BEIDEN Stellen, und
   jede zeigt sich nur dort, wo die andere fehlt. */
.fa-nav-portal{ display:none; }

@media (max-width:1260px){
  /* Oben rechts weicht er, unten im Menü kommt er. */
  .fa-portal-knopf{ display:none; }
  .fa-nav-portal{
    display:inline-flex !important; align-items:center; gap:9px;
    margin-top:14px; align-self:flex-start;
    border:1px solid rgba(231,220,201,.4) !important; border-radius:999px;
    padding:12px 20px !important; text-decoration:none;
    color:var(--mondlicht) !important; font-size:15px; letter-spacing:.04em;
    background:rgba(231,220,201,.07);
  }
  /* Die Trennlinie der übrigen Menüpunkte gilt hier nicht. */
  .fa-nav a.fa-nav-portal{ border-bottom:1px solid rgba(231,220,201,.4); }
}

/* ==================================================================
   Kopfzeile: Platz sparen
   ------------------------------------------------------------------
   Die frühere Fassung dieser Regeln griff erst ab 1560 px und hat nur
   den Rollbalken verhindert — nicht den Überstand über die
   Inhaltsspalte. Der blieb auf JEDER Seite und bei JEDER Breite über
   1200 px bestehen (gemessen: 176 px). Deshalb gelten die engeren
   Maße jetzt IMMER, und es sind ein paar mehr:

     Menüabstand   22 → 15 px      rund  49 px
     Menüschrift   14 → 13,5 px    rund  18 px
     Kopfabstand   24 → 18 px      rund  12 px
     Rechts-Gruppe 14 → 10 px      rund  16 px
     Portalknopf   enger            rund 12 px
     ⌘K-Hinweis    weg unter 1700  rund  36 px

   Zusammen etwa 143 px. Der Rest kommt aus dem Tastenkürzel-Hinweis,
   der ohnehin nur etwas für Vielnutzer ist und auf schmalen
   Bildschirmen nichts erklärt. Nachgemessen wird an .fa-kopf-innen:
   scrollWidth darf clientWidth nicht überschreiten. */
/* Groesser und luftiger — 15.08., zweiter Anlauf.
   Beim Ausrichten der Kopfzeile war das Menue auf 13,5 px bei 10 px
   Abstand geschrumpft. Das war enger als noetig: gemessen blieben
   links neben dem ersten Punkt 52 px frei (deutsch) bzw. 140 px
   (englisch). Diesen Platz nutzt das Menue jetzt.

   Der Massstab ist DEUTSCH, nicht Englisch — die deutschen Woerter
   sind laenger, und was dort passt, passt ueberall. 14 px Schrift bei
   14 px Abstand kostet rund 39 px; im Deutschen bleiben damit noch
   13 px Reserve. Groesser geht nur, wenn ein Menuepunkt weicht. */
/* Das Menue nimmt sich den freien Platz SELBST — statt fester Abstaende.
   Feste Werte gehen hier nicht auf: im Deutschen bleiben neben dem
   ersten Punkt 52 px frei, im Englischen 140. Ein Wert, der englisch
   luftig aussieht, laesst die deutsche Zeile ueberlaufen (gemessen:
   -14 px bei 14/14). Mit flex:1 und space-between spannt sich das
   Menue ueber genau den Platz, der da ist: englisch weit auseinander,
   deutsch kompakt — und ueberlaufen kann es gar nicht mehr, weil es
   nie breiter wird als der Raum zwischen Logo und Knopfgruppe. */
.fa-nav{ flex:1 1 auto; justify-content:space-between; gap:12px; margin-left:0; }
.fa-nav a{ font-size:14px; }

/* Und dann doch nach Sprache getrennt — weil es anders nicht aufgeht.
   flex:1 verhindert, dass der KASTEN ueberlaeuft; die Woerter selbst
   kann es nicht schrumpfen. Bei 14 px lief die deutsche Zeile bis zu
   26 px ueber die Spalte hinaus, die englische passte muehelos.
   Deutsch bekommt deshalb einen halben Punkt weniger und engere
   Abstaende. Der Unterschied faellt niemandem auf, der nicht beide
   Sprachen nebeneinanderlegt — der Ueberlauf faellt jedem auf. */
html[lang="de"] .fa-nav{ gap:9px; }
html[lang="de"] .fa-nav a{ font-size:13.5px; }
.fa-kopf-rechts{ gap:10px; }
.fa-portal-knopf{ padding:8px 12px; font-size:12.5px; }
.fa-kopf-rechts .fa-cta{ padding:9px 16px; }

/* Der Hinweis „⌘K" ist eine Bequemlichkeit für Wiederkehrer, kein
   Bedienelement — er darf als Erstes weichen, die Lupe bleibt.
   (Die Klasse heißt .fa-lupe-taste; beim ersten Anlauf stand hier
   .fa-lupe-kuerzel, und die Regel hätte still gar nichts getan.)

   Er ist GANZ weg, nicht erst ab einer Breite: der Kasten der
   Kopfzeile ist immer 1200 px breit, egal wie groß das Fenster ist.
   Ein Hinweis, der bei 1920 px wieder auftaucht, bringt den Überstand
   also genauso zurück wie bei 1600. */
.fa-lupe-taste{ display:none; }

/* --- Zweiter Weg im Kopf: "Geräte ansehen" ------------------------
   18.08.2026. Vorher war "Gespräch buchen" die einzige Handlung im
   Kopf — für ein Gerät, das man online kaufen kann, ist ein Termin
   eine hohe Hürde als einzige Tür. Wer schon kaufen will, soll nicht
   erst telefonieren müssen.

   Bewusst KEIN zweiter Knopf: Zwei gefüllte Knöpfe nebeneinander
   heben sich gegenseitig auf (dieselbe Falle wie an der Kasse). Das
   hier ist eine ruhige Textschaltfläche, die den Termin-Knopf nicht
   schwächt, aber den direkten Weg sichtbar macht.

   Unter 1100 px verschwindet sie — dort ist "Produkte" ohnehin im
   Menü, und der Platz im Kopf ist gemessen knapp (der Kopf lief am
   15.08. schon einmal 176 px über). */
.fa-kopf-geraete{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:13.5px; letter-spacing:.01em; white-space:nowrap;
  color:var(--creme); text-decoration:none; opacity:.82;
  padding:8px 2px; border-bottom:1px solid transparent;
  transition:opacity .25s ease, border-color .25s ease;
}
.fa-kopf-geraete:hover,
.fa-kopf-geraete:focus-visible{ opacity:1; border-bottom-color:var(--salbeinebel); }
@media (max-width:1100px){ .fa-kopf-geraete{ display:none; } }

/* --- Das hidden-Attribut muss auch wirklich verstecken -------------
   18.08.2026 · gefunden beim Testkauf

   An der Kasse standen "Bestellung abschicken" (Überweisung) und
   "Weiter zur Zahlung" (Karte) gleichzeitig da, samt Adressformular.
   Es sah nach einem Gestaltungsfehler aus. Es war einer im CSS.

   Das Skript blendet korrekt um: adresse.hidden = true, wenn Karte
   gewählt ist. Nur wirkt hidden nicht, sobald irgendeine Regel dem
   Element ein display gibt — und genau das tun

       .fa-weiterknopf{ display:inline-block }
       .fa-adresse    { display:flex }

   Die Browser-Voreinstellung [hidden]{display:none} steht im
   User-Agent-Stylesheet und verliert gegen JEDE Autoren-Regel mit
   display. Das Attribut war also gesetzt, nur ohne Wirkung.

   Ein Kunde sieht dann zwei gleich aussehende Knöpfe, drückt den
   oberen — und landet im Überweisungsweg, obwohl er mit Karte zahlen
   wollte. Genau das ist Jonas beim ersten Testkauf passiert.

   Diese eine Zeile gilt für die ganze Seite und schließt die Falle
   überall auf einmal. !important ist hier richtig: hidden ist eine
   Aussage über das Vorhandensein, nicht über die Darstellung — die
   darf keine Layoutregel überstimmen. */
[hidden]{ display:none !important; }

/* Der Abschick-Knopf der Überweisung trug bisher .fa-cta und sah damit
   exakt aus wie "Weiter zur Zahlung". Er ist jetzt eigenständig
   gestaltet: gleiche Größe und Tippfläche, aber als Umriss statt
   gefüllt. So bleibt erkennbar, dass es zwei verschiedene Wege sind —
   und der bezahlte Weg bleibt die sichtbare Hauptaktion. */
.fa-abschicken{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 26px; border-radius:999px;
  background:transparent; color:var(--creme);
  border:1px solid var(--salbeinebel);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:14px; letter-spacing:.02em; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.fa-abschicken:hover,
.fa-abschicken:focus-visible{
  background:var(--mondlicht); border-color:var(--mondlicht); color:var(--nachthimmel);
}