/* Hauptmenü mit aufklappenden Unterthemen (01.10.2026, Vorbild tkdeutschland.de) – Start- und Unterseiten.
   Öffnet bei Maus-Hover und Tastatur-Fokus (:focus-within), reines CSS. Unter 900 px ausgeblendet (Kopf zeigt dort nur Logo + Kunden-Login). */
.menue{display:flex;align-items:center;gap:2px}
.menue .m-punkt{position:relative}
.menue .m-kopf{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:0;background:none;border-radius:10px;cursor:pointer;
  font:600 14px/1 var(--ui,'Manrope',system-ui,sans-serif);color:var(--ink-2,#33415a);white-space:nowrap}
.menue .m-kopf::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .2s}
.menue .m-punkt:hover .m-kopf,.menue .m-punkt:has(:focus-visible) .m-kopf{color:var(--ink,#0D1B2A);background:#F1F3F6}
.menue .m-punkt:hover .m-kopf::after,.menue .m-punkt:has(:focus-visible) .m-kopf::after{transform:translateY(1px) rotate(-135deg)}
.menue .m-panel{position:absolute;top:100%;left:50%;z-index:60;min-width:240px;padding:12px;margin-top:10px;background:#fff;border:1px solid var(--kante,#D3D9E0);
  border-radius:16px;box-shadow:0 28px 56px -24px rgba(13,27,42,.35),0 2px 6px rgba(13,27,42,.06);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s}
.menue .m-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}  /* Brücke, damit das Menü beim Herunterfahren offen bleibt */
.menue .m-punkt:hover .m-panel,.menue .m-punkt:has(:focus-visible) .m-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menue .m-panel ul{list-style:none;margin:0;padding:0}
.menue .m-panel li a{display:block;padding:9px 12px;border-radius:9px;font:500 14px/1.3 var(--ui,'Manrope',system-ui,sans-serif);color:var(--ink-2,#33415a);white-space:nowrap}
.menue .m-panel li a:hover{background:#F1F3F6;color:var(--ink,#0D1B2A)}
.menue .m-panel.breit{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:6px 18px;padding:20px 18px 14px;min-width:680px}
.menue .m-gruppe{display:flex;align-items:center;gap:9px;padding:6px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--linie,#E6E9ED);
  font:700 14.5px/1.2 var(--disp,'Sora',sans-serif);color:var(--ink,#0D1B2A);letter-spacing:-.01em;white-space:nowrap}
.menue .m-gruppe::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--p,#F5A623)}
.menue .m-gruppe:hover{color:var(--ink,#0D1B2A);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.menue{display:none}}
@media(max-width:900px){.s-kopf nav.menue,.oben nav.menue{display:none!important}}

/* Handy-Menü (details/summary) – nur unter 900 px */
.m-mobil{display:none}
@media(max-width:900px){
  .m-mobil{display:block;order:5}
  .m-mobil summary{list-style:none;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--kante,#D3D9E0);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;background:#fff}
  .m-mobil summary::-webkit-details-marker{display:none}
  .m-mobil summary span{display:block;width:16px;height:1.8px;background:var(--ink,#0D1B2A);border-radius:2px}
  .m-mobil[open] summary{background:var(--ink,#0D1B2A)}
  .m-mobil[open] summary span{background:#fff}
  .m-mobil .mm-panel{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border-bottom:1px solid var(--kante,#D3D9E0);box-shadow:0 24px 40px -24px rgba(13,27,42,.4);padding:8px 20px 20px;max-height:calc(100svh - 70px);overflow:auto}
  .m-mobil .mm-panel ul{list-style:none;margin:0 0 6px;padding:0}
  .m-mobil .mm-panel li a{display:block;padding:9px 0 9px 17px;font:500 15px/1.3 var(--ui,'Manrope',sans-serif);color:var(--ink-2,#33415a)}
  .m-mobil .mm-gruppe,.m-mobil .mm-titel{margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--linie,#E6E9ED)}
  .m-mobil .mm-panel>p:first-child{border-top:0;padding-top:4px}
  .m-mobil .mm-gruppe a{display:flex;align-items:center;gap:9px;font:700 15px/1.2 var(--disp,'Sora',sans-serif);color:var(--ink,#0D1B2A)}
  .m-mobil .mm-gruppe a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--p,#F5A623)}
  .m-mobil .mm-titel{font:700 11.5px/1 var(--ui,'Manrope',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#65718a)}
  .s-kopf,.oben{position:sticky}
  .s-kopf .bahn,.oben .bahn{position:relative}
}
@media(max-width:900px){
  .s-kopf .m-mobil .mm-panel li a,.oben .m-mobil .mm-panel li a{display:block!important}
  .s-kopf .m-mobil .mm-gruppe a,.oben .m-mobil .mm-gruppe a{display:flex!important}
  .oben .bahn{flex-wrap:nowrap!important;gap:10px!important}
  .oben .rechts{margin-left:auto}
}

/* 01.10.2026 (Jens: „bei Leistungen muss ich erst wegklicken"): Klick hält kein Menü mehr offen (nur Tastatur-Fokus),
   und sobald die Maus über einem anderen Oberbegriff steht, schließen alle übrigen sofort. */
.menue .m-kopf:focus:not(:focus-visible){outline:none}
.menue:hover .m-punkt:not(:hover) .m-panel{opacity:0!important;visibility:hidden!important;transform:translate(-50%,8px)!important;transition:none}
.menue:hover .m-punkt:not(:hover) .m-kopf{background:none;color:var(--ink-2,#33415a)}
/* 01.10.2026 (Jens: „beim Impressum rutscht der Header nach links"): Kopf auf allen Seiten gleich –
   Menü rechtsbündig neben dem Kunden-Login, gleiche Abstände wie auf der Startseite. */
.oben .menue{margin-left:auto}
.oben .rechts{margin-left:0}
.s-kopf nav.menue{gap:2px}
.oben .marke canvas{width:40px!important;height:40px!important;border-radius:10px!important}
/* 01.10.2026 (Jens: „Telefonnummer raus aus dem Hero, nur ein Telefonsymbol oben; Kunden sollen sich digital melden") */
.m-tel{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--kante,#D3D9E0);color:var(--ink,#0D1B2A);background:#fff;flex-shrink:0}
.m-tel:hover{border-color:var(--ink,#0D1B2A)}
.m-tel svg{width:17px;height:17px}
@media(max-width:640px){.m-tel{width:38px;height:38px}}
/* Fußbereich: Mail zuerst und groß, Telefon klein darunter */
.l-fuss-kontakt li:first-child a{font:800 17px/1.2 var(--disp,'Sora',sans-serif)!important;letter-spacing:-.02em}
.l-fuss-kontakt li.tel a{font:600 14px/1.4 var(--ui,'Manrope',sans-serif)!important}
@media(max-width:640px){.m-tel{display:none!important}}
.menue .m-gruppe::before,.m-mobil .mm-gruppe a::before{flex:0 0 8px;width:8px;height:8px;min-width:8px}
/* 01.10.2026 Jens: „mach die Punkte ruhig weg" */
.menue .m-gruppe::before,.m-mobil .mm-gruppe a::before{display:none!important}