/* Online-Immobilienbewertung: Gestaltung.
   Nutzt die Design-Tokens aus styles.css (--ink, --paper, --paper-2, --accent, --accent-dark,
   --bronze, --line, --sans). Mobile zuerst; Erweiterungen ab 640 px und 900 px. */

/* hidden-Attribut muss auch gegen display-Regeln der Klassen gewinnen */
.val-hero [hidden], .val-app-section [hidden], .val-app[hidden]{display:none !important;}

.val-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;}

/* ---- Einstieg ---- */
section.val-hero{padding:48px 0 24px;}
.val-hero-grid{display:grid; gap:32px; align-items:start;}
@media (min-width:900px){ .val-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px;} section.val-hero{padding:72px 0 40px;} }
.val-hero h1.display{max-width:20ch; margin-bottom:18px;}
.val-hero .hero-lede{max-width:54ch; margin-bottom:28px;}
.val-cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.val-cta-row .btn{padding:15px 30px; font-size:15px;}
.val-points{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.val-points li{display:grid; grid-template-columns:36px 1fr; gap:4px 14px; padding:18px 0; border-bottom:1px solid var(--line);}
.val-points .n{font-weight:700; color:var(--bronze); font-size:15px; grid-row:span 2;}
.val-points strong{font-size:16px;}
.val-points span.t{font-size:14.5px; color:#43463f; line-height:1.5;}
.val-unavailable{border:1px solid var(--line-dark); border-left:4px solid var(--bronze); background:var(--paper-2); padding:22px 24px; max-width:60ch;}
.val-unavailable h2{font-family:var(--sans); font-size:20px; margin:0 0 8px; letter-spacing:-.01em;}
.val-unavailable p{margin:0 0 16px; font-size:16px; color:#43463f;}
.val-noscript{border:1px solid var(--line-dark); padding:18px 22px; background:var(--paper-2); font-size:16px;}

section.val-app-section{padding:8px 0 72px;}
@media (max-width:720px){ section.val-app-section{padding:0 0 56px;} }
.val-app{max-width:880px; margin:0 auto;}
.val-card{background:var(--paper); border:1px solid var(--line-dark); padding:36px 40px 40px; scroll-margin-top:96px;}
@media (max-width:640px){ .val-card{padding:22px 18px 28px;} }

/* ---- Demo-Feld (nur lokale Vorschau) ---- */
.val-demo{border:2px dashed var(--bronze); background:#fff8e6; padding:16px 18px; margin:0 0 20px; max-width:60ch;}
.val-demo p{margin:0 0 12px; font-size:14.5px; color:var(--ink);}
.val-demo-fields{display:grid; gap:12px;}
@media (min-width:640px){ .val-demo-fields{grid-template-columns:1fr 1fr;} }
.val-demo-field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:4px;}
.val-demo-field select{width:100%; min-height:44px; padding:8px 10px; font:inherit; font-size:14px; border:1px solid #7d8078; background:#fff;}
.val-demo-flag{margin:0 0 20px; padding:10px 14px; border-left:4px solid var(--bronze); background:#fff8e6; font-size:14px;}

/* ---- Fortschritt ---- */
.val-progress{list-style:none; display:flex; gap:6px; margin:0 0 28px; padding:0;}
.val-progress li{flex:1 1 0; min-width:0; border-top:3px solid var(--line-dark); font-size:13px; color:#5a5d54;}
.val-progress li.is-done{border-top-color:var(--ink);}
.val-progress li.is-current{border-top-color:var(--accent); color:var(--ink); font-weight:700;}
.val-progress-item, .val-progress-btn{display:flex; align-items:center; gap:8px; min-height:44px; width:100%; padding:6px 2px 0; text-align:left; background:none; border:0; font:inherit; color:inherit;}
.val-progress-btn{cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.val-progress-btn:hover{color:var(--accent-dark);}
.val-progress-btn:focus-visible{outline:2px solid var(--accent-dark); outline-offset:2px;}
.val-progress-num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1.5px solid currentColor; border-radius:50%; font-size:12px; flex-shrink:0;}
.val-progress li.is-current .val-progress-num{background:var(--ink); color:var(--paper); border-color:var(--ink);}
@media (max-width:639px){
  .val-progress li:not(.is-current) .val-progress-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .val-progress li.is-current{flex:3 1 0;}
  .val-progress li:not(.is-current){flex:1 1 0;}
  .val-progress-label{white-space:normal; line-height:1.25;}
}

/* ---- Überschriften und Text ---- */
.val-form, .val-result{animation:valIn .25s ease both;}
@keyframes valIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.val-heading{font-family:var(--sans); font-weight:700; font-size:clamp(22px,3.2vw,28px); line-height:1.2; letter-spacing:-.015em; margin:0 0 12px;}
.val-heading:focus{outline:none;}
.val-lead{font-size:16.5px; color:#43463f; line-height:1.55; margin:0 0 24px; max-width:64ch;}
.val-sub-lead{font-size:15.5px; color:#43463f; margin:0 0 18px; max-width:64ch;}
.val-sub{font-weight:700; font-size:14.5px; margin:16px 0 6px;}
.val-note{font-size:13.5px; color:#5a5d54; margin:22px 0 0; max-width:64ch;}
.val-note a, .val-hint a, .val-lead a{color:var(--ink); text-underline-offset:3px;}
.val-hint{font-size:13.5px; color:#5a5d54; margin:6px 0 0; line-height:1.45;}
.val-why{grid-column:1 / -1; border-left:3px solid var(--accent); background:var(--paper-2); padding:14px 18px;}
.val-why h3{font-family:var(--sans); font-size:15px; margin:0 0 4px;}
.val-why p{margin:0; font-size:14px; color:#43463f; line-height:1.5;}

/* ---- Felder ---- */
.val-grid{display:grid; grid-template-columns:1fr; gap:22px 20px; margin-bottom:8px;}
@media (min-width:640px){ .val-grid{grid-template-columns:1fr 1fr;} }
.val-grid .is-wide, .val-grid > .val-field:has(> fieldset){grid-column:1 / -1;}
.val-grid.is-step1{grid-template-columns:repeat(6,1fr); gap:22px 14px;}
.val-grid.is-step1 > *{grid-column:1 / -1;}
.val-grid.is-step1 > [data-field="postalCode"]{grid-column:span 2;}
.val-grid.is-step1 > [data-field="city"]{grid-column:span 4;}
.val-grid.is-step1 > [data-field="street"]{grid-column:span 4;}
.val-grid.is-step1 > [data-field="houseNumber"]{grid-column:span 2;}
.val-field[hidden]{display:none;}
.val-label, legend.val-label{display:block; font-size:14.5px; font-weight:600; margin:0 0 6px; padding:0;}
.val-opt{font-weight:400; color:#5a5d54;}
.val-field input[type=text], .val-field input[type=email], .val-field input[type=tel], .val-field select, .val-field textarea{
  width:100%; min-height:48px; padding:11px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid #7d8078; border-radius:0; box-sizing:border-box;
}
.val-field textarea{resize:vertical; min-height:88px;}
.val-field input:disabled{background:var(--paper-2); color:#6b6e66;}
.val-field input:focus-visible, .val-field select:focus-visible, .val-field textarea:focus-visible{outline:2px solid var(--accent-dark); outline-offset:2px; border-color:var(--ink);}
.val-field.has-error input:not([type=checkbox]):not([type=radio]), .val-field.has-error select, .val-field.has-error textarea{border:2px solid #b3261e;}
.val-inputrow{display:flex; align-items:center; gap:10px;}
.val-unit{font-size:14.5px; color:#43463f; white-space:nowrap;}
.val-selectwrap{position:relative;}
.val-field select{appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23252724' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;}
.val-error{margin:6px 0 0; font-size:14px; font-weight:600; color:#b3261e; line-height:1.4;}
.val-error::before{content:"Fehler: "; font-weight:700;}
.val-error[hidden]{display:none;}
.val-check{display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer;}
.val-check input{width:20px; height:20px; margin:0; flex-shrink:0; accent-color:var(--accent-dark);}
.val-check input:focus-visible{outline:2px solid var(--accent-dark); outline-offset:2px;}
.val-field > .val-check{margin-top:2px; font-size:14.5px; color:#43463f;}

.val-fieldset{border:0; padding:0; margin:0; min-width:0;}

/* Auswahlkarten und Optionsschalter */
.val-choices{display:grid; gap:12px;}
.val-choices.is-cards{grid-template-columns:1fr;}
@media (min-width:640px){ .val-choices.is-cards{grid-template-columns:repeat(3,1fr);} }
.val-choices.is-compact{display:flex; flex-wrap:wrap; gap:10px;}
.val-choice{position:relative; display:block; cursor:pointer;}
.val-choice input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
.val-choice-box{display:flex; gap:12px; height:100%; background:#fff; border:1px solid #7d8078; padding:16px 18px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; position:relative; box-sizing:border-box;}
.is-cards .val-choice-box{flex-direction:column; padding:18px 18px 18px;}
.is-compact .val-choice-box{align-items:center; min-height:48px; padding:10px 18px;}
.val-choice:hover .val-choice-box{border-color:var(--ink);}
.val-choice input:checked + .val-choice-box{border-color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); background:var(--paper-2);}
.val-choice input:focus-visible + .val-choice-box{outline:2px solid var(--accent-dark); outline-offset:3px;}
.is-cards .val-choice-box::after{content:""; position:absolute; top:14px; right:14px; width:18px; height:18px; border:1.5px solid #7d8078; border-radius:50%; background:#fff;}
.is-cards input:checked + .val-choice-box::after{border-color:var(--accent-dark); background:var(--accent-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat;}
.is-compact input:checked + .val-choice-box::before{content:""; width:16px; height:16px; border-radius:50%; background:var(--accent-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat; flex-shrink:0;}
.val-choice-icon{color:var(--bronze); display:block; line-height:0;}
@media (max-width:639px){
  .is-cards .val-choice-box{flex-direction:row; align-items:center; padding:14px 48px 14px 16px; gap:14px;}
  .is-cards .val-choice-box::after{top:50%; right:14px; margin-top:-9px;}
  .val-choice-icon svg{width:32px; height:32px;}
}
.val-choice-text{display:flex; flex-direction:column; gap:4px;}
.val-choice-title{font-weight:700; font-size:16px; line-height:1.3; padding-right:22px;}
.is-compact .val-choice-title{font-weight:600; font-size:15.5px; padding-right:0;}
.val-choice-hint{font-size:13.5px; color:#5a5d54; line-height:1.4;}
.val-choice.is-unknown .val-choice-box{background:var(--paper-2); border-style:dashed;}

/* Modernisierungen */
.val-mods{display:grid; gap:0; border-top:1px solid var(--line);}
.val-mod{border-bottom:1px solid var(--line); padding:4px 0;}
.val-mod-main{font-weight:600;}
.val-modyear{display:grid; gap:0 16px; padding:0 0 10px 30px; align-items:center;}
@media (min-width:640px){ .val-modyear{grid-template-columns:130px 1fr;} .val-modyear .val-error{grid-column:1 / -1;} }
.val-modyear .val-inputrow input{min-height:44px;}

/* Fehlerübersicht */
.val-summary{border-left:4px solid #b3261e; background:#fbeeed; padding:14px 20px; margin:0 0 24px;}
.val-summary:focus{outline:2px solid var(--ink); outline-offset:2px;}
.val-summary h3{font-family:var(--sans); font-size:16px; margin:0 0 6px;}
.val-summary ul{margin:0; padding-left:20px;}
.val-summary a{color:var(--ink); font-size:15px;}
.val-alert{border:1px solid #b3261e; border-left-width:4px; background:#fbeeed; padding:14px 18px; margin:20px 0 0; font-size:15px;}
.val-alert p{margin:0 0 8px;}
.val-alert p:last-child{margin:0;}
.val-alert a{color:var(--ink);}
.val-alert:focus{outline:2px solid var(--ink); outline-offset:2px;}

/* Navigation */
.val-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; flex-wrap:wrap;}
.val-nav-right{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.val-nav .btn:disabled, .val-cform .btn:disabled{opacity:.6; cursor:progress;}
@media (max-width:560px){
  .val-nav{flex-direction:column-reverse; align-items:stretch;}
  .val-nav .btn, .val-nav-right{width:100%;}
  .val-nav-right{flex-direction:column-reverse;}
  .val-nav .btn{white-space:normal;}
}

/* Prüfen */
.val-review{border-top:1px solid var(--line); padding:18px 0 8px;}
.val-review-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px;}
.val-review-head h3{font-family:var(--sans); font-size:17px; margin:0;}
.val-edit{padding:8px 16px; min-height:44px; font-size:13.5px;}
.val-review-list{margin:0; display:grid;}
.val-review-list > div{display:grid; gap:2px 16px; padding:9px 0; border-top:1px dashed var(--line);}
@media (min-width:640px){ .val-review-list > div{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);} }
.val-review-list dt{font-size:14px; color:#5a5d54;}
.val-review-list dd{margin:0; font-weight:600; font-size:15.5px; overflow-wrap:anywhere;}

/* ---- Ergebnis ---- */
.val-range{display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--paper-2); border:1px solid var(--line-dark); padding:24px 22px; margin:18px 0 22px;}
@media (min-width:640px){ .val-range{flex-direction:row; align-items:center; gap:28px; padding:28px 32px;} }
.val-range > div{display:flex; flex-direction:column; gap:4px;}
.val-range-label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--bronze); font-weight:700;}
.val-range-value{font-weight:700; font-size:clamp(28px,5.4vw,44px); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;}
.val-range-sep{font-size:15px; color:#5a5d54;}
.val-quality, .val-basis{border-top:1px solid var(--line); padding:18px 0 4px;}
.val-quality h3, .val-basis h3, .val-contact h3{font-family:var(--sans); font-size:18px; margin:0 0 6px; letter-spacing:-.005em;}
.val-quality p, .val-basis p{margin:0 0 6px; font-size:15.5px; color:#43463f;}
.val-dots{display:inline-flex; gap:4px; vertical-align:middle; margin-left:4px;}
.val-dots i{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--ink); display:block;}
.val-dots i.on{background:var(--ink);}
.val-list{margin:4px 0 8px; padding-left:20px; font-size:15.5px; color:#43463f;}
.val-list li{margin:3px 0;}
.val-basis-list{margin:6px 0 10px;}
.val-basis-list > div{display:grid; gap:2px 16px; padding:9px 0; border-top:1px dashed var(--line);}
@media (min-width:640px){ .val-basis-list > div{grid-template-columns:200px 1fr;} }
.val-basis-list dt{font-size:14px; color:#5a5d54;}
.val-basis-list dd{margin:0; font-size:15.5px;}
.val-disclaimer{font-size:14px; color:#43463f; margin:18px 0 0; padding:14px 18px; border-left:3px solid var(--bronze); background:var(--paper-2); max-width:70ch;}

/* ---- Kontakt ---- */
.val-contact{margin-top:32px; padding-top:26px; border-top:1px solid var(--line-dark);}
.val-actions{display:grid; gap:10px;}
@media (min-width:720px){ .val-actions{grid-template-columns:repeat(3,1fr);} }
.val-action{white-space:normal; min-height:52px; padding:12px 16px;}
.val-action.is-active{background:var(--ink); color:var(--paper);}
.val-c-panel:empty{display:none;}
.val-c-panel{margin-top:18px; scroll-margin-top:100px;}
.val-c-panel:focus{outline:none;}
.val-cform{background:var(--paper-2); border:1px solid var(--line); padding:22px 22px 24px;}
@media (max-width:560px){ .val-cform{padding:18px 16px 20px;} }
.val-cform h4, .val-confirm h4{font-family:var(--sans); font-size:17px; margin:0 0 4px;}
.val-cform .val-grid{margin-top:16px;}
.val-cform .btn{margin-top:18px;}
@media (max-width:560px){ .val-cform .btn{width:100%; white-space:normal;} }
.val-confirm{border-left:4px solid #2f6b3a; background:#eef5ee; padding:18px 22px;}
.val-confirm:focus{outline:2px solid var(--ink); outline-offset:2px;}
.val-confirm p{margin:6px 0 0; font-size:15.5px;}
.val-nav-result{margin-top:24px; padding-top:16px; border-top:1px solid var(--line);}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion: reduce){
  .val-app *, .val-app *::before, .val-app *::after{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}

.val-sources { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted, #5b5b5b); }
.val-recommend{margin:14px 0 4px; padding:14px 18px; border-left:3px solid var(--accent); background:var(--paper-2); max-width:70ch;}
.val-recommend p{margin:0 0 12px;}
.val-investor-result:focus{outline:2px solid var(--ink); outline-offset:4px;}
.val-investor-summary{margin:0 0 8px;}
.val-investor-list{margin:6px 0 12px; font-size:16px;}
.val-investor-list strong{font-size:1.2em; margin-right:.15em;}
.val-investor .btn{margin-top:4px;}