@font-face {
  font-family: "Schibsted Ersatz"; font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 105%; ascent-override: 93.3%; descent-override: 24.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Ersatz"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold");
  size-adjust: 100.2%; ascent-override: 97.8%; descent-override: 25.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Ersatz"; font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold");
  size-adjust: 102.1%; ascent-override: 96%; descent-override: 25.5%; line-gap-override: 0%;
}

:root {
  --verhaeltnis: 1.38;
  --kopf-bedarf: calc(578px + var(--rand)) !important;   
  --takt: cubic-bezier(.33, 1, .68, 1);
  --dauer-naht: .7s;
  --einstieg-fuge: 64px;
}
html { transition: --naht var(--dauer-naht) var(--takt); }
.kopf { transition: --naht var(--dauer-naht) var(--takt); }
.ps-knopf { transition: transform var(--dauer-naht) var(--takt), background-color var(--dauer-naht) var(--takt); }

.einstieg { position: relative; isolation: isolate; }
.naht-flaeche { z-index: -1; }

.dach { font-size: var(--s-text); font-weight: 600; line-height: 1.3; color: var(--blau); }
.unterzeile { font-size: var(--s-gross); font-weight: 500; line-height: 1.3; letter-spacing: -.012em; color: var(--ton-titel); text-wrap: balance; }
.lead { margin-top: 16px; font-size: var(--s-text); line-height: 1.6; color: var(--ton-text); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.vertrauen { position: relative; }
.belege { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; }
.belege li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 13px 0 12px; border-top: 1px solid var(--linie); }
.belege li:first-child { border-top: 2px solid var(--dunkel); }
.beleg-wert { font-size: var(--s-gross); font-weight: 700; line-height: 1.15; letter-spacing: -.012em; color: var(--dunkel); white-space: nowrap; }
.beleg-text { font-size: var(--s-klein); line-height: 1.4; color: var(--grau); }
.stern { display: inline-block; width: .72em; height: .72em; fill: var(--gold); vertical-align: -.02em; }

.ps-zeile { position: relative; }
.ps-zeile > * { position: absolute; }
.ps-schalter { left: calc(var(--band-naht) - 42px); }
.ps-label[data-setze="false"] { right: calc(100% - var(--band-naht) + 54px); }
.ps-label[data-setze="true"] { left: calc(var(--band-naht) + 54px); }
.ps-label.auf-hell { background: var(--weiss); }
.ps-schalter.fokus-doppelt:focus-visible { outline-offset: 4px; box-shadow: inset 0 0 0 2px var(--hellblau), 0 0 0 4px var(--dunkel); }


.ps-label[data-setze="true"] { color: var(--ton-titel); font-weight: 700; }
@media (min-width: 360px) { .ps-label[data-setze="true"] { font-size: calc(var(--s-text) * 1.12); } }
.ps-schalter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 4px rgb(140 188 234 / .45), 0 0 22px 8px rgb(140 188 234 / .45);
  transition: opacity .4s;
}
.ps-label[data-setze="true"]::after {
  content: "← Antippen"; content: "← Antippen" / "";
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 999px;
  background: var(--hellblau); color: var(--dunkel);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.ps-benutzt .ps-schalter::before { opacity: 0; }
.ps-benutzt .ps-label[data-setze="true"]::after { opacity: 0; visibility: hidden; }
@media (max-width: 959px) {
  .ps-label[data-setze="true"]::after {
    content: "↑ Antippen"; content: "↑ Antippen" / "";
    left: -102px; top: calc(100% + 6px); width: 96px; box-sizing: border-box; transform: none;
    padding: 5px 0; text-align: center; font-size: 13px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ps-schalter::before { animation: ps-leuchten 2.4s ease-in-out infinite; }
  .ps-benutzt .ps-schalter::before { animation: none; }
  @keyframes ps-leuchten { 50% { opacity: .3; } }
}

#ho-titel { display: block; min-height: 1.3em; font-size: var(--s-text); font-weight: 500; line-height: 1.3; color: var(--ton-text); text-wrap: balance; }
#ho-wert { display: block; min-height: .9em; margin-top: 8px; }
@media (max-width: 359px) { #ho-titel { min-height: 2.6em; } }   
#ho-unter { display: block; min-height: 3.1em; margin-top: 12px; max-width: 30em; font-size: var(--s-text); line-height: 1.55; color: var(--ton-text); text-wrap: pretty; }
.ergebnis-folge { margin-top: 30px; }
#ho-pkv { font-size: var(--s-text); line-height: 1.55; color: var(--ton-text); }
.immo-huelle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dauer-naht) var(--takt); }
.mit-uns .immo-huelle { grid-template-rows: 1fr; }
#ho-immo { min-height: 0; overflow: hidden; padding-bottom: 12px; font-size: var(--s-text); line-height: 1.55; color: var(--ton-text); }
#ho-immo[hidden] { display: block !important; visibility: hidden; }

html:not(.js) .ps-zeile, html:not(.js) .ergebnis > :not(.annahmen), html:not(.js) .immo-huelle { display: none; }

.kurve-bild { display: block; overflow: visible; }
.kurve-bild > g[clip-path] { transform-box: fill-box; transform-origin: 50% 100%; }
.kurve-bild .d-flaeche-mit { transition: fill-opacity var(--dauer-naht) var(--takt); }
.kurve-bild .d-linie { transition: opacity .3s, stroke-width .3s; }
.d-name { font-size: var(--s-klein); font-weight: 500; fill: var(--leise); }
.d-name-ohne { fill: var(--hell-text); }
.ist-mit .d-name-mit, .kurve-bild:not(.ist-mit) .d-name-ohne { fill: var(--weiss); }

#h-potenzial { display: contents; }
.rechner-titel { font-size: var(--s-text); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--hellblau); }
.hinweis { font-size: var(--s-text); line-height: 1.55; color: var(--ton-text); }
.felder { display: grid; gap: 24px; margin-top: 26px; }
.regler-kopf { margin-bottom: 2px; }
.feld-titel { display: block; margin-bottom: 10px; }
.annahmen { margin-top: 20px; max-width: 34em; color: var(--ton-leise); }
.zusammen { white-space: nowrap; }   
.rechner-unten > .knopf { margin-top: 30px; }

.fuss { position: relative; background: var(--nacht); color: var(--hell-text); }
.fuss-marke img { width: 136px; height: 48px; }
.fuss-marke p { margin-top: 20px; }
.fuss h2 { margin-bottom: 10px; font-size: var(--s-klein); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--leise); }
.fuss p { font-size: var(--s-klein); line-height: 1.75; }
.fuss a { padding-block: max(0px, calc((44px - 1.24em) / 2)); }
.fuss-unten { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); color: var(--leise); }


@media (min-width: 1280px) {
  :root { --s-display: clamp(52px, calc(24px + 4.4vw), 92px); }
  .einstieg {
    --s-zahl: clamp(44px, calc(22px + 2.9vw), 64px);
    --luft-w: 40px;                  
    --luft-d: var(--einstieg-fuge);  
    --oben-luft: clamp(20px, 4vh, 44px);
    --schalter-luft: clamp(12px, 2vh, 20px);
    --naht-raster: max(var(--marke-ende), calc(100% - (100% - var(--naht-ohne)) * 1.38));
    --zahl-luft: 52px;               

    --kurve-min: calc(var(--zahl-luft) + 1.3 * var(--s-text) + 8px + .9 * var(--s-zahl) + 14px + 3.1 * var(--s-text) + 16px + 44px + 40px);
    --kurve-hoehe: clamp(var(--kurve-min), calc(100svh - var(--kopf-hoehe) - var(--oben-luft)
        - (var(--s-text) * 1.3 + 14px)                 
        - 1.84 * var(--s-display)                      
        - (44px + 2 * var(--schalter-luft))            
        - (3 * 1.5 * var(--s-klein) + 14px)            
        - 10px), 560px);
    display: grid;
    grid-template-columns:
      [voll-start] var(--rand)
      [weiss-start] minmax(0, calc(var(--naht-raster) - var(--rand) - var(--luft-w)))
      [weiss-ende] calc(var(--naht-ohne) - var(--naht-raster) + var(--luft-w) + var(--luft-d))
      [dunkel-start] minmax(0, 1fr)
      [dunkel-ende] var(--rand) [voll-ende];
    grid-template-rows: auto auto auto auto auto;
    align-items: start;
    padding: calc(var(--kopf-hoehe) + var(--oben-luft)) 0 104px;
    background: var(--weiss);
  }
  .dach { grid-column: weiss-start / dunkel-start; grid-row: 1; margin-bottom: 14px; }
  .rechner-titel { grid-column: dunkel-start / dunkel-ende; grid-row: 1; margin-bottom: 14px; background: var(--dunkel); }

  .einstieg h1 { grid-column: voll-start / voll-ende; grid-row: 2; display: grid; grid-template-columns: subgrid; color: var(--weiss); }
  .h1-ohne, .h1-mit { grid-row: 1; }
  .h1-ohne {
    grid-column: voll-start / voll-ende;
    padding: 0 calc(100% - var(--rand) - 5.2em) 0 var(--rand);
    color: var(--dunkel);
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .h1-ohne {
      background: linear-gradient(90deg, var(--dunkel) var(--naht), var(--weiss) var(--naht));
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .h1-ohne::selection { color: var(--dunkel); }
  }
  .h1-mit { grid-column: dunkel-start / dunkel-ende; max-width: 5.2em; }

  .einstieg-weiss {
    grid-column: weiss-start / weiss-ende; grid-row: 4 / 6;
    position: sticky; top: calc(var(--kopf-hoehe) + 32px); z-index: 2;
    padding-bottom: 8px;
    background: var(--weiss);
  }
  .knoepfe { display: grid; grid-template-columns: max-content; }
  .vertrauen { margin-top: 44px; }

  .ps-zeile { grid-column: voll-start / voll-ende; grid-row: 3; height: 44px; margin: var(--schalter-luft) 0; pointer-events: none; --band-naht: var(--naht); }
  .ps-zeile > * { top: 0; pointer-events: auto; }
  .ergebnis { grid-row: 4; }
  .rechner-unten { grid-row: 5; }
  .ergebnis, .rechner-unten { grid-column: dunkel-start / dunkel-ende; background: var(--dunkel); }   

  .zahl-rahmen {
    position: absolute; z-index: 1;
    left: calc(var(--naht) + var(--luft-d));
    width: calc((100% - var(--naht-ohne) - var(--luft-d) - var(--rand)) * .72);
    margin-top: var(--zahl-luft);
    pointer-events: none;
  }
  .kurve { height: var(--kurve-hoehe); }
  .kurve-bild {
    position: absolute; left: var(--naht);
    width: calc(100% - var(--naht)); height: var(--kurve-hoehe);
    --d-links: var(--luft-d); --d-rechts: calc(var(--rand) + 72px); --d-oben: 34px; --d-unten: 40px;
  }
  #ho-unter { margin-top: 14px; }
  .annahmen { margin-top: 14px; }
  .rechner-unten { padding-top: 36px; }
  .rechner-unten > :not(.felder):not(.knopf) { max-width: 34em; }
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .feld:nth-child(n + 3) { grid-column: 1 / -1; }

  .fuss {
    display: grid;
    grid-template-columns:
      [voll-start] var(--rand)
      [weiss-start] minmax(0, calc(var(--naht-mit) - var(--rand) - 40px))
      [weiss-ende] calc(var(--naht-ohne) - var(--naht-mit) + 40px + var(--rand))
      [dunkel-start] minmax(0, 1fr) minmax(0, 1fr)
      [dunkel-ende] var(--rand) [voll-ende];
    column-gap: 0;
    padding: 80px 0 40px;
  }
  .fuss-marke { grid-column: weiss-start / weiss-ende; }
  .fuss-spalte:nth-of-type(2) { grid-column: 4; }
  .fuss-spalte:nth-of-type(3) { grid-column: 5; }
  .fuss-unten { grid-column: weiss-start / dunkel-ende; }
}
@media (min-width: 1760px) {
  .knoepfe { grid-auto-flow: column; grid-auto-columns: max-content; }
}
@media (min-width: 1280px) and (max-height: 760px) {
  .einstieg-weiss { position: relative; top: auto; }
  .einstieg { --oben-luft: 16px; --zahl-luft: 24px; }
  .dach, .rechner-titel { margin-bottom: 8px; }
}




@media (max-width: 1279px) {
  :root {
    --naht-basis: 100%;   
    --band-min: calc(var(--rand) + 86px + 54px);   
  }
  html.kopf-im-einstieg.naht-mit .kopf { --naht: max(var(--naht-mit), var(--band-min)); }
  .naht-flaeche { display: none; }
  .einstieg {
    display: grid;
    grid-template-columns: [voll-start] var(--rand) [inhalt-start] minmax(0, 1fr) [inhalt-ende] var(--rand) [voll-ende];
    padding: 0;
    background: var(--dunkel);
  }
  .einstieg > *, .rechner > *, .einstieg-weiss > * { grid-column: inhalt-start / inhalt-ende; }
  .dach { grid-column: voll-start / voll-ende; padding: calc(var(--kopf-hoehe) + 44px) var(--rand) 12px; background: var(--weiss); }
  .einstieg h1 { grid-column: voll-start / voll-ende; display: block; }
  .h1-ohne, .h1-mit { display: block; padding-inline: var(--rand); }
  .h1-ohne { padding-bottom: 28px; background: var(--weiss); color: var(--dunkel); }
  .h1-mit { padding-top: 28px; color: var(--weiss); }

  .rechner-titel { margin-top: 30px; }

  .ps-zeile { grid-column: voll-start / voll-ende; height: 72px; margin-top: 14px; --band-naht: max(var(--naht), var(--band-min)); }
  .ps-zeile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--band-naht); background: var(--weiss); }
  .ps-zeile > * { top: 14px; }

  .ergebnis { padding-top: 22px; }
  .zahl-rahmen { padding-bottom: 16px; }
  .kurve { margin-inline: calc(-1 * var(--rand)); height: clamp(240px, 38vw, 340px); }
  .kurve-bild { width: 100%; height: 100%; --d-links: var(--rand); --d-rechts: calc(var(--rand) + 106px); --d-oben: 30px; --d-unten: 40px; }   
  #ho-unter { max-width: 640px; }
  .annahmen { margin-top: 12px; max-width: 640px; }

  .einstieg-weiss { display: contents; }
  .einstieg-text {
    --ton-grund: var(--dunkel); --ton-titel: var(--weiss); --ton-text: var(--hell-text); --ton-leise: var(--leise);
    --ton-link: var(--hellblau); --ton-fokus: var(--hellblau); --ton-knopf: var(--weiss); --ton-knopf-text: var(--dunkel); --ton-knopf-hover: var(--hellblau);
    max-width: 640px; margin-top: 64px; padding: 40px 0 88px; border-top: 1px solid var(--linie-dunkel);
  }
  .vertrauen { grid-column: voll-start / voll-ende; order: 2; padding: 56px var(--rand) 64px; background: var(--weiss); }
  .belege { max-width: 640px; }

  .rechner-unten > :not(.felder) { max-width: 640px; }
  .rechner-unten { padding: 48px 0 0; }

  .fuss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding: 64px var(--rand) 36px; }
  .fuss-marke, .fuss-unten { grid-column: 1 / -1; }
  .fuss-unten { margin-top: 16px; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .ergebnis { padding-top: 30px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: 32px; align-items: start; }
  .zahl-rahmen { grid-column: 1; grid-row: 1; padding-top: 30px; padding-bottom: 0; }
  .annahmen { grid-column: 1; grid-row: 2; margin-top: 16px; }
  html:not(.js) .annahmen { grid-column: 1 / -1; max-width: 640px; }   
  .kurve { grid-column: 2; grid-row: 1 / 3; margin: 0 calc(-1 * var(--rand)) 0 0; height: clamp(220px, 23vw, 290px); }
  .kurve-bild { --d-links: 0px; }
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .belege { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); max-width: none; column-gap: 24px; }
  .belege li:nth-child(odd) { grid-column: 1 / 3; }
  .belege li:nth-child(even) { grid-column: 3 / 5; padding-left: 24px; }
  .belege li:nth-child(2) { border-top: 2px solid var(--dunkel); }
}
@media (max-width: 719px) {
  :root { --band-min: calc(var(--rand) + 74px + 52px); }
  .dach { padding-top: calc(var(--kopf-hoehe) + 28px); }
  .h1-ohne { padding-bottom: 24px; }
  .h1-mit { padding-top: 24px; }
  .knoepfe .knopf { width: 100%; }
  .rechner-titel { margin-top: 26px; }
  .ps-label { padding: 0 4px; }
  .ps-label[data-setze="false"] { right: calc(100% - var(--band-naht) + 52px); }
  .ps-label[data-setze="true"] { left: calc(var(--band-naht) + 52px); }
  .ps-label[data-setze="true"]::after { left: -100px; }
  .kurve { height: clamp(160px, 44vw, 180px); }
  .vertrauen { padding-top: 44px; }
  .ergebnis, .rechner-unten { display: contents; }
  .ergebnis > *, .rechner-unten > * { grid-column: inhalt-start / inhalt-ende; }
  .zahl-rahmen { margin-top: 30px; }   
  .rechner-unten > * { order: 1; }
  .annahmen { margin-top: 4px; }
  .rechner-unten > .knopf { order: 3; }
  .einstieg-text { order: 4; margin-top: 56px; padding-bottom: 72px; }
  .vertrauen { order: 5; }
  .hinweis { margin-top: 36px; }
  .belege { column-gap: 18px; }
  .annahmen, .beleg-text { font-size: var(--s-text); }
  .fuss { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
  .fuss p { font-size: var(--s-text); line-height: 1.6; }
}
@media (max-width: 379px) {
  .rechner-unten > .knopf { padding-inline: 12px; font-size: var(--s-klein); }
}
@media (max-width: 359px) {
  :root { --band-min: calc(var(--rand) + 66px + 50px); }
  .ps-label { padding: 0 2px; font-size: var(--s-klein); }
  .ps-label[data-setze="false"] { right: calc(100% - var(--band-naht) + 50px); }
  .ps-label[data-setze="true"] { left: calc(var(--band-naht) + 50px); }
  .ps-label[data-setze="true"]::after { left: -98px; }
}

@media (max-width: 900px) {
  :root { --kopf-bedarf: calc(184px + var(--rand)) !important; }
}
@media (max-width: 719px) {
  :root { --kopf-bedarf: calc(192px + var(--rand)) !important; }   
}
@media (max-width: 359px) {
  :root { --kopf-bedarf: 184px !important; }   
}

@media (max-width: 900px) {
  html:not(.js) .kopf { position: absolute; }
  html:not(.js) .kopf-dunkel { position: static; align-self: stretch; margin-left: auto; }
  html:not(.js) .menue-knopf { display: none; }
  html:not(.js) .menue {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    max-height: none; padding: 0 calc(var(--rand) - 8px); border: 0;
    visibility: visible; opacity: 1; transform: none;
  }
  html:not(.js) .menue a { padding: 14px 8px; border: 0; font: 500 var(--s-klein)/16px var(--schrift); }
  html:not(.js) .dach { padding-top: calc(var(--kopf-hoehe) + 88px + 28px); }
}

.d-gitter.bewegt { opacity: 0; transition: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .h1-ohne { animation: einstieg-runter .42s var(--kurve-raus) both; }
  .js .h1-mit { animation: einstieg-rauf .42s var(--kurve-raus) .06s both; }
  @keyframes einstieg-runter { from { opacity: .4; transform: translateY(-.15em); } }
  @keyframes einstieg-rauf { from { opacity: .4; transform: translateY(.15em); } }
  .js .zahl-rahmen, .js .einstieg-text, .js #ho-unter { animation: einstieg-da .3s ease-out .12s both; }

  .js .kurve-bild > g[clip-path] { animation: einstieg-wachsen .7s var(--takt) .2s both; }
  .js:not(.b-geladen) .kurve-bild > :is(.d-punkt, .d-wert, .d-name) { animation: einstieg-da .25s ease-out .75s both; }
  .d-gitter { transition: opacity .3s ease-out; }
  @keyframes einstieg-wachsen { from { transform: scaleY(0); } }
  @keyframes einstieg-da { from { opacity: 0; } }

  .js .vertrauen[data-zeige]:not(.wartet) { transition: opacity .6s var(--kurve-raus) .2s; }
  .js .vertrauen[data-zeige]:not(.da):not(.wartet) { opacity: 0; animation: belege-sicher 0s 3s forwards; }
  @keyframes belege-sicher { to { opacity: 1; } }
}