/* Menue am Handy (Michael 20.09.2026, Vorschlag C): der Kopf klebt oben, faehrt beim Scrollen von
   der grossen Leiste (GEBHARD + Menue) zu einer schmalen zusammen -- Signet links, Hamburger
   rechts. Der Hamburger oeffnet einen Vollbild-Glasschirm mit grossen Titeln (Cormorant).
   --mm-kp (0 gross, 1 schmal) setzt menue-mobil.js aus dem Scrollweg; --mm-voll ist die
   natuerliche Hoehe des grossen Kopfes. Ab 810 px passiert hier nichts (dort gilt probe-kopf.css). */
.mm-ham,.mm-voll{display:none}
@media (max-width:809px){
  /* Galerie fliegt aus dem Handy-Menue (Michael 20.09.2026): vier Punkte stehen in EINER Zeile */
  header.kopf .seitenmenue a[href="#galerie"]{display:none}
  html[data-mm] header.kopf .seitenmenue{flex-wrap:nowrap;justify-content:space-between;gap:0 8px;padding-left:20px;padding-right:20px;white-space:nowrap}
  .kopf-signet{display:none}   /* ohne data-mm ungestylt = 430 px hoch (Messung des grossen Kopfes) */
  html[data-mm]{--mm-kp:0;--mm-min:58px}
  html[data-mm] body{padding-top:var(--mm-voll,160px)}
  html[data-mm] .kopf{position:fixed;top:0;left:0;right:0;z-index:70;
    height:calc(var(--mm-voll,160px) - (var(--mm-voll,160px) - var(--mm-min)) * var(--mm-kp));overflow:hidden;
    background:linear-gradient(180deg, color-mix(in srgb, rgba(250,247,242,.86) calc(var(--mm-kp) * 100%), #F3EEE7), color-mix(in srgb, rgba(241,236,228,.78) calc(var(--mm-kp) * 100%), #F3EEE7));
    -webkit-backdrop-filter:blur(calc(var(--mm-kp) * 24px)) saturate(calc(1 + var(--mm-kp) * .1)) brightness(calc(1 + var(--mm-kp) * .06));
    backdrop-filter:blur(calc(var(--mm-kp) * 24px)) saturate(calc(1 + var(--mm-kp) * .1)) brightness(calc(1 + var(--mm-kp) * .06));
    border-bottom:1px solid color-mix(in srgb, rgba(53,48,43,.10) calc(var(--mm-kp) * 100%), #E6DFD4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,calc(var(--mm-kp) * .9)),inset 0 -1px 0 rgba(255,255,255,calc(var(--mm-kp) * .55)),0 14px 30px -20px rgba(16,13,11,calc(var(--mm-kp) * .38))}
  /* gross: verschwindet beim Zusammenfahren */
  html[data-mm] .kopf .wortmarke{opacity:calc(1 - var(--mm-kp) * 1.7);transform:translateY(calc(var(--mm-kp) * -12px)) scale(calc(1 - var(--mm-kp) * .1));filter:blur(calc(var(--mm-kp) * 4px))}
  html[data-mm] .kopf .seitenmenue{opacity:calc(1 - var(--mm-kp) * 2);filter:blur(calc(var(--mm-kp) * 3px))}
  html[data-mm] .kopf .sprache{opacity:calc(1 - var(--mm-kp) * 5)}   /* 20.09.2026: DE/EN/NL war noch sichtbar, wenn WANDERN schon darueber lag */
  html[data-mm] .kopf.mm-schmal .wortmarke,html[data-mm] .kopf.mm-schmal .seitenmenue,html[data-mm] .kopf.mm-schmal .sprache{pointer-events:none}
  /* klein: Signet links, Hamburger rechts, beide mittig in der schmalen Leiste */
  html[data-mm] .kopf-signet{position:absolute;display:block;left:20px;top:calc(var(--mm-min) / 2 - 14px);width:28px;height:28px;
    opacity:calc((var(--mm-kp) - .4) / .6);transform:translateY(calc((1 - var(--mm-kp)) * 8px));pointer-events:none}
  html[data-mm] .kopf.mm-schmal .kopf-signet{pointer-events:auto}
  html[data-mm] .kopf-signet svg{display:block;width:100%;height:100%;overflow:visible}
  html[data-mm] .kopf-signet svg *{stroke:#3D3733}
  html[data-mm] .mm-ham{display:block;position:absolute;right:6px;top:calc(var(--mm-min) / 2 - 22px);width:48px;height:44px;border:0;padding:0;background:none;
    cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:calc((var(--mm-kp) - .5) / .5);pointer-events:none}
  html[data-mm] .kopf.mm-schmal .mm-ham,html.mm-offen .mm-ham{pointer-events:auto}
  .mm-ham i{position:absolute;left:14px;right:14px;height:1.5px;background:#3D3733;transition:transform .32s cubic-bezier(.23,1,.32,1),opacity .16s ease-out}
  .mm-ham{transition:transform .12s ease-out}.mm-ham:active{transform:scale(.9)}
  .mm-ham i:nth-child(1){top:16px}.mm-ham i:nth-child(2){top:21px}.mm-ham i:nth-child(3){top:26px}
  html.mm-offen .mm-ham i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  html.mm-offen .mm-ham i:nth-child(2){opacity:0}
  html.mm-offen .mm-ham i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  /* offen: Kopf wird durchsichtig, das Glas liegt darunter */
  html.mm-offen{overflow:hidden}
  html.mm-offen[data-mm] .kopf{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
  html.mm-offen[data-mm] .kopf-signet{opacity:1;transform:none;pointer-events:auto}
  /* Emil-Kowalski-Regeln: das Glas waechst aus dem Hamburger (Ursprung = Ausloeser), starke
     Ease-out-Kurve, Einfahren 420 ms, Schliessen schneller (200 ms), Titel gestaffelt (45 ms)
     mit leichter Unschaerfe als Bruecke, Auslassen der Staffel beim Schliessen. Keine Skalierung
     von 0: der Kreis startet bei Knopfgroesse. Nur clip-path, transform, opacity, filter. */
  .mm-voll{--o:cubic-bezier(.23,1,.32,1);--mx:calc(100% - 30px);--my:29px;
    display:flex;position:fixed;inset:0;z-index:65;flex-direction:column;justify-content:center;padding:96px 34px 34px;
    background:rgba(243,238,231,.6);-webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(1.05);backdrop-filter:blur(34px) saturate(1.5) brightness(1.05);
    clip-path:circle(22px at var(--mx) var(--my));opacity:0;visibility:hidden;
    transition:clip-path .2s var(--o),opacity .16s ease-out,visibility 0s linear .2s}
  html.mm-offen .mm-voll{clip-path:circle(150vmax at var(--mx) var(--my));opacity:1;visibility:visible;
    transition:clip-path .48s var(--o),opacity .2s ease-out,visibility 0s}
  .mm-voll a.mm-p{display:block;text-align:center;text-decoration:none;color:#211F1E;padding:11px 0;
    font:300 44px/1.05 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em;
    transform:translateY(14px);opacity:0;filter:blur(3px);
    transition:transform .16s ease-out,opacity .16s ease-out,filter .16s ease-out}
  html.mm-offen .mm-voll a.mm-p{transform:none;opacity:1;filter:none;
    transition:transform .42s var(--o,cubic-bezier(.23,1,.32,1)),opacity .34s ease-out,filter .34s ease-out}
  html.mm-offen .mm-voll a.mm-p:nth-child(1){transition-delay:90ms}
  html.mm-offen .mm-voll a.mm-p:nth-child(2){transition-delay:135ms}
  html.mm-offen .mm-voll a.mm-p:nth-child(3){transition-delay:180ms}
  html.mm-offen .mm-voll a.mm-p:nth-child(4){transition-delay:225ms}
  html.mm-offen .mm-voll a.mm-p:nth-child(5){transition-delay:270ms}
  html.mm-offen .mm-voll .mm-sp{opacity:1;transform:none;transition-delay:340ms}
  .mm-voll a.mm-p:active{transform:scale(.97);transition-duration:.1s;transition-delay:0s}
  .mm-sp{margin-top:26px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .16s ease-out,transform .16s ease-out;font:500 14px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.2em;color:#8a847a}
  .mm-sp a{color:inherit;text-decoration:none;padding:10px 6px}.mm-sp a[aria-current]{color:#211F1E}
  .mm-sp span{margin:0 2px}
  /* Vorschau ?menue=B: das Menue bleibt in der schmalen Leiste (vier Punkte in einer Zeile),
     Signet links, kein Hamburger. Die Leiste wird nur auf 72 px zusammengeschoben -- nicht zu klein. */
  html[data-mmv="B"]{--mm-min:72px}
  html[data-mmv="B"] header.kopf .seitenmenue{opacity:1;filter:none;pointer-events:auto;
    transform:translateY(calc(var(--mm-kp) * var(--mm-nav-dy,61px) * -1));
    padding-left:calc(20px + (var(--mm-nav-x,66px) - 20px) * var(--mm-kp));padding-right:calc(20px + (var(--mm-nav-r,20px) - 20px) * var(--mm-kp));gap:0 calc(8px + var(--mm-kp) * 4px)}
  html[data-mmv="B"] header.kopf .seitenmenue a{letter-spacing:calc(.09em - var(--mm-kp) * .05em);font-size:calc(12.5px - var(--mm-kp) * .5px)   /* schmale Leiste: 11,5 px (Michael 20.09.2026: "Schrift etwas groesser") */}
  html[data-mmv="B"] header.kopf.mm-schmal .seitenmenue{pointer-events:auto;justify-content:space-between}
  html[data-mmv="B"] header.kopf .seitenmenue a:last-child{margin-right:calc(var(--mm-kp) * -.07em)}
  html[data-mmv="B"] .kopf-signet{left:calc(20px + (var(--mm-sig-x,20px) - 20px) * var(--mm-kp));top:calc(var(--mm-min) / 2 - 14px + (var(--mm-sig-y,22px) - (var(--mm-min) / 2 - 14px)) * var(--mm-kp))}
  html[data-mmv="B"] .mm-ham{display:none}
  /* Anker landen unter der schmalen Leiste: scroll-margin-top = 58 + 24 - Innenabstand */
  html[data-mm] .abschnitt{scroll-margin-top:-6px}
  html[data-mm] .inklusive,html[data-mm] .buchen{scroll-margin-top:-30px}
  html[data-mm] .auftakt{scroll-margin-top:24px}
}
/* weniger Bewegung: nur Ein- und Ausblenden, kein Kreis, keine Verschiebung */
@media (prefers-reduced-motion:reduce){
  .mm-voll,html.mm-offen .mm-voll{clip-path:none;transition:opacity .2s ease}
  .mm-voll a.mm-p,html.mm-offen .mm-voll a.mm-p{transform:none;filter:none;transition:opacity .2s ease;transition-delay:0s}
  .mm-ham i{transition:none}
}