/* =====================================================================
   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; }

/* ---- Wenig-Spalten-Panels (<=5, z. B. Virtualisierung & Backup): drei gleich breite,
   gefuellte Anwendungs-Bloecke statt Loecher. Ersetzt das alte space-between. ---- */
.sof-cols--spread{ display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); gap:6px 34px; align-content:flex-start; }
/* Hersteller-Gruppen je Anwendung: 2-spaltig, wo Platz ist */
.sof-vgrps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px 26px; align-content:flex-start; }
.sof-vgrp{ min-width:0; }
/* Lange Produktnamen im 2-Spalter umbrechen statt ueberlaufen */
.sof-cols--spread .sof-l4 .sof-lnk{ white-space:normal; }

/* =====================================================================
   MEGA-MENU v1.1 — Verhalten auf kleinen Bildschirmen
   (a) Listen ab sechs Eintraegen zweispaltig, damit eine lange Spalte
       nicht die ganze Zeile in die Hoehe zieht
   (b) Engere Abstaende, wenn der Bildschirm niedrig ist
   (c) Notbremse: Panel nie hoeher als der sichtbare Bereich
   ===================================================================== */

/* (a) --------------------------------------------------------------- */
.sof-col:has(> ul > li:nth-child(6)){
  flex: 0 0 auto !important;
  min-width: 290px !important;
}
.sof-col:has(> ul > li:nth-child(6)) > ul{
  columns: 2;
  column-gap: 26px;
}
.sof-col > ul > li{ break-inside: avoid; }

/* (b) --------------------------------------------------------------- */
@media (min-width:921px) and (max-height:900px){
  .sof-mega{ padding:20px 30px 18px; }
  .sof-col h4{ margin:0 0 7px; }
  .sof-lnk{ padding:4px 8px; }
  .sof-cols{ gap:6px 34px; }
  .sof-cols--spread{ gap:4px 30px; }
}
@media (min-width:921px) and (max-height:780px){
  .sof-mega{ padding:14px 26px 12px; }
  .sof-col h4{ font-size:13px; margin:0 0 5px; }
  .sof-lnk{ padding:3px 8px; font-size:12.5px; }
}

/* (c) --------------------------------------------------------------- */
.sof-mega{ overflow-y:auto; overscroll-behavior:contain; }
.sof-mega::-webkit-scrollbar{ width:8px; }
.sof-mega::-webkit-scrollbar-thumb{ background:#cfdedc; border-radius:8px; }

/* ---- Werbekasten: Preis, Ersparnis, Lieferzeit (06.11.2026) -------------
   Die Zeilen sind beim Seitenaufbau leer und werden gefuellt, sobald das
   Menue zum ersten Mal geoeffnet wurde. Solange nichts da ist, nehmen sie
   keinen Platz ein — deshalb :empty und der Abstand erst ueber --da. */
.sof-ft--lang{ font-size:14px; line-height:1.3; margin-top:10px; }
/* Feste Kastenhoehe: alle vier Menues bleiben in jeder Sprache gleich hoch.
   282 px ist der griechische Windows-Server-Kasten, der laengste Fall. */
.sof-feat{ min-height:282px; justify-content:center; }
.sof-fpreis{ position:relative; z-index:2; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:7px; margin:0; min-height:0; }
.sof-fpreis--da{ margin-top:10px; }
.sof-fp{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.sof-fuvp{ font-size:13px; opacity:.62; text-decoration:line-through; }
.sof-fuvp:empty{ display:none; }
.sof-frab{ font-size:11px; font-weight:700; letter-spacing:.03em; padding:2px 7px;
  border-radius:999px; background:var(--sof-mint,#3ee0c5); color:#0d2e2a !important; }
.sof-frab:empty{ display:none; }
.sof-flief{ position:relative; z-index:2; font-size:12px; line-height:1.35; opacity:.88; }
.sof-flief:not(:empty){ margin-top:7px; }
.sof-flief::before{ content:"\2713\00a0"; font-weight:700; color:var(--sof-mint,#3ee0c5); }
.sof-flief:empty::before{ content:none; }
.sof-fanfrage .sof-fs{ font-size:12.5px; line-height:1.45; }

/* ==========================================================
   END · Softano Mega-Menu v2 (06.11.2026)
   ========================================================== */

/* Produktbild im Werbekasten: Adresse kommt aus dem Shop, nicht aus dem Code.
   Bis sie da ist, haelt das Feld seinen Platz, damit nichts springt. */
.sof-feat .sof-fimg[data-sof-bild]{
  position:static; transform:none; width:104px; height:150px; max-width:104px; max-height:150px;
  flex:0 0 auto; align-self:center; object-fit:contain; border-radius:8px;
  opacity:0; transition:opacity .25s ease; }
.sof-feat .sof-fimg[data-sof-bild].sof-fimg--da{ opacity:1; filter:drop-shadow(0 12px 22px rgba(0,10,12,.34)); }