/* Der Gehaltscheck (/expert/gehaltscheck/). Look & Feel wie die
   Kandidatenreise (../index.html): Flaechenton, weisse runde Karten,
   Fraunces fuer Ueberschriften, Onest fuer Text, Petrol fuer Knoepfe.

   Keine eigenen Farbwerte (Regel 8). Die Ergebniskarte ist Pfirsich wie
   die Karte „Gehaltsbenchmark" im Entwurf der Kandidatenreise (Schritt 3):
   Flaeche und Text aus --pastel-peach/--pastel-peach-ink (6,59:1), Zeichen
   und Balken in --akzent-orange (Grafik, nicht fuer Fliesstext). Die
   helle Seite des Balkens und der Kartenrand sind aus denselben Tokens
   gemischt: Pfirsich allein verschwaende auf der Pfirsichflaeche. */

.gc{
  --gc-flaeche:var(--pastel-peach);
  --gc-akzent:var(--akzent-orange);
  --gc-akzent-ink:var(--pastel-peach-ink);
  --gc-spur:color-mix(in srgb, var(--akzent-orange) 25%, var(--bg));
  --gc-rand:color-mix(in srgb, var(--akzent-orange) 18%, var(--bg));
}

body{background:var(--surface-gray);min-height:100dvh;margin:0}
.gc{max-width:720px;margin:0 auto;padding:28px 20px 56px}
.gc h1{font-family:var(--font-display);font-size:32px;line-height:38px;font-weight:600;
       color:var(--ink);margin:0 0 8px}
.gc h1:focus,.gc h2:focus{outline:none}
.gc h2{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:600;
       color:var(--ink);margin:0 0 10px}
.gc p{font-size:15px;line-height:23px;color:var(--ink-2);margin:0 0 12px}
.gc .leise{font-size:13px;line-height:19px;color:var(--ink-3)}
.gc a{color:var(--primary-ink);font-weight:600}
.gc a.btn.primary{color:var(--bg)}
[hidden]{display:none !important}

/* Das Band so breit wie die Spalte darunter (recht.css: 780px). */
.recht-band .innen{max-width:720px;padding-top:14px;padding-bottom:14px}

.linkknopf{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;
           color:var(--primary-ink);cursor:pointer}
.linkknopf:hover{text-decoration:underline}
.linkknopf:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.abmelden-zeile{text-align:right;margin:0 0 8px}

/* Kopf: Symbol, Ueberschrift, zwei Schilder (wie die Karte in Schritt 3). */
.gc-kopf{display:flex;gap:16px;align-items:flex-start;margin:0 0 20px}
.gc-symbol{flex:none;display:grid;place-items:center;width:56px;height:56px;
           border-radius:var(--radius-lg);background:var(--gc-flaeche);color:var(--gc-akzent)}
.gc-symbol svg{width:28px;height:28px}
.gc-symbol.klein{width:40px;height:40px;border-radius:var(--radius);background:var(--bg)}
.gc-symbol.klein svg{width:20px;height:20px}
.schilder{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.schilder li{font-size:13px;line-height:18px;font-weight:600;padding:5px 12px;
             border-radius:var(--radius-pill);background:var(--gc-flaeche);color:var(--gc-akzent-ink)}
.schilder li:nth-child(2){background:var(--pastel-teal);color:var(--pastel-teal-ink)}

.fehler-kasten{margin:0 0 14px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}

.karte{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
       box-shadow:var(--shadow-card);padding:22px;margin:0 0 14px}
.ansicht > .btn{margin-top:4px}

/* ---------------------------------------------------------------- Eingaben */

/* Ein fieldset je Angabe: Die Gruppe hat ihren Namen (legend), die
   Pfeiltasten wandern innerhalb der Gruppe -- das leisten Radio-Knoepfe
   selbst. Gezeichnet werden sie als Chips bzw. als Segment. */
.gruppe{border:0;margin:0 0 18px;padding:0;min-width:0}
.gruppe legend{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);
               margin:0 0 8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label,.segment label{position:relative;cursor:pointer}
/* Unsichtbar, aber bedienbar: Fokus und Auswahl bleiben beim Radio-Knopf. */
.chips input,.segment input{position:absolute;inset:0;width:100%;height:100%;margin:0;
                            opacity:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;
            border:1px solid var(--line-strong);border-radius:var(--radius-pill);
            background:var(--bg);color:var(--ink-2);font-size:14px;line-height:20px}
.chips label:hover span{border-color:var(--primary-ink)}
.chips input:checked + span{background:var(--primary-soft);color:var(--primary-ink);
                            border-color:var(--primary-ink);font-weight:600}
.chips input:focus-visible + span,.segment input:focus-visible + span{
  outline:2px solid var(--focus);outline-offset:2px}

.segment{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;
         border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface)}
.segment span{display:flex;align-items:center;justify-content:center;min-height:38px;
              border-radius:var(--radius-sm);font-size:14px;line-height:18px;color:var(--ink-2);
              white-space:nowrap}
.segment label:hover span{background:var(--bg)}
.segment input:checked + span{background:var(--primary-ink);color:var(--bg);font-weight:600}
#vorbelegt{margin:0}
#praxismanagement{margin:0 0 16px}

/* ---------------------------------------------------------------- Ergebnis */

.gehalt{background:var(--gc-flaeche);border-color:var(--gc-rand)}
.gehalt-kopf{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.gehalt-kopf h2{margin:0}
.gc .gehalt-leer{margin:0;color:var(--ink-2)}
.gc .spanne{font-family:var(--font-display);font-size:36px;line-height:42px;font-weight:600;
            color:var(--ink);margin:0}
.spanne span{white-space:nowrap}
.gc .spanne-zusatz{font-size:14px;line-height:20px;color:var(--ink-2);margin:2px 0 18px}

/* Der Balken: die Spanne von links nach rechts, die Marke beim
   Orientierungswert. Die Lage setzt gehaltscheck.js als --lage. */
.balken{margin:0 0 18px}
.balken-marke-text{position:relative;left:var(--lage, 50%);transform:translateX(-50%);
                   width:max-content;font-size:13px;line-height:18px;font-weight:600;
                   color:var(--gc-akzent-ink);margin:0 0 6px}
.balken-spur{position:relative;height:12px;border-radius:var(--radius-pill);
             background:linear-gradient(90deg, var(--gc-spur), var(--gc-akzent))}
.balken-marke{position:absolute;top:50%;left:var(--lage, 50%);width:22px;height:22px;
              transform:translate(-50%,-50%);border-radius:var(--radius-pill);
              background:var(--bg);border:4px solid var(--gc-akzent-ink);box-shadow:var(--shadow-card)}
.balken-enden{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;
              line-height:18px;color:var(--ink-2)}

.gc .satz{font-size:16px;line-height:24px;color:var(--ink);margin:0 0 12px}
.gc .naechste{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;
              border-radius:var(--radius);background:var(--bg);font-size:14px;line-height:20px;
              color:var(--ink);font-weight:600}
.naechste svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--gc-akzent-ink)}

/* ---------------------------------------------------------------- Hinweise, Quellen */

.hinweise{list-style:none;margin:0 0 18px;padding:0 4px}
.hinweise li{font-size:13px;line-height:20px;color:var(--ink-2);margin:0 0 6px;padding-left:16px;
             position:relative}
.hinweise li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
                     border-radius:var(--radius-pill);background:var(--gc-akzent)}

.gespraech .btn{height:auto;min-height:46px;white-space:normal;text-align:center;
                padding:10px 18px;font-size:15px;line-height:20px}
.gc .profil-zeile{margin:14px 0 0}

.quellen{padding:4px 4px 0}
.gc .quellen h2{font-family:var(--font);font-size:13px;line-height:19px;color:var(--ink-2);margin:0 0 6px}
.quellen ul{margin:0 0 10px;padding-left:18px}
.quellen li{font-size:13px;line-height:20px;color:var(--ink-3);margin:0 0 3px}
.gc .quellen p{font-size:13px;line-height:19px;color:var(--ink-3);margin:0 0 4px}
.gc .quellen a{font-weight:500;overflow-wrap:anywhere}

.gc-fuss{max-width:720px;margin:0 auto;padding:0 20px 40px;color:var(--ink-3);font-size:13px}
.recht-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;border-top:1px solid var(--line);
             padding-top:14px}
.recht-links a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* Telefon: kompakter, die Spanne bleibt einzeilig lesbar. */
@media (max-width:560px){
  .gc{padding:18px 14px 44px}
  .gc h1{font-size:26px;line-height:31px}
  .gc-kopf{gap:12px}
  .gc-symbol{width:44px;height:44px}
  .gc-symbol svg{width:22px;height:22px}
  .karte{padding:16px}
  .chips{gap:6px}
  .chips span{min-height:36px;padding:6px 11px;font-size:13px}
  .segment span{font-size:13px}
  .gc .spanne{font-size:28px;line-height:34px}
}