/* Kopfzeile und Leistungsmenue (Phase C, 27.10.2026)

   Eine Kopfzeile fuer Unterseiten und Kostenseite, dazu das aufklappbare
   Leistungsmenue, das auch die Startseite benutzt. Eigene Klassen (km-),
   damit nichts mit den Stilen der einzelnen Seiten kollidiert.

   Samsung Internet faerbt Seiten im Dunkelmodus selbst um und ignoriert
   dabei "color-scheme: only light". Helle FLAECHEN dunkelt es ab, Schrift
   und SVG-Linien laesst es stehen. Deshalb sind die Menuestriche ein SVG
   in Schriftfarbe statt Flaechen oder Rahmen - so verschwinden sie nicht. */

/* ---------- Leistungsmenue (Startseite und Unterseiten) ---------- */
.km-dd{position:relative}
.km-dd-knopf{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:550;color:inherit;padding:8px 0}
.km-dd-knopf:hover,.km-dd.offen .km-dd-knopf,.km-dd-knopf[data-aktiv]{color:var(--rust,#A65621)}
.km-pfeil{width:14px;height:14px;transition:transform .2s ease}
.km-dd.offen .km-pfeil{transform:rotate(180deg)}
.km-dd-panel{position:absolute;top:calc(100% + 12px);left:-18px;width:372px;background:#fff;color:#26382C;
  border:1px solid rgba(38,56,44,.12);border-radius:18px;padding:10px;
  box-shadow:0 30px 60px -24px rgba(27,42,33,.45),0 6px 18px -8px rgba(27,42,33,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;z-index:95}
.km-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}  /* Bruecke fuer die Maus */
.km-dd.offen .km-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.km-dd-liste{display:grid;gap:2px}
.km-dd-liste a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:12px;text-decoration:none;color:#26382C}
.km-dd-liste a b{font-family:'Archivo',sans-serif;font-weight:650;font-size:15.5px;line-height:1.25}
.km-dd-liste a span{font-size:13px;opacity:.68;line-height:1.35}
.km-dd-liste a:hover,.km-dd-liste a:focus-visible{background:#F1EDE4}
.km-dd-liste a[aria-current] b{color:#A65621}
.km-dd-fuss{display:block;margin:6px 4px 2px;padding:11px 10px 6px;border-top:1px solid rgba(38,56,44,.12);
  font-size:14px;font-weight:600;color:#A65621;text-decoration:none}
.km-dd-fuss:hover{text-decoration:underline}

/* ---------- Kopfzeile der Unterseiten und der Kostenseite ---------- */
.km-kopf{position:sticky;top:0;z-index:90;background:rgba(241,237,228,.95);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid rgba(38,56,44,.14);padding:0;color:#26382C}
.km-wrap{max-width:max(var(--max,1180px),1024px);margin:0 auto;padding:0 22px;height:68px;display:flex;align-items:center;gap:22px}
.km-marke{display:inline-flex;align-items:center;text-decoration:none;color:#26382C;flex:none}
.km-marke img{width:31px;height:auto;margin-right:14px}
.km-marke-txt{display:flex;flex-direction:column;line-height:1}
.km-wort{font-family:'Archivo',sans-serif;font-weight:750;letter-spacing:.14em;font-size:17px;white-space:nowrap}
.km-wort i{font-style:normal;color:#A65621;margin-left:.4em}
.km-zusatz{font-size:9px;font-weight:500;letter-spacing:.03em;margin-top:5px;opacity:.72;white-space:nowrap;
  transition:opacity .3s ease,transform .3s ease,max-height .3s ease;max-height:14px}
/* Solange die Seitenueberschrift zu sehen ist, steht dasselbe nicht
   noch einmal unter dem Logo - der Zusatz erscheint beim Scrollen. */
.km-kopf.km-oben .km-zusatz{opacity:0;transform:translateY(-3px)}
.km-nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:15px}
.km-nav>a{color:#26382C;text-decoration:none;font-weight:550;white-space:nowrap}
.km-nav>a:hover,.km-nav>a[aria-current]{color:#A65621}
.km-cta{display:inline-flex;align-items:center;background:#26382C;color:#F1EDE4;text-decoration:none;font-weight:600;
  font-size:15px;padding:11px 20px;border-radius:99px;white-space:nowrap;transition:background .18s ease}
.km-cta:hover{background:#A65621}
.km-tel{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid rgba(38,56,44,.18);border-radius:12px;color:#26382C;text-decoration:none}
.km-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km-burger{display:none;width:44px;height:44px;flex:none;background:none;border:0;cursor:pointer;color:#26382C;
  padding:0;align-items:center;justify-content:center}
.km-burger .striche{width:26px;height:26px;display:block}
.km-burger .striche path{transition:transform .25s ease,opacity .2s ease;transform-box:view-box;transform-origin:12px 12px}
.km-burger[aria-expanded="true"] .l1{transform:translateY(6px) rotate(45deg)}
.km-burger[aria-expanded="true"] .l2{opacity:0}
.km-burger[aria-expanded="true"] .l3{transform:translateY(-6px) rotate(-45deg)}

/* Handy-Menue */
.km-mobil{position:fixed;left:0;right:0;top:68px;bottom:0;z-index:89;background:#F1EDE4;overflow-y:auto;
  padding:18px 22px calc(28px + env(safe-area-inset-bottom));color:#26382C}
.km-mobil[hidden]{display:none}
.km-gruppe{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9A4F1E;margin:6px 0 6px}
.km-mobil a{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:#26382C;padding:12px 0;border-bottom:1px solid rgba(38,56,44,.12)}
.km-mobil a b{font-family:'Archivo',sans-serif;font-weight:650;font-size:19px}
.km-mobil a span{font-size:13.5px;opacity:.7}
.km-mobil .km-mobil-weitere{margin-top:20px}
.km-mobil .km-mobil-cta{margin-top:24px;align-items:center;justify-content:center;background:#A65621;color:#fff;border:0;
  border-radius:14px;padding:17px;font-family:'Archivo',sans-serif;font-weight:650;font-size:17px}
html.km-menue-offen{overflow:hidden}

@media(max-width:1080px){.km-cta{display:none}}
@media(max-width:900px){
  .km-nav{display:none}
  .km-tel{margin-left:auto}
  .km-burger{display:inline-flex}
}
@media(max-width:720px){
  .km-wrap{padding:0 18px;height:62px;gap:12px}
  .km-mobil{top:62px}
  .km-wort{font-size:16px}
  .km-zusatz{font-size:8.6px}
}
@media(max-width:350px){.km-zusatz{display:none}}
@media(prefers-reduced-motion:reduce){.km-dd-panel,.km-zusatz,.km-burger .striche path,.km-pfeil{transition:none}}
/* backdrop-filter macht die Kopfzeile zum Bezugsrahmen fuer position:fixed -
   das Handy-Menue waere sonst nur so hoch wie die Kopfzeile. */
html.km-menue-offen .km-kopf{-webkit-backdrop-filter:none;backdrop-filter:none;background:#F1EDE4}