/* =========================================================
   ehrlichhilfreich.de – Redesign · Art Direction: Editorial Warm
   Anna Maria Kaufmann · Systemische Beratung
   ========================================================= */

/* Lokal gehostete Schriften (kein Google-Fonts-CDN mehr, kein Datenabfluss
   an Dritte). Fraunces/Inter sind Variable Fonts – je eine Datei deckt via
   der "wght"-Achse alle unten genutzten Schnitte (400/500/600) ab. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}

:root {
  /* Farbwelt */
  --cream:        #F7F2E9;
  --cream-2:      #FBF8F1;
  --white:        #FFFFFF;

  --forest:       #1E4A40;
  --forest-dark:  #143A32;
  --petrol:       #2C6E6A;
  --sage:         #8AA05A;

  --gold:         #D9A24E;
  --gold-2:       #E8B15A;

  --ink:          #26332F;
  --muted:        #4E5852;
  --error:        #A8461F;
  --hairline:     rgba(30,74,64,.14);
  --hairline-2:   rgba(30,74,64,.08);

  /* Typo */
  --serif: "Fraunces", "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythmus */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8.5rem);
  --radius: 4px;
  --shadow-soft: 0 24px 60px -32px rgba(20,58,50,.45);
  --shadow-card: 0 14px 40px -26px rgba(20,58,50,.4);
  --header-h: 75px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--forest);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--forest-dark); }

/* Zwei-Ring-Fokus: innerer Gold-Ring (sichtbar auf dunklen Flächen),
   äußerer Waldgrün-Ring (sichtbar auf Creme/Weiß) → ≥3:1 auf jedem Grund. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(20, 58, 50, .9);
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  background: var(--forest);
  color: var(--cream);
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

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

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

/* Overflow-Härtung: Grid-Kinder dürfen schrumpfen (kein horizontales Scrollen) */
.hero-grid > *, .suche-grid > *, .impuls-grid > *, .about-grid > *,
.contact-grid > *, .offer-grid > *, .price-grid > *,
.footer-top > *, .brandwords-grid > * { min-width: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  display: inline-block;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + .5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
}

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-y: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: var(--btn-pad-y) 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary {
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 10px 24px -14px rgba(20,58,50,.7);
}
.btn-primary:hover { background: var(--forest-dark); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--forest); background: rgba(30,74,64,.05); transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,242,233,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-2);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled {
  box-shadow: 0 12px 34px -22px rgba(20,58,50,.5);
  background: rgba(247,242,233,.92);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--forest);
}
.brand-mark {
  width: 40px; height: 40px;
  background: url("images/brand-mark.png") center/contain no-repeat;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.brand-role { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Kleiner Willkommensgruß, der beim Hover/Fokus auf das Logo erscheint. */
.brand-greet {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  max-width: 210px;
  padding: .55rem .9rem;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.3;
  white-space: normal;
  border-radius: 10px;
  box-shadow: 0 16px 32px -16px rgba(20, 58, 40, .55);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 10;
}
.brand-greet::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 22px;
  width: 10px;
  height: 10px;
  background: var(--forest);
  border-radius: 2px;
  transform: rotate(45deg);
}
.brand:hover .brand-greet,
.brand:focus-visible .brand-greet {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .brand-greet { transition: none; }
}

.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.8rem); }
.site-nav a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-nav a.btn-nav { padding: .6rem 1.15rem; background: var(--forest); color: #fff; border-radius: 999px; }
.site-nav a.btn-nav:hover { background: var(--forest-dark); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  width: 20px; height: 2px;
  background: var(--forest);
  margin-inline: auto;
  transition: transform .25s ease, opacity .2s ease;
}

/* ---------- Markenworte ---------- */
.brandwords {
  background: var(--cream-2);
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--hairline-2);
}
.brandwords-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2rem);
}
.brandword:not(:first-child) {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.4rem, 3vw, 2rem);
}
.brandword-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--petrol);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
}
.brandword-text {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(217,162,78,.10), transparent 55%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 1.3rem; }
#hero-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 1.6rem;
}
#hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--petrol);
}
.hero-lead {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem);
  color: var(--ink);
  max-width: 42ch;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.2rem; }

.trust-row {
  list-style: none;
  margin: 0; padding: 1.3rem 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.trust-row li { position: relative; padding-left: 1.1rem; }
.trust-row li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}

.hero-figure {
  position: relative;
  margin: 0;
  padding: .7rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
}
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  width: 72px; height: 72px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  border-radius: 0 6px 0 0;
  opacity: .8;
}
.hero-figure img { border-radius: 3px; width: 100%; }
.hero-cap {
  margin-top: .85rem;
  padding: 0 .4rem .3rem;
  display: flex;
  flex-direction: column;
}
.hero-cap-name { font-family: var(--serif); font-weight: 600; color: var(--forest); font-size: 1.05rem; }
.hero-cap-role { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }

.hero-motto {
  text-align: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--serif);
  font-style: italic;
  color: var(--petrol);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}
.hero-motto-sep { margin-inline: .5em; }

/* ---------- Full-bleed bands (burned-in text images) ----------
   Kein Zuschnitt: Bild komplett zeigen, damit eingebrannter Text lesbar bleibt.
   Auf sehr breiten Screens auf native Auflösung begrenzt und zentriert. */
.band { padding: 0; background: var(--cream); }
.band-img {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin-inline: auto;
}

/* ---------- Suche ---------- */
.suche { background: var(--cream); }
.suche-grid {
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.suche-copy h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); margin-bottom: 1.3rem; }
.suche-copy .lead { margin-bottom: 1.3rem; }
.suche-copy .eyebrow { justify-content: center; }

/* ---------- Orientierung: Blumenwiese ---------- */
/* Alle Blumen stehen zunächst klein, grau und geschlossen da. Fährt man mit
   der Maus darüber oder tippt eine Blume an, wächst sie dauerhaft zu voller
   Größe und Farbe auf (siehe js/home.js) – die Beobachtung verändert das
   Bild bleibend. */
.meadow-wrap { text-align: center; }

.meadow-box {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 2.2 / 1;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  touch-action: none;
  background: linear-gradient(180deg, #dee9c2 0%, #bcd48d 55%, #9dc16f 100%);
}

.flashlight-meadow { position: absolute; inset: 0; }

.fl-flower {
  position: absolute;
  aspect-ratio: 40 / 60;
  transform: translate(-50%, -100%);
}
.fl-svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform-origin: bottom center;
  transform: rotate(var(--fl-rot)) scale(.22);
  filter: grayscale(1) brightness(.82);
  opacity: .55;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease, opacity .5s ease;
}
.fl-flower.is-grown .fl-svg {
  transform: rotate(var(--fl-rot)) scale(1);
  filter: none;
  opacity: 1;
}
.fl-stem { stroke: #4C7A3F; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.fl-petals { fill: var(--petal, #D64545); }
.fl-center { fill: #F2B705; }
.fl-center-dark { fill: #3E2B1F; }

.fl-flower:nth-child(1) { left:19.2%; top:69.0%; width:66px; --fl-rot:-0.3deg; --petal:#D64545; }
.fl-flower:nth-child(2) { left:23.9%; top:76.7%; width:72px; --fl-rot:0.2deg; --petal:#E8873A; }
.fl-flower:nth-child(3) { left:50.5%; top:35.5%; width:46px; --fl-rot:-2.1deg; --petal:#E8B23D; }
.fl-flower:nth-child(4) { left:57.9%; top:23.1%; width:71px; --fl-rot:-4.3deg; --petal:#C25B9E; }
.fl-flower:nth-child(5) { left:25.4%; top:21.1%; width:78px; --fl-rot:3.8deg; --petal:#8A5FBF; }
.fl-flower:nth-child(6) { left:84.5%; top:63.6%; width:47px; --fl-rot:-2.7deg; --petal:#4F86C6; }
.fl-flower:nth-child(7) { left:49.8%; top:26.6%; width:76px; --fl-rot:-2.1deg; --petal:#D6487A; }
.fl-flower:nth-child(8) { left:18.2%; top:78.5%; width:50px; --fl-rot:6.8deg; --petal:#F2F2F2; }
.fl-flower:nth-child(9) { left:45.7%; top:58.8%; width:57px; --fl-rot:-0.2deg; --petal:#D64545; }
.fl-flower:nth-child(10) { left:21.2%; top:20.7%; width:74px; --fl-rot:-4.2deg; --petal:#E8873A; }
.fl-flower:nth-child(11) { left:75.8%; top:33.4%; width:77px; --fl-rot:6.3deg; --petal:#E8B23D; }
.fl-flower:nth-child(12) { left:73.4%; top:74.4%; width:65px; --fl-rot:3.7deg; --petal:#C25B9E; }
.fl-flower:nth-child(13) { left:15.3%; top:53.2%; width:72px; --fl-rot:-4.8deg; --petal:#8A5FBF; }
.fl-flower:nth-child(14) { left:88.9%; top:83.7%; width:59px; --fl-rot:-2.2deg; --petal:#4F86C6; }
.fl-flower:nth-child(15) { left:45.5%; top:46.5%; width:78px; --fl-rot:-1.8deg; --petal:#D6487A; }
.fl-flower:nth-child(16) { left:6.5%; top:24.9%; width:69px; --fl-rot:7.9deg; --petal:#F2F2F2; }
.fl-flower:nth-child(17) { left:49.6%; top:54.4%; width:64px; --fl-rot:4.0deg; --petal:#D64545; }
.fl-flower:nth-child(18) { left:24.4%; top:63.1%; width:64px; --fl-rot:2.0deg; --petal:#E8873A; }
.fl-flower:nth-child(19) { left:20.6%; top:30.6%; width:57px; --fl-rot:6.8deg; --petal:#E8B23D; }
.fl-flower:nth-child(20) { left:35.9%; top:62.2%; width:56px; --fl-rot:-6.3deg; --petal:#C25B9E; }
.fl-flower:nth-child(21) { left:10.0%; top:78.2%; width:71px; --fl-rot:-2.0deg; --petal:#8A5FBF; }
.fl-flower:nth-child(22) { left:66.9%; top:68.0%; width:75px; --fl-rot:7.3deg; --petal:#4F86C6; }
.fl-flower:nth-child(23) { left:41.4%; top:91.2%; width:77px; --fl-rot:1.4deg; --petal:#D6487A; }
.fl-flower:nth-child(24) { left:85.3%; top:54.3%; width:58px; --fl-rot:-4.0deg; --petal:#F2F2F2; }
.fl-flower:nth-child(25) { left:84.6%; top:30.0%; width:48px; --fl-rot:4.9deg; --petal:#D64545; }
.fl-flower:nth-child(26) { left:75.2%; top:53.8%; width:73px; --fl-rot:-7.2deg; --petal:#E8873A; }
.fl-flower:nth-child(27) { left:27.7%; top:39.5%; width:59px; --fl-rot:-5.3deg; --petal:#E8B23D; }
.fl-flower:nth-child(28) { left:10.4%; top:43.0%; width:75px; --fl-rot:7.7deg; --petal:#C25B9E; }
.fl-flower:nth-child(29) { left:72.6%; top:53.4%; width:54px; --fl-rot:7.3deg; --petal:#8A5FBF; }
.fl-flower:nth-child(30) { left:52.4%; top:71.9%; width:47px; --fl-rot:-4.6deg; --petal:#4F86C6; }
.fl-flower:nth-child(31) { left:81.1%; top:76.8%; width:74px; --fl-rot:1.6deg; --petal:#D6487A; }
.fl-flower:nth-child(32) { left:43.2%; top:61.0%; width:73px; --fl-rot:-3.1deg; --petal:#F2F2F2; }
.fl-flower:nth-child(33) { left:53.2%; top:38.4%; width:71px; --fl-rot:-7.8deg; --petal:#D64545; }
.fl-flower:nth-child(34) { left:67.0%; top:88.6%; width:47px; --fl-rot:1.5deg; --petal:#E8873A; }
.fl-flower:nth-child(35) { left:63.2%; top:81.0%; width:65px; --fl-rot:-3.9deg; --petal:#E8B23D; }
.fl-flower:nth-child(36) { left:41.3%; top:88.9%; width:75px; --fl-rot:-5.9deg; --petal:#C25B9E; }
.fl-flower:nth-child(37) { left:12.7%; top:25.0%; width:47px; --fl-rot:-0.9deg; --petal:#8A5FBF; }
.fl-flower:nth-child(38) { left:17.0%; top:82.2%; width:67px; --fl-rot:-6.0deg; --petal:#4F86C6; }

@media (max-width: 780px) {
  .meadow-box { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .meadow-box { max-width: 100%; aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-svg { transition: none; }
}

/* Sprechblasen-Rahmen für den Schlusssatz – gleiche Optik wie beim
   Glücksrad (.wheel-reveal / .wheel-reveal-text), für Wiedererkennbarkeit
   über alle interaktiven Elemente der Seite hinweg. */
.meadow-reveal, .mobile-reveal, .feather-reveal {
  max-width: 560px;
  margin: 1.6rem auto 0;
  padding: 1.5rem 1.7rem;
  background: var(--white);
  border: 2px solid var(--hairline);
  border-radius: 14px;
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.meadow-reveal.is-revealed, .mobile-reveal.is-revealed, .feather-reveal.is-revealed {
  border-color: var(--gold);
  box-shadow:
    0 20px 45px -22px rgba(217, 162, 78, .55),
    0 6px 18px -10px rgba(20, 58, 50, .3);
}
.meadow-reveal-text, .mobile-reveal-text, .feather-reveal-text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--forest);
  line-height: 1.5;
  text-align: center;
}
.meadow-reveal-text.is-placeholder, .mobile-reveal-text.is-placeholder, .feather-reveal-text.is-placeholder { color: var(--muted); font-style: normal; font-size: 1.05rem; }

@keyframes widget-reveal-pop {
  0%   { opacity: 0; transform: scale(.9) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.meadow-reveal-text.is-popping, .mobile-reveal-text.is-popping, .feather-reveal-text.is-popping { animation: widget-reveal-pop .5s cubic-bezier(.2, .8, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .meadow-reveal-text.is-popping, .mobile-reveal-text.is-popping, .feather-reveal-text.is-popping { animation: none; }
}

.feather-reveal-text { white-space: pre-line; }

/* ---------- Orientierung: Das Mobile ---------- */
/* Ein zweistöckiges, 3D wirkendes Mobile (Perspektive + leichte Neigung).
   Antippen eines Elements lässt es in 3D um die eigene Achse drehen; mit
   gestaffelter Verzögerung geraten Stangen und alle übrigen Elemente
   ebenfalls ins Schwingen – ein kleiner Impuls bewegt das ganze System. */
.mobile-wrap { text-align: center; margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.mobile-box {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 2.2 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: linear-gradient(180deg, var(--cream-2), var(--cream));
  perspective: 1100px;
}

.mobile-rig {
  position: relative;
  width: 780px;
  height: 420px;
  transform: rotateX(10deg) scale(var(--rig-scale, 1));
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.mobile-rig.is-turning { transform: rotateX(10deg) rotateY(var(--rig-turn, 10deg)) scale(var(--rig-scale, 1)); }

.mobile-string-main {
  position: absolute; top: 0; left: 50%;
  width: 2px; height: 78px;
  background: #8A7A63;
  transform: translateX(-50%);
}

.mobile-bar {
  position: absolute; top: 78px; left: 50%;
  width: 700px; height: 4px;
  border-radius: 2px;
  background: #8A7A63;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
}

.mobile-substring {
  position: absolute; top: 100%; left: 50%;
  width: 2px; height: 62px;
  background: #8A7A63;
  transform: translateX(-50%);
}

.mobile-bar-sub {
  position: absolute; top: calc(100% + 62px); left: 50%;
  width: 330px; height: 4px;
  border-radius: 2px;
  background: #8A7A63;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
}

.mobile-item {
  position: absolute; top: 100%;
  display: block;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(-50%);
  transform-origin: top center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-item:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }

.mobile-string { display: block; width: 2px; height: var(--str-h, 60px); margin: 0 auto; background: #8A7A63; }

/* Innerer Dreh-Wrapper: eigene 3D-Rotation um die Y-Achse bei Berührung,
   unabhängig vom Pendel-Ausschlag des äußeren .mobile-item. */
.mobile-shape-spin {
  display: block;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.mobile-shape-spin.is-spinning {
  animation: mobileSpin3d 1.3s cubic-bezier(.3,.6,.3,1);
}
@keyframes mobileSpin3d {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(720deg); }
}

.mobile-shape {
  display: block; width: 56px; height: 56px; margin: 4px auto 0;
  color: var(--shape-color, #2C6E67);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22));
}
.mobile-shape svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Positionen/Längen/Farben je Element (Reihenfolge = Quellcode-Reihenfolge). */
.mobile-bar > .mobile-item:nth-of-type(1) { left: 8%;  --str-h: 138px; --shape-color: #2C6E67; }
.mobile-bar > .mobile-item:nth-of-type(2) { left: 28%; --str-h: 210px; --shape-color: #E8B23D; }
.mobile-bar > .mobile-item:nth-of-type(3) { left: 72%; --str-h: 105px; --shape-color: #8A5FBF; }
.mobile-bar > .mobile-item:nth-of-type(4) { left: 92%; --str-h: 174px; --shape-color: #D6487A; }
.mobile-bar-sub > .mobile-item:nth-of-type(1) { left: 12%; --str-h: 96px;  --shape-color: #4F86C6; }
.mobile-bar-sub > .mobile-item:nth-of-type(2) { left: 88%; --str-h: 138px; --shape-color: #DB5A3C; }

@keyframes mobileSwing {
  0%   { transform: translateX(-50%) rotate(0deg); }
  15%  { transform: translateX(-50%) rotate(var(--swing-amt, 14deg)); }
  35%  { transform: translateX(-50%) rotate(calc(var(--swing-amt, 14deg) * -0.65)); }
  55%  { transform: translateX(-50%) rotate(calc(var(--swing-amt, 14deg) * 0.35)); }
  75%  { transform: translateX(-50%) rotate(calc(var(--swing-amt, 14deg) * -0.18)); }
  90%  { transform: translateX(-50%) rotate(calc(var(--swing-amt, 14deg) * 0.08)); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
.mobile-bar.is-swinging, .mobile-bar-sub.is-swinging, .mobile-item.is-swinging {
  animation-name: mobileSwing;
  animation-timing-function: cubic-bezier(.36,.07,.19,.97);
  animation-fill-mode: both;
}

@media (max-width: 780px) {
  .mobile-box { aspect-ratio: 4 / 3; }
  .mobile-rig { --rig-scale: .72; }
}
@media (max-width: 560px) {
  .mobile-box { max-width: 100%; aspect-ratio: 1 / 1; }
  .mobile-rig { --rig-scale: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-rig { transition: none; }
  .mobile-bar, .mobile-bar-sub, .mobile-item, .mobile-shape-spin { animation: none !important; }
}

/* ---------- Angebot ---------- */
.angebot { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.offer-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(30,74,64,.22);
}
.offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(44,110,106,.10);
  color: var(--petrol);
  margin-bottom: 1.1rem;
}
.offer-icon svg { width: 24px; height: 24px; }
.offer-card h3 { font-size: 1.4rem; margin-bottom: .7rem; }
.offer-card p { color: var(--muted); }

.principles {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: .2rem;
}
.principles li {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.3rem);
  color: var(--muted);
  padding: .55rem 0;
  border-bottom: 1px solid var(--hairline);
}
.principles li:first-child { border-top: 1px solid var(--hairline); }
.principles strong { color: var(--forest); font-weight: 500; }
.principles-note { color: var(--muted); max-width: 60ch; }

/* ---------- Methoden ---------- */
.methoden { background: var(--forest); color: var(--cream); }
.methoden .eyebrow { color: var(--gold-2); }
.methoden .eyebrow::before { background: var(--gold-2); }
.methoden h2 { color: var(--cream); }
.methoden .lead { color: rgba(247,242,233,.82); }

/* ---------- Methoden: Chamäleon-Foto mit verdeckten Karten ---------- */
/* Das Foto (methoden-backdrop.jpg) ist das unveränderte Original – keine
   separaten Ausschnitte, keine Überlagerungen. Nur die zehn Karten unten
   werden von einem Deckel (.mcard-cover, mit Website-Logo) verdeckt, der
   sich beim Antippen wegdreht und die Original-Karte im Foto freigibt.
   Positionen sind aus dem Bild vermessen und als Klassen hinterlegt (keine
   Inline-Styles → CSP ohne 'unsafe-inline'). */
.methoden-widget { max-width: 820px; margin: 0 auto; }
.methoden-scene { position: relative; width: 100%; overflow: visible; }
.methoden-backdrop { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Karten-Deckel (verdeckt die Original-Karte im Foto) */
.mcard { position: absolute; perspective: 700px; top: 77.07%; width: 10.30%; height: 19.84%; }
.mcard-btn {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcard-cover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(158deg, #efe3c8, #d6bd91);
  border: 1px solid rgba(20,58,50,.18);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px -7px rgba(0,0,0,.55);
  backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
/* Logo direkt auf dem Deckel, ohne eigenen Kreis-Hintergrund (das Logo-PNG
   ist bereits transparent freigestellt). */
.mcard-logo { width: 44%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.mcard-logo img { width: 100%; height: 100%; object-fit: contain; }
.mcard-btn:hover .mcard-cover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 9px 18px -8px rgba(0,0,0,.6); }
.mcard-btn:focus-visible .mcard-cover { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.mcard.is-flipped .mcard-cover { transform: rotateY(180deg); }

/* Deckel-Position je Karte (nur noch `left`, `top`/`width`/`height` sind
   für alle zehn identisch und stehen deshalb gemeinsam in `.mcard` oben).
   Deckel bewusst etwas großzügiger als die vermessene Kartenfläche
   (+0.4% Breite, +3% Höhe, mittig ausgeglichen), damit auch bei kleinen
   Rundungsabweichungen auf schmalen (mobilen) Viewports nichts vom
   Originalfoto am Rand sichtbar bleibt. */
.mcard[data-i="1"]  { left:0.68%; }
.mcard[data-i="2"]  { left:10.49%; }
.mcard[data-i="3"]  { left:20.23%; }
.mcard[data-i="4"]  { left:29.97%; }
.mcard[data-i="5"]  { left:39.70%; }
.mcard[data-i="6"]  { left:49.44%; }
.mcard[data-i="7"]  { left:59.10%; }
.mcard[data-i="8"]  { left:68.91%; }
.mcard[data-i="9"]  { left:78.73%; }
.mcard[data-i="10"] { left:88.71%; }

.methoden-hint { text-align: center; font-size: .9rem; color: rgba(247,242,233,.72); margin: .8rem 0 1.3rem; }
.methoden-caption {
  max-width: 60ch; margin: 0 auto;
  min-height: 3.6em;
  text-align: center;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: rgba(247,242,233,.06);
  border: 1px solid rgba(247,242,233,.14);
}
.methoden-caption-text { margin: 0; font-family: var(--serif); font-size: 1.08rem; color: var(--cream); line-height: 1.42; }
.methoden-caption-text.is-placeholder { font-style: italic; color: rgba(247,242,233,.6); font-size: .98rem; }
.methoden-caption-text strong { display: block; font-style: normal; color: var(--gold-2); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .mcard-cover { transition: none; }
}

/* ---------- Impuls ---------- */
.impuls { background: var(--cream); }
.impuls-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 1.6rem;
  align-items: center;
}
/* Desktop: Rad links (spannt beide Zeilen), Text oben rechts, enthüllte
   Frage darunter rechts – als eigenständige Grid-Kinder platziert. */
.wheel-widget { grid-column: 1; grid-row: 1 / span 2; }
.impuls-copy { grid-column: 2; grid-row: 1; }
.wheel-reveal { grid-column: 2; grid-row: 2; }

.wheel-noscript {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.wheel-noscript-hint {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--petrol);
}
.wheel-noscript-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wheel-noscript-list li {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--forest);
  padding: .7rem 0;
  border-top: 1px solid var(--hairline);
}
.wheel-noscript-list li:last-child { border-bottom: 1px solid var(--hairline); }

/* ---- Glücksrad: nur mit aktivem JS sichtbar (siehe .js-Gate), sonst
   zeigt <noscript> das statische Bild als Fallback. ---- */
.js-only { display: none; }
.js .js-only { display: block; }
.js .mobile-box { display: flex; }
.js .feather-field { display: flex; }
.js .wheel-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2rem);
}

.wheel-frame {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  /* Schatten sitzt bewusst hier (nicht auf dem rotierenden .wheel-disc),
     damit er beim Drehen fest/rund bleibt und nicht "eiert". */
  box-shadow: 0 26px 55px -24px rgba(20, 58, 50, .55);
}

.wheel-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform 4.5s cubic-bezier(.15, .68, .18, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .wheel-disc { transition-duration: .6s; }
}

.wheel-wedges {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #2C6E67 0deg 30deg,
    #2F86A0 30deg 60deg,
    #3E76B8 60deg 90deg,
    #5C63BE 90deg 120deg,
    #7C5FA8 120deg 150deg,
    #A34F94 150deg 180deg,
    #C24580 180deg 210deg,
    #DB5A3C 210deg 240deg,
    #E68F35 240deg 270deg,
    #EAC050 270deg 300deg,
    #6E9950 300deg 330deg,
    #4A8F6B 330deg 360deg
  );
  box-shadow: inset 0 0 0 7px rgba(251, 248, 241, .95);
}

.wheel-icon {
  position: absolute;
  width: 9%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.wheel-icon svg { width: 100%; height: 100%; }

/* Feste Positionen der 12 Rad-Icons (vorher inline style="", jetzt hier für
   eine strikte CSP ohne 'unsafe-inline' bei style-src). Reihenfolge = Quellcode-
   Reihenfolge der <span class="wheel-icon"> in index.html. */
.wheel-icon:nth-of-type(1)  { left: 58.80%; top: 17.16%; }
.wheel-icon:nth-of-type(2)  { left: 74.04%; top: 25.96%; }
.wheel-icon:nth-of-type(3)  { left: 82.84%; top: 41.20%; }
.wheel-icon:nth-of-type(4)  { left: 82.84%; top: 58.80%; }
.wheel-icon:nth-of-type(5)  { left: 74.04%; top: 74.04%; }
.wheel-icon:nth-of-type(6)  { left: 58.80%; top: 82.84%; }
.wheel-icon:nth-of-type(7)  { left: 41.20%; top: 82.84%; }
.wheel-icon:nth-of-type(8)  { left: 25.96%; top: 74.04%; }
.wheel-icon:nth-of-type(9)  { left: 17.16%; top: 58.80%; }
.wheel-icon:nth-of-type(10) { left: 17.16%; top: 41.20%; }
.wheel-icon:nth-of-type(11) { left: 25.96%; top: 25.96%; }
.wheel-icon:nth-of-type(12) { left: 41.20%; top: 17.16%; }

.wheel-hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 32%; height: 32%;
  transform: translate(-50%, -50%);
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(20, 58, 50, .5);
}
.wheel-hub img { width: 70%; height: 70%; object-fit: contain; }

.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 24px solid var(--forest);
  filter: drop-shadow(0 3px 5px rgba(20, 58, 50, .4));
  z-index: 3;
}

.wheel-spin-btn { min-width: 12rem; }
.wheel-spin-btn:disabled { opacity: .65; cursor: not-allowed; }

.wheel-reveal {
  padding: 1.5rem 1.7rem;
  background: var(--white);
  border: 2px solid var(--hairline);
  border-radius: 14px;
  min-height: 3.4em;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.wheel-reveal.is-revealed {
  border-color: var(--gold);
  box-shadow:
    0 20px 45px -22px rgba(217, 162, 78, .55),
    0 6px 18px -10px rgba(20, 58, 50, .3);
}
.wheel-reveal-text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--forest);
  line-height: 1.5;
}
.wheel-reveal-text.is-placeholder { color: var(--muted); font-style: normal; font-size: 1.05rem; }

@keyframes wheel-reveal-pop {
  0%   { opacity: 0; transform: scale(.9) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.wheel-reveal-text.is-popping { animation: wheel-reveal-pop .5s cubic-bezier(.2, .8, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .wheel-reveal-text.is-popping { animation: none; }
}
.impuls-copy h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: 1rem; }

/* ---------- Über mich ---------- */
.ueber-mich { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-media {
  margin: 0;
  padding: .6rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
}
.about-media img { border-radius: 3px; width: 100%; }
.about-copy h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: 1rem; }

.quals {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.quals li {
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  color: var(--muted);
}
.quals li:first-child { border-top: 1px solid var(--hairline); }
.quals li::before {
  content: "";
  position: absolute; left: 0; top: 1.35em;
  width: 10px; height: 10px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

.partner {
  margin-top: 2.2rem;
  padding: 1.6rem 1.8rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.partner-label {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.partner-logo { display: inline-block; }
.partner-logo img { max-height: 60px; width: auto; }
.partner-note { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }

/* ---------- Preise ---------- */
.preise { background: var(--cream); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: start;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  position: relative;
}
.price-card.featured {
  border: 1.5px solid var(--petrol);
  box-shadow: 0 26px 60px -30px rgba(20,58,50,.55);
}
.price-badge {
  position: absolute;
  top: -.85rem; left: clamp(1.8rem, 3.5vw, 2.8rem);
  background: var(--petrol);
  color: var(--cream);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  border-radius: 999px;
}
.price-card h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.price { margin: 0 0 1.4rem; }
.price-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  color: var(--forest);
  line-height: 1;
  font-weight: 500;
}
.price-feats {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: .7rem;
  flex: 1;
}
.price-feats li { position: relative; padding-left: 1.7rem; color: var(--muted); }
.price-feats li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.price-card .btn { align-self: flex-start; }

/* ---------- Kontakt ---------- */
.kontakt { position: relative; background: linear-gradient(180deg, var(--cream), var(--cream-2)); }

/* Eine einzelne Feder unterhalb der Kontaktdaten ("Ort") schwebt leicht
   schwingend an ihrem Platz. Bei Hover (Maus) oder Antippen (Touch)
   landet sie sanft; darunter erscheint dann der Schlusssatz (siehe
   js/home.js). Realistischere Kontur statt der früheren schlichten
   Tropfenform: asymmetrische Fahne (Innen-/Außenfahne unterschiedlich
   breit) mit echter Bartstrahlen-Textur beidseits des Kiels. */
.feather-field { display: flex; justify-content: center; margin: 2.2rem 0 .6rem; }
.feather {
  display: block;
  position: relative;
  width: 210px;
  height: 66px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s cubic-bezier(.34, 1.15, .4, 1);
}
.feather:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }
.feather.is-landed { transform: translateY(4px); }

/* Sanft pulsierender Schein hinter der Feder – soll Aufmerksamkeit
   wecken und zum Berühren einladen, solange sie noch nicht gelandet ist.
   Generierter Inhalt malt VOR den Geschwistern (Quelltextreihenfolge),
   liegt also automatisch hinter `.feather-orient` – kein z-index nötig. */
.feather::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 162, 78, .38), transparent 72%);
  animation: featherGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}
.feather.is-landed::before { animation: none; opacity: 0; transition: opacity .6s ease; }
@keyframes featherGlow {
  0%, 100% { opacity: .32; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.1); }
}

/* Feder liegt waagerecht: `.feather-orient` hält die ursprünglichen
   (hochkant vermessenen) Federmaße und dreht sie einmalig statisch um
   90°, zentriert in der jetzt querformatigen `.feather`-Box. Das
   Schwingen (`.feather-sway`) sitzt als eigenes, verschachteltes Element
   darin – dieselbe Außen-/Innen-Wrapper-Technik wie beim Mobile-Widget
   (äußere Ausrichtung per CSS-Transform, innere Animation unabhängig
   davon), damit sich die statische Drehung und die Schwing-Animation
   nicht gegenseitig überschreiben. */
.feather-orient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 210px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.feather-sway {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 6%;
  animation: featherIdleSway 3.4s ease-in-out infinite;
}
.feather.is-landed .feather-sway { animation: none; transform: rotate(-3deg); }
@keyframes featherIdleSway {
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  100% { transform: rotate(-4deg); }
}
.feather-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 8px rgba(20, 58, 50, .18)); }
.feather-vane { fill: #B5A48C; }
.feather-rachis { fill: none; stroke: #6B5537; stroke-width: .9; stroke-linecap: round; }
.feather-barbs { fill: none; stroke: #7A6242; stroke-width: .55; stroke-linecap: round; opacity: .8; }
.feather-fluff { fill: none; stroke: #9C8A6E; stroke-width: .7; stroke-linecap: round; opacity: .75; }

@media (max-width: 560px) {
  .feather { width: 160px; height: 50px; }
  .feather-orient { width: 50px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .feather-sway { animation: none; }
  .feather { transition: none; }
  .feather::before { animation: none; opacity: .32; }
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-intro h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom: 1rem; }
.contact-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.contact-list li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-list li:first-child { border-top: 1px solid var(--hairline); }
.contact-key {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list a {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--forest);
  text-decoration: none;
  word-break: break-word;
}
.contact-list a:hover { color: var(--petrol); text-decoration: underline; }

.contact-form {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-card);
}
.form-hint { font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem; }
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  margin-bottom: .45rem;
  color: var(--forest);
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(217,162,78,.28);
}
.contact-form .btn { width: 100%; margin-top: .4rem; }
.contact-form .btn:disabled { opacity: .6; cursor: not-allowed; }

/* Für Menschen unsichtbares Spamschutz-Feld – bleibt im Layout ansprechbar,
   damit Screenreader/Tab-Reihenfolge es sauber überspringen (kein display:none). */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-status {
  font-size: .9rem;
  margin: 0 0 1rem;
  min-height: 1.3em;
}
.form-status--success { color: var(--forest); font-weight: 600; }
.form-status--error { color: var(--error); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-dark);
  color: rgba(247,242,233,.85);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(247,242,233,.14);
}
.footer-logo-card {
  display: inline-block;
  background: var(--cream);
  border-radius: 8px;
  padding: .85rem 1.1rem;
  margin-bottom: 1.2rem;
}
.footer-logo { max-width: 260px; width: 100%; height: auto; }
.footer-motto {
  font-family: var(--serif);
  font-style: italic;
  color: rgba(247,242,233,.72);
  max-width: 38ch;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.footer-nav-group {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 2.2rem;
  row-gap: .7rem;
  justify-content: start;
}
.footer-nav-legal {
  display: flex;
  gap: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(247,242,233,.14);
}
.footer-nav a {
  color: rgba(247,242,233,.82);
  text-decoration: none;
  font-size: .95rem;
  white-space: nowrap;
}
.footer-nav a:hover { color: var(--gold-2); }
.footer-bottom {
  padding-block: 1.6rem 2rem;
  font-size: .85rem;
  color: rgba(247,242,233,.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.5rem;
}
.footer-bottom p { margin: 0; }
.footer-credit a { color: rgba(247,242,233,.75); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--gold-2); }

/* ---------- Legal ---------- */
.legal { background: var(--cream-2); }
.legal-alt { background: var(--cream); }
.legal-wrap { max-width: 820px; }
.legal-wrap h1 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.legal-wrap h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .5rem;
  color: var(--forest);
}
.legal-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .95rem;
}
.legal-wrap p { color: var(--muted); }
.legal-updated { font-size: .85rem; font-style: italic; margin-top: 2rem; }

/* ---------- Scroll reveal ----------
   Nur aktiv, wenn JS läuft (.js auf <html>). Ohne JS bleibt aller Inhalt
   sichtbar – die Animation ist reine Progressive Enhancement. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 440px; margin-inline: auto; order: -1; }
  .impuls-grid,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .about-media { position: static; max-width: 460px; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  /* Rad → enthüllte Frage → Überschrift/Text: Reihenfolge unabhängig von der
     Grid-Platzierung am Desktop, damit Rad+Frage als Cluster oben stehen. */
  .impuls-grid { grid-template-rows: none; }
  .wheel-widget { grid-column: auto; grid-row: auto; order: -1; }
  .wheel-reveal { grid-column: auto; grid-row: auto; order: 0; }
  .impuls-copy { grid-column: auto; grid-row: auto; order: 1; }
  .brandwords-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .brandword:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 1.6rem;
  }
}

@media (max-width: 960px) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream-2);
    border-bottom: 1px solid var(--hairline);
    padding: .5rem var(--gutter) 1.4rem;
    box-shadow: 0 20px 40px -24px rgba(20,58,50,.4);
    transform: translateY(-140%);
    /* Geschlossen: unsichtbar UND nicht per Tab erreichbar. */
    visibility: hidden;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav-open .site-nav { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .site-nav a:not(.btn) {
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.05rem;
  }
  .site-nav a:not(.btn)::after { display: none; }
  .btn-nav { margin-top: 1rem; text-align: center; }
  .nav-toggle { display: flex; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .price-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .offer-grid { grid-template-columns: 1fr; }
  .contact-list li { grid-template-columns: 1fr; gap: .2rem; }
  .hero-figure::before { display: none; }

  /* Zwei Zitate in einer Zeile brechen auf schmalen Screens mitten im
     zweiten Zitat um ("...Klar. Auf" | "Augenhöhe."). Sauberer: je Zitat
     eine eigene, zentrierte Zeile, ohne Trenn-Mittelpunkt dazwischen. */
  .hero-motto { display: flex; flex-direction: column; gap: .35rem; }
  .hero-motto-sep { display: none; }
  .price-badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }

  /* Markenworte (ehrlich./hilfreich./systemisch.) nehmen im gestapelten
     Mobil-Layout sonst sehr viel Höhe: Titel + Text in eine kompakte Zeile
     statt große eigene Titelzeile + mehrzeiliger Absatz darunter. Titel-
     Spalte hat eine feste Breite, damit alle drei Textspalten sauber
     untereinander ausgerichtet sind (statt je nach Wortlänge zu "wandern"). */
  .brandwords { padding-block: 1.5rem; }
  .brandwords-grid { gap: 0; }
  .brandword {
    display: flex;
    align-items: baseline;
    column-gap: .5rem;
    padding-block: .75rem;
  }
  .brandword:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .brandword-title {
    font-size: 1.1rem;
    margin: 0;
    flex: 0 0 5.6rem;
  }
  .brandword-text {
    font-size: .9rem;
    line-height: 1.5;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Rad + Button + enthüllte Frage sollen ohne Scrollen sichtbar sein:
     Sektion kompakter, Rad kleiner, Abstände enger. */
  .impuls { padding-block: clamp(2.2rem, 7vw, 3.6rem); }
  .wheel-frame { width: min(66vw, 290px); }
  .js .wheel-widget { gap: .9rem; }
  .impuls-grid { row-gap: .9rem; }
  .wheel-reveal { padding: 1rem 1.2rem; min-height: 2.6em; }
  .wheel-reveal-text { font-size: 1.05rem; }
  .wheel-reveal-text.is-placeholder { font-size: .95rem; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-nav, .nav-toggle, .skip-link, .band, .hero-figure::before { display: none !important; }
  * { box-shadow: none !important; }
  body { background: #fff; color: #000; }
  .methoden, .site-footer { background: #fff !important; color: #000 !important; }
  .methoden h2, .methoden .lead,
  .footer-nav a, .footer-motto, .footer-bottom { color: #000 !important; }
  .section { padding-block: 1.2rem; }
  a { text-decoration: underline; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Methoden-Widget im Druck: die Deckel wegblenden, damit die Original-
     Karten im Foto sichtbar sind. */
  .mcard-cover { display: none !important; }
  .methoden-caption { border-color: #ccc !important; background: #fff !important; }
  .methoden-caption-text, .methoden-hint { color: #000 !important; }

  /* Blumenwiese/Mobile im Druck sinnlos (rein interaktiv) – nur die
     Schlusssätze als Text zeigen. */
  .meadow-box, .mobile-box { display: none !important; }
  .meadow-reveal, .mobile-reveal { border-color: #ccc !important; box-shadow: none !important; }
  .meadow-reveal-text, .mobile-reveal-text { color: #000 !important; }
}