/* ============================================================
   IMMOTION v7 — SHARED STYLESHEET
   Confident Modern · Warm Palette · Sans-First
   ============================================================ */

/* ============== DESIGN TOKENS ============== */
:root {
  --bg:        #F8F5F0;
  --bg-2:      #EFEAE0;
  --bg-3:      #E6DDCC;
  --paper:     #FFFFFF;
  --ink:       #14100D;
  --ink-2:     #4A4139;
  --ink-mute:  #6E665F;
  --line:      rgba(20,16,13,.08);
  --line-strong: rgba(20,16,13,.16);
  --rust:      #966530;
  --rust-dk:   #7A5227;
  --rust-lt:   #D9A56A;
  --rust-tint: rgba(166,114,56,.08);
  --sage:      #6B7561;
  --success:   #4A7C50;
  --error:     #B84C2E;
  --warning:   #C48A2E;
  /* K5-42 (Batch 19): die Töne, die bis hier als Hex-Werte in dashboard,
     admin und dateien.css standen — jetzt an einer Stelle. */
  --error-dk:   #7A2C1B;
  --error-lt:   #FBEDE9;
  --success-dk: #3E6B42;
  --success-lt: #EEF5EE;
  --info:       #4A6E8A;
  --info-lt:    rgba(74,110,138,.12);

  --f-sans: 'Inter', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif; --w-display: 500; --ls-display: -.02em;

  --max: 1280px;
  --pad-x: clamp(20px, 4vw, 56px);
  --nav-h: 72px;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-sm: 0 1px 3px rgba(20,16,13,.06), 0 1px 2px rgba(20,16,13,.04);
  --sh-md: 0 8px 24px -6px rgba(20,16,13,.1), 0 4px 8px -2px rgba(20,16,13,.05);
  --sh-lg: 0 24px 48px -12px rgba(20,16,13,.18), 0 12px 24px -6px rgba(20,16,13,.08);
  --sh-xl: 0 32px 64px -16px rgba(20,16,13,.24);

  --d-fast: 150ms;
  --d-base: 220ms;
  --d-slow: 320ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============== RESET ============== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  letter-spacing: -.005em;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

.tabnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }

  /* Ausnahme für alles, was sich ENDLOS bewegt.

     «animation-duration: 1ms» ist für einen einmaligen Übergang
     richtig — er ist dann eben sofort vorbei. Für eine Schleife ist es
     das Gegenteil dessen, was die Einstellung bezweckt: Der
     Bilderstreifen unter dem Hero läuft dann vierzigmal pro Sekunde
     durch und wird zum Stroboskop. Wer diese Einstellung setzt, tut
     das oft wegen Migräne oder Anfallsleiden.

     Solche Schleifen halten an, statt zu rasen. */
  .media-ticker-track,
  [class*="ticker"] [class*="track"] { animation: none !important; }
}

/* ============== NAV ============== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,245,240,.85);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-slow) var(--ease), background var(--d-slow) var(--ease);
  height: var(--nav-h);
  /* Seitliches Polster gehört hierhin, nicht nach innen — sonst ist der
     Inhalt der Navigation um zweimal --pad-x schmaler als der Rest der
     Seite und Logo wie Knopf stehen eingerückt zur Achse des Inhalts. */
  padding: 0 var(--pad-x);
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(248,245,240,.95);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.02em;
}


/* ------------------------------------------------------------------
   DIE WORTMARKE — zweizeilig, überall gleich

   «Immotion» über «IMMOBILIENMEDIEN», nicht nebeneinander. Die drei
   Regeln dafür standen bis zum 13.8.2026 nur in den Stilblöcken der
   einzelnen Seiten — und in impressum.html, datenschutz.html und
   agb.html standen sie nicht. Dort rutschten die beiden Wörter
   zusammen zu «ImmotionImmobilienmedien», und zwar ausgerechnet auf
   den Seiten, auf denen jemand nachschaut, ob es die Firma wirklich
   gibt.

   Sie gehören hierher: v7.css lädt jede Seite, auch die nächste, die
   noch niemand geschrieben hat. Die Kopien in den einzelnen Seiten
   sagen dasselbe und stören nicht — wer eine davon aufräumt, kann
   sie ersatzlos streichen.
   ------------------------------------------------------------------ */
.nav-brand-txt {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.nav-brand-n {
  font-size: 17px; font-weight: 600; line-height: 1;
  color: var(--ink); letter-spacing: -.022em;
}
.nav-brand-tag {
  font-size: 8.5px; font-weight: 700; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--d-base) var(--ease);
}
.nav-brand:hover .nav-brand-tag { color: var(--rust); }
.nav-logomark { flex-shrink: 0; }
@media (max-width: 560px) {
  .nav-brand-tag { display: none; }
}
.nav-logomark {
  display: inline-flex; align-items: center;
  height: 36px;
  background: transparent;
}
.nav-logomark img { height: 100%; width: auto; display: block; background: transparent; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 8px;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
  min-height: 40px;
  display: inline-flex; align-items: center;
}
.nav-links a:hover { background: var(--bg-2); color: var(--ink); }
.nav-links a.active { color: var(--ink); background: var(--bg-2); }
.nav-cta {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--d-base) var(--ease), transform var(--d-base) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
}
.nav-cta:hover { background: var(--rust); transform: translateY(-1px); }
.nav-cta { white-space: nowrap; }
.nav-actions { display: inline-flex; align-items: center; gap: 10px; }
.nav-signin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 16px;
  border: 1.5px solid rgba(20,16,13,.16);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
  min-height: 40px;
  letter-spacing: .01em;
}
.nav-signin:hover { color: var(--ink); border-color: var(--ink); background: var(--paper); }
.nav-signin svg { width: 14px; height: 14px; opacity: .85; }
.nav-signin:hover svg { opacity: 1; color: var(--rust); }
.nav-burger { display: none; }

/* Hero Stagger-Reveal beim Laden — premium, ruhig, kein Overkill */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRiseSubtle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-reveal {
  opacity: 0;
  animation: heroRise .9s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-reveal-s {
  opacity: 0;
  animation: heroRiseSubtle .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hr-1 { animation-delay: .1s; }
.hr-2 { animation-delay: .3s; }
.hr-3 { animation-delay: .55s; }
.hr-4 { animation-delay: .8s; }
.hr-5 { animation-delay: 1.05s; }
.hr-6 { animation-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) {
  .hero-reveal, .hero-reveal-s { animation: none; opacity: 1; }
}

/* K5-14 (Testrunde 4): Zwischen 920 und 1280 px (Laptop mit Zoom, iPad
   quer) passten Menü, Sprachwahl und «Shooting buchen» nicht mehr in
   eine Zeile — die Sprachwahl lag ausserhalb des Bildschirms. Der
   Burger übernimmt jetzt bis 1279 px. */
@media (max-width: 1279px) {
  .nav-links, .nav-cta { display: none; }
  /* Der Kundenbereich bleibt als Symbol neben dem Burger erreichbar */
  .nav-actions { display: inline-flex; }
  .nav-signin {
    width: 44px; height: 44px; padding: 0; gap: 0;
    justify-content: center; border-radius: 50%;
    border-color: rgba(20,16,13,.14);
  }
  .nav-signin svg { width: 20px; height: 20px; }
  .nav-signin-txt { display: none; }
  /* Symbol und Burger gehören zusammen an den rechten Rand —
     „space-between" hätte sie sonst über die halbe Breite verteilt. */
  .nav-actions { margin-left: auto; }
  .nav-inner { gap: 6px; }
  .nav-burger { width: 44px; height: 44px; }
  .nav-burger { display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
  .nav-burger span { width: 20px; height: 1.5px; background: var(--ink); transition: transform var(--d-slow) var(--ease), opacity var(--d-base); border-radius: 1px; }
  .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--rust); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--rust); }
}

/* Batch 43 (2.10.2026): Ab 1280 px steht die volle Leiste. Auf
   Französisch und Italienisch fehlten bis etwa 1340 px rund zehn
   Pixel, und «À propos», «Espace client» und «Chi siamo» brachen auf
   zwei Zeilen um. Die Knöpfe brechen jetzt nie mehr um, die Wortmarke
   wird nicht mehr gestaucht, und im knappen Bereich bis 1439 px
   rücken die Einträge etwas zusammen. Das gibt 60 px Luft. */
.nav-links a, .nav-signin { white-space: nowrap; }
.nav-brand { flex-shrink: 0; }
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-inner { gap: 14px; }
  .nav-links a { padding-left: 12px; padding-right: 12px; }
}




















body.locked { overflow: hidden; }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  transition: all var(--d-base) var(--ease);
  min-height: 48px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--rust); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(166,114,56,.4); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-gold { background: var(--rust); color: var(--paper); }
.btn-gold:hover { background: var(--rust-dk); transform: translateY(-2px); }
.btn-white { background: var(--bg); color: var(--ink); }
.btn-white:hover { background: var(--rust-lt); }
.btn-ghost-dk { color: var(--bg); border: 1px solid rgba(248,245,240,.24); background: transparent; }
.btn-ghost-dk:hover { background: rgba(248,245,240,.06); border-color: rgba(248,245,240,.5); }
.btn-arrow { transition: transform var(--d-base) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============== TYPOGRAPHY HELPERS ============== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--rust-tint);
  color: var(--rust-dk);   /* K5-35 (Batch 19): 4,2:1 → 5,7:1 */
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.section-h {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-width: 20ch;
}
.section-h em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.section-sub { font-size: 17px; color: var(--ink-2); margin-top: 16px; line-height: 1.55; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head .section-h { margin: 0 auto; }
.section-head .section-sub { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ============== PAGE HERO (Sub-Pages) ============== */
.page-hero {
  position: relative;
  padding: clamp(35px, 5.8vh, 69px) var(--pad-x) clamp(35px, 5.8vh, 69px);
  background: var(--bg);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--rust-tint), transparent 60%);
  pointer-events: none;
}
/* ------------------------------------------------------------
   Verblasstes Hintergrundbild hinter der Überschrift.
   Zwei Ebenen: das Bild trägt die Transparenz, der Schleier
   darüber liegt volldeckend — sonst würde er mitverblassen und
   der Text stünde auf unruhigem Grund.
   Motiv je Seite über --hero-img.
   ------------------------------------------------------------ */
.page-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero-bg i {
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
  opacity: .22;
  filter: saturate(.72) contrast(.94);
}
/* K5-04 (Testrunde 4): Am Handy lud jede Seite dieses Bild in 1920 px —
   bei 22 % Deckkraft das grösste Element der Seite, LCP 7–12 s. Jetzt
   je nach Breite 640 oder 1280 px; wo eine Seite die kleineren nicht
   nennt, bleibt es beim grossen. */
@media (max-width: 700px) {
  .page-hero-bg i { background-image: var(--hero-img-s, var(--hero-img-m, var(--hero-img))); }
}
@media (min-width: 701px) and (max-width: 1400px) {
  .page-hero-bg i { background-image: var(--hero-img-m, var(--hero-img)); }
}
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(248,245,240,.55) 0%,
      rgba(248,245,240,.20) 42%,
      rgba(248,245,240,.85) 88%,
      var(--bg) 100%),
    radial-gradient(130% 95% at 50% 34%, transparent 30%, rgba(248,245,240,.9) 100%);
}
@media (max-width: 700px) {
  .page-hero-bg i { opacity: .17; }
}

.page-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative; z-index: 1;
  text-align: center;
}
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero h1 {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto 20px;
}
.page-hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.page-hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}
.page-hero-sub strong { color: var(--ink); font-weight: 600; }

/* ============== FOOTER ============== */
/* Andri 17.10.2026 (Handy): Ganz unten schloss die Seite nicht mit dem
   Dunkelbraun des Fusses ab — beim Zuendescrollen und hinter der
   Leiste von Safari stand noch ein heller Streifen. Das ist der
   Seitengrund (html), nicht der Fuss. Hat die Seite einen Fuss, ist
   der Grund deshalb dunkel; der Inhalt (body) bleibt hell. */
html:has(body > .footer) { background: var(--ink); }
.footer {
  background: var(--ink);
  color: rgba(248,245,240,.6);
  padding: 40px var(--pad-x) 32px;
  border-top: 1px solid rgba(248,245,240,.08);
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  font-size: 13px;
}
.footer-inner a { color: rgba(248,245,240,.6); transition: color var(--d-base); padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.footer-inner a:hover { color: var(--rust-lt); }
.footer-cols { display: flex; gap: 24px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Der Satz unter den Rechtslinks — Prüfbericht IMM-053
   ------------------------------------------------------------------
   AGB, Datenschutzerklärung und Impressum gibt es nur auf Deutsch,
   und das bleibt so: Eine maschinell übersetzte AGB ist ein
   Vertragstext, für den niemand geradesteht, und im Streitfall
   stellte sich die Frage, welche Fassung gilt.

   Was fehlte, war die Ehrlichkeit an der Oberfläche. Auf den
   englischen, französischen und italienischen Seiten standen die
   drei Links wie jeder andere — und führten dann auf deutschen
   Text. Jetzt steht dort, in der Sprache der Seite, welche Fassung
   massgeblich ist. Der Satz ist absichtlich klein und in einer
   eigenen Zeile: Er ist eine Fussnote, keine Ansage.

   Auf der deutschen Seite erscheint er nicht — dort wäre er sinnlos.
   Eingesetzt wird er beim Bauen, in sprachen.py.
   ------------------------------------------------------------------ */
.footer-recht {
  /* Eigene Zeile, ganz unten. «flex-basis: 100%» allein genügte
     nicht: Der Kasten schrumpft dann neben die Symbolzeile, und der
     Satz stand auf derselben Höhe wie Instagram und LinkedIn.
     «flex-shrink: 0» hält die Breite, «order» schiebt ihn hinter
     alles andere. */
  flex: 0 0 100%; order: 9;
  font-size: 11.5px; line-height: 1.6;
  color: rgba(248,245,240,.42);
  border-top: 1px solid rgba(248,245,240,.08);
  padding-top: 14px; margin-top: 4px;
}
.footer-recht a { color: rgba(248,245,240,.6); min-height: 0; padding: 0;
  border-bottom: 1px solid rgba(248,245,240,.25); }

/* Batch 44 (2.10.2026): die Zeile «Regionen» — die Links auf die
   Regionalseiten, auf jeder deutschen Seite. Eigene Zeile wie der
   Rechtshinweis darunter, nur einen Schritt weiter oben (order 8). In
   FR/IT/EN nimmt sprachen.py sie heraus: Die Regionalseiten sind
   deutsch. */
.footer-regionen {
  flex: 0 0 100%; order: 8;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px;
  font-size: 12.5px;
  border-top: 1px solid rgba(248,245,240,.08);
  padding-top: 8px; margin-top: 2px;
}
.footer-regionen-titel { font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(248,245,240,.4); margin-right: 2px; }
.footer-inner .footer-regionen a { min-height: 40px; padding: 6px 0; }
.footer-regionen [aria-current] { color: rgba(248,245,240,.88); }

/* Soziale Kanäle — als Umrisssymbole, damit sie neben den Textlinks
   nicht dominieren, aber beim Überfahren klar reagieren. */
.footer-social { display: flex; gap: 10px; align-items: center; }
.footer-social a {
  width: 38px; height: 38px; min-height: 38px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(248,245,240,.16);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(248,245,240,.6);
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              background var(--d-base) var(--ease), transform var(--d-base) var(--ease-out);
}
.footer-social a:hover {
  color: var(--ink); background: var(--rust-lt);
  border-color: var(--rust-lt); transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }

/* Batch 72 (Newsletter, Migration 157): «E-Mail · Eintragen» in der
   Fusszeile jeder öffentlichen Seite. Eine eigene ruhige Zeile über den
   Regionen (order 7), im Ton des dunklen Fusses: Feld und Knopf in einer
   feinen Kapsel, der Knopf im hellen Rost. Double-Opt-in: Die Antwort
   erscheint ohne Seitenwechsel darunter (assets/js/newsletter.js).
   Am Handy füllt die Kapsel die Breite, das Feld schrumpft statt die
   Seite zu verbreitern (min-width: 0), und die Schrift im Feld hat
   16 px — darunter zoomt Safari beim Antippen. */
.footer-news {
  flex: 0 0 100%; order: 7;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  border-top: 1px solid rgba(248,245,240,.08);
  padding-top: 16px; margin-top: 2px;
}
.footer-news-titel { font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(248,245,240,.4); }
.footer-news-feld {
  display: flex; align-items: center; flex: 0 1 380px; min-width: 0; max-width: 100%;
  border: 1px solid rgba(248,245,240,.18); border-radius: 999px;
  transition: border-color var(--d-base) var(--ease);
}
.footer-news-feld:focus-within { border-color: var(--rust-lt); }
.footer-news-feld input[type="email"] {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 4px 0 18px;
  background: transparent; border: 0; outline: none;
  font-family: inherit; font-size: 14px; color: rgba(248,245,240,.92);
}
.footer-news-feld input[type="email"]::placeholder { color: rgba(248,245,240,.38); }
.footer-news-feld input[aria-invalid="true"] { color: #F0B9A6; }
.footer-news-feld button {
  flex: none; height: 34px; margin: 4px; padding: 0 16px; border-radius: 999px;
  background: var(--rust-lt); color: var(--ink);
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
.footer-news-feld button:hover { background: #E6BC8A; }
.footer-news-feld button[disabled] { opacity: .55; cursor: default; }
.footer-news-falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer-news-satz { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(248,245,240,.42); }
.footer-inner .footer-news-satz a { display: inline; min-height: 0; padding: 0;
  border-bottom: 1px solid rgba(248,245,240,.25); }
.footer-news-meldung { flex: 0 0 100%; margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(248,245,240,.85); }
.footer-news-meldung:empty { display: none; }
.footer-news-meldung.fehler { color: #F0B9A6; }
@media (max-width: 700px) {
  .footer-news { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .footer-news-feld { flex: 0 0 auto; width: 100%; }
  .footer-news-feld input[type="email"] { font-size: 16px; height: 46px; }
  .footer-news-feld button { height: 38px; }
}

/* ============== FINAL CTA (Wiederverwendbar) ============== */
.final {
  padding: clamp(58px, 8.6vh, 101px) var(--pad-x);
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(166,114,56,.14), transparent 60%);
  pointer-events: none;
}
.final-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }
.final-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: rgba(217,165,106,.14);
  color: var(--rust-lt);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 24px;
}
.final-h {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--bg);
  margin-bottom: 24px;
}
.final-h em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.final-sub { font-size: 17px; color: rgba(248,245,240,.7); margin-bottom: 40px; line-height: 1.55; }
.final-sub strong { color: var(--bg); font-weight: 600; }
.final-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Preistransparenz: Netto, Mehrwertsteuer, Endbetrag */
.pak-sum-mwst { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pak-sum-mwst .pak-sum-row { font-size: 12.5px; }
.pak-sum-brutto { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-weight: 700; color: var(--ink); }
.co-summary-split { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.co-summary-split .co-summary-row span { color: var(--ink-mute); }
.co-summary-mwst { margin-top: 8px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; }

.footer-firma { line-height: 1.7; }
.footer-firma a { color: inherit; border-bottom: 1px solid rgba(0,0,0,.18); }
.footer-firma a:hover { color: var(--rust); border-color: var(--rust); }

/* Bestellprozess: Terminwege und abhängige Felder */
.co-wege { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.co-weg {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 14px; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--line);
  font-family: var(--f-sans); transition: all var(--d-base);
}
.co-weg:hover { border-color: var(--line-strong); background: var(--paper); }
.co-weg.on { border-color: var(--rust); background: var(--paper); box-shadow: 0 0 0 3px rgba(150,101,48,.1); }
.co-weg-nr {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-style: normal; font-size: 16px;
  background: var(--bg-2); color: var(--ink-mute); font-weight: 500; }
.co-weg.on .co-weg-nr { background: var(--rust); color: var(--paper); }
/* K2-14: Weg C, wenn der Besteller selbst öffnet */
.co-weg.gesperrt { opacity: .55; cursor: not-allowed; }
.co-weg.gesperrt:hover { border-color: var(--line); background: transparent; }
.co-weg-grund { display: none; font-size: 12.5px; color: #8a4b2a; font-weight: 500; }
.co-weg.gesperrt .co-weg-grund { display: block; }
.co-weg-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.co-weg-h { font-size: 15px; font-weight: 600; color: var(--ink); }
.co-weg-s { font-size: 13px; color: var(--ink-mute); line-height: 1.5; }

.co-weghinweis { margin-top: 16px; padding: 13px 16px; border-radius: 10px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.co-weghinweis-wichtig { background: rgba(150,101,48,.09); border-left: 3px solid var(--rust); }

.co-opt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-mute); background: var(--bg-2); padding: 3px 8px; border-radius: 999px; margin-left: 8px; }
.co-opt-pflicht { color: var(--rust); background: rgba(150,101,48,.12); }
.co-hinweis-klein { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.co-mini { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; margin: 6px 0 12px; }
.co-consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; padding: 13px 15px; background: var(--bg-2); border-radius: 10px; cursor: pointer; }
.co-consent input { margin-top: 2px; flex-shrink: 0; accent-color: var(--rust); width: 17px; height: 17px; }
.co-consent span { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

/* ==================================================================
   Gemeinsame Handy-Regeln für alle Unterseiten
   ================================================================== */
@media (max-width: 700px) {
  .page-hero { padding-top: clamp(28px, 5vh, 56px); }
  .page-hero h1 { font-size: clamp(32px, 9vw, 46px); }
  .page-hero-sub { font-size: 15px; line-height: 1.6; }
  .section-h { font-size: clamp(26px, 7.5vw, 36px); }
  .eyebrow { font-size: 10px; }

  /* Fuss: Zeilen statt Spalten, grosszügige Tippflächen */
  .footer { padding: 36px var(--pad-x) calc(30px + env(safe-area-inset-bottom)); }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-cols { flex-wrap: wrap; gap: 2px 18px; }
  .footer-social { gap: 12px; }
  .footer-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Alle Schaltflächen fingerfreundlich */
  .btn { min-height: 50px; }
  .nav-brand { min-height: 44px; }

  /* Der Abschlussbereich braucht auf schmalen Geräten weniger Wucht */
  .final { padding: 56px var(--pad-x); }
  .final::before { display: none; }
  .final-h { font-size: clamp(30px, 8.5vw, 44px); }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  :root { --pad-x: 16px; }
  /* K5-19: «Baulandvisualisierung» ist ein Wort mit 21 Buchstaben — bei
     320 px lief es über den Rand. Kleiner, und notfalls getrennt. */
  .page-hero h1 { font-size: clamp(24px, 8.2vw, 30px); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* Waagrechten Überlauf grundsätzlich ausschliessen — mit «clip»,
   nicht mit «hidden».

   Der Unterschied ist unsichtbar und trotzdem folgenreich: «hidden»
   macht das Element zu einem Rollbehälter. Damit sucht jedes
   klebende Element darunter seinen Halt nicht mehr am Fenster,
   sondern an diesem Behälter — und der rollt mit. Die Summenspalte
   auf der Paketseite hatte «position: sticky» seit jeher und blieb
   trotzdem nie stehen. Genau deshalb.

   Weiter oben in dieser Datei steht bei html und body längst
   «clip» (Zeilen 52 und 62). Diese Zeile hier kam später und hat
   beides wieder überschrieben. «clip» schneidet ebenso ab, ohne
   einen Rollbehälter zu erzeugen. */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; }

/* ==================================================================
   Mobiles Menü
   Öffnet als diagonaler Aufzug von oben rechts — dort, wo der Finger
   den Burger berührt — und läuft nach unten links aus. Ein goldener
   Faden zeichnet die Diagonale vor, danach kommen die Zeilen einzeln
   von rechts herein.
   ================================================================== */

.m-menu {
  position: fixed; inset: 0; z-index: 999;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 620ms;
}
.m-menu.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Der Grund fährt als Kreis vom Burger aus auf */
.m-menu-bg {
  position: absolute; inset: 0; background: var(--ink);
  clip-path: circle(0% at calc(100% - 42px) 40px);
  transition: clip-path 620ms cubic-bezier(.72,0,.24,1);
}
.m-menu.open .m-menu-bg { clip-path: circle(148% at calc(100% - 42px) 40px); }

/* Ein Objektbild trägt die Bildsprache der Seite auch ins Menü */
.m-menu-bild {
  position: absolute; inset: 0; z-index: 1;
  /* «../img/…», nicht «../assets/img/…».
     ------------------------------------------------------------------
     Ein Pfad in einer CSS-Datei zählt ab der CSS-DATEI, nicht ab der
     Seite. Diese Datei liegt im fertigen Bau unter «assets/css/»; von
     dort führte «../assets/img/…» nach «assets/assets/img/…», und das
     gibt es nicht. Das Bild im Burger-Menü fehlte damit seit dem Tag,
     an dem es eingebaut wurde — ohne Fehlermeldung, nur ein leerer
     Hintergrund.
     Gefunden im Prüfbericht vom 4.9.2026 (IMM-090); auf meiner eigenen
     Liste stand es seit Wochen und ist dort liegen geblieben.
     test-bildpfade.js rechnet solche Pfade seither nach. */
  background-image: url('../img/portfolio/klosters-villa/01-cover-villa-berge-1280.jpg');
  background-size: cover; background-position: center 40%;
  opacity: 0; transition: opacity 700ms 200ms var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 34%, #000 100%);
}
.m-menu.open .m-menu-bild { opacity: .30; }

/* Der Faden: eine goldene Linie, die von oben rechts nach unten links läuft */
.m-menu-faden {
  position: absolute; z-index: 3; top: 0; right: 0;
  width: 190%; height: 1px;
  background: linear-gradient(to left, rgba(217,165,106,0), var(--rust-lt) 22%, rgba(217,165,106,.35) 70%, transparent 100%);
  transform-origin: 100% 0;
  transform: rotate(52deg) scaleX(0);
  transition: transform 700ms cubic-bezier(.66,0,.2,1);
  pointer-events: none;
}
.m-menu.open .m-menu-faden { transform: rotate(52deg) scaleX(1); }

/* Kopf: Logo links, Schliessen rechts — auf Höhe der Navigation */
.m-menu-kopf {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px var(--pad-x);
  min-height: var(--nav-h);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 320ms 260ms var(--ease), transform 320ms 260ms var(--ease);
}
.m-menu.open .m-menu-kopf { opacity: 1; transform: none; }
.m-menu-marke { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; }
.m-menu-lm { display: inline-flex; }
.m-menu-lm img { height: 30px; width: auto; display: block; }
.m-menu-marke-txt {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 16px; font-weight: 600; color: var(--bg); letter-spacing: -.02em;
}
.m-menu-marke-txt small {
  font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(248,245,240,.45); font-weight: 700;
}
.m-menu-zu {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; cursor: pointer;
  background: rgba(248,245,240,.07); border: 1px solid rgba(248,245,240,.16);
  border-radius: 50%; color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-base), border-color var(--d-base), transform var(--d-base);
}
.m-menu-zu:hover { background: rgba(248,245,240,.14); border-color: rgba(248,245,240,.3); }
.m-menu-zu:active { transform: scale(.94); }
.m-menu-zu svg { width: 19px; height: 19px; }

/* Die Zeilen */
.m-menu-inner {
  position: absolute; z-index: 4; left: 0; right: 0;
  top: calc(var(--nav-h) + 18px);
  padding: 0 var(--pad-x);
  display: flex; flex-direction: column;
}
.m-menu-inner a {
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 14px;
  padding: 15px 0; min-height: 56px;
  border-bottom: 1px solid rgba(248,245,240,.1);
  color: var(--bg); text-decoration: none;
  opacity: 0; transform: translateX(26px);
  transition: opacity 420ms var(--ease), transform 480ms cubic-bezier(.2,.8,.3,1), color var(--d-base);
}
.m-menu.open .m-menu-inner a { opacity: 1; transform: none; }
.m-menu.open .m-menu-inner a:nth-child(1) { transition-delay: 300ms; }
.m-menu.open .m-menu-inner a:nth-child(2) { transition-delay: 360ms; }
.m-menu.open .m-menu-inner a:nth-child(3) { transition-delay: 420ms; }
.m-menu.open .m-menu-inner a:nth-child(4) { transition-delay: 480ms; }
.m-menu.open .m-menu-inner a:nth-child(5) { transition-delay: 540ms; }
.m-menu-inner a:active { color: var(--rust-lt); }
.m-nr {
  font-family: var(--f-sans); font-style: normal; font-weight: 500;
  font-size: 14px; color: var(--rust-lt); opacity: .8;
  font-variant-numeric: tabular-nums;
}
.m-wort { font-size: clamp(28px, 8vw, 36px); font-weight: var(--w-display); letter-spacing: var(--ls-display); line-height: 1.1; }
.m-wort em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }

/* Fuss */
.m-menu-fuss {
  position: absolute; z-index: 4; left: 0; right: 0;
  bottom: calc(22px + env(safe-area-inset-bottom));
  padding: 0 var(--pad-x);
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms 600ms var(--ease), transform 480ms 600ms var(--ease);
}
.m-menu.open .m-menu-fuss { opacity: 1; transform: none; }
.m-menu-signin {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; border-radius: 999px;
  border: 1.5px solid rgba(248,245,240,.24); color: var(--bg);
  font-size: 14px; font-weight: 600;
}
.m-menu-signin svg { width: 17px; height: 17px; }
.m-menu-signin:active { background: rgba(248,245,240,.08); }
.m-menu-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; border-radius: 999px;
  background: var(--rust); color: var(--paper);
  font-size: 14.5px; font-weight: 600;
}
.m-menu-cta svg { width: 15px; height: 15px; }
.m-menu-cta:active { background: var(--rust-dk); }
.m-menu-kontakt {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12.5px; color: rgba(248,245,240,.55);
}
.m-menu-kontakt a { color: rgba(248,245,240,.75); min-height: 32px; display: inline-flex; align-items: center; }
.m-menu-social { display: flex; justify-content: center; gap: 10px; }
.m-menu-social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(248,245,240,.16); color: rgba(248,245,240,.7);
  display: inline-flex; align-items: center; justify-content: center;
}
.m-menu-social a:active { color: var(--rust-lt); border-color: rgba(217,165,106,.4); }
.m-menu-social svg { width: 17px; height: 17px; }

/* Sehr kleine Geräte: etwas weniger Luft */
@media (max-height: 700px) {
  .m-wort { font-size: 26px; }
  .m-menu-inner a { padding: 11px 0; min-height: 48px; }
  .m-menu-fuss { gap: 9px; }
  .m-menu-kontakt, .m-menu-social { display: none; }
}

/* K5-12 (Testrunde 4): Im Querformat und im geteilten Bildschirm lag
   die Fusszone über den Menüpunkten — ein Tipp auf «Über uns» öffnete
   «Shooting buchen», und das Menü liess sich nicht rollen. Bei wenig
   Höhe stehen Punkte und Fuss jetzt untereinander in einer Spalte, die
   rollt; Grund und Kopf bleiben stehen. */
@media (max-height: 500px) {
  .m-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .m-menu-bg, .m-menu-bild, .m-menu-faden { position: fixed; }
  .m-menu-kopf { position: fixed; background: var(--ink); }
  .m-menu-inner { position: relative; top: auto; padding-top: calc(var(--nav-h) + 8px); }
  .m-menu-inner a { padding: 8px 0; min-height: 44px; }
  .m-wort { font-size: 22px; }
  .m-menu-fuss { position: relative; bottom: auto; padding-top: 16px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .m-menu-kontakt, .m-menu-social { display: none; }
}


@media (prefers-reduced-motion: reduce) {
  .m-menu-bg { transition: opacity 200ms linear; clip-path: none; opacity: 0; }
  .m-menu.open .m-menu-bg { clip-path: none; opacity: 1; }
  .m-menu-faden { display: none; }
  .m-menu-kopf, .m-menu-inner a, .m-menu-fuss, .m-menu-bild { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ==================================================================
   Sicherheitsnetz für das hidden-Attribut
   ------------------------------------------------------------------
   `hidden` setzt display:none nur über das Standardblatt des Browsers
   und wird von jeder eigenen Regel mit `display:` überstimmt. Genau
   so entstand ein unsichtbarer Schleier über dem ganzen Kundenbereich.
   Diese eine Zeile schliesst die Lücke für die gesamte Seite.
   ================================================================== */
[hidden] { display: none !important; }

/* Die Lieferungs-Kachel ohne Vorschaubild. Solange die Dateien nicht
   im Speicher liegen, gibt es nichts zu zeigen — dann soll die Fläche
   ruhig und absichtsvoll aussehen statt wie ein kaputtes Bild. */
.dl.dl-ohne-bild { background-image: none; }
.dl.dl-ohne-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--ink) 0%, #241C16 100%);
  z-index: 0;
}
.dl.dl-ohne-bild .dl-txt { position: relative; z-index: 1; }

/* ---- Lieferung ohne Bilder ----
   Solange der Speicher nicht steht, haben die Dateien Namen und
   Grössen, aber keine Adresse. Statt leerer Rahmen: eine ruhige
   Liste und ein Satz, der sagt, woran es liegt. */
.lf-schlicht { padding: 28px 0; }
.lf-dateiliste { list-style: none; margin: 20px 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; }
.lf-dateiliste li { font-size: 13.5px; color: var(--ink-2); padding: 7px 0;
  border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.lf-dateiliste li span { color: var(--ink-mute); font-size: 12px; white-space: nowrap; }
.lf-dateiliste .lf-mehr { color: var(--ink-mute); font-style: italic; border-bottom: 0; }
.lf-hinweis { margin: 22px 0 16px; padding: 15px 17px; background: var(--bg-2);
  border-left: 2px solid var(--rust); border-radius: 0 8px 8px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.lf-hinweis strong { color: var(--ink); font-weight: 600; }
.lf-recht { font-size: 12px; line-height: 1.6; color: var(--ink-mute); }
.ok-galerie-leer { font-size: 13px; color: var(--ink-mute); padding: 14px 0; }

/* ---- Terminwunsch-Dialog ---- */
.wt-feld { margin-bottom: 16px; text-align: left; }
.wt-feld label { display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.wt-feld label span { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-mute); font-size: 11.5px; }
.wt-feld input, .wt-feld select, .wt-feld textarea {
  width: 100%; padding: 11px 13px; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15px; color: var(--ink); font-family: inherit; min-height: 46px; }
.wt-feld textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.wt-feld input:focus, .wt-feld select:focus, .wt-feld textarea:focus {
  outline: none; border-color: var(--rust); }
.wt-fehler { display: none; margin: -4px 0 14px; padding: 10px 13px;
  background: #FBEDE9; border-left: 2px solid #B4472F; border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5; color: #7A2C1B; text-align: left; }
.wt-fehler.show { display: block; }

/* ---- Gesprächsverlauf am Auftrag ----
   Zwei Sprecher, zwei Ausrichtungen. Nicht als Chat-Blasen: Das hier
   ist ein Geschäftsvorgang, der Monate liegen bleiben kann, und er
   soll sich auch nach Monaten noch lesen lassen wie ein Protokoll. */
.gs-liste { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.gs { border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px 14px; background: var(--paper); }
.gs-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; }
.gs-h { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.gs-status { flex: none; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--rust);
  background: rgba(150,101,48,.09); padding: 4px 9px; border-radius: 999px; }
.gs-status-fertig { color: var(--ink-mute); background: var(--bg-2); }
.gs-datum { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }

.gs-n { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.gs-n-wir { border-left-color: var(--rust); }
.gs-n-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.gs-n-wer { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); }
.gs-n-wir .gs-n-wer { color: var(--rust); }
.gs-n-am { font-size: 11px; color: var(--ink-mute); }
.gs-n-txt { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin: 0; }
.gs-warten { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-mute);
  font-style: italic; }

/* ---- Neu, Antworten, Hinweis — Befunde 7 und 9, 22.9.2026 ---- */
.gs-neu { border-color: rgba(180,68,42,.45); box-shadow: 0 0 0 3px rgba(180,68,42,.07); }
.gs-neu-marke { display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: #fff; background: #B4442A; padding: 2px 7px; border-radius: 999px; }
.gs-antwort { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.gs-antwort-l { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.gs-antwort textarea { width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--paper);
  font-family: var(--f-sans); font-size: 14px; line-height: 1.55; color: var(--ink); }
.gs-antwort textarea:focus { outline: none; border-color: var(--rust); }
.gs-antwort-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.gs-antwort-h { font-size: 11.5px; color: var(--ink-mute); }
.gs-antwort .akt-btn { width: auto; min-height: 40px; padding: 9px 18px; }
.gs-hinweis { display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 11px 15px; border-radius: 10px; background: #FBEDE9; color: #7A2E1C;
  border: 1px solid rgba(180,68,42,.25); font-size: 13.5px; text-decoration: none; }
.gs-hinweis:hover { background: #F8E3DD; }
.gs-hinweis-punkt, .ok-neu, .nav-neu { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #B4442A;
  color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.ok-neu { margin-right: 8px; }
.nav-neu { margin-left: auto; min-width: 9px; width: 9px; height: 9px; padding: 0; }
.nav-neu + .badge { margin-left: 8px; }
.ok-kopf-r { display: flex; align-items: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .gs { padding: 14px 15px 12px; }
  .gs-kopf { flex-direction: column; gap: 6px; }
  .gs-status { align-self: flex-start; }
}

/* ---- Zeitachse: erreicht / offen ---- */
.za-p.za-offen { opacity: .38; }
.za-p.za-offen .za-punkt { background: transparent; border: 1.5px solid var(--line); }
.za-p.za-erledigt .za-punkt { background: var(--rust); border-color: var(--rust); }
.za-p.za-jetzt .za-punkt { box-shadow: 0 0 0 4px rgba(150,101,48,.16); }
.za-p.za-jetzt .za-lbl { font-weight: 600; color: var(--ink); }
.za.za-storniert .za-p.za-jetzt .za-punkt { background: #B4472F; border-color: #B4472F;
  box-shadow: 0 0 0 4px rgba(180,71,47,.14); }

/* ==================================================================
   «Was, wenn nicht verkauft wird?» — der Kasten neben der Summe
   ------------------------------------------------------------------
   Mike, 16.8.2026: Die Zusage «du zahlst erst nach dem Verkauf» steht
   an siebzehn Stellen. Was fehlt, ist die AUSNAHME — sie stand überall
   daneben, aber immer im Nebensatz.

   Andri dazu: «Da müssen wir schon klar und transparent sagen:
   entweder wird die Rechnung nach Verkauf fällig oder nach maximal
   zwölf Monaten Laufzeit, egal ob verkauft oder nicht.»

   Deshalb stehen beide Fälle hier untereinander, in derselben
   Zeilenform. Der zweite lässt sich nicht mehr überlesen, weil er
   aussieht wie der erste.

   ZWEI HINTERGRÜNDE, EINE KLASSE
   Der Kasten steht in zwei verschieden gefärbten Spalten: auf
   pakete.html in der dunklen (--ink), im Bestellprozess in der hellen
   (--paper). Am 14.8. hatte eine Regel mit fester Farbe schon einmal
   dunkle Schrift auf die dunkle Spalte gemalt — unsichtbar, und
   niemandem fiel es auf, weil beide Seiten selten nebeneinander
   liegen.

   Deshalb erbt hier alles seine Farbe (color: inherit) und der
   Hintergrund ist ein neutraler Grauschleier, der auf Hell wie auf
   Dunkel eine Stufe Abstand macht. Geprüft von
   werkzeug/browserprobe-wenn-nicht.mjs, die auf beiden Seiten den
   Kontrast misst.
   ================================================================== */
.wenn-nicht {
  margin-top: 14px; padding: 11px 13px; border-radius: 6px;
  background: rgba(128, 120, 110, .13);
  border: 1px solid rgba(128, 120, 110, .3);
  color: inherit; font-size: 11.5px; line-height: 1.5;
}
.wenn-nicht-h {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); margin-bottom: 9px;   /* Batch 28: ohne opacity, Kontrast ≥ 4,5:1 */
}
.wenn-nicht-tab {
  display: grid; grid-template-columns: max-content 1fr; gap: 5px 10px;
}
/* K2-07: «Vermietet oder zurückgezogen» darf umbrechen, statt die
   schmale Spalte zu sprengen. */
.wenn-nicht-tab .wn-l { font-weight: 700; opacity: .85; max-width: 10.5em; }
.wenn-nicht-tab .wn-t { opacity: .85; }
.wenn-nicht-f {
  margin-top: 9px; padding-top: 8px; opacity: .65;
  border-top: 1px solid rgba(128, 120, 110, .3);
}

@media (max-width: 600px) {
  .wenn-nicht-tab { grid-template-columns: 1fr; gap: 1px; }
  .wenn-nicht-tab .wn-t { margin-bottom: 6px; }
}

/* Die breite Fassung: unter den Modulkarten, nicht in der schmalen
   Spalte. Mehr Platz heisst hier zwei Spalten statt gestapelt — und
   ein bisschen mehr Luft, weil der Kasten dort das letzte ist, was
   jemand liest, bevor er weiterklickt. */
.wenn-nicht-breit { margin-top: 22px; padding: 16px 18px; font-size: 12.5px; }
.wenn-nicht-breit .wenn-nicht-h { font-size: 10.5px; margin-bottom: 11px; }
.wenn-nicht-breit .wenn-nicht-tab { gap: 7px 16px; }
/* K2-50 (Batch 17): «Für Verwaltungen und Makler» — derselbe Kasten,
   auf der Startseite mittig unter den Paketen. */
.firmen-box { max-width: 62ch; }
.packages .firmen-box { margin: 22px auto 0; }
.firmen-p { margin: 0; opacity: .85; }
.firmen-link { display: inline-block; margin-top: 9px; font-weight: 700; color: var(--rust-dk); text-decoration: none; }
.firmen-link:hover { text-decoration: underline; }

/* ==================================================================
   Sprachwahl im mobilen Menü — 17.8.2026
   ------------------------------------------------------------------
   Der Umschalter aus der Kopfleiste wird auf schmalen Geräten per
   Skript hierher verschoben (assets/js/v7.js). Er bringt seine
   Regeln aus dem Seitenkopf mit, und die sind für hellen Grund
   gemacht: gedämpftes Grau auf Papierweiss. Im Menü liegt er auf
   dunklem Grund — deshalb hier die Gegenstücke.

   Die Auswahl steht bewusst zuoberst im Fuss, über «Kundenbereich»:
   Wer die Sprache wechseln will, sucht sie nicht zwischen zwei
   Knöpfen, und wer sie nicht sucht, liest sie als schmale Zeile
   über den Handlungen.
   ================================================================== */
.m-menu-fuss .sprach-wahl { margin: 0; justify-content: center; gap: 4px; }
.m-menu-fuss .sprach-w {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 14px; border-radius: 10px;
  font-size: 12px; letter-spacing: .1em;
  color: rgba(248,245,240,.55);
}
.m-menu-fuss .sprach-w:hover,
.m-menu-fuss .sprach-w:active { color: var(--paper); background: rgba(248,245,240,.10); }
/* Die aktive Sprache trägt keinen Kasten, sondern nur Helligkeit.
   Ein gefülltes Feld hinter zwei Buchstaben wirkt auf dunklem Grund
   wie ein Knopf, den man drücken soll — genau das Gegenteil dessen,
   was «du bist hier» heissen soll. */
.m-menu-fuss .sprach-w.aktiv { color: var(--paper); background: none; font-weight: 700; }

/* ==================================================================
   DIE TERMINWAHL — Befund 11 (22.9.2026)
   ------------------------------------------------------------------
   Ein Knopf anstelle des Browser-Kalenders, und dahinter eine Wahl
   in Immotion-Farben: Monatsansicht, Zeit-Chips, auf dem Telefon als
   Blatt von unten. Gebaut in assets/js/terminwahl.js.
   ================================================================== */
.tw-knopf { display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 13px; text-align: left; cursor: pointer;
  font-family: var(--f-sans); font-size: 14.5px; line-height: 1.3; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 10px;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.tw-knopf:hover { border-color: var(--rust); }
.tw-knopf:focus-visible { outline: none; border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(150,101,48,.18); }
.tw-knopf:disabled { opacity: .55; cursor: not-allowed; }
.tw-knopf-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--rust);
  stroke-width: 1.8; stroke-linecap: round; }
.tw-knopf-t { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tw-knopf.leer .tw-knopf-t { color: var(--ink-mute); }
/* In den Formularen, in denen er steht, sieht er aus wie seine Nachbarn. */
.co-field .tw-knopf { min-height: 48px; padding: 12px 14px; background: var(--bg);
  border-color: var(--line); font-size: 15px; }
.wt-feld .tw-knopf { min-height: 46px; border-color: var(--line); font-size: 15px; }
.adm-s-feld .tw-knopf { border-color: var(--line); }
@media (max-width: 640px) { .co-field .tw-knopf, .wt-feld .tw-knopf { font-size: 16px; } }

.tw-huelle { position: fixed; inset: 0; z-index: 1100; }
.tw-karte { position: fixed; width: 324px; max-width: calc(100vw - 24px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-lg); padding: 14px 14px 12px; color: var(--ink);
  font-family: var(--f-sans); }
.tw-karte.mit-zeit { width: 652px; }
/* 102 (K3-06): Die Karte passt immer ins Fenster; der Inhalt rollt,
   der Fuss mit «Übernehmen» bleibt stehen. */
.tw-huelle:not(.blatt) .tw-karte { max-height: calc(100vh - 24px); overflow-y: auto; }
/* K5-15 (Testrunde 4): Im Querformat endete die Karte unter dem Rand —
   «Heute» und «Abbrechen» waren unerreichbar. Auch als Blatt begrenzt. */
.tw-huelle:not(.blatt) .tw-karte { max-height: calc(100dvh - 24px); }
/* Und bei wenig Höhe fressen feste Leisten nicht 40 % der Seite: Die
   Kopfleiste rollt mit, die Preisleisten werden schlank. */
@media (orientation: landscape) and (max-height: 500px) {
  .nav { position: relative; }
  .pak-leiste, .co-leiste { padding-top: 6px !important; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important; }
  .pak-leiste .pak-leiste-sub, .co-leiste .co-leiste-sub, .co-leiste .co-leiste-lbl { display: none !important; }
  .tw-huelle.blatt .tw-karte { max-height: calc(100dvh - 12px) !important; }
}
.tw-huelle:not(.blatt) .tw-fuss { position: sticky; bottom: -12px; background: var(--paper);
  margin-bottom: -12px; padding-bottom: 12px; }
.tw-konflikt { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #8E3A22; }
.tw-konflikt::before { content: "⚠ "; }
.tw-belegt-mehr summary { cursor: pointer; font-size: 12px; color: #7A2C1B; }
.tw-belegt-mehr span { display: block; }
.tw-chip.an.besetzt, .tw-chip.an.besetzt:hover { background: repeating-linear-gradient(135deg,
  rgba(255,255,255,.18) 0 5px, transparent 5px 10px), var(--rust); color: #fff; border-color: #8E3A22; }
.tw-karte.mit-zeit .tw-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-teile { display: grid; gap: 18px; }
.tw-karte.mit-zeit .tw-teile { grid-template-columns: 296px minmax(0, 1fr); }

/* Auf dem Telefon ein Blatt von unten — dort liegt der Daumen. */
.tw-huelle.blatt { background: rgba(20,16,13,0); transition: background var(--d-base) var(--ease); }
.tw-huelle.blatt.auf { background: rgba(20,16,13,.42); }
.tw-huelle.blatt .tw-karte, .tw-huelle.blatt .tw-karte.mit-zeit {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
  max-height: 90vh; overflow-y: auto; border-radius: 20px 20px 0 0; border-bottom: 0;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform var(--d-slow) var(--ease-out); }
.tw-huelle.blatt.auf .tw-karte { transform: translateY(0); }
.tw-huelle.blatt .tw-teile, .tw-huelle.blatt .tw-karte.mit-zeit .tw-teile { grid-template-columns: minmax(0, 1fr); }
/* «Übernehmen» bleibt am unteren Rand stehen, auch wenn man die
   Uhrzeiten hinunterscrollt. */
.tw-huelle.blatt .tw-fuss { position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom));
  background: var(--paper); margin: 12px -16px 0; padding: 11px 16px 14px;
  box-shadow: 0 -8px 16px -12px rgba(20,16,13,.25); }
.tw-griff { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong);
  margin: 2px auto 12px; }

.tw-hinweis { font-size: 12.5px; line-height: 1.5; color: var(--rust-dk);
  background: var(--rust-tint); border-radius: 9px; padding: 8px 11px; margin-bottom: 12px; }

.tw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; }
.tw-monat { font-size: 15px; font-weight: 650; text-transform: capitalize;
  font-variant-numeric: tabular-nums; }
.tw-pfeil { width: 36px; height: 36px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 19px; line-height: 1; }
.tw-pfeil:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); }
.tw-pfeil:disabled { opacity: .3; cursor: default; }
.tw-pfeil:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.tw-wtage, .tw-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tw-wt { text-align: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute); padding: 4px 0 6px; }
.tw-wt.we { color: var(--rust-lt); }
.tw-tage { gap: 2px; }
.tw-tag { position: relative; display: flex; align-items: center; justify-content: center;
  height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-family: var(--f-sans); font-size: 14px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.tw-tag.we { background: rgba(150,101,48,.05); }
.tw-tag.fremd { color: var(--ink-mute); opacity: .5; }
.tw-tag.vorbei { color: var(--ink-mute); }
.tw-tag.heute span { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rust);
  color: var(--rust-dk); font-weight: 700; }
.tw-tag:hover:not(:disabled) { background: var(--rust-tint); }
.tw-tag.an, .tw-tag.an:hover { background: var(--rust); color: #fff; opacity: 1; }
.tw-tag.an.heute span { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.tw-tag:disabled { opacity: .28; cursor: not-allowed; text-decoration: line-through;
  text-decoration-color: var(--line-strong); }
.tw-tag:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; z-index: 1; }
.tw-punkte { position: absolute; left: 0; right: 0; bottom: 4px; display: flex;
  justify-content: center; gap: 3px; }
.tw-punkte i { width: 4px; height: 4px; border-radius: 50%; background: var(--rust); }
.tw-tag.an .tw-punkte i { background: #fff; }

.tw-zeit { min-width: 0; }
.tw-zeit-h { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); margin: 10px 0 9px; }
.tw-zeit-h span { text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--ink-mute); font-size: 12px; }
.tw-karte.mit-zeit .tw-zeit-h { margin-top: 8px; }
.tw-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.tw-chip { min-height: 36px; padding: 6px 4px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.tw-chip:hover { border-color: var(--rust); color: var(--rust-dk); }
.tw-chip.besetzt { background: repeating-linear-gradient(135deg, rgba(184,76,46,.07) 0 5px,
  transparent 5px 10px); border-color: rgba(184,76,46,.35); color: #8E3A22; }
.tw-chip.an, .tw-chip.an:hover { background: var(--rust); border-color: var(--rust); color: #fff; }
.tw-chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.tw-belegt { font-size: 12px; line-height: 1.45; color: #7A2C1B; background: #FBEDE9;
  border-radius: 9px; padding: 8px 11px; margin-bottom: 9px; display: flex;
  flex-direction: column; gap: 2px; }
.tw-belegt b { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.tw-andere { display: flex; align-items: center; gap: 9px; margin-top: 10px;
  font-size: 12.5px; color: var(--ink-mute); }
.tw-andere input { width: 80px; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--paper); }
.tw-andere input:focus { outline: none; border-color: var(--rust); }
.tw-andere input.falsch { border-color: var(--error); }

.tw-stand { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.tw-stand span { font-weight: 400; color: var(--ink-mute); }
.tw-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.tw-fuss-l, .tw-fuss-r { display: flex; align-items: center; gap: 6px; }
.tw-fuss-r { margin-left: auto; }
.tw-leise { min-height: 38px; padding: 7px 12px; border: 0; background: none; cursor: pointer;
  border-radius: 999px; font-family: var(--f-sans); font-size: 13px; font-weight: 600;
  color: var(--rust-dk); }
.tw-leise:hover { background: var(--rust-tint); }
.tw-ok { min-height: 40px; padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--rust); background: var(--rust); color: #fff;
  font-family: var(--f-sans); font-size: 13px; font-weight: 600; }
.tw-ok:disabled { opacity: .4; cursor: not-allowed; }
.tw-leise:focus-visible, .tw-ok:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Auf dem Telefon grössere Ziele für den Daumen. */
@media (max-width: 640px) {
  .tw-tag { height: 44px; font-size: 15px; }
  .tw-chip { min-height: 44px; font-size: 14px; }
  .tw-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-huelle.blatt, .tw-huelle.blatt .tw-karte { transition: none; }
}

/* K5-44 (Batch 19): Sprungmarken (Inhaltsverzeichnis der AGB, «#jobs»)
   landeten unter der festen Kopfzeile — die Überschrift war verdeckt. */
main [id], section[id], h2[id], h3[id] { scroll-margin-top: 88px; }

/* Batch 33 · Überschriften */
/* ------------------------------------------------------------------
   Andri, 29.9.2026: «Wir müssen uns lösen von diesem Kursiv.»
   Grosse Überschriften in Schibsted Grotesk (500), einfarbig; nur
   «Erst verkaufen» bleibt Gold. Geladen ist allein der Schnitt 500;
   font-synthesis: none verhindert, dass der Browser aus einem
   «font-weight: 700» einen künstlich verdickten rechnet. Erzeugt von
   werkzeug/typo-ueberschriften.py.
   ------------------------------------------------------------------ */
:root { --f-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif; --w-display: 500; --ls-display: -.02em; }
h1,
.hero-h1,
.page-hero h1,
.ls-hero h1,
.legal h2,
.final-h,
.svc-title,
.section-h,
.ls-titel,
.studio-title,
.steps-title,
.erst-h,
.form-title,
.book-card-title,
.sub-title,
.bw-titel,
.m-wort,
.e404-h,
.dash-top-h,
.dt-h,
.blk-h,
.lf-h,
.cm-title,
.dl-h,
.co-title,
.co-topbar-h,
.co-done-h,
.vt-tour-title,
.imf-label-title,
.dash-section-title-serif,
.dash-welcome-h,
.dash-quick-h,
.kb-lief-h,
.bw-danke-t,
.bl-titel,
.auth-h,
.personal-quote,
.story-lead,
.auth-visual-quote {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;   /* kein einzelnes Wort allein auf der letzten Zeile */
  font-synthesis: none;
  font-style: normal;
}
/* Ein <em> in einer Überschrift ist nie mehr kursiv, auch dort, wo
   keine Seite eine eigene Regel dafür hat. */
h1 em,
.hero-h1 em,
.page-hero h1 em,
.ls-hero h1 em,
.legal h2 em,
.final-h em,
.svc-title em,
.section-h em,
.ls-titel em,
.studio-title em,
.steps-title em,
.erst-h em,
.form-title em,
.book-card-title em,
.sub-title em,
.bw-titel em,
.m-wort em,
.e404-h em,
.dash-top-h em,
.dt-h em,
.blk-h em,
.lf-h em,
.cm-title em,
.dl-h em,
.co-title em,
.co-topbar-h em,
.co-done-h em,
.vt-tour-title em,
.imf-label-title em,
.dash-section-title-serif em,
.dash-welcome-h em,
.dash-quick-h em,
.kb-lief-h em,
.bw-danke-t em,
.bl-titel em,
.auth-h em,
.personal-quote em,
.story-lead em,
.auth-visual-quote em {
  font-style: normal;
}
/* Handy: Die Grotesk ist breiter als die alte Kursive. Lange Wörter wie
   «Baulandvisualisierung» passen so auf 360 px, und wo nicht, wird
   getrennt statt über den Rand geschoben. «body» davor, damit die
   Stilblöcke der Seiten (die später kommen) nicht gewinnen. */
@media (max-width: 520px) {
  body .ls-hero h1, body .svc-title { font-size: min(40px, 8.4vw); }
  body h1,
  body .hero-h1,
  body .page-hero h1,
  body .ls-hero h1,
  body .legal h2,
  body .final-h,
  body .svc-title,
  body .section-h,
  body .ls-titel,
  body .studio-title,
  body .steps-title,
  body .erst-h,
  body .form-title,
  body .book-card-title,
  body .sub-title,
  body .bw-titel,
  body .m-wort,
  body .e404-h,
  body .dash-top-h,
  body .dt-h,
  body .blk-h,
  body .lf-h,
  body .cm-title {
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
}