/* ============================================================
   E-SURFER eFoil Doctor — Brand-Stylesheet (self-contained)
   Header / Navigation / Dropdowns / Sprach-Umschalter / Typo.
   Angelehnt an e-surfer.com. Keine externen Requests.
   ============================================================ */

/* ⚠️ HIER STAND `@import url("fonts/fonts.css")` — bis zum 28.07.2026.
   Ein @import wird erst sichtbar, wenn DIESE Datei geladen und geparst ist; die
   Schriften wurden dadurch erst in der dritten Anforderungsrunde geholt. fonts.css
   steht jetzt als eigenes <link> neben diesem Stylesheet und laedt parallel.
   Eingebunden wird beides in site-chrome.ts → buildHeadAssets(). Wer hier wieder ein
   @import einsetzt, macht die Kette lautlos rueckgaengig — check.ts meldet es. */

:root{
  --green:#129C8B;
  --green-d:#0e7d6f;
  --ink:#0a0a0a;
  --muted:#5b5f66;
  --line:#e6e7ea;
  --bg:#ffffff;
  --card:#f5f5f7;
  --card-2:#fafafb;
  --header-bg:#000000;
  --header-ink:#ffffff;
  --maxw:1120px;
  --font-head:'Karantina', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-menu:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f2f3f5; --muted:#a2a7b0; --line:#2a2d33;
    --bg:#0e1013; --card:#171a1f; --card-2:#13161a;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Header-Leiste (dunkel, sticky) ---------------- */
.es-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg); color:var(--header-ink);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.es-header a{color:var(--header-ink); text-decoration:none}
/* Obere Kontakt-Zeile (wie e-surfer.com) */
.es-topbar{background:#000; border-bottom:1px solid rgba(255,255,255,.08)}
.es-topbar-inner{max-width:1120px; margin:0 auto; padding:8px 20px; display:flex; justify-content:flex-end; align-items:center; gap:24px; font-family:var(--font-body); font-size:13px}
.es-top-link{color:#cfd3d8; display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.es-top-link:hover{color:var(--green)}
.es-top-link svg{width:15px; height:15px; flex:0 0 auto; opacity:.85}
@media(max-width:900px){ .es-topbar{display:none} }
.es-bar{
  max-width:1120px; margin:0 auto; padding:0 20px;
  min-height:78px; display:flex; align-items:center; gap:22px;
}

/* Marke: Logo-Bild (nur Logo, links) */
.es-brand{display:flex; align-items:center; flex:0 0 auto}
.es-brand .es-logo{display:flex; align-items:center}
.es-brand .es-logo img{height:48px; width:auto; display:block}

/* ---------------- Navigation ---------------- */
.es-nav{display:flex; align-items:center; gap:6px; margin-left:auto}
.es-nav-list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
/* Umbruch statt Ueberlauf. Der Balken ist auf 1120px gedeckelt, die Menue-
   texte sind es nicht: Italienisch und Spanisch brauchen rund die Haelfte
   mehr Breite als Deutsch, dazu kommt die Anfrageliste, sobald etwas drauf
   ist. Ohne Umbruch lief das Menue rechts aus dem Balken — auf jedem
   Bildschirm, auch auf einem grossen. */
.es-nav{flex-wrap:wrap; justify-content:flex-end; row-gap:0}
.es-nav-list{flex-wrap:wrap; justify-content:flex-end; row-gap:0}

/* Etwas Luft, bevor umgebrochen wird: knappere Abstaende halten die
   mittleren Sprachen einzeilig, ohne die Schriftgroesse anzutasten. */
@media (min-width:901px) and (max-width:1200px){
  .es-bar{gap:14px}
  .es-nav-link{padding:10px 10px}
}
.es-nav-item{position:relative}
.es-nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-menu); font-weight:700;
  text-transform:uppercase; letter-spacing:normal; font-size:14px;
  color:#fff; padding:10px 14px; border-radius:8px;
  background:none; border:0; cursor:pointer; white-space:nowrap;
}
.es-nav-link:hover,
.es-nav-item:hover > .es-nav-link,
.es-nav-item.open > .es-nav-link{color:var(--green)}
.es-nav-link .es-caret{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; opacity:.85;
}
.es-nav-item.open > .es-nav-link .es-caret{transform:rotate(-135deg) translateY(0)}

/* Dropdown-Panel (weisser Kasten) — premium: weicher Schatten, ruhige Typo */
.es-dropdown{
  position:absolute; top:100%; left:0; min-width:236px;
  background:#fff; color:#0a0a0a;
  border:1px solid rgba(10,10,10,.06); border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.16);
  padding:10px; margin-top:10px;
  list-style:none;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.es-dropdown li{margin:0}
/* Menue-Schrift = Poppins (--font-menu), NICHT Mulish: e-surfer.com nutzt in den
   Dropdowns Poppins 700. Mulish wirkt bei gleichem Gewicht deutlich leichter und
   sah neben den Poppins-Nav-Links duenn aus. */
.es-dropdown a{
  display:block; color:#0a0a0a; text-decoration:none;
  font-family:var(--font-menu); font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:normal;
  padding:11px 14px; border-radius:10px; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.es-dropdown a:hover{background:#f2f5f4; color:var(--green)}
.es-dropdown .es-shoplink{
  margin-top:8px; padding-top:11px; border-top:1px solid #ececed;
}
.es-dropdown .es-shoplink a{
  color:var(--green); font-weight:700; text-transform:none; letter-spacing:0; font-size:13.5px;
}
/* Desktop: per Hover oeffnen */
@media (hover:hover) and (min-width:901px){
  .es-nav-item:hover > .es-dropdown{opacity:1; visibility:visible; transform:translateY(0)}
}
/* Ueber Klick/Tap oeffnen (Mobil + Desktop-Tap) */
.es-nav-item.open > .es-dropdown{opacity:1; visibility:visible; transform:translateY(0)}

/* ---------------- Sprach-Umschalter (Dropdown "DE ▾" im Header) ---------------- */
.es-langs{display:flex; align-items:center; margin-left:6px; flex:0 0 auto}
.es-langsel{position:relative}
.es-langsel > .es-nav-link{gap:8px; letter-spacing:normal}
.es-langsel .es-dropdown{left:auto; right:0; min-width:172px}
.es-langsel .es-dropdown a{
  display:flex; align-items:center; gap:12px;
  text-transform:none; letter-spacing:.01em; font-size:14px; font-weight:600;
}
.es-langsel .es-dropdown a .es-lang-flag{font-size:17px; line-height:1}
.es-langsel .es-dropdown a.active{color:var(--green)}

/* ---------------- Burger (Mobil) ---------------- */
.es-burger{
  display:none; margin-left:auto;
  width:42px; height:42px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.es-burger span{display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.es-header.nav-open .es-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.es-header.nav-open .es-burger span:nth-child(2){opacity:0}
.es-header.nav-open .es-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================= Mobil-Layout (<= 900px) ================= */
@media (max-width:900px){
  .es-burger{display:flex}
  .es-nav{
    position:fixed; top:78px; left:0; right:0; bottom:0;
    margin:0; padding:14px 20px 40px;
    background:var(--header-bg);
    flex-direction:column; align-items:stretch; gap:2px;
    overflow-y:auto;
    transform:translateX(100%); transition:transform .22s ease;
  }
  .es-header.nav-open .es-nav{transform:translateX(0)}
  .es-nav-list{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  .es-nav-item{width:100%; border-bottom:1px solid rgba(255,255,255,.08)}
  .es-nav-link{width:100%; justify-content:space-between; font-size:15px; padding:15px 6px}
  .es-nav-link .es-caret{margin-left:auto}
  .es-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; margin:0 0 8px; padding:0 0 6px 8px;
    background:transparent; display:none;
  }
  .es-nav-item.open > .es-dropdown{display:block}
  .es-dropdown a{color:#cfd3d8; text-transform:none; letter-spacing:0; font-size:14.5px; padding:9px 8px}
  .es-dropdown a:hover{background:rgba(255,255,255,.06); color:var(--green)}
  .es-dropdown .es-shoplink{border-top-color:rgba(255,255,255,.12)}
  .es-langs{width:100%; margin:10px 0 0}
  .es-langsel{width:100%}
  .es-langsel .es-dropdown{right:auto}
}

/* ================= Schwarzer Footer (wie e-surfer.com) ================= */
.es-footer{
  background:#000; color:#cfd3d8;
  border-top:1px solid rgba(255,255,255,.08);
  padding:26px 20px 30px;
  font-family:var(--font-body);
}
.es-footer a{text-decoration:none}
.es-footer-legal{
  max-width:1120px; margin:0 auto 20px; padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#868c95; font-size:12px; line-height:1.55;
}
.es-footer-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; gap:18px 28px;
}
.es-footer-logo{display:flex; align-items:center; flex:0 0 auto}
.es-footer-logo img{height:20px; width:auto; display:block}
.es-footer-links{
  display:flex; align-items:center; flex-wrap:wrap; justify-content:center;
  gap:10px 12px; margin:0 auto;
}
.es-footer-links a{
  color:#9aa0a8; text-transform:uppercase; letter-spacing:.07em;
  font-size:12px; font-weight:600; transition:color .16s ease;
}
.es-footer-links a:hover{color:var(--green)}
.es-footer-links a.es-footer-mail{text-transform:none; letter-spacing:.01em; font-weight:500}
.es-footer-sep{color:rgba(255,255,255,.22); font-size:12px}
.es-footer-copy{color:#7d828b; font-size:12px; flex:0 0 auto; white-space:nowrap}
@media (max-width:720px){
  .es-footer-inner{flex-direction:column; text-align:center; gap:16px}
  .es-footer-links{margin:0}
  /* Die Copyright-Zeile ist mit nowrap 430 px breit und war damit auf jedem Handy
     der Grund, dass sich die ganze Seite um 20 px seitlich schieben liess
     (gemessen am 28.08.2026 bei 390 px Viewport). Umbrechen lassen. */
  .es-footer-copy{white-space:normal}
}

/* ============ Flaggen-Umschalter ueber dem Chat (Startseite) ============ */
.lang-flags{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 16px}
.lang-flag .flag{width:24px; height:16px; border-radius:2px; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.lang-flag{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:8px 16px; border-radius:999px; text-decoration:none;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.lang-flag .flag{font-size:20px; line-height:1}
.lang-flag:hover{border-color:var(--green); color:var(--green); text-decoration:none}
.lang-flag.active{border-color:var(--green); background:rgba(18,156,139,.12); color:var(--green)}