/* ==========================================================================
   Persönliches Wachstum – Antje Lode
   Systemische Beratung & Klopfakupressur (EFT)
   Handgeschriebenes CSS, kein Build-Prozess nötig.
   ========================================================================== */

/* --- Schriften (lokal gehostet, kein Google-Server) ----------------------- */

@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/petrona-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/petrona-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Petrona';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/petrona-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Petrona';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/petrona-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Tokens -------------------------------------------------------- */

:root {
  /* Farben */
  --paper:      #f7f4ec;  /* warmes Papier, Grundfläche */
  --paper-lift: #fffdf8;  /* Karten, leicht heller als Papier */
  --sand:       #e4ddcd;  /* Linien, Rahmen */
  --sand-deep:  #cdc3ac;
  --ink:        #1d2a23;  /* tiefes Kieferngrün statt Schwarz */
  --ink-soft:   #4d5c53;
  --moss:       #33513f;  /* Trägerfarbe: Flächen, Buttons */
  --moss-deep:  #22382c;
  --sage:       #b5c6ac;
  --sage-soft:  #e0e7d9;
  --honey:      #c8892b;  /* Akzent – Nachklang des alten Rapsfelds */
  --honey-soft: #f0dfbc;
  --on-dark:      #edf1e8;
  --on-dark-soft: #aec0a6;

  /* Typografie */
  --font-display: 'Petrona', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --step-hero: clamp(2.4rem, 1.35rem + 4.4vw, 4.4rem);
  --step-h2:   clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem);
  --step-h3:   clamp(1.22rem, 1.08rem + 0.62vw, 1.5rem);
  --step-lead: clamp(1.06rem, 0.99rem + 0.34vw, 1.24rem);

  /* Maße */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 72px;
  --shadow-soft: 0 1px 2px rgba(29, 42, 35, 0.04),
                 0 10px 30px -18px rgba(29, 42, 35, 0.28);
  --shadow-lift: 0 2px 4px rgba(29, 42, 35, 0.05),
                 0 22px 44px -24px rgba(29, 42, 35, 0.4);
}

/* --- Grundlagen ----------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--moss);
  color: var(--on-dark);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* --- Typografische Bausteine ---------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--honey);
  flex: none;
}

/* Zweizeilige Variante: Der Ort steht auf einer eigenen Zeile und
   bleibt dort immer zusammen. Der Strich richtet sich an der
   ersten Zeile aus statt an der Mitte beider Zeilen. */
.eyebrow-stacked { align-items: flex-start; }
.eyebrow-stacked::before { margin-top: 0.76em; }

.eyebrow-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.eyebrow-place { white-space: nowrap; }

/* Verhindert, dass ein Wort am Bindestrich umbricht (z. B. Yager-Code). */
.nowrap { white-space: nowrap; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.62;
  color: var(--ink-soft);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head h2 { font-size: var(--step-h2); }
.section-head p { font-size: var(--step-lead); color: var(--ink-soft); margin-bottom: 0; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.92rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--moss);
  color: var(--paper);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--moss-deep); box-shadow: var(--shadow-lift); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--sand-deep);
}
.btn-ghost:hover { border-color: var(--moss); background: rgba(51, 81, 63, 0.06); }

.btn-honey {
  background: var(--honey);
  color: #22190a;
}
.btn-honey:hover { background: #b0761f; }

.btn-outline-light {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(237, 241, 232, 0.38);
}
.btn-outline-light:hover { border-color: var(--on-dark); background: rgba(237, 241, 232, 0.1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--sand);
  box-shadow: 0 8px 24px -22px rgba(29, 42, 35, 0.7);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.brand-mark { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.13rem;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.3rem 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--honey); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--sand);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  font-size: var(--step-hero);
  margin-bottom: 0.5em;
}
.hero h1 em {
  font-style: italic;
  color: var(--moss);
}

.hero-lead {
  font-size: clamp(1.08rem, 1rem + 0.42vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-trust {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--sand);
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.hero-trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.hero-trust svg { flex: none; margin-top: 0.28em; color: var(--moss); }

/* --- Signature: das Mobile ------------------------------------------------ */

.mobile-figure { margin: 0; }
.mobile-stage {
  background: linear-gradient(168deg, var(--sage-soft), var(--paper-lift) 62%);
  border: 1px solid var(--sand);
  border-radius: 20px;
  padding: 1.4rem 1rem 1rem;
  box-shadow: var(--shadow-soft);
}
.mobile-svg { display: block; width: 100%; height: auto; }

.mobile-svg .m-line { stroke: var(--moss); stroke-width: 1.3; fill: none; }
.mobile-svg .m-bar  { stroke: var(--moss); stroke-width: 2; stroke-linecap: round; fill: none; }
.mobile-svg .m-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--ink-soft);
  letter-spacing: 0.02em;
}
.mobile-svg .m-anchor { fill: var(--moss); }
.mobile-svg .m-dot { fill: var(--sage-soft); stroke: var(--moss); stroke-width: 1.4; }
.mobile-svg .m-dot-self { fill: var(--honey); stroke: none; }
.mobile-svg .m-label-self { fill: var(--ink); font-weight: 700; }


/* Jeder Arm dreht sich um seinen eigenen Nullpunkt. Den verschieben die beiden
   Hüllen im SVG genau auf die Aufhängung – deshalb hier ausdrücklich 0 0 und
   keine Koordinaten. Frühere Fassungen drehten über transform-origin in
   viewBox-Koordinaten; bei verschachtelten Gruppen legen Browser das
   unterschiedlich aus, wodurch sich die Linien voneinander lösten. */
.m-arm {
  transform-box: view-box;
  transform-origin: 0 0;
  animation-name: impuls;
  animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  animation-iteration-count: infinite;
}

/* Verschiedene Takte und Auslenkungen. Der Anstoß beginnt bei „Ich“, die
   anderen folgen versetzt – weil die Takte aber nicht aufgehen, laufen die
   Arme danach auseinander und schwingen jeder für sich. Gleiche Dauer für
   alle ließ das Mobile wie ein starres Gitter wirken. */
.m-arm-ich   { --schwung: 3.6deg; animation-duration: 6.5s; animation-delay: 0s; }
.m-arm-oben  { --schwung: 2.2deg; animation-duration: 9.2s; animation-delay: 0.5s; }
.m-arm-links { --schwung: 3.0deg; animation-duration: 7.7s; animation-delay: 1.1s; }

@keyframes impuls {
  0%        { transform: rotate(0deg); }
  7%        { transform: rotate(var(--schwung)); }
  20%       { transform: rotate(calc(var(--schwung) * -0.68)); }
  34%       { transform: rotate(calc(var(--schwung) * 0.44)); }
  48%       { transform: rotate(calc(var(--schwung) * -0.26)); }
  62%       { transform: rotate(calc(var(--schwung) * 0.12)); }
  74%, 100% { transform: rotate(0deg); }
}

.mobile-caption {
  margin: 1.1rem 0.4rem 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

/* --- Abschnitte ----------------------------------------------------------- */

.section {
  padding-block: clamp(3.6rem, 7.5vw, 6.5rem);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.section-lift {
  background: var(--paper-lift);
  border-block: 1px solid var(--sand);
}
.section-moss {
  background: var(--moss-deep);
  color: var(--on-dark);
}
.section-moss h2, .section-moss h3 { color: var(--on-dark); }
.section-moss .lead,
.section-moss .section-head p { color: var(--on-dark-soft); }
.section-moss .eyebrow { color: var(--on-dark-soft); }

/* --- Kurzvorstellung unter dem Hero --------------------------------------- */

/* Leicht abgesetzte Fläche statt Kasten: Das Band soll als eigener Gedanke
   lesbar sein, ohne wie eine weitere Karte zu wirken. Eine Linie nach oben
   braucht es nicht – die hat der Hero bereits (.hero::after). */
.vorstellung {
  background: var(--paper-lift);
  border-bottom: 1px solid var(--sand);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.vorstellung-grid {
  display: grid;
  /* Die Bildspalte ist auf die Höhe des Textblocks daneben abgestimmt: drei
     Zeilen Satz, Namenszeile, Link – zusammen rund 200 px. Ein höheres Bild
     würde die Höhe des Bandes bestimmen statt der Inhalt. */
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 2.8rem);
  align-items: center;
}
.vorstellung-bild {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sage-soft);
  border: 1px solid var(--sand);
}
.vorstellung-bild img { width: 100%; display: block; }

.vorstellung-satz {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  line-height: 1.5;
  max-width: 36rem;
  margin-bottom: 1.1rem;
}
.vorstellung-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.vorstellung-name span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Textlink mit Pfeil – bewusst keine dritte Schaltfläche so kurz hinter den
   beiden im Hero. */
.mehr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--moss);
  text-decoration: underline;
  text-decoration-color: var(--honey);
  text-underline-offset: 4px;
}
.mehr-link::after { content: "→"; transition: transform 0.15s ease; }
.mehr-link:hover::after { transform: translateX(3px); }

/* Der Text rutscht erst dann unter das Bild, wenn daneben wirklich kein
   lesbarer Textblock mehr Platz hat. Bei 150 px Bildbreite ist das erst
   unterhalb von 560 px der Fall – vorher stand der Umbruch bei 800 px und
   griff dadurch schon auf Tablets und schmalen Fenstern. */
@media (max-width: 560px) {
  .vorstellung-grid { grid-template-columns: minmax(0, 1fr); }
  .vorstellung-bild { max-width: 150px; }
}

/* --- Angebotskarten ------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.2rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-lift);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--sage);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.card-icon {
  color: var(--moss);
  margin-bottom: 1.05rem;
}
.card h3 {
  font-size: var(--step-h3);
  margin-bottom: 0.5em;
}
.card p {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.card-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--sand);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.card-price {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
}
.card-unit { color: var(--ink-soft); }

/* Weiterführender Link, bewusst über dem Preisfuß: Stünde er darunter, würde
   er die Preiszeile dieser einen Karte nach oben schieben und die Preise über
   die Kartenreihe hinweg aus der Flucht bringen. */
.card-mehr { margin: 0.85rem 0 0; font-size: 0.9rem; }
.card-mehr a {
  font-weight: 700;
  color: var(--moss);
  text-decoration: underline;
  text-decoration-color: var(--honey);
  text-underline-offset: 3px;
}
.card-mehr a::after { content: " →"; }

/* --- Schwerpunkt: Stationen des Werdegangs -------------------------------- */

/* Eine echte Abfolge in der Zeit – deshalb die Dauer als eigene Spalte.
   tabular-nums lässt "7 Jahre" und "6 Jahre" untereinander fluchten. */
.stationen {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
}
.stationen > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--sand);
}
.stationen > div:last-child { border-bottom: 0; padding-bottom: 0; }
.stationen dt {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--moss);
}
.stationen dd { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }

/* Muss hinter den Grundregeln stehen: Bei gleicher Spezifität entscheidet die
   Reihenfolge, und weiter oben im Stylesheet würde diese Regel verlieren. */
@media (max-width: 560px) {
  .stationen > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* --- Methoden ------------------------------------------------------------- */

.methods {
  display: grid;
  gap: clamp(2.2rem, 4.5vw, 3.4rem);
}
.method {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.5vw, 3rem);
  padding-top: clamp(2.2rem, 4.5vw, 3.4rem);
  border-top: 1px solid var(--sand);
}
.method:first-child { padding-top: 0; border-top: 0; }

.method-head { position: sticky; top: calc(var(--header-h) + 1.6rem); }
.method h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  margin-bottom: 0.15em;
}
.method-sub {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--honey);
  margin-bottom: 0;
}
.method p { color: var(--ink-soft); }

.method-seal {
  width: 104px;
  height: auto;
  margin-top: 1.4rem;
}
.method-list {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.method-list li {
  padding-left: 1.35rem;
  position: relative;
}
.method-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
}

.fine-print {
  margin-top: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Hinweiskasten direkt unter einem anderen Block – ohne Abstand nach oben. */
.note-inline.is-tight {
  margin-top: 0;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.note-inline {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--honey-soft);
  border-left: 3px solid var(--honey);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.3rem;
  font-size: 0.98rem;
  color: #4a3a1a;
}
.note-inline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Ablauf (echte Reihenfolge, daher nummeriert) ------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.6rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(237, 241, 232, 0.22);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0.9rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--honey);
}
.step h3 { font-size: var(--step-h3); margin-bottom: 0.45em; }
.step p { color: var(--on-dark-soft); font-size: 0.98rem; }

/* --- Hinweise unter den Angebotskarten ------------------------------------ */

/* Kleingedrucktes direkt unter den Karten: volle Breite, kleiner Abstand und
   bewusst ohne Trennlinie – sonst stehen hier zwei Linien kurz hintereinander. */
.preis-hinweis {
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Zwei Hinweiskacheln nebeneinander. Ruhiger gehalten als die Angebotskarten
   darüber: kein Schatten, kleinere Schrift – sie sind Fußnote, nicht Angebot. */
.hinweise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.2rem);
  margin-top: clamp(1.6rem, 2.8vw, 2.2rem);
}
.hinweis {
  background: var(--paper-lift);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2vw, 1.4rem);
}
.hinweis h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  margin-bottom: 0.45em;
}
.hinweis h3 svg { flex: none; color: var(--honey); }
.hinweis p { font-size: 0.95rem; color: var(--ink-soft); }

/* Einladungsband: Text links, Schaltfläche rechts. Honigfarben wie das
   kostenlose Erstgespräch auf der Terminseite, damit beide Einladungen
   erkennbar zusammengehören. */
.einladung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: #fffaf0;
  border: 1px solid var(--honey);
  border-radius: var(--radius);
}
.einladung h3 { font-size: var(--step-h3); }
.einladung p { font-size: 0.98rem; color: var(--ink-soft); }
.einladung .btn { white-space: nowrap; }

/* --- Über mich ------------------------------------------------------------ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.portrait-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sage-soft);
  border: 1px solid var(--sand);
}
.portrait-frame img { width: 100%; }
.credentials-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  align-items: center;
  margin-top: 1.2rem;
}

.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.credentials li { padding-left: 1.1rem; position: relative; }
.credentials li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--honey);
  border-radius: 50%;
}
.credentials-seal {
  width: clamp(66px, 16vw, 84px);
  height: auto;
}

.pullquote {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 3px solid var(--sage);
}
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  line-height: 1.44;
  color: var(--ink);
}
.pullquote footer { font-size: 0.88rem; color: var(--ink-soft); }

/* --- Netzwerk ------------------------------------------------------------- */

/* Liste statt Kartenraster: Ein Raster mit einem einzigen Element sieht aus wie
   ein Fehler. Eine Zeile mit Trennlinie wirkt vollständig, fünf Zeilen ebenso. */
.netzwerk-eintrag {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 0.4rem 2rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
  border-top: 1px solid var(--sand);
}
.netzwerk-eintrag:last-child { border-bottom: 1px solid var(--sand); }
.netzwerk-eintrag h3 { font-size: 1.15rem; margin-bottom: 0.2em; }
.netzwerk-rolle { font-size: 0.92rem; color: var(--ink-soft); }
.netzwerk-eintrag p { margin-bottom: 0.9rem; }

/* Muss hinter den Grundregeln stehen: Bei gleicher Spezifität entscheidet die
   Reihenfolge, weiter oben im Stylesheet würde diese Regel verlieren. */
@media (max-width: 700px) {
  .netzwerk-eintrag { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .netzwerk-rolle { margin-bottom: 0.7rem; }
}

/* --- Zitatband auf dem Rapsfeld ------------------------------------------- */

/* Der Bereich darüber (häufige Fragen) hat eine feine Trennlinie.
   Sie würde den weichen Übergang stören, deshalb schiebt sich das
   Band einen Pixel darüber. */
.section-lift + .quote-band { margin-top: -1px; }

.quote-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(420px, 39vw, 520px);
  padding-block: clamp(4rem, 8vw, 6rem);
  /* Vier übereinanderliegende Ebenen, von oben nach unten:
     1. Kantenverläufe – oben ins Papierbeige des Frage-Bereichs,
        unten ins Moosgrün des Kontaktblocks. Dadurch hat das Bild
        keine sichtbaren Kanten mehr, sondern wächst aus der Seite heraus.
     2. Dunkler Streifen genau dort, wo das Zitat steht (Lesbarkeit).
     3. Waagerechter Schleier für die Gesamtstimmung.
     4. Das Foto selbst. */
  background-image:
    linear-gradient(to bottom,
      rgb(255, 253, 248) 0%,
      rgba(255, 253, 248, 0.96) 3%,
      rgba(255, 253, 248, 0.87) 7%,
      rgba(255, 253, 248, 0.73) 10%,
      rgba(255, 253, 248, 0.56) 14%,
      rgba(255, 253, 248, 0.39) 17%,
      rgba(255, 253, 248, 0.24) 21%,
      rgba(255, 253, 248, 0.12) 25%,
      rgba(255, 253, 248, 0.04) 28%,
      rgba(255, 253, 248, 0) 32%),
    linear-gradient(to bottom,
      rgba(34, 56, 44, 0) 62%,
      rgba(34, 56, 44, 0.72) 86%,
      rgb(34, 56, 44) 100%),
    linear-gradient(to bottom,
      rgba(26, 40, 31, 0) 14%,
      rgba(26, 40, 31, 0.56) 32%,
      rgba(26, 40, 31, 0.56) 64%,
      rgba(26, 40, 31, 0) 84%),
    linear-gradient(96deg,
      rgba(29, 45, 35, 0.3) 0%,
      rgba(29, 45, 35, 0.12) 48%,
      rgba(29, 45, 35, 0.26) 100%),
    url('../img/rapsfeld-klein.jpg');
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
}

@media (min-width: 760px) {
  .quote-band {
    background-image:
      linear-gradient(to bottom,
        rgb(255, 253, 248) 0%,
        rgba(255, 253, 248, 0.96) 4%,
        rgba(255, 253, 248, 0.87) 9%,
        rgba(255, 253, 248, 0.73) 14%,
        rgba(255, 253, 248, 0.56) 19%,
        rgba(255, 253, 248, 0.39) 24%,
        rgba(255, 253, 248, 0.24) 29%,
        rgba(255, 253, 248, 0.12) 34%,
        rgba(255, 253, 248, 0.04) 39%,
        rgba(255, 253, 248, 0) 44%),
      linear-gradient(to bottom,
        rgba(34, 56, 44, 0) 62%,
        rgba(34, 56, 44, 0.72) 86%,
        rgb(34, 56, 44) 100%),
      linear-gradient(to bottom,
        rgba(26, 40, 31, 0) 14%,
        rgba(26, 40, 31, 0.54) 32%,
        rgba(26, 40, 31, 0.54) 64%,
        rgba(26, 40, 31, 0) 84%),
      linear-gradient(96deg,
        rgba(29, 45, 35, 0.26) 0%,
        rgba(29, 45, 35, 0.08) 48%,
        rgba(29, 45, 35, 0.22) 100%),
      url('../img/rapsfeld.jpg');
  }
}

.quote-band-text {
  margin: 0;
  max-width: 40rem;
  text-align: center;
  margin-inline: auto;
}
.quote-band-text p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.02rem + 1.25vw, 2.1rem);
  line-height: 1.36;
  color: #fffefb;
  text-shadow: 0 1px 3px rgba(18, 28, 22, 0.5), 0 2px 26px rgba(18, 28, 22, 0.65);
  margin-bottom: 0;
}
.quote-band-text footer {
  margin-top: 1.3rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 254, 251, 0.9);
  text-shadow: 0 1px 10px rgba(18, 28, 22, 0.6);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--sand); }
.faq-item { border-bottom: 1px solid var(--sand); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  margin-top: 0.4em;
  border-right: 2px solid var(--moss);
  border-bottom: 2px solid var(--moss);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--moss); }
.faq-answer {
  padding: 0 0 1.4rem;
  max-width: 54rem;
  color: var(--ink-soft);
}

/* --- Kontaktblock --------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.contact-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.contact-list svg { flex: none; margin-top: 0.28em; color: var(--honey); }
.contact-label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 0.1rem;
}
.contact-value {
  font-size: 1.08rem;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 241, 232, 0.3);
  transition: border-color 0.18s ease;
}
a.contact-value:hover { border-bottom-color: var(--honey); }
address.contact-value { font-style: normal; border: 0; line-height: 1.5; }

/* --- Termin-Seite --------------------------------------------------------- */

.page-hero {
  padding-block: clamp(2.6rem, 5vw, 4.4rem) clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--sand);
}
.page-hero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  max-width: 20ch;
}
.page-hero .lead { max-width: 44rem; }

.option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1.2rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.option-card {
  background: var(--paper-lift);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.option-card.is-highlight { border-color: var(--honey); background: #fffaf0; }
.option-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--moss-deep);
  margin-bottom: 0.9rem;
}
.option-card.is-highlight .option-tag { background: var(--honey); color: #22190a; }
.option-card h3 { font-size: var(--step-h3); margin-bottom: 0.4em; }
.option-card p { font-size: 0.97rem; color: var(--ink-soft); margin-bottom: 0; }
.option-meta {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--sand);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.calendar-panel {
  background: var(--paper-lift);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-soft);
}
.consent-box { text-align: center; max-width: 40rem; margin-inline: auto; padding: 1.4rem 0.4rem; }
.consent-box h3 { font-size: var(--step-h3); }
.consent-box p { font-size: 0.94rem; color: var(--ink-soft); }
.consent-fine { font-size: 0.84rem; }

/* Verbindlicher Hinweis unter Kalender und Formular. Bewusst ruhig gesetzt –
   er soll gelesen werden, aber nicht drohen. */
.termin-hinweis {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--sand);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
#cal-embed:not(:empty) { min-height: 560px; margin-top: 0.5rem; }

/* --- Formular ------------------------------------------------------------- */

.form-panel {
  background: var(--paper-lift);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }

/* Das Eingabefeld sitzt am unteren Rand seiner Zelle. Bricht eine Beschriftung
   doch einmal auf zwei Zeilen um, rutscht damit nicht ein einzelnes Feld aus
   der Reihe – alle Felder einer Zeile bleiben auf einer Linie. */
.field > :last-child { margin-top: auto; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 0.89rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.field-hint { font-weight: 400; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius-sm);
  padding: 0.78rem 0.9rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2333513f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(51, 81, 63, 0.14);
  outline: none;
}

.field-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.field-check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.22em;
  flex: none;
  accent-color: var(--moss);
}
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
}
.form-foot p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.6rem;
  font-size: 0.96rem;
  border: 1px solid;
}
.alert-error { background: #fbeeea; border-color: #dcae9c; color: #6f2c14; }
.alert-ok { background: var(--sage-soft); border-color: var(--sage); color: var(--moss-deep); }

/* --- Rechtstexte ---------------------------------------------------------- */

.legal { padding-block: clamp(2.6rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem); }
.legal h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.6rem);
  margin-top: 2.6rem;
}
.legal h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--moss); }

/* --- Danke-Seite ---------------------------------------------------------- */

.confirm {
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.confirm-mark {
  width: 62px; height: 62px;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--moss);
  display: grid;
  place-content: center;
}
.confirm p { max-width: 34rem; }

/* --- Fußzeile ------------------------------------------------------------- */

.site-footer {
  background: var(--moss-deep);
  color: var(--on-dark-soft);
  padding-block: clamp(2.6rem, 5vw, 4rem) 2rem;
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(237, 241, 232, 0.16);
}
.footer-title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 0.9rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-list a { color: var(--on-dark-soft); text-decoration: none; }
.footer-list a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-brand p { color: var(--on-dark-soft); max-width: 26rem; }
.footer-brand strong {
  display: block;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.footer-bottom {
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* --- Mobile Aktionsleiste ------------------------------------------------- */

.action-bar {
  position: fixed;
  z-index: 90;
  inset-inline: 0;
  bottom: 0;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(247, 244, 236, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sand);
}
.action-bar .btn { flex: 1; padding-block: 0.8rem; font-size: 0.93rem; }

/* --- Sanfte Einblendung --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Responsiv ------------------------------------------------------------ */

@media (max-width: 960px) {
  .hero-grid,
  .about-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .hero-grid { gap: 2.6rem; }
  .mobile-figure { max-width: 460px; margin-inline: auto; }
  .portrait-frame { max-width: 340px; }
  .about-grid .portrait-frame { order: -1; }

}


/* --- Klappmenü -------------------------------------------------------------
   Logo und Navigation belegen mit fünf Menüpunkten und der Schaltfläche
   791 px. Mit Seitenrändern und etwas Luft wird es unterhalb von rund 870 px
   eng – ab hier übernimmt das Klappmenü. Die Punkte tragen white-space: nowrap
   und können sich nicht zusammenschieben, deshalb ist der Wert gemessen und
   nicht geschätzt: Bei zu kleiner Grenze liefe die Kopfzeile über. */

@media (max-width: 870px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.25rem 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid var(--sand);
    box-shadow: 0 18px 30px -26px rgba(29, 42, 35, 0.9);
  }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--sand);
  }
  .nav-link:hover,
  .nav-link[aria-current="page"] { border-bottom-color: var(--sand); color: var(--moss); }
  .nav .btn { margin-top: 1rem; }
}

@media (max-width: 800px) {
  :root { --header-h: 64px; }

  .action-bar { display: flex; }
  body { padding-bottom: 4.6rem; }

  .brand-sub { display: none; }

  .hinweise { grid-template-columns: minmax(0, 1fr); }

  .einladung { grid-template-columns: minmax(0, 1fr); }
  .einladung .btn { width: 100%; }

  .method { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .method-head { position: static; }
  .method-seal { width: 84px; margin-top: 1rem; }
}

@media (max-width: 460px) {
  .card-foot { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .btn-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .action-bar, .site-footer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}