/* ===== fonts ===== */
/* Schriften lokal — KEINE Verbindung zu Google.
   Archivo Black und Montserrat stehen unter der SIL Open Font License,
   Selbsthosten ist ausdruecklich erlaubt.
   Wer diese Dateien uebernimmt: fonts.googleapis.com NIE einbinden —
   das uebertraegt die IP-Adresse jedes Besuchers an Google. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Archivo-Black-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Archivo-Black-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Montserrat-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/Montserrat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/Montserrat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/Montserrat-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/Montserrat-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/Montserrat-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/Montserrat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== colors ===== */
/* FARBEN — Web Werkstube
   Die Seite ist DUNKEL. Es gibt keinen hellen Modus.
   Reihenfolge der Wichtigkeit: Lila > Messing > Azur.
   Kontrastwerte in den Kommentaren beziehen sich auf --bg (#0B0B0B). */
:root{
  /* ---- Tinte: Hintergruende und Flaechen ---- */
  --ink-900:#0B0B0B; /* Seitenhintergrund */
  --ink-850:#101010; /* Fuss, tiefe Flaechen */
  --ink-800:#141414; /* Standard-Flaeche (Karte, Feld) */
  --ink-750:#1A1A1A; /* obere Kante der Karten-Gradienten */
  --ink-600:#262626; /* Rahmen, Trennlinien */
  --ink-500:#383838; /* starker Rahmen, Umriss-Knopf */

  /* ---- Papier: Text ---- */
  --paper:#F5F5F5;   /* Haupttext, Ueberschriften */
  --g4:#A3A3A3;      /* Fliesstext gedaempft */
  --g5:#8A8A8A;      /* leise: Beschriftungen, Fussnoten */
  --g6:#6B6B6B;      /* Platzhalter, Rechtszeile */

  /* ---- LILA = INTERAKTION. Lila heisst anklickbar. ----
     Hover hellt AUF (nicht ab): Lila ist von Natur aus dunkel. */
  --violet-500:#A78BFA;  /* 7,23:1 — ueberall zulaessig */
  --violet-400:#B9A3FC;  /* 9,10:1 — Hover */
  --violet-600:#9575F8;  /* 5,79:1 — Press */
  --violet-tint:rgba(167,139,250,0.12);
  --on-violet:#0B0B0B;   /* Weiss NIE auf Lila (2,50:1) */

  /* ---- MESSING = Sektionen und Hervorhebungen, Preise, Zahlen ----
     NIE fuer Knoepfe — sonst nicht von der Warnfarbe unterscheidbar. */
  --messing-500:#D9A441; /* 8,75:1 — Flaeche UND Text zulaessig */
  --messing-600:#C08F2E; /* 6,76:1 — Rahmen, Hover auf Flaechen */
  --messing-tint:rgba(217,164,65,0.10);
  --on-messing:#1A1206;  /* Weiss NIE auf Messing (2,06:1) */

  /* ---- AZUR = kleine Tupfer: Badges, Symbole, Marker, Schrittzahlen ---- */
  --azur-400:#60A5FA;    /* 7,74:1 — Text und kleine Marker */
  --azur-500:#2D8CF0;    /* 5,74:1 — nur Flaechen und Rahmen */
  --azur-tint:rgba(96,165,250,0.12);
  --on-azur:#06182E;

  /* ---- Zustandsfarben ---- */
  --warn-500:#F5A524; --warn-tint:rgba(245,165,36,0.12);
  --ok-500:#4ADE80;   --ok-tint:rgba(74,222,128,0.12);   --ok-text:#c9f3da;
  --fehler-500:#E04231; --fehler-tint:rgba(224,66,49,0.12); --fehler-text:#f7cdc7;

  /* ============ SEMANTISCHE ALIASE ============ */
  --bg:var(--ink-900);
  --bg-raised:var(--ink-850);
  --surface:var(--ink-800);
  --surface-hover:var(--ink-750);
  --line:var(--ink-600);
  --line-strong:var(--ink-500);
  --text:var(--paper);
  --text-muted:var(--g4);
  --text-soft:var(--g5);
  --text-faint:var(--g6);

  --accent:var(--violet-500);
  --accent-hover:var(--violet-400);
  --accent-active:var(--violet-600);
  --accent-tint:var(--violet-tint);
  --on-accent:var(--on-violet);
  --accent-text:var(--violet-500);

  --secondary:var(--messing-500);
  --secondary-tint:var(--messing-tint);
  --marker:var(--azur-400);
  --marker-tint:var(--azur-tint);
  --terra:var(--messing-500); /* Kompatibilitaet zum Grundsystem robschman */
  --warn:var(--warn-500);
  --focus-ring:var(--violet-500);

  /* ---- Rahmenfarben beim Darueberfahren ---- */
  --line-accent:rgba(167,139,250,0.5);
  --line-secondary:rgba(217,164,65,0.34);
  --line-marker:rgba(96,165,250,0.45);
}

/* MESSING-SEKTION, gefuellt — HOECHSTENS EINE pro Seite.
   Auf Messing ist Weiss unlesbar (2,06:1), deshalb kippt alles auf dunkle Schrift. */
.theme-messing{
  --bg:var(--messing-500); --bg-raised:var(--messing-500);
  --surface:rgba(0,0,0,0.08); --surface-hover:rgba(0,0,0,0.14);
  --line:rgba(26,18,6,0.28); --line-strong:rgba(26,18,6,0.55);
  --text:var(--on-messing); --text-muted:rgba(26,18,6,0.72); --text-soft:rgba(26,18,6,0.84);
  --accent:var(--on-messing); --accent-hover:#000000; --accent-active:#2B1E0A;
  --accent-text:var(--on-messing); --on-accent:var(--messing-500);
  --focus-ring:var(--on-messing); --shadow-accent:none;
  background:var(--bg); color:var(--text);
}

/* DRUCKBLATT — Merkblätter und Handouts kippen auf WEISS.
   Auf Papier ist die dunkle Seite unbrauchbar; Lila und Messing werden
   dafuer abgedunkelt, damit sie auf Weiss noch lesbar sind.
   Gilt NUR fuer gedruckte Beilagen, nie fuer die Website. */
.blatt{
  --bg:#FFFFFF; --bg-raised:#FFFFFF; --surface:#F6F7FB; --surface-hover:#EEF0F7;
  --line:#D8DAE4; --line-strong:#B9BCCB;
  --text:#1A1A1A; --text-muted:#5C5C66; --text-soft:#5C5C66; --text-faint:#8A8A94;
  --accent:#6D4FC4;        /* Lila, fuer Weiss abgedunkelt */
  --accent-hover:#5B3EB0; --accent-active:#4C3396;
  --accent-tint:rgba(109,79,196,0.08); --accent-text:#6D4FC4; --on-accent:#FFFFFF;
  --secondary:#A8792A;     /* Messing, fuer Weiss abgedunkelt */
  --secondary-tint:rgba(168,121,42,0.10);
  --ok-500:#0A7D52; --fehler-500:#B83A32;
  --shadow-accent:none;
  background:var(--bg); color:var(--text);
}

/* ===== typography ===== */
/* SCHRIFT — Web Werkstube
   Archivo Black = Marke, Ueberschriften, Zahlen, Preise, Badges.
   ACHTUNG: Archivo Black hat nur EIN Gewicht (400). Niemals 700 oder 900
   setzen — der Browser rechnet sonst kuenstliches Fett dazu und die
   Buchstaben verschmieren.
   Montserrat = Fliesstext. Grundgewicht ist 500, nicht 400. */
:root{
  --font-display:'Archivo Black',-apple-system,'Segoe UI',sans-serif;
  --font-sans:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fw-display:400; /* @kind font */
  --fw-body:500; /* @kind font */
  --fw-medium:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Groessen — die Halbwerte sind Absicht, nicht gerundet */
  --fs-h1:clamp(32px,5vw,56px); /* @kind font */
  --fs-slogan:clamp(18px,2.5vw,27px); /* @kind font */
  --fs-h2:clamp(26px,3.4vw,36px); /* @kind font */
  --fs-h3:24px; /* @kind font */      /* Blockueberschrift (Danach, Rechtstexte) */
  --fs-h3-karte:19.5px; /* @kind font */
  --fs-h4:16px; /* @kind font */
  --fs-preis:40px; /* @kind font */   /* Paketpreis */
  --fs-preis-abo:30px; /* @kind font */
  --fs-zahl:34px; /* @kind font */    /* Schrittnummer 01–05 */
  --fs-fakt:23px; /* @kind font */
  --fs-lead:17.5px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-body-s:15px; /* @kind font */
  --fs-ui:14.5px; /* @kind font */
  --fs-nav:14px; /* @kind font */
  --fs-klein:13.5px; /* @kind font */
  --fs-eyebrow:12.5px; /* @kind font */
  --fs-badge:10.5px; /* @kind font */

  --lh-display:1.1; /* @kind font */
  --lh-h2:1.14; /* @kind font */
  --lh-body:1.65; /* @kind font */
  --lh-lesen:1.75; /* @kind font */

  --ls-h1:-0.03em; /* @kind font */
  --ls-h2:-0.025em; /* @kind font */
  --ls-display:-0.02em; /* @kind font */
  --ls-eyebrow:0.1em; /* @kind font */   /* Eyebrow ist immer GROSSBUCHSTABEN */
  --ls-badge:0.05em; /* @kind font */
}

/* ===== spacing ===== */
/* MASSE UND ABSTAENDE — Web Werkstube */
:root{
  --breite-inhalt:1080px;  /* .w — Inhaltsspalte der ganzen Seite */
  --breite-kopfzeile:900px;/* Ueberschriftenblock, damit h2 einzeilig bleibt */
  --breite-text:620px;     /* Fliesstext darunter, gut lesbar */
  --rand-seite:24px;       /* Innenabstand links/rechts, auch am Handy */

  --space-1:2px;  --space-2:6px;  --space-3:10px; --space-4:14px;
  --space-5:18px; --space-6:22px; --space-7:26px; --space-8:34px;
  --space-9:44px; --space-10:52px;

  --pad-sektion:80px;      /* Abschnittshoehe am Computer */
  --pad-sektion-mobil:60px;
  --pad-karte:34px 30px 32px;
  --pad-block:40px 38px;   /* grosser Kasten (Danach, Rechtstexte) */
  --pad-knopf:12px 24px;
  --pad-knopf-klein:9px 18px;
  --hoehe-kopf:104px;      /* Seitenkopf, klebt oben */
  --gap-karten:18px;
  --gap-raster:16px;
}

/* ===== form ===== */
/* RADIEN, RAHMEN, SCHATTEN, BEWEGUNG — Web Werkstube
   Nichts ist rund um der Rundung willen: 9px Knopf, 12–14px Kleinkarte,
   16–20px Grosskarte, 999px nur fuer Pillen (Tag, Badge, Kicker). */
:root{
  --r-knopf:9px;
  --r-feld:9px;
  --r-klein:10px;
  --r-liste:12px;
  --r-frage:13px;
  --r-karte-s:14px;
  --r-karte:16px;
  --r-karte-l:18px;
  --r-block:20px;
  --r-pille:999px;
  --r-kasten:0.17em;  /* Kaestchen der Wortmarke, relativ zur Schriftgroesse */

  --b-1:1px solid var(--line);
  --b-stark:1px solid var(--line-strong);
  --b-akzent-links:3px;  /* Messing-Balken links am hervorgehobenen Block */
  --b-streifen:3px;      /* Farbstreifen oben auf Karten und Bloecken */

  /* Schatten: schwarz und tief. Farbig NUR der Marken-Glow am Primaerknopf. */
  --shadow-karte:0 16px 40px rgba(0,0,0,0.45);
  --shadow-pille:inset 0 1px 0 rgba(255,255,255,0.09),0 4px 14px rgba(0,0,0,0.35);
  --shadow-pille-hover:inset 0 1px 0 rgba(255,255,255,0.18),0 10px 26px rgba(45,140,240,0.3);
  --shadow-plakette:drop-shadow(0 26px 52px rgba(0,0,0,0.6)) drop-shadow(0 3px 10px rgba(0,0,0,0.4));
  --shadow-accent:0 6px 24px rgba(167,139,250,0.22);

  /* Streifen und Flaechen, die mehrfach vorkommen */
  --streifen-marke:linear-gradient(90deg,var(--violet-500),var(--messing-500));
  --streifen-recht:linear-gradient(90deg,var(--azur-400),var(--violet-500));
  --streifen-danach:linear-gradient(90deg,var(--messing-500),var(--violet-500));
  --flaeche-karte:linear-gradient(165deg,var(--ink-750),var(--ink-850));
  --flaeche-pille:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,0.07),rgba(255,255,255,0.015)); /* @kind color */
  --flaeche-hero:radial-gradient(900px 420px at 78% 12%,rgba(167,139,250,0.1),transparent 62%),linear-gradient(180deg,var(--ink-850),var(--ink-900));

  /* Bewegung: kurz und sachlich. Kein Federn, kein Huepfen. */
  --t-schnell:0.15s; /* @kind other */
  --t-normal:0.18s; /* @kind other */
  --t-langsam:0.25s; /* @kind other */
  --hub-karte:-4px;   /* Karte hebt sich beim Darueberfahren */
  --hub-klein:-3px;
  --hub-pille:-8px;
}

/* ===== bewegung ===== */
/* BEWEGUNG — die einzigen Keyframes des Systems.
   Bewegung ist sparsam: nur die Branchen-Blasen schweben, alles andere
   sind kurze Uebergaenge (0,15–0,25 s) an Rahmen, Farbe und 3–4 px Hub. */
@keyframes ww-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){
  [style*="ww-schweben"]{animation:none!important}
}

/* ===== druck ===== */
/* GESCHAEFTSPAPIERE — Angebot, Rechnung, Uebergabeprotokoll.
   Papier ist WEISS: die dunkle Seite ist auf Papier unbrauchbar. Die Bogen
   tragen zusaetzlich .blatt (siehe colors.css), damit Lila und Messing in den
   abgedunkelten Druckwerten erscheinen.
   A4 hochkant, 18 mm Rand. Am Bildschirm ausfuellbar, im Druck werden aus den
   Feldern schlichte Linien und aus gesetzten Haekchen ein Kreuz. */
.papier{width:210mm;min-height:297mm;padding:18mm 18mm 16mm;margin:0 auto;
  background:#fff;color:#1A1A1A;box-shadow:0 24px 60px rgba(0,0,0,.45);
  font-family:var(--font-sans);font-weight:500;font-size:10.5pt;line-height:1.55}

/* Ausfuellfeld: am Bildschirm ein Kasten, im Druck eine Linie */
.schreibfeld{font:inherit;font-size:10.5pt;color:#1A1A1A;width:100%;
  background:#F6F7FB;border:1px solid #D8DAE4;border-radius:6px;padding:6px 9px}
.schreibfeld:focus{outline:2px solid #6D4FC4;outline-offset:-1px;border-color:#6D4FC4}
.schreibfeld::placeholder{color:#A6A8B4}
textarea.schreibfeld{min-height:20mm;resize:vertical;line-height:1.5}

/* Ankreuzkaestchen: gleiches Bild am Bildschirm und auf Papier */
.kreuzfeld{appearance:none;-webkit-appearance:none;width:14px;height:14px;flex-shrink:0;
  margin:2px 0 0;border:1.5px solid #5C5C66;border-radius:3px;background:#fff;
  display:inline-grid;place-items:center;cursor:pointer;font-size:13px;line-height:1;
  color:#1A1A1A;font-family:var(--font-sans);font-weight:700}
.kreuzfeld:checked{border-color:#6D4FC4}
.kreuzfeld:checked::after{content:"\00D7"}
.kreuzfeld:focus-visible{outline:2px solid #6D4FC4;outline-offset:2px}

@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff!important}
  .papier{width:auto;min-height:0;margin:0;box-shadow:none;padding:16mm 16mm 14mm}
  .nichtdrucken{display:none!important}
  .schreibfeld{background:transparent;border:0;border-bottom:1px solid #1A1A1A;
    border-radius:0;padding:2px 0}
  textarea.schreibfeld{border:0;border-bottom:1px solid #1A1A1A;min-height:16mm}
  .kreuzfeld{border-color:#1A1A1A}
  .umbruch{page-break-before:always}
  .zusammen{page-break-inside:avoid}
}

/* ===== basis ===== */
/* BASIS — die wenigen Elementregeln, die ueberall gelten.
   Alles andere ist Sache der Komponenten. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-weight:var(--fw-body);
  line-height:var(--lh-body);font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display);
  letter-spacing:var(--ls-display);margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-display);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-family:var(--font-sans);font-weight:var(--fw-bold);letter-spacing:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}