/* ==========================================================================
   NAIVA AG — naiva.cash
   Gestaltung nach dem gelieferten Entwurf (_quelle/naiva-homepage-preview.png):
   Nachtblau, Gold, Sternbild. Die Bildwelt ist gezeichnet statt fotografiert —
   das spart rund zwei Megabyte Ladezeit und bleibt in jeder Aufloesung scharf.

   Aufbau dieser Datei
     1  Farben, Abstaende, Schriften        6  Ueber / Tafel / Saeulen
     2  Grundlagen und Hilfsklassen         7  Ablauf / Partner
     3  Kopfbalken und Navigation           8  Schweiz (heller Abschnitt)
     4  Hero                                9  Kontakt und Fusszeile
     5  Abschnitte und Leistungskarten     10  Bewegung, Breiten, Druck
                                         11  Rechtsseite (legal.html)
   ========================================================================== */

/* -------------------------------------------- 1  Farben, Abstaende, Schriften */

:root {
  --nacht: #020b18;
  --tinte: #041226;
  --tinte-2: #071c35;
  --tinte-3: #0d2b4d;
  --linie: #1c3a5e;

  --gold: #c9a35f;
  --gold-hell: #e4c98d;
  --gold-tief: #9d7c3f;
  --eis: #dcecff;

  --text: #f4f5f7;
  --gedaempft: #b9c2cf;
  --gedaempft-2: #8f9cae;

  /* Heller Abschnitt. Gold erreicht auf #edf2f7 nur 2,0:1 und waere dort
     unleserlich — #7a5c21 kommt auf 5,6:1 und behaelt den Goldcharakter. */
  --papier: #edf2f7;
  --papier-text: #10213a;
  --gold-auf-papier: #7a5c21;

  /* Abstaende auf 4er-Basis, damit die Seite einen Rhythmus hat statt
     vierzehn verschiedener Zufallswerte. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s8: 32px;  --s10: 40px; --s12: 48px; --s16: 64px;
  --abschnitt: clamp(72px, 7vw + 24px, 132px);
  --spalte: clamp(40px, 5vw, 80px);

  --serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont,
          'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Sperrung der Versalien. Deutsche und russische Woerter sind laenger,
     chinesische Zeichen duerfen gar nicht gesperrt werden — sonst fallen sie
     auseinander. Deshalb pro Sprache gestuft. */
  --sperrung: .26em;
  --sperrung-klein: .16em;

  --header-h: 72px;
  --rund: 2px;
  --zeit: .5s;
}

html:lang(zh) {
  --serif: 'Cormorant Garamond', 'PingFang SC', 'Hiragino Sans GB',
           'Source Han Serif SC', 'Noto Serif CJK SC', 'Microsoft YaHei', serif;
  --sans: 'Manrope', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans SC',
          'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --sperrung: .1em;
  --sperrung-klein: .05em;
}
html:lang(de), html:lang(ru) { --sperrung: .18em; --sperrung-klein: .12em }

/* ------------------------------------------- 2  Grundlagen und Hilfsklassen */

*, *::before, *::after { box-sizing: border-box }

html {
  scroll-behavior: smooth;
  /* Ankersprung landet unter dem fixierten Kopfbalken statt dahinter */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--tinte);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-kerning: normal;
  /* iOS Safari vergroessert Text im Querformat sonst eigenmaechtig */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none }
img, svg { max-width: 100%; display: block }
p { text-wrap: pretty; margin: 0 0 var(--s4) }
h1, h2, h3 { text-wrap: balance; margin: 0 }
ul, ol, dl, dd { margin: 0; padding: 0 }
li { list-style: none }
address { font-style: normal }

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  /* env() fuer das iPhone im Querformat (Notch / Dynamic Island) */
  padding-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right));
}

/* Ziffern gleicher Breite, damit 01–06 senkrecht fluchten */
.karte-nr, .stufe-nr, .kontakt-schild { font-variant-numeric: tabular-nums }

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sperrung);
  color: var(--gold);
  margin: 0 0 var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.kicker::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.3vw + 12px, 50px);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0 0 var(--s5);
}
h2.gross { font-size: clamp(34px, 4.2vw + 12px, 62px) }

h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
  margin: 0 0 var(--s3);
}

.lead { color: var(--gedaempft); font-size: 16.5px; max-width: 62ch }
.hinweis {
  margin-top: var(--s6);
  padding-left: var(--s4);
  border-left: 2px solid var(--gold-tief);
  color: var(--gedaempft-2);
  font-size: 13.5px;
  max-width: 54ch;
}

/* Noch nicht gelieferte Stammdaten sichtbar als Luecke kennzeichnen, statt
   etwas Erfundenes auszuliefern. Faellt beim Korrekturlesen sofort auf.

   Bewusst span.offen und nicht .offen: "offen" heisst weiter unten auch der
   Zustand des geoeffneten Mobilmenues (.mobilenav.offen, von site.js und
   legal.js gesetzt). Als blosses .offen faerbte diese Regel das ganze
   geoeffnete Menue gold und kursiv und haengte ihm einen gestrichelten Rand
   an — der Zustandsname gehoert einem <div>, die Stammdatenluecke einem
   <span>, und genau daran trennt der Selektor die beiden. */
span.offen {
  color: var(--gold-hell);
  border-bottom: 1px dashed var(--gold-tief);
  font-style: italic;
}

/* Sprungmarke fuer Tastatur und Screenreader */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--nacht);
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
}
.skip:focus { left: 0 }

:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px }

/* --------------------------------------- 3  Kopfbalken und Navigation */

header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  background: linear-gradient(180deg, rgba(2, 11, 24, .96), rgba(2, 11, 24, .82));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 163, 95, .16);
}

nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.brand { display: inline-flex; align-items: center; gap: var(--s3); flex: 0 0 auto }
.brand img { height: 34px; width: auto; flex: 0 0 auto }
.brand-text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap }
.brand-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  color: #eef4ff;
}
/* Silberverlauf wie in der gelieferten Wortmarke — nur dort, wo der Browser
   Text als Maske beherrscht, sonst bliebe der Schriftzug unsichtbar. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand-name {
    background: linear-gradient(170deg, #ffffff 0%, #dfe9f5 38%, #9fb2c9 72%, #d8e4f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.brand-claim {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .17em;
  line-height: 1;
  color: var(--gedaempft-2);
}
.brand:focus-visible { outline-offset: 6px }

.navlinks {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
}
.navlinks a { position: relative; padding: 6px 0; color: var(--gedaempft) }
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .28s ease;
}
.navlinks a:hover { color: var(--text) }
.navlinks a:hover::after,
.navlinks a[aria-current]::after { transform: scaleX(1) }
.navlinks a[aria-current] { color: var(--gold-hell) }

.langs { display: flex; gap: 4px; border-left: 1px solid rgba(255, 255, 255, .14); padding-left: var(--s4) }
.lang {
  border: 1px solid rgba(201, 163, 95, .34);
  background: transparent;
  color: var(--gold-hell);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 8px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang:hover, .lang.active { background: var(--gold); color: var(--nacht) }

/* WCAG 2.5.8 verlangt 24x24 px Trefferflaeche; auf Touchgeraeten grosszuegiger.
   Nur fuer grobe Zeiger, damit das Desktop-Layout unveraendert bleibt. */
@media (pointer: coarse) {
  .lang { min-width: 36px; min-height: 36px }
  .kontakt a { display: inline-block; padding: 6px 0 }
}

.navtoggle {
  display: none;
  margin-left: auto;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(201, 163, 95, .34);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.navtoggle span { display: block; width: 20px; height: 1px; background: var(--gold-hell); transition: transform .24s ease, opacity .24s ease }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* Das Overlay steht im HTML bewusst NEBEN <header> und nicht darin.
   <header> traegt backdrop-filter — und ein backdrop-filter macht das Element
   zum Bezugsrahmen fuer position:fixed darin. Als Kind des Kopfbalkens bemass
   sich dieses Overlay deshalb an dessen 64px Hoehe statt am Fenster: es war
   96px hoch, und von sechs Menueeintraegen war genau einer zu sehen. */
.mobilenav {
  position: fixed;
  inset: var(--header-h) 0 0;
  /* Unter dem Kopfbalken (z-index 30), damit der Menueknopf bedienbar bleibt,
     aber ueber dem Seiteninhalt. */
  z-index: 20;
  background: rgba(2, 11, 24, .985);
  backdrop-filter: blur(18px);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .26s ease, transform .26s ease;
  padding: var(--s8) 0 var(--s16);
}
.mobilenav.offen { opacity: 1; transform: none }
.mobilenav a {
  display: block;
  padding: var(--s4) 0;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mobilenav a[aria-current] { color: var(--gold-hell) }
.mobilenav .langs { margin-top: var(--s8); border-left: 0; padding-left: 0 }
body.menue-offen { overflow: hidden }

/* ------------------------------------------------------------------ 4  Hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(600px, 100svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + var(--s16)) 0 var(--s16);
  overflow: hidden;
}

.hero-himmel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* -2, damit der Schleier (::before, -1) sicher DARUEBER liegt. Beide auf -1
     zu setzen hiesse, sich auf die Reihenfolge im Dokument zu verlassen — und
     ein Pseudoelement ::before kommt dort vor dem ersten echten Kind, der
     Schleier laege also unter dem deckenden Himmel und waere wirkungslos. */
  z-index: -2;
}

/* Schleier hinter der Textspalte. Der helle Lichtbogen der Erdkugel laeuft je
   nach Bildschirmbreite quer durch die Ueberschrift; ohne diesen Verlauf faellt
   der Kontrast dort unter das Lesbare. Er ist links dicht und rechts ganz
   durchsichtig, damit der Bogen als Bildmotiv sichtbar bleibt. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 11, 24, .82) 0%, rgba(2, 11, 24, .58) 34%, rgba(2, 11, 24, .12) 62%, transparent 82%);
  pointer-events: none;
}
/* Die Sterne setzt site.js; hier steht nur, wie sie funkeln. */
.hero-sterne circle { animation: funkeln 5s ease-in-out infinite; animation-delay: var(--v, 0s) }
@keyframes funkeln { 0%, 100% { opacity: var(--o, .7) } 50% { opacity: calc(var(--o, .7) * .32) } }

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spalte);
  width: 100%;
}

.hero-marke { height: clamp(74px, 9vw, 128px); width: auto; margin-bottom: var(--s5) }

.hero-titel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(52px, 8.4vw, 112px);
  line-height: .95;
  letter-spacing: .05em;
  margin: 0 0 var(--s5);
  color: #fff;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-titel {
    background: linear-gradient(168deg, #ffffff 0%, #e6eef8 34%, #a8bad0 70%, #e8f0fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero-titel span { letter-spacing: .04em }

.hero-tag {
  font-size: clamp(15px, 1.2vw + 8px, 22px);
  font-weight: 400;
  letter-spacing: var(--sperrung);
  line-height: 1.5;
  color: var(--eis);
  margin: 0 0 var(--s6);
}

.hero-lead { color: var(--gedaempft); max-width: 44ch; font-size: 16.5px; margin-bottom: var(--s8) }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s3) }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s6);
  border: 1px solid var(--gold);
  border-radius: var(--rund);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
  color: var(--gold-hell);
  transition: background .24s ease, color .24s ease, border-color .24s ease;
}
.btn:hover { background: rgba(201, 163, 95, .14) }
.btn-primaer { background: var(--gold); color: var(--nacht); border-color: var(--gold) }
.btn-primaer:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--nacht) }
.pfeil { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .24s ease }
.pfeil::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .pfeil { width: 26px }

.hero-seite {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding-left: var(--s8);
  border-left: 1px solid rgba(201, 163, 95, .26);
  max-width: 300px;
}
.hero-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: var(--sperrung); color: var(--gold); line-height: 1.9 }
.hero-zitat {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw + 10px, 27px);
  line-height: 1.3;
  color: var(--eis);
  margin: 0;
}
.hero-saeulen { font-size: 10.5px; font-weight: 500; letter-spacing: var(--sperrung); line-height: 2.1; color: var(--gedaempft-2) }

.hero-regionen {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s4) 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--sperrung);
  color: var(--gedaempft-2);
  background: linear-gradient(180deg, transparent, rgba(2, 11, 24, .55));
}
/* Bewusst kein white-space: nowrap. Die Zeile passt auf breiten Schirmen von
   selbst in eine Reihe; auf schmalen bricht sie um, statt seitlich
   wegzuschieben. Eine halb abgeschnittene Region sieht aus wie ein Fehler,
   auch wenn sie scrollbar waere — und nowrap erzwaenge bei den laengeren
   deutschen und russischen Fassungen waagrechtes Ueberlaufen. */
.hero-regionen span { display: block; line-height: 1.9 }

/* ------------------------------- 5  Abschnitte und Leistungskarten */

.abschnitt { padding: var(--abschnitt) 0; scroll-margin-top: var(--header-h) }
.tinte { background: var(--tinte) }
.tinte-2 { background: linear-gradient(150deg, var(--tinte-2), #051529 72%) }

.kopf { max-width: 760px; margin-bottom: clamp(40px, 4.4vw, 72px) }

.karten {
  display: grid;
  /* Feste drei Spalten statt auto-fit: bei sechs Karten teilt auto-fit auf
     breiten Schirmen in 4+2 und laesst rechts unten ein leeres Feld stehen.
     3x2 geht immer auf. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.karte {
  position: relative;
  background: #061629;
  padding: var(--s10) var(--s8) var(--s8);
  transition: background .3s ease, transform .3s ease;
}
.karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s ease;
}
.karte:hover { background: #08203a }
.karte:hover::before { transform: scaleX(1) }
.karte-nr {
  position: absolute;
  top: var(--s5);
  right: var(--s6);
  font-family: var(--serif);
  font-size: 26px;
  color: rgba(201, 163, 95, .26);
  line-height: 1;
}
.karte-symbol {
  width: 38px; height: 38px;
  margin-bottom: var(--s5);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.karte h3 { color: var(--text) }
.karte p { color: var(--gedaempft); font-size: 14px; margin: 0 }

/* ------------------------------------- 6  Ueber / Tafel / Saeulen */

.geteilt {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--spalte);
  align-items: center;
}

.saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s6); margin-top: var(--s10) }
.saeule { border-top: 1px solid var(--linie); padding-top: var(--s4) }
.saeule dt { font-size: 11px; font-weight: 600; letter-spacing: var(--sperrung-klein); color: var(--gold); margin-bottom: var(--s2) }
.saeule dd { margin: 0; font-size: 13.5px; color: var(--gedaempft) }

.tafel {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s6);
  padding: clamp(40px, 5vw, 76px) var(--s8);
  border: 1px solid var(--linie);
  background:
    radial-gradient(circle at 50% 34%, rgba(110, 170, 240, .14), transparent 62%),
    linear-gradient(160deg, #07203a, #030f1f);
}
.tafel-marke { width: min(70%, 300px); height: auto }
.tafel-text {
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sperrung);
  line-height: 2.2;
  color: var(--gedaempft);
}

/* ------------------------------------------------ 7  Ablauf / Partner */

.leiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s8) }
.stufe { display: flex; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--linie); position: relative }
.stufe::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 1px;
  background: var(--gold);
}
.stufe-nr { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--gold); flex: 0 0 auto }
.stufe h3 { color: var(--text) }
.stufe p { font-size: 13.5px; color: var(--gedaempft); margin: 0 }

.register { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie) }
.register li {
  background: #061629;
  padding: var(--s5) var(--s6);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--gedaempft);
  display: flex;
  align-items: center;
  gap: var(--s4);
  transition: background .26s ease, color .26s ease;
}
.register li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.register li:hover { background: #08203a; color: var(--text) }

/* --------------------------------------- 8  Schweiz (heller Abschnitt) */

.schweiz {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #f6f9fc, var(--papier));
  color: var(--papier-text);
  padding: clamp(56px, 6vw, 96px) 0 clamp(96px, 11vw, 168px);
}
.schweiz-berge { position: absolute; inset: auto 0 0; width: 100%; height: clamp(130px, 19vw, 260px); z-index: -1 }
.berg-fern { fill: #c3d3e4 }
.berg-nah { fill: #9fb6cd }

.schweiz-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--spalte); align-items: start }
.schweiz h2 { color: var(--papier-text) }
.schweiz-werte {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--sperrung);
  color: var(--gold-auf-papier);
  margin: 0 0 var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid rgba(16, 33, 58, .2);
  display: inline-block;
}
.schweiz-text { color: #3c4d66; max-width: 54ch; font-size: 15.5px }
.schweiz-zitat {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.6vw + 11px, 30px);
  line-height: 1.32;
  color: #23405f;
  margin: 0;
  padding-left: var(--s6);
  border-left: 2px solid var(--gold-auf-papier);
}

/* ------------------------------------------ 9  Kontakt und Fusszeile */

.kontakt { display: grid; gap: var(--s5); border: 1px solid var(--linie); padding: var(--s8); background: #061629 }
.kontakt-zeile { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--s4); align-items: baseline }
.kontakt-schild { font-size: 9.5px; font-weight: 600; letter-spacing: var(--sperrung-klein); color: var(--gold) }
.kontakt-wert { font-size: 14.5px; color: var(--gedaempft); overflow-wrap: anywhere }
.kontakt-wert strong { color: var(--text); font-weight: 600; letter-spacing: .06em }
/* Polsterung schon fuer die Maus, nicht erst fuer den Finger: als reine
   Textzeile waren E-Mail- und Webadresse 20px hoch und blieben damit unter den
   24px, die WCAG 2.5.8 fordert. Die Polsterung vergroessert nur die
   Trefferflaeche, nicht die Schrift. */
.kontakt a { display: inline-block; padding: 4px 0; color: var(--eis); border-bottom: 1px solid rgba(201, 163, 95, .4) }
.kontakt a:hover { color: var(--gold-hell) }

footer { background: var(--nacht); border-top: 1px solid var(--linie); padding: var(--abschnitt) 0 var(--s8) }

.fuss-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--spalte) }
.fuss-marke img { height: 56px; width: auto; margin-bottom: var(--s4) }
.fuss-name { font-family: var(--serif); font-size: 21px; letter-spacing: .16em; color: var(--eis); margin: 0 0 var(--s4) }
.fuss-claim { font-size: 10px; font-weight: 500; letter-spacing: var(--sperrung); line-height: 2.1; color: var(--gedaempft-2); margin: 0 }

.fuss-spalte { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start }
.fuss-titel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
  color: var(--gold);
  margin: 0 0 var(--s2);
}
.fuss-titel-2 { margin-top: var(--s5) }
.fuss-spalte a { font-size: 13px; color: var(--gedaempft); padding: 3px 0 }
.fuss-spalte a:hover { color: var(--gold-hell) }

.haftung {
  margin: var(--s16) 0 0;
  padding-top: var(--s6);
  border-top: 1px solid var(--linie);
  font-size: 11px;
  line-height: 1.75;
  color: var(--gedaempft-2);
  max-width: 108ch;
}
.fuss-zeile { margin: var(--s6) 0 0; font-size: 11px; letter-spacing: .08em; color: var(--gedaempft-2) }

.nach-oben {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(201, 163, 95, .4);
  background: rgba(2, 11, 24, .88);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s, background .24s ease;
}
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none }
.nach-oben:hover { background: var(--gold) }
.nach-oben svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-hell); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.nach-oben:hover svg { stroke: var(--nacht) }

/* -------------------------------- 10  Bewegung, Breiten, Druck */

.enthuellen { opacity: 0; transform: translateY(16px); transition: opacity var(--zeit) ease, transform var(--zeit) ease }
.enthuellen.sichtbar { opacity: 1; transform: none }

@media (max-width: 1160px) {
  .navlinks { display: none }
  .navtoggle { display: flex }
  .langs { margin-left: auto; border-left: 0; padding-left: 0 }
  .fuss-raster { grid-template-columns: 1fr 1fr }
}

@media (max-width: 980px) {
  :root { --header-h: 64px }
  .hero-raster { grid-template-columns: 1fr }
  .hero-seite {
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s8);
    padding: var(--s6) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(201, 163, 95, .26);
  }
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .geteilt, .schweiz-raster { grid-template-columns: 1fr }
  .schweiz-zitat { padding-left: 0; padding-top: var(--s5); border-left: 0; border-top: 2px solid var(--gold-auf-papier) }
}

@media (max-width: 760px) {
  body { font-size: 15.5px }
  .brand img { height: 30px }
  .brand-name { font-size: 19px }
  .hero { min-height: auto; padding-bottom: calc(var(--s16) + 44px) }
  .karten { grid-template-columns: 1fr }
  .karte { padding: var(--s8) var(--s6) var(--s6) }
  .kontakt { padding: var(--s6) }
  .fuss-raster { grid-template-columns: 1fr; gap: var(--s10) }
  .haftung { margin-top: var(--s10) }
}

@media (max-width: 600px) {
  /* Der Zusatz unter der Wortmarke braucht Platz, den der Kopfbalken hier
     nicht mehr hat — die Aussage steht ohnehin gross im Hero. */
  .brand-claim { display: none }
  .wrap { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)) }
  .kontakt-zeile { grid-template-columns: 1fr; gap: var(--s1) }
  .mobilenav a { font-size: 22px }
}

@media (max-width: 420px) {
  /* Fuenf Sprachknoepfe passen hier nicht mehr neben Marke und Menue —
     sie stehen dann ausschliesslich im aufgeklappten Menue. */
  header > .wrap .langs { display: none }
  .brand-name { font-size: 17px }
  .brand img { height: 26px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .enthuellen { opacity: 1; transform: none; transition: none }
  .hero-sterne circle { animation: none }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important }
}

@media print {
  header, .mobilenav, .nach-oben, .hero-himmel, .schweiz-berge { display: none }
  body { background: #fff; color: #000 }
  .abschnitt, .schweiz, footer { background: #fff; color: #000; padding: 12mm 0 }
  h2, .hero-titel, .brand-name { color: #000; -webkit-text-fill-color: #000 }
  a { color: #000 }
  .karten, .register { border-color: #999 }
  .karte, .register li { background: #fff }
  .lead, .karte p, .stufe p, .haftung, .kontakt-wert { color: #333 }
}

/* ------------------------------------------ 11  Rechtsseite (legal.html)

   legal.html traegt Impressum, Datenschutz und Nutzungsbedingungen in einer
   Datei und in zwei Sprachen untereinander. Sichtbar ist immer nur eine
   Fassung — legal.js setzt dazu das hidden-Attribut. Ohne Javascript bleibt
   die deutsche, rechtlich massgebliche Fassung stehen, statt beide
   uebereinanderzulegen. */

.rechts-de[hidden], .rechts-en[hidden] { display: none !important }

/* Der Kopfbalken ist fixiert und deckt sonst den Seitentitel zu. */
.rechts-oben { padding-top: calc(var(--header-h) + var(--abschnitt)) }

/* "Nutzungsbedingungen" ist ein Wort und laesst sich nicht umbrechen: auf
   320px Breite muss die Zeile deshalb kleiner ansetzen und notfalls trennen,
   sonst schiebt sie die ganze Seite seitlich hinaus. */
.rechts-titel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw + 14px, 62px);
  line-height: 1.08;
  letter-spacing: .02em;
  margin: 0 0 var(--s5);
  color: #fff;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Welche Fassung im Streitfall gilt, muss man sehen, bevor man liest. */
.rechts-massgeblich {
  margin: var(--s8) 0 0;
  padding: var(--s5) var(--s6);
  border: 1px solid rgba(201, 163, 95, .38);
  border-left: 3px solid var(--gold);
  background: rgba(201, 163, 95, .07);
  color: var(--eis);
  font-size: 14px;
  max-width: 78ch;
}

/* Inhaltsverzeichnis: drei Sprungmarken statt drei Dateien. */
.rechts-inhalt { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8) }
.rechts-inhalt a {
  border: 1px solid var(--linie);
  padding: 11px var(--s5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sperrung-klein);
  color: var(--gedaempft);
  transition: border-color .24s ease, color .24s ease, background .24s ease;
}
.rechts-inhalt a:hover { border-color: var(--gold); color: var(--gold-hell); background: rgba(201, 163, 95, .08) }

.rechts-block { max-width: 84ch; margin-top: var(--s10) }
.rechts-block h3 { color: var(--gold); margin-bottom: var(--s3) }
.rechts-block p { color: var(--gedaempft); font-size: 14.5px; margin: 0 0 var(--s4) }
.rechts-block p:last-child { margin-bottom: 0 }
.rechts-block a { color: var(--eis); border-bottom: 1px solid rgba(201, 163, 95, .4) }
.rechts-block a:hover { color: var(--gold-hell) }

.rechts-liste { display: grid; gap: var(--s2); margin: 0 0 var(--s4) }
.rechts-liste li { position: relative; padding-left: var(--s5); color: var(--gedaempft); font-size: 14.5px }
.rechts-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* Woertlich uebernommener Haftungsausschluss — als Zitat kenntlich. */
.rechts-wortlaut {
  margin: 0 0 var(--s4);
  padding: var(--s5) var(--s6);
  border-left: 2px solid var(--gold-tief);
  background: rgba(255, 255, 255, .03);
  color: var(--gedaempft);
  font-size: 13.5px;
  line-height: 1.8;
}

/* Stammdaten im Impressum: dieselbe Optik wie der Kontaktblock der
   Startseite, nur mit Platz fuer die laengeren Beschriftungen. */
.rechts-daten { max-width: 660px; margin-top: var(--s8) }
.rechts-daten .kontakt-zeile { grid-template-columns: 205px minmax(0, 1fr) }

.rechts-stand { margin: var(--s10) 0 0; font-size: 12px; letter-spacing: .06em; color: var(--gedaempft-2) }

@media (max-width: 700px) {
  .rechts-daten .kontakt-zeile { grid-template-columns: 1fr; gap: var(--s1) }
}

/* Satzspiegel der Rechtsseite. Die Textbloecke sind bewusst auf gut 80 Zeichen
   Zeilenlaenge begrenzt — in der 1280px breiten .wrap der Hauptseite stuenden
   sie damit als schmale Spalte ganz links und die rechte Haelfte bliebe leer.
   Deshalb hier eine engere, mittige Spalte: Rechtstexte werden gelesen, nicht
   ueberflogen. Kopfbalken und Fusszeile behalten ihre volle Breite, weil sie
   zur Seite gehoeren und nicht zum Text. */
.rechts-oben > .wrap,
#imprint > .wrap,
#privacy > .wrap,
#terms > .wrap { max-width: 760px }