/* raav.io — Seiten-Stylesheet · Stand 2026-10-15 (D3 Nachtrag 3: Scheine am Handy enger; Nachtrag 2: iPhone-Höhenregel nur noch an html; Nachtrag 1: Kartentitel in Markenschreibweise; Stufe D3: Marke 2.4 — Schriftzug quer im Kopf, weiße Bildmarke im Band, 404-Seite, Safari-Clip am body; D2.3: Tiefe am Handy — Bild -t, Schleier nur unter Text, dünnes Glas, Fuß als Band; D2.2: Desktop-Aufwertung; D2.1: Schleier ohne Kanten, Partikel ohne Ringe)
   Farben, Schrift, Bausteine: raav-farbwelt.css Fassung 2 (byte-gleiche Kopie von RAAVio/_Design/ — Regeln in raav-farbwelt.md).
   Hier nur das Layout: Hub (body.hub), Rechtsseiten (body.rechtsseite) und 404 (body.fehlerseite). Schichten von hinten nach vorn:
   Bild (.rv-bild, Parallaxe per assets/raav-io.js) → Partikel (.fx-back, drei Schärfen) → Lichthof → Inhalt (Glas). Handy zuerst. */

/* ---------- Gemeinsam ---------- */
html{height:100%;scroll-padding-top:5rem;overflow-x:clip}  /* Schleier und Lichthof ragen über den Rand: abschneiden, nie waagerecht scrollen */
body{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom,0px)}
@supports (overflow:clip){body{overflow-x:clip}}  /* D3: clip statt hidden — hidden machte den body zum Scroll-Container (Kopf der Rechtsseiten klebte nicht, Safari hakt beim Richtungswechsel; Befund academy A3/SC1b). Nicht zurückstellen. */
@supports (-webkit-touch-callout:none){html{height:-webkit-fill-available}}  /* nur iPhone/iPad. D3 Nachtrag 2: NICHT mehr am body — seit body{overflow-x:clip} scrollt die Seite statt des body; ein body mit fester Bildschirmhöhe ließ Fuß und klebenden Kopf außerhalb seines Kastens liegen (Safari zeichnete den Fuß nicht, Klicks gingen). */

/* Verlaufstext (background-clip:text): Innenabstand oben/unten in em mit gleich großem negativem Außenabstand — Unter- und Oberlängen liegen im Verlauf, Lage unverändert (D2.2, Dauer-Gate B1) */
/* Marke (D3, Farbwelt 2.4): Dachmarke „RAAV®“ quer als SVG (assets/marke/raav_quer_hell.svg, byte-gleich aus RAAVio/_Design/marke/, Regeln MARKE.md).
   Die Kugel ist 0,949 der Bildhöhe: 36 px Bild = Kugel 34 px (Handy), 42 px = Kugel 40 px (ab 768 px). Breite folgt aus width/height im HTML. */
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--titel);transition:transform var(--tempo)}
.logo-marke{display:block;height:36px;width:auto;flex:none}
@media (hover:hover) and (pointer:fine){.logo:hover{transform:translateY(-1px)}}

/* Bildschicht: fix, Parallaxe nur per transform (raav-io.js), Schleier aus raav-farbwelt.css */
.rv-bild picture{display:contents}
/* Handy (< 700 px): eigener Hochformat-Ausschnitt wirbelsaeule-modell-hoch — Säule links der Mitte, Wirbel als Form lesbar */
@media (max-width:700px){.hub .rv-bild img{object-position:30% 50%}.hub{--glas-blur:8px}}  /* Glas am Telefon weniger weich: die Wirbel bleiben hinter Chat und Türen als Form lesbar */

/* Lichtpartikel: drei Schärfen (nah scharf, mittel weich, fern weicher), Positionen über die ganze Fläche; Leuchthof als radialer Verlauf, keine Ringe */
.fx-back{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.fx-pt{position:absolute;border-radius:50%;background:var(--gold);opacity:0;width:4px;height:4px}
.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%)}
.fx-pt.nah{width:6px;height:6px}
.fx-pt.nah::before{inset:-32px}
.fx-pt.mittel{filter:blur(1px)}
.fx-pt.fern{width:3px;height:3px;filter:blur(2.5px)}
.fx-pt.fern::before{inset:-18px}
.fx-pt.p1{left:18%;top:28%;animation:rv-fl1 15s ease-in-out infinite}
.fx-pt.p2{left:78%;top:24%;animation:rv-fl2 19s ease-in-out 2s infinite}
.fx-pt.p3{left:62%;top:64%;animation:rv-fl3 17s ease-in-out 5s infinite}
.fx-pt.p4{left:32%;top:72%;animation:rv-fl1 21s ease-in-out 7s infinite}
.fx-pt.p5{left:10%;top:56%;animation:rv-fl2 13s ease-in-out 1s infinite}
.fx-pt.p6{left:88%;top:76%;animation:rv-fl3 23s ease-in-out 9s infinite}
.fx-pt.p7{left:46%;top:16%;animation:rv-fl2 18s ease-in-out 4s infinite}
.fx-pt.p8{left:70%;top:44%;animation:rv-fl1 16s ease-in-out 11s infinite}
.fx-pt.p9{left:24%;top:46%;animation:rv-fl3 20s ease-in-out 6s infinite}

/* Fuß: das Praxisband (289°-Verlauf) als Grund der Seite, goldene Haarlinie als Kante */
.footer,.rechtsseite footer{position:relative;margin-top:auto;width:100%;background:var(--band);color:#fff}
.footer::before,.rechtsseite footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(280px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---------- Hub (index.html) ---------- */
.hub .page{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 20px 48px}
/* D3, Gate „frei“: nur die Inhalte fangen Klicks — der leere Innenabstand von .page lag über den oberen 8 px der Fuß-Links, der Schleier-Kasten des
   Trenners (44 px Polster nach oben) über dem unteren Rand von Eingabefeld und Senden-Knopf. Sichtbar ändert sich nichts. */
.hub .page{pointer-events:none}.hub .page>*{pointer-events:auto}.hub .page>.divider{pointer-events:none}
.hub .licht{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:min(960px,150vw);height:640px;background:radial-gradient(ellipse 55% 50% at 50% 42%,rgba(232,168,76,.16) 0%,rgba(232,168,76,.07) 38%,rgba(232,168,76,0) 70%);pointer-events:none;z-index:0}
.hub .logo{margin-bottom:40px;position:relative}
.hub .logo::before{content:"";position:absolute;inset:-115% -62%;z-index:-1;background:radial-gradient(closest-side,rgba(247,244,238,0.92) 0%,rgba(247,244,238,0.892) 40%,rgba(247,244,238,0.773) 55%,rgba(247,244,238,0.552) 68%,rgba(247,244,238,0.304) 79%,rgba(247,244,238,0.11) 88%,rgba(247,244,238,0.028) 95%,rgba(247,244,238,0.0) 100%);pointer-events:none}
.hub .logo::after{content:"";position:absolute;left:50%;bottom:-34px;width:1px;height:24px;background:linear-gradient(var(--gold-symbol),rgba(232,168,76,0))}

/* Kopf: Logo und Überschrift klar vor dem Bild — radialer Leinen-Schleier hält den Kontrast; jeder Schleier endet INNERHALB seines Kastens (closest-side) */
.hero{text-align:center;max-width:640px;margin-bottom:34px;position:relative}
.hero::before{content:"";position:absolute;inset:-46% -32%;z-index:-1;background:radial-gradient(closest-side,rgba(247,244,238,0.94) 0%,rgba(247,244,238,0.912) 40%,rgba(247,244,238,0.79) 55%,rgba(247,244,238,0.564) 68%,rgba(247,244,238,0.31) 79%,rgba(247,244,238,0.113) 88%,rgba(247,244,238,0.028) 95%,rgba(247,244,238,0.0) 100%);pointer-events:none}
.title{font-size:clamp(40px,11vw,52px);font-weight:700;letter-spacing:-.015em;line-height:1.02;margin:0 0 16px;color:var(--titel)}
.title-white{display:block;color:var(--titel)}
.title-gradient{display:block;padding:.1em 0 .26em;margin:-.1em 0 -.26em;color:var(--blau);background:var(--band);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:17px;color:var(--text-lauf);line-height:1.5;margin:0}
.subtitle strong{color:var(--titel);font-weight:700}
.trust-line{font-size:13.5px;color:var(--text-lauf);margin:14px 0 0;letter-spacing:.01em}

/* Chat: das Werkzeug als Glas-Fläche — Band-Kante oben als Etikett, Werkzeug spricht in Bone, der Mensch in Blau, ruhige Eingabe auf dichtem Glas */
.chat-container{width:100%;max-width:520px;margin-bottom:40px}
.chat-box{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);overflow:hidden}
.chat-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--band);z-index:3}
.chat-messages{height:240px;overflow-y:auto;overflow-x:hidden;padding:24px 16px 22px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(227,221,210,.9) transparent}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(227,221,210,.9);border-radius:3px}
.chat-msg{max-width:85%;padding:12px 16px;border-radius:var(--r-blase);font-size:15px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;animation:msg-in .3s ease}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.bot{align-self:flex-start;color:var(--text);background:rgba(239,232,220,.92);border-bottom-left-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.chat-msg.user{align-self:flex-end;color:#fff;font-weight:500;background:var(--blau);box-shadow:var(--knopf-schatten);border-bottom-right-radius:4px}
.chat-msg a{color:var(--blau);text-decoration:none;border-bottom:1px solid rgba(0,0,175,.4)}
.chat-msg a:hover{border-bottom-color:var(--blau)}
.chat-msg.user a{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.chat-cursor{display:inline-block;width:2px;height:1.1em;background:var(--blau);margin-left:2px;animation:blink .8s infinite;vertical-align:text-bottom}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.chat-input-area{padding:12px;background:var(--glas-dicht);border-top:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 var(--glas-licht);position:relative;z-index:2}
.chat-input-row{display:flex;gap:10px;align-items:center}
.chat-input{flex:1;min-width:0;min-height:46px;padding:11px 14px;font:inherit;font-size:16px;font-weight:500;color:var(--text);background:rgba(255,253,249,.88);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-glas-klein);-webkit-appearance:none;appearance:none;outline:none;box-shadow:inset 0 1px 2px rgba(0,20,58,.05);transition:border-color var(--tempo),box-shadow var(--tempo),background-color var(--tempo)}
.chat-input::placeholder{color:var(--text-hell);font-weight:400}
.chat-input:focus{background:var(--karte);border-color:var(--blau);box-shadow:0 0 0 3px var(--blau-ring)}
.chat-send{width:46px;height:46px;flex-shrink:0;border:0;border-radius:var(--r-glas-klein);background:var(--blau);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--knopf-schatten),inset 0 1px 0 rgba(255,255,255,.28);-webkit-appearance:none;appearance:none;transition:background-color var(--tempo),transform var(--tempo)}
.chat-send:active{transform:translateY(1px)}
.chat-send:disabled{opacity:.5;cursor:not-allowed;transform:none}
.chat-send svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.chat-send:hover{background:var(--blau-hover);transform:translateY(-1px)}}
.trust-note{position:absolute;bottom:12px;left:16px;right:16px;text-align:center;font-size:12.5px;font-weight:500;color:var(--text-hell);pointer-events:none;transition:opacity .6s ease}
.trust-note.trust-note-hidden{opacity:0}

/* Trenner: Goldfaden nach außen auslaufend; Schleier in einem um 44 px erhöhten Kasten (Polster oben/unten, Außenabstände gleichen aus — Lage unverändert) */
.divider{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;margin-bottom:26px;color:var(--text-hell);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:44px 0;margin-top:-44px;margin-bottom:-18px;background:radial-gradient(closest-side,rgba(247,244,238,0.88) 0%,rgba(247,244,238,0.854) 40%,rgba(247,244,238,0.739) 55%,rgba(247,244,238,0.528) 68%,rgba(247,244,238,0.29) 79%,rgba(247,244,238,0.106) 88%,rgba(247,244,238,0.026) 95%,rgba(247,244,238,0.0) 100%)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* Die vier Türen: Glas-Flächen, Symbolscheibe in Bone, Symbol in Gold; Berührung/Hover hebt leicht an, goldener Rand, Goldhauch */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:520px}
.cards .card{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);padding:20px 12px 18px;text-align:center;text-decoration:none;box-shadow:inset 0 1px 0 var(--glas-licht),var(--glas-schatten);transition:transform var(--tempo),box-shadow var(--tempo),border-color var(--tempo)}
.cards .card-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:rgba(239,232,220,.85);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transition:background-color var(--tempo),border-color var(--tempo)}
.cards .card-icon svg{width:22px;height:22px;stroke:var(--gold-symbol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cards .card-title{font-size:15px;font-weight:700;color:var(--titel);margin-bottom:3px}
/* D3 Nachtrag 1: Kartentitel in der Markenschreibweise (MARKE.md, Schriftzug quer): „RAAV“ fett, Bereich dünn, gesperrt, in Großbuchstaben per CSS —
   im HTML steht weiter „RAAV Scan“ usw. (Wortlaut und Screenreader unverändert); kein ® auf den Karten. „3D-Atlas“ wird nie getrennt. */
.ct-raav{font-weight:700;letter-spacing:.04em}
.ct-tuer{font-weight:400;text-transform:uppercase;letter-spacing:.24em;margin-right:-.24em;color:#3a3a3a}
.nb{white-space:nowrap}
.cards .card-sub{font-size:12.5px;color:var(--text-hell);font-weight:500;line-height:1.35}
.cards .card:focus-visible{outline-offset:3px}
.cards .card:active{transform:translateY(-1px)}
@media (hover:hover) and (pointer:fine){
  .cards .card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 var(--glas-licht),var(--glas-schatten-hoch);border-color:rgba(232,168,76,.65)}
  .cards .card:hover .card-icon{background:var(--gold-hauch);border-color:var(--gold)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chat-box,.cards .card{background:rgba(255,253,249,.93)}
  .chat-input-area{background:rgba(255,253,249,.97)}
}
/* Icon-Mikroanimationen (Hover): Module booten, Herz schlägt, Hut hebt ab — unverändert seit 11.07.2026 */
.cards .card svg rect,.cards .card svg path{transform-box:fill-box;transform-origin:center}
/* Ambient-Loop (Mobile-first, Fireflies-Prinzip): selten, kurz, unsynchronisiert — Hover überschreibt */
.cards .card:nth-child(1) svg rect{animation:boot-loop 5.5s ease-in-out infinite}
.cards .card:nth-child(1) svg rect:nth-of-type(2){animation-delay:.1s}
.cards .card:nth-child(1) svg rect:nth-of-type(4){animation-delay:.2s}
.cards .card:nth-child(1) svg rect:nth-of-type(3){animation-delay:.3s}
@keyframes boot-loop{0%,86%{opacity:1}88%{opacity:.2}96%,100%{opacity:1}}
.cards .card:nth-child(2) svg path:first-of-type{animation:beat-loop 4.5s ease-in-out 1.2s infinite}
@keyframes beat-loop{0%,3%{transform:scale(1)}6%{transform:scale(1.28)}9%{transform:scale(1)}12%{transform:scale(1.18)}16%,100%{transform:scale(1)}}
.cards .card:nth-child(3) svg path:first-of-type{animation:lift-loop 5s ease 2.8s infinite}
@keyframes lift-loop{0%{transform:translateY(0) rotate(0deg)}5%{transform:translateY(-2.8px) rotate(-8deg)}11%,100%{transform:translateY(0) rotate(0deg)}}
.cards .card:nth-child(1):hover svg rect{animation:boot .5s ease both}
.cards .card:nth-child(1):hover svg rect:nth-of-type(2){animation-delay:.1s}
.cards .card:nth-child(1):hover svg rect:nth-of-type(4){animation-delay:.2s}
.cards .card:nth-child(1):hover svg rect:nth-of-type(3){animation-delay:.3s}
@keyframes boot{0%{opacity:.2}100%{opacity:1}}
.cards .card:nth-child(2):hover svg path:first-of-type{animation:beat 1.1s ease-in-out}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.28)}40%{transform:scale(1)}60%{transform:scale(1.18)}80%{transform:scale(1)}}
.cards .card:nth-child(3):hover svg path:first-of-type{animation:lift .9s ease}
@keyframes lift{0%,100%{transform:translateY(0) rotate(0deg)}40%{transform:translateY(-2.8px) rotate(-8deg)}}
/* Karte 4 (Anatomy): Wirbel leuchten als Welle top->bottom auf — eigene Keyframes, phasenversetzt zu den anderen drei */
.cards .card:nth-child(4) svg rect{animation:spine-loop 5.2s ease-in-out infinite}
.cards .card:nth-child(4) svg rect:nth-of-type(1){animation-delay:3.6s}
.cards .card:nth-child(4) svg rect:nth-of-type(2){animation-delay:3.75s}
.cards .card:nth-child(4) svg rect:nth-of-type(3){animation-delay:3.9s}
.cards .card:nth-child(4) svg rect:nth-of-type(4){animation-delay:4.05s}
.cards .card:nth-child(4) svg rect:nth-of-type(5){animation-delay:4.2s}
@keyframes spine-loop{0%,88%{opacity:1}92%{opacity:.25}98%,100%{opacity:1}}
.cards .card:nth-child(4):hover svg rect{animation:spine .6s ease both}
.cards .card:nth-child(4):hover svg rect:nth-of-type(1){animation-delay:0s}
.cards .card:nth-child(4):hover svg rect:nth-of-type(2){animation-delay:.08s}
.cards .card:nth-child(4):hover svg rect:nth-of-type(3){animation-delay:.16s}
.cards .card:nth-child(4):hover svg rect:nth-of-type(4){animation-delay:.24s}
.cards .card:nth-child(4):hover svg rect:nth-of-type(5){animation-delay:.32s}
@keyframes spine{0%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}

/* Fuß des Hubs */
.footer{z-index:1;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px}
.footer a{font-size:13.5px;font-weight:500;color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-8px -4px;transition:text-decoration-color var(--tempo)}
.footer a:hover{text-decoration:underline;text-underline-offset:.2em}
.footer a:focus-visible{outline-color:#fff}
.footer-mark{width:100%;text-align:center;font-size:12.5px;font-weight:400;color:#d5dcf0;letter-spacing:.01em}

/* Handy: schmale Geräte, hohe Telefone, weniger Partikel */
@media (max-width:429px){
  .cards{grid-template-columns:1fr;gap:10px}
  .cards .card{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px 12px 12px;min-height:72px}
  .cards .card-icon{margin:0;width:46px;height:46px;flex:none}
  .cards .card-title{margin-bottom:2px}
}
@media (max-width:380px){.title{font-size:36px}.chat-messages{height:220px}}
@media (max-width:600px) and (min-height:750px){
  .hub .page{padding-top:44px}
  .hub .logo{margin-bottom:48px}
  .hero{margin-bottom:36px}
  .chat-messages{height:300px}
  .chat-container{margin-bottom:44px}
  .divider{margin-bottom:-12px}
}
@media (max-width:700px){.fx-pt.fern,.fx-pt.p4,.fx-pt.p6{display:none}}

/* Tablet und Desktop */
@media (min-width:768px){
  .hub .page{padding:56px 32px 72px}
  .hub .logo{margin-bottom:54px}
  .logo-marke{height:42px}
  .hero{margin-bottom:40px}
  .title{font-size:clamp(56px,7vw,82px);margin-bottom:18px}
  .subtitle{font-size:19px}
  .trust-line{font-size:14px;margin-top:16px}
  .chat-container{margin-bottom:44px}
  .chat-messages{height:280px;padding:26px 20px 24px}
  .chat-input-area{padding:14px 16px 16px}
  .divider{margin-bottom:-14px}
  .cards{gap:16px}
  .cards .card{padding:24px 16px 22px}
  .footer{padding:26px 32px calc(26px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:960px){
  .cards{grid-template-columns:repeat(4,1fr);max-width:900px}
  .divider{max-width:560px}
}

/* ---------- Startseite am Desktop (D2.2 Teil C, ab 1024 px; unter 1024 px unverändert) ----------
   Raum: Wirbelsäule als Motiv im linken Drittel (eigener Ausschnitt -k, mehr Kontrast), Inhalt in der rechten Spalte, großzügige Überschrift
   mit hellem Schein (Licht), Fuß als auslaufendes Band (wie raav-therapie.de .band), Glühwürmchen nur im Randbereich mit Tiefenstaffel.
   Stärke des Hintergrunds: --k-staerke (gilt auch am Handy, s. oben). Band-Zeichen: weiße Bildmarke, ausgestanzt (D3; der Umschalter .zeichen-wirbel ist entfallen). */
/* Hintergrund-Stärke (D2.2 + Nachtrag 1): eine Variable für Handy und Desktop — 1 = mittel (Vorgabe), 2 = kräftig (0 = Datei -k ohne Verstärkung) */
.hub{--k-staerke:1;--bild-schleier-oben:rgba(247,244,238,.1);--bild-schleier-mitte:rgba(247,244,238,.24)}  /* Startseite: Bildschleier gelockert (Nachtrag 1) — Tiefe zwischen den Inhalten, Text bleibt auf Kopf-Schleier und Glas */
.hub .rv-bild img{filter:contrast(calc(1 + .14*var(--k-staerke))) brightness(calc(1 - .05*var(--k-staerke)))}
.hub .rv-bild::after{background:linear-gradient(180deg,var(--bild-schleier-oben) 0%,var(--bild-schleier-mitte) 50%,rgba(247,244,238,.42) 100%)}  /* Startseite: unten nicht mehr deckend Leinen — das Bild trägt bis zum Fuß */
.band-zeichen{display:none}
.fx-pt.p10,.fx-pt.p11,.fx-pt.p12{display:none}
@media (min-width:1024px){
  .hub{--glas-blur:12px;--glas:rgba(255,253,249,.66)}
  .hub .rv-bild img{object-position:0% 50%}
  .hub .rv-bild::after{background:linear-gradient(90deg,rgba(247,244,238,0) 0%,rgba(247,244,238,0) 30%,rgba(247,244,238,.28) 52%,rgba(247,244,238,.46) 100%),linear-gradient(180deg,rgba(247,244,238,.06) 0%,rgba(247,244,238,.1) 60%,rgba(247,244,238,.16) 100%)}
  .hub .licht{left:auto;right:-6vw;transform:none;top:-120px;width:min(1100px,70vw)}
  .hub .page{align-items:flex-start;padding:40px max(56px,6vw) 230px calc(37vw + 24px)}
  .hub .logo{margin-bottom:30px}
  .hub .logo::after{left:20.5px;bottom:-26px;height:18px}  /* Goldfaden unter der Kugelmitte (21 px) */
  .hero{text-align:left;max-width:760px;margin-bottom:26px}
  .hero::before{inset:-52% -22% -48% -26%;background:radial-gradient(closest-side,rgba(255,253,249,0.97) 0%,rgba(255,253,249,0.941) 40%,rgba(255,253,249,0.815) 55%,rgba(255,253,249,0.582) 68%,rgba(255,253,249,0.32) 79%,rgba(255,253,249,0.116) 88%,rgba(255,253,249,0.029) 95%,rgba(255,253,249,0.0) 100%)}
  .title{font-size:clamp(68px,6.2vw,94px);margin-bottom:16px}
  .subtitle{font-size:21px}
  .trust-line{font-size:15px;margin-top:10px}
  .chat-container{max-width:640px;margin-bottom:20px}
  .chat-messages{height:150px;padding:20px 20px 30px}
  .divider{max-width:640px;margin-bottom:-30px}
  .cards{grid-template-columns:repeat(2,1fr);max-width:640px;gap:14px}
  /* Fuß: auslaufendes Band — von unten Volltonblau nach oben transparent, Bildschicht läuft darunter durch; liegt hinter dem Inhalt */
  .footer{z-index:0;margin-top:-260px;padding:260px 32px calc(28px + env(safe-area-inset-bottom,0px)) calc(37vw + 24px);justify-content:flex-start;background:linear-gradient(to top,var(--band-b) 0%,rgba(0,32,88,.96) 26%,rgba(0,32,88,.72) 55%,rgba(0,32,88,.3) 80%,rgba(0,32,88,0) 100%)}
  .footer::before{display:none}
  .footer-mark{text-align:left}
  .band-zeichen{display:block;position:absolute;left:max(56px,6vw);bottom:30px;width:52px;height:52px;background:url("/assets/marke/raav-bildmarke_weiss.svg") center/contain no-repeat}
  /* Glühwürmchen: zwölf, nur links über der Säule und am rechten Rand (nie hinter Text); Größe, Helligkeit, Tempo verschieden;
     Schweben (transform) und Glimmen (opacity) als zwei Animationen; Tiefenstaffel per translate aus raav-io.js */
  .fx-pt.p10,.fx-pt.p11,.fx-pt.p12{display:block}
  .fx-pt{--hell:.6}
  .fx-pt.p1{left:6%;top:18%;--hell:.7;animation:rv-schweb1 47s ease-in-out infinite,rv-glimm 11s ease-in-out infinite}
  .fx-pt.p2{left:22%;top:9%;--hell:.45;animation:rv-schweb2 53s ease-in-out -9s infinite,rv-glimm 13s ease-in-out -3s infinite}
  .fx-pt.p3{left:31%;top:34%;--hell:.4;animation:rv-schweb3 61s ease-in-out -20s infinite,rv-glimm 9s ease-in-out -6s infinite}
  .fx-pt.p4{left:12%;top:47%;--hell:.55;animation:rv-schweb2 44s ease-in-out -14s infinite,rv-glimm 12s ease-in-out -1s infinite}
  .fx-pt.p5{left:27%;top:63%;--hell:.75;animation:rv-schweb1 39s ease-in-out -5s infinite,rv-glimm 8s ease-in-out -4s infinite}
  .fx-pt.p6{left:4%;top:78%;--hell:.4;animation:rv-schweb3 57s ease-in-out -33s infinite,rv-glimm 14s ease-in-out -8s infinite}
  .fx-pt.p7{left:17%;top:30%;--hell:.35;animation:rv-schweb1 66s ease-in-out -41s infinite,rv-glimm 10s ease-in-out -2s infinite}
  .fx-pt.p8{left:96%;top:22%;--hell:.5;animation:rv-schweb2 49s ease-in-out -27s infinite,rv-glimm 12s ease-in-out -7s infinite}
  .fx-pt.p9{left:33%;top:84%;--hell:.65;animation:rv-schweb3 43s ease-in-out -11s infinite,rv-glimm 9s ease-in-out -5s infinite}
  .fx-pt.p10{left:9%;top:62%;--hell:.35;animation:rv-schweb2 71s ease-in-out -50s infinite,rv-glimm 15s ease-in-out -9s infinite}
  .fx-pt.p11{left:97%;top:58%;--hell:.45;animation:rv-schweb1 52s ease-in-out -18s infinite,rv-glimm 11s ease-in-out -6s infinite}
  .fx-pt.p12{left:24%;top:24%;--hell:.3;animation:rv-schweb3 64s ease-in-out -37s infinite,rv-glimm 13s ease-in-out -10s infinite}
  .fx-pt.nah{width:7px;height:7px}
  .fx-pt.fern{width:2.5px;height:2.5px}
}
@media (min-width:1024px) and (max-height:860px){
  .hub .page{padding-top:26px}
  .hub .logo{margin-bottom:22px}
  .title{font-size:clamp(60px,5.6vw,84px);margin-bottom:12px}
  .hero{margin-bottom:20px}
  .chat-messages{height:112px;padding-top:16px}
  .chat-container{margin-bottom:16px}
}
/* D3, Gate „frei“: niedrige Desktop-Fenster (z. B. 1280 × 720) — Überschrift und Chat etwas kleiner, damit die vier Türen ohne Scrollen ganz sichtbar sind */
@media (min-width:1024px) and (max-height:760px){
  .hub .logo{margin-bottom:16px}
  .title{font-size:clamp(56px,5vw,76px)}
  .hero{margin-bottom:14px}
  .chat-messages{height:100px}
}
@media (min-width:1280px){
  .chat-container,.divider{max-width:760px}
  .cards{grid-template-columns:repeat(4,1fr);max-width:760px}
  .cards .card{padding:20px 12px 18px}
}
@keyframes rv-schweb1{0%,100%{transform:translate(0,0)}17%{transform:translate(14px,-22px)}38%{transform:translate(-9px,-47px)}55%{transform:translate(21px,-61px)}74%{transform:translate(6px,-29px)}88%{transform:translate(-12px,-8px)}}
@keyframes rv-schweb2{0%,100%{transform:translate(0,0)}22%{transform:translate(-18px,-15px)}41%{transform:translate(-6px,-39px)}63%{transform:translate(-27px,-52px)}81%{transform:translate(-10px,-20px)}}
@keyframes rv-schweb3{0%,100%{transform:translate(0,0)}13%{transform:translate(9px,-12px)}34%{transform:translate(25px,-30px)}52%{transform:translate(12px,-55px)}70%{transform:translate(-8px,-41px)}86%{transform:translate(3px,-14px)}}
@keyframes rv-glimm{0%,100%{opacity:0}18%{opacity:calc(var(--hell)*.35)}34%{opacity:var(--hell)}52%{opacity:calc(var(--hell)*.55)}68%{opacity:calc(var(--hell)*.9)}86%{opacity:calc(var(--hell)*.15)}}

/* ---------- Startseite am Handy (D2.3 „Tiefe am Handy“, unter 700 px; ab 700 px unverändert, Desktop ab 1024 px pixelgleich mit D2.2) ----------
   Die Tiefe entsteht dort, wo das Bild sichtbar ist: eigene Wandlung -t (Schatten tiefer, dunkelster Ton ≈ #5b5550), der Bildschleier wird
   zum Hauch, Scheine liegen nur noch unter Text, der direkt auf dem Bild steht (Logo, Kopf, Trenner — warmweiß, enden im Kasten, Regel 12),
   Chat und Türen sind durchscheinendes Glas (Säule als Form sichtbar); dichten, hellen Grund behalten nur Sprechblase, Eingabe,
   Hinweiszeile (Nebel zum Eingabefeld hin) und die Tür-Texte (Glas als Verlauf, dicht unter dem Text). Fuß als auslaufendes Band wie am Desktop, weiße Bildmarke im Band (D3). */
@media (max-width:700px){
  .hub{--glas:rgba(255,253,249,.42);--glas-blur:6px}
  .hub .rv-bild::after{background:linear-gradient(180deg,rgba(247,244,238,0) 0%,rgba(247,244,238,.05) 50%,rgba(247,244,238,.12) 100%)}  /* nur noch ein Hauch Leinen nach unten */
  /* Scheine warmweiß (#fffdf9). D3 Nachtrag 3 (Tim, 15.10.): enger an Logo und Überschrift, damit die Wirbelsäule sichtbar bleibt — der Logo-Schein reicht
     nach unten in den Kopf-Schein (weicher Übergang, kein Oval); der Kopf-Schein sitzt tiefer (oben wenig, unten mehr: die kleine Zeile „Tim Raav · …“
     braucht ihn). Kontrast am Foto 320–700 px: Text ≥ 5,2 : 1, ® ≥ 4,75 : 1. Vorher: inset -130%/-70% und -54%/-60%. */
  .hub .logo::before{inset:-125% -55%;background:radial-gradient(closest-side,rgba(255,253,249,.92) 0%,rgba(255,253,249,.88) 38%,rgba(255,253,249,.77) 54%,rgba(255,253,249,.58) 67%,rgba(255,253,249,.38) 78%,rgba(255,253,249,.2) 87%,rgba(255,253,249,.08) 94%,rgba(255,253,249,.02) 98.5%,rgba(255,253,249,0) 100%)}
  .hero::before{inset:-24% -22% -50% -22%;background:radial-gradient(closest-side,rgba(255,253,249,.96) 0%,rgba(255,253,249,.95) 50%,rgba(255,253,249,.9) 62%,rgba(255,253,249,.78) 72%,rgba(255,253,249,.58) 81%,rgba(255,253,249,.36) 88%,rgba(255,253,249,.18) 93.5%,rgba(255,253,249,.06) 97.5%,rgba(255,253,249,.015) 99.3%,rgba(255,253,249,0) 100%)}
  /* Trenner: Kasten oben um 52 statt 44 px gepolstert, unten endet er genau an der Türkante (Polster 26, Außenabstand 0) — Lage von Text und
     Türen exakt wie in D2.2; Ausläufer weicher. Grund: unter der Oberkante liegt jetzt das dunklere Bild, unter der Unterkante dünnes Türglas
     (Regel 12: Kasten größer, Schleier weicher, nicht dichter) */
  .divider{padding:52px 0 26px;margin-top:-52px;margin-bottom:0;background:radial-gradient(closest-side,rgba(255,253,249,.9) 0%,rgba(255,253,249,.88) 40%,rgba(255,253,249,.78) 55%,rgba(255,253,249,.58) 68%,rgba(255,253,249,.34) 79%,rgba(255,253,249,.14) 88%,rgba(255,253,249,.04) 93%,rgba(255,253,249,.012) 96.5%,rgba(255,253,249,0) 100%)}
  /* Chat: dünnes Glas, das zum Eingabefeld hin dichter wird (Nebel) — die Hinweiszeile steht auf dichtem Grund, die Säule scheint oben durch */
  .chat-box{background:linear-gradient(0deg,rgba(255,253,249,.84) 0,rgba(255,253,249,.84) 126px,rgba(255,253,249,.42) 196px,rgba(255,253,249,.42) 100%)}
  .chat-msg.bot{background:rgba(239,232,220,.95)}
  /* Türen: das Glas selbst trägt den dichten Grund unter dem Text — als Verlauf in der Fläche (kein Kasten, keine Kante; der Glasrand ist der Rand):
     Zeilen-Layout (bis 429 px): dünn um das Symbol, dicht unter Titel und Unterzeile, zum rechten Rand wieder dünn;
     Zweispalten-Layout (430–700 px): oben dünn hinter dem Symbol, unten dicht unter dem Text */
  .cards .card{background:linear-gradient(180deg,rgba(255,253,249,.42) 0,rgba(255,253,249,.42) 34%,rgba(255,253,249,.84) 54%,rgba(255,253,249,.84) 100%)}
  /* Fuß: auslaufendes Band (gleicher Verlauf wie am Desktop), liegt hinter dem Inhalt, das Bild läuft darunter durch; weiße Bildmarke mittig im Band */
  .hub .page{padding-bottom:92px}  /* Luft unter den Türen: das Band berührt die letzte Tür nur als weicher Schatten (≈ 0,3), die Tür bleibt hell */
  .hub .footer{z-index:0;margin-top:-150px;padding:150px 20px calc(24px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--band-b) 0%,rgba(0,32,88,.96) 26%,rgba(0,32,88,.72) 55%,rgba(0,32,88,.3) 80%,rgba(0,32,88,0) 100%)}
  .hub .footer::before{display:none}
  .hub .band-zeichen{display:block;position:relative;width:100%;height:46px;margin-bottom:6px}
  .hub .band-zeichen::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:46px;height:46px;background:url("/assets/marke/raav-bildmarke_weiss.svg") center/contain no-repeat}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .chat-box,.cards .card{background:rgba(255,253,249,.93)}
  }
}
@media (max-width:600px) and (min-height:750px){.divider{padding-bottom:32px;margin-bottom:0}}  /* hohe Telefone: Abstand zu den Türen wie in D2.2 (32 px) */
@media (max-width:429px){
  .cards .card{background:linear-gradient(90deg,rgba(255,253,249,.42) 0,rgba(255,253,249,.42) 36px,rgba(255,253,249,.84) 84px,rgba(255,253,249,.84) calc(100% - 40px),rgba(255,253,249,.42) 100%)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cards .card{background:rgba(255,253,249,.93)}}
}

/* ---------- Rechtsseiten (impressum, datenschutz, nutzungsbedingungen, quellen): ein Bild im Kopf, Inhalt auf Glas ---------- */
/* Kopf (D2.1): das Bild läuft INNERHALB der Leseglas-Karte aus — oben erst unter der Kartenkante, seitlich vor dem Kartenrand;
   kein Bildstück neben oder über der Karte. --karte-l = linker Kartenrand (Karte max. 820 px, mittig; am Telefon 16 px Rand). */
.rechtsseite{--karte-l:max(16px,calc(50% - 410px));--kopf-frei:96px}
.rechtsseite .rv-bild.kopf{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent var(--kopf-frei),#000 calc(var(--kopf-frei) + 220px),#000 100%);mask-image:linear-gradient(180deg,transparent 0,transparent var(--kopf-frei),#000 calc(var(--kopf-frei) + 220px),#000 100%)}
.rechtsseite .rv-bild.kopf img{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--karte-l) + 14px),#000 calc(var(--karte-l) + 130px),#000 calc(100% - var(--karte-l) - 130px),transparent calc(100% - var(--karte-l) - 14px));mask-image:linear-gradient(90deg,transparent calc(var(--karte-l) + 14px),#000 calc(var(--karte-l) + 130px),#000 calc(100% - var(--karte-l) - 130px),transparent calc(100% - var(--karte-l) - 14px))}
@media (min-width:768px){.rechtsseite{--karte-l:max(32px,calc(50% - 410px));--kopf-frei:136px}}
@media (min-width:1024px){.rechtsseite{--kopf-frei:144px}}
.rechtsseite>header{position:sticky;top:0;z-index:40;background:rgba(247,244,238,.9);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(0,20,58,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rechtsseite>header{background:rgba(247,244,238,.97)}}
.header-content{max-width:880px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:6px 20px}
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--titel);font-size:14px;font-weight:500;text-decoration:none;transition:color var(--tempo)}
.back-link:hover{color:var(--blau)}
.back-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rechtsseite main{flex:1;padding:1.5rem 16px 3rem;position:relative;z-index:1}
.container{width:100%;max-width:820px;margin:0 auto;position:relative;padding:1.75rem 1.25rem 2rem;background:var(--glas-lesen);-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)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.container{background:rgba(255,253,249,.95)}}
.page-header{position:relative;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(227,221,210,.9)}
.page-header::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--gold)}
.rechtsseite h1{font-size:clamp(1.25rem,6.4vw,2.75rem);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;letter-spacing:-.015em;line-height:1.08;margin-bottom:.5rem}
.page-subtitle{color:var(--text-hell);font-size:.95rem;margin:0}
.content-section{margin-bottom:2.25rem;scroll-margin-top:5rem}
.content-section a{overflow-wrap:anywhere}
.rechtsseite h2{color:var(--blau);font-size:1.2rem;line-height:1.3;margin:0 0 .85rem;scroll-margin-top:5rem}
.rechtsseite h3{font-size:1.05rem;margin:1.5rem 0 .6rem;scroll-margin-top:5rem}
.rechtsseite h4{font-size:.95rem;color:var(--text);margin:1.1rem 0 .45rem}
.rechtsseite p{color:var(--text-lauf);font-size:1rem;line-height:1.65;margin:0 0 .8rem}
.rechtsseite strong{color:var(--titel)}
.rechtsseite ul{color:var(--text-lauf);font-size:1rem;margin:0 0 1rem;padding-left:1.25rem}
.rechtsseite li{margin-bottom:.35rem}
.rechtsseite li::marker{color:var(--blau)}
.rechtsseite .card{background:rgba(239,232,220,.9);border-radius:var(--r-glas-klein);box-shadow:inset 4px 0 0 var(--blau),inset 0 1px 0 rgba(255,255,255,.6);padding:1.2rem 1.4rem;margin-bottom:1.5rem}
.contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:.5rem}
.contact-item svg{width:18px;height:18px;stroke:var(--blau);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:3px}
.contact-item span{color:var(--text-lauf);font-size:1rem}
.highlight{background:rgba(232,168,76,.16);border-radius:var(--r-glas-klein);box-shadow:inset 4px 0 0 var(--gold-symbol),inset 0 1px 0 rgba(255,255,255,.5);padding:1rem 1.25rem;margin:1rem 0 1.25rem}
.highlight p{color:var(--text);font-size:.95rem;margin-bottom:.5rem}
.highlight p:last-child{margin-bottom:0}
.rechtsseite footer{padding:1.5rem 20px calc(1.5rem + env(safe-area-inset-bottom,0px));text-align:center}
.footer-content{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;font-size:13.5px}
.footer-links a{color:#fff;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-8px -4px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:.2em}
.footer-links a:focus-visible{outline-color:#fff}
.rechtsseite .footer-copyright{font-size:12.5px;color:#d5dcf0;margin:0}
@media (min-width:768px){
  .header-content{padding:8px 32px}
  .rechtsseite main{padding:3rem 2rem 4rem}
  .container{padding:2.5rem 2.5rem 2.75rem}
  .page-header{margin-bottom:2.5rem}
}
@media (min-width:1024px){
  .rechtsseite main{padding:3.5rem 2rem 5rem}
  .container{padding:2.75rem 3rem 3rem}
}

/* ---------- 404 (D3, body.fehlerseite): flache Kachel auf Leinen — kein Bild, darum kein Glas (Farbwelt Regel 2); Dachmarke, ein Knopf,
   Fuß als flaches Band mit dem Schriftzug quer in der Band-Fassung. Alle Verweise absolut, weil der Server die Seite unter jeder Adresse ausliefert. ---------- */
.fehlerseite main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 16px}
.fehler-box{width:100%;max-width:460px;text-align:center;padding:36px 24px 34px}
.fehler-box .logo{margin-bottom:30px}
.fehler-code{margin:0 0 8px;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--text-hell)}
.fehlerseite h1{font-size:clamp(24px,6.6vw,32px);line-height:1.2;letter-spacing:-.01em;margin:0 0 28px;color:var(--titel)}
.fehlerseite footer{position:relative;width:100%;background:var(--band);color:#fff;text-align:center;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.fehlerseite footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(280px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.fuss-marke{display:block;height:32px;width:auto;margin:0 auto 6px}  /* Kugel 30 px (Mindestmaß quer 28 px) */
.fehlerseite footer .footer-links{gap:4px 24px}
@media (min-width:768px){.fehler-box{padding:44px 40px 40px}}

/* Bewegung reduzieren: Mikroanimationen der Türen und Sprechblasen aus (Partikel, Parallaxe und Übergänge regelt raav-farbwelt.css) */
@media (prefers-reduced-motion:reduce){
  .fx-pt{animation:none!important;opacity:0}
  .cards .card svg rect,.cards .card svg path{animation:none!important}
  .chat-msg{animation:none}
  .trust-note{transition:none}
}

@media print{
  .fx-back,.licht,.rv-bild,.chat-container,.divider{display:none!important}
  body{background:#fff;color:#000}
  .footer,.rechtsseite footer,.fehlerseite footer{background:#fff!important;color:#000!important}
  .footer a,.footer-links a{color:#000!important}
  .cards .card,.container,.chat-box{box-shadow:none!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}