/* Der Kundenbereich von PAWCADEMY.
   Warm, ruhig, wenige Farben. Der Chat unten soll einladen, nicht nach
   Software aussehen -- deshalb weiche Blasen, viel Luft und genau ein Akzent. */

:root {
  --gold:      #C4A35A;
  --gold-tief: #A8863C;
  --gold-hell: #F3EBDA;
  --anthrazit: #2B3440;
  --grund:     #F4F0E8;
  --weiss:     #FFFFFF;
  --linie:     rgba(43, 52, 64, .12);
  --leise:     rgba(43, 52, 64, .58);
  --rot:       #9B2335;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;  --s7: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--anthrazit);
  font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.marke {
  background: var(--anthrazit);
  border-bottom: 3px solid var(--gold);
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.marke-wort {
  color: #fff; text-decoration: none; font-weight: 700;
  font-size: 17px; letter-spacing: .07em;
}
.marke-wort span { color: var(--gold); }
.marke-ab button {
  background: none; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.75);
  font: inherit; font-size: 13px; padding: .3em .9em; border-radius: 6px; cursor: pointer;
}
.marke-ab button:hover { background: rgba(255,255,255,.08); color: #fff; }

main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); }
body.schmal main { max-width: 30rem; display: flex; align-items: center; min-height: 60vh; }

/* ── Bausteine ─────────────────────────────────────────────────────────── */
.karte {
  background: var(--weiss);
  border-radius: 14px;
  padding: var(--s5);
  margin-bottom: var(--s5);
  box-shadow: 0 1px 2px rgba(43,52,64,.05), 0 8px 24px -16px rgba(43,52,64,.28);
}
.karte-mitte { width: 100%; text-align: center; padding: var(--s6) var(--s5); }

h1 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
     font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1.15; margin: 0 0 var(--s3); }
h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
     font-size: 1.3rem; margin: 0; }
h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
     color: var(--leise); margin: 0 0 var(--s3); font-weight: 600; }
p  { margin: 0 0 var(--s3); }
.lead  { font-size: 1.02rem; color: var(--leise); }
.klein { font-size: 13.5px; }
.leise { color: var(--leise); }
a { color: var(--gold-tief); }
.zahl { color: var(--leise); font-weight: 400; }

.willkommen { margin-bottom: var(--s5); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: var(--s3) 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: none; padding-bottom: 0; }
.block + .block { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--linie); }

.hund-kopf { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.hund-siegel {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--gold-hell); display: grid; place-items: center; font-size: 1.4rem;
}
.siegel-gross { font-size: 2.4rem; margin-bottom: var(--s3); }

.fehler { background: #FBECEE; color: var(--rot); border-radius: 8px;
          padding: var(--s3); font-size: 14px; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.anmelden { display: flex; flex-direction: column; gap: var(--s2); text-align: left;
            margin: var(--s5) 0 var(--s4); }
.anmelden label { font-size: 13px; font-weight: 600; color: var(--leise); }
.anmelden input[type=email] {
  font: inherit; padding: .8em .9em; border: 1px solid var(--linie);
  border-radius: 9px; background: #fff;
}
.anmelden input[type=email]:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.anmelden button, .knopf {
  font: inherit; font-weight: 600; background: var(--gold); color: #fff;
  border: none; border-radius: 9px; padding: .8em 1.4em; cursor: pointer;
  text-decoration: none; display: inline-block; margin-top: var(--s2);
}
.anmelden button:hover, .knopf:hover { background: var(--gold-tief); }

/* Der Honigtopf. Nicht display:none -- manche Bots ueberspringen genau das.
   So steht das Feld im Baum, ist fuer Menschen aber unerreichbar. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Chat ──────────────────────────────────────────────────────────────── */
.chat { padding-bottom: var(--s4); }
.chat-kopf { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.chat-siegel {
  flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--anthrazit); color: var(--gold);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}

.chat-verlauf {
  display: flex; flex-direction: column; gap: var(--s3);
  max-height: 26rem; overflow-y: auto;
  padding: var(--s4) var(--s2); margin: 0 calc(var(--s2) * -1) var(--s4);
  scroll-behavior: smooth;
}
.chat-leer { text-align: center; color: var(--leise); padding: var(--s5) var(--s4); }
.chat-leer p { margin: 0 0 var(--s2); }

.blase { max-width: 82%; display: flex; flex-direction: column; gap: .2em; }
.blase-text {
  padding: .7em .95em; border-radius: 14px; font-size: 15px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.blase-fuss { font-size: 11.5px; color: var(--leise); padding: 0 .3em; }

/* Was die Aufbereitung erzeugt: Absaetze, Listen, Betonung, Verweise.
   Der erste Absatz bekommt keinen Abstand nach oben, der letzte keinen nach
   unten -- sonst sitzt der Text nicht mittig in der Blase. */
.blase-text p  { margin: 0 0 .7em; }
.blase-text p:last-child  { margin-bottom: 0; }
.blase-text ul { margin: 0 0 .7em; padding-left: 1.15em; }
.blase-text ul:last-child { margin-bottom: 0; }
.blase-text li { margin: .2em 0; }
.blase-text strong { font-weight: 600; }
/* Eine Betonung, die allein im Absatz steht, ist eine Zwischenueberschrift --
   das Modell setzt sie so. Erkannt wird das in der Aufbereitung, nicht hier:
   `strong:only-child` zaehlt nur ELEMENTknoten und uebersieht Text. Ein Absatz
   wie "... gibst aber <strong>kein Signal</strong>. Du wartest ..." hat genau
   ein Element und wurde deshalb mitten im Satz umbrochen. */
.blase-text p.zwischen { margin: .9em 0 .5em; }
.blase-text p.zwischen:first-child { margin-top: 0; }
.blase-text a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.blase-ich .blase-text a { color: #fff; }

.blase-du  { align-self: flex-start; }
.blase-du  .blase-text { background: var(--gold-hell); border-bottom-left-radius: 4px; }

.blase-ich { align-self: flex-end; }
.blase-ich .blase-text { background: var(--anthrazit); color: #fff; border-bottom-right-radius: 4px; }
.blase-ich .blase-fuss { text-align: right; }

/* ── Der Trainer denkt nach ──────────────────────────────────────────────
   Drei Punkte, die nacheinander aufleuchten und leicht springen. Ein
   stehendes Zeichen sieht nach zwölf Sekunden aus wie eine Seite, die hängt --
   gerade weil es stillsteht. */
.blase-warten .blase-text { padding-top: .85rem; padding-bottom: .85rem; }
.denkpunkte { display: inline-flex; gap: .32rem; align-items: center; }
.denkpunkte i {
  width: .44rem; height: .44rem; border-radius: 50%;
  background: var(--gold-tief);
  animation: denken 1.25s ease-in-out infinite;
}
.denkpunkte i:nth-child(2) { animation-delay: .18s; }
.denkpunkte i:nth-child(3) { animation-delay: .36s; }

@keyframes denken {
  0%, 70%, 100% { opacity: .25; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-.2rem); }
}

/* Wer Bewegung abgestellt hat, bekommt sie nicht. Die Punkte bleiben sichtbar
   und pulsieren nur -- ganz ohne Zeichen wäre nicht erkennbar, dass etwas
   läuft. */
@media (prefers-reduced-motion: reduce) {
  .denkpunkte i { animation: denken-blass 1.6s ease-in-out infinite; }
  @keyframes denken-blass { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }
}
.weg { opacity: .55; margin-left: .3em; }

.chat-eingabe { display: flex; gap: var(--s2); align-items: flex-end; }
.chat-eingabe select {
  font: inherit; font-size: 14px; padding: .7em .5em; border: 1px solid var(--linie);
  border-radius: 10px; background: #fff; max-width: 8rem;
}
.chat-eingabe textarea {
  flex: 1; font: inherit; font-size: 15px; padding: .75em .9em; resize: none;
  border: 1px solid var(--linie); border-radius: 12px; background: #fff;
  line-height: 1.5; max-height: 10rem;
}
.chat-eingabe textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.chat-eingabe button {
  flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: none; background: var(--gold); color: #fff; cursor: pointer;
  font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.chat-eingabe button:hover:not(:disabled) { background: var(--gold-tief); }
.chat-eingabe button:disabled { opacity: .45; cursor: default; }
.chat-hinweis { margin: var(--s3) 0 0; text-align: center; }

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.fuss {
  padding: var(--s5) var(--s4); text-align: center; font-size: 12.5px;
  color: var(--leise); display: flex; gap: var(--s4); justify-content: center;
  flex-wrap: wrap; border-top: 1px solid var(--linie);
}
.fuss a { color: var(--leise); }

@media (max-width: 480px) {
  main { padding: var(--s4) var(--s3) var(--s6); }
  .karte { padding: var(--s4); border-radius: 12px; }
  .blase { max-width: 90%; }
}

/* ── Ein Trainingsplan ─────────────────────────────────────────────────────
   Lange Lesestrecke. Deshalb schmaler als der Rest der Seite, groessere
   Zeilenhoehe und Ueberschriften, die man beim Blaettern wiederfindet. */
.zurueck { margin: 0 0 var(--s4); font-size: 14px; }
.zurueck a { color: var(--leise); text-decoration: none; }
.zurueck a:hover { color: var(--gold-tief); }

.plan { padding: var(--s6) var(--s5); }
.plan-kopf { padding-bottom: var(--s4); margin-bottom: var(--s5);
             border-bottom: 2px solid var(--gold); }
.plan-kopf h1 { margin-bottom: var(--s2); }
.plan-kopf p  { margin: 0; }

.plan-block { max-width: 36rem; }
.plan-block + .plan-block { margin-top: var(--s6); }
.plan-block p { line-height: 1.7; }

.plan-ab {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: 1.25rem; line-height: 1.25; text-transform: none; letter-spacing: 0;
  color: var(--anthrazit); margin: var(--s6) 0 var(--s3);
}
.plan-block > .plan-ab:first-child, .plan-einheit > .plan-ab { margin-top: 0; }

/* Eine Einheit ist ein eigener Abschnitt. Der Goldstrich links haelt die
   Schritte optisch zusammen, ohne aus jedem Block eine Karte zu machen. */
.plan-einheit {
  border-left: 3px solid var(--gold-hell);
  padding-left: var(--s5);
}
.plan-ziel { font-size: 1.02rem; }

.plan-ue {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gold-tief); font-weight: 600; margin: var(--s4) 0 var(--s2);
}
.plan-feld + .plan-feld { margin-top: var(--s4); }
.plan-merk { font-size: 15px; }
.plan-merk strong { color: var(--anthrazit); }

.plan-schritte { margin: 0; padding-left: 1.3em; }
.plan-schritte li { margin: 0 0 var(--s3); line-height: 1.65; }
.plan-schritte li:last-child { margin-bottom: 0; }

.plan-fuss { margin-top: var(--s7); padding-top: var(--s5);
             border-top: 1px solid var(--linie); }

@media (max-width: 480px) {
  .plan { padding: var(--s4); }
  .plan-einheit { padding-left: var(--s4); }
}

/* Ein Planeintrag ist anklickbar -- die ganze Zeile, nicht nur der Titel. */
.plan-link { display: block; color: inherit; text-decoration: none; }
.plan-link:hover strong { color: var(--gold-tief); text-decoration: underline;
                          text-underline-offset: .15em; }

.mehr { margin-top: var(--s3); }
.mehr summary { font-size: 13.5px; color: var(--leise); cursor: pointer;
                list-style: none; padding: var(--s2) 0; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::before { content: "▸ "; color: var(--gold); }
.mehr[open] summary::before { content: "▾ "; }
.mehr summary:hover { color: var(--gold-tief); }

/* Welcher Hund im Chat gemeint war. Nur sichtbar, wenn es mehrere gibt. */
.blase-hund { margin-left: .4em; padding: .05em .5em; border-radius: 999px;
              background: var(--gold-hell); color: var(--gold-tief);
              font-size: 10.5px; font-weight: 600; }
.blase-ich .blase-hund { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }

/* ── Formular: „Noch ein Hund" ────────────────────────────────────────────
   Dieselben Bausteine wie die Anmeldung, nur mehr davon. Bewusst ohne
   Rahmen um die Gruppen -- die Ueberschriften tragen die Gliederung. */
.formular { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s5); }
.formular fieldset { border: none; margin: 0; padding: 0;
                     display: flex; flex-direction: column; gap: var(--s2); }
.formular legend {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--leise); font-weight: 600; padding: 0;
  margin-bottom: var(--s2); width: 100%;
  border-bottom: 1px solid var(--linie); padding-bottom: var(--s2);
}
.formular label { font-size: 13px; font-weight: 600; color: var(--leise); margin-top: var(--s2); }
.formular input[type=text], .formular select, .formular textarea {
  font: inherit; font-size: 15px; padding: .7em .85em; background: #fff;
  border: 1px solid var(--linie); border-radius: 9px; width: 100%;
}
.formular textarea { resize: vertical; line-height: 1.5; }
.formular input[type=text]:focus, .formular select:focus, .formular textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent;
}
.formular button { align-self: flex-start; }
.pflicht { color: var(--rot); }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.zweispaltig > div { display: flex; flex-direction: column; gap: var(--s2); }
.zweispaltig label { margin-top: 0; }
@media (max-width: 480px) { .zweispaltig { grid-template-columns: 1fr; } }

/* Ein Haken steht in einer Zeile mit seinem Satz, nicht darueber. */
.haken { display: flex; gap: var(--s3); align-items: flex-start;
         font-size: 15px; font-weight: 400; color: var(--anthrazit);
         margin-top: var(--s3); cursor: pointer; }
.haken input { margin-top: .3em; flex: 0 0 auto; width: 1.05em; height: 1.05em;
               accent-color: var(--gold); }

/* Der Weg zum zweiten Hund, unten in der Akte. */
.noch-ein-hund { text-align: center; padding: var(--s5); }
.noch-ein-hund p { margin: 0 0 var(--s3); }

/* Die Tür vor dem Chat: angefordert, freigeschaltet, Kontingent aufgebraucht. */
.chat-tuer { display: flex; flex-direction: column; gap: var(--s3); }
.chat-tuer p { margin: 0; }
.chat-tuer form { margin-top: var(--s2); }

/* ── Drucken ───────────────────────────────────────────────────────────────
   Wer einen Trainingsplan mit auf die Wiese nimmt, druckt ihn. Ohne diesen
   Abschnitt kam die Bildschirmseite heraus: Markenband, Abmeldeknopf, der
   Verweis zum Chat, weiße Karten mit Schatten auf grauem Grund.

   EINE EINHEIT BEGINNT AUF EINER NEUEN SEITE
   Auf dem Platz blättert man zu "Einheit 2". Eine Einheit, die unten anfängt
   und oben weitergeht, macht genau das schwer.

   Flächenfarbe bleibt draußen. Der Goldstrich links an einer Einheit wird zu
   einem grauen -- er trägt hier die Gliederung, nicht die Marke, und ein
   Drucker ohne Hintergrundgrafiken hätte ihn sonst verschluckt. */
/* ── Termine ───────────────────────────────────────────────────────────────
   Zwei Spalten je Zeile: links wann, rechts was. Die Wann-Spalte hat eine
   feste Breite, damit die Titel untereinander an derselben Kante beginnen --
   sonst liest sich die Liste als Treppe. */
.terminliste li.termin {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) 0;
}
.termin-wann { display: flex; flex-direction: column; }
.termin-tag  { font-weight: 600; }
.termin-uhr  { font-size: 13.5px; color: var(--leise); font-variant-numeric: tabular-nums; }
.termin-was  { display: flex; flex-direction: column; gap: var(--s1); }
.termin-tuen { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }

.knopf-klein {
  padding: .35em 1em; font-size: 13.5px; border-radius: 7px;
}
.leiser-knopf {
  align-self: center; font-size: 13.5px; color: var(--leise);
  text-decoration: underline; text-underline-offset: 2px;
}
.leiser-knopf:hover { color: var(--anthrazit); }

.gewesen { margin-top: var(--s4); border-top: 1px solid var(--linie); padding-top: var(--s3); }
.gewesen summary {
  cursor: pointer; font-size: 13.5px; color: var(--leise);
  list-style: none; display: inline-flex; align-items: center; gap: .4em;
}
.gewesen summary::-webkit-details-marker { display: none; }
.gewesen summary::before { content: '\25B8'; transition: transform .15s; }
.gewesen[open] summary::before { transform: rotate(90deg); }
.gewesen summary:hover { color: var(--anthrazit); }

/* Das Kalenderfeld bringt sein eigenes Aussehen mit. Hier steht nur, dass es
   sich nicht gegen die Karte stemmt, in der es sitzt. */
#buchen [data-rk-termine] { margin-top: var(--s4); }

@media (max-width: 560px) {
  .terminliste li.termin { grid-template-columns: 1fr; gap: var(--s2); }
  .termin-wann { flex-direction: row; gap: var(--s2); align-items: baseline; }
}

@media print {
  .marke, .zurueck, .plan-fuss, .knopf, form, nav, footer { display: none !important; }

  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; }
  main  { max-width: none; padding: 0; margin: 0; }

  .karte {
    background: none; box-shadow: none; border: 0;
    border-radius: 0; padding: 0; margin: 0;
  }

  .plan-kopf { border-bottom: 1.5pt solid #000; }
  .plan-block { max-width: none; break-inside: avoid; }
  .plan-einheit { border-left: 2pt solid #999; padding-left: 12pt; }

  /* Die erste Einheit schließt an die Einschätzung an, jede weitere fängt neu an. */
  .plan-einheit { break-before: page; }
  .plan-block:first-of-type + .plan-einheit,
  .plan-einheit:first-of-type { break-before: auto; }

  .plan-ab { break-after: avoid; }
  .plan-ue { break-after: avoid; color: #000; }
  .plan-feld, .plan-schritte li { break-inside: avoid; }

  a { color: inherit; text-decoration: none; }
  details { display: block; }
  details > summary { display: none; }
}

/* ── Übungen ──────────────────────────────────────────────────────────────
   Die Liste ist zum Auswählen, die Einzelseite zum Mitnehmen aufs Handy.
   Deshalb große Zeilenhöhe und kein enger Satz: gelesen wird sie draußen,
   mit einer Hand, während die andere die Leine hält. */

.ue-liste { list-style: none; margin: 0; padding: 0; }
.ue-eintrag { padding: 14px 0; border-top: 1px solid var(--linie, #e6dfd2); }
.ue-eintrag:first-child { border-top: 0; }
.ue-eintrag > a { text-decoration: none; display: block; }
.ue-titel { font-weight: 600; font-size: 1.06rem; }
.ue-eintrag > a:hover .ue-titel { text-decoration: underline; }

.ue-marke {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 10px; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: #efeadf; color: #5c5348; vertical-align: 2px;
}
.ue-neu .ue-marke { background: #a8792c; color: #fff; }
.ue-marke-acht { background: #fbf0ee; color: #a3402f; }

.ue-ziel    { margin: 4px 0 0; color: #3d372f; }
.ue-hinweis { margin: 6px 0 0; padding: 7px 11px; border-radius: 5px;
              background: #faf7f0; border-left: 3px solid #a8792c;
              font-size: .95rem; }
.ue-hinweis-gross { margin: 0 0 16px; padding: 12px 15px; border-radius: 6px;
              background: #faf7f0; border-left: 3px solid #a8792c; }

.ue-acht { margin: 0 0 16px; padding: 12px 15px; border-radius: 6px;
           background: #fbf0ee; border-left: 3px solid #a3402f; }

.ue-block h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
               color: #8a8073; margin: 0 0 8px; }
.ue-block p  { margin: 0 0 10px; line-height: 1.62; }
.ue-block p:last-child { margin-bottom: 0; }

.ue-warnung { border-left: 3px solid #a3402f; }
.ue-warnung h2 { color: #a3402f; }

/* ── Rechnungen ───────────────────────────────────────────────────────────
   Ein Beleg ist eine Karte, keine Zeile in einer Aufzählung. Auf dem Handy
   bricht eine Tabelle ohnehin um, und die erste Fassung sah genau danach aus:
   Punkte, Einrückung, Knöpfe untereinander. */

.rg-summe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.rg-kachel {
  flex: 0 1 auto; padding: 12px 18px; border-radius: 8px;
  background: #f3efe7; display: flex; flex-direction: column; gap: 2px;
}
.rg-kachel-zahl { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
                  line-height: 1.1; }
.rg-kachel-wort { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
                  color: #8a8073; }
.rg-kachel-offen { background: #faf3e4; }
.rg-kachel-offen .rg-kachel-zahl { color: #8a6a1f; }
.rg-kachel-gut   { background: #eef6ee; }
.rg-kachel-gut   .rg-kachel-zahl { color: #3f6b3f; }

.rg-beleg .rg-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
}
.rg-nummer { font-weight: 600; font-size: 1.02rem; }
.rg-datum  { color: #8a8073; font-size: .88rem; margin-left: 6px; }

.rg-marke {
  padding: 2px 9px; border-radius: 10px; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.rg-offen    { background: #efeadf; color: #5c5348; }
.rg-teil     { background: #faf3e4; color: #8a6a1f; }
.rg-faellig  { background: #fbf0ee; color: #a3402f; }
.rg-bezahlt  { background: #eef6ee; color: #3f6b3f; }
.rg-guthaben { background: #eef6ee; color: #3f6b3f; }
.rg-still    { background: #f2f0ec; color: #8a8073; }

.rg-zahlen { margin-top: 8px; display: flex; align-items: baseline;
             gap: 12px; flex-wrap: wrap; }
.rg-betrag { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-neben  { color: #5c5348; font-size: .9rem; }

.rg-knoepfe { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Der zweite und dritte Knopf sind nicht die Hauptsache. Drei gleich laute
   Knoepfe nebeneinander sagen dem Auge nicht, welcher gemeint ist. */
.knopf-still {
  background: transparent; color: var(--gold-tief, #8a6a1f);
  box-shadow: inset 0 0 0 1px currentColor;
}
.knopf-still:hover { background: #faf3e4; }

.rg-rahmen { margin-top: 14px; }
.rg-rahmen iframe {
  width: 100%; height: 640px; border: 1px solid var(--linie, #e6dfd2);
  border-radius: 6px; background: #f5f2ec;
}
@media (max-width: 640px) {
  .rg-rahmen iframe { height: 420px; }
  .rg-knoepfe .knopf { flex: 1 1 auto; text-align: center; }
}

/* Der Weg zurueck. Er stand bisher nur auf zwei von sechs Unterseiten. */
.zurueck { margin: 22px 0 0; }
.zurueck a { color: #5c5348; text-decoration: none; font-size: .94rem; }
.zurueck a:hover { text-decoration: underline; }

/* ── Tipp des Tages ──────────────────────────────────────────────────────
   Das einzige Kaertchen, das nicht weiss ist. Es steht ganz oben und soll
   sich vom Rest abheben, ohne zu schreien: der warme Goldton der Marke als
   Grund, der Text im gewohnten Anthrazit. */
.karte.tipp {
  background: linear-gradient(180deg, var(--gold-hell) 0%, #FBF6EC 100%);
  border: 1px solid rgba(196, 163, 90, .38);
  box-shadow: 0 1px 2px rgba(43, 52, 64, .04);
}
.tipp-marke {
  margin: 0 0 var(--s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-tief);
}
.karte.tipp h2 {
  margin: 0 0 var(--s3);
  font-size: 20px;
  line-height: 1.3;
  text-wrap: balance;
}
.tipp-text { margin: 0; }
.tipp-herkunft {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid rgba(196, 163, 90, .3);
  font-size: 13px;
  color: var(--leise);
}

/* ── Aushang ─────────────────────────────────────────────────────────────
   Steht über dem Tipp des Tages. Anders gefärbt als das goldene Kärtchen:
   ein Aushang ist eine Ansage, kein Wissenshäppchen -- deshalb weiß mit
   kräftiger Kante statt getönt. */
.karte.aushang {
  border-left: 4px solid var(--anthrazit);
}
.aushang-marke {
  margin: 0 0 var(--s2);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--leise);
}
.karte.aushang h2 { margin: 0 0 var(--s3); font-size: 21px; line-height: 1.25; text-wrap: balance; }
.aushang-text { margin: 0 0 var(--s4); }

.aushang-anmeldung {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: var(--s3);
}
.aushang-stand { margin: 0; font-weight: 600; }
.aushang-stand .leise { font-weight: 400; }
.aushang-form { display: flex; flex-direction: column; gap: var(--s3); margin: 0; }
.aushang-zahl, .aushang-notiz { display: flex; flex-direction: column; gap: var(--s1); }
.aushang-zahl > span, .aushang-notiz > span { font-size: 13px; color: var(--leise); }
.aushang-zahl input { width: 5rem; }
.aushang-zahl input, .aushang-notiz input {
  padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 8px;
  font: inherit; background: var(--weiss); color: inherit;
}
.aushang-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.aushang-fuss { margin: 0; }
.knopf-leise {
  background: transparent; color: var(--anthrazit);
  border: 1px solid var(--linie);
}
.knopf-leise:hover { border-color: var(--anthrazit); }
.aushang-meldung {
  margin: calc(var(--s5) * -1 + var(--s3)) 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--gold-hell); border-radius: 10px;
  font-size: 15px;
}

/* ── Die Eingangsseite ───────────────────────────────────────────────────
   Wer von pawcademy.eu kommt, landet hier zuerst. Das Siegel steht oben,
   damit auf einen Blick klar ist, dass er richtig ist -- dasselbe Zeichen
   traegt die Webseite. */
.karte-tor { text-align: center; }
.tor-logo {
  width: 108px; height: 108px;
  margin: calc(var(--s2) * -1) auto var(--s4);
  display: block;
}
.karte-tor h1 { margin-bottom: var(--s3); }
.karte-tor .lead { margin-bottom: var(--s3); }
.tor-wie { margin: 0 0 var(--s5); color: var(--leise); font-size: 15px; }
.karte-tor form { text-align: left; }

/* Wer den Zugang bekommt. Steht ueber dem Weg fuer Nichtkunden, damit die
   Reihenfolge stimmt: erst die Bedingung, dann die Alternative. */
.tor-fuer-wen {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  background: var(--gold-hell); border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: var(--anthrazit);
}

.tor-noch-nicht {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--linie);
}
.tor-noch-nicht p { margin: 0 0 var(--s2); }
.tor-knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center; margin-top: var(--s4) !important;
}
.tor-knoepfe .knopf { flex: 0 1 auto; }

/* Der Zustand nach dem Absenden. Hier steht der Hinweis noch einmal --
   wer nichts bekommt, liest DIESE Seite. */
.tor-hinweis {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--grund); border-radius: 10px;
  text-align: left; font-size: 15px;
}
.tor-hinweis p { margin: 0 0 var(--s2); }
.tor-hinweis ul { margin: 0 0 var(--s3); padding-left: 1.2em; line-height: 1.55; }
.tor-hinweis li { margin-bottom: var(--s1); }

@media (max-width: 420px) {
  .tor-logo { width: 84px; height: 84px; }
  .tor-knoepfe { flex-direction: column; }
  .tor-knoepfe .knopf { width: 100%; }
}

/* ── Supportsicht ────────────────────────────────────────────────────────
   Ralph sieht die Seite eines Menschen, ohne in seinem Namen zu handeln.
   Das Band ist absichtlich laut: eine Supportsicht, die aussieht wie die
   echte Seite, ist eine Falle fuer den, der sie benutzt. */
.supportband {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; flex-wrap: wrap;
  padding: .55rem 1rem;
  background: #8A6A32; color: #fff;
  font-size: .86rem; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 2px 12px rgba(43, 52, 64, .18);
}
.supportband form { margin: 0; }
.supportband button {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12); color: #fff;
  padding: .18rem .7rem; border-radius: 999px;
  font: inherit; cursor: pointer;
}
.supportband button:hover { background: rgba(255, 255, 255, .24); }

/* ── Preis am Aushang ────────────────────────────────────────────────────
   Der Preis ist die eine Angabe, bei der ein Missverständnis Geld kostet.
   Er steht deutlich da, und die Gesamtsumme sitzt direkt über dem Knopf --
   das verlangt § 312j Abs. 2 BGB, und es ist ohnehin der Ort, an dem man
   sie sucht. */
.aushang-preis {
  margin: .55rem 0 0;
  font-size: 1.02rem;
}
.aushang-preis strong { font-size: 1.16rem; color: #8A6A32; }

.aushang-summe {
  margin: .7rem 0 .55rem;
  padding: .5rem .75rem;
  background: rgba(138, 106, 50, .09);
  border-radius: 9px;
  font-size: .96rem;
}
.aushang-summe-zahl { font-size: 1.1rem; color: #8A6A32; }

.aushang-recht {
  margin: .55rem 0 0;
  line-height: 1.55;
  max-width: 46rem;
}

/* ── Erzählen statt tippen ─────────────────────────────────────────────
   Derselbe Kasten wie im Onboarding, nur im Vokabular dieser Seite.       */
.erzaehl-feld .fragen {
  background: var(--gold-hell);
  border: 1px solid rgba(196,163,90,.35);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin: .8rem 0;
}
.erzaehl-feld .fragen > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.erzaehl-feld .fragen-inhalt { margin-top: .6rem; font-size: 13.5px; line-height: 1.55; }
.erzaehl-feld .fragen-block {
  margin: .75rem 0 .2rem; font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--leise);
}
.erzaehl-feld .fragen-inhalt ol { margin: 0; padding-left: 1.25rem; }
.erzaehl-feld .fragen-inhalt li { margin-bottom: .28rem; }
.erzaehl-feld textarea { width: 100%; font: inherit; line-height: 1.55; resize: vertical; }

.aufnahme { margin: .8rem 0 1rem; }
.aufnahme-zeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.aufnahme-knopf { display: inline-flex; align-items: center; gap: .55rem; }
.aufnahme-knopf .punkt {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rot); flex-shrink: 0;
}
.aufnahme-knopf.laeuft { border-color: var(--rot); color: var(--rot); }
.aufnahme-knopf.laeuft .punkt { animation: aufnahme-pochen 1.1s ease-in-out infinite; }
.aufnahme-knopf:disabled { opacity: .6; cursor: progress; }
@keyframes aufnahme-pochen { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .aufnahme-knopf.laeuft .punkt { animation: none; }
}
.aufnahme-uhr {
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--rot);
}
.aufnahme-hinweis.fehler { color: var(--rot); }