:root{
  --bg1:#eef2f7; --bg2:#f8fafc;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --primary:#2563eb; --primary-600:#1d4ed8;
  --pill:#e2e8f0; --pill-border:#cbd5e1;
  --head:#334155; --cta:#13a04d; --cta-dk:#0f8f3b;
  --disabled:#94a3b8; --disabled-bg:#f1f5f9;
  --form:#fff7d6; --group:#fff8cf; --group-border:#e8dfa7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
.wrap{min-height:100vh;background:linear-gradient(180deg,var(--bg1) 0%, var(--bg2) 100%);padding:28px 0}
.container{max-width:1280px;margin:0 auto;padding:0 22px}

/* Wizard */
.switchbar{display:flex;gap:24px;align-items:center;justify-content:center;margin:6px auto 18px;flex-wrap:wrap}
.seg-toggle{position:relative;display:inline-block}
.seg-toggle input{position:absolute;inset:0;opacity:0}
.seg-btn{display:flex;align-items:center;justify-content:center;min-width:300px;padding:16px 22px;border-radius:16px;cursor:pointer;background:var(--pill);border:2px solid var(--pill-border);box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 16px rgba(0,0,0,.05);font-weight:900;font-size:22px;letter-spacing:.2px;user-select:none;transition:.15s}
.seg-toggle input:checked + .seg-btn{background:#fff;border-color:var(--primary);color:#0b1220;outline:4px solid rgba(37,99,235,.12);transform:translateY(-1px)}
.divider{height:6px;background:#0b1220;border-radius:4px;margin:12px 40px 22px}

/* Matrix / Spaltenköpfe */
.heads{display:grid;grid-template-columns:320px 1fr 1fr 1fr;gap:16px;align-items:end}
.heads .head{background:var(--head);color:#fff;border-radius:6px;padding:10px 12px;text-align:center;font-weight:800;font-size:18px}
.heads .spacer{visibility:hidden}
.matrix{display:grid;grid-template-columns:320px 1fr 1fr 1fr;gap:18px;margin:14px 0 24px}
.rowlabel{font-size:20px;font-weight:900;align-self:center}
.opt-wrap{position:relative}
.opt{position:absolute;inset:0;opacity:0}
.opt-card{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;border-radius:12px;background:#fff;border:2px solid transparent;cursor:pointer;height:62px;box-shadow:0 8px 16px rgba(0,0,0,.05);font-size:20px;font-weight:800;transition:border-color .15s, background .15s, box-shadow .15s}
.opt:hover + .opt-card, .opt-card:hover{border-color:#d0d7e2}
.opt:checked + .opt-card{border-color:var(--primary);outline:4px solid rgba(37,99,235,.12);background:#fff}

/* Disabled-Matrix */
.disabled .head{background:#64748b}
.disabled .opt-card{background:var(--disabled-bg);border-color:#e2e8f0;cursor:not-allowed;filter:saturate(.7);pointer-events: none;}
.disabled .rowlabel{color:var(--disabled)}
.disabled .opt:checked + .opt-card{border-color:#94a3b8;outline:none}

/* CTA */
.ctas{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:18px}
.btn{height:92px;border-radius:14px;border:none;cursor:pointer;font-weight:900;letter-spacing:.04em;font-size:28px;color:#fff;background:linear-gradient(180deg,var(--cta) 0%, var(--cta-dk) 92%);box-shadow:inset 0 10px 16px rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.12);transition:transform .06s, filter .15s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{filter:grayscale(.7) brightness(.9); cursor:not-allowed; box-shadow:none}

/* Formularkarte */
.form-card{display:none;background:var(--form);border:2px solid #e9e0a8;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.08);padding:18px 20px;overflow:visible}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.form-grid > [class^="col-"]{overflow:visible}

/* ✅ Grid-Zellen dürfen schrumpfen (wichtig bei langen Labels) */
.form-grid > [class^="col-"]{ min-width:0; }

/* ✅ Eingabefelder/Selects niemals breiter als ihre Zelle */
.form-grid input, .form-grid select{ max-width:100%; }


.col-12{grid-column:span 12}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
@media(max-width:900px){.col-6,.col-4,.col-3,.col-2{grid-column:span 12}}

label{display:block;font-weight:900;margin:6px 0 4px;color:#12315b}
input[type="text"],input[type="email"],input[type="number"],input[type="tel"],select{
  width:100%;height:48px;border:1px solid #b9b29a;border-radius:8px;padding:6px 10px;background:#fff;font-size:16px
}
select{position:relative;z-index:100}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.num{width:180px}
.unit{color:#12315b;font-weight:900}

/* === Fix: "Anzahl Wohnungen" soll die halbe Zeilenbreite voll ausnutzen === */
#f_units.num{
  width:100%;            /* überschreibt .num (180px) nur für dieses Feld */
  max-width:100%;
}

.small{font-size:14px}
.section-title{color:#0d3875;font-size:20px;font-weight:900;margin:12px 0 6px}
.radio-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.req{color:#b91c1c}

/* ===== Kühlung & Lüftung: Layout + Typografie ========================= */
/* 1) Block-Titel (oben, neben "vorhanden") optisch stärker als Unterpunkte */
.cool-vent-head{
  font-size:18px;
  font-weight:900;
  color:#0d3875;
  margin-bottom:2px;
}

/* 2) Detail-Blöcke je EIGENE Zeile + visuelle Trennung */
#f_coolWrap, #f_ventWrap{
  /* je Block bleibt in seiner 50:50-Spalte (entspricht .col-6) */
  grid-column: span 6;
  padding: 8px 10px 4px;
  margin-top: 6px;
  border-top: 1px dashed #e5dca8;   /* dezente Abgrenzung von der Zeile darüber */
  background: transparent;
}

/* 3) Unterpunkte (Checkbox-Labels) klar von den Titeln absetzen */
#f_coolWrap .radio-row label,
#f_ventWrap .radio-row label{
  font-weight:700;                   /* weniger als Titel, deutlicher als Standard */
  font-size:16px;
  color:#0f172a;
}

/* 4) Sauberes, nicht-überfülltes Grid für Checkboxen (eigene Zeile pro Block) */
#f_coolWrap .radio-row,
#f_ventWrap  .radio-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px 18px;
}
@media (max-width: 900px){
  #f_coolWrap .radio-row,
  #f_ventWrap  .radio-row{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

/* eine Zeile: Label + Feld + Einheit */
.rowline{display:flex;align-items:center;gap:12px}
/* kompaktere, sichere Breite für Labels – verhindert Überdeckung beim m²-Feld */
.rowline label{
  flex:0 0 220px;            /* statt fester 340px */
  min-width:220px;
  margin:0;
  color:#0d3875;
  font-weight:900;
  white-space:nowrap;
  overflow:visible;
}
.rowline input[type="number"]{flex:1 1 auto; width:auto}
.rowline .unit{min-width:42px; flex:0 0 auto}

/* Spezifisch: Gekühlte Wohnfläche – Label stets sichtbar neben dem Feld */
#cool_area_row label{ flex:0 0 220px; min-width:220px }
#cool_area_row input{ flex:1 1 auto; width:auto }

/* Fehler-Markierung */
.input-invalid{ border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.15) }

/* Gruppen / Trennlinien */
.group{background:var(--group);border:1px solid var(--group-border);border-radius:12px;padding:16px;margin-top:16px}
.group h3{margin:0 0 8px;font-size:22px;color:#0d3875}
.gline{height:1px;background:#e5dca8;margin:10px 0}

/* Upload-Zeilen */
.upload-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.upload-row .uplabel{ width:180px; font-weight:900; color:#12315b }
.upload-row input[type="file"]{ min-width:220px }
.upload-row .filename{ color:#0f172a; font-size:14px; opacity:.85 }

/* Doppelte Dateinamen vermeiden:
   - Den nativen Dateinamen des <input type="file"> ausblenden
   - Nur den Button-Text anzeigen
   - Unser <span class="filename"> zeigt den Namen */
.upload-row input[type="file"]{
  font-size: 0;                 /* blendet den Textteil (Dateiname) aus */
}

/* Button-Beschriftung wieder normal darstellen (Chromium/Firefox) */
.upload-row input[type="file"]::file-selector-button{
  font-size: 14px;
  line-height: 1.2;
}

/* Safari/WebKit-Fallback */
.upload-row input[type="file"]::-webkit-file-upload-button{
  font-size: 14px;
  line-height: 1.2;
}

/* (optional) Dateiname aus unserem <span> sauber kürzen/ausrichten */
.upload-row .filename{
  margin-left: 10px;
  max-width: 28ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thumbnail rechts, immer identisch groß */
.ea-photo-row{ display:flex; align-items:center; gap:16px }
.ea-preview{ margin-left:auto; flex:0 0 auto }
.ea-preview .thumb,
.ea-preview .thumb-placeholder{ width:320px; height:180px; object-fit:cover; border-radius:12px; border:1px solid #d0d0d0; display:block; background:#f4f4f4 }

/* Zahlung */
#paySection{ display:none; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin-top:16px }
#paySection h3{ margin:0 0 6px }

/* Hinweis-Toast */
.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:#183153; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,.25); z-index:1300; font-size:14px; max-width:92vw }
.toast ul{ margin:6px 0 0 18px; padding:0 }
.toast.hide{ display:none }

/* Mobil */
@media (max-width: 900px){
  /* Alle 4 Kontaktfelder im Checkout untereinander (gleiche Logik für Telefon ergänzen) */
  .form-grid > [class^="col-"]:has(> #b_name),
  .form-grid > [class^="col-"]:has(> #b_mail),
  .form-grid > [class^="col-"]:has(> #b_mail2),
  .form-grid > [class^="col-"]:has(> #b_phone){ grid-column:span 12; min-width:0; }
}

/* Preis im CTA etwas absetzen */
.btn .cta-price{ margin-left:12px; font-weight:900; }

/* === Modal-Overlays (AGB + Leerstands-Rechner) === */
.agb-wrap{
  position: fixed;
  inset: 0;
  display: none;                /* JS setzt auf 'flex' */
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.55); /* verdunkelte Seite */
  z-index: 3000;                 /* über Formular/Thumbnails */
}
.agb{
  background: #fff;
  width: min(900px, 96vw);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.agb header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:900; font-size:20px;
  padding:10px 14px; border-bottom:1px solid #e2e8f0;
}
.agb .body{ flex:1; overflow:auto; }
.agb .body iframe{ width:100%; height:100%; min-height:60vh; border:0; }
.agb .actions{ display:flex; justify-content:flex-end; gap:10px;
  padding:10px 14px; border-top:1px solid #e2e8f0; }
.xclose{ appearance:none; border:0; background:transparent;
  font-size:26px; line-height:1; cursor:pointer; }


/* Top-Leiste: dunkler Bordeaux-Verlauf + weiße Typo */
.topline{
  /* Grundlayout bleibt wie zuvor */
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 14px;

  /* Farblook wie im Screenshot */
  background:
    linear-gradient(180deg, #5b2c2c 0%, #4b2323 100%),                    /* Grundverlauf */
    repeating-linear-gradient(180deg, rgba(0,0,0,.08) 0 10px, rgba(255,255,255,.04) 10px 20px); /* feine Streifen */
  background-blend-mode: multiply;
  color:#fff;
}

.topline .left{display:flex;gap:8px;flex-wrap:wrap}
.topline .right a{
  color:#fff;
  margin-left:16px;
  text-decoration:none;
}
.topline .right a:hover,
.topline .right a:focus{
  text-decoration:underline;
  color:rgba(255,255,255,.9);
}

/* Badges auf dunklem Hintergrund gut lesbar machen */
.topline .badge{
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.25rem .6rem;
  font-weight:600;
  backdrop-filter:saturate(120%);
}

@media (max-width:640px){
  .topline{flex-direction:column;align-items:flex-start}
  .topline .right a{margin-left:0;margin-right:12px}
}



/* === Ad-Rails – robust für Firefox & Chrome ============================ */
:root{
  /* Content etwas schmaler lassen, damit 300er-Ads auf 1366–1440 px passen */
  --content-w: 1100px;

  /* Container-Padding aus deinem Layout (siehe .container) */
  --container-pad-x: 22px;

  /* Ads */
  --ad-w: 300px;
  --ad-gap: 24px;

  /* Default: Rechenbasis für Viewport-Breite */
  --vw: 100vw;
}

/* Bevorzugt stable viewport width, falls unterstützt (Firefox/neuere Chrome/Safari) */
@supports (width: 100svw){
  :root{ --vw: 100svw; }
}

/* Container an Variable koppeln – wichtig für Synchronität mit der Rechnung */
.container{
  max-width: var(--content-w);
  padding: 0 var(--container-pad-x);
}

/* Auf sehr schmalen Viewports gar nicht anzeigen, um Flow-Flicker zu vermeiden */
.ad-rail{ display: none; }

@media (min-width: 1200px){
  .ad-rail{
    display: block;
    position: fixed !important;
    top: 120px;
    z-index: 1200;

    /* Content-Gesamtbreite inkl. beidseitigem Padding */
    --content-total: calc(var(--content-w) + (2 * var(--container-pad-x)));

    /* Restbreite beidseits = (Viewport - Content - 2*Gap) / 2
       -> per clamp auf 0…300 px begrenzen (FF-Rounding safe dank --vw & content-total) */
    width: clamp(
      0px,
      calc((var(--vw) - var(--content-total) - (2 * var(--ad-gap))) / 2),
      var(--ad-w)
    );

    overflow: hidden;
    pointer-events: auto;
  }

  /* Rechts an Content andocken, wächst nach rechts */
  #adRight{
    left:  calc(50% + (var(--content-w) / 2) + var(--ad-gap) + var(--container-pad-x));
  }

  /* Links an Content andocken, wächst nach links */
  #adLeft{
    right: calc(50% + (var(--content-w) / 2) + var(--ad-gap) + var(--container-pad-x));
  }

  .ad-rail img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Optional: Klicks auf super-schmale Rails vermeiden */
  @media (max-width: 1400px){
    .ad-rail{ pointer-events: none; }
  }
}
/* ====================================================================== */

/* === Mobile Optimierungen (minimal-invasiv) =========================== */
@media (max-width: 768px){

  /* Tabs: in zwei Spalten, Buttons volle Breite */
  .switchbar{ gap:12px; }
  .seg-toggle{ flex:1 1 46%; }
  .seg-btn{ min-width:0; width:100%; padding:14px 16px; font-size:18px; }

  /* Spaltenköpfe + Matrix: 3 Spalten (Überschriften & Buttons deckungsgleich) */
  .heads{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .heads .spacer{ display:none; }
  .heads .head{ font-size:16px; padding:8px 10px; }

  .matrix{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
  .matrix .rowlabel{
    grid-column:1 / -1;          /* Label auf volle Zeile */
    text-align:center;
    font-size:18px;
    margin-top:6px;
  }

  /* Kachel-Karten kompakter */
  .opt-card{ height:auto; min-height:52px; padding:12px; }

  /* CTA-Buttons: stapeln */
  .ctas{ grid-template-columns:1fr; gap:14px; margin-top:14px; }
  .btn{ height:64px; font-size:22px; }

  /* Formularzeilen: Label über dem Feld statt fixe 340px */
  .rowline{ flex-direction:column; align-items:stretch; }
  .rowline label{ min-width:0; width:100%; margin-bottom:4px; white-space:normal; }
  .rowline .unit{ min-width:0; }
  .num{ width:100%; }

  /* Thumbnails: volle Breite */
  .ea-preview .thumb,
  .ea-preview .thumb-placeholder{ width:100%; height:auto; max-width:100%; }
}

/* sehr schmale Phones: Tabs untereinander, Matrix einspaltig */
@media (max-width: 420px){
  .seg-toggle{ flex-basis:100%; }
  .heads{ grid-template-columns:1fr; }
  .matrix{ grid-template-columns:1fr; }
}

/* Safety: Ads auch bis <1200px erzwingen ausblenden (redundant, aber klar) */
@media (max-width: 1199px){
  .ad-rail{ display:none !important; }
}

/* ============================== */

/* Klima/Lüftung: kompakt – Checkboxtexte ohne Umbruch erzwingen */
#f_coolWrap .radio-row, #f_ventWrap .radio-row { display:block; }
#f_coolWrap .radio-column, #f_ventWrap .radio-column {
  display:flex; flex-direction:column; gap:6px;
}
.cool-vent-col{ padding-right:8px; }
.cool-vent-head{ margin-bottom:6px; }
/* FIX: Lange Checkbox-Texte dürfen umbrechen, sonst sprengen sie die 50:50-Spalten
   → verhindert Überlauf in die Nachbarspalte ("vermischte" Darstellung) */
#f_ventWrap .radio-column label,
#f_coolWrap .radio-column label{
  white-space:normal;
  overflow-wrap:anywhere;     /* bricht sehr lange Wörter/Komposita bei Bedarf */
}

/* ❌ white-space:nowrap entfernten wir, weil es die Zelle „aufbläst“. ✔︎ stattdessen ellipsieren wir lange Texte, damit die 4 Spalten stabil bleiben. */
.form-grid > [class^="col-"]:has(> #b_mail2) > label,
.form-grid > [class^="col-"]:has(> #b_phone) > label{
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* (3–4) Gebäudeteil / Anzahl Wohnungen: 50:50, volle Feldbreite */
#f_building_part{ width:100% }
#f_units.num{ width:100%; max-width:100% }  /* bleibt bestehen, doppelt als Absicherung */
/* ✅ zusätzlich Schrumpf-Guard auf den beiden 50:50-Zellen */
.form-grid > .col-6:has(> #f_building_part),
.form-grid > .col-6:has(> #f_units){ min-width:0; }

/* ====================================================================== */
/* === Zusätzliche mobile Optimierungen (nicht-destruktiv) ============== */
/* Ziel: bessere Handy-Darstellung ohne Desktop zu verändern              */
/* - Switchbar: 2-spaltiges Grid mit großen Touch-Zielen                  */
/* - Baujahr-Köpfe: 3 Spalten                                             */
/* - Matrix: 3 Spalten (Phone/Tablet), 1 Spalte (sehr kleine Phones)      */
/* - CTAs: sticky am unteren Rand auf kleinen Viewports                   */
/* ====================================================================== */

@media (max-width: 992px){
  /* Ads auf Mobile/Tablet ausblenden (harmlos redundant zu <1200px-Regel) */
  .ad-rail{ display:none !important; }

  /* Switchbar als 2-spaltiges Grid */
  .switchbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:0 4px;
  }
  .seg-toggle{ width:100%; }
  .seg-btn{
    width:100%;
    min-width:0;
    height:52px;
    font-size:16px;
    border-radius:12px;
    padding:10px 14px;
  }

  /* Baujahr-Köpfe: 3 Spalten (kein horizontales Scrollen) */
  .heads{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
    padding:0 4px 6px;
  }
  .heads .spacer{ display:none; }
  .heads .head{
	min-width:0;
    padding:10px 14px;
    font-size:16px;
    border-radius:12px;
    scroll-snap-align:start;
  }

  /* Matrix: 3 Spalten, Labels jeweils über volle Breite */
  .matrix{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    padding:0 4px;
  }
  .matrix .rowlabel{
    grid-column:1 / -1;
    margin-top:6px;
    font-weight:600;
    font-size:16px;
    text-align:left;
  }
  .opt-card{
    min-height:52px;
    padding:14px 12px;
    font-size:16px;
    border-radius:12px;
  }

  /* CTAs: sticky unten, 2-spaltig auf Tablet */
  .ctas{
    position:sticky;
    bottom:0;
    left:0; right:0;
    padding:10px 4px;
    background:color-mix(in srgb, #ffffff 92%, transparent);
    backdrop-filter:blur(6px);
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    z-index:50;
  }
  .btn{
    height:48px;
    font-size:16px;
    border-radius:12px;
  }
}

/* Kleine Phones: Matrix einspaltig, CTAs untereinander */
@media (max-width: 600px){
  .matrix{ grid-template-columns:1fr; }
  .ctas{ grid-template-columns:1fr; }
}

/* Sehr kleine Geräte: Typografie/Padding minimal kleiner */
@media (max-width: 380px){
  .seg-btn,
  .heads .head,
  .opt-card,
  .btn{
    height:46px;
    font-size:15px;
  }
  .heads .head{ min-width:180px; }
}