/* Kopf- und Fusszeile der Website — der Rahmen um jede Seite (W2, 11.09.2026).
 *
 * WARUM EINE EIGENE DATEI UND NICHT chrome.css. chrome.css ist ERZEUGT
 * (scripts/chrome/extract_chrome.py) aus den Inline-Stilen von Tibis erstem
 * Entwurf; ihre Klassen heissen ch01…ch64 und sind bewusst stumm. Die App
 * (web/desktop/index.html) bindet diese Datei ein und haengt ihre eigene
 * Kopfleiste an .ch01, .ch02, .ch06 und .ch14 — mit dunkelgruenem Grund.
 * Die neue Kopfzeile der Website steht auf HELLEM Grund. Dieselben Klassen
 * umzudeuten haette die App lautlos umgefaerbt; chrome.css bleibt deshalb
 * unangetastet, und der Rahmen bekommt lesbare Namen: .kopf und .fuss.
 *
 * WAS DIE MECHANIK VORAUSSETZT. js/chrome.js bleibt unveraendert und
 * findet seine Elemente ueber data-Attribute, nicht ueber Klassen:
 *   header[data-ref="navRef"]        die Kopfzeile selbst
 *   [data-desktop-nav]               die Menueleiste (unter 1080 px: none)
 *   [data-burger] / [data-overlay]   Burger und Vollbild-Ueberlagerung
 *   [data-menu="…"]                  die drei Aufklappmenues; ihr erstes
 *                                    Enkelkind ist die Karte (alignMenu)
 *   [data-nav="…"]                   die Ausloeser; offsetLeft wird relativ
 *                                    zur Kopfzeile gelesen — deshalb darf
 *                                    zwischen .kopf und dem Ausloeser kein
 *                                    Element `position` tragen.
 * Die Menues stehen per CSS zu (opacity 0, visibility hidden); chrome.js
 * schreibt beim Oeffnen Inline-Werte. Ohne JavaScript bleiben sie zu, die
 * Ausloeser sind dann gewoehnliche Verweise auf die Startseite, und alle
 * Ziele stehen ohnehin in der Fusszeile — das ist ihr Zweck.
 *
 * SPEZIFITAET. Jede Regel steht unter .kopf bzw. .fuss (0,2,0), weil die
 * Altschicht der Bestandsseiten mit `body[data-page] h2` und
 * `body[data-page] p` (0,1,1) sonst in die Fusszeile hineinschreibt —
 * 49 px hohe Spaltentitel waren im ersten Versuch das Ergebnis.
 *
 * TOKENS, NUR TOKENS. Farben und Masse kommen aus tokens/* und der Palette
 * 2026-09. Die Kampagnenseite (interview.html) laedt ausser den Tokens
 * nichts vom Designsystem und definiert --primary selbst (Teal) — deshalb
 * benutzt diese Datei --accent und nie --primary.
 */

/* ==================================================================
   KOPFZEILE
   ------------------------------------------------------------------
   Heller Grund, 72 px (--header-height), klebend, 1 px --border-subtle
   unten. Logo links, fuenf Menuepunkte, rechts „EN | DE" als Text und
   genau EIN Kaufknopf. Unter 1080 px Burger; unter 761 px 56 px hoch.
   ================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-core);
  color: var(--text-heading);
  box-sizing: border-box;
}
.kopf *, .kopf *::before, .kopf *::after { box-sizing: border-box; }

/* content-box wie .container in thalassa.css (D1): --container-max ist die
   INHALTSBREITE, 1240 px; die 32 px Rand kommen dazu. Sonst staende der
   Kopf 64 px schmaler als der Inhalt. */
.kopf .kopf__innen {
  max-width: var(--container-max);
  box-sizing: content-box;
  margin: 0 auto;
  padding: 0 32px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 24px;
}

.kopf .kopf__marke { display: flex; align-items: center; flex: 0 0 auto; }
.kopf .kopf__logo { height: 34px; width: auto; display: block; }

/* Die Menueleiste. chrome.js setzt display inline (flex/none); der
   CSS-Wert gilt ohne JavaScript und bis das Skript laeuft. */
.kopf .kopf__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.kopf .kopf__punkt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control);
}

/* UNTERSTRICH STATT FLAECHE (21.09.2026). Arpad: "dass dann nicht der
   schatten kommt, sondern der block langsam von links nach rechts
   unterstrichen wird."

   DAS !important IST MIT WEGGEFALLEN, und das ist kein Versehen. Hier
   stand: js/home.js schreibe ueber `syncRail` beim Rollen einen
   Inline-Hintergrund auf jeden [data-nav], darum muesse die Regel
   staerker sein. Am 21.09.2026 nachgesehen: `syncRail` gibt es in
   home.js nicht mehr, die Datei enthaelt das Wort `background`
   ueberhaupt nicht, und kein anderes Skript in web/js/ setzt einen
   Inline-Hintergrund auf [data-nav]. Die Begruendung war laenger da
   als ihr Grund. Ohne Flaeche braeuchte es sie ohnehin nicht mehr.

   scaleX STATT width: Breite animieren laesst den Browser bei jedem
   Bild neu rechnen, `transform` laeuft auf der Grafikkarte. Der
   Ursprung links ist die ganze Richtung -- `transform-origin: left`
   zieht den Strich von links auf, ohne ihn zu verschieben.

   DER STRICH SITZT AUF DER SCHRIFT, NICHT AUF DEM KASTEN: links und
   rechts 12 px eingerueckt, genau der Innenabstand des Punktes. Sonst
   staende er 24 px breiter als das Wort darueber und zoege sichtbar an
   den Nachbarn vorbei.

   --dur-slow (360 ms) ist das langsamste, was die Bewegungstabelle
   hergibt, und genau das war gefragt. Es wird unter
   `prefers-reduced-motion` in tokens/motion.css auf 0 ms gesetzt: Der
   Strich ist dann sofort da statt gar nicht -- die Rueckmeldung
   bleibt, nur die Reise faellt weg. Deshalb steht hier keine eigene
   Ausnahme dafuer.

   AUCH BEI :focus-visible. Wer mit der Tastatur geht, bekommt
   dieselbe Auskunft wie die Maus; der Fokusring aus `.kopf
   :focus-visible` bleibt daneben bestehen. */
/* KEIN STRICH MEHR UNTER DEN MENUEPUNKTEN (23.09.2026, Arpad: "keine
   unterstrichenen Links im Header"). Bis heute zog beim Ueberfahren ein
   2-px-Balken unter dem Punkt auf. Die Auskunft "hier bist du" gibt jetzt
   allein die Farbe: Markengruen beim Ueberfahren, beim Fokus und solange
   das Klappmenue offen ist. Der Fokusring aus `.kopf :focus-visible`
   bleibt daneben bestehen -- wer mit der Tastatur geht, braucht mehr als
   eine Farbe. */
.kopf .kopf__punkt::after { content: none; }
/* Die Flaeche bleibt weg -- auch die des offenen Klappmenues, das sonst
   als einziger Punkt noch grau hinterlegt waere. */
.kopf .kopf__punkt:hover,
.kopf .kopf__punkt:focus-visible,
.kopf .kopf__punkt[aria-expanded="true"] {
  background: transparent;
  color: var(--text-link, #067a58);
}
.kopf .kopf__pfeil {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.kopf .kopf__punkt[aria-expanded="true"] .kopf__pfeil {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Rechts: Sprachwahl, Kaufknopf, Burger. */
.kopf .kopf__aktion {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* SPRACHWAHL ALS TEXT (Tibis PDF vom 10.09.2026): „EN | DE", die laufende
   Sprache in Menuefarbe und Halbfett, die andere in --text-muted (5,03:1
   auf Weiss). Kein Kippschalter, keine gefuellte Flaeche — die alte Pille
   las sich wie ein Schalter. Farbe UND Gewicht, damit der Zustand nicht an
   einem Merkmal haengt (WCAG 1.4.1); aria-current traegt ihn ins Markup
   (gesetzt je Seite von scripts/chrome/build_chrome.py). */
.kopf .kopf__sprache { display: flex; align-items: center; gap: 6px; }
.kopf .kopf__lang {
  height: 40px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font-family: var(--font-core);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.kopf .kopf__lang:hover { color: var(--text-heading); }
.kopf .kopf__lang[aria-current="true"] {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  cursor: default;
}
.kopf .kopf__trenner { color: var(--border-strong); font-size: var(--fs-body-l); }

/* DIE MENUELEISTE SCHRUMPFT NICHT UNTER IHREN INHALT (20.09.2026).
   Gemessen auf der deutschen Preisseite bei 1440 px: `.kopf__nav` war
   383 px breit, ihr letzter Punkt "Ihre Daten schuetzen" lief von 510
   bis 700 -- 54 px ueber die eigene Kante und damit unter das "EN" der
   Sprachwahl, die bei 670 beginnt. Im Bild standen zwei Schriften
   uebereinander.

   Der Grund ist die Vorgabe: Ein Flex-Kind darf schrumpfen, und
   `white-space: nowrap` an den Punkten heisst, dass der INHALT dabei
   nicht mitgeht -- er laeuft heraus, lautlos. Die deutschen
   Menuenamen sind laenger als die englischen, deshalb fiel es nur dort
   auf.

   `flex: 0 0 auto` nimmt der Leiste das Schrumpfen. Sie passt damit bei
   1440 px (114 + 438 + 670 plus Abstaende gegen 1304 verfuegbar); was
   darunter fehlt, holt der Kaufknopf herein -- siehe den Schwellenwert
   weiter unten, der von 1024 auf 1280 px gegangen ist. */
.kopf .kopf__nav { flex: 0 0 auto; }

/* DER PROBE-KNOPF HATTE GAR KEINEN STIL (Befund 20.09.2026, A.4).
   `.kopf__probe` stand in KEINER Regel ausser der, die ihn unter 760 px
   ausblendet -- ein nackter <a> mit Unterstrich, auf den `.cta-glow` den
   Ring aus 4.10 legte. Der Ring schmiegte sich damit an den Text statt an
   einen Knopf, und Arpad sah, was da ist: "start free trial umrandung
   sieht man kaum."

   Zwei Dinge fehlten, nicht eins. Erstens die Form: Das Konzept stellt
   zwei Knoepfe nebeneinander ("erst die Probe, dann der Kauf"), und ein
   unterstrichener Text neben einer gefuellten Kapsel sind keine zwei
   Knoepfe. Zweitens der Grund: Der Ring aus 4.10 ist ein Lichtbogen in
   #a3ffb0/#4ade80 -- auf dem dunklen Hero leuchtet er, auf der weissen
   Kopfleiste ist er fast Weiss auf Weiss.

   Deshalb hier die Geisterkapsel in derselben Hoehe wie der Kaufknopf,
   und weiter unten in 4.10 ein Grundton fuer den Ring, den helle Flaechen
   ueberschreiben. */
.kopf .kopf__probe {
  display: inline-flex;
  align-items: center;
  /* gap statt Leerzeichen, aus demselben Grund wie beim Kaufknopf: Die
     Aufschrift ist zweiteilig, beide Teile sind Flex-Kinder, und die
     Leerzeichen an ihren Raendern fallen weg. */
  gap: .3em;
  height: 40px;
  padding: 0 18px;
  border: 1.5px solid var(--emerald-dark, #067a58);
  border-radius: 999px;
  color: var(--emerald-dark, #067a58);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control);
}
.kopf .kopf__probe:hover {
  background: var(--emerald-dark, #067a58);
  color: var(--white, #fff);
}

/* DER KAUFKNOPF, WEISS AUF DUNKELGRUEN (21.09.2026, Weisung Arpad:
   „aendere die CTA Farbe in header zu weiss ... vermeide die schwarzen
   CTA-s und waehle eine hellere Farbe mit einem guten contrast").

   Bis heute: Tinte (#071b17) auf dem Markengruen #10b981 — 7,03:1,
   rechnerisch der beste Kontrast der Seite, aber eine dunkle Aufschrift,
   und genau die sollte weg.

   WEISS AUF #10b981 GEHT NICHT: 2,54:1. Das ist nicht knapp, das ist
   nicht einmal die Haelfte der AA-Schwelle von 4,5:1 — dieselbe Zahl,
   die in styles.css seit Langem als „nie --accent" notiert ist. Weisse
   Schrift verlangt deshalb eine dunklere Flaeche aus derselben Familie:
   --emerald-dark #067a58, gemessen 5,34:1 gegen Weiss.

   Das ist zugleich die Farbe, die das CTA-Band am Fuss jeder Seite schon
   traegt (bauteile.css, .cta-band) — der Kaufknopf oben und der
   Handlungsaufruf unten sehen ab jetzt gleich aus, was vorher nicht
   stimmte.

   HOVER geht nach UNTEN, nicht nach oben: Heller hiesse zurueck Richtung
   #10b981 und damit unter die Schwelle, sobald die Schrift weiss bleibt.
   --ink-3 #17483c ist 10,35:1 und bleibt gruen. */
.kopf .kopf__kauf {
  display: inline-flex;
  align-items: center;
  /* KEIN gap MEHR (21.09.2026). Die Aufschrift war dreiteilig -- "BUY"
     plus zwei Spannen -- und brauchte `gap: .3em`, weil Flex-Kinder die
     Leerzeichen an ihren Raendern verlieren (gemessen stand dort einmal
     "BUYTHALASSAFROM EUR 34,90"). Seit "BUY NOW" ist es ein einziges
     Textstueck; der Abstand kommt aus dem Leerzeichen selbst. Der
     Probeknopf darueber ist weiter zweiteilig und behaelt sein gap. */
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  background: var(--emerald-dark, #067a58);
  color: var(--white, #fff);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.kopf .kopf__kauf:hover { background: var(--ink-3, #17483c); color: var(--white, #fff); }
.kopf .kopf__kauf:active { transform: scale(.985); }

.kopf .kopf__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
}
/* Drei Balken aus einem Element: der mittlere ist das Element, die
   beiden anderen sein Schatten. Kein Bild, kein Symbolfont. */
.kopf .kopf__burger-balken {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Fokus: der Ring der Palette (#047857, 5,48:1 auf Weiss). */
.kopf :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-glow);
}

/* --- Aufklappmenues ------------------------------------------------- */
.kopf .kopf__klapp {
  position: absolute;
  left: 0;
  right: auto;
  top: var(--header-height);
  z-index: 81;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.kopf .kopf__klapp-innen { padding: 8px 0 0; }
.kopf .kopf__karte {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2px 12px;
}
.kopf .kopf__karte--schmal { grid-template-columns: minmax(280px, 1fr); }
/* 4.12 (19.09.2026): Jeder Eintrag traegt ein Symbol, der Text steht im
   span daneben. Aus `block` wird deshalb `flex` -- sonst stuende das
   Symbol ueber dem Text statt davor. Die Zeile bleibt so hoch wie vorher:
   Symbol 20 px, Zeilenhoehe des Textes groesser. */
.kopf .kopf__eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-heading);
  text-decoration: none;
  transition: var(--transition-control);
}
.kopf .kopf__eintrag:hover { background: var(--surface-muted); color: var(--text-heading); }
/* Das Symbol traegt die Akzentfarbe, der Text nicht -- und es schrumpft
   nicht, wenn die Beschriftung lang wird („Wie Ihre Daten behandelt
   werden" ist die laengste). */
.kopf .kopf__eintrag-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  /* NICHT --accent, obwohl 4.12 das sagt. Gemessen: #10B981 erreicht auf
     der weissen Menuekarte 2,54:1 -- dieselbe Zahl, wegen der W1 den
     Fokusring und der Neubau die Ansichtspille von --accent weggenommen
     hat. Die Symbole sind zwar dekorativ (aria-hidden, Text daneben) und
     damit von WCAG 1.4.11 gar nicht erfasst; ein Haus, das dieselbe Farbe
     an drei Stellen als zu schwach gemessen hat, setzt sie nicht an der
     vierten wieder ein. --emerald-dark ist derselbe Akzent, nur tragfaehig
     (5,48:1). */
  color: var(--emerald-dark, #047857);
}

/* --- Vollbild-Ueberlagerung (Burger) ------------------------------- */
.kopf .kopf__ueberlagerung {
  display: none;
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 79;
  background: var(--surface-page);
  overflow-y: auto;
  padding: 8px 32px 40px;
}
.kopf .kopf__ueberlagerung-innen { max-width: 640px; margin: 0 auto; }
.kopf .kopf__gruppe {
  margin: 24px 0 4px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kopf .kopf__zeile {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-heading);
  text-decoration: none;
}
.kopf .kopf__zeile--haupt { margin-top: 24px; font-weight: var(--fw-semibold); }
.kopf .kopf__zeile:hover { color: var(--text-link); }

/* Unter 1080 px: Burger statt Leiste. Dieselbe Grenze wie in chrome.js
   (syncHeader) und site.css ([data-menu] display none). */
@media (max-width: 1079px) {
  .kopf .kopf__nav { display: none; }
  .kopf .kopf__burger { display: flex; }
  /* Die Klappmenues sind absolut gesetzt und zaehlen auch unsichtbar zur
     Breite der Kopfzeile: GEMESSEN 11.09.2026 auf interview.html bei
     390 px — scrollWidth 478 gegen 390, genau die Breite der Produktkarte.
     site.css traegt dieselbe Regel, aber die Kampagnenseite laedt site.css
     nicht; der Rahmen darf sich nicht darauf verlassen. */
  .kopf .kopf__klapp { display: none; }
}

/* Telefon: 56 px hoch (die Leiste klebt, ihre Hoehe geht von jedem
   Lesefeld ab). Die Variable wird am Element ueberschrieben, damit
   Klappmenue und Ueberlagerung dieselbe Zahl lesen. Sprachwahl und
   Kaufknopf bleiben in der Leiste — gemessen bei 320, 360 und 390 px
   (siehe tests/test_rahmen_gerendert.py). */
@media (max-width: 760px) {
  .kopf { --header-height: 56px; }
  .kopf .kopf__innen { padding: 0 16px; gap: 12px; }
  .kopf .kopf__logo { height: 28px; }
  .kopf .kopf__aktion { gap: 10px; }
  .kopf .kopf__kauf { height: 36px; padding: 0 14px; }
  .kopf .kopf__burger { height: 36px; width: 40px; }
  .kopf .kopf__ueberlagerung { padding: 4px 16px 40px; }
}

/* ------------------------------------------------------------------
   DIE LEISTE SCHRUMPFT MIT (19.09.2026) — GEMESSEN, NICHT GESCHAETZT

   Stufe 2 hat der Leiste einen zweiten Knopf gegeben (die Probe) und dem
   ersten einen laengeren Namen: aus „Buy" (87 px) wurde „BUY THALASSA
   FROM €34.90" (261 px), auf Deutsch „THALASSA AB 34,90 € KAUFEN"
   (284 px). Gemessen bei 1440/1080/768/390/320 px, beide Sprachen:

     DE Startseite, 320 px:  Leiste 728 px in 320  (408 zu breit)
     DE Startseite, 768 px:  Leiste 853 px in 768  ( 85 zu breit)
     EN Startseite, 390 px:  Leiste 669 px in 390  (279 zu breit)
     EN Preisseite, 320 px:  Leiste 469 px in 320  (149 zu breit)

   Die Preisseite war dabei schon OHNE Probeknopf zu breit — der Kaufknopf
   allein traegt sie ueber den Rand. Es reicht also nicht, einen Knopf zu
   verstecken; die Beschriftung selbst muss mitgehen.

   Sie ist deshalb dreigeteilt, und CSS nimmt von hinten weg:
     bis 1024 px  „BUY THALASSA"   / „THALASSA KAUFEN"
     bis  760 px  „BUY"            / „KAUFEN"
   Der Preis steht damit ueberall dort, wo Platz ist — und nirgends
   ausserhalb des Bildschirms, was dasselbe ist wie gar nicht.

   Der Probeknopf faellt auf dem Telefon aus der Leiste. Das ist keine
   neue Entscheidung: Sie stand seit dem 01.09.2026 in css/design/site.css
   („Der Testknopf geht — er ist das breiteste Element"), nur laedt die
   STARTSEITE diese Datei nicht, und genau dort fehlte die Regel. Sie
   steht jetzt hier, wo auch die Leiste steht. Die Aufforderung geht nicht
   verloren: sie steht im Ueberlagerungsmenue, und dieses Mal wirklich.
   ------------------------------------------------------------------ */
/* DER PROBEKNOPF SCHRUMPFT MIT (20.09.2026). Die Kapsel aus A.4 traegt
   Polster und Rand; gemessen wuchs die deutsche Leiste bei 768 px damit
   auf 831 px und lief 63 px ueber den Rand -- zwei Fenstertests wurden
   rot, und das war richtig so. Die Aufschrift ist deshalb zweiteilig wie
   beim Kaufknopf, und CSS nimmt von vorne weg:

     EN  "START FREE TRIAL" (184 px) -> "FREE TRIAL"
     DE  "KOSTENLOSEN TEST STARTEN" (281 px) -> "TEST STARTEN"

   Der Aufruf bleibt vollstaendig: Was faellt, ist das Beiwort, nicht das
   Versprechen. Im Ueberlagerungsmenue steht die lange Fassung weiter --
   dort ist Platz. */
/* 1280 STATT 1024 (20.09.2026). Seit die Leiste nicht mehr schrumpft,
   muss die Aufschrift frueher weichen.

   DER PREIS IM KAUFKNOPF IST WEG (21.09.2026): Die Aufschrift heisst
   seither "BUY NOW" bzw. "JETZT KAUFEN", ein einziges Textstueck ohne
   Spannen. Damit faellt die Messung von gestern (Deutsch bei 1280 px:
   1222 px gebraucht, 1144 vorhanden, ohne Preis 1112) in sich zusammen
   -- der Knopf ist jetzt kuerzer als jede dieser Zahlen. Uebrig bleibt
   das "START" des Probeknopfes, das weiter weichen muss. */
@media (max-width: 1280px) {
  .kopf .kopf__probe-mehr { display: none; }
}

/* DIE LETZTEN 31 PX VOR DEM BURGER (20.09.2026) — GEMESSEN.
   Seit die Menueleiste nicht mehr schrumpft, blieb ein schmales Band
   uebrig, in dem sie weder passt noch schon dem Burger gewichen ist:
   1080 bis 1110 px, nur auf Deutsch. Gemessen in 2-px-Schritten von
   1160 abwaerts -- das Dokument war dort 1111 px breit, das Fenster
   1080. Englisch war im ganzen Band gruen (kuerzere Knopfaufschriften).

   Es faellt deshalb kein Wort. 31 px liegen in den Abstaenden: drei
   Luecken zu je 24 px und zweimal 32 px Polster. Auf 16 und 24 px
   gebracht sind es 40 px -- genug, mit Rest fuer den Unterschied der
   Schriftmasse zwischen den Rechnern.

   `min-width: 1080px` grenzt die Regel nach unten ab: darunter ist die
   Leiste weg, und der Telefonblock (760) setzt seine eigenen Werte. */
@media (min-width: 1080px) and (max-width: 1140px) {
  .kopf .kopf__innen { padding: 0 24px; gap: 16px; }
}

@media (max-width: 760px) {
  /* `.kopf__kauf-mehr` stand hier bis zum 21.09.2026 und blendete das
     Wort "THALASSA" aus dem Kaufknopf. Die Spanne gibt es nicht mehr. */
  .kopf .kopf__probe { display: none; }
}

/* Der Probeknopf im Ueberlagerungsmenue: unten, nach den Menuepunkten,
   in der Form des Kaufknopfs. Ueber 760 px ist er ueberfluessig -- dort
   steht die Probe in der Leiste. */
.kopf .kopf__ueberlagerung-probe {
  display: none;
  margin-top: 18px;
  padding: 0 18px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
}
@media (max-width: 760px) {
  .kopf .kopf__ueberlagerung-probe { display: flex; }
}

/* 320 px (kleinstes Raster des Style Guide): GEMESSEN 11.09.2026 auf
   de/pricing.html — Logo 94 + „EN | DE" 72 + „Kaufen" 87 + Burger 40 plus
   Abstaende und Raender = 341 px in 320. Enger, aber nichts faellt weg:
   Sprachwahl und Kaufknopf bleiben in der Leiste, weil das Klappmenue
   keinen der beiden traegt. */
@media (max-width: 360px) {
  .kopf .kopf__innen { padding: 0 12px; gap: 8px; }
  .kopf .kopf__logo { height: 24px; }
  /* 6 statt 8 px und 8 statt 12 px Knopfpolster: GEMESSEN am 19.09.2026
     stand die deutsche Leiste bei 320 px noch 7 px ueber dem Rand,
     nachdem Probeknopf und Preis gefallen waren. „KAUFEN" ist 24 px
     breiter als „BUY" — die letzten Punkte kommen aus den Abstaenden,
     nicht aus einem weiteren Wort. */
  .kopf .kopf__aktion { gap: 6px; }
  .kopf .kopf__sprache { gap: 4px; }
  .kopf .kopf__lang { padding: 0; }
  .kopf .kopf__kauf { padding: 0 8px; }
  .kopf .kopf__burger { width: 36px; }
}

/* ==================================================================
   FUSSZEILE
   ------------------------------------------------------------------
   Vier Bereiche uebereinander: Kontaktblock und vier Menuespalten,
   Rechtsleiste, Verarbeiterzeile. Grund --surface-inverse (#064E3B);
   Weiss darauf 11,5:1 (tests/test_website_kontrast.py), sekundaerer
   Text nie unter rgba(255,255,255,.72) — darunter reisst der Kontrast.
   ================================================================== */
.fuss {
  background: var(--surface-inverse);
  color: var(--white);
  font-family: var(--font-core);
  box-sizing: border-box;
}
.fuss *, .fuss *::before, .fuss *::after { box-sizing: border-box; }

.fuss .fuss__innen {
  max-width: var(--container-max);
  box-sizing: content-box;   /* wie .kopf__innen (D1) */
  margin: 0 auto;
  padding: 64px 32px 40px;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}

.fuss .fuss__logo { height: 28px; width: auto; display: block; }
.fuss .fuss__satz {
  margin: 20px 0 0;
  max-width: 320px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .82);
}
.fuss .fuss__adresse {
  margin: 16px 0 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
}

.fuss a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.fuss a:hover { color: var(--white); }

.fuss .fuss__titel {
  margin: 0 0 10px;
  font: var(--fw-semibold) var(--fs-body-m)/1.4 var(--font-core);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--white);
  text-wrap: initial;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss .fuss__spalte a {
  display: inline-block;
  padding: 5px 0;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.fuss .fuss__recht {
  max-width: var(--container-max);
  box-sizing: content-box;
  margin: 0 auto;
  padding: 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.fuss .fuss__rechtsleiste { display: flex; flex-wrap: wrap; gap: 6px 0; }
.fuss .fuss__rechtsleiste li { font-size: var(--fs-body-m); line-height: var(--lh-snug); white-space: nowrap; }
/* Tippziel: Lighthouse (W10, 12.09.2026) mass die Verweise der Rechtsleiste bei
   390 px unter 24 px Hoehe. Der Innenabstand hebt sie darauf, ohne die
   Zeile zu veraendern; die Punkte dazwischen bleiben am li. */
.fuss .fuss__rechtsleiste a { display: inline-block; padding-block: 4px; }
/* Der Trennpunkt haengt am VORDEREN Eintrag: Bricht die Leiste um (390 px),
   bleibt er am Zeilenende statt eine neue Zeile mit „·" zu beginnen —
   gesehen am 11.09.2026 vor „Right of withdrawal". */
.fuss .fuss__rechtsleiste li:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: rgba(255, 255, 255, .72);
}
.fuss .fuss__copyright {
  margin: 0 0 0 auto;
  font-size: var(--fs-body-m);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, .72);
}

.fuss .fuss__verarbeiter {
  max-width: var(--container-max);
  box-sizing: content-box;
  margin: 0 auto;
  padding: 0 32px 40px;
}
.fuss .fuss__verarbeiter p {
  margin: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .72);
}

/* Fokus auf dem dunklen Band: #047857 laege bei 1,45:1, deshalb der Ring
   fuer dunkle Flaechen (primary-300, 6,4:1). */
.fuss :focus-visible {
  outline: 2px solid var(--focus-ring-on-dark);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 1023px) {
  .fuss .fuss__innen { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .fuss .fuss__kontakt { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .fuss .fuss__innen { grid-template-columns: 1fr; gap: 28px; padding: 48px 16px 24px; }
  .fuss .fuss__satz { max-width: none; }
  /* Tippziele: 18 px Zeile plus 2 x 7 px Polster = 32 px, durchgehend. */
  .fuss .fuss__spalte a { padding: 7px 0; }
  .fuss .fuss__recht { padding: 20px 16px; }
  .fuss .fuss__copyright { margin-left: 0; }
  .fuss .fuss__verarbeiter { padding: 0 16px 32px; }
}

/* ------------------------------------------------------------------
 * SPRUNG ZUM INHALT (W10, 12.09.2026). Der Link ist Teil der Kopfvorlage
 * (scripts/chrome/templates/header.*.html) und steht damit auf JEDER
 * Seite, die der Chrome-Bau schreibt. Vorher stand er von Hand in den
 * Neubauseiten und die Regel nur in thalassa.css — die elf Bestandsseiten,
 * pricing und download hatten deshalb keinen (Abnahme W10, Schritt 4).
 * Sichtbar erst mit Tastaturfokus; Tinte auf dem dunklen Band, damit der
 * Ring aus base.css (--focus-ring-on-dark) und die Aufschrift beide tragen.
 * ------------------------------------------------------------------ */
.sprung {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  padding: 12px 16px; border-radius: var(--radius-control);
  background: var(--surface-inverse); color: var(--white);
  font-weight: var(--fw-semibold); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}
.sprung:focus { top: 16px; }

/* ============================================================
   4.10 CTA-EFFEKT — Ring, Schein, Lichtstreifen
   ============================================================

   Reines CSS, kein Skript, und dieselben Klassen auf EN- und DE-Seiten.
   Die Regeln stehen HIER, weil rahmen.css jede Seite laedt: Der
   Probe-Knopf der Kopfzeile traegt `cta-glow` seit dem Neubau der
   Vorlagen, die Startseite haengt ihn zusaetzlich an den Hero-Knopf und
   den Knopf im CTA-Band.

   VIER MECHANIKPUNKTE, alle vier sind der Grund, warum es nicht kuerzer
   geht:

   1. `@property` ist Pflicht. Eine nicht registrierte Custom Property
      kennt keinen Zwischenwert -- der Winkel SPRINGT von 0 auf 360,
      statt zu laufen.
   2. `mask-composite: exclude` stanzt den 2-px-Ring aus der Flaeche. Das
      traegt ueber Glas und durchsichtigen Knoepfen, eine zweite Flaeche
      darueber nicht.
   3. Der Ring liegt GANZ AUSSERHALB des Knopfes (inset -2px bis 0).
      Deshalb verdeckt ihn die eigene Grundfarbe nicht, obwohl er
      `z-index: -1` traegt.
   4. `.cta-shine` ist die BLENDE, nicht der Streifen. Der Ring darf
      nicht beschnitten werden, der Streifen muss -- mit einem einzigen
      `overflow` geht beides nicht, deshalb zwei Elemente.

   WO DER EFFEKT SITZT (Auftrag 4.10, Tabelle), beide Sprachen gleich:
   Hero-Probe und CTA-Band tragen Ring UND Streifen, der Probe-Knopf der
   Kopfzeile nur den Ring (keine Blende eingehaengt), Promo-Leiste und
   Geisterknoepfe gar nichts. */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* `--cta-ring-grund` IST NEU (20.09.2026, A.4) und der Grund, warum der
   Ring ueberhaupt zu sehen ist. Der Lichtbogen deckt nur rund 110 Grad;
   die uebrigen 250 waren `transparent`. Auf dem dunklen Hero faellt das
   nicht auf -- dort steht der helle Bogen auf dunklem Grund. Auf der
   weissen Kopfleiste stand er auf Weiss, und zwischen zwei Durchlaeufen
   war gar nichts da. Der Grundton zeichnet den ganzen Ring durchgehend,
   der Bogen laeuft darueber. Dunkle Flaechen behalten den hellen
   Grundton, helle bekommen den dunklen. */
.cta-glow {
  --cta-ring-grund: rgba(163, 255, 176, .34);
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow: 0 0 20px rgba(74, 222, 128, .45);
}
.kopf .kopf__probe.cta-glow {
  --cta-ring-grund: rgba(6, 122, 88, .42);
  box-shadow: 0 0 18px rgba(6, 122, 88, .22);
}
/* DIE KAPSEL NUR FUER DEN NACKTEN VERWEIS. 4.10 setzt `border-radius:
   999px` an .cta-glow; gemessen am 19.09.2026 schlug das den Radius der
   .btn-Familie (8 px, Formfamilie 4.3) -- aus Hero- und Bandknopf wurden
   Kapseln. Der Ring erbt den Radius ohnehin, also braucht ihn nur das
   Element, das selbst keinen hat: der Probeknopf der Kopfzeile. */
.cta-glow:not(.btn) { border-radius: 999px; }

/* UND DER SCHEIN MUSS DEN KNOPF SCHLAGEN. `.btn--primary` traegt einen
   eigenen `box-shadow` und steht in bauteile.css spaeter -- bei gleicher
   Auswahlstaerke gewinnt das Spaetere, gemessen: der Hero-Knopf hatte den
   CTA-Schein gar nicht. Zwei Klassen genuegen. */
.btn.cta-glow { box-shadow: 0 0 20px rgba(74, 222, 128, .45); }
.btn.cta-glow:hover { box-shadow: 0 0 26px rgba(74, 222, 128, .6); }
.cta-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle),
    var(--cta-ring-grund) 0deg, var(--cta-ring-grund) 70deg,
    #a3ffb0 110deg, #4ade80 140deg,
    var(--cta-ring-grund) 180deg, var(--cta-ring-grund) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: cta-rotate 3s linear infinite;
  pointer-events: none;
}
@keyframes cta-rotate { to { --angle: 360deg; } }

/* Die Blende: deckt den Knopf, beschneidet NUR den Streifen.

   ZWEI KLASSEN, NICHT EINE: bauteile.css macht mit `.cta-band span` jede
   Spanne im CTA-Band zur grauen Nebenzeile (display block, margin-top 4,
   14 px). Das traf die Blende mit -- gemessen: unter reduzierter Bewegung
   verschwand die Blende des Hero-Knopfes, die des Bandknopfes nicht.
   `.cta-glow > .cta-shine` gewinnt und setzt die drei Beigaben zurueck. */
.cta-glow > .cta-shine {
  margin: 0;
  color: inherit;
  font-size: inherit;
}
.cta-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.cta-shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: rotate(15deg);
  animation: cta-shine 20s ease-in-out infinite;
}
/* ALLE 20 SEKUNDEN STATT ALLE 4 (23.09.2026, Designer ueber Arpad: "Header
   CTA shine rarer, 20 s"). Der Durchlauf selbst bleibt so schnell wie
   vorher (1,8 s = 9 % von 20 s); nur die Pause davor waechst. Wer die
   Pause verkuerzt, muss die Prozentzahl mitziehen, sonst wird der Streifen
   langsamer statt seltener. */
@keyframes cta-shine {
  0%, 91% { left: -80%; }   /* Pause */
  100%    { left: 130%; }   /* Durchlauf, 1,8 s */
}
.cta-glow:hover { box-shadow: 0 0 26px rgba(74, 222, 128, .6); }

/* Der Rueckfall fuer Browser ohne animierbaren Winkel: ein uebergrosses
   Quadrat dreht sich hinter dem Knopf, der Ring bleibt ein Ring. */
@supports not (background: conic-gradient(from var(--angle), red, blue)) {
  .cta-glow::before {
    inset: -2px;
    padding: 0;
    background: none;
    animation: none;
    border: 2px solid rgba(74, 222, 128, .55);
  }
  .cta-glow::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 180%;
    aspect-ratio: 1;
    background: linear-gradient(90deg, transparent 0 45%, #4ade80 50%, transparent 55% 100%);
    animation: cta-drehen 3s linear infinite;
    pointer-events: none;
  }
  @keyframes cta-drehen {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-glow::before,
  .cta-glow::after { animation: none; }
  .cta-glow > .cta-shine { display: none; }
  .cta-glow,
  .btn.cta-glow { box-shadow: 0 0 16px rgba(74, 222, 128, .35); }
}

/* DER LICHTSTREIFEN AUF DEM PROBE-KNOPF DER KOPFZEILE (21.09.2026).
   Arpad: "gib dem 'start free trial button' ein shine effect von links
   nach rechts alle 4 Sekunden." Das hebt die Tabelle weiter oben auf,
   die genau diesem Knopf den Streifen versagt und ihm nur den Ring
   laesst -- aufgehoben auf Ansage, nicht aus Versehen. Wer die Tabelle
   liest, findet hier den Widerspruch und das Datum dazu.

   OHNE ZWEITES ELEMENT, und das ist der Kern: Die Blende `.cta-shine`
   existiert nur, weil der Streifen beschnitten werden muss und der Ring
   nicht -- ein `overflow` kann nicht beides. Ein HINTERGRUNDBILD aber
   beschneidet sich an der eigenen Box, ganz ohne `overflow`. Damit
   genuegt ::after, und keine der Kopfzeilen in `web/` und `web/de/`
   muss angefasst werden: eine Regel, beide Sprachen, jede Seite.

   ::after IST HIER FREI -- der Ring sitzt auf ::before. Belegt ist
   ::after nur im @supports-Rueckfall fuer Browser ohne animierbaren
   conic-gradient; deshalb steht diese Regel in der Gegenprobe dazu und
   tritt dort gar nicht erst an. Sonst uebermalte der Streifen den
   Ersatzring.

   20s mit Pause bis 91% (seit 23.09.2026, vorher 4s bis 55%): derselbe
   Takt wie `@keyframes cta-shine` oben, damit Kopfzeile und Hero-Knopf
   nicht gegeneinander blinken. Der Durchlauf dauert weiter 1,8s, die
   uebrigen 18,2s steht der Streifen links ausserhalb. */
@supports (background: conic-gradient(from var(--angle), red, blue)) {
  .kopf .kopf__probe.cta-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-image: linear-gradient(105deg,
      transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 160% 0;
    animation: kopf-probe-schein 20s ease-in-out infinite;
    pointer-events: none;
  }
  /* DIE PROZENTE LAUFEN HIER VERKEHRT HERUM, und das ist keine Marotte,
     sondern die Rechenregel fuer `background-position`: Der Wert schiebt
     nicht um p, er richtet den Punkt p des BILDES am Punkt p der FLAECHE
     aus. Der Versatz ist (Flaeche - Bild) * p -- und weil das Bild mit
     220% breiter ist als die Flaeche, ist die Klammer negativ. Ein
     STEIGENDER Prozentwert schiebt den Streifen also nach LINKS.

     Darum faengt der Lauf bei 160% an (Streifen links ausserhalb) und
     endet bei -60% (rechts ausserhalb). Andersherum gelesen liefe er von
     rechts nach links -- genau der Fehler, der am 21.09.2026 einmal
     drinstand und sofort auffiel. */
  @keyframes kopf-probe-schein {
    0%, 91% { background-position: 160% 0; }   /* Pause, links ausserhalb (20 s Takt, siehe cta-shine) */
    100%    { background-position: -60% 0; }   /* Durchlauf nach rechts */
  }
  /* Die Sammelregel oben (`.cta-glow::after`) ist schwaecher als dieser
     Selektor und wuerde den Streifen NICHT anhalten. Darum hier noch
     einmal ausdruecklich -- und das Bild dazu weg, sonst bliebe ein
     heller Balken stehen, wo vorher Bewegung war. */
  @media (prefers-reduced-motion: reduce) {
    .kopf .kopf__probe.cta-glow::after {
      animation: none;
      background-image: none;
    }
  }
}

/* ============================================================
   A.1 FARBWELT: DIE DUNKLEN FLAECHEN (19.09.2026)
   ============================================================

   Entscheidung Arpad: „mach es richtung dunkle gruen" — die Familie
   bleibt, das Schwere geht weg. Die Token sind umgestellt
   (--flaeche-dunkel, --flaeche-tief in tokens/palette-2026-09.css); sie
   erreichen die Fusszeile, die Glaswand und alles, was ueber
   --surface-inverse / --surface-deep / --gradient-sea faerbt.

   WARUM ES DAMIT NICHT GETAN IST. Vier dunkle Flaechen sind in
   bauteile.css FEST VERDRAHTET, nicht ueber ein Token:

     .hero          #071b17 -> #0b2620 -> #0c342a   (Verlauf)
     .product-section  var(--ink)
     .footer-cta    #0b2b24
     .site-footer   #0b2b24

   bauteile.css ist eingefroren und wird von tests/test_bauteile.py Regel
   fuer Regel gegen docs/konzept/2026-09-11-konzept.html gelesen — eine
   fuenfte Abweichung ohne Eintrag ist rot. Dort zu faerben hiesse, den
   Vertrag zwischen zwei Dateien zu brechen.

   Also hier, mit einem `body`-Vorsatz, der die Auswahlstaerke um eins hebt
   und die spaeter geladene bauteile.css schlaegt. Dasselbe Mittel, das
   rechtstext.css seit S5 gegen die Altschicht benutzt — und das Gegenteil
   von stillem Drift: Die vier Stellen stehen hier zusammen, mit dem Grund
   daneben.

   ⚠ WER DAS KONZEPT NACHZIEHT, loescht diesen Block. Solange das Konzept
   die alten Werte fuehrt, ist er die einzige Stelle, an der die Website
   ihre Farbwelt hat. */
body .hero {
  background:
    radial-gradient(80% 95% at 78% 18%, rgba(32, 154, 117, .33), transparent 55%),
    linear-gradient(138deg, var(--flaeche-dunkel) 0%, #14402f 56%, var(--flaeche-tief) 100%);
}
body .product-section { background: var(--flaeche-dunkel); }
body .footer-cta,
body .site-footer { background: var(--flaeche-dunkel); }

/* --------------------------------------------- 4.14 Die Marke fuehrt heim
   Beide Bildmarken standen als nacktes <img> im Kopf und im Fuss -- auf
   keiner Unterseite gab es damit einen Weg zurueck auf die Startseite
   ausser ueber den Fusseintrag "Home". Der faellt am 20.09.2026 auf
   Arpads Wunsch weg; ohne diese Verlinkung waere die Startseite von
   product.html, security.html oder einer Use-Case-Seite gar nicht mehr
   erreichbar gewesen. Gefunden beim Bauen, nicht bestellt.

   `inline-flex` statt des Vorgabewerts: Ein <a> ist inline, und ein
   inline-Kasten setzt sein <img> auf die Grundlinie -- darunter bleibt
   der Platz fuer Unterlaengen stehen und die Leiste wird ein paar Pixel
   hoeher. Kein Unterstrich, weil die Marke kein Textlink ist. */
.kopf__heim,
.fuss__heim { display: inline-flex; text-decoration: none; }
.kopf__heim:focus-visible,
.fuss__heim:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

/* Shared visual refinement. Both locales and all marketing pages use this
   stylesheet; no checkout, navigation target or form behavior is changed. */
body .hero { background: var(--gradient-hero); }
body .hero .eyebrow,
body .hero h1 span,
body .product-section .eyebrow { color: var(--brand-light); }
body .cta-band,
body .footer-cta { background: var(--surface-cta); }
body .cta-band span { color: var(--text-on-dark-muted); }
body .fuss,
body .site-footer { background: var(--surface-footer); }

/* One primary button treatment, including the previous dark variant. */
body .btn.btn--primary,
body .btn.btn--dark,
body .on-dark a.btn.btn--primary,
.kopf .kopf__probe,
.kopf .kopf__ueberlagerung-probe {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-bg);
  border-radius: var(--radius-control);
  box-shadow: var(--button-shadow);
  text-shadow: none;
}
body .btn.btn--primary:hover,
body .btn.btn--dark:hover,
body .on-dark a.btn.btn--primary:hover,
.kopf .kopf__probe:hover,
.kopf .kopf__ueberlagerung-probe:hover {
  background: var(--button-primary-hover);
  color: var(--button-primary-text);
  border-color: var(--button-primary-hover);
  box-shadow: var(--button-shadow-hover);
}
body .on-dark .btn.btn--primary,
body .price-card--featured .btn.btn--primary,
body .cta-band .btn.btn--primary {
  border-color: var(--button-primary-border);
}
body .btn.btn--primary .cta-shine { display: none; }

.kopf .kopf__kauf {
  background: transparent;
  color: var(--brand-dark);
  border: 1px solid var(--brand-dark);
  box-shadow: none;
}
.kopf .kopf__kauf:hover {
  color: var(--brand-dark);
  background: var(--chip-bg);
}

/* GLAS, UND ZWAR IMMER (21.09.2026). Arpad: "mache die pill von der
   Nav-Bar mit einem Glass-morphism effect."

   VORHER WAR ES KEINS: Die Kapsel stand auf --surface-page, also
   deckendem Weiss, und bekam erst beim Rollen --nav-glass -- und das
   ist rgba(255,255,255,.94), sechs Prozent Durchblick. Unter der
   Kapsel lag damit nie etwas Sichtbares; die Unschaerfe hatte nichts
   zu tun. Jetzt traegt der Ruhezustand das Glas, und das Rollen macht
   es nur dichter.

   DREI TEILE, ALLE DREI NOETIG: die durchscheinende Flaeche, die
   Unschaerfe dahinter (`saturate` dazu, weil Blur die Farben darunter
   auswaescht -- ohne den Schub wirkt die Kapsel grau), und die helle
   Innenkante als `inset`-Schatten. Die Innenkante ist der Unterschied
   zwischen "durchsichtig" und "Glas": Sie faengt das Licht an der
   Oberkante, wie eine Scheibe es taete.

   DIE KANTE WIRD HELLER STATT GRAU. --border-default ist eine
   Linienfarbe fuer weisse Flaechen; auf dem dunklen Hero stand sie als
   grauer Strich um eine helle Scheibe. Weiss mit Alpha nimmt beide
   Untergruende an.

   WAS DAS KOSTET -- JETZT GERECHNET, NICHT VERMUTET (21.09.2026).
   Hier stand erst, bei .55 bleibe der Text ueber 4,5:1. Das galt fuer
   EINE der drei Schriften in der Leiste. Gerechnet ueber
   --surface-hero (#051a12), Weiss mit Alpha darueber, WCAG-Formel:

     Alpha          .94(alt)   .55    .46
     Nav-Punkte     ~17        6,01   4,56   #071b17, haelt
     Probeknopf     ~5,3       1,80   1,37   #067a58, haelt NICHT
     EN | DE        ~5,9       1,98   1,51   #586861, haelt NICHT

   DER GRUND IST DIE MITTE: Weisses Glas ueber sehr dunklem Grund
   ergibt keinen hellen, sondern einen MITTLEREN Ton (bei .46 rund
   rgb(120,131,127)). Gegen einen Mittelton verliert dunkle Schrift
   genauso wie helle; nur Fast-Schwarz kommt noch durch. Dunkler
   faerben hilft deshalb nicht -- #04533c steht bei 2,33.

   DAMIT IST --nav-glass MIT SEINEN .94 KEINE ZAGHAFTIGKEIT GEWESEN,
   sondern genau dieses Budget: Erst ab etwa .90 traegt der Grund auch
   die gruene und die graue Schrift. Wer hier weiter aufmacht, muss
   die beiden Farben mitnehmen (dann aber nach Fast-Schwarz, nicht nach
   Dunkelgruen) oder der Leiste ueber dem Hero ein DUNKLES Glas mit
   heller Schrift geben. Beides ist ein Entwurfsschritt, keine Zahl.

   SO STEHT ES BEWUSST: Arpad hat am 21.09.2026 nach mehr Durchsicht
   gefragt ("make the nav bar a little bit more transparent"). Am
   selben Tag war die Kapsel kurz wieder deckend weiss, weil ein
   dunkles Band dahinter sie ins Graue kippen liess -- Band und
   Deckung sind beide zurueckgenommen, die Durchsicht steht wieder.

   UEBER WEISSEM GRUND KOSTET SIE NICHTS: Die Zahlen oben gelten fuer
   den dunklen Hero, und der liegt erst unter der Kapsel, wenn man
   gerollt hat. Im Ruhezustand steht sie auf --surface-page.
   tests/test_website_kontrast.py wird den gerollten Fall anmerken --
   zu Recht. */
/* KEIN GLAS MEHR (23.09.2026, Designer ueber Arpad): "Remove the glass
   effect from the menu; plain bar, 90 % opacity when sticky." Die Kapsel
   bleibt zentriert und so breit wie ihr Inhalt (Entscheidung Arpad:
   "Menue bleibt zentriert"); weg sind Unschaerfe, Glanzkante und die
   halbe Deckung. Im Ruhezustand deckt sie voll, gerollt zu 90 Prozent --
   genau das Budget, das der Kommentar oben fuer die gruene und die graue
   Schrift ueber dem dunklen Hero ausgerechnet hat (ab etwa .90 traegt der
   Grund beide). Ohne Unschaerfe ist das kein Glas mehr, sondern eine
   Scheibe mit einem Hauch Durchsicht. */
.kopf {
  top: 8px;
  width: calc(100% - 24px);
  margin: 8px auto;
  background: var(--surface-page, #fff);
  border: 1px solid var(--border-subtle, rgba(5, 26, 18, .08));
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 28px rgba(5, 26, 18, .10);
  transition: background-color var(--dur-base), box-shadow var(--dur-base);
}
.kopf.is-scrolled {
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 10px 32px rgba(5, 26, 18, .14);
}
/* Wer Transparenz abbestellt hat, bekommt auch gerollt die volle Deckung. */
@media (prefers-reduced-transparency: reduce) {
  .kopf,
  .kopf.is-scrolled {
    background: var(--surface-page);
    border-color: var(--border-default);
  }
}
.kopf .kopf__innen { padding-inline: 24px; }

/* DIE KAPSEL AN DEN INHALT, NICHT ANS FENSTER (21.09.2026). Arpad, mit
   Bild: "ich wollte die Breite angepasst haben, also dass es nicht so
   weit ist." Die Hoehe bleibt, wie sie war -- ein erster Versuch hatte
   sie verkleinert und das Falsche getroffen.

   DER LEERRAUM STAND INNERHALB DES RANDES, und genau das war der
   Fehler: `.kopf` lief mit `width: calc(100% - 24px)` bis an die
   Fensterkanten, waehrend `.kopf__innen` bei --container-max (1240 px)
   stehen bleibt und sich mittet. Auf einem 1920-px-Schirm sind das rund
   300 px Nichts hinter dem Rand, links wie rechts -- der Rand umschloss
   das Fenster, nicht die Leiste.

   `fit-content` laesst die Kapsel auf ihren eigenen Inhalt schrumpfen;
   `margin: 8px auto` von oben mittet sie weiter. --container-max bleibt
   die Obergrenze fuer den Inhalt, calc(100% - 24px) die fuers Fenster,
   sodass schmale Schirme wie bisher aufliegen.

   ERST AB 761 px. Darunter traegt `.kopf__ueberlagerung` ein
   `inset: var(--header-height) 0 0` und spannt sich ueber die Kapsel:
   Eine geschrumpfte Kapsel schnitte das Burger-Menue auf Inhaltsbreite
   zusammen. Das Telefon behaelt die volle Breite. */
@media (min-width: 761px) {
  .kopf {
    width: fit-content;
    max-width: calc(100% - 24px);
  }
}
.kopf .kopf__ueberlagerung {
  top: calc(var(--header-height) + 18px);
  border-top: 1px solid var(--border-default);
}

/* Neutral recommendation chips everywhere; only the featured business
   recommendation receives gold. Hidden pricing tabs do not add gold. */
body :is(.price-badge, .plan__badge, .badge-save, .bundle__badge) {
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
}
body .price-card--featured > .price-badge {
  color: var(--gold-dark);
  background: var(--gold-light);
  border-color: var(--gold);
}
body:is(.startseite, [data-page="pricing"]) .preisteil .price-card--featured :is(.price span, .price-unter, .price__tax, .plan__summe, .kicker),
body[data-page="pricing"] .price-card--featured :is(.price span, .price-unter, .price__tax, .plan__summe, .kicker) {
  color: var(--brand-light);
}
body:is(.startseite, [data-page="pricing"]) .preisteil .price-card--featured > p,
body[data-page="pricing"] .price-card--featured > p {
  color: var(--text-on-dark-muted);
}
body .price-card--featured .feature-list li { color: var(--text-on-dark-muted); }

/* Glas auf Host-Ebene, weil das Widget von aussen kommt (Shadow DOM, eigenes
   Deployment) und die Website nur seine Variablen erreicht.

   DER KNOPF IST DURCHSICHTIGER ALS DAS FENSTER (22.09.2026, Wunsch: "Glass
   effect, dass es durchsichtig wird"). --tc-primary faerbt im Chatfenster
   auch Knoepfe und Sprechblasen mit Mint-Schrift; mit weniger Deckung fiele
   deren Textkontrast unter 4,5 : 1. Deshalb bekommt der Knopf einen eigenen
   Ton ueber zwei Wege:
     --tc-primary-bright   heute: das ausgelieferte Widget nutzt es NUR im
                           Verlauf des Knopfs (88 -> 65 Prozent Deckung)
     --tc-launcher-glass   ab dem naechsten Deploy des Chats: gleichmaessig
                           65 Prozent, mit Glanzlicht und heller Kante */
[data-thalassa-chat] {
  --tc-primary: var(--glass-chat) !important;
  --tc-primary-bright: var(--glass-chat-launcher) !important;
  --tc-launcher-glass: var(--glass-chat-launcher) !important;
  --tc-on-primary: var(--brand-light) !important;
  --tc-panel-bg: var(--nav-glass) !important;
}
[data-thalassa-chat]::before {
  content: "";
  position: fixed;
  right: var(--tc-edge, 24px);
  bottom: var(--tc-edge, 24px);
  width: var(--tc-launcher, 60px);
  height: var(--tc-launcher, 60px);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

@media (max-width: 760px) {
  .kopf { top: 6px; width: calc(100% - 12px); margin-block: 6px; }
  .kopf .kopf__innen { padding-inline: 12px; gap: 8px; }
  .kopf .kopf__aktion { gap: 8px; }
  .kopf .kopf__ueberlagerung { top: calc(var(--header-height) + 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf { transition: none; }
}

/* ============================================================
   NICHTS HEBT SICH BEIM UEBERFAHREN (23.09.2026)
   ============================================================

   Designer ueber Arpad: "Buttons must not move (no hover lift effect)"
   und "Remove the hover zoom on screenshots". Knoepfe, Karten, Kacheln
   und Kaesten zeigen das Ueberfahren nur noch mit Farbe, Rand und
   Schatten -- nicht mehr mit 1 bis 3 Pixeln Hub, und die Pfeile darin
   rutschen nicht mehr mit.

   EINE REGEL HIER STATT ZEHN AN DER QUELLE: Die Hubregeln stehen in
   sieben Stilblaettern (bauteile, boxen, landing, premium, download,
   privacy-advantage, site), zum Teil mit `body[data-page]` davor.
   rahmen.css laedt jede Marketingseite; `!important` schlaegt jede
   dieser Regeln, egal wie spezifisch. Die Quellregeln sind trotzdem
   entfernt, wo sie auf der Startseite und den Fallseiten stehen
   (bauteile, boxen), damit niemand dort nachliest und sich wundert.

   `:active` bleibt: Das kurze Eindruecken beim Klick (--press-scale)
   ist eine Rueckmeldung, keine Bewegung beim Ueberfahren. */
:is(.btn, .kopf__probe, .kopf__ueberlagerung-probe, .box, .feature, .cap-card,
    .card, .tier, .dl-knopf, .dl-band__knopf, .dl-btn, .dl-tile, .pa-tutorial,
    .fall-karte, .price-card, .plan):is(:hover, :focus-visible) {
  transform: none !important;
}
:is(.btn, .dl-btn, .dl-textlink, .text-link):is(:hover, :focus-visible) :is(.btn__icon, svg),
.dl-textlink:is(:hover, :focus-visible)::after {
  transform: none !important;
}

/* ============================================================
   KEINE UNTERSTRICHENEN LINKS (23.09.2026)
   ============================================================

   Designer ueber Arpad: "No underlined links; signal links with color,
   whitespace and a chevron." Bis heute unterstrich der Browser jeden
   Link (base.css setzt nur die Farbe des Strichs, nicht den Strich ab).

   DREI ARTEN, DREI SIGNALE:
     1. Knoepfe, Menue, Fusszeile, Karten: tragen ihre eigene Form und
        brauchen keinen Strich.
     2. Allein stehende Verweise ("Read more", "What the verified sources
        cover"): Farbe plus Chevron -- `.link-weiter`, siehe unten.
     3. Links IM FLIESSTEXT (Rechtstexte, FAQ, Fussnoten): Hier geht es
        nicht ohne ein zweites Signal. WCAG 1.4.1 verlangt, dass ein Link
        nicht NUR an der Farbe erkennbar ist. Markengruen #067a58 steht
        gegen die Tinte #071b17 bei 3,34 : 1 -- das traegt die Technik
        G183 (mindestens 3 : 1 zum Text UND ein Signal beim Ueberfahren und
        beim Fokus). Gegen die graue Nebenschrift (#586861) reicht es
        nicht; deshalb stehen Links im Fliesstext zusaetzlich halbfett
        (G182), und beim Ueberfahren und beim Fokus erscheint der Strich.

   `:where()` HAELT DIE SPEZIFITAET BEI NULL: Jede Klasse einer
   Komponente schlaegt diese Grundregeln, ohne dass eine Komponente dafuer
   etwas tun muss. */
:where(a) { text-decoration: none; }
:where(p, li, dd, td, th, figcaption, small, blockquote, label) :where(a:not(.btn)) {
  font-weight: var(--fw-semibold, 600);
}
:where(p, li, dd, td, th, figcaption, small, blockquote, label) :where(a:not(.btn)):is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Der allein stehende Verweis: Farbe, Luft, Chevron. Der Chevron ist
   Schrift, kein Bild -- er nimmt Farbe und Groesse vom Link und braucht
   keine Datei. aria-hidden geht mit ::after nicht; Vorleseprogramme lesen
   "›" als "Einzelanfuehrung rechts" oder gar nicht, beides stoert nicht. */
.link-weiter {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  color: var(--text-link, #067a58);
  font-weight: 700;
  text-decoration: none;
}
.link-weiter::after {
  content: "\203A";
  font-size: 1.25em;
  line-height: 1;
  transform: translateY(-.04em);
}
.link-weiter:hover,
.link-weiter:focus-visible { color: var(--text-link-hover, #17483c); text-decoration: none; }
/* Auf dunklem Grund Mint statt Gruen. Nicht jede dunkle Flaeche traegt
   `.on-dark`: der Hero der Fallseiten (.campaign-hero) und das gruene Band
   (.cta-band) sind es von Haus aus. Wo ein Band hell gemacht ist (Download-
   und Bestandsseiten, seiten.css), setzt die Regel darunter es zurueck. */
:is(.on-dark, .box--ink, .campaign-hero, .cta-band, .price-card--featured) .link-weiter { color: var(--brand-light, #a7f3d0); }
:is(.on-dark, .box--ink, .campaign-hero, .cta-band, .price-card--featured) .link-weiter:is(:hover, :focus-visible) { color: var(--white, #fff); }