/* Rechner der Handwerk-Ratgeber (Block C, 09.10.2026) – zusammengesetzt von vorlagen/ratgeber-checks/handwerk-drei/bau.py aus css/*.css. Nicht hier ändern. */

/* --- elektro.css --- */
/* Rechner „Was bleibt dir im Monat?“ (Elektro, /ratgeber/elektriker-selbststaendig-machen/, 09.10.2026). Lädt nach rr-kit.css.
   Nur, was die Grundausstattung nicht hat. Jeder Selektor beginnt mit [data-rk="elektro"] – sonst gewinnt .rg-text p. */

/* Streifen mit runden Enden (Teile werden abgeschnitten, auch wenn der schraffierte Teil versteckt am Ende steht) */
[data-rk="elektro"] .rk-streifen{overflow:hidden}
[data-rk="elektro"] .rk-legende .rk-el-fehlt{color:var(--rk-rost)}
[data-rk="elektro"] .rk-legende .rk-el-fehlt::before{background:repeating-linear-gradient(-45deg,rgba(168,72,42,.7) 0 2px,rgba(168,72,42,.2) 2px 4px)}
[data-rk="elektro"] .rk-legende .rk-el-fehlt b{color:var(--rk-rost)}

/* Kleine Überschrift über dem Streifen */
[data-rk="elektro"] .rk-el-titel{margin:12px 0 -4px;font-size:13px;line-height:1.3;color:var(--rk-leise)}

/* Drei Wert-Kacheln immer in einer Reihe */
[data-rk="elektro"] .rk-el-kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
[data-rk="elektro"] .rk-el-kacheln .rk-kachel{padding:8px 0 0;min-width:0}
[data-rk="elektro"] .rk-el-kacheln .rk-kachel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Hinweis Rente/Krankenkasse/Steuer im Ergebnis-Blatt und „davon Rente“ in der Rechnung im Detail (nicht abgezogen) */
[data-rk="elektro"] .rk-el-rente{margin:12px 0 0;padding-top:8px;border-top:1px dashed var(--rk-linie-2);font-size:13.5px;line-height:1.4;color:var(--rk-text)}
[data-rk="elektro"] .rk-el-rente b{color:var(--rk-tinte);white-space:nowrap}
[data-rk="elektro"] .rk-zeilen .rk-el-davon{color:var(--rk-leise);font-weight:400;font-style:italic}
[data-rk="elektro"] .rk-zeilen dt.rk-el-davon small{font-style:normal}

/* Szenario-Knöpfe: zweite Zeile (Stunden) etwas leiser */
[data-rk="elektro"] .rk-seg button small{margin-top:1px}

/* Weiterrechnen: Knopf mit etwas Luft */
[data-rk="elektro"] .rk-weiter .rk-knopf{margin-top:6px}

@media (max-width:419.98px){
  [data-rk="elektro"] .rk-el-kacheln .rk-kachel{font-size:12px}
  [data-rk="elektro"] .rk-el-kacheln .rk-kachel b{font-size:16.5px}
}
/* Handy-Leiste: Notiz zweizeilig statt abgeschnitten */
@media (max-width:899.98px){
  [data-rk="elektro"] .rk-mini__notiz{white-space:normal;text-overflow:clip;line-height:1.05;max-width:7.2em}
}
/* unter 360 px passt neben Label und Zahl keine Notiz – die Farbe der Zahl zeigt den Stand */
@media (max-width:359.98px){
  [data-rk="elektro"] .rk-mini__notiz{display:none}
  [data-rk="elektro"] .rk-el-kacheln .rk-kachel b{font-size:14.5px;letter-spacing:-.03em}
}

/* --- stundensatz.css --- */
/* Rechner „Was muss deine Stunde kosten?“ (Säule /ratgeber/handwerksbetrieb-gruenden/, 09.10.2026). Lädt nach rr-kit.css.
   Nur, was die Grundausstattung nicht hat; Präfix .rk-hw-. Jeder Selektor beginnt mit [data-rk="stundensatz"] – sonst gewinnt .rg-text p.
   Streifen, Legende und Kacheln wie in rr-dienste.css (Reinigung), dort mit .rk-d- – diese Seite lädt rr-dienste.css nicht. */

/* Kleine Überschrift über dem Streifen */
[data-rk="stundensatz"] .rk-hw-titel{margin:12px 0 -4px;font-size:13px;line-height:1.3;color:var(--rk-leise)}

/* Streifen mit runden Enden; bei zu niedrigem Preis zeigen die Farben, was gedeckt ist, schraffiert ist, was fehlt */
[data-rk="stundensatz"] .rk-hw-rund{overflow:hidden}
[data-rk="stundensatz"] .rk-hw-fehlt{flex:0 0 auto;height:100%;width:0;
  background:repeating-linear-gradient(-45deg,rgba(168,72,42,.55) 0 3px,rgba(168,72,42,.12) 3px 7px);transition:width .35s cubic-bezier(.22,.8,.3,1)}
[data-rk="stundensatz"] .rk-legende .rk-hw-fehlt-li{color:var(--rk-rost)}
[data-rk="stundensatz"] .rk-legende .rk-hw-fehlt-li::before{background:repeating-linear-gradient(-45deg,rgba(168,72,42,.7) 0 2px,rgba(168,72,42,.2) 2px 4px)}
[data-rk="stundensatz"] .rk-legende .rk-hw-fehlt-li b{color:var(--rk-rost)}

/* Drei Wert-Kacheln immer in einer Reihe */
[data-rk="stundensatz"] .rk-hw-kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
[data-rk="stundensatz"] .rk-hw-kacheln .rk-kachel{padding:8px 0 0;min-width:0}
[data-rk="stundensatz"] .rk-hw-kacheln .rk-kachel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Szenario-Knöpfe: zweizeilig, Name fett genug, Ort und Preis leise */
[data-rk="stundensatz"] .rk-seg button{font-weight:650;text-align:center}
[data-rk="stundensatz"] .rk-seg button small{font-weight:400;margin-top:2px}

/* „Material ist nicht drin“ unter dem Preis-Regler: Abstand zur Grenzmarke („mind. …“ hängt unter der Spur) */
[data-rk="stundensatz"] .rk-tipp.rk-hw-material{margin-top:16px!important}

/* Feinheiten: Kopfzeile zweiteilig (fett + leise) · Weiterrechnen mit etwas Luft */
[data-rk="stundensatz"] .rk-fein > summary > span{line-height:1.35}
[data-rk="stundensatz"] .rk-weiter .rk-knopf{margin-top:6px}

/* Handy: die zwei Beispiel-Knöpfe untereinander, je zweizeilig (nebeneinander brachen sie auf drei Zeilen um) */
@media (max-width:559.98px){
  [data-rk="stundensatz"] .rk-seg--gleich button{flex:1 1 100%}
}
@media (max-width:419.98px){
  [data-rk="stundensatz"] .rk-hw-kacheln .rk-kachel{font-size:12px}
  [data-rk="stundensatz"] .rk-hw-kacheln .rk-kachel b{font-size:16.5px}
}
/* Handy-Leiste: längere Notizen („Preis zu niedrig“) zweizeilig statt abgeschnitten */
@media (max-width:899.98px){
  [data-rk="stundensatz"] .rk-mini__notiz{white-space:normal;text-overflow:clip;line-height:1.05;max-width:7.2em}
}
/* unter 360 px passt neben Label und Zahl keine Notiz – die Farbe der Zahl zeigt den Stand */
@media (max-width:359.98px){
  [data-rk="stundensatz"] .rk-mini__notiz{display:none}
  [data-rk="stundensatz"] .rk-hw-kacheln .rk-kachel b{font-size:14.5px;letter-spacing:-.03em}
  [data-rk="stundensatz"] .rk-seg button{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){[data-rk="stundensatz"] .rk-hw-fehlt{transition:none}}

/* --- trockenbau.css --- */
/* Rechner „Was kostet eine Trockenbauwand – und was bleibt dir?“ (/ratgeber/baufirma-gruenden/, 09.10.2026). Lädt nach rr-kit.css.
   Nur, was die Grundausstattung nicht hat; Präfix .rk-tr-. Jeder Selektor beginnt mit [data-rk="trockenbau"] – sonst gewinnt .rg-text p. */

/* Streifen mit runden Enden; kleine Überschrift darüber */
[data-rk="trockenbau"] .rk-tr-rund{overflow:hidden}
[data-rk="trockenbau"] .rk-tr-titel{margin:12px 0 -4px;font-size:13px;line-height:1.3;color:var(--rk-leise)}

/* Drei Wert-Kacheln immer in einer Reihe */
[data-rk="trockenbau"] .rk-tr-kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
[data-rk="trockenbau"] .rk-tr-kacheln .rk-kachel{padding:8px 0 0;min-width:0}
[data-rk="trockenbau"] .rk-tr-kacheln .rk-kachel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Szenario-Liste: Text links, Beispielwerte klein darunter */
[data-rk="trockenbau"] .rk-liste button > span{display:block;min-width:0}

/* Feinheiten: Zwischenüberschrift vor der Hochrechnung */
[data-rk="trockenbau"] .rk-tr-zwischen{margin:2px 0 -8px;padding-top:14px;border-top:1px dashed var(--rk-linie-2);font-size:13px;font-weight:700;color:var(--rk-leise);
  text-transform:uppercase;letter-spacing:.04em}
[data-rk="trockenbau"] .rk-fein > summary > span{line-height:1.35}

/* Die Rechnung im Detail: Zwischenzeile „Hochgerechnet auf einen Monat“ */
[data-rk="trockenbau"] .rk-zeilen .rk-tr-ab{padding-top:16px;border-top:2px solid var(--rk-linie-2);font-size:13px;font-weight:700;color:var(--rk-leise);
  text-transform:uppercase;letter-spacing:.04em}

/* Weiterrechnen: Knopf mit etwas Luft, Link zum Stundensatz-Rechner */
[data-rk="trockenbau"] .rk-weiter .rk-knopf{margin-top:6px}
[data-rk="trockenbau"] .rk-weiter .rk-tr-satzlink{font-size:14px;color:var(--rk-text)}
[data-rk="trockenbau"] .rk-tr-satzlink a{font-weight:700;text-decoration:none}
[data-rk="trockenbau"] .rk-tr-satzlink a:hover{text-decoration:underline}

@media (max-width:419.98px){
  [data-rk="trockenbau"] .rk-tr-kacheln .rk-kachel{font-size:12px}
  [data-rk="trockenbau"] .rk-tr-kacheln .rk-kachel b{font-size:16.5px}
  [data-rk="trockenbau"] .rk-notiz{font-size:17px}
}
/* Handy-Leiste: Preis je m² zweizeilig statt abgeschnitten; unter 360 px nur Label und Zahl */
@media (max-width:899.98px){
  [data-rk="trockenbau"] .rk-mini__notiz{white-space:normal;text-overflow:clip;line-height:1.05;max-width:5.4em}
}
@media (max-width:359.98px){
  [data-rk="trockenbau"] .rk-mini__notiz{display:none}
  [data-rk="trockenbau"] .rk-tr-kacheln .rk-kachel b{font-size:14.5px;letter-spacing:-.03em}
}

/* --- zz-optik.css --- */
/* Optik-Feinschliff der drei Handwerk-Ratgeber, 13.10.2026 (Sichtprüfung WebKit + Chromium, 1440/390/320 px).
   Liegt zuletzt in rr-handwerk.css (Dateiname zz-), gilt nur auf handwerksbetrieb-, elektriker- und baufirma-Seite. */

/* 1 · Spaltenüberschriften der Zwei-Spalten-Listen: Trennstrich statt Bruch mitten im Wort */
html body .rg-blick__liste dt{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;word-break:normal}
@media (min-width:640px){
  html body .rg-lesen .rg-blick__liste.rg-gruende div{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
}

/* 2 · „Aus unserer Beratung“: rechts derselbe Innenabstand wie links */
html body .rg-lesen .rg-beratung{padding-right:clamp(18px,2.6vw,32px)}

/* 3 · Gezeichneter Kreis um Beträge: an die Textbreite gekoppelt, mit Luft links und rechts */
html body .rg-lesen .rg-summe__zahl{padding:0 3px}
html body .rg-lesen .rg-summe__kreis{left:-17px;top:-10px;width:calc(100% + 34px);height:calc(100% + 20px)}
html body .rk .rk-betrag{padding:10px 22px}
html body .rk .rk-betrag svg{inset:-4px -11px;width:calc(100% + 22px)}
@media (max-width:430px){
  html body .rg-lesen .rg-summe__kreis{left:-13px;width:calc(100% + 26px)}
  html body .rk .rk-betrag{padding:8px 17px}
  html body .rk .rk-betrag svg{inset:-4px -9px;width:calc(100% + 18px)}
}

/* 4 · Kasten-Kopf (Titel links, Zähler/Hinweis rechts): der Zähler „0 von 9“ bricht nie um, lange Hinweise rutschen unter den Titel */
html body .rg-bau__kopf{flex-wrap:wrap}
html body .rg-bau__kopf span{flex:1 1 12em;min-width:0}
html body .rg-bau__kopf em{flex:0 1 auto;max-width:100%}
html body .rg-check__stand{flex:none;white-space:nowrap}

/* 5 · Rechenbeispiel „Beispiel, gerundet“: Betrag steht immer rechts, der Zeilentext bricht um */
html body .rg-rechnung__zeilen div{flex-wrap:nowrap;align-items:baseline;gap:4px 16px}
html body .rg-rechnung__zeilen dt{flex:1 1 0;min-width:0}
html body .rg-rechnung__zeilen dd{flex:none;text-align:right}

/* Kleinigkeiten */
html body .nw{white-space:nowrap}
/* AVGS-Karte bei 320 px: Knopf darf umbrechen, statt 11 px über den Rand zu laufen */
@media (max-width:359px){ html body .avh a.avh__knopf{white-space:normal;text-align:center} }