/* ==========================================================
   Morph Mega-Menü – Frontend
   Alle Werte kommen als CSS-Variablen aus den Einstellungen.
   ========================================================== */

/* ==========================================================
   THEME-RESET · ab 2.10.2

   Nach dem Entfernen eines Themes übernimmt WordPress die Regeln des
   Standard-Themes. Deren Farben für Links, Rahmen und Knöpfe schlagen
   ins Menü durch.

   ALLES STEHT IN :where(). Das ist der entscheidende Punkt:

   In 2.10.1 stand hier .lcmm-shell button — das zählt als Klasse PLUS
   Element und wiegt damit schwerer als die Regel .lcmm-burger des
   Plugins selbst. Der Reset gewann gegen die eigenen Regeln, obwohl er
   weiter oben steht. Ergebnis: keine Rahmen an den Pfeilen, keine
   Sperrung der Schrift, falsche Farben.

   :where() zählt null. Damit räumt der Reset nur Themereste weg und
   verliert gegen jede eigene Regel des Plugins.
   ========================================================== */

.lcmm-shell :where(a),
.lcmm-shell :where(a:hover),
.lcmm-shell :where(a:focus),
.lcmm-shell :where(a:visited){
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  background-image: none;
}

.lcmm-shell :where(ul, ol, li){
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.lcmm-shell :where(button, input, select){
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: inherit;
  line-height: inherit;
}

.lcmm-shell :where(h1, h2, h3, h4, h5, h6, p){
  margin: 0;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.lcmm-shell :where(img){
  max-width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
}

/* Der Fokusrahmen ist Barrierefreiheit, kein Themerest — er bleibt und
   steht deshalb bewusst NICHT in :where(). */
.lcmm-shell :focus-visible{
  outline: 2px solid var(--lcmm-accent, #008FBE);
  outline-offset: 2px;
}

.lcmm-shell,
.lcmm-shell *,
.lcmm-shell *::before,
.lcmm-shell *::after { box-sizing: border-box; }

.lcmm-shell{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: var(--lcmm-z, 9999);
  /* Der obere Abstand liegt im Padding, nicht in top.
     So kann er sich beim Öffnen weiten, ohne die Hülle zu verschieben. */
  padding: var(--lcmm-top-closed, 10px) var(--lcmm-gutter, 28px) 0;
  pointer-events: none;
  font-family: var(--lcmm-sans, inherit);
  display: flex;
  justify-content: center;
  will-change: transform;
  transition:
    padding-top .46s cubic-bezier(.22,1,.36,1),
    transform   .42s cubic-bezier(.4,0,.2,1);
}

/* Geöffnet: mehr Luft nach oben, wie im Vorbild */
.lcmm-shell.is-open{
  padding-top: var(--lcmm-top-open, 22px);
}

/* Beim Herunterscrollen sanft nach oben ausblenden */
.lcmm-shell.is-hidden{
  transform: translate3d(0, -130%, 0);
}

.lcmm-nav{
  pointer-events: auto;
  width: 100%;
  max-width: var(--lcmm-max, none);
  background: transparent;
  /* Rand von Anfang an vorhanden, nur unsichtbar –
     sonst springt der Inhalt beim Einblenden um einen Pixel. */
  border: 1px solid transparent;
  border-radius: var(--lcmm-r, 26px);
  box-shadow: none;
  overflow: hidden;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    background-color  .38s cubic-bezier(.22,1,.36,1),
    border-color      .38s cubic-bezier(.22,1,.36,1),
    box-shadow        .52s cubic-bezier(.22,1,.36,1),
    backdrop-filter   .38s cubic-bezier(.22,1,.36,1),
    -webkit-backdrop-filter .38s cubic-bezier(.22,1,.36,1);
}

/* --- Zustand 1: oben auf der Seite, vollständig unsichtbar --- */

/* --- Zustand 2: mitgescrollt, als Glasfläche lesbar --- */
.lcmm-shell.is-float .lcmm-nav:not(.is-open){
  background-color: var(--lcmm-glass, rgba(255,255,255,.72));
  border-color: var(--lcmm-border-soft, rgba(0,0,0,.05));
  box-shadow: var(--lcmm-shadow-float, 0 8px 24px -12px rgba(0,0,0,.18));
  -webkit-backdrop-filter: blur(var(--lcmm-blur, 18px)) saturate(180%);
  backdrop-filter: blur(var(--lcmm-blur, 18px)) saturate(180%);
}

/* --- Zustand 3: geöffnet, volle Karte --- */
.lcmm-shell.is-solid .lcmm-nav,
.lcmm-nav.is-open{
  background-color: var(--lcmm-surface, #fff);
  border-color: var(--lcmm-border-soft, rgba(0,0,0,.05));
  box-shadow: var(--lcmm-shadow, 0 20px 50px -20px rgba(0,0,0,.25));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Dauerhaft sichtbare Variante behält die Glasfläche beim Scrollen */
.lcmm-shell.is-solid.is-float .lcmm-nav:not(.is-open){
  background-color: var(--lcmm-surface, #fff);
}

/* Browser ohne backdrop-filter bekommen eine deckendere Fläche,
   sonst wäre die Schrift auf Bildern unlesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lcmm-shell.is-float .lcmm-nav:not(.is-open){
    background-color: var(--lcmm-glass-solid, rgba(255,255,255,.94));
  }
}

/* ----------------------------------------------------------
   Startzustand: keine Animation vor dem ersten Frame.
   Verhindert den kurz aufblitzenden Rand beim Laden.
   ---------------------------------------------------------- */
.lcmm-shell:not(.is-ready),
.lcmm-shell.lcmm-js:not(.is-ready) .lcmm-nav,
.lcmm-shell:not(.is-ready) .lcmm-drawer,
.lcmm-shell:not(.is-ready) .lcmm-panel,
.lcmm-shell:not(.is-ready) .lcmm-body,
.lcmm-shell:not(.is-ready) .lcmm-shot{
  transition: none !important;
  animation: none !important;
}
/* Ohne Skript: Übergänge aus, die Scroll-Animation „Glas ohne Skript“ darf laufen */
.lcmm-shell:not(.lcmm-js) .lcmm-nav{ transition: none !important; }

/* ---------- Leiste ---------- */
.lcmm-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--lcmm-bar-h, 70px);
  /* Links und rechts gleich (bis 2.19.4 rechts nur die Hälfte). So
     enden Leiste und aufgeklapptes Panel auf derselben Linie. */
  padding: 0 var(--lcmm-pad-x, 26px);
}

.lcmm-logo{
  display: inline-flex;
  align-items: center;
  margin-right: var(--lcmm-logo-gap, 26px);
  text-decoration: none;
  color: var(--lcmm-accent, #123f45);
  flex: 0 0 auto;
  line-height: 1;
}
.lcmm-logo img{
  display: block;
  width: var(--lcmm-logo-w, 150px);
  height: auto;
  max-height: calc(var(--lcmm-bar-h, 70px) - 22px);
  object-fit: contain;
}
.lcmm-logo .lcmm-logo-light{ display: none; }
.lcmm-invert .lcmm-logo .lcmm-logo-light{ display: block; }
.lcmm-invert .lcmm-logo img:not(.lcmm-logo-light){ display: none; }
.lcmm-logo-text{
  font-size: var(--lcmm-logo-size, 23px);
  font-weight: 700;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.lcmm-links{
  display: flex;
  align-items: center;
  gap: var(--lcmm-nav-gap, 2px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lcmm-links li{ margin: 0; padding: 0; list-style: none; }

.lcmm-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  /* KEINE font-Kurzform mehr: Sie setzt Familie, Größe und Stärke auf
     einmal zurück und macht jede spätere Angabe zunichte. */
  font-family: var(--lcmm-sans, inherit);
  font-size: var(--lcmm-size-nav, 15px);
  font-weight: var(--lcmm-nav-weight, 500);
  line-height: 1;
  color: var(--lcmm-ink, #16262e);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 10px var(--lcmm-nav-px, 14px);
  border-radius: var(--lcmm-r-pill, 999px);
  transition: background .18s ease, color .18s ease;
}
.lcmm-item:hover,
.lcmm-item:focus-visible{ background: var(--lcmm-hover, rgba(0,0,0,.05)); color: var(--lcmm-hover-ink, var(--lcmm-ink)); }
.lcmm-item[aria-expanded="true"]{ background: var(--lcmm-soft, #eef1f0); }
.lcmm-item.is-highlight{ color: var(--lcmm-accent, #123f45); font-weight: 600; }
/* Nur das direkte Kind, also der Aufklapp-Pfeil.
   `.lcmm-item svg` träfe auch die Flagge im Sprach-Chip – der trägt
   dieselbe Klasse, damit er wie ein Menüpunkt aussieht. */
.lcmm-item > svg{ opacity: .55; transition: transform var(--lcmm-dur, 500ms) cubic-bezier(.22,1,.36,1); }
/* Nur der Pfeil, nicht jedes SVG im Menüpunkt. Der Sprach-Chip
   trägt ebenfalls die Klasse lcmm-item – ohne diese Einschränkung
   würde sich die Flagge mitdrehen. */
.lcmm-item[aria-expanded="true"] > svg,
.lcmm-item[aria-expanded="true"] .lcmm-chev{ transform: scaleY(-1); opacity: 1; }

.lcmm-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lcmm-ghost,
.lcmm-solid{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--lcmm-btn-font, inherit);
  font-size: var(--lcmm-btn-size, 15px);
  font-weight: var(--lcmm-btn-weight, 600);
  letter-spacing: var(--lcmm-btn-ls, 0);
  text-transform: var(--lcmm-btn-case, none);
  line-height: 1;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--lcmm-r-pill, 999px);
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .18s cubic-bezier(.22,1,.36,1),
    filter .18s ease;
}
.lcmm-ghost{ color: var(--lcmm-ink); background: var(--lcmm-soft, #eef1f0); }
.lcmm-ghost:hover{ filter: brightness(.96); }
.lcmm-solid{ color: var(--lcmm-accent-ink, #fff); background: var(--lcmm-accent, #123f45); }
.lcmm-solid:hover{ transform: translateY(-1px); filter: brightness(1.16); }

/* ---------- Schublade ---------- */
.lcmm-drawer{
  height: 0;
  overflow: hidden;
  transition: height var(--lcmm-dur, 500ms) cubic-bezier(.22,1,.36,1);
}
.lcmm-drawer.is-scrollable{ overflow-y: auto; overscroll-behavior: contain; }
.lcmm-inner{ position: relative; }

.lcmm-panel{
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 0 var(--lcmm-pad-x, 26px) 30px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  /* visibility verhindert, dass beim Laden kurz etwas gezeichnet wird */
  visibility: hidden;
  transition:
    opacity .24s ease,
    transform .4s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .4s;
}
.lcmm-panel.is-active{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: .08s, .08s, 0s;
}

/* ---------- Panel-Raster ---------- */
.lcmm-grid{
  display: grid;
  grid-template-columns: var(--lcmm-col-list, 1.15fr) var(--lcmm-col-media, .85fr) var(--lcmm-col-card, 1.25fr);
  gap: 26px;
  padding-top: 26px;
  align-items: stretch;
}
.lcmm-list{ display: flex; flex-direction: column; gap: 1px; }
.lcmm-list.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 18px;
  align-content: start;
}

.lcmm-link{
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--lcmm-accent, #123f45);
  transition: background .16s ease;
}
.lcmm-link:hover,
.lcmm-link.is-hot,
.lcmm-link:focus-visible{ background: var(--lcmm-hover, rgba(0,0,0,.05)); color: var(--lcmm-hover-ink, inherit); }
.lcmm-link-t{
  display: block;
  font-size: var(--lcmm-size-link, 29px);
  font-weight: var(--lcmm-weight-link, 500);
  letter-spacing: -.025em;
  line-height: 1.25;
}
.lcmm-link-d{
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--lcmm-ink-soft, #5d7078);
}
.lcmm-list.two .lcmm-link{ padding: 6px 10px; }
.lcmm-list.two .lcmm-link-t{ font-size: var(--lcmm-size-link2, 19px); }

/* Bildspalte */
.lcmm-media{
  position: relative;
  border-radius: var(--lcmm-r-media, 15px);
  overflow: hidden;
  min-height: var(--lcmm-media-min, 270px);
  background: var(--lcmm-soft, #eef1f0);
  /* Stretch explizit, falls das Theme align-items auf dem Raster ändert */
  align-self: stretch;
}
.lcmm-shot{
  position: absolute;
  /* Langform zusätzlich zu inset – Safari unter 14.1 kennt inset nicht */
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .38s ease;
}
.lcmm-shot.is-shown{ opacity: 1; }

/*
 * Themes setzen praktisch immer `img{max-width:100%;height:auto}`, teils mit
 * !important. Ohne Gegenwehr behält das Bild seine eigenen Proportionen und
 * lässt unten einen Streifen des Kartenhintergrunds stehen – besonders wenn
 * das Fenster schmaler wird und die Spalte höher als das Bild ausfällt.
 * Deshalb hier bewusst mit hoher Spezifität und !important.
 */
.lcmm-media .lcmm-shot img,
.lcmm-media .lcmm-shot picture,
.lcmm-media .lcmm-shot picture img{
  position: absolute;
  top: 0; left: 0;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: var(--lcmm-media-pos, center center);
}
.lcmm-tag{
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  background: rgba(255,255,255,.94);
  border-radius: var(--lcmm-r-pill, 999px);
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lcmm-ink, #16262e);
}
.lcmm-tag:empty{ display: none; }

/* Aktionskarte */
.lcmm-card{
  position: relative;
  overflow: hidden;
  background: var(--lcmm-card-bg, var(--lcmm-soft, #eef1f0));
  border-radius: var(--lcmm-r-media, 15px);
  padding: var(--lcmm-card-pad, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--lcmm-card-items, flex-start);
  text-align: var(--lcmm-card-align, left);
}
.lcmm-card.is-empty{ background: transparent; }
.lcmm-card h3{
  font-family: var(--lcmm-card-font, Georgia, serif);
  font-weight: var(--lcmm-card-weight, 600);
  font-size: var(--lcmm-size-card, 31px);
  line-height: var(--lcmm-card-lh, 1.15);
  letter-spacing: var(--lcmm-card-ls, -.015em);
  color: var(--lcmm-ink, #16262e);
  margin: 0;
}
.lcmm-card h3 span{
  display: block;
  color: var(--lcmm-ink-soft, #5d7078);
  font-weight: 400;
}
.lcmm-card p{
  font-family: var(--lcmm-card-text, inherit);
  margin: 12px 0 0;
  font-size: var(--lcmm-size-ctext, 15px);
  line-height: 1.55;
  color: var(--lcmm-ink-soft, #5d7078);
  max-width: 36ch;
}
.lcmm-btn{
  align-self: var(--lcmm-card-items, flex-start);
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  font-family: var(--lcmm-card-text, inherit);
  font-size: var(--lcmm-size-cbtn, 15px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: var(--lcmm-ink, #16262e);
  border: 1px solid var(--lcmm-border, rgba(0,0,0,.2));
  border-radius: var(--lcmm-r-pill, 999px);
  padding: 13px 24px;
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, filter .18s ease;
}
.lcmm-btn:hover{ background: rgba(255,255,255,.7); }

/* ==========================================================
   Die alte Mobilfassung stand hier.

   Sie stammte aus der Zeit, als der Menueschalter noch
   <button class="lcmm-burger"><i></i></button> war. Heute ist es
   <button class="lcmm-burger"><span class="lcmm-burger-i"><i></i></span></button>.
   Der alte Selektor .lcmm-burger i traf das innere <i> aber weiter,
   weil er auf jeden Nachfahren passt: beide Regelsaetze galten
   gleichzeitig und lieferten widersprüchliche Werte. Je nachdem,
   welche Regel die Kaskade gewann, verschwanden Schalter und Flagge
   oder waren falsch dimensioniert. Die alten Regeln setzten zudem
   feste Farbwerte wie #16262e, wo die neuen var(--lcmm-ink) nutzen —
   dadurch blieben Dashboard-Einstellungen wirkungslos.

   Der Block ist ersatzlos entfernt. Die gueltige Mobilfassung steht
   weiter unten unter MOBILMENUE.
   ========================================================== */

/* ---------- Schmale Fenster ---------- */
@media (max-width: 720px){
  .lcmm-grid{ grid-template-columns: 1fr; gap: 18px; }
  .lcmm-list.two{ grid-template-columns: 1fr; }
}

/* ---------- Zugänglichkeit ---------- */
.lcmm-shell :focus-visible{
  outline: 2px solid var(--lcmm-accent, #123f45);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .lcmm-nav, .lcmm-drawer, .lcmm-panel, .lcmm-body,
  .lcmm-item svg, .lcmm-solid, .lcmm-shot, .lcmm-head svg{
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   Sprachumschalter
   ========================================================== */

.lcmm-flag{
  display: block;
  flex: 0 0 auto;
  width: var(--lcmm-flag, 22px);
  height: var(--lcmm-flag, 22px);
  border-radius: var(--lcmm-flag-r, 50%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--lcmm-flag-ring, transparent);
  background: var(--lcmm-soft, #eef1f0);
  position: relative;
}
.lcmm-flag svg,
.lcmm-flag img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
}
.lcmm-flag-code{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--lcmm-ink-soft, #5d7078);
}

/* --- Chip in der Leiste --- */
.lcmm-lang-chip{
  padding-left: 7px;
  padding-right: 13px;
  gap: 8px;
}
.lcmm-lang-chip .lcmm-lang-cur{
  font-size: var(--lcmm-size-nav, 15px);
  font-weight: 500;
  line-height: 1;
}

/* --- Flaggen nebeneinander --- */
.lcmm-lang{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 4px 0 0;
  padding: 0;
}
.lcmm-lang li{ margin: 0; padding: 0; list-style: none; }
.lcmm-lang-link{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--lcmm-r-pill, 999px);
  text-decoration: none;
  color: var(--lcmm-ink, #16262e);
  transition: background .18s ease, color .18s ease;
}
/* Nicht die ganze Schaltfläche abdunkeln – sonst verliert auch die
   Flagge ihre Farbkraft. Zurückgenommen wird allein die Beschriftung. */
.lcmm-lang-link .lcmm-lang-t{ color: var(--lcmm-ink-soft, #5d7078); }
.lcmm-lang-link:hover .lcmm-lang-t,
.lcmm-lang-link.is-active .lcmm-lang-t{ color: var(--lcmm-ink, #16262e); }
.lcmm-lang-link:hover{ background: var(--lcmm-hover, rgba(0,0,0,.05)); }
.lcmm-lang-link.is-active{ background: var(--lcmm-soft, #eef1f0); }
.lcmm-lang-t{
  font-size: calc(var(--lcmm-size-nav, 15px) - 1px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}
.lcmm-lang--flags .lcmm-lang-link{ padding: 5px; }

/* --- Sprach-Panel in der Schublade --- */
/* Bei mehreren Sprachen darf das Panel die volle Kartenbreite
   nutzen, sonst bricht die Reihe unnötig früh um. */
.lcmm-panel-lang{ max-width: none; }
/*
 * Sprachen fließen in einer Zeile nebeneinander und brechen erst um,
 * wenn der Platz nicht mehr reicht.
 *
 * Zuvor lag hier ein Raster mit fester Mindestbreite je Spalte. Das
 * ergab bei drei Sprachen zwangsläufig zwei Spalten und einen
 * einsamen Eintrag darunter, unabhängig von der Panelbreite.
 */
.lcmm-lang-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 24px;
}
.lcmm-lang-card{
  /* Nach Inhalt bemessen, darf schrumpfen, wächst aber nicht ins Leere. */
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--lcmm-ink, #16262e);
  transition: background .18s ease;
}
.lcmm-lang-card:hover{ background: var(--lcmm-hover, rgba(0,0,0,.05)); }
.lcmm-lang-card.is-active{ background: var(--lcmm-soft, #eef1f0); }
.lcmm-lang-card .lcmm-flag{
  width: var(--lcmm-flag-lg, 34px);
  height: var(--lcmm-flag-lg, 34px);
}
.lcmm-lang-meta{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lcmm-lang-n{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.lcmm-lang-s{
  font-size: 13px;
  color: var(--lcmm-ink-soft, #5d7078);
  line-height: 1.2;
}
.lcmm-lang-check{ margin-left: auto; color: var(--lcmm-accent, #123f45); flex: 0 0 auto; }

/* --- Mobil --- */
/* Die gueltige Fassung der Sprachliste steht weiter unten. */
/* HINWEIS: Diese Fassung wird von der gueltigen weiter unten
   vollstaendig ueberschrieben. Sie bleibt nur als Rueckfall stehen,
   falls jemand den unteren Block entfernt. */
.lcmm-mlang-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--lcmm-r-pill, 999px);
  border: 1px solid var(--lcmm-border, rgba(0,0,0,.1));
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lcmm-ink-soft, #5d7078);
}
/* Die gueltige Fassung der aktiven Sprache steht weiter unten und
   nutzt die Akzentfarbe. Hier stand eine zweite Definition derselben
   drei Eigenschaften, die von dort ohnehin ueberschrieben wurde. */

/* Nur für Screenreader */
.lcmm-shell .screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================
   Kontaktzeile und Social-Icons
   ========================================================== */

/* --- Kontakt --- */
/* Alle Farben und Größen kommen aus den Einstellungen (Reiter Kontakt &
   Social). Feste Werte gibt es hier nur als Rückfall. */
.lcmm-contact{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--lcmm-contact-size, 14px);
  line-height: 1;
  white-space: nowrap;
}
.lcmm-contact--bar{ margin-right: 6px; }

.lcmm-contact-tel{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--lcmm-contact-color, var(--lcmm-ink, #16262e));
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--lcmm-r-pill, 999px);
  transition: background-color .18s ease, color .18s ease;
}
.lcmm-contact-tel:hover{ background: var(--lcmm-hover, rgba(0,0,0,.05)); }
.lcmm-contact-num{ font-weight: var(--lcmm-tel-weight, 700); }
.lcmm-contact-ico{
  display: block;
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  color: var(--lcmm-contact-ico, var(--lcmm-accent, #008fbe));
}
.lcmm-contact-ico svg{ display: block; width: 100%; height: 100%; }
.lcmm-contact-hours{
  color: var(--lcmm-contact-hours, var(--lcmm-ink-soft, #5d7078));
  font-size: .92em;
}
.lcmm-contact-frage{ display: none; }
.lcmm-contact--bar .lcmm-contact-hours{
  padding-left: 10px;
  border-left: 1px solid var(--lcmm-border, rgba(0,0,0,.1));
}

/* Einzeilige Leiste: erst ab reichlich Platz zeigen. Die zweizeiligen
   Aufbauten haben oben eigenen Raum und sind ausgenommen. */
@media (max-width: 1400px){
  .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-contact--bar .lcmm-contact-hours{ display: none; }
}
@media (max-width: 1260px){
  .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-contact--bar .lcmm-contact-num{ display: none; }
  .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-contact--bar .lcmm-contact-tel{ padding: 9px; }
}

/* --- Kontakt im Mobilmenü --- */
.lcmm-contact--mobile{
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lcmm-border-soft, rgba(0,0,0,.06));
  text-align: center;
  white-space: normal;
}
.lcmm-contact--mobile .lcmm-contact-tel{
  justify-content: center;
  font-size: 1.15em;
  padding: 10px;
  min-height: 44px;
  gap: 8px;
  overflow-wrap: anywhere;
}
.lcmm-contact--mobile .lcmm-contact-hours{ font-size: .95em; }

/* --- Social ---
   Ein Regelsatz für alle Orte. Größe, Feld, Farben und Hover kommen aus
   den Einstellungen; die Varianten unterscheiden sich nur in der Form. */
.lcmm-social{
  display: flex;
  align-items: center;
  gap: var(--lcmm-soc-gap, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lcmm-social li{ margin: 0; padding: 0; list-style: none; }

.lcmm-soc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lcmm-soc-box, 36px);
  height: var(--lcmm-soc-box, 36px);
  border-radius: 50%;
  color: var(--lcmm-soc-color, #5d7078);
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.lcmm-soc svg{
  display: block;
  width: var(--lcmm-soc, 19px);
  height: var(--lcmm-soc, 19px);
}
/* Die Symbole bestehen teils aus Umrissen, teils aus Flächen. Jede Form
   trägt ihre Füllung als Attribut; nur diese wird an die Farbe gebunden.
   Eine pauschale Füllung machte Umrisse zu Klecksen (YouTube, Spotify). */
.lcmm-soc svg [fill="currentColor"]{ fill: currentColor; }
.lcmm-soc svg [fill="none"]{ fill: none; }
.lcmm-soc svg [stroke="currentColor"]{ stroke: currentColor; }

.lcmm-soc:hover,
.lcmm-soc:focus-visible{
  color: var(--lcmm-soc-h, var(--lcmm-soc-hover, var(--lcmm-accent)));
  transform: translateY(-1px);
}

.lcmm-social--plain .lcmm-soc:hover{ background: var(--lcmm-hover, rgba(0,0,0,.05)); }
.lcmm-social--circle .lcmm-soc{ background: var(--lcmm-soc-bg, var(--lcmm-soft, #eef1f0)); }
.lcmm-social--circle .lcmm-soc:hover,
.lcmm-social--circle .lcmm-soc:focus-visible{ background: var(--lcmm-soc-bg-hover, var(--lcmm-soc-bg, var(--lcmm-soft))); }
.lcmm-social--outline .lcmm-soc{ border: 1px solid var(--lcmm-border, rgba(0,0,0,.1)); }
.lcmm-social--outline .lcmm-soc:hover{ border-color: currentColor; }

/* Einzeilige Leiste: Social weicht, wenn es eng wird. */
.lcmm-social--bar{ margin-right: 4px; }
@media (max-width: 1320px){ .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-social--bar{ display: none; } }

/* Im Mobilmenü: eigene Symbolgröße, Trefferfläche nie unter 44px. */
.lcmm-social--mobile{
  justify-content: center;
  gap: var(--lcmm-mob-soc-gap, 6px);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lcmm-border-soft, rgba(0,0,0,.06));
}
.lcmm-social--mobile .lcmm-soc{
  width:  max(calc(var(--lcmm-mob-soc, 19px) + 24px), 44px);
  height: max(calc(var(--lcmm-mob-soc, 19px) + 24px), 44px);
}
.lcmm-social--mobile .lcmm-soc svg{
  width:  var(--lcmm-mob-soc, 19px);
  height: var(--lcmm-mob-soc, 19px);
}
@media (hover: none){ .lcmm-soc:hover{ transform: none; } }


/* Buttons: Polsterung aus den Einstellungen */
.lcmm-ghost,
.lcmm-solid{
  padding: var(--lcmm-btn-py, 12px) var(--lcmm-btn-px, 22px);
}

/* ==========================================================
   Servicezeile und Layout-Varianten
   ========================================================== */

/* --- Zwei Zeilen: obere Servicezeile --- */
.lcmm-util{
  height: var(--lcmm-util-h, 42px);
  overflow: hidden;
  transition:
    height  .42s cubic-bezier(.22,1,.36,1),
    opacity .28s ease;
}
.lcmm-util-in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--lcmm-util-h, 42px);
  padding: 0 calc(var(--lcmm-pad-x, 26px) - 4px) 0 var(--lcmm-pad-x, 26px);
  border-bottom: 1px solid transparent;
  transition: border-color .34s cubic-bezier(.22,1,.36,1);
}
.lcmm-util-l,
.lcmm-util-r{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.lcmm-util-r{ margin-left: auto; }

/* Trennlinie erst zeigen, wenn die Karte sichtbar ist */
.lcmm-shell.is-float .lcmm-util-in,
.lcmm-nav.is-open .lcmm-util-in,
.lcmm-shell.is-solid .lcmm-util-in{
  border-bottom-color: var(--lcmm-border-soft, rgba(0,0,0,.05));
}

/* Beim Scrollen einklappen – die Leiste schrumpft auf die Navigation */
.lcmm-shell.is-float.lcmm-util-collapse .lcmm-util{
  height: 0;
  opacity: 0;
}
/* Geöffnetes Menü klappt sie wieder aus, damit nichts verschwindet */
.lcmm-shell.is-float.lcmm-util-collapse .lcmm-nav.is-open .lcmm-util{
  height: var(--lcmm-util-h, 42px);
  opacity: 1;
}

/* In der Servicezeile alles etwas zurückgenommen */
.lcmm-util .lcmm-contact{ font-size: calc(var(--lcmm-contact-size, 14px) - 0.5px); }
.lcmm-util .lcmm-contact-tel{ padding: 6px 10px 6px var(--lcmm-tel-inset, 8px); }
.lcmm-util .lcmm-contact-hours{
  padding-left: 12px;
  border-left: 1px solid var(--lcmm-border, rgba(0,0,0,.1));
}
.lcmm-util .lcmm-soc{
  width: calc(var(--lcmm-soc, 19px) + 12px);
  height: calc(var(--lcmm-soc, 19px) + 12px);
}
/* Halbe Differenz zwischen Kreis und Symbol – so weit steht das
   Symbol vom Rand des Kreises entfernt. */
.lcmm-util{ --lcmm-soc-inset: 6px; }
.lcmm-util .lcmm-item{ padding: 5px 11px 5px var(--lcmm-chip-inset, 7px); font-size: 13.5px; }
.lcmm-util .lcmm-lang-chip .lcmm-lang-cur{ font-size: 13.5px; }
/* Die Flagge behält ihre eingestellte Größe – sie ist das
   Erkennungsmerkmal und darf nicht mit zurückgenommen werden. */
.lcmm-util .lcmm-lang-link{ padding: 4px var(--lcmm-chip-inset, 7px); }

/* Im Zwei-Zeilen-Layout darf die Hauptzeile enger sitzen */
.lcmm-layout--utility .lcmm-bar{ height: calc(var(--lcmm-bar-h, 70px) - 4px); }
/* Im Zwei-Zeilen-Layout bleiben die eingestellten Abstände erhalten. */

/* --- Menü mittig --- */
.lcmm-layout--split .lcmm-bar{ position: relative; }
.lcmm-layout--split .lcmm-logo{ margin-right: 0; }
.lcmm-layout--split .lcmm-links{ margin-left: 0; }
.lcmm-layout--split .lcmm-links{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.lcmm-layout--split .lcmm-actions{ margin-left: auto; }

/* Bei wenig Platz zurück auf die einfache Reihe, sonst überlappt es */
@media (max-width: 1500px){
  .lcmm-layout--split .lcmm-links{
    position: static;
    left: auto;
    transform: none;
    margin-left: var(--lcmm-logo-gap, 26px);
  }
}

/* ==========================================================
   Platz in der Leiste

   Nicht nach Fensterbreite, sondern nach tatsächlichem Bedarf:
   Das Skript misst, ob Logo, Menü und Buttons nebeneinander
   passen, und schaltet stufenweise enger. Feste Pixelgrenzen
   können das nicht leisten, weil die Textlänge der Menüpunkte
   sie bestimmt – und die ändert sich mit jeder Sprache.
   ========================================================== */

/* Buttons dürfen nie schrumpfen oder abgeschnitten werden */
.lcmm-actions{ flex: 0 0 auto; }
.lcmm-ghost,
.lcmm-solid{ flex: 0 0 auto; white-space: nowrap; }
.lcmm-logo{ flex: 0 0 auto; }
/* ------------------------------------------------------------
   ÜBERLAPPUNG VERHINDERN

   Die Leiste ist eine Flex-Zeile. Ohne min-width:0 dürfen die Teile
   nicht unter ihre Inhaltsbreite schrumpfen — sie laufen dann über den
   Rand oder übereinander, statt dass die Messung greift.

   flex-wrap:nowrap hält die Zeile zusammen; der Umbruch würde die
   Leiste doppelt so hoch machen. Reicht der Platz nicht, schaltet das
   Skript auf den Menüknopf um.
   ------------------------------------------------------------ */
.lcmm-bar{ min-width: 0; flex-wrap: nowrap; }
.lcmm-links{ min-width: 0; flex-wrap: nowrap; }
.lcmm-actions{ min-width: 0; flex-wrap: nowrap; flex-shrink: 0; }
.lcmm-logo{ flex-shrink: 0; }

/* Solange die Messung noch läuft, bleibt die Leiste unauffällig statt
   kurz überzulaufen. Das Skript nimmt die Klasse danach weg. */
.lcmm-shell:not(.is-gemessen) .lcmm-links{ visibility: hidden; }
.lcmm-shell.is-forced-burger .lcmm-links{ display: none; }

/* Stufe 1 – Abstände zusammenziehen */
.lcmm-shell.is-tight-1 .lcmm-links{ gap: calc(var(--lcmm-nav-gap, 2px) * .45); }
.lcmm-shell.is-tight-1 .lcmm-item{
  padding-left: calc(var(--lcmm-nav-px, 14px) * .78);
  padding-right: calc(var(--lcmm-nav-px, 14px) * .78);
}
.lcmm-shell.is-tight-1 .lcmm-logo{ margin-right: calc(var(--lcmm-logo-gap, 26px) * .55); }
.lcmm-shell.is-tight-1 .lcmm-ghost,
.lcmm-shell.is-tight-1 .lcmm-solid{
  padding-left: calc(var(--lcmm-btn-px, 22px) * .78);
  padding-right: calc(var(--lcmm-btn-px, 22px) * .78);
}

/* Stufe 2 – Beiwerk in der Leiste weicht */
.lcmm-shell.is-tight-2 .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-contact--bar .lcmm-contact-hours{ display: none; }
.lcmm-shell.is-tight-2 .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-social--bar{ display: none; }
.lcmm-shell.is-tight-2 .lcmm-links{ gap: 0; }
.lcmm-shell.is-tight-2 .lcmm-item{
  padding-left: calc(var(--lcmm-nav-px, 14px) * .62);
  padding-right: calc(var(--lcmm-nav-px, 14px) * .62);
  font-size: calc(var(--lcmm-size-nav, 15px) - .5px);
}

/* Stufe 3 – Zweitbutton und Kontaktzeile weichen,
   damit der Hauptbutton vollständig sichtbar bleibt */
.lcmm-shell.is-tight-3 .lcmm-bar:not(.lcmm-bar--stacked) .lcmm-contact--bar{ display: none; }
.lcmm-shell.is-tight-3 .lcmm-ghost{ display: none; }
.lcmm-shell.is-tight-3 .lcmm-lang--flags,
.lcmm-shell.is-tight-3 .lcmm-lang--flag_code{ display: none; }

/* Servicezeile getrennt behandelt */
.lcmm-shell.is-util-tight .lcmm-util .lcmm-contact-hours{ display: none; }
.lcmm-shell.is-util-tight-2 .lcmm-util .lcmm-social{ display: none; }

/* ==========================================================
   Optische Randausrichtung

   Telefon-Link, Social-Icons und Sprach-Chip haben eine eigene
   Polsterung, damit die Hover-Fläche angenehm groß ist. Dadurch
   beginnt ihr sichtbarer Inhalt aber weiter innen als das Logo
   eine Zeile darunter. Die Polsterung bleibt erhalten und wird
   nur durch einen negativen Außenabstand ausgeglichen – die
   Klickfläche schrumpft also nicht.
   ========================================================== */

.lcmm-util{
  /* Muss zur Polsterung der jeweiligen Elemente passen. */
  --lcmm-tel-inset: 8px;
  --lcmm-soc-inset: 6px;
  --lcmm-chip-inset: 7px;
}

/* Links: Telefonsymbol bündig unter dem Logo */
.lcmm-util-l > .lcmm-contact:first-child .lcmm-contact-tel{
  margin-left: calc(var(--lcmm-tel-inset, 8px) * -1);
}
/* Steht dort keine Nummer, greift es beim ersten Social-Icon */
.lcmm-util-l > .lcmm-social:first-child{
  margin-left: calc(var(--lcmm-soc-inset, 6px) * -1);
}

/* Rechts: das letzte Element bündig mit der Kante darunter */
.lcmm-util-r > *:last-child.lcmm-social{
  margin-right: calc(var(--lcmm-soc-inset, 6px) * -1);
}
.lcmm-util-r > *:last-child.lcmm-lang{
  margin-right: calc(var(--lcmm-chip-inset, 7px) * -1);
}
.lcmm-util-r > .lcmm-lang-chip:last-child{
  margin-right: calc(var(--lcmm-chip-inset, 7px) * -1);
}

/* Rechte Kante der Servicezeile auf die Hauptzeile abstimmen */
.lcmm-util-in{
  padding-right: calc(var(--lcmm-pad-x, 26px) / 2);
}

/*
 * Einzeiliges Layout: Dort steht das Logo allein am linken Rand,
 * es gibt nichts, worauf ausgerichtet werden müsste.
 */

/* ==========================================================
   Freigestellte Grafik in der Aktionskarte
   ========================================================== */

.lcmm-card--illu{ overflow: hidden; }

/* Text weicht der Grafik aus, statt sie zu überlagern */
.lcmm-card--illu h3,
.lcmm-card--illu p{
  position: relative;
  z-index: 2;
  max-width: calc(100% - var(--lcmm-illu-w, 44%) - 12px);
}
.lcmm-card--illu .lcmm-btn{ position: relative; z-index: 2; }

.lcmm-illu{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  width: var(--lcmm-illu-w, 44%);
  line-height: 0;
}
.lcmm-illu img{
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* — angeschnitten: steht auf der Unterkante — */
.lcmm-illu--bleed .lcmm-illu{
  right: 0;
  bottom: calc(-2px + var(--lcmm-illu-y, 0px));
}

/* — schwebend mit weichem Bodenschatten — */
.lcmm-illu--glow .lcmm-illu{
  right: 14px;
  bottom: calc(0px + var(--lcmm-illu-y, 0px));
}
.lcmm-illu--glow .lcmm-illu::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 5%;
  transform: translateX(-50%);
  width: 78%;
  aspect-ratio: 2.4/1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(22,38,46,.14), rgba(22,38,46,0) 70%);
  z-index: -1;
}

/* — im hellen Medaillon — */
.lcmm-illu--medal .lcmm-illu{
  right: 20px;
  bottom: calc(14px + var(--lcmm-illu-y, 0px));
}
.lcmm-illu--medal .lcmm-illu::before{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.66);
  z-index: -1;
}

/* — dezent im Hintergrund — */
.lcmm-illu--ghost .lcmm-illu{
  right: -5%;
  bottom: calc(-4% + var(--lcmm-illu-y, 0px));
  width: calc(var(--lcmm-illu-w, 44%) + 14%);
  opacity: .16;
}
.lcmm-illu--ghost h3,
.lcmm-illu--ghost p{ max-width: 100%; }

/*
 * Bei schmalem Panel bekommt der Text den Vorrang. Eine Grafik,
 * die den Text auf zwei Wörter pro Zeile drückt, schadet mehr,
 * als sie nützt.
 */
@media (max-width: 1080px){
  .lcmm-card--illu .lcmm-illu{ display: none; }
  .lcmm-card--illu h3,
  .lcmm-card--illu p{ max-width: 100%; }
}

/* ==========================================================
   Servicezeile bleibt sichtbar

   Sie ist Teil derselben Karte. „Bleibt sichtbar" verhindert
   lediglich das Einklappen beim Scrollen – es entsteht kein
   zweites Element, das sich überlagern könnte.
   ========================================================== */
.lcmm-util--always.is-float .lcmm-util{
  height: var(--lcmm-util-h, 42px);
  opacity: 1;
}

/* ==========================================================
   Fokus-Zustand gegen Theme-Vorgaben absichern

   Viele Themes färben `button:focus` oder `a:focus` mit ihrer
   Akzentfarbe ein. Nach einem Klick bleibt der Fokus auf dem
   Element – der Menüpunkt behält also eine kräftig gefüllte
   Fläche mit weißer Schrift, obwohl das Panel längst offen ist.

   Hier wird der Fokus bewusst neutralisiert. Sichtbarkeit für
   die Tastaturbedienung stellt `:focus-visible` weiter unten
   her; dieser Zustand greift nur bei Tastatureingabe, nicht
   nach einem Mausklick.

   `!important` ist hier nötig, weil Theme-Regeln teils selbst
   damit arbeiten.
   ========================================================== */
.lcmm-nav .lcmm-item:focus,
.lcmm-nav .lcmm-item:active,
.lcmm-nav .lcmm-lang-chip:focus,
.lcmm-nav .lcmm-lang-chip:active,
.lcmm-nav .lcmm-link:focus,
.lcmm-nav .lcmm-link:active,
.lcmm-nav .lcmm-mflag:focus,
.lcmm-nav .lcmm-mflag:active{
  background-color: transparent !important;
  color: var(--lcmm-ink) !important;
  box-shadow: none !important;
  outline: none;
  text-decoration: none !important;
}

/* Danach die eigenen Zustände wieder herstellen –
   sie stehen später und gewinnen bei gleicher Gewichtung. */
/* Hier lag der Grund für das Grau: Diese Regel überschrieb den Hover mit
   der Kartenfarbe --lcmm-soft und setzte sich per !important durch. Jetzt
   greift zuerst die eigene Hover-Farbe, --lcmm-soft dient nur als Rückfall. */
.lcmm-nav .lcmm-item:hover,
.lcmm-nav .lcmm-lang-chip:hover{
  background-color: var(--lcmm-hover, var(--lcmm-soft, #eef1f0)) !important;
  color: var(--lcmm-hover-ink, var(--lcmm-ink)) !important;
}
.lcmm-nav .lcmm-item[aria-expanded="true"],
.lcmm-nav .lcmm-lang-chip[aria-expanded="true"]{
  background-color: var(--lcmm-soft, #eef1f0) !important;
  color: var(--lcmm-ink) !important;
}
.lcmm-nav .lcmm-link:hover,
.lcmm-nav .lcmm-link.is-hot{
  background-color: var(--lcmm-hover, rgba(0,0,0,.05)) !important;
  color: var(--lcmm-accent) !important;
}
.lcmm-nav .lcmm-item.is-highlight:not(:hover):not([aria-expanded="true"]){
  color: var(--lcmm-accent) !important;
}
.lcmm-nav .lcmm-burger:hover{
  background-color: var(--lcmm-hover, rgba(0,0,0,.05)) !important;
}

/* Tastaturbedienung bleibt klar erkennbar */
.lcmm-nav .lcmm-item:focus-visible,
.lcmm-nav .lcmm-lang-chip:focus-visible,
.lcmm-nav .lcmm-burger:focus-visible,
.lcmm-nav .lcmm-link:focus-visible,
.lcmm-nav .lcmm-mflag:focus-visible{
  outline: 2px solid var(--lcmm-accent, #123f45) !important;
  outline-offset: 2px;
  background-color: var(--lcmm-soft, #eef1f0) !important;
}

/* Auch Buttons und Links in den Panels */
.lcmm-nav .lcmm-btn:focus:not(:focus-visible),
.lcmm-nav .lcmm-ghost:focus:not(:focus-visible),
.lcmm-nav .lcmm-solid:focus:not(:focus-visible),
.lcmm-nav .lcmm-msolid:focus:not(:focus-visible),
.lcmm-nav .lcmm-mghost:focus:not(:focus-visible){
  outline: none;
  box-shadow: none !important;
}
/* Der Hauptbutton behält seine Füllung, auch mit Fokus */
.lcmm-nav .lcmm-solid:focus,
.lcmm-nav .lcmm-solid:active{
  background-color: var(--lcmm-accent, #123f45) !important;
  color: var(--lcmm-accent-ink, #fff) !important;
}
.lcmm-nav .lcmm-msolid:focus,
.lcmm-nav .lcmm-msolid:active{
  color: var(--lcmm-accent-ink, #fff) !important;
}

/* Blaues Aufblitzen beim Antippen auf Touchgeräten */
.lcmm-shell a,
.lcmm-shell button{
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================
   Sprachauswahl in der Menüleiste

   Sitzt links neben den Buttons. Dort bleibt sie erreichbar,
   auch wenn die Servicezeile beim Scrollen eingeklappt ist.
   ========================================================== */
.lcmm-actions .lcmm-lang-chip{
  padding: 6px 11px 6px 7px;
  margin-right: 2px;
}
.lcmm-actions .lcmm-lang-chip .lcmm-flag{
  width: var(--lcmm-flag, 27px);
  height: var(--lcmm-flag, 27px);
  border-radius: 50%;
}
.lcmm-actions .lcmm-lang{ margin-right: 4px; }
.lcmm-actions .lcmm-lang .lcmm-flag{ border-radius: 50%; }

/* Flaggen bleiben in jedem Zusammenhang rund */
.lcmm-flag,
.lcmm-mflag .lcmm-flag,
.lcmm-lang-card .lcmm-flag{ border-radius: 50% !important; }

/* Kein Dreh- oder Klappeffekt auf der Flagge selbst –
   nur der Pfeil daneben zeigt den Zustand an. */
.lcmm-lang-chip .lcmm-flag{ transform: none !important; transition: none !important; }


/* ==========================================================
   Die Flagge bewegt sich nie

   Sie sitzt in einem Element, das zugleich den Aufklapp-Pfeil
   trägt. Ohne diese Ausnahme erben ihre Grafiken jede Drehung
   oder Spiegelung – und es sieht aus, als sei die Sprache
   bereits gewechselt.
   ========================================================== */
.lcmm-flag,
.lcmm-flag svg,
.lcmm-flag img,
.lcmm-item[aria-expanded="true"] .lcmm-flag,
.lcmm-item[aria-expanded="true"] .lcmm-flag svg,
.lcmm-lang-chip[aria-expanded="true"] .lcmm-flag,
.lcmm-lang-chip[aria-expanded="true"] .lcmm-flag svg{
  transform: none !important;
  rotate: none !important;
  transition: none !important;
  animation: none !important;
}

/* ==========================================================
   MOBILMENÜ
   Eins zu eins aus der abgestimmten Vorschau übernommen.
   Klassennamen sind übersetzt, Werte unverändert.
   ========================================================== */

/* ---------- Leiste ---------- */
.lcmm-mobar{
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  /* Die Trefferflaechen sind breiter als die Symbole. Damit die
     Symbole optisch am Rand sitzen, ragt die Gruppe darueber hinaus. */
  margin-right: -8px;
}

.lcmm-mflag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Vorher nur 6px/9px Innenabstand ohne Mindestmass: die Trefferflaeche
     lag bei etwa 35px und damit unter jeder Empfehlung. */
  min-width:  var(--lcmm-mtap, 46px);
  min-height: var(--lcmm-mtap, 46px);
  padding: 0 9px;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--lcmm-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--lcmm-r-pill, 7px);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.lcmm-mflag .lcmm-flag{
  width:  var(--lcmm-flag, 22px);
  height: var(--lcmm-flag, 22px);
  flex: 0 0 auto;
}
@media (hover: hover){
  .lcmm-mflag:hover{ background: var(--lcmm-hover); color: var(--lcmm-hover-ink); }
}
.lcmm-mflag:active{ transform: scale(.94); }

.lcmm-burger{
  display: none;
  /* Die eingestellte Groesse gilt, aber nie unter dem Mindestmass fuer
     Trefferflaechen. Bei kleiner Einstellung war der Schalter vorher
     kaum zu treffen. */
  width:  max(var(--lcmm-burger, 42px), var(--lcmm-mtap, 46px));
  height: max(var(--lcmm-burger, 42px), var(--lcmm-mtap, 46px));
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--lcmm-r-pill, 7px);
  background: var(--lcmm-soft, #f3fafc);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform .12s ease;
}
.lcmm-burger:active{ transform: scale(.93); }
@media (hover: hover){
  .lcmm-burger:hover{ background-color: var(--lcmm-hover); }
}
/* Beschriftung neben dem Symbol. Erscheint nur, wenn im Dashboard ein
   Text hinterlegt ist — das dynamische CSS blendet sie dann ein. */
.lcmm-burger-t{
  display: none;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.lcmm-bg--plain .lcmm-burger{ background: none; }
.lcmm-bg--circle .lcmm-burger{ border-radius: 50%; }
.lcmm-bg--outline .lcmm-burger{ background: none; border: 1px solid var(--lcmm-border); }

.lcmm-burger-i{
  position: relative;
  display: block;
  width: var(--lcmm-burger-w, 18px);
  height: var(--lcmm-burger-h, 2px);
}
.lcmm-burger-i i{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--lcmm-ink);
  transition: background .12s;
}
.lcmm-burger-i i::before,
.lcmm-burger-i i::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--lcmm-ink);
  transition: transform .4s var(--lcmm-e), top .4s var(--lcmm-e);
}
.lcmm-burger-i i::before{ top: -6px; }
.lcmm-burger-i i::after{  top:  6px; }
.lcmm-burger[aria-expanded="true"] .lcmm-burger-i i{ background: transparent; }
.lcmm-burger[aria-expanded="true"] .lcmm-burger-i i::before{ top: 0; transform: rotate(45deg); }
.lcmm-burger[aria-expanded="true"] .lcmm-burger-i i::after{  top: 0; transform: rotate(-45deg); }

/* ---------- Zeilen ----------
   Neu in 2.19. Vorher lagen hier drei Systeme übereinander (Fläche am
   Knopf, Fläche an der Zeile, Härtung mit !important) und arbeiteten
   gegeneinander: Die Hoverfarbe wurde ignoriert, die Schrift blieb
   dunkel auf dunkler Fläche, und die Fläche war breiter als die
   Trennlinien.

   Jetzt gilt ein Prinzip: Die ZEILE trägt Fläche und Trennlinie. Beide
   sind exakt gleich breit, und eine Linie, die an eine hervorgehobene
   Zeile grenzt, blendet sich aus. Farben kommen als Variablen aus den
   Einstellungen (siehe dynamisches CSS). */
.lcmm-mobile{ padding: 6px var(--lcmm-mob-pad, 20px) 24px; }

.lcmm-mobile .lcmm-row{
  position: relative;
  margin: 0;
  border: 0;
  border-radius: var(--lcmm-mrow-r, 10px);
  background-color: transparent;
  transition: background-color .14s ease;
}
.lcmm-mobile .lcmm-row + .lcmm-row{ margin-top: var(--lcmm-mob-gap, 0px); }

/* Trennlinie: oben an jeder Zeile außer der ersten, gleiche Breite wie
   die Fläche. Liegt bei Zeilenabstand mittig in der Lücke. */
.lcmm-mobile .lcmm-row + .lcmm-row::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--lcmm-mob-gap, 0px) / -2);
  height: 1px;
  background: var(--lcmm-mline, var(--lcmm-border, rgba(0,0,0,.08)));
  pointer-events: none;
  transition: opacity .14s ease;
}

/* Hervorgehobene Zeile: keine Linie oben, keine Linie darunter. */
.lcmm-mobile .lcmm-row.is-hot::after,
.lcmm-mobile .lcmm-row.is-hot + .lcmm-row::after,
.lcmm-mobile .lcmm-row.is-press::after,
.lcmm-mobile .lcmm-row.is-press + .lcmm-row::after{ opacity: 0; }

/* Überfahren nur mit echter Maus – auf Touchgeräten bliebe :hover nach
   dem Antippen hängen. */
@media (hover: hover){
  .lcmm-mobile .lcmm-row:hover{ background-color: var(--lcmm-mrow-hover-bg, var(--lcmm-soft)); }
  .lcmm-mobile .lcmm-row:hover::after,
  .lcmm-mobile .lcmm-row:hover + .lcmm-row::after{ opacity: 0; }
}
/* Kurzes Feedback beim Antippen (setzt das Skript). */
.lcmm-mobile .lcmm-row.is-press{ background-color: var(--lcmm-mrow-hover-bg, var(--lcmm-soft)); }

/* Geöffnete Gruppe – steht nach dem Hover und gewinnt deshalb. */
.lcmm-mobile .lcmm-row.is-hot{ background-color: var(--lcmm-mrow-open-bg, var(--lcmm-soft)); }

.lcmm-head{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-size: var(--lcmm-size-mob, 20px);
  font-weight: var(--lcmm-mob-weight, 600);
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--lcmm-mrow-ink, var(--lcmm-ink));
  background: none;
  border: 0;
  border-radius: var(--lcmm-mrow-r, 10px);
  cursor: pointer;
  padding: var(--lcmm-mob-py, 16px) var(--lcmm-mob-px, 14px);
  min-height: 54px;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s ease, transform .3s var(--lcmm-e);
}
.lcmm-head__t{ flex: 1 1 auto; min-width: 0; display: block; }
.lcmm-head > svg{
  flex: 0 0 auto;
  color: currentColor;
  transition: transform .34s var(--lcmm-e), color .14s ease;
}
.lcmm-head[aria-expanded="true"] > svg{ transform: rotate(180deg); }
.lcmm-head:focus:not(:focus-visible){ outline: none; }

@media (hover: hover){
  .lcmm-mobile .lcmm-row:hover > .lcmm-head{ color: var(--lcmm-mrow-hover-ink, var(--lcmm-ink)); }
}
.lcmm-mobile .lcmm-row.is-press > .lcmm-head{ color: var(--lcmm-mrow-hover-ink, var(--lcmm-ink)); }
.lcmm-mobile .lcmm-row.is-hot > .lcmm-head{ color: var(--lcmm-mrow-open-ink, var(--lcmm-ink)); font-weight: 700; }
.lcmm-mobile .lcmm-row.is-hot > .lcmm-head > svg{ color: var(--lcmm-mrow-acc, var(--lcmm-accent)); }

/* Effekt-Varianten für die geöffnete Gruppe (Einstellung „Menüpunkte
   beim Antippen“). Alle bleiben innerhalb der Zeile. */
.lcmm-mi--bar .lcmm-mobile .lcmm-row > .lcmm-head::after{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 56%;
  border-radius: 0 3px 3px 0;
  background: var(--lcmm-mrow-acc, var(--lcmm-accent));
  transform: translateY(-50%) scaleY(0);
  transition: transform .3s var(--lcmm-e);
}
.lcmm-mi--bar .lcmm-mobile .lcmm-row.is-hot > .lcmm-head::after{ transform: translateY(-50%) scaleY(1); }

.lcmm-mi--line .lcmm-mobile .lcmm-row.is-hot > .lcmm-head__t,
.lcmm-mi--line .lcmm-mobile .lcmm-row.is-hot > .lcmm-head .lcmm-head__t{
  text-decoration: underline;
  text-decoration-color: var(--lcmm-mrow-acc, var(--lcmm-accent));
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.lcmm-mi--arrow .lcmm-mobile .lcmm-row.is-hot > .lcmm-head .lcmm-head__t{ transform: translateX(6px); transition: transform .3s var(--lcmm-e); }
.lcmm-mi--fill .lcmm-mobile .lcmm-row.is-hot > .lcmm-head > svg{ color: currentColor; }

/* Nummerierung (Einstellung „Punkte durchnummerieren“) */
.lcmm-mob-num .lcmm-mobile{ counter-reset: lcmmrow; }
.lcmm-mob-num .lcmm-mobile .lcmm-row{ counter-increment: lcmmrow; }
.lcmm-mob-num .lcmm-mobile .lcmm-head__t::before{
  content: counter(lcmmrow, decimal-leading-zero);
  display: inline-block;
  min-width: 2.2em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: .25em;
  opacity: .45;
}


/* ---------- Untermenü ---------- */
.lcmm-body{ height: 0; overflow: hidden; transition: height .38s var(--lcmm-e); }
.lcmm-body-in{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--lcmm-mob-px, 14px) 12px calc(var(--lcmm-mob-px, 14px) + 8px);
}
.lcmm-mob-al--center .lcmm-body-in{ padding-left: var(--lcmm-mob-px, 14px); }
/* Jede Zeile mindestens 44px hoch – gut zu treffen. */
.lcmm-body-in a{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--lcmm-mob-child-py, 11px) 12px;
  font-size: var(--lcmm-mob-child, 15.5px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--lcmm-mchild, var(--lcmm-ink-soft));
  text-decoration: none;
  border-radius: calc(var(--lcmm-mrow-r, 10px) * .8);
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, color .14s ease;
}
@media (hover: hover){
  .lcmm-body-in a:hover{ background: var(--lcmm-mchild-hover-bg, var(--lcmm-surface)); color: var(--lcmm-mchild-hover, var(--lcmm-ink)); }
}
.lcmm-body-in a:active,
.lcmm-body-in a:focus-visible{ background: var(--lcmm-mchild-hover-bg, var(--lcmm-surface)); color: var(--lcmm-mchild-hover, var(--lcmm-ink)); }


/* ---------- Buttons und Fuß ---------- */
/* Breite und Ausrichtung kommen aus dem dynamischen CSS, weil sie von
   zwei Einstellungen abhaengen. Hier nur die Trefferhoehe. */
.lcmm-msolid,
.lcmm-mghost{
  min-height: 52px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.lcmm-msolid:active,
.lcmm-mghost:active{ transform: scale(.985); }

.lcmm-msolid{
  display: block;
  margin-top: 20px;
  font-size: var(--lcmm-mob-btn-size, 16px);
  font-weight: var(--lcmm-mob-btn-weight, 600);
  padding: var(--lcmm-mob-btn-py, 16px);
  text-align: center;
  background: var(--lcmm-accent);
  color: var(--lcmm-accent-ink, #fff);
  text-decoration: none;
  border-radius: var(--lcmm-r-pill, 7px);
}
.lcmm-mghost{
  display: block;
  margin-top: var(--lcmm-mob-btn-gap, 9px);
  font-size: var(--lcmm-mob-btn-size, 16px);
  padding: var(--lcmm-mob-btn-py, 16px);
  text-align: center;
  border: 1px solid var(--lcmm-border);
  color: var(--lcmm-ink);
  text-decoration: none;
  border-radius: var(--lcmm-r-pill, 7px);
}
.lcmm-mlang{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lcmm-border-soft, rgba(0,0,0,.06));
}
.lcmm-mlang-link{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--lcmm-r-pill, 7px);
  border: 1px solid var(--lcmm-border);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lcmm-ink-soft, #6B737C);
  background: none;
}
.lcmm-mlang-link.is-active{
  color: var(--lcmm-accent-ink, #fff);
  background: var(--lcmm-accent);
  border-color: transparent;
}
.lcmm-mlang-link .lcmm-flag{ width: 20px; height: 20px; }



/* ==========================================================
   Sprachauswahl auf schmalen Panels

   Unterhalb dieser Breite stehen zwei Einträge so gedrängt,
   dass der Name umbricht. Dann lieber untereinander.
   ========================================================== */
@media (max-width: 560px){
  .lcmm-lang-card{ flex: 1 1 100%; }
}

/* Im Mobilmenü fließen die Sprachknöpfe ebenso */
.lcmm-mlang{ flex-wrap: wrap; }
.lcmm-mlang-link{
  flex: 0 1 auto;
  min-height: 46px;
  padding-block: 0;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   Flaggen immer in voller Farbe

   Sie sitzen in Elementen, die für Symbole gedimmt werden –
   Menüpunkt, Sprachlink, Mobilleiste. Ohne diese Ausnahme
   erben sie deren Abschwächung und wirken blass.
   ========================================================== */
.lcmm-flag,
.lcmm-flag svg,
.lcmm-flag img,
.lcmm-item .lcmm-flag,
.lcmm-item .lcmm-flag svg,
.lcmm-lang-link .lcmm-flag,
.lcmm-lang-link .lcmm-flag svg,
.lcmm-lang-chip .lcmm-flag,
.lcmm-lang-chip .lcmm-flag svg,
.lcmm-mflag .lcmm-flag,
.lcmm-mflag .lcmm-flag svg,
.lcmm-lang-card .lcmm-flag,
.lcmm-lang-card .lcmm-flag svg{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* ==========================================================
   MOBILMENÜ · Fokus und Bewegung
   ========================================================== */

/* ---------- Tastatur ---------- */
.lcmm-burger:focus-visible,
.lcmm-mflag:focus-visible,
.lcmm-mobile .lcmm-body-in a:focus-visible{
  outline: 2px solid var(--lcmm-accent);
  outline-offset: 2px;
}
/* Kein Fokusring nach einem Fingertipp — nur bei Tastaturbedienung. */
.lcmm-mobile .lcmm-head:focus:not(:focus-visible){ outline: none; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  .lcmm-mflag:active,
  .lcmm-burger:active,
  .lcmm-msolid:active,
  .lcmm-mghost:active,
  .lcmm-social--mobile .lcmm-soc:active{ transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   FEINSCHLIFF · Zustände, die bisher auseinanderliefen
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Pfeil am Hauptmenü folgt der Schriftfarbe des Eintrags — auch beim
   Zeigen und im geöffneten Zustand. Vorher behielt er seine Grundfarbe,
   während der Text die Hoverfarbe annahm. */
.lcmm-item > svg,
.lcmm-lang-chip > svg{ color: currentColor; opacity: .55; transition: opacity .2s var(--lcmm-e), transform .34s var(--lcmm-e); }
.lcmm-item:hover > svg,
.lcmm-item:focus-visible > svg,
.lcmm-item[aria-expanded="true"] > svg{ opacity: 1; }

/* Gleiche Übergangsdauer überall: Vorher wechselten Fläche und Schrift
   unterschiedlich schnell, was beim Überfahren flackerte. */
.lcmm-item,
.lcmm-head,
.lcmm-lang-chip{ transition: background-color .2s var(--lcmm-e), color .2s var(--lcmm-e); }

/* Der Sprachumschalter verhält sich wie ein Menüeintrag. */
.lcmm-lang-chip:hover{ background: var(--lcmm-hover, rgba(0,0,0,.05)); color: var(--lcmm-hover-ink, var(--lcmm-ink)); }


/* Tastaturbedienung sichtbar machen, ohne den Umriss doppelt zu zeichnen. */
.lcmm-shell :focus-visible{ outline: 2px solid var(--lcmm-accent, #008FBE); outline-offset: 2px; }
.lcmm-shell :focus:not(:focus-visible){ outline: none; }


/* ══════════════════════════════════════════════════════════════════════════
   ZWEIZEILIGE AUFBAUTEN · „Zwei Zeilen, Logo mittig“ und „Klassisch“

   Neu geordnet in 2.19. Vorher standen hier drei Fassungen hintereinander,
   teils doppelt, mit festen Umbruchpunkten (1099/1100 px) und festen
   Größen für Social-Icons und Telefonnummer. Die Einstellungen kamen
   dagegen nicht an.

   Hier steht nur noch der Aufbau. Alles, was vom Umschaltpunkt abhängt,
   schreibt das dynamische CSS mit dem eingestellten Wert. Social-Icons
   und Kontakt nutzen die allgemeinen Regeln oben – mit ihren
   Einstellungen.
   ══════════════════════════════════════════════════════════════════════════ */

.lcmm-bar--stacked{
  display: block;
  height: auto;
  padding-top: 14px;
  padding-bottom: 0;
}

/* ── Obere Zeile: Social links, Logo mittig, Kontakt rechts ──────────────
   justify-self statt margin:auto, damit das Logo exakt mittig bleibt,
   auch wenn links und rechts unterschiedlich breit sind. */
.lcmm-bar--stacked .lcmm-kopfzeile{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  max-height: 200px;
  opacity: 1;
  transition: max-height .34s var(--lcmm-e), opacity .24s var(--lcmm-e), padding-bottom .34s var(--lcmm-e);
}
.lcmm-bar--stacked .lcmm-kopf-links{ justify-self: start; display: flex; align-items: center; min-width: 0; }
.lcmm-bar--stacked .lcmm-kopfzeile > .lcmm-logo{ justify-self: center; margin: 0; }
.lcmm-bar--stacked .lcmm-kopf-rechts{ justify-self: end; display: flex; align-items: center; min-width: 0; }

/* ── Untere Zeile: Navigation links, Sprache und Knöpfe rechts ─────────── */
/* Kein gap in der Zeile: Das kleine Logo für die schmale Leiste ist im
   Ruhezustand 0 px breit, ein gap hätte die Navigation trotzdem um
   24 px nach rechts geschoben. Abstände entstehen über die Elemente. */
.lcmm-bar--stacked .lcmm-navzeile{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: 68px;
}
/* Bündig: Die Fläche des ersten Menüpunkts beginnt auf derselben Linie
   wie Social-Icons und Panel-Inhalt – kein Überstand nach links. */
.lcmm-bar--stacked .lcmm-navzeile .lcmm-links{
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  margin-left: 0;
}
.lcmm-bar--stacked .lcmm-navzeile .lcmm-actions{ flex: 0 0 auto; margin-left: auto; padding-left: 24px; gap: 10px; }

/* Das Social-Feld ragt links um seinen Innenraum über, damit das Symbol
   optisch bündig mit der Navigation steht. */
.lcmm-bar--stacked .lcmm-kopf-links .lcmm-social--plain{
  margin-left: calc((var(--lcmm-soc-box, 36px) - var(--lcmm-soc, 19px)) / -2);
}

/* ── Kontakt rechts oben: Überzeile, Nummer, Zeiten ─────────────────────── */
.lcmm-bar--stacked .lcmm-contact--bar{
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 0;
  line-height: 1.34;
  text-align: right;
}
.lcmm-bar--stacked .lcmm-contact-frage{
  display: block;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lcmm-contact-lead, var(--lcmm-accent));
}
.lcmm-bar--stacked .lcmm-contact-tel{ padding: 0; gap: 8px; }
.lcmm-bar--stacked .lcmm-contact-tel:hover{ background: none; opacity: .8; }
.lcmm-bar--stacked .lcmm-contact-num{ font-size: var(--lcmm-contact-num, 19px); letter-spacing: -.01em; }
.lcmm-bar--stacked .lcmm-contact-hours{ padding-left: 0; border-left: 0; font-size: .86em; }

/* ── Schmale Leiste beim Scrollen ─────────────────────────────────────────
   Die obere Zeile klappt über Höhe und Deckkraft ein (kein display:none –
   das ließe die Seite springen), das kleine Logo rückt in die
   Navigationszeile. */
.lcmm-shell.is-kompakt .lcmm-bar--stacked{ padding-top: 0; }
.lcmm-shell.is-kompakt .lcmm-kopfzeile{
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
.lcmm-shell.is-kompakt .lcmm-bar--stacked .lcmm-navzeile{ height: 62px; }
.lcmm-shell.is-kompakt .lcmm-bar--stacked .lcmm-links{ margin-left: 0; }

.lcmm-logo-klein{
  display: flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-right: 0;
  transition: max-width .34s var(--lcmm-e), opacity .26s var(--lcmm-e), margin-right .34s var(--lcmm-e);
}
.lcmm-logo-klein .lcmm-logo{ margin: 0; }
.lcmm-logo-klein img,
.lcmm-logo-klein svg{ max-height: 30px; width: auto; }
.lcmm-shell.is-kompakt .lcmm-logo-klein{ max-width: 220px; opacity: 1; margin-right: 22px; }

/* Abgrenzung nach unten kommt aus der Einstellung „Abgrenzung nach
   unten“, die Linie zwischen den Zeilen aus „Trennlinie zwischen den
   beiden Zeilen“ – beides im dynamischen CSS. */
.lcmm-layout--stacked .lcmm-nav,
.lcmm-layout--klassisch .lcmm-nav{ transition: box-shadow .3s var(--lcmm-e), border-color .3s var(--lcmm-e); }

/* ══ DAS MEGAMENÜ GEHÖRT NICHT IN DIE ZEILE ═══════════════════════════════
   Als Flex-Element neben der Navigation verteilte die Zeile beim Öffnen
   ihre Breite neu – das Wackeln. */
.lcmm-navzeile > .lcmm-drawer,
.lcmm-navzeile > .lcmm-panel{
  position: absolute;
  left: 0; right: 0; top: 100%;
  flex: none;
  width: auto;
}
.lcmm-layout--stacked .lcmm-drawer,
.lcmm-layout--stacked .lcmm-panel,
.lcmm-layout--klassisch .lcmm-drawer,
.lcmm-layout--klassisch .lcmm-panel{ overflow: visible; }
.lcmm-panel .lcmm-panel-in{ overflow: visible; }

/* ══ AUFBAU „KLASSISCH“ ════════════════════════════════════════════════
   Wie „Logo mittig“, aber ohne Morphen: Das Megamenü hängt am Menüpunkt
   und öffnet beim Zeigen. Die Leiste verändert sich dabei nicht. */
.lcmm-layout--klassisch .lcmm-kopfzeile{ height: 92px; padding-bottom: 0; }
.lcmm-layout--klassisch.is-kompakt .lcmm-kopfzeile{ height: 0; }
.lcmm-layout--klassisch .lcmm-navzeile{ height: 64px; }
.lcmm-layout--klassisch.is-kompakt .lcmm-navzeile{ height: 62px; }
.lcmm-layout--klassisch .lcmm-item{ border-radius: 6px; }

.lcmm-layout--klassisch .lcmm-links > li{ position: relative; }
.lcmm-layout--klassisch .lcmm-panel{
  position: absolute;
  left: 50%; right: auto; top: calc(100% + 14px);
  transform: translateX(-50%) translateY(10px);
  width: min(1180px, calc(100vw - 48px));
  padding: 26px;
  border: 1px solid var(--lcmm-border, #DCE7EC);
  border-radius: var(--lcmm-r, 16px);
  background: var(--lcmm-surface, #fff);
  box-shadow: var(--lcmm-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--lcmm-e), transform .32s var(--lcmm-e), visibility .26s;
  z-index: 20;
}
.lcmm-layout--klassisch .lcmm-links > li:hover > .lcmm-panel,
.lcmm-layout--klassisch .lcmm-links > li:focus-within > .lcmm-panel,
.lcmm-layout--klassisch .lcmm-panel.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Unsichtbare Brücke zwischen Eintrag und Panel. */
.lcmm-layout--klassisch .lcmm-panel::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: -16px;
  height: 16px;
}
.lcmm-layout--klassisch .lcmm-grid{
  grid-template-columns: var(--lcmm-col-list, 1.15fr) var(--lcmm-col-media, .85fr) var(--lcmm-col-card, 1.25fr);
  gap: 26px;
  padding-top: 0;
}
@media (max-width: 1280px){
  .lcmm-layout--klassisch .lcmm-grid{ grid-template-columns: 1.2fr 1fr; }
  .lcmm-layout--klassisch .lcmm-col-card{ grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce){
  .lcmm-logo-klein,
  .lcmm-bar--stacked .lcmm-kopfzeile,
  .lcmm-nav,
  .lcmm-mobile .lcmm-row,
  .lcmm-mobile .lcmm-row::after,
  .lcmm-head,
  .lcmm-body{ transition: none; }
}


/* ═══ Sprachauswahl an der Flagge in der Mobilleiste (ab 2.20.0) ═══ */
.lcmm-mobar{ position: relative; }
.lcmm-shell .lcmm-mlang-pop{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  min-width: 220px; max-width: calc(100vw - 24px); max-height: min(70vh, 440px); overflow: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--lcmm-surface, #FFFFFF); border: 1px solid var(--lcmm-border, #E6ECEF); border-radius: 8px;
  box-shadow: 0 20px 48px -20px rgba(11,15,19,.38);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.lcmm-shell .lcmm-mlang-pop.is-open{ opacity: 1; transform: none; }
.lcmm-shell .lcmm-mlang-pop[hidden]{ display: none; }
.lcmm-shell .lcmm-mlang-pop li{ margin: 0; padding: 0; list-style: none; }
.lcmm-shell .lcmm-mlang-opt{
  display: flex !important; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px !important;
  border-radius: 6px; text-decoration: none !important; color: var(--lcmm-ink, #0B0F13) !important;
  font-size: 15px; font-weight: 500; line-height: 1.2; background: transparent !important;
}
.lcmm-shell .lcmm-mlang-opt:hover, .lcmm-shell .lcmm-mlang-opt:focus-visible{ background: var(--lcmm-soft, #F3FAFC) !important; outline: none; }
.lcmm-shell .lcmm-mlang-opt[aria-current]{ font-weight: 600; }
.lcmm-shell .lcmm-mlang-opt .lcmm-flag{ flex: none; }
.lcmm-shell .lcmm-mlang-name{ flex: 1 1 auto; }
.lcmm-shell .lcmm-mlang-ok{ flex: none; color: var(--lcmm-accent, #008FBE); }
@media (prefers-reduced-motion: reduce){ .lcmm-shell .lcmm-mlang-pop{ transition: none; } }


/* ═══ Glas ohne Skript (ab 2.22.1) ═══════════════════════════════════════
   Cache- und Performance-Plugins verzögern Skripte für Besucher oft „bis zur
   ersten Interaktion“. Dann schaltet niemand die Glasfläche beim Scrollen ein,
   und die Leiste bleibt durchsichtig über dem Inhalt. Moderne Browser können
   das ohne Skript: Die Fläche blendet über die ersten 120 px Scrollweg ein.
   Sobald das Skript läuft (Klasse lcmm-js), übernimmt wieder das Skript. */
@supports (animation-timeline: scroll()) {
  .lcmm-shell:not(.lcmm-js) .lcmm-nav:not(.is-open){
    animation: lcmm-glas-ohne-skript linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
}
@keyframes lcmm-glas-ohne-skript{
  from{
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  to{
    background-color: var(--lcmm-glass, rgba(255,255,255,.72));
    border-color: var(--lcmm-border-soft, rgba(0,0,0,.05));
    box-shadow: var(--lcmm-shadow-float, 0 8px 24px -12px rgba(0,0,0,.18));
    -webkit-backdrop-filter: blur(var(--lcmm-blur, 18px)) saturate(180%);
    backdrop-filter: blur(var(--lcmm-blur, 18px)) saturate(180%);
  }
}