/* Aufklappbares Leistungsmenü in der Kopfzeile (11.10.2026, 04:45). Eigene Datei, damit stil.css ruhig bleibt. */
.lm { position: relative; }
.lm__knopf { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .9375rem; color: var(--tinte); position: relative; }
.lm__knopf svg { width: 12px; height: 12px; transition: transform .25s var(--weich); }
.lm__knopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--weich); }
.lm:hover .lm__knopf::after, .lm__knopf[aria-expanded="true"]::after { transform: scaleX(1); }
.lm__knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.lm__tafel {
  position: absolute; left: 0; top: calc(100% + 2px); transform: translateX(0) translateY(6px);
  display: grid; grid-template-columns: repeat(4, max-content); column-gap: 40px; padding: 22px 28px 24px;
  background: #fff; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 18px 48px rgba(16, 24, 32, .12);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index: 60; white-space: nowrap;
}
.lm:hover .lm__tafel, .lm:focus-within .lm__tafel, .lm__knopf[aria-expanded="true"] + .lm__tafel { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); transition-delay: 0s; }
.lm__spalte { display: grid; gap: 6px; align-content: start; padding-left: 14px; border-left: 1px solid var(--linie); }
.lm__kat { margin: 0 0 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.kopf__nav .lm__spalte a { padding: 2px 0; font-size: .9375rem; line-height: 1.45; color: var(--tinte); }
.kopf__nav .lm__spalte a::after { display: none; }
.kopf__nav .lm__spalte a small { font-size: .8125rem; color: var(--leise); margin-left: 6px; }
.kopf__nav .lm__spalte a:hover { color: var(--akzent); }
/* Was nur das Handy-Menü braucht, ist am PC unsichtbar; die Knopfleiste ist dort keine eigene Box. */
.lm__weitere, .lm__plus, .kopf__unter { display: none; }
.kopf__aktion { display: contents; }
@media (max-width: 1040px) {
  .lm { display: contents; }
  .lm__knopf { display: none; }
  .lm__tafel { position: static; transform: none; opacity: 1; visibility: inherit; display: grid; grid-template-columns: 1fr; gap: 14px; padding: 8px 0 14px; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; white-space: normal; }
  .lm__spalte { border-left: 0; padding-left: 0; }
}

/* ── Handy-Menü „Ruhige Liste", 13.10.2026 (Phil wählte Entwurf 1 von dreien) ──────────────
   Vorher war das offene Menü 1,6 Bildschirme lang, Exposés und Muster standen doppelt drin und
   der Knopf „Kostenlosen Entwurf" lag unter dem Rand. Jetzt passt alles auf einen Bildschirm:
   die zwei Exposés mit Unterzeile zuerst, „Weitere Leistungen" zum Aufklappen (zweispaltig),
   dann Muster, Über uns, Kontakt; Anmelden und der Knopf stehen fest unten. Nur mit Skript
   (ohne Skript bleibt die umbrechende Zeile von oben), PC unberührt. */
@media (max-width: 1040px) {
  html.js [data-nur-pc] { display: none !important; } /* !important: die Zeilenregeln unten setzen display selbst */
  html.js .kopf__nav { padding: 6px var(--rand) 0; }
  html.js .kopf__nav > * { flex-shrink: 0; }
  html.js .kopf__nav > a:has(.kopf__unter) { order: -1; }

  /* Zeilen: Titel links, Unterzeile darunter, Pfeil rechts */
  html.js .kopf__nav a:not(.knopf) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: center; align-items: center;
    min-height: 58px; padding: 8px 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; font-weight: 400; color: var(--tinte);
    border-bottom: 1px solid var(--linie-fein);
  }
  html.js .kopf__nav a:not(.knopf)::after {
    content: ""; display: block; position: static; grid-column: 2; grid-row: 1 / span 2; width: 8px; height: 8px; margin-right: 4px;
    background: none; border: solid var(--leise); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: none;
  }
  html.js .kopf__unter { display: block; grid-column: 1; grid-row: 2; margin-top: 2px; font-size: .8125rem; line-height: 1.3; letter-spacing: 0; color: var(--leise); }

  /* Weitere Leistungen: Aufklapper mit Plus, Tafel zweispaltig */
  html.js .lm { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .35s var(--weich); }
  html.js .lm:has(.lm__knopf[aria-expanded="true"]) { grid-template-rows: auto 1fr; }
  html.js .lm__knopf {
    display: block; position: relative; width: 100%; min-height: 58px; padding: 17px 32px 17px 0; text-align: left;
    font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; color: var(--tinte); border-bottom: 1px solid var(--linie-fein);
  }
  html.js .lm__knopf::after, html.js .lm__knopf svg { display: none; }
  html.js .lm__weitere { display: inline; }
  html.js .lm__plus { display: block; position: absolute; right: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
  html.js .lm__plus::before, html.js .lm__plus::after { content: ""; position: absolute; left: 1px; right: 1px; top: 7.25px; height: 1.5px; background: var(--akzent); transition: transform .3s var(--weich); }
  html.js .lm__plus::after { transform: rotate(90deg); }
  html.js .lm__knopf[aria-expanded="true"] .lm__plus::after { transform: rotate(0); }
  html.js .lm__tafel, html.js .lm:hover .lm__tafel, html.js .lm:focus-within .lm__tafel {
    position: static; transform: none; opacity: 1; min-height: 0; overflow: hidden; visibility: hidden;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--linie-fein);
    white-space: normal; transition: visibility 0s linear .35s;
  }
  html.js .lm__knopf[aria-expanded="true"] + .lm__tafel { visibility: visible; transition-delay: 0s; }
  html.js .lm__tafel::after { content: ""; grid-column: 1 / -1; height: 14px; }
  html.js .lm__spalte { gap: 0; padding: 16px 0 4px; }
  html.js .lm__kat { margin-bottom: 6px; }
  /* 44px Tippfläche je Link (Review 29.10.2026: vorher rund 32px) */
  html.js .kopf__nav .lm__spalte a { display: block; min-height: 44px; padding: 12px 0; font-size: .9375rem; line-height: 1.3; letter-spacing: 0; border: 0; }
  html.js .kopf__nav .lm__spalte a::after { display: none; }

  /* Knopfleiste: klebt unten, auch wenn die Liste aufgeklappt länger wird als der Bildschirm */
  html.js .kopf__aktion {
    display: grid; grid-template-columns: 1fr 1.9fr; gap: 10px; position: sticky; bottom: 0; z-index: 1;
    margin: auto calc(-1 * var(--rand)) 0; padding: 14px var(--rand) calc(16px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--linie);
  }
  html.js .kopf__aktion a:not(.knopf) {
    display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 16px; border: 1px solid #b9c6d6; border-radius: 3px;
    font-size: 1rem; font-weight: 550; letter-spacing: -.005em; color: var(--tinte); background: #fff;
  }
  html.js .kopf__aktion a:not(.knopf)::after { display: none; }
  html.js .kopf__aktion .knopf { width: auto; margin: 0; min-height: 52px; font-size: 1rem; }
}

/* ── Kopfleiste am Handy, 14.10.2026 (Phil) ─────────────────────────────────────────────────
   „Das Burgermenü soll drei Striche haben, und wenn man ganz hoch scrollt, soll der Header ein
   Stück höher werden. Die Lesefortschrittsanzeige soll weg."
   Ganz oben ist die Leiste 68 px hoch (--kopf-oben), beim Scrollen 56 px (--kopf, wie bisher).
   --kopf bleibt der kleine Wert, weil klebende Teile (Bestellstrecke, Sprungziele) darauf stehen.
   Den Unterschied gleicht main mit einem Innenabstand aus: Er liegt ganz oben unter der Leiste,
   darum sieht man ihn nie, und beim Scrollen verschiebt sich nichts. Nur auf Seiten mit Kopfleiste
   (:has), Bestellen und Erstgespräch haben keine. Offen wird die Leiste klein, weil die Menüliste
   bei --kopf beginnt. */
.fortschritt { display: none; }
@media (max-width: 1040px) {
  :root { --kopf-oben: 68px; }
  html.js:has(.kopf) main#inhalt { padding-top: calc(var(--kopf-oben) - var(--kopf)); }
  html.js .kopf:not([data-fest]):not([data-offen]) { height: var(--kopf-oben); }
  html.js .kopf:not([data-fest]):not([data-offen]) .kopf__logo img { height: 32px; }
  /* Drei Striche: der mittlere ist ein Hintergrund des Elements, die äußeren sind ::before/::after.
     Offen wird daraus ein Kreuz, der mittlere Strich zieht sich zusammen. */
  .kopf__menue i { width: 22px; height: 14px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat; transition: background-size .25s var(--weich); }
  .kopf__menue i::after { top: 12.5px; }
  .kopf__menue[aria-expanded="true"] i { background-size: 0 1.5px; }
  .kopf__menue[aria-expanded="true"] i::before, .kopf__menue[aria-expanded="true"] i::after { top: 6.25px; }
}

/* ── Registrieren in der Kopfzeile, 14.10.2026 (Phil: „oben auch direkt einen Registrieren-Button") ─────────
   Am PC ein heller Knopf mit Rahmen zwischen „Anmelden" und dem vollen Knopf, damit der volle Knopf der eine
   Hauptweg bleibt. Am Handy steht er in der Knopfleiste unten neben „Anmelden", der volle Knopf darunter
   über die ganze Breite. */
.kopf__nav .kopf__registrieren { min-height: 44px; padding: 9px 18px; background: #fff; color: var(--tinte); border-color: #b9c6d6; }
.kopf__nav .kopf__registrieren:hover { color: var(--akzent-dunkel); border-color: var(--akzent); background: #fff; }
@media (max-width: 1040px) {
  html.js .kopf__aktion { grid-template-columns: 1fr 1fr; }
  html.js .kopf__aktion .knopf:not(.kopf__registrieren) { grid-column: 1 / -1; }
  html.js .kopf__aktion .kopf__registrieren { min-height: 52px; font-size: 1rem; font-weight: 550; border-radius: 3px; }
}
/* Zwischen Handy-Menü und breitem Bildschirm wird die Kopfzeile mit dem zusätzlichen Knopf eng. Gemessen in Schritten
   von 1041 bis 1520 px (scratchpad kopf-mass.mjs): Bis 1520 px bricht kein Eintrag in zwei Zeilen um; bis 1360 px entfällt
   „Start" (das Logo führt ebenfalls zur Startseite); bis 1250 px steht nur „Anmelden" da, „Registrieren" erreicht man dort
   über den Umschalter auf der Anmeldeseite. */
@media (min-width: 1041px) and (max-width: 1520px) {
  .kopf__nav { gap: 18px; }
  .kopf__nav a, .lm__knopf { white-space: nowrap; }
}
@media (min-width: 1041px) and (max-width: 1360px) {
  .kopf__nav { gap: 16px; }
  .kopf__nav > a[data-nur-pc][href]:first-child { display: none; }
  .kopf__nav .knopf { padding-inline: 14px; }
}
@media (min-width: 1041px) and (max-width: 1250px) {
  .kopf__nav .kopf__registrieren { display: none; }
}
@media (min-width: 1041px) and (max-width: 1120px) {
  .kopf__nav { gap: 12px; }
}