/* ══════════════════════════════════════════════════════════════════════════
   Supportseite für Bestandskunden.
   Baut auf legal.css auf (Tokens, Schriften, Kopf- und Fußzeile) und ergänzt
   nur die operativen Module. Bewusst breiter als die Rechtsseiten: hier wird
   nicht gelesen, hier wird entschieden.
   ══════════════════════════════════════════════════════════════════════════ */

.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
.head-in.wide{max-width:1040px}
main{padding-bottom:20px}

/* ── Notfallzeile im Kopf ── */
.urgent{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  border:1px solid rgba(255,106,26,.42);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,106,26,.16),rgba(255,106,26,.05));
  padding:18px 22px}
.urgent b{display:block;font-size:14px;color:var(--text);letter-spacing:-.01em}
.urgent span{font-size:13.5px;color:var(--dim);line-height:1.5}
.urgent .tel{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:12px 24px;border-radius:12px;background:var(--accent);color:#fff;
  font:800 17px var(--sans);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px rgba(255,106,26,.28);transition:filter .15s,transform .15s}
.urgent .tel:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:720px){.urgent .tel{margin-left:0;width:100%;justify-content:center}}

/* ── Abschnitte ── */
.sec{padding:60px 0 0}
.sec > .wrap > .lbl{color:var(--accent);font:700 12px var(--mono);letter-spacing:.18em;
  text-transform:uppercase}
.sec h2{font-size:clamp(25px,3vw,33px);font-weight:800;letter-spacing:-.032em;line-height:1.14;
  margin:13px 0 0;color:var(--text);text-wrap:balance}
.sec > .wrap > p.sub{color:var(--dim);font-size:16.5px;line-height:1.62;margin:15px 0 0;
  max-width:70ch;text-wrap:pretty}

/* ── Triage: drei Dringlichkeiten ── */
.triage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:32px}
@media(max-width:860px){.triage{grid-template-columns:1fr}}
.triage article{border:1px solid var(--line);border-radius:18px;background:var(--srf);
  padding:26px 26px 24px;display:flex;flex-direction:column}
.triage article.hot{border-color:rgba(255,106,26,.42);
  background:linear-gradient(180deg,rgba(255,106,26,.11),rgba(255,106,26,.028))}
.triage .sig{font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.triage article.hot .sig{color:var(--accent)}
.triage h3{font-size:19px;font-weight:700;letter-spacing:-.024em;margin:11px 0 0;color:var(--text)}
.triage p{color:var(--dim);font-size:15px;line-height:1.62;margin:10px 0 0;text-wrap:pretty}
.triage .go{margin-top:auto;padding-top:18px}
.triage .go a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;
  border-radius:11px;font:700 14.5px var(--sans);text-decoration:none;
  border:1px solid var(--line);background:rgba(255,244,234,.055);color:var(--text);
  transition:background .15s,border-color .15s}
.triage .go a:hover{background:rgba(255,244,234,.1);border-color:rgba(255,176,60,.4)}
.triage article.hot .go a{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(255,106,26,.26)}
.triage article.hot .go a:hover{filter:brightness(1.08)}

/* ── Kanäle ── */
.chan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:32px}
@media(max-width:780px){.chan{grid-template-columns:1fr}}
.chan article{border:1px solid var(--line);border-radius:18px;background:var(--srf);
  padding:26px;display:flex;flex-direction:column;transition:border-color .2s}
.chan article:hover{border-color:rgba(255,176,60,.34)}
.chan .ic{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--glow);background:rgba(255,106,26,.14);
  border:1px solid rgba(255,106,26,.24)}
.chan .ic svg{width:19px;height:19px}
.chan h3{font-size:18.5px;font-weight:700;letter-spacing:-.022em;margin:15px 0 0;color:var(--text)}
.chan h3 .meta{display:block;font:600 12.5px var(--mono);letter-spacing:.03em;color:var(--faint);
  margin-top:6px;text-transform:none}
.chan p{color:var(--dim);font-size:15px;line-height:1.62;margin:11px 0 0;text-wrap:pretty}
.chan ul{list-style:none;margin:13px 0 0}
.chan li{color:var(--dim);font-size:14.5px;line-height:1.6;padding-left:19px;position:relative;
  margin-top:6px}
.chan li::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;
  border-radius:99px;background:var(--accent)}
.chan .act{margin-top:auto;padding-top:20px}
.chan .act a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 20px;
  border-radius:11px;font:700 14.5px var(--sans);text-decoration:none;
  background:rgba(255,244,234,.06);border:1px solid var(--line);color:var(--text);
  transition:background .15s,border-color .15s}
.chan .act a:hover{background:rgba(255,244,234,.11);border-color:rgba(255,176,60,.4)}
.chan article.prime{border-color:rgba(255,176,60,.34);
  background:linear-gradient(180deg,rgba(255,176,60,.09),rgba(255,244,234,.02))}
.chan article.prime .act a{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(255,106,26,.24)}
.chan article.prime .act a:hover{filter:brightness(1.08)}
.chan .fine{margin-top:12px;font-size:13px;color:var(--mute);line-height:1.55}

/* ── Verfügbarkeitstabelle ── */
.avail{margin-top:30px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.avail table{width:100%;border-collapse:collapse}
.avail th,.avail td{text-align:left;padding:15px 20px;font-size:15px;line-height:1.55;
  border-bottom:1px solid var(--line);vertical-align:top}
.avail thead th{font:700 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);background:rgba(255,244,234,.035)}
.avail tbody th{font-weight:700;color:var(--text);letter-spacing:-.015em;width:30%}
.avail td{color:var(--dim)}
.avail tr:last-child th,.avail tr:last-child td{border-bottom:0}
.avail .hrs{font:600 14px var(--mono);color:var(--glow);white-space:nowrap}
@media(max-width:700px){
  .avail thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .avail table,.avail tbody,.avail tr,.avail th,.avail td{display:block;width:auto}
  .avail tr{border-bottom:1px solid var(--line);padding:6px 0}
  .avail tr:last-child{border-bottom:0}
  .avail tbody th{padding-bottom:4px;border-bottom:0}
  .avail td{padding-top:2px;padding-bottom:8px;border-bottom:0}
  .avail td::before{content:attr(data-l) ": ";color:var(--faint);font-weight:600}
}

/* ── Zweispalter: Checkliste und Sicherheit ── */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:32px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:18px;background:var(--srf);padding:28px}
.panel.guard{border-color:rgba(255,176,60,.26)}
.panel h3{font-size:19px;font-weight:700;letter-spacing:-.024em;color:var(--text)}
.panel > p{color:var(--dim);font-size:15px;line-height:1.62;margin-top:11px;text-wrap:pretty}
.panel ol{list-style:none;counter-reset:ck;margin:17px 0 0}
.panel ol li{counter-increment:ck;color:var(--dim);font-size:15px;line-height:1.6;
  padding-left:31px;position:relative;margin-top:11px}
.panel ol li::before{content:counter(ck);position:absolute;left:0;top:1px;width:21px;height:21px;
  border-radius:7px;background:rgba(255,106,26,.16);border:1px solid rgba(255,106,26,.26);
  color:var(--glow);font:700 11.5px/19px var(--mono);text-align:center}
.panel ol li b{color:var(--text);font-weight:600}
.panel ul.guardlist{list-style:none;margin:17px 0 0}
.panel ul.guardlist li{color:var(--dim);font-size:15px;line-height:1.6;padding-left:31px;
  position:relative;margin-top:13px}
.panel ul.guardlist li::before{content:"✕";position:absolute;left:0;top:0;width:21px;height:21px;
  border-radius:7px;background:rgba(255,74,58,.14);border:1px solid rgba(255,74,58,.3);
  color:#ff7a6a;font:700 11px/20px var(--sans);text-align:center}
.panel ul.guardlist li b{color:var(--text);font-weight:600}
.panel .close{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--dim);line-height:1.6}
.panel .close b{color:var(--text)}
.panel a{color:var(--glow);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,176,60,.35)}
.panel a:hover{border-bottom-color:var(--glow)}

/* ── Abschluss ── */
.bookend{margin:72px 0 0;border-top:1px solid var(--edge);
  background:radial-gradient(760px 300px at 50% 120%,rgba(255,106,26,.15),transparent 70%);
  padding:52px 28px 60px;text-align:center}
.bookend h2{font-size:clamp(22px,2.6vw,29px);font-weight:800;letter-spacing:-.03em;
  color:var(--text);text-wrap:balance}
.bookend p{color:var(--dim);font-size:16px;line-height:1.62;margin:13px auto 0;max-width:58ch;
  text-wrap:pretty}
.bookend .btns{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bookend a{display:inline-flex;align-items:center;min-height:46px;padding:13px 26px;
  border-radius:12px;font:700 15px var(--sans);text-decoration:none;
  border:1px solid var(--line);background:rgba(255,244,234,.06);color:var(--text);
  transition:background .15s,border-color .15s}
.bookend a:hover{background:rgba(255,244,234,.11);border-color:rgba(255,176,60,.4)}
.bookend a.pri{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 10px 28px rgba(255,106,26,.26)}
.bookend a.pri:hover{filter:brightness(1.08)}

@media print{
  .urgent .tel,.triage .go,.chan .act,.bookend .btns{display:none}
  .triage article,.chan article,.panel,.avail{border-color:#ccc;background:#fff}
  .sec h2,.triage h3,.chan h3,.panel h3{color:#111}
  .sec > .wrap > p.sub,.triage p,.chan p,.chan li,.panel > p,.panel ol li{color:#333}
}