/* menue.css: Kopfmenue final (E-076): Desktop nach Variante A "Bildkacheln", Handy nach Variante C "Einstieg nach Ziel".
   Ein Markup fuer beide Welten. Praefix mf-. Regeln wie site.css: nur Token-Werte (tokens.css), Radius 8 px (--r-s),
   kein Text unter 13 px, Tippziele >= 44 px, Bewegung <= 200 ms und nur ohne prefers-reduced-motion, kein !important,
   kein Text auf Bildern (Namen stehen unter dem Bild bzw. auf einer vollflaechigen dunklen Leiste).
   Braucht aus site.css nur: .b-w, .b-logo, .b-knopf, .b-knopf--kopf, .b-ico, .b-skip und die Tokens.
   Stufen: bis 1039 px Handy (Schublade mit Ebenen), 1040 bis 1179 px kompakte Leiste, ab 1180 px volle Leiste. */

:root{--mf-kopf:65px;--mf-top:65px}
.mf{position:relative;z-index:40;background:#fff;border-bottom:1px solid var(--bl-linie)}
.mf *{min-width:0}
.mf__leiste{display:flex;align-items:center;gap:var(--s-2);min-height:64px}
.mf .b-logo{order:1;margin-right:auto}
.mf .b-logo img{height:34px}
.mf-angebot{order:2}
.mf .b-knopf--kopf{min-height:44px;padding:0 var(--s-3);font-size:var(--t-text)}
.mf__burger{order:3;flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-s);background:var(--weich);color:var(--bl-ink);cursor:pointer}
.mf__burger:hover{background:var(--bl-metall-2)}
.mf__burger .mf__zu,.mf__burger[aria-expanded="true"] .mf__auf{display:none}
.mf__burger[aria-expanded="true"] .mf__zu{display:block}
@media (max-width:399px){.mf .b-knopf--kopf{padding:0 10px;font-size:15px}.mf__leiste{gap:var(--s-1)}}
@media (max-width:379px){.mf .b-knopf--kopf{padding:0 8px;font-size:var(--t-klein)}.mf .b-logo img{height:30px}}
@media (max-width:339px){.mf .b-knopf--kopf{display:none}}
.mf-nojs{display:flex;flex-wrap:wrap;gap:0 var(--s-4);padding:0 var(--bl-rand);border-top:1px solid var(--bl-linie)}
.mf-nojs a{display:flex;align-items:center;min-height:44px;font-family:var(--bl-f-kopf);font-weight:600;color:var(--bl-ink);text-decoration:none}
.mf__scrim{display:none}
.mf-bild{position:relative;display:block;overflow:hidden;border-radius:var(--r-s);background:var(--bl-metall-1)}
.mf-bild::after{content:"";position:absolute;inset:0;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(22,34,58,.12);pointer-events:none}
.mf-bild picture,.mf-bild img{display:block;width:100%;height:100%}
.mf-bild img{object-fit:cover}
.mf-bild--gesicht img{object-position:50% 22%}
.mf-zurueck{display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;margin-left:-6px;padding:0 var(--s-2) 0 0;border:0;background:none;font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-text);color:var(--bl-blau-600);cursor:pointer}
/* .mf-p__in ist selbst .b-w in .b-w.mf__leiste: site.css ".b-w .b-w{padding-inline:0}" (0,2,0) nahm sonst den Rand weg (Handy: .mf-bar ragte 20 px heraus, Schublade querscrollbar; Desktop bis 1257 px: Tafel klebte am Rand, 9 px querscrollbar). 0,3,0 gewinnt unabhaengig von der Ladereihenfolge. */
.mf .b-w.mf-p__in{padding-inline:var(--bl-rand)}

/* ================= Handy und Tablet hoch: Schublade mit Ebenen (bis 1039 px) ================= */
@media (max-width:1039px){
  html.mf-offen{overflow:hidden}
  .mf-nav{display:none}
  html.mf-offen .mf-nav{display:block;position:fixed;z-index:60;left:0;right:0;top:var(--mf-top);bottom:0;overflow:auto;overscroll-behavior:contain;background:#fff;padding:var(--s-4) var(--bl-rand) var(--s-7)}
  .mf-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);max-width:640px;margin-inline:auto}
  .mf-punkt{display:flex}
  .mf-punkt--text{grid-column:1 / -1}

  /* Startebene: 2 x 2 Bildkacheln, Name auf dunkler Leiste unter dem Bild */
  .mf-top{display:flex;flex-direction:column;flex:1;border-radius:var(--r-s);overflow:hidden;background:var(--bl-ink);color:#fff;text-decoration:none}
  .mf-top:hover{color:#fff}
  .mf-top__bild{aspect-ratio:4 / 3;border-radius:0}
  .mf-top__band{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name chev" "sub sub";align-items:center;gap:2px var(--s-2);flex:1;align-content:start;min-height:52px;padding:var(--s-2) var(--s-3)}
  .mf-top__name{grid-area:name;font-family:var(--bl-f-kopf);font-weight:700;font-size:19px;line-height:1.15}
  .mf-top .b-ico{grid-area:chev;width:20px;height:20px;transform:rotate(-90deg)}
  /* Unterzeile: kleine Beispielzeile (13 px, Barlow 600) unter dem Namen. Immer Platz fuer 2 Zeilen, damit alle vier Kacheln gleich
     hoch bleiben. Zeilenumbruch nur zwischen Woertern (keine Silbentrennung). Das laengste Beispiel braucht 155 px Textbreite, deshalb
     2 x 2 erst ab 390 px; darunter Listenkacheln (siehe unten). */
  .mf-top__sub{grid-area:sub;align-self:start;min-height:2.6em;font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-mikro);line-height:1.3;color:rgba(255,255,255,.84);hyphens:none;overflow-wrap:normal;text-wrap:balance}
  .mf-p__sub{display:none}
  @media (max-width:439px){.mf-liste{gap:var(--s-2)}.mf-top__band{padding-inline:var(--s-2)}.mf-top__sub{margin-right:-4px}}
  /* unter 390 px (360, 375, 320): eine Spalte, Bild links, dunkle Textflaeche rechts; so bleiben es 2 Zeilen ohne Silbentrennung */
  @media (max-width:389px){
    .mf-liste{grid-template-columns:minmax(0,1fr)}
    .mf-top{flex-direction:row;min-height:96px}
    .mf-top__bild{flex:none;width:34%;aspect-ratio:auto}
    .mf-top__bild picture{position:absolute;inset:0}
    .mf-top__band{flex:1;align-content:center;padding:var(--s-2) var(--s-3)}
    .mf-top__sub{margin-inline:0}
  }
  .mf-punkt--bild{position:static}

  /* Textliste darunter */
  .mf-punkt--text{display:block}
  .mf-text{display:flex;align-items:center;gap:var(--s-3);min-height:56px;border-bottom:1px solid var(--bl-linie);font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-h3);color:var(--bl-ink);text-decoration:none}
  .mf-text .b-ico{width:22px;height:22px}
  .mf-punkt--tel .mf-text{border-bottom:0;color:var(--bl-blau-600);font-weight:700}
  .mf-text__t{display:block}
  .mf-punkt--lief{margin-top:var(--s-2)}

  /* Ebene 2: Tafel eines Einstiegs, Vollflaeche unter dem Kopf */
  .mf-p{display:block}
  .mf-p[hidden]{display:none}
  .mf-p:not([hidden]){position:fixed;z-index:2;left:0;right:0;top:var(--mf-top);bottom:0;overflow:auto;overscroll-behavior:contain;background:#fff}
  .mf-p__in{padding:0 var(--bl-rand) var(--s-7)}
  .mf-p__kopf,.mf-g__kopf{display:contents}
  .mf-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:var(--s-3);min-height:60px;margin:0 calc(var(--bl-rand) * -1) var(--s-4);padding:var(--s-2) var(--bl-rand);background:#fff;border-bottom:1px solid var(--bl-linie)}
  .mf-p__titel,.mf-g__titel{font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);line-height:1.2}
  .mf-p__alle,.mf-g__alle{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-2) var(--s-4);line-height:1.25;border-radius:var(--r-s);background:var(--bl-blau-50);color:var(--bl-blau-600);font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);text-decoration:none}
  .mf-g__alle{margin-top:var(--s-3)}
  .mf-p__zeile{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--bl-linie);color:var(--bl-text-2)}
  .mf-p__zeile a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

  /* Kategorien nach Bereichen, 2 Spalten, gleich hohe Kacheln */
  .mf-bereich__titel{margin:var(--s-5) 0 var(--s-3);font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-mikro);letter-spacing:.14em;text-transform:uppercase;color:var(--bl-blau-600)}
  .mf-kacheln,.mf-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
  .mf-kacheln>li,.mf-karten>li{display:flex}
  .mf-kachel,.mf-karte{display:flex;flex-direction:column;flex:1;color:var(--bl-ink);text-decoration:none}
  .mf-kachel .mf-bild,.mf-karte .mf-bild{aspect-ratio:4 / 3}
  .mf-kachel__name,.mf-karte__name{display:block;margin-top:var(--s-2);font-family:var(--bl-f-kopf);font-weight:700;font-size:18px;line-height:1.2;hyphens:none;overflow-wrap:normal;text-wrap:balance}
  .mf-kachel__zahl,.mf-karte__sub{display:block;margin-top:2px;font-size:var(--t-klein);line-height:1.35;color:var(--bl-text-2)}
  .mf-karten{margin-top:var(--s-4);grid-auto-rows:1fr}
  /* gleich hohe Kacheln ueber alle Bereiche: Seitenverhaeltnis der Zelle (Bild + 2 Namenszeilen + Zahl) je Breite */
  .mf-kacheln>li{aspect-ratio:1 / 1.3}
  @media (min-width:360px){.mf-kacheln>li{aspect-ratio:1 / 1.22}}
  @media (min-width:480px){.mf-kacheln>li{aspect-ratio:1 / 1.12}}
  @media (min-width:600px){.mf-kacheln>li{aspect-ratio:1 / 1.15}}
  @media (min-width:800px){.mf-kacheln>li{aspect-ratio:1 / 1}}
  /* Silbentrennung nur, wo ein Wort sonst nicht passt (weiche Trennstellen im HTML, nur bei Woertern ab 14 Buchstaben) */
  @media (max-width:439px){.mf-kachel__name,.mf-karte__name{hyphens:manual}}

  /* Ebene 3: Gruppen einer Kategorie */
  .mf-gruppen{display:block}
  .mf-g{display:none}
  .mf-g.is-offen{display:block;position:fixed;z-index:3;left:0;right:0;top:var(--mf-top);bottom:0;overflow:auto;overscroll-behavior:contain;background:#fff;padding:0 var(--bl-rand) var(--s-7)}
  /* Sicherung: offene Menueebenen nie seitlich wischbar (Inhaber 2026-10-20). Ersetzt keine Ursache; wp-querscroll-pruefen.js misst scrollWidth > clientWidth weiter und meldet jeden Ueberstand. Muss nach Zeile 37, 77 und 108 stehen (gleiche Spezifitaet). */
  html.mf-offen .mf-nav,.mf-p:not([hidden]),.mf-g.is-offen{overflow-x:hidden}
  .mf-g__liste a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-2) 0;border-bottom:1px solid var(--bl-linie);font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-h3);color:var(--bl-ink);text-decoration:none}
  .mf-g__liste a:hover{color:var(--bl-blau-600)}
  .mf-g__unter{margin:var(--s-5) 0 var(--s-1);font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-klein);letter-spacing:.04em;text-transform:uppercase;color:var(--bl-text-2)}
  .mf-rechner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:64px;margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--bl-blau-100);border-radius:var(--r-s);background:var(--bl-blau-50);color:var(--bl-text-2);font-size:var(--t-klein);line-height:1.35;text-decoration:none}
  .mf-rechner strong{display:block;font-family:var(--bl-f-kopf);font-size:var(--t-h3);color:var(--bl-blau-600)}
  .mf-rechner .b-ico{color:var(--bl-blau-600)}
  .mf-g__alle .b-ico,.mf-p__alle .b-ico{width:20px;height:20px}
  @media (prefers-reduced-motion:no-preference){
    .mf-p:not([hidden]),.mf-g.is-offen{animation:mf-rein var(--m-base) var(--m-kurve)}
    @keyframes mf-rein{from{opacity:0}to{opacity:1}}
  }
}
@media (min-width:600px) and (max-width:1039px){
  .mf-kacheln,.mf-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= Desktop ab 1040 px: Leiste mit Tafeln ================= */
@media (min-width:1040px){
  .mf__burger,.mf-nojs,.mf-zurueck{display:none}
  .mf__leiste{gap:var(--s-3);min-height:76px}
  .mf .b-logo{order:1;margin-right:var(--s-3)}
  .mf .b-logo img{height:38px}
  .mf-nav{order:2;flex:1;display:block}
  .mf-angebot{order:3}
  .mf .b-knopf--kopf{min-height:48px;padding:0 var(--s-5);font-size:var(--t-h3)}
  .mf-liste{display:flex;align-items:center;gap:var(--s-1)}
  .mf-punkt--text:not(.mf-punkt--suche){display:none}
  .mf-punkt--suche{margin-left:auto}
  .mf-text{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-s);color:var(--bl-ink)}
  .mf-text:hover{background:var(--weich);color:var(--bl-blau-600)}
  .mf-text__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mf-top{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2) 0 var(--s-3);border:1px solid transparent;border-radius:var(--r-s);color:var(--bl-ink);font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-text);white-space:nowrap;text-decoration:none;cursor:pointer}
  .mf-top:not([data-p]){padding-right:var(--s-3)}
  .mf-top:hover{background:var(--weich);color:var(--bl-blau-600)}
  .mf-top[aria-expanded="true"]{background:var(--bl-blau-50);color:var(--bl-blau-600)}
  .mf-top__bild,.mf-top__sub{display:none}
  .mf-top__band{display:inline-flex;align-items:center;gap:2px}
  .mf-top .b-ico{width:18px;height:18px;transition:transform var(--m-base) var(--m-kurve)}
  .mf-top:not([data-p]) .b-ico{display:none}
  .mf-top[aria-expanded="true"] .b-ico{transform:rotate(180deg)}
  .mf__scrim{position:absolute;left:0;right:0;top:100%;height:100vh;z-index:1;background:rgba(22,34,58,.3)}
  .mf__scrim:not([hidden]){display:block}
  .mf-p{position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100vh - 90px);overflow:auto;background:#fff;border-top:1px solid var(--bl-linie);border-bottom:1px solid var(--bl-linie-2);box-shadow:var(--sh-2)}
  .mf-p[hidden]{display:none}
  .mf-p__in{padding-block:var(--s-5)}
  @media (prefers-reduced-motion:no-preference){
    .mf-p:not([hidden]){animation:mf-ein var(--m-base) var(--m-kurve)}
    @keyframes mf-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  }
  .mf-p__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-4)}
  .mf-bar{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s-3);min-width:0}
  .mf-p__sub{font-size:var(--t-klein);line-height:1.3;color:var(--bl-text-2)}
  .mf-p__titel,.mf-g__titel{font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);line-height:1.2}
  .mf-p__alle,.mf-g__alle{display:inline-block;padding-block:12px;font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-text);line-height:1.3;color:var(--bl-blau-600);text-decoration:none}
  .mf-p__alle{min-height:44px}
  .mf-p__alle:hover,.mf-g__alle:hover{color:var(--bl-blau-800);text-decoration:underline;text-underline-offset:.18em}
  .mf-p__alle .b-ico,.mf-g__alle .b-ico{display:inline-block;width:20px;height:20px;margin-left:var(--s-2);vertical-align:-4px}

  /* Sortiment: Kacheln links (alle 11 in einem Raster), Gruppen rechts */
  .mf-sort{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-5)}
  .mf-bereiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;align-content:start;gap:var(--s-4) var(--s-3)}
  .mf-bereich,.mf-kacheln{display:contents}
  .mf-bereich__titel{display:none}
  .mf-kacheln>li{display:flex}
  .mf-kachel{display:flex;flex-direction:column;flex:1;color:var(--bl-ink);text-decoration:none}
  .mf-kachel .mf-bild,.mf-karte .mf-bild{aspect-ratio:16 / 10}
  .mf-kachel.is-aktiv .mf-bild{box-shadow:0 0 0 3px var(--bl-blau-500)}
  .mf-kachel__name,.mf-karte__name{display:block;margin-top:var(--s-2);font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-text);line-height:1.2;hyphens:none;overflow-wrap:normal;text-wrap:balance}
  .mf-kachel__zahl,.mf-karte__sub{display:block;margin-top:2px;font-size:var(--t-klein);line-height:1.35;color:var(--bl-text-2)}
  .mf-kachel:hover .mf-kachel__name,.mf-kachel.is-aktiv .mf-kachel__name,.mf-karte:hover .mf-karte__name{color:var(--bl-blau-600)}
  .mf-gruppen{padding-left:var(--s-5);border-left:1px solid var(--bl-linie)}
  .mf-g{display:block}
  .mf-g[hidden]{display:none}
  .mf-g__titel{margin-bottom:var(--s-2)}
  .mf-g__liste--zwei{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-2)}
  .mf-g__liste a{display:flex;align-items:center;min-height:44px;padding:var(--s-1) var(--s-2);border-radius:var(--r-s);color:var(--bl-ink);font-size:var(--t-klein);line-height:1.25;text-decoration:none}
  .mf-g__liste a:hover{background:var(--weich);color:var(--bl-blau-600)}
  .mf-g__unter{margin:var(--s-4) 0 var(--s-1) var(--s-2);font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-klein);letter-spacing:.04em;text-transform:uppercase;color:var(--bl-text-2)}
  .mf-rechner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:64px;margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--bl-blau-100);border-radius:var(--r-s);background:var(--bl-blau-50);color:var(--bl-text-2);font-size:var(--t-klein);line-height:1.35;text-decoration:none}
  .mf-rechner:hover{border-color:var(--bl-blau-500);color:var(--bl-text-2)}
  .mf-rechner strong{display:block;font-family:var(--bl-f-kopf);font-size:var(--t-h3);color:var(--bl-blau-600)}
  .mf-rechner .b-ico{color:var(--bl-blau-600)}
  .mf-g__alle{margin-top:var(--s-2)}

  /* Vorhaben und Leistungen: 6 Bildkarten */
  .mf-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s-3)}
  .mf-karten>li{display:flex}
  .mf-karte{display:flex;flex-direction:column;flex:1;padding:var(--s-2);border:1px solid transparent;border-radius:var(--r-s);color:var(--bl-ink);text-decoration:none}
  .mf-karte:hover{border-color:var(--bl-blau-100);background:var(--bl-blau-50)}
  .mf-p__zeile{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--bl-linie);color:var(--bl-text-2)}
  .mf-p__zeile a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
  .mf-karten{margin-inline:calc(-1 * var(--s-2) - 1px)}
}
@media (min-width:1040px) and (max-width:1279px){.mf-kachel__name,.mf-karte__name{hyphens:manual}}
@media (min-width:1180px){
  .mf-sort{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-6)}
  .mf-gruppen{padding-left:var(--s-6)}
  .mf-g__liste a{font-size:15px}
  .mf-karten{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
  .mf__leiste{gap:var(--s-4)}
  .mf .b-logo img{height:42px}
  .mf-top{padding-left:var(--s-4)}
  .mf-top:not([data-p]){padding-right:var(--s-4)}
}
@media (min-width:1240px){
  .mf-sort{grid-template-columns:minmax(0,1fr) 420px}
}
@media (prefers-reduced-motion:reduce){
  .mf *{transition:none}
}