/* ==========================================================================
   NovaTrend Hausverwaltung GmbH — Stylesheet
   CI: Schwarz #000000 · Orange #e7480f · Weiß #ffffff
   Typografie: "Archivo" (Ersatz für die CI-Schrift "Indivisible"), selbst gehostet

   Aufbau
   ---------------------------------------------------------------------------
   00  Schrift ........... Archivo, selbst gehostet
   01  Tokens ............ Farben, Maße, Schatten, Bewegung
   02  Basis ............. Reset, Grundtypografie, Fokus
   03  Layout ............ .wrap, .section
   04  Typo-Bausteine .... .eyebrow, .h-*, .lead, .rule, .section-head
   05  Utilities ......... .actions und kleine Helfer
   06  Buttons ........... .btn
   07  Header ............ Skiplink, Topbar, Navigation, Mobilmenü
   08  Hero .............. Hero und Faktenband
   09  Über uns .......... .split, .media-frame, .ticks, .pills
   10  Leistungen ........ .svc-grid
   11  Mietobjekte ....... .objects-embed, #iwdigetinfo
   12  Vorteile .......... .adv-grid
   13  Ablauf ............ .steps
   14  FAQ ............... .faq-*
   15  Kontakt ........... .contact, Formular, .info-card
   16  CTA-Band .......... .cta-band
   17  Footer ............ .footer
   18  Rechtsseiten ...... .legal-*, .breadcrumb
   18b Nach oben ......... .to-top
   19  Animation ......... .reveal
   20  Breakpoints ....... 1080 / 980 / 720 / 460 / 380
   21  Print
   ========================================================================== */


/* ==  00  Schrift  ========================================================
   Archivo liegt auf dem eigenen Server (assets/fonts/) statt bei Google.
   So wird beim Seitenaufruf keine IP-Adresse an Google übertragen.
   Archivo ist eine variable Schrift: eine Datei deckt alle Schnitte ab.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/archivo-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: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/archivo-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;
}


/* ==  01  Tokens  ========================================================== */

:root {
  /* Farben */
  --orange: #e7480f;             /* CI-Orange — die Markenfarbe */
  --orange-dark: #c33a07;        /* nur Hover-/Aktivzustand, kein Ruhezustand */
  --orange-soft: #fdf0eb;        /* getönter Grund für Pills und Auswahlfelder */
  --black: #000000;
  --ink: #101010;
  --ink-2: #2b2b2b;
  --muted: #5c5c5c;
  --muted-2: #7d7d7d;
  --line: #e3e0dd;
  --sand: #f6f4f2;
  --white: #ffffff;

  /* Farben auf dunklem Grund */
  --on-dark: #d7d5d3;
  --on-dark-muted: #b8b5b3;      /* gedämpft, aber auf Schwarz noch gut lesbar */

  /* Maße */
  --wrap: 1240px;
  --wrap-wide: 1440px;       /* für breit angelegte Abschnitte, z. B. Ablauf */
  --wrap-text: 940px;        /* Lesebreite, z. B. FAQ */
  --gutter: clamp(20px, 5vw, 56px);
  --topbar-h: 46px;
  --bar-h: 108px;
  --header-h: calc(var(--topbar-h) + var(--bar-h));

  /* Vertikaler Rhythmus */
  --gap-inline: 14px;                       /* Abstand zwischen Buttons     */
  --gap-block: clamp(28px, 3.4vw, 34px);    /* Block → nachfolgende Aktion  */
  --section-y: clamp(64px, 8.5vw, 128px);

  /* Form */
  --r-s: 4px;
  --r-m: 8px;
  --shadow-s: 0 2px 10px rgba(0, 0, 0, .06);
  --shadow-m: 0 18px 50px rgba(0, 0, 0, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ==  02  Basis  =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-anchor: Die Scrollposition beim Nachladen der Immowelt-Liste führt
   main.js selbst nach (initImmowelt). Die Verankerung der Browser verhält
   sich dabei uneinheitlich und würde teils zusätzlich korrigieren. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  overflow-anchor: none;
}

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

/* Silbentrennung ist in Überschriften grundsätzlich aus — mit text-wrap:
   balance würde der Browser sonst auch dort trennen, wo das Wort passt.
   Auf schmalen Bildschirmen schaltet Abschnitt 20 sie wieder ein, weil lange
   Komposita wie „Datenschutzerklärung“ sonst über den Rand laufen. */
h1, h2, h3, h4 {
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--black);
  margin: 0;
  text-wrap: balance;
  hyphens: none;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}


/* ==  03  Layout  ========================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--black); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }

/* Mehr Breite für Inhalte, die sonst gedrängt wirken (Ablauf-Schritte). */
.section--wide .wrap { max-width: var(--wrap-wide); }

/* Grid-Zellen sind standardmäßig mindestens so breit wie ihr längstes Wort
   und können so das ganze Raster über den Bildschirmrand drücken.
   Bewusst NICHT bei .split („Über uns“): dort soll die Textspalte auf dem
   Desktop mitwachsen, damit „Immobilienverwaltung.“ ungetrennt hineinpasst. */
.svc-grid > *, .adv-grid > *, .steps > *,
.contact > *, .footer-main > * { min-width: 0; }


/* ==  04  Typo-Bausteine  ================================================== */

.eyebrow {
  display: block;
  font-size: clamp(12px, 1.2vw, 14.5px);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 18px;
}

.h-xl { font-size: clamp(34px, 6.4vw, 74px); }
.h-l  { font-size: clamp(29px, 4.2vw, 52px); }
.h-m  { font-size: clamp(22px, 2.4vw, 30px); }

.lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.section--dark .lead { color: #b6b3b1; }

/* Ein Lead direkt unter der Überschrift bekommt seinen Abstand automatisch. */
:is(h1, h2) + .lead { margin-top: 20px; }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 4vw, 64px); }

/* Im Section-Head steht der Lead unter einer großen Überschrift und darf
   deshalb kompakter setzen als der Standard-Lead im Fließtext. */
.section-head .lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; }

/* Zentrierte Variante für Abschnitte, deren Inhalt symmetrisch aufgebaut ist. */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .rule { margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }

.rule {
  width: 64px; height: 3px;
  background: var(--orange);
  border: 0; margin: 0 0 8px;
}


/* ==  05  Utilities  ======================================================= */

/* Button-Reihe. Ersetzt die früheren Inline-Styles für Aktionsgruppen. */
.actions { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.actions--spaced { margin-top: var(--gap-block); }
.actions--center { justify-content: center; }


/* ==  06  Buttons  ========================================================= */

.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;             /* lange Beschriftung bricht um statt überzustehen */
  padding: 14px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--r-s);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.btn .btn-arrow { transition: transform .22s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: currentColor;
}
.btn--ghost:hover { background: var(--black); border-color: var(--black); color: #fff; }

/* Outline in der CI-Farbe — zurückhaltender als der gefüllte Button,
   behält aber den Markenakzent. Genutzt für den CTA in der Kopfleiste. */
.btn--outline {
  background: transparent;
  color: var(--orange);
  border-color: var(--orange);
}
.btn--outline:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--black); }

.btn--lg { min-height: 58px; padding: 16px 34px; font-size: 16px; }
.btn--sm { min-height: 44px; padding: 11px 22px; font-size: 14px; gap: 9px; }

/* Icon im Button, z. B. der Zurück-Pfeil auf den Rechtsseiten. */
.btn-icon { width: 15px; height: 15px; flex: 0 0 15px; transition: transform .22s var(--ease); }
.btn:hover .btn-icon--back { transform: translateX(-4px); }
.btn--lg .btn-icon { width: 17px; height: 17px; flex-basis: 17px; }


/* ==  07  Header  ==========================================================
   Ebenen (z-index): Das Immowelt-Modul in #mietobjekte legt Vorschaubilder
   auf 100 und die Bildnavigation im Exposé auf 200; sie liefen sonst beim
   Scrollen über Header und Mobilmenü. Unsere festen Elemente liegen deshalb
   darüber — aber unter Immowelts Vollbild-Abdunklung (1001) und dessen
   Dialogen (1100+), damit ein geöffnetes Immowelt-Fenster alles überdeckt.
     Nach oben 800 · Mobilmenü 900 · Header 1000 · Skiplink 1010
   ========================================================================== */

.skip {
  position: absolute; left: -9999px;
  background: var(--black); color: #fff;
  padding: 12px 20px; z-index: 1010;
}
.skip:focus { left: 12px; top: 12px; }

.header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--white);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); }

/* Topbar ------------------------------------------------------------------ */

.topbar {
  background: var(--black);
  color: #cfcdcb;
  font-size: 14px;
}
.topbar .wrap {
  min-height: var(--topbar-h);
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.topbar-contact {
  --sep-gap: 12px;
  display: flex; align-items: center; gap: var(--sep-gap);
}

/* Senkrechte Linie zwischen Telefon und E-Mail. Als Rahmen am zweiten Element
   statt als eigenes Zeichen — so gehört sie zu keinem der beiden Links.
   Der Innenabstand nutzt dieselbe Variable, damit die Linie mittig bleibt. */
.topbar-contact .topbar-mail {
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: var(--sep-gap);
}
.topbar a { color: #eceae8; font-weight: 500; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--orange); }
.topbar a:hover { color: var(--orange); text-decoration: none; }
.topbar-hours { color: var(--on-dark-muted); }

/* Logoleiste und Navigation ----------------------------------------------- */

.bar .wrap {
  min-height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}
.brand { display: block; margin-right: auto; flex: 0 0 auto; }
.brand img { height: clamp(54px, 6.4vw, 80px); width: auto; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--orange);
  transition: right .28s var(--ease);
}
.nav a:hover { color: var(--black); text-decoration: none; }
.nav a:hover::after, .nav a.is-active::after { right: 0; }
.nav a.is-active { color: var(--black); font-weight: 700; }

/* Burger ------------------------------------------------------------------ */

.burger {
  display: none;
  width: 48px; height: 48px;
  border: 2px solid var(--line); border-radius: var(--r-s);
  background: #fff; cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block; width: 22px; height: 2px; background: var(--black);
  transition: transform .25s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobilmenü --------------------------------------------------------------- */

.mobile-nav {
  position: fixed; inset: 0; z-index: 900;
  background: var(--black);
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav a {
  color: #fff;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: 12px 0;
  border-bottom: 1px solid #1f1f1f;
}
.mobile-nav a:hover, .mobile-nav a:focus { color: var(--orange); text-decoration: none; }
.mobile-nav .mobile-nav-foot {
  margin-top: 28px; display: grid; gap: 14px;
  color: #9b9997; font-size: 15px;
}
.mobile-nav .mobile-nav-foot a {
  font-size: 17px; font-weight: 700; text-transform: none;
  border: 0; padding: 0; letter-spacing: 0;
}


/* ==  08  Hero  ============================================================ */

.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--black);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(75deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 45%);
}
.hero .wrap {
  position: relative; z-index: 2;
  padding-block: clamp(96px, 12vw, 150px) clamp(40px, 5vw, 64px);
}
/* Breit genug für die erste Zeile der H1 („Immobilienverwaltung mit“ misst
   bei 74px gut 1000px). Der Fließtext darunter begrenzt sich selbst auf 58ch. */
.hero-inner { max-width: 1040px; }
.hero .eyebrow { color: #fff; opacity: .85; }
/* Die Abdunklung über dem Foto ist bewusst leicht gehalten. Ein weicher
   Schatten dunkelt direkt hinter der Schrift nach, damit vor allem das Orange
   auch vor heller Fassade kräftig bleibt. */
.hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.hero h1 .accent { color: var(--orange); }

/* Ab 1081px steht die H1 zweizeilig mit festem Umbruch nach „mit“. */
.hero h1 br.only-wide { display: none; }
@media (min-width: 1081px) { .hero h1 br.only-wide { display: inline; } }

.hero-text {
  margin: 26px 0 34px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
  color: #dcdad8;
  max-width: 58ch;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 34px; padding: 0; list-style: none;
}
.hero-tags li {
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,.05);
}

/* Faktenband unter dem Hero ------------------------------------------------ */

.hero-facts {
  background: var(--orange);
  color: #fff;
}
.hero-facts ul {
  list-style: none; margin: 0; padding-block: 26px;
  display: grid; gap: 6px 40px;
  grid-template-columns: repeat(3, 1fr);
}
.hero-facts li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; line-height: 1.4;
}
.hero-facts b {
  font-weight: 900; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero-facts .dot { width: 8px; height: 8px; background: #fff; flex: 0 0 8px; margin-top: 6px; }


/* ==  09  Über uns  ======================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

/* Das Bild ragt rechts über seine Spalte hinaus (max. 220px, mit 40px Luft
   zum Fensterrand für den Rahmen) und nimmt die volle Höhe des Textblocks ein. */
.split-media {
  align-self: stretch;
  margin-right: calc(-1 * clamp(0px, max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) - 40px, 220px));
}
.media-frame { position: relative; height: 100%; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
.media-frame::before {
  content: ""; position: absolute;
  inset: auto -18px -18px auto;
  width: 58%; height: 58%;
  border: 4px solid var(--orange);
  border-radius: var(--r-m);
  z-index: -1;
}
.media-badge {
  position: absolute; left: 0; bottom: 0;
  transform: translate(-8%, 22%);
  background: var(--orange); color: #fff;
  padding: clamp(24px, 2.2vw, 30px) clamp(28px, 2.6vw, 36px);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  max-width: 300px;
}
.media-badge strong {
  display: block;
  font-size: clamp(36px, 4vw, 54px); font-weight: 900; line-height: 1;
  color: #fff;
}
.media-badge span {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 13px; }
.ticks li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  align-items: start;
  font-size: 16.5px; line-height: 1.5;
}
.ticks li::before {
  content: ""; margin-top: 7px;
  width: 14px; height: 8px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
}
.section--dark .ticks li { color: #ddd; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.pills li {
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}


/* ==  10  Leistungen  ====================================================== */

/* align-items: start — sonst zieht die aufgeklappte Karte die anderen in der
   Rasterzeile mit in die Höhe und hinterlässt dort leere Fläche. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.svc {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: #d3cfcb; }
.svc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover .svc-media img { transform: scale(1.05); }
/* z-index nötig: Das Bild bekommt beim Hovern ein transform und damit einen
   eigenen Stapelkontext — ohne ihn würde es sich über die Nummer legen. */
.svc-num {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 900; letter-spacing: .1em;
  padding: 8px 14px;
}
.svc-body { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin-bottom: 12px; }
.svc-body > p { color: var(--muted); font-size: 16px; }

.svc details { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.svc summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::after {
  content: "+"; font-size: 20px; font-weight: 700; line-height: 1;
}
.svc details[open] summary::after { content: "–"; }
.svc details ul {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
  font-size: 15.5px; line-height: 1.45; color: var(--ink-2);
}
.svc details li { display: grid; grid-template-columns: 8px 1fr; gap: 12px; }
.svc details li::before {
  content: ""; width: 6px; height: 6px; margin-top: 8px;
  background: var(--orange); border-radius: 50%;
}

.svc-note {
  margin-top: clamp(32px, 4vw, 52px);
  border-left: 4px solid var(--orange);
  padding: 22px 0 22px 26px;
  max-width: 900px;
}
.svc-note strong {
  display: block;
  font-size: clamp(19px, 2vw, 24px); font-weight: 900;
  color: var(--black); letter-spacing: -.01em;
}
.svc-note p { margin: 8px 0 0; color: var(--muted); }


/* ==  11  Mietobjekte  ===================================================== */

/* Aufnahmefläche für das Immowelt-Homepagemodul. Das Modul lädt eigenes
   CSS; Schrift und Farben werden im Immowelt-Konto unter „Design anpassen“
   eingestellt. Hier nur die Stellen, an denen es mit unserem Layout kollidiert.
   Das Immowelt-CSS wird zur Laufzeit NACH unserem geladen — die Selektoren
   beginnen deshalb mit .objects-embed, um bei gleicher Regel zu gewinnen. */

/* 1. Volle Inhaltsbreite. Immowelt begrenzt das Modul per CSS auf 940px und
      erzwingt mindestens 450px (liefe auf Smartphones über den Rand). Das
      Skript misst beim Start die Breite von #iwWidget, schreibt sie als
      Inline-Style fest und berechnet daraus auch die Exposé-Spalten.
      max-width: 100% statt none: beim Start wird so die volle Breite gemessen,
      und wird das Fenster danach verkleinert, bleibt das Modul im Container. */
.objects-embed #iwModule,
.objects-embed #iwModule #iwWidget { max-width: 100%; min-width: 0; }

/* 2. Box-Modell zurücksetzen. Unser globales box-sizing: border-box greift
      auch im Widget. Immowelt rechnet aber mit dem Browser-Standard: beim
      Hovern gleicht es Padding und Rahmen der Listeneinträge mit negativen
      Margins aus, und das geht nur mit content-box auf. Mit border-box rückt
      der Eintrag zusammen und verrutscht. revert stellt den Standard wieder her. */
.objects-embed #iwModule,
.objects-embed #iwModule *,
.objects-embed #iwModule *::before,
.objects-embed #iwModule *::after { box-sizing: revert; }

/* Pflicht-Hinweis von Immowelt: dezent, aber sichtbar — das Skript prüft ihn. */
#iwdigetinfo {
  margin-top: 18px;
  font-size: 13px; color: var(--muted-2);
  text-align: right;
}
#iwdigetinfo a { color: var(--muted); }

.objects-noscript {
  padding: 28px; text-align: center;
  background: var(--sand); border-radius: var(--r-m);
  color: var(--muted);
}


/* ==  12  Vorteile  ======================================================== */

.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); }
.adv { border-top: 3px solid #262626; padding-top: 26px; transition: border-color .3s var(--ease); }
.adv:hover { border-top-color: var(--orange); }
.adv-num {
  font-size: 13px; font-weight: 900; letter-spacing: .18em;
  color: var(--orange); display: block; margin-bottom: 16px;
}
.adv h3 {
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px;
}
.adv p { color: #adaaa8; font-size: 16px; }


/* ==  13  Ablauf  ========================================================== */

.steps {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.2vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.step { position: relative; padding-top: 62px; }
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 24px;
  height: 2px; background: var(--line);
}
.step-dot {
  position: absolute; left: 0; top: 0;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--orange);
  color: var(--orange);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900; letter-spacing: -.01em;
  z-index: 2;
}
.step h3 {
  font-size: clamp(17px, 1.4vw, 20px);
  letter-spacing: -.01em; margin-bottom: 12px; hyphens: auto;
}
.step p { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.55; color: var(--muted); }


/* ==  14  FAQ  ============================================================= */

/* Bildband als Abschnittskopf: Foto eines verwalteten Objekts über die volle
   Breite. Eine weiße Aufhellung zur Mitte hin hält die dunkle Überschrift
   lesbar, zum Rand hin bleibt das Foto sichtbar. Das Band ersetzt den oberen
   Innenabstand des Abschnitts und bringt den Abstand zum Inhalt selbst mit. */
.section--banner { padding-top: 0; }
.banner {
  position: relative; overflow: hidden;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.banner-media { position: absolute; inset: 0; }
/* Auf sehr breiten Bildschirmen wird oben und unten beschnitten. Der Ausschnitt
   sitzt deshalb weit oben, damit über dem Dach noch Himmel bleibt. */
.banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.banner-media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 46% 62% at 50% 52%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}
.banner .wrap { position: relative; z-index: 2; padding-block: clamp(96px, 12.5vw, 190px); }
.banner .section-head { margin-bottom: 0; }
/* Auf dem Foto reicht das Standardgrau des Leads nicht für sicheren Kontrast. */
.banner .lead { color: var(--ink-2); }

/* Der FAQ-Block sitzt mittig unter der zentrierten Überschrift; die Antworten
   selbst bleiben linksbündig, weil zentrierter Fließtext schlecht liest. */
.faq { max-width: var(--wrap-text); margin-inline: auto; }

/* Jede Gruppe zählt bei 1 los — wie in der Seitenstruktur (Eigentümer 1–11,
   Mieter 1–10). Die Nummern kommen aus einem CSS-Counter, damit sie beim
   Ergänzen oder Umsortieren von Fragen automatisch stimmen. */
.faq-list {
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: faq;

  /* Breite der Nummernspalte plus ihr Abstand zur Frage. Die Antwort nutzt
     denselben Wert als Einzug und fluchtet dadurch mit dem Fragetext. */
  --faq-q-size: clamp(16.5px, 1.5vw, 19px);
  --faq-num-w: calc(var(--faq-q-size) * 1.5);
  --faq-num-gap: 9px;
  --faq-indent: calc(var(--faq-num-w) + var(--faq-num-gap));
}
.faq-item { border-bottom: 1px solid var(--line); counter-increment: faq; }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: grid;
  grid-template-columns: var(--faq-num-w) 1fr 34px;
  gap: 20px var(--faq-num-gap);
  align-items: start;
  padding: 24px 0;
  font-size: var(--faq-q-size);
  font-weight: 700; line-height: 1.4; color: var(--black);
  letter-spacing: -.005em;
  transition: color .2s var(--ease);
}
/* Die Spalte muss zweistellige Zahlen fassen. Rechtsbündig steht deshalb jede
   Zahl gleich dicht an der Frage, egal ob "1." oder "11.". */
.faq-item summary::before {
  content: counter(faq) ".";
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.faq-item summary:hover { color: var(--orange); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; width: 22px; height: 22px; margin-top: 3px;
  border: 2px solid var(--orange); border-radius: 50%;
  flex: 0 0 22px;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--orange); transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .2s;
}
.faq-icon::before { width: 9px; height: 2px; }
.faq-icon::after { width: 2px; height: 9px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
/* Links eingerückt auf Höhe des Fragetexts, rechts derselbe Abstand. */
.faq-answer {
  padding: 0 var(--faq-indent) 28px;
  color: var(--muted); font-size: 17px;
}



/* ==  15  Kontakt  ========================================================= */

.contact {
  display: grid; grid-template-columns: 1.25fr .85fr;
  gap: clamp(32px, 4vw, 64px); align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: var(--shadow-s);
}

fieldset { border: 0; margin: 0; padding: 0; }
.field-group { margin-bottom: 22px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field label, .fieldset-legend {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--orange); }

.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  width: 100%; min-height: 52px;
  padding: 13px 16px;
  color: var(--ink);
  background: #fbfaf9;
  border: 1.5px solid var(--line);
  border-radius: var(--r-s);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cdc9c5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(231, 72, 15, .14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #c4321a; background: #fff6f4;
}

.error-msg { font-size: 13.5px; color: #b32d16; font-weight: 500; }
.error-msg:empty { display: none; }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.radio-row label {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 10px 20px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: #fbfaf9; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.radio-row input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; }
.radio-row label:hover { border-color: #cdc9c5; }
.radio-row label:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); font-weight: 700; }

.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  align-items: start; margin-top: 26px;
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--orange); flex: 0 0 22px; }
.consent a { font-weight: 700; }

.form-foot {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
}
.form-foot .hint { font-size: 13.5px; color: var(--muted-2); }

/* Honeypot — für Menschen unsichtbar, für Bots ein Köder. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: 22px; padding: 18px 22px;
  border-radius: var(--r-s); font-size: 16px; line-height: 1.5;
  border-left: 4px solid;
}
.form-status[hidden] { display: none; }
.form-status.is-ok { background: #eef8f0; border-color: #2e7d43; color: #1d5c30; }
.form-status.is-err { background: #fdf1ee; border-color: #c4321a; color: #92240f; }

/* Kontaktangaben neben dem Formular ---------------------------------------
   Kompakte Karte im CI-Orange. */

.contact-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.info-card {
  background: var(--orange); color: #fff;
  border-radius: var(--r-m);
  padding: clamp(26px, 2.8vw, 36px);
}
.info-card h3 { color: #fff; font-size: 20px; margin-bottom: 22px; }
.info-list { margin: 0; font-size: 16px; }
.info-row {
  display: grid; gap: 4px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row:last-of-type { padding-bottom: 0; }
.info-list dt {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
/* Icon-Breite plus Abstand — der Wert steht unten als Einzug des <dd>. */
.info-icon { width: 21px; height: 21px; flex: 0 0 21px; }
/* 31px = Icon (21) + Abstand (10): der Wert fluchtet mit der Beschriftung. */
.info-list dd { margin: 0; padding-left: 31px; line-height: 1.5; }
.info-list dd a { display: block; }
.info-card a { color: #fff; }
.info-card a:hover { color: #fff; text-decoration: underline; }


/* ==  16  CTA-Band  ======================================================== */

.cta-band { position: relative; background: var(--black); overflow: hidden; }
.cta-band-media { position: absolute; inset: 0; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.45) 100%);
}
.cta-band .wrap {
  position: relative; z-index: 2;
  padding-block: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c9c6c4; margin: 16px 0 0; max-width: 52ch; }


/* ==  17  Footer  ========================================================== */

.footer {
  background: var(--white); color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.footer-main {
  padding-block: clamp(48px, 5.2vw, 80px);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(40px, 5.5vw, 80px);
}
.footer img.footer-logo { height: 64px; width: auto; margin-bottom: 24px; }
.footer h4 {
  color: var(--black); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 20px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.footer li { line-height: 1.45; }

/* Navigations- und Leistungslisten: kleiner Punkt in der CI-Farbe davor. */
.footer-links li { display: grid; grid-template-columns: 5px 1fr; gap: 11px; align-items: baseline; }
.footer-links li::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--orange);
  transform: translateY(-3px);
}

/* Kontaktspalte: Icons statt Punkte (Bootstrap Icons, inline). Die Zeile ohne
   Link erbt sonst das hellere --muted und fiele gegenüber den Links ab. */
.footer-contact li {
  display: grid; grid-template-columns: 16px 1fr; gap: 11px;
  align-items: start; color: var(--ink-2);
}
.footer-contact .f-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--orange); }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--orange); text-decoration: none; }
.footer address { font-style: normal; line-height: 1.55; color: var(--ink-2); }
.footer-regions { color: var(--muted-2); font-size: 14px; line-height: 1.55; margin-top: 18px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--muted-2);
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-legal .sep { color: var(--muted-2); }


/* ==  18  Rechtsseiten  ==================================================== */

.legal { padding-block: clamp(48px, 6vw, 96px); }

/* Die Inhaltsspalte steht mittig auf der Seite. Der Text darin bleibt
   linksbündig — zentrierter Fließtext liest sich in langen Texten schlecht. */
.legal .wrap { max-width: 940px; }

.legal-head { margin-bottom: clamp(32px, 4vw, 52px); }
.legal-body { font-size: 16.5px; color: var(--ink-2); }
.legal-body h2 {
  font-size: clamp(20px, 2.1vw, 26px);
  margin: clamp(38px, 4vw, 54px) 0 16px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body h3 { font-size: 18px; margin: 28px 0 10px; }
.legal-body ul { margin: 0 0 1.1em; padding-left: 22px; display: grid; gap: 7px; }
.legal-body address { font-style: normal; line-height: 1.75; margin-bottom: 1.1em; }
.legal-body .meta { color: var(--muted-2); font-size: 15px; }
.legal-body .actions--spaced { margin-top: 40px; }

.legal-toc {
  background: var(--sand); border-radius: var(--r-m);
  padding: clamp(20px, 2.4vw, 30px); margin-bottom: clamp(32px, 4vw, 48px);
}
.legal-toc h2 {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 14px; border-top: 0; padding-top: 0;
}
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 15.5px; }
.legal-toc li { margin-bottom: 7px; break-inside: avoid; }

.breadcrumb { font-size: 14px; color: var(--muted-2); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb span { padding: 0 8px; }


/* ==  18b  Nach oben  ======================================================
   Fest unten rechts, standardmäßig ausgeblendet. Das Skript setzt .is-visible,
   sobald die halbe Scrollstrecke erreicht ist. z-index bleibt unter dem
   Mobilmenü (900), damit der Button dort nicht durchscheint; zur Ebenen-
   ordnung insgesamt siehe Abschnitt 07.
   ========================================================================== */

.to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 800;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  background: var(--orange); color: #fff;
  border: 0; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s, background .2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--orange-dark); }
.to-top svg { width: 20px; height: 20px; }


/* ==  19  Animation  ======================================================= */

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-d1.is-in { transition-delay: .08s; }
.reveal-d2.is-in { transition-delay: .16s; }
.reveal-d3.is-in { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==  20  Breakpoints  ===================================================== */

@media (max-width: 1080px) {
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .step::before { display: none; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* Ab hier übernimmt das Mobilmenü. */
@media (max-width: 980px) {
  :root { --bar-h: 84px; }
  .nav { display: none; }
  .bar .btn { display: none; }
  .burger { display: flex; }
  .split, .contact { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .split-media { margin-right: 0; }
  /* Das Foto ist hochformatig angelegt, weil es auf dem Desktop die Höhe des
     Textblocks füllt. Untereinander gestapelt wäre es zu hoch: hier deshalb
     ein Querausschnitt aus der Bildmitte. */
  .media-frame img { height: auto; aspect-ratio: 4 / 3; }
  .media-frame::before { display: none; }
  .media-badge { position: static; transform: none; max-width: none; margin-top: 16px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .hero-facts ul { grid-template-columns: 1fr; gap: 12px; }

  /* Immowelt-Objektliste: Das Filterformular hat feste Mindestbreiten, die das
     Immowelt-Skript selbst setzt, und passt auf schmalen Bildschirmen nicht in
     die Breite. Statt die Seite zu verbreitern, lässt es sich hier seitlich
     wischen. Nur unter 980px (Touch-Geräte): auf dem Desktop zieht Immowelt
     Listeneinträge beim Hovern leicht über den Rand, was hier eine
     flackernde Scrollleiste auslösen würde. */
  .objects-embed { overflow-x: auto; overscroll-behavior-x: contain; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
  .adv-grid { grid-template-columns: 1fr; }
  /* Rechts kein Einzug: auf kleinen Handys blieben sonst gut 200px Textbreite. */
  .faq-answer { padding-right: 0; hyphens: auto; overflow-wrap: break-word; }
  .topbar { font-size: 13px; }
  .topbar-hours { display: none; }
  .topbar-contact { --sep-gap: 10px; }
  /* Ohne die Öffnungszeiten stehen Telefon und E-Mail mittig. */
  .topbar .wrap { justify-content: center; }
  .hero { min-height: auto; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.8) 100%);
  }
  .hero .actions .btn { width: 100%; }
  /* Der Text nimmt hier fast die ganze Breite ein, die Aufhellung muss mit. */
  .banner-media::after {
    background: radial-gradient(ellipse 95% 60% at 50% 52%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 60%, rgba(255,255,255,.1) 100%);
  }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .legal-toc ol { columns: 1; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
}

/* Sehr kleine Handys (z. B. iPhone SE 1. Gen.): Telefon und E-Mail passen
   sonst nicht mehr in eine Zeile der Topbar. */
@media (max-width: 380px) {
  .topbar { font-size: 12px; }
  .topbar-contact { --sep-gap: 8px; }
  .topbar-contact a { gap: 5px; }
  .topbar-icon { width: 12px; height: 12px; flex-basis: 12px; }
}

@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 1fr; }
}


/* ==  21  Print  =========================================================== */

@media print {
  .header, .mobile-nav, .hero-media, .banner-media, .cta-band, .burger, .form-card,
  .to-top { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 12pt; }
  a { color: #000; text-decoration: underline; }
}