/* ====================================================================
   KOPF, gemeinsame Grundlage beider Koepfe
   Diese Datei ist die einzige Quelle fuer Form, Masse, Position,
   Farben, Knoepfe, Umschalter, Profilmenue, Verhalten beim Ueberfahren
   und die Mobilfassung. Sie wird von allen acht Seiten geladen.

   Verbindliche Masse, gemessen aus web/crm/index.html:
   Luft oben 12, links 12, rechts 12. Hoehe 64. Radius 20. Rand 1.
   Logo: Zeichen, Luecke 6, Schriftzug. Verweis auf "/".
   Knoepfe je 40 mal 40, Radius 12, Fuellung rgba(0,43,73,.16),
   Abstand 8 und 8. Raster 18 mal 18. Profil 28 mal 28, Strich 1.9.
   Suchleiste Hoehe 40, Radius 12, Rand 1.

   Erlaubte Farben:
   #002B49  #FFFFFF  #F4A900  #8F6300  #F4F8FC  #5b7183
   Kein Element traegt die Farbe seines Hintergrunds.
   ==================================================================== */

:root{
  --kopf-luft:12px;
  --kopf-hoehe:64px;
  --kopf-radius:20px;
  --kopf-rand:1px;
  --kopf-logoluecke:6px;
  --kopf-knopf:40px;
  --kopf-knopfradius:12px;
  --kopf-knopfabstand:8px;
  --kopf-navy:#002B49;
  --kopf-weiss:#FFFFFF;
  --kopf-gold:#F4A900;
  --kopf-tief:#8F6300;
  --kopf-papier:#F4F8FC;
  --kopf-grau:#5b7183;
  --kopf-schrift:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Die Hoehe ist reserviert, bevor gezeichnet wird. Das Skript setzt die
   Klasse hat-kopf beim Einlesen, noch vor dem Aufbau des Kopfes. */
html.hat-kopf{ scroll-padding-top:calc(var(--kopf-luft) + var(--kopf-hoehe) + var(--kopf-luft)); }
html.hat-kopf .kopf-platz{ display:block; height:var(--kopf-hoehe); flex:none; }

/* ==================================================================
   1 DIE LEISTE
   ================================================================== */
/* AM SEITENANFANG IST DER KOPF WEISS.
   Durchsichtigkeit, Unschaerfe und Schatten sind Anzeichen dafuer, dass
   etwas darunter durchlaeuft. Solange nichts laeuft, sind sie eine
   Behauptung. Sie beginnen deshalb erst beim Scrollen, gesteuert ueber
   die Klasse gescrollt, die kopf-website.js setzt. */
header#kopf.kopf{
  position:fixed; left:var(--kopf-luft); right:var(--kopf-luft); top:var(--kopf-luft);
  height:var(--kopf-hoehe); margin:0; padding:0 12px;
  display:flex; align-items:center; gap:14px;
  box-sizing:border-box;
  border:var(--kopf-rand) solid rgba(0,43,73,.22);
  border-radius:var(--kopf-radius);
  background:var(--kopf-weiss);
  color:var(--kopf-navy);
  font-family:var(--kopf-schrift);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             0 2px 6px rgba(0,17,30,.18), 0 18px 44px rgba(0,17,30,.28);
  z-index:9000;
}
header#kopf.kopf *{ box-sizing:border-box }

/* ==================================================================
   2 DAS LOGO, Verweis auf "/"
   Ohne Unterstreichung, ohne Farbwechsel, ohne Verschiebung.
   ================================================================== */
#kopf .logo{
  position:static; transform:none; flex:none;
  display:flex; align-items:center; gap:var(--kopf-logoluecke);
  text-decoration:none; color:var(--kopf-navy);
  background:none; border:0; padding:0; margin:0;
  pointer-events:auto;
}
#kopf .logo:hover, #kopf .logo:focus, #kopf .logo:active, #kopf .logo:visited{
  text-decoration:none; color:var(--kopf-navy); transform:none;
}
#kopf .logo:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:3px; border-radius:8px }
#kopf .logo-zeichen{ height:30px; width:auto; display:block }
#kopf .logo-bild{ height:24px; width:auto; display:block }

/* ==================================================================
   3 DIE KNOEPFE
   ================================================================== */
/* Die vier Knoepfe rechts tragen keine Flaeche mehr. Vier graue
   Quadrate neben einer Wortmarke sind vier Kaesten, die nichts sagen;
   das Symbol allein sagt dasselbe und nimmt dem Kopf das Unruhige.
   Die Flaeche kommt erst beim Ueberfahren, dort ist sie eine Antwort
   und keine Dauerbehauptung. */
#kopf .kopf-icon{
  flex:none; width:var(--kopf-knopf); height:var(--kopf-knopf);
  border-radius:var(--kopf-knopfradius); padding:0; border:0;
  background:transparent; color:var(--kopf-navy);
  display:grid; place-items:center; cursor:pointer;
  transition:background .16s ease;
}
#kopf .kopf-icon svg{ width:auto; height:auto; display:block }
#kopf .kopf-icon:hover{ background:rgba(0,43,73,.10) }
#kopf .kopf-icon:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:2px }
#kopf #btn-profil svg{ width:28px; height:28px }
#kopf #btn-lupe-knopf svg{ width:22px; height:22px }

/* Der Knopf InBoX traegt das echte Symbol, 24 mal 24, mittig, das
   Seitenverhaeltnis bleibt erhalten, nichts wird abgeschnitten. */
#kopf .kopf-icon.bildknopf img{
  width:24px; height:24px; display:block; object-fit:contain;
}

/* Das Raster steht fuer neun Anwendungen und zeigt deshalb neun Felder. */
#kopf .raster{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px; width:18px; height:18px;
}
#kopf .raster span{ background:var(--kopf-navy); border-radius:2px; display:block }

/* Der Hamburger, eins zu eins aus web/crm/index.html */
#kopf .burger{ width:18px; height:13px; position:relative; display:block }
#kopf .burger i{ position:absolute; left:0; right:0; height:2px;
  background:var(--kopf-navy); border-radius:2px }
#kopf .burger i:nth-child(1){ top:0 }
#kopf .burger i:nth-child(2){ top:5.5px }
#kopf .burger i:nth-child(3){ top:11px }

/* Die rechte Gruppe, Abstand 8 zwischen den Knoepfen */
#kopf .kopf-rechts{
  position:static; transform:none; margin-left:auto; flex:none;
  display:flex; align-items:center; gap:var(--kopf-knopfabstand);
  justify-content:flex-end;
}

/* ==================================================================
   4 DIE SUCHLEISTE, eins zu eins aus web/crm/index.html
   Nur in Kopf B. Hoehe 40, Radius 12, Rand 1, Grund weiss.
   ================================================================== */
#kopf .suche{
  flex:0 1 360px; min-width:0; height:40px; background:var(--kopf-weiss);
  border:1px solid rgba(0,43,73,.16); border-radius:12px;
  display:flex; align-items:center; gap:8px;
  padding:0 8px 0 14px; cursor:text;
  box-shadow:0 1px 2px rgba(0,43,73,.06);
}
#kopf .suche input{
  border:0; outline:0; flex:1 1 auto; min-width:0; font:inherit; font-size:15px;
  color:var(--kopf-navy); background:none;
}
#kopf .suche input::placeholder{ color:#7c93a5 }
#kopf .lupe{
  flex:none; width:30px; height:30px; border-radius:9px; border:0; background:none;
  cursor:pointer; display:grid; place-items:center; color:var(--kopf-navy);
}
#kopf .lupe:hover{ background:rgba(0,43,73,.08) }
#kopf .suche .leeren{
  border:0; background:none; cursor:pointer; color:var(--kopf-grau);
  width:26px; height:26px; border-radius:8px; display:none; place-items:center;
  font-size:15px; line-height:1; flex:none;
}
#kopf .suche .leeren.an{ display:grid }
#kopf .suche .leeren:hover{ background:rgba(0,43,73,.08); color:var(--kopf-navy) }

/* ==================================================================
   5 DIE SIEBEN MENUEPUNKTE, nur Kopf A
   Inter 15, Gewicht 600, Laufweite 1.5, Grossschreibung.
   CRMap und InBoX tragen ihre eigene Schreibweise, sie stehen im
   Auftrag namentlich fest und duerfen nicht umgeschrieben werden.
   Der aktive Punkt traegt die goldene Ortsmarke, 5 Pixel.
   ================================================================== */
#kopf .hauptnavi{
  display:flex; align-items:center; gap:clamp(9px,1.25vw,26px);
  margin:0 auto; min-width:0; flex:0 1 auto; white-space:nowrap;
}
/* 30.08.2026: gemessen 42 px hoch, gefordert sind mindestens 44 am
   Rechner und 56 mobil. Das Polster traegt jetzt die Hoehe, statt
   die Schrift allein. STAND.md Abschnitt 10. */
#kopf .hauptnavi a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-family:var(--kopf-schrift); font-size:15px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
  color:var(--kopf-navy); padding:6px 10px; border-radius:8px; white-space:nowrap;
}
@media (max-width:760px){ #kopf .hauptnavi a{ min-height:56px } }
#kopf .hauptnavi a.eigenname{ text-transform:none }
#kopf .hauptnavi a:hover{ color:var(--kopf-tief) }
#kopf .hauptnavi a:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:2px }
#kopf .hauptnavi a::before{
  content:''; display:none; width:5px; height:5px; border-radius:999px;
  background:var(--kopf-gold); flex:none;
}
#kopf .hauptnavi a.hier::before{ display:block }
#kopf .hauptnavi a.hier{ font-weight:600 }
/* Passen die Punkte nicht mehr, treten sie ab und der Hamburger tritt an. */
#kopf.eng .hauptnavi{ display:none }
#kopf .nav-hamburger{ display:none; order:99; margin-left:8px }
#kopf.eng .nav-hamburger{ display:grid }

/* ==================================================================
   6 KOPF A, Glassmorphismus, Wechsel hell und dunkel
   Hell  rgba(255,255,255,0.90), Rand rgba(0,43,73,0.10)
   Dunkel rgba(6,20,34,0.88),    Rand rgba(255,255,255,0.15)
   blur(18px) saturate(1.4), Uebergang 0.3s
   ================================================================== */
header#kopf.kopf-web{
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
header#kopf.kopf-web.hell{
  background:rgba(255,255,255,0.90);
  border-color:rgba(0,43,73,0.10);
  color:var(--kopf-navy);
}
header#kopf.kopf-web.dunkel{
  background:rgba(6,20,34,0.88);
  border-color:rgba(255,255,255,0.15);
  color:var(--kopf-weiss);
}
#kopf.kopf-web.dunkel .logo,
#kopf.kopf-web.dunkel .hauptnavi a{ color:var(--kopf-weiss) }
#kopf.kopf-web.dunkel .hauptnavi a:hover{ color:var(--kopf-gold) }
#kopf.kopf-web.dunkel .logo-zeichen,
#kopf.kopf-web.dunkel .logo-bild{ filter:brightness(0) invert(1) }
#kopf.kopf-web.dunkel .kopf-icon{ background:transparent; color:var(--kopf-weiss) }
#kopf.kopf-web.dunkel .kopf-icon:hover{ background:rgba(255,255,255,.14) }
#kopf.kopf-web.dunkel .raster span{ background:var(--kopf-weiss) }
#kopf.kopf-web.dunkel .burger i{ background:var(--kopf-weiss) }
/* Das farbige Symbol braucht auf dunklem Grund eine helle Flaeche,
   sonst faellt der Helligkeitsabstand unter 1.2 zu 1. */
#kopf.kopf-web.dunkel .kopf-icon.bildknopf{ background:rgba(255,255,255,.92) }
#kopf.kopf-web.dunkel .kopf-icon.bildknopf:hover{ background:var(--kopf-weiss) }

/* ==================================================================
   7 DIE KLAPPEN, gemeinsam
   Sie haengen unter dem Kopf und bleiben in beiden Koepfen weiss,
   damit die farbigen Symbole nie in ihrem Grund verschwinden.
   ================================================================== */
#panel-menue, #panel-profil, #panel-kopfburger, #panel-sprache, #panel-suche{
  position:fixed; top:calc(var(--kopf-luft) + var(--kopf-hoehe) + 12px);
  z-index:9010; display:none;
  background:var(--kopf-weiss); color:var(--kopf-navy); text-align:left;
  font-family:var(--kopf-schrift);
  box-shadow:0 2px 6px rgba(0,17,30,.10), 0 22px 54px rgba(0,43,73,.28);
}
#panel-menue *, #panel-profil *, #panel-kopfburger *, #panel-sprache *, #panel-suche *{ box-sizing:border-box }
#panel-menue, #panel-profil, #panel-sprache, #panel-suche{ right:var(--kopf-luft) }
#panel-kopfburger{ left:var(--kopf-luft) }

/* ---- Umschalter: neun Plaetze, alle gleich gross, 40 mal 40 ---- */
#panel-menue{
  width:342px; border-radius:20px; padding:10px;
  grid-template-columns:repeat(3,1fr); gap:4px;
  border:1px solid rgba(0,43,73,.16);
}
#panel-menue.an{ display:grid }
#panel-menue a.appknopf{
  display:grid; justify-items:center; gap:8px; padding:12px 6px;
  border-radius:12px; text-decoration:none; color:var(--kopf-navy);
}
#panel-menue .appplatz{
  /* 30.08.2026, Noah: ohne Rahmen und ohne Hintergrund. Das Logo
     traegt sich selbst, eine Flaeche darunter macht es kleiner. */
  width:48px; height:48px; flex:none;
  display:grid; place-items:center; overflow:visible;
  background:none; border-radius:0;
}
#panel-menue .appplatz img{
  width:48px; height:48px; display:block; object-fit:contain;
}
#panel-menue .appname{
  /* 28.08.2026, ueber OPTIMaiX: 11,5 und weiter unten 12 Pixel sind
     nicht auf der Staffel. Erlaubt sind 10, 13, 15, 18, 24, 32, 48,
     64. Bei Gleichstand die groessere, Lesbarkeit vor Enge. */
  font-size:13px; font-weight:700; letter-spacing:.01em; text-transform:none;
  text-align:center; line-height:1.2; color:var(--kopf-navy);
}
#panel-menue a.appknopf:hover{ background:rgba(246,168,0,.14) }
#panel-menue a.appknopf:hover .appplatz{ background:none }
/* Ein Platz, dessen Anwendung noch nicht steht, traegt die Marke "bald"
   und fuehrt auf die Partner Plattform. Er ist also anklickbar, nur
   leiser gezeichnet. Deshalb kein cursor:default mehr: was fuehrt, muss
   auch aussehen, als fuehre es. */
#panel-menue a.appknopf.bald .appname{ color:var(--kopf-grau); font-weight:600 }
#panel-menue a.appknopf.bald .appplatz{ position:relative }
#panel-menue a.appknopf.bald .appplatz img{ opacity:.55 }
#panel-menue .appbald{
  position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  /* 8,5 Pixel waren nicht auf der Staffel, jetzt 10. */
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  line-height:1; padding:2px 5px; border-radius:999px;
  background:var(--kopf-gold); color:var(--kopf-tief); pointer-events:none;
}
#panel-menue a.appknopf.hier{ background:rgba(244,169,0,.18) }
#panel-menue a.appknopf:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:-2px }

/* ---- Profilmenue: Kopfbereich, sechs Punkte, Trennlinien ---- */
#panel-profil{
  width:300px; padding:6px; border-radius:16px; border:1px solid var(--kopf-grau);
}
#panel-profil.an{ display:block }
#panel-profil .pm-kopf{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px }
#panel-profil .pm-schliessen{
  position:absolute; top:4px; right:4px; width:32px; height:32px; padding:0; border:0;
  border-radius:9px; background:transparent; display:grid; place-items:center; cursor:pointer;
  color:var(--kopf-grau); z-index:2; transition:background .16s ease, color .16s ease;
}
#panel-profil .pm-schliessen svg{ width:16px; height:16px; display:block; pointer-events:none }
#panel-profil .pm-schliessen:hover{ background:var(--kopf-gold); color:var(--kopf-navy) }
#panel-profil .pm-schliessen:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:-2px;
  background:var(--kopf-gold); color:var(--kopf-navy) }
#panel-profil .pm-bild{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  background:var(--kopf-navy); color:var(--kopf-gold); display:grid; place-items:center;
  overflow:hidden; font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  font-weight:900; font-size:24px; line-height:1; text-transform:uppercase;
}
#panel-profil .pm-bild img{ width:100%; height:100%; object-fit:cover; display:block }
#panel-profil .pm-wer{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:26px }
#panel-profil .pm-name{ font-size:15px; font-weight:600; color:var(--kopf-navy); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 }
#panel-profil .pm-mail{ font-size:13px; font-weight:400; color:var(--kopf-grau); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#panel-profil .pm-marke{ align-self:flex-start; margin-top:3px; background:var(--kopf-gold);
  color:var(--kopf-navy); border-radius:999px; padding:2px 9px; font-size:10px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase; line-height:1.5 }
#panel-profil .pm-strich{ height:1px; background:var(--kopf-grau); opacity:.34; margin:5px 6px }
#panel-profil .pm-gruppe{ display:flex; flex-direction:column }
#panel-profil .pm-titel{
  display:block; padding:9px 10px 5px; font-size:10px; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; color:rgb(0,43,73); line-height:1.4; cursor:default;
  background:transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#panel-profil a.pm-zeile{
  display:grid; grid-template-columns:24px 1fr; align-items:center; column-gap:14px;
  min-height:44px; padding:9px 10px; border-radius:10px; text-decoration:none;
  color:var(--kopf-navy); background:transparent; cursor:pointer;
  font-size:15px; font-weight:400; transition:background .16s ease;
}
#panel-profil a.pm-zeile.pm-mitwert{ grid-template-columns:24px 1fr auto }
#panel-profil .pm-sym{ width:24px; height:24px; display:grid; place-items:center; color:var(--kopf-navy) }
#panel-profil .pm-sym svg{ width:20px; height:20px; display:block }
#panel-profil .pm-sym img{ width:20px; height:20px; display:block; object-fit:contain }
#panel-profil .pm-text{ font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none;
  color:var(--kopf-navy); line-height:1.4; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#panel-profil .pm-wert{ font-size:13px; font-weight:400; color:var(--kopf-grau); white-space:nowrap }
#panel-profil a.pm-zeile:hover{ background:var(--kopf-gold) }
#panel-profil a.pm-zeile:hover .pm-wert{ color:var(--kopf-navy) }
#panel-profil a.pm-zeile:focus-visible{ outline:2px solid var(--kopf-navy); outline-offset:-2px;
  background:var(--kopf-gold) }

/* Die Sprachwahl klappt im Profilmenue nach unten auf, Kopf A. */
#panel-profil .pm-sprachwahl{ display:flex; flex-direction:column; padding:2px 0 4px }
#panel-profil .pm-sprachwahl[hidden]{ display:none }
#panel-profil .pm-sprachwahl .lang-item{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:500; color:var(--kopf-navy);
  padding:9px 10px 9px 48px; border-radius:10px;
}
#panel-profil .pm-sprachwahl .lang-item:hover{ background:var(--kopf-gold) }
#panel-profil .pm-sprachwahl .lang-item:focus-visible{
  outline:2px solid var(--kopf-navy); outline-offset:-2px; background:var(--kopf-gold) }

/* ---- Einstellungsmenue hinter dem Hamburger, Kopf B ---- */
#panel-kopfburger{ width:268px; padding:6px; border-radius:16px; border:1px solid rgba(0,43,73,.16) }
#panel-kopfburger.an{ display:block }
#panel-kopfburger a{
  display:flex; align-items:center; min-height:44px; padding:9px 12px; border-radius:10px;
  text-decoration:none; color:var(--kopf-navy); font-size:15px; font-weight:600;
}
#panel-kopfburger a:hover{ background:var(--kopf-gold) }
#panel-kopfburger .mtrenner{ display:block; height:1px; background:rgba(0,43,73,.10); margin:6px 12px }

/* ---- Mobiles Hauptmenue hinter dem Hamburger, Kopf A ---- */
#panel-navburger{
  position:fixed; top:calc(var(--kopf-luft) + var(--kopf-hoehe) + 12px);
  left:var(--kopf-luft); right:var(--kopf-luft); z-index:9010; display:none;
  background:var(--kopf-weiss); border:1px solid rgba(0,43,73,.16); border-radius:16px;
  padding:6px; font-family:var(--kopf-schrift);
  box-shadow:0 2px 6px rgba(0,17,30,.10), 0 22px 54px rgba(0,43,73,.28);
}
#panel-navburger.an{ display:block }
#panel-navburger a{
  display:flex; align-items:center; min-height:46px; padding:9px 14px; border-radius:10px;
  text-decoration:none; color:var(--kopf-navy);
  font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
}
#panel-navburger a.eigenname{ text-transform:none }
#panel-navburger a:hover{ background:var(--kopf-gold) }

/* ==================================================================
   8 KURZE RUECKMELDUNG
   ================================================================== */
#kopfmeldung{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  z-index:9090; background:var(--kopf-navy); color:var(--kopf-weiss);
  font-size:13px; font-weight:600; font-family:var(--kopf-schrift);
  padding:11px 18px; border-radius:11px; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
  box-shadow:0 2px 6px rgba(0,17,30,.20), 0 16px 40px rgba(0,17,30,.30);
}
#kopfmeldung.an{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ==================================================================
   9 MOBILFASSUNG
   Die Reihenfolge bleibt. Was nicht mehr passt, tritt ab, nichts
   ueberschneidet sich.
   ================================================================== */
@media (max-width:1180px){
  #kopf .suche{ flex:0 1 300px }
}
@media (max-width:1000px){
  #kopf .suche{ flex:1 1 auto }
  #kopf .logo-bild{ display:none }
}
@media (max-width:760px){
  #kopf .logo-bild{ display:none }
  #panel-menue{ width:calc(100vw - 24px); max-width:342px }
}
@media (max-width:560px){
  #kopf.kopf-app .suche{ flex:1 1 auto; min-width:80px }
  #kopf .logo-zeichen{ height:26px }
  #panel-profil{ width:calc(100vw - 24px); max-width:300px }
}

/* =====================================================================
   NEU 15.08.2026. Kopf Typ B nach der Festlegung:
   links das Zeichen der Anwendung, Mitte das Logo des Mandanten,
   rechts die eigene Zone der Seite, dann InBoX, Umschalter, Profil.
   Dazu das linke Seitenpaneel als eine Quelle fuer alle Web-Apps.
   ===================================================================== */

/* ---- Links, das Zeichen der Anwendung ------------------------------
   Es ist KEIN Knopf, es ist eine Ortsangabe: der Mandant sieht daran,
   WO er ist. Deshalb ohne gefuellte Flaeche und durchscheinend. */
#kopf.kopf-app .appzeichen{ display:grid; place-items:center; text-decoration:none;
  background:transparent; opacity:.62; transition:opacity .18s }
#kopf.kopf-app .appzeichen:hover{ opacity:1; background:transparent }
#kopf.kopf-app .appzeichen img{ display:block; width:26px; height:26px; border-radius:7px }

/* ---- Mitte, das Logo des Mandanten ---------------------------------
   Es steht stets mittig, unabhaengig davon, wie breit die Nachbarn
   sind. width:max-content ist Pflicht: ohne die Angabe zieht sich der
   absolut gesetzte Kasten ueber die halbe Leiste und legt sich vor die
   Suchleiste, dann laesst sich dort nicht mehr tippen. Der Kasten
   nimmt zudem keine Klicks an, nur Zeichen und Schriftzug tun das. */
#kopf.kopf-app .logo.mandant{ position:absolute; left:50%; top:50%;
  width:max-content; max-width:calc(100% - 240px);
  transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px;
  text-decoration:none; pointer-events:none }
#kopf.kopf-app .logo.mandant img{ pointer-events:auto }
#kopf.kopf-app .logo.mandant .logo-zeichen{ width:28px; height:28px; display:block }
#kopf.kopf-app .logo.mandant .logo-bild{ height:19px; width:auto; display:block }
/* Ein Mandant ohne eigenes Zeichen traegt nur sein Logo. Dann wird
   dieses eine Bild responsiv gefuehrt statt auf 28 Pixel gezwungen. */
#kopf.kopf-app .logo.mandant .logo-zeichen.nurlogo{
  width:auto; height:26px; max-width:min(240px,42vw); object-fit:contain }
@media (max-width:720px){
  #kopf.kopf-app .logo.mandant .logo-bild{ display:none }
  #kopf.kopf-app .logo.mandant{ max-width:calc(100% - 150px) }
  #kopf.kopf-app .suche{ display:none }
}

/* ---- Rechts, die eigene Zone der Seite ----------------------------- */
.kopf-eigen{ display:flex; align-items:center; gap:4px; margin-right:4px }
.kopf-eigen:empty{ display:none }
.kopf-eigen .wtn{ display:inline-flex; align-items:center; gap:6px; border:0;
  background:transparent; color:var(--navy,#002B49); border-radius:10px;
  padding:7px 11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer }
.kopf-eigen .wtn svg{ width:18px; height:18px }
.kopf-eigen .wtn:hover{ background:rgba(0,43,73,.07) }
.kopf-eigen .wtn.an{ background:var(--navy,#002B49); color:#fff }

.kopf-zaehler{ position:absolute; top:3px; right:3px; min-width:16px; height:16px;
  padding:0 4px; border-radius:9px; background:var(--gold,#F4A900);
  color:var(--navy,#002B49); font-size:10px; font-weight:800; line-height:16px;
  text-align:center }

/* =====================================================================
   Der InBoX-Container unter dem Kopfzeichen und das kleine Fenster
   unten rechts. Vorbild ist Odoo: von jeder Seite aus schreiben, ohne
   die Anwendung zu verlassen.
   ===================================================================== */
.ib-feld{ position:fixed; z-index:9400; width:min(430px,94vw);
  top:calc(var(--kopf-luft,12px) + var(--kopf-hoehe,64px) + 8px);
  right:var(--kopf-luft,12px); background:#fff; border-radius:16px;
  border:1px solid rgba(0,43,73,.14); box-shadow:0 26px 64px rgba(0,17,30,.30);
  overflow:hidden; display:flex; flex-direction:column; max-height:min(620px,78vh) }
.ib-feld[hidden]{ display:none }
.ib-kopf{ display:flex; align-items:center; gap:8px; padding:9px 10px 8px;
  border-bottom:1px solid rgba(0,43,73,.12) }
.ib-reiter{ display:flex; gap:2px }
.ib-rt{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:700;
  color:#5b7183; padding:6px 11px; border-radius:8px; cursor:pointer }
.ib-rt:hover{ background:rgba(0,43,73,.06); color:#002B49 }
.ib-rt.an{ color:#002B49; box-shadow:inset 0 -2px 0 #F4A900 }
.ib-neu{ margin-left:auto; border:0; background:transparent; font:inherit; font-size:13px;
  font-weight:800; color:#8F6300; padding:6px 9px; border-radius:8px; cursor:pointer }
.ib-neu:hover{ background:rgba(244,169,0,.16) }
.ib-liste{ overflow-y:auto; flex:1; min-height:0 }
.ib-leer{ padding:22px 16px; color:#5b7183; font-size:13px; text-align:center }
.ib-z{ display:flex; gap:10px; align-items:flex-start; width:100%; border:0;
  background:transparent; text-align:left; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid rgba(0,43,73,.08); font:inherit }
.ib-z:hover{ background:rgba(244,169,0,.10) }
.ib-av{ width:34px; height:34px; flex:none; display:grid; place-items:center;
  background:#002B49; color:#fff; font-size:13px; font-weight:800 }
.ib-av.k, .ib-av.p{ border-radius:50% }
.ib-av.i{ border-radius:9px }
.ib-txt{ min-width:0; flex:1 }
.ib-z1{ display:flex; align-items:baseline; gap:8px }
.ib-z1 b{ font-size:13px; color:#002B49; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }
.ib-alt{ margin-left:auto; font-size:10px; color:#5b7183; white-space:nowrap }
.ib-vor{ display:block; font-size:13px; color:#3d5165; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.ib-fuss{ display:block; padding:10px; text-align:center; font-size:13px;
  font-weight:800; color:#8F6300; text-decoration:none;
  border-top:1px solid rgba(0,43,73,.12) }
.ib-fuss:hover{ background:rgba(244,169,0,.12) }

/* ---- Das kleine Fenster unten rechts ------------------------------- */
.ib-stapel{ position:fixed; right:14px; bottom:0; z-index:9300; display:flex;
  align-items:flex-end; gap:10px; pointer-events:none }
.ib-fenster{ width:min(340px,92vw); height:420px; background:#fff;
  border-radius:14px 14px 0 0; border:1px solid rgba(0,43,73,.16); border-bottom:0;
  box-shadow:0 -6px 40px rgba(0,17,30,.26); display:flex; flex-direction:column;
  overflow:hidden; pointer-events:auto }
.ib-fenster.klein{ height:44px }
.ib-f-kopf{ flex:none; height:44px; background:#002B49; color:#fff; display:flex;
  align-items:center; gap:8px; padding:0 8px 0 11px; cursor:pointer }
.ib-f-zei{ width:15px; height:15px; filter:brightness(0) invert(1) }
.ib-f-name{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ib-f-knr{ margin-left:auto; display:flex; gap:1px }
.ib-f-kn{ width:28px; height:28px; border:0; background:transparent; color:#fff;
  border-radius:7px; display:grid; place-items:center; cursor:pointer }
.ib-f-kn svg{ width:15px; height:15px }
.ib-f-kn:hover{ background:rgba(255,255,255,.18) }
.ib-f-lauf{ flex:1; min-height:0; overflow-y:auto; padding:12px 11px;
  background:#eef1f4; display:flex; flex-direction:column; gap:7px }
.ib-bl{ max-width:86%; padding:7px 11px 6px; border-radius:11px; font-size:13px;
  box-shadow:0 1px 2px rgba(0,43,73,.10) }
.ib-bl.ein{ align-self:flex-start; background:#fff; border-top-left-radius:4px }
.ib-bl.aus{ align-self:flex-end; background:#dff0d8; border-top-right-radius:4px }
.ib-bl b{ display:block; font-size:13px; font-weight:800; color:#8F6300; margin-bottom:2px }
.ib-u{ display:block; text-align:right; font-size:10px; color:#5b7183; margin-top:3px }
.ib-f-ein{ flex:none; display:flex; align-items:flex-end; gap:6px; padding:7px 8px;
  background:#fff; border-top:1px solid rgba(0,43,73,.12) }
.ib-f-feld{ flex:1; min-height:34px; max-height:96px; overflow-y:auto; outline:0;
  border:1px solid rgba(0,43,73,.14); border-radius:17px; padding:7px 12px; font-size:13px }
.ib-f-feld:empty:before{ content:attr(data-leer); color:#5b7183 }
.ib-f-senden{ width:34px; height:34px; flex:none; border:0; border-radius:9px;
  background:#002B49; color:#fff; display:grid; place-items:center; cursor:pointer }
.ib-f-senden svg{ width:16px; height:16px }
.ib-f-senden:hover{ background:#F4A900; color:#002B49 }

/* =====================================================================
   DIE ICON-LEISTE, gespiegelt aus der CRMap
   Bauart eins zu eins aus web/crm/index.html: weiss, schwebend, 12 px
   Luft, unter dem Kopf, 60 px breit, Radius 20, Knopf 44 mal 44.
   Neu ist nur der Hamburger ganz oben und das Aufklappen.
   ===================================================================== */
/* KEINE Uebergaenge auf Breite, Innenabstand und Kante. Gemessen am
   15.08.2026: ein laufender Uebergang schlaegt in der Rangfolge JEDE
   andere Angabe, auch eine mit !important. Bleibt er haengen, steht die
   Breite fuer immer auf 60 und keine Regel kommt mehr durch, die
   Leiste klappte dann sichtbar nie auf. Dazu rechnet ein Uebergang auf
   width und padding-left bei jedem Bild den gesamten Bauplan neu, in
   der CRMap blieb der Browser dabei stehen. Die Leiste springt auf und
   zu, sie gleitet nicht. */
html.hat-rail body{ padding-left:calc(var(--rail-zu,60px) + var(--kopf-luft,12px) * 2) }
html.hat-rail.rail-auf body{ padding-left:calc(var(--rail-auf,268px) + var(--kopf-luft,12px) * 2) }
/* Der Kopf steht ueber die GANZE Breite, die Leiste beginnt darunter.
   So haelt es die CRMap seit jeher, und so halten es Drive und YouTube:
   oben die Zeile ueber alles, darunter links die Symbole. Vorher wich
   der Kopf hier vor der Leiste zur Seite, in der CRMap aber nicht. Damit
   sass derselbe Kopf auf der einen Seite bei 12 und auf der anderen bei
   84, und beim Aufklappen wanderte er noch dazu. Er bleibt jetzt stehen,
   nur der Inhalt darunter weicht. */

/* Grundmasse nur dort, wo die Seite sie nicht schon hat. Die CRMap
   bringt ihre eigene .rail mit, die bleibt unberuehrt. */
html.hat-rail #rail.rail{ position:fixed; left:var(--kopf-luft,12px);
  top:calc(var(--kopf-luft,12px) + var(--kopf-hoehe,64px) + var(--kopf-luft,12px));
  bottom:var(--kopf-luft,12px); width:var(--rail-zu,60px); z-index:30;
  background:#fff; border-radius:20px; padding:8px 6px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 2px 6px rgba(0,43,73,.10), 0 22px 54px rgba(0,43,73,.20) }
/* Das Aufklappen gilt ueberall, auch in der CRMap. */
html.hat-rail #rail.rail{ overflow-x:hidden; overflow-y:auto; scrollbar-width:thin }
html.hat-rail #rail.rail::-webkit-scrollbar{ width:5px }
html.hat-rail #rail.rail::-webkit-scrollbar-thumb{ background:rgba(0,43,73,.18); border-radius:3px }

html.hat-rail #rail .rtn{ position:relative; width:44px; height:44px; border:0; border-radius:12px;
  cursor:pointer; background:none; color:#5b7183; display:grid; place-items:center;
  flex:none; text-decoration:none }
html.hat-rail #rail .rtn svg{ width:21px; height:21px }
html.hat-rail #rail .rtn:hover{ background:rgba(0,43,73,.07); color:#002B49 }
html.hat-rail #rail .rtn.an{ background:rgba(244,169,0,.18); color:#002B49 }
html.hat-rail #rail .rtn.unten{ margin-top:auto }
html.hat-rail #rail .rtn b{ position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-6px); background:#002B49; color:#fff;
  font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:.18s }
html.hat-rail #rail .rtn:hover b{ opacity:1; transform:translateY(-50%) translateX(0) }
html.hat-rail #rail .rzahl{ position:absolute; top:5px; right:5px; min-width:16px; height:16px;
  padding:0 4px; border-radius:8px; background:#F4A900; color:#002B49;
  font-size:10px; font-style:normal; font-weight:800; line-height:16px; text-align:center }

/* Der Hamburger ganz oben, farblich und graphisch abgehoben. */
html.hat-rail #rail .rtn-burger{ background:rgba(0,43,73,.07); color:#002B49; margin-bottom:6px;
  position:relative }
html.hat-rail #rail .rtn-burger::after{ content:''; position:absolute; left:6px; right:6px;
  bottom:-5px; height:1px; background:rgba(0,43,73,.14) }
html.hat-rail #rail .rtn-burger:hover{ background:rgba(244,169,0,.22) }
html.hat-rail #rail.auf .rtn-burger{ background:#F4A900; color:#002B49 }

/* Aufgeklappt: die Leiste wird breit, aus der Sprechblase wird ein Name. */
html.hat-rail #rail.rail.auf{ width:var(--rail-auf,268px); align-items:stretch; padding:8px }
html.hat-rail #rail.auf .rtn{ width:100%; height:44px; display:flex; align-items:center;
  justify-content:flex-start; gap:13px; padding:0 12px }
html.hat-rail #rail.auf .rtn b{ position:static; transform:none; opacity:1; background:none;
  color:inherit; padding:0; font-size:15px; font-weight:600; pointer-events:auto }
html.hat-rail #rail.auf .rtn-burger b{ font-size:15px; font-weight:900; letter-spacing:-.01em }
html.hat-rail #rail.auf .rzahl{ position:static; margin-left:auto }
html.hat-rail #rail.auf .rtn-burger::after{ left:8px; right:8px }

/* Eine einzige Schwelle fuer das ganze System: 720. Darueber ist die
   Webansicht, dort schiebt die Leiste den Inhalt zur Seite. Darunter
   ist die Mobilfassung, dort legt sie sich darueber, denn ein Schub um
   268 Pixel liesse auf einem schmalen Schirm nichts mehr uebrig.
   Dieselbe Schwelle blendet den Schriftzug des Mandanten aus. Vorher
   standen hier 860 und dort 720, damit sprang die Leiste eher um als
   der Kopf. */
@media (max-width:720px){
  /* Hamburger oben links in der Ecke. Die Leiste verschwindet NICHT,
     sonst kaeme man auf dem Telefon nie an das Menue. Sie schrumpft auf
     den Hamburger und faehrt beim Oeffnen ueber den Inhalt, statt ihn
     zur Seite zu schieben. Gemessen am 17.08.2026: vorher stand hier
     width 0 und opacity 0, damit war auf dem Telefon gar kein Menue da. */
  html.hat-rail body{ padding-left:0 }
  html.hat-rail #rail.rail{
    top:calc(var(--kopf-luft,12px) + var(--kopf-hoehe,64px) + 6px);
    left:8px; bottom:auto; width:48px; height:48px; padding:2px;
    border-radius:14px; opacity:1; pointer-events:auto; overflow:hidden;
    z-index:140 }
  html.hat-rail #rail.rail .rtn{ display:none }
  html.hat-rail #rail.rail .rtn-burger{ display:grid; width:44px; height:44px; margin:0 }
  html.hat-rail #rail.rail .rtn-burger b{ display:none }
  html.hat-rail #rail.rail.auf{
    width:min(272px,86vw); height:auto; max-height:calc(100vh - var(--kopf-hoehe,64px) - 40px);
    bottom:auto; padding:8px; overflow-y:auto }
  html.hat-rail #rail.rail.auf .rtn{ display:flex }
  html.hat-rail #rail.rail.auf .rtn-burger{ width:100%; display:flex }
  html.hat-rail #rail.rail.auf .rtn-burger b{ display:block }
  html.hat-rail #rail.rail.auf{ width:var(--rail-auf,268px); padding:8px; opacity:1; pointer-events:auto }
  html.hat-rail.rail-auf body{ padding-left:0 }
}


/* =====================================================================
   Das Schliesskreuz der Leiste und der Hamburger auf dem Telefon.
   Regel: die Leiste bleibt offen, bis X oder Hamburger sie schliessen.
   ===================================================================== */
html.hat-rail #rail .rt-kreuz {display:none}
html.hat-rail #rail.auf .rt-kreuz {display:grid; place-items:center; margin-left:auto;
  width:26px; height:26px; border-radius:7px; font-style:normal; font-size:15px;
  color:#5b7183; background:rgba(0,43,73,.07); flex:none}
html.hat-rail #rail.auf .rt-kreuz:hover {background:rgba(168,50,30,.14); color:#a8321e}

@media (max-width:820px){
  /* Auf dem Telefon sitzt der Hamburger oben links und die Leiste faehrt
     darueber, statt den Inhalt zur Seite zu schieben. */
  html.hat-rail #rail.rail {top:calc(var(--kopf-luft,12px) + var(--kopf-hoehe,64px) + var(--kopf-luft,12px));
    left:var(--kopf-luft,12px); z-index:120}
  html.hat-rail body {padding-left:0}
  html.hat-rail.rail-auf body {padding-left:0}
  html.hat-rail #rail.rail.auf {width:min(268px, 84vw)}
}


/* =====================================================================
   Auf dem Telefon ersetzt der Hamburger das App-Symbol oben links,
   so wie es jeder Mailclient haelt. Die schwebende Leiste verschwindet
   dort ganz, sonst haette man zwei Menueknoepfe nebeneinander.
   ===================================================================== */
@media (max-width:720px){
  html.hat-rail #rail.rail{ display:none }
  html.hat-rail #rail.rail.auf{
    display:flex; position:fixed;
    top:calc(var(--kopf-luft,12px) + var(--kopf-hoehe,64px) + 6px);
    left:8px; bottom:auto; width:min(272px,86vw); height:auto;
    max-height:calc(100vh - var(--kopf-hoehe,64px) - 40px);
    padding:8px; border-radius:16px; opacity:1; pointer-events:auto;
    overflow-y:auto; z-index:140 }
  html.hat-rail #rail.rail.auf .rtn{ display:flex }


}


/* =====================================================================
   Telefon: der Hamburger ersetzt das App-Symbol oben links, so wie es
   jeder Mailclient haelt. Gemessen am 17.08.2026: der Kopf baut das
   Symbol als btn-appheim und den Menueknopf als btn-burger.
   ===================================================================== */
@media (max-width:720px){
  .kopf #btn-appheim{ display:none !important }
  .kopf #btn-burger{ display:grid !important; place-items:center;
    width:var(--kopf-knopf,40px); height:var(--kopf-knopf,40px);
    border-radius:var(--kopf-knopfradius,12px); border:0; background:transparent;
    color:#002B49; cursor:pointer; flex:none; order:-1 }
  .kopf #btn-burger:hover{ background:rgba(0,43,73,.07) }
  html.rail-auf .kopf #btn-burger{ background:rgba(244,169,0,.22) }
}
@media (min-width:721px){
  .kopf #btn-burger{ display:none !important }
}


/* Ab hier gilt alles NUR fuer Xannel. Es gibt zwei Kopfarten,
   aber jede App bekommt ihre eigenen Anpassungen. */
/* =====================================================================
   Kopf ueber die ganze Breite, oben an der Kante, ohne Rundung und ohne
   Rand. Hamburger ganz links, dann die Marke, mittig die Suche.
   Gilt fuer Web und Telefon gleichermassen.
   ===================================================================== */
html.xannel{ --kopf-luft:0px; --kopf-hoehe:60px; --kopf-radius:0px; --kopf-rand:0px }

html.xannel .kopf{
  left:0 !important; right:0 !important; top:0 !important;
  border-radius:0 !important; border:0 !important;
  border-bottom:1px solid rgba(0,43,73,.14) !important;
  height:60px !important; padding:0 14px !important;
  box-shadow:0 1px 3px rgba(0,43,73,.07) !important;
  background:#fff !important; backdrop-filter:none !important;
  gap:10px !important;
}

/* Hamburger ganz links, immer sichtbar, auch am Rechner. */
html.xannel .kopf #btn-burger{
  display:grid !important; place-items:center; order:-10;
  width:42px; height:42px; border-radius:50%; border:0; background:transparent;
  color:#002B49; cursor:pointer; flex:none }
html.xannel .kopf #btn-burger:hover{ background:rgba(0,43,73,.07) }
html.xannel.rail-auf .kopf #btn-burger{ background:rgba(0,43,73,.09) }

/* Das Partnerlogo links faellt weg, dafuer die Markenkombination. */
html.xannel .kopf #btn-appheim{ display:none !important }

html.xannel .kopf .marke-kombi{ display:flex; align-items:center; gap:9px; flex:none; order:-9;
  min-width:0; text-decoration:none; color:#002B49 }
html.xannel .kopf .marke-kombi .app-zeichen{ width:26px; height:26px; flex:none }
html.xannel .kopf .marke-kombi .app-name{ font:800 18px/1 "Segoe UI",system-ui,sans-serif;
  letter-spacing:-.02em; white-space:nowrap }
html.xannel .kopf .marke-kombi .schraege{ color:rgba(0,43,73,.30); font:300 24px/1 inherit; margin:0 3px }
html.xannel .kopf .marke-kombi .mandant-logo{ height:26px; width:auto; max-width:190px; object-fit:contain;
  display:block }

/* Suchleiste mittig, wie bei Gmail. */
html.xannel .kopf #suchfeld, html.xannel .kopf .suche{
  flex:1 1 auto !important; max-width:720px !important; margin:0 auto !important;
  height:44px !important; border-radius:22px !important;
  background:#eef1f5 !important; border:1px solid transparent !important;
  display:flex !important; align-items:center }
html.xannel .kopf #suchfeld:focus-within, html.xannel .kopf .suche:focus-within{
  background:#fff !important; border-color:rgba(0,43,73,.18) !important;
  box-shadow:0 1px 6px rgba(0,43,73,.12) !important }

/* Das Mandantenlogo in der Mitte entfaellt, es steht jetzt links. */
html.xannel .kopf #kopf-mandant{ display:none !important }

/* Rechts nur noch Umschalter und Profil. */
html.xannel .kopf #btn-inbound{ display:none !important }
html.xannel .kopf .kopf-rechts{ flex:none !important; margin-left:auto !important; gap:4px !important }

/* Der Koerper haelt genau die Kopfhoehe frei. */
html.xannel.hat-kopf .kopf-platz{ height:60px }

/* Die Leiste beginnt direkt unter dem Kopf und ueberlappt ihn nicht. */
html.xannel.hat-rail #rail.rail{
  top:60px !important; left:0 !important; bottom:0 !important;
  border-radius:0 !important; box-shadow:1px 0 3px rgba(0,43,73,.09) !important;
  padding:8px 6px !important }
html.xannel.hat-rail body{ padding-left:60px }
html.xannel.hat-rail.rail-auf body{ padding-left:268px }

@media (max-width:820px){
html.xannel .kopf .marke-kombi .app-name{ display:none }
html.xannel .kopf .marke-kombi .schraege{ display:none }
html.xannel .kopf .marke-kombi .mandant-logo{ max-width:110px }
html.xannel .kopf #suchfeld, html.xannel .kopf .suche{ max-width:none !important }
}
@media (max-width:720px){
html.xannel.hat-rail #rail.rail{ display:none }
html.xannel.hat-rail #rail.rail.auf{ display:flex; width:min(268px,86vw); z-index:140 }
html.xannel.hat-rail body{ padding-left:0 }
html.xannel.hat-rail.rail-auf body{ padding-left:0 }
}


/* Die Suche wirklich mittig, unabhaengig davon wie breit links und
   rechts sind. Gemessen: sonst liegt ihre Mitte bei 824 statt 720. */
@media (min-width:1000px){
html.xannel .kopf{ position:fixed }
html.xannel .kopf #suchfeld, html.xannel .kopf .suche{
    position:absolute !important; left:50% !important; transform:translateX(-50%) !important;
    /* Breite so, dass links die Marke und rechts die Knoepfe Platz
       behalten. 420 links, 200 rechts, dazu Luft. Gemessen: bei
       720 ueberlappte sie die Marke ab 1440 Pixeln. */
    width:min(680px, calc(100vw - 880px)) !important; max-width:680px !important;
    margin:0 !important; flex:none !important }
html.xannel .kopf .marke-kombi{ margin-right:auto }
}


/* =====================================================================
   Nur EIN Hamburger. Der im Kopf bleibt und ist navy. Der eigene
   Hamburger der Leiste darunter faellt weg, sonst stehen zwei
   Menueknoepfe uebereinander.
   ===================================================================== */
html.xannel .kopf #btn-burger{ color:#002B49 !important }
html.xannel .kopf #btn-burger svg{ stroke:#002B49 !important; color:#002B49 !important; width:22px; height:22px }
html.xannel .kopf #btn-burger svg path, html.xannel .kopf #btn-burger svg line{ stroke:#002B49 !important }

html.xannel.hat-rail #rail .rtn-burger{ display:none !important }
html.xannel.hat-rail #rail.auf .rtn-burger{ display:none !important }
html.xannel.hat-rail #rail .rtn-burger::after{ display:none !important }
/* Das Schliesskreuz wandert an den Kopf der offenen Leiste. */
html.xannel.hat-rail #rail.auf::before{
  content:'¹5'; position:sticky; top:0; align-self:flex-end;
  width:26px; height:26px; margin:0 2px 6px auto; border-radius:7px;
  display:grid; place-items:center; font:700 13px/1 sans-serif;
  color:#5b7183; background:rgba(0,43,73,.07); cursor:pointer; flex:none }
html.xannel.hat-rail #rail:not(.auf)::before{ display:none }


/* =====================================================================
   appzeichen-weiss: Die App-Zeichen stehen auf weissem Grund und
   groesser. Sie bringen ihre Farbe mit, ein farbiger Platz darunter
   schluckt sie. Gilt fuer alle Anwendungen gleich, der Umschalter ist
   ueberall derselbe.
   ===================================================================== */
#panel-menue .appplatz{
  width:56px !important; height:56px !important; border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 0 0 1px rgba(0,43,73,.13), 0 1px 4px rgba(0,43,73,.10) !important;
  padding:5px !important; box-sizing:border-box !important;
}
#panel-menue .appplatz img{
  width:100% !important; height:100% !important; object-fit:contain !important;
}
#panel-menue a.appknopf:hover .appplatz{
  background:#fff !important;
  box-shadow:0 0 0 2px var(--kopf-gold, #F4A900), 0 2px 8px rgba(0,43,73,.16) !important;
}
#panel-menue .appname{ font-size:13px !important; margin-top:6px }

/* Das Zeichen der laufenden Anwendung im Kopf, ebenfalls auf Weiss. */
#kopf.kopf-app .appzeichen img,
.kopf .marke-kombi .app-zeichen{
  width:32px !important; height:32px !important; border-radius:8px !important;
  background:#fff !important; padding:2px !important; box-sizing:border-box !important;
  box-shadow:0 0 0 1px rgba(0,43,73,.12) !important; object-fit:contain !important;
}


/* Kopfzeile des App-Umschalters: Ueberschrift links, Stift rechts. */
/* Die Kopfzeile ist die erste Zeile des Rasters und ueberspannt alle
   Spalten. Schwebend nahm sie dem Feld die Eigenbreite, es fiel auf
   22 Pixel zusammen. Gemessen 19.08.2026. */
#panel-menue .appkopf{
  grid-column:1 / -1;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 2px 9px; margin:0 0 4px;
  border-bottom:1px solid rgba(0,43,73,.12);
}
#panel-menue .appkopf-stift{ margin-left:auto }
#panel-menue .appkopf-titel{
  font:700 13px/1.2 "Segoe UI",system-ui,sans-serif; letter-spacing:.01em;
  color:var(--kopf-navy, #002B49); white-space:nowrap;
}
#panel-menue .appkopf-stift{
  width:30px; height:30px; flex:none; border:0; background:transparent;
  border-radius:8px; display:grid; place-items:center; cursor:pointer;
  color:var(--kopf-grau, #5b7183);
}
#panel-menue .appkopf-stift:hover{
  background:rgba(0,43,73,.09); color:var(--kopf-navy, #002B49);
}


/* ====================================================================
   ABGEMELDET
   Der Kopf zeigt nichts Internes, solange keine Sitzung besteht. Weder
   Suche noch InBoX noch das Anwendungsraster. Das Profilpaneel ist in
   diesem Zustand ein gewoehnliches Anmeldepaneel. Die Klasse
   angemeldet setzt kopf-website.js, sobald /api/ich antwortet.
   ==================================================================== */
/* Die Lupe war abgemeldet ausgeblendet. Sie bleibt jetzt stehen:
   die Suche der Einstiegsseite durchsucht oeffentliche Inhalte und
   setzt keine Sitzung voraus. */
/* Das Raster und die InBoX bleiben sichtbar, fuehren aber nicht
   hinein, sondern zur Aufforderung. Siehe gastPaneel in
   kopf-website.js. Ein Platz traegt dann keine Marke hier, sondern
   die Klasse gesperrt. */
html:not(.angemeldet) #panel-menue .appknopf{ position:relative; }
html:not(.angemeldet) #panel-menue .appknopf .appplatz{ opacity:.55; }
html:not(.angemeldet) #panel-menue .appknopf:hover .appplatz{ opacity:.8; }

/* Die Einladung, die statt der Anwendung erscheint */
#panel-einstieg{
  position:fixed; z-index:9400; width:min(360px,calc(100vw - 24px));
  background:var(--kopf-weiss,#fff); color:var(--kopf-navy,#002B49);
  border:1px solid rgba(0,43,73,.13); border-radius:18px; padding:22px;
  box-shadow:0 30px 80px rgba(0,17,30,.32); display:none;
  font-family:var(--kopf-schrift);
}
#panel-einstieg.an{ display:block }
#panel-einstieg .ei-bild{ width:44px; height:44px; border-radius:12px; margin-bottom:14px;
  background:var(--kopf-navy,#002B49); display:grid; place-items:center }
#panel-einstieg .ei-bild img{ width:26px; height:26px }
#panel-einstieg h4{ font-size:18px; font-weight:800; margin:0 0 6px; line-height:1.2 }
#panel-einstieg p{ font-size:13px; line-height:1.55; color:var(--kopf-grau,#5b7183); margin:0 0 16px }
#panel-einstieg .ei-ruf{ display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; border-radius:999px; border:0; cursor:pointer;
  background:var(--kopf-gold,#F4A900); color:var(--kopf-navy,#002B49);
  font-size:15px; font-weight:800; text-decoration:none }
#panel-einstieg .ei-ruf:hover{ background:#ffbb2b }
#panel-einstieg .ei-still{ display:flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; margin-top:8px; border-radius:999px; cursor:pointer;
  background:none; border:1.5px solid rgba(0,43,73,.13);
  color:var(--kopf-navy,#002B49); font-size:15px; font-weight:700 }
#panel-einstieg .ei-still:hover{ background:var(--kopf-papier,#F4F8FC) }
#panel-einstieg .ei-frei{ margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(0,43,73,.08); font-size:13px; line-height:1.5;
  color:var(--kopf-tief,#8F6300); font-weight:700 }

.pm-feld{ display:block; margin:0 16px 8px; }
.pm-feld label{ display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:4px; color:#5b7183; }
.pm-feld input{ width:100%; height:44px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(0,43,73,.25); background:#fff; color:#002B49;
  font:inherit; font-size:15px; }
.pm-feld input:focus{ outline:2px solid #F4A900; outline-offset:1px; border-color:#F4A900; }
.pm-knopf{ display:block; width:calc(100% - 32px); margin:8px 16px 4px; min-height:44px;
  border:0; border-radius:999px; background:#002B49; color:#fff; font:inherit;
  font-size:15px; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.pm-knopf:hover{ background:#003a63; }
.pm-links{ display:flex; justify-content:space-between; gap:8px; margin:4px 16px 12px; }
.pm-links a{ display:flex; align-items:center; min-height:44px; font-size:13px;
  font-weight:600; color:#002B49; text-decoration:none; }
.pm-links a:hover{ text-decoration:underline; }
.pm-fehler{ margin:0 16px 8px; font-size:13px; font-weight:700; color:#8F6300; }


/* ====================================================================
   LANDINGKOPF
   Nur die Landingpage. Links das Lockup, eine Trennlinie und die
   Seitenbezeichnung. Mittig sechs oeffentliche Punkte, die beim ersten
   Scrollen den Platz an die Folientitel abgeben. Produkte oeffnet ein
   Mega-Menue. Form, Hoehe und Radius des Kopfes bleiben unberuehrt.
   ==================================================================== */
#kopf .kopf-seitenname{ display:flex; align-items:center; gap:10px; flex:none; margin-left:2px }
#kopf .kopf-seitenname i{ width:1px; height:22px; background:rgba(0,43,73,.16); display:block }
#kopf .kopf-seitenname b{
  font-family:var(--kopf-anzeige,var(--kopf-schrift)); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--kopf-grau,#5b7183);
}
#kopf.dunkel .kopf-seitenname i{ background:rgba(255,255,255,.22) }
#kopf.dunkel .kopf-seitenname b{ color:rgba(255,255,255,.7) }

#kopf .kopf-landing{ position:relative }
#kopf .navi-seiten,#kopf .navi-folien{ display:flex; align-items:center; gap:clamp(6px,.9vw,18px) }
/* DIE NAVIGATION BLEIBT STEHEN.

   Der Kopf tauschte beim Scrollen die Seitennavigation gegen eine
   Reihe von Folientiteln. Diese Titel meldet die Seite ueber
   kopfFolienSetzen an, und die Einstiegsseite ruft das nirgends auf:
   die Leiste war also leer, und beim ersten Scrollen verschwand die
   Navigation ersatzlos. Ein Kopf, der seine Verweise wegnimmt, sobald
   der Besucher sich bewegt, nimmt sie genau dann weg, wenn er sie
   braucht.

   Die Reihe der Folientitel bleibt im Blatt stehen. Sie tritt an,
   sobald eine Seite sie wirklich anmeldet, und nur dann. */
#kopf .navi-folien{ display:none }
#kopf.gescrollt .navi-folien:not(:empty){ display:flex }
#kopf.gescrollt .navi-folien:not(:empty) ~ .navi-seiten,
#kopf.gescrollt .navi-seiten:has(~ .navi-folien:not(:empty)){ display:none }
/* Groesser und in Versalien, wie im Masterplan: dort tragen die
   Punkte 15 Pixel, Halbfett und anderthalb Punkte Sperrung. Bei 13,5
   Pixel ohne Sperrung wirkte die Reihe wie eine Fusszeile. */
#kopf .navi-seiten a,#kopf .navi-seiten button{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:var(--kopf-schrift); font-size:15px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--kopf-navy); padding:9px 11px; border-radius:10px; white-space:nowrap;
}

/* ---- Das Sprachpaneel --------------------------------------------
   Jede Sprache steht in ihrer eigenen Schrift. Das Kuerzel rechts ist
   fuer den, der die Schrift nicht liest. */
/* Die Verankerung stand nur in der Regel mit den drei IDs, und das
   Sprachpaneel war in keiner davon: es lag deshalb ohne Position im
   Fluss und tauchte am Seitenende auf. */
.sprachmenue{ min-width:238px; padding:8px; border-radius:18px;
  border:1px solid rgba(0,43,73,.16) }
#panel-sprache.an{ display:block }
.sp-zeile{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:11px 13px; border-radius:10px; color:var(--kopf-navy);
  font-family:var(--kopf-schrift); font-size:15px; font-weight:600 }
.sp-zeile:hover{ background:rgba(0,43,73,.06) }
.sp-zeile.an{ background:rgba(244,169,0,.14) }
.sp-zeile.an .sp-kurz{ color:#B26A00 }
.sp-kurz{ font:700 10px/1 var(--kopf-schrift); letter-spacing:.1em; color:#7C8B97 }
/* Die Punkte der Einstiegsseite tragen die Klasse eigenname, und
   fuer die gilt weiter oben text-transform:none, damit Markennamen
   ihre Schreibweise behalten. In dieser Reihe sind es aber keine
   Markennamen, sondern Menuepunkte. */
#kopf .navi-seiten a.eigenname{ text-transform:uppercase }
#kopf .navi-seiten a:hover,#kopf .navi-seiten button:hover{ background:rgba(0,43,73,.06) }
#kopf.dunkel .navi-seiten a,#kopf.dunkel .navi-seiten button{ color:var(--kopf-weiss) }
#kopf .mega-pfeil{
  width:7px; height:7px; border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); margin-top:-3px; opacity:.55;
}
#kopf .bald-marke{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kopf-dgold,#8F6300); background:rgba(244,169,0,.16); border-radius:999px; padding:3px 6px;
}
#kopf .navi-folien button{
  background:none; border:0; cursor:pointer; padding:9px 9px; border-radius:10px; white-space:nowrap;
  font-family:var(--kopf-schrift); font-size:13px; font-weight:600; color:var(--kopf-grau,#5b7183);
}
#kopf .navi-folien button:hover{ background:rgba(0,43,73,.06) }
#kopf .navi-folien button.an{ color:var(--kopf-navy); background:rgba(0,43,73,.07); font-weight:800 }
#kopf.dunkel .navi-folien button{ color:rgba(255,255,255,.66) }
#kopf.dunkel .navi-folien button.an{ color:#fff; background:rgba(255,255,255,.12) }

/* Das Menue liegt IN der Navigation, und die Navigation setzt ihre
   Verweise in Versalien mit Sperrung. Beides erbte jeder Eintrag hier
   mit: die Zeilen brachen nicht mehr um, die Spalten wuchsen ueber
   ihren Anteil hinaus und die dritte stand ausserhalb des Kastens.
   Deshalb wird beides hier ausdruecklich zurueckgenommen, und die
   Spalten bekommen minmax(0,1fr) statt 1fr: nur so darf eine Spalte
   schmaler werden als ihr laengstes Wort. */
#kopf .kopf-mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  width:min(780px,88vw); background:#fff; border:1px solid rgba(0,43,73,.13); border-radius:18px;
  padding:14px; box-shadow:0 30px 80px rgba(0,43,73,.22); display:none; z-index:960;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;
  text-transform:none; letter-spacing:normal;
}
#kopf .kopf-mega a,#kopf .kopf-mega b,#kopf .kopf-mega .hn,
#kopf .kopf-mega .mega-alle{
  text-transform:none; letter-spacing:normal; white-space:normal;
  font-family:var(--kopf-schrift);
}
#kopf .kopf-mega.auf{ display:grid }
#kopf .kopf-mega a{ display:flex; gap:12px; padding:11px; border-radius:14px;
  align-items:center; text-decoration:none; color:var(--kopf-navy);
  border:1px solid transparent; transition:background .16s, border-color .16s }
#kopf .kopf-mega a:hover{ background:#F4F8FC; border-color:rgba(0,43,73,.10) }
/* Ein Produktbild ist freigestellt. Es wird eingepasst und nicht
   beschnitten, sonst fehlt dem Modul die Kante und dem Stecker der
   Kopf. */
#kopf .kopf-mega .mb{ width:52px; height:52px; border-radius:12px; flex:none;
  background:#EEF3F8 center/78% no-repeat; background-blend-mode:normal;
  border:1px solid rgba(0,43,73,.08) }
#kopf .kopf-mega .mt{ min-width:0 }
#kopf .kopf-mega b{ display:block; font-size:13px; font-weight:800;
  letter-spacing:-.01em }
#kopf .kopf-mega .hn{ display:block; margin-top:2px;
  font-family:var(--kopf-schrift); font-size:10px; font-weight:500;
  line-height:1.35; color:rgba(0,43,73,.74) }
/* Die letzte Zeile laeuft ueber alle drei Spalten: sie ist kein
   siebter Eintrag, sondern der Weg aus dem Menue hinaus. */
#kopf .kopf-mega .mega-alle{ grid-column:1/-1; justify-content:center;
  gap:9px; margin-top:6px; padding:12px;
  border-top:1px solid rgba(0,43,73,.10); border-radius:0 0 12px 12px;
  font-size:13px; font-weight:800; letter-spacing:.01em }
#kopf .kopf-mega .mega-alle:hover{ background:#F4F8FC; border-color:transparent;
  border-top-color:rgba(0,43,73,.10) }
#kopf .mega-weiter{ width:7px; height:7px; flex:none;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
  transform:rotate(45deg); opacity:.6 }
#kopf .mega-knopf[aria-expanded="true"] .mega-pfeil{ transform:rotate(135deg);
  margin-top:2px }
@media (max-width:820px){
  #kopf .kopf-mega{ grid-template-columns:1fr }
}
#kopf .kopf-mega .frei{ font-size:10px; font-weight:800; letter-spacing:.14em;
  color:var(--kopf-dgold,#8F6300) }
@media (max-width:820px){
  #kopf .kopf-seitenname{ display:none }
  #kopf .kopf-landing{ display:none }
}


/* ====================================================================
   DIE SPRACHFASSUNGEN DER NAVIGATION

   Die Punkte tragen je Sprache eine eigene Spanne. Welche sichtbar ist,
   entscheidet lang am Wurzelelement. Diese Regel stand bisher nur im
   Kopf der Startseite, obwohl das Markup aus kopf-website.js kommt und
   damit auf jeder Seite steht. Auf den Unterseiten waren deshalb beide
   Fassungen gleichzeitig sichtbar. Der Kopf misst seine Breite und fand
   die doppelte, also klappte er in das Hamburger-Menue, obwohl reichlich
   Platz war. Eine gemeinsame Zeile gehoert in die gemeinsame Datei.
   ==================================================================== */
.s-en,.s-de{ display:none }
html[lang="en"] .s-es{ display:none } html[lang="en"] .s-en{ display:inline }
html[lang="de"] .s-es{ display:none } html[lang="de"] .s-de{ display:inline }

/* ====================================================================
   KOPF AM SEITENANFANG
   ==================================================================== */
/* Nur im hellen Modus. Der Kopf entscheidet selbst, ob er hell oder
   dunkel auftritt: er misst, worauf er liegt, und traegt nie die Farbe
   seines Hintergrunds. Ohne die Einschraenkung auf .hell setzte diese
   Regel auch dem dunklen Kopf einen weissen Grund unter, und dann stand
   weisse Schrift auf weissem Grund. Genau das war auf allen
   Unterseiten zu sehen. */
header#kopf.kopf.hell:not(.gescrollt){
  background:#FFFFFF;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,17,30,.10);
  border-color:rgba(0,43,73,.14);
}
header#kopf.kopf.hell.gescrollt{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  transition:background .25s, box-shadow .25s;
}

/* Der dunkle Kopf. Er tritt auf, wo unter ihm heller Grund liegt, also
   auf allen Unterseiten der oeffentlichen Einstiegsseite. Seine Schrift
   ist weiss, also braucht er auch einen dunklen Grund. */
header#kopf.kopf.dunkel{
  background:rgba(0,43,73,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 1px 2px rgba(0,17,30,.14), 0 10px 30px rgba(0,17,30,.16);
  transition:background .25s, box-shadow .25s;
}


/* ==================================================================
   12 DIE SUCHE

   Sie sucht nicht auf einem Server, sondern im Dokument, das schon
   geladen ist: Abschnitte, Untersektionen, Bentokacheln, Fragen und
   die Module im Waehler, dazu die Unterseiten. Deshalb steht das
   Ergebnis beim Tippen da und nicht nach einer Antwort aus dem Netz.

   Die Schrift der zweiten Zeile ist gedeckeltes Navy, kein Grau: auf
   Weiss gemessen 5,2 zu eins.
   ================================================================== */
#panel-suche{
  width:min(560px, calc(100vw - 2 * var(--kopf-luft)));
  border-radius:20px; border:1px solid rgba(0,43,73,.16);
  overflow:hidden;
}
#panel-suche.an{ display:block }
.su-kopf{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:10px; padding:13px 15px; border-bottom:1px solid rgba(0,43,73,.10) }
.su-kopf > svg{ width:20px; height:20px; color:rgba(0,43,73,.55); flex:none }
#su-feld{ border:0; outline:0; background:transparent; width:100%; padding:0;
  font:600 15px/1.35 var(--kopf-schrift); color:var(--kopf-navy) }
#su-feld::placeholder{ color:rgba(0,43,73,.5) }
.su-hinweis{ flex:none; border:1px solid rgba(0,43,73,.18); border-radius:7px;
  background:transparent; padding:5px 8px; cursor:pointer;
  font:700 10px/1 var(--kopf-schrift); letter-spacing:.06em;
  color:rgba(0,43,73,.72) }
.su-hinweis:hover{ background:rgba(0,43,73,.07) }
.su-liste{ max-height:min(58vh,460px); overflow:auto; padding:6px; margin:0 }
.su-gruppe{ margin:10px 9px 3px; font:800 10px/1 var(--kopf-schrift);
  letter-spacing:.15em; text-transform:uppercase; color:rgba(0,43,73,.6) }
.su-gruppe:first-child{ margin-top:4px }
.su-treffer{ display:block; width:100%; text-align:left; border:0; cursor:pointer;
  background:transparent; border-radius:12px; padding:9px 10px;
  font-family:var(--kopf-schrift) }
.su-treffer:hover, .su-treffer.an{ background:rgba(0,43,73,.08) }
.su-treffer b{ display:block; font:700 15px/1.3 var(--kopf-schrift);
  color:var(--kopf-navy) }
.su-treffer span{ display:block; margin-top:2px;
  font:500 13px/1.35 var(--kopf-schrift); color:rgba(0,43,73,.72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.su-treffer mark{ background:rgba(244,169,0,.4); color:inherit;
  border-radius:3px; padding:0 1px }
.su-nichts{ padding:26px 16px; text-align:center;
  font:500 13px/1.55 var(--kopf-schrift); color:rgba(0,43,73,.72) }
.su-fuss{ display:flex; gap:14px; justify-content:center;
  padding:9px 12px; border-top:1px solid rgba(0,43,73,.10);
  font:600 10px/1 var(--kopf-schrift); color:rgba(0,43,73,.62) }
.su-fuss kbd{ font:700 10px/1 var(--kopf-schrift);
  border:1px solid rgba(0,43,73,.22); border-radius:5px;
  padding:3px 5px; margin-right:4px }
@media (max-width:620px){
  #panel-suche{ left:var(--kopf-luft); right:var(--kopf-luft); width:auto }
}

/* =====================================================================
   DIE EINSTIEGSSEITE AUF DEM TELEFON, gesetzt am 28.08.2026.

   Noahs Vorgabe, vier Punkte:
     1  Am Seitenanfang liegt NICHTS ueber dem Inhalt. Wie bei Netflix.
     2  Beim Scrollen faehrt ein weisser Kopf herein, fest an der Kante.
     3  Links das Lockup, rechts drei Zeichen: Lupe, Globus, drei Punkte.
     4  Flach. 56 Pixel.

   ZUR HOEHE, damit die Zahl belegt ist: an einem echten LinkedIn liess
   sie sich nicht messen, es liefert einem kopflosen Browser nur die
   Anmeldewand, Titel "LinkedIn: Log In or Sign Up", kein Element an der
   Oberkante. Statt zu schaetzen gilt deshalb Noahs eigene Festlegung:
   Bedienflaeche 44 am Rechner, 56 auf dem Telefon. 56 ist zugleich die
   flachste Hoehe, in der ein 44er Ziel mit Luft sitzt.

   Alles hier gilt NUR fuer die Einstiegsseite und NUR bis 820 Pixel.
   Die Apps und die Unterseiten bleiben unberuehrt.
   ===================================================================== */
@media (max-width:720px){
  /* BERICHTIGT am 28.08.2026 nach Noahs zweiter Vorgabe. Die erste
     Fassung blendete den Kopf am Seitenanfang aus, wie bei Netflix.
     Das ist aufgehoben: er steht von der ersten Sekunde an mit allen
     Elementen da, nur durchsichtig. Weiss wird er allmaehlich, waehrend
     das Scrollytelling zu Ende geht, ueber die Groesse --kopf-weiss,
     die der Antrieb je Bild zwischen 0 und 1 setzt. Kein Umschalten,
     ein Verlauf.

     HOEHE 44, AUSGEMESSEN und nicht mehr hergeleitet.

     Grundlage ist Noahs Bildschirmfoto von LinkedIn, 1080 mal 2340,
     Punkt fuer Punkt vermessen am 28.08.2026:
       Statusleiste endet             Zeile  75
       Suchpille, Oberkante           Zeile 118
       Suchpille, Unterkante          Zeile 207, also 89 Punkte hoch
       weisser Grund bis              Zeile 222
       grauer Zwischenraum ab         Zeile 225
     Unter der Pille bleiben 15 Punkte Luft. Dieselbe Luft darueber
     ergibt die Oberkante der Leiste bei Zeile 103, also 119 Punkte
     Hoehe. Bei einem Bildpunktverhaeltnis von 2,75, wie es ein
     Geraet mit 1080 Punkten Breite und 393 CSS-Pixeln hat, sind das
     43,3 CSS-Pixel. Die Suchpille misst 32.

     43 ist keine erlaubte Bedienflaeche, Abschnitt 9 verlangt
     mindestens 44. Genommen wird deshalb 44: eine Stufe ueber der
     Messung, und zugleich die Untergrenze der Regel. Naeher an
     LinkedIn geht nicht, ohne die eigene Regel zu brechen. */
  html[data-landing="1"] #kopf{
    left:0!important; right:0!important; top:0!important;
    width:100%!important; max-width:none!important;
    height:44px!important; min-height:44px!important;
    border-radius:0!important;
    background:rgba(255,255,255,var(--kopf-deckung,0))!important;
    border:0!important;
    border-bottom:1px solid rgba(0,43,73,calc(.12 * var(--kopf-deckung,0)))!important;
    box-shadow:none!important;
    /* Buendig zur Leiste des Browsers darueber. Dessen Zeichen sitzen
       rund zwoelf Pixel vom Rand. Bei einem Ziel von 40 und 4 Pixeln
       Luft steht das Zeichen genau dort. Links bleiben zwoelf, damit
       das Lockup nicht an der Kante klebt. */
    padding:0 4px 0 12px!important;
    transform:none; opacity:1; pointer-events:auto;
    transition:background .12s linear, border-color .12s linear;
  }
  /* Solange der Kopf durchsichtig ueber dem dunklen Hero liegt, muessen
     Zeichen und Schriftzug hell sein. Der Antrieb setzt kopf-hell,
     sobald --kopf-weiss unter der Haelfte liegt. */
  html[data-landing="1"].kopf-hell #kopf .kopf-icon{ color:#fff }
  html[data-landing="1"].kopf-hell #kopf .logo-bild{ filter:brightness(0) invert(1) }
  html[data-landing="1"] #kopf .kopf-icon,
  html[data-landing="1"] #kopf .logo-bild{ transition:color .2s linear, filter .2s linear }
  /* Das ZIEL misst 44 mal 44, wie Abschnitt 9 es ohne Ausnahme und
     ohne Richtung verlangt. Noah hat die ZEICHEN zu gross genannt,
     nicht die Flaechen: die Flaeche ist unsichtbar, das Zeichen darin
     sichtbar. 21 Pixel Zeichen in 44 mal 44 erfuellt beides. */
  html[data-landing="1"] #kopf-rechts{ gap:0!important }
  html[data-landing="1"] #kopf .kopf-icon{
    width:44px!important; height:44px!important; min-height:44px!important; padding:0!important;
  }
  html[data-landing="1"] #kopf .kopf-icon svg{ width:21px; height:21px }
  /* Rechts genau drei Zeichen. Anwendungsraster und Konto sind auf dem
     Telefon in das Vollbildmenue gewandert, sie stehen nicht zweimal. */
  /* Der Kopf traegt die Klasse kopf-web, nicht kopf-landing. Gemessen
     am 28.08.2026: die erste Fassung dieser Regeln griff deshalb nicht
     und es standen weiter fuenf Zeichen statt drei. Gekeyt wird an der
     Wurzel, sie traegt data-landing. */
  html[data-landing="1"] #btn-menue,
  html[data-landing="1"] #btn-profil,
  html[data-landing="1"] #btn-navburger{ display:none!important }
  html[data-landing="1"] #kopf #btn-mehr{ display:inline-flex!important }
  html[data-landing="1"] .kopf-icon{ width:44px; height:44px }
}
/* MIT VORRANG, sonst greift es nicht. Gemessen am 28.08.2026 mit
   LEEREM Zwischenspeicher bei 1920: die drei Punkte standen dort
   sichtbar, display grid. Es war also kein Zwischenspeicher, sondern
   diese Regel: eine blosse Kennung wiegt weniger als die Regel fuer
   .kopf-icon im Kopf, und die setzt display auf grid. */
#kopf #btn-mehr{ display:none !important }

/* ---- Das Lockup auf dem Telefon ------------------------------------
   Gemessen am 28.08.2026: auf 390 px stand links nur das Sonnenzeichen,
   26 mal 26. Der Schriftzug war ueber zwei Regeln in kopf.css
   ausgeblendet. Noahs Vorgabe lautet aber Lockup, also Zeichen UND
   Schriftzug.

   Der Platz reicht: drei Zeichen zu 44 Pixeln und die Luft nehmen
   rund 156, es bleiben ueber 200 fuer das Lockup. Bei 18 Pixeln
   Schrifthoehe misst es rund 165.

   bilder/schrift.webp ist die dunkle Fassung, sie steht am Rechner
   seit jeher auf demselben weissen Kopf. Die Dateien unter CI/ werden
   dafuer nicht gebraucht, und ein weisses Zeichen wird nirgends
   umgefaerbt. Das Lockup liegt direkt auf dem weissen Kopf, ohne
   Kasten, wie es das Paradigma verlangt. */
@media (max-width:720px){
  html[data-landing="1"] #kopf .logo-bild{ display:block!important; height:18px }
  html[data-landing="1"] #kopf .logo-zeichen{ width:26px; height:26px }
  html[data-landing="1"] #kopf .logo{ gap:7px; background:none; padding:0 }
}

/* ---- Das Vollbildmenue der drei Punkte ---------------------------- */
#panel-mehr{
  position:fixed; inset:0; z-index:2400; background:#fff;
  display:none; flex-direction:column; overflow-y:auto;
  padding:0 0 48px;
}
#panel-mehr.an{ display:flex }
html.menue-offen{ overflow:hidden }
.vm-kopf{
  position:sticky; top:0; background:#fff; z-index:2;
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid rgba(0,43,73,.12);
}
.vm-marke{ font:800 15px/1 var(--kopf-schrift); letter-spacing:.14em; color:var(--kopf-navy,#002B49) }
.vm-zu{ width:44px; height:44px; border:0; background:transparent; color:var(--kopf-navy,#002B49);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.vm-teil{ padding:24px 16px 8px }
.vm-teil h4{
  margin:0 0 8px; font:800 10px/1 var(--kopf-schrift); letter-spacing:.16em;
  text-transform:uppercase; color:var(--kopf-grau,#5b7183);
}
.vm-teil a{
  display:flex; align-items:center; min-height:56px;
  font:700 18px/1.2 var(--kopf-schrift); color:var(--kopf-navy,#002B49);
  text-decoration:none; border-bottom:1px solid rgba(0,43,73,.08);
}
.vm-teil a:last-child{ border-bottom:0 }
.vm-raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.vm-raster a{
  flex-direction:column; justify-content:center; gap:8px; text-align:center;
  border:0; min-height:96px; font-size:13px; font-weight:700;
}
.vm-raster img{ width:44px; height:44px }

/* =====================================================================
   DIE SUCHE UEBER DEN GANZEN BILDSCHIRM, 28.08.2026.
   Leiste in Kopfhoehe, darunter Filter, Vorschlaege, Komponenten.
   ===================================================================== */
#panel-suchvoll{
  position:fixed; inset:0; z-index:2500; background:#fff;
  display:none; flex-direction:column;
}
#panel-suchvoll.an{ display:flex }
html.suche-offen{ overflow:hidden }
.sv-leiste{
  height:44px; flex:none; display:flex; align-items:center; gap:8px;
  padding:0 4px 0 12px; border-bottom:1px solid rgba(0,43,73,.12);
  color:var(--kopf-navy,#002B49);
}
.sv-leiste .sv-lupe{ flex:none }
#sv-feld{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font:600 15px/1 var(--kopf-schrift); color:var(--kopf-navy,#002B49);
  -webkit-appearance:none;
}
#sv-feld::placeholder{ color:var(--kopf-grau,#5b7183) }
.sv-zu{
  width:44px; height:44px; flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--kopf-navy,#002B49); display:inline-flex; align-items:center; justify-content:center;
}
.sv-rumpf{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:48px }
.sv-filter{
  display:flex; gap:8px; padding:12px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(0,43,73,.08);
}
.sv-filter::-webkit-scrollbar{ display:none }
.sv-f{
  flex:none; min-height:36px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(0,43,73,.18); background:transparent;
  font:700 13px/1 var(--kopf-schrift); color:var(--kopf-navy,#002B49);
}
.sv-f.an{ background:var(--kopf-navy,#002B49); color:#fff; border-color:var(--kopf-navy,#002B49) }
.sv-liste{ padding:8px 0 }
.sv-liste a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:0 12px; text-decoration:none;
  font:700 15px/1.2 var(--kopf-schrift); color:var(--kopf-navy,#002B49);
  border-bottom:1px solid rgba(0,43,73,.08);
}
.sv-liste a.gross{ font-size:18px; color:var(--kopf-gold,#F4A900) }
.sv-art{ font:700 10px/1 var(--kopf-schrift); letter-spacing:.14em; text-transform:uppercase;
  color:var(--kopf-grau,#5b7183); flex:none }
.sv-leer{ padding:24px 12px; font:500 15px/1.5 var(--kopf-schrift); color:var(--kopf-grau,#5b7183) }
.sv-teil{ padding:24px 12px 8px }
.sv-teil h4{ margin:0 0 12px; font:800 10px/1 var(--kopf-schrift); letter-spacing:.16em;
  text-transform:uppercase; color:var(--kopf-grau,#5b7183) }
.sv-raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.sv-raster a{ text-decoration:none; color:var(--kopf-navy,#002B49) }
.sv-raster img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:16px; display:block }
.sv-raster span{ display:block; margin-top:6px; font:700 13px/1.2 var(--kopf-schrift) }
/* Solange die Suche offen ist, tritt der Kopf ab. Sonst stuende sein
   Lockup weiss auf dem weissen Behaelter und die Suchleiste laege
   dahinter. Gemessen am 28.08.2026: der Kopf liegt hoeher als 2500.
   Die Suchleiste sitzt an derselben Stelle und in derselben Hoehe, es
   fehlt also nichts. Dasselbe gilt fuer das Vollbildmenue. */
html.suche-offen #kopf,
html.menue-offen #kopf{ display:none!important }

/* Ein Zeichen, das seinen eigenen Grund mitbringt, fuellt den Platz.
   Die Klasse voll setzt kopf-website.js, nachdem es die Deckung des
   Bildes gemessen hat, nicht nach einer Liste von Dateinamen.
   Gesetzt am 28.08.2026. */
#panel-menue .appplatz.voll,
#panel-mehr .vm-raster a .appplatz.voll{
  background:none!important; padding:0!important; overflow:hidden;
}
#panel-menue .appplatz.voll img{
  width:100%!important; height:100%!important; border-radius:inherit; display:block;
}


/* Die Marke im Kopf mass 218 mal 30 Pixel. Sie ist ein Weg zur
   Startseite und damit ein Bedienelement. 30.08.2026. */
#kopf .marke,#kopf a.marke,#kopf .logo{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:760px){ #kopf .marke,#kopf a.marke,#kopf .logo{min-height:56px} }
/* Die runden Werkzeuge im Kopf, gemessen 40 mal 40. */
#kopf .kopf-icon{min-width:44px;min-height:44px}
@media (max-width:760px){ #kopf .kopf-icon{min-width:56px;min-height:56px} }