/* ══════════════════════════════════════════════════════════════════════════
   Design-Grundlage — Masse, Farben, Bausteine.
   Masse von nxt.engineering, Farben aus dem Stylesheet von huggingface.co
   (Tailwind-gray, oklch nach hex umgerechnet). Beides 17.10.2026 gemessen.
   Nur Werte, keine fremden Texte oder Bilder.

   Einbinden:
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/base.css">
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Farben ─────────────────────────────────────────────────────────── */
  --text-primary:   #101828;
  --text-secondary: #4a5565;
  --text-muted:     #6a7282;

  --brand:          #1e2939;
  --accent:         #101828;
  --accent-hover:   #1e2939;
  --link-hover:     #364153;

  --border:         #e5e7eb;
  --surface:        #ffffff;
  --surface-1:      #f9fafb;
  --surface-2:      #f3f4f6;
  --inverted:       #0b0f19;

  /* ── Schrift ────────────────────────────────────────────────────────── */
  --font-sans: "Roboto","Roboto Fallback",ui-sans-serif,system-ui,sans-serif;
  --font-mono: "Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-body:  17px;
  --text-lead:  20px;
  --leading:    1.65;

  /* ── Mass ───────────────────────────────────────────────────────────── */
  --unit:       .25rem;              /* 4px — jeder Abstand ist ein Vielfaches */
  --section-y:  calc(var(--unit) * 24);  /* 96px */
  --page:      980px;
  --gutter:     24px;
  --measure:   980px;

  --r-btn:      4px;
  --r-box:      8px;
}

/* ══ Grundlagen ═════════════════════════════════════════════════════════ */
*{ box-sizing:border-box; }

/* Scrollleiste immer einrechnen, sonst springt die Seite beim Wechseln */
html{ scrollbar-gutter:stable; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading);
  color:var(--text-primary);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:inherit; }

h1{ font-size:clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
    line-height:1.08; font-weight:700; letter-spacing:-.02em;
    margin:0 0 calc(var(--unit) * 8); }

h2{ font-size:clamp(2rem, 1.625rem + 1.25vw, 2.75rem);
    line-height:1.15; font-weight:700; letter-spacing:-.015em;
    margin:0 0 calc(var(--unit) * 6); }

h3{ font-size:clamp(1.5rem, 1.425rem + .25vw, 1.75rem);
    line-height:1.375; font-weight:700; color:var(--brand);
    margin:0 0 calc(var(--unit) * 3); }

h4{ font-size:1.125rem; line-height:1.4; font-weight:700;
    margin:0 0 calc(var(--unit) * 2); }

p{ margin:0 0 calc(var(--unit) * 5); max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--brand); text-decoration:none; font-weight:500; }
a:hover{ color:var(--link-hover); }

code,kbd,samp{ font-family:var(--font-mono); font-size:.9em; }

hr{ border:0; border-top:1px solid var(--border); margin:calc(var(--unit) * 12) 0; }

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

/* ══ Seitenaufbau ═══════════════════════════════════════════════════════ */
.wrap{ max-width:var(--page); margin:0 auto; padding:0 var(--gutter);


}

.section{ padding:var(--section-y) 0; }
.section--tint{ background:var(--surface-1); }
.section--brand{ background:var(--surface-2); }
.section--dark{ background:var(--inverted); color:#fff; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:#c8cdd2; }

@media (max-width:760px){
  :root{ --section-y:calc(var(--unit) * 14); }   /* 56px */
}

/* ══ Kickerzeile ════════════════════════════════════════════════════════ */
.kicker{
  display:inline-block;
  font-family:var(--font-mono); font-size:14px; font-weight:400;
  color:var(--brand); background:var(--surface-2);
  padding:6px 12px; border-radius:var(--r-btn);
  margin:0 0 calc(var(--unit) * 5);
}

/* ══ Vorspann ═══════════════════════════════════════════════════════════ */
.lead{ font-size:var(--text-lead); line-height:1.55;
       color:var(--text-secondary); max-width:var(--measure); }

/* ══ Zwei Spalten: Text und Fläche ══════════════════════════════════════ */
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px);
      gap:calc(var(--unit) * 16); align-items:start; }
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }

.pic{ background:var(--surface-2); border-radius:var(--r-box);
      aspect-ratio:16/10; display:flex; align-items:center;
      justify-content:center; overflow:hidden; }
.pic img{ width:100%; height:100%; object-fit:cover; }

/* ══ Raster ═════════════════════════════════════════════════════════════ */
.grid{ display:grid; gap:calc(var(--unit) * 6); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* ══ Karte ══════════════════════════════════════════════════════════════ */
.card{ background:var(--surface); border:1px solid var(--border);
       border-radius:var(--r-box); padding:calc(var(--unit) * 6);
       transition:border-color .15s, box-shadow .2s; }
.card:hover{ border-color:var(--brand); }
.card h3,.card h4{ margin-top:0; }

/* ══ Knopf ══════════════════════════════════════════════════════════════ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 24px; border-radius:var(--r-btn);
      font-family:inherit; font-size:16px; font-weight:500;
      background:var(--accent); color:#fff; border:1px solid var(--accent);
      cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }

.btn--ghost{ background:transparent; color:var(--brand); border-color:var(--border); }
.btn--ghost:hover{ background:var(--surface-1); color:var(--brand); border-color:var(--border); }

.btn--dark{ background:var(--inverted); border-color:var(--inverted); color:#fff; }
.btn--dark:hover{ background:#000; border-color:#000; color:#fff; }

/* ══ Weiterführender Link ═══════════════════════════════════════════════ */
.more{ display:inline-flex; align-items:center; gap:6px; font-weight:500;
       margin-top:calc(var(--unit) * 6); }
.more::after{ content:"›"; font-size:19px; line-height:1; }

/* ══ Kopfleiste ═════════════════════════════════════════════════════════ */
.top{ border-bottom:1px solid var(--border); background:var(--surface); }
.top-in{ max-width:var(--page); margin:0 auto; padding:0 var(--gutter);
         height:76px; display:flex; align-items:center; gap:32px; }
.brand{ font-weight:700; font-size:21px; color:var(--text-primary);
        display:flex; align-items:center; gap:8px; text-decoration:none; }
.top nav{ display:flex; gap:28px; margin-left:auto; }
.top nav a{ color:var(--text-primary); font-weight:400; font-size:16px; }
.top nav a:hover{ color:var(--link-hover); }

/* ══ Eingabefeld ════════════════════════════════════════════════════════ */
.field{ display:grid; gap:6px; margin-bottom:calc(var(--unit) * 4); }
.field > span{ font-size:15px; font-weight:500; color:var(--text-primary); }
.field input, .field textarea, .field select{
  width:100%; font:400 16px var(--font-sans); color:var(--text-primary);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-btn); padding:12px 14px; }
.field input:hover, .field textarea:hover{ border-color:var(--text-muted); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(16,24,40,.10); }
.field ::placeholder{ color:var(--text-muted); }

/* ══ Tabelle ════════════════════════════════════════════════════════════ */
.table{ border-collapse:collapse; width:100%; font-size:15px; }
.table th,.table td{ text-align:left; padding:10px 14px;
                     border-bottom:1px solid var(--border); vertical-align:top; }
.table th{ font-weight:500; color:var(--text-muted); }

/* ══ Kleinkram ══════════════════════════════════════════════════════════ */
.muted{ color:var(--text-muted); }
.secondary{ color:var(--text-secondary); }
.mono{ font-family:var(--font-mono); }
.center{ text-align:center; }
.stack > * + *{ margin-top:calc(var(--unit) * 4); }

/* ══ Handy ══════════════════════════════════════════════════════════════
   Was sonst seitlich aus dem Bild laeuft. Kein overflow:hidden auf html
   oder body — das schaltet position:sticky im ganzen Dokument ab. */

/* Tabellen scrollen in sich selbst, nicht die Seite */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
               margin:0 0 calc(var(--unit) * 5); }
.table-scroll .table{ min-width:560px; }

/* Lange Wörter, URLs und Code brechen um statt zu schieben */
p,li,td,th,h1,h2,h3,h4{ overflow-wrap:anywhere; }
pre{ overflow-x:auto; }

/* Kopfleiste: Navigation klappt unter die Zeile */
@media (max-width:760px){
  .top-in{ height:auto; min-height:64px; flex-wrap:wrap;
           gap:14px; padding-top:14px; padding-bottom:14px; }
  .top nav{ margin-left:0; width:100%; gap:18px; flex-wrap:wrap;
            font-size:15px; }
  .brand{ font-size:19px; }
}

/* Knöpfe werden nicht schmaler als der Daumen */
@media (max-width:600px){
  .btn{ min-height:46px; }
  .two{ gap:calc(var(--unit) * 8); }
  .card{ padding:calc(var(--unit) * 5); }
}

/* ══ Schwebende Kopfleiste ══════════════════════════════════════════════
   Werte aus dem Stylesheet der Referenz: Hoehe 56px, Radius 16px,
   halbtransparentes Weiss mit Rueckblende, Schatten nach unten.
   Markup siehe index.html, Abschnitt „Kopfleiste". */

.navbar-slot{ position:sticky; top:14px; z-index:50;
              padding:0 var(--gutter); pointer-events:none; }

.navbar{
  pointer-events:auto;
  max-width:var(--page); margin:0 auto;
  height:56px; padding:0 0px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
}
@media (min-width:1024px){ .navbar{ padding:0 24px; } }

.navbar-brand{ display:inline-flex; align-items:center; gap:8px;
               font-weight:700; font-size:20px; letter-spacing:-.02em;
               color:var(--text-primary); text-decoration:none; }

.navbar-nav{ display:flex; align-items:center; gap:4px; }
@media (max-width:1023px){ .navbar-nav{ display:none; } }

.navbar-nav a{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 12px; border-radius:8px;
  font-size:15.5px; font-weight:400; color:var(--text-primary);
  text-decoration:none; white-space:nowrap;
}
.navbar-nav a:hover{ color:var(--brand); background:rgba(255,255,255,.6); }

/* Punkt mit Untermenue: Pfeil nach unten */
.navbar-nav a.has-sub::after{
  content:""; width:7px; height:7px; margin-left:1px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}

/* Letzter Punkt: orange unterstrichen, traegt die Hauptaktion */
.navbar-nav a.is-cta{
  font-weight:500;
  box-shadow:inset 0 -2px 0 0 var(--accent);
  border-radius:0; padding-left:4px; padding-right:4px; margin-left:12px;
}
.navbar-nav a.is-cta:hover{ background:transparent; color:var(--accent); }

/* Burger: nur unter 1024px */
.navbar-burger{
  display:none; width:40px; height:40px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--text-secondary);
}
.navbar-burger:hover{ color:var(--text-primary); }
.navbar-burger svg{ width:26px; height:26px; }
@media (max-width:1023px){ .navbar-burger{ display:inline-flex; } }

/* ══ Social-Symbole in der Kopfleiste ═══════════════════════════════════ */
.icons{ display:flex; align-items:center; gap:calc(var(--unit) * 4); }
.icons a{ display:inline-flex; align-items:center; justify-content:center;
          padding:calc(var(--unit) * 2); border-radius:8px;
          font-size:17px; line-height:1; color:var(--text-primary); text-decoration:none; }
.icons a:hover{ color:var(--brand); background:rgba(255,255,255,.6); }
.navbar-nav .icons{ margin-left:calc(var(--unit) * 6); }
@media (max-width:1023px){ .icons{ display:none; } }

/* Kopfleiste am Handy ueber die volle Breite, buendig oben */
@media (max-width:1023px){
  .navbar-slot{ top:0; padding:0; }
  .navbar{ max-width:none; border-radius:0;
           height:auto; min-height:56px;
           padding:calc(var(--unit) * 3);
           position:relative; gap:calc(var(--unit) * 3); }

  /* Titel darf umbrechen, Knopf bleibt daneben */
  .navbar-brand{ min-width:0; display:block; line-height:1.25; }
  .navbar-burger{ flex:none; }

  /* Aufgeklappte Navigation */
  .navbar-nav.is-open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; left:0; right:0; top:100%;
    gap:0; padding:calc(var(--unit) * 2) calc(var(--unit) * 3) calc(var(--unit) * 4);
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:0 12px 24px rgba(13,27,42,.08);
  }
  .navbar-nav.is-open > a{ align-self:flex-start; padding:calc(var(--unit) * 3); border-radius:8px; margin-left:0; }
  .navbar-nav.is-open > a.is-cta{ box-shadow:none; }
  .navbar-nav.is-open .icons{
    display:flex; gap:calc(var(--unit) * 2);
    margin-left:0; margin-top:calc(var(--unit) * 2); padding-top:calc(var(--unit) * 3);
    border-top:1px solid var(--border);
  }
}

/* ══ Externer Link: Kaestchen mit Pfeil ═════════════════════════════════ */
.ext::after{ content:"\f08e"; font-family:"Font Awesome 6 Free"; font-weight:900;
             font-size:.72em; margin-left:var(--unit); vertical-align:baseline; }

/* ══ Bild mit Beschriftung ══════════════════════════════════════════════ */
.fig{ margin:0; }
.media{ margin-top:calc(var(--unit) * 12); }
.fig img{ display:block; width:100%; border-radius:var(--r-box); }
.fig figcaption{ margin-top:calc(var(--unit) * 2);
                 font-size:14px; line-height:1.5; color:var(--text-muted); }

/* ══ Bilder im Raster: gleiches Format ══════════════════════════════════ */
.grid .fig img{ aspect-ratio:3 / 2; object-fit:cover; }

/* ══ Bild anklickbar ════════════════════════════════════════════════════ */
.fig-btn{ display:block; width:100%; padding:0; border:0; background:transparent;
          cursor:zoom-in; border-radius:var(--r-box); overflow:hidden;
          transition:opacity .15s; }
.fig-btn:hover{ opacity:.92; }

/* ══ Grossansicht ═══════════════════════════════════════════════════════ */
.lightbox{ position:fixed; inset:0; z-index:100; display:none;
           flex-direction:column; align-items:center; justify-content:center;
           gap:calc(var(--unit) * 4); padding:calc(var(--unit) * 6);
           background:rgba(255,255,255,.94);
           -webkit-backdrop-filter:blur(12px) saturate(150%);
           backdrop-filter:blur(12px) saturate(150%);
           cursor:zoom-out; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:94vw; max-height:84vh; object-fit:contain;
               border-radius:var(--r-box);
               box-shadow:0 20px 60px rgba(13,27,42,.18); }
.lightbox figcaption{ font-size:14px; line-height:1.5; color:var(--text-muted);
                      text-align:center; max-width:var(--measure); }
.lightbox-close{ position:absolute; top:calc(var(--unit) * 4); right:calc(var(--unit) * 5);
                 width:40px; height:40px; padding:0; border:1px solid var(--border);
                 border-radius:var(--r-box); background:var(--surface);
                 font-size:22px; line-height:1; color:var(--text-primary); cursor:pointer; }
.lightbox-close:hover{ border-color:var(--brand); color:var(--brand); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%);
               width:40px; height:40px; padding:0; border:1px solid var(--border);
               border-radius:var(--r-box); background:var(--surface);
               font-size:18px; line-height:1; color:var(--text-primary); cursor:pointer; }
.lightbox-nav:hover{ border-color:var(--brand); color:var(--brand); }
.lightbox-nav.is-prev{ left:calc(var(--unit) * 5); }
.lightbox-nav.is-next{ right:calc(var(--unit) * 5); }
.lightbox-nav[hidden]{ display:none; }

/* ══ Cookie-Hinweis ═════════════════════════════════════════════════════
   Schwarze Flaeche, weisse Schrift, runder Haken rechts. Ohne Rahmen. */
.ck{
  position:fixed; z-index:90;
  right:var(--gutter); bottom:var(--gutter);
  max-width:660px;
  display:flex; align-items:center;
  gap:calc(var(--unit) * 8);
  padding:calc(var(--unit) * 8) calc(var(--unit) * 9);
  background:#000; color:#fff; border:0; border-radius:var(--r-box);
  box-shadow:0 16px 40px rgba(13,27,42,.24);
  opacity:0; transform:translateY(calc(var(--unit) * 2));
  transition:opacity .2s ease, transform .2s ease;
}
.ck.is-in{ opacity:1; transform:none; }
.ck-body{ min-width:0; }
.ck-title{ margin:0 0 calc(var(--unit) * 3);
           font-size:20px; line-height:1.3; font-weight:700; color:#fff; }
.ck-text{ margin:0; font-size:14px; line-height:1.7; color:rgba(255,255,255,.72); }
.ck-text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.ck-ok{
  flex:none; width:64px; height:64px; padding:0;
  border:1px solid rgba(255,255,255,.45); border-radius:50%;
  background:transparent; color:#fff; font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .15s, color .15s, border-color .15s;
}
.ck-ok:hover{ background:#fff; color:#000; border-color:#fff; }

@media (max-width:600px){
  .ck{ left:0; right:0; bottom:0; max-width:none;
       border-radius:var(--r-box) var(--r-box) 0 0;
       gap:calc(var(--unit) * 5);
       padding:calc(var(--unit) * 6); }
  .ck-title{ font-size:18px; }
  .ck-ok{ width:52px; height:52px; font-size:19px; }
}

/* Fusszeile ohne Trennlinie (schlaegt footer.css, das spaeter laedt) */
.ft.ft--plain{ border-top:0; }