/* Bewerberportal — Ergänzung zu app.css
   Keine eigenen Farbwerte: alles kommt aus den Tokens in app.css (Regel 8).
   Was hier steht, sind nur Anordnungen, die es im VetAgent-Entwurf nicht gibt.

   Das Portal sieht bewusst anders aus als VetAgent. Die bewerbende Person ist
   ein eigener Principal, kein Mandant (Regel 1) — das soll man sehen, bevor
   man die Architektur gelesen hat. */

/* Die Marke im Portal ist VetExperts — die offizielle Wortmarke der Website,
   nicht die Dachmarke und nicht VetAgent. Deshalb auch die Teal-Tokens der
   Marke statt des VetAgent-Indigo. */
.sidebar.portal .brand{padding:18px 18px 22px}
.sidebar.portal .brandlogo{width:100%;max-width:168px;height:auto;display:block}
.sidebar.portal .nav a[aria-current]{background:var(--primary-soft);color:var(--primary-ink);
                                     box-shadow:inset 3px 0 0 var(--primary-ink)}
.sidebar.portal .nav a:hover{background:var(--surface)}

/* ───────────────────────────────── Hilfstext beim Überfahren
   Kein Skript, kein Overlay-Container: ein Attribut und ein Pseudoelement.
   Farben kommen aus den Tokens (Regel 8). */
/* :focus steht hier absichtlich neben :hover — nicht nur :focus-visible.
   Auf einem Telefon gibt es kein Überfahren; ein Hilfstext, der nur die Maus
   kennt, existiert dort nicht. Ein Tipp auf das Zeichen setzt den Fokus und
   öffnet die Blase.
   Das sichtbare Zeichen bleibt klein, damit es den Fließtext nicht zerreißt;
   die Tastaturfläche für den Finger liefert ein unsichtbares Feld darüber
   (--touch aus dem Leitfaden, 44 px). Es liegt hinter dem Inhalt, damit es
   keinen Text überdeckt. */
.hilfe{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
       color:var(--ink-3);cursor:help;position:relative;vertical-align:-3px;flex:none}
/* Das Tastfeld: zentriert, so groß wie --touch, unsichtbar. Nur auf Geräten
   ohne Zeigegerät — auf dem Desktop würde ein 44-px-Feld Nachbartext
   abfangen. */
@media (hover:none){
  .hilfe > i.tastfeld{position:absolute;top:50%;left:50%;width:var(--touch);height:var(--touch);
                      transform:translate(-50%,-50%)}
}
.hilfe:hover,.hilfe:focus{color:var(--primary-ink);background:var(--primary-soft);outline:none}
.hilfe:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hilfe svg{width:13px;height:13px;stroke-width:2.2}

.hilfe::after{content:attr(data-hilfe);position:absolute;bottom:calc(100% + 9px);left:50%;
              transform:translateX(-50%);width:max-content;max-width:290px;
              background:var(--ink);color:var(--bg);font-size:12px;line-height:17px;
              font-weight:400;text-align:left;white-space:normal;padding:9px 11px;
              border-radius:var(--radius-sm);box-shadow:var(--shadow-card);
              display:none;z-index:60;pointer-events:none}
/* Das Dreieck zur Blase. */
.hilfe::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
               transform:translateX(-50%);border:5px solid transparent;
               border-top-color:var(--ink);display:none;z-index:61}
/* `display:none` und nicht `visibility:hidden`: Eine unsichtbare Blase belegt
   trotzdem Platz. Am rechten Rand machte sie den ganzen Inhaltsbereich
   seitwaerts schiebbar — Anfragen +122px bei 1024px, Vorgestellte Personen
   +95px sogar bei 1440px (gemessen 22.10.2026). Das Einblenden verliert
   dafuer seine 120 ms Ueberblendung. */
.hilfe:hover::after,.hilfe:focus::after,
.hilfe:hover::before,.hilfe:focus::before{display:block}

/* Am rechten Rand liefe die Blase aus dem Bild. */
.hilfe.links::after{left:auto;right:-6px;transform:none}
.hilfe.rechts::after{left:-6px;right:auto;transform:none}

/* ── Auf dem Telefon haengt die Blase nicht mehr am Zeichen
   Am Zeichen verankert kann sie dort nicht heil bleiben, aus zwei Gruenden
   gleichzeitig:

     * Sie wird bis zu 290px breit und sitzt mittig ueber einem Zeichen, das
       irgendwo steht. Bei 360px Bildbreite liegt links wie rechts der Rand
       naeher als ihre halbe Breite.
     * `.app`, `.main` und `.scroll` tragen `overflow:hidden` bzw.
       `overflow-y:auto`. Ein absolut positioniertes Kind wird daran
       abgeschnitten, lange bevor der Bildrand ueberhaupt erreicht ist.

   Die Klassen `.links`/`.rechts` helfen dagegen nicht: Sie muessen beim
   Schreiben gesetzt werden, treffen also nur, wer das Layout vorhersieht,
   und sie kennen die Bildbreite nicht.

   `position:fixed` loest beide Probleme auf einmal — es verlaesst jeden
   `overflow`-Container und bezieht sich auf das Sichtfeld. Tragfaehig ist
   das nur, solange kein Vorfahre `transform`, `filter` oder `perspective`
   traegt; nachgesehen am 22.09.2026, keiner tut es. Wer das spaeter
   einfuehrt, macht diese Regel still wirkungslos — deshalb prueft
   `tools/prototype/klick.mjs` die Lage der Blase im Browser und nicht diese
   Datei.

   Die Schwelle ist 767px und nicht 640px: Bei genau dieser Breite wird die
   Seitenleiste in app.css zur Fussleiste, und ab da gilt das Telefonlayout.
   Mit 640px waere zwischen 641 und 767 die verankerte Blase stehen
   geblieben — dort ist der Schirm schmal genug, dass sie bei einem Zeichen
   am Rand weiter herausragt.

   `bottom` rechnet die Fussleiste heraus. Ohne das legt sich die Blase
   darunter: Die Leiste ist `position:fixed`, 64px hoch und traegt denselben
   `z-index:60`. Beim ersten Versuch am 22.09.2026 war genau eine Zeile der
   Erklaerung lesbar, der Rest lag hinter den Navigationspunkten. `z-index:70`
   stellt sicher, dass die Reihenfolge im Dokument darueber nicht mehr
   entscheidet. */
@media (max-width:767px){
  .hilfe::after,
  .hilfe.links::after,
  .hilfe.rechts::after{
    position:fixed;left:12px;right:12px;top:auto;
    bottom:calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom));
    width:auto;max-width:none;transform:none;z-index:70;
    font-size:13px;line-height:19px;padding:12px 14px}
  /* Ein Dreieck, das auf nichts mehr zeigt, behauptet eine Herkunft, die es
     nicht gibt. */
  .hilfe::before,.hilfe:hover::before,.hilfe:focus::before{display:none}
}

/* Eine Zeile Schlüssel/Wert, wie sie im Portal überall vorkommt. */
.kv{display:grid;grid-template-columns:200px 1fr;gap:10px 16px;font-size:14px}
.kv dt{color:var(--ink-3);font-size:13px;line-height:20px}
.kv dd{font-weight:500}
@media (max-width:640px){ .kv{grid-template-columns:1fr;gap:2px 0} .kv dd{margin-bottom:10px} }

/* Zustimmung: eine Karte je Scope, mit Zustand und Rückzugsweg. */
.consent{border:1px solid var(--line);border-radius:var(--radius);padding:14px;
         display:flex;gap:14px;align-items:flex-start;background:var(--bg)}
.consent + .consent{margin-top:10px}
.consent .body{flex:1;min-width:0}
.consent .t{font-weight:600;font-size:14px}
.consent .s{font-size:13px;color:var(--ink-2);margin-top:3px}
.consent .wortlaut{margin-top:8px;font-size:12px;line-height:18px;color:var(--ink-2);
                   background:var(--surface);border-radius:var(--radius-sm);padding:9px 11px;
                   border-left:3px solid var(--line-strong)}

/* Offenlegung: das Nachweisobjekt. Zwei Verträge, sichtbar nebeneinander —
   das ist die Aussage des Screens, nicht Dekoration. */
.disc{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.disc + .disc{margin-top:14px}
.disc-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;
           align-items:flex-start;flex-wrap:wrap}
.disc-head .t{font-weight:600;font-size:15px}
.disc-head .s{font-size:13px;color:var(--ink-3);margin-top:2px}
.disc-body{padding:14px 16px}
.disc-vertraege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:900px){ .disc-vertraege{grid-template-columns:1fr} }
.vertrag{background:var(--surface);border-radius:var(--radius-sm);padding:11px 13px;
         border:1px solid var(--line)}
.vertrag .k{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.vertrag .v{font-size:14px;font-weight:600;margin-top:3px}
.vertrag .d{font-size:12px;color:var(--ink-2);margin-top:4px}

/* Felder, die hinausgegangen sind — und die, die dringeblieben sind. */
.felder{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Frist: läuft, überfällig oder erledigt. */
.frist{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.frist.ok{color:var(--success)} .frist.warn{color:var(--warning)} .frist.over{color:var(--destructive)}

/* Zugriffsprotokoll (Art. 15 Abs. 1 lit. c). */
.log{border-top:1px solid var(--line)}
.log-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
         font-size:13px}
.log-row .who{font-weight:600;flex:none;width:120px}
.log-row .what{flex:1;min-width:0;color:var(--ink-2)}
.log-row .when{color:var(--ink-3);font-size:12px;flex:none}

/* Ein Recht, das man ausüben kann — mit der Frist aus der Zeile, nicht aus
   dem Code. */
.recht{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.recht:last-child{border-bottom:none}
.recht .body{flex:1;min-width:0}
.recht .t{font-weight:600}
.recht .s{font-size:12px;color:var(--ink-3);margin-top:2px}

/* Formulare im Portal.
 *
 * Eine Klasse statt der Inline-Stile, die in praxis/stellen.html noch stehen:
 * Dort wiederholt sich derselbe Block viermal, und beim fünften Feld weicht
 * er ab. Nur semantische Tokens — `border:1px solid #ddd` waere Regel 8. */
.form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.form label{display:block;font-size:12px;color:var(--ink-3)}
.form input,.form select{
  width:100%;height:40px;margin-top:4px;padding:0 9px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font:inherit;color:var(--ink);background:var(--surface)}
/* `--focus` statt `--primary`, `--ink` statt `--ink-1`: beide letzteren waren
   nie definiert. Ohne Rückfallwert macht das die Eigenschaft ungültig, und
   `outline` wird zu `outline-style:none` — diese Regel hat den globalen
   Fokusring aus app.css:89 also entfernt statt ihn zu ersetzen. Derselbe
   Fehler stand in forms.css für `.inp`. */
.form input:focus,.form select:focus{
  outline:2px solid var(--focus);outline-offset:-1px}