/* #1584: oeffentlicher Kopf (templates/partials/oeffentlicher_kopf.html). Fixiert beim Scrollen (sticky), gleich auf
   Startseite, Berufsfeld-Seiten, Preisen und Rechtstexten. Eigene Klassen (ok-*), keine Abhaengigkeit von den
   Variablen der jeweiligen Seite. Der Kopf muss DIREKTES Kind von body sein - in einem Vorfahren mit overflow:hidden
   klebt sticky nicht (so sass die Startseiten-Leiste bis #1584 im Hero). */
/* #1606 (CRO 30.10.2026): EIN Dunkelblau fuer Kopf und Startbereich - die Variable --ok-navy. Die Startseite leitet
   ihr --kp-navy-deep (Anfang des Hero-Verlaufs) davon ab, es gibt also keinen zweiten Farbton. Gemessen war der Kopf
   schon vorher in jeder Scroll-Position rgb(13,33,55); dunkler WIRKTE er beim Scrollen durch den Schatten
   (box-shadow 0 2px 12px, auf dem hellen Pergament ein dunkles Band unter dem Kopf). Der Schatten ist weg, der Kopf
   hat in jedem Zustand dieselbe Flaeche, dieselbe Linie und keine Ueberlagerung, keine Transparenz. */
:root { --ok-hoehe: 68px; --ok-navy: #0d2137; }
html { scroll-padding-top: calc(var(--ok-hoehe) + 8px); }   /* Sprungziele nicht unter dem Kopf */

.ok-kopf {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ok-navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ok-kopf-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1280px; margin: 0 auto; height: var(--ok-hoehe); padding: 0 32px;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
}
/* #1606 (CRO): Logo 28 -> 33 px (+18 %), damit es die weisse Flaeche besser fuellt. Die Kachel waechst nur um 1 px
   (Innenabstand 6/12 -> 4/9), die Kopfhoehe (--ok-hoehe) bleibt unveraendert. */
.ok-logo {
  background: #fff; border-radius: 10px; padding: 4px 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; text-decoration: none;
}
.ok-logo picture { display: block; }
.ok-logo img { height: 33px; width: auto; display: block; }
.ok-rechts { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ok-link {
  color: rgba(255,255,255,.86); text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 500; padding: 9px 12px; border-radius: 9px;
}
.ok-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.ok-cta {
  /* #1589: #B8722C hatte mit weisser Schrift 3,83:1 (WCAG AA verlangt 4,5:1) - jetzt das Kupfer-Token der Seiten
     (--kp-copper #A06326, 4,88:1), Hover --kp-copper-hover #8E561F (6,0:1). */
  background: #A06326; color: #fff; text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px; margin-left: 4px;
}
.ok-cta:hover { background: #8E561F; }
.ok-zurueck {
  color: rgba(255,255,255,.92); text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.30); padding: 7px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; margin-right: 4px;
}
.ok-zurueck:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); }
.ok-link:focus-visible, .ok-cta:focus-visible, .ok-zurueck:focus-visible, .ok-logo:focus-visible,
.ok-klapp summary:focus-visible, .ok-sprachliste a:focus-visible {
  outline: 3px solid #66B4E1; outline-offset: 2px;
}

/* Sprache: natives details/summary (Tastatur ohne Skript); das Skript schliesst bei Klick daneben und Escape */
.ok-klapp { position: relative; }
.ok-klapp summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  padding: 8px 10px; border-radius: 9px; min-height: 36px;
}
.ok-klapp summary::-webkit-details-marker { display: none; }
.ok-klapp summary:hover, .ok-klapp[open] summary { color: #fff; background: rgba(255,255,255,.08); }
.ok-sprachliste {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; margin: 0; padding: 6px;
  list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(13,33,55,.22);
}
.ok-sprachliste a {
  display: block; padding: 9px 12px; border-radius: 8px; color: #153D64; text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.ok-sprachliste a:hover { background: #F1F5F9; }
.ok-sprachliste a[aria-current="true"] { font-weight: 700; background: #EEF4FA; }

/* #1589: das Menue (Arbeitgeber, Preise) gibt es nur unter 900 px - darueber stehen beide Links in der Leiste */
.ok-menue { display: none; }
@media (max-width: 900px) {
  .ok-nur-breit { display: none; }                          /* Arbeitgeber und Preise wandern ins Menue */
  .ok-menue { display: block; }
  .ok-menue summary { padding: 8px; }
  .ok-kopf-innen { padding: 0 20px; }
}
@media (max-width: 560px) {
  :root { --ok-hoehe: 58px; }
  .ok-kopf-innen { padding: 0 12px; gap: 8px; }
  .ok-logo { padding: 4px 7px; }
  .ok-logo img { height: 33px; }                            /* #1589: 22 -> 28 px; #1606 (CRO): 28 -> 33 px */
  .ok-nur-gross { display: none; }                          /* "Kostenlos starten" steht im Inhalt */
  .ok-link { font-size: 13px; padding: 8px 8px; }
  .ok-zurueck { padding: 6px 10px; font-size: 14px; }
  /* Auf dem Telefon nur der Pfeil - der Text bleibt fuer Vorlesehilfen (Name des Links), der Knopf bleibt sichtbar */
  .ok-zurueck-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ok-klapp summary { padding: 7px 7px; font-size: 12.5px; }
}
/* Der Rueckweg bleibt auf JEDER Breite sichtbar (#1188: ein Rueckweg, der auf dem Handy verschwindet, ist keiner). */
@media print { .ok-kopf { position: static; box-shadow: none; } }