/* aigency.ch · Persönliches Angebot zum Check «KI im eigenen Haus» (11.11.2026)
   Baut auf p-umbau.css und p-beispiel.css auf (Report-Kopf, Kacheln, Baustein-Wahl).
   Neu: Regler, Nutzen-Rechnung, Break-even-Diagramm, Zeitplan. Farben und Masse nur aus tokens.css. */

/* Kopf: Kennzahlen etwas grösser, Bild als Collage statt Bildschirmfoto */
.ang-tiles b{font-size:clamp(34px,4vw,52px)}
.ang-tiles li:nth-child(2){background:var(--day-tint)}
.ang-tiles li:nth-child(3){background:var(--ink)}
.ang-tiles li:nth-child(3) b,.ang-tiles li:nth-child(3) span{color:var(--paper)}
.ang-shot{margin:0;rotate:1.2deg}
.ang-shot img{display:block;width:100%;height:auto}

/* 02 Nutzen: links Regler, rechts Ergebnis */
.ang-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:28px}
.ang-sliders{display:grid;gap:22px}
.ang-slider label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.ang-slider output{font-family:var(--f-display);font-size:28px;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap}
.ang-slider input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:8px 0 0;background:transparent;cursor:pointer}
.ang-slider input[type="range"]::-webkit-slider-runnable-track{height:3px;background:var(--ink)}
.ang-slider input[type="range"]::-moz-range-track{height:3px;background:var(--ink)}
.ang-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10.5px;border-radius:50%;background:var(--day);border:3px solid var(--sheet);box-shadow:0 0 0 1.5px var(--ink)}
.ang-slider input[type="range"]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--day);border:3px solid var(--sheet);box-shadow:0 0 0 1.5px var(--ink)}
.ang-slider input[type="range"]:focus-visible{outline:2px solid var(--day-deep);outline-offset:4px}
.ang-slider p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.ang-result{background:var(--day2-tint);padding:26px 26px 22px;rotate:.4deg;box-shadow:0 10px 18px -12px rgba(60,40,20,.45)}
.ang-result .lbl{margin:0 0 6px;color:var(--ink)}
.ang-result .big{margin:0;font-family:var(--f-display);font-size:clamp(44px,5.4vw,72px);line-height:1;color:var(--ink)}
.ang-result .sub{margin:8px 0 0;font-size:17px;line-height:1.5;color:var(--ink)}
.ang-result .sub b{font-weight:600}
.ang-result ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--ink)}
.ang-result li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px dashed color-mix(in srgb,var(--ink) 32%,transparent);font-size:16px;line-height:1.45;color:var(--ink)}
.ang-result li span:last-child{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* 03 Break-even */
.ang-chart{position:relative;margin-top:26px;background:var(--sheet);border:1px solid var(--rule);box-shadow:var(--shadow-note);padding:20px clamp(12px,2vw,24px) 14px}
.ang-legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 6px;padding:0;list-style:none;font-size:14.5px;color:var(--ink)}
.ang-legend li{display:flex;align-items:center;gap:8px}
.ang-legend i{display:block;width:26px;height:0;border-top:3px solid var(--day2)}
.ang-legend .is-cost i{border-top:3px dashed var(--day-deep)}
.ang-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ang-chart .grid line{stroke:var(--rule);stroke-width:1}
.ang-chart .axis text{font:400 12.5px/1 var(--f-body);fill:var(--ink-soft)}
.ang-chart .l-value{fill:none;stroke:var(--day2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ang-chart .l-cost{fill:none;stroke:var(--day-deep);stroke-width:2.5;stroke-dasharray:7 5;stroke-linejoin:round}
.ang-chart .dlabel{font:600 13px/1 var(--f-body);fill:var(--ink)}
.ang-chart .be-dot{fill:var(--ink);stroke:var(--sheet);stroke-width:2.5}
.ang-chart .be-line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4}
.ang-chart .be-text{font:400 19px/1 var(--f-display);fill:var(--ink)}
.ang-chart .cross{stroke:var(--ink);stroke-width:1;opacity:0}
.ang-chart .hit{fill:transparent;cursor:crosshair}
.ang-tip{position:absolute;z-index:2;pointer-events:none;min-width:190px;padding:10px 12px;background:var(--ink);color:var(--paper);font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-paper);opacity:0;transition:opacity .12s}
.ang-tip b{display:block;margin-bottom:2px;font-weight:600}
.ang-tip span{display:flex;justify-content:space-between;gap:16px}
.ang-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.ang-facts li{padding:14px 0 0}
.ang-facts b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.1}
.ang-facts span{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.ang-table{margin-top:18px;font-size:15px}
.ang-table summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ang-table table{width:100%;max-width:640px;margin-top:10px;border-collapse:collapse}
.ang-table th,.ang-table td{text-align:right;padding:8px 0 8px 16px;border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}
.ang-table th:first-child,.ang-table td:first-child{text-align:left;padding-left:0}
.ang-table thead th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-top:0}

/* 04 Baustein-Wahl: fester Posten und Posten pro Jahr */
.konf-item input:disabled{cursor:default;opacity:1}
.konf-fix{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0 0 4px;font-size:15.5px;line-height:1.45}
.konf-fix span:last-child{font-weight:600;white-space:nowrap}
.konf-sum .konf-year{margin:-2px 0 14px;padding-top:10px;border-top:1px dashed var(--rule);font-size:14.5px;line-height:1.5;color:var(--ink)}

/* 05 Zeitplan */
.ang-plan{--wk:7;margin-top:26px;overflow-x:auto}
.ang-plan-in{min-width:640px;display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--wk),minmax(0,1fr));gap:8px 0;align-items:center}
.ang-plan .wk{padding:0 0 8px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.ang-plan .wk:first-child{text-align:left}
.ang-plan .who{font-size:15px;line-height:1.35;padding-right:14px;color:var(--ink)}
.ang-plan .who small{display:block;font-size:12.5px;color:var(--ink-soft)}
.ang-plan .bar{grid-column:var(--a) / var(--b);min-height:38px;display:flex;align-items:center;padding:6px 12px;background:var(--day2-deep);color:var(--paper);font-size:13.5px;font-weight:600;line-height:1.3}
.ang-plan .bar.is-you{background:var(--day-tint);color:var(--ink)}
.ang-plan .bar.is-live{background:var(--ink);color:var(--paper)}
.ang-plan [hidden]{display:none!important}
.ang-plan-note{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:62ch}
.ang-plan-note b{color:var(--ink);font-weight:600}

/* 06 Annahmen */
.ang-assume{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);max-width:none}
.ang-assume li{padding:14px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.55}
.ang-assume b{display:block;font-weight:600}
.ang-assume a{color:var(--ink)}

@media (max-width:700px){
  .ang-plan{overflow:visible}
  .ang-plan-in{display:block;min-width:0}
  .ang-plan .wk{display:none}
  .ang-plan .who{display:block;padding:0}
  .ang-plan .bar{margin:6px 0 16px}
  .ang-plan .bar::before{content:attr(data-wk) " · ";white-space:pre;font-weight:400}
  .ang-chart .axis text{font-size:14px}
  .ang-chart .dlabel{font-size:14px}
  .ang-chart .be-text{font-size:19px}
}
@media (max-width:900px){
  .ang-calc{grid-template-columns:1fr}
  .ang-facts{grid-template-columns:1fr}
  .ang-assume{grid-template-columns:1fr}
}