/* sandro1: alles unterhalb des Heros im Stil der Handy-Vorschauen (Satoshi, Schwarz, Papier, Sandro-Orange). */
:root { --n-schwarz: #0b0b0a; --n-papier: #f2f2ee; --n-tinte: #151515; --n-orange: #ffb000; --n-leise: #a7a69b; --n-leise-d: #63635a; --n-rand: rgba(255, 255, 255, .14); }
.n-sec { font-family: Satoshi, "Helvetica Neue", Arial, sans-serif; font-weight: 500; padding: 130px 0; position: relative; }
.n-sec h2 { font-weight: 900; font-size: clamp(44px, 6.2vw, 92px); line-height: .95; letter-spacing: -.045em; }
.n-sec h3 { font-weight: 900; letter-spacing: -.03em; }
.n-wrap { max-width: 1240px; margin: 0 auto; padding: 0 6vw; }
.n-dunkel { background: var(--n-schwarz); color: #f4f4ee; }
.n-papier { background: var(--n-papier); color: var(--n-tinte); }
.n-orange { background: var(--n-orange); color: var(--n-tinte); }
.n-kopf { max-width: 820px; margin-bottom: 64px; }
.n-kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 26px; color: var(--n-orange); }
.n-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.n-papier .n-kicker, .n-orange .n-kicker { color: var(--n-tinte); }
.n-papier .n-kicker::before { background: var(--n-orange); }
.n-unter { font-size: 18px; line-height: 1.6; color: var(--n-leise); max-width: 560px; margin-top: 26px; }
.n-papier .n-unter { color: var(--n-leise-d); }
.n-orange .n-unter { color: #2b2111; }
.n-knopf { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 0; font: 700 15px/1 Satoshi, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.n-knopf span { font-size: 20px; transition: transform .2s; }
.n-knopf:hover span { transform: translate(3px, -3px); }
.n-knopf-orange { background: var(--n-orange); color: var(--n-tinte); }
.n-knopf-orange:hover { background: #fff; }
.n-knopf-schwarz { background: var(--n-tinte); color: #fff; }
.n-knopf-schwarz:hover { background: #000; }
.n-knopf:disabled { opacity: .5; cursor: wait; }
.n-breit { width: 100%; }
.n-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 6px 0; background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; font: 700 14px/1.2 Satoshi, sans-serif; text-decoration: none; cursor: pointer; }
.n-link span { font-size: 18px; transition: transform .2s; }
.n-link:hover span { transform: translate(3px, -3px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logos auf Schwarz */
.referenzen { background: var(--n-schwarz); border: 0; border-top: 1px solid var(--n-rand); border-bottom: 1px solid var(--n-rand); padding: 52px 0 46px; }
.referenzen > p { color: var(--n-leise); font-family: Satoshi, sans-serif; }
.ref-logo img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .6; }
.ref-logo:hover img { filter: grayscale(1) invert(1) brightness(2); opacity: 1; }
.ref-logo[data-k=wimmer] img { filter: grayscale(1) brightness(1.6); }
.ref-logo[data-k=wimmer]:hover img { filter: grayscale(1) brightness(2); }
.ref-name { color: #d8d8cf; font-family: Satoshi, sans-serif; font-weight: 900; }

/* Chef-Sätze zum Umdrehen */
.satz-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.satz { position: relative; min-height: 260px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; perspective: 1200px; font: inherit; }
.satz-vorne, .satz-hinten { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.22, .75, .19, 1); }
.satz-vorne { background: #1b1b19; border: 1px solid var(--n-rand); }
.satz-hinten { background: var(--n-orange); color: var(--n-tinte); transform: rotateY(180deg); }
.satz[aria-pressed=true] .satz-vorne { transform: rotateY(-180deg); }
.satz[aria-pressed=true] .satz-hinten { transform: rotateY(0); }
.satz:hover .satz-vorne { border-color: var(--n-orange); }
.satz:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 4px; }
.satz-label { font-size: 12px; font-weight: 700; color: var(--n-leise); margin-bottom: 18px; }
.satz-hinten .satz-label { color: #4a3510; }
.satz-text { font-size: 25px; line-height: 1.18; font-weight: 900; letter-spacing: -.03em; }
.satz-hinten .satz-text { font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.satz-tipp, .satz-modul { margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; border-top: 1px solid currentColor; }
.satz-tipp { color: var(--n-leise); border-color: var(--n-rand); }
.satz-tipp span { font-size: 17px; color: var(--n-orange); }

/* VSL */
.vsl { background: var(--n-schwarz); border-top: 1px solid var(--n-rand); }
.vsl .vsl-grid { margin-top: 0; }
.vsl .vsl-player { border-radius: 0; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.vsl .vsl-kapitel { background: #1b1b19; border-radius: 0; color: #e8e8e0; }
.vsl .vsl-kapitel li { border-color: var(--n-rand); font-size: 14px; }
.vsl .vsl-kapitel span { color: var(--n-orange); }

/* Für wen */
.n-fuerwen { border-top: 1px solid var(--n-rand); }
.lagen { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--n-rand); }
.lage { padding: 34px 32px 38px 0; display: flex; flex-direction: column; align-items: flex-start; }
.lage + .lage { padding-left: 32px; border-left: 1px solid var(--n-rand); }
.lage-nr { font-size: 13px; font-weight: 900; color: var(--n-orange); margin-bottom: 40px; }
.lage h3 { font-size: 28px; line-height: 1.08; margin-bottom: 18px; }
.lage p:not(.lage-nr) { color: var(--n-leise); font-size: 16px; line-height: 1.65; margin-bottom: 26px; }
.lage .n-link { margin-top: auto; }

/* Kündigungscheck im neuen Stil */
.check { background: #000; border-top: 1px solid var(--n-rand); }
.check h2 { font-size: clamp(42px, 5.4vw, 78px); margin: 0; }
.check .check-karte { border-radius: 0; font-family: Satoshi, sans-serif; }
.check .check-fragen legend { font-family: Satoshi, sans-serif; font-weight: 900; }
.check .check-antwort { border-radius: 0; font-family: Satoshi, sans-serif; }
.check .check-punkte li::before { border-radius: 0; width: 12px; height: 2px; top: 11px; box-shadow: none; }

/* Module als 3D-Karten */
.n-kurs { overflow: hidden; border-top: 1px solid var(--n-rand); }
.kurs-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.kurs-zahlen { display: flex; gap: 36px; }
.kurs-zahlen dt { font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.kurs-zahlen dd { font-size: 13px; color: var(--n-leise); max-width: 130px; margin-top: 8px; line-height: 1.4; }
.kap-buehne { position: relative; height: 470px; margin: 40px -6vw 0; perspective: 1400px; touch-action: pan-y; cursor: grab; overflow: clip; outline: 0; }
.kap-buehne:active { cursor: grabbing; }
.kap-spur { position: absolute; inset: 0; transform-style: preserve-3d; }
.kap-karte { position: absolute; left: 50%; top: 50%; width: 280px; height: 370px; padding: 20px 22px; border: 1px solid #fff2; text-align: left; display: flex; flex-direction: column; box-shadow: 0 20px 35px #0006; font-family: Satoshi, sans-serif; cursor: pointer;
  transform: translate(-50%, -50%) translateX(calc(var(--d) * 300px)) translateY(calc(var(--ad, 0) * 14px)) translateZ(calc(var(--ad, 0) * -80px)) rotateY(calc(var(--d) * -17deg));
  z-index: calc(20 - var(--ad, 0)); opacity: calc(1 - var(--ad, 0) * .15); transition: transform .65s cubic-bezier(.22, .75, .19, 1), opacity .5s; }
.kap-karte[data-weg=true] { visibility: hidden; pointer-events: none; }
.kap-karte[aria-current=true] { outline: 1px solid var(--n-orange); outline-offset: 6px; }
.ton-0 { background: var(--n-orange); color: var(--n-tinte); }
.ton-1 { background: #ecece5; color: var(--n-tinte); }
.ton-2 { background: #242421; color: #f2f2ea; }
.kap-oben { display: flex; justify-content: space-between; font-size: 10px; }
.kap-oben span:first-child { font-weight: 900; font-size: 13px; }
.kap-karte img { width: 170px; height: 170px; align-self: center; margin: 6px 0 8px; pointer-events: none; }
.kap-name { font-size: 28px; font-weight: 900; letter-spacing: -.05em; line-height: 1.03; hyphens: auto; }
.kap-unten { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid currentColor; font-size: 11px; }
.kap-unten span { font-size: 19px; }
.kap-steuer { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 8px; }
.kreis { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid #ffffff40; border-radius: 50%; background: none; color: #fff; font-size: 20px; cursor: pointer; }
.kreis:hover { background: var(--n-orange); border-color: var(--n-orange); color: var(--n-tinte); }
.kap-wahl { width: 100%; max-width: 300px; }
.kap-wahl select { appearance: none; width: 100%; min-height: 46px; background: var(--n-schwarz); color: #f4f4ee; border: 0; border-bottom: 1px solid #fff4; text-align: center; font: 700 13px Satoshi, sans-serif; cursor: pointer; }
.kap-text { display: grid; grid-template-columns: 80px 1fr auto; gap: 26px; align-items: start; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--n-rand); }
.kap-text > span { font-size: 13px; color: var(--n-leise); padding-top: 6px; }
.kap-text h3 { font-size: 30px; }
.kap-text p { color: var(--n-leise); font-size: 16px; line-height: 1.7; margin-top: 10px; max-width: 680px; }
.kap-hinweis { color: var(--n-leise); font-size: 13px; margin-top: 20px; }
html:not(.js) .kap-buehne { height: auto; overflow: auto; }
html:not(.js) .kap-spur { position: static; display: flex; gap: 20px; padding: 20px 6vw; }
html:not(.js) .kap-karte { position: relative; left: auto; top: auto; transform: none; opacity: 1; flex: none; visibility: visible; }
html:not(.js) .kap-steuer, html:not(.js) .kap-text { display: none; }
#kap-dialog { border: 0; border-radius: 0; background: var(--n-papier); color: var(--n-tinte); width: min(700px, 92vw); max-height: 86svh; padding: 54px 50px 40px; overflow: auto; font-family: Satoshi, sans-serif; box-shadow: 0 30px 100px #0008; }
#kap-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.kd-zu { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; border: 0; background: none; font-size: 32px; cursor: pointer; }
#kd-nr { font-size: 12px; color: var(--n-leise-d); font-weight: 700; }
#kap-dialog h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; margin-top: 16px; }
#kd-ziel { font-size: 16px; line-height: 1.7; color: var(--n-leise-d); margin-top: 20px; }
#kap-dialog h3 { font-size: 17px; font-weight: 900; margin-top: 28px; }
#kd-liste { list-style: none; margin: 10px 0 30px; }
#kd-liste li { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid #d0d0c3; font-size: 15px; }
#kd-liste span { font-size: 11px; color: var(--n-leise-d); padding-top: 3px; }

/* Ergebnis-Blätter */
.blaetter { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.blatt { background: #fff; padding: 26px 24px 30px; min-height: 280px; display: flex; flex-direction: column; box-shadow: 0 1px 0 #0000000d, 0 18px 40px #0000000f; transition: transform .4s cubic-bezier(.22, .75, .19, 1); }
.blatt:nth-child(odd) { transform: rotate(-1.2deg); }
.blatt:nth-child(even) { transform: rotate(1deg) translateY(14px); }
.blatt:hover { transform: rotate(0) translateY(-6px); }
.blatt-kopf { font-size: 11px; font-weight: 700; color: var(--n-leise-d); padding-bottom: 14px; border-bottom: 2px solid var(--n-orange); margin-bottom: 26px; }
.blatt h3 { font-size: 26px; line-height: 1.05; margin-bottom: 14px; }
.blatt p { color: var(--n-leise-d); font-size: 15px; line-height: 1.55; }

/* Sandro */
.n-sandro { padding-top: 40px; }
.sandro-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.sandro-bild { position: relative; aspect-ratio: 1 / 1.1; min-height: 420px; background: #e4e4db; overflow: clip; }
.sandro-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; z-index: 2; filter: grayscale(1); transition: filter .7s; }
.sandro-bild:hover img { filter: none; }
.sandro-s { position: absolute; left: 4%; top: 6%; font-weight: 900; font-size: clamp(220px, 32vw, 480px); line-height: .8; letter-spacing: -.11em; color: var(--n-orange); transform: rotate(-8deg); }
.sandro-name { position: absolute; left: 22px; bottom: 22px; z-index: 3; background: var(--n-papier); padding: 12px 18px; font-size: 14px; font-weight: 900; }
.sandro-name small { display: block; font-size: 11px; font-weight: 500; color: var(--n-leise-d); }
.sandro-text h2 { font-size: clamp(40px, 4.6vw, 66px); }
.sandro-text p:not(.n-kicker) { font-size: 17px; line-height: 1.75; color: var(--n-leise-d); margin-top: 22px; max-width: 470px; }
.sandro-text blockquote { margin-top: 30px; padding-left: 20px; border-left: 3px solid var(--n-orange); font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; max-width: 480px; }

/* Starterpaket in Orange */
.starter { padding: 120px 0; }
.starter .starter-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }
.starter-buch { width: 100%; max-width: 340px; justify-self: center; transform: rotate(-5deg); transition: transform .5s; }
.starter-buch:hover { transform: rotate(-2deg) translateY(-6px); }
.starter-buch img { width: 100%; height: auto; box-shadow: 18px 26px 0 #0000001f, 0 30px 60px #0000003a; }
.starter h2 { font-size: clamp(42px, 5.4vw, 80px); }
.starter .starter-form { margin-top: 30px; }
.starter .starter-form input:not([type=checkbox]) { border-radius: 0; border: 0; border-bottom: 2px solid var(--n-tinte); background: #ffffff6b; font-family: Satoshi, sans-serif; }
.starter .starter-form input:focus { background: #fff; }
.starter .starter-form .consent { color: #2b2111; }
.starter .starter-form .consent input { accent-color: var(--n-tinte); }
.starter .starter-klein, .starter .starter-klein a { color: #3b2c12; }
.starter .starter-ok { background: #ffffff8c; border-radius: 0; }

/* Preis */
.n-preis { border-top: 1px solid var(--n-rand); }
.preis-raster { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: 8vw; align-items: start; }
.preis-garantie { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--n-rand); color: var(--n-leise); font-size: 15px; line-height: 1.6; max-width: 440px; }
.preis-garantie b { color: #fff; }
.preis-karte { background: #f4f4ee; color: var(--n-tinte); padding: 36px 34px 30px; box-shadow: 0 40px 80px #0007; }
.preis-name { font-size: 13px; font-weight: 700; color: var(--n-leise-d); }
.preis-wert { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 12px 0 26px; }
.preis-liste { list-style: none; margin-bottom: 28px; }
.preis-liste li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid #dcdcd0; font-size: 15px; line-height: 1.45; }
.preis-liste li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--n-orange); border-bottom: 2px solid var(--n-orange); transform: rotate(-45deg); }
.reservieren { display: grid; gap: 8px; }
.reservieren label { font-size: 13px; font-weight: 700; }
.reservieren input:not([type=checkbox]) { font: 500 16px Satoshi, sans-serif; padding: 13px 14px; border: 1.5px solid #cfcfc3; background: #fff; margin-bottom: 6px; }
.reservieren input:focus { border-color: var(--n-orange); outline: 0; }
.reservieren .consent { display: flex; gap: 10px; font-weight: 500; font-size: 13px; color: #444; margin: 4px 0 6px; }
.reservieren .consent input { accent-color: var(--n-orange); margin-top: 3px; }
.reservieren .err { color: #c62828; font-size: 14px; }
.r-ok { padding: 18px; background: #fff3cf; font-weight: 700; }
.preis-klein { font-size: 13px; color: var(--n-leise-d); margin-top: 14px; text-align: center; }

/* FAQ */
.faq-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
.faq-raster h2 { font-size: clamp(40px, 4.8vw, 70px); }
.n-faq .faq-liste details { border-top: 1px solid #d0d0c3; }
.n-faq .faq-liste details:last-child { border-bottom: 1px solid #d0d0c3; }
.n-faq .faq-liste summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; }
.n-faq .faq-liste summary::-webkit-details-marker { display: none; }
.n-faq .faq-liste summary::after { content: "+"; font-size: 26px; line-height: .8; color: var(--n-orange); transition: transform .3s; }
.n-faq .faq-liste details[open] summary::after { transform: rotate(45deg); }
.n-faq .faq-liste p { padding: 0 40px 24px 0; color: var(--n-leise-d); font-size: 16px; line-height: 1.7; }

/* Schluss */
.n-schluss { padding: 110px 0; }
.schluss-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.schluss-in h2 { font-size: clamp(46px, 6.6vw, 104px); }
.schluss-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

/* Fuß */
.n-fuss { background: var(--n-schwarz); color: #d8d8cf; font-family: Satoshi, sans-serif; padding: 80px 0 30px; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.fuss-marke { font-size: 30px; font-weight: 900; letter-spacing: -.04em; color: #fff; margin-bottom: 12px; }
.fuss-marke i { color: var(--n-orange); font-style: normal; }
.fuss-raster > div > p:not(.fuss-marke) { color: var(--n-leise); font-size: 14px; line-height: 1.6; max-width: 300px; }
.n-fuss nav p { font-size: 12px; font-weight: 700; color: var(--n-leise); margin-bottom: 12px; }
.n-fuss nav a { display: block; color: #fff; text-decoration: none; font-size: 15px; padding: 5px 0; }
.n-fuss nav a:hover { color: var(--n-orange); }
.fuss-unten { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--n-rand); font-size: 12px; color: var(--n-leise); }
.kaufleiste { font-family: Satoshi, sans-serif; border-radius: 0; }
.kaufleiste .n-knopf { min-height: 44px; padding: 0 18px; }

@media (max-width: 1000px) {
  .satz-raster { grid-template-columns: 1fr 1fr; }
  .lagen { grid-template-columns: 1fr; }
  .lage, .lage + .lage { padding: 30px 0 34px; border-left: 0; border-bottom: 1px solid var(--n-rand); }
  .lage-nr { margin-bottom: 18px; }
  .kurs-kopf { flex-direction: column; align-items: flex-start; }
  .blaetter { grid-template-columns: 1fr 1fr; }
  .sandro-raster, .preis-raster, .faq-raster, .starter .starter-grid { grid-template-columns: 1fr; gap: 50px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .n-sec { padding: 84px 0; }
  .n-wrap { padding: 0 20px; }
  .n-kopf { margin-bottom: 40px; }
  .n-unter { font-size: 16px; }
  .satz-raster { grid-template-columns: 1fr; }
  .satz { min-height: 220px; }
  .satz-text { font-size: 23px; }
  .kurs-zahlen { gap: 22px; }
  .kurs-zahlen dt { font-size: 30px; }
  .kap-buehne { height: 400px; margin: 24px -20px 0; }
  .kap-karte { width: 235px; height: 326px; padding: 18px; transform: translate(-50%, -50%) translateX(calc(var(--d) * 247px)) translateY(calc(var(--ad, 0) * 12px)) translateZ(calc(var(--ad, 0) * -120px)) rotateY(calc(var(--d) * -21deg)); }
  .kap-karte img { width: 145px; height: 145px; }
  .kap-name { font-size: 24px; }
  .kap-steuer { gap: 10px; }
  .kap-text { grid-template-columns: 1fr; gap: 10px; }
  .kap-text h3 { font-size: 26px; }
  .blaetter { grid-template-columns: 1fr; }
  .blatt { min-height: 0; }
  .blatt:nth-child(n) { transform: none; }
  .sandro-bild { min-height: 360px; }
  .preis-karte { padding: 28px 22px 24px; }
  .preis-wert { font-size: 36px; }
  #kap-dialog { padding: 54px 22px 28px; }
  .fuss-raster { grid-template-columns: 1fr; }
  .n-faq .faq-liste summary { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .satz-vorne, .satz-hinten, .kap-karte, .blatt, .starter-buch { transition: none; }
  .kap-karte { transform: translate(-50%, -50%) translateX(calc(var(--d) * 300px)); opacity: 1; }
  .kap-karte:not([aria-current=true]) { visibility: hidden; }
}
/* alte FAQ-Kästen aus v6 neutralisieren */
.n-faq .faq-liste details { background: none; border-radius: 0; margin: 0; }
.n-faq .faq-liste summary { position: static; padding: 22px 0; }
.n-faq .faq-liste summary::after { position: static; transform: none; width: auto; height: auto; border-radius: 0; background: none; display: block; flex: none; }
.n-faq .faq-liste details[open] summary::after { transform: rotate(45deg); }
.n-faq .faq-liste details p { padding: 0 40px 24px 0; }
@media (max-width: 640px) { .starter-buch { max-width: 220px; } .n-faq .faq-liste details p { padding-right: 0; } }

/* Werkzeugkasten: Reiter über den Kurs-Werkzeugen */
.werkzeuge { border-top: 1px solid #0001; }
.wz-reiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 56px; border-bottom: 2px solid var(--n-tinte); }
.wz-reiter button { display: flex; align-items: baseline; gap: 14px; min-height: 64px; padding: 18px 22px; background: transparent; border: 0; border-right: 1px solid #0001; color: var(--n-leise-d); font: 700 17px/1.25 Satoshi, sans-serif; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.wz-reiter button:last-child { border-right: 0; }
.wz-reiter button span { font-size: 12px; font-weight: 900; color: var(--n-leise-d); }
.wz-reiter button:hover { color: var(--n-tinte); background: #0000000a; }
.wz-reiter button[aria-selected=true] { background: var(--n-tinte); color: #fff; }
.wz-reiter button[aria-selected=true] span { color: var(--n-orange); }
.wz-reiter button:focus-visible { outline: 2px solid var(--n-orange); outline-offset: -2px; }
.wz-panel { padding-top: 44px; }
.wz-panel:focus { outline: 0; }
.wz-panel:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 8px; }
@media (max-width: 700px) {
  .wz-reiter { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(72%, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .wz-reiter::-webkit-scrollbar { display: none; }
  .wz-reiter button { scroll-snap-align: start; min-height: 56px; padding: 14px 16px; font-size: 15px; }
  .wz-panel { padding-top: 32px; }
}
.wow { background: var(--n-schwarz); }
.check-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #0001; }
.check-teilen .n-knopf { min-height: 48px; }
.check-teilen p { font-size: 13px; color: var(--n-leise-d); max-width: 260px; line-height: 1.45; }
#kd-folie { margin: 26px 0 6px; }
#kd-folie img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #151515; }
#kd-folie figcaption { font-size: 12px; color: var(--n-leise-d); margin-top: 8px; }
.check-karte, .check-karte button, .check-karte table { font-family: Satoshi, sans-serif; }

/* Persönlicher Fahrplan am Preisbereich */
.fahrplan { margin-top: 34px; padding: 26px 26px 20px; background: #161614; border: 1px solid var(--n-rand); border-left: 3px solid var(--n-orange); max-width: 520px; }
.fp-kopf { font-size: 13px; font-weight: 900; color: var(--n-orange); margin-bottom: 14px; }
.fahrplan ol { list-style: none; margin: 0; padding: 0; }
.fahrplan li + li { border-top: 1px solid var(--n-rand); }
.fahrplan li button { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline; width: 100%; min-height: 52px; padding: 12px 0; background: none; border: 0; color: #f4f4ee; font: 700 16px/1.3 Satoshi, sans-serif; text-align: left; cursor: pointer; }
.fahrplan li button:hover .fp-name { color: var(--n-orange); }
.fahrplan li button:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 2px; }
.fp-nr { font-size: 12px; font-weight: 900; color: var(--n-leise); }
.fp-name small { display: block; font-size: 12px; font-weight: 500; color: var(--n-leise); margin-top: 3px; }
.fp-dauer { font-size: 13px; color: var(--n-leise); white-space: nowrap; }
.fp-fuss { font-size: 14px; line-height: 1.5; color: #d9d8cf; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--n-rand); }
.fp-neu { margin-top: 10px; min-height: 40px; background: none; border: 0; padding: 0; color: var(--n-leise); font: 500 13px Satoshi, sans-serif; text-decoration: underline; cursor: pointer; }
.kap-karte.fuer-dich::after { content: "Für dich"; position: absolute; top: -12px; left: 16px; padding: 4px 10px; background: var(--n-tinte); color: var(--n-orange); border: 1px solid var(--n-orange); font: 900 11px/1.2 Satoshi, sans-serif; }
.reichweite { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--n-rand); }
.reichweite div { padding: 28px 24px 0 0; }
.reichweite div + div { padding-left: 24px; border-left: 1px solid var(--n-rand); }
.reichweite dt { font-size: clamp(36px, 4.4vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.reichweite dd { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--n-leise); max-width: 220px; }
.reichweite a { color: inherit; text-underline-offset: 3px; }
.reichweite-stand { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--n-leise); max-width: 680px; }
@media (max-width: 700px) {
  .reichweite { grid-template-columns: 1fr; margin-top: 44px; }
  .reichweite div, .reichweite div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--n-rand); display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; }
  .reichweite dd { margin-top: 0; }
  .reichweite dt { font-size: 32px; }
}
.wz-teilen { margin-top: 56px; padding-top: 22px; border-top: 1px solid #0002; font-size: 14px; line-height: 1.8; color: var(--n-leise-d); } .wz-teilen a { color: var(--n-tinte); font-weight: 700; text-underline-offset: 3px; }

/* Nachbesserungen nach CRO-Durchgang */
.preis-karte .reservieren label:not(.consent) { color: var(--n-tinte); font-size: 14px; }
.preis-karte .reservieren input:not([type=checkbox]) { color: var(--n-tinte); border-radius: 0; }
.preis-karte .reservieren .err { color: #b3261e; font-size: 14px; min-height: 0; }
.vsl:has(.vsl-platzhalter) .vsl-kapitel span { display: none; }
.vsl:has(.vsl-platzhalter) .vsl-kapitel::before { content: "Darum geht es im Video"; display: block; font-size: 12px; font-weight: 700; color: var(--n-leise); padding: 0 0 10px; }
.vsl-platzhalter p b { display: block; font-size: 16px; margin-bottom: 4px; }
.preis-angst { font-size: 13px; line-height: 1.5; color: var(--n-leise-d); margin-top: 10px; text-align: center; }
#kap-dialog { margin: auto; }
@media (max-width: 640px) { #kap-dialog { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; padding: 64px 22px 32px; } }
@media (min-width: 901px) and (min-height: 761px) and (max-height: 1000px) { .wow .stage[data-scene="0"] .main-paper { top: calc(68% + var(--front-y) * 1vh); height: clamp(330px, 44vh, 440px); } .wow .stage[data-scene="0"] .ghost { top: 68%; } }
.kap-alle { margin-top: 28px; }
.nav nav a, .nav .nav-btn, .nav .logo { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) { .nav nav { gap: 20px; } .nav nav a { font-size: 14px; } .nav .nav-btn { padding-inline: 18px; } }
.wow .scroll-cue { min-height: 44px; min-width: 44px; padding: 0 6px; }
.wow .paper-label { color: #5c5c56; font-size: 10px; }

/* ====================================================================================================
   Design von Ali (04.11.2026): Hero, Chef-Sätze, VSL-Kopf, Drei Lagen, Unterlagen, Sandro.
   Fast schwarz, Gold-Verlauf, Inter fett und eng, Glas-Karten. Der Glow ist gewollt.
   ==================================================================================================== */
:root { --gold: #ffb000; --gold-hell: #ffd000; --gold-tief: #e69d00; }
.dh, .dk { font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
.dk { background: var(--n-schwarz); color: #fff; padding: clamp(80px, 9vw, 140px) 0; border-top: 0; overflow: clip; }
.dk .n-wrap, .dh .wrap { max-width: 1500px; padding: 0 4.5vw; }

/* Überschriften: dünner gestrichelter Strich links, zweite Zeile gold und leichter */
.dk-kopf { max-width: none; position: relative; padding-left: clamp(20px, 2.2vw, 36px); margin-bottom: clamp(44px, 5vw, 84px); }
.dk-kopf::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 2px; background: repeating-linear-gradient(to bottom, var(--gold) 0 7px, transparent 7px 13px); opacity: .85; }
.n-sec h2.dk-h2 { font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: clamp(42px, 6.6vw, 112px); line-height: 1.02; letter-spacing: -.05em; color: #fff;
  background: linear-gradient(180deg, #fff 30%, #d4d4d0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 26px rgba(255, 255, 255, .13)); }
.n-sec h2.dk-h2 .z2 { display: inline-block; font-weight: 500; font-size: .88em; letter-spacing: -.045em; line-height: 1.06;
  background: linear-gradient(95deg, var(--gold-hell), var(--gold) 55%, #cf9600); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Hero ---------- */
.hero.dh { background: var(--n-schwarz); padding: 0; overflow: clip; }
.dh-top { position: relative; padding: clamp(112px, 12vw, 150px) 0 clamp(34px, 4vw, 56px); min-height: min(840px, calc(100svh - 120px)); display: flex; align-items: center; }
.dh-bild { position: absolute; right: 0; top: 52px; bottom: 0; width: auto; aspect-ratio: 960 / 1080; max-width: 62%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
.dh-bild img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.dh-in { position: relative; z-index: 2; width: 100%; padding: 0; text-align: left; display: block; }
.dh-text { position: relative; max-width: 62%; }
.dh-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .72); margin-bottom: 22px; }
.dh-kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.hero.dh h1.dh-h1 { position: relative; font: 800 clamp(38px, 6.1vw, 116px)/1.04 Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.045em; max-width: none; margin: 0;
  color: var(--gold); text-shadow: 0 0 28px rgba(255, 176, 0, .2); }
.dh-h1 span { display: block; white-space: nowrap; }
.dh-text { container-type: inline-size; }
/* Große Bildschirme: Schriftgröße folgt der Spaltenbreite, damit die vier Zeilen stehen bleiben, statt Wort für Wort umzubrechen */
@media (min-width: 901px) { .hero.dh h1.dh-h1 { font-size: clamp(38px, 11.4cqw, 118px); } }
.dh-h1::before { content: ""; position: absolute; left: calc(-1 * clamp(16px, 1.7vw, 28px)); top: .1em; bottom: .12em; width: 2px; background: linear-gradient(180deg, var(--gold), rgba(255, 176, 0, .25)); }
.dh-sieht { position: relative; display: block; width: fit-content; }
.dh-kritzel { position: absolute; left: calc(100% + .14em); top: .42em; width: 4.75em; height: auto; overflow: visible; }
.dh-kritzel path { fill: none; stroke: var(--gold); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.dh-rolle { margin-top: clamp(14px, 1.6vw, 26px); font-size: clamp(17px, 2.15vw, 36px); line-height: 1.3; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.dh-rolle + .dh-rolle { margin-top: clamp(4px, .5vw, 10px); }
.dh-in .ctas { justify-content: flex-start; margin-top: clamp(24px, 2.6vw, 40px); }
.dh-leiste { position: relative; z-index: 2; padding-bottom: clamp(24px, 3vw, 44px); }
.hero.dh .stats { margin-top: 0; gap: 14px; }
.hero.dh .stat { background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 55%); border: 1px solid rgba(255, 255, 255, .13); border-radius: 22px; padding: 20px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero.dh .stat b { font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: var(--gold); margin-bottom: 8px; }
.hero.dh .stat span { color: rgba(255, 255, 255, .68); }

/* ---------- Chef-Sätze ---------- */
.n-saetze { position: relative; }
.n-saetze::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(900px, 90vw); height: 560px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255, 176, 0, .17), transparent 68%); pointer-events: none; }
.n-saetze > .n-wrap { position: relative; }
.satz-raster { gap: clamp(18px, 2.2vw, 34px); }
.satz { min-height: clamp(400px, 33vw, 480px); perspective: 1400px; }
.satz-vorne, .satz-hinten { padding: clamp(24px, 2.4vw, 36px); border-radius: clamp(30px, 3vw, 44px); }
.satz-vorne { background: linear-gradient(158deg, #202020 0%, #121212 38%, #141414 70%, #222 100%); border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 0 40px rgba(255, 255, 255, .035), inset 1px 0 0 rgba(255, 255, 255, .06), 0 34px 60px rgba(0, 0, 0, .6); }
.satz-hinten { background: linear-gradient(140deg, #ffd000 0%, #ffbb00 48%, #ffc61a 100%); color: #0b0b0a;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), 0 0 100px rgba(255, 176, 0, .26), 0 30px 60px rgba(0, 0, 0, .5); }
.satz:hover .satz-vorne { border-color: rgba(255, 176, 0, .55); }
.satz-kopf { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: clamp(16px, 1.7vw, 24px); }
.satz-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 80%, transparent); }
.satz-hinten .satz-kopf::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 20%, rgba(0, 0, 0, .35) 80%, transparent); }
.satz-label { margin: 0; max-width: 6.2em; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.12; font-weight: 300; letter-spacing: -.01em; color: #dcdcd8; }
.satz-hinten .satz-label { color: #0b0b0a; font-weight: 400; max-width: none; align-self: center; }
.satz-avatar { flex: none; width: clamp(54px, 5vw, 76px); height: clamp(54px, 5vw, 76px); border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.satz-text { flex: 1; display: flex; align-items: center; font-style: italic; font-weight: 800; font-size: clamp(26px, 2.35vw, 36px); line-height: 1.13; letter-spacing: -.035em; color: #fff; padding: 12px 0; text-wrap: balance; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.satz-hinten .satz-text { font-size: clamp(19px, 1.75vw, 26px); line-height: 1.18; color: #0b0b0a; letter-spacing: -.03em; font-weight: 800; }
.satz-tipp, .satz-modul { margin-top: 0; padding-top: 0; border: 0; justify-content: flex-start; font-size: clamp(16px, 1.55vw, 22px); font-weight: 300; letter-spacing: 0; }
.satz-tipp { color: #d4d4d0; }
.satz-modul { color: #0b0b0a; font-weight: 400; }
.satz:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 44px; }
.reichweite { margin-top: clamp(48px, 5vw, 80px); border-top-color: rgba(255, 255, 255, .14); }
.reichweite dt { color: var(--gold); }
.reichweite a { color: var(--gold); }

/* ---------- VSL-Kopf ---------- */
.dk.vsl { padding-top: 0; }
.vsl-kopf { display: grid; grid-template-columns: minmax(0, 34vw) minmax(0, 1fr); align-items: center; min-height: 0; margin-bottom: clamp(40px, 5vw, 80px); }
.vsl-foto { align-self: end; }
.vsl-foto img { width: 100%; height: auto; display: block; }
.vsl-titel { position: relative; padding: 0 4.5vw 0 clamp(20px, 3.2vw, 56px); }
.vsl-kopf { position: relative; }
.vsl-kopf::after { content: ""; position: absolute; right: 11.5%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .6) 22%, rgba(255, 255, 255, .6) 78%, transparent); }
.vsl-vor { font-size: clamp(16px, 1.75vw, 26px); font-weight: 300; letter-spacing: -.01em; color: #cfcfcb; margin-bottom: clamp(10px, 1.2vw, 18px); }
.n-sec .vsl-titel h2 { font-weight: 800; font-size: clamp(40px, 5.6vw, 96px); line-height: 1.04; letter-spacing: -.045em; max-width: 7.2em;
  background: linear-gradient(180deg, #fff 40%, #cfcfcb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 24px rgba(255, 255, 255, .12)); }
.dk .vsl-player { border-radius: 26px; box-shadow: 0 0 80px rgba(255, 176, 0, .1), 0 40px 80px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12); }
.dk .vsl-kapitel { border-radius: 26px; background: linear-gradient(158deg, #1d1d1d, #131313); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* ---------- Drei Lagen ---------- */
.n-fuerwen { border-top: 0; }
.lagen { gap: clamp(18px, 2.2vw, 34px); border-top: 0; align-items: stretch; }
.lage, .lage + .lage { position: relative; overflow: hidden; padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px) clamp(22px, 2.2vw, 32px); border: 1px solid rgba(255, 255, 255, .1); border-radius: clamp(30px, 3vw, 46px);
  background: linear-gradient(160deg, #222 0%, #171717 40%, #181818 100%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .26), inset 0 0 50px rgba(255, 255, 255, .03), 0 34px 60px rgba(0, 0, 0, .55); }
.lage-kopf { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: clamp(28px, 3.4vw, 52px); }
.lage-icon { width: clamp(46px, 4.4vw, 66px); height: auto; color: var(--gold); }
.n-sec .lage .lage-nr { margin: 0; font-size: clamp(28px, 2.8vw, 42px); font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1; }
.n-sec .lage h3 { font-size: clamp(22px, 2.2vw, 33px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: clamp(18px, 2vw, 30px); color: #fff; }
.lage p.lage-text { position: relative; z-index: 1; color: #d7d7d3; font-weight: 300; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.62; margin-bottom: clamp(24px, 2.6vw, 40px); }
.lage-gross { position: absolute; right: -2%; bottom: 17%; font-size: clamp(150px, 15vw, 250px); line-height: .8; font-weight: 900; letter-spacing: -.06em; color: rgba(255, 255, 255, .045); pointer-events: none; user-select: none; }
.lage-fuss { position: relative; z-index: 1; margin-top: auto; width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lage-mod { font-weight: 700; font-size: clamp(15px, 1.4vw, 20px); color: #fff; margin-right: 4px; }
.pille { min-height: 38px; padding: 0 clamp(11px, 1.1vw, 16px); border: 1px solid rgba(255, 176, 0, .75); border-radius: 99px; background: rgba(255, 176, 0, .06); color: var(--gold); font: 800 clamp(14px, 1.3vw, 18px)/1 Inter, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.pille:hover { background: var(--gold); color: #0b0b0a; }
.lage-pfeil { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--gold); cursor: pointer; transition: transform .2s; }
.lage-pfeil svg { width: 22px; height: 22px; }
.lage-pfeil:hover { transform: translate(3px, -3px); }
.pille:focus-visible, .lage-pfeil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Keine Notizen ---------- */
.n-ergebnis { border-top: 0; }
.blaetter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 34px); list-style: none; align-items: start; }
.dk .blatt, .dk .blatt:nth-child(n), .dk .blatt:hover { background: none; box-shadow: none; padding: 0; min-height: 0; transform: none; display: flex; flex-direction: column; align-items: flex-start; }
.blatt-bild { width: auto; max-width: 100%; height: 18.2vw; max-height: 300px; aspect-ratio: auto; margin-bottom: clamp(14px, 2vw, 30px); }
.dk .blatt-kopf { display: inline-block; font-size: clamp(22px, 2.5vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #fff; padding: 2px clamp(10px, 1vw, 16px) 4px; margin: 0 0 clamp(14px, 1.6vw, 24px) -4px;
  background: linear-gradient(180deg, #1d1d1c, #141413); border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.dk .blatt h3 { font-size: clamp(19px, 1.95vw, 31px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; color: #fff; margin-bottom: clamp(10px, 1.2vw, 18px); }
.dk .blatt p { color: var(--gold); font-weight: 300; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; }

/* ---------- Sandro ---------- */
.dk.n-sandro { position: relative; padding: 0; }
.dk.n-sandro::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(300deg, rgba(255, 176, 0, .26) 0 1.5px, transparent 1.5px 13px);
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 52% 50%, transparent 38%, #000 100%); mask-image: radial-gradient(ellipse 62% 70% at 52% 50%, transparent 38%, #000 100%); pointer-events: none; }
.sandro-raster { position: relative; display: grid; grid-template-columns: minmax(0, 44vw) minmax(0, 1fr); gap: 0; align-items: center; max-width: none; padding: 0; }
.sandro-bild { position: relative; aspect-ratio: auto; min-height: 0; background: none; overflow: visible; align-self: end; }
.sandro-bild img { position: static; width: 100%; height: auto; object-fit: initial; filter: none; display: block; }
.sandro-bild:hover img { filter: none; }
.sandro-text { padding: clamp(40px, 5vw, 80px) 5vw clamp(40px, 5vw, 80px) clamp(8px, 1.6vw, 30px); }
.sandro-kopf { position: relative; padding-left: clamp(26px, 3vw, 46px); margin-bottom: clamp(30px, 4vw, 66px); }
.sandro-kopf::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .55)); }
.sandro-kopf::after { content: ""; position: absolute; left: -2px; top: 0; width: 6px; height: 6px; background: #fff; }
.sandro-text p.sandro-vor { max-width: none; margin-top: 0; color: #e8e8e4; font-weight: 300; font-size: clamp(26px, 3.4vw, 56px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; color: #e8e8e4; margin-bottom: clamp(14px, 1.8vw, 28px); }
.n-sec .sandro-text h2 { font-size: clamp(24px, 2.8vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; max-width: 14em; color: #fff; }
.sandro-text blockquote { margin: 0; padding: 0; border: 0; max-width: 20em; font-size: clamp(24px, 3.2vw, 54px); font-weight: 800; line-height: 1.14; letter-spacing: -.04em; color: #fff; }
.sandro-text blockquote mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 176, 0, .85); text-decoration-thickness: .07em; text-underline-offset: .14em; text-shadow: 0 0 26px rgba(255, 176, 0, .35); }

/* ---------- schmal ---------- */
@media (max-width: 1100px) {
  .blatt-bild { width: 100%; height: auto; max-height: none; }
  .blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .dh-text { max-width: 66%; }
}
@media (max-width: 900px) {
  .dh-top { display: block; padding: 58px 0 8px; min-height: 0; }
  .dh-bild { position: relative; display: block; width: 100%; max-width: none; aspect-ratio: auto; height: min(104vw, 520px); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .dh-bild img { object-position: 90% 20%; }
  .dh-in { margin-top: -10vw; }
  .dh-text { max-width: none; }
  .dh-in.wrap { padding: 0 6vw 0 calc(6vw + 14px); }
  .hero.dh h1.dh-h1 { font-size: clamp(28px, 9.1vw, 64px); text-shadow: none; }
  .dh-rolle { font-size: clamp(17px, 4.6vw, 28px); }
  .dh-leiste.wrap { padding: 0 6vw 30px; }
  .vsl-kopf { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .vsl-titel { padding: 0 6vw 0 4vw; }
  .vsl-kopf::after { display: none; }
  .lagen { grid-template-columns: 1fr; }
  .lage, .lage + .lage { padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .1); border-left: 1px solid rgba(255, 255, 255, .1); }
  .sandro-raster { grid-template-columns: minmax(0, 1fr); }
  .sandro-bild { max-width: 560px; }
  .sandro-text { padding: 10px 6vw 56px; margin-top: -8vw; position: relative; }
}
@media (max-width: 640px) {
  .dk .n-wrap { padding: 0 6vw; }
  .dk-kopf { padding-left: 18px; }
  .n-sec h2.dk-h2 { font-size: clamp(36px, 11.4vw, 60px); }
  .satz-raster { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(50% - 50vw); padding: 4px calc(50vw - 50%) 14px; scroll-padding-inline: calc(50vw - 50%); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .satz-raster::-webkit-scrollbar { display: none; }
  .satz { flex: 0 0 84%; min-height: 350px; scroll-snap-align: start; }
  .satz-text { font-size: clamp(24px, 7.4vw, 32px); }
  .satz-hinten .satz-text { font-size: clamp(19px, 5.6vw, 24px); }
  .vsl-kopf { grid-template-columns: minmax(0, 1fr); }
  .vsl-foto { max-width: 330px; margin-left: -2vw; margin-bottom: -22vw; position: relative; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .vsl-titel { position: relative; z-index: 1; padding: 0 6vw; }
  .vsl-kopf { margin-bottom: 36px; }
  .n-sec .vsl-titel h2 { font-size: clamp(38px, 11.6vw, 60px); }
  .blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .dk .blatt-kopf { font-size: clamp(20px, 6vw, 28px); }
  .hero.dh .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero.dh .stat { padding: 14px; border-radius: 18px; }
  .hero.dh .stat b { font-size: 16px; }
  .sandro-text p.sandro-vor { max-width: none; margin-top: 0; color: #e8e8e4; font-weight: 300; font-size: clamp(24px, 7.4vw, 38px); }
  .sandro-text blockquote { font-size: clamp(25px, 7.6vw, 40px); }
}
@media (prefers-reduced-motion: reduce) { .pille, .lage-pfeil { transition: none; } }

.dk .vsl:has(.vsl-platzhalter) .vsl-kapitel::before, .dk.vsl:has(.vsl-platzhalter) .vsl-kapitel::before { padding: 6px 20px 10px; }

/* Preis: Gründerpreis mit Zeile darunter */
.preis-wert .preis-sub { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.45; margin-top: 10px; color: var(--n-leise-d); }
.preis-klein a, .preis-garantie a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Video ohne Kapitelliste: Player allein, mittig */
.vsl-grid.vsl-solo { grid-template-columns: minmax(0, 1fr); max-width: 1080px; margin-left: auto; margin-right: auto; }
/* Kapitel als Sprungmarken (nur mit echten Zeiten) */
.vsl-kapitel button { all: unset; box-sizing: border-box; display: flex; gap: 14px; width: 100%; padding: 11px 20px; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.vsl-kapitel li:has(button) { padding: 0; }
.vsl-kapitel button:hover { background: rgba(255, 255, 255, .06); }
.vsl-kapitel button:focus-visible { outline: 2px solid var(--n-orange); outline-offset: -2px; }
.vsl-kapitel[hidden] { display: none; }
.vsl-player video { display: block; }

/* ---------- Handy: Scroll-Ruckeln auf iOS vermeiden (08.11.2026) ----------
   Unschärfe-Filter (backdrop-filter) und große weiche Schatten auf vielen oder festen Flächen kosten auf dem iPhone beim Scrollen Bilder.
   Optik bleibt gleich: gleiche Flächen, nur ohne Weichzeichner und mit kleineren Schatten. */
@media (max-width: 900px) {
  .nav.solid { background: rgba(0, 0, 0, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { transition: background .3s; }
  .hero.dh .stat { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
  .dk .vsl-player, .vsl .vsl-player { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
  .satz-vorne { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), 0 12px 24px rgba(0, 0, 0, .4); }
  .satz-hinten { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), 0 12px 24px rgba(0, 0, 0, .4); }
  .lage, .lage + .lage { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .26); }
  .preis-karte { box-shadow: 0 14px 30px #0007; }
}
/* Verschachtelter Rahmen: der äußere Player-Kasten trägt Rand und Schatten schon, der innere doppelt ihn nur */
.vsl-player .vsl-player { box-shadow: none; border: 0; border-radius: 0; }
.sandro-ich { padding-left: clamp(26px, 3vw, 46px); margin-bottom: clamp(30px, 3.4vw, 54px); }
.sandro-text .sandro-ich p { color: #d6d6d0; margin-top: 0; margin-bottom: 14px; max-width: 34em; }
.sandro-text .sandro-ich p:last-child { margin-bottom: 0; }