/* Unterseiten als „Instrumententafel“: Glasblöcke vor gebogenem Horizont (übernommen 18.10.2026, zuerst Seite Qualität).
   Aufbau im HTML der Seite: .page.dashboard-glas › .db-buehne › .db-horizont (.db-planet + .db-atmo), danach Titel und .tiles;
   js/dashboard.js teilt die Norm-Kürzel für die Anzeige und lässt den Lichtimpuls über die Horizontlinie laufen.
   Horizont wie der Rand eines Planeten aus dem All (keine Erde – nur die Form): dunkler Körper im Teal der Startseite, feine Lichtkante,
   Atmosphäre in Lachs/Magenta, in der Mitte am hellsten; Blöcke als klares Glas davor. Entstehung/Varianten: Doku/Website-v3.md §10. */
.page.dashboard-glas { --gl-lachs: #FF8A66; overflow-x: clip; }

/* ---------- Bühne + Horizont ---------- */
.page.dashboard-glas .db-buehne { position: relative; isolation: isolate; padding: 60px 0 120px; margin-bottom: 8px; }
/* Horizont am Inhaltsbereich der Seite verankert (nicht an der Bühne) → auf allen Seiten gleicher Abstand zum Seitenanfang/zur Navigation
   (Nutzer 18.10.); endet über der Impulslinie vor dem Kontaktband (bottom ≈ Höhe Linie + Kontaktband) und läuft dort weich aus. */
.page.dashboard-glas .pcol { position: relative; isolation: isolate; }
.page.dashboard-glas .db-horizont { position: absolute; z-index: -1; pointer-events: none; left: calc(50% - 50vw); width: 100vw; top: 0; bottom: 340px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 330px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 330px), transparent 100%); }
/* Planet: Kreis mit 440vw Durchmesser (flach gekrümmt, ≈ 6vw Durchhang zum Rand; vorher 360vw, Nutzer: „ein kleines bisschen flacher“), Scheitel 778 px unter dem Inhaltsanfang (= 938 px unter Seitenanfang), auf allen Dashboard-Seiten gleich; bei Qualität ≈ Mitte der Normentafel */
.page.dashboard-glas .db-planet { position: absolute; left: 50%; top: 778px; width: 440vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  /* Teal exakt wie Startseite #00303F (Nutzer 18.10.), darunter dunklere Stufen desselben Tons. Getestete Alternativen (nur notiert):
     bisher #10303A (gräulich, mit Rotanteil) · Mittelweg ≈ 197° #002D3F (#00171F, #00090D → #001117) · blauer 200° #002A3F (#00151F, #00080D → #001018) */
  background: radial-gradient(60% 18% at 50% 0%, #00303F 0%, #00181F 40%, rgba(0,12,16,0) 100%), radial-gradient(circle at 50% 50%, #000A0D 60%, #001218 100%);
  box-shadow: 0 -1px 0 0 rgba(255,214,200,.85), 0 -3px 10px 0 rgba(255,160,130,.45), 0 -16px 46px 4px rgba(255,138,102,.12), 0 -60px 150px 20px rgba(201,5,113,.11); }   /* Atmosphäre ≈ ⅓ dunkler (Nutzer: „leuchtet etwas zu viel“) */
/* Atmosphäre: Lichtsaum über dem Scheitel, zur Mitte hin am hellsten (Ellipse), weich auslaufend */
.page.dashboard-glas .db-atmo { position: absolute; left: 50%; top: 778px; width: 120vw; height: 340px; transform: translate(-50%, -62%);
  background: radial-gradient(50% 50% at 50% 62%, rgba(255,190,165,.14) 0%, rgba(255,138,102,.065) 28%, rgba(201,5,113,.04) 55%, rgba(201,5,113,0) 100%); filter: blur(6px); }
/* Seiten des Bogens zu den Bildrändern abdunkeln, damit die Mitte leuchtet */
.page.dashboard-glas .db-horizont::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 778px, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%); }

/* ---------- Glas ---------- */
.page.dashboard-glas .tiles .tile, .page.dashboard-glas .tiles.norm-tiles {
  position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(140deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(125%); backdrop-filter: blur(22px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), 0 40px 80px -40px rgba(0,0,0,.7); }
/* Glanzkante: schmaler Lichtstreif oben links */
.page.dashboard-glas .tiles:not(.norm-tiles) .tile::before, .page.dashboard-glas .tiles.norm-tiles::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 22%); mix-blend-mode: screen; }

.page.dashboard-glas .pcol .tiles-h.normh { position: relative; font-size: clamp(24px, 2.2vw, 30px); margin: 0 0 18px; }

/* Normentafel: Zellen ohne eigene Fläche, Trennlinien als Haarlinien */
.page.dashboard-glas .tiles.norm-tiles { gap: 0; padding: 0; overflow: hidden; margin-bottom: var(--raster-abstand, 24px); }
.page.dashboard-glas .tiles.norm-tiles .tile.red.n { position: relative; z-index: 1; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 28px 26px 26px;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .3s; }
@media (min-width: 1101px) {
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n:not(:nth-child(4n)) { border-right: 1px solid rgba(255,255,255,.10); }
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.10); }
}
.page.dashboard-glas .tiles.norm-tiles .tile.red.n:hover { background: rgba(255,255,255,.05); }
.page.dashboard-glas .tiles.norm-tiles .tile.n .tt { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; font-family: 'inotec Sans', sans-serif; letter-spacing: 0; }
.page.dashboard-glas .kz-pre { font: 600 12px/1 'inotec Sans Text', sans-serif; letter-spacing: .16em; color: var(--gl-lachs); }
.page.dashboard-glas .kz-nr { font: 300 clamp(30px, 2.8vw, 40px)/1 'inotec Sans', sans-serif; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.page.dashboard-glas .pcol .tiles.norm-tiles .tile.n .td { font: 300 15px/1.4 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.72); hyphens: auto; -webkit-hyphens: auto; }

/* Untere Reihe 7 + 5 Spalten */
@media (min-width: 861px) {
  .page.dashboard-glas .tiles:not(.norm-tiles) { grid-template-columns: repeat(var(--raster-spalten, 12), minmax(0, 1fr)); }
  .page.dashboard-glas .tiles:not(.norm-tiles) > .tile { grid-column: span 6; }            /* allgemein: halbe Breite, .wide ganze Breite */
  .page.dashboard-glas .tiles:not(.norm-tiles) > .tile.wide { grid-column: 1 / -1; }
  .page.dashboard-glas[data-page=qualitaet] .tiles:not(.norm-tiles) > .tile:first-child:not(:only-child) { grid-column: span 5; }   /* Qualität (19.10.): Text 5 + Liste 7 */
  .page.dashboard-glas[data-page=qualitaet] .tiles:not(.norm-tiles) > .tile:last-child:not(:only-child) { grid-column: span 7; }
  .page.dashboard-glas[data-page=qualitaet] .tiles:not(.norm-tiles) > .tile:only-child { grid-column: 1 / -1; }
}
.page.dashboard-glas .tiles:not(.norm-tiles) .tile { padding: 30px 32px; }
.page.dashboard-glas .pcol .tiles:not(.norm-tiles) .tile h3:not(.prozess h3) { margin: 0 0 22px; font: 600 16px/1 'inotec Sans Text', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-lachs); }
.page.dashboard-glas .tile .plain { counter-reset: gl; }
.page.dashboard-glas .tile .plain li { counter-increment: gl; padding: 13px 0 13px 46px; border-top: 1px solid rgba(255,255,255,.10); font: 300 19px/1.45 'inotec Sans Text', sans-serif; }
.page.dashboard-glas .tile .plain li:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.page.dashboard-glas .tile .plain li::before { content: "0" counter(gl); background: none; clip-path: none; width: auto; height: auto; top: 17px; font: 300 17px/1 'inotec Sans', sans-serif; letter-spacing: .04em; color: var(--gl-lachs); }
.page.dashboard-glas .pcol .tiles:not(.norm-tiles) .tile h4:not(.prozess h4) { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; margin: 0 0 14px; }
.page.dashboard-glas .pcol .tiles:not(.norm-tiles) .tile p:not(.prozess p) { font: 300 18px/1.55 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); }
.page.dashboard-glas .fullbleed .tile p, .fullbleed .page.dashboard-glas .tile p, .fullbleed .page.dashboard-glas .tile li { text-shadow: none; }

@media (max-width: 1100px) and (min-width: 561px) {
  .page.dashboard-glas .tiles.norm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.10); }
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n:nth-child(-n+6) { border-bottom: 1px solid rgba(255,255,255,.10); }
}
@media (max-width: 860px) {
  .page.dashboard-glas .db-buehne { padding-top: 60px; }
  .page.dashboard-glas .db-planet, .page.dashboard-glas .db-atmo { top: 796px; }   /* Handy: wie bisher bei Qualität, jetzt ab Inhaltsanfang */
  .page.dashboard-glas .db-planet { width: 500vw; }
  .page.dashboard-glas .tiles:not(.norm-tiles) .tile { padding: 24px; }
}
@media (max-width: 560px) {
  .page.dashboard-glas .tiles.norm-tiles { grid-template-columns: minmax(0, 1fr); }
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 16px 18px; }
  .page.dashboard-glas .tiles.norm-tiles .tile.red.n:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.10); }
  .page.dashboard-glas .tiles.norm-tiles .tile.n .tt { margin: 0; gap: 4px; }
  .page.dashboard-glas .kz-nr { font-size: 26px; }
  .page.dashboard-glas .pcol .tiles.norm-tiles .tile.n .td { font-size: 14px; }
}

/* Lichtimpuls auf der Horizontlinie (wie der Pfad der Startseite): heller Streif mit weichen Enden + Glühen am Kopf, läuft von selbst über den Bogen (js) */
.page.dashboard-glas .db-impuls { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.page.dashboard-glas .db-impuls .spur { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.page.dashboard-glas .db-impuls .spur.weit { stroke-width: 5; opacity: .35; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .page.dashboard-glas .db-impuls { display: none; } }

/* Schlagwort-Pillen (z. B. Spezialisierungen auf „Entwicklung“) als kleine Glasperlen */
.page.dashboard-glas .tile .tags span { font-family: 'inotec Sans Text', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .1em; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: border-color .25s, background .25s; }
.page.dashboard-glas .tile .tags span:hover { border-color: rgba(255,138,102,.6); background: rgba(255,138,102,.08); }

/* Prozess-Kreis (Entwicklung) als eigener Glasblock, Inhalt unverändert (Nutzer 18.10.); Gestaltung des Kreises in css/prozess.css */
.page.dashboard-glas .tiles .tile.pz-kachel { padding: clamp(28px, 2.8vw, 40px) clamp(24px, 3.4vw, 48px); }   /* 19.10.: niedriger (vorher 56 px oben/unten) */
.page.dashboard-glas .tile.pz-kachel .prozess-kreis { max-width: 470px; }   /* 19.10.: vorher bis 640 px (gemessen 543) */
.page.dashboard-glas .tile.pz-kachel .prozess { margin: 0; }

/* ===== Weitere Blockarten (18.10., Seite Produktion) ===== */
/* Raster: 3er- und 4er-Reihen, gestapelte Blöcke */
@media (min-width: 861px) {
  .page.dashboard-glas .tiles.cols3 > .tile { grid-column: span 4; }
  .page.dashboard-glas .tiles.cols4:not(.norm-tiles) > .tile { grid-column: span 3; }
  .page.dashboard-glas .tiles.stack > .tile { grid-column: 1 / -1; }
}
/* Zwischenüberschrift über einer weiteren Blockreihe in der Bühne */
.page.dashboard-glas .db-buehne .tiles + .tiles-h { margin-top: 56px; }
/* Nummerierte Blöcke (.tile.n): Nummer klein in inotec Sans Light, Titel Bold, Text Light */
.page.dashboard-glas .tiles:not(.norm-tiles) .tile.n b { display: block; margin: 0 0 18px; font: 300 16px/1 'inotec Sans', sans-serif; letter-spacing: .06em; color: var(--gl-lachs); }
.page.dashboard-glas .tiles:not(.norm-tiles) .tile.n .tt { font-family: 'inotec Sans', sans-serif; font-weight: 700; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; letter-spacing: 0; margin: 0 0 10px; }
.page.dashboard-glas .pcol .tiles:not(.norm-tiles) .tile.n .td { font: 300 18px/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); }
/* Säulendiagramm (.colchart) als Anzeige: schmale leuchtende Säulen mit heller Kappe, feine Grundlinie, Werte in inotec Sans Light */
.page.dashboard-glas .colchart { gap: 14px; height: 220px; margin: 8px 0 0;
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 0 calc(100% - 28px) / 100% 1px no-repeat; }   /* Grundlinie unter den Säulen */
.page.dashboard-glas .colchart i { position: relative; width: 38%; margin: 0 auto; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255,185,163,.95) 0, rgba(255,138,102,.6) 22%, rgba(201,5,113,.22) 100%); box-shadow: 0 0 16px rgba(255,138,102,.25); transition: box-shadow .3s, filter .3s; }
.page.dashboard-glas .colchart i::before { content: ""; position: absolute; left: -35%; right: -35%; top: -1px; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #FFB9A3; }
.page.dashboard-glas .colchart div:hover i { filter: brightness(1.25); box-shadow: 0 0 26px rgba(255,138,102,.5); }
.page.dashboard-glas .colchart span { margin-top: 14px; font: 300 14px/1 'inotec Sans', sans-serif; letter-spacing: .02em; color: rgba(255,255,255,.72); }
/* Werte schmaler Spalten („100.000“ muss unter die Säule passen; gemessen 320–1440 px) */
@media (max-width: 1100px) { .page.dashboard-glas .colchart { gap: 8px; } .page.dashboard-glas .colchart span { font-size: 12px; letter-spacing: 0; } }
@media (max-width: 560px) { .page.dashboard-glas .colchart { gap: 4px; } .page.dashboard-glas .colchart span { font-size: 10px; } }
@media (max-width: 360px) { .page.dashboard-glas .colchart span { font-size: 9px; } }

/* Abstand Einleitung → erste Blocküberschrift 184 → 160 px auf allen Dashboard-Seiten (Desktop + mobil), Nutzerwunsch 19.10. */
.page.dashboard-glas .db-buehne { padding-top: 36px; }

/* Zweispaltige Liste in einem breiten Block (Big-Data-KI-Lösungen auf „Entwicklung“, 19.10.): Spalten von oben nach unten, je 3 Punkte */
.page.dashboard-glas .tile .plain.zwei { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 48px; }
.page.dashboard-glas .tile .plain.zwei li:nth-child(3n) { border-bottom: 1px solid rgba(255,255,255,.10); }
@media (max-width: 860px) {
  .page.dashboard-glas .tile .plain.zwei { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .page.dashboard-glas .tile .plain.zwei li:nth-child(3n):not(:last-child) { border-bottom: 0; }
}

/* Pille als Link (z. B. „Industrial AI“ in den Spezialisierungen → eigene Seite, 19.10.): wie die übrigen Pillen, mit kleinem Pfeil in Lachs */
.page.dashboard-glas .tile .tags a.tag-link { font: 600 16px/1.2 'inotec Sans Text', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-decoration: none;
  padding: 9px 18px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,138,102,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: border-color .25s, background .25s; }
.page.dashboard-glas .tile .tags a.tag-link::after { content: " →"; color: var(--gl-lachs); letter-spacing: 0; }
.page.dashboard-glas .tile .tags a.tag-link:hover, .page.dashboard-glas .tile .tags a.tag-link:focus-visible { border-color: rgba(255,138,102,.9); background: rgba(255,138,102,.12); }

/* Nachsatz unter den Blöcken (Entwicklung, 19.10.): wie die Einleitung (inotec Sans Text Light 20 px), Spalten 1–8, mit Luft zu den Blöcken */
.page.dashboard-glas .db-nachsatz { position: relative; margin: 72px 0 0; max-width: calc((100% - 11 * var(--raster-abstand, 24px)) / 12 * 8 + 7 * var(--raster-abstand, 24px));
  font: 300 clamp(18px, 1.4vw, 20px)/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.85); }
@media (max-width: 860px) { .page.dashboard-glas .db-nachsatz { margin-top: 48px; max-width: none; } }

/* Variante B „mehr Luft“ (19.10., Nutzer): Blockabstand 24 → 36 px, Abstand Blockgruppe → nächste Überschrift 56 → 72 px; Normentafel (Qualität) ebenso */
.page.dashboard-glas .tiles:not(.norm-tiles) { column-gap: 36px; row-gap: 36px; }
.page.dashboard-glas .tiles.norm-tiles { margin-bottom: 36px; }
.page.dashboard-glas .db-buehne .tiles + .tiles-h { margin-top: 72px; }

/* Zweispaltige Liste mit 4 Zeilen je Spalte (.zwei.z4, z. B. „Tests und Überwachung“ auf Produktion, 19.10.) */
.page.dashboard-glas .tile .plain.zwei.z4 { grid-template-rows: repeat(4, auto); }
.page.dashboard-glas .tile .plain.zwei.z4 li:nth-child(3n) { border-bottom: 0; }
.page.dashboard-glas .tile .plain.zwei.z4 li:nth-child(4n) { border-bottom: 1px solid rgba(255,255,255,.10); }
@media (max-width: 860px) {
  .page.dashboard-glas .tile .plain.zwei.z4 { grid-template-rows: none; }
  .page.dashboard-glas .tile .plain.zwei.z4 li:nth-child(4n):not(:last-child) { border-bottom: 0; }
}
/* Link „Weiter zu …“ unter dem Nachsatz (Entwicklung, 19.10.): etwas Luft zum Text */
.page.dashboard-glas .db-nachsatz + .pr.after { margin-top: 32px; }

/* Zweispaltige Liste mit 2 Zeilen je Spalte (.zwei.z2, z. B. Service, 19.10.) */
.page.dashboard-glas .tile .plain.zwei.z2 { grid-template-rows: repeat(2, auto); }
.page.dashboard-glas .tile .plain.zwei.z2 li:nth-child(3n) { border-bottom: 0; }
.page.dashboard-glas .tile .plain.zwei.z2 li:nth-child(2n) { border-bottom: 1px solid rgba(255,255,255,.10); }
@media (max-width: 860px) {
  .page.dashboard-glas .tile .plain.zwei.z2 { grid-template-rows: none; }
  .page.dashboard-glas .tile .plain.zwei.z2 li:nth-child(2n):not(:last-child) { border-bottom: 0; }
}
/* Kopf ohne Einleitungstext (z. B. Service): Abstand Kopf → erste Überschrift ebenfalls 160 px (dort fehlen die 28 px Textabstand der Einleitung) */
.page.dashboard-glas .prow.first:not(:has(.lead)) + .db-buehne { padding-top: 64px; }

/* Fünf Blöcke: oben 3 (je 4 Spalten), unten 2 (je 6 Spalten) – Industrial AI „Zentrale Anwendungsfelder“, 19.10. */
@media (min-width: 861px) {
  .page.dashboard-glas .tiles.fuenf > .tile { grid-column: span 4; }
  .page.dashboard-glas .tiles.fuenf > .tile:nth-child(n+4) { grid-column: span 6; }
}
/* Drei Einträge nebeneinander in einem Block, getrennt durch Haarlinien (Industrial AI „Herausforderungen“, 19.10.) */
.page.dashboard-glas .db-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page.dashboard-glas .db-trio > div { padding: 4px 32px; }
.page.dashboard-glas .db-trio > div:first-child { padding-left: 0; }
.page.dashboard-glas .db-trio > div:last-child { padding-right: 0; }
.page.dashboard-glas .db-trio > div + div { border-left: 1px solid rgba(255,255,255,.10); }
.page.dashboard-glas .db-trio .tt { font: 700 clamp(22px, 1.9vw, 26px)/1.2 'inotec Sans', sans-serif; letter-spacing: 0; margin: 0 0 10px; color: #fff; }
.page.dashboard-glas .db-trio .td { font: 300 18px/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 860px) {
  .page.dashboard-glas .db-trio { grid-template-columns: minmax(0, 1fr); }
  .page.dashboard-glas .db-trio > div { padding: 20px 0; }
  .page.dashboard-glas .db-trio > div:first-child { padding-top: 0; }
  .page.dashboard-glas .db-trio > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); }
}

/* Breiter nummerierter Block mit mehreren Absätzen (Legal Manufacturer „QMS & PRRC“, 19.10.): Text auf 8 Spalten begrenzt, Absätze mit Luft */
.page.dashboard-glas .tiles .tile.n.wide .td { max-width: 52em; }
.page.dashboard-glas .tiles .tile.n.wide .td + .td { margin-top: 12px; }
@media (min-width: 861px) { .page.dashboard-glas .tiles.cols4:not(.norm-tiles) > .tile.wide, .page.dashboard-glas .tiles.cols3 > .tile.wide { grid-column: 1 / -1; } }

/* .db-trio.klein: Unterpunkte in einem nummerierten Block (Legal Manufacturer, 19.10.) – Untertitel kleiner als der Blocktitel */
.page.dashboard-glas .tile.n .db-trio.klein { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); }
.page.dashboard-glas .tile.n .db-trio.klein .tt { font: 600 18px/1.3 'inotec Sans Text', sans-serif; letter-spacing: 0; margin: 0 0 8px; color: #fff; }
.page.dashboard-glas .tile.n .db-trio.klein .td { max-width: none; }
.page.dashboard-glas .tile.n .db-trio.klein + .td { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); color: #fff; }
.page.dashboard-glas .tile.n .db-trio.klein + .td { max-width: none; }
/* Zwei Blöcke nebeneinander in einer 4er-Gruppe (.tile.halb, je 6 Spalten; Legal Manufacturer UDI/PMS, 19.10.) */
@media (min-width: 861px) { .page.dashboard-glas .tiles.cols4:not(.norm-tiles) > .tile.halb { grid-column: span 6; } }
.page.dashboard-glas .db-trio .td + .td { margin-top: 10px; }
/* .db-trio: gleich breite Spalten (19.10.) – Abstand per column-gap, Trennlinie mittig im Zwischenraum (vorher Innenabstand → mittlere Spalte 50 px schmaler) */
@media (min-width: 861px) {
  .page.dashboard-glas .db-trio { column-gap: 64px; }
  .page.dashboard-glas .db-trio > div, .page.dashboard-glas .db-trio > div:first-child, .page.dashboard-glas .db-trio > div:last-child { padding: 4px 0; position: relative; }
  .page.dashboard-glas .db-trio > div + div { border-left: 0; }
  .page.dashboard-glas .db-trio > div + div::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.10); }
}

/* Legal Manufacturer ab 19.10. abends: Überschriften über den Blöcken (Konsistenzregel), Blöcke ohne Nummer.
   Unterpunkte (.db-trio.klein) und Absätze daher allgemein für breite Blöcke, nicht nur für .tile.n */
.page.dashboard-glas .tile.wide > .td { max-width: 52em; font: 300 18px/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); margin: 0; }
.page.dashboard-glas .tile.wide > .td + .td { margin-top: 12px; }
.page.dashboard-glas .tile .db-trio.klein { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); }
.page.dashboard-glas .tile .db-trio.klein:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
.page.dashboard-glas .tile .db-trio.klein .tt { font: 600 18px/1.3 'inotec Sans Text', sans-serif; letter-spacing: 0; margin: 0 0 8px; color: #fff; }
.page.dashboard-glas .tile .db-trio.klein + .td { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); color: #fff; max-width: none; }

/* .db-trio.duo: zwei Unterpunkte nebeneinander (Zulassung, 19.10.) */
@media (min-width: 861px) { .page.dashboard-glas .db-trio.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hintergrund-Impulse der Unterseiten (js/hintergrund-impulse.js, 19.10., vom Nutzer abgenommen): Canvas fest im Bildschirm, hinter dem Inhalt der .pcol */
canvas.bg-impulse { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
/* Zweiter Nachsatz-Absatz (Zulassung: Einladung zum Gespräch, 19.10.) */
.page.dashboard-glas .db-nachsatz + .db-nachsatz { margin-top: 20px; }
/* Qualität (19.10.): Textblock neben Liste – Text wie Einleitung, „Aktuelles“ ganze Breite mit begrenzter Zeilenlänge */
.page.dashboard-glas .pcol .tiles:not(.norm-tiles) .tile > .td:only-child { font: 300 20px/1.6 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.85); margin: 0; }
.page.dashboard-glas .tile.aktuell > p, .page.dashboard-glas .tile.aktuell > h4 { max-width: 52em; }

/* Zertifikat ISO 13485 im Textblock „Wir sind DIN EN ISO 13485 zertifiziert“ (Qualität, 19.10.): Vorschau + Angaben, Klick → große Ansicht */
.page.dashboard-glas .tile.zert-kachel { display: flex; flex-direction: column; }
.page.dashboard-glas .tile.zert-kachel > .td { margin: 0; }
.zert { display: flex; align-items: center; gap: 22px; margin-top: auto; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.10); background: none; color: inherit; text-align: left; cursor: zoom-in; font: inherit; }
.page.dashboard-glas .tile.zert-kachel > .td + .zert { margin-top: 28px; }
.zert img { flex: none; width: 92px; aspect-ratio: 1240 / 1754; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18); transition: transform .3s, box-shadow .3s; }
.zert-info { display: flex; flex-direction: column; gap: 6px; }
.zert-info b { font: 600 14px/1.2 'inotec Sans Text', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gl-lachs, #FF8A66); }
.zert-info > span { font: 300 15px/1.45 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.72); }
.zert-info .zert-mehr { font: 600 13px/1 'inotec Sans Text', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-top: 6px; }
.zert-info .zert-mehr::after { content: " →"; color: var(--gl-lachs, #FF8A66); }
.zert:hover img, .zert:focus-visible img { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,138,102,.6); }
.zert:focus-visible { outline: 1.5px solid #fff; outline-offset: 6px; border-radius: 4px; }
.zert-ebene { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(0,0,0,.82); backdrop-filter: blur(6px); cursor: zoom-out; animation: zert-ein .25s ease-out; }
.zert-ebene img { max-width: 100%; max-height: 92vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.zert-zu { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; font: 300 28px/1 'inotec Sans', sans-serif; cursor: pointer; }
@keyframes zert-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zert-ebene { animation: none; } .zert img { transition: none; } }

/* Über uns (19.10.): Förderleiste – EU-/Sachsen-Logo in Originalfarben auf heller Fläche (Vorgabe Förderlogos), wie ein Siegel im Glasblock */
.page.dashboard-glas .tile.foerder-kachel > .td { max-width: 52em; }
.foerderleiste { width: fit-content; max-width: 100%; margin-top: 26px; padding: 22px 30px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06); }
.foerderleiste img { display: block; width: 600px; max-width: 100%; height: auto; }
.page.dashboard-glas[data-page=ueber-uns] .tile.wide > .td:only-child { max-width: 52em; }
/* Förderlogos getrennt (Über uns, 19.10.): zwei weiße Siegel nebeneinander, gleiche Höhe; schmal untereinander */
.foerderlogos { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.foerderlogos .foerderleiste { margin-top: 0; padding: 18px 24px; display: flex; align-items: center; }
.foerderlogos .foerderleiste img { width: auto; height: 52px; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) { .foerderlogos .foerderleiste img { height: auto; width: 100%; } .foerderlogos .foerderleiste { width: 100%; } }
/* Netzwerk (Über uns, 19.10.): Text links, leap:up-Logo als weißes Siegel rechts (verlinkt) */
.netz-zeile { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.netz-zeile > div { flex: 1 1 360px; }
.netz-zeile > div > p { font: 300 18px/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); margin: 0 0 18px; }
.foerderleiste.partner { margin: 0; padding: 14px 22px; display: block; transition: transform .25s, box-shadow .25s; }
.foerderleiste.partner img { display: block; width: auto; height: 76px; max-width: 100%; }
.foerderleiste.partner:hover, .foerderleiste.partner:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,138,102,.6); }
@media (max-width: 560px) { .foerderleiste.partner { width: 100%; } .foerderleiste.partner img { height: auto; width: 100%; } }
/* 19.10.: leap:up wie die Förderlogos unter dem Text (statt rechts daneben), etwas höher wegen des Schriftzugs */
.foerderlogos .foerderleiste.partner { padding: 14px 22px; }
.foerderlogos .foerderleiste.partner img { height: 96px; }   /* 19.10. abends: Nutzer „größer“ (vorher 64 px) */
.foerderlogos .foerderleiste.partner { padding: 18px 28px; }
.page.dashboard-glas .tile.wide > p:first-child { font: 300 18px/1.5 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); margin: 0; max-width: 52em; }
.page.dashboard-glas .tile.wide > .foerderlogos + .more.netz-link { display: inline-flex; align-items: center; margin-top: 28px; }   /* 19.10. abends: Button Variante F */

/* FAQ (19.10.): jede Frage ein Glasblock mit sichtbarer Antwort, zwei Spalten; Frage als h2 (Gliederung), gestaltet wie Blocktitel .tt */
.page.dashboard-glas .tiles.faq-raster .tile.faq-kachel .tt { font-family: 'inotec Sans', sans-serif; font-weight: 700; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; letter-spacing: 0; margin: 0 0 12px; color: #fff; }
.page.dashboard-glas .tiles.faq-raster .tile.faq-kachel .td { max-width: 40em; }
.page.dashboard-glas .tiles.faq-raster .tile.faq-kachel.wide .td { max-width: 52em; }

/* FAQ zum Aufklappen (19.10., Nutzer): jede Frage ein ganz breiter Glasblock, gleich breit, Abstand 16 px; Plus/Minus in Lachs */
.page.dashboard-glas .tiles.faq-liste { row-gap: 16px; }
.page.dashboard-glas .tiles.faq-liste > .faq-kachel { grid-column: 1 / -1; padding: 0; }
.faq-kachel summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px; }
.faq-kachel summary::-webkit-details-marker { display: none; }
.faq-kachel .faq-q { font: 700 clamp(19px, 1.6vw, 22px)/1.3 'inotec Sans', sans-serif; letter-spacing: 0; color: #fff; transition: color .2s; }
.faq-kachel summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,138,102,.55);
  background: linear-gradient(var(--gl-lachs, #FF8A66), var(--gl-lachs, #FF8A66)) center / 12px 1.5px no-repeat, linear-gradient(var(--gl-lachs, #FF8A66), var(--gl-lachs, #FF8A66)) center / 1.5px 12px no-repeat; transition: transform .3s, background-size .3s; }
.faq-kachel[open] summary::after { background-size: 12px 1.5px, 1.5px 0; transform: rotate(180deg); }
.faq-kachel summary:hover .faq-q, .faq-kachel summary:focus-visible .faq-q { color: var(--gl-lachs, #FF8A66); }
.faq-kachel summary:focus-visible { outline: 1.5px solid #fff; outline-offset: -6px; border-radius: 14px; }
.page.dashboard-glas .pcol .faq-kachel > .td { margin: 0; padding: 0 32px 28px; max-width: 52em; font: 300 18px/1.55 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.75); }
@media (max-width: 860px) { .faq-kachel summary { padding: 20px 22px; } .page.dashboard-glas .pcol .faq-kachel > .td { padding: 0 22px 22px; } }
@media (prefers-reduced-motion: reduce) { .faq-kachel summary::after { transition: none; } }

/* Kontakt im Glas-System (19.10.): links Kontaktdaten (5 Sp.), rechts Formular (7 Sp.) */
@media (min-width: 861px) {
  .page.dashboard-glas .tiles.kontakt-raster > .kontakt-info { grid-column: span 5; }
  .page.dashboard-glas .tiles.kontakt-raster > .kontakt-form { grid-column: span 7; }
}
.page.dashboard-glas .kontakt-info h3:not(:first-child) { margin-top: 34px !important; }
.page.dashboard-glas .kontakt-info .kd { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.page.dashboard-glas .kontakt-info .kd a { font: 300 22px/1.35 'inotec Sans Text', sans-serif; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); align-self: flex-start; transition: color .2s, border-color .2s; }
.page.dashboard-glas .kontakt-info .kd a:hover, .page.dashboard-glas .kontakt-info .kd a:focus-visible { color: var(--gl-lachs); border-color: var(--gl-lachs); }
.page.dashboard-glas .kontakt-info .gf { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.page.dashboard-glas .kontakt-info .gf b { display: block; font: 400 20px/1.3 'inotec Sans Text', sans-serif; color: #fff; }
.page.dashboard-glas .kontakt-info .gf .more { margin-top: 10px; }
.page.dashboard-glas .kontakt-info .ka { font: 300 18px/1.55 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.8); margin: 0 0 16px; }
/* Formular im Glas: Felder als zarte Glasflächen mit Haarlinie, Fokus in Lachs */
.page.dashboard-glas #cform { gap: 4px; }
.page.dashboard-glas #cform label { font: 600 13px/1 'inotec Sans Text', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 14px; }
.page.dashboard-glas #cform label:first-of-type { margin-top: 0; }
.page.dashboard-glas #cform :is(input[type=text], input[type=email], input[type=tel], textarea, select) {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 13px 15px; color: #fff; font: 300 17px/1.4 'inotec Sans Text', sans-serif; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .2s, background .2s; }
.page.dashboard-glas #cform :is(input, textarea, select):hover { border-color: rgba(255,255,255,.3); }
.page.dashboard-glas #cform :is(input, textarea, select):focus { outline: none; border-color: var(--gl-lachs); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(255,138,102,.18); }
.page.dashboard-glas #cform select option { color: #000; }
.page.dashboard-glas #cform textarea { min-height: 130px; resize: vertical; }
.page.dashboard-glas #cform label.chk { margin-top: 18px; font: 300 14px/1.45 'inotec Sans Text', sans-serif; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.75); }
.page.dashboard-glas #cform label.chk input { accent-color: #FF8A66; width: 17px; height: 17px; margin-top: 1px; flex: none; }
.page.dashboard-glas #cform .btn { margin-top: 18px; }
.page.dashboard-glas #cform .formnote { font: 300 13px/1.4 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.55); margin: 10px 0 0; }
.page.dashboard-glas[data-page=kontakt] .db-buehne { padding-bottom: 160px; }
/* Geschäftsführung mit Fotos (Kontakt, 19.10.): runde Porträts mit feinem Ring, Name daneben */
.page.dashboard-glas .kontakt-info .gf.personen { flex-direction: column; gap: 18px; }
.page.dashboard-glas .kontakt-info .person { display: flex; align-items: center; gap: 18px; }
.page.dashboard-glas .kontakt-info .person img { flex: none; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 0 5px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.4); }
.page.dashboard-glas .kontakt-info .person .more { margin-top: 8px; }
.page.dashboard-glas .kontakt-info .gf.personen { gap: 22px; }
.page.dashboard-glas .kontakt-info .person { gap: 24px; }
@media (max-width: 560px) { .page.dashboard-glas .kontakt-info .person img { width: 104px; height: 104px; } }

/* ---------- Rechtstext als Fließtext ohne Glasblöcke (Datenschutz, 19.10. abends, Nutzer: „als Text – nicht in Kacheln“) ----------
   Seite .page.dashboard-glas.rechtstext › .db-buehne › .ds-text (h2 Abschnitte, h3 Unterpunkte, p, ul); Textspalte ≈ 8 Rasterspalten. */
.page.dashboard-glas .ds-text { max-width: 820px; }
.page.dashboard-glas .ds-text h2 { font: 700 clamp(24px, 2.2vw, 30px)/1.2 'inotec Sans', sans-serif; letter-spacing: 0; color: #fff; margin: 72px 0 20px; text-wrap: balance; }
.page.dashboard-glas .ds-text h3 { font: 600 20px/1.3 'inotec Sans Text', sans-serif; letter-spacing: 0; text-transform: none; color: #fff; margin: 36px 0 10px; }
.page.dashboard-glas .ds-text h2 + h3 { margin-top: 8px; }
.page.dashboard-glas .ds-text p, .page.dashboard-glas .ds-text li { font: 300 18px/1.65 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.8); hyphens: auto; -webkit-hyphens: auto; }
.page.dashboard-glas .ds-text p { margin: 0 0 14px; }
.page.dashboard-glas .ds-text ul { list-style: none; margin: 4px 0 18px; padding: 0; }
.page.dashboard-glas .ds-text li { position: relative; padding-left: 30px; margin: 0 0 8px; }
.page.dashboard-glas .ds-text li::before { content: ""; position: absolute; left: 4px; top: .82em; width: 14px; height: 1.4px; background: var(--gl-lachs); }
.page.dashboard-glas .ds-text .ds-hinweis { margin-top: 72px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.55); }
.page.dashboard-glas .ds-text > h2:first-child { margin-top: 0; }
.page.dashboard-glas .ds-text .ds-anschrift { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.page.dashboard-glas .ds-text a, .page.dashboard-glas .tile.wide > .td a { color: #fff; text-decoration: underline; text-decoration-color: var(--gl-lachs); text-underline-offset: 3px; }
/* Kontaktformular (19.10. abends): Spam-Falle für Menschen unsichtbar (nicht display:none, damit einfache Bots sie ausfüllen); Link im Häkchen-Text */
.page.dashboard-glas #cform .hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.page.dashboard-glas #cform label.chk a { color: #fff; text-decoration: underline; text-decoration-color: var(--gl-lachs); text-underline-offset: 3px; }
.page.dashboard-glas #cform button[disabled] { opacity: .55; cursor: progress; }

/* Kugeln im Hintergrund der Unterseiten (20.10., Nutzer: Variante „dezent“; js/unterseiten-kugeln.js): Anteil der Startseiten-Anzahl, Helligkeit */
body { --unterseiten-kugeln: 0.45; --unterseiten-kugeln-hell: 0.6; }
canvas.bg-kugeln { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* Rechtstexte englisch (20.10.): Hinweis „Convenience translation – the German version is legally binding“ unter dem Kopf; deutsch leer → ausgeblendet */
.page.dashboard-glas .recht-vermerk { display: inline-block; margin: 22px 0 0; padding: 10px 16px; border: 1px solid rgba(255,138,102,.55); border-radius: 12px; font: 400 15px/1.45 'inotec Sans Text', sans-serif; color: rgba(255,255,255,.88); }
.page.dashboard-glas .recht-vermerk:empty { display: none; }
/* 20.10. (Nutzer): Förderlogos auf „Über uns“ über die ganze Kachelbreite – Breite je Logo nach Seitenverhältnis
   (EU 700 × 170 ≈ 4,12 : 1, Sachsen 990 × 180 = 5,5 : 1) → beide gleich hoch; bis 760 px untereinander (darunter wären sie nebeneinander kleiner als vorher, 52 px) */
.foerder-kachel .foerderlogos { flex-wrap: nowrap; gap: 24px; }
.foerder-kachel .foerderlogos .foerderleiste { min-width: 0; padding: 24px 30px; justify-content: center; }
.foerder-kachel .foerderlogos .foerderleiste.eu { flex: 4.12 1 0; }
.foerder-kachel .foerderlogos .foerderleiste.sn { flex: 5.5 1 0; }
.foerder-kachel .foerderlogos .foerderleiste img { width: 100%; height: auto; }
@media (max-width: 760px) { .foerder-kachel .foerderlogos { flex-wrap: wrap; gap: 16px; } .foerder-kachel .foerderlogos .foerderleiste.eu, .foerder-kachel .foerderlogos .foerderleiste.sn { flex: 1 1 100%; padding: 18px 22px; } }
/* 20.10. (Nutzer): leap:up-Logo (Netzwerk) so breit wie das EU-Logo der Förderung – gleiche Rechnung wie oben:
   Anteil 4,12 von 9,62 der Zeile abzüglich Abstand und Innenabstände, plus eigener Innenabstand; ≤ 760 px volle Breite */
.tile.wide > .foerderlogos > .foerderleiste.partner { flex: none; width: calc(60px + (100% - 24px - 120px) * 4.12 / 9.62); padding: 24px 30px; }   /* Flex rechnet den Innenabstand (2 × 30 px je Logo) zur Breite hinzu */
.tile.wide > .foerderlogos > .foerderleiste.partner img { width: 100%; height: auto; }
@media (max-width: 760px) { .tile.wide > .foerderlogos > .foerderleiste.partner { width: 100%; padding: 18px 22px; } }