/* SAMiT v8 · base.css
 * Light-Mode · Titillium Web + Source Serif 4 · gerahmt
 * Quelle der Wahrheit: 03 Bereiche/SAMiT/BRANDING_GUIDE.md
 */

@import url("/assets/fonts/fonts.css");

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* Farben — Basis (auf jeder Seite). */
  --bg:           #f4f5f7;
  --bg-soft:      #eceef2;
  --bg-card:      #ffffff;
  --ink:          #1a1d24;
  --ink-soft:     #484c56;
  --line:         rgba(27, 58, 94, 0.22);   /* siehe --v2-line, eine Linienfamilie */
  --line-soft:    rgba(0, 0, 0, 0.04);

  /* Akzent neutral */
  --gold:         #B48956;

  /* Pillar-Farben — NUR auf themen-Pages verwenden */
  --workplace:    #14B8A6;
  --security:     #6D28D9;
  --operations:   #F59E0B;

  /* Typografie · einheitlich Droid Sans */
  --font-sans:    "Droid Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Droid Sans", Georgia, serif;
  --font-script:  "Droid Sans", cursive;

  /* Font Scale — 8 Stufen, ganzzahlige px-Werte */
  /* ---------------------------------------------------------------
     Diese Familie stammt aus der ersten Fassung der Website und wird
     noch 168-mal benutzt. Sie zeigt seit 2026-08-14 auf die eine
     Schriftleiter aus v2.css, damit es nicht zwei Systeme gibt.
     Der zweite Wert in var() ist der alte Wert als Rueckfallebene,
     falls eine Seite v2.css einmal nicht laedt.
     Neue Regeln nehmen direkt --v2-fs-*, nicht diese hier.
     --------------------------------------------------------------- */
  --fs-xs:   var(--v2-fs-mikro, clamp(12px, 0.75vw, 15px));   /* Kicker, Badges, Micro-Labels */
  --fs-sm:   var(--v2-fs-klein, clamp(14px, 0.875vw, 18px));  /* Card-Text, Captions, Form-Labels */
  --fs-base: var(--v2-fs-body,  clamp(16px, 1vw, 21px));      /* Fliesstext, Listen */
  --fs-md:   var(--v2-fs-lead,  clamp(18px, 1.125vw, 24px));  /* Lead-Absaetze */
  --fs-lg:   var(--v2-fs-gross, clamp(20px, 1.25vw, 26px));   /* H4, Karten-Headlines */
  --fs-xl:   var(--v2-fs-h3,    clamp(22px, 2vw, 38px));      /* H3 */
  --fs-2xl:  var(--v2-fs-h2,    clamp(28px, 3vw, 50px));      /* H2 */
  --fs-3xl:  var(--v2-fs-h1,    clamp(36px, 4.5vw, 74px));    /* H1, Hero */

  /* Spacing — 8px Basis */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  3rem;
  --s-6:  4.5rem;
  --s-7:  6rem;

  /* Container */
  --c-hero:  1320px;
  /* Inhaltsmass der ganzen Website. Von 1280 auf 1440 angehoben
     (Saman, 2026-08-14), damit grosse Bildschirme bis 27 Zoll besser
     gefuellt sind. Fliesstext bekommt trotzdem seine eigene Lesebreite,
     sonst werden die Zeilen zu lang. */
  --c-grid:  1440px;
  --c-text:  60ch;

  /* Radius */
  --r-sm:    12px;
  --r-md:    20px;
  --r-pill:  9999px;

  /* Schatten — sehr dezent */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Motion */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:  180ms;
  --t-med:   320ms;
  --t-slow:  560ms;

  /* Scroll-Bewegung · eine einzige fuer die ganze Website (Entscheid Saman
     2026-08-19). Vorher lagen drei verschiedene Reveals nebeneinander:
     16, 24 und 48 px Weg, 560, 680 und 760 ms Dauer, zwei Kurven. Das
     fuehlte sich von Abschnitt zu Abschnitt unterschiedlich an. Wer die
     Bewegung aendern will, aendert nur diese vier Werte, sonst nichts.
     --reveal-weg     wie weit ein Block heraufkommt
     --reveal-dauer   wie lange er dafuer braucht
     --reveal-kurve   weich aus, ohne Nachwippen
     --reveal-versatz Abstand zwischen Nachbarn einer Reihe */
  --reveal-weg:     18px;
  --reveal-dauer:   620ms;
  --reveal-kurve:   cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-versatz: 70ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sicherheitsnetz: kein versehentliches Seitwaerts-Scrollen auf Mobile.
     Faengt Rest-Ueberhang von Reveal-Animationen, vollbreiten Medien etc.
     ab. Kein position:sticky im Projekt, daher unkritisch. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  /* Kein -webkit-font-smoothing: antialiased mehr (2026-08-11): auf Monitoren
     ohne doppelte Pixeldichte schaltet das die Subpixel-Glaettung von macOS ab,
     die Schrift wirkt duenn und ausgefranst. Der Standardwert rendert dort
     sauber und sieht auf Retina unveraendert aus. */
  text-rendering: optimizeLegibility;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

ul, ol { padding-left: 1.25rem; }

/* Body: full-bleed, Header sitzt sticky oben (Spider-Pattern) */
body { padding: 0; }
main  { background: var(--bg); }

/* ============================================================
   Typografie
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-3);
  text-transform: none;
}

h1 {
  font-size: var(--fs-3xl);
  max-width: 36ch;
}

h2 {
  font-size: var(--fs-2xl);
  max-width: 32ch;
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-base);
  text-transform: none;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: var(--c-text);
  line-height: 1.55;
}

.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-2);
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.pull-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: var(--s-3);
  margin: var(--s-4) 0;
  max-width: var(--c-text);
}

/* Mono-Nummern für nummerierte Schritte (Prozess, Anleitungen) */
.step-num {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  min-width: 1.6em;
}

/* ============================================================
   Layout-Container
   ============================================================ */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.container--hero { max-width: var(--c-hero); }
.container--grid { max-width: var(--c-grid); }
.container--text { max-width: 720px; }

/* Generische Section-Padding (vertikal) */
section.section,
.section {
  padding-block: clamp(var(--s-5), 8vw, var(--s-7));
}

.section--soft { background: var(--bg-soft); }

/* Tri-Stripe-Divider zwischen Sections */
.tri-stripe {
  display: flex;
  width: clamp(180px, 22vw, 280px);
  height: 2px;
  margin: 0 auto var(--s-3);
}
.tri-stripe::before,
.tri-stripe::after,
.tri-stripe > span {
  flex: 1;
  display: block;
  height: 100%;
}
.tri-stripe::before { content: ""; background: var(--workplace); }
.tri-stripe > span  { background: var(--security); }
.tri-stripe::after  { content: ""; background: var(--operations); }

/* ============================================================
   Skip-Link · Accessibility
   ============================================================ */
.skip-link {
  position: absolute;
  top: -200%;
  left: 1rem;
  z-index: 999;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Sichtbarer Focus-Ring auf allen interaktiven Elementen */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Reveal-Animationen · vanilla (siehe reveal.js)
   ============================================================ */
/* Bewusst als Keyframe-Animation und nicht als transition: viele Kacheln
   haben eine eigene transition fuer Hover (z. B. .v2-package mit 280 ms).
   Die hat im Kaskaden-Rennen gewonnen und das Reveal auf 280 ms verkuerzt,
   die Kachel ist also gesprungen statt aufzusteigen. Eine Animation laeuft
   daneben her und stoert nichts.
   fill-mode "backwards" statt "both": vor dem Start gilt das erste Bild
   (unsichtbar, kein Flackern), NACH dem Lauf gilt wieder der normale Stand
   der Kachel. Mit "both" wuerde transform: none haengenbleiben und der
   Hover-Effekt waere fuer immer blockiert. */
.reveal-up,
.reveal-fade { opacity: 0; }

.reveal-up.is-in,
.reveal-fade.is-in { opacity: 1; }

/* --reveal-stufe setzt reveal.js pro Nachbar einer Reihe, damit Kacheln
   kurz nacheinander kommen statt alle auf einmal. */
.reveal-up.is-in {
  animation: reveal-auf var(--reveal-dauer) var(--reveal-kurve) var(--reveal-stufe, 0ms) backwards;
}
.reveal-fade.is-in {
  animation: reveal-ein var(--reveal-dauer) var(--reveal-kurve) var(--reveal-stufe, 0ms) backwards;
}

/* Nur ein "from": das Ziel ist immer der normale Stand des Elements. So
   braucht keine Variante ein eigenes Endbild. */
@keyframes reveal-auf  { from { opacity: 0; transform: translateY(var(--reveal-weg)); } }
@keyframes reveal-ein  { from { opacity: 0; } }
@keyframes reveal-links  { from { opacity: 0; transform: translateX(calc(var(--reveal-weg) * -1)); } }
@keyframes reveal-rechts { from { opacity: 0; transform: translateX(var(--reveal-weg)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .reveal-up, .reveal-fade {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Pillar-Themen · NUR auf der jeweiligen Pillar-Page laden
   (wird in pages.css aktiviert via body[data-pillar])
   ============================================================ */
body[data-pillar="workplace"]   { --pillar: var(--workplace); }
body[data-pillar="security"]    { --pillar: var(--security); }
body[data-pillar="operations"]  { --pillar: var(--operations); }

/* Utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.muted { color: var(--ink-soft); }

/* ============================================================
   Icons (SVG-Sprite via /assets/icons.svg)
   Verwendung: <svg class="icon"><use href="/assets/icons.svg#i-check"/></svg>
   ============================================================ */
.icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--lg  { width: 1.6em; height: 1.6em; vertical-align: -0.35em; }
.icon--xl  { width: 2.5rem; height: 2.5rem; vertical-align: top; }
.icon--xxl { width: 3.2rem; height: 3.2rem; vertical-align: top; }

/* Bullet-Lists mit Check-Icon */
ul.icon-list {
  list-style: none;
  padding: 0;
}
ul.icon-list li {
  display: flex;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.6rem;
}
ul.icon-list li > .icon:first-child {
  margin-top: 0.25em;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/* Pillar-Icon mit Pillar-Farbe */
.icon--pillar-workplace  { color: var(--workplace);  }
.icon--pillar-security   { color: var(--security);   }
.icon--pillar-operations { color: var(--operations); }
.icon--gold              { color: var(--gold);       }