/*
 * CreatorOffice Website: Rechner-Seiten (/rechner und /rechner/…). Lädt nach seiten.css und ergänzt, was diese Seiten über
 * die Ratgeber-Artikel hinaus brauchen: Kurzfassung, Tipp, Werbekasten, Formel, Randkasten und Autorenbox sowie
 * Auswahlfelder, Datumsfeld und Ergebniszeilen der Rechner (die Grundlage, .pr-*, steht in seiten.css beim Provisionsrechner).
 * Farben und Abstände wie dort (--bg3, --soft, --line, --g400 …), beide Modi. Flächen und Rahmen immer ringsum, nie einseitig.
 */

/* Kästen im Fließtext: Kurzfassung, Tipp, Werbekasten, Formel */
.co-text .rc-kasten-t{margin:0 0 12px;font:600 13px/1.2 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--g400)}
.co-text .rc-kasten-t+p,.co-text .rc-werbung-t+p{margin-top:0}
.rc-kurz,.rc-tipp,.rc-werbung{margin-top:28px;padding:24px 28px 26px;border-radius:22px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.co-text .rc-kurz ul{margin-top:0}
.co-text .rc-kurz{margin-top:4px;margin-bottom:clamp(28px,3vw,44px)}
.rc-tipp{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2)}
.rc-werbung{background:var(--soft);box-shadow:inset 0 0 0 1px rgba(111,174,143,.35)}
.co-text .rc-werbung .rc-werbung-t{margin:0 0 10px;font:650 clamp(20px,1.8vw,23px)/1.3 Manrope,sans-serif;letter-spacing:-.022em;color:var(--tx)}
.rc-werbung .cta-row{margin-top:20px}
.co-text .rc-formel{margin-top:14px;padding:16px 20px;border-radius:16px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line);font:600 clamp(16px,1.5vw,18px)/1.5 Manrope,sans-serif;letter-spacing:-.01em;color:var(--tx);overflow-wrap:anywhere}
.co-text .rc-formel strong{font-weight:inherit}

/* Spalte neben dem Text: Inhaltsverzeichnis mit Kasten am Rand (nur Desktop) */
.rc-spalte{position:sticky;top:100px;max-height:calc(100vh - 140px);overflow-y:auto}
.rc-spalte .co-toc{position:static;max-height:none;overflow:visible}
.rc-rand{margin-top:26px;padding:20px 20px 22px;border-radius:18px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(111,174,143,.35)}
.rc-rand p{font-size:14px;line-height:1.5;color:var(--tx2)}
.rc-rand .rc-rand-t{margin-bottom:6px;font:650 16px/1.3 Manrope,sans-serif;letter-spacing:-.015em;color:var(--tx)}
.rc-rand .btn{margin-top:16px}
@media (max-width:1024px){
  .rc-spalte{position:static;max-height:none;overflow:visible}
  .rc-rand{display:none}
}

/* Autorenbox am Ende */
.rc-autor{display:flex;align-items:flex-start;gap:18px;margin-top:24px;padding:22px 24px;border-radius:20px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.rc-autor img{flex:none;width:37px;height:32px;margin-top:2px}
.co-text .rc-autor p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--tx2)}
.co-text .rc-autor p:first-child{margin-top:0;font:650 16px/1.4 Manrope,sans-serif;color:var(--tx)}
.co-text .rc-autor .rc-autor-datum{font-size:13.5px;color:var(--tx3)}

/* Weiterlesen: Eintrag ohne Link, solange die Zielseite fehlt (Platzhalter data-link-folgt, siehe rechner-seiten.test.ts) */
.co-weiter span{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line);font:600 17px/1.4 Manrope,sans-serif;letter-spacing:-.015em;color:var(--tx)}

/* Rechner: Abstand oben, ausgeblendete Teile, Auswahlfelder */
.pr-eingaben>.pr-feld,.pr-eingaben>.pr-gruppe{margin-top:18px}
.pr-eingaben>:first-child{margin-top:0}
.pr-rechner .pr-gruppe{margin-inline:0}
.pr-rechner [hidden]{display:none!important}
.pr-rechner select,.pr-rechner input[type=date]{width:100%;height:46px;margin-top:8px;padding:0 14px;border:0;border-radius:12px;background-color:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font:500 16px Inter,sans-serif;color:var(--tx);font-variant-numeric:tabular-nums}
.pr-rechner select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315191A' stroke-opacity='.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.pr-rechner select:focus-visible,.pr-rechner input[type=date]:focus-visible{outline:2px solid var(--g400);outline-offset:1px}
.pr-rechner select[aria-invalid="true"],.pr-rechner input[type=date][aria-invalid="true"]{box-shadow:inset 0 0 0 1px #b4442f}
@media (prefers-color-scheme:dark){
  .pr-rechner select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F1EC' stroke-opacity='.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  .pr-rechner select[aria-invalid="true"],.pr-rechner input[type=date][aria-invalid="true"]{box-shadow:inset 0 0 0 1px #f0a08e}
}
.pr-rechner .pr-unterfeld{margin-top:8px;margin-left:28px}
.pr-rechner .pr-unterfeld input[type=text]{margin-top:6px}

/* Ergebnis: Zeilen mit Rechnung in klein, Gesamtzeile, Ergebnissatz */
@media (min-width:761px) and (min-height:780px){.pr-ergebnis{position:sticky;top:100px}}
.pr-zeile .pr-einheit{flex-basis:100%;margin-top:-2px;text-align:right;font-size:14px;color:var(--tx3)}
.pr-zeile .pr-einheit:empty{display:none}
.pr-zeile small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--tx3)}
.pr-zeile.pr-detail>span{flex:1 1 7em;min-width:0}
.pr-zeile.pr-detail b{flex:none;max-width:100%;margin-left:auto;overflow-wrap:anywhere}
.pr-zeilen{display:block}
.pr-zeilen:empty+.pr-zeile{padding-top:0}
.pr-zeile.pr-gesamt{border-bottom:0}
.pr-zeile.pr-gesamt>span{font-weight:600;color:var(--tx)}
.pr-satz{display:block;margin-top:14px;font-size:16px;line-height:1.55;font-weight:700;color:var(--tx)}