/*
 * CreatorOffice Website, Design „Bühne“: Textseiten aus den Vertriebstexten (Landingpages, Ratgeber, Vergleiche,
 * Information für Geschäftskontakte). Lädt nach buehne.css und buehne-text.css und nutzt deren Farben (--bg, --tx, --g400 …)
 * und Bausteine (Knöpfe, .browser, .phone-body, .faq, .tk-faq, .legal). Inhalt: Brotkrumen (.co-krumen), Seitenkopf
 * (.co-hero), Fließtext (.co-text) mit Tabellen und Bildern, Karten (.co-karten), Aufruf (.co-cta, .co-final),
 * Artikel mit Inhaltsverzeichnis (.co-artikel, .co-toc), Provisionsrechner (.pr-*), Checkliste mit Druckfassung
 * (.co-checkliste) und hervorgehobener Hinweis (.co-widerspruch). Flächen und Rahmen immer ringsum, nie einseitig.
 */

/* Brotkrumen */
.co-krumen ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;line-height:1.4;color:var(--tx3)}
.co-krumen li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.co-krumen li+li::before{content:"›";color:rgba(var(--ink-rgb),.35)}
.co-krumen a{color:var(--tx2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.co-krumen a:hover{color:var(--tx);text-decoration-color:var(--g400)}
.co-krumen [aria-current="page"]{color:var(--tx)}

/* Seitenkopf der Landingpages: dieselbe Spalte wie der Fließtext */
.co-hero{padding-bottom:clamp(30px,3.6vw,52px)}
.co-hero .hero-copy{max-width:820px;margin-inline:auto}
.co-hero .co-krumen{margin-bottom:6px}
.co-hero .page-h{max-width:none;font-size:clamp(34px,4.6vw,62px);line-height:1.04;hyphens:manual;overflow-wrap:break-word}
.co-hero .lead{max-width:none}
.co-hero .lead+.lead{margin-top:14px}
.co-hero .cta-row{margin-top:30px}
.co-hero .note{margin-top:16px}
.co-hero .co-bild{width:100%;margin-top:clamp(32px,4vw,52px)}
.legal-hero .co-krumen{margin-bottom:4px}
.legal-hero .page-h{overflow-wrap:break-word}

/* Fließtext */
.co-text{max-width:820px;margin-inline:auto}
.co-abschnitt{padding-block:clamp(36px,4.2vw,60px);border-top:1px solid var(--line)}
.co-abschnitt:first-child{border-top:0}
.co-text h2{font:700 clamp(27px,3vw,40px)/1.1 Manrope,sans-serif;letter-spacing:-.035em;text-wrap:balance;color:var(--tx)}
.co-text h3{margin-top:clamp(30px,3vw,40px);font:650 clamp(19px,1.7vw,23px)/1.3 Manrope,sans-serif;letter-spacing:-.022em;color:var(--tx)}
.co-text h2+h3{margin-top:22px}
.co-text p{margin-top:16px;font-size:17px;line-height:1.72;color:var(--tx2);overflow-wrap:break-word}
.co-text h2+p,.co-text h3+p{margin-top:12px}
.co-text strong{color:var(--tx);font-weight:600}
.co-text a:not(.btn):not(.tlink){color:var(--tx);text-decoration:underline;text-decoration-color:rgba(111,174,143,.6);text-decoration-thickness:1px;text-underline-offset:3px}
.co-text a:not(.btn):not(.tlink):hover{text-decoration-color:var(--g400)}
.co-text ul,.co-text ol{display:grid;gap:10px;margin-top:16px;padding-left:1.35em;font-size:17px;line-height:1.65;color:var(--tx2)}
.co-text ul{list-style:disc}
.co-text ol{list-style:decimal}
.co-text li::marker{color:var(--g400)}
.co-text li{padding-left:4px;overflow-wrap:break-word}
.co-text hr{margin:32px 0;border:0;border-top:1px solid var(--line)}
.co-text .note{display:block;margin-top:18px}
.co-text .cta-row{justify-content:flex-start;margin-top:26px}
.co-klein{font-size:14.5px!important;line-height:1.6!important;color:var(--tx3)!important}

/* Tabellen: eigene Rolle seitlich auf schmalen Bildschirmen, die Seite selbst scrollt nie seitlich */
.co-tabelle-box{margin-top:22px;border-radius:18px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.co-tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.co-tabelle th,.co-tabelle td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.co-tabelle thead th{font:600 14px/1.35 Inter,sans-serif;color:var(--tx);background:rgba(var(--ink-rgb),.025)}
.co-tabelle tbody tr:last-child td{border-bottom:0}
.co-tabelle td{color:var(--tx2)}
.co-tabelle td:first-child{color:var(--tx);font-weight:500}
.co-tabelle-hinweis{display:none}
@media (max-width:760px){
  .co-tabelle{font-size:14.5px}
  .co-tabelle th,.co-tabelle td{padding:12px 12px}
  .co-tabelle.co-breit{min-width:620px}
  .co-tabelle.co-mittel{min-width:520px}
  .co-tabelle-hinweis{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--tx3)}
  .co-tabelle-hinweis .i{width:16px;height:16px;color:var(--g400)}
  .co-tabelle-hinweis+.co-tabelle-box{margin-top:10px}
}

/* Bilder: echte Bildschirmfotos im Browserrahmen, Handy im Gerät */
.co-bild{margin-top:28px}
.co-bild .browser img.scr{display:block}
.co-bild-handy .phone-body{width:min(280px,72%);margin-inline:auto}
.co-bild-handy img{display:block;width:100%}

/* Karten der Übersichten (Ratgeber, Alternativen) */
.co-karten{display:grid;gap:16px;margin-top:24px}
.co-karte{display:flex;flex-direction:column;padding:26px 28px 28px;border-radius:22px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.co-text .co-karte h3{margin-top:0}
.co-karte p{font-size:16px}
.co-karte .tlink{margin-top:18px}

/* Aufruf im Artikel: Fläche mit gleichmäßigem Rahmen */
.co-cta{margin-top:8px;padding:30px 32px 32px;border-radius:24px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(111,174,143,.35)}
.co-text .co-cta h2{font-size:clamp(24px,2.4vw,30px)}
.co-cta .cta-row{margin-top:22px}

/* Abschluss der Landingpages: wie .final, für lange Überschriften kleiner */
.co-final{padding-top:clamp(64px,7.5vw,108px);padding-bottom:clamp(72px,8vw,120px)}
.co-final .h-xl{max-width:20ch;margin-inline:auto;font-size:clamp(34px,5vw,68px);line-height:1.02}
.co-final .co-klein{max-width:62ch;margin:22px auto 0}
.co-final .co-klein a{color:var(--tx);text-decoration:underline;text-decoration-color:rgba(111,174,143,.6);text-underline-offset:3px}

/* Häufige Fragen im Fließtext (Artikel) und unter dem Raster (Landingpages) */
.co-text .faq{margin-top:22px}
.co-text .faq details p{margin-top:0}
.co-faq-sec{border-top:1px solid var(--line)}
.co-faq-nach{max-width:820px;margin:clamp(36px,4vw,52px) auto 0;text-align:center}
.co-faq-nach .cta-row{margin-top:0}

/* Artikel: Inhaltsverzeichnis links (ab 1025 px mitlaufend), auf schmalen Bildschirmen als Kasten über dem Text */
.co-artikel .co-text{max-width:70ch;margin-inline:0}
.co-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px;font-size:15px;color:var(--tx2)}
.co-meta span{display:inline-flex;align-items:center;gap:8px}
.co-meta .i{width:17px;height:17px;color:var(--g400)}
.co-toc{position:sticky;top:100px;max-height:calc(100vh - 140px);overflow-y:auto;padding-top:6px}
.co-toc p{font:600 13px/1 Inter,sans-serif;letter-spacing:.02em;color:var(--tx3);margin-bottom:12px}
.co-toc a{display:block;padding:7px 0;font-size:14px;line-height:1.4;color:var(--tx3)}
.co-toc a:hover{color:var(--tx)}
.co-einleitung p:first-child{margin-top:0;font:500 clamp(19px,1.7vw,22px)/1.55 Manrope,sans-serif;letter-spacing:-.015em;color:var(--tx)}
.co-einleitung{padding-bottom:clamp(32px,3.6vw,52px)}
.co-artikel .co-abschnitt:first-of-type{border-top:1px solid var(--line)}
@media (max-width:1024px){
  .co-artikel .co-text{margin-inline:auto}
  .co-toc{position:static;max-height:none;width:100%;max-width:70ch;margin-inline:auto;padding:18px 20px 12px;border-radius:18px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
  .co-artikel .legal{gap:28px}
}
.co-weiter{display:grid;gap:12px;margin-top:20px}
.co-weiter a{display:flex;align-items:center;justify-content:space-between;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)!important;text-decoration:none!important}
.co-weiter a:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.co-weiter .i{flex:none;width:18px;height:18px;stroke-width:2;color:var(--g400)}

/* Provisionsrechner */
.pr-rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px;margin-top:24px;padding:28px;border-radius:24px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.pr-rechner[hidden]{display:none}
.pr-feld+.pr-feld,.pr-gruppe{margin-top:18px}
.pr-gruppe{border:0;padding:0;min-width:0}
.pr-gruppe legend{padding:0;font:600 15px/1.4 Inter,sans-serif;color:var(--tx)}
.pr-rechner label{display:block;font:500 15px/1.45 Inter,sans-serif;color:var(--tx)}
.pr-gruppe .pr-feld{margin-top:12px}
.pr-rechner input[type=text]{width:100%;height:46px;margin-top:8px;padding:0 14px;border:0;border-radius:12px;background: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 input[type=text]::placeholder{color:var(--tx3)}
.pr-rechner input[type=text]:focus-visible{outline:2px solid var(--g400);outline-offset:1px}
.pr-rechner input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px #b4442f}
.pr-check{display:flex!important;align-items:flex-start;gap:10px;margin-top:12px;font-weight:400!important;color:var(--tx2)!important}
.pr-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#2d7a5c}
.co-text .pr-hilfe{margin-top:6px;font-size:14px;line-height:1.5;color:var(--tx3)}
.co-text .pr-fehler{margin-top:6px;font-size:14px;line-height:1.5;color:#b4442f}
@media (prefers-color-scheme:dark){.co-text .pr-fehler{color:#f0a08e}.pr-rechner input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px #f0a08e}}
.pr-ergebnis{align-self:start;padding:22px 24px;border-radius:18px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(111,174,143,.35)}
.pr-ergebnis output{display:block}
.pr-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pr-zeile:first-child{padding-top:0}
.pr-zeile span{font-size:15px;color:var(--tx2)}
.pr-zeile b{font:700 clamp(22px,2.2vw,28px)/1.15 Manrope,sans-serif;letter-spacing:-.025em;color:var(--tx);font-variant-numeric:tabular-nums}
.pr-weg{display:block;margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--tx2);overflow-wrap:anywhere}
.co-text .pr-hinweise{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--tx)}
.co-text .pr-note{margin-top:14px;font-size:14px;line-height:1.5;color:var(--tx3)}
@media (max-width:760px){.pr-rechner{grid-template-columns:minmax(0,1fr);padding:20px 18px}}

/* Checkliste zum Ausdrucken */
.co-checkliste{margin-top:22px;padding:26px 28px 30px;border-radius:24px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.co-text .co-gruppe{margin-top:22px;font:600 13px/1.2 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--g400)}
.co-text .co-gruppe:first-child{margin-top:0}
.co-text .co-haken{list-style:none;padding-left:0;gap:8px;margin-top:10px}
.co-haken li{padding-left:0}
.co-haken label{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.co-haken input{flex:none;width:19px;height:19px;margin:4px 0 0;accent-color:#2d7a5c}
.co-drucken{margin-top:22px}
.co-drucken[hidden]{display:none}
@media (max-width:700px){.co-checkliste{padding:20px 18px 24px}}

/* Hervorgehobener Hinweis (Widerspruchsrecht): Fläche mit gleichmäßigem Rahmen */
.co-widerspruch{margin-top:8px;padding:30px 32px 32px;border-radius:22px;background:var(--soft);box-shadow:inset 0 0 0 1.5px rgba(31,107,79,.55)}
.co-widerspruch h2{font:700 clamp(21px,2vw,25px)/1.25 Manrope,sans-serif;letter-spacing:.02em;color:var(--tx)}
.co-widerspruch h2::before{content:none}
.co-widerspruch .co-unterzeile{margin-top:6px;font-size:14.5px;color:var(--tx2)}
.co-widerspruch p{margin-top:14px;font-size:17px;line-height:1.75;color:var(--tx)}
.co-widerspruch a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.co-widerspruch{padding:22px 20px 24px}}

#druck-checkliste{display:none}

/* Druck: ohne Kopf, Fuß und Bedienelemente; „Checkliste drucken“ druckt nur die Checkliste (provisorischer Block #druck-checkliste) */
@media print{
  html,body{background:#fff!important;color:#000!important}
  .skip,.hd,footer,.hero-bg,.co-toc,.co-final,.co-cta,.co-weiter,.co-drucken,.cta-row,.pr-rechner,.co-krumen{display:none!important}
  .fx .up,.fx [data-r]{opacity:1!important;transform:none!important;animation:none!important}
  .co-text h2,.co-text h3,.co-text strong,.page-h{color:#000!important}
  .co-text p,.co-text li,.co-tabelle td{color:#222!important}
  .co-tabelle.co-breit,.co-tabelle.co-mittel{min-width:0!important}
  .co-abschnitt{break-inside:auto;border-color:#ddd}
  .co-widerspruch{border:1.5px solid #000;box-shadow:none;background:#fff}
  html.nur-checkliste body>*:not(#druck-checkliste){display:none!important}
  #druck-checkliste{display:block!important;padding:0;font:400 12pt/1.5 Inter,system-ui,sans-serif;color:#000}
  #druck-checkliste h2{margin:0 0 12pt;font:700 18pt/1.2 Manrope,sans-serif}
  #druck-checkliste .co-checkliste{margin:0;padding:0;background:#fff;box-shadow:none}
  #druck-checkliste .co-gruppe{margin:14pt 0 4pt;color:#000;font-weight:700;text-transform:none;letter-spacing:0}
  #druck-checkliste ul{display:block;margin:0;padding:0;list-style:none}
  #druck-checkliste li{margin:3pt 0;break-inside:avoid}
  #druck-checkliste label{display:flex;gap:8pt}
  #druck-checkliste input{width:12pt;height:12pt;margin-top:2pt}
}