/* ===== Selbst gehostete Schriften ===== */
@font-face {
  font-family: "Bodoni Moda SC";
  src: url("../schriften/bodoni-moda-sc-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda SC";
  src: url("../schriften/bodoni-moda-sc-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../schriften/source-sans-3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../schriften/source-sans-3-600.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
}

/* ===== Design-Tokens (Farben NUR hier aendern) ===== */
:root {
  --tinte: #24262c;          /* Text, kühl-dunkel */
  --grund: #e8eef5;          /* pastelliges Hellblau (Grundton) */
  --grund-tief: #dae6f0;     /* Wechselfläche, etwas tieferes Blau */
  --karte: #f5f8fc;          /* Kartenhintergrund, fast weiß mit Blaustich */
  --akzent: #5b3b42;         /* Kaffee-/Aubergine-Braun */
  --akzent-dunkel: #422a30;
  --zweitton: #5b3b42;       /* bewusst = Akzent: Ein-Farben-CD */
  --grau-300: #c9d5e0;
  --grau-600: #6a727d;

  --font-display: "Bodoni Moda SC", Georgia, serif;
  --font-text: "Source Sans 3", system-ui, sans-serif;

  --max-breite: 1200px;
  --radius: 6px;
  --kopf-hoehe: 64px;
  --shrink: 0;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  color: var(--tinte);
  background: var(--grund);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--font-display); line-height: 1.12; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;   /* volle Versalien statt Kapitälchen */
}

.container { width: 100%; max-width: var(--max-breite); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.akzent { color: var(--akzent); }
[hidden] { display: none !important; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  background: var(--akzent);
  color: var(--grund);
  font-weight: 500;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn:hover { background: var(--akzent-dunkel); }
.btn:active { transform: translateY(1px); }
.btn--leise {
  background: transparent; color: var(--akzent);
  border: 1.5px solid var(--akzent);
}
.btn--leise:hover { background: var(--akzent); color: var(--grund); }

/* ===== Section-Titel ===== */
.section__titel { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 2.2rem; }
.section__vorzeile {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem;
  color: var(--akzent); font-weight: 500; margin-bottom: 0.7rem;
}

/* ===== Scroll-Container & Snap-Sektionen (bewaehrt aus David-Projekt) ===== */
html, body { height: 100%; }
.seite-snap { overflow: hidden; }   /* Hauptseite: gescrollt wird .seite, nicht body */
.seite-unterseite { --shrink: 1; height: auto; min-height: 100%; }

.seite {
  height: 100svh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.snap-sektion {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4.5rem, 9vh, 7rem);
  position: relative;
}
.snap-sektion > .container { width: 100%; }
.sektion--tief { background: var(--grund-tief); }

@media (prefers-reduced-motion: reduce) {
  .seite { scroll-snap-type: none; scroll-behavior: auto; }
  .snap-sektion { scroll-snap-stop: normal; }
}

/* ===== Fixierter, schrumpfender Header ===== */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(232,238,245,var(--shrink));
  box-shadow: 0 2px 16px rgba(20,24,26,calc(var(--shrink) * 0.08));
  transition: background 0.1s linear;
}
.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--kopf-hoehe); padding-block: 0.5rem; gap: 1rem;
}
/* Marke + Icons erscheinen erst beim Scrollen (Crossfade aus dem Hero).
   Der Kanzleiname steckt im Logo selbst — kein Text-Schriftzug daneben. */
.kopf__marke { display: flex; align-items: center; min-width: 0; opacity: var(--shrink); }
.kopf__logo { height: 44px; width: auto; }
.kopf__icons { display: flex; gap: 0.35rem; opacity: var(--shrink); }
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--tinte);
  transition: color 0.2s ease, background 0.2s ease;
}
.icon-link:hover { color: var(--akzent); background: var(--grund-tief); }
/* Header-Icons wackeln beim Hover (ohne Vergroesserung) */
.kopf__icons .icon-link:hover svg { animation: icon-wackeln 0.5s ease-in-out; }

/* ===== Start (Hero) ===== */
.start { overflow: hidden; }
/* Dezente Flaeche hinter dem Hero */
.start::before {
  content: ""; position: absolute; right: -12vw; top: -18vh;
  width: 58vw; height: 80vh; border-radius: 50%;
  background: radial-gradient(closest-side, var(--grund-tief), transparent 72%);
  pointer-events: none;
}
/* Text bei ~33 % der Breite, Porträt bei ~66 %; Hero nutzt fast die volle Bildschirmbreite */
.start__inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  max-width: 1640px; }
@media (min-width: 800px) {
  .start__inner { grid-template-columns: 1fr 2fr; }
}
/* Marke im Hero: wandert beim Scrollen in den Header (Crossfade) */
.start__marke {
  display: flex; align-items: center;
  margin-bottom: clamp(1.5rem, 4vh, 2.6rem);
  opacity: calc(1 - var(--shrink));
  transform: translateY(calc(var(--shrink) * -16px));
}
.start__logo { height: clamp(64px, 10vh, 96px); width: auto; }
/* Porträt + Icon-Leiste links davon */
.start__media { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.5rem); }
.start__icons {
  display: flex; flex-direction: column; gap: 0.7rem;
  opacity: calc(1 - var(--shrink));
}
.start__icons .icon-link { width: 72px; height: 72px; border: 1px solid var(--grau-300); background: var(--karte);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.start__icons .icon-link svg { width: 32px; height: 32px; }
/* Hover: Icon waechst leicht, Symbol wackelt kurz */
.start__icons .icon-link:hover { transform: scale(1.1); }
.start__icons .icon-link:hover svg { animation: icon-wackeln 0.5s ease-in-out; }
@keyframes icon-wackeln {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-9deg); }
  50% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}
/* Schatten liegt am Wrapper: box-shadow wuerde dem clip-path nicht folgen,
   drop-shadow schon (zeichnet den Schatten entlang der geschnittenen Kontur).
   WICHTIG: saturate() gehoert hier mit auf den Wrapper und NICHT aufs img.
   Haette das img einen eigenen Filter, waeren die Filter verschachtelt und
   Safari zeichnet den Schatten dann als Rechteck statt entlang der Fase. */
.start__bild { flex: 1; min-width: 0;
  filter: saturate(0.82) drop-shadow(0 12px 30px rgba(20,24,26,0.16));
  /* Eigene, stabile GPU-Ebene: sonst zeichnet WebKit/Safari beim Hover der
     .start__icons kurz den drop-shadow des UNbeschnittenen Rechtecks (falsche
     Kontur, blitzt auf). Mit translateZ(0) wird die Rasterung nicht mehr durch
     Nachbar-Repaints invalidiert. */
  transform: translateZ(0); }
.start__bild img {
  /* Fester Ausschnitt: die Breite wird ueber die Hoehe gedeckelt (statt per
     max-height). So bleibt die Buehne IMMER 3:4 und object-fit:cover schneidet
     auf jedem Bildschirm identisch. Vorher brach max-height das Verhaeltnis auf
     flachen Laptop-Screens auf -> Bild wurde oben/unten staerker beschnitten.
     74svh Hoehe entspricht bei 3:4 einer Breite von 55.5svh. */
  width: min(100%, 55.5svh);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-inline: auto;
  /* Variante 01: zwei gegenueberliegende Ecken abgeschraegt (oben links,
     unten rechts). --fase als Laenge -> echte 45deg-Fase auf beiden Achsen. */
  --fase: clamp(32px, 4.5vw, 72px);
  clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)),
                     calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase));
  /* kein filter hier — der liegt am Wrapper (s. o.) */
  opacity: calc(1 - var(--shrink) * 0.6);
}
/* Feine Trennlinie unter dem Logo (wie CD-Mockup) */
.hero__linie {
  display: block; width: clamp(110px, 18%, 190px); height: 2px;
  background: var(--akzent); margin: clamp(1.2rem, 3vh, 2rem) 0 clamp(1.4rem, 3.5vh, 2.4rem);
  opacity: calc(1 - var(--shrink));
}
/* Der eine Satz im Hero: ruhig, Schlagworte im Akzent */
.hero__satz {
  font-family: var(--font-text); font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.45;
  color: var(--tinte); max-width: 32ch; margin: 0;
  text-wrap: balance;          /* verteilt gleichmäßig auf zwei Zeilen */
  text-transform: none;        /* bleibt ein Satz, nicht in Caps wie die Überschriften */
  opacity: calc(1 - var(--shrink) * 0.85);
}
.hero__satz .akzent { color: var(--akzent); font-weight: 600; }
.scroll-hinweis {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--grau-600); opacity: calc(1 - var(--shrink));
}

@media (prefers-reduced-motion: reduce) {
  .kopf { background: rgba(232,238,245,0.96); box-shadow: 0 2px 16px rgba(20,24,26,0.07); }
  .kopf__marke, .kopf__icons { opacity: 1; }
  .hero__linie, .hero__satz, .scroll-hinweis,
  .start__marke, .start__icons, .start__bild img { opacity: 1; transform: none; }
  .start__icons .icon-link:hover { transform: none; }
  .start__icons .icon-link:hover svg,
  .kopf__icons .icon-link:hover svg,
  a.kontakt__wert:hover svg { animation: none; }
}

/* ===== Ueber mich ===== */
.ueber__inner { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
/* saturate + drop-shadow zusammen am Wrapper (nicht verschachteln, s. .start__bild) */
.ueber__bild { filter: saturate(0.82) drop-shadow(0 12px 30px rgba(20,24,26,0.16)); }
.ueber__bild img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  /* Wie der Hero (Variante 01), aber gespiegelt: hier sind die ANDEREN zwei
     Ecken abgeschraegt (oben rechts + unten links). Die beiden Portraets
     bilden so ein Paar, das sich ergaenzt statt sich zu wiederholen. */
  --fase: clamp(32px, 4vw, 72px);
  clip-path: polygon(0 0, calc(100% - var(--fase)) 0, 100% var(--fase),
                     100% 100%, var(--fase) 100%, 0 calc(100% - var(--fase)));
}
.ueber__text { max-width: 58ch; font-size: 1.05rem; }
.ueber__text p + p { margin-top: 1rem; }
@media (min-width: 800px) {
  .ueber__inner { grid-template-columns: 0.72fr 1.28fr; }
}

/* ===== Rechtsgebiete ===== */
.gebiete__grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .gebiete__grid { grid-template-columns: repeat(3, 1fr); } }
.gebiet {
  background: var(--karte);
  border: 1px solid var(--grau-300);
  border-top: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gebiet:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,24,26,0.09); }
.gebiet:nth-child(2) { border-top-color: var(--zweitton); }
.gebiet:nth-child(2) .gebiet__titel { color: var(--zweitton); }
.gebiet__titel { font-size: clamp(1.2rem, 2.4vw, 1.55rem); color: var(--akzent); }
.gebiet__text { color: var(--tinte); font-size: 0.98rem; }
.gebiet__liste { list-style: none; display: grid; gap: 0.45rem; margin-top: 0.2rem; }
.gebiet__liste li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--grau-600); }
.gebiet__liste li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--akzent); font-weight: 700;
}
/* CTA-Kachel (immer sichtbar) + Wisch-Hinweis (nur mobil) */
/* CTA-Kachel: gleiche Flaeche wie Kachel 1 und 2 (var(--karte) aus .gebiet) */
.gebiet--cta { justify-content: center; }
.gebiet__mehr { color: var(--akzent); font-weight: 500; margin-top: 0.4rem; }
.gebiete__wisch { display: none; }

/* ===== Team ===== */
.team__intro {
  max-width: 60ch; margin: 0 auto clamp(2rem, 5vh, 3rem);
  text-align: center; font-size: 1.05rem; color: var(--tinte);
}
.team__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); justify-content: center; }
@media (min-width: 800px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
.person { margin: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1rem; }
.person__bildrahmen {
  width: clamp(150px, 42vw, 200px); aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--karte); box-shadow: 0 14px 32px rgba(20,24,26,0.12);
}
.person__bild { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82); }   /* gleiche Tonung wie die Portraets */
.person__name { font-size: clamp(1.2rem, 2.4vw, 1.45rem); color: var(--akzent); }
.person__rolle {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem;
  color: var(--grau-600); margin-top: -0.6rem;
}
.person__text { color: var(--tinte); font-size: 0.96rem; max-width: 32ch; }

/* ===== Ablauf ===== */
.ablauf__grid { display: grid; gap: 1.4rem; counter-reset: schritt; }
@media (min-width: 800px) {
  .ablauf__grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
  /* Mehr Luft um die vier Schritte (die Sektion hat am Desktop reichlich Platz).
     Nur ab 800px, damit die mobile Ein-Screen-Regel nicht bricht. */
  .ablauf .section__titel { margin-bottom: 3.6rem; }
  .ablauf .ablauf__hinweis { margin-top: 3.6rem; }
}
.ablauf__schritt {
  counter-increment: schritt;
  position: relative;
  padding-top: 3.4rem;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Staffelung nur beim Erscheinen; das Zurücksetzen (Klasse weg) passiert ohne Verzögerung */
.ablauf__schritt.ist-sichtbar {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 0.35s);
}
.ablauf__schritt::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--akzent);
}
/* Verbindungslinie zwischen den Nummern (nur Desktop) */
@media (min-width: 800px) {
  .ablauf__schritt::after {
    content: ""; position: absolute; top: 1.05rem; left: 3.1rem; right: 0.4rem;
    height: 1.5px; background: var(--grau-300);
  }
  .ablauf__schritt:last-child::after { display: none; }
}
.ablauf__titel { font-size: 1.05rem; margin-bottom: 0.5rem; }
.ablauf__text { font-size: 0.93rem; color: var(--grau-600); }
.ablauf__hinweis { margin-top: 2.2rem; color: var(--grau-600); font-size: 0.95rem; max-width: 62ch; }
.ablauf__hinweis strong { color: var(--akzent); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .ablauf__schritt { opacity: 1; transform: none; transition: none; }
}

/* ===== Kontakt ===== */
/* Zweispaltig: Daten links, Formular rechts (ab Desktop) */
.kontakt__inhalt { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 800px) {
  .kontakt__inhalt { grid-template-columns: 1fr 1fr; }
}
.kontakt__liste { list-style: none; display: grid; gap: 0.9rem; max-width: 52ch; align-content: start; }
.kontakt__eintrag {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--grau-300);
}
.kontakt__label { color: var(--grau-600); }
.kontakt__wert { font-weight: 500; text-align: right;
  display: inline-flex; align-items: center; gap: 0.55rem; }
.kontakt__wert svg { width: 20px; height: 20px; color: var(--akzent); flex: none; }
a.kontakt__wert:hover { color: var(--akzent); }
a.kontakt__wert:hover svg { animation: icon-wackeln 0.5s ease-in-out; }

/* ===== Kontaktformular: Toggle + Ausroll-Animation ===== */
.kontakt__direkt { display: flex; flex-direction: column; }
.formular__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-text); font-size: 0.98rem; font-weight: 500; color: var(--akzent);
  background: var(--karte); border: 1px solid var(--grau-300); border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.formular__toggle:hover { background: var(--grund-tief); border-color: var(--akzent); }
.formular__chevron { flex: none; transition: transform 0.3s ease; }
.kontakt__direkt.ist-offen .formular__chevron { transform: rotate(180deg); }
/* Ausrollen über grid-template-rows 0fr -> 1fr (sanft, ohne feste Höhe) */
.formular__ausroll { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.kontakt__direkt.ist-offen .formular__ausroll { grid-template-rows: 1fr; }
.formular__ausroll-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0.35s; }
.kontakt__direkt.ist-offen .formular__ausroll-inner { visibility: visible; }
.formular__ausroll-inner .kontakt__formular { margin-top: 0.8rem; }
@media (prefers-reduced-motion: reduce) {
  .formular__ausroll, .formular__chevron, .formular__ausroll-inner { transition: none; }
}

/* ===== Kontaktformular ===== */
.kontakt__formular {
  display: flex; flex-direction: column; gap: 0.8rem;
  background: var(--karte); border: 1px solid var(--grau-300);
  border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem);
}
.formular__titel { font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.15rem; color: var(--akzent); margin-bottom: 0.2rem; }
.formular__feld { display: flex; flex-direction: column; gap: 0.3rem; }
.formular__label { font-size: 0.85rem; color: var(--grau-600); }
.formular__label em { font-style: normal; opacity: 0.7; }
.kontakt__formular input,
.kontakt__formular textarea {
  font-family: var(--font-text); font-size: 0.95rem; color: var(--tinte);
  background: var(--grund); border: 1px solid var(--grau-300);
  border-radius: var(--radius); padding: 0.6rem 0.7rem; width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kontakt__formular input:focus,
.kontakt__formular textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(91,59,66,0.12);
}
.kontakt__formular textarea { resize: vertical; min-height: 5.5rem; }
.formular__zustimmung { display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.82rem; color: var(--grau-600); line-height: 1.45; }
.formular__zustimmung input { width: auto; margin-top: 0.15rem; flex: none; accent-color: var(--akzent); }
.formular__zustimmung a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }
/* Honeypot unsichtbar (nicht display:none, damit Bots es ausfüllen) */
.formular__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__senden { align-self: flex-start; margin-top: 0.2rem; cursor: pointer; border: none; }
.formular__senden[disabled] { opacity: 0.6; cursor: default; }
.formular__hinweis { font-size: 0.78rem; color: var(--grau-600); }
.formular__status { font-size: 0.9rem; font-weight: 500; padding: 0.6rem 0.75rem; border-radius: var(--radius); }
.formular__status--ok { background: rgba(91,59,66,0.08); color: var(--akzent-dunkel); }
.formular__status--fehler { background: #fbeaea; color: #9a2828; }

/* ===== Footer (einzeilig, bricht nie um) ===== */
.footer { border-top: 1px solid var(--grau-300); padding-block: 1.6rem; margin-top: clamp(2rem, 6vh, 4rem); }
.footer__inner {
  display: flex; flex-wrap: nowrap; gap: 1rem; align-items: baseline;
  justify-content: space-between; color: var(--grau-600); font-size: 0.9rem;
}
.footer__inner > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer__links { flex: 0 0 auto; white-space: nowrap; }
.footer__links a { margin-left: 1.2rem; }
.footer__links a:hover { color: var(--akzent); }
@media (max-width: 799px) {
  .footer__inner { gap: 0.6rem; font-size: 0.8rem; }
  .footer__links a { margin-left: 0.8rem; }
}

/* ===== Punkt-Navigation (Desktop) ===== */
.punkte {
  position: fixed; right: 1.6rem; top: 50%; transform: translateY(-50%);
  z-index: 60; display: none; flex-direction: column; align-items: flex-end; gap: 1.15rem;
}
.punkt {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--grau-300); background: transparent; transition: all 0.2s ease;
  opacity: 0.65;
}
.punkt:hover { border-color: var(--akzent); opacity: 1; }
.punkt.ist-aktiv {
  border-color: var(--akzent); background: var(--akzent);
  transform: translateX(-10px) scale(1.3);
  opacity: 1;
}
/* Seitennamen dauerhaft links neben den Punkten; aktiver Name kräftig, inaktive passiv.
   Erst ab 1150px sichtbar — auf schmalen Desktops/Tablets lägen sie sonst über dem Text. */
.punkt__label {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.78rem; color: var(--grau-600);
  opacity: 0.55; transition: opacity 0.2s ease, color 0.2s ease, font-size 0.2s ease;
  display: none;
}
@media (min-width: 1150px) { .punkt__label { display: block; } }
.punkt:hover .punkt__label { opacity: 1; }
.punkt.ist-aktiv .punkt__label {
  opacity: 1; color: var(--akzent); font-weight: 600; font-size: 0.85rem;
  right: 34px;   /* gleicht das Herausrücken des aktiven Punkts aus */
}

/* ===== Mobile Leiste unten ===== */
.mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--kopf-hoehe); display: flex; justify-content: space-around; align-items: center;
  background: rgba(232,238,245,0.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--grau-300);
}
.mnav a { font-size: 0.85rem; font-weight: 500; color: var(--grau-600); position: relative; padding: 0.4rem 0; }
.mnav a.ist-aktiv { color: var(--akzent); }
.mnav a.ist-aktiv::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--akzent);
}

/* Desktop: schwebende Pill-Leiste unten mittig (ersetzt die Punkt-Nav —
   die lag auf schmalen Desktops über dem Text). Aktive Sektion = gefüllte Kapsel. */
@media (min-width: 800px) {
  .punkte { display: none; }
  .mnav {
    left: 50%; right: auto; bottom: 1.1rem; transform: translateX(-50%);
    width: auto; height: auto; gap: 0.2rem; padding: 0.32rem;
    justify-content: center;
    background: rgba(232,238,245,0.82);
    border: 1px solid var(--grau-300);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(20,24,26,0.14);
    backdrop-filter: blur(10px);
  }
  .mnav a { padding: 0.5rem 1.05rem; border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease; }
  .mnav a:hover { background: var(--grund-tief); color: var(--tinte); }
  .mnav a.ist-aktiv { background: var(--akzent); color: #fff; }
  .mnav a.ist-aktiv::after { display: none; }
  /* Der Wisch-Hinweis im Hero läge sonst hinter der Pill */
  .scroll-hinweis { display: none; }
}
@media (max-width: 799px) {
  .snap-sektion { padding-block: calc(var(--kopf-hoehe) + 0.75rem) calc(var(--kopf-hoehe) + 1rem); }
}

/* ===== Unterseiten (Impressum/Datenschutz) ===== */
.seite-unterseite main.rechtsseite {
  padding-top: calc(var(--kopf-hoehe) + 2.5rem); padding-bottom: 4rem; max-width: 760px;
}
.rechtsseite__zurueck { display: inline-block; margin-bottom: 1.5rem; color: var(--grau-600); font-weight: 500; }
.rechtsseite__zurueck:hover { color: var(--akzent); }
.rechtsseite__titel { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 1.5rem; }
.rechtsseite__text { font-size: 1.02rem; max-width: 65ch; }
.rechtsseite__text p + p { margin-top: 1rem; }

/* ===== Kleine Screens: kompakter, alles passt auf einen Screen ===== */
@media (max-width: 799px) {
  /* Hero: exakt ein Screen hoch (kein Scrollen im Hero -> Swipe snappt direkt zur
     nächsten Sektion). Inhalt beginnt oben, padding-bottom hält die Menüleiste frei. */
  /* Logo buendig an der Oberkante (der fixe Header ist im Hero unsichtbar);
     alles darunter bleibt ueber das flex:1-Foto am unteren Rand verankert. */
  .start { height: 100svh; overflow: hidden;
    padding-top: 0; padding-bottom: calc(var(--kopf-hoehe) + 1rem); }
  .start__inner { display: flex; flex-direction: column; justify-content: flex-start;
    gap: 1rem; flex: 1 1 auto; min-height: 0; }
  /* Logo nutzt die volle Breite */
  .start__marke { display: block; margin-bottom: 0.6rem; }
  .start__logo { width: 100%; height: auto; }
  /* Mobil: Linie + Satz kompakter, damit das Foto die Resthöhe bekommt */
  .hero__linie { margin: 0.7rem 0 0.8rem; }
  .hero__satz { font-size: 0.98rem; max-width: none; margin-bottom: 1rem; }
  .start__media { position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
    flex-direction: column; align-items: stretch; }
  /* Icons über das Foto gelegt, unten rechts */
  .start__icons { position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2;
    flex-direction: row; gap: 0.5rem; }
  .start__icons .icon-link { width: 48px; height: 48px;
    box-shadow: 0 2px 10px rgba(20,24,26,0.20); }
  .start__icons .icon-link svg { width: 22px; height: 22px; }
  /* Foto füllt die restliche Höhe über der Menüleiste, immer komplett im sichtbaren Bereich */
  .start__bild { flex: 1 1 auto; min-height: 0; display: flex; }
  .start__bild img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
    object-fit: cover; object-position: center top; }

  /* Über mich: rundes Porträt schwebt rechts im Text (statt gestapelt) —
     wirkt eingebunden wie in der Team-Sektion und spart einen ganzen Bildblock */
  .ueber__inner { display: block; }
  /* Bild floatet im Text, aber mit demselben Schnitt wie am Desktop
     (schraeger Fuss, 4:5) und groesser -> erbt clip-path/Schatten aus der Basis */
  .ueber__bild { float: right; width: min(46vw, 185px); margin: 0.3rem 0 0.7rem 1rem; }
  .ueber__text { font-size: 0.95rem; hyphens: auto; }
  .ueber__text p + p { margin-top: 0.8rem; }
  .section__titel { margin-bottom: 1.2rem; }
  /* Rechtsgebiete: horizontal wischen; die naechste Kachel lugt rechts rein
     (= sichtbares Signal, dass hier geswipt werden kann) */
  .gebiete__grid {
    display: flex; gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem; padding-inline: 1.25rem;  /* bis an den Bildschirmrand */
    scroll-padding-inline: 1.25rem;
  }
  .gebiete__grid::-webkit-scrollbar { display: none; }
  /* Breitere Kacheln = weniger Umbrüche = flacher; alles passt auf einen Screen */
  .gebiet { flex: 0 0 88%; scroll-snap-align: center; padding: 0.95rem 1rem; gap: 0.45rem; }
  .gebiete__wisch { display: block; text-align: right; margin-top: 0.45rem;
    font-size: 0.78rem; color: var(--grau-600); letter-spacing: 0.08em; }
  .gebiet__text { font-size: 0.88rem; }
  .gebiet__liste { gap: 0.3rem; }
  .gebiet__liste li { font-size: 0.84rem; }
  .ablauf__grid { gap: 0.7rem; }
  .ablauf__schritt { padding-top: 0; padding-left: 3rem; }
  .ablauf__schritt::before { font-size: 1.15rem; top: 0.1rem; }
  .ablauf__titel { margin-bottom: 0.15rem; }
  .ablauf__text { font-size: 0.88rem; }
  /* etwas mehr Luft um die Schritte; mehr gibt der Ein-Screen-Platz nicht her */
  .ablauf .section__titel { margin-bottom: 1.55rem; }
  .ablauf__hinweis { margin-top: 1.15rem; font-size: 0.84rem; }
  .team__intro { margin-bottom: 1.6rem; font-size: 0.95rem; }
  /* Beide Personen nebeneinander -> die ganze Sektion passt auf einen Screen
     (untereinander ragte der zweite Name unter die Menüleiste) */
  .team__grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: start; }
  .person { gap: 0.6rem; }
  .person__bildrahmen { width: min(34vw, 132px); }
  .person__name { font-size: 0.95rem; line-height: 1.25; }
}

/* Kompakt-Stufe für kurze Screens (iPhone SE & Co.): eine Spur enger,
   damit auch dort jede Sektion ohne Scrollen auf einen Screen passt */
@media (max-width: 799px) and (max-height: 719px) {
  .snap-sektion { padding-block: calc(var(--kopf-hoehe) + 0.4rem) calc(var(--kopf-hoehe) + 0.5rem); }
  /* .start muss die Zeile darueber wieder aushebeln: sie steht spaeter im CSS
     als die .start-Regel im allgemeinen Mobil-Block und wuerde das Logo sonst
     um ~70px nach unten schieben (Safari-Leisten druecken den Viewport unter
     720px -> dieser Block greift auch auf grossen iPhones). */
  .start { padding-top: 0; padding-bottom: calc(var(--kopf-hoehe) + 0.5rem); }
  .section__vorzeile { margin-bottom: 0.35rem; }
  .section__titel { font-size: 1.35rem; margin-bottom: 0.7rem; }
  .ueber__bild { width: min(38vw, 150px); }
  .ueber__text { font-size: 0.88rem; line-height: 1.45; }
  .gebiet { flex: 0 0 92%; padding: 0.75rem 0.85rem; gap: 0.35rem; }
  .gebiet__titel { font-size: 1.05rem; }
  .gebiet__text { font-size: 0.84rem; line-height: 1.45; }
  .gebiet__liste { gap: 0.22rem; }
  .gebiet__liste li { font-size: 0.8rem; line-height: 1.4; padding-left: 1.2rem; }
  .gebiete__wisch { margin-top: 0.3rem; font-size: 0.72rem; }
  .ablauf__grid { gap: 0.45rem; }
  .ablauf__schritt { padding-left: 2.5rem; }
  .ablauf__schritt::before { font-size: 1rem; }
  .ablauf__titel { font-size: 0.95rem; }
  .ablauf__text { font-size: 0.82rem; line-height: 1.45; }
  .ablauf__hinweis { margin-top: 0.5rem; font-size: 0.78rem; }
  .team__intro { font-size: 0.88rem; margin-bottom: 1rem; }
  .person__bildrahmen { width: min(30vw, 112px); }
  .person__name { font-size: 0.88rem; }
}

/* ===== Fokus / Barrierearmut ===== */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 3px; }