/* Richtung C „Werkschau“ - frederikvonderheyden.de, Entwurf vom 11.11.2026
   Palette (Design Center Regel 1, Herkunft jeder Farbe):
   --grund   #ffffff  reines Weiß (Regel: Grund Weiß)
   --tisch   #f0f1ef  neutrales Grau mit Hauch Grün, der Arbeitstisch, auf dem die Produkte liegen
   --tinte   #151816  fast Schwarz, leicht zur Signalfarbe gefärbt (Palette-Methode Schritt 2.4)
   --neben   #59605b  Nebentinte, gleiche Färbung, 6,4:1 auf Weiß
   --signal  #2e5e3a  Rough-Grün, gemessen aus der Bahngrafik der eigenen Golf Data Pipeline (poster_rot.png, Pixel 20,900)
   --fairway #629d54  Fairway-Grün aus derselben Grafik (Mittelwert Bahnfläche), nur für Linien, nie für Text
   --kohle   #17191d  Anthrazit (Palette-Methode 1b), Fläche für Filme
   Schrift: Archivo (variable, Breite 62 bis 125 %, selbst gehostet). Eine Familie, zwei Rollen:
   breit und kräftig für Überschriften, normal für Text. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --grund: #ffffff;
  --tisch: #f0f1ef;
  --tinte: #151816;
  --neben: #59605b;
  --linie: #d9dcd8;
  --signal: #2e5e3a;
  --fairway: #629d54;
  --kohle: #17191d;
  --kohle-text: #e9ebe8;
  --kohle-neben: #a9aea9;
  --r-screen: 6px;
  --r-phone: 26px;
  --rand: clamp(20px, 4vw, 56px);
  --max: 1320px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #121412;
    --tisch: #1b1e1c;
    --tinte: #eceeeb;
    --neben: #a7ada8;
    --linie: #2c302d;
    --signal: #8cc47c;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--fairway); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--rand); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: var(--grund); padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: var(--grund); position: sticky; top: 0; z-index: 5; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.marke { font-weight: 680; font-stretch: 115%; font-size: 1.05rem; letter-spacing: -0.01em; text-decoration: none; padding-block: 12px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: 0.98rem; color: var(--neben); padding-block: 12px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tinte); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 22px; background: var(--tinte); color: var(--grund); text-decoration: none;
  font-weight: 600; white-space: nowrap; border: 0; cursor: pointer; font: inherit; font-weight: 600;
}
.knopf:hover { background: var(--signal); color: #fff; }
.nav .knopf { color: var(--grund); padding-inline: 18px; min-height: 44px; }
.nav .knopf:hover { color: #fff; }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--fairway); }
.textlink:hover { color: var(--signal); }

/* Überschriften */
h1, h2, h3 { font-stretch: 112%; letter-spacing: -0.025em; line-height: 1.02; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 5.6vw, 5.1rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.08; }
p { margin: 0; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--neben); max-width: 34em; }
.klein { font-size: 0.92rem; color: var(--neben); }

/* Erster Bildschirm */
.start { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 88px); }
.start .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.start h1 { max-width: 11em; font-size: clamp(2.5rem, 4.9vw, 4.6rem); }
.start .lead { margin-top: 24px; }
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* Arbeitstisch: Bildschirm und Telefon */
.tisch { position: relative; background: var(--tisch); padding: clamp(18px, 3.4vw, 44px); padding-bottom: clamp(56px, 7vw, 92px); }
.schirm { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-screen); overflow: hidden; }
.schirm::before { content: ""; display: block; height: 22px; border-bottom: 1px solid var(--linie); background: linear-gradient(90deg, #d4d7d3 0 7px, transparent 7px 14px, #d4d7d3 14px 21px, transparent 21px 28px, #d4d7d3 28px 35px, transparent 35px) 12px 50% / 35px 7px no-repeat, #f7f8f6; }
.telefon { border: 7px solid var(--tinte); border-radius: var(--r-phone); overflow: hidden; background: #fff; }
.tisch .telefon { position: absolute; width: 26%; right: 5%; bottom: 18px; }
.unterschrift { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; font-size: 0.95rem; color: var(--neben); }
.unterschrift strong { color: var(--tinte); font-weight: 650; }

/* Abschnittskopf */
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; padding-block: clamp(56px, 8vw, 112px) clamp(28px, 4vw, 48px); border-top: 1px solid var(--linie); }
.kopfzeile h2 { max-width: 13em; }

/* Arbeit: gemeinsame Teile */
.arbeit { padding-block: clamp(48px, 7vw, 104px); }
.nummer { font-stretch: 125%; font-weight: 300; font-size: 1rem; color: var(--neben); font-variant-numeric: tabular-nums; }
.status { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fairway); }
.status.aufbau::before { background: transparent; border: 2px solid var(--fairway); }
.text h3 { margin-block: 14px 16px; }
.text p + p { margin-top: 14px; }
.text .textlink { display: inline-block; margin-top: 22px; }

/* Film mit Poster */
.film { position: relative; }
.film video { width: 100%; background: #000; }
.film .start-film {
  position: absolute; left: 16px; bottom: 16px; min-height: 48px; padding: 0 18px 0 14px;
  display: inline-flex; align-items: center; gap: 10px; background: var(--grund); color: var(--tinte);
  border: 0; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.film .start-film::before { content: ""; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.film .start-film:hover { background: var(--signal); color: #fff; }
.film.laeuft .start-film { display: none; }

/* 02 Kohle-Band */
.band { background: var(--kohle); color: var(--kohle-text); }
.band .nummer, .band .klein, .band .lead { color: var(--kohle-neben); }
.band .textlink { text-decoration-color: var(--fairway); }
.band .textlink:hover { color: #fff; }
.band .grid-film { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.band .schirm { border-color: #2b2e33; background: #0e0f12; }
.band .schirm::before { background: linear-gradient(90deg, #3a3e44 0 7px, transparent 7px 14px, #3a3e44 14px 21px, transparent 21px 28px, #3a3e44 28px 35px, transparent 35px) 12px 50% / 35px 7px no-repeat, #1e2025; border-color: #2b2e33; }

/* 03 Tischkomposition */
.komposition { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); background: var(--tisch); padding: clamp(18px, 3vw, 40px); align-items: start; }
.komposition .schirm { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.komposition .clip { grid-column: span 5; }
.komposition .clip video { aspect-ratio: 5 / 4; object-fit: cover; }
.unter-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(28px, 5vw, 72px); margin-top: clamp(24px, 3vw, 40px); }

/* 04 Teilung */
.teilung { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* 05 Hochformat mit großer Zahl */
.hoch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.riesig { font-stretch: 125%; font-weight: 800; font-size: clamp(7rem, 17vw, 15rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--signal); }
.hoch .telefon { border-width: 6px; }

/* Arbeitsweise */
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 36px 0 0; }
.fakten div { border-top: 1px solid var(--linie); padding-block: 16px 22px; }
.fakten dt { font-weight: 650; font-stretch: 110%; font-size: 1.15rem; }
.fakten dd { margin: 4px 0 0; color: var(--neben); }
.wege { margin-top: 36px; }
.wege p { max-width: 36em; }

/* Archiv-Liste */
.archiv { columns: 3 16em; column-gap: 40px; list-style: none; padding: 0; margin: 0; }
.archiv li { break-inside: avoid; border-top: 1px solid var(--linie); }
.archiv a { display: flex; justify-content: space-between; gap: 12px; padding-block: 12px; text-decoration: none; min-height: 44px; }
.archiv a:hover { color: var(--signal); }
.archiv span { color: var(--neben); font-size: 0.9rem; white-space: nowrap; }

/* Kontakt */
.kontakt { background: var(--tisch); padding-block: clamp(64px, 9vw, 128px); }
.kontakt h2 { max-width: 14em; }
.kontakt .aktion { margin-top: 36px; }

.fuss { padding-block: 36px 44px; font-size: 0.92rem; color: var(--neben); }
.fuss .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; }
.fuss nav { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.fuss a { padding-block: 12px; display: inline-block; }

/* Projektübersicht */
.uebersicht-kopf { padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.uebersicht-kopf .lead { margin-top: 22px; }
.sprung { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linie); }
.sprung a { text-decoration: none; color: var(--neben); padding-block: 12px; }
.sprung a:hover { color: var(--tinte); }
.sprung b { color: var(--tinte); font-weight: 650; margin-left: 4px; font-variant-numeric: tabular-nums; }
.gruppe { padding-block: clamp(40px, 6vw, 80px) 8px; scroll-margin-top: 90px; }
.gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 28px; border-bottom: 1px solid var(--tinte); padding-bottom: 14px; }
.gruppe-kopf p { max-width: 36em; color: var(--neben); }
.raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.kachel { grid-column: span 2; text-decoration: none; display: block; }
.kachel.breit { grid-column: span 3; }
.kachel .flaeche { aspect-ratio: 16 / 10; background: var(--tisch); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 6%; }
.kachel .flaeche img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border: 1px solid var(--linie); border-radius: var(--r-screen); }
.kachel .flaeche.hochbild img { width: auto; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.kachel .flaeche.voll { padding: 0; }
.kachel .flaeche.voll img { border: 0; border-radius: 0; }
.kachel h3 { font-size: 1.25rem; margin-top: 16px; line-height: 1.15; font-stretch: 108%; }
.kachel p { margin-top: 6px; color: var(--neben); font-size: 0.98rem; max-width: 32em; }
.kachel .status { margin-top: 10px; }
.kachel:hover h3 { color: var(--signal); }
.kachel:hover .flaeche img { transform: translateY(-4px); }
.kachel .flaeche img { transition: transform 0.4s ease; }

/* Typografie-Flächen */
.kachel .flaeche.satz { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.satz .gross { font-stretch: 122%; font-weight: 760; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 9em; }
.satz .material { font-size: 0.88rem; color: var(--neben); }
.satz.dunkel { background: var(--kohle); color: var(--kohle-text); }
.satz.dunkel .material { color: var(--kohle-neben); }
.satz.gruen { background: var(--signal); color: #fff; }
.satz.gruen .material { color: #d3e4cf; }
.satz.linien { background: repeating-linear-gradient(0deg, var(--tisch) 0 27px, var(--linie) 27px 28px); }

/* Detailseite */
.pfad { padding-top: 28px; font-size: 0.92rem; color: var(--neben); }
.pfad a { padding-block: 12px; display: inline-block; }
.detail-kopf { padding-block: 16px clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(28px, 5vw, 72px); align-items: end; }
.detail-kopf h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.detail-kopf .status { margin-bottom: 18px; }
.haupt { background: var(--tisch); padding: clamp(18px, 3.4vw, 48px); }
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding-block: clamp(32px, 5vw, 56px); }
.kennzahlen div { border-top: 2px solid var(--tinte); padding-top: 14px; }
.kennzahlen dt { font-stretch: 120%; font-weight: 720; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; }
.kennzahlen dd { margin: 8px 0 0; color: var(--neben); }
.fall { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(28px, 5vw, 72px); padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--linie); }
.fall .zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.fall h3 { font-size: 1.2rem; margin-bottom: 10px; font-stretch: 108%; }
.galerie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; background: var(--tisch); padding: clamp(24px, 4vw, 56px); }
.galerie figure { margin: 0; }
.galerie figcaption { margin-top: 14px; font-size: 0.92rem; color: var(--neben); }
.galerie .film .start-film { left: 10px; bottom: 10px; }
.breitbild { margin-top: clamp(16px, 3vw, 40px); max-width: 880px; margin-left: auto; }
.quelle { margin-top: 12px; font-size: 0.82rem; color: var(--neben); max-width: 22em; }

/* Bewegung aus dem Thema: Arbeiten werden auf den Tisch gelegt, Bildschirme schalten sich ein.
   Nur mit JavaScript und nie bei reduzierter Bewegung; ohne JS ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-legen] { opacity: 0; transform: translateY(46px) rotate(-1.4deg); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); }
  .js [data-legen].da { opacity: 1; transform: none; }
  .js [data-legen="rechts"] { transform: translate(40px, 56px) rotate(3deg); }
  .js [data-legen="rechts"].da { transform: none; }
  .js [data-schirm] > img, .js [data-schirm] > video, .js [data-schirm] > .film { clip-path: inset(49.5% 0 49.5% 0); filter: brightness(1.6); transition: clip-path 0.75s cubic-bezier(0.6, 0, 0.2, 1) 0.25s, filter 0.6s ease 0.8s; }
  .js [data-schirm].da > img, .js [data-schirm].da > video, .js [data-schirm].da > .film { clip-path: inset(0 0 0 0); filter: none; }
}

/* Schmal */
@media (max-width: 900px) {
  .start .wrap, .band .grid-film, .teilung, .person, .unter-text, .detail-kopf, .fall, .hoch { grid-template-columns: minmax(0, 1fr); }
  .hoch .riesig { order: -1; }
  .komposition .schirm { grid-column: 1 / -1; grid-row: auto; }
  .komposition .clip { grid-column: span 6; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel, .kachel.breit { grid-column: span 1; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie figure:last-child { grid-column: 1 / -1; max-width: 300px; }
  .fall .zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .kopf .wrap { min-height: 60px; gap: 0 16px; }
  .nav { gap: 0 16px; width: 100%; justify-content: space-between; }
  .nav .knopf { display: none; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .tisch .telefon { width: 34%; right: 4%; }
  .archiv { columns: 1; }
  .start h1 { font-size: 2.35rem; }
}
.kachel .textlink { display: inline-block; margin-top: 12px; padding-block: 10px; }

/* Runde 2: Signatur Spiellinie (gestrichelte Linie aus den Bahngrafiken der Golf Data Pipeline) */
.marke span { font-weight: 380; }
.nummer[data-linie] { display: flex; align-items: center; gap: 14px; font-stretch: 125%; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.01em; }
.nummer[data-linie]::after { content: ""; height: 2px; width: clamp(64px, 10vw, 140px); background: repeating-linear-gradient(90deg, var(--fairway) 0 10px, transparent 10px 18px); }
.kopfzeile { border-top: 0; background: repeating-linear-gradient(90deg, var(--fairway) 0 10px, transparent 10px 18px) 0 0 / 100% 2px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .js .nummer[data-linie]::after { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.3, 0.7, 0.1, 1) 0.3s; }
  .js .nummer[data-linie].da::after { transform: none; }
}
.kachel.leit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(24px, 4vw, 56px); align-content: end; align-items: end; margin-bottom: clamp(8px, 2vw, 24px); }
.kachel.leit .flaeche { grid-column: 1; grid-row: 1 / span 6; }
.kachel.leit > :not(.flaeche) { grid-column: 2; }
.kachel.leit h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.04; font-stretch: 115%; }
.kachel.leit p { font-size: 1.05rem; }
.belegzeile { display: flex; flex-wrap: wrap; gap: 8px 0; padding-block: clamp(28px, 4vw, 44px); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--neben); border-bottom: 1px solid var(--linie); }
.belegzeile span { padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--linie); }
.belegzeile span:last-child { border-right: 0; }
.belegzeile b { color: var(--tinte); font-weight: 720; font-stretch: 120%; font-size: 1.35em; }
.galerie { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.haupt-film .telefon { max-width: 360px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); }
.schritte .telefon { border-width: 5px; max-width: 230px; }
.schritte p { margin-top: 14px; font-size: 0.95rem; color: var(--neben); max-width: 18em; }
.schritte b { color: var(--tinte); display: block; }
@media (max-width: 900px) {
  .kachel.leit { grid-template-columns: minmax(0, 1fr); }
  .kachel.leit .flaeche, .kachel.leit > :not(.flaeche) { grid-column: 1; grid-row: auto; }
  .raster .kachel.leit { grid-column: 1 / -1; }
  .galerie { grid-template-columns: minmax(0, 1fr); }
  .galerie figure:last-child { grid-column: auto; max-width: none; }
  .haupt-film .telefon { margin-inline: auto; max-width: 300px; }
}
.kachel.leit { grid-template-rows: 1fr repeat(4, auto); }
.kachel.leit .flaeche { grid-row: 1 / -1; }
.kachel.leit h3 { grid-row: 2; }
.kachel.leit h3 + p { grid-row: 3; }
.kachel.leit .status { grid-row: 4; }
.kachel.leit .textlink { grid-row: 5; }
@media (max-width: 900px) {
  .kachel.leit { grid-template-rows: none; }
  .kachel.leit .flaeche, .kachel.leit h3, .kachel.leit h3 + p, .kachel.leit .status, .kachel.leit .textlink { grid-row: auto; }
}

/* Runde 3: Hero mit mehr Material, Gruppen mit eigener Setzung, schmaler Kopf in einer Zeile */
.start .wrap { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); max-width: 1440px; }
.start h1 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.start .tisch { padding-right: clamp(40px, 9vw, 120px); padding-bottom: clamp(40px, 5vw, 72px); }
.start .tisch .telefon { width: 27%; right: -3%; bottom: -36px; box-shadow: 0 24px 48px -24px rgba(21, 24, 22, 0.45); }
.start figcaption { margin-top: 52px; }
.raster.asym .kachel.gross { grid-column: span 4; grid-row: span 2; }
.raster.asym .kachel.gross .flaeche { aspect-ratio: 16 / 11.2; }
.raster.asym .kachel.gross h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.raster.asym #ki-sichtbarkeitscheck, .raster.asym #ki-sekretariat, .raster.asym #sponsoring, .raster.asym #business-club { grid-column: span 3; }
.raster.paare .kachel { grid-column: span 3; }
.raster.liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.raster.liste .kachel { grid-column: auto; display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 20px; padding-block: 20px; border-top: 1px solid var(--linie); }
.raster.liste .kachel .flaeche { grid-row: 1 / span 3; aspect-ratio: 16 / 11; padding: 8px; }
.raster.liste .kachel .flaeche.satz { padding: 12px; }
.raster.liste .kachel .satz .gross { font-size: 0.98rem; line-height: 1.05; }
.raster.liste .kachel .satz .material { display: none; }
.raster.liste .kachel h3 { margin-top: 0; font-size: 1.15rem; }
.raster.liste .kachel p { font-size: 0.94rem; }
@media (max-width: 900px) {
  .start .tisch .telefon { right: 2%; }
  .raster.asym .kachel.gross, .raster.paare .kachel, .raster.asym #ki-sichtbarkeitscheck, .raster.asym #ki-sekretariat, .raster.asym #sponsoring, .raster.asym #business-club { grid-column: span 1; grid-row: auto; }
  .raster.asym .kachel.gross { grid-column: 1 / -1; }
  .raster.liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .nav .weit { display: none; }
  .kopf .wrap { flex-wrap: nowrap; }
  .nav { width: auto; gap: 0 18px; }
  .marke span { display: none; }
  .raster.liste .kachel { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .start .wrap { grid-template-columns: minmax(0, 1fr); }
  .start .tisch { padding-right: clamp(18px, 3.4vw, 44px); }
}
.raster.asym #ki-sichtbarkeitscheck .flaeche, .raster.asym #ki-sekretariat .flaeche, .raster.asym #sponsoring .flaeche, .raster.asym #business-club .flaeche { aspect-ratio: 16 / 7; }
@media (max-width: 560px) { .raster.asym #ki-sichtbarkeitscheck .flaeche, .raster.asym #ki-sekretariat .flaeche, .raster.asym #sponsoring .flaeche, .raster.asym #business-club .flaeche { aspect-ratio: 16 / 9; } }