/* Kopfzeile der piform-Seiten: Burger, Menue (Glasleiste), Seitenname und Band (Kapitel + Lesefortschritt).
   Gemeinsamer Baustein (2026-10-16, Richard: "Baustein") – vorher als woertliche Kopie in jeder Seite. Herausgeloest aus
   technologie/index.html (Stand 64fb844f); Skript dazu: kopfzeile.js (im <head> einbinden, siehe dort).
   Einbinden VOR dem Seiten-<style>, damit eine Seite einzelne Regeln ueberschreiben kann.

   Eigenstaendig (seit 2026-10-16, fuer Landingpage, Impressum und Datenschutz mit eigenen Farben): Farben, Glas, Schrift
   und Tempi kommen aus den --kopf-*-Werten unten, nicht aus der Seite. Markup je Seite: #burger, #seitenname
   (darf fehlen, z. B. Landingpage), #leiste
   (.marke, .haupt – im Link der aktuellen Seite aria-current="page" und <span class="pille">, .knopf), #band (leer,
   das Skript fuellt es). Auf Seiten, die auch live ausgeliefert werden, steckt das Markup in <div id="kopfzeile" hidden>:
   Laedt dieses CSS nicht (der Server kennt den Ordner nicht), bleibt die Kopfzeile unsichtbar statt ungestaltet. */
@font-face{font-family:'Noto Sans';src:url('../landingpage/fonts/NotoSans-Latin1.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
#kopfzeile{display:contents}

/* Seitenwechsel ueber das Menue (Richard 2026-10-16: "dass die Kachel von Alles ueber PAFE auf Technologie rueberschiebt"):
   View Transition ueber Seitengrenzen (@view-transition, Chrome/Edge ab 126, Safari ab 18.2; Firefox wechselt ohne
   Uebergang – MDN, browser-compat-data 2026-10-16). Nur die Markierung der aktuellen Seite (.pille) hat einen Namen und
   gleitet von der alten zur neuen Lage. Die Seite selbst blendet weich ueber (Richard 2026-10-16: "nicht so hart
   schalten") – die Ueberblendung des Browsers, nur langsamer (0,6 s statt 0,25 s). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:ease}
::view-transition-group(kopf-pille){animation-duration:.6s;animation-timing-function:cubic-bezier(.5,0,.25,1)}

:root{
  --kopf-text:#eaf3f7;
  --kopf-text-2:#b4c9d3;
  --kopf-akzent:#01b6fd;
  --kopf-glas-bg:rgba(10,22,30,.55);
  --kopf-glas-rand:rgba(255,255,255,.14);
  --kopf-glas-blur:blur(30px) saturate(150%);
  --kopf-schrift:'Noto Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --kopf-t:.45s cubic-bezier(.22,1,.36,1);
  --kopf-auf:.35s cubic-bezier(.22,1,.36,1);
  --kopf-rand:calc(clamp(20px,4vw,120px) - 8px);   /* seitlich: wie --rand der Entwuerfe (Seitenrand - 8 px) */
  --oben:16px;                       /* oben: Abstand der Leiste vom Fensterrand, waechst nicht mit */
  --leiste-h:64px;
  --leiste-links:var(--kopf-rand);
  --burger:48px;
}
@media (prefers-reduced-motion:reduce){:root{--kopf-t:.01s linear;--kopf-auf:.01s linear}}

/* ================================================================ Burger */
/* Drei Striche, offen ein X. Bewegung nach uiverse.io/Ali-Tahmazi99/unlucky-termite-68: oberer und
   unterer Strich drehen um ihr linkes Ende, der mittlere gleitet nach links hinaus.
   Auf unsere Groesse gebracht: Kasten 26x20, Striche 3 px. Die Drehpunkte liegen 17 px uebereinander;
   bei 4,5 px Einzug und 24 px Laenge (17 x Wurzel 2) kreuzen sich die Striche genau in der Mitte. */
#burger{position:fixed;z-index:40;top:calc(var(--oben) + 8px);left:calc(var(--leiste-links) + 8px);margin:0;padding:0;
  width:var(--burger);height:var(--burger);border-radius:14px;display:grid;place-items:center;cursor:pointer;color:var(--kopf-text);
  background:var(--kopf-glas-bg);-webkit-backdrop-filter:var(--kopf-glas-blur);backdrop-filter:var(--kopf-glas-blur);
  border:1px solid var(--kopf-glas-rand);box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:background .3s,border-color .3s,box-shadow .3s}
/* Offen sitzt er in der Leiste und braucht kein eigenes Glas */
html.menue-offen #burger{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#burger:hover .striche span{background:#fff}
#burger .striche{position:relative;width:26px;height:20px}
#burger .striche span{position:absolute;left:0;width:26px;height:3px;border-radius:100px;background:var(--kopf-text);
  transform-origin:left center;transition:transform .3s ease,width .3s ease,left .3s ease,opacity .3s ease,background .2s}
#burger .oben{top:0}
#burger .mitte{top:8.5px}
#burger .unten{bottom:0}
#burger[aria-expanded="true"] .oben{transform:rotate(45deg);left:4.5px;width:24px}
#burger[aria-expanded="true"] .unten{transform:rotate(-45deg);left:4.5px;width:24px}
#burger[aria-expanded="true"] .mitte{transform:translateX(-12px);opacity:0}

/* ================================================================ Menue = Glasleiste oben */
/* Zu ist sie auf genau die Flaeche des Burgers zugeschnitten (clip-path) und unsichtbar; beim
   Oeffnen waechst sie aus dem Burger nach rechts auf, danach blenden die Eintraege ein. */
#leiste{position:fixed;z-index:30;top:var(--oben);left:var(--leiste-links);right:var(--kopf-rand);
  min-height:var(--leiste-h);border-radius:18px;font-family:var(--kopf-schrift);line-height:normal;
  display:flex;align-items:center;gap:28px;padding:0 14px 0 calc(var(--burger) + 32px);
  background:var(--kopf-glas-bg);-webkit-backdrop-filter:var(--kopf-glas-blur);backdrop-filter:var(--kopf-glas-blur);
  border:1px solid var(--kopf-glas-rand);box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path:inset(8px calc(100% - var(--burger) - 8px) calc(100% - var(--burger) - 8px) 8px round 14px);
  visibility:hidden;transition:clip-path var(--kopf-t),visibility 0s linear .45s}
html.menue-offen #leiste{clip-path:inset(0 0 0 0 round 18px);visibility:visible;transition:clip-path var(--kopf-t),visibility 0s}
#leiste > *{opacity:0;transition:opacity .15s}
html.menue-offen #leiste > *{opacity:1;transition:opacity .3s calc(.15s + var(--i,0) * .05s)}
#leiste .marke{display:block;flex:none;height:20px}
#leiste .marke img{height:100%;display:block}
#leiste .haupt{flex:1;display:flex;justify-content:center;gap:4px;min-width:0}
#leiste .haupt a{position:relative;padding:10px 14px;border-radius:999px;font-size:15px;color:var(--kopf-text-2);text-decoration:none;white-space:nowrap;transition:color .25s,background .25s}
#leiste .haupt a:hover{color:var(--kopf-text);background:rgba(255,255,255,.06)}
/* die Seite, auf der man gerade ist */
#leiste .haupt a[aria-current="page"]{color:var(--kopf-text);isolation:isolate}
/* Markierung als Glas-Pille statt des hellblauen Punkts (Richard, 2026-10-15; Strich und Verlaufslinie verworfen). Eigenes
   Element hinter der Schrift, damit sie beim Seitenwechsel allein von Menuepunkt zu Menuepunkt gleiten kann. */
#leiste .haupt .pille{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.10);view-transition-name:kopf-pille}
/* "Gespraech vereinbaren": vollstaendig hier gestaltet – die Landingpage hat ein eigenes, groesseres .knopf */
#leiste .knopf{flex:none;display:inline-block;margin:0;padding:10px 18px;border:0;border-radius:999px;background:var(--kopf-akzent);color:#03141b;
  font-size:14px;font-weight:600;line-height:normal;text-decoration:none;white-space:nowrap;transition:background .25s,box-shadow .25s}
#leiste .knopf:hover{background:#3cc8ff;box-shadow:0 0 24px rgba(1,182,253,.35)}

/* ================================================================ Band "Kompakt" */
#band{position:fixed;z-index:19;top:10px;left:50%;height:4px;display:flex;gap:6px;font-family:var(--kopf-schrift);
  transform:translate(-50%,0);transition:transform var(--kopf-t),opacity .3s,height var(--kopf-auf)}
/* Waehrend die Leiste offen ist, tritt das Band nach oben weg */
html.menue-offen #band{transform:translate(-50%,calc(-100% - 24px));opacity:0;pointer-events:none}
#band a{position:relative;display:block;flex:none;width:44px;min-width:0;text-decoration:none;border-radius:999px;
  background:rgba(234,243,247,.22);overflow:hidden;transition:width var(--kopf-auf),background .3s,box-shadow .3s}
#band .fuell{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);border-radius:inherit;background:var(--kopf-akzent);transition:background .3s}
/* Beschriftung liegt absolut: sie bestimmt nie die Groesse des Bands und faengt keine Klicks */
#band .etikett{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);text-align:center;
  font-size:13px;line-height:normal;color:var(--kopf-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .15s}
#band a[aria-current="true"] .etikett{font-weight:600}
#band.auf{height:34px}
#band.auf a{width:156px;background:var(--kopf-glas-bg);-webkit-backdrop-filter:var(--kopf-glas-blur);backdrop-filter:var(--kopf-glas-blur);
  box-shadow:inset 0 0 0 1px var(--kopf-glas-rand),0 10px 30px rgba(0,0,0,.4)}
#band.auf .fuell{background:rgba(1,182,253,.3)}
#band.auf .etikett{opacity:1;transition:opacity .2s .12s}
/* Einziehen nach dem Aufruf: langsam und deutlich (Breite, Hoehe, Glas), die Beschriftung geht zuerst */
#band.zieht-ein,#band.zieht-ein a{transition-duration:1.6s;transition-timing-function:cubic-bezier(.65,0,.35,1)}
#band.zieht-ein .etikett{transition:opacity .5s}
/* Greifzone (Richard 2026-10-15: man musste die Abschnitte genau treffen, "hat was von Shooter-Spielen"): die ganze
   Flaeche des Bands samt Luecken, der Streifen darueber bis zum Fensterrand und ein Rand seitlich und darunter zaehlen als
   Band. Liegt hinter den Abschnitten (z-index -1 im Band), faengt also keine Klicks auf sie ab. */
#band::after{content:"";position:absolute;z-index:-1;left:-28px;right:-28px;top:-10px;bottom:-22px}
/* Seiten ohne Kapitel (Landingpage, Impressum, Datenschutz): kein Band */
html.ohne-kapitel #band{display:none}

/* ================================================================ Ladestand */
/* Richard 2026-10-16 ("Ladebalken neben die Leiste"): Linie + Prozentzahl, die eine Seite ueber kopf.ladestand(0..1)
   meldet (Technologie: Licht, Papier und Faltkanten werden gerechnet). Zwei Stellen mit demselben Stand, das Skript legt
   sie beim ersten Melden an: #kopf-lade bei geschlossenem Menue rechts neben dem Band (32 px Abstand – ausserhalb der
   28-px-Greifzone des Bands, --lade-l setzt kopfLage), .kopf-lade in der Glasleiste vor „Gespraech vereinbaren“,
   solange das Menue offen ist. Vorher lag er unter dem Band und war beim Aufruf (Menue 3,5 s offen) nie zu sehen.
   Sperrt nichts, faengt keine Maus, blendet bei 100 % aus. */
.kopf-lade{display:flex;align-items:center;gap:12px;pointer-events:none;font-family:var(--kopf-schrift);line-height:normal}
.kopf-lade .balken{width:140px;height:2px;background:rgba(255,255,255,.12);border-radius:1px;overflow:hidden}
.kopf-lade .fuell{height:100%;width:0;background:var(--kopf-akzent);transition:width .15s linear}
.kopf-lade .zahl{min-width:4.5em;font-size:12px;letter-spacing:.2em;color:#7c94a2;white-space:nowrap}
#kopf-lade{position:fixed;z-index:19;left:var(--lade-l,320px);top:var(--kopf-mitte,40px);transform:translateY(-50%);transition:opacity .6s}
#kopf-lade.weg,html.menue-offen #kopf-lade{opacity:0}
#leiste .kopf-lade{flex:none}
html.menue-offen #leiste > .kopf-lade.weg{opacity:0}

@media (max-width:900px){
  :root{--oben:10px;--burger:44px}
  /* Leiste klappt als Liste unter dem Burger auf */
  #leiste{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 16px 18px 16px}
  #leiste .marke{height:18px;margin:13px 0 14px calc(var(--burger) + 18px)}
  #leiste .haupt{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  #leiste .haupt a{font-size:18px;padding:10px 4px}
  #leiste .haupt a[aria-current="page"]{padding:10px 12px;margin-left:-8px}
  #leiste .knopf{margin-top:10px}
  /* Band: mittig in der Flaeche rechts vom Burger, auf Hoehe seiner Mitte; Namen duerfen umbrechen */
  #band{gap:4px;top:40px;left:calc(50% + 31px)}
  #band a{width:11vw}
  #band.auf{height:40px}
  #band.auf a{width:calc((100vw - 108px) / var(--n,5))}
  #band .etikett{font-size:11px;line-height:1.2;white-space:normal;left:4px;right:4px}
  /* Ladestand: mittig unter der Kopfzeile wie bisher auf Technologie, Text darunter; nicht im aufgeklappten Menue */
  #kopf-lade{left:50%;top:56px;transform:translateX(-50%);flex-direction:column;gap:10px}
  #band.auf ~ #kopf-lade{top:92px}
  #kopf-lade .balken{width:min(360px,70vw)}
  #leiste .kopf-lade{display:none}
}
/* In der offenen Leiste ist die erste Zeile bis rund 1200 px schon voll: dort kein Ladestand */
@media (min-width:901px) and (max-width:1199px){#leiste .kopf-lade{display:none}}

/* ---------------------------------------------------------------- Kopfzeile: Burger, Seitenname und Band gehoeren zusammen */
/* Probe 2026-10-16 (Richard: Burger und Band "beissen sich", man ueberlegt, wohin man klicken muss): Geschlossen stehen
   Burger, Name der Seite und Band in EINER Zeile auf Hoehe der Burger-Mitte – grob nach fein wie ein Pfad (Menue >
   Seite > Kapitel). Beim Oeffnen tritt das Band nicht mehr nach oben weg, sondern rutscht als zweite Zeile in die
   Leiste. Stil des Bands (Striche, Glas-Pillen, Fuellung) bleibt unveraendert – nur der Ort aendert sich (Richard).
   Runde 2 (Richard 2026-10-16, Skizze): Menuepunkte linksbuendig hinter der Wortmarke statt mittig, „Gespraech
   vereinbaren" bleibt ganz rechts; die Kapitelzeile beginnt buendig unter dem Menuepunkt der aktuellen Seite. Ein Menue
   fuer alles: Klick auf den Seitennamen, Maus ueber dem Band oder Klick auf den Burger oeffnen dieselbe Leiste.
   --band-l (linke Kante des Bands neben dem Namen), --menue-dx (Versatz zur Lage in der Leiste) und --pille-m
   (Pillenbreite dort) setzt das Skript (kopfLage). Nur ab 901 px; schmale Fenster wie bisher (Handy-Fassung offen).
   Runde 3 (Richard 2026-10-16): Es geht IMMER das ganze Menue auf – das Band klappt breit nie mehr allein an Ort und
   Stelle auf (auch nicht beim Aufruf oder per Tastatur). Und man soll sehen, wie das Menue ausfaehrt: eine Dauer
   (--menue-d) und eine weiche Kurve (--menue-e) fuer Leiste, Band und Pillen gemeinsam; die Eintraege blenden erst
   ein, wenn die Leiste schon steht, der Seitenname kommt erst zurueck, wenn das Band wieder neben ihm liegt.
   Runde 4 (Richard 2026-10-16: "kompakter", zweite Zeile naeher an die erste, weniger Rahmen oben und unten): erste
   Zeile 56 statt 64 px (Burger 4 px vom Rand), Kapitelzeile 6 px unter den Menuepunkten, 6 px Rand darunter. */
#seitenname{display:none}
@media (min-width:901px){
  :root{--leiste-h:56px;--burger-v:calc((var(--leiste-h) - var(--burger)) / 2);--kopf-mitte:calc(var(--oben) + var(--leiste-h) / 2);
    --zeile2:38px;--menue-d:.9s;--menue-e:cubic-bezier(.5,0,.25,1)}
  /* Schliessen nach dem Aufruf: langsamer und deutlich (vorher 1,6 s fuers Band, Richard 2026-10-15) */
  html.langsam{--menue-d:1.4s}
  #burger{top:calc(var(--oben) + var(--burger-v))}
  #leiste .haupt{justify-content:flex-start}
  /* Knopf ohne eigene Optik; Klickflaeche reicht 8 px ueber die Schrift hinaus */
  #seitenname{display:block;position:fixed;z-index:19;left:calc(var(--leiste-links) + 8px + var(--burger) + 10px);top:var(--kopf-mitte);
    transform:translateY(-50%);margin:0;padding:10px 8px;border:0;background:none;font:inherit;font-family:var(--kopf-schrift);
    font-size:15px;line-height:normal;color:var(--kopf-text);cursor:pointer;
    white-space:nowrap;transition:opacity .3s calc(var(--menue-d) * .6),color .25s}
  #seitenname:hover{color:#fff}
  html.menue-offen #seitenname{opacity:0;pointer-events:none;transition:opacity .15s,color .25s}
  /* z-index bleibt beim Schliessen noch so lange oben, bis das Band zurueck ist (sonst laege es kurz unter dem Glas) */
  #band{left:var(--band-l,240px);top:var(--kopf-mitte);transform:translate(0,-50%);
    transition:transform var(--menue-d) var(--menue-e),opacity .3s,height var(--menue-d) var(--menue-e),z-index 0s linear var(--menue-d)}
  #band a{transition:width var(--menue-d) var(--menue-e),background .3s,box-shadow .3s}
  #band.auf .etikett{transition:opacity .3s calc(var(--menue-d) * .55)}
  #band.auf a{width:min(156px,calc((100vw - var(--band-l,240px) - var(--kopf-rand) - (var(--n,5) - 1) * 6px) / var(--n,5)))}
  /* Menue offen: Leiste bekommt eine zweite Zeile (die erste bleibt --leiste-h hoch und mittig), das Band liegt darin
     ueber dem Glas. Beim Schliessen behaelt die Leiste ihre Hoehe, bis sie auf den Burger zusammengezogen ist. */
  #leiste{clip-path:inset(var(--burger-v) calc(100% - var(--burger) - 8px) calc(100% - var(--burger) - var(--burger-v)) 8px round 14px);
    transition:clip-path var(--menue-d) var(--menue-e),visibility 0s linear var(--menue-d),
    min-height 0s linear var(--menue-d),padding-bottom 0s linear var(--menue-d)}
  html.menue-offen #leiste{transition:clip-path var(--menue-d) var(--menue-e),visibility 0s}
  html.menue-offen:not(.ohne-kapitel) #leiste{min-height:calc(var(--leiste-h) + var(--zeile2));padding-bottom:var(--zeile2)}
  html.menue-offen #leiste > *{transition:opacity .35s calc(var(--menue-d) * .35 + var(--i,0) * .07s)}
  /* Kapitelzeile: Oberkante der Pillen 2 px ueber dem Ende der ersten Zeile, also 6 px unter den Menuepunkten */
  html.menue-offen #band{z-index:35;opacity:1;pointer-events:auto;
    transform:translate(var(--menue-dx,0px),calc(var(--leiste-h) / 2 + 15px - 50%));
    transition:transform var(--menue-d) var(--menue-e),opacity .3s,height var(--menue-d) var(--menue-e),z-index 0s}
  html.menue-offen #band.auf a{width:var(--pille-m,156px)}
  /* Ankunft ueber das Menue einer anderen Seite: steht vom ersten Bild an offen, ohne Ausfahren (kopfzeile.js) */
  html.kopf-sofort #leiste,html.kopf-sofort #leiste > *,html.kopf-sofort #band,html.kopf-sofort #band a,html.kopf-sofort #band .etikett,
  html.kopf-sofort #seitenname,html.kopf-sofort #burger,html.kopf-sofort #burger .striche span{transition:none !important}
}