/* RAAV Farbwelt — gemeinsame Quelle für alle RAAV-Seiten · Stand 2026-10-12, Fassung 2.1 (Stufe D2.1: Schleier ohne Kanten, Partikel ohne Ringe)
   Regeln für Mensch und Werkstatt: raav-farbwelt.md (gleicher Ordner) — immer zuerst lesen.
   Diese Datei enthält NUR Variablen und Grundbausteine (Präfix rv-). Seitenlayout gehört in das Stylesheet der Seite.
   Jede Seite übernimmt diese Datei unverändert in ihren Ordner (assets/raav-farbwelt.css) samt assets/fonts/ und den
   gewählten Bildern aus bilder/; die Quelle bleibt RAAVio/_Design/.
   Fassung 2 gegenüber Fassung 1: Glas-Flächen (rv-glas), Tiefe in Schichten (rv-bild, rv-fx mit drei Schärfen),
   Schleier für Text auf Bild (rv-schleier), Schriftstapel wie raav-therapie.de (Futura wo vorhanden, sonst Jost). */

/* Schrift: Futura, wo das Gerät sie hat (Mac, iPhone); sonst die selbst gehostete Jost (SIL Open Font License, fonts/LICENSE-Jost-OFL.txt). Keine externen Schriften. */
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/jost-latin-700-normal.woff2") format("woff2")}

:root{
  /* Grund — Leinen, warmweiße Kacheln, Bone-Flächen, Linien */
  --grund:#f7f4ee;
  --karte:#fffdf9;
  --flaeche:#efe8dc;
  --linie:#e3ddd2;

  /* Text — wie raav-therapie.de */
  --titel:#000;
  --text:#141414;
  --text-lauf:#4a4844;          /* Fließtext */
  --text-hell:#5b5750;          /* Nebentext, Stand-Zeilen, Platzhalter (≥ 5,9 : 1 auf allen drei Gründen) */

  /* Blau (Praxis-Logo) — Knöpfe, Links, Fokus, Überzeilen */
  --blau:#0000af;
  --blau-hover:#1717c4;
  --band-a:#0040b0;
  --band-b:#002058;
  --band:linear-gradient(289deg,var(--band-a),var(--band-b));   /* das Verlauf-Band: Fuß, Kanten, Bühnenrahmen */
  --blau-ring:rgba(0,0,175,.18);

  /* Gold — Akzent in drei Stärken (WCAG-Werte in raav-farbwelt.md) */
  --gold:#e8a84c;               /* Licht, Linien, Flächen, Hervorhebung — NIE als Text auf hellem Grund (2,0 : 1) */
  --gold-symbol:#ba7718;        /* Symbole, Strichgrafik, große Schrift: ≥ 3,0 : 1 auf Leinen/Karte/Bone */
  --gold-tinte:#925d13;         /* Text auf hellem Grund: ≥ 4,5 : 1 auf Leinen/Karte/Bone (AA) */
  --gold-hauch:rgba(232,168,76,.14);   /* getönte Fläche: aktive Auswahl, Hervorhebungs-Kasten */
  --gold-licht:rgba(232,168,76,.5);    /* Leuchten der Lichtpartikel */

  /* Bühne — 3D (Atlas-Videos, Viewer, Live-Atlas) bleibt dunkel-warm mit Gold; in hellen Seiten als gerahmtes Fenster */
  --buehne:#0e0b09;
  --buehne-schrift:#f2ede6;
  --buehne-leise:#b3a695;

  /* Glas (Fassung 2) — halbdurchsichtiges warmes Weiß über dem Bild; wirkt nur, wenn dahinter etwas zu sehen ist */
  --glas:rgba(255,253,249,.6);          /* Glasfläche */
  --glas-dicht:rgba(255,253,249,.8);    /* dichteres Glas: Eingabefelder, kleine Flächen, Text-Schleier */
  --glas-lesen:rgba(255,253,249,.72);   /* Leseglas: lange Texte auf Bild (Rechtsseiten) */
  --glas-rand:rgba(255,255,255,.72);    /* feiner heller Rand */
  --glas-licht:rgba(255,255,255,.9);    /* Lichtkante oben (inset) */
  --glas-blur:18px;
  --glas-schatten:0 1px 2px rgba(0,20,58,.06),0 10px 24px -12px rgba(0,20,58,.22),0 28px 56px -24px rgba(0,20,58,.32);
  --glas-schatten-hoch:0 2px 4px rgba(0,20,58,.08),0 18px 40px -14px rgba(0,20,58,.30),0 40px 80px -30px rgba(0,20,58,.38);
  --r-glas:20px;
  --r-glas-klein:14px;

  /* Bildschicht (Fassung 2) — Schleier, damit Text auf dem Bild lesbar bleibt (Werte: raav-farbwelt.md § 3b) */
  --bild-schleier-oben:rgba(247,244,238,.22);
  --bild-schleier-mitte:rgba(247,244,238,.4);

  /* Tiefe — blau getönte, weiche Schatten (raav-therapie.de) */
  --schatten-karte:0 1px 2px rgba(0,20,58,.06),0 14px 34px -14px rgba(0,20,58,.26);
  --schatten-bild:0 2px 4px rgba(0,20,58,.10),0 18px 40px -12px rgba(0,20,58,.38);
  --schatten-buehne:0 2px 4px rgba(0,20,58,.10),0 26px 52px -18px rgba(14,11,9,.6);
  --knopf-schatten:0 2px 6px rgba(0,0,175,.25);

  /* Form */
  --r-kachel:4px;               /* flache Kacheln, Hinweiskästen (eckig, medizinisch) */
  --r-knopf:6px;                /* Knöpfe, Eingabefelder auf flachem Grund */
  --r-blase:14px;               /* Sprechblasen, Pillen */
  --r-buehne:8px;               /* Rahmen der 3D-Bühne */
  --rand:32px;                  /* Randabstand am Telefon */
  --ueberhang:clamp(56px,10vw,128px);   /* Bild-Überhang über die Kachel (Desktop) */
  --tempo:180ms ease;

  /* Schrift: Stapel wie raav-therapie.de — Futura wo vorhanden, sonst Jost (selbst gehostet) */
  --schrift:"Futura PT","futura-pt",Futura,"Jost","Avenir Next","Century Gothic","Segoe UI",Helvetica,Arial,sans-serif;
}

/* Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:1rem;line-height:1.625;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%}
img,video{display:block}
h1,h2,h3,h4{font-weight:700;line-height:1.15;margin:0;color:var(--titel);text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--blau);text-decoration:underline;text-decoration-color:rgba(0,0,175,.35);text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--tempo),color var(--tempo)}
a:hover{text-decoration-color:var(--blau)}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:2px}
::selection{background:var(--gold-hauch);color:var(--titel)}
.rv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Überzeile — blau, fett, über einer Überschrift */
.rv-ueberzeile{color:var(--blau);font-size:1rem;font-weight:700;line-height:1.4;margin:0 0 .35rem}

/* Knöpfe */
.rv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;background:var(--blau);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;line-height:1.3;padding:.8rem 1.3rem;border-radius:var(--r-knopf);border:2px solid var(--blau);box-shadow:var(--knopf-schatten);cursor:pointer;font-family:inherit;transition:background-color var(--tempo),border-color var(--tempo),transform var(--tempo);white-space:nowrap}
.rv-btn:active{transform:translateY(1px)}
.rv-btn svg{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.rv-btn.hell{background:#fff;color:var(--blau);border-color:#fff}
.rv-btn.rahmen{background:transparent;color:var(--blau);border-color:var(--blau);box-shadow:none}
.rv-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){
  .rv-btn:hover{background:var(--blau-hover);border-color:var(--blau-hover)}
  .rv-btn.hell:hover{background:var(--flaeche);border-color:var(--flaeche);color:var(--blau)}
  .rv-btn.rahmen:hover{background:var(--blau);border-color:var(--blau);color:#fff}
}

/* Eingabefeld */
.rv-feld{width:100%;min-height:44px;padding:.75rem 1rem;font:inherit;font-size:16px;color:var(--text);background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-knopf);-webkit-appearance:none;appearance:none;transition:border-color var(--tempo),box-shadow var(--tempo)}
.rv-feld::placeholder{color:var(--text-hell)}
.rv-feld:focus-visible{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px var(--blau-ring)}

/* Kachel — warmweiß, flach, blau getönte Tiefe (für Seiten ohne Bildschicht) */
.rv-kachel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-kachel);box-shadow:var(--schatten-karte)}
.rv-kachel.tief{box-shadow:var(--schatten-bild)}

/* Glas (Fassung 2) — über der Bildschicht: Weichzeichnung dahinter, heller Rand, Lichtkante oben, mehrlagige blaue Schatten.
   Rückfall ohne backdrop-filter: deckender, gleich lesbar. .dicht für Eingaben und kleine Flächen, .hoch für angehobene. */
.rv-glas{position:relative;background:var(--glas);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(1.15);backdrop-filter:blur(var(--glas-blur)) saturate(1.15);border:1px solid var(--glas-rand);border-radius:var(--r-glas);box-shadow:inset 0 1px 0 var(--glas-licht),var(--glas-schatten)}
.rv-glas.dicht{background:var(--glas-dicht)}
.rv-glas.lesen{background:var(--glas-lesen)}
.rv-glas.hoch{box-shadow:inset 0 1px 0 var(--glas-licht),var(--glas-schatten-hoch)}
.rv-glas.klein{border-radius:var(--r-glas-klein)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rv-glas{background:rgba(255,253,249,.93)}
  .rv-glas.dicht{background:rgba(255,253,249,.97)}
}
/* Schleier — Fläche hinter Text, der direkt auf dem Bild steht (kein Glas): hält AA auf jedem Bild.
   Fassung 2.1: Schleier enden INNERHALB ihres Kastens (closest-side, Deckkraft 0 am Rand) — sonst schneidet der Kasten sichtbar ab. */
.rv-schleier{position:relative}
.rv-schleier::before{content:"";position:absolute;inset:-24% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(247,244,238,0.8) 0%,rgba(247,244,238,0.776) 40%,rgba(247,244,238,0.672) 55%,rgba(247,244,238,0.48) 68%,rgba(247,244,238,0.264) 79%,rgba(247,244,238,0.096) 88%,rgba(247,244,238,0.024) 95%,rgba(247,244,238,0.0) 100%);pointer-events:none}

/* Hinweiskasten (Fakten, Kontakt) — Bone mit blauer Kante · Hervorhebung — Goldhauch mit goldener Kante */
.rv-hinweis{background:var(--flaeche);border-radius:var(--r-kachel);box-shadow:inset 4px 0 0 var(--blau);padding:1rem 1.25rem;color:var(--text-lauf)}
.rv-hervor{background:var(--gold-hauch);border-radius:var(--r-kachel);box-shadow:inset 4px 0 0 var(--gold-symbol);padding:1rem 1.25rem;color:var(--text)}
.rv-hinweis strong,.rv-hervor strong{color:var(--titel)}

/* Band — der Verlauf als Fläche (Fuß, Kopfband); Text darauf weiß, Nebentext #d5dcf0 (6,5 : 1) */
.rv-band{background:var(--band);color:#fff}
.rv-band a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.rv-band a:hover{text-decoration-color:#fff}
.rv-band .leise{color:#d5dcf0}
/* Band-Kante — 3 px Verlauf als obere Kante eines Elements (position:relative beim Elternteil) */
.rv-bandkante::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--band);z-index:3}

/* Goldlinie — dekorative Haarlinie, in der Mitte golden, nach außen auslaufend */
.rv-goldlinie{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent)}

/* Bühne — dunkles Fenster in heller Seite: Rahmen, Schatten, Rundung */
.rv-buehne{position:relative;background:var(--buehne);color:var(--buehne-schrift);border-radius:var(--r-buehne);box-shadow:var(--schatten-buehne);overflow:hidden;border:1px solid rgba(232,168,76,.28)}
.rv-buehne .leise{color:var(--buehne-leise)}
.rv-buehne a{color:var(--gold);text-decoration-color:rgba(232,168,76,.45)}

/* Tiefe in Schichten (Fassung 2): Bildschicht (fix, Parallaxe nur per transform) → Partikel → Inhalt.
   Höchstens drei bewegte Schichten; das Skript der Seite setzt transform auf [data-parallax] (Faktor 0–0,3), nie top/left. */
.rv-bild{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--grund)}
.rv-bild img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform;transform:translate3d(0,0,0)}
.rv-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bild-schleier-oben) 0%,var(--bild-schleier-mitte) 50%,var(--grund) 100%)}
.rv-bild.kopf{position:absolute;inset:auto;top:0;left:0;right:0;height:100vh;height:100lvh}  /* Bild nur im Kopf: scrollt mit der Seite, eine Bildschirmhöhe, darunter Leinen */
.rv-bild.kopf::after{background:linear-gradient(180deg,var(--bild-schleier-oben) 0%,var(--bild-schleier-mitte) 35%,var(--grund) 72%)}

/* Lichtpartikel (Fireflies) — weiche goldene Punkte in drei Schärfen; Elternteil .rv-fx fix hinter dem Inhalt, vor dem Bild.
   Fassung 2.1: Leuchthof als radialer Verlauf (wird gedithert) statt box-shadow (bildet Treppen/Ringe). */
.rv-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.rv-fx-pt{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0}
.rv-fx-pt::before{content:"";position:absolute;inset:-24px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,168,76,.5) 0%,rgba(232,168,76,.4) 14%,rgba(232,168,76,.26) 32%,rgba(232,168,76,.14) 50%,rgba(232,168,76,.06) 68%,rgba(232,168,76,.018) 84%,rgba(232,168,76,0) 100%)}
.rv-fx-pt.nah{width:6px;height:6px}
.rv-fx-pt.nah::before{inset:-32px}
.rv-fx-pt.mittel{filter:blur(1px)}
.rv-fx-pt.fern{width:3px;height:3px;filter:blur(2.5px)}
.rv-fx-pt.fern::before{inset:-18px}
@keyframes rv-fl1{0%,100%{transform:translateY(0);opacity:0}25%{opacity:.6}50%{transform:translateY(-38px);opacity:.25}}
@keyframes rv-fl2{0%,100%{transform:translate(0,0);opacity:0}30%{opacity:.5}50%{transform:translate(18px,-28px);opacity:.2}}
@keyframes rv-fl3{0%,100%{transform:translate(0,0);opacity:0}40%{opacity:.5}50%{transform:translate(-16px,-24px);opacity:.18}}

/* Bewegung reduzieren: Partikel aus, Parallaxe still, Übergänge aus */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .rv-fx-pt{animation:none!important;opacity:0}
  .rv-bild img{transform:none!important}
}