/* ==========================================================================
   BLICKPUNKT IMMOBILIEN — Fundament
   Tokens · Reset · Shared Components · Header · Mobile-Menü · Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Roboto — lokal ausgeliefert (Apache License 2.0), kein Google-CDN.
   Variable Schnitte: 300–800 normal, 400–700 kursiv.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/roboto-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;
}

/* Kursivschnitte sind bewusst nicht eingebunden. Auf der Seite steht nirgends
   Kursivsatz - die von Haus aus kursiven Elemente (address, cite, blockquote)
   sind weiter unten auf font-style: normal zurueckgesetzt. Waeren die Schnitte
   trotzdem deklariert, laege ihr Gewicht ungenutzt im Paket; waere nur die
   Deklaration da und die Datei fehlte, wuerde der Browser bei einem
   versehentlichen <em> stillschweigend eine schraeggestellte Fallback-Schrift
   erzeugen. Beides ist hier ausgeschlossen. */

:root {
  --bp-red: #850E15;
  --bp-red-dark: #6a0b11;
  --bp-red-soft: #fdf3f4;
  --bp-red-line: rgba(133, 14, 21, 0.14);

  --bp-green: #19a571;
  --bp-orange: #c97a2a;

  --bp-text: #111111;
  --bp-text-muted: #555555;
  --bp-text-light: #888888;

  --bp-line: #ececec;
  --bp-line-light: #f3f3f3;

  --bp-bg: #ffffff;
  --bp-bg-soft: #fafafa;
  --bp-bg-softer: #fcfcfc;

  --bp-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bp-shell: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08), 0 32px 80px -24px rgba(0,0,0,0.12);

  /* Fluid: skaliert stufenlos zwischen Handy und Desktop */
  --bp-gutter: clamp(16px, 4vw, 32px);

  /* Innenabstand oben UND unten je Abschnitt - zwischen zwei Abschnitten
     steht also das Doppelte. Frueher clamp(56px, 8vw, 104px): auf einem
     1440er Schirm sind 8vw 115px, der Deckel griff also immer, und
     zwischen zwei Abschnitten klafften 208px. Beim Scrollen kam nach jedem
     Block eine leere Bildschirmhaelfte - die Seite wirkte auseinander-
     gezogen statt luftig.

     Jetzt 80px, also 160px zwischen zwei Abschnitten. Das ist immer noch
     klar mehr als die groesste Ueberschrift (rund 44px) und trennt sauber,
     ohne dass der Zusammenhang reisst. Die 6vw sorgen dafuer, dass der
     Deckel erst ab 1333px greift; darunter skaliert es mit. */
  --bp-section-y: clamp(48px, 6vw, 80px);

  /* Eine einzige Satzbreite fuer die ganze Seite.
     Vorher hatten Kopfzeile (1320), Fusszeile (1280) und Inhalt (1180) je
     eigene Werte. Auf einem 1440er Schirm begann der Inhalt damit 50 Pixel
     weiter rechts als das Logo und 25 weiter rechts als die Fusszeile - beim
     Scrollen wanderte die linke Kante sichtbar hin und her. Alles, was eine
     linke Kante hat, haengt jetzt an dieser Variablen. Wer sie aendert,
     verschiebt Kopf, Inhalt und Fuss gemeinsam. */
  --bp-max: 1280px;
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Der Sticky-Header darf Anker-Ziele nicht verdecken. --bph-height haelt
     seine tatsaechliche Hoehe: hier als Ausgangswert je Breakpoint, zur
     Laufzeit von main.js aus der gemessenen Hoehe ueberschrieben. So bleiben
     Ankerspruenge auch dann richtig, wenn sich die Kopfzeile aendert. */
  /* 42px Topbar + 88px Hauptzeile + 1px Linie */
  --bph-height: 131px;
  scroll-padding-top: calc(var(--bph-height) + 20px);

  /* clip statt hidden: verhindert das seitliche Wegscrollen durch die
     dekorativen Blobs, erzeugt aber — anders als hidden — keinen eigenen
     Scrollcontainer. Das haelt position: sticky und das Scrollverhalten sauber. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--bp-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bp-text);
  background: var(--bp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

/* Jedes Bild steckt in einem <picture> (AVIF davor, WebP im <img> als
   Rückfall). Ohne diese Zeile schöbe sich damit eine zusätzliche Inline-Box
   zwischen Rahmen und Bild — und jede Regel, die dem Bild height: 100% oder
   object-fit gegen seinen Rahmen gibt, würde sich plötzlich gegen diese Box
   auflösen statt gegen den Rahmen. Die Bilder fielen auf ihre Eigenhöhe
   zusammen. display: contents lässt die Hülle im Layout gar nicht erst
   entstehen: Das <img> bleibt Kind des Rahmens. */
picture { display: contents; }

/* --------------------------------------------------------------------------
   BILDPLATZHALTER
   --------------------------------------------------------------------------
   Markiert eine Bildfläche, für die das endgültige Foto noch fehlt. Was
   dort hineingehört, steht im Attribut selbst — der Text ist also im HTML
   nachzulesen und nicht hier versteckt:

       <div class="bpl__media" data-bp-platzhalter="Foto Entrümpelung">

   Die Markierung ist mit Absicht laut. Ein dezenter Hinweis wird vor dem
   Livegang übersehen, und dann steht ein Symbolbild dauerhaft auf der
   Seite. Entfernt wird sie, indem das Attribut aus dem HTML gelöscht wird;
   diese Regel darf stehen bleiben.

   Gedruckt wird der Hinweis nicht — auf Papier ist er sinnlos. */
[data-bp-platzhalter] { position: relative; }
[data-bp-platzhalter]::after {
  content: "Platzhalter — " attr(data-bp-platzhalter);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 10px 14px;
  background: var(--bp-red); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.35;
  letter-spacing: 0.02em; text-align: center;
  pointer-events: none;
}

/* Gilt ein Hinweis nicht einer einzelnen Bildfläche, sondern einem ganzen
   Abschnitt — etwa der Galerie, wo sonst auf jeder der sechzehn Kacheln
   dasselbe stünde —, dann als eigener Absatz im Textfluss statt als
   Überlagerung. Ein absolut positioniertes Band würde am unteren Rand
   eines langen Rasters unter der Falz landen und wäre damit genau das,
   was diese Markierung nicht sein soll: übersehbar. */
[data-bp-platzhalter-block]::before {
  content: "Platzhalter — " attr(data-bp-platzhalter-block);
  display: block; margin: 0 0 24px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--bp-red); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.45;
}

@media print {
  [data-bp-platzhalter]::after,
  [data-bp-platzhalter-block]::before { display: none; }
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
address { font-style: normal; }

/* Lange Telefonnummern/E-Mails dürfen auf schmalen Displays nicht überlaufen */
p, li, address, dd, dt, td, th { overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--bp-red);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.bp-skip {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  padding: 12px 20px; background: var(--bp-red); color: #fff;
  border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px;
  transition: top 0.25s var(--bp-ease);
}
.bp-skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   Shared Layout
   -------------------------------------------------------------------------- */

.bp-container { max-width: var(--bp-max); margin: 0 auto; padding: 0 var(--bp-gutter); }
.bp-section { position: relative; padding: var(--bp-section-y) 0; }
.bp-section--soft { background: var(--bp-bg-soft); }

/* --------------------------------------------------------------------------
   Shared Typo
   -------------------------------------------------------------------------- */

/* Reiner Text, kein Zierstrich davor und keiner dahinter. Die Kombination aus
   kurzen Strichen und gesperrter Versalzeile ist ein Baukasten-Muster;
   Sperrung, Farbe und Schriftschnitt setzen die Zeile deutlich genug ab.
   Groesse bewusst ueber der frueheren 11px: die Zeile soll als eigene
   Ueberschrift lesbar sein, nicht als Kleingedrucktes. */
.bp-eyebrow {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bp-red);
}
.bp-eyebrow::before, .bp-eyebrow::after { content: none; }
.bp-eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.bp-h1 {
  font-size: clamp(32px, 6vw, 60px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.06;
}
.bp-h2 {
  font-size: clamp(27px, 4.4vw, 46px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
}
.bp-h3 {
  font-size: clamp(21px, 3vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
}
/* Kein abgesetztes Schlusswort in Ueberschriften. Weder kursiv noch in
   Rot, noch als Farbverlauf: ein andersfarbiges letztes Satzstueck ist genau
   das Muster, an dem man Baukasten-Layouts erkennt. Ueberschriften laufen
   durchgehend in einer Schrift, einem Schnitt und einer Farbe.
   Die Klassen bleiben als Sicherheitsnetz stehen, falls irgendwo noch ein
   <span> ueberlebt hat — sie neutralisieren sich dann selbst. */
.bp-accent,
.bp-accent--light {
  font: inherit; font-weight: inherit; font-style: normal;
  color: inherit; background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.bp-lead {
  font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.7;
  color: var(--bp-text-muted); max-width: 62ch;
}

.bp-intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bp-intro .bp-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Shared Buttons — Touch-Target min. 48px
   -------------------------------------------------------------------------- */

.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border-radius: 100px;
  font-family: var(--bp-font); font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em; border: none; white-space: nowrap;
  transition: all 0.35s var(--bp-ease);
}
.bp-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.bp-btn--primary {
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  color: #ffffff; box-shadow: 0 8px 22px -8px rgba(133, 14, 21, 0.5);
}
.bp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(133, 14, 21, 0.6); }

.bp-btn--ghost { background: transparent; color: var(--bp-text); border: 1.5px solid var(--bp-line); }
.bp-btn--ghost:hover { border-color: var(--bp-red); color: var(--bp-red); transform: translateY(-2px); }

.bp-btn--white { background: #ffffff; color: var(--bp-red); box-shadow: 0 8px 22px -8px rgba(0,0,0,0.25); }
.bp-btn--white:hover { transform: translateY(-2px); }

.bp-btn--outline-white { background: rgba(255,255,255,0.12); color: #ffffff; border: 1.5px solid rgba(255,255,255,0.4); }
.bp-btn--outline-white:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.bp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Shared Pills / Badges
   -------------------------------------------------------------------------- */

.bp-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--bp-red-line);
  font-size: 13px; font-weight: 600; color: var(--bp-text);
}
.bp-pill svg { width: 15px; height: 15px; color: var(--bp-red); flex-shrink: 0; }
/* Zeilenabstand kleiner als Spaltenabstand: Wenn die Reihe auf schmalen
   Schirmen umbricht, sollen die Pillen als Gruppe zusammenbleiben und nicht
   als lose Liste auseinanderfallen. */
.bp-pill-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }

.bp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-green); flex-shrink: 0; animation: bpPulse 2s ease-in-out infinite; }
.bp-dot--red { background: var(--bp-red); }

@keyframes bpPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* --------------------------------------------------------------------------
   Shared Cards
   -------------------------------------------------------------------------- */

.bp-card {
  background: #ffffff; border: 1px solid var(--bp-line);
  border-radius: 18px; padding: clamp(20px, 3vw, 30px);
  transition: all 0.35s var(--bp-ease);
}
.bp-card--hover:hover { transform: translateY(-3px); border-color: var(--bp-red-line); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.16); }

.bp-icon-box {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-red-soft); color: var(--bp-red); flex-shrink: 0;
  transition: all 0.35s var(--bp-ease);
}
.bp-icon-box svg { width: 21px; height: 21px; }

/* Check-Liste */
.bp-checks { display: flex; flex-direction: column; gap: 13px; }
.bp-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--bp-text-muted); }
.bp-checks li::before {
  content: ''; flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--bp-red-soft) center / 13px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23850E15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  transition: all 0.3s var(--bp-ease);
}

/* --------------------------------------------------------------------------
   Dekorative Hintergründe
   -------------------------------------------------------------------------- */

.bp-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bp-blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5; }
.bp-blob--1 { width: 480px; height: 480px; top: -12%; left: -8%; background: radial-gradient(circle, #fbe5e7 0%, transparent 70%); animation: bpDrift1 30s ease-in-out infinite; }
.bp-blob--2 { width: 400px; height: 400px; bottom: -10%; right: -6%; background: radial-gradient(circle, #ffd9de 0%, transparent 70%); animation: bpDrift2 34s ease-in-out infinite; }
.bp-blob--3 { width: 340px; height: 340px; top: 42%; left: 52%; background: radial-gradient(circle, #fff0f2 0%, transparent 70%); animation: bpDrift1 28s ease-in-out infinite reverse; }

@keyframes bpDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 34px) scale(1.12); }
}
@keyframes bpDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-44px, -30px) scale(1.08); }
}

.bp-edge-fade { position: absolute; left: 0; right: 0; height: 140px; pointer-events: none; z-index: 1; }
.bp-edge-fade--top { top: 0; background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.85) 50%, transparent 100%); }
.bp-edge-fade--bottom { bottom: 0; background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.85) 50%, transparent 100%); }

.bp-inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Unterseiten-Hero
   -------------------------------------------------------------------------- */

.bp-hero {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--bp-red-soft) 0%, var(--bp-bg) 100%);
  padding: clamp(48px, 6vw, 76px) 0 clamp(36px, 4.5vw, 56px);
}
.bp-hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.bp-hero__title {
  font-size: clamp(30px, 5vw, 50px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.025em; margin: 16px 0 0;
}
.bp-hero__lead {
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7;
  color: var(--bp-text-muted); max-width: 660px; margin: 18px auto 0;
}
.bp-hero__pills { margin-top: 26px; justify-content: center; }
.bp-hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.7;
  background-image:
    linear-gradient(to right, rgba(133,14,21,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(133,14,21,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* --------------------------------------------------------------------------
   CTA-Band (rote Karte am Seitenende)
   -------------------------------------------------------------------------- */

.bp-cta {
  position: relative; overflow: hidden; z-index: 2; color: #ffffff;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 40px);
  align-items: center;
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bp-red), var(--bp-red-dark));
  box-shadow: 0 30px 70px -24px rgba(133, 14, 21, 0.5);
}
.bp-cta::before {
  content: ''; position: absolute; top: -180px; right: -120px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
}
.bp-cta > * { position: relative; z-index: 1; }
.bp-cta__title {
  font-size: clamp(22px, 3vw, 31px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.02em; margin: 0;
}
.bp-cta__lead { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.92); margin: 12px 0 0; }
.bp-cta__actions { display: flex; flex-direction: column; gap: 10px; }
.bp-cta__actions .bp-btn { width: 100%; }

/* --------------------------------------------------------------------------
   Scroll-Reveal
   -------------------------------------------------------------------------- */

[data-bp-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--bp-ease), transform 0.7s var(--bp-ease);
}
[data-bp-reveal].bp-is-visible { opacity: 1; transform: none; }

/* Ohne JS darf nichts unsichtbar bleiben */
.no-js [data-bp-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.bph {
  --bph-red: var(--bp-red); --bph-red-dark: var(--bp-red-dark); --bph-red-soft: var(--bp-red-soft);
  --bph-text: var(--bp-text); --bph-text-muted: var(--bp-text-muted); --bph-text-light: var(--bp-text-light);
  --bph-line: var(--bp-line); --bph-bg: var(--bp-bg); --bph-ease: var(--bp-ease);
  position: sticky; top: 0; z-index: 100;
  width: 100%; background: var(--bph-bg);
  font-family: var(--bp-font);
  transition: box-shadow 0.4s var(--bph-ease);
}
.bph--scrolled { box-shadow: 0 6px 24px -10px rgba(0,0,0,0.12); }

.bph__top { background: var(--bph-text); color: #ffffff; font-size: 12.5px; }
.bph__top-inner { max-width: var(--bp-max); margin: 0 auto; padding: 0 var(--bp-gutter); height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bph__top-meta { display: flex; align-items: center; gap: 24px; }
.bph__top-meta-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.78); }
.bph__top-meta-item svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
.bph__top-actions { display: flex; align-items: center; gap: 14px; }
.bph__top-link { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; color: rgba(255,255,255,0.85); font-weight: 500; transition: color 0.25s ease; }
.bph__top-link:hover { color: #ffffff; }
.bph__top-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.bph__top-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.15); }
.bph__top-socials { display: flex; align-items: center; gap: 4px; }
.bph__top-social { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.3s var(--bph-ease); }
.bph__top-social:hover { color: #ffffff; background: var(--bph-red); transform: translateY(-1px); }
.bph__top-social svg { width: 13px; height: 13px; }

.bph__main { background: var(--bph-bg); border-bottom: 1px solid var(--bph-line); }
.bph__main-inner { max-width: var(--bp-max); margin: 0 auto; padding: 0 var(--bp-gutter); height: 88px; display: flex; align-items: center; gap: 32px; }
.bph__logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity 0.25s ease; margin-right: auto; }
.bph__logo:hover { opacity: 0.85; }

/* Die Datei logo.webp hatte bis September 2026 oben und unten je rund 27 px
   transparenten Rand (300x120, sichtbar nur 65 px hoch). Bei height: 56px kam
   davon also nur gut die Haelfte als Logo an - deshalb wirkte es im Balken so
   klein. Der Rand ist jetzt aus der Datei geschnitten (279x65), die Hoehe hier
   ist damit die tatsaechliche Hoehe des Schriftzugs.

   Genau hier lag der Fehler der letzten Runden. Der Wunsch war "etwas
   groesser als vorher". Vorher waren aber real 30px sichtbar - der Wert 56
   im alten CSS bezog sich auf die Datei MIT Rand. Beim Zuschneiden ist der
   Bezug verrutscht, und aus 88px "Datei" wurden 88px "Schriftzug": fast das
   Dreifache statt etwas mehr.

   52px sind der Mittelweg. Gegenueber den 30px von frueher deutlich
   groesser - das war der Auftrag -, aber immer noch ein Logo und keine
   Ueberschrift. Das Bild ist 4,29-mal so breit wie hoch, 52px Hoehe sind
   also 223px Breite von 1216px Containerbreite (18 Prozent). Zum Vergleich:
   88px waren 378px und damit fast ein Drittel der Zeile.

   Der weisse Balken ist 88px hoch, das Logo 52px. Oben und unten bleiben
   damit je 18px Luft. Wer das Logo wieder vergroessern will, muss zuerst
   die Hoehe des Balkens erhoehen, sonst steht der Schriftzug auf der
   Kante - und muss --bph-height oben mitziehen, sonst verdeckt der
   Sticky-Header die Ankerziele. */
.bph__logo-img { height: 52px; width: auto; }

.bph__nav { display: flex; }
.bph__nav-list { display: flex; align-items: center; gap: 2px; }
.bph__nav-link { display: inline-block; padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--bph-text); letter-spacing: -0.005em; position: relative; transition: color 0.25s ease; white-space: nowrap; }
.bph__nav-link::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--bph-red); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--bph-ease); }
.bph__nav-link:hover { color: var(--bph-red); }
.bph__nav-link:hover::before { transform: scaleX(1); }
.bph__nav-link[aria-current="page"] { color: var(--bph-red); font-weight: 700; }
.bph__nav-link[aria-current="page"]::before { transform: scaleX(1); }

.bph__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bph__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; height: 48px; border-radius: 100px; font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: -0.005em; white-space: nowrap; transition: all 0.35s var(--bph-ease); }
.bph__btn-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bph__btn-icon svg { width: 18px; height: 18px; }
.bph__btn-label { font-weight: 600; white-space: nowrap; }
.bph__btn-arrow { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--bph-ease); flex-shrink: 0; margin-left: 2px; }
.bph__btn-arrow svg { width: 11px; height: 11px; }
.bph__btn--ghost { background: var(--bph-bg); color: var(--bph-text); border: 1.5px solid var(--bph-line); }
.bph__btn--ghost .bph__btn-icon { color: var(--bph-red); }
.bph__btn--ghost:hover { border-color: var(--bph-red); background: var(--bph-red-soft); color: var(--bph-red); }
.bph__btn--primary { background: linear-gradient(135deg, var(--bph-red) 0%, var(--bph-red-dark) 100%); color: #ffffff; box-shadow: 0 6px 18px -6px rgba(133,14,21,0.5); }
.bph__btn--primary .bph__btn-arrow { background: rgba(255,255,255,0.22); }
.bph__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(133,14,21,0.6); }
.bph__btn--primary:hover .bph__btn-arrow { background: #ffffff; color: var(--bph-red); transform: translateX(3px); }

/* Anrufen-Knopf mit Standort-Auswahl */
.bph__call { position: relative; }
.bph__call-caret { width: 13px; height: 13px; margin-left: 2px; flex-shrink: 0; transition: transform 0.3s var(--bph-ease); }
.bph__call-toggle[aria-expanded="true"] .bph__call-caret { transform: rotate(180deg); }
.bph__call-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 268px; padding: 8px;
  background: var(--bph-bg); border: 1px solid var(--bph-line); border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.28), 0 4px 14px -6px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: 3px;
  animation: bphCallIn 0.25s var(--bph-ease) both;
}
/* display: flex schlaegt die Browserregel fuer [hidden] - ohne das steht das
   Menue dauerhaft offen, auch bevor jemand den Knopf beruehrt hat. */
.bph__call-menu[hidden] { display: none; }
@keyframes bphCallIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.bph__call-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-radius: 12px; transition: background 0.25s ease; }
.bph__call-item:hover { background: var(--bph-red-soft); }
.bph__call-place { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bph-text-light); }
.bph__call-number { font-size: 14.5px; font-weight: 700; color: var(--bph-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bph__call-item:hover .bph__call-place,
.bph__call-item:hover .bph__call-number { color: var(--bph-red); }
.bph__call-item--hotline { background: linear-gradient(135deg, var(--bph-red) 0%, var(--bph-red-dark) 100%); }
.bph__call-item--hotline .bph__call-place { color: rgba(255,255,255,0.82); }
.bph__call-item--hotline .bph__call-number { color: #ffffff; }
.bph__call-item--hotline:hover { background: var(--bph-red-dark); }
.bph__call-item--hotline:hover .bph__call-place { color: rgba(255,255,255,0.92); }
.bph__call-item--hotline:hover .bph__call-number { color: #ffffff; }

.bph__hamburger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1.5px solid var(--bph-line); border-radius: 12px; padding: 0; z-index: 101; flex-shrink: 0; transition: all 0.3s var(--bph-ease); }
.bph__hamburger:hover { border-color: var(--bph-red); background: var(--bph-red-soft); }
.bph__hamburger-lines { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.bph__hamburger-line { display: block; width: 22px; height: 2px; background: var(--bph-text); border-radius: 2px; transition: all 0.4s var(--bph-ease); transform-origin: center; }
.bph__hamburger-line:nth-child(2) { width: 16px; align-self: flex-end; }
.bph__hamburger:hover .bph__hamburger-line:nth-child(2) { width: 22px; }
/* Hamburger wird im offenen Zustand zum X */
.bph__hamburger[aria-expanded="true"] .bph__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bph__hamburger[aria-expanded="true"] .bph__hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bph__hamburger[aria-expanded="true"] .bph__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   MOBILE MEGA-MENÜ (Tablet + Handy)
   ========================================================================== */

.bphm {
  --bphm-red: var(--bp-red); --bphm-red-dark: var(--bp-red-dark); --bphm-red-soft: var(--bp-red-soft);
  --bphm-text: var(--bp-text); --bphm-text-muted: var(--bp-text-muted); --bphm-text-light: var(--bp-text-light);
  --bphm-line: var(--bp-line); --bphm-bg: var(--bp-bg); --bphm-ease: var(--bp-ease);
  position: fixed; inset: 0; z-index: 199; pointer-events: none;
  font-family: var(--bp-font); visibility: hidden;
  transition: visibility 0s linear 0.55s;
}
.bphm--open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; }
.bphm__backdrop { position: absolute; inset: 0; background: rgba(17,17,17,0.55); opacity: 0; transition: opacity 0.5s var(--bphm-ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bphm--open .bphm__backdrop { opacity: 1; }

.bphm__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 460px; background: var(--bphm-bg);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform 0.55s var(--bphm-ease);
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.2);
  /* iPhone-Notch / Home-Indicator */
  padding-bottom: env(safe-area-inset-bottom);
}
.bphm--open .bphm__panel { transform: translateX(0); }

.bphm__head { padding: 28px 24px 24px; background: linear-gradient(135deg, var(--bphm-red) 0%, var(--bphm-red-dark) 100%); color: #ffffff; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.bphm__head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bphm__head-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.bphm__head-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.bphm__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #ffffff; border: 1px solid rgba(255,255,255,0.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s var(--bphm-ease); }
.bphm__close:hover, .bphm__close:active { background: #ffffff; color: var(--bphm-red); border-color: #ffffff; }
.bphm__close svg { width: 16px; height: 16px; }

.bphm__quick { padding: 20px 20px 4px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.bphm__quick-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; min-height: 48px; transition: all 0.35s var(--bphm-ease); }
.bphm__quick-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bphm__quick-icon svg { width: 20px; height: 20px; }
.bphm__quick-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bphm__quick-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.bphm__quick-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.bphm__quick-arrow { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--bphm-ease); flex-shrink: 0; }
.bphm__quick-arrow svg { width: 14px; height: 14px; }
.bphm__quick-card--primary { background: linear-gradient(135deg, var(--bphm-red) 0%, var(--bphm-red-dark) 100%); color: #ffffff; box-shadow: 0 8px 22px -8px rgba(133,14,21,0.5); }
.bphm__quick-card--primary .bphm__quick-icon { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.28); }
.bphm__quick-card--primary .bphm__quick-eyebrow { color: rgba(255,255,255,0.85); }
.bphm__quick-card--primary .bphm__quick-arrow { background: rgba(255,255,255,0.22); }
.bphm__quick-card--primary:active { transform: scale(0.98); }
.bphm__quick-card--ghost { background: var(--bphm-bg); border: 1.5px solid var(--bphm-line); color: var(--bphm-text); }
.bphm__quick-card--ghost .bphm__quick-icon { background: var(--bphm-red-soft); color: var(--bphm-red); }
.bphm__quick-card--ghost .bphm__quick-eyebrow { color: var(--bphm-text-light); }
.bphm__quick-card--ghost .bphm__quick-arrow { background: var(--bphm-bg); border: 1.5px solid var(--bphm-line); color: var(--bphm-text-light); }
.bphm__quick-card--ghost:active { border-color: var(--bphm-red); background: var(--bphm-red-soft); }

.bphm__nav { padding: 24px 20px 8px; flex: 1; }
.bphm__nav-label { display: block; padding: 0 8px 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bphm-text-light); border-bottom: 1px solid var(--bphm-line); margin-bottom: 8px; }
.bphm__nav-list { display: flex; flex-direction: column; }
.bphm__nav-link { display: flex; align-items: flex-start; gap: 14px; padding: 14px 8px; min-height: 48px; color: var(--bphm-text); border-radius: 12px; transition: all 0.3s var(--bphm-ease); }
.bphm__nav-link:hover, .bphm__nav-link:active { background: var(--bphm-red-soft); }
.bphm__nav-link:hover .bphm__nav-title, .bphm__nav-link:active .bphm__nav-title { color: var(--bphm-red); }
.bphm__nav-link:hover .bphm__nav-arrow, .bphm__nav-link:active .bphm__nav-arrow { color: var(--bphm-red); transform: translateX(4px); }
.bphm__nav-link[aria-current="page"] { background: var(--bphm-red-soft); }
.bphm__nav-link[aria-current="page"] .bphm__nav-title { color: var(--bphm-red); }
.bphm__nav-num { font-size: 11px; font-weight: 700; color: var(--bphm-red); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; flex-shrink: 0; width: 26px; padding-top: 4px; }
.bphm__nav-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bphm__nav-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; transition: color 0.25s ease; }
.bphm__nav-sub { font-size: 12.5px; color: var(--bphm-text-muted); line-height: 1.45; }
.bphm__nav-arrow { font-size: 18px; color: #aaa; transition: all 0.3s var(--bphm-ease); flex-shrink: 0; align-self: center; }

.bphm__contact { padding: 22px 20px 26px; border-top: 1px solid var(--bphm-line); flex-shrink: 0; margin-top: 16px; }
.bphm__contact-label { display: block; padding: 0 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bphm-text-light); }
.bphm__contact-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.bphm__contact-row { display: flex; align-items: center; gap: 14px; padding: 10px 8px; min-height: 48px; border-radius: 10px; transition: background 0.25s ease; }
.bphm__contact-row:hover, .bphm__contact-row:active { background: var(--bphm-red-soft); }
.bphm__contact-icon { width: 38px; height: 38px; border: 1px solid var(--bphm-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bphm-red); flex-shrink: 0; }
.bphm__contact-icon svg { width: 17px; height: 17px; }
.bphm__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bphm__contact-key { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bphm-text-light); }
.bphm__contact-val { font-size: 13.5px; font-weight: 600; color: var(--bphm-text); word-break: break-word; }
.bphm__socials { display: flex; gap: 8px; padding: 14px 8px 0; border-top: 1px solid var(--bphm-line); }
.bphm__social { width: 40px; height: 40px; border: 1px solid var(--bphm-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bphm-text-muted); transition: all 0.3s var(--bphm-ease); }
.bphm__social svg { width: 15px; height: 15px; }
.bphm__social:hover, .bphm__social:active { background: var(--bphm-red); border-color: var(--bphm-red); color: #ffffff; }

body.bph-lock { overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.bpfoot {
  --bpfoot-red: var(--bp-red); --bpfoot-text: var(--bp-text);
  --bpfoot-text-muted: var(--bp-text-muted); --bpfoot-text-light: var(--bp-text-light);
  --bpfoot-line: var(--bp-line); --bpfoot-bg: var(--bp-bg); --bpfoot-ease: var(--bp-ease);
  width: 100%; background: var(--bpfoot-bg);
  padding: clamp(44px, 6vw, 64px) 0 24px;
  color: var(--bpfoot-text); border-top: 1px solid var(--bpfoot-line);
}
.bpfoot a { transition: color 0.25s ease; }
.bpfoot__container { max-width: var(--bp-max); margin: 0 auto; padding: 0 var(--bp-gutter); }
.bpfoot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--bpfoot-line); }
.bpfoot__col { display: flex; flex-direction: column; min-width: 0; }
.bpfoot__title { font-size: 11px; font-weight: 700; color: var(--bpfoot-red); text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 22px; }

.bpfoot__address { font-size: 14px; line-height: 1.7; color: var(--bpfoot-text-muted); margin: 0 0 20px; }
.bpfoot__address strong { display: block; color: var(--bpfoot-text); font-weight: 700; margin-bottom: 4px; font-size: 14.5px; }
.bpfoot__intro { font-size: 13.5px; line-height: 1.6; color: var(--bpfoot-text-muted); margin: 0 0 20px; }

.bpfoot__list { display: flex; flex-direction: column; gap: 12px; }
.bpfoot__list li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bpfoot__list-key { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bpfoot-text-light); font-weight: 600; }
.bpfoot__list-value { font-size: 14px; color: var(--bpfoot-text); font-weight: 600; word-break: break-word; }
a.bpfoot__list-value:hover { color: var(--bpfoot-red); }

.bpfoot__hours { display: flex; flex-direction: column; margin-bottom: 18px; }
.bpfoot__hours li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--bpfoot-line); gap: 14px; }
.bpfoot__hours li:first-child { padding-top: 0; }
.bpfoot__hours li:last-child { border-bottom: none; }
.bpfoot__hours-day { font-size: 13px; font-weight: 600; color: var(--bpfoot-text); flex-shrink: 0; }
.bpfoot__hours-time { font-size: 12.5px; color: var(--bpfoot-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.bpfoot__note { font-size: 12.5px; line-height: 1.55; color: var(--bpfoot-text-muted); margin: 0; padding-left: 12px; border-left: 2px solid var(--bpfoot-red); }

.bpfoot__sitemap { display: flex; flex-direction: column; gap: 4px; }
.bpfoot__sitemap-link { display: inline-flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--bpfoot-text); transition: all 0.25s ease; }
.bpfoot__sitemap-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bpfoot-line); color: var(--bpfoot-text-muted); font-size: 12px; font-weight: 700; transition: all 0.25s ease; flex-shrink: 0; }
.bpfoot__sitemap-link:hover { color: var(--bpfoot-red); transform: translateX(3px); }
.bpfoot__sitemap-link:hover .bpfoot__sitemap-arrow { background: var(--bpfoot-red); color: #ffffff; }
.bpfoot__sitemap-link--highlight { color: var(--bpfoot-red); }
.bpfoot__sitemap-link--highlight .bpfoot__sitemap-arrow { background: var(--bpfoot-red); color: #ffffff; }

.bpfoot__socials { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.bpfoot__social { width: 40px; height: 40px; border: 1px solid var(--bpfoot-line); color: var(--bpfoot-text-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--bpfoot-ease); flex-shrink: 0; }
.bpfoot__social svg { width: 17px; height: 17px; }
.bpfoot__social:hover { background: var(--bpfoot-red); border-color: var(--bpfoot-red); color: #ffffff; transform: translateY(-2px); }

.bpfoot__cta { padding: 14px 16px; background: linear-gradient(135deg, #fdf3f4 0%, #ffffff 100%); border: 1px solid var(--bp-red-line); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.bpfoot__cta-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bpfoot-red); }
.bpfoot__cta-link { font-size: 16px; font-weight: 700; color: var(--bpfoot-text); letter-spacing: -0.005em; }
.bpfoot__cta-link:hover { color: var(--bpfoot-red); }

.bpfoot__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; gap: 20px; flex-wrap: wrap; }
.bpfoot__copyright { font-size: 12px; color: var(--bpfoot-text-light); letter-spacing: 0.04em; }
.bpfoot__copyright a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bpfoot__copyright a:hover { color: var(--bpfoot-red); }
.bpfoot__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.bpfoot__legal a { font-size: 12px; color: var(--bpfoot-text-light); letter-spacing: 0.04em; }
.bpfoot__legal a:hover { color: var(--bpfoot-red); }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* Tablet quer + kleine Laptops */
@media (max-width: 1100px) {
  .bph__main-inner { gap: 20px; }
  .bph__nav-link { padding: 12px 10px; font-size: 13.5px; }
  .bph__btn { padding: 12px 16px; }
  .bph__btn--ghost .bph__btn-label { display: none; }
}

/* Tablet — ab hier Hamburger statt Navigation */
@media (max-width: 1024px) {
  /* Kopfzeile: 42px Topbar + 78px Hauptzeile + 1px Linie */
  html { --bph-height: 121px; }
  .bph__top-link-text { display: none; }
  .bph__top-link svg { width: 15px; height: 15px; }
  .bph__main-inner { height: 78px; gap: 16px; }
  /* 78px Balken, 46px Logo: oben und unten je 16px Luft. */
  .bph__logo-img { height: 46px; }
  .bph__nav { display: none; }
  .bph__actions { display: none; }
  .bph__hamburger { display: flex; }
  .bpfoot__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* Handy */
@media (max-width: 900px) {
  .bp-cta { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Ohne Topbar bleiben 72px Hauptzeile + 1px Linie */
  html { --bph-height: 73px; }
  .bph__top { display: none; }
  .bph__main-inner { height: 72px; }
  /* 72px Balken, 42px Logo: oben und unten je 15px Luft. */
  .bph__logo-img { height: 42px; }
  .bphm__head { padding: 24px 20px 22px; }
  .bphm__head-title { font-size: 16px; }
  .bphm__quick { padding: 18px 18px 4px; }
  .bphm__quick-card { padding: 14px 16px; gap: 12px; }
  .bphm__quick-icon { width: 40px; height: 40px; }
  .bphm__quick-icon svg { width: 18px; height: 18px; }
  .bphm__quick-title { font-size: 15px; }
  .bphm__nav { padding: 20px 18px 4px; }
  .bphm__nav-link { padding: 12px 8px; gap: 12px; }
  .bphm__nav-title { font-size: 16px; }
  .bphm__nav-sub { font-size: 12px; }
  .bphm__contact { padding: 20px 18px 22px; }
  .bp-blob { filter: blur(80px); opacity: 0.4; }
  .bp-edge-fade { height: 80px; }
}

@media (max-width: 640px) {
  .bpfoot__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .bpfoot__title { margin-bottom: 16px; }
  .bpfoot__address { font-size: 13.5px; }
  .bpfoot__intro { font-size: 13px; margin-bottom: 18px; }
  .bpfoot__list-value { font-size: 13.5px; }
  .bpfoot__hours li { padding: 7px 0; }
  .bpfoot__hours-day { font-size: 12.5px; }
  .bpfoot__hours-time { font-size: 12px; }
  .bpfoot__sitemap-link { font-size: 13.5px; padding: 8px 0; }
  .bpfoot__cta-link { font-size: 15px; }
  .bpfoot__bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; }
  .bpfoot__legal { gap: 20px; }
  /* Buttons auf schmalen Displays volle Breite */
  .bp-btn-row { flex-direction: column; align-items: stretch; }
  .bp-btn-row .bp-btn { width: 100%; }
}

@media (max-width: 420px) {
  /* Ohne Topbar bleiben 66px Hauptzeile + 1px Linie */
  html { --bph-height: 67px; }
  .bph__main-inner { height: 66px; gap: 12px; }
  /* Seitenverhaeltnis 279:65 - bei 38px Hoehe ist das Logo 163px breit.
     Neben Hamburger (44), Abstand (12) und Rand (2x16) bleibt das auch bei
     320px Fensterbreite noch 69px unter der Kante. */
  .bph__logo-img { height: 38px; }
  .bph__hamburger { width: 44px; height: 44px; }
  .bphm__head { padding: 22px 16px 20px; }
  .bphm__quick { padding: 16px 14px 4px; }
  .bphm__quick-card { padding: 13px 14px; }
  .bphm__nav { padding: 18px 14px 4px; }
  .bphm__nav-num { width: 22px; }
  .bphm__nav-title { font-size: 15px; }
  .bphm__contact { padding: 18px 14px 20px; }
  .bpfoot__hours-time { font-size: 11.5px; }
  .bpfoot__legal { gap: 16px; }
  .bpfoot__legal a { font-size: 11.5px; }
}

/* Unter 320px wird es auch mit dem kleineren Logo eng. */
@media (max-width: 320px) {
  html { --bph-height: 61px; }
  .bph__main-inner { height: 60px; }
  .bph__logo-img { height: 34px; }
}

/* Sehr große Screens — Inhalte dürfen nicht auseinanderfallen */
@media (min-width: 1800px) {
  :root { --bp-section-y: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-bp-reveal] { opacity: 1 !important; transform: none !important; }
}