/* ============================================================
   workinup.de — Apple-like redesign
   Brand: workin'up · Coral #FF725F · Roobert
   ============================================================ */

@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Light.woff2') format('woff2');    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Regular.woff2') format('woff2');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Medium.woff2') format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('fonts/Roobert-Bold.woff2') format('woff2');     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Coral-Skala laut CI-Guide (Kern 500 = #FF725F, Hover 600, Dunkel 700) */
  --coral: #FF725F;
  --coral-50:  #FFF3F1;
  --coral-100: #FFDBD6;
  --coral-200: #FFCAC2;
  --coral-300: #FFBAB0;
  --coral-400: #FF8E7E;
  --coral-500: #FF725F;
  --coral-600: #FF5F50;
  --coral-700: #F04939;
  --coral-800: #CF2C1C;
  --coral-900: #B50F00;

  --ink:    #0A0A0A;
  --ink-2:  #2B2B2B;
  --ink-3:  #6B6B6B;
  --ink-4:  #9E9E9E;
  --ink-5:  #C7C7C7;

  --bg:        #FFFFFF;
  --bg-paper:  #F6F5F1;
  --bg-soft:   #FAFAF8;
  --line:      #ECEBE6;
  --line-2:    #DDDBD4;

  --green:  #16A34A;
  --amber:  #D97706;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;

  --maxw: 1280px;
  --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px -12px rgba(17,17,17,.08);
  --shadow-lift: 0 2px 8px rgba(17,17,17,.06), 0 24px 48px -16px rgba(17,17,17,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Roobert', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  font-size: 16px;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Type scale (Apple-like — display weights LIGHT, big leading) */
.display-1 { font-weight: 300; font-size: clamp(48px, 8.4vw, 124px); line-height: 0.94; letter-spacing: -0.045em; }
.display-2 { font-weight: 300; font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.038em; }
.display-3 { font-weight: 300; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.032em; }
.display-4 { font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.022em; }
.title-1   { font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -0.018em; }
.title-2   { font-weight: 500; font-size: 18px; line-height: 1.3;  letter-spacing: -0.012em; }
.body-l    { font-weight: 400; font-size: 19px; line-height: 1.55; letter-spacing: -0.008em; color: var(--ink-2); }
.body      { font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.body-s    { font-weight: 400; font-size: 14px; line-height: 1.5;  color: var(--ink-3); }
.eyebrow   { font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); }
.eyebrow.ink { color: var(--ink-3); }
.mono      { font-variant-numeric: tabular-nums; }
/* GF 13.08.: „2 Objekte" sah aus wie „20bjekte". Die Displaygroessen laufen
   bewusst eng (letter-spacing bis -0.045em) — auf ein Leerzeichen angewandt
   zieht das die Luft zwischen Zahl und Wort fast vollstaendig zu. Die Ziffer
   bekommt deshalb ihre normale Laufweite zurueck und etwas Abstand nach
   rechts. Nur dort, wo eine ZAHL vor einem Wort steht; die uebrige Zeile
   bleibt eng gesetzt. */
.zahl-vor-wort { letter-spacing: 0; margin-right: 0.08em; }

/* Prerender-Fassung (SEO-Textkoerper in #root, bis React uebernimmt).
   GF 17.08.: sah aus wie eine kaputte Seite. Ruhig setzen — dieselben
   Inhalte, nur als gestalteter Zwischenzustand. */
.prerender-inhalt { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; animation: prerenderEin .4s ease; }
@keyframes prerenderEin { from { opacity: 0; } to { opacity: 1; } }
.prerender-inhalt > ul:first-child { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 18px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.prerender-inhalt > ul:first-child a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.prerender-inhalt h1 { font-weight: 300; font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 14px; }
.prerender-inhalt h2 { font-weight: 500; font-size: 21px; margin: 28px 0 8px; }
.prerender-inhalt p, .prerender-inhalt li { color: var(--ink-2); line-height: 1.55; }
.prerender-inhalt table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; }
.prerender-inhalt th, .prerender-inhalt td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prerender-inhalt img { max-width: 100%; border-radius: 12px; }
/* 24.09. (Abnahme): das Beraterfoto (Kontakt, Gesuch) steht als span > img; in der App ist es ein Avatar. */
.prerender-inhalt span > img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
/* 24.09. (C202609-0364): Die Regeln oben griffen nie ganz. `.container-wide` steht weiter unten
   und setzte die Breite auf 1480 px zurück, und die Navigation steckt in <nav>, ist also nicht
   `ul:first-child`. Seit die Textseiten ihren vollen Inhalt tragen, sieht man das bis zur Übernahme
   durch React deutlich. Höhere Spezifität statt Umsortieren. */
.container-wide.prerender-inhalt { max-width: 760px; padding: 28px 20px 60px; }
.prerender-inhalt > nav > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 18px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.prerender-inhalt > nav > ul a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.prerender-inhalt dt { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.prerender-inhalt dd { margin: 2px 0 0; }
em.accent  { font-style: normal; color: var(--coral); }
em.italic  { font-style: normal; font-weight: inherit; color: var(--coral); }

/* Markenakzent: der Coral-Punkt (Rebranding 07/2026) — Dreieck-Klassen entfernt */

/* Container */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1480px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) {
  .container, .container-wide { padding: 0 20px; }
}

/* Buttons (pill, Apple style) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2B2B2B; }
.btn-coral   { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-600); }
.btn-ghost   { color: var(--ink); }
.btn-ghost:hover { color: var(--coral); }
.btn-outline { color: var(--ink); border: 1px solid var(--line-2); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-paper);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip.coral { background: var(--coral-50); color: var(--coral-600); border-color: var(--coral-100); }
.chip.dark  { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
/* GF 21.09.: Courtage-Hinweis auf der Objektseite (Chip im Kopf, Zeile in der Preisbox). Gruen wie das
   Passungs-Siegel „top", Coral-Toene wie der Empfehlungs-Chip; gemischt neutral. */
.chip.courtage-frei { background: #e3f1e8; color: #2e7148; border-color: #c9e4d3; }
.chip.courtage-pflichtig { background: var(--coral-50); color: var(--coral-600); border-color: var(--coral-100); }
.courtage-zeile { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; font-weight: 500; }
.courtage-zeile.courtage-frei { background: #e3f1e8; color: #2e7148; }
.courtage-zeile.courtage-pflichtig { background: var(--coral-50); color: var(--coral-600); }
.courtage-zeile.courtage-gemischt { background: var(--bg-paper); color: var(--ink-2); }

/* ============================================================
   GLOBAL HEADER (Apple-like floating glass nav)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.site-header .nav-row {
  height: 64px;
  display: flex; align-items: center; gap: 36px;
  max-width: 1480px; margin: 0 auto; padding: 0 32px;
}
.brand-logo {
  display: inline-flex; align-items: baseline;
  font-weight: 600; font-size: 22px; letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-logo .w { color: var(--ink); }
.brand-logo .up { color: var(--coral); }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
}
.nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-2);
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.nav-link.active { color: var(--ink); font-weight: 500; }
.nav-link.active::after {
  content: ''; display: block; height: 2px; width: 14px; margin: 4px auto -10px;
  background: var(--coral); border-radius: 2px;
}
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* GF 03.09.: Beim Sprachwechsel verschoben sich Menuepunkte und Knoepfe, weil
   die englischen Texte anders breit sind. Der Anker legt beide Texte in
   dieselbe Rasterzelle, der unsichtbare reserviert die Breite. */
.lbl-anker { display: inline-grid; text-align: center; }
.lbl-anker > span { grid-area: 1 / 1; white-space: nowrap; }
.lbl-anker > .lbl-geist { visibility: hidden; }

.menu-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--bg-paper); align-items: center; justify-content: center;
}
.menu-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .site-header .nav-row { gap: 16px; padding: 0 20px; height: 60px; }
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-cta .btn-text-only { display: none; }
}

/* Mobile nav drawer */
.mobile-drawer {
  /* 11.09.: ueber der klebenden Kopfzeile (z-index 850), sonst verdeckt sie den Schliessen-Knopf */
  position: fixed; inset: 0; z-index: 900;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
  padding: 28px;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer .close { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-paper); display: flex; align-items: center; justify-content: center; }
.mobile-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.mobile-drawer nav a {
  padding: 18px 16px;
  font-size: 28px; font-weight: 400; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer nav a.active { color: var(--coral); }
.mobile-drawer .footer-cta { margin-top: auto; display: grid; gap: 10px; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 80px 0 36px;
  margin-top: 120px;
}
/* GF 23.08.: "zwischen 'Klarheit bei den Kosten' und dem Footer ist jetzt
   eine weisse Leerzeile". Die 120 px stehen auf JEDER Seite; sie fallen nur
   dort auf, wo die letzte Sektion den Papierton traegt, weil dann ein
   weisser Streifen zwischen Papierton und dunklem Fuss steht. Endet eine
   Seite so, entfaellt der Abstand.
   Der Selektor braucht `~` und nicht `+`: zwischen main und Fuss stehen die
   Merk-Leiste und die Berater-Blase, beide fest positioniert und im Fluss
   unsichtbar, aber im DOM dazwischen. */
main:has(> .section.paper:last-child) ~ .site-footer { margin-top: 0; }
.site-footer .ft-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer .ft-brand .brand-logo .w { color: #fff; }
.site-footer .ft-brand .brand-logo .up { color: var(--coral); }
.site-footer h5, .site-footer .foot-titel {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer ul a { color: rgba(255,255,255,0.85); font-size: 14px; }
.site-footer ul a:hover { color: var(--coral); }
/* 02.09.: Footer-Links am Telefon mit Luft (31 Ziele unter 44 px). */
@media (max-width: 700px) {
  .site-footer ul { gap: 2px; }
  .site-footer ul a { display: inline-block; padding: 9px 0; }
}
/* Skip-Link: unsichtbar, bis er per Tab den Fokus bekommt. */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 1000; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.skip-link:focus { left: 16px; outline: 2px solid var(--coral); outline-offset: 2px; }
.site-footer .ft-bottom {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.site-footer .ft-brand p { color: rgba(255,255,255,0.65); font-size: 14px; max-width: 280px; line-height: 1.6; margin: 16px 0 0; }
@media (max-width: 900px) {
  .site-footer { padding: 56px 0 28px; }
  .site-footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .site-footer .ft-brand { grid-column: 1 / -1; }
}

/* ============================================================
   GENERIC PAGE / SECTION
   ============================================================ */
.section { padding: 100px 0; }
.section.tight { padding: 64px 0; }
.section.paper { background: var(--bg-paper); }
.section.dark  { background: var(--ink); color: #fff; }
.section.dark .body, .section.dark .body-l { color: rgba(255,255,255,0.78); }
.section.dark .eyebrow.ink { color: rgba(255,255,255,0.55); }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  /* 01.09. (impeccable, nur Telefon): Im Kopfblock stapelten sich Grid-Gap
     und Browser-Standardraender der Ueberschrift zu 60px Abstand zur eigenen
     Unterzeile, waehrend nach oben nur 41px standen — die Ueberschrift las
     sich als Unterschrift des vorigen Blocks. Im Grid traegt der Gap den
     Abstand, die Raender entfallen. */
  .section-head h1, .section-head h2, .section-head h3 { margin: 0; }
  .section-head .body-l, .section-head .lede { margin: 0; }
}

/* Nur fuer Vorleseprogramme und die Dokument-Gliederung sichtbar. */
.sr-nur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 01.09. (impeccable): der Kopfblock sass weiter von seinem Inhalt weg als
   vom vorigen Abschnitt und las sich dadurch wie dessen Unterschrift.
   Weniger Abstand nach unten bindet ihn an das, was er ankuendigt. */
.section-head { display: grid; gap: 14px; max-width: 720px; margin: 0 0 36px; }
/* 02.09. (GF): Ueberschriften brechen ausgeglichen statt mit erzwungenen <br>;
   .breit gibt der „Warum workin"-Zeile den Platz fuer zwei statt drei Zeilen. */
/* GF 17.09.: „Ueberschriften und Texte darunter haben unterschiedliche Abstaende": im Kopfblock trugen die
   Browser-Raender der h2 (0,83 em, bei 64 px rund 53 px) oben und unten zum Grid-Gap bei, im Block „Unser
   Anspruch" sind es 14 und 20 px. Jetzt ueberall: Vorzeile 14 px, Ueberschrift 20 px zum Text. */
.section-head h2 { text-wrap: balance; margin: 0; }
.section-head .body-l, .section-head .lede, .section-head p { margin: 0; }
.section-head .warum-zeile { margin-top: 6px; }
.section-head.breit { max-width: 900px; margin-bottom: 64px; }   /* GF 02.09.: mehr Luft zu den drei Karten */
.section-head .warum-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; margin-top: 6px; }
.section-head .warum-zeile .btn { flex: none; }
.section-head.center { margin: 0 auto 36px; text-align: center; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  padding: 56px 0 80px;
  position: relative;
}
.hero-split {
  display: grid;
  /* GF 23.09.: Botschaft links braucht die breitere Spalte, damit die
     zweite Headline-Zeile nicht umbricht. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  margin-top: 8px;
}
.hero-claim-col h1 { margin-top: 0; }
.hero-search-col .conv-search { margin: 0; max-width: none; }
/* GF 23.09.: Botschaft links, Suche rechts, also die DOM-Reihenfolge (seit
   01.09. Claim zuerst). Die Drehung per order: -1 vom 01.09. entfaellt.
   Handy: Headline, Erklaerung, Suche, drei Vorteile, ebenfalls DOM-Reihenfolge. */
@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .hero p.lede { margin-bottom: 0; }
}
.hero .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  margin-bottom: 28px;
}
.hero .hero-eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 4px rgba(255,114,95,.18);
}
.hero h1 {
  font-weight: 300;
  font-size: clamp(48px, 8.6vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 em.accent { color: var(--coral); font-style: normal; font-weight: 400; }
.hero h1 .underline { position: relative; }
.hero p.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 36px;
  font-weight: 400;
}

/* ============================================================
   CONVERSATIONAL SEARCH (hero)
   ============================================================ */
.conv-search {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow-lift);
  position: relative;
  max-width: 720px;
}
.conv-search .mode-tabs {
  display: inline-flex;
  background: var(--bg-paper);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 500;
}
.conv-search .mode-tabs button {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--ink-3);
  transition: background .2s ease, color .2s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.conv-search .mode-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.conv-search .conv-input {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.018em;
  color: var(--ink);
  resize: none;
  min-height: 88px;
  outline: none;
  line-height: 1.4;
}
.conv-search .conv-input::placeholder { color: var(--ink-4); }

.conv-search .suggestions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.conv-search .suggestions button {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  transition: all .2s ease;
}
.conv-search .suggestions button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.conv-search .conv-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  gap: 12px; flex-wrap: wrap;
}
.conv-search .conv-actions .hint {
  font-size: 13px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.conv-search .conv-actions .hint kbd {
  font-family: inherit; font-size: 11px;
  background: var(--bg-paper); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}

/* Classic search (toggle target) */
.classic-search { display: none; }
.classic-search.on { display: block; }
.conv-mode { display: block; }
.conv-mode.off { display: none; }

.classic-search .field-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
}
.classic-search .field {
  background: #fff;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.classic-search .field label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4);
}
.classic-search .field input,
.classic-search .field select {
  border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 400; padding: 4px 0;
}
@media (max-width: 720px) {
  .classic-search .field-grid { grid-template-columns: 1fr 1fr; }
}

/* Hero stats strip */
.hero-stats {
  margin-top: 64px;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hero-stat .num {
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 52px);
  letter-spacing: -0.032em;
  line-height: 1;
}
.hero-stat .num em { font-style: normal; color: var(--coral); }
.hero-stat .lbl { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 720px) { .hero-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }

/* ============================================================
   FEATURE CARDS / WHY US
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.feature.dark .body { color: rgba(255,255,255,0.7); }
.feature.coral { background: var(--coral-50); border-color: var(--coral-100); }

.feature .icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-paper);
  display: grid; place-items: center;
  color: var(--coral);
}
.feature.dark .icon-wrap { background: rgba(255,255,255,0.08); color: var(--coral); }
.feature h3 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.018em; line-height: 1.2; }
.feature p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.55; }
.feature.dark p { color: rgba(255,255,255,0.7); }
.feature .feat-foot { margin-top: auto; font-size: 14px; color: var(--coral); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  position: relative;
}
.step::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 32px; height: 2px; background: var(--coral);
}
.step .num { font-size: 12px; font-weight: 500; color: var(--coral); letter-spacing: 0.12em; }
.step h3, .step h4 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.step p { margin: 0; color: var(--ink-3); font-size: 14.5px; }

/* ============================================================
   TRUST: logos, testimonial, stats
   ============================================================ */
.logo-strip {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 32px 48px;
  padding: 28px 0;
  /* GF 08.09.2026: keine Trennlinien ueber und unter den Kundenlogos. */
}
.logo-strip .logo-mark {
  font-weight: 500; font-size: 18px;
  color: var(--ink-3);
  letter-spacing: -0.015em;
  opacity: 0.75;
  transition: opacity .2s ease, color .2s ease;
}
.logo-strip .logo-mark:hover { opacity: 1; color: var(--ink); }

.testimonial-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-big {
  background: var(--bg-paper);
  border-radius: var(--r-2xl);
  padding: 56px;
  display: flex; flex-direction: column; gap: 28px;
}
/* 02.09. (GF): „so gross, dass man ihn am Laptop gar nicht lesen kann."
   Die Foto-Regel traegt derzeit genau EINE Rezension in den grossen Platz,
   und die hat 586 Zeichen. Die Lesegroesse fuer lange Zitate galt bisher nur
   unter 720px; jetzt auf allen Breiten: kurze Zitate behalten den grossen
   Auftritt, lange wechseln in Textgroesse mit Lesebreite. */
.testimonial-big blockquote.rez-lang {
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.6; letter-spacing: 0; font-weight: 400;
  max-width: 720px;
}
.testimonial-big blockquote {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.testimonial-big .author {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto;
}
.testimonial-big .author .av {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB199, var(--coral));
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 16px;
}
.testimonial-big .author .nm { font-weight: 500; font-size: 15px; }
.testimonial-big .author .rl { color: var(--ink-3); font-size: 13px; }

.testimonial-side {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  justify-content: space-between;
}
.testimonial-side .stars { color: var(--coral); font-size: 18px; letter-spacing: 2px; }
.testimonial-side .num   { font-size: 64px; font-weight: 300; letter-spacing: -0.032em; line-height: 1; }
.testimonial-side .lbl   { color: rgba(255,255,255,0.7); font-size: 14px; }
.testimonial-side .source-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   OFFICE CARD (search results & detail)
   ============================================================ */
.office-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.office-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.office-card .photo {
  aspect-ratio: 4 / 3;
  background: var(--bg-paper);
  position: relative;
  overflow: hidden;
}
.office-card .photo .save {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--ink-2);
  z-index: 2;
}
.office-card .photo .save:hover { color: var(--coral); }
.office-card .photo .badge {
  position: absolute; top: 14px; left: 14px;
  z-index: 2;
}
.office-card .body-area {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.office-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.office-card h3, .office-card h4 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.office-card .loc { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.office-card .price { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; }
.office-card .price small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.office-card .meta-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.office-card .photo .save.on { color: var(--coral); background: #fff; }

/* Empfohlene Objekte — Spaltenzahl (GF 28.07.).
   Stand vorher als Inline-Stil im JSX und war damit fuer CSS unerreichbar:
   am Telefon blieben drei Spalten, also 180 px je Karte. Titel wurden
   abgeschnitten, „ab 20.547,00 €" brach mit dem Euro auf eine eigene Zeile,
   und das „Empfohlen"-Etikett lag unter dem Merken-Knopf. */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .featured-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Eine Karte ueber die volle Breite: Titel und Preis duerfen nebeneinander
     bleiben, aber der Preis braucht garantierten Platz, sonst bricht er um. */
  .office-card .top-row { gap: 14px; }
  .office-card .price { white-space: nowrap; flex: none; }
  .office-card .photo { aspect-ratio: 16 / 10; }
}
/* Etikett und Merken-Knopf kollidierten auf schmalen Karten. */
@media (max-width: 380px) {
  .office-card .photo .badge { top: 10px; left: 10px; }
  .office-card .photo .save { top: 10px; right: 10px; width: 34px; height: 34px; }
}
.office-card .meta-row span { display: inline-flex; align-items: center; gap: 5px; }

/* Office photo SVG placeholder fills */
.photo-svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   SEARCH PAGE LAYOUT
   ============================================================ */
.search-shell {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: calc(100vh - 64px);
  position: sticky; top: 64px;
}
.search-list {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
}
.search-list .filter-bar {
  position: sticky; top: 0; z-index: 4;
  background: rgba(250,250,248,0.92);
  backdrop-filter: blur(12px);
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--line);
}
.search-list .filter-bar .top {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 12px;
}
.search-list .filter-bar .top b { color: var(--ink); font-weight: 500; }

.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pills .fp {
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 450;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.filter-pills .fp.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-pills .fp:hover { border-color: var(--ink-2); }

.search-list .results { padding: 16px 16px 80px; display: grid; gap: 12px; }
.search-list .result-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.search-list .result-row:hover { border-color: var(--ink); box-shadow: var(--shadow-card); }
.search-list .result-row.active { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,114,95,0.12); }
.search-list .result-row .photo {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-paper);
}
.search-list .result-row .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-list .result-row .info h4 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.search-list .result-row .info .loc { font-size: 12.5px; color: var(--ink-3); }
.search-list .result-row .info .price { font-size: 14px; font-weight: 500; margin-top: auto; }
.search-list .result-row .info .meta-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.search-list .result-row .info .meta-tags span { background: var(--bg-paper); padding: 2px 7px; border-radius: 6px; }

.search-map {
  position: relative;
  background: var(--bg-paper);
  overflow: hidden;
}
.search-map .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.search-map .map-overlay-controls {
  position: absolute; top: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.search-map .map-overlay-controls button {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
}
.search-map .pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 2;
}
.search-map .pin .pin-shape {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  white-space: nowrap;
  position: relative;
  border: 2px solid #fff;
}
.search-map .pin .pin-shape::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid #fff;
}
.search-map .pin.active .pin-shape { background: var(--coral); }
.search-map .pin.active .pin-shape::after { border-top-color: var(--coral); }

.search-map .floating-card {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #fff;
  border-radius: var(--r-l);
  width: 360px;
  padding: 14px;
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  box-shadow: var(--shadow-lift);
  z-index: 3;
  border: 1px solid var(--line);
}
.search-map .floating-card .photo { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; }

@media (max-width: 900px) {
  .search-shell { grid-template-columns: 1fr; height: auto; position: static; }
  .search-map { display: none; }
}

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 620px;
}
.detail-gallery > div { background: var(--bg-paper); position: relative; }
.detail-gallery > div:first-child { grid-row: 1 / 3; }
/* GF 28.07.: unten LINKS und an der Galerie verankert (vorher rechts und in
   der ersten Kachel — am Telefon landete er dadurch mitten im Bild). */
.detail-gallery { position: relative; }
.detail-gallery .all-photos {
  position: absolute; bottom: 16px; left: 16px; z-index: 3;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 720px) { .detail-gallery { grid-template-columns: 1fr 1fr; aspect-ratio: 4/3; } }
@media (max-width: 560px) { .detail-gallery .all-photos { bottom: 12px; left: 12px; padding: 8px 12px; } }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  padding-top: 48px;
}
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; gap: 32px; } }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 32px 0;
}
.spec-grid .spec .lbl { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: 0.04em; }
.spec-grid .spec .val { font-size: 22px; font-weight: 400; letter-spacing: -0.015em; }
@media (max-width: 720px) { .spec-grid { grid-template-columns: 1fr 1fr; } }

/* workin'up Score auf der Objektseite */
/* WORKIN SCORE auf der Objektseite (GF 30.07. entschaerft)
   Vorher: eigener Papier-Block, 24 px Innenabstand, grosse Coral-Kachel — im
   Screenshot der auffaelligste Baustein der ganzen Seite, noch vor Preis und
   Flaechen. Jetzt eine ruhige Zeile mit feinen Trennlinien: Siegel links, die
   drei Kriterien rechts. Keine Flaechenfarbe. */
.detail-score {
  display: grid; grid-template-columns: 168px 1fr; gap: 28px; align-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 2px; margin: 0 0 32px;
}
.detail-score .ds-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* GF 10.08.: Ohne die Aufschluesselung bleibt nur der Ring. Das Zwei-Spalten-
   Raster oben wuerde ihn dann in eine 168-px-Spalte zwaengen und rechts eine
   leere Flaeche lassen — deshalb hier auf Inhaltsbreite zurueck. */
.detail-score.nur-badge { display: flex; align-items: center; padding: 16px 2px; }
.detail-score .ds-side p { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin: 0; }
@media (max-width: 720px) {
  .detail-score { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .detail-score .ds-side p { font-size: 12px; }
}

/* FAKTEN-KACHELN „Objekt & Lage" (Baujahr, Stellplatz, Energiewerte)
   Vorher ein Inline-Flex mit `flex:0 1 200px` je Kachel — bei zwei Kacheln
   ging das, mit bis zu sechs entstanden ungleiche Restzeilen. Als Raster
   bleiben die Kacheln gleich breit, egal wie viele gepflegt sind. */
.fact-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.fact-tile { background: var(--bg-paper); border-radius: var(--r-m); padding: 14px 16px; min-width: 0; }
/* 10,5 px stand vorher als Inline-Stil an jeder Kachel — „Wärmeverbrauch" und
   „Stromverbrauch" brauchen die kleinere Stufe, sonst brechen sie um. */
.fact-tile .eyebrow { font-size: 11px; letter-spacing: 0.12em; }
.fact-tile .ft-val { font-size: 20px; font-weight: 500; margin-top: 4px; letter-spacing: -0.01em; }
.fact-tile .ft-unit { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.fact-tile .ft-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 480px) { .fact-tiles { grid-template-columns: 1fr 1fr; } }

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin-top: 24px;
}
@media (max-width: 720px) { .amenity-grid { grid-template-columns: 1fr; } }
.amenity { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.amenity .ico { width: 22px; height: 22px; color: var(--ink-2); flex-shrink: 0; margin-top: 2px; }
.amenity h5 { margin: 0; font-size: 15px; font-weight: 500; }
.amenity p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }

/* Inquiry sticky card */
.inquiry-card {
  position: sticky; top: 88px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.inquiry-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.inquiry-card .price { font-size: 32px; font-weight: 400; letter-spacing: -0.022em; }
.inquiry-card .price-unit { font-size: 14px; color: var(--ink-3); }
.inquiry-card .price-sub { font-size: 13px; color: var(--ink-3); }

.inquiry-card .field-block {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  margin-bottom: 16px;
  overflow: hidden;
}
.inquiry-card .field-block .row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.inquiry-card .field-block .row:last-child { border-bottom: none; }
.inquiry-card .field-block .field {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  /* 🛑 30.07. (GF: „Die Eingaben in dem Kontaktfeld sind abgeschnitten")
     GEMESSEN auf 1440 px: Die Karte in der Seitenspalte ist 360 px breit, der
     Feldblock damit 302 px — die beiden Spalten brauchten aber 356 px, also
     54 px zu viel. `overflow:hidden` am Feldblock hat den Ueberhang
     abgeschnitten: vw-company, vw-phone und vw-when ragten rechts aus der
     Karte heraus.
     Ursache ist NICHT das Raster, sondern die Eigenbreite des <input>: ohne
     Angabe traegt es size="20", das sind bei 14 px Schrift ~177 px
     Mindestbreite. Eine Grid-Spalte darf per Voreinstellung (min-width:auto)
     nicht unter die Mindestbreite ihres Inhalts — also gewann das Feld gegen
     die Karte. min-width:0 hier und width:100% am Feld darunter loesen das an
     der Wurzel; am Telefon (< 700 px) stapeln die Zeilen wie bisher. */
  min-width: 0;
}
.inquiry-card .field-block .field:last-child { border-right: none; }
.inquiry-card .field-block .field label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.inquiry-card .field-block .field input {
  border: none; outline: none; padding: 0; font-size: 14px;
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; background: transparent;
}

.advisor-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--bg-paper);
  border-radius: var(--r-m);
  margin-top: 18px;
}
.advisor-card .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB199, var(--coral));
  color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
}
.advisor-card .nm { font-weight: 500; font-size: 14px; }
.advisor-card .rl { font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 02.09. (Critique P2): vier Koepfe im Dreierraster liessen eine Waisenkarte;
   ab 1100 px vier nebeneinander, darunter zwei mal zwei. */
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.team-card .portrait {
  aspect-ratio: 4 / 5;
  background: var(--bg-paper);
  /* GF 27.07.: Die weiter angeschnittenen Portraets werden herangezoomt
     (wuTeamZoom in pages.jsx), damit alle Koepfe gleich gross wirken. Ohne
     overflow:hidden liefe das vergroesserte Bild ueber den Kartenrand. */
  overflow: hidden;
}
.team-card .body-area { padding: 22px 24px 24px; }
.team-card h4, .team-card h3 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.018em; }
.team-card .role { font-size: 14px; color: var(--ink-3); margin: 4px 0 14px; }
.team-card .bio  { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; }
.team-card .links { display: flex; gap: 6px; }
.team-card .links a {
  /* 02.09.: 44 px Trefferflaeche statt 36 (Critique, Casey-Persona). */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-paper);
  display: grid; place-items: center;
}
.team-card .links a:hover { background: var(--ink); color: #fff; }

/* ============================================================
   MAGAZINE / SEO HUB
   ============================================================ */
.mag-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 900px) { .mag-hero { grid-template-columns: 1fr; } }
.mag-feature {
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--bg-paper);
  display: flex; flex-direction: column;
  min-height: 460px;
  position: relative;
}
.mag-feature .cover { flex: 1; background: var(--bg-paper); position: relative; min-height: 330px; }
/* 08.09.2026: Diagramme und typografische Cover (SVG) fuellen den Cover-Kasten
   wie ein Bild; ohne absolute Lage bekam das SVG auf schmalen Viewports seine
   Eigenhoehe und wurde oben und unten beschnitten. */
.mag-feature .cover > .photo-svg, .mag-item .cover > .photo-svg, .mag-card .thumb > .photo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mag-item .cover, .mag-card .thumb { position: relative; }
/* Artikelkopf: breite Fassung (800×360) ab 641 px, schmale (400×300) darunter. */
.magvis-schmal { display: none; }
@media (max-width: 640px) { .magvis-breit { display: none; } .magvis-schmal { display: block; } .art-bild.magvis { aspect-ratio: 4 / 3 !important; } }
.mag-feature .info { padding: 28px 32px 32px; background: #fff; }
.mag-feature .info h2 { margin: 8px 0 12px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; letter-spacing: -0.022em; line-height: 1.15; }
.mag-feature .info p { margin: 0 0 16px; color: var(--ink-3); font-size: 15px; }
.mag-feature .info .meta { font-size: 13px; color: var(--ink-3); }

.mag-side { display: grid; gap: 16px; }
.mag-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
  align-items: center;
}
.mag-card h4 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.mag-card .meta { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.mag-card .thumb { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-paper); }

.mag-cat-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 32px 0;
}
.mag-cat-strip a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-paper);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.mag-cat-strip a:hover, .mag-cat-strip a.active { background: var(--ink); color: #fff; }

.mag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
@media (max-width: 900px) { .mag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mag-grid { grid-template-columns: 1fr; } }
.mag-item .cover { aspect-ratio: 4/3; border-radius: var(--r-l); overflow: hidden; background: var(--bg-paper); margin-bottom: 16px; }
.mag-item .cat { font-size: 12px; font-weight: 500; color: var(--coral); letter-spacing: 0.1em; text-transform: uppercase; }
.mag-item h3 { margin: 8px 0 8px; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; }
.mag-item p { margin: 0; color: var(--ink-3); font-size: 14px; }
.mag-item .meta { font-size: 12.5px; color: var(--ink-4); margin-top: 12px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.faq-item .q { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: start; cursor: pointer; }
.faq-item .q:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.faq-item h3, .faq-item h4 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -0.012em; }
.faq-item .toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-paper);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform .25s ease, background .2s ease;
}
.faq-item.open .toggle { transform: rotate(45deg); background: var(--ink); color: #fff; }
/* 01.09. (impeccable): max-height/padding animieren erzwingt Layout-Arbeit
   pro Frame. grid-template-rows animiert im Compositor, und die alte
   400px-Deckelung, die lange Antworten abschnitt, entfaellt gleich mit.
   Der Innenabstand liegt fest am inneren <span> und waechst mit der Zeile
   aus dem Verborgenen, statt selbst animiert zu werden. */
.faq-item .a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
  font-size: 16px; color: var(--ink-2); line-height: 1.6;
}
.faq-item .a > span { overflow: hidden; min-height: 0; }
/* Der Abstand liegt als Inhalt IM beschnittenen Span: Polsterung am Span
   selbst bliebe zugeklappt als 14px-Luecke stehen (padding wird von
   overflow:hidden nicht mitbeschnitten). */
.faq-item .a > span::before { content: ''; display: block; height: 14px; }
.faq-item.open .a { grid-template-rows: 1fr; }

/* ============================================================
   BIG CTA BANNER
   ============================================================ */
.cta-banner {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* 01.09. (GF): „Lichthof weg" — die Coral-Radial-Aura und der farbige
   Schlagschatten unter dem Knopf sind entfernt; der Knopf traegt sich auf
   dem dunklen Grund von allein. */
.cta-banner h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.05;
}
.cta-banner h2 em { font-style: normal; color: var(--coral); }
.cta-banner p { color: rgba(255,255,255,0.7); margin: 16px 0 0; font-size: 17px; max-width: 50ch; }
.cta-banner .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 2; }
@media (max-width: 720px) { .cta-banner { grid-template-columns: 1fr; padding: 48px 32px; } .cta-banner .actions { justify-content: flex-start; } }

/* ============================================================
   PROGRESS / Conversational answers (chat-like UI)
   ============================================================ */
.conv-thread {
  display: flex; flex-direction: column; gap: 14px;
}
.conv-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.conv-bubble.user {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.conv-bubble.bot {
  align-self: flex-start;
  background: var(--bg-paper);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.conv-bubble.bot strong { color: var(--coral); font-weight: 500; }

/* Subtle fade-in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fade-up.delay-1 { animation-delay: 0.08s; }
.fade-up.delay-2 { animation-delay: 0.16s; }
.fade-up.delay-3 { animation-delay: 0.24s; }
.fade-up.delay-4 { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }

/* Scroll-Reveals (reveal.js) + Mikro-Interaktionen */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; translate: 0 16px; transition: opacity .55s cubic-bezier(.2,.7,.2,1), translate .55s cubic-bezier(.2,.7,.2,1); }
  .rv-in { opacity: 1; translate: 0 0; }
  .rc-photo, .rr-photo { overflow: hidden; }
  .rc-photo img, .rr-photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .rc:hover .rc-photo img, .rr:hover .rr-photo img { transform: scale(1.04); }
  .btn .arrow, .inline-link svg { transition: transform .25s ease; }
  .btn:hover .arrow, .inline-link:hover svg { transform: translateX(3px); }
}

/* Scrollbar polish */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); border: 2px solid transparent; background-clip: padding-box; }

/* Sticky utility */
.sticky-top-pad { padding-top: 88px; }

/* SEO/AEO content layout */
.prose { max-width: 720px; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }
.prose h2 { font-size: 30px; font-weight: 400; letter-spacing: -0.022em; margin: 40px 0 14px; }
.prose h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 28px 0 10px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 8px 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

.conv-search .suggestions button { text-align: left; }

/* Kundenlogos (GF-Freigabe 22.07.) — dezent entfärbt, Weiß-Logo invertiert,
   JPG-Kasten via multiply auf hellem Grund unsichtbar */
.logo-strip-img { justify-content: center; }
/* Größe wird pro Logo aus dem echten Seitenverhältnis berechnet (wuLogoFit in
   home.jsx): gleiche FLÄCHE statt gleicher Höhe — sonst wirken quadratische
   Bildmarken (Yunex/deugro/yz sind 1:1) neben Wortmarken winzig (GF 27.07.).
   Die Werte hier greifen nur, bis das Bild geladen ist bzw. wenn sich kein
   Seitenverhältnis auslesen lässt. */
.logo-strip-img .logo-img {
  height: 38px; width: auto; max-height: 50px; max-width: 150px; object-fit: contain;
  filter: grayscale(1); mix-blend-mode: multiply; opacity: .65;
  transition: opacity .2s ease, filter .2s ease;
}
.logo-strip-img .logo-img:hover { opacity: 1; filter: grayscale(0); }
.logo-strip-img .logo-inv { filter: grayscale(1) invert(1); mix-blend-mode: multiply; }
.logo-strip-img .logo-inv:hover { filter: grayscale(0) invert(1); }

/* Rotierende Logo-Leiste: max. 2 Reihen à 7 Plätze, Einzel-Crossfade */
.logo-strip-rot {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 28px 40px; justify-items: center; align-items: center;
}
.logo-strip-rot .logo-slot {
  display: grid; place-items: center; min-height: 56px; min-width: 0; max-width: 100%;
  opacity: 1; transition: opacity .42s ease;
}
/* Ein breites Wortmarken-Logo (bis 150px) darf seine Rasterzelle nie sprengen —
   auf schmalen Breiten ist die Zelle kleiner als die berechnete Breite.
   object-fit:contain lässt es dann proportional kleiner werden statt zu verzerren. */
.logo-strip-rot .logo-img { max-width: 100%; }
.logo-strip-rot .logo-slot.fading { opacity: 0; }
@media (max-width: 900px) { .logo-strip-rot { grid-template-columns: repeat(4, 1fr); gap: 22px 26px; } }
@media (max-width: 560px) { .logo-strip-rot { grid-template-columns: repeat(3, 1fr); } }

/* Karriere: Job-Karten mit aufklappbarem Detail (GF 22.07.) */
.job-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 14px; overflow: hidden; }
.job-card .job-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 22px 24px; background: none; border: none; cursor: pointer; text-align: left; }
.job-card .job-head h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.job-card .job-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.job-card .job-toggle { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-paper); transition: transform .25s ease, background .2s ease; }
.job-card.open .job-toggle { transform: rotate(90deg); background: var(--coral-50, #FFF1EE); color: var(--coral-700, #C2432F); }
.job-card .job-body { padding: 0 24px 26px; border-top: 1px solid var(--line); }
.job-card .job-body > p:first-child { margin-top: 18px; }
.job-card .job-body h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral-700, #C2432F); }
.job-card .job-body ul { margin: 0; padding-left: 20px; }
.job-card .job-body li { margin-bottom: 6px; font-size: 14.5px; color: var(--ink-2, #2B2B2B); }

/* ============================================================
   Mobile-Härtung (GF 22.07.): kein horizontales Rutschen, kein
   Rauszoomen auf iPhone/Android. Sicherheitsnetz + gezielte
   Umbrüche für Inline-Grids ohne eigene Media-Queries.
   (!important nötig: Stylesheet-!important schlägt Inline-Styles.)
   ============================================================ */
/* GF 27.07.: `overflow-x: hidden` auf html/body macht beide zu Scroll-Containern —
   dadurch klebte der Header NICHT mehr (position:sticky loest gegen den naechsten
   Scroll-Container auf; gemessen: top −1126 px bei scrollY 1126, mit overflow:visible
   dagegen top 0). `clip` verhindert denselben horizontalen Ueberlauf, erzeugt aber
   KEINEN Scroll-Container — sticky funktioniert weiter.
   Fallback: Browser ohne `clip` fallen auf die alte Zeile zurueck. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
img, svg, video { max-width: 100%; }
/* RASTER, DIE BISHER NUR ALS INLINE-STIL EXISTIERTEN (GF 28.07.)
   Vier Fundstellen an einem Tag, alle mit derselben Wirkung: ein
   `style={{gridTemplateColumns: …}}` im JSX ist fuer CSS unerreichbar, also
   konnte kein Medienbereich je greifen. Die Kontaktseite blieb dadurch am
   Telefon zweispaltig — das Formular lief rechts aus dem Bild.
   Spaltenzahl gehoert ins CSS, damit sie pro Bildschirmbreite anders sein darf. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.news-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  background: var(--bg-paper); border-radius: var(--r-2xl); padding: 64px 56px;
}
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 0 auto; }
.company-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .news-grid { grid-template-columns: 1fr; padding: 40px 28px; gap: 24px; }
  .proscons { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Zwei Eingabefelder nebeneinander sind auf 375 px zu eng — gestapelt
     bleibt die Beschriftung lesbar und das Tippfeld breit genug. */
  .inquiry-card .field-block .row { grid-template-columns: 1fr; }
  .inquiry-card .field-block .field { border-right: none; }
  .news-grid { padding: 32px 20px; border-radius: var(--r-xl); }
  .aeo-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mini-quotes { grid-template-columns: 1fr !important; }
  .company-stats { grid-template-columns: 1fr !important; gap: 28px !important; }
  .price-grid { grid-template-columns: 1fr !important; }
  .how-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .how-row > div:first-child { display: flex; align-items: baseline; gap: 14px; }
}

/* Mobile-Härtung Teil 2 (GF-Video 22.07.): Grid-Kinder dürfen schrumpfen —
   sonst zwingt die Flächen-Tabelle (Scroller mit Eigenbreite) die ganze
   Inhalts-Spalte der Objektseite auf 650px (min-width:auto-Falle). */
.detail-layout > * { min-width: 0; }
.detail-layout .data-table { min-width: 560px; }
@media (max-width: 700px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tools-grid { grid-template-columns: 1fr; }
  /* (Logo-Zellen-Schutz gilt jetzt global, s. .logo-strip-rot oben) */
  /* Featured-Karten: Preis darf umbrechen statt überzustehen */
  .rc .top-row, .office-card .top-row { flex-wrap: wrap; }
}


/* --- Site-Suche (Header-Overlay) + Formular-Zustaende (GF 22.07.) --- */
.ss-overlay{position:fixed;inset:0;background:rgba(24,21,18,.45);backdrop-filter:blur(3px);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.ss-box{width:100%;max-width:640px;background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.25);overflow:hidden}
.ss-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2,#eee)}
.ss-head input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;background:transparent}
.ss-close{border:none;background:none;cursor:pointer;padding:6px;border-radius:8px;display:flex;color:inherit}
.ss-close:hover{background:#f4f1ee}
.ss-results{max-height:min(52vh,460px);overflow-y:auto;padding:6px}
.ss-hit{display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;gap:2px 12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:inherit}
.ss-hit:hover{background:#faf7f4}
.ss-art{grid-row:1/3;align-self:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a938c}
.ss-t{font-weight:600;font-size:14.5px}
.ss-d{font-size:12.5px;color:#6f6a64;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-empty{padding:16px;font-size:14px;color:#6f6a64}
.form-ok{display:flex;align-items:center;gap:10px;margin-top:12px;padding:14px 16px;border-radius:14px;background:#eef7ef;color:#1e6b34;font-weight:600;font-size:14.5px}
.form-err{margin-top:8px;font-size:13px;color:#b3402f}
@media (max-width:700px){.ss-overlay{padding:8vh 8px 8px}.ss-hit{grid-template-columns:64px 1fr}}


/* --- Magazin-Artikel (GF 22.07.) --- */
/* 08.09.: Artikelkopf und Bild so breit wie das Lesegeruest darunter
   (Leiste 240 + Abstand 56 + Text 720). Vorher 760 px: ein Titel brach in
   sechs Zeilen um. */
.art-wrap{max-width:1016px}
.art-page .hero h1{max-width:22ch}
.art-page .hero .lede{max-width:720px}
.art-back{color:inherit;text-decoration:none}
.art-back:hover{color:var(--coral,#FF725F)}
.art-meta{margin-top:16px}
.art-langnote{margin-top:10px;padding:8px 12px;background:#faf4ee;border-radius:10px;display:inline-block}
/* --- Lesegeruest Artikel (GF 08.09.) --- */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px;max-width:1016px;margin:0 auto}
.art-rail{display:grid;gap:22px;align-self:start;margin-bottom:28px}
.art-toc ol{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:toc}
.art-toc a{display:flex;gap:10px;font-size:13.5px;color:var(--ink-3,#6B6B6B);text-decoration:none;line-height:1.35;border:1px solid var(--line,#ECEBE6);border-radius:999px;padding:6px 12px}
.art-toc a:hover{color:var(--ink,#0A0A0A);border-color:var(--ink,#0A0A0A)}
.art-kz{background:#F6F5F1;border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px}
.art-kz .eyebrow{grid-column:1/-1}
.art-kz .z{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--ink,#0A0A0A);white-space:nowrap}
.art-kz .l{font-size:12.5px;color:var(--ink-3,#6B6B6B);margin-top:6px;line-height:1.35}
@media (min-width:1100px){
  .art-layout{grid-template-columns:240px minmax(0,720px)}
  .art-rail{position:sticky;top:96px;margin-bottom:0}
  .art-toc ol{display:grid;gap:0}
  .art-toc a{border:0;border-top:1px solid var(--line,#ECEBE6);border-radius:0;padding:8px 0}
  .art-toc li:last-child a{border-bottom:1px solid var(--line,#ECEBE6)}
  .art-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-size:11px;color:var(--coral,#FF725F);letter-spacing:.06em;padding-top:3px;font-weight:500}
  .art-kz{grid-template-columns:1fr}
}
.art-lead{padding:4px 0 8px 24px;border-left:3px solid var(--coral,#FF725F);margin-bottom:30px}
.art-lead .eyebrow{display:block;margin-bottom:10px}
.art-lead h2{font-size:clamp(22px,2.4vw,28px);line-height:1.2;font-weight:500;margin:0 0 12px;letter-spacing:-.015em}
.art-lead p{font-size:19px;line-height:1.55;color:var(--ink-2,#2B2B2B);margin:0}
.art-h{font-size:clamp(22px,3vw,28px);line-height:1.2;margin:44px 0 16px;padding-top:24px;border-top:1px solid var(--line,#ECEBE6);font-weight:500;letter-spacing:-.015em}
.art-h .nr{display:block;font-size:12px;letter-spacing:.18em;color:var(--coral,#FF725F);font-weight:500;margin-bottom:8px}
.art-p{font-size:17.5px;line-height:1.7;margin:0 0 18px;color:#2c2925}
.art-zitat{margin:36px 0;padding:0 0 0 24px;border-left:3px solid var(--coral,#FF725F);font-size:clamp(22px,2.4vw,30px);font-weight:300;line-height:1.28;letter-spacing:-.02em;color:var(--ink,#0A0A0A)}
.art-zitat cite{display:block;font-style:normal;font-size:12px;color:var(--ink-3,#6B6B6B);margin-top:12px;letter-spacing:.14em;text-transform:uppercase}
.art-steps{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
.art-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:16px 18px;border:1px solid var(--line,#ECEBE6);border-radius:16px;background:#fff}
.art-steps .nr{width:36px;height:36px;border-radius:50%;background:var(--ink,#0A0A0A);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.art-steps b{display:block;font-weight:500;margin:6px 0 4px;font-size:16.5px;line-height:1.3}
.art-steps span:not(.nr){font-size:15.5px;line-height:1.6;color:var(--ink-2,#2B2B2B)}
.art-ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.art-ul li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:#2c2925}
.art-ul li::before{content:'';position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--coral,#FF725F)}
.art-note{margin:20px 0;padding:14px 18px;border:1px solid var(--line,#e8e4de);background:#faf7f4;border-radius:12px;font-size:14.5px;line-height:1.55}
/* OS 21.09.: Bild mit Untertitel aus dem OS-Editor, volle Textbreite, Rundung wie die Tabelle. */
.art-fig{margin:8px 0 22px}
.art-fig img{display:block;width:100%;height:auto;border-radius:16px}
.art-fig figcaption{margin-top:10px;max-width:540px}
.art-table-wrap{overflow-x:auto;margin:8px 0 22px;padding:6px 18px 14px;background:#F6F5F1;border-radius:16px}
.art-table-wrap .caption{max-width:540px}
.art-table{width:100%;border-collapse:collapse;font-size:15px}
.art-table th{text-align:left;padding:12px 10px;border-bottom:1px solid var(--ink,#0A0A0A);font-weight:500;white-space:nowrap}
.art-table td{padding:11px 10px;border-bottom:1px solid #e6e2db;vertical-align:top}
.art-table td:first-child{font-weight:500}
.art-table tr:last-child td{border-bottom:0}
.art-quellen{margin-top:44px;padding-top:20px;border-top:1px solid #e8e3dd}
.art-quellen h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9a938c;margin-bottom:10px}
.art-quellen ul{list-style:none;padding:0;display:grid;gap:6px}
.art-quellen a{font-size:13.5px;color:#6f6a64;text-decoration:none}
.art-quellen a:hover{color:var(--coral,#FF725F)}


/* --- /how Schritt-Fotos + Guide-Hero-Objektfoto (GF 22.07. Punkt 2) --- */
/* GF 24.07. (2. Anlauf Dropdown): fade-up-Transforms machen ganze SEKTIONEN
   zu Stacking-Kontexten — die spaetere USP-Sektion gewann gegen das Dropdown,
   egal welcher z-index innen gesetzt war. Deshalb die Hero-Sektion selbst
   anheben; Header/Overlays liegen weit darueber (z>=100). */
.hero { position: relative; z-index: 8; }
.hero-search-col { position: relative; z-index: 20; }
/* GF 24.07.: Bilder praesenter — 440px-Spalte statt 300px (wirkte wie Thumbnail) */
/* GF 23.08.: "die Bilder etwas groesser machen und mal links, mal rechts
   anordnen, um die Seite insgesamt etwas mehr aufzulockern."
   Foto von 440 auf 520 px. Die Seite wechselt ueber `order`, nicht ueber
   eine zweite Spaltenordnung: die Nummer bleibt so immer aussen links, und
   nur Text und Foto tauschen. Am Telefon fallen alle drei untereinander,
   dort gilt die DOM-Reihenfolge und der Wechsel entfaellt von allein. */
/* align-items: START, nicht center. Die Textfassung vom 23.08. ist deutlich
   laenger als die alte; zentriert rutschte das Foto bis unter den Text und
   stand dort allein in einer halben Bildschirmhoehe Weissraum. Oben bleibt
   es auf Hoehe der Ueberschrift, wo es hingehoert. */
.how-row{display:grid;grid-template-columns:150px 1fr 520px;gap:48px;padding:64px 0;border-top:1px solid var(--line,#e8e3dd);align-items:start}
/* Seitenwechsel ueber grid-column, NICHT ueber order: mit order rutscht das
   Foto in die 1fr-Spalte und der Text in die feste, dann ist das Bild in
   jeder zweiten Zeile anders breit (gemessen: 490 statt 520). So behaelt das
   Foto seine Breite und nur der Platz tauscht. */
.how-row.bild-links{grid-template-columns:150px 520px 1fr}
/* grid-row: 1 fuer ALLE drei. Ohne das setzt die automatische Platzierung
   das Foto in eine zweite Zeile: der Text belegt Spalte 3, Spalte 2 gilt
   damit als uebersprungen, und das spaeter kommende Foto findet in Zeile 1
   keinen Platz mehr. Gemessen: 640 px unter seiner Ueberschrift. */
.how-row.bild-links > *{grid-row:1}
.how-row.bild-links > div:nth-child(2){grid-column:3}
.how-row.bild-links > .how-photo{grid-column:2}
/* figure traegt im Browser-Standard 40 px Rand links und rechts. Die kosteten
   das Bild 80 px seiner Spalte: 520 breit angelegt, 440 gemessen. */
.how-photo{display:block;margin:6px 0 0;text-decoration:none;color:inherit}
.how-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;box-shadow:0 18px 44px rgba(15,12,10,.10)}
.how-photo .caption{display:block;margin-top:8px;font-size:12.5px;color:#8a847d}
.how-photo:hover .caption{color:var(--coral,#FF725F)}
.hood-photo-real{display:block;text-decoration:none;color:inherit}
.hood-photo-real img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block}
.hood-photo-real .caption{display:block;margin-top:8px;font-size:12.5px;color:#8a847d}
.hood-photo-real:hover .caption{color:var(--coral,#FF725F)}
@media (max-width: 1180px){
  .how-row{grid-template-columns:130px 1fr 400px;gap:36px}
  .how-row.bild-links{grid-template-columns:130px 400px 1fr}
}
@media (max-width: 980px){
  .how-row{grid-template-columns:1fr}
  .how-photo img{aspect-ratio:16/9}
  /* Untereinander zaehlt die Lesereihenfolge, nicht die Seite. */
  .how-row.bild-links,.how-row{grid-template-columns:1fr}
  /* Untereinander zaehlt die Lesereihenfolge: Zeilenbindung wieder loesen. */
  .how-row.bild-links > *{grid-row:auto}
  .how-row.bild-links > div:nth-child(2),.how-row.bild-links > .how-photo{grid-column:1}
}


/* --- Sticky-Berater-Kontakt unten links (GF 23.07.) --- */
.adv-sticky{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900}
.adv-sticky-bubble{display:flex;align-items:center;gap:8px;border:none;background:#fff;border-radius:999px;padding:6px 14px 6px 6px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.16);font-family:inherit}
.adv-sticky-bubble:hover{box-shadow:0 8px 28px rgba(0,0,0,.22)}
.adv-sticky-photo{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#efe9e2;display:flex;align-items:center;justify-content:center}
.adv-sticky-photo img{width:100%;height:100%;object-fit:cover;display:block}
.adv-sticky-photo i{font-style:normal;font-weight:650;font-size:14px;color:#8a847d}
.adv-sticky-hint{font-size:13.5px;font-weight:600}
.adv-sticky-card{position:relative;display:flex;gap:12px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.2);max-width:320px}
.adv-sticky-card .adv-sticky-photo{width:56px;height:56px}
.adv-sticky-meta strong{display:block;font-size:15px}
.adv-sticky-meta > span{display:block;font-size:12.5px;color:#8a847d;margin-top:1px}
.adv-sticky-meta p{font-size:13px;line-height:1.45;margin:8px 0 10px;color:#4c4842}
.adv-sticky-actions{display:flex;gap:8px;flex-wrap:wrap}
.adv-sticky-actions .btn{white-space:nowrap}
.adv-sticky-x{position:absolute;top:8px;right:8px;border:none;background:none;cursor:pointer;padding:5px;border-radius:8px;display:flex;color:#8a847d}
.adv-sticky-x:hover{background:#f4f1ee}
@media (max-width:700px){
  .adv-sticky-hint{display:none}
  .adv-sticky-bubble{padding:6px}
  .adv-sticky-card{max-width:calc(100vw - 32px)}
}
/* Sprachumschalter im Mobile-Drawer — dezente DE|EN-Pille (GF 23.07.) */
.mobile-drawer .drawer-lang{display:inline-flex;align-self:flex-start;margin:18px 0 6px;border:1px solid var(--line-2,#e4ded7);border-radius:999px;padding:3px;background:#fff}
.mobile-drawer .drawer-lang button{padding:6px 14px;border:none;border-radius:999px;background:transparent;font-size:13px;font-weight:600;letter-spacing:.04em;font-family:inherit;cursor:pointer;color:#8a847d}
.mobile-drawer .drawer-lang button.on{background:var(--ink,#191713);color:#fff}


/* --- Sticky-Header (GF 23.07.): Menue jederzeit erreichbar --- */
.site-header{position:sticky;top:0;z-index:850;background:var(--bg,#faf8f5);border-bottom:1px solid var(--line,#eee6de)}


/* Footer-Social: Icons nebeneinander (GF 23.07.) */
.ft-social-icons{display:flex;gap:14px;align-items:center}
.ft-social-icons a{display:flex;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.18)}
.ft-social-icons a:hover{border-color:rgba(255,255,255,.5)}
/* Case-Galerie Lightbox */
.case-gal-img{cursor:zoom-in}
.cl-overlay{position:fixed;inset:0;background:rgba(15,13,11,.9);z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px}
.cl-overlay img{max-width:min(1200px,92vw);max-height:88vh;object-fit:contain;border-radius:10px}
.cl-x{position:absolute;top:16px;right:16px;border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:18px}
.cl-nav{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:20px}
.cl-prev{left:16px}.cl-next{right:16px}