@import url("/assets/fonts/archivo.css");

/* ─────────────────────────────────────────────────────────────────────────
   Reichweitenwerk — Kundenportal. Design-Tokens 1:1 aus der Marken-CD
   (src/app/globals.css der Website, „Brand"-Variante = verbindlich).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Aubergine / Brand */
  --brand:#362023; --brand-card:#2a181a; --brand-card-2:#43292c;
  --brand-border:#553a3e; --footer:#271619;
  /* Akzente */
  --mint:#d0f4ea; --red:#f51039; --star:#f5b50c;
  /* Helle Flächen */
  --cream:#f6f2ee; --card:#ffffff; --card-border:#e7ded9; --input-border:#ddd2cd;
  /* Text */
  --ink:#362023; --muted:#6a5256; --muted-2:#9a8589; --on-dark:#c2adb0;
  --mint-ink:#1c4036;
  /* Status */
  --ok:#1c7a4f; --okbg:#e6f5ec; --err:#b00c2c; --errbg:#fbe9ec; --info:#2c4f47; --infobg:#e9f6f1;
  --radius:16px; --radius-sm:11px;
  --shadow:0 2px 20px rgba(54,32,35,.08); --shadow-lg:0 14px 40px rgba(54,32,35,.14);
}
*,*::before,*::after{box-sizing:border-box}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 32, 35, 0.28) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(54, 32, 35, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(54, 32, 35, 0.45);
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: 16px;
  scrollbar-gutter: stable;
}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--cream);color:var(--ink);line-height:1.55;
  min-height:100vh;display:flex;flex-direction:column;font-weight:450;
  /* Netz gegen Layout-Sprengung durch lange Adressen/URLs ohne Leerzeichen */
  overflow-wrap:break-word;
}
::selection{background:var(--red);color:#fff}
a{color:var(--ink)}
h1{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.06;margin:.1em 0 .5em}
h2{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;margin:0 0 .55em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--mint);outline-offset:2px;border-radius:6px}

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{position:relative;display:flex;align-items:center;gap:16px;background:var(--brand);color:#fff;
  padding:0 22px;min-height:62px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.brand{color:#fff;text-decoration:none;font-weight:900;font-size:1.18rem;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:#fff}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 2px;flex:1;padding:6px 0}
.nav a{display:inline-flex;align-items:center;color:var(--on-dark);text-decoration:none;padding:8px 13px;border-radius:999px;font-size:.95rem;font-weight:600;transition:background .15s,color .15s;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a.is-active{background:var(--mint);color:var(--mint-ink);font-weight:800}
.nav .logout{margin-left:auto}
.logout button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:7px 16px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;transition:.15s}
.logout button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
/* Hamburger (klassisch): auf Desktop versteckt, ab ≤820px aktiv */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;margin-left:auto;cursor:pointer;border-radius:11px}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:0 auto;
  pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.burger:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* ── Shell / Layout ─────────────────────────────────────────────────────── */
.shell{width:100%;max-width:1440px;margin:24px auto;padding:0 24px;flex:1}
.shell--guest{max-width:430px;margin-top:7vh}
.foot{display:flex;gap:16px;justify-content:center;align-items:center;color:var(--muted-2);
  font-size:.85rem;padding:26px;flex-wrap:wrap;background:var(--footer);color:var(--on-dark);margin-top:20px}
.foot a{color:var(--on-dark);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;margin-bottom:20px}

/* ── Team-Übersicht: aufklappbare Partner ────────────────────────────────
   <details>/<summary> statt eigener Klapp-Logik — funktioniert ohne JS und
   ist per Tastatur bedienbar. */
.teamrep{border:1px solid var(--card-border);border-radius:10px;margin-bottom:10px;background:#fff}
.teamrep>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:baseline;justify-content:space-between;padding:14px 16px;font-size:.95rem}
.teamrep>summary::-webkit-details-marker{display:none}
.teamrep>summary::before{content:"▸";color:var(--muted);margin-right:8px;transition:transform .2s ease;display:inline-block}
.teamrep[open]>summary::before{transform:rotate(90deg)}
.teamrep__name{font-weight:800}
.teamrep__meta{color:var(--muted);font-size:.88rem}
.teamrep__body{padding:0 16px 16px;border-top:1px solid var(--card-border)}
.teamrep__body h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:14px 0 8px}

/* Kennzahlen-Reihe über den Ebenen */
.stats{display:flex;flex-wrap:wrap;gap:10px 28px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat__v{font-size:1.5rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.stat__l{font-size:.8rem;color:var(--muted)}
table td.r,table th.r{text-align:right;white-space:nowrap}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
/* Mittlere Breiten: Tabs kompakter, damit die Leiste einzeilig bleibt */
@media(max-width:1280px){
  .nav a{padding:8px 9px;font-size:.88rem}
  .logout button{padding:6px 12px;font-size:.85rem}
}
@media(max-width:820px){
  .grid-2{grid-template-columns:1fr}
  .topbar{padding:0 16px}
  .brand{font-size:1.1rem}
  /* Burger sichtbar, Navigation als Klapp-Panel */
  .burger{display:flex}
  .nav{position:absolute;top:100%;left:0;right:0;z-index:60;
    display:none;flex-direction:column;align-items:stretch;gap:4px;
    max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);overflow-y:auto;
    background:var(--brand);padding:10px 14px 16px;
    box-shadow:0 16px 32px rgba(20,8,10,.32);border-top:1px solid var(--brand-border)}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav a{width:100%;padding:13px 14px;border-radius:10px;font-size:1rem}
  .nav .logout{margin:6px 0 0}
  .logout button{width:100%;padding:13px}
  /* Icon → X, wenn geöffnet */
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
label{display:block;font-size:.8rem;color:var(--muted);margin:0 0 5px;font-weight:700}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:12px 13px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);
  font:inherit;background:#fff;color:var(--ink);transition:border-color .15s}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
input[readonly]{background:#f3ece8;color:var(--muted);border-style:dashed}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:15px}

/* ── Buttons: primäre CTA = rote Pille (CD) ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--red, #f51039);
  color: #fff !important;
  border: none;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  font-size: .98rem;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  font-family: inherit;
}
.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(245, 16, 57, .28);
  color: #fff !important;
}
.btn:active {
  transform: translateY(0);
  filter: brightness(.96);
}
.btn[disabled],
.btn.is-disabled {
  background: #e4d4d6 !important;
  color: #9a8589 !important;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
  transform: none;
  filter: none;
}
.btn--block {
  display: flex;
  width: 100%;
}

/* ── Sekundäre Buttons & Varianten (überstimmen .btn und .btn:hover) ─────── */

/* 1. Ghost: transparente Pille mit dunklem Rand & Schrift */
.btn--ghost,
.btn.btn--ghost,
a.btn.btn--ghost,
button.btn.btn--ghost {
  background: transparent !important;
  border: 1.5px solid var(--brand, #362023) !important;
  color: var(--brand, #362023) !important;
  box-shadow: none !important;
  filter: none !important;
}
.btn--ghost:hover,
.btn.btn--ghost:hover,
a.btn.btn--ghost:hover,
button.btn.btn--ghost:hover {
  background: rgba(54, 32, 35, .06) !important;
  color: var(--brand, #362023) !important;
  border-color: var(--brand, #362023) !important;
  box-shadow: 0 4px 12px rgba(54, 32, 35, .08) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.btn--ghost:active,
.btn.btn--ghost:active {
  background: rgba(54, 32, 35, .12) !important;
  transform: translateY(0);
  box-shadow: none !important;
}

/* 2. Secondary: weiße/helle Karte mit dezentem Rand & dunkler Schrift */
.btn--secondary,
.btn.btn--secondary,
a.btn.btn--secondary,
button.btn.btn--secondary {
  background: #ffffff !important;
  color: var(--ink, #362023) !important;
  border: 1.5px solid var(--card-border, #ddd2cd) !important;
  box-shadow: none !important;
  filter: none !important;
}
.btn--secondary:hover,
.btn.btn--secondary:hover,
a.btn.btn--secondary:hover,
button.btn.btn--secondary:hover {
  background: #f6f2ee !important;
  color: var(--ink, #362023) !important;
  border-color: var(--muted, #6a5256) !important;
  box-shadow: 0 4px 14px rgba(54, 32, 35, .08) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.btn--secondary:active,
.btn.btn--secondary:active {
  background: #ede6e1 !important;
  transform: translateY(0);
  box-shadow: none !important;
}

/* 3. Subtle: dezent gestrichelt (z.B. Trotzdem kündigen) */
.btn--subtle,
.btn.btn--subtle,
a.btn.btn--subtle,
button.btn.btn--subtle {
  background: transparent !important;
  color: var(--muted, #6a5256) !important;
  border: 1px dashed var(--input-border, #ddd2cd) !important;
  box-shadow: none !important;
  filter: none !important;
  font-weight: 600;
}
.btn--subtle:hover,
.btn.btn--subtle:hover,
a.btn.btn--subtle:hover,
button.btn.btn--subtle:hover {
  background: rgba(54, 32, 35, .04) !important;
  color: var(--ink, #362023) !important;
  border-color: var(--muted, #6a5256) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px);
}

/* 4. Danger-Outline: weiß mit rotem Rahmen & rotem Text */
.btn--danger-outline,
.btn.btn--danger-outline,
a.btn.btn--danger-outline,
button.btn.btn--danger-outline {
  background: #ffffff !important;
  color: var(--red) !important;
  border: 1.5px solid #fca5a5 !important;
  box-shadow: none !important;
  filter: none !important;
}
.btn--danger-outline:hover,
.btn.btn--danger-outline:hover,
a.btn.btn--danger-outline:hover,
button.btn.btn--danger-outline:hover {
  background: #fef2f2 !important;
  color: var(--err) !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .12) !important;
  filter: none !important;
  transform: translateY(-1px);
}

/* 5. Danger: rote Pille für kritische Lösch-Aktionen */
.btn--danger,
.btn.btn--danger {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .2) !important;
}
.btn--danger:hover,
.btn.btn--danger:hover {
  background: var(--err) !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, .3) !important;
  color: #fff !important;
}
.small{font-size:.85rem}
.muted{color:var(--muted)}

/* ── Flash / Tags ───────────────────────────────────────────────────────── */
.flash{padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.95rem;
  border:1px solid;font-weight:600}
.flash--success{background:var(--okbg);border-color:#bfe3cd;color:var(--ok)}
.flash--error{background:var(--errbg);border-color:#f0c5cc;color:var(--err)}
.flash--info{background:var(--infobg);border-color:#cce6dd;color:var(--info)}
.tag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:800}
.tag--ok{background:var(--okbg);color:var(--ok)}
.tag--warn{background:#fdf0e0;color:#9a5a14}
.tag--info{background:var(--mint);color:var(--mint-ink)}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff3b30;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-radius: 9999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.field-picker-row{display:flex;align-items:center;gap:6px}
.btn-picker{background:#edebe9;border:1px solid var(--card-border);border-radius:4px;padding:3px 7px;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.2;white-space:nowrap}
.btn-picker:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── Tabellen / KV ──────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--card-border);font-size:.92rem}
th{color:var(--muted-2);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--card-border)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.bar{height:9px;background:#ece1dc;border-radius:999px;overflow:hidden;margin:8px 0}
.bar>span{display:block;height:100%;background:var(--brand)}

/* Reichweiten-Karte (Hero auf der Übersicht) */
.card--reach{border-color:#cfe8dd;background:linear-gradient(180deg,#f4fbf8 0%,#ffffff 60%)}
.reach-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 4px}
.reach-num{font-size:clamp(30px,6vw,44px);font-weight:900;letter-spacing:-.02em;color:var(--mint-ink);line-height:1}
.bar--reach{height:12px;background:#dcefe7}
.bar--reach>span{background:linear-gradient(90deg,#2c8f76,#1c4036)}

/* ── Login / Brand-Logo ─────────────────────────────────────────────────── */
.brand-logo{display:block;height:34px;margin:2px auto 4px;width:auto}
.hero-logo{font-weight:900;font-size:1.5rem;color:var(--brand);text-align:center;letter-spacing:-.02em}
.hero-logo span{color:#2c8f76}

/* ── Upload ─────────────────────────────────────────────────────────────── */
.dropzone{border:2px dashed var(--input-border);border-radius:var(--radius);padding:36px 20px;
  text-align:center;background:#fcfaf8;cursor:pointer;transition:.15s}
.dropzone:hover{border-color:var(--brand)}
.dropzone.is-over{border-color:var(--red);background:#fdf3f5}
.uplist{margin-top:14px;display:grid;gap:8px}
.uprow{display:flex;align-items:center;gap:12px;font-size:.9rem;border:1px solid var(--card-border);
  border-radius:var(--radius-sm);padding:9px 13px}
.uprow .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .pbar{width:120px;height:7px;background:#ece1dc;border-radius:999px;overflow:hidden}
.uprow .pbar>span{display:block;height:100%;background:var(--brand);width:0;transition:width .2s}
.uprow.done{border-color:#bfe3cd}.uprow.err{border-color:#f0c5cc}
.uprow .st{min-width:64px;text-align:right}

/* ── Vertrieb: Button-Reihe (gleich hohe, normale Buttons statt gestreckter Pillen) ── */
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btnrow .btn{flex:1 1 180px}
.btnrow .btn--block{width:auto}
/* Buttons in Grids nicht auf Zellenhöhe strecken */
.grid > .btn{align-self:start}

/* ── Tabellen mobil scrollbar (verhindert horizontalen Seiten-Überlauf) ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:480px}
@media(max-width:820px){
  /* KEIN overflow:hidden auf .topbar — das wuerde das absolut positionierte
     Mobil-Menue (.nav, top:100%) unsichtbar clippen (Hamburger wirkt tot).
     Horizontalen Ueberlauf verhindert die schrumpfbare Brand (min-width:0). */
  .brand{font-size:1rem;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
  .card{padding:18px}
  th,td{padding:9px 8px;font-size:.88rem}
}

/* ── Gamification / Rangliste ─────────────────────────────────────────────── */
.lb{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--card-border);
  border-radius:var(--radius-sm);background:var(--card)}
.lb-row.is-me{border-color:#2c8f76;background:var(--mint);color:var(--mint-ink);box-shadow:var(--shadow)}
.lb-row.is-outside{border-style:dashed}
.lb-rank{flex:0 0 auto;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-weight:900;background:var(--brand);color:#fff;font-size:.95rem}
.lb-rank.r1{background:#f5b50c;color:#3a2a00}
.lb-rank.r2{background:#c9cdd2;color:#2b2f33}
.lb-rank.r3{background:#d2935a;color:#3a1f08}
.lb-initials{font-weight:800;letter-spacing:.05em;font-size:1.02rem}
.lb-me-tag{margin-left:auto;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  background:#2c8f76;color:#fff;padding:3px 9px;border-radius:999px}
.prizebar{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-size:.9rem;margin:2px 0}
.progress{height:10px;border-radius:999px;background:#eadfdb;overflow:hidden;margin-top:6px}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,#2c8f76,#1c4036)}
/* ── FAQ / Q&A (Accordion via <details>, kein JS) ─────────────────────────── */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;
  display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:800;color:var(--muted-2);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq details[open] summary{border-bottom:1px solid var(--card-border)}
.faq .faq-a{padding:12px 16px;color:var(--muted);font-size:.95rem}

/* ── Wissensdatenbank (KB) ───────────────────────────────────────────────── */
.kb-list{list-style:none;margin:0;padding:0}
.kb-list li{padding:10px 0;border-bottom:1px solid var(--card-border)}
.kb-list li:last-child{border-bottom:0}
.kb-list a{font-weight:600;color:var(--ink);text-decoration:none}
.kb-list a:hover{color:var(--red)}
.kb-sum{display:block;margin-top:2px}
.kb-article{max-width:760px}
.kb-article h1{margin:.1em 0 .6em}
.kb-article h2{margin:1.4em 0 .4em;font-size:1.15rem;color:var(--brand)}
.kb-article h3{margin:1.1em 0 .3em;font-size:1.02rem}
.kb-article p{margin:.6em 0;line-height:1.6}
.kb-article ul,.kb-article ol{margin:.5em 0 .9em 1.2em;line-height:1.6}
.kb-article li{margin:.25em 0}
.kb-article a{color:var(--red)}
.kb-article table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.95rem}
.kb-article th,.kb-article td{border:1px solid var(--card-border);padding:8px 10px;text-align:left;vertical-align:top}
.kb-article thead th{background:var(--mint);color:var(--mint-ink)}

/* ── Team-Vergütung: Provisions-Split-Regler ─────────────────────────────── */
.split{margin:8px 0 30px}
.split-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:14px}
.split-head h2{margin:0}
.split-vals{display:flex;gap:14px;margin-bottom:14px}
.split-val{flex:1;border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:12px 15px;background:#fff}
.split-val label{display:block;margin:3px 0 0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2)}
.split-num{font-size:1.75rem;font-weight:900;letter-spacing:-.02em;line-height:1}
.split-val--you{border-color:#c9b3b6;background:#fbf6f4}
.split-val--you .split-num{color:var(--brand)}
.split-val--partner{border-color:#bfe3d6;background:#f3faf7}
.split-val--partner .split-num{color:var(--mint-ink)}
.range-split{width:100%;height:26px;cursor:pointer;accent-color:var(--brand)}
.split-bar{height:12px;border-radius:999px;overflow:hidden;margin:12px 0 0;background:var(--mint)}
.split-bar>span{display:block;height:100%;background:var(--brand);transition:width .1s ease}
.split-legend{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 0;font-size:.82rem;color:var(--muted)}
.split-legend b{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle}
.split-legend .you b{background:var(--brand)}
.split-legend .partner b{background:var(--mint)}

/* ── Postfach: Nachrichtentext ───────────────────────────────────────────── */
/* overflow-wrap:anywhere ist Pflicht, nicht Kosmetik: MailerSend ersetzt Links
   in gesendeten Mails durch Tracking-URLs (…click.mailersend.net/tl/cws/eyJ…,
   300+ Zeichen ohne Leerzeichen). Zitiert ein Kunde die Mail zurueck, schob so
   eine Zeile die ganze Seite seitwaerts — pre-wrap allein bricht nur an
   Leerzeichen. word-break ist der Fallback fuer aeltere Safari-Versionen. */
.mail-body{white-space:pre-wrap;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}

/* ── Adresse einer Zeile ─────────────────────────────────────────────────── */
/* Die volle Adresse steht im <code> (das liest der Kopier-Helfer in vertrieb.js
   aus textContent) und wird nur OPTISCH gekuerzt — deshalb text-overflow statt
   einer serverseitig gekuerzten Zeichenkette. */
.linkzeile__url{flex:1 1 auto;min-width:90px;max-width:270px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;direction:ltr;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;
  color:var(--muted);background:var(--cream);border:1px solid var(--input-border);
  border-radius:7px;padding:5px 9px}

/* Abschnittsüberschrift mit Sprungmarke (z. B. „Team aufbauen" auf /team).
   scroll-margin-top hält die Überschrift nach dem Sprung frei vom Seitenrand. */
.abschnitt{margin-top:34px;padding-top:22px;border-top:1px solid var(--card-border);
  scroll-margin-top:18px}

/* ── Angebotsliste: „Was möchtest du tun?" ───────────────────────────────── */
/* Seit 25.08.2026 waehlt man erst die Absicht (Auswahlfeld), dann drueckt man
   EINEN Knopf. Vorher lagen zwei volle Adressen und vier gleich aussehende
   Knoepfe in einer Zelle; die Spalte war breiter als der Rest der Zeile. */
.linkwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.linkwahl__sel{flex:1 1 190px;min-width:150px;padding:6px 9px;font-size:.82rem;
  border:1px solid var(--input-border);border-radius:8px;background:var(--card);
  color:var(--ink);font-family:inherit}
/* Der Knopf gehoert sichtbar zum Auswahlfeld, ist aber KEINE rote CTA: sechs
   rote Pillen in der Liste haetten dem einen roten Knopf darueber
   („Angebot erstellen") die Aufmerksamkeit weggenommen. Deshalb Aubergine —
   deutlich als Aktion erkennbar, ohne mit der Haupt-CTA zu konkurrieren. */
.linkwahl [data-linkwahl-go]{flex:0 0 auto;min-width:104px;text-align:center;text-decoration:none;
  background:var(--brand);color:#fff;border:1.5px solid var(--brand)}
.linkwahl [data-linkwahl-go]:hover{background:var(--brand-card-2);border-color:var(--brand-card-2);
  box-shadow:none;filter:none}
.ang-tab td{vertical-align:top}
/* Auf dem Handy scrollt die Tabelle waagrecht (.table-wrap) — dafuer braucht sie
   eine ehrliche Mindestbreite. Ohne sie quetschte der Browser vier Spalten in
   480px und brach „AG-2026-0007" mitten in der Nummer um. */
.table-wrap table.ang-tab{min-width:780px}
.ang-tab td:first-child{min-width:200px}
.ang-tab td:first-child .muted{white-space:nowrap}
/* Ohne feste Breite zieht die lange URL im <code> die Spalte auf und quetscht
   die Firma links auf zwei Buchstaben je Zeile. */
.ang-tab .linkzeile__url{display:block;max-width:300px}

/* Stufen des Angebots (offen → gesendet → geöffnet → Checkout → bezahlt).
   Die Farbe steigt mit der Naehe zum Abschluss, damit die Liste auf einen Blick
   sagt, wo nachzufassen ist — nicht als Schmuck. */
.stufen{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tag--stufe{font-size:.72rem}
.tag--stufe.is-offen{background:#efe7e3;color:var(--muted)}
.tag--stufe.is-gesendet{background:var(--infobg);color:var(--info)}
.tag--stufe.is-geoeffnet{background:var(--mint);color:var(--mint-ink)}
.tag--stufe.is-checkout{background:#fdf0e0;color:#9a5a14}
.tag--stufe.is-bezahlt{background:var(--okbg);color:var(--ok)}

/* Loeschen sieht anders aus als „Bearbeiten" — aber nicht wie eine Hauptaktion:
   ein knallroter Knopf in jeder Zeile zieht den Blick auf das Falsche. */
.btn.btn--loeschen,.btn--loeschen{background:transparent !important;border:1.5px solid #e2c3c9 !important;color:var(--err) !important;box-shadow:none !important}
.btn.btn--loeschen:hover,.btn--loeschen:hover{background:var(--errbg) !important;border-color:#d79aa5 !important;color:var(--err) !important;box-shadow:none !important;filter:none !important}

/* Kompakte Knopfvariante — nur fuer Listenzeilen, nicht fuer Hauptaktionen. */
.btn--mini{padding:5px 11px;font-size:.76rem;border-radius:8px;box-shadow:none}
.btn--mini:hover{transform:none;box-shadow:none}

.aktionen{white-space:nowrap;vertical-align:top}

@media(max-width:820px){
  .linkzeile__url{max-width:100%;flex:1 1 100%}
  .ang-tab .linkzeile__url{max-width:100%}
}

/* ── Schalter für Browser-Benachrichtigungen (Kopfzeile) ─────────────────── */
/* Startet per hidden-Attribut unsichtbar; melder.js blendet ihn nur ein, wenn
   der Browser die Notification-API überhaupt kann. Bewusst zurückhaltend
   gestaltet — er steht neben „Abmelden" und darf nicht wie eine Hauptaktion
   aussehen. */
.melder-schalter{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:inherit;
  font:inherit;font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;
  cursor:pointer;white-space:nowrap}
.melder-schalter:hover:not(:disabled){border-color:currentColor}
.melder-schalter:disabled{opacity:.55;cursor:not-allowed}
.melder-schalter[aria-pressed="true"]{border-color:var(--mint);color:var(--mint)}

/* ────────────────────────────────────────────────────────────────────────────
   Terminportal
   ────────────────────────────────────────────────────────────────────────────
   Alles oberhalb dieser Linie ist die geteilte Portal-Optik und steht
   zeichengleich in `vertrieb/public/assets/portal.css`. Wer dort etwas aendert,
   zieht es hier nach — und umgekehrt wird oben NICHTS umgeschrieben, sonst
   sieht das Terminportal anders aus als seine Nachbarn.

   Unterhalb steht nur, was die Buchungsstrecke braucht: die oeffentliche
   Schale ohne Navigation, die Tagesliste, das Slot-Raster und die
   Erfolgs-/Absage-Seiten. Mobil zuerst — der Kunde kommt vom Handy.
   ──────────────────────────────────────────────────────────────────────────── */

/* ⚠ Pflicht, kein Feinschliff: `.tagleiste` und der Absende-Knopf starten mit
   dem `hidden`-Attribut und werden erst von termine.js eingeblendet. Eine
   Klassenregel wie `.tagleiste{display:flex}` schlaegt aber das
   `[hidden]{display:none}` des Browsers (Autoren-CSS gewinnt gegen das
   Standardblatt) — ohne diese Zeile waere beides sofort sichtbar. */
[hidden]{display:none !important}

/* ── Oeffentliche Schale (kein Login, keine Navigation) ──────────────────── */
/* Breiter für das moderne 2-Spalten-Layout nach Calendly-Vorbild (Host-Sidebar + Kalender) */
.shell--oeffentlich{max-width:1040px;margin-top:28px}
.kopfleiste{display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--brand);color:#fff;padding:14px 18px;min-height:56px}
.kopfleiste .brand{font-size:1.12rem}

/* ── Calendly UI: 2-Spalten Buchungs-Card ────────────────────────────────── */
.cal-card{display:flex;background:#fff;border:1px solid var(--card-border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;
  margin:0 auto 30px;min-height:600px}
.cal-sidebar{width:320px;min-width:280px;background:#fdfbf9;
  border-right:1px solid var(--card-border);padding:32px 26px;
  display:flex;flex-direction:column;gap:18px}
.cal-host{display:flex;align-items:center;gap:14px}
.cal-avatar{width:46px;height:46px;border-radius:50%;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;letter-spacing:-.02em;box-shadow:0 4px 12px rgba(54,32,35,.15);flex-shrink:0}
.cal-host-meta{display:flex;flex-direction:column;line-height:1.25}
.cal-host-company{font-size:.75rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.cal-host-name{font-size:.98rem;font-weight:800;color:var(--ink)}
.cal-event-title{font-size:clamp(1.2rem,2.4vw,1.45rem);font-weight:900;
  line-height:1.25;color:var(--ink);margin:0;letter-spacing:-.015em}
.cal-meta-list{display:flex;flex-direction:column;gap:11px}
.cal-meta-item{display:flex;align-items:center;gap:10px;font-size:.9rem;
  color:var(--muted);font-weight:600}
.cal-meta-icon{font-size:1.1rem;line-height:1;width:20px;text-align:center}
.cal-description{font-size:.88rem;color:var(--muted);line-height:1.5;
  padding-top:14px;border-top:1px solid var(--card-border)}

/* Ausgewählter Termin im Sidebar-Preview */
.cal-sidebar-selected{margin-top:auto;background:#fff;border:1.5px solid var(--mint-ink);
  border-radius:var(--radius-sm);padding:14px 16px;box-shadow:0 4px 14px rgba(28,64,54,.08);
  display:flex;flex-direction:column;gap:4px;animation:calFadeIn .25s ease-out}
.cal-sidebar-selected-header{display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:800;color:var(--mint-ink);text-transform:uppercase;letter-spacing:.03em}
.cal-check-badge{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:.7rem}
.cal-sidebar-selected-date{font-size:.95rem;font-weight:800;color:var(--ink)}
.cal-sidebar-selected-time{font-size:.88rem;font-weight:700;color:var(--muted)}

/* Hauptbereich rechts */
.cal-main{flex:1;padding:32px 34px;display:flex;flex-direction:column;min-width:0}
.cal-form{display:flex;flex-direction:column;flex:1}
.cal-scheduler{display:none}
.js-active .cal-scheduler{display:block}
.js-active .cal-nojs-fallback{display:none!important}

/* Schritt 1: Monatskalender & Zeitslots */
.cal-step-title{font-size:1.25rem;font-weight:800;color:var(--ink);margin:0 0 16px}
.cal-picker-grid{display:grid;grid-template-columns:minmax(280px,330px) 1fr;gap:28px}
.cal-calendar-box{display:flex;flex-direction:column}
.cal-month-header{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px}
.cal-month-title{font-weight:700;font-size:1.05rem;color:var(--brand)}
.cal-nav-btn{background:transparent;border:none;color:var(--brand);font-size:1.4rem;font-weight:700;cursor:pointer;padding:0 8px;line-height:1;transition:color .15s;display:inline-flex;align-items:center;justify-content:center}
.cal-nav-btn:hover:not(:disabled){color:var(--brand)}
.cal-nav-btn:disabled{opacity:.25;cursor:not-allowed}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:.76rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-bottom:12px}
.cal-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;row-gap:8px}
.cal-day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.cal-day-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;
  font-family:inherit;font-size:.95rem;font-weight:500;color:var(--muted);cursor:default;
  position:relative;transition:all .15s;display:flex;align-items:center;justify-content:center}
.cal-day-btn:disabled{color:var(--muted-2);cursor:default}
.cal-day-btn.cal-day--has-slots{font-weight:700;color:var(--brand);cursor:pointer}
.cal-day-btn.cal-day--has-slots:hover{background:var(--cream);color:var(--brand)}
.cal-day-btn.cal-day--selected{background:var(--brand-card)!important;color:#fff!important;font-weight:700;
  box-shadow:0 3px 8px rgba(30,41,59,.25)}
.cal-day-btn.cal-day--today{color:var(--brand)}
.cal-day-btn.cal-day--selected.cal-day--today{color:#fff}
.cal-tz-note{font-size:.78rem;color:var(--muted-2);margin-top:14px}

/* Zeitslots Spalte rechts (Calendly Style) */
.cal-slots-panel{display:flex;flex-direction:column;min-width:280px}
.cal-slots-headline{font-size:1.15rem;font-weight:700;color:var(--brand);margin-bottom:12px}
.cal-tz-box{display:flex;align-items:center;border:1px solid var(--muted-2);border-radius:4px;
  padding:9px 12px;font-size:.88rem;color:var(--brand-border);background:#fff;margin-bottom:16px}
.cal-slots-list{display:flex;flex-direction:column;max-height:480px;overflow-y:auto;padding-right:4px}
.cal-slots-placeholder{padding:24px 16px;text-align:center;color:var(--muted);
  font-size:.88rem;background:#faf8f7;border-radius:var(--radius-sm);border:1px dashed var(--input-border)}

/* Gruppen-Trenner mit zentriertem Text */
.cal-group-divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.88rem;margin:18px 0 12px}
.cal-group-divider::before,.cal-group-divider::after{content:'';flex:1;border-bottom:1px solid var(--card-border)}
.cal-group-divider span{padding:0 12px;font-weight:500}

/* 4-Spalten Grid */
.cal-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
@media(max-width:640px){.cal-slots-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.cal-slots-grid{grid-template-columns:repeat(2,1fr)}}

.cal-slot-btn{background:#fff;border:1.5px solid var(--brand);color:var(--brand);border-radius:4px;
  padding:10px 4px;font-family:inherit;font-size:.92rem;font-weight:700;
  font-variant-numeric:tabular-nums;cursor:pointer;text-align:center;transition:all .15s ease-in-out}
.cal-slot-btn:hover{background:var(--cream);border-color:var(--brand);color:var(--brand)}
.cal-slot-btn.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.cal-next-btn-wrap{margin-top:16px}

/* Schritt 2: Kontaktdaten */
.cal-step2-head{margin-bottom:18px}
.cal-back-link{display:inline-flex;align-items:center;gap:6px;border:none;
  background:transparent;color:var(--muted);font-family:inherit;font-size:.88rem;
  font-weight:700;cursor:pointer;padding:0;margin-bottom:10px;transition:color .15s}
.cal-back-link:hover{color:var(--brand)}
.cal-selected-badge{display:flex;align-items:center;gap:10px;background:var(--infobg);
  border:1px solid #bce1d4;color:var(--mint-ink);padding:12px 16px;
  border-radius:var(--radius-sm);font-weight:700;font-size:.92rem;margin-bottom:22px}
.cal-empty-state{text-align:center;padding:36px 20px;background:#faf8f7;
  border-radius:var(--radius-sm);border:1px dashed var(--input-border)}

@keyframes calFadeIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:860px){
  .cal-card{flex-direction:column;min-height:auto}
  .cal-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--card-border);padding:24px 20px}
  .cal-main{padding:24px 20px}
  .cal-picker-grid{grid-template-columns:1fr;gap:20px}
}

/* ── Kopf der Buchungsseite ─────────────────────────────────────────────── */
.buchkopf{margin:0 0 18px}
.buchkopf h1{font-size:clamp(22px,4.2vw,30px);margin:.05em 0 .35em}
.buchkopf__meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  color:var(--muted);font-size:.92rem}
.buchkopf__meta .tag{font-weight:700}

/* ── Tagesleiste (nur mit JS sichtbar; `hidden` faellt per JS weg) ───────── */
/* Ohne JS stehen ALLE Tage untereinander — das ist der Normalfall, nicht der
   Notbehelf. Die Leiste blendet nur zusammen, was zusammengehoert. */
.tagleiste{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 14px;margin-bottom:22px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tagknopf{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:74px;padding:9px 12px;border:1.5px solid var(--card-border);border-radius:var(--radius-sm);
  background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:border-color .15s,background .15s}
.tagknopf:hover{border-color:var(--brand)}
.tagknopf small{font-weight:600;font-size:.72rem;color:var(--muted-2)}
.tagknopf[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.tagknopf[aria-selected="true"] small{color:var(--on-dark)}

/* ── Ein Tag mit seinen Slots ───────────────────────────────────────────── */
.tagblock{margin:0 0 18px}
.tagblock:last-child{margin-bottom:0}
.tagblock__h{font-size:.95rem;font-weight:800;margin:0 0 9px;color:var(--ink)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.slot{display:flex;align-items:center;justify-content:center;
  padding:12px 6px;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);
  background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:1rem;
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .12s,background .12s,color .12s}
.slot:hover{border-color:var(--brand)}
/* Der gewaehlte Slot muss auf einen Blick zu finden sein — auch, wenn der Kunde
   zwischendurch nach unten zu den Feldern gescrollt ist und wieder hochkommt. */
.slot[aria-pressed="true"],.slot.is-gewaehlt{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Keine freien Zeiten ────────────────────────────────────────────────── */
.leerhinweis{border:1px dashed var(--input-border);border-radius:var(--radius-sm);
  padding:18px;text-align:center;color:var(--muted);background:#fcfaf8}

/* ── Gespraechsweg: zwei Schaltflaechen statt eines Auswahlfeldes ────────── */
/* Radios, keine Knoepfe mit JS: die Wahl muss ohne JavaScript stehen bleiben,
   und `:checked ~` faerbt sie ohne eine einzige Zeile Skript. */
.wegwahl{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 15px}
.weg{position:relative;flex:1 1 190px;margin:0;font-weight:inherit;color:inherit;font-size:1rem}
.weg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.weg__body{display:block;border:1.5px solid var(--input-border);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--card);cursor:pointer;transition:border-color .12s,background .12s}
.weg__body b{display:block;font-weight:800;font-size:.98rem}
.weg__body span{display:block;color:var(--muted);font-size:.84rem;font-weight:500}
.weg input:checked ~ .weg__body{border-color:var(--brand);background:#fbf6f4}
.weg input:focus-visible ~ .weg__body{outline:3px solid var(--mint);outline-offset:2px}
.weghinweis{margin:0 0 15px;color:var(--muted);font-size:.92rem}

/* ── Honeypot ───────────────────────────────────────────────────────────── */
/* Nicht `type=hidden` und nicht `display:none`: beides erkennt ein Bot sofort.
   Ein abgeschobenes, aber im Baum stehendes Feld fuellt er dagegen brav aus.
   Fuer Menschen unsichtbar, per Tastatur nicht erreichbar (tabindex=-1). */
.honig{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Einwilligung ───────────────────────────────────────────────────────── */
.einwilligung{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  font-size:.9rem;color:var(--muted);font-weight:500;line-height:1.45}
.einwilligung input{width:20px;height:20px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--brand)}
.einwilligung a{color:var(--err)}

/* ── Feld mit Fehler ────────────────────────────────────────────────────── */
.field--fehler input,.field--fehler textarea{border-color:var(--err);background:#fffafb}
.feldfehler{display:block;margin:5px 0 0;color:var(--err);font-size:.82rem;font-weight:700}

/* ── Zusammenfassung (Status-, Verschiebe- und Absageseite) ─────────────── */
.termin-hero{border:1px solid #cfe8dd;background:linear-gradient(180deg,#f4fbf8 0%,#fff 60%);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 18px}
.termin-hero .wann{font-size:clamp(19px,3.6vw,25px);font-weight:900;letter-spacing:-.02em;
  line-height:1.15;color:var(--mint-ink);margin:2px 0 6px}
.termin-hero .wer{color:var(--muted);font-size:.94rem}

/* ── Fusszeile der oeffentlichen Seiten ─────────────────────────────────── */
.foot--oeffentlich{margin-top:26px}

@media(max-width:520px){
  .shell--oeffentlich{padding:0 14px;margin-top:18px}
  .slots{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px}
  .btnrow .btn{flex:1 1 100%}
}

/* ── Innenseiten des Terminportals ──────────────────────────────────────── */
/* Die Vertriebler- und Admin-Seiten benutzen vier Klassen, die es in `crm/`
   laengst gibt, in `vertrieb/` aber nie gebraucht wurden. Sie stehen hier
   ZEICHENGLEICH zum CRM — wer sie dort anfasst, zieht sie hier nach. */
.flash--warn{background:#fdf1dc;border-color:#c9a227;color:#8a6420}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--muted);font-weight:600;margin:0}
.check input{width:auto}
.legend{color:var(--muted);font-size:.82rem;margin-top:10px}

/* Kleiner Knopf fuer Listenzeilen. Zwischen `.btn` und `.btn--mini`: die
   Aktionen in den Terminlisten („Absagen", „Wahrgenommen") muessen auf dem
   Handy noch treffbar sein, duerfen aber nicht wie eine Hauptaktion wirken. */
.btn--sm{padding:7px 14px;font-size:.84rem;border-radius:10px;box-shadow:none}
.btn--sm:hover{transform:none;box-shadow:none}

/* Rueckfrage-Seite (views/confirm.php) — der Ersatz fuer das `confirm()`,
   das die CSP verbietet. */
.confirm-lines{color:var(--muted);font-size:.95rem;border-left:3px solid var(--card-border);
  padding-left:14px;margin:10px 0 0}