/* wp-content/plugins/pm-performance-core/assets/css/header.css
   Migriert 1:1 aus Code-Snippet 457 ("header css"), Header-Anteil. */

/* EINE Breite fuer ALLES: exakt 1200px
   = Breite der Startseiten-Inhaltsbloecke (.mkd-*). Header, Footer und
   Inhalt sind dadurch buendig (Desktop + Mobile). */
:root{--w:min(1200px,calc(100vw - 32px));--r:16px;--gold:#c8a96e;--hdr-mob:64px}

/* Globale Typografie (Vorgabe Samy) */
body,.mk-hdr,.mk-nav,.mk-mobile{line-height:1.1;letter-spacing:.5px;word-spacing:0}
:root{--mk-dark:#1a1a1a;--mk-white:#fff;--mk-width:var(--w);--mk-font:'Inter',system-ui,Arial,sans-serif;--mk-accent:#c8a96e;--mk-accent-light:#f6f3ee;--mk-muted:#7a736a;--mk-border:#e8e2d7}
body{margin:0;background:#f6f4f1;font-family:Inter,system-ui,Arial,sans-serif;color:#111}
/* 100vw zählt die Scrollbar mit -> 8px horizontales Scrollen auf allen Seiten.
   Mit 100% der Body-Breite rechnen und body überlaufsicher machen. */
html{overflow-x:hidden}
.mk-hero{position:relative;left:50%;margin-left:-50%;width:100%;overflow:hidden}
.mk-hero-full{height:min(82vh,720px)}
.mk-hero-small{height:200px}
.mk-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}

/* ===== Header (kompakt) =====
   --hdr-gap = Abstand der weissen Karte zum Bildschirmrand (oben).
   Kleiner = Header sitzt naeher am Rand = weniger Weiss drumherum. */
/* --hdr-top = tatsaechlicher Abstand der Karte von oben.
   Bei eingeloggtem Admin kommt die WP-Adminbar dazu. Header UND
   mobiles Menue-Panel rechnen beide damit -> keine Ueberlappung. */
:root{--hdr-gap:8px;--hdr-top:var(--hdr-gap)}
.admin-bar{--hdr-top:calc(32px + var(--hdr-gap))}
.mk-hdr-wrap{position:fixed;top:var(--hdr-top);left:0;right:0;z-index:1100;pointer-events:none}
.mk-hdr{
  /* box-sizing:border-box: Padding zaehlt IN die width:var(--w) rein statt
     zusaetzlich addiert zu werden. Sonst macht die Customizer-CSS-Regel
     (padding:10px 26px 6px auf Desktop) die Karte real 52px breiter als
     --w und sie beginnt sichtbar links vom Inhalt darunter (.mkd/.page-content
     nutzen bereits border-box). */
  box-sizing:border-box;
  width:var(--w);margin:0 auto;pointer-events:auto;background:#fff;
  border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.10);
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  padding:10px 22px 6px;position:relative;z-index:2;
}
.mk-logo{display:flex;align-items:center;justify-content:flex-start;padding-right:26px}
.mk-logo img{height:52px;width:auto;max-width:220px;display:block;object-fit:contain}

/* Rechte Spalte an ihrem Inhalt ausrichten. Sonst streckt sie sich auf
   Logo-Höhe (58px) und die Restluft landet als weisser Streifen UNTER der Nav. */
.mk-right{display:flex;flex-direction:column;justify-content:center;min-width:0}

.mk-top{display:flex;align-items:center;gap:8px}
.mk-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6e2dd;border-radius:999px;padding:0 12px;height:36px;width:min(380px,100%);position:relative}
.mk-search input{border:0;outline:0;width:100%;background:transparent;font-size:13.5px}
.mk-search button{border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.mk-lang{margin-left:auto;display:flex;align-items:center;gap:3px;background:#f6f3ee;border-radius:999px;padding:2px;height:36px;box-sizing:border-box}
.mk-lang a{display:flex;align-items:center;padding:0 10px;height:100%;border-radius:999px;text-decoration:none;color:#333;font-size:12.5px;font-weight:500}
.mk-lang a.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mk-acct{display:flex;align-items:center;gap:6px;padding:0 12px;height:36px;background:#f6f3ee;border-radius:999px;text-decoration:none;color:#111;font-size:12.5px;font-weight:500}
.mk-acct svg{display:block}
.mk-cart{position:relative;display:grid;place-items:center;width:36px;height:36px;background:#fff;border:1px solid #e6e2dd;border-radius:50%;text-decoration:none;color:#111}
.mk-cart em{position:absolute;top:-4px;right:-4px;background:#111;color:#fff;font-style:normal;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 3px}

.mk-nav{display:flex;gap:24px;margin-top:8px;padding-top:7px;border-top:1px solid #f0ede8}
.mk-navitem{position:relative}
.mk-navitem::after{content:'';position:absolute;left:-10px;right:-10px;top:100%;height:14px}
.mk-navlink{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#222;font-size:14px;padding:2px 0;position:relative}
.mk-navlink .chev{transition:transform .2s;opacity:.55}
.mk-navitem:hover .mk-navlink .chev{transform:rotate(180deg)}
.mk-navlink::before{content:'';position:absolute;left:0;right:16px;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.2s}
.mk-navitem:hover .mk-navlink::before{transform:scaleX(1)}
.mk-navlink.active{color:#000;font-weight:600}
.mk-navlink.active::before{transform:scaleX(1)}

.mk-dropdown{position:absolute;top:calc(100% + 10px);left:-12px;min-width:210px;background:#fff;border:1px solid #efe9e1;border-radius:16px;box-shadow:0 16px 34px rgba(0,0,0,.12);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:60}
.mk-navitem:hover .mk-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.mk-navitem:focus-within .mk-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.mk-navitem:focus-within .mk-navlink .chev{transform:rotate(180deg)}
.mk-dropdown a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;color:#444;font-size:14px;white-space:nowrap}
.mk-dropdown a:hover{background:#f6f3ee;color:#111}

.mk-burger{display:none}
.mk-mobile{display:none}

/* ===== Mobile (Breakpoint = Elementor-Tablet-Grenze 1024px, damit Header und
   Inhalt exakt gleichzeitig umschalten – kein eigener Tablet-Zwischenzustand) ===== */
@media(max-width:1024px){
  /* Adminbar ist mobil 46px hoch (statt 32px) */
  .admin-bar{--hdr-top:calc(46px + var(--hdr-gap))}
  .mk-hdr{width:var(--w);border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;padding:7px 14px;box-shadow:0 10px 28px rgba(0,0,0,.10)}
  .mk-logo{padding-right:0;justify-content:flex-start}
  .mk-logo img{height:38px;max-width:none}
  .mk-right{display:none}
  .mk-burger{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e5e5e5;background:#fff;border-radius:11px;margin-left:auto;cursor:pointer;position:relative;z-index:3}
  .mk-burger span,.mk-burger span::before,.mk-burger span::after{content:'';display:block;width:20px;height:2px;background:#000;position:relative;transition:.2s}
  .mk-burger span::before{position:absolute;top:-6px}
  .mk-burger span::after{position:absolute;top:6px}
  .mk-hdr.open .mk-burger span{background:transparent}
  .mk-hdr.open .mk-burger span::before{transform:rotate(45deg);top:0}
  .mk-hdr.open .mk-burger span::after{transform:rotate(-45deg);top:0}

  /* Menue als Karte UNTER dem Header -> Logo + Schliessen(X) bleiben sichtbar */
  .mk-mobile{
    pointer-events:auto;display:flex;flex-direction:column;
    position:fixed;left:50%;top:calc(var(--hdr-top) + var(--hdr-mob) + 10px);
    width:var(--w);max-height:calc(100vh - var(--hdr-top) - var(--hdr-mob) - 26px);
    background:#fff;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.16);
    padding:18px;overflow:auto;z-index:1;
    opacity:0;visibility:hidden;transform:translate(-50%,-10px);transition:.22s;
  }
  .mk-hdr.open + .mk-mobile{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .mk-mobile .mk-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6e2dd;border-radius:999px;padding:0 14px;height:44px;width:100%;margin-bottom:12px}
  .mk-mobile .mk-search input{border:0;outline:0;width:100%;background:transparent;font-size:15px}
  .mk-mobile .mk-search button{border:0;background:transparent;display:grid;place-items:center;padding:0}
  .mk-mobile .mk-lang{display:flex;gap:4px;justify-content:center;background:#f6f3ee;border-radius:999px;padding:3px;margin:0 0 12px}
  .mk-mobile .mk-lang a{flex:1;text-align:center;padding:8px 0;border-radius:999px;text-decoration:none;color:#333;font-size:14px;font-weight:500}
  .mk-mobile .mk-lang a.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .mk-m-link{display:block;padding:12px 4px;border-bottom:1px solid #eee;text-decoration:none;color:#111;font-weight:500}
  .mk-m-nav details{border-bottom:1px solid #eee}
  .mk-m-nav summary::-webkit-details-marker{display:none}
  /* Feinabstimmung (Groesse, Abstaende, Farben) fuer .mk-m-nav summary/
     .mk-m-t/.mk-m-s/.mk-m-chev kommt bewusst NICHT von hier, sondern aus
     dem WordPress-Customizer "Zusaetzliches CSS" (wp-custom-css,
     Abschnitt "Menuepunkte: gross + Untertitel") - dort mit !important
     gepflegt. display:contents haelt den Link aus deren Flex-Layout
     heraus, nur die Kinder (.mk-m-t/.mk-m-s) zaehlen als Flex-Items. */
  .mk-m-nav .mk-m-title-link{display:contents;color:inherit;text-decoration:none;cursor:pointer}
  .mk-m-nav a{display:block;padding:10px 0 10px 16px;text-decoration:none;color:#555;font-size:14px}
}
@media(max-width:520px){
  .mk-logo img{height:34px}
  .mk-hdr{padding:6px 12px}
}

/* ===== Live-Suche Dropdown =====
   (bleibt hier, weil die Live-Suche im Header-Markup sitzt, siehe PMPC_Search) */
.mk-live{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #ececec;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.14);padding:6px;display:none;z-index:90;max-height:380px;overflow:auto}
.mk-live.open{display:block}
.mk-live-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#222}
.mk-live-item:hover{background:#f6f3ee}
.mk-live-item img,.mk-live-ph{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#f0ebe3;flex-shrink:0}
.mk-live-txt{display:flex;flex-direction:column;min-width:0}
.mk-live-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-live-price{font-size:13px;color:#b8965a}
.mk-live-type{font-size:12px;color:#999}
.mk-live-msg{padding:14px;text-align:center;color:#999;font-size:13px}

/* ===== Elementor-Header: ueberfluessigen Spacer/Leerraum entfernen =====
   Bleibt bewusst bestehen, bis Schritt 6 (Cutover) den Elementor-Header
   endgueltig aus der Theme-Location entfernt. */
.elementor-location-header{min-height:0!important}
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-section{min-height:0!important;padding-top:0!important;padding-bottom:0!important;--gap:0px!important}
.elementor-location-header .elementor-widget-spacer,
.elementor-location-header .elementor-spacer,
.elementor-location-header .elementor-spacer-inner{height:0!important;min-height:0!important;margin:0!important;padding:0!important}