/* IUFC — aufbauend auf design-kit/theme.css + ui.css. Nur Ergänzungen, kein neues System.
   Keine Gold-Optik (Kunden-Vorgabe) — Kontrast/Akzent ausschließlich über IUFC-Blau + Weiß/Anthrazit. */

/* ---------- Kopfzeile ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: #ffffff;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
}
.site-header.is-scrolled{ box-shadow: 0 2px 8px oklch(0.16 0.02 258 / .12); }
/* Kleinerer Vertikal-Puffer, damit das groessere Logo die Kopfzeile nicht aufblaeht —
   Balken bleibt fast gleich hoch, das Logo fuellt ihn stattdessen sichtbar besser aus. */
/* Kit-Vorgabe `.nav{justify-content:space-between}` bewusst ueberschrieben: bei nur zwei
   sichtbaren Flex-Kindern (Logo, Nav-Liste) reisst space-between beide auf die vollen
   1140px auseinander — das war der zu grosse Abstand Logo→Leistungen. Jetzt buendeln sich
   Logo + Navigation links mit einem festen, moderaten Abstand; der Rest der Zeile bleibt
   als ruhige Luft vor dem rechten Rand frei, statt kuenstlich aufgefuellt zu werden. */
.site-header .nav{ padding-block: var(--sp-3); flex-wrap:nowrap; justify-content:flex-start; gap:var(--sp-7); }
.brand{ display:flex; align-items:center; gap:.7em; color:var(--ink); flex-shrink:0; }
.brand img{ height:54px; width:auto; display:block; }
/* Logo: freigestelltes PNG + ruhiger Hover (nur Zeigergeraete, Motion-Wunsch respektiert) */
.brand-logo{
  transform-origin:left center;
  transition:transform 220ms cubic-bezier(0.22,1,0.36,1), opacity 220ms cubic-bezier(0.22,1,0.36,1);
}
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-logo{ transform:scale(1.035); }
  .brand:active .brand-logo{ transform:scale(0.99); }
}
.brand:focus-visible .brand-logo{ transform:scale(1.035); }
@media (prefers-reduced-motion:reduce){
  .brand-logo{ transition:opacity 120ms linear; }
  .brand:hover .brand-logo,
  .brand:focus-visible .brand-logo,
  .brand:active .brand-logo{ transform:none; opacity:.88; }
}
.brand small{ display:block; font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

/* Nav-Zeile: fest einzeilig, gleichmäßige Abstände, kein Umbruch — auch nicht bei
   Textumbruch innerhalb eines Links (Root-Cause des früheren Wrap-Bugs). */
/* Gleichmaessiger, etwas grosszuegigerer Abstand zwischen den fuenf Hauptpunkten —
   wirkt bewusst gesetzt statt zufaellig eng (Kundenwunsch: "typografisch gesetzt"). */
.nav-links{ align-items:center; flex-wrap:nowrap; gap:var(--sp-5); }
.nav-links li{ flex-shrink:0; }
.nav-links a{ color:var(--ink-soft); font-size:var(--text-sm); white-space:nowrap; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.is-active, .nav-links a[aria-current="page"]{ color:var(--accent); font-weight:600; }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
/* CTA erkennbar abgesetzt von "Kontakt" (doppelt so viel Abstand wie zwischen den
   uebrigen Punkten), aber ohne wie ein isoliertes Element ausserhalb zu wirken. */
.nav-cta{ margin-left: var(--sp-6); flex-shrink:0; }
.nav-cta .btn{ padding-inline: 1.1em; }  /* etwas schlanker — schafft Breite fuers groessere Logo */

/* Hamburger: gezeichnetes 3-Balken-Icon statt Unicode-Zeichen (wertiger, geräteunabhängig) */
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.55em .7em; flex-shrink:0; cursor:pointer;
}
.nav-toggle .bars{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.nav-toggle .bars::before{ top:-6px; }
.nav-toggle .bars::after{ top:6px; }

/* Umschalt-Punkt bewusst bei 1230px (nicht 860px): auf gängigen Laptop-Breiten (1280–1440px)
   bleibt die Zeile einspaltig; darunter (Tablet/kleinere Fenster) rechtzeitig aufs Mobil-Menü
   wechseln, statt die sechs Punkte zusammenzudrängen oder umbrechen zu lassen. Etwas hoeher
   angesetzt als zuvor, weil das groessere Logo (Kundenwunsch) mehr Breite braucht. */
@media (max-width: 1230px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav.is-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
    position:absolute; left:0; right:0; top:100%; padding:var(--sp-5) var(--sp-5);
    background:#fff; border-bottom:1px solid var(--line-soft); max-height:80vh; overflow-y:auto;
  }
  .nav.is-open .nav-links li{ width:100%; }
  .nav-cta{ margin-left:0; }
  .nav.is-open .nav-cta{ margin-top:var(--sp-2); }
}

/* ---------- Dropdown-Menüs "Leistungen" / "Über IUFC" ---------- */
.nav-item.has-dropdown{ position:relative; }
.nav-link.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:.4em;
  font:inherit; font-size:var(--text-sm); color:var(--ink-soft); white-space:nowrap;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
}
.nav-link.nav-dropdown-toggle:hover{ color:var(--ink); }
.nav-item.has-dropdown.is-active .nav-link.nav-dropdown-toggle{ color:var(--accent); font-weight:600; }
.nav-caret{
  display:inline-block; width:7px; height:7px; flex-shrink:0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 180ms cubic-bezier(0.22,1,0.36,1);
}
.nav-item.has-dropdown.is-open .nav-caret{ transform:rotate(-135deg) translateY(1px); }

.nav-dropdown{
  position:absolute; top:calc(100% + var(--sp-4)); left:0; min-width:250px;
  margin:0; list-style:none; z-index:60;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:0 10px 28px oklch(0.16 0.02 258 / .12);
  padding:var(--sp-2) 0;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity 160ms cubic-bezier(0.22,1,0.36,1), transform 160ms cubic-bezier(0.22,1,0.36,1), visibility 0ms linear 160ms;
}
.nav-item.has-dropdown.is-open .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity 160ms cubic-bezier(0.22,1,0.36,1), transform 160ms cubic-bezier(0.22,1,0.36,1);
}
.nav-dropdown li{ width:auto; }
.nav-dropdown a{
  display:block; padding:.6em var(--sp-4); font-size:var(--text-sm);
  color:var(--ink); white-space:nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background:var(--surface); color:var(--ink); }
.nav-dropdown a[aria-current="page"]{ color:var(--accent); font-weight:600; }

@media (hover:hover) and (pointer:fine){
  .nav-item.has-dropdown:hover .nav-dropdown{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity 160ms cubic-bezier(0.22,1,0.36,1), transform 160ms cubic-bezier(0.22,1,0.36,1);
  }
  .nav-item.has-dropdown:hover .nav-caret{ transform:rotate(-135deg) translateY(1px); }
}

@media (max-width:1230px){
  .nav-item.has-dropdown{ position:static; }
  .nav-link.nav-dropdown-toggle{ width:100%; justify-content:space-between; padding:.3em 0; }
  .nav-dropdown{
    position:static; min-width:0; box-shadow:none; border:0; opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden; padding:0; transition:max-height 220ms cubic-bezier(0.22,1,0.36,1);
  }
  .nav-item.has-dropdown.is-open .nav-dropdown{ max-height:320px; padding:var(--sp-1) 0 var(--sp-2) var(--sp-3); }
  .nav-dropdown a{ padding:.5em 0; }
}
@media (prefers-reduced-motion:reduce){
  .nav-dropdown, .nav-caret{ transition:none; }
}

/* ---------- Hero mit Bild ---------- */
.hero-media{
  position:relative; min-height: 74vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, oklch(0.16 0.02 258 / .62) 0%, oklch(0.08 0.02 258 / .92) 100%);
}
.hero-media .container{ position:relative; z-index:1; padding-block: var(--sp-9) var(--sp-9); }
.hero-media h1, .hero-media p{ color: oklch(0.98 0.004 258); text-shadow: 0 1px 14px oklch(0.06 0.02 258 / .55); }
.hero-media h1{ font-family:var(--font-display); max-width:19ch; font-size:clamp(2.2rem, 4.5vw, var(--text-6xl)); text-wrap:balance; letter-spacing:-0.01em; margin-top:var(--sp-5); }
.hero-media p{ max-width:54ch; opacity:1; font-size:var(--text-lg); margin-top:var(--sp-6); }

/* Firmenname im Hero: "IUFC" gewichtet, Zusatz darunter fein getrackt */
.hero-brand{ display:flex; flex-direction:column; gap:.15em; margin:0; line-height:1.05; }
.hero-brand-main{
  font-family:var(--font-display); font-weight:700; letter-spacing:.02em;
  font-size:clamp(1.3rem, 2.2vw, 1.85rem); color: oklch(0.98 0.004 258);
  display:inline-block; transition: color .25s ease, letter-spacing .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-brand-main:hover{ color: oklch(0.9 0.03 258); letter-spacing:.05em; transform: translateY(-1px); }
}
.hero-brand-sub{
  font-size:var(--text-sm); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: oklch(0.88 0.03 258);
}

/* ============================================================
   BUTTONS — neue verbindliche Regel: KEINE gefüllten Primär-Buttons mehr.
   Jeder Button auf der Website ist transparent mit gut sichtbarem Rahmen —
   eine einzige, hochwertige Button-Sprache statt Primär/Sekundär-Hierarchie.
   Rahmenfarbe passt sich dem Hintergrund an (dunkelblau auf hell, hell auf
   dunkel/markenfarbig), damit der Rahmen überall gut sichtbar bleibt.
   ============================================================ */
.btn-primary, .btn-ghost, .btn-outline-light{
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-ghost:hover, .btn-outline-light:hover{
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    transform: translateY(-1px);
  }
}

/* Auf dunklem/markenfarbigem Grund (Hero-Foto, CTA-Band): helle statt dunkle Rahmenfarbe,
   sonst verschwindet ein dunkelblauer Rahmen auf dunkelblauer/dunkler Fläche. */
.hero-media .btn-primary, .hero-media .btn-ghost, .hero-media .btn-outline-light,
.cta-band .btn-primary, .cta-band .btn-ghost, .cta-band .btn-outline-light{
  color: oklch(0.98 0.004 258);
  border-color: oklch(0.98 0.004 258 / .7);
}
@media (hover: hover) and (pointer: fine) {
  .hero-media .btn-primary:hover, .hero-media .btn-ghost:hover, .hero-media .btn-outline-light:hover,
  .cta-band .btn-primary:hover, .cta-band .btn-ghost:hover, .cta-band .btn-outline-light:hover{
    background: oklch(0.98 0.004 258 / .14); color: oklch(0.99 0.004 258); border-color: oklch(0.98 0.004 258 / .95);
  }
}

/* Warum-IUFC: Headline + Subheadline exakt linksbündig auf derselben Flucht, einzeilig
   solange die Breite reicht; muss ein Umbruch sein, dann bevorzugt nach dem Gedankenstrich. */
.warum-headline{ max-width:none; }
.soft-break{ display:none; }
@media (max-width:900px){
  .soft-break{ display:inline; }
}

/* Warum-IUFC: ruhiges 3×2-Raster, gleiche Flucht, gleiche Spaltenbreiten, linksbündig */
.reasons-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-8) var(--sp-7); align-items:start;
}
.reason{ text-align:left; padding-top:var(--sp-5); border-top:2px solid var(--line-soft); }
.reason-num{ display:block; font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; color:var(--accent); }
.reason h3{ margin-top:var(--sp-3); }
.reason p{ margin-top:var(--sp-2); color:var(--ink-soft); }
@media (max-width:860px){
  .reasons-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .reasons-grid{ grid-template-columns:1fr; gap:var(--sp-6); }
}

/* Kleinerer Seiten-Header (Unterseiten) */
.page-head{ background:var(--surface); border-bottom:1px solid var(--line-soft); }
.page-head .container{ padding-block: var(--sp-8) var(--sp-7); }
.page-head h1{ font-family:var(--font-display); font-size:var(--text-4xl); max-width:24ch; text-wrap:balance; }
.page-head p{ color:var(--ink-soft); max-width:60ch; margin-top:var(--sp-3); }

/* ---------- Kennzahlen ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-6); }
.stat-row .stat{ text-align:left; }
.stat .num{ font-family:var(--font-display); font-size:var(--text-5xl); font-weight:600; color:var(--accent); display:block; line-height:1.1; }
.stat .lbl{ color:var(--ink-faint); font-size:var(--text-xs); letter-spacing:.02em; margin-top:.35em; display:block; }

/* ---------- Bild+Text Split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--sp-8); align-items:center; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }
.split img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); aspect-ratio:4/3; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }

.accent-rule{ width:56px; height:2px; background:var(--accent); border:0; margin: var(--sp-4) 0; }

/* ---------- Leistungs-Kacheln ---------- */
.service-card{ display:flex; flex-direction:column; height:100%; }
.service-card .tag{ color:var(--accent); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-3); }
.service-card p{ color:var(--ink-soft); flex:1; }

/* ---------- Team ---------- */
.team-card{ overflow:hidden; transition: transform .25s cubic-bezier(0.22,1,0.36,1), box-shadow .25s cubic-bezier(0.22,1,0.36,1); }
.team-card:hover{ transform: translateY(-4px); box-shadow: 0 4px 8px oklch(0.2 0.02 258 / .16); }
.team-card .team-img-wrap{
  aspect-ratio:4/5; background:oklch(0.96 0.006 258);
  border-radius:var(--radius); overflow:hidden;
}
.team-card .team-img-wrap img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; transition: transform .35s cubic-bezier(0.22,1,0.36,1);
}
.team-card:hover .team-img-wrap img{ transform: scale(1.04); }
.team-card h3{ margin-top:var(--sp-4); }
.team-card .role{ color:var(--accent); font-size:var(--text-sm); font-weight:600; }
.team-card .edu{ color:var(--ink-faint); font-size:var(--text-sm); margin-top:.15em; }
.team-card p.bio{ color:var(--ink-soft); margin-top:var(--sp-3); }

/* ---------- CTA-Band (globaler Baustein — EINE Quelle für Höhe/Abstände) ----------
   Diese Section bringt ihr Padding + ihre Textbreite selbst mit. Keine Seite
   braucht mehr die Klasse "section", kein eigenes max-width/text-align inline —
   dadurch ist jeder blaue Abschlussbereich der Website automatisch identisch
   (Höhe, Innenabstand, Textbreite, Button-Abstände, mobile Darstellung).
   Padding bewusst großzügiger als eine normale .section (die auf var(--sp-9)
   deckelt): der Inhalt soll mittig in der Fläche "schweben", nicht sie streifen. */
.cta-band{
  background:var(--accent); color:oklch(0.98 0.004 258);
  padding-block: clamp(var(--sp-8), 9vw, calc(var(--sp-9) + var(--sp-6)));
  text-align:center;
}
.cta-band .container{ max-width:56ch; }
.cta-band h2{ color:inherit; font-family:var(--font-display); text-wrap:balance; }
.cta-band p{ color: oklch(0.90 0.008 258); margin-top:var(--sp-3); margin-inline:auto; }
.cta-band .eyebrow{ color: var(--on-accent); opacity:.75; }
.cta-band .cluster{ justify-content:center; margin-top:var(--sp-6); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color: oklch(0.9 0.006 258); border-top:1px solid var(--line); }
.site-footer a{ color: oklch(0.82 0.006 258); }
.site-footer a:hover{ color:#fff; }
.site-footer h4{ color:#fff; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-4); }

/* Footer-Struktur (überarbeitet): volle Hintergrundbreite bleibt am <footer>, der
   Inhalt sitzt aber im selben begrenzten .container wie Header/Hauptbereich
   (max-width:1140px) — dieselbe Content-Flucht wie überall sonst auf der Seite.
   Kein grid mit justify-content:space-between mehr: das verteilte auf breiten
   Fenstern die Restbreite proportional (zu große Lücken) und liess auf mittleren
   Fenstern die 6 fest max-content-breiten Spalten zusammenstoßen/überlaufen
   (zu eng/gequetscht) — genau die gemeldeten Symptome. Jetzt: ein Flex-Fluss mit
   fester, inhaltsabhängiger Breite je Spalte und festem Gap. Passt eine Spalte
   nicht mehr in die Zeile, wandert sie als GANZES kontrolliert in die nächste
   Reihe (kein Zusammenquetschen einzelner Spalten, kein Wort-Umbruch). */
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:start;
  column-gap: var(--sp-6);
  row-gap: var(--sp-7);
  padding-block:var(--sp-9) var(--sp-7);
}
.footer-col{ flex:0 0 auto; }
.footer-col--brand{ flex-basis:14rem; max-width:19rem; }
.footer-col--leistungen{ flex-basis:11rem; }
.footer-col--unternehmen{ flex-basis:8.5rem; }
.footer-col--regionen{ flex-basis:8.5rem; }
.footer-col--kontakt{ flex-basis:8.5rem; }
/* Öffnungszeiten: breit genug, dass "14:00 Uhr – 18:00 Uhr" nie umbricht (siehe
   .hours-line). Reicht die Restbreite der ersten Reihe nicht mehr, wechselt der
   GESAMTE Block per flex-wrap automatisch in eine eigene, links ausgerichtete
   zweite Reihe — auf derselben Content-Flucht wie die übrigen Spalten, nicht
   mittig "schwebend". */
.footer-col--hours{ flex-basis:14rem; max-width:16.5rem; }

/* Tablet (bis 1080px Fensterbreite): ab hier reicht die reine Flex-Reihe nicht
   mehr verlässlich für Brand + 4 Navigations-Spalten nebeneinander — statt
   Spalten zusammenzudrücken, auf eine klar strukturierte 2-Spalten-Tabelle
   wechseln: Marke oben über die volle Breite, darunter eine feste 2×2-Gruppierung,
   Öffnungszeiten als eigene volle Reihe darunter. */
@media (max-width:1080px){
  .footer-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-6); row-gap: var(--sp-7);
  }
  .footer-col{ max-width:none; }
  .footer-col--brand{ grid-column: 1 / -1; max-width:34rem; }
  .footer-col--hours{ grid-column: 1 / -1; max-width:28rem; }
}

/* Smartphone: eine ruhige Spalte in Lesereihenfolge (Unternehmen, Leistungen,
   Navigation, Kontakt, Öffnungszeiten), großzügiger Abstand zwischen den
   Gruppen statt gequetschter Blöcke nebeneinander. */
@media (max-width:640px){
  .footer-grid{ display:flex; flex-direction:column; row-gap: var(--sp-7); }
  .footer-col--brand, .footer-col--hours{ max-width:none; }
}

.hours-line{ white-space:nowrap; }
.footer-bottom{ border-top:1px solid oklch(1 0 0 / .1); padding-block:var(--sp-5); font-size:var(--text-xs); color:oklch(0.65 0.006 258); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); }

/* Firmenname im Footer: "IUFC" gewichtet, zweizeilig — dieselbe Systematik wie im Hero */
.footer-brand{ margin:0 0 var(--sp-4); line-height:1.15; }
.footer-brand-main{ display:block; font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); color:#fff; letter-spacing:-0.005em; }
.footer-brand-sub{ display:block; margin-top:.2em; font-size:var(--text-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:oklch(0.82 0.006 258); }

/* Öffnungszeiten-Spalte: Terminhinweis deutlich, aber ohne Werbebanner-Optik —
   gleiche Schrift/Farbe/Größe wie die Zeiten selbst, nur per Abstand + Gewicht abgesetzt. */
.footer-note{ margin-top:var(--sp-5); font-size:var(--text-sm); font-weight:600; color: oklch(0.9 0.006 258); line-height:1.5; max-width:24ch; }

/* ---------- Formulare (Anfrageseiten) ---------- */
.form-card{ max-width:640px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- Mehrstufiger Funnel (Bewertung / Ankauf) ---------- */
.funnel{ max-width:720px; margin-inline:auto; }
.funnel-steps{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-7); flex-wrap:wrap; }
.funnel-steps span{ flex:1; min-width:40px; height:4px; border-radius:2px; background:var(--line); }
.funnel-steps span.is-done, .funnel-steps span.is-active{ background:var(--accent); }
.funnel-step{ display:none; }
.funnel-step.is-active{ display:block; animation:fnl-in .25s ease-out; }
@keyframes fnl-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.funnel-choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3); }
.funnel-choice{ display:block; padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; text-align:left; background:var(--canvas); font-size:var(--text-sm); font-weight:600; color:var(--ink); }
.funnel-choice:hover{ border-color:var(--accent); }
.funnel-choice.is-selected{ border-color:var(--accent); background: color-mix(in oklch, var(--accent) 7%, var(--canvas)); }
.funnel-nav{ display:flex; justify-content:space-between; margin-top:var(--sp-7); }
.funnel-progress-label{ color:var(--ink-faint); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-5); }

@media (hover:hover) and (pointer:fine){
  .funnel-choice{ transition: border-color .15s ease, background-color .15s ease; }
}
@media (prefers-reduced-motion: reduce){
  .funnel-step.is-active{ animation:none; }
}

/* ---------- Prozess-/Schritt-Liste (Verkaufsprozess, Ankauf, Bewertung) ---------- */
.step-list{
  list-style:none; margin:var(--sp-8) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-7);
}
.step-list > li{
  display:flex; gap:var(--sp-6); align-items:flex-start;
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--line-soft);
}
.step-list > li:last-child{ border-bottom:0; padding-bottom:0; }
.step-num{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:600;
  color:var(--accent);
  opacity:.55;
  min-width:2.2ch;
}
.step-list h3{ margin:0 0 .3em; }
.step-list p{ margin:0; color:var(--ink-soft); max-width:60ch; }
@media (max-width: 640px){
  .step-list > li{ gap:var(--sp-4); }
  .step-num{ font-size:var(--text-xl); }
}

/* ---------- Mehrstufiger Funnel (Bewertung/Ankauf) ---------- */
.wizard-progress{
  height:3px; background:var(--line-soft); border-radius:2px; overflow:hidden;
  margin-bottom:var(--sp-4);
}
.wizard-progress-bar{
  height:100%; background:var(--accent); width:16.6667%;
  transition: width .35s cubic-bezier(0.22,1,0.36,1);
}
.wizard-counter{
  display:block; font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:var(--sp-7);
}
.wizard-counter strong{ color:var(--ink-soft); font-weight:600; letter-spacing:normal; text-transform:none; }
.wizard-step h2{ font-size:var(--text-2xl); max-width:30ch; text-wrap:balance; }
.step-hint{ color:var(--ink-soft); margin-top:var(--sp-2); max-width:56ch; font-size:var(--text-sm); }

/* ---------- Auswahlkacheln: strikt vereinheitlicht (gleiche Breite/Höhe/Typo) ---------- */
.choice-tiles{
  display:grid; gap:var(--sp-3); margin-top:var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}
.choice-tiles[data-cols="2"]{ grid-template-columns: repeat(2, 1fr); }
.choice-tiles[data-cols="3"]{ grid-template-columns: repeat(3, 1fr); }
.choice-tiles-sub{
  display:grid; gap:var(--sp-3); margin-top:var(--sp-3);
  grid-template-columns: repeat(3, 1fr); max-width:460px;
}
/* Bewusst zwei feste Zwischenschritte statt automatischer Breiten (Kachel-Vorgabe):
   ab 640px weichen 3-Spalten-Raster auf 2 Spalten, ab 480px steht jedes Raster
   einspaltig — so bleibt garantiert Platz für lange, zusammengesetzte Begriffe. */
@media (max-width:640px){
  .choice-tiles[data-cols="3"]{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:480px){
  .choice-tiles[data-cols="2"],
  .choice-tiles[data-cols="3"]{ grid-template-columns: 1fr; }
}

.choice-tile{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:64px; cursor:pointer; text-align:center;
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:var(--sp-3); background:var(--surface);
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.choice-tile:active{ transform:scale(0.985); }
@media (prefers-reduced-motion:reduce){
  .choice-tile{ transition:none; }
  .choice-tile:active{ transform:none; }
}
.choice-tile input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.tile-label{
  font-size:0.8125rem; font-weight:500; color:var(--ink); line-height:1.3;
  text-wrap:balance; overflow-wrap:normal; word-break:keep-all; hyphens:none;
  transition: color .15s ease, font-weight .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .choice-tile:hover{ border-color:var(--accent); background: color-mix(in oklch, var(--accent) 5%, var(--surface)); }
}
/* Kein Auswahlpunkt/Icon — Auswahl ausschliesslich ueber Rahmen + Flaeche + Typografie,
   der doppelte Rahmen (Border + Box-Shadow-Ring) macht ihn ohne Layout-Sprung deutlicher. */
.choice-tile:has(input:checked){
  border-color:var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent);
}
.choice-tile input:checked ~ .tile-label{ color:var(--accent); font-weight:600; }
.choice-tile:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.choice-tiles-error{ display:block; margin-top:var(--sp-3); font-size:var(--text-sm); color:var(--danger); }

/* ---------- Vertrauens-Panel: eigener klarer Block je Kennzahl, deutlich hervorgehoben,
   Zahl gross+kraeftig oben / Erlaeuterung klar getrennt darunter, kein Icon, kein Widget.
   Bewusst IMMER 2x2 (nicht 4-in-einer-Reihe): bei "10+ Jahre" / "4,7 / 5,0" auf einer
   Zeile durchgemessen — 4 Spalten reissen die Zahl je nach Breite in eine zweite Zeile,
   2x2 haelt auf jeder Displaygroesse sicher eine Zeile pro Kennzahl. */
.trust-panel{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-5) var(--sp-4);
  padding:var(--sp-5) var(--sp-4); margin-top:var(--sp-7);
  background: color-mix(in oklch, var(--accent) 4%, var(--surface));
  border-radius: var(--radius);
}
.trust-panel .trust-item{ display:flex; flex-direction:column; gap:var(--sp-2); text-align:left; min-width:0; }
.trust-panel .trust-num{
  font-family:var(--font-display); font-weight:800; color:var(--accent);
  font-size:1.1875rem; line-height:1.05; white-space:nowrap;
}
.trust-panel .trust-lbl{ font-size:var(--text-sm); color:var(--ink-soft); line-height:1.4; }
@media (min-width:480px){
  .trust-panel{ padding:var(--sp-6) var(--sp-5); }
  .trust-panel .trust-num{ font-size:1.5rem; }
}

/* ---------- Formular-Feld-Raster: feste 2 Spalten (Objektdaten/Kontakt) ---------- */
.field-grid.field-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width:560px){ .field-grid.field-grid--2{ grid-template-columns: 1fr; } }
/* Standort-Zeile: PLZ schmal, Ort breit, Straße (optional) spannt beide Spalten —
   ALLE drei Felder in EINEM Grid, damit Hoehe/Abstand garantiert identisch sind. */
.field-grid.field-grid--location{ grid-template-columns: 1fr 2fr; }
.field--span-all{ grid-column: 1 / -1; }
@media (max-width:560px){ .field-grid.field-grid--location{ grid-template-columns: 1fr; } }
/* ^ Fix 22.09.2026: Modifikator brauchte höhere Spezifität als die Basisklasse
   .field-grid weiter unten in dieser Datei — sonst gewann bei gleicher Spezifität
   die spätere Basis-Regel (auto-fit) und die 2-Spalten-/Standort-Aufteilung griff
   nie, weder auf Ankauf- noch auf Bewertungsseite (Ursache der springenden Feldbreiten). */
.error-text{ display:block; margin-top:var(--sp-2); font-size:var(--text-sm); color:var(--danger); }

.wizard-step[hidden]{ display:none; }
.wizard-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:var(--sp-7); gap:var(--sp-4);
}
.form-success{ text-align:center; padding:var(--sp-8) var(--sp-4); }

/* ---------- Formular-Feld-Raster (enger als grid-auto, für Formularzeilen) ---------- */
.field-grid{
  display:grid; gap:var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ---------- CTA-Band als eingerahmter Block (z.B. innerhalb eines Artikels) ---------- */
.cta-band.boxed{
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius);
  text-align: center;
}

/* ---------- Feld-Label als eigenständiges Element (Formular-Wizard: <label class="field"> umschliesst Text+Input) ---------- */
.field-label{ font-size:var(--text-sm); font-weight:600; color:var(--ink); display:block; margin-bottom:var(--sp-2); }

/* ---------- Kennzahlen-Panel (statt loser Statistik-Reihe) ---------- */
/* Kennzahlen: keine geschlossene Karte, kein Icon-Ballast — offene, ruhige Reihe aus
   grosser Zahl + kurzem Label, dieselbe Hairline-Sprache wie das Warum-IUFC-Raster. */
.stat-panel{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:var(--sp-7) var(--sp-6);
}
.stat-panel .stat{ min-width:0; text-align:left; padding-top:var(--sp-4); border-top:2px solid var(--line-soft); }
.stat-panel .num{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem, 2.6vw, 2.25rem);
  color:var(--accent); display:block; line-height:1.1;
  overflow-wrap:break-word;
}
.stat-panel .lbl{
  color:var(--ink-soft); font-size:var(--text-sm); margin-top:var(--sp-2); display:block; max-width:22ch;
}
/* Bewertungs-Kacheln ("5,0 / 5,0") sonst optisch schwerer als kurze Zahlen ("6", "10+") —
   der Vergleichswert wird klein/blass, die eigentliche Zahl bleibt gleich gewichtig. */
.stat-panel .num-suffix{ font-size:0.55em; font-weight:400; color:var(--ink-faint); }
@media (max-width: 640px){
  .stat-panel{ grid-template-columns:1fr 1fr; gap:var(--sp-6) var(--sp-5); }
}
@media (max-width: 420px){
  .stat-panel{ grid-template-columns:1fr; }
}

/* ---------- Öffnungszeiten-Tabelle ---------- */
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table th, .hours-table td{
  text-align:left; padding:.55em 0; line-height:1.5; font-weight:400;
  color:var(--ink-soft); font-size:var(--text-sm);
}
.hours-table th{ width:6.5em; color:var(--ink); font-weight:600; }
/* dezenter Abstand zwischen den Gruppen (Mo–Fr / Sa,So / Feiertage) — Feiertage
   bekommt exakt dieselbe Regel wie Sa/So, keine Sonderbehandlung. */
.hours-table tr.hours-group-gap th, .hours-table tr.hours-group-gap td{
  padding-top: calc(.55em + var(--sp-3));
}

/* ---------- Werte (6, editorial statt Karten-Grid, linksbündig, eine Flucht) ---------- */
.values-grid{
  display:grid; gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .values-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }
.value-item{
  text-align:left; padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.value-num{
  display:block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; color: var(--ink-faint);
}
.value-item h3{ margin-top: var(--sp-3); font-size: var(--text-lg); }
.value-lead{ margin-top: var(--sp-2); font-weight: 650; color: var(--ink); max-width: 30ch; }
.value-item p.value-body{ margin-top: var(--sp-2); color: var(--ink-soft); max-width: 34ch; }
/* Dezenter, einheitlicher Hover-Zustand fuer alle 6er-Kacheln (Werte / Vorteile / Zusammenarbeit) —
   nur Farbwechsel, kein Lift/Schatten: die Items sind keine Links, sollen also nicht wie
   Buttons wirken. Nur auf Zeigergeraeten (kein Touch-":hover"-Kleben). */
@media (hover: hover) and (pointer: fine){
  .value-item{ transition: border-color var(--dur-2) var(--ease); }
  .value-item:hover{ border-color: var(--accent); }
  .value-item:hover .value-num{ color: var(--accent); }
}

/* ---------- Eyebrow-Variante in Akzentfarbe (statt neutralem --ink-faint) ----------
   Für den einen, bewussten Marken-Moment pro Seite (z.B. Leitmotiv-Statement) —
   NICHT als Ersatz für die normale, zurückhaltende .eyebrow über jedem Abschnitt. */
.eyebrow-accent{ color: var(--accent); }

/* ---------- Statement-Block (Markenstatement / Leitmotiv, z.B. "Unser Ansatz") ----------
   Eigenständiger Aussage-Moment: kleine Eyebrow in Akzentfarbe + eine große,
   bewusst zweizeilig gesetzte Zeile mit gezielter Zweifarbigkeit (dunkle
   Hauptzeile, Schluss in IUFC-Blau). Kein Rahmen, keine Fläche, kein Schatten —
   die Wirkung kommt allein aus Typografie, Farbe und Weißraum. Wiederverwendbar
   für vergleichbare Leitmotive auf anderen Unterseiten. */
.statement-block{ text-align:center; }
.statement-lead{
  margin-top: var(--sp-4);
  font-size: var(--text-4xl);
  max-width: 22ch;
  margin-inline: auto;
}
.statement-accent{ color: var(--accent); }

/* ---------- Section-Lead (gedämpfte Einleitungszeile unter einer Eyebrow) ----------
   Bewusst KEIN Heading — trägt Kontext, ohne mit einem übergeordneten
   Statement um die Aufmerksamkeit zu konkurrieren. */
.section-lead{
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: var(--sp-3);
}

/* ---------- Team: Position/Qualifikation getrennt gewichtet, Kompetenzen als Tags ---------- */
.team-card img, .team-card .avatar-placeholder{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top;
  border-radius: var(--r-sm);
}
.avatar-placeholder{
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
}
.avatar-placeholder span{
  font-family: var(--font-display); font-weight:700; font-size: var(--text-3xl);
  letter-spacing: -0.02em; color: var(--accent); opacity:.55;
}
.team-name{ margin-top: var(--sp-4); }
.team-position{ margin-top: var(--sp-1); font-weight:650; color: var(--ink); font-size: var(--text-base, 1rem); }
.team-qualification{ margin-top: 0.2em; font-size: var(--text-sm); font-style: italic; color: var(--ink-faint); }
.team-tags{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding:0; list-style:none; }
.team-tags li{
  font-size: var(--text-xs); font-weight:600; color: var(--ink-soft);
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.35em 0.75em;
}
.team-text{ margin-top: var(--sp-3); color: var(--ink-soft); }
.team-closing{ margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--ink-faint); max-width: 42ch; }

/* ---------- Kontaktseite: Firmenname garantiert einzeilig, Kontaktzeilen, Standort-Visual ---------- */
/* vw-basiertes clamp statt fester rem-Stufe: die Zeile bleibt auf JEDER Breite (auch 320px)
   in einer Zeile, weil die Schriftgröße mit der verfügbaren Breite mitskaliert. */
.company-name-line{
  white-space:nowrap; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.05rem, 4.6vw, 1.55rem); letter-spacing:-0.01em; color:var(--ink);
}
@media (min-width:620px){ .company-name-line{ font-size:var(--text-2xl); } }

.contact-list{ margin-top:var(--sp-6); }
.contact-row{ padding-block:var(--sp-4); border-top:1px solid var(--line-soft); }
.contact-row:first-child{ border-top:none; padding-top:0; }
.contact-row dt{
  font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.contact-row dd{ margin:.3em 0 0; font-family:var(--font-display); font-size:var(--text-xl); }
.contact-row dd a{ color:var(--ink); text-decoration-color:var(--accent-line); }
.contact-row dd a:hover{ color:var(--accent); }

/* Standort-Foto: echtes Luftbild, natürliches 16:9 statt dem 4:3-Standard der übrigen Splits */
.location-media img{ aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
@media (max-width:760px){ .location-media img{ aspect-ratio:16/10; } }

/* Standort: nur die Adresse, keine Lagebeschreibung — ruhig, aber klar lesbar */
.location-address{
  font-family:var(--font-display); font-size:var(--text-xl); line-height:1.4;
  color:var(--ink); margin-top:var(--sp-3);
}

/* ---------- Kompakte Merkmal-/Faktoren-Chips (z. B. innerhalb der Verkaufsprozess-Schritte) ---------- */
.tag-list{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-4) 0 0; padding:0; list-style:none; }
.tag-list li{
  font-size:var(--text-xs); font-weight:600; color:var(--ink-soft);
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:0.35em 0.75em;
}

/* ---------- Aufklappbare Detail-Liste innerhalb eines Prozessschritts (z.B. Unterlagenliste) ---------- */
.step-details{ margin-top:var(--sp-4); }
.step-details summary{
  cursor:pointer; font-size:var(--text-sm); font-weight:600; color:var(--accent);
  list-style:none; display:inline-block;
}
.step-details summary::-webkit-details-marker{ display:none; }
.step-details summary::before{ content:"+ "; }
.step-details[open] summary::before{ content:"– "; }
.step-details ul{
  margin:var(--sp-4) 0 0; padding-left:1.1em; color:var(--ink-soft); font-size:var(--text-sm);
  columns: 2; column-gap: var(--sp-6);
}
.step-details li{ margin-bottom:.4em; break-inside:avoid; }
@media (max-width:640px){ .step-details ul{ columns:1; } }


/* ---------- FAQ-Akkordeon (wiederverwendbar auf allen Leistungs-/Regionalseiten) ---------- */
.faq-list{ margin-top:var(--sp-7); max-width:74ch; }
.faq-item{
  border-bottom:1px solid var(--line-soft);
  padding-block:var(--sp-5);
}
.faq-list .faq-item:first-child{ border-top:1px solid var(--line-soft); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--sp-4);
  font-family:var(--font-display); font-weight:600; font-size:var(--text-lg);
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:0 0 auto; font-family:var(--font-body); font-weight:400;
  font-size:var(--text-xl); color:var(--accent); line-height:1;
  transition: transform var(--dur-2) var(--ease);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:var(--sp-3); color:var(--ink-soft); max-width:66ch; }
@media (prefers-reduced-motion:no-preference){
  .faq-item summary{ transition:color var(--dur-1) var(--ease); }
}

/* ============================================================
   RATGEBER-ÜBERSICHT — alphabetisches Grid (Änderung 21.09.2026)
   Einheitliche Karten-Struktur: Keyword → Titel (balanciert, feste
   Titel-Höhe für gleiche Fluchtlinie) → Beschreibung → CTA-Link.
   Sortierung erfolgt NUR über die Reihenfolge im HTML (alphabetisch
   nach Haupt-Keyword) — Grid/Flex ändert die DOM-Reihenfolge nie,
   damit A→Z auch auf Mobile erhalten bleibt.
   ============================================================ */
.guide-sort-hint{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:var(--sp-5);
}
/* WICHTIG (Korrektur 22.09.2026) -- Ursache des Overflow-Fehlers war NICHT die
   Balance-Technik, sondern zwei konkrete Dinge:
   1) &nbsp; hat einzelne Wortpaare zu einer unbrechbaren Kette verschweisst
      (z.B. "beim Immobilienverkauf"). Kombiniert mit word-break:keep-all hatte
      der Titel dann keine gueltige Umbruchstelle mehr an genau dieser Stelle --
      wurde die Kette breiter als die Kachel, musste sie ueberlaufen.
   2) Grid-Items sind per Spezifikation MINDESTENS so breit wie ihr Inhalt
      (min-width:auto), ausser man setzt explizit min-width:0. Ohne das durfte
      die Karte nicht auf die zugewiesene Spaltenbreite schrumpfen.
   Die Loesung: keine nbsp-Wortketten mehr, min-width:0 auf dem Grid-Item, und
   die Zeilenumbrueche der Titel werden im HTML explizit mit <br> an sprachlich
   sinnvoller Stelle gesetzt (deterministisch, unabhaengig vom Browser-Zufall).
   FUER KUENFTIGE RATGEBER: neuen Titel an einer <br>-Stelle mit <= 20 Zeichen
   pro Zeile umbrechen (siehe die fuenf Beispiele in ratgeber.html). Keine neuen
   nbsp-Wortketten einbauen -- das war exakt der Fehler. */
.guide-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items:stretch;
}
.guide-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  height:100%; min-width:0;
}
.guide-kicker{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
/* Feste Titel-Mindesthoehe (2 Zeilen Platz) -> alle Karten beginnen die
   Beschreibung auf derselben Linie, egal ob der Titel 1 oder 2 Zeilen belegt.
   KEIN line-clamp mehr -- Ellipsis-Abschneiden ist ausdruecklich unerwuenscht.
   Die <br>-Umbrueche im HTML sind so gewaehlt, dass niemals eine dritte Zeile
   entsteht (jedes Segment <= 20 Zeichen, sicher auch bei 320px-Screens). */
.guide-title{
  font-family:var(--font-display); font-size:var(--text-xl); line-height:1.32;
  letter-spacing:-0.01em; color:var(--ink); text-wrap:balance;
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
  max-width:100%; margin-top:var(--sp-3); min-height:calc(1.32em * 2);
}
.guide-desc{
  color:var(--ink-soft); margin-top:var(--sp-4); flex:1; max-width:100%;
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
}
.guide-cta{
  margin-top:var(--sp-5); font-size:var(--text-sm); font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:.35em;
}
.guide-cta::after{
  content:"→"; display:inline-block;
  transition:transform var(--dur-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .guide-card:hover .guide-cta::after{ transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce){
  .guide-cta::after{ transition:none; }
}

/* ---------- Kapitalanlage: Objektkarten (Bild bündig + Text darunter) ---------- */
.property-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.property-card img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.property-card .property-body{ padding: var(--sp-5) var(--sp-6) var(--sp-6); display:flex; flex-direction:column; flex:1; }
.property-card .badge{ align-self:flex-start; margin-bottom: var(--sp-3); }
.property-card h3{ margin-top:.05em; }
.property-card p{ margin-top:var(--sp-2); color:var(--ink-soft); max-width:none; }

/* ---------- Immobilienankauf: Funnel-Karte breiter, damit die Überschrift auf
   Desktop/Laptop einzeilig bleibt (Umbruch nur noch auf schmalen Geräten). ---------- */
.funnel-card{
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(var(--sp-6), 5vw, var(--sp-8)) clamp(var(--sp-5), 4vw, var(--sp-7));
}
.funnel-card h2{
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  white-space: nowrap;
}
@media (max-width: 700px){
  .funnel-card h2{ white-space: normal; }
}

/* ---------- Formularfelder vereinheitlichen: Select optisch an Text-/Textarea-Felder
   angleichen (native Selects rendern sonst leicht abweichend), einheitliche Mindesthöhe
   für saubere Touch-Ziele auf Mobil (gilt für alle .field-Formulare der Seite). ---------- */
.field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 10px 6px;
  padding-right: 2.3em;
  cursor: pointer;
}
.field input,
.field select{ min-height: 46px; }
.field textarea{ min-height: 96px; resize: vertical; }

/* ---------- Rechtliche Seiten (Impressum / Datenschutz) ----------
   Gemeinsame Designsprache für beide Pflichtseiten: klare Abschnitte statt
   Textwüste, Label/Wert-Felder für Kontaktdaten, dezente Hairlines statt
   Karten/Schatten. Bewusst ohne Akkordeons — alles bleibt sofort sichtbar. */
.legal-layout{ max-width:68ch; }
.legal-section{
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line-soft);
}
.legal-section:first-of-type{ border-top:none; padding-top:var(--sp-1); }
.legal-section h2{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.legal-section h3{
  font-size:var(--text-base);
  font-weight:650;
  color:var(--ink);
  margin-top:var(--sp-6);
}
.legal-section h2 + *{ margin-top:var(--sp-4); }
.legal-section p{ color:var(--ink-soft); margin-top:var(--sp-3); max-width:none; }
.legal-section h3 + p{ margin-top:var(--sp-2); }
.legal-section > p:first-child{ margin-top:0; }

/* Label/Wert-Felder — für Anbieter, Kontakt, Registerdaten etc. */
.legal-field{ margin-top:var(--sp-5); }
.legal-field:first-child{ margin-top:0; }
.legal-label{
  display:block; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.45em;
}
.legal-field p{ margin-top:0; color:var(--ink); line-height:1.6; }

/* Prüf-Hinweise — dezent, aber gut erkennbar (keine Box, keine Farbfläche) */
.legal-note{
  margin-top:var(--sp-3);
  padding-left:var(--sp-4);
  border-left:2px solid var(--line-strong);
  font-size:var(--text-sm);
  color:var(--ink-faint);
  font-style:italic;
  max-width:none;
}

@media (max-width:640px){
  .legal-section{ padding-block: var(--sp-6); }
}


/* ---------- Kapitalanlage: "Aktuelle Objekte" — feste 3-Spalten-Kacheln statt
   auto-fit-Grid. Grund: grid-auto (minmax 280px) konnte auf gaengigen Laptop-
   Breiten 4 statt 3 Spalten erzeugen -> Kachel zu schmal -> lange Begriffe wie
   "Eigentumswohnungen" wurden mitten im Wort getrennt (Rest-Buchstabe "n" allein
   in der naechsten Zeile). Feste 3/2/1-Spalten geben jeder Kachel verlaesslich
   genug Breite. ---------- */
.property-grid{
  display:grid; gap: var(--sp-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .property-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .property-grid{ grid-template-columns: 1fr; } }

/* Zusaetzliche Sicherung (Root-Cause, nicht nur Breite): laengere Objektbegriffe
   duerfen bei Platzmangel als GANZES Wort in die naechste Zeile umbrechen, aber
   NIE mitten im Wort getrennt werden. Ueberschreibt gezielt die globale
   "overflow-wrap: break-word"-Regel (ui.css) nur fuer diese Begriffe. */
.no-word-split{
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* ---------- Team-Attribute (eine Zeile, Mittelpunkt-getrennt, gleiche Farbe/Größe für alle) ---------- */
.team-attributes{
  color: var(--ink-soft);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  margin-top: var(--sp-2);
}


/* ============================================================
   RATGEBER — gemeinsame Bausteine für alle Ratgeber-Unterseiten
   (Änderung 22.09.2026, Vereinheitlichungs-Briefing). Ergänzt die
   bestehenden Bausteine (step-list, faq-list, cta-band, tag-list) um
   genau die Elemente, die den Ratgebern bisher fehlten oder die sich
   von Seite zu Seite unterschieden: Inhaltsverzeichnis, Infobox,
   Checkliste, Verlinkungs-Kacheln. Volle Border statt Side-Stripe
   (07-Prinzip: Side-Stripe = AI-Tell) — Tiefe über Hairline + Fläche,
   IUFC-Blau nur als schmale Linie unter dem Label, nie als bunte Box. */

/* ---------- Inhaltsverzeichnis ---------- */
.ratgeber-toc{
  margin-top:var(--sp-6);
  padding:var(--sp-5) var(--sp-6);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.ratgeber-toc-label{
  margin:0 0 var(--sp-3);
  font-size:var(--text-xs); font-weight:650; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ratgeber-toc ol{
  list-style:none; margin:0; padding:0; counter-reset:toc;
  display:grid; gap:.1em var(--sp-6);
}
@media (min-width:700px){ .ratgeber-toc ol{ grid-template-columns:1fr 1fr; } }
.ratgeber-toc li{ counter-increment:toc; border-top:1px solid var(--line-soft); }
.ratgeber-toc li:first-child, .ratgeber-toc li:nth-child(2){ border-top:0; }
@media (min-width:700px){ .ratgeber-toc li:nth-child(2){ border-top:1px solid var(--line-soft); } }
.ratgeber-toc a{
  display:flex; align-items:baseline; gap:var(--sp-3);
  padding-block:.6em; color:var(--ink-soft); font-size:var(--text-sm);
}
.ratgeber-toc a::before{
  content:counter(toc, decimal-leading-zero);
  flex:0 0 auto; min-width:2.1ch;
  font-family:var(--font-display); font-weight:600; color:var(--accent); opacity:.55;
}
.ratgeber-toc a:hover{ color:var(--ink); }

/* ---------- Infobox (Wichtig zu wissen / Praxishinweis) ---------- */
.infobox{
  margin:var(--sp-6) 0;
  padding:var(--sp-5) var(--sp-6);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.infobox-label{
  display:inline-block;
  margin:0 0 var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--accent-line);
  font-family:var(--font-body); font-weight:650; font-size:var(--text-xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.infobox p{ margin:0; color:var(--ink-soft); max-width:66ch; }
.infobox p + p{ margin-top:var(--sp-3); }
.infobox ul{ margin:var(--sp-3) 0 0; padding-left:1.1em; color:var(--ink-soft); }
.infobox ul li + li{ margin-top:.4em; }

/* ---------- Checkliste (Unterlagen, Anforderungen) ---------- */
.checklist{
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:grid; gap:0;
}
.checklist.cols-2{ }
@media (min-width:640px){
  .checklist.cols-2{ grid-template-columns:1fr 1fr; column-gap:var(--sp-6); }
}
.checklist li{
  display:flex; gap:var(--sp-3); align-items:baseline;
  padding-block:.55em; border-top:1px solid var(--line-soft);
  font-size:var(--text-sm); color:var(--ink-soft);
}
.checklist.cols-2 li:nth-child(1), .checklist.cols-2 li:nth-child(2){ border-top:0; }
@media (max-width:639px){ .checklist li:first-child{ border-top:0; } }
.checklist li::before{
  content:"✓"; flex:0 0 auto; color:var(--accent); font-weight:700;
}

/* ---------- Weiterführende Themen (interne Verlinkung) ---------- */
.related-links{
  display:grid; gap:var(--sp-4); margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
}
.related-links a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  color:var(--ink); font-weight:600; font-size:var(--text-sm);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.related-links a::after{ content:"→"; color:var(--accent); flex:0 0 auto; }
@media (hover:hover) and (pointer:fine){
  .related-links a:hover{ border-color:var(--accent); color:var(--accent); }
}
@media (prefers-reduced-motion:reduce){ .related-links a{ transition:none; } }