/* ==================================================================
   KredPal — gemeinsame Bauteile (v343, 29.09.2026)
   Bauteile, die Webseite und Partnerbereich beide nutzen. Geladen nach
   kredpal-token.css und vor kredpal.css bzw. vor den Styles des
   Partnerbereichs.
   Standard: Darstellung der Webseite (dunkler Grund im Rechner), Regeln
   woertlich aus kredpal.css uebernommen.
   Variante .bauteile-hell (am <body> des Partnerbereichs): heller Grund,
   Werte des Partnerbereichs. Nur Farbe, Schrift, Rundung und Zustaende
   weichen ab; Form und Verhalten sind gemeinsam.
   ================================================================== */

/* ---------- Marke ---------- */
  .eyebrow{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;}
  .logo-svg{display:block;height:18px;width:auto;overflow:visible;}
  .logo-svg .lk{fill:var(--logo-kred,var(--navy-dunkel));transition:fill var(--dauer-kurz) var(--kurve);}
  .logo-svg .lp{fill:var(--logo-pal,#405B85);transition:fill var(--dauer-kurz) var(--kurve);}

/* ---------- Rechner-Bedienelemente ---------- */
  /* Laufzeiten als Pillen (v110), 2 x 2, im Stil der Accordion-Punkte.
     Kreis links: gold gefuellt mit Haken, wenn gewaehlt. 240 Monate ist
     gesperrt, bis die energetische Massnahme eingeschaltet ist. */
  .term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px;}
  .term-btn{position:relative;display:flex;align-items:baseline;gap:8px;min-height:46px;
    padding:13px 16px 13px 48px;border-radius:var(--radius-pille);background:rgba(255,255,255,.05);
    cursor:pointer;user-select:none;transition:background var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve);}
  .term-btn:hover{background:rgba(255,255,255,.1);}
  .term-btn .check{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;
    border-radius:var(--radius-kreis);border:2px solid rgba(255,255,255,.35);box-sizing:border-box;}
  .term-btn.checked .check{background:var(--live-accent-500);border-color:var(--live-accent-500);}
  .term-btn.checked .check:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
  .term-btn .months{font-family:var(--disp);font-weight:600;font-size:var(--text-body);line-height:var(--zeile-normal);color:#fff;}
  .term-btn .years{font-size:var(--text-caption);color:var(--auf-dunkel);}
  .term-btn.locked{opacity:.4;cursor:not-allowed;}
  .term-btn.locked:hover{background:rgba(255,255,255,.05);}
  .term-btn .months{white-space:nowrap;}
  /* Energetische Massnahme als Pille mit Schalter rechts */
  .schalter-pille{margin-bottom:10px;}
  .schalter-pille span em{display:block;font-style:normal;font-size:var(--text-caption);font-weight:400;color:var(--auf-dunkel);margin-top:1px;}
  .schalter{-webkit-appearance:none;appearance:none;flex:0 0 42px;width:42px;height:24px;margin:0;
    border-radius:var(--radius-kachel);background:rgba(255,255,255,.18);position:relative;cursor:pointer;
    transition:background var(--dauer) var(--kurve);}
  .schalter:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-kreis);
    background:#fff;transition:transform var(--dauer) var(--kurve);}
  .schalter:checked{background:var(--live-accent-500);}
  .schalter:checked:after{transform:translateX(18px);}
  .schalter:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
  /* Farbwahl als Pillen im Stil der geschlossenen Accordion-Punkte
     (.bento-thema): Name links, runder Farbwaehler rechts. */
  .farb-pillen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
    margin-bottom:var(--abstand-karte);}
  .farb-pille{display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:46px;padding:9px 12px 9px 20px;border-radius:var(--radius-pille);cursor:pointer;
    background:rgba(255,255,255,.05);transition:background var(--dauer) var(--kurve);}
  .farb-pille:hover{background:rgba(255,255,255,.1);}
  .farb-pille span{font-family:var(--disp);font-size:var(--text-body);font-weight:600;line-height:var(--zeile-normal);color:#fff;}
  .farb-pille input[type=color]{-webkit-appearance:none;appearance:none;flex:0 0 28px;
    width:28px;height:28px;padding:0;border:2px solid rgba(255,255,255,.35);border-radius:var(--radius-kreis);
    background:none;cursor:pointer;overflow:hidden;}
  .farb-pille input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
  .farb-pille input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-kreis);}
  .farb-pille input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-kreis);}
  /* Rahmen nur bei Tastaturbedienung, nicht nach Mausklick */
  .farb-pille:has(:focus-visible){outline:2px solid rgba(255,255,255,.6);outline-offset:-3px;}

/* ---------- Variante hell (Partnerbereich) ----------
   Gleiches Bauteil auf weisser Karte. Werte wie bisher im Partnerbereich (v318/v319). */
/* Ueberzeile im Partnerbereich als Block in der Grundschrift; Flex-Werte der Webseite zuruecksetzen */
.bauteile-hell .eyebrow{font-family:inherit;display:block;align-items:normal;gap:normal;margin-bottom:12px}

.bauteile-hell .term-btn{border-radius:var(--radius-voll);background:var(--paper);cursor:default;user-select:auto;transition:opacity var(--dauer-kurz) var(--kurve)}
/* Im Partnerbereich sind die Laufzeit-Pillen reine Anzeige: kein Hover-Wechsel */
.bauteile-hell .term-btn:hover,.bauteile-hell .term-btn.locked:hover{background:var(--paper)}
.bauteile-hell .term-btn .check{border-color:var(--line)}
.bauteile-hell .term-btn.checked .check{background:var(--accent-500);border-color:var(--accent-500)}
.bauteile-hell .term-btn .months{font-family:inherit;line-height:inherit;color:var(--ink)}
.bauteile-hell .term-btn .years{color:var(--ink-muted)}
.bauteile-hell .term-btn.locked{cursor:default}

/* Die Schalter-Pille traegt auf der Webseite zusaetzlich .farb-pille (Form); im Partnerbereich steht sie allein */
.bauteile-hell .schalter-pille{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:9px 12px 9px 20px;border-radius:var(--radius-voll);background:var(--paper);cursor:pointer}
.bauteile-hell .schalter-pille span{font-size:var(--text-body);font-weight:600;color:var(--ink)}
.bauteile-hell .schalter-pille span em{color:var(--ink-muted)}
.bauteile-hell .schalter{background:var(--line);transition:background var(--dauer-kurz) var(--kurve)}
.bauteile-hell .schalter:after{transition:transform var(--dauer-kurz) var(--kurve)}
.bauteile-hell .schalter:checked{background:var(--accent-500)}
.bauteile-hell .schalter:focus-visible{outline-color:var(--accent-500)}

.bauteile-hell .farb-pillen{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 16px}
.bauteile-hell .farb-pille{border-radius:var(--radius-voll);background:var(--paper)}
.bauteile-hell .farb-pille:hover{background:var(--paper)}
.bauteile-hell .farb-pille span{font-family:inherit;line-height:inherit;color:var(--ink)}
.bauteile-hell .farb-pille input[type=color]{border-color:var(--line)}
.bauteile-hell .farb-pille:has(:focus-visible){outline-color:var(--accent-500);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.bauteile-hell .schalter,.bauteile-hell .schalter:after{transition:none}}