/* ==========================================================================
   Liroba – Design-Tokens und Grundstile für die Website
   CI-Fassung 1.0 vom 28.10.2026
   Einbinden: <link rel="stylesheet" href="liroba.css">
   Die Schrift Lexend liegt selbst gehostet unter schrift/ (kein Google-Fonts-
   Aufruf, keine Datenweitergabe an Dritte – wichtig für DSG/DSGVO).
   ========================================================================== */

@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-variable.woff2") format("woff2-variations"),
       url("../fonts/Lexend-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Markenfarben (Pantone Solid Coated → sRGB) ------------------------ */
  --liroba-mint:     #82D0AB;   /* Pantone 345 C  · RGB 130 208 171 */
  --liroba-petrol:   #0B626D;   /* Pantone 3155 C · RGB 11 98 109    */
  --liroba-schiefer: #31414B;   /* Pantone 432 C  · RGB 49 65 75    */

  /* --- Abstufungen (aus den Markenfarben abgeleitet) --------------------- */
  --liroba-mint-25:    #E0F3EA;   /* Mint 25 % auf Weiss: Flächen, Hinweise   */
  --liroba-mint-10:    #F3FAF7;   /* Mint 10 % auf Weiss: zarte Hintergründe  */
  --liroba-petrol-dunkel: #094E57; /* Hover/aktiv für Petrol                   */
  --liroba-petrol-10:  #E7EFF0;   /* Petrol 10 % auf Weiss                    */
  --liroba-schiefer-70: #5A676F;  /* Sekundärtext, Beschriftungen (5.8:1)    */
  --liroba-schiefer-40: #9AA3A9;  /* Platzhalter, deaktiviert                 */

  /* --- Neutrale Farben --------------------------------------------------- */
  --liroba-weiss:  #FFFFFF;
  --liroba-nebel:  #F4F7F6;   /* Seitenhintergrund-Abschnitte, Karten        */
  --liroba-linie:  #D7DEDC;   /* Rahmen, Trennlinien                         */

  /* --- Semantische Rollen (im Code diese Namen verwenden) ---------------- */
  --farbe-primaer:        var(--liroba-petrol);
  --farbe-primaer-hover:  var(--liroba-petrol-dunkel);
  --farbe-akzent:         var(--liroba-mint);
  --farbe-text:           var(--liroba-schiefer);
  --farbe-text-2:         var(--liroba-schiefer-70);
  --farbe-hintergrund:    var(--liroba-weiss);
  --farbe-hintergrund-2:  var(--liroba-nebel);
  --farbe-linie:          var(--liroba-linie);
  --farbe-link:           var(--liroba-petrol);
  --farbe-fokus:          var(--liroba-mint);

  /* --- Typografie -------------------------------------------------------- */
  --schrift: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
  --text-basis: 1rem;        /* 16 px */
  --text-klein: 0.875rem;    /* 14 px */
  --text-lead: 1.125rem;     /* 18 px */
  --h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --h3: 1.25rem;
  --zeilenhoehe: 1.55;

  /* --- Form ------------------------------------------------------------- */
  --radius: 12px;            /* Karten, Eingabefelder                        */
  --radius-klein: 8px;       /* Buttons, Chips                               */
  --radius-rund: 999px;      /* Pillen                                       */
  --schatten: 0 2px 12px rgba(49, 65, 75, 0.08);
  --abstand: 1rem;
  --inhalt-breite: 72rem;
}

/* Dunkelmodus (optional): Mint wird zur Primärfarbe, Petrol hellt auf */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --farbe-primaer:        var(--liroba-mint);
    --farbe-primaer-hover:  #95D7B8;
    --farbe-akzent:         #3C9DAB;
    --farbe-text:           #E8EEEC;
    --farbe-text-2:         #AEB8BD;
    --farbe-hintergrund:    #1B2429;
    --farbe-hintergrund-2:  #243036;
    --farbe-linie:          #36434A;
    --farbe-link:           var(--liroba-mint);
    --farbe-fokus:          var(--liroba-mint);
  }
}

/* --- Grundstile ----------------------------------------------------------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--text-basis);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p  { margin: 0 0 1em; }
.lead { font-size: var(--text-lead); color: var(--farbe-text-2); }
small, .klein { font-size: var(--text-klein); }

a { color: var(--farbe-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--farbe-primaer-hover); }
:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--inhalt-breite); margin-inline: auto; padding-inline: var(--abstand); }

/* Buttons: Primär = Petrol mit weisser Schrift (7:1), Sekundär = Mint mit Schiefer (5.8:1) */
.btn {
  display: inline-block; padding: 0.7em 1.4em; border-radius: var(--radius-klein);
  font: 600 1rem var(--schrift); text-decoration: none; cursor: pointer; border: 2px solid transparent;
  background: var(--farbe-primaer); color: var(--liroba-weiss);
}
.btn:hover { background: var(--farbe-primaer-hover); color: var(--liroba-weiss); }
.btn-sekundaer { background: var(--liroba-mint); color: var(--liroba-schiefer); }
.btn-sekundaer:hover { background: #95D7B8; color: var(--liroba-schiefer); }
.btn-kontur { background: transparent; color: var(--farbe-primaer); border-color: currentColor; }
.btn-kontur:hover { background: var(--liroba-petrol-10); }

.karte { background: var(--farbe-hintergrund); border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schatten); }
.hinweis { background: var(--liroba-mint-25); border-left: 4px solid var(--liroba-mint); border-radius: var(--radius-klein); padding: 0.75rem 1rem; }

input, select, textarea {
  font: inherit; color: var(--farbe-text); background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-klein); padding: 0.6em 0.8em;
}
input:focus, select:focus, textarea:focus { border-color: var(--farbe-primaer); outline: none; box-shadow: 0 0 0 3px var(--liroba-mint-25); }