/* Gemeinsames Design für Impressum, Datenschutz, AGB, Widerrufsbelehrung */
:root{
  /* Die Tokens (--rb-*) stehen seit dem 15.09.2026 in tokens.css, das jede Seite vor
     dieser Datei laedt. Die bisherigen Namen zeigen darauf, damit der Rest der Datei
     unveraendert bleibt. */
  --ink:var(--rb-see-tief);
  --cream:var(--rb-papier); --card:var(--rb-flaeche);
  --text:var(--rb-text); --text-soft:var(--rb-meta); --line:var(--rb-linie);
  /* --forest, --moss, --amber und --terra sind am 29.09.2026 entfallen: Sie hingen nur
     noch an den geloeschten Entwurfs-Bauteilen. Die uebrigen sechs bleiben vorerst, weil
     sie an rund dreissig Stellen dieser Datei stehen; sie aufzuloesen ist eine eigene
     Aufgabe (Audit vom 29.09.2026, P2). */
}
*{box-sizing:border-box;margin:0;padding:0}
/* Lange deutsche Woerter sprengten bei 320 px die Breite: "Geschäftsbedingungen"
   in der Ueberschrift, "Verbraucherschlichtungsstelle" im Fliesstext. Umbrechen,
   wo es sein muss. Das html-Element traegt lang="de".
   Seit dem 01.10.2026 trennt der Browser nur noch in Ueberschriften und nur lange
   Woerter: hyphens:auto auf body trennte am Handy fast jede Zeile ("Be-stellung" in
   der Ueberschrift der Danke-Seite, "Bestä-tigung", "Mo-nat"). Im Fliesstext passt
   bei 320 px jedes Wort in die Zeile, overflow-wrap faengt den Rest ab. */
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--cream);
  line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6;
  -webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6}
/* Linkfarbe. --terra ergab nur 3,56:1, noetig sind 4,5:1. Danach stand hier
   --rb-akzent #a15626, das ergibt auf dem Papierton aber nur 4,60:1 - konform,
   aber ohne Reserve. Seit dem 07.09.2026 --rb-akzent-tief #834319: 6,41:1 auf
   Papier, 7,42:1 auf der hellen Flaeche. Nachgerechnet, Hinweis von Niklas
   aus Issue #12. */
a{color:var(--rb-akzent-tief);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
/* VIERUNDVIERZIG-REGEL (DESIGN.md), seit dem 29.09.2026 (Audit): "Kleine Links im Fliesstext
   bekommen unsichtbaren Innenabstand statt groesserer Schrift." Auf der Startseite stand die
   Regel seit dem 15.09.2026, auf diesen sieben Seiten fehlte sie: "hallo@reise-brief.de" und
   "Vertrag widerrufen" waren 20 px hoch. Bei Inline-Elementen verschiebt padding-block die
   Zeilen nicht, das Ziel waechst auf 46 px. Buttons sind ausgenommen, die sind schon 48 px. */
.page p a:not(.btn):not(.knopf):not(.knopf-hell),
.page li a:not(.btn):not(.knopf):not(.knopf-hell),
.page dd a, .page td a{padding-block:13px}

.nav{position:sticky;top:0;z-index:50;background:rgba(243,236,219,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  max-width:820px;margin:0 auto;padding:12px 22px}
/* Kopf seit dem 15.09.2026 wie auf der Startseite und im Brief, mit der Wortmarke (tokens.css). */
.logo{display:flex;align-items:center;color:var(--rb-see-tief);min-height:44px;text-decoration:none}
.logo .wortmarke{width:168px}
.back{font-size:14.5px;font-weight:500;color:var(--rb-see);min-height:44px;display:inline-flex;align-items:center}
.back:hover{color:var(--ink)}

.page{max-width:820px;margin:0 auto;padding:44px 22px 80px}
h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,5vw,42px);
  line-height:1.1;margin-bottom:10px;color:var(--ink)}
h2{font-family:'Fraunces',serif;font-weight:600;font-size:22px;
  margin:36px 0 12px;color:var(--ink)}
h3{font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin:24px 0 8px;color:var(--rb-tinte)}
p{margin-bottom:14px}
ul,ol{margin:0 0 14px 22px}
li{margin-bottom:7px}
.lead{color:var(--text);font-size:17px;margin-bottom:8px}
.updated{font-size:13px;color:var(--text-soft);margin-bottom:30px}

/* --- Barrierefreiheit --- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--rb-akzent);outline-offset:3px;border-radius:6px}

/* Wie auf der Startseite. Beim Ueberfahren blieb die Schrift vorher dunkel auf dunkel,
   weil a:hover die Farbe umstellte. */
.skip{position:absolute;left:12px;top:-70px;z-index:100;background:var(--ink);color:var(--rb-weiss);
  padding:12px 18px;border-radius:9px;font-weight:600;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
.skip:hover{color:var(--rb-weiss)}

/* Die drei Entwurfs-Bauteile (.draft, .ph, .note) und der Inline-Code dazu sind am
   29.09.2026 entfernt: Der letzte Platzhalter stand bis dahin auf empfehlen.html, alle
   Entwurfs-Banner waren schon vorher raus. Mit ihnen gingen fuenf Farbwerte, die in
   tokens.css nie standen (#fff4d6, #ffe9a8, #8a5a12, #6b4a15, #7a4d08) und der
   4-px-Streifen links an .note, den DESIGN.md fuer Hinweiskaesten ausdruecklich
   ausschliesst ("voll umrandet, nie mit farbigem Streifen links"). */

.box{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:18px 0}

/* DUNKLE KARTE, seit dem 17.09.2026 (Niklas). Dieselbe Form wie die Schlusskarte der
   Startseite (.final): Markenverlauf, Radius 24, weicher Schatten. Damit endet die
   Danke-Seite wie die Startseite und nicht als nackter Rechtstext. */
.dankkarte{background:var(--rb-verlauf);color:var(--rb-auf-dunkel-hell);
  border-radius:var(--r-flaeche);box-shadow:var(--rb-schatten);
  padding:44px 40px;margin:0 0 22px;text-align:center}
@media(max-width:520px){.dankkarte{padding:32px 22px}}
.dankkarte h1{color:var(--rb-weiss);margin-bottom:14px}
/* h2 und h3 stehen in rechtstexte.css in dunkler Tinte. Auf dem Verlauf waere das unlesbar. */
.dankkarte h2{color:var(--rb-weiss);font-size:26px;margin:0 0 12px}
.dankkarte h3{color:var(--rb-weiss)}
.dankkarte p{color:var(--rb-auf-dunkel);margin:0 auto 14px;max-width:52ch}
.dankkarte .lead{color:var(--rb-auf-dunkel-hell);font-size:17px}
.dankkarte p:last-child{margin-bottom:0}
.dankkarte a{color:var(--rb-weiss);text-decoration:underline;text-underline-offset:3px}
/* Vierundvierzig-Regel wie auf der Startseite: Links im Fliesstext bekommen unsichtbaren
   Innenabstand statt groesserer Schrift. Bei Inline-Elementen aendert das die Zeilen nicht. */
.dankkarte a:not(.knopf-hell){padding-block:13px}
/* Aufzaehlung in der Karte ohne Punkte: In einer mittigen Karte haengen Aufzaehlungszeichen
   links neben dem Text und lassen ihn schief aussehen. Seit dem 17.09.2026 (404-Seite). */
.dankkarte ul{list-style:none;padding:0;margin:0 auto 14px;max-width:52ch;
  text-align:center;color:var(--rb-auf-dunkel)}
.dankkarte li{margin-bottom:6px}
.dankkarte li:last-child{margin-bottom:0}
/* Fokusring auf dunklem Grund, wie auf der Startseite (CLAUDE.md). */
.dankkarte a:focus-visible{outline:3px solid var(--rb-fokus-dunkel);outline-offset:3px}
/* Heller Knopf auf dunklem Grund, das Gegenstueck zu .btn-hell der Startseite. */
.knopf-hell{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border:1.6px solid rgba(255,255,255,.72);border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--rb-weiss);text-decoration:none;
  transition:background .18s,color .18s}
.knopf-hell:hover{background:var(--rb-flaeche);color:var(--rb-see-tief);border-color:var(--rb-flaeche)}
.dankkarte .knopf-hell{margin-top:8px}

/* Fuss wie auf der Startseite, seit dem 15.09.2026 auf allen Seiten gleich: Links mit
   44 px Hoehe, darunter Marke und Schlusssatz wie im Brief. */
footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 22px 40px}
/* Seit dem 17.09.2026 (Niklas): der ganze Fuss steht mittig, wie auf allen Seiten. */
.foot-in{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;
  justify-content:center;align-items:center;text-align:center;font-size:14px;color:var(--text-soft)}
.foot-in p{margin:0}
.foot-links{display:flex;gap:0 8px;flex-wrap:wrap;justify-content:center}
.foot-links a{color:var(--rb-see);text-underline-offset:3px;min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.foot-links a:hover{color:var(--ink)}
.foot-marke{display:flex;flex-direction:column;align-items:center;gap:8px;margin:30px auto 0;color:var(--rb-see-tief)}
.foot-marke .wortmarke{width:208px}
.foot-marke .claim{font-size:15px;letter-spacing:.02em}
/* Nur auf `widerruf-erklaeren.html`: dort steht statt der Wortmarke die Unterschrift,
   wie am Ende der Mails (Entscheidung Anna, 28.09.2026). Die Wortmarke steht auf dieser
   Seite schon im Kopf. */
.foot-marke .foot-namen{font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:26px;line-height:1.2;color:var(--rb-see-tief)}
.liebe{margin:10px 0 0;text-align:center;font-size:16px;color:var(--text-soft)}
.liebe svg{width:16px;height:16px;margin:0 2px;vertical-align:-.15em;fill:none;stroke:var(--rb-see);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:520px){
  /* Fuenf oder sechs Links passen bei 375 px nicht in eine Zeile; statt eines einzelnen
     Links in Zeile zwei stehen sie in Dreiergruppen. Seit dem 15.09.2026. */
  /* Seit dem 17.09.2026 eine mittige, umbrechende Zeile statt eines starren Dreier-Rasters:
     Das Raster liess die zweite Reihe wie eine Tabellenspalte aussehen. */
  .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px}
}

@media(max-width:520px){
  .page{padding:32px 18px 60px}
  .nav-in{padding:10px 16px}
  .logo .wortmarke{width:146px}
}

/* Die elektronische Widerrufsfunktion, § 356a BGB (20.09.2026, Engine-Issue #350, E58).
   Abs. 1 verlangt sie „hervorgehoben platziert und leicht zugänglich"; deshalb steht der
   Kasten oben in der Widerrufsbelehrung und trägt einen echten Knopf statt eines Links im
   Fließtext. Maße und Radius wie die Buttons der Startseite (48 px, Radius 10). */
.widerruf-funktion{border-color:var(--rb-see);margin-bottom:26px}
.widerruf-funktion p:last-child{margin-bottom:0}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 22px;border-radius:10px;background:var(--rb-akzent);color:var(--rb-weiss);
  font-weight:600;font-size:16px;text-decoration:none;transition:background .18s}
.knopf:hover{background:var(--rb-akzent-tief);color:var(--rb-weiss)}