/* ===== VALUE PROPS (nur Startseite) ===== */
.valueprops { max-width: var(--max-width); margin: 60px auto; padding: 0 var(--side-pad); }
.valueprops h2 { margin-bottom: 28px; }
.vp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vp-card {
  position: relative; height: 300px; border-radius: 14px; overflow: hidden;
  background-size: cover; background-position: center;
}
.vp-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0) 65%);
}
.vp-card .vp-text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.vp-card .vp-text h3 { font-size: var(--fs-card-title); margin-bottom: 6px; }
.vp-card .vp-text p { font-size: var(--fs-body-small); color: #e6e6e6; line-height: 1.4; }
.vp-handling { background-image: url('../images/startseite/wert-smartes-handling.jpg'); }
.vp-schutz { background-image: url('../images/startseite/wert-maximaler-schutz.jpg'); }
.vp-details { background-image: url('../images/startseite/wert-clevere-details.jpg'); }
.vp-gewicht { background-image: url('../images/startseite/wert-minimales-gewicht.jpg'); }

/* ===== CASES GRID (nur Startseite) ===== */
.cases { max-width: var(--max-width); margin: 60px auto; padding: 0 var(--side-pad); }
.cases .cases-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px;
}
.cases-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.cases-grid img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cases-grid > * { overflow: hidden; border-radius: 20px; }
.cases-grid > *:hover img { transform: scale(1.05); }
.cases-grid .span-2 { grid-column: span 2; }

/* .case-tile: Bild-Kachel mit Text-Overlay (2026-09-28). Bild und Text werden getrennt geliefert.
   Verlauf seit 2026-09-29 nach Vorbild mercedes-benz.de "Unsere Empfehlungen": Foto geht unten in
   einen durchgehend schwarzen Textblock ueber (kein durchgaengig halbtransparenter Verlauf wie bei
   .vp-card - bewusste Abweichung, da hier laengerer Story-Text auf reinem Schwarz besser lesbar ist). */
.cases-grid .case-tile { position: relative; display: block; text-decoration: none; color: inherit; }
.cases-grid .case-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Abdunklung pro Kachel steuerbar (--tile-solid: bis wohin durchgehend schwarz, --tile-fade: ab wo transparent),
     Standard 25 %/55 % – helle Bildmotive im unteren Drittel bekommen groessere Werte (2026-10-14) */
  background: linear-gradient(to top, #000 var(--tile-solid, 25%), rgba(0,0,0,0) var(--tile-fade, 55%));
}
.cases-grid .case-tile-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--mono-font); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.cases-grid .case-tile-text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.cases-grid .case-tile-text h3 { font-size: var(--fs-card-title); margin-bottom: 4px; }
.cases-grid .case-tile-text p { font-size: var(--fs-body-small); color: #e6e6e6; }
.cases-grid .case-tile-tag.placeholder,
.cases-grid .case-tile-text.placeholder * { color: #ccc; font-style: italic; }

/* .cta-tile: ausschliesslich in index.html verwendet, hier global verfuegbar (Vorgabe T3) */
.cases-grid .cta-tile {
  border-radius: 20px; background: var(--anthrazit); color: #fff; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
  min-height: 220px; transition: transform .25s ease;
}
.cases-grid .cta-tile:hover { transform: translateY(-4px); }
.cases-grid .cta-tile h3 { font-size: var(--fs-card-title); margin-bottom: 8px; color: #fff; }
.cases-grid .cta-tile p { font-size: var(--fs-body-small); color: #ddd; margin-bottom: 14px; line-height: 1.5; }
.cases-grid .cta-tile .btn { align-self: flex-start; }

/* .cta-tile--img: Bild-Hintergrund-Variante von .cta-tile (2026-10-12), Platzhalterbilder statt
   flaecher Anthrazit-Flaeche. Bild + abdunkelnder Verlauf (analog .case-tile::after), Inhalt bleibt
   wie bei .cta-tile (Titel, Text, Button). */
.cases-grid .cta-tile--img { position: relative; overflow: hidden; }
.cases-grid .cta-tile--img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.cases-grid .cta-tile--img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, #000 15%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.4) 100%);
}
.cases-grid .cta-tile--img h3,
.cases-grid .cta-tile--img p,
.cases-grid .cta-tile--img .btn { position: relative; z-index: 2; }

/* ===== TRUST LIST (nur Startseite) ===== */
.trust { max-width: var(--max-width); margin: 70px auto; padding: 0 var(--side-pad); }
.trust h2 { margin-bottom: 34px; }
.trust-list .tier { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6px; margin-bottom: 12px; }
.trust-list span { white-space: nowrap; }
.t1 { font-family: var(--heading-font); font-size: 32px; color: #1a1a1a; }
.t2 { font-family: var(--heading-font); font-size: 26px; color: #333; }
.t3 { font-family: var(--heading-font); font-size: 22px; color: #444; }
.t4 { font-family: var(--heading-font); font-size: 19px; color: #555; }
.t5 { font-size: var(--fs-body-small); color: #666; }
.t6 { font-size: var(--fs-body-small); color: #777; }
.t7 { font-size: 13px; color: #888; }
.t8 { font-size: 13px; color: #939393; }
/* Mobil-Seitenrand seit 2026-10-13 ueber --side-pad selbst geregelt (tokens.css),
   eigene Ausnahme hier entfernt (war redundant, identischer Mechanismus). */

/* ===== CLIENT LIST (Kundennamen im Trust-Bereich der Startseite, Blocksatz, neu 2026-10-05,
   Groessenstaffelung 2026-10-12) =====
   Eigenstaendige Komponente fuer index.html, NICHT .trust-list/.tier/.t1-.t8 oben - die bleiben
   unveraendert bestehen, weil standards-werte/index.html dieselbe Trust-Zeile mit den alten
   Klassen weiterverwendet und laut Aufgabe nicht angefasst werden soll. Die Groessen-/Farbstufen
   unten sind bewusst 1:1 von dort uebernommen (t1-t8-Werte), keine neuen Design-Werte erfunden.
   - Ohne JS: .client-list ist ein Flex-Container mit flex-wrap, justify-content:space-between
     wirkt bei mehrzeiligem Flex-Wrap automatisch PRO ZEILE (inkl. letzter Zeile) - echter
     Blocksatz ganz ohne JavaScript, "o.ae."-Variante zu text-align-last:justify. In diesem
     Fallback einheitliche Groesse (.client-list > .client-name, direktes Kind) - die
     Groessenstaffelung braucht bekannte Zeilengrenzen und damit JS (Progressive Enhancement:
     Kernfunktion/Text funktioniert ohne JS, die Staffelung on top mit JS).
   - Mit JS (assets/js/trust-justify.js): Namen werden in .client-row-Bloecke gruppiert (gleiche
     Flex-Technik pro Zeile). Jede Zeile bekommt per :nth-child ihre Groesse/Farbe (Kaskade an
     die Namen vererbt) - JS kennt dieselbe Werteliste (dort als Kommentar referenziert), um beim
     Packen pro Zeile mit der richtigen Schriftgroesse zu rechnen. Ab Zeile 8 bleibt es bei der
     kleinsten Stufe (t8-Werte). */
.client-list { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
.client-list > .client-name {
  white-space: nowrap; font-family: var(--heading-font); font-size: 14px; color: var(--grau-text); /* Kundenliste bewusst nicht von der Desktop-Skalierung betroffen (Jascha 2026-10-14) */
}
/* flex:0 0 100% ist noetig, weil .client-row selbst ein Flex-Item des aeusseren .client-list
   ist (sobald JS die Zeilen-Divs einfuegt) - ohne feste volle Breite wuerde der aeussere
   Flex-Umbruch mehrere schmale .client-row nebeneinander auf dieselbe Zeile packen UND der
   inneren justify-content:space-between fehlte der Platz zum Verteilen. */
/* Kein eigenes margin-bottom hier - der Abstand zwischen Zeilen kommt ausschliesslich vom
   row-gap:6px des aeusseren .client-list (sonst doppelter Abstand, da jede .client-row wegen
   flex:0 0 100% selbst eine Flex-Wrap-Zeile des Containers ist - Bug beim Testen gefunden: die
   reale Hoehe war durch die Dopplung ca. 120px groesser als die von JS fuer die Mobil-
   Trunkierung berechnete). */
.client-list .client-row { display: flex; flex: 0 0 100%; align-items: baseline; justify-content: space-between; font-family: var(--heading-font); }
.client-list .client-row:nth-child(1) { font-size: 32px; color: #1a1a1a; }
.client-list .client-row:nth-child(2) { font-size: 26px; color: #333; }
.client-list .client-row:nth-child(3) { font-size: 22px; color: #444; }
.client-list .client-row:nth-child(4) { font-size: 19px; color: #555; }
.client-list .client-row:nth-child(5) { font-size: 14px; color: #666; }
.client-list .client-row:nth-child(6) { font-size: 14px; color: #777; }
.client-list .client-row:nth-child(7) { font-size: 13px; color: #888; }
.client-list .client-row:nth-child(n+8) { font-size: 13px; color: #939393; }
.client-list .client-name { white-space: nowrap; }
/* Trenner (bestehendes Zeichen " ·", unveraendert) nur zwischen Namen - per :not(:last-child)
   nie als letztes Element einer Zeile (weder im Flat- noch im Row-Markup), nie am Zeilenanfang,
   da er immer als Suffix am VORHERIGEN Namen haengt, nie als eigenes Element vorangestellt. */
.client-list .client-name:not(:last-child)::after { content: " ·"; white-space: nowrap; }
.client-list .client-hidden { display: none; }

/* ===== PROCESS / STEP (Startseite + Engineering) =====
   step-top: Radius 24px + Verlauf #000 -> #112f2f aus engineering.html uebernommen,
   gilt jetzt einheitlich fuer alle Seiten (Backlog T6). */
.process { max-width: var(--max-width); margin: 70px auto 90px; padding: 0 var(--side-pad); }
.process-row { display: flex; position: relative; gap: 20px; align-items: stretch; }
.step {
  flex: 1; text-align: center; position: relative; z-index: 1;
  border: 1px solid #e6e6e2; border-radius: 24px; overflow: hidden; background: #fff;
}
.step-top {
  background: linear-gradient(180deg, #000 0%, #112f2f 100%);
  padding: 34px 16px 30px; border-radius: 24px;
}
.step-bottom { padding: 18px 18px 26px; }
.step img { width: 64px; height: 64px; margin: 0 auto; background: transparent; filter: invert(1) brightness(2); }
.step h3 { font-size: var(--fs-card-title); margin-bottom: 8px; }
.step p { font-size: var(--fs-body-small); color: var(--grau-text); }

/* ===== CONTACT — generische Basis aus index.html (auf der Startseite selbst nur
   .contact/.contact-intro/.hero-bar-actions sichtbar; contact-form/contact-info/team-grid
   sind hier ungenutztes Basis-CSS). Die tatsaechliche Kontaktseite hat ein eigenes,
   staerker abweichendes Set weiter unten unter ".contact-page" skaliert. ===== */
.contact { max-width: var(--max-width); margin: 70px auto; }
.contact h2 { margin-bottom: 10px; }
.contact-intro { font-size: var(--fs-body); color: var(--grau-text); max-width: 640px; margin-bottom: 36px; }
.contact-grid { display: flex; flex-direction: column; gap: 40px; margin-bottom: 60px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body-small); font-weight: 700; color: #333; }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--body-font); font-size: var(--fs-body-small); font-weight: 400;
  padding: 12px 14px; border: 1px solid #d8d8d3; border-radius: 14px; background: #fff; color: var(--schwarz);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--teal);
}
.contact-form label.checkbox { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.contact-form label.checkbox input { margin-top: 3px; }

.optional-fields { border: 1px solid #e4e4e0; border-radius: 10px; padding: 4px 16px; }
.optional-fields summary {
  cursor: pointer; padding: 14px 0; font-weight: 700; font-size: var(--fs-body-small);
  color: var(--teal); list-style: none; display: flex; align-items: center; gap: 8px;
}
.optional-fields summary::before { content: "+"; font-size: 18px; line-height: 1; }
.optional-fields[open] summary::before { content: "\2212"; }
.optional-fields summary::-webkit-details-marker { display: none; }
.optional-fields-inner { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 18px; }
.optional-fields .hint { font-weight: 400; font-size: 12.5px; color: #999; }
.optional-fields fieldset.checkbox-group { border: none; padding: 0; margin: 0; }
.optional-fields fieldset.checkbox-group legend { font-weight: 700; font-size: var(--fs-body-small); padding: 0 0 8px; }
.checkbox-inline { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; margin-bottom: 6px; }

.contact-info { background: var(--hell); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.info-block h3 { font-size: var(--fs-card-title); margin-bottom: 8px; }
.info-block p { font-size: var(--fs-body-small); color: #444; line-height: 1.6; }
.info-block a { color: var(--teal); font-weight: 700; }
.info-block.call-cta-top {
  background: var(--hell); border-radius: 16px; padding: 28px 32px; margin-bottom: 36px;
}
.call-cta-top .call-hours { font-size: var(--fs-body-small); color: var(--grau-text); margin-top: 8px; }
.form-heading { font-size: var(--fs-card-title); margin-bottom: 18px; }
.contact-pref { border: none; padding: 0; margin: 0 0 4px; }
.contact-pref legend { font-weight: 700; font-size: var(--fs-body-small); margin-bottom: 8px; padding: 0; }
.contact-pref .radio-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 24px; font-weight: 400; }
.info-block.call-cta p { font-size: var(--fs-card-title); color: var(--schwarz); }
.info-block.call-cta p.call-sub { font-size: var(--fs-body-small); color: #555; font-weight: 400; margin: 8px 0 12px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { background: #fafaf8; border: 1px solid #ececea; border-radius: 14px; padding: 28px 22px; text-align: center; }
.team-card .avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--anthrazit); color: #fff;
  font-family: var(--heading-font); font-size: 24px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; overflow: hidden;
}
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: var(--fs-card-title); margin-bottom: 4px; }
.team-card .role { display: block; font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 14px; }
.team-card .quote { font-size: var(--fs-body-small); color: var(--grau-text); font-style: italic; margin-bottom: 16px; min-height: 60px; }
.team-card .btn-link { font-size: 14px; }

/* ===== HUB HEADER (Engineering/Manufaktur/Produkte, neu 2026-10-04) =====
   Bild + H1 (+ optionaler Text darunter) nach Vorbild des Startseiten-Heros (.hero in base.css):
   gleiches Seitenverhaeltnis (1800/725, Bildformat der 3 Header-Fotos), identische
   Verlauf-Werte (links + unten), identische Schrift-Tokens - keine neuen Design-Werte.
   Bild als <img> (nicht CSS-background) analog .case-tile, damit ein echter Alt-Text aus
   dem Content moeglich ist statt eines rein dekorativen Hintergrunds. */
/* Kein overflow:hidden (anders als man erwarten wuerde): das <img> füllt die Box per
   object-fit:cover immer exakt aus, auch wenn sie durch langen Text (volle Saetze statt
   kurzer <br>-Zeilen wie beim Hero) ueber die aspect-ratio-Hoehe hinaus waechst - mit
   overflow:hidden wuerde der Text stattdessen abgeschnitten (so gefunden beim Mobil-Test). */
.hub-header { position: relative; aspect-ratio: 1800 / 725; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 0 50px; margin-bottom: var(--fs-h1); }
.hub-header img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--header-img-pos, 50% 50%); z-index: 0; }
.hub-header::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 15%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0) 55%),
    linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 8%, rgba(0,0,0,0) 22%);
}
.hub-header .wrap { position: relative; z-index: 2; width: 100%; }
/* max-width 40% seit 2026-10-13 (Jascha-Feedback, Vorbild mercedes-benz.de Hero: Headline
   steht links, schmale Spalte statt ueber die volle Breite) - Box waechst bei Bedarf trotzdem
   mit (kein overflow:hidden, s.o.), bei langen Saetzen also mehr Zeilen statt mehr Breite. */
.hub-header h1 { font-family: var(--headline-alt-font); font-size: var(--fs-h1); margin-bottom: 16px; overflow-wrap: break-word; max-width: max(40%, 10em); }
/* text-shadow seit 2026-10-13: der Verlauf allein (s.o.) reicht nicht bei jedem Foto - beim
   Case-Turm-Bild (heller/mittig als die bisherigen dunklen Werkstatt-Fotos) war der Text auf
   Mobil streckenweise schlecht lesbar. Dezent genug, um bei dunklen Fotos nicht aufzufallen. */
.hub-header h1, .hub-header p.desc { text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.hub-header p.desc { max-width: 640px; font-size: var(--fs-body); color: #ddd; }
@media (max-width: 900px) {
  /* Seitenrand auf Mobil seit 2026-10-13 ueber --side-pad selbst geregelt (tokens.css). */
  .hub-header h1 { font-size: 32px; max-width: none; }
  /* margin-bottom folgt der mobilen H1-Groesse (s.o.), s. Designrichtlinie "Abstand Header -> Inhalt". */
  .hub-header { margin-bottom: 32px; }
}

/* ===== PAGE INTRO (restliche Unterseiten) =====
   .page-head selbst ist seit 2026-10-13 nirgends mehr im Einsatz (alle 18 Seiten ohne
   Hub-Header-Bild nutzen jetzt .feature-band--no-image als Seitenkopf-Platzhalter, s.u. bzw.
   "Feature-Band" weiter unten in dieser Datei) - die toten .page-head-Regeln wurden entfernt.
   .page-intro bleibt bestehen: wird auf einigen Materialseiten weiterhin als allgemeiner
   Absatzstil mitten im Seiteninhalt wiederverwendet (nicht nur als Seitenkopf-Unterschrift). */
.page-intro { padding: 0 var(--side-pad) 30px; max-width: 640px; margin: 0; font-size: var(--fs-body); color: var(--grau-text); }
.section-heading { padding: 40px var(--side-pad) 20px; max-width: var(--max-width); margin: 0 auto; }
.section-heading h2 { font-size: var(--fs-h2); color: var(--anthrazit); }

/* ===== HUB GRID (Manufaktur = 3 Spalten, Engineering = hub-grid-single mit
   Inline-Override auf 2 Spalten) ===== */
.hub-grid, .hub-grid-single {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  padding: 0 var(--side-pad) 80px; max-width: var(--max-width); margin: 0 auto;
}
/* .cols-2: 2-Spalten-Modifier statt Inline-Style (2026-09-29) - ein Inline-
   grid-template-columns hatte hoehere Spezifitaet als die 900px-Media-Query
   und verhinderte so den Umbruch auf 1 Spalte bei schmalen Viewports. */
.hub-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.hub-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) {
  .hub-grid, .hub-grid-single { grid-template-columns: 1fr; }
  .hub-grid.cols-2, .hub-grid.cols-4 { grid-template-columns: 1fr; }
}
.hub-card { border: 1px solid #eee; border-radius: 16px; padding: 28px 26px; background: #fff; display: flex; flex-direction: column; }
.hub-card h3 { font-size: var(--fs-card-title); color: var(--anthrazit); margin-bottom: 12px; }
.hub-card p { font-size: var(--fs-body-small); color: var(--grau-text); line-height: 1.6; margin-bottom: 18px; }
.hub-card .btn-link { margin-top: auto; }
/* Hub-Karte mit Bild (2026-10-14, Bauart-Seite "Weitere Leistungen"): Bild 4:3 oben, randlos zur Kartenkante, freigestellt/weiss (contain) */
.hub-card--img { overflow: hidden; }
.hub-card-img { margin: -28px -26px 18px; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid #eee; }
.hub-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Team-Avatar in .hub-card (neu 2026-10-13, Über uns) – gleiches Prinzip wie .team-card .avatar
   (Kontaktseite), nur größer. .placeholder-Modifier nutzt das sitewide Platzhalter-Streifenmuster
   (identisch zu .form-card.placeholder/.bauart-row-img.placeholder), keine neue Design-Optik. */
.hub-card .avatar {
  width: 96px; height: 96px; border-radius: 50%; background: var(--anthrazit); color: #fff;
  font-family: var(--heading-font); font-size: 32px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; overflow: hidden; flex-shrink: 0;
}
.hub-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.hub-card .avatar.placeholder,
.team-card .avatar.placeholder,
.contact-page .team-card .avatar.placeholder {
  background: repeating-linear-gradient(135deg,#f3f3f0,#f3f3f0 10px,#ececE7 10px,#ececE7 20px); color: #b7b7b0;
}

/* ===== PRODUCT GRID (Produkte-Hub) ===== */
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; gap: 24px; padding: 0 var(--side-pad) 80px; max-width: var(--max-width); margin: 0 auto; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.product-card-img { aspect-ratio: 4/3; background: linear-gradient(180deg,#eee,#fff); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card-img img { width: 78%; height: 78%; object-fit: contain; transition: transform .35s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.product-card-body h3 { font-size: var(--fs-card-title); margin-bottom: 6px; color: var(--anthrazit); }
.product-card-body p { font-size: 13px; color: var(--grau-text); line-height: 1.5; margin-bottom: 14px; }
.product-card-body .btn-link { margin-top: auto; }

/* ===== PRODUCT HERO (Silent Rack / Produktdetailseiten) ===== */
.product-top {
  background: linear-gradient(180deg,
    #4b4c50 0%, #6c6e73 12%, #8b9095 24%, #a6abb1 36%,
    #c3c7cf 48%, #d5dae2 60%, #d5dae2 78%, #e8e9eb 90%, #ffffff 100%);
}
.product-hero {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 0 16px; /* 2026-10-14: Hero ca. 30 % niedriger (vorher 48/24px, Bild 65vh) */
  /* Kein festes aspect-ratio/overflow:hidden mehr (Vorgabe: Produktbild muss auf
     jeder Aufloesung komplett sichtbar sein, unabhaengig vom Bild-Seitenverhaeltnis) */
}
.product-hero h1 {
  font-family: var(--headline-alt-font);
  font-size: var(--fs-h2); /* 36px statt 52px, Mercedes-Groesse */
  color: var(--anthrazit);
  text-align: center;
  margin: 0 0 24px;
}
.product-hero-imgwrap {
  position: relative;
  width: 80%;
  max-width: 900px;
  display: flex; justify-content: center;
}
.product-hero-imgwrap img {
  max-width: 100%; max-height: 43vh; width: auto; height: auto;
  object-fit: contain; position: relative; z-index: 2;
}
.product-hero-shadow {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 62%; height: 7%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 72%);
  z-index: 1;
}
.product-hero-bar-inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 20px; padding: 22px var(--side-pad) 34px;
}
/* H1 zweizeilig (seit 2026-10-14, Content-H1 aus content/19-zoll-racks/silent-rack.md): erste Zeile gross, zweite Zeile
   (nach dem Gedankenstrich) kleiner (Anthrazit, da der Hero-Verlauf oben dunkel ist – Grau waere unlesbar); der Gedankenstrich bleibt fuer Screenreader/Suchmaschinen im Text, ist optisch ausgeblendet. */
.product-hero h1 .product-hero-dash { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.product-hero h1 .product-hero-sub { display: block; margin-top: 8px; font-size: var(--fs-card-title); font-weight: 600; color: var(--anthrazit); }
.product-hero-bar .hero-bar-actions { justify-content: center; }
/* Produktseite (Jascha 2026-10-14): Einleitungssatz („Dieses Rack wurde …“) in derselben Zeile wie die beiden Buttons –
   Text links, Buttons rechts, auf Inhaltsbreite; mobil untereinander (Text zuerst). Anrufen-Button kraeftiger:
   Rand 2px Anthrazit statt 1px hellgrau (bestehende Werte: .btn-Randstaerke, Token --anthrazit). */
.product-hero-bar-inner:has(.product-hero-intro) { justify-content: space-between; max-width: var(--max-width); margin: 0 auto; flex-wrap: nowrap; gap: 40px; }
.product-hero-intro { font-size: var(--fs-body); color: var(--schwarz); max-width: 70ch; line-height: 1.6; }
.product-hero-bar .hero-bar-actions { flex-shrink: 0; flex-wrap: nowrap; }
.product-hero-bar .btn-call { border: 2px solid var(--anthrazit); }
@media (max-width: 1200px) {
  /* unter 1200px reicht die Breite nicht fuer Text + 2 Buttons nebeneinander: untereinander, Text zuerst */
  .product-hero-bar-inner:has(.product-hero-intro) { flex-direction: column; align-items: flex-start; gap: 20px; }
  .product-hero-bar .hero-bar-actions { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .product-hero { padding-top: 20px; }
  .product-hero h1 { font-size: 32px; }
  .product-hero-imgwrap { width: 82%; }
  .product-hero-imgwrap img { max-height: 30vh; }
}

/* ===== FEATURE-BAND (neu 2026-10-12, Vorbild mercedes-benz.de GLA-Element) =====
   Flächiges Bild-Text-Band, Standard-Seitenrand (.wrap = --max-width/--side-pad), --hell-Hintergrund
   durchgehend über die volle Bandbreite. Zweispaltig (Text links, Freisteller-Bild rechts); Modifier
   .feature-band--no-image für Baustein ohne Bildspalte (erste Anwendung: Begriffssystem, s.u.). */
.feature-band { background: var(--hell); padding: 46px 0; margin: 46px 0; }
/* Seitenkopf ohne Header-Bild (2026-10-14, Jascha): grauer Kasten direkt unter dem Header, kein weisser Streifen dazwischen. */
.feature-band.page-head-band { margin-top: 0; }
.feature-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-band--no-image .wrap { grid-template-columns: 1fr; }
/* h1 seit 2026-10-13 ergaenzt: Feature-Band jetzt auch als Seitenkopf-Platzhalter auf 18
   Unterseiten ohne Hub-Header-Bild im Einsatz (Jascha-Vorgabe, "bis ein Header-Bild kommt"),
   genau wie die bestehende Begriffssystem-Anwendung - dieselbe Groesse/Optik wie h2, kein neuer
   Design-Wert. overflow-wrap:break-word als Sicherheitsnetz fuer lange Titel (Uebernahme aus
   .page-head h1, dort noetig fuer z.B. "HE, U und RU - Hoeheneinheiten im Rack"). */
.feature-band-text h1, .feature-band-text h2 { font-family: var(--headline-alt-font); font-size: var(--fs-h2); color: var(--anthrazit); margin-bottom: 12px; overflow-wrap: break-word; }
.feature-band-text p { font-size: var(--fs-body); color: var(--grau-text); margin-bottom: 24px; max-width: 480px; }
.feature-band-text .btn + .btn { margin-left: 16px; }
.feature-band-img { display: flex; justify-content: center; align-items: center; }
.feature-band-img img { max-width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(0,0,0,.15)); }
@media (max-width: 900px) {
  .feature-band .wrap { grid-template-columns: 1fr; }
  .feature-band-img { order: -1; }
}

/* Begriffssystem (Engineering – Flightcase-Formen): erste Anwendung von .feature-band, ohne Bild
   (kein Freisteller vorhanden) – Titel + Begriffsliste statt Unterzeile/Buttons. */
.feature-band-text .begriffe-list { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 4px; }
.feature-band-text .begriffe-list div { font-size: 13px; color: var(--grau-text); }
.feature-band-text .begriffe-list b { color: var(--anthrazit); }

/* ===== FORM-CARD / TYPEN-TEASER (Engineering – Flightcase-Formen) ===== */

.form-group { max-width: var(--max-width); margin: 0 auto; padding: 30px var(--side-pad) 0; }
.form-group h2 { font-size: 15px; letter-spacing: .06em; color: var(--teal); font-weight: 700; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 18px; row-gap: 64px; padding-bottom: 10px; }
@media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-card {
  position: relative; border-radius: 20px; overflow: visible; height: 150px;
  background: linear-gradient(135deg, #e9ecef 0%, #ffffff 82%);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}
.form-card.placeholder { background: repeating-linear-gradient(135deg,#f3f3f0,#f3f3f0 10px,#ececE7 10px,#ececE7 20px); display:flex; }
.form-card .glow-img { position: absolute; left: 32%; width: 62%; top: -46px; }
.form-card .body { position: absolute; left: 20px; bottom: 16px; right: 16px; }
.form-card.placeholder .body { position: static; margin: auto; text-align:center; }
.form-card h3 { font-size: 14.5px; color: var(--anthrazit); margin-bottom: 4px; }
.form-card p { font-size: 12px; color: var(--grau-text); line-height: 1.4; margin-bottom: 6px; }
.form-card .tags { font-family: var(--mono-font); font-size: 10px; color: #999; line-height: 1.5; }
.form-card .placeholder-label { color:#b7b7b0; font-size:11px; }
/* 2026-10-14 (alle 21 Bauform-Bilder vorhanden): Zeichnung und Text ueberlagerten sich bei breiten Bildern/langen Texten.
   Text links auf ~55 % Kartenbreite begrenzt und ueber dem Bild, Zeichnung rechts etwas schmaler. Nur Bauformen-Karten. */
.form-card .body { right: 45%; z-index: 1; }
.form-card .glow-img { left: 50%; width: 48%; }

.typen-teaser { background: var(--hell); border-radius: 16px; margin: 50px auto; width: calc(100% - 2*var(--side-pad)); max-width: calc(var(--max-width) - 2*var(--side-pad)); padding: 34px 36px; text-align:center; }
.typen-teaser h2 { font-size: var(--fs-card-title); color: var(--anthrazit); margin-bottom: 8px; }
.typen-teaser p { font-size: var(--fs-body-small); color: var(--grau-text); margin-bottom: 16px; }

/* ===== PROCESS-TEASER / CTA-BAND (Produkte, Engineering-Formen) =====
   Default = produkte.html (50px, kein Extra-Abstand); engineering-formen.html
   braucht mehr Abstand nach oben, da dort keine vorgeschaltete Teaser-Flaeche
   den Freiraum schon liefert -> per Body-Klasse ergaenzt. */
.process-teaser { background: var(--hell); padding: 50px var(--side-pad); text-align: center; margin-top: 20px; }
.process-teaser h2 { font-family: var(--headline-alt-font); font-size: var(--fs-h2); color: var(--anthrazit); margin-bottom: 20px; }
.cta-band { background: var(--anthrazit); padding: 50px var(--side-pad); text-align: center; }
.cta-band h2 { font-family: var(--headline-alt-font); font-size: var(--fs-h2); color: #fff; margin-bottom: 12px; }
.cta-band p { color: #ddd; font-size: var(--fs-body-small); max-width: 60ch; margin: 0 auto 22px; }
/* CTA-Band, Desktop (seit 2026-10-14): Buttons rechts neben Headline/Text statt darunter, deutlich kleiner
   (Padding/Schrift wie gescrollter Header-CTA, nur bestehende Werte). Mobil <=900px: wie bisher gestapelt, zentriert. */
@media (min-width: 901px) {
  .cta-band { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: center; text-align: left; }
  .cta-band h2 { grid-column: 1; }
  .cta-band p { grid-column: 1; margin: 0; max-width: 60ch; }
  .cta-band .hero-bar-actions { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
  .cta-band .btn { padding: 10px 19px; font-size: 13px; }
  .cta-band .btn-call svg { width: 14px; height: 14px; }
}
.pg-engineering-formen .cta-band { padding: 54px var(--side-pad); margin-top: 40px; }

/* ===== PHONE POPUP / BTN-CALL (T3: global statt nur index.html) ===== */
.hero-bar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-call { display: inline-flex; align-items: center; gap: 8px; }
.btn-call svg { width: 18px; height: 18px; flex-shrink: 0; }
.phone-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1000; align-items: center; justify-content: center; }
.phone-popup.open { display: flex; }
.phone-popup-inner { background: #fff; border-radius: 20px; padding: 40px 48px; text-align: center; position: relative; max-width: 90%; }
.phone-popup-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--grau-text); }
.phone-popup-inner p { margin: 0 0 8px; font-size: var(--fs-body-small); color: var(--grau-text); }
.phone-popup-number { display: block; font-family: var(--headline-alt-font); font-size: 40px; font-weight: 700; color: var(--anthrazit); margin: 6px 0 10px; }
.phone-popup-hours { font-size: var(--fs-small); color: var(--grau-text); margin: 0; }

/* ===== KONTAKTSEITE (kontakt.html) — eigenes, abweichendes Contact/Team-Set,
   1:1 aus dem Original uebernommen und unter .contact-page skaliert, damit es
   die generische .contact-... / .team-... Basis oben (auf anderen Seiten ungenutzt)
   nicht ueberschreibt. ===== */
.contact-page { padding: 20px 0 70px; }
/* Einleitungssatz (Vorbild Mercedes-Kontaktformular, Text seit 2026-09-27 final, C7).
   Seit 2026-09-29 (jetzt echte H1 statt teal Kicker-Zeile, siehe Kontaktseiten-Umbau):
   Farbe Anthrazit statt Teal (wie alle anderen H1 im page-head), mehr Abstand oben/unten. */
.contact-page .intro-headline {
  font-family: var(--headline-alt-font); font-weight: 600; font-size: var(--fs-h2);
  color: var(--anthrazit); line-height: 1.3; max-width: 960px; margin: 44px auto var(--fs-h2);
}
.contact-page .intro-headline.placeholder { color: var(--grau-text); font-style: italic; font-weight: 400; }
/* Seit 2026-09-29: kein Hintergrundkasten mehr (Jascha-Feedback: "sieht immer doof aus"),
   stattdessen buendig mit .contact-grid (identische max-width+margin), Telefonnummer als
   .btn-outline-light statt Pfeil-Textlink. */
/* Seit 2026-10-04: Anruf-Block + neuer Besuchs-Block nebeneinander in .visit-grid (vorher
   stand .call-cta-top allein mit eigener max-width+margin - die zentrierende Rolle uebernimmt
   jetzt .visit-grid, die Boxen selbst werden Flex-Kinder). */
.contact-page .visit-grid { display: flex; gap: 40px; max-width: 960px; margin: 0 auto 40px; align-items: flex-start; }
.contact-page .visit-grid .call-cta-top,
.contact-page .visit-grid .visit-cta-top { flex: 1; min-width: 0; }
@media (max-width: 900px) { .contact-page .visit-grid { flex-direction: column; gap: 28px; } }
.contact-page .call-cta-top .call-cta-heading,
.contact-page .visit-cta-top .call-cta-heading {
  font-family: var(--headline-alt-font); font-weight: 700; font-size: var(--fs-card-title);
  color: var(--anthrazit); margin-bottom: 6px;
}
.contact-page .call-cta-top .call-sub,
.contact-page .visit-cta-top .call-sub { font-size: var(--fs-body-small); color: var(--grau-text); max-width: 480px; margin-bottom: 16px; }
.contact-page .call-cta-top .btn { margin-bottom: 10px; }
.contact-page .call-cta-top .call-hours { font-size: var(--fs-body-small); color: var(--grau-text); margin-top: 0; }
/* Kartenplatzhalter (kein Kartendienst eingebunden) - Streifenmuster wiederverwendet von
   .bauart-row-img.placeholder / .form-card.placeholder, gleiche Werte, keine neue Design-Optik. */
.contact-page .map-placeholder {
  width: 50%; aspect-ratio: 4/3; border-radius: 14px;
  background: repeating-linear-gradient(135deg,#f3f3f0,#f3f3f0 10px,#ececE7 10px,#ececE7 20px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #b7b7b0; font-size: var(--fs-body-small); font-style: italic; padding: 16px;
}
.contact-page .form-heading { font-size: var(--fs-card-title); margin-bottom: 20px; }

.contact-page .contact-grid { display: flex; flex-direction: column; gap: 40px; margin: 0 auto 60px; max-width: 960px; }
.contact-page .contact-form { display: flex; flex-direction: column; gap: 22px; }
.contact-page .contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--anthrazit); }
.contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea {
  font-family: var(--headline-alt-font); font-size: 13.5px; font-weight: 400; padding: 12px 14px;
  border: 1px solid #d8d8d3; border-radius: 14px; color: var(--schwarz);
}
.contact-page .contact-form input:focus, .contact-page .contact-form select:focus, .contact-page .contact-form textarea:focus { outline: none; border-color: var(--teal); }
.contact-page .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .contact-page .form-row { grid-template-columns: 1fr; } }

/* Label-im-Feld-Muster (Vorbild mercedes-benz.de-Kontaktformular, 2026-09-27):
   Label steht als kleine teal-farbene Zeile IM umrandeten Feld statt als eigene
   Zeile darueber. Nur fuer Text-/Auswahl-/Textarea-Felder, nicht fuer Checkboxen/Radios.
   Ausschliesslich hier unter .contact-page, keine andere Seite betroffen. */
.contact-page .contact-form label.field {
  border: 1px solid #d8d8d3; border-radius: 14px; padding: 9px 14px 7px; gap: 1px;
  font-weight: 400; transition: border-color .15s ease;
}
.contact-page .contact-form label.field:focus-within { border-color: var(--teal); }
.contact-page .field-label { font-size: 11px; font-weight: 700; color: var(--teal); }
.contact-page .contact-form label.field input,
.contact-page .contact-form label.field select,
.contact-page .contact-form label.field textarea {
  border: none; padding: 0; border-radius: 0; font-size: 13.5px;
}
.contact-page .contact-form label.field .hint { margin-top: 4px; }

/* Datei-Upload (2026-09-29): natives <input type="file"> optisch versteckt, sichtbares
   <label for="..."> uebernimmt Klick/Tastatur (loest den Datei-Dialog ohne JS aus) und wird
   wie .btn-outline-light dargestellt statt des haesslichen Browser-Standard-"Durchsuchen". */
.contact-page .contact-form .file-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.contact-page .contact-form .file-field .btn { align-self: flex-start; }
.contact-page .contact-form .file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.contact-page .contact-pref { border: none; padding: 0; margin: 4px 0; }
.contact-page .contact-pref legend { font-weight: 700; font-size: 13px; margin-bottom: 10px; padding: 0; color: var(--anthrazit); }
/* Hoehere Spezifitaet als ".contact-page .contact-form label" (flex-direction:column),
   sonst werden Radio-/Checkbox-Labels ungewollt gestapelt statt nebeneinander gestellt. */
.contact-page .contact-form label.radio-inline { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 400 !important; cursor: pointer; }
.contact-page .radio-inline input[type="radio"] {
  appearance: none; width: 20px; height: 20px; border: 1.5px solid #999; border-radius: 50%;
  display: inline-block; position: relative; margin: 0; cursor: pointer;
}
.contact-page .radio-inline input[type="radio"]:checked { border-color: var(--anthrazit); }
.contact-page .radio-inline input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--anthrazit);
}

.contact-page .subsection-heading { font-size: 15px; font-weight: 700; color: var(--anthrazit); margin: 10px 0 2px; }
.contact-page details.optional-fields summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--teal); margin: 6px 0 14px; }
.contact-page .optional-fields-inner { display: flex; flex-direction: column; gap: 16px; }
.contact-page .checkbox-group { border: none; padding: 0; margin: 0; }
.contact-page .checkbox-group legend { font-weight: 700; font-size: 13px; margin-bottom: 8px; padding: 0; }
.contact-page .contact-form label.checkbox-inline, .contact-page .contact-form label.checkbox { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 13px; margin-right: 20px; }
.contact-page .hint { display: block; font-size: 11px; color: var(--grau-text); font-weight: 400; margin-top: 4px; }

/* max-width 960px seit 2026-10-13 (Jascha-Feedback: Elemente unter dem Kontaktformular auf
   die passende Breite) - vorher ungebremst volle .contact-page-Breite (bis 1744px), deutlich
   breiter als .visit-grid/.contact-grid/.intro-headline (alle 960px) direkt darueber. */
.contact-page .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
@media (max-width: 900px) { .contact-page .team-grid { grid-template-columns: repeat(2,1fr); } }
.contact-page .team-card { text-align: center; }
.contact-page .team-card .avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--anthrazit); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--heading-font);
  font-weight: 700; font-size: 20px; margin: 0 auto 10px; overflow: hidden;
}
.contact-page .team-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-page .team-card h4 { font-size: 14px; margin-bottom: 2px; }
.contact-page .team-card .role { font-size: 11.5px; color: var(--teal); font-weight: 600; }
.contact-page .team-card .quote { font-size: 11.5px; color: var(--grau-text); font-style: italic; margin: 8px 0; }
.contact-page .team-grid-note { font-size: var(--fs-body-small); color: var(--grau-text); text-align: center; max-width: 960px; margin: 24px auto 0; }
/* Inline-Link in der Datenschutz-Checkbox: sonst per globalem Reset unsichtbar (a{color:inherit}). */
.contact-page .contact-form label.checkbox a { color: var(--teal); text-decoration: underline; }

/* ===== ALLGEMEINE FAQ (zentrales, wiederverwendetes Element aus content/_global/faq-allgemein.md
   – laut Content-Vorgabe auch auf allen Produktseiten und der Engineering-Hauptseite geplant,
   aktuell nur auf der Kontaktseite eingebaut). Wiederverwendung des .optional-fields-Stils. ===== */
.faq { max-width: var(--max-width); margin: 0 auto; padding: 20px var(--side-pad) 70px; }
/* Auf der Kontaktseite steht die FAQ direkt unter .contact-page, das sein eigenes
   Seiten-Padding mitbringt (0 statt --side-pad) - Randabstand hier nicht doppeln.
   max-width 960px seit 2026-10-13 (Jascha-Feedback: passende Breite wie Formular/Team-Grid
   darueber) - vorher lief die FAQ ungebremst ueber die volle .contact-page-Breite. */
.pg-kontakt .faq { max-width: 960px; margin: 0 auto; padding-left: 0; padding-right: 0; }
.faq h2 { margin-bottom: 20px; }
.faq-item { border: 1px solid #e4e4e0; border-radius: 10px; padding: 4px 20px; margin-bottom: 12px; }
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; font-size: var(--fs-body-small);
  color: var(--anthrazit); list-style: none; display: flex; align-items: center; gap: 8px;
}
.faq-item summary::before { content: "+"; font-size: 18px; line-height: 1; color: var(--teal); }
.faq-item[open] summary::before { content: "\2212"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { font-size: var(--fs-body-small); color: var(--grau-text); line-height: 1.6; padding: 0 0 18px; }

/* ===== DATA-TABLE / TEXT-SECTION (Maße-Seite, 2026-09-28) - nur bestehende Tokens ===== */
.text-section { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--side-pad) 30px; }
/* Mobil-Seitenrand seit 2026-10-13 ueber --side-pad selbst geregelt (tokens.css), eigene
   Ausnahme hier entfernt (war redundant, identischer Mechanismus). */
.text-section h3 { font-size: var(--fs-card-title); color: var(--anthrazit); margin-bottom: 6px; }
.text-section p, .text-section ul { font-size: var(--fs-body-small); color: var(--grau-text); line-height: 1.6; max-width: 70ch; }
.text-section ul { padding-left: 20px; margin-top: 8px; }
.text-section li { margin-bottom: 6px; }
.text-section a { color: var(--teal); font-weight: 600; text-decoration: underline; }
/* Text-Abschnitt mit Bild (neu 2026-10-14, Standards & Werte): Bild neben Überschrift/Text, mit
   --img-right abwechselnd rechts (wie .bauart-row). Bild max. 300px = Originalgröße (B12), Radius/Abstand
   wie .bauart-row. ≤900px gestapelt, Bild oben. */
.text-section--img { display: grid; grid-template-columns: 300px 1fr; column-gap: 56px; align-items: center; }
.text-section--img-right { grid-template-columns: 1fr 300px; }
.text-section--img-right .text-section-img { order: 2; }
.text-section-img { width: 100%; height: auto; border-radius: 20px; display: block; }
@media (max-width: 900px) {
  .text-section--img, .text-section--img-right { grid-template-columns: 1fr; row-gap: 16px; }
  .text-section--img-right .text-section-img { order: 0; }
  .text-section-img { max-width: 300px; }
}
.data-table-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--side-pad) 40px; overflow-x: auto; }
.data-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--fs-body-small); }
.data-table th, .data-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid #eee; white-space: nowrap; }
.data-table th { background: var(--hell); color: var(--anthrazit); font-weight: 700; }
.data-table td { color: var(--grau-text); }
/* .spec-sheet: Label/Wert-Tabelle mit langen Textwerten (z.B. Technische Daten Produktseiten) -
   normaler Zeilenumbruch statt nowrap, Label-Spalte schmal. */
.data-table.spec-sheet { min-width: 0; }
.data-table.spec-sheet th, .data-table.spec-sheet td { white-space: normal; }
.data-table.spec-sheet th { width: 220px; }
@media (max-width: 900px) {
  .data-table.spec-sheet th { width: 130px; padding-left: 12px; padding-right: 8px; }
  .data-table.spec-sheet td { padding-left: 8px; }
}
.placeholder-text { color: var(--grau-text); font-style: italic; }

/* Technische Daten + Rating-Balken nebeneinander (Produktseiten, neu 2026-09-29) */
.specs-flex { display: flex; gap: 48px; align-items: flex-start; }
.specs-table-col { flex: 1 1 460px; min-width: 0; overflow-x: auto; }
@media (max-width: 900px) {
  .specs-flex { flex-direction: column; gap: 28px; }
}

/* ===== RECHTLICHES (Übersicht + AGB-Downloads, 2026-09-28) ===== */
.legal-list { list-style: none; max-width: var(--max-width); margin: 0 auto 20px; padding: 0 var(--side-pad); }
.legal-list li { border-bottom: 1px solid #eee; padding: 14px 0; }
.legal-list a { color: var(--teal); font-weight: 600; text-decoration: none; }
.legal-list a:hover { text-decoration: underline; }
.download-list { list-style: none; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--side-pad) 60px; }
.download-list li { border-bottom: 1px solid #eee; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.download-list a { color: var(--teal); font-weight: 600; text-decoration: none; }
.download-list a:hover { text-decoration: underline; }
.download-list .filesize { font-size: var(--fs-small); color: var(--grau-text); }

/* ===== BAUART-ROW (Flightcase Bauart, 2026-09-28) - alternierende Bild/Text-Zeile,
   nur bestehende Tokens. Reihenfolge per Grid-Areas: Desktop Bild neben Titel/Text/
   Specs/Rating (abwechselnd links/rechts), Mobil gestapelt Titel -> Bild -> Text -> Rating. */
.bauart-row {
  display: grid; column-gap: 56px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "img title" "img text" "img specs" "img rating";
  max-width: var(--max-width); margin: 0 auto 134px; padding: 0 var(--side-pad);
}
/* 2026-10-14 (Jascha): Bild/Slider 2/3, Textblock 1/3 (vorher 42 % Bild), Zeilenabstand 56px -> 112px -> 224px -> 134px (Jascha: -40 %, Desktop; mobil 112px). */
.bauart-row:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas: "title img" "text img" "specs img" "rating img";
}
/* Bauart-Seite: seit Wegfall der H2 „Flightcase-Bauarten“ (2026-10-14) ist die erste Zeile ein gerades Kind –
   Wechsel hier umgedreht, damit die erste Bauart wie bisher mit dem Bild links beginnt. Nur Desktop, mobil gestapelt. */
@media (min-width: 901px) {
  .pg-engineering-bauart .bauart-row { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .pg-engineering-bauart .bauart-row:nth-child(even) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "img ." "img title" "img text" "img specs" "img rating" "img .";
  }
  .pg-engineering-bauart .bauart-row:nth-child(odd) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: ". img" "title img" "text img" "specs img" "rating img" ". img";
  }
}
.bauart-row-slider { grid-area: img; align-self: center; }
.bauart-row-img { grid-area: img; align-self: center; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: #f3f3f0; }
.bauart-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bauart-row-img.placeholder {
  background: repeating-linear-gradient(135deg,#f3f3f0,#f3f3f0 10px,#ececE7 10px,#ececE7 20px);
  display: flex; align-items: center; justify-content: center; color: #b7b7b0; font-size: 13px;
}
/* Kachel-Slider (.tile-slider, neu 2026-10-13, ersetzt den Bauart-Slider): horizontale Kachelreihe mit
   CSS-Scroll-Snap. Seit 2026-10-14 ENDLOS in beide Richtungen (assets/js/tile-slider.js klont die Kacheln
   davor/dahinter und springt unsichtbar zurueck): vor der ersten Kachel liegt die letzte, links und rechts
   ragt jeweils ein Stueck der Nachbarkachel herein (--tile-peek, halbiert gegenueber der ersten Fassung).
   Kachel = Bild + Titel + Eigenschaften, Optik wie .hub-card (Rand #eee, Radius 16px). Dezente Pfeile
   links/rechts; ohne JS bleibt Wischen/Scrollen ohne Endlosschleife moeglich. Nur bestehende Tokens/Werte. */
.tile-slider { --tile-peek: 52px; --tile-gap: 16px; position: relative; container-type: inline-size; min-width: 0; }
.tile-slider-track {
  display: flex; gap: var(--tile-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.tile-slider.is-loop .tile-slider-track { scroll-padding-left: calc(var(--tile-peek) + var(--tile-gap)); }
.tile-slider-track::-webkit-scrollbar { display: none; }
.tile-slider-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.tile { flex: 0 0 calc(100% - 2 * (var(--tile-peek) + var(--tile-gap))); scroll-snap-align: start; border: 1px solid #eee; border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.tile-img { aspect-ratio: 4/3; background: #f3f3f0; overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-img.is-image { background: #fff; }
.tile-img.is-image img { object-fit: contain; }
.tile-img.placeholder {
  background: repeating-linear-gradient(135deg,#f3f3f0,#f3f3f0 10px,#ececE7 10px,#ececE7 20px);
  display: flex; align-items: center; justify-content: center; color: #b7b7b0; font-size: 13px;
}
.tile-body { padding: 18px 22px 22px; }
.tile-body h4 { font-family: var(--heading-font); font-size: var(--fs-nav); line-height: 1.3; color: var(--anthrazit); }
.tile-body ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--fs-body-small); color: var(--grau-text); line-height: 1.6; }
/* Bauart-Kacheln (Jascha 2026-10-14): Eigenschaften in einer Zeile, getrennt mit „ ·“ wie die Kundennamen
   (.client-list, gleiches Zeichen); bricht bei Platzmangel zwischen den Eintraegen um, nie innerhalb. */
.bauart-row-slider .tile-body ul { display: flex; flex-wrap: wrap; column-gap: .35em; }
.bauart-row-slider .tile-body li { white-space: nowrap; }
.bauart-row-slider .tile-body li:not(:last-child)::after { content: " ·"; }
.tile-body p { margin-top: 8px; font-size: var(--fs-body-small); color: var(--grau-text); line-height: 1.6; }
/* Variante fuer volle Bildschirmbreite (z. B. Silent-Rack-Highlights): feste Kachelbreite, mehrere Kacheln
   gleichzeitig sichtbar. Aktive Kachel linksbuendig mit dem Seiteninhalt, links davon ragt die vorherige,
   rechts laufen weitere Kacheln bis zum Bildschirmrand. */
.tile-slider--wide { --tile-w: 340px; --tile-lead: calc(max(0px, (100vw - var(--max-width)) / 2) + var(--side-pad)); max-width: none; margin: 0 auto 40px; padding: 0; }
.tile-slider--wide .tile { flex-basis: var(--tile-w); }
.tile-slider--wide .tile-slider-track { padding-left: var(--tile-lead); }
.tile-slider--wide.is-loop .tile-slider-track { padding-left: 0; scroll-padding-left: var(--tile-lead); }
.tile-slider-arrow {
  position: absolute; top: calc((100cqw - 2 * (var(--tile-peek) + var(--tile-gap))) * .375); transform: translateY(-50%); width: 32px; height: 32px; padding: 0 0 3px;
  border-radius: 50%; border: 1px solid #ddd; background: #fff; color: var(--anthrazit); font-size: 20px; line-height: 1;
  cursor: pointer; opacity: .55; transition: opacity var(--transition-fast); z-index: 1;
}
.tile-slider--wide .tile-slider-arrow { top: calc(var(--tile-w) * .375); }
/* Standard-Slider (Bauart): Nachbarkacheln NICHT angeschnitten sichtbar (Jascha 2026-10-14). Gesamtbreite und Kachelbreite bleiben
   gleich: der Track ist links/rechts um (Peek+Gap) eingerueckt und schneidet genau an der Kachelkante ab, die Pfeile sitzen
   in den freien Raendern neben der Kachel. Die Endlosschleife laeuft unveraendert (Nachbarn liegen nur ausserhalb des Tracks). */
.tile-slider:not(.tile-slider--wide):not(.tile-slider--three) .tile-slider-track { margin: 0 calc(var(--tile-peek) + var(--tile-gap)); }
.tile-slider:not(.tile-slider--wide):not(.tile-slider--three) .tile { flex-basis: 100%; }
.tile-slider:not(.tile-slider--wide):not(.tile-slider--three).is-loop .tile-slider-track { scroll-padding-left: 0; }
.tile-slider:not(.tile-slider--wide):not(.tile-slider--three) .tile-slider-arrow.prev { left: calc((var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
.tile-slider:not(.tile-slider--wide):not(.tile-slider--three) .tile-slider-arrow.next { right: calc((var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
/* Bauart (Jascha 2026-10-14): Kachel buendig mit der Inhaltskante (kein Einzug fuer die Pfeile mehr) – Bildkante sitzt seitlich
   auf derselben Linie wie die Elemente darueber. Pfeile liegen dafuer innen auf dem Bild (12px vom Rand, Bildmitte). */
.tile-slider.bauart-row-slider .tile-slider-track { margin: 0; }
.tile-slider.bauart-row-slider .tile-slider-arrow { top: calc(100cqw * .375); opacity: .85; }
.tile-slider.bauart-row-slider .tile-slider-arrow.prev { left: 12px; }
.tile-slider.bauart-row-slider .tile-slider-arrow.next { right: 12px; }
/* Hover-Zoom auf den Kachelbildern (Jascha 2026-10-14) – gleicher Effekt wie Empfehlungs-Kacheln/Produktkarten (scale 1.05, .35s). */
.bauart-row-slider .tile-img { overflow: hidden; }
.bauart-row-slider .tile-img img { transition: transform .35s ease; }
.bauart-row-slider .tile:hover .tile-img img { transform: scale(1.05); }
/* Bauart, Desktop (Jascha 2026-10-14, ersetzt „Slider-Hoehe = Textblock“ und den Vorschlag „Eigenschaften neben dem Bild“):
   jede Kachel zeigt das Bild fest im Format 4:3, Titel/Eigenschaften darunter. Der Textblock steht vertikal mittig neben dem Slider
   (leere 1fr-Zeilen oben/unten im Grid, s. .pg-engineering-bauart .bauart-row). Mobil siehe unten. */
@media (min-width: 901px) {
  .bauart-row-slider { align-self: center; }
}
@media (max-width: 900px) {
  .tile-slider { --tile-peek: 24px; }
  .tile-slider--wide { --tile-w: calc(100vw - 2 * (var(--tile-peek) + var(--tile-gap))); --tile-lead: calc(var(--tile-peek) + var(--tile-gap)); }
}
.bauart-row-title { grid-area: title; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; align-self: end; }
.bauart-row-title h3 { font-size: var(--fs-card-title); color: var(--anthrazit); }
/* Zusatz LIGHT / ULTRA LIGHT direkt in der Ueberschrift (2026-10-14, ersetzt .bauart-badge auf der Bauart-Seite):
   Versalien stehen im Text, Farbe Teal als Hervorhebung. */
.bauart-suffix { color: var(--teal); }
.bauart-badge {
  font-family: var(--mono-font); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 3px 12px;
}
.bauart-row-text { grid-area: text; color: var(--grau-text); font-size: var(--fs-body-small); line-height: 1.6; margin-bottom: 18px; }
.bauart-row-specs { grid-area: specs; font-family: var(--mono-font); font-size: 11px; color: #999; letter-spacing: .02em; margin-bottom: 22px; }
.bauart-row-ratings { grid-area: rating; display: flex; flex-direction: column; gap: 14px; }
.bauart-rating-label { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--anthrazit); font-weight: 600; margin-bottom: 6px; }
.bauart-rating-track { height: 8px; border-radius: 999px; background: var(--hell); overflow: hidden; }
.bauart-rating-fill { height: 100%; border-radius: 999px; background: var(--teal); }
@media (max-width: 900px) {
  .bauart-row, .bauart-row:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "img" "text" "specs" "rating";
    padding-left: 0; padding-right: 0; row-gap: 14px;
  }
  .bauart-row-title, .bauart-row-text, .bauart-row-specs, .bauart-row-ratings { padding: 0 20px; align-self: auto; }
  .bauart-row-img { border-radius: 0; }
  /* Bauart-Seite mobil (Jascha 2026-10-14): Textblock mit Ueberschrift immer UEBER dem Bild, Bild zuletzt,
     danach deutlicher Abstand (112px) zur naechsten Ueberschrift. */
  .pg-engineering-bauart .bauart-row, .pg-engineering-bauart .bauart-row:nth-child(even) {
    grid-template-areas: "title" "text" "specs" "rating" "img";
    margin-bottom: 112px;
  }
  .pg-engineering-bauart .bauart-row-ratings { margin-bottom: 10px; }
  /* Kachel mobil buendig mit dem Text darueber (gleicher Seitenrand statt Bildschirmrand). */
  .pg-engineering-bauart .bauart-row-slider { margin: 0 var(--side-pad); }
}

/* ===== TABLE-ZOOM (neu 2026-10-13, Plattenmaterialien-Vergleichsmatrix): Tabelle wird klein als
   Vorschau gezeigt (unlesbar, nur Uebersicht), Klick oeffnet sie gross und scrollbar in einem
   Dialog. Ohne JS bleibt die Tabelle normal sichtbar (Scaling nur mit .is-ready). Nur bestehende Tokens. ===== */
.table-zoom { max-width: var(--max-width); margin: 0 auto 40px; padding: 0 var(--side-pad); position: relative; }
.table-zoom-inner { overflow-x: auto; }
.table-zoom .data-table { min-width: 0; }
.table-zoom-hint { display: none; }
.table-zoom.is-ready { cursor: zoom-in; }
.table-zoom.is-ready .table-zoom-clip { overflow: hidden; border: 1px solid #e4e4e0; border-radius: 10px; }
.table-zoom.is-ready .table-zoom-inner { overflow: hidden; width: 2200px; transform-origin: top left; pointer-events: none; }
.table-zoom.is-ready .table-zoom-inner .data-table { min-width: 2200px; }
.table-zoom.is-ready .table-zoom-hint {
  display: inline-block; position: absolute; right: calc(var(--side-pad) + 14px); bottom: 14px;
  font-family: var(--mono-font); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--anthrazit); border-radius: 999px; padding: 6px 14px;
}
.table-zoom:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.table-zoom-dialog { border: none; border-radius: 16px; padding: 0; width: min(1200px, 94vw); max-height: 90vh; }
.table-zoom-dialog::backdrop { background: rgba(0,0,0,.55); }
.table-zoom-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 1; }
.table-zoom-bar strong { color: var(--anthrazit); font-size: var(--fs-card-title); }
.table-zoom-close { border: none; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--anthrazit); }
.table-zoom-scroll { overflow: auto; max-height: calc(90vh - 64px); }
.table-zoom-scroll .data-table { min-width: 900px; }
@media (max-width: 900px) { .table-zoom { padding: 0 48px; } .table-zoom.is-ready .table-zoom-hint { right: 62px; } }

/* Material-Seiten (Plattenmaterialien, 2026-10-13): Bildslot oben, Text-Schnitte wie .page-intro/.faq */
.material-hero { max-width: var(--max-width); margin: 0 auto 30px; padding: 0 var(--side-pad); }
.material-hero .bauart-row-img { max-width: 640px; }
@media (max-width: 900px) { .material-hero { padding: 0 48px; } .material-hero .bauart-row-img { border-radius: 20px; } }
/* Material-Galerie (2026-10-13): Ansichtsbild gross (2x2), Detailbilder daneben, Klick = Vergroesserung
   (assets/js/image-zoom.js). Nur bestehende Tokens/Werte. */
.material-gallery { max-width: var(--max-width); margin: 0 auto 30px; padding: 0 var(--side-pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.material-img { padding: 0; border: 1px solid #eee; border-radius: 20px; overflow: hidden; background: #fff; cursor: zoom-in; aspect-ratio: 1/1; }
.material-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-img.is-main { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
.material-img.is-main:only-child { grid-column: 1 / 2; grid-row: auto; aspect-ratio: 1/1; }
.material-img:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 900px) {
  .material-gallery { padding: 0 48px; grid-template-columns: repeat(2, 1fr); }
  .material-img.is-main { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 1/1; }
  .material-img.is-main:only-child { grid-column: 1 / 3; }
}
.img-zoom-dialog { border: none; border-radius: 16px; padding: 0; width: min(900px, 94vw); max-height: 94vh; background: #fff; }
.img-zoom-dialog::backdrop { background: rgba(0,0,0,.55); }
.img-zoom-dialog img { display: block; width: 100%; max-height: 88vh; object-fit: contain; }
.img-zoom-dialog .table-zoom-close { position: absolute; top: 8px; right: 14px; }
/* Kantenschutz-Ablage: Profilbilder unbeschnitten */
.pg-engineering-kantenschutz .bauart-row-img img { object-fit: contain; background: #fff; }
.material-details { padding-top: 0; padding-bottom: 30px; }
/* Mobil: Seitenrand 48px wie .page-head/.page-intro (sonst bleibt der 120px-Rand und Tabelle/Details werden zu schmal) */
@media (max-width: 900px) {
  [class*="pg-engineering-plattenmaterialien"] .data-table-wrap,
  [class*="pg-engineering-plattenmaterialien"] .faq { padding-left: 48px; padding-right: 48px; }
}

/* ===== Responsive (>900px Breakpoint, komponentenspezifisch) ===== */
@media (max-width: 900px) {
  .vp-grid, .cases-grid { grid-template-columns: 1fr; }
  /* Kachel-Texte wurden 2026-10-12 vervollständigt (vorher mitten im Satz abgeschnitten) und
     brauchen dadurch etwas mehr Platz; auf Mobil (1-spaltig, schmalste Kachelbreite) reichte die
     feste Kartenhoehe von 300px sonst nicht mehr, Text wurde durch overflow:hidden abgeschnitten.
     +40px nur hier (Desktop/Tablet unveraendert, dort passt der Text bereits bei 300px). */
  .vp-card { height: 340px; }
  .cases-grid .span-2 { grid-column: span 1; }
  .process-row { flex-direction: column; gap: 24px; }
  .contact-grid, .contact-page .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Desktop-Schriftgroessen (2026-10-14, Option A): feste 13px-Lesetexte folgen dem Token --fs-body-small ===== */
@media (min-width: 901px) {
  .team-card .role, .product-card-body p, .feature-band-text .begriffe-list div,
  .contact-page .contact-form label, .contact-page .contact-pref legend, .contact-page .checkbox-group legend { font-size: var(--fs-body-small); }
}
/* Seitenkopf-Band: lange Woerter (z. B. Datenschutzerklaerung) duerfen die Grid-Spalte nicht aufweiten (Mobil-Overflow 423px bei 390px) */
.feature-band-text { min-width: 0; }
.feature-band-text h1 { overflow-wrap: anywhere; }

/* ===== PRODUKTSEITE (Silent Rack, Umbau 2026-10-14, Jascha) ===== */
/* Highlights als Kachelraster wie "Unsere Empfehlungen" (.cases-grid/.case-tile, 3 Spalten, gleiche Kachelhoehe wie dort: Verhaeltnis
   485:566 gemessen bei 1920px). Erste Kachel = Ergaenzungsbild + Rating-Skalen im Textbereich, danach die Highlights. Platzhalterfotos sind
   freigestellt (PNG ohne Hintergrund): contain auf hellem Verlauf statt cover. */
.cases.cases-product { margin: 0 auto 60px; }
.cases-product .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* aspect-ratio der Kacheln darf die Spaltenbreite nicht aufweiten */
.cases-product .cases-grid .case-tile { align-self: stretch; justify-self: stretch; width: 100%; aspect-ratio: 485 / 566; }
/* Hoehen wie "Unsere Empfehlungen" auf der Startseite (gemessen: doppelt 995x663 = 3:2, einfach 485x566): Reihen mit einer doppelten
   Kachel sind hoeher, die einfache Kachel daneben streckt sich auf diese Hoehe; Reihen aus drei einfachen Kacheln bleiben 485:566. */
.cases-product .cases-grid .case-tile.span-2 { aspect-ratio: 3 / 2; }
/* Bild absolut, damit seine Eigenmasse nicht die Reihenhoehe bestimmen (Hoehe kommt allein von den einfachen Kacheln) */
.cases-product .cases-grid .case-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Doppelt breite Kacheln (.span-2) stehen immer mit mindestens einer einfachen Kachel in einer Reihe und uebernehmen deren Hoehe
   (Raster align-items: stretch). Welche Kacheln doppelt sind, waehlt tile-spans.js so, dass jede Reihe voll ist. */
.cases-product .cases-grid .case-tile.span-2 img.is-cutout { padding-top: 4%; padding-bottom: 30%; }
.cases-product .cases-grid .case-tile img.is-cutout { object-fit: contain; border-radius: 0; padding: 8% 8% 34%; background: linear-gradient(180deg,#eee,#fff); }
.cases-product .case-tile-ratings { display: flex; flex-direction: column; gap: 6px; }
.cases-product .case-tile-ratings .bauart-rating-label { color: #fff; margin-bottom: 0; }
.cases-product .case-tile-ratings .bauart-rating-label + .bauart-rating-track + .bauart-rating-label { margin-top: 10px; }
.cases-product .case-tile-ratings .bauart-rating-track { background: rgba(255,255,255,.25); }
/* Slider "Weitere spannende Produkte": 3 Kacheln nebeneinander in Inhaltsbreite, links/rechts dezente Pfeile in den freien Raendern,
   Endlosschleife (tile-slider.js). Mobil: eine Kachel, Pfeile in den Raendern. */
.tile-slider--three { max-width: var(--max-width); margin: 0 auto 60px; padding: 0 var(--side-pad); }
.tile-slider--three .tile-slider-track { margin: 0 calc(var(--tile-peek) + var(--tile-gap)); }
.tile-slider--three.is-loop .tile-slider-track { scroll-padding-left: 0; }
.tile-slider--three .tile { flex: 0 0 calc((100% - 2 * var(--tile-gap)) / 3); }
.tile-slider--three .tile-slider-arrow { top: calc(((100cqw - 2 * (var(--tile-peek) + var(--tile-gap)) - 2 * var(--tile-gap)) / 3) * .375); }
.tile-slider--three .tile-slider-arrow.prev { left: calc(var(--side-pad) + (var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
.tile-slider--three .tile-slider-arrow.next { right: calc(var(--side-pad) + (var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
.product-tile { text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.product-tile:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.product-tile .tile-img { background: linear-gradient(180deg,#eee,#fff); }
.product-tile .tile-img img { width: 78%; height: 78%; margin: auto; }
.product-tile .tile-img { display: flex; align-items: center; justify-content: center; }
.product-tile .tile-body { display: flex; flex-direction: column; flex: 1; }
.product-tile .tile-body .btn-link { margin-top: auto; padding-top: 14px; }
@media (max-width: 900px) {
  .tile-slider--three { padding: 0; }
  .tile-slider--three .tile { flex-basis: 100%; }
  .tile-slider--three .tile-slider-arrow { top: calc((100cqw - 2 * (var(--tile-peek) + var(--tile-gap))) * .375); }
  .tile-slider--three .tile-slider-arrow.prev { left: calc((var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
  .tile-slider--three .tile-slider-arrow.next { right: calc((var(--tile-peek) + var(--tile-gap)) / 2 - 16px); }
}
/* CTA-Band auf der Produktseite nur so breit wie der uebrige Inhalt (nicht randlos) */
.pg-silent-rack .cta-band { width: calc(100% - 2 * var(--side-pad)); max-width: calc(var(--max-width) - 2 * var(--side-pad)); margin: 60px auto; border-radius: 16px; padding: 44px 48px; }
@media (max-width: 900px) { .cases-product .cases-grid { grid-template-columns: minmax(0, 1fr); } .pg-silent-rack .cta-band { padding: 36px 24px; } .cases-product .cases-grid .case-tile.span-2 { grid-column: auto; } .cases-product .cases-grid .case-tile.span-2 img.is-cutout { padding: 8% 8% 34%; } }

/* ===== Vergleichsmatrix Plattenmaterialien (2026-10-14, Jascha): Standard-Schriftgroesse, Skalen statt Zahlen ===== */
.matrix-table th, .matrix-table td { vertical-align: middle; white-space: normal; }
.matrix-table td.matrix-mat { white-space: normal; color: var(--anthrazit); font-weight: 700; min-width: 220px; }
.matrix-table .matrix-use { display: none; margin-top: 2px; font-weight: 400; color: var(--grau-text); }
.matrix-rating { display: flex; align-items: center; gap: 12px; min-width: 150px; }
.matrix-rating .bauart-rating-track { flex: 1 1 90px; min-width: 70px; }
.matrix-rating span { flex: 0 0 3.9em; text-align: right; white-space: nowrap; }
.matrix-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 1199px) {
  .matrix-table .matrix-use-col { display: none; }
  .matrix-table .matrix-use { display: block; }
}

/* Hardfacts-Tabelle als letzte Kachel im Highlights-Raster (.spec-tile, Jascha 2026-10-14): dunkle Flaeche wie .cta-tile,
   Tabelle in hellen Farben, kein Bildverlauf. Waechst die Tabelle ueber das Kachelverhaeltnis hinaus (schmale Spalten), waechst die Kachel mit. */
.cases-product .cases-grid .case-tile.spec-tile { background: var(--anthrazit); color: #fff; display: flex; flex-direction: column; padding: 24px; aspect-ratio: auto; min-height: 0; }
.cases-product .cases-grid .case-tile.spec-tile::after { display: none; }
.spec-tile h3 { font-size: var(--fs-card-title); margin-bottom: 12px; color: #fff; }
.spec-tile .data-table { min-width: 0; font-size: var(--fs-body-small); }
.spec-tile .data-table th, .spec-tile .data-table td { background: transparent; border-bottom: 1px solid rgba(255,255,255,.15); padding: 8px 10px 8px 0; white-space: normal; vertical-align: top; }
.spec-tile .data-table th { color: #bbb; font-weight: 600; width: 36%; }
.spec-tile .data-table td { color: #fff; }
.spec-tile .data-table tr:last-child th, .spec-tile .data-table tr:last-child td { border-bottom: 0; }