/* ========================================================================== Ludwigs Immobilien – Stylesheet Alle Farben und Schriften NUR über die Variablen hier oben ändern. Quelle für Farben und Logo: CI-Handbuch 24.09.2026 (immo-workflow-app/docs/ci/LudwigsImmobilien-CI.pdf). Formensprache: eckig, Radius 0 überall. Kein Framework. ========================================================================== */ /* ---------- Schriften lokal (kein Google-CDN) ---------- */ @font-face{ font-family:'Libre Bodoni';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/schriften/libre-bodoni-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; } @font-face{ font-family:'Libre Bodoni';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/schriften/libre-bodoni-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } @font-face{ font-family:'Libre Bodoni';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/schriften/libre-bodoni-400italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; } @font-face{ font-family:'Libre Bodoni';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/schriften/libre-bodoni-400italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } @font-face{ font-family:'Montserrat';font-style:normal;font-weight:400 600;font-display:swap; src:url('/assets/schriften/montserrat-400-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; } @font-face{ font-family:'Montserrat';font-style:normal;font-weight:400 600;font-display:swap; src:url('/assets/schriften/montserrat-400-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } @font-face{ font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/schriften/montserrat-400italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; } @font-face{ font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/schriften/montserrat-400italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } /* ---------- Design-Tokens: CI-Handbuch 24.09.2026 (verbindlich) ---------- Markenfarben NUR diese fünf: Dunkles Grün #2C5539, Weiß #FFFFFF, Neon Grün #C8FF81, Gift Grün #83E506, Schwarz #000000. Cremeweiß, Hellgrün-Tint, Apfelgrün und die drei dunkleren Grüntöne von vorher sind abgeschafft. - Alle dunklen Flächen (Hero, dunkle Abschnitte, Fuß, Knöpfe, Bänder) = Dunkles Grün. Aneinanderstoßende dunkle Flächen trennt eine feine Linie (--line-auf-dunkel). - Alle hellen Flächen = Weiß, aneinanderstoßende helle Abschnitte trennt --line. - Akzentfarbe ist das Mintgrün (CI „Neon“ #C8FF81, Philipp 27.09.2026). Gift Grün kommt auf der Webseite NICHT vor (nur noch Ratgeber-PDF, werkzeuge/ratgeber-pdf.mjs liest --ci-*). Mint auf Dunkelgrün: Knöpfe, Hervorhebungen, Hover, Fokus. Mint auf Weiß nur als Knopf- fläche mit dunkelgrünem Rand (Mint/Weiß hat nur 1,2:1); Linien/Balken auf Weiß = Dunkelgrün. Schrift auf Mint immer Dunkelgrün (7,3:1). Mint nie als Textfarbe auf Weiß. - Fließtext Schwarz (21:1, ruhigstes Schriftbild), Überschriften/Auszeichnungen Dunkelgrün. - „Ableitung“ = nicht im Handbuch, nur als rgba() einer CI-Farbe erlaubt. Funktionsfarben (Fehler, Entwurf, Energieausweis-Skala) sind keine Markenfarben. */ :root{ /* Die fünf CI-Farben – nur hier als Hexwert */ --ci-dunkelgruen:#2C5539; --ci-weiss:#FFFFFF; --ci-neon:#C8FF81; --ci-gift:#83E506; --ci-schwarz:#000000; /* Fremdmarke, nur auf /eroeffnung: ATRIUM Immobilienverwaltung GmbH (Partner der gemeinsamen Eröffnungsfeier 10.10.2026, Violett aus der Einladungskarte). Kein Ludwigs-CI-Ton, nie woanders nutzen. */ --atrium:#766476; /* Rollen */ --gruen:var(--ci-dunkelgruen); /* Überschriften, Knöpfe, Bänder, ALLE dunklen Flächen */ --weiss:var(--ci-weiss); /* heller Grund, Schrift auf Dunkel */ --mint:var(--ci-neon); /* Akzent: Knöpfe, Hervorhebung, Hover/Fokus auf Dunkelgrün */ --acc-text:var(--ci-dunkelgruen); /* Schrift auf Mint */ --text:var(--ci-schwarz); /* Fließtext */ --weiss-leise:rgba(255,255,255,.82); /* Ableitung: Nebentext auf Dunkel (6,5:1) */ --meta:rgba(0,0,0,.72); /* Ableitung: Nebentext auf Hell (≈ #474747, 9,2:1) */ --line:rgba(44,85,57,.18); /* Ableitung: feine Linien auf Hell, Bild-Platzhalter */ --line-dunkel:rgba(44,85,57,.42); /* Ableitung: kräftigere Linien auf Hell (Felder, Listen) */ --line-auf-dunkel:rgba(255,255,255,.22); /* Ableitung: Linien auf Dunkel */ --fehler-bg:#FFF3F0; /* Funktionsfarbe Formularfehler: Hintergrund */ --fehler-rand:#D9534F;/* Funktionsfarbe Formularfehler: Rand */ --fehler-text:#7A1F16;/* Funktionsfarbe Formularfehler: Text */ --entwurf-bg:#FBF2D9; /* Funktionsfarbe Rechtstext-Entwurfshinweis + Platzhalter: Hintergrund */ --entwurf-rand:#D8B84A;/* Funktionsfarbe Rechtstext-Entwurfshinweis: Rand */ --entwurf-text:#5A4A12;/* Funktionsfarbe Rechtstext-Entwurfshinweis: Text */ --platzhalter-text:#8A5B1F; /* Funktionsfarbe „folgt“-Platzhalter im Rechtstext: Text */ --schatten:rgba(44,85,57,.2); /* Ableitung: Schatten */ --abdunkeln:rgba(44,85,57,.6); /* Ableitung: Hintergrund hinter Dialogen */ /* Diagramme (Marktzahlen) auf Weiß: nur CI-Farben mit Nicht-Text-Kontrast ≥ 3:1. Dunkelgrün 8,5:1, Schwarz 21:1; untereinander Helligkeitsabstand 2,5:1 (auch bei Farbfehlsicht unterscheidbar). Gift (1,6:1) und Neon (1,1:1) scheiden auf Weiß aus. Werte stehen immer zusätzlich als Text daneben. Nur für Linien/Balken, nie für Text. */ --diagramm-haus:var(--ci-dunkelgruen); --diagramm-wohnung:var(--ci-schwarz); /* Handy-Diagramme (unter 600 px): dieselben zwei Farben. */ --diagramm-handy-haus:var(--diagramm-haus); --diagramm-handy-wohnung:var(--diagramm-wohnung); /* Energieausweis-Skala: die EINZIGE Ausnahme vom CI (übliche Farben A+ … H) */ --ea-a-plus:#00783C; --ea-a:#2E9B3F; --ea-b:#8CC43E; --ea-c:#C8DB2F; --ea-d:#F4E41C; --ea-e:#F6B91B; --ea-f:#EF8A22; --ea-g:#D33A1E; --ea-h:#B3141B; /* Schriften: Laut CI-Handbuch Impact (Überschrift) und Proxima Nova (Text, Zwischenzeilen). Proxima Nova ist nicht lizenziert und nicht lokal vorhanden → vorerst die bisherigen Schriften. Umstellung später NUR hier (plus @font-face oben, lokal, kein CDN). */ --schrift-titel:'Libre Bodoni',Georgia,serif; --schrift-text:'Montserrat',system-ui,-apple-system,sans-serif; --sperrung-zwischenzeile:.1em; /* „Buchstabenabstand 100“ laut Handbuch: Versal-Zwischenzeilen/Rubriken */ /* Schriftgrößen-Stufen: nur diese fünf (plus Vorzeile/Knopf) verwenden */ --fs-h1:clamp(2.1rem,4.4vw,3.5rem); --fs-h2:clamp(1.6rem,3.2vw,2.25rem); --fs-h3:1.05rem; --fs-text:1rem; --fs-klein:.84rem; --fs-mini:11px; /* Vorzeilen, Knöpfe, Marker */ --zeilenhoehe:1.65; /* Abstände: ein Token für alle Abschnitte */ --abstand:clamp(3rem,7vw,5rem); --abstand-kopf:clamp(1.6rem,3.4vw,2.4rem); /* Abschnittskopf -> Inhalt */ --spalte:1280px; --luft:clamp(1.1rem,3.5vw,2.6rem); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--schrift-text);font-size:var(--fs-text); color:var(--text);background:var(--weiss); line-height:var(--zeilenhoehe);letter-spacing:-.013em; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;border-radius:0} ul,ol{list-style:none} h1,h2{font-family:var(--schrift-titel);font-weight:400;color:var(--gruen);text-wrap:balance} h3,h4{font-family:var(--schrift-text);font-weight:600;color:var(--gruen);letter-spacing:-.01em;line-height:1.35} p{font-size:var(--fs-text)} [hidden]{display:none!important} .nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} :focus-visible{outline:2px solid var(--gruen);outline-offset:2px} .f-gruen :focus-visible,.f-dunkel :focus-visible,.hero :focus-visible,.seiten-hero :focus-visible,footer :focus-visible,.topbar :focus-visible,header.ratgeber-kopf :focus-visible{outline-color:var(--mint)} /* ---------- Layout ---------- */ .wrap{max-width:var(--spalte);margin:0 auto;padding:0 var(--luft)} main{display:block} section{padding:var(--abstand) 0;position:relative} /* Abschnittsflächen – wechseln immer (werkzeuge/flaechen.mjs) */ .f-weiss{background:var(--weiss);color:var(--text)} .f-gruen{background:var(--gruen);color:var(--weiss)} .f-hell{background:var(--weiss);color:var(--text)} .f-dunkel{background:var(--gruen);color:var(--weiss)} .f-gruen h2,.f-gruen h3,.f-dunkel h2,.f-dunkel h3{color:var(--weiss)} /* Seit CI 24.09.2026 sind alle dunklen Flächen gleich Dunkelgrün und alle hellen Weiß: stoßen zwei gleiche Flächen aneinander, trennt sie eine feine Linie. */ :is(.hero,.seiten-hero,.f-gruen,.f-dunkel,.laufband.wartet) + :is(.f-gruen,.f-dunkel){border-top:1px solid var(--line-auf-dunkel)} :is(.f-weiss,.f-hell) + :is(.f-weiss,.f-hell){border-top:1px solid var(--line)} /* ---------- Typografie ---------- */ h1{font-size:var(--fs-h1);letter-spacing:-.03em;line-height:1.02} h2{font-size:var(--fs-h2);letter-spacing:-.024em;line-height:1.08;max-width:24ch} h3{font-size:var(--fs-h3)} .lede{font-size:var(--fs-text);max-width:56ch;color:var(--meta)} .f-gruen .lede,.f-dunkel .lede,.hero .lede,.seiten-hero .lede{color:var(--weiss-leise)} .klein{font-size:var(--fs-klein)} .it{font-style:italic} .acc{color:var(--gruen);font-style:italic} .f-gruen .acc,.f-dunkel .acc,.hero .acc,.seiten-hero .acc{color:var(--mint)} .tag{ display:block;font-family:var(--schrift-text);font-weight:600;font-size:var(--fs-mini); letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--gruen);margin-bottom:.8rem; } .f-gruen .tag,.f-dunkel .tag,.hero .tag,.seiten-hero .tag{color:var(--weiss)} .kopf-abschnitt{display:flex;flex-direction:column;gap:.6rem;margin-bottom:var(--abstand-kopf);text-align:center;align-items:center} .kopf-abschnitt .tag{margin-bottom:0} .kopf-abschnitt.links{text-align:left;align-items:flex-start} .kopf-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:var(--abstand-kopf)} .kopf-zeile h2{margin:0} .knopf-zeile{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1.6rem} .knopf-zeile.mitte{justify-content:center} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--schrift-text);font-size:var(--fs-mini);font-weight:600;letter-spacing:.105em;text-transform:uppercase; padding:14px 28px;border:1.5px solid var(--gruen);color:var(--gruen);background:none; cursor:pointer;transition:background .2s,color .2s,border-color .2s;min-height:44px;text-align:center; } .btn:hover{background:var(--gruen);color:var(--weiss)} .btn--fuell{background:var(--gruen);border-color:var(--gruen);color:var(--weiss)} .btn--fuell:hover{background:var(--weiss);border-color:var(--gruen);color:var(--gruen)} /* Hauptknopf in Mintgrün (Philipp 27.09.2026), Schrift Dunkelgrün (7,3:1). Auf Weiß mit dunkelgrünem Rand, weil Mint/Weiß allein nur 1,2:1 hat. Hover: Dunkelgrün. */ .btn--apfel{background:var(--mint);border-color:var(--gruen);color:var(--acc-text)} .btn--apfel:hover{background:var(--gruen);border-color:var(--gruen);color:var(--weiss)} /* auf Dunkelgrün: Mint ohne Rand, Hover Weiß */ :is(.f-gruen,.f-dunkel,.hero,.seiten-hero,.ratgeber-hilfe,.wohnfinder,header.ratgeber-kopf) .btn--apfel{background:var(--mint);border-color:var(--mint);color:var(--acc-text)} :is(.f-gruen,.f-dunkel,.hero,.seiten-hero,.ratgeber-hilfe,.wohnfinder,header.ratgeber-kopf) .btn--apfel:hover{background:var(--weiss);border-color:var(--weiss);color:var(--gruen)} .btn--gross{font-size:12.5px;padding:17px 34px} .btn--hell{border-color:var(--weiss);color:var(--weiss);background:none} .btn--hell:hover{background:var(--weiss);color:var(--gruen)} .f-gruen .btn:not(.btn--fuell):not(.btn--hell):not(.btn--apfel), .f-dunkel .btn:not(.btn--fuell):not(.btn--hell):not(.btn--apfel){border-color:var(--weiss);color:var(--weiss)} .f-gruen .btn:not(.btn--fuell):not(.btn--hell):not(.btn--apfel):hover, .f-dunkel .btn:not(.btn--fuell):not(.btn--hell):not(.btn--apfel):hover{background:var(--weiss);color:var(--gruen)} .btn[disabled]{opacity:.55;cursor:not-allowed} .textlink{color:var(--gruen);font-weight:600;border-bottom:1px solid currentColor} .textlink:hover{color:var(--text)} /* ---------- Kontaktleiste ---------- */ .topbar{background:var(--gruen);color:var(--weiss);font-size:12px} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:.3rem 1.2rem;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem} .topbar a{color:var(--weiss);transition:color .2s} .topbar a:hover{color:var(--mint)} .topbar span{font-weight:600} /* ---------- Header ---------- */ header{position:relative;z-index:80;background:var(--weiss);border-bottom:1px solid var(--line)} .leiste{display:flex;align-items:center;gap:1.2rem;padding-top:.85rem;padding-bottom:.85rem} .marke{display:flex;align-items:center;gap:10px} .marke img{flex:none;height:auto} .marke-bild{width:32px} /* Bildmarke: Gift auf Hell, Neon auf Dunkel (Bilddatei, 1× + 2×) */ .marke-wort{width:110px} /* Wortmarke als SVG (Canva-Original, Pfade) – keine Webschrift, nicht nachbauen */ nav.hauptmenu{display:none;gap:30px;align-items:center;margin-left:auto} nav.hauptmenu a{font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--gruen);position:relative;padding:6px 0} nav.hauptmenu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gruen);transition:width .25s} nav.hauptmenu a:hover::after,nav.hauptmenu a[aria-current="page"]::after{width:100%} nav.hauptmenu a[aria-current="page"]::after{background:var(--gruen)} /* Zustand braucht ≥ 3:1 – Gift auf Weiß hat nur 1,6:1 */ .handy-knopf{ display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:none;border:1.5px solid var(--gruen); color:var(--gruen);padding:10px 16px;font-size:var(--fs-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:44px; } .handy-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} .handy-menu{position:fixed;inset:0;z-index:90;background:var(--weiss);display:none;flex-direction:column;overflow-y:auto} .handy-menu.offen{display:flex} .handy-menu-kopf{display:flex;align-items:center;justify-content:space-between;padding:.85rem var(--luft);border-bottom:1px solid var(--line)} .handy-menu-schliessen{background:none;border:1.5px solid var(--gruen);color:var(--gruen);padding:9px 14px;font-size:var(--fs-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:44px} .handy-menu nav{display:flex;flex-direction:column;padding:1.2rem var(--luft) 2rem} .handy-menu nav a{font-family:var(--schrift-titel);font-size:1.5rem;color:var(--gruen);padding:.75rem 0;border-bottom:1px solid var(--line)} @media (min-width:900px){ nav.hauptmenu{display:flex} .handy-knopf{display:none} } /* ---------- Einstieg mit Foto (Startseite, Team) ---------- Handy: Foto vollständig ÜBER dem Text, natürliches Seitenverhältnis. Desktop: Text links auf dunklem Grund, Foto rechts – nie Text über dem Foto. */ .hero{background:var(--gruen);color:var(--weiss);padding:0} .hero-grid{display:flex;flex-direction:column} .hero-bild{margin:0} .hero-bild img{width:100%;height:auto} .hero-text{padding:clamp(1.8rem,6vw,2.6rem) var(--luft) var(--abstand)} .hero h1{color:var(--weiss);margin:0 0 1.1rem} .hero .lede{margin-bottom:1.8rem} @media (min-width:900px){ .hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:center; max-width:var(--spalte);margin:0 auto;padding:var(--abstand) var(--luft)} .hero-bild{order:2} .hero-text{padding:0} } /* ---------- Laufband unter dem Einstieg (Startseite) ---------- 1:1 aus dem Prototyp (.ticker): 12 px oben/unten, 11,5 px Montserrat 600, Versalien, Sperrung .17em, Rauten 6,5 px in 55 % Tiefgrün, läuft nach links (translateX 0 -> -50 %). Die Dauer setzt objekte.js aus der Breite (47,4 px/s wie im Prototyp). Einträge nur aus /api/objekte, Regel „Neu“ = höchstens 30 Tage alt (siehe objekte.js). Keine Fläche im Sinne des Abschnittsrhythmus, nur ein schmaler Streifen. */ .laufband{background:var(--mint);color:var(--acc-text);overflow:hidden;padding:12px 0;line-height:1.72} .laufband-spur{display:flex;width:max-content} /* Solange /api/objekte lädt: Platz in Hero-Farbe freihalten, kein Text, kein Grün (kein Layout-Sprung) */ .laufband.wartet{background:var(--gruen);min-height:calc(24px + 11.5px * 1.72)} .laufband-gruppe,.laufband-gruppe li{display:flex;flex:none} .laufband a{display:block;font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;padding:0 21px;white-space:nowrap} .laufband a:hover{text-decoration:underline;text-underline-offset:3px} .laufband a:focus-visible{outline:2px solid var(--gruen);outline-offset:2px} .laufband .raute{font-size:0;padding:0 14px} .laufband .raute::before{content:"◆";content:"◆" / "";font-size:6.5px;vertical-align:middle; color:var(--gruen)} @keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:no-preference){ .laufband.laeuft .laufband-spur{animation:laufband var(--laufband-dauer,40s) linear infinite;will-change:transform} .laufband:hover .laufband-spur,.laufband:focus-within .laufband-spur{animation-play-state:paused} } /* Tastatur-Fokus im Band: anhalten, waagerecht scrollen, Kopien weg */ .laufband.steht{overflow-x:auto;scrollbar-width:none} .laufband.steht .laufband-spur{animation:none;will-change:auto} .laufband.steht .laufband-gruppe[aria-hidden]{display:none} /* Weniger Bewegung: steht still, nur die echte Liste, waagerecht scrollbar */ @media (prefers-reduced-motion:reduce){ .laufband{overflow-x:auto;scrollbar-width:thin} .laufband-gruppe[aria-hidden]{display:none} } /* ---------- Unterseiten: schmaler Kopf ---------- */ .seiten-hero{background:var(--gruen);color:var(--weiss)} .seiten-hero h1{color:var(--weiss);max-width:22ch;margin:0 0 1rem} .seiten-hero .knopf-zeile{margin-top:1.8rem} /* ---------- Objekt-Karten ---------- */ .objekt-liste{display:grid;grid-template-columns:1fr;gap:1.6rem} @media (min-width:640px){.objekt-liste{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.objekt-liste{grid-template-columns:repeat(3,1fr)}} .objekt-liste.kompakt{grid-template-columns:repeat(2,1fr);gap:1.1rem} @media (min-width:1000px){.objekt-liste.kompakt{grid-template-columns:repeat(3,1fr);gap:1.6rem}} .objekt-liste.kompakt .karte-objekt h3,.objekt-liste.kompakt .karte-objekt .karte-titel{font-size:var(--fs-klein)} .objekt-liste.kompakt .karte-objekt .daten{font-size:12px;margin-bottom:0} .objekt-liste.kompakt .marker{font-size:9px;padding:5px 8px} .karte-objekt{display:flex;flex-direction:column;text-align:left} .karte-objekt .bild{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--line)} .karte-objekt .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s} /* Hochkant im 3:2-Ausschnitt: oberen Teil zeigen statt Mitte (Decke/Wand statt nur Mittelstreifen) */ .karte-objekt .bild img.hochkant,.galerie-reihe button img.hochkant{object-position:center 30%} a.karte-objekt:hover .bild img{transform:scale(1.04)} .marker{position:absolute;top:10px;left:10px;z-index:2;background:var(--gruen);color:var(--weiss);font-family:var(--schrift-text);line-height:1.4; font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px} .marker.reserviert{background:var(--weiss);color:var(--gruen)} .marker.verkauft,.marker.vermietet{background:rgba(0,0,0,.62);color:var(--weiss)} .marker-inline{position:static;display:inline-block;vertical-align:middle;margin-left:.6rem} .karte-objekt .rumpf{padding-top:.9rem;display:flex;flex-direction:column;flex:1} .karte-objekt .ort{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--meta)} .karte-objekt h3{margin:.35rem 0 .5rem} /* Kartentitel – gleiches Aussehen, egal ob h2 (/immobilien, /referenzen), h3 oder h4 (/team) */ .karte-titel{font-family:var(--schrift-text);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.35;color:var(--gruen);max-width:none} .karte-objekt .karte-titel{margin:.35rem 0 .5rem} .karte-objekt .daten{font-size:var(--fs-klein);color:var(--meta);margin-bottom:.7rem} .karte-objekt .preis{margin-top:auto;font-weight:600;color:var(--gruen);border-top:1px solid var(--line);padding-top:.7rem} .karte-objekt .preis small{font-weight:400;color:var(--meta);font-size:var(--fs-klein)} .leerzustand{grid-column:1/-1;padding:2.4rem;text-align:center;border:1px dashed var(--line-dunkel);color:var(--meta)} .leerzustand p{margin-bottom:1rem} /* Skelett-Kacheln: Platzhalter in der Form der späteren Karten, solange die Schnittstelle antwortet. Ohne Text, eckig, sanftes Pulsieren (steht still bei reduzierter Bewegung). Höhen wie die echten Karten -> kein Sprung beim Tausch. */ .skelett .bild,.skelett .person-foto,.skelett-zeile{background:var(--line)} .skelett-zeile{display:block;height:.8rem;width:88%;margin-top:.55rem} .skelett-zeile--kurz{width:42%;height:.6rem;margin-top:0} .skelett-zeile--name{width:70%;height:1.6rem;margin:.2rem 0 .8rem} .skelett-zeile--titel{width:min(60%,30ch);height:2.2rem;margin-top:.7rem} /* Objektseite beim Laden: dieselbe Galerie-Fläche wie später (gleiche Klassen, feste Seitenverhältnisse) und mindestens eine Bildschirmhöhe, damit die Fußzeile nicht erst oben steht und dann springt (CLS). */ .objekt-laden{min-height:100vh} /* Rumpfhöhe gemessen an echten Karten (Ort, Titel, Daten, Preis): 163 px einspaltig, 186 px ab zwei Spalten (längere Titel brechen um); Referenzen 84 px. */ .karte-objekt.skelett .rumpf{min-height:10.2rem} @media (min-width:640px){.karte-objekt.skelett .rumpf{min-height:11.6rem}} [data-referenzen] .karte-objekt.skelett .rumpf{min-height:5.25rem} .person.skelett .person-text{min-height:6rem} .nur-sr + .person{border-top:0} /* Statushinweis vor der ersten Skelett-Person zählt nicht */ @keyframes skelett-puls{0%,100%{opacity:1}50%{opacity:.5}} @media (prefers-reduced-motion:no-preference){ .skelett{animation:skelett-puls 1.6s ease-in-out infinite} } .vorschau-hinweis{background:var(--weiss);border:1px solid var(--line);padding:.85rem 1.1rem;font-size:var(--fs-klein);color:var(--meta);margin-bottom:1.6rem} .hinweis-zeile{display:flex;align-items:center;justify-content:center;gap:.6rem 1.2rem;flex-wrap:wrap;margin-top:var(--abstand-kopf); padding-top:1.4rem;border-top:1px solid var(--line);text-align:center} .hinweis-zeile p{color:var(--meta)} /* Wohnfinder unter der Objektliste (/immobilien): immer sichtbar, bei jedem Filter und auch bei leerer Liste (Philipp 27.09.2026). Knopf-Ziel setzt objekte.js je Filter. */ .wohnfinder{display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap; margin-top:var(--abstand-kopf);background:var(--gruen);color:var(--weiss);padding:clamp(1.4rem,3vw,2.2rem)} .wohnfinder > div{flex:1 1 22rem} .wohnfinder .tag{color:var(--weiss)} .wohnfinder h2{color:var(--weiss);font-size:clamp(1.4rem,2.6vw,1.8rem);margin:.3rem 0 .6rem} .wohnfinder p{color:var(--weiss-leise)} .wohnfinder :focus-visible{outline-color:var(--mint)} /* ---------- Filter-Chips ---------- */ .chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:1.6rem} .chip{border:1.5px solid var(--line);background:none;padding:10px 18px;font-size:var(--fs-mini);font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--meta);cursor:pointer;min-height:44px} .chip:hover{border-color:var(--gruen);color:var(--gruen)} .chip[aria-pressed="true"]{background:var(--gruen);border-color:var(--gruen);color:var(--weiss)} /* ---------- Leistungen + was uns unterscheidet (Startseite) ---------- */ .leistung-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:start} .leistung-grid > *{min-width:0} @media (min-width:900px){.leistung-grid{grid-template-columns:1.1fr .9fr}} .leistrows{border-top:2px solid var(--gruen)} .lrow{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-dunkel)} .lrow .ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--gruen);display:flex;align-items:center;justify-content:center} .lrow .ic svg{width:22px;height:22px;stroke:var(--weiss);fill:none;stroke-width:1.5} .lrow p{font-size:var(--fs-klein);color:var(--meta)} .lrow .pfeil{margin-left:auto;color:var(--gruen);opacity:.5} .lrow:hover .pfeil{opacity:1} .usp-kasten{background:var(--weiss);padding:clamp(1.4rem,3vw,2rem)} .usp-kasten h3{margin-bottom:1rem} .haken-liste li{position:relative;padding:.55rem 0 .55rem 1.9rem;border-top:1px solid var(--line)} .haken-liste li:first-child{border-top:0} .haken-liste li::before{content:"";position:absolute;left:2px;top:.95rem;width:12px;height:7px;border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(-45deg)} .usp-kasten .btn{margin-top:1.2rem} /* ---------- Ablauf ---------- */ .ablauf-schritte{display:grid;grid-template-columns:1fr;gap:1.4rem} @media (min-width:640px){.ablauf-schritte{grid-template-columns:repeat(2,1fr)}} .schritt{display:grid;grid-template-columns:2.2rem 1fr;gap:.9rem;border-top:1px solid var(--line-dunkel);padding-top:1rem} .schritt .nr{font-family:var(--schrift-titel);font-size:2.4rem;line-height:.85;color:var(--gruen);text-align:left} .f-gruen .schritt .nr,.f-dunkel .schritt .nr{color:var(--mint)} .schritt h3{margin-bottom:.2rem} .schritt p{font-size:var(--fs-klein);color:var(--meta)} /* ---------- Bild + Text (allgemein) ---------- */ .zwei-spalten{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,4rem);align-items:center} .zwei-spalten > *{min-width:0} @media (min-width:900px){.zwei-spalten{grid-template-columns:1fr 1fr}.zwei-spalten.oben{align-items:start}} .bild-natuerlich{margin:0} .bild-natuerlich img{width:100%;height:auto} .bild-rahmen{aspect-ratio:4/3;overflow:hidden} .bild-rahmen img{width:100%;height:100%;object-fit:cover} /* ---------- Video Abriss & Neubau ---------- */ .abriss-video{position:relative;background:var(--gruen);overflow:hidden} .abriss-video video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover} .abriss-abspielen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:52px;padding:0 20px;gap:10px; border:0;background:var(--weiss);color:var(--gruen);display:flex;align-items:center;justify-content:center;cursor:pointer; font-size:var(--fs-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase} .abriss-abspielen svg{width:13px;height:13px;fill:var(--gruen)} .abriss-abspielen.aus{display:none} /* Immobilienvideos (/immobilienvideos): Hochkant-Filme groß, auf dem Handy volle Breite */ .film-liste{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem);justify-items:center} @media (min-width:760px){.film-liste{grid-template-columns:1fr 1fr}} .film-karte{margin:0;width:100%;max-width:420px} .film-karte .abriss-video video{aspect-ratio:9/16;height:auto} .film-karte--breit{max-width:none} .film-karte--breit .abriss-video video{aspect-ratio:16/9} .film-karte figcaption{margin-top:.8rem;display:flex;flex-direction:column;gap:.2rem} .film-karte figcaption strong{color:var(--gruen);font-weight:600} .film-karte figcaption span{color:var(--meta);font-size:var(--fs-klein)} .film-karte .film-hinweis{font-style:italic} .pfeil-liste{margin:0 0 1.6rem} .pfeil-liste li{position:relative;padding-left:1.4rem;color:var(--meta);margin-bottom:.5rem} .pfeil-liste li::before{content:"→";position:absolute;left:0;color:var(--gruen)} /* ---------- Verkaufszeile ---------- */ .zeile{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap} .zeile p{font-family:var(--schrift-titel);font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.25;color:var(--weiss);margin:0} /* ---------- Formularfelder ---------- */ .feld-gruppe{display:grid;grid-template-columns:1fr;gap:11px;margin-bottom:1rem} @media (min-width:480px){.feld-gruppe.zwei{grid-template-columns:1fr 1fr}} .feld{border:0;border-bottom:1px solid rgba(255,255,255,.4);background:none;padding:13px 2px; color:var(--weiss);width:100%;font-size:16px;min-height:44px} .f-weiss .feld,.f-hell .feld,.formular-hell .feld,.feld.formular-hell{border-bottom-color:var(--line-dunkel);color:var(--text)} .feld::placeholder{color:rgba(255,255,255,.72)} /* Ableitung, 5,1:1 auf Dunkelgrün */ .f-weiss .feld::placeholder,.f-hell .feld::placeholder{color:var(--meta)} .feld:focus{outline:0;border-bottom-color:var(--mint)} .f-weiss .feld:focus,.f-hell .feld:focus,.formular-hell .feld:focus,.feld.formular-hell:focus{border-bottom-color:var(--gruen)} select.feld{background:none} .f-gruen select.feld option{color:var(--text)} .checkbox-zeile{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-klein);margin:.9rem 0;line-height:1.5} .checkbox-zeile input{width:18px;height:18px;flex:none;margin-top:2px} .checkbox-zeile a{text-decoration:underline} .formular-fehler{display:none;background:var(--fehler-bg);border:1px solid var(--fehler-rand);color:var(--fehler-text);padding:.8rem 1rem;font-size:var(--fs-klein);margin-bottom:1rem} .formular-fehler.zeigen{display:block} .formular-erfolg{display:none;background:var(--weiss);border:1px solid var(--gruen);color:var(--gruen);padding:1rem 1.1rem;font-size:var(--fs-klein);margin-bottom:1rem} .formular-erfolg.zeigen{display:block} /* Hinweis „Meinten Sie …?“ am E-Mail-Feld (alle Formulare) */ .email-hinweis{background:var(--weiss);border:1px solid var(--gruen);border-left-width:4px;color:var(--text); padding:.8rem 1rem;font-size:var(--fs-klein);line-height:1.5;margin:.1rem 0 1rem;text-align:left} .email-hinweis p{font-size:var(--fs-klein);margin-bottom:.6rem} .email-hinweis strong{color:var(--gruen);font-weight:600;overflow-wrap:anywhere} .email-hinweis-knoepfe{display:flex;flex-wrap:wrap;gap:8px} .btn--klein{padding:10px 16px;letter-spacing:.08em} .ratgeber-formular .email-hinweis{margin:0} /* Freiwilliges Feld mit kurzem Satz darunter (Telefon in den Ratgeber-Formularen) */ .feld-freiwillig{display:grid;gap:4px} .feld-zusatz{font-size:var(--fs-klein);color:var(--meta);line-height:1.4} /* ---------- Suchprofil (/kontakt#suchprofil, seit 27.09.2026) ---------- */ .suchprofil-formular .feld-gruppe{margin-bottom:1.2rem} .suchprofil-formular select.feld{appearance:auto} .sp-gruppe{border:0;padding:0;margin:0 0 1.2rem;min-width:0} .sp-gruppe legend{padding:0;margin-bottom:.5rem;font-size:var(--fs-klein);font-weight:600;color:var(--gruen)} .sp-gruppe legend small{font-weight:400;color:var(--meta);font-size:inherit} .kacheln--sp .kachel{min-height:48px} .sp-merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px} @media (min-width:560px){.sp-merkmale{grid-template-columns:repeat(4,minmax(0,1fr))}} .sp-merkmal{display:flex;gap:10px;align-items:center;min-height:44px;font-size:var(--fs-klein);cursor:pointer} .sp-merkmal input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--gruen)} .suchprofil-formular > .feld-zusatz{margin:-.4rem 0 1.2rem} .sp-merkmale > *{min-width:0} /* Suchprofil in drei Schritten: Fortschritt, Schrittüberschrift, Knöpfe, Pflichtstern (27.09.2026) */ .pflicht{color:var(--gruen);font-weight:700} .sp-pflicht-hinweis{margin:0 0 1rem} .sp-fortschritt{list-style:none;margin:0 0 .9rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sp-fortschritt li{display:flex;align-items:flex-start;gap:6px;padding:.5rem 0 .4rem;border-top:3px solid var(--line);font-size:var(--fs-klein);line-height:1.3;color:var(--meta);overflow-wrap:anywhere;min-width:0} .sp-fortschritt li.erledigt{border-top-color:var(--gruen);color:var(--gruen)} .sp-fortschritt li[aria-current="step"]{border-top-color:var(--gruen);color:var(--gruen);font-weight:700} .sp-fortschritt-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;border:1px solid currentColor;font-weight:700} .sp-schritt{border:0;margin:0;padding:0;min-width:0} .sp-schritt-titel{color:var(--gruen);margin:.2rem 0 1rem;font-size:1.25rem} .sp-schritt-titel:focus{outline:0} .sp-schritt-titel:focus-visible{outline:2px solid var(--gruen);outline-offset:3px} .sp-schritt-nr{display:block;font-size:var(--fs-klein);font-weight:600;letter-spacing:.02em;color:var(--meta)} .sp-schritt-knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:1.2rem} .sp-schritt-knoepfe .btn{min-height:48px} .sp-schritt-knoepfe [data-sp-weiter],.sp-schritt-knoepfe [type="submit"]{margin-left:auto} .suchprofil-formular:not(.sp-mit-schritten) .sp-schritt + .sp-schritt{border-top:1px solid var(--line);padding-top:1.2rem;margin-top:.4rem} .suchprofil-formular .feld-gruppe.sp-strasse-nr{grid-template-columns:minmax(0,3fr) minmax(0,1fr)} .suchprofil-formular .feld-gruppe.sp-plz-ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .suchprofil-formular .feld-gruppe.sp-strasse-nr .feld,.suchprofil-formular .feld-gruppe.sp-plz-ort .feld{min-width:0;width:100%} /* von/bis-Paare im Suchprofil: auch auf dem Handy nebeneinander (kürzeres Formular); Eingabefelder unten bündig */ .suchprofil-formular .feld-gruppe.paar{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end} .suchprofil-formular .feld-gruppe.paar .feld-beschriftet > span{overflow-wrap:anywhere} .suchprofil-formular .feld-gruppe.paar .feld{min-width:0;width:100%} @media (min-width:560px){.sp-merkmale--zustand{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-merkmale--zwei{grid-template-columns:repeat(4,minmax(0,1fr))}} .sp-merkmal span{overflow-wrap:anywhere} .sp-merkmal--breit{margin-top:.3rem} .sp-merkmal small{color:var(--meta)} .sp-gruppe .sp-merkmal + .feld-zusatz{margin-top:.2rem} /* Suchprofil: aufklappbarer Bereich „Weitere Kriterien“ (details/summary, per Tastatur bedienbar) */ .sp-weitere{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 1.2rem} .sp-weitere summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:.6rem 0;cursor:pointer;font-weight:600;color:var(--gruen);list-style:none} .sp-weitere summary::-webkit-details-marker{display:none} .sp-weitere summary::after{content:"+";flex:none;font-size:1.3rem;line-height:1;font-weight:400} .sp-weitere[open] summary::after{content:"–"} .sp-weitere summary small{font-weight:400;color:var(--meta);margin-right:auto} .sp-weitere summary:focus-visible{outline:2px solid var(--gruen);outline-offset:2px} .sp-weitere-inhalt{padding:.4rem 0 .2rem} .sp-bestaetigen{border:1px solid var(--gruen);padding:clamp(1.1rem,4vw,2rem);margin-bottom:1.5rem} .sp-bestaetigen h3{color:var(--gruen);margin-bottom:.6rem} .sp-bestaetigen h3:focus{outline:0} .sp-bestaetigen p{margin-bottom:1rem} /* ---------- Wertermittlung: geführter Ablauf (/bewertung) ---------- */ .bewertung-wrap{max-width:calc(720px + 2 * var(--luft))} .bewertung-einleitung{margin-bottom:clamp(1.2rem,3vw,1.8rem)} .bewertung-einleitung h1{font-size:var(--fs-h2);margin-bottom:.7rem} .bewertung-ablauf{background:var(--weiss);border:1px solid var(--line);padding:clamp(1.1rem,4vw,2.2rem)} .b-kopf{margin-bottom:1.4rem} .b-stand{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--meta);margin-bottom:.55rem} .b-fortschritt{height:4px;background:var(--line)} .b-fortschritt span{display:block;height:100%;width:11%;background:var(--gruen);transition:width .3s} .b-schritt{border:0;min-width:0} .b-frage{font-family:var(--schrift-titel);font-size:clamp(1.45rem,4.6vw,1.9rem);line-height:1.15;letter-spacing:-.02em;color:var(--gruen); padding:0;margin-bottom:1.2rem;text-wrap:balance} .b-frage:focus{outline:0} .b-frage:focus-visible{outline:0} /* nur Ansage für Bildschirmleser, kein Bedienelement */ .b-hilfe{font-size:var(--fs-klein);color:var(--meta);margin:-.6rem 0 1.2rem} .kacheln{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))} .kachel{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.8rem; background:var(--weiss);border:1px solid var(--line-dunkel);color:var(--gruen);cursor:pointer;text-align:center; font-weight:600;font-size:var(--fs-klein);line-height:1.3;transition:background .15s,border-color .15s,color .15s} .kachel input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .kachel:hover{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)} .kachel:has(input:checked){background:var(--gruen);border-color:var(--gruen);color:var(--weiss)} .kachel:has(input:focus-visible){outline:2px solid var(--gruen);outline-offset:3px} .kachel svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .kachel--symbol{flex-direction:column;min-height:128px;padding:1rem .5rem} .kachel span{hyphens:auto;overflow-wrap:break-word;min-width:0} .bewertung-ablauf input[type="number"]{-moz-appearance:textfield;appearance:textfield} .bewertung-ablauf input[type="number"]::-webkit-inner-spin-button,.bewertung-ablauf input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .kacheln--art .kachel:last-child{grid-column:1/-1} .kacheln--zahl{grid-template-columns:repeat(3,minmax(0,1fr))} .kacheln--zahl .kachel{font-size:1.2rem;min-height:64px} .kacheln--liste{grid-template-columns:1fr} .kacheln--liste .kachel{justify-content:flex-start;text-align:left;padding-left:3rem} .kacheln--liste .kachel::before{content:"";position:absolute;left:1rem;top:50%;width:16px;height:16px;margin-top:-8px;border:1.5px solid currentColor} .kacheln--liste .kachel:has(input:checked)::before{background:var(--mint);border-color:var(--mint)} .kacheln--anrede{grid-template-columns:repeat(3,minmax(0,1fr))} .kacheln--anrede .kachel{min-height:48px} @media (min-width:560px){ /* 3 Kacheln oben, 2 breitere unten */ .kacheln--art{grid-template-columns:repeat(6,minmax(0,1fr))} .kacheln--art .kachel{grid-column:span 2} .kacheln--art .kachel:nth-child(n+4){grid-column:span 3} .kacheln--liste{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:720px){ .kacheln--zahl{grid-template-columns:repeat(6,minmax(0,1fr))} } .b-regler{display:grid;grid-template-columns:1fr;gap:.6rem;align-items:center} .b-regler .b-zahl{order:-1} @media (min-width:560px){.b-regler{grid-template-columns:minmax(0,1fr) auto;gap:1.2rem}.b-regler .b-zahl{order:0}} .b-regler input[type="range"]{width:100%;height:44px;background:none;accent-color:var(--gruen);cursor:pointer;-webkit-appearance:none;appearance:none} .b-regler input[type="range"]::-webkit-slider-runnable-track{height:4px;background:var(--line-dunkel)} .b-regler input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;background:var(--gruen);border:3px solid var(--weiss);box-shadow:0 0 0 1px var(--gruen);border-radius:0} .b-regler input[type="range"]::-moz-range-track{height:4px;background:var(--line-dunkel)} .b-regler input[type="range"]::-moz-range-thumb{width:22px;height:22px;background:var(--gruen);border:3px solid var(--weiss);box-shadow:0 0 0 1px var(--gruen);border-radius:0} .b-regler input[type="range"]:focus-visible{outline:2px solid var(--gruen);outline-offset:2px} .b-zahl{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--gruen)} .feld-beschriftet > .b-zahl{font-size:var(--fs-text)} .b-zahl input{width:6.5rem;text-align:right} .b-zahl--breit input{width:8rem} .bewertung-ablauf .feld{border:1px solid var(--line-dunkel);background:var(--weiss);padding:12px 14px;color:var(--text)} .bewertung-ablauf .feld:hover{border-color:var(--meta)} .bewertung-ablauf .feld:focus{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)} .b-zusatz{margin-top:1.3rem;max-width:20rem} .b-felder{display:grid;grid-template-columns:1fr;gap:.95rem;margin-bottom:.95rem} @media (min-width:480px){ .b-felder{grid-template-columns:1fr 1fr} .b-felder--strasse{grid-template-columns:minmax(0,3fr) minmax(0,1fr)} .b-felder--ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} } .b-felder--eins{grid-template-columns:1fr!important} .b-anrede{margin-bottom:1.1rem} .b-anrede-titel{display:block;font-size:var(--fs-klein);font-weight:600;color:var(--gruen);margin-bottom:.4rem} .bewertung-ablauf .checkbox-zeile input{accent-color:var(--gruen)} .b-knoepfe{display:flex;gap:10px;margin-top:1.6rem} .b-knoepfe .btn{flex:1 1 0;padding-left:14px;padding-right:14px} @media (min-width:560px){ .b-knoepfe{justify-content:space-between} .b-knoepfe .btn{flex:0 0 auto;min-width:10rem;padding-left:28px;padding-right:28px} } .b-knoepfe.b-knoepfe--nur-weiter{justify-content:flex-end} .b-pflicht{font-size:var(--fs-klein);color:var(--meta);margin-top:.7rem} .b-knoepfe--nur-weiter + .b-pflicht{text-align:right} .b-ende{text-align:center;padding:1.4rem 0 .6rem} .b-ende svg{width:56px;height:56px;margin:0 auto 1rem;fill:none;stroke:var(--gruen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .b-ende-text{font-family:var(--schrift-titel);font-size:clamp(1.45rem,4.6vw,1.9rem);line-height:1.2;color:var(--gruen);max-width:22ch;margin:0 auto} .b-ende-text:focus{outline:0} /* ---------- Ratgeber ---------- */ .ratgeber-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;max-width:980px;margin:0 auto} @media (min-width:640px){.ratgeber-grid{grid-template-columns:repeat(3,1fr);gap:1.8rem}} .ratgeber-grid.kurz{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,3vw,2.4rem);max-width:760px} .ratgeber-karte{display:flex;flex-direction:column;text-align:center;scroll-margin-top:1.5rem} .ratgeber-cover{aspect-ratio:1/1.414;overflow:hidden;margin-bottom:1rem;box-shadow:0 16px 32px var(--schatten);background:var(--line); transform:rotate(var(--rot,0deg));transition:transform .35s} .ratgeber-cover img{width:100%;height:100%;object-fit:cover} @media (max-width:639px){.ratgeber-grid:not(.kurz) .ratgeber-cover{width:62%;margin-left:auto;margin-right:auto}} .ratgeber-karte:nth-child(1) .ratgeber-cover{--rot:-2.5deg} .ratgeber-karte:nth-child(2) .ratgeber-cover{--rot:1.8deg} .ratgeber-karte:nth-child(3) .ratgeber-cover{--rot:-1.6deg} .ratgeber-karte:hover .ratgeber-cover{transform:rotate(0deg) translateY(-4px)} .ratgeber-karte h3,.ratgeber-karte h2{margin-bottom:.4rem} /* /ratgeber: Kartentitel sind h2 (direkt unter dem h1), sehen aber aus wie auf der Startseite (h3) */ .ratgeber-karte h2{font-family:var(--schrift-text);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.35;max-width:none} .ratgeber-grid.kurz h3{font-size:var(--fs-klein);hyphens:auto;overflow-wrap:break-word} .ratgeber-karte p{font-size:var(--fs-klein);color:var(--meta);margin-bottom:1rem} .ratgeber-formular{display:grid;gap:9px;text-align:left;margin-top:auto} /* ---------- Kontakt ---------- */ .kontakt-grid{display:grid;grid-template-columns:1fr;gap:1.4rem} .kontakt-grid > *{min-width:0} @media (min-width:900px){.kontakt-grid{grid-template-columns:1.1fr 1fr 1fr;align-items:stretch}} .kontakt-bild{aspect-ratio:4/3;overflow:hidden} @media (min-width:900px){.kontakt-bild{aspect-ratio:auto;height:100%;min-height:260px}} .kontakt-bild img{width:100%;height:100%;object-fit:cover} .kontakt-daten{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;align-content:center} .kontakt-daten dt{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--gruen);margin-bottom:.25rem} .f-gruen .kontakt-daten dt{color:var(--weiss)} .kontakt-daten dd{font-size:var(--fs-klein);line-height:1.5} .kontakt-daten a{border-bottom:1px solid currentColor} .karte-platz{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;background:var(--weiss);border:1px solid var(--line)} .karte-laden{background:var(--gruen);color:var(--weiss);border:0;padding:14px 22px;font-size:var(--fs-mini); font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:44px} .karte-eingebettet{width:100%;height:340px;border:0} .kontakt-kurz{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center} @media (min-width:900px){.kontakt-kurz{grid-template-columns:1.2fr 1.3fr auto;gap:3rem}} .kontakt-kurz h2{margin:0} .kontakt-kurz .btn{justify-self:start} /* Startseite: Abschnitt Immobilienpreise (Text links, zwei Knöpfe rechts; Handy untereinander, volle Breite) */ .marktzahlen-kurz{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center} .marktzahlen-kurz h2{margin:0} .marktzahlen-kurz .lede{margin-top:1rem} .marktzahlen-kurz .knopf-zeile{margin-top:0;flex-direction:column;align-items:stretch} @media (min-width:900px){.marktzahlen-kurz{grid-template-columns:minmax(0,1fr) auto;gap:3rem}} /* ---------- Google-Bewertungen (Startseite, /verkaufen; bewertungen.js) ---------- Ruhig und eckig: Schnitt als Zahl + Sterne, darunter die Bewertungen als Laufband wie das Objekt-Laufband (läuft nach links, neueste zuerst; hält bei Maus darüber, Tastatur-Fokus, Antippen und offenem „mehr lesen“; mit Finger/Maus seitlich verschiebbar). Die Bewegung macht bewertungen.js per transform. Sichtbar: unter 700 px eine Karte (Rand der nächsten schaut hervor), ab 700 px zwei, ab 1100 px drei. Alle Karten gleich hoch: langer Text wird nur OPTISCH abgeschnitten (line-clamp), der volle Text steht im DOM, „mehr lesen“ zeigt die ganze Bewertung im Dialog. Weniger Bewegung: steht, waagerecht scrollbar mit Einrasten, ohne Kopie. Sterne in CI-Grün, leere Sterne in Linienfarbe – kein Google-Gelb. */ .bewertungen-schnitt{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:var(--abstand-kopf); padding-bottom:1.2rem;border-bottom:1px solid var(--line)} .bewertungen-zahl{font-family:var(--schrift-titel);font-size:var(--fs-h2);line-height:1;color:var(--gruen)} .bewertungen-anzahl{font-size:var(--fs-klein);color:var(--meta)} .sterne{position:relative;display:inline-block;width:max-content;align-self:flex-start;line-height:0;vertical-align:middle} .sterne-leer,.sterne-voll{display:flex;gap:2px;white-space:nowrap} .sterne-voll{position:absolute;top:0;left:0;overflow:hidden} .sterne svg{flex:none;width:22px;height:22px} .sterne-leer svg{fill:var(--line)} .sterne-voll svg{fill:var(--gruen)} .sterne--klein svg{width:15px;height:15px} .bewertungen-band{--luecke:1.2rem;container-type:inline-size;overflow:hidden;touch-action:pan-y} .bewertungen-spur,.bewertungen-gruppe{display:flex;gap:var(--luecke);align-items:stretch} .bewertungen-spur{width:max-content} .bewertungen-gruppe{flex:none} .bewertungen-gruppe[aria-hidden]{display:none} .bewertungen-band.laeuft .bewertungen-gruppe[aria-hidden]{display:flex} .bewertungen-band.laeuft .bewertungen-spur{will-change:transform} .bewertungen-band.laeuft{cursor:grab} .bewertungen-band.zieht{cursor:grabbing;-webkit-user-select:none;user-select:none} .bewertung{border:1px solid var(--line);background:var(--weiss);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;min-width:0} .bewertungen-gruppe > .bewertung{flex:none;width:calc(100cqw - 2.6rem)} @media (min-width:700px){.bewertungen-gruppe > .bewertung{width:calc((100cqw - var(--luecke)) / 2)}} @media (min-width:1100px){.bewertungen-gruppe > .bewertung{width:calc((100cqw - 2 * var(--luecke)) / 3)}} .bewertung-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem} .bewertung-autor{font-weight:600;color:var(--gruen);overflow-wrap:anywhere} a.bewertung-autor{border-bottom:1px solid transparent;transition:border-color .2s} a.bewertung-autor:hover{border-bottom-color:currentColor} .bewertung-datum{font-size:var(--fs-klein);color:var(--meta)} .bewertung-text{font-size:var(--fs-klein);line-height:var(--zeilenhoehe);color:var(--text);overflow-wrap:anywhere} .bewertung-text p + p{margin-top:.7rem} .bewertung .bewertung-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden} .bewertung-aktionen{margin-top:auto;display:flex;flex-wrap:nowrap;align-items:baseline;gap:1rem;padding-top:.3rem; font-size:var(--fs-klein);line-height:1.8;white-space:nowrap} .bewertung-aktionen .bewertung-google{margin-left:auto} button.textlink{background:none;border:0;border-bottom:1px solid currentColor;padding:0;font:inherit;font-weight:600;cursor:pointer} .bewertung-dialog{margin:auto;padding:0;border:1px solid var(--line);background:var(--weiss);color:var(--text); width:min(40rem,calc(100vw - 2 * var(--luft)));max-height:calc(100dvh - 2 * var(--luft))} .bewertung-dialog::backdrop{background:var(--abdunkeln)} .bewertung-dialog-innen{display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.3rem,4vw,2rem)} .bewertung-dialog .bewertung-text{font-size:var(--fs-text)} .bewertung-dialog-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem;font-size:var(--fs-klein)} @media (prefers-reduced-motion:reduce){ .bewertungen-band{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;touch-action:auto;padding-bottom:.6rem} .bewertungen-band .bewertungen-gruppe[aria-hidden],.bewertungen-band.laeuft .bewertungen-gruppe[aria-hidden]{display:none} .bewertungen-spur{transform:none!important} .bewertungen-gruppe > .bewertung{scroll-snap-align:start} } .bewertungen-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:var(--abstand-kopf); padding-top:1.2rem;border-top:1px solid var(--line)} .bewertungen-quelle{font-size:var(--fs-klein);color:var(--meta)} /* ---------- Team ---------- */ .personen{display:grid;gap:0} .person{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1.4rem 1.2rem;align-items:start; padding:clamp(2rem,4vw,2.8rem) 0;border-top:1px solid var(--line);scroll-margin-top:1.5rem;transition:background .4s} .person:first-child{border-top:0} .person-foto{display:block;grid-column:1;grid-row:1;aspect-ratio:4/5;overflow:hidden;background:var(--line)} .person-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s} a.person-foto:hover img{transform:scale(1.03)} .person-text{grid-column:2;grid-row:1;min-width:0} @media (min-width:700px){ .person{grid-template-columns:200px minmax(0,1fr);gap:1.6rem 2.6rem} } @media (min-width:1000px){.person{grid-template-columns:240px minmax(0,1fr)}} /* Aufruf mit /team#: Karte dezent markiert */ .person.hervorgehoben{background:var(--weiss);box-shadow:inset 3px 0 0 var(--gruen),inset 0 0 0 1px var(--line); margin:0 calc(var(--luft) * -1);padding-left:var(--luft);padding-right:var(--luft)} .person-name{font-family:var(--schrift-titel);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 .35rem;max-width:none;color:var(--gruen)} .person-name a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s} .person-name a:hover{border-bottom-color:currentColor} .person-rolle{font-size:var(--fs-klein);color:var(--meta)} .person-qualifikation{font-size:var(--fs-klein);color:var(--meta);margin-top:.15rem} .person-textblock{display:grid;gap:.9rem;max-width:34rem;margin-top:1.4rem;min-width:0} .person-textblock p{font-size:var(--fs-text);line-height:1.6;max-width:none} .person-zitat{margin:0;padding-left:1rem;border-left:3px solid var(--gruen)} .person-zitat p{font-family:var(--schrift-titel);font-size:1.15rem;line-height:1.45;color:var(--gruen)} .person-seit,.person-sprachen{font-size:var(--fs-klein);color:var(--meta)} .person-sprachen-titel{font-weight:600} .person-textblock + .person-kontakt{margin-top:1.4rem} .person .kontakt-knoepfe{margin-top:.6rem} .person-kontakt:empty{display:none} .kontakt-text{display:grid;gap:2px;margin-top:.9rem;justify-items:start} .kontakt-zeile{display:flex;align-items:center;gap:.55rem;min-height:44px;font-size:15px;line-height:1.3;white-space:nowrap;color:var(--gruen)} .kontakt-zeile .nw{white-space:nowrap} .kontakt-zeile:hover{text-decoration:underline} .kontakt-zeile svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Handy: Foto links, daneben Name, Funktion, Nummer, Adresse; Knöpfe darunter über die volle Breite */ @media (max-width:699px){ .person{grid-template-columns:clamp(80px,22vw,112px) minmax(0,1fr);column-gap:12px} .person:not(.skelett) .person-text{display:contents} .person-kopf{grid-column:2;grid-row:1;min-width:0} .person-kontakt{grid-column:1/-1;grid-row:2;min-width:0} .person .kontakt-knoepfe{margin-top:0} .person-kopf .person-name{margin-top:-.2rem} .kontakt-text{margin-top:.5rem;gap:0} .kontakt-zeile{min-height:34px;gap:6px;font-size:clamp(12.5px,3.45vw,14px)} .kontakt-zeile svg{width:14px;height:14px} /* Karten mit Text: Textblock über die volle Breite unter Foto und Kopf, Knöpfe rutschen eine Zeile tiefer */ .person:not(.skelett) .person-textblock{grid-column:1/-1;grid-row:2;margin-top:.4rem} .person.mit-text .person-kontakt{grid-row:3} .person-textblock + .person-kontakt{margin-top:0} } /* Sehr schmale Geräte: Zeile als Fließtext, damit nur vor dem @ umbrochen werden kann */ @media (max-width:379px){ .kontakt-zeile{display:block;white-space:normal;padding:7px 0;line-height:1.35;min-height:0} .kontakt-zeile svg{display:inline-block;vertical-align:-2px;margin-right:6px} } /* Kontaktknöpfe (Team-Seite und Objektseite) */ .kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:10px} .kontakt-knoepfe .btn{flex:1 1 170px;padding:13px 18px;white-space:nowrap} @media (min-width:700px){.person .kontakt-knoepfe .btn{flex:0 0 auto;padding:13px 24px}} .kontakt-knoepfe svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} /* ---------- Footer: kompakt, eine Schriftgröße ---------- */ footer{background:var(--gruen);border-top:1px solid var(--line-auf-dunkel);color:var(--weiss-leise);padding:clamp(2rem,5vw,2.8rem) 0 1.4rem;font-size:13px;line-height:1.6} footer p,footer a,footer address,footer li{font-size:13px;font-style:normal} footer a{color:var(--weiss)} footer a:hover{color:var(--mint)} .fuss{display:grid;grid-template-columns:1fr;gap:1rem 3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line-auf-dunkel)} @media (min-width:900px){.fuss{grid-template-columns:auto 1fr;align-items:center}} .fuss-marke p{margin-top:.7rem;max-width:40ch} .fuss-daten{display:grid;gap:.3rem} .fuss-daten .zusammen{white-space:nowrap} @media (min-width:900px){.fuss-daten{text-align:right}} .fuss-legal{display:flex;justify-content:space-between;gap:.4rem 1.2rem;flex-wrap:wrap;padding-top:1rem} .fuss-legal ul{display:flex;gap:1.1rem;flex-wrap:wrap} /* Knopf „Cookie-Einstellungen“ (public/js/einwilligung.js blendet ihn ein): sieht aus wie die Links daneben */ .fuss-knopf{background:none;border:0;padding:0;margin:0;color:var(--weiss);font-size:13px;line-height:inherit;cursor:pointer} .fuss-knopf:hover{color:var(--mint)} /* ---------- Cookie-Banner / Einwilligung Google Analytics (public/js/einwilligung.js, Gestaltung seit 02.10.2026) ---------- Helle Karte, unten angedockt: Weiß mit Schatten, Bildmarke neben dem Titel, ruhige kleine Schrift. Auf dem Handy über die ganze Breite, ab 700 px als Karte unten rechts. Sperrt die Seite nicht (kein Schleier, kein Scroll-Stopp; neben der Karte bleibt die Seite anklickbar). Liegt unter dem Handy-Menü (z-index 90), damit die Navigation bedienbar bleibt. GLEICHWERTIGKEIT: „Nur notwendige“ und „Alle akzeptieren“ tragen dieselbe Klasse und bekommen hier dieselben Regeln (Raster 1fr 1fr, gleiche Höhe, gleiche Farben) – nie eine Regel nur für einen der beiden schreiben. „Einstellungen“ ist bewusst nur ein Textknopf. Nur CI-Farben über Variablen: Dunkelgrün, Mint, Weiß, Schwarz. */ .einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:85;pointer-events:none} .einwilligung-karte{pointer-events:auto;max-width:27rem;margin:0 auto;background:var(--weiss);color:var(--text); box-shadow:0 -6px 30px var(--schatten),0 1px 4px var(--schatten); padding:.7rem 1rem 0;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto} @media (min-width:700px){ .einwilligung{padding:0 24px 24px} .einwilligung-karte{margin:0 0 0 auto;padding:1.2rem 1.4rem .2rem;box-shadow:0 8px 30px var(--schatten),0 1px 4px var(--schatten); max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)} } .einwilligung :focus-visible{outline:2px solid var(--gruen);outline-offset:3px} .einwilligung-marke{float:left;width:19px;height:auto;margin:0 8px 0 0} .einwilligung-titel{font-family:var(--schrift-titel);font-size:1.1rem;line-height:24px;color:var(--gruen);margin-bottom:.35rem} /* Handy: das Banner soll rund ein Drittel der Fensterhöhe füllen (390×844), nie wieder knapp die Hälfte – deshalb kleine Schrift und knappe Polster. Der Text wird nie gekürzt. Keine Silbentrennung: sie zerreißt die Knopfnamen. */ .einwilligung-text{clear:left;font-size:.78rem;line-height:1.42} @media (min-width:700px){.einwilligung-text{font-size:.8125rem;line-height:1.5}} .einwilligung-links a,.einwilligung-mehr{color:var(--gruen);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em} .einwilligung-stand{font-size:.8rem;font-weight:600;color:var(--gruen);margin-top:.35rem} .einwilligung-knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:.6rem} .einwilligung .btn{width:100%;min-height:48px;padding:10px} /* Farbwechsel beim Überfahren nur mit echter Maus: auf Touch-Geräten bleibt :hover nach dem Tippen „kleben“ – beim erneuten Öffnen sähe der zuletzt getippte Knopf sonst anders aus als der andere (Gleichwertigkeit). */ .einwilligung .btn,.einwilligung .btn:hover{background:var(--gruen);border-color:var(--gruen);color:var(--weiss)} @media (hover:hover){ .einwilligung .btn:hover{background:var(--mint);border-color:var(--mint);color:var(--acc-text)} .einwilligung-links a:hover,.einwilligung-mehr:hover{color:var(--text)} } /* Zeile unter den Hauptknöpfen: Textknopf „Einstellungen“, Links „Datenschutzerklärung“ und „Impressum“ (Tippfläche 44 px hoch) */ .einwilligung-links{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.75rem} .einwilligung-links a,.einwilligung-mehr{display:inline-flex;align-items:center;min-height:44px} .einwilligung-mehr{background:none;border:0;padding:0;cursor:pointer} /* Zweite Ebene (aufgeklappt über „Einstellungen“) */ .einwilligung-ebene{border-top:1px solid var(--line);padding:.2rem 0 .8rem} .einwilligung-wahl{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.8rem;font-weight:600} .einwilligung-wahl input{width:20px;height:20px;flex:none;accent-color:var(--gruen)} .einwilligung-wahl-zusatz{font-weight:400;color:var(--meta)} .einwilligung-wahl-text{font-size:.75rem;line-height:1.4;color:var(--meta);margin:-.35rem 0 .2rem 30px} .einwilligung-ebene .btn{margin-top:.6rem} /* ---------- Objektseite (objekt.html) ---------- Reihenfolge: Bilder, Titel/Preis, Eckdaten, Beschreibung, Ausstattung, Energie, Lage, Sonstiges/Provision, Ansprechpartner + Formular. */ .objekt-seite{padding-top:clamp(0rem,2.4vw,2rem)} /* Galerie */ .objekt-galerie{margin-bottom:clamp(1.8rem,3.4vw,2.6rem)} .galerie-buehne{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line)} @media (min-width:700px){.galerie-buehne{aspect-ratio:16/9;max-height:78vh;width:100%}} .galerie-buehne img{width:100%;height:100%;object-fit:cover} .galerie-buehne.ist-grundriss,.galerie-buehne.ist-hochkant{background:var(--weiss);border:1px solid var(--line)} /* Hochkantfoto: ganz zeigen statt Mittelstreifen (Philipp 17.10.2026) */ .galerie-buehne.ist-hochkant img{object-fit:contain} .galerie-buehne.ist-grundriss img{object-fit:contain;padding:clamp(.6rem,2vw,1.6rem)} .galerie-leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)} .galerie-knopf{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;min-height:44px;padding:0 .2rem; font-size:var(--fs-mini);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen)} .galerie-knopf svg{width:18px;height:18px} .galerie-knopf:hover{color:var(--text)} .galerie-zaehler{font-size:var(--fs-klein);color:var(--meta);font-variant-numeric:tabular-nums} .galerie-reihe{position:relative;display:flex;gap:8px;overflow-x:auto;padding:.8rem 0 .3rem;scroll-snap-type:x proximity; scrollbar-width:thin;scrollbar-color:var(--line-dunkel) transparent} .galerie-reihe button{flex:0 0 auto;width:96px;aspect-ratio:3/2;border:0;padding:0;cursor:pointer;background:var(--line); scroll-snap-align:start;opacity:.62;transition:opacity .2s;position:relative;overflow:hidden} @media (min-width:700px){.galerie-reihe button{width:132px}} .galerie-reihe button img{width:100%;height:100%;object-fit:cover} .galerie-reihe button.ist-grundriss{background:var(--weiss);box-shadow:inset 0 0 0 1px var(--line)} .galerie-reihe button.ist-grundriss img{object-fit:contain;padding:4px} .galerie-reihe button:hover,.galerie-reihe button[aria-current="true"]{opacity:1} .galerie-reihe button[aria-current="true"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--gruen)} /* Handy: Bild randlos über die ganze Breite */ @media (max-width:699px){ .objekt-galerie{margin-left:calc(var(--luft) * -1);margin-right:calc(var(--luft) * -1)} .galerie-leiste,.galerie-reihe{padding-left:var(--luft);padding-right:var(--luft)} .galerie-reihe{scroll-padding-left:var(--luft)} } /* Titel und Preis */ .objekt-kopf{display:grid;grid-template-columns:1fr;gap:1.1rem 2.4rem;align-items:end; padding-bottom:clamp(1.4rem,2.6vw,2rem);margin-bottom:clamp(.6rem,1.6vw,1.2rem);border-bottom:1px solid var(--line)} @media (min-width:900px){.objekt-kopf{grid-template-columns:minmax(0,1fr) auto}} .objekt-ort{display:block;font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--meta);margin-bottom:.7rem} .objekt-kopf h1{font-size:clamp(1.75rem,3.2vw,2.7rem);line-height:1.1;letter-spacing:-.025em;max-width:30ch} .objekt-kopf .marker-inline{position:relative;top:0;margin-left:.7rem;font-family:var(--schrift-text);letter-spacing:.14em;color:var(--weiss)} /* Link kopieren / Teilen unter dem Titel (Knöpfe sind .btn, mindestens 44 px hoch) */ .objekt-teilen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:1.1rem} .objekt-teilen .btn{flex:0 0 auto} .objekt-teilen-status{margin:0;font-size:var(--fs-mini);font-weight:600;color:var(--gruen);min-height:1.2em} .objekt-teilen-status:empty{display:none} .objekt-teilen-hand{flex:1 1 100%;display:flex;flex-direction:column;gap:.3rem;font-size:var(--fs-mini);font-weight:600;color:var(--meta)} .objekt-teilen-hand input{width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--gruen);font:inherit;font-weight:500;color:var(--text);background:var(--weiss);overflow:hidden;text-overflow:ellipsis} .objekt-preis{display:flex;flex-direction:column;gap:.15rem} @media (min-width:900px){.objekt-preis{text-align:right;align-items:flex-end}} .objekt-preis span{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--meta)} .objekt-preis strong{font-family:var(--schrift-titel);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;color:var(--gruen);white-space:nowrap} /* Zwei Spalten: Inhalt links, Ansprechpartner + Formular rechts */ .objekt-layout{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4.4rem)} .objekt-layout > *{min-width:0} @media (min-width:1000px){.objekt-layout{grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);align-items:start}} .objekt-layout.ohne-haupt{grid-template-columns:minmax(0,560px);justify-content:center} .objekt-layout.ohne-haupt .objekt-haupt{display:none} /* Blöcke der Hauptspalte: gleiche Abstände, gleiche Überschriften */ .objekt-haupt .block{padding:clamp(1.8rem,3.4vw,2.4rem) 0;border-top:1px solid var(--line)} .objekt-haupt .block.erster{border-top:0} .objekt-haupt .block:last-child{padding-bottom:0} .objekt-haupt h2{font-size:clamp(1.45rem,2.2vw,1.75rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 1.1rem;max-width:none} .objekt-text{max-width:64ch;color:var(--text)} .objekt-text p{margin:0 0 1em;line-height:1.72} .objekt-text ul{margin:0 0 1em} .objekt-text li{position:relative;padding-left:1.3rem;margin-bottom:.4em;line-height:1.6} .objekt-text li::before{content:"";position:absolute;left:.1rem;top:.66em;width:6px;height:6px;background:var(--gruen)} .objekt-text .zwischen{font-size:var(--fs-text);margin:1.5em 0 .45em} .objekt-text > :first-child{margin-top:0} .objekt-text > :last-child{margin-bottom:0} /* Eckdaten: klares Raster */ .objekt-eckdaten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem} @media (min-width:560px){.objekt-eckdaten{grid-template-columns:repeat(3,minmax(0,1fr))}} .objekt-eckdaten div{border-top:1px solid var(--line-dunkel);padding:.8rem 0 1.1rem} .objekt-eckdaten dt,.energie-daten dt,.objekt-fakt dt{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--meta)} .objekt-eckdaten dd{font-family:var(--schrift-titel);font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;color:var(--gruen);margin-top:.3rem} /* Energie: Effizienzskala wie im Energieausweis */ .ea-skala{margin:0 0 1.6rem;--hoehe:36px} .ea-zeiger{position:relative;height:14px} .ea-zeiger.mit-wert{height:46px} .ea-wert{position:absolute;left:var(--pos);bottom:14px;transform:translateX(calc(var(--pos) * -1));white-space:nowrap; background:var(--gruen);color:var(--weiss);font-size:12.5px;font-weight:600;letter-spacing:.01em;padding:5px 10px;line-height:1.35} .ea-dreieck{position:absolute;left:var(--pos);bottom:2px;transform:translateX(-50%);width:0;height:0; border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid var(--gruen)} .ea-balken{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;list-style:none} .ea-balken li{height:var(--hoehe);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:0} .ea-balken .ea-a-plus{background:var(--ea-a-plus);color:var(--weiss)} .ea-balken .ea-a{background:var(--ea-a)} .ea-balken .ea-b{background:var(--ea-b)} .ea-balken .ea-c{background:var(--ea-c)} .ea-balken .ea-d{background:var(--ea-d)} .ea-balken .ea-e{background:var(--ea-e)} .ea-balken .ea-f{background:var(--ea-f)} .ea-balken .ea-g{background:var(--ea-g);color:var(--weiss)} .ea-balken .ea-h{background:var(--ea-h);color:var(--weiss)} .ea-balken li.aktiv{position:relative;z-index:1;font-size:15px;outline:2px solid var(--gruen);outline-offset:2px} .ea-grenzen{position:relative;height:1.4rem;margin:0 1px} .ea-grenzen span{position:absolute;top:.35rem;transform:translateX(-50%);font-size:10.5px;line-height:1;color:var(--meta);font-variant-numeric:tabular-nums} .ea-legende{font-size:10.5px;color:var(--meta);text-align:right;margin-top:.1rem} .energie-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem} @media (min-width:560px){.energie-daten{grid-template-columns:repeat(3,minmax(0,1fr))}} .energie-daten div,.objekt-fakt div{border-top:1px solid var(--line-dunkel);padding:.75rem 0 .9rem} .energie-daten dd,.objekt-fakt dd{color:var(--gruen);font-weight:600;margin-top:.25rem} .objekt-fakt{margin-top:1.4rem;max-width:22rem} .objekt-fakt-wert{font-family:var(--schrift-titel);font-size:clamp(1.35rem,2vw,1.6rem);color:var(--gruen);line-height:1.2} /* Rechte Spalte: Ansprechpartner-Karte über dem Formular */ .anfrage-spalte{display:grid;gap:0} .ansprech-karte{background:var(--weiss);border:1px solid var(--line);text-align:center;padding:clamp(2rem,5vw,2.6rem) clamp(1.4rem,4vw,2rem); display:flex;flex-direction:column;align-items:center} .ansprech-karte .tag{margin-bottom:1.3rem} .ansprech-foto{position:relative;display:block;width:176px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--line); margin-bottom:1.3rem;box-shadow:0 0 0 6px var(--weiss)} .ansprech-foto img{position:absolute;max-width:none;height:auto;transition:transform .5s} .ansprech-foto:hover img{transform:scale(1.03)} .ansprech-name{font-family:var(--schrift-titel);font-size:clamp(1.6rem,2.4vw,1.9rem);line-height:1.1;letter-spacing:-.02em;color:var(--gruen);margin-bottom:.35rem} .ansprech-name a{border-bottom:1px solid transparent;transition:border-color .2s} .ansprech-name a:hover{border-bottom-color:currentColor} .ansprech-karte .kontakt-knoepfe{width:100%;max-width:22rem;margin-top:1.5rem;flex-direction:column} .ansprech-karte .kontakt-knoepfe .btn{flex:none;width:100%} .ansprech-karte .btn:not(.btn--fuell){background:var(--weiss)} .ansprech-karte .btn:not(.btn--fuell):hover{background:var(--gruen)} .anfrage-kasten{border:1px solid var(--line);border-top:0;padding:clamp(1.6rem,4vw,2.2rem) clamp(1.3rem,4vw,2rem)} .ansprech-karte[hidden] + .anfrage-kasten{border-top:1px solid var(--line)} .anfrage-kasten h2{font-size:clamp(1.4rem,2.1vw,1.6rem);line-height:1.15;margin:0 0 1.3rem;max-width:none} .anfrage-kasten .feld-gruppe{margin-bottom:.95rem;gap:.95rem} @media (min-width:1000px) and (max-width:1199px){.anfrage-kasten .feld-gruppe.zwei{grid-template-columns:1fr}} .feld-beschriftet{display:grid;gap:.4rem} .feld-beschriftet > span{font-size:var(--fs-klein);font-weight:600;color:var(--gruen);letter-spacing:0} .feld-beschriftet small{font-weight:400;color:var(--meta);font-size:inherit} .anfrage-kasten .feld{border:1px solid var(--line-dunkel);background:var(--weiss);padding:12px 14px;color:var(--text);transition:border-color .2s,box-shadow .2s} .anfrage-kasten .feld:hover{border-color:var(--meta)} .anfrage-kasten .feld:focus{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)} .anfrage-kasten textarea.feld{resize:vertical;min-height:112px;line-height:1.5} .anfrage-kasten .checkbox-zeile{margin:1.1rem 0 1.3rem} .anfrage-kasten .checkbox-zeile input{accent-color:var(--gruen)} .anfrage-senden{width:100%;min-height:56px;font-size:12.5px} .objekt-404{padding:4rem 0;text-align:center} /* ---------- Verkaufte Objekte: Reiter auf /immobilien, Kennzahl, Unterseiten /referenzen/-… ---------- */ a.chip{display:inline-flex;align-items:center} @media (max-width:420px){.chips{gap:7px}.chip{padding:10px 12px;letter-spacing:.1em}} /* vier Reiter in einer Zeile ab 360 px */ .kennzahl{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0 1.2rem;margin-bottom:1.6rem} .kennzahl-wert{font-family:var(--schrift-titel);font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;color:var(--gruen)} .kennzahl-wert strong{font-weight:400;font-style:italic;white-space:nowrap} .kennzahl-grundlage{font-size:var(--fs-klein);color:var(--meta);margin-top:.5rem} .karte-objekt .dauer{margin-top:auto;font-size:var(--fs-klein);font-weight:600;color:var(--gruen);border-top:1px solid var(--line);padding-top:.7rem} .referenz-zurueck{font-size:var(--fs-klein);margin-bottom:1.4rem} .referenz-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start} @media (min-width:900px){.referenz-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}} .referenz-layout.ohne-foto{grid-template-columns:minmax(0,720px)} .referenz-foto{aspect-ratio:3/2;overflow:hidden;background:var(--line)} .referenz-foto img{width:100%;height:100%;object-fit:cover} .referenz-text h1{font-size:clamp(1.75rem,3.2vw,2.7rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:1.4rem;overflow-wrap:anywhere} .referenz-text .marker-inline{margin:0 0 1rem} @media (min-width:560px){.referenz-eckdaten{grid-template-columns:repeat(2,minmax(0,1fr))}} .referenz-hinweis{font-size:var(--fs-klein);color:var(--meta);margin-top:.2rem} .referenz-aufruf .knopf-zeile{margin-top:1.2rem} /* ---------- Immobilienpreise (/immobilienpreise, /immobilienpreise/) ---------- */ .markt-zurueck{margin-bottom:1rem;font-size:var(--fs-klein)} .markt-zurueck a{color:var(--weiss);border-bottom:1px solid var(--line-auf-dunkel)} .markt-zurueck a:hover{color:var(--mint);border-bottom-color:currentColor} .seiten-hero h1{overflow-wrap:anywhere} .markt-bloecke{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem} @media (min-width:860px){.markt-bloecke{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}} @media (min-width:860px){.markt-bloecke--eine{grid-template-columns:minmax(0,1fr);max-width:44rem}} .markt-block{border:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem);display:flex;flex-direction:column;gap:1rem;min-width:0} .markt-block h2{font-size:clamp(1.35rem,2.4vw,1.75rem);max-width:none;overflow-wrap:anywhere} .markt-wert{display:flex;flex-direction:column;gap:.2rem} .markt-zahl{font-family:var(--schrift-titel);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--gruen)} .markt-zahl-text{font-size:var(--fs-klein);color:var(--meta)} .markt-ohne-preis,.markt-block--leer p{color:var(--meta)} .markt-daten{display:grid;gap:0} .markt-daten div{border-top:1px solid var(--line);padding:.7rem 0;display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.2rem;flex-wrap:wrap} .markt-daten dt{font-size:var(--fs-klein);color:var(--meta)} .markt-daten dd{font-weight:600;color:var(--gruen);text-align:right} @media (max-width:559px){.markt-daten div{flex-direction:column;align-items:flex-start;gap:.15rem}.markt-daten dd{text-align:left}} .markt-quelle{font-size:var(--fs-klein);color:var(--meta);margin-top:auto;padding-top:.4rem} .markt-hinweis{font-size:var(--fs-text);color:var(--meta);max-width:56ch} .markt-erklaerung{max-width:calc(56rem + 2 * var(--luft))} .markt-erklaerung h2{margin-bottom:var(--abstand-kopf)} .markt-erklaerung dl{display:grid;gap:0} .markt-erklaerung dl div{border-top:1px solid var(--line-dunkel);padding:.9rem 0;display:grid;gap:.2rem 1.6rem} @media (min-width:700px){.markt-erklaerung dl div{grid-template-columns:12rem minmax(0,1fr)}} .markt-erklaerung dt{font-weight:600;color:var(--gruen)} .markt-erklaerung dd{color:var(--meta)} .markt-erklaerung .markt-quelle{margin-top:1.2rem} .markt-aufruf .lede{margin-top:1rem} .ort-links{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;margin-top:1.4rem} .ort-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:var(--abstand-kopf) 0 1.2rem} @media (min-width:600px){.ort-karten{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.ort-karten{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1280px){.ort-karten{grid-template-columns:repeat(4,minmax(0,1fr))}} .ort-karte{position:relative;border:1px solid var(--line);padding:1.1rem 1.2rem;transition:border-color .2s} .ort-karte:hover{border-color:var(--gruen)} .ort-karte h3{font-size:var(--fs-h3);margin-bottom:.5rem} .ort-karte h3 a{border-bottom:1px solid currentColor} .ort-karte h3 a::after{content:"";position:absolute;inset:0} .ort-werte div{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0} .ort-werte dt{font-size:var(--fs-klein);color:var(--meta)} .ort-werte dd{font-weight:600;color:var(--gruen)} .ort-leer{font-size:var(--fs-klein);color:var(--meta)} .fuss-orte{padding:1rem 0;border-bottom:1px solid var(--line-auf-dunkel);color:var(--weiss-leise)} .fuss-orte a{white-space:nowrap} .fuss-orte b{font-weight:600} /* ---------- Diagramme (Inline-SVG) und Umschalter ---------- */ .dg{display:block;overflow:visible;font-family:var(--schrift-text)} .dg-text{font-size:13px;fill:var(--meta)} .dg-stark{fill:var(--text);font-weight:600} .dg-leise{font-size:12px;fill:var(--meta)} .dg-achse,.dg-raster{stroke:var(--line);stroke-width:1} .dg-balken.dg-haus{fill:var(--diagramm-haus)} .dg-balken.dg-wohnung{fill:var(--diagramm-wohnung)} /* Spanne Wohnung: Balken hohl (schwarzer Rand), sonst verschwände die schwarze Median-Linie im schwarzen Balken */ .dg-spanne .dg-balken.dg-wohnung{fill:var(--weiss);stroke:var(--diagramm-wohnung);stroke-width:2} .dg-linie{stroke-width:2;stroke-linecap:round;fill:none} .dg-linie.dg-haus{stroke:var(--diagramm-haus)} .dg-linie.dg-wohnung{stroke:var(--diagramm-wohnung)} .dg-punkt{stroke:var(--weiss);stroke-width:2} .dg-punkt.dg-haus{fill:var(--diagramm-haus)} .dg-punkt.dg-wohnung{fill:var(--diagramm-wohnung)} .dg-median{stroke:var(--text);stroke-width:2} .dg-schnitt{fill:var(--weiss);stroke:var(--text);stroke-width:2} @media (max-width:480px){.dg-jahr-neben{display:none}} .dg-figur{margin:.4rem 0 0} .dg-figur figcaption{font-size:var(--fs-klein);color:var(--meta);margin-top:.3rem} .dg-figur--breit{max-width:56rem;margin-top:1.2rem} .dg-spanne{max-width:26rem} .dg-legende{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:var(--fs-klein);color:var(--text);margin-bottom:.6rem} .dg-legende-eintrag{display:inline-flex;align-items:center;gap:.45rem} .dg-muster{display:inline-block;width:18px;height:4px} .dg-muster.dg-haus{background:var(--diagramm-haus)} .dg-muster.dg-wohnung{background:var(--diagramm-wohnung)} .dg-ohne{font-size:var(--fs-klein);color:var(--meta);margin-top:.6rem} .dg-tabelle{margin-top:1rem;font-size:var(--fs-klein)} .dg-tabelle summary{cursor:pointer;color:var(--gruen);font-weight:600} .dg-tabelle table{border-collapse:collapse;margin-top:.6rem;min-width:16rem} .dg-tabelle th,.dg-tabelle td{text-align:left;padding:.3rem 1rem .3rem 0;border-bottom:1px solid var(--line-dunkel)} /* Monatsverlauf (12 Monate): Linien im inneren SVG, direkte Beschriftung mit Hof in Flächenfarbe, Monatsnamen auf schmalen Bildschirmen nur jeder 2. bzw. 3. (der jüngste immer) */ .dg-monate{overflow:visible} .dg-linien{overflow:visible} .dg-punkt.dg-klein{stroke-width:1.5} .dg-name{paint-order:stroke;stroke:var(--weiss);stroke-width:4px;stroke-linejoin:round} .f-weiss .dg-name{stroke:var(--weiss)} @media (max-width:800px){.dg-neben-2{display:none}} @media (max-width:480px){.dg-neben-2{display:inline}.dg-neben-3{display:none}} .dg-tabelle-rolle{overflow-x:auto} .dg-tabelle-rolle table{min-width:34rem} .dg-tabelle-rolle th,.dg-tabelle-rolle td{white-space:nowrap} .dg-unter{margin-top:1.8rem} .umschalt-gruppe{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0 1.2rem} .umschalt-knopf{font-family:var(--schrift-text);font-size:var(--fs-klein);font-weight:600;padding:9px 14px;min-height:40px;border:1.5px solid var(--gruen);background:var(--weiss);color:var(--gruen);cursor:pointer} .umschalt-knopf[aria-pressed="true"]{background:var(--gruen);color:var(--weiss)} .zr-zeitraum{font-size:var(--fs-klein);color:var(--meta);margin-bottom:1rem} .markt-unter{font-size:var(--fs-klein);font-weight:600;color:var(--gruen);margin-top:.4rem} /* Zeile unter den Dauerwerten: „Gerechnet aus N inzwischen beendeten Angeboten (von M im Zeitraum).“ */ .markt-dauer-basis{font-size:var(--fs-klein);color:var(--meta)} .markt-block h3{font-family:var(--schrift-titel);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.55rem);overflow-wrap:anywhere} .markt-hinweis-text{margin-top:1.4rem;font-size:var(--fs-klein);color:var(--meta);max-width:62ch} .mf-kachel--breit{grid-column:1/-1} .mf-median-hinweis{margin-top:1rem;font-size:var(--fs-klein);color:var(--meta);max-width:62ch} .mf-verlauf{margin-top:1rem} .mf-kontakt{border:0;border-top:1px solid var(--line);padding:1rem 0 0;margin:0;min-width:0} .mf-kontakt legend{font-weight:600;color:var(--gruen);font-size:var(--fs-klein);padding:0 0 .6rem} .mf-kontakt-felder{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem} @media (min-width:640px){.mf-kontakt-felder{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.mf-kontakt-felder{grid-template-columns:repeat(5,minmax(0,1fr))}} .mf-kontakt .checkbox-zeile input{accent-color:var(--gruen)} .mf-mailhinweis{margin-top:1rem;font-size:var(--fs-klein);color:var(--gruen);font-weight:600} /* ---------- Marktfinder (/marktfinder) ---------- */ .zeile .knopf-zeile{margin-top:0} .mf-wrap{max-width:calc(64rem + 2 * var(--luft))} .mf-formular{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;border:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem)} @media (min-width:640px){.mf-formular{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.mf-formular{grid-template-columns:repeat(5,minmax(0,1fr))}} .mf-breit{grid-column:1/-1} .mf-formular .feld{border:1px solid var(--line-dunkel);background:var(--weiss);padding:12px 14px;color:var(--text);width:100%;min-height:48px} .mf-formular .btn{width:100%} @media (min-width:640px){.mf-formular .btn{width:auto}} .mf-status{margin-top:1.2rem;padding:.9rem 1.1rem;border:1px solid var(--line-dunkel);background:var(--weiss);color:var(--gruen);font-weight:600} .mf-status--fehler{background:var(--fehler-bg);border-color:var(--fehler-rand);color:var(--fehler-text)} .mf-ergebnis:empty{display:none} .mf-ergebnis{margin-top:clamp(1.6rem,4vw,2.6rem)} .mf-ergebnis-kopf{max-width:none} .mf-ergebnis-kopf:focus{outline:none} .mf-ergebnis-kopf{scroll-margin-top:1.2rem} .mf-filter{font-weight:600;color:var(--gruen);margin-top:.8rem;overflow-wrap:anywhere} .mf-zeitraum{color:var(--meta);font-size:var(--fs-klein);margin-top:.3rem} .mf-kacheln{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1.4rem} @media (min-width:700px){.mf-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}} .mf-kachel{border:1px solid var(--line);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;min-width:0} .mf-titel{font-size:var(--fs-klein);font-weight:600;color:var(--meta)} .mf-wert{font-family:var(--schrift-titel);font-size:clamp(2rem,4.4vw,2.8rem);line-height:1.1;color:var(--gruen)} .mf-zusatz{font-size:var(--fs-klein);color:var(--text)} .mf-quelle{font-size:var(--fs-klein);color:var(--meta);margin-top:auto;padding-top:.5rem} .mf-hinweis{margin-top:1.2rem;padding:.9rem 1.1rem;background:var(--weiss);border:1px solid var(--line-dunkel);border-left:5px solid var(--gruen);color:var(--gruen)} .mf-osm{margin-top:1rem;font-size:var(--fs-klein);color:var(--meta)} .mf-osm a{text-decoration:underline} .mf-info h2{margin-bottom:var(--abstand-kopf)} .mf-verweis{margin-top:1.4rem} /* Ort- und Straßenfeld mit Vorschlägen (Combobox): Liste direkt unter dem Feld, Einträge ≥ 48 px, ganze Zeile tippbar. Die Höhe begrenzt marktfinder.js anhand von window.visualViewport (Handy: über der Tastatur). */ .mf-ortsfeld > label{font-size:var(--fs-klein);font-weight:600;color:var(--gruen)} .mf-combo{position:relative} .mf-combo .feld[aria-expanded="true"]{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)} .mf-vorschlaege{position:absolute;left:0;right:0;top:100%;z-index:40;margin:0;padding:0;list-style:none;background:var(--weiss); border:1px solid var(--gruen);border-top:0;max-height:20rem;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; box-shadow:0 10px 24px var(--schatten)} .mf-vorschlaege[hidden]{display:none} .mf-vorschlag{display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em;min-height:48px;padding:10px 14px;cursor:pointer;color:var(--text); border-top:1px solid var(--line);line-height:1.3;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .mf-vorschlag:first-child{border-top:0} .mf-vorschlag-name{font-weight:600;color:var(--gruen)} .mf-vorschlag-ort{color:var(--meta)} @media (hover:hover){.mf-vorschlag:hover{background:var(--line)}} .mf-vorschlag[aria-selected="true"]{background:var(--gruen);color:var(--weiss)} .mf-vorschlag[aria-selected="true"] .mf-vorschlag-name{color:var(--weiss)} .mf-vorschlag[aria-selected="true"] .mf-vorschlag-ort{color:var(--weiss-leise)} .mf-feldhinweis{font-size:var(--fs-klein);color:var(--meta);margin:0} .mf-ortsfeld{scroll-margin-top:.75rem} .mf-osm--formular{margin-top:-.4rem} /* Ort außerhalb der Region: freundlicher Hinweis, kein roter Fehler */ .mf-status--region{border-left:5px solid var(--gruen);color:var(--text);font-weight:400} .mf-status--region .mf-region-titel{display:block;color:var(--gruen);font-weight:600;margin-bottom:.3rem} .mf-status--region a{font-weight:600} /* ---------- 404 / Danke ---------- */ .seite-404,.seite-danke{text-align:center} .seite-404 h1{font-size:clamp(3rem,14vw,6rem)} .seite-danke .wrap,.seite-404 .wrap{max-width:44rem} .seite-danke .lede,.seite-404 .lede{margin:1rem auto 1.8rem} /* ---------- Impressum/Datenschutz/Widerruf ---------- */ .rechtstext{max-width:74ch} .rechtstext h1{margin-bottom:1.4rem} .rechtstext h2{font-size:1.3rem;margin:2rem 0 .8rem;max-width:none} .rechtstext h3{margin:1.4rem 0 .5rem} .rechtstext p,.rechtstext li{font-size:var(--fs-klein);color:var(--meta);margin-bottom:.8rem;line-height:1.7} .rechtstext li{padding-left:1.2rem;position:relative} .rechtstext li::before{content:"–";position:absolute;left:0} .rechtstext a{text-decoration:underline} .entwurf-hinweis{background:var(--entwurf-bg);border:1px solid var(--entwurf-rand);color:var(--entwurf-text);padding:1rem 1.2rem;font-size:var(--fs-klein);margin-bottom:2rem} .platzhalter-eckig{color:var(--platzhalter-text);background:var(--entwurf-bg);padding:.1em .3em} @media (prefers-reduced-motion:reduce){ .karte-objekt .bild img,.chip,.btn,.ratgeber-cover,.kachel,.b-fortschritt span{transition:none} } /* „Preise in Ihrer Nachbarschaft“ (public/js/erkunden.js) und Bezug an jeder Kennzahl */ .markt-bezug{font-size:var(--fs-klein);color:var(--meta);font-weight:600} .erkunden{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.6rem} .erkunden-zusatz{margin-top:.4rem;color:var(--meta)} .erkunden-form{display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:flex-end;margin-top:1rem} .erkunden-form label{display:flex;flex-direction:column;gap:.35rem;font-size:var(--fs-klein);color:var(--meta);flex:1 1 11rem;min-width:0} .erkunden-form input,.erkunden-form select{border:1px solid var(--line-dunkel);background:var(--weiss);padding:11px 12px;color:var(--text);width:100%} .erkunden-ergebnis{margin-top:1.2rem;display:grid;gap:1rem;max-width:44rem} .erkunden-meldung--fehler{color:var(--fehler-text)} .erkunden-adresse{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} /* Hinweis „Angebotspreise …“ unter den Zahlen: gut sichtbar, normale Schriftgröße (kein Kleingedrucktes) */ .markt-hinweis-kasten{margin-top:1.6rem;background:var(--weiss);border:1px solid var(--line-dunkel);border-left:5px solid var(--gruen);padding:1.1rem 1.3rem;font-size:var(--fs-text);color:var(--text);max-width:62ch;display:grid;gap:.6rem} .markt-hinweis-knopf{margin-top:1rem} /* ---------- Handy-Ansicht Immobilienpreise + Marktfinder (Philipp 23.09.2026) ---------- body.markt-seite = /immobilienpreise, /immobilienpreise/, /marktfinder. Ziel auf dem Handy: Fließtext 16 px (Quellen 14 px), Tippziele ≥ 44 px, Eingaben 16 px (iOS zoomt sonst), Kennzahlen als Karten untereinander (große Zahl, Beschriftung darunter), Monatstabelle als Liste statt breiter Tabelle, kein seitliches Wischen. Desktop bleibt. */ /* Für alle Breiten: Tippflächen und Eingaben */ .wrap > .erkunden:first-child{margin-top:0;border-top:0;padding-top:0} /* Übersicht: eigener Abschnitt, keine Trennlinie oben */ .umschalt-knopf{min-height:44px} .dg-tabelle summary{padding:.75rem 0} .erkunden-form input,.erkunden-form select{font-size:16px;min-height:48px} .erkunden-form .btn{min-height:48px} .marke{min-height:44px} .checkbox-zeile{min-height:44px} .mf-stufen-hinweis{font-size:var(--fs-klein);color:var(--meta);margin-top:-.3rem} .mf-kontakt{scroll-margin-top:1.2rem} .mf-feldfehler{margin-top:-.5rem;font-size:var(--fs-klein);font-weight:600;color:var(--fehler-text)} /* „Sie wollen es genauer wissen …“ steht unter Formular und Ergebnis (nicht mehr zwischen Suche und Knopf) */ .mf-genauer{margin-top:clamp(1.6rem,4vw,2.6rem);padding-top:clamp(1.2rem,3vw,1.6rem);border-top:1px solid var(--line);max-width:62ch} .mf-genauer .btn{margin-top:1rem} @media (max-width:639px){.mf-genauer .btn{width:100%}} /* Kopf- und Fußzeile auf Handy/Tablet: größere Tippfläche ohne Layoutsprung */ @media (max-width:899px){ .topbar a{display:inline-block;padding:12.5px 0;margin:-12.5px 0} .fuss-legal a,.fuss-legal .fuss-knopf{display:inline-block;padding:14px 0;margin:-14px 0} } /* Links, die für sich stehen (Nachbarorte, Ortslisten, Zurück): 44 px hoch, Unterstrich statt Rahmen */ @media (max-width:899px){ .markt-seite .markt-zurueck a,.markt-seite .ort-links a,.markt-seite .markt-rundum-liste dt a, .markt-seite .mf-verweis a,.markt-seite .mf-verlauf a,.markt-seite .erkunden-verweis a{ display:inline-block;padding:.7rem 0;border-bottom:0; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em} .markt-seite .markt-zurueck{margin-bottom:.4rem} .markt-seite .ort-links{gap:0 1.4rem;margin-top:.6rem} } @media (max-width:599px){ .markt-seite{--fs-klein:1rem} /* Quellenzeilen dürfen kleiner sein, bleiben aber ≥ 14 px */ .markt-seite .markt-quelle,.markt-seite .dg-figur figcaption,.markt-seite .mf-quelle,.markt-seite .mf-osm{font-size:.875rem;line-height:1.55} /* Keine automatische Silbentrennung: Chrome trennte „Bietigh-eim“ falsch. Ortsnamen brechen am eigenen Bindestrich (Bietigheim-/Bissingen); overflow-wrap nur als Notnagel für Überlängen. */ .markt-seite h1,.markt-seite h2,.markt-seite h3{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:anywhere} .markt-seite .markt-block h3{text-wrap:pretty} .markt-seite main p,.markt-seite main li,.markt-seite main dd{line-height:1.55} /* Einstieg: wichtigster Knopf im ersten Bildschirm, volle Breite */ .markt-seite .seiten-hero{padding-top:1.8rem;padding-bottom:2.2rem} .markt-seite .seiten-hero h1{font-size:clamp(1.95rem,9vw,2.4rem);line-height:1.06;margin-bottom:.8rem} .markt-seite .seiten-hero .lede{margin-bottom:0} .markt-seite .seiten-hero .knopf-zeile{margin-top:1.3rem} .markt-seite .seiten-hero .knopf-zeile .btn{width:100%} /* Umschalter 3/6/12 Monate/3 Jahre bzw. Häuser/Wohnungen: gleich breit im Raster */ .markt-seite .umschalt-gruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .markt-seite .umschalt-gruppe[hidden]{display:none} .markt-seite .umschalt-knopf{width:100%;padding:10px 8px} /* Kennzahlen als Karten: eine Kennzahl je Zeile, große Zahl, Beschriftung darunter */ .markt-seite .markt-bloecke{gap:2.4rem} .markt-seite .markt-block,.markt-seite .mf-kachel{border:0;border-top:2px solid var(--gruen);padding:1.1rem 0 0;gap:.8rem} .markt-seite .markt-wert{background:var(--weiss);border:1px solid var(--line);padding:1rem 1.1rem;gap:.1rem} .markt-seite .f-hell .markt-wert{background:var(--weiss)} .markt-seite .markt-zahl,.markt-seite .mf-wert{font-size:clamp(2.3rem,11vw,2.9rem)} .markt-seite .markt-zahl-text{color:var(--meta)} .markt-seite .markt-daten:not(.markt-rundum-liste){gap:.6rem} .markt-seite .markt-daten:not(.markt-rundum-liste) div{flex-direction:column-reverse;align-items:flex-start;gap:.05rem; border:1px solid var(--line);padding:.75rem 1.1rem} .markt-seite .f-hell .markt-daten:not(.markt-rundum-liste) div{border-color:var(--line-dunkel);background:var(--weiss)} .markt-seite .markt-daten:not(.markt-rundum-liste) dd{font-family:var(--schrift-titel);font-weight:400; font-size:clamp(1.45rem,6.6vw,1.8rem);line-height:1.15;text-align:left;letter-spacing:-.01em} .markt-seite .markt-daten dt{color:var(--meta)} .markt-seite .markt-unter{margin-top:.6rem} .markt-seite .markt-hinweis-kasten{padding:1rem 1.1rem;border-left-width:4px} .markt-seite .markt-hinweis-knopf .btn{width:100%} /* Nachbarorte: Ort als eigener Link, Werte darunter */ .markt-seite .markt-rundum-liste div{padding:.2rem 0 .8rem} .markt-seite .markt-rundum-liste dd{font-weight:400;color:var(--text);line-height:1.6} /* Monatswerte: Liste statt breiter Tabelle (Kopfzeile bleibt für Vorleser) */ .markt-seite .dg-tabelle-rolle{overflow:visible} .markt-seite .dg-tabelle-liste{display:block;min-width:0;width:100%} .markt-seite .dg-tabelle-liste thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .markt-seite .dg-tabelle-liste tbody,.markt-seite .dg-tabelle-liste tr{display:block} .markt-seite .dg-tabelle-liste tr{border-top:2px solid var(--line-dunkel);padding:.4rem 0 .7rem} .markt-seite .dg-tabelle-liste th[scope="row"]{display:block;border:0;padding:.35rem 0;color:var(--gruen);font-weight:600} .markt-seite .dg-tabelle-liste td{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;white-space:normal;border-bottom:1px solid var(--line)} .markt-seite .dg-tabelle-liste td:last-child{border-bottom:0} .markt-seite .dg-tabelle-liste td::before{content:attr(data-label);color:var(--meta)} .markt-seite .dg-tabelle table:not(.dg-tabelle-liste){width:100%;min-width:0} /* „Preise in Ihrer Nachbarschaft“: Felder untereinander, volle Breite */ .markt-seite .erkunden-form{flex-direction:column;align-items:stretch;gap:1rem} .markt-seite .erkunden-form label{flex:none;color:var(--text);font-weight:600} .markt-seite .erkunden-form .btn{width:100%} .markt-seite .erkunden-adresse{flex-direction:column;align-items:stretch;gap:.6rem} .markt-seite .erkunden-adresse .btn{width:100%} /* Marktfinder: Felder untereinander, volle Breite, Labels darüber */ .markt-seite .mf-formular{border:0;padding:0;gap:1.2rem} .markt-seite .mf-formular .feld{min-height:50px} .markt-seite .mf-kontakt{padding-top:1.4rem} .markt-seite .mf-kacheln{gap:2rem} .markt-seite .mf-kachel{gap:.3rem} .markt-seite main p.mf-wert{line-height:1;margin-bottom:-.15rem} .markt-seite .mf-kachel .markt-daten,.markt-seite .mf-kachel .dg-figur{margin-top:.8rem} .markt-seite .knopf-zeile .btn{flex:1 1 100%} } /* ---------- Handy-Fassungen der Diagramme (_lib/diagramme.mjs: spanneHandy, monatsverlaufHandy, verlaufHandy, vergleichHandy, miniBalken) ---------- Desktop: ausgeblendet, das bisherige Diagramm bleibt unverändert. Unter 600 px umgekehrt: Handy-Fassung sichtbar, Desktop-SVG derselben Figur display:none (nur eine Fassung wird dargestellt → aria-label je Diagramm genau einmal). */ .dgh,.dgh-mini{display:none} @media (max-width:599px){ .dgh{display:block} .dg-figur:has(> .dgh) > svg.dg,.dg-figur:has(> .dgh) > .dg-legende{display:none} .dg-figur--breit:has(> .dgh){margin-top:1.4rem} .dgh-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--schrift-text)} .dgh-t{font-size:15px;fill:var(--text)} .dgh-stark{font-weight:600} .dgh-leise{font-size:14px;fill:var(--meta)} .dgh-name{font-size:13px;font-weight:600;fill:var(--meta);letter-spacing:.01em} .dgh-gross{font-size:18px} .dgh-ort{font-size:16px;font-weight:600;fill:var(--gruen);text-decoration:underline} .dgh-zahl{font-variant-numeric:tabular-nums} .dgh-fl.dgh-haus,.dgh-punkt.dgh-haus{fill:var(--diagramm-handy-haus)} .dgh-fl.dgh-wohnung,.dgh-punkt.dgh-wohnung{fill:var(--diagramm-handy-wohnung)} .dgh-fl.dgh-wohnung{fill:var(--weiss);stroke:var(--diagramm-handy-wohnung);stroke-width:2.5} /* hohl, Median bleibt sichtbar */ .dgh-linie{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .dgh-linie.dgh-haus{stroke:var(--diagramm-handy-haus)} .dgh-linie.dgh-wohnung{stroke:var(--diagramm-handy-wohnung)} .dgh-punkt{stroke:none} .dgh-punkt.dgh-ende{stroke:var(--weiss);stroke-width:2.5} .f-hell .dgh-punkt.dgh-ende{stroke:var(--weiss)} .dgh-achse{font-size:13px;fill:var(--meta)} .dgh-raster{stroke:var(--line);stroke-width:1} .f-hell .dgh-raster{stroke:var(--line-dunkel)} .dgh-fuehrung{stroke:var(--meta);stroke-width:1;fill:none} .dgh-spur{stroke:var(--line-dunkel);stroke-width:2} .dgh-median{stroke:var(--text);stroke-width:3;stroke-linecap:round} .dgh-schnitt{fill:var(--weiss);stroke:var(--text);stroke-width:2.5} .dgh-muster{display:inline-block;flex:none;width:14px;height:14px} .dgh-muster.dgh-haus{background:var(--diagramm-handy-haus)} .dgh-muster.dgh-wohnung{background:var(--diagramm-handy-wohnung)} .dgh-block{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--gruen);margin:1.6rem 0 .5rem} .dgh-block:first-child{margin-top:.3rem} /* Kennwerte unter dem Monatsverlauf: groß, als Klartext */ .dgh-kennwerte{display:grid;gap:.7rem;margin-top:1.1rem} .dgh-kennwert{background:var(--weiss);border:1px solid var(--line-dunkel);padding:.85rem 1.1rem;line-height:1.45} .dgh-kennwert .dgh-muster{margin-right:.5rem;vertical-align:-1px} .dgh-kw-name{font-weight:600;color:var(--gruen)} .dgh-kw-wert{display:block;font-family:var(--schrift-titel);font-weight:400;font-size:clamp(1.8rem,8.5vw,2.2rem);line-height:1.1;color:var(--gruen);margin:.3rem 0 .1rem} .dgh-kw-wann{color:var(--text)} .dgh-kw-vorher{display:block;color:var(--meta)} /* Ortsvergleich: je Ort ein Link über die ganze Zeile */ .dgh-vergleich ol{list-style:none;display:grid;gap:.5rem} .dgh-ort-link{display:block;min-height:44px;padding:.3rem 0} .dgh-ort-link:focus-visible{outline:2px solid var(--gruen);outline-offset:3px} /* Kleine Balken in Listen (Monatswerte, Orte rundum) */ .dgh-mini{display:block;width:100%;height:8px;margin:.35rem 0 .15rem} .markt-rundum-liste dd br{display:none} .markt-seite .markt-rundum-liste div{align-items:stretch} .markt-seite .markt-rundum-liste dd{width:100%} .dgh-rund{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:.35rem 0 .45rem} .dgh-rund .dgh-r-art{color:var(--meta)} .dgh-rund .dgh-r-wert{font-weight:600;color:var(--text);text-align:right} .dgh-rund .dgh-r-trenn{display:none} .dgh-rund .dgh-r-bezug{grid-column:1/-1;color:var(--meta);grid-row:3} .dgh-rund .dgh-mini{grid-column:1/-1;grid-row:2;margin:.3rem 0 .25rem} .markt-seite .dg-tabelle-liste td{flex-wrap:wrap} .markt-seite .dg-tabelle-liste td .dgh-mini{flex:1 0 100%;margin:.15rem 0 .2rem} .markt-seite .dg-tabelle-liste td:not([data-label$="Median"]){color:var(--meta)} .markt-seite .dg-tabelle-liste td[data-label$="Median"]{font-weight:600;color:var(--text)} } /* ---------- Maklerseiten (/makler, /makler/), Ortsporträt, Erklärseite (24.09.2026) ---------- */ /* Brotkrumen im dunklen Einstieg: Links für sich stehend → 44 px hoch */ .brotkrumen{margin:0 0 .6rem;font-size:var(--fs-klein)} .brotkrumen ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;color:var(--weiss-leise)} .brotkrumen li{display:inline-flex;align-items:center;min-width:0} .brotkrumen li + li::before{content:"›";padding:0 .55rem;color:var(--weiss-leise)} .brotkrumen a{display:inline-flex;align-items:center;min-height:44px;color:var(--weiss);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em} .brotkrumen a:hover{color:var(--mint)} .brotkrumen [aria-current]{overflow-wrap:anywhere} .makler-hero .lede + .lede{margin-top:.8rem} /* Fließtext der Abschnitte: gut lesbare Zeilenlänge */ .makler-text{max-width:calc(44rem + 2 * var(--luft))} .makler-text h2{margin-bottom:1rem} .makler-text p + p,.makler-text h3 + p{margin-top:.9rem} .makler-text h3{margin-top:1.6rem} .makler-text p{max-width:68ch} /* Wohnlagen: auf dem Handy eine Spalte, Karten untereinander */ .wohnlagen{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:var(--abstand-kopf);list-style:none} @media (min-width:640px){.wohnlagen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.wohnlagen{grid-template-columns:repeat(3,minmax(0,1fr))}} .wohnlage{border:1px solid var(--line-dunkel);background:var(--weiss);padding:1.1rem 1.2rem;min-width:0} .wohnlage h3{margin-bottom:.4rem;overflow-wrap:anywhere} .wohnlage p{font-size:var(--fs-text);color:var(--text)} #wohnlagen .lede,#ansprechpartner .lede{margin-top:.8rem} #referenzen .objekt-liste,#angebote .objekt-liste,#bewertungen .makler-bewertungen,#ansprechpartner .personen{margin-top:var(--abstand-kopf)} /* Bewertungen im Ort: ganzer Text, nicht abgeschnitten */ .makler-bewertungen{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem} @media (min-width:700px){.makler-bewertungen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.makler-bewertungen{grid-template-columns:repeat(3,minmax(0,1fr))}} .makler-bewertung .bewertung-text{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible} .makler-bewertung .bewertung-aktionen a,.makler-bewertung a.bewertung-autor{display:inline-flex;align-items:center;min-height:44px} #bewertungen .bewertungen-quelle{margin-top:1.2rem} .makler-preise p{max-width:62ch} .makler-aufruf .lede{margin-top:1rem} /* Übersicht /makler: je Ort eine Karte */ .makler-orte{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;list-style:none} @media (min-width:700px){.makler-orte{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.makler-orte{grid-template-columns:repeat(3,minmax(0,1fr))}} .makler-ort{display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--line);padding:1.3rem 1.4rem;min-width:0} .makler-ort h2{font-size:clamp(1.4rem,2.4vw,1.8rem);overflow-wrap:anywhere} .makler-ort p{color:var(--meta);flex:1} .makler-ort .btn{align-self:flex-start} /* Ortsporträt auf /immobilienpreise/: Quellen klein, Links 44 px hoch */ .portraet-quellen{margin-top:1.4rem;font-size:var(--fs-klein);color:var(--meta)} .portraet-quellen ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 1.4rem} .portraet-quellen a,.referenz-ort-links a,.markt-erklaerung-link a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em} .markt-erklaerung-link{margin-top:1rem} .referenz-ort-links{margin-top:1rem} #ansprechpartner .person-name a{display:inline-flex;align-items:center;min-height:44px} /* Links im Fließtext auf dunklem Grund (Einleitung der Maklerseiten) */ .seiten-hero .textlink,.f-gruen .makler-text .textlink{color:var(--weiss)} .seiten-hero .textlink:hover{color:var(--mint)} /* ---------- Ratgeber-Artikel (/ratgeber/), SEO-Hauptseiten, FAQ (24.09.2026) ---------- Handy zuerst, eckig, nur Variablen. Lesebreite ca. 70 Zeichen. Tippziele ≥ 44 px. */ /* Artikel-Karten auf /ratgeber */ .ratgeber-artikel-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;list-style:none} @media (min-width:700px){.ratgeber-artikel-liste{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.ratgeber-artikel-liste{grid-template-columns:repeat(3,minmax(0,1fr))}} .ratgeber-artikel-karte{display:flex;flex-direction:column;gap:.6rem;background:var(--weiss);border:1px solid var(--line-dunkel);padding:1.2rem 1.3rem;min-width:0} .ratgeber-artikel-karte h3{overflow-wrap:anywhere} .ratgeber-artikel-karte p{color:var(--meta);flex:1} .ratgeber-artikel-karte .btn{align-self:flex-start} #pdf-ratgeber > .wrap > .tag{text-align:center;margin-bottom:var(--abstand-kopf)} /* Einzelner Link unter einem Absatz (Verweis auf Artikel/Hauptseite): 44 px hoch */ .link-zeile{margin-top:1rem} .link-zeile a{display:inline-flex;align-items:center;min-height:44px} /* Kopf des Artikels:
– die allgemeine header-Regel (weiß, Linie, z-index der Seitenleiste) gilt hier nicht; Innenabstand wie ein Abschnitt. */ header.ratgeber-kopf{position:static;z-index:auto;border-bottom:0;background:var(--gruen);padding:var(--abstand) 0} .ratgeber-kopf h1{max-width:26ch} .ratgeber-stand{margin-top:.8rem;font-size:var(--fs-klein);color:var(--weiss-leise)} /* Rumpf: Lesespalte; großer section-Innenabstand der Seite gilt im Artikel nicht */ .ratgeber-rumpf{max-width:calc(44rem + 2 * var(--luft));padding-top:clamp(2rem,5vw,3rem);padding-bottom:var(--abstand)} .ratgeber-artikel section{padding:0;margin-top:clamp(2rem,5vw,3rem);scroll-margin-top:1.5rem} .ratgeber-rumpf p,.ratgeber-rumpf li,.ratgeber-rumpf dd{max-width:68ch} .ratgeber-rumpf p + p,.ratgeber-rumpf h3 + p,.ratgeber-rumpf ul + p,.ratgeber-rumpf ol + p,.ratgeber-rumpf dl + p{margin-top:.9rem} .ratgeber-rumpf h2{margin-bottom:1rem;max-width:none} .ratgeber-rumpf h3{margin:1.6rem 0 .5rem} .ratgeber-rumpf p a:not(.btn),.ratgeber-rumpf li a:not(.btn),.ratgeber-rumpf dd a:not(.btn){color:var(--gruen);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;padding-block:.8rem} .ratgeber-rumpf .pfeil-liste{margin-top:.9rem} /* Inhaltsverzeichnis */ .ratgeber-inhalt{background:var(--weiss);border:1px solid var(--line);border-left:5px solid var(--gruen);padding:1.1rem 1.2rem} .ratgeber-inhalt-titel{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--gruen);margin-bottom:.4rem} .ratgeber-inhalt ol{list-style:decimal inside;color:var(--gruen)} .ratgeber-inhalt li{max-width:none} .ratgeber-inhalt a{display:inline-flex;align-items:center;min-height:44px;color:var(--gruen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em} @media (min-width:900px){.ratgeber-inhalt ol{columns:2;column-gap:2rem}} /* Werte (Freibeträge, Vervielfältiger) und Übersicht der Kaufnebenkosten: keine Tabelle */ .ratgeber-werte{margin-top:1rem;border-top:1px solid var(--line)} .ratgeber-werte div{display:flex;flex-direction:column;gap:.15rem;padding:.6rem 0;border-bottom:1px solid var(--line)} .ratgeber-werte dd{font-weight:600;color:var(--gruen)} @media (min-width:480px){.ratgeber-werte div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:1.2rem}.ratgeber-werte dd{text-align:right;flex:none}} /* Unterlage (Inhalt/Woher/Kosten/Wann) und Kaufnebenkosten */ .unterlage,.ratgeber-uebersicht{display:grid;grid-template-columns:minmax(0,1fr);margin-top:.6rem;border-top:1px solid var(--line)} .unterlage dt,.ratgeber-uebersicht dt{padding-top:.7rem} .unterlage dt{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--gruen)} .ratgeber-uebersicht dt{font-weight:600;color:var(--gruen)} .unterlage dd,.ratgeber-uebersicht dd{padding:.2rem 0 .7rem;border-bottom:1px solid var(--line);overflow-wrap:anywhere} @media (min-width:700px){ .unterlage,.ratgeber-uebersicht{grid-template-columns:8rem minmax(0,1fr);column-gap:1.4rem} .ratgeber-uebersicht{grid-template-columns:12rem minmax(0,1fr)} .unterlage dt,.ratgeber-uebersicht dt{padding:.7rem 0;border-bottom:1px solid var(--line)} .unterlage dd,.ratgeber-uebersicht dd{padding:.7rem 0} } /* Rechenbeispiel (Beispiel, kein Hinweis) und Hinweis-Kasten */ .ratgeber-rechnung{margin-top:1rem;background:var(--weiss);border:1px solid var(--line);border-left:4px solid var(--gruen);padding:1rem 1.2rem} .ratgeber-rechnung-titel,.ratgeber-hinweis-titel{font-weight:600;color:var(--gruen)} .ratgeber-rechnung-titel{font-size:var(--fs-mini);letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;margin-bottom:.3rem} .ratgeber-hinweis{margin-top:1.2rem;background:var(--weiss);border:1px solid var(--line-dunkel);border-left:5px solid var(--gruen);padding:1rem 1.2rem} .ratgeber-hinweis-titel{margin-bottom:.3rem} /* Drei Wege (Erbengemeinschaft) */ .ratgeber-wege{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1rem} @media (min-width:900px){.ratgeber-wege{grid-template-columns:repeat(3,minmax(0,1fr))}} .ratgeber-wege div{border:1px solid var(--line);padding:1rem 1.1rem} .ratgeber-wege dt{font-weight:600;color:var(--gruen);margin-bottom:.3rem} .ratgeber-wege dd{color:var(--text)} /* Schritte zur Einigung: große Ziffer links (Zähler) */ .ratgeber-schritte{counter-reset:schritt;margin-top:1rem} .ratgeber-schritte>li{counter-increment:schritt;position:relative;padding:.8rem 0 .8rem 3rem;border-top:1px solid var(--line-dunkel)} .ratgeber-schritte>li::before{content:counter(schritt);position:absolute;left:0;top:.55rem;font-family:var(--schrift-titel);font-size:2rem;line-height:1;color:var(--gruen)} .ratgeber-schritte b{display:block;color:var(--gruen)} /* Checkliste (Deko-Kästchen) */ section.ratgeber-checkliste{background:var(--weiss);border:1px solid var(--line-dunkel);padding:1.2rem 1.3rem} .ratgeber-checkliste ol,.ratgeber-checkliste > ul:not(.checkliste){margin-top:.4rem} .ratgeber-checkliste ol li{position:relative;padding:.6rem 0 .6rem 2rem;border-top:1px solid var(--line-dunkel)} .ratgeber-checkliste ol li:first-child{border-top:0} .ratgeber-checkliste ol li::before{content:"";position:absolute;left:0;top:.85rem;width:1rem;height:1rem;border:2px solid var(--gruen);background:var(--weiss)} /* Checkliste zum Abhaken: ganze Zeile tippbar, Kästchen 22 px */ .checkliste-hinweis{font-size:var(--fs-klein);color:var(--meta)} .checkliste{list-style:none;margin-top:.6rem} .checkliste li{border-top:1px solid var(--line-dunkel)} .checkliste li:first-child{border-top:0} .checkliste label{display:flex;align-items:flex-start;gap:.8rem;min-height:44px;padding:.6rem 0;cursor:pointer} .checkliste input{flex:none;width:22px;height:22px;margin-top:.1rem;accent-color:var(--gruen)} .checkliste li:has(input:checked) label{color:var(--meta);text-decoration:line-through} /* Ab 2027 (Energieausweis) */ .ratgeber-aenderungen{margin-top:1rem;border-left:4px solid var(--gruen);padding-left:1.1rem} .ratgeber-aenderungen li{padding:.35rem 0} .ratgeber-aenderungen b{color:var(--gruen)} /* Film mit Bildunterschrift: volle Spaltenbreite, 16:9 */ .ratgeber-video{margin:1rem 0 0} .ratgeber-video .abriss-video video{aspect-ratio:16/9} .ratgeber-video figcaption{margin-top:.5rem;font-size:var(--fs-klein);font-style:italic;color:var(--meta)} /* Fotos in Ratgeber-Artikeln */ .ratgeber-bild{margin:clamp(1.6rem,4vw,2.2rem) 0 0} .ratgeber-bild img{background:rgba(44,85,57,.06)} /* Ableitung: Platzhalter beim Laden */ .ratgeber-bild figcaption{margin-top:.5rem;font-size:var(--fs-klein);color:var(--meta)} .ratgeber-pdf-inhalt{font-size:var(--fs-klein)} /* Kasten „Wie wir helfen“ */ .ratgeber-hilfe{margin-top:clamp(2rem,5vw,3rem);background:var(--gruen);color:var(--weiss);padding:clamp(1.4rem,3vw,2rem)} .ratgeber-hilfe h2{color:var(--weiss);font-size:clamp(1.4rem,2.6vw,1.8rem);margin-bottom:.8rem} .ratgeber-hilfe p{color:var(--weiss)} .ratgeber-hilfe p + p{margin-top:.8rem} .ratgeber-hilfe .btn--fuell{background:var(--mint);border-color:var(--mint);color:var(--acc-text);margin-top:1.2rem} .ratgeber-hilfe .knopf-zeile .btn--fuell{margin-top:0} .ratgeber-hilfe .btn--fuell:hover{background:var(--weiss);border-color:var(--weiss);color:var(--gruen)} .ratgeber-hilfe :focus-visible{outline-color:var(--mint)} /* PDF-Hinweis, „Passend dazu“, Rechtshinweis, Quellen */ .ratgeber-pdf{margin-top:1.6rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:var(--fs-klein);color:var(--meta)} .ratgeber-pdf .textlink{display:inline-flex;align-items:center;min-height:44px;padding-block:0} .ratgeber-weiter{margin-top:1.6rem} .ratgeber-weiter-titel{font-size:var(--fs-mini);font-weight:600;letter-spacing:var(--sperrung-zwischenzeile);text-transform:uppercase;color:var(--gruen)} .ratgeber-weiter ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:1.6rem;margin-top:.3rem} @media (min-width:600px){.ratgeber-weiter ul{grid-template-columns:repeat(2,minmax(0,1fr))}} .ratgeber-weiter li{position:relative;padding-left:1.4rem} .ratgeber-weiter li::before{content:"→";position:absolute;left:0;top:.6rem;color:var(--gruen)} .ratgeber-rumpf .ratgeber-weiter a{display:inline-flex;align-items:center;min-height:44px;padding-block:0} .ratgeber-rechtshinweis{margin-top:2rem;font-size:var(--fs-klein);color:var(--meta);border-left:2px solid var(--line-dunkel);padding-left:.9rem} .ratgeber-quellen h2{font-size:1.3rem} .ratgeber-quellen ul{list-style:none} .ratgeber-quellen li{font-size:var(--fs-klein);color:var(--meta);padding:.1rem 0;overflow-wrap:anywhere} .ratgeber-rumpf .ratgeber-quellen a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;font-weight:400;color:var(--meta)} /* FAQ (Artikel und Hauptseiten): aufklappbar, Zeile ≥ 44 px, Zeichen „+“/„–“ als Text */ .faq{margin-top:1rem;border-top:1px solid var(--line-dunkel)} .faq-eintrag{border-bottom:1px solid var(--line-dunkel)} .faq-eintrag summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:.7rem 0;cursor:pointer; font-weight:600;color:var(--gruen);list-style:none} .faq-eintrag summary::-webkit-details-marker{display:none} .faq-eintrag summary::after{content:"+";flex:none;font-size:1.3rem;line-height:1;font-weight:400} .faq-eintrag[open] summary::after{content:"–"} .faq-antwort{padding:0 0 .9rem;max-width:68ch} .faq-antwort p + p{margin-top:.6rem} .faq-antwort a{color:var(--gruen);font-weight:600;text-decoration:underline;text-underline-offset:.2em} .f-gruen .faq-eintrag summary,.f-gruen .faq-antwort a{color:var(--weiss)} /* SEO-Hauptseiten (Wünsche aus docs/inhalte/seo-hauptseiten.md) */ .makler-text .kopf-abschnitt h2{margin-bottom:0} .makler-text p + .pfeil-liste{margin-top:.9rem} .makler-text .pfeil-liste + p{margin-top:.9rem} .ablauf-schritte + .lede{margin-top:var(--abstand-kopf)} #fragen .klein{margin-top:1.4rem;color:var(--meta)} .schritt p a,.markt-erklaerung dd .textlink{padding-block:.8rem} /* Marktbericht (/marktbericht, 24.09.2026): Linkliste unter dem Bericht – je Link 44 px Tippfläche */ .markt-bericht-weiter{margin-top:1.2rem} .markt-bericht-weiter a{display:inline-flex;align-items:center;min-height:44px} /* Linklisten im Fließtext der SEO-Hauptseiten (#weiter): 44 px Tippfläche */ .makler-text .pfeil-liste a{display:inline-flex;align-items:center;min-height:44px} /* ---------- Absenden: Warten, Bestätigung, Fehler (alle Formulare + Marktfinder, 24.09.2026) ---------- formulare.js / marktfinder.js setzen beim Senden .btn--wartet + aria-busy und einen .kreisel in den Knopf. Der Kreisel nimmt die Schriftfarbe des Knopfs (currentColor) – keine eigene Farbe, eckig wie die CI. */ .btn[aria-busy="true"]{opacity:1;cursor:progress} .btn--wartet{gap:12px} .kreisel{display:inline-block;flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent; animation:kreisel-dreht .8s linear infinite} @keyframes kreisel-dreht{to{transform:rotate(360deg)}} @keyframes kreisel-pulst{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.kreisel{animation:kreisel-pulst 1.6s ease-in-out infinite}} /* Meldungen deutlich: größere Schrift, kräftiger Rand links, Fokus ohne Umriss (sie werden per Skript fokussiert) */ .formular-fehler.zeigen,.formular-erfolg.zeigen{font-size:var(--fs-text);line-height:1.5;border-left-width:5px;font-weight:600;scroll-margin:1.5rem} .formular-fehler:focus,.formular-erfolg:focus,.mf-status:focus{outline:none} .formular-erfolg.zeigen::before{content:"✓";display:inline-block;margin-right:.5rem;font-weight:700} .mf-status{scroll-margin:1.5rem} .mf-status--fehler,.mf-status--erfolg{border-left-width:5px} .mf-status--erfolg{border-color:var(--gruen)} /* ---------- Eröffnungsfeier (/eroeffnung, 28.09.2026) ---------- Handy zuerst (QR-Code im Schaufenster). Ludwigs grün, ATRIUM violett (--atrium), beide gleichwertig. Zustände ohne JavaScript: .eroeffnung-zustand wird per :target sichtbar (Server leitet auf #zustand). */ .eroeffnung-einladung{padding-top:0} .eroeffnung-karte{max-width:var(--spalte);margin:0 auto var(--abstand-kopf)} .eroeffnung-karte img{width:100%;height:auto} .eroeffnung-text h1{max-width:22ch;margin:.3rem 0 1rem;overflow-wrap:anywhere} .eroeffnung-gastgeber{font-weight:600;margin:0 0 .6rem} .eroeffnung-ludwigs{color:var(--gruen)} .eroeffnung-atrium{color:var(--atrium)} .eroeffnung-intro{max-width:56ch} .eroeffnung-eckdaten{border-left:5px solid var(--gruen);padding:.3rem 0 .3rem 1rem;margin:1.4rem 0 1.6rem} .eroeffnung-eckdaten p{margin:0} .eroeffnung-datum,.eroeffnung-zeit{font-weight:600;color:var(--gruen);font-size:1.15rem} .eroeffnung-liste{list-style:disc;padding-left:1.3rem;margin:1rem 0 1.4rem;display:grid;gap:.35rem} .eroeffnung-liste li::marker{color:var(--mint)} .eroeffnung-aufruf{font-weight:600;margin-bottom:.4rem} .eroeffnung-anmeldung .wrap{max-width:44rem} .eroeffnung-anmeldung h2{margin-bottom:.8rem} .eroeffnung-bitte{margin:0 0 1.2rem} .eroeffnung-zustand{scroll-margin:1.5rem} .eroeffnung-zustand:target{display:block;font-size:var(--fs-text);line-height:1.5;border-left-width:5px;font-weight:600} .eroeffnung-formular select.feld{appearance:auto} .eroeffnung-formular .feld{width:100%;min-width:0} .eroeffnung-datenschutz{margin:.2rem 0 1.2rem} .eroeffnung-datenschutz a{text-decoration:underline} .eroeffnung-formular [type="submit"]{width:100%;min-height:52px} @media (min-width:600px){.eroeffnung-formular [type="submit"]{width:auto}} .eroeffnung-bestaetigung{border:1px solid var(--gruen);border-left-width:5px;padding:1.1rem 1.2rem;scroll-margin:1.5rem} .eroeffnung-bestaetigung:focus{outline:none} .eroeffnung-bestaetigung h3{font-size:1.2rem;margin-bottom:.5rem} .eroeffnung-bestaetigung p + p{margin-top:.5rem} .eroeffnung-bestaetigung-daten{font-weight:600;color:var(--gruen)} .eroeffnung-mail-hinweis{color:var(--fehler-text)} .eroeffnung-gastgeber-fuss h2{margin-bottom:var(--abstand-kopf)} .eroeffnung-firmen{display:grid;gap:1.6rem} @media (min-width:760px){.eroeffnung-firmen{grid-template-columns:1fr 1fr}} .eroeffnung-firma{border-top:6px solid var(--gruen);padding-top:1rem} .eroeffnung-firma h3{font-size:1.1rem;margin-bottom:.4rem} .eroeffnung-firma p{margin:0 0 .2rem} .eroeffnung-firma a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;overflow-wrap:anywhere} .eroeffnung-firma--atrium{border-top-color:var(--atrium)} .eroeffnung-firma--atrium h3,.eroeffnung-firma--atrium a{color:var(--atrium)} .eroeffnung-firma--ludwigs a{color:var(--gruen)} .eroeffnung-firma .zusammen{white-space:nowrap} /* Preisbrief – „Preisentwicklung Ihrer Straße per E-Mail“ (seit 30.09.2026, Teil B). Formular-Baustein (_lib/preisbrief-baustein.mjs) auf /preisentwicklung, /marktfinder und den Stadtteilseiten, dazu die Kästen „Anmeldung bestätigen“ / „Abmelden“ auf /preisentwicklung. Nur CI-Variablen. Zustände ohne JavaScript: .preisbrief-zustand wird per :target sichtbar (Server leitet auf #zustand). */ .preisbrief{margin-top:1.6rem;background:var(--weiss);color:var(--text);border:1px solid var(--line-dunkel);border-left:5px solid var(--gruen);padding:1.1rem 1.2rem;scroll-margin:1.5rem} .preisbrief[hidden]{display:none} .preisbrief-titel{font-family:var(--schrift-titel);font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.25;color:var(--gruen);margin:0 0 .4rem} .preisbrief-text{margin:0 0 1rem} .preisbrief-formular{display:grid;gap:4px} .preisbrief-felder{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} @media (min-width:640px){.preisbrief-felder{grid-template-columns:repeat(2,minmax(0,1fr))}} .preisbrief-felder .feld{width:100%;min-width:0} .preisbrief-felder .feld-beschriftet > span{overflow-wrap:anywhere} .preisbrief-formular [type="submit"]{width:100%;min-height:52px;margin-top:.4rem} @media (min-width:600px){.preisbrief-formular [type="submit"]{width:auto;justify-self:start}} .preisbrief-klein{font-size:var(--fs-klein);color:var(--meta);margin:.6rem 0 0} .preisbrief-fertig .preisbrief-felder,.preisbrief-fertig .checkbox-zeile,.preisbrief-fertig [type="submit"]{display:none} .preisbrief-seite .wrap{max-width:48rem} .preisbrief-seite h1{margin-bottom:.8rem} .preisbrief-liste{margin:0 0 1rem;padding-left:1.2rem;list-style:disc} .preisbrief-liste li{margin:.25rem 0} .preisbrief-link{border:1px solid var(--gruen);border-left-width:5px;padding:1.1rem 1.2rem;margin-top:1.2rem} .preisbrief-link[hidden]{display:none} .preisbrief-link h2{font-size:1.3rem;margin-bottom:.5rem} .preisbrief-link .btn{min-height:52px} .preisbrief-zustand{display:none;scroll-margin:1.5rem;margin-top:1.2rem} .preisbrief-zustand:target{display:block;font-size:var(--fs-text);line-height:1.5;border-left-width:5px;font-weight:600} .preisbrief-hinweis{margin-top:1.4rem} .eroeffnung-preisbrief{margin-top:1.4rem;font-size:var(--fs-klein);color:var(--meta)} .eroeffnung-preisbrief a{color:var(--gruen);text-decoration:underline} /* ---------- Stadtteilseiten Ludwigsburg (/immobilienpreise/ludwigsburg/, seit 30.09.2026, Teil A) ---------- */ .stadtteil-kennzahl{margin-top:1rem;color:var(--weiss-leise);font-size:var(--fs-klein);overflow-wrap:anywhere} .stadtteil-kennzahl-wert{display:block;color:var(--weiss);font-size:1.25rem;font-weight:700} .stadtteil-kennzahl a{color:var(--weiss);text-decoration:underline;text-underline-offset:.2em} .stadtteil-wohngebiete{margin-top:.4rem} .stadtteil-gmb{margin-top:1rem;max-width:36rem} .markt-dauer-erklaerung{margin-top:.8rem;max-width:68ch} .stadtteil-zitat{margin:1.2rem 0 0;max-width:68ch;border-left:4px solid var(--gruen);padding-left:1rem} .stadtteil-zitat figcaption{font-size:var(--fs-klein);color:var(--meta);margin-top:.4rem} .stadtteil-aussagen,.stadtteil-eigenheiten{list-style:none;display:grid;gap:1rem;margin-top:1rem;max-width:68ch} .stadtteil-aussagen .markt-quelle,.stadtteil-eigenheiten .markt-quelle{padding-top:.2rem} .stadtteil-liste{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem 2rem;margin-top:1rem} @media (min-width:760px){.stadtteil-liste{grid-template-columns:repeat(2,minmax(0,1fr))}} .stadtteil-liste li{display:flex;flex-direction:column;min-width:0;padding:.5rem 0;border-bottom:1px solid var(--line-dunkel)} .stadtteil-liste a{display:inline-flex;align-items:center;min-height:44px;font-weight:600} .stadtteil-liste [aria-current]{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .stadtteil-werte{font-size:var(--fs-klein);color:var(--text);overflow-wrap:anywhere} .stadtteil-zeile{margin-top:1rem;overflow-wrap:anywhere} .stadtteil-zeile a{display:inline-block;min-height:44px;line-height:44px}