/* ── RESET + TOKENS ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── SCHRIFTEN: lokal gehostet, kein Google-Fonts-CDN (DSGVO, Projektregel).
   Die deutschen Umlaute und das ß liegen im latin-Subset; latin-ext laedt der
   Browser ueber unicode-range nur, wenn ein Text osteuropaeische Zeichen
   enthaelt (z. B. ein Nutzername wie "Łukasz") – sonst nie. ── */
@font-face{
  font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-wght-normal.woff2?v=2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/newsreader-latin-ext-wght-normal.woff2?v=2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;
  src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2?v=2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;
  src:url(/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2?v=2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;
  src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2?v=2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;
  src:url(/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2?v=2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;
  src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2?v=2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;
  src:url(/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2?v=2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ── SCHRIFT ──────────────────────────────────────────────────────────
     --f bleibt als Name bestehen (667 Referenzen im Dokument) und zeigt
     jetzt auf die UI-Schrift. --f-display nur fuer Hero, Section-Titel und
     grosse Betraege – nicht fuer Labels, Buttons, Navigation, Chat. */
  --f-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f:var(--f-ui);

  /* ── TEXT ── warmes Fast-Schwarz statt kaltem Primer-Grau ── */
  --c-ink:#141513;--c-ink2:#4A4B46;--c-ink3:#5E5F58;--c-ink4:#6C6D66;--c-ink5:#CFCDC2;
  /* nur fuer deaktivierte Bedienelemente – dort laesst WCAG den Kontrast offen */
  --c-ink-disabled:#8A8B82;

  /* ── FLAECHEN ──
     --c-bg ist die Inhaltsflaeche (Karten, Modale, Eingaben) und bleibt weiss.
     --c-bg-page ist der Seitengrund: warmes Papierweiss, nur auf <body>. */
  --c-bg:#FFFFFF;--c-bg-page:#FAF9F6;--c-bg1:#F2F1EC;--c-bg2:#EAE8E0;--c-bg3:#CFCDC2;

  /* ── AKZENT ── tiefes Waldgruen, ein einziger Akzent.
     Alte Namen (--c-blue*) bleiben als Alias erhalten, damit die 55 bzw. 11
     bestehenden Referenzen nicht einzeln angefasst werden muessen. */
  --c-accent:#1F5E3D;--c-accent-hover:#17492F;--c-accent-soft:#E8F0EA;
  --c-blue:var(--c-accent);--c-blue2:var(--c-accent-hover);--c-blt:var(--c-accent-soft);

  /* ── SIGNAL ── verbranntes Orange, AUSSCHLIESSLICH fuer Geldbetraege.
     --c-green traegt diese Rolle historisch (.jcard-p, .jd-price, .pay-range)
     und bleibt deshalb als Alias auf Signal stehen.
     Erfolgsmeldungen wurden vorher auf --c-gm umgestellt. */
  --c-signal:#C2410C;
  /* auf dunklem Grund brauchen Signal, Success und Akzent hellere Varianten,
     sonst faellt der Kontrast unter 4.5:1 bzw. unter 3:1 fuer Raender */
  --c-signal-on-dark:#E24C0E;--c-success-on-dark:#369062;--c-accent-on-dark:#357F58;

  /* ── SEMANTIK ── nur fuer Semantik, nie dekorativ ── */
  --c-success:#2C744F;--c-success-dark:#22593F;--c-success-soft:#E4EFE8;
  --c-gm:var(--c-success);--c-green2:var(--c-success-dark);--c-glt:var(--c-success-soft);
  --c-amber:#8C5E00;--c-alt:#F7EFD9;
  --c-red:#B3261E;--c-rlt:#F8E7E5;
  --c-info:#2D5F8A;

  /* ── LINIEN ── */
  --c-bd:#E3E1D9;--c-bds:#E7E5DC;

  /* ── SEMANTISCHE RAENDER ── jeweils die weiche Flaeche 30 % in Richtung der
     Semantikfarbe gemischt. Ersetzen die vier alten Primer-Raender (hellblau,
     hellgruen, gelb, rosa), die zur neuen Palette nicht passen. */
  --c-accent-bd:#ACC4B6;--c-success-bd:#AECDBC;--c-amber-bd:#DBC698;--c-red-bd:#E3ADA9;
  --c-red-soft-2:#EECAC7;--c-red-dark:#741914;

  /* ── BEWERTUNG ── eigene Rolle, damit Sterne nicht mit Warning kollidieren */
  --c-star:#8C5E00;

  /* ── RGB-KANAELE ── fuer rgba() in Fokusringen, Overlays und Canvas.
     Ersetzt die eingestreuten Primer-Werte rgba(var(--rgb-accent),…) usw. */
  --rgb-accent:31,94,61;--rgb-ink:20,21,19;--rgb-success:47,125,85;

  /* ── SCHATTEN ── genau zwei Stufen. Hierarchie entsteht durch Typografie,
     Abstand und Trennlinien, nicht durch Schweben. Die alten --sh0…--sh4
     bleiben als Alias, damit bestehende Regeln gueltig bleiben. */
  --sh-raised:0 1px 2px rgba(20,21,19,.06);
  --sh-overlay:0 12px 32px rgba(20,21,19,.14);
  --sh0:var(--sh-raised);--sh1:var(--sh-raised);--sh2:var(--sh-raised);
  --sh3:var(--sh-raised);--sh4:var(--sh-overlay);

  /* ── RADIEN ── chip / control / card / panel / modal ── */
  --r0:4px;--r1:8px;--r2:10px;--r3:12px;--r4:14px;

  /* ── ABSTAND ── Basis 4 px ── */
  --sp-section:96px;--sp-gutter:32px;--sp-container:1140px;
}
/* overflow-x:clip statt hidden: verhindert horizontalen Überlauf, macht html/body aber
   NICHT zu Y-Scroll-Containern (hidden würde overflow-y implizit auf auto setzen). In
   Safari fing dieser Wurzel-Scroller sonst die Modal-Scroll-Geste ab → tote Zonen. */
html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:clip}
body{font-family:var(--f);background:var(--c-bg-page);color:var(--c-ink);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"lnum" 1}
/* iOS-sicherer Scroll-Lock (Modale): body wird fixiert, Scrollposition via JS gemerkt/wiederhergestellt */
body.modal-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* Scroll-Chaining/Jank verhindern: innere Scrollbereiche kapseln ihren Scroll */
.jlist,.msg-area,.thread-list,.mobile-menu,.ch-textarea{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* .mcard: WEDER overscroll-behavior NOCH -webkit-overflow-scrolling auf dem Modal-
   Scroll-Container. In Safari/WebKit bricht overscroll-behavior:contain zusammen mit
   dem transform des Modals das Scroll-Hit-Testing → die Scroll-Geste erreicht .mcard
   nur über manchen Kind-Elementen ("tote Scroll-Zonen"). Der Hintergrund kann trotzdem
   nicht mitscrollen, das verhindert bereits body.modal-lock (position:fixed). */
/* Barrierefreiheit + Performance: Nutzer mit "Bewegung reduzieren" bekommen keine
   pulsierenden/floatenden Animationen und keine Übergangs-Motion. Ändert NICHT das
   Layout – nur die Bewegung. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}
/* App-Feeling auf Touch: kein graues Tap-Highlight, keine Textauswahl auf Bedienelementen */
button,a,.fc,.cat-pill,.mbn-item,.jcard,.lang-btn{-webkit-tap-highlight-color:transparent}
.btn,.fc,.mbn-item,.lang-btn,.hamburger{-webkit-user-select:none;user-select:none}

/* ── A11y: Bedienelemente sind echte <button type="button"> ───────────────────
   Diese Controls waren früher <div onclick> und damit per Tastatur nicht
   erreichbar. Als <button type="button"> erben sie Fokus, Enter/Space und die richtige
   Rolle für Screenreader. Der Reset stellt exakt die vorherige Optik wieder
   her – Browser-Defaults für Schrift, Farbe und Breite werden neutralisiert. */
.cat-pill,.cpick,.role-card,.user-pill{
  font:inherit;color:inherit;margin:0;
  -webkit-appearance:none;appearance:none;
}
/* Grid-/Spalten-Elemente fuellen ihre Zelle wie zuvor als <div> */
.cat-pill,.cpick,.role-card{width:100%}
.cat-pill,.cpick,.role-card{display:block}
/* Das Nutzer-Pill in der Kopfzeile behaelt seine inhaltsabhaengige Breite */
.user-pill{width:auto}

/* ── A11y: sichtbarer Tastatur-Fokus ────────────────────────────
   :focus-visible greift nur bei Tastaturbedienung – Mausklicks erzeugen
   weiterhin keinen Fokusring, die Optik ändert sich für Maus-Nutzer nicht.
   Farbe und Radius folgen den vorhandenen Tokens. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-blue);
  outline-offset:2px;
  border-radius:var(--r0);
}
/* Elemente mit eigenem Radius behalten ihn im Fokusring */
.cat-pill:focus-visible{border-radius:var(--r3)}
.cpick:focus-visible,.role-card:focus-visible{border-radius:var(--r2)}
.user-pill:focus-visible,.pill:focus-visible{border-radius:100px}
.mcard:focus{outline:none}   /* Container erhält Fokus nur programmatisch */
/* Footer-Newsletter */
.foot-nl{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--c-bds);margin-top:8px}
.foot-nl-h{font-weight:600;font-size:15px;color:var(--c-ink)}
.foot-nl-p{font-size:13px;color:var(--c-ink4);margin-top:3px;max-width:440px}
.foot-nl-form{display:flex;gap:8px;flex-wrap:wrap;min-width:280px;flex:1;max-width:460px}
.foot-nl-form input{flex:1;min-width:180px;border:1px solid var(--c-bd);border-radius:var(--r1);padding:11px 14px;font-size:16px;font-family:inherit;background:var(--c-bg);color:var(--c-ink)}
.foot-nl-msg{font-size:13px;color:var(--c-ink4)}
.foot-nl-msg:empty{display:none}
.foot-nl-off{font-size:12.5px;margin-top:6px}
.foot-nl-off a{color:var(--c-ink4);cursor:pointer;text-decoration:underline}
.foot-nl-off a:hover{color:var(--c-ink2)}
@media(max-width:600px){.foot-nl{flex-direction:column;align-items:flex-start}.foot-nl-form{max-width:none;width:100%}}
h1,h2,h3,h4{font-family:var(--f-ui);line-height:1.3;letter-spacing:-.01em;font-weight:600}
img,canvas{max-width:100%}
img{display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
/* IBM Plex Sans liegt lokal nur in 400/500/600 vor. Ohne diese beiden Regeln
   wuerde der Browser fuer <strong>/<b> (UA-Default 700) einen Fettschnitt
   *synthetisch* erzeugen – sichtbar unsauber. 600 ist der echte Schnitt,
   font-synthesis-weight:none macht eine kuenftige Luecke sichtbar statt
   sie still zu faelschen. */
b,strong{font-weight:600}
body{font-synthesis-weight:none}
/* nur fuer Screenreader: beschriftet Felder, die visuell durch Icon und
   Platzhalter erklaert sind */
/* Sprungmarke: erstes fokussierbares Element der Seite, sichtbar nur bei
   Tastaturfokus. Ohne sie muss man sich durch die gesamte Kopfzeile
   tabben, bevor der Inhalt beginnt. */
.skip-link{position:fixed;left:-9999px;top:0;z-index:2000}
.skip-link:focus{left:12px;top:12px;background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-accent);border-radius:var(--r1);padding:10px 16px;font-size:14px;font-weight:600;box-shadow:var(--sh-overlay)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input,textarea,select{font-family:inherit}

/* ── LAYOUT ── */
.wrap{max-width:var(--sp-container);margin:0 auto;padding:0 var(--sp-gutter)}
.sec{padding:var(--sp-section) 0}.sec-sm{padding:var(--sp-section) 0}

/* ── PILLS/BADGES ── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid}
/* .vbadge entfernt (Phase 6): die gruenen Verifizierungs-Pills im oeffentlichen
   Profil waren der einzige Nutzer. Gruene Pills lesen sich wie ein Guetesiegel;
   belegt ist aber nur eine bestaetigte E-Mail-Adresse. Ersetzt durch die
   nuechterne Liste .sr-pf-vf, die daneben ausdruecklich sagt, was NICHT
   geprueft wurde. */

/* ── GEWERBE-ABZEICHEN ───────────────────────────────────────────────────
   Zwei Stufen, die NICHT dasselbe bedeuten und deshalb verschieden aussehen
   UND verschieden heissen:
     .sr-biz    "Gewerblich"            - Selbstauskunft, neutrale Flaeche
     .sr-biz-v  "Verifiziertes Gewerbe" - vom Betreiber geprueft, Erfolgsfarbe
   Die Farbe ist NIE das einzige Merkmal: jedes Abzeichen traegt seinen Text,
   ein eigenes Zeichen und ein title-Attribut. Wer Farben nicht unterscheidet,
   liest denselben Unterschied im Wort. */
.sr-biz{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  padding:2px 8px;border-radius:100px;font-size:11px;font-weight:600;line-height:1.5;
  letter-spacing:.02em;white-space:nowrap;
  background:var(--c-bg1);color:var(--c-ink2);border:1px solid var(--c-bd)}
.sr-biz svg{flex-shrink:0}
.sr-biz-v{background:var(--c-glt);color:var(--c-green2);border-color:var(--c-success-bd)}
.sr-biz-sm{font-size:10.5px;padding:1px 7px}
.sr-biz-note{font-size:11.5px;color:var(--c-ink4);line-height:1.6;margin-top:8px}

/* ── GEWERBEBEREICH IM KONTO ────────────────────────────────────────────── */
.biz-state{border:1px solid var(--c-bd);border-radius:var(--r2);padding:14px;margin-bottom:14px;background:var(--c-bg1)}
.biz-state.ok{background:var(--c-glt);border-color:var(--c-success-bd)}
.biz-state.wait{background:var(--c-alt);border-color:var(--c-amber-bd)}
.biz-state.bad{background:var(--c-rlt);border-color:var(--c-red-bd)}
.biz-state-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin-bottom:6px}
.biz-state-p{font-size:12.5px;color:var(--c-ink3);line-height:1.6}
.biz-state-r{font-size:12.5px;color:var(--c-red-dark);line-height:1.6;margin-top:8px;word-break:break-word}
.biz-grp{margin-top:18px}
.biz-grp-h{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--c-ink4);margin-bottom:4px}
.biz-grp-s{font-size:12px;color:var(--c-ink4);line-height:1.6;margin-bottom:10px}
.biz-row2{display:grid;grid-template-columns:1fr 90px;gap:10px}
.biz-row3{display:grid;grid-template-columns:110px 1fr;gap:10px}
.biz-docs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.biz-docs li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-ink3);
  border:1px solid var(--c-bds);border-radius:var(--r1);padding:8px 10px;background:#fff}

/* ── GEWERBEVERZEICHNIS ─────────────────────────────────────────────────── */
.bizdir-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.bizdir-tools input[type=search]{flex:1;min-width:180px}
.bizdir-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bizdir-it{border:1px solid var(--c-bds);border-radius:var(--r2);padding:12px 14px;background:#fff}
.bizdir-it-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bizdir-nm{font-size:14.5px;font-weight:600;color:var(--c-ink);text-align:left;
  background:none;border:0;padding:0;cursor:pointer}
.bizdir-nm:hover{text-decoration:underline}
.bizdir-mt{font-size:12.5px;color:var(--c-ink4);margin-top:3px}
@media(max-width:480px){.biz-row2{grid-template-columns:1fr 72px}}

/* ── SECTION HEAD ── */
/* ── SEKTIONSKOPF ──────────────────────────────────────────────────────
   Linksbuendig mit Kapitaelchen-Label und feiner Linie. Ersetzt die
   zentrierte Pill-plus-Titel-Komposition, die auf jeder AI-Startseite steht. */
.sec-head{margin-bottom:44px;max-width:640px}
.sec-label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink3);margin-bottom:14px}
.sec-head .sec-title{margin-bottom:12px}
.sec-title{font-family:var(--f-display);font-size:clamp(24px,2.6vw,36px);font-weight:400;line-height:1.2;letter-spacing:-.015em;margin-bottom:14px;color:var(--c-ink)}
.sec-desc{font-size:16px;color:var(--c-ink2);max-width:58ch;line-height:1.7}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--r1);font-size:14px;font-weight:600;line-height:1.25;transition:all .15s;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--c-blue);color:#fff;border-color:var(--c-blue2)}
.btn-primary:hover{background:var(--c-blue2);box-shadow:var(--sh1)}
.btn-outline{background:var(--c-bg);color:var(--c-ink2);border-color:var(--c-bd);box-shadow:var(--sh0)}
.btn-outline:hover{background:var(--c-bg1);border-color:var(--c-ink5)}
.btn-ghost{background:transparent;color:var(--c-ink3);border-color:transparent}
.btn-ghost:hover{background:var(--c-bg1);color:var(--c-ink2)}
.btn-dark{background:var(--c-ink);color:#fff;border-color:var(--c-ink2)}
.btn-dark:hover{background:var(--c-ink2)}
.btn-danger{background:var(--c-rlt);color:var(--c-red);border-color:var(--c-red-bd)}
.btn-danger:hover{background:var(--c-red-soft-2)}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:var(--r2)}
.btn-sm{padding:6px 14px;font-size:13px;border-radius:var(--r0)}
.btn-full{width:100%}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes msgIn{from{opacity:0;transform:scale(.96) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── SERVICE-RADAR IN DER KOPFZEILE ──────────────────────────────────────
   Ein Markenelement, kein Schmuck: das Radar ist der Name des Produkts.
   Bewusst klein (34px) und in denselben Tokens wie alles andere - ein
   Haarlinienkreis, ein Innenring, ein Mittelpunkt, ein ruhig wandernder
   Suchstrahl in Akzentgruen und zwei kurze Signale. Kein Leuchten, kein
   Farbverlauf ueber die Flaeche, keine zweite Farbe.
   Das grosse Radar aus dem alten Hero kommt NICHT zurueck. */
@keyframes srRadarSweep{to{transform:rotate(360deg)}}
@keyframes srRadarBlip{0%{opacity:.9}18%{opacity:.3}46%,100%{opacity:0}}
.sr-radar{position:relative;width:34px;height:34px;flex-shrink:0;padding:0;
  border-radius:50%;border:1px solid var(--c-bd);background:var(--c-bg1);
  cursor:pointer;overflow:hidden;transition:border-color .15s}
.sr-radar:hover{border-color:var(--c-accent-bd)}
.sr-radar:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
/* Innenring - bewusst zurueckhaltender als der Suchstrahl, sonst liest sich
   das Zeichen als Zielscheibe statt als Radar. */
.sr-radar::before{content:'';position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(var(--rgb-accent),.16)}
/* Mittelpunkt */
.sr-radar::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--c-accent);opacity:.75}
.sr-radar-sweep{position:absolute;inset:0;border-radius:50%;
  /* Der Nachlauf: hell an der Vorderkante, schnell verloeschend. Ueber 62
     Grad hinweg gleichmaessig abzublenden sah aus wie ein grauer Quadrant -
     ein Radar erkennt man an der scharfen Kante vorn, nicht an der Flaeche. */
  background:conic-gradient(from 0deg,
    rgba(var(--rgb-accent),.40) 0deg,
    rgba(var(--rgb-accent),.14) 12deg,
    rgba(var(--rgb-accent),.04) 30deg,
    rgba(var(--rgb-accent),0) 48deg,
    rgba(var(--rgb-accent),0) 360deg);
  animation:srRadarSweep 5s linear infinite}
/* Die Vorderkante als eigene Linie: sie macht aus der Flaeche einen Strahl. */
.sr-radar-sweep::before{content:'';position:absolute;left:50%;top:1px;bottom:50%;
  width:1px;margin-left:-.5px;background:linear-gradient(to bottom,
    rgba(var(--rgb-accent),.18),rgba(var(--rgb-accent),.85))}
.sr-radar-blip{position:absolute;width:2.5px;height:2.5px;border-radius:50%;
  background:var(--c-accent);opacity:0;animation:srRadarBlip 5s linear infinite}
/* Die Verzoegerungen sind so gewaehlt, dass ein Signal genau dann aufleuchtet,
   wenn der Strahl es ueberstreicht - sonst blinkt es willkuerlich. */
.sr-radar-blip.b1{left:22px;top:11px;animation-delay:-3.85s}
.sr-radar-blip.b2{left:11px;top:22px;animation-delay:-1.55s}
/* Reduzierte Bewegung: der Strahl steht still. Die globale Regel weiter unten
   stoppt die Animation ohnehin; hier steht es ausdruecklich, damit das Radar
   dann als ruhiges, vollstaendiges Zifferblatt dasteht und nicht als
   halb gezeichnetes. */
@media (prefers-reduced-motion: reduce){
  .sr-radar-sweep{animation:none;transform:rotate(-24deg)}
  .sr-radar-blip{animation:none;opacity:.55}
}
/* Nur wo wirklich Platz ist. Gemessen im angemeldeten Zustand, in dem die
   Kopfzeile am vollsten ist (Rollenschalter + Primaeraktion + Konto):
   bei 1100px lief die Zeile mit Radar um 28px ueber, ab 1200px passt sie.
   Unter 1025px schaltet die Navigation ohnehin auf Logo + Menue um - dort
   hat das Radar nichts verloren, es wuerde den Menueknopf verdraengen. */
@media(max-width:1199px){
  .sr-radar{display:none}
}
/* .live-dot und @keyframes pulse entfernt (Phase 8): der pulsierende gruene
   Punkt sass in der alten Zaehlplakette der Chatliste. Die Plakette ist weg,
   der einzige Nutzer der Animation damit auch. */

/* ══ NAV ══════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:300;background:rgba(250,249,246,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--c-bds);transition:box-shadow .25s}
nav.scrolled{box-shadow:var(--sh2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
/* Logo und Navigationsziele sind Bezeichner, keine Prosa - sie duerfen nicht
   umbrechen. Gemessen beim Einbau des Radars: das zusaetzliche Element im
   rechten Bereich liess Flexbox die beiden linken Bloecke um wenige Pixel
   schrumpfen, worauf "Service Radar" und "So funktioniert's" zweizeilig
   wurden und die Kopfzeile von 34px auf 54px wuchs. Ueber 1024px steht die
   Breite ohnehin fest (.wrap), darunter schaltet die Kopfzeile auf Logo +
   Menue um - ein Ueberlauf kann daraus nicht entstehen (nachgemessen
   1025-1920px). */
.logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--c-ink);flex-shrink:0;white-space:nowrap}
.logo-icon{width:34px;height:34px;border-radius:var(--r1);background:var(--c-ink);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;flex-shrink:0;white-space:nowrap}
.nav-links a{color:var(--c-ink3);font-size:14px;font-weight:500;padding:7px 12px;border-radius:var(--r0);transition:all .15s}
.nav-links a:hover{color:var(--c-ink);background:var(--c-bg1)}
/* Aktiver Abschnitt: die Startseite ist eine einzige Seite, ohne
   Rueckmeldung weiss man beim Scrollen nicht, wo man steht. srNavSpy()
   setzt aria-current, die Darstellung haengt daran - kein zweiter Zustand. */
.nav-links a[aria-current]{color:var(--c-ink);background:var(--c-bg1)}
.nav-end{display:flex;align-items:center;gap:8px}
/* ── Anmeldezustand steuert die Kopfzeile ueber Body-Klassen ────────────
   URSACHE DES ALTEN MOBILE-FEHLERS: updateNav() schrieb style.display
   direkt auf #nav-auth / #nav-user. Ein Inline-Stil schlaegt jede Media
   Query, deshalb blieben die beiden Auth-Knoepfe auch bei 320px stehen,
   schoben .nav-end nach rechts und damit den Hamburger aus dem Bild.
   Jetzt entscheidet CSS, und die Media Query unten kann mitreden. */
#nav-auth{display:none;gap:8px;align-items:center}
#nav-user{display:none;align-items:center;gap:10px}
#mm-auth,#mm-user,#mm-role{display:none}
body.sr-out #nav-auth{display:flex}
body.sr-in  #nav-user{display:flex}
body.sr-out #mm-auth{display:flex}
body.sr-in  #mm-user{display:flex}
body.sr-in  #mm-role{display:block}
/* Eingeloggt traegt der Rollenschalter den Platz, den sonst DE/EN belegt.
   Die Sprache bleibt im Mobile-Menue und unter Konto -> Einstellungen. */
body.sr-in .nav-end > .lang-pill{display:none}

/* ── Rollenschalter ────────────────────────────────────────────────────
   Derselbe Segment-Control wie im Konto (.acct-seg), nur kompakter. Er
   faerbt ausschliesslich das aktive Segment - nicht die Oberflaeche.
   Es bleibt eine Anwendung mit zwei Blickrichtungen. */
.nav-seg{display:flex;gap:2px;background:var(--c-bg1);border:1px solid var(--c-bds);border-radius:var(--r1);padding:3px}
.nav-seg button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--c-ink3);padding:6px 12px;border-radius:var(--r0);cursor:pointer;white-space:nowrap;transition:color .12s,background .12s}
.nav-seg button:hover{color:var(--c-ink)}
.nav-seg button.on{background:var(--c-bg);color:var(--c-ink);box-shadow:var(--sh-raised)}
.lang-pill{display:flex;align-items:center;background:var(--c-bg1);border:1px solid var(--c-bd);border-radius:var(--r1);padding:3px}
.lang-btn{padding:4px 10px;border-radius:var(--r1);font-size:13px;font-weight:600;color:var(--c-ink3);background:transparent;border:none;cursor:pointer;transition:all .15s}
.lang-btn.active{background:var(--c-bg);color:var(--c-ink);box-shadow:var(--sh0)}
.user-area{position:relative}
.user-pill{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:100px;background:var(--c-bg1);border:1px solid var(--c-bd);cursor:pointer;transition:all .15s;user-select:none}
.user-pill:hover{background:var(--c-bg2);border-color:var(--c-ink5)}
.u-av{width:28px;height:28px;border-radius:50%;background:var(--c-bg1);color:var(--c-ink2);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.u-name{font-size:13px;font-weight:600;color:var(--c-ink2)}
.udrop{position:absolute;top:calc(100% + 8px);right:0;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r2);box-shadow:var(--sh4);min-width:220px;overflow:hidden;display:none;z-index:400}
.udrop.open{display:block;animation:fadeUp .16s ease-out}
.udrop-head{padding:14px 16px 12px;border-bottom:1px solid var(--c-bds)}
.udrop-name{font-size:14px;font-weight:600;color:var(--c-ink)}
.udrop-role{font-size:12px;color:var(--c-ink4);margin-top:2px}
/* Die Eintraege waren <a> ohne href - anklickbar, aber per Tastatur nicht
   erreichbar. Jetzt echte Buttons; der Selektor deckt beides ab. */
.udrop a,.udrop button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;font-family:inherit;font-size:14px;font-weight:500;line-height:1.3;color:var(--c-ink2);background:none;border:none;text-align:left;cursor:pointer;transition:background .1s}
.udrop a:hover,.udrop button:hover{background:var(--c-bg1)}
.udrop a.danger,.udrop button.danger{color:var(--c-red)}
.udrop a.danger:hover,.udrop button.danger:hover{background:var(--c-rlt)}
.udrop hr{border:none;border-top:1px solid var(--c-bds);margin:4px 0}
/* Eingeloggt traegt der Rollenschalter den Platz, den sonst DE/EN belegt.
   Damit die Sprache nicht drei Ebenen tief in den Einstellungen verschwindet,
   steht sie hier - einen Klick vom Avatar entfernt. */
.udrop-lang{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 16px 11px}
.udrop-lang-l{font-size:14px;font-weight:500;color:var(--c-ink2)}
/* 44x44: das Touch-Minimum, vorher 36x36 */
.hamburger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:var(--c-bg1);border-radius:var(--r1);border:1px solid var(--c-bd);cursor:pointer;flex-shrink:0}
.hamburger span{display:block;width:16px;height:2px;background:var(--c-ink2);border-radius:2px;transition:all .2s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:250;background:var(--c-bg);padding:20px 24px;flex-direction:column;gap:4px;overflow-y:auto}
/* Im geoeffneten Zustand ueber den Cookie-Hinweis (8900), aber unter die
   Modale (9000): der Hinweis lag sonst als schwebende weisse Karte auf dem
   unteren Drittel des offenen Menues. Gemessen 390px: Menue y 64-844,
   Hinweis y 611-844. Kein Menuepunkt war dadurch unerreichbar - es sah nur
   aus, als gehoerte der Hinweis ins Menue. */
.mobile-menu.open{display:flex;animation:fadeIn .2s;z-index:8950}
.mobile-menu a{padding:13px 16px;font-size:16px;font-weight:500;color:var(--c-ink);border-radius:var(--r1);transition:background .15s}
.mobile-menu a:hover{background:var(--c-bg1)}
.mm-divider{height:1px;background:var(--c-bds);margin:8px 0}
.mm-btns{display:flex;flex-direction:column;gap:8px;margin-top:8px}
/* Gleiche Informationsarchitektur wie auf dem Desktop: dieselben drei Ziele,
   derselbe Rollenschalter, dieselbe Sprachumschaltung - nur gestapelt. */
.mm-lab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink3);padding:0 16px;margin-bottom:10px}
#mm-role{margin-bottom:6px}
.mobile-menu .nav-seg{width:100%}
.mobile-menu .nav-seg button{flex:1;min-height:44px;font-size:14px}
.mobile-menu .lang-pill .lang-btn{min-height:44px;display:flex;align-items:center;padding:0 18px}
/* .btn-full{min-height:46px} steht im 640er-Block, das Menue reicht aber
   bis 1024px - dort waren die Knoepfe 40px hoch. */
.mobile-menu .mm-btns .btn{min-height:46px}
#chat-nav-badge{display:none;margin-left:auto;background:var(--c-red);color:#fff;padding:1px 7px;border-radius:100px;font-size:11px;font-weight:600}

/* Oberhalb von 768px zeigt die Kopfzeile die drei Ziele selbst; im Menue
   waeren sie dann doppelt. Es bleiben Rolle, Sprache und Kontoaktionen. */
@media(min-width:769px){
  .mobile-menu > a,.mobile-menu > .mm-divider:first-of-type{display:none}
}

/* ══ HERO ═════════════════════════════════════════ */
/* ── HERO ──────────────────────────────────────────────────────────────
   Einspaltig und linksbuendig. Die Wirkung kommt aus Typografie, Weissraum
   und der Suche – nicht aus Dekoration. Kein min-height:100vh mehr: der Hero
   ist so hoch wie sein Inhalt, damit auf Mobilgeraeten sofort Inhalt folgt. */
.hero{padding:calc(64px + 60px) 0 76px;position:relative;background:var(--c-bg-page)}
.hero-inner{max-width:660px}
.hero-lede{font-size:17px;color:var(--c-ink2);line-height:1.65;margin-bottom:32px;max-width:56ch}

/* Suche: der eigentliche Einstieg. Eine Flaeche, drei Felder, eine Aktion. */
.hsearch{background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r3);padding:14px;max-width:none}
.hsearch-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.hsearch-field{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:9px;background:var(--c-bg1);border:1px solid var(--c-bd);border-radius:var(--r1);padding:0 12px;min-height:46px}
.hsearch-field svg{color:var(--c-ink3);flex-shrink:0}
/* Der Fokusring sitzt am Feldrahmen, weil das <input> selbst outline:none
   traegt (sonst laege der Ring innerhalb des Rahmens). Ohne diese Regel
   war die Hauptsuche per Tastatur ohne sichtbaren Fokus. */
.hsearch-field:focus-within{border-color:var(--c-accent);outline:2px solid var(--c-blue);outline-offset:2px}
.hsearch-field input{flex:1;min-width:0;min-height:44px;border:none;outline:none;background:transparent;font-family:inherit;font-size:16px;color:var(--c-ink)}
.hsearch-field input::placeholder{color:var(--c-ink4)}
.hsearch-go{flex:0 0 auto;min-height:46px;padding:0 22px}
.hsearch-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-bds)}
.hsearch-meta .btn{min-height:44px;padding:0 14px}
.hsearch-rad{display:flex;align-items:center;gap:9px;flex:1 1 220px;min-width:0}
.hsearch-rad label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink3);white-space:nowrap}
.hsearch-rad input[type=range]{flex:1;min-width:90px;height:24px;accent-color:var(--c-accent);cursor:pointer}
.hsearch-rad .rv{font-size:13px;font-weight:600;color:var(--c-ink2);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
/* Standortzeile: bleibt verborgen, solange kein echter Standort bekannt ist.
   Vorher stand dort dauerhaft "In deiner Naehe / Lokale Auftraege" - eine
   Zeile ohne Information. updateLocationLabels() setzt .on, sobald es echte
   Daten gibt (freigegebener Standort oder aufgeloester Ortsname). */
.hloc{display:none;align-items:baseline;gap:8px;margin-top:18px;font-size:13.5px;color:var(--c-ink3)}
.hloc.on{display:flex}
.hloc b{font-weight:600;color:var(--c-ink)}
/* Einstieg fuer Auftraggeber: Frage, ein Satz, dann direkt die Kategorien.
   Die Kacheln sind echte Knoepfe mit 44px Hoehe (Touch-Ziel) und brechen
   auf schmalen Bildschirmen einfach um - kein horizontales Scrollen. */
.hero-2nd{margin-top:28px;padding-top:22px;border-top:1px solid var(--c-bds)}
.hero-2nd-q{font-size:16px;font-weight:600;color:var(--c-ink);margin:0 0 4px}
.hero-2nd-sub{font-size:14px;color:var(--c-ink3);line-height:1.55;margin:0 0 14px;max-width:56ch}
.hero-cats{display:flex;flex-wrap:wrap;gap:8px}
.hero-cat{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border:1px solid var(--c-bd);border-radius:999px;background:var(--c-bg);color:var(--c-ink2);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.hero-cat svg,.hero-cat i{color:var(--c-accent);flex-shrink:0}
.hero-cat:hover{background:var(--c-accent-soft);border-color:var(--c-accent);color:var(--c-ink)}
.hero-cat:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.hero-2nd .promo-note{margin-top:14px}
@media(max-width:480px){.hero-cat{padding:0 12px;font-size:13.5px}}
/* Vertrauenshinweise als ruhige Textzeile statt als Haken-Reihe: drei gruene
   Checkmarks unter dem Hero sind genau das Muster, das auf jeder
   AI-generierten Startseite steht. Inhalt bleibt, Form wird Typografie.
   Trennzeichen per CSS, damit die Zeile an jeder Stelle umbrechen kann und
   Screenreader durchgehende Prosa lesen. */
.hero-meta{margin-top:32px;padding-top:20px;border-top:1px solid var(--c-bds);font-size:13px;color:var(--c-ink3);line-height:1.8}
.hero-meta span:not(:last-child)::after{content:" · ";color:var(--c-ink5)}
/* Hero-Titel: Display-Schrift traegt die Aussage. */
.hero-title{font-family:var(--f-display);font-size:clamp(34px,4.4vw,54px);font-weight:400;line-height:1.14;margin-bottom:20px;letter-spacing:-.02em;color:var(--c-ink)}
.hero-title .t-accent{color:var(--c-accent)}

/* ══ TRUST STRIP ══════════════════════════════════ */

/* ══ HOW IT WORKS ═════════════════════════════════ */
/* ── ABLAUF ── numerierte Sequenz. Trennlinien statt Karten, linksbuendig,
   damit die Reihenfolge und nicht die Kachel die Aufmerksamkeit traegt. */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--c-bd)}
.step{padding:28px 28px 0 0;border-left:1px solid var(--c-bd);padding-left:24px}
.step:first-child{border-left:none;padding-left:0}
.step-n{display:block;font-family:var(--f-display);font-size:32px;font-weight:400;color:var(--c-accent);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.step-h{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}.step-p{font-size:14px;color:var(--c-ink2);line-height:1.65;max-width:34ch}

/* ══ MAP ══════════════════════════════════════════ */
.map-sec{background:var(--c-bg1)}
/* ── FILTER ── Werkzeugleiste, nicht Hauptinhalt. Die aktive Auswahl war
   vorher eine kraeftige Akzentflaeche und damit das lauteste Element der
   Sektion; jetzt traegt sie den neutralen Tintenton. */
.filter-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink3);margin-right:2px}
/* min-height plus inline-flex: nur die Kategoriechips tragen ein Icon, der
   Alle-Chip war dadurch 3px niedriger und sass 2px tiefer. */
.fc{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:100px;border:1px solid var(--c-bd);font-size:13px;font-weight:500;background:transparent;cursor:pointer;transition:all .15s;color:var(--c-ink3);font-family:inherit}
.fc:hover{border-color:var(--c-ink4);color:var(--c-ink)}
.fc.on{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink);font-weight:600}
/* Kein Rahmen um den Rahmen: Karte und Liste haben je eine eigene Kante,
   der zusaetzliche weisse Kasten darum war Karte-in-Karte. */
/* 360 statt 320px: der Titel ist die Hauptzeile und brauchte Luft neben dem
   Betrag. Die Karte bleibt mit rund zwei Dritteln dominant. */
.map-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;height:520px;max-width:100%}
.map-frame{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden;border-radius:var(--r3)}
#jobMap{position:absolute;inset:0;border-radius:var(--r3);overflow:hidden;border:1px solid var(--c-bd);background:var(--c-bg1);z-index:0}
.leaflet-container{position:absolute;inset:0;border-radius:var(--r3)}
/* ── MAP MARKER ── dieselbe Sprache wie die Karten: heller Grund, Betrag im
   Signalton, schmale Spitze. Der ausgewaehlte Marker traegt die
   Akzentflaeche der ausgewaehlten Listenkarte. Bewusst nur der Betrag -
   die Entfernung sagt auf einer Karte schon die Position. */
/* Leaflet setzt ohne iconSize keine Masse - die Breite richtet sich nach dem
   Betrag, und der Marker wird per transform so verschoben, dass die Spitze
   auf der Koordinate sitzt. */
.sr-mk{width:auto;height:auto}
.mk{display:flex;flex-direction:column;align-items:center;cursor:pointer;transform:translate(-50%,-100%)}
/* Kante und Schatten kraeftiger als in der Liste: gegen helle Kartenflaechen
   lag der Rahmen in --c-bd bei rund 1,1:1 und war praktisch unsichtbar. */
.mk-b{background:var(--c-bg);border:1px solid var(--c-ink5);border-radius:var(--r1);padding:4px 9px;font-size:12px;font-weight:600;color:var(--c-signal);font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 1px 3px rgba(20,21,19,.22);line-height:1.3}
.mk-tip{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--c-ink5)}
.mk.on .mk-b{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.mk.on .mk-tip{border-top-color:var(--c-accent)}
/* Der Fokusring gehoert um den SICHTBAREN Marker. Leaflets Box liegt ohne
   iconSize auf der Koordinate, der Marker steht per transform darueber -
   ein Ring um die Box saesse rund 30px daneben. */
.sr-mk:focus-visible{outline:none}
.sr-mk:focus-visible .mk-b{outline:2px solid var(--c-accent);outline-offset:2px}
.map-empty-note{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;pointer-events:none}
.map-empty-note>div{background:rgba(255,255,255,.94);border:1px solid var(--c-bd);border-radius:var(--r2);padding:16px 22px;box-shadow:var(--sh2);max-width:82%;color:var(--c-ink3);font-weight:600;font-size:14px;line-height:1.5}
.geo-hint{font-size:13px;color:var(--c-ink3);margin-top:6px;line-height:1.5}
.jlist{display:flex;flex-direction:column;gap:10px;overflow-y:auto;height:100%;min-width:0;padding-right:2px}
.jlist::-webkit-scrollbar{width:4px}.jlist::-webkit-scrollbar-thumb{background:var(--c-bg2);border-radius:var(--r0)}
/* ── JOB CARD ──────────────────────────────────────────────────────────
   Vier Zonen statt acht gleich lauter Elemente:
     1 Naehe und Kategorie      2 Titel und Betrag
     3 zwei Zeilen Beschreibung 4 Alter und Merken
   Auftraggeber-Avatar und -Bewertung stehen bewusst nicht mehr hier. Die
   Karte soll ueber den AUFTRAG entscheiden lassen, nicht ueber die Person;
   beides steht vollstaendig im Auftragsdetail. */
.jcard{background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r2);padding:14px 16px;transition:border-color .15s,background .15s;position:relative}
/* scroll-to-top */
#scrolltop{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--c-ink);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh3);opacity:0;pointer-events:none;transition:opacity .25s;z-index:200}
#scrolltop.show{opacity:1;pointer-events:all}
#scrolltop:hover{background:var(--c-ink2);transform:translateY(-2px)}
.jcard:hover{border-color:var(--c-accent-bd)}
/* Ausgewaehlt: ruhige Flaechenaenderung plus schmale Akzentkante links -
   dieselbe Farbe wie der aktive Kartenmarker, damit Liste und Karte als ein
   System lesbar sind. Kein Ring, kein Schatten. */
.jcard.on{background:var(--c-accent-soft);border-color:var(--c-accent-bd)}
/* left:0 statt -1px: .jlist berechnet wegen overflow-y:auto auch overflow-x
   auf auto und haette die Haelfte der Kante weggeschnitten. */
.jcard.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 2px 2px 0;background:var(--c-accent)}
.jcard-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12px;color:var(--c-ink3);line-height:1.4;min-width:0}
/* Naehe: Glyph plus Text. Der Glyph allein traegt nie Information - die
   Entfernung steht immer als Text daneben. */
.jcard-prox{display:inline-flex;align-items:center;gap:5px;color:var(--c-ink2);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.jcard-cat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jcard-cat::before{content:"\00B7";margin-right:7px;color:var(--c-ink5)}

/* flex-start statt baseline: bei zweizeiligen Titeln legte der Browser den
   Betrag sonst neben die ZWEITE Zeile. */
.jcard-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:7px}
/* Hoechstens drei Zeilen Titel: sonst reissen einzelne Auftraege die
   Kartenhoehe auseinander und die Liste laesst sich nicht mehr scannen.
   Der vollstaendige Titel steht im Auftragsdetail.
   Der Clamp sitzt auf dem inneren <span>, NICHT auf der Ueberschrift und
   nicht auf dem Button: als Flex-Element wird -webkit-box zu flow-root
   blockifiziert und der Clamp war wirkungslos (gemessen 5 statt 3 Zeilen),
   und overflow:hidden am Button wuerde dessen ::after-Flaeche abschneiden. */
.jcard-t{font-size:15px;font-weight:600;color:var(--c-ink);line-height:1.35;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.jcard-tx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Der Titel ist das EINZIGE Bedienelement der Karte. Sein ::after deckt die
   ganze Flaeche ab, damit auch ein Klick daneben oeffnet - ohne dass die
   Karte ein klickbares div wird oder ein Button andere Buttons umschliesst.
   Der Merken-Knopf liegt mit z-index darueber und bleibt eigenstaendig. */
.jcard-open{display:inline;font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;text-align:left;cursor:pointer}
.jcard-open::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* Ohne Affordanz war "Merken" das einzige Element, das nach Handlung aussah -
   also ausgerechnet die Nebenhandlung. */
.jcard-open:hover,.jcard-open:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jcard-go{color:var(--c-ink4);white-space:nowrap;transition:color .15s}
.jcard:hover .jcard-go,.jcard.on .jcard-go{color:var(--c-accent)}
.jcard-p{font-size:16px;font-weight:600;color:var(--c-signal);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap;flex-shrink:0;line-height:1.28}
/* Genau zwei Zeilen. Lange Komposita und URLs brechen, statt die Karte
   auseinanderzuziehen. */
.jcard-d{font-size:13px;color:var(--c-ink2);margin-bottom:12px;line-height:1.55;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jcard-foot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--c-ink3)}
.jcard-foot .sv{margin-left:auto}
.jcard-age{font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── MERKEN ── erkennbar, aber nicht dominant. Aktiv = Akzentflaeche. */
/* Im Ruhezustand rahmenlos: sechs umrandete Kaesten untereinander bildeten
   eine rechte Kante, die schwerer wog als der Betrag. */
.sv{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1;padding:7px 11px;border:1px solid transparent;border-radius:var(--r1);background:none;color:var(--c-ink3);font-family:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;transition:all .15s;flex-shrink:0}
.sv:hover,.sv:focus-visible{border-color:var(--c-bd);background:var(--c-bg);color:var(--c-ink2)}
.sv.on{background:var(--c-accent-soft);border-color:var(--c-accent-bd);color:var(--c-accent)}
.sv svg{flex-shrink:0}
.sv-detail{padding:11px 18px;font-size:14px;border-radius:var(--r2);color:var(--c-ink)}

/* ── LEERZUSTAND der Liste ── erklaert, was gerade gefiltert wird. */
.jl-empty{padding:34px 18px;text-align:center}
.jl-empty-h{font-size:15px;font-weight:600;color:var(--c-ink);margin-bottom:7px}
.jl-empty-p{font-size:13px;color:var(--c-ink3);line-height:1.6;max-width:32ch;margin:0 auto}
.jl-empty-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}

/* ══ PAYMENT SCREEN ══════════════════════════════ */
.pay-screen{padding:4px 0}
.pay-amount-hero{
  background:var(--c-ink);
  border-radius:var(--r3);padding:28px 24px;text-align:center;
  color:#fff;margin-bottom:20px;
}
.pay-amount-hero .pa-label{font-size:13px;color:rgba(255,255,255,.68);margin-bottom:8px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.pay-amount-hero .pa-price{font-family:var(--f-display);font-size:52px;font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pay-amount-hero .pa-desc{font-size:13px;color:rgba(255,255,255,.62);margin-top:8px}
.pay-job-preview{
  background:var(--c-bg1);border:1px solid var(--c-bd);
  border-radius:var(--r2);padding:16px;margin-bottom:20px;
}
.pay-job-preview .pjp-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--c-ink4);margin-bottom:8px}
.pay-job-preview .pjp-title{font-size:15px;font-weight:600;color:var(--c-ink);margin-bottom:3px}
.pay-job-preview .pjp-meta{font-size:13px;color:var(--c-ink3)}
/* Stripe-Hinweis an Stelle der frueheren Zahlungsart-Karten */
.pay-stripe{border:1px solid var(--c-bd);border-radius:var(--r2);background:var(--c-bg1);padding:14px 16px;margin-bottom:16px}
.pay-stripe-t{display:block;font-size:14px;font-weight:600;color:var(--c-ink);margin-bottom:4px}
.pay-stripe-p{font-size:13px;line-height:1.55;color:var(--c-ink2);margin:0}
.pay-trust-row{
  display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap;
}
.pay-trust-item{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--c-ink4);
}
.pay-btn-main{
  width:100%;padding:16px;border-radius:var(--r2);
  background:var(--c-blue);color:#fff;
  font-size:16px;font-weight:600;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .18s;
  font-family:var(--f);letter-spacing:-.01em;
}
.pay-btn-main:hover{background:var(--c-blue2)}
.pay-btn-main:disabled{background:var(--c-bg2);color:var(--c-ink-disabled);box-shadow:none;transform:none;cursor:not-allowed}
.pay-demo-note{
  text-align:center;font-size:12px;color:var(--c-ink4);
  margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;
}
/* .pj-status/.pj-pay-now entfernt (Phase 7): die farbigen Statuspillen der
   Auftragsliste im Konto (gruen/bernstein/rot/grau) sind durch .acct-st
   ersetzt - Status steht jetzt als Wort da, nicht als Farbflaeche.
   .pj-row-pending war schon in Phase 6 ohne Nutzer. */

/* ══ CATEGORIES ═══════════════════════════════════ */
/* ── KATEGORIEN ── kompakte Auswahl, kein Kachelstapel: eine Flaeche,
   Trennlinien, Richtwert rechtsbuendig mit Tabellenziffern. Klassen und
   Klickziele bleiben unveraendert (setFilter + scrollToJobs). */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;border:1px solid var(--c-bd);border-radius:var(--r3);overflow:hidden;background:var(--c-bg)}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr}}

.cat-pill{background:var(--c-bg);border:none;border-bottom:1px solid var(--c-bds);border-radius:0;padding:16px 20px;cursor:pointer;transition:background .12s;text-align:left;display:flex;align-items:center;gap:14px}
.cat-grid .cat-pill:nth-child(odd){border-right:1px solid var(--c-bds)}
@media(max-width:640px){.cat-grid .cat-pill:nth-child(odd){border-right:none}}
.cat-grid .cat-pill:nth-last-child(-n+2){border-bottom:none}
@media(max-width:640px){.cat-grid .cat-pill:last-child{border-bottom:none}.cat-grid .cat-pill:nth-last-child(2){border-bottom:1px solid var(--c-bds)}}
.cat-pill:hover{background:var(--c-bg1)}
.cat-pill:focus-visible{border-radius:0;outline-offset:-2px}
.cp-icon{width:34px;height:34px;border-radius:var(--r1);background:var(--c-bg1);color:var(--c-ink2);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cp-name{font-size:14.5px;font-weight:600;color:var(--c-ink);flex:1;min-width:0}
.cp-rate{font-size:13px;color:var(--c-ink3);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}

/* ══ FOR WHOM ═════════════════════════════════════ */
.for-sec{background:var(--c-bg1)}
/* ── ZWEI ROLLEN ── zwei Spalten, durch eine Linie getrennt statt durch
   zwei Karten. Keine Hover-Anhebung, kein Schatten. */
.for-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--c-bd)}
.for-card{padding:32px 40px 0 0;position:relative}
.for-card:last-child{border-left:1px solid var(--c-bd);padding-left:40px;padding-right:0}
.for-ico{color:var(--c-accent);display:flex;align-items:center;margin-bottom:14px;height:22px}
.for-h{font-family:var(--f-display);font-size:24px;font-weight:400;margin-bottom:10px;letter-spacing:-.015em}
.for-p{color:var(--c-ink2);font-size:15px;line-height:1.7;margin-bottom:22px;max-width:42ch}
.for-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.for-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--c-ink2);line-height:1.5}
.ck{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0;font-weight:600;margin-top:3px}
/* Beide Haken tragen die Markenfarbe. Das Erfolgsgruen war hier keine
   Statusaussage, sondern Dekoration - und nahm dem echten Erfolgsgruen
   die Bedeutung. */
.ck-b,.ck-g{background:var(--c-accent)}

/* ══ SAFETY ═══════════════════════════════════════ */
/* ── SICHERHEIT ── eine Liste, linksbuendig, Trennlinien. Die vier
   zentrierten Karten waren vier Mal dieselbe Form. */
/* Eine Spaltenzahl pro Breakpoint. Vorher standen vier konkurrierende
   grid-template-columns fuer dieselbe Liste im Stylesheet; zwischen 481 und
   768px gewann die engste Fassung mit zwei rund 276px breiten Spalten. */
.safety-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--c-bd)}
.sfcard{background:none;border:none;border-bottom:1px solid var(--c-bds);border-radius:0;padding:22px 0;text-align:left;display:flex;gap:14px;align-items:flex-start}
/* Letzte Zeile ohne Trennlinie. Bei zwei Spalten und ungerader Anzahl steht
   das letzte Element allein links - sonst haengt dort eine halbe Linie. */
.sfcard:last-child,.sfcard:nth-last-child(2):nth-child(odd){border-bottom:none}
.sfcard .sf-ico{flex:0 0 auto;color:var(--c-accent);margin-top:1px}
.sfcard h3{font-size:15px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.sfcard p{font-size:13.5px;color:var(--c-ink2);line-height:1.6}

/* ══ PREISE ═══════════════════════════════════════ */
/* Eine kurze, ehrliche Auskunft statt Tarifkarten: drei Zeilen, Betrag
   rechts, Trennlinien wie in Ablauf und Sicherheit. Der Signalton bleibt
   dem echten Betrag vorbehalten, Wortantworten stehen in Tinte. */
.prices{list-style:none;border-top:1px solid var(--c-bd);max-width:860px}
.price-row{display:flex;align-items:baseline;gap:28px;padding:22px 0;border-bottom:1px solid var(--c-bds)}
.price-row:last-child{border-bottom:none}
.price-k{flex:1;min-width:0}
.price-k h3{font-size:16px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.price-k p{font-size:13.5px;color:var(--c-ink2);line-height:1.6;max-width:56ch}
.price-v{font-family:var(--f-display);font-size:24px;font-weight:400;line-height:1.1;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.price-v.is-amount{color:var(--c-signal)}
@media(max-width:600px){
  .price-row{flex-direction:column;gap:8px}
  /* Kein order-Tausch: der Betrag stand visuell ueber der Ueberschrift,
     die er beschreibt, waehrend Screenreader und Tastatur ihn danach
     lasen (WCAG 1.3.2). */
  .price-v{font-size:22px}
}

/* ══ PAY ══════════════════════════════════════════ */
.pay-note{font-size:12.5px;color:var(--c-ink3);margin-top:18px;max-width:62ch;line-height:1.6}
/* Aktion (Tabelle promotions): Hinweis ohne Restanzahl, alter Preis durchgestrichen */
.promo-note{background:var(--c-glt);border:1px solid var(--c-success-bd);color:var(--c-green2);border-radius:var(--r1);padding:10px 14px;font-size:13.5px;font-weight:500;line-height:1.5;margin-top:14px;max-width:62ch}
.promo-note[hidden]{display:none}
/* Aktion im ersten Formularschritt und Entwurfshinweis im Anmeldefenster. */
.promo-note-post{margin:-6px 0 18px}
.auth-post-note{margin:0 0 18px;max-width:none}
/* Schritt 3 im Gastmodus: warum jetzt ein Konto kommt. */
.post-guest-note{font-size:13.5px;color:var(--c-ink2);line-height:1.55;background:var(--c-bg1);border:1px solid var(--c-bd);border-radius:var(--r1);padding:12px 14px;margin:0 0 14px}
.post-guest-note[hidden]{display:none}
.promo-old{color:var(--c-ink4);font-weight:400;text-decoration:line-through;margin-right:.35em;font-size:.8em}

/* ══ TESTIMONIALS ═════════════════════════════════ */

/* ══ CTA ══════════════════════════════════════════ */
/* ── CTA ── die EINZIGE dunkle Flaeche der Seite. Sie markiert das Ende
   und die Entscheidung – deshalb dunkel, nicht zur Dekoration. Keine Orbs,
   keine Glaskarten. */
.cta-sec{background:var(--c-ink);color:#fff}
.cta-inner{display:flex;gap:48px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.cta-text{max-width:46ch}
.cta-h{font-family:var(--f-display);font-size:clamp(26px,2.8vw,38px);font-weight:400;line-height:1.18;letter-spacing:-.02em;margin-bottom:12px}
.cta-p{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.7}
.cta-acts{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.cta-acts .btn{font-size:15px;padding:13px 24px}
.btn-oncta{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-bg)}
.btn-oncta:hover{background:var(--c-bg1);border-color:var(--c-bg1)}
.btn-oncta-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-oncta-2:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ══ FOOTER ═══════════════════════════════════════ */
footer{background:var(--c-bg);border-top:1px solid var(--c-bds)}
.foot-top{padding:64px 0 40px;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-brand p{color:var(--c-ink3);font-size:13.5px;line-height:1.7;margin-top:12px;max-width:250px}
/* h3 statt h4 (Post-Redesign-Fix): die Rechtstext-Sektion stand frueher
   mit ihren H2/H3 zwischen dem letzten Abschnitt und dem Footer. Seit sie
   nicht mehr im Seitenfluss liegt, folgte auf eine H2 direkt eine H4 -
   eine uebersprungene Ebene. Die Spaltenueberschriften sind Unterpunkte
   des Footers, H3 ist die richtige Ebene. Optik unveraendert. */
.foot-col h3{font-size:12px;font-weight:600;margin-bottom:14px;color:var(--c-ink);text-transform:uppercase;letter-spacing:.06em}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col ul li a{color:var(--c-ink3);font-size:13.5px;transition:color .15s}
.foot-col ul li a:hover{color:var(--c-blue)}
.foot-bot{padding:20px 0;border-top:1px solid var(--c-bds);display:flex;justify-content:center;align-items:center;text-align:center;font-size:12.5px;color:var(--c-ink4)}

/* Report button */
.report-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--c-ink4);background:none;border:none;
  cursor:pointer;padding:4px 8px;border-radius:var(--r0);
  transition:all .15s;font-family:var(--f);
}
.report-btn:hover{background:var(--c-rlt);color:var(--c-red)}

/* Rating stars */
.rating-stars{display:flex;align-items:center;gap:3px}
/* .star ist seit Phase 10 ein <button type="button">. background/border/padding werden
   zurueckgesetzt, damit sich optisch nichts aendert. */
.star{font-size:14px;cursor:pointer;transition:all .1s;color:var(--c-bg3);
  background:none;border:none;padding:0;font-family:inherit;line-height:1}
.star.on,.star:hover{color:var(--c-star)}
/* Im Bewertungsdialog sind die Sterne das Eingabefeld - dort brauchen sie
   Groesse und eine Zielflaeche, nicht nur 14px Schrift. */
#rating-stars-row .star{font-size:30px;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center}
#rating-stars-row .star:focus-visible{border-radius:var(--r1)}
/* .verif-item/.verif-dot entfernt (Phase 7): die Bestaetigungen im Profil
   nutzen jetzt dieselbe Liste wie die offenen Profilfelder (.acct-miss) mit
   Haken bzw. offenem Kreis - Form und Text unterscheiden die Zustaende,
   nicht nur die Fuellfarbe der Scheibe. */

/* Safety warning modal */
.safety-modal-icon{font-size:48px;text-align:center;margin-bottom:14px}
.safety-rule{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--c-bds);font-size:13px}
.safety-rule:last-child{border-bottom:none}
.safety-rule-icon{font-size:16px;flex-shrink:0;margin-top:1px}

/* Profile trust score */
/* .trust-score/.ts-bar/.ts-fill entfernt (Phase 7): der Profilbereich war ihr
   einziger Nutzer. Dort stand "Profilstaerke 80 %" als gruene Leiste mit
   gruenem Abzeichen - das liest sich wie eine Bewertung der Person, obwohl es
   nur zaehlt, wie viele Felder ausgefuellt sind, und es widersprach der
   zweiten, anders gerechneten Prozentzahl auf der Startseite. Ersetzt durch
   eine Liste der offenen Felder (.acct-todo / .acct-miss).
   Auch .trust-badge/.trust-verified/.trust-new sind damit ohne Nutzer und
   oben entfernt. */
.acct-miss{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.acct-miss li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--c-ink2);line-height:1.45}
.acct-miss svg{flex-shrink:0;margin-top:2px}
.acct-miss li.done,.acct-miss li.filled{color:var(--c-ink3)}
/* Gruen nur am geprueften Haken, nicht am ausgefuellten Feld. */
.acct-miss li.done svg{color:var(--c-success)}
.acct-miss li.filled svg{color:var(--c-ink4)}
.acct-miss li.open svg{color:var(--c-ink4)}

/* Content warning box */
.content-warn{
  background:var(--c-alt);border:1px solid var(--c-amber-bd);border-radius:var(--r1);
  padding:10px 14px;font-size:12.5px;color:var(--c-amber);margin-bottom:12px;
}
.legal-tab{padding:8px 16px;border-radius:var(--r1);font-size:13.5px;font-weight:600;background:var(--c-bg);border:1px solid var(--c-bd);color:var(--c-ink3);cursor:pointer;transition:all .15s;font-family:var(--f)}
.legal-tab:hover{background:var(--c-bg1);border-color:var(--c-ink5);color:var(--c-ink2)}
.legal-tab.on{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.imp-sec{background:var(--c-bg1)}
#legal-de-note{display:none}
html[lang="en"] #legal-de-note{display:block}
.imp-box{max-width:700px;margin:0 auto;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r3);padding:48px}
.imp-box h2{font-family:var(--f-display);font-size:26px;font-weight:400;margin-bottom:4px}
.imp-sub{color:var(--c-ink3);font-size:13px;margin-bottom:32px}
/* Die Rechtstext-Sektion ist nur noch Inhaltsquelle fuer den
   Rechtstext-Screen, kein sichtbarer Abschnitt der Seite mehr.
   [hidden] allein genuegt nicht, sobald eine andere Regel display setzt -
   deshalb zusaetzlich explizit. */
.legal-source,.legal-source[hidden]{display:none !important}
.imp-blk{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--c-bds)}
.imp-blk:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.imp-blk h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink4);margin-bottom:8px}
/* In den Rechtstexten stehen E-Mail-Adressen und lange URLs - Woerter
   ohne Trennmoeglichkeit. Gemessen 320px: 251px Inhalt in 246px Kasten. */
.imp-blk p,.imp-blk a{font-size:14px;color:var(--c-ink2);line-height:1.75;overflow-wrap:anywhere}
.imp-blk a{color:var(--c-blue)}

/* ══ COOKIE-HINWEIS ═══════════════════════════════ */
/* Reiner Informationshinweis: es gibt nur technisch notwendige Speicherungen
   (Cookie-Richtlinie, § 25 Abs. 2 TDDDG), also nichts, dem zugestimmt oder
   das abgelehnt werden koennte - deshalb bewusst kein "Ablehnen".
   Desktop: kompakte Karte unten links (rechts sitzt #scrolltop).
   Mobil: flache Leiste am unteren Rand, Knoepfe nebeneinander.
   z-index 8900: ueber Bottom-Nav (1200), unter offenem Mobile-Menue (8950)
   und Modalen (9000) - sonst verdeckt der Hinweis deren untere Knoepfe. */
#cookie{
  position:fixed;left:24px;bottom:24px;z-index:8900;
  width:380px;max-width:calc(100% - 48px);
  background:var(--c-bg);color:var(--c-ink);
  border:1px solid var(--c-bd);border-radius:var(--r4);
  padding:20px;box-shadow:var(--sh-overlay);
  animation:ckIn .32s cubic-bezier(.2,.8,.2,1);
}
#cookie.ck-out{animation:ckOut .2s ease-in forwards}
@keyframes ckIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ckOut{to{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){#cookie,#cookie.ck-out{animation:none}}
#cookie .ck-title{font-size:14.5px;font-weight:600;color:var(--c-ink);margin:0 0 6px;letter-spacing:-.005em}
#cookie .ck-text{font-size:13.5px;color:var(--c-ink2);line-height:1.55;margin:0 0 16px}
#cookie .ck-btns{display:flex;gap:8px}
#cookie .ck-btn{
  flex:1;min-height:40px;padding:0 14px;border-radius:var(--r1);
  font-family:var(--f);font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--c-bd);background:var(--c-bg);color:var(--c-ink);
  transition:background .15s,border-color .15s;
}
#cookie .ck-btn:hover{background:var(--c-bg1);border-color:var(--c-ink5)}
#cookie .ck-btn.ck-accept{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
#cookie .ck-btn.ck-accept:hover{background:var(--c-ink2);border-color:var(--c-ink2)}
@media(max-width:480px){
  #cookie{
    left:0;right:0;bottom:0;width:auto;max-width:none;
    border-radius:var(--r4) var(--r4) 0 0;border-width:1px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  #cookie .ck-text{margin-bottom:14px}
}
@media(max-width:480px){
  .for-grid{grid-template-columns:1fr}
}
/* Mobile chat improvements */
@media(max-width:600px){
  .msg-area{-webkit-overflow-scrolling:touch}
  #ch-input{font-size:16px} /* prevent iOS zoom on focus */
  /* KEIN max-height mehr: die Karte fliesst, gescrollt wird das Overlay.
     Ein max-height:92dvh hier war mit offener Tastatur die Ursache dafuer,
     dass das Ende langer Formulare nicht mehr erreichbar war. */
  .mcard{border-radius:var(--r3) var(--r3) 0 0}
  /* Weniger Rand auf kleinen Displays, damit lange Formulare mehr Platz haben */
  .moverlay{padding:10px}
  .imp-box{padding:20px 14px}
  #modal-pdf .mcard{border-radius:0;max-height:100dvh;max-height:100vh}
  #modal-pdf iframe{min-height:55vh}
  .ck-btns{gap:6px}
  /* Form inputs: prevent iOS zoom */
  input[type=text],input[type=email],input[type=password],input[type=date],
  select,textarea{font-size:16px!important}
}

/* ══ PDF MODAL ═══════════════════════════════════ */
/* AUSNAHME vom Overlay-Scroll: der PDF-Viewer ist ein Rahmen fester Hoehe,
   gescrollt wird im iframe durch den PDF-Betrachter selbst. */
#modal-pdf{overflow:hidden}
#modal-pdf .mcard{max-width:760px;width:95vw;max-height:90vh;display:flex;flex-direction:column}
#modal-pdf .pdf-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--c-bds);flex-shrink:0;
}
#modal-pdf .pdf-title{font-size:15px;font-weight:600;color:var(--c-ink)}
#modal-pdf .pdf-frame{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;overflow:hidden;background:var(--c-bg1);
}
#modal-pdf iframe{width:100%;height:100%;min-height:500px;border:none;flex:1}
#modal-pdf .pdf-fallback{
  padding:32px 24px;text-align:center;
}
#modal-pdf .pdf-fallback p{color:var(--c-ink3);margin-bottom:16px;font-size:14px}
@media(max-width:600px){
  #modal-pdf .mcard{max-height:100dvh;border-radius:0;border:none}
  #modal-pdf iframe{min-height:60vh}
}

/* ══ LEGAL LINK STYLING ══════════════════════════ */
.legal-link{
  color:var(--c-blue);text-decoration:underline;cursor:pointer;
  font-weight:500;
}
.legal-link:hover{color:var(--c-blue2)}

/* ══ MODALS ══════════════════════════════════════ */
/* Overlay-Blur bewusst nur unpräfixiert (wie bisher) + auf 4px reduziert. KEIN
   -webkit-backdrop-filter: würde den teuren Blur in älteren iOS-Safari erst aktivieren
   (dort aktuell aus) → mehr Ruckeln statt weniger. Der dunkle 72%-Tint trägt den Look. */
/* ── Sauberes, einheitliches Modal-Scroll-System (ein Container, iOS-Safari-sicher) ──
   Overlay: zentriert, KEIN backdrop-filter (Compositing-Trigger, bricht WebKit-Scroll-
   Hit-Testing), scrollt selbst nicht (overflow:hidden). Die .mcard ist der EINE
   Scroll-Container: overflow-y:auto + natives Momentum, KEIN transform (der zweite
   Compositing-Trigger, der in Safari das Scrollen über Kind-Elementen blockiert). */
/* ── EIN Scroller pro Modal: das OVERLAY, nicht die Karte ──────────────────
   Vorher war die .mcard ein innerer Scroller (max-height:100% + overflow-y:auto)
   INNERHALB eines fixierten, nicht scrollenden Flex-Overlays – bei gleichzeitig
   per body.modal-lock fixiertem Body. Diese Verschachtelung ist die Ursache der
   Wisch-Probleme auf iOS/Safari: die Geste trifft mal den inneren, mal den
   aeusseren Container, und mit offener Tastatur schrumpft der sichtbare Bereich,
   waehrend max-height:92dvh nicht mitgeht -> Formularende unerreichbar.

   Jetzt scrollt das Overlay selbst, die Karte fliesst. Das ist dieselbe
   Grundregel, die den Account-Bereich (.page-modal) seit dem Safari-Fix stabil
   macht: genau EIN Scroll-Container, keine Verschachtelung.
   Optik unveraendert – Abdunklung, Zentrierung und Kartenbreite bleiben gleich.
   margin:auto auf der Karte haelt die Zentrierung UND verhindert das bekannte
   Flexbox-Problem, dass bei zu hohem Inhalt der obere Rand abgeschnitten wird. */
/* ── WARUM align-items:flex-start statt center ──────────────────────────
   Das Overlay ist selbst der Scroller (overflow-y:auto). Ein Flex-Kind, das
   mit align-items:center zentriert wird UND hoeher ist als der Container,
   haengt oben und unten gleich weit heraus - und der obere Ueberhang liegt
   VOR dem Scrollanfang. Er ist damit nicht erreichbar: scrollTop kann nicht
   negativ werden.

   Gemessen im Auftrag-erstellen-Modal, Schritt 3: die Karte ist bei 390px
   2058px hoch, der Sichtbereich 844px. Blink klemmt den Ueberhang seit
   einigen Versionen still an den Anfang, WebKit tut das nicht - genau
   deshalb faellt es auf Safari und auf dem Telefon auf und in Chrome nicht.

   Die Loesung ist nicht mehr Technik, sondern weniger: flex-start plus das
   margin:auto, das .mcard ohnehin traegt. Passt die Karte, zentriert das
   margin sie wie vorher. Passt sie nicht, beginnt sie oben und der gesamte
   Inhalt bleibt erreichbar. Der abgedunkelte Hintergrund bleibt unberuehrt. */
.moverlay{position:fixed;inset:0;z-index:9000;background:rgba(var(--rgb-ink),.72);display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;opacity:0;pointer-events:none;transition:opacity .2s}
.moverlay.open{opacity:1;pointer-events:all}
.mcard{background:var(--c-bg);border-radius:var(--r4);width:100%;max-width:500px;box-shadow:var(--sh4);position:relative;margin:auto;max-height:none;overflow:visible;border:1px solid var(--c-bds)}
.mcard-inner{padding:36px}
.mclose{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--c-bg1);border:1px solid var(--c-bd);font-size:14px;color:var(--c-ink3);transition:all .15s;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mclose:hover{background:var(--c-bg2);color:var(--c-ink)}
.mtabs{display:flex;gap:4px;background:var(--c-bg1);border:1px solid var(--c-bd);border-radius:var(--r1);padding:3px;margin-bottom:24px}
.mtab{flex:1;padding:9px;border-radius:var(--r0);font-size:14px;font-weight:600;color:var(--c-ink3);background:transparent;border:none;cursor:pointer;transition:all .15s}
.mtab.on{background:var(--c-bg);color:var(--c-ink);box-shadow:var(--sh0);border:1px solid var(--c-bd)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--c-ink2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--c-bd);border-radius:var(--r1);font-family:inherit;font-size:14px;color:var(--c-ink);outline:none;transition:all .15s;background:var(--c-bg);box-shadow:var(--sh0)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(var(--rgb-accent),.12)}
.field input.err,.field textarea.err{border-color:var(--c-red)}
/* ── Ortssuche mit Vorschlagsliste (SRGeo) ──────────────────────────────
   Nur vorhandene Tokens. Die Radios der Moduswahl werden von der globalen
   Regel .field input{width:100%;padding...} erfasst und hier ausdruecklich
   zurueckgesetzt; sichtbar ist die Pille daneben, bedienbar bleibt das
   echte Radio (Tastatur, Screenreader). */
.geo-lbl{display:block;font-size:13px;font-weight:600;color:var(--c-ink2);margin-bottom:8px}
.geo-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.field .geo-mode-opt{display:inline-flex;margin:0;font-weight:500;cursor:pointer;position:relative}
.field .geo-mode-opt input{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;border:0;box-shadow:none;pointer-events:none}
.geo-mode-opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--c-bd);border-radius:999px;font-size:13.5px;color:var(--c-ink2);background:var(--c-bg);transition:border-color .15s,background .15s}
.geo-mode-opt input:checked + span{border-color:var(--c-accent);background:rgba(var(--rgb-accent),.08);color:var(--c-accent);font-weight:600}
.geo-mode-opt input:focus-visible + span{outline:2px solid var(--c-accent);outline-offset:2px}
.geo-host{position:relative}
.geo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1000;margin:0;padding:4px;list-style:none;
  background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r2);box-shadow:var(--sh3);
  max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain}
.geo-opt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:8px 12px;border-radius:var(--r1);cursor:pointer}
.geo-opt:hover,.geo-opt[aria-selected="true"]{background:var(--c-bg1)}
.geo-a{font-size:14px;font-weight:500;color:var(--c-ink);overflow-wrap:anywhere}
.geo-b{font-size:12.5px;color:var(--c-ink3);overflow-wrap:anywhere}
.geo-status{font-size:12.5px;color:var(--c-ink3);margin-top:6px}
.hsearch-field .geo-status{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0}
.geo-pub{font-size:12.5px;font-weight:600;color:var(--c-accent);margin-top:6px}
.field textarea{resize:vertical;min-height:80px;line-height:1.5}
.ferr{font-size:12px;color:var(--c-red);margin-top:4px;display:none}
.ferr.show{display:block}
.pw-wrap{position:relative}.pw-wrap input{padding-right:48px}
/* Gemessen 4x4px (Phase 9): der Knopf war genau so gross wie sein Inhalt, und
   der ist ein Symbol, das erst nachtraeglich gezeichnet wird. Praktisch nicht
   zu treffen - weder mit dem Finger noch mit der Maus. Jetzt eine feste
   Flaeche von 44x44; das Symbol darin bleibt so klein wie vorher. */
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;font-size:15px;color:var(--c-ink4);padding:0}
.pw-eye:focus-visible{border-radius:var(--r1)}
/* Das Symbol fehlte: der Knopf war leer und damit unsichtbar. Jetzt ein
   Inline-SVG (Lucide Eye/EyeOff), Farbe ink3 statt ink4 fuer >= 3:1. */
.pw-eye{color:var(--c-ink3)}
.pw-eye svg{width:20px;height:20px;display:block;pointer-events:none}
.frow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.role-card{border:1.5px solid var(--c-bd);border-radius:var(--r2);padding:16px 12px;text-align:center;cursor:pointer;transition:all .15s;background:var(--c-bg)}
.role-card:hover{border-color:var(--c-blue);background:var(--c-blt)}
.role-card.on{border-color:var(--c-blue);background:var(--c-blt);box-shadow:0 0 0 3px rgba(var(--rgb-accent),.1)}
.role-card .rico{font-size:26px;margin-bottom:7px}.role-card .rname{font-size:13.5px;font-weight:600}.role-card .rsub{font-size:11.5px;color:var(--c-ink3);margin-top:2px}
.info-box{background:var(--c-blt);border:1px solid var(--c-accent-bd);border-radius:var(--r1);padding:12px 14px;font-size:13px;color:var(--c-blue2);margin-bottom:14px;line-height:1.6}
.warn-box{background:var(--c-alt);border:1px solid var(--c-amber-bd);border-radius:var(--r1);padding:12px 14px;font-size:13px;color:var(--c-amber);margin-bottom:14px;line-height:1.6}
.succ-box{background:var(--c-glt);border:1px solid var(--c-success-bd);border-radius:var(--r1);padding:12px 14px;font-size:13px;color:var(--c-green2);margin-bottom:14px;line-height:1.6}
.check-row{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--c-ink3);margin-bottom:14px}
/* 14x14 war auf dem Telefon kein Bedienelement. Der Einwilligungstext bleibt
   woertlich unveraendert - nur das Kaestchen waechst. */
/* Bewusst NUR im Auftrags- und Nachzahl-Dialog: die Registrierung nutzt
   dieselbe Klasse und ist Sperrzone. */
#modal-post .check-row input[type=checkbox],#modal-resume-pay .check-row input[type=checkbox]{margin-top:1px;accent-color:var(--c-accent);flex-shrink:0;width:20px;height:20px;cursor:pointer}
#modal-post .check-row label,#modal-resume-pay .check-row label{cursor:pointer}
.check-row a{color:var(--c-blue)}
.stepbar{display:flex;gap:4px;margin-bottom:20px}
.sdot{flex:1;height:3px;border-radius:var(--r0);background:var(--c-bg2);transition:background .3s}
.sdot.done{background:var(--c-accent-bd)}.sdot.active{background:var(--c-accent)}
.step-lbl{font-size:11px;color:var(--c-ink3);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}

/* ── AUFTRAG EINSTELLEN ────────────────────────────────────────────────
   Weniger Formular, mehr gefuehrtes Gespraech: drei Schritte, pro Schritt
   eine Frage, Hinweise direkt unter dem Feld statt als Fehlerwolke am Ende. */
.post-h{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-bottom:18px}
.post-fs{border:none;padding:0;margin:0 0 18px}
.post-lg{padding:0;font-size:13px;font-weight:600;color:var(--c-ink2);margin-bottom:8px}
.fhint{font-size:12.5px;color:var(--c-ink3);line-height:1.5;margin-top:6px}
.fhint.err{color:var(--c-red)}
.post-nav{display:flex;gap:10px;margin-top:20px}
.post-nav .btn-outline{flex:1}
.post-nav .btn-dark{flex:2}

/* Kontrollansicht: eine Liste von Fakten, kein weiteres Formular. */
.post-sum{border:1px solid var(--c-bd);border-radius:var(--r2);overflow:hidden;margin:20px 0 14px}
.post-sum-h{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink3);padding:12px 16px 0}
.post-sum dl{display:grid;grid-template-columns:auto 1fr;gap:0;padding:10px 16px 14px}
.post-sum dt{font-size:12.5px;color:var(--c-ink3);padding:5px 14px 5px 0;white-space:nowrap}
.post-sum dd{font-size:13.5px;color:var(--c-ink);padding:5px 0;min-width:0;overflow-wrap:anywhere}
.post-sum dd.is-none{color:var(--c-ink4)}
.post-sum dd b{font-weight:600;color:var(--c-signal);font-variant-numeric:tabular-nums}
/* Die Gebuehr steht in derselben Kontrollansicht wie der Auftrag - nicht
   erst unten am Stripe-Knopf. */
.post-fee{border:1px solid var(--c-bd);border-top:none;border-radius:0 0 var(--r2) var(--r2);background:var(--c-bg1);padding:13px 16px;margin:-14px 0 18px}
.post-fee-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--c-ink2);flex-wrap:wrap}
.post-fee-row>span{min-width:0}
.post-fee-v{font-size:16px;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.post-fee-p{font-size:12.5px;color:var(--c-ink3);margin-top:5px;line-height:1.5}
/* minmax(0,1fr) statt 1fr (Phase 9): 1fr ist minmax(auto,1fr) - eine Spalte
   waechst also ueber ihren Anteil hinaus, sobald der laengste Kategoriename
   breiter ist. Gemessen bei 320px: Spalten 131px und 137px statt 2x134px,
   der Picker stand 17px (DE) bzw. 27px (EN) ueber dem Kartenrand. */
.cat-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cpick{border:1.5px solid var(--c-bd);border-radius:var(--r2);padding:18px 14px;text-align:center;cursor:pointer;transition:all .18s;background:var(--c-bg)}
.cpick:hover{border-color:var(--c-accent-bd);background:var(--c-bg1)}
/* Ausgewaehlt ohne Ring - dieselbe ruhige Flaeche wie die aktive Job-Card. */
.cpick.on{border-color:var(--c-accent);background:var(--c-accent-soft)}
.cpick .ci{color:var(--c-ink2);margin-bottom:8px;display:flex;justify-content:center}
.cpick.on .ci{color:var(--c-accent)}
/* Gemessen (Phase 9, EN, 320px): "Moving/Furniture" ist 136px breit, die
   Zelle 86px - ein Schraegstrich ist keine Trennstelle, das Wort stand ueber
   dem Rand des Feldes. */
.cpick .cn{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.cpick .cs{font-size:12px;color:var(--c-ink3);margin-top:3px;font-variant-numeric:tabular-nums}
.success-screen{text-align:center;padding:16px 0}
.success-icon{font-size:56px;margin-bottom:14px}
.success-screen h3{font-size:19px;font-weight:600;margin-bottom:8px}
.success-screen p{color:var(--c-ink3);font-size:14px;line-height:1.7;margin-bottom:20px}
/* rechts Platz fuer .mclose - sonst liegt der Kreis auf dem Betrag und ein
   Klick auf die letzten Ziffern schliesst das Modal. */
.jd-header{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:16px;padding-right:38px}
.jd-title{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.jd-price{font-family:var(--f-display);font-size:28px;font-weight:500;color:var(--c-signal);font-variant-numeric:tabular-nums;letter-spacing:-.02em;flex-shrink:0}
/* Dieselbe Reihenfolge wie in der Karte, nur ausgeschrieben: Ort, Zeit,
   Kategorie als beschriftete Fakten statt als Pillenreihe. */
.jd-facts{display:flex;flex-wrap:wrap;gap:16px 30px;padding:14px 0;margin-bottom:18px;border-top:1px solid var(--c-bds);border-bottom:1px solid var(--c-bds)}
.jd-fact{min-width:0}
.jd-fact dt{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink3);margin-bottom:5px}
.jd-fact dd{font-size:14px;color:var(--c-ink);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
/* overflow-wrap:anywhere (Phase 9): eine im Auftragstext genannte Adresse ist
   ein Wort ohne Trennmoeglichkeit. Gemessen bei 320px: der Kasten war 222px
   breit, sein Inhalt 405px - und .moverlay hat overflow-x:hidden, der Rest war
   also nicht abgeschnitten-und-scrollbar, sondern schlicht weg. Noch bei 480px
   fehlten 45px. .jd-title trug die Regel laengst, die Beschreibung nicht. */
.jd-desc{font-size:14px;color:var(--c-ink3);line-height:1.7;margin-bottom:20px;
  overflow-wrap:anywhere}
.auftr-box{display:flex;align-items:center;gap:12px;background:var(--c-bg1);border:1px solid var(--c-bds);border-radius:var(--r2);padding:14px 16px;margin-bottom:18px}
.auftr-name{font-size:14px;font-weight:600}
.auftr-meta{font-size:12px;color:var(--c-ink3);display:flex;gap:8px;margin-top:3px;flex-wrap:wrap}
.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--c-ink4);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--c-bd)}
.muted-link{text-align:center;font-size:13px;color:var(--c-ink3);margin-top:12px}
.muted-link a{color:var(--c-blue);cursor:pointer}
.mt-12{margin-top:12px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.62);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
/* Dunkle Spinner-Variante fuer helle Flaechen – ersetzt frueher genutzte Emoji-Ladeanzeigen */
.spin-dark{width:26px;height:26px;border-color:var(--c-bg2);border-top-color:var(--c-ink3)}

/* ══ TOAST ═══════════════════════════════════════ */
/* pointer-events:none (Phase 9): der Hinweis liegt mit z-index 9999 ueber
   allem, auch ueber offenen Modalen. Er enthaelt nichts Bedienbares - ohne
   diese Zeile faengt er in den Sekunden, die er sichtbar ist, Tipper ab,
   die dem Knopf darunter galten. Im Ruhezustand steht er 70px unterhalb
   des Sichtbereichs und stoert dort ohnehin nicht. */
/* Root Cause "Snackbar abgeschnitten": dieselbe Regel setzte vorne
   white-space:normal und hinten white-space:nowrap - die spaetere Angabe
   gewinnt, lange Meldungen liefen einzeilig ueber beide Bildschirmraender.
   Dazu: der verborgene Zustand verschob nur um 70px, eine mehrzeilige
   Meldung lugte dann unten hervor; und auf dem Telefon lag sie ueber der
   Bottom-Nav. */
#toast{pointer-events:none;position:fixed;left:50%;bottom:24px;z-index:9999;box-sizing:border-box;
  width:max-content;max-width:min(calc(100vw - 32px),560px);height:auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r2);background:var(--c-ink);color:#fff;box-shadow:var(--sh4);
  font-size:13.5px;font-weight:500;line-height:1.45;text-align:center;
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
  opacity:0;transform:translateX(-50%) translateY(calc(100% + 24px));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){
  /* ueber der Bottom-Nav (gleiche Hoehe wie #scrolltop) */
  #toast{bottom:calc(80px + env(safe-area-inset-bottom));padding:12px 16px}
}
#toast.ok{background:var(--c-success-dark)}#toast.err{background:var(--c-red-dark)}

/* ══ CHAT ═══════════════════════════════════════════════════════════════════
   Jede Unterhaltung gehoert zu genau EINEM Auftrag. Das ist der Unterschied
   zu einem Messenger, und deshalb traegt der Kopf den Auftrag als eigene,
   antippbare Zeile - nicht als kleingedruckte Beifuegung zum Namen.

   SCROLL-ARCHITEKTUR (nicht anfassen): das Chatfenster ist die eine Ausnahme
   vom Overlay-Scroll. .chat-win{overflow:hidden}, die Karte hat feste Hoehe,
   und .msg-area ist der EINZIGE Scroller darin. Keine Regel in diesem Block
   fuegt einen zweiten hinzu. */
.chat-modal-list .mcard{max-width:600px}
.chat-search-wrap{display:flex;align-items:center;gap:8px;background:var(--c-bg1);border:1px solid var(--c-bd);border-radius:var(--r1);padding:9px 14px;margin-bottom:8px}
.chat-search-wrap input{border:none;outline:none;background:transparent;font-size:14px;color:var(--c-ink);width:100%}
/* Auf dem Desktop darf die Liste einen eigenen Scrollbereich haben (das Modal
   bleibt dadurch kompakt). Auf Touch waere das ein zweiter Scroller im
   Overlay-Scroller - dort fliesst die Liste stattdessen. */
.thread-list{max-height:460px;overflow-y:auto;list-style:none;margin:0;padding:0}
@media(max-width:600px){ .thread-list{max-height:none;overflow:visible} }
.thread-list::-webkit-scrollbar{width:4px}.thread-list::-webkit-scrollbar-thumb{background:var(--c-bg2);border-radius:var(--r0)}

/* ── Eine Unterhaltung in der Liste ──────────────────────────────────────
   Eine Zeile = EIN Button. Vorher war die Zeile ein klickbares div mit einem
   zweiten klickbaren span (dem Namen) darin - weder fokussierbar noch mit der
   Tastatur bedienbar, und der innere Klick musste den aeusseren abfangen. */
.ct-item{border-bottom:1px solid var(--c-bds)}
.ct-item:last-child{border-bottom:none}
.ct{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 4px 13px 24px;
  background:none;border:none;font-family:inherit;text-align:left;
  color:var(--c-ink);cursor:pointer}
.ct:hover{background:var(--c-bg1)}
/* Die Zeile fuellt die volle Breite der scrollenden Liste. Ein Fokusring mit
   positivem Abstand wuerde links und rechts abgeschnitten - er liegt deshalb
   innen, genau wie bei .cat-pill. */
.ct:focus-visible{outline-offset:-2px;border-radius:0}
/* Ungelesen: EIN Marker - der Punkt vor dem Namen - plus volle Tinte im
   Vorschautext. Vorher war zusaetzlich die ganze Zeile gruen eingefaerbt und
   rechts sass eine Zaehlplakette; drei Signale fuer einen Zustand.
   Die Information haengt nicht an der Farbe: der Text der Zeile enthaelt
   zusaetzlich "N ungelesene Nachrichten" (visuell versteckt). */
.ct.unread .ct-prev{color:var(--c-ink);font-weight:500}
.ct.unread .ct-time{color:var(--c-ink2)}
.ct-body{flex:1;min-width:0}
.ct-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
/* Der Name ist ein Bezeichner, keine Prosa: er wird gekuerzt statt umgebrochen.
   Bei 320px zerlegte der Umbruch "Hohenbuechler-Wittgenstein" in vier Zeilen
   und schob Auftrag und Vorschau aus dem Blick. */
.ct-name{font-size:14.5px;font-weight:600;color:var(--c-ink);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-time{font-size:12px;color:var(--c-ink4);flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Der Auftrag steht ueber der Nachricht: er ist der Grund, warum es diese
   Unterhaltung gibt. Ruhig gesetzt - vorher stand er fett in Akzentgruen und
   war das Lauteste in der Zeile.

   WARUM KEIN line-clamp MEHR: die Zeile war auf EINE Zeile beschnitten. Bei
   390px blieb von "Schrank aufbauen und alte Moebel entsorgen · 45 € · Aktiv"
   genau der Titel stehen - Betrag und Status fielen aus der Liste. In der
   Nachrichtenliste eines Marktplatzes darf der Betrag nicht derjenige sein,
   der verschwindet.

   Jetzt: Titel und Angaben sind zwei Felder in einer umbrechenden Zeile.
   Passt beides nebeneinander, steht es nebeneinander. Passt es nicht,
   RUTSCHEN Betrag und Status vollstaendig in die naechste Zeile, statt zu
   Bruchstuecken zu zerfallen - "· 1.250 € ·…" ist keine Information.
   Gekuerzt wird nur der Titel, und nur er. */
.ct-job{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:1px;min-width:0;
  font-size:12.5px;color:var(--c-ink3);margin-top:3px;line-height:1.4}
.ct-job-t{flex:0 1 auto;min-width:0;max-width:100%;font-weight:500;color:var(--c-ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Betrag und Status bleiben zusammen und brechen als Einheit um. */
.ct-job-x{flex:0 0 auto;max-width:100%;min-width:0;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
/* Betrag: gleiche Ziffernbreite wie ueberall sonst, eine Tintenstufe
   kraeftiger als der Rest der Zeile - aber nicht in Signalfarbe. Gruene
   Betraege in jeder Zeile waeren das Lauteste in einer Liste, die ruhig
   sein soll. */
.ct-job-m{flex:0 0 auto;color:var(--c-ink2);font-variant-numeric:tabular-nums}
.ct-job-s{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Nur der Zustand, der den Nutzer etwas kostet, traegt die Signalfarbe -
   dieselbe Regel wie .acct-st.pay im Konto. */
.ct-job-s.pay{color:var(--c-signal)}
.ct-job-t.dead{font-weight:400;color:var(--c-ink4);font-style:italic}
.ct-prev{font-size:13.5px;color:var(--c-ink3);margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* Ein Punkt statt einer Zaehlplakette: die genaue Zahl steht im Text der
   Zeile, sichtbar ist nur, DASS etwas ungelesen ist.

   WARUM ABSOLUT: im Fluss schob der Punkt Bild und Text jeder ungelesenen
   Zeile um 20px nach rechts - gemessen: Bild bei 89px statt 69px. Die Liste
   bekam eine ausgefranste linke Kante und sah nach Renderfehler aus. Jetzt
   sitzt er in der linken Randspalte, die jede Zeile gleichermassen hat. */
.ct-dot{position:absolute;left:8px;top:29px;width:8px;height:8px;border-radius:50%;
  background:var(--c-accent)}
.chat-empty-state{padding:34px 8px;color:var(--c-ink3)}
.chat-empty-state h4{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--c-ink)}
.chat-empty-state p{font-size:13.5px;line-height:1.6;max-width:46ch}

/* ── Chatfenster ────────────────────────────────────────────────────────── */
/* Das Chatfenster ist die eine Ausnahme: hier scrollt NICHT das Overlay,
   sondern .msg-area darin. Das Overlay bleibt deshalb overflow:hidden, und
   die Karte zentriert sich ueber margin:auto - sie ist nie hoeher als der
   Sichtbereich, der Ueberhang-Fall von oben kann hier gar nicht auftreten. */
.chat-win{overflow:hidden}
.chat-win .mcard{max-width:560px;display:flex;flex-direction:column;height:85vh;max-height:640px;padding:0;overflow:hidden}
/* min-height:0 auf der Karte und auf dem Verlauf: ein Flex-Kind hat als
   Mindestgroesse von sich aus min-content. Ohne diese beiden Zeilen darf
   .msg-area nicht kleiner werden als die Summe aller Nachrichten - es
   waechst dann ueber die Karte hinaus, die Karte schneidet ab, und der
   Verlauf hat nichts mehr zu scrollen (scrollHeight == clientHeight).
   Heute traegt die Karte eine feste Hoehe, weshalb Blink das Richtige tut;
   die Regel macht das unabhaengig von dieser Nebenbedingung. */
.chat-win .mcard{min-height:0}
/* Kopf in zwei Zeilen: WER - und darunter, gleichwertig lesbar, WOZU. */
.ch-header{flex-shrink:0;background:var(--c-bg);border-bottom:1px solid var(--c-bds)}
.ch-top{display:flex;align-items:center;gap:11px;padding:12px 14px}
.ch-ib{width:36px;height:36px;border-radius:var(--r1);background:none;border:1px solid var(--c-bd);
  color:var(--c-ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.ch-ib:hover{background:var(--c-bg1)}
/* Name und Bild fuehren zum Profil - ein Ziel, ein Button. */
.ch-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:none;
  padding:2px 0;font-family:inherit;text-align:left;color:var(--c-ink);cursor:pointer}
.ch-who:hover .ch-name{text-decoration:underline;text-underline-offset:3px}
.ch-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--c-bg1);border:1px solid var(--c-bd);
  color:var(--c-ink2);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ch-av img{width:100%;height:100%;object-fit:cover;display:block}
.ch-name{font-size:14.5px;font-weight:600;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Auftragskontext: eigene Zeile, volle Breite, antippbar. Zwei Ebenen -
   Titel, darunter Betrag/Ort/Status. Bewusst KEINE Jobkarte im Chat: kein
   Rahmen, kein Hintergrund, nur eine Haarlinie nach oben. */
.ch-job{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px 10px;
  background:none;border:none;border-top:1px solid var(--c-bds);font-family:inherit;text-align:left;
  color:var(--c-ink);cursor:pointer}
.ch-job:hover{background:var(--c-bg1)}
/* Volle Breite im Kopf - Fokusring innen, sonst schneidet ihn die Karte ab. */
.ch-job:focus-visible{outline-offset:-2px;border-radius:0}
.ch-job-tx{flex:1;min-width:0}
.ch-job-t{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-job-m{display:block;font-size:12px;color:var(--c-ink3);margin-top:2px;line-height:1.4}
.ch-job-ch{color:var(--c-ink4);flex-shrink:0;display:flex}
.ch-job.dead{cursor:default}
.ch-job.dead:hover{background:none}

/* ── Verlauf ────────────────────────────────────────────────────────────── */
.msg-area{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:2px;background:var(--c-bg)}
.msg-area::-webkit-scrollbar{width:4px}.msg-area::-webkit-scrollbar-thumb{background:var(--c-bg2);border-radius:var(--r0)}
.day-sep{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--c-ink4);margin:14px 0 8px}
.day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--c-bds)}
/* Kopfzeile einer Nachrichtengruppe. Sie ersetzt den Zeitstempel ueber JEDER
   Nachricht: gezeigt wird er nur, wenn der Sprecher wechselt, mehr als 30
   Minuten vergangen sind oder ein neuer Tag beginnt. Der Wert selbst geht
   nicht verloren - jede Blase traegt ihn als title-Attribut. */
.msg-h{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--c-ink4);margin:12px 0 3px;padding:0 2px}
.msg-h.me{justify-content:flex-end}
.msg-h-t{font-variant-numeric:tabular-nums}
/* Ohne verwertbaren Zeitstempel traegt die Kopfzeile nur den unsichtbaren
   Absendernamen. Sie darf dann keinen Leerraum erzeugen. */
.msg-h.nots{margin:0;padding:0}
.msg{display:flex;align-items:flex-end;gap:8px;animation:msgIn .2s ease-out}
.msg.me{flex-direction:row-reverse}
/* Der Platzhalter haelt die Blasen einer Gruppe auf einer Linie, auch wenn
   nur die erste Nachricht ein Bild traegt. */
.msg-av,.msg-avs{width:26px;flex-shrink:0}
.msg-avs{height:1px}
.msg-av img,.msg-av > div{width:26px;height:26px}
/* white-space:pre-wrap erhaelt Zeilenumbrueche aus der Nachricht. Ohne diese
   Regel kollabierte jedes \n im HTML zu einem Leerzeichen - mehrzeilige
   Nachrichten kamen als ein langer Fliesstext an.
   overflow-wrap:anywhere bricht auch lange URLs, ohne die Blase zu sprengen.
   min-width:0 am Traeger: ohne ihn schrumpfte die Blase im Flex-Kontext auf
   Mindestbreite und "Alles klar, bis dann." brach mitten im Satz um. */
.msg-w{min-width:0;max-width:min(78%, 46ch);display:flex;flex-direction:column}
.msg.me .msg-w{align-items:flex-end}
.msg-bub{padding:9px 13px;border-radius:var(--r2);font-size:14.5px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;width:fit-content;max-width:100%}
/* Zwei ruhige Flaechen statt einer gefuellten Farbblase: die eigene Nachricht
   ist ein sehr heller Akzentton mit normaler Tinte, die fremde eine Haarlinie
   auf Papier. Akzentgruen bleibt damit sparsam - die fruehere Fassung fuellte
   jede eigene Nachricht vollflaechig und machte den Verlauf laut. */
.msg.other .msg-bub{background:var(--c-bg);border:1px solid var(--c-bd);color:var(--c-ink);border-bottom-left-radius:3px}
.msg.me .msg-bub{background:var(--c-accent-soft);border:1px solid var(--c-accent-bd);color:var(--c-ink);border-bottom-right-radius:3px}
.msg + .msg{margin-top:3px}
.chat-first{padding:30px 10px;color:var(--c-ink3)}
.chat-first h4{font-size:14.5px;font-weight:600;color:var(--c-ink);margin-bottom:6px}
.chat-first p{font-size:13.5px;line-height:1.6;max-width:44ch}
.sr-scam{margin:8px 0 12px}
.sr-scam-rep{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;text-decoration:underline;cursor:pointer}

/* ── Eingabe ────────────────────────────────────────────────────────────── */
.ch-input-area{padding:10px 14px 12px;border-top:1px solid var(--c-bds);flex-shrink:0;display:flex;align-items:flex-end;gap:9px;background:var(--c-bg)}
/* Ohne Leuchtring: der Fokus zeigt sich ueber den Rand, wie in allen anderen
   Eingaben der Anwendung. */
.ch-input-wrap{flex:1;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r2);padding:7px 12px;display:flex;align-items:flex-end;gap:8px}
.ch-input-wrap:focus-within{border-color:var(--c-ink3)}
.ch-textarea{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14.5px;color:var(--c-ink);resize:none;max-height:100px;line-height:1.5;overflow-y:auto}
.ch-textarea::placeholder{color:var(--c-ink4)}
.ch-send-btn{width:40px;height:40px;border-radius:50%;background:var(--c-accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.ch-send-btn:hover{background:var(--c-accent-hover)}
.ch-send-btn:disabled{background:var(--c-bg2);color:var(--c-ink-disabled);cursor:not-allowed}

/* ══ OEFFENTLICHES PROFIL (#modal-pubprofile) ══════════════════════════════
   Leitfrage der Flaeche: "Kann ich dieser Person fuer diesen Auftrag
   vertrauen?" Deshalb ist das Profil eine AUSKUNFT, kein Schaufenster:
   linksbuendige Identitaetszeile, darunter die wenigen Zahlen, die wirklich
   aus der Datenbank kommen, dann ausdruecklich das, was NICHT geprueft ist.

   Bewusst NICHT verwendet: Karten-in-Karten, farbige Chip-Waende, Fortschritts-
   balken, Statuspunkte, Avatar-Ringe, Schatten. Keine Flaeche traegt hier einen
   Hintergrund - getrennt wird mit Haarlinien und Weissraum.

   SCROLL-ARCHITEKTUR (nicht anfassen): seit dem Safari-Fix scrollt der
   Overlay .moverlay, .mcard steht auf max-height:none/overflow:visible.
   Entscheidend ist deshalb: keine Regel in diesem Block setzt overflow,
   max-height oder eine Viewport-Hoehe - die Profilinhalte fliessen, damit
   keine zweite Scrollflaeche entsteht. Einzige Ausnahme ist das reine
   Zeilen-Clamping .sr-pf-bio-cut (-webkit-box + overflow:hidden), das
   keinen scrollbaren Bereich erzeugt. */
.mcard.prof-modal{max-width:540px}
#modal-pubprofile .mcard-inner{padding:34px 34px 28px}

/* ── Kopf: Identitaetszeile ─────────────────────────────────────────────── */
.sr-pf-id{display:flex;align-items:center;gap:16px;padding-right:34px}
.sr-pf-av{width:68px;height:68px;border-radius:50%;flex-shrink:0;display:block;object-fit:cover}
/* Fallback-Initialen: dieselbe ruhige Flaeche wie ueberall seit Phase 1.
   Kein Farbverlauf, kein Ring, kein Statuspunkt. */
.sr-pf-avf{width:68px;height:68px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--c-bg1);border:1px solid var(--c-bd);color:var(--c-ink2);font-size:25px;font-weight:600;line-height:1}
.sr-pf-idt{min-width:0;flex:1}
/* break-word statt anywhere: ein Name soll an der natuerlichen Stelle
   umbrechen (Leerzeichen, Bindestrich) und erst dann mitten im Wort, wenn
   er sonst gar nicht passt. "anywhere" zerschnitt "Hohenbuechler" schon bei
   320px in "Hohenbuechle / r-". hyphens:auto nutzt die Sprache aus
   <html lang>, die setLang() ohnehin pflegt. */
.sr-pf-name{font-size:21px;font-weight:600;color:var(--c-ink);line-height:1.25;margin:0;
  overflow-wrap:break-word;hyphens:auto}
.sr-pf-meta{font-size:13px;color:var(--c-ink3);margin-top:4px;line-height:1.45}

/* ── Vertrauenskern: Zahlen, die belegt sind ────────────────────────────── */
/* Haarlinien statt Kaesten. Die Zahl traegt die Hierarchie, nicht der Rahmen.
   Getrennt wird nur waagerecht (oben/unten) und mit Abstand - bewusst OHNE
   senkrechte Trennstriche: die Posten duerfen umbrechen, und ein senkrechter
   Strich am Anfang einer umgebrochenen Zeile stuende im Nichts.

   RASTER, nicht Flex-Zeile: als Flex-Zeile entschied die Summe der deutschen
   Beschriftungen ueber den Umbruch. Bei "1.250 Bewertungen" waren es 8px zu
   viel fuer die 470px Innenbreite der Karte, und der Streifen kippte in zwei
   ungleiche Reihen mit einem Loch. Im Raster teilen sich die Posten die
   Breite gleichmaessig, eine zu lange Beschriftung bricht INNERHALB ihrer
   Spalte um, und alle Posten bleiben auf einer Linie - unabhaengig von
   Sprache und Groessenordnung der Zahlen. */
.sr-pf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px 14px;margin-top:22px;padding:14px 0 13px;
  border-top:1px solid var(--c-bd);border-bottom:1px solid var(--c-bd)}
.sr-pf-fact{padding:4px 0;min-width:0}
/* Die Kennzahl in der Hausschrift fuer Zahlen (Newsreader) - dieselbe
   Behandlung wie .price-v, .jd-price, .step-n und .acct-score-v. Das gibt
   den Zahlen eine redaktionelle Ruhe, die kein SaaS-Dashboard hat, und
   verbindet das Profil mit dem Rest der Seite.
   BEWUSST KEINE STERNE, auch keine Ersatzgrafik: eine Note ist eine Zahl.
   Damit ist die Bewertung ohne Farbe, ohne Grafik und in jeder Schriftgroesse
   eindeutig - und es gibt keine halben Sterne, die mehr behaupten als da ist. */
.sr-pf-fv{font-family:var(--f-display);font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--c-ink);
  font-variant-numeric:tabular-nums;line-height:1.15;display:flex;align-items:baseline;gap:5px}
.sr-pf-fv-sub{font-family:var(--f-ui);font-size:13px;font-weight:400;letter-spacing:0;color:var(--c-ink3)}
.sr-pf-fl{font-size:12.5px;color:var(--c-ink3);margin-top:4px;line-height:1.35}

/* ── Verifizierungen ────────────────────────────────────────────────────── */
.sr-pf-sec{margin-top:26px}
.sr-pf-h{font-size:13px;font-weight:600;color:var(--c-ink);margin:0 0 10px;letter-spacing:0}
.sr-pf-vf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sr-pf-vf li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--c-ink2);line-height:1.45}
.sr-pf-vf svg{flex-shrink:0;margin-top:2px;color:var(--c-success)}
/* Der Hinweis auf die fehlende Ausweispruefung ist Teil des Vertrauens-
   versprechens, nicht Kleingedrucktes - deshalb gleiche Zeilenhoehe. */
.sr-pf-note{font-size:12.5px;color:var(--c-ink3);line-height:1.5;margin:10px 0 0}

/* ── Ueber / Bio ────────────────────────────────────────────────────────── */
.sr-pf-bio{font-size:14.5px;color:var(--c-ink2);line-height:1.65;margin:0;max-width:62ch;overflow-wrap:anywhere;white-space:pre-line}
.sr-pf-bio.sr-pf-bio-cut{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* Textschalter. min-height haelt die Zielflaeche auf den nach WCAG 2.5.8
   geforderten 24px, obwohl die Schrift kleiner ist; mobil steigt sie auf die
   im Projekt ueblichen 44px. */
.sr-pf-more{margin-top:8px;background:none;border:none;padding:4px 0;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--c-accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  min-height:24px;display:inline-flex;align-items:center}
.sr-pf-more:hover{color:var(--c-accent-hover)}

/* ── Bewertungen ────────────────────────────────────────────────────────── */
.sr-pf-rv{list-style:none;margin:0;padding:0}
.sr-pf-rv li{padding:14px 0;border-top:1px solid var(--c-bds)}
.sr-pf-rv li:first-child{border-top:none;padding-top:2px}
.sr-pf-rvh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sr-pf-rvn{font-size:13.5px;font-weight:600;color:var(--c-ink);min-width:0;overflow-wrap:break-word;hyphens:auto}
.sr-pf-rvr{font-size:12.5px;color:var(--c-ink2);white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.sr-pf-rvc{font-size:14px;color:var(--c-ink2);line-height:1.6;margin:5px 0 0;overflow-wrap:anywhere}
.sr-pf-rvd{font-size:12px;color:var(--c-ink4);margin-top:5px}
/* Leerer Zustand: erklaert, WARUM noch nichts da ist. Ein Profil ohne
   Bewertungen ist neu, nicht verdaechtig. */
.sr-pf-empty{font-size:13.5px;color:var(--c-ink3);line-height:1.55;margin:0}
/* Ladefehler und "nicht gefunden" teilen dieselbe ruhige Form. */
.sr-pf-msg{font-size:13.5px;color:var(--c-ink3);line-height:1.55;margin:0;padding:44px 0;text-align:center}

/* ── Fuss: Melden / Hinweis am eigenen Profil ───────────────────────────── */
.sr-pf-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--c-bd)}
.sr-pf-report{background:none;border:none;padding:4px 0;font-family:inherit;font-size:12.5px;color:var(--c-ink3);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  min-height:24px;display:inline-flex;align-items:center}
.sr-pf-report:hover{color:var(--c-red)}
.sr-pf-own{font-size:12.5px;color:var(--c-ink3);margin:0}

/* ══ ACCOUNT — eigener Bereich (#modal-profile) ═══════════════════════════════
   Scroll-Architektur: EIN einziger Scroll-Container = das Overlay .acct-overlay.
   Innerhalb des Accounts gibt es KEIN overflow/max-height/height:100vh, also
   keine verschachtelten Scrollflaechen (Safari-/iOS-sicher).
   Desktop = kompaktes Panel . Mobile = vollflaechiger Account-Screen (100dvh). */
.acct-overlay{display:block;overflow:hidden;padding:0}
.acct-scroll{height:100%;overflow-y:auto}
/* ── ACCOUNT ALS ECHTER SEITEN-SCREEN ─────────────────────────────────────────
   Im geoeffneten Zustand ist der Account KEIN fixiertes Overlay mehr, sondern
   normaler Dokumentinhalt: position:static, kein overflow, kein Body-Lock.
   Gescrollt wird damit das DOKUMENT selbst — nativer Seiten-Scroll, der in
   jedem Browser (auch Safari/iOS) funktioniert. Der Rest der Seite wird
   ausgeblendet, damit die Dokumenthoehe exakt der Account-Hoehe entspricht. */
/* #sr-chat-page ist ausgenommen: die mobile Chat-Seite wird ueber der
   Nachrichtenliste geoeffnet, und die Liste ist ein Seiten-Screen, der
   body.acct-open gesetzt hat. Ohne diese Ausnahme wuerde die Chat-Seite
   von der eigenen Koerperklasse der Liste ausgeblendet.
   #sr-captcha (captcha.js) ebenso: Anmelden/Registrieren ist ein Seiten-Screen,
   und ein ausgeblendetes Captcha liesse die Anmeldung haengen. */
body.acct-open > *:not(.moverlay):not(#sr-chat-page):not(#sr-captcha):not(script):not(style):not(#toast){display:none}
.page-modal.open{position:static;display:block;opacity:1;pointer-events:auto;overflow:visible;padding:0;background:transparent;backdrop-filter:none;transition:none}
.page-modal.open .acct-scroll{height:auto;overflow:visible}
/* Seiten-Screens mit klassischer .mcard (z. B. Anmelden/Registrieren):
   Karte fliesst mit, kein eigener Scrollbereich -> nur Dokument-Scroll. */
.page-modal.open .mcard{max-height:none;overflow:visible;margin:34px auto;transform:none}
@media(max-width:600px){ .page-modal.open .mcard{margin:0;border-radius:0;border:none;min-height:100dvh} }
.page-modal.page-hidden{display:none}

/* ══ CHAT UND AUFTRAG-ERSTELLEN ALS SEITEN-SCREENS ═══════════════════════
   Beide lagen bis hierher als schwebende Karte auf der abgedunkelten
   Website. Diese Bauform hat in diesem Projekt wiederholt Scrollprobleme
   verursacht, weil zwei Scroll-Ebenen gegeneinander arbeiten: das fixierte
   Overlay mit eigenem overflow-y und der per position:fixed gesperrte Body
   darunter. Auf iOS/Safari ist das die fragilste aller Kombinationen.

   Sie verwenden jetzt dieselbe Struktur wie Konto und Rechtstexte - die
   einzige, die in diesem Projekt nachweislich zuverlaessig scrollt:
     - body.acct-open blendet die gesamte Seite aus (display:none),
       hinter dem Screen ist also NICHTS mehr von der Website zu sehen
     - .page-modal.open ist position:static, also normaler Dokumentinhalt
     - kein Body-Lock, kein position:fixed am Body, kein Overlay-Scroll
     - der Hintergrund ist deckend, nicht halbtransparent
   Die Scrollposition der Seite merkt sich openModal() und stellt sie beim
   Schliessen wieder her - das ist bereits Teil dieser Struktur. */

/* ── Auftrag erstellen ──────────────────────────────────────────────────
   Der Wizard ist langer Fliesstext mit Formularfeldern: er fliesst mit und
   wird vom DOKUMENT gescrollt. Kein overflow, keine Hoehenbegrenzung, kein
   verschachtelter Scrollbereich - genau wie das Konto. */
.post-screen.page-modal.open .mcard{max-width:560px}

/* ══ CHAT: ZWEI GETRENNTE BAUFORMEN ═══════════════════════════════════════
   DESKTOP (>760px): das bekannte Modal .chat-win mit .mcard. Es scrollt
   dort nachweislich sauber und bleibt unveraendert.

   TELEFON (<=760px): das Modal wird fuer den Chat GAR NICHT MEHR BENUTZT.
   Der Chat ist dort eine eigene oberste Ansicht #sr-chat-page direkt auf
   Body-Ebene - kein .moverlay, keine .mcard, kein Overlay, kein
   position:fixed, kein 100dvh, kein overflow irgendwo. Siehe den Block
   "MOBILE CHAT-SEITE" direkt darunter.

   WARUM DIESER SCHNITT
   Drei Anlaeufe haben versucht, das Chat-Modal auf dem Telefon scrollfaehig
   zu machen - immer mit einem inneren Scroller in einem fixierten
   Elternteil. Auf echtem Mobile Safari blieb es dabei, dass sich der
   Verlauf nicht zuverlaessig wischen laesst. In diesem Projekt gibt es
   dagegen drei Flaechen, die auf demselben Telefon seit jeher zuverlaessig
   scrollen: Konto, Rechtstexte und "Auftrag erstellen". Ihr gemeinsames
   Merkmal ist nicht ein besserer Overflow-Wert, sondern dass sie GAR
   KEINEN eigenen Scroller haben - sie sind normaler Dokumentinhalt, und
   gescrollt wird das Dokument. Genau diese Bauform bekommt der Chat auf
   dem Telefon jetzt auch. Das ist der einzige Scrollmechanismus, den
   Safari nie falsch macht, weil es der native Seiten-Scroll ist. */
.chat-win.page-modal.open{
  position:fixed;inset:0;z-index:8920;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  min-height:0;padding:0;overflow:hidden;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.chat-win.page-modal.open .mcard{
  flex:1 1 auto;min-height:0;height:auto;max-height:none;
  margin:0 auto;max-width:720px;width:100%;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--c-bg);
  border-radius:0;border:none;border-left:1px solid var(--c-bds);
  border-right:1px solid var(--c-bds);box-shadow:none;padding:0}
.chat-win.page-modal.open .ch-header{flex:0 0 auto}
.chat-win.page-modal.open .msg-area{flex:1 1 0%;min-height:0;overflow-y:auto}
.chat-win.page-modal.open .ch-input-area{flex:0 0 auto}

/* ══ MOBILE CHAT-SEITE ════════════════════════════════════════════════════
   Eine echte eigene Seite, kein nachgebautes Overlay.

   SCROLLMODELL - bewusst das einfachste, das es gibt:
     Das DOKUMENT scrollt. Sonst nichts.
       Kopfzeile (mit Auftragskontext)  position:sticky; top:0
       Verlauf                          normaler Fluss, KEIN Scrollbereich
       Eingabe                          position:sticky; bottom:0
   Kein position:fixed, kein overflow, kein height:100dvh, keine
   verschachtelten Scrollcontainer, kein overflow:clip. Auf dem Telefon
   gibt es damit nichts mehr, was eine Wischgeste abfangen koennte: der
   Finger scrollt die Seite, wie auf jeder anderen Seite auch.

   Der Verlauf traegt weiterhin die ID #msg-area und besteht aus denselben
   Knoten wie im Desktop-Modal - sie werden beim Oeffnen hierher umgehaengt
   und beim Schliessen zurueck. Dadurch arbeiten renderMsgs(), sendMsg(),
   autoGrow() und handleChatKey() unveraendert weiter: es gibt keinen
   zweiten Chat, nur eine andere Huelle. */
#sr-chat-page{
  display:none;                    /* sichtbar nur ueber body.sr-chatpage-open */
  min-height:100vh;flex-direction:column;
  background:var(--c-bg)}
body.sr-chatpage-open #sr-chat-page{display:flex}
/* Solange die Chat-Seite offen ist, ist sie die EINZIGE sichtbare Ansicht.
   Wie bei Konto und Rechtstexten wird der Rest der Seite ausgeblendet -
   nicht abgedunkelt. Die Dokumenthoehe ist damit exakt die Hoehe des Chats;
   hinter dem Chat gibt es nichts, was mitscrollen koennte. Das schliesst
   die Bottom-Nav ein: sie ist ein direktes Body-Kind. */
/* Gleiches Muster wie bei body.acct-open: die klassischen Overlays bleiben
   ausgenommen, damit Melden, Bewerten, oeffentliches Profil und die
   PDF-Ansicht AUS dem Chat heraus weiterhin darueber aufgehen koennen.
   Geschlossene Overlays sind ohnehin opacity:0 und ohne Zeigerereignisse. */
body.sr-chatpage-open > *:not(.moverlay):not(#sr-chat-page):not(#sr-captcha):not(script):not(style):not(#toast){display:none}
/* Seiten-Screens (Konto, Nachrichtenliste, Auftrag erstellen) sind dagegen
   normaler Dokumentinhalt - sie wuerden neben der Chat-Seite weiterfliessen
   und das Dokument verlaengern. Die werden ausgeblendet. */
body.sr-chatpage-open > .moverlay.page-modal{display:none}
body.sr-chatpage-open{
  background:var(--c-bg);background-image:none;
  /* Das 66px-Polster fuer die Bottom-Nav faellt weg - die Nav ist hier
     ausgeblendet, das Polster wuerde nur eine leere Flaeche unter der
     Eingabe erzeugen und das Dokument unnoetig verlaengern. */
  padding-bottom:0}

#sr-chat-page .ch-header{
  position:sticky;top:0;z-index:3;
  background:var(--c-bg);border-bottom:1px solid var(--c-bds)}
/* Der Verlauf ist KEIN Scrollbereich. Alle Werte, die ihn im Modal zu einem
   Scroller machen, werden hier ausdruecklich zurueckgenommen.
   flex:1 0 auto laesst ihn mindestens den freien Platz fuellen, damit die
   klebende Eingabe auch bei kurzem Verlauf unten steht. */
#sr-chat-page .msg-area{
  flex:1 0 auto;height:auto;max-height:none;min-height:0;
  overflow:visible;overflow-y:visible;overflow-x:visible;
  overscroll-behavior:auto;-webkit-overflow-scrolling:auto;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px 18px;background:var(--c-bg)}
#sr-chat-page .ch-input-area{
  position:sticky;bottom:0;z-index:3;
  background:var(--c-bg);border-top:1px solid var(--c-bds);
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:9px}

/* ── Nachrichtenliste ───────────────────────────────────────────────────
   Gleiche Bauform. Der Desktop hatte hier zusaetzlich einen inneren
   Scrollbereich (.thread-list{max-height:460px;overflow-y:auto}) - also
   wieder ein Scroller im Scroller. Als Seiten-Screen fliesst die Liste und
   das Dokument scrollt. */
.chat-modal-list.page-modal.open .mcard{max-width:600px}
.chat-modal-list.page-modal.open .thread-list{max-height:none;overflow:visible}
/* Hintergrundflaeche des Account-Screens: der warme Papiergrund der Seite
   (--c-bg1) mit einem sehr dezenten Radar-Motiv aus konzentrischen Ringen
   und angedeutetem Sweep. Einziger dekorativer Verlauf der Anwendung und
   bewusst auf den Namen "Service Radar" bezogen. */
body.acct-open{
  background-color:var(--c-bg1);
  background-image:
    repeating-radial-gradient(circle at 50% 24%, rgba(var(--rgb-accent),.075) 0 1px, transparent 1px 86px),
    conic-gradient(from 202deg at 50% 24%, rgba(var(--rgb-success),.10), rgba(var(--rgb-success),0) 26%),
    radial-gradient(880px 520px at 50% 0%, rgba(var(--rgb-accent),.12), transparent 64%),
    linear-gradient(180deg,var(--c-bg-page) 0%,var(--c-bg1) 50%,var(--c-bg2) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Desktop: Karte als echtes Glas ueber dem Verlauf */
@media(min-width:601px){
  .acct{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
        border-color:var(--c-bd);box-shadow:var(--sh-overlay)}
  .acct-bar{background:rgba(255,255,255,.68)}
}
/* Rechtstext-Ansicht: breiter, angenehme Lesetypografie */
.legal-acct{max-width:760px}
/* Tabellen in den Rechtstexten: auf schmalen Bildschirmen seitlich scrollbar.
   Ohne das ragen die Spalten unsichtbar aus dem Bild heraus. */
.imp-box table,.legal-view-body table{width:100%;border-collapse:collapse}
@media(max-width:700px){
  .imp-box table,.legal-view-body table{display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;border:1px solid var(--c-bds);border-radius:var(--r1)}
  .imp-box table td,.imp-box table th,
  .legal-view-body table td,.legal-view-body table th{white-space:normal;min-width:150px}
}
.legal-view-body{padding:22px 22px 34px;font-size:14.5px;line-height:1.7;color:var(--c-ink2)}
.legal-view-body h2{font-size:18px;font-weight:600;color:var(--c-ink);margin:22px 0 8px;letter-spacing:-.01em}
.legal-view-body h3{font-size:15px;font-weight:600;color:var(--c-ink);margin:18px 0 6px}
.legal-view-body p{margin:0 0 12px}
.legal-view-body ul,.legal-view-body ol{margin:0 0 12px 20px}
.legal-view-body li{margin-bottom:5px}
.legal-view-body a{color:var(--c-blue)}
@media(max-width:600px){ .legal-view-body{padding:18px 16px 30px} }
.acct{position:relative;width:100%;max-width:440px;margin:34px auto;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--r4)}
.acct-bar{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--c-bds);background:var(--c-bg);border-radius:var(--r4) var(--r4) 0 0}
.acct-ib{width:32px;height:32px;border-radius:var(--r1);border:1px solid var(--c-bd);background:var(--c-bg);color:var(--c-ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.acct-ib:hover{background:var(--c-bg1)}
.acct-bt{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.acct-body{padding:18px 16px 24px}
.acct-hero{display:flex;gap:14px;align-items:center}
.acct-ava{position:relative;flex-shrink:0}
.acct-ava-btn{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;border:2px solid var(--c-bg);background:var(--c-ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.acct-hid{flex:1;min-width:0}
.acct-name{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.acct-sub{font-size:13px;color:var(--c-ink3);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* .acct-rate entfernt (Phase 7): die Bewertung stand in der Kopfzeile der
   Kontostartseite und zwei Zeilen tiefer noch einmal in der Zeile
   "Bewertungen" - dieselbe Zahl, zweimal. Sie steht jetzt nur noch dort. */
/* .acct-prog* entfernt (Phase 7): ein Fortschrittsbalken beantwortet nicht,
   WAS noch fehlt - und stand als zweite, abweichende Prozentzahl neben der
   "Profilstaerke" im Profilbereich. Ersetzt durch .acct-todo, das die
   fehlenden Felder beim Namen nennt. */
.acct-todo{display:block;width:100%;text-align:left;margin-top:18px;padding:12px 0;background:none;
  border:none;border-top:1px solid var(--c-bds);border-bottom:1px solid var(--c-bds);
  font-family:inherit;color:var(--c-ink);cursor:pointer}
.acct-todo:hover{background:var(--c-bg1)}
.acct-todo-t{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.acct-todo-s{display:block;font-size:12.5px;color:var(--c-ink3);margin-top:3px;line-height:1.45}

/* ── Rollensicht ────────────────────────────────────────────────────────
   Derselbe .acct-seg wie in der Kopfzeile (Phase 3) und in den Einstellungen.
   Steht jetzt auf der Startseite, weil die Rolle bestimmt, was darunter
   gezeigt wird - vorher lag der Schalter zwei Ebenen tiefer unter
   "Aktivitaeten", waehrend die Startseite die Rolle bereits anzeigte. */
.acct-role{margin-top:20px}
.acct-role-lab{font-size:12.5px;color:var(--c-ink3);margin-bottom:7px}
.acct-role-hint{font-size:11.5px;color:var(--c-ink4);margin-top:7px;line-height:1.5}

/* ── "Das steht an" ─────────────────────────────────────────────────────
   Ruhige Zeilen, keine Kacheln. Jede Zeile ist ein echter Button und fuehrt
   genau dorthin, wo die Sache erledigt wird. Die Zahl steht vorn, weil sie
   die Zeile sortiert - aber sie ist Text, keine Kennzahl im Rahmen. */
.acct-due{margin-top:6px;border-top:1px solid var(--c-bds)}
.acct-due-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;background:none;border:none;
  border-bottom:1px solid var(--c-bds);font-family:inherit;text-align:left;color:var(--c-ink);cursor:pointer}
.acct-due-row:hover{background:var(--c-bg1)}
/* Die letzte Zeile gibt ihre Linie ab: darunter folgt entweder die
   Profilzeile oder die Bereichsliste, die ihre eigene Oberlinie mitbringt -
   sonst stehen zwei Haarlinien dicht uebereinander. */
.acct-due-row:last-child{border-bottom:none}
.acct-due-n{font-family:var(--f-display);font-size:19px;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;min-width:24px;flex-shrink:0;color:var(--c-ink)}
.acct-due-t{flex:1;min-width:0;font-size:14px;letter-spacing:-.01em}
/* Der einzige Posten, der Geld kostet, wenn man ihn liegen laesst. */
.acct-due-row.pay .acct-due-n{color:var(--c-signal)}
.acct-due-ch{color:var(--c-ink4);flex-shrink:0;display:flex}
.acct-due-none{font-size:13.5px;color:var(--c-ink3);padding:14px 0;line-height:1.55;
  border-top:1px solid var(--c-bds);margin-top:6px}
.acct-nav{margin-top:20px;border-top:1px solid var(--c-bds)}
.acct-row{display:flex;align-items:center;gap:13px;width:100%;padding:14px 2px;background:none;border:none;border-bottom:1px solid var(--c-bds);font-family:inherit;text-align:left;color:var(--c-ink);cursor:pointer}
.acct-row:hover{background:var(--c-bg1)}
.acct-row-ic{width:20px;display:flex;justify-content:center;color:var(--c-ink3);flex-shrink:0}
.acct-row-tx{flex:1;min-width:0}
.acct-row-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.acct-row-s{font-size:12.5px;color:var(--c-ink3);margin-top:2px;font-weight:400}
.acct-row-ch{color:var(--c-ink4);flex-shrink:0}
/* Spans in <button type="button">/Flex-Kontext als Block ausrichten */
.acct-row-tx,.acct-row-t,.acct-row-s{display:block}
.acct-badge{background:var(--c-blue);color:#fff;font-size:11px;font-weight:600;min-width:19px;height:19px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.acct-out{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:18px;padding:11px;background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--c-ink3);cursor:pointer;border-radius:var(--r1)}
.acct-out:hover{background:var(--c-bg1);color:var(--c-ink)}
.acct-lab{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink4);margin:22px 0 10px}
.acct-lab.first{margin-top:0}
.acct-f{margin-bottom:13px}
.acct-f label{display:block;font-size:12.5px;font-weight:600;color:var(--c-ink2);margin-bottom:5px}
.acct-f input,.acct-f textarea,.acct-f select{width:100%;padding:10px 12px;border:1px solid var(--c-bd);border-radius:var(--r1);font-family:inherit;font-size:14px;color:var(--c-ink);background:var(--c-bg);outline:none}
.acct-f input:focus,.acct-f textarea:focus,.acct-f select:focus{border-color:var(--c-ink3)}
.acct-f textarea{resize:vertical;min-height:84px;line-height:1.55}
.acct-hint{font-size:11.5px;color:var(--c-ink4);margin-top:5px;line-height:1.5}
/* .acct-item/.acct-item-t/-s/-p entfernt (Phase 7): die Mischzeile trug
   Auftraege, Bewerbungen, Einstellungen und Rechtstexte gleichzeitig und
   loeste sich per flex-wrap auf. Ersetzt durch .acct-ent (Listen) und
   .acct-set-row (Einstellungen). .acct-acts bleibt - es traegt weiterhin
   die Aktionsknoepfe unter einem Listeneintrag. */
.acct-acts{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.acct-mini{font-size:12px;padding:5px 10px;border-radius:var(--r1);border:1px solid var(--c-bd);background:var(--c-bg);color:var(--c-ink2);cursor:pointer;font-weight:600;white-space:nowrap;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.acct-mini:hover{background:var(--c-bg1)}
.acct-mini.danger{color:var(--c-red);border-color:var(--c-red-bd)}
.acct-empty{padding:30px 12px;text-align:center;color:var(--c-ink4);font-size:13px}
/* ── Aktivitaetenliste ──────────────────────────────────────────────────
   Eintraege als semantische Liste mit Haarlinien. Frueher war jeder Eintrag
   ein .acct-item mit farbiger Status-Pille; der Titel war ein <span onclick>,
   also weder fokussierbar noch per Tastatur bedienbar. */
.acct-list{list-style:none;margin:0;padding:0}
.acct-ent{padding:14px 0;border-bottom:1px solid var(--c-bds)}
.acct-ent:first-child{padding-top:4px}
 /* Zurueckhaltung ueber Farbtoken statt opacity: .62 zog Preis, Status und
    den weiterhin bedienbaren Loeschen-Knopf auf 2,7-3,2:1 und damit unter
    die AA-Schwelle. */
.acct-ent.muted .acct-ent-t{color:var(--c-ink2);font-weight:500}
.acct-ent.muted .acct-ent-p{color:var(--c-ink3)}
.acct-ent-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* Der Titel ist ein echter Button - unterstrichen erst bei Hover/Fokus,
   damit die Liste ruhig bleibt. */
.acct-ent-t{flex:1;min-width:0;background:none;border:none;padding:0;text-align:left;font-family:inherit;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--c-ink);cursor:pointer;
  overflow-wrap:break-word;hyphens:auto}
.acct-ent-t:hover,.acct-ent-t:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.acct-ent-t.as-text{cursor:default}
.acct-ent-t.as-text:hover{text-decoration:none}
 /* Der Betrag steht in der Tinte des Textes, nicht in Signalfarbe: sonst
    leuchtet jeder Preis wie eine Warnung und die eine Zeile, die wirklich
    etwas kostet, hebt sich nicht mehr ab. */
.acct-ent-p{font-family:var(--f-display);font-size:16px;font-weight:500;letter-spacing:-.02em;
  color:var(--c-ink);font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}
.acct-ent-m{font-size:12.5px;color:var(--c-ink3);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.acct-ent-q{font-size:13px;color:var(--c-ink2);line-height:1.55;margin:6px 0 0;overflow-wrap:anywhere}
/* Status als Wort, nicht als Farbflaeche. Nur "Zahlung ausstehend" bekommt
   die Signalfarbe - der einzige Zustand, der den Nutzer etwas kostet. */
.acct-st{font-size:12.5px;color:var(--c-ink3)}
.acct-st.pay{color:var(--c-signal);font-weight:600}
/* ── Einstellungszeile ──────────────────────────────────────────────────
   Wie .acct-item, aber ohne flex-wrap-Umbruch, damit Beschriftung und
   Schalter auch bei langen E-Mail-Adressen beieinander bleiben. */
.acct-set-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--c-bds)}
.acct-set-tx{flex:1;min-width:0}
.acct-set-t{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.acct-set-s{display:block;font-size:12.5px;color:var(--c-ink3);margin-top:3px;line-height:1.45;overflow-wrap:anywhere}
.acct-set-t a{color:var(--c-blue)}
/* Gefaehrliche Aktionen stehen unten und sind durch Abstand und eine
   kraeftigere Linie vom Rest getrennt - nicht durch eine rote Flaeche. */
.acct-danger{margin-top:34px;padding-top:4px;border-top:1px solid var(--c-bd)}
.acct-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r3);background:var(--c-bg1);border:1px solid var(--c-bds);color:var(--c-ink3);white-space:nowrap}
.acct-seg{display:flex;gap:2px;background:var(--c-bg1);border:1px solid var(--c-bds);border-radius:var(--r1);padding:3px}
.acct-seg button{flex:1;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--c-ink3);padding:7px 6px;border-radius:var(--r1);cursor:pointer}
.acct-seg button.on{background:var(--c-bg);color:var(--c-ink);box-shadow:var(--sh-raised)}
.acct-score{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--c-bds)}
.acct-score-v{font-family:var(--f-display);font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.acct-score-s{font-size:13px;color:var(--c-ink3);display:flex;flex-direction:column;gap:2px}
.acct-score-c{color:var(--c-ink3)}
/* .acct-rev* entfernt (Phase 7): die Bewertungsliste im Konto nutzt jetzt
   dieselben Regeln wie das oeffentliche Profil (.sr-pf-rv), damit beide
   Flaechen dieselbe Bewertungssprache sprechen. */
.acct-btn{width:100%;padding:11px;border-radius:var(--r1);background:var(--c-ink);color:#fff;border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-top:8px}
.acct-btn:hover{opacity:.9}
.acct-btn:disabled{opacity:.55;cursor:not-allowed}
/* Moderation (nur Betreiber) */
/* Meldungen: Haarlinien statt Karten-in-Karten. Offene Faelle tragen links
   einen kraeftigen Strich - Farbe UND Position unterscheiden sie, nicht nur
   die Rahmenfarbe. Logik und Berechtigungen bleiben unveraendert. */
.mod-card{background:none;border:none;border-bottom:1px solid var(--c-bds);border-radius:0;
  padding:14px 0 14px 12px;margin-bottom:0;border-left:3px solid transparent}
.mod-card.open{border-left-color:var(--c-red)}
.mod-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mod-kind{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--r3);background:var(--c-bg1);border:1px solid var(--c-bds);color:var(--c-ink3)}
.mod-kind.alarm{background:var(--c-alt);border-color:var(--c-amber-bd);color:var(--c-amber)}
.mod-date{font-size:12px;color:var(--c-ink4);margin-left:auto}
.mod-reason{font-size:14.5px;font-weight:600;margin-bottom:4px}
.mod-meta{font-size:12.5px;color:var(--c-ink3);line-height:1.6}
.mod-quote{font-size:13px;color:var(--c-ink2);background:var(--c-bg1);border:1px solid var(--c-bds);border-radius:var(--r1);padding:9px 11px;margin-top:9px;white-space:pre-wrap;line-height:1.55}
.mod-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-bds)}
.mod-done{opacity:.55}
/* Erledigtes: eingeklappt und einzeilig, damit offen Liegendes vorne steht */
.mod-archive{margin-top:18px;border-top:1px solid var(--c-bds)}
.mod-archive>summary{cursor:pointer;list-style:none;padding:12px 0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink4)}
.mod-archive>summary::-webkit-details-marker{display:none}
.mod-archive>summary::before{content:'›';display:inline-block;width:14px;font-size:15px;line-height:1;text-align:center;margin-right:4px;transition:transform .15s}
.mod-archive[open]>summary::before{transform:rotate(90deg)}
.mod-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 0 9px 12px;border-bottom:1px solid var(--c-bds);font-size:13px;color:var(--c-ink3)}
.mod-row b{color:var(--c-ink2);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mod-row .mod-date{margin-left:auto}
.mod-card.promo-live{border-left-color:var(--c-success)}
.promo-form{background:var(--c-bg1);border:1px solid var(--c-bds);border-radius:var(--r2);padding:14px;margin:10px 0 14px}
.promo-form-h{font-size:14px;font-weight:600;margin-bottom:12px}
.promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
@media (max-width:480px){.promo-grid{grid-template-columns:1fr}}
.promo-on{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--c-ink2);margin:4px 0 2px}
@media(max-width:600px){
  .acct{margin:0;max-width:none;min-height:100dvh;border:none;border-radius:0}
  .acct-bar{position:sticky;top:0;z-index:2;border-radius:0}
}

/* ── Zielflaechen im Konto auf Smartphones ───────────────────────────────
   Gemessen wurde durchgehend zu klein: Kopfleisten-Knoepfe 32x32,
   Rollen-/Sprachschalter 29px hoch, Aktionsknoepfe 26px, Eingabefelder 41px.
   Auf dem Desktop bleiben die kompakten Proportionen - mit der Maus trifft
   man sie, mit dem Daumen nicht. Rein geometrisch: keine Farbe, kein
   Abstand und keine Reihenfolge aendert sich. */
@media(max-width:640px){
  .acct-ib{width:44px;height:44px}
  .acct-seg{padding:4px}
  .acct-seg button{min-height:44px}
  .acct-btn{min-height:48px}
  .acct-mini{min-height:44px;min-width:44px;padding:9px 14px;justify-content:center}
  .acct-out{min-height:44px}
  .acct-row,.acct-due-row,.acct-todo{min-height:44px}
  .acct-f input,.acct-f select{min-height:44px}
  .acct-f textarea{min-height:96px}
  .acct-set-t a{display:inline-block;padding:11px 0}
  /* Titelknoepfe in den Listen sind einzeilige Textknoepfe und damit nur
     rund 16px hoch. Sie bekommen Hoehe ueber Innenabstand, damit die Zeile
     als Ganzes greifbar wird - der Text steht weiterhin an derselben
     Stelle. */
  .acct-ent-t{padding:14px 0}
  .acct-ent-h{align-items:center}
  /* Der Stiftknopf am Profilbild bleibt OPTISCH klein - eine 44px-Scheibe
     wuerde das Bild ueberdecken. Die Flaeche ist 44px, der sichtbare Kreis
     wird per ::before gezeichnet. */
  .acct-ava-btn{width:44px;height:44px;right:-10px;bottom:-10px;background:none;border:none}
  .acct-ava-btn::before{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;
    transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--c-bg);background:var(--c-ink)}
  .acct-ava-btn > *{position:relative;z-index:1}
}

/* ══ RESPONSIVE ══════════════════════════════════ */
@media(max-width:1024px){
  :root{--sp-section:64px;--sp-gutter:24px}
  .foot-top{grid-template-columns:1fr 1fr}
  /* ── Kopfzeile ab hier kompakt ──────────────────────────────────────
     Gemessen: Logo 151 + drei Links 279 + eingeloggte Endgruppe 450 sind
     880px, dazu Rinnen und Abstaende. Unter rund 1000px passt das nicht
     mehr nebeneinander - bei 769px lief die Endgruppe ueber den Rand.
     Darum schaltet die Navigation hier auf Logo + Menue um. Es geht nichts
     verloren: das Mobile-Menue traegt dieselben drei Ziele, denselben
     Rollenschalter, dieselbe Sprachumschaltung und dieselben Konto-
     Aktionen; Profil und Chats stehen zusaetzlich in der Bottom-Nav.
     Die Sektionen der Startseite behalten ihren eigenen 768er-Breakpoint.
     Die drei Links selbst bleiben bis 768px stehen - sie passen dort neben
     Logo und Menueknopf (gemessen 522 von 769px) und halten die Kopfzeile
     im Tablet-Band gefuellt. */
  .hamburger{display:flex}
  .nav-end .lang-pill{display:none}
  body.sr-out #nav-auth,body.sr-in #nav-user{display:none}
  .nav-inner{gap:12px}
  .logo{min-width:0}
  /* Im Tablet-Band traegt die Kopfzeile die drei Links weiter, das Menue
     nur noch Rolle, Sprache und Konto - sonst staende die Kopfzeile
     zwischen 769 und 1024px fast leer. */
  .mobile-menu{padding-bottom:calc(20px + 68px + env(safe-area-inset-bottom))}
}
@media(max-width:768px){
  /* svh statt vh: kein Layout-Sprung beim Ein-/Ausblenden der mobilen Adressleiste */
  /* Hero bleibt auch mobil linksbuendig - die zentrierte Variante gehoerte
     zur alten Komposition. Suche und Zweitaktion werden volle Breite. */
  .hero{padding:calc(64px + 40px) 0 48px}
  .hsearch{max-width:none}
  .hsearch-go{width:100%}
  .hero-2nd{flex-direction:column;align-items:stretch;gap:10px}
  .hero-2nd .btn{width:100%;font-size:16px;padding:13px 20px}
  /* Schritte untereinander, Linie oben statt links.
     ABSTAENDE (Spacing-Audit, gemessen 320-430px): hier stand
     padding:20px 0 0 0 - aus der Desktop-Spalte uebernommen, wo die Linien
     senkrecht stehen und unten kein Abstand gebraucht wird. Untereinander
     lag die naechste Trennlinie dadurch 0px unter dem Text ("...in deiner
     Naehe." direkt auf der Linie), oben dagegen 21-22px. Dasselbe bei den
     Fuer-wen-Karten (Knopf 0px auf der Linie). Alle Zeilen mit Trennlinie
     (Ablauf, Fuer wen, Sicherheit, Preise) haben mobil jetzt denselben
     Abstand: 24px ueber und unter dem Inhalt. */
  .steps{grid-template-columns:1fr}
  .step{border-left:none;border-top:1px solid var(--c-bds);padding:24px 0}
  .step:first-child{border-top:none}
  .step-n{font-size:26px;margin-bottom:8px}
  .sfcard,.price-row{padding-top:24px;padding-bottom:24px}
  /* Sektionskopf mobil auf der 4/8er-Skala: Label -> Titel 12px,
     Kopf -> Inhalt 32px (vorher 14/44 - bei 48px Sektionsabstand stand der
     Kopf fast so weit vom eigenen Inhalt wie von der vorigen Sektion). */
  .sec-label{margin-bottom:12px}
  .sec-head{margin-bottom:32px}

  .for-grid{grid-template-columns:1fr}
  .for-card{padding:24px 0}
  .for-card:last-child{border-left:none;border-top:1px solid var(--c-bds);padding-left:0}
  .map-grid{display:block;height:auto}
  .map-frame{height:360px;min-height:360px;margin-bottom:16px}
  /* Jobliste mobil im normalen Seitenfluss (kein verschachtelter Scroll-Container = keine Scroll-Falle) */
  .jlist{height:auto;max-height:none;overflow:visible}
  /* Ab hier ist die Liste Touch-Layout - die Touch-Ziele gehoeren mit.
     Sie standen vorher erst im 640er-Block, im Band 641-768 blieben sie 29px. */
  .sv{min-height:44px;padding:0 14px;font-size:13px}
  .sv-detail{min-height:48px;padding:0 20px;font-size:14px}
  /* Die Liste ist die Entscheidungsflaeche - volle Tabletbreite liesse
     Titel und Betrag hunderte Pixel auseinanderfallen. */
  .jlist{max-width:640px}
  /* Navigationslinks erst hier weg, nicht schon bei 1024 */
  .nav-links{display:none}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .cta-inner{gap:28px;align-items:flex-start}
  .cta-acts{width:100%}
  .cta-acts .btn{flex:1 1 auto}
  .foot-bot{flex-direction:column;gap:6px;text-align:center}
  .imp-box{padding:28px 20px}
  .safety-grid{grid-template-columns:1fr;gap:0}
  /* einspaltig: nur das wirklich letzte Element verliert die Linie */
  .sfcard:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--c-bds)}
  .sfcard:last-child{border-bottom:none}
  /* Der 20px-Innenabstand des Overlays galt auch fuer das Chatfenster,
     dessen Karte auf dem Telefon 100dvh hoch ist. Gemessen bei 390x844:
     Karte von y=20 bis y=864 - die unteren 20px, also ein Teil der
     Eingabezeile, lagen unter dem Sichtbereich und wurden von
     .chat-win{overflow:hidden} abgeschnitten (Unterkante des Eingabefelds
     848 bei 844px Viewport). Auf dem Telefon fuellt das Chatfenster den
     Bildschirm ohnehin randlos - der Abstand hat hier keine Aufgabe. */
  .chat-win{padding:0}
  .chat-win .mcard{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;border:none}
}
@media(max-width:480px){
  :root{--sp-section:48px;--sp-gutter:20px}
  /* Radius-Regler und Standort-Knopf nebeneinander wurden zu eng und der
     Knopf rutschte unter den Regler an die linke Kante. Untereinander,
     beide volle Breite. */
  .hsearch-meta{flex-direction:column;align-items:stretch;gap:12px}
  /* flex-basis wirkt in der Spalte auf die HOEHE - ohne diesen Reset waere
     die Regler-Zeile 220px hoch. */
  .hsearch-rad{flex:0 0 auto}
  .hsearch-meta .btn{width:100%}
  .frow2{grid-template-columns:1fr}
  /* For-whom cards: comfortable full-width, readable text */
}
/* Very small phones (e.g. iPhone SE 320–375px, Galaxy 360px) */
@media(max-width:380px){
  :root{--sp-gutter:16px}
  .map-frame{height:320px;min-height:320px}
  .sec-title{font-size:24px}
  .mcard-inner{padding:24px 18px}
}
/* ===== Mobile-App-Feinschliff – NUR Smartphones (<=640px). Desktop/Tablet unverändert. ===== */
.mobile-bottomnav{display:none}
@media(max-width:640px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  /* WICHTIG: top:auto/height:auto überschreiben das generische nav{position:fixed;top:0}
     – sonst würde diese <nav> wegen top:0 + bottom:0 den ganzen Viewport als weiße Fläche
     überdecken (Hauptinhalt „leer“, nur Bottom-Nav sichtbar). */
  .mobile-bottomnav{display:flex;top:auto;height:auto;position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--c-bg);border-top:1px solid var(--c-bd);border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:var(--sh-raised)}
  .mbn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;background:none;border:none;cursor:pointer;padding:4px 2px;color:var(--c-ink3);font-size:10.5px;font-weight:600;position:relative;min-height:50px;font-family:inherit}
  /* font-size/font-weight standen hier noch aus der Zeit, als in .mbn-ic ein
     Textzeichen lag. Die Flaeche ist jetzt ein fester Kasten, in dem das SVG
     ueber die Flex-Zentrierung exakt mittig sitzt - waagerecht wie senkrecht. */
  .mbn-item .mbn-ic{display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;line-height:0}
  .mbn-ic .mbn-svg{display:block;width:22px;height:22px;flex:0 0 auto}
  /* Der gruene Kreis ist die zentrale Primaeraktion. color:#fff faerbt ueber
     currentColor die Striche des Plus-SVG weiss; align-items/justify-content
     setzen es exakt in die Mitte des 42px-Kreises. */
  .mbn-add .mbn-ic{background:var(--c-blue);color:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:var(--sh-raised)}
  .mbn-add .mbn-ic .mbn-svg{width:24px;height:24px}
  .mbn-badge{position:absolute;top:0;left:calc(50% + 6px);background:var(--c-red);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:var(--r1);padding:0 4px;display:none;align-items:center;justify-content:center;line-height:16px}
  #scrolltop{bottom:calc(80px + env(safe-area-inset-bottom))}
  .btn{min-height:46px}
  /* Touch-Ziele: eine Hoehe, vorher standen 38px und 44px im selben Block */
  .btn-sm{min-height:44px}
  .fc{min-height:44px;padding:0 16px;font-size:14px;display:inline-flex;align-items:center}
  .pay-btn-main{min-height:54px;font-size:16px}
  .jcard{padding:16px;border-radius:var(--r3)}
  .jcard-t{font-size:16px}
  .jcard-d{font-size:13.5px}
  .jcard-p{font-size:17px}
  .jd-price{font-size:26px}
  /* Zielflaechen im Chat: gemessen waren Kopfknoepfe 36px und die Zeilen der
     Chatliste knapp darunter. Rein geometrisch - keine Farbe, keine
     Reihenfolge, kein Abstand der Blasen aendert sich. */
  .ch-send-btn{width:46px;height:46px}
  .ch-ib{width:44px;height:44px}
  .ch-who{min-height:44px}
  .ch-job{min-height:44px}
  .ct{min-height:44px;padding:14px 4px 14px 24px}
  .ct-dot{top:30px}
  /* Phase 8 hob den Schliessen-Knopf NUR fuer die Nachrichtenliste an, weil
     .mclose allen Modalen gehoert und die uebrigen Flaechen damals gesperrt
     waren. Phase 9 ist genau die Phase dafuer: der Audit fand 32x32 in 143
     von 432 Messungen - in Auth, Job-Detail, Auftrag erstellen, Profil,
     Bewerten, Melden, Zahlung, Sicherheitshinweisen und Bearbeiten.
     Jetzt einmal fuer alle, und die Sonderregel entfaellt. */
  .mclose{width:44px;height:44px;top:8px;right:8px}
  /* Das Eingabefeld selbst ist einzeilig nur 24px hoch - zu wenig zum
     Antippen. min-height hebt es auf 44px, der Rahmen darum gibt dafuer
     Innenabstand ab, damit die Eingabezeile insgesamt nicht klobig wird.
     autoGrow bleibt unangetastet: die Funktion setzt weiterhin die Hoehe
     nach scrollHeight; min-height greift nur nach unten, max-height:100px
     weiterhin nach oben. */
  .ch-textarea{font-size:16px;min-height:44px}
  .ch-input-wrap{padding:3px 12px}
  .msg-bub{font-size:15px}
  .msg-w{max-width:min(84%, 46ch)}
  .chat-win .ch-input-area{background:var(--c-bg);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  input,textarea,select{font-size:16px}
  /* Die Regel darueber hat nur die Spezifitaet eines Typselektors und verlor
     gegen ".field input{font-size:14px}". Gemessen (Phase 9): #p-dur und
     #p-pay standen mit 14px da, das Datumsfeld daneben mit 16px - iOS zoomt
     beim Fokus in genau diese beiden Felder hinein und laesst den Nutzer im
     vergroesserten Formular zurueck. Gleiche Spezifitaet, spaetere Stelle. */
  .field input,.field textarea,.field select{padding:12px 14px;font-size:16px}
  /* Der Wizard ist auf dem Telefon der wichtigste Bildschirm der App. */
  .post-h{font-size:18px}
  .post-nav{flex-direction:column-reverse;gap:8px}
  .post-nav .btn{width:100%;flex:none}
  .post-sum dl{grid-template-columns:1fr;gap:0;padding:8px 14px 12px}
  .post-sum dt{padding:8px 0 0}
  .post-sum dd{padding:2px 0 8px;border-bottom:1px solid var(--c-bds)}
  .post-sum dd:last-child{border-bottom:none}
  /* Ankreuzfelder: 24px statt der 13px des Systems. Vorher galt das nur fuer
     zwei Modale - die Sicherheitshinweise, die man VOR der ersten Bewerbung
     bestaetigen muss, hatten weiterhin 13x13. Die Zeile bekommt zusaetzlich
     44px Hoehe, damit auch die Beschriftung sicher trifft. */
  .check-row input[type=checkbox]{width:24px;height:24px;flex-shrink:0}
  .check-row{min-height:44px;align-items:center}
  .check-row label{padding:6px 0}

  /* ── Zielflaechen ausserhalb des Chats (Phase 9) ──────────────────────
     Alle Werte unten sind gemessen, nicht geschaetzt. Nichts davon aendert
     Farbe, Reihenfolge oder Schriftgroesse - nur die Hoehe der Flaeche, die
     der Finger trifft. */
  .mtab{min-height:44px}                       /* war 36px (Anmelden/Registrieren) */
  .legal-tab{min-height:44px;display:inline-flex;align-items:center}  /* war 34px */
  .report-btn{min-height:44px;padding:4px 10px}                       /* war 22px */
  #cookie .ck-btn{min-height:44px}                                    /* war 35-41px */
  .logo{min-height:44px}                                              /* war 34px */
  .skip-link:focus{min-height:44px;display:inline-flex;align-items:center} /* war 26px */
  /* Der Radius-Regler war 24px hoch. Die Schiene bleibt so duenn wie vorher,
     nur die Flaeche darum waechst - accent-color und Farbe unveraendert. */
  .hsearch-rad input[type=range]{height:44px}
  /* Die Suche in der Nachrichtenliste war 19px hoch: das Feld war genau so
     hoch wie seine Textzeile. */
  .chat-search-wrap{padding:4px 12px;min-height:46px}
  .chat-search-wrap input{min-height:44px}
  /* Footer-Links standen mit 16px Hoehe und 19px Abstand da. Der Abstand
     allein erfuellt die Vorgabe schon (24px-Kreise um die Links ueberlappen
     sich nicht), die Flaeche selbst nicht. Vier Pixel Innenabstand heben sie
     auf 24px, ohne dass der Footer sichtbar waechst - der vorhandene Abstand
     nimmt sie auf. */
  .foot-col ul li a{display:inline-block;padding:4px 0}
  /* Die Radiuszeile der Suche war 263px breit in einem 258px-Kasten: die
     Beschriftung bricht nicht und der Regler hat eine Mindestbreite. Auf
     schmalen Geraeten bekommt sie deshalb eine eigene Zeile. */
  .hsearch-rad{flex-basis:100%}
  /* Der Regler hatte seine Eigenbreite von 129px als Ausgangsgroesse; zusammen
     mit Beschriftung (70px) und Wert (46px) plus Abstaenden ergab das 263px in
     einer 258px breiten Zeile. Mit kleiner Ausgangsgroesse rechnet der Rest
     der Zeile zuerst, der Regler nimmt, was uebrig bleibt. */
  .hsearch-rad input[type=range]{flex:1 1 60px;min-width:0}
  /* ── Oeffentliches Profil, schmale Viewports ──────────────────────────
     Der alte Kopf kippte hier auf zentriert und las sich dadurch wie ein
     Social-Media-Profil. Er bleibt jetzt linksbuendig; nur der Innenabstand
     der Karte gibt nach, damit bei 320px noch Textbreite uebrig bleibt.

     Der Zahlenstreifen lief bei 390px um 35px aus der Modalkarte heraus
     (drei feste flex:1-Kaesten + deutscher Text "Auftraege erstellt").
     Der globale Overflow-Audit sah das nicht, weil .mcard selbst nicht
     ueberlief - die Karte scrollte still nach rechts. Der neue Streifen
     bricht um, statt zu ueberlaufen. */
  /* Der Schliessen-Knopf sitzt bei top:12 und ist 32px hoch, endet also bei
     44px. Statt in der Kopfzeile waagerecht Platz fuer ihn zu reservieren -
     was die Namensspalte bei 320px auf 135px zusammendrueckte - beginnt der
     Inhalt schlicht unter ihm. Der Name bekommt damit die volle Breite. */
  #modal-pubprofile .mcard-inner{padding:52px 20px 22px}
  .sr-pf-id{gap:13px;padding-right:0}
  .sr-pf-av,.sr-pf-avf{width:58px;height:58px}
  .sr-pf-avf{font-size:21px}
  .sr-pf-name{font-size:19px}
  .sr-pf-bio{font-size:14px}
  .sr-pf-more,.sr-pf-report{min-height:44px}
}

/* ── Oeffentliches Profil, sehr schmal (iPhone SE, 320px) ────────────────
   Steht NACH dem 640er-Block, weil beide dieselbe Spezifitaet haben und
   sonst der breitere Block gewinnen wuerde.
   Gemessen: bei 320px blieben fuer die Namensspalte nur 141px. Ein Name wie
   "Hohenbuechler-Wittgenstein" musste dadurch mitten im Wort brechen. Avatar
   und Schriftgrad geben hier nach, damit der Umbruch am Bindestrich erfolgt.
   Der Kopf bleibt linksbuendig - kein zentrierter Social-Media-Stapel. */
@media(max-width:380px){
  #modal-pubprofile .mcard-inner{padding:50px 16px 20px}
  .sr-pf-id{gap:11px;padding-right:0}
  .sr-pf-av,.sr-pf-avf{width:48px;height:48px}
  .sr-pf-avf{font-size:17px}
  .sr-pf-name{font-size:17.5px}
  .sr-pf-meta{font-size:12.5px}
  .sr-pf-fv{font-size:23px}
}


/* ═══ Vermittlung: Zusage, Bewerbungen, Bestaetigungsdialog ═════════════════
   Nur das, was fuer diesen Ablauf noetig ist - kein Umbau der Oberflaeche.
   Aktionen sind groesser (mind. 44 px hoch, 14 px Schrift), damit sie sich
   auch mit grobem Finger oder unsicherer Hand sicher treffen lassen. */
.acct-mini.vm-btn{font-size:14px;padding:10px 14px;min-height:44px;gap:6px}
.acct-mini.vm-primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.acct-mini.vm-primary:hover{background:var(--c-accent-hover)}
.acct-mini.vm-btn.danger{background:var(--c-bg)}
.acct-set-row .acct-mini.vm-btn{min-height:40px}
.vm-st{font-weight:600;font-size:13.5px}
.vm-st.vm-active{color:var(--c-ink2)}
.vm-st.vm-assigned,.vm-st.vm-a-accepted{color:var(--c-success-dark)}
.vm-st.vm-completed,.vm-st.vm-a-completed{color:var(--c-success-dark)}
.vm-st.vm-closed,.vm-st.vm-a-filled,.vm-st.vm-a-withdrawn,.vm-st.vm-a-cancelled,.vm-st.vm-a-jobclosed{color:var(--c-ink3)}
.vm-st.vm-a-sent{color:var(--c-info)}
.vm-box{margin:10px 0 0;padding:12px 14px;border-radius:var(--r1);background:var(--c-success-soft);
  border:1px solid var(--c-success-bd);color:var(--c-success-dark);font-size:15px;line-height:1.5}
.vm-box.done{background:var(--c-bg1);border-color:var(--c-bd);color:var(--c-ink2)}
.acct-ent.vm-hot{border-left:3px solid var(--c-success);padding-left:12px}
.vm-apps{list-style:none;margin:12px 0 0;padding:0}
.vm-app{padding:12px 0 12px 12px;border-top:1px solid var(--c-bds);border-left:2px solid var(--c-accent-bd)}
.vm-app .acct-ent-t{font-size:15.5px}
.vm-app .acct-ent-q{font-size:14px}
.vm-dlg-t{font-size:20px;font-weight:600;text-align:center;margin:4px 0 12px;line-height:1.3}
.vm-dlg-p{text-align:center;color:var(--c-ink2);font-size:16px;line-height:1.6;margin:0 0 22px;overflow-wrap:anywhere}
.vm-dlg-btns{display:flex;gap:10px;flex-wrap:wrap}
.vm-dlg-btns .btn{min-height:50px;font-size:16px;flex:1 1 140px}