/* D4 Kacheln: Bento und Mosaik */
:root { --kachel: #151413; --kachel-2: #1C1B1A; --r-k: 20px; }
@media (min-width: 900px) { :root { --r-k: 24px; } }

/* Hero: Mosaik aus Video und echten Gästen */
.hero { position: relative; padding-top: 68px; }
.hero__mosaik { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; height: min(31svh, 260px); padding: 0 6px; }
.hm { position: relative; border-radius: 14px; overflow: hidden; background: var(--kachel); }
.hm > img, .hm .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm--gross { grid-row: 1 / -1; }
.bewegt .hm--gross img { animation: k-zoom 7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes k-zoom { from { transform: scale(1.06); } to { transform: none; } }
.hero__text { padding-top: 16px; padding-bottom: 44px; }
@media (max-width: 899px) { .hero__text .df-lead { font-size: 17px; } }
.hero__h1 { font-size: clamp(30px, 8.4vw, 76px); max-width: 15ch; margin: 8px 0 14px; }
.hero__text .df-lead { max-width: 46ch; color: var(--text); }
.hero__cta { display: grid; gap: 12px; justify-items: center; margin-top: 22px; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 0 40px; min-height: 100svh; padding: 96px max(var(--gutter), calc((100vw - var(--max)) / 2)) 48px; }
  .hero .kopf .df-wrap { max-width: none; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .hero__text { order: 1; padding: 0; }
  .hero__h1 { font-size: clamp(38px, 3.6vw, 60px); }
  .hero__mosaik { order: 2; height: min(70svh, 640px); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; padding: 0; }
  .hm { border-radius: var(--r-k); }
  .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; justify-items: start; }
  .hero__cta .beweis { flex-basis: 100%; }
}

/* Eindrücke: dichtes Mosaik */
.mosaik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 6px; }
.mz { position: relative; border-radius: 14px; overflow: hidden; background: var(--kachel); }
.mz > img, .mz > .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mz--hoch { grid-row: span 2; }
.mz--breit { grid-column: span 2; }
.mosaik { grid-auto-flow: dense; }
@media (min-width: 900px) {
  .mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 12px; }
  .mz { border-radius: var(--r-k); }
  .mz--breit-d { grid-column: span 2; }
}

/* Fahrertypen als Sammelkarten */
.typen__tipp { color: var(--text-2); font-size: 16px; }
.typen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.typ__vorn, .typ__hinten { border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; }
.typ__vorn { position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; }
.typ__vorn img { width: 100%; height: 100%; object-fit: cover; }
.typ__vorn::before { content: ""; position: absolute; inset: 6px; z-index: 1; border-radius: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset; pointer-events: none; }
.typ__vorn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,7,0) 45%, rgba(8,7,7,.92) 100%); }
.typ__vorn .typ__name { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2; }
.typ__name { font: 900 italic 15px/1.12 var(--kopf); text-transform: uppercase; text-wrap: balance; hyphens: manual; }
.typ__name .nb { white-space: normal; }
.typ__hinten { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; background: linear-gradient(160deg, #23211F 0%, #151413 100%); box-shadow: 0 0 0 1px var(--linie) inset; }
.typ__hinten p { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.typ__hinten ul { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.typ__hinten li { padding: 6px 10px; border-radius: 6px; background: #2E2C2A; font: 700 13px/1 var(--fliess); }
.typen__cta { margin-top: 24px; color: var(--text-2); font-size: 16px; }
@media (min-width: 900px) { .typen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .typ__name { font-size: 20px; } .typ__hinten p { font-size: 16px; } }

/* Startampel */
.ampel__kachel { display: grid; gap: 22px; padding: 30px 20px; border-radius: var(--r-k); background: radial-gradient(120% 100% at 50% 0%, #22201E 0%, var(--kachel) 60%); box-shadow: 0 0 0 1px var(--linie) inset; }
.ampel__kachel p { color: var(--text-2); margin-top: 10px; }
@media (min-width: 900px) { .ampel__kachel { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 52px; } }

.fragen__wrap { max-width: 860px; }
.faq details { background: var(--kachel); border-radius: 16px; }

/* Schluss als Großkachel */
.schluss { padding-bottom: 64px; }
.schluss__kachel { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-k); overflow: hidden; background: var(--kachel); box-shadow: 0 0 0 1px var(--linie) inset; }
.schluss__bild { aspect-ratio: 16 / 11; }
.schluss__bild img { width: 100%; height: 100%; object-fit: cover; }
.schluss__text { padding: 26px 22px 32px; }
.schluss__text .df-h { max-width: 15ch; margin: 10px 0 14px; }
.schluss__text .df-lead { max-width: 46ch; color: var(--text); }
.schluss__cta { display: grid; gap: 12px; justify-items: start; margin-top: 24px; }
.schluss__cta .df-btn { width: 100%; }
@media (min-width: 900px) {
  .schluss__kachel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .schluss__bild { aspect-ratio: auto; height: 100%; min-height: 520px; }
  .schluss__text { padding: 56px; }
  .schluss__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; justify-items: start; }
  .schluss__cta .df-btn { width: auto; }
  .schluss__cta .beweis { flex-basis: 100%; }
}
@media (min-width: 900px) {
  .mosaik { grid-template-areas: "a b b c" "a d d e" "f g g g"; grid-auto-flow: row; }
  .mz { grid-column: auto; grid-row: auto; }
  .mz:nth-child(1) { grid-area: a; } .mz:nth-child(2) { grid-area: b; } .mz:nth-child(3) { grid-area: c; }
  .mz:nth-child(4) { grid-area: d; } .mz:nth-child(5) { grid-area: e; } .mz:nth-child(6) { grid-area: f; } .mz:nth-child(7) { grid-area: g; }
}

/* Problem und Lösung als ruhige Karten */
.push__liste, .pull__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.push__liste li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px; border-radius: 16px; background: var(--kachel); font: 600 17px/1.45 var(--fliess); }
.push__liste svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.pull__liste li { padding: 24px 22px; border-radius: 18px; background: var(--kachel); }
.pk__ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: #2A2827; }
.pk__ico svg { width: 18px; height: 18px; }
.pull__liste h3 { font: 900 italic 20px/1.15 var(--kopf); text-transform: uppercase; margin-bottom: 8px; text-wrap: balance; }
.pull__liste p { color: var(--text-2); font-size: 17px; }
@media (min-width: 900px) {
  .push__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
  .pull__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Für wen: vier Bildkarten */
.fuer__raster { display: grid; gap: 26px; }
.fw__bild { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; margin-bottom: 14px; background: var(--kachel); }
.fw__bild img { width: 100%; height: 100%; object-fit: cover; }
.fw h3 { font: 900 italic 20px/1.15 var(--kopf); text-transform: uppercase; margin-bottom: 8px; text-wrap: balance; }
.fw p { color: var(--text-2); font-size: 17px; }
@media (min-width: 900px) { .fuer__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .fw__bild { aspect-ratio: 3 / 4; } }

/* Ablauf: Kartenraster mit Video je Schritt */
.ablauf__raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.schritt { border-radius: 18px; overflow: hidden; background: var(--kachel-2); }
.schritt__vid { aspect-ratio: 16 / 10; }
.schritt__text { padding: 18px 20px 22px; }
.schritt__text h3 { font: 900 italic 20px/1.15 var(--kopf); text-transform: uppercase; margin-bottom: 6px; }
.schritt__text p { color: var(--text-2); font-size: 16px; }
.ablauf__cta { margin-top: 32px; display: flex; justify-content: center; }
@media (min-width: 900px) {
  .ablauf__raster { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .schritt__vid { aspect-ratio: 4 / 5; }
}

/* Technik: Bild mit Hotspots und Liste mit Herstellerlogos */
.technik__raster { display: grid; gap: 20px; }
.technik__bild { position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); background: var(--ink); }
.technik__rahmen { position: relative; border-radius: var(--r-k); overflow: hidden; }
.technik__rahmen img { width: 100%; height: auto; }
.hs { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none; cursor: pointer; }
.hs i { position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); transition: transform .3s ease, box-shadow .3s ease; }
.hs.ist-an i { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(255,255,255,.22), 0 0 0 16px rgba(255,255,255,.08); }
.technik__teile { list-style: none; margin: 0; padding: 0; display: grid; }
.tk { padding: 18px 0 18px 18px; border-left: 2px solid var(--linie); transition: border-color .3s ease; }
.tk.ist-an { border-color: var(--text); }
.tk__logo { display: block; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .85; margin-bottom: 10px; }
.tk h3 { font: 800 17px/1.3 var(--fliess); margin-bottom: 4px; }
.tk p { color: var(--text-2); font-size: 16px; line-height: 1.5; }
@media (min-width: 900px) {
  .technik__raster { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  .technik__bild { top: 96px; margin: 0; padding: 0; background: none; }
}

/* Stimmen direkt auf der Fläche, keine zweite Ebene */
.stimmen .beweis { margin-top: 4px; }

/* Profis als ruhiges Band */
.profis { padding-bottom: var(--abstand); }
.profis__band { display: grid; gap: 22px; padding-top: 36px; border-top: 1px solid var(--linie); }
.profis__band .df-h { margin-bottom: 8px; }
.profis__band p { color: var(--text-2); font-size: 17px; max-width: 48ch; }
.profis__leute { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profi img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 22%; border-radius: 14px; background: var(--kachel-2); }
.profi figcaption { display: grid; padding-top: 10px; }
.profi b { font: 800 16px/1.3 var(--fliess); }
.profi span { color: var(--text-2); font-size: 15px; }
@media (min-width: 900px) { .profis__band { grid-template-columns: 1fr 420px; gap: 56px; align-items: center; } }

/* Preise: Karten mit Knopf im Seitenstil */
.pakete { display: grid; gap: 10px; margin-bottom: 12px; }
.paket { position: relative; display: grid; align-content: start; gap: 4px; padding: 24px 22px; border: 0; border-radius: var(--r-k); background: var(--kachel); text-align: left; cursor: pointer; transition: transform .2s ease; }
.paket:hover { transform: translateY(-2px); }
.paket--top { box-shadow: 0 0 0 2px var(--text) inset; }
.paket__marke { position: absolute; top: 22px; right: 22px; padding: 6px 10px; border-radius: 6px; background: var(--text); color: var(--ink); font: 800 13px/1 var(--fliess); }
.paket__dauer { color: var(--text-2); font: 700 14px/1.3 var(--fliess); }
.paket__name { font: 900 italic 20px/1.1 var(--kopf); text-transform: uppercase; }
.paket__preis { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.paket__preis b { font: 900 italic 44px/1 var(--kopf); }
.paket__preis span { color: var(--text-2); font-size: 16px; }
.paket__text { margin-top: 8px; color: var(--text-2); font-size: 16px; }
.paket__los { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; margin-top: 18px; padding: 0 8px 0 18px; border-radius: var(--r-m); background: linear-gradient(180deg, var(--gelb-hi) 0%, var(--gelb) 45%, var(--gelb-tief) 100%); color: var(--ink); font: 900 italic 15px/1 var(--kopf); text-transform: uppercase; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -2px 0 rgba(0,0,0,.12) inset; }
.paket__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--ink); color: var(--gelb); }
.paket__icon svg { width: 16px; height: 16px; }
@media (min-width: 700px) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .paket { padding: 28px 24px; } }
@media (min-width: 1180px) { .pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); } .paket__preis b { font-size: 40px; } }
/* Schmale Schlusskachel: Bewertungszeile darf hier umbrechen */
@media (max-width: 899px) { .schluss .df-wrap { padding-inline: 0; } .schluss__kachel { border-radius: 0; box-shadow: none; } .schluss__text { padding: 24px var(--gutter) 28px; } }
@media (max-width: 359px) { .beweis__z1 { white-space: normal; } }
.gs__raster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gs__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Gutschein-Fächer mobil schmaler, bleibt im Bild */
.gs { overflow: clip; }
@media (max-width: 767px) {
  .gs__buehne { min-height: 0; }
  .gs__faecher { width: 56vw; margin: 28px auto 36px; }
  .gs__karte { transform: translateX(calc((var(--i) - 1) * 17% * var(--k))) rotate(calc((var(--i) - 1) * 7deg * var(--k))); padding: 12px 14px; }
  .gs__art { font-size: 12px; } .gs__preis { font-size: 22px; right: 14px; bottom: 10px; }
}

/* Eindruck-Mosaik: fünf Kacheln mit Menschen, keine Ingame-Bilder, feste Flächen ohne angeschnittene Reihe */
.mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "a c" "d e"; grid-auto-rows: 180px; grid-auto-flow: row; }
.mz { grid-column: auto; grid-row: auto; }
.mz:nth-child(1) { grid-area: a; } .mz:nth-child(2) { grid-area: b; } .mz:nth-child(3) { grid-area: c; }
.mz:nth-child(4) { grid-area: d; } .mz:nth-child(5) { grid-area: e; }
@media (min-width: 900px) {
  .mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "a b b c" "a d e c"; grid-auto-rows: 240px; }
}

/* Schluss: Bild als Hintergrund der ganzen Kachel, Text auf dunklem Verlauf darüber (Matthias 05.11.2026) */
.schluss__kachel { position: relative; display: block !important; isolation: isolate; }
.schluss__bild { position: absolute !important; inset: 0; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; z-index: -1; }
.schluss__bild img { object-position: 30% 50%; }
.schluss__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 14, 13, .15) 0%, rgba(16, 14, 13, .55) 35%, rgba(16, 14, 13, .94) 62%, #100E0D 100%); }
.schluss__text { position: relative; padding-top: 58vw !important; }
@media (min-width: 900px) {
  .schluss__kachel { min-height: 560px; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .schluss__bild img { object-position: 20% 50%; }
  .schluss__bild::after { background: linear-gradient(90deg, rgba(16, 14, 13, .05) 0%, rgba(16, 14, 13, .25) 30%, rgba(16, 14, 13, .88) 55%, #100E0D 78%); }
  .schluss__text { grid-column: 2; padding: 56px !important; }
}
.ampel__kachel { padding: 36px 24px; gap: 30px; }
@media (min-width: 900px) { .ampel__kachel { padding: 56px; } }

/* Sektionsrhythmus: Schwarz, Anthrazit, ein heller Bruch für Preise und Stimmen */
.push, .ablauf, .gastgeber, .fragen { background: #1B1917; --kachel: #24221F; --kachel-2: #2B2926; --linie: #34312D; }
.preise, .stimmen { background: #F3F1EC; color: #171513; --text: #171513; --text-2: #55514B; --linie: #DDD8CF; --kachel: #FFFFFF; --kachel-2: #EFEBE4; --karte: #FFFFFF; --karte-2: #EFEBE4; }
.preise .paket { box-shadow: 0 1px 2px rgba(23, 21, 19, .06), 0 12px 32px rgba(23, 21, 19, .07); }
.preise .paket--top { box-shadow: 0 0 0 2px #171513 inset, 0 12px 32px rgba(23, 21, 19, .1); }
.preise .paket__marke { background: #171513; color: #F4F2EC; }
.preise .df-sterne, .stimmen .df-sterne, .stimmen .beweis, .preise .beweis { color: #171513; }
.preise .rabatt, .stimmen .stimme-rf { background: #FFFFFF; box-shadow: 0 1px 2px rgba(23, 21, 19, .06), 0 12px 32px rgba(23, 21, 19, .06); }
.preise .df-btn, .stimmen .df-btn { box-shadow: 0 0 0 1px rgba(23, 21, 19, .14), 0 8px 18px rgba(23, 21, 19, .14); }

/* Schluss: Bild deutlich sichtbar, Text erst im unteren Drittel */
.schluss__bild img { object-position: 35% 50% !important; }
.schluss__bild::after { background: linear-gradient(180deg, rgba(16, 14, 13, 0) 0%, rgba(16, 14, 13, 0) 38%, rgba(16, 14, 13, .78) 62%, #100E0D 82%) !important; }
.schluss__text { padding-top: 92vw !important; }
@media (min-width: 900px) {
  .schluss__bild img { object-position: 30% 50% !important; }
  .schluss__bild::after { background: linear-gradient(90deg, rgba(16, 14, 13, 0) 0%, rgba(16, 14, 13, .1) 35%, rgba(16, 14, 13, .82) 58%, #100E0D 76%) !important; }
  .schluss__text { padding: 56px !important; }
}
/* Farbwechsel braucht Luft */
.profis, .technik, .gastgeber, .ampel, .fragen { padding-top: var(--abstand); }
.push, .ablauf, .preise, .stimmen, .gastgeber, .fragen { padding-top: var(--abstand); padding-bottom: var(--abstand); }
.hero { padding-bottom: var(--abstand); }
.profis__band { border-top: 0; padding-top: 0; }
/* Full Stint als Verkaufskarte: dunkel auf der hellen Preisfläche */
.preise .paket--top { background: #171513; color: #F4F2EC; --text: #F4F2EC; --text-2: #C9C6BE; box-shadow: 0 14px 34px rgba(23, 21, 19, .22); }
.preise .paket--top .paket__marke { background: #F4F2EC; color: #171513; }
.tk__logo { width: auto; max-width: 160px; }
@media (max-width: 899px) { body { --text-2: #D6D3CC; } }
/* Lösung hell wie in D5: Problem dunkel, Lösung hell, Karten mit Kontrast */
.pull { background: #F3F1EC; color: #171513; --text: #171513; --text-2: #55514B; --linie: #DDD8CF; --kachel: #FFFFFF; --kachel-2: #EFEBE4; padding-top: var(--abstand); padding-bottom: var(--abstand); }
.pull__liste li { background: #FFFFFF; box-shadow: 0 1px 2px rgba(23, 21, 19, .06), 0 12px 32px rgba(23, 21, 19, .06); }
.pull__liste p { color: #55514B; }
@media (min-width: 900px) { .pull__liste { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 920px; margin: 0 auto; gap: 16px; } .pull__liste li { padding: 30px 30px; } }
/* Rhythmus neu: nie zwei gleich dunkle Nachbarn (Schwarz, Anthrazit, Hell im Wechsel) */
.ablauf { background: #0A0909; --kachel: #171513; --kachel-2: #1F1D1B; --linie: #2C2B2B; }
.eindruck, .technik, .profis { background: #1B1917; --kachel: #24221F; --kachel-2: #2B2926; --linie: #34312D; }
.eindruck, .profis { padding-top: var(--abstand); padding-bottom: var(--abstand); }
.anfahrt { background: #0A0909; }
/* Anthrazit deutlicher absetzen */
.push, .eindruck, .technik, .gastgeber, .profis, .fragen { background: #25221F !important; --kachel: #2F2C28; --kachel-2: #36332E; --linie: #3B3833; }
/* Anfahrt hell, damit sie sich vom dunklen Schluss absetzt */
.anfahrt { background: #F3F1EC !important; color: #171513; --text: #171513; --text-2: #55514B; --linie: #DDD8CF; --kachel: #FFFFFF; padding-top: var(--abstand); padding-bottom: var(--abstand); }
.anfahrt .df-btn--zweit, .anfahrt .anfahrt__route { color: #171513; border-color: #171513; }
@media (max-width: 899px) { .technik { --flaeche: #25221F; } .technik .tk.ist-an { border-color: transparent; } }
@media (max-width: 899px) { .technik .tk { padding: 16px 16px !important; border-radius: 14px; } .technik .tk.ist-an { background: #34312C; } }
/* Google-Stimmen: weißer Grund, damit die hellen Widget-Karten sich abheben */
.stimmen { background: #FFFFFF !important; }
.stimmen { background: #F3F1EC !important; }