/* Kundenbereich – Ergänzungen zum Website-Stylesheet (../assets/css/style.css) */

/* Login */
.login-section{min-height:calc(100svh - var(--head))}
.login{display:grid;grid-template-columns:1fr minmax(0,460px);gap:clamp(32px,6vw,88px);align-items:center}
.login__intro h1{font-size:clamp(2.2rem,4vw + .6rem,3.6rem);margin-bottom:.4em;max-width:14ch}
.login__card h2{margin-bottom:.3em}
.login__card .btn{width:100%;margin-top:8px}
.login__card .btn[disabled]{opacity:.65;cursor:progress;transform:none;box-shadow:none}
.login__card .form__hint a{color:var(--brick-d)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:6.5em}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:40px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font:600 .88rem/1 var(--sans);cursor:pointer}
.pw-toggle:hover{background:var(--sand);color:var(--ink)}

.k-notice{margin:0 0 18px;padding:12px 16px;border-radius:14px;font-size:.95rem;font-weight:600}
.k-notice--error{background:#fbe4e1;color:#a3201a}
.k-notice--ok{background:#e3f1e7;color:#1f6b3a}
.k-notice[hidden]{display:none}

/* Bereich nach dem Login */
.k-area{max-width:880px}
.k-area:has(.gf){max-width:none}
.k-area__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.k-area__head h1{font-size:clamp(2rem,3.4vw + .6rem,3rem)}
.k-area__head .eyebrow{margin-bottom:.8em}
.k-area__head .btn{min-height:46px;padding:.6em 1.4em}

.k-panel{padding:clamp(22px,3vw,36px);margin-bottom:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.k-panel h2{font-size:clamp(1.35rem,1.2vw + 1rem,1.7rem);margin-bottom:.7em}
.k-content > :first-child{margin-top:0}
.k-content > :last-child{margin-bottom:0}
/* Nur für einfachen Text direkt in inhalt.html, nicht für gestaltete Bausteine (.hb, .gf) */
.k-content > p,.k-content > ul > li{color:var(--ink-2)}
.k-content > ul{padding-left:1.2em;margin:0 0 1em}
.k-content > p a,.k-content > ul a{color:var(--brick-d)}
.k-muted{margin:0;color:var(--muted)}

.k-files{list-style:none}
.k-files li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.k-files li:first-child{border-top:0;padding-top:0}
.k-files a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;word-break:break-word}
.k-files a:hover{text-decoration-color:var(--brick)}
.k-files span{flex:none;font-size:.9rem;color:var(--muted)}

@media (max-width:860px){
  .login{grid-template-columns:1fr}
  .login-section{min-height:0}
}
@media (max-width:560px){
  .k-files li{flex-direction:column;gap:2px}
}

/* Breite Inhalte (z. B. Gewerbeflächen-Übersicht) ohne weißen Rahmen anzeigen */
.k-panel:has(> .gf){padding:0;background:none;border:0}

/* ---------- Gewerbeflächen-Übersicht (.gf) für inhalt.html ---------- */
.gf{
  container:gf / inline-size;
  --gf-ink:var(--ink,#16222c); --gf-ink2:var(--ink-2,#3d4b57); --gf-muted:var(--muted,#66727d);
  --gf-paper:var(--paper,#fbf9f6); --gf-sand:var(--sand,#f3ede4); --gf-line:var(--line,#e6ddd0);
  --gf-brick:var(--brick,#b5472a); --gf-brickd:var(--brick-d,#8f3519); --gf-brickt:var(--brick-t,#f8e9e3);
  --gf-night:var(--night,#101c25); --gf-night2:var(--night-2,#17293a);
  --gf-serif:var(--serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif);
  --gf-sans:var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
  --gf-r:var(--r,22px);
  --gf-shadow:var(--shadow,0 24px 60px -28px rgba(16,28,37,.45));
  color:var(--gf-ink); font-family:var(--gf-sans); line-height:1.6; max-width:1180px; margin-inline:auto;
}
.gf *,.gf *::before,.gf *::after{box-sizing:border-box}
.gf h2,.gf h3{font-family:var(--gf-serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--gf-ink)}
.gf h2{font-size:clamp(1.9rem,3.3vw + .7rem,3rem)}
.gf h3{font-size:clamp(1.3rem,1.2vw + 1rem,1.6rem)}
.gf p{margin:0 0 1em}
.gf a{color:var(--gf-brickd)}
.gf :focus-visible{outline:3px solid var(--gf-brick);outline-offset:3px;border-radius:8px}
.gf-eyebrow{display:inline-flex;align-items:center;gap:.7em;margin:0 0 1em;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gf-brickd)}
.gf-eyebrow::before{content:"";width:34px;height:2px;background:currentColor;border-radius:2px}
.gf-lead{font-size:clamp(1.05rem,.6vw + .95rem,1.25rem);color:var(--gf-ink2);max-width:62ch}
.gf-intro{margin-bottom:clamp(28px,4vw,44px)}
.gf-contactline{color:var(--gf-ink2)}

/* Kennzahlen */
.gf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 clamp(28px,4vw,44px);padding:0;list-style:none}
.gf-stats li{padding:20px 22px;border-radius:var(--gf-r);background:#fff;border:1px solid var(--gf-line)}
.gf-stats b{display:block;font:600 clamp(1.6rem,1.6vw + 1.1rem,2.2rem)/1.1 var(--gf-serif);color:var(--gf-brickd)}
.gf-stats span{display:block;margin-top:.35em;font-size:.88rem;color:var(--gf-muted)}

/* Preis-Balken */
.gf-chart{margin:0 0 clamp(36px,5vw,64px);padding:clamp(22px,3.5vw,40px);border-radius:var(--gf-r);background:var(--gf-sand);border:1px solid var(--gf-line)}
.gf-chart h3{margin-bottom:.3em}
.gf-chart > p{color:var(--gf-ink2);max-width:70ch}
.gf-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 20px;padding:0;list-style:none;font-size:.9rem;color:var(--gf-ink2)}
.gf-legend li{display:flex;align-items:center;gap:8px}
.gf-legend i{width:14px;height:14px;border-radius:4px;background:var(--gf-brick)}
.gf-legend .g i{background:var(--gf-night)}
.gf-bars{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.gf-bars li{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:6px 16px;align-items:center}
.gf-bars .n{font-size:.95rem;font-weight:600;line-height:1.3}
.gf-bars .n small{display:block;font-weight:400;color:var(--gf-muted);font-size:.8rem}
.gf-bars .t{position:relative;height:30px;border-radius:999px;background:rgba(16,28,37,.07);overflow:hidden}
.gf-bars .t i{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;justify-content:flex-end;min-width:76px;padding:0 12px;border-radius:999px;background:var(--gf-brick);color:#fff;font:700 .85rem/1 var(--gf-sans);font-style:normal;white-space:nowrap}
.gf-bars .g .t i{background:var(--gf-night)}
.gf-note{margin:26px 0 0;font-size:.85rem;color:var(--gf-muted)}

/* Tabelle als Akkordeon */
.gf-list h3{margin-bottom:.35em}
.gf-list > p{color:var(--gf-ink2);max-width:66ch}
.gf-head{display:grid;grid-template-columns:132px minmax(190px,2fr) minmax(110px,1fr) minmax(100px,.9fr) minmax(150px,1.3fr) 28px;gap:18px;padding:0 196px 8px 17px;margin-top:22px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gf-muted)}
.gf-rows{display:grid;gap:14px}
.gf-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 170px;border-radius:var(--gf-r);background:#fff;border:1px solid var(--gf-line);transition:box-shadow .3s ease,border-color .3s ease}
.gf-row:hover{border-color:var(--gf-brick);box-shadow:var(--gf-shadow)}
.gf-row:has(details[open]){border-color:var(--gf-brick);box-shadow:var(--gf-shadow)}
.gf-row details{grid-column:1/-1;grid-row:1}
.gf-row summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:132px minmax(190px,2fr) minmax(110px,1fr) minmax(100px,.9fr) minmax(150px,1.3fr) 28px;gap:18px;align-items:center;min-height:122px;padding:16px 196px 16px 16px;border-radius:var(--gf-r)}
.gf-row summary::-webkit-details-marker{display:none}
.gf-cells{display:contents}
.gf-thumb{display:block;width:132px;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--gf-sand)}
.gf-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gf-title b{display:block;font:600 1.18rem/1.25 var(--gf-serif);color:var(--gf-ink)}
.gf-title small{display:block;margin-top:.25em;font-size:.86rem;color:var(--gf-muted);line-height:1.4}
.gf-cell b{display:block;font-weight:700;font-size:.98rem;line-height:1.3;color:var(--gf-ink)}
.gf-cell small{display:block;font-size:.84rem;color:var(--gf-muted);line-height:1.35}
.gf-cell::before{content:attr(data-l);display:none;margin-bottom:2px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gf-muted)}
.gf-price b{font:600 1.25rem/1.2 var(--gf-serif);color:var(--gf-brickd)}
.gf-st{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-right:6px;padding:0 5px;border-radius:5px;font:800 .72rem/1 var(--gf-sans);font-style:normal;color:#fff;vertical-align:1px}
.gf-st.u{background:#0b5da5}.gf-st.s{background:#1f8a3b}
.gf-chev{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--gf-ink);position:relative;transition:transform .3s ease,background .2s ease}
.gf-chev::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:2px solid var(--gf-ink);border-bottom:2px solid var(--gf-ink);transform:translate(-50%,-70%) rotate(45deg)}
.gf-row details[open] .gf-chev{transform:rotate(180deg);background:var(--gf-brickt)}
.gf-go{grid-column:2;grid-row:1;align-self:start;justify-self:end;margin:39px 16px 0 0;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.55em 1.1em;border:2px solid var(--gf-brick);border-radius:999px;background:var(--gf-brick);color:#fff!important;font:700 .9rem/1.2 var(--gf-sans);text-decoration:none;white-space:nowrap;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.gf-go:hover{background:var(--gf-brickd);border-color:var(--gf-brickd);transform:translateY(-2px)}
.gf-go svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Aufklappbereich */
.gf-panel{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,40px);padding:6px clamp(18px,2.4vw,28px) clamp(22px,2.6vw,30px);border-top:1px dashed var(--gf-line);margin:0 16px}
.gf-panel h4{margin:18px 0 8px;font:700 .76rem/1 var(--gf-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gf-brickd)}
.gf-panel dl{margin:0;display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:7px 16px;font-size:.95rem}
.gf-panel dt{color:var(--gf-muted)}
.gf-panel dd{margin:0;color:var(--gf-ink)}
.gf-panel ul{margin:0;padding-left:1.15em;font-size:.95rem;color:var(--gf-ink2)}
.gf-panel li{margin-bottom:.3em}
.gf-way{list-style:none!important;padding:0!important;display:grid;gap:8px}
.gf-way li{display:flex;align-items:baseline;gap:8px;margin:0!important;color:var(--gf-ink)!important}
.gf-way small{color:var(--gf-muted)}
.gf-hint{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:var(--gf-brickt);color:var(--gf-ink2);font-size:.88rem}
.gf-panel .gf-go{position:static;margin:16px 0 0;align-self:auto;justify-self:start}

/* Fußbereich der Seite */
.gf-foot{margin-top:clamp(28px,4vw,48px);padding:clamp(20px,3vw,30px);border-radius:var(--gf-r);background:var(--gf-night);color:rgba(255,255,255,.86)}
.gf-foot h3{color:#fff;margin-bottom:.4em}
.gf-foot p{margin:0 0 .8em;font-size:.95rem}
.gf-foot a{color:#fff}
.gf-foot ul{margin:.4em 0 0;padding-left:1.1em;font-size:.88rem;color:rgba(255,255,255,.75)}

/* Responsiv */
@container gf (max-width:1040px){
  .gf-head{display:none}
  .gf-row{grid-template-columns:1fr}
  .gf-row summary{grid-template-columns:132px 1fr 28px;grid-template-areas:"thumb title chev" "cells cells cells";gap:14px 16px;padding:16px;min-height:0;align-items:start}
  .gf-thumb{grid-area:thumb}
  .gf-title{grid-area:title}
  .gf-chev{grid-area:chev}
  .gf-cells{grid-area:cells;display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px 18px;padding-top:14px;border-top:1px solid var(--gf-line)}
  .gf-cell::before{display:block}
  .gf-go{grid-column:1;grid-row:2;justify-self:stretch;margin:0 16px 16px;min-height:48px}
  .gf-row details{grid-row:1}
  .gf-panel{grid-template-columns:1fr}
}
@container gf (max-width:640px){
  .gf-stats{grid-template-columns:repeat(2,1fr)}
  .gf-bars li{grid-template-columns:1fr}
  .gf-row summary{grid-template-columns:1fr 28px;grid-template-areas:"thumb thumb" "title chev" "cells cells"}
  .gf-thumb{width:100%;aspect-ratio:16/9}
  .gf-panel dl{grid-template-columns:1fr;gap:2px}
  .gf-panel dt{margin-top:8px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.gf *,.gf *::before,.gf *::after{transition:none!important;animation:none!important}}

/* Balkenlängen im Preisvergleich */
.gf-bars .t i.gf-w26{width:26%}
.gf-bars .t i.gf-w27{width:27%}
.gf-bars .t i.gf-w39{width:39%}
.gf-bars .t i.gf-w40{width:40%}
.gf-bars .t i.gf-w43{width:43%}
.gf-bars .t i.gf-w67{width:67%}
.gf-bars .t i.gf-w74{width:74%}
.gf-bars .t i.gf-w76{width:76%}
.gf-bars .t i.gf-w77{width:77%}
.gf-bars .t i.gf-w86{width:86%}
.gf-bars .t i.gf-w93{width:93%}

/* ---------- Sprungmarken (.jm) ---------- */
.jm{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 clamp(36px,5vw,56px)}
.jm-label{width:100%;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jm a{display:flex;flex-direction:column;gap:2px;padding:12px 20px 12px 18px;border:1.5px solid var(--line);border-left:4px solid var(--brick);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.jm a:hover{border-color:var(--brick);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(16,28,37,.5)}
.jm b{font:600 1.1rem/1.2 var(--serif)}
.jm small{font-size:.84rem;color:var(--muted)}
.k-content [id]{scroll-margin-top:calc(var(--head) + 20px)}

/* Trennlinie zwischen zwei Themen */
.k-divider{height:0;margin:clamp(48px,7vw,88px) 0;border:0;border-top:2px solid var(--line);position:relative;overflow:visible}
.k-divider::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--brick);box-shadow:0 0 0 6px var(--paper)}

/* ---------- Immobilienbewertung (.hb) ---------- */
.hb{container:hb / inline-size;max-width:1180px;margin-inline:auto;color:var(--ink)}
.hb h2{font-size:clamp(1.9rem,3.3vw + .7rem,3rem);margin-bottom:.35em}
.hb-intro{margin-bottom:clamp(24px,3.5vw,40px)}
.hb-lead{font-size:clamp(1.05rem,.6vw + .95rem,1.25rem);color:var(--ink-2);max-width:62ch;margin:0}

.hb-top{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(16px,2.5vw,28px);margin-bottom:clamp(16px,2.5vw,28px)}
.hb-photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand);box-shadow:var(--shadow);position:relative}
.hb-photo img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}
.hb-photo figcaption{position:absolute;left:16px;bottom:16px;padding:.45em 1em;border-radius:999px;background:rgba(16,28,37,.8);color:#fff;font-size:.8rem;font-weight:600}

.hb-value{display:flex;flex-direction:column;padding:clamp(24px,3vw,36px);border-radius:var(--r);background:var(--night);color:rgba(255,255,255,.86)}
.hb-value p{margin:0}
.hb-value__label{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hb-value__num{margin-top:.35em!important;font:600 clamp(2.2rem,3vw + 1rem,3.2rem)/1.05 var(--serif);color:#fff}
.hb-value__sub{margin-top:.4em!important;font-size:.95rem}
.hb-value dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem}
.hb-value dt{color:rgba(255,255,255,.62)}
.hb-value dd{margin:0;color:#fff;font-weight:600;text-align:right}
.hb-value__hint{margin-top:auto!important;padding-top:18px;font-size:.82rem;color:rgba(255,255,255,.62)}

.hb-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none}
.hb-facts li{display:flex;flex-direction:column;padding:18px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.hb-facts span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hb-facts b{margin-top:.3em;font:600 clamp(1.25rem,1vw + .95rem,1.55rem)/1.15 var(--serif);color:var(--brick-d)}
.hb-facts small{margin-top:.35em;font-size:.84rem;line-height:1.4;color:var(--ink-2)}
.hb-note{margin:20px 0 0;font-size:.85rem;color:var(--muted);max-width:90ch}

@container hb (max-width:820px){
  .hb-top{grid-template-columns:1fr}
  .hb-facts{grid-template-columns:repeat(3,1fr)}
}
@container hb (max-width:560px){
  .hb-facts{grid-template-columns:repeat(2,1fr)}
  .hb-facts li{padding:14px 16px}
}

/* ---------- Externe Vergleichsrechnung (.hb-calc) ---------- */
.hb-calc{margin-top:clamp(32px,4.5vw,52px);padding:clamp(22px,3.5vw,40px);border-radius:var(--r);background:var(--sand);border:1px solid var(--line)}
.hb-calc h3{font-size:clamp(1.35rem,1.2vw + 1rem,1.7rem);margin-bottom:.35em}
.hb-calc h4{margin:0 0 .7em;font:600 1.15rem/1.3 var(--serif);color:var(--ink)}
.hb-calc p{margin:0}
.hb-calc__intro{color:var(--ink-2);max-width:70ch;margin-bottom:24px!important}

.hb-trend{margin-bottom:22px}
.hb-trend__label{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px!important}
.hb-trend__bars{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.hb-trend__bars li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.hb-trend__bars .y{font-size:.92rem;font-weight:600;color:var(--ink)}
.hb-trend__bars .t{position:relative;height:32px;border-radius:999px;background:rgba(16,28,37,.07);overflow:hidden}
.hb-trend__bars .t i{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;border-radius:999px;background:var(--night);color:#fff;font:700 .9rem/1 var(--sans);font-style:normal;white-space:nowrap}
.hb-trend__bars li:last-child .t i{background:var(--brick)}
.hb-trend__bars .hb-w60{width:60%}
.hb-trend__bars .hb-w100{width:100%}
.hb-trend__delta{margin-top:6px!important;font-size:.95rem;color:var(--ink-2)}
.hb-trend__delta b{font:600 1.3rem/1 var(--serif);color:var(--brick-d);margin-right:.25em}

.hb-calc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hb-calc__card{display:flex;flex-direction:column;padding:20px 22px;border-radius:calc(var(--r) - 4px);background:#fff;border:1px solid var(--line)}
.hb-calc__step{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brick-d);margin-bottom:.4em!important}
.hb-calc__card dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0 0 16px;font-size:.92rem}
.hb-calc__card dt{color:var(--ink-2)}
.hb-calc__card dd{margin:0;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.hb-calc__result{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2)}
.hb-calc__result b{font:600 clamp(1.4rem,1vw + 1.1rem,1.75rem)/1.2 var(--serif);color:var(--brick-d)}

.hb-calc__limits{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--brick-t)}
.hb-calc__limits h4{font:700 .76rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brick-d)}
.hb-calc__limits ul{margin:0 0 .8em;padding-left:1.15em;font-size:.92rem;color:var(--ink-2)}
.hb-calc__limits li{margin-bottom:.35em}
.hb-calc__limits p{font-size:.92rem;font-weight:600;color:var(--ink)}
.hb-calc__source{margin-top:16px!important;font-size:.82rem;color:var(--muted)}
.hb-calc__source a{color:var(--brick-d)}

@container hb (max-width:820px){
  .hb-calc__grid{grid-template-columns:1fr}
}
@container hb (max-width:560px){
  .hb-trend__bars li{grid-template-columns:1fr;gap:4px}
  .hb-calc__card dl{grid-template-columns:1fr}
  .hb-calc__card dd{text-align:left}
}

/* ---------- Bodenrichtwert-Verlauf (.hb-brw) ---------- */
.hb-brw{margin:6px 0 26px;padding-top:22px;border-top:1px solid var(--line)}
.hb-cols{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;align-items:end;height:220px;margin:0;padding:0;list-style:none}
.hb-cols li{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;text-align:center}
.hb-cols .v{font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:6px;white-space:nowrap}
.hb-cols .b{display:block;border-radius:8px 8px 3px 3px;background:var(--night)}
.hb-cols .y{margin-top:8px;font-size:.8rem;color:var(--muted)}
.hb-cols .is-now .b{background:var(--brick)}
.hb-cols .is-now .v,.hb-cols .is-now .y{color:var(--brick-d)}
/* Balkenhöhe bezieht sich auf den Platz unter Wert und über Jahr */
.hb-cols li{--lbl:52px}
.hb-cols li .b{height:calc((100% - var(--lbl)) * var(--p))}
.hb-h47{--p:.47}.hb-h58{--p:.58}.hb-h63{--p:.63}.hb-h74{--p:.74}.hb-h79{--p:.79}.hb-h84{--p:.84}.hb-h89{--p:.89}.hb-h95{--p:.95}.hb-h100{--p:1}

.hb-calc__cmp{margin-top:10px!important;font-size:.84rem;color:var(--muted)}

@container hb (max-width:560px){
  .hb-cols{grid-template-columns:1fr;height:auto;gap:6px}
  .hb-cols li{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:10px;height:auto;text-align:left}
  .hb-cols .y{order:1;margin:0}
  .hb-cols .b{order:2;height:14px!important;max-height:none;width:calc(100% * var(--p));border-radius:999px}
  .hb-cols .v{order:3;margin:0;text-align:right}
}

/* Vergleichsangebote im Bewertungsbereich (nutzt das Layout von .gf) */
.hb-offers{margin-top:clamp(36px,5vw,56px)}

/* Kurzquellen unter Grafiken und nummerierte Quellenliste */
.hb-src{margin-top:4px!important;font-size:.8rem;color:var(--muted)}
.hb-src a{color:var(--brick-d);text-decoration:none;font-weight:700}
.hb-src a:hover{text-decoration:underline}
ol.hb-calc__source{margin:16px 0 0;padding-left:1.8em;list-style:none;counter-reset:q}
ol.hb-calc__source li{counter-increment:q;position:relative;margin-bottom:.3em}
ol.hb-calc__source li::before{content:"[" counter(q) "]";position:absolute;left:-1.8em;font-weight:700;color:var(--brick-d)}
ol.hb-calc__source li:target{background:var(--brick-t);border-radius:6px}
ol.hb-calc__source + .hb-calc__source{margin-top:4px!important}

/* Index-Grafik Gutachterausschuss (10 Jahre) */
.hb-h48{--p:.48}.hb-h53{--p:.53}.hb-h66{--p:.66}.hb-h80{--p:.80}.hb-h82{--p:.82}.hb-h83{--p:.83}.hb-h88{--p:.88}.hb-h93{--p:.93}
.hb-trend__cmp{margin-top:4px!important;font-size:.9rem;color:var(--ink-2)}
@container hb (max-width:560px){
}

/* ---------- Balken-Animation beim Hineinscrollen ----------
   .reveal wird vom Website-Skript (assets/js/main.js) beim Sichtbarwerden mit .in markiert. */
.js .hb-anim .hb-trend__bars .t i{transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .hb-anim .hb-trend__bars li:nth-child(2) .t i{transition-delay:.25s}
.js .hb-anim.in .hb-trend__bars .t i{transform:none}

.js .hb-anim .hb-cols .b{transform:scaleY(0);transform-origin:center bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js .hb-anim .hb-cols .v{opacity:0;transition:opacity .4s ease}
.js .hb-anim.in .hb-cols .b{transform:none}
.js .hb-anim.in .hb-cols .v{opacity:1}
.js .hb-anim .hb-cols li:nth-child(1) .b{transition-delay:0.00s}.js .hb-anim .hb-cols li:nth-child(1) .v{transition-delay:0.50s}
.js .hb-anim .hb-cols li:nth-child(2) .b{transition-delay:0.07s}.js .hb-anim .hb-cols li:nth-child(2) .v{transition-delay:0.57s}
.js .hb-anim .hb-cols li:nth-child(3) .b{transition-delay:0.14s}.js .hb-anim .hb-cols li:nth-child(3) .v{transition-delay:0.64s}
.js .hb-anim .hb-cols li:nth-child(4) .b{transition-delay:0.21s}.js .hb-anim .hb-cols li:nth-child(4) .v{transition-delay:0.71s}
.js .hb-anim .hb-cols li:nth-child(5) .b{transition-delay:0.28s}.js .hb-anim .hb-cols li:nth-child(5) .v{transition-delay:0.78s}
.js .hb-anim .hb-cols li:nth-child(6) .b{transition-delay:0.35s}.js .hb-anim .hb-cols li:nth-child(6) .v{transition-delay:0.85s}
.js .hb-anim .hb-cols li:nth-child(7) .b{transition-delay:0.42s}.js .hb-anim .hb-cols li:nth-child(7) .v{transition-delay:0.92s}
.js .hb-anim .hb-cols li:nth-child(8) .b{transition-delay:0.49s}.js .hb-anim .hb-cols li:nth-child(8) .v{transition-delay:0.99s}
.js .hb-anim .hb-cols li:nth-child(9) .b{transition-delay:0.56s}.js .hb-anim .hb-cols li:nth-child(9) .v{transition-delay:1.06s}
.js .hb-anim .hb-cols li:nth-child(10) .b{transition-delay:0.63s}.js .hb-anim .hb-cols li:nth-child(10) .v{transition-delay:1.13s}
.js .hb-anim .hb-cols li:nth-child(11) .b{transition-delay:0.70s}.js .hb-anim .hb-cols li:nth-child(11) .v{transition-delay:1.20s}
@container hb (max-width:560px){
  .js .hb-anim .hb-cols .b{transform:scaleX(0);transform-origin:left center}
  .js .hb-anim.in .hb-cols .b{transform:none}
}

/* Balken-Animation „Quadratmeterpreise im Vergleich“ (Gewerbeflächen) */
.js .gf-anim .gf-bars .t i{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .gf-anim.in .gf-bars .t i{transform:none}
.js .gf-anim .gf-bars li:nth-child(1) .t i{transition-delay:0.00s}
.js .gf-anim .gf-bars li:nth-child(2) .t i{transition-delay:0.08s}
.js .gf-anim .gf-bars li:nth-child(3) .t i{transition-delay:0.16s}
.js .gf-anim .gf-bars li:nth-child(4) .t i{transition-delay:0.24s}
.js .gf-anim .gf-bars li:nth-child(5) .t i{transition-delay:0.32s}
.js .gf-anim .gf-bars li:nth-child(6) .t i{transition-delay:0.40s}
.js .gf-anim .gf-bars li:nth-child(7) .t i{transition-delay:0.48s}
.js .gf-anim .gf-bars li:nth-child(8) .t i{transition-delay:0.56s}
.js .gf-anim .gf-bars li:nth-child(9) .t i{transition-delay:0.64s}
.js .gf-anim .gf-bars li:nth-child(10) .t i{transition-delay:0.72s}
.js .gf-anim .gf-bars li:nth-child(11) .t i{transition-delay:0.80s}