/* Preis-Check für adswerk.net, generiert aus portfolio site.css (build_preis_check.py). Alles unter #preis-check gekapselt. */

/* Tokens, die adswerk.net nicht hat (Rest kommt aus der Seite: --ink, --paper, --surface, --line, --muted, --cobalt ...) */
#preis-check{--line-strong:#C9CFDA;--warn:#9A5B00;--warn-soft:#FFF4E0;--cobalt-hover:#1D3BC4;
  --night:#0B1020;--night-2:#131A2F;--night-line:#26304A;--night-ink:#ECEFF6;--night-muted:#A4ADC2;--night-cobalt:#8099FF;
  --r-card:20px;--r-field:12px;--ease-out:cubic-bezier(.22,1,.36,1);--f:var(--f-body);scroll-margin-top:84px}
:root[data-theme="dark"] #preis-check{--line-strong:#434C62;--warn:#F2B35A;--warn-soft:#2A2112;--cobalt-hover:#9AAEFF;--night:#10141F;--night-2:#181E2C;--night-line:#2B3347}
#preis-check .pc-head{display:grid;gap:14px;max-width:760px;margin-bottom:28px}
#preis-check .pc-noscript{padding:12px 16px;border-radius:12px;background:var(--cobalt-soft)}
#preis-check .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#preis-check .muted{color:var(--muted)} #preis-check .small{font-size:14px;line-height:1.55}
#preis-check [hidden]{display:none!important}
/* Live-Regeln für summary (FAQ-Plus-Zeichen) im Ergebnis-Kasten neutralisieren */
#preis-check .res-details summary{padding:8px 0;font:600 14px/1.4 var(--f-body);position:static}
#preis-check .res-details summary::after{content:"";position:static;display:block;flex:none;width:8px;height:8px;font-size:0;line-height:0;color:inherit;top:auto;right:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
#preis-check .res-details[open] summary::after{transform:rotate(-135deg)}
/* Live-Regeln ".chips label" (Kontaktformular) neutralisieren, damit die Kanal-Chips gleich aussehen */
#preis-check .chips label,#preis-check .chips label:has(input:checked){padding:0;border:0;background:none;box-shadow:none;border-radius:0;color:inherit;font:inherit;margin:0}
#preis-check .btn{white-space:nowrap}
#preis-check .btn-main{background:var(--cobalt);color:var(--on-cobalt)}
#preis-check .result .btn-main{background:var(--night-cobalt);color:var(--night)}
#preis-check #pc-anfrage,#preis-check #pc-thanks{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){#preis-check *,#preis-check *::before,#preis-check *::after{transition:none!important}}
/* Teaser im Hero */
.pc-teaser{display:flex;width:fit-content;align-items:center;gap:10px;margin-bottom:14px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--cobalt-soft);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;border:1px solid color-mix(in srgb,var(--cobalt) 30%,transparent)}
.pc-teaser b{background:var(--cobalt);color:var(--on-cobalt);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.pc-teaser:hover{border-color:var(--cobalt)}

#preis-check{background:var(--surface);border-block:1px solid var(--line)}
#preis-check .sec-head{margin-bottom:clamp(28px,4vw,44px)}
#preis-check .calc-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.85fr);gap:clamp(20px,3vw,40px);align-items:start}
#preis-check .calc-in{display:grid;gap:22px;min-width:0}
#preis-check .ci-row{display:grid;gap:10px;min-width:0}
#preis-check .ci-label{font-size:14px;font-weight:600;color:var(--ink);margin:0}
#preis-check .ci-help{font-weight:400;color:var(--muted);font-size:13px}
#preis-check .ci-inline{grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:16px}
#preis-check .ci-val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
#preis-check .ci-money{display:inline-flex;align-items:center;gap:8px}
#preis-check .ci-money input{width:130px;font:600 17px/1 var(--f);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r-field);padding:10px 12px;min-height:44px;font-variant-numeric:tabular-nums}
#preis-check .ci-money input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px color-mix(in srgb,var(--cobalt) 22%,transparent)}
#preis-check .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
#preis-check .seg label{position:relative;cursor:pointer}
#preis-check .seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
#preis-check .seg span{display:grid;justify-items:center;gap:2px;padding:10px 8px;border-radius:10px;text-align:center;transition:background-color .15s,box-shadow .15s}
#preis-check .seg b{font-weight:600;font-size:15px}
#preis-check .seg small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#preis-check .seg em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--cobalt)}
#preis-check .seg input:checked + span{background:var(--surface);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 0 0 1.5px var(--cobalt)}
#preis-check .seg input:checked + span small{color:var(--ink)}
#preis-check .seg input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:2px}
#preis-check .chips{display:flex;flex-wrap:wrap;gap:8px}
#preis-check .chip{position:relative}
#preis-check .chip input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
#preis-check .chip span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-weight:500;font-size:14px;transition:border-color .15s,background-color .15s}
#preis-check .chip input:checked + span{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--ink)}
#preis-check .chip input:checked + span::before{content:"";width:10px;height:6px;border-left:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg) translateY(-2px)}
#preis-check .chip input:focus-visible + span{outline:2px solid var(--cobalt);outline-offset:3px}
#preis-check .chip input:disabled{cursor:not-allowed}
#preis-check .checks2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
#preis-check .cb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-size:14px;transition:background-color .15s,border-color .15s}
@media (hover:hover){#preis-check .cb:hover{background:var(--paper)}}
#preis-check .cb:has(input:checked){background:var(--cobalt-soft);border-color:color-mix(in srgb,var(--cobalt) 40%,transparent)}
#preis-check .cb input{width:18px;height:18px;margin:0;accent-color:var(--cobalt);cursor:pointer}
#preis-check .cb .p{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;font-size:13px}
#preis-check .cb:has(input:checked) .p{color:var(--ink);font-weight:600}
#preis-check .cb .einm{font-size:11px;font-weight:600;color:var(--cobalt);margin-left:4px}
#preis-check .notice{margin-top:4px;padding:9px 12px;border-radius:10px;font-size:13.5px;background:var(--cobalt-soft);color:var(--ink)}
#preis-check .notice.warn{background:var(--warn-soft);color:var(--ink);border-left:3px solid var(--warn)}
#preis-check .notice button{margin-left:6px;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--cobalt);text-decoration:underline;cursor:pointer}
#preis-check input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:pointer;margin:0;--pct:6%}
#preis-check input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--cobalt) var(--pct),var(--line) var(--pct))}
#preis-check input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
#preis-check input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--cobalt)}
#preis-check input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--cobalt);margin-top:-9px;box-shadow:0 2px 8px rgba(16,20,31,.18)}
#preis-check input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--cobalt)}
#preis-check .result{position:sticky;top:96px;background:var(--night);color:var(--night-ink);border:1px solid var(--night-line);border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);display:grid;gap:14px}
#preis-check .badge-soft{justify-self:start;margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--night-cobalt) 18%,transparent);color:var(--night-cobalt)}
#preis-check .res-sums{display:flex;flex-wrap:wrap;gap:4px 32px;align-items:flex-end}
#preis-check .res-sums > div{display:grid;gap:2px}
#preis-check .res-v{font-size:clamp(36px,3.6vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
#preis-check .res-v2{font-size:clamp(24px,2.2vw,30px)}
#preis-check .res-k{font-size:13px;color:var(--night-muted)}
#preis-check .res-lines{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--night-line)}
#preis-check .res-lines li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--night-line);font-size:14.5px;color:var(--night-muted)}
#preis-check .res-lines strong{color:var(--night-ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
#preis-check #pc-sum-roi-zeile strong{color:var(--night-cobalt)}
#preis-check .res-note{margin:-6px 0 0;font-size:13px;color:var(--night-muted)}
#preis-check .res-note.roi-pflicht{line-height:1.5;color:var(--night-ink);opacity:.85}
#preis-check .result .btn{width:100%}
#preis-check .result .btn-main{background:var(--night-cobalt);color:var(--night)}
@media (hover:hover){#preis-check .result .btn-main:hover{background:#9AAEFF}}
#preis-check .res-fine{margin:0;font-size:12px;line-height:1.55;color:var(--night-muted)}
#preis-check .res-fine strong{color:var(--night-ink);font-weight:600}
#preis-check .sum-individual{display:grid;gap:6px;font-size:14px;color:var(--night-muted)}
#preis-check .sum-individual strong{font-size:28px;color:var(--night-ink);letter-spacing:-.02em;line-height:1.15}
#preis-check .res-details{border-top:1px solid var(--night-line);padding-top:4px;font-size:13.5px;color:var(--night-muted)}
#preis-check .res-details summary{cursor:pointer;font-weight:600;color:var(--night-ink);padding:8px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
#preis-check .res-details summary::-webkit-details-marker{display:none}
#preis-check .res-details summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease-out)}
#preis-check .res-details[open] summary::after{transform:rotate(-135deg)}
#preis-check .res-details h4{margin:16px 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--night-ink)}
#preis-check .sum-rows{display:grid;margin:0;padding:0;list-style:none}
#preis-check .sum-rows li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--night-line)}
#preis-check .sum-rows li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--night-ink)}
#preis-check .sum-rows li.sub{font-size:12px;border-bottom:0;padding-top:0}
#preis-check .sum-vergleich{display:grid;gap:6px}
#preis-check .sum-vergleich .vs{display:flex;justify-content:space-between;gap:12px;color:var(--night-ink)}
#preis-check .sum-vergleich small{font-size:12px;line-height:1.5}
#preis-check .roi-quote{display:grid;gap:4px}
#preis-check .roi-quote output{color:var(--night-ink);font-weight:600}
#preis-check .roi-werte{margin:6px 0 0;display:grid}
#preis-check .roi-werte div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--night-line)}
#preis-check .roi-werte dt{margin:0}
#preis-check .roi-werte dd{margin:0;color:var(--night-ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
#preis-check .roi-werte div.satz{display:block;color:var(--night-ink)}
#preis-check .roi-legal{margin:10px 0 0;font-size:12.5px;line-height:1.55}
@media (max-width:980px){#preis-check .calc-card{grid-template-columns:minmax(0,1fr)}
#preis-check .result{position:relative;top:auto}}
@media (max-width:640px){#preis-check .checks2{grid-template-columns:minmax(0,1fr)}
#preis-check .ci-inline{grid-template-columns:minmax(0,1fr) auto}
#preis-check .ci-inline .ci-label{grid-column:1/-1}
#preis-check .ci-inline .ci-help{grid-column:1/-1;margin-top:-10px}
#preis-check .seg b{font-size:14px}
#preis-check .seg small i{display:none}}
#preis-check .form-card{margin-top:clamp(28px,4vw,44px);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,44px);background:var(--paper);scroll-margin-top:96px}
#preis-check .form-card > h3{font-size:clamp(24px,2.4vw,32px)}
#preis-check .form-card > p{margin-top:10px}
#preis-check .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:28px}
#preis-check .field{display:grid;gap:8px;align-content:start}
#preis-check .field.full{grid-column:1/-1}
#preis-check .field label{font-size:15px;font-weight:500}
#preis-check .field label .req{color:var(--cobalt)}
#preis-check .field input,#preis-check .field textarea{width:100%;font:400 16px/1.4 var(--f);color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-field);padding:14px 16px;min-height:52px;transition:border-color .15s}
#preis-check .field textarea{min-height:120px;resize:vertical}
#preis-check .field input:focus,#preis-check .field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px color-mix(in srgb,var(--cobalt) 22%,transparent)}
#preis-check .field [aria-invalid=true]{border-color:var(--bad)}
#preis-check .err{font-size:14px;color:var(--bad);min-height:0}
#preis-check .err:empty{display:none}
#preis-check .check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5;cursor:pointer}
#preis-check .check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--cobalt);cursor:pointer}
#preis-check .check a{color:var(--cobalt)}
#preis-check .hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
#preis-check .form-foot{grid-column:1/-1;display:grid;gap:14px;margin-top:6px}
#preis-check .form-foot .btn{justify-self:start}
#preis-check .form-status{font-size:15px}
#preis-check .form-status.is-error{color:var(--bad)}
#preis-check .recap{margin-top:22px;padding:16px 18px;border-radius:var(--r-field);background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--muted)}
#preis-check .recap strong{color:var(--ink)}
#preis-check .thanks{display:grid;gap:16px}
#preis-check .thanks h3{font-size:clamp(28px,3vw,40px)}
#preis-check .thanks .tick{width:56px;height:56px;border-radius:50%;background:var(--cobalt);position:relative}
#preis-check .thanks .tick::after{content:"";position:absolute;left:18px;top:19px;width:20px;height:11px;border-left:3px solid var(--on-cobalt);border-bottom:3px solid var(--on-cobalt);transform:rotate(-45deg)}
@media (max-width:640px){#preis-check .form-grid{grid-template-columns:minmax(0,1fr)}
#preis-check .form-foot .btn{justify-self:stretch;white-space:normal;text-align:center;line-height:1.25;padding-block:12px}}