/* =====================================================================
   site.css - gemeinsames Aussehen der Website von schwunganalyse.

   Eingebunden von der Startseite (index.asp) und von allen zwoelf
   Rechtstexten. Hervorgegangen aus css/legal.css plus dem frueheren
   <style>-Block am Kopf von index.asp.

   Abgrenzung zu den anderen Stylesheets im Verzeichnis:

     css/site.css   Website  - index.asp + alle Rechtstexte (diese Datei)
     css/hilfe.css  Hilfe    - hilfe_de/en/es.html, von App UND Website
                               im iframe geoeffnet, deshalb eigenstaendig
     css/core.css   App      - index.html, Grundgeruest (in allen Apps gleich)
     css/app.css    App      - index.html, Markenfarben und App-Bausteine
     css/all.min.css App     - Font Awesome, unveraendert uebernommen

   Seitenkennung: <body class="page-home"> auf der Startseite,
   <body class="page-legal"> in den Rechtstexten. Startseite und
   Rechtstexte sind zwei verschiedene Entwuerfe mit eigenen Kopfzeilen
   (.leiste dort, .navbar hier) - der gesamte Startseiten-Abschnitt ganz
   unten ist deshalb auf .page-home eingegrenzt. Gemeinsam sind nur die
   Farbwerte und die drei Bausteine, die beide Seitentypen brauchen:
   Farbmodus, Hilfe-Panel, Fuss.

   Aufbau, Klassennamen und Mechanik sind uebernommen aus
   /_recibo/css/site.css (dort wiederum aus /_mallorca-spielt-golf) -
   navbar, wrap, btn, iconbtn, legal, box, toc, footer und help-panel
   heissen hier genauso und arbeiten genauso. Wer eine der Dateien
   anfasst, sollte in die andere schauen.

   Farben und Schriften dagegen sind die der Startseite index.asp:
   Zeichenpapier mit blassem Raster, Graphit als Schrift und das Rot der
   Maszlinien als einzige Farbe. Archivo fuer Text, IBM Plex Mono fuer
   Zahlen - beide werden in den Rechtstexten aus derselben
   Google-Fonts-Zeile geladen wie auf der Startseite.
   ===================================================================== */

:root{
  /* Zeichenpapier mit blassem Raster, Graphit als Schrift, das Rot der
     Maszlinien als einzige Farbe. */
  --bg:#f2f3f0; --surface:#fafbf9; --ink:#161a18; --ink-soft:#5d6663;
  --accent:#c0392b; --accent-mild:#d4665a; --accent-soft:#f6e4e1;
  --accent-red:#c0392b; --border:#c9d4d0;
  /* Der Punkt der Wortmarke ("schwunganalyse."): das Rot der Maszlinien, dieselbe
     Farbe wie in der Hilfe. Ein eigenes Token, weil er der Marke folgt und nicht
     der Bedienung - genau wie --brand-dot in /_skramkoob. */
  --brand-dot:#c0392b;
  --header-bg:rgba(250,251,249,.92); --btn-secondary-bg:#e0e6e3;
  --shadow:0 1px 0 #d2d9c9,0 14px 26px -18px rgba(40,40,30,.5);
  --card-shadow:rgba(40,40,30,.14);
  --paper:
    repeating-linear-gradient(94deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(2deg,rgba(0,0,0,.012) 0 1px,transparent 1px 4px);
  --display:"Archivo",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Archivo",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Nur die Startseite, aber keine Farben - deshalb hier und nicht in den
     drei Farbmodus-Bloecken darunter. */
  --breite: 76rem;                  /* Blattbreite */
  --sp: clamp(4.5rem, 9vw, 8rem);   /* Abstand zwischen den Abschnitten */
  --leiste-h: 64px;                 /* Hoehe der festen Kopfleiste - dieselbe
                                       Zahl wie .nav in den Rechtstexten und in
                                       allen anderen Apps der Familie */
}

/* Im Dunkeln kippt das Blatt: dunkles Papier, helles Graphit, dasselbe Rot. */
@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#141715; --surface:#1d211f; --ink:#e9ece9; --ink-soft:#9aa5a1;
    --accent:#e2685a; --accent-mild:#b4483c; --accent-soft:#33211f;
    --accent-red:#e2685a; --border:#333a37; --brand-dot:#e2685a;
    --header-bg:rgba(29,33,31,.9); --btn-secondary-bg:#262b29;
    --shadow:0 1px 0 #17191a,0 14px 26px -18px rgba(0,0,0,.7);
    --card-shadow:rgba(0,0,0,.4);
    --paper:
      repeating-linear-gradient(94deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
      repeating-linear-gradient(2deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px);
  }
}
body.theme-dark{
  --bg:#141715; --surface:#1d211f; --ink:#e9ece9; --ink-soft:#9aa5a1;
  --accent:#e2685a; --accent-mild:#b4483c; --accent-soft:#33211f;
  --accent-red:#e2685a; --border:#333a37; --brand-dot:#e2685a;
  --header-bg:rgba(29,33,31,.9); --btn-secondary-bg:#262b29;
  --shadow:0 1px 0 #17191a,0 14px 26px -18px rgba(0,0,0,.7);
  --card-shadow:rgba(0,0,0,.4);
  --paper:
    repeating-linear-gradient(94deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(2deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px);
}
body.theme-light{
  --bg:#f2f3f0; --surface:#fafbf9; --ink:#161a18; --ink-soft:#5d6663;
  --accent:#c0392b; --accent-mild:#d4665a; --accent-soft:#f6e4e1;
  --accent-red:#c0392b; --border:#c9d4d0; --brand-dot:#c0392b;
  --header-bg:rgba(250,251,249,.92); --btn-secondary-bg:#e0e6e3;
  --shadow:0 1px 0 #d2d9c9,0 14px 26px -18px rgba(40,40,30,.5);
  --card-shadow:rgba(40,40,30,.14);
  --paper:
    repeating-linear-gradient(94deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(2deg,rgba(0,0,0,.012) 0 1px,transparent 1px 4px);
}

*{box-sizing:border-box}
/* overflow-x:hidden ist ein Sicherheitsnetz, kein Ersatz fuer sauberes Layout: ein
   Element, das ueber den Viewport hinausragt (z.B. der Stempel auf dem Belegblatt,
   der bewusst ueber die Kartenkante blutet), wird damit abgeschnitten statt eine
   waagerechte Bildlaufleiste zu erzwingen. */
html,body{margin:0;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;
  overflow-x:hidden}

/* Papierstruktur, Leseschrift und der Platz unter der festen Leiste gelten nur
   fuer die Rechtstexte - die Startseite bringt Raster, Archivo und ihre eigene
   Leistenhoehe selbst mit (Abschnitt ganz unten). Vor dem Zusammenlegen der
   beiden Stylesheets stand das alles auf "html,body" und haette der Startseite
   Schriftgewicht 300 und die falsche Papierstruktur untergeschoben. */
.page-legal{background-image:var(--paper);font-family:var(--body);font-weight:300;
  font-size:17px;padding-top:64px}
.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent-red);outline-offset:3px}

/* Der Durchschlag-Effekt: die Ueberschrift steht zweimal, einmal fest und
   einmal um ein Haar versetzt und blasser - so, wie der Druck durch das
   Kohlepapier auf das zweite Blatt kommt. Kein Bild, nur ein Textschatten. */
.carbon{color:var(--accent);text-shadow:.055em .045em 0 var(--accent-mild)}

/* --- Kopf: feste Leiste, Masse wie in MSG ---------------------------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header-bg);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  /* Gestrichelt statt durchgezogen: die Perforation des Quittungsblocks. */
  border-bottom:1px dashed var(--border)}

/* =====================================================================
   Einheitliche Masse fuer Kopf und Fuss - in ALLEN Apps der Familie
   dieselben Zahlen. Wer eine davon aendert, aendert sie ueberall.

     Kopfzeile         64px hoch, 12px Abstand zwischen den Teilen
     Inhalt beginnt    64px unter dem Seitenrand (body padding-top)
     Sprungziele       76px (Leistenhoehe plus etwas Luft)
     Klappmenue        oeffnet bei 64px
     Fuss              1px durchgezogener Strich, 28px oben / 40px unten

   Die Reihenfolge in der Leiste ist ebenfalls ueberall gleich:
   Wortmarke, Navigationspunkte, Farbmodus, Sprachwahl, Handlungsknopf,
   Menueknopf. Die Navigationspunkte stehen ZENTRIERT zwischen der Wortmarke
   und dem rechten Teil: .navlinks traegt margin-inline:auto, damit teilt sich
   der freie Platz gleichmaessig auf beide Seiten auf. Die Wortmarke darf
   deshalb KEIN margin-right:auto haben - das schoebe alles nach rechts und
   die Navigation klebte am Logo.
   ===================================================================== */
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-family:var(--display);font-weight:400;letter-spacing:-.03em;text-decoration:none;
  color:var(--accent);font-size:19px;white-space:nowrap;text-transform:lowercase}
/* Der Punkt der Wortmarke - in Kopfzeile wie Fuss, auf jeder Seite dieselbe Regel.
   Er sitzt ohne Abstand am Namen; die Laufweite der Wortmarke gilt fuer ihn nicht,
   sonst stuende er sichtbar abgeloest daneben. */
.brand .dot,.brand-sm .dot,.marke .dot{color:var(--brand-dot);letter-spacing:0}
.navlinks{display:flex;align-items:center;gap:2px;margin-inline:auto}
.navlinks a{text-decoration:none;color:var(--ink-soft);font-size:15px;padding:12px;
  border-radius:2px;min-height:48px;display:flex;align-items:center}
.navlinks a:hover{color:var(--accent);background:var(--btn-secondary-bg)}
/* Der Ladeknopf ist ebenfalls ein <a> in .navlinks - ohne diese Regeln gewinnt
   die Farbe von ".navlinks a" gegen ".btn"/".btn-primary" (hoehere Spezifitaet)
   und die Schrift stuende grau auf Violett. */
.navlinks a.btn{color:var(--ink-soft);background:var(--surface)}
.navlinks a.btn:hover{color:var(--ink);background:var(--surface)}
.navlinks a.btn-primary,.navlinks a.btn-primary:hover{color:#f4f6f0;background:var(--accent)}

/* Knopf mit dem versetzten Schatten des Entwurfs: er sitzt nicht auf einer
   Flaeche, er ist durchgedrueckt. Beim Tippen rutscht er in den Schatten. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 19px;border-radius:0;font-family:var(--display);font-weight:400;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--surface);color:var(--ink-soft);border:1px solid var(--border);
  box-shadow:4px 4px 0 var(--btn-secondary-bg);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{color:var(--accent);border-color:var(--accent)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--btn-secondary-bg)}
.btn-primary{background:var(--accent);color:#f4f6f0;border-color:var(--accent);
  box-shadow:4px 4px 0 var(--accent-mild)}
.btn-primary:hover{color:#f4f6f0;filter:brightness(1.08)}
.btn-primary:active{box-shadow:2px 2px 0 var(--accent-mild)}

/* Runde Icon-Knoepfe wie in der App. */
.iconbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;cursor:pointer;
  display:grid;place-content:center;box-shadow:0 1px 4px var(--card-shadow)}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.burger{display:none}

/* --- Sprachumschalter, uebernommen aus /_mytripwallet/index.asp ------
   Dort steht er zweimal im Markup: einmal in der Kopfzeile (auf schmalen
   Geraeten ausgeblendet) und einmal im aufgeklappten Menue. Die aktive
   Sprache traegt .active. */
.lang-switch{display:flex;align-items:center;gap:8px;font-family:var(--num);
  font-size:13px;letter-spacing:.08em}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:4px 2px;
  border-bottom:1px solid transparent;transition:color .18s ease}
.lang-switch a:hover{color:var(--accent)}
.lang-switch a.active{color:var(--accent);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--border)}

@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px 16px 16px;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:0 6px 16px var(--card-shadow)}
  .navlinks.open{display:flex}
  /* Die Wortmarke schiebt den rechten Teil ans Ende der Leiste: solange die
     Navigationspunkte im Klappmenue liegen, gibt es keinen zentrierten
     Mittelteil mehr, der den Platz von selbst verteilt. */
  .nav > .brand{margin-right:auto}
  /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und
     Menueknopf. Der Handlungsknopf aus der Leiste weicht; im Klappmenue
     steht dafuer seine Zwillingsfassung (.cta-menu) als letzter Eintrag
     ueber die volle Breite. */
  .nav > .btn{display:none}
  .navlinks a.cta-menu{display:flex;justify-content:center;width:100%;margin-top:12px}
  .navlinks .btn{margin-top:8px}
  /* In der Kopfzeile weicht der Umschalter, im Menue steht er dafuer voll da. */
  .nav > .lang-switch{display:none}
  .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px}
}
@media (min-width:861px){
  .navlinks .lang-switch{display:none}
  .navlinks a.cta-menu{display:none}
}

/* --- Textkoerper ---------------------------------------------------- */
.page-legal main{padding:52px 0 64px}
.legal{max-width:80ch}
.legal h1{font-family:var(--display);font-weight:400;font-size:38px;line-height:1.1;
  letter-spacing:-.02em;margin:0 0 10px;text-transform:uppercase}
.legal .stand{color:var(--ink-soft);font-family:var(--num);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 34px}
.legal h2{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.01em;
  margin:40px 0 12px;padding-top:26px;border-top:1px solid var(--border);
  text-transform:uppercase;color:var(--accent)}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal h3{font-family:var(--display);font-weight:400;font-size:15.5px;margin:26px 0 8px;
  text-transform:uppercase;letter-spacing:-.005em}
.legal p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px}
.legal ul,.legal ol{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink);font-weight:600}
.legal address{font-style:normal;color:var(--ink-soft);font-size:16px;line-height:1.7;margin:0 0 14px}
.legal code{font-family:var(--num);font-size:.92em;background:var(--accent-soft);
  padding:2px 6px;border-radius:2px}

/* Hervorgehobener Kasten fuer Kontakt, Anbieter, Warnhinweise. Ein Blatt,
   das auf dem Blatt liegt - deshalb Rand, Schatten und kein Radius. */
.legal .box{background:var(--surface);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 20px}
.legal .box p:last-child,.legal .box ul:last-child{margin-bottom:0}

/* Inhaltsverzeichnis oben. Bei Texten mit fuenfzehn Abschnitten ist das der
   Unterschied zwischen Nachschlagen und Durchscrollen. */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:18px 24px;margin:0 0 38px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.7}
@media (max-width:640px){ .toc ol{columns:1} }
.toc li{margin:0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
/* Sprungziele duerfen nicht unter der festen Leiste landen. */
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px}

/* Tabelle im Belegraster: Beschriftung links, Wert rechts, Linien statt Farbe. */
.legal table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface);
  border:1px solid var(--border);border-radius:0;overflow:hidden;margin:0 0 20px}
.legal th,.legal td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);
  color:var(--ink-soft);vertical-align:top}
.legal th{font-family:var(--num);font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:400;color:var(--ink-soft)}
.legal td:first-child{color:var(--ink);font-weight:600}
.legal tbody tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto}

/* Unter 680px wird jede Zeile eine Karte: seitwaerts scrollen ruecken die
   Werte aus dem Bild, die Beschriftung bleibt links. */
@media (max-width:680px){
  .tbl-scroll{overflow-x:visible}
  .legal table thead{display:none}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal table tr{padding:14px 16px;border-bottom:1px solid var(--border)}
  .legal tbody tr:last-child{border-bottom:none}
  .legal table td{padding:0;border-bottom:none}
  .legal table td:first-child{margin-bottom:8px}
  .legal table td.v{display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:right;padding:6px 0}
  .legal table td.v::before{content:attr(data-label);color:var(--ink-soft);font-family:var(--num);
    font-size:12px;text-transform:uppercase;letter-spacing:.14em}
}

/* --- Fuss ------------------------------------------------------------ */
/* Auf .page-legal eingegrenzt: die Startseite hat einen eigenen Fuss (.fuss,
   ganz unten). Ohne die Eingrenzung faerbte "footer{color:...}" dessen Text
   und Verweise um, weil .page-home .fuss die Farbe gar nicht erst setzt. */
/* Der Fuss ist seit dem 27.08.2026 auf allen Website-Seiten derselbe: links die
   Wortmarke als Verweis auf die Startseite, rechts die vier Rechtstexte und ganz
   aussen die Hilfe. Kein "Startseite", kein "Kontakt", keine Sprachwahl. Die
   Regeln stehen deshalb ungescopt - sie gelten fuer .page-home wie .page-legal. */
footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--ink-soft);font-size:14.5px}

footer .fl{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
/* Die Wortmarke und die einzelnen Verweise brechen nie in sich um - sonst
   steht die halbe Rechtstextliste unter dem Namen. Umbrochen wird, wenn
   ueberhaupt, zwischen den Verweisen. */
footer .fl > a{white-space:nowrap}
footer .brand-sm,footer .logo{white-space:nowrap;flex:0 0 auto}

/* --- Fuss auf dem Telefon: Wortmarke oben, Rechtstexte fest darunter ---
   Unter 640px bekommt die Wortmarke eine ganze Zeile fuer sich, damit die
   Verweise IMMER in der zweiten Zeile beginnen und nicht je nach Laenge des
   Namens mal neben und mal unter ihm stehen. Der Platzhalter .grow entfaellt
   dabei - sonst schoebe er die Verweise weiterhin nach rechts. */
@media (max-width:640px){
  footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px}
  footer .grow{display:none}
  footer .brand-sm,footer .logo{flex:0 0 100%;justify-content:center}
}

footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--accent)}
/* Die Wortmarke aus der Kopfzeile, eine Spur kleiner. */
.brand-sm{font-family:var(--display);font-size:15px;color:var(--accent);text-transform:lowercase;
  letter-spacing:-.03em}
/* Der Sprachumschalter steht im Fuss jeder Rechtstextseite - dort wechselt
   man die Sprache des Dokuments, nicht die der App. */

/* --- Hilfe: Panel von rechts mit der Hilfeseite im iframe ------------- */
.help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.5);
  display:none;opacity:0;transition:opacity .3s ease}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);z-index:1100;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s ease}
.help-panel.open{transform:translateX(0)}
@media (max-width:800px){ .help-panel{width:100%;max-width:none;min-width:0} }
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.help-panel-header h3{margin:0;font-family:var(--display);font-weight:400;font-size:15px;
  text-transform:uppercase;color:var(--ink)}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)}
.help-close{width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font:inherit;font-size:24px;line-height:1;cursor:pointer;display:grid;place-content:center}
.help-close:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:640px){
  .legal h1{font-size:28px}
  .page-legal main{padding:40px 0 48px}
}

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


/* =====================================================================
   Nur die Startseite (index.asp)

   Entwurf "Konstruktion": die Seite ist das Blatt eines Bewegungs-
   analysten, eine technische Zeichnung des Golfschwungs. Maszlinien,
   Winkelboegen und Beschriftungen bezeichnen tatsaechlich das, was
   daneben steht. Eine einzige Farbe ausser Papier und Graphit - das Rot
   der Maszlinie.

   Der Abschnitt stand bis zum 27.08.2026 inline am Kopf von index.asp
   und hatte einen eigenen Satz Farbnamen (--papier, --graphit, --mass,
   --raster). Es waren dieselben Werte wie oben, nur anders benannt;
   beim Zusammenlegen sind sie auf --bg, --ink, --accent und --border
   umgestellt worden. Damit folgt die Startseite jetzt auch dem
   Dunkelmodus, den vorher nur die Rechtstexte hatten.

   Jede Regel hier ist auf .page-home eingegrenzt - die beiden
   Seitentypen haben verschiedene Kopfzeilen und teilen sich sonst nur
   die Farbwerte. Ausgenommen sind die html-Regeln: eine Klasse am
   <body> kann <html> nicht treffen. Sie setzen scroll-behavior und
   -webkit-text-size-adjust und stoeren in den Rechtstexten nicht.
   ===================================================================== */

/* =============================================================================
   ENTWURF 1 — KONSTRUKTION
   -----------------------------------------------------------------------------
   Die Seite ist das Blatt eines Bewegungsanalysten: eine technische Zeichnung des
   Golfschwungs. Alles, was ein Trainer auf ein Standbild kritzelt - Schwungebene,
   Schulterlinie, Winkel zwischen beiden - wird hier zum Gestaltungsmittel.
   Maszlinien, Winkelbögen und Beschriftungen sind kein Dekor: sie bezeichnen
   tatsächlich das, was daneben steht.

   Die Schrift ist der zweite Traeger: Archivo hat eine Breitenachse (wdth 62-125).
   Ueberschriften stehen ganz weit (125), technische Beschriftungen ganz schmal (62) -
   derselbe Schriftschnitt, zwei Tonlagen. Kein zweiter Display-Font noetig.

   Edel heisst hier: Praezision. Kein Verlauf, kein Schlagschatten, kein Foto.
   Eine einzige Farbe ausser Papier und Graphit - das Rot der Maszlinie.
   ============================================================================= */


html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

.page-home {
    margin: 0;
    padding-top: var(--leiste-h);
    background: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-variation-settings: 'wdth' 100, 'wght' 400;
    font-size: clamp(1rem, .95rem + .22vw, 1.09rem);
    line-height: 1.62;
    /* Das Millimeterraster: zwei Gitter uebereinander, fein und grob. Keine Bilddatei. */
    background-image:
        linear-gradient(var(--btn-secondary-bg) 1px, transparent 1px),
        linear-gradient(90deg, var(--btn-secondary-bg) 1px, transparent 1px),
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.page-home .blatt {
    width: min(var(--breite), 94vw);
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    /* Das Blatt liegt auf dem Tisch - eine Kante genuegt, kein Schlagschatten. */
}

.page-home .innen { padding-inline: clamp(1.5rem, 5vw, 5rem); }

/* --- Beschriftungen: schmal gesetzt, gesperrt, wie am Zeichenbrett ----------- */
.page-home .bez {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .69rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.page-home .bez-mass { color: var(--accent); }

.page-home h1, .page-home h2, .page-home h3 {
    margin: 0;
    font-variation-settings: 'wdth' 122, 'wght' 600;
    line-height: 1.03;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.page-home h1 { font-size: clamp(2.5rem, 1.4rem + 4.9vw, 5.4rem); }
.page-home h2 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.2rem); }
.page-home h3 { font-size: 1.06rem; font-variation-settings: 'wdth' 108, 'wght' 600; letter-spacing: 0; }

.page-home p { margin: 0; }

.page-home a { color: inherit; }

/* --- Kopfzeile: feste Leiste ------------------------------------------------
   Sie liegt ueber dem Blatt wie die Schiene eines Zeichenbretts: eine Linie
   unten, sonst nichts. Erst beim Scrollen wird der Untergrund undurchsichtig -
   solange die Seite oben steht, sitzt die Leiste unsichtbar auf dem Papier. */
.page-home .leiste {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease;
}

/* Beim Scrollen deckt die Leiste den Untergrund ab. Der Grund dafuer ist in
   BEIDEN Farbmodi hell - das ist Absicht und bleibt so. Damit die Schrift
   darauf lesbar bleibt, gelten innerhalb der Leiste ab hier die hellen
   Token-Werte: im Dunkelmodus waere --ink sonst weiss auf Weiss, und die
   Navigation verschwand beim Scrollen spurlos.

   Als Custom Properties gesetzt und nicht als einzelne color-Regeln: so erben
   Wortmarke, Verweise, Farbmodus-Knopf, Sprachwahl und Menueknopf die richtigen
   Farben von selbst, und der gefuellte Knopf (.knopf) bleibt rot auf hell. */
.page-home .leiste.faehrt {
    background: rgba(250, 251, 249, .92);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);

    --bg:#f2f3f0;
    --surface:#fafbf9;
    --ink:#161a18;
    --ink-soft:#5d6663;
    --border:#c9d4d0;
    --btn-secondary-bg:#e0e6e3;
    --accent:#c0392b;
    --accent-mild:#d4665a;

    color: var(--ink);
    border-bottom-color: var(--ink);
}

.page-home .leiste-innen {
    width: min(var(--breite), 94vw);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
    height: var(--leiste-h);
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.page-home .leiste .marke { text-decoration: none; }


@media (min-width: 1180px) {
    }

/* Die Verweise sind Beschriftungen, keine Knoepfe - schmal und gesperrt wie am
   Zeichenbrett; nur die Unterlaenge in Rot zeigt, wo der Zeiger steht. */
.page-home .leiste-nav { display: flex; align-items: center; gap: .2rem; margin-inline: auto; }

.page-home .leiste-nav a {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    padding: .55rem .7rem;
    border-bottom: 1px solid transparent;
}

.page-home .leiste-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.page-home .leiste-nav a.hier { color: var(--ink); border-bottom-color: var(--accent); }

.page-home .leiste .knopf { padding: .62rem 1.1rem; font-size: .82rem; }

/* Der Ladeknopf steht als <a> in der Leiste - ohne diese Regel gewinnt die
   Farbe von ".leiste-nav a" (hoehere Spezifitaet) und die Schrift stuende
   grau auf Graphit. */
.page-home .leiste-nav a.knopf {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-variation-settings: 'wdth' 92, 'wght' 600;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--surface);
    border-bottom-color: transparent;
}

.page-home .leiste-nav a.knopf:hover { color: var(--surface); background: var(--accent); border-bottom-color: transparent; }

/* Ueber 900px steht der Ladeknopf in der Leiste, die Fassung im Menue schweigt. */
.page-home .leiste-nav a.knopf { display: none; }

/* Klappknopf: zwei Striche, gezeichnet statt als Zeichen gesetzt.
   flex: 0 0 auto ist Pflicht - ohne diese Zeile quetscht die Leiste den
   Knopf auf schmalen Geraeten (Hochformat) zusammen, bis von dem Quadrat
   nur noch sein linker und rechter Rand als senkrechter Strich uebrig ist. */
.page-home .klapper {
    display: none;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    cursor: pointer;
    position: relative;
}

.page-home .klapper::before, .page-home .klapper::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1.1rem;
    height: 1px;
    background: currentColor;
    transform: translateX(-50%);
}

.page-home .klapper::before { top: 1rem; }
.page-home .klapper::after { top: 1.5rem; }

.page-home .klapper[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

/* Sprachwahl in der festen Leiste. Zweimal im Markup wie in den Rechtstexten:
   einmal neben dem Farbmodus-Knopf und einmal im Klappmenue. Ueber 900px zeigt
   die Leiste ihre Fassung, darunter die im Menue - so gibt es nie zwei
   sichtbare Umschalter nebeneinander. */
.page-home .leiste-innen > .lang-switch { margin-right: 1rem; }
.page-home .leiste-nav .lang-switch { display: none; }

@media (max-width: 900px) {
    .page-home .leiste-innen > .lang-switch { display: none; }
    .page-home .leiste-nav .lang-switch {
        display: flex;
        padding: .85rem .2rem;
        border-top: 1px solid var(--btn-secondary-bg);
        margin-top: .4rem;
    }
}

@media (max-width: 900px) {
    .page-home .klapper { display: block; }

    /* Ohne den zentrierten Mittelteil braucht die Wortmarke den Schub, sonst
       klebt der rechte Teil der Leiste am Namen. */
    .page-home .marke { margin-right: auto; }

    /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und
       Klappknopf. Der Ladeknopf aus der Leiste weicht; im Klappmenue steht
       dafuer seine Zwillingsfassung als letzter Eintrag ueber die volle
       Breite. */
    .page-home .leiste-innen > .knopf { display: none; }
    .page-home .leiste-nav a.knopf { display: block; }

    .page-home .leiste-nav {
        position: absolute;
        top: var(--leiste-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .4rem clamp(1.5rem, 5vw, 3rem) 1.2rem;
        background: var(--surface);
        border-bottom: 1px solid var(--ink);
    }

    .page-home .leiste-nav.offen { display: flex; }

    .page-home .leiste-nav a { padding: .85rem .2rem; border-top: 1px solid var(--btn-secondary-bg); border-bottom: none; }

    .page-home .leiste-nav a.hier { color: var(--accent); }

    .page-home .leiste-nav a.knopf { margin-top: .8rem; justify-content: center; text-align: center; border-top: none; padding: .8rem 1.1rem; }
}

/* Die Sprungziele duerfen nicht unter der Leiste liegen. */
.page-home section[id], .page-home div[id] { scroll-margin-top: 76px; }

/* KLEINGESCHRIEBEN, wie ueberall sonst. Bis zum 06.09.2026 stand hier
   text-transform:uppercase - die Startseite war damit die einzige Stelle im ganzen
   Produkt, an der die Marke "SCHWUNGANALYSE" hiess: der Fuss derselben Seite, alle
   Rechtstexte (.brand/.brand-sm mit text-transform:lowercase), die App und die Hilfe
   schrieben sie klein. Die Sperrung ist mitgegangen: .2em Laufweite trennte auch den
   Punkt sichtbar vom Wort. */
.page-home .marke {
    font-variation-settings: 'wdth' 68, 'wght' 700;
    font-size: 1.28rem;
    letter-spacing: .06em;
    text-transform: lowercase;
}

/* Im Hochformat teilen sich Wortmarke, Farbmodus und Klappknopf eine schmale
   Zeile - die Wortmarke gibt dafuer etwas Sperrung und Groesse ab. */
@media (max-width: 560px) {
    .page-home .marke { font-size: 1.05rem; letter-spacing: .04em; }
    .page-home .leiste-innen { gap: .8rem; }
}

/* --- Hero ------------------------------------------------------------------- */
.page-home .hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
    border-bottom: 1px solid var(--border);
}

.page-home .hero h1 { margin-block: .7rem 1.4rem; }

.page-home .hero-sub {
    max-width: 34ch;
    color: var(--ink-soft);
    font-size: 1.12rem;
}

/* Maszkette unter dem Fliesstext: drei Werte, die die Leistung wirklich beschreiben.
   Aufgebaut wie eine Bemaszung - Endstriche links und rechts, Wert darueber. */
.page-home .masskette {
    display: flex;
    gap: 0;
    margin-top: 2.4rem;
    border-top: 1px solid var(--accent);
}

.page-home .masskette > div {
    flex: 1;
    padding: .8rem .9rem 0 0;
    position: relative;
}

.page-home .masskette > div + div { padding-left: .9rem; }

/* Die senkrechten Endstriche der Bemaszung. */
.page-home .masskette > div::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 1px;
    height: 10px;
    background: var(--accent);
}

.page-home .masskette > div:last-child::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: 1px;
    height: 10px;
    background: var(--accent);
}

.page-home .mass-wert {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.42rem;
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .35rem;
}

/* --- Die Zeichnung: das Signaturelement ------------------------------------- */
.page-home .zeichnung { width: 100%; height: auto; display: block; }

/* Die Schwungbahn zeichnet sich beim Laden - so, wie ein Trainer sie mit dem
   Stift auf das Standbild zieht. */
.page-home .bahn {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: ziehen 2.1s cubic-bezier(.4, 0, .2, 1) .35s forwards;
}

@keyframes ziehen { to { stroke-dashoffset: 0; } }

.page-home .spaet { opacity: 0; animation: auftauchen .5s ease 1.9s forwards; }
.page-home .spaeter { opacity: 0; animation: auftauchen .5s ease 2.25s forwards; }

@keyframes auftauchen { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .page-home .bahn { stroke-dashoffset: 0; }
    .page-home .spaet, .page-home .spaeter { opacity: 1; }
}

/* --- Knöpfe ----------------------------------------------------------------- */
.page-home .knopfreihe {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2.2rem;
}

.page-home .knopf {
    display: inline-block;
    padding: .95rem 1.7rem;
    background: var(--ink);
    color: var(--surface);
    text-decoration: none;
    font-variation-settings: 'wdth' 92, 'wght' 600;
    font-size: .93rem;
    letter-spacing: .04em;
    transition: background .16s ease;
}

.page-home .knopf:hover { background: var(--accent); }

.page-home .knopf-2 {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding-block: calc(.95rem - 1px);
}

.page-home .knopf-2:hover { background: var(--ink); color: var(--surface); }

/* --- Abschnitte ------------------------------------------------------------- */
.page-home section { padding-block: var(--sp); border-bottom: 1px solid var(--border); }

.page-home .abschnitt-kopf { max-width: 46ch; margin-bottom: 3.2rem; }

.page-home .abschnitt-kopf h2 { margin-block: .7rem 1rem; }

.page-home .abschnitt-kopf p { color: var(--ink-soft); }

/* --- Die zwei Blickachsen --------------------------------------------------- */
.page-home .achsen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.page-home .achse {
    background: var(--surface);
    padding: clamp(1.4rem, 3vw, 2.4rem);
}

.page-home .achse h3 { margin-block: .9rem .6rem; }

.page-home .achse p { color: var(--ink-soft); font-size: .97rem; }

.page-home .achse svg { width: 100%; height: auto; max-width: 190px; }

/* --- Ablauf: die Nummerierung ist echt, es ist eine Reihenfolge -------------- */
.page-home .schritte { display: grid; gap: 0; }

.page-home .schritt {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: 1.6rem;
    border-top: 1px solid var(--border);
    align-items: start;
}

.page-home .schritt:last-child { border-bottom: 1px solid var(--border); }

.page-home .schritt-nr {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .95rem;
    color: var(--accent);
    padding-top: .18rem;
}

.page-home .schritt h3 { margin-bottom: .3rem; }

.page-home .schritt p { color: var(--ink-soft); max-width: 58ch; }

/* --- Was zurückkommt -------------------------------------------------------- */
.page-home .rueckgabe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.page-home .rueck {
    background: var(--surface);
    padding: clamp(1.3rem, 3vw, 2rem);
}

.page-home .rueck h3 { margin-block: .8rem .45rem; }

.page-home .rueck p { color: var(--ink-soft); font-size: .96rem; }

/* --- Preis: eine einzige Zahl, bemaszt -------------------------------------- */
.page-home .preis-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
}

.page-home .preis {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(3.4rem, 2rem + 6vw, 7rem);
    font-weight: 400;
    color: var(--accent);
    line-height: .9;
    letter-spacing: -.03em;
    position: relative;
    padding-inline: 1.1rem;
}

/* Bemaszung links und rechts der Zahl - sie ist hier buchstaeblich das Masz. */
.page-home .preis::before, .page-home .preis::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: var(--accent);
}

.page-home .preis::before { left: 0; }
.page-home .preis::after { right: 0; }

.page-home .preis-text { max-width: 40ch; color: var(--ink-soft); }

.page-home .preis-text strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 600; }

/* --- Aufnahme-Hinweise ------------------------------------------------------ */
.page-home .hinweise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem 2.5rem;
}

.page-home .hinweis { border-top: 1px solid var(--ink); padding-top: .9rem; }

.page-home .hinweis h3 { margin-bottom: .35rem; }

.page-home .hinweis p { color: var(--ink-soft); font-size: .95rem; }


/* --- Ablauf mit Aufnahmen: Bild links, Text rechts ------------------------- */
.page-home .schritt-gross {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.8rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
    align-items: start;
}

.page-home .schritt-gross:last-child { border-bottom: 1px solid var(--border); }

.page-home .schritt-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: start;
}

/* Die Fotos liegen wie aufgelegte Abzuege auf dem Blatt: eine Kante, kein Schatten. */
.page-home .abzug {
    border: 1px solid var(--border);
    background: var(--bg);
    padding: .5rem;
}

.page-home .abzug img { display: block; width: 100%; height: auto; }

.page-home .schritt-gross h3 { margin-bottom: .5rem; }

.page-home .schritt-gross p { color: var(--ink-soft); max-width: 62ch; }

.page-home .schritt-gross p + p { margin-top: .8rem; }

.page-home .schritt-gross strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 600; }

/* Haken als Maszzeichen, nicht als Icon-Font. */
.page-home .merkmale { list-style: none; margin: 1.4rem 0 0; padding: 0; }

.page-home .merkmale li {
    position: relative;
    padding-left: 1.6rem;
    padding-block: .38rem;
    border-top: 1px solid var(--btn-secondary-bg);
    color: var(--ink-soft);
    font-size: .96rem;
}

.page-home .merkmale li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-family: 'IBM Plex Mono', monospace;
}

/* --- Zufriedene Kunden ------------------------------------------------------ */
.page-home .kunden {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.page-home .kunde {
    background: var(--surface);
    padding: clamp(1.3rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
}

.page-home .kunde .abzug { width: 6.5rem; margin-bottom: 1.1rem; }

.page-home .kunde blockquote {
    margin: 0 0 1.2rem;
    font-size: 1.04rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* Das Zitat haengt am roten Strich - dieselbe Linie wie die Bemaszung. */
.page-home .kunde blockquote {
    border-left: 1px solid var(--accent);
    padding-left: 1rem;
}

.page-home .kunde h3 { margin-top: auto; }

.page-home .kunde .daten { color: var(--ink-soft); font-size: .93rem; }

@media (max-width: 700px) {
    .page-home .schritt-gross { grid-template-columns: 1fr; gap: .8rem; }
    .page-home .schritt-inhalt { grid-template-columns: 1fr; }
    .page-home .schritt-inhalt .abzug { max-width: 20rem; }
}

/* --- Laden ------------------------------------------------------------------ */
.page-home .laden { text-align: center; border-bottom: none; }

.page-home .laden h2 { margin-block: .8rem 1.1rem; }

.page-home .laden p { color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }

.page-home .laden .knopfreihe { justify-content: center; }


/* --- Schmale Schirme -------------------------------------------------------- */
@media (max-width: 860px) {
    .page-home .hero { grid-template-columns: 1fr; }
    .page-home .hero-zeichnung { order: -1; }
    .page-home .achsen { grid-template-columns: 1fr; }
    .page-home .preis-block { grid-template-columns: 1fr; }
    .page-home .masskette { flex-direction: column; }
    .page-home .masskette > div { padding-left: 0 !important; padding-bottom: .9rem; }
    .page-home .masskette > div:last-child::after { display: none; }
}

/* --- Konstruktionszeichnungen ------------------------------------------------
   Die drei SVGs im Markup trugen ihre Farben frueher als Attribut
   (stroke="#161a18"). Feste Werte ueberleben den Dunkelmodus nicht, deshalb
   tragen die Elemente jetzt eine Klasse und die Farbe kommt von hier. */
.page-home .z-raster  { stroke: var(--border); }
.page-home .z-figur   { stroke: var(--ink); }
.page-home .z-mass    { stroke: var(--accent); }
.page-home .z-mass-f  { fill: var(--accent); }
.page-home .z-bez     { fill: var(--ink-soft); }

/* Der Farbmodus-Knopf ist derselbe .iconbtn wie in den Rechtstexten. Auf dem
   Zeichenblatt gibt es aber keine runde Form - hier bleibt er eckig. */
.page-home .iconbtn { border-radius: 0; box-shadow: none; }
