/* ==========================================================================
   Marktritter – Shop (Konfigurator, Warenkorb, Kasse, Bestellung)
   Baut auf app.css auf (Tokens, Buttons, Karten, Formulare) – nur Ergänzungen.
   ========================================================================== */

.no-js .js-only { display: none !important; }
.req { color: var(--orange-text, #A8400C); font-weight: 700; }   /* --orange-deep hielt auf Weiß/Creme nur ~3:1 */
.shop-money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Buttons dürfen im Shop auf schmalen Screens umbrechen */
.cfg .btn--block, .shop .btn--block, .cfg-submit, .co-submit, .ty-submit { white-space: normal; text-align: left; line-height: 1.15; }
@media (max-width: 420px) {
  .cfg-submit, .co-submit, .ty-submit { width: 100%; justify-content: space-between; font-size: .95rem; padding-left: 1.2em; }
}

.btn-link {
  display: inline-flex; align-items: center; gap: .4em; padding: .4em .2em; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: .92rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px;
}
.btn-link:hover { color: var(--err); text-decoration-color: currentColor; }
.btn-link .icon { width: 1.05em; height: 1.05em; }
.shop .btn-link { min-height: 44px; }
/* Touch-Ziele ≥ 44 px (app.css .btn--sm ist 42 px) */
.shop .btn--sm, .page-cfg .btn--sm { min-height: 44px; }

/* ---------- Seitenkopf & Fortschritt (Warenkorb / Kasse) ---------- */
.shop-hero { padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); position: relative; }
.shop-hero .display-md { margin-top: 18px; }
.shop-hero .lead { margin-top: 14px; }

.shop-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; list-style: none; padding: 0; font-size: .85rem; }
.shop-progress li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.6); border: 1px solid var(--line); color: var(--muted); }
.shop-progress li b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: .75rem; }
.shop-progress li.is-done { color: var(--ink); }
.shop-progress li.is-done b { background: var(--ink); color: var(--lime); }
.shop-progress li.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.shop-progress li.is-current b { background: var(--lime); color: var(--ink); }
.shop-progress .sep { width: 18px; height: 1.5px; background: var(--line-strong); padding: 0; border: 0; border-radius: 0; }
@media (max-width: 480px) { .shop-progress .sep { display: none; } }

.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.shop-aside { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-aside { position: static; }
}
.shop-aside[tabindex="-1"]:focus { outline: none; } /* nur Sprungziel der Summenleiste */
.shop-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.shop-main > * { min-width: 0; }

/* ==========================================================================
   KONFIGURATOR
   ========================================================================== */
@media (max-width: 1080px) { .page-cfg .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } }

.cfg-hero { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 48px) 0 clamp(32px, 4vw, 56px); background: linear-gradient(180deg, var(--bg) 0%, var(--peach-2) 100%); }
.cfg-hero__blob { width: 520px; height: 520px; right: -160px; top: -220px; opacity: .45; }
.cfg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.cfg-hero__title { margin-top: 20px; }
.cfg-hero .lead { margin-top: 20px; }
.cfg-hero__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cfg-hero__facts li { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; background: rgba(255,255,255,.7); border-radius: var(--r-md); font-size: .92rem; line-height: 1.35; }
.cfg-hero__facts .icon-bubble { width: 46px; height: 46px; border-radius: 14px; flex: none; }
.cfg-hero__facts .icon-bubble .icon { width: 22px; height: 22px; }
.cfg-hero__note { max-width: 760px; }
@media (max-width: 900px) {
  .cfg-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfg-hero__facts li { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 600px) {
  .cfg-hero__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cfg-hero__facts li { flex-direction: row; align-items: center; padding: 8px 14px 8px 8px; font-size: .86rem; }
  .cfg-hero__facts .icon-bubble { width: 38px; height: 38px; border-radius: 12px; }
  .cfg-hero__facts .icon-bubble .icon { width: 18px; height: 18px; }
}

.cfg { position: relative; padding-bottom: clamp(48px, 7vw, 96px); }
.cfg__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.cfg__main { min-width: 0; }
.cfg__aside { position: sticky; top: calc(var(--header-h) + 12px); }
@media (max-width: 1080px) {
  .cfg__layout { grid-template-columns: minmax(0, 1fr); }
  .cfg__aside { display: none; }
}

/* Schritt-Navigation */
.cfg-steps {
  position: sticky; top: var(--header-h); z-index: 40; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: rgba(251, 244, 236, .9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.cfg-steps ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 5px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cfg-steps ol::-webkit-scrollbar { display: none; }
.cfg-steps li { flex: 1 0 auto; }
.cfg-steps a {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; transition: background .25s, color .25s;
}
.cfg-steps a:hover { background: rgba(20,20,20,.06); }
/* Schrittnummern: dunkles Orange statt --orange-deep (3,25:1) – #B34700 hält auf Weiß 5,5:1, auf Hover-Grau > 4,5:1 */
.cfg-steps__num { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: .78rem; color: #B34700; }
.cfg-steps a[aria-current="step"] { background: var(--ink); color: #fff; }
.cfg-steps a[aria-current="step"] .cfg-steps__num { color: var(--lime); }
@media (max-width: 1080px) { .cfg-steps { margin: 0; padding-inline: 0; } }
@media (max-width: 520px) { .cfg-steps a { padding: 8px 10px; } .cfg-steps__label { font-size: .82rem; } }

/* Schritt */
.cfg-step { padding-top: clamp(36px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 72px); }
.cfg-step__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 24px; }
.cfg-step__num {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--lime);
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.2rem; line-height: 1;
}
.cfg-step__head .h-card { padding-top: 4px; outline: none; }
.cfg-step__lead { margin-top: 8px; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 520px) { .cfg-step__num { width: 46px; height: 46px; font-size: 1rem; } .cfg-step__head { gap: 12px; } }
.cfg-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-next { margin-top: 24px; font-size: .95rem; }

/* Versteckte native Inputs (bleiben fokussierbar) */
.cfg-term input, .cfg-tech input, .cfg-mod__input, .ty-day input, .ty-time input, .co-pay input, .ty-channel input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}

/* 01 Laufzeit */
.cfg-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .cfg-terms { grid-template-columns: minmax(0, 1fr); } }
.cfg-term { position: relative; display: block; cursor: pointer; }
.cfg-term__body {
  position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg); background: var(--paper); border: 2px solid transparent; overflow: hidden;
  transition: border-color .25s, background .25s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cfg-term:hover .cfg-term__body { transform: translateY(-3px); box-shadow: var(--shadow); }
.cfg-term input:checked + .cfg-term__body { border-color: var(--ink); background: var(--peach-2); box-shadow: inset 0 0 0 1px var(--ink); }
.cfg-term--hot input:checked + .cfg-term__body { background: var(--dark); color: #fff; border-color: var(--dark); }
.cfg-term input:focus-visible + .cfg-term__body { outline: 3px solid var(--orange); outline-offset: 3px; }
.cfg-term__months { font-size: 1rem; font-weight: 500; }
.cfg-term__months b { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; margin-right: 4px; }
.cfg-term__price { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cfg-term__amount { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: .9; letter-spacing: -.03em; }
.cfg-term__per { font-size: .9rem; line-height: 1.25; opacity: .85; }
.cfg-term__per small { font-size: .78rem; opacity: .8; }
.cfg-term--hot input:checked + .cfg-term__body .cfg-term__amount { color: var(--lime); }
.cfg-term__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.cfg-term__list li { display: flex; gap: 8px; align-items: flex-start; }
.cfg-term__list .icon { margin-top: .3em; color: var(--orange-deep); stroke-width: 3; }
.cfg-term--hot input:checked + .cfg-term__body .cfg-term__list .icon { color: var(--lime); }
.cfg-term__sticker {
  position: absolute; top: 18px; right: 18px; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--lime); color: var(--ink);
  transform: rotate(12deg); line-height: 1; box-shadow: 0 8px 20px -8px rgba(20,20,20,.35);
}
.cfg-term__sticker b { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.15rem; }
.cfg-term__sticker small { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; white-space: nowrap; }
.cfg-term:hover .cfg-term__sticker { animation: wiggle .5s ease-in-out; }
.cfg-term__save {
  display: inline-flex; align-items: flex-start; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 8px 14px; border-radius: 14px; background: var(--peach); color: var(--ink); font-size: .86rem; line-height: 1.4;
}
.cfg-term__save .icon { flex: none; margin-top: 2px; }
.cfg-term__save[hidden] { display: none; }
.cfg-term--hot input:checked + .cfg-term__body .cfg-term__save { background: rgba(215,255,59,.14); color: var(--lime); }
@media (max-width: 400px) { .cfg-term__sticker { width: 70px; height: 70px; top: 12px; right: 12px; } .cfg-term__sticker b { font-size: .95rem; } }

.cfg-included { margin-top: 20px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--peach); }
.cfg-included__head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.cfg-included__head .icon-bubble { flex: none; }
/* --muted erreicht auf Pfirsich nur 3,6:1 und auf Creme 4,35:1 → Nebentexte hier in --ink-2 */
.cfg-included__head .text-muted, .cfg-note { color: var(--ink-2); }
.cfg-included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; font-size: .94rem; }
@media (max-width: 640px) { .cfg-included__list { grid-template-columns: minmax(0, 1fr); } }

/* 02 Technik */
.cfg-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.cfg-tech { position: relative; display: block; cursor: pointer; }
.cfg-tech__body {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: var(--r-md);
  background: var(--paper); border: 2px solid transparent; transition: border-color .2s, transform .3s var(--ease), background .2s;
}
.cfg-tech:hover .cfg-tech__body { transform: translateY(-3px); }
.cfg-tech input:checked + .cfg-tech__body { border-color: var(--ink); background: var(--peach-2); box-shadow: inset 0 0 0 1px var(--ink); }
.cfg-tech input:focus-visible + .cfg-tech__body { outline: 3px solid var(--orange); outline-offset: 3px; }
.cfg-tech__logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--bg); transition: background .25s, transform .35s var(--ease); }
.cfg-tech__logo .brand-logo, .cfg-tech__logo .icon { width: 28px; height: 28px; }
.cfg-tech input:checked + .cfg-tech__body .cfg-tech__logo { background: var(--lime); transform: rotate(-6deg); }
.cfg-tech__name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.cfg-tech__text { font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.cfg-tech__check {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--lime); transform: scale(0); transition: transform .3s var(--ease);
}
.cfg-tech__check .icon { width: 15px; height: 15px; stroke-width: 3; }
.cfg-tech input:checked + .cfg-tech__body .cfg-tech__check { transform: scale(1); }

@media (max-width: 560px) {
  .cfg-techs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cfg-tech__body { padding: 16px 14px; }
  .cfg-tech__logo { width: 44px; height: 44px; border-radius: 14px; }
  .cfg-tech__logo .brand-logo, .cfg-tech__logo .icon { width: 24px; height: 24px; }
  .cfg-tech__text { font-size: .78rem; }
  .cfg-tech__check { top: 10px; right: 10px; }
}

/* 03/04 Module & Extras */
.cfg-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.cfg-mod {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: var(--r-md);
  background: var(--paper); border: 2px solid transparent; cursor: pointer;
  transition: border-color .2s, background .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cfg-mod--qty { cursor: default; }
.cfg-mod:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.cfg-mod.is-on, .cfg-mod:has(> .cfg-mod__input:checked) { border-color: var(--ink); background: var(--peach-2); }
.cfg-mod:has(.cfg-mod__input:focus-visible), .cfg-mod:has(.cfg-stepper__input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.cfg-mod__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cfg-mod__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--peach); transition: background .25s, transform .4s var(--ease); }
.cfg-mod__icon .icon { width: 22px; height: 22px; }
.cfg-mod.is-on .cfg-mod__icon, .cfg-mod:has(> .cfg-mod__input:checked) .cfg-mod__icon { background: var(--lime); animation: cfg-pop .45s var(--ease); }
@keyframes cfg-pop { 40% { transform: scale(1.14) rotate(-6deg); } }
.cfg-mod__name { display: block; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.cfg-mod__hot { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--orange); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cfg-mod__tag { display: block; font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.cfg-mod__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.cfg-mod__price { font-size: .86rem; color: var(--ink-2); }
.cfg-mod__price b { font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.cfg-mod__was { color: var(--muted); font-size: .8rem; margin-left: 2px; }
.cfg-mod__was[hidden] { display: none; }
.cfg-mod__unit { white-space: nowrap; }
.cfg-mod--extra .cfg-mod__icon { background: var(--bg-2); }
@media (max-width: 560px) {
  .cfg-mods { gap: 10px; }
  .cfg-mod { padding: 14px 14px 12px; gap: 4px; }
  .cfg-mod__top { margin-bottom: 2px; }
  .cfg-mod__icon { width: 40px; height: 40px; border-radius: 12px; }
  .cfg-mod__icon .icon { width: 20px; height: 20px; }
  .cfg-mod__tag { font-size: .8rem; }
  .cfg-mod__foot { padding-top: 6px; }
}

/* Wählbare Modul-Karte (.cfg-mod--pick): Das <label> am Modulnamen spannt per ::after über die ganze Karte –
   die Karte bleibt komplett klickbar. Projekt-Links liegen darüber (z-index) und schalten das Modul NIE um. */
.cfg-mod--pick .cfg-mod__hit { cursor: pointer; }
.cfg-mod--pick .cfg-mod__hit::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--r-md); }

/* Belege aus echten Projekten: „Zu sehen bei [Wappen] on+volt [Wappen] Elektrowerk + 5 weitere“ */
.cfg-refs { margin-top: 8px; font-size: .8rem; line-height: 1.8; color: var(--ink-2); }
.cfg-refs__label { margin-right: .15em; }
.cfg-refs__list { display: inline; margin: 0; padding: 0; list-style: none; }
.cfg-refs__item { display: inline; margin-right: .5em; }
.cfg-refs__link, .cfg-refs__more { position: relative; z-index: 1; }
.cfg-refs__link {
  white-space: nowrap; padding-block: 5px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  transition: text-decoration-color .2s, color .2s;
}
/* Wappen in der Hausfarbe des Projekts; feine Kontur, damit auch helle Farben (Neon, Lime) auf Weiß stehen */
.cfg-refs__crest {
  display: inline-block; width: .84em; height: .98em; margin-right: .3em; vertical-align: -.12em;
  fill: var(--ref, var(--orange)); stroke: rgba(20, 20, 20, .38); stroke-width: 2.2; stroke-linejoin: round;
}
.cfg-refs__link:hover { text-decoration-color: var(--orange-deep); }
.cfg-refs__link:focus-visible, .cfg-refs__more:focus-visible { outline-offset: 2px; border-radius: 4px; }
/* Letztes sichtbares Projekt + „+ N weitere“ brechen nur gemeinsam um */
.cfg-refs__item--last { white-space: nowrap; }
.cfg-refs__more {
  padding: 5px 2px; margin: -5px 0 -5px .1em; border: 0; background: none; font: inherit; line-height: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
  white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: currentColor;
  transition: text-decoration-color .2s;
}
.cfg-refs__more:hover { text-decoration-color: var(--orange-deep); }
.js .cfg-refs:not(.is-open) .cfg-refs__item--more, .cfg-refs__more[hidden] { display: none; }
@media (max-width: 560px) { .cfg-refs { margin-top: 6px; } }

/* Schalter */
.cfg-switch { position: relative; flex: none; width: 50px; height: 30px; border-radius: var(--r-pill); background: var(--bg-2); border: 1.5px solid var(--line-strong); transition: background .25s, border-color .25s; }
.cfg-switch > span { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,20,20,.3); transition: transform .3s var(--ease), background .25s; }
.cfg-mod__input:checked ~ .cfg-switch, .cfg-mod__input:checked ~ .cfg-mod__top .cfg-switch,
.cfg-mod__input:checked + .cfg-switch { background: var(--ink); border-color: var(--ink); }
.cfg-mod__input:checked ~ .cfg-switch > span, .cfg-mod__input:checked ~ .cfg-mod__top .cfg-switch > span,
.cfg-mod__input:checked + .cfg-switch > span { transform: translateX(20px); background: var(--lime); }
.cfg-switch-label { position: relative; display: inline-flex; cursor: pointer; padding: 7px; margin: -7px; }

/* Mengen-Stepper */
.cfg-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--paper); border: 1.5px solid var(--line-strong); }
.cfg-stepper__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-2); cursor: pointer; transition: background .2s, transform .2s; }
.cfg-stepper__btn:hover { background: var(--lime); }
.cfg-stepper__btn:active { transform: scale(.92); }
.cfg-stepper__btn[disabled] { opacity: .35; cursor: default; background: var(--bg-2); }
.cfg-stepper__input { width: 3.2ch; min-width: 36px; height: 44px; border: 0; background: transparent; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.cfg-stepper__input::-webkit-outer-spin-button, .cfg-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-stepper__input:focus { outline: none; }
.no-js .cfg-stepper { border-radius: 12px; }
.no-js .cfg-stepper__input { width: 64px; -moz-appearance: auto; appearance: auto; }
.js .cfg-mod--qty:not(.is-on) .cfg-stepper { display: none; }

/* 05 Übersicht */
.cfg-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .cfg-review { grid-template-columns: minmax(0, 1fr); } }
.cfg-review__col { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--paper); display: flex; flex-direction: column; }
.cfg-review__title { display: flex; align-items: center; gap: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.cfg-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.cfg-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); font-size: .93rem; }
.cfg-lines li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfg-lines li em { font-style: normal; color: var(--muted); }
.cfg-lines li.is-empty { color: var(--muted); }
.cfg-lines li.is-new { animation: cfg-line-in .45s var(--ease); }
@keyframes cfg-line-in { from { opacity: 0; transform: translateX(-8px); background: var(--lime); } }
.cfg-totals { margin: 12px 0 0; display: grid; gap: 4px; font-size: .9rem; margin-top: auto; padding-top: 12px; }
.cfg-totals div { display: flex; justify-content: space-between; gap: 12px; }
.cfg-totals dt { color: var(--muted); }
.cfg-totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfg-totals .is-sum { padding-top: 6px; margin-top: 4px; border-top: 1.5px solid var(--ink); font-weight: 700; }
.cfg-totals .is-sum dt { color: var(--ink); }
.cfg-review__foot { margin-top: 16px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: var(--dark); color: #fff; display: grid; gap: 20px; }
.cfg-review__facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cfg-review__facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.cfg-review__facts dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1.25rem; line-height: 1.15; }
.cfg-review__facts dd [data-out="total"] { color: var(--lime); }
@media (max-width: 640px) { .cfg-review__facts { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.cfg-submit { justify-self: start; }
.cfg-review__note { color: rgba(255,255,255,.62); max-width: 62ch; }

/* Sticky Zusammenfassung */
.cfg-sum { position: relative; padding: 22px 24px 20px; border-radius: var(--r-lg); background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.cfg-sum::before { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; bottom: -140px; border-radius: 50%; background: var(--orange); filter: blur(70px); opacity: .35; z-index: -1; }
.cfg-sum__label { margin-top: 18px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.cfg-sum__price { margin-top: 4px; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 3.6rem; line-height: .95; letter-spacing: -.035em; color: var(--lime); font-variant-numeric: tabular-nums; }
.cfg-sum__price.is-long { font-size: 2.7rem; }
.cfg-sum__price span { display: inline-block; transform-origin: left bottom; }
.is-bump { animation: cfg-bump .5s var(--ease); }
@keyframes cfg-bump { 30% { transform: scale(1.06); } }
.cfg-sum__unit { margin-top: 8px; font-size: .84rem; color: rgba(255,255,255,.7); line-height: 1.45; }
.cfg-sum__facts { margin: 16px 0 0; display: grid; gap: 0; font-size: .9rem; }
.cfg-sum__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cfg-sum__facts dt { color: rgba(255,255,255,.62); }
.cfg-sum__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cfg-sum__facts .is-sum dd { color: var(--lime); }
.cfg-sum__tip {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 14px; border: 1px dashed rgba(215,255,59,.55);
  border-radius: 14px; background: rgba(215,255,59,.08); color: #fff; font-size: .84rem; line-height: 1.4; text-align: left; cursor: pointer; transition: background .2s;
}
.cfg-sum__tip:hover { background: rgba(215,255,59,.16); }
.cfg-sum__tip .icon { color: var(--lime); margin-top: 2px; }
.cfg-sum__tip strong { color: var(--lime); }
.cfg-sum__tip[hidden] { display: none; }
.cfg-sum__cta { margin-top: 14px; }
.cfg-sum__note { margin-top: 10px; font-size: .76rem; color: rgba(255,255,255,.5); text-align: center; }

/* Live-Vorschau (Mini-Browser) */
.cfg-preview { border-radius: 14px; overflow: hidden; background: var(--bg); color: var(--ink); }
.cfg-preview__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #EFE8E0; }
.cfg-preview__bar i { width: 7px; height: 7px; border-radius: 50%; background: #FF6B57; }
.cfg-preview__bar i:nth-child(2) { background: #FFC23D; } .cfg-preview__bar i:nth-child(3) { background: #3DD26A; }
.cfg-preview__url { flex: 1; margin-left: 6px; height: 16px; border-radius: 8px; background: #fff; font-size: 9px; line-height: 16px; padding-left: 8px; color: var(--muted); }
.cfg-preview__tech { display: grid; width: 16px; height: 16px; }
.cfg-preview__tech > span { grid-area: 1 / 1; display: none; }
.cfg-preview__tech > span.is-on { display: block; animation: pv-pop .4s var(--ease); }
.cfg-preview__tech .brand-logo, .cfg-preview__tech .icon { width: 16px; height: 16px; }
.cfg-preview__body { position: relative; padding: 10px 12px 12px; min-height: 124px; }
.cfg-preview__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cfg-preview__logo { width: 16px; height: 16px; border-radius: 5px; background: var(--orange); margin-right: 4px; }
.pv-item { display: none; padding: 2px 7px; border-radius: var(--r-pill); background: #fff; font-size: 8.5px; font-weight: 600; line-height: 1.5; }
.pv-item.is-base, .pv-item.is-on { display: inline-block; }
.pv-item.is-on { background: var(--ink); color: var(--lime); animation: pv-pop .4s var(--ease); }
@keyframes pv-pop { from { opacity: 0; transform: scale(.6); } }
.cfg-preview__hero { margin-top: 10px; display: grid; gap: 5px; }
.cfg-preview__hero .mock-line { height: 7px; background: #E6DDD3; margin: 0; }
.cfg-preview__hero .mock-line:first-child { height: 10px; background: var(--ink); opacity: .85; }
.cfg-preview__cta { width: 46px; height: 12px; border-radius: 6px; background: var(--lime); margin-top: 2px; }
.cfg-preview__widgets { display: flex; gap: 6px; margin-top: 10px; height: 40px; }
.pv-w { display: none; flex: 1 1 0; min-width: 0; border-radius: 7px; background: #fff; padding: 5px; }
.pv-w.is-on { display: grid; animation: pv-pop .4s var(--ease); }
.pv-base { display: grid; gap: 4px; align-content: start; }
.pv-base i { height: 5px; border-radius: 3px; background: #E6DDD3; }
.pv-base i:first-child { width: 70%; }
.pv-cal { grid-template-columns: repeat(7, 1fr); gap: 2px; align-content: center; }
.pv-cal i { aspect-ratio: 1; border-radius: 2px; background: var(--bg-2); }
.pv-cal i.on { background: var(--orange); }
.pv-news { gap: 3px; }
.pv-news i { border-radius: 3px; background: var(--peach); }
.pv-shop { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pv-shop i { border-radius: 3px; background: var(--peach); }
.pv-shop i:nth-child(2) { background: var(--lime); }
.pv-stats { grid-auto-flow: column; align-items: end; gap: 3px; }
.pv-stats i { border-radius: 2px 2px 0 0; background: var(--ink); }
.pv-stats i:last-child { background: var(--orange); }
.pv-chat { position: absolute; right: 10px; bottom: 8px; display: none; max-width: 60%; padding: 4px 8px; border-radius: 10px 10px 2px 10px; background: var(--ink); color: var(--lime); font-size: 8.5px; font-weight: 600; box-shadow: 0 4px 10px -4px rgba(20,20,20,.5); }
.pv-chat.is-on { display: block; animation: pv-pop .4s var(--ease); }
.pv-pin { position: absolute; right: 12px; top: 34px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); }
.pv-pin .icon { width: 12px; height: 12px; }
.pv-pin.is-on { display: grid; animation: pv-pop .4s var(--ease); }
@media (max-height: 760px) { .cfg-preview { display: none; } .cfg-sum__label { margin-top: 0; } }

/* Bottom-Bar (Mobil/Tablet) */
.cfg-bar { display: none; }
@media (max-width: 1080px) {
  .cfg-bar {
    position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 24px; background: var(--dark); color: #fff;
    box-shadow: 0 18px 40px -12px rgba(20,20,20,.55);
  }
  .cfg { padding-bottom: 120px; }
}
.cfg-bar__price { display: grid; min-width: 0; line-height: 1.15; }
.cfg-bar__amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cfg-bar__amount [data-out="monthly"] { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.55rem; letter-spacing: -.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
.cfg-bar__amount small { font-size: .74rem; color: rgba(255,255,255,.7); }
.cfg-bar__meta { font-size: .74rem; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-bar__btn { flex: none; min-height: 48px; padding-left: 1.1em; font-size: .88rem; white-space: normal; text-align: left; line-height: 1.1; }
.cfg-bar__btn .btn__arrow { width: 34px; height: 34px; flex: none; }
/* ≤ 420 px: „In den / Warenkorb“ zweizeilig (min-content = längstes Wort), damit auch ein vierstelliger Preis
   nie unter den Button läuft (360 px: Button 180 statt 240 px, Preis hat 120 px) */
@media (max-width: 420px) { .cfg-bar__btn [data-bar-label] { display: block; width: min-content; } }
@media (max-width: 380px) { .cfg-bar__amount [data-out="monthly"] { font-size: 1.3rem; } }

/* ==========================================================================
   WARENKORB
   ========================================================================== */
.cart-item { border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.cart-item__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: clamp(20px, 2.6vw, 30px); }
.cart-item__kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.cart-item__head .h-card { margin-top: 4px; }
.cart-item__head .tag .brand-logo { width: 16px; height: 16px; }
.cart-item__price { text-align: right; }
.cart-item__price b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.cart-item__price span { font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) {
  .cart-item__head { grid-template-columns: auto minmax(0, 1fr); }
  .cart-item__price { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; }
}
.cart-item__body { padding: 0 clamp(20px, 2.6vw, 30px) 8px; }
.cart-item__sub { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin: 8px 0 2px; }
.cart-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.cart-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); font-size: .94rem; }
.cart-lines li:last-child { border-bottom: 0; }
.cart-lines small { display: block; color: var(--muted); font-size: .8rem; }
.cart-lines b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cart-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(20px, 2.6vw, 30px); background: var(--bg); border-top: 1px solid var(--line); }
.cart-item__foot form { margin: 0; }
.cart-item__features { padding: 0 clamp(20px, 2.6vw, 30px) 16px; }
.cart-item__features summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: 6px 0; }
.cart-item__features .checklist { margin-top: 10px; font-size: .92rem; }

/* Summen-Karte */
.shop-total { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--dark); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.shop-total::before { content: ""; position: absolute; width: 240px; height: 240px; left: -110px; top: -130px; border-radius: 50%; background: var(--orange); filter: blur(70px); opacity: .3; z-index: -1; }
.shop-total__block + .shop-total__block { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.shop-total__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.shop-total__big { margin-top: 4px; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
.shop-total__big small { display: block; margin-top: 6px; font-family: var(--f-body); font-weight: 500; font-stretch: 100%; font-size: .85rem; letter-spacing: 0; color: rgba(255,255,255,.7); }
.shop-total__rows { margin: 12px 0 0; display: grid; gap: 4px; font-size: .9rem; }
.shop-total__rows div { display: flex; justify-content: space-between; gap: 12px; }
.shop-total__rows dt { color: rgba(255,255,255,.62); }
.shop-total__rows dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-total__rows .is-sum { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); font-weight: 700; }
.shop-total__rows .is-sum dt { color: #fff; }
.shop-total__note { margin-top: 18px; font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.5; }
.shop-total .btn { margin-top: 18px; }
.shop-trust { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.75); }
.shop-trust li { display: flex; gap: 10px; align-items: center; }
.shop-trust .icon { color: var(--lime); width: 18px; height: 18px; }

/* Cross-Sell */
.cart-cross { border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); background: var(--peach); position: relative; overflow: hidden; }
.cart-cross--dark { background: var(--dark); color: #fff; }
.cart-cross__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cart-cross .eyebrow { background: rgba(255,255,255,.6); }
.cart-cross--dark .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff; }
.cart-cross--dark .eyebrow::before { background: var(--lime); }
.cart-cross h2 { margin-top: 12px; }
.cart-cross p.lead { font-size: 1rem; margin-top: 8px; }
.cart-cross--dark p.lead { color: rgba(255,255,255,.72); }
.cart-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
@media (max-width: 820px) { .cart-packs { grid-template-columns: minmax(0, 1fr); } }
.cart-pack { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-md); background: var(--paper); }
.cart-pack.is-hot { background: var(--ink); color: #fff; }
.cart-pack__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-pack__top .icon-bubble { width: 42px; height: 42px; border-radius: 12px; }
.cart-pack__top .icon-bubble .icon { width: 20px; height: 20px; }
.cart-pack__name { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.3rem; line-height: 1; letter-spacing: -.02em; }
.cart-pack__tag { font-size: .84rem; color: var(--ink-2); flex: 1; }
.cart-pack.is-hot .cart-pack__tag { color: rgba(255,255,255,.72); }
.cart-pack__price { font-weight: 700; }
.cart-pack__price small { font-weight: 400; color: var(--muted); }
.cart-pack.is-hot .cart-pack__price small { color: rgba(255,255,255,.6); }
.cart-pack form { margin: 0; }
.cart-pack .btn { width: 100%; }

/* Leerer Warenkorb */
.cart-empty { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .cart-empty { grid-template-columns: minmax(0, 1fr); } }
.cart-empty__art { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--peach) 0 58%, transparent 59%); display: grid; place-items: center; }
.cart-empty__bag { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 34%; background: var(--ink); color: var(--lime); transform: rotate(-8deg); box-shadow: var(--shadow-lg); }
.cart-empty__bag .icon { width: 46%; height: 46%; stroke-width: 1.6; }
.cart-empty__spark { position: absolute; display: grid; place-items: center; border-radius: 50%; }
.cart-empty__spark--a { width: 22%; aspect-ratio: 1; top: 8%; right: 10%; background: var(--lime); }
.cart-empty__spark--b { width: 14%; aspect-ratio: 1; bottom: 14%; left: 8%; background: var(--orange); animation-delay: -2s; }
.cart-empty__spark--c { width: 9%; aspect-ratio: 1; top: 22%; left: 16%; background: var(--ink); animation-delay: -4s; }
.cart-empty__spark .icon { width: 50%; height: 50%; }
.cart-empty__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (max-width: 600px) { .cart-empty__cards { grid-template-columns: minmax(0, 1fr); } }
.cart-empty__card { display: flex; flex-direction: column; gap: 10px; min-height: 230px; text-decoration: none; }
.cart-empty__card .h-card { margin-top: auto; font-size: clamp(1.2rem, 1.7vw, 1.6rem); overflow-wrap: anywhere; } /* Abnahme 30.09.: „Firmenstart-“ ragte bei 1440 px über die Karte */
.cart-empty__card .link-arrow { align-self: flex-start; margin-top: 6px; }

/* ==========================================================================
   KASSE
   ========================================================================== */
.co-section { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: var(--paper); }
.co-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.co-section__num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: .9rem; }
.co-section__head .h-sub { line-height: 1.2; }
.co-section__head p { font-size: .86rem; color: var(--muted); }
.co-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.co-section .form-grid .field, .co-panel .form-grid .field { align-content: start; }
.co-submit { font-size: 1rem; }
.field.has-error > label { color: var(--err); }
.co-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--bg); font-size: .92rem; }
.co-account .icon-bubble { width: 44px; height: 44px; border-radius: 14px; }

.co-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.co-pay { position: relative; display: block; cursor: pointer; }
.co-pay__body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border-radius: var(--r-md); background: var(--bg); border: 2px solid transparent; transition: border-color .2s, background .2s, transform .3s var(--ease); }
.co-pay:hover .co-pay__body { transform: translateY(-2px); }
.co-pay input:checked + .co-pay__body { border-color: var(--ink); background: var(--peach-2); box-shadow: inset 0 0 0 1px var(--ink); }
.co-pay input:focus-visible + .co-pay__body { outline: 3px solid var(--orange); outline-offset: 3px; }
.co-pay__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--paper); }
.co-pay input:checked + .co-pay__body .co-pay__icon { background: var(--lime); }
.co-pay__name { font-weight: 700; }
.co-pay__text { font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.co-panel { margin-top: 18px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-md); border: 1.5px dashed var(--line-strong); }
.js .co-panel:not(.is-active) { display: none; }
.co-panel.is-active { animation: co-panel-in .35s var(--ease); }
@keyframes co-panel-in { from { opacity: 0; transform: translateY(-6px); } }
.co-panel__title { font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.no-js .co-panel__nojs { display: block; font-size: .82rem; color: var(--muted); margin: -8px 0 12px; }
.co-panel__nojs { display: none; }
.co-iban-hint { font-size: .82rem; }
.co-iban-hint:empty { display: none; }
.co-iban-hint.is-ok { color: var(--ok); }
.co-iban-hint.is-bad { color: var(--err); }
.input.is-valid { border-color: var(--ok); }
.co-mandate { margin: 16px 0; padding: 16px 18px; border-radius: var(--r-sm); background: var(--bg); font-size: .82rem; line-height: 1.55; color: var(--ink-2); max-height: 260px; overflow: auto; }
.co-mandate__title { font-family: var(--f-body); font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 8px; }
.co-mandate dl { margin: 0 0 10px; display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 2px 12px; }
@media (max-width: 560px) {
  .co-mandate dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-mandate dd { margin-bottom: 6px; }
}
.co-mandate dt { font-weight: 600; color: var(--ink); }
.co-mandate dd { margin: 0; overflow-wrap: anywhere; }
.co-mandate p + p { margin-top: 8px; }
.co-legal { display: grid; gap: 14px; }
.co-legal .check a { text-underline-offset: 3px; text-decoration-color: var(--orange); }
.co-legal .check.has-error input { border-color: var(--err); box-shadow: 0 0 0 3px rgba(214,59,47,.15); }
.co-errors { margin-bottom: 20px; }
.co-errors:focus { outline: 3px solid var(--err); outline-offset: 3px; }
.co-errors ul { margin: 6px 0 0; padding-left: 1.2em; }
@media (max-width: 560px) { .co-errors { font-size: .86rem; } .co-errors > .icon { display: none; } }
.co-errors a { color: inherit; text-underline-offset: 3px; }

/* Beleg / Bestellübersicht */
.receipt { position: relative; background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: clamp(22px, 2.6vw, 30px); padding-bottom: 34px; filter: drop-shadow(0 18px 30px rgba(60,30,10,.12)); }
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: linear-gradient(-45deg, transparent 10px, var(--paper) 0) 0 0 / 20px 14px repeat-x, linear-gradient(45deg, transparent 10px, var(--paper) 0) 0 0 / 20px 14px repeat-x;
}
.receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.receipt__title { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; letter-spacing: -.01em; }
.receipt__sub { margin-top: 16px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.receipt .cart-lines li { font-size: .88rem; padding: 8px 0; }
.receipt__rows { margin: 6px 0 0; display: grid; gap: 3px; font-size: .86rem; }
.receipt__rows div { display: flex; justify-content: space-between; gap: 12px; }
.receipt__rows dt { color: var(--muted); }
.receipt__rows dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt__rows .is-sum { font-weight: 700; padding-top: 5px; margin-top: 3px; border-top: 1px solid var(--line-strong); }
.receipt__rows .is-sum dt { color: var(--ink); }
.receipt__facts { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg); display: grid; gap: 6px; font-size: .85rem; }
.receipt__facts div { display: flex; justify-content: space-between; gap: 12px; }
.receipt__facts dt { color: var(--muted); }
.receipt__facts dd { margin: 0; font-weight: 600; text-align: right; }
.receipt .co-submit { margin-top: 20px; }
.receipt__legal { margin-top: 12px; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.co-submit.is-loading { opacity: .7; pointer-events: none; }
.co-submit.is-loading .btn__arrow .icon { animation: spin 1s linear infinite; }

/* Anfrage statt Bestellung (Kasse gesperrt, siehe shop_order_blockers()) */
.co-inquiry .co-section__num .icon { width: 18px; height: 18px; }
.co-inquiry .co-submit { margin-top: 20px; }
.co-inquiry--sent { display: flex; gap: 18px; align-items: flex-start; }
.co-inquiry--sent .icon-bubble { flex: none; width: 52px; height: 52px; border-radius: 16px; }
.co-inquiry--sent p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 560px) { .co-inquiry--sent { flex-direction: column; } }

/* Summenleiste Warenkorb/Kasse (Tablet & Smartphone): Preis immer sichtbar */
.shop-bar { display: none; }
@media (max-width: 1024px) {
  .shop-bar {
    position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
    padding: 10px 10px 10px 18px; border-radius: 24px; background: var(--dark); color: #fff;
    box-shadow: 0 18px 40px -12px rgba(20,20,20,.55);
    transition: transform .35s var(--ease), opacity .25s, visibility 0s;
  }
  .shop-bar.is-away, .shop-bar.is-typing { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s; }
  .has-shop-bar .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
.shop-bar__price { display: grid; min-width: 0; margin: 0; line-height: 1.15; }
.shop-bar__amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.shop-bar__amount b { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.55rem; letter-spacing: -.03em; color: var(--lime); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-bar__amount small { font-size: .74rem; color: rgba(255,255,255,.7); }
.shop-bar__meta { font-size: .74rem; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-bar__btn { flex: none; min-height: 48px; padding-left: 1.1em; font-size: .88rem; white-space: normal; text-align: left; line-height: 1.1; }
.shop-bar__btn .btn__arrow { width: 34px; height: 34px; flex: none; }
@media (max-width: 380px) { .shop-bar__amount b { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .shop-bar, .shop-bar.is-away, .shop-bar.is-typing { transition: none; } }
@media print { .shop-bar, .cfg-bar { display: none !important; } }

/* ==========================================================================
   BESTELLUNG / DANKE / KICKOFF
   ========================================================================== */
.ty-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 100px) 0 clamp(48px, 7vw, 96px); text-align: center; }
.ty-hero .display-lg { margin-top: 20px; }
.ty-hero .lead { margin: 22px auto 0; }
.ty-hero .btn-row { justify-content: center; margin-top: 28px; }
.ty-hero__number { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--paper); font-weight: 600; box-shadow: var(--shadow-sm); }
.ty-hero__number span { color: var(--muted); font-weight: 400; }
.ty-hero .container { position: relative; z-index: 1; }

.ty-alert { max-width: 760px; margin: 0 auto 8px; text-align: left; }
.ty-alert .btn { margin-top: 10px; }

.ty-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.ty-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
@media (max-width: 1024px) { .ty-layout { grid-template-columns: minmax(0, 1fr); } .ty-aside { position: static; } }

.ty-book { padding: clamp(22px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--paper); scroll-margin-top: calc(var(--header-h) + 16px); }
.ty-book__head .display-sm { margin-top: 14px; }
/* „Beratungs­termin“ bricht mobil an der Silbe (&shy;), nie mitten im Wort ohne Strich */
.ty-book__title { hyphens: manual; overflow-wrap: normal; }
@media (max-width: 420px) { .ty-book__title { font-size: 1.4rem; } }
.ty-book__head p { margin-top: 12px; color: var(--ink-2); max-width: 60ch; }
.ty-form { display: grid; gap: 26px; margin-top: 28px; }
.ty-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ty-fieldset > legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: .95rem; }
.ty-fieldset > legend span { color: var(--orange-text, #A8400C); font-family: var(--f-display); font-weight: 900; font-stretch: 125%; margin-right: 6px; }

.ty-days-wrap { min-width: 0; max-width: 100%; }
.ty-days { display: flex; max-width: 100%; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.no-js .ty-days-wrap { display: none; }
.ty-day { position: relative; flex: none; scroll-snap-align: start; cursor: pointer; }
.ty-day__body { display: grid; place-items: center; gap: 1px; width: 68px; padding: 10px 4px; border-radius: 18px; background: var(--bg); border: 2px solid transparent; transition: background .2s, border-color .2s, transform .25s var(--ease); line-height: 1.15; }
.ty-day__body small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ty-day__body b { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 1.35rem; }
.ty-day:hover .ty-day__body { transform: translateY(-2px); }
.ty-day input:checked + .ty-day__body { background: var(--ink); color: #fff; border-color: var(--ink); }
.ty-day input:checked + .ty-day__body small { color: var(--lime); }
.ty-day input:focus-visible + .ty-day__body { outline: 3px solid var(--orange); outline-offset: 2px; }
.ty-day__count { font-size: .66rem; color: var(--muted); }
.ty-day input:checked + .ty-day__body .ty-day__count { color: rgba(255,255,255,.6); }

.ty-panel + .ty-panel { margin-top: 14px; }
.js .ty-panel + .ty-panel { margin-top: 0; }
.js .ty-panel:not(.is-active) { display: none; }
.js .ty-panel.is-active { animation: co-panel-in .3s var(--ease); }
.ty-panel__date { font-size: .86rem; font-weight: 600; margin-bottom: 8px; }
.js .ty-panel__date { color: var(--muted); font-weight: 500; }
.ty-times { display: flex; flex-wrap: wrap; gap: 8px; }
.ty-time { position: relative; cursor: pointer; }
.ty-time span { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 46px; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, transform .2s; }
.ty-time:hover span { border-color: var(--ink); }
.ty-time input:checked + span { background: var(--lime); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ty-time input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

.ty-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .ty-channels { grid-template-columns: minmax(0, 1fr); } }
.ty-channel { position: relative; cursor: pointer; }
.ty-channel__body { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg); border: 2px solid transparent; font-weight: 600; transition: border-color .2s, background .2s; }
.ty-channel__body .icon { width: 22px; height: 22px; }
.ty-channel input:checked + .ty-channel__body { border-color: var(--ink); background: var(--peach-2); }
.ty-channel input:focus-visible + .ty-channel__body { outline: 3px solid var(--orange); outline-offset: 3px; }

.ty-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 22px; border-radius: var(--r-md); background: var(--dark); color: #fff; }
.ty-preview { display: flex; align-items: center; gap: 10px; font-size: .95rem; min-width: 0; }
.ty-preview .icon { color: var(--lime); flex: none; }
.ty-preview.is-error { color: #FFB4AA; }
.ty-preview.is-error .icon { color: #FFB4AA; }

.ty-booked { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--lime); position: relative; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
.ty-booked__date { margin-top: 16px; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.02em; }
.ty-booked__meta { margin-top: 12px; font-weight: 600; }
.ty-booked .btn-row { margin-top: 24px; }

.ty-timeline { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; counter-reset: tl; }
.ty-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.ty-timeline li::before {
  counter-increment: tl; content: counter(tl, decimal-leading-zero);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-strong);
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: .82rem; position: relative; z-index: 1;
}
.ty-timeline li::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.ty-timeline li:last-child::after { display: none; }
.ty-timeline li.is-done::before { content: "✓"; background: var(--ink); color: var(--lime); border-color: var(--ink); font-size: 1rem; }
.ty-timeline li.is-now::before { background: var(--lime); border-color: var(--ink); }
.ty-timeline h3 { font-weight: 700; font-size: 1rem; line-height: 1.3; padding-top: 10px; }
.ty-timeline p { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.ty-timeline a { font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--orange); }

.ty-links { display: grid; gap: 10px; }
.ty-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper); text-decoration: none; transition: transform .25s var(--ease), background .2s; }
.ty-link:hover { transform: translateY(-2px); background: var(--lime); }
.ty-link .icon-bubble { width: 44px; height: 44px; border-radius: 14px; flex: none; }
.ty-link strong { display: block; }
.ty-link span span { font-size: .84rem; color: var(--ink-2); }
.ty-link > .icon { margin-left: auto; flex: none; }

/* Zahlungsfehler-Seite */
.pay-error { max-width: 720px; margin-inline: auto; text-align: center; }
.pay-error .btn-row { justify-content: center; margin-top: 28px; }

/* Reduzierte Bewegung: keine Pops */
@media (prefers-reduced-motion: reduce) {
  .cfg-mod:hover, .cfg-term:hover .cfg-term__body, .cfg-tech:hover .cfg-tech__body { transform: none; }
}


/* ==========================================================================
   KASSE IN ZWEI SCHRITTEN · VERTRAG & UNTERSCHRIFT · DANKE-SEITE (Paket E)
   Motion-Tokens wie ux-spec §8 (nur transform/opacity, einmalig, bei reduzierter Bewegung statisch)
   ========================================================================== */
.co-contract, .page-order { --mo-micro: 120ms; --mo-state: 200ms; --mo-enter: 320ms; --mo-moment: 600ms; --mo-out: var(--ease); --mo-pop: cubic-bezier(.34, 1.4, .64, 1); }

/* Schritt 1: Zugang ohne Passwort, Hinweis bekannte Adresse, Ausblick auf Schritt 2 */
.co-access { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-md); background: var(--paper); border: 1.5px dashed var(--line-strong); font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.co-access__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--lime); color: var(--ink); }
.co-access__icon .icon { width: 20px; height: 20px; }
.co-access strong { color: var(--ink); }
.co-link { margin-bottom: 4px; }
.co-link:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.co-link__help { display: block; margin-top: 6px; font-size: .88rem; }
.co-next { padding: 18px 22px; border-radius: var(--r-md); background: var(--dark); color: #fff; }
.co-next__title { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: .92rem; letter-spacing: -.01em; color: var(--lime); margin-bottom: 6px; }
.co-next p:last-child { font-size: .9rem; color: rgba(255,255,255,.82); line-height: 1.55; }
.co-inquiry__next { margin-top: 12px; font-size: .86rem; color: var(--muted); }

/* Schritt 2: Kurzfassung, Vertragstext, Prüfsumme */
.co-contract .btn { white-space: normal; text-align: center; }   /* Buttons dürfen mobil umbrechen */
.co-contract__h { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; }
.co-contract__facts-wrap { padding: clamp(20px, 2.8vw, 30px); border-radius: var(--r-lg); background: var(--paper); }
.co-contract__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 16px 0 0; }
.co-contract__facts div { min-width: 0; padding-top: 10px; border-top: 2px solid var(--ink); }
.co-contract__facts dt { font-size: .78rem; color: var(--muted); }
.co-contract__facts dd { margin: 3px 0 0; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.co-contract__party { margin-top: 16px; font-size: .86rem; color: var(--ink-2); overflow-wrap: anywhere; }
.co-contract__party a, .co-contract__pdf { text-underline-offset: 3px; text-decoration-color: var(--orange); }
.co-contract__doc-wrap { min-width: 0; }
.co-contract__doc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.co-contract__pdf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.co-contract__doc { max-height: min(62vh, 640px); overflow: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 34px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line-strong); box-shadow: inset 0 -24px 24px -24px rgba(20,20,20,.18); }
.co-contract__doc:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.co-contract__hash { margin-top: 10px; font-size: .78rem; color: var(--muted); }
.co-contract__hash span { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; color: var(--ink-2); }
@media (max-width: 560px) {
  .co-contract__facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .co-contract__doc { max-height: 70vh; border-radius: var(--r-md); }
}

/* Unterschriftsfeld (vertrag-spec Anhang A, signpad.js) */
.co-sign-form .form-grid { margin-bottom: 4px; }
.sign { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }   /* fieldset: sonst min-content-Breite → Überlauf bei 360 px */
.sign__legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 1rem; }
.sign .hint { margin: 0 0 12px; }
.sign__box { position: relative; background: var(--paper); border: 2px dashed var(--line-strong); border-radius: var(--r-md); transition: border-color var(--mo-state, .2s) ease; }
.sign.has-ink .sign__box { border-style: solid; border-color: var(--ink); }
.sign.has-error .sign__box { border-color: var(--err); }
.sign__canvas { display: block; width: 100%; aspect-ratio: 3 / 1; min-height: 120px; touch-action: none; cursor: crosshair; border-radius: calc(var(--r-md) - 2px); }
/* Mobil mehr Höhe für die Finger-Unterschrift; signpad.js exportiert seitenrichtig (ohne Verzerrung) in 900 × 300 */
@media (max-width: 480px) { .sign__canvas { aspect-ratio: 2 / 1; min-height: 160px; } }
.sign__canvas:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sign__line { position: absolute; left: 7%; right: 7%; bottom: 26%; border-bottom: 1.5px solid var(--line-strong); pointer-events: none; }
.sign__x { position: absolute; left: 3.2%; bottom: 25%; font-weight: 600; color: var(--muted); pointer-events: none; }
.sign__hint { position: absolute; inset: 0 0 30% 0; display: grid; place-items: center; color: var(--muted); font-size: .95rem; pointer-events: none; transition: opacity var(--mo-enter, .32s) ease; padding: 0 16px; text-align: center; }
.sign.has-ink .sign__hint { opacity: 0; }
.sign__tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 10px; }
.sign .sign__mode { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: none; padding: .35em .3em; font-family: var(--f-body); font-weight: 600; font-stretch: 100%; font-size: .92rem; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; }
.sign .sign__mode:hover { transform: none; box-shadow: none; text-decoration-thickness: 2.5px; }
.sign__typed { padding: 22px 20px 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-md); }
.sign__typed-label { margin: 0 0 8px; font-size: .84rem; color: var(--muted); }
.sign__typed-preview { font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.15; border-bottom: 1.5px solid var(--line-strong); padding-bottom: 6px; overflow-wrap: anywhere; }
.sign__typed-note { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.sign__error, .sign__srv-error { color: var(--err); font-size: .9rem; margin-top: 8px; font-weight: 600; }
.sign:not(.is-js) [data-sign-draw], .sign:not(.is-js) [data-sign-mode], .sign:not(.is-js) [data-sign-clear] { display: none; }
.sign:not(.is-js) [data-sign-typed] { display: block !important; }
.co-legal--contract { margin-top: 26px; }
.co-legal--contract .check span { line-height: 1.5; }
.co-sign-submit { margin-top: 24px; display: grid; gap: 10px; justify-items: start; }
.co-sign-submit__note { font-size: .84rem; color: var(--muted); }
@media (max-width: 420px) { .co-sign-submit .co-submit { width: 100%; } }

/* Danke-Seite: Schild als Siegel (einziges Markenmotiv), Projektbuch- und Vertragskarte */
.ty-seal { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
.ty-seal img { width: 44px; height: 44px; }
.ty-card { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper); scroll-margin-top: calc(var(--header-h) + 16px); }
.ty-card__head { margin-bottom: 10px; }
.ty-card__kicker { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.ty-card p { color: var(--ink-2); }
.ty-project { border: 2px solid var(--ink); }
.ty-project__form { margin-top: 16px; display: grid; gap: 10px; justify-items: start; }
.ty-project__hint { font-size: .86rem; color: var(--muted); }
.ty-contract__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 24px; margin: 6px 0 0; font-size: .92rem; }
.ty-contract__facts dt { font-size: .78rem; color: var(--muted); }
.ty-contract__facts dd { margin: 2px 0 0; font-weight: 600; }
.ty-contract__sub { margin-top: 18px; font-weight: 700; font-size: .95rem; }
.ty-contract__rules { margin: 8px 0 0; padding-left: 1.2em; font-size: .92rem; color: var(--ink-2); display: grid; gap: 4px; }
.ty-contract__hash { margin-top: 14px; font-size: .76rem; color: var(--muted); }
/* Status als Text mit Linksbalken (kein Pill-Label mit Punkt) */
.ty-state { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ty-state::before { content: ""; width: 3px; height: 1.1em; border-radius: 2px; background: #2E9E57; }
.ty-state--muted { color: var(--muted); }
.ty-state--muted::before { background: var(--line-strong); }
.ty-contract__hash span { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; word-break: break-all; }

@media (prefers-reduced-motion: no-preference) {
  .ty-seal { animation: ty-seal-in var(--mo-moment, .6s) var(--mo-pop) both; }
  @keyframes ty-seal-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .sign__box, .sign__hint { transition: none; }
}

/* Konto: Vertragsdokument (HTML-Fassung) und Projekt → Dokumente */
.ct-back { max-width: 860px; margin: 0 auto 12px; }
.ct-back__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.dk__inner { max-width: 920px; }
.dk .ct-back { margin: 0 0 8px; }
.dk__title { margin-top: 10px; }
h2.dk__title { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.05; letter-spacing: -.02em; }
.dk__lead { margin-top: 10px; color: var(--ink-2); max-width: 62ch; }
.dk__block { margin-top: clamp(28px, 4vw, 44px); }
.dk__h { font-weight: 700; font-size: 1.1rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 14px; }
.dk__empty { color: var(--ink-2); }
.dk__more { margin-top: 12px; }
.dk__more a { font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.dk-doc { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-lg); background: var(--paper); }
.dk-doc + .dk-doc { margin-top: 14px; }
.dk-doc__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.dk-doc__title { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; letter-spacing: -.01em; }
.dk-doc__test { font-family: var(--f-body); font-stretch: 100%; text-transform: none; font-size: .78rem; font-weight: 600; color: var(--orange-text); }
.dk-doc__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px 24px; margin: 16px 0 0; }
.dk-doc__facts div { min-width: 0; }
.dk-doc__facts dt { font-size: .78rem; color: var(--muted); }
.dk-doc__facts dd { margin: 2px 0 0; font-weight: 600; font-size: .94rem; overflow-wrap: anywhere; }
.dk-doc__facts a { text-underline-offset: 3px; text-decoration-color: var(--orange); }
.dk-doc__note { font-weight: 400; font-size: .84rem; color: var(--muted); }
.dk-doc__actions { margin-top: 16px; }
.dk-doc__actions .btn { white-space: normal; }
.dk-doc__hashes { margin-top: 14px; font-size: .86rem; color: var(--ink-2); }
.dk-doc__hashes summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.dk-doc__hashes dl { margin: 6px 0 8px; display: grid; gap: 8px; }
.dk-doc__hashes dt { font-size: .78rem; color: var(--muted); }
.dk-doc__hashes dd { margin: 2px 0 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.dk-rules ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
.dk-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dk-list__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dk-list__main { flex: 1 1 240px; min-width: 0; }
.dk-list__main a { font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.dk-list__meta { color: var(--muted); font-size: .86rem; }
.dk-list__amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dk-list__state { font-size: .86rem; color: var(--muted); min-width: 5.5em; }
.dk-list__state--offen { color: var(--orange-text); font-weight: 600; }