/* Bausteine für Empfehlung und Gutschein, seit 13.09.2026.

   Geladen nach rechtstexte.css, das Seitenrahmen, Kopf und Fuß liefert. Die
   Formularteile sind aus bestellen.html übernommen, Regel für Regel, damit
   Eingabefelder, Übersicht und Häkchen überall gleich aussehen und gleich bedienbar
   sind: Klickziele ab 44 px, Ränder der Felder in --rb-meta (7,21:1 gegen Weiß),
   Fehlerfarbe wie dort. Buttons wie auf der Startseite seit dem 13.09.2026: Radius 10,
   ohne Schatten. Farben nur über die Tokens aus referenz.html. */

/* Die Tokens (--rb-*) stehen seit dem 15.09.2026 in tokens.css. */
[hidden]{display:none!important}
/* Nur auf Papier sichtbar, das Gegenstueck zu .nicht-drucken. Siehe @media print unten. */
.nur-drucken{display:none}
/* Die Marke bricht nicht am Bindestrich um: rechtstexte.css erlaubt Silbentrennung. */
.marke-wort{white-space:nowrap;hyphens:manual}

/* SYMBOLE. Seit dem 17.09.2026 tragen sie ihre Maße und fill="none" zusätzlich als Attribute im
   Markup: Fehlt diese Datei einmal (alter Zwischenspeicher, langsame Leitung), malte der Browser
   sie sonst in natürlicher Größe und schwarz gefüllt. Genau das ist am 17.09.2026 in Chrome
   passiert. Diese Regel ist die zweite Absicherung, die Attribute sind die erste. */
.ic{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-size:15px;font-weight:600;line-height:1.3;padding:12px 20px;border-radius:10px;cursor:pointer;
  transition:background .18s,color .18s,transform .18s;border:0;min-height:48px;text-decoration:none;text-align:center}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--rb-akzent);color:var(--rb-weiss)}
/* Seit dem 15.09.2026 wie auf Startseite und Bestellstrecke: beim Ueberfahren 1 px hoeher. */
.btn-primary:hover{background:var(--rb-akzent-tief);color:var(--rb-weiss);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--rb-see-tief);border:1.6px solid var(--rb-see-tief)}
.btn-ghost:hover{background:var(--rb-see-tief);color:var(--rb-weiss)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.aktionen .btn{flex:1 1 200px}

/* ---------- Karte ---------- */
.karte{background:var(--rb-flaeche);border:1px solid var(--rb-linie);border-radius:20px;
  box-shadow:var(--rb-schatten);padding:28px;margin:24px 0}
.karte > h2:first-child{margin-top:0}
@media(max-width:520px){.karte{padding:22px 18px}}

/* ---------- Formular, wie in bestellen.html ---------- */
.feld{margin-bottom:20px}
.feld > label{display:block;font-weight:600;font-size:15.5px;margin-bottom:6px;color:var(--rb-tinte)}
.hilfe{font-size:15px;color:var(--rb-meta);margin-bottom:8px;line-height:1.55}
input[type=text],input[type=email],textarea{
  width:100%;min-height:52px;padding:13px 14px;font-family:inherit;font-size:16px;color:var(--rb-tinte);
  background:var(--rb-weiss);border:1.5px solid var(--rb-meta);border-radius:12px;transition:.15s}
textarea{min-height:104px;line-height:1.55;resize:vertical}
input:hover,textarea:hover{border-color:var(--rb-see)}
input:focus-visible,textarea:focus-visible{border-color:var(--rb-see);outline:3px solid var(--rb-akzent);outline-offset:2px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rb-fehler-rand);background:var(--rb-fehler-grund)}
.fehler{display:none;font-size:13.5px;color:var(--rb-fehler);margin-top:6px;font-weight:500}
.fehler.an{display:block}
/* Wie in bestellen.html: Alarmmeldungen stehen leer im Dokument, der Text kommt beim Anzeigen. */
.fehler[role="alert"]{display:block}
.fehler[role="alert"]:empty{margin-top:0}

.checkzeile{display:flex;gap:11px;align-items:flex-start;min-height:44px;padding:9px 0;cursor:pointer;
  font-size:16px;line-height:1.55}
.checkzeile input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--rb-see)}
.checkzeile input:focus-visible{outline:3px solid var(--rb-akzent);outline-offset:2px}
fieldset.haken-satz{border:0;padding:0;min-inline-size:0}
.haken-satz{border-top:1px solid var(--rb-linie);margin-top:6px;padding-top:10px}
.haken-satz a{color:var(--rb-see);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:12px;margin-block:-12px}
/* Vierundvierzig-Regel auch fuer Links in Hinweistexten (seit 17.09.2026): Der Link zur
   Widerrufsbelehrung stand mit 41 px darunter. Innenabstand bei Inline-Elementen aendert die
   Zeilen nicht. */
.hilfe a,.nachsatz a{padding-block:13px}

.uebersicht{background:var(--rb-papier2);border:1px solid var(--rb-linie);border-radius:14px;padding:18px;margin-bottom:18px}
.uebersicht dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:15px}
.uebersicht dt{color:var(--rb-meta);min-width:0}
.uebersicht dd{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.uebersicht .summe{border-top:1px solid var(--rb-linie);margin-top:14px;padding-top:14px;
  display:flex;align-items:baseline;justify-content:space-between}
.uebersicht .summe span{font-size:15px;font-weight:600}
.uebersicht .summe b{font-family:'Fraunces',serif;font-size:28px;font-weight:600}
.uebersicht .klein{font-size:15px;color:var(--rb-meta);margin:10px 0 0;line-height:1.6}
@media(max-width:420px){
  .uebersicht dl{grid-template-columns:1fr;gap:2px}
  .uebersicht dd{text-align:left;margin-bottom:6px}
}

.senden{width:100%;font-size:16px;margin-top:20px}
.nachsatz{font-size:15px;color:var(--rb-meta);margin:12px 0 0;line-height:1.6}

.kasten{border-radius:14px;padding:18px 20px;margin:18px 0;font-size:15px;line-height:1.6}
.kasten p:last-child{margin-bottom:0}
.kasten.gut{background:var(--rb-gut-grund);border:1px solid var(--rb-gut-linie);color:var(--rb-gut-text)}
.kasten.acht{background:var(--rb-acht-grund);border:1px solid var(--rb-acht-linie);color:var(--rb-acht-text)}

/* ---------- Die Kaufseite: Kopf, Schritte, Vorschau (seit 17.09.2026) ---------- */

/* Dieselbe dunkle Karte wie der fertige Gutschein, damit Kauf und Geschenk zusammengehoeren. */
.geschenk-kopf{background:var(--rb-verlauf);color:var(--rb-auf-dunkel-hell);border-radius:22px;
  box-shadow:var(--rb-schatten);padding:32px 30px;margin:8px 0 24px}
@media(max-width:520px){.geschenk-kopf{padding:26px 20px}}
.geschenk-kopf .marke{display:flex;align-items:center;gap:10px;margin:0;
  font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--rb-gold-text)}
.geschenk-kopf .marke .ic{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.geschenk-kopf h1{color:var(--rb-weiss);margin:16px 0 8px;text-wrap:balance}
.geschenk-kopf .lead{color:var(--rb-auf-dunkel-hell);font-size:17px;margin:0;max-width:52ch}
.geschenk-kopf a:focus-visible{outline:3px solid var(--rb-fokus-dunkel);outline-offset:3px}

/* Drei Schritte nebeneinander, am Handy untereinander. Keine Karten in Karten: flach auf Papier,
   nur durch Symbol und Abstand getrennt. */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:0 0 26px;padding:0}
.schritte li{display:flex;flex-direction:column;gap:6px;min-width:0}
.schritte .ic{width:26px;height:26px;fill:none;stroke:var(--rb-see);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.schritte b{font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--rb-tinte)}
.schritte span{font-size:15px;color:var(--rb-meta);line-height:1.55}
@media(max-width:700px){
  .schritte{grid-template-columns:1fr;gap:14px}
  .schritte li{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .schritte .ic{align-self:center}
  .schritte span{flex:1 1 100%}
}

/* Die Vorschau im Formular: kleiner als das Original, sonst dieselbe Karte. */
.vorschau{margin:0 0 22px}
.vorschau-titel{font-weight:600;font-size:15.5px;color:var(--rb-tinte);margin:0 0 8px}
.gutschein-karte.mini{margin:0;padding:22px 20px;border-radius:18px}
.gutschein-karte.mini .marke{font-size:15px}
.gutschein-karte.mini .marke svg{width:20px;height:20px}
.gutschein-karte.mini .fuer{font-size:16px;margin-top:14px}
.gutschein-karte.mini .fuer b{color:var(--rb-weiss)}
.gutschein-karte.mini .gruss{font-size:17px;margin-top:10px}
.gutschein-karte.mini .code-feld{margin-top:18px;padding:12px 14px}
.gutschein-karte.mini .code-feld b{font-size:clamp(15px,4vw,20px)}
.gutschein-karte.mini .gueltig{font-size:14px;margin-top:12px}

/* ---------- Die Gutscheinseite /gutschein/CODE ---------- */
.gutschein-karte{background:var(--rb-verlauf);color:var(--rb-auf-dunkel-hell);border-radius:22px;padding:34px 30px;
  box-shadow:var(--rb-schatten);margin:8px 0 24px}
@media(max-width:520px){.gutschein-karte{padding:26px 20px}}
.gutschein-karte .marke{display:flex;align-items:center;gap:10px;margin:0;
  font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--rb-gold-text)}
.gutschein-karte .marke svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gutschein-karte h1{color:var(--rb-weiss);margin:18px 0 6px;text-wrap:balance}
.gutschein-karte .fuer{font-size:18px;color:var(--rb-auf-dunkel);margin:0}
.gutschein-karte .gruss{font-family:'Fraunces',serif;font-style:italic;font-size:20px;line-height:1.45;
  white-space:pre-line;overflow-wrap:anywhere;margin:18px 0 0;color:var(--rb-weiss)}
.code-feld{margin-top:26px;background:rgba(255,253,246,.06);border:1.5px dashed rgba(250,232,204,.75);
  border-radius:14px;padding:16px 18px}
.code-feld span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--rb-weiss)}
/* In einer Zeile ab 360 px; darunter darf er umbrechen, statt aus der Karte zu laufen. */
.code-feld b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(17px,5.1vw,28px);letter-spacing:.03em;color:var(--rb-weiss);margin-top:6px;overflow-wrap:anywhere}
.gutschein-karte .gueltig{margin:14px 0 0;font-size:15px;color:var(--rb-auf-dunkel)}

/* ---------- Die Wortmarke im Fuss dieser Seite: Bild statt Maske (28.09.2026) ----------

   Ueberall sonst malt `.wortmarke` currentColor durch marke/wortmarke.png, eine
   Graustufen-Datei mit Alpha. Am Bildschirm ist das richtig. Gedruckt nicht: Chromium
   schreibt die Maske als Bild mit weicher Maske ins PDF, und nicht jeder Betrachter kann
   das. Am 28.09.2026 nachgemessen: poppler/splash zeichnet einen feinen Kasten um die
   Marke, poppler/cairo einen ausgefuellten dunklen Block. Auf einem Gutschein, den jemand
   weiterschickt und irgendwo oeffnet, darf das nicht passieren.

   marke/wortmarke.png selbst hilft nicht weiter: Sie ist **weiss** (gemessen: rgb(255,255,255)
   mit Alpha) und waere auf Papier unsichtbar. marke/wortmarke-mail.png dagegen ist eine
   gewoehnliche RGBA-Datei in genau `--rb-see-tief` (gemessen: rgb(28,61,82) = #1c3d52), also
   derselben Farbe, die der Fuss am Bildschirm ohnehin traegt. Deshalb sieht diese Regel am
   Bildschirm identisch aus und wird trotzdem ueberall gleich gedruckt.

   Sie steht bewusst NICHT in `@media print`: Ein Bild, das nur eine Druckregel nennt, laedt
   der Browser erst beim Drucken. Der PDF-Export wartet nicht darauf, und die Marke fehlte
   dann ganz. Genau das ist am 28.09.2026 passiert.

   Sobald das Logo-Paket mit SVG da ist (LIVEGANG P12), gehoert hier das SVG hin. */
.foot-marke .wortmarke{
  background:url(marke/wortmarke-mail.png) center/contain no-repeat;
  -webkit-mask:none;mask:none}

/* ---------- Drucken: der Gutschein als A4-Blatt zum Verschenken (28.09.2026) ----------

   Vorher blendete der Druckstil den ganzen Fuss aus, also auch die Wortmarke: Das Blatt
   hatte keinen Absender, ein Geschenk ohne Marke. Jetzt bleiben Wortmarke, Claim und der
   Schlusssatz stehen, die Linkzeile geht raus. Engine-Regel 3 sagt "kein PDF"; ueber
   "Drucken, als PDF sichern" entsteht trotzdem eine Datei zum Weiterschicken, ohne dass
   jemand ein PDF erzeugen muss. */
@media print{
  @page{size:A4;margin:14mm}

  /* Raus: Navigation, Knoepfe, Rechtslinks. Der Knopf "Gutschein drucken" darf nicht auf
     dem Gutschein stehen, den er gedruckt hat. */
  .nav,.skip,.aktionen,.nicht-drucken,.foot-links,#laden{display:none!important}
  .nur-drucken{display:block}

  html,body{background:var(--rb-weiss)}
  .page{padding:0;max-width:none;margin:0}

  /* Die Karte ist das Geschenk: Verlauf mitdrucken, nie ueber zwei Seiten reissen. */
  .gutschein-karte{box-shadow:none;margin:0 0 18px;padding:30px 28px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid}
  .gutschein-karte h1{margin:16px 0 6px}
  .code-feld{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Der Code ist das Einzige, was jemand abtippen muss. */
  .code-feld b{font-size:26px}

  .karte{box-shadow:none;border:1px solid var(--rb-linie);margin:0 0 18px;padding:22px 24px;
    break-inside:avoid;page-break-inside:avoid}
  .karte h2{margin-top:0}
  .lead{margin:0 0 14px}

  /* Der Fuss traegt die Marke, sonst weiss niemand, von wem das Blatt kommt. */
  footer{border-top:1px solid var(--rb-linie);margin-top:0;padding:16px 0 0;
    break-inside:avoid;page-break-inside:avoid}
  .foot-in{margin:0}
  .foot-marke{margin:0 auto}
  .foot-marke .wortmarke{width:150px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .liebe{margin-top:8px}
  .liebe svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Links sollen im Druck nicht wie Links aussehen, ihre Adresse steht nirgends. */
  a{text-decoration:none;color:inherit}
}

/* ---------- Bewertungsskala, seit 30.09.2026 ----------
   Fuer public/feedback.html. Fuenf Zahlen in Kreisen statt der fuenf Sterne, die bis
   dahin als mailto-Links in Mail 4 standen (Entscheidung Anna, 29.09.2026): Sterne
   sagten nichts Genaues, und ein mailto zwingt den Kunden, selbst eine Mail
   abzuschicken. Die Kreise sind dieselbe Form wie die Schrittnummern in Mail 1 und im
   Ablauf der Startseite, der Kunde kennt sie also schon.

   Echte Radio-Knoepfe, nur optisch ersetzt: Damit tragen Tastatur (Pfeiltasten),
   Vorlesehilfen und die Beschriftung von allein, ohne ein Zeichen Skript. Das
   sichtbare Feld ist 52 px und erfuellt die 44er-Regel auch am Handy. */
.bewertung{border:0;padding:0;margin:0 0 20px}
.bewertung > legend{display:block;font-weight:600;font-size:15.5px;margin-bottom:6px;
  color:var(--rb-tinte);padding:0}
.skala{display:flex;gap:10px;margin-top:12px}
.skala label{flex:1 1 0;display:block;cursor:pointer;min-width:0}
.skala .zahl{display:flex;align-items:center;justify-content:center;height:52px;
  border:1.6px solid var(--rb-meta);border-radius:12px;background:var(--rb-weiss);
  font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--rb-see-tief);
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.skala label:hover .zahl{border-color:var(--rb-akzent)}
.skala input:checked + .zahl{background:var(--rb-akzent);border-color:var(--rb-akzent);
  color:var(--rb-weiss)}
.skala input:focus-visible + .zahl{outline:3px solid var(--rb-akzent);outline-offset:2px}
/* Die Enden der Skala benennen, sonst weiss niemand, ob 1 oder 5 das Gute ist. */
.skala-enden{display:flex;justify-content:space-between;margin-top:7px;font-size:13.5px;
  color:var(--rb-meta)}
@media (max-width:380px){
  .skala{gap:6px}
  .skala .zahl{height:48px;font-size:19px}
}