/* ==========================================================================
   Design 01 · Schaltplan · Technische Praezision

   Die Seite als technische Zeichnung: Haarlinien, Registermarken,
   Beschriftung in Monospace, Symbole aus Schaltzeichen. Farbe fast nur als
   Tinte; der Akzent markiert aktive Knoten.

   Gegenueber dem Lab entfaellt das karierte Raster (Entscheidung aus dem
   Termin). Schaltflaechen bleiben eckig.
   ========================================================================== */

.gf[data-design="1"] {
  --f-head: "Barlow", ui-sans-serif, sans-serif;
  --f-text: "Barlow", ui-sans-serif, sans-serif;
  --f-label: "IBM Plex Mono", ui-monospace, monospace;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-zahl: "IBM Plex Mono", ui-monospace, monospace;
  --w-display: 560; --w-h2: 540; --w-h3: 580; --w-h4: 600; --w-label: 500; --w-zahl: 400;
  --fs-display: clamp(38px, 4.9cqi, 72px); --lh-display: 0.98; --ls-display: -0.035em;
  --fs-h2: clamp(30px, 3.6cqi, 54px); --lh-h2: 1.02; --ls-h2: -0.03em;
  --fs-label: 11px; --ls-label: 0.08em;
  --fs-zahl: clamp(40px, 5.2cqi, 78px);
  --btn-font: "IBM Plex Mono", monospace; --btn-fs: 12.5px; --btn-tt: uppercase; --btn-ls: 0.06em; --btn-w: 500; --btn-h: 48px; --btn-px: 20px;
  --ikon-strich: 1.25; --ikon-ende: square; --ikon-ecke: miter; --ikon-gr: 22px;
  --ikonfeld-gr: 42px; --ikonfeld-rand: 1px solid var(--c-linie); --ikonfeld-farbe: var(--text);
  --c-alt: var(--surface); --c-alt: color-mix(in oklab, var(--surface) 72%, transparent);
  --c-karte-2: var(--surface-elevated);
  --kurve: cubic-bezier(0.3, 0.6, 0.1, 1);
  /* Im Termin entschieden: kein kariertes Millimeterpapier. Die technische
     Haltung traegt ueber Haarlinien, Registermarken und Monospace. */
}

/* Registermarken: an Rahmen, Schaltflaechen und Karten */
.gf[data-design="1"] .gf-hero__visual::before,
.gf[data-design="1"] .gf-karte::after,
.gf[data-design="1"] .gf-btn--primaer::before,
.gf[data-design="1"] .gf-datenblatt::before {
  content: ""; position: absolute; pointer-events: none; z-index: 3;
  --m: var(--text); --l: 10px;
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 1px var(--l) no-repeat;
}
.gf[data-design="1"] .gf-hero__visual::before { inset: -9px; }
.gf[data-design="1"] .gf-datenblatt { position: relative; overflow: visible; }
.gf[data-design="1"] .gf-datenblatt::before { inset: -7px; --l: 8px; }

/* Kopf */
.gf[data-design="1"] .gf-kopf { background: var(--bg); border-bottom: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-kopf__innen { min-height: 68px; }
.gf[data-design="1"] .gf-kopf__logo { width: 156px; }
.gf[data-design="1"] .gf-kopf__link { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.gf[data-design="1"] .gf-kopf__nr { display: inline; color: var(--text-2); margin-right: 6px; }
.gf[data-design="1"] .gf-kopf__marker { height: 1px; bottom: -1px; background: var(--text); }

/* Schaltflaechen */
.gf[data-design="1"] .gf-btn { overflow: visible; }
.gf[data-design="1"] .gf-btn--primaer::before { inset: -6px; opacity: 0; transition: opacity 240ms, inset 360ms var(--kurve); --l: 7px; }
.gf[data-design="1"] .gf-btn--primaer:hover::before, .gf[data-design="1"] .gf-btn--primaer.ist-hover::before { opacity: 1; inset: -8px; }
.gf[data-design="1"] .gf-btn--sekundaer { --btn-rand: var(--text); }
.gf[data-design="1"] .gf-btn--sekundaer:hover { --btn-bg: var(--text); --btn-fg: var(--bg); }
.gf[data-design="1"] .gf-btn--text { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.gf[data-design="1"] .on-dark .gf-btn--primaer::before { --m: var(--text-inverse); }

/* Typo-Details */
.gf[data-design="1"] .gf-eyebrow { color: var(--text-2); }
.gf[data-design="1"] .gf-eyebrow::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--text); transform: rotate(45deg); flex: none; }
.gf[data-design="1"] .on-dark .gf-eyebrow { color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 70%, transparent); }
.gf[data-design="1"] .on-dark .gf-eyebrow::before { border-color: var(--accent-light); }
.gf[data-design="1"] .gf-kapitel { display: inline; font-family: var(--f-mono); color: var(--text); }
.gf[data-design="1"] .gf-kapitel::after { content: " /"; color: var(--text-2); }
.gf[data-design="1"] .gf-lead { color: var(--text); opacity: 0.78; }
.gf[data-design="1"] .gf-zitat { font-family: var(--f-mono); font-size: 15px; line-height: 1.6; border-left: 1px solid var(--text); padding-left: 18px; color: var(--text-2); }
.gf[data-design="1"] .gf-zitat::before { content: "Anm. "; color: var(--text); }

/* Hero */
.gf[data-design="1"] .gf-hero { border-bottom: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-hero__grund .fx { opacity: 0.9; }
.gf[data-design="1"] .gf-hero__visual { border: 1px solid var(--c-linie); background: var(--c-karte-2); }
.gf[data-design="1"] .gf-hero__fx { inset: 0; }
.gf[data-design="1"] .gf-hero__foto { filter: grayscale(1) contrast(1.05) brightness(1.04); }
.gf[data-design="1"] .gf-hero__legende { bottom: -34px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.gf[data-design="1"] .gf-hero__themen { border-top: 1px solid var(--text); }
.gf[data-design="1"] .gf-hero__themen li { border-left: 1px solid var(--c-linie); padding: 16px 14px 14px; font-size: 14px; flex-wrap: wrap; }
.gf[data-design="1"] .gf-hero__themen li:first-child { border-left: 0; padding-left: 0; }
.gf[data-design="1"] .gf-hero__themen .gf-ikonfeld { --ikonfeld-rand: 0; --ikonfeld-gr: 26px; }
.gf[data-design="1"] .gf-hero__themen-nr { display: block; margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--text-2); }

/* Abschnitte */
.gf[data-design="1"] .gf-sec { border-bottom: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-sec__kopf { padding-top: 22px; border-top: 1px solid var(--text); }
.gf[data-design="1"] .gf-sec--dunkel { background-color: var(--inverse); }

/* Bild mit Messmarken */
.gf[data-design="1"] .gf-bild__rahmen { border: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-bild__rahmen img { filter: grayscale(1) contrast(1.06); }
.gf[data-design="1"] .gf-bild figcaption { font-family: var(--f-mono); font-size: 11.5px; }
.gf[data-design="1"] .gf-perspektive__nr { display: block; position: absolute; right: 0; top: 22px; font-family: var(--f-mono); font-size: 11px; color: var(--text-2); }
.gf[data-design="1"] .gf-perspektive { position: relative; }

/* Karten: Rasterzellen mit gemeinsamen Linien */
.gf[data-design="1"] .gf-karten { gap: 0; border-top: 1px solid var(--c-linie); border-left: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-karte { border: 0; border-right: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); padding: 22px 22px 22px; background: var(--bg); background: color-mix(in oklab, var(--bg) 70%, transparent); }
.gf[data-design="1"] .gf-karte::after { inset: 8px; opacity: 0; --l: 8px; transition: opacity 240ms, inset 380ms var(--kurve); }
.gf[data-design="1"] .gf-karte:hover::after, .gf[data-design="1"] .gf-karte:focus-visible::after { opacity: 1; inset: 12px; }
.gf[data-design="1"] .gf-karte:hover { background: var(--c-karte-2); }
.gf[data-design="1"] .gf-karte__id { color: var(--text); }
.gf[data-design="1"] .gf-karte__titel { font-size: clamp(18px, 1.5cqi, 21px); font-weight: 580; }
.gf[data-design="1"] .gf-karte__fuss { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--text); }
.gf[data-design="1"][data-karten="a"] .gf-karte { border: 0; border-right: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); }
.gf[data-design="1"][data-karten="a"] .gf-karte:hover { border-color: var(--c-linie); }
.gf[data-design="1"][data-karten="b"] .gf-karten { gap: 1px; background: var(--c-linie); border: 1px solid var(--c-linie); }
.gf[data-design="1"][data-karten="b"] .gf-karte { border: 0; background: var(--c-karte-2); box-shadow: none; }
.gf[data-design="1"][data-karten="b"] .gf-karte::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 32px; background: var(--primary); transition: width 500ms var(--kurve); }
.gf[data-design="1"][data-karten="b"] .gf-karte:hover::before { width: 100%; }
.gf[data-design="1"][data-karten="b"] .gf-karte:hover { transform: none; }
.gf[data-design="1"][data-karten="c"] .gf-karte { background: var(--c-karte-2); border: 0; border-right: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); padding-top: 0; }
.gf[data-design="1"][data-karten="c"] .gf-karte__medien { margin: 0 -22px; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--c-linie); border-radius: 0; }
.gf[data-design="1"][data-karten="c"] .gf-karte__medien img { filter: grayscale(1) contrast(1.05); }
.gf[data-design="1"][data-karten="c"] .gf-karte__kopf { order: -1; margin: 0 -22px; padding: 10px 22px; background: var(--inverse); color: var(--text-inverse); min-height: 0; }
.gf[data-design="1"][data-karten="c"] .gf-karte__id { color: var(--accent-light); }
.gf[data-design="1"][data-karten="c"] .gf-karte__kopf .gf-ikonfeld { --ikonfeld-rand: 0; --ikonfeld-farbe: var(--text-inverse); --ikonfeld-gr: 26px; --ikon-gr: 18px; }

/* Prozess: Leitung mit Knoten, Strom fliesst im erreichten Teil */
.gf[data-design="1"] .gf-prozess__bahn { background: var(--c-linie); }
.gf[data-design="1"] .gf-prozess__fuellung {
  background: repeating-linear-gradient(90deg, var(--text) 0 7px, transparent 7px 11px);
  background-size: 22px 1px;
  animation: d1-fluss 900ms linear infinite;
}
@keyframes d1-fluss { to { background-position: 22px 0; } }
.gf[data-design="1"] .gf-prozess__knoten { border-radius: 0; transform: rotate(45deg); width: 11px; height: 11px; border-color: var(--text); background: var(--bg); }
.gf[data-design="1"] .gf-prozess__schritt.ist-erreicht .gf-prozess__knoten { background: var(--text); border-color: var(--text); }
.gf[data-design="1"] .gf-prozess__schritt.ist-jetzt .gf-prozess__knoten { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 22%, transparent); }
.gf[data-design="1"] .gf-prozess__nr { color: var(--text); }
.gf[data-design="1"] .gf-prozess--mini .gf-prozess__schritt { border-top-width: 1px; }

/* Reiter */
.gf[data-design="1"] .gf-tabs__liste { border-top: 1px solid var(--text); border-bottom: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-tab { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border-right: 1px solid var(--c-linie); padding-left: 16px; }
.gf[data-design="1"] .gf-tab[aria-selected="true"] { background: var(--c-karte-2); }
.gf[data-design="1"] .gf-tab::after { top: -1px; bottom: auto; background: var(--accent); }
.gf[data-design="1"] .gf-tab .gf-ikonfeld { --ikonfeld-rand: 0; --ikonfeld-gr: 26px; }
.gf[data-design="1"] .gf-panel-fx { border: 1px solid var(--c-linie); }
.gf[data-design="1"] .gf-parameter li { font-size: 14.5px; }

/* Datenblatt und Kennzahlen */
.gf[data-design="1"] .gf-datenblatt { border-color: var(--text); }
.gf[data-design="1"] .gf-datenblatt__kopf { background: var(--c-karte-2); border-bottom-color: var(--text); color: var(--text); }
.gf[data-design="1"] .gf-tabelle thead th { font-family: var(--f-mono); font-weight: 500; }
.gf[data-design="1"] .gf-tabelle tbody th { font-weight: 560; }
.gf[data-design="1"] .gf-tabelle td { font-size: 14px; }
.gf[data-design="1"] .gf-kpis { border-top: 1px solid var(--text); }
.gf[data-design="1"] .gf-kpi { position: relative; padding-top: 34px; border-left: 1px solid var(--c-linie); padding-left: 18px; }
.gf[data-design="1"] .gf-kpi:first-child { border-left: 0; padding-left: 0; }
.gf[data-design="1"] .gf-kpi::before { content: ""; position: absolute; top: 14px; left: 18px; width: 64px; height: 7px; border-left: 1px solid var(--text-2); border-right: 1px solid var(--text-2); background: linear-gradient(var(--text-2), var(--text-2)) 0 50% / 100% 1px no-repeat; }
.gf[data-design="1"] .gf-kpi:first-child::before { left: 0; }
.gf[data-design="1"] .gf-kpi__wert { color: var(--text); letter-spacing: -0.04em; }
.gf[data-design="1"] .gf-kpi__label { font-family: var(--f-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

/* Finanzierung */
.gf[data-design="1"] .gf-struktur__ebene { border-color: var(--text); background: var(--bg); background: color-mix(in oklab, var(--bg) 88%, transparent); font-family: var(--f-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.gf[data-design="1"] .gf-struktur__ebene:nth-child(1) { background: var(--text); border-color: var(--text); color: var(--bg); }
.gf[data-design="1"] .gf-modul--hinweis p { font-family: var(--f-mono); font-size: 13px; color: var(--text); }

/* Formular */
.gf[data-design="1"] .gf-label { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.gf[data-design="1"] .gf-input { border-color: var(--text); background: var(--c-karte-2); }
.gf[data-design="1"] .gf-input:focus { box-shadow: 4px 4px 0 var(--primary); box-shadow: 4px 4px 0 color-mix(in oklab, var(--primary) 30%, transparent); }
.gf[data-design="1"] .gf-chip span { border-radius: 0; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.gf[data-design="1"] .gf-check__box { border-radius: 0; }
.gf[data-design="1"] .gf-badge { border-radius: 0; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid currentColor; }
.gf[data-design="1"] .gf-tag { border-radius: 0; font-family: var(--f-mono); font-size: 12px; }

/* Fuss mit Schriftfeld */

.gf[data-design="1"] .gf-fuss__titel { font-family: var(--f-mono); font-weight: 500; }
.gf[data-design="1"] .gf-schriftfeld {
  display: grid; grid-template-columns: 2fr 2fr 1fr 1.4fr 1fr; margin-top: 56px;
  border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 40%, transparent);
}
.gf[data-design="1"] .gf-schriftfeld div { padding: 10px 14px; border-left: 1px solid var(--text-inverse); border-left: 1px solid color-mix(in oklab, var(--text-inverse) 25%, transparent); display: grid; gap: 4px; }
.gf[data-design="1"] .gf-schriftfeld div:first-child { border-left: 0; }
.gf[data-design="1"] .gf-schriftfeld span { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
.gf[data-design="1"] .gf-schriftfeld b { font-family: var(--f-mono); font-weight: 500; font-size: 13px; }

@container gf (max-width: 960px) {
  .gf[data-design="1"] .gf-hero__themen li:nth-child(4) { border-left: 0; padding-left: 0; }
  .gf[data-design="1"] .gf-schriftfeld { grid-template-columns: 1fr 1fr; }
  .gf[data-design="1"] .gf-schriftfeld div { border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 25%, transparent); }
  .gf[data-design="1"] .gf-kpi:nth-child(3) { border-left: 0; padding-left: 0; }
  .gf[data-design="1"] .gf-kpi:nth-child(3)::before { left: 0; }
}

/* --------------------------------------------------------------------------
   Schriftwahl

   Barlow steht im Markenhandbuch und kommt aus dem Logo. Sie gilt fuer die
   ganze Seite; der Schalter, mit dem sich Archivo dagegen vergleichen liess,
   ist raus — die Entscheidung ist gefallen.

   Die Monospace bleibt IBM Plex Mono: zu ihr sagt das Handbuch nichts, und
   sie traegt Nummern und Marken, nicht die Stimme.

   Barlow laeuft eine Spur schmaler als Archivo. Damit die Zeilen nicht
   duenner wirken, bekommen die Ueberschriften etwas mehr Laufweite.
   -------------------------------------------------------------------------- */
.gf,
.seite,
body {
  --f-head: "Barlow", ui-sans-serif, sans-serif;
  --f-text: "Barlow", ui-sans-serif, sans-serif;
}
:root { --schrift-ausgleich: 0.004em; }
.gf-display,
.gf-h2,
.gf-h3 { letter-spacing: calc(-0.02em + var(--schrift-ausgleich)); }