/* bungalowmaker.com — ein Stylesheet fuer alle Seiten. Mobil zuerst. */
:root {
  --ground: #F4F3EF; --card: #FBFAF7; --sand: #E9E6DF; --line: #D8D4CA;
  --ink: #1A1A1A; --ink-2: #3B4247; --muted: #565E64;
  --slate: #22313A; --slate-2: #1B272E; --on-slate: #E9E6DF; --on-slate-2: #B9C1C6;
  --accent: #F2B33D; --error: #A3261B;
  --display: 'Sora', system-ui, sans-serif; --body: 'Libre Franklin', system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--slate); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--slate); outline-offset: 2px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 18px; font-weight: 600; margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--pad); }
.eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 99; background: var(--accent); padding: 10px 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 2px; font: 600 16px/1.2 var(--body); text-decoration: none; cursor: pointer; border: 0; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; }
.btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--slate); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--ground); border-bottom: 1px solid var(--line); }
.kopf .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 700 20px var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.nav { display: none; gap: 22px; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; padding: 10px 0; }
.nav a[aria-current] { font-weight: 600; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.land { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.kopf .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.menue { position: relative; }
.menue summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border: 1px solid var(--line); border-radius: 2px; }
.menue summary::-webkit-details-marker { display: none; }
.menue-panel { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 8px 0; }
.menue-panel a { display: block; padding: 12px 20px; color: var(--ink); text-decoration: none; }
.kopf .btn-kopf { display: none; }
@media (min-width: 768px) {
  .kopf .btn-kopf { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav { display: flex; }
  .menue { display: none; }
}

/* Abschnitte */
.sec { padding-block: clamp(56px, 8vw, 120px); }
.sec-tight { padding-block: clamp(40px, 6vw, 80px); }
.dunkel { background: var(--slate); color: var(--on-slate); }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .muted { color: var(--on-slate-2); }
.dunkel .eyebrow { color: var(--accent); }
.sand { background: var(--sand); }
.karte { background: var(--card); border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; } .split-r { grid-template-columns: 1fr 1.15fr; } }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 40px; }
.kopfzeile p { margin: 0; max-width: 28em; }

/* Hero */
.hero { padding-block: clamp(32px, 7vw, 112px) clamp(56px, 6vw, 96px); }
.hero-text p.lead { margin: 24px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; max-width: 34em; }
.cta-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.einwand { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.fakten { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fakten dt { font-size: 13px; color: var(--muted); }
.fakten dd { margin: 0; font: 600 clamp(18px, 2vw, 22px) var(--display); }
.hero-bild { position: relative; margin: 0 calc(-1 * var(--pad)); }
.hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
.hero-bild figcaption { position: absolute; left: var(--pad); bottom: -24px; background: var(--slate); color: var(--on-slate); padding: 12px 16px; font-size: 14px; line-height: 1.4; }
.hero-bild figcaption strong { display: block; font: 600 17px var(--display); color: #fff; }
@media (min-width: 900px) { .hero-bild { margin: 0 calc(-1 * var(--pad)) 0 0; } .hero-bild figcaption { left: -32px; } }

/* Modellwahl */
.modellwahl { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .modellwahl { grid-template-columns: 1.3fr 1fr; } }
.modellbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.modellbild figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 14px; }
.modellbild figcaption strong { font: 600 20px var(--display); }
.modell-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.modell-liste li { border-bottom: 1px solid var(--line); }
.modell-liste button { width: 100%; min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.modell-liste button[aria-pressed="true"] { background: var(--sand); box-shadow: inset 4px 0 0 var(--accent); }
.modell-liste .n { font: 600 19px var(--display); display: block; }
.modell-liste .i { font-size: 14px; color: var(--muted); }
.modell-liste .p { font: 600 18px var(--display); white-space: nowrap; }
.auswahl { margin-top: 24px; }
.auswahl .gross { margin: 4px 0 16px; font: 600 22px var(--display); }

/* Grundstuecks-Check */
.check { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .check { grid-template-columns: 1fr 1fr; } }
.check label { display: block; font-weight: 600; color: #fff; margin: 32px 0 8px; }
.check input { width: 100%; max-width: 320px; min-height: 56px; padding: 0 16px; font: 600 20px var(--display); border: 2px solid var(--accent); background: var(--slate-2); color: #fff; border-radius: 2px; }
.check-liste { list-style: none; margin: 0; padding: 0; }
.check-liste li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #3A4B55; }
.check-liste .n { display: flex; align-items: center; gap: 14px; font: 600 18px var(--display); color: #fff; }
.dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid #6E7E88; }
.check-liste li.ok .dot { background: var(--accent); border-color: var(--accent); }
.check-liste li.ok .t { color: var(--accent); font-weight: 600; }
.check-liste .t { color: var(--on-slate-2); font-size: 15px; }

/* Ablauf */
.schritte { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.schritte li { border-top: 3px solid var(--slate); padding-top: 16px; }
.schritte li:first-child { border-top-color: var(--accent); }
.schritte .nr { font: 700 15px var(--display); color: var(--slate); }
.schritte h3 { margin: 6px 0 8px; }
.schritte p { margin: 0; font-size: 15px; color: var(--muted); }

/* Leistung */
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.haken li { display: flex; gap: 12px; }
.haken svg { flex: none; margin-top: 2px; }
.minus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); }
.minus li::before { content: "— "; }
@media (min-width: 900px) { .versetzt { margin-top: 56px; } }

/* Tabellen */
.tabelle-box { overflow-x: auto; border-top: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
table.vergleich { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.vergleich th, .vergleich td { padding: 12px; text-align: left; }
.vergleich thead th { font: 600 16px var(--display); }
.vergleich tbody tr { border-top: 1px solid var(--line); }
.vergleich tbody th { font-weight: 400; color: var(--muted); padding-left: 0; }
.vergleich tr.summe { border-top: 1px solid var(--ink); }
.vergleich tr.summe td { font: 600 18px var(--display); }
.vergleich tr.summe th { font-weight: 600; color: var(--ink); }

/* Chips (Staedte, Laender, andere Modelle) */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.chips a:hover { border-color: var(--slate); }

/* FAQ */
.faq { display: flex; flex-wrap: wrap; gap: 24px clamp(24px, 5vw, 80px); }
.faq > h2 { flex: 1 1 260px; }
.faq-liste { flex: 999 1 520px; min-width: 0; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px var(--display); color: var(--slate); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 46em; }

/* Abschluss-Band */
.band { background: var(--accent); }
.band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(48px, 7vw, 96px); }
.band p { margin: 8px 0 0; font-size: 17px; }

/* Fuss */
.fuss { background: var(--ink); color: #C9CCCE; font-size: 14px; padding-bottom: 72px; }
.fuss .wrap { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); padding-block: 56px 32px; }
.fuss a { color: #C9CCCE; display: block; padding: 6px 0; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss .t { color: #fff; font-weight: 600; margin: 0 0 8px; }
.fuss .klein { color: #9AA0A4; font-size: 13px; padding-bottom: 32px; }
@media (min-width: 768px) { .fuss { padding-bottom: 0; } }

/* Brotkrumen */
.brot { padding-top: 20px; font-size: 14px; color: var(--muted); }
.brot a { color: var(--muted); }

/* Modellseite */
.produkt { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: 24px clamp(56px, 8vw, 112px); }
.galerie { flex: 999 1 560px; min-width: 0; }
.galerie-gross { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; }
.galerie-gross.plan { object-fit: contain; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
.thumbs button { flex: none; width: 96px; height: 72px; padding: 0; cursor: pointer; background: #fff; border: 1px solid var(--line); }
.thumbs button[aria-pressed="true"] { border: 3px solid var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.infobox { flex: 1 1 340px; min-width: 0; }
@media (min-width: 1000px) { .infobox { position: sticky; top: 96px; } }
.preis-gross { margin: 24px 0 0; font: 700 36px var(--display); letter-spacing: -0.02em; }
.daten { margin: 24px 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; font-size: 15px; }
.daten div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.daten dt { color: var(--muted); font-size: 13px; }
.daten dd { margin: 0; font-weight: 600; }
.grundriss { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: start; }
.grundriss figure { flex: 1 1 420px; margin: 0; }
.grundriss figure img { width: 100%; background: #fff; border: 1px solid var(--line); }
.grundriss > div { flex: 1 1 360px; }
table.raeume { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.raeume caption { text-align: left; padding-bottom: 8px; color: var(--muted); font-size: 13px; }
.raeume tr { border-top: 1px solid var(--line); }
.raeume tr:first-child { border-top-color: var(--ink); }
.raeume th { text-align: left; font-weight: 400; padding: 10px 0; }
.raeume td { text-align: right; padding: 10px 0; }
.liste-raster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); column-gap: 32px; }
.liste-raster li { padding: 16px 0; border-bottom: 1px solid var(--line); }

/* Stadtseite */
.fakten-liste { margin: 0; border-top: 1px solid var(--ink); }
.fakten-liste div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fakten-liste dt { flex: 0 0 220px; color: var(--muted); }
.fakten-liste dd { flex: 1 1 260px; margin: 0; }
.karten-raster { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.karten-raster a { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.karten-raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karten-raster .n { font: 600 19px var(--display); }
@media (min-width: 900px) { .karten-raster a:nth-child(even) { margin-top: 40px; } }

/* Formular */
.formular-seite { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 5vw, 72px) clamp(56px, 8vw, 96px); }
.formular { flex: 999 1 520px; min-width: 0; }
.fortschritt { margin: 24px 0 32px; }
.fortschritt .zeile { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.fortschritt .balken { height: 6px; background: #E2DED5; }
.fortschritt .balken span { display: block; height: 6px; background: var(--accent); width: 33%; transition: width .4s cubic-bezier(.16,1,.3,1); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: 19px; margin-bottom: 16px; padding: 0; }
.wahl { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.wahl label, .pillen label { position: relative; cursor: pointer; }
.wahl input, .pillen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span.k { display: flex; flex-direction: column; gap: 2px; min-height: 72px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.wahl span.k b { font: 600 18px var(--display); }
.wahl span.k i { font-style: normal; font-size: 14px; color: var(--muted); }
.wahl input:checked + span.k { background: #fff; border: 2px solid var(--slate); box-shadow: inset 0 -4px 0 var(--accent); }
.wahl input:focus-visible + span.k, .pillen input:focus-visible + span { outline: 3px solid var(--slate); outline-offset: 2px; }
.pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.pillen span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: #fff; border: 1.5px solid #8A8F93; border-radius: 2px; }
.pillen input:checked + span { background: var(--slate); color: #fff; border-color: var(--slate); }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.feld label { font-weight: 600; }
.feld input, .feld select { min-height: 52px; padding: 0 14px; font: inherit; font-size: 16px; border: 1.5px solid #8A8F93; background: #fff; border-radius: 2px; color: var(--ink); width: 100%; }
.feld input[aria-invalid="true"] { border: 2px solid var(--error); }
.feld .fehler { color: var(--error); font-size: 14px; font-weight: 600; }
.feld .fehler[hidden] { display: none; }
.knoepfe { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.knoepfe .rechts { margin-left: auto; }
.hp { position: absolute; left: -9999px; }
.js .schritt:not(.aktiv) { display: none; }
.zusammenfassung { flex: 1 1 300px; min-width: 0; padding: 24px; }
.zusammenfassung img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zusammenfassung .gross { margin: 2px 0 0; font: 600 22px var(--display); color: #fff; }
.zusammenfassung .preis { margin: 2px 0 0; color: var(--accent); font-weight: 600; }
.zusammenfassung ul { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #3A4B55; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.formfehler { margin-top: 16px; color: var(--error); font-weight: 600; }

/* Danke */
.danke { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(48px, 8vw, 112px); }
.danke > div { flex: 1 1 420px; }
.danke ol { flex: 1 1 340px; list-style: none; margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.danke ol li { display: flex; gap: 14px; }
.danke ol .nr { font: 700 16px var(--display); color: var(--slate); }

/* Laenderwahl (international) */
.laender { display: grid; gap: 40px clamp(24px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.laender ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.laender li { border-bottom: 1px solid var(--line); }
.laender a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; color: var(--ink); text-decoration: none; }
.laender a b { font-size: 17px; }
.laender a span { font-size: 14px; color: var(--muted); }
.intro-bild { width: 100%; height: clamp(320px, 50vw, 620px); object-fit: cover; }
.intro-text { position: relative; background: var(--ground); margin-top: clamp(-200px, -14vw, -48px); padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) 0 0; max-width: 680px; }

/* Sticky-CTA mobil */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.sticky-cta.sichtbar { transform: none; }
.sticky-cta span { flex: 1; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.sticky-cta strong { display: block; font: 600 16px var(--display); color: var(--ink); }
@media (min-width: 768px) { .sticky-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}