:root { --mh-h: 72px; --mh-toolbar: 0px; }

body.ccm-toolbar-visible{
    --mh-toolbar: 49px;
}

.mh-header{
    position: fixed; top:0; left:0; right:0; height:var(--mh-h);
    display:grid; place-items:center;
    background: transparent;
    transition: background-color .25s, box-shadow .25s, backdrop-filter .25s;
    z-index: 1000;
}
.mh-header.is-scrolled{
    background: var(--mh-bg, rgba(245,246,248,.92));
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    backdrop-filter: saturate(120%) blur(6px);
}
.ccm-edit-mode .mh-header{ position: relative; }

.mh-inner{
    width: min(1100px, 92vw);
    display:grid;
    grid-template-columns: auto 1fr auto;
    gap: 50px;
}

.mh-brand{ justify-self:start; display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.mh-brand img{ height:28px; width:auto; display:block; }

.mh-nav{ display:flex; gap: clamp(18px,4vw,44px); justify-content:center; }
.mh-nav a{ color:#111; text-decoration:none; font-weight:500; position:relative; padding:4px 0; }
.mh-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#111;
    opacity:0; transform:scaleX(.4); transition:.2s;
}
.mh-nav a:hover::after{ opacity:1; transform:scaleX(1); }

.mh-cta{
    justify-self:end; background:#111; color:#fff; text-decoration:none; font-weight:700;
    padding:10px 18px; border-radius:999px; transition:.15s;
}
.mh-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.15); }


[id]{ scroll-margin-top: calc(var(--mh-h) + 16px); }


html{ scroll-behavior:smooth; }

.mh-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.mh-row input[type=text]{width:100%}
.mh-repeater{margin-top:8px}




.mh-actions{
    display:flex;
    gap:12px;
    align-items:center;
    /*margin-left:auto;*/
justify-content: flex-end;
}
.mh-burger{
    display:none;
    background:transparent; border:0; padding:8px; line-height:0; cursor:pointer; border-radius:8px;
}
.mh-burger:focus-visible{ outline:2px solid #111; outline-offset:2px; }


@media (max-width: 900px){
    .mh-nav{ display:none; }
    .mh-burger{ display:inline-flex; }
}


.mh-menu[hidden]{ display:none; }
.mh-menu{ position:fixed; inset:0; z-index:1100; }


.mh-menu__backdrop{
    position:absolute; inset:0; background: rgba(0,0,0,.35);
    opacity:0; transition: opacity .2s ease;
}


.mh-menu__panel{
    position:absolute; left:0; right:0; top:0;
    background: var(--mh-bg, #fff);
    transform: translateY(-100%); transition: transform .25s ease;
    padding-top: calc(var(--mh-h) + 10px); /* Platz für fixen Header */
    box-shadow: 0 24px 48px rgba(0,0,0,.15);
}

.mh-menu.is-open .mh-menu__backdrop{ opacity:1; }
.mh-menu.is-open .mh-menu__panel{ transform: translateY(0); }


.mh-menu__head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px; border-bottom:1px solid rgba(0,0,0,.08);
}
.mh-menu__title{ font-weight:700; }
.mh-menu__close{
    background:transparent; border:0; padding:8px; line-height:0; cursor:pointer; border-radius:8px;
}
.mh-menu__close:focus-visible{ outline:2px solid #111; outline-offset:2px; }


.mh-menu__list{ list-style:none; margin:0; padding: 8px 0 16px; }
.mh-menu__list li{ border-bottom:1px solid rgba(0,0,0,.06); }
.mh-menu__list a{
    display:block; padding: 14px 18px; text-decoration:none; color:#111; font-weight:600;
}
.mh-menu__list a:hover{ background: rgba(0,0,0,.04); }


.mh-lock{ overflow:hidden; }