/* Kopf und Fuß nach Entwurf Abflug. Farben und Schriften nur aus theme.json, Zwischentöne --mg-grund-… aus abflug.css. */
:root{--mg-kopf-rand:clamp(16px,3vw,40px);--mg-leiste:var(--wp-admin--admin-bar--height,0px);--mg-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Kopf, Inhalt und Fuß stoßen ohne Blockabstand aneinander, der Kopf liegt fest darüber */
.wp-site-blocks>*{margin-block:0}

/* Kopf: liegt über dem Bild, wird beim Scrollen dunkel */
.mg-kopf{position:fixed;top:var(--mg-leiste);left:0;right:0;z-index:60;margin:0;padding:16px var(--mg-kopf-rand);transition:background-color .3s,padding .3s}
.mg-kopf.gescrollt{background:var(--mg-grund-92);padding-top:10px;padding-bottom:10px}
.mg-logo{margin:0;flex:none}
.mg-logo img{display:block;height:auto}
.mg-nav .wp-block-navigation__container{gap:4px}
.mg-nav .wp-block-navigation-item__content{display:block;padding:10px 14px;color:var(--wp--preset--color--text);text-decoration:none}
.mg-nav .wp-block-navigation-item__content:hover,.mg-nav .current-menu-item>.wp-block-navigation-item__content{color:var(--wp--preset--color--akzent)}
.mg-nav-knopf{margin:0 0 0 12px}
.mg-nav-knopf .wp-block-button__link{min-height:44px;padding-top:0;padding-bottom:0}

/* Knopf mit Pfeil */
.mg-pfeil .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.mg-pfeil .wp-block-button__link::after{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--mg-pfeil) center/contain no-repeat;mask:var(--mg-pfeil) center/contain no-repeat;transition:transform .2s}
.mg-pfeil .wp-block-button__link:hover::after{transform:translateX(4px)}

/* Handy (unter 820 px): schwebende Leiste mit Logo, „Anfragen“ (leiser Umriss mit Pfeil, Akzent erst bei Berührung) und „Menü“; „Menü“ öffnet die dunkle Fläche (seite.js).
   Die Fläche liegt im Kopf unter der Leiste, die Pille malt ::before, damit sie über der Fläche bleibt. */
.mg-handy{display:none}
@media (max-width:820px){
  .mg-kopf,.mg-kopf.gescrollt{top:calc(var(--mg-leiste) + 10px);left:10px;right:10px;padding:6px 6px 6px 18px;background:none;transition:none}
  .mg-kopf::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border:1px solid var(--wp--preset--color--linie);border-radius:999px;background:var(--mg-grund-90);box-shadow:0 8px 28px var(--mg-grund-50)}
  .mg-logo{position:relative;z-index:2;flex:0 1 auto;min-width:0}
  .mg-logo img{width:min(130px,32vw)!important}
  .mg-kopf .mg-nav{display:none}
  .mg-handy{display:flex;align-items:center;gap:4px;margin:0}
  .mg-handy-anfragen,.mg-handy-knopf{position:relative;z-index:2}
  .mg-handy-anfragen{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;color:var(--wp--preset--color--text-leise);font-family:var(--wp--preset--font-family--text);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
  .mg-handy-anfragen::before{content:"";position:absolute;top:5px;right:0;bottom:5px;left:0;border:1px solid var(--mg-linie-kraeftig);border-radius:999px;transition:border-color .2s}
  .mg-handy-anfragen::after{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--mg-pfeil) center/contain no-repeat;mask:var(--mg-pfeil) center/contain no-repeat}
  .mg-handy-anfragen:hover,.mg-handy-anfragen:active{color:var(--wp--preset--color--akzent)}
  .mg-handy-anfragen:hover::before,.mg-handy-anfragen:active::before{border-color:var(--wp--preset--color--akzent)}
  .mg-handy-knopf{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:54px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--wp--preset--color--text);cursor:pointer}
  .mg-handy-striche{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:12px}
  .mg-handy-striche span{display:block;height:2px;border-radius:2px;background:currentColor}
  .mg-handy-wort{font-family:var(--wp--preset--font-family--technik);font-size:9px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
  .mg-handy-offen .mg-handy-striche span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .mg-handy-offen .mg-handy-striche span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mg-handyflaeche{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;flex-direction:column;padding:calc(var(--mg-leiste) + 96px) 20px 32px;background:var(--wp--preset--color--hintergrund);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden}
  .mg-handy-offen .mg-handyflaeche{opacity:1;visibility:visible}
  .mg-handyflaeche:focus{outline:none}
  .mg-bewegt .mg-handyflaeche{transition:opacity .2s ease,visibility 0s linear .2s}
  .mg-bewegt .mg-handy-offen .mg-handyflaeche{transition:opacity .2s ease}
  .mg-bewegt .mg-handy-striche span{transition:transform .2s ease}
  .mg-handy-nav ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--wp--preset--color--linie)}
  .mg-handy-nav li{margin:0;border-bottom:1px solid var(--wp--preset--color--linie)}
  .mg-handy-nav a{display:flex;align-items:baseline;gap:16px;padding:16px 0;color:var(--wp--preset--color--text);text-decoration:none}
  .mg-handy-nav a[aria-current="page"],.mg-handy-nav a:hover{color:var(--wp--preset--color--akzent)}
  .mg-handy-nr{flex:none;min-width:2.4ch;font-family:var(--wp--preset--font-family--technik);font-size:var(--wp--preset--font-size--mini);letter-spacing:.1em;color:var(--wp--preset--color--akzent)}
  .mg-handy-name{font-family:var(--wp--preset--font-family--ueberschrift);font-size:calc(var(--wp--preset--font-size--liste) * 1.25);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05}
  .mg-handy-cta{margin:32px 0 0}
  .mg-handy-cta .wp-block-button__link{display:flex;width:100%;min-height:56px}
  /* Telefon und Mail stehen mittig am unteren Rand der Fläche, untereinander */
  .mg-handy-kontakt{display:flex;flex-direction:column;align-items:center;gap:2px;margin:auto 0 0;padding-top:28px;text-align:center;font-family:var(--wp--preset--font-family--technik);font-size:var(--wp--preset--font-size--klein);letter-spacing:.04em;line-height:1.6}
  .mg-handy-kontakt a{display:inline-block;padding:8px 4px;color:var(--wp--preset--color--text-leise);text-decoration:none}
  .mg-handy-kontakt a:hover,.mg-handy-kontakt a:active{color:var(--wp--preset--color--akzent)}
}
@media (max-width:360px){
  .mg-kopf,.mg-kopf.gescrollt{padding-left:14px}
  .mg-handy-anfragen{padding:0 11px;letter-spacing:.03em}
  .mg-handy-knopf{width:46px}
}
html.mg-menue-offen,html.mg-menue-offen body{overflow:hidden}

/* Fuß */
.mg-fuss{border-top:1px solid var(--wp--preset--color--linie);padding:90px clamp(16px,4vw,64px) 40px}
.mg-fuss .mg-fuss-gross{margin:0 0 70px;font-family:var(--wp--preset--font-family--ueberschrift);font-size:var(--wp--preset--font-size--schluss);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88}
.mg-fuss .mg-fuss-gross a{color:var(--wp--preset--color--text);text-decoration:none;transition:color .25s}
.mg-fuss .mg-fuss-gross a:hover{color:var(--wp--preset--color--akzent)}
.mg-fuss .mg-fuss-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin:0;color:var(--wp--preset--color--text-leise);font-size:var(--wp--preset--font-size--klein);line-height:1.6}
.mg-fuss .mg-fuss-reihe>*,.mg-fuss .mg-fuss-spalte>*{margin:0}
.mg-fuss .mg-fuss-name{color:var(--wp--preset--color--text);font-weight:700}
.mg-fuss .mg-fuss-titel{margin:0;font-family:var(--wp--preset--font-family--text);font-size:inherit;font-weight:700;line-height:inherit;letter-spacing:0;text-transform:none;color:var(--wp--preset--color--text)}
.mg-fuss .mg-fuss-liste{list-style:none;margin:0;padding:0}
@supports selector(:has(*)){.mg-fuss .mg-fuss-themen:not(:has(li)){display:none}}
.mg-fuss-reihe a{color:var(--wp--preset--color--text);text-decoration:none}
.mg-fuss-reihe a:hover{color:var(--wp--preset--color--akzent)}
/* Hinweis auf die Macher wie bei SDO: leise, das Zeichen hellt beim Zeigen auf */
.mg-fuss .mg-fuss-credit{display:flex;align-items:center;gap:.5rem;margin:56px 0 0;padding-top:22px;border-top:1px solid var(--wp--preset--color--linie);color:var(--wp--preset--color--text-leise);font-size:var(--wp--preset--font-size--mini);letter-spacing:.04em}
.mg-fuss-credit a{display:inline-flex;padding:.3rem;margin:-.3rem}
.mg-fuss-credit img{display:block;opacity:.6;transition:opacity .2s}
.mg-fuss-credit a:hover img,.mg-fuss-credit a:focus-visible img{opacity:1}
@media (max-width:980px){.mg-fuss .mg-fuss-reihe{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.mg-fuss .mg-fuss-reihe{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.mg-kopf,.mg-pfeil .wp-block-button__link::after,.mg-handy-anfragen::before,.mg-fuss-gross a{transition:none}}