/* ==========================================================================
   Badrechner — nur auf badsanierung.html geladen.

   Bewusst eine eigene Datei statt eines Anbaus an style.css: die Styles
   werden auf genau einer von 34 Seiten gebraucht, und ein Eingriff in
   style.css hätte den Versionsbuchstaben auf allen Seiten mitgezogen und
   damit jedem wiederkehrenden Besucher das Stylesheet neu geschickt.

   Alle Farben kommen aus den Tokens in style.css, damit Hell/Dunkel
   automatisch mitläuft. Kein einziger fester Farbwert unten.
   Namensraum durchgehend .br-, damit nichts mit bestehenden Klassen
   kollidiert.
   ========================================================================== */

.br-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .br-layout { grid-template-columns: 1fr; }
}

/* --- Eingabespalte ------------------------------------------------------ */

.br-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.br-block {
  margin: 0;
  padding: 1.5rem clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--card-1);
  box-shadow: var(--shadow);
}

.br-legend {
  padding: 0;
  margin-bottom: 1.1rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.br-hint {
  margin: .9rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Größen-Slider ------------------------------------------------------ */

.br-size {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.br-size input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.br-size input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
}

.br-size input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
}

.br-size input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}

.br-size input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}

.br-size input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 999px;
}

.br-size-out {
  flex: 0 0 auto;
  min-width: 5.5rem;
  text-align: right;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Umfang: Radio-Karten ---------------------------------------------- */

.br-choices {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.br-choice {
  position: relative;
  display: flex;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.br-choice:hover { border-color: var(--accent); }

/* Der native Radio bleibt im Fluss stehen (Klickfläche, Screenreader,
   Tastatur) und wird nur optisch an den Kartenrand gesetzt. */
.br-choice input[type="radio"],
.br-extra input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.br-choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}

.br-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.br-choice-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.br-choice-title {
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.br-choice-text {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Extras: Checkboxen ------------------------------------------------- */

.br-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem;
}

.br-extra {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.br-extra:hover { border-color: var(--accent); }

.br-extra:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}

.br-extra:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.br-extra-label {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink);
}

/* --- Ergebniskarte ------------------------------------------------------ */

.br-result {
  position: sticky;
  top: 5.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--card-1);
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .br-result { position: static; }
}

.br-result-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

/* <output> ist inline — als Betragszeile braucht es eine eigene Zeile. */
.br-range {
  display: block;
  font-size: clamp(1.6rem, 4.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.br-range-note {
  margin: .55rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.br-breakdown {
  margin: 1.4rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.br-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  font-size: .9rem;
  color: var(--ink-soft);
}

.br-breakdown li span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.br-included {
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
}

.br-included-title {
  margin: 0 0 .6rem;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.br-included ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.br-included li {
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--ink-soft);
}

.br-cta {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
}

.br-disclaimer {
  margin: 1rem 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Ohne JS bleibt der Rechner sinnlos — dann lieber gar nicht anzeigen und
   die statische Preisspanne im FAQ weiter unten wirken lassen. */
.br-layout[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .br-choice,
  .br-extra {
    transition: none;
  }
}

/* ==========================================================================
   Partnerkarte ELEMENTS-Schauraum

   Liegt in dieser Datei, weil sie wie der Badrechner ausschliesslich auf
   badsanierung.html geladen wird — ein Eingriff in style.css haette den
   Versionsbuchstaben auf 37 Seiten mitgezogen.

   Die Karte ist in BEIDEN Farbschemata dunkel, und das ist Absicht: Die
   Bildmarke von ELEMENTS ist weiss angelegt. Sie umzufaerben hiesse, eine
   fremde Marke zu veraendern; ein dunkler Traeger zeigt sie so, wie ihr
   Inhaber sie fuehrt. Die feste Farbe hier ist deshalb kein vergessener
   Token, sondern der Grund fuer die Karte.
   ========================================================================== */

.partner-karte {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3.5vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: #171717;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s cubic-bezier(.16, 1, .3, 1),
              border-color .3s ease;
}

.partner-karte:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.partner-karte:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Markenzeichen: Bildmarke plus Wortmarke ---------------------------- */

.partner-marke {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}

.partner-marke svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.partner-wortmarke {
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.005em;
  color: #ffffff;
}

/* --- Begleittext -------------------------------------------------------- */

.partner-text {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  flex: 1 1 14rem;
  min-width: 0;
}

.partner-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .55);
}

.partner-ort {
  font-size: 1rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
}

.partner-pfeil {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, .55);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .3s ease;
}

.partner-karte:hover .partner-pfeil {
  transform: translateX(4px);
  color: #ffffff;
}

@media (max-width: 560px) {
  .partner-karte { gap: 1rem; }
  .partner-wortmarke { font-size: 1.45rem; }
  .partner-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-karte,
  .partner-pfeil { transition: none; }
  .partner-karte:hover { transform: none; }
  .partner-karte:hover .partner-pfeil { transform: none; }
}