/* Probe 19.09.2026: Kopfleiste wird ab dem ersten Bild schmal, die Typo GEBHARD geht,
   links kommt das Signet. Drei Fassungen, Schalter ?kopf=K1|K2|K3.
   Nur ab 810 px: am Handy klebt der Kopf gar nicht (stil.css), dort bleibt alles wie es ist.

   Michael 19.09.2026 zu K1: "nicht so schnell, smoother, sanfter, luxurioeser, grosszuegiger".
   Darum kein Umschalten auf Zeit mehr, sondern an den Scroll gekoppelt: --kp laeuft ueber
   280 px Scrollweg von 0 (gross) bis 1 (schmal), gedaempft nachgezogen (probe-kopf.js).
   Die Leiste folgt der Hand, statt nach einem Klick loszufahren.

   Der Kopf wird "fixed" und die Seite bekommt oben die volle Kopfhoehe als Abstand. Sonst
   wuerde das Schrumpfen den ganzen Inhalt darunter mitziehen. */
@media (min-width:810px){
  html[data-kopf]{--kp:0;--k-h:76px;--k-s:32px}
  html[data-kopf="K2"]{--k-h:64px;--k-s:28px}
  html[data-kopf="K3"]{--k-h:60px;--k-s:26px}

  html[data-kopf] .kopf{position:fixed;top:0;left:0;right:0}
  html[data-kopf] body{padding-top:var(--kopf-voll,175px)}

  /* Abgeleitete Kurven: die Typo ist schon bei 55 % weg, das Signet kommt erst ab 40 % --
     kurz ueberlappen beide, nie ist die Leiste leer, nie stehen beide voll da. */
  html[data-kopf] .kopf{--k-weg:clamp(0, calc(var(--kp) / .55), 1);--k-da:clamp(0, calc((var(--kp) - .4) / .6), 1)}

  /* Typo GEBHARD: steigt nach oben weg, wird unscharf und blass. Dreifache Klasse, damit die
     Einblendung aus bewegung.js (.bw-steigt.bw-da) nicht dazwischenfunkt. */
  html[data-kopf] .kopf .wortmarke.wortmarke.wortmarke{overflow:hidden;
    max-height:calc((var(--wm-h,46px) + 62px) * (1 - var(--kp)));   /* border-box: max-height schliesst die 40 + 22 px Polster ein */
    padding-top:calc(40px * (1 - var(--kp)));padding-bottom:calc(22px * (1 - var(--kp)))}
  /* Erst sobald die Leiste sich bewegt -- sonst wuerde die Einblendung beim Laden ueberschrieben */
  html[data-kopf] .kopf[data-kp="1"] .wortmarke.wortmarke.wortmarke{transition:none;
    opacity:calc(1 - var(--k-weg));filter:blur(calc(var(--k-weg) * 8px));
    transform:translateY(calc(var(--k-weg) * -16px)) scale(calc(1 - var(--k-weg) * .06))}

  /* Menue: rutscht in die Mitte der schmalen Leiste */
  html[data-kopf] .kopf .seitenmenue{
    padding-top:calc(10px + ((var(--k-h) - 20px) / 2 - 10px) * var(--kp));
    padding-bottom:calc(36px + ((var(--k-h) - 20px) / 2 - 36px) * var(--kp))}

  /* Sprachwahl: rechte Kante = rechte Kante des Bildes rechts oben (a2), misst probe-kopf.js.
     Trenner als senkrechter Haarstrich statt Schraegstrich (Michael 19.09.2026: "Schraegstriche gerade"). */
  html[data-kopf] .kopf .sprache{top:calc(53px + ((var(--k-h) - 20px) / 2 - 53px) * var(--kp));right:var(--k-sprache-r,var(--rand))}
  html[data-kopf] .kopf .sprache span{font-size:0;width:1px;height:9px;background:#d6d0c6;align-self:center;margin:0 2px 0 -.2px}   /* px, nicht em: font-size 0. Links 2,2 px weniger, weil die Laufweite hinter jedem Wort schon 2,2 px anhaengt -- so beidseits 8 px */

  /* Signet: das echte (Altseiten-SVG), Strich 6,5 = Favicon-Fassung, weil 4 bei 32 px zu duenn wird.
     Linke Kante = linke Bildkante darunter (Michael 19.09.2026), misst probe-kopf.js. */
  .kopf-signet{position:absolute;left:var(--k-signet-x,var(--rand));top:50%;width:var(--k-s);height:var(--k-s);display:block;
    opacity:var(--k-da);transform:translateY(-50%) scale(calc(.9 + var(--k-da) * .1));
    filter:blur(calc((1 - var(--k-da)) * 3px));transform-origin:0 50%}
  .kopf-signet svg{display:block;width:100%;height:100%;overflow:visible}
  .kopf-signet svg *{stroke:var(--k-signet,#3D3733)}
  html[data-kopf] .kopf[data-kp="0"] .kopf-signet{pointer-events:none;visibility:hidden}

  /* K2 Zeile: Signet, Haarstrich, Menue ruecken nach links zusammen */
  html[data-kopf="K2"] .kopf-signet::after{content:"";position:absolute;left:calc(100% + 26px);top:50%;width:1px;height:18px;
    background:#CFC7BB;transform:translateY(-50%)}
  html[data-kopf="K2"] .kopf .seitenmenue{transform:translateX(calc(var(--nav-dx,0px) * var(--kp)))}

  /* K3 Dunkel: blendet in die Flaeche des Buchungsbalkens ueber */
  html[data-kopf="K3"] .kopf.bw-glas,html[data-kopf="K3"] .kopf{
    background:color-mix(in srgb, rgba(53,48,43,.88) calc(var(--kp) * 100%), rgba(243,238,231,.72));
    border-bottom-color:color-mix(in srgb, transparent calc(var(--kp) * 100%), #E6DFD4)}
  html[data-kopf="K3"] .kopf{--k-signet:color-mix(in srgb, #F6F2EA calc(var(--kp) * 100%), #3D3733)}
  html[data-kopf="K3"] .kopf .seitenmenue a{color:color-mix(in srgb, #E4DDD2 calc(var(--kp) * 100%), #706b64)}
  html[data-kopf="K3"] .kopf .sprache a{color:color-mix(in srgb, #9C958B calc(var(--kp) * 100%), #b3ada3)}
  html[data-kopf="K3"] .kopf .sprache a[aria-current]{color:color-mix(in srgb, #F6F2EA calc(var(--kp) * 100%), #3D3733)}
}

/* Schalter der Probe */
.k-wahl{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:0;background:#35302B;
  font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.18em}
.k-wahl a{color:#9C958B;text-decoration:none;padding:12px 14px}
.k-wahl a[aria-current]{color:#F6F2EA;background:#4A443E}

/* Handy: das Signet steuert menue-mobil.css (klebender Kopf, Vorschlag C, 20.09.2026). */

/* Tablet 810-1099 px: WANDERN lag ueber DE/EN/NL, sobald die Leiste schmal ist (Michael 20.09.2026).
   Das Menue sitzt mittig und ist dort breiter als der Platz zwischen Signet und Sprachwahl. */
@media (min-width:810px) and (max-width:1099px){
  html[data-kopf] .kopf .seitenmenue{gap:8px 16px}
  html[data-kopf] .kopf .seitenmenue a{letter-spacing:.16em}
}