/* =========================================================
   Muench Media - zentrales Stylesheet
   ========================================================= */

/* ---------- Basis + genutzte Bootstrap-5.3-Klassen (Startseite ohne bootstrap.min.css) ---------- */
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; color: #212529; }
h1 { font-size: calc(1.375rem + 1.5vw); line-height: 1.2; }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }
.bg-white { background-color: #fff; }
.vh-100 { height: 100vh; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.gap-3 { gap: 1rem; }
.text-center { text-align: center; }
.img-fluid { max-width: 100%; height: auto; }
.m-0 { margin: 0; }
.fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.container { width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
.small { font-size: .875em; }
.text-secondary { color: #6c757d; }
.link-secondary { color: #6c757d; }
.link-secondary:hover { color: #565e64; }
.text-decoration-none { text-decoration: none; }
@media (min-width: 768px) {
    .flex-md-row { flex-direction: row; }
    .gap-md-5 { gap: 3rem; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.dse { line-height: 1.75; }
.dse h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: .75rem; }
.dse a { color: inherit; word-break: break-word; }

/* ---------- Produktseiten (z. B. /wp-rankify) ---------- */
.mm-thin { font-weight: 100; }
.mm-tracking { letter-spacing: .15em; }
.mm-relaxed { line-height: 1.75; }

/* ---------- Menue (menu.php) ---------- */
.mm-burger {
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1060;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.mm-burger span {
    display: block; width: 28px; height: 2px; margin: 6px auto; background: #000;
    transition: transform .3s, opacity .3s;
}
.mm-open .mm-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mm-open .mm-burger span:nth-child(2) { opacity: 0; }
.mm-open .mm-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mm-backdrop {
    position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mm-panel {
    position: fixed; top: 0; right: 0; z-index: 1050;
    width: min(380px, 100%); height: 100vh; height: 100dvh; overflow-y: auto;
    background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, .08);
    padding: 6rem 2.5rem 2.5rem;
    transform: translateX(100%); visibility: hidden; transition: transform .3s, visibility .3s;
}
.mm-open .mm-backdrop { opacity: 1; visibility: visible; }
.mm-open .mm-panel { transform: none; visibility: visible; }

.mm-home {
    position: absolute; top: 1.25rem; left: 2.5rem;
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -9px;
}
.mm-home:hover, .mm-home:focus-visible { text-decoration: none; opacity: .6; }
.mm-panel .mm-home { font-size: 0; }

.mm-panel ul { list-style: none; margin: 0; padding: 0; }
.mm-panel li + li { margin-top: 1.25rem; }
.mm-panel a { color: #000; font-size: 1.75rem; font-weight: 100; text-decoration: none; }
.mm-panel a:hover, .mm-panel a:focus-visible { text-decoration: underline; text-underline-offset: .3em; }