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

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

.gf[data-design="1"] {
  --f-head: "Archivo", ui-sans-serif, sans-serif;
  --f-text: "Archivo", 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;
  --dehnung-head: 112%;
  --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: color-mix(in oklab, var(--surface) 72%, transparent);
  --c-karte-2: var(--surface-elevated);
  --raster: color-mix(in oklab, var(--text) 5%, transparent);
  --raster-haupt: color-mix(in oklab, var(--text) 8.5%, transparent);
  --kurve: cubic-bezier(0.3, 0.6, 0.1, 1);
  background-image:
    linear-gradient(var(--raster-haupt) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-haupt) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
.gf[data-design="1"] .gf-display, .gf[data-design="1"] .gf-h2 { font-variation-settings: "wdth" 112; }

/* 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: 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); background-image:
  linear-gradient(color-mix(in oklab, var(--text-inverse) 6%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in oklab, var(--text-inverse) 6%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; }

/* 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: 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 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: 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 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 { background-image:
  linear-gradient(color-mix(in oklab, var(--text-inverse) 5%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in oklab, var(--text-inverse) 5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; }
.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 color-mix(in oklab, var(--text-inverse) 40%, transparent);
}
.gf[data-design="1"] .gf-schriftfeld div { padding: 10px 14px; 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: 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 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; }
}