/* ===========================
   Variables & Reset
   =========================== */
:root {
  --color-sage:       #2A9E72;
  --color-sage-dark:  #1A7A56;
  --color-sage-light: #65C49E;
  --color-blue:       #3A8EC4;
  --color-blue-dark:  #2A6E9E;
  --color-blue-light: #7BBDE0;
  --color-cream:      #FAF7F2;
  --color-warm:       #F0E8DC;
  --color-brown:      #8B6F5E;
  --color-brown-dark: #5C4A3D;
  --color-text:       #183828;
  --color-text-muted: #476858;
  --color-border:     #C8DDD5;
  --color-white:      #FFFFFF;
  --color-emergency:      #C0392B;
  --color-emergency-dark: #9B2D22;
  --color-emergency-soft:       #F7E7E4;
  --color-emergency-soft-hover: #F0D6D1;
  --color-emergency-softline:   #E3BDB6;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 1px 3px rgba(44,51,48,.07), 0 1px 2px rgba(44,51,48,.05);
  --shadow-md:  0 4px 16px rgba(44,51,48,.10), 0 2px 6px rgba(44,51,48,.06);
  --shadow-lg:  0 10px 40px rgba(44,51,48,.12), 0 4px 12px rgba(44,51,48,.07);

  --nav-h: 72px;
  --max-w: 1200px;
  --section-py: 96px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  /* verhindert, dass iOS Text beim Drehen des Geräts vergrössert */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  /* kein horizontales Wegscrollen auf schmalen Geräten */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
address { font-style: normal; }

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

/* ===========================
   Typography
   =========================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  /* lange deutsche Komposita brechen auf schmalen Displays sauber um */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1rem; }

p { max-width: 68ch; overflow-wrap: break-word; }

/* ===========================
   Utilities
   =========================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-py); }
.section-alt { background: var(--color-white); }

.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header .section-lead {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-inline: auto;
}
/* Angebot: intro text above the title; title right-aligned, snug over the cards */
#angebot .section-header { margin-bottom: 20px; }
#angebot .section-header .section-lead { margin-bottom: 24px; }
#angebot .section-header h2 { margin-bottom: 0; text-align: center; }

.section-eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 12px;
}

/* ===========================
   Buttons
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-sage);
  color: var(--color-white);
  border-color: var(--color-sage);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-sage-dark);
  border-color: var(--color-sage-dark);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent;
  color: var(--color-sage);
  border-color: var(--color-sage);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--color-sage);
  color: var(--color-white);
}

/* Focus visible for all interactive elements */
:focus-visible {
  outline: 3px solid var(--color-sage);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===========================
   Navigation
   =========================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(250,247,242,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-h);
  transition: box-shadow 200ms ease;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.nav-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.2;
}
.nav-logo span {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-menu a {
  display: block;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: color 200ms, background-color 200ms;
  cursor: pointer;
}
.nav-menu a:hover { color: var(--color-text); background: var(--color-warm); }
/* Untermenü «Angebot» */
.has-submenu { position: relative; }
.nav-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 200ms, background-color 200ms;
}
.nav-submenu-toggle:hover { color: var(--color-text); background: var(--color-warm); }
.nav-submenu-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}
.nav-submenu-toggle[aria-expanded="true"] { color: var(--color-text); background: var(--color-warm); }
.nav-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.nav-submenu[hidden] { display: none; }
.nav-submenu ul { display: flex; flex-direction: column; gap: 2px; }
.nav-menu .nav-submenu a {
  padding: 9px 12px;
  font-size: .95rem;
  color: var(--color-text);
  border-radius: var(--radius-sm);
}
.nav-menu .nav-submenu a:hover { background: var(--color-warm); color: var(--color-sage-dark); }
.nav-submenu-title {
  margin: 12px 12px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-sage);
  max-width: none;
}

.nav-menu .nav-cta {
  background: var(--color-sage);
  color: var(--color-white);
  font-weight: 700;
  padding: 10px 20px;
}
.nav-menu .nav-cta:hover { background: var(--color-sage-dark); color: var(--color-white); }
/* bewusst zurückhaltend: blasses Rot mit dunkelroter Schrift */
.nav-menu .nav-cta-emergency {
  background: var(--color-emergency-soft);
  color: var(--color-emergency-dark);
  border: 1px solid var(--color-emergency-softline);
}
.nav-menu .nav-cta-emergency:hover {
  background: var(--color-emergency-soft-hover);
  color: var(--color-emergency-dark);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  min-width: 52px;
  padding: 8px 14px;
  border: 2px solid var(--color-sage);
  background: var(--color-white);
  color: var(--color-sage);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}
.nav-toggle:hover { background: var(--color-sage); color: var(--color-white); }
/* Die drei Balken */
.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 16px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms ease, opacity 300ms ease;
}
.nav-toggle[aria-expanded="true"] { background: var(--color-sage); color: var(--color-white); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hamburger ab 900px: mit «Kontakt» und «Notfallnummern» braucht die
   Leiste sonst mehr Platz, als schmale Tablets/Handys im Querformat haben */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    padding: 12px;
    gap: 6px;
    box-shadow: var(--shadow-md);
    /* bei sehr kleinen Displays scrollbar statt abgeschnitten */
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-menu.open { display: flex; }
  /* Fingerfreundliche Trefferflächen (min. 48px hoch) */
  .nav-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
  }
  .nav-menu .nav-cta {
    justify-content: center;
    text-align: center;
  }
  /* Untermenü klappt im mobilen Menü an Ort und Stelle auf */
  .nav-submenu-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
  }
  .nav-submenu {
    position: static;
    min-width: 0;
    margin: 4px 0 4px 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    background: var(--color-white);
  }
  .nav-submenu-title { margin-inline: 8px; }
}

/* ===========================
   Hero
   =========================== */
.hero-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
}

/* Hinweisbalken direkt unter der Kopfzeile */
.hero-banner {
  margin-top: var(--nav-h);
  background: var(--color-sage);
  color: var(--color-white);
  padding: 36px clamp(1rem, 4vw, 2.5rem);
}
.hero-banner-static {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
}

.hero {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: 24px;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  max-width: var(--max-w);
  margin-inline: auto;
  gap: 48px;
}

.hero-content { position: relative; z-index: 2; padding-block: 80px 60px; }
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 20px;
}
.hero-content h1 {
  margin-bottom: 24px;
  color: var(--color-text);
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 40px;
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-illustration-wrap {
  position: relative;
  width: 110%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* sehr dezente Schattierung, folgt der Silhouetten-Kontur */
  /* sehr dezente Schattierung, folgt der Silhouetten-Kontur */
  filter: drop-shadow(0 2px 9px rgba(24, 56, 40, 0.18));
}

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-sage);
  opacity: 0.75;
  transition: opacity 200ms ease;
  z-index: 2;
  cursor: pointer;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint svg {
  width: 42px;
  height: 42px;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .hero-image { order: -1; justify-content: center; }
  .hero-illustration-wrap { width: min(280px, 72%); }
}

/* ===========================
   Offer Grid
   =========================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  text-decoration: none;
  color: var(--color-text);
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(44, 51, 48, .30), 0 8px 20px rgba(44, 51, 48, .17);
  border-color: var(--color-sage-dark);
}
.offer-card h3 { margin-block: 16px 12px; text-shadow: 0 1px 3px rgba(42, 158, 114, .4); }
.offer-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Blau -> Sage-Grün der Website (Weiß bleibt Weiß) */
  filter: hue-rotate(-50deg) saturate(0.75) brightness(0.95);
}
.offer-center-title { display: none; }
.offer-card p {
  font-size: .95rem;
  color: var(--color-text-muted);
  flex: 1;
  max-width: none;
}
.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-sage);
}
.offer-link::after {
  content: '→';
  transition: transform 200ms ease;
}
.offer-card:hover .offer-link::after { transform: translateX(4px); }

/* ===========================
   Behandlungsschwerpunkte — Kreis-Layout (nur breite Screens)
   =========================== */
.offer-card:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 3px; }

/* Karten-Index (für Ring-Position und gestaffeltes Einblenden) */
#angebot .offer-grid .offer-card:nth-of-type(1) { --i: 0; }
#angebot .offer-grid .offer-card:nth-of-type(2) { --i: 1; }
#angebot .offer-grid .offer-card:nth-of-type(3) { --i: 2; }
#angebot .offer-grid .offer-card:nth-of-type(4) { --i: 3; }
#angebot .offer-grid .offer-card:nth-of-type(5) { --i: 4; }

/* Sanftes, gestaffeltes Einblenden beim Scrollen (per JS aktiviert).
   Nutzt die eigenständigen Eigenschaften opacity + scale, damit die
   Ring-Positionierung über transform: var(--pos) unberührt bleibt. */
#angebot .offer-grid.js-reveal .offer-card { opacity: 0; }
#angebot .offer-grid.js-reveal.is-visible .offer-card {
  animation: offerCardReveal 620ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes offerCardReveal {
  from { opacity: 0; scale: .9; }
  to   { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #angebot .offer-grid.js-reveal .offer-card { opacity: 1; animation: none; }
}

@media (min-width: 1200px) {
  #angebot .offer-grid {
    display: block;
    position: relative;
    width: min(850px, 100%);
    height: 850px;
    margin-inline: auto;
    /* weicher radialer Schein hinter dem Ring gibt Tiefe */
    background: radial-gradient(circle at 50% 50%,
      rgba(42, 158, 114, .10) 0%,
      rgba(42, 158, 114, .05) 38%,
      rgba(42, 158, 114, 0) 68%);
  }
  /* zarter Orbit-Ring durch die Kartenmittelpunkte */
  #angebot .offer-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    opacity: .6;
    z-index: 0;
    pointer-events: none;
  }
  /* Titel im Ring-Zentrum: echte h2 bleibt semantisch erhalten (sr-only),
     dekorativer Titel wird in die Mitte gesetzt */
  #angebot .section-header h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #angebot .offer-center-title {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 390px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.25;
    color: var(--color-text);
    text-shadow: 0 2px 6px rgba(42, 158, 114, .35);
    z-index: 1;
    pointer-events: none;
  }

  #angebot .offer-grid .offer-card {
    --n: 5;
    --radius: 300px;
    --angle: calc(var(--i) * (360deg / var(--n)));
    --pos: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    margin: 0;
    padding: 30px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
    transform: var(--pos);
  }
  /* runde Ansicht: Titel mittig, "Mehr erfahren" klein & mittig darunter */
  #angebot .offer-grid .offer-card h3 { font-size: 1.15rem; margin: 0; line-height: 1.25; }
  #angebot .offer-grid .offer-card p { display: none; }
  #angebot .offer-grid .offer-card .offer-link { align-self: center; margin-top: 0; font-size: .75rem; }
  /* Position bei Hover halten; Feedback über Schatten/Rahmen (kein Layout-Shift) */
  #angebot .offer-grid .offer-card:hover {
    transform: var(--pos);
  }

  /* etwas mehr Luft zwischen Überschrift und Kreis */
  #angebot .section-header { margin-bottom: 40px; }
}

/* ===========================
   About
   =========================== */
.about-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}

.about-image-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.about-image-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(145deg, var(--color-warm), var(--color-border));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.about-image-placeholder svg { width: 60%; height: 60%; }
.about-image-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Farbe explizit setzen: .about-text p (unten) hat sonst höhere Spezifität */
.about-text .section-eyebrow { margin-bottom: 8px; color: var(--color-sage); }
.about-text h2 { margin-bottom: 4px; }
/* .about-text p (unten) würde die Farbe sonst überschreiben */
.about-text .about-title {
  font-size: .9rem;
  color: var(--color-sage);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.about-text p { margin-bottom: 16px; color: var(--color-text-muted); }

.qualifications { margin-block: 32px; }
.qualifications h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.qual-list { display: flex; flex-direction: column; gap: 12px; }
.qual-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
}
.qual-list li svg {
  width: 18px;
  height: 18px;
  color: var(--color-sage);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-image-wrap { position: static; max-width: 280px; }
  .about-image-placeholder { aspect-ratio: 1/1; }
}

/* ===========================
   Konditionen
   =========================== */
/* eine gemeinsame Box um beide Blöcke */
.konditions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 960px;
  margin-inline: auto;
  padding: 56px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* dezente Trennung zwischen den beiden Blöcken */
.konditions-grid .kondition-card + .kondition-card {
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

/* Ohne Kasten: die Angaben stehen direkt auf dem Seitenhintergrund */
.kondition-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.kondition-icon {
  display: flex;
  align-items: center;
  color: var(--color-sage);
  margin-bottom: 12px;
}
.kondition-icon svg { width: 28px; height: 28px; }
.kondition-card h3 { margin-bottom: 12px; }
.kondition-card p { font-size: .95rem; color: var(--color-text-muted); max-width: none; }
.kondition-card p + p { margin-top: 14px; }
/* optisch gleicher Abstand wie über dem Block: dort kommen zur 20px-Marge noch
   ~3px Unterlänge des vorangehenden Absatzes hinzu */
.kondition-note + p { margin-top: 17px; }

/* bleibt bewusst ein hervorgehobener Block */
.kondition-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--color-warm);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--color-brown-dark);
}
.kondition-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.praxis-address + p { margin-top: 20px; }
.praxis-address {
  margin-top: 16px;
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===========================
   Contact
   =========================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-item svg {
  width: 24px;
  height: 24px;
  color: var(--color-sage);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-item strong {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}
.contact-item a {
  color: var(--color-sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-item a:hover { color: var(--color-sage-dark); }
.contact-item small { font-size: .8rem; color: var(--color-text-muted); }

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.form-group span[aria-hidden] { color: var(--color-brown); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color 200ms ease;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-muted); opacity: .6; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(91,123,111,.15);
}
.form-group input.error,
.form-group textarea.error { border-color: #c0392b; }
.form-group textarea { resize: vertical; min-height: 130px; }

.form-privacy {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.form-privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-sage);
  cursor: pointer;
}
.form-privacy label {
  font-size: .875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
}
.form-privacy a { color: var(--color-sage); text-decoration: underline; text-underline-offset: 2px; }

.form-submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-note { font-size: .875rem; color: var(--color-text-muted); max-width: none; }

.form-feedback {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  display: none;
}
.form-feedback.success {
  display: block;
  background: #EAF4F0;
  color: #2D6A4F;
  border: 1px solid #74C69D;
}
.form-feedback.error {
  display: block;
  background: #FDF0EE;
  color: #c0392b;
  border: 1px solid #e8a09a;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ===========================
   Footer
   =========================== */
.site-footer {
  background: var(--color-text);
  color: rgba(255,255,255,.75);
  padding-block: 64px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand .footer-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-white);
  margin-bottom: 4px;
  max-width: none;
}
.footer-brand .footer-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-sage-light);
  margin-bottom: 16px;
  max-width: none;
}
.footer-brand p { font-size: .9rem; max-width: none; }
.footer-nav h4 {
  font-family: var(--font-body);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-sage-light);
  margin-bottom: 16px;
}
.footer-nav ul { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a {
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  transition: color 200ms;
}
.footer-nav a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
}
.footer-bottom p { font-size: .8rem; max-width: none; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===========================
   Subpage Layout
   =========================== */
.page-hero {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-warm) 100%);
  padding: calc(var(--nav-h) + 60px) 0 60px;
  border-bottom: 1px solid var(--color-border);
}
.page-hero-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.page-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  color: var(--color-sage);
  margin-bottom: 24px;
  transition: gap 200ms;
  cursor: pointer;
}
.page-hero .back-link:hover { gap: 10px; }
.page-hero h1 { margin-bottom: 16px; }
.page-hero-portrait {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  /* Bildausschnitt leicht nach oben: das Gesicht bleibt mittig */
  object-position: 50% 22%;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}
.page-hero .lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.page-content {
  max-width: 720px;
  margin-inline: auto;
  padding: 64px clamp(1rem, 4vw, 2.5rem);
}
.page-content h2 { margin-block: 40px 16px; }
.page-content h3 { margin-block: 28px 12px; }
.page-content p { margin-bottom: 16px; color: var(--color-text-muted); }
.page-content ul, .page-content ol {
  margin-bottom: 16px;
  padding-left: 1.5rem;
  list-style: disc;
  color: var(--color-text-muted);
}
.page-content li { margin-bottom: 8px; }
/* Steckbrief: Jahresangabe links, Station rechts */
.page-content .cv-list { margin-bottom: 24px; }
.page-content .cv-entry {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 4px 20px;
  padding-block: 12px;
  border-top: 1px solid var(--color-border);
}
.page-content .cv-entry:last-child { border-bottom: 1px solid var(--color-border); }
.page-content .cv-entry dt {
  font-weight: 700;
  color: var(--color-sage);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-content .cv-entry dd { color: var(--color-text-muted); }

.page-content .emergency-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}
.page-content .emergency-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--color-white);
  border-left: 4px solid var(--color-emergency);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.page-content .emergency-list a {
  color: var(--color-emergency);
  font-size: 1.25rem;
  white-space: nowrap;
}
.page-content .emergency-list a:hover { color: var(--color-emergency-dark); }
.page-content .emergency-list span { flex: 1 1 260px; }

.page-content .video-embed {
  margin-block: 24px 32px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-warm);
}
.page-content .video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.page-content .video-caption {
  margin-top: -20px;
  margin-bottom: 32px;
  font-size: .875rem;
}
.page-content .cta-box {
  margin-top: 48px;
  padding: 36px;
  background: var(--color-warm);
  border-radius: var(--radius-lg);
  text-align: center;
}
.page-content .cta-box h3 { margin-block: 0 12px; color: var(--color-text); }
.page-content .cta-box p { margin-bottom: 24px; color: var(--color-text-muted); }

/* ===========================
   Handy-Optimierung
   Alles ab hier priorisiert die Darstellung auf Smartphones:
   kompaktere Abstände, volle Breite für Aktionen, grosse Trefferflächen.
   =========================== */
@media (max-width: 600px) {
  :root {
    --section-py: 48px;
    /* flachere Kopfzeile lässt mehr Inhalt sichtbar */
    --nav-h: 60px;
  }

  /* Grosszügigere, aber randnahe Innenabstände */
  .container,
  .nav-container,
  .page-hero-inner,
  .page-content { padding-inline: 18px; }

  /* Typografie: etwas kleinere Überschriften, ruhigerer Textfluss */
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.55rem; }
  .section-header { margin-bottom: 32px; }
  .section-header .section-lead,
  .hero-sub { font-size: 1rem; }

  /* Hero: Bild oben, Text darunter, Buttons über die volle Breite */
  .hero { gap: 24px; padding-top: 24px; padding-bottom: 40px; }
  .hero-content { padding-block: 0 8px; }
  .hero-content h1 { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-illustration-wrap { width: min(220px, 62%); }
  /* Scroll-Pfeil braucht auf dem Handy keinen Platz */
  .scroll-hint { display: none; }

  /* Karten: kompakter, damit mehr auf den Schirm passt */
  .offer-grid { grid-template-columns: 1fr; gap: 16px; }
  .offer-card { padding: 22px; }
  .offer-card h3 { margin-block: 12px 8px; }
  .offer-link { margin-top: 14px; }
  .konditions-grid { padding: 22px; gap: 28px; }
  .konditions-grid .kondition-card + .kondition-card { padding-top: 28px; }
  .kondition-card h3 { font-size: 1.15rem; }

  /* Über mich: Bild zentriert und kleiner */
  .about-layout { gap: 28px; }
  .about-image-wrap { max-width: 220px; margin-inline: auto; }
  /* Hochformat beibehalten, damit das Portrait nicht beschnitten wirkt */
  .about-image-placeholder { aspect-ratio: 3/4; }
  .about-text .btn { width: 100%; justify-content: center; }

  /* Kontakt: Formular über die volle Breite, Absenden gut treffbar */
  .contact-layout { gap: 32px; }
  .contact-info { gap: 22px; }
  .form-submit .btn { width: 100%; justify-content: center; }

  /* Unterseiten */
  .page-hero { padding: calc(var(--nav-h) + 32px) 0 32px; }
  .page-hero .lead { font-size: 1.05rem; }
  .page-content { padding-block: 36px 44px; }
  .page-content h2 { margin-block: 28px 12px; }
  .page-content .cta-box { margin-top: 32px; padding: 24px 20px; }
  .page-content .cta-box .btn { width: 100%; justify-content: center; }

  /* Steckbrief: Jahr über der Station statt daneben */
  .page-content .cv-entry { grid-template-columns: 1fr; gap: 2px; padding-block: 14px; }

  /* Notfallnummern: Nummer gross und als eigene Zeile über der Erklärung */
  .page-content .emergency-list li { flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 16px; }
  .page-content .emergency-list a { font-size: 1.4rem; min-height: 44px; display: flex; align-items: center; }
  /* in der Spaltenrichtung wirkt flex-basis auf die Höhe — zurücksetzen */
  .page-content .emergency-list span { flex: 0 1 auto; }

  /* Footer kompakter, Links trotzdem gut treffbar */
  .site-footer { padding-block: 40px 24px; }
  .footer-grid { gap: 28px; margin-bottom: 28px; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-nav ul { gap: 0; }

  /* Weitere Trefferflächen auf Fingergrösse bringen */
  .nav-logo { min-height: 44px; justify-content: center; }
  .page-hero .back-link { min-height: 44px; margin-bottom: 12px; }
  .contact-item a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Sehr schmale Geräte (iPhone SE & Co.) */
@media (max-width: 380px) {
  .container,
  .nav-container,
  .page-hero-inner,
  .page-content { padding-inline: 14px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  .offer-card { padding: 18px; }
  .btn { padding: 14px 20px; white-space: normal; text-align: center; }
}

/* Touch-Geräte: Hover-Effekte, die am Finger «kleben», deaktivieren */
@media (hover: none) {
  .offer-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: var(--color-sage);
  }
  .offer-card:hover .offer-link::after { transform: none; }
  .page-hero .back-link:hover { gap: 6px; }
}