/* ============================================================
   Brigitte Cölsch — Jin Shin Jyutsu
   Warm, weich, ruhig. Alles Verstellbare steht hier oben.
   ============================================================ */

:root {
  /* Farben */
  --paper:    #F2EFE9;
  --paper-2:  #EAE5DC;
  --card:     #FBF9F5;
  --ink:      #231F1B;
  --ink-soft: #3A322A;
  --stone:    #6E655C;
  --sage:     #6F7F5C;
  --sage-dk:  #566243;
  --ochre:    #B98A3E;
  --line:     rgba(35, 31, 27, 0.12);
  --line-2:   rgba(35, 31, 27, 0.07);
  --on-dark:  #F2EFE9;

  /* Schriften */
  --display: "Newsreader", Georgia, serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Weichheit */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 40px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-1: 0 1px 2px rgba(35,31,27,.04), 0 10px 26px -14px rgba(35,31,27,.14);
  --shadow-2: 0 2px 4px rgba(35,31,27,.05), 0 26px 52px -20px rgba(35,31,27,.22);

  /* Maße */
  --page: 1180px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
}

*, *::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(--ui);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 4px; }

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0;
}
.t-hero { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 200; line-height: 1.06; }
.t-xl   { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 200; }
.t-lg   { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.t-md   { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.eyebrow {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1.4rem;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.62; color: var(--stone); }
.measure { max-width: 36rem; }
.measure-sm { max-width: 27rem; }
.soft { color: var(--stone); }

.link {
  color: var(--sage-dk);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: right; transform: scaleX(1);
  transition: transform .5s var(--ease);
}
.link:hover::after { transform-origin: left; transform: scaleX(0); }

/* ---------- Gerüst ---------- */

.shell { max-width: var(--page); margin: 0 auto; padding-inline: var(--pad); }
.sec { padding-block: clamp(4.5rem, 11vw, 9rem); }
.sec--sm { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sec--tint { background: var(--paper-2); }

.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 860px) {
  .g12 { grid-template-columns: 1fr; }
  .g12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

.mt-s { margin-top: 1.25rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 239, 233, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line-2); background: rgba(242,239,233,.88); }
.nav__in {
  max-width: var(--page); margin: 0 auto;
  padding: 1.05rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { text-decoration: none; line-height: 1.15; }
.brand b { font-family: var(--display); font-weight: 300; font-size: 1.1rem; letter-spacing: .01em; display: block; }
.brand span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); }

.menu { display: flex; gap: clamp(.9rem, 2.2vw, 2rem); align-items: center; }
.menu a {
  font-size: .875rem; text-decoration: none; color: var(--stone);
  padding: .4rem 0; position: relative;
  transition: color .4s var(--ease);
}
.menu a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0;
  height: 1px; background: var(--sage);
  transition: left .5s var(--ease), right .5s var(--ease);
}
.menu a:hover { color: var(--ink); }
.menu a:hover::after, .menu a[aria-current="page"]::after { left: 0; right: 0; }
.menu a[aria-current="page"] { color: var(--ink); }
@media (max-width: 780px) { .menu a:not(.pill) { display: none; } }

/* ---------- Knöpfe ---------- */

.pill {
  --bg: var(--ink); --fg: var(--paper);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: .9rem; font-weight: 400; letter-spacing: .005em;
  padding: .85rem 1.9rem;
  border-radius: 999px; border: 1px solid var(--bg);
  background: var(--bg); color: var(--fg);
  text-decoration: none; cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease),
              padding .45s var(--ease);
}
.pill::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform .5s var(--ease);
}
.pill > * { position: relative; z-index: 1; transition: transform .45s var(--ease); }
.pill:hover {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 22px -8px rgba(35,31,27,.34);
}
.pill:hover > * { transform: translateX(-4px); }
.pill:active { transform: translateY(-1px) scale(.985); }
.pill:hover::before { transform: translateY(0); }

/* Pfeil, der beim Hover herauswächst */
.pill::after {
  content: "→"; position: relative; z-index: 1;
  width: 0; overflow: hidden; opacity: 0;
  margin-left: 0; font-size: 1.05em; line-height: 1;
  transition: width .45s var(--ease), opacity .45s var(--ease), margin-left .45s var(--ease);
}
.pill:hover::after { width: 1em; opacity: 1; margin-left: .5rem; }
.pill--quiet {
  --bg: transparent; --fg: var(--ink);
  border-color: var(--line);
}
.pill--quiet::before { background: var(--ink); }
.pill--quiet:hover { color: var(--paper); border-color: var(--ink); }
.pill--light { --bg: var(--paper); --fg: var(--ink); }
.pill--light::before { background: transparent; }
.pill--light:hover { color: var(--paper); background: transparent; border-color: var(--paper); }
.pill--ghost { --bg: transparent; --fg: var(--paper); border-color: rgba(242,239,233,.3); }
.pill--ghost::before { background: var(--paper); }
.pill--ghost:hover { color: var(--ink); border-color: var(--paper); }

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

/* ---------- Bilder ---------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1);
  transition: box-shadow .7s var(--ease), transform .7s var(--ease);
}
.media img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;          /* verhindert Chromes Lens-Knopf */
  -webkit-user-select: none; user-select: none;
  transition: transform 1.1s var(--ease);
}
.media::after {                   /* sanfte Aufhellung beim Hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(251,249,245,0); transition: background .7s var(--ease);
}
.media:hover { box-shadow: var(--shadow-2); transform: translateY(-6px) scale(1.006); }
.media:hover img { transform: scale(1.05); }
.media:hover::after { background: rgba(251,249,245,.06); }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 3 / 2; }
.media--pano { aspect-ratio: 21 / 9; }

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

.hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__art {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 16 / 9;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(35,31,27,.52) 0%, rgba(35,31,27,.28) 42%, rgba(35,31,27,0) 72%);
}
.hero__copy {
  position: absolute; z-index: 2;
  left: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(1.5rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  max-width: 30rem;
  color: var(--on-dark);
}
.hero__copy p { color: rgba(242,239,233,.88); }
@media (max-width: 700px) {
  .hero__art { aspect-ratio: 3 / 4; }
  .hero__art::after { background: linear-gradient(to top, rgba(35,31,27,.72) 0%, rgba(35,31,27,.2) 60%); }
}

/* ---------- Karten ---------- */

.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--card);
  border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); }
.card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.card p { color: var(--stone); font-size: .97rem; }

/* ---------- Preise ---------- */

.rates { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.rates li {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
  border-radius: var(--r-sm);
  transition: background .5s var(--ease);
}
.rates li:hover { background: var(--card); }
.rates li + li { box-shadow: inset 0 1px 0 var(--line-2); }
.rates .n { font-family: var(--display); font-weight: 300; font-size: 1.25rem; }
.rates .m { display: block; font-family: var(--ui); font-size: .88rem; color: var(--stone); }
.rates .p { font-family: var(--display); font-weight: 300; font-size: 1.25rem; color: var(--sage-dk); white-space: nowrap; }

/* ---------- Ablauf ---------- */

.flow { list-style: none; margin: 0; padding: 0; }
.flow li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  box-shadow: inset 0 1px 0 var(--line-2);
}
.flow li:first-child { box-shadow: none; }
.flow .when {
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--stone); padding-top: .55rem;
}
.flow h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.flow p { color: var(--stone); max-width: 40rem; }
@media (max-width: 620px) { .flow li { grid-template-columns: 1fr; gap: .4rem; } .flow .when { padding-top: 0; } }

/* ---------- Signatur: die fünf Finger ---------- */

.fingers__stage {
  display: flex; align-items: flex-end; gap: clamp(.5rem, 1.5vw, 1rem);
  height: clamp(13rem, 24vw, 20rem);
}
.fg {
  flex: 1; border: 0; padding: 0; cursor: pointer;
  border-radius: 999px 999px 8px 8px;
  background: rgba(35,31,27,.10);
  transition: background .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.fg:hover { background: rgba(35,31,27,.2); transform: translateY(-5px); }
.fg[data-on="true"] { background: var(--sage); box-shadow: var(--shadow-1); transform: translateY(-5px); }
.fg[data-f="daumen"]       { height: 46%; border-radius: 999px; }
.fg[data-f="zeigefinger"]  { height: 82%; }
.fg[data-f="mittelfinger"] { height: 100%; }
.fg[data-f="ringfinger"]   { height: 88%; }
.fg[data-f="kleiner"]      { height: 62%; }

.readout { min-height: 10rem; }
.readout__t {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1;
  margin: 0 0 .7rem;
  animation: fade .7s var(--ease);
}
.readout__t em { font-style: italic; color: var(--sage-dk); }
.readout p { color: var(--stone); max-width: 30rem; animation: fade .9s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Zitatband ---------- */

.quote {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  min-height: clamp(20rem, 46vw, 30rem);
  display: grid; place-items: center; text-align: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  color: var(--on-dark);
  box-shadow: var(--shadow-2);
}
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.quote::after { content: ""; position: absolute; inset: 0; background: rgba(35,31,27,.52); }
.quote > div { position: relative; z-index: 2; max-width: 26ch; }

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

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .82rem; letter-spacing: .02em; color: var(--stone); margin-bottom: .45rem; }
.field input, .field textarea {
  width: 100%; font-family: var(--ui); font-size: 1rem; color: var(--ink);
  padding: .9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(111,127,92,.12);
}
.consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; color: var(--stone); margin: 1.4rem 0; }
.consent input { margin-top: .4rem; accent-color: var(--sage); }
.hp { position: absolute; left: -9999px; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 1rem 0; box-shadow: inset 0 1px 0 var(--line-2); }
.contact-list li:first-child { box-shadow: none; }
.contact-list .k { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: .25rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--sage-dk); }

/* ---------- Hinweis ---------- */

.note {
  border-radius: var(--r);
  background: var(--card);
  padding: 1.4rem 1.6rem;
  font-size: .92rem;
  color: var(--stone);
  max-width: 56ch;
  box-shadow: inset 3px 0 0 var(--sage);
}

/* ---------- Abschluss ---------- */

.close {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-block: clamp(4rem, 10vw, 7.5rem);
  margin-top: clamp(2rem, 6vw, 4rem);
}
.close p { color: rgba(242,239,233,.72); }

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

.foot { background: var(--ink); color: rgba(242,239,233,.6); font-size: .88rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.foot__in {
  max-width: var(--page); margin: 0 auto; padding: 2.25rem var(--pad) 0;
  border-top: 1px solid rgba(242,239,233,.14);
  display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; justify-content: space-between;
}
.foot a { text-decoration: none; transition: color .4s var(--ease); }
.foot a:hover { color: var(--paper); }
.foot nav { display: flex; gap: 1.5rem; }

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

.legal { max-width: 45rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2.75rem; margin-bottom: .6rem; }
.legal p { font-size: .97rem; color: var(--stone); }
.legal p strong { color: var(--ink); }

/* ---------- Bewegung ---------- */

.rise { opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.on { opacity: 1; transform: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--ink); color: var(--paper); padding: .8rem 1.3rem; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ============================================================
   Knöpfe mit Tiefe
   Eine sichtbare Unterkante lässt den Knopf körperlich wirken:
   beim Hover wächst sie und der Knopf hebt ab, beim Klicken
   sinkt er auf die Kante herunter.
   ============================================================ */

.pill {
  --edge: #0D0B09;
  --lift: 0;
  transform: translateY(calc(var(--lift) * -1px));
  box-shadow:
    0 4px 0 0 var(--edge),
    0 7px 14px -6px rgba(35, 31, 27, .30);
  transition:
    transform .32s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .32s cubic-bezier(.34, 1.56, .64, 1),
    color .4s var(--ease),
    border-color .4s var(--ease);
  will-change: transform;
}

.pill:hover {
  transform: translateY(-5px);
  box-shadow:
    0 9px 0 0 var(--edge),
    0 20px 28px -10px rgba(35, 31, 27, .34);
}

.pill:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 0 var(--edge),
    0 3px 7px -3px rgba(35, 31, 27, .3);
  transition-duration: .07s;
}

/* Heller Anschein oben, damit die Fläche gewölbt wirkt */
.pill > * { z-index: 2; }
.pill::before { z-index: 0; }

/* Kantenfarben je nach Knopfart */
.pill--quiet { --edge: rgba(35, 31, 27, .26); }
.pill--light { --edge: #B9B0A2; }
.pill--ghost { --edge: rgba(242, 239, 233, .28); }

/* Absenden-Knopf im Formular gleich behandeln */
button.pill { -webkit-appearance: none; appearance: none; }

/* Auf Touchgeräten kein Hover-Zustand hängen lassen */
@media (hover: none) {
  .pill:hover { transform: none; box-shadow: 0 4px 0 0 var(--edge), 0 7px 14px -6px rgba(35,31,27,.30); }
  .pill:hover::before { transform: translateY(100%); }
  .pill:hover::after { width: 0; opacity: 0; margin-left: 0; }
  .pill:hover > * { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .pill:hover, .pill:active { transform: none; }
}

/* ============================================================
   Korrektur: Füll-Animation entfernt
   Die von unten einfahrende Fläche hat kurzzeitig dunklen Text
   auf dunklem Grund erzeugt. Stattdessen wechselt jetzt nur der
   Hintergrund, und die Textfarbe bleibt über den ganzen Hover
   hinweg unverändert. Damit kann der Kontrast nie kippen.
   ============================================================ */

.pill::before { display: none; }

.pill {
  background: var(--bg);
  color: var(--fg);
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    transform .32s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .32s cubic-bezier(.34, 1.56, .64, 1);
}

/* Textfarbe bleibt beim Hover, wie sie ist */
.pill:hover,
.pill--quiet:hover,
.pill--light:hover,
.pill--ghost:hover { color: var(--fg); }

/* Nur der Hintergrund hellt auf oder ab */
.pill:hover            { background: #3B322A; border-color: #3B322A; }
.pill--quiet:hover     { background: rgba(35, 31, 27, .07); border-color: rgba(35, 31, 27, .3); }
.pill--light:hover     { background: #FFFFFF; border-color: #FFFFFF; }
.pill--ghost:hover     { background: rgba(242, 239, 233, .16); border-color: rgba(242, 239, 233, .55); }

.pill:active { background: var(--bg); }

/* ============================================================
   Bewegung, überarbeitet
   Einblenden und Hover kollidierten, weil beide dasselbe
   transform beanspruchten. Das Skript räumt die Einblende-
   Klassen nach dem Ablauf weg — danach gehört transform allein
   dem Hover.
   ============================================================ */

.rise {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  filter: blur(3px);
  transition:
    opacity   .9s cubic-bezier(.22, 1, .36, 1),
    transform 1s  cubic-bezier(.22, 1, .36, 1),
    filter    .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.rise.on { opacity: 1; transform: none; filter: none; }

/* Nach der Einblendung entfernt das Skript beide Klassen. */

/* --- Karten --- */
.card {
  position: relative;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    box-shadow .55s cubic-bezier(.22, 1, .36, 1),
    background .55s cubic-bezier(.22, 1, .36, 1);
}
.card::after {                       /* feine Lichtkante oben */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0);
  transition: box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}
.card:hover {
  transform: translateY(-8px);
  background: #FEFDFB;
  box-shadow:
    0 2px 4px rgba(35, 31, 27, .05),
    0 30px 56px -22px rgba(35, 31, 27, .26);
}
.card:hover::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.card h3 { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.card:hover h3 { transform: translateX(3px); }

/* --- Bilder --- */
.media {
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    box-shadow .7s cubic-bezier(.22, 1, .36, 1);
}
.media:hover {
  transform: translateY(-8px);
  box-shadow:
    0 3px 6px rgba(35, 31, 27, .06),
    0 40px 70px -28px rgba(35, 31, 27, .32);
}
.media:hover img { transform: scale(1.045); }

/* --- Preiszeilen --- */
.rates li {
  position: relative;
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.rates li:hover { transform: translateX(5px); }

/* --- Ablaufschritte --- */
.flow li { transition: opacity .45s var(--ease); }
.flow:hover li { opacity: .48; }
.flow li:hover { opacity: 1; }

/* --- Finger --- */
.fg {
  transition:
    background .5s cubic-bezier(.22, 1, .36, 1),
    transform  .5s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
.fg:hover          { transform: translateY(-10px); }
.fg[data-on="true"]{ transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; filter: none; }
  .card:hover, .media:hover, .rates li:hover, .fg:hover { transform: none; }
  .flow:hover li { opacity: 1; }
}

/* ============================================================
   Korrektur: Knopf in der Navigation
   ".menu a" ist spezifischer als ".pill" und hat dem Knopf die
   Menü-Textfarbe und den Menü-Unterstrich aufgezwungen. Die
   Menüregeln gelten jetzt ausdrücklich nicht für den Knopf.
   Der Pfeil im Knopf entfällt — ein Pseudo-Element weniger,
   ein Konflikt weniger.
   ============================================================ */

.menu a.pill {
  color: var(--fg);
  padding: .8rem 1.7rem;
  font-size: .875rem;
}
.menu a.pill:hover { color: var(--fg); }

/* Menü-Unterstrich und Pfeil abschalten */
.menu a.pill::after,
.pill::after {
  content: none;
  display: none;
}

/* Damit der Knopf in der schmalen Leiste nicht erschlägt */
.menu a.pill {
  box-shadow:
    0 3px 0 0 var(--edge),
    0 6px 12px -6px rgba(35, 31, 27, .28);
}
.menu a.pill:hover {
  box-shadow:
    0 6px 0 0 var(--edge),
    0 14px 20px -8px rgba(35, 31, 27, .32);
}
.menu a.pill:active {
  box-shadow:
    0 1px 0 0 var(--edge),
    0 2px 6px -3px rgba(35, 31, 27, .3);
}

/* Auf schmalen Bildschirmen bleibt nur der Knopf stehen */
@media (max-width: 780px) {
  .menu a.pill { display: inline-flex; }
}

/* ============================================================
   Knopf in der Navigation: flach und ruhig
   Kein Schatten, keine Kante, keine Bewegung beim Hover.
   ============================================================ */

.menu a.pill,
.menu a.pill:hover,
.menu a.pill:active,
.menu a.pill:focus {
  box-shadow: none;
  transform: none;
  background: var(--bg);
  border-color: var(--bg);
  color: var(--fg);
  transition: none;
}