/* =====================================================================
   SOFTANO.EU — MEGA-MENU v1 (Produktions-CSS)
   Einfügen in: Lightspeed Instant-Site-Editor > Design >
   Advanced custom CSS  — ans Ende deines v5.x-Blocks ANHÄNGEN.
   Namespace: alles "sof-". Greift NICHT in native Ecwid-Elemente ein,
   ausser: Header sticky + natives Flyout-Dropdown ausblenden (nur Desktop).
   ===================================================================== */
:root{
  --sof-teal:#23B8A6; --sof-mint:#43E8C9; --sof-navy:#1E3A8A;
  --sof-body:#3a4d4a; --sof-muted:#62756f; --sof-line:#e9eff0; --sof-light:#F5FBFA;
  --sof-panel-sh:0 26px 56px -24px rgba(30,58,138,.26), 0 6px 18px -12px rgba(36,55,52,.14);
  --sof-head-sh:0 6px 16px -10px rgba(30,58,138,.16);
}

/* ---- Sticky Header + Schatten beim Scrollen ---- */
.ins-tile--header.sof-header{ position:sticky; top:0; z-index:9991; transition:box-shadow .25s ease; }
.ins-tile--header.sof-header.sof-scrolled{ box-shadow:var(--sof-head-sh); }

/* ---- Aktiver Top-Punkt (Teal + Unterstrich) ---- */
.ins-header__menu-link.sof-active .ins-header__menu-link-title{ color:var(--sof-teal)!important; }
.ins-header__menu-link.sof-active{ box-shadow: inset 0 -2.5px 0 0 var(--sof-teal); }

/* ---- Natives Flyout-Dropdown nur am Desktop ausblenden ---- */
@media (min-width:921px){
  .ins-header__dropdown, .ins-header__submenu, .ins-header__subsubmenu{ display:none!important; }
}

/* ---- Panel-Host (am Body, fix unter dem Header positioniert per JS) ---- */
.sof-host{ position:fixed; left:0; right:0; z-index:99998; display:none; }
.sof-host.sof-show{ display:block; }

/* ---- Mega-Panel ---- */
.sof-mega{
  margin:0 auto; background:#fff; border-radius:0 0 14px 14px;
  box-shadow:var(--sof-panel-sh); border-top:2.5px solid var(--sof-teal);
  padding:28px 30px 26px; display:flex; gap:30px;
  font-family:Roboto, system-ui, sans-serif; color:var(--sof-body);
  animation:sofDrop .2s ease;
}
@keyframes sofDrop{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

/* ---- Spalten ---- */
.sof-cols{ flex:1; display:flex; flex-wrap:wrap; gap:8px 38px; align-content:flex-start; }
.sof-col{ min-width:150px; }
.sof-col h4{ font-size:13.5px; font-weight:600; color:var(--sof-navy); margin:0 0 11px; white-space:nowrap; line-height:1.2; }
.sof-col h4 .sof-h{ color:var(--sof-navy); }
.sof-col h4 .sof-h:hover{ color:var(--sof-teal); }
.sof-col ul{ list-style:none; margin:0; padding:0; }
.sof-col li{ margin:0; }
.sof-lnk{ display:block; padding:5px 8px; margin-left:-8px; border-radius:7px; font-size:13px;
  color:var(--sof-muted); font-weight:400; white-space:nowrap; text-decoration:none; transition:.14s; }
.sof-lnk:hover{ background:var(--sof-light); color:var(--sof-teal); }
.sof-sub{ font-size:10.5px; font-weight:600; color:#9aa7a4; text-transform:uppercase; letter-spacing:.05em;
  padding:8px 8px 2px; margin-left:-8px; white-space:nowrap; }
.sof-l4 .sof-lnk{ padding-left:18px; font-size:12.5px; }

/* ---- Kacheln (Top-Punkte ohne 3. Ebene) ---- */
.sof-tiles{ flex:1; display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; }
.sof-tile{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:230px;
  border:1px solid var(--sof-line); border-radius:11px; padding:15px 16px; font-weight:500; font-size:14px;
  color:var(--sof-navy); white-space:nowrap; text-decoration:none; background:#fff; transition:.16s; }
.sof-tile:hover{ border-color:var(--sof-teal); background:var(--sof-light); box-shadow:0 8px 20px -14px rgba(35,184,166,.6); }
.sof-tile .sof-ar{ color:var(--sof-teal); transition:transform .18s; }
.sof-tile:hover .sof-ar{ transform:translateX(3px); }

/* ---- "bald verfügbar" (geplant/NEU, noch keine Kategorieseite) ---- */
.sof-soon{ color:#9fb0ad!important; cursor:default; background:none!important; }
.sof-soon:hover{ color:#9fb0ad!important; background:none!important; }
.sof-nw{ font-size:8.5px; font-weight:700; letter-spacing:.05em; color:#b06a00; background:#fff2dc;
  padding:2px 6px; border-radius:20px; margin-left:6px; vertical-align:middle; }

/* ---- Featured-Kachel ---- */
.sof-feat{ flex:0 0 300px; border-radius:13px; padding:20px; color:#fff; position:relative; overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column; min-height:220px;
  background:linear-gradient(150deg,#123f4c 0%,#17877a 55%,#23B8A6 100%); }
.sof-feat::after{ content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle,rgba(67,232,201,.4),transparent 70%); }
.sof-ftag{ font-size:10px; font-weight:600; letter-spacing:.14em; color:#bdfff1; position:relative; z-index:2; }
.sof-ft{ font-size:19px; font-weight:600; line-height:1.18; margin-top:12px; position:relative; z-index:2; }
.sof-fs{ font-size:13px; opacity:.9; margin-top:7px; line-height:1.4; position:relative; z-index:2; font-weight:400; }
.sof-fbtn{ margin-top:16px; align-self:flex-start; background:#fff; color:#0f3f4a; font-weight:600; font-size:13px;
  padding:9px 17px; border-radius:9px; position:relative; z-index:3; transition:.18s; }
.sof-feat:hover .sof-fbtn{ background:var(--sof-mint); color:#0d2e2a; }
.sof-hasimg{ padding-bottom:118px; }
.sof-fimg{ position:absolute; right:8px; bottom:8px; max-width:62%; max-height:116px; z-index:1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.sof-ftext{ position:relative; z-index:2; max-width:80%; }

/* ---- Sicherheit: Panel nur Desktop ---- */
@media (max-width:920px){ .sof-host{ display:none!important; } }

/* ---- Einheitliche Linkfarbe: auch nach Besuch kein Ecwid-Blau (:visited) ---- */
.sof-lnk:link, .sof-lnk:visited{ color:var(--sof-muted) !important; }
.sof-lnk:hover, .sof-lnk:focus{ color:var(--sof-teal) !important; }
.sof-col h4 .sof-h:link, .sof-col h4 .sof-h:visited{ color:var(--sof-navy) !important; }
.sof-col h4 .sof-h:hover{ color:var(--sof-teal) !important; }
.sof-tile:link, .sof-tile:visited{ color:var(--sof-navy) !important; }

/* ---- Featured-Karte: Schrift immer weiss (auch nach Besuch / :visited) ---- */
.sof-feat:link, .sof-feat:visited, .sof-feat:hover,
.sof-feat .sof-ft, .sof-feat .sof-fs, .sof-feat .sof-ftag{ color:#fff !important; }