/* =========================================================
   EF BRANDING SYSTEM V1 - Elbetal Fotografie als EF vermarkten
   Ziel: EF als wiedererkennbare Kurzmarke erklaeren und subtil auf der gesamten Website etablieren.
   Scope: nur .ef-branding-* und Header-Ergaenzungen, keine Formular-/Shoplogik.
   ========================================================= */
:root{
  --efb-navy:#061b49;
  --efb-navy-2:#0b255c;
  --efb-cream:#fff8ec;
  --efb-gold:#f3c760;
  --efb-green:#74b42c;
  --efb-cyan:#2bb8d7;
  --efb-magenta:#d94c8c;
  --efb-orange:#f28b2e;
  --efb-shadow:0 18px 50px rgba(6,27,73,.18);
}
.ef-brand-with-mark{display:flex!important;align-items:center;gap:14px;text-decoration:none;min-width:0}
.ef-brand-with-mark .ef-brand-logo{flex:0 0 auto}
.ef-header-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#18b8e5 0%,#78b82a 30%,#f3c760 54%,#f28b2e 74%,#d94c8c 100%);color:#fff;font-weight:1000;letter-spacing:-.08em;font-size:25px;line-height:1;box-shadow:0 12px 28px rgba(6,27,73,.20);text-shadow:0 2px 10px rgba(0,0,0,.24);position:relative;overflow:hidden}
.ef-header-mark::after{content:"";position:absolute;inset:2px;border-radius:16px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.ef-header-brandcopy{display:flex;flex-direction:column;gap:2px;min-width:130px;max-width:220px}
.ef-header-brandcopy strong{font-size:18px;line-height:1;color:#061b49;letter-spacing:.02em;font-weight:1000}
.ef-header-brandcopy span{font-size:11px;line-height:1.25;color:rgba(6,27,73,.70);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ef-branding-ribbon{background:linear-gradient(90deg,#061b49 0%,#0b255c 22%,#10458e 42%,#198dc2 58%,#74b42c 72%,#f3c760 86%,#d94c8c 100%);padding:1px 0;box-shadow:0 10px 26px rgba(6,27,73,.08);position:relative;z-index:4}
.ef-branding-ribbon-inner{max-width:1560px;margin:0 auto;padding:10px clamp(16px,3vw,34px);display:flex;align-items:center;justify-content:center;gap:16px;min-height:46px;background:linear-gradient(90deg,rgba(6,27,73,.96),rgba(6,27,73,.78));color:#fff;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}
.ef-branding-ribbon .ef-mini-mark{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:30px;padding:0 10px;border-radius:999px;background:#fff;color:#061b49;font-weight:1000;letter-spacing:-.06em;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.ef-branding-ribbon p{margin:0;color:#fff;font-size:13px;line-height:1.45;font-weight:700;text-align:center;max-width:1050px}
.ef-branding-ribbon p strong{font-weight:1000;color:#fff}
.ef-branding-ribbon a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);font-weight:900;white-space:nowrap}
.ef-branding-ribbon a:hover{border-bottom-color:#fff;color:#fff}
.ef-branding-story{max-width:1560px;margin:clamp(28px,4vw,58px) auto;padding:0 clamp(16px,3vw,34px)}
.ef-branding-story-card{position:relative;overflow:hidden;border-radius:34px;background:radial-gradient(circle at 12% 12%,rgba(43,184,215,.24),transparent 34%),radial-gradient(circle at 92% 12%,rgba(217,76,140,.18),transparent 31%),linear-gradient(135deg,#061b49 0%,#0a2458 48%,#071935 100%);box-shadow:var(--efb-shadow);padding:clamp(28px,5vw,72px);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:clamp(24px,4vw,60px);align-items:center}
.ef-branding-story-card::before{content:"EF";position:absolute;right:-.08em;bottom:-.28em;font-size:clamp(150px,22vw,360px);line-height:1;font-weight:1000;letter-spacing:-.12em;color:rgba(255,255,255,.055);pointer-events:none}
.ef-branding-story-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#fff}
.ef-branding-story h2{margin:0 0 16px;color:#fff;font-size:clamp(34px,5.2vw,78px);line-height:.95;font-weight:1000;letter-spacing:-.06em;text-transform:none}
.ef-branding-story h2 .ef-rainbow-word{display:inline-block;background:linear-gradient(90deg,#2bb8d7 0%,#74b42c 22%,#f3c760 45%,#f28b2e 68%,#d94c8c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.ef-branding-story p{margin:0;color:rgba(255,255,255,.88);font-size:clamp(16px,1.35vw,20px);line-height:1.75;max-width:880px}
.ef-branding-story-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ef-branding-story-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 19px;border-radius:999px;font-weight:1000;text-decoration:none;line-height:1.2;box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
.ef-branding-story-actions .efb-primary{background:linear-gradient(90deg,#2bb8d7,#74b42c,#f3c760,#f28b2e,#d94c8c);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.20);text-shadow:0 1px 8px rgba(0,0,0,.25)}
.ef-branding-story-actions .efb-secondary{background:#fff;color:#061b49;border:1px solid rgba(255,255,255,.7)}
.ef-branding-story-actions a:hover{background:#061b49;color:#fff;border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.ef-branding-story-panel{position:relative;z-index:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:24px;backdrop-filter:blur(10px)}
.ef-branding-story-panel h3{margin:0 0 14px;color:#fff;font-size:22px;line-height:1.2;font-weight:1000}.ef-branding-story-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.ef-branding-story-list li{display:flex;gap:10px;color:rgba(255,255,255,.88);font-weight:750;line-height:1.35}.ef-branding-story-list li::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:.45em;background:linear-gradient(135deg,#74b42c,#f3c760,#d94c8c);flex:0 0 auto}
.ef-branding-mini-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:linear-gradient(90deg,rgba(43,184,215,.13),rgba(116,184,42,.13),rgba(243,199,96,.16),rgba(217,76,140,.12));border:1px solid rgba(6,27,73,.12);padding:6px 10px;color:#061b49;font-weight:900}.ef-branding-mini-badge b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;border-radius:999px;background:#061b49;color:#fff;font-weight:1000;letter-spacing:-.05em}
@media (max-width:1200px){.ef-header-brandcopy{display:none}.ef-header-mark{width:46px;height:46px;border-radius:15px;font-size:22px}.ef-branding-story-card{grid-template-columns:1fr}}
@media (max-width:780px){.ef-brand-with-mark{gap:9px}.ef-header-mark{width:38px;height:38px;border-radius:13px;font-size:18px}.ef-branding-ribbon-inner{padding:8px 14px;gap:10px;justify-content:flex-start}.ef-branding-ribbon p{text-align:left;font-size:12px}.ef-branding-ribbon a{display:none}.ef-branding-story{margin:26px auto}.ef-branding-story-card{border-radius:24px;padding:24px 18px}.ef-branding-story-actions a{width:100%}.ef-branding-story-panel{border-radius:20px;padding:18px}.ef-branding-story h2{font-size:clamp(34px,12vw,58px)}}
@media (max-width:460px){.ef-branding-ribbon .ef-mini-mark{min-width:34px;height:26px;font-size:12px}.ef-branding-ribbon p{font-size:11px;line-height:1.35}.ef-header-mark{display:none}}


/* =========================================================
   EF BRANDING SYSTEM V2 - Premium Header-Signet + Umlaute
   Ziel: EF wirkt wie ein hochwertiges Markensiegel, nicht wie ein störendes Extra in der Navigation.
   ========================================================= */
.ef-site-header .ef-nav-inner{
  align-items:center !important;
}
.ef-site-header .ef-brand-with-mark{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  flex:0 0 auto !important;
  max-width:min(320px,38vw) !important;
  min-width:0 !important;
  padding-right:44px !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.ef-site-header .ef-brand-with-mark .ef-brand-logo{
  display:block !important;
  max-width:210px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  flex:0 1 auto !important;
}
.ef-site-header .ef-header-brandcopy{
  display:none !important;
}
.ef-site-header .ef-header-mark{
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:14px !important;
  font-size:18px !important;
  letter-spacing:-.075em !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,0) 34%),
    linear-gradient(135deg,#19b9e7 0%,#75b82b 28%,#f3c760 52%,#f28b2e 74%,#d94c8c 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(6,27,73,.20), inset 0 0 0 1px rgba(255,255,255,.35) !important;
  text-shadow:0 1px 7px rgba(0,0,0,.28) !important;
}
.ef-site-header .ef-header-mark::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  background:radial-gradient(circle,rgba(243,199,96,.22),transparent 62%);
  z-index:-1;
}
.ef-site-header .ef-header-mark::after{
  inset:2px !important;
  border-radius:12px !important;
  border-color:rgba(255,255,255,.60) !important;
}
.ef-branding-ribbon{
  background:linear-gradient(90deg,#1ab9e8 0%,#72b82c 22%,#f2c75f 44%,#f28b2e 66%,#d94c8c 83%,#061b49 100%) !important;
  padding:0 0 1px !important;
  box-shadow:0 8px 20px rgba(6,27,73,.08) !important;
}
.ef-branding-ribbon-inner{
  max-width:1560px !important;
  min-height:42px !important;
  padding:8px clamp(16px,3vw,34px) !important;
  background:linear-gradient(90deg,rgba(6,27,73,.96),rgba(10,37,92,.91),rgba(6,27,73,.76)) !important;
  border-radius:0 0 18px 18px !important;
}
.ef-branding-ribbon .ef-mini-mark{
  background:linear-gradient(135deg,#fff,#fff8ec) !important;
  color:#061b49 !important;
  border:1px solid rgba(255,255,255,.72) !important;
}
.ef-branding-ribbon p{
  font-size:13px !important;
  letter-spacing:.005em !important;
}
.ef-branding-ribbon a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:30px !important;
  padding:6px 11px !important;
  border:1px solid rgba(255,255,255,.32) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.ef-branding-ribbon a:hover{
  background:#fff !important;
  color:#061b49 !important;
  border-color:#fff !important;
}
@media (max-width:1100px){
  .ef-site-header .ef-brand-with-mark{max-width:260px !important;padding-right:36px !important;}
  .ef-site-header .ef-brand-with-mark .ef-brand-logo{max-width:176px !important;}
  .ef-site-header .ef-header-mark{width:32px !important;height:32px !important;min-width:32px !important;border-radius:12px !important;font-size:15px !important;}
}
@media (max-width:780px){
  .ef-site-header .ef-brand-with-mark{max-width:230px !important;padding-right:34px !important;}
  .ef-site-header .ef-brand-with-mark .ef-brand-logo{max-width:168px !important;}
  .ef-site-header .ef-header-mark{display:inline-flex !important;right:0 !important;width:31px !important;height:31px !important;min-width:31px !important;font-size:14px !important;}
  .ef-branding-ribbon-inner{border-radius:0 0 14px 14px !important;}
  .ef-branding-ribbon a{display:none !important;}
}
@media (max-width:460px){
  .ef-site-header .ef-brand-with-mark{max-width:190px !important;padding-right:30px !important;}
  .ef-site-header .ef-brand-with-mark .ef-brand-logo{max-width:142px !important;}
  .ef-site-header .ef-header-mark{display:inline-flex !important;width:27px !important;height:27px !important;min-width:27px !important;border-radius:10px !important;font-size:12px !important;}
}

/* =========================================================
   V5 NAVIGATION TYPOGRAFIE - einheitliche Schriftdicke
   Ziel: Alle Hauptnavigationspunkte bekommen die gleiche satte Schriftstärke wie auf Webdesign/Digitalprodukte.
   Keine Gewichtssprünge zwischen normalen, Dropdown-, Mega- und CTA-Punkten.
   ========================================================= */
.ef-site-header .ef-menu,
.ef-site-header .ef-menu *{
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.ef-site-header .ef-menu > li > a.ef-menu-link,
.ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
.ef-site-header .ef-menu-link{
  font-family:'Roboto Condensed','Roboto',Arial,sans-serif !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  line-height:1.1 !important;
}

.ef-site-header .ef-menu-item:hover > a.ef-menu-link,
.ef-site-header .ef-menu-item:focus-within > a.ef-menu-link,
.ef-site-header .ef-menu-item.active > a.ef-menu-link,
.ef-site-header .ef-menu-cta > a.ef-menu-link{
  font-weight:900 !important;
}

.ef-site-header .ef-dropdown a,
.ef-site-header .ef-mega a,
.ef-site-header .ef-mega h6{
  font-family:'Roboto Condensed','Roboto',Arial,sans-serif !important;
}

.ef-site-header .ef-dropdown a,
.ef-site-header .ef-mega a{
  font-weight:800 !important;
  letter-spacing:.015em !important;
}

.ef-site-header .ef-mega h6{
  font-weight:900 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
}

@media (max-width:1199px){
  .ef-site-header .ef-menu > li > a.ef-menu-link,
  .ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
  .ef-site-header .ef-menu-link{
    font-size:clamp(18px,5vw,28px) !important;
    font-weight:900 !important;
    letter-spacing:.025em !important;
  }
}

/* =========================================================
   V6 NAVIGATION TYPOGRAFIE - Wunschfix: alle Navigationspunkte 900 / 13px
   Einheitliche Head-Navigation, Dropdowns und Mega-Menues.
   ========================================================= */
.ef-site-header .ef-menu > li > a.ef-menu-link,
.ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
.ef-site-header .ef-menu-link,
.ef-site-header .ef-menu a,
.ef-site-header .ef-dropdown a,
.ef-site-header .ef-mega a,
.ef-site-header .ef-mega h6,
.ef-site-header nav a{
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
}

.ef-site-header .ef-menu-item:hover > a.ef-menu-link,
.ef-site-header .ef-menu-item:focus-within > a.ef-menu-link,
.ef-site-header .ef-menu-item.active > a.ef-menu-link,
.ef-site-header .ef-menu-cta > a.ef-menu-link,
.ef-site-header .ef-dropdown a:hover,
.ef-site-header .ef-mega a:hover{
  font-size:13px !important;
  font-weight:900 !important;
}

@media (max-width:1199px){
  .ef-site-header .ef-menu > li > a.ef-menu-link,
  .ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
  .ef-site-header .ef-menu-link,
  .ef-site-header .ef-menu a,
  .ef-site-header .ef-dropdown a,
  .ef-site-header .ef-mega a,
  .ef-site-header nav a{
    font-size:13px !important;
    font-weight:900 !important;
  }
}

/* =========================================================
   V10 BEAUTY FIX - Navigation wie Digitalprodukte/Webdesign
   Ziel: keine Worttrennung mehr, mehr Luft, einheitliche 900/13-Optik.
   Betrifft die neue EF-Headernavigation auf allen Seiten.
   ========================================================= */
.ef-site-header,
.ef-site-header *{
  box-sizing:border-box !important;
}

.ef-site-header .ef-nav{
  overflow:visible !important;
}

.ef-site-header .ef-nav-inner{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:clamp(28px,3vw,54px) !important;
  max-width:1320px !important;
  width:min(calc(100% - 32px),1320px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.ef-site-header .ef-brand-with-mark{
  max-width:270px !important;
  min-width:210px !important;
  padding-right:42px !important;
  flex:0 0 auto !important;
}

.ef-site-header .ef-brand-with-mark .ef-brand-logo{
  max-width:205px !important;
  width:205px !important;
}

.ef-site-header .ef-menu-panel{
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}

.ef-site-header .ef-menu{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:clamp(15px,1.35vw,27px) !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}

.ef-site-header .ef-menu > li,
.ef-site-header .ef-menu .ef-menu-item{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
}

.ef-site-header .ef-menu > li > a.ef-menu-link,
.ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
.ef-site-header .ef-menu-link,
.ef-site-header .ef-menu a,
.ef-site-header nav a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  text-wrap:nowrap !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.018em !important;
  text-transform:uppercase !important;
}

.ef-site-header .ef-menu-cta > a.ef-menu-link{
  min-width:92px !important;
  padding:17px 20px !important;
  border-radius:13px !important;
}

.ef-site-header .ef-sub-toggle{
  flex:0 0 auto !important;
}

@media (max-width:1380px){
  .ef-site-header .ef-nav-inner{
    max-width:1240px !important;
    width:min(calc(100% - 24px),1240px) !important;
    column-gap:24px !important;
  }
  .ef-site-header .ef-brand-with-mark{
    min-width:190px !important;
    max-width:238px !important;
    padding-right:36px !important;
  }
  .ef-site-header .ef-brand-with-mark .ef-brand-logo{
    max-width:185px !important;
    width:185px !important;
  }
  .ef-site-header .ef-menu{
    gap:13px !important;
  }
  .ef-site-header .ef-menu-cta > a.ef-menu-link{
    padding-left:17px !important;
    padding-right:17px !important;
  }
}

@media (max-width:1199px){
  .ef-site-header .ef-nav-inner{
    display:flex !important;
    justify-content:space-between !important;
  }
  .ef-site-header .ef-menu-panel{
    width:auto !important;
  }
  .ef-site-header .ef-menu{
    display:block !important;
    width:auto !important;
  }
  .ef-site-header .ef-menu > li,
  .ef-site-header .ef-menu .ef-menu-item,
  .ef-site-header .ef-menu > li > a.ef-menu-link,
  .ef-site-header .ef-menu .ef-menu-item > a.ef-menu-link,
  .ef-site-header .ef-menu-link,
  .ef-site-header .ef-menu a{
    white-space:normal !important;
    min-width:0 !important;
    width:auto !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }
}