/* Neuer Stil · Bewegung (Prüffassung 04.11.2026) – ruhig, nüchtern, ohne Hüpfen */
:root{--mh-glas:rgba(250,249,245,.84);--mh-glas-rand:rgba(255,255,255,.7);--mh-glas-schatten:0 8px 28px rgba(20,28,45,.14)}
@media (prefers-color-scheme:dark){:root{--mh-glas:rgba(22,30,52,.82);--mh-glas-rand:rgba(255,255,255,.12)}}
.mh-dunkel{--mh-glas:rgba(22,30,52,.82);--mh-glas-rand:rgba(255,255,255,.12)}

/* Kopfzeile: klebt oben, Glas, wird beim Runterscrollen schmal */
.mh-kopf{position:sticky;top:0;z-index:30;background:var(--mh-glas)!important;-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border-bottom:1px solid transparent}
.mh-kopf.mh-schmal{border-bottom-color:var(--mh-glas-rand);box-shadow:0 2px 12px rgba(20,28,45,.06)}
.mh-kopf.mh-schmal .sub,.mh-kopf.mh-schmal #unter,.mh-kopf.mh-schmal .wer>span,.mh-kopf.mh-schmal #appUnter{opacity:0;max-height:0;overflow:hidden}
.mh-kopf .sub,.mh-kopf #unter,.mh-kopf .wer>span,.mh-kopf #appUnter{max-height:3em;display:block}
.mh-kopf.mh-schmal h1,.mh-kopf.mh-schmal .wer b,.mh-kopf.mh-schmal #appName{font-size:17px}
.mh-kopf.mh-schmal .av,.mh-kopf.mh-schmal img,.mh-kopf.mh-schmal>svg{transform:scale(.72)}
.mh-kopf.mh-schmal{padding-top:calc(6px + env(safe-area-inset-top))!important;padding-bottom:6px!important}

/* Hauptaktion: Dock unten im Daumenbereich, Glas */
.mh-dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;width:min(520px,calc(100% - 28px));padding:8px;border-radius:36px;background:var(--mh-glas);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--mh-glas-rand);box-shadow:var(--mh-glas-schatten);transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
.mh-dock.an{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mh-dock>*{width:100%;margin:0!important}
#leiste.mh-glas{background:var(--mh-glas)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-top:1px solid var(--mh-glas-rand)}

/* Kurzer Hinweis unten statt Popup */
.mh-hinweis{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;max-width:min(440px,calc(100% - 32px));padding:12px 18px;border-radius:16px;background:rgba(27,42,74,.92);color:#fff;font-size:16px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translate(-50%,12px);opacity:0;pointer-events:none}
.mh-hinweis.an{transform:translate(-50%,0);opacity:1}

/* Pinselstrich zeichnet sich beim ersten Erscheinen */
html.mh-bew .mh-strich::after,html.mh-bew .strich::after{animation:none;transform:scaleX(0)}
html.mh-bew .mh-strich.mh-sicht::after,html.mh-bew .strich.mh-sicht::after{transform:scaleX(1)}

/* Sanftes Einblenden */
html.mh-bew .mh-weich{opacity:0;transform:translateY(10px)}
html.mh-bew .mh-weich.mh-da{opacity:1;transform:none}

/* Blätter von unten */
@keyframes mhBlatt{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:no-preference){
  .mh-kopf,.mh-kopf .sub,.mh-kopf #unter,.mh-kopf .wer>span,.mh-kopf h1,.mh-kopf .wer b,.mh-kopf .av,.mh-kopf img,.mh-kopf>svg,.mh-kopf #appUnter,.mh-kopf #appName{transition:all .28s cubic-bezier(.2,.7,.2,1)}
  .mh-dock{transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .24s ease}
  .mh-hinweis{transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
  html.mh-bew .mh-strich::after,html.mh-bew .strich::after{transition:transform .7s cubic-bezier(.3,.6,.2,1) .08s}
  html.mh-bew .mh-weich{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .blatt-hg:not([hidden]) .blatt,.mh-start .blatt,dialog[open]{animation:mhBlatt .3s cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
main.wrap>header.mh-kopf{margin-inline:-16px;padding:10px 16px}