/* ============================================================
   e-Widerruf – Werkzeugseiten (Fristenrechner, Musterbestätigung)
   Ergaenzt styles.css und ratgeber.css. Eigene Datei, weil beide
   Seiten Bausteine brauchen, die kein anderer Ratgeber-Artikel hat –
   und damit die Artikel nichts mitschleppen, was sie nie benutzen.

   NACH JEDER AENDERUNG HIER: ?v= in den betroffenen Seiten erhoehen
   (/assets/ ist ein Jahr immutable gecacht, siehe styles.css).
   ============================================================ */

/* ---------------------------------------------------------- Rechner: Eingabe */

.rechner{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.6rem 1.7rem; margin:2rem 0 0;
  display:grid; gap:1.25rem;
}
@media (min-width:640px){
  .rechner{grid-template-columns:1fr 1fr}
  .rechner .r-breit{grid-column:1 / -1}
}

.r-feld{display:flex; flex-direction:column; gap:.4rem}
.r-feld label{
  font-weight:600; font-size:.93rem; color:var(--ink); line-height:1.35;
}
.r-feld select, .r-feld input[type="date"]{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.62rem .7rem; width:100%;
}
.r-feld select:focus-visible, .r-feld input:focus-visible,
.kopieren:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.r-hilfe{font-size:.84rem; color:var(--ink-3); line-height:1.5; margin:0}

/* Kontrollkaestchen mit Beschriftung daneben, nicht darunter.

   Die Spezifitaet ist hier Absicht: .r-check ist selbst ein <label> und wird
   sonst von .r-feld label (0-1-1) mit font-weight:600 ueberstimmt - dann steht
   der ganze Erklaertext fett. label.r-check kommt auf 0-2-1 und gewinnt. */
.r-feld label.r-check{
  display:flex; align-items:flex-start; gap:.65rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.85rem 1rem;
  font-weight:400; font-size:1rem;
}
.r-check input{margin-top:.22rem; width:1.05rem; height:1.05rem; accent-color:var(--brand)}
.r-check span{font-size:.92rem; color:var(--ink-2); line-height:1.5}
.r-check b{color:var(--ink); font-weight:600}

/* ---------------------------------------------------------- Rechner: Ausgabe */

.r-ergebnis{
  grid-column:1 / -1;
  background:var(--brand-tint); border-radius:var(--r-sm);
  padding:1.4rem 1.5rem; border-left:3px solid var(--brand);
}
.r-ergebnis[hidden]{display:none}

.r-label{
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2);
  margin:0 0 .3rem;
}
.r-datum{
  font-size:1.35rem; font-weight:700; color:var(--ink);
  letter-spacing:-.015em; margin:0; line-height:1.25;
}
.r-grund{font-size:.88rem; color:var(--ink-2); margin:.45rem 0 0}

.r-schritte{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
  border-top:1px solid rgba(15,118,110,.2); padding-top:1.05rem;
}
.r-schritte li{font-size:.9rem; color:var(--ink-2); line-height:1.55; margin:0}
.r-norm{
  display:block; font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.04em; color:var(--brand-2); margin-bottom:.15rem;
}
.r-warnung{
  font-size:.89rem; color:var(--ink-2); line-height:1.55;
  margin:1.05rem 0 0; padding-top:.95rem;
  border-top:1px solid rgba(15,118,110,.2);
}

/* Ohne JavaScript ist der Rechner nutzlos – dann sagen wir das, statt ein
   totes Formular stehen zu lassen. */
.r-ohne-js{
  background:var(--paper); border:1px dashed var(--line);
  border-radius:var(--r-sm); padding:1rem 1.15rem; margin:2rem 0 0;
  font-size:.92rem; color:var(--ink-2);
}
@media (scripting: enabled){ .r-ohne-js{display:none} }

/* ------------------------------------------------------------ Musterbaustein */

.muster{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); margin:1.6rem 0; overflow:hidden;
}
.muster-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.1rem; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.muster-kopf .m-titel{
  font-family:var(--mono); font-size:.73rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.kopieren{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--brand-2); background:var(--brand-tint);
  border:1px solid transparent; border-radius:999px;
  padding:.36rem .85rem; cursor:pointer; white-space:nowrap;
}
.kopieren:hover{background:var(--brand); color:#fff}
.kopieren[data-fertig]{background:var(--brand); color:#fff}
@media (scripting: none){ .kopieren{display:none} }

/* Absaetze statt white-space:pre-wrap: der Mustertext geht durch den
   Markdown-Schritt, und Leerzeilen in einem HTML-Block sind dort heikel.
   innerText liefert die Umbrueche fuers Kopieren trotzdem sauber. */
.muster-text{
  margin:0; padding:1.25rem 1.35rem;
  font-family:var(--sans); font-size:.94rem; line-height:1.68;
  color:var(--ink); word-break:break-word;
}
.muster-text p{margin:0 0 .95rem}
.muster-text p:last-child{margin-bottom:0}
.muster-text .platzhalter{
  background:var(--brand-tint); color:var(--brand-2);
  padding:.05em .2em; border-radius:4px; font-family:var(--mono);
  font-size:.88em; font-weight:500;
}

/* Gegenueberstellung: tragfaehige und riskante Formulierung */
.gegen{display:grid; gap:1rem; margin:1.6rem 0}
@media (min-width:680px){ .gegen{grid-template-columns:1fr 1fr} }
.gegen > div{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1.1rem 1.2rem; background:var(--surface);
}
.gegen .gut{border-left:3px solid var(--brand)}
.gegen .schlecht{border-left:3px solid var(--signal)}
.gegen .g-tag{
  display:block; font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem;
}
.gegen .gut .g-tag{color:var(--brand-2)}
.gegen .schlecht .g-tag{color:var(--signal)}
.gegen q{
  display:block; font-size:.93rem; line-height:1.6; color:var(--ink);
  font-style:italic;
}
.gegen p{font-size:.87rem; line-height:1.55; color:var(--ink-2); margin:.7rem 0 0}