/* Layout: Handy-App in einer Spalte. Vier Tabs (Aufträge, Erstellen, Meine Jobs, Profil). Liste/Karte umschaltbar, grüne Empfehlungskarte, runde Karten, Sterne in Gold. */
/* Drei Farbmodi (Einstellungen → Aussehen): Blau ist der Standard, dazu Weiß und Dunkelrot-Lila. */
:root{
  --bg:#0C1226; --surface:#151D38; --fg:#E8ECFA; --muted:#9AA5C8; --line:#27315B;
  --accent:#8197FF; --accent-fg:#0B1230; --accent-soft:#1F2952;
  --money:#6FD890; --hero:#1B5A2E; --hero-fg:#FFFFFF; --star:#FFBE3D;
  --map-bg:#0F1A3A; --map-land:#1A2548; --map-line:#35447C; --map-text:#8E9BC6;
  --warn-bg:#3A2E10; --warn-fg:#FFDE9A; --ok-bg:#17352A; --ok:#7FD8A0;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --font-display:"Familjen Grotesk",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  color-scheme:dark;
}
:root[data-theme="weiss"]{
  --bg:#F5F4FA; --surface:#FFFFFF; --fg:#1B1530; --muted:#5F5A75; --line:#E6E3F0;
  --accent:#6D28D9; --accent-fg:#FFFFFF; --accent-soft:#EFE9FD;
  --money:#16803B; --hero:#1E6B34; --hero-fg:#FFFFFF; --star:#E09200;
  --map-bg:#E9E4F8; --map-land:#FCFBFF; --map-line:#C9BFEA; --map-text:#7A7196;
  --warn-bg:#FFF1D6; --warn-fg:#6A4A00; --ok-bg:#DDF2E5; --ok:#1E7A46;
  --shadow:0 6px 24px rgba(27,21,48,.08);
  color-scheme:light;
}
:root[data-theme="rot"]{
  --bg:#2A0716; --surface:#3B0C23; --fg:#FCEBF3; --muted:#D9AAC2; --line:#5C1837;
  --accent:#C084FC; --accent-fg:#2A0716; --accent-soft:#4B1442;
  --money:#7EE0A0; --hero:#9D1747; --hero-fg:#FFFFFF; --star:#FFC24D;
  --map-bg:#2E0A1C; --map-land:#43122E; --map-line:#6E2455; --map-text:#C597B3;
  --warn-bg:#3D2410; --warn-fg:#FFD9A0; --ok-bg:#1F2E25; --ok:#8FE3A8;
  --shadow:0 6px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
button,select,label,.pin{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
body{
  background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:15px; line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:14px 120px;
}
.app{max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.stack{display:flex; flex-direction:column; gap:16px}
h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance; line-height:1.15}
button,input,select,textarea{font:inherit; color:inherit}
input,select,textarea{font-size:16px}
@media (max-width:420px){.row{grid-template-columns:1fr}}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
svg.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

.top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{font-family:var(--font-display); font-weight:700; font-size:1.55rem; letter-spacing:-.02em; color:var(--accent); background:none; border:0; padding:0; line-height:1.1; cursor:pointer; transition:transform .12s ease}
.brand:active{transform:scale(.94)}
.brandbox{display:flex; flex-direction:column; min-width:0}
.tagline{font-size:.66rem; letter-spacing:.03em; color:var(--muted); line-height:1.3}
.tagline>span{white-space:nowrap; display:inline-block; margin-right:4px}
.tagline b{color:var(--accent); font-weight:700}
.tag{font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.title{font-size:1.65rem; letter-spacing:-.02em}
.lead{margin:0; color:var(--muted)}

.bar{display:flex; gap:10px; align-items:center}
.seg{display:flex; flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px}
.seg button{flex:1; border:0; background:none; border-radius:10px; padding:9px 8px; font-weight:600; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg)}
.filterbtn{display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 14px; font-weight:600; cursor:pointer}
.filterbtn[aria-expanded="true"]{border-color:var(--accent); color:var(--accent)}

.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.chip{flex:none; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; cursor:pointer; font-weight:600; color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.chip svg.ic{width:16px; height:16px}
.chips.wrap{flex-wrap:wrap; overflow:visible}
.chips.wrap .chip{white-space:normal; text-align:left; flex:0 1 auto; max-width:100%}
.chip.static{cursor:default; background:var(--accent-soft); color:var(--accent); border-color:transparent; padding:6px 12px; font-size:.85rem}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label,.lab{font-size:.78rem; font-weight:600; color:var(--muted)}
.field select,.field input,.field textarea{
  width:100%; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 12px;
}
.field textarea{min-height:92px; resize:vertical}
.count{font-size:.85rem; color:var(--muted); font-weight:600}

.sec{font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin:4px 0 -4px}
.list{display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none}

.feat{
  width:100%; text-align:left; background:var(--hero); color:var(--hero-fg); border:0; border-radius:22px; padding:16px; cursor:pointer;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow);
}
.feat .top2{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); border-radius:10px; padding:6px 10px; font-weight:600; font-size:.85rem}
.feat .when{font-size:.85rem; opacity:.9}
.feat h3{font-size:1.45rem; letter-spacing:-.01em}
.feat .bottom{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.feat .earn small{display:block; font-size:.72rem; opacity:.85}
.feat .earn b{font-family:var(--font-display); font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums}
.feat .go{background:#fff; color:#14301D; border-radius:12px; padding:10px 16px; font-weight:700}

.job{
  display:flex; flex-direction:column; gap:10px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px; cursor:pointer; box-shadow:var(--shadow);
}
.job:hover{border-color:var(--accent)}
.top2{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cat{display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); border-radius:10px; padding:6px 10px; font-weight:700; font-size:.82rem}
.dist{display:inline-flex; align-items:center; gap:4px; font-size:.82rem; color:var(--muted); font-weight:600}
.dist svg.ic{width:15px; height:15px}
.job h3{font-size:1.15rem; letter-spacing:-.01em}
.meta{display:flex; flex-wrap:wrap; gap:2px 12px; font-size:.84rem; color:var(--muted)}
.job .bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badges{display:flex; flex-wrap:wrap; gap:6px}
.badge{font-size:.72rem; font-weight:700; border-radius:8px; padding:3px 8px; background:var(--bg); color:var(--muted)}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.earn2{text-align:right}
.earn2 small{display:block; font-size:.68rem; color:var(--muted)}
.earn2 b{font-family:var(--font-display); font-size:1.45rem; color:var(--money); font-variant-numeric:tabular-nums; line-height:1}
.empty{padding:20px 8px; text-align:center; color:var(--muted)}

.mapwrap{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--map-bg); box-shadow:var(--shadow)}
.map{display:block; width:100%; height:auto; touch-action:manipulation}
.map .land{fill:var(--map-land); stroke:var(--map-line); stroke-width:1.4; stroke-linejoin:round}
.map .lbl{fill:var(--map-text); font-family:var(--font-body); font-weight:600; text-anchor:middle; pointer-events:none}
.map .lbl.land-name{letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.map .pin{cursor:pointer}
.map .pin rect{fill:var(--surface); stroke:var(--accent); stroke-width:1.6}
.map .pin text{fill:var(--fg); font-family:var(--font-display); font-weight:700; text-anchor:middle; pointer-events:none}
.map .pin.sel rect{fill:var(--accent)}
.map .pin.sel text{fill:var(--accent-fg)}
.map .pin:focus-visible rect{stroke-width:3}
.map .cluster{cursor:pointer}
.map .cluster circle:nth-child(2){fill:var(--accent); stroke:var(--surface); stroke-width:2}
.map .cluster text{fill:var(--accent-fg); font-family:var(--font-display); font-weight:700; text-anchor:middle; pointer-events:none}
.map .cluster.sel circle:nth-child(2){stroke:var(--fg)}
.map .me circle{fill:var(--accent); stroke:var(--surface)}
.mapcard{min-height:92px}
.legend{font-size:.8rem; color:var(--muted); margin:0}

.back{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--accent); font-weight:700; cursor:pointer; padding:6px 0}
.dhead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.dprice{white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--money); line-height:1; font-variant-numeric:tabular-nums}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0}
.facts div{min-width:0}
.facts dt{font-size:.74rem; font-weight:600; color:var(--muted)}
.facts dd{margin:2px 0 0; font-weight:700}
.fee{font-size:.88rem; color:var(--muted); font-variant-numeric:tabular-nums; margin:0}
.note{background:var(--warn-bg); color:var(--warn-fg); border-radius:14px; padding:12px 14px; font-size:.9rem}
.note strong{display:block; margin-bottom:2px}
.btn{
  background:var(--accent); color:var(--accent-fg); border:0; border-radius:14px; padding:15px 18px; font-weight:700; cursor:pointer; width:100%; font-size:1rem;
}
.btn.green{background:var(--hero); color:#fff}
.btn.small{padding:10px 14px; width:auto; font-size:.92rem}
.btn[disabled]{background:var(--ok-bg); color:var(--ok); cursor:default}
.btn2{background:var(--accent-soft); color:var(--accent); border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; font-size:.92rem}
.hint{font-size:.84rem; color:var(--muted); margin:0}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.tile{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); border:2px solid transparent; border-radius:14px; padding:12px 6px; font-weight:700; font-size:.82rem; cursor:pointer}
.tile svg.ic{width:24px; height:24px}
.tile:last-child:nth-child(3n+1){grid-column:1/-1; flex-direction:row; justify-content:center; gap:10px; padding:12px}
.tile[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{border:0; background:var(--accent-soft); color:var(--accent); border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer}
.opt[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg)}

.loc{display:flex; flex-direction:column; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.locrow{display:flex; align-items:center; gap:12px}
.switch{position:relative; width:48px; height:28px; border-radius:999px; border:0; background:var(--line); cursor:pointer; flex:none; padding:0}
.switch .knob{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"] .knob{transform:translateX(20px)}
.loctext{display:flex; flex-direction:column; min-width:0; flex:1}
.loctext b{font-weight:700}
.loctext span{font-size:.8rem; color:var(--muted)}
.locsel{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 10px; max-width:140px; min-width:0}
/* Verwaltung, Hilfe */
.adtop{display:flex; justify-content:space-between; align-items:center; gap:10px}
.cnt{display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; background:var(--accent); color:var(--accent-fg); font-size:.72rem; font-weight:800; padding:0 5px; margin-left:6px}
.chip[aria-pressed="true"] .cnt, .seg button[aria-pressed="true"] .cnt{background:var(--accent-fg); color:var(--accent)}
.adcard{display:flex; flex-direction:column; gap:8px}
.adcard p{margin:0}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.faq summary{cursor:pointer; font-weight:700}
.faq details p, .faq details ul{margin:8px 0 0; font-size:.92rem}
.faq details ul{padding-left:18px; display:flex; flex-direction:column; gap:4px}
/* Abzeichen, Eltern */
.bdgs{display:flex; flex-direction:column; gap:8px}
.bdg{display:flex; gap:10px; align-items:center; background:var(--accent-soft); border-radius:14px; padding:10px 12px}
.bdg .bi{width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none}
.bdg .bi svg.ic{width:20px; height:20px}
.bdg small{display:block; color:var(--muted); font-size:.8rem}
.bdg.locked{background:var(--bg); border:1px dashed var(--line)}
.bdg.locked .bi{background:var(--line); color:var(--muted)}
.ptask{display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--line)}
.ptask small{display:block; color:var(--muted); font-size:.82rem}
/* Merken, Foto, Trinkgeld, Termin */
.favwrap{position:relative}
.fav{position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%; border:0; background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
.fav.on{color:#D6336C}
.favwrap .job .top2, .favwrap .feat .top2{padding-right:44px}
.phs{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ph{width:96px; height:96px; object-fit:cover; border-radius:12px; cursor:zoom-in; border:1px solid var(--line)}
.ph.big{width:100%; height:auto; max-height:420px; object-fit:contain; cursor:zoom-out}
.appt{align-self:center; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.appt.ok{background:var(--ok-bg); border-color:transparent; color:var(--ok)}
.appt .when{font-family:var(--font-display); font-size:1.15rem; font-weight:700}
.appt .row2{display:flex; gap:8px; flex-wrap:wrap}
/* Neu */
.topr{display:flex; align-items:center; gap:8px}
.bell{position:relative; padding:9px 11px; flex:none}
.belldot{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:var(--accent-fg); font-size:.7rem; font-weight:800; display:grid; place-items:center; padding:0 4px}
.linkbtn{background:none; border:0; color:var(--accent); font-weight:700; cursor:pointer; padding:8px 0; text-align:left; font:inherit; font-weight:700}
.nitem{display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer; color:var(--fg); font:inherit}
.nitem small{display:block; color:var(--muted); font-size:.78rem; margin-top:2px}
.nitem b{font-weight:600}
.nitem.unread{border-color:var(--accent)}
.nitem.unread b{font-weight:800}
.ndot{width:9px; height:9px; border-radius:50%; background:transparent; margin-top:6px; flex:none}
.nitem.unread .ndot{background:var(--accent)}
details.liab{background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:.9rem}
details.liab summary{cursor:pointer; font-weight:700}
details.liab ul{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.rulesl{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:.92rem}
.warnbox{border-color:var(--warn-fg)}
/* Zahlung */
.paybox{display:flex; flex-direction:column; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.paybox span{font-size:.88rem}
.paybox.ok{background:var(--ok-bg); border-color:transparent; color:var(--ok)}
.sumrow{display:flex; justify-content:space-between; gap:10px; font-size:.9rem; font-variant-numeric:tabular-nums}
.tx{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line)}
.tx small{display:block; color:var(--muted); font-size:.78rem}
.amt{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.bal{display:flex; flex-direction:column}.bal small{color:var(--muted)}.bal b{font-family:var(--font-display); font-size:2rem; color:var(--money); font-variant-numeric:tabular-nums}
.amt.plus{color:var(--money)}
/* Anmeldung */
.steps{display:flex; gap:6px}
.steps span{flex:1; height:6px; border-radius:3px; background:var(--line)}
.steps span.on{background:var(--accent)}
.pwrow{display:flex; gap:8px}
.pwrow input{flex:1; min-width:0}
.meter{height:8px; border-radius:4px; background:var(--line); overflow:hidden}
.meter span{display:block; height:100%; width:0; transition:width .15s}
.meter span.s1{background:#D93025}
.meter span.s2{background:var(--star)}
.meter span.s3{background:var(--money)}
.rules{display:flex; flex-direction:column; gap:2px; font-size:.85rem; color:var(--muted)}
.rules .ok{color:var(--money); font-weight:600}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem}
.check input{width:22px; height:22px; margin-top:1px; flex:none}
.crow{display:flex; gap:12px; align-items:flex-start}
.cdot{width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; font-weight:700; font-size:.85rem}
.cdot.ok{background:var(--money); border-color:var(--money); color:#fff}
.btn.off{background:var(--line); color:var(--muted)}
/* Willkommen */
.welcome{position:fixed; inset:0; z-index:30; background:var(--bg); overflow:auto; display:flex;
  padding:max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px))}
.wbox{max-width:420px; width:100%; margin:auto; display:flex; flex-direction:column; gap:26px}
.wlogo{font-family:var(--font-display); font-size:4.6rem; font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--accent)}
.wlist{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; font-family:var(--font-display); font-size:2rem; font-weight:600; letter-spacing:-.01em}
.wlist b{color:var(--accent); font-size:2.4rem; font-weight:700}
.wlead{margin:0; color:var(--muted); font-size:1.05rem}
@media (prefers-reduced-motion:no-preference){
  .wlist li{animation:rise .5s ease both}
  .wlist li:nth-child(2){animation-delay:.12s} .wlist li:nth-child(3){animation-delay:.24s} .wlist li:nth-child(4){animation-delay:.36s} .wlist li:nth-child(5){animation-delay:.48s}
  @keyframes rise{from{opacity:0; transform:translateY(8px)}}
}
/* Chat */
.msgs{display:flex; flex-direction:column; gap:8px}
.msg{max-width:84%; padding:9px 12px; border-radius:18px; font-size:.95rem; white-space:pre-wrap; overflow-wrap:anywhere}
.msg small{display:block; font-size:.68rem; opacity:.7; margin-top:2px}
.msg.me{align-self:flex-end; background:var(--accent); color:var(--accent-fg); border-bottom-right-radius:6px}
.msg.other{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px}
.sys{align-self:center; text-align:center; background:var(--accent-soft); color:var(--accent); font-size:.8rem; font-weight:600; border-radius:12px; padding:7px 12px; max-width:94%}
.typing{align-self:flex-start; font-size:.82rem; color:var(--muted); padding-left:6px}
.cform{display:flex; gap:8px; align-items:center}
.cform input{flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.lastmsg{font-style:italic}
.tabbar button{position:relative}
.tabdot{position:absolute; top:2px; left:calc(50% + 8px); min-width:18px; height:18px; border-radius:9px; background:#D93025; color:#fff; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px}
/* Personen, Sterne, Bewertungen */
.av{width:var(--s,44px); height:var(--s,44px); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:calc(var(--s,44px)*.4); object-fit:cover; flex:none}
.stars{position:relative; display:inline-block; line-height:1; letter-spacing:1px; font-size:.95rem; white-space:nowrap}
.stars .bg{color:var(--line)}
.stars .fg{position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--star)}
.person{display:flex; align-items:center; gap:10px; min-width:0}
.person .who{display:flex; flex-direction:column; gap:2px; min-width:0}
.person .nm{font-weight:700}
.person .sub{font-size:.8rem; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.linkbtn{background:none; border:0; padding:0; text-align:left; cursor:pointer; min-width:0}
.linkbtn:hover .nm{text-decoration:underline}
.phead{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.phead h2{font-size:1.5rem}
.review{border-top:1px solid var(--line); padding-top:10px; display:flex; flex-direction:column; gap:4px}
.review p{margin:0}
.review .by{font-size:.8rem; color:var(--muted)}
.status{display:inline-block; font-size:.75rem; font-weight:700; border-radius:8px; padding:3px 9px; background:var(--accent-soft); color:var(--accent)}
.status.ok{background:var(--ok-bg); color:var(--ok)}
.status.wait{background:var(--warn-bg); color:var(--warn-fg)}
.applicant{border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--bg)}
.applicant p{margin:0; font-size:.88rem; color:var(--muted)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.stars-in{display:flex; gap:2px}
.stars-in button{border:0; background:none; font-size:2.2rem; line-height:1; color:var(--line); cursor:pointer; padding:2px 4px}
.stars-in button.on{color:var(--star)}
.demo{font-size:.78rem; color:var(--muted); margin:0}
.photo-row{display:flex; align-items:center; gap:12px}
.file{position:absolute; opacity:0; width:1px; height:1px; overflow:hidden}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:4px;
  background:var(--surface); border-top:1px solid var(--line);
  padding:8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.tabbar button{
  flex:1; max-width:130px; display:flex; flex-direction:column; align-items:center; gap:2px;
  border:0; background:none; border-radius:14px; padding:8px 4px; cursor:pointer; font-weight:700; font-size:.72rem; color:var(--muted)
}
.tabbar button[aria-current="page"]{background:var(--accent-soft); color:var(--accent)}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  background:var(--fg); color:var(--bg); border-radius:14px; padding:11px 16px; font-size:.9rem; font-weight:600; max-width:calc(100% - 32px); z-index:5;
}
@media (prefers-reduced-motion:no-preference){ .toast{animation:pop .2s ease-out} @keyframes pop{from{opacity:0; transform:translate(-50%,6px)}} }

/* Ergänzungen für die echte App */
.btn[aria-busy="true"],.btn2[aria-busy="true"]{opacity:.6; cursor:progress}
.btn[aria-busy="true"]{background:var(--accent); color:var(--accent-fg)}
.btn.green[aria-busy="true"]{background:var(--hero); color:#fff}
.btn.off,.btn.off[disabled]{background:var(--line); color:var(--muted); cursor:not-allowed}
.panel.warnbox{border-color:var(--warn-fg)}

/* Rechtstexte (impressum.html, datenschutz.html, nutzungsbedingungen.html) */
.doc{padding-bottom:40px}
.doc h1{font-size:1.65rem; letter-spacing:-.02em}
.doc h2{font-size:1.15rem; margin-top:10px}
.doc p,.doc li{margin:0; font-size:.95rem}
.doc ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.doc .panel{gap:10px}
.doc a{color:var(--accent)}
mark.fill{background:var(--warn-bg); color:var(--warn-fg); border-radius:6px; padding:0 4px; font-weight:700}
.legal-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; font-size:.82rem}
.legal-links a{color:var(--muted)}

/* Bezahlen per QR-Code: immer weißer Hintergrund, damit Banking-Apps den Code lesen */
.qrwrap{display:block; background:#fff; border:0; border-radius:12px; padding:6px; align-self:center; width:min(240px, 100%); cursor:zoom-in}
.howto{margin:0; padding-left:20px; font-size:.88rem; display:grid; gap:4px}
.qr{display:block; width:100%; height:auto}
.payline{display:grid; grid-template-columns:1fr auto; gap:0 10px; align-items:center; font-size:.9rem}
.payline small{grid-column:1/-1; color:var(--muted); font-size:.74rem; font-weight:600}
.payline b{min-width:0; overflow-wrap:anywhere}
.payline .linkbtn{padding:4px 0}
.qrfull{position:fixed; inset:0; z-index:9999; background:#fff; border:0; padding:24px; display:flex; align-items:center; justify-content:center; cursor:zoom-out}
.qrfull .qr{width:min(92vw, 92vh)}

/* Meine Jobs: Ordner und kompakte Zeilen */
.jtabs{flex:none}
.jtabs button{padding:9px 4px; font-size:.88rem}
.jtabs .cnt{font-size:.78rem; opacity:.75}
.jtabs .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--warn-fg); margin-left:4px; vertical-align:middle}
details.jobrow{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden}
details.jobrow > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px}
details.jobrow > summary::-webkit-details-marker{display:none}
details.jobrow[open] > summary{border-bottom:1px solid var(--line)}
details.jobrow > .panel{border:0; border-radius:0; box-shadow:none}
.jr-main{display:flex; flex-direction:column; min-width:0}
.jr-main b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jr-main small{color:var(--muted); font-size:.8rem}
.jr-tags{display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; flex:none; max-width:55%}
details.jobrow > .panel > .dhead:first-child{display:none}

/* Mitteilungen: eine Zeile pro Auftrag */
.ng-main{display:flex; flex-direction:column; min-width:0; flex:1}
.ng-main > span{font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nitem .cnt{margin-left:auto; align-self:center}
.nitem.small{padding:9px 12px}
details.ngroup > summary{list-style:none}
details.ngroup > summary::-webkit-details-marker{display:none}

/* Aussehen wählen (Profil und Hilfe) */
.themes{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.theme{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border:2px solid var(--line); border-radius:14px; background:var(--bg); color:var(--fg); font:inherit; font-weight:600; cursor:pointer}
.theme[aria-pressed="true"]{border-color:var(--accent)}
.theme .sw{width:36px; height:36px; border-radius:50%; border:1px solid var(--line)}

/* Profil: Reiter „Profil“ und „Einstellungen“, Zeilen mit Schalter */
.setrow{display:flex; justify-content:space-between; align-items:center; gap:14px}
.setrow b{display:block}
.setrow small{display:block; color:var(--muted); font-size:.84rem; line-height:1.35; margin-top:3px}

/* Kleines Geheimspiel „Herzsprung“ (Einstellungen ganz unten) */
.game-link{align-self:center; background:none; border:0; color:var(--muted); font:inherit; font-size:.82rem; font-weight:600; opacity:.7; padding:10px 14px; cursor:pointer}
.game-ov{position:fixed; inset:0; z-index:9999; background:#FFF0F6; touch-action:none; user-select:none; -webkit-user-select:none}
.game-ov canvas{display:block; image-rendering:pixelated}
.game-x{position:absolute; top:max(12px, env(safe-area-inset-top)); left:12px; width:44px; height:44px; border-radius:4px; border:0; background:#FFF3F8; color:#C8189A; font:700 1.5rem/1 monospace; cursor:pointer; box-shadow:0 0 0 3px #C8189A, 4px 4px 0 3px rgba(90,10,50,.35)}
.game-duck{position:absolute; left:18px; bottom:max(22px, env(safe-area-inset-bottom)); width:70px; height:70px; border-radius:6px; border:0; background:#FFF3F8; color:#C8189A; font-size:1.8rem; cursor:pointer; box-shadow:0 0 0 4px #C8189A, 6px 6px 0 4px rgba(90,10,50,.35); touch-action:none}
.game-duck:active{transform:translate(3px,3px); box-shadow:0 0 0 4px #C8189A, 3px 3px 0 4px rgba(90,10,50,.35); background:#FFD6E6}

/* Willkommen: Bedeutung der Buchstaben auf Deutsch */
.wlist small{font-family:var(--font-body); font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:6px; white-space:nowrap}

/* Spenden */
.donate h3 span{color:#FF5C8A}
.donate-mini{align-self:center; background:none; border:1px dashed var(--line); border-radius:999px; color:var(--muted); font:inherit; font-size:.8rem; font-weight:600; padding:8px 14px; cursor:pointer; text-align:center; line-height:1.35}
.donate-mini span{color:#FF5C8A}

/* Bezahlung: Bar ist unsere Empfehlung */
.cashnote{display:block; background:var(--ok-bg); color:var(--ok); border-radius:12px; padding:9px 12px; font-size:.86rem}
.cashnote b{font-weight:700}

/* Chat: Termin und Textvorschläge klein in einer Zeile */
.ctools{display:flex; gap:8px; flex-wrap:wrap}
.ctool{border:0; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:7px 13px; font-size:.82rem; font-weight:600; cursor:pointer}
.ctool[aria-expanded="true"]{background:var(--accent); color:var(--accent-fg)}
.ctips{display:flex; flex-direction:column; gap:6px}
.ctip{align-self:flex-start; text-align:left; border:1px dashed var(--accent); background:transparent; color:var(--fg); border-radius:14px; padding:7px 12px; font-size:.85rem; cursor:pointer}

/* Feier, wenn ein Auftrag abgeschlossen ist */
.fx-ov{position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,8,20,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fxin .25s ease both}
.fx-ov.out{opacity:0; transition:opacity .25s}
.fx-ov canvas{position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
.fx-card{position:relative; z-index:1; width:min(340px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px 20px 18px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.45); animation:fxpop .55s cubic-bezier(.2,1.6,.4,1) both}
.fx-card h2{font-size:2rem; color:var(--accent)}
.fx-card p{margin:0}
.fx-card .fx-sub{color:var(--muted); font-size:.9rem}
.fx-card .btn{width:100%}
.fx-emoji{font-size:3rem; line-height:1; animation:fxwob 1.2s ease-in-out .4s 2}
@keyframes fxin{from{opacity:0}}
@keyframes fxpop{from{transform:scale(.6); opacity:0}}
@keyframes fxwob{25%{transform:rotate(-14deg) scale(1.15)} 75%{transform:rotate(14deg) scale(1.15)}}

/* Fotos nicht per Gedrückthalten speichern */
img{-webkit-touch-callout:none; -webkit-user-drag:none; user-select:none}

/* Wetter bei Aufträgen draußen: bewegter Hintergrund, die Karten werden leicht durchsichtig.
   Ohne Weichzeichner (backdrop-filter): Der müsste bei jedem Bild der Animation neu gerechnet werden und bremst Handys stark. */
.wx-bg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
body.wx-on .panel{background:color-mix(in srgb, var(--surface) 90%, transparent)}
.wx{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; border-radius:16px; padding:12px 14px; background:var(--accent-soft); animation:fxin .4s ease both}
.wx-ic{font-size:2rem; line-height:1; grid-row:span 2}
.wx b{display:block; font-family:var(--font-display); font-size:1.05rem}
.wx small{display:block; color:var(--muted); font-size:.82rem; line-height:1.35}
.wx-src{grid-column:2; font-size:.68rem; color:var(--muted); opacity:.8}
.wx-sun,.wx-partly{background:linear-gradient(120deg, rgba(255,190,70,.28), var(--accent-soft))}
.wx-rain,.wx-storm,.wx-drizzle,.wx-hail{background:linear-gradient(120deg, rgba(90,130,210,.3), var(--accent-soft))}
.wx-wind{background:linear-gradient(120deg, rgba(130,200,190,.25), var(--accent-soft))}
.wx-snow,.wx-sleet{background:linear-gradient(120deg, rgba(200,220,255,.3), var(--accent-soft))}

/* Logo auf der Willkommensseite */
.wlogoimg{width:min(220px, 60vw); height:auto; align-self:center; border-radius:24.5%; box-shadow:0 18px 50px rgba(0,0,0,.35); animation:fxpop .6s cubic-bezier(.2,1.4,.4,1) both}

/* Wetter-Symbol auf den Auftragskarten */
.wxs{font-weight:700; color:var(--fg); white-space:nowrap; animation:fxin .4s ease both}
.pill.wxs{color:inherit}

/* Wie alt der Auftrag ist, ganz unten auf der Karte */
.age{margin-top:8px; font-size:.75rem; color:var(--muted); text-align:left}
.feat .age{color:inherit; opacity:.8}
.age.stale{color:var(--warn-fg); font-weight:600}
.feat .age.stale{color:#FFE08A; opacity:1}

/* Kleine Geheimnisse */
.love-note{margin:-6px 0 0; text-align:center; font-size:.72rem; color:var(--muted); opacity:.45; letter-spacing:.04em; font-style:italic}
.love-note:hover{opacity:.9; color:#FF5C8A}
.w-insider{margin:4px 0 0; text-align:center; font-size:.78rem; color:var(--muted); line-height:1.45}
.w-insider b{color:var(--accent)}

/* Große Schrift: alles etwas größer, Nebentexte kräftiger */
html.big{font-size:18.5px}
html.big body{font-size:17.5px}
html.big input,html.big select,html.big textarea{font-size:18px}
html.big .hint,html.big .lead,html.big .meta,html.big .sub,html.big .dist,html.big .age,html.big .field label,html.big .lab,html.big small{color:color-mix(in srgb, var(--fg) 80%, var(--bg)); opacity:1}
html.big .tabbar button{font-size:.74rem; white-space:nowrap}
html.big svg.ic{width:23px; height:23px}
.w-insider span{color:#FF5C8A}

/* Startbildschirm bei jedem App-Start: dunkles Blau mit bunten Farbflecken wie im Logo, großes YOUIE */
.splash{position:fixed; inset:0; z-index:45; overflow:hidden; background:#0A0F4A; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; cursor:pointer; transition:opacity .45s ease; color:#fff}
.splash.out{opacity:0; pointer-events:none}
/* Die Farbflecken sind schon weiche Verläufe. Ein zusätzlicher Weichzeichner (filter:blur) auf so großen Flächen kostet beim Start viel Kraft. */
.sp-blob{position:absolute; width:62vmax; height:62vmax; border-radius:50%; opacity:.75; will-change:transform; animation:spfloat 6s ease-in-out infinite alternate}
.sp-blob.b1{top:-30vmax; left:-28vmax; background:radial-gradient(circle, #FFD23F, #FF7A2F 22%, transparent 70%)}
.sp-blob.b2{top:-32vmax; right:-30vmax; background:radial-gradient(circle, #5BE7FF, #2F7BFF 22%, transparent 70%); animation-delay:-2s}
.sp-blob.b3{bottom:-32vmax; left:-30vmax; background:radial-gradient(circle, #FF5CC8, #8B3DFF 22%, transparent 70%); animation-delay:-4s}
.sp-blob.b4{bottom:-30vmax; right:-28vmax; background:radial-gradient(circle, #6BFFB0, #19C9C0 22%, transparent 70%); animation-delay:-1s}
.sp-word{position:relative; display:flex; gap:.02em; font-family:var(--font-display); font-weight:700; font-size:min(26vw, 150px); line-height:1; letter-spacing:-.03em}
/* Die ganze Animation ist nach etwa 1,3 Sekunden fertig, dann geht es gleich los */
.sp-word span{display:inline-block; animation:sppop .5s cubic-bezier(.2,1.6,.4,1) both; text-shadow:0 10px 40px rgba(0,0,0,.35)}
.sp-word span:nth-child(2){animation-delay:.06s} .sp-word span:nth-child(3){animation-delay:.12s} .sp-word span:nth-child(4){animation-delay:.18s} .sp-word span:nth-child(5){animation-delay:.24s}
.splash .l1{color:#B4C0FF} .splash .l2{color:#FFC23F} .splash .l3{color:#3FE0B0} .splash .l4{color:#FFFFFF} .splash .l5{color:#FF8FDA}
.sp-means{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; max-width:520px; font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:rgba(255,255,255,.92)}
.sp-means span{animation:sprise .4s ease both}
.sp-means span:nth-child(1){animation-delay:.35s} .sp-means span:nth-child(2){animation-delay:.45s} .sp-means span:nth-child(3){animation-delay:.55s} .sp-means span:nth-child(4){animation-delay:.65s} .sp-means span:nth-child(5){animation-delay:.75s}
.sp-means b{font-weight:700; font-size:1.2em}
.sp-tag{position:relative; font-size:.95rem; letter-spacing:.06em; color:rgba(255,255,255,.75); animation:sprise .45s ease .85s both}
@keyframes sppop{from{transform:scale(.2) translateY(30px); opacity:0}}
@keyframes sprise{from{transform:translateY(14px); opacity:0}}
@keyframes spfloat{to{transform:translate(4vmax, 3vmax) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.splash *{animation:none!important}}

/* Übersichtlicher für alle, auch für Ältere: Beschriftung unter den Symbolen oben, Kategorien ohne Wischen, größere Leiste unten */
.topr{gap:6px}
.tbtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 8px; min-width:56px; flex:none}
.tbtn .tl{font-size:.64rem; font-weight:700; line-height:1.1; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbtn svg.ic{width:22px; height:22px}
/* Kategorien: eine Reihe zum Seitwärts-Wischen. Beim Wischen bleibt die Seite stehen und springt nicht zurück */
#chips{overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.when .wxs::before{content:' · '}
.feat .wxs{color:inherit}
.tabbar button{font-size:.78rem}
.tabbar svg.ic{width:24px; height:24px}
html.big .tbtn .tl{font-size:.58rem; max-width:80px}
html.big .tbtn{min-width:54px; padding:6px 6px}

/* Trinkgeld: klein und unaufdringlich */
.tiprow{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--muted)}
.tipbtns{display:flex; gap:6px; flex-wrap:wrap}
.tipbtn{border:1px solid var(--line); background:transparent; color:var(--fg); border-radius:999px; padding:5px 11px; font-size:.8rem; font-weight:600; cursor:pointer}
.tipbtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.paidc{white-space:nowrap}

/* Hochwertiges Gefühl: sanfte Seitenwechsel, Knöpfe geben beim Drücken nach, Platzhalter beim Laden */
section.enter{animation:viewin .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes viewin{from{opacity:0; transform:translateY(8px)}}
.btn,.btn2,.chip,.tile,.opt,.job,.feat,.tbtn,.tabbar button,.ctool,.tipbtn,.theme,.donate-mini,.switch{transition:transform .12s ease, background-color .15s ease, opacity .15s ease}
.btn:active,.btn2:active,.chip:active,.tile:active,.opt:active,.job:active,.feat:active,.tbtn:active,.tabbar button:active,.ctool:active,.tipbtn:active,.theme:active,.donate-mini:active{transform:scale(.97)}
.btn:disabled,.btn2:disabled{opacity:.6}
.skel{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:10px}
.skel span{display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--line) 25%, var(--accent-soft) 50%, var(--line) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite}
.skel span:nth-child(1){width:35%} .skel span:nth-child(2){width:80%; height:18px} .skel span:nth-child(3){width:55%}
@keyframes shimmer{to{background-position:-200% 0}}
html{scroll-behavior:auto; -webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){section.enter,.skel span{animation:none}}

/* Termin in den Kalender */
.calrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.calrow .btn2{flex:1 1 200px}
.calrow .linkbtn{font-size:.85rem; color:var(--muted); font-weight:600; padding:6px 0}

/* Startbildschirm sofort beim Laden zeigen (das kleine Skript im Kopf der Seite setzt splash-on), ohne kurzes Aufblitzen der App */
html.splash-on #splash[hidden]{display:flex!important; animation:spgone .45s 3s forwards}
@keyframes spgone{to{opacity:0; visibility:hidden; pointer-events:none}}

/* Startseite für Besucher (nicht angemeldet): erklärt YOUIE in einem Blick. Immer im YOUIE-Blau mit den Farben aus dem Logo, in jedem Farbmodus. */
.hero{position:relative; overflow:hidden; border-radius:24px; padding:28px 20px 22px; display:flex; flex-direction:column; gap:16px; color:#fff; box-shadow:var(--shadow);
  background:radial-gradient(55% 70% at 0% 0%, rgba(255,194,63,.32), transparent 70%), radial-gradient(55% 70% at 100% 0%, rgba(91,231,255,.26), transparent 70%),
    radial-gradient(65% 80% at 100% 100%, rgba(255,92,200,.24), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(107,255,176,.16), transparent 70%), #0A0F4A}
html.nohero #hero{display:none}
.hero-hide{position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer}
.hero-kicker{margin:0; padding-right:40px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.hero h1{margin:0; font-family:var(--font-display); font-size:clamp(1.85rem, 7vw, 3.2rem); line-height:1.04; letter-spacing:-.03em}
.hero h1 span{color:#FFC23F}
.hero-lead{margin:0; font-size:1rem; line-height:1.5; color:rgba(255,255,255,.88); max-width:60ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px}
.hero-cta .btn{width:auto; flex:1 1 180px; background:#FFC23F; color:#0A0F4A}
.hero-cta .btn2{flex:1 1 160px; padding:15px 18px; font-size:1rem; background:rgba(255,255,255,.14); color:#fff}
.hero-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:step}
.hero-steps li{counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:start; background:rgba(255,255,255,.08); border-radius:16px; padding:12px 14px}
.hero-steps li::before{content:counter(step); grid-row:span 2; width:30px; height:30px; border-radius:50%; background:#FFC23F; color:#0A0F4A; font-weight:800; display:flex; align-items:center; justify-content:center}
.hero-steps b{font-family:var(--font-display); font-size:1.02rem}
.hero-steps span{font-size:.86rem; line-height:1.4; color:rgba(255,255,255,.8)}
.hero-trust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.hero-trust li{font-size:.8rem; font-weight:600; background:rgba(255,255,255,.1); border-radius:999px; padding:6px 12px}
.hero-trust li::before{content:"✓ "; color:#6BFFB0; font-weight:800}

/* Am Handy kompakter, damit die Aufträge schnell zu sehen sind: Knöpfe nebeneinander, die drei Schritte nur als kurze Überschriften */
@media (max-width: 979px){
  .hero{padding:22px 16px 18px; gap:14px}
  .hero-lead{font-size:.95rem}
  .hero-cta .btn,.hero-cta .btn2{flex:1 1 120px; padding:13px 10px; font-size:.95rem}
  .hero-steps{grid-template-columns:repeat(3, 1fr); gap:8px}
  .hero-steps li{grid-template-columns:1fr; justify-items:center; text-align:center; gap:6px; padding:10px 6px}
  .hero-steps li::before{grid-row:auto; width:26px; height:26px; font-size:.85rem}
  .hero-steps b{font-size:.8rem; line-height:1.2}
  .hero-steps span{display:none}
  .hero-trust{gap:6px}
  .hero-trust li{font-size:.74rem; padding:5px 10px}
}

/* Fußzeile unter den Aufträgen: rechtliche Seiten und Hilfe, auch für Google gut zu finden */
.sitefoot{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; padding:8px 0 4px; font-size:.82rem; color:var(--muted)}
.sitefoot a{color:var(--muted)}

/* Computer: breite Ansicht. Liste und Karte nebeneinander (die Karte bleibt beim Scrollen stehen),
   Aufträge in zwei Spalten, die Tab-Leiste schwebt unten in der Mitte. Andere Seiten bleiben gut lesbar schmal. */
@media (min-width: 980px){
  .app{max-width:1180px}
  .app > section:not(#view-list){width:100%; max-width:760px; margin-inline:auto}
  #view-list{display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 440px); gap:16px 28px; align-items:start}
  #view-list > *{grid-column:1 / -1}
  #view-list > #pane-list{grid-column:1}
  #view-list > #pane-map{grid-column:2; position:sticky; top:16px}
  #view-list .seg{display:none}
  #view-list > .listhead{grid-column:1}
  #view-list > .bar{grid-column:2; justify-content:flex-end; align-self:end}
  #pane-list .list{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
  .hero{padding:44px 44px 36px; gap:20px}
  .hero-cta{max-width:560px}
  .hero-steps{grid-template-columns:repeat(3, 1fr)}
  .tabbar{left:50%; right:auto; bottom:16px; transform:translateX(-50%); width:min(560px, calc(100% - 32px)); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:8px}
}