/* Ratgeberseite «Was kostet eine Website in der Schweiz?» (/was-kostet-eine-website/).
   Wird nach style.css und recht.css eingebunden und nutzt deren Tokens und .doc-Stile.
   Aufbau: dunkler Kopf, heller Leseteil, dunkles Band «Unsere Preise» mit dem Rechenbeispiel als Beleg, heller Schluss. */

/* ---------- Kopf: Pfad statt Kicker ---------- */
.rg-crumbs ol{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4em .75em;font:400 .78rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-deep-2)}
.rg-crumbs ol::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.rg-crumbs li{display:flex;align-items:center;gap:.75em}
/* Trenner hängt am vorangehenden Eintrag: bricht der Pfad um, beginnt keine Zeile mit «/» (Endkontrolle 27.09.2026) */
.rg-crumbs li:not(:last-child)::after{content:"/";content:"/" / "";opacity:.55}
.rg-crumbs a{position:relative;color:var(--text-on-deep);text-decoration:none;transition:color .3s var(--ease-out)}
.rg-crumbs a::after{content:"";position:absolute;inset:-14px -6px}   /* Tippfläche 44 px */
.rg-crumbs a:hover{color:var(--accent)}

/* ---------- Kurze Antwort ganz oben ---------- */
.rg-kurz{margin:0 0 clamp(40px,6vw,64px);padding:clamp(22px,4vw,34px) clamp(20px,4vw,36px) clamp(22px,4vw,34px) clamp(24px,4.4vw,40px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 3px 0 0 var(--text-primary)}
.doc__body .rg-label{margin:0 0 .75em;font:400 .74rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.doc__body .rg-kurz__text{margin:0;max-width:none;font-size:clamp(1.06rem,1.55vw,1.18rem);line-height:1.62;color:var(--text-primary)}

/* ---------- Abschnitte ---------- */
.rg-sec + .rg-sec{margin-top:clamp(56px,8vw,88px)}
.doc__body .rg-h2{margin:0 0 .6em;font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.14;letter-spacing:-.02em;color:var(--text-primary);text-wrap:balance}
.doc__body .rg-h3{margin:1.8em 0 .45em}

/* Quellenzeile unter Tabellen: Fliesstextschrift, 14 px, damit auch Laien und ältere Leser die Belege lesen können */
.doc__body .rg-src{max-width:none;margin:-.5em 0 1.6em;font:400 .875rem/1.55 var(--f-body);color:var(--text-secondary)}
.doc__body .rg-src a{color:var(--text-secondary)}
.doc__body .rg-src a:hover{color:var(--accent-ink)}

/* ---------- Tabellen (Grundstil in recht.css: .doc__table) ---------- */
.rg-table table{font-variant-numeric:tabular-nums}
/* Tabellenköpfe in normaler Schreibweise und mindestens 13 px (Grundstil in recht.css: Mono-Versalien) */
.rg-table thead th{font:600 .8125rem/1.35 var(--f-body);letter-spacing:0;text-transform:none;white-space:normal;vertical-align:bottom}
.doc__body .rg-table td{color:var(--text-primary)}
.rg-table--markt td{white-space:nowrap}
.rg-table--markt tbody th{min-width:10.5em}
.rg-table--laufend td:last-child{min-width:13em}
@media (min-width:721px){.rg-table--laufend td:first-of-type{white-space:nowrap}}

/* ---------- Mittelwerte aus den Marktübersichten ---------- */
.doc__body .rg-stats{list-style:none;padding:0;margin:.4em 0 0;border-top:1px solid var(--line)}
.doc__body .rg-stats li{margin:0;padding:.9em 0;border-bottom:1px solid var(--line);max-width:none}

/* ---------- Was den Preis bestimmt ---------- */
.rg-faktoren{display:grid;grid-template-columns:minmax(0,1fr);margin:1.4em 0 0;border-top:1px solid var(--line)}
.rg-faktoren>div{padding:1em 0 1.1em;border-bottom:1px solid var(--line)}
.rg-faktoren dt{margin:0 0 .3em;font-family:var(--f-display);font-weight:600;font-size:1.08rem;line-height:1.25;letter-spacing:-.005em;color:var(--text-primary)}
.rg-faktoren dd{margin:0;font-size:.98rem;color:var(--text-secondary)}
@media (min-width:720px){
  .rg-faktoren{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
}

/* ---------- Wann günstig teuer wird ---------- */
.doc__body .rg-checks{list-style:none;padding:0;margin:1.3em 0 1.5em}
.doc__body .rg-checks li{position:relative;margin:.95em 0;padding-left:1.7em}
.rg-checks li::before{content:"";position:absolute;left:0;top:.8em;width:.85em;height:2px;border-radius:1px;background:var(--text-primary)}
.rg-lead{font-weight:500;color:var(--text-primary)}

/* ---------- Dunkles Band: Unsere Preise ---------- */
.rg-offer{position:relative;background:var(--canvas-deep);color:var(--text-on-deep);padding:clamp(72px,10vw,128px) 0}
.rg-offer__in{max-width:1040px}
.rg-offer__head{max-width:760px}
.rg-offer__h{margin:0 0 .45em;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.03;letter-spacing:-.025em;font-variation-settings:'opsz' 96;text-wrap:balance}
.rg-offer__lead{margin:0;max-width:60ch;font-size:1.08rem;color:var(--text-on-deep-2)}
.rg-offer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;margin:clamp(36px,5vw,56px) 0 clamp(32px,4vw,44px)}

.rg-pkgs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-deep)}
.rg-pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "desc desc";align-items:baseline;gap:.25em 1.2em;padding:1.05em 0 1.15em;border-bottom:1px solid var(--line-deep)}
.rg-pkg p{margin:0}
.rg-pkg__name{grid-area:name;font-family:var(--f-display);font-weight:600;font-size:1.2rem;line-height:1.2;letter-spacing:-.01em;color:var(--text-on-deep)}
.rg-pkg__word{display:inline-block;margin-left:.55em;font:400 .8125rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-deep-2);transform:translateY(-.1em)}
.rg-pkg__price{grid-area:price;font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.2;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-on-deep)}
.rg-pkg__ab{font:400 .74rem/1 var(--f-mono);letter-spacing:.04em;color:var(--text-on-deep-2)}
.rg-pkg__desc{grid-area:desc;max-width:54ch;font-size:.95rem;line-height:1.55;color:var(--text-on-deep-2)}

/* Signatur: das Rechenbeispiel als Beleg, Papier auf dunklem Grund, gezackter Rand, Summe doppelt unterstrichen */
.rg-beleg{margin:0;padding:30px clamp(20px,3vw,28px) 28px;background:var(--panel);color:var(--text-primary);color-scheme:light;border-radius:3px;font:400 .86rem/1.5 var(--f-mono);font-variant-numeric:tabular-nums;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 96%,#000) top/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 96%,#000) bottom/16px 51% repeat-x;
          mask:radial-gradient(circle 6px at 50% 0,#0000 96%,#000) top/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 96%,#000) bottom/16px 51% repeat-x}
.rg-beleg figcaption{margin:0 0 1em;padding-bottom:.9em;border-bottom:1px dashed var(--line);font-size:.72rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.rg-beleg dl{margin:0}
/* Punktlinie gehört zum Betrag: passt eine Zeile nicht, rutscht der Betrag mit seiner Punktlinie ganz unter die Bezeichnung,
   statt mitten in der Punktlinie umzubrechen (Endkontrolle 27.09.2026) */
.rg-beleg dl>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em;padding:.34em 0}
.rg-beleg dt{flex:0 1 auto;min-width:0;color:var(--text-secondary)}
.rg-beleg dd{flex:1 0 auto;display:flex;align-items:baseline;gap:.6em;margin:0;white-space:nowrap;text-align:right;color:var(--text-primary)}
.rg-beleg dd::before{content:"";flex:1 0 1.2em;border-bottom:1px dotted #A69E90;transform:translateY(-.3em)}
.rg-beleg .rg-beleg__sum{margin-top:.35em;padding-top:.65em;border-top:1px dashed var(--line)}
.rg-beleg .rg-beleg__sum dt{color:var(--text-primary)}
.rg-beleg .rg-beleg__total{margin-top:.5em;padding-top:.7em;border-top:1px solid var(--text-primary)}
.rg-beleg .rg-beleg__total dt{color:var(--text-primary)}
.rg-beleg .rg-beleg__total dd{text-decoration:underline double;text-underline-offset:5px;text-decoration-thickness:1px}
.rg-beleg__note{margin:1.2em 0 0;padding-top:.9em;border-top:1px dashed var(--line);font-size:.76rem;line-height:1.55;color:var(--text-secondary)}

@media (min-width:861px){.rg-beleg{position:sticky;top:calc(var(--header-h) + 32px)}}

.rg-offer__incl,.rg-offer__why{max-width:68ch}
.rg-offer__incl{color:var(--text-on-deep)}
.rg-offer__why{color:var(--text-on-deep-2)}
.rg-offer__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin:2rem 0 1.6rem}
.rg-link-deep{color:var(--text-on-deep);border-bottom-color:var(--line-deep)}
.rg-link-deep:hover{border-color:var(--text-on-deep-2)}
/* «Website erstellen lassen · alle Pakete →» im Band bricht unter rund 340 px um. Dann block statt inline-flex, damit der Pfeil hinter dem letzten Wort steht.
   Nur dieser Link: .rg-offer__in gibt es nur im Ratgeber, die Angebotsseiten bleiben unberührt. */
@media (max-width:338px){.rg-offer__in>.rg-offer__cta .rg-link-deep{display:block;text-wrap:balance}}
.rg-offer__mwst{margin:0;font:400 .78rem/1.5 var(--f-mono);color:var(--text-on-deep-2)}

/* ---------- FAQ (Grundstil .qa in style.css) ---------- */
.rg-faq{margin-top:1.2em}
.rg .doc__stand{margin-top:clamp(40px,5vw,64px);color:var(--text-secondary)}

/* ---------- Tablet und Handy ---------- */
@media (max-width:860px){
  .rg-offer__grid{grid-template-columns:minmax(0,1fr)}
  .rg-beleg{max-width:460px}
}
@media (max-width:720px){
  /* Vergleichstabellen als gestapelte Karten: eine Zeile = eine Karte, jede Zahl mit ihrer Spalte als Beschriftung (data-label).
     So ist auf dem Handy nichts abgeschnitten und niemand muss seitlich wischen. */
  .rg-table--cards{overflow:visible;background:var(--panel)}
  .rg-table--cards table,.rg-table--cards tbody,.rg-table--cards tr,.rg-table--cards th,.rg-table--cards td{display:block}
  .rg-table--cards thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .rg-table--cards tbody tr{padding:.95em 1em 1em;border-bottom:1px solid var(--line)}
  .rg-table--cards tbody tr:last-child{border-bottom:0}
  .rg-table--cards tbody th{min-width:0;padding:0 0 .45em;border:0;font-family:var(--f-display);font-size:1.02rem;line-height:1.3}
  .rg-table--cards td,.rg-table--markt td,.rg-table--laufend td:last-child{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr);gap:1em;min-width:0;padding:.3em 0;border:0;white-space:normal}
  .rg-table--cards td::before{content:attr(data-label);color:var(--text-secondary);font-size:.875rem;line-height:1.45;padding-top:.08em}
  .rg-table--shop tbody th{min-width:8.5em}
  .doc__body .rg-kurz__text{hyphens:manual;-webkit-hyphens:manual}
  .rg-pkg__name{font-size:1.1rem}
  .rg-pkg__price{font-size:1.1rem}
  .rg-beleg{font-size:.8rem}
}

/* ---------- Druck ---------- */
@media print{
  .rg-crumbs,.rg-toc,.rg-offer__cta{display:none!important}
  .rg-offer{background:none!important;color:#000!important;padding:12pt 0}
  .rg-offer__lead,.rg-offer__why,.rg-offer__incl,.rg-offer__mwst,.rg-pkg__desc,.rg-pkg__word,.rg-pkg__ab,.rg-pkg__name,.rg-pkg__price{color:#000!important}
  .rg-pkgs,.rg-pkg{border-color:#999}
  .rg-beleg{-webkit-mask:none;mask:none;border:1px solid #999;background:none;break-inside:avoid}
  .rg-kurz{background:none;box-shadow:none;border-color:#999}
}