/* ============================================================================
   MEMORO Partnerportal — tokens.css
   Verbindliche Designsprache: Variablen + Komponentenklassen.
   Reines CSS, kein Build-Schritt. Schriften selbst gehostet (assets/fonts/).

   HERKUNFT DER PALETTE: memoro.de (assets/css/signal.css). Uebernommen statt
   neu erfunden, damit Portal und Website als dasselbe Haus lesbar sind.
   AUFBAU: nach dem Vorbild von portal.envital.care — eine einzige Stilquelle,
   Seiten-<style> enthaelt nur Layout.
   ============================================================================ */
@import url('assets/fonts/fonts.css');

/* ----------------------------------------------------------------------------
   HELLER GRUND, PFLAUME ALS AKZENT (Vorgabe des Betreibers, 13.09.2026)

   Gemessen, nicht geschaetzt (WCAG 2.1, Verhaeltnis gegen die Flaeche):

     #704861 als Text auf Weiss ........ 7,53:1   ✓ Text und Flaeche
     Weiss auf #704861 ................. 7,53:1   ✓ Knopfschrift
     #704861 auf #F3ECF0 (Pillen) ...... 6,48:1   ✓
     #1A0F17 auf Weiss ................ 18,67:1   ✓ Haupttext
     #6E5B67 auf Weiss ................. 6,26:1   ✓ gedaempfter Text
     #9C6B87 auf Weiss ................. 4,32:1   ✗ NUR Flaeche und Linie
     #D9601F auf Weiss ................. 3,72:1   ✗ NUR Flaeche und Linie

   Die letzten beiden tragen KEINEN Text. Wer sie dafuer benutzt,
   unterschreitet 1.4.3 — das Portal wickelt Buchung und Bezahlung ab und
   faellt unter das BFSG.

   Anders als bei ENVITAL, wo der Akzent mit 3,41:1 bewusst unter der
   Textgrenze liegt, traegt Memoros Pflaume beides. Das ist kein Zufall,
   sondern der Grund, warum sie als Akzent taugt.
   ---------------------------------------------------------------------------- */
:root{
  /* Flaechen */
  --papier:        #FFFFFF;
  --papier-warm:   #FAF7F9;
  --papier-tief:   #F3ECF0;   /* Pflaumen-Dunst: Pillen, Banner, Tints */
  --sand:          #F6F0EC;
  --linie:         #EADFE6;
  --linie-stark:   #D2B3BF;

  /* Schrift */
  --text:          #1A0F17;
  --text-leise:    #6E5B67;
  --text-auf-akzent:#FFFFFF;  /* EINE Stelle beantwortet: was steht auf Pflaume? */

  /* Akzent */
  --pflaume:       #704861;
  --pflaume-tief:  #472A3B;   /* Hover, Ueberschriften */
  --pflaume-hell:  #9C6B87;   /* NUR Flaeche/Linie */
  --pflaume-zart:  #C9A7B5;
  --pflaume-dunst: #F3ECF0;

  /* Signalfarben, sparsam */
  --orange:        #FF7A38;   /* NUR Flaeche */
  --orange-tief:   #D9601F;   /* NUR Flaeche */
  --gruen:         #2E6B4F;
  --gruen-dunst:   #E8F1EC;

  /* Schriften */
  --sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Abstaende. Es gibt KEIN --raum-5 und KEIN --raum-7.
     Eine undefinierte CSS-Variable verwirft die GANZE Angabe, lautlos —
     bei `gap` heisst das: gar kein Abstand, ohne Fehlermeldung. */
  --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px; --raum-4: 16px;
  --raum-6: 24px; --raum-8: 32px; --raum-12: 48px; --raum-16: 64px;

  --radius:     14px;
  --radius-gr:  22px;
  --radius-rund:999px;

  --nav-h: 64px;
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Der einzige Schatten im System trennt Ebenen, er hebt keine Karte an. */
  --schatten-karte: 0 1px 2px rgba(26,15,23,.04), 0 8px 24px rgba(26,15,23,.06);
  --schatten-hoch:  0 2px 6px rgba(26,15,23,.06), 0 18px 48px rgba(26,15,23,.10);
}

/* ----------------------------------------------------------------------------
   Grundlagen
   ---------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier-warm); color:var(--text);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:500; line-height:1.15; letter-spacing:-.02em; margin:0 0 var(--raum-4)}
h1{font-size:clamp(28px,4.2vw,42px); text-wrap:balance}
h2{font-size:clamp(21px,2.6vw,27px)}
h3{font-size:18px}
p{margin:0 0 var(--raum-4)}
a{color:var(--pflaume); text-underline-offset:3px}
a:hover{color:var(--pflaume-tief)}

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

.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-leise);
}
.leise{color:var(--text-leise); font-size:14px}
.zahl{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------------------
   Flaeche und Raster
   ---------------------------------------------------------------------------- */
.huelle{width:min(1160px,100% - 2*var(--raum-6)); margin-inline:auto}
.huelle-schmal{width:min(460px,100% - 2*var(--raum-6)); margin-inline:auto}

/* Auf hellem Papier deckende Karten. Glas gehoert auf Foto und dunklen Grund,
   auf Papier wirkt es schmutzig. */
.karte{
  background:var(--papier); border:1px solid var(--linie);
  border-radius:var(--radius-gr); padding:var(--raum-6);
  box-shadow:var(--schatten-karte);
}
.karte--flach{box-shadow:none}
.raster{display:grid; gap:var(--raum-6); grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}

/* ----------------------------------------------------------------------------
   Knoepfe
   ---------------------------------------------------------------------------- */
.knopf{
  --hebung:0px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--raum-2);
  font:inherit; font-weight:500; font-size:15px; white-space:nowrap;
  padding:11px 22px; border-radius:var(--radius-rund); border:1px solid transparent;
  cursor:pointer; text-decoration:none; position:relative; overflow:hidden;
  transform:translateY(var(--hebung));
  transition:background .25s var(--ease-out), transform .25s var(--ease-out),
             box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.5; cursor:not-allowed}

.knopf--haupt{
  background:linear-gradient(180deg,#7d5070,var(--pflaume));
  color:var(--text-auf-akzent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -1px 0 rgba(0,0,0,.12),
             0 0 0 1px rgba(71,42,59,.20),
             0 6px 18px rgba(112,72,97,.26);
}
.knopf--haupt:hover{--hebung:-1px; background:linear-gradient(180deg,var(--pflaume),var(--pflaume-tief))}

/* Lichtstreifen, zieht beim Ueberfahren einmal quer durch */
.knopf--haupt::before{
  content:""; position:absolute; inset:0 auto 0 -60%; width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease-out); pointer-events:none;
}
.knopf--haupt:hover::before{left:120%}

/* AUSNAHMELISTE fuer dunkle Flaechen steht weiter unten bei .auf-dunkel.
   Wer eine neue dunkle Flaeche baut und sie dort NICHT eintraegt, bekommt
   weisse Schrift auf weisser Flaeche: einen unsichtbaren Knopf. */
.knopf--linie{
  background:var(--papier); color:var(--pflaume); border-color:var(--linie-stark);
}
.knopf--linie:hover{background:var(--pflaume-dunst); border-color:var(--pflaume-hell); --hebung:-1px}

.knopf--still{background:transparent; color:var(--text-leise); padding-inline:14px}
.knopf--still:hover{background:var(--papier-tief); color:var(--text)}
.knopf--klein{font-size:13.5px; padding:7px 15px}

/* ----------------------------------------------------------------------------
   Eingabefelder
   ---------------------------------------------------------------------------- */
.feld{display:flex; flex-direction:column; gap:var(--raum-2); margin-bottom:var(--raum-4)}
.feld > span{font-size:13.5px; font-weight:500; color:var(--text)}
.eingabe{
  font:inherit; font-size:16px;  /* nie kleiner: unter 16px zoomt iOS beim Tippen */
  padding:11px 14px; border:1px solid var(--linie-stark); border-radius:var(--radius);
  background:var(--papier); color:var(--text); width:100%;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.eingabe:focus{outline:none; border-color:var(--pflaume); box-shadow:0 0 0 3px rgba(112,72,97,.14)}
.eingabe::placeholder{color:var(--pflaume-zart)}
textarea.eingabe{min-height:120px; resize:vertical; line-height:1.6}

/* ----------------------------------------------------------------------------
   Pillen und Banner
   ---------------------------------------------------------------------------- */
.pille{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; padding:4px 11px; border-radius:var(--radius-rund);
  background:var(--papier-tief); color:var(--pflaume-tief);
}
.pille--wartet{background:var(--sand); color:#7A4B1C}
.pille--offen {background:var(--gruen-dunst); color:var(--gruen)}
.pille--fertig{background:var(--gruen-dunst); color:var(--gruen)}
.pille--arbeit{background:var(--papier-tief); color:var(--pflaume)}

.banner{
  display:flex; gap:var(--raum-3); align-items:flex-start;
  background:var(--papier-tief); border:1px solid var(--linie);
  border-radius:var(--radius); padding:var(--raum-4); font-size:14.5px;
}
.banner--warnung{background:var(--sand); border-color:#E8D5C4}

/* ----------------------------------------------------------------------------
   Kopfleiste
   ---------------------------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px) saturate(155%);
  backdrop-filter:blur(12px) saturate(155%);
  border-bottom:1px solid var(--linie);
  transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.kopf.gescrollt{background:rgba(255,255,255,.96); box-shadow:0 1px 14px rgba(26,15,23,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopf{background:rgba(255,255,255,.97)}
}
.kopf__innen{display:flex; align-items:center; gap:var(--raum-4); height:var(--nav-h)}
.kopf__marke{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.kopf__marke img{height:30px; width:auto; display:block}
.kopf__marke b{font-weight:500; font-size:16px; letter-spacing:-.01em}
.kopf__nav{display:flex; gap:var(--raum-1); margin-left:auto; align-items:center}
.kopf__nav a{
  font-size:14.5px; font-weight:400; color:var(--text-leise); text-decoration:none;
  padding:7px 13px; border-radius:var(--radius-rund); transition:all .2s var(--ease-out);
}
.kopf__nav a:hover{background:var(--papier-tief); color:var(--text)}
.kopf__nav a[aria-current="page"]{background:var(--pflaume-dunst); color:var(--pflaume-tief); font-weight:500}

/* Der Videoraum. Gefuellt in Pflaume, damit er sich von den Reitern abhebt und
   man am Telefon darauf zeigen kann. Hoehere Spezifitaet als `.kopf__nav a`,
   sonst gewinnt die Reiter-Regel darueber. */
.kopf__nav a.kopf__video{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; font-size:14px; font-weight:500;
  color:var(--text-auf-akzent); background:var(--pflaume);
  border-radius:var(--radius-rund); text-decoration:none;
  box-shadow:0 1px 3px rgba(71,42,59,.22);
  transition:background .2s var(--ease-out), transform .2s var(--ease-out);
}
.kopf__nav a.kopf__video:hover{background:var(--pflaume-tief); color:var(--text-auf-akzent); transform:translateY(-1px)}
.kopf__nav a.kopf__video svg{flex:none}
html.sparsam .kopf__nav a.kopf__video{transition:none; transform:none}

.avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--pflaume); color:var(--text-auf-akzent);
  font-size:13px; font-weight:500; flex:none;
}

/* ----------------------------------------------------------------------------
   Bewegte Aura. mix-blend-mode:screen braucht einen DUNKLEN Grund — auf
   hellem Papier passiert nichts. Deshalb traegt .aura eine eigene dunkle
   Flaeche, und sie wird nur dort eingesetzt, wo das gewollt ist.
   Die background-color ist Pflicht: ohne sie faellt eine Helligkeitsmessung
   durch den Verlauf hindurch bis zum weissen Body.
   ---------------------------------------------------------------------------- */
.aura{position:relative; overflow:clip; background-color:var(--pflaume-tief); isolation:isolate}
.aura__wolken{position:absolute; inset:-20%; z-index:0; pointer-events:none}
.aura__wolken i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(94px); mix-blend-mode:screen; will-change:transform;
}
.aura__wolken i:nth-child(1){width:46%;aspect-ratio:1;left:2%;top:6%;  background:#8E5C7C; animation:drift1 17s ease-in-out infinite alternate}
.aura__wolken i:nth-child(2){width:40%;aspect-ratio:1;right:4%;top:18%;background:#C9A7B5; animation:drift2 21s ease-in-out infinite alternate}
.aura__wolken i:nth-child(3){width:34%;aspect-ratio:1;left:30%;bottom:0;background:#FF9E63; animation:drift3 19s ease-in-out infinite alternate}
.aura > *:not(.aura__wolken){position:relative; z-index:1}

/* Animiert wird NUR transform. Groesse oder Position zu animieren zwingt den
   Browser in jedem Bild zu einem neuen Layout. */
@keyframes drift1{to{transform:translate3d(14%,10%,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-12%,14%,0) scale(1.12)}}
@keyframes drift3{to{transform:translate3d(10%,-12%,0) scale(1.22)}}

/* AUSNAHMELISTE: jede dunkle Flaeche gehoert hier hinein, sonst steht ein
   Linienknopf weiss auf weiss. */
.aura, .auf-dunkel{color:#fff}
.aura .label, .auf-dunkel .label{color:rgba(255,255,255,.72)}
.aura .knopf--linie, .auf-dunkel .knopf--linie{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34);
}
.aura .knopf--linie:hover, .auf-dunkel .knopf--linie:hover{background:rgba(255,255,255,.20)}
.aura .karte, .auf-dunkel .karte{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:none; color:#fff;
}

/* ----------------------------------------------------------------------------
   Motion Graphics
   ---------------------------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.07s} .reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s} .reveal-d4{transition-delay:.28s}

/* Lichtschein folgt dem Zeiger. Inhalt braucht z-index, sonst liegt er darunter. */
@media (hover:hover) and (pointer:fine){
  .schein{position:relative}
  .schein::before{
    content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
               rgba(112,72,97,.10), transparent 62%);
    transition:opacity .35s var(--ease-out); pointer-events:none;
  }
  .schein:hover::before{opacity:1}
  .schein > *{position:relative; z-index:1}
}

.heben{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .heben:hover{transform:translateY(-3px); box-shadow:var(--schatten-hoch)}
}

/* Laufband haelt an, wenn jemand darauf zeigt */
.laufband{overflow:clip; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband__spur{display:flex; gap:var(--raum-8); width:max-content; animation:laufen 34s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
@keyframes laufen{to{transform:translateX(-50%)}}

/* Ladezustand statt Sprung ins Leere */
.skelett{
  background:linear-gradient(90deg,var(--papier-tief) 25%,var(--papier-warm) 50%,var(--papier-tief) 75%);
  background-size:200% 100%; animation:schimmer 1.4s linear infinite; border-radius:var(--radius);
}
@keyframes schimmer{to{background-position:-200% 0}}

/* ----------------------------------------------------------------------------
   Sparbetrieb und reduzierte Bewegung.
   Der Selektor MUSS *, *::before, *::after treffen: Glas und Schein sitzen
   fast immer auf Pseudoelementen.
   ---------------------------------------------------------------------------- */
html.sparsam *, html.sparsam *::before, html.sparsam *::after{
  animation:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  will-change:auto !important;
}
html.sparsam .kopf{background:rgba(255,255,255,.97)}
html.sparsam .aura__wolken i{filter:blur(60px)}
html.sparsam .aura .karte, html.sparsam .auf-dunkel .karte{background:rgba(255,255,255,.16)}

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

/* ----------------------------------------------------------------------------
   Hochkant
   ---------------------------------------------------------------------------- */
@media (max-width:640px){
  :root{--nav-h:56px}
  .karte{padding:var(--raum-4); border-radius:var(--radius)}
  .kopf__nav a{padding:7px 10px; font-size:13.5px}
  .kopf__nav a.kopf__video{padding:7px 12px; font-size:13.5px; gap:6px}
  .kopf__marke b{display:none}
  .knopf{width:100%}
  .knopf--klein,.knopf--still{width:auto}
}