/* ======================================================================
   Die Kopfzeile — zentral, aus dem Modell, ohne Theme.
   ======================================================================
   ❗️Alles Sichtbare hängt an Design-Variablen (Vision E1): Farben und
      Schriften kommen aus den Einstellungen und sind an Ort und Stelle
      überschreibbar. Hier stehen deshalb KEINE festen Farben ausser als
      Rückfallwert — wer eine feste Farbe hineinschreibt, hebelt die
      Design-Einstellungen für alle Websites aus.
   ====================================================================== */

.fw-site-header{
  background: var(--header-bg, var(--color-background, #fff));
  color: var(--header-text, var(--color-text, #1f2937));
  /* ❗️DER RAND KOMMT AUS DER SCHRIFTFARBE DIESER FLAECHE, nicht aus dem
     Seiten-Design. `--color-border` wird aus dem SEITEN-Hintergrund gerechnet;
     auf einem Kopf mit eigener Farbe ist das eine fremde Farbe. Bei einem
     hellen Design und fast schwarzem Kopf entstand daraus ein heller Strich
     quer ueber die Seite (gemessen am 2026-09-29: #c8bfaa auf #0b0f0d).
     `currentColor` ist hier die Schrift des Kopfes, 14 % davon sind auf hell
     wie auf dunkel eine feine Kante und nie ein Fremdkoerper.
     Die erste Zeile ist der Rueckfall fuer Browser ohne `color-mix`. */
  border-bottom: 1px solid rgba(128,128,128,.22);
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  position: sticky; top: 0; z-index: 50;
}

.fw-kopf{
  display: flex;
  align-items: center;
  gap: var(--kopf-abstand, 22px);
  max-width: var(--seite-breite, 1200px);
  margin: 0 auto;
  padding: var(--kopf-hoehe, 14px) var(--seite-rand, 20px);
  font-family: var(--font-body, inherit);
}

/* Jedes Teil steht für sich — keine Hüllen, die mehrere zusammenfassen.
   Genau das war der Grund, warum sich Menüpunkte früher nur gemeinsam
   verschieben liessen. */
.fw-kopf-teil{
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: inherit; white-space: nowrap;
}

/* Ausgeblendete Teile. Sie stehen NUR fuer Angemeldete im Markup (siehe
   KopfRenderer) und sind auch dort unsichtbar; im Bearbeiten-Modus macht das
   Layover einen Schemen daraus. */
.fw-kopf-teil--aus{ display: none; }

.fw-kopf-teil--logo,
.fw-kopf-teil--name{
  font-family: var(--font-heading, var(--font-body, inherit));
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--color-primary, #0a6ebd);
}
.fw-kopf-teil--logo img{ max-height: 40px; width: auto; display: block; }

.fw-kopf-teil--menue,
.fw-kopf-teil--link{
  font-size: .95rem;
  color: var(--header-link, var(--color-text, #1f2937));
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.fw-kopf-teil--menue:hover,
.fw-kopf-teil--link:hover{
  color: var(--header-link-hover, var(--color-primary, #0a6ebd));
  border-bottom-color: currentColor;
}

.fw-kopf-teil--knopf{
  padding: 9px 17px; border-radius: var(--radius, 8px);
  font-size: .9rem; font-weight: 600; line-height: 1;
  background: var(--color-primary, #0a6ebd);
  color: var(--color-on-primary, #fff);
  border: 1px solid transparent;
}
.fw-kopf-teil--knopf:hover{ filter: brightness(1.08); }
.fw-kopf-knopf--umriss{
  background: transparent; color: var(--color-primary, #0a6ebd);
  border-color: currentColor;
}
.fw-kopf-knopf--leise{
  background: transparent; color: inherit; border-color: transparent;
  text-decoration: underline;
}

.fw-kopf-teil--telefon{ font-size: .9rem; font-weight: 600; }
.fw-kopf-telefon-zeichen{
  width: 15px; height: 15px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--zeichen-telefon) center/contain no-repeat;
  mask: var(--zeichen-telefon) center/contain no-repeat;
  --zeichen-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.fw-kopf-teil--text{ font-size: .9rem; color: var(--color-muted, inherit); }

/* Der Trenner ist ein STRICH, kein Menüpunkt — er muss sich klar davon
   unterscheiden, sonst hält man ihn für einen anklickbaren Eintrag. */
.fw-kopf-teil--trenner{
  width: 1px; align-self: stretch; min-height: 20px;
  background: var(--color-border, rgba(0,0,0,.14));
}

/* Der Abstand ersetzt das frühere „margin-left:auto" der Zonen: aus einer
   versteckten Layout-Regel wird ein Element, das man anfassen kann. */
.fw-kopf-teil--abstand{ min-width: 8px; }
/* Der Sprachumschalter (Übersetzer-Modul): klein, am Ende der Leiste. Seine
   Knöpfe gestaltet das Partial selbst (core/Lib/partials/lang-switcher.php). */
.fw-kopf-teil--sprache{ display: flex; align-items: center; flex: 0 0 auto; }

/* ======================================================================
   Schmale Schirme
   ======================================================================
   ❗️EIN DOM, nicht zwei. Die Menüpunkte werden nicht ein zweites Mal
      ausgegeben, sondern nur anders angeordnet: `flex-wrap` plus volle
      Breite lässt sie unter die Kopfzeile rutschen. Ein zweiter Satz
      Elemente hiesse doppelte Kennungen — und das Bearbeiten im Layover
      spricht über genau diese Kennungen.

   ❗️Voreinstellung je SORTE, nicht je Element: Logo und Telefon bleiben
      stehen (am Handy ist die Nummer die wichtigste Handlung), Menüpunkte
      und Links klappen ein, Trenner und Abstand verschwinden. So ist es
      ohne eine einzige Einstellung brauchbar.
   ====================================================================== */
.fw-kopf-burger{
  display: none; margin-left: auto; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border, rgba(0,0,0,.14));
  border-radius: var(--radius, 8px); cursor: pointer; color: inherit;
}
.fw-kopf-burger-strich{
  position: relative; display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.fw-kopf-burger-strich::before,
.fw-kopf-burger-strich::after{
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.fw-kopf-burger-strich::before{ top: -6px; }
.fw-kopf-burger-strich::after{ top: 6px; }

/* ======================================================================
   Untermenues — ein Menuepunkt mit Aufklapper
   ======================================================================
   ❗️OHNE JAVASCRIPT. Aufgeklappt wird mit :hover UND :focus-within. Das
      zweite ist kein Beiwerk: es ist der ganze Tastaturweg. Wer den
      Elternpunkt antabbt, macht damit den Aufklapper sichtbar, und erst
      dadurch werden die Eintraege darin ueberhaupt anspringbar.
   ❗️Deshalb auch `visibility` statt `display:none` — mit display gaebe es
      nichts, worauf der Fokus wandern koennte, und der Aufklapper waere mit
      der Tastatur nicht erreichbar.
   ❗️Kein Abstand zwischen Punkt und Aufklapper (top:100%). Ein Spalt dazwischen
      heisst: die Maus verlaesst den Punkt, bevor sie den Aufklapper erreicht,
      und der geht einem unterwegs zu. */
.fw-kopf-teil--auf{ position: relative; }
.fw-kopf-auf-haupt{
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.fw-kopf-pfeil{
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .5;
  transition: transform .13s linear, opacity .13s linear;
}
.fw-kopf-unter{
  position: absolute; left: 0; top: 100%; z-index: 60;
  min-width: 180px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--header-bg, var(--color-surface, #fff));
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius, 8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s linear, transform .12s linear, visibility .12s linear;
}
.fw-kopf-teil--auf:hover > .fw-kopf-unter,
.fw-kopf-teil--auf:focus-within > .fw-kopf-unter{
  opacity: 1; visibility: visible; transform: none;
}
.fw-kopf-teil--auf:hover .fw-kopf-pfeil,
.fw-kopf-teil--auf:focus-within .fw-kopf-pfeil{ transform: rotate(180deg); opacity: .8; }

.fw-kopf-unter-punkt{
  padding: 8px 10px; border-radius: 6px; white-space: nowrap;
  text-decoration: none; font-size: .92rem;
  color: var(--header-link, var(--color-text, #1f2937));
}
.fw-kopf-unter-punkt:hover{ background: rgba(127,127,127,.14); }
.fw-kopf-unter-punkt--aus{ display: none; }

/* ❗️Dieselben Regeln stehen unten noch einmal für `[data-eng]` (ab 761 px,
   wenn die Leiste nicht in eine Zeile passt). Wer hier etwas ändert, ändert
   es dort mit. */
@media (max-width: 760px){
  .fw-kopf{ flex-wrap: wrap; gap: 14px; row-gap: 0; }
  .fw-kopf-burger{ display: inline-flex; }

  /* ❗️Am Handy ist die Anordnung VORGEGEBEN, nicht frei — deshalb `!important`
     gegen die gespeicherte Reihenfolge. Ohne das rutschten Telefon und Burger
     unter die Menüpunkte, sobald diese volle Breite bekommen: alles, was im
     Quelltext nach ihnen steht, wird mit umgebrochen.
     Das ist bewusst so: eine schmale Leiste braucht eine verlässliche
     Ordnung (Logo — Anrufen — Menü), keine buchstäbliche Wiedergabe der
     Reihenfolge vom grossen Bildschirm. */
  .fw-kopf-teil--logo,
  .fw-kopf-teil--name{ order: 1 !important; }
  .fw-kopf-teil--telefon{ order: 2 !important; margin-left: auto; }
  .fw-kopf-burger{ order: 3; }
  /* Der Sprachumschalter bleibt in der Leiste, rechts, direkt vor dem Burger
     (im Quelltext steht er davor, bei gleicher Ordnung also auch hier). */
  .fw-kopf-teil--sprache{ order: 3 !important; margin-left: auto; }
  .fw-kopf-teil--sprache + .fw-kopf-burger{ margin-left: 0; }
  .fw-kopf-teil--menue,
  .fw-kopf-teil--link,
  .fw-kopf-teil--text{ order: 10 !important; }
  .fw-kopf-teil--knopf{ order: 20 !important; }

  .fw-kopf-teil--abstand,
  .fw-kopf-teil--trenner{ display: none; }

  /* ❗️Telefon bleibt, aber NUR als Zeichen. Beim ersten Versuch stand die
     Nummer ausgeschrieben in der Leiste — eine lange Nummer (oder ein
     Platzhaltertext) schob den Knopf in eine zweite Zeile und den Burger aus
     dem Bild. Ein Zeichen ist immer gleich breit, egal was drinsteht.
     Angetippt wird trotzdem gewählt, und der Name steht im aria-label. */
  .fw-kopf-teil--telefon > span:not(.fw-kopf-telefon-zeichen){ display: none; }
  .fw-kopf-teil--telefon{ width: 40px; height: 40px; justify-content: center;
    border: 1px solid var(--color-border, rgba(0,0,0,.14));
    border-radius: var(--radius, 8px); }
  .fw-kopf-telefon-zeichen{ width: 18px; height: 18px; }

  /* Der Knopf gehört ins aufgeklappte Menü, nicht in die enge Leiste. */
  .fw-kopf-teil--knopf{ display: none; }

  /* Eingeklappt: nicht da. Ausgeklappt: volle Breite untereinander. */
  .fw-kopf-teil--menue,
  .fw-kopf-teil--link,
  .fw-kopf-teil--text{ display: none; }
  .fw-kopf[data-offen] .fw-kopf-teil--menue:not(.fw-kopf-teil--aus),
  .fw-kopf[data-offen] .fw-kopf-teil--link:not(.fw-kopf-teil--aus),
  .fw-kopf[data-offen] .fw-kopf-teil--text:not(.fw-kopf-teil--aus){
    display: flex; width: 100%;
    padding: 13px 2px; border-bottom: 0;
    /* Dieselbe Ueberlegung wie oben: das aufgeklappte Menue hat eine eigene
       Flaeche, also kommt seine Kante aus der eigenen Schrift. */
    border-top: 1px solid rgba(128,128,128,.22);
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  }
  /* Der Knopf gehört unter die Punkte, nicht dazwischen. */
  .fw-kopf[data-offen] .fw-kopf-teil--knopf:not(.fw-kopf-teil--aus){
    display: flex; width: 100%; justify-content: center; margin: 12px 0 4px;
  }

  /* ❗️AM HANDY GIBT ES KEINEN AUFKLAPPER. Es gibt dort kein Zeigen ohne
     Klicken, und ein Aufklapper, der erst auf Antippen aufgeht, verschluckt
     den ersten Tipp auf einen Punkt, der selbst ein Ziel hat. Die Leiste
     steht ohnehin schon als Spalte — der Untereintrag rueckt also einfach
     ein und ist sofort da. */
  .fw-kopf[data-offen] .fw-kopf-teil--auf{
    flex-direction: column; align-items: stretch;
  }
  .fw-kopf-unter{
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 4px 16px;
    background: none; border: 0; box-shadow: none;
  }
  .fw-kopf-unter-punkt{ padding: 11px 4px; white-space: normal; }
  .fw-kopf-pfeil{ display: none; }
}

/* ======================================================================
   Zu eng für eine Zeile, auch ab 761 px
   ======================================================================
   ❗️Gemeldet 2026-10-06 im iPad-Modus („oft wird Text abgeschnitten").
      Die feste Grenze von 760 px kennt den Inhalt nicht. Zauberstein braucht
      mit vier Menüpunkten, „Mein Account" und einem Knopf rund 1000 px; bei
      768 px war „Mein Account" halb abgeschnitten, und der Knopf mit der
      Telefonnummer stand bis 900 px ganz ausserhalb des Bildes.
      kopf.js misst deshalb, ob alles in eine Zeile passt, und setzt sonst
      `data-eng`. Die Leiste sieht dann aus wie am Handy: Logo, Telefon,
      Burger. Die Regeln sind dieselben wie oben, nur an das Merkmal statt
      an die Breite gebunden.
   ❗️Beim Bearbeiten des Kopfs im Editor klappt nichts ein (kopf.js), sonst
      wären die Teile zum Verschieben weg.
   ====================================================================== */
.fw-kopf[data-eng]{ flex-wrap: wrap; gap: 14px; row-gap: 0; }
.fw-kopf[data-eng] .fw-kopf-burger{ display: inline-flex; order: 3; }
.fw-kopf[data-eng] .fw-kopf-teil--logo,
.fw-kopf[data-eng] .fw-kopf-teil--name{ order: 1 !important; }
.fw-kopf[data-eng] .fw-kopf-teil--telefon{ order: 2 !important; margin-left: auto; }
.fw-kopf[data-eng] .fw-kopf-teil--sprache{ order: 3 !important; margin-left: auto; }
.fw-kopf[data-eng] .fw-kopf-teil--sprache + .fw-kopf-burger{ margin-left: 0; }
.fw-kopf[data-eng] .fw-kopf-teil--menue,
.fw-kopf[data-eng] .fw-kopf-teil--link,
.fw-kopf[data-eng] .fw-kopf-teil--text{ order: 10 !important; display: none; }
.fw-kopf[data-eng] .fw-kopf-teil--knopf{ order: 20 !important; display: none; }
.fw-kopf[data-eng] .fw-kopf-teil--abstand,
.fw-kopf[data-eng] .fw-kopf-teil--trenner{ display: none; }
.fw-kopf[data-eng] .fw-kopf-teil--telefon > span:not(.fw-kopf-telefon-zeichen){ display: none; }
.fw-kopf[data-eng] .fw-kopf-teil--telefon{ width: 40px; height: 40px; justify-content: center;
  border: 1px solid var(--color-border, rgba(0,0,0,.14));
  border-radius: var(--radius, 8px); }
.fw-kopf[data-eng] .fw-kopf-telefon-zeichen{ width: 18px; height: 18px; }
.fw-kopf[data-eng][data-offen] .fw-kopf-teil--menue:not(.fw-kopf-teil--aus),
.fw-kopf[data-eng][data-offen] .fw-kopf-teil--link:not(.fw-kopf-teil--aus),
.fw-kopf[data-eng][data-offen] .fw-kopf-teil--text:not(.fw-kopf-teil--aus){
  display: flex; width: 100%;
  padding: 13px 2px; border-bottom: 0;
  border-top: 1px solid rgba(128,128,128,.22);
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.fw-kopf[data-eng][data-offen] .fw-kopf-teil--knopf:not(.fw-kopf-teil--aus){
  display: flex; width: 100%; justify-content: center; margin: 12px 0 4px;
}
.fw-kopf[data-eng][data-offen] .fw-kopf-teil--auf{ flex-direction: column; align-items: stretch; }
.fw-kopf[data-eng] .fw-kopf-unter{
  position: static; opacity: 1; visibility: visible; transform: none;
  min-width: 0; padding: 0 0 4px 16px;
  background: none; border: 0; box-shadow: none;
}
.fw-kopf[data-eng] .fw-kopf-unter-punkt{ padding: 11px 4px; white-space: normal; }
.fw-kopf[data-eng] .fw-kopf-pfeil{ display: none; }

/* ======================================================================
   ANORDNUNG — was die Reihenfolge allein nicht kann
   ======================================================================
   ❗️Die Anordnung IST in Modulator 2.0 die Reihenfolge der Teile plus die
      Stelle des dehnbaren Abstands (siehe Fw\Kopf\KopfAnordnung). Sieben der
      acht Anordnungen brauchen deshalb hier gar nichts.
      Die zwei ZWEIZEILIGEN sind die Ausnahme: einen Zeilenumbruch kann keine
      Reihenfolge erzwingen. Sie bekommen ihn über `flex-wrap` und ein Logo,
      das die volle Breite belegt.
   ❗️Der dehnbare Abstand muss dort WEG. Er schöbe die zweite Zeile aus der
      Mitte — und mittig ist gerade der Sinn dieser beiden.
   ❗️NUR AB 761 px. Am Handy ist die Leiste vorgegeben (Logo, Telefon,
      Burger, siehe oben). Galt die Regel auch dort, belegte das Logo die
      volle Breite, und der Burger stand allein in einer zweiten Zeile
      (gemessen bei 390 px: Kopf 111 statt 68 px, #1823).
   ❗️Und NICHT im engen Zustand (`data-eng`, siehe oben), aus demselben
      Grund wie am Handy.
   ❗️`data-anordnung` kommt allein aus der Einstellung `hf_header_layout`
      (kopf-partial.php). Wer die Anordnung ausserhalb des Layovers setzt,
      muss sie mitschreiben, sonst greift hier nichts.
   ====================================================================== */
@media (min-width: 761px){
  .fw-kopf[data-anordnung="logo-center-below"]:not([data-eng]),
  .fw-kopf[data-anordnung="logo-center-above"]:not([data-eng]){
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .fw-kopf[data-anordnung="logo-center-below"]:not([data-eng]) > .fw-kopf-teil--logo,
  .fw-kopf[data-anordnung="logo-center-above"]:not([data-eng]) > .fw-kopf-teil--logo,
  .fw-kopf[data-anordnung="logo-center-below"]:not([data-eng]) > .fw-kopf-teil--name,
  .fw-kopf[data-anordnung="logo-center-above"]:not([data-eng]) > .fw-kopf-teil--name{
    flex: 0 0 100%;
    justify-content: center;
  }
  .fw-kopf[data-anordnung="logo-center-below"]:not([data-eng]) > .fw-kopf-teil--abstand,
  .fw-kopf[data-anordnung="logo-center-above"]:not([data-eng]) > .fw-kopf-teil--abstand{
    display: none;
  }
}

/* Ein Eintrag „Aus einem Modul", der gerade nichts zu zeigen hat: nur im
   Bearbeiten sichtbar (KopfRenderer::modul), blass wie im Footer. */
.fw-kopf-hinweis{ opacity: .6; font-style: italic; font-size: .85em; white-space: nowrap; }