/* Bewertung: gemeinsame Rollen der freigegebenen Versicherungsseiten.
   Bewertungsdialog und seine bestehenden Regeln bleiben unverändert. */
body.valuation-page .valuation-shell { width:min(90%,1440px); }
body.valuation-page .valuation-hero { padding:170px 0 64px; background:transparent; color:#222; }
body.valuation-page .valuation-hero__intro { display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; }
body.valuation-page .valuation-hero__title { width:100%; }
body.valuation-page .valuation-hero h1 { margin-inline:auto; color:var(--service-ink); }
body.valuation-page .valuation-hero__copy { max-width:690px; width:100%; --service-hero-copy-width:690px; }
body.valuation-page .valuation-hero__copy > p { color:var(--service-copy); text-wrap:balance; }
body.valuation-page .valuation-actions { justify-content:center; margin-top:28px; }
body.valuation-page .valuation-hero__copy small { margin-top:16px; }
body.valuation-page :is(.valuation-btn,.valuation-guide__action) { min-height:52px; padding:16px 28px; font:400 14px/1.4 "Inter",sans-serif; border-radius:100px; }
body.valuation-page .valuation-btn--primary { background:#333; border-color:#333; }
body.valuation-page .valuation-picture { width:min(90%,1440px); margin-inline:auto; border-radius:16px; height:clamp(500px,52vw,760px); }
body.valuation-page :is(.valuation-tool-section,.valuation-guide,.valuation-faq) { padding-block:var(--service-section-space); }
body.valuation-page .valuation-tool-section { background:#fff; }
body.valuation-page .valuation-tool-section__intro { display:flex; flex-direction:column; align-items:center; text-align:center; }
body.valuation-page .valuation-tool-section__intro h2 { margin-inline:auto; }
body.valuation-page .valuation-tool-section__intro > p { margin:26px auto 30px; }
body.valuation-page .valuation-guide { padding-top:var(--service-section-space); }
body.valuation-page .valuation-guide__row--value { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
body.valuation-page .valuation-guide__row--sale { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
body.valuation-page :is(.valuation-guide__card,.valuation-guide__media) { border-radius:16px; min-height:520px; }
body.valuation-page .valuation-guide__card { gap:0; }
body.valuation-page .valuation-guide__card > p:not(.valuation-eyebrow) { margin-top:24px; }
body.valuation-page .valuation-eyebrow { color:#666; font:400 12px/1.5 "Inter",sans-serif; letter-spacing:.08em; }
body.valuation-page .valuation-guide__facts { margin-top:32px; gap:16px; }
body.valuation-page .valuation-guide__facts svg { width:20px; height:20px; flex-basis:20px; }
body.valuation-page .valuation-guide__closing { border-radius:16px; padding:var(--service-card-padding); gap:80px; background:#333; min-height:0; }
body.valuation-page .valuation-guide__closing h2 { max-width:620px!important; }
body.valuation-page .valuation-guide__closing-copy > p { margin-top:0; }
body.valuation-page .valuation-guide__action { background:#fff; border-color:#fff; color:#222; }
body.valuation-page .valuation-faq { background:#fff; padding-top:0; }
body.valuation-page .valuation-faq__list { margin-top:48px; max-width:none; }
body.valuation-page .valuation-faq summary { padding-block:24px; }
body.valuation-page .valuation-faq details > p { max-width:750px; padding-bottom:24px; }
@media(max-width:1100px) {
 body.valuation-page :is(.valuation-guide__card,.valuation-guide__media) { min-height:460px; }
 body.valuation-page .valuation-guide__closing { gap:40px; }
}
@media(max-width:767px) {
 body.valuation-page .valuation-shell { width:calc(100% - 40px); }
 body.valuation-page .valuation-hero { padding:130px 0 40px; }
 body.valuation-page .valuation-hero__copy { max-width:690px; }
 body.valuation-page .valuation-picture { width:calc(100% - 40px); height:600px; }
 body.valuation-page :is(.valuation-guide__row--value,.valuation-guide__row--sale,.valuation-guide__closing) { grid-template-columns:1fr; }
 body.valuation-page .valuation-guide__media { order:-1; min-height:0; height:320px; }
 body.valuation-page .valuation-guide__card { min-height:0; }
 body.valuation-page .valuation-guide__closing { gap:26px; }
 body.valuation-page .valuation-btn,body.valuation-page .valuation-guide__action { font-size:13px; }
}
body.valuation-page main .valuation-guide__card { justify-content:space-between; gap:80px; }

/* Bild-CTA ersetzt die frühere Startsektion; der Dialog bleibt derselbe. */
body.valuation-page .valuation-picture { scroll-margin-top:110px; }
body.valuation-page .valuation-picture__journey { width:90%; }
body.valuation-page .valuation-picture__start { margin-top:40px; gap:24px; background:#fff; border-color:#fff; color:#222; cursor:pointer; }
body.valuation-page .valuation-picture__start:hover { background:#e9eeee; }
body.valuation-page .valuation-picture__start:focus-visible { outline:2px solid #fff; outline-offset:5px; }
body.valuation-page .valuation-guide__copy [data-text-role="note"] { margin-top:18px; }
/* Bildmotive ohne Personen; neutrales dunkles Overlay und umlaufende Glasflächen. */
body.valuation-page .valuation-guide__media { isolation:isolate; }
body.valuation-page .valuation-guide__media img { filter:saturate(.8); transform:none; }
body.valuation-page .valuation-guide__media::before { z-index:1; background:linear-gradient(180deg,#0003 0%,#0005 45%,#000a 100%); }
/* Kleine Bildhinweise nach dem PKV-Hero: ein Glasband, eine freie Beschriftung. */
body.valuation-page .valuation-image-caption { position:absolute; z-index:2; inset:auto 28px 30px; color:#fff; }
body.valuation-page .valuation-image-caption__intro { margin:0 0 16px; max-width:290px; font:300 16px/1.5 "Inter",sans-serif; letter-spacing:-.015em; }
body.valuation-page .valuation-ribbon { display:flex; align-items:center; gap:10px; }
body.valuation-page .valuation-band { flex:1; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 92%,transparent); }
body.valuation-page .valuation-band__track { display:flex; width:max-content; animation:valuation-band 32s linear infinite; }
body.valuation-page .valuation-band__group { display:flex; flex:none; gap:8px; padding-right:8px; }
body.valuation-page .valuation-badge { display:flex; align-items:center; gap:8px; white-space:nowrap; padding:10px 12px; border-radius:8px; background:#ffffff24; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font:300 12px/1.4 "Inter",sans-serif; }
body.valuation-page .valuation-badge__icon { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#deeee5; color:#28584e; font:400 11px/1 "Inter",sans-serif; }
body.valuation-page .valuation-image-caption small { display:block; margin-top:15px; color:#d0d5d2; font:300 10px/1.5 "Inter",sans-serif; }
body.valuation-page .valuation-ribbon-toggle { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:1px solid #ffffff60; border-radius:50%; background:#ffffff18; color:#fff; font:300 11px/1 "Inter",sans-serif; cursor:pointer; }
body.valuation-page .valuation-ribbon:is(:hover,:focus-within) .valuation-band__track,
body.valuation-page .valuation-ribbon.is-paused .valuation-band__track { animation-play-state:paused; }
body.valuation-page :is(.valuation-band,.valuation-ribbon-toggle):focus-visible { outline:2px solid #deeee5; outline-offset:3px; }
body.valuation-page .valuation-free-caption { position:absolute; z-index:2; inset:auto 30px 32px; display:flex; align-items:flex-start; gap:14px; color:#fff; background:none; border:0; padding:0; }
body.valuation-page .valuation-free-caption__icon { flex:none; width:38px; height:38px; padding:9px; margin-top:0; border-radius:11px; background:#f2dda1; color:#725c2d; }
body.valuation-page .valuation-free-caption h3 { margin:0 0 8px; color:#fff; font:300 18px/1.35 "Inter",sans-serif; letter-spacing:-.025em; }
body.valuation-page .valuation-free-caption p { margin:0; color:#f1f3f2; font:300 13px/1.6 "Inter",sans-serif; }
body.valuation-page .valuation-free-caption small { display:block; max-width:none; margin-top:10px; color:#d0d5d2; font:300 10px/1.5 "Inter",sans-serif; }
@keyframes valuation-band { to { transform:translateX(-50%); } }
@media(max-width:767px) {
 body.valuation-page .valuation-picture__journey { width:calc(100% - 48px); }
 body.valuation-page .valuation-picture__start { margin-top:28px; }
 body.valuation-page main .valuation-guide__card { gap:45px; }
 body.valuation-page .valuation-image-caption { inset:auto 20px 24px; }
 body.valuation-page .valuation-free-caption { inset:auto 22px 26px; gap:12px; }
 body.valuation-page .valuation-free-caption h3 { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
 body.valuation-page .valuation-band { overflow-x:auto; mask-image:none; }
 body.valuation-page .valuation-band__track { animation:none; }
 body.valuation-page .valuation-band__group[aria-hidden],body.valuation-page .valuation-ribbon-toggle { display:none; }
}
/* Die Bilddatei darf die gemeinsame Kartenhöhe nicht über ihre Eigenmaße aufziehen. */
body.valuation-page .valuation-guide__media > img { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; }

/* Eine durchgehende Hintergrundebene, unabhängig von den Sektionsgrenzen. */
body.valuation-page main { position:relative; isolation:isolate; }
body.valuation-page main::before {
 content:""; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100vh;
 pointer-events:none;
 background:url("/assets/images/immobilien/hero-heller-schatten-v1.png") no-repeat 35% center / cover;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
}

/* CTA-Varianten nach Cyber/Depot: neutrale Farben, 200 ms und leichter Hub. */
body.valuation-page :is(.valuation-btn,.valuation-guide__action) {
 gap:22px; cursor:pointer; text-align:center;
 transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
body.valuation-page :is(.valuation-btn,.valuation-guide__action):hover { transform:translateY(-2px); }
body.valuation-page .valuation-btn--primary { background:#222; border-color:#222; color:#fff; }
body.valuation-page .valuation-btn--primary:hover { background:#222; border-color:#222; }
body.valuation-page .valuation-btn--secondary { background:#fff; border-color:#d5d5d5; color:#222; }
body.valuation-page .valuation-btn--secondary:hover { background:#f0f0f0; border-color:#d5d5d5; }
body.valuation-page :is(.valuation-picture__start,.valuation-guide__action) { background:#fff; border-color:#fff; color:#222; }
body.valuation-page :is(.valuation-picture__start,.valuation-guide__action):hover { background:#e8efed; border-color:#e8efed; }
body.valuation-page :is(.valuation-btn,.valuation-guide__action):focus-visible { outline:3px solid #49a5a2; outline-offset:5px; }
@media(max-width:767px) {
 body.valuation-page .valuation-actions { width:100%; max-width:350px; margin-inline:auto; gap:12px; }
 body.valuation-page .valuation-actions .valuation-btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 body.valuation-page :is(.valuation-btn,.valuation-guide__action) { transition:none; }
 body.valuation-page :is(.valuation-btn,.valuation-guide__action):hover { transform:none; }
}

body.valuation-page .valuation-free-caption { justify-content:space-between; gap:28px; }
body.valuation-page .valuation-free-caption > div { margin-left:auto; max-width:calc(100% - 66px); text-align:right; }

/* Abschlussabgleich mit den gerenderten Depot-Komponenten. */
body.valuation-page .valuation-guide > .valuation-shell { width:min(90%,1520px); }
body.valuation-page :is(.valuation-guide__card,.valuation-guide__media) { min-height:565px; }
body.valuation-page .valuation-guide__card { font:400 16px/1.5 "Inter",Arial,sans-serif; color:#222; }
body.valuation-page :is(.valuation-btn--primary,.valuation-picture__start,.valuation-guide__action) { border:0; }
body.valuation-page :is(.valuation-btn,.valuation-guide__action) { transition:background .2s,transform .2s; }
body.valuation-page .valuation-faq__list { margin-top:80px; }
body.valuation-page .valuation-faq h2 { margin-bottom:0; }
body.valuation-page .valuation-faq__list details { border-bottom:1px solid #edf0ef; }
body.valuation-page .valuation-faq__list details:first-child { border-top:0; }
body.valuation-page .valuation-faq summary { padding:30px 0; gap:24px; }
body.valuation-page .valuation-faq summary span { width:40px; height:40px; flex-basis:40px; background:#f7f8f8; transition:transform .2s; }
body.valuation-page .valuation-faq details > p { padding:0 64px 30px 0; max-width:850px; }
body.valuation-page .valuation-faq details[open] summary span { transform:rotate(45deg); }
body.valuation-page .valuation-faq details[open] summary span::after { opacity:1; }
@media(max-width:767px) {
 body.valuation-page .valuation-guide > .valuation-shell { width:calc(100% - 40px); max-width:650px; }
 body.valuation-page .valuation-guide__card { min-height:335px; }
 body.valuation-page .valuation-guide__media { min-height:480px; height:480px; }
 body.valuation-page :is(.valuation-btn,.valuation-guide__action) { padding:15px 20px; gap:16px; min-height:50px; }
 body.valuation-page .valuation-faq__list { margin-top:40px; }
 body.valuation-page .valuation-faq summary { padding:24px 0; gap:16px; }
 body.valuation-page .valuation-faq summary span { width:32px; height:32px; flex-basis:32px; }
 body.valuation-page .valuation-faq details > p { padding-right:22px; }
}
@media(prefers-reduced-motion:reduce) {
 body.valuation-page :is(.valuation-btn,.valuation-guide__action,.valuation-faq summary span) { transition:none; }
}