/* =========================================================================
   Immobilienberatung Hoffmann — erzeugt von build.mjs, nicht direkt ändern.
   Quelle: src/css/ (13 Module)
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-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.css ================================================= */
/* =========================================================================
   01 · Design-Tokens
   Alle Farben, Größen, Abstände und Zeiten an einer Stelle.
   Nichts im übrigen Stylesheet setzt Werte direkt.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------- Markenfarben
     Dunkel- und Hellblau stammen unverändert aus dem Original-Logo.
     Die Zwischentöne sind daraus abgeleitet, damit Verläufe und
     Hover-Zustände nicht aus der Marke herausfallen. */
  --brand:      #166394;
  --brand-tief: #0f4d76;   /* gedrückter Zustand, dunkle Flächen */
  --brand-hell: #1b76ae;   /* Hover */
  --sky:        #66b0df;
  --sky-400:    #86c2e7;
  --sky-300:    #9ecdec;
  --sky-100:    #d9ebf8;
  --sky-50:     #eff6fc;

  /* Tiefblau für Aussagesektionen. Bewusst sehr dunkel und leicht entsättigt,
     damit Fotos und Weißraum daneben nicht kippen. */
  --navy-900:   #061622;
  --navy-800:   #0a2436;
  --navy-700:   #0e3450;

  /* ------------------------------------------------------------- Neutrale
     Leichter Blaustich in allen Grautönen — wirkt technischer und passt
     zur Marke, statt daneben schmutzig auszusehen. */
  --ink:        #0b1a26;   /* Überschriften */
  --ink-soft:   #2f4354;   /* Fließtext, 9,9:1 auf Weiß */
  --muted:      #5a6e80;   /* Sekundärtext */
  --muted-2:    #607283;   /* Kleinstlabels, WCAG-AA-geprüft */
  --line:       #e4eaf0;   /* Hauptlinie */
  --line-stark: #cfd9e2;   /* betonte Linie */
  --line-2:     #f0f4f7;   /* kaum sichtbare Trennung */
  --paper:      #ffffff;
  --paper-2:    #f6f9fb;   /* Sektionswechsel */
  --paper-3:    #eef3f7;   /* Bildplatzhalter, Hover-Flächen */

  /* ---------------------------------------------------------- Typografie */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Skalensprung bewusst groß: die Hero-Zeile ist deutlich größer als der
     Fließtext. Erst dieser Kontrast erzeugt den editorialen Eindruck; eine
     flache Skala wirkt immer nach Vorlage.
     Obergrenze am 07.08. auf Kundenwunsch von 4,75rem (76px) auf 4,15rem
     (66px) gesenkt — bei 1440–1920px wirkte die Zeile zu dominant im
     Verhältnis zum restlichen Hero-Bereich. Untergrenze und Kurvenverlauf
     bleiben nahezu unverändert, damit Mobilgeräte unberührt bleiben und die
     Größe nicht abrupt, sondern weiterhin harmonisch ausläuft. */
  --fs-display: clamp(2.35rem, 1.4rem + 3.6vw, 4.15rem);
  --fs-h1:      clamp(2.15rem, 1.4rem  + 3.2vw, 3.6rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.3vw, 2.85rem);
  --fs-h3:      clamp(1.22rem, 1.1rem  + 0.55vw, 1.5rem);
  --fs-lead:    clamp(1.06rem, 1rem    + 0.38vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.8125rem;

  --lh-display: 1.03;
  --lh-heading: 1.14;
  --lh-body:    1.74;

  --ls-display: -0.035em;
  --ls-heading: -0.026em;
  --ls-label:   0.12em;

  /* ---------------------------------------------------------- Kopfzeile */
  --header-h:       88px;
  --header-h-stuck: 68px;

  /* ------------------------------------------------------ Raster & Rhythmus
     Ein durchgehender Abstands-Rhythmus statt frei gewählter Werte.
     Sektionen atmen deutlich mehr als zuvor — Weißraum ist das billigste
     und wirksamste Mittel für einen hochwertigen Eindruck. */
  --wrap:        1280px;
  --wrap-text:   min(100%, 68ch);
  --wrap-narrow: 880px;
  --gutter:      clamp(1.25rem, 1rem + 2.2vw, 3rem);

  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --section:       clamp(5rem, 3rem + 8vw, 10rem);
  --section-tight: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);

  --radius:    5px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* ------------------------------------------------------------ Tiefe
     Sehr zurückhaltend. Premium-Auftritte arbeiten mit Haarlinien und
     Flächenkontrast, nicht mit Schlagschatten auf jedem Element. */
  --shadow-sm: 0 1px 2px rgba(6, 22, 34, .05);
  --shadow-md: 0 14px 34px -14px rgba(6, 22, 34, .18), 0 2px 6px rgba(6, 22, 34, .04);
  --shadow-lg: 0 36px 80px -32px rgba(6, 22, 34, .32), 0 4px 14px rgba(6, 22, 34, .05);
  --shadow-bild: 0 40px 90px -40px rgba(6, 22, 34, .45);

  /* ------------------------------------------------------------ Bewegung
     Langer, weicher Ausklang. Schnelle oder federnde Kurven wirken
     verspielt — hier soll alles ruhig und kontrolliert erscheinen. */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-aus:  cubic-bezier(.16, 1, .3, 1);
  --t-schnell: .18s;
  --t-normal:  .32s;
  --t-ruhig:   .7s;
}

/* ===== 02-base.css =================================================== */
/* =========================================================================
   02 · Grundlagen — Reset, Dokument, Grundtypografie
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele dürfen nicht unter der klebenden Kopfzeile landen */
  scroll-padding-top: calc(var(--header-h-stuck) + 2rem);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* cv05/cv11: einstöckiges g und offene Ziffern — ruhiger im Fließtext.
     ss01: gerade Anführungszeichen aus. */
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
  font-variant-numeric: proportional-nums;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* ---------------------------------------------------------- Überschriften */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
  /* Deutsche Komposita: Trennung senkt zugleich die min-content-Breite.
     Zusätzlich kappen alle Raster ihre Spuren mit minmax(0, …) — erst beide
     Maßnahmen zusammen schließen den Überlauf auf schmalen Geräten sicher aus. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.018em; line-height: 1.3; }

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

strong, b { font-weight: 600; color: var(--ink); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hell); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

code {
  font-family: var(--mono);
  font-size: .9em;
  padding: .1em .35em;
  border-radius: 3px;
  background: var(--paper-3);
}

/* ------------------------------------------------------------- Bedienung */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--sky-100); color: var(--navy-800); }

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  padding: .75rem 1.15rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: top var(--t-schnell) var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== 03-layout.css ================================================= */
/* =========================================================================
   03 · Layout — Container, Sektionen, Sektionsköpfe, Raster
   ========================================================================= */

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

/* Volle Fensterbreite innerhalb eines Containers ausbrechen.
   Grundlage für Bilder und Bänder, die bis zum Rand laufen. */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.section { position: relative; padding-block: var(--section); }
.section--tight  { padding-block: var(--section-tight); }
.section--paper2 { background: var(--paper-2); }
.section--line   { border-top: 1px solid var(--line); }
.section--flush-top { padding-top: 0; }

/* ------------------------------------------------------------ Kleinlabel
   Kein Flexcontainer: als nowrap-Flexbox konnte der Text nicht umbrechen und
   zwang das Raster auf schmalen Geräten über die Fensterbreite hinaus.

   Schriftwahl (07.08. erneut geprüft, siehe CHANGELOG.md): IBM Plex Mono
   bleibt bewusst erhalten. Es ist nicht nur die Eyebrow-Schrift, sondern das
   durchgängige Kennzeichen aller Kleinstlabels im System – Ablaufschritte
   (.step__n), Fußzeilen-Spaltentitel (.footer-titel), Kartennummern (.num),
   Kontakt-Feldbezeichnungen. Ein Wechsel auf die serifenlose Schrift nur an
   dieser einen Stelle hätte eine neue Inkonsistenz erzeugt, wo vorher keine
   war. Getestet wurden vier Varianten (Mono/Sans × Tracking eng/weit);
   gewählt wurde eine ruhigere Abstufung derselben Mono-Schrift – 13px statt
   12px, 0,12em Laufweite statt 0,18em. Die vorige Einstellung wirkte auf
   längeren Phrasen wie „Immobilien- und Sachverständigenbüro“ zerdehnt; die
   neue liest sich als zusammenhängende Phrase, behält aber den technischen,
   präzisen Charakter, der zur Gutachter-Marke passt. Wirkt sitesweit, auch
   auf .footer-titel, das denselben Tokenpaar (--fs-label / --ls-label)
   verwendet. */
.eyebrow {
  display: block;
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: .7rem;
  vertical-align: middle;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center,
.section-head--center .eyebrow { text-align: center; }

/* ------------------------------------------------------- Sektionskopf */
.section-head {
  max-width: 58ch;
  margin-bottom: clamp(2.75rem, 1.5rem + 3.5vw, 4.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > h2 + p { margin-top: var(--sp-6); }

/* Kopf mit rechtsbündigem Zusatz (Fließtext oder Aktion) */
.section-head--geteilt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  max-width: none;
}
@media (max-width: 860px) {
  .section-head--geteilt { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--muted);
}
.lead--stark { color: var(--ink-soft); }

/* --------------------------------------------------------- Textspalten */
.prose { max-width: var(--wrap-text); }

/* Zweispaltiger Textblock: schmale Überschrift, breiter Fließtext */
.duo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4.5vw, 5.5rem);
}
@media (max-width: 880px) { .duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }

/* -------------------------------------------------------- Bild + Text */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.split--narrowText { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }

@media (max-width: 880px) {
  .split, .split--narrowText { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .split--reverse .split__media { order: 0; }
}

/* ------------------------------------------------------------ Haarlinie */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* ===== 04-buttons.css ================================================ */
/* =========================================================================
   04 · Schaltflächen und Textlinks

   Gestaltungsprinzip: Ein Button verändert beim Überfahren nicht einfach
   seine Farbe, sondern reagiert in mehreren Ebenen gleichzeitig — Fläche,
   Tiefe und Pfeil. Diese kleine Choreografie ist der Unterschied zwischen
   „funktioniert" und „fühlt sich wertig an".
   ========================================================================= */

.btn {
  --btn-bg:   var(--brand);
  --btn-fg:   #fff;
  --btn-bd:   var(--brand);
  --btn-glanz: rgba(255, 255, 255, .16);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1rem 1.7rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .004em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease),
              color var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease),
              box-shadow var(--t-normal) var(--ease);
}

/* Sehr feiner Lichtverlauf von oben — gibt der Fläche Materialität,
   ohne als Verlauf aufzufallen. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--btn-glanz), transparent 62%);
  opacity: .9;
  transition: opacity var(--t-normal) var(--ease);
}

.btn:hover {
  --btn-bg: var(--brand-hell);
  --btn-bd: var(--brand-hell);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Pfeil gleitet mit und lässt eine Spur frei */
.btn .ic { width: 17px; height: 17px; flex: none; transition: transform var(--t-normal) var(--ease); }
.btn:hover .ic { transform: translateX(4px); }

/* ------------------------------------------------------------- Varianten */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-stark);
  --btn-glanz: transparent;
}
.btn--ghost:hover {
  --btn-bg: var(--paper);
  --btn-bd: var(--brand);
  color: var(--brand);
}

.btn--onDark {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-bd: #fff;
  --btn-glanz: transparent;
}
.btn--onDark:hover { --btn-bg: var(--sky-50); --btn-bd: var(--sky-50); color: var(--navy-900); }

.btn--onDarkGhost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .28);
  --btn-glanz: transparent;
}
.btn--onDarkGhost:hover {
  --btn-bg: rgba(255, 255, 255, .09);
  --btn-bd: rgba(255, 255, 255, .55);
  color: #fff;
}

.btn--lg { padding: 1.15rem 2.1rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .55; pointer-events: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}

/* ------------------------------------------------------------ Pfeillink
   Der Pfeil wandert, die Unterstreichung wird von links gezeichnet. */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand);
}
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-normal) var(--ease);
}
.arrow-link:hover::after { transform: scaleX(1); transform-origin: left; }
.arrow-link .ic {
  width: 16px; height: 16px;
  transition: transform var(--t-normal) var(--ease);
}
.arrow-link:hover .ic { transform: translateX(4px); }

/* Textlink im Fließtext */
.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-normal) var(--ease);
}
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ===== 05-header.css ================================================= */
/* =========================================================================
   05 · Kopfzeile und Navigation
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-normal) var(--ease),
              box-shadow var(--t-normal) var(--ease),
              background var(--t-normal) var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(6, 22, 34, .05);
  --header-h: var(--header-h-stuck);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
  transition: min-height var(--t-normal) var(--ease);
}

/* ------------------------------------------------------------ Wortmarke */
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
  color: inherit;
}
.brand img {
  width: auto;
  height: 42px;
  transition: height var(--t-normal) var(--ease);
}
.site-header.is-stuck .brand img { height: 34px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b {
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color var(--t-normal) var(--ease);
}
.brand-text span {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.brand:hover .brand-text b { color: var(--sky); }

/* ----------------------------------------------------------- Navigation */
.nav { display: flex; align-items: center; gap: .15rem; }

.nav a {
  position: relative;
  padding: .6rem .95rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--t-schnell) var(--ease);
}
/* Unterstreichung wächst aus der Mitte — ruhiger als von links */
.nav a::after {
  content: "";
  position: absolute;
  left: .95rem; right: .95rem; bottom: .3rem;
  height: 1.5px;
  border-radius: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform var(--t-normal) var(--ease);
}
.nav a:hover { color: var(--brand); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brand); }

/* Der CTA bleibt Button und wird nicht als Navigationslink eingefärbt */
.nav a.btn { color: var(--btn-fg); padding: .85rem 1.5rem; margin-left: var(--sp-4); }
.nav a.btn::after { display: none; }

/* -------------------------------------------------------- Menüschalter */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line-stark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-schnell) var(--ease), color var(--t-schnell) var(--ease);
}
.nav-toggle:hover { border-color: var(--brand); color: var(--brand); }
.nav-toggle .ic { width: 20px; height: 20px; }
.nav-toggle .ic--close { display: none; }
.nav-toggle[aria-expanded="true"] .ic--open { display: none; }
.nav-toggle[aria-expanded="true"] .ic--close { display: block; }

/* ===================================================== Mobil: Vollbild
   Statt eines kurzen Dropdowns übernimmt das Menü die ganze Fläche.
   Das wirkt entschiedener, gibt den Zielen Luft und vermeidet die Frage,
   wie weit das Panel reichen soll. */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }

  /* WICHTIG: backdrop-filter erzeugt einen neuen Bezugsrahmen für
     position:fixed-Nachfahren. Mit aktivem Filter bezog das Menü seine
     Kanten auf die 88 px hohe Kopfzeile statt auf das Fenster — es war
     dadurch nur 72 px hoch, und seine Einträge lagen ausserhalb der eigenen
     Box und damit ausserhalb der Klickfläche.
     Auf schmalen Geräten ist die Kopfzeile deshalb deckend statt durchscheinend;
     bei geöffnetem Vollbildmenü wäre die Transparenz ohnehin wirkungslos. */
  .site-header,
  .site-header.is-stuck {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h-aktuell, var(--header-h)) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) var(--sp-12);
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-normal) var(--ease),
                transform var(--t-normal) var(--ease),
                visibility var(--t-normal);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav a {
    padding: 1.15rem .25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--brand); }

  /* Einträge laufen nacheinander ein, sobald das Menü offen ist */
  .nav.is-open a {
    animation: nav-ein .5s var(--ease-aus) backwards;
  }
  .nav.is-open a:nth-child(1) { animation-delay: .04s; }
  .nav.is-open a:nth-child(2) { animation-delay: .09s; }
  .nav.is-open a:nth-child(3) { animation-delay: .14s; }
  .nav.is-open a:nth-child(4) { animation-delay: .19s; }
  .nav.is-open a:nth-child(5) { animation-delay: .26s; }

  .nav a.btn {
    margin: var(--sp-8) 0 0;
    padding: 1.15rem 2rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    font-size: var(--fs-body);
    justify-content: center;
    color: #fff;
  }
}

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

/* Seite scrollt nicht hinter dem offenen Menü */
body.nav-offen { overflow: hidden; }

/* ===== 06-hero.css =================================================== */
/* =========================================================================
   06 · Hero

   Aufbau: Die Überschrift läuft über die volle Containerbreite, erst darunter
   teilt sich die Fläche in Text und Bild. Grund: In einer halbbreiten Spalte
   lässt sich keine große Schrift setzen, ohne dass Sätze mitten im Wort
   umbrechen. Genau diese Größe erzeugt aber den editorialen Eindruck.
   Das Bild läuft rechts bis zum Fensterrand — der angeschnittene Rand wirkt
   großzügig und nimmt der Seite das Kastenhafte.
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) 0;
}

/* Weiche Farbfelder im Hintergrund. Sehr niedrige Deckkraft: sie sollen
   Tiefe andeuten, nicht als Effekt auffallen. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 820px; height: 820px;
  top: -420px; right: -220px;
  background: radial-gradient(circle, rgba(102, 176, 223, .26) 0%, rgba(102, 176, 223, 0) 66%);
}
.hero::after {
  width: 640px; height: 640px;
  bottom: -340px; left: -260px;
  background: radial-gradient(circle, rgba(22, 99, 148, .1) 0%, rgba(22, 99, 148, 0) 68%);
}

.hero > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Überschrift */
.hero h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  /* 09.08.: hyphens:manual + manuelle ­-Trennstellen im Markup (statt auto) —
     bei sehr schmalen Viewports (320–375px) ist „Entscheidungen" allein breiter
     als die verfügbare Zeile; ohne Trennhilfe bricht der Browser dann mitten im
     Wort OHNE Bindestrich (overflow-wrap:break-word greift trotzdem).
     hyphens:auto wäre die naheliegende Lösung, aber die automatische
     Worttrennung ist in Chromium ohne Sprach-Wörterbuch nicht zuverlässig
     verfügbar — daher lieber feste, geprüfte Trennstellen per ­ setzen.
     Die Breitenbegrenzung steht bewusst hier und nicht am Elternelement:
     `ch` bezieht sich auf die Schriftgröße des Elements selbst. Am Elternteil
     mit Fließtextgröße gesetzt, ergäbe 20ch nur rund 170 px — die Überschrift
     bräche dann mitten im Wort um. */
  hyphens: manual;
  max-width: 15ch;
}
.hero h1 .zeile { display: block; }
.hero h1 .akzent { color: var(--brand); }

/* ------------------------------------------------------------ Unterbau */
/* Textspalte breit genug, dass die beiden Hauptaktionen nebeneinander stehen.
   Bei .82fr blieben rund 456 px — knapp zu wenig, die Schaltflächen brachen
   untereinander um und wirkten dadurch zögerlich statt entschieden. */
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.hero__text { padding-bottom: clamp(2rem, 4vw, 4rem); }
.hero .lead { max-width: 42ch; }
.hero .btn-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ------------------------------------------------------ Vertrauenszeile
   Am 07.08. auf Kundenwunsch verfeinert: Häkchen und Zeilenabstand wirkten
   zu schwer für eine unterstützende Randnotiz unter den Hero-Buttons.
   Die globale Fließtext-Zeilenhöhe (1,74) blähte jede einzeilige Zeile auf
   26 px auf; hier gilt jetzt eine engere, dem kurzen Text angemessene
   Zeilenhöhe. Die Schriftgröße selbst bleibt unverändert – nur Gewicht und
   Abstand der Markierungen wurden reduziert, die Lesbarkeit ist unberührt. */
.hero-trust {
  display: grid;
  gap: .55rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.hero-trust li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
}
.hero-trust .ic {
  width: 14px; height: 14px;
  margin-top: .27rem;
  color: var(--sky);
}

/* ---------------------------------------------------------------- Bild
   Bricht aus dem Container zum rechten Fensterrand aus. */
.hero__media {
  position: relative;
  align-self: stretch;
  min-height: clamp(320px, 46vw, 620px);
  /* Rechts über den Container hinaus bis zur Fensterkante */
  margin-right: calc((100% - min(100vw, var(--wrap))) / 2 - var(--gutter));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-bild);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bild ist bereits als 3:2-Querformat zugeschnitten (siehe Markup-Kommentar
     in src/pages/index.html). Leichter Bias nach oben hält beide Gesichter
     auch dann im Bild, wenn der Container breiter als 3:2 wird und cover
     zusätzlich oben/unten beschneidet (am 900px-Breakpoint bis zu 1,88:1). */
  object-position: 50% 44%;
  /* Sehr langsames Heranfahren beim Laden — kaum bewusst wahrnehmbar,
     nimmt dem Bild aber die Starre. */
  animation: hero-bild 1.6s var(--ease-aus) both;
}

@keyframes hero-bild {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Zarte Markenkante an der linken Bildkante */
.hero__media::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sky), var(--brand));
  z-index: 1;
}

@media (max-width: 900px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
  }
  .hero__media {
    margin-right: calc(var(--gutter) * -1);
    min-height: clamp(300px, 62vw, 460px);
  }
  .hero h1 { max-width: none; }
}

/* --------------------------------------------------- Kopf der Unterseiten */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 5vw, 6.5rem) clamp(2.5rem, 1rem + 4vw, 4.5rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.page-head::before {
  content: "";
  position: absolute;
  width: 680px; height: 680px;
  top: -420px; right: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 176, 223, .24) 0%, rgba(102, 176, 223, 0) 66%);
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-top: var(--sp-6); max-width: 58ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--muted-2);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .45; }

/* Sprungmarken zu den Leistungsblöcken */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(2rem, 3vw, 2.75rem);
}
.jump a {
  padding: .6rem 1.15rem;
  border: 1px solid var(--line-stark);
  border-radius: 100px;
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color var(--t-schnell) var(--ease),
              color var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease),
              transform var(--t-schnell) var(--ease);
}
.jump a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--sky-50);
  transform: translateY(-1px);
}

/* ===== 07-cards.css ================================================== */
/* =========================================================================
   07 · Karten, Kennzahlen, Merkmale

   Gestaltungsprinzip: Flächen werden durch Haarlinien getrennt, nicht durch
   Schatten. Die Karten liegen in einem gemeinsamen Raster und teilen sich
   die Linien — das wirkt gebaut statt zusammengestellt.
   ========================================================================= */

/* ------------------------------------------------------ Leistungskarten */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.75rem, 1rem + 1.6vw, 2.25rem);
  background: var(--paper);
  transition: background var(--t-normal) var(--ease);
}

/* Akzentlinie, die beim Überfahren von links gezeichnet wird */
.svc-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ruhig) var(--ease-aus);
}
.svc-card:hover { background: var(--sky-50); }
.svc-card:hover::before { transform: scaleX(1); }

.svc-card .num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muted-2);
}

.svc-icon {
  width: 46px; height: 46px;
  color: var(--brand);
  transition: color var(--t-normal) var(--ease),
              transform var(--t-ruhig) var(--ease-aus);
}
.svc-card:hover .svc-icon { color: var(--brand-hell); transform: translateY(-3px); }

/* Bewusst kleiner als die globale h3-Größe: In einer vierspaltigen Karte
   bleiben rund 230 px Textbreite. „Immobilienbewertung" braucht bei 1,5 rem
   mehr — der Umbruch landete dann mitten im Wort. Bei 1,2 rem passt jedes
   der vier Schlagworte in eine Zeile. */
.svc-card h3 {
  margin-top: .15rem;
  font-size: clamp(1.1rem, 1.04rem + .22vw, 1.15rem);
  line-height: 1.35;
}
.svc-card p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0; }
.svc-card .arrow-link { margin-top: auto; padding-top: var(--sp-6); align-self: flex-start; }

/* --------------------------------------------------------- Merkmale
   Kein Kasten, nur eine kräftige Oberlinie. Reduziert das Element auf
   Typografie und Raster. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.25rem);
}
.why-item {
  padding-top: var(--sp-6);
  border-top: 2px solid var(--sky);
  transition: border-color var(--t-normal) var(--ease);
}
.why-item:hover { border-top-color: var(--brand); }
.why-item .ic {
  width: 30px; height: 30px;
  margin-bottom: var(--sp-4);
  color: var(--brand);
}
.why-item h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.why-item p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0; }

/* --------------------------------------------------------- Bewertungen
   09.08.: Struktur-/Designvorschlag für echte Google-Rezensionen
   (Kundenfeedback Runde 2, Punkt 4+5). Enthält bewusst noch keine echten
   Daten, siehe Platzhalter-Kennzeichnung im Markup von index.html.
   Gleiche Sprache wie .why-item: Oberlinie statt Kasten oder Schatten —
   damit es nicht wie ein eingebettetes Fremd-Widget wirkt. Die Sterne
   sind hier bewusst neutral/grau (nicht gold) gehalten, solange keine
   echte Bewertung dahintersteht. */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin: var(--sp-8) auto 0;
  text-align: center;
}
.reviews-summary__stars { display: flex; gap: .2rem; }
.reviews-summary__stars .ic { width: 20px; height: 20px; color: var(--line-stark); }
.reviews-summary p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.reviews-summary strong { color: var(--ink); font-weight: 600; }

.reviews-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border: 1px solid var(--line-stark);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.25rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.review-card {
  padding-top: var(--sp-6);
  border-top: 2px solid var(--sky);
}
.review-card__stars { display: flex; gap: .18rem; margin-bottom: var(--sp-4); }
.review-card__stars .ic { width: 16px; height: 16px; color: var(--line-stark); }
.review-card__text { font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.review-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.review-card__name { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.review-card__quelle { font-size: var(--fs-xs); color: var(--muted-2); white-space: nowrap; }

/* -------------------------------------------------------------- Kennzahlen
   Große Ziffern als Gestaltungselement. Der Zahlenwert trägt die Fläche,
   die Erläuterung bleibt klein. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.stat b {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: .6rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================ Ablauf
   Zeitleiste statt sechs enger Spalten. Bei sechs Spalten blieben je
   Schritt gut 190 px — deutsche Fachbegriffe brauchen dort mehr Luft.
   Die Leiste liest sich zudem als Ablauf, nicht als Aufzählung. */
/* Feste Spaltenzahl statt auto-fit: Bei sechs Schritten erzeugte auto-fit
   eine 4+2-Aufteilung, deren zweite Reihe wie ein Rest wirkte. 3×2 ist
   ausgewogen, 2×3 auf Tablets, 1×6 auf dem Telefon. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
  position: relative;
  padding: clamp(1.75rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 2vw, 2rem) clamp(2rem, 3vw, 2.75rem) 0;
  counter-increment: schritt;
}

/* Waagerechte Leitlinie mit Punkt an jedem Schritt */
.step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
}
.step::after {
  content: "";
  position: absolute;
  left: 0; top: -4px;
  width: 9px; height: 9px;
  border: 2px solid var(--sky);
  border-radius: 50%;
  background: var(--paper);
  transition: border-color var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease);
}
.section--paper2 .step::after { background: var(--paper-2); }
.step:hover::after { border-color: var(--brand); transform: scale(1.25); }

.step__n {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--brand);
}
.step h3 { font-size: 1.08rem; margin-bottom: .55rem; }
.step p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0; }

/* --------------------------------------------------------- Merkmalliste */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: var(--sp-6);
}
.tag-list li {
  padding: .42rem .9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.section--paper2 .tag-list li { background: var(--paper); }

/* --------------------------------------------------------- Fachbereiche */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.logo-wall li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.65rem 1.4rem;
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: background var(--t-normal) var(--ease);
}
.logo-wall li:hover { background: var(--sky-50); }
.logo-wall .ic { width: 26px; height: 26px; color: var(--sky); flex: none; }

/* ------------------------------------------------------------- Entwurf */
.draft-flag {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.1rem 1.35rem;
  margin-bottom: var(--sp-8);
  border: 1px dashed #d9b45f;
  border-radius: var(--radius);
  background: #fdf8ec;
  font-size: var(--fs-sm);
  color: #7a5c14;
}
.draft-flag .ic { width: 19px; height: 19px; flex: none; margin-top: .2rem; }

/* ===== 08-media.css ================================================== */
/* =========================================================================
   08 · Bilder

   Bilder bekommen eine eigene Behandlung: feste Seitenverhältnisse gegen
   Layoutsprünge, ein sehr langsamer Zoom beim Überfahren und eine
   Maskenöffnung beim Einblenden. Der Zoom liegt bei 4 % — genug, damit das
   Bild lebendig wirkt, zu wenig, um als Effekt aufzufallen.
   ========================================================================= */

.bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-aus);
}
.bild--4x5 { aspect-ratio: 4 / 5; }
.bild--3x2 { aspect-ratio: 3 / 2; }
.bild--1x1 { aspect-ratio: 1 / 1; }

/* Nur wo das Bild Teil eines anklickbaren Bereichs ist */
a:hover .bild img,
.bild--zoom:hover img { transform: scale(1.04); }

/* Bildrahmen: versetzte Haarlinie hinter dem Bild.
   Bewusst nur auf großen Flächen — auf kleinen wirkt es unruhig. */
.bild--rahmen { box-shadow: var(--shadow-md); }
.bild--rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: inherit;
  pointer-events: none;
}

.split__media--framed { position: relative; }
.split__media--framed .bild,
.split__media--framed img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split__media--framed::before {
  content: "";
  position: absolute;
  inset: -22px -22px 22px 22px;
  border: 1px solid var(--sky);
  border-radius: var(--radius-lg);
  opacity: .4;
  z-index: -1;
}
@media (max-width: 880px) {
  .split__media--framed::before { inset: -14px -14px 14px 14px; }
}

/* Bild in den Leistungsblöcken */
.svc-head__media .bild,
.svc-head__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Grafik-Panel (Energieskala) */
.grafik-panel {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

/* ===== 09-accordion.css ============================================== */
/* =========================================================================
   09 · Leistungsblöcke und Akkordeon
   ========================================================================= */

.svc-block { scroll-margin-top: calc(var(--header-h-stuck) + 2rem); }
.svc-block + .svc-block { margin-top: clamp(4rem, 2rem + 7vw, 8rem); }

.svc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .76fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.svc-head h2 { margin-top: .4rem; }
.svc-head .claim {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.014em;
  color: var(--brand);
}
.svc-head p.body { margin-top: var(--sp-4); color: var(--muted); }

@media (max-width: 880px) {
  .svc-head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

/* ---------------------------------------------------- Leistungsliste
   09.08.: Für Abschnitte mit einer flachen Aufzählung statt mehrerer
   Akkordeon-Themen (Energiemanagement, Kundenfeedback Runde 2). Gleiche
   Häkchen-Optik wie .hero-trust, hier aber als zweispaltiges Raster für
   zehn vollständige Leistungspunkte statt drei kurzer Stichworte. */
.svc-leistungen { margin-top: clamp(2.25rem, 1rem + 3vw, 3.25rem); }
.svc-leistungen .eyebrow { margin-bottom: var(--sp-6); }
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 3vw, 3.5rem);
}
.check-grid li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.check-grid .ic {
  width: 17px; height: 17px;
  margin-top: .21rem;
  color: var(--sky);
  flex: none;
}
@media (max-width: 620px) {
  .check-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Akkordeon */
.acc {
  margin-top: clamp(2.25rem, 1rem + 3vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.acc__item {
  border-bottom: 1px solid var(--line);
  transition: background var(--t-normal) var(--ease);
}
.acc__item:has(.acc__btn[aria-expanded="true"]) { background: var(--sky-50); }
.section--paper2 .acc__item:has(.acc__btn[aria-expanded="true"]) { background: var(--paper); }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  padding: 1.5rem clamp(.5rem, 2vw, 1.25rem);
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(1.03rem, .98rem + .22vw, 1.18rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.42;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-schnell) var(--ease);
}
.acc__btn:hover { color: var(--brand); }

/* Plus wird beim Öffnen zum Minus und dreht dabei */
.acc__sign {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--line-stark);
  border-radius: 50%;
  transition: border-color var(--t-normal) var(--ease),
              background var(--t-normal) var(--ease),
              transform var(--t-normal) var(--ease);
}
.acc__btn:hover .acc__sign { border-color: var(--sky); }
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto 6px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--brand);
  transform: translateY(-50%);
  transition: transform var(--t-normal) var(--ease), opacity var(--t-schnell) var(--ease);
}
.acc__sign::after { transform: translateY(-50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign {
  background: var(--brand);
  border-color: var(--brand);
  transform: rotate(180deg);
}
.acc__btn[aria-expanded="true"] .acc__sign::before { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__sign::after { opacity: 0; }

/* Höhe wird über ein Grid-Fraktal animiert — funktioniert ohne feste
   Pixelwerte und damit unabhängig von der Textlänge. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-aus);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }

.acc__inner {
  max-width: 72ch;
  padding: 0 clamp(.5rem, 2vw, 1.25rem) 1.85rem;
}
.acc__inner > p { color: var(--muted); }

.faq { max-width: 82ch; }

/* ===== 10-band.css =================================================== */
/* =========================================================================
   10 · Dunkle Aussagesektionen

   Ein dunkles Band bricht den Rhythmus aus Weiß und Hellgrau und markiert
   die Stellen, an denen etwas passieren soll. Premium-Auftritte setzen genau
   ein bis zwei solcher Flächen — mehr entwertet sie.
   ========================================================================= */

.band {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  color: rgba(255, 255, 255, .78);
}

/* Zwei sehr weiche Lichtfelder geben der Fläche Tiefe statt Flachheit */
.band::before,
.band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.band::before {
  width: 900px; height: 900px;
  top: -440px; right: -240px;
  background: radial-gradient(circle, rgba(102, 176, 223, .3) 0%, rgba(102, 176, 223, 0) 64%);
}
.band::after {
  width: 720px; height: 720px;
  bottom: -430px; left: -200px;
  background: radial-gradient(circle, rgba(22, 99, 148, .55) 0%, rgba(22, 99, 148, 0) 68%);
}

/* Feines Raster als Textur — nur bei sehr niedriger Deckkraft sichtbar
   und gibt der Fläche den technischen Charakter der Marke. */
.band__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.band > *:not(.band__raster) { position: relative; z-index: 1; }
.band h2, .band h3 { color: #fff; }
.band .eyebrow { color: var(--sky); }
.band .lead { color: rgba(255, 255, 255, .74); }
.band a:not(.btn) { color: var(--sky-300); }
.band a:not(.btn):hover { color: #fff; }

/* ----------------------------------------------------------- Abschluss-CTA */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
.cta-band h2 { max-width: 22ch; }
.cta-band .lead { max-width: 56ch; }

@media (max-width: 860px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

/* Direktkontakt als Zusatzweg unter dem CTA */
.cta-direkt {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-sm);
}
.cta-direkt li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .68);
}
.cta-direkt .ic { width: 17px; height: 17px; color: var(--sky); flex: none; }
.cta-direkt a { color: #fff; }
.cta-direkt a:hover { color: var(--sky-300); }

/* ===== 11-forms.css ================================================== */
/* =========================================================================
   11 · Kontaktbereich und Formular
   ========================================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 1rem + 4.5vw, 5rem);
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- Felder */
.form { display: grid; gap: var(--sp-6); }

.field { display: grid; gap: .5rem; }
.field--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 560px) { .field--row { grid-template-columns: minmax(0, 1fr); } }

.field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}
.field label .req { color: var(--brand); }
.field .hint { font-size: var(--fs-xs); color: var(--muted-2); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-stark);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--t-schnell) var(--ease),
              box-shadow var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.65; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6e80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 17px;
  padding-right: 2.9rem;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted-2); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 99, 148, .14);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #c0392b; }
.field .err { font-size: var(--fs-xs); color: #c0392b; }
.field .err:empty { display: none; }

/* Honigtopf: für Menschen unsichtbar, fängt einfache Bots ab */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------- Einwilligung */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.consent input {
  width: 19px; height: 19px;
  margin: .2rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent label {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
}
.consent .err { grid-column: 1 / -1; }
.consent input[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 2px; }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--muted-2);
}
.form-note .ic { width: 15px; height: 15px; margin-top: .22rem; flex: none; color: var(--sky); }

.form-status {
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-status[hidden] { display: none; }
.form-status--ok  { background: var(--sky-50); border: 1px solid var(--sky-300); color: var(--navy-700); }
.form-status--err { background: #fdf1ef; border: 1px solid #f0c4bd; color: #96271a; }

/* -------------------------------------------------------- Seitenspalte */
.contact-aside {
  padding: clamp(1.85rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.contact-list { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.contact-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
.contact-list .ic { width: 19px; height: 19px; color: var(--brand); margin-top: .3rem; }
.contact-list b {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.contact-list a,
.contact-list span { font-size: var(--fs-sm); color: var(--ink); font-style: normal; }
.contact-list a:hover { color: var(--brand); }

/* --------------------------------------------------- Karte (Zwei-Klick) */
.map-consent {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  min-height: 300px;
  padding: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  text-align: center;
}
.map-consent p { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }
.map-frame { width: 100%; min-height: 340px; border: 0; border-radius: var(--radius-lg); }

/* ===== 12-footer.css ================================================= */
/* =========================================================================
   12 · Fußzeile
   ========================================================================= */

.site-footer {
  padding-top: clamp(4rem, 2rem + 6vw, 6.5rem);
  background: var(--navy-900);
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-sm);
}

/* Die Kontaktspalte bekommt mehr Breite als die Linklisten – sonst bricht
   die lange E-Mail-Adresse mitten im Wort um. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .85fr)) minmax(0, 1.25fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand img { height: 56px; width: auto; }
.footer-brand p {
  margin-top: var(--sp-6);
  max-width: 36ch;
  line-height: 1.72;
}

/* Spaltenüberschriften sind h2 — als h4 entstand auf jeder Seite ein
   Sprung von h2 auf h4 in der Gliederung (Audit M-3). */
.footer-titel {
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--sky);
}

.footer-links { display: grid; gap: .7rem; }
.footer-links a,
.site-footer address a {
  position: relative;
  color: rgba(255, 255, 255, .68);
  font-style: normal;
  transition: color var(--t-schnell) var(--ease);
}
.footer-links a:hover,
.site-footer address a:hover { color: #fff; }

.site-footer address { font-style: normal; display: grid; gap: .7rem; }

/* Lange, umbruchlose Zeichenketten — vor allem E-Mail-Adressen — dürfen die
   Rasterspalte nicht sprengen. Ohne dies schob die Fußzeilen-Adresse das
   Dokument zwischen 890 und 1150 px breiter als das Fenster (Audit K-1). */
.site-footer address,
.site-footer address a,
.footer-links a,
.contact-list a,
.contact-list span,
.legal address,
.legal a { overflow-wrap: anywhere; }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-8);
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .48);
}
.footer-bar ul { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.footer-bar a { color: rgba(255, 255, 255, .58); }
.footer-bar a:hover { color: #fff; }

/* =========================================================== Rechtstexte */
.legal { max-width: 74ch; }
.legal h2 {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: var(--sp-8); font-size: 1.08rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { margin: 0 0 1.15em; padding-left: 1.3rem; }
.legal ul li { list-style: disc; margin-bottom: .45rem; }
.legal address { font-style: normal; }
.legal .toc {
  display: grid;
  gap: .6rem;
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.legal .toc a { font-size: var(--fs-sm); }

/* ===== 13-motion.css ================================================= */
/* =========================================================================
   13 · Bewegung

   Grundsatz: langsam, gleichmäßig, mit langem Ausklang. Elemente kommen aus
   16 Pixel Tiefe und brauchen dafür 0,7 Sekunden. Schnellere oder federnde
   Bewegungen wirken sofort billiger.

   Gestaffelt wird über --i: jedes Kind einer Gruppe bekommt beim Bau seinen
   Index, daraus errechnet sich die Verzögerung. Das erspart handgezählte
   Verzögerungswerte im Markup.
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--t-ruhig) var(--ease-aus),
    transform var(--t-ruhig) var(--ease-aus);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Bilder öffnen sich zusätzlich über eine Maske statt nur einzublenden */
[data-reveal="bild"] {
  clip-path: inset(0 0 12% 0);
  transition:
    opacity   1s var(--ease-aus),
    transform 1s var(--ease-aus),
    clip-path 1.1s var(--ease-aus);
}
[data-reveal="bild"].is-in { clip-path: inset(0 0 0 0); }

/* ------------------------------------------------------------ Rücksicht
   Wer reduzierte Bewegung eingestellt hat, bekommt alles sofort und
   vollständig — keine Animation, kein Scrollverhalten, keine Verzögerung. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .hero__media img { animation: none; }
}

/* ================================================================ Druck */
@media print {
  .site-header, .site-footer, .band, .nav-toggle, .btn, .jump, .map-consent { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .acc__panel { grid-template-rows: 1fr !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==================================================== Platzhalter-Anzeige
   Jede Stelle, die noch echte Kundendaten braucht, trägt class="todo".
   Im Normalbetrieb unsichtbar. Zum Prüfen eine beliebige Seite mit ?todo
   aufrufen — dann werden alle offenen Stellen hervorgehoben. */
body.todo-on .todo {
  background: #fff5d6;
  box-shadow: 0 0 0 2px #fff5d6;
  border-bottom: 1px dashed #cf9f2a;
}