/* Layout V3 – 12-Spalten-Raster (seit pre-Final-V2, 17.10.2026)
   Inhaltsbreite wie bisher: .wrap max. 1280 px, seitlich je 36 px (--gutter) → 1208 px Rasterbreite.
   12 Spalten, Spaltenabstand 24 px → 1 Spalte ≈ 78,7 px; 7 Spalten ≈ 695 px; 6 Spalten ≈ 592 px; 5 Spalten ≈ 489 px.
   Startseite: Text immer 7 Spalten (abwechselnd links 1–7 / rechts 6–12), Bühne 5 Spalten.
   Vorgeschichte: pre-Final-V1 = 2 gleiche Spalten, Text max. 560 px (Hero 600, Einleitung 480);
   Zwischenstand „+15 %“ = Spalten 1,35 : 1 / 1,19 : 1 (Text 690 / 644 px). Unterseiten und Footer folgen gesondert. */
:root { --raster-spalten: 12; --raster-abstand: 24px; }

@media (min-width: 861px) {
  .page[data-page=start] .hero,
  .page[data-page=start] .section { grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-abstand); }

  .page[data-page=start] .hero > div:first-child { grid-column: 1 / span 7; max-width: none; }   /* Text: Spalte 1–7 */
  .page[data-page=start] .hero > .visual { grid-column: 8 / span 5; }                         /* Bühne: Spalte 8–12 */
  .page[data-page=start] .hero .lead { max-width: calc((100% - 6 * var(--raster-abstand)) / 7 * 6 + 5 * var(--raster-abstand)); }   /* 6 von 7 Spalten */

  .page[data-page=start] .section .text { grid-column: 6 / span 7; max-width: none; }         /* Text rechts: Spalte 6–12 */
  .page[data-page=start] .section.left .text { grid-column: 1 / span 7; }                     /* Text links: Spalte 1–7 */
}

/* Leistungsliste der Startseite (01–07 unter „Think it.“) formatiert wie die Normenlisten (ISO 13485 …):
   Text 18 px Light statt 24 px Regular, Zeilenabstand wie dort nur über <li> (vorher <li> 7 px + Link 8 px), Nummer → Text 10 px ohne feste Nummernbreite,
   Abstand nach der Liste 32 px statt 36 px. Hover (Einrücken, Lachsfarbe) bleibt. */
.page[data-page=start] .navlist { margin: 8px 0 32px; }
.page[data-page=start] .navlist a { font-size: 20px; font-weight: 200; letter-spacing: normal; padding: 0; gap: 10px; }   /* Zeilenabstand kommt wie bei den Normenlisten vom <li> (7 px) */
.page[data-page=start] .navlist a b { min-width: 0; }

/* Listen der Startseite etwas größer (Nutzerwunsch): Text 20 px statt 18 px (Leistungsliste und Normenlisten gleich) */
.page[data-page=start] .section li { font-size: 20px; }

/* Überschriften der Startseite einheitlich in der Größe des Hero-Titels (Nutzerwunsch „alles in 64 px“):
   vorher Claim „Think it. …“ bis 92 px, Abschnittstitel bis 48 px. Skalierung und Zeilenabstand wie h1. */
.page[data-page=start] h1, .page[data-page=start] h2 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; }
@media (max-width: 860px) {
  .page[data-page=start] h1, .page[data-page=start] h2 { font-size: clamp(30px, 8.6vw, 40px); }
}

/* Referenzen (Startseite) ohne eigene Hintergrundfläche – wie die anderen Abschnitte (vorher deckend Teal #00303F, davor rgba(0,0,0,.42)).
   Abstände, Logos und Pfeile bleiben; die Bühne scheint wieder durch. */
.page[data-page=start] .refs.band { background: transparent; }

/* Referenzen als linker Absatz (Spalte 1–7), abwechselnd zu den Abschnitten darüber und darunter (Nutzerwunsch) */
@media (min-width: 861px) {
  .page[data-page=start] .refs.band .wrap { display: grid; grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-abstand); }
  .page[data-page=start] .refs.band .wrap > * { grid-column: 1 / span 7; min-width: 0; }
}
/* Logostreifen: automatisches Gleiten (js/app.js) – ohne Einrasten/weiches Scrollen (sonst ruckt das Gleiten), weiche Ränder,
   ohne Scrollleiste (Bedienung über Pfeile und Ziehen); Logos etwas kleiner, damit in 7 Spalten ≈ 3 sichtbar sind */
.page[data-page=start] .refs-track.endlos { scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; gap: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.page[data-page=start] .refs-track.endlos::-webkit-scrollbar { display: none; }
.page[data-page=start] .refs.band .ref { width: 190px; height: 120px; }
.page[data-page=start] .refs.band .ref img { max-height: 76px; }

/* Einheitlicher Abstand der Abschnitte der Startseite (vorher: Abschnitte mind. Fensterhöhe mit mittigem Text → Abstände
   152–381 px je nach Textlänge und Bildschirm). Jetzt: Höhe = Inhalt, oben/unten je --abschnitt-abstand → zwischen zwei
   Textblöcken immer der doppelte Wert. Die Bühne richtet sich nach der Lage der Abschnitte (data-buehne). */
:root { --abschnitt-abstand: clamp(80px, 9vw, 135px); }   /* +12 % (vorher clamp(72px, 8vw, 120px)) */
.page[data-page=start] .hero { padding-bottom: var(--abschnitt-abstand); }
.page[data-page=start] .section,
.page[data-page=start] .section.tight,
.page[data-page=start] .section.last,
.page[data-page=start] .refs.band { min-height: 0; padding-top: var(--abschnitt-abstand); padding-bottom: var(--abschnitt-abstand); margin-top: 0; }
.page[data-page=start] .section.last { padding-bottom: calc(var(--abschnitt-abstand) * 1.5); }   /* etwas mehr Luft vor dem Footer */
/* Impulslinie zwischen „Lokal und international“ und „Kontakt“: ohne eigenen Innenabstand → oben und unten genau ein Abschnittsabstand */
.page[data-page=start] .sep.logosep { margin: calc(var(--abschnitt-abstand) * 0.28) 0 calc(var(--abschnitt-abstand) * -0.28); }   /* ≈ 10 % des Zwischenraums tiefer, Gesamtabstand gleich (vorher 8/28 px) */

/* Hintergrundverlauf Startseite, unterer Teil (Nutzerwunsch): „Lokal und international“ (≈ 71–81 %) bleibt in Rot-Magenta,
   der Übergang ins Teal beginnt direkt danach, „Kontakt“ (≈ 81–92 %) liegt fast ganz im Teal.
   Vorher: … #00303F 63 %, #730C26 74–81 %, #00303F 92 %. Impulslinie zwischen beiden Abschnitten entfernt. */
/* 20.10.: Förderlogos ganz unten → Seite länger; alle Stufen × 0,953 (Desktop) bzw. × 0,962 (mobil), damit die Farben an denselben
   Stellen der Inhalte bleiben (gemessen an „Lokal und international“: vorher 69,7 % → nachher 66,4 %; mobil 66,3 → 63,8 %).
   Vorher Desktop 12 21 28 34 39 42 52 63 72 77 86, mobil 16 25 32 37 41 44 53 62 68 72 78. */
body.verlauf:not(.sub) {
  background: linear-gradient(180deg,
    #000000 0%, #110102 11.4%, #30020C 20%, #4F0518 26.7%, #6C0A23 32.4%, #730C26 37.2%,
    #730C26 40%, #00303F 49.5%, #00303F 60%, #730C26 68.6%, #730C26 73.4%, #00303F 81.9%, #00303F 100%);
  background: linear-gradient(180deg in oklab,
    #000000 0%, #110102 11.4%, #30020C 20%, #4F0518 26.7%, #6C0A23 32.4%, #730C26 37.2%,
    #730C26 40%, #00303F 49.5%, #00303F 60%, #730C26 68.6%, #730C26 73.4%, #00303F 81.9%, #00303F 100%);
}

/* Verlauf mobil (≤ 860 px, übernommen 18.10.): dort liegen die Abschnitte höher (Footer verhältnismäßig hoch) – Farbstufen
   des Desktop-Verlaufs auf die mobile Lage umgerechnet: 12 21 28 34 39 42 52 63 72 77 86 → 16 25 32 37 41 44 53 62 68 72 78. */
@media (max-width: 860px) {
  body.verlauf:not(.sub) {
    background: linear-gradient(180deg,
      #000000 0%, #110102 15.4%, #30020C 24.1%, #4F0518 30.8%, #6C0A23 35.6%, #730C26 39.5%,
      #730C26 42.3%, #00303F 51%, #00303F 59.7%, #730C26 65.4%, #730C26 69.3%, #00303F 75.1%, #00303F 100%);
    background: linear-gradient(180deg in oklab,
      #000000 0%, #110102 15.4%, #30020C 24.1%, #4F0518 30.8%, #6C0A23 35.6%, #730C26 39.5%,
      #730C26 42.3%, #00303F 51%, #00303F 59.7%, #730C26 65.4%, #730C26 69.3%, #00303F 75.1%, #00303F 100%);
  }
}

/* Footer: Schriftzug „inotec“ genau so breit wie „Think it. Build it. Own it.“ (Block = Breite des Slogans, Schriftzug füllt ihn) */
footer.site .fmarke { width: max-content; max-width: 100%; }
footer.site .fbrand .fmarke .wm.wm-solo { width: 0; min-width: 100%; height: auto; }   /* Breite 0 → nur der Slogan bestimmt die Blockbreite */

/* 3D-Bühne mit three.js (pre-Final-V3): WebGL-Ebene (js/buehne3d.js) direkt über der gezeichneten Bühne (js/buehne.js).
   Sie zeigt die Modelle, solange sie stehen; Übergänge und schwebende Dreiecke zeichnet die Bühne. Ohne WebGL: nur Bühne. */
canvas.buehne3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; transition: opacity .3s; }

/* Pfad hinter der Startseite (js/pfad.js, Nutzer-Entscheidung 18.10.): verbindet die Stationen der 3D-Bühne (Idee → … → Welt).
   Haarlinie in hellem Teal (20 %), Lichtimpuls mit weichen Enden und Glühen in der Mitte folgt dem Scrollen. */
svg.pfad { position: absolute; left: 0; top: 0; z-index: -2; pointer-events: none; overflow: visible; color: #7fd6e2; }
.pfad-linie { fill: none; stroke: url(#pfad-verlauf); stroke-width: 1; opacity: .2; }
.pfad-impuls { transition: opacity .3s; filter: drop-shadow(0 0 4px rgba(127,214,226,.9)); }
.pfad-station { fill: #7fd6e2; opacity: .35; }
.pfad-glut { transition: opacity .3s; mix-blend-mode: screen; }
.pfad-impuls-stueck { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }   /* 8 Lagen → weiche Enden */

/* Referenzen: Titel auf einer Zeile, Zusatz „(Auszug)“ ≈ 25 % kleiner in inotec Sans Light (18.10.) */
.page[data-page=start] #refs-title { white-space: nowrap; }
.page[data-page=start] #refs-title .zusatz { font-size: 0.75em; font-weight: 300; }

/* ===== Unterseiten (18.10.): 12-Spalten-Raster wie die Startseite =====
   Vorher: Zeilen 1 : 1,15 mit 80 px Abstand (Titel ≈ 525 px, Text ≈ 603 px), Kacheln mit 20 px Abstand.
   Jetzt: Titelspalte 1–5 (≈ 489 px), Textspalte 7–12 (≈ 592 px), Spalte 6 bleibt frei; Kachelabstand = Spaltenabstand 24 px →
   2 Kacheln je 6 Spalten, 3 je 4, 4 je 3 – Kachelkanten liegen auf dem Raster. */
@media (min-width: 861px) {
  .page:not([data-page=start]) .prow { grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-abstand); }
  .page:not([data-page=start]) .prow > .pl { grid-column: 1 / span 5; }
  .page:not([data-page=start]) .prow > .pr { grid-column: 7 / span 6; max-width: none; }
  .page:not([data-page=start]) .prow.solo > .pl { grid-column: 1 / -1; }
  .page:not([data-page=start]) .tiles { column-gap: var(--raster-abstand); row-gap: var(--raster-abstand); }
}

/* Verlauf der Unterseiten wie der Anfang und das Ende der Startseite (vorher Schwarz → altes Rot #730C1A):
   oben Schwarz → Rot-Magenta #730C26 (gleiche Zwischenstufen), unten Übergang ins Teal #00303F, Footer im Teal wie auf der Startseite. */
body.verlauf.sub {
  background: linear-gradient(180deg, #000000 0%, #110102 7%, #30020C 14%, #4F0518 21%, #6C0A23 28%, #730C26 34%, #730C26 58%, #00303F 82%, #00303F 100%);
  background: linear-gradient(180deg in oklab, #000000 0%, #110102 7%, #30020C 14%, #4F0518 21%, #6C0A23 28%, #730C26 34%, #730C26 58%, #00303F 82%, #00303F 100%);
}

/* Kopf der Unterseiten wie der Hero der Startseite (18.10., Nutzer): Titel, Untertitel und Einleitung untereinander in Spalte 1–7
   (vorher Einleitung rechts daneben in Spalte 7–12); Titel inotec Sans Bold in derselben Größe wie die Startseite
   (vorher Inter 400 bis 78 px, Kontakt bis 104 px, Leistungen/Qualität bis 54 px), Untertitel und Einleitung inotec Sans Text Light. */
.page:not([data-page=start]) .pcol .pl h1.ph { font-family: 'inotec Sans', var(--font, Inter), system-ui, sans-serif; font-weight: 700; letter-spacing: 0;
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; white-space: normal; }
.page:not([data-page=start]) .prow.first .sub { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; }
.page:not([data-page=start]) .prow.first .pr .lead { font-family: 'inotec Sans Text', var(--font, Inter), system-ui, sans-serif; font-weight: 300; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; max-width: none; }   /* 19.10.: 18 → 20 px */
@media (min-width: 861px) {
  .page:not([data-page=start]) .prow.first { row-gap: 30px; }
  .page:not([data-page=start]) .prow.first > .pl,
  .page:not([data-page=start]) .prow.first > .pr { grid-column: 1 / span 7; }
}
@media (max-width: 860px) {
  .page:not([data-page=start]) .pcol .pl h1.ph { font-size: clamp(30px, 8.6vw, 40px); }
}
/* „Qualitätsmanagement.“ (längstes Titelwort, 64 px ≈ 700 px) passt nicht in 7 Spalten (695 px) → Kopf dieser Seite 8 Spalten, Titelgröße wie überall */
@media (min-width: 861px) { .page[data-page=qualitaet] .prow.first > .pl { grid-column: 1 / span 8; } }

/* Dropdown „Leistungen“ (18.10., Nutzer): schließt nach Klick auf einen Eintrag und beim Verlassen mit der Maus.
   Vorher hielt :focus-within das Menü nach einem Mausklick offen (angeklickter Link behält den Fokus).
   Jetzt: js/app.js löst beim Klick den Fokus (blur) und setzt .zu, bis die Maus den Bereich verlässt; Tastaturbedienung (Tab) bleibt unverändert. */
header .dd.zu ul { opacity: 0; visibility: hidden; transform: translateY(4px); }
/* Handy: „Qualitätsmanagement.“ ist bei 8,6vw auf 390 px ≈ 8 px zu breit → etwas kleiner */
@media (max-width: 860px) { .page[data-page=qualitaet] .pcol .pl h1.ph { font-size: clamp(26px, 7.6vw, 40px); } }

/* Unterseiten, 19.10. (Nutzer): Impulslinie über dem Kontaktband als Haarlinie (4 → 3 → 1 px, Zacke im gleichen Verhältnis; Linie auf ganzen Pixeln,
   Zacke 0,1 px tiefer → nahtloser Übergang; 1,5/2/2,5 px zeigten einen kleinen Absatz an der Zacke);
   Kontaktband ohne Zeile „Geschäftsführer“, Knopf „Ihre Anfrage“ mittig zur Überschrift */
.page:not([data-page=start]) .logosep .ln { height: 1px; top: 49px; }
.page:not([data-page=start]) .logosep svg { top: 8.1px; }
.page:not([data-page=start]) .logosep svg path { stroke-width: 3.33; }
.page:not([data-page=start]) .ctaband h2 { margin: 0; }

/* Verlauf der Unterseiten unten am Ende des Planeten verankert (19.10. abends, Nutzer): Der Verlauf hing an Prozenten der Seitenhöhe →
   auf kurzen Seiten (FAQ, Kontakt, Service) lief es unter dem Planeten wieder ins Rot. js/dashboard.js misst das Ende von .db-horizont
   (Seitenkoordinate) → --horizont-ende + Klasse hz-verlauf am body. Abstände wie auf Entwicklung (Desktop): Rot bis 609 px vor dem Planetenende,
   Teal ab 253 px danach; Rot hält mindestens bis 1040 px (unter dem Horizontbogen), Teal spätestens ab 1440 px. Ohne Skript: bisherige Prozente.
   Sicherung werkzeuge/.layout_vor_Verlauf_kurze_Seiten.css */
body.verlauf.sub { --rot-ende: 58%; --teal-ab: 82%;
  background: linear-gradient(180deg, #000000 0%, #110102 7%, #30020C 14%, #4F0518 21%, #6C0A23 28%, #730C26 34%, #730C26 var(--rot-ende), #00303F var(--teal-ab), #00303F 100%);
  background: linear-gradient(180deg in oklab, #000000 0%, #110102 7%, #30020C 14%, #4F0518 21%, #6C0A23 28%, #730C26 34%, #730C26 var(--rot-ende), #00303F var(--teal-ab), #00303F 100%);
}
body.verlauf.sub.hz-verlauf { --rot-ende: max(calc(var(--horizont-ende) - 609px), 1040px); --teal-ab: max(calc(var(--horizont-ende) + 253px), 1440px); }

/* Pfeil-Knöpfe neben „Zufriedene Kund*innen“ auf die Mitte der Titelzeile (19.10. abends, Nutzer: „zu tief“): .refs-head richtet unten aus,
   daher Abstand unten = (Zeilenhöhe Titel − Knopf 44 px) / 2 (negativ, wenn die Zeile niedriger als der Knopf ist – Handy) */
.page[data-page=start] .refs-head .refs-nav { margin-bottom: calc((clamp(40px, 4.6vw, 64px) * 1.05 - 44px) / 2); }
@media (max-width: 860px) {
  .page[data-page=start] .refs-head .refs-nav { margin-bottom: calc((clamp(30px, 8.6vw, 40px) * 1.05 - 44px) / 2); }
}

/* 20.10. (Nutzer): mehr schwebende Hintergrund-Polygone auf der Startseite – 210 statt 70 (Test „Polygone ×3“ übernommen; Anzahl in js/buehne.js) */
canvas.brain-mesh { --buehne-hintergrund: 210; }
/* 20.10. (Nutzer): Teilchen als Kugeln – Hintergrund und Übergänge (Zerfallen/Zusammensetzen), stehende Modelle bleiben WebGL
   (Test „Kugeln + Übergänge“ übernommen; Stufen in js/buehne.js: 1 Hintergrund, 2 + Übergänge, 3 alles Kugeln + Pokal) */
canvas.brain-mesh { --buehne-kugeln: 2; }
/* 20.10. (Nutzer): Förderlogos ganz unten auf der Startseite (wie auf der alten Website), nebeneinander, kleiner als auf „Über uns“
   (60 statt 104 px hoch); im Raster ganze Breite, linksbündig; schmal untereinander, höchstens 320 px breit */
.page[data-page=start] .section.last .start-foerderung { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; margin-top: calc(var(--abschnitt-abstand) * 0.75); }
.page[data-page=start] .start-foerderung .foerderleiste { margin: 0; padding: 18px 24px; display: flex; align-items: center; }
.page[data-page=start] .start-foerderung .foerderleiste img { width: auto; height: 60px; max-width: 100%; }
@media (max-width: 760px) { .page[data-page=start] .start-foerderung .foerderleiste { width: 100%; max-width: 320px; padding: 14px 18px; } .page[data-page=start] .start-foerderung .foerderleiste img { width: 100%; height: auto; } }