/* Commerce + service pages: cart, checkout (Anmeldebogen), order (Lernstart), contact, 404. */

.commerce{padding-block:clamp(48px,6vw,88px) clamp(72px,8vw,120px)}
.commerce h1{font-size:clamp(2.4rem,4vw,3.5rem)}
.text-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.text-btn:hover{color:var(--coral-ink)}

/* ================================================================ cart */
.commerce__in{display:grid;gap:28px}
.cart-intro h1{margin-bottom:.2em}
.cart-msg{margin-top:18px;max-width:640px}

.cart-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;padding:clamp(24px,3vw,40px)}
.cart-sum__figures{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.cart-sum__count{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:0 0 .25em}
.cart-sum__figures .muted{margin:0}
.cart-sum__total{display:grid;justify-items:end;text-align:right;gap:2px;padding-left:32px;border-left:1px solid rgba(20,35,31,.12)}
.cart-sum__price{font-size:clamp(2.2rem,3.6vw,3rem);line-height:1.05}
.cart-sum__actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}

.cart-empty{grid-column:1/-1;display:grid;gap:20px}
.cart-empty h2{margin:0}
.cart-empty .lead{margin:0}
.cart-empty__sits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cart-empty__sit{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-sm);background:rgba(255,255,255,.7);border:1px solid var(--line);
  text-decoration:none;font-weight:600;line-height:1.3;transition:transform .2s var(--ease),box-shadow .2s}
.cart-empty__sit:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}

.cart-form{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:20px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cart-table thead th{padding-block:14px;font:600 .78rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:rgba(244,236,223,.6)}
.cart-table__sit{width:76px;padding-left:24px!important}
.cart-table__name{font-weight:400}
.cart-table__name>a{display:inline-block;font:600 1.25rem/1.25 var(--display);letter-spacing:-.01em;text-decoration:none;margin-bottom:4px}
.cart-table__name>a:hover{text-decoration:underline}
.cart-table__problem{display:block;color:var(--ink-2);font-size:.95rem;max-width:58ch}
.cart-table__note{display:block;margin-top:10px;font-size:.9rem;color:var(--ink-2)}
.cart-table__note .tag{margin-right:6px}
.cart-table__warn{display:block;margin-top:10px;font-size:.9rem;color:var(--coral-ink);font-weight:500}
.cart-table__size{white-space:nowrap;color:var(--ink-2);font-size:.95rem}
.cart-table__num{text-align:right!important;white-space:nowrap}
.cart-table__num .price{font-size:1.3rem}
.cart-table__rm{width:1%;padding-right:24px!important}
.cart-table tfoot th,.cart-table tfoot td{border-bottom:0;background:rgba(244,236,223,.45);vertical-align:middle}
.cart-table tfoot th{font:600 1.05rem/1.4 var(--sans)}
.cart-table tfoot .price{font-size:1.6rem}
.rm-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  color:var(--ink-2);font-size:.9rem;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.rm-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.rm-btn:hover{border-color:var(--coral-ink);color:var(--coral-ink)}
.cart-form__foot{margin:0;padding:16px 24px 20px}

.cart-dialog{width:min(460px,calc(100vw - 32px));border:1px solid rgba(255,255,255,.7);border-radius:var(--r);padding:32px;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px rgba(20,35,31,.45)}
.cart-dialog::backdrop{background:rgba(20,35,31,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cart-dialog h2{font-size:1.7rem}
.cart-dialog[open]{animation:dlg-in .3s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ================================================================ checkout — one-column Anmeldebogen */
.co{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:880px}
.co-head{order:-2}
.co-head .lead{margin-bottom:0}
.co-head .notice{margin-top:20px}
.co-sum{order:-1;padding:22px 28px}
.co-form{order:0}

.co-sum__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.co-sum__title{font:600 .78rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.co-sum__list{margin:0}
.co-sum__line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 0;border-bottom:1px dashed rgba(20,35,31,.16)}
.co-sum__line dt{display:flex;align-items:center;gap:10px;font-weight:500}
.co-sum__line dd{margin:0;white-space:nowrap}
.co-sum__total{border-bottom:0;padding-top:14px}
.co-sum__total dt{font-weight:700}
.co-sum__total .price{font-size:1.75rem}
.co-sum__vat{border-bottom:0;padding-top:0;color:var(--muted);font-size:.92rem}
.co-sum__vat dt{font-weight:400}

.co-form{background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow)}
.co-list{list-style:none;margin:0;padding:0;counter-reset:q;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 28px}
.co-q{counter-increment:q;position:relative;display:grid;gap:8px;align-content:start;padding-left:46px}
.co-q::before{content:counter(q);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(20,35,31,.2);font:italic 400 1rem/1 var(--display);color:var(--ink-2);background:var(--paper)}
.co-q--wide{grid-column:1/-1}
.co-q__label{font-weight:600;font-size:.98rem;line-height:1.35;min-height:32px;display:flex;align-items:center;gap:8px}
.co-opt{font:500 .76rem/1 var(--sans);letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3em .6em}
.co-q .input,.co-q .select{background:var(--white)}
.co-q .select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314231f' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.co-q.is-err::before{border-color:var(--coral-ink);color:var(--coral-ink);background:#fde5dc}
.co-q.is-err .input,.co-q.is-err .select{border-color:var(--coral-ink)}
.co-err{color:var(--coral-ink);font-size:.9rem;font-weight:500}
.co-q--check{grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:start;padding-top:4px}
.co-q--check::before{top:0}
.co-q--check input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--ink);cursor:pointer}
.co-q--check label{font-size:.95rem;line-height:1.55;color:var(--ink-2);cursor:pointer}
.co-q--check .co-err{grid-column:2}
.co-q--consent{padding-top:22px;margin-top:4px;border-top:1px solid var(--line)}
.co-q--consent::before{top:22px}
.co-q--consent label{color:var(--ink)}
.co-submit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-top:32px;padding-left:46px}
.co-submit p{margin:0}
.co-submit__btn{min-height:56px;padding-inline:2em;font-size:1.05rem}

/* ================================================================ order — Lernstart */
.order{display:grid;gap:32px}
.order-head h1{margin-bottom:.25em}
.order-head .lead{margin:0}
.order-state{max-width:780px;padding:clamp(28px,4vw,48px)}
.order-state .row{margin-block:8px 18px}

.stages{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:28px 32px 40px}
.stage{position:relative;z-index:1;display:grid;justify-items:start;gap:6px}
.stage__dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:italic 400 1.2rem/1 var(--display);
  border:1.5px solid rgba(20,35,31,.25);background:var(--paper);color:var(--ink-2)}
.stage__label{font:600 1.1rem/1.3 var(--display)}
.stage.is-done .stage__dot{background:var(--mint-ink);border-color:var(--mint-ink);color:var(--white);font-style:normal}
.stage.is-now .stage__dot{background:var(--coral);border-color:var(--coral);color:var(--ink);box-shadow:0 0 0 6px rgba(239,106,79,.18);animation:stage-pulse 2.4s ease-in-out infinite}
.stage.is-ahead .stage__label{color:var(--muted)}
.stages__bar{position:absolute;left:32px;right:32px;bottom:18px;height:6px;border-radius:999px;background:rgba(20,35,31,.08);overflow:hidden}
.stages__bar span{display:block;height:100%;min-width:6px;border-radius:inherit;background:linear-gradient(90deg,var(--mint-ink),var(--coral))}
@keyframes stage-pulse{0%,100%{box-shadow:0 0 0 6px rgba(239,106,79,.18)}50%{box-shadow:0 0 0 11px rgba(239,106,79,.06)}}

.order-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.order-main h2{font-size:clamp(1.8rem,2.6vw,2.3rem)}
.order-h2{margin-top:48px}
.week{display:grid;gap:4px}
.week__step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.week__step:first-child{border-top:0;padding-top:6px}
.week__n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sand);font:italic 400 1.5rem/1 var(--display)}
.week__step h3{margin-bottom:.3em}
.week__step p{color:var(--ink-2)}
.start-card{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.8);
  border:1px solid var(--line);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.start-card>span:last-child{display:grid;gap:2px}
.start-card:hover{transform:translateX(4px);box-shadow:var(--shadow);color:var(--ink)}
.bought{display:grid;gap:0}
.bought__row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.bought__row>div{display:grid;gap:2px}
.bought__name{font:600 1.15rem/1.3 var(--display);text-decoration:none}
.bought__name:hover{text-decoration:underline}
.bought>p{margin-top:14px}

.order-side{display:grid;gap:20px;position:sticky;top:100px}
.amounts__h{font:600 .78rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.amounts__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(20,35,31,.16);font-size:.96rem}
.amounts__total{border-bottom:0;padding-top:14px;align-items:baseline;font-weight:700}
.amounts__total .price{font-size:1.8rem}
.amounts p,.help p{margin:6px 0 0}
.help p{margin-bottom:16px;color:var(--ink-2)}
.help strong{white-space:nowrap}
.seller{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem}

/* ================================================================ contact */
.contact{display:grid;gap:clamp(36px,5vw,64px)}
.contact-head{max-width:760px}
.contact-head .lead{margin:0}
.contact-ways{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:stretch}
.way{display:grid;align-content:start;justify-items:start;gap:12px;padding:clamp(28px,3vw,40px)}
.way h2{margin:6px 0 0;font-size:2rem}
.way p{margin:0;color:var(--ink-2);max-width:52ch}
.way .btn{margin-top:10px}
.way__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper)}
.way--mail .way__icon{background:var(--mint);color:var(--ink)}
.way__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.way__mail{margin-top:10px;font:600 clamp(1.3rem,2vw,1.7rem)/1.2 var(--display);letter-spacing:-.01em;text-decoration-color:var(--coral);text-decoration-thickness:2px;word-break:break-word}
.expect{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.expect h2{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.expect p{color:var(--ink-2);max-width:60ch}
.expect__col--limits{padding:28px;border-radius:var(--r);background:var(--sand)}

/* ================================================================ 404 */
.nf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.nf-head{position:relative}
.nf-code{position:absolute;z-index:-1;top:-0.42em;left:-.04em;margin:0;font:italic 400 clamp(9rem,18vw,15rem)/1 var(--display);color:rgba(239,106,79,.16);letter-spacing:-.04em;pointer-events:none}
.nf-head h1{margin-top:.2em}
.nf-search{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:28px;padding:10px 10px 10px 22px;
  border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow)}
.nf-search label{font:italic 400 1.15rem/1.2 var(--display);white-space:nowrap}
.nf-search .input{border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;min-height:44px;padding-inline:4px}
.nf-search .input:focus{box-shadow:none;border-bottom-color:var(--coral-ink)}
.nf-sits{display:grid;gap:10px}
.nf-sits>p{margin:0 0 4px}
.nf-sit{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;text-decoration:none;transition:transform .2s var(--ease)}
.nf-sit>span:last-child{display:grid;gap:2px}
.nf-sit:hover{transform:translateX(4px);color:var(--ink)}
.nf-links{margin-top:12px;gap:24px}

/* ---------------------------------------------------------------- narrower desktops / tablets */
@media (max-width:980px){
  .cart-sum,.cart-sum__figures{grid-template-columns:1fr}
  .cart-sum__total{justify-items:start;text-align:left;padding-left:0;border-left:0}
  .cart-empty__sits{grid-template-columns:1fr 1fr}
  .order-grid,.contact-ways,.expect,.nf{grid-template-columns:1fr}
  .order-side{position:static}
}
@media (max-width:640px){
  .co-list{grid-template-columns:1fr}
  .co-submit{grid-template-columns:1fr;padding-left:0}
  .stages{grid-template-columns:1fr}
  .cart-table thead{display:none}
  .nf-search{grid-template-columns:1fr;border-radius:var(--r)}
}
@media (prefers-reduced-motion:reduce){
  .stage.is-now .stage__dot{animation:none}
}