/* ==========================================================================
   MIRSYON — Preisdarstellung, Bewegung und Berührungsrückmeldung
   Ergänzt site.css. Alle Effekte sind selbst geschrieben (kein Fremdcode),
   damit die Sicherheitsrichtlinie streng bleiben kann.
   Grundsatz aus dem Designstandard: Bedienbarkeit vor Schauwert — jede
   Bewegung hier dauert 150–260 ms und verstummt bei „Bewegung reduzieren“.
   ========================================================================== */

/* --------------------------------------------------------------- Preise */
.preisfeld {
  display: grid;
  gap: .2rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--glas);
  border: 1px solid var(--linie-dunkel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font-feature-settings: "tnum";
}
.preisfeld__wort {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hellblau); opacity: .85;
}
.preisfeld__wert {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.05; color: var(--text-hell);
}
.preisfeld__fuss { font-size: .78rem; color: var(--text-hell-leise); line-height: 1.5; }

.insel .preisfeld, .block--hell .preisfeld {
  background: var(--insel-rein); border-color: var(--linie);
  box-shadow: 0 10px 28px -18px rgba(18, 47, 76, .3);
}
.insel .preisfeld__wort, .block--hell .preisfeld__wort { color: var(--akzent-text); opacity: 1; }
.insel .preisfeld__wert, .block--hell .preisfeld__wert { color: var(--navy); }
.insel .preisfeld__fuss, .block--hell .preisfeld__fuss { color: var(--text-leise, #5A7085); }

.preistafel { display: grid; gap: .55rem; }
.preiszeile {
  display: grid;
  grid-template-columns: 1fr auto 1.4rem;
  align-items: center; gap: 1.2rem;
  padding: 1.15rem 1.4rem;
  border-radius: 16px;
  background: var(--glas);
  border: 1px solid var(--linie-dunkel);
  text-decoration: none; color: inherit;
  font-feature-settings: "tnum";
  position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.22,.8,.3,1),
              border-color .22s ease, background .22s ease;
}
.preiszeile__name { font-weight: 600; color: var(--text-hell); display: grid; gap: .18rem; }
.preiszeile__unter { font-weight: 400; font-size: .82rem; color: var(--text-hell-leise); }
.preiszeile__wert {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 600;
  letter-spacing: -.02em; white-space: nowrap; color: var(--hellblau);
}
.preiszeile__pfeil { color: var(--hellblau); opacity: .55; transition: transform .22s ease, opacity .22s ease; }
.preiszeile--still { opacity: .78; }

@media (hover: hover) {
  .preiszeile:hover {
    transform: translateY(-2px);
    border-color: var(--linie-dunkel-hell);
    background: var(--glas-stark);
  }
  .preiszeile:hover .preiszeile__pfeil { transform: translateX(3px); opacity: 1; }
}
/* Berührung: sofortige, spürbare Rückmeldung statt verzögertem Hover */
.preiszeile:active { transform: scale(.985); background: var(--glas-stark); }

/* ------------------------------------------------- Lichtstrahl am Rand
   (Magic-UI-„Border Beam“, hier als reine CSS-Maske nachgebaut)          */
.strahlrand { position: relative; isolation: isolate; }
.strahlrand::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--winkel, 0deg),
              transparent 0 62%, var(--hellblau) 76%, var(--akzent) 86%, transparent 94% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
  animation: randlauf 6s linear infinite;
}
.strahlrand:hover::after, .strahlrand:focus-within::after { opacity: .9; }
@property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes randlauf { to { --winkel: 360deg; } }

/* ------------------------------------------------------- Punkteraster
   (Magic-UI-„Dot Pattern“) — gibt leeren Flächen Textur, kostet nichts. */
.punktgrund { position: relative; }
.punktgrund::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(123, 205, 254, .16) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 35%, transparent 78%);
}
.punktgrund > * { position: relative; z-index: 1; }

/* --------------------------------------------------- Signal auf der Linie
   (Magic-UI-„Animated Beam“) — ein Lichtpunkt wandert eine Verbindung ab. */
.signalbahn { position: relative; overflow: hidden; }
.signalbahn::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(123, 205, 254, .5), transparent);
  animation: bahnlauf 2.8s ease-in-out infinite;
}
@keyframes bahnlauf { to { left: 110%; } }

/* ------------------------------------------------- Berührungsrückmeldung
   Mobil wird jede Fläche beim Antippen kurz kleiner — das ist die
   Rückmeldung, die am Telefon sonst fehlt (kein Hover vorhanden).        */
.knopf, .karte, .schild, .reiter, .nav__link, .pfeil-link, .preiszeile {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.knopf { transition: transform .18s cubic-bezier(.22,.8,.3,1), box-shadow .22s ease, background .22s ease; }
.knopf:active { transform: scale(.96); }
.karte { transition: transform .24s cubic-bezier(.22,.8,.3,1), border-color .24s ease, background .24s ease; }
.karte:active { transform: scale(.99); }
.schild:active, .reiter:active { transform: scale(.96); }
.nav__link:active { opacity: .7; }

/* Welle unter dem Finger — nur bei Berührung, nicht bei der Maus */
@media (hover: none) {
  .knopf--voll { position: relative; overflow: hidden; }
  .knopf--voll::after {
    content: ""; position: absolute; left: var(--tx, 50%); top: var(--ty, 50%);
    width: 0; height: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .34);
    transform: translate(-50%, -50%); pointer-events: none;
  }
  .knopf--voll.welle::after { animation: welle .5s ease-out; }
  @keyframes welle {
    from { width: 0; height: 0; opacity: .6; }
    to   { width: 260%; height: 260%; opacity: 0; }
  }
}

/* ------------------------------------------------------- Menü auf Mobil
   Der Schalter ist schon ein Kreuz, wenn das Menü offen ist (base.css).
   Hier kommt die Bewegung dazu: beim Öffnen laufen die Punkte nacheinander
   ein, beim Schließen fährt das Menü sichtbar zusammen, und das Kreuz
   dreht sich auf dem Weg zurück zu den drei Strichen.                     */
.nav-schalter { transition: transform .2s cubic-bezier(.3,.9,.3,1.2), border-color .2s ease; }
.nav-schalter:active { transform: scale(.9); }
.nav-schalter[aria-expanded="true"] { border-color: var(--hellblau); }
.nav-schalter__balken,
.nav-schalter__balken::before,
.nav-schalter__balken::after {
  transition: transform .3s cubic-bezier(.3,.9,.3,1.15), opacity .18s ease, background .18s ease;
}

@media (max-width: 940px) {
  /* Menüpunkte laufen beim Öffnen gestaffelt ein */
  .nav.ist-offen .nav__liste > li,
  .nav.ist-offen > .knopf,
  .nav.ist-offen .sprachwahl {
    animation: punkt-ein .36s cubic-bezier(.22,.9,.3,1) backwards;
  }
  .nav.ist-offen .nav__liste > li:nth-child(1) { animation-delay: .04s; }
  .nav.ist-offen .nav__liste > li:nth-child(2) { animation-delay: .08s; }
  .nav.ist-offen .nav__liste > li:nth-child(3) { animation-delay: .12s; }
  .nav.ist-offen .nav__liste > li:nth-child(4) { animation-delay: .16s; }
  .nav.ist-offen .nav__liste > li:nth-child(5) { animation-delay: .20s; }
  .nav.ist-offen .nav__liste > li:nth-child(6) { animation-delay: .24s; }
  .nav.ist-offen .sprachwahl { animation-delay: .28s; }
  .nav.ist-offen > .knopf    { animation-delay: .32s; }
  @keyframes punkt-ein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  /* Schließen: zusammenfahren statt wegblenden */
  .nav.schliesst {
    opacity: 0; visibility: visible;
    transform: translateY(-12px) scale(.985);
    transition: opacity .24s ease, transform .26s cubic-bezier(.4,0,.6,1);
  }
  .nav.schliesst .nav__liste > li { animation: none; }
}

/* ------------------------------------------------------------ Rücksicht */
@media (prefers-reduced-motion: reduce) {
  .strahlrand::after, .signalbahn::after,
  .nav.ist-offen .nav__liste > li, .knopf--voll.welle::after { animation: none !important; }
  .preiszeile, .knopf, .karte, .nav { transition: none !important; }
  .preiszeile:active, .knopf:active, .karte:active, .schild:active, .reiter:active { transform: none; }
}

/* ----------------------------------------------- Nachbesserungen 16.10.
   Das Verlaufswort gab es bisher nur auf der Bühne; es gehört überall hin,
   wo genau EIN Wort betont wird (Designstandard, Abschnitt Typografie).  */
.glanz {
  background: linear-gradient(96deg, var(--hellblau) 6%, #fff 42%, var(--akzent) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.insel .glanz, .block--hell .glanz {
  background: linear-gradient(96deg, var(--akzent-600) 4%, var(--akzent) 48%, var(--hellblau) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Menüpunkte brechen nicht mehr mitten im Wort um */
.nav__link { white-space: nowrap; }
@media (max-width: 940px) { .nav__link { white-space: normal; } }

/* Ankersprünge landen unter der Kopfleiste, nicht dahinter */
[id] { scroll-margin-top: 96px; }

/* Preis in einer Karte: deutlich, aber nicht geschrien */
.karte .preisfeld__wert {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--hellblau);
}
.insel .karte .preisfeld__wert, .block--hell .karte .preisfeld__wert { color: var(--akzent-text); }


/* ------------------------------- Einwilligung vor dem Assistenten
   Der Chat-Knopf (z-index 130) lag über dem Einwilligungsbanner (120) und
   fing dessen Klicks ab: Auf schmalen Geräten war „Zustimmen" nicht zu
   treffen. Das Banner gehört nach vorn, der Chat-Knopf weicht aus.       */
.einwilligung { z-index: 200 !important; }
/* Solange das Banner steht, weicht der Chat-Knopf nach oben aus — sonst liegt
   das Banner darüber und „Fragen?" ist nicht zu treffen. */
/* Der Versatz steht als Variable, damit das Chatfenster seine Höhe darum
   kürzen kann — sonst schiebt sich seine Kopfzeile aus dem Bild. */
body.einwilligung-offen { --assi-versatz: 96px; }
@media (max-width: 620px) {
  body.einwilligung-offen { --assi-versatz: 168px; }
}
body.einwilligung-offen .assi { transform: translateY(calc(-1 * var(--assi-versatz, 0px))); }
.assi { transition: transform .3s cubic-bezier(.22,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .assi { transition: none; } }


/* ------------------------- Einwilligung auf schmalen Geräten
   Das Banner war am Telefon 415 px hoch und deckte die halbe Seite zu.
   Jetzt: kleinere Schrift, engere Zeilen, Knöpfe nebeneinander — und es
   bleibt unterhalb der Kopfleiste, damit das Menü erreichbar bleibt.     */
@media (max-width: 620px) {
  .einwilligung {
    bottom: .75rem; width: calc(100% - 1.5rem);
    max-height: calc(100vh - 7.5rem); overflow-y: auto;
    padding: .9rem 1rem; gap: .7rem 1rem;
    border-radius: 16px;
  }
  .einwilligung__text { font-size: .8rem; line-height: 1.45; flex: 1 1 100%; }
  .einwilligung__knoepfe { width: 100%; justify-content: flex-end; }
  .einwilligung__knoepfe .knopf { padding: .6rem 1.1rem; font-size: .82rem; }
}