/* Neue Bereiche der Startseite (Entwurf 4.11.2026, live erst nach Iljas Ja). Runde 2 nach Iljas Feedback:
   mehr Bildsprache, edle Icons, große Zahlen, klare Führung fürs Auge, gut lesbar auch für Geschäftsführer ab 50.
   Farbfolge: Häuser hell · Warum Luxus dunkel (Leder) · Showroom hell · Wachstum dunkel (Karte) · Beratung hell ·
   Ablauf dunkel (Uhr) · Investition hell · Vorteil dunkelgrün (Bilder) · Wer dahinter steht hell · Auswahl dunkel.
   Laptop-Fenster über --dichte (kopf.js). Icons: Lucide (ISC), als Symbole oben in der Startseite. */

:is(.werte,.befund,.ablauf,.investition,.vorteil,.person){position:relative;isolation:isolate;display:flex;align-items:center;min-height:100svh;padding:max(96px,calc(110px * var(--dichte,1))) var(--gutter) calc(46px * var(--dichte,1));outline:none;overflow:clip}
:is(.werte-inner,.befund-inner,.ablauf-inner,.investition-inner,.vorteil-inner,.person-inner){position:relative;width:100%;max-width:1440px;margin:0 auto}
:is(.werte,.ablauf,.vorteil){color:var(--cream);border-top:1px solid var(--gold)}
.werte,.ablauf{background:var(--deep)}
.vorteil{background:var(--green)}
:is(.befund,.investition,.person){color:var(--green)}
:is(.befund,.investition,.person)::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#72613e55}
.befund{background:var(--cream)}
.investition{background:var(--sand)}
.person{background:#e5dac7}

/* Die Häuser bleiben als Blatt bis zum Seitenende stehen (value-story.css): jede spätere Sektion braucht Ebene 3.
   Warum Luxus schiebt sich als erste über die Häuser, darum mit demselben Schatten wie die Blätter. */
@media(min-width:701px){
 :is(.werte,.befund,.ablauf,.investition,.vorteil,.person){z-index:3}
 .werte{box-shadow:0 -34px 70px -38px #000c}
}

/* Wachstum nutzt die Sektion .visibility (anfrage.css): vier Punkte mit Icons statt Rauten */
@media(min-width:701px){.visibility-copy{padding-bottom:calc(30px * var(--dichte,1))}.visibility-quill-anchor{bottom:calc(30px * var(--dichte,1) + 8px)}.visibility-list li{padding:calc(9px * var(--dichte,1) * var(--dichte,1)) 0 calc(9px * var(--dichte,1) * var(--dichte,1)) 24px}}
.visibility-list li.mit-ikon{padding-left:38px}
.visibility-list li.mit-ikon:before{display:none}
.visibility-list .ikon{position:absolute;left:0;top:9px;width:22px;height:22px}

/* Gemeinsame Bausteine, etwas größer gesetzt als im Bestand (Lesbarkeit) */
.ikon{display:block;flex:none;width:30px;height:30px;color:var(--gold)}
:is(.befund,.investition,.person) .ikon{color:var(--dark-gold)}
.bereich-kicker{display:flex;align-items:center;gap:16px;margin:0 0 calc(20px * var(--dichte,1));font:500 12.5px/1.5 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bereich-kicker:before{content:'';flex:none;width:44px;height:1px;background:currentColor}
:is(.befund,.investition,.person) .bereich-kicker{color:var(--dark-gold)}
:is(.werte,.befund,.ablauf,.investition,.vorteil,.person) h2{font:350 calc(clamp(42px,4.2vw,64px) * var(--dichte,1))/1.05 'Luxus Serif',Georgia,serif;letter-spacing:-.045em;margin:0;text-wrap:balance}
:is(.werte,.ablauf,.vorteil) h2 span{color:var(--gold)}
:is(.befund,.investition,.person) h2 span{color:var(--dark-gold)}
.bereich-text{font:400 16px/1.7 Archivo,sans-serif;margin:calc(20px * var(--dichte,1)) 0 0;max-width:38em;text-wrap:pretty}
:is(.werte,.ablauf,.vorteil) .bereich-text{color:#ddd2bd}
:is(.befund,.investition,.person) .bereich-text{color:#4f4a40}
.bereich-schluss{font:italic 400 clamp(19px,1.6vw,23px)/1.45 'Luxus Serif',Georgia,serif;color:var(--gold);margin:calc(24px * var(--dichte,1)) 0 0}
.bereich-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--gold);font:500 12.5px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none}
.bereich-link .pfeil{transition:transform .3s}
.bereich-link:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
@media(hover:hover) and (pointer:fine){.bereich-link:hover .pfeil{transform:translate(3px,-3px)}}
/* Große Zahl mit Einheit: Blickfang, der ohne Lesen verstanden wird */
.grosse-zahlen{list-style:none;display:flex;gap:clamp(20px,2.6vw,44px);margin:calc(24px * var(--dichte,1)) 0 calc(26px * var(--dichte,1));padding:0}
.grosse-zahlen li{display:flex;flex-direction:column}
.grosse-zahlen b{font:330 calc(clamp(44px,3.8vw,60px) * var(--dichte,1))/1 'Luxus Serif',Georgia,serif;letter-spacing:-.03em;color:var(--dark-gold)}
.grosse-zahlen span{margin-top:8px;max-width:10em;font:500 12.5px/1.4 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5d594e}

/* Kopf zweispaltig in breiten Fenstern: Überschrift links, Text rechts unten bündig.
   Der Text hält rechts 120px Abstand zur wartenden Feder (Anker der Häuser, rechts 100px), die Reiter der Mappe 105px:
   auf ihrer Höhe ist die Feder schmaler. */
@media(min-width:1101px){
 :is(.werte-kopf,.ablauf-kopf,.investition-kopf,.vorteil-kopf){display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);align-items:end;max-width:none}
 .investition-kopf{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
 :is(.werte-kopf,.ablauf-kopf,.investition-kopf,.vorteil-kopf) .bereich-kicker{grid-column:1/-1}
 :is(.werte-kopf,.ablauf-kopf,.investition-kopf,.vorteil-kopf) .bereich-text{margin:0;max-width:min(34em,calc(100% - 120px));padding-bottom:.3em;font-size:16px;line-height:1.6}
 .befund-reiter{padding-right:105px}
 .person-text .bereich-text{max-width:calc(100% - 110px)}
}

/* Lesbarkeit (Ilja 4.11. abends, Leser ab 50): Untergrenzen auch für die live gestalteten Bereiche Sichtbarkeit und Fragen */
.visibility .visibility-eyebrow{font-size:12.5px}
.visibility .visibility-lead{font-size:16px}
.visibility .visibility-list li{font-size:15px}
@media(min-width:1101px) and (max-width:1500px){.visibility{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}.visibility-copy{max-width:none}.visibility-list{max-width:690px}.visibility-image img{object-position:74% 42%}}
@media(min-width:1101px) and (max-width:1500px) and (max-height:700px){.visibility{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.faq .faq-kicker{font-size:12.5px}
@media(max-width:700px){.visibility .visibility-lead{font-size:15px}.faq .faq-item p{font-size:15px}}

/* A · Warum Luxus: grünes Leder mit Goldnaht als Grund, sechs Werte als Kacheln mit Icon */
.werte-grund{position:absolute;inset:0;z-index:-1}
.werte-grund img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.6}
.werte-grund:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0f1813f5 0%,#0f1813d9 46%,#0f181380 100%)}
.werte-liste{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(14px * var(--dichte,1)) clamp(14px,1.6vw,24px);margin:calc(32px * var(--dichte,1)) 0 0;padding:0}
.werte-liste li{display:grid;grid-template-columns:46px 1fr;align-items:start;padding:calc(18px * var(--dichte,1)) clamp(16px,1.6vw,24px);background:#0f1813b3;border:1px solid #b6a27a38;border-radius:2px}
.werte-liste .ikon{width:30px;height:30px;margin-top:1px}
.werte-liste h3{font:400 22px/1.2 'Luxus Serif',Georgia,serif;letter-spacing:-.01em;margin:0}
.werte-liste p{font:400 15px/1.55 Archivo,sans-serif;color:#cfc4ad;margin:6px 0 0;text-wrap:pretty}

/* C · Beratungsgespräch: links das Versprechen, rechts eine echte Analyse zum Durchblättern */
.befund-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,4.5vw,84px);align-items:center}
.befund-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.befund-reiter button{appearance:none;padding:11px 15px;border:1px solid #72613e66;border-radius:999px;background:#f8f4ec;color:var(--green);font:500 15px/1 Archivo,sans-serif;letter-spacing:.01em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.befund-reiter button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#f3e8cf}
.befund-reiter button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.befund-reiter button:hover{border-color:var(--dark-gold)}}
.befund-folie{margin:0}
.befund-gross-knopf{position:relative;display:block;width:100%;padding:0;border:1px solid #72613e55;background:#fff;cursor:zoom-in;box-shadow:0 34px 70px -44px #1e2e25}
.befund-gross-knopf img{display:block;width:100%;height:auto;aspect-ratio:16/9;transition:opacity .25s}
.befund-gross-knopf:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.befund-lupe{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0f1813e0}
.befund-lupe .ikon{width:20px;height:20px;color:#e3cf9b}
.befund-folie figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:12px;font:400 16px/1.5 Archivo,sans-serif;color:#4f4a40}
.befund-folie-text{font-weight:500;color:var(--green)}
.befund-hinweis{font-size:14px;color:#7a7365}
.befund-gross{width:min(94vw,1600px);max-width:none;max-height:none;padding:0;border:0;background:transparent}
.befund-gross::backdrop{background:#0f1813eb}
.befund-gross img{display:block;width:100%;height:auto;box-shadow:0 40px 90px -40px #000}
.befund-gross-zu{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:46px;height:46px;border:1px solid #b6a27a99;border-radius:50%;background:#0f1813e6;color:#f3e8cf;font:300 26px/1 Archivo,sans-serif;cursor:pointer}

/* D · Ablauf: vier Schritte mit Icon und großer Zahl, darunter das erste Jahr als Leiste. Die Uhr steht für den festen Zeitplan. */
.ablauf-bild{position:absolute;top:0;right:0;z-index:-1;width:min(54%,860px);height:64%;overflow:hidden}
.ablauf-bild img{width:100%;height:100%;object-fit:cover;object-position:55% 45%;opacity:.55}
.ablauf-bild:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0f1813 0%,#0f181300 50%),linear-gradient(0deg,#0f1813 0%,#0f181300 55%)}
.ablauf-schritte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin:calc(56px * var(--dichte,1)) 0 0;padding:0}
.ablauf-schritte li{position:relative;padding-top:calc(16px * var(--dichte,1));border-top:1px solid #b6a27a66}
.ablauf-ikon{display:grid;place-items:center;width:56px;height:56px;margin-top:calc(-16px * var(--dichte,1) - 28px);border:1px solid var(--gold);border-radius:50%;background:var(--deep)}
.ablauf-ikon .ikon{width:26px;height:26px}
.ablauf-zahl{display:flex;align-items:baseline;gap:10px;margin:calc(12px * var(--dichte,1)) 0 2px}
.ablauf-zahl b{font:330 calc(clamp(40px,3.3vw,54px) * var(--dichte,1))/1 'Luxus Serif',Georgia,serif;letter-spacing:-.03em;color:#e3cf9b;white-space:nowrap}
.ablauf-zahl span{font:500 12.5px/1.3 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ablauf-schritte h3{font:400 clamp(21px,1.7vw,25px)/1.2 'Luxus Serif',Georgia,serif;letter-spacing:-.01em;margin:0}
.ablauf-schritte li>p:last-child{font:400 15px/1.55 Archivo,sans-serif;color:#cfc4ad;margin:6px 0 0;text-wrap:pretty}
.jahr{margin-top:calc(26px * var(--dichte,1))}
.jahr-titel{margin:0 0 8px;font:500 12.5px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.jahr-monate{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:0;padding:0}
.jahr-monate li{padding-bottom:6px;font:500 12.5px/1 Archivo,sans-serif;text-align:center;color:#a99f8a}
.jahr-band{display:grid;grid-template-columns:3fr 9fr;height:36px;border:1px solid #b6a27a66;border-radius:2px;overflow:hidden}
.jahr-band span{display:flex;align-items:center;padding:0 14px;overflow:hidden;font:500 14.5px/1 Archivo,sans-serif;white-space:nowrap}
.jahr-bau{background:#b6a27a40;color:#f1e9dc}
.jahr-wachstum{background:linear-gradient(90deg,#24382c,#365a43);color:#f3e2b5}
.jahr-marken{list-style:none;position:relative;height:44px;margin:0;padding:0}
.jahr-marken li{position:absolute;top:0;display:flex;flex-direction:column;gap:3px;padding:8px 10px 0 0;border-right:1px solid var(--gold);text-align:right;transform:translateX(-100%)}
.jahr-marken .m3{left:25%}.jahr-marken .m6{left:50%}.jahr-marken .m9{left:75%}.jahr-marken .m12{left:100%}
.jahr-marken b{font:500 12.5px/1.2 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.jahr-marken span{font:400 15px/1.3 Archivo,sans-serif;color:#ddd2bd;white-space:nowrap}

/* E · Investition: drei Pakete für ein ganzes Jahr, die Empfehlung dunkel, große Beträge */
.stufen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);margin:calc(16px * var(--dichte,1)) 0 0;padding:0}
.stufe{position:relative;display:flex;flex-direction:column;padding:calc(18px * var(--dichte,1)) clamp(18px,1.7vw,26px) calc(8px * var(--dichte,1));background:#f7f2e9;border:1px solid #72613e3d}
.stufe-empfehlung{background:var(--deep);border-color:var(--gold);color:var(--cream);box-shadow:0 0 0 5px #b6a27a1f,0 40px 70px -46px #0f1813}
.stufe-hinweis{position:absolute;top:0;left:clamp(20px,2vw,30px);margin:0;padding:5px 12px;background:var(--gold);color:var(--deep);font:500 12px/1.4 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;transform:translateY(-50%)}
.stufe-fuer{margin:0 0 4px;font:500 12.5px/1.4 Archivo,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dark-gold)}
.stufe-empfehlung .stufe-fuer{color:var(--gold)}
.stufe h3{font:400 clamp(22px,1.8vw,27px)/1.15 'Luxus Serif',Georgia,serif;letter-spacing:-.02em;margin:0}
.stufe-preis{display:flex;align-items:flex-end;gap:12px;margin:calc(8px * var(--dichte,1)) 0 0}
.stufe-betrag{flex:none;font:330 calc(clamp(34px,2.8vw,44px) * var(--dichte,1))/1 'Luxus Serif',Georgia,serif;letter-spacing:-.03em;color:var(--green)}
.stufe-empfehlung .stufe-betrag{color:#f3e2b5}
.stufe-zeit{max-width:8em;padding-bottom:3px;font:400 13.5px/1.3 Archivo,sans-serif;color:#6b655c;text-wrap:balance}
.stufe-basis{margin:calc(9px * var(--dichte,1)) 0 0;padding-top:calc(7px * var(--dichte,1));border-top:1px solid #72613e33;font:500 14.5px/1.4 Archivo,sans-serif;color:var(--dark-gold)}
.stufe-empfehlung .stufe-basis{border-top-color:#b6a27a44;color:var(--gold)}
.stufe-basis+ul{margin-top:6px;padding-top:0;border-top:0}
.stufe-empfehlung .stufe-zeit{color:#a99f8a}
.stufe ul{list-style:none;margin:calc(9px * var(--dichte,1)) 0 0;padding:calc(9px * var(--dichte,1)) 0 0;border-top:1px solid #72613e33}
.stufe-empfehlung ul{border-top-color:#b6a27a44}
.stufe li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:0 0 calc(3px * var(--dichte,1) * var(--dichte,1));font:400 15.5px/1.32 Archivo,sans-serif;color:#3f3a32;text-wrap:pretty}
.stufe li .ikon{width:18px;height:18px;margin-top:1px}
.stufe li small{display:block;margin-top:1px;font-size:14.5px;color:#6b655c}
.stufe-empfehlung li small{color:#a99f8a}
.stufe-empfehlung li{color:#ddd2bd}
.stufe-empfehlung li .ikon{color:var(--gold)}
.investition-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px 48px;margin-top:calc(12px * var(--dichte,1))}
.investition-fuss p{margin:0;max-width:66em;font:400 15px/1.6 Archivo,sans-serif;color:#4f4a40;text-wrap:pretty}
:is(.investition-fuss,.befund-text) .apply-link{flex:none;font-size:12.5px}

/* F · Vorteil (Ilja 4.11. spät): zwei Rahmen, „Unser Fokus“ und „Ihr Fokus“, der Titel sitzt in der Rahmenlinie.
   Unser Fokus mit drei goldenen Icons, Ihr Fokus mit den Bildkarten, dazwischen ein Pfeil. Darunter der Marktpreis als große Zahl. */
.vorteil-teilung{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.55fr);margin-top:calc(36px * var(--dichte,1))}
.vorteil-rahmen{position:relative;min-width:0;padding:calc(30px * var(--dichte,1)) clamp(18px,1.8vw,28px) clamp(16px,1.6vw,24px);border:1px solid #b6a27a99}
.vorteil-gruppe{position:absolute;top:0;left:clamp(14px,1.4vw,22px);margin:0;padding:0 12px;background:var(--green);transform:translateY(-55%);font:400 clamp(26px,2.3vw,34px)/1 'Luxus Serif',Georgia,serif;letter-spacing:-.02em;color:#f3e2b5;white-space:nowrap}
.vorteil-wir-liste{list-style:none;display:grid;align-content:center;gap:calc(16px * var(--dichte,1));height:100%;margin:0;padding:0}
.vorteil-wir-liste li{display:grid;grid-template-columns:50px 1fr;column-gap:16px;align-items:center}
.vorteil-ikon{grid-row:span 2;display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}
.vorteil-ikon .ikon{width:24px;height:24px}
.vorteil-wir-liste b{font:400 clamp(23px,2vw,30px)/1.1 'Luxus Serif',Georgia,serif;color:var(--cream)}
.vorteil-wir-liste li>span:last-child{margin-top:3px;font:400 15px/1.4 Archivo,sans-serif;color:#cfc4ad}
.vorteil-pfeil{align-self:center;justify-self:center;display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--gold);border-radius:50%;background:var(--deep);color:var(--gold)}
.vorteil-pfeil .ikon{width:24px;height:24px}
.vorteil-karten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);height:100%;margin:0;padding:0}
.vorteil-karte{position:relative;display:flex;align-items:flex-end;min-height:calc(200px * var(--dichte,1));overflow:hidden;border:1px solid #b6a27a44}
.vorteil-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vorteil-karte:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0f181300 10%,#0f1813d1 56%,#0f1813f5 100%)}
.vorteil-karte-text{position:relative;z-index:1;padding:calc(20px * var(--dichte,1)) clamp(16px,1.6vw,24px)}
.vorteil-wer{margin:0;font:500 14px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.vorteil-zahl{margin:4px 0 6px;font:330 clamp(42px,3.5vw,58px)/1 'Luxus Serif',Georgia,serif;letter-spacing:-.03em;color:#f3e2b5}
.vorteil-sie h4{margin:0;font:400 clamp(20px,1.7vw,26px)/1.18 'Luxus Serif',Georgia,serif;color:var(--cream);text-wrap:balance;min-height:2.36em}
@media(hover:hover) and (pointer:fine){.vorteil-karte:hover img{transform:scale(1.04)}}
.vorteil-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:calc(20px * var(--dichte,1));background:#b6a27a44;border:1px solid #b6a27a44}
.vorteil-vergleich p{display:flex;flex-direction:column;gap:4px;margin:0;padding:calc(16px * var(--dichte,1)) clamp(18px,1.8vw,26px);background:var(--green)}
.vorteil-vergleich .vorteil-unser{background:#16231c}
.vorteil-vergleich span:first-child{font:500 12.5px/1.4 Archivo,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#a99f8a}
.vorteil-vergleich .vorteil-unser span:first-child{color:var(--gold)}
.vorteil-vergleich b{font:330 calc(clamp(30px,2.6vw,42px) * var(--dichte,1))/1.05 'Luxus Serif',Georgia,serif;letter-spacing:-.02em;color:var(--cream)}
.vorteil-vergleich .vorteil-unser b{color:#f3e2b5}
.vorteil-vergleich span:last-child{font:400 15px/1.4 Archivo,sans-serif;color:#cfc4ad}

/* G · Wer dahinter steht: der Schreibtisch aus dem Film, daneben der Gründer */
.person-inner{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center;max-width:1320px}
.person-bild{justify-self:start;width:min(100%,calc((100svh - 170px) * .8),460px);margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid #72613e55;box-shadow:0 34px 70px -48px #1e2e25}
.person-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* H · Ratgeber unter den Fragen (nur Deutsch). Am Laptop links unter dem Kompass, wo sonst Leerraum ist.
   Die Fragen sind von neun auf elf gewachsen, darum Zeilen etwas enger. */
@media(min-width:901px){
 .faq-kompass{grid-column:1;grid-row:1}
 .faq-copy{grid-column:2;grid-row:1/span 2}
 .faq-ratgeber{grid-column:1;grid-row:2;align-self:start;width:min(100%,520px);justify-self:center}
 .faq:has(.faq-ratgeber){row-gap:24px}
 .faq:has(.faq-ratgeber) .kompass-grund{max-height:clamp(200px,calc(100svh - 460px),600px)}
 .faq-item summary{padding-block:clamp(6px,1vh,16px)}
}
@media(min-width:901px) and (max-height:700px){.faq-item summary{font-size:clamp(17px,1.3vw,21px)}}
.faq-ratgeber{margin-top:calc(26px * var(--dichte,1));padding-top:calc(22px * var(--dichte,1));border-top:1px solid #b6a27a44}
.faq-ratgeber h3{font:350 clamp(26px,2.1vw,32px)/1.15 'Luxus Serif',Georgia,serif;letter-spacing:-.03em;margin:0}
.faq-ratgeber ul{list-style:none;margin:10px 0 0;padding:0}
.faq-ratgeber li a{display:inline-flex;align-items:baseline;gap:12px;padding:5px 0;font:400 clamp(17px,1.25vw,20px)/1.35 'Luxus Serif',Georgia,serif;color:var(--cream);text-decoration:none;transition:color .25s}
.faq-ratgeber li a .pfeil{flex:none;color:var(--gold);transition:transform .3s}
.faq-ratgeber li a:focus-visible{outline:1px solid #b6a27a8c;outline-offset:4px}
.faq-ratgeber>p:not(.faq-kicker){font:400 15px/1.65 Archivo,sans-serif;color:#d9ccb3;margin:10px 0 0;max-width:40em}
.faq-ratgeber .bereich-link{margin-top:18px;color:var(--gold)}
@media(hover:hover) and (pointer:fine){.faq-ratgeber li a:hover{color:#f3e2b5}.faq-ratgeber li a:hover .pfeil{transform:translate(3px,-3px)}}

/* G · Was er mitbringt (Ilja 4.11. spät: Expertise, Fähigkeiten und Haltung, die Geschichte steht auf /ueber) */
.person-staerken-titel{margin:calc(22px * var(--dichte,1)) 0 12px;font:italic 400 clamp(19px,1.5vw,22px)/1.2 'Luxus Serif',Georgia,serif;color:var(--dark-gold)}
.person-staerken{list-style:none;display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14px * var(--dichte,1)) 22px;margin:0;padding:0}
.person-staerken li{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center}
.person-ikon{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--dark-gold);border-radius:50%}
.person-ikon .ikon{width:20px;height:20px}
.person-staerken b{font:400 19px/1.15 'Luxus Serif',Georgia,serif;color:var(--green)}
.person-staerken li>span:last-child{margin-top:2px;font:400 15px/1.35 Archivo,sans-serif;color:#4f4a40}
.person-text .bereich-link{margin-top:calc(22px * var(--dichte,1))}


/* Schmale Laptops: Pakete-Kopf einspaltig, Überschrift in einer Zeile */
@media(min-width:1101px) and (max-width:1299px){
 :is(.investition-kopf,.vorteil-kopf){display:block}
 :is(.investition-kopf,.vorteil-kopf) h2 br{display:none}
 :is(.investition-kopf,.vorteil-kopf) h2 span:before{content:' '}
 :is(.investition-kopf,.vorteil-kopf) .bereich-text{max-width:calc(100% - 140px);margin-top:calc(14px * var(--dichte,1))}
}

/* Mittlere Laptop-Höhen (z. B. 1280 × 720): engere Zeilen wie im flachen Fenster, die Schrift bleibt. Steht vor dem flachen Block, damit der gewinnt. */
@media(min-width:701px) and (max-height:760px){
 .stufe-fuer{display:none}
 .stufen{margin-top:12px}
 .stufe ul{margin-top:6px;padding-top:6px}
 .stufe li{line-height:1.28}
 .visibility .visibility-lead{line-height:1.5}
 .visibility .visibility-list li{line-height:1.4}
}

/* Niedrige Laptop-Fenster (z. B. MacBook mit größerer Schrift, 1147 × 650): kompaktere Kacheln, Karten und Listen */
@media(min-width:701px) and (max-height:700px){
 .werte-liste{margin-top:20px;gap:10px clamp(12px,1.4vw,20px)}
 .werte-liste li{padding:11px 14px;grid-template-columns:40px 1fr}
 .werte-liste h3{font-size:19px}
 .werte-liste p{font-size:15px;line-height:1.4;margin-top:3px}
 .werte-liste .ikon{width:26px;height:26px}
 .bereich-schluss{margin-top:14px;font-size:18px}
 .befund-reiter{margin-bottom:12px}
 .befund-reiter button{padding-left:12px;padding-right:12px;font-size:14.5px}
 .befund-folie figcaption{margin-top:9px}
 .stufe-fuer{display:none}
 .stufen{margin-top:12px}
 .investition-kopf .bereich-text{font-size:15.5px;line-height:1.5}
 .stufe h3{font-size:20px}
 .stufe-preis{margin-top:4px}
 .stufe-betrag{font-size:29px}
 .stufe ul{margin-top:6px;padding-top:5px}
 .stufe-basis{margin-top:5px;padding-top:4px}
 .stufe li{font-size:15px;line-height:1.26}
 .stufe li small{font-size:14px}
 .investition-fuss{margin-top:8px}
 .investition-fuss p{font-size:14px;line-height:1.5}
 .vorteil-karte{min-height:160px}
 .vorteil-wir-liste{gap:8px}
 .vorteil-wir-liste li{grid-template-columns:44px 1fr}
 .vorteil-ikon{width:44px;height:44px}
 .vorteil-rahmen{padding-top:24px;padding-bottom:14px}
 .vorteil-vergleich p{padding-top:9px;padding-bottom:9px}
 .person-staerken-titel{margin-top:14px}
 .person-staerken{row-gap:10px}
 .person-text .bereich-link{margin-top:14px}
 .visibility-list li{padding-top:4px;padding-bottom:4px}
 .visibility .visibility-lead{line-height:1.5}
 .visibility .visibility-list li{line-height:1.4}
 .visibility .visibility-eyebrow{margin-bottom:14px}
 .visibility .visibility-list{margin-top:14px}
 .visibility .visibility-close{margin-top:14px}
 .visibility-list .ikon{top:5px}
}

/* Laptop und Tablet */
@media(min-width:701px) and (max-width:1100px){
 .werte-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
 .befund-inner,.person-inner{grid-template-columns:1fr;row-gap:36px}
 .ablauf-schritte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
 .stufen{grid-template-columns:1fr;max-width:640px}
 .vorteil-teilung{grid-template-columns:1fr}
 .vorteil-pfeil{margin:16px auto;transform:rotate(90deg)}
 :is(.investition-fuss){flex-direction:column;align-items:flex-start}
}

/* Handy */
@media(max-width:700px){
 :is(.werte,.befund,.ablauf,.investition,.vorteil,.person){display:block;min-height:0;padding:92px 22px 76px}
 :is(.befund,.investition,.person)::before{left:22px;right:22px}
 :is(.werte,.befund,.ablauf,.investition,.vorteil,.person) h2{font-size:clamp(36px,10.4vw,46px)}
 .bereich-kicker{gap:12px;margin-bottom:16px;font-size:12px}.bereich-kicker:before{width:28px}
 .bereich-text{font-size:15.5px}
 .werte-liste{grid-template-columns:1fr;margin-top:28px}
 .werte-liste li{grid-template-columns:42px 1fr;padding:16px}
 .werte-liste h3{font-size:20px}
 .bereich-schluss{font-size:18px;padding-right:34px}
 .befund-inner,.person-inner{display:block}
 .befund-mappe{margin-top:34px}
 .befund-reiter{flex-wrap:nowrap;overflow-x:auto;margin:0 -22px 12px;padding:2px 22px 6px;scrollbar-width:none}
 .befund-reiter button{flex:none}
 .grosse-zahlen{gap:22px}.grosse-zahlen b{font-size:44px}
 .ablauf-bild{width:100%;height:280px;opacity:.7}
 .ablauf-schritte{grid-template-columns:1fr;gap:0;margin:56px 0 0 27px;border-left:1px solid #b6a27a66}
 .ablauf-schritte li{padding:0 0 34px 44px;border-top:0}
 .ablauf-schritte li:last-child{padding-bottom:0}
 .ablauf-ikon{position:absolute;left:-28px;top:-6px;margin:0}
 .ablauf-zahl{margin-top:0}
 .jahr-band{height:auto}
 .jahr-band span{padding:9px 8px;font-size:13px;line-height:1.25;white-space:normal}
 .jahr-marken{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
 .jahr-marken li{position:static;transform:none;text-align:left;padding:0 0 0 10px;border-right:0;border-left:1px solid var(--gold)}
 .jahr-marken span{white-space:normal}
 .stufen{grid-template-columns:1fr;gap:26px;margin-top:34px}
 :is(.investition-fuss){display:block}
 :is(.investition-fuss,.befund-text) .apply-link{margin-top:20px;font-size:12px}
 .vorteil-teilung{grid-template-columns:1fr;margin-top:40px}
 .vorteil-pfeil{margin:14px auto;transform:rotate(90deg)}
 .vorteil-karten{gap:12px}
 .vorteil-karte{min-height:250px}
 .vorteil-rahmen{padding:30px 14px 14px}
 .vorteil-sie .vorteil-karte-text{padding:16px 14px}
 .vorteil-sie h4{font-size:19px;min-height:3.54em}
 .vorteil-vergleich{grid-template-columns:1fr}
 .person-bild{margin:0 0 30px}
 .person-staerken{grid-template-columns:1fr}
}