/* ArtistDesk Künstler-Frontend (Anmeldung, Übersicht, Vertrag, Profil, Umfragen) – ergänzt app.css */
/* Richtung «Backstage-Pass»: breite Archivo-Titel, Inter für Inhalt, flache Listen mit Datums-Marken wie Ticket-Abrisse,
   genau ein auffälliges Element pro Ansicht (nächster Auftritt), Violett aus dem Logo nur sparsam. Vertragsblatt (.sheet) bleibt unverändert. */

/* ---------- Farben: hell = kühles helles Grau, dunkel = Club bei Nacht ---------- */
:root{
  --bg:#eceef2; --surface:#f8f9fb; --surface-2:#f3f4f7; --field:#ffffff; --sunk:#e2e5ea; --hover:#e4e7ec;
  --fg:#121219; --fg-2:#33343f; --muted:#5d606d; --placeholder:#757887;
  --line:#d6d9e0; --line-strong:#8b8e9b;
  --accent:#5b45e6; --accent-hover:#4b37d3; --accent-ink:#4630cf; --accent-soft:#e6e2fd; --accent-line:#c9c1fa;
  --btn:var(--accent); --btn-fg:#fff;
  --ticket:#16131f; --ticket-fg:#f5f4fa; --ticket-muted:#a9a5bb; --ticket-line:#363145;
}
html[data-theme="dark"]{
  --bg:#09080d; --surface:#121019; --surface-2:#15131d; --field:#17151f; --sunk:#1d1a27; --hover:#1c1926;
  --fg:#efedf6; --fg-2:#d2cfdd; --muted:#a19dae; --placeholder:#878394;
  --line:#2e2a3a; --line-strong:#6f6b7e;
  --accent:#8a78ff; --accent-hover:#9d8eff; --accent-ink:#b9aeff; --accent-soft:#1f1a3a; --accent-line:#3a3170;
  --ticket:#16131f; --ticket-fg:#f5f4fa; --ticket-muted:#a9a5bb; --ticket-line:#3a3450;
}
body{background:var(--bg)}
.wrap{max-width:1080px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---------- Kopfzeile: ruhig, ohne Trennlinie ---------- */
header.top{border-bottom:0;padding-block:var(--s5) var(--s2)}
footer{border-top-color:var(--line)!important}

/* ---------- Typografie ---------- */
#app h1:not(.sheet *),.legal h1,.authside h2{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;letter-spacing:-.012em}
#app h2:not(.sheet *),.legal h2{font-family:var(--display);font-stretch:112%;font-weight:700;letter-spacing:-.005em}
#app>h1:not(:first-child),#app>.ahead+h1{font-size:clamp(20px,5.4vw,24px);margin-top:var(--s6)}
.legal h1{font-size:clamp(28px,7vw,40px)}

/* ---------- Buttons: Primär einfarbig Violett statt Verlauf ---------- */
.btn{border-radius:var(--r-md);box-shadow:none;background:var(--field);border-color:var(--line)}
.btn:hover{background:var(--hover);border-color:var(--line-strong)}
.btn.primary,.btn.primary:disabled{background:var(--accent);color:#fff;border-color:transparent;box-shadow:none}
.btn.primary:hover{background:var(--accent-hover)}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn.primary:disabled{background:#6c57f2;box-shadow:none}
html[data-theme="dark"] .btn.primary:hover{background:#7d6af7}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--hover)}
@media (hover:none){.btn.ghost{border-color:transparent}}
.linkbtn{color:var(--accent-ink)}

/* ---------- Formulare & Panels: flach, ohne grauen Schatten ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none}
input,select,textarea{border-color:var(--line-strong);box-shadow:none;border-radius:10px}
input:not([type=checkbox],[type=radio]),select{min-height:46px}
label.f{color:var(--fg-2)}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;color:var(--fg)}
.note.warnnote{border-left-color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}

/* Vertragsblatt/Rider: Überschriften behalten Papierfarbe (sonst im dunklen Modus hell auf weiss) */
.sheet :is(h2,h3,h4){color:var(--paper-ink)}

/* ---------- Begrüssung ---------- */
.bshero{align-items:flex-end;gap:var(--s4);margin-top:var(--s2)}
.bshero .welcome{margin:0;font-family:var(--display);font-stretch:var(--display-stretch);font-size:clamp(30px,8.6vw,52px);line-height:1.02;font-weight:500;letter-spacing:-.02em;color:var(--muted)}
.bshero .welcome strong{display:block;font-weight:800;color:var(--fg)}
.bs-sub{margin:var(--s3) 0 0;font-size:var(--fs-base);color:var(--muted)}
.bs-acts{gap:var(--s2)}
.bs-acts .btn{min-height:40px}
@media (max-width:600px){.bshero{flex-direction:column;align-items:stretch}.bs-acts{order:-1;justify-content:flex-end;margin-bottom:calc(-1 * var(--s2))}.bs-acts .btn{min-height:36px;padding:0 var(--s3);font-size:var(--fs-sm)}}

/* ---------- Nächster Auftritt: das eine auffällige Element (Ticket) ---------- */
.nextgig{
  /* Ticketfarben lokal: auch im hellen Modus dunkel wie ein Backstage-Pass */
  --fg:var(--ticket-fg); --fg-2:#dedbe8; --muted:var(--ticket-muted); --line:var(--ticket-line); --field:#221e2d; --hover:#2a2537; --line-strong:#5e5873;
  --warn:#f2c56b; --warn-soft:#35290f; --warn-line:#5c4a1f; --good:#86d9a4; --good-soft:#12301f; --good-line:#245238;
  --info:#9cbcff; --info-soft:#14264a; --info-line:#24406f; --accent-ink:#c3b9ff; --accent-soft:#272046; --accent-line:#463b86;
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden;
  background:var(--ticket);color:var(--fg);border-radius:20px;margin-top:var(--s2)
}
html[data-theme="dark"] .nextgig{box-shadow:0 0 0 1px #2c2640,0 40px 90px -50px rgba(138,120,255,.55)}
.ng-stub{position:relative;display:grid;place-items:center;padding:var(--s6) var(--s5);border-right:2px dashed var(--line)}
.ng-stub::before,.ng-stub::after{content:"";position:absolute;right:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.ng-stub::before{top:-11px}.ng-stub::after{bottom:-11px}
.nextgig .dbadge{width:92px;min-height:104px;border-radius:14px;background:var(--accent);color:#fff;box-shadow:none}
html[data-theme="dark"] .nextgig .dbadge{background:#6c57f2}
.nextgig .dbadge i{font-size:13px;opacity:.85}
.nextgig .dbadge b{font-size:46px;margin:4px 0 3px}
.nextgig .dbadge span{font-size:14px}
.ng-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6) var(--s6) var(--s5);min-width:0}
.ng-kicker{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.ng-kicker b{color:var(--accent-ink);font-weight:600}
.ng-title{margin:0;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:clamp(26px,6.4vw,40px);line-height:1.05;letter-spacing:-.015em;overflow-wrap:anywhere}
.ng-meta{margin:0;display:flex;flex-wrap:wrap;gap:2px var(--s5);color:var(--fg-2);font-size:var(--fs-base)}
.ng-meta span{display:inline-flex;align-items:center;gap:8px}
.ng-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.ng-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.ng-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-width:0;color:var(--muted)}
.ng-foot .btn{min-height:48px;padding:0 var(--s6);font-size:var(--fs-base)}
.ng-foot .btn:not(.primary){background:var(--field);color:var(--fg);border-color:var(--line-strong)}
@media (max-width:640px){
  .nextgig{grid-template-areas:"stub kick" "stub title" "meta meta" "foot foot";border-radius:18px}
  .ng-body{display:contents}
  .ng-stub{grid-area:stub;padding:var(--s4) var(--s3) var(--s4) var(--s4);border-right:0;place-items:start}
  .ng-stub::before,.ng-stub::after{display:none}
  .nextgig .dbadge{width:76px;min-height:86px}.nextgig .dbadge b{font-size:38px}
  .ng-kicker{grid-area:kick;padding:var(--s4) var(--s4) 0 var(--s1);align-self:end}
  .ng-title{grid-area:title;padding:2px var(--s4) var(--s4) var(--s1);font-size:clamp(24px,7.4vw,30px);align-self:start}
  .ng-meta{grid-area:meta;position:relative;flex-direction:column;gap:2px;padding:var(--s4) var(--s4) 0;border-top:2px dashed var(--line)}
  .ng-meta::before,.ng-meta::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
  .ng-meta::before{left:-11px}.ng-meta::after{right:-11px}
  .ng-foot{grid-area:foot;margin:var(--s3) var(--s4) var(--s4);flex-direction:column;align-items:stretch}
  .ng-foot .btn{width:100%}
}

/* ---------- Listen: flach, bündige Spalten, Datums-Marke wie Ticket-Abriss ---------- */
.bslist{border-top:1.5px solid var(--fg)}
.bslist>.list{margin:0}
.list.aligned .item.bsrow{display:grid;grid-template-columns:56px minmax(0,1fr) 170px 150px 196px;grid-template-areas:"b t w s a";column-gap:var(--s4);row-gap:var(--s1);align-items:center;padding:var(--s3) var(--s2) var(--s3) var(--s4);border-top:1px solid var(--line);border-radius:0;background:transparent;position:relative}
.list.aligned .item.bsrow:first-child{border-top:0}
.bsrow>.dbadge{grid-area:b}
.bsrow>.c-t{grid-area:t;min-width:0}
.bsrow>.when{grid-area:w;font-size:var(--fs-md)}
.bsrow>.c-s{grid-area:s}
.bsrow>.c-a{grid-area:a;justify-self:end}
.list.aligned .item.bsrow>.when,.list.aligned .item.bsrow>.c-s{justify-self:start}
.list.aligned .item.bsrow>.c-a{justify-self:end}
.bsrow .c-t strong,.bsrow .polltitle{display:block;font-size:var(--fs-lg);font-weight:650;letter-spacing:-.01em;color:var(--fg);overflow-wrap:anywhere}
.bsrow .polltitle{text-decoration:none;min-height:0;text-align:left}
.bsrow .polltitle:hover{text-decoration:underline;text-decoration-thickness:1px}
.bsrow .c-t .small{margin-top:2px}
.bsrow .when .small{font-size:var(--fs-sm)}
@media (hover:hover){.list .item.bsrow:hover{background:color-mix(in srgb,var(--fg) 3.5%,transparent)}}
/* Datums-Marke in Listen: neutral, Akzent nur bei offenen Aufgaben */
.bsrow .dbadge{width:52px;min-height:58px;background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px}
.bsrow .dbadge i,.bsrow .dbadge span{color:var(--muted);opacity:1}
.bsrow .dbadge.past{background:transparent;color:var(--muted)}
.bsrow .dbadge.open{background:transparent;color:var(--muted);box-shadow:none;border:1.5px dashed var(--line-strong)}
.bsrow.is-todo .dbadge{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.bsrow.is-todo .dbadge i,.bsrow.is-todo .dbadge span{color:var(--accent-ink)}
/* Aufgaben ruhig hervorheben: feiner Balken links, Knopf in Akzent-Tönung statt laut */
.bsrow.is-todo::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--accent)}
.bsrow .btn{min-height:40px;min-width:120px}
.bsrow .btn.primary,html[data-theme="dark"] .bsrow .btn.primary{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line)}
.bsrow .btn.primary:hover,html[data-theme="dark"] .bsrow .btn.primary:hover{background:color-mix(in srgb,var(--accent) 18%,var(--accent-soft))}
.bslist.todo{border-top-color:var(--accent)}
.bsempty{padding:var(--s6) 0;margin:0;color:var(--muted)}
.list>p.bsempty:only-child{text-align:left;padding:var(--s5) 0!important}
.list>p.bsempty:only-child::before{display:none}
@media (max-width:899px){
  .list.aligned .item.bsrow{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"b t a" "b w s";column-gap:var(--s3);padding:var(--s4) 0 var(--s4) var(--s3);align-items:start}
  .list.aligned .item.bsrow.is-todo{grid-template-areas:"b t t" "b w s" "b a a"}
  .bsrow>.when{align-self:center;color:var(--fg-2)}
  .list.aligned .item.bsrow>.c-s{align-self:center;justify-self:end}
  .bsrow>.c-a{justify-self:end;align-self:start}
  .bsrow .btn{min-width:0;min-height:36px;padding:0 var(--s3);font-size:var(--fs-sm)}
  .list.aligned .item.bsrow.is-todo>.c-a{justify-self:stretch;margin-top:var(--s2)}
  .bsrow.is-todo .btn{width:100%;min-height:46px;font-size:var(--fs-base)}
  .bsrow.is-todo::before{top:18px;bottom:18px}
  .bsrow .c-t strong,.bsrow .polltitle{font-size:var(--fs-base)}
}
@media (max-width:420px){.bsrow .pill{font-size:12px}}

/* Vergangene Auftritte: zurückhaltend aufklappbar */
.bspast{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s2)}
.bspast>summary{display:flex;align-items:center;gap:var(--s2);min-height:48px;cursor:pointer;list-style:none;color:var(--fg-2)}
.bspast>summary::-webkit-details-marker{display:none}
.bspast>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 6px 0 2px;transition:transform .15s var(--ease)}
.bspast[open]>summary::before{transform:rotate(45deg)}
.bspast>summary b{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:var(--fs-lg)}
.bspast .bslist{border-top:1px solid var(--line)}
.bsempty{padding-left:var(--s4)!important}

/* ---------- Vertragsansicht ---------- */
.bsphead{align-items:center;flex-wrap:nowrap;gap:var(--s4)}
.bsphead>.dbadge{width:60px;min-height:66px;background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.bsphead>.dbadge.open,.bsphead>.dbadge.past{color:var(--muted)}
.bsph-t{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-width:0;flex:1}
.bsph-t h1{margin:0;font-size:clamp(26px,6.6vw,40px);line-height:1.05}
.bsph-r{margin-left:auto}
@media (max-width:640px){.bsphead{flex-wrap:wrap}.bsph-t{flex-direction:column;align-items:flex-start}.bsph-r{width:100%;margin-left:0}}
.crumbs .btn{color:var(--muted)}
/* Ablauf als schlanke Fortschrittsleiste */
.stepper{gap:var(--s2)}
.stepper li{background:transparent;border-radius:0;padding:var(--s2) 0 0;border-top:3px solid var(--line);color:var(--muted);box-shadow:none!important}
.stepper li.done{background:transparent;border-top-color:var(--good);color:var(--fg-2)}
.stepper li.cur{background:transparent;border-top-color:var(--accent);color:var(--fg);font-weight:600}
.stepper .dot{width:20px;height:20px;flex-basis:20px;font-size:11px;background:transparent}
@media (max-width:640px){.stepper{display:flex}.stepper li{flex:0 0 52px;justify-content:flex-start;padding:6px 0 0}.stepper li.cur{flex:1 1 auto;min-width:0}.stepper li:not(.cur) .lbl{display:none}.stepper li.cur .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Unterschreiben: grosses Feld mit Unterschriftslinie */
#sigwrap h2{font-size:var(--fs-2xl)}
.sigpad{height:190px;border:1.5px dashed var(--line-strong);border-radius:14px;background:linear-gradient(var(--paper-line),var(--paper-line)) no-repeat 22px calc(100% - 44px)/calc(100% - 44px) 1.5px,var(--paper)}
@media (max-width:640px){.sigpad{height:220px}}
.padtools .btn{color:var(--accent-ink)}
#sigwrap .check{padding:var(--s3);border:1px solid var(--line);border-radius:12px;background:var(--field)}
#sigwrap .check:has(input:checked){border-color:var(--accent-line);background:var(--accent-soft)}
.signbtn{min-height:54px!important;font-size:var(--fs-lg)!important}
.mobsign .btn,html[data-theme="dark"] .mobsign .btn{border-radius:14px;background:var(--ticket);color:var(--ticket-fg);box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
html[data-theme="dark"] .mobsign .btn{box-shadow:0 0 0 1px #3a3450,0 12px 30px -10px #000}
dl.kv dt{color:var(--muted)}

/* ---------- Umfrage: Termine als grosse Tap-Flächen ---------- */
label.check.pcheck{padding:var(--s3) var(--s4);min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--field);cursor:pointer;transition:border-color .12s var(--ease),background-color .12s var(--ease)}
label.check.pcheck:first-of-type{border-top:1px solid var(--line)}
label.check.pcheck:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
label.check.pcheck:has(input:disabled){cursor:default}
ul.plain{padding-left:0;list-style:none;gap:var(--s2)}
ul.plain>li{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:12px;background:var(--field)}

/* ---------- Anmeldung ---------- */
.authgrid{gap:var(--s5)}
.authside{display:block}
.authside .perks,.authside>p.small{display:none}
.eyebrow{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-ink);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2)}
.authside h2{font-size:clamp(30px,8.4vw,52px);line-height:1.02;margin:0}
.panel.login{max-width:440px;padding:var(--s6);box-shadow:none;border-radius:18px;margin-block:var(--s4)}
.login h1{font-size:clamp(26px,6.6vw,32px)}
.login .btn.primary{width:100%;min-height:50px;font-size:var(--fs-base)}
.login input:not([type=checkbox]){min-height:50px}
@media (max-width:640px){.authgrid{margin-top:var(--s4)}.authgrid .panel.login{margin:0;padding:var(--s5)}}
@media (min-width:900px){
  .authgrid{grid-template-columns:minmax(0,1fr) 420px;gap:var(--s10);max-width:none;margin:var(--s6) 0;align-items:stretch}
  .authside{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s8);padding:var(--s10);border-radius:24px;background:var(--ticket);color:var(--ticket-fg);
    --fg:var(--ticket-fg); --muted:var(--ticket-muted); --accent-ink:#c3b9ff; --line:var(--ticket-line)}
  .authside h2{color:var(--fg);font-size:clamp(38px,4.2vw,54px)}
  .authside .perks{display:grid;counter-reset:pk;gap:0;margin:0;border-top:1px solid var(--line)}
  .authside .perks li{counter-increment:pk;grid-template-columns:52px 1fr;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
  .authside .perks li::before{content:counter(pk,decimal-leading-zero);width:auto;height:auto;background:none;border-radius:0;display:block;color:var(--accent-ink);font:800 15px/1.6 var(--display);font-stretch:var(--display-stretch)}
  .authside .perks b{color:var(--fg)}
  .authside .perks span{color:var(--muted)}
  .authside>p.small{display:block;margin:0}
  .authgrid .panel.login{align-self:center}
  html[data-theme="dark"] .authside{box-shadow:0 0 0 1px #2c2640}
}

/* ---------- Profil ---------- */
.foto img{border-radius:12px}

/* ---------- Weitergeleiteter Rider (r/) und Rechtstexte ---------- */
html[data-role="share"] #app>.row.between h1{font-size:clamp(24px,6vw,36px)}
.legal{gap:var(--s3)}
.legal h2{font-size:var(--fs-xl)}
@media (min-width:641px) and (max-width:899px){
  .list.aligned .item.bsrow.is-todo{grid-template-areas:"b t a" "b w s"}
  .list.aligned .item.bsrow.is-todo>.c-a{justify-self:end;margin-top:0}
  .bsrow.is-todo .btn{width:auto;min-height:40px;font-size:var(--fs-sm)}
}

/* ===== Prüfung 10 Agenten: Künstler-Frontend ===== */
@media (min-width:900px){#app .list.aligned .item.bsrow>.c-s{justify-self:start}}
@media (max-width:600px){header.top{align-items:center}.hright{flex-wrap:nowrap;gap:8px}.hlogos{flex-basis:auto;gap:8px}.hlogos .logo{height:22px}}
@media (max-width:899px){
  .list.aligned .item.bsrow{grid-template-areas:"b t t" "b w w" "b s a";row-gap:6px}
  .list.aligned .item.bsrow>.c-s{justify-self:start;align-self:center}
  .list.aligned .item.bsrow>.c-a{align-self:center}
  .list.aligned .item.bsrow.is-todo{grid-template-areas:"b t t" "b w w" "b a a"}
  .bsrow.is-todo>.c-s{display:none}
  .bsrow.is-todo .btn{min-height:44px}
}
@media (min-width:641px) and (max-width:899px){
  .list.aligned .item.bsrow.is-todo{grid-template-areas:"b t t" "b w w" "b s a"}
  .bsrow.is-todo>.c-s{display:block}
}
#sigwrap>dl.kv{padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
#sigwrap>dl.kv+h2{margin-top:var(--s2)}
.padbox>.sigpad{order:0}
.padbox>.padtools{order:1;justify-content:flex-start;margin:calc(-1 * var(--s2)) 0 0 calc(-1 * var(--s2))}
.padbox>:not(.sigpad,.padtools){order:2}
@media (min-width:901px) and (min-height:760px){.detail>#sigwrap{position:sticky;top:var(--s4)}}
.ainv details>summary{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer;list-style:none;color:var(--fg-2);font-weight:600;border-top:1px solid var(--line);padding-top:var(--s2)}
.ainv details>summary::-webkit-details-marker{display:none}
.ainv details>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s var(--ease)}
.ainv details[open]>summary::before{transform:rotate(45deg)}
@media (max-width:640px){.row:has(>[data-act="aconfirm"])>.btn,.row:has(>[data-act="apsubmit"])>.btn{flex:1 1 100%;min-height:48px}}
#app>.panel:has(.pchoice){max-width:720px}
label.check.pcheck{gap:var(--s3)}
.pcheck .dbadge{width:44px;min-height:48px;background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.pcheck .dbadge b{font-size:19px}
.pcheck .dbadge i,.pcheck .dbadge span{color:var(--muted);opacity:1}
.pcheck:has(input:checked) .dbadge{background:var(--accent);color:#fff;box-shadow:none}
.pcheck:has(input:checked) .dbadge :is(i,span){color:#fff}
.pcheck>span:last-child{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.pcheck>span:last-child .small{color:var(--muted)}
@media (min-width:700px){.grid2:has(>label.f>#a-iban){grid-template-columns:repeat(3,minmax(0,1fr))}}
.panel input[type=file]{border:1.5px dashed var(--line-strong);background:var(--surface-2);min-height:60px;padding:10px;cursor:pointer}
.panel input[type=file]:hover{border-color:var(--accent);background:var(--accent-soft)}
.panel input[type=file]::file-selector-button{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line);min-height:38px}
.row:has(>[data-act="psave"]){padding-top:var(--s2)}
.row:has(>[data-act="psave"])>[data-act="askdel"]{margin-left:auto;color:var(--muted)}
.row:has(>[data-act="psave"])>[data-act="askdel"]:hover{color:var(--bad)}
/* r/ Rider-Link, Impressum, Datenschutz */
html[data-role="share"] #app>.row.between{flex-wrap:nowrap;align-items:flex-start;gap:var(--s3) var(--s6)}
html[data-role="share"] #app>.row.between h1{flex:1;min-width:0;margin:0;font-size:clamp(22px,4.2vw,32px);line-height:1.1;text-wrap:balance}
html[data-role="share"] #dl{flex:none;margin-top:2px}
html[data-role="share"] #app>.row.between+p{margin:calc(-1 * var(--s2)) 0 0}
html[data-role="share"] #sheet{max-width:860px}
@media (max-width:600px){html[data-role="share"] #app>.row.between{flex-direction:column;align-items:stretch}html[data-role="share"] #dl{width:100%;min-height:46px}}
main.legal>h1{margin:var(--s4) 0 0}
main.legal h2{margin:var(--s6) 0 0}
main.legal ul{margin:0;padding-left:1.2em;display:grid;gap:var(--s2)}
main.legal>p.small.muted:last-child{margin-top:var(--s6)!important;padding-top:var(--s3);border-top:1px solid var(--line)}
main.legal>p.small.muted:last-child a{color:inherit}

/* Feste Kopfzeile im Frontend: bleibt beim Scrollen oben stehen; andere klebende Elemente rücken darunter */
header.top{position:sticky;top:0;z-index:60;background:var(--bg);box-shadow:0 1px 0 var(--line),0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax -1px)}
html{scroll-padding-top:calc(var(--hdr-h,72px) + 12px)}
@media (min-width:601px){.tabs{top:var(--hdr-h,72px)}}
@media (min-width:901px){.detail>:last-child{top:calc(var(--hdr-h,72px) + var(--s4));max-height:calc(100vh - var(--hdr-h,72px) - 32px)}}
@media (min-width:901px) and (min-height:760px){.detail>#sigwrap{top:calc(var(--hdr-h,72px) + var(--s4))}}
@media print{header.top{position:static;box-shadow:none;clip-path:none}}

/* Audit 2026-10-11 · UX7-cssf */
.cal td button.today:not(.end){font-weight:700;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* Audit 2026-10-11 · UX18-F */
@media (max-width:899px){
  .authside .eyebrow{display:none}
  .authside h2{font-size:clamp(26px,7vw,34px)}
}

/* Audit 2026-10-11 · UX19-css */
/* Status-Badge in Listen einheitlich links (überschreibt .item.arow>div:nth-child(4) aus app.css) */
@media (min-width:641px){#app .list.aligned .item.bsrow>.c-s{justify-self:start}}

/* Audit 2026-10-11 · UX20-css */
/* Audit: mobiler Signierknopf weicht, sobald das Signaturfeld sichtbar ist */
.mobsign{transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
.mobsign.is-off{opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.mobsign,.mobsign.is-off{transition:none}}
/* Audit: unterschriebener Vertrag – PDF-Aktion mobil zuerst */
@media (max-width:900px){.detail>#sigwrap:has([data-act="kpdf"]){order:-1}}
/* Audit: Stepper-Beschriftungen mobil nur optisch verstecken, «Abgeschlossen» zeigen */
@media (max-width:640px){
  .stepper li:not(.cur) .lbl{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stepper li.done:last-child{flex:1 1 auto;min-width:0}
  .stepper li.done:last-child .lbl{position:static;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis}
}

/* Audit 2026-10-11 · UX21-css */
/* Profil: Musikstil volle Breite über «Technische Anforderungen» (Geburtsdatum rückt neben IBAN) */
.grid2:has(>label.f>#a-iban)>label.f:has(>#a-type){grid-column:1/-1}

/* Audit 2026-10-11 · UX22-css */
/* Meine Rider: ganze Zeile anklickbar (Klickfläche des Knopfs über die Zeile) */
.riderrow{cursor:pointer}
.riderrow .c-a .btn::after{content:"";position:absolute;inset:0}
.riderrow .c-a .btn:active{transform:none}

/* Audit 2026-10-11 · UX23-css */
/* Geteilter Rider: Kopfzeile auf Blattbreite, Herkunftszeile direkt unter dem Titel */
html[data-role="share"] #app{max-width:860px;width:100%}
html[data-role="share"] .shead{flex:1;min-width:0}
html[data-role="share"] .shead p{margin:var(--s2) 0 0}
/* Footer: Links als Gruppe, Trennpunkt nur, wenn alles auf einer Zeile steht */
footer .flinks::before{content:" · "}
@media (max-width:600px){footer .flinks{display:block}footer .flinks::before{content:none}}

/* Audit 2026-10-11 · UX25-css */
/* ===== Mobile-UX: Touch-Ziele, Lesbarkeit, Kopfzeile im Querformat ===== */
@media (pointer:coarse){
  .btn.sm.themebtn{min-height:44px;min-width:44px;margin-block:-6px}
  .crumbs .btn{min-height:44px}
  .bs-acts .btn,.bsrow .btn{min-height:44px}
  .padtools .btn{min-height:44px}
  .padbox>.padtools{gap:var(--s5)}
}
@media (max-width:640px){
  .bsrow :is(.c-t,.when) .small{font-size:var(--fs-md)}
}
@media (max-height:500px) and (orientation:landscape){
  header.top{position:static;box-shadow:none;clip-path:none}
  html{scroll-padding-top:12px}
  .tabs{top:0}
  .detail>:last-child{top:var(--s4)}
}

/* Audit 2026-10-11 · UX27-cssf */
/* A11y: Fokus ≥3:1, Platzhalter ≥4.5:1, Weiss auf Violett im Dunkelmodus */
:root{--placeholder:#6b6f7d}
:root,html[data-theme="dark"]{--focus:color-mix(in srgb,var(--accent) 80%,transparent)}
html[data-theme="dark"] .pcheck:has(input:checked) .dbadge,html[data-theme="dark"] .stepper li.cur .dot{background:#6c57f2;border-color:#6c57f2}