/* Form und Farbe der 4punkt0-Website, angeglichen am 13.10.2026.
   Erzeugt von build/markenvorschauen-form.py - nicht von Hand bearbeiten. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/_4punkt0/fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/_4punkt0/fonts/source-serif-4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/_4punkt0/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/_4punkt0/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --vierpunktnull-schatten-knopf: 0 1px 2px rgb(8 31 56 / 0.10), 0 10px 30px -2px rgb(8 31 56 / 0.18);
  --vierpunktnull-radius-foto: clamp(16px, 1.8vw, 24px);
  --vierpunktnull-radius-karte: clamp(14px, 1.4vw, 20px);
}

/* Absenderleiste mit dem Rückweg zu 4punkt0 (15.10.2026). Form der
   Serviceleiste der Website: Navyband, helle Schrift, unterstrichener Weg. */
.vierpunktnull-absender {
  background: #081f38;
  color: #f0f0f0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.35;
  position: relative;
  z-index: 60;
}
.vierpunktnull-absender__innen:not(.wrap, .shell, .container) {
  /* Rückfall nur ohne Containerklasse der Marke. Mit ihr bestimmt die
     Marke Breite und Rand allein - gemessen 15.10.2026: ein zusätzlicher
     Innenabstand hier rückte den Text 16-48 px neben das Logo. */
  max-width: 1344px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.vierpunktnull-absender__innen {
  padding-block: 0.25rem;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.vierpunktnull-absender strong { font-weight: 600; }

/* Kein seitliches Wischen auf schmalen Telefonen (Rick, 25.10.2026: „Dieses
   Sliden mobil darf NICHT sein!“). Gemessen in WebKit bei 320 px: Spalten
   wurden nicht schmaler als ihr breitester Inhalt (VerkaufsCheck /kontakt/:
   E-Mail-Adresse in 23 px), eine Tabelle war 620 px breit (Verkaufsreife).
   `:where()` hat kein Gewicht - bewusst gesetzte Mindestbreiten gewinnen
   weiter. Tabellen scrollen in sich, nicht die Seite. */
@media (max-width: 480px) {
  main :where(*) { min-width: 0; }
  main :where(h1, h2, h3, h4, p, li, a, span, td, th, dd, dt, address) { overflow-wrap: break-word; }
  main table { display: block; max-width: 100%; overflow-x: auto; }
}
/* Unterstreichung durchgehend über Wort UND Pfeil (Weisung 15.10.2026:
   „wenn dann durchgehend unterstreichen, und wenn das nicht geht, dann gar
   nicht").

   KEINE Textunterstreichung. Drei Anläufe damit sind gescheitert: Erst
   trennte der Flex-Abstand Wort und Pfeil, dann blieb die Linie unter dem
   Pfeil aus, auch ohne skip-ink. Der Grund: Inter in der Fassung der
   Website enthält den Pfeil U+2192 nicht (unicode-range oben), er kommt aus
   einer Ersatzschrift, und deren Linie zeichnet der Browser getrennt.
   Gemessen war die Unterstreichung über den ganzen Text gesetzt, sichtbar
   aber nur unter dem Wort.

   Die Linie ist deshalb ein Hintergrund über die volle Breite des
   Verweises - schriftunabhängig, immer durchgehend. Hover macht sie 2 px
   stark, wie auf der Website. */
.vierpunktnull-absender__weg {
  display: inline-block;
  padding-block: 0.5rem;
  color: #f0f0f0 !important;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 0.35rem) / 100% 1px;
  transition: background-size .3s ease;
}
.vierpunktnull-absender__weg:hover, .vierpunktnull-absender__weg:focus-visible { background-size: 100% 2px; }
.vierpunktnull-absender__weg:focus-visible { outline: 2px solid #f4c14b; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 420px) { .vierpunktnull-absender__vorsatz { display: none; } }
/* Rückwege zu 4punkt0 mit Symbol oder Pfeil: gar keine Linie, auch nicht
   beim Überfahren - durchgehend ging nicht (build/markenvorschauen-bauen.py). */
.vierpunktnull-ohne-linie, .vierpunktnull-ohne-linie *,
.vierpunktnull-ohne-linie:hover, .vierpunktnull-ohne-linie:hover * {
  text-decoration: none !important;
}

/* Unsichtbare Überschrift für Lücken in der Gliederung (16.10.2026):
   lesbar für Maschinen und Vorleseprogramme, nicht im Bild. */
.vierpunktnull-sr {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Sprunglink „Zum Inhalt": auf der Website gerundet wie ein Knopf */
body > a:first-child[href^="#"], .skip, .skip-link { border-radius: 14px !important; }

body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
button, input, select, textarea, optgroup { font: inherit; }

/* Überschriften wie auf der Website: Serifenschrift, Gewicht 400 */
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Liberation Serif", serif !important; font-weight: 400 !important; }
h1, h2 { letter-spacing: -0.02em !important; }
h1 *, h2 *, h3 * { font-weight: inherit !important; }
/* Keine Silbentrennung in Überschriften („Um-fang“, „Im-mobilie“) - wie
   auf der Website. Lange Wörter umbrechen nur an der Wortgrenze. */
h1, h2, h3 { hyphens: manual !important; -webkit-hyphens: manual !important; }

/* Knöpfe: Form nach .btn--navi der Website */
.button {
  border-radius: 14px !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 600 !important;
  box-shadow: var(--vierpunktnull-schatten-knopf) !important;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease !important;
}
.button:not(.outline) {
  background: linear-gradient(to top, #d99229 0%, #f4c14b 100%) !important;
  color: #081f38 !important;
  border: 1px solid transparent !important;
}
:is(.button:not(.outline)):hover, :is(.button:not(.outline)):focus-visible {
  filter: brightness(0.95) saturate(1.05);
  box-shadow: 0 2px 4px rgb(8 31 56 / 0.14), 0 14px 34px -4px rgb(8 31 56 / 0.24) !important;
}
:is(.button:not(.outline)) * { color: inherit !important; }
/* Symbole im goldenen Knopf in Navy wie die Schrift. Die Vorlagen färben
   sie per filter weiss (ihre Hauptknöpfe waren navy) - auf Gold stand der
   Pfeil dadurch weiss (Weisung 15.10.2026: „Der eine Pfeil da im Button ist
   weiß komischerweise"). Die Symboldateien selbst sind navy. */
:is(.button:not(.outline)) :is(img, svg) { filter: none !important; }

/* Menüknöpfe: Inhalt mittig, auf beiden Achsen. Gemessen 15.10.2026: Der
   Knopf von Verkaufsreife ist 48 px breit, das Symbol 19 px - ohne
   justify-content sass es links. */
header button[aria-controls][aria-expanded] {
  justify-content: center !important;
  align-items: center !important;
}
header button[aria-controls][aria-expanded] > img { display: block; }

/* Fotos: nie eckig (Weisung 14.09.2026). Logos und Symbole ausgenommen. */
:is(main, section, article, figure, picture) img:not([src*="logo" i]):not([src*="icon" i]):not([src$=".svg" i]):not([alt*="Logo" i]) {
  border-radius: var(--vierpunktnull-radius-foto) !important;
}
:is(main, section, article, figure, picture) :is(figure, picture):has(> img:not([src*="logo" i])) {
  border-radius: var(--vierpunktnull-radius-foto);
}

/* Eckige Flächen der Vorlage: Kartenrundung der Website */
.contact-direct-note, .kb-scope-contract { border-radius: var(--vierpunktnull-radius-karte) !important; overflow: hidden; }

.topbar, .preview-bar, nav.vierpunktnull-absender {
  background: #f0f0f0;
  color: color-mix(in srgb, #081f38 78%, #f0f0f0);
  border-bottom: 0;
}
.topbar a, .preview-bar a, .topbar strong, .preview-bar strong,
nav.vierpunktnull-absender strong, nav.vierpunktnull-absender a { color: #081f38; }
nav.vierpunktnull-absender .vierpunktnull-absender__weg:focus-visible { outline-color: #081f38; }
/* Der Weg ist in der Grundregel fest hell (!important) - auf hellem Grund
   verschwand er. Und in den Paketleisten trägt der eingefügte Teil mit
   Telefon und Weg dieselbe Klasse wie die Leiste: Er bekam deren Navy als
   Kasten. Beides gemessen am 26.10.2026, bevor es ausgeliefert war. */
nav.vierpunktnull-absender .vierpunktnull-absender__weg,
.topbar .vierpunktnull-absender__weg,
.preview-bar .vierpunktnull-absender__weg { color: #081f38 !important; }
.topbar .vierpunktnull-absender, .preview-bar .vierpunktnull-absender { background: transparent; color: inherit; }

/* Überschrift auf dem Handy (26.10.2026). Rick: „Da ist ‚Ihre Immobilie
   verkaufen. Wir kümmern uns um die Arbeit' richtig fett und groß. […] Wenn
   man bedenkt, dass man das am Handy sieht, ist der Text wow.“ Gemessen auf
   allen Unterseiten bei 390 px: 35 bis 48 px, je nach Seite. Seither ein Maß
   für die ganze Familie: 38 px ab 390 px Breite, darunter gleitend bis 32 px
   bei 320 px. `!important`, weil die Pakete ihre Größe an sechs verschiedenen
   Selektoren festmachen (.hero h1, .hero-copy h1, .container h1 …) - eine
   Regel, die eine davon übersieht, liefe dort ins Leere. */
@media (max-width: 620px) {
  h1 { font-size: clamp(2rem, 9.75vw, 2.375rem) !important; }
  .topbar a[href^="tel:"], .preview-bar a[href^="tel:"] { display: none; }
  .topbar > div, .preview-bar > div { flex-wrap: nowrap; justify-content: space-between; }
  .topbar .topbar-extra, .preview-bar .preview-meta { display: none; }
  .topbar > div > span:first-child, .preview-bar > div > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}