/*
 * Gestaltung Kundenportal PharmaCare (aus dem Klick-Mockup übernommen).
 * Farben, Schrift, Abstände und Bausteine nach dem Theme von pharmacare-website
 * (theme.json und assets/css/theme.css, Stand Theme 0.6.0). Gilt für Portal und Innendienst-App.
 */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("SourceSans3-Roman-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("SourceSans3-Roman-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --primaer: #004f9f;
  --primaer-dunkel: #003b78;
  --primaer-hell: #e8eff9;
  --weiss: #ffffff;
  --flaeche: #f5f3ef;
  --linie: #ddd9d1;
  --schrift: #1d232a;
  --schrift-gedaempft: #5b6470;
  --akzent: #c30b56;
  --akzent-hell: #fbe9f0;
  --erfolg: #1a7f4b;
  --erfolg-hell: #e3f2ea;
  --erfolg-dunkel: #146a3d;
  --fehler: #b3261e;
  --auf-blau: #dbe7f7;
  --auf-blau-leise: #cfe0f7;
  --radius: 10px;
  --schatten: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 6%);
  --schatten-karte: 0 8px 28px rgb(0 40 90 / 14%);
  --klickziel: 44px;
  --inhalt: 75rem;
  --klein: 1rem;
  --normal: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --gross: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --h1: clamp(2.125rem, 1.6rem + 2vw, 3.125rem);
  --h2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --h3: clamp(1.25rem, 1.2rem + 0.3vw, 1.375rem);
  --s10: 0.5rem; --s20: 1rem; --s30: 1.5rem; --s40: 2.5rem; --s50: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--normal); line-height: 1.55; color: var(--schrift); background: var(--weiss); -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-wrap: break-word; }
/* Fuß bleibt bei kurzen Seiten unten: Der Inhalt füllt den Platz zwischen Kopf und Fuß. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0; }
a { color: var(--primaer); }
a:hover { color: var(--primaer-dunkel); }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--primaer); outline-offset: 3px; border-radius: 2px; }
.auf-blau :where(a, button):focus-visible { outline-color: var(--weiss); }
svg.i { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.huelle { max-width: calc(var(--inhalt) + 2 * var(--s20)); margin: 0 auto; padding: 0 var(--s20); }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; padding: 0.75rem 1rem; background: var(--primaer); color: var(--weiss); border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gedaempft { color: var(--schrift-gedaempft); }
/* Lange Wörter ohne Leerzeichen (Artikelbeschreibung, E-Mail-Adresse) brechen notfalls an jeder Stelle um. */
.umbruch { overflow-wrap: anywhere; }
.klein { font-size: var(--klein); }
.stapel > * + * { margin-top: var(--s20); }
.stapel-klein > * + * { margin-top: var(--s10); }
/* Abstände, die das Mockup inline setzt (style="margin-top:…"); die CSP erlaubt kein Inline-Style. */
.abstand-oben-klein { margin-top: 0.3rem; }
.abstand-oben { margin-top: 1rem; }
.abstand-oben-gross { margin-top: 1.3rem; }

/* Hinweisleiste des Mockups */
.demo { background: var(--schrift); color: var(--weiss); font-size: 0.95rem; }
.demo .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.2rem 1rem; min-height: 36px; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.demo a { color: var(--weiss); font-weight: 600; }
.demo strong { font-weight: 700; }

/* Kopf: oben Logo und Konto, darunter die Navigation als Reiterleiste */
.kopf { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.kopf .huelle { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s30); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.kopf--portal .huelle { padding-bottom: 0; }
.marke { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--schrift); flex-shrink: 0; }
.marke img { height: 52px; width: auto; display: block; }
.marke__portal { border-left: 1px solid var(--linie); padding-left: 0.9rem; font-weight: 700; font-size: 1.125rem; line-height: 1.15; color: var(--primaer); }
/* Reiter brechen um statt seitlich zu scrollen: Alle bleiben sichtbar, auch der aktive. */
.hauptnavigation { order: 3; flex-basis: 100%; min-width: 0; margin: 0.4rem calc(-1 * var(--s10)) 0; }
.hauptnavigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.2rem; }
.hauptnavigation a { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0 0.6rem; font-weight: 600; color: var(--schrift); text-decoration: none; white-space: nowrap; }
.hauptnavigation a:hover { color: var(--primaer); }
.hauptnavigation a[aria-current="page"] { color: var(--primaer); }
.hauptnavigation a[aria-current="page"]::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primaer); }
.zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--akzent); color: var(--weiss); font-size: 0.8rem; font-weight: 700; line-height: 1; }
.kopf__rechts { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; margin-left: auto; }
.kopf__telefon { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.15rem; color: var(--primaer); text-decoration: none; min-height: var(--klickziel); white-space: nowrap; margin-right: 0.6rem; }
.kopf__telefon svg { stroke-width: 2; }
.konto { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--klickziel); padding: 0 0.9rem 0 0.35rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--schrift); text-decoration: none; font-weight: 600; white-space: nowrap; }
.konto:hover { border-color: var(--akzent); color: var(--schrift); }
.konto__kuerzel { width: 34px; height: 34px; border-radius: 50%; background: var(--primaer-hell); color: var(--primaer); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; }
.rund { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: var(--klickziel); min-height: var(--klickziel); padding: 0 0.9rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--primaer); font-weight: 700; font-size: var(--klein); text-decoration: none; white-space: nowrap; background: var(--weiss); }
.rund:hover { border-color: var(--akzent); color: var(--primaer); }
/* Im Portal: Konto-Chip ohne Link (es gibt keine Seite „Meine Angaben“), Abmelden als Formular */
p.konto { margin: 0; }
p.konto:hover { border-color: var(--linie); }
.konto__kuerzel svg { stroke-width: 2; }
.kopf__abmelden { display: flex; margin: 0; }
button.rund { font: inherit; font-weight: 700; font-size: var(--klein); cursor: pointer; }

/* Leiste „Sie handeln für …“ */
.fuer { background: var(--primaer-hell); border-bottom: 1px solid var(--auf-blau-leise); }
.fuer .huelle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; min-height: 52px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.fuer__text { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; }
.fuer__text svg { color: var(--primaer); }
.fuer a { font-weight: 600; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.7rem 1.4rem; border: 2px solid var(--primaer); border-radius: var(--radius); background: var(--primaer); color: var(--weiss); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; }
.knopf:hover { background: var(--primaer-dunkel); border-color: var(--primaer-dunkel); color: var(--weiss); }
.knopf--rahmen { background: var(--weiss); color: var(--primaer); }
.knopf--rahmen:hover { background: var(--primaer-hell); color: var(--primaer-dunkel); border-color: var(--primaer); }
.knopf--weiss { background: var(--weiss); color: var(--primaer); border-color: var(--weiss); }
.knopf--weiss:hover { background: var(--primaer-hell); color: var(--primaer-dunkel); border-color: var(--primaer-hell); }
.knopf--hell { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,0.7); }
.knopf--hell:hover { background: rgba(255,255,255,0.12); color: var(--weiss); border-color: var(--weiss); }
.knopf--klein { min-height: var(--klickziel); padding: 0.4rem 0.95rem; font-size: var(--klein); }
.knopf--breit { width: 100%; }
.knopf[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--s10) 0.75rem; align-items: center; }
.pfeillink { font-weight: 600; text-decoration: none; }
.pfeillink::after { content: " →"; }
.pfeillink:hover { text-decoration: underline; }
.textknopf { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--primaer); cursor: pointer; text-decoration: underline; min-height: var(--klickziel); }

/* Runde Kontaktknöpfe wie auf der Website */
.kanaele { display: flex; flex-wrap: wrap; gap: var(--s10); }
.kanal { display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--klickziel); padding: 0 0.95rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--primaer); font-weight: 600; font-size: var(--klein); text-decoration: none; white-space: nowrap; }
.kanal:hover { border-color: var(--akzent); color: var(--primaer); }
.kanal svg { width: 18px; height: 18px; }

/* PharmaCare-Assistent (src/web/chat.ts). Fenster und Gestaltung im Fenster kommen aus chat-pharmacare
   (fenster.css, nach dieser Datei geladen, darf überschreiben). Hier nur die Grundform des schwebenden
   Knopfs, damit er nie als nackter Text unten auf der Seite hängt, solange fenster.css fehlt.
   Der Knopf „Chat“ im Kasten Kundenservice ist ein gewöhnlicher .kanal. */
.chat-blase { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--primaer); color: var(--weiss); box-shadow: var(--schatten); border: 2px solid var(--weiss); text-decoration: none; }
.chat-blase svg { grid-area: 1 / 1; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-blase .chat-blase__ki { fill: currentColor; stroke: none; opacity: 0; }
.chat-blase:hover, .chat-blase:focus-visible { background: var(--primaer-dunkel); border-color: var(--akzent); color: var(--weiss); }
.chat-blase:focus-visible { outline: 3px solid var(--primaer-dunkel); outline-offset: 3px; border-radius: 50%; }
.chat-blase__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Textbausteine */
.kicker { font-size: var(--klein); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primaer); font-weight: 700; margin: 0 0 0.5rem; }
.kicker--hell { color: var(--auf-blau-leise); }
.brotkrumen { font-size: var(--klein); color: var(--schrift-gedaempft); margin-bottom: var(--s20); }
.brotkrumen a { font-weight: 600; }

/* Blaues Band oben auf der Übersicht */
.band__meldung { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.35rem 0.9rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--weiss); font-weight: 600; }
.band { background: var(--primaer); color: var(--weiss); padding: var(--s40) 0 7rem; }
.band h1 { color: var(--weiss); max-width: 30ch; }
.band__text { color: var(--auf-blau); font-size: var(--gross); margin-top: 0.9rem; max-width: 48ch; }
.band__meta { color: var(--auf-blau-leise); font-size: var(--klein); margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.band__meta > span { display: inline-flex; align-items: center; gap: 0.5rem; }
/* „Versorgt über:“ mit den Logos der Kassen (Einwilligungen liegen vor, KONZEPT.md Abschnitt 13):
   weißer Chip wie der Grund der Logos, mehrere nebeneinander; ohne sicheres Logo der Name als Text. */
.band__meta > .versorgt { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.kassen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kasse-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; background: var(--weiss); border-radius: 6px; padding: 5px 10px; }
.kasse-logo img { display: block; max-width: 100%; height: auto; }
.kasse-logo--text { color: var(--primaer); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.band--flach { padding-bottom: var(--s40); }
.seitenkopf { padding: var(--s40) 0 var(--s30); }
.seitenkopf h1 { font-size: var(--h2); }
.seitenkopf p.einleitung { color: var(--schrift-gedaempft); margin-top: 0.6rem; max-width: 62ch; }
.seitenkopf__zeile { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s20); flex-wrap: wrap; }

/* Karten */
.raster { display: grid; gap: 1.25rem; }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--auto { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.raster--breit { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s40); align-items: start; }
.wege { margin-top: -5.5rem; position: relative; z-index: 1; }
.karte { display: flex; flex-direction: column; gap: 0.55rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem 1.6rem; color: var(--schrift); text-decoration: none; transition: box-shadow 150ms ease, border-color 150ms ease; min-width: 0; }
a.karte:hover, .karte--klickbar:hover { border-color: var(--akzent); box-shadow: var(--schatten); color: var(--schrift); }
.karte--schatten { border-color: transparent; box-shadow: var(--schatten-karte); }
.karte--flaeche { background: var(--flaeche); border-color: transparent; }
.karte__kopf { display: flex; align-items: center; gap: 0.8rem; }
.karte__kopf--umbruch { flex-wrap: wrap; }
.karte__titel { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin: 0; }
.karte__wert { font-size: 1.75rem; font-weight: 700; color: var(--primaer); line-height: 1.15; margin-top: 0.3rem; }
.karte__text { color: var(--schrift-gedaempft); }
.karte__fuss { margin-top: auto; padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.karte--kompakt { flex-direction: row; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; }
.karte--kompakt .karte__titel { font-size: var(--normal); }
.karte--kompakt .karte__text { font-size: var(--klein); line-height: 1.4; }
.karte__inhalt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ikon { width: 46px; height: 46px; border-radius: 50%; background: var(--primaer-hell); color: var(--primaer); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ikon--klein { width: 40px; height: 40px; }
.ikon--erfolg { background: var(--erfolg-hell); color: var(--erfolg); }
.ikon--akzent { background: var(--akzent-hell); color: var(--akzent); }

/* Abzeichen und Status */
.abzeichen { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; background: var(--flaeche); color: var(--schrift); }
.abzeichen::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.abzeichen--ohne-punkt::before { content: none; }
.abzeichen--blau { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.abzeichen--gruen { background: var(--erfolg-hell); color: var(--erfolg-dunkel); }
.abzeichen--akzent { background: var(--akzent-hell); color: var(--akzent); }
.abzeichen--grau { background: var(--flaeche); color: var(--schrift-gedaempft); }

/* Hinweise */
.hinweis { display: flex; gap: 1rem; background: var(--flaeche); border-left: 4px solid var(--primaer); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.3rem; }
.hinweis > svg { color: var(--primaer); margin-top: 0.15rem; }
.hinweis h2, .hinweis h3 { font-size: 1.125rem; margin-bottom: 0.2rem; }
.hinweis p { color: var(--schrift-gedaempft); }
.hinweis p + p { margin-top: 0.4rem; }
.hinweis .knoepfe { margin-top: 0.8rem; }
.hinweis--wichtig { background: var(--akzent-hell); border-left-color: var(--akzent); }
.hinweis--wichtig > svg { color: var(--akzent); }
.hinweis--wichtig p { color: var(--schrift); }
.hinweis--erfolg { background: var(--erfolg-hell); border-left-color: var(--erfolg); }
.hinweis--erfolg > svg { color: var(--erfolg); }
.hinweis--erfolg p { color: var(--schrift); }
.hinweis--demo { background: #fff8e5; border-left-color: #8a6100; }
.hinweis--demo > svg { color: #8a6100; }
.hinweis--demo p { color: var(--schrift); }

/* Aufzählung in Karten */
.punkte { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--schrift-gedaempft); font-size: var(--klein); }
.punkte li + li { margin-top: 0.2rem; }

/* Abschnitte */
.abschnitt { padding-top: var(--s50); }
.abschnitt--klein { padding-top: var(--s40); }
.abschnitt__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s20); flex-wrap: wrap; margin-bottom: var(--s30); }
.abschnitt__kopf p:not(.kicker) { color: var(--schrift-gedaempft); margin-top: 0.4rem; }
.ende { padding-bottom: var(--s50); }

/* Auswahl-Pillen (Jahr, Tag) */
.pillen { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pillen a, .pillen button, .pille { display: inline-flex; align-items: center; justify-content: center; min-height: var(--klickziel); padding: 0 1rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--schrift); background: var(--weiss); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.pillen a:hover, .pillen button:hover { border-color: var(--akzent); color: var(--primaer); }
.pillen [aria-current="true"], .pillen [aria-pressed="true"] { background: var(--primaer); border-color: var(--primaer); color: var(--weiss); }

/* Tabellen */
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); overflow: hidden; }
.tabelle th { text-align: left; font-size: var(--klein); font-weight: 700; color: var(--schrift-gedaempft); background: var(--flaeche); padding: 0.8rem 1rem; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 0.95rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .aktion { text-align: right; white-space: nowrap; width: 1%; }
.tabelle .aktion .knoepfe { justify-content: flex-end; flex-wrap: nowrap; }
.tabelle tr:target td { background: var(--primaer-hell); }
/* Zwischen Telefon und breitem Bildschirm (701 bis etwa 900 px) passt die Rechnungstabelle nur, wenn der Stand
   umbrechen darf und die Zellen etwas schmaler sind (Media-Abfrage „Tablet“). */
.tabelle .abzeichen { white-space: normal; }
.belegnr { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unterzeile { display: block; color: var(--schrift-gedaempft); font-size: 0.95rem; }
.tabelle__fuss { display: flex; justify-content: space-between; gap: var(--s20); flex-wrap: wrap; padding: 0.8rem 0.2rem 0; color: var(--schrift-gedaempft); font-size: var(--klein); }
.tabelle--kompakt td, .tabelle--kompakt th { padding: 0.6rem 0.8rem; font-size: var(--klein); }
/* Artikel einer Bestellung oder Lieferung: feste Spalten, damit alle Tabellen gleich aussehen. */
.tabelle--zeilen { table-layout: fixed; }
.tabelle--zeilen .spalte-artikelnr { width: 13rem; }
.tabelle--zeilen .spalte-menge { width: 9rem; }
.tabelle--zeilen td.artikelnr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Listen mit Zeilen */
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.liste > li { border-bottom: 1px solid var(--linie); }
.zeile { display: flex; gap: 1.1rem; align-items: center; padding: 0.95rem 0.5rem; color: var(--schrift); text-decoration: none; }
a.zeile:hover { background: var(--flaeche); color: var(--schrift); }
.zeile__datum { width: 62px; flex-shrink: 0; text-align: center; background: var(--primaer-hell); color: var(--primaer); border-radius: 8px; padding: 0.4rem 0; line-height: 1.1; }
.zeile__datum strong { display: block; font-size: 1.35rem; }
.zeile__datum span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.zeile__text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.zeile__titel { font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.zeile__sub { color: var(--schrift-gedaempft); font-size: var(--klein); }
.zeile__rechts { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.zeile__pfeil { color: var(--primaer); font-weight: 700; }

/* Schritte einer Sendung */
.schritte { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: schritt; }
.schritte--3 { grid-template-columns: repeat(3, 1fr); }
.schritte li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; font-size: 0.9rem; color: var(--schrift-gedaempft); line-height: 1.25; padding: 0 0.2rem; }
.schritte li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: var(--linie); z-index: 0; }
.schritte li:first-child::before { content: none; }
.schritte__punkt { position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%; border: 3px solid var(--linie); background: var(--weiss); display: inline-flex; align-items: center; justify-content: center; }
.schritte li.fertig { color: var(--schrift); }
.schritte li.fertig::before, .schritte li.aktuell::before { background: var(--primaer); }
.schritte li.fertig .schritte__punkt { background: var(--primaer); border-color: var(--primaer); color: var(--weiss); }
.schritte li.fertig .schritte__punkt svg { width: 14px; height: 14px; stroke-width: 3; }
.schritte li.aktuell { color: var(--primaer); font-weight: 700; }
.schritte li.aktuell .schritte__punkt { border-color: var(--primaer); box-shadow: 0 0 0 4px var(--primaer-hell); }

/* Sendungsverlauf */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { position: relative; display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.2rem 1rem; padding: 0 0 1.2rem 1.6rem; }
.verlauf li::before { content: ""; position: absolute; left: 5px; top: 0.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--primaer); }
.verlauf li::after { content: ""; position: absolute; left: 10px; top: 1.2rem; bottom: -0.2rem; width: 2px; background: var(--linie); }
.verlauf li:last-child::after { content: none; }
.verlauf li.geplant::before { background: var(--weiss); border: 2px dashed var(--primaer); }
.verlauf li.neu::before { box-shadow: 0 0 0 4px var(--primaer-hell); }
.verlauf__zeit { color: var(--schrift-gedaempft); font-size: var(--klein); font-variant-numeric: tabular-nums; }
.verlauf__text { font-weight: 600; }
.verlauf__ort { display: block; font-weight: 400; color: var(--schrift-gedaempft); font-size: var(--klein); }

/* Datenlisten */
.daten { margin: 0; display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 0.55rem 1.4rem; }
.daten dt { color: var(--schrift-gedaempft); }
.daten dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.daten--gestapelt { grid-template-columns: 1fr; gap: 0.1rem; }
.daten--gestapelt dd { margin-bottom: 0.6rem; }
.verfolgen { margin-top: var(--s20); }

/* Kasten (graue Fläche) */
.kasten { background: var(--flaeche); border-radius: var(--radius); padding: var(--s30); }
.kasten--weiss { background: var(--weiss); border: 1px solid var(--linie); }
.kasten h2 { font-size: var(--h3); margin-bottom: var(--s20); }
.kasten h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.kasten h2.kasten__titel { font-size: 1.3rem; margin-bottom: 0; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: var(--s30) 0; }

/* Formulare wie das Rückruf-Formular der Website */
.formular { display: flex; flex-direction: column; gap: var(--s30); background: var(--flaeche); border-radius: var(--radius); padding: var(--s40); }
.formular--schmal { max-width: 46rem; }
.feldgruppe { display: flex; flex-direction: column; gap: var(--s10); border: 0; margin: 0; padding: 0; min-width: 0; }
.feldgruppe > label, .feldgruppe > legend { font-weight: 700; padding: 0; }
.feldgruppe > label.wahl, .feldgruppe > label.wahlkarte { font-weight: 400; }
.feldgruppe > legend { margin-bottom: var(--s10); }
.feld__fehler { color: var(--fehler); font-weight: 600; }
.feldgruppe .hilfe { font-size: var(--klein); color: var(--schrift-gedaempft); }
.optional { font-weight: 400; color: var(--schrift-gedaempft); }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s20); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea { width: 100%; min-height: 52px; padding: 0 0.9rem; font: inherit; color: var(--schrift); background: var(--weiss); border: 1px solid var(--schrift-gedaempft); border-radius: 8px; }
textarea { padding: 0.75rem 0.9rem; min-height: 9rem; resize: vertical; line-height: 1.5; }
input[type="file"] { font: inherit; font-size: var(--klein); padding: 0.8rem; background: var(--weiss); border: 1px dashed var(--schrift-gedaempft); border-radius: 8px; width: 100%; }
input[readonly] { background: var(--flaeche); color: var(--schrift-gedaempft); }
.feld--code { font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; text-transform: uppercase; max-width: 16rem; }
/* Code aus der E-Mail: Feldgruppe zentriert; mit JavaScript sechs Einzelfelder (code-eingabe.js) */
.feldgruppe--code { align-items: center; text-align: center; }
.feldgruppe--code .feld--code { margin-inline: auto; }
.code-felder { display: flex; justify-content: center; gap: 0.5rem; width: 100%; }
input.code-feld { flex: 0 1 3.25rem; width: 3.25rem; min-width: 0; min-height: 3.5rem; padding: 0; text-align: center; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; text-transform: uppercase; caret-color: var(--primaer); }
input.code-feld:focus { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer) inset; }
.wahl { display: flex; align-items: flex-start; gap: 0.65rem; min-height: var(--klickziel); padding-top: 0.55rem; font-weight: 400; }
.wahl input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--primaer); flex-shrink: 0; }
.wahlkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.75rem; }
.wahlkarte { position: relative; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.95rem 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.wahlkarte:hover { border-color: var(--akzent); }
.wahlkarte input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--primaer); flex-shrink: 0; }
.wahlkarte:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer) inset; }
.wahlkarte:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.wahlkarte__titel { display: block; font-weight: 700; }
.wahlkarte__text { display: block; font-size: var(--klein); color: var(--schrift-gedaempft); }
.formular__hinweis { font-size: var(--klein); color: var(--schrift-gedaempft); }
.formular .knoepfe { margin-top: var(--s10); }
.zusatz { display: none; }
.zusatz.zeigen { display: flex; }

/* Mengenwahl */
.menge { display: inline-flex; align-items: center; border: 1px solid var(--schrift-gedaempft); border-radius: 8px; background: var(--weiss); overflow: hidden; }
.menge button { width: 48px; height: 48px; border: 0; background: var(--weiss); color: var(--primaer); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menge button:hover { background: var(--primaer-hell); }
.menge output { min-width: 3rem; text-align: center; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.produktzeile { display: flex; justify-content: space-between; align-items: center; gap: var(--s20); flex-wrap: wrap; padding: 0.9rem 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.produktzeile + .produktzeile { margin-top: 0.6rem; }

/* Rückruf-Zeitfenster */
.fenster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.6rem; }
.fenster .wahlkarte { align-items: center; padding: 0.8rem 1rem; }
.fenster .wahlkarte__titel { white-space: nowrap; }

/* Bestätigung */
.bestaetigung { max-width: 46rem; margin: 0 auto; text-align: center; padding: var(--s50) 0; }
.bestaetigung .ikon { width: 72px; height: 72px; margin: 0 auto var(--s20); }
.bestaetigung .ikon svg { width: 36px; height: 36px; stroke-width: 2.4; }
.bestaetigung h1 { font-size: var(--h2); }
.bestaetigung p { margin-top: 0.8rem; color: var(--schrift-gedaempft); font-size: var(--gross); }
.bestaetigung .knoepfe { justify-content: center; margin-top: var(--s30); }
.bestaetigung .naechstes { text-align: left; margin-top: var(--s30); }

/* Anmeldung */
.anmeldung { background: var(--flaeche); padding: var(--s40) var(--s20) var(--s50); }
.anmeldung__karte { max-width: 32rem; margin: 0 auto; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: var(--s40); }
.anmeldung__logo { display: flex; justify-content: center; margin-bottom: var(--s30); }
.anmeldung__logo img { height: 56px; }
.anmeldung h1 { font-size: 1.9rem; color: var(--primaer); }
.anmeldung__karte > p { margin-top: 0.7rem; }
.anmeldung form { display: flex; flex-direction: column; gap: var(--s20); margin-top: var(--s30); }
.oder { display: flex; align-items: center; gap: 0.8rem; color: var(--schrift-gedaempft); font-size: var(--klein); }
.oder::before, .oder::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
/* Zeilen mit einer Aktion („E-Mail nicht angekommen? Erneut senden“): Klickziel mindestens 44px */
.anmeldung form.zeilenformular { display: block; margin-top: 0.7rem; }
.aktionszeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.4rem; }
.knopf-link { display: inline-flex; align-items: center; min-height: var(--klickziel); margin: 0; padding: 0; border: 0; background: none; color: var(--primaer); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.knopf-link:hover { color: var(--primaer-dunkel); }
.link-ziel { display: inline-flex; align-items: center; min-height: var(--klickziel); font-weight: 600; }
/* Seiten des Anmeldelinks (Inhalt in einem Element für das Skript) und der angezeigte Code */
.anmeldelink p { margin-top: 0.7rem; }
.anmeldelink .anmeldecode { margin-top: var(--s20); padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--primaer-hell); color: var(--primaer-dunkel); font-size: 2.4rem; font-weight: 700; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.anmeldelink .anmeldecode:empty { display: none; }
.anmeldung__fuss { max-width: 32rem; margin: var(--s30) auto 0; text-align: center; font-size: var(--klein); color: var(--schrift-gedaempft); }
.anmeldung__fuss a { font-weight: 600; }
/* Nutzungsbedingungen und Datenschutz: Titel größer als die Abschnitte, Text über die ganze Karte */
.rechtliches > * + * { margin-top: 0.7rem; }
.rechtliches h2 { font-size: var(--h3); margin-top: var(--s30); scroll-margin-top: var(--s30); }
.rechtliches p { text-wrap: wrap; }
.brief { border: 1px solid var(--linie); border-radius: 8px; padding: 0.9rem 1rem; background: repeating-linear-gradient(0deg, var(--weiss), var(--weiss) 22px, #f3f1ec 22px, #f3f1ec 23px); font-size: 0.95rem; }
.brief strong { font-size: 1.15rem; letter-spacing: 0.08em; color: var(--primaer); }

/* Chat */
.chat { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); overflow: hidden; min-height: 26rem; }
.chat__kopf { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; background: var(--primaer); color: var(--weiss); }
.chat__kopf small { display: block; color: var(--auf-blau); }
.chat__verlauf { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; background: var(--flaeche); overflow-y: auto; max-height: 26rem; }
.blase { max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 14px; background: var(--weiss); border: 1px solid var(--linie); }
.blase small { display: block; color: var(--schrift-gedaempft); font-size: 0.85rem; margin-bottom: 0.15rem; }
.blase--ich { align-self: flex-end; background: var(--primaer); color: var(--weiss); border-color: var(--primaer); }
.blase--ich small { color: var(--auf-blau); }
.chat__eingabe { display: flex; gap: 0.6rem; padding: 0.8rem; border-top: 1px solid var(--linie); }
.chat__eingabe input { flex: 1; }
.sterne { display: flex; gap: 0.3rem; }
.sterne button { width: 48px; height: 48px; border: 1px solid var(--linie); border-radius: 50%; background: var(--weiss); color: var(--schrift-gedaempft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sterne button[aria-pressed="true"] { color: #b07900; border-color: #b07900; background: #fff5dc; }
.sterne button[aria-pressed="true"] svg { fill: currentColor; }

/* Nachrichtenverlauf */
.faden { display: flex; flex-direction: column; gap: var(--s20); }
.beitrag { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--weiss); }
.beitrag--pharmacare { background: var(--primaer-hell); border-color: var(--auf-blau-leise); }
.beitrag--system { background: var(--flaeche); border-style: dashed; }
.beitrag__kopf { display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: var(--klein); color: var(--schrift-gedaempft); margin-bottom: 0.35rem; }
.beitrag__kopf strong { color: var(--schrift); }

/* Umschalter (Einstellungen) */
.schalter { display: flex; justify-content: space-between; align-items: center; gap: var(--s20); padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.schalter:last-child { border-bottom: 0; }
.schalter input { appearance: none; width: 3.2rem; height: 1.8rem; border-radius: 999px; background: var(--schrift-gedaempft); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; }
.schalter input::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--weiss); transition: left 150ms ease; }
.schalter input:checked { background: var(--primaer); }
.schalter input:checked::after { left: 1.6rem; }
.schalter span small { display: block; color: var(--schrift-gedaempft); font-size: var(--klein); }

/* Aufklappbar */
details.klapp { border-top: 1px solid var(--linie); }
details.klapp:last-of-type { border-bottom: 1px solid var(--linie); }
details.klapp > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--primaer); }
details.klapp[open] > summary::after { content: "–"; }
details.klapp > div { padding: 0 0 var(--s20); }

/* Leerer Zustand */
.leer { text-align: center; padding: var(--s40) var(--s20); border: 1px dashed var(--linie); border-radius: var(--radius); background: var(--weiss); }
.leer .ikon { margin: 0 auto var(--s20); }
.leer__titel { font-size: 1.3rem; }
.leer p { color: var(--schrift-gedaempft); max-width: 44ch; margin: 0.4rem auto 0; }

/* Fuß */
.fuss { background: var(--flaeche); margin-top: var(--s50); padding: var(--s40) 0 var(--s30); }
.fuss__spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--s30); }
.fuss__spalten--3 { grid-template-columns: 1.3fr 1fr 1.1fr; }
.fuss h2 { font-size: var(--normal); margin-bottom: 0.6rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fuss ul a { color: var(--schrift); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.fuss ul a:hover { color: var(--primaer); text-decoration: underline; }
.fuss__logo { height: 32px; width: auto; display: block; margin-bottom: 0.7rem; }
.fuss p { color: var(--schrift-gedaempft); font-size: var(--klein); }
.telefon-gross { font-size: 1.35rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.fuss__leiste { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: var(--s30); padding-top: var(--s20); border-top: 1px solid var(--linie); font-size: var(--klein); color: var(--schrift-gedaempft); }
.fuss__recht { min-width: 0; }
.fuss__recht a { white-space: nowrap; }
.fuss__sicher { display: inline-flex; align-items: center; gap: 0.4rem; }
.fuss__leiste svg { color: var(--erfolg); }

/* Innendienst */
.intern .kopf { background: var(--schrift); border-bottom: 0; }
.intern .marke__portal { color: var(--weiss); border-left-color: rgba(255,255,255,0.3); }
.intern .kopf .huelle { min-height: 72px; }
.intern .kopf__nutzer { color: var(--auf-blau); font-size: var(--klein); margin-left: auto; }
.intern .marke img { height: 40px; background: var(--weiss); border-radius: 6px; padding: 4px 8px; }
.frist--heute { color: var(--akzent); font-weight: 700; }

/* Tablet */
@media (max-width: 1023px) {
  .kopf__telefon { display: none; }
  .raster--3 { grid-template-columns: 1fr; }
  .raster--breit { grid-template-columns: 1fr; gap: var(--s30); }
  .fuss__spalten, .fuss__spalten--3 { grid-template-columns: 1fr 1fr; }
  .tabelle th, .tabelle td { padding-left: 0.6rem; padding-right: 0.6rem; }
}
/* Telefon */
@media (max-width: 700px) {
  .marke img { height: 40px; }
  /* Kopf im Portal: Logo, Kundennummer und Abmelden in einer Zeile, darunter die Reiter */
  .kopf .huelle { column-gap: 0.75rem; }
  body:not(.intern) .marke img { height: 36px; }
  .kopf--portal .kopf__rechts { order: 1; margin-left: auto; gap: 0.5rem; }
  p.konto { padding: 0.2rem 0.8rem; }
  p.konto .konto__kuerzel { display: none; }
  p.konto .konto__name { display: flex; flex-direction: column; line-height: 1.15; }
  .konto__etikett { font-size: 0.8rem; font-weight: 400; color: var(--schrift-gedaempft); }
  .hauptnavigation { flex-basis: calc(100% + 2 * var(--s10)); }
  .hauptnavigation ul { justify-content: space-between; gap: 0; }
  .hauptnavigation a { padding: 0 0.35rem; font-size: 0.9375rem; }
  .hauptnavigation a[aria-current="page"]::after { left: 0.35rem; right: 0.35rem; }
  .marke__portal { display: none; }
  .rund__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rund { padding: 0; }
  .konto { padding-right: 0.35rem; }
  .band { padding: var(--s30) 0 6.5rem; }
  .band__text { font-size: var(--normal); }
  .wege { margin-top: -5rem; }
  .raster--2 { grid-template-columns: 1fr; }
  .abschnitt { padding-top: var(--s40); }
  .formular { padding: var(--s30) var(--s20); }
  .anmeldung__karte { padding: var(--s30) var(--s20); }
  .schritte li { font-size: 0.78rem; }
  .verlauf li { grid-template-columns: 1fr; }
  .daten { grid-template-columns: 1fr; gap: 0.05rem; }
  .daten dd { margin-bottom: 0.55rem; }
  .fuss__spalten, .fuss__spalten--3 { grid-template-columns: 1fr; }
  .tabelle--stapel, .tabelle--stapel tbody, .tabelle--stapel tr, .tabelle--stapel td { display: block; width: 100%; }
  .tabelle--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle--stapel { border: 0; background: none; overflow: visible; }
  .tabelle--stapel tbody tr { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 0.8rem; padding: 0.4rem 0; background: var(--weiss); }
  .tabelle--stapel td { border: 0; padding: 0.3rem 1rem; display: flex; justify-content: space-between; gap: 1rem; text-align: right; overflow-wrap: anywhere; }
  .tabelle--stapel td > * { min-width: 0; }
  .tabelle--zeilen td.artikelnr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabelle--stapel td::before { content: attr(data-titel); color: var(--schrift-gedaempft); font-size: 0.95rem; text-align: left; flex-shrink: 0; }
  .tabelle--stapel td.aktion { width: 100%; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .tabelle--stapel td.aktion::before { content: none; }
  .tabelle--stapel td.aktion .knoepfe { width: 100%; }
  .tabelle--stapel td.aktion .knopf { flex: 1; }
}

/* Kundenansicht eines Admin-Kontos: auf jeder Seite oben, nicht zu übersehen */
.ansicht-banner { background: var(--akzent); color: var(--weiss); }
.ansicht-banner .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s10) var(--s20); min-height: 56px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ansicht-banner__text { margin: 0; font-weight: 700; color: var(--weiss); }
.ansicht-banner form { margin: 0; }
.ansicht-banner__knopf { background: var(--weiss); color: var(--akzent); border-color: var(--weiss); }
.ansicht-banner__knopf:hover { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent-hell); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .demo, .kopf, .fuss, .hauptnavigation, .chat-blase-bereich { display: none; } }