/* ═══════════════════════════════════════════════════════════════════
   PRAXIS RIVOIR — Stilblatt
   Die Identität, die längst in jeder Mail, jedem Rezept und jeder
   Bescheinigung steckt: Kreis-Marke, Nebel, TELE·COMPASS·SION.

   SPIRA MAGICA: Die Farbe wandert mit dem Tag durch Goethes Kreis —
   dieselben acht wie in mail_vorlage.py, in derselben Reihenfolge.
   Schwarz und Grau bleiben draußen (EMA, 30.07.2026: „Wir wollen
   Licht bringen, wir sind das Gute"). Ohne JavaScript trägt Lila.

   Schriften: System (Futura/Avenir) — KEINE Google Fonts, DSGVO.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ FARBEN ══ */
/* ══ SPIRA MAGICA — erzeugt von farben.py, nicht von Hand ══ */
:root{--tinte:#2a3540;--tinte-70:rgba(42,53,64,.70);--tinte-45:rgba(42,53,64,.45);--grund:#fdfdfe;--flaeche:#ffffff;--schatten:0 1px 3px rgba(42,53,64,.04),0 12px 40px -20px rgba(42,53,64,.18);--breite:62rem;--akzent:#7465c0;--aktion:#7465c0;--aktion-tief:#6457a5;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(116,101,192,.16);--nebel-1:#f5f4fb;--nebel-2:#edebf7;--nebel-3:#e0ddf1;--nebel-4:#d3ceeb}
:root[data-spira="gelb"]{--akzent:#a87820;--aktion:#996d1d;--aktion-tief:#845e19;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(168,120,32,.16);--nebel-1:#f9f6ef;--nebel-2:#f4ede2;--nebel-3:#ece1ce;--nebel-4:#e3d4b8}
:root[data-spira="rot"]{--akzent:#a83850;--aktion:#a83850;--aktion-tief:#903045;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(168,56,80,.16);--nebel-1:#f9f1f3;--nebel-2:#f4e5e8;--nebel-3:#ecd3d8;--nebel-4:#e3bfc7}
:root[data-spira="gruen"]{--akzent:#386848;--aktion:#386848;--aktion-tief:#30593e;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(56,104,72,.16);--nebel-1:#f1f4f2;--nebel-2:#e5ebe7;--nebel-3:#d3ded7;--nebel-4:#bfcfc4}
:root[data-spira="blau"]{--akzent:#2848a0;--aktion:#2848a0;--aktion-tief:#223e8a;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(40,72,160,.16);--nebel-1:#f0f2f8;--nebel-2:#e3e7f3;--nebel-3:#d0d7ea;--nebel-4:#bac4e1}
:root[data-spira="orange"]{--akzent:#c06830;--aktion:#b2602c;--aktion-tief:#995326;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(192,104,48,.16);--nebel-1:#fbf4f1;--nebel-2:#f7ebe4;--nebel-3:#f1ded1;--nebel-4:#ebcfbd}
:root[data-spira="gold"]{--akzent:#96742a;--aktion:#927129;--aktion-tief:#7e6123;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(150,116,42,.16);--nebel-1:#f8f5f0;--nebel-2:#f1ede3;--nebel-3:#e8e0d0;--nebel-4:#ddd3bb}
:root[data-spira="weiss"]{--akzent:#2E4F44;--aktion:#2e4f44;--aktion-tief:#28443a;--auf-aktion:#ffffff;--glanz:rgba(255,255,255,.5);--linie:rgba(46,79,68,.16);--nebel-1:#f0f3f2;--nebel-2:#e4e8e7;--nebel-3:#d1d8d6;--nebel-4:#bcc7c3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tinte:#e8e6f0;--tinte-70:rgba(232,230,240,.74);--tinte-45:rgba(232,230,240,.48);--grund:#0f0e15;--flaeche:#181722;--schatten:0 1px 3px rgba(0,0,0,.4),0 12px 40px -20px rgba(0,0,0,.7);--akzent:#a398d7;--aktion:#8f82ce;--aktion-tief:#bdb6e2;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(163,152,215,.22);--nebel-1:#161420;--nebel-2:#1c1929;--nebel-3:#242035;--nebel-4:#2d2844}:root:not([data-theme="light"])[data-spira="gelb"]{--akzent:#ebc785;--aktion:#e6bb6a;--aktion-tief:#f0d7a8;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(235,199,133,.22);--nebel-1:#1c1819;--nebel-2:#26201c;--nebel-3:#352c21;--nebel-4:#463927}:root:not([data-theme="light"])[data-spira="rot"]{--akzent:#dd92a2;--aktion:#d67b8e;--aktion-tief:#e7b1bd;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(221,146,162,.22);--nebel-1:#1b141b;--nebel-2:#241821;--nebel-3:#321f28;--nebel-4:#412631}:root:not([data-theme="light"])[data-spira="gruen"]{--akzent:#a1ceb0;--aktion:#8dc49f;--aktion-tief:#bcdcc7;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(161,206,176,.22);--nebel-1:#16181d;--nebel-2:#1b2123;--nebel-3:#232e2c;--nebel-4:#2c3c36}:root:not([data-theme="light"])[data-spira="blau"]{--akzent:#8ba3e5;--aktion:#728fdf;--aktion-tief:#acbdec;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(139,163,229,.22);--nebel-1:#141521;--nebel-2:#181b2b;--nebel-3:#1e2339;--nebel-4:#242c48}:root:not([data-theme="light"])[data-spira="orange"]{--akzent:#e5ae8b;--aktion:#df9c72;--aktion-tief:#ecc5ac;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(229,174,139,.22);--nebel-1:#1b161a;--nebel-2:#251c1d;--nebel-3:#342623;--nebel-4:#443029}:root:not([data-theme="light"])[data-spira="gold"]{--akzent:#e2c78d;--aktion:#dcbb75;--aktion-tief:#ead7ae;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(226,199,141,.22);--nebel-1:#1b181a;--nebel-2:#25201e;--nebel-3:#332c23;--nebel-4:#43392a}:root:not([data-theme="light"])[data-spira="weiss"]{--akzent:#a4cbbe;--aktion:#90c0b0;--aktion-tief:#bedad1;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(164,203,190,.22);--nebel-1:#16181e;--nebel-2:#1c2125;--nebel-3:#242d2f;--nebel-4:#2d3a3b}}
:root[data-theme="dark"]{--tinte:#e8e6f0;--tinte-70:rgba(232,230,240,.74);--tinte-45:rgba(232,230,240,.48);--grund:#0f0e15;--flaeche:#181722;--schatten:0 1px 3px rgba(0,0,0,.4),0 12px 40px -20px rgba(0,0,0,.7);--akzent:#a398d7;--aktion:#8f82ce;--aktion-tief:#bdb6e2;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(163,152,215,.22);--nebel-1:#161420;--nebel-2:#1c1929;--nebel-3:#242035;--nebel-4:#2d2844}:root[data-theme="dark"][data-spira="gelb"]{--akzent:#ebc785;--aktion:#e6bb6a;--aktion-tief:#f0d7a8;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(235,199,133,.22);--nebel-1:#1c1819;--nebel-2:#26201c;--nebel-3:#352c21;--nebel-4:#463927}:root[data-theme="dark"][data-spira="rot"]{--akzent:#dd92a2;--aktion:#d67b8e;--aktion-tief:#e7b1bd;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(221,146,162,.22);--nebel-1:#1b141b;--nebel-2:#241821;--nebel-3:#321f28;--nebel-4:#412631}:root[data-theme="dark"][data-spira="gruen"]{--akzent:#a1ceb0;--aktion:#8dc49f;--aktion-tief:#bcdcc7;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(161,206,176,.22);--nebel-1:#16181d;--nebel-2:#1b2123;--nebel-3:#232e2c;--nebel-4:#2c3c36}:root[data-theme="dark"][data-spira="blau"]{--akzent:#8ba3e5;--aktion:#728fdf;--aktion-tief:#acbdec;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(139,163,229,.22);--nebel-1:#141521;--nebel-2:#181b2b;--nebel-3:#1e2339;--nebel-4:#242c48}:root[data-theme="dark"][data-spira="orange"]{--akzent:#e5ae8b;--aktion:#df9c72;--aktion-tief:#ecc5ac;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(229,174,139,.22);--nebel-1:#1b161a;--nebel-2:#251c1d;--nebel-3:#342623;--nebel-4:#443029}:root[data-theme="dark"][data-spira="gold"]{--akzent:#e2c78d;--aktion:#dcbb75;--aktion-tief:#ead7ae;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(226,199,141,.22);--nebel-1:#1b181a;--nebel-2:#25201e;--nebel-3:#332c23;--nebel-4:#43392a}:root[data-theme="dark"][data-spira="weiss"]{--akzent:#a4cbbe;--aktion:#90c0b0;--aktion-tief:#bedad1;--auf-aktion:#0f0e15;--glanz:rgba(255,255,255,.055);--linie:rgba(164,203,190,.22);--nebel-1:#16181e;--nebel-2:#1c2125;--nebel-3:#242d2f;--nebel-4:#2d3a3b}
/* ══ ENDE FARBEN ══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Futura,"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--grund); color:var(--tinte);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--aktion); outline-offset:3px; border-radius:3px}

/* ── Kopf ──────────────────────────────────────────── */
.kopf{
  background:
    radial-gradient(ellipse 70% 60% at 50% 8%, var(--glanz) 0%, transparent 62%),
    linear-gradient(150deg,var(--nebel-1) 0%,var(--nebel-2) 32%,var(--nebel-3) 68%,var(--nebel-4) 100%);
  padding:clamp(3.5rem,9vw,6.5rem) 1.5rem clamp(3rem,7vw,5rem);
  text-align:center; border-bottom:1px solid var(--linie);
}
.kopf.schmal{padding:clamp(2.5rem,6vw,4rem) 1.5rem clamp(2rem,4vw,2.8rem)}
.marke{
  display:inline-flex;flex-direction:column;align-items:center;gap:.85rem;
  text-decoration:none;margin-bottom:1.6rem;
}
.ring{
  width:36px;height:36px;border-radius:50%;border:2px solid var(--akzent);
  display:flex;align-items:center;justify-content:center;
}
.ring span{width:8px;height:8px;border-radius:50%;background:var(--akzent)}
.wortmarke{
  font-size:.95rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;
  color:var(--tinte);margin-right:-5px;
}
.subline{
  font-size:.6rem;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--tinte-45);margin-right:-2.5px;
}
h1{
  font-size:clamp(1.15rem,3.4vw,1.5rem); font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; text-wrap:balance;
  margin-right:-.34em;
}
.kopf.schmal h1{font-size:clamp(1rem,2.6vw,1.2rem);letter-spacing:.2em;margin-right:-.2em}
.unterzeile{
  font-size:clamp(.62rem,1.7vw,.72rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinte-45); margin-top:.75rem; margin-right:-.2em;
}
.leitsatz{
  max-width:33ch; margin:2.2rem auto 0;
  font-size:clamp(1.05rem,2.6vw,1.3rem); line-height:1.6;
  color:var(--tinte-70); text-wrap:balance;
}
.zurueck{
  display:inline-block;margin-top:1.4rem;font-size:.84rem;color:var(--tinte-70);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.zurueck:hover{border-bottom-color:var(--aktion)}

/* ── Inhalt ────────────────────────────────────────── */
main{max-width:var(--breite);margin:0 auto;padding:clamp(3rem,7vw,5rem) 1.5rem}
section+section{margin-top:clamp(3rem,7vw,5rem)}
h2{
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:1.5rem;margin-right:-.24em;
}

.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.feld{background:var(--flaeche);padding:1.75rem 1.6rem}
.feld h3{font-size:1.02rem;font-weight:600;margin-bottom:.5rem}
.feld p{font-size:.92rem;color:var(--tinte-70)}

.person{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;
  padding:1.9rem 1.8rem;box-shadow:var(--schatten);
}
.siegel{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--akzent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.siegel span{width:9px;height:9px;border-radius:50%;background:var(--akzent)}
.person h3{font-size:1.14rem;font-weight:600}
.person .rolle{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte-45);margin:.2rem 0 .9rem}
.person p{font-size:.94rem;color:var(--tinte-70);max-width:52ch}

.kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem}
.zeile{border-top:1px solid var(--linie);padding-top:1rem}
.zeile .art{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-45);margin-bottom:.35rem;margin-right:-.16em}
.zeile a,.zeile .wert{font-size:1rem;text-decoration:none;color:var(--tinte);
  border-bottom:1px solid transparent;transition:border-color .18s ease}
.zeile a:hover{border-bottom-color:var(--aktion)}
.zeile .zusatz{display:block;font-size:.82rem;color:var(--tinte-45);margin-top:.3rem}

.knopf{
  display:inline-block;margin-top:2rem;background:var(--aktion);color:var(--auf-aktion);
  text-decoration:none;font-size:.95rem;font-weight:600;letter-spacing:.03em;
  padding:.85rem 2.1rem;border-radius:9px;transition:background .18s ease;
}
.knopf:hover{background:var(--aktion-tief);color:var(--auf-aktion)}

.hinweis{
  font-size:.86rem;color:var(--tinte-70);background:var(--flaeche);
  border:1px solid var(--linie);border-left:3px solid var(--akzent);
  border-radius:0 12px 12px 0;padding:1.15rem 1.4rem;max-width:56ch;
}

/* ── Rechtstexte ───────────────────────────────────── */
.recht{max-width:44rem}
.recht h2{margin-top:2.6rem}
.recht h2:first-child{margin-top:0}
.recht p{font-size:.94rem;color:var(--tinte-70);margin-bottom:1rem;max-width:68ch}
.recht ul{margin:0 0 1rem 1.2rem;color:var(--tinte-70);font-size:.94rem}
.recht li{margin-bottom:.3rem}
.recht .block{font-size:.94rem;line-height:1.9;color:var(--tinte);margin-bottom:1rem}
.recht .block b{font-weight:600}
.recht a{color:var(--akzent);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .18s ease}
.recht a:hover{border-bottom-color:var(--akzent)}
.trenner{border:none;border-top:1px solid var(--linie);margin:2.6rem 0}

/* ── Fuß ───────────────────────────────────────────── */
.fuss{
  background:
    radial-gradient(ellipse 60% 70% at 50% 60%, var(--glanz) 0%, transparent 60%),
    linear-gradient(150deg,var(--nebel-4) 0%,var(--nebel-3) 34%,var(--nebel-2) 70%,var(--nebel-1) 100%);
  border-top:1px solid var(--linie);
  padding:clamp(2.5rem,6vw,3.5rem) 1.5rem;text-align:center;
}
.rechtlich{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.rechtlich a{font-size:.86rem;text-decoration:none;color:var(--tinte-70);
  border-bottom:1px solid transparent;transition:border-color .18s ease}
.rechtlich a:hover{border-bottom-color:var(--aktion)}
.anschrift{font-size:.82rem;color:var(--tinte-45);line-height:1.8}
.signatur{font-size:.6rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--tinte-45);margin-top:2rem;margin-right:-.34em}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Nur für Screenreader — die sichtbare Wortmarke trägt die Marke,
   die Überschrift trägt die Bedeutung. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Navigation ────────────────────────────────────── */
.navi{
  display:flex;gap:.4rem 1.7rem;justify-content:center;flex-wrap:wrap;
  margin-top:2.2rem;
}
.navi a{
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--tinte-70);padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.navi a:hover{border-bottom-color:var(--aktion);color:var(--tinte)}
.navi a[aria-current]{color:var(--akzent);border-bottom-color:var(--akzent)}

/* ── Leistungen mit Preis ──────────────────────────── */
.leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.2rem}
/* Vier Angebote setzen wir 2×2 — sonst steht das letzte allein in der Reihe. */
.leistungen.vier{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}
.leistung{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;
  padding:1.8rem 1.7rem;display:flex;flex-direction:column;
}
.leistung.kern{border-color:var(--akzent);box-shadow:var(--schatten)}
.leistung .marke-kern{
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:.7rem;margin-right:-.18em;
}
.leistung h3{font-size:1.06rem;font-weight:600;margin-bottom:.35rem}
.leistung .preis{
  font-size:1.5rem;font-weight:700;color:var(--akzent);
  font-variant-numeric:tabular-nums;margin:.7rem 0 .2rem;
}
.leistung .bedingung{font-size:.78rem;color:var(--tinte-45);margin-bottom:1.1rem}
.leistung ul{list-style:none;margin:0 0 1.4rem;font-size:.88rem;color:var(--tinte-70)}
.leistung li{padding-left:1.25rem;position:relative;margin-bottom:.45rem}
.leistung li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--akzent);opacity:.5;
}
.leistung .knopf{margin-top:auto;align-self:flex-start;padding:.7rem 1.5rem;font-size:.88rem}

/* ── Fließtext-Abschnitt ───────────────────────────── */
.text{max-width:60ch}
.text p{font-size:1rem;color:var(--tinte-70);margin-bottom:1.1rem}
.text p b{color:var(--tinte);font-weight:600}
.text .gross{font-size:1.14rem;color:var(--tinte);text-wrap:pretty}
.zitat{
  font-size:1.22rem;line-height:1.55;color:var(--tinte);max-width:34ch;
  border-left:2px solid var(--akzent);padding-left:1.4rem;margin:2.2rem 0;
  text-wrap:balance;
}