/* Gestaltung (Farben, Schrift, Tiefe) – liegt über style.css; Aufbau und Funktionen bleiben unverändert.
   Jedes Abteil hat seine Farbe: --sec (kräftig) und --sec2 (hell). */
:root{
  --font-head:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --sec:#e8372a;--sec2:#ff8a65;
  --c-alle:#e8372a;--c-alle2:#ff8a65;
  --c-quer:#7c3aed;--c-quer2:#c084fc;
  --c-temp:#d97706;--c-temp2:#fbbf24;
  --c-lehre:#059669;--c-lehre2:#34d399;
  --c-fest:#2563eb;--c-fest2:#60a5fa;
  --c-exotics:#0891b2;--c-exotics2:#22d3ee;
  --c-profile:#db2777;--c-profile2:#f472b6;
  --c-einstellungen:#475569;--c-einstellungen2:#94a3b8;
  --c-kalt:#4f46e5;--c-kalt2:#818cf8;
  --bg:#f5f6fb;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1022}}
body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,.brand{font-family:var(--font-head)}

/* Abteilsfarbe aus der gewählten Ansicht (body[data-section]) */
body[data-section="alle"]{--sec:var(--c-alle);--sec2:var(--c-alle2)}
body[data-section="quer"]{--sec:var(--c-quer);--sec2:var(--c-quer2)}
body[data-section="temp"]{--sec:var(--c-temp);--sec2:var(--c-temp2)}
body[data-section="lehre"]{--sec:var(--c-lehre);--sec2:var(--c-lehre2)}
body[data-section="fest"]{--sec:var(--c-fest);--sec2:var(--c-fest2)}
body[data-section="exotics"]{--sec:var(--c-exotics);--sec2:var(--c-exotics2)}
body[data-section="profile"]{--sec:var(--c-profile);--sec2:var(--c-profile2)}
body[data-section="kalt"]{--sec:var(--c-kalt);--sec2:var(--c-kalt2)}
body[data-section="einstellungen"]{--sec:var(--c-einstellungen);--sec2:var(--c-einstellungen2)}

/* weiche Farbflächen im Hintergrund des Portals */
body.portal{background:
  radial-gradient(900px 500px at 105% -10%,color-mix(in srgb,var(--sec2) 22%,transparent),transparent 60%),
  radial-gradient(700px 500px at -10% 20%,color-mix(in srgb,var(--sec) 10%,transparent),transparent 60%),
  var(--bg);background-attachment:fixed;transition:background .4s}

/* Knöpfe */
.btn{background:linear-gradient(135deg,var(--accent),#ff7a59);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.ghost{background:transparent;box-shadow:none}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* Navigation: farbige Linie, Abteile mit Farbpunkt */
.light-nav{position:sticky;border-bottom:0;box-shadow:0 1px 0 var(--line)}
.light-nav:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--c-alle),var(--c-quer),var(--c-temp),var(--c-lehre),var(--c-fest),var(--c-exotics),var(--c-kalt),var(--c-profile));opacity:.9}
.tabs a{display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s,box-shadow .15s}
.tabs a:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,#94a3b8);flex:none}
.tabs a[data-v="alle"]{--dot:var(--c-alle)}.tabs a[data-v="quer"]{--dot:var(--c-quer)}.tabs a[data-v="temp"]{--dot:var(--c-temp)}
.tabs a[data-v="lehre"]{--dot:var(--c-lehre)}.tabs a[data-v="fest"]{--dot:var(--c-fest)}.tabs a[data-v="exotics"]{--dot:var(--c-exotics)}
.tabs a[data-v="profile"]{--dot:var(--c-profile)}.tabs a[data-v="kalt"]{--dot:var(--c-kalt)}.tabs a[data-v="einstellungen"]{--dot:var(--c-einstellungen)}
.tabs a.on{background:linear-gradient(135deg,var(--dot),color-mix(in srgb,var(--dot) 70%,#fff));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--dot) 35%,transparent)}
.tabs a.on:before{background:#fff}

/* Seitenkopf: farbiges Banner in der Abteilsfarbe */
.view>h2.title{position:relative;margin:6px 0 0;padding:22px 26px 4px;border-radius:22px 22px 0 0;color:#fff;font-size:30px;font-weight:800;
  background:linear-gradient(90deg,var(--sec),color-mix(in srgb,var(--sec) 55%,var(--sec2)));overflow:hidden}
.view>h2.title+.title-sub{margin:0 0 18px;padding:2px 26px 22px;border-radius:0 0 22px 22px;color:#ffffffdd;font-size:15.5px;
  background:linear-gradient(90deg,var(--sec),color-mix(in srgb,var(--sec) 55%,var(--sec2)));box-shadow:0 14px 34px color-mix(in srgb,var(--sec) 22%,transparent);position:relative}
.view>h2.title:after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,#ffffff33,transparent 65%)}
.view>h2.title+.title-sub:after{content:"";position:absolute;right:120px;bottom:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,#ffffff22,transparent 65%);pointer-events:none}
.view>h2.title .demo-tag{background:#ffffff33;color:#fff;vertical-align:6px}
#v-lock h2.title,#v-lock .title-sub{background:none;color:inherit;box-shadow:none;padding:0;border-radius:0}
#v-lock h2.title:after,#v-lock .title-sub:after{display:none}

/* Suche, Karte, Flächen */
.searchrow input{border:2px solid var(--line);box-shadow:var(--shadow)}
.searchrow input:focus{border-color:var(--sec);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--sec) 18%,transparent)}
.mapwrap{border-radius:22px;box-shadow:0 18px 50px #0b112418}
.panel,.center-card,.lock{border-radius:22px;box-shadow:0 12px 40px #0b112412}
.panel{position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--sec),var(--sec2))}
.section-h{display:flex;align-items:center;gap:8px;color:var(--ink)}
.section-h:before{content:"";width:18px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--sec),var(--sec2))}
button.chip.on{border-color:var(--sec);background:color-mix(in srgb,var(--sec) 12%,transparent);color:var(--sec)}

/* Inserate: Farbstreifen nach Abteil, Firmen-Kürzel, Anheben beim Darüberfahren */
.job{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 18px 16px 20px;border-radius:18px;
  transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.job>*{grid-column:2}
.job>.av{grid-column:1;grid-row:1 / span 4;align-self:start}
.job:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--art,var(--sec)),color-mix(in srgb,var(--art,var(--sec)) 50%,#fff))}
.job:hover{transform:translateY(-2px);box-shadow:0 14px 34px #0b11241c;border-color:color-mix(in srgb,var(--art,var(--sec)) 35%,var(--line))}
.job.a-kalt{--art:var(--c-kalt)}.chip.a-kalt{--art:var(--c-kalt)}.job .note a{text-decoration:none;font-weight:600}
.job.a-quer{--art:var(--c-quer)}.job.a-temp{--art:var(--c-temp)}.job.a-lehre{--art:var(--c-lehre)}.job.a-fest{--art:var(--c-fest)}
.av{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:800 15px/1 var(--font-head);color:#fff;letter-spacing:-.02em;
  background:linear-gradient(135deg,hsl(var(--h) 70% 52%),hsl(calc(var(--h) + 40) 75% 62%));box-shadow:0 6px 14px hsl(var(--h) 60% 50% / .3)}
.job h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s;text-decoration:none}
.job h3 a:hover{background-size:100% 2px;text-decoration:none}
.chip.art{background:color-mix(in srgb,var(--art,var(--accent)) 12%,transparent);color:var(--art,var(--accent))}
.chip.a-quer{--art:var(--c-quer)}.chip.a-temp{--art:var(--c-temp)}.chip.a-lehre{--art:var(--c-lehre)}.chip.a-fest{--art:var(--c-fest)}
.chip.new{background:linear-gradient(135deg,#16a34a,#4ade80)}
#company-box{border-color:var(--sec);border-radius:22px;box-shadow:0 14px 34px color-mix(in srgb,var(--sec) 18%,transparent)}
.modes button.on,.ziele button.on{border-color:var(--sec);box-shadow:0 0 0 4px color-mix(in srgb,var(--sec) 15%,transparent);background:color-mix(in srgb,var(--sec) 7%,var(--panel))}
.plist button.on{border-color:var(--sec);background:color-mix(in srgb,var(--sec) 9%,transparent)}
.price.cur{border-color:var(--sec)}
.bubble.me{background:linear-gradient(135deg,var(--sec),var(--sec2))}
@media (max-width:640px){.view>h2.title{font-size:24px;padding:18px 18px 2px}.view>h2.title+.title-sub{padding:2px 18px 18px}
  .job{grid-template-columns:36px 1fr;column-gap:10px}.av{width:36px;height:36px;border-radius:11px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.job,.tabs a,body.portal{transition:none}.job:hover{transform:none}}

/* Firmenkonto löschen, Einwilligung beim Kandidatenprofil */
.danger-zone{margin-top:18px;padding:12px 14px;border:1px solid #f1b8b3;border-radius:12px;background:rgba(232,55,42,.05)}
.btn.danger{background:#c62f24;border-color:#c62f24;color:#fff}
.check.consent{font-size:13px;line-height:1.4;align-items:flex-start}

/* Nischen (Pro) */
body[data-section="nischen"]{--sec:#ea580c;--sec2:#fb923c}
.n-sugg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.n-opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
.n-opt:hover{border-color:#ea580c}.n-opt.on{background:rgba(234,88,12,.08);border-color:#ea580c;cursor:default}
.n-opt small,.n-chip small{color:var(--muted,#5c678a)}
.n-kind{font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;background:rgba(79,70,229,.1);color:#4f46e5}
.n-kind.k-beruf{background:rgba(234,88,12,.1);color:#ea580c}
.n-chosen-box{margin-top:6px}
.n-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.n-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(234,88,12,.08);border-radius:999px;padding:6px 6px 6px 12px;font-size:14px}
.n-chip button{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:inherit;padding:0 6px}
.n-over{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.n-side{position:sticky;top:76px;padding:12px}
.n-side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.n-list{max-height:calc(100vh - 170px);overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.n-list button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;padding:9px 10px;border-radius:10px;cursor:pointer}
.n-list button:hover{background:rgba(234,88,12,.06)}.n-list button.on{background:rgba(234,88,12,.12);font-weight:600}
.n-list button b{font-size:12px;color:var(--muted,#5c678a)}
.n-filter{grid-template-columns:1fr auto auto}
@media (max-width:760px){.n-over{grid-template-columns:1fr}.n-side{position:static}.n-list{max-height:260px}.n-filter{grid-template-columns:1fr}}
:root{--c-nischen:#ea580c;--c-nischen2:#fb923c}
.tabs a[data-v="nischen"]{--dot:var(--c-nischen)}
.section-h.loading{color:var(--sec,#e8372a);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
/* Firmenlogo statt Kürzel */
.av{position:relative;overflow:hidden}
.av>img{display:none}
.av.has-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line,#e5e8f0)}
.av.has-logo>img{display:block;width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}
.av.has-logo>b{display:none}
.av>b{font:inherit}

.n-art{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.n-art button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:15px;font-weight:600;padding:9px 14px;border-radius:12px;cursor:pointer}
.n-art button b{font-size:12px;font-weight:700;background:rgba(0,0,0,.06);border-radius:999px;padding:2px 8px}
.n-art button.on{background:var(--c-nischen,#ea580c);border-color:transparent;color:#fff}
.n-art button.on b{background:rgba(255,255,255,.25)}
.n-back{margin:0 0 10px}

/* Nischenlisten: lesbare Texte, Inserat von der Liste nehmen, Gelöscht, mehrere Kantone, E-Mail */
.n-opt small,.n-chip small,.n-list button b{color:var(--muted)}
.n-chip,.n-list button{color:var(--ink)}
.n-kind{background:color-mix(in srgb,#4f46e5 14%,var(--panel));color:color-mix(in srgb,#4f46e5 75%,var(--ink))}
.n-kind.k-beruf{background:color-mix(in srgb,#ea580c 14%,var(--panel));color:color-mix(in srgb,#c2410c 80%,var(--ink))}
.n-art button b{background:var(--soft);color:var(--ink)}
.n-art button.on b{background:rgba(255,255,255,.25);color:#fff}
.n-art .n-weg-btn{margin-left:auto}
.n-art .n-weg-btn.on{background:#475569}
#n-jobs .job{position:relative}
.n-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:1}
.n-x:hover{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.n-x.n-back-in:hover{background:#dcfce7;color:#15803d;border-color:#86efac}
#n-jobs .job h3{padding-right:34px}
.n-mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--soft);border-radius:12px;padding:10px 12px;margin:4px 0 10px;font-size:14px}
.n-mail label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px}
.n-mail select{width:auto;padding:6px 10px;font-size:14px}
.n-mail .msg{flex-basis:100%;margin:0}
.n-mail .msg:empty{display:none}
.n-filter{position:relative}
.n-cant{position:relative}
.n-cant summary{list-style:none;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 30px 11px 13px;white-space:nowrap;min-width:150px;position:relative;color:var(--ink)}
.n-cant summary::-webkit-details-marker{display:none}
.n-cant summary:after{content:"▾";position:absolute;right:11px;color:var(--muted)}
.n-cant-box{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;width:280px}
.n-cant-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 8px;max-height:260px;overflow:auto;margin-bottom:8px}
.n-cant-list label{display:flex;align-items:center;gap:5px;color:var(--ink);font-size:14px;cursor:pointer}
.n-cant-list input{width:auto}
.n-cant-list small{color:var(--muted)}
@media (max-width:760px){.n-cant-box{left:0;right:auto;width:min(280px,calc(100vw - 32px))}.n-art .n-weg-btn{margin-left:0}}
.n-mail{flex-direction:column;align-items:stretch}
.n-mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.n-mail-art{min-width:130px;font-weight:600;color:var(--ink)}
.n-mail .check{margin:0}
.n-mail .check input{width:auto}