/* ImmoSonja, Stil angelehnt an donauimmo.at (Blau #077FBC, Roboto Light für Überschriften, Open Sans für Text,
   kantige Formen), mit mehr Luft und Sonjas warmem Ton. Schriften selbst gehostet (Open Sans, Roboto: Open-Source-Lizenzen). */
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:300 800; font-display:swap; src:url("fonts/OpenSans.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:italic; font-weight:300 800; font-display:swap; src:url("fonts/OpenSans-Italic.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/Roboto.woff2") format("woff2"); }

:root {
  --blau:#077fbc; --blau-dunkel:#066ea3; --blau-hell:#72b6d9; --blau-zart:#eaf4fa;
  --tinte:#484848; --grau:#777777; --hell:#f8f9fa; --linie:#dddddd; --weiss:#ffffff;
  --radius:4px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--weiss); color:var(--tinte); font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
       font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--blau); }
h1,h2,h3 { font-family:Roboto,"Helvetica Neue",Arial,sans-serif; font-weight:300; color:var(--tinte); line-height:1.2; margin:0 0 .5em; }
h1 { font-size:clamp(2rem,5.5vw,3rem); }
h2 { font-size:clamp(1.7rem,4.5vw,2.25rem); text-transform:uppercase; letter-spacing:.02em; }
h2::after { content:""; display:block; width:56px; height:3px; background:var(--blau); margin-top:14px; }
h3 { font-size:1.35rem; font-weight:400; }
p { margin:0 0 1em; }
strong { font-weight:600; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.marke { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blau); font-weight:600; }
.marke a { color:inherit; text-decoration:none; }
.schmal { max-width:42em; }

/* header */
header { padding:18px 0; border-bottom:1px solid var(--linie); background:var(--weiss); }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
header .logo { font-family:Roboto,sans-serif; font-weight:500; font-size:1.25rem; color:var(--blau); text-decoration:none; letter-spacing:.01em; display:inline-flex; align-items:center; gap:10px; }
header .logo b { display:inline-grid; place-items:center; width:30px; height:30px; background:var(--blau); color:#fff; font-weight:700; border-radius:var(--radius); font-size:1rem; }
header .logo small { font-family:"Open Sans",sans-serif; font-weight:400; font-size:.78rem; color:var(--grau); letter-spacing:0; }
header nav a { color:var(--grau); text-decoration:none; font-size:.9rem; margin-left:24px; text-transform:uppercase; letter-spacing:.06em; }
header nav a:hover { color:var(--blau); }

/* hero */
.hero { background:linear-gradient(180deg,var(--hell) 0%, var(--weiss) 100%); }
.hero .wrap { display:grid; grid-template-columns:1fr; gap:34px; align-items:center; padding-top:40px; padding-bottom:56px; }
@media (min-width:820px) { .hero .wrap { grid-template-columns:5fr 6fr; gap:60px; } }
.foto { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 14px 40px rgba(7,127,188,.18); aspect-ratio:1/1; background:var(--hell); }
.foto img { width:100%; height:100%; object-fit:cover; display:block; }
.foto .ki { position:absolute; right:12px; bottom:12px; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#fff;
            background:rgba(7,127,188,.85); padding:5px 10px; border-radius:var(--radius); }
.hero h1 { color:var(--tinte); }
.hero h1 em { font-style:normal; color:var(--blau); font-weight:400; }
.hero .unter { font-size:1.15rem; color:var(--grau); max-width:34em; }
.autor { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blau); font-weight:600; margin:18px 0 26px; }

/* CTA-Kasten im Hero (Donau-Blau) */
.cta { background:var(--blau); color:#fff; border-radius:var(--radius); padding:26px 28px 24px; box-shadow:0 12px 36px rgba(7,127,188,.3); }
.cta h3 { color:#fff; margin-bottom:6px; font-weight:400; }
.cta p { opacity:.95; font-size:1rem; margin-bottom:18px; }
.cta .knoepfe { display:flex; gap:12px; flex-wrap:wrap; }
.knopf { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; border-radius:var(--radius); padding:13px 22px;
         font-size:1rem; transition:background .15s, transform .15s; white-space:nowrap; border:0; cursor:pointer; font-family:inherit; }
.knopf:hover { transform:translateY(-1px); }
.cta .knopf { background:#fff; color:var(--blau-dunkel); }
.cta .knopf:hover { background:var(--blau-zart); }
.knopf.blau { background:var(--blau); color:#fff; }
.knopf.blau:hover { background:var(--blau-dunkel); }
.knopf svg { width:20px; height:20px; flex:none; }

/* sections */
section { padding:64px 0; }
section.hell { background:var(--hell); }
.karten { display:grid; grid-template-columns:1fr; gap:26px; margin-top:34px; }
@media (min-width:700px) { .karten { grid-template-columns:1fr 1fr; } }
.karte { background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:26px; display:grid; grid-template-columns:110px 1fr; gap:22px; align-items:start; }
@media (max-width:420px) { .karte { grid-template-columns:1fr; } }
.karte img { width:110px; height:auto; border-radius:2px; box-shadow:0 6px 18px rgba(0,0,0,.18); display:block; }
.karte h3 { margin-bottom:6px; color:var(--blau); }
.karte .meta { font-size:.85rem; color:var(--grau); margin-bottom:14px; }
.karte p { font-size:.98rem; }
.karte .knopf { font-size:.95rem; padding:11px 18px; }

.ueber .wrap { max-width:780px; }
.ueber .lead { font-size:1.25rem; font-weight:300; color:var(--tinte); font-family:Roboto,sans-serif; line-height:1.45; }
.ueber .unterschrift { font-family:Roboto,sans-serif; font-weight:300; font-size:1.6rem; color:var(--blau); margin-top:22px; }
.sozial { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.sozial a { text-decoration:none; color:var(--tinte); background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:9px 16px; font-size:.92rem; }
.sozial a:hover { border-color:var(--blau); color:var(--blau); }

/* Anfrage-Formular (Blau-Block wie Donaus „Extra-Schritt“-Band) */
.anfrage { background:var(--blau); color:#fff; }
.anfrage .wrap { display:grid; grid-template-columns:1fr; gap:36px; align-items:start; }
@media (min-width:860px) { .anfrage .wrap { grid-template-columns:5fr 6fr; gap:60px; } }
.anfrage .marke, .anfrage h2 { color:#fff; }
.anfrage h2::after { background:rgba(255,255,255,.7); }
.anfrage p { opacity:.95; }
.anfrage .direkt { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.anfrage .direkt a { color:#fff; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:10px; font-size:1.05rem; }
.anfrage .direkt svg { width:20px; height:20px; }
form.formular { background:var(--weiss); color:var(--tinte); border-radius:var(--radius); padding:28px; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.formular .zeile { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
@media (min-width:560px) { .formular .zeile.zwei { grid-template-columns:1fr 1fr; } }
.formular label { display:block; font-size:.86rem; font-weight:600; margin-bottom:6px; color:var(--tinte); }
.formular label span { font-weight:400; color:var(--grau); }
.formular input, .formular select, .formular textarea { width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--linie);
  border-radius:var(--radius); background:var(--weiss); color:var(--tinte); }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau); }
.formular textarea { min-height:96px; resize:vertical; }
.formular .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.formular .senden { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.formular .senden .knopf { padding:14px 26px; }
.formular .zusage { font-size:.92rem; color:var(--grau); margin:0; }
.formular .hinweis { font-size:.82rem; color:var(--grau); margin:18px 0 0; line-height:1.5; }

/* Unterseiten */
.unterseite { padding:28px 0 60px; }
.unterseite .wrap { max-width:820px; }
.unterseite h1 { font-size:clamp(1.8rem,5vw,2.5rem); margin-bottom:.6em; }
.zurueck { display:inline-block; margin-bottom:28px; font-size:.95rem; text-decoration:none; }
.recht { font-size:.95rem; color:var(--grau); }
.recht h2 { font-size:1.3rem; color:var(--tinte); margin-top:1.8em; text-transform:none; letter-spacing:0; }
.recht h2::after { display:none; }
.recht h3 { font-family:inherit; font-weight:600; color:var(--tinte); font-size:1rem; margin:1.6em 0 .4em; }
.recht p, .recht li { margin-bottom:.8em; }
.recht ul { padding-left:1.2em; }
.recht strong { color:var(--tinte); }
.offen { background:#fff7e6; border-left:3px solid #e0a94a; padding:8px 12px; color:#6a4b12; font-size:.88rem; }
.danke { text-align:center; padding:70px 0 90px; }
.danke .wrap { max-width:640px; }

footer { padding:34px 0 44px; font-size:.85rem; color:var(--grau); background:var(--hell); border-top:1px solid var(--linie); }
footer .wrap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
footer a { color:var(--grau); text-decoration:none; margin-right:18px; }
footer a:hover { color:var(--blau); }

/* Renditerechner */
.rechner-kopf { padding:48px 0 10px; background:linear-gradient(180deg,var(--hell) 0%, var(--weiss) 100%); }
.rechner-kopf h1 { margin-bottom:.4em; }
.rechner-kopf .unter { font-size:1.1rem; color:var(--grau); }
.rechner { padding:30px 0 64px; }
.rechner-grid { display:grid; grid-template-columns:1fr; gap:30px; align-items:start; }
@media (min-width:900px) { .rechner-grid { grid-template-columns:6fr 7fr; gap:40px; } }
.rechner h2 { font-size:1.4rem; text-transform:none; letter-spacing:0; margin-bottom:18px; }
.rechner h2::after { width:40px; margin-top:10px; }
.eingaben { background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:26px; }
.eingaben .zeile { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
@media (min-width:560px) { .eingaben .zeile.zwei { grid-template-columns:1fr 1fr; } .eingaben .zeile.drei { grid-template-columns:1fr 1fr 1fr; } }
.eingaben label { display:block; font-size:.86rem; font-weight:600; margin-bottom:6px; }
.eingaben label span { font-weight:400; color:var(--grau); }
.eingaben input[type=number] { width:100%; font:inherit; font-size:1.05rem; padding:11px 13px; border:1px solid var(--linie); border-radius:var(--radius); color:var(--tinte); }
.eingaben input:focus { outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau); }
.eingaben .schalter { display:flex; align-items:flex-end; gap:12px; padding-bottom:10px; }
.eingaben .schalter label { margin:0; }
.eingaben .schalter input { width:22px; height:22px; accent-color:var(--blau); }
.eingaben details { border-top:1px solid var(--linie); padding-top:14px; margin-top:4px; }
.eingaben summary { cursor:pointer; font-weight:600; font-size:.95rem; color:var(--blau); margin-bottom:14px; }
.klein { font-size:.85rem; color:var(--grau); }
.ergebnis { background:var(--hell); border-radius:var(--radius); padding:26px; }
.kacheln { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kachel { background:var(--weiss); border-radius:var(--radius); padding:16px 18px; border-top:3px solid var(--blau); }
.kachel .zahl { font-family:Roboto,sans-serif; font-weight:300; font-size:2rem; line-height:1.1; color:var(--tinte); }
.kachel .zahl.plus { color:#1f8a4c; }
.kachel .zahl.minus { color:#b3261e; }
.kachel .label { font-size:.86rem; font-weight:600; margin-top:6px; }
.kachel .label small { display:block; font-weight:400; color:var(--grau); font-size:.76rem; line-height:1.35; margin-top:2px; }
.einordnung { background:var(--blau); color:#fff; border-radius:var(--radius); padding:16px 18px; margin:18px 0 20px; font-size:1rem; line-height:1.5; }
.balken .reihe { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:12px; font-size:.86rem; color:var(--grau); margin-bottom:8px; }
@media (max-width:480px) { .balken .reihe { grid-template-columns:120px 1fr; } }
.balken .bar { height:12px; background:var(--weiss); border-radius:6px; overflow:hidden; }
.balken .bar i { display:block; height:100%; border-radius:6px; transition:width .25s; }
.balken .miete { background:#1f8a4c; } .balken .rate { background:var(--blau); } .balken .kosten { background:var(--blau-hell); }
.details { display:grid; grid-template-columns:1fr auto; gap:6px 16px; margin:22px 0 0; font-size:.92rem; border-top:1px solid var(--linie); padding-top:16px; }
.details dt { color:var(--grau); } .details dd { margin:0; text-align:right; font-weight:600; }
.cta-klein { margin-top:24px; background:var(--weiss); border-radius:var(--radius); padding:20px; border:1px solid var(--linie); }
.cta-klein h3 { margin-bottom:4px; }
.cta-klein p { color:var(--grau); font-size:.95rem; }
.cta-klein .knopf { margin:4px 8px 4px 0; }
.knopf.hell { background:var(--blau-zart); color:var(--blau-dunkel); }
.knopf.hell:hover { background:#d9ebf5; }
.rechner-info .spalten { display:grid; grid-template-columns:1fr; gap:30px; margin-top:24px; }
@media (min-width:760px) { .rechner-info .spalten { grid-template-columns:1fr 1fr; } }
.rechner-info ul { padding-left:1.2em; }
.rechner-info li { margin-bottom:.5em; }

/* Teaser-Band auf der Startseite */
.band { margin-top:30px; background:var(--blau); color:#fff; border-radius:var(--radius); padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.band h3 { color:#fff; margin:0 0 4px; font-weight:400; }
.band p { margin:0; opacity:.95; font-size:.98rem; }
.band .knopf { background:#fff; color:var(--blau-dunkel); }
.band .knopf:hover { background:var(--blau-zart); }

/* Rechner-Familie: Tabellen, Checkliste, Hub */
.tabelle { width:100%; border-collapse:collapse; margin:18px 0 6px; font-size:.95rem; }
.tabelle td { padding:9px 4px; border-bottom:1px solid var(--linie); }
.tabelle td.r { text-align:right; font-weight:600; white-space:nowrap; }
.tabelle tr.aktiv td { color:var(--blau); font-weight:600; }
.kacheln.eins { grid-template-columns:1fr; }
.eingaben select { width:100%; font:inherit; font-size:1rem; padding:11px 13px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--weiss); color:var(--tinte); }
.eingaben .zeile.zwei > div:empty { display:none; }
@media (max-width:559px) { .eingaben .zeile.zwei > div:empty { display:none; } }
.typwahl .radio { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; border:1px solid var(--linie); border-radius:var(--radius); padding:12px 14px; cursor:pointer; }
.typwahl .radio input { accent-color:var(--blau); width:20px; height:20px; }
.eingaben h3 { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); font-weight:600; margin:22px 0 8px; }
ul.check-liste { list-style:none; padding:0; margin:0; }
ul.check-liste li { border-bottom:1px solid var(--linie); }
ul.check-liste label { display:grid; grid-template-columns:24px 1fr; gap:6px 12px; padding:12px 0; cursor:pointer; align-items:start; }
ul.check-liste input { width:20px; height:20px; accent-color:var(--blau); margin-top:2px; grid-row:span 2; }
ul.check-liste .titel { font-weight:600; font-size:.98rem; }
ul.check-liste small { color:var(--grau); font-size:.85rem; line-height:1.4; }
ul.check-liste li.ok .titel { color:var(--grau); text-decoration:line-through; }
.hub { padding:30px 0 64px; }
.hub-karten { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px) { .hub-karten { grid-template-columns:1fr 1fr; } }
@media (min-width:980px) { .hub-karten { grid-template-columns:1fr 1fr 1fr; } }
.hub-karte { display:block; background:var(--weiss); border:1px solid var(--linie); border-top:3px solid var(--blau); border-radius:var(--radius); padding:22px 22px 18px; text-decoration:none; color:var(--tinte); transition:box-shadow .15s, transform .15s; }
.hub-karte:hover { box-shadow:0 12px 32px rgba(7,127,188,.16); transform:translateY(-2px); }
.hub-karte h3 { color:var(--blau); margin:6px 0 8px; font-size:1.25rem; }
.hub-karte p { font-size:.95rem; color:var(--grau); margin-bottom:12px; }
.hub-karte .weiter { font-weight:600; font-size:.92rem; color:var(--blau); }
@media print {
  header, footer, .rechner-kopf .marke, .ergebnis, .rechner-info, .klein a { display:none !important; }
  .rechner-grid { display:block; }
  .eingaben { border:0; padding:0; }
  body { font-size:11pt; }
  ul.check-liste label { break-inside:avoid; }
}