/* Startseite Kündig (KORTHAUER, Entwurf 29.10.2026)
   Teil 1: Startbereich 1:1 aus dem Entwurf der Website-Aktion (site/w/v9bu79/entwurf/index.html, Vorlage _rund.html.j2,
   skin kacheln). Unverändert bis auf den Schriftpfad. Teil 2: Abschnitte darunter. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
:root {
  --brand: #00769f; --brand-text: #ffffff; --brand-w: #00769f;
  --bg: #f5f5f7;
  --tile: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0,0,0,.08);
  --glas: rgba(255,255,255,.72);
  --glas-ink: #1d1d1f;
  --glas-rand: rgba(255,255,255,.6);
  --wort: var(--brand-w);
  --zk-linie: #00769f;
  --fs-l: 21px; --fs-s: 15px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --r: 32px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink);
  font-size: var(--fs-s); line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Gemeinsam: Leiste, Knöpfe, Headline ---------- */
.leiste { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 10px 0 24px; border-radius: 999px;
  background: var(--glas); color: var(--glas-ink); border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px -12px rgba(0,0,0,.18); }
.marke { flex: none; display: flex; align-items: center; min-width: 0; }
.marke img { height: 40px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; }
.marke .wort { font-weight: 700; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.menue { display: flex; gap: 26px; margin-left: auto; min-width: 0; overflow: hidden; }
.menue a { white-space: nowrap; font-weight: 500; opacity: .82; }
.tel { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.menue + .tel { margin-left: 4px; }
.marke + .tel, .marke + .btn { margin-left: auto; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; flex: none; margin-left: auto; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor; transform: translateY(-3px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--brand); color: var(--brand-text); font-weight: 600; white-space: nowrap; transition: transform .25s var(--ease), filter .25s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.gross { height: 54px; padding: 0 30px; }
.mehr { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-w); font-weight: 600; white-space: nowrap; }
.mehr svg, .btn svg { flex: none; }
.h1 { font-weight: 700; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; color: var(--ink);
  --h-start: 88; --h-min: 44; --h-zeilen: 3; font-size: 80px; }
.h1 .w { display: inline; }
.h1 .akz { color: var(--brand-w); }
.dunkel .mehr { color: var(--ink); opacity: .9; }
body.eng .lead { font-size: 17px; }
body.eng .akte { margin-top: 20px !important; }
.lead { font-size: var(--fs-l); line-height: 1.45; color: var(--muted); font-weight: 450; }
.lead:empty { display: none; }
.akte { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* ---------- Mobile Leiste (nur Handy) ---------- */
.mbar { display: none; }

/* ======================= BÜHNE ======================= */
.skin-buehne .kopf { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); z-index: 10; }
.skin-buehne .buehne { text-align: center; padding: 142px 24px 0; }
.skin-buehne .h1 { max-width: 940px; margin: 0 auto; --h-start: 92; --h-min: 46; --h-zeilen: 3; }
.skin-buehne .lead { max-width: 660px; margin: 22px auto 0; }
.skin-buehne .akte { justify-content: center; margin-top: 34px; }
.skin-buehne .stage { width: min(1240px, calc(100% - 48px)); margin: 52px auto 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 7.4;
  background: var(--tile); position: relative; transform-origin: 50% 0; }
.skin-buehne .stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.skin-buehne .stage.marke-flaeche, .skin-kacheln .k-foto.marke-flaeche { background: var(--brand); color: var(--brand-text); display: flex; align-items: center; justify-content: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 48px; max-width: 980px; }
.chips span { border: 1.5px solid currentColor; border-radius: 999px; padding: 14px 26px; font-size: var(--fs-l); font-weight: 600; opacity: .95; }

/* ======================= FENSTER ======================= */
.skin-fenster { background: #e8e8ed; }
.skin-fenster .f-rahmen { position: relative; margin: 12px; }
.skin-fenster .schirm { position: relative; height: calc(100vh - 24px); min-height: 640px; border-radius: 30px; overflow: hidden;
  background: #00769f; isolation: isolate; }
.skin-fenster .schirm > img.wand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -1; }
.skin-fenster .schirm.ohne-foto { background:
  radial-gradient(70% 90% at 85% 10%, rgba(255,255,255,.28), transparent 60%),
  linear-gradient(135deg, #00769f, #006182); }
.skin-fenster .kopf { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 32px)); z-index: 3; }
.skin-fenster .fenster { position: absolute; left: 28px; bottom: 28px; width: min(640px, calc(54% - 28px)); padding: 38px 42px 36px;
  border-radius: 28px; background: rgba(255,255,255,.74); color: #1d1d1f; border: 1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.45); z-index: 2; }
.skin-fenster .fenster .h1 { color: #1d1d1f; --h-start: 64; --h-min: 38; --h-zeilen: 4; }
.skin-fenster .fenster .lead { color: #3a3a3c; margin-top: 16px; font-size: 19px; }
.skin-fenster .fenster .akte { margin-top: 26px; }
.skin-fenster .fenster .mehr { color: #00769f; }
.skin-fenster .widget { position: absolute; right: 28px; bottom: 28px; width: 248px; padding: 20px 22px; border-radius: 26px; z-index: 2;
  background: rgba(255,255,255,.74); color: #1d1d1f; border: 1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.45); }
.widget .ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--brand-text); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.widget .lbl { color: #6e6e73; font-weight: 500; }
.widget .nr { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ======================= KACHELN (Runde 4: Bento mit Inhalt, feste Proportionen) ======================= */
.skin-kacheln { --gap: 14px; --r: 30px; --r-k: 26px; --pad: 52px; --tint: color-mix(in srgb, var(--brand-w) 9%, var(--tile));
  --on-brand-soft: color-mix(in srgb, var(--brand-text) 16%, transparent); }
.skin-kacheln.dunkel { --tint: rgba(255,255,255,.08); }
.skin-kacheln .kopf-bar { max-width: 1440px; margin: 0 auto; height: 88px; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.skin-kacheln .marke { gap: 12px; }
.skin-kacheln .marke img { height: 56px; width: auto; max-width: 300px; }
.skin-kacheln .marke img.deckend { mix-blend-mode: multiply; }
.skin-kacheln.dunkel .marke img.deckend { mix-blend-mode: normal; }
/* Fix Runde 2: ohne Logo eine gesetzte Wortmarke (26 px, kräftig, Markenfarbe, ausgewogen zweizeilig statt 18 px
   Menüschrift); neben einem Signet der Name ausgewogen umbrochen ("Ingenieurbüro / Bölk und Gantner") */
.skin-kacheln .marke img { max-width: 380px; }
.skin-kacheln .marke .wort { font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; white-space: normal; max-width: 320px;
  color: var(--wort); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.skin-kacheln .marke img + .wort { font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); max-width: 250px; }
.skin-kacheln .menue { gap: 28px; }
.skin-kacheln .menue a { font-size: 15px; opacity: .78; }
.skin-kacheln .tel { font-size: 15px; }
/* Fix Runde 2: keine Tabellenziffern in Telefonnummern, sonst steht der Bindestrich gesperrt ("1017 - 0") */
/* Zifferngruppen (Vorwahl, Rufnummer) bleiben trotz enger Laufweite sichtbar getrennt */
.skin-kacheln .tel, .skin-kacheln .k-anruf .nr { font-variant-numeric: normal; font-feature-settings: "cv11", "ss01"; word-spacing: .22em; }
/* Fix 24.10. (fixa): Nummer in mehreren Blöcken ("0800 125 0 200"): Blöcke mit normalem Wortabstand, sonst zerfällt sie
   und wird so breit, dass sie am Tablet im Brief-Mockup unter das Handy reicht */
.skin-kacheln .tel.gegl, .skin-kacheln .k-anruf .nr.gegl { word-spacing: .04em; }
.skin-kacheln .kopf-bar .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.skin-kacheln .burger { border: 0; background: var(--tile); color: var(--ink); cursor: pointer; }
.skin-kacheln .bento { max-width: 1440px; margin: 0 auto; padding: 0 24px 24px; display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) var(--reihe-h, 176px);
  height: calc(100vh - 88px); min-height: 700px; }
/* Fix 24.10. (fixm1b, 4pmbxt): kompaktes helles Logo im dunklen Kopf (logo-gross) 84 px hoch, Kopf dafür 100 px
   (oben und unten je 8 px Luft), das Raster darunter entsprechend niedriger */
@media (min-width: 1101px) {
  .skin-kacheln.logo-gross .kopf-bar { height: 100px; }
  .skin-kacheln.logo-gross .bento { height: calc(100vh - 100px); }
}
.skin-kacheln .bento.ohne-reihe { grid-template-rows: minmax(0, 1fr); }
.skin-kacheln .bento.ohne-reihe .k-text { grid-row: 1 / -1; }
.skin-kacheln .bento > * { border-radius: var(--r); overflow: hidden; position: relative; min-height: 0; min-width: 0; margin: 0; }
/* Text-Kachel (Fix 23.10.): Headline, Unterzeile und Knöpfe als ein Block, senkrecht mittig. Kein Loch mehr zwischen
   kurzer Headline und Unterzeile; kurze Headlines setzt das Skript etwas größer. */
.skin-kacheln .k-text { grid-column: 1 / span 5; grid-row: 1; background: var(--tile); padding: var(--pad) var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: center; gap: 0; }
.skin-kacheln .k-text .k-unten { margin-top: 30px; }
.skin-kacheln .k-text .h1 { --h-start: 84; --h-min: 36; --h-zeilen: 5; letter-spacing: -.048em; line-height: 1.0; }
/* Lange Wörter (Kriterium 14): Wörter brechen nicht, solange die Schrift kleiner werden kann; ein Wort, das auch in der
   kleinsten Größe nicht passt, bekommt .trenn (Silbentrennung, lang="de"). Ohne Skript trennt der Browser selbst. */
.skin-kacheln .h1 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.skin-kacheln .h1 .w { white-space: nowrap; }
.skin-kacheln .h1 .w.trenn { white-space: normal; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Fix Runde 2: Wort mit weicher Trennstelle an einer Wortfuge (Vermessungs-wesen): nur dort trennen */
.skin-kacheln .h1 .w.trenn.weich { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
/* Fix Runde 2: Recruiting im Startbereich nur einmal. Steht die Karriere-Kachel (Tablet, Desktop), entfällt der Textlink;
   am Handy ist die Kachel ausgeblendet, dort bleibt der Link. */
@media (min-width: 761px) { .skin-kacheln .k-text .mehr.nur-handy { display: none; } }
.skin-kacheln .k-text .lead { font-size: 20px; line-height: 1.45; max-width: 34em; }
.skin-kacheln .k-text .akte { margin-top: 30px; gap: 28px; }
body.skin-kacheln.eng .k-text .lead { font-size: 17px; }
body.skin-kacheln.eng .k-text .akte { margin-top: 22px !important; }
/* Bildfläche */
.skin-kacheln .k-bild { grid-column: 6 / -1; grid-row: 1; background: var(--tile); }
.skin-kacheln .bento.bild-lang .k-bild { grid-row: 1 / -1; }
.skin-kacheln .k-bild > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus-d, 50% 40%);
  /* Zoom für Gruppenfotos (Tablet, Handy, seit Runde 2 bei sehr kleinen Köpfen auch Desktop): Ursprung = object-position,
     so zeigt dieselbe Prozentangabe den Ausschnitt */
  --z: var(--zoom-d, 1); transform: scale(var(--z)); transform-origin: var(--fokus-d, 50% 40%); }
/* Kachelreihe unter dem Bild: feste Höhe, Breiten nach Inhalt */
.skin-kacheln .k-reihe { display: contents; }
.skin-kacheln .k-kachel.pl { grid-column: 1 / span 5; grid-row: 2; }
.skin-kacheln .k-kachel.pr { grid-column: 6 / -1; grid-row: 2; }
.skin-kacheln .k-kachel.pr1 { grid-column: 6 / span 4; grid-row: 2; }
.skin-kacheln .k-kachel.pr2 { grid-column: 10 / -1; grid-row: 2; }
/* Gruppenfoto passt nicht in die Bildbox: Bild bekommt eine Spalte mehr (setzt das Skript) */
.skin-kacheln .bento.bild-breit .k-text, .skin-kacheln .bento.bild-breit .k-kachel.pl { grid-column: 1 / span 4; }
.skin-kacheln .bento.bild-breit .k-bild, .skin-kacheln .bento.bild-breit .k-kachel.pr { grid-column: 5 / -1; }
.skin-kacheln .bento.bild-breit .k-kachel.pr1 { grid-column: 5 / span 4; }
.skin-kacheln .bento.bild-breit .k-kachel.pr2 { grid-column: 9 / -1; }
.skin-kacheln .bento.bild-breit .k-text { --pad: 44px; }
/* Fix Runde 2, Modus "unter" (zwei Kacheln ohne Karriere-Foto): Text 6 Spalten, Bild 6 Spalten über beide Reihen,
   Leistungen und Anrufen als eigene Reihe unter dem Text (Spalten wie am Tablet, Leistungen breiter) */
@media (min-width: 1101px) {
  .skin-kacheln .bento.unter .k-text { grid-column: 1 / span 6; }
  .skin-kacheln .bento.unter .k-bild { grid-column: 7 / -1; grid-row: 1 / -1; }
  .skin-kacheln .bento > .k-reihe.unter { display: grid; grid-column: 1 / span 6; grid-row: 2; gap: var(--gap); border-radius: 0; overflow: visible; }
}
.skin-kacheln .k-kachel { position: relative; border-radius: var(--r-k); overflow: hidden; min-width: 0; padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: space-between; }
.skin-kacheln .k-lbl { font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--muted); }
.skin-kacheln .k-anruf { background: var(--brand); color: var(--brand-text); transition: filter .25s; }
.skin-kacheln .k-anruf:hover { filter: brightness(1.06); }
.skin-kacheln .k-anruf .k-lbl { color: inherit; opacity: .8; }
.skin-kacheln .k-anruf .ikon { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--on-brand-soft);
  display: flex; align-items: center; justify-content: center; }
.skin-kacheln .k-anruf .k-at { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-width: 0; }
.skin-kacheln .k-anruf .nr { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.skin-kacheln .k-anruf.pr .nr { font-size: 38px; }
.skin-kacheln .k-leist { background: var(--tile); color: var(--ink); }
/* Fix Runde 2: Label und Liste zusammen oben (kein Loch dazwischen), die Schrift wächst bis die Kachel gefüllt ist */
.skin-kacheln .k-leist { overflow: hidden; justify-content: flex-start; gap: 12px; }
/* Leistungen (Fix 23.10.): keine Punkte als Trenner (Regel 11), sondern ein ruhiges Raster, je Leistung eine Zelle mit feiner
   Linie darüber (2 x 2, bei drei Leistungen drei Spalten, in schmalen Kacheln eine Leistung pro Zeile). Keine Waisen. */
.skin-kacheln .k-l { flex: none; list-style: none; display: grid; grid-template-columns: repeat(var(--lsp, 2), minmax(0, 1fr));
  column-gap: 22px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.14; }
.skin-kacheln .k-l li { min-width: 0; padding: 9px 0 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  hyphens: manual; overflow-wrap: normal; }
/* Erst wenn die kleinste Schrift nicht reicht, darf ein Wort getrennt werden (setzt das Skript) */
.skin-kacheln .k-l.trenn li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Fix 24.10. (fixm1b, 523294, Kriterium 14): Passt keine Anordnung ohne Trennung, setzt das Skript die Kachel zuerst enger
   (weniger Polster, Klasse dicht). Erst wenn auch das nicht reicht, wird getrennt, und dann nur mit mindestens 5 Zeichen
   vor und 4 nach der Trennstelle (kein "Elektronenstrahlschwei-ßen", eher "Elektronenstrahl-schweißen"). */
.skin-kacheln .k-leist.dicht { padding-top: 18px; padding-bottom: 16px; gap: 8px; }
.skin-kacheln .k-leist.dicht .k-l li { padding: 5px 0 4px; }
.skin-kacheln .k-l.trenn li { hyphenate-limit-chars: 10 5 4; }
.skin-kacheln .k-leist.pr .k-l { max-width: 620px; }
.skin-kacheln .k-job { padding: 0; background: var(--ink); }
.skin-kacheln .k-job img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fj-d, 50% 30%);
  --zj: var(--zj-d, 1); transform: scale(var(--zj)); transform-origin: var(--fj-d, 50% 30%); }
/* Fix 24.10. (Runde 4, fixa): Schild kleiner und dichter in die Ecke (vorher 40 px hoch, 14 px Abstand). Es deckt weniger
   vom Foto ab; bei Nahaufnahmen (2rpad9) lag es sonst über Kinn und Mund. */
.skin-kacheln .k-job .schild { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 13px;
  border-radius: 999px; background: rgba(255,255,255,.86); color: #1d1d1f; font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
/* Markenfläche ohne Foto: Licht von oben rechts, feines Raster (Zeichnung), große Typo (Leistungen, Name) */
.skin-kacheln .k-flaeche { color: var(--brand-text); background:
  radial-gradient(110% 85% at 100% 0%, rgba(255,255,255,.20), transparent 58%),
  radial-gradient(90% 70% at 0% 100%, rgba(0,0,0,.12), transparent 62%), var(--brand); }
.skin-kacheln .k-flaeche .k-lbl { color: inherit; opacity: .72; }
/* Desktop: rechts mehr Rand, damit Beschriftungen am rechten Zeichnungsrand im Brief-Mockup nicht unter dem Tablet liegen.
   Fix Runde 2: Zeichnung edler, nicht mehr auf vollflächiger Markenfarbe: helle Kachel (dunkle Seite: Anthrazit),
   Linien in Markenfarbe, Beschriftung in Textfarbe, feines Raster. Markenfarbe als Fläche nur noch Anrufen und Knopf. */
.skin-kacheln .k-bild.zk { display: flex; align-items: center; justify-content: center; padding: 48px 112px 64px 36px;
  background: radial-gradient(90% 70% at 30% 40%, color-mix(in srgb, var(--zk-linie) 6%, transparent), transparent 70%), var(--tile);
  color: var(--zk-linie); --lz: var(--zk-linie); --zf: var(--tile); --lt: var(--ink); }
.skin-kacheln .zk::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 48%, #000 25%, transparent 80%); mask-image: radial-gradient(75% 75% at 50% 48%, #000 25%, transparent 80%); }
.skin-kacheln .zk svg.dwg { position: relative; width: 100%; height: 100%; max-width: 760px; }
.skin-kacheln .zk .zk-titel { position: absolute; left: 28px; bottom: 24px; font-size: 15px; font-weight: 600; color: var(--muted); }
/* Zeichnung über beide Reihen (Modus unter): fast quadratische Kachel, Zeichnung etwas tiefer als die Mitte */
@media (min-width: 1101px) { .skin-kacheln .bento.unter .k-bild.zk { padding: 72px 140px 72px 24px; } }
/* Linien auf heller Kachel etwas kräftiger (Druck), Beschriftung eine Stufe größer */
.skin-kacheln .zk .dwg .o { stroke-width: 2.4; } .skin-kacheln .zk .dwg .d { stroke-width: 1.6; }
.skin-kacheln .zk .dwg .f { opacity: .55; } .skin-kacheln .zk .dwg .m, .skin-kacheln .zk .dwg .l { stroke-width: 1.4; opacity: .85; }
.skin-kacheln .zk .dwg .t { font-size: 16px; } .skin-kacheln .zk .dwg .tm { font-size: 15px; }
.skin-kacheln .k-liste { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px 44px; }
.skin-kacheln .k-liste ol { list-style: none; counter-reset: l; }
.skin-kacheln .k-liste li { counter-increment: l; display: flex; align-items: baseline; gap: 20px; padding: 18px 0 16px;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 22%, transparent);
  font-size: 46px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.skin-kacheln .k-liste li::before { content: counter(l, decimal-leading-zero); font-size: 15px; font-weight: 600; letter-spacing: 0; opacity: .7; min-width: 24px; font-variant-numeric: tabular-nums; }
.skin-kacheln .k-wortbild { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px 44px; }
.skin-kacheln .k-wortbild::after { content: ""; position: absolute; right: -14%; top: -22%; width: 72%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--brand-text) 16%, transparent);
  box-shadow: 0 0 0 56px color-mix(in srgb, var(--brand-text) 4%, transparent), 0 0 0 112px color-mix(in srgb, var(--brand-text) 3%, transparent); }
.skin-kacheln .k-wort { position: relative; display: block; font-weight: 700; letter-spacing: -.05em; line-height: .98; font-size: 96px; overflow-wrap: anywhere; hyphens: auto; }
.dwg { display: block; overflow: visible; }
.dwg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dwg .o { stroke-width: 2; } .dwg .d { stroke-width: 1.3; } .dwg .f { stroke-width: .9; opacity: .45; }
.dwg .h { stroke-width: 1; stroke-dasharray: 4 3; opacity: .6; } .dwg .c { stroke-width: .9; stroke-dasharray: 18 4 2 4; opacity: .45; }
.dwg .m, .dwg .l { stroke: var(--lz); stroke-width: 1.25; opacity: .75; } .dwg .mt { stroke: var(--lz); stroke-width: 1.8; opacity: .75; }
.dwg .a { stroke: var(--lz); stroke-width: 1.8; } .dwg .a2 { stroke: var(--lz); stroke-width: 1.5; }
.dwg .ah { stroke: var(--lz); stroke-width: 1; stroke-dasharray: 3 6; opacity: .7; }
.dwg .z { fill: var(--zf); } .dwg .af { fill: var(--lz); stroke: none; } .dwg .pt { fill: var(--lz); }
.dwg text { font-family: "Inter", sans-serif; fill: var(--lt); paint-order: stroke; stroke: var(--zf); stroke-width: 4px; stroke-linejoin: round; }
.dwg .t { font-size: 15px; font-weight: 600; } .dwg .tm { font-size: 14px; font-weight: 500; }

/* ======================= Tablet ======================= */
@media (max-width: 1100px) {
  .menue, .leiste .tel, .kopf-bar .menue, .kopf-bar .tel { display: none; }
  .burger { display: inline-flex; }
  .leiste .btn, .kopf-bar .btn { display: none; }
  .skin-buehne .buehne { padding-top: 124px; }
  .skin-buehne .h1 { --h-start: 72; --h-min: 40; --h-zeilen: 4; }
  .skin-buehne .stage { aspect-ratio: 4 / 3.3; margin-top: 44px; }
  .skin-fenster .fenster { left: 20px; right: 20px; bottom: 20px; width: auto; }
  .skin-fenster .fenster .h1 { --h-start: 60; --h-zeilen: 4; }
  .skin-fenster .widget { display: none; }
}
/* ======================= Handy ======================= */
@media (max-width: 760px) {
  :root { --fs-l: 17px; --r: 24px; }
  .leiste { height: 56px; padding: 0 6px 0 18px; }
  .marke img { height: 32.8px; max-width: 190px; }
  .akte { gap: 14px; }
  .akte .btn { width: 100%; }
  .skin-buehne .kopf { top: 10px; width: calc(100% - 20px); }
  .skin-buehne .buehne { padding: 100px 20px 0; }
  .skin-buehne .h1 { --h-start: 46; --h-min: 32; --h-zeilen: 4; }
  .skin-buehne .lead { margin-top: 16px; }
  .skin-buehne .akte { margin-top: 24px; flex-direction: column; }
  .skin-buehne .stage { width: calc(100% - 20px); aspect-ratio: 4 / 3.4; margin-top: 32px; }
  .chips { padding: 24px; gap: 10px; }
  .chips span { padding: 10px 18px; }
  .skin-fenster { background: #ffffff; }
  .skin-fenster .f-rahmen { margin: 10px; }
  .skin-fenster .schirm { height: 42vh; min-height: 320px; border-radius: 26px; }
  .skin-fenster .kopf { top: 10px; width: calc(100% - 20px); }
  .skin-fenster .fenster { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -64px 8px 0; padding: 26px 22px 24px; border-radius: 26px;
    background: rgba(255,255,255,.86); box-shadow: 0 -10px 40px -18px rgba(0,0,0,.35); }
  .skin-fenster .fenster::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.18); margin: -12px auto 18px; }
  .skin-fenster .fenster .h1 { --h-start: 40; --h-min: 30; --h-zeilen: 4; }
  .skin-fenster .fenster .lead { font-size: 17px; }
  .skin-fenster .fenster .akte { flex-direction: column; align-items: stretch; }
  .skin-fenster .fenster .akte .mehr { justify-content: center; }
  .mbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; gap: 8px; padding: 6px;
    border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 12px 40px -10px rgba(0,0,0,.35); }
  .mbar a { flex: 1; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: #1d1d1f; }
  .mbar a.an { background: var(--brand); color: var(--brand-text); flex: 1.35; }
  body { padding-bottom: 90px; }
}

/* ======================= Kacheln: Tablet (eigenes Layout: Bild 16:10,5 oben, Text, Kacheln nebeneinander) ======================= */
@media (max-width: 1100px) {
  .skin-kacheln { --gap: 12px; --r: 28px; --r-k: 24px; }
  .skin-kacheln .kopf-bar { height: 76px; padding: 0 16px 0 28px; }
  /* Fix 24.10. (Runde 4, fixa): kompakte Logos (quadratisch, 6cggbw) standen mit 72 px in der 76 px hohen Leiste und
     stießen oben fast an (ca. 2 px). Höchstens 60 px: oben und unten je 8 px Luft. max-height gilt auch gegen die
     Höhe, die kachelnMass() als Inline-Stil setzt; breite Logos (unter 60 px) bleiben unverändert. */
  .skin-kacheln .kopf-bar .marke img { max-height: 60px; }
  /* Fix 24.10. (fixm1b): kompaktes helles Logo im dunklen Kopf höchstens 68 px, Leiste 84 px */
  .skin-kacheln.logo-gross .kopf-bar { height: 84px; }
  .skin-kacheln.logo-gross .kopf-bar .marke img { max-height: 68px; }
  .skin-kacheln .kopf-bar .burger { margin-right: -4px; }
  .skin-kacheln .bento { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 0 16px 16px; }
  .skin-kacheln .k-bild { order: 1; aspect-ratio: 16 / 10.5; flex: none; }  /* = Tablet-Nennformat der Gesichtsprüfung (1,52) */
  .skin-kacheln .k-bild > img { object-position: var(--fokus-t, var(--fokus-d, 50% 40%)); transform-origin: var(--fokus-t, var(--fokus-d, 50% 40%)); --z: var(--zoom-t, 1); }
  .skin-kacheln .k-job img { object-position: var(--fj-t, var(--fj-d, 50% 30%)); --zj: var(--zj-t, 1); transform-origin: var(--fj-t, var(--fj-d, 50% 30%)); }
  .skin-kacheln .k-text { order: 2; padding: 40px 44px 40px; justify-content: flex-start; gap: 0; }
  .skin-kacheln .k-text .k-unten { margin-top: 0; }
  .skin-kacheln .k-text .h1 { --h-start: 62; --h-min: 38; --h-zeilen: 4; }
  .skin-kacheln .k-text .lead { margin-top: 18px; font-size: 19px; }
  .skin-kacheln .k-text .akte { margin-top: 28px; }
  .skin-kacheln .k-reihe { order: 3; display: grid; gap: var(--gap); height: 148px; flex: none; }
  .skin-kacheln .k-kachel.pl, .skin-kacheln .k-kachel.pr, .skin-kacheln .k-kachel.pr1, .skin-kacheln .k-kachel.pr2 { grid-column: auto; grid-row: auto; }
  .skin-kacheln .k-bild.zk { padding: 36px 48px 56px; }
  .skin-kacheln .k-liste li { font-size: 40px; padding: 14px 0 12px; }
  .skin-kacheln .k-l { font-size: 18px; column-gap: 16px; }
  .skin-kacheln .k-l li { padding: 7px 0 6px; }
  /* Nummer am Tablet höchstens 30 px: im Brief-Mockup liegt der rechte Rand des Tablets unter dem Handy */
  .skin-kacheln .k-anruf .nr, .skin-kacheln .k-anruf.pr .nr { font-size: 30px; }
}
/* ======================= Kacheln: Handy (Bild 4:3,3 mit Fokus, ein Knopf im Text, Kacheln als kompakte Zeilen) ======================= */
@media (max-width: 760px) {
  .skin-kacheln { --gap: 10px; --r: 24px; --r-k: 20px; }
  .skin-kacheln .kopf-bar { height: 64px; padding: 0 8px 0 18px; gap: 12px; }
  .skin-kacheln .marke { gap: 10px; min-width: 0; }
  .skin-kacheln .marke img { height: 40px; max-width: 210px; }
  /* Fix 24.10. (fixa): in der 64 px hohen Leiste höchstens 46 px (oben und unten je 9 px Luft) */
  .skin-kacheln .kopf-bar .marke img { max-height: 46px; }
  /* Fix 24.10. (fixm1b): kompaktes helles Logo im dunklen Kopf höchstens 54 px, Leiste 68 px */
  .skin-kacheln.logo-gross .kopf-bar { height: 68px; }
  .skin-kacheln.logo-gross .kopf-bar .marke img { max-height: 54px; }
  .skin-kacheln .marke .wort { font-size: 20px; max-width: 230px; }
  .skin-kacheln .marke img + .wort { font-size: 15px; max-width: 170px; }
  /* Fix 25.10. (Runde 4, handykopf, 4gdq82, 3e3y92, Kriterium 14): Der Menüknopf bleibt am Handy immer ganz im Bild und
     an seinem normalen Platz (rechte Kante 4 px vor dem Rand, wie bei allen anderen Kunden). Vorher galt auch hier
     .marke { flex: none }: breites Signet plus Firmenname daneben schoben den Knopf aus dem Bild (KMK, Signet 164 px,
     Name einzeilig) bzw. bis an die Kante (Horn). Jetzt darf die Marke schrumpfen (min-width: 0 steht schon oben), der
     Name bricht dann ausgewogen in zwei Zeilen um wie bei den anderen langen Namen, nie mitten im Wort (der Name wird nie
     schmaler als sein längstes Wort). Reicht das nicht, verkleinert handyKopf() im Skript Signet und Name. Ohne Überlauf
     ändert sich nichts. Desktop und Tablet unverändert. */
  .skin-kacheln .kopf-bar .marke { flex: 0 1 auto; }
  .skin-kacheln .bento { padding: 0 10px 14px; }
  .skin-kacheln .k-bild { aspect-ratio: 4 / 3.3; }  /* = Handy-Nennformat der Gesichtsprüfung (1,21) */
  .skin-kacheln .k-bild > img { object-position: var(--fokus-h, var(--fokus-t, 50% 35%)); transform-origin: var(--fokus-h, var(--fokus-t, 50% 35%)); --z: var(--zoom-h, 1); }
  .skin-kacheln .k-text { padding: 26px 22px 24px; }
  .skin-kacheln .k-text .h1 { --h-start: 40; --h-min: 29; --h-zeilen: 5; }
  .skin-kacheln .k-text .lead { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  .skin-kacheln .k-text .akte { margin-top: 22px; gap: 10px 10px; flex-wrap: wrap; }
  .skin-kacheln .k-text .akte .btn { width: 100%; flex: 1 1 100%; height: 52px; }
  .skin-kacheln .k-text .akte .mehr { margin-top: 6px; }
  .skin-kacheln .k-reihe { display: flex; flex-direction: column; height: auto; }
  .skin-kacheln .k-kachel { padding: 16px 18px; }
  .skin-kacheln .k-anruf { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; height: 76px; }
  .skin-kacheln .k-anruf .ikon { position: static; flex: none; width: 44px; height: 44px; }
  .skin-kacheln .k-anruf .k-at { height: auto; gap: 1px; }
  .skin-kacheln .k-anruf .k-lbl { font-size: 13px; }
  .skin-kacheln .k-anruf .nr, .skin-kacheln .k-anruf.pr .nr { font-size: 21px; }
  .skin-kacheln .k-leist { gap: 8px; justify-content: flex-start; order: 2; }
  .skin-kacheln .k-anruf { order: 1; }
  .skin-kacheln .k-l { font-size: 17px; column-gap: 14px; }
  .skin-kacheln .k-l li { padding: 8px 0 7px; }
  /* Karriere-Foto am Handy weg: läge im ersten Bildschirm am unteren Rand (Köpfe angeschnitten), "Offene Stellen" steht im Text */
  .skin-kacheln .k-job { display: none; }
  .skin-kacheln .k-job .schild { left: 10px; bottom: 10px; height: 36px; padding: 0 14px; font-size: 14px; }
  .skin-kacheln .k-bild.zk { padding: 22px 22px 40px; }
  .skin-kacheln .zk .zk-titel { left: 18px; bottom: 14px; font-size: 13px; }
  .skin-kacheln .k-liste, .skin-kacheln .k-wortbild { padding: 22px 24px 24px; }
  .skin-kacheln .k-liste li { font-size: 26px; gap: 14px; padding: 9px 0 8px; }
  .skin-kacheln .k-liste li::before { font-size: 12px; min-width: 18px; }
  /* Untere Leiste erst, wenn der Knopf im Text aus dem Bild gescrollt ist: nie zwei CTAs, verdeckt im ersten Bildschirm nichts */
  .skin-kacheln .mbar { transform: translateY(calc(100% + 28px)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .5s var(--ease), opacity .3s, visibility 0s linear .5s; }
  .skin-kacheln .mbar.zeigen { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .5s var(--ease), opacity .3s, visibility 0s; }
}

/* ---------- Bewegung nur live (html.bewegt), Standbild = Endzustand ---------- */
html.bewegt .h1 .w { display: inline-block; opacity: 0; transform: translateY(.42em); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
html.bewegt.los .h1 .w { opacity: 1; transform: none; }
html.bewegt .ein { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .35s, transform 1s var(--ease) .35s; }
html.bewegt.los .ein { opacity: 1; transform: none; }
html.bewegt .skin-buehne .stage { transform: scale(calc(.92 + .08 * var(--p, 0))); border-radius: calc(var(--r) + 16px * (1 - var(--p, 0))); }
html.bewegt .skin-fenster .wand { transform: scale(1.06); transition: transform 2.4s var(--ease); }
html.bewegt.los .skin-fenster .wand { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { html.bewegt .h1 .w, html.bewegt .ein, html.bewegt .wand { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ======================================================================================================================
   Startseite Kündig: Abschnitte unter dem Startbereich (KORTHAUER, 29.10.2026)
   Dieselbe Sprache wie der Entwurf: Inter, Kacheln auf #f5f5f7, Radien --r, Abstände --gap, Markenfarbe sparsam.
   Drei Schriftgrößen: --fs-h2 (Überschrift und große Zahl), --fs-h3 (Zwischenüberschrift), --fs-t (Text); dazu --fs-k klein.
   Eigene Klassen beginnen mit s-, damit nichts mit dem Entwurfs-CSS kollidiert.
   ====================================================================================================================== */
:root { --fs-h2: 38px; --fs-h3: 23px; --fs-t: 17px; --fs-k: 14px; --pad-s: 44px; --abstand: 88px; --dunkel: #121214; --dunkel-k: #1f1f22; }
@media (max-width: 1100px) { :root { --fs-h2: 42px; --fs-h3: 21px; --pad-s: 36px; --abstand: 72px; } }
@media (max-width: 760px) { :root { --fs-h2: 28px; --fs-h3: 20px; --fs-t: 16px; --fs-k: 13px; --pad-s: 22px; --abstand: 56px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.skin-kacheln [id] { scroll-margin-top: 16px; }

.s-abschnitt { max-width: 1440px; margin: var(--abstand) auto 0; padding: 0 24px; }
.s-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.s-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin: 0 6px 22px; }
.s-kopf .s-text { max-width: 560px; margin: 0; }
.s-h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.042em; font-weight: 700; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.s-h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -.02em; font-weight: 650; text-wrap: balance; }
.s-text { margin: 12px 0 0; font-size: var(--fs-t); line-height: 1.55; color: #3a3a3c; max-width: 29em; text-wrap: pretty; }
.s-klein { margin: 10px 0 0; font-size: var(--fs-k); line-height: 1.45; color: #5e5e63; }
.s-zahl { margin: 0; font-size: var(--fs-h2); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
.s-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s; }
.s-link:hover { text-decoration-color: var(--brand); }

.s-kachel { position: relative; min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--tile); color: var(--ink); }
a.s-kachel { display: flex; flex-direction: column; text-decoration: none; }
.s-innen { padding: var(--pad-s); }
.s-tint { background: var(--tint); }
.s-marke { background: var(--brand); color: var(--brand-text); }
.s-marke .s-text, .s-marke .s-klein { color: var(--brand-text); }
.s-schwarz { background: var(--dunkel); color: #f5f5f7; }
.s-schwarz .s-text { color: #c7c7cc; }
.s-schwarz .s-klein { color: #9a9aa0; }

.s-bild { position: relative; margin: 0; overflow: hidden; background: #e8e8ed; }
.s-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-bild.weiss { background: #ffffff; }
.s-bild.weiss img { object-fit: contain; padding: 6% 8%; }
a.s-kachel .s-bild img { transition: transform .9s var(--ease), clip-path 1.1s var(--ease); }
a.s-kachel:hover .s-bild img, a.s-kachel:focus-visible .s-bild img { transform: scale(1.03); }
a.s-kachel:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Bewegung nur live: html.bewegt setzt das Entwurfs-Skript (nicht bei prefers-reduced-motion, nicht im Screenshot) */
html.bewegt .s-auf:not(.da) img { clip-path: inset(5% 5% 5% 5% round 18px); transform: scale(1.06); }
html.bewegt .s-auf img { transition: clip-path 1.1s var(--ease), transform 1.3s var(--ease); }
html.bewegt .s-parallax img { transform: translateY(var(--py, 0px)) scale(1.1); transition: none; }

/* ---------- Produkte ---------- */
.s-produkte .p-perfect { grid-column: 1 / 8; grid-row: 1; }
.s-produkte .p-technic { grid-column: 8 / 13; grid-row: 1; }
.s-produkte .p-master { grid-column: 1 / 5; grid-row: 2; }
.s-produkte .p-uniq { grid-column: 5 / 9; grid-row: 2; }
.s-produkte .p-gebraucht { grid-column: 9 / 13; grid-row: 2; }
.s-produkte .p-perfect .s-bild, .s-produkte .p-technic .s-bild { flex: 1 1 auto; min-height: 340px; }
.s-produkte .p-master .s-bild, .s-produkte .p-uniq .s-bild { aspect-ratio: 4 / 3; }
.s-produkte .p-gebraucht { display: flex; flex-direction: column; justify-content: space-between; }
.s-produkte .p-gebraucht .btn { align-self: flex-start; margin: 22px 0 0; }
.s-produkte .p-perfect .s-bild img { object-position: 38% 62%; }

/* ---------- Anwendungen ---------- */
.s-anwendungen .a-reihe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.s-anwendungen .a-kachel .s-bild { aspect-ratio: 2 / 1; }
.s-anwendungen .a-wand { grid-column: 1 / 8; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.s-anwendungen .a-zitat { grid-column: 8 / 13; display: flex; flex-direction: column; justify-content: space-between; }
.s-wand { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.s-wand a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--dunkel-k); color: #f5f5f7; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; text-decoration: none; transition: background .25s; }
.s-wand a:hover, .s-wand a:focus-visible { background: var(--brand); }
.s-zitat { margin: 0; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }

/* ---------- News ---------- */
.s-news .n-award { grid-column: 1 / 8; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; }
.s-news .n-regent { grid-column: 8 / 13; display: flex; flex-direction: column; justify-content: space-between; }
.s-news .n-italia { grid-column: 1 / 8; display: flex; flex-direction: row; min-height: 320px; }
.s-news .n-italia .s-bild { flex: 0 0 50%; min-height: 0; }
.s-news .n-italia .s-innen { align-self: center; }
.s-news .n-elan { grid-column: 8 / 13; display: flex; flex-direction: column; justify-content: space-between; }
.s-news .s-kopf a { font-size: var(--fs-t); }

/* ---------- Unternehmen ---------- */
.s-unternehmen .u-familie { grid-column: 1 / 8; grid-row: 1; }
.s-unternehmen .u-familie .s-bild { aspect-ratio: 2000 / 737; background: #ffffff; }
.s-unternehmen .u-familie .s-bild img { object-fit: contain; }
.s-unternehmen .u-familie figcaption { padding: 0 var(--pad-s) var(--pad-s); }
.s-unternehmen .u-text { grid-column: 8 / 13; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
.s-unternehmen .u-halle { grid-column: 1 / 9; grid-row: 2; min-height: 460px; }
.s-unternehmen .u-halle img { position: absolute; inset: 0; }
.s-unternehmen .u-halle img { object-position: 50% 62%; }
.s-unternehmen .u-service { grid-column: 9 / 13; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; }
.s-unternehmen .u-service .s-tel { margin-top: 22px; }
a[href^="tel:"] { white-space: nowrap; }
.s-tel { display: inline-block; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.s-tel:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Karriere (dunkel, Herzstück) ---------- */
.s-band { margin-top: var(--abstand); padding: var(--abstand) 0; background: var(--dunkel); color: #f5f5f7; }
.s-band > .s-abschnitt { margin-top: 0; }
.s-band .s-kopf .s-text { color: #c7c7cc; }
.s-karriere .k-stelle { grid-column: 1 / 7; grid-row: 1 / 3; display: flex; flex-direction: column; }
.s-karriere .k-stelle .s-h3 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.035em; }
.s-karriere .k-stelle ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.s-karriere .k-stelle li { position: relative; max-width: 29em; padding: 0 0 0 26px; font-size: var(--fs-t); line-height: 1.5; color: var(--brand-text); }
.s-karriere .k-stelle li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.s-karriere .k-aktion { margin-top: auto; padding-top: 30px; }
.s-karriere .k-aktion .btn { background: #ffffff; color: var(--ink); height: 56px; padding: 0 28px; font-size: 15px; gap: .3em; }
.s-karriere .k-aktion .s-klein { color: var(--brand-text); }
.s-karriere .k-aktion .s-klein a { color: inherit; }
.s-karriere .k-foto { aspect-ratio: 3 / 2; border-radius: var(--r-k); }
.s-karriere .k-mosaik { grid-column: 7 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); border-radius: var(--r); }
.s-karriere .k-mosaik .s-bild { border-radius: var(--r-k); aspect-ratio: auto; min-height: 220px; }
.s-karriere .k-mosaik .k-gross { grid-column: 1 / 3; aspect-ratio: 16 / 9; min-height: 0; }
.s-karriere .k-mosaik .k-service img { object-position: 30% 40%; }
.s-karriere .k-mosaik .k-elektrik img { object-position: 60% 30%; }
.s-karriere .k-mosaik .k-lack img { object-position: 45% 40%; }
.s-karriere .k-mosaik .k-team img { object-position: 50% 30%; }

/* ---------- Kontakt ---------- */
.s-kontakt .ko-form { grid-column: 1 / 8; grid-row: 1 / 3; }
.s-kontakt .ko-adresse { grid-column: 8 / 13; }
.s-kontakt .ko-bild { grid-column: 8 / 13; min-height: 260px; }
.s-kontakt .ko-bild img { object-position: 40% 55%; }
.s-formular fieldset { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s-formular .f-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-formular .f-breit { grid-column: 1 / -1; }
.s-formular label { font-size: var(--fs-k); font-weight: 600; color: #3a3a3c; }
.s-formular input, .s-formular select, .s-formular textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid #8e8e93; border-radius: 14px;
  background: #fbfbfd; color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.s-formular textarea { min-height: 140px; resize: vertical; }
.s-formular :is(input, select, textarea):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.s-formular .f-zeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.s-formular .btn { margin: 0; height: 54px; padding: 0 30px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
.s-formular fieldset:disabled { opacity: .55; }
.s-formular .f-hinweis { margin: 0; font-size: var(--fs-k); font-weight: 600; color: var(--brand); }
.s-formular noscript p { margin: 14px 0 0; }
.s-ansprech { margin: 24px 0 0; border-top: 1px solid var(--line); padding-top: 14px; }
.s-ansprech summary { cursor: pointer; font-weight: 600; font-size: var(--fs-t); list-style-position: inside; }
.s-ansprech ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.s-ansprech li { font-size: var(--fs-k); line-height: 1.45; color: #3a3a3c; }
.s-ansprech li strong { display: block; font-size: var(--fs-t); color: var(--ink); font-weight: 600; }
.s-ansprech a { color: inherit; }

/* ---------- Fuß einzeilig ---------- */
.s-fuss { max-width: 1440px; margin: var(--abstand) auto 0; padding: 26px 30px 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; font-size: var(--fs-k); color: var(--muted); }
.s-fuss p { margin: 0; }
.s-fuss nav { display: flex; gap: 22px; }
.s-fuss a { color: inherit; text-decoration: none; }
.s-fuss a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Menü am Handy und Tablet (der Entwurf zeigt dort nur den Knopf) ---------- */
.s-menue[hidden] { display: none; }
.s-menue { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); background: rgba(245, 245, 247, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow-y: auto; }
.s-menue .m-kopf { display: flex; justify-content: flex-end; }
.s-menue .m-zu { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--tile); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.s-menue nav { display: grid; gap: 4px; margin-top: 18px; }
.s-menue nav a { padding: 14px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
.s-menue .m-aktion { display: grid; gap: 10px; margin-top: 26px; }
.s-menue .m-aktion a { height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tile); color: var(--ink); text-decoration: none; font-weight: 600; }
.s-menue .m-aktion a.an { background: var(--brand); color: var(--brand-text); }
body.menue-offen { overflow: hidden; }

/* ---------- Unterseiten (Impressum, Datenschutz, folgt) ---------- */
.s-unterseite { margin-top: 8px; }
.s-unterseite .s-kachel { max-width: 920px; }
.s-rechtstext h1 { margin: 0 0 18px; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.04em; }
.s-rechtstext h2, .s-rechtstext h3 { margin: 26px 0 8px; font-size: var(--fs-h3); letter-spacing: -.02em; }
.s-rechtstext p, .s-rechtstext li { font-size: var(--fs-t); line-height: 1.6; color: #3a3a3c; white-space: pre-line; overflow-wrap: anywhere; }
.s-rechtstext p { margin: 10px 0 0; }
.s-rechtstext ul, .s-rechtstext ol { margin: 10px 0 0; padding-left: 1.3em; }
.s-folgt .s-kachel { max-width: none; }
.s-raster.s-folgt > * { grid-column: span 4; }
.s-folgt-text { margin: 0 6px 22px; }
@media (max-width: 1100px) { .s-raster.s-folgt > * { grid-column: span 3; } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .s-abschnitt { padding: 0 16px; }
  .s-kopf { flex-direction: column; align-items: flex-start; }
  .s-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-produkte .p-perfect { grid-column: 1 / 7; grid-row: auto; }
  .s-produkte .p-perfect .s-bild { min-height: 0; aspect-ratio: 16 / 10; }
  .s-produkte .p-technic { grid-column: 1 / 7; grid-row: auto; }
  .s-produkte .p-master, .s-produkte .p-uniq { grid-column: span 3; grid-row: auto; }
  .s-produkte .p-gebraucht { grid-column: 1 / 7; grid-row: auto; }
  .s-anwendungen .a-wand, .s-anwendungen .a-zitat { grid-column: 1 / 7; }
  .s-news .n-award, .s-news .n-regent, .s-news .n-italia, .s-news .n-elan { grid-column: 1 / 7; }
  .s-news .n-award { min-height: 0; }
  .s-news .n-regent, .s-news .n-elan { grid-column: span 3; }
  .s-news .s-raster { grid-auto-flow: row dense; }
  .s-unternehmen .u-familie, .s-unternehmen .u-text, .s-unternehmen .u-service { grid-column: 1 / 7; grid-row: auto; }
  .s-unternehmen .u-halle { grid-column: 1 / 7; grid-row: auto; min-height: 0; aspect-ratio: 16 / 8; }
  .s-karriere .k-stelle, .s-karriere .k-mosaik { grid-column: 1 / 7; grid-row: auto; }
  .s-kontakt .ko-form, .s-kontakt .ko-adresse { grid-column: 1 / 7; grid-row: auto; }
  .s-kontakt .ko-bild { grid-column: 1 / 7; aspect-ratio: 16 / 7; min-height: 0; }
  .s-fuss { padding: 22px 20px 30px; }
}
/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .s-abschnitt { padding: 0 10px; }
  .s-kopf { margin: 0 6px 16px; }
  .s-raster { grid-template-columns: minmax(0, 1fr); }
  .s-raster > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .s-news .n-italia { flex-direction: column; min-height: 0; }
  .s-news .n-italia .s-bild { flex: none; aspect-ratio: 3 / 2; }
  .s-produkte .p-perfect .s-bild, .s-produkte .p-technic .s-bild { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .s-unternehmen .u-halle { aspect-ratio: 4 / 3; }
  .s-unternehmen .u-halle img { object-position: 50% 60%; }
  .s-karriere .k-mosaik { grid-template-columns: 1fr 1fr; }
  .s-karriere .k-mosaik .s-bild { min-height: 150px; }
  .s-formular fieldset { grid-template-columns: minmax(0, 1fr); }
  .s-formular .btn { width: 100%; }
  .s-karriere .k-aktion .btn { width: 100%; padding: 0 16px; font-size: 15px; }
  .s-wand a { min-height: 46px; padding: 0 18px; }
  .s-fuss { flex-direction: column; align-items: flex-start; padding: 20px 16px 28px; }
}

/* Sehr schmale Handys: Überschrift etwas kleiner; Karriere-Knopf zweizeilig an fester Stelle (wie bei Lindau, Text unverändert) */
@media (max-width: 360px) {
  .s-karriere .k-aktion .btn { height: auto; min-height: 56px; padding: 9px 16px; line-height: 1.25; white-space: normal; text-align: center; flex-direction: column; gap: 0; }
  .s-karriere .k-aktion .btn span { display: block; }
}

/* ---------- Nachträge Gestaltungsprüfung 29.10.2026 ---------- */
/* Desktop: keine leeren Flächen in Formular und Gebrauchtmaschinen */
@media (min-width: 1101px) {
  .s-kontakt .ko-form { display: flex; flex-direction: column; }
  .s-kontakt .ko-form fieldset { flex: 1; grid-template-rows: auto auto 1fr auto; }
  .s-kontakt .ko-form .f-breit textarea { flex: 1; }
  .s-produkte .p-gebraucht { justify-content: center; }
}
/* Tablet quer: Foto flacher, damit Headline und Knopf im ersten Bildschirm stehen (der Kunde kennt nur Tablet hoch) */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {
  .skin-kacheln .k-bild { aspect-ratio: auto; height: 36vh; }
}
/* Handy: Anwendungen als wischbare Reihe statt drei gleicher Karten untereinander */
@media (max-width: 760px) {
  .s-anwendungen .a-reihe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gap); margin: 0 -10px; padding: 0 10px 4px; scrollbar-width: none; }
  .s-anwendungen .a-reihe::-webkit-scrollbar { display: none; }
  .s-anwendungen .a-reihe > .a-kachel { flex: 0 0 84%; scroll-snap-align: center; }
}
/* Tippziele ab 44 px, ohne dass sich etwas verschiebt */
.s-tel, .s-kopf .s-link, .s-fuss nav a, .ko-adresse .s-klein .s-link, .s-ansprech li a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.s-ansprech summary { padding-block: 10px; }
.s-ansprech li a { text-decoration: underline; text-underline-offset: 3px; }
/* Fokusring im Menü nicht abschneiden (overflow: hidden aus dem Entwurf) */
.skin-kacheln .menue { padding-block: 6px; margin-block: -6px; }
.nw { white-space: nowrap; }
/* Rechtstexte: Listen mit nur einem Punkt sind Zwischenüberschriften der Quelle, nummeriert wie dort (ol start bleibt) */
.s-rechtstext ol:has(> li:only-child) { padding-left: 0; list-style-position: inside; }
.s-rechtstext ol:has(> li:only-child) > li { margin-top: 20px; font-weight: 650; color: var(--ink); }

/* ---------- Nachträge 04.11.2026 (KORTHAUER): Formulare senden, Kurzbewerbung, Förderung ---------- */
/* Datenschutz-Häkchen: Kästchen links, Text daneben, Tippziel 44 px */
.s-formular .f-check { display: flex; align-items: flex-start; gap: 12px; }
.s-formular .f-check input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--brand); cursor: pointer; }
.s-formular .f-check label { font-weight: 500; line-height: 1.45; cursor: pointer; padding-block: 0; }
.s-formular .f-check label a { color: inherit; }
/* Köderfeld: für Menschen unsichtbar, kein type="hidden" (Vorlage FORMULAR-ANBINDUNG.md) */
.s-formular .f-koeder { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Rückmeldungen: Status in Markenfarbe, Fehler rot, Erfolg dunkel mit Häkchen */
.s-formular .f-hinweis { max-width: 32em; line-height: 1.45; }
.s-formular .f-hinweis.fehler { color: #b3261e; }
.s-formular .f-hinweis.fehler a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.s-formular .f-hinweis.ok { color: var(--ink); padding-left: 26px; position: relative; }
.s-formular .f-hinweis.ok::before { content: ""; position: absolute; left: 3px; top: .38em; width: 12px; height: 7px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.s-formular .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.s-formular select:has(option[value=""]:checked) { color: #6e6e73; }
.s-formular select option { color: var(--ink); }

/* Kurzbewerbung (bewerbung.html) */
.s-bewerbung .b-form { grid-column: 1 / 8; }
.s-bewerbung .b-stelle { grid-column: 8 / 13; align-self: start; }
.s-bewerbung .b-stelle .s-text { margin-top: 0; }
.s-bewerbung .b-stelle ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.s-bewerbung .b-stelle li { position: relative; max-width: 29em; padding: 0 0 0 26px; font-size: var(--fs-t); line-height: 1.5; color: var(--brand-text); }
.s-bewerbung .b-stelle li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.s-bewerbung .b-stelle .s-klein { margin-top: 26px; }
.s-bewerbung .b-stelle .s-klein a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.s-bewerbung .b-erfolg { margin-top: 22px; outline: none; }
.s-bewerbung .b-erfolg .s-text { margin-top: 10px; }
@media (max-width: 1100px) {
  .s-bewerbung .b-form, .s-bewerbung .b-stelle { grid-column: 1 / 7; }
}

/* Förderung (foerderung.html): Texte wie auf kundig.de, Emblem einmal oben */
.s-foerderung .f-logo { display: block; width: 100%; max-width: 560px; height: auto; margin: 4px 0 6px; }
.s-foerderung section { margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--line); }
.s-foerderung .f-ort { color: var(--muted); }
/* hidden gilt auch gegen display: grid (Erfolgsmeldung ersetzt das Formular); Felder mit zweizeiligem Label unten bündig */
.s-formular fieldset[hidden] { display: none; }
.s-bewerbung .b-form .f-feld { justify-content: flex-end; }

/* ======================================================================================================================
   Runde 3 (KORTHAUER, 04.11.2026): Bewegung mit Bedeutung. Motiv ist die Schräglage des Diagonalbands (10 Grad):
   Trennlinie im Vergleich, Glanzlicht über den Fotos. Dazu Filme vom Media Day und „15 Tonnen“ mit wachsendem Gewicht.
   ====================================================================================================================== */
/* Filme liegen über Foto bzw. Standbild und blenden erst ein, wenn sie laufen (bewegung.js) */
.skin-kacheln .k-bild { position: relative; overflow: hidden; }
.k-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.k-film-start { opacity: 0; transition: opacity 1.4s var(--ease); object-position: 58% 42%; }
.k-film-start.laeuft { opacity: 1; }
.s-karriere .k-mosaik .k-filmkachel { position: relative; }
.k-filmkachel .k-film { object-position: 50% 38%; }
.film-knopf { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(18, 18, 20, .55); color: #ffffff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.film-knopf[hidden] { display: none; }
.film-knopf:hover { background: rgba(18, 18, 20, .78); }
.film-knopf:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.film-knopf::before { content: ""; width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%); }
.film-knopf.aus::before { width: 0; height: 0; margin-left: 4px; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }

/* Diagonalschliff: Vergleich mit Trennlinie unter 10 Grad */
.s-diagonal .d-vergleich { grid-column: 1 / 9; margin: 0; display: flex; flex-direction: column; }
.s-diagonal .d-text { grid-column: 9 / 13; display: flex; flex-direction: column; justify-content: center; }
.s-diagonal .d-text .s-text { margin-top: 16px; }
.s-diagonal .d-zitat { margin: 26px 0 0; }
.s-diagonal .d-zitat + .s-klein { margin-top: 10px; }
.d-flaeche { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 2 / 1; overflow: hidden; background: #cfc6b6;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.d-flaeche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.d-oben { clip-path: polygon(0 0, calc(var(--teil, 50%) + var(--dx, 0px)) 0, calc(var(--teil, 50%) - var(--dx, 0px)) 100%, 0 100%); }
.d-linie { position: absolute; top: -12%; bottom: -12%; left: var(--teil, 50%); width: 2px; margin-left: -1px; background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 0 18px rgba(255, 255, 255, .35); transform: rotate(10deg); pointer-events: none; }
.d-griff { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.d-griff::before, .d-griff::after { content: ""; position: absolute; top: 15px; width: 2px; height: 16px; border-radius: 1px; background: var(--ink); }
.d-griff::before { left: 18px; }
.d-griff::after { right: 18px; }
.d-grad { position: absolute; top: 15%; left: 10px; transform: rotate(-10deg); transform-origin: left center; padding: 4px 9px; border-radius: 999px;
  background: rgba(18, 18, 20, .62); font-size: var(--fs-k); font-weight: 650; line-height: 1.2; color: #ffffff; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.d-marke { position: absolute; bottom: 16px; z-index: 2; padding: 7px 13px; border-radius: 999px; background: rgba(18, 18, 20, .62); color: #ffffff;
  font-size: var(--fs-k); font-weight: 600; letter-spacing: -.005em; pointer-events: none; transition: opacity .35s; }
.d-links { left: 16px; }
.d-rechts { right: 16px; }
.d-vergleich.aktiv:not(.links-frei) .d-links, .d-vergleich.aktiv:not(.rechts-frei) .d-rechts { opacity: 0; }
.d-regler { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.d-vergleich:focus-within .d-flaeche { outline: 3px solid var(--brand); outline-offset: -3px; }
.d-vergleich figcaption { margin: 0; padding: 14px 22px 18px; }

/* Produkte: Ausführungen von kundig.de */
.p-modelle { margin: 14px 0 0; font-size: var(--fs-k); font-weight: 600; color: var(--brand); }

/* Anwendungen: das Zitat steht jetzt beim Diagonalschliff, die Wand nimmt die volle Breite */
.s-anwendungen .a-wand { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .s-anwendungen .a-wand { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; }
}

/* „15 Tonnen“: Gewicht wächst beim Scrollen */
html.gewicht-an .n-regent .s-zahl { font-weight: 400; font-variation-settings: "wght" var(--gewicht, 700); }

/* Fotos: statt des Rahmens, der sich öffnet, zieht ein Glanzlicht unter 10 Grad darüber; das Foto ist sofort ganz zu sehen */
html.bewegt .s-auf:not(.da) img { clip-path: none; transform: scale(1.035); }
html.bewegt .s-auf img { transition: transform 1.2s var(--ease); }
html.bewegt .s-auf::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 62%); }
html.bewegt .s-auf.da::after { transform: translateX(120%); transition: transform 1.3s cubic-bezier(.45, .05, .25, 1) .05s; }

@media (max-width: 1100px) {
  .s-diagonal .d-vergleich, .s-diagonal .d-text { grid-column: 1 / 7; }
}
@media (max-width: 760px) {
  .d-flaeche { aspect-ratio: 3 / 2; }
  .d-marke { bottom: 12px; padding: 6px 11px; }
  .d-links { left: 12px; }
  .d-rechts { right: 12px; }
  .film-knopf { right: 10px; bottom: 10px; }
}
.s-diagonal .d-text .s-h2 { hyphens: manual; -webkit-hyphens: manual; }
/* Ohne JavaScript: Schräge aus dem Seitenverhältnis (tan 10° x Höhe / 2 in Prozent der Breite), das Skript misst genau nach */
.d-vergleich { --dx: 4.41%; }
@media (max-width: 760px) { .d-vergleich { --dx: 5.88%; } }