@import url('fonts.css');

/* =========================================================================
   PourDental – Zahnärztliche Praxis P. Pezeshkpour, Aachen
   Ein Stylesheet, keine Frameworks, keine Abhängigkeiten.

   Aufbau
   1  Tokens            Farben, Typografie, Abstände, Radien
   2  Grundlagen        Reset, Typografie, Fokus, Bilder
   3  Layout            Container, Sections, Raster
   4  Kopfzeile         Header, Navigation, mobiles Menü
   5  Bausteine         Buttons, Karten, Listen, Badges …
   6  Abschnitte        Hero, Leistungen, Team, FAQ, Karte …
   7  Fußzeile          Footer, mobile Aktionsleiste
   8  Bewegung          Scroll-Reveal, reduzierte Bewegung
   ========================================================================= */

/* ============ 1  Tokens ================================================= */
:root {
  color-scheme: light;

  /* Marke – gemessen aus dem gelieferten Logo */
  --lime: #8ece01;
  --lime-dark: #78ae00;
  --lime-soft: #f2f8e2;
  --lime-line: #dcecb4;
  /* Grün, das als Text auf Weiß 6,3:1 erreicht – das Markengrün selbst
     schafft nur 2:1 und wird deshalb nie für Text verwendet. */
  --lime-ink: #45680a;

  --ink: #161a14;
  --ink-soft: #1f261c;
  --text: #454a42;
  --muted: #6b7166;
  --muted-dark: #a8afa2;

  --bg: #ffffff;
  --bg-soft: #f6f7f2;
  --bg-deep: #eef1e6;
  --line: #e3e6db;
  --line-strong: #d2d7c6;

  /* Dunkler als das Marken-Grün von WhatsApp: erst ab hier trägt weiße
     Schrift auf der Fläche 4,5:1, und die Farbe bleibt auch als Text auf
     Weiß lesbar (Aktionsleiste). */
  --wa: #157f3f;
  --wa-dark: #10692f;

  /* Typografie */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--2: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.14vw, 0.95rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.26rem + 0.68vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.45vw, 2.7rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5: clamp(2.4rem, 1.65rem + 3.6vw, 4.6rem);

  /* Abstände */
  --gap: clamp(1.25rem, 2.4vw, 2rem);
  --section: clamp(4rem, 7.5vw, 7rem);
  --wrap: 76rem;
  --wrap-pad: clamp(1.15rem, 4vw, 2.5rem);

  /* Formen */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgb(22 26 20 / 0.05), 0 4px 14px -8px rgb(22 26 20 / 0.14);
  --shadow: 0 2px 6px rgb(22 26 20 / 0.05), 0 18px 40px -22px rgb(22 26 20 / 0.28);
  --shadow-lg: 0 4px 10px rgb(22 26 20 / 0.06), 0 34px 70px -30px rgb(22 26 20 / 0.34);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ============ 2  Grundlagen ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: 0.9em;
}

a {
  color: inherit;
}

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

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

img,
video {
  height: auto;
}

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

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

/* Auf dunklem Grund wäre das dunkle Grün nicht zu sehen. */
.section--ink :focus-visible,
.cta :focus-visible,
.footer :focus-visible {
  outline-color: var(--lime);
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

.skip {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip:focus-visible {
  transform: translateY(0);
}

/* Hilfsklassen */
.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text);
}

.small {
  font-size: var(--step--1);
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

.narrow {
  max-width: 46rem;
  margin-inline: auto;
}

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

/* ============ 3  Layout ================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.section {
  padding-block: var(--section);
}

.section--tight {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.section--soft {
  background: var(--bg-soft);
}

.section--ink {
  background: var(--ink);
  color: #d9ded4;
}

.section--ink h2,
.section--ink h3,
.section--ink strong {
  color: #fff;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

.section-head > p {
  margin-top: 1rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: var(--lime);
  border-radius: 2px;
}

.is-centered .eyebrow,
.eyebrow--center {
  justify-content: center;
}

.section--ink .eyebrow {
  color: var(--lime);
}

/* Raster */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Zweispalter Text/Bild */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--text-wide {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .split--media-wide {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .split--flip > :first-child {
    order: 2;
  }
}

/* ============ 4  Kopfzeile ============================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--line);
  background: rgb(255 255 255 / 0.94);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

.brand__mark {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.04);
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.brand__sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: none;
  gap: 0.35rem;
}

.nav a {
  position: relative;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-full);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.34rem;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.nav a[aria-current='page'] {
  color: var(--ink);
}

.nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.header__cta {
  display: none;
}

@media (min-width: 62rem) {
  .nav,
  .header__cta {
    display: flex;
  }
}

/* Burger */
.burger {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.burger:hover {
  border-color: var(--ink);
}

.burger span,
.burger span::before,
.burger span::after {
  content: '';
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity 120ms linear;
}

.burger span::before {
  transform: translateY(-6px);
}

.burger span::after {
  transform: translateY(4px);
}

.burger[aria-expanded='true'] span {
  background: transparent;
}

.burger[aria-expanded='true'] span::before {
  transform: rotate(45deg);
}

.burger[aria-expanded='true'] span::after {
  transform: rotate(-45deg) translateY(-1px);
}

@media (min-width: 62rem) {
  .burger {
    display: none;
  }
}

/* Mobiles Menü */
.mobile-nav {
  position: fixed;
  inset: 4.5rem 0 auto;
  z-index: 89;
  display: grid;
  gap: 0.15rem;
  padding: 1rem var(--wrap-pad) 1.75rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateY(-115%);
  visibility: hidden;
  transition: transform 320ms var(--ease), visibility 320ms;
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav a.mobile-nav__link {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.mobile-nav .btn-row {
  margin-top: 1.25rem;
}

@media (min-width: 62rem) {
  .mobile-nav {
    display: none;
  }
}

/* ============ 5  Bausteine ============================================== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgb(120 174 0 / 0.9);
}

.btn--primary:hover {
  background: var(--lime-dark);
  box-shadow: 0 16px 30px -14px rgb(120 174 0 / 0.95);
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  background: #000;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: #fff;
}

/* Auf dunklem Grund muss der Umriss-Button umgefärbt werden – sonst steht
   dunkle Schrift auf dunkler Fläche. Gilt für beide dunklen Bausteine. */
.section--ink .btn--ghost,
.cta .btn--ghost {
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
}

.section--ink .btn--ghost:hover,
.cta .btn--ghost:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
}

.btn--light {
  background: #fff;
  color: var(--ink);
}

.btn--light:hover {
  background: var(--bg-deep);
}

.btn--wa {
  background: var(--wa);
  color: #fff;
}

.btn--wa:hover {
  background: var(--wa-dark);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.88rem;
}

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

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--lime-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--lime-line);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.arrow-link::after {
  content: '→';
  transition: transform var(--dur) var(--ease);
}

.arrow-link:hover {
  border-color: var(--lime);
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

.section--ink .arrow-link,
.cta .arrow-link {
  color: var(--lime);
  border-color: rgb(142 206 1 / 0.35);
}

/* Karte */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: var(--r-sm);
  background: var(--lime-soft);
  color: var(--lime-ink);
}

.card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.card__foot {
  margin-top: auto;
  padding-top: 1.25rem;
}

a.card {
  text-decoration: none;
  color: inherit;
}

a.card::after {
  content: '→';
  position: absolute;
  top: clamp(1.4rem, 2.4vw, 1.9rem);
  right: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--lime-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

a.card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.card:hover,
a.card:hover {
  transform: translateY(-4px);
  border-color: var(--lime-line);
  box-shadow: var(--shadow);
}

.section--soft .card {
  background: #fff;
}

/* Bildkarte */
.card--media {
  padding: 0;
  overflow: hidden;
}

.card--media .card__body {
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card--media figure {
  overflow: hidden;
  background: var(--bg-deep);
}

.card--media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.card--media:hover img {
  transform: scale(1.045);
}

.card--media a.card::after,
a.card--media::after {
  top: auto;
  bottom: clamp(1.3rem, 2.2vw, 1.7rem);
}

/* Bildrahmen */
.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-deep);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--tall img {
  aspect-ratio: 4 / 5;
}

.frame--wide img {
  aspect-ratio: 3 / 2;
}

/* Zahlen-/Faktenliste */
.checks {
  display: grid;
  gap: 0.7rem;
}

.checks li {
  position: relative;
  padding-left: 1.9rem;
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-soft);
}

.section--ink .checks li::before,
.cta .checks li::before {
  box-shadow: 0 0 0 4px rgb(142 206 1 / 0.16);
}

/* Punkteliste mit Symbol – wie eine Karte, nur ohne Rahmen */
.punkte {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.punkte > div {
  display: flex;
  gap: 1rem;
}

.punkte .card__icon {
  margin-bottom: 0;
  flex: none;
}

.punkte h3 {
  margin-bottom: 0.25rem;
}

/* Definitionsliste für Leistungen */
.leistungsliste {
  display: grid;
  gap: 0;
  margin-top: 1.5rem;
}

.leistungsliste > div {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.leistungsliste > div:last-child {
  border-bottom: 1px solid var(--line);
}

.leistungsliste dt {
  font-weight: 700;
  color: var(--ink);
}

.leistungsliste dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Info-Zeilenliste (Öffnungszeiten, Kontaktdaten) */
.zeilen {
  display: grid;
}

.zeilen li,
.zeilen > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}

.zeilen li:last-child,
.zeilen > div:last-child {
  border-bottom: 1px solid var(--line);
}

.zeilen dt,
.zeilen li > :first-child {
  font-weight: 600;
  color: var(--ink);
}

.zeilen dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.zeilen .zu {
  color: var(--muted);
}

.zeilen li.is-today {
  background: var(--lime-soft);
  margin-inline: -0.85rem;
  padding-inline: 0.85rem;
  border-radius: var(--r-xs);
  border-top-color: transparent;
}

.zeilen li.is-today + li {
  border-top-color: transparent;
}

.zeilen li.is-today > :first-child::after {
  content: 'heute';
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* Pille / Badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-full);
  background: var(--lime-soft);
  border: 1px solid var(--lime-line);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--lime-ink);
}

.pill svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Sterne – tiefes Bernstein statt Signalgelb. Erst hier tragen die
   Zeichen auf Weiß 4,8:1 und gelten damit auch als Text als lesbar. */
.stars {
  color: #9a6800;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}

/* Hinweiskasten */
.hinweis {
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  border-radius: var(--r);
  background: #fff8e2;
  border: 1px solid #f0d68a;
  color: #4a3c10;
}

.hinweis h2,
.hinweis h3 {
  color: #4a3c10;
  font-size: var(--step-1);
  font-family: var(--font-sans);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.hinweis ul {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.hinweis li {
  padding-left: 1.1rem;
  position: relative;
}

.hinweis li::before {
  content: '–';
  position: absolute;
  left: 0;
}

/* Notfallhinweis */
.notfall {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  background: var(--lime-soft);
  border: 1px solid var(--lime-line);
}

.notfall svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  color: var(--lime-ink);
  margin-top: 0.15rem;
}

/* ============ 6  Abschnitte ============================================= */

/* --- Hero --- */
.hero {
  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 62%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -18rem;
  right: -14rem;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(142 206 1 / 0.16), transparent 62%);
  pointer-events: none;
}

/* Textblock und Portrait stehen ab 64rem nebeneinander, darunter
   untereinander. Das Portrait ist freigestellt und braucht deshalb eine
   ruhige Fläche im Rücken, sonst verliert sich der weiße Kasack im
   ohnehin hellen Hintergrund des Hero. */
.hero__top {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}

@media (min-width: 64rem) {
  .hero__top {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.hero__inner {
  position: relative;
  max-width: 54rem;
}

.hero__portrait {
  position: relative;
  display: grid;
  place-items: end center;
}

/* Weicher Kreis in Markenfarbe – greift die Ringform des Signets auf. */
.hero__portrait::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(165deg, var(--lime-soft), var(--bg-deep));
}

.hero__portrait picture {
  position: relative;
}

.hero__portrait img {
  width: min(100%, 15rem);
  filter: drop-shadow(0 20px 30px rgb(22 26 20 / 0.16));
}

@media (min-width: 64rem) {
  .hero__portrait::before,
  .hero__portrait img {
    width: min(100%, 23rem);
  }
}

.hero h1 {
  margin-top: 0.4rem;
}

/* Bewusst kein italic: von der Display-Serif ist nur der aufrechte
   Schnitt geladen, ein Browser würde die Kursive sonst schräg stellen
   statt sie zu setzen – das sieht man einer Serif sofort an. Die
   Hervorhebung übernimmt deshalb die Farbe. */
.hero h1 em {
  font-style: normal;
  color: var(--lime-ink);
}

.hero .lead {
  margin-top: 1.4rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
}

.hero .btn-row {
  margin-top: 2rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.9rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.hero__proof a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--lime-line);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease);
}

.hero__proof a:hover {
  border-color: var(--lime);
}

/* Breites Kopfbild mit überlappender Infokarte */
.hero__media {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.hero__photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: var(--shadow-lg);
}

.hero__photo img {
  width: 100%;
  /* Auf schmalen Displays der ruhigere 3:2-Ausschnitt; das passende
     Bild liefert die art-direction im <picture>. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 48rem) {
  .hero__photo img {
    aspect-ratio: 21 / 9;
  }
}

.fakten {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 1.25rem;
}

.fakten > div {
  display: flex;
  gap: 0.85rem;
  padding: 1.15rem 1.3rem;
  background: #fff;
}

.fakten svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  color: var(--lime-ink);
  margin-top: 0.15rem;
}

.fakten dt {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fakten dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.fakten dd a {
  text-decoration: none;
}

.fakten dd a:hover {
  color: var(--lime-ink);
}

.fakten dd span {
  display: block;
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--muted);
}

@media (min-width: 46rem) {
  .fakten {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64rem) {
  .hero__media {
    margin-bottom: 4.5rem;
  }

  .fakten {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3rem);
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: -3.25rem;
    margin-top: 0;
    box-shadow: var(--shadow);
    border-color: transparent;
  }
}

/* --- Vertrauensleiste --- */
.trust {
  border-block: 1px solid var(--line);
  background: #fff;
}

.trust ul {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.45;
}

.trust svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  color: var(--lime-ink);
  margin-top: 0.1rem;
}

.trust b {
  display: block;
}

/* --- Portraitfläche --- */
.portrait {
  position: relative;
  display: grid;
  place-items: end center;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--lime-soft), var(--bg-deep));
  overflow: hidden;
  min-height: 22rem;
}

.portrait::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.45));
}

.portrait img {
  position: relative;
  width: min(100%, 26rem);
  filter: drop-shadow(0 26px 40px rgb(22 26 20 / 0.16));
}

.zitat {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 3px solid var(--lime);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.012em;
}

/* --- Teamkarten --- */
.team {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.team article {
  text-align: center;
}

.team figure {
  position: relative;
  margin-bottom: 1.1rem;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--lime-soft), var(--bg-deep));
  overflow: hidden;
}

.team img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.team article:hover img {
  transform: scale(1.04);
}

.team h3 {
  font-size: var(--step-1);
}

.team p {
  font-size: var(--step--1);
  color: var(--muted);
}

/* --- Nummerierte Leistungsblöcke --- */
.leistung {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}

.leistung:first-of-type {
  border-top: 0;
}

.nummer {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
  margin-bottom: 0.9rem;
}

.nummer b {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  /* nicht das Markengrün: das trägt auf Weiß nur 2:1 */
  color: var(--lime-ink);
  line-height: 1;
}

/* Sprungmarken – als Raster, nicht als Umbruchzeile. Als Flexzeile fiel
   der fünfte Punkt regelmäßig in eine zweite Reihe; im Raster stehen alle
   fünf gleich breit und gleich hoch nebeneinander. */
.anker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 2rem;
}

@media (min-width: 34rem) {
  .anker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .anker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .anker {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.anker a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.anker svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--lime-ink);
}

.anker a:hover {
  border-color: var(--lime);
  background: var(--lime-soft);
  transform: translateY(-2px);
}

/* --- Bewertungen --- */
/* Ab 62rem stehen alle Bewertungen in genau EINER Reihe – unabhängig
   davon, wie viele es sind. grid-auto-flow: column legt jede weitere
   Karte daneben statt darunter; vorher entstand aus vier Karten bei drei
   Spalten die schiefe 3+1-Aufteilung. */
.reviews {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .reviews {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(0.9rem, 1.6vw, 1.35rem);
  }
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.1rem, 1.8vw, 1.45rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.review blockquote {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text);
}

.review footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  font-size: var(--step--2);
}

.review footer b {
  color: var(--ink);
}

.review footer span {
  color: var(--muted);
}

/* --- Telefonassistent --- */
.dialog {
  display: grid;
  gap: 0.65rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
}

.blase {
  max-width: 88%;
  padding: 0.8rem 1.05rem;
  border-radius: var(--r) var(--r) var(--r) 6px;
  background: rgb(255 255 255 / 0.09);
  font-size: var(--step--1);
  line-height: 1.5;
}

.blase b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.blase--du {
  margin-left: auto;
  border-radius: var(--r) var(--r) 6px var(--r);
  background: var(--lime);
  color: var(--ink);
}

.blase--du b {
  color: #2f4408;
}

/* --- FAQ --- */
.faq {
  display: grid;
  gap: 0.6rem;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq details[open] {
  border-color: var(--lime-line);
  box-shadow: var(--shadow-sm);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  min-height: 3.25rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border-right: 2px solid var(--lime-ink);
  border-bottom: 2px solid var(--lime-ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq summary:hover {
  color: var(--lime-ink);
}

.faq__body {
  padding: 0 clamp(1.1rem, 2vw, 1.5rem) 1.35rem;
  color: var(--text);
}

.faq__body p + p {
  margin-top: 0.7em;
}

/* --- Karte / Video --- */
.karte {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}

.karte img,
.karte iframe {
  display: block;
  width: 100%;
  border: 0;
}

.karte img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.karte iframe {
  aspect-ratio: 3 / 2;
}

/* Weiße Schrift direkt auf dem Kartenbild wäre nicht lesbar – die
   Vorschaukarte ist hell. Deshalb steht der Hinweis in einer eigenen
   weißen Fläche, der Schleier darunter bleibt dezent. */
.karte__laden {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 1.25rem;
  text-align: center;
  background: rgb(22 26 20 / 0.28);
}

.karte__box {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: 24rem;
  padding: 1.25rem 1.4rem;
  background: rgb(255 255 255 / 0.96);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.karte__box p {
  font-size: var(--step--1);
  color: var(--text);
}

.quelle {
  margin-top: 0.6rem;
  font-size: var(--step--2);
  color: var(--muted);
}

.quelle a {
  color: inherit;
}

/* Über die volle Spaltenbreite wurde das Video 1136 x 639 px gross und
   dominierte die Seite. Die Datei bleibt unverändert – nur die Anzeige
   ist schmaler, das Seitenverhältnis 16:9 bleibt erhalten. */
.video {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
}

.video video,
.video img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Ohne diese Zeile setzt sich display:block gegen das hidden-Attribut
   durch – das Video stünde dann schon vor dem Klick unter dem Standbild. */
.video video[hidden] {
  display: none;
}

.video__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  border: 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgb(22 26 20 / 0.15), rgb(22 26 20 / 0.5));
  color: #fff;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.video__start:hover {
  background: linear-gradient(180deg, rgb(22 26 20 / 0.25), rgb(22 26 20 / 0.6));
}

.video__start span {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.6);
  transition: transform var(--dur) var(--ease);
}

.video__start:hover span {
  transform: scale(1.06);
}

.video__start svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 3px;
}

/* --- Abschluss-CTA --- */
.cta {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #d9ded4;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: -12rem;
  right: -8rem;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(142 206 1 / 0.2), transparent 65%);
}

.cta > * {
  position: relative;
}

.cta h2,
.cta h3,
.cta strong {
  color: #fff;
}

.cta p {
  margin-top: 0.9rem;
  max-width: 34rem;
}

.cta .btn-row {
  margin-top: 1.9rem;
}

/* --- Rechtsseiten --- */
.legal {
  max-width: 48rem;
}

.legal h2 {
  font-size: var(--step-2);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}

.legal h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
}

.legal address {
  font-style: normal;
  line-height: 1.8;
}

.legal ul:not(.hinweis ul) {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.legal ul:not(.hinweis ul) li {
  position: relative;
  padding-left: 1.25rem;
}

.legal ul:not(.hinweis ul) li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

.legal a {
  color: var(--lime-ink);
  text-underline-offset: 3px;
}

/* ============ 7  Fußzeile =============================================== */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--ink);
  color: #b6bdaf;
  font-size: var(--step--1);
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.footer__brand {
  max-width: 22rem;
}

/* Kein Hintergrund: das Logo bringt seine eigene Transparenz mit und
   soll unverändert stehen. */
.footer__logo {
  display: inline-block;
  margin-bottom: 1.1rem;
}

.footer__logo img {
  width: 11rem;
}

.footer h2 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}

.footer ul {
  display: grid;
  gap: 0.45rem;
}

.footer li {
  line-height: 1.55;
}

/* :not(.btn) ist wichtig – sonst überschreibt diese Regel die Textfarbe
   des Termin-Buttons und macht ihn auf der grünen Fläche unlesbar. */
.footer a:not(.btn) {
  display: inline-block;
  padding-block: 0.15rem;
  color: #d3d9cb;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer a:not(.btn):hover {
  color: var(--lime);
}

.footer__zeiten {
  display: grid;
  gap: 0.5rem;
}

.footer__zeiten > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer__zeiten dt {
  color: #fff;
  font-weight: 600;
}

.footer__zeiten dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.social a:hover {
  border-color: var(--lime);
  background: rgb(142 206 1 / 0.12);
}

.social svg {
  width: 1.15rem;
  height: 1.15rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--step--2);
}

.footer__bottom .spacer {
  flex: 1;
}

.footer__bottom a {
  padding-block: 0.2rem;
}

/* Mobile Aktionsleiste */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.6rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.actionbar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.actionbar .is-primary {
  color: var(--lime-ink);
}

.actionbar .is-wa {
  color: var(--wa);
}

@media (min-width: 62rem) {
  .actionbar {
    display: none;
  }
}

@media (max-width: 61.99rem) {
  body {
    padding-bottom: 3.6rem;
  }
}

/* ============ 8  Bewegung =============================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Drucken */
@media print {
  /* Buttons bleiben stehen: auf Papier sind sie die Stelle, an der
     Telefonnummer und Adresse noch einmal auftauchen. */
  .header,
  .mobile-nav,
  .actionbar,
  .video,
  .karte__laden,
  .skip {
    display: none !important;
  }

  .section--ink,
  .cta {
    background: #fff !important;
    color: #000 !important;
  }

  .section--ink h2,
  .cta h2 {
    color: #000 !important;
  }

  body {
    padding-bottom: 0;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}