/* Boutique · lokale Vorschau 27.09.2026 · NICHT LIVE
   EMA, 23:02: „Boutique-Charakter … gedeckte anthroposophische Farben … Goethe und Steve Jobs … dezenter und
   vor allen Dingen feiner gestaltet. Denk mal auch an Dior.“
   Alle Farben kommen aus boutique.js → praxis.js setzt sie als Wurzel-Variablen (--b-*) und html[data-boutique].
   C = gewählte Farbe gedeckt · K = Goethes geforderte Farbe gedeckt. Keine Verläufe, keine Schatten, Linien 1 px.
   Einzige bewusste Ausnahme: der Fotohintergrund des Cannabis-Motivs (home-offers.css Z. 236–238) — er setzt das Foto
   selbst fort (oben Wand, unten Stein) und ist kein Flächenverlauf. Begründung und Messung: README, „Verläufe“.
   Die Regeln sind bewusst spezifisch (html[data-boutique] #praxis-rivoir-design …): sie schlagen den festen
   Inline-Block „mood-css“ der Startseite, ohne dessen Bytes anzufassen (die hängen am CSP-Hash). */

/* § 0 · Formensprache (EMA 28.09.2026, 00:42: „Die Seite hat viel Rundes, oben ist sie aber eckig — die Formensprache passt
   noch nicht, das musst du angleichen.“) EIN Radius-System für die ganze Seite, drei Stufen:
     Fläche 22 px (Kopftafel, Karten, Privatrezept, Fenster) · Kachel in einer Fläche 14 px (Einstiegskacheln, Kartenlinks,
     Stempel) · Knopf, Chip, Feld, Symbolgrund 999 px.
   Das Blatt folgt konzentrisch: Radius der Fläche + Abstand der Tafel zum Rand. Marke a = Tafel mit 14 px Abstand,
   Marke b = Band über volle Breite (Abstand 0). Umschalten nur in der Vorschau: #brand=a (Standard) · #brand=b. */
html[data-boutique] {
  --b-r: 22px; --b-r-innen: 14px; --b-r-rund: 999px;
  --b-tafel-abstand: 14px;
  --b-blatt-r: calc(var(--b-r) + var(--b-tafel-abstand));
  --b-spektrum: #c8616f, #dd9a55, #e6cb6a, #7fb08a, #6b93c9, #9b84c9, #c8616f;
}
html[data-boutique][data-brand="b"] { --b-tafel-abstand: 0px; --b-blatt-r: var(--b-r); }

html[data-boutique] #praxis-rivoir-design .home-threeways :is(.home-start-group, .home-preview, .home-personal-note),
html[data-boutique] #praxis-rivoir-design :is(.privacy-trust, .privacy-trust-item, .pr-doctor-panel, #pocketdoc-dialog, .mp-karte, .mp-dialog),
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .palette-picker { border-radius: var(--b-r); }
html[data-boutique] #praxis-rivoir-design .home-threeways :is(.home-start .home-start-link, .home-preview-copy > .text-link),
html[data-boutique] #praxis-rivoir-design .mp-dialog pre { border-radius: var(--b-r-innen); }
html[data-boutique] #praxis-rivoir-design .home-threeways :is(.home-start-price, .home-start .home-start-icon, .mood-reset),
html[data-boutique] #praxis-rivoir-design :is(.mp-eingabe, .mp-chip, .pr-doctor-call, .pr-doctor-message, .palette-choice, #palette-hex, #palette-native),
html[data-boutique] #praxis-rivoir-design .pr-navigation :is(.pr-menu > summary, .pr-login, .pr-account-link) { border-radius: var(--b-r-rund); }

/* Das Blatt: oben und unten im Radius der Karten (konzentrisch), rundum eine feine Linie, kein farbiger Oberrand mehr */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .practice-sheet {
  border: 1px solid var(--b-c-linie); border-radius: var(--b-blatt-r); box-shadow: none;
}

/* § 1 · Kopfband = Markentafel. Die Fläche in C liegt auf ::before, damit das Randspektrum darunter (::after) hinter der Tafel
   leuchten kann und der Rundung folgt. Die Haarlinie auf der Kante ist der Unterrand der Tafel selbst (1 px, Spektrum zu 78 %
   über C) — sie läuft in den unteren Ecken mit der Rundung aus. Keine weitere Fläche, kein Verlauf außer diesem Randspektrum. */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity {
  background: none; margin: var(--b-tafel-abstand) var(--b-tafel-abstand) 8px; border-radius: var(--b-r);
}
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(var(--b-flaeche) 0 0) padding-box,
    linear-gradient(color-mix(in srgb, var(--b-flaeche) 22%, transparent) 0 0) border-box,
    linear-gradient(90deg, var(--b-spektrum)) border-box;
}
/* Randspektrum (EMA 28.09.2026, 00:33: „ganz zart an der Grenze zwischen Weiß und Blau … da so rausleuchten“):
   die Tafelform selbst, 3 px tiefer, weich und leise, nur unten sichtbar — so folgt das Leuchten der Rundung. */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity::after {
  content: ""; position: absolute; inset: 0 4px; z-index: -2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, var(--b-spektrum)); filter: blur(3px); opacity: .36; transform: translateY(3px);
  clip-path: inset(50% 0 -16px 0);
}

/* Die Seriositätszeile: EINE ruhige Zeile, gleiche Tinte wie die Wortmarke, zu 90 % über C (gemessen ≥ 5,0 : 1 bei allen acht Tasten, Gold am knappsten).
   Kein Titel, kein Siegel, kein Zertifikat (praxis-fakten: Arzt und Privatarzt, Einzelpraxis). */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .b-seriositaet {
  position: relative; margin: 0; color: color-mix(in srgb, var(--b-tinte) 90%, var(--b-flaeche));
  font: 500 13.5px/1.5 var(--font); letter-spacing: .045em; word-spacing: .08em;
}

/* Marke a · Tafel im Band, Lockup zentriert (Dior-Form): Signet über dem Namen, der Name über der Werte-Zeile,
   darunter nach einer kurzen Haarlinie die Seriositätszeile. Viel Luft. */
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity { gap: 0; padding: 40px 32px 34px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .identity-palette { margin-bottom: 18px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .brand-wordmark { width: 480px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-seriositaet { margin-top: 24px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-seriositaet::before {
  content: ""; display: block; width: 36px; height: 1px; margin: 0 auto 16px;
  background: color-mix(in srgb, var(--b-tinte) 58%, var(--b-flaeche));
}
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-s-ort { display: none; }

/* Marke b · Band über volle Breite mit abgerundeter Unterkante: links das Lockup (Signet über der Wortmarke),
   rechts die Seriositätszeile als feiner Arztstempel (Name · Arzt · Privatpraxis · Ort — kein Siegel, kein Prüfzeichen). */
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity {
  display: grid; grid-template-columns: max-content minmax(24px, 1fr) max-content;
  grid-template-areas: "ring . stempel" "marke . stempel";
  align-items: center; justify-items: start; gap: 12px 0; padding: 30px 44px 32px; text-align: left;
  border-radius: calc(var(--b-r) - 1px) calc(var(--b-r) - 1px) var(--b-r) var(--b-r);
}
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .identity-palette { grid-area: ring; justify-self: center; }
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .brand { grid-area: marke; }
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity { --b-marke-breite: 400px; }
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .brand-wordmark { width: var(--b-marke-breite); }
/* Farbwähler öffnet bündig mit der linken Kante des Lockups (das Signet steht mittig über der Wortmarke) */
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .palette-picker { left: 50%; transform: translateX(calc(var(--b-marke-breite) / -2)); }
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .b-seriositaet {
  grid-area: stempel; justify-self: end; display: grid; justify-items: center; gap: 3px;
  padding: 13px 22px 14px; border: 1px solid color-mix(in srgb, var(--b-tinte) 58%, var(--b-flaeche)); border-radius: var(--b-r-innen);
  font-size: 13px; text-align: center;
}
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .b-s-trenner { display: none; }
html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .b-s-name {
  font: 500 11.5px/1.4 var(--brand-font); letter-spacing: .2em; word-spacing: .45em; margin-right: -.2em; text-transform: uppercase;
}

@container practice (max-width: 44em) {
  html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity { padding: 28px 18px 24px; }
  html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .identity-palette { margin-bottom: 12px; }
  html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .brand-wordmark { width: 300px; }
  html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-seriositaet { margin-top: 16px; }
  html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-seriositaet::before { margin-bottom: 12px; }
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .b-seriositaet { font-size: 12.5px; letter-spacing: .03em; }
  html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity {
    grid-template-columns: 1fr; grid-template-areas: "ring" "marke" "stempel"; justify-items: center; padding: 26px 16px 24px; text-align: center;
  }
  html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .brand-wordmark { width: 300px; }
  html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .b-seriositaet { justify-self: center; margin-top: 6px; padding: 10px 18px 11px; }
  html[data-boutique]:not([data-boutique="konto"])[data-brand="b"] #praxis-rivoir-design .identity .palette-picker { left: 50%; transform: translateX(-50%); }
}
/* Herz (EMA 28.09., 00:32: „ein bisschen herzlicher … mehr Farbe. Und Fläche.“): die UNgedämpfte Spira-Farbe der gewählten Taste, größer gesetzt */
html[data-boutique] #praxis-rivoir-design .hero-introduction .spira-herz { color: var(--palette-selected, var(--link)); font-size: 1.38em; line-height: 0; vertical-align: -0.08em; margin: 0 .06em; }
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .brand-wordmark { filter: var(--b-wortmarke-filter); }
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .palette-current-ring { color: var(--b-tinte); }
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .palette-current-ring .brand-symbol-ring { stroke: var(--b-tinte); stroke-width: 1.25; }
/* Der Logopunkt: klein, in K — hell auf dunklem C, dunkel auf Ocker */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .palette-current-ring::after { width: 9px; height: 9px; background: var(--b-punkt); }
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .palette-menu > summary:focus-visible { outline-color: var(--b-tinte); }

/* § 2 · Leiste unter dem Band: weiß, feine Linien, keine Schatten */
html[data-boutique] #praxis-rivoir-design .pr-navigation {
  --pr-line: var(--b-c-linie); --pr-soft: var(--b-c-hell); background: #fff;
}
html[data-boutique] #praxis-rivoir-design .pr-navigation :is(.pr-menu > summary, .pr-login, .pr-account-link) { box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .pr-navigation :is(.pr-menu[open] > summary, .pr-account-link:hover, .pr-menu > summary:hover) { border-color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-dot { fill: var(--b-c); }

/* § 3 · Seitengrund: warmes Weiß, eine Fläche (home-mood.js liefert --mood-bg; in Ruhe #faf9f5) */
html[data-boutique] #praxis-rivoir-design .home-threeways.mood-active { background: var(--mood-bg); }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-hero { background: none; }

/* § 4 · Aufschlag: „Weniger Beschwerden.“ in C, „Mehr vom Leben.“ in K — als Schrift, kein Block.
   --link ist in der Startseite --mood-link (= C, solange die Regler ruhen; sonst kontrastnachgeführt). */
html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .home-threeways .home-hero h1 { color: var(--link); }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-hero h1 .hero-accent { color: var(--mood-k, var(--b-k)); }

/* § 5 · Einstieg: Hauptkachel „Beschwerden lindern“ = helle K-Fläche, 1-px-Linie K, Tinte. Übrige Kacheln weiß. */
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start {
  --entry-ink: var(--b-c); --entry-edge: var(--b-c-linie);
  --entry-complement: var(--b-k); --entry-complement-ink: var(--b-k-tief); --entry-highlight: var(--b-k-hell);
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start-group { box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-link {
  background: #fff; border-color: var(--b-c-linie); color: #2a3540; box-shadow: none;
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-link:not(.home-start-main) .home-start-icon,
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-travel .home-start-icon {
  color: var(--b-c); background: var(--b-c-hell); box-shadow: none;
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-medication .icon-colour { fill: color-mix(in srgb, currentColor 16%, transparent); }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main {
  background: var(--b-k-hell); border-color: var(--b-k-linie); color: #2a3540; box-shadow: none;
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main .home-start-label { color: #2a3540; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main .home-start-label small { color: #52616b; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main .home-start-icon {
  color: var(--b-k-tief); background: #ffffffa6; box-shadow: none;
}
@media (hover: hover) {
  html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-link:hover { border-color: var(--b-c); box-shadow: none; }
  html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main:hover { background: var(--b-k-hell); border-color: var(--b-k-tief); box-shadow: none; }
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-link:focus-visible { outline: 2px solid var(--b-c); outline-offset: 4px; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start-price { background: var(--b-k-hell); color: #2a3540; box-shadow: none; }

/* § 6 · Rezept-Illustration: eine ruhige Fläche statt Verlauf und Schlagschatten (bleibt im Blau des Privatrezepts) */
html[data-boutique] #praxis-rivoir-design .hero-rx { background: #edf3f7; box-shadow: none; border-color: #b9cdd8; }
/* Die Schreibzeilen („Beschwerden lindern. / Behandlung gemeinsam planen.“) standen in Courier — einer Serifenschrift.
   CI § 7: „Keine Serifen, niemals“ (EMA, 29.08.2026). Der Formularcharakter kommt aus Größe und Laufweite. Gilt live genauso. */
html[data-boutique] #praxis-rivoir-design .hero-rx-writing {
  font-family: "Avenir Next", Avenir, Futura, "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: .035em;
}

/* Pause-Knopf der Rezept-Illustration: feste weiße Kapsel — heute ist er durchsichtig und verschwindet,
   wenn die Regler den Grund dunkel machen (gilt auch live). */
html[data-boutique] #praxis-rivoir-design .hero-recipe-only .hero-motion-toggle { background: #fff; border-color: var(--b-c-linie); color: #2a3540; }

/* § 7 · Angebotskarten und Kontaktkarte: weiß, 1 px, ohne Schatten (auch der Textteil der Karten aus dem Inline-Block
   und die Kontaktknöpfe aus praxis.css) */
html[data-boutique] #praxis-rivoir-design .home-threeways :is(.home-preview, .home-preview-copy, .home-personal-note) { box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .home-help-links > a { box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .home-preview-copy > .text-link { box-shadow: none; transform: none; }
html[data-boutique] #praxis-rivoir-design .home-previews .medication-art { background: #edf1f2; }

/* § 8 · Karte „Unser Ziel“: EINE helle C-Fläche. „Beschwerden“ in C, „Lebensfreude“ in K (Goethe leise).
   Eigene Wurzel-Variablen (--b-ziel-*): die Karte wandert mit den Reglern NICHT mit. */
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art { background: var(--b-ziel-flaeche); color: var(--b-c); }
/* Kein Himmelsschleier über den Motiven (home-offers.css Z. 416–424): alle vier Bilder ohne Verlauf */
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-art::after { display: none; }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art :is(.home-metric-goal, .home-metric-title) { color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy .home-metric-title,
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy .home-metric-title svg { color: var(--b-k-tief); }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art output { background: #fff; color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy output { background: #fff; color: var(--b-k-tief); }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-ends { color: #52616b; }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric:not(.home-metric-joy) .home-metric-ends span:first-child { color: var(--b-c) !important; font-weight: 600 !important; }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy .home-metric-ends span:last-child { color: var(--b-k-tief) !important; font-weight: 600 !important; }
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .mood-range {
  --slider-ink: var(--b-c); --slider-track: var(--b-ziel-spur); --slider-glow: transparent;
}
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy .mood-range {
  --slider-ink: var(--b-ziel-k); --slider-track: var(--b-ziel-spur); --slider-glow: transparent;
}
html[data-boutique] #praxis-rivoir-design .mood-art .mood-range::-webkit-slider-runnable-track { height: 4px; }
html[data-boutique] #praxis-rivoir-design .mood-art .mood-range::-moz-range-track { height: 4px; }
html[data-boutique] #praxis-rivoir-design .mood-art .mood-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border-width: 2px; box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .mood-art .mood-range::-moz-range-thumb { width: 16px; height: 16px; border-width: 2px; box-shadow: none; }
html[data-boutique] #praxis-rivoir-design .mood-art .mood-range:focus-visible { outline-color: var(--b-c); }

/* § 9 · Fuß und Vertrauenszeile: eine Fläche, feine Linien */
html[data-boutique] #praxis-rivoir-design footer {
  background: var(--b-grund); border-color: var(--b-c-linie);
  border-radius: 0 0 calc(var(--b-blatt-r) - 1px) calc(var(--b-blatt-r) - 1px);
}
html[data-boutique] #praxis-rivoir-design :is(.footer-top, .footer-bottom) { border-color: var(--b-c-linie); }
html[data-boutique] #praxis-rivoir-design .privacy-trust .privacy-trust-item { border-color: var(--b-c-linie); box-shadow: none; }

/* § 10 · Kontaktleiste: PocketDoc folgt C (gefüllt, weiße Schrift), Schreiben/Anrufen weiß mit feiner Linie */
html[data-boutique] #praxis-rivoir-design .pr-ai-direct { background: var(--b-c); color: #fff; box-shadow: none; }
html[data-boutique] #praxis-rivoir-design :is(.pr-call-direct, .pr-contact-dock .pr-doctor-launch) {
  background: #fff; border-color: var(--b-c-linie); color: var(--b-c); box-shadow: none;
}

/* § 11 · Farbwähler: das Rad als gedeckter Ring aus harten Feldern (boutique.js radSvg → --b-rad), jedes Feld zeigt
   genau sein Band. Der Helligkeitsregler entfällt — die Helligkeit gehört zum Rahmen. Keine Schatten, 1-px-Linien. */
html[data-boutique]:not([data-boutique="konto"]) .palette-picker { box-shadow: none; border-color: var(--b-c-linie); }
html[data-boutique]:not([data-boutique="konto"]) .palette-wheel { background: var(--b-rad) center / 100% 100% no-repeat; box-shadow: none; }
html[data-boutique]:not([data-boutique="konto"]) .palette-wheel-marker { background: var(--b-flaeche); box-shadow: 0 0 0 1px #16242b99; }
html[data-boutique]:not([data-boutique="konto"]) .palette-control:has(#palette-lightness) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design :is(.identity, .home-start-main, .mood-art) { transition: background-color .3s ease; }
}
@media (forced-colors: active) {
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity::before { background: Canvas; border-bottom-color: CanvasText; }
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity::after { display: none; }
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .b-seriositaet { color: CanvasText; border-color: CanvasText; }
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .brand-wordmark { filter: none; }
}


/* Marke a, EMA 28.09.2026, 01:03: „Mein Name machst du da bitte raus … PRAXIS RIVOIR, der Punkt im Kreis, Mensch · Natur · Medizin … und dann einfach Privatarzt.“
   Die Zeile spricht dieselbe Sprache wie die Städtezeile der Wortmarke: Versalien, weit gesperrt, klein. */
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .b-seriositaet {
  font: 500 12px/1.4 var(--font); letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; margin-top: 22px;
}
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .brand-wordmark { width: 460px; max-width: 80vw; }

/* Kontaktleiste unter dem Arzt: alle Wege in einer Reihe, gleiche Pillenform wie der Rest der Seite (Radius 999). */
html[data-boutique] #praxis-rivoir-design .hero-photo figcaption { display: grid; gap: 2px; }
html[data-boutique] #praxis-rivoir-design .b-kontakt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html[data-boutique] #praxis-rivoir-design .b-kontakt :is(a, button) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--b-c-linie);
  border-radius: 999px; background: #fff; color: var(--b-c); font: 500 14px/1 var(--font); text-decoration: none; cursor: pointer;
}
html[data-boutique] #praxis-rivoir-design .b-kontakt :is(a, button):hover { border-color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .b-kontakt :is(a, button):focus-visible { outline: 2px solid var(--b-c); outline-offset: 2px; }
html[data-boutique] #praxis-rivoir-design .b-kontakt .b-k-haupt { background: var(--b-c); border-color: var(--b-c); color: #fff; }

/* EMA 28.09.2026, 01:08: „Mach das Privatarzt weg. Die soll alleine stehen, die Praxis … den Hero lieber ein bisschen schmaler …
   Privatarztpraxis kannst du ein bisschen größer schreiben … Mein Privatarzt persönlich in Berlin-Kreuzberg 36 … das Grundrecht der WHO verlinken.“ */
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity { padding: 28px 32px 30px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .identity-palette { margin-bottom: 14px; }
html[data-boutique]:not([data-boutique="konto"]):not([data-brand="b"]) #praxis-rivoir-design .identity .brand-wordmark { width: 440px; }
html[data-boutique] #praxis-rivoir-design .hero-copy .b-praxisart { font-size: 15px; letter-spacing: .16em; color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .hero-introduction .b-mein { font-weight: 600; color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .hero-copy .b-grundrecht { margin: 10px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--b-c) 72%, #fff); }
html[data-boutique] #praxis-rivoir-design .hero-copy .b-grundrecht a { color: var(--b-c); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Anrufen-Knopf (EMA-Bildschirmfoto 28.09.2026, 01:28): die Regel für Spans in der Bildunterschrift färbte die Knopfschrift dunkel
   auf dunklem Grund. Die Schrift in den Kontaktknöpfen erbt ihre Farbe vom Knopf. */
html[data-boutique] #praxis-rivoir-design .hero-photo figcaption .b-kontakt :is(a, button) span { color: inherit; }

/* Arztkarte ruhig gesetzt (EMA 28.09.2026, 01:28: „ein bisschen besser setzen … richtig professionell … nicht übertreiben“):
   Foto neben Name und Rolle, darunter über eine Haarlinie EINE Handlungszeile — ein gefüllter Knopf (Anrufen), ein Rahmenknopf
   (Schreiben), die übrigen Wege leise ohne Rahmen. Alles auf einer Grundlinie, gleiche Höhe. */
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo {
  grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 0;
}
html[data-boutique] #praxis-rivoir-design .home-hero .portrait-frame { width: 64px; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption { gap: 1px; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption .hero-name { font-size: 16px; font-weight: 500; letter-spacing: .005em; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption .b-rolle { margin: 0; font-size: 13.5px; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption .hero-approach-link { margin-top: 3px; justify-self: start; font-size: 13.5px; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt {
  grid-column: 1 / -1; align-items: center; gap: 6px 4px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--b-c) 12%, transparent);
}
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt :is(a, button) {
  min-height: 38px; padding: 0 12px; gap: 7px; border-color: transparent; background: none;
  color: color-mix(in srgb, var(--b-c) 82%, #1f2430); font-size: 13.5px;
}
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt :is(a, button):hover {
  border-color: transparent; background: color-mix(in srgb, var(--b-c) 7%, transparent); color: var(--b-c);
}
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt .b-k-haupt { padding: 0 18px; margin-right: 2px; background: var(--b-c); border-color: var(--b-c); color: #fff; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt .b-k-haupt:hover { background: color-mix(in srgb, var(--b-c) 88%, #000); color: #fff; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt .b-k-zweit { padding: 0 16px; margin-right: 6px; border-color: var(--b-c-linie); background: #fff; color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt .b-k-zweit:hover { border-color: var(--b-c); background: #fff; }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt svg { flex: none; }

/* Preiszeile als ruhige Reihe: Punkte als Trenner aus CSS, kein Wort allein in der zweiten Zeile. */
html[data-boutique] #praxis-rivoir-design .home-start-note { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
html[data-boutique] #praxis-rivoir-design .home-start-note > :is(strong, span) { white-space: nowrap; }
html[data-boutique] #praxis-rivoir-design .home-start-note > span::before { content: "·"; margin: 0 .6em; color: color-mix(in srgb, var(--muted) 70%, transparent); }
/* Preiszeile: kein Trennpunkt am Zeilenanfang — Abstand statt Punkte. */
html[data-boutique] #praxis-rivoir-design .home-start-note { gap: 3px 18px; }
html[data-boutique] #praxis-rivoir-design .home-start-note > span::before { content: none; }

/* Menü und Login in der Tafel — ein Band oben (EMA 28.09.2026, 01:31). Die Leiste sitzt 14 px unter der Oberkante der Tafel,
   auf der Höhe des Punkts: [Menü] (•) [Login]. Der Abstand darunter gleicht die Höhe der Leiste wieder aus. */
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation {
  margin-top: calc(var(--b-tafel-abstand, 14px) - 8px - var(--b-tafel-h, 0px));
  margin-bottom: calc(var(--b-tafel-h, 0px) - var(--b-nav-h, 0px) - var(--b-tafel-abstand, 14px) + 8px);
  transition: background-color .18s ease, border-color .18s ease;
}
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation[data-auf-tafel] {
  background: transparent; border-bottom-color: transparent; pointer-events: none;
}
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation[data-auf-tafel] :is(.pr-menu, .pr-login, .pr-account-link) { pointer-events: auto; }
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation[data-auf-tafel] :is(.pr-menu > summary, .pr-login, .pr-account-link) {
  background: transparent; color: var(--b-tinte); border-color: color-mix(in srgb, var(--b-tinte) 34%, transparent);
}
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation[data-auf-tafel] :is(.pr-menu > summary, .pr-login, .pr-account-link):hover,
html[data-boutique]:not([data-boutique="konto"])[data-nav-in-tafel] #praxis-rivoir-design .pr-navigation[data-auf-tafel] .pr-menu[open] > summary {
  background: color-mix(in srgb, var(--b-tinte) 10%, transparent); border-color: var(--b-tinte); color: var(--b-tinte);
}

/* Vertrauenszeile (EMA 28.09.2026, 01:29: „wie viele Rezepte … Buchungen … Reisebescheinigungen … als Vertrauen hinstellen“).
   Zahlen aus dem samedi-Export vom 27.09.2026, gezählt 28.09.2026, 01:30, nur stattgefundene Termine seit 01.01.2023, abgerundet. */
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-vertrauen {
  grid-column: 1 / -1; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Schweigepflicht (EMA 28.09.2026, 01:48 wörtlich: „Was in der Privatarztpraxis geschieht, bleibt in der Privatarztpraxis. § 203“).
   Ein ruhiges Band: der Satz in C, die Norm als kleine Marke mit Link aufs Gesetz, darunter der sachliche Unterschied. */
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht {
  display: grid; justify-items: center; gap: 6px; text-align: center; margin: 8px auto 28px; padding: 30px 24px 28px; max-width: 820px;
  border-top: 1px solid color-mix(in srgb, var(--b-c) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--b-c) 14%, transparent);
}
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-satz {
  margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; line-height: 1.3; color: var(--b-c); text-wrap: balance;
}
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-norm { margin: 2px 0 0; }
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-norm a {
  display: inline-block; padding: 3px 12px; border: 1px solid color-mix(in srgb, var(--b-c) 30%, transparent); border-radius: 999px;
  font-size: 12.5px; letter-spacing: .08em; color: var(--b-c); text-decoration: none; font-variant-numeric: tabular-nums;
}
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-norm a:hover { border-color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-text { margin: 6px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

/* Herzschlag beim Ankommen (EMA 28.09.2026, 01:57: „wenn du auf die Seite kommst, dann pulsiert der … das schlägt ein Herz“).
   Das Zeichen in der Tafel schlägt dreimal, lub-dub, 60 Schläge in der Minute, dann ruht es. Wer weniger Bewegung will, sieht nichts davon. */
@keyframes b-herzschlag {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.09); }
  17% { transform: scale(1); }
  30% { transform: scale(1.05); }
  40% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique]:not([data-boutique="konto"]) #praxis-rivoir-design .identity .palette-current-ring { animation: b-herzschlag 1s ease-in-out .5s 3; transform-origin: 50% 50%; }
}

/* Telecompassion ganz unten (EMA 28.09.2026, 02:01: „Das muss auch noch ganz unten auf die Seite“). Leise wie eine Signatur —
   so bleibt auch sein Wort vom 15.09. gewahrt: Fürsorge schreibt man nicht als Versprechen aufs Etikett. */
html[data-boutique] #praxis-rivoir-design .b-telecompassion {
  margin: 22px 0 4px; text-align: center; font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase;
  color: color-mix(in srgb, var(--b-c) 55%, transparent);
}

/* Leitsatz „Licht an.“ (EMA 28.09.2026, 02:07: „Praxis für eine aufgeklärte friedliche nachhaltige Gesellschaft … der Sieg der Ratio, das Licht, Licht an“). */
html[data-boutique] #praxis-rivoir-design .home-personal .b-licht {
  margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--palette-selected, var(--b-c));
  font-size: 15px; line-height: 1.55; max-width: 52ch; text-wrap: pretty;
}
html[data-boutique] #praxis-rivoir-design .home-personal .b-licht strong { color: var(--b-c); font-weight: 600; }

/* § 12 · Konto-Kopf und Konto-Farben (EMA 28.09.2026, 09:28–09:31: „hier finde ich den Hero viel schöner“ — Seite
   „Registrierung eingegangen“ im Konto — „die Farben … kotzig“, „Login und Menü vollkommen falsch gebaut“).
   Der Kopf ist wieder der Kopf aller Praxisseiten und des Kontos (praxis.css .identity, lila Band, weiße Leiste mit Menü
   links und Login rechts); die Tafel-Regeln oben gelten nur noch außerhalb von data-boutique="konto".
   Startwerte = Praxisfarben aus praxis-paletten.js („weiss“); praxis.js applyKonto() überschreibt sie mit der gewählten Farbwelt. */
html[data-boutique="konto"] {
  --b-c: #564596; --b-c-hell: #f2eef9; --b-c-linie: #bbb3d9;
  --b-k: #f6b80b; --b-k-tief: #846205; --b-k-hell: #fdf1cf; --b-k-linie: #fad46d;
  --complement: #f6b80b; --complement-ink: #846205;
  --b-tinte: #16242b; --b-flaeche: #eeebf7; --b-punkt: #564596; --b-wortmarke-filter: none;
  --b-ziel-flaeche: #f2eef9; --b-ziel-k: #f6b80b; --b-ziel-spur: #bbb3d9; --b-grund: #ffffff;
}
/* Aufschlag wie auf den übrigen Seiten: erste Zeile Tinte, zweite Zeile in der Farbwelt */
html[data-boutique="konto"] #praxis-rivoir-design .home-threeways .home-hero h1 { color: var(--ink, #16242b); }

/* Kontaktleiste unten (EMA-Screenshot 09:29: „Anrufen“ ragt rechts über den Rand): auf schmalen Bildschirmen teilen sich
   die drei Knöpfe die Breite, statt über den Rand zu laufen. */
@media (max-width: 640px) {
  html[data-boutique] #pr-doctor-contact .pr-contact-dock {
    display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: end;
    max-width: calc(100vw - 20px); gap: 6px;
  }
  html[data-boutique] #pr-doctor-contact .pr-contact-dock > :is(a, button) { min-width: 0; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  html[data-boutique] #pr-doctor-contact .pr-contact-dock > :is(a, button) { padding-inline: 8px; gap: 5px; font-size: 11.5px; }
}

/* § 13 · Seriös und fertig (EMA 28.09.2026, 10:33: „was würde eine seriöse Privatarztpraxis schreiben … billige Links, anstatt
   schönen Buttons und Icons … die Patienten nicht vollschwafeln“). Textbuch: 0_BOX_203/WEBSITE_SERIOES_TEXTBUCH_2026-09-28.md.
   Ein Knopfsystem für die ganze Seite: gefüllt (Hauptweg) · Rahmen (Nebenweg) · leise (Zusatz) — immer mit Symbol, Radius 999. */
html[data-boutique] #praxis-rivoir-design :where(.b-knopf, .b-leise-knopf, .b-fuss-wege a, .b-notfall) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--b-c-linie); border-radius: var(--b-r-rund); background: #fff; color: var(--b-c); font-family: var(--font);
}
html[data-boutique] #praxis-rivoir-design :where(.b-knopf, .b-leise-knopf, .b-fuss-wege a, .b-notfall) svg { flex: none; }
html[data-boutique] #praxis-rivoir-design .b-knopf { min-height: 44px; padding: 0 18px 0 16px; font-size: 14px; font-weight: 500; }
html[data-boutique] #praxis-rivoir-design .b-knopf.b-knopf-voll { background: var(--b-c); border-color: var(--b-c); color: #fff; }
@media (hover: hover) {
  html[data-boutique] #praxis-rivoir-design :is(.b-knopf, .b-leise-knopf, .b-fuss-wege a):hover { border-color: var(--b-c); }
  html[data-boutique] #praxis-rivoir-design .b-knopf.b-knopf-voll:hover { background: color-mix(in srgb, var(--b-c) 88%, #000); }
}
html[data-boutique] #praxis-rivoir-design :is(.b-knopf, .b-leise-knopf, .b-fuss-wege a, .b-notfall, .b-rechtliches a, .b-fuss-kontakt a):focus-visible {
  outline: 2px solid var(--b-c); outline-offset: 3px;
}
html[data-boutique] #praxis-rivoir-design .b-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 14px; }

/* Aufschlag: eine Zeile unter dem Leitsatz, keine Füllsätze davor */
html[data-boutique] #praxis-rivoir-design .home-hero .hero-introduction { max-width: 40ch; }

/* Honorarzeile unter den Einstiegen: EIN ruhiger Satz statt Kette aus Preisen */
html[data-boutique] #praxis-rivoir-design .home-start-note.b-honorar {
  display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); white-space: normal; text-wrap: pretty;
}

/* Arztkarte: „Kennenlernen“ als leiser Knopf mit Symbol statt Textlink */
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption .b-leise-knopf {
  justify-self: start; min-height: 34px; margin-top: 6px; padding: 0 13px 0 10px; font-size: 13px; font-weight: 500;
  border-color: color-mix(in srgb, var(--b-c) 22%, transparent); text-decoration: none;
}
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo figcaption .b-leise-knopf span { color: inherit; }

/* Schweigepflicht: ein Satz, darunter die Norm im Fließtext, oben ein kleines Schild */
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-symbol {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%;
  color: var(--b-c); background: var(--b-c-hell);
}
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-text { margin-top: 2px; font-size: 14px; color: var(--muted); }
html[data-boutique] #praxis-rivoir-design .b-schweigepflicht .b-schweigen-text a { color: var(--b-c); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Tracker „Unser Ziel“: der Hinweis steht sichtbar und klein unter den Reglern */
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-hint { font-size: .6875rem; line-height: 1.5; color: #52616b; }

/* Bildflächen: nie schwarz — solange ein Foto lädt (oder ausbleibt), steht ein heller Grund in der Farbe des Motivs */
html[data-boutique] #praxis-rivoir-design .home-previews .travel-art { background: #dfe7eb; }
html[data-boutique] #praxis-rivoir-design .home-previews .cannabis-art { background-color: #e7e9e7; }

/* Augenhöhe: Rahmenknopf „Über den Arzt“ */
html[data-boutique] #praxis-rivoir-design .home-personal .b-knopf { margin-top: 18px; }

/* Schon in Behandlung: Satz links, drei Knöpfe rechts (Handy: untereinander) */
html[data-boutique] #praxis-rivoir-design .home-returning {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
}
html[data-boutique] #praxis-rivoir-design .home-returning > p { margin: 0; font-size: 15px; }
html[data-boutique] #praxis-rivoir-design .home-returning > .b-knoepfe { margin: 0; gap: 10px; }

/* Häufige Fragen: ganze Zeile klickbar, Plus wird Minus, Antworten kurz */
html[data-boutique] #praxis-rivoir-design .b-faq { padding-block: 34px 46px; }
html[data-boutique] #praxis-rivoir-design .b-faq > h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 500; line-height: 1.25; }
html[data-boutique] #praxis-rivoir-design .b-faq details { border-top: 1px solid var(--b-c-linie); }
html[data-boutique] #praxis-rivoir-design .b-faq details:last-of-type { border-bottom: 1px solid var(--b-c-linie); }
html[data-boutique] #praxis-rivoir-design .b-faq details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 12px 2px;
  list-style: none; color: #1f2a33; font-size: 16px; font-weight: 500; line-height: 1.4; cursor: pointer;
}
html[data-boutique] #praxis-rivoir-design .b-faq details > summary::-webkit-details-marker { display: none; }
html[data-boutique] #praxis-rivoir-design .b-faq details > summary::after { content: none; display: none; }
@media (hover: hover) { html[data-boutique] #praxis-rivoir-design .b-faq details > summary:hover { color: var(--b-c); } }
html[data-boutique] #praxis-rivoir-design .b-faq details > summary:focus-visible { outline: 2px solid var(--b-c); outline-offset: 2px; border-radius: 8px; }
html[data-boutique] #praxis-rivoir-design .b-faq-zeichen {
  position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--b-c-linie); border-radius: 50%; background: #fff;
}
html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::before,
html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; border-radius: 1px; background: var(--b-c);
  transform: translate(-50%, -50%);
}
html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
html[data-boutique] #praxis-rivoir-design .b-faq details[open] .b-faq-zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
html[data-boutique] #praxis-rivoir-design .b-faq details > p { max-width: 64ch; margin: 0; padding: 0 46px 20px 2px; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::after { transition: transform .2s ease; }
}

/* Fuß: Kontakt und Wege als Knöpfe mit Symbol; Notfall sachlich; Rechtliches klein */
html[data-boutique] #praxis-rivoir-design .b-fuss-kontakt a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; }
html[data-boutique] #praxis-rivoir-design .b-fuss-kontakt a svg { flex: none; color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .footer-navigation.b-fuss-wege { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; font-size: 13.5px; }
html[data-boutique] #praxis-rivoir-design .b-fuss-wege a { min-height: 40px; padding: 0 16px 0 13px; color: #2a3540; font-size: 13.5px; }
html[data-boutique] #praxis-rivoir-design .b-fuss-wege a svg { color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .b-fuss-wege a:hover { color: var(--b-c); text-decoration: none; }
html[data-boutique] #praxis-rivoir-design .privacy-trust .trust-icon svg { color: var(--b-c); }
html[data-boutique] #praxis-rivoir-design .b-fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--b-c-linie);
}
html[data-boutique] #praxis-rivoir-design .b-notfall {
  min-height: 34px; padding: 0 13px 0 11px; border-color: #d9b3b8; color: #8a2f3b; font-size: 13px; font-weight: 500;
}
html[data-boutique] #praxis-rivoir-design .b-notfall:hover { border-color: #8a2f3b; }
html[data-boutique] #praxis-rivoir-design .b-rechtliches { display: flex; gap: 18px; font-size: 12.5px; }
html[data-boutique] #praxis-rivoir-design .b-rechtliches a { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); text-decoration: none; }
html[data-boutique] #praxis-rivoir-design .b-rechtliches a:hover { color: var(--b-c); text-decoration: underline; text-underline-offset: 3px; }

/* PocketDoc-Fenster auf dieser Seite: „Im eigenen Fenster“ als Knopf mit Symbol */
html[data-boutique] #pocketdoc-dialog .help-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
html[data-boutique] #pocketdoc-dialog .help-bottom p { margin: 0; }
html[data-boutique] #pocketdoc-dialog .help-bottom a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--b-c-linie);
  border-radius: 999px; color: var(--b-c); background: #fff; text-decoration: none; font-size: 13px; font-weight: 500;
}

@media (max-width: 640px) {
  html[data-boutique] #praxis-rivoir-design .home-returning > .b-knoepfe { width: 100%; }
  html[data-boutique] #praxis-rivoir-design .home-returning > .b-knoepfe .b-knopf { flex: 1 1 auto; }
  html[data-boutique] #praxis-rivoir-design .b-faq details > summary { font-size: 15.5px; }
  html[data-boutique] #praxis-rivoir-design .b-faq details > p { padding-right: 8px; font-size: 14.5px; }
  html[data-boutique] #praxis-rivoir-design .b-fuss-unten { flex-direction: column; align-items: flex-start; }
}
@media (forced-colors: active) {
  html[data-boutique] #praxis-rivoir-design :is(.b-knopf, .b-leise-knopf, .b-fuss-wege a, .b-notfall, .b-faq-zeichen) { border-color: CanvasText; }
  html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::before,
  html[data-boutique] #praxis-rivoir-design .b-faq-zeichen::after { background: CanvasText; }
}

/* Preise nie umbrechen („ab 29“ | „€“), Kartenknöpfe mit Symbol links und Text daneben, auch wenn er zweizeilig wird */
html[data-boutique] #praxis-rivoir-design .home-offer strong { white-space: nowrap; }
html[data-boutique] #praxis-rivoir-design .home-start-travel .home-start-label { overflow-wrap: normal; hyphens: manual; }
@container practice (min-width: 44.001em) {
  html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-copy > .text-link {
    justify-content: flex-start; gap: 10px; padding-inline: 14px 12px; text-align: left; line-height: 1.35;
  }
}

/* § 14 · Wege zum Arzt (EMA 28.09.2026, 11:19: „ich bin doch auch vor Ort … am Telefon, per Video, im Chat, per Online-Fragebogen,
   per KI“ — als Richtung, nicht wörtlich): eine ruhige Symbolreihe statt eines langen Satzes. Das Herz bleibt (EMA 11:17/11:18). */
html[data-boutique] #praxis-rivoir-design .b-wege { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
html[data-boutique] #praxis-rivoir-design .b-wege li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--b-c-hell, #f2eef9); color: var(--b-c, #564596); font-size: 13.5px; font-weight: 500; line-height: 1.2;
}
html[data-boutique] #praxis-rivoir-design .b-wege li svg { flex: none; }

/* § 15 · Farbe, Tiefe, Gegenfarbe und Kopf (EMA 28.09.2026, 11:06–11:17; F1-Befund 11:10: „zu flach und zu wenig Farbe … auf jeden
   Fall nicht die Farbe wegnehmen“ · „der Hero soll immer die Farbe tragen“ · „Komplementärfarben … ein bisschen highlighten“ ·
   „ein schönes Sonnenblumengelb und dann ‚Mehr vom Leben.‘ gelb“). Lila (C) bleibt die Hauptfarbe; die Gegenfarbe kommt NUR über
   var(--complement) / var(--complement-ink) aus praxis.js highlightHex() — Praxisfarben: Sonnenblumengelb #f6b80b. */

/* Kopf beim Scrollen: die mitlaufende Leiste trägt den Verlauf des Bands (gleiche Rechnung wie praxis.css .identity).
   Variante A (Standard): Punkt neben der Wortmarke. Variante B: Vorschau-Block am Ende dieser Datei (#kopf=b). */
html[data-boutique] #praxis-rivoir-design .pr-navigation[data-masthead-visible="false"] {
  background: linear-gradient(110deg, color-mix(in srgb, var(--masthead-start, #eeebf7) 80%, white), color-mix(in srgb, var(--masthead-end, #e3def2) 80%, white));
  border-bottom-color: color-mix(in srgb, var(--b-c) 18%, transparent);
}
html[data-boutique] #praxis-rivoir-design .pr-navigation[data-masthead-visible="false"] .pr-compact-brand { color: var(--b-c); }

/* „Mehr vom Leben.“ · Variante B (EMA 29.09.2026, 07:06: „den Gelbton ein bisschen zu aufdringlich auf der
   Hero-Startpage“ — die Schrift war voll in Gold mit dickem Goldrand). Ab jetzt: Lila (C), die Hauptfarbe der CI,
   trägt den Text; Gold bleibt als feiner Akzent nur die Unterstreichung (var(--complement)). Kontrast var(--b-c)
   auf Weiß gemessen 7,81 : 1 — über der Schwelle 4,5 : 1 (Beleg: BERICHT.md). */
html[data-boutique] #praxis-rivoir-design main.home-threeways .home-hero h1 .hero-accent {
  color: var(--b-c); letter-spacing: -.03em;
  text-decoration: underline; text-decoration-color: var(--complement, #f6b80b);
  text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-skip-ink: none;
}

/* Preise als ruhige Pillen (Einstieg und Angebotskarten): helle Lavendel-Fläche, dunkle Schrift, Gold nur noch als
   feiner Rand — vorher voll in Gold gefüllt (EMA 29.09.2026, 07:06). Kontrast Schrift/Fläche siehe BERICHT.md. */
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start-price {
  background: color-mix(in srgb, var(--b-c) 12%, #fff); color: #16242b; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--complement, #f6b80b) 55%, transparent);
}
html[data-boutique] #praxis-rivoir-design .home-previews .home-offer strong {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--b-c) 12%, #fff); color: #16242b;
  border: 1px solid color-mix(in srgb, var(--complement, #f6b80b) 55%, transparent);
}

/* Mehr Lila: Einstiegsgruppen auf heller C-Fläche, Hauptkachel „Therapie starten“ voll in C */
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start-group {
  background: color-mix(in srgb, var(--b-c) 9%, var(--mood-surface, #fff)); border-color: color-mix(in srgb, var(--b-c) 22%, transparent);
}
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main { background: var(--b-c); border-color: var(--b-c); color: #fff; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main :is(.home-start-label, .home-start-label small) { color: #fff; }
html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main .home-start-icon { color: var(--b-c); background: #fff; }
@media (hover: hover) {
  html[data-boutique] #praxis-rivoir-design .home-threeways .home-start .home-start-main:hover { background: color-mix(in srgb, var(--b-c) 88%, #000); border-color: var(--b-c); }
}

/* Angebotskarten: Textteil auf zarter C-Fläche, Kaufknopf voll in C mit Symbol */
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview { border-color: color-mix(in srgb, var(--b-c) 20%, transparent); }
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-copy { background: color-mix(in srgb, var(--b-c) 6%, var(--mood-surface, #fff)); }
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-copy > .text-link {
  background: var(--b-c); border-color: var(--b-c); color: #fff; font-weight: 500; text-decoration: none;
}
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-copy > .text-link:hover { background: color-mix(in srgb, var(--b-c) 88%, #000); color: #fff; }
html[data-boutique] #praxis-rivoir-design .home-previews .home-preview-copy > .text-link { gap: 10px; padding-inline: 16px; text-align: left; line-height: 1.35; }

/* Tracker „Unser Ziel“: Fläche bleibt ruhig (Lavendel/Weiß, EMA 29.09.2026 07:06: „den Gelbton … zu aufdringlich
   auf der Hero-Startpage“) — Gold bleibt Akzent auf der Lebensfreude-Linie/dem Regler-Punkt direkt darunter, siehe
   .mood-range/::-webkit-slider-thumb weiter unten. Vorher: 30 % Gold flächig im zweiten Verlaufspunkt. */
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art {
  background: linear-gradient(125deg, color-mix(in srgb, var(--b-c) 16%, #fff), color-mix(in srgb, var(--b-c) 4%, #fff));
}
html[data-boutique] #praxis-rivoir-design .home-threeways .mood-art .home-metric-joy .mood-range {
  --slider-track: linear-gradient(90deg, color-mix(in srgb, var(--complement, #f6b80b) 35%, #fff), var(--complement, #f6b80b));
}

/* Arztkarte: alle Kontaktwege in derselben Pillenform wie „Anrufen“/„Schreiben“, auf dem Handy als ruhiges Zweierraster */
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt :is(a, button) {
  justify-content: center; min-height: 42px; padding: 0 14px; border-color: var(--b-c-linie); background: #fff; color: var(--b-c); font-weight: 500;
}
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt :is(a, button):hover { border-color: var(--b-c); background: var(--b-c-hell); }
html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt .b-k-haupt { background: var(--b-c); border-color: var(--b-c); color: #fff; }
@media (max-width: 640px) {
  html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-boutique] #praxis-rivoir-design .home-hero .hero-photo .b-kontakt :is(a, button, .b-k-haupt, .b-k-zweit) { min-width: 0; margin: 0; padding: 0 10px; }
}

/* Schon in Behandlung: eigene helle C-Fläche */
html[data-boutique] #praxis-rivoir-design .home-returning {
  padding: 20px 22px; border-radius: var(--b-r); background: color-mix(in srgb, var(--b-c) 9%, #fff);
}

/* Häufige Fragen: Plus in C auf heller C-Fläche; die geöffnete Frage trägt die Gegenfarbe (höchstens eine Goldstelle) */
html[data-boutique] #praxis-rivoir-design .b-faq-zeichen { border-color: transparent; background: var(--b-c-hell); }
html[data-boutique] #praxis-rivoir-design .b-faq details[open] .b-faq-zeichen { background: var(--complement, #f6b80b); }
html[data-boutique] #praxis-rivoir-design .b-faq details[open] .b-faq-zeichen::before { background: #16242b; }

/* Fuß: trägt die Farbe des Kopfs */
html[data-boutique] #praxis-rivoir-design footer {
  background: linear-gradient(110deg, color-mix(in srgb, var(--masthead-start, #eeebf7) 80%, white), color-mix(in srgb, var(--masthead-end, #e3def2) 80%, white));
}

/* Kontaktleiste auf breiten Bildschirmen: eine geschlossene Kapsel in der Farbe des Kopfs — keine Lücken, durch die Text scheint */
@media (min-width: 641px) {
  html[data-boutique] #pr-doctor-contact .pr-contact-dock {
    padding: 6px; border: 1px solid color-mix(in srgb, var(--b-c) 20%, transparent); border-radius: 999px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--masthead-start, #eeebf7) 80%, white), color-mix(in srgb, var(--masthead-end, #e3def2) 80%, white));
    box-shadow: 0 6px 22px #23313d1f;
  }
}

/* Kontaktleiste auf dem Handy: feste Fußleiste in der Farbe des Kopfs statt schwebender Knöpfe über dem Text
   (Gegenprobe 28.09.: lag über Stempel, Überschrift und Fuß). Der Inhalt läuft darunter durch; body hält unten Platz frei. */
@media (max-width: 640px) {
  html[data-boutique] #pr-doctor-contact {
    --pr-feste-leiste: 1;
    left: 0; right: 0; bottom: 0; padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(110deg, color-mix(in srgb, var(--masthead-start, #eeebf7) 80%, white), color-mix(in srgb, var(--masthead-end, #e3def2) 80%, white));
    border-top: 1px solid color-mix(in srgb, var(--b-c) 18%, transparent);
  }
  html[data-boutique] #pr-doctor-contact .pr-contact-dock {
    grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; max-width: none; width: 100%;
  }
  html[data-boutique] #pr-doctor-contact .pr-contact-dock > :is(a, button) { justify-content: center; }
  html[data-boutique] #pr-doctor-contact .pr-doctor-panel { right: 12px; }
  html[data-boutique] body.pr-has-doctor-contact { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html[data-boutique] #pr-doctor-contact.is-input-active:not(.is-open) { visibility: hidden; }
}

/* Reise-Karte (EMA 28.09.2026, 11:46: „Bei der Reisebescheinigung kann ruhig auch irgendwo all inclusive stehen“) */
html[data-boutique] #praxis-rivoir-design .home-previews .home-offer .b-inklusive {
  display: inline-block; margin-left: 4px; color: var(--b-c); font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
html[data-boutique] #praxis-rivoir-design .home-previews .home-offer small + small { margin-top: 4px; }


/* EMA 29.09.2026, 16:54: „den Punkt über die Praxis Rivoir … und dafür lieber Mensch, Natur, Medizin noch weiter runter"
   — kompakte Marke in der Navigation gestapelt: Punkt oben, Wortmarke, Zeile mit mehr Abstand darunter. */
html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-brand { flex-direction: column; gap: 5px; min-height: 58px; padding: 4px 0; }
html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-symbol { width: 22px; height: 22px; }
html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-lockup { gap: 9px; }
@container praxis-navigation (max-width: 550px) {
  html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-brand { gap: 4px; }
  html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-symbol { width: 18px; height: 18px; }
  html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-compact-lockup { gap: 8px; }
}

/* EMA 29.09.2026, 16:55: Notfallnummern verlinken — Notruf, ärztlicher Bereitschaftsdienst, Giftnotruf, Krisendienst.
   Quellen (geprüft 29.09.2026): kvberlin.de 116117 · giftnotruf.charite.de 030 19240 (Berlin/Brandenburg, 24 h) ·
   berliner-krisendienst.de Mitte/Friedrichshain-Kreuzberg 030 390 63-10 (rund um die Uhr). */
html[data-boutique] #praxis-rivoir-design .b-notfaelle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
html[data-boutique] #praxis-rivoir-design .b-notnummer {
  display: inline-flex; align-items: center; min-height: 34px; color: #2a3540; font-size: 13px; text-decoration: none;
}
html[data-boutique] #praxis-rivoir-design .b-notnummer b { margin-left: .35em; color: #8a2f3b; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-boutique] #praxis-rivoir-design .b-notnummer:hover { color: var(--b-c); text-decoration: underline; text-underline-offset: 3px; }
html[data-boutique] #praxis-rivoir-design .b-notnummer:focus-visible { outline: 2px solid var(--b-c); outline-offset: 3px; border-radius: 6px; }

/* === EFEU · gewachsen, nicht steril (EMA 29.09.2026, Vibe: Efeu wie am „Lächeln und Eulen", 17 Jahre ohne
   Marketing zur Institution geworden) ===
   Sehr dezentes Grün an den Ecken der Inhaltsfläche, wie Efeu, das den Rahmen erobert. Nie im Fließtext,
   nie auf Knöpfen, Preisen oder der Wortmarke, ohne Klick- oder Scrollwirkung (pointer-events:none).
   AKTUALISIERT 30.09.2026 (EMA/Cody, Rahmen-Auftrag): vorher an `position:fixed` gegen den BILDSCHIRMRAND
   gesetzt, mit negativem Versatz — dadurch hingen Blätter sichtbar abgeschnitten am Fensterrand, sobald das
   Fenster schmaler war als der Entwurf. Jetzt an `main#inhalt`, dem Rahmen der eigentlichen Inhaltsfläche,
   verankert (`position:absolute`, kein negativer Versatz mehr) — eine Ranke oben links (hängt vom oberen
   Rand herab), eine unten rechts (wächst wie zuvor vom Boden hoch), beide vollständig innerhalb der
   Inhaltsfläche und dadurch nie vom Fensterrand abgeschnitten, gleich auf welcher Fensterbreite. */
html[data-boutique] { --efeu-blatt: #6b7f5c; --efeu-rand: #4a5c40; }

html[data-boutique] #praxis-rivoir-design main#inhalt { position: relative; }

html[data-boutique] #praxis-rivoir-design main#inhalt::before,
html[data-boutique] #praxis-rivoir-design main#inhalt::after {
  content: ""; position: absolute; width: 96px; height: 96px;
  background-repeat: no-repeat; background-size: contain; opacity: .16;
  pointer-events: none; z-index: 1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M10 4C8 32 14 56 30 70C42 81 40 98 48 116' fill='none' stroke='%234a5c40' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M28 72c-9 3-13 11-11 20 8-1 15-7 17-16z' fill='%236b7f5c'/%3E%3Cpath d='M18 48c-9 2-14 10-13 19 8 0 15-6 18-15z' fill='%236b7f5c'/%3E%3Cpath d='M46 100c-9 2-14 9-13 18 8 0 15-5 18-14z' fill='%236b7f5c'/%3E%3C/svg%3E");
}
html[data-boutique] #praxis-rivoir-design main#inhalt::before { top: 0; left: 0; transform: scaleY(-1); }
html[data-boutique] #praxis-rivoir-design main#inhalt::after { bottom: 0; right: 0; transform: scaleX(-1); }
@media (max-width: 640px) {
  html[data-boutique] #praxis-rivoir-design main#inhalt::before,
  html[data-boutique] #praxis-rivoir-design main#inhalt::after { width: 52px; height: 52px; opacity: .13; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design main#inhalt::before,
  html[data-boutique] #praxis-rivoir-design main#inhalt::after { transition: opacity .4s ease; }
}

/* === HERO-CLOU (EMA 29.09.2026, 23:25: „noch kein Bums … Mehr Lebensfreude") ===
   Das Akzentwort ist der hellste Moment der Seite: Lila, etwas größer und selbstbewusster,
   darunter ein von Hand gezogener Gold-Schwung (wie eine Rezept-Unterschrift), nicht der brave
   gerade Strich. Verbindet den Claim mit dem handgeschriebenen Rezept rechts und dem Holzschild. */
html[data-boutique] #praxis-rivoir-design main.home-threeways .home-hero h1 .hero-accent {
  display: inline-block; text-decoration: none; position: relative;
  font-size: 1.06em; letter-spacing: -.035em; padding-bottom: .12em;
}
html[data-boutique] #praxis-rivoir-design main.home-threeways .home-hero h1 .hero-accent::after {
  content: ""; position: absolute; left: -.02em; right: -.04em; bottom: 0; height: .34em;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 5, 120 5, 175 11 C 220 16, 262 12, 297 6' fill='none' stroke='%23f6b80b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .9; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design main.home-threeways .home-hero h1 .hero-accent::after {
    background-size: 0% 100%; animation: hero-schwung 900ms ease .35s forwards;
  }
  @keyframes hero-schwung { to { background-size: 100% 100%; } }
}

/* === PRIVATREZEPT-KARTE · echtes, warmes Papier mit Unterschrift (F1, 29.09.2026, 23:27 — EMAs Auftrag „mach die
   Website so, wie du sie richtig geil findest"; das Rezept war noch kühle UI-Box). Nur der Boutique-Skin der
   Startseite; die nüchterne mp-Karte anderswo bleibt unberührt. Ein warmes Elfenbein-Papier, ein feiner Rahmen,
   eine handgezogene Arzt-Unterschrift in Gold-Braun — der Moment Vertrauen. */
html[data-boutique] #praxis-rivoir-design .mp-karte,
html[data-boutique] #praxis-rivoir-design .mp-blatt {
  background: linear-gradient(180deg,#fdfbf6 0%,#faf6ee 100%);
  border-color: #e7dcc6;
}
html[data-boutique] #praxis-rivoir-design .mp-karte { box-shadow: 0 18px 46px -22px rgba(60,45,20,.35); }
html[data-boutique] #praxis-rivoir-design .mp-stempel { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
html[data-boutique] #praxis-rivoir-design .mp-signatur-feld { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
html[data-boutique] #praxis-rivoir-design .mp-signatur { width: 132px; height: 30px; opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design .mp-signatur path {
    stroke-dasharray: 640; stroke-dashoffset: 640; animation: mp-sig-schreiben 1600ms ease .6s forwards;
  }
  @keyframes mp-sig-schreiben { to { stroke-dashoffset: 0; } }
}


/* === PREISE-SEITE · HANDSCHRIFT (F1, 29.09.2026, Cluster „preise" — EMAs Auftrag „mach die Website fertig,
   so wie du sie richtig geil findest, du bist binär der Boss"). Zieht die Handschrift der Startseite (warmes
   Elfenbein-Papier, Gold-Schwung, Unterschrift) auf preise.html — nur im Boutique-Skin, Holzschild-Ruhe
   (Efeu-Ranke, Gold-Unterstrich am Preis, gepunktete Stufen) bleibt unveraendert. Die Preisliste und der
   Honorar-Absatz bekommen zusaetzlich das warme Papier als Rahmen, wie die Rezeptkarte auf der Startseite. */
html[data-boutique] #praxis-rivoir-design .holz-seite .holz-tafel,
html[data-boutique] #praxis-rivoir-design .holz-seite .offer-billing {
  background: linear-gradient(180deg,#fdfbf6 0%,#faf6ee 100%);
  border: 1px solid #e7dcc6; border-radius: 22px;
  box-shadow: 0 18px 46px -28px rgba(60,45,20,.3);
}
html[data-boutique] #praxis-rivoir-design .holz-seite .holz-tafel { padding: 30px clamp(20px,4vw,40px) 6px; }
html[data-boutique] #praxis-rivoir-design .holz-seite .offer-billing { padding: 30px clamp(20px,4vw,40px) 32px; }
html[data-boutique] #praxis-rivoir-design .holz-seite .holz-liste,
html[data-boutique] #praxis-rivoir-design .holz-seite .holz-zeile { border-color: #e7dcc6; }

/* Gold-Schwung unter dem EINEN Akzentwort der Seitenueberschrift — dieselbe Handzeichnung wie HERO-CLOU. */
html[data-boutique] #praxis-rivoir-design .holz-seite .content-hero h1 .hero-accent {
  display: inline-block; position: relative; padding-bottom: .1em;
}
html[data-boutique] #praxis-rivoir-design .holz-seite .content-hero h1 .hero-accent::after {
  content: ""; position: absolute; left: -.02em; right: -.04em; bottom: 0; height: .3em;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 5, 120 5, 175 11 C 220 16, 262 12, 297 6' fill='none' stroke='%23f6b80b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .9; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design .holz-seite .content-hero h1 .hero-accent::after {
    background-size: 0% 100%; animation: hero-schwung 900ms ease .35s forwards;
  }
}

/* Unterschrift-Motiv am Preise-Fuß — dieselbe Handzeichnung wie die Rezeptkarte (mp-signatur), ohne Stempel:
   hier ist es kein Rezept, sondern das wiederkehrende Vertrauenszeichen unter der Honorar-Zusage. */
html[data-boutique] #praxis-rivoir-design .holz-seite .preis-signatur-zeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 28px; margin-top: 24px; padding-top: 18px; border-top: 1px dotted #e7dcc6;
}
html[data-boutique] #praxis-rivoir-design .holz-seite .preis-signatur-satz {
  margin: 0; font-size: .9rem; font-style: italic; color: var(--muted); max-width: 44ch;
}
@media (max-width: 620px) {
  html[data-boutique] #praxis-rivoir-design .holz-seite .preis-signatur-zeile { justify-content: flex-start; }
}


/* === LEISTUNGEN · Handschrift konsequent weitergezogen (EMA 29.09.2026, 23:27: „mach die Website fertig, so wie
   du sie richtig geil findest" — Auftrag: die Startseiten-Geste auf allen Seiten). Nur der Boutique-Skin, die
   nüchterne Ansicht ohne data-boutique bleibt unberührt. Zwei Übernahmen von der Startseite: */

/* 1) Gold-Schwung unter dem einen Akzentwort der Seitenüberschrift — dieselbe handgezogene Geste wie im Hero. */
html[data-boutique] #praxis-rivoir-design main.offer-page .content-hero h1 .hero-accent {
  display: inline-block; text-decoration: none; position: relative;
  font-size: 1.06em; letter-spacing: -.035em; padding-bottom: .12em;
}
html[data-boutique] #praxis-rivoir-design main.offer-page .content-hero h1 .hero-accent::after {
  content: ""; position: absolute; left: -.02em; right: -.04em; bottom: 0; height: .34em;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 5, 120 5, 175 11 C 220 16, 262 12, 297 6' fill='none' stroke='%23f6b80b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .9; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design main.offer-page .content-hero h1 .hero-accent::after {
    background-size: 0% 100%; animation: hero-schwung 900ms ease .35s forwards;
  }
}

/* 2) Warmes Elfenbein-Papier für die vier Leistungs-Karten statt des kühlen Lavendel-Wash (--wash/--line). */
html[data-boutique] #praxis-rivoir-design main.offer-page .offer-card {
  background: linear-gradient(180deg,#fdfbf6 0%,#faf6ee 100%);
  border-color: #e7dcc6;
  box-shadow: 0 14px 36px -20px rgba(60,45,20,.28);
}
html[data-boutique] #praxis-rivoir-design main.offer-page .offer-card .offer-price {
  background: color-mix(in srgb, #f6b80b 22%, #fff);
}


/* === UNTERSEITEN-HANDSCHRIFT (F1, 29.09.2026, 23:4x — EMAs Auftrag „mach die Website fertig, so wie du sie
   richtig geil findest“, Cluster unterseiten/ders Bau-Auftrags 0_BOX_203/bau_website_handschrift_20260929).
   Zieht die auf der Startseite (data-boutique="konto") bereits gebaute Handschrift auf jede andere
   data-boutique-Seite: dieselben Praxisfarben (Lila #564596 · Gold #f6b80b) für die schon vorhandenen,
   generischen Regeln oben (Identity-Band, Practice-Sheet, .privacy-trust-item, .mp-karte, .b-*) — reine
   Farbzuweisung, keine neue Logik, keine neue Selektor-Familie. Nur Lesen/Kopie, nichts live. */
html[data-boutique]:not([data-boutique="konto"]) {
  --b-c: #564596; --b-c-hell: #f2eef9; --b-c-linie: #bbb3d9;
  --b-k: #f6b80b; --b-k-tief: #846205; --b-k-hell: #fdf1cf; --b-k-linie: #fad46d;
  --complement: #f6b80b; --complement-ink: #846205;
  --b-tinte: #16242b; --b-flaeche: #eeebf7; --b-punkt: #564596; --b-wortmarke-filter: none;
  --b-ziel-flaeche: #f2eef9; --b-ziel-k: #f6b80b; --b-ziel-spur: #bbb3d9; --b-grund: #ffffff;
}

/* Warmes Elfenbein-Papier für die Kästen/Karten jeder Unterseite — dieselbe Rezeptur wie .mp-karte/.mp-blatt
   oben (§ PRIVATREZEPT-KARTE), nur auf die Bausteine, die auf den Unterseiten tatsächlich vorkommen:
   die Vertrauens-Kacheln im Fuß (.privacy-trust-item, auf allen acht Seiten) und die CTA-Box
   (Ganzheitliche Medizin, Cannabismedizin). Ersetzt die kühle helle Fläche, nicht die Kontraste/Radien. */
html[data-boutique] #praxis-rivoir-design :is(.privacy-trust .privacy-trust-item, .content-cta) {
  background: linear-gradient(180deg,#fdfbf6 0%,#faf6ee 100%);
  border-color: #e7dcc6;
}

/* Der Gold-Schwung als Seiten-Akzent — derselbe handgezogene Pfad wie der Hero-Clou der Startseite,
   jetzt als eigene, seitenweite Klasse für EIN Akzentwort je Seitenüberschrift (h1), unabhängig vom
   Home-Hero-Markup. Sparsam: eine Klasse, ein Wort, eine Seite. */
html[data-boutique] #praxis-rivoir-design h1 .seiten-akzent {
  display: inline-block; position: relative; padding-bottom: .1em; color: var(--b-c, #564596);
}
html[data-boutique] #praxis-rivoir-design h1 .seiten-akzent::after {
  content: ""; position: absolute; left: -.02em; right: -.04em; bottom: -.02em; height: .3em;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 5, 120 5, 175 11 C 220 16, 262 12, 297 6' fill='none' stroke='%23f6b80b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .9; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boutique] #praxis-rivoir-design h1 .seiten-akzent::after {
    background-size: 0% 100%; animation: hero-schwung 900ms ease .35s forwards;
  }
}


/* EMA 01.10.2026: grossen Farbauswahl-Kreisbutton neben dem Login entfernen. */
html[data-boutique] #praxis-rivoir-design .pr-navigation .pr-nav-end > .palette-menu.identity-palette { display: none; }