/* Farb- und Formtokens fuer alle Seiten, seit dem 15.09.2026 an einer Stelle.

   Quelle der Wahrheit bleibt engine-referenz/referenz.html. Vorher stand derselbe Block
   viermal (index.html, bestellen.html, rechtstexte.css, gutschein.css), und den
   Rechtstexten fehlten --rb-text und --rb-verlauf. Jede Seite laedt diese Datei vor ihren
   eigenen Stilen. beispiel.html bleibt aussen vor, sie wird mit dem neuen Beispielbrief (E6)
   ersetzt. */
:root{
  --rb-see:#2f5d7c; --rb-see-tief:#1c3d52; --rb-teal:#357f86; --rb-dune:#5d6a39;
  --rb-akzent:#a15626; --rb-akzent-tief:#834319; --rb-gold:#e0a85c; --rb-gold-text:#fae8cc;
  --rb-papier:#f3ecdb; --rb-papier2:#e9e0cb; --rb-flaeche:#fffdf6;
  --rb-tinte:#23262a; --rb-meta:#505862; --rb-linie:#ddd6c4;
  --rb-gruen:#3a6a4a;
  --rb-pruefung:#245c42; --rb-hinweis:#8a6415;
  --rb-schatten:0 10px 30px rgba(28,61,82,.10);
  /* Aus dem Brief seit v1.9: Fliesstext, heller Verlaufsanfang, Text auf dunkel.
     Gegen #357f86 erreicht keine Textfarbe sicher 4,5:1, deshalb beginnt jeder
     Verlauf bei #2f7177 (gleicher Farbton, vier Prozent dunkler). */
  --rb-text:#3c4148;
  --rb-verlauf:linear-gradient(150deg,#2f7177 0%,#2f5d7c 46%,#1c3d52 100%);
  --rb-auf-dunkel:#e6f0f3;
  /* Seit dem 15.09.2026 (zweites Audit): die hellste Textfarbe auf dunklen Flaechen, fuer
     Ueberschriften und Grundtext. Ersetzt #f3f7f9 und das kaum unterscheidbare #eef5f7, die an
     rund zwanzig Stellen als Farbwert standen. 5,2:1 am hellsten Verlaufsanfang. Nebentext
     auf dunkel bleibt --rb-auf-dunkel (4,83:1). */
  --rb-auf-dunkel-hell:#f3f7f9;
  /* Der helle Anfang jedes Verlaufs, einzeln fuer Streifen und den Callout des Briefs. */
  --rb-verlauf-anfang:#2f7177;
  --rb-verlauf-callout:linear-gradient(135deg,#1c3d52 0%,#2f7177 100%);
  /* Fokusring auf dunklen Flaechen. --rb-gold hat am hellen Verlaufsanfang #2f7177 nur
     2,65:1, gefordert sind 3:1 (WCAG 1.4.11). Das helle Gold hat dort 4,6:1. */
  --rb-fokus-dunkel:#fae8cc;
  /* Hinweiskaesten und Fehler, bis dahin als Farbwerte in bestellen.html und gutschein.css */
  --rb-gut-grund:#eef3ee; --rb-gut-linie:#cfe0d3; --rb-gut-text:#2a3d31;
  --rb-acht-grund:#fbf3e3; --rb-acht-linie:#ecdcb2; --rb-acht-text:#5a4820;
  --rb-fehler:#8f2b20; --rb-fehler-rand:#a13226; --rb-fehler-grund:#fdf6f4;
  /* Gewaehlte Kachel und Chip in der Bestellstrecke */
  --rb-auswahl:#e8f0f4; --rb-auswahl-hover:#fbfaf4;
  /* Reines Weiss, seit dem 29.09.2026 (Kritik 8). Es stand an 51 Stellen als Farbwert in vier
     Dateien, weil es hier fehlte: Text auf dunklen Flaechen und Verlaeufen, und der Grund von
     Eingabefeldern, Chips und den beiden Belegblaettern. NICHT --rb-flaeche verwenden -- das ist
     das gebrochene Papierweiss #fffdf6 der Karten und auf dunkel sichtbar zu warm. */
  --rb-weiss:#fff;
  /* --r-klein ist der Radius der kleinen, angedeuteten Bauteile: die falschen Browserreiter in
     der Suchgrafik. Seit dem 29.09.2026 benannt, vorher ein 8er ohne Token. */
  --r-karte:16px; --r-flaeche:24px; --r-klein:8px;
}

/* Die Wortmarke, seit dem 15.09.2026 (neues Logo, handschriftlich mit Papierflieger). Ein Bild
   als Maske, die Farbe kommt aus currentColor und damit aus den Tokens: Tiefsee im Kopf und im
   Fuss, hell auf dunklen Flaechen. Die Breite setzt jede Stelle selbst. Die einzige Bauteilregel
   in dieser Datei: jede Seite laedt sie, und url() wird relativ zu ihr aufgeloest, also auch
   unter /gutschein/CODE und /empfehlen/CODE. Schutzraum und Mindestbreite 96 px wie in PRODUCT.md. */
.wortmarke{display:block;aspect-ratio:1450/360;background:currentColor;
  -webkit-mask:url(marke/wortmarke.png) center/contain no-repeat;
  mask:url(marke/wortmarke.png) center/contain no-repeat}
@media (forced-colors:active){.wortmarke{forced-color-adjust:none;background:CanvasText}}

/* WENIGER BEWEGUNG, seit dem 29.09.2026 (Audit) an einer Stelle fuer alle Seiten.

   Vorher gab es die Regel viermal in drei verschiedenen Fassungen (index.html und
   bestellen.html schalteten ab, beispiel.html setzte .001ms, rechtstexte.css .01ms), und die
   Gutscheinseiten hatten gar keine: Wer im Betriebssystem "Bewegung reduzieren" eingestellt
   hatte, bekam dort weiterhin Uebergaenge.

   Abgeschaltet wird nur Bewegung, nicht die Rueckmeldung: Farbwechsel beim Ueberfahren und
   beim Fokus bleiben, weil sie ohne Zeit auskommen. Alles, was sich bewegt, ist danach sofort
   an seinem Ziel, und jeder Zustand bleibt eindeutig ablesbar -- die Bestellleiste ist da oder
   nicht, das Beispiel offen oder zu. Das Anheben der Buttons um einen Pixel entfaellt.

   beispiel.html laedt diese Datei nicht (sie folgt referenz.html aus der Engine) und traegt
   ihre eigene Fassung weiter. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* Kein Anheben, kein Verschieben, auch nicht beim Ueberfahren. */
  .btn:hover,.btn-primary:hover,.knopf:hover,.kachel:hover{transform:none!important}
}

/* EINWILLIGUNGS-BANNER, seit dem 01.10.2026 (zustimmung.js). Unten am Rand, verdeckt nichts
   Wichtiges und sperrt die Seite nicht. Beide Hauptknoepfe gleich gross und gleich gewichtet:
   ein versteckter Ablehnen-Knopf ist abmahnfaehig. */
.rb-zust{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;display:flex;justify-content:center}
.rb-zust[hidden]{display:none}
.rb-zust-in{max-width:620px;width:100%;background:var(--rb-flaeche);border:1px solid var(--rb-linie);
  border-radius:var(--r-karte);box-shadow:var(--rb-schatten);padding:20px 22px;
  font-family:'Inter',system-ui,sans-serif;color:var(--rb-text)}
.rb-zust h2{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--rb-tinte);margin:0 0 6px}
.rb-zust h2:focus{outline:none}
.rb-zust p{font-size:14.5px;line-height:1.55;margin:0}
.rb-zust a{color:var(--rb-see);text-decoration:underline;text-underline-offset:3px}
.rb-zust-mehr{margin-top:12px;border-top:1px solid var(--rb-linie)}
.rb-zust-wahl{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rb-linie);
  font-size:14.5px;line-height:1.5;cursor:pointer;min-height:44px}
.rb-zust-wahl input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--rb-akzent)}
.rb-zust-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rb-zust-btn{min-height:44px;border-radius:10px;border:1.5px solid var(--rb-see-tief);background:var(--rb-flaeche);
  color:var(--rb-tinte);font:600 15px 'Inter',system-ui,sans-serif;cursor:pointer;padding:10px 14px}
.rb-zust-btn:hover{background:var(--rb-papier)}
.rb-zust-link{display:inline-block;margin-top:10px;min-height:44px;padding:0;background:none;border:0;
  color:var(--rb-see);font:500 14.5px 'Inter',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rb-zust :focus-visible{outline:2px solid var(--rb-akzent);outline-offset:2px}
@media(max-width:420px){.rb-zust{left:8px;right:8px;bottom:8px}.rb-zust-knoepfe{grid-template-columns:1fr}}
@media print{.rb-zust{display:none!important}}