/* Website-Werkzeuge: Preisrechner (.rc), Angebot (.an), Website-Check (.ck), Lehrvideo (.lv).
   Nur auf Seiten geladen, die eines dieser Elemente enthalten (inc/tools.php). Nutzt die Variablen aus main.css. */

/* ---------- Preisrechner ---------- */
.rc{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-2);overflow:hidden;min-width:0}
.rc__loading{padding:48px 32px;color:var(--ink-3);font-size:var(--t-s)}
.rc__bar{height:4px;background:var(--bg-2)}
.rc__bar i{display:block;height:100%;background:var(--grad);border-radius:0 4px 4px 0;transition:width .6s var(--ease)}
.rc__pane{padding:clamp(22px,4vw,48px);display:grid;gap:26px;min-width:0}
.rc__head{display:grid;gap:10px}
.rc__step{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.rc__title{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);line-height:1.12;letter-spacing:-.025em;outline:none}
.rc__lead{color:var(--ink-2);max-width:62ch}
.rc__areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rc__area{position:relative}
.rc__area input,.rc__item > input,.rc__chip input{position:absolute;left:0;top:0;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0;margin:0;padding:0}
.rc__area label{display:grid;gap:8px;align-content:start;height:100%;min-height:170px;padding:22px;border:1.5px solid var(--line-2);border-radius:var(--r-l);cursor:pointer;background:var(--bg);transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease),background-color .25s}
.rc__area label:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.rc__area b{font-family:var(--f-display);font-size:1.15rem;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.rc__area small{color:var(--ink-2);font-size:var(--t-xs);line-height:1.5}
.rc__area input:checked + label{border-color:var(--navy);background:var(--surface);box-shadow:0 0 0 3px rgba(31,143,214,.16),var(--sh-1)}
.rc__area input:focus-visible + label{outline:2px solid var(--blue-ink);outline-offset:3px}
.rc__area-ic{width:44px;height:44px;border-radius:13px;background:var(--blue-soft);position:relative;margin-bottom:6px}
.rc__area-ic::after{content:"";position:absolute;inset:12px;border:2px solid var(--blue-ink);border-radius:5px}
.rc__area-ic--grafik{background:var(--lime-soft)}
.rc__area-ic--grafik::after{border-color:var(--lime-ink);border-radius:50%}
.rc__area-ic--digital{background:#eef0fb}
.rc__area-ic--digital::after{border-color:var(--navy);border-radius:2px;inset:13px 10px;border-width:2px 2px 6px}
.rc__area input:checked + label .rc__area-ic{background:var(--navy)}
.rc__area input:checked + label .rc__area-ic::after{border-color:#fff}
.rc__combos{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rc__combos p{flex-basis:100%;font-size:var(--t-s);color:var(--ink-2)}
.rc__combo{min-height:44px;font-size:var(--t-xs)}
.rc__nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.rc__nav--left{justify-content:flex-start}
.rc__nav .btn[disabled]{opacity:.45;cursor:not-allowed}
.rc__block{display:grid;gap:18px;padding-top:24px;border-top:1px solid var(--line)}
.rc__block:first-of-type{border-top:0;padding-top:0}
.rc__block h4,.rc__form h4{font-family:var(--f-display);font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.rc__frage{border:0;margin:0;padding:0;min-width:0}
.rc__frage legend{font-weight:600;font-size:var(--t-s);margin-bottom:10px;padding:0}
.rc__chips{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.rc__chip{position:relative}
.rc__chip label{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:var(--t-xs);font-weight:600;color:var(--ink-2);background:var(--surface);cursor:pointer;transition:all .25s var(--ease)}
.rc__chip label:hover{border-color:var(--ink-3)}
.rc__chip input:checked + label{background:var(--navy);border-color:var(--navy);color:#fff}
.rc__chip input:focus-visible + label{outline:2px solid var(--blue-ink);outline-offset:2px}
.rc__list{display:grid;gap:8px;position:relative}
.rc__sub{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.rc__item{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);transition:border-color .2s,box-shadow .25s,background-color .2s}
.rc__item label{display:grid;gap:4px;padding:14px 16px 14px 50px;cursor:pointer;position:relative}
.rc__item label::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--bg);transition:all .2s}
.rc__item input[type=radio] + label::before{border-radius:50%}
.rc__item.is-on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,143,214,.12)}
.rc__item.is-on label::before{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--navy)}
.rc__item input:focus-visible + label{outline:2px solid var(--blue-ink);outline-offset:2px;border-radius:var(--r)}
.rc__item-t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;align-items:baseline}
.rc__item-t b{font-weight:600;font-size:var(--t-s)}
.rc__item-t em{font-style:normal;font-family:var(--f-mono);font-size:.8rem;color:var(--blue-ink);white-space:nowrap}
.rc__item small{color:var(--ink-2);font-size:var(--t-xs);line-height:1.5}
.rc__item--kein label{padding-block:12px}
.rc__menge{display:flex;align-items:center;gap:6px;padding:0 16px 14px 50px}
.rc__menge button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font:600 1.1rem/1 var(--f-body);color:var(--ink);cursor:pointer}
.rc__menge button:hover{border-color:var(--ink-3)}
.rc__menge output{min-width:86px;text-align:center;font-weight:600;font-size:var(--t-s)}
.rc__tf textarea{min-height:64px}
.rc__hint,.rc__tip{font-size:var(--t-s);color:var(--ink-2);background:var(--bg);border:1px dashed var(--line-2);border-radius:var(--r);padding:12px 16px}
.rc__tip{background:var(--lime-soft);border:0;color:#2a4d0b}
.rc__link{background:none;border:0;padding:0;font:inherit;color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rc__badge{justify-self:start;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-2);background:var(--bg-2);border-radius:999px;padding:7px 14px}
.rc__warn{background:#fff7e6;border:1px solid #f3d495;border-radius:var(--r);padding:14px 18px;display:grid;gap:6px;font-size:var(--t-s);color:#6b4a00}
.rc__resbox{min-height:80px}
.rc__result{display:grid;gap:20px}
.rc__pos{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.rc__pos li{display:flex;justify-content:space-between;gap:18px;padding:16px 20px;border-top:1px solid var(--line);background:var(--surface)}
.rc__pos li:first-child{border-top:0}
.rc__pos li > div{display:grid;gap:4px;min-width:0}
.rc__pos b{font-weight:600;font-size:var(--t-s)}
.rc__pos small{color:var(--ink-2);font-size:var(--t-xs);line-height:1.5}
.rc__pos li > span{font-variant-numeric:tabular-nums;font-size:var(--t-s);font-weight:600;color:var(--navy);white-space:nowrap;text-align:right}
.rc__pos li > span.is-offen{color:var(--ink-3);white-space:normal;max-width:12ch}
.rc__sum{display:grid;gap:0;margin:0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-l);padding:6px 20px}
.rc__sum > div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.rc__sum > div:first-child{border-top:0}
.rc__sum dt{font-size:var(--t-s);color:var(--ink-2)}
.rc__sum dd{margin:0;font-size:var(--t-s);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc__sum .is-total{border-top:1.5px solid var(--line-2);padding-top:12px}
.rc__sum .is-total dt{color:var(--navy);font-weight:600}
.rc__sum .is-total dd{font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.rc__info{display:grid;gap:8px}
.rc__info li{position:relative;padding-left:18px;font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.rc__info li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.rc__form{display:grid;gap:16px;padding:clamp(18px,3vw,28px);border-radius:var(--r-l);background:var(--bg);border:1px solid var(--line)}
.rc__form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rc__fine{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.rc__check{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-s);line-height:1.5}
.rc__check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--navy)}
.rc__done{justify-items:start;text-align:left}
.rc__ok{width:56px;height:56px;border-radius:50%;background:var(--lime-soft);position:relative}
.rc__ok::after{content:"";position:absolute;left:19px;top:14px;width:12px;height:22px;border:solid var(--lime-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
@media (max-width:860px){.rc__areas{grid-template-columns:1fr}.rc__area label{min-height:0;grid-template-columns:44px 1fr;column-gap:14px}.rc__area-ic{grid-row:span 2;margin:0}}
@media (max-width:560px){.rc__form .row{grid-template-columns:1fr}.rc__pos li{flex-direction:column;gap:6px}.rc__pos li > span{text-align:left}.rc__nav{flex-direction:column-reverse;align-items:stretch}.rc__nav .btn{width:100%}.rc__item label{padding-left:46px}.rc__menge{padding-left:46px}}

/* ---------- Angebot (Kundenansicht, Aufbau wie das PDF) ---------- */
.an{display:grid;gap:22px;max-width:900px;margin-inline:auto;min-width:0}
.an__doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:clamp(20px,4vw,44px);display:grid;gap:26px;min-width:0}
.an__top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.an__kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.an__nr{font-family:var(--f-display);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:600;letter-spacing:-.02em;color:var(--navy);line-height:1.2}
.an__pdf{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:600;color:var(--blue-ink);text-decoration:none;border:1px solid var(--line-2);border-radius:10px;padding:9px 14px;background:var(--surface)}
.an__pdf:hover{border-color:var(--ink-3)}
.an__pdf .ic{transform:rotate(90deg)}
.an__facts{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:14px;background:var(--bg);border-radius:var(--r);padding:16px 18px}
.an__facts div{display:grid;gap:4px;align-content:start;min-width:0}
.an__facts span{font-size:.72rem;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.an__facts b{font-size:var(--t-s);font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.45}
.an__table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.an__table th{background:var(--navy);color:#fff;font-weight:600;font-size:var(--t-xs);text-align:left;padding:10px 12px}
.an__table th:first-child{border-radius:8px 0 0 8px;width:48px}
.an__table th:last-child{border-radius:0 8px 8px 0;text-align:right}
.an__table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.an__table td b{display:block;font-weight:600;color:var(--navy)}
.an__table td small{display:block;color:var(--ink-2);font-size:var(--t-xs);line-height:1.5;margin-top:3px}
.an__table tfoot td{border-bottom:0;padding:7px 12px;color:var(--ink-2)}
.an__n{color:var(--ink-3)}
.an__b{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.an__total{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-2);border-radius:var(--r);padding:14px 18px;margin-top:-12px}
.an__total span{font-weight:600;color:var(--navy)}
.an__total b{font-family:var(--f-display);font-size:1.45rem;font-weight:600;color:var(--navy);white-space:nowrap}
.an__sec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;padding-top:6px;border-top:1px solid var(--line)}
.an__sec .an__wide{grid-column:1/-1}
.an__sec .an__wide ul{grid-template-columns:1fr 1fr;column-gap:32px}
.an__sec h3{font-family:var(--f-display);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.an__sec p,.an__sec li{font-size:var(--t-xs);line-height:1.6;color:var(--ink-2)}
.an__sec ul{display:grid;gap:5px}
.an__sec li{position:relative;padding-left:14px}
.an__sec li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:1px;background:var(--blue)}
.an__fine{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.an__accept{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,4vw,36px);display:grid;gap:18px}
.an__accept-head h3{font-family:var(--f-display);font-size:1.3rem;font-weight:600;color:var(--navy)}
.an__accept-head p{color:var(--ink-2);font-size:var(--t-s);margin-top:4px}
.an__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.an__row--3{grid-template-columns:1.2fr 1fr 1.2fr}
.an__sig{display:grid;gap:8px}
.an__sig-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-s);font-weight:600}
.an__sig-reset{background:none;border:0;padding:0;font:inherit;font-size:var(--t-xs);font-weight:600;color:var(--blue-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.an__sig-pad{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:900/260;background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--r);touch-action:none;cursor:crosshair;background-image:linear-gradient(transparent calc(100% - 46px),var(--line-2) calc(100% - 46px),var(--line-2) calc(100% - 45px),transparent calc(100% - 45px))}
.an__sig-pad.is-signed{border-style:solid;border-color:var(--navy)}
.an__hash{margin-top:8px;font-size:.72rem!important;color:var(--ink-3)!important;overflow-wrap:anywhere}
.an__hash code{font-family:var(--f-mono);font-size:.7rem}
.an__code{display:grid;gap:8px;justify-items:start;padding:16px 18px;border-radius:var(--r);background:var(--blue-soft)}
.an__code label{font-size:var(--t-s);font-weight:600}
.an__code input{width:190px;min-height:52px;font:600 1.5rem/1 var(--f-mono);letter-spacing:.3em;text-align:center;color:var(--navy);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:0 10px}
.an__code input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,143,214,.16)}
.an__accept--ok h3{font-family:var(--f-display);font-size:1.25rem;color:var(--navy)}
.an__agb{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.an__agb-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--t-xs)}
.an__agb-head b{color:var(--navy);font-size:var(--t-s)}
.an__agb-head span{color:var(--ink-3)}
.an__agb-text{max-height:280px;overflow-y:auto;padding:14px 16px;font-size:var(--t-xs);line-height:1.6;color:var(--ink-2);background:#fff}
.an__agb-text h2{font-family:var(--f-display);font-size:.95rem;font-weight:600;color:var(--navy);margin:14px 0 4px;letter-spacing:0;line-height:1.3}
.an__agb-text p{margin:0 0 6px}
.an__agb-text:focus-visible{outline:2px solid var(--blue-ink);outline-offset:-2px}
.an__checks{display:grid;gap:10px}
.an__check{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-s);line-height:1.5;color:var(--ink)}
.an__check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--navy)}
.an__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.an__btn{min-height:46px;padding:0 22px;font-size:var(--t-xs)}
.an__btn[disabled]{opacity:.45;cursor:not-allowed}
.an__go .an__fine{flex:1 1 260px}
.an__state{display:grid;gap:14px;justify-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.an__state--ok{background:var(--lime-soft);border-color:transparent}
@media (max-width:760px){.an__facts{grid-template-columns:1fr 1fr}.an__sec,.an__sec .an__wide ul{grid-template-columns:1fr}.an__row,.an__row--3{grid-template-columns:1fr}.an__table th:first-child,.an__table td.an__n,.an__table tfoot td:first-child{display:none}.an__table td{padding:11px 8px}}

/* ---------- Website-Check ---------- */
.ck{display:grid;gap:28px;min-width:0}
.ck__form{gap:12px}
.ck__row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:12px;align-items:end}
.ck__dev select{width:100%;min-height:52px;font:inherit;font-size:var(--t-s);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-s);padding:0 12px}
.ck__fine{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.ck__meta{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);overflow-wrap:anywhere}
.ck__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.ck__card{display:grid;gap:14px;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-1);min-width:0}
.ck__sum{color:var(--ink-2);font-size:var(--t-s)}
.ck__sub{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.ck__list{display:grid;gap:0}
.ck__pt{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.ck__pt:first-child{border-top:0}
.ck__pt-h{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ck__pt-h b{font-size:var(--t-s);font-weight:600}
.ck__pt > p{font-size:var(--t-xs);color:var(--ink-2);overflow-wrap:anywhere}
.ck__pt details{font-size:var(--t-xs);color:var(--ink-2)}
.ck__pt summary{cursor:pointer;color:var(--blue-ink);font-weight:600;width:max-content}
.ck__pt details p{margin-top:6px;white-space:pre-line}
.ck__z{flex:none;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--bg-2);color:var(--ink-2)}
.ck__z--gut{background:var(--lime-soft);color:var(--lime-ink)}
.ck__z--hinweis{background:#fff4dc;color:#8a5a00}
.ck__z--fehlt{background:#fde8e8;color:#a02525}
.ck__z--nicht_pruefbar{background:var(--bg-2);color:var(--ink-3)}
.ck__score{display:flex;align-items:baseline;gap:12px}
.ck__score b{font-family:var(--f-display);font-size:3rem;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.ck__score span{font-size:var(--t-xs);color:var(--ink-2)}
.ck__wait{display:flex;gap:14px;align-items:center;color:var(--ink-2);font-size:var(--t-s)}
.ck__spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--bg-2);border-top-color:var(--blue);animation:ck-spin 1s linear infinite;flex:none}
@keyframes ck-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ck__spin{animation-duration:3s}}
.ck__np{font-size:var(--t-s);color:var(--ink-2);background:var(--bg);border-radius:var(--r);padding:12px 14px}
.ck__more summary{cursor:pointer;font-size:var(--t-xs);font-weight:600;color:var(--blue-ink)}
.ck__more p{font-size:var(--t-xs);color:var(--ink-2);margin-top:6px}
.ck__emp{display:grid;gap:14px;padding:clamp(20px,3vw,32px);border-radius:var(--r-xl);background:var(--navy);color:#fff;background-image:radial-gradient(120% 140% at 100% 0,rgba(31,143,214,.35),transparent 60%)}
.ck__emp h3{color:#fff}
.ck__empi{display:grid;gap:6px;padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.ck__empi b{font-weight:600}
.ck__empi p{font-size:var(--t-s);color:rgba(255,255,255,.85)}
.ck__empi .ck__fine{color:rgba(255,255,255,.6)}
.ck__bereich{font-family:var(--f-mono);font-size:.7rem!important;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)!important}
.ck__actions{display:grid;gap:16px}
.ck__btns{display:flex;flex-wrap:wrap;gap:10px}
.ck__af .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ck__af h4{font-family:var(--f-display);font-size:1.2rem;font-weight:600}
@media (max-width:860px){.ck__grid{grid-template-columns:1fr}}
@media (max-width:640px){.ck__row{grid-template-columns:1fr}.ck__row .btn{width:100%}.ck__af .row{grid-template-columns:1fr}}

/* ---------- Lehrvideo ---------- */
.lv{display:grid;gap:18px;margin:0;min-width:0}
.lv__frame{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--navy);box-shadow:var(--sh-2);aspect-ratio:16/9}
.lv__frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--navy)}
.lv__leer{display:grid;place-items:center;height:100%;color:rgba(255,255,255,.7);font-size:var(--t-s)}
.lv__cap{display:grid;gap:10px;justify-items:start}
.lv__cap > p{color:var(--ink-2);font-size:var(--t-s)}
.lv__tx{width:100%;border-top:1px solid var(--line);padding-top:10px}
.lv__tx summary{cursor:pointer;font-weight:600;font-size:var(--t-s);color:var(--blue-ink)}
.lv__tx .prose{margin-top:10px;font-size:var(--t-s)}
.lv__cta{margin-top:4px}

/* Übersicht der Lehrvideos (Seite „Einfach erklärt“) */
.lvgrid,.e-con.lvgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px)!important;align-items:start}
@media (max-width:860px){.lvgrid,.e-con.lvgrid{grid-template-columns:1fr}}

/* ---------- Schnellrechner (z. B. im Startseiten-Kopf) ---------- */
.sr{position:relative;z-index:2;display:grid;gap:14px;width:100%;max-width:440px;justify-self:end;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:clamp(18px,2.4vw,26px)}
.sr__kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.sr__title{font-family:var(--f-display);font-size:1.35rem;font-weight:600;letter-spacing:-.015em;color:var(--navy);line-height:1.2;margin-top:2px}
.sr fieldset{border:0;margin:0;padding:0;display:grid;gap:7px;min-width:0}
.sr__sub{font-size:.72rem;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0;margin-bottom:2px}
.sr__opt,.sr__chip{position:relative;cursor:pointer}
.sr__opt input,.sr__chip input{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sr__opt span{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
.sr__opt b{font-weight:600;font-size:var(--t-s);color:var(--ink)}
.sr__opt em,.sr__chip em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--t-xs);color:var(--blue-ink);white-space:nowrap}
.sr__opt.is-on span{border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,143,214,.14)}
.sr__opt input:focus-visible + span,.sr__chip input:focus-visible + span{outline:2px solid var(--blue-ink);outline-offset:2px}
.sr__ext{display:flex!important;flex-wrap:wrap;gap:6px!important}
.sr__ext legend{width:100%}
.sr__chip span{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);background:#fff}
.sr__chip.is-on span{background:var(--navy);border-color:var(--navy);color:#fff}
.sr__chip.is-on em{color:var(--lime)}
.sr__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px 2px;border-top:1px solid var(--line)}
.sr__sum span{font-size:var(--t-s);font-weight:600;color:var(--ink)}
.sr__sum b{font-family:var(--f-display);font-size:1.2rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.sr__sum small{flex-basis:100%;font-size:.72rem;color:var(--ink-2);text-align:right}
.sr__sum{flex-wrap:wrap}
.sr__btn{width:100%;min-height:48px}
.sr__fine{font-size:.72rem;line-height:1.5;color:var(--ink-3);text-align:center}
@media (max-width:980px){.sr{justify-self:stretch;max-width:none}}

.lvsolo,.e-con.lvsolo{max-width:860px;margin-inline:auto;width:100%}

/* ---------- Ratgeber-Themen ---------- */
.rg,.e-con .rg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rg__card{display:grid;align-content:start;gap:10px;padding:22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);text-decoration:none;color:inherit;box-shadow:var(--sh-1);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.rg__card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--sh-2)}
.rg__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rg__nr{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}
.rg__chip{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:var(--blue-ink);background:var(--blue-soft);border-radius:999px;padding:4px 10px}
.rg__chip .ic{width:12px;height:12px}
.rg__t{font-family:var(--f-display);font-size:1.15rem;line-height:1.3;font-weight:600;color:var(--navy)}
.rg__d{font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.rg__more{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--blue-ink);margin-top:2px}
@media (max-width:980px){.rg,.e-con .rg{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rg,.e-con .rg{grid-template-columns:1fr}}
.rgl{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:clamp(18px,3vw,28px);display:grid;gap:14px}
.rgl__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.rgl__title{font-family:var(--f-display);font-size:1.2rem;font-weight:600;color:var(--navy)}
.rgl__all{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--blue-ink);text-decoration:none}
.rgl__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.rgl__list li{border-top:1px solid var(--line)}
.rgl__list a,.rgl__list span{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:var(--t-s);font-weight:500;color:var(--ink);text-decoration:none}
.rgl__list a:hover{color:var(--blue-ink)}
.rgl__list a i{font-style:normal;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;flex:none}
.rgl__list .is-current span{color:var(--ink-3)}
@media (max-width:700px){.rgl__list{grid-template-columns:1fr}}
.rg-back{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-s);font-weight:600;color:var(--blue-ink);text-decoration:none}
.rg-back .ic{transform:rotate(180deg)}

/* ---------- Hilfe-Hinweis ---------- */
.hw{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:var(--r);background:var(--surface);max-width:760px}
.hw__ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime-soft);color:var(--lime-ink);font:700 .95rem/1 var(--f-display)}
.hw__body{display:grid;gap:4px;min-width:0}
.hw__frage{font-weight:600;font-size:var(--t-s);color:var(--navy)}
.hw__text{font-size:var(--t-xs);color:var(--ink-2)}
.hw__links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:2px}
.hw__links li{font-size:var(--t-xs)}
.hw__links a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue-ink);text-decoration:none}
.hw__links a:hover{text-decoration:underline;text-underline-offset:3px}
.hw__info{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.hw-wrap,.e-con.hw-wrap{margin-top:clamp(20px,3vw,32px)}
.hw-wrap.hw-c,.e-con.hw-wrap.hw-c{align-items:center}
.rg-backwrap .go .ic{transform:rotate(180deg)}

/* ---------- Website-Studio-Teaser ---------- */
.sts{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;width:100%;padding:clamp(24px,4.5vw,56px);border-radius:var(--r-xl);background:radial-gradient(120% 90% at 100% 0%,#0a4a80 0%,var(--navy) 55%,#011f39 100%);color:#fff;overflow:hidden;box-shadow:var(--sh-2)}
.sts__text{display:grid;gap:14px;justify-items:start;min-width:0}
.sts__kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.sts__title{font-family:var(--f-display);font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:#fff;margin:0}
.sts__lead{font-size:var(--t-s);line-height:1.6;color:rgba(255,255,255,.78);max-width:52ch}
.sts__list{display:grid;gap:8px;margin:2px 0 4px;padding:0;list-style:none}
.sts__list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-s);line-height:1.45;color:rgba(255,255,255,.9)}
.sts__list .ic{flex:none;width:16px;height:16px;margin-top:3px;color:var(--lime)}
.sts__note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--lime);max-width:56ch}
.sts__note .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--lime)}
.sts__note p{font-size:var(--t-xs);line-height:1.55;color:rgba(255,255,255,.82)}
.sts__note b{display:block;color:#fff;font-size:var(--t-s);margin-bottom:2px}
.sts__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}
.sts__fine{font-size:.78rem;color:rgba(255,255,255,.6)}
.sts__stage{position:relative;display:block;aspect-ratio:5/4;min-width:0;text-decoration:none}
.sts__img{position:absolute;display:block;height:auto;border-radius:12px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);transition:transform .5s var(--ease)}
.sts__img--2{left:0;top:2%;width:60%;transform:rotate(-5deg);opacity:.85}
.sts__img--3{right:0;top:0;width:58%;transform:rotate(4deg);opacity:.85}
.sts__img--1{left:12%;top:24%;width:76%;z-index:3}
.sts__img--4{right:-2%;bottom:2%;width:38%;z-index:4}
.sts__stage:hover .sts__img--1{transform:translateY(-6px)}
.sts__stage:hover .sts__img--2{transform:rotate(-7deg) translateX(-6px)}
.sts__stage:hover .sts__img--3{transform:rotate(6deg) translateX(6px)}
.sts__badge{position:absolute;left:4%;bottom:6%;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--lime);color:var(--navy);font-weight:600;font-size:.78rem;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
@media (max-width:900px){.sts{grid-template-columns:1fr}.sts__stage{order:-1;max-width:560px;width:100%;justify-self:center}}
@media (max-width:520px){.sts__img--4{display:none}.sts__img--1{left:4%;width:92%;top:26%}.sts__cta .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.sts__img{transition:none}}

/* ---------- Angebot ablehnen (klein, unter der Annahme) ---------- */
.an__nein{margin-top:14px;font-size:var(--t-xs);color:var(--ink-3)}
.an__nein>summary{display:inline-block;cursor:pointer;list-style:none;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.an__nein>summary::-webkit-details-marker{display:none}
.an__nein>summary:hover{color:var(--ink-2)}
.an__nein-form{display:grid;gap:14px;margin-top:10px;padding:clamp(18px,3vw,26px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);font-size:var(--t-s);color:var(--ink)}
.an__nein-lead{color:var(--ink-2)}
.an__nein-gr{border:0;margin:0;padding:0;display:grid;gap:8px}
.an__nein-gr legend{font-weight:600;color:var(--navy);margin-bottom:6px}
.an__nein-form .field i{font-style:normal;color:var(--ink-3);font-weight:400}
.an__nein--ok{padding:16px 18px;border-radius:var(--r);background:var(--bg);color:var(--ink-2);font-size:var(--t-s)}

/* ---------- Schnellrechner in Schritten ---------- */
.sr [hidden]{display:none!important}
.sr__prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sr__prog i{display:block;height:4px;border-radius:4px;background:var(--line)}
.sr__prog i.is-on{background:linear-gradient(90deg,var(--navy),var(--blue))}
.sr__step-l{font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-top:-4px}
.sr--steps .sr__opt span{display:grid;gap:2px;justify-content:start}
.sr--steps .sr__opt small{font-size:.74rem;color:var(--ink-3);font-weight:400;line-height:1.35}
.sr__nav{display:flex;gap:8px}
.sr__nav .btn{min-height:46px}
.sr__next{flex:1}
.sr__res{display:grid;gap:6px}
.sr__list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.sr__list li{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:var(--t-s);color:var(--ink)}
.sr__list em{font-style:normal;font-weight:600;font-size:var(--t-xs);color:var(--blue-ink);white-space:nowrap;font-variant-numeric:tabular-nums}

.sr--steps legend.sr__sub,.sr--steps .sr__res>.sr__sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}