/* ==========================================================================
   Design 03 · Tragwerk · Infrastruktur & Architektur

   Die Seite als Bauwerk: grosse Flaechen in Primary Dark, schwere
   Versal-Headlines aus der Schrift der Wortmarke (Montserrat), Module mit
   harten Kanten. Der Akzent erscheint als Traeger: ein 6 px Balken, der
   Struktur zeigt, nie als Flaeche.
   ========================================================================== */

.gf[data-design="3"] {
  --f-head: "Montserrat", ui-sans-serif, sans-serif;
  --f-text: "Work Sans", ui-sans-serif, sans-serif;
  --f-label: "Montserrat", ui-sans-serif, sans-serif;
  --f-mono: "Montserrat", ui-sans-serif, sans-serif;
  --f-zahl: "Montserrat", ui-sans-serif, sans-serif;
  --w-display: 800; --w-h2: 800; --w-h3: 700; --w-h4: 700; --w-label: 700; --w-zahl: 800;
  --tt-display: uppercase; --tt-h2: uppercase;
  --fs-display: clamp(30px, 3.7cqi, 54px); --lh-display: 0.96; --ls-display: -0.012em;
  --fs-h2: clamp(28px, 3.5cqi, 52px); --lh-h2: 0.98; --ls-h2: -0.008em;
  --fs-h3: clamp(20px, 1.9cqi, 26px);
  --fs-label: 11px; --ls-label: 0.18em;
  --fs-zahl: clamp(52px, 7cqi, 108px);
  --btn-font: "Montserrat", sans-serif; --btn-tt: uppercase; --btn-ls: 0.1em; --btn-fs: 12px; --btn-w: 700; --btn-h: 54px; --btn-px: 26px;
  --ikon-strich: 2; --ikon-ende: square; --ikon-ecke: miter; --ikon-fuellung: currentColor; --ikon-gr: 24px;
  --ikonfeld-gr: 50px; --ikonfeld-bg: var(--primary-dark); --ikonfeld-farbe: var(--text-inverse);
  --linie-breite: 2px;
  --c-linie: color-mix(in oklab, var(--primary-dark) 22%, transparent);
  --traeger: 6px;
  --gap: clamp(14px, 1.6cqi, 24px);
  --kurve: cubic-bezier(0.7, 0, 0.2, 1);
}
.gf[data-design="3"] .gf-display, .gf[data-design="3"] .gf-h2 { hyphens: manual; }

/* Traeger vor jeder Auszeichnung */
.gf[data-design="3"] .gf-eyebrow { color: var(--text); }
.gf[data-design="3"] .gf-eyebrow::before { content: ""; width: 32px; height: var(--traeger); background: var(--accent); flex: none; }
.gf[data-design="3"] .on-dark .gf-eyebrow { color: var(--text-inverse); }
.gf[data-design="3"] .on-dark .gf-eyebrow::before { background: var(--accent-light); }
.gf[data-design="3"] .gf-kapitel { display: inline; order: 3; margin-left: auto; font-size: 11px; color: var(--text-2); }

/* Kopf als dunkler Balken */
.gf[data-design="3"] .gf-kopf { background: var(--primary-dark); border-bottom: 0; color: var(--text-inverse); }
.gf[data-design="3"] .gf-kopf__innen { min-height: 78px; }
.gf[data-design="3"] .gf-kopf__link { color: var(--text-inverse); font-family: var(--f-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gf[data-design="3"] .gf-kopf__link:hover { color: var(--accent-light); }
.gf[data-design="3"] .gf-kopf__marker { height: var(--traeger); bottom: -24px; background: var(--accent-light); }
.gf[data-design="3"] .gf-kopf__menue { color: var(--text-inverse); border-color: color-mix(in oklab, var(--text-inverse) 30%, transparent); }

/* Schaltflaechen: Block mit Traeger, der beim Hover die Flaeche fuellt */
.gf[data-design="3"] .gf-btn--primaer {
  --btn-bg: var(--primary-dark); --btn-rand: var(--primary-dark);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: var(--traeger) 100%; background-repeat: no-repeat; background-position: 0 0;
  padding-left: calc(var(--btn-px) + 6px);
  transition: background-size 500ms var(--kurve), color 300ms, background-color 300ms;
}
.gf[data-design="3"] .gf-btn--primaer:hover, .gf[data-design="3"] .gf-btn--primaer.ist-hover { --btn-bg: var(--primary-dark); background-size: 100% 100%; --btn-fg: #fff; }
.gf[data-design="3"] .gf-btn--sekundaer { --btn-rand: var(--primary-dark); }
.gf[data-design="3"] .gf-btn--sekundaer:hover { --btn-bg: var(--primary-dark); --btn-fg: #fff; }
.gf[data-design="3"] .on-dark .gf-btn--primaer { --btn-bg: var(--text-inverse); --btn-fg: var(--primary-dark); --btn-rand: var(--text-inverse); background-image: linear-gradient(var(--accent-light), var(--accent-light)); }
.gf[data-design="3"] .on-dark .gf-btn--primaer:hover { --btn-fg: var(--primary-dark); }
.gf[data-design="3"] .on-dark .gf-btn--sekundaer { --btn-rand: var(--text-inverse); }
.gf[data-design="3"] .on-dark .gf-btn--sekundaer:hover { --btn-bg: var(--text-inverse); --btn-fg: var(--primary-dark); }
.gf[data-design="3"] .gf-btn--text { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* Hero A: dunkle Tragflaeche links, Baukoerper rechts */
.gf[data-design="3"] .gf-hero { padding-block: 0; }
.gf[data-design="3"][data-hero="a"] .gf-hero {
  background: linear-gradient(90deg, var(--primary-dark) 0 50%, transparent 50%);
}
.gf[data-design="3"][data-hero="a"] .gf-hero__layout { min-height: min(84vh, 820px); align-items: stretch; }
.gf[data-design="3"][data-hero="a"] .gf-hero__text { grid-column: 1 / span 6; align-content: center; padding: 80px 40px 80px 0; }
.gf[data-design="3"][data-hero="a"] .gf-hero__visual { grid-column: 7 / -1; aspect-ratio: auto; min-height: 460px; margin: 40px 0 40px 20px; }
.gf[data-design="3"] .gf-hero__foto { filter: grayscale(1) contrast(1.12); mix-blend-mode: multiply; }
.gf[data-design="3"][data-visual="foto"] .gf-hero__visual { background: var(--primary); }
.gf[data-design="3"] .gf-hero__legende { font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; bottom: -26px; }
.gf[data-design="3"] .gf-hero__themen { margin-top: 0; border-top: 0; background: var(--c-alt); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.gf[data-design="3"] .gf-hero .gf-wrap:last-child { max-width: none; padding: 0; }
.gf[data-design="3"] .gf-hero__themen li {
  flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px 26px;
  background: var(--c-seite); font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-top: var(--traeger) solid var(--primary-dark);
}
.gf[data-design="3"] .gf-hero__themen li:first-child { border-top-color: var(--accent); }
.gf[data-design="3"] .gf-hero__themen .gf-ikonfeld { --ikonfeld-gr: 44px; --ikon-gr: 22px; }
.gf[data-design="3"][data-hero="b"] .gf-display { font-size: calc(var(--fs-display) * 1.08); }
.gf[data-design="3"][data-hero="b"] .gf-hero__foto { mix-blend-mode: normal; filter: grayscale(1) contrast(1.2) brightness(0.8); }
.gf[data-design="3"][data-hero="b"] .gf-hero__themen li { background: transparent; border-top-color: color-mix(in oklab, var(--text-inverse) 25%, transparent); color: var(--text-inverse); }
.gf[data-design="3"][data-hero="b"] .gf-hero__themen { background: transparent; }
.gf[data-design="3"][data-hero="c"] .gf-hero { padding-top: 70px; }
.gf[data-design="3"][data-hero="c"] .gf-display { font-size: calc(var(--fs-display) * 1.35); max-width: 16ch; }
.gf[data-design="3"][data-hero="c"] .gf-hero__visual { background: var(--primary-dark); }
.gf[data-design="3"][data-hero="c"] .gf-hero__themen { margin-top: 56px; }

/* Abschnitte */
.gf[data-design="3"] .gf-sec__kopf .gf-h2 { grid-column: 1 / span 8; }
.gf[data-design="3"] .gf-sec--alt { background: var(--c-alt); }
.gf[data-design="3"] .gf-position { background: var(--c-seite); }
.gf[data-design="3"] .gf-position__bild { grid-column: 1 / span 7; margin-left: calc(-1 * var(--rand)); }
.gf[data-design="3"] .gf-bild__rahmen { background: var(--primary-dark); aspect-ratio: 16 / 10; }
.gf[data-design="3"] .gf-bild__rahmen img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.gf[data-design="3"] .gf-bild figcaption { font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-left: var(--rand); }
.gf[data-design="3"] .gf-perspektive { border-top: 2px solid var(--primary-dark); grid-template-columns: auto 1fr; }
.gf[data-design="3"] .gf-perspektive .gf-h4 { font-family: var(--f-head); text-transform: uppercase; font-size: 15px; letter-spacing: 0.08em; }
.gf[data-design="3"] .gf-zitat { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2cqi, 28px); line-height: 1.08; border-left: var(--traeger) solid var(--accent); }

/* Karten */
.gf[data-design="3"] .gf-karten { gap: 2px; background: transparent; }
.gf[data-design="3"] .gf-karte { border-width: 2px; padding: 28px 26px 26px; }
.gf[data-design="3"] .gf-karte__id { font-family: var(--f-head); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.2px var(--primary-dark); }
.gf[data-design="3"] .gf-karte__titel { font-family: var(--f-head); font-weight: 800; font-size: clamp(16px, 1.35cqi, 19px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.15; }
.gf[data-design="3"] .gf-karte__fuss { font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.gf[data-design="3"] .gf-karte::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: var(--traeger); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--kurve); }
.gf[data-design="3"] .gf-karte:hover::before, .gf[data-design="3"] .gf-karte:focus-visible::before { transform: scaleX(1); }
.gf[data-design="3"][data-karten="a"] .gf-karte { border: 2px solid var(--primary-dark); }
.gf[data-design="3"][data-karten="a"] .gf-karte:hover { border-color: var(--primary-dark); }
.gf[data-design="3"][data-karten="b"] .gf-karte { background: var(--c-karte-2); box-shadow: none; border: 0; }
.gf[data-design="3"][data-karten="b"] .gf-karte:hover { transform: translate(-6px, -6px); box-shadow: 6px 6px 0 var(--primary-dark); }
.gf[data-design="3"][data-karten="c"] .gf-karte { background: var(--primary-dark); color: var(--text-inverse); border: 0; }
.gf[data-design="3"][data-karten="c"] .gf-karte__text { color: color-mix(in oklab, var(--text-inverse) 72%, transparent); }
.gf[data-design="3"][data-karten="c"] .gf-karte__id { -webkit-text-stroke-color: var(--accent-light); }
.gf[data-design="3"][data-karten="c"] .gf-karte__fuss { color: var(--accent-light); }
.gf[data-design="3"][data-karten="c"] .gf-karte .gf-ikonfeld { --ikonfeld-bg: color-mix(in oklab, var(--text-inverse) 12%, transparent); }
.gf[data-design="3"][data-karten="c"] .gf-karte__medien { margin: -28px -26px 8px; border-radius: 0; background: var(--primary); }
.gf[data-design="3"][data-karten="c"] .gf-karte__medien img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }

/* Beratung */
.gf[data-design="3"] .gf-liste li { font-weight: 500; }
.gf[data-design="3"] .gf-liste .ikon { color: var(--accent); stroke-width: 2.4; }
.gf[data-design="3"] .gf-panel-fx { border: 2px solid var(--primary-dark); }

/* Prozess als Bauabschnitte: Bloecke wachsen nach rechts in die Hoehe */
.gf[data-design="3"] .gf-prozess { align-items: end; gap: 2px; }
.gf[data-design="3"] .gf-prozess__bahn { display: none; }
.gf[data-design="3"] .gf-prozess__schritt { padding: 0; gap: 12px; }
.gf[data-design="3"] .gf-prozess__knoten {
  order: -1; width: 100%; height: calc(26px + var(--i, 0) * 18px); border-radius: 0; margin: 0 0 8px;
  background: transparent; border: 2px solid var(--primary-dark); transform: none !important;
  transition: background-color 500ms var(--kurve);
}
.gf[data-design="3"] .gf-prozess__schritt.ist-erreicht .gf-prozess__knoten { background: var(--primary-dark); border-color: var(--primary-dark); }
.gf[data-design="3"] .gf-prozess__schritt.ist-jetzt .gf-prozess__knoten { background: var(--accent); border-color: var(--accent); }
.gf[data-design="3"] .gf-prozess__nr { font-family: var(--f-head); font-weight: 800; font-size: 26px; height: auto; color: var(--text); }
.gf[data-design="3"] .gf-prozess__titel { font-weight: 800; text-transform: uppercase; font-size: 13.5px; letter-spacing: 0.06em; }
.gf[data-design="3"] .gf-prozess__text { font-size: 13.5px; padding-right: 10px; }
.gf[data-design="3"] .gf-prozess--mini .gf-prozess__schritt { border-top: var(--traeger) solid var(--primary-dark); padding-top: 12px; }
.gf[data-design="3"] .gf-prozess--mini .ist-aktiv { border-top-color: var(--accent); }
.gf[data-design="3"] .gf-prozess--mini .gf-prozess__nr { font-size: 18px; }

/* Reiter */
.gf[data-design="3"] .gf-tabs__liste { gap: 2px; border-bottom: 0; }
.gf[data-design="3"] .gf-tab { flex: 1; padding: 18px 20px; background: var(--c-alt); font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.gf[data-design="3"] .gf-tab[aria-selected="true"] { background: var(--primary-dark); color: var(--text-inverse); }
.gf[data-design="3"] .gf-tab[aria-selected="true"] .gf-ikonfeld { --ikonfeld-bg: var(--accent); }
.gf[data-design="3"] .gf-tab::after { height: var(--traeger); background: var(--accent); bottom: auto; top: 0; }
.gf[data-design="3"] .gf-tab .gf-ikonfeld { --ikonfeld-gr: 34px; --ikon-gr: 20px; }
.gf[data-design="3"] .gf-tab__nr { color: inherit; opacity: 0.6; font-family: var(--f-head); }
.gf[data-design="3"] .gf-parameter li { border-top-width: 2px; border-color: var(--primary-dark); font-weight: 500; }
.gf[data-design="3"] .gf-parameter__nr { font-weight: 800; color: var(--text); }

/* Technik */
.gf[data-design="3"] .gf-technik { background: var(--primary-dark); }

/* Datenblatt als Bauteilliste, Kennzahlen gross */
.gf[data-design="3"] .gf-datenblatt { border: 2px solid var(--primary-dark); background: var(--c-karte-2); }
.gf[data-design="3"] .gf-datenblatt__kopf { background: var(--primary-dark); color: var(--text-inverse); border: 0; }
.gf[data-design="3"] .gf-datenblatt__kopf .gf-mono { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.gf[data-design="3"] .gf-tabelle thead th { font-family: var(--f-head); font-weight: 700; letter-spacing: 0.14em; color: var(--text); border-bottom: 2px solid var(--primary-dark); }
.gf[data-design="3"] .gf-tabelle tbody th { font-family: var(--f-head); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.gf[data-design="3"] .gf-tabelle__nr { font-weight: 800; color: var(--accent); }
.gf[data-design="3"] .gf-kpis { border-top: 0; gap: 2px; }
.gf[data-design="3"] .gf-kpi { background: var(--primary-dark); color: var(--text-inverse); padding: 30px 26px 28px; border-top: var(--traeger) solid var(--accent); }
.gf[data-design="3"] .gf-kpi__wert { color: var(--text-inverse); letter-spacing: -0.04em; }
.gf[data-design="3"] .gf-kpi__label { font-family: var(--f-head); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.gf[data-design="3"] .gf-kpi__text { color: color-mix(in oklab, var(--text-inverse) 70%, transparent); }

/* Finanzierung */
.gf[data-design="3"] .gf-modul { border-top: 2px solid var(--primary-dark); }
.gf[data-design="3"] .gf-modul__nr { font-weight: 800; font-size: 20px; color: var(--text); }
.gf[data-design="3"] .gf-modul .gf-h4 { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: 0.06em; }
.gf[data-design="3"] .gf-struktur__ebene { background: var(--c-karte-2); border: 2px solid var(--primary-dark); font-family: var(--f-head); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.gf[data-design="3"] .gf-struktur__ebene:nth-child(1) { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Kontakt als dunkle Flaeche */
.gf[data-design="3"] .gf-cta.on-dark { background: var(--primary-dark); }
.gf[data-design="3"] .gf-cta.on-dark .gf-label { color: var(--text-inverse); }
.gf[data-design="3"] .gf-cta.on-dark .gf-input { background: color-mix(in oklab, var(--text-inverse) 7%, transparent); border-color: color-mix(in oklab, var(--text-inverse) 30%, transparent); color: var(--text-inverse); }
.gf[data-design="3"] .gf-cta.on-dark .gf-input::placeholder { color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.gf[data-design="3"] .gf-cta.on-dark .gf-chip span { background: transparent; border-color: color-mix(in oklab, var(--text-inverse) 35%, transparent); }
.gf[data-design="3"] .gf-cta.on-dark .gf-chip input:checked + span { background: var(--accent-light); border-color: var(--accent-light); color: var(--primary-dark); }
.gf[data-design="3"] .gf-cta.on-dark .gf-check__box { background: transparent; border-color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.gf[data-design="3"] .gf-cta.on-dark .gf-cta__kontakt li, .gf[data-design="3"] .gf-cta.on-dark .gf-cta__kontakt .ikon { color: var(--text-inverse); }
.gf[data-design="3"] .gf-label { font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gf[data-design="3"] .gf-input { border-width: 2px; height: 54px; }
.gf[data-design="3"] .gf-chip span { border-radius: 0; border-width: 2px; font-weight: 600; }
.gf[data-design="3"] .gf-check__box { border-radius: 0; border-width: 2px; }
.gf[data-design="3"] .gf-badge, .gf[data-design="3"] .gf-tag { border-radius: 0; }

/* Fuss mit angeschnittener Wortmarke */
.gf[data-design="3"] .gf-fuss { background: var(--primary-dark); padding-top: 0; }
.gf[data-design="3"] .gf-fuss__riese {
  display: block; margin: 0 0 56px; font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(80px, 19cqi, 300px); line-height: 0.72; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--text-inverse) 26%, transparent);
  transform: translateY(-0.12em); white-space: nowrap; overflow: hidden;
}
.gf[data-design="3"] .gf-fuss__titel { font-family: var(--f-head); font-weight: 800; letter-spacing: 0.16em; }
.gf[data-design="3"] .gf-fuss__unten { border-top: var(--traeger) solid var(--accent-light); }

@container gf (max-width: 960px) {
  .gf[data-design="3"][data-hero="a"] .gf-hero { background: none; }
  .gf[data-design="3"][data-hero="a"] .gf-hero__text { background: var(--primary-dark); margin-inline: calc(-1 * var(--rand)); padding: 60px var(--rand); }
  .gf[data-design="3"][data-hero="a"] .gf-hero__visual { margin: 0; min-height: 360px; }
  .gf[data-design="3"] .gf-hero__themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gf[data-design="3"] .gf-position__bild { margin-left: 0; }
  .gf[data-design="3"] .gf-prozess { gap: 0; }
  .gf[data-design="3"] .gf-prozess__knoten { width: 13px; height: 100%; min-height: 40px; }
  .gf[data-design="3"] .gf-tabs__liste { flex-wrap: wrap; }
}