/* ==========================================================================
   Petra Wieckhorst - Systemisches Coaching und Beratung
   Eine Datei, keine Abhaengigkeiten, keine externen Requests.

   Aufbau:
     1. Tokens (Farben, Typo, Abstaende)
     2. Reset und Grundlagen
     3. Bausteine (Buttons, Listen, Karten)
     4. Kopf und Navigation
     5. Abschnitte von oben nach unten
     6. Die laufenden Figuren
     7. Fuss
     8. Reduzierte Bewegung
   ========================================================================== */

/* ------------------------------------------------------- 1. Tokens ------ */
:root {
  /* Farbwelt "Natur & Salbei" */
  --cream:      #FBF8F3;
  --paper:      #FFFFFF;
  --sage-tint:  #EDF1E9;
  --sage:       #6E8B6A;
  --sage-deep:  #4E6A4A;   /* dunkel genug fuer weisse Schrift darauf */
  --petrol:     #24413F;
  --ochre:      #C98A3E;
  --ochre-light:#E3AE68;   /* Akzent auf dunklem Grund */

  --ink:        #24413F;
  --ink-soft:   #4C6663;
  --line:       rgba(var(--ink-rgb), .14);

  /* Dieselben Farben noch einmal als RGB-Zahlen. Damit lassen sich
     halbtransparente Varianten bilden - rgba() kann mit einem Hex-Wert aus
     einer Variablen nicht rechnen. Beim Umschalten der Palette werden beide
     Formen gesetzt. */
  --cream-rgb:       251, 248, 243;
  --ink-rgb:         36, 65, 63;
  --sage-rgb:        110, 139, 106;
  --ochre-light-rgb: 227, 174, 104;
  --petrol-dark:     #1a3230;
  --ochre-deep:      #A9702B;

  /* Faktor für die Schriftgröße der ganzen Seite (0.94 / 1 / 1.08).
     Wirkt über die Wurzel-Schriftgröße, weil alle Maße in rem stehen. */
  --schrift-faktor: 1;

  /* Schrift: nur Systemschriften, damit keine Datei nachgeladen wird */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap:        68rem;
  --wrap-narrow: 44rem;
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --radius:      14px;
  --radius-lg:   26px;

  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .05), 0 4px 14px rgba(var(--ink-rgb), .05);
  --shadow-md: 0 2px 6px rgba(var(--ink-rgb), .06), 0 18px 40px rgba(var(--ink-rgb), .09);

  --header-h: 4.5rem;
}

/* ------------------------------------------ 2. Reset und Grundlagen ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Alle Maße stehen in rem, deshalb skaliert der Faktor die gesamte Seite
     gleichmäßig - Schrift, Abstände und Spaltenbreiten zusammen. */
  font-size: calc(100% * var(--schrift-faktor, 1));
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* Sicherheitsnetz gegen horizontales Scrollen */
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.008em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--sage-deep); }
a:hover { color: var(--petrol); }

/* Deutsche Komposita sind lang: im Notfall bricht ein Wort um, statt das
   Layout zu sprengen. Bewusst ohne hyphens:auto - die automatische Trennung
   setzt in den schmalen Karten zu viele und teils falsche Trennstriche. */
.card, .tile, .chips li, .steps__item p, .contact__value, .legal {
  overflow-wrap: break-word;
}

/* Sichtbarer Fokus - Pflicht fuer Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--petrol);
  color: var(--cream);
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-size: .95rem;
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  color: var(--cream);
}

/* Einblenden beim Scrollen. Ohne JavaScript greift das <noscript>-Override
   im Kopf der Seite, damit nie Inhalt unsichtbar bleibt. */
.reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------- 3. Bausteine -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--petrol-dark); border-color: var(--petrol-dark); color: var(--cream); }

.btn--ghost {
  background: transparent;
  border-color: rgba(var(--ink-rgb), .28);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--sage-tint);
  border-color: var(--sage);
  color: var(--ink);
}

.btn__icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.btn__icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Liste mit Haekchen */
.ticks {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.ticks li {
  position: relative;
  padding-left: 2rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 1.15rem;
  height: .62rem;
  border-left: 2.5px solid var(--sage);
  border-bottom: 2.5px solid var(--sage);
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* Schlagwort-Chips */
.chips {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chips li {
  background: var(--sage-tint);
  color: var(--ink);
  border: 1px solid rgba(var(--sage-rgb), .3);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .92rem;
  line-height: 1.45;
}

.subhead {
  font-family: var(--font-text);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 2rem 0 .9rem;
}

.lead {
  font-size: 1.12em;
  color: var(--ink);
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.42;
  color: var(--ink);
  border-left: 3px solid var(--ochre);
  padding-left: clamp(1rem, 3vw, 1.6rem);
  margin-top: 2rem;
}

.footnotes {
  font-size: .86rem;
  color: var(--ink-soft);
  opacity: .85;
  margin-top: 1.6rem;
}

/* ------------------------------------------ 4. Kopf und Navigation ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--cream-rgb), .9);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(10px) saturate(1.4); }
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  text-decoration: none;
  color: var(--ink);
  display: grid;
  line-height: 1.25;
  padding-block: .55rem;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
}
.brand__role {
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.6rem);
}
.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: .96rem;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.site-nav a:hover { border-bottom-color: var(--ochre); }

.site-nav__cta {
  background: var(--petrol);
  color: var(--cream) !important;
  border-radius: 999px;
  padding: .5rem 1.15rem !important;
  border-bottom: 0 !important;
}
.site-nav__cta:hover { background: var(--petrol-dark); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem .95rem;
  font: inherit;
  font-size: .94rem;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 18px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 56rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    flex-basis: 100%;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1rem;
  }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a {
    display: block;
    padding: .85rem .25rem;
    border-bottom: 0;
  }
  .site-nav__cta {
    display: inline-block !important;
    margin-top: .9rem;
  }
}

/* --------------------------------------------------- 5. Abschnitte ----- */
.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.section--tinted { background: var(--sage-tint); }

.section__title {
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.4rem);
  margin-bottom: 1rem;
}
.section__intro {
  font-size: 1.1em;
  color: var(--ink);
  margin-bottom: 2.4rem;
}

/* --- Hero --- */
.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: 0;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(var(--sage-rgb), .18), transparent 62%),
    var(--cream);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 48rem) {
  .hero__grid {
    grid-template-columns: 1.15fr .85fr;
  }
}

.hero__eyebrow {
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}
.hero__title {
  font-size: clamp(2.15rem, 1.2rem + 4.6vw, 3.7rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.hero__lead {
  font-size: 1.12em;
  color: var(--ink);
  max-width: 34ch;
}

.hero__facts {
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: .95rem;
  color: var(--ink);
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hero__facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ochre);
  flex: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
}

.hero__figure {
  margin: 0;
  position: relative;
  justify-self: center;
  max-width: 26rem;
  width: 100%;
}
.hero__photo {
  width: 100%;
  border-radius: 46% 46% 44% 44% / 38% 38% 30% 30%;
  box-shadow: var(--shadow-md);
}
.hero__badge {
  position: absolute;
  left: 0;
  bottom: clamp(.5rem, 3vw, 1.75rem);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .8rem 1.1rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 15rem;
}
.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: .15rem;
}
/* Erst ab Tablet darf die Karte ueber den Bildrand hinausragen - auf schmalen
   Handys wuerde sie sonst links aus dem Fenster laufen. */
@media (min-width: 40rem) {
  .hero__badge { transform: translateX(-8%); }
}

/* --- Karten (Angebot) --- */
.cards {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
/* minmax(0, 1fr) statt 1fr: Grid-Items haben min-width:auto, und lange
   deutsche Komposita ("erziehungswissenschaftlichen") sprengen sonst die
   Spalte. align-items:start, damit eine kurze Karte nicht auf die Hoehe der
   laengsten gestreckt wird und unten Leerflaeche zeigt. */
@media (min-width: 54rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.card {
  background: var(--paper);
  border: 1px solid rgba(var(--sage-rgb), .22);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: 1.3rem;
  margin-bottom: .7rem;
}
.card__mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--sage-deep);
  margin-bottom: 1.1rem;
}
.card__mark svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__intro { margin-bottom: .8rem; }
.card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.card__list li {
  position: relative;
  padding-left: 1.15rem;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ochre);
}

/* --- Ablauf (Zeitstrahl) --- */
.section--walk {
  position: relative;
  background: var(--cream);
  padding-bottom: clamp(6rem, 12vw, 9rem);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* durchgehende Linie hinter den Nummern */
.steps::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(
      to bottom,
      rgba(var(--sage-rgb), .1),
      rgba(var(--sage-rgb), .45) 12%,
      rgba(var(--sage-rgb), .45) 88%,
      rgba(var(--sage-rgb), .1));
}
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: clamp(.9rem, 2.5vw, 1.5rem);
  align-items: start;
  /* Luftig gesetzt: passt zu "Schritt fuer Schritt" und gibt dem klebenden
     Weg-Band unten genug Strecke, um lange sichtbar zu bleiben. */
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__num {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--sage-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  box-shadow: 0 0 0 6px var(--cream);
}
.steps__item p { margin: .35rem 0 0; }

/* --- Rahmenbedingungen --- */
.tiles {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
@media (min-width: 54rem) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}
.tile {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(var(--sage-rgb), .22);
  box-shadow: var(--shadow-sm);
}
.tile__head {
  font-size: .8rem;
  font-family: var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(var(--sage-rgb), .25);
}
.tile--accent {
  background: var(--petrol);
  border-color: var(--petrol);
  color: rgba(var(--cream-rgb), .88);
}
.tile--accent .tile__head {
  color: var(--ochre-light);
  border-bottom-color: rgba(var(--ochre-light-rgb), .35);
}
.tile__price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: .8rem;
}
.tile__price strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ochre-light);
}
.tile strong { color: var(--ink); }
.tile--accent strong { color: var(--cream); }

.notes {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: var(--wrap-narrow);
  border-left: 3px solid var(--sage);
  padding-left: clamp(1rem, 3vw, 1.6rem);
}
.notes .subhead { margin-top: 0; }

/* --- Ansatz --- */
.quote {
  margin: 2rem 0 0;
  background: var(--sage-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(.4rem, 2vw, 1rem);
  left: clamp(1.4rem, 3.5vw, 2.4rem);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--ochre);
  opacity: .55;
}

/* --- Ueber mich --- */
.about {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 52rem) {
  .about { grid-template-columns: 22rem 1fr; }
}
.about__figure {
  margin: 0;
  justify-self: center;
  max-width: 22rem;
  width: 100%;
}
.about__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 52rem) {
  .about__figure {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
.about__body .section__title { margin-bottom: 1.5rem; }

/* --- Kontakt --- */
.contact {
  background: var(--petrol);
  color: rgba(var(--cream-rgb), .86);
}
.contact__title {
  color: var(--cream);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  margin-bottom: 1.25rem;
}
.contact__lead {
  font-size: 1.08em;
  max-width: 40ch;
}
.contact__links {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 40rem) {
  .contact__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact__link {
  display: grid;
  gap: .3rem;
  text-decoration: none;
  background: rgba(var(--cream-rgb), .07);
  border: 1px solid rgba(var(--cream-rgb), .2);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.contact__link:hover {
  background: rgba(var(--cream-rgb), .13);
  border-color: var(--ochre-light);
  transform: translateY(-2px);
}
.contact__label {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre-light);
  font-weight: 700;
}
.contact__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--cream);
  word-break: break-word;
}

/* ------------------------------------------ 6. Die laufenden Figuren ---- */
/* Grundgeruest einer Figur. Alle Koordinaten in viewBox-Einheiten (0 0 44 64),
   damit transform-origin unabhaengig von der Darstellungsgroesse stimmt.     */
.walker {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--sage-deep);
}
.walker--sage  { color: var(--sage-deep); }
.walker--ochre { color: var(--ochre-deep); }

.walker line {
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  fill: none;
}
.walker__head { fill: currentColor; }
.walker__foot { stroke-width: 3.2; }

.walker g { transform-box: view-box; }
.walker__bob  { transform-origin: 22px 57px; }
.walker__leg  { transform-origin: 22px 36px; }   /* Huefte */
.walker__shin { transform-origin: 22px 47px; }   /* Knie   */
.walker__arm  { transform-origin: 22px 22px; }   /* Schulter */

/* das abgewandte Bein und der abgewandte Arm treten zurueck */
.walker__leg--far, .walker__arm--far { opacity: .45; }

@keyframes walk-hip {
  0%   { transform: rotate(-22deg); }   /* Bein vorn, Ferse setzt auf */
  25%  { transform: rotate(-6deg);  }
  50%  { transform: rotate(17deg);  }   /* Bein hinten, Abdruck */
  75%  { transform: rotate(-2deg);  }   /* schwingt durch */
  100% { transform: rotate(-22deg); }
}
@keyframes walk-knee {
  0%   { transform: rotate(3deg);  }
  25%  { transform: rotate(2deg);  }    /* Standbein, gestreckt */
  50%  { transform: rotate(13deg); }
  70%  { transform: rotate(50deg); }    /* Schwungphase, Knie angehoben */
  85%  { transform: rotate(26deg); }
  100% { transform: rotate(3deg);  }
}
@keyframes walk-arm {
  0%   { transform: rotate(15deg);  }
  50%  { transform: rotate(-13deg); }
  100% { transform: rotate(15deg);  }
}
@keyframes walk-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75%      { transform: translateY(-1.2px); }
}

.walker__bob  { animation: walk-bob  var(--gait, .92s) ease-in-out infinite; }
.walker__leg  { animation: walk-hip  var(--gait, .92s) ease-in-out infinite; }
.walker__shin { animation: walk-knee var(--gait, .92s) ease-in-out infinite; }
.walker__arm  { animation: walk-arm  var(--gait, .92s) ease-in-out infinite; }

/* Gegentakt: abgewandtes Bein und zugewandter Arm laufen eine halbe Phase versetzt */
.walker__leg--far,
.walker__leg--far .walker__shin,
.walker__arm--near {
  animation-delay: calc(var(--gait, .92s) / -2);
}

/* --- Band unter dem Hero: Endlosschleife, rein atmosphaerisch --- */
.walk-band {
  position: relative;
  height: 100px;
  overflow: hidden;
  color: var(--sage);
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.walk-band__path {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26px;
  opacity: .7;
}
.walk-band__lane { position: absolute; inset: 0; }
.walk-band__walker {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 54px;
  height: 78px;
  animation: stroll var(--stroll, 38s) linear infinite;
  will-change: transform;
}
@keyframes stroll {
  from { transform: translateX(-5rem); }
  to   { transform: translateX(calc(100vw + 5rem)); }
}
/* Negative Verzoegerung, damit die beiden beim Laden schon im Bild sind
   und nicht erst von links hereinkommen. */
.walk-band__walker--one { --gait: .95s;  --stroll: 38s; animation-delay: -9.5s; }
.walk-band__walker--two { --gait: 1.04s; --stroll: 38s; animation-delay: -7.6s; }

/* --- Scrollgebundene Figur im Ablauf-Abschnitt --- */
/* Klebt am unteren Rand, solange man den Abschnitt liest. Die X-Position
   spiegelt, wie weit man durch den Abschnitt gescrollt ist.               */
.walk-track {
  position: sticky;
  bottom: clamp(.75rem, 3vh, 1.75rem);
  z-index: 2;
  pointer-events: none;
}
/* Ruhige Leiste hinter dem Weg. Sie beginnt erst unterhalb des Kopfes, damit
   die Figur oben herausschaut, und laeuft per Schatten weich nach oben aus -
   so verschwindet Text sauber dahinter statt halb ausgeblichen zu werden. */
.walk-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.35rem;
  bottom: -1.5rem;
  background: var(--cream);
  box-shadow: 0 -14px 18px -2px var(--cream);
  pointer-events: none;
}
.walk-track__inner {
  position: relative;
  height: 82px;
  color: var(--sage);
}
/* Breite muss explizit gerechnet werden: ein SVG ist ein ersetztes Element und
   zieht sich bei width:auto seine intrinsische Breite aus der viewBox (1200px),
   statt sich von left/right aufspannen zu lassen. */
.walk-track__path {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: calc(100% - 2 * var(--gutter));
  height: 22px;
  opacity: .65;
}
/* Die Laufstrecke ist um 1,75rem je Seite eingerueckt, damit die Figur an
   beiden Enden vollstaendig im Bild bleibt - sie ist um ihre Mitte
   positioniert und die Glieder schwingen ueber die Box hinaus. */
.walk-track__walker {
  position: absolute;
  bottom: 10px;
  left: calc(var(--gutter) + 1.75rem
             + var(--walk, 0) * (100% - 2 * var(--gutter) - 3.5rem));
  width: 50px;
  height: 72px;
  transform: translateX(-50%) scaleX(var(--dir, 1));
  --gait: .8s;
}
/* Die Figur steht still, wenn nicht gescrollt wird - erst Bewegung, wenn
   sich auch etwas bewegt. */
.walk-track__walker .walker__bob,
.walk-track__walker .walker__leg,
.walk-track__walker .walker__shin,
.walk-track__walker .walker__arm { animation-play-state: paused; }

.walk-track__walker.is-walking .walker__bob,
.walk-track__walker.is-walking .walker__leg,
.walk-track__walker.is-walking .walker__shin,
.walk-track__walker.is-walking .walker__arm { animation-play-state: running; }

/* Weg-Linien zeichnen sich, sobald sie in den Blick kommen */
.walk-band__path path,
.walk-track__path path {
  stroke-dasharray: var(--len, 1300);
  stroke-dashoffset: var(--len, 1300);
  transition: stroke-dashoffset 2.4s cubic-bezier(.3, .7, .3, 1);
}
.walk-band__path.is-drawn path,
.walk-track__path.is-drawn path { stroke-dashoffset: 0; }

/* ------------------------------------------------------- 7. Fuss ------- */
.site-footer {
  background: var(--petrol-dark);
  color: rgba(var(--cream-rgb), .7);
  padding-block: 2.25rem;
  font-size: .92rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand { margin: 0; line-height: 1.5; }
.site-footer__brand strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--cream);
}
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
.site-footer a { color: rgba(var(--cream-rgb), .82); }
.site-footer a:hover { color: var(--ochre-light); }

/* --------------------------------------- 8. Reduzierte Bewegung -------- */
/* Wer im Betriebssystem Animationen abgeschaltet hat, bekommt eine ruhige,
   vollstaendig sichtbare Seite. Die Figuren stehen dann einfach da.        */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

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

  .walk-band__path path,
  .walk-track__path path { stroke-dashoffset: 0 !important; }

  .walk-band__walker--one { transform: translateX(22vw); }
  .walk-band__walker--two { transform: translateX(calc(22vw + 3.4rem)); }

  /* Ohne Animation fallen alle Glieder senkrecht zusammen und die Figur waere
     nur ein Strich. Deshalb eine feste Schritthaltung setzen - sie steht dann
     erkennbar als Maennchen auf dem Weg. */
  .walker__leg--near { transform: rotate(-15deg); }
  .walker__leg--far  { transform: rotate(13deg); }
  .walker__leg--far .walker__shin { transform: rotate(11deg); }
  .walker__arm--near { transform: rotate(11deg); }
  .walker__arm--far  { transform: rotate(-9deg); }

  .btn:hover, .contact__link:hover { transform: none; }
}

/* ------------------------------------------------------- 9. Drucken ---- */
/* Wer die Seite ausdruckt, soll ein lesbares Blatt bekommen und nicht die
   halbe Patrone verbrauchen: keine Navigation, keine Figuren, keine dunklen
   Flaechen, keine Schatten. */
@media print {
  /* html:root statt nur :root - gestaltung.css wird NACH dieser Datei geladen
     und setzt dieselben Variablen. Mit dem zusaetzlichen Typ-Selektor gewinnt
     der Druck-Block trotzdem. */
  html:root {
    --cream: #FFFFFF;
    --paper: #FFFFFF;
    --sage-tint: #FFFFFF;
    --cream-rgb: 255, 255, 255;
    --sage-rgb: 255, 255, 255;
    --shadow-sm: none;
    --shadow-md: none;
    --schrift-faktor: 1;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Bedienelemente und Verzierung haben auf Papier nichts zu suchen */
  .site-header,
  .nav-toggle,
  .site-nav,
  .skip-link,
  .walk-band,
  .walk-track,
  .hero__badge { display: none !important; }

  /* Nichts darf ausgeblendet bleiben */
  .reveal { opacity: 1 !important; transform: none !important; }

  .section { padding-block: 1.2rem; }
  .hero {
    padding-top: 0;
    background: #fff !important;   /* der weiche Schimmer im Hintergrund entfällt */
  }
  .section--tinted, .section--walk, .section--quote { background: #fff !important; }

  h1, h2, h3, .contact__title { color: #000; }

  /* Knöpfe als Umriss statt als dunkle Fläche - spart Toner und liest sich
     auf Papier besser. */
  .btn, .btn--primary, .btn--ghost {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #666 !important;
    box-shadow: none !important;
  }
  .btn__icon { display: none; }

  /* Dunkle Flaechen aufhellen - sonst wird das Blatt schwarz */
  .contact,
  .tile--accent,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #666;
  }
  .contact__link,
  .tile--accent .tile__head,
  .tile__price strong,
  .contact__label,
  .contact__value,
  .site-footer a,
  .site-footer__brand strong { color: #000 !important; background: none !important; }
  .contact__link { border: 1pt solid #999; }

  .card, .tile, .quote, .chips li {
    border: 1pt solid #999 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* Bei tel: und mailto: steht der Wert schon im Text - bei echten Links
     nicht, deshalb die Adresse mitdrucken. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  /* Nicht mitten in einem Baustein umbrechen */
  .card, .tile, .steps__item, .quote, .notes, figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  .hero__photo { max-width: 7cm; border-radius: 0; }
  .about__figure { max-width: 6cm; }
  .about__figure { position: static !important; }

  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------- Rechtstexte (Unterseiten) ----- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.8rem);
  margin-bottom: 1.75rem;
}
.legal h2 {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.45rem);
  margin: 2.5rem 0 .8rem;
}
.legal h3 {
  font-family: var(--font-text);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 1.75rem 0 .5rem;
}
.legal address {
  font-style: normal;
  line-height: 1.7;
}
.legal ul { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal dl { margin: 0 0 1.1rem; }
.legal dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: .8rem;
}
.legal dd { margin: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-size: .95rem;
  margin-bottom: 2rem;
}
.back-link:hover { text-decoration: underline; }

/* Platzhalter, die Petra noch ausfuellen muss - absichtlich auffaellig */
.todo {
  background: #FFF3D6;
  border-bottom: 2px solid var(--ochre);
  color: #6B4A12;
  padding: .05em .3em;
  border-radius: 3px;
  font-weight: 600;
}
.todo-box {
  background: #FFF3D6;
  border: 1px solid var(--ochre);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
  color: #6B4A12;
  font-size: .95rem;
}
.todo-box strong { color: #4E350A; }