/* ═══════════════════════════════════════════════════════════════════════════
   Rahmen des Themes „Life Design": Kopf, Handymenü, Fußzeilen-Hülle, Nach-oben-Knopf
   und die Vorlagen des Themes (404, Suche, einfache Seiten, Beiträge).

   Der Kopf sieht aus und verhält sich wie der bisherige Zephyr-Kopf (gestaltet in
   plugins/life-design-core/assets/rahmen.css, Runde 33): schwebender weißer Kasten, klebend
   100 → 80 px am Desktop, am Handy gleichbleibend 78 px. Die Werte unten sind die Endstände der
   vielen Runden in rahmen.css, gemessen am 26.09.2026 (r33/theme/mass/kopf-alt-kontakt.json).

   rahmen.css bleibt geladen: Farben und Maße (:root), Schrift „Manrope LD", Fußzeileninhalt
   (.ld-fussneu), Megamenü-Grundregeln (.ld-kopf-drop …), Seitenübergang. Seine Zephyr-Regeln
   (.l-header, .w-nav …) greifen hier ins Leere.

   Abweichung mit Absicht: Zwischen 900 und 1099 px Breite überdeckte das Menü unter Zephyr das Logo
   und der Knopf „Projekt anfragen" ragte rechts aus dem Bild. Hier gilt dort schon die Handy-Form.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sprunglink ─────────────────────────────────────────────────────────── */
.ld-sprung {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  padding: 12px 18px; border-radius: 12px;
  background: var(--ld-tinte, #012f47); color: #fff;
  font: 700 16px/1.2 "Manrope LD", system-ui, sans-serif;
  transform: translateY(-160%); transition: transform .25s ease;
}
.ld-sprung:focus, .ld-sprung:focus-visible { transform: none; color: #fff; outline: 2px solid #1fb1fb; outline-offset: 2px; }

/* ═══ KOPF ══════════════════════════════════════════════════════════════════ */
.ld-kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 111; }
.admin-bar .ld-kopf { top: var(--wp-admin--admin-bar--height, 32px); }
.ld-kopf ul { list-style: none; margin: 0; padding: 0; }
.ld-kopf li { margin: 0; }
.ld-kopf a { -webkit-tap-highlight-color: transparent; }
.ld-kopf a:focus-visible, .ld-kopf button:focus-visible { outline: 2px solid var(--ld-akzent); outline-offset: 2px; border-radius: 10px; }

/* Balken über die volle Breite: halb durchsichtiges Weiß mit Unschärfe, feine Linie unten */
.ld-kopf-balken {
  padding: 18px var(--ld-rand);
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 rgba(10, 23, 32, .08);
  line-height: normal;
  transition: padding var(--ld-kopf-zeit) var(--ld-kopf-kurve), background-color .35s ease, box-shadow .35s ease;
}
.ld-kopf.ist-klebend .ld-kopf-balken { padding-top: 8px; padding-bottom: 8px; }   /* 18 + 64 + 18 = 100, klebend 8 + 64 + 8 = 80 */

/* Zeile in der Layoutbreite: Logo und Knopf stehen auf den Kanten des Inhalts */
.ld-kopf-innen {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--ld-breite);
  height: 64px;
  margin: 0 auto;
  font-family: "Manrope LD", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ld-tinte);
  transition: height var(--ld-kopf-zeit) var(--ld-kopf-kurve), padding var(--ld-kopf-zeit) var(--ld-kopf-kurve);
}
/* Der weiße Kasten (nur Handy und Tablet sichtbar) */
.ld-kopf-innen::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(10, 23, 32, 0);
  transition: background-color var(--ld-kopf-zeit) var(--ld-kopf-kurve), border-color var(--ld-kopf-zeit) var(--ld-kopf-kurve), box-shadow var(--ld-kopf-zeit) var(--ld-kopf-kurve);
}
.ld-kopf-marke, .ld-kopf-nav { position: relative; z-index: 1; }

/* ── Logo (PNG als Rückfall, assets/kopf-logo.js des Plugins legt das SVG darüber) ── */
.ld-kopf-marke { flex: 0 0 auto; display: flex; align-items: center; height: 100%; }
.ld-kopf-logo {
  position: relative;
  display: block;
  width: 172px;
  height: 36px;
  transform-origin: 0 50%;
  transition: transform var(--ld-kopf-zeit) var(--ld-kopf-kurve);
}
.ld-kopf-logo img { display: block; width: 172px; height: 36px; object-fit: contain; object-position: left center; }
.ld-kopf.ist-klebend .ld-kopf-logo { transform: scale(.92); }
.ld-kopf-marke.ld-logo-svg .ld-kopf-logo img { display: none; }
.ld-kopf-logo .ld-logo {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;           /* der i-Punkt fliegt über den Rahmen hinaus */
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.ld-erstbesuch .ld-kopf-marke:not(.ld-logo-svg) .ld-kopf-logo { animation: ldLogoWarten 1.4s linear both; }
}

/* ── Hauptnavigation (Desktop) ──────────────────────────────────────────── */
.ld-kopf-nav { flex: 1 1 auto; display: flex; align-items: center; height: 100%; min-width: 0; margin-left: 50.4px; }
.ld-kopf-liste { display: flex; align-items: center; gap: 2px; width: 100%; }
.ld-kopf-liste > li { height: 50px; line-height: 50px; }
.ld-kopf-liste > li:first-child { margin-left: auto; }
.ld-kopf-liste > li.ld-kopf-cta { margin-left: auto; }
.ld-kopf-liste > li > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 17px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1;
  color: var(--ld-tinte);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s var(--ld-kurve), color .3s var(--ld-kurve);
}
.no-touch .ld-kopf-liste > li:not(.ld-kopf-cta) > a:hover,
.ld-kopf-liste > li.current-menu-item:not(.ld-kopf-cta) > a,
.ld-kopf-liste > li.current-menu-ancestor:not(.ld-kopf-cta) > a { background: rgba(1, 47, 71, .07); color: var(--ld-tinte); }

/* Knopf „Projekt anfragen" (setzt class-rahmen.php) */
.ld-kopf-liste > li.ld-kopf-cta > a {
  height: 48px;
  padding: 0 17px;
  gap: 10px;
  border-radius: 999px;
  background: linear-gradient(100deg, #0a84c9 0%, #1fb1fb 50%, #5fd0ff 100%);
  background-size: 180% 100%;
  background-position: 0 0;
  color: #fff;
  box-shadow: none;
  transition: background-position .6s var(--ld-kurve), transform .35s var(--ld-kurve), box-shadow .35s var(--ld-kurve);
}
.no-touch .ld-kopf-liste > li.ld-kopf-cta > a:hover { background-position: 100% 0; color: #fff; transform: translateY(-1px); }
.ld-kopf-liste > li.ld-kopf-cta > a:active { transform: scale(.97); }
.no-touch .ld-kopf-liste > li.ld-kopf-cta > a:hover .ld-kopf-cta-pfeil { background: #fff; color: #0a84c9; transform: translate(2px, -2px); }

/* ── Megamenü „Leistungen" (Grundregeln .ld-kopf-drop … in rahmen.css) ─── */
.ld-kopf-liste > li.ld-hat-drop { position: relative; }
.ld-kopf-liste > li.ld-hat-drop:hover .ld-kopf-winkel,
.ld-kopf-liste > li.ld-hat-drop:focus-within .ld-kopf-winkel { transform: rotate(180deg); }
.ld-kopf-liste > li.ld-hat-drop:hover .ld-kopf-drop,
.ld-kopf-liste > li.ld-hat-drop:focus-within .ld-kopf-drop { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.ld-kopf-liste > li.ld-hat-drop:hover .ld-kopf-drop-h,
.ld-kopf-liste > li.ld-hat-drop:focus-within .ld-kopf-drop-h { transform: none; }
.ld-kopf .ld-kopf-drop li a {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 14px 40px 14px 14px;
  border-radius: 16px;
  text-decoration: none;
  font-family: "Manrope LD", system-ui, sans-serif;
  line-height: 1.3;
  color: var(--ld-tinte);
  transition: background .25s ease;
}
.no-touch .ld-kopf .ld-kopf-drop li a:hover { background: var(--ld-grau-1); }
.ld-kopf .ld-kopf-drop li a::before { content: ""; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 13px; background-color: var(--ld-grau-1); background-position: center; background-size: 20px 20px; background-repeat: no-repeat; transition: background-color .3s ease; }
.no-touch .ld-kopf .ld-kopf-drop li a:hover::before { background-color: #fff; }
.ld-kopf .ld-kopf-drop li a::after { content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .4s var(--ld-kurve); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012f47' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.no-touch .ld-kopf .ld-kopf-drop li a:hover::after { opacity: 1; transform: none; }
.ld-kopf a.ld-kopf-drop-alle {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 16px 18px; height: auto;
  border-radius: 16px; background: var(--ld-tinte);
  font-family: "Manrope LD", system-ui, sans-serif; font-size: 14.5px; font-weight: 700; line-height: 1.2;
  color: #fff; text-decoration: none;
  transition: background .25s ease;
}
.no-touch .ld-kopf a.ld-kopf-drop-alle:hover { background: #02415f; color: #fff; }

/* ═══ HANDYMENÜ (unter 1100 px; neu seit 27.09.2026) ═════════════════════════
   Vorbild: das Menü von Hudson EV. Ruhige Kopfleiste über die volle Breite (oben durchsichtig, beim
   Scrollen weiß mit Unschärfe und feiner Linie), rechts ein runder Menüknopf, ab 640 px daneben
   „Projekt anfragen". Der Knopf öffnet ein weißes Vollbild-Paneel (#ld-handymenue in header.php, umlaut-ok):
   große Menüpunkte mit feinen Linien und Pfeil, „Leistungen" klappt die sechs Leistungen auf, unten
   der Knopf „Projekt anfragen", Telefon, E-Mail, Social. Logo und Knopf bleiben beim Öffnen stehen,
   der Knopf wird zum X. Verhalten (Sperre, Fokusfalle, Esc, Aufklappen): assets/kopf.js.
   Maße: Kopfleiste 68 px (10 + 48 + 10). --header-height bleibt 78 px, damit die Inhalte der Seiten
   genau dort beginnen wie bisher (startseite-v3.css rechnet damit).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ld-hm-tinte: #0a1720;
  --ld-hm-blau: #0a84c9;
  --ld-hm-linie: rgba(10, 23, 32, .1);
  --ld-hm-grau: #f1f2f4;
  --ld-hm-auf: cubic-bezier(.22, 1, .36, 1);     /* weich ausrollen */
  --ld-hm-zu: cubic-bezier(.65, 0, .35, 1);      /* zügig, ohne Nachschwingen */
}
/* Handy-Teile gibt es am Desktop nicht */
.ld-kopf-burger, .ld-kopf-anfrage, .ld-hm { display: none; }
/* Menü offen: die Seite darunter steht (kopf.js setzt die Klasse) */
html.ld-hm-gesperrt, html.ld-hm-gesperrt body { overflow: hidden !important; }

@media (max-width: 1099px) {
  :root { --header-height: 78px !important; --header-sticky-height: 78px !important; }

  /* ── Kopfleiste ─────────────────────────────────────────────────────────── */
  .ld-kopf-balken,
  .ld-kopf.ist-klebend .ld-kopf-balken {
    position: relative;
    z-index: 2;
    padding: 10px var(--ld-rand);
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 1px 0 rgba(10, 23, 32, 0);
    transition: background-color .4s ease, box-shadow .4s ease;
  }
  .ld-kopf.ist-klebend .ld-kopf-balken { background: rgba(255, 255, 255, .84); box-shadow: 0 1px 0 rgba(10, 23, 32, .07); }
  .ld-kopf-innen,
  .ld-kopf.ist-klebend .ld-kopf-innen { height: 48px; padding: 0; gap: 10px; }
  .ld-kopf-innen::before { display: none; }
  .ld-kopf-logo, .ld-kopf-logo img { width: 150px; height: 32px; }
  .ld-kopf.ist-klebend .ld-kopf-logo { transform: none; }
  /* Tippfläche des Logos auf 48 px Höhe (das Logo selbst ist 32 px hoch) */
  .ld-kopf-logo::after { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
  .ld-kopf-nav { display: none; }

  /* Runder Menüknopf: zwei Linien, die zum X werden */
  .ld-kopf-burger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ld-hm-grau);
    color: var(--ld-hm-tinte);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, transform .35s var(--ld-hm-auf);
  }
  .no-touch .ld-kopf-burger:hover { background: #e6e8eb; }
  .ld-kopf-burger:active { transform: scale(.92); }
  .ld-kopf .ld-kopf-burger:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: 3px; border-radius: 50%; }
  .ld-kopf-burger-linien { position: relative; display: block; width: 18px; height: 18px; }
  .ld-kopf-burger-linien i {
    position: absolute; left: 0; top: 8px;
    width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    transform-origin: 50% 50%;
    transition: transform .5s var(--ld-hm-auf);
  }
  .ld-kopf-burger-linien i:nth-child(1) { transform: translateY(-3.5px); }
  .ld-kopf-burger-linien i:nth-child(2) { transform: translateY(3.5px); }
  .ld-kopf-burger[aria-expanded="true"] .ld-kopf-burger-linien i:nth-child(1) { transform: rotate(45deg); }
  .ld-kopf-burger[aria-expanded="true"] .ld-kopf-burger-linien i:nth-child(2) { transform: rotate(-45deg); }

  /* ── Paneel ─────────────────────────────────────────────────────────────── */
  .ld-hm {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: #fff;
    font-family: "Manrope LD", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ld-hm-tinte);
    /* geschlossen: ein Streifen hinter der Kopfleiste, der beim Öffnen nach unten aufgeht */
    clip-path: inset(0 0 calc(100% - 68px) 0 round 0 0 28px 28px);
    visibility: hidden;
    transition: clip-path .42s var(--ld-hm-zu), visibility 0s linear .42s;
  }
  .ld-hm[hidden] { display: none; }
  .ld-hm.ist-offen {
    clip-path: inset(0 0 0 0 round 0 0 0 0);
    visibility: visible;
    transition: clip-path .62s var(--ld-hm-auf), visibility 0s;
  }
  .admin-bar .ld-hm { top: var(--wp-admin--admin-bar--height, 46px); }

  /* Offen: die Kopfleiste wird eins mit dem Paneel (weiß, ohne Linie; die Linie kommt erst, wenn das
     Paneel gescrollt ist). „Projekt anfragen" oben tritt zurück, das Paneel hat den großen Knopf. */
  html.ld-hm-offen .ld-kopf .ld-kopf-balken { background: #fff; box-shadow: 0 1px 0 rgba(10, 23, 32, 0); }
  html.ld-hm-offen .ld-kopf.ist-verschoben .ld-kopf-balken { box-shadow: 0 1px 0 rgba(10, 23, 32, .08); }

  /* Scrollfläche unter der Kopfleiste: der Inhalt läuft nie unter Logo und Knopf */
  .ld-hm-h {
    position: absolute;
    top: 68px; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px var(--ld-rand) calc(22px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Menüpunkte ─────────────────────────────────────────────────────────── */
  .ld-hm ul { list-style: none; margin: 0; padding: 0; }
  .ld-hm li { margin: 0; padding: 0; }
  .ld-hm a { -webkit-tap-highlight-color: transparent; }
  .ld-hm-liste > li { position: relative; }
  /* feine Linie unter jedem Punkt, zeichnet sich beim Öffnen von links */
  .ld-hm-liste > li::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--ld-hm-linie);
    transform-origin: 0 50%;
  }
  .ld-hm .ld-hm-punkt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 14px 2px 14px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: clamp(26px, 7.4vw, 32px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
    color: var(--ld-hm-tinte);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease;
  }
  /* Pfeil rechts in Blau (Maske, Farbe aus background-color) */
  .ld-hm .ld-hm-punkt::after {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-left: auto;
    background: var(--ld-hm-blau);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .45s var(--ld-hm-auf);
  }
  .ld-hm a.ld-hm-punkt:active::after { transform: translateX(5px); }
  .no-touch .ld-hm a.ld-hm-punkt:hover::after { transform: translateX(5px); }
  .ld-hm a.ld-hm-punkt:active, .no-touch .ld-hm .ld-hm-punkt:hover { color: #1d3a4d; }
  /* die Seite, auf der man gerade ist: in Blau, mit Punkt davor */
  .ld-hm .current-menu-item > .ld-hm-punkt,
  .ld-hm .current-menu-ancestor > .ld-hm-punkt { color: var(--ld-hm-blau); }
  .ld-hm .current-menu-item > .ld-hm-punkt::before,
  .ld-hm .current-menu-ancestor > .ld-hm-punkt::before {
    content: ""; order: -1; flex: 0 0 auto;
    width: 8px; height: 8px; margin-right: -6px; border-radius: 50%;
    background: currentColor;
  }
  .ld-hm .ld-hm-punkt:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: -2px; border-radius: 12px; }

  /* „Leistungen": Winkel nach unten, dreht sich beim Aufklappen */
  .ld-hm .ld-hm-klapp::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  }
  .ld-hm .ld-hm-klapp[aria-expanded="true"]::after { transform: rotate(-180deg); }

  /* ── Untermenü Leistungen: klappt mit der Höhe auf (grid 0fr → 1fr) ─────────── */
  .ld-hm-unter {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .42s var(--ld-hm-zu), visibility 0s linear .42s;
  }
  .ld-hm-klapp[aria-expanded="true"] + .ld-hm-unter {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .6s var(--ld-hm-auf), visibility 0s;
  }
  .ld-hm-unter-h { min-height: 0; overflow: hidden; }
  .ld-hm .ld-hm-leistungen { display: grid; gap: 2px; padding: 0 0 6px; }
  .ld-hm-leistungen li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .3s var(--ld-hm-zu);
  }
  .ld-hm-klapp[aria-expanded="true"] + .ld-hm-unter .ld-hm-leistungen li,
  .ld-hm-klapp[aria-expanded="true"] + .ld-hm-unter .ld-hm-alle {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .6s var(--ld-hm-auf);
    transition-delay: calc(60ms + var(--ld-j, 0) * 40ms);
  }
  .ld-hm-leistungen li:nth-child(2) { --ld-j: 1; }
  .ld-hm-leistungen li:nth-child(3) { --ld-j: 2; }
  .ld-hm-leistungen li:nth-child(4) { --ld-j: 3; }
  .ld-hm-leistungen li:nth-child(5) { --ld-j: 4; }
  .ld-hm-leistungen li:nth-child(6) { --ld-j: 5; }
  .ld-hm-alle { --ld-j: 6; }
  .ld-hm-leistungen a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    min-height: 44px;
    padding: 9px 0;
    border-radius: 14px;
    text-decoration: none;
    color: var(--ld-hm-tinte);
  }
  .ld-hm-leistungen a:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: 2px; }
  .ld-hm-sym {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--ld-hm-grau);
    color: #012f47;
    transition: background-color .25s ease, color .25s ease;
  }
  .ld-hm-sym svg { display: block; width: 21px; height: 21px; }
  .ld-hm-leistungen a:active .ld-hm-sym, .no-touch .ld-hm-leistungen a:hover .ld-hm-sym { background: #e3f2fb; color: var(--ld-hm-blau); }
  .ld-hm-leistungen b { grid-column: 2; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
  .ld-hm-leistungen small { grid-column: 2; margin-top: 2px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #5b6570; }
  .ld-hm a.ld-hm-alle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin: 8px 0 18px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--ld-hm-grau);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--ld-hm-tinte);
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .3s var(--ld-hm-zu), background-color .25s ease;
  }
  .ld-hm a.ld-hm-alle svg { color: var(--ld-hm-blau); transition: transform .45s var(--ld-hm-auf); }
  .ld-hm a.ld-hm-alle:active svg, .no-touch .ld-hm a.ld-hm-alle:hover svg { transform: translateX(4px); }
  .ld-hm a.ld-hm-alle:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: 2px; }

  /* ── Fuß des Paneels: Anfrage, Kontakt, Social, Slogan ──────────────────── */
  .ld-hm-fuss { display: grid; gap: 18px; margin-top: auto; padding-top: 32px; }
  .ld-hm a.ld-hm-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 8px 8px 8px 26px;
    border-radius: 999px;
    background: linear-gradient(100deg, #0a84c9 0%, #1fb1fb 55%, #5fd0ff 100%);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: 0 14px 28px -18px rgba(10, 132, 201, .6);
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
    transition: background-position .6s var(--ld-hm-auf), transform .35s var(--ld-hm-auf);
  }
  .ld-hm a.ld-hm-knopf:active { transform: scale(.98); }
  .no-touch .ld-hm a.ld-hm-knopf:hover { background-position: 100% 0; color: #fff; }
  .ld-hm-knopf i {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--ld-hm-blau);
    transition: transform .45s var(--ld-hm-auf);
  }
  .ld-hm a.ld-hm-knopf:active i, .no-touch .ld-hm a.ld-hm-knopf:hover i { transform: translate(2px, -2px); }
  .ld-hm a.ld-hm-knopf:focus-visible { outline: 2px solid var(--ld-hm-tinte); outline-offset: 3px; }
  .ld-hm-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
  .ld-hm-wege { display: grid; }
  .ld-hm-wege a {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px;
    font-size: 16px; font-weight: 600; letter-spacing: -.005em;
    color: var(--ld-hm-tinte); text-decoration: none;
  }
  .ld-hm-wege svg { flex: 0 0 auto; color: var(--ld-hm-blau); }
  .ld-hm-wege a:focus-visible, .ld-hm-sozial a:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: 2px; border-radius: 10px; }
  .ld-hm-sozial { display: flex; gap: 8px; }
  .ld-hm-sozial a {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(10, 23, 32, .13);
    color: var(--ld-hm-tinte);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .ld-hm-sozial a:active, .no-touch .ld-hm-sozial a:hover { background: var(--ld-hm-tinte); border-color: var(--ld-hm-tinte); color: #fff; }
  .ld-hm-sozial a:focus-visible { border-radius: 50%; }
  .ld-hm .ld-hm-slogan { margin: 0; padding-top: 16px; border-top: 1px solid var(--ld-hm-linie); font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #6b7280; }
  .ld-hm-slogan b { font-weight: 700; color: var(--ld-hm-tinte); }

  /* ── Choreografie beim Öffnen: Punkte steigen gestaffelt auf, Linien zeichnen sich ── */
  .ld-hm-liste > li, .ld-hm-fuss > * { opacity: 0; transform: translateY(16px); }
  .ld-hm-liste > li::after { transform: scaleX(0); }
  .ld-hm.ist-offen .ld-hm-liste > li,
  .ld-hm.ist-offen .ld-hm-fuss > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .75s var(--ld-hm-auf);
    transition-delay: calc(110ms + var(--ld-i, 0) * 50ms);
  }
  .ld-hm.ist-offen .ld-hm-liste > li::after {
    transform: none;
    transition: transform .9s var(--ld-hm-auf);
    transition-delay: calc(170ms + var(--ld-i, 0) * 50ms);
  }
  .ld-hm-liste > li:nth-child(2) { --ld-i: 1; }
  .ld-hm-liste > li:nth-child(3) { --ld-i: 2; }
  .ld-hm-liste > li:nth-child(4) { --ld-i: 3; }
  .ld-hm-liste > li:nth-child(5) { --ld-i: 4; }
  .ld-hm-liste > li:nth-child(6) { --ld-i: 5; }
  .ld-hm-liste > li:nth-child(7) { --ld-i: 6; }
  .ld-hm-fuss > :nth-child(1) { --ld-i: 5; }
  .ld-hm-fuss > :nth-child(2) { --ld-i: 6; }
  .ld-hm-fuss > :nth-child(3) { --ld-i: 7; }
  /* Beim Schließen bleibt der Inhalt stehen, das Paneel zieht sich darüber zu */
  .ld-hm.ist-schliesst .ld-hm-liste > li,
  .ld-hm.ist-schliesst .ld-hm-fuss > * { opacity: 1; transform: none; transition: none; }
  .ld-hm.ist-schliesst .ld-hm-liste > li::after { transform: none; transition: none; }
}

/* Zephyr gab dem Balken am Handy 1rem Rand (18 px); seit dem neuen Handymenü steht das Logo auf der
   Kante des Inhalts (--ld-rand, 20 px), deshalb hier nichts mehr */

/* ── Tablet (640 bis 1099 px): „Projekt anfragen" in der Kopfleiste ─────────────────── */
@media (min-width: 640px) and (max-width: 1099px) {
  .ld-kopf-anfrage {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin-left: auto;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(100deg, #0a84c9 0%, #1fb1fb 55%, #5fd0ff 100%);
    background-size: 160% 100%;
    font-family: "Manrope LD", system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .3s ease, visibility 0s linear 0s, background-position .6s var(--ld-hm-auf), transform .35s var(--ld-hm-auf);
  }
  .no-touch .ld-kopf-anfrage:hover { background-position: 100% 0; color: #fff; }
  .ld-kopf-anfrage:active { transform: scale(.97); }
  .ld-kopf .ld-kopf-anfrage:focus-visible { outline: 2px solid var(--ld-hm-blau); outline-offset: 3px; }
  .ld-kopf-anfrage + .ld-kopf-burger { margin-left: 0; }
  html.ld-hm-offen .ld-kopf-anfrage { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
}
/* Tablet hochkant (640 bis 899 px): eine Spalte wie am Handy, größere Punkte; unten Knopf und
   Kontakt nebeneinander statt untereinander */
@media (min-width: 640px) and (max-width: 899px) {
  .ld-hm-h { padding-top: 18px; padding-bottom: 32px; }
  .ld-hm .ld-hm-punkt { font-size: 36px; min-height: 80px; }
  .ld-hm-fuss { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 36px; padding-top: 40px; }
  .ld-hm-kontakt { gap: 12px 28px; flex-wrap: nowrap; }
  .ld-hm .ld-hm-slogan { grid-column: 1 / -1; }
}
/* Tablet quer und kleine Fenster (900 bis 1099 px): zwei Spalten, rechts Anfrage und Kontakt als Karte */
@media (min-width: 900px) and (max-width: 1099px) {
  .ld-hm-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    align-content: start;
    column-gap: clamp(48px, 7vw, 96px);
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .ld-hm .ld-hm-punkt { font-size: clamp(34px, 4vw, 40px); min-height: 76px; }
  .ld-hm .ld-hm-leistungen { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ld-hm-fuss { margin-top: 0; padding: 26px; border-radius: 28px; background: #f6f7f9; align-self: start; position: sticky; top: 0; }
  .ld-hm-kontakt { display: grid; justify-content: stretch; }
  .ld-hm .ld-hm-slogan { border-top-color: rgba(10, 23, 32, .08); }
}

/* ── Erster Aufruf der Sitzung: der Kopf kommt Stück für Stück herein ──── */
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  html.ld-erstbesuch .ld-kopf-liste > .menu-item { animation: ldKopfPunkt .8s var(--ld-kurve) both; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(1) { animation-delay: .30s; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(2) { animation-delay: .37s; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(3) { animation-delay: .44s; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(4) { animation-delay: .51s; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(5) { animation-delay: .58s; }
  html.ld-erstbesuch .ld-kopf-liste > .menu-item:nth-child(6) { animation-delay: .65s; }
  html.ld-erstbesuch .ld-kopf-liste > .ld-kopf-cta { animation: ldKopfKnopf .9s var(--ld-kurve) .78s both; }
  html.ld-erstbesuch .ld-kopf .ld-kopf-cta-pfeil { animation: ldKopfPfeil .8s var(--ld-kurve) 1.25s both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
  html.ld-erstbesuch .ld-kopf-anfrage { animation: ldKopfPunkt .8s var(--ld-kurve) .32s both; }
  html.ld-erstbesuch .ld-kopf-burger { animation: ldKopfPunkt .8s var(--ld-kurve) .4s both; }
}

/* ── Neuladen mitten auf der Seite: bis zur ersten Eingabe keine Übergänge im Kopf ── */
html.ld-kopf-ruhig .ld-kopf-balken,
html.ld-kopf-ruhig .ld-kopf-innen,
html.ld-kopf-ruhig .ld-kopf-innen::before,
html.ld-kopf-ruhig .ld-kopf-logo { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ld-kopf-innen, .ld-kopf-balken, .ld-kopf-logo, .ld-kopf .ld-kopf-cta-pfeil { transition: none !important; }
  /* Handymenü: sofort offen und zu, ohne Staffelung (kopf.js wartet dann auch nicht) */
  .ld-hm, .ld-hm *, .ld-hm *::after, .ld-kopf-burger, .ld-kopf-burger-linien i, .ld-kopf-anfrage { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ═══ FUSSZEILE (Hülle; der Inhalt .ld-fussneu ist in rahmen.css gestaltet) ═══ */
.ld-fuss-rahmen {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--ld-rand);
  background: var(--ld-grau-1);
  color: var(--ld-grau-9);
  font-family: "Manrope LD", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Die Fußzeile steht schon in einem Rand; ihr eigener Innenrand (rahmen.css) bleibt wie unter Zephyr */

/* ═══ NACH-OBEN-KNOPF ═══════════════════════════════════════════════════════ */
.ld-nach-oben {
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 0;
  margin: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ld-tinte);
  color: #fff;
  box-shadow: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform: translate3d(0, 150%, 0);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), background .2s ease;
}
.ld-nach-oben.ist-aktiv, .ld-nach-oben:focus-visible { transform: none; }
.ld-nach-oben:hover, .ld-nach-oben:focus { color: #fff; }
.ld-nach-oben svg { display: block; }
@media (max-width: 600px) { .ld-nach-oben { margin: 10px; } }
@media (prefers-reduced-motion: reduce) { .ld-nach-oben { transition: none; } }

/* ═══ VORLAGEN DES THEMES ══════════════════════════════════════════════════ */
.ld-t-abschnitt { padding-top: 0 !important; }
/* Textblöcke aus aufgelösten WPBakery-Hüllen (functions.php): Abstand wie unter WPBakery (.wpb_text_column) */
.ld-text .ld-textblock + .ld-textblock, .ldc-recht-text .ld-textblock + .ld-textblock { margin-top: 1.4em; }
.ld-text > *:last-child, .ld-text .ld-textblock > *:last-child { margin-bottom: 0; }
.ld-text img { max-width: min(100%, 640px); border-radius: 16px; }
.ld-text .ld-text-knopf a {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: var(--ld-tinte); color: #fff !important; text-decoration: none !important; font-weight: 700;
}
.ldc .ld-t-klein, .ld-t-klein { margin: 0 0 14px; font-family: "Manrope LD", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #6b7280; }

/* Beitrag */
.ld-t-beitrag { max-width: 72ch; }
.ld-t-bild { margin: 0 0 40px; }
.ld-t-bild img { display: block; width: 100%; height: auto; border-radius: 24px; }
.ld-t-zurueck { margin: 48px 0 0; }
.ld-t-leer p { font-family: "Manrope LD", system-ui, sans-serif; font-size: 1.0625rem; color: #3f3f46; }

/* Blättern (Archive, Suche) */
.ld-t-blaettern .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; }
.ld-t-blaettern .page-numbers.current { background: var(--ld-tinte); color: #fff; }

/* Suchfeld (Suche, 404) */
.ld-suche { margin: 0; font-family: "Manrope LD", system-ui, sans-serif; }
.ld-suche-label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #6b7280; }
.ld-suche-feld {
  position: relative; display: flex; align-items: center; gap: 8px;
  max-width: 560px; padding: 6px 6px 6px 18px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(1, 47, 71, .14), 0 18px 40px -28px rgba(10, 132, 201, .45);
  transition: box-shadow .3s ease;
}
.ld-suche-feld:focus-within { box-shadow: 0 0 0 2px #0a84c9, 0 18px 40px -24px rgba(10, 132, 201, .55); }
.ld-suche-feld svg { flex: 0 0 auto; color: var(--ld-tinte); opacity: .7; }
.ld-suche .ld-suche-feld input[type=search] {
  flex: 1 1 auto; min-width: 0; min-height: 48px; line-height: 48px; padding: 0 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none !important;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ld-tinte);
}
.ld-suche .ld-suche-feld input[type=search]::placeholder { color: #6b7280; opacity: 1; font-weight: 500; }
.ld-suche .ld-suche-feld input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ld-suche .ld-suche-feld button {
  flex: 0 0 auto; height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--ld-tinte); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
  transition: background .25s ease, transform .35s var(--ld-kurve);
}
.no-touch .ld-suche .ld-suche-feld button:hover { background: #02415f; }
.ld-suche .ld-suche-feld button:active { transform: scale(.97); }

/* 404 und leere Suche: links die Zahl und das Suchfeld, rechts der Wegweiser */
.ld-404 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: start; font-family: "Manrope LD", system-ui, sans-serif; }
.ldc .ld-404-zahl {
  display: flex; margin: 0 0 40px;
  font-size: clamp(7rem, 17vw, 15rem); font-weight: 800; letter-spacing: -.06em; line-height: .82;
  color: var(--ld-tinte);
}
.ld-404-zahl span:nth-child(2) { color: #1fb1fb; }   /* die Null in Logo-Hellblau (Verlaufsschrift fiel am Handy aus) */
.ldc .ld-404-start { margin: 32px 0 0; }
.ld-t-hinweis { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: #3f3f46; max-width: 40ch; }
@media (prefers-reduced-motion: no-preference) {
  .ld-404-zahl span { display: inline-block; animation: ld404Ein .9s cubic-bezier(.22, 1, .36, 1) both; }
  .ld-404-zahl span:nth-child(2) { animation-delay: .08s; }
  .ld-404-zahl span:nth-child(3) { animation-delay: .16s; }
}
@keyframes ld404Ein { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }

/* Wegweiser: Zeilen mit feiner Linie, Pfeil im Kreis (wie die Kontaktwege der Fußzeile) */
.ld-wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(1, 47, 71, .14); }
.ld-wege li { margin: 0; border-bottom: 1px solid rgba(1, 47, 71, .14); }
.ld-wege a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 20px 4px; color: var(--ld-tinte); text-decoration: none;
  transition: padding .45s var(--ld-kurve);
}
.ld-wege b { grid-column: 1; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.ld-wege small { grid-column: 1; font-size: 14.5px; font-weight: 500; color: #52525b; }
.ld-wege i { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(1, 47, 71, .06); transition: transform .45s var(--ld-kurve), background .3s ease, color .3s ease; }
.ld-wege i svg { width: 15px; height: 15px; }
.no-touch .ld-wege a:hover { padding-left: 14px; }
.no-touch .ld-wege a:hover i { background: var(--ld-tinte); color: #fff; transform: translate(2px, -2px); }

/* Suchtreffer */
.ld-t-suche { margin: 0 0 48px; }
.ld-treffer { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(1, 47, 71, .14); font-family: "Manrope LD", system-ui, sans-serif; }
.ld-treffer li { margin: 0; border-bottom: 1px solid rgba(1, 47, 71, .14); }
.ld-treffer a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 24px 4px; color: var(--ld-tinte); text-decoration: none; transition: padding .45s var(--ld-kurve); }
.ld-treffer b { grid-column: 1; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.ld-treffer span { grid-column: 1; max-width: 72ch; font-size: 1rem; line-height: 1.6; color: #3f3f46; }
.ld-treffer small { grid-column: 1; font-size: 13.5px; font-weight: 600; color: #0a6fb0; overflow-wrap: anywhere; }
.ld-treffer i { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(1, 47, 71, .06); transition: transform .45s var(--ld-kurve), background .3s ease, color .3s ease; }
.ld-treffer i svg { width: 16px; height: 16px; }
.no-touch .ld-treffer a:hover { padding-left: 14px; }
.no-touch .ld-treffer a:hover i { background: var(--ld-tinte); color: #fff; transform: translateX(3px); }

@media (max-width: 900px) {
  .ld-404 { grid-template-columns: 1fr; }
  .ldc .ld-404-zahl { margin-bottom: 28px; }
}
@media (max-width: 600px) {
  .ld-suche-feld { padding-left: 14px; }
  .ld-suche .ld-suche-feld button { padding: 0 16px; }
  .ld-wege a, .ld-treffer a { padding-top: 18px; padding-bottom: 18px; }
}