/* v5 "How it works" (Jenny 30.10. nachts): Konzept aus Kundensicht. Titel mittig, Inhalt atmet zum Rand,
   Quiz "Where are you today?", Zahlen als Ergebnisse, Beweis per Showroom. Keine Icons, keine Linien-Raster. */
.v5 { --navy: #1f3d66; --sand: #f6f3ee; --serif: "Newsreader", Georgia, serif; }
.v5 .titel-m { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -.02em; line-height: 1.08; text-align: center; margin: 0 auto 14px; max-width: 20ch; }
.v5 .unter-m { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: #5a5a5a; text-align: center; max-width: 46ch; margin: 0 auto; }
.v5 .block { padding: clamp(80px, 9vw, 130px) 0; }
.v5 .sand { background: var(--sand); }
.v5 .satz-m { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); line-height: 1.25; letter-spacing: -.01em; text-align: center; max-width: 26ch; margin: 0 auto; padding: 0 var(--rand); }
.v5 .satz-m em { color: var(--navy); }
/* Reise: Kreise ueber die ganze Breite */
.v5 .reise5 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0 10px; padding: 0 var(--rand); margin-top: clamp(60px, 7vw, 100px); }
.v5 .st { text-align: center; }
.v5 .st img { width: min(330px, 26vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 22px; }
.v5 .st b { display: block; font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }
.v5 .st span { font-family: var(--serif); font-size: 18px; color: #5a5a5a; }
.v5 .ph { width: 74px; color: var(--navy); margin-bottom: 70px; }
@media (max-width: 860px) { .v5 .reise5 { grid-template-columns: 1fr; gap: 8px; } .v5 .st img { width: 64vw; } .v5 .ph { transform: rotate(90deg); margin: 0 auto; } }
/* Quiz */
.v5 .wahl5 { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; margin: clamp(40px, 5vw, 60px) 0 clamp(40px, 5vw, 60px); padding: 0 var(--rand); }
.v5 .wahl5 button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: center; width: clamp(150px, 18vw, 220px); }
.v5 .wahl5 img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 16px; outline: 3px solid transparent; outline-offset: 6px; transition: outline-color .2s, transform .2s, opacity .2s; opacity: .7; }
.v5 .wahl5 button:hover img { opacity: 1; }
.v5 .wahl5 button[aria-pressed="true"] img { outline-color: var(--navy); opacity: 1; transform: scale(1.04); }
.v5 .wahl5 b { display: block; font-size: 17px; letter-spacing: -.01em; }
.v5 .wahl5 small { display: block; font-family: var(--serif); font-size: 16px; color: #6a6a6a; margin-top: 2px; }
.v5 .antwort { max-width: 1180px; margin: 0 auto; padding: 0 var(--rand); }
.v5 .antwort[hidden] { display: none; }
.v5 .antwort-kopf { text-align: center; margin-bottom: clamp(36px, 4vw, 54px); }
.v5 .antwort-kopf h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.02em; margin: 0 0 10px; }
.v5 .antwort-kopf p { font-family: var(--serif); font-size: 20px; color: #5a5a5a; max-width: 52ch; margin: 0 auto; line-height: 1.45; }
.v5 .zwei5 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); }
.v5 .zwei5 h4 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin: 0 0 14px; }
.v5 .zwei5 p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: #333; margin: 0 0 14px; }
@media (max-width: 760px) { .v5 .zwei5 { grid-template-columns: 1fr; } }
.v5 .woche { margin-top: clamp(40px, 5vw, 60px); background: #fff; padding: clamp(26px, 3vw, 40px); }
.v5 .woche h4 { text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 26px; letter-spacing: -.01em; }
.v5 .woche h4 em { color: var(--navy); }
.v5 .tage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.v5 .tag { text-align: center; }
.v5 .tag .kreis { width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; margin: 0 auto 12px; font-size: 13px; font-weight: 600; line-height: 1.1; }
.v5 .tag.letzt .kreis { background: #111; }
.v5 .tag b { display: block; font-size: 16px; margin-bottom: 4px; }
.v5 .tag span { font-family: var(--serif); font-size: 15px; color: #666; }
@media (max-width: 760px) { .v5 .tage { grid-template-columns: 1fr 1fr; gap: 22px 12px; } }
.v5 .woche small { display: block; text-align: center; margin-top: 22px; font-size: 13px; color: #888; }
/* Zahlen als Ergebnisse */
.v5 .ergebnisse { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 60px); padding: 0 var(--rand); max-width: 1300px; margin: clamp(50px, 6vw, 80px) auto 0; text-align: center; }
.v5 .erg b { display: block; font-size: clamp(64px, 7.5vw, 118px); font-weight: 700; letter-spacing: -.06em; line-height: .9; color: var(--navy); }
.v5 .erg h3 { font-size: 22px; letter-spacing: -.02em; margin: 16px 0 8px; }
.v5 .erg p { font-family: var(--serif); font-size: 18px; color: #555; margin: 0 auto; max-width: 26ch; line-height: 1.45; }
.v5 .erg small { display: block; font-size: 12px; color: #999; margin-top: 10px; }
@media (max-width: 760px) { .v5 .ergebnisse { grid-template-columns: 1fr; gap: 50px; } }
.v5 .ganz { text-align: center; margin: clamp(60px, 7vw, 90px) auto 0; padding: 0 var(--rand); font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); max-width: 30ch; line-height: 1.3; }
.v5 .quelle5 { text-align: center; font-size: 12px; color: #999; margin-top: 30px; padding: 0 var(--rand); }
.v5 .quelle5 a { color: inherit; }
/* Beweis */
.v5 .probier { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); padding: 0 var(--rand); max-width: 1300px; margin: clamp(44px, 5vw, 70px) auto 0; }
.v5 .probier a { text-decoration: none; color: inherit; text-align: center; }
.v5 .probier .f { background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; transition: transform .25s; }
.v5 .sand .probier .f { background: #fff; }
.v5 .probier a:hover .f { transform: translateY(-4px); }
.v5 .probier img { width: 82%; mix-blend-mode: multiply; }
.v5 .probier b { display: block; margin-top: 14px; font-size: 17px; }
.v5 .probier span { font-size: 14px; color: var(--navy); font-weight: 600; }
@media (max-width: 760px) { .v5 .probier { grid-template-columns: 1fr; } }
.v5 .mitte-knopf { text-align: center; margin-top: 40px; }
/* Fragen kompakt */
.v5 .fragen5 { max-width: 820px; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0 var(--rand); }
.v5 .fragen5 details { border-bottom: 1px solid #e4e0da; }
.v5 .fragen5 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.v5 .fragen5 summary::-webkit-details-marker { display: none; }
.v5 .fragen5 summary::after { content: "+"; font-weight: 300; font-size: 26px; line-height: 1; color: var(--navy); }
.v5 .fragen5 details[open] summary::after { content: "\2212"; }
.v5 .fragen5 p { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: #555; margin: 0 0 22px; }
.v5 .schluss5 { text-align: center; }
.v5 .schluss5 .knopf { margin-top: 30px; }

.v5 .titel-m, .v5 .unter-m { padding-left: var(--rand); padding-right: var(--rand); }
@media (max-width: 760px) { .v5 .wahl5 button { width: 42%; } }

/* Quiz (Jenny 30.10.: echtes Quiz statt vorausgewaehlter Knoepfe; Kugeln mit Randabstand wie oben, nie zentriert gebuendelt) */
.v5 .quiz { padding: 0 var(--rand); }
.v5 .quiz-start { text-align: center; margin-top: 34px; }
.v5 .quiz-start button, .v5 .quiz-nav button.vor { font: inherit; font-size: 16px; font-weight: 600; background: #111; color: #fff; border: 0; padding: 17px 34px; cursor: pointer; }
.v5 .quiz-start button:hover { background: var(--navy); }
.v5 .frage { display: none; }
.v5 .frage.an { display: block; animation: rein .35s ease; }
@keyframes rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.v5 .frage-kopf { text-align: center; margin-bottom: clamp(34px, 4vw, 54px); }
.v5 .schritt-anz { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.v5 .schritt-anz i { width: 34px; height: 4px; background: #dcd6cc; display: block; }
.v5 .schritt-anz i.ja { background: var(--navy); }
.v5 .frage-kopf small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.v5 .frage-kopf h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.02em; margin: 0; }
.v5 .optionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); }
.v5 .optionen button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.v5 .optionen img { width: min(300px, 24vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 20px; transition: transform .25s, box-shadow .25s; }
.v5 .optionen button:hover img { transform: scale(1.04); box-shadow: 0 0 0 4px var(--navy); }
.v5 .optionen b { display: block; font-size: 20px; letter-spacing: -.02em; }
.v5 .optionen span { display: block; font-family: var(--serif); font-size: 17px; color: #666; margin-top: 4px; }
.v5 .quiz-nav { text-align: center; margin-top: 34px; }
.v5 .quiz-nav button.zurueck { background: none; border: 0; font: inherit; font-size: 15px; color: #666; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.v5 .ergebnis { display: none; }
.v5 .ergebnis.an { display: block; animation: rein .35s ease; }
.v5 .ergebnis .label { display: block; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.v5 .ergebnis .bausteine { display: flex; justify-content: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; margin: 30px 0 10px; }
.v5 .ergebnis .bausteine div { text-align: center; width: 180px; }
.v5 .ergebnis .bausteine img { width: 140px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; }
.v5 .ergebnis .bausteine b { font-size: 16px; }
.v5 .ergebnis-aktion { text-align: center; margin-top: 34px; }
.v5 .ergebnis-aktion .knopf { margin-right: 16px; }
@media (max-width: 760px) { .v5 .optionen { grid-template-columns: 1fr; gap: 30px; } .v5 .optionen img { width: 58vw; } }
.v5 .frage.an, .v5 .ergebnis.an { margin-top: clamp(50px, 6vw, 80px); }
.v5 #wo.laeuft > .unter-m { display: none; }
.held80 img[src*="wand-blond"] { object-position: 50% 12%; }

/* Kein Beige mehr (Jenny 30.10.): helles Blaugrau passend zum Navy */
.v5 { --sand: #eaf0f6; }
.du { background: #eaf0f6; }
:root { --papier: #eaf0f6; --kasten: #eaf0f6; }
.stueck .foto { background: #f2f4f7; }