/* Stellenguru — Basis-Stylesheet & Brand-Tokens
   Eigenstaendige Marke (getrennt von pesch.consulting / "Tiefsee").
   Richtung "Guru": ruhiges, kompetentes Indigo mit warmem Bernstein-Akzent.
   Logo folgt separat; hier vorerst Wortmarke "Stellen<b>guru</b>". */

:root {
  /* Marken-Farben */
  --sg-indigo-900: #1b1440;
  --sg-indigo-800: #241a5c;
  --sg-indigo-700: #322a7a;
  --sg-indigo-500: #5b4fd6;   /* Primär */
  --sg-indigo-300: #a99ff0;
  --sg-amber-500:  #f5a524;   /* Akzent (Energie/Call-to-Action) */
  --sg-amber-300:  #ffcf7a;

  /* Neutrale */
  --sg-ink:    #1a1730;
  --sg-body:   #3b3752;
  --sg-muted:  #6d6a86;
  --sg-line:   #e6e4f0;
  --sg-panel:  #f5f4fb;
  --sg-bg:     #ffffff;
  --sg-white:  #ffffff;

  /* Rollen */
  --sg-primary: var(--sg-indigo-500);
  --sg-accent:  var(--sg-amber-500);

  /* Typo */
  --sg-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --sg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Abstand/Radius/Schatten */
  --sg-radius:   14px;
  --sg-radius-s: 9px;
  --sg-shadow:   0 10px 30px rgba(27, 20, 64, 0.12);
  --sg-shadow-s: 0 4px 14px rgba(27, 20, 64, 0.08);
  --sg-maxw:     1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sg-font-body);
  color: var(--sg-body);
  background: var(--sg-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--sg-font-head); color: var(--sg-ink); line-height: 1.12; font-weight: 600; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
p  { margin: 0 0 1rem; }
a  { color: var(--sg-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--sg-maxw); margin: 0 auto; padding: 0 24px; }

/* --- Kopfzeile / Wortmarke --- */
.sg-brand {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: 1.4rem; color: var(--sg-ink); letter-spacing: -0.01em;
  text-decoration: none;
}
.sg-brand b { color: var(--sg-primary); font-weight: 600; }
.sg-brand img { width: 27px; height: 27px; align-self: center; margin-right: 7px; }

.sg-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.86); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sg-line);
}
.sg-header .container { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.sg-nav { display: flex; align-items: center; gap: 22px; }
.sg-nav a { color: var(--sg-body); font-size: 0.96rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sg-primary); color: #fff; box-shadow: var(--sg-shadow-s); }
.btn-primary:hover { background: var(--sg-indigo-700); text-decoration: none; }
.btn-accent  { background: var(--sg-accent); color: #3a2600; }
.btn-accent:hover { background: var(--sg-amber-300); text-decoration: none; }
.btn-ghost   { background: transparent; color: var(--sg-ink); border-color: var(--sg-line); }
.btn-ghost:hover { border-color: var(--sg-indigo-300); text-decoration: none; }
.btn-block { width: 100%; }

/* --- Karten / Panels --- */
.card {
  background: var(--sg-white); border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius); box-shadow: var(--sg-shadow-s); padding: 28px;
}

/* --- Auth-Layout --- */
.auth-wrap {
  min-height: calc(100vh - 66px);
  display: grid; place-items: center; padding: 40px 20px;
  background:
    radial-gradient(60% 60% at 15% 0%, rgba(91,79,214,0.10), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, rgba(245,165,36,0.10), transparent 60%),
    var(--sg-panel);
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card h1 { font-size: 1.7rem; margin: 0 0 6px; }
.auth-sub { color: var(--sg-muted); margin: 0 0 22px; font-size: 0.98rem; }

/* --- Formulare --- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--sg-ink); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius-s);
  background: #fff; color: var(--sg-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
  outline: none; border-color: var(--sg-primary);
  box-shadow: 0 0 0 3px rgba(91,79,214,0.16);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Meldungen --- */
.msg { border-radius: var(--sg-radius-s); padding: 12px 14px; font-size: 0.94rem; margin-bottom: 16px; display: none; }
.msg.show { display: block; }
.msg-error { background: #fdecec; color: #a2231d; border: 1px solid #f6cfcc; }
.msg-ok    { background: #eafaf0; color: #14683a; border: 1px solid #c6ecd4; }

.auth-alt { text-align: center; margin-top: 18px; color: var(--sg-muted); font-size: 0.94rem; }

/* --- Footer --- */
.sg-footer { border-top: 1px solid var(--sg-line); padding: 28px 0; color: var(--sg-muted); font-size: 0.9rem; }
.sg-footer .container { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* --- Dashboard (app.html) --- */
.app-main { padding: 34px 0 60px; background: var(--sg-panel); min-height: calc(100vh - 66px); }
.app-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) { .app-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.app-head { margin-bottom: 24px; }
.app-head h1 { font-size: 1.8rem; margin: 0 0 4px; }
.app-head .sub { color: var(--sg-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.badge-onboarding { background: #fff4e0; color: #8a5a00; border-color: #ffe0ad; }
.badge-active     { background: #eafaf0; color: #14683a; border-color: #c6ecd4; }
.badge-pending    { background: var(--sg-panel); color: var(--sg-muted); border-color: var(--sg-line); }

.card h2 { font-size: 1.15rem; margin: 0 0 4px; }
.card .card-sub { color: var(--sg-muted); font-size: .93rem; margin: 0 0 18px; }

.banner {
  background: linear-gradient(120deg, var(--sg-indigo-700), var(--sg-indigo-500));
  color: #fff; border-radius: var(--sg-radius); padding: 24px 26px; margin-bottom: 22px;
  box-shadow: var(--sg-shadow);
}
.banner h2 { color: #fff; margin: 0 0 6px; }
.banner p { color: rgba(255,255,255,.88); margin: 0 0 16px; }

.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--sg-line);
}
.member-list li:first-child { border-top: none; }
.member-info { flex: 1; min-width: 0; }
.member-info .n { font-weight: 600; color: var(--sg-ink); }
.member-info .e { color: var(--sg-muted); font-size: .88rem; word-break: break-all; }
.role-tag { font-size: .74rem; font-weight: 600; color: var(--sg-primary); text-transform: uppercase; letter-spacing: .03em; }
.icon-btn {
  border: 1px solid var(--sg-line); background: #fff; color: var(--sg-muted);
  border-radius: var(--sg-radius-s); padding: 6px 10px; cursor: pointer; font: inherit; font-size: .85rem;
}
.icon-btn:hover { border-color: #f6cfcc; color: #a2231d; }

.divider { height: 1px; background: var(--sg-line); margin: 20px 0; border: 0; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form .field { flex: 1; min-width: 160px; margin-bottom: 0; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .sg-nav a:not(.btn) { display: none; }
}