/* ==========================================================================
   Räumung365 – Landingpage
   Umsetzung des Claude-Design-Entwurfs "Räumung365 Landingpage".
   Aufbau: Schriften → Tokens → Basis → Bausteine → Sektionen → Responsive
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Schriften – selbst gehostet (SIL Open Font License)
   Google liefert Montserrat und Open Sans als Variable Fonts: je Familie und
   Subset genügt eine Datei für alle Schnitte. Gebraucht werden Montserrat
   600–800 (Display) und Open Sans 400–700 (Body), je latin und latin-ext.
   Damit entfallen der Google-Fonts-Request, die zwei preconnects und der
   Google-Fonts-Abschnitt in der Datenschutzerklärung.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/open-sans-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: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/open-sans-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;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink: #0A0A0A;
  --blue: #2B4BDC;
  --blue-dark: #2242D1;
  --blue-tint: #EEF1FE;
  --blue-pale: #C9D2FA;
  --white: #FFFFFF;
  --gray-100: #F0F0F0;
  --gray-300: #D6D6D6;
  /* Rahmen von Bedienelementen: 3,04 : 1 auf Weiß, erfüllt WCAG 1.4.11 */
  --border-ui: #949494;
  --gray-500: #6B6B6B;
  --gray-600: #555555;
  --gray-700: #3D3D3D;
  --on-dark-muted: #B8B8B8;
  --on-dark-faint: #7A7A7A;
  --hairline-dark: #262626;
  --error: #B4231F;

  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
  --header-h: 80px; /* 78px Inhalt + 2px Border-Bottom */
  --logo-h: 26px;   /* Sichthöhe des Logos: Balken-Oberkante bis Grundlinie */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Die deutschen Komposita der Seite ("Verlassenschaftsraeumung",
     "Rudolfsheim-Fuenfhaus") sind auf schmalen Viewports laenger als die
     Textspalte. Ohne das hier stehen sie ueber den rechten Rand hinaus und
     die ganze Seite laesst sich seitwaerts wischen. */
  overflow-wrap: break-word;
}

a { color: var(--blue-dark); }
a:hover { color: var(--blue); }

img { max-width: 100%; display: block; }

/* Alle Symbole der Seite sind Inline-SVGs; sie erben die Farbe ihres
   Elternelements ueber stroke="currentColor". */
.icon { display: block; flex: none; }
.icon-slot { display: inline-flex; align-items: center; vertical-align: middle; }

button { font: inherit; }

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 1px;
}

/* Skip-Link: erstes Element im <body>, springt an das <main id="inhalt">.
   Vor dem Inhalt liegen 37 Header-Links – ohne ihn muesste ein Tastatur-
   oder Screenreader-Nutzer sie auf jeder Seite durchtabben (WCAG 2.4.1).
   Sichtbar wird er nur bei Fokus. */
.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: top 0.15s var(--ease);
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Wiederkehrende Bausteine ------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 84px 0; }
.section--dark { background: var(--ink); color: var(--white); }
.section--gray { background: var(--gray-100); }
.section--blue { background: var(--blue); color: var(--white); }

/* Der blaue Balken über jeder Überschrift */
.rule {
  width: 64px;
  height: 6px;
  background: var(--blue);
  margin-bottom: 20px;
}
.rule--light { background: var(--white); }
.rule--center { margin-left: auto; margin-right: auto; }

/* --- Brotkruemel-Navigation (.crumbs) -----------------------------------
   Steht auf jeder Unterseite direkt ueber dem .rule-Balken des Seitenkopfs:
   <nav class="crumbs"><ol class="crumbs__list"><li class="crumbs__item">…
   Der letzte Eintrag traegt aria-current="page" und keinen Link. Wortgleich
   steht die Kette noch einmal als BreadcrumbList-JSON-LD am Dateiende –
   beide Stellen gemeinsam aendern. Haus-Symbol und Trennwinkel kommen aus
   dem CSS, das Markup bleibt reiner Text. */
.crumbs { margin: 0 0 24px; max-width: 100%; }
.crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  background: var(--gray-100);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gray-600);
}
.crumbs__item { display: inline-flex; align-items: center; padding: 11px 0; }
.crumbs__item + .crumbs__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 11px;
  border-top: 2px solid var(--border-ui);
  border-right: 2px solid var(--border-ui);
  transform: rotate(45deg);
}
.crumbs a {
  color: var(--gray-600);
  text-decoration: none;
  transition: color 0.15s;
}
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Haus-Symbol vor „Startseite" (erster Eintrag) */
.crumbs__item:first-child a { display: inline-flex; align-items: center; gap: 7px; }
.crumbs__item:first-child a::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 1.5 11.6l1.3 1.5L4 12.1V21h6v-6h4v6h6v-8.9l1.2 1 1.3-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 1.5 11.6l1.3 1.5L4 12.1V21h6v-6h4v6h6v-8.9l1.2 1 1.3-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.crumbs__item[aria-current="page"] { color: var(--blue); }
/* Auf dunklem Grund (Rueckruf-Seite) */
.section--dark .crumbs__list { background: var(--hairline-dark); color: var(--on-dark-muted); }
.section--dark .crumbs a { color: var(--on-dark-muted); }
.section--dark .crumbs a:hover { color: var(--white); }
.section--dark .crumbs__item + .crumbs__item::before { border-color: var(--on-dark-faint); }
.section--dark .crumbs__item[aria-current="page"] { color: var(--white); }
/* Schmal: volle Breite, engere Zeilen – die Kette bricht auf zwei, drei
   Zeilen um, jede Folgezeile beginnt mit ihrem Trennwinkel. */
@media (max-width: 640px) {
  .crumbs { margin-bottom: 20px; }
  .crumbs__list { display: flex; padding: 3px 14px; font-size: 11px; }
  .crumbs__item { padding: 7px 0; }
  .crumbs__item + .crumbs__item::before { margin: 0 10px 0 9px; }
}

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0 0 12px;
  text-wrap: balance;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 42px;
  max-width: 640px;
  text-wrap: pretty;
}
.section--dark .lede,
.section--blue .lede { color: var(--on-dark-muted); }
.section--blue .lede { color: var(--blue-pale); }

/* Fliesstext in .prose steht sonst im Grau der Basisregel und waere auf
   dunklem Grund praktisch unlesbar. Die .lede bleibt ausgenommen, sie hat
   oben schon ihre eigene Farbe. */
.section--dark .prose p:not(.lede),
.section--blue .prose p:not(.lede) { color: var(--on-dark-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 16px 30px;
}
.btn--primary:hover { background: var(--blue-dark); color: var(--white); }

.btn--ink {
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 16px 30px;
}
.btn--ink:hover { background: var(--blue-dark); color: var(--white); }

.btn--phone {
  background: var(--ink);
  color: var(--white);
  font-size: 16px;
  padding: 15px 26px;
}
.btn--phone:hover { background: var(--blue-dark); color: var(--white); }

.btn--block { width: 100%; }

.note { font-size: 14px; color: var(--gray-500); }
.section--dark .note { font-size: 14.5px; color: var(--on-dark-muted); }
/* Auf dunklem Grund waere das Blau der Basisregel praktisch unlesbar. */
.section--dark .note a,
.section--blue .note a,
.section--dark .lede a,
.section--blue .lede a { color: var(--white); }

/* Bildplatzhalter – ersetzt die <image-slot>-Elemente des Entwurfs.
   Liegt kein Foto vor, bleibt die gemusterte Fläche mit Beschriftung stehen. */
.slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--gray-100);
  background-image: repeating-linear-gradient(-45deg,
    rgba(43, 75, 220, 0.08) 0 10px, transparent 10px 20px);
  overflow: hidden;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.header__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Logo: RÄUMUNG365 → RAEUMUNG365 beim Hover ------------------------- */
.logo,
.logo:hover,
.logo:focus {
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  gap: 0;
  color: var(--ink);
}
.logo__word { position: relative; display: block; height: 18px; }
.logo__bar {
  position: absolute;
  bottom: calc(100% + 2px);
  height: 6px;
  background: var(--blue);
  z-index: 1;
}
.logo__bar--left { left: 0; transition: width .32s var(--ease); width: var(--gap-start, 19px); }
.logo__bar--right { right: -15px; left: var(--gap-end, 41px); }
.logo__text {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 18px;
  letter-spacing: 0;
  display: flex;
  align-items: flex-start;
}
.logo__text > span { display: block; }
.logo__a { position: relative; }
.logo__dots {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
  opacity: 1;
  transition: opacity .18s linear;
}
.logo__dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  display: block;
}
.logo__e-wrap {
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .32s var(--ease);
  max-width: 0;
}
.logo__e { display: inline-block; }
.logo__365 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 37px;
  line-height: var(--logo-h);
  height: var(--logo-h);
  color: var(--blue);
  letter-spacing: 0;
  display: block;
}
.logo__spacer {
  display: block;
  height: 1px;
  flex: none;
  transition: width .32s var(--ease);
  width: var(--e-w, 17px);
}

.logo.is-open .logo__bar--left { width: calc(100% + 15px); }
.logo.is-open .logo__dots { opacity: 0; }
.logo.is-open .logo__e-wrap { max-width: var(--e-w, 17px); }
.logo.is-open .logo__spacer { width: 0; }

/* Footer-Variante: heller Text, minimal anderer Überhang */
.logo--footer,
.logo--footer:hover,
.logo--footer:focus { color: var(--white); }
.logo--footer .logo__bar--right { right: -14px; }
.logo--footer .logo__dots span { background: var(--white); }
.logo--footer.is-open .logo__bar--left { width: calc(100% + 14px); }

/* --- Navigation --------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
}
.nav__item { position: relative; }
.nav__link,
.nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
}
.nav__link:hover,
.nav__toggle:hover { background: var(--gray-100); color: var(--ink); }
.nav__caret { display: inline-flex; color: var(--blue); transition: transform .18s var(--ease); }
.nav__caret .icon { width: 11px; height: 11px; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 270px;
}
/* Unsichtbare Bruecke ueber den Abstand zum Button – sonst reisst der Hover ab. */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.nav__menu[hidden] { display: none; }
.nav__menu a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--gray-100); color: var(--blue-dark); }

/* --- Mega-Menue Leistungen ---------------------------------------------
   Der Wurzel-Container wird static, damit das Panel gegen .header__inner
   positioniert wird und ueber die volle Rasterbreite laufen kann. */
.nav__item--mega { position: static; }
.nav__menu--mega {
  /* Bezug ist hier .header__inner (78px), nicht der Button – deshalb muss die
     Hoehe der normalen Dropdowns (Button-Unterkante + 10px = 68px) von Hand
     nachgerechnet werden. Aendert sich die Header-Hoehe, hier mitziehen. */
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
  padding: 24px 20px 26px;
}
.nav__col { display: flex; flex-direction: column; min-width: 0; }
/* Der Titel ist ein Button, weil er auf schmalen Viewports die Spalte
   auf- und zuklappt. Auf dem Desktop ist er reine Ueberschrift – deshalb
   pointer-events: none (den tabindex setzt initNav()).
   min-height + flex-end: ein zweizeiliger Titel darf die Trennlinie
   der Nachbarspalten nicht verschieben. */
.nav__coltitle {
  display: flex;
  align-items: flex-end;
  min-height: 2.6em;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--blue);
  padding: 0 10px 10px;
  margin-bottom: 6px;
  pointer-events: none;
}
.nav__colcaret { display: none; }
.nav__collinks { display: flex; flex-direction: column; min-width: 0; }
.nav__menu--mega a {
  white-space: normal;
  font-size: 14px;
  padding: 9px 10px;
}

/* Kopf-Link auf die Hub-Seite ueber den Menueeintraegen (/leistungen bzw.
   /einsatzgebiete). Ohne ihn haengen die beiden Ebene-2-Hubs an einer Handvoll
   Links, waehrend ihre Kinder je 141 bekommen – die Hierarchie stuende auf dem
   Kopf. Sitzt als blau getoentes Band buendig am oberen Panelrand: die
   negativen Margins fressen den Innenabstand des Panels, der Text steht auf
   derselben Linie wie die Eintraege darunter (14px bzw. 20px + 10px im
   Mega-Menue). Der Pfeil kommt aus ::after, das Markup bleibt reiner Text. */
.nav__menu a.nav__hub {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -6px -6px 6px;
  padding: 12px 14px;
  background: var(--blue-tint);
  border-bottom: 1px solid var(--blue-pale);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  transition: background 0.15s, color 0.15s;
}
.nav__menu a.nav__hub::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s var(--ease);
}
.nav__menu a.nav__hub:hover { background: var(--blue); color: var(--white); text-decoration: none; }
.nav__menu a.nav__hub:hover::after { transform: translateX(3px) rotate(45deg); }
.nav__menu--mega a.nav__hub { margin: -24px -20px 14px; padding: 13px 30px; }

.header__actions { display: flex; align-items: center; gap: 18px; }
.header__phone {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
.header__phone:hover { color: var(--blue-dark); }
.header__cta {
  text-decoration: none;
  background: var(--blue);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 13px 22px;
  white-space: nowrap;
  transition: background 0.15s;
}
.header__cta:hover { background: var(--blue-dark); color: var(--white); }

/* Burger – nur auf schmalen Viewports sichtbar */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--blue);
  border: 2px solid var(--blue);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.burger:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: transform .2s var(--ease), opacity .2s linear;
}
.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); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 92% at 86% -14%, var(--blue-tint) 0%, rgba(238, 241, 254, 0) 60%),
    linear-gradient(180deg, var(--white) 0%, var(--white) 46%, #F6F7FD 100%);
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

/* Raster – liegt ueber der Farbflaeche und laeuft nach unten weich aus */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(43, 75, 220, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 75, 220, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
  pointer-events: none;
}

/* Diagonal beschnittene Farbflaeche als Buehne hinter dem Anfrageformular */
.hero::after {
  content: "";
  position: absolute;
  z-index: -3;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(178deg, var(--blue-tint) 0%, #DBE1FB 100%);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Scharfe Kante auf der Diagonale – haelt die Flaeche im Swiss-Raster */
.hero__edge {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  clip-path: polygon(18% 0, 18.32% 0, 0.32% 100%, 0 100%);
  background: var(--blue-pale);
  pointer-events: none;
}

/* Ab hier umbrechen Text und Formular untereinander (520 + 430 + Gap + Gutter);
   die Diagonale weicht dann einem ruhigen Verlauf, sonst schneidet sie quer
   durch den Inhalt. */
@media (max-width: 1070px) {
  .hero::after {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 64%;
    clip-path: none;
    background: linear-gradient(180deg, rgba(238, 241, 254, 0) 0%, var(--blue-tint) 34%, #DBE1FB 100%);
  }
  .hero__edge { display: none; }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 68px var(--gutter) 76px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.hero__copy { flex: 1 1 520px; min-width: 440px; }
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 20px;
  text-wrap: pretty;
  text-transform: uppercase;
}
.hero__text {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 26px;
  max-width: 540px;
  text-wrap: pretty;
}
.checklist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 16px;
}
.checklist li { display: flex; align-items: center; gap: 12px; }
.checklist li::before {
  content: "";
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Anfrageformular (4 Schritte) --------------------------------------- */
.quote {
  flex: 0 1 430px;
  min-width: 390px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(10, 10, 10, 0.14);
  scroll-margin-top: 96px;
}
.quote__head {
  background: var(--ink);
  padding: 18px 26px;
  position: relative;
}
.quote__stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--blue) 0 12px, var(--ink) 12px 24px);
}
.quote__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin-top: 4px;
}
.quote__sub { font-size: 13px; color: var(--on-dark-muted); margin-top: 3px; }

.quote__progress { height: 5px; background: var(--gray-100); }
.quote__progress-bar { height: 5px; background: var(--blue); transition: width 0.3s; width: 10%; }

.quote__body {
  padding: 22px 26px 26px;
  /* Feste Grundhöhe, damit die Karte zwischen den Schritten nicht springt –
     der Fehlerhinweis darf sie aber wachsen lassen. */
  min-height: 462px;
  display: flex;
  flex-direction: column;
}
.quote__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.quote__step-label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.quote__back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--gray-500);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quote__back:hover { color: var(--blue-dark); }
.quote__back[hidden] { display: none; }
.quote__step-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 14px;
}
.quote__step[hidden] { display: none; }
.quote__step--fields { display: flex; flex-direction: column; gap: 13px; flex: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.stack-9 { display: flex; flex-direction: column; gap: 9px; }

/* Auswahl-Buttons */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border-ui);
  transition: border-color 0.12s, background 0.12s;
}
.opt:hover { border-color: var(--blue); }
.opt.is-selected { background: var(--blue-tint); border-color: var(--blue); }
.opt svg { flex-shrink: 0; }

.opt--tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 14px; }
.opt--chip { justify-content: center; text-align: center; padding: 13px 6px; font-size: 13.5px; }
.opt--time { justify-content: center; flex: 1; padding: 11px 6px; font-size: 13.5px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.field input {
  font-family: var(--body);
  font-size: 15px;
  padding: 11px 12px;
  border: 2px solid var(--border-ui);
  color: var(--ink);
  background: var(--white);
}
.field input:focus { border-color: var(--blue); }

.field-group { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field-group__opts { display: flex; gap: 8px; }

.form-hint { font-size: 13px; color: var(--error); font-weight: 600; }

/* Honigtopf: aus dem Blickfeld, aber nicht display:none – manche Bots fuellen
   nur, was der Browser auch rendern wuerde. aria-hidden steht im Markup. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* DSGVO-Einwilligung: Pflichtfeld in beiden Formularen, direkt an der Stelle,
   an der die Daten erhoben werden (Art. 13 DSGVO). */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blue);
  cursor: pointer;
}
.consent a { color: inherit; }
.consent.is-missing { color: var(--error); }
.consent.is-missing input[type="checkbox"] { outline: 2px solid var(--error); outline-offset: 2px; }
.callback .consent, .section--dark .consent { color: inherit; }
.form-hint[hidden] { display: none; }

.submit {
  background: var(--blue);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 15px;
  transition: background 0.15s;
}
.submit:hover { background: var(--blue-dark); }
.submit--push { margin-top: auto; }

.done {
  text-align: center;
  margin: auto 0;
  padding: 12px 0;
  animation: done-auf 0.4s var(--ease) both;
}
.done[hidden] { display: none; }
.done__check {
  width: 52px; height: 52px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.done__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.done p { font-size: 15px; color: var(--gray-700); line-height: 1.6; margin: 0; }

/* --- Ladeanimation zwischen Absenden und Danke-Bildschirm ----------------
   Beide Formulare zeigen erst kurz diese Animation. So wird das Absenden
   sichtbar und der Danke-Text erscheint nicht im selben Lidschlag. */
.sending { text-align: center; margin: auto 0; padding: 12px 0; }
.sending[hidden] { display: none; }
.sending__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.sending__dots span {
  width: 14px;
  height: 14px;
  background: var(--blue);
  animation: sending-puls 0.9s var(--ease) infinite;
}
.sending__dots span:nth-child(2) { animation-delay: 0.15s; }
.sending__dots span:nth-child(3) { animation-delay: 0.3s; }
.sending__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}
@keyframes sending-puls {
  0%, 100% { opacity: 0.25; transform: translateY(4px); }
  40%      { opacity: 1;    transform: translateY(-4px); }
}
@keyframes done-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Trustband
   ========================================================================== */
.trustband {
  background: var(--ink);
  color: var(--white);
  border-top: 6px solid var(--blue);
}
.trustband__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
}
.stat { border-left: 3px solid var(--blue); padding-left: 18px; }
.stat__value { font-family: var(--display); font-weight: 800; font-size: 29px; }
.stat__label { font-size: 14px; color: var(--on-dark-muted); margin-top: 4px; }

/* ==========================================================================
   Leistungen
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 24px 22px;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
/* Klickbar ist ausschliesslich "Mehr erfahren" – die Karte selbst nicht.
   Angehoben wird sie trotzdem: am Zeiger beim Hover, am Touchgeraet beim
   Antippen (Klasse kommt aus initCards(), weil :hover dort nicht traegt)
   und bei Tastaturfokus auf dem Link. */
.card:focus-within,
.card.is-tapped {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--blue);
}
@media (hover: hover) {
  .card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--blue);
  }
}
.card__title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.3; }
.card__desc { font-size: 14.5px; color: var(--gray-600); line-height: 1.55; flex: 1; }
.card__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.card__more .icon { transition: transform 0.15s var(--ease); }
.card__more:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.card__more:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   Vorher / Nachher
   ========================================================================== */
.compare {
  position: relative;
  height: 520px;
  border: 2px solid var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.compare__layer { position: absolute; inset: 0; }
.compare__layer--after { clip-path: inset(0 50% 0 0); }
.compare__line {
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--blue);
  left: 50%;
  transform: translateX(-2px);
  pointer-events: none;
}
.compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.3);
}
.compare__tag {
  position: absolute;
  top: 16px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 12px;
  pointer-events: none;
}
.compare__tag--after { left: 16px; }
.compare__tag--before { right: 16px; }
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

/* ==========================================================================
   Ablauf
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.step {
  border-top: 3px solid var(--blue);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step__num { font-family: var(--display); font-weight: 800; font-size: 42px; color: var(--blue); }
.step__title { font-family: var(--display); font-weight: 700; font-size: 18px; }
.step p { font-size: 15px; color: var(--on-dark-muted); line-height: 1.6; margin: 0; }

.section__cta {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Referenzen
   ========================================================================== */
.refs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.ref {
  border: 2px solid var(--ink);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.ref__media { height: 220px; }
.ref__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ref__title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.3; }
.ref__place { font-size: 13.5px; color: var(--gray-500); margin-top: 3px; }
.ref__text { font-size: 14.5px; color: var(--gray-600); line-height: 1.55; flex: 1; }
.ref__facts {
  display: flex;
  gap: 10px;
  border-top: 2px solid var(--gray-100);
  padding-top: 14px;
}
.ref__fact { flex: 1; }
.ref__fact dt { font-size: 12.5px; color: var(--gray-500); order: 2; }
.ref__fact dd {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  color: var(--blue);
  margin: 0;
  order: 1;
}
.ref__fact { display: flex; flex-direction: column; }

/* ==========================================================================
   Kosten
   ========================================================================== */
.prose { max-width: 760px; }
.prose p { font-size: 16.5px; color: var(--gray-700); line-height: 1.7; margin: 0 0 20px; }
.bullets {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
}
.bullets li { display: flex; align-items: center; gap: 12px; }
.bullets li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--blue);
  flex-shrink: 0;
}
.inline-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Über uns
   ========================================================================== */
.split {
  display: flex;
  gap: 64px;
  align-items: center;
  flex-wrap: wrap;
}
.split__media { flex: 1 1 420px; min-width: 380px; height: 460px; }
.split__copy { flex: 1 1 460px; min-width: 400px; }
.split__copy p { font-size: 16.5px; color: var(--gray-700); line-height: 1.7; margin: 0 0 16px; }
.split__copy p:last-of-type { margin-bottom: 32px; }

.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.audience div { background: var(--gray-100); border-left: 3px solid var(--blue); padding: 16px 18px; }
.audience b { font-family: var(--display); font-weight: 700; font-size: 15.5px; display: block; }
.audience span { font-size: 13.5px; color: var(--gray-600); margin-top: 4px; display: block; }

/* ==========================================================================
   Einsatzgebiete
   ========================================================================== */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.35);
  padding: 17px 22px;
  text-decoration: none;
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  transition: background 0.15s, color 0.15s;
}
.region:hover { background: var(--white); color: var(--blue-dark); }
.region .icon { width: 17px; height: 17px; }

/* Auf hellen Sektionen (etwa #bundeslaender) waere die helle Schrift auf
   hellem Grund unsichtbar - dort dreht der Baustein die Farben um. */
.section:not(.section--blue):not(.section--dark) .region {
  background: var(--blue-tint);
  border-color: var(--blue-pale);
  color: var(--ink);
}
.section:not(.section--blue):not(.section--dark) .region:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq { border: 2px solid var(--ink); overflow: hidden; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 19px 24px;
}
.faq__q:hover { background: var(--gray-100); }
/* Plus und X sind dieselben zwei Striche wie im mobilen Menue im Header:
   zugeklappt stehen sie waag- und senkrecht als Plus, aufgeklappt dreht
   sich das Paar um 45 Grad zum Kreuz. Es wird nichts ein- oder
   ausgeblendet, die Striche drehen sich nur. */
.faq__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--blue);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .2s var(--ease);
}
.faq__icon::before { transform: translate(-50%, -50%) rotate(0deg); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(135deg); }
/* Die Huelle traegt die Animation: "auto" laesst sich nicht ueberblenden,
   darum misst site.js die Hoehe und setzt sie als Zwischenschritt. */
.faq__a {
  overflow: hidden;
  transition: height .28s var(--ease);
}
.faq__a[hidden] { display: none; }
.faq__text {
  margin: 0;
  padding: 0 24px 20px;
  font-size: 15.5px;
  color: var(--gray-700);
  line-height: 1.7;
}

/* ==========================================================================
   Rückruf
   ========================================================================== */
.callback { position: relative; }
.callback__stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--blue) 0 14px, var(--ink) 14px 28px);
}
.callback__copy { flex: 1 1 440px; min-width: 400px; }
.callback__copy p {
  font-size: 16.5px;
  color: var(--on-dark-muted);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 480px;
}
.callback__contacts { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.callback__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
}
.callback__phone:hover { color: var(--blue-pale); }
.callback__contacts a:not(.callback__phone) { color: var(--on-dark-muted); text-decoration: none; }
.callback__contacts a:not(.callback__phone):hover { color: var(--white); }

.callback__card {
  flex: 1 1 440px;
  min-width: 400px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--white);
  box-shadow: 10px 10px 0 var(--blue);
  padding: 30px 32px;
}
.callback__card-title { font-family: var(--display); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.callback__card-sub { font-size: 14px; color: var(--gray-500); margin-bottom: 20px; }
.callback__fields { display: flex; flex-direction: column; gap: 13px; }
.callback__card .done,
.callback__card .sending { padding: 26px 0; margin: 0; }
/* Nach dem Absenden behält die Karte die Höhe des Formulars – die setzt
   initCallback() in Pixeln – und zentriert Ladeanimation und Danke-Text. */
.callback__card.is-locked {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   Kostenrechner (Unterseite /kostenrechner/)
   ========================================================================== */
.pagehead__title { font-size: 42px; }

.calc {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.calc__panel {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.calc__value { color: var(--blue); font-weight: 800; white-space: nowrap; }

.calc__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.calc__opts--zwei { grid-template-columns: 1fr 1fr; }
.calc__opts--drei { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Optionen mit zweiter Zeile (Füllgrad, Wertanrechnung) */
.opt--desc { flex-direction: column; align-items: flex-start; gap: 3px; }
.opt--desc small { font-weight: 400; font-size: 12.5px; color: var(--gray-500); line-height: 1.45; }
.opt[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); }

/* Flächen-Regler: eckiger Griff, blau gefüllte Laufbahn (--fill setzt initCalc) */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 8px 0 10px;
  background: linear-gradient(to right, var(--blue) var(--fill, 22%), var(--gray-300) var(--fill, 22%));
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(10, 10, 10, 0.2);
}
.calc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(10, 10, 10, 0.2);
}
.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--gray-500);
}

/* Ergebniskarte – gleiche Anmutung wie das Anfrageformular im Hero */
.calc__result {
  flex: 0 1 400px;
  min-width: 360px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(10, 10, 10, 0.14);
}
.calc__result-head { position: relative; background: var(--ink); padding: 18px 24px 14px; }
.calc__result-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 4px;
}
.calc__result-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.calc__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 38px);
  letter-spacing: -0.5px;
  color: var(--blue);
  white-space: nowrap;
}
.calc__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 2px solid var(--gray-100);
  padding-top: 14px;
  font-size: 14px;
}
.calc__facts > div { display: flex; justify-content: space-between; gap: 16px; }
.calc__facts dt { color: var(--gray-500); flex: none; }
.calc__facts dd { margin: 0; font-weight: 700; text-align: right; }
.calc__note { font-size: 13px; color: var(--gray-500); line-height: 1.6; margin: 0; }
.calc__note--center { text-align: center; }
.calc__hinweis { font-size: 15px; color: var(--gray-700); line-height: 1.6; margin: 32px 0 0; max-width: 720px; }

.card__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  color: var(--blue);
  border-top: 2px solid var(--gray-100);
  padding-top: 12px;
}

/* Der Ablauf-Baustein steht hier auf hellem Grund statt im Dunkelblock */
.steps--light .step p { color: var(--gray-600); }

@media (max-width: 980px) {
  .calc__result { position: static; flex-basis: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .pagehead__title { font-size: 30px; }
  .calc { gap: 36px; }
  .calc__opts--zwei { grid-template-columns: 1fr; }
  .calc__result { box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.14); }
}

/* ==========================================================================
   Karriere (/karriere/)
   Eigene Bausteine gibt es hier keine – nur Abwandlungen bestehender.
   ========================================================================== */

/* Sechs Kacheln statt vier, und sie stehen ueber die volle Breite statt in
   der Spalte eines Splits. Unter 560px zieht die Grundregel weiter auf
   eine Spalte zusammen. */
.audience--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Stellenart ueber dem Kartentitel – kleiner Vorspann, kein zweiter Titel. */
.job__meta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: -2px;
}

.karriere__hinweis { font-size: 15px; color: var(--gray-700); line-height: 1.6; margin: 32px 0 0; max-width: 760px; }
/* Derselbe Hinweis steht auf den Regionalseiten auch in blauen und dunklen
   Sektionen - dort waeren Grau und Blau der Basisregel unlesbar. */
.section--dark .karriere__hinweis,
.section--blue .karriere__hinweis { color: var(--on-dark-muted); }
.section--dark .karriere__hinweis a,
.section--blue .karriere__hinweis a { color: var(--white); }

/* ==========================================================================
   Häufige Fragen (/haeufige-fragen)
   Eigene Bausteine gibt es hier nur zwei – der Rest ist die FAQ von der
   Startseite, mehrfach verwendet.
   ========================================================================== */

/* Sprungmarken zu den Themenblöcken. Dieselbe harte Kante wie die
   Frageleisten darunter, nur eine Nummer kleiner. */
.faqnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.faqnav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--ink);
  padding: 11px 17px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.faqnav a:hover { background: var(--ink); color: var(--white); }
.faqnav .icon { width: 15px; height: 15px; color: var(--blue); }
.faqnav a:hover .icon { color: var(--white); }

/* Der Header steht sticky – ohne diesen Abstand rutscht die Überschrift
   des angesprungenen Blocks darunter. Gleicher Wert wie beim Formular. */
.faq-block { scroll-margin-top: 96px; }

/* Auf grauem Grund faellt der Hover der Frageleiste mit dem Sektionsgrund
   zusammen. Dort uebernimmt der blaue Ton. */
.section--gray .faq__q:hover { background: var(--blue-tint); }

/* ==========================================================================
   Depex (/depex)
   Markenhistorie. Zwei Bausteine, die es sonst nirgends gibt: ein breites
   Banner ueber die volle Spaltenbreite und ein Split-Bild mit Bildunterschrift.
   ========================================================================== */

/* Querformatiger Streifen (1680 x 310) – wie alle Bildflaechen mit harter
   Kante, aber ohne feste Hoehe: das Seitenverhaeltnis gibt sie vor. */
.depex-band {
  margin: 0;
  border: 2px solid var(--ink);
  overflow: hidden;
  line-height: 0;
}
.depex-band img { width: 100%; height: auto; }

/* Die Split-Bildspalte hat sonst eine feste Hoehe. Steht eine Bildunterschrift
   darunter, muss die Spalte mitwachsen – die Hoehe wandert auf den .slot. */
.split__media--figure { height: auto; margin: 0; }
.split__media--figure .slot { height: 460px; }

.figcap {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.55;
  margin-top: 12px;
  text-wrap: pretty;
}
.section--dark .figcap,
.section--blue .figcap { color: var(--on-dark-muted); }

/* ==========================================================================
   Bezirks-Grid (Sektion #bezirke)
   Der DOWN-Block auf den vier "Leistung x Niederoesterreich"-Seiten und die
   Bezirksliste auf /einsatzgebiete/niederoesterreich. Gruppiert die 21
   NOE-Bezirksseiten nach Landesviertel; die Kacheln selbst sind der
   bestehende .regions/.region-Baustein, hier kommt nur die
   Zwischenueberschrift ueber jeder Gruppe dazu.
   ========================================================================== */
.bezirke__gruppe + .bezirke__gruppe { margin-top: 34px; }

.bezirke__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin: 0 0 14px;
}

/* Auf dunklen und blauen Sektionen waere Blau auf Blau nicht lesbar. */
.section--dark .bezirke__titel,
.section--blue .bezirke__titel { color: var(--white); }

@media (max-width: 560px) {
  .bezirke__gruppe + .bezirke__gruppe { margin-top: 26px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--ink);
  color: var(--on-dark-muted);
  border-top: 1px solid var(--hairline-dark);
}
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px var(--gutter) 32px;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer__about { font-size: 14px; line-height: 1.7; margin: 14px 0 0; max-width: 280px; }
.footer__contact {
  margin-top: 18px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__contact a { color: var(--white); text-decoration: none; font-weight: 600; }
.footer__contact a:hover { color: var(--blue-pale); }
.footer__head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer__links a { color: var(--on-dark-muted); text-decoration: none; }
.footer__links a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid var(--hairline-dark);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--on-dark-faint);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--on-dark-faint); text-decoration: none; }
.footer__legal a:hover { color: var(--white); }

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz, AGB)
   ========================================================================== */
.legal { padding: 72px 0 96px; }
.legal__wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.legal__sub { font-size: 15px; color: var(--gray-500); margin: 0; }
.legal__body { margin-top: 44px; }
.legal__body h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  margin: 44px 0 12px;
  padding-top: 24px;
  border-top: 2px solid var(--gray-100);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal__body h3 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 24px 0 8px; }
.legal__body p { font-size: 16px; color: var(--gray-700); line-height: 1.75; margin: 0 0 14px; }
.legal__body a { overflow-wrap: anywhere; }
/* Eigene Liste statt .bullets: Rechtstext-Punkte laufen oft über mehrere
   Zeilen, darum sitzt das Quadrat oben an der ersten Zeile statt mittig. */
.legal__body ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15.5px;
  color: var(--gray-700);
  line-height: 1.6;
}
.legal__body li { display: flex; gap: 12px; }
.legal__body li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--blue);
  flex: none;
  margin-top: 7px;
}
/* Stichwort-Spalte + Wert, z. B. die Unternehmensangaben im Impressum */
.legal-facts {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--ink);
  margin: 0 0 16px;
  font-size: 15.5px;
}
.legal-facts td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--gray-300);
  vertical-align: top;
  color: var(--gray-700);
  line-height: 1.55;
}
.legal-facts tr:last-child td { border-bottom: none; }
.legal-facts td:first-child {
  width: 230px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  color: var(--ink);
  background: var(--gray-100);
}
/* Noch offene Angaben: bewusst auffaellig, damit nichts davon unbemerkt
   live geht. Nach dem Eintragen der echten Daten Klasse samt Stil loeschen. */
.legal__todo {
  background: var(--blue-tint);
  outline: 1px dashed var(--blue);
  outline-offset: 1px;
  padding: 0 4px;
}
.legal__updated { margin-top: 40px; font-size: 13.5px; color: var(--gray-500); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1160px) {
  .header__phone { display: none; }
}

/* Ab hier klappt die Navigation in ein Panel */
@media (max-width: 980px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .burger { display: flex; }
  /* Das Panel fuellt unterhalb des Headers den kompletten Viewport – der
     Burger bleibt als Schliessen-Kreuz sichtbar. */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: none;
    padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: none;
    animation: nav-auf .22s var(--ease);
  }
  /* Solange das Panel offen ist, scrollt nur das Panel, nicht die Seite. */
  body.nav-offen { overflow: hidden; }
  .nav__link,
  .nav__toggle {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    /* Kein seitliches Padding: die Caret-Box schliesst rechts exakt mit
       der Burger-Box darueber ab. */
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-300);
    font-size: 16px;
    font-weight: 700;
  }
  .nav__link:hover,
  .nav__toggle:hover { background: none; }
  /* Caret sitzt in einer Box, die exakt die Masse der Burger-Box hat
     (34 x --logo-h) – die beiden stehen uebereinander in einer Flucht. */
  .nav__caret {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: var(--logo-h);
    color: var(--blue);
    background: var(--blue-tint);
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  /* Die gefuellte Box soll nicht sichtbar mitrotieren – bewegt werden nur
     die zwei Striche darin. Darum die Drehung vom Desktop zuruecknehmen. */
  .nav__toggle[aria-expanded="true"] .nav__caret {
    transform: none;
    background: var(--blue);
    color: var(--white);
  }
  /* Pfeil und X sind auf schmalen Viewports ein und dieselben zwei Striche –
     genau wie im Burger daneben. Zugeklappt stehen sie als Winkel mit der
     Spitze nach unten, aufgeklappt fahren sie in die Mitte, auf volle Laenge
     und stehen als Kreuz. Es wird nichts ein- oder ausgeblendet: die zwei
     Striche wandern hin und wieder zurueck. Das SVG traegt den Pfeil nur
     noch am Desktop. */
  .nav__caret .icon,
  .nav__colcaret .icon { display: none; }
  .nav__caret::before,
  .nav__caret::after,
  .nav__colcaret::before,
  .nav__colcaret::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .2s var(--ease);
  }
  /* Zugeklappt: Winkel. Die halbe Laenge kommt ueber scaleX, damit Anfang
     und Ziel dieselbe Kette aus Transform-Funktionen haben – nur so laufen
     die beiden Zustaende sauber ineinander. */
  .nav__caret::before,
  .nav__colcaret::before {
    transform: translate(-50%, -50%) translateX(-2.8px) rotate(45deg) scaleX(.5);
  }
  .nav__caret::after,
  .nav__colcaret::after {
    transform: translate(-50%, -50%) translateX(2.8px) rotate(-45deg) scaleX(.5);
  }
  /* Aufgeklappt: Kreuz, mittig und in voller Laenge. */
  .nav__toggle[aria-expanded="true"] .nav__caret::before,
  .nav__col.is-open .nav__colcaret::before {
    transform: translate(-50%, -50%) translateX(0) rotate(45deg) scaleX(1);
  }
  .nav__toggle[aria-expanded="true"] .nav__caret::after,
  .nav__col.is-open .nav__colcaret::after {
    transform: translate(-50%, -50%) translateX(0) rotate(-45deg) scaleX(1);
  }
  /* Offene Untermenues: ruhiger weisser Block mit blauer Akzentkante,
     eingerueckt unter dem Menuepunkt */
  .nav__menu {
    position: static;
    border: none;
    border-left: 2px solid var(--blue);
    box-shadow: none;
    background: none;
    margin: 0 0 6px;
    padding: 2px 0 2px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Faehrt genauso auf wie das Panel selbst, wenn der Burger es oeffnet. */
    animation: nav-auf .22s var(--ease);
  }
  .nav__menu[hidden] { display: none; }
  .nav__menu::before { display: none; }
  .nav__menu a {
    padding: 12px 0;
    white-space: normal;
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-100);
  }
  .nav__menu a:active { color: var(--ink); }
  .nav__menu a:last-child { border-bottom: none; }
  .nav__menu a:hover { background: none; color: var(--ink); }
  .nav__menu--mega { display: block; padding: 2px 0 2px 16px; }
  /* Im Burger-Panel ist der Hub-Link ein Eintrag wie jeder andere – Band,
     Farbe und die negativen Margins aus dem Desktop-Stil fallen weg. */
  .nav__menu a.nav__hub,
  .nav__menu--mega a.nav__hub { margin: 0; padding: 14px 0; background: none; border-bottom: 1px solid var(--gray-100); }
  /* Der Pfeil sitzt sonst mit seinen 7px buendig am rechten Rand, waehrend
     .nav__caret und .nav__colcaret ihren Strich in der Mitte einer 34px
     breiten Box tragen. Der Abstand rueckt die Pfeilmitte auf dieselben
     17px vom Rand – alle Pfeile im Panel stehen damit in einer Flucht. */
  .nav__menu a.nav__hub::after { margin-right: 13.5px; }
  .nav__menu a.nav__hub:hover { background: none; color: var(--blue-dark); }
  .nav__col { margin-bottom: 0; }
  .nav__coltitle {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    font-size: 13px;
    padding: 14px 0;
    margin-bottom: 0;
    color: var(--ink);
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    pointer-events: auto;
  }
  .nav__col:last-child .nav__coltitle { border-bottom: none; }
  .nav__col.is-open .nav__coltitle { border-bottom-color: transparent; }
  /* Gleiche Boxbreite wie .nav__caret: so stehen die Pfeile der Spalten
     exakt unter dem Pfeil des Hauptpunktes, auf einer senkrechten Linie. */
  .nav__colcaret {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: var(--logo-h);
    color: var(--blue);
  }
  /* Die Links der vier Spalten stehen ohne eigene Kante – sonst laufen
     zwei senkrechte Striche nebeneinander. */
  .nav__collinks {
    display: none;
    padding: 0 0 10px 14px;
    border-left: none;
    margin-bottom: 4px;
  }
  .nav__col.is-open .nav__collinks { display: flex; animation: nav-auf .22s var(--ease); }
  .nav__collinks a { border-bottom: none; padding: 10px 0; }
  .nav.nav--closed { display: none; }
  /* Telefonnummer als grosser Text (kein Button) plus Anfragen-Button –
     beides steht direkt unter dem letzten Menuepunkt. */
  .nav__phone {
    display: block;
    margin-top: 0;
    padding: 28px 0 0;
    background: none;
    color: var(--ink);
    text-decoration: none;
    text-align: left;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.5px;
  }
  .nav__phone:hover { background: none; color: var(--blue); }
  .nav__cta {
    display: block;
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    background: var(--blue);
    color: var(--white);
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .nav__cta:hover { background: var(--blue-dark); color: var(--white); }
  .header__cta { display: none; }

  /* Telefon- und Menue-Box sitzen exakt auf Logohoehe und schliessen
     buendig mit dem Gutter ab (kein Ueberhang mehr nach rechts). */
  .header__inner { gap: 14px; }
  .header__actions { gap: 8px; }
  .burger {
    position: relative;
    flex: none;
    width: 34px;
    height: var(--logo-h);
    padding: 0;
  }
  /* Sichtbare Box bleibt klein, die Tippflaeche bleibt 44px hoch. */
  .burger::after {
    content: "";
    position: absolute;
    inset: -9px -4px;
  }
  .burger { gap: 4px; }
  .burger span { width: 16px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (min-width: 981px) {
  .nav__phone,
  .nav__cta { display: none; }
}

@keyframes nav-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .section { padding: 64px 0; }
  /* Ab hier wird die Textspalte schmaler als die langen Komposita der Seite
     ("Verlassenschaftsraeumung", "Rudolfsheim-Fuenfhaus"): Silbentrennung
     nach html lang="de-AT". Ohne sie stehen die Ueberschriften ueber den
     rechten Rand hinaus und die ganze Seite laesst sich seitwaerts wischen.
     Am Desktop bleibt es beim ungetrennten Satz. */
  .h2 { font-size: 30px; -webkit-hyphens: auto; hyphens: auto; }
  .hero__inner { padding: 48px var(--gutter) 56px; gap: 40px; }
  .hero__copy { flex-basis: 100%; min-width: 0; }
  .hero__title { font-size: 38px; letter-spacing: -0.5px; }
  .hero__text { font-size: 17px; }
  .quote { flex-basis: 100%; min-width: 0; box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.14); }
  .split { gap: 36px; }
  .split__media { flex-basis: 100%; min-width: 0; height: 320px; }
  .split__media--figure { height: auto; }
  .split__media--figure .slot { height: 320px; }
  .split__copy { flex-basis: 100%; min-width: 0; }
  .callback__copy,
  .callback__card { flex-basis: 100%; min-width: 0; }
  .callback__card { box-shadow: 6px 6px 0 var(--blue); padding: 26px 22px; }
  .compare { height: 380px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Sehr schmale Androids (360px): Boxen minimal enger, damit sie buendig
   im Gutter bleiben statt ueber den Rand zu laufen. */
@media (max-width: 374px) {
  .header__inner { gap: 12px; }
  .header__actions { gap: 6px; }
  .burger,
  .nav__caret,
  .nav__colcaret { width: 30px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .hero__title { font-size: 31px; }
  .h2 { font-size: 26px; }
  .lede, .prose p { font-size: 16px; }
  .quote__body { padding: 20px 18px 22px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .audience { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .footer__about { max-width: none; }
  .compare { height: 300px; }
  .ref__media { height: 190px; }
  .btn--primary, .btn--ink { width: 100%; }
  .section__cta, .inline-actions { gap: 14px; }
  /* Stichwort-Spalte rutscht als Zeile ueber den Wert */
  .legal-facts td { display: block; }
  .legal-facts td:first-child { width: auto; padding-bottom: 6px; border-bottom: none; }
  .legal-facts td:last-child { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Seite nicht gefunden (/404.html)
   Ein einziger eigener Baustein: die grosse Fehlernummer ueber der
   Ueberschrift. Alles andere sind bestehende Bausteine.
   ========================================================================== */
.notfound__code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--blue);
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .notfound__code { font-size: 80px; letter-spacing: -2px; }
}