/* PypeCloud — gemeinsame Grundlagen aller Seiten: Schriften, Farben, Kopf, Knöpfe, Fuß, Rechtstexte.
   Richtung A „Plattform“ (gewählt am 15.10.2026). Schrift: Instrument Sans (Text) + Geist Mono (kleine Daten in den Oberflächen),
   beide selbst ausgeliefert (fonts/, Lizenz OFL). Farben: Markenblau #3E76F6, Tinte #0B1B3F, Schiefer #5A6886, Nebel #F5F8FE.
   Nur helle Darstellung. Kein Aufruf an fremde Server. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-mono-latin-wght-normal.woff2) format('woff2')}
:root{
  --blau:#3E76F6; --blau-text:#2D5FE3; --blau-tief:#1F3FB8;
  --ink:#0B1B3F; --slate:#5A6886; --leise:#5F6C91;
  --mist:#F5F8FE; --linie:#E3E9F5; --weiss:#fff;
  --cyan:#6CD5FF; --violett:#8A78FF; --rosa:#FFA3C8; --gruen:#14A875;
  --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --schatten:0 1px 1px rgba(11,27,63,.04),0 10px 24px -8px rgba(11,27,63,.14),0 34px 64px -24px rgba(31,63,184,.28);
  /* Sicherer Bereich des iPhones: Statusleiste oben, Notch oder Dynamic Island seitlich im Querformat. Werte liefert Safari nur mit
     viewport-fit=cover im Viewport-Meta; ohne sie (Desktop, Android, Adressleiste oben) sind alle drei 0 und nichts ändert sich. */
  --sicher-oben:env(safe-area-inset-top,0px);
  --sicher-links:env(safe-area-inset-left,0px);
  --sicher-rechts:env(safe-area-inset-right,0px);
  --rand-seite:max(24px,var(--sicher-links),var(--sicher-rechts));
  --rand:min(1200px,100% - 2 * var(--rand-seite));
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sprungziele (Menü, Knöpfe, jeder #-Link): die Überschrift des Ziels landet 18 px unter der Unterkante der Kopfzeile (68 px plus sicherer Bereich).
   Abschnitte mit eigenem Innenabstand oben holen ihn über scroll-margin-top wieder herein (start.css, --sek-pad). Die Prüfung „anker“ misst es. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(68px + var(--sicher-oben) + 18px);background:#fff}
body{font-family:var(--font);color:var(--ink);background:#fff;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:6px}
.wrap{width:var(--rand);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Überschriften: Stripe-Takt — ein Satz in Tinte, der zweite in Schiefer */
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(40px,4.5vw,64px);letter-spacing:-.038em;line-height:1.03}
h2{font-size:clamp(28px,3vw,42px);line-height:1.12;max-width:20em}
h2 .t2{color:var(--slate)}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.lead{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--slate);max-width:34em}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font-weight:500;font-size:16px;letter-spacing:-.005em;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .2s,border-color .2s}
.knopf svg.i{width:16px;height:16px;stroke-width:2}
.knopf-p{background:var(--blau-text);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 20px -8px rgba(45,95,227,.7)}
.knopf-p:hover{background:#2552CF;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 26px -8px rgba(45,95,227,.8)}
.knopf-s{background:#fff;border:1px solid var(--linie);color:var(--ink)}
.knopf-s:hover{border-color:#C9D4EA;transform:translateY(-1px)}
.knopf-w{background:#fff;color:var(--ink)}
.knopf-w:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(0,0,0,.4)}
.knopf-k{height:40px;padding:0 16px;font-size:15px}
.chip{display:inline-flex;align-items:center;gap:5px;font:500 11.5px/1 var(--font);padding:5px 8px;border-radius:999px;white-space:nowrap}
.chip-blau{background:#E8EFFF;color:#2250D0}.chip-violett{background:#EEEAFF;color:#4A35C4}.chip-cyan{background:#DFF5FF;color:#0A6D93}
.chip-gruen{background:#E1F6EE;color:#0C7A56}.chip-grau{background:#EEF1F7;color:#566280}.chip-gelb{background:#FFF3D6;color:#8A5A00}
.knopf-o{border:1px solid rgba(255,255,255,.6);color:#fff}
.knopf-o:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}

/* Sprung zum Inhalt (nur bei Tastaturbedienung sichtbar) */
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:500;font-size:15px;transition:top .2s}
.skip:focus{top:calc(12px + var(--sicher-oben))}

/* Kopf: voll deckend, einfarbig und ohne Filter, mit Absicht. Safari ab iOS 26 legt die Adressleiste durchscheinend über die Seite
   und füllt den Streifen darüber nur dann mit der Farbe der Kopfzeile, wenn die feste Leiste am oberen Rand eine einzige deckende
   Farbe hat (keine Transparenz, kein backdrop-filter, kein Verlauf). Sonst läuft dort der Seiteninhalt durch (Armin am iPhone,
   15.10.2026). Die Prüfung pruefen.py (Schlüssel „leiste“) hält das fest.
   Dazu der sichere Bereich (Plan B): die Kopfzeile deckt den Streifen der Statusleiste selbst ab (padding-top und Höhe um
   --sicher-oben; der Inhaltsbereich bleibt 67 px hoch), und alles, was ihre Höhe kennt, rechnet --sicher-oben ein (scroll-padding-top,
   oberer Abstand von .hero und .seitenkopf, .skip:focus). Neue Abstände zur Kopfzeile genauso, nie 68 px fest. Die Prüfung
   pruefen.py (Schlüssel „sicher“) stellt den Bereich nach. */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;height:calc(68px + var(--sicher-oben));padding-top:var(--sicher-oben);background:#fff;border-bottom:1px solid var(--linie)}
/* Plan C (15.10.2026, Armin 6303 am iPhone: „oberhalb scrollt der Hintergrund durch“): Safari ab iOS 26 zeichnet die Seite auch unter
   der durchscheinenden Status- und Adressleiste, liefert im Hochformat aber keinen sicheren Bereich (env() ist dort 0, WebKit-Fehler
   306465), Plan B greift also nicht. Diese weiße Fläche sitzt über der Kopfzeile, außerhalb des Fensters, und deckt den Streifen ab;
   überall sonst ist sie unsichtbar. Am Gerät noch nicht bestätigt. */
.kopf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:240px;background:#fff;pointer-events:none}
/* Plan D (15.10.2026, Armin 6312 mit Bildschirmfoto: auch mit Plan C laufen über der Kopfzeile die Karten durch). Unter der
   durchscheinenden Adressleiste zeichnet Safari den Seiteninhalt, die feste Kopfzeile samt Plan C aber offenbar nicht. Diese Linie gehört
   zum Seiteninhalt: Sie klebt (sticky) am oberen Rand des sichtbaren Bereichs, ist 0 px hoch, nimmt also keinen Platz ein, und ihr weißer
   Schatten deckt die 160 px darüber ab, genau den Streifen unter der Leiste. Liegt hinter der Kopfzeile (z-index 49 < 50). Wirkung nur am
   Gerät prüfbar. */
body::before{content:"";display:block;position:sticky;top:0;height:0;z-index:49;box-shadow:0 -80px 0 80px #fff;pointer-events:none}
.kopf .wrap{height:100%;display:flex;align-items:center;gap:36px}
.logo-link{display:inline-flex;align-items:center;border-radius:6px}
.logo{height:28px;width:auto;aspect-ratio:380/74;color:var(--blau)}
.menue{display:flex;gap:6px;margin-left:8px}
.menue a{font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;color:var(--ink);transition:background .2s,color .2s}
.menue a:hover{background:var(--mist)}
.menue a[aria-current="true"]{color:var(--blau-text)}
.kopf .knopf{margin-left:auto}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center}
.burger svg.i{width:22px;height:22px}
.menue-recht{display:none}
.menue-recht a{font-size:15px;color:var(--slate);padding:6px 0;border-radius:6px}
.menue-recht a:hover{color:var(--ink)}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:56px 0 48px;color:var(--slate);font-size:14.5px}
.fuss-g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.fuss .logo{height:26px;margin-bottom:16px}
.fuss-reg{margin-top:12px;font-size:13.5px}
.fuss-h{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.fuss a:hover{color:var(--ink)}
.fuss ul{list-style:none;display:grid;gap:7px}
.fuss-u{margin-top:40px;padding-top:22px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--leise)}

/* Seiten mit Rechtstexten (Impressum, Datenschutz) */
.seitenkopf{padding:calc(132px + var(--sicher-oben)) 0 40px;background:linear-gradient(180deg,#F0F5FF 0%,#fff 100%);border-bottom:1px solid var(--linie)}
.schmal{width:min(800px,100% - 2 * var(--rand-seite));margin-inline:auto}
.seitenkopf h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.035em;overflow-wrap:anywhere}
.seitenkopf .lead{margin-top:16px}
.recht{padding:44px 0 112px}
.recht h2{font-size:clamp(21px,2vw,25px);letter-spacing:-.02em;line-height:1.2;margin:44px 0 12px}
.recht h2:first-child{margin-top:0}
.recht p,.recht li{color:var(--ink);max-width:46em}
.recht p+p{margin-top:12px}
.recht ul{margin:12px 0 0 1.2em;display:grid;gap:8px;max-width:46em}
.recht a{color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.recht a:hover{color:var(--blau-tief)}
.recht address{font-style:normal}
.recht .nb{white-space:nowrap}
.recht .stand{margin-top:44px;font-size:15px;color:var(--leise)}
.kurz{margin-top:22px;padding:18px 20px;border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:12px;background:var(--mist);max-width:46em}
.kurz p{max-width:none}

@media (max-width:1060px){
  .fuss-g{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .menue{display:none}.burger{display:flex}.kopf .knopf{display:none}
  .kopf.offen{height:auto;background:#fff}
  .kopf.offen .wrap{flex-wrap:wrap;height:auto;padding-block:12px 18px;row-gap:0}
  .kopf.offen .menue{display:flex;flex-direction:column;width:100%;order:3;margin:6px 0 0;gap:2px}
  .kopf.offen .menue a{padding:13px 8px;font-size:17px;border-top:1px solid var(--linie);border-radius:0}
  .kopf.offen .knopf{display:inline-flex;order:4;margin:10px 0 0;width:100%;justify-content:center}
  .kopf.offen .menue-recht{display:flex;order:5;width:100%;flex-wrap:wrap;gap:0 24px;margin-top:12px;padding:10px 8px 0;border-top:1px solid var(--linie)}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--rand-seite:max(20px,var(--sicher-links),var(--sicher-rechts))}
  .fuss-g{grid-template-columns:1fr}
  .seitenkopf{padding:calc(104px + var(--sicher-oben)) 0 30px}
  .recht{padding:34px 0 80px}
}
@media (max-width:420px){
  .knopf{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}