/* ==========================================================================
   VdB e.V. Stadtverband Magdeburg — Design System
   ========================================================================== */

:root {
  --color-primary: #146b34;
  --color-primary-dark: #0d4a24;
  --color-primary-light: #e6f2ea;
  --color-accent: #a0520d;
  --color-accent-dark: #7a3f0a;
  --color-accent-light: #fbeee0;
  --color-bg: #fbf9f4;
  --color-surface: #ffffff;
  --color-text: #262e26;
  --color-text-muted: #5b6259;
  --color-border: #e6e1d3;
  --shadow-sm: 0 1px 3px rgba(20, 30, 20, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 30, 20, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 30, 20, 0.14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --header-h: 84px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* No overflow-x:hidden here: it's not needed now that the off-canvas nav
   is positioned with `right` instead of `transform` (see .main-nav below),
   and setting it on html/body would break the header's position:sticky —
   any ancestor with overflow other than visible disables sticky for its
   descendants in every browser. */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* German compounds words (Berufshaftpflichtversicherung, Personen-
     beförderungsschein, ...) have no natural break point and can be wider
     than a narrow phone screen on their own; break them rather than
     letting them push the layout wider than the viewport. */
  overflow-wrap: break-word;
  word-break: normal;
}

a, button { touch-action: manipulation; }

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen-reader-only: keeps content in the accessibility tree and visible
   to screen readers / voice output, while removing it from the visual
   layout entirely (unlike display:none or visibility:hidden, which also
   hide it from assistive tech). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: the first focusable element on every page, invisible until a
   keyboard user tabs to it, then jumps past the repeated header/nav
   straight to the page's main content. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--color-primary-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Visible focus ring for every interactive element, keyboard-only
   (:focus-visible skips it for mouse/touch clicks so it doesn't clutter
   the pointer experience, while still always showing for keyboard nav).
   A white ring plus a dark ring behind it — rather than a single
   brand-colored outline — stays legible regardless of what it's sitting
   on: the cream page, a white card, the orange CTA gradient or the dark
   green footer all have enough contrast against one half of the pair. */
a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible,
iframe:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-primary-dark);
  border-radius: 4px;
}
.main-nav a:focus-visible,
.mobile-bar a:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--color-primary-dark);
}
/* #main-content only ever receives focus programmatically, via the skip
   link's fragment jump — never through Tab — so a ring around the entire
   page would just look like a rendering glitch. The scroll itself is
   sighted users' confirmation; screen readers get the landmark announcement
   regardless of any visible outline. */
#main-content:focus {
  outline: none;
  box-shadow: none;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }
img { max-width: 100%; display: block; }
ul { padding-left: 0; list-style: none; margin: 0; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--color-surface); }
.section--primary {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #eef6ee;
}
.section--primary h2, .section--primary h3 { color: #ffffff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

.lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.section--primary .btn-outline { color: #fff; }
.section--primary .btn-outline:hover { background: #fff; color: var(--color-primary-dark); }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

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

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
}
/* The blur lives on a pseudo-element rather than .site-header itself:
   backdrop-filter (like transform/filter) makes an element establish a new
   containing block for position:fixed descendants — which would trap the
   off-canvas nav (a descendant of the header) inside the header's own
   ~70px box instead of letting it size against the real viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 249, 244, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.brand img { height: 44px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.05rem; }
.brand-text span { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; }

.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--color-text);
}
.main-nav a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.main-nav a.is-active { background: var(--color-primary); color: #fff; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.header-phone svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  flex-shrink: 0;
  background: var(--color-primary-dark);
  border-radius: 2px;
  transition: 0.2s;
}

.nav-backdrop { display: none; }
body.nav-lock { overflow: hidden; }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 15%, var(--color-accent-light) 0%, transparent 55%),
              radial-gradient(circle at 5% 90%, var(--color-primary-light) 0%, transparent 45%),
              var(--color-bg);
  padding: 76px 0 40px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 30px; }
.hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3.1;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero { padding: 64px 0 56px; text-align: center; }
.page-hero .lead { margin-left: auto; margin-right: auto; }
.page-hero .eyebrow { justify-content: center; }

/* ---- Trust strip ---- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 22px 0 6px;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.92rem;
}
.trust-strip li { display: flex; align-items: center; gap: 10px; }
.trust-strip svg { color: var(--color-accent); flex-shrink: 0; }

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card--accent .card__icon { background: var(--color-accent-light); color: var(--color-accent-dark); }
.card p:last-child { margin-bottom: 0; }
.card a.card-link { font-family: var(--font-heading); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }

.section-head { max-width: 720px; margin: 0 0 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Service list (check items) ---- */
/* min-width:0 on both the grid cell and the flex row inside it: without it,
   a li that is simultaneously a grid item (of .check-list) and a flex
   container (for its own icon+text) defaults to min-width:auto at both
   levels, which can block text from wrapping and stretch the grid track
   past the available column width. */
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; min-width: 0; }
/* Icon floated rather than flexed: when a li's label contains inline markup
   (e.g. <strong>) alongside plain text, flexbox turns text-strong-text into
   several rigid sibling items that refuse to wrap as one sentence and can
   overflow their column. Floating the icon keeps the label as ordinary
   wrapping text, which handles any mix of inline tags correctly. */
.check-list li {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
}
.check-list li svg { float: left; margin-top: 3px; margin-right: 12px; color: var(--color-primary); }

/* ---- Person / contact card ---- */
.person-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.person-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.person-card__role { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; }
.person-card__name { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary-dark); }

/* ---- Leitbild / quote block ---- */
.leitbild {
  background: var(--color-primary-dark);
  color: #eaf3ec;
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.leitbild::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/strahlen-grafik.jpeg') center/240px no-repeat;
  opacity: 0.10;
  mix-blend-mode: screen;
  transform: scale(2.4);
}
.leitbild__inner { position: relative; max-width: 640px; margin: 0 auto; }
.leitbild h2 { color: #fff; margin-bottom: 28px; }
.leitbild p { font-size: 1.12rem; margin: 0 0 6px; color: #dcece0; }
.leitbild strong { color: #ffd9a0; }

/* ---- Stamp / badge visual ---- */
.stamp-figure {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp-figure img {
  width: 100%;
  max-width: 300px;
  filter: drop-shadow(0 8px 20px rgba(20,30,20,0.12));
}

/* ---- Quote / callout ---- */
.callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 22px 26px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-accent-dark);
  font-size: 1.08rem;
}

/* ---- Info / hours table ---- */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td, .hours-table th { padding: 14px 4px; border-bottom: 1px solid var(--color-border); }
.hours-table th { font-weight: 600; color: var(--color-text); text-align: left; font-family: inherit; }
.hours-table td:last-child { text-align: right; font-family: var(--font-heading); color: var(--color-primary-dark); font-weight: 600; }
.hours-table tr:last-child td, .hours-table tr:last-child th { border-bottom: none; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-block { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-block__icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--color-primary-light); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-block h3 { margin-bottom: 4px; font-size: 1.05rem; }
.contact-block a, .contact-block address { color: var(--color-text); font-style: normal; }

.map-frame {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { position: relative; padding-top: 8px; }
.step__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-primary-light);
  -webkit-text-stroke: 2px var(--color-primary);
  margin-bottom: 8px;
  display: block;
}

/* ---- Job cards ---- */
.job-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.job-card img { width: 64px; height: 64px; }
.job-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 999px;
}
.job-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #c98b1c; }

/* ---- CTA banner ---- */
.cta-banner {
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; margin-bottom: 6px; }
.cta-banner p { color: #fdece0; margin: 0; }
.cta-banner .btn-primary { background: #fff; color: var(--color-accent-dark); }
.cta-banner .btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: #cfe3d4;
  padding: 64px 0 0;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { height: 38px; background: #fff; border-radius: 6px; padding: 4px; }
.footer-brand strong { color: #fff; font-family: var(--font-heading); }
.site-footer h3 { color: #fff; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; font-weight: 600; }
.site-footer a { color: #cfe3d4; }
.site-footer a:hover { color: #ffd9a0; }
.footer-list li { margin-bottom: 10px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 0.85rem;
  color: #9fc1a7;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: #9fc1a7; }

/* ---- Mobile call bar ---- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.mobile-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 54px;
  padding: 10px 4px 12px;
  font-size: 0.72rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.mobile-bar svg { color: var(--color-accent); }

/* ---- Legal text ---- */
.legal h3 { margin-top: 2.2em; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.legal li { margin-bottom: 6px; }
.legal { max-width: 78ch; }

/* ---- Utilities ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 480px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
}

/* Tablets (portrait + landscape) and small laptops: off-canvas nav.
   Kept separate from the phone tier below because the full inline nav
   needs ~1150px to fit without wrapping — well past phone width. */
@media (max-width: 1180px) {
  :root { --header-h: 68px; }
  /* A right-anchored drawer, not a full-viewport panel slid with `transform`:
     position:fixed + transform is a well-known trap — the browser still
     counts the translated-away box in the document's scrollable area, which
     silently doubles the page width and lets iOS/Android rubber-band-scroll
     sideways into blank space. Animating `right` instead keeps the box
     genuinely fixed-and-offscreen with no phantom overflow. */
  .main-nav {
    position: fixed;
    top: 68px;
    bottom: 0;
    right: -100%;
    left: auto;
    width: min(100%, 420px);
    background: var(--color-bg);
    padding: 20px max(24px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 24px;
    box-shadow: -12px 0 32px rgba(20, 30, 20, 0.14);
    transition: right 0.25s ease;
    overflow-y: auto;
    z-index: 150;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.is-open { right: 0; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .main-nav a { padding: 14px 16px; font-size: 1.05rem; }
  .nav-toggle { display: flex; }
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 20, 14, 0.38);
    z-index: 140;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .nav-backdrop.is-open { display: block; opacity: 1; }
}

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .header-phone span { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .mobile-bar { display: block; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .leitbild { padding: 48px 24px; }
}

/* Small / medium screens in portrait: iPhones, small Android phones. */
@media (max-width: 480px) {
  .cta-banner .btn-row,
  .cta-banner a.btn { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* Narrow phones (≤380px, e.g. iPhone SE / small Android): brand + phone
   icon + CTA button + hamburger no longer fit on one row. Drop the header's
   CTA button — the hamburger menu and the bottom call/mail/directions bar
   already cover it — rather than let the row overflow. */
@media (max-width: 380px) {
  .header-cta .btn-primary { display: none; }
}

/* Landscape phones and short browser windows: reclaim vertical space —
   sticky header + fixed bottom bar can otherwise eat most of the viewport. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: 60px; }
  .section { padding: 34px 0; }
  .section--tight { padding: 22px 0; }
  .hero { padding-top: 24px; padding-bottom: 12px; }
  .page-hero { padding: 28px 0 24px; }
  .leitbild { padding: 32px 24px; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .main-nav { top: 60px; padding-top: 12px; }
}