/* v1.18 (Matt, 02.11.): alle Knöpfe im Menü eckig (Telefon, E-Mail, Menü-Knopf am Handy). Bilder behalten 2 px. */
/* z-index (Matt, 02.11.): .kh 100005, .kh-dim 100002. Liegt über .gallery_section_zoom (12123) und
   .cookiekit_editbutton (100001), unter dem Cookie-Banner .cookiekit (370001) und der Lightense-Zoomansicht. */
/* köhler Mega-Menü v1.7 (02.11.2026)
   Varianten je Panel: data-variant="split" (A) oder "tiles" (B) am <div class="mm">. Standard: alles Split, Inspiration Kacheln.
   Alles ist unter .kh bzw. .kh-dim gekapselt, damit das bestehende Theme nicht stört. */

/* Ubuntu 500 ist in fonts.css auskommentiert, das Menü braucht den Schnitt */
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:500;font-display:swap;
  src:url("/resources/templates/fonts/ubuntu/ubuntu-v20-latin-500.woff2") format("woff2"),
      url("/resources/templates/fonts/ubuntu/ubuntu-v20-latin-500.woff") format("woff")}

.kh,.kh-dim{
  --schwarz:#070709;
  --weiss:#ffffff;
  --grau:rgba(255,255,255,.62);
  --linie:rgba(255,255,255,.16);
  --g:clamp(16px,2.1vw,30px);
  --kopf:106px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.kh,.kh *,.kh *::before,.kh *::after{box-sizing:border-box}
.kh{font-family:"Ubuntu",system-ui,sans-serif;color:var(--weiss);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.4;text-align:left}
.kh img{display:block;max-width:100%;border:0}
.kh a{color:inherit;text-decoration:none}
.kh a:hover,.kh a:focus{color:inherit}
.kh button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;border-radius:0}
.kh ul,.kh li{list-style:none;margin:0;padding:0}
.kh p{margin:0}
.kh strong{font-weight:500}
.kh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kh :focus-visible{outline:2px solid var(--weiss);outline-offset:4px}

/* ---------- Kopf ---------- */
.kh{position:fixed;inset:0 0 auto 0;height:var(--kopf);z-index:100005;display:flex;align-items:flex-start;transition:background-color .3s}
.kh.is-open,.kh.is-solid{background:var(--schwarz)}
.kh-logo{flex:none;display:block;width:288px;height:var(--kopf);background:var(--schwarz)}
.kh-logo img{width:100%;height:100%;object-fit:cover}
.kh-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2vw,34px);height:var(--kopf);padding-right:var(--g)}
.kh-top{display:flex;align-items:center;gap:clamp(18px,2.1vw,36px);height:100%}
.kh-li{height:100%;display:flex;align-items:center}
.kh .kh-btn{position:relative;display:inline-flex;align-items:center;gap:.4em;font-size:17px;font-weight:500;line-height:1;padding:.06em .05em .02em;color:var(--weiss);text-shadow:0 1px 8px rgba(0,0,0,.35);transition:text-shadow .3s}
.kh.is-open .kh-btn,.kh.is-solid .kh-btn{text-shadow:none}
.kh .kh-btn svg{width:.62em;height:.62em;margin:-.15em 0 0 .28em;transition:transform .3s var(--ease)}
.kh .kh-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Kasten-Hover nach dem köhler-Kastenlogo: weiße Fläche läuft ein, Schrift wird schwarz */
.kh-mark{position:relative;z-index:0;transition:color .3s var(--ease),translate .38s var(--ease)}
.kh-mark::after{content:"";position:absolute;inset:-.16em -.3em -.1em -.3em;background:var(--weiss);z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path .38s var(--ease)}
.kh .kh-btn:hover .kh-mark::after,.kh .kh-btn:focus-visible .kh-mark::after,.kh .kh-btn[aria-expanded="true"] .kh-mark::after{clip-path:inset(0 0 0 0)}
.kh .kh-btn:hover .kh-mark,.kh .kh-btn:focus-visible .kh-mark,.kh .kh-btn[aria-expanded="true"] .kh-mark{color:var(--schwarz);text-shadow:none}

.kh .kh-pill{display:inline-flex;align-items:center;justify-content:center;gap:.55em;line-height:1.2;padding:.73em 1.35em .67em;border:2px solid var(--weiss);border-radius:0;font-weight:500;font-size:15px;color:var(--weiss);background:transparent;transition:background-color .3s,color .3s,border-color .3s;white-space:nowrap}
.kh a.kh-pill:hover,.kh a.kh-pill:focus-visible{background:var(--weiss);color:var(--schwarz)}
.kh .kh-pill svg{width:1.05em;height:1.05em;flex:none;margin-top:-.12em}
.kh a.kh-pill--voll{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.kh a.kh-pill--voll:hover,.kh a.kh-pill--voll:focus-visible{background:transparent;color:var(--weiss)}
.kh .kh-tel{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0} /* v1.17 (Matt): ohne Hintergrund, eckig, Hover unverändert */
.kh.is-open .kh-tel{background:transparent}
.kh-lang{display:flex;gap:.7em;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.kh-lang a{opacity:.6;transition:opacity .3s}
.kh-lang a.active,.kh-lang a[aria-current],.kh-lang a:hover{opacity:1}
.kh-burger,.kh-actions{display:none}
.kh-dim{position:fixed;inset:0;background:rgba(7,7,9,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:100002}
.kh-dim.is-on{opacity:1;visibility:visible}

/* ---------- Panel: gemeinsame Basis ---------- */
.kh .mm-kicker{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--grau);margin:0 0 22px}
.mm-txt{display:block}
.mm-t{font-weight:400}
.mm-d{color:var(--grau);font-weight:300}
.mm-arrow{width:.7em;height:.7em;flex:none}
.mm-ext{display:inline-block;width:.6em;height:.6em;margin-left:.25em;vertical-align:.12em;transition:translate .38s var(--ease)}
.mm-img{position:relative;display:block}
.mm-ki{position:absolute;z-index:3;top:12px;right:12px;width:46px;height:46px;padding:8px;background:var(--schwarz);display:flex;align-items:center;justify-content:center}
.mm-ki img{width:100%;height:auto}

.mm-more{grid-area:more;display:flex;flex-wrap:nowrap;align-items:center;gap:10px 26px;padding-top:22px;border-top:1px solid var(--linie);margin-top:6px}
.kh .mm-more .mm-kicker{margin:0 6px 0 0}
.mm-more-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;flex:1;min-width:0}
.mm-more-links a{font-size:15px;font-weight:400;color:var(--grau);transition:color .3s}
.mm-more-links a:hover,.mm-more-links a:focus-visible{color:var(--weiss)}
.mm-more-links a:hover .kh-mark::after,.mm-more-links a:focus-visible .kh-mark::after{clip-path:inset(0 0 0 0)}
.mm-more-links a:hover .kh-mark,.mm-more-links a:focus-visible .kh-mark{color:var(--schwarz)}
.mm-pills{display:flex;gap:10px;flex:none;margin-left:auto}

.mm-visit{font-size:15px;font-weight:300;line-height:1.55;color:var(--grau)}
.mm-visit strong{display:block;color:var(--weiss);font-weight:500;font-size:17px;margin-bottom:.35em}
.mm-visit-a,.mm-c1{display:block}
.kh .mm-visit .kh-pill{margin-top:20px}
.mm-cdata{display:block;margin-top:12px;line-height:1.7}
.mm-cdata a{color:var(--weiss);transition:opacity .3s}
.mm-cdata a:hover{opacity:.7}
.mm-hours{display:block;margin-top:18px}
.mm-hours strong{font-size:15px;margin-bottom:.4em}
.mm-hours-g{display:block;color:var(--weiss);font-weight:400;font-size:14px;margin-top:.5em}
.mm-hours-r{display:flex;justify-content:space-between;gap:16px;max-width:240px;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}

/* ---------- Desktop ---------- */
@media (min-width:1100px){
  .mm{position:absolute;left:0;right:0;top:var(--kopf);background:var(--schwarz);
      clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--ease),visibility 0s .5s;
      max-height:calc(100vh - var(--kopf));overflow:auto}
  .mm.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--ease),visibility 0s}
  .kh.is-switching .mm{transition:none}
  .mm-in{position:relative;padding:34px var(--g) 40px;max-width:1680px;margin:0 auto;display:grid;column-gap:clamp(24px,3vw,56px);row-gap:22px}
  .mm-it,.mm-in>.mm-aside,.mm-more{opacity:0;translate:0 14px;transition:opacity .45s var(--ease),translate .45s var(--ease)}
  .mm.is-open .mm-it,.mm.is-open .mm-in>.mm-aside,.mm.is-open .mm-more{opacity:1;translate:0 0;transition-delay:calc(80ms + var(--i,0) * 55ms)}
  .kh.is-switching .mm-it,.kh.is-switching .mm-aside,.kh.is-switching .mm-more{transition-delay:0s!important}
  /* ohne JavaScript: Panels per Hover/Fokus */
  .kh:not(.kh-js) .kh-li:hover .mm,.kh:not(.kh-js) .kh-li:focus-within .mm{clip-path:none;visibility:visible}
  .kh:not(.kh-js) .kh-li:hover .mm *,.kh:not(.kh-js) .kh-li:focus-within .mm *{opacity:1}

  /* ===== A: Split-Vorschau ===== */
  .mm[data-variant="split"] .mm-in{grid-template-columns:minmax(300px,36%) 1fr;grid-template-areas:"kick stage" "list stage" "aside stage" "more more";grid-template-rows:auto auto 1fr auto;min-height:min(520px,calc(100vh - var(--kopf)))}
  .mm[data-variant="split"] .mm-in>.mm-kicker{grid-area:kick;margin:0}
  .mm[data-variant="split"] .mm-in>.mm-list{grid-area:list}
  .mm[data-variant="split"] .mm-in>.mm-aside{grid-area:aside;align-self:start;padding-top:18px;border-top:1px solid var(--linie)}
  .mm[data-variant="split"] .mm-stage{grid-area:stage;position:relative;min-height:380px;overflow:hidden;border-radius:2px;background:#111}
  .mm[data-variant="split"] .mm-it,.mm[data-variant="split"] .mm-in>.mm-aside,.mm[data-variant="split"] .mm-more{translate:none!important}
  .mm[data-variant="split"] .mm-it>a{display:flex;align-items:center;gap:.5em;padding:.16em 0;font-size:clamp(28px,2.5vw,40px);line-height:1.15;color:var(--weiss);opacity:.5;transition:opacity .35s}
  .mm[data-variant="split"] .mm-in--insp .mm-it>a{font-size:clamp(22px,1.9vw,30px)}
  .mm[data-variant="split"] .mm-aside .mm-it>a{font-size:20px;opacity:.6;padding:.25em 0}
  .mm[data-variant="split"] .mm-it.is-active>a{opacity:1}
  .mm[data-variant="split"] .mm-t{display:inline-flex;align-items:center;gap:.4em}
  .mm[data-variant="split"] .mm-it .mm-arrow{opacity:0;translate:-10px 0;transition:opacity .35s,translate .35s var(--ease)}
  .mm[data-variant="split"] .mm-it.is-active .mm-arrow{opacity:1;translate:.7em 0}
  .mm[data-variant="split"] .mm-it.is-active .mm-ext{translate:.7em 0}
  .mm[data-variant="split"] .mm-it.is-active .kh-mark::after{clip-path:inset(0 0 0 0)}
  .mm[data-variant="split"] .mm-it.is-active .kh-mark{color:var(--schwarz);translate:.3em 0}
  .mm[data-variant="split"] .mm-img{position:absolute;z-index:1;opacity:0;transition:opacity .55s var(--ease);pointer-events:none;overflow:hidden;border-radius:2px}
  .mm[data-variant="split"] .mm-img>img{width:100%;height:100%;object-fit:cover;scale:1.07;transition:scale 1.4s var(--ease)}
  .mm[data-variant="split"] .mm-img::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(7,7,9,.78),rgba(7,7,9,0))}
  .mm[data-variant="split"] .mm-it.is-active .mm-img{opacity:1}
  .mm[data-variant="split"] .mm-it.is-active .mm-img>img{scale:1}
  .mm[data-variant="split"] .mm-d{position:absolute;z-index:2;font-size:14.5px;line-height:1.45;color:var(--weiss);text-shadow:0 1px 12px rgba(0,0,0,.6);opacity:0;translate:0 8px;transition:opacity .4s,translate .4s var(--ease);pointer-events:none;max-width:30em;text-wrap:pretty}
  .mm[data-variant="split"] .mm-it.is-active .mm-d{opacity:1;translate:0 0;transition-delay:.12s}
  .mm[data-variant="split"] .mm-contact .mm-visit-a{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.4vw,40px);align-items:start}
  .mm[data-variant="split"] .mm-contact .mm-hours{margin-top:0}
  .mm[data-variant="split"] .mm-contact .mm-visit-a>.kh-pill{grid-column:1/-1;justify-self:start}

  /* ===== B: Bildkacheln ===== */
  .mm[data-variant="tiles"] .mm-stage{display:none}
  .mm[data-variant="tiles"] .mm-in{grid-template-columns:1fr 250px;grid-template-areas:"kick kick" "list aside" "more more"}
  .mm[data-variant="tiles"] .mm-in--wide{grid-template-columns:1fr;grid-template-areas:"kick" "list" "more"}
  .mm[data-variant="tiles"] .mm-in>.mm-kicker{grid-area:kick;margin:0}
  .mm[data-variant="tiles"] .mm-in>.mm-list{grid-area:list;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(14px,1.4vw,24px)}
  .mm[data-variant="tiles"] .mm-in>.mm-aside{grid-area:aside;display:flex;flex-direction:column;gap:18px;padding-left:clamp(20px,2vw,32px);border-left:1px solid var(--linie)}
  .mm[data-variant="tiles"] .mm-in>.mm-visit{display:block}
  .mm[data-variant="tiles"] .mm-it>a{display:block}
  .mm[data-variant="tiles"] .mm-img{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#111}
  .mm[data-variant="tiles"] .mm-in--insp .mm-img{aspect-ratio:1/1}
  .mm[data-variant="tiles"] .mm-in--two .mm-img{aspect-ratio:16/10}
  .mm[data-variant="tiles"] .mm-list[data-n="3"] .mm-img{aspect-ratio:4/3}
  .mm[data-variant="tiles"] .mm-img>img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
  .mm[data-variant="tiles"] .mm-t{display:flex;align-items:center;gap:.45em;margin-top:14px;font-size:clamp(18px,1.35vw,22px);line-height:1.2}
  .mm[data-variant="tiles"] .mm-d{display:block;margin-top:6px;font-size:14.5px;line-height:1.45;text-wrap:pretty}
  .mm[data-variant="tiles"] .mm-arrow{opacity:0;translate:-8px 0;transition:opacity .3s,translate .3s var(--ease)}
  .mm[data-variant="tiles"].is-open .mm-it{transition:opacity .35s,translate .45s var(--ease)}
  .mm[data-variant="tiles"] .mm-list:hover .mm-it:not(:hover),.mm[data-variant="tiles"] .mm-list:focus-within .mm-it:not(:focus-within){opacity:.42}
  .mm[data-variant="tiles"] .mm-it:hover .mm-img>img,.mm[data-variant="tiles"] .mm-it:focus-within .mm-img>img{scale:1.06}
  .mm[data-variant="tiles"] .mm-it:hover .mm-arrow,.mm[data-variant="tiles"] .mm-it:focus-within .mm-arrow{opacity:1;translate:.7em 0}
  .mm[data-variant="tiles"] .mm-it:hover .mm-ext,.mm[data-variant="tiles"] .mm-it:focus-within .mm-ext{translate:.7em 0}
  .mm[data-variant="tiles"] .mm-it:hover .kh-mark::after,.mm[data-variant="tiles"] .mm-it:focus-within .kh-mark::after{clip-path:inset(0 0 0 0)}
  .mm[data-variant="tiles"] .mm-it:hover .kh-mark,.mm[data-variant="tiles"] .mm-it:focus-within .kh-mark{color:var(--schwarz);translate:.3em 0}
  .mm[data-variant="tiles"] .mm-aside .mm-list{display:flex;flex-direction:column;gap:18px}
  .mm[data-variant="tiles"] .mm-aside .mm-it>a{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center}
  .mm[data-variant="tiles"] .mm-aside .mm-img{aspect-ratio:4/3}
  .mm[data-variant="tiles"] .mm-aside .mm-t{margin:0;font-size:17px}
  .mm[data-variant="tiles"] .mm-aside .mm-d{display:none}
}

/* ---------- Mobil ---------- */
@media (max-width:1099.98px){
  .kh,.kh-dim{--kopf:68px}
  .kh{background:transparent}
  .kh-logo{width:auto;height:var(--kopf)}
  .kh-logo img{width:auto;height:100%}
  .kh-actions{margin-left:auto;display:flex;align-items:center;gap:10px;height:var(--kopf);padding-right:var(--g)}
  .kh .kh-tel-m{width:44px;height:44px;padding:0}
  .kh .kh-tel-m svg{margin:0}
  .kh .kh-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:0;border:2px solid var(--weiss);background:rgba(7,7,9,.18);backdrop-filter:blur(6px)}
  .kh-burger span{position:relative;display:block;width:18px;height:2px}
  .kh-burger span::before,.kh-burger span::after{content:"";position:absolute;height:2px;background:currentColor;transition:transform .35s var(--ease),width .35s var(--ease),left .35s var(--ease)}
  .kh-burger span::before{width:18px;left:0;top:-4px}
  .kh-burger span::after{width:12px;left:6px;top:4px}
  .kh-burger[aria-expanded="true"] span::before{transform:translateY(4px) rotate(45deg)}
  .kh-burger[aria-expanded="true"] span::after{width:18px;left:0;transform:translateY(-4px) rotate(-45deg)}
  .kh-nav{position:fixed;inset:var(--kopf) 0 0 0;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:8px var(--g) 28px;background:var(--schwarz);overflow:auto;opacity:0;visibility:hidden;translate:0 -12px;transition:opacity .3s,translate .35s var(--ease),visibility 0s .35s}
  .kh.is-menu .kh-nav{opacity:1;visibility:visible;translate:0 0;transition:opacity .3s,translate .35s var(--ease),visibility 0s}
  .kh.is-menu{background:var(--schwarz)}
  .kh:not(.kh-js) .kh-nav{position:static;opacity:1;visibility:visible;translate:none}
  .kh-top{flex-direction:column;align-items:stretch;gap:0;height:auto}
  .kh-li{display:block;height:auto;border-bottom:1px solid var(--linie)}
  .kh .kh-btn{display:flex;width:100%;justify-content:space-between;font-size:24px;font-weight:400;padding:20px 0 16px;text-shadow:none}
  .kh .kh-btn svg{width:.5em;height:.5em}
  .kh .kh-btn[aria-expanded="true"] .kh-mark{translate:.3em 0}
  .mm{display:none;padding:0 0 22px}
  .mm.is-open,.kh:not(.kh-js) .mm{display:block}
  .kh .mm-stage,.kh .mm-in>.mm-kicker{display:none}
  .mm-in{display:flex;flex-direction:column;gap:10px}
  .mm-list{display:flex;flex-direction:column;gap:10px}
  .mm-it>a{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
  .mm-img{grid-row:1/3;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:#111}
  .mm-img>img{width:100%;height:100%;object-fit:cover}
  .mm-t{display:flex;align-items:center;gap:.4em;font-size:18px;align-self:end}
  .mm-d{font-size:14px;line-height:1.35;align-self:start;margin-top:3px}
  .mm-arrow{display:none}
  .mm-ki{width:24px;height:24px;top:4px;right:4px;padding:3px}
  .mm-aside{padding-top:10px}
  .mm-more{flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:12px;border-top:0;padding-top:12px}
  .mm-more-links{flex-direction:column;gap:12px}
  .mm-pills{flex-wrap:wrap;margin-left:0}
  .kh-nav>.kh-tel{display:flex;margin-top:28px;font-size:17px}
  .kh .kh-lang{margin-top:32px;padding-bottom:8px;justify-content:center}
}

/* ---------- v1.1: Karte (Anfahrt) und Kopfzeile Beratung ---------- */
.mm-map{background:#000}
.kh .mm-map>svg{display:block;width:100%;height:100%}
.kh .mm-map text,.kh .mm-map tspan{font-family:"Ubuntu",system-ui,sans-serif!important;font-weight:500}
.mm-visit-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:.5em}
.kh .mm-visit-head strong{margin:0}
.kh .mm-visit .mm-visit-head .kh-pill{margin-top:0}
@media (min-width:1100px){
  .mm[data-variant="split"] .mm-map::after{display:none}
  .mm[data-variant="split"] .mm-it--map .mm-d{display:none}
}

/* ---------- v1.3: Beratung, E-Mail-Button mit Telefonnummer darunter ---------- */
.mm-visit-head{align-items:flex-start}
.kh .mm-visit-head strong{padding-top:.5em}
.mm-cta{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.kh .mm-cta-tel{font-size:15px;font-weight:400;color:var(--weiss);font-variant-numeric:tabular-nums;transition:opacity .3s}
.kh .mm-cta-tel:hover{opacity:.7}

@media (prefers-reduced-motion:reduce){
  .kh *,.kh *::before,.kh *::after,.kh-dim{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}

/* v1.13 (Matt, 02.11.): Beim Scrollen kein schwarzer Kopf mehr, sondern ein halbtransparenter Balken hinter dem Menü,
   der links und rechts mit etwas Luft an den Wörtern endet (Fassade bis EN).
   Der Balken ist ein Hintergrund der Navigation selbst. Die Navigation bekommt bewusst KEIN position:relative,
   sonst richten sich die Panels nach ihr statt nach dem Kopf aus (Fehler in v1.12).
   Stellschrauben: --kh-balken (Höhe), --kh-balken-bg (Farbe/Deckkraft), --kh-balken-luft (Überstand links/rechts),
   --kh-balken-blur (Weichzeichner, ab v1.14), --kh-balken-radius (Ecken) und --kh-balken-zeit (Ein-/Ausblenden, ab v1.17). */
.kh{--kh-balken:60px;--kh-balken-bg:rgba(7,7,9,.45);--kh-balken-luft:24px;--kh-balken-blur:10px;--kh-balken-radius:2px;--kh-balken-zeit:.7s}
.kh.is-solid:not(.is-open):not(.is-menu){background:transparent}
@media (min-width:1100px){
  /* v1.15: Balken endet am Seitenrand-Abstand (--g), die Wörter rücken dafür um die Luft nach innen */
  .kh-nav{flex:none;margin-left:auto;padding-left:var(--kh-balken-luft);padding-right:calc(var(--g) + var(--kh-balken-luft))}
  /* v1.14: Weichzeichner unter dem Balken. Die Navigation bekommt Hintergrund und backdrop-filter und wird per
     clip-path genau auf den Balken zugeschnitten. Nur solange kein Panel offen ist: Beim Öffnen fallen clip-path
     und Filter weg, sonst würden sie das Panel abschneiden bzw. dessen Ausrichtung ändern. */
  .kh-nav{
    --kh-clip:inset(calc((var(--kopf) - var(--kh-balken)) / 2) var(--g) calc((var(--kopf) - var(--kh-balken)) / 2) 0 round var(--kh-balken-radius));
    background:transparent;clip-path:var(--kh-clip);
    transition:background-color var(--kh-balken-zeit) ease-in-out,-webkit-backdrop-filter var(--kh-balken-zeit) ease-in-out,backdrop-filter var(--kh-balken-zeit) ease-in-out}
  .kh.is-solid:not(.is-open) .kh-nav{
    background:var(--kh-balken-bg);
    -webkit-backdrop-filter:blur(var(--kh-balken-blur));backdrop-filter:blur(var(--kh-balken-blur))}
  /* Panel offen: Zuschnitt und Filter sofort weg, ohne Übergang, sonst ist das Panel kurz schmal */
  .kh.is-open .kh-nav{clip-path:none;transition:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent}
}
@media (max-width:1099.98px){
  .kh{transition:background-color var(--kh-balken-zeit) ease-in-out}
  .kh.is-solid:not(.is-menu){background:var(--kh-balken-bg);-webkit-backdrop-filter:blur(var(--kh-balken-blur));backdrop-filter:blur(var(--kh-balken-blur))}
}
/* Schmale Desktops 1100 bis 1239 px: Abstände enger, damit DE/EN nicht über den rechten Rand laufen (auch schon vor v1.13 knapp). */
@media (min-width:1100px) and (max-width:1239.98px){
  .kh .kh-top{gap:12px}
  .kh .kh-nav{gap:12px;--kh-balken-luft:14px}
}

/* v1.19 (Matt, 02.11.): Hover-Fläche der Hauptpunkte nur noch so hoch wie der Balken (60 px) statt der ganzen
   Kopfhöhe. Unter den Wörtern ist bis zum Panel keine aktive Fläche mehr, man kann schräg zum Panel fahren,
   ohne einen anderen Punkt zu öffnen. Das offene Panel bleibt, solange die Maus im Kopf oder Panel ist. */
@media (min-width:1100px){
  .kh .kh-li{height:var(--kh-balken)}
}

/* v1.20 (Matt, 02.11.): Hauptpunkte verlinkt. Desktop: das Wort ist ein Link zur Übersichtsseite, der Pfeil daneben
   öffnet das Panel (Hover über dem Wort öffnet es weiterhin). Handy: die Zeile klappt auf, oben im Panel steht
   „Alles zu …“ als Link. Text auf den Fotos (Split) in Teasergröße 14,5 px. */
.kh .kh-link,.mm-all{display:none}
@media (min-width:1100px){
  .kh .kh-link{display:inline-flex;align-items:center;font-size:17px;font-weight:500;line-height:1;padding:.06em .05em .02em;
    color:var(--weiss);text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:text-shadow .3s}
  .kh.is-open .kh-link,.kh.is-solid .kh-link{text-shadow:none}
  .kh .kh-btn .kh-mark{display:none}
  .kh .kh-btn{padding:.35em .2em .3em .1em}
  .kh .kh-btn svg{margin:-.1em 0 0 .15em}
  .kh .kh-link:hover .kh-mark::after,.kh .kh-link:focus-visible .kh-mark::after,.kh .kh-li.is-cur .kh-link .kh-mark::after{clip-path:inset(0 0 0 0)}
  .kh .kh-link:hover .kh-mark,.kh .kh-link:focus-visible .kh-mark,.kh .kh-li.is-cur .kh-link .kh-mark{color:var(--schwarz);text-shadow:none}
  .kh .kh-btn:focus-visible{outline:2px solid var(--weiss);outline-offset:2px}
}
@media (max-width:1099.98px){
  .kh .mm-all{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 12px;
    font-size:17px;font-weight:500;color:var(--weiss);text-decoration:none;border-bottom:1px solid var(--linie)}
  .kh .mm-all span{font-size:20px;line-height:1}
}