/* ==========================================================================
   efficas.de — globales Stylesheet
   --------------------------------------------------------------------------
   Quelle im Repo: wordpress/mu-plugins/efficas-assets/design.css
   Auf der Box:    www/wp-content/mu-plugins/efficas-assets/design.css
   Eingebunden von efficas-design.php.

   Aufbau, in dieser Reihenfolge:
     1  Marken-Token          die eine gueltige Wahrheit fuer Farbe und Mass
     2  Bruecken              die alten Seitenpraefixe zeigen auf 1
     3  Grundlagen            Typografie, Lesebahn, Rhythmus
     4  Seitenkopf            Wortmarke, Menue, Untermenue, Mobilpanel
     5  Aufraeumen            was der Umbau ersetzt und deshalb weg kann

   Warum Bruecken (Abschnitt 2): Die sechs Inhaltsseiten definierten bisher je
   ein eigenes Tokenset - fuenf Systeme mit drei Navy- und vier Rottoenen. Statt
   jede Seite umzuschreiben, wird dort nur der Definitionsblock geloescht; die
   rund 450 Layoutregeln je Seite bleiben unveraendert und greifen ab dann auf
   die Werte hier. Eine Zeile weniger je Seite, eine Farbwahrheit fuer alle.
   ========================================================================== */


/* == 1  MARKEN-TOKEN ====================================================== */

:root {
  /* Farbe — verbindlich, abgeglichen mit der CI und der Theme-Palette.
     Navy und Weinrot stehen identisch in --elbe-navy / --hanseatisch-rot. */
  --ef-navy:          #153b5b;
  --ef-navy-tief:     #0d2940;
  --ef-navy-weich:    #12385c;
  --ef-navy-tinte:    #081a2b;
  --ef-rot:           #7e2f3d;
  --ef-rot-hell:      #a4485a;   /* Aufhellung fuer dunkle Gruende, gleicher Ton */
  --ef-rot-flaeche:   #f4eaec;

  --ef-text:          #12202c;
  --ef-text-leise:    #556775;
  --ef-text-schwach:  #7d8b98;

  --ef-flaeche:       #ffffff;
  --ef-grund:         #f4f6f7;   /* mist-grey */
  --ef-grund-2:       #eef3f7;
  --ef-linie:         #d8dde3;
  --ef-linie-fein:    #e6eaf0;
  --ef-erfolg:        #2e5a4c;

  /* Mass */
  --ef-bahn:          1180px;
  --ef-bahn-luft:     clamp(18px, 4vw, 32px);
  /* Lesebahn als Token vorhanden, aber bewusst NICHT global angewandt.
     Am 09.09.2026 mit echter Zeichenzaehlung gemessen (Textlaenge geteilt
     durch Zeilenzahl, nicht ueber die Breite geschaetzt): Der Median liegt
     seitenweise bei 60 bis 73 Zeichen und damit im guten Bereich. Eine
     frueher notierte Zahl von 108 stammte aus einer groben Naeherung ueber
     die Elementbreite und war zu hoch.
     Was bleibt, sind einzelne Ausreisser bis 125 Zeichen - fast alle davon
     Elemente mit eigener max-width aus dem Seiten-CSS. Eine globale Regel
     erreicht sie nicht, ohne sich mit !important durchzusetzen, und
     verschmaelert dafuer alles andere. Das gehoert seitenweise geloest, wenn
     die Seiten ohnehin ueberarbeitet werden. */
  --ef-lesebahn:      68ch;
  --ef-r-s:           8px;
  --ef-r-m:           12px;
  --ef-r-l:           18px;
  --ef-kopf-hoehe:    72px;
  --ef-kopf-hoehe-s:  60px;

  --ef-schatten-s:    0 1px 2px rgba(13,41,64,.05), 0 2px 8px rgba(13,41,64,.05);
  --ef-schatten-m:    0 6px 24px rgba(13,41,64,.10), 0 2px 6px rgba(13,41,64,.06);

  /* Schrift — beide Familien liegen selbst gehostet auf der Box. */
  --ef-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ef-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  --ef-uebergang: 160ms cubic-bezier(.4, 0, .2, 1);
}


/* == 2  BRUECKEN ==========================================================
   Die Seiten behalten ihre Klassennamen und ihr Layout. Von hier kommt nur
   die FARBWAHRHEIT. Wird der Tokenblock einer Seite geloescht, greifen diese
   Werte - die rund 450 Layoutregeln der Seite bleiben unveraendert.

   Zwei Regeln, an die sich dieser Abschnitt haelt:

   1  Farben werden vereinheitlicht. Das ist der Zweck: drei Navy-Toene und
      vier Rottoene werden zu je einem.
   2  MASSE werden NICHT vereinheitlicht. Radien, Schatten und Bahnbreiten
      stehen hier mit ihren urspruenglichen Werten. Sie zu vereinheitlichen
      waere eine Gestaltungsentscheidung - Rundungen von 18px auf 12px und die
      Startseite von 1240px auf 1180px sind sichtbare Aenderungen, keine
      Fehlerkorrekturen. Das gehoert in die Gestaltungsphase, nicht in einen
      Farbabgleich.
   ------------------------------------------------------------------------- */

:root {

  /* -- Startseite (--eh3-*) ---------------------------------------------- */
  --eh3-primary:        var(--ef-navy);
  --eh3-primary-strong: var(--ef-navy-tief);
  --eh3-red:            var(--ef-rot);
  --eh3-blue:           #4f83ae;
  --eh3-text:           var(--ef-text);
  --eh3-text-soft:      var(--ef-text-leise);
  --eh3-bg:             var(--ef-grund);
  --eh3-surface:        var(--ef-flaeche);
  --eh3-surface-soft:   var(--ef-grund-2);
  /* Durchscheinend belassen - ein deckender Wert waere sichtbar kraeftiger. */
  --eh3-red-soft:       rgba(126, 47, 61, .10);
  --eh3-border:         rgba(18, 32, 44, .10);
  --eh3-border-strong:  rgba(18, 32, 44, .18);
  /* Masse unveraendert: */
  --eh3-radius-sm:      12px;
  --eh3-radius-md:      18px;
  --eh3-radius-lg:      24px;
  --eh3-shadow-sm:      0 12px 30px rgba(8, 20, 32, .08);
  --eh3-shadow-md:      0 30px 70px rgba(8, 20, 32, .14);
  --eh3-shell:          1240px;

  /* -- Profilseite (--ep-*) ----------------------------------------------- */
  --ep-primary:         var(--ef-navy);
  --ep-primary-strong:  var(--ef-navy-tief);
  --ep-accent:          var(--ef-rot);
  --ep-accent-soft:     rgba(126, 47, 61, .09);
  --ep-blue:            #4f83ae;
  --ep-text:            var(--ef-text);
  --ep-text-soft:       var(--ef-text-leise);   /* war #566775 - ein Ziffernfehler */
  --ep-bg:              var(--ef-grund);
  --ep-surface:         var(--ef-flaeche);
  --ep-surface-soft:    var(--ef-grund-2);
  --ep-surface-muted:   #f7f9fb;
  --ep-border:          rgba(18, 32, 44, .10);
  --ep-border-strong:   rgba(18, 32, 44, .18);
  --ep-success:         var(--ef-erfolg);
  /* Masse unveraendert: */
  --ep-radius-sm:       12px;
  --ep-radius-md:       18px;
  --ep-radius-lg:       24px;
  --ep-shadow-sm:       0 12px 30px rgba(8, 20, 32, .06);
  --ep-shadow-md:       0 28px 68px rgba(8, 20, 32, .12);
  --ep-shell:           1180px;

  /* -- Leistungs- und Kontaktseiten (--efficas-*) ------------------------- */
  --efficas-blue:         var(--ef-navy);        /* war #0d2d4a */
  --efficas-blue-ink:     var(--ef-navy-tief);   /* war #10263c bzw. #0f2236 */
  --efficas-blue-soft:    var(--ef-navy-weich);
  --efficas-blue-tint:    var(--ef-grund-2);
  --efficas-blue-tint-2:  #e8eef5;
  --efficas-accent:       var(--ef-rot);         /* war #8f3e36, auf einer Seite #b6403b */
  --efficas-accent-soft:  var(--ef-rot-flaeche);
  --efficas-grey-strong:  var(--ef-text);
  --efficas-grey-text:    var(--ef-text-leise);
  --efficas-grey-border:  var(--ef-linie);
  --efficas-grey-line:    var(--ef-linie-fein);
  --efficas-grey-panel:   #f7f8fa;
  --efficas-grey-panel-2: #fbfbfc;
  --efficas-grey-soft:    #f3f4f6;
  --efficas-success:      var(--ef-erfolg);
  /* Masse unveraendert: */
  --efficas-max-width:    1180px;
  --efficas-radius-sm:    10px;
  --efficas-radius-md:    14px;
  --efficas-radius-lg:    20px;
  --efficas-radius-xl:    24px;
  --efficas-shadow-soft:  0 10px 28px rgba(6, 24, 44, .05);
  --efficas-shadow-card:  0 18px 42px rgba(8, 24, 42, .06);
  --efficas-transition:   180ms ease;

  /* -- IT-Lagebild (--efl-*) ----------------------------------------------
     Der Explorer auf dieser Seite bringt sein eigenes Tokenset mit (--x-*,
     Namensraum .efl-x). Das bleibt dort, wo es hingehoert - in
     lagebild-explorer/explorer.css - und leitet seit dem 09.09.2026 von den
     Markentoken oben ab. Hier steht es bewusst NICHT: der Explorer soll auf
     zwei Seiten liegen koennen, ohne dass sein Namensraum global wird. */
  --efl-navy:         var(--ef-navy);
  --efl-navy-ink:     var(--ef-navy-tief);
  --efl-navy-soft:    var(--ef-navy-weich);
  --efl-accent:       var(--ef-rot);
  --efl-accent-soft:  var(--ef-rot-flaeche);
  --efl-strong:       var(--ef-text);
  --efl-text:         var(--ef-text-leise);
  --efl-border:       var(--ef-linie);
  --efl-line:         var(--ef-linie-fein);
  --efl-panel:        #f7f8fa;
  --efl-tint:         var(--ef-grund-2);
  --efl-tint2:        #e8eef5;
  --efl-success:      var(--ef-erfolg);
  /* Masse unveraendert: */
  --efl-max:          1180px;
  --efl-r:            18px;
  --efl-r-sm:         12px;
  --efl-shadow:       0 18px 42px rgba(8, 24, 42, .06);

}


/* == 3  GRUNDLAGEN ======================================================== */

/* Sprungmarke: der Kopf ist klebend, Anker duerfen nicht darunter landen. */
html { scroll-padding-top: calc(var(--ef-kopf-hoehe) + 16px); }

/* Der leere Theme-Kopf wird nicht mehr gebraucht: efficas-kopf.php setzt
   einen eigenen. Ohne !important — es kaempft nichts mehr dagegen. */
body .site-header#masthead { display: none; }

@media (max-width: 768px) {
  html { scroll-padding-top: calc(var(--ef-kopf-hoehe-s) + 12px); }
}


/* == 4  SEITENKOPF ========================================================
   Aufbau in drei Schichten, damit sich nichts gegenseitig aushebelt:

     4a  Gemeinsam       Aufbau, Groessen, Wortmarke, Schalter - gilt ueberall
     4b  Ab 901px        Schreibtisch: waagerechte Leiste, Untermenue als Karte
     4c  Bis 900px       Telefon: Vollbildpanel in Navy

   Die Zustandsfarben stehen jeweils in der Schicht, in der sie gelten. Genau
   dort lag der Fehler in der alten Fassung: Schreibtischregeln (etwa der
   Navy-Hauch beim Ueberfahren) griffen auch im dunklen Mobilpanel und mussten
   dort mit !important zurueckgedraengt werden - 287 Mal.

   KEIN durchsichtiger Kopf ueber dem Hero. Am 09.09.2026 gebaut und noch am
   selben Abend wieder entfernt: Der Kopf liegt NICHT ueber dem Hero, er steht
   in einem eigenen Band darueber (gemessen: der Hero beginnt bei 73px,
   Ueberlappung 0). Weisse Schrift auf durchsichtigem Grund stand damit auf
   hellem Grund - unlesbar. Wer den Effekt will, muss zuerst den Hero unter den
   Kopf ziehen. Das ist eine Gestaltungsentscheidung fuer die Startseite, keine
   Sache des Kopfes, und gehoert in die Gestaltungsphase.
   ------------------------------------------------------------------------- */


/* -- 4a  Gemeinsam -------------------------------------------------------- */

.ef-kopf,
.ef-kopf *,
.ef-kopf *::before,
.ef-kopf *::after { box-sizing: border-box; }

.ef-kopf {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--ef-flaeche);
  border-bottom: 1px solid var(--ef-linie-fein);
}

.ef-kopf__bahn {
  max-width: var(--ef-bahn);
  margin-inline: auto;
  padding-inline: var(--ef-bahn-luft);
  min-height: var(--ef-kopf-hoehe);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Wortmarke — als Text, nicht als Bild.
   Die vorhandene Logodatei ist eine weisse Wortmarke in einer 500x500-Flaeche:
   auf hellem Grund unsichtbar und fuer eine 72px hohe Leiste zu grob. Text ist
   in jeder Groesse scharf und kostet keine Anfrage. Sperrung wie in der
   Bildsprache der CI. */
.ef-kopf__marke {
  font-family: var(--ef-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1;
  color: var(--ef-navy);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 2px;
  border-radius: var(--ef-r-s);
  transition: opacity var(--ef-uebergang);
}
.ef-kopf__marke:hover { opacity: .78; }

.ef-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ef-menu__punkt { position: relative; margin: 0; padding: 0; list-style: none; }

.ef-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  font-family: var(--ef-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ef-navy);
  text-decoration: none;
  border-radius: var(--ef-r-s);
  white-space: nowrap;
  transition: background-color var(--ef-uebergang), color var(--ef-uebergang);
}

/* Aufklapper — eigene Schaltflaeche neben dem Link statt role="button" auf
   dem Link selbst. Der Elternpunkt bleibt ein Link und navigiert; das
   Aufklappen ist eine Schaltflaeche. Damit stimmt die Semantik (N-08). */
.ef-menu__aufklapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ef-uebergang), transform var(--ef-uebergang);
}
.ef-menu__aufklapp svg { width: 11px; height: 11px; display: block; }
.ef-menu__aufklapp[aria-expanded="true"] { transform: rotate(180deg); }

/* Ohne Skript bleibt der Schalter aus. Er traegt im Markup hidden und wird
   erst von kopf.js eingeblendet - eine Schaltflaeche, die nichts oeffnen
   kann, waere schlimmer als keine. Diese Regel ist noetig, weil die
   display-Angabe in Schicht 4c sonst das hidden-Attribut schlaegt. */
.ef-kopf__schalter[hidden] { display: none; }

.ef-kopf__schalter {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ef-linie);
  border-radius: var(--ef-r-s);
  color: var(--ef-navy);
  cursor: pointer;
  transition: background-color var(--ef-uebergang), border-color var(--ef-uebergang);
}
.ef-kopf__schalter:hover { background: rgba(21, 59, 91, .06); }
.ef-kopf__schalter svg { width: 20px; height: 20px; display: block; }
.ef-kopf__schalter .ef-zu { display: none; }
.ef-kopf__schalter[aria-expanded="true"] .ef-auf { display: none; }
.ef-kopf__schalter[aria-expanded="true"] .ef-zu  { display: block; }

/* Sichtbarer Tastaturfokus, ueberall gleich. */
.ef-kopf a:focus-visible,
.ef-kopf button:focus-visible {
  outline: 2px solid var(--ef-rot);
  outline-offset: 2px;
}


/* -- 4b  Schreibtisch, ab 901px ------------------------------------------- */

@media (min-width: 901px) {

  .ef-kopf__nav { margin-left: auto; }

  .ef-menu__link:hover,
  .ef-menu__punkt:hover > .ef-menu__link,
  .ef-menu__punkt:focus-within > .ef-menu__link {
    background: rgba(21, 59, 91, .07);
    color: var(--ef-navy-tief);
  }
  .ef-menu__aufklapp:hover { background: rgba(21, 59, 91, .09); }

  /* Der aktive Punkt bekommt den einen Weinrot-Akzent - die CI-Regel
     "genau ein Element in Weinrot fuer den Punkt, um den es geht". Nur die
     tatsaechlich aufgerufene Seite, nie zwei gleichzeitig (N-06). */
  .ef-menu__link[aria-current="page"] { color: var(--ef-navy-tief); }
  .ef-menu__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ef-rot);
  }

  /* Untermenue als Karte. 258px statt der alten 200px - darunter brach
     "Interim-Management" um. */
  .ef-untermenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 258px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ef-flaeche);
    border: 1px solid var(--ef-linie);
    border-radius: var(--ef-r-m);
    box-shadow: var(--ef-schatten-m);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* visibility hart geschaltet, nicht ueberblendet: beim Oeffnen sofort,
       beim Schliessen erst nach dem Ausblenden. Solange ein Teilbaum als
       hidden gilt, nimmt darin kein Element den Fokus an. */
    transition: opacity var(--ef-uebergang), transform var(--ef-uebergang),
                visibility 0s linear 160ms;
  }
  .ef-menu__punkt--offen > .ef-untermenu,
  .ef-menu__punkt:hover > .ef-untermenu,
  .ef-menu__punkt:focus-within > .ef-untermenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--ef-uebergang), transform var(--ef-uebergang),
                visibility 0s linear 0s;
  }
  .ef-untermenu .ef-menu__link {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    font-size: 14.5px;
    color: var(--ef-text);
    white-space: normal;
  }
  .ef-untermenu .ef-menu__link:hover { background: var(--ef-grund-2); color: var(--ef-navy-tief); }
  .ef-untermenu .ef-menu__link[aria-current="page"] { background: var(--ef-grund-2); }
  .ef-untermenu .ef-menu__link[aria-current="page"]::after {
    left: 4px; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto;
  }

  /* Handlungsknopf. Bleibt ein normaler Menuepunkt in WordPress - Jonas
     pflegt ihn dort wie jeden anderen; nur die Gestaltung macht einen Knopf
     daraus. Erkannt an der CSS-Klasse 'ef-cta' am Menuepunkt oder ersatzweise
     an der Adresse (efficas-kopf.php). Frueher hing die Gestaltung allein an
     der URL - wer die Check-Adresse aenderte, verlor den Knopf. */
  .ef-menu__punkt--cta { margin-left: 10px; }
  .ef-menu__punkt--cta > .ef-menu__link {
    padding: 11px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    background: var(--ef-navy);
    border: 1px solid var(--ef-navy-tief);
    box-shadow: var(--ef-schatten-s);
    transition: background-color var(--ef-uebergang), transform var(--ef-uebergang);
  }
  .ef-menu__punkt--cta > .ef-menu__link:hover {
    background: var(--ef-navy-tief);
    color: #ffffff;
    transform: translateY(-1px);
  }
  .ef-menu__punkt--cta > .ef-menu__link:active { transform: none; }
  .ef-menu__punkt--cta > .ef-menu__link::after { content: none; }
}


/* -- 4c  Telefon, bis 900px ----------------------------------------------- */

@media (max-width: 900px) {

  .ef-kopf__bahn { min-height: var(--ef-kopf-hoehe-s); gap: 12px; }
  .ef-kopf__marke { font-size: 15.5px; letter-spacing: .15em; }
  .ef-kopf__schalter:not([hidden]) { display: inline-flex; }

  .ef-kopf__nav {
    position: fixed;
    inset: var(--ef-kopf-hoehe-s) 0 0 0;
    margin: 0;
    padding: 18px var(--ef-bahn-luft) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--ef-navy) 0%, var(--ef-navy-tinte) 100%);
    opacity: 0;
    visibility: hidden;
    /* Geschlossen faengt das Panel keine Klicks ab. visibility allein reicht
       dafuer NICHT: ein Kindelement kann visibility:visible setzen und wird
       damit wieder anklickbar, obwohl der Elternteil unsichtbar ist. Genau
       das ist am 09.09.2026 passiert - die drei Untermenue-Links lagen
       unsichtbar ueber der Seite und fingen Klicks ab. pointer-events wirkt
       dagegen auf den ganzen Teilbaum und laesst sich nicht ueberschreiben,
       solange kein Kind es selbst zuruecksetzt. */
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--ef-uebergang), transform var(--ef-uebergang),
                visibility 0s linear 160ms;
  }
  .ef-kopf[data-ef-offen="ja"] .ef-kopf__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--ef-uebergang), transform var(--ef-uebergang),
                visibility 0s linear 0s;
  }

  /* Solange das Panel offen ist, traegt der Kopf denselben Navy-Grund wie das
     Panel - sonst saesse eine weisse Leiste auf einer navyblauen Flaeche. */
  .ef-kopf[data-ef-offen="ja"] {
    background: var(--ef-navy);
    border-bottom-color: rgba(255,255,255,.14);
  }
  .ef-kopf[data-ef-offen="ja"] .ef-kopf__marke { color: #ffffff; }
  .ef-kopf[data-ef-offen="ja"] .ef-kopf__schalter {
    color: #ffffff;
    border-color: rgba(255,255,255,.34);
  }
  .ef-kopf[data-ef-offen="ja"] a:focus-visible,
  .ef-kopf[data-ef-offen="ja"] button:focus-visible { outline-color: #ffffff; }

  .ef-menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .ef-menu__punkt { width: 100%; }

  .ef-menu__link {
    display: flex;
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    font-size: 16.5px;
    color: #ffffff;
    background: rgba(255,255,255,.07);
    border-radius: var(--ef-r-m);
    white-space: normal;
  }
  .ef-menu__link:hover { background: rgba(255,255,255,.14); }
  .ef-menu__link[aria-current="page"] { background: rgba(255,255,255,.18); }
  .ef-menu__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--ef-rot-hell);
  }

  /* Kein zweiter Tipper: Die drei Leistungsseiten stehen offen da. Der
     Aufklapper waere hier nur eine Huerde vor dem Angebot (N-07). */
  .ef-menu__aufklapp { display: none; }

  .ef-untermenu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* KEINE eigenen Angaben zu opacity, visibility oder transform.
       Die Kartenfassung des Untermenues steht in Schicht 4b hinter
       @media (min-width: 901px) und gilt hier ohnehin nicht - es gibt also
       nichts zurueckzunehmen. Ein visibility:visible hier hat das Untermenue
       aus dem geschlossenen Panel herausgeloest und anklickbar gemacht. */
    min-width: 0;
    margin: 4px 0 4px 14px;
    padding: 0 0 0 14px;
    list-style: none;
    background: none;
    border: 0;
    border-left: 2px solid rgba(255,255,255,.22);
    border-radius: 0;
    box-shadow: none;
  }
  .ef-untermenu .ef-menu__link {
    display: flex;
    width: 100%;
    min-height: 46px;
    font-size: 15.5px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.05);
  }
  .ef-untermenu .ef-menu__link:hover { background: rgba(255,255,255,.12); }
  .ef-untermenu .ef-menu__link[aria-current="page"] { background: rgba(255,255,255,.16); }

  /* Der Handlungsknopf steht unten im Panel, volle Breite, gut treffbar. */
  .ef-menu__punkt--cta { margin: 14px 0 0; }
  .ef-menu__punkt--cta > .ef-menu__link {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 54px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ef-navy-tief);
    background: #ffffff;
  }
  .ef-menu__punkt--cta > .ef-menu__link:hover {
    background: var(--ef-grund-2);
    color: var(--ef-navy-tief);
  }
  .ef-menu__punkt--cta > .ef-menu__link::after { content: none; }

  body[data-ef-menue="offen"] { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-kopf, .ef-kopf__nav, .ef-untermenu, .ef-menu__link,
  .ef-kopf__marke, .ef-menu__aufklapp, .ef-menu__punkt--cta > .ef-menu__link {
    transition: none;
  }
  .ef-menu__punkt--cta > .ef-menu__link:hover { transform: none; }
}


/* == 5  AUFRAEUMEN ========================================================
   Hier standen bis zum 09.09.2026 zwei Regeln, die zwei ueberzaehlige
   Menuekopien aus dem Zugriffsbaum nahmen: das Slide-Out-Menue aus GP Premium
   und die Theme-Navigation. Beide sind jetzt an der Quelle abgeschaltet -
   das Modul generate_package_menu_plus ist deaktiviert, und
   generate_settings['nav_position_setting'] steht auf leer. Damit erscheinen
   sie gar nicht mehr im Markup, statt nur unsichtbar zu sein, und
   offside.min.css, offside.min.js sowie menu.min.js laden nicht mehr mit.

   Die Regeln sind deshalb weg. Ein display:none gegen eine Einstellung, die
   man auch richtig stellen kann, ist ein Pflaster - und sein Kommentar wird
   falsch, sobald jemand die Einstellung anfasst.

   Der leere Theme-Kopf (#masthead) wird weiter ausgeblendet; den gibt es
   unabhaengig von der Navigation, und er hat keine eigene Einstellung. Die
   Regel dafuer steht in Abschnitt 3.
   ------------------------------------------------------------------------- */


/* == 5  KOPF UEBER DUNKLEM AUFTAKT =========================================
   Auf allen Refit-Seiten beginnt der Inhalt mit einer dunklen Flaeche:
   .ef-auftakt auf der Startseite (Navy mit Hafenfoto), .ef-seitenkopf auf
   allen uebrigen (Navy mit Hamburg-Relief). Dort liegt der Kopf durchsichtig
   darueber und traegt weisse Schrift; sobald darunter heller Inhalt kommt,
   schaltet er in den weissen Zustand mit Navy-Schrift zurueck.

   Warum das beim ersten Versuch schiefging (09.09.2026): Der Zustand wurde
   gegen eine selbstgebaute Vorschau geprueft, in der der Hero unter dem Kopf
   lag - weil die Vorschau ihn selbst dorthin gezogen hatte. Auf der echten
   Seite gab es diese Ueberlappung nicht, und weisse Schrift stand auf hellem
   Grund. Diesmal wird die Ueberlappung hier erzeugt, nicht angenommen:

     - Der Kopf geht auf Auftaktseiten aus dem Fluss (position: fixed),
       damit die dunkle Flaeche bis unter ihn laeuft.
     - Der Auftakt bekommt oben genau die Kopfhoehe als Innenabstand. Er
       hatte bisher keinen (gemessen: padding-top 0px), es wird also nichts
       ueberschrieben - der Inhalt rueckt nach, die Flaeche bleibt oben.

   Wer den Zustand zurueckbauen will, loescht diesen Abschnitt und die
   Funktion efficas_kopf_dunkler_auftakt() samt body_class-Filter.
   ------------------------------------------------------------------------- */

.ef-kopf--ueber {
  position: fixed;
  inset-inline: 0;
  top: 0;
}

/* Schutzverlauf hinter dem durchsichtigen Kopf.
   Auf den Erklaerseiten liegt der Kopf ueber einfarbigem Navy - dort waere er
   entbehrlich. Auf der Startseite liegt er ueber einem Foto, und dessen
   Helligkeit wechselt mit dem Bildausschnitt: oben rechts steht ein helles
   Segel. Weisse Schrift auf einem Bild ist nur so lange lesbar, wie das Bild
   es zulaesst - der Verlauf macht die Lesbarkeit unabhaengig davon.
   Auf gleichmaessigem Navy ist er praktisch unsichtbar. */
.ef-kopf--ueber:not([data-ef-fest])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 20, 32, .55), rgba(6, 20, 32, 0));
  pointer-events: none;
  z-index: -1;
}

.ef-auftakt-seite .ef-auftakt,
.ef-auftakt-seite .ef-seitenkopf { padding-top: var(--ef-kopf-hoehe); }

/* Auf dem Telefon ist der Kopf 60px hoch, nicht 72 - sonst stuenden dort
   zwoelf Pixel Luft zu viel ueber dem Auftakt. */
@media (max-width: 900px) {
  .ef-auftakt-seite .ef-auftakt,
  .ef-auftakt-seite .ef-seitenkopf { padding-top: var(--ef-kopf-hoehe-s); }
}

/* Der durchsichtige Zustand gilt nur, solange der Kopf ueber der dunklen
   Flaeche steht. kopf.js setzt data-ef-fest, sobald sie durchgescrollt ist.
   Das offene Mobilpanel ist ausgenommen: es bringt seinen eigenen dunklen
   Zustand mit (Abschnitt 4c) und der muss gewinnen. */
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) {
  background: transparent;
  border-bottom-color: transparent;
}

.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-kopf__marke,
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__link,
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__aufklapp {
  color: #ffffff;
}

/* Der Handlungsknopf ist sonst Navy auf Weiss - auf dunklem Grund waere er
   nicht mehr zu sehen. Hier steht er als heller Umriss und fuellt sich beim
   Zeigen. Kontrast weiss auf #061420: 17,4:1. */
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__punkt--cta > .ef-menu__link {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__punkt--cta > .ef-menu__link:hover {
  background: rgba(255, 255, 255, .22);
  border-color: #ffffff;
  color: #ffffff;
}

/* Menuepunkt beim Zeigen, Mobilschalter und Tastaturfokus mitziehen. */
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__link:hover,
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-menu__aufklapp:hover {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
}
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-kopf__schalter {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
}
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) .ef-kopf__schalter:hover {
  background: rgba(255, 255, 255, .14);
}
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) a:focus-visible,
.ef-kopf--ueber:not([data-ef-fest]):not([data-ef-offen="ja"]) button:focus-visible {
  outline-color: #ffffff;
}

/* Der Wechsel selbst. Ohne Uebergang springt die Leiste hart um; mit einem
   zu langen zieht die weisse Flaeche dem Scrollen hinterher. */
.ef-kopf--ueber {
  transition: background-color 220ms cubic-bezier(.4, 0, .2, 1),
              border-color 220ms cubic-bezier(.4, 0, .2, 1);
}
.ef-kopf--ueber .ef-kopf__marke,
.ef-kopf--ueber .ef-menu__link,
.ef-kopf--ueber .ef-kopf__schalter {
  transition: color 220ms cubic-bezier(.4, 0, .2, 1),
              background-color var(--ef-uebergang),
              border-color var(--ef-uebergang);
}

/* Das Untermenue klappt auf hellem Grund auf und behaelt seine eigenen
   Farben - sonst stuende Weiss auf Weiss. Ausdruecklich zuruecksetzen,
   weil die Regeln oben auf .ef-menu__link greifen. */
.ef-kopf--ueber:not([data-ef-fest]) .ef-untermenu .ef-menu__link { color: var(--ef-navy); }
.ef-kopf--ueber:not([data-ef-fest]) .ef-untermenu .ef-menu__link:hover {
  background: rgba(21, 59, 91, .06);
  color: var(--ef-navy);
}

@media (prefers-reduced-motion: reduce) {
  .ef-kopf--ueber,
  .ef-kopf--ueber .ef-kopf__marke,
  .ef-kopf--ueber .ef-menu__link,
  .ef-kopf--ueber .ef-kopf__schalter { transition: none; }
}


/* == 6  SEITENFUSS =========================================================
   Der Fuss stand bis zum 11.09.2026 als GenerateBlocks-Element im alten
   Vokabular: drei Leistungen, die es so nicht mehr gibt, und ein Zitatband
   mit einem Satz in Anfuehrungszeichen, der nichts zitiert.

   Neu ist er eine Landkarte: alle einundzwanzig Adressen der Seite, in fuenf
   Gruppen. Das ist kein Selbstzweck - der Fuss steht auf jeder Seite und ist
   damit der einzige Ort, an dem die Erfahrungsfelder und die Wissensseiten
   von ueberall erreichbar sind.

   Er steht auf ALLEN Seiten, auch auf Blogbeitraegen, Impressum und
   Datenschutz. Deshalb liegt er hier in design.css und nicht im Refit-Blatt,
   und deshalb benutzt er ausschliesslich Token, die hier definiert sind -
   --ef-linie-dunkel und --ef-rot-signal gibt es nur im Refit-Blatt und waeren
   auf einer Blogseite leer.
   ------------------------------------------------------------------------- */

.ef-fuss {
  position: relative;
  z-index: 0;
  background: var(--ef-navy-tinte);
  color: #c9d8e4;
  font-family: var(--ef-body);
  font-size: 15px;
  line-height: 1.6;
}

/* Der Uebergang. Die Seiten enden hell, der Fuss ist dunkel - ohne
   Vermittlung ist das eine harte Kante quer durch das Blatt. Der Verlauf
   sitzt ausserhalb des Fusses, damit er dessen Innenabstaende nicht
   verschiebt.

   Dazu gehoert zwingend der margin-top in gleicher Hoehe: ohne ihn legt
   sich der Verlauf ueber den letzten Inhalt der Seite. Auf der
   Insights-Uebersicht war das am 11.09.2026 die Paginierung, die dadurch
   halb im Dunkeln verschwand. Wer die eine Zahl aendert, aendert beide. */
.ef-fuss { margin-top: 72px; }
.ef-fuss::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  height: 72px;
  background: linear-gradient(to bottom, rgba(8, 26, 43, 0), var(--ef-navy-tinte));
  pointer-events: none;
}

/* Relief als Wasserzeichen, wie auf den dunklen Baendern der Seiten. Die
   Datei liegt neben diesem Stylesheet in efficas-assets/. Faellt sie aus,
   bleibt der Fuss einfarbig - kein Schaden, nur weniger Tiefe. */
.ef-fuss::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url(relief.jpg);
  background-image: image-set(url(relief.jpg) 1x, url(relief-2560.jpg) 2x);
  background-size: 150%;
  background-position: 70% 38%;
  background-repeat: no-repeat;
  opacity: .08;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
}

.ef-fuss__bahn {
  max-width: var(--ef-bahn);
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--ef-bahn-luft) clamp(2.25rem, 3.5vw, 3rem);
  display: grid;
  gap: clamp(2rem, 3.5vw, 3rem);
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  align-items: start;
}

/* Fuenf Spalten tragen erst ab Notebookbreite. Darunter zwei, auf dem
   Telefon eine - die Marke steht dann oben und der Rest darunter. */
@media (max-width: 1100px) {
  .ef-fuss__bahn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ef-fuss__bahn {
    grid-template-columns: minmax(0, 1fr);
    /* Einundzwanzig Adressen untereinander werden lang - gemessen 1.330px
       auf einem 375er Schirm. Enger gesetzt bleibt der Fuss lesbar und
       kostet einen halben Bildschirm weniger. */
    gap: 1.75rem;
  }
  .ef-fuss__spalte ul { gap: .4rem; }
  .ef-fuss__titel { margin-bottom: .6rem; }
  .ef-fuss__claim, .ef-fuss__anschrift { max-width: none; }
}

.ef-fuss__wortmarke {
  display: inline-block;
  font-family: var(--ef-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .17em;
  color: #ffffff;
  text-decoration: none;
  transition: opacity var(--ef-uebergang);
}
.ef-fuss__wortmarke:hover { opacity: .78; }

.ef-fuss__claim {
  margin: 1rem 0 0;
  max-width: 34ch;
  font-size: 14px;
  color: #8fa6b8;
}

.ef-fuss__netz {
  display: flex;
  gap: 10px;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.ef-fuss__netz a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #c9d8e4;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ef-r-s);
  transition: background-color var(--ef-uebergang), color var(--ef-uebergang),
              border-color var(--ef-uebergang);
}
.ef-fuss__netz a:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .4);
  color: #ffffff;
}
.ef-fuss__netz svg { width: 19px; height: 19px; display: block; }

/* Die Spaltenueberschriften sind echte H2. Ein Fuss aus fuenf Listen ohne
   Ueberschriften ist fuer Hilfsmittel eine einzige Linkwueste; mit ihnen
   traegt jede Gruppe ihren Namen, und die nav-Elemente sind benannt. */
.ef-fuss__titel {
  margin: 0 0 .9rem;
  font-family: var(--ef-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
}

.ef-fuss__spalte ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.ef-fuss a {
  color: #c9d8e4;
  text-decoration: none;
  transition: color var(--ef-uebergang);
}
/* Muss nach der allgemeinen Linkregel stehen: '.ef-fuss a' ist mit Klasse
   plus Element spezifischer als '.ef-fuss__wortmarke' allein und hat die
   Marke sonst mitgefaerbt. */
.ef-fuss .ef-fuss__wortmarke { color: #ffffff; }
.ef-fuss__spalte a { font-size: 14.5px; }
.ef-fuss a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.ef-fuss a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 3px;
}

.ef-fuss__anschrift {
  margin: 1.2rem 0 0;
  font-style: normal;
  font-size: 14.5px;
}
.ef-fuss__anschrift strong { color: #ffffff; font-weight: 600; }
.ef-fuss__anschrift a { text-decoration: underline; text-underline-offset: 3px; }

.ef-fuss__nachweise {
  margin: 1.1rem 0 0;
  font-size: 13px;
  color: #8fa6b8;
}
.ef-fuss__nachweise sup { font-size: .7em; }

/* Schlusszeile. Eine feine Linie statt eines zweiten Farbtons - ein drittes
   Band unter dem Fuss war im alten Stand genau ein Band zu viel. */
.ef-fuss__schluss {
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ef-fuss__schlussbahn {
  max-width: var(--ef-bahn);
  margin-inline: auto;
  padding: 1.25rem var(--ef-bahn-luft);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: #8fa6b8;
}
.ef-fuss__schlussbahn p { margin: 0; }
.ef-fuss__schlussbahn ul {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ef-fuss__schlussbahn a { font-size: 13.5px; }

/* Der Theme-Fuss darunter bleibt leer, seit der Inhalt in diesem Element
   steht. Falls GeneratePress dort noch Polsterung setzt, faellt sie hier weg -
   sonst steht unter der Schlusszeile ein heller Streifen. */
.site-footer > .site-info:empty { display: none; }