/* ========================================================================== IMMOBILIEN REITZ — main.css Konsolidiert aus den acht finalen V2-Artefakten. Keine Werte neu interpretiert. Wo Seiten unterschiedliche, bewusst final abgestimmte Werte verwenden, wird per body-Klasse (.page-*) exakt reproduziert statt gemittelt. Siehe Produktionsbericht, Abschnitt "Change-Freeze / Konflikte". ========================================================================== */ @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/cormorant-garamond-variable.woff2") format("woff2");} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 600;font-display:swap;src:url("../fonts/cormorant-garamond-italic-variable.woff2") format("woff2");} @font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-variable.woff2") format("woff2");} :root{ --color-bg:#F7F5F0; --color-ink:#1F1F1F; --color-gold:#B39A76; --color-greige:#D9D2C8; --color-gold-deep:#7C6142; --color-text-secondary:#6E6A63; --color-border:#D9D2C8; --color-bg-dark:#1F1F1F; --color-ink-on-dark:#F7F5F0; --color-surface:#FFFFFF; --font-display:"Cormorant Garamond",Georgia,serif; --font-body:"Manrope",-apple-system,"Segoe UI",sans-serif; --fs-display:clamp(2.4rem,3.6vw + 1.4rem,4.5rem); --fs-h1:clamp(2rem,2.6vw + 1.2rem,3.1rem); --fs-h2:clamp(1.6rem,1.8vw + 1rem,2.3rem); --fs-h3:clamp(1.05rem,0.5vw + 0.95rem,1.25rem); --fs-lead:clamp(1.05rem,0.4vw + 0.95rem,1.2rem); --fs-body:1.0625rem; --fs-small:0.875rem; --fs-quote:clamp(1.2rem,0.7vw + 1rem,1.5rem); --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; --space-7:96px; --container-max:1200px; --gutter:clamp(20px,5vw,56px); --ease-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;} } body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;padding-left:var(--gutter);padding-right:var(--gutter);-webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0 0 var(--space-2);line-height:1.15;text-wrap:balance;} h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);max-width:34ch;} h3{font-size:var(--fs-h3);} p{margin:0 0 var(--space-2);max-width:62ch;color:var(--color-ink);} a{color:inherit;} address{font-style:normal;} ul{margin:0;padding:0;} .container{max-width:var(--container-max);margin-inline:auto;} .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold-deep);margin-bottom:var(--space-2);} .lead{font-size:var(--fs-lead);color:var(--color-text-secondary);} .text-link{font-weight:600;text-decoration:none;border-bottom:1px solid var(--color-gold);padding-bottom:2px;} .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:2px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);} .btn--primary{background:var(--color-ink);color:var(--color-bg);} .btn--primary:hover{background:var(--color-gold-deep);} .btn--outline{border-color:var(--color-ink);color:var(--color-ink);} .btn--outline:hover{border-color:var(--color-gold-deep);color:var(--color-gold-deep);} .hero-actions{margin-top:var(--space-3);} .page-verkaufen .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);} /* Editorial Claim — websiteweit identische Typografie/Farbe/Größe */ .editorial-claim{font-family:var(--font-display);font-style:italic;color:var(--color-gold-deep); font-size:clamp(1.5rem,1.35vw + 1.2rem,2.2rem);line-height:1.3;} /* Editorial Note (nur /immobilie-bewerten/) — fachlicher Hinweis, deutlich kleiner, linksbündig */ .editorial-note{font-family:var(--font-display);font-style:italic;color:var(--color-gold-deep); font-size:clamp(0.95rem,0.3vw + 0.85rem,1.05rem);line-height:1.5;text-align:left;max-width:56ch; margin-top:var(--space-2);} [hidden]{display:none!important;} /* ---------- Section-Rhythmus ---------- */ .section{padding-block:var(--space-7);} .section--tight{padding-block:var(--space-6);} /* Default: Startseite, Verkaufen, Impressum, Datenschutz */ .page-vermieten .section--tight, .page-kontakt .section--tight{padding-block:var(--space-4);} .page-bewerten .section--tight{padding-block:var(--space-5);} .page-bewerten .section--tight:not(.contact-band){padding-block:var(--space-4);} .page-uebermich .section--tight{padding-block:var(--space-5);} /* ---------- Header ---------- */ .site-header{padding-block:var(--space-3);position:relative;} .header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;} .wordmark{display:inline-flex;align-items:center;text-decoration:none;line-height:0;} .wordmark img{ display:block;height:auto; /* Responsive Logo-Breite (Hotfix): ~105-125px Mobile, ~125-145px Tablet, ~150-180px Desktop - linear zwischen 390px und 1440px Viewportbreite skaliert. */ width:clamp(105px, 4.76vw + 96px, 180px); } .main-nav ul{list-style:none;display:flex;gap:var(--space-4);margin:0;padding:0;max-width:none;} .main-nav li{margin-bottom:0;} .main-nav a{text-decoration:none;font-size:.92rem;font-weight:500;} .main-nav a[aria-current="page"]{border-bottom:1px solid var(--color-gold-deep);} .main-nav-legal{display:none;} .main-nav-cta{display:none;} /* ---------- Mobile-Menü-Button (nur unterhalb 860px sichtbar) ---------- */ .nav-toggle{display:none;background:none;border:none;padding:10px;margin:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;min-width:44px;min-height:44px;} .nav-toggle-bar{display:block;width:22px;height:2px;background:var(--color-ink);} @media (max-width:860px){ .nav-toggle{display:inline-flex;} .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--color-bg);border-top:1px solid var(--color-border); padding:var(--space-3) var(--gutter);z-index:40;} .main-nav[data-open="true"]{display:block;} .main-nav ul{flex-direction:column;gap:var(--space-2);} .main-nav a{display:block;padding:10px 0;font-size:1rem;} .main-nav-legal{display:block;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border);} .main-nav-legal ul{flex-direction:column;gap:6px;} .main-nav-legal a{font-size:.85rem;font-weight:500;color:var(--color-text-secondary);} } /* ---------- Mobile: Header-CTA weicht bei sehr schmalen Viewports, bleibt im Menü erreichbar ---------- */ @media (max-width:600px){ .header-row > a.btn--primary{display:none;} .main-nav-cta{display:block;margin-top:var(--space-3);} .main-nav-cta .btn{width:100%;justify-content:center;} } /* ---------- Footer ---------- */ .site-footer{padding-block:var(--space-5);border-top:1px solid var(--color-border);font-size:.88rem;color:var(--color-text-secondary);} .site-footer .wordmark{display:inline-flex;} .site-footer .wordmark img{ height:auto;opacity:.85; /* Responsive Logo-Breite (Hotfix): ~100-120px Mobile, ~120-150px Desktop. */ width:clamp(100px, 2.38vw + 101px, 150px); } .footer-grid{display:grid;gap:var(--space-4);} @media (min-width:700px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} } .footer-grid h3{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink);margin-bottom:var(--space-2);} .footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:none;} .footer-grid li{margin-bottom:0;} .footer-grid a{text-decoration:none;color:var(--color-text-secondary);} .footer-bottom{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border);font-size:.8rem;} /* ---------- Skip-Link ---------- */ .skip-link{position:absolute;top:-40px;left:0;background:var(--color-ink);color:var(--color-bg);padding:10px 16px;z-index:100;text-decoration:none;font-weight:600;font-size:.9rem;} .skip-link:focus{top:0;} /* ---------- Sichtbarer Fokuszustand für alle interaktiven Elemente ---------- */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--color-gold-deep); outline-offset:2px; } /* ========================================================================== HERO / SPLIT — gemeinsames Muster, seitenspezifische Maße erhalten ========================================================================== */ .split{display:grid;gap:var(--space-5);align-items:center;} @media (min-width:900px){ .split{grid-template-columns:1fr 1fr;gap:var(--space-6);} } .page-uebermich .split{gap:var(--space-5);} @media (min-width:900px){ .page-uebermich .split{grid-template-columns:.95fr 1.05fr;gap:var(--space-6);} } .split h1{max-width:15ch;} /* Default: Vermieten/Bewerten */ .page-verkaufen .split h1{max-width:14ch;} .page-uebermich .split h1{max-width:22ch;} .split h2{max-width:16ch;} /* nur Startseite verwendet H2 im Split (Vertrauensbereich-Grid nutzt eigenes Markup) */ .split-media{aspect-ratio:4/5;overflow:hidden;border-radius:2px;} .split-media img{width:100%;height:100%;object-fit:cover;display:block;} @media (min-width:900px){ .split-media{aspect-ratio:3/4;} } /* Default: Verkaufen/Vermieten/Bewerten */ @media (min-width:900px){ .page-uebermich .split-media{aspect-ratio:4/5;} } .split-media img{object-position:50% 22%;} /* nur relevant, wo gesetzt (Über mich); sonst zentriert per default */ .page-verkaufen .split-media img, .page-vermieten .split-media img, .page-bewerten .split-media img{object-position:center;} /* ---------- Kontakt-Hero — rein typografisch, kein Bild ---------- */ .hero-copy{max-width:52ch;} .hero-copy h1{max-width:18ch;} .hero-copy .lead{max-width:46ch;} /* ---------- Startseite Hero — Konzept C ---------- */ .hero{position:relative;} .hero .container{padding-block:var(--space-6) var(--space-4);} .hero-copy.hero-c{position:relative;max-width:46ch;} .hero h1{font-size:var(--fs-display);max-width:15ch;} .hero .lead{color:var(--color-text-secondary);max-width:42ch;} .hero-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;margin-inline:calc(var(--gutter) * -1);} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block;} @media (min-width:900px){ /* Bugfix (Responsive-QA): ohne explizite width errechnet der Browser bei aspect-ratio + min-height sonst die Breite aus der erzwungenen Mindesthöhe zurück, sobald die verfügbare Breite < 1120px liegt (z. B. 1024px-Desktop) — das schob die Hero-Section über den Viewport hinaus. width:100% fixiert die Breite, min-height bleibt als reine Höhenuntergrenze. */ .hero{aspect-ratio:2/1;min-height:560px;width:100%;display:flex;align-items:center;} .hero .container{position:relative;z-index:1;padding-block:0;width:100%;} .hero-copy.hero-c{padding:var(--space-4) var(--space-4) var(--space-4) 0;} .hero-copy.hero-c::before{content:"";position:absolute;z-index:-1;top:-64px;bottom:-64px;left:calc(var(--gutter) * -1 - 200px);right:-40px; background:linear-gradient(to right, rgba(247,245,240,.94) 62%, rgba(247,245,240,0) 100%);} .hero-media{position:absolute;inset:0;z-index:0;aspect-ratio:auto;margin-inline:0;border-radius:0;} .hero-media img{object-position:58% 38%;} } /* ========================================================================== STARTSEITE — Vertrauensbereich, Verkauf, Region, Orientierung, Bewertungen ========================================================================== */ .trust-section{background:var(--color-surface);} .trust-grid{display:grid;gap:var(--space-5);} @media (min-width:900px){ .trust-grid{grid-template-columns:1.15fr .85fr;align-items:start;} } .trust-visual-wrap{position:relative;} .trust-media{max-width:340px;margin-left:auto;aspect-ratio:4/5;overflow:hidden;border-radius:2px;} .trust-media img{width:100%;height:100%;object-fit:cover;object-position:28% 30%;display:block;} @media (min-width:900px){ .trust-media{margin-top:var(--space-5);} } .trust-kicker{margin:var(--space-5) 0 var(--space-5);max-width:36ch;} @media (min-width:900px){ .trust-kicker{margin-block:var(--space-6);} } .trust-proofs{list-style:none;margin:var(--space-2) 0 var(--space-3);padding:0;border-top:1px solid var(--color-border);max-width:56ch;} .trust-proofs li{border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;} .trust-proofs p{font-family:var(--font-body);font-size:var(--fs-body);font-weight:500;line-height:1.6;margin:0;color:var(--color-ink);max-width:none;} .core-service{padding-bottom:0;} .core-service .container>.eyebrow-row{max-width:60ch;margin-bottom:var(--space-4);} .core-service h2{max-width:14ch;} .core-service-copy{display:grid;gap:var(--space-4);} @media (min-width:900px){ .core-service-copy{grid-template-columns:1fr 1fr;align-items:end;} } .property-showcase{margin-bottom:var(--space-5);} .property-lead{margin:0 0 var(--space-3);} .property-lead img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px;} .property-pair{display:grid;gap:var(--space-3);} @media (min-width:600px){ .property-pair{grid-template-columns:1fr 1fr;} } .property-pair img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px;} .property-showcase figure,.property-pair figure{margin:0;} .property-showcase figcaption,.property-pair figcaption{margin-top:var(--space-1);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary);} .page-verkaufen .property-pair{margin:var(--space-4) 0;} .section-bridge{padding-top:var(--space-5);padding-bottom:0;text-align:center;} @media (min-width:900px){ .section-bridge{padding-top:var(--space-6);} } .section-bridge p{max-width:34ch;margin:0 auto;} .timeline-block{background:var(--color-surface);padding-top:var(--space-5);} @media (min-width:900px){ .timeline-block{padding-top:var(--space-6);} } .timeline{list-style:none;margin:var(--space-5) 0 0;padding:0;position:relative;} .page-verkaufen .timeline{margin:var(--space-4) 0 0;} .timeline-step{position:relative;padding:var(--space-4) 0;border-top:1px solid var(--color-border);display:grid;gap:6px;} .page-verkaufen .timeline-step{padding:var(--space-3) 0;} @media (min-width:700px){ .timeline-step{grid-template-columns:70px 1fr;gap:var(--space-3);} } .timeline-step .num{font-family:var(--font-display);font-size:1.6rem;color:var(--color-gold-deep);} .timeline-step h3{font-size:var(--fs-h3);font-family:var(--font-body);font-weight:700;margin:0 0 4px;} .timeline-step p{font-size:var(--fs-small);margin:0;color:var(--color-text-secondary);} .page-verkaufen .timeline-step h3{margin:0 0 6px;} .page-verkaufen .timeline-step p{font-size:var(--fs-body);color:var(--color-ink);max-width:60ch;} .timeline-claim{margin-top:var(--space-5);} @media (min-width:900px){ .timeline-claim{margin-top:var(--space-6);} } .claim-adjacent{padding-bottom:var(--space-5);} @media (min-width:900px){ .claim-adjacent{padding-bottom:var(--space-6);} } .hero-adjacent{padding-top:var(--space-4);} .region-band{background:var(--color-bg-dark);color:var(--color-ink-on-dark);position:relative;overflow:hidden;} .region-band::before,.region-band::after{content:"";position:absolute;inset:0;opacity:.5;} .region-band::before{background:repeating-linear-gradient(115deg,rgba(179,154,118,.35) 0 2px,transparent 2px 34px);} .region-band::after{background:repeating-linear-gradient(25deg,rgba(217,210,200,.12) 0 1px,transparent 1px 46px);} .region-band .container{position:relative;z-index:1;} .region-band h2,.region-band p{max-width:36ch;} .region-band .eyebrow{color:var(--color-gold);} .region-band h2{color:var(--color-ink-on-dark);} .region-band p{color:rgba(247,245,240,.82);} .region-band .region-line{max-width:none;margin-top:var(--space-3);font-size:var(--fs-small);letter-spacing:.02em;color:rgba(247,245,240,.6);} .router{list-style:none;margin:var(--space-5) 0 0;padding:0;border-top:1px solid var(--color-border);} .router-item{border-bottom:1px solid var(--color-border);} .router-item a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:var(--space-3) 4px; text-decoration:none;font-family:var(--font-display);font-size:clamp(1.3rem,1.6vw + 1rem,1.9rem);transition:padding var(--ease-out) .2s,color .2s;} .router-item a:hover{padding-left:14px;color:var(--color-gold-deep);} .router-item .hint{font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-text-secondary);font-weight:500;} .testimonials{display:grid;gap:var(--space-5);margin-top:var(--space-5);} @media (min-width:900px){ .testimonials{grid-template-columns:repeat(3,1fr);gap:var(--space-6);} } .testimonial{margin:0;padding-top:var(--space-4);border-top:1px solid var(--color-border);} @media (min-width:900px){ .testimonial{padding-top:0;border-top:0;padding-left:var(--space-4);border-left:1px solid var(--color-border);} .testimonial:first-child{padding-left:0;border-left:0;} } .testimonial-stars{color:var(--color-gold-deep);letter-spacing:2px;font-size:.8rem;margin-bottom:var(--space-2);} .testimonial blockquote{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.5;color:var(--color-ink);max-width:none;} .testimonial figcaption{font-size:var(--fs-small);color:var(--color-text-secondary);} .testimonial-source{color:var(--color-text-secondary);} .testimonials-link{display:inline-block;margin-top:var(--space-5);opacity:.95;cursor:default;} /* ========================================================================== /immobilie-verkaufen/ ========================================================================== */ .perspective-list{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-border);display:grid;gap:var(--space-3);} @media (min-width:700px){ .perspective-list{grid-template-columns:repeat(3,1fr);} } .perspective-item{border-top:1px solid var(--color-border);padding-top:var(--space-3);} @media (min-width:700px){ .perspective-item{border-top:0;border-left:1px solid var(--color-border);padding-top:0;padding-left:var(--space-3);} .perspective-item:first-child{border-left:0;padding-left:0;} } .perspective-item h3{font-family:var(--font-body);font-size:.95rem;font-weight:700;margin-bottom:var(--space-2);} .perspective-item p{font-size:var(--fs-small);color:var(--color-text-secondary);max-width:none;} .strategy-intro{display:grid;gap:var(--space-4);margin-top:var(--space-3);align-items:center;} @media (min-width:800px){ .strategy-intro{grid-template-columns:1fr 1.2fr;gap:var(--space-5);} } .strategy-media{aspect-ratio:4/3;overflow:hidden;border-radius:2px;} .strategy-media img{width:100%;height:100%;object-fit:cover;display:block;} .strategy-list{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-border);} @media (min-width:800px){ .strategy-list{display:grid;grid-template-columns:1fr 1fr;} } .strategy-list li{border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;} @media (min-width:800px){ .strategy-list li{padding:var(--space-3) var(--space-4) var(--space-3) 0;} .strategy-list li:nth-child(even){padding-left:var(--space-4);padding-right:0;border-left:1px solid var(--color-border);} } .strategy-list h3{margin-bottom:6px;} .strategy-list p{margin:0;max-width:48ch;} .flow-chain{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-2);margin:var(--space-3) 0 var(--space-4);padding:0; font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-gold-deep);} .flow-chain li{display:flex;align-items:center;gap:var(--space-2);} .flow-chain li:not(:last-child)::after{content:"→";color:var(--color-text-secondary);font-weight:400;} .interest-copy{margin-top:var(--space-2);} @media (min-width:800px){ .interest-copy{column-count:2;column-gap:var(--space-5);} .interest-copy p{break-inside:avoid;} } .situation-list{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-border);} @media (min-width:700px){ .situation-list{display:grid;grid-template-columns:1fr 1fr;} } .situation-list li{border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;} @media (min-width:700px){ .situation-list li{padding:var(--space-3) var(--space-4) var(--space-3) 0;} .situation-list li:nth-child(even){padding-left:var(--space-4);padding-right:0;border-left:1px solid var(--color-border);} } .situation-list h3{margin-bottom:6px;} .situation-list p{margin:0;max-width:48ch;} .types-list{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-border);} @media (min-width:700px){ .types-list{display:grid;grid-template-columns:1fr 1fr;} } .types-item{border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;} @media (min-width:700px){ .types-item{padding:var(--space-3) var(--space-4) var(--space-3) 0;} .types-item:nth-child(even){padding-left:var(--space-4);padding-right:0;border-left:1px solid var(--color-border);} } .types-item h3{margin-bottom:6px;} .types-item p{margin:0;max-width:48ch;} /* ========================================================================== /immobilie-vermieten/ + /immobilie-bewerten/ — geteilte Kurzlisten ========================================================================== */ .key-point{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:var(--color-ink);max-width:52ch;margin:0 0 var(--space-3);} .proof-list{list-style:none;margin:var(--space-3) 0 var(--space-2);padding:var(--space-3) 0 0;border-top:1px solid var(--color-border); display:grid;gap:8px;max-width:52ch;} .proof-list li{padding-left:1.1em;position:relative;font-size:.95rem;} .proof-list li::before{content:"–";position:absolute;left:0;color:var(--color-gold-deep);} .steps-list{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2);} /* Default: Vermieten */ .page-bewerten .steps-list{margin:var(--space-4) 0 var(--space-3);} @media (min-width:700px){ .steps-list{grid-template-columns:1fr 1fr;} } .steps-list li{display:flex;gap:var(--space-2);align-items:baseline;} .steps-list .num{font-family:var(--font-display);font-size:1.05rem;color:var(--color-gold-deep);flex-shrink:0;} .steps-list span.label{font-weight:600;} .driver-list{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-border);display:grid;gap:var(--space-3);} @media (min-width:700px){ .driver-list{grid-template-columns:repeat(3,1fr);} } .driver-item{border-top:1px solid var(--color-border);padding-top:var(--space-3);} @media (min-width:700px){ .driver-item{border-top:0;border-left:1px solid var(--color-border);padding-top:0;padding-left:var(--space-3);} .driver-item:first-child{border-left:0;padding-left:0;} } .driver-item h3{font-family:var(--font-body);font-size:.95rem;font-weight:700;margin-bottom:var(--space-2);} .driver-item p{font-size:var(--fs-small);color:var(--color-text-secondary);max-width:none;} /* ---------- Editorial-Claim-Band (freistehend, zentriert) — Vermieten/Über mich ---------- */ .claim-band{text-align:center;} .claim-band .editorial-claim{margin:0 auto;} .page-vermieten .claim-band{padding-block:var(--space-2);} @media (min-width:900px){ .page-vermieten .claim-band{padding-block:var(--space-4);} } .page-vermieten .claim-band .editorial-claim{max-width:34ch;} .page-uebermich .claim-band{padding-block:0;} @media (min-width:900px){ .page-uebermich .claim-band{padding-block:var(--space-3);} } .page-uebermich .claim-band .editorial-claim{max-width:38ch;} /* ========================================================================== /immobilie-bewerten/ — Formular + Upload ========================================================================== */ section#eval-form{padding-top:var(--space-6);padding-bottom:var(--space-6);} .eval-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:2px;padding:var(--space-5);margin-top:var(--space-4);} @media (min-width:700px){ .eval-form{padding:var(--space-6);} } .form-section{margin-bottom:var(--space-5);} .form-section:last-of-type{margin-bottom:var(--space-4);} .form-section .eyebrow{margin-bottom:var(--space-3);} .field-row{display:grid;gap:var(--space-3);margin-bottom:var(--space-3);} @media (min-width:600px){ .field-row.cols-2{grid-template-columns:1fr 1fr;} .field-row.cols-3{grid-template-columns:1fr 1fr 1fr;} .field-row.street-row{grid-template-columns:2fr 1fr;} } .form-subgroup-label{font-weight:700;font-size:.85rem;color:var(--color-ink);margin:var(--space-4) 0 4px;} .form-section .form-subgroup-label:first-of-type{margin-top:0;} .field-hint-block{font-size:var(--fs-small);color:var(--color-text-secondary);margin:0 0 var(--space-2);} .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:.85rem;font-weight:600;} .field .optional{font-weight:400;color:var(--color-text-secondary);font-size:.8rem;} .field input, .field select, .field textarea{ width:100%; /* Bugfix (Responsive-QA): ohne explizite Breite sizet sich vor allem