/* PCFOX V16.3 — completely isolated navigation component.
   No legacy .header/.island styles are used here. */
:root{
  --v163-bg-a:rgba(11,10,16,.92);
  --v163-bg-b:rgba(28,21,38,.88);
  --v163-line:rgba(223,214,255,.3);
  --v163-text:#fbfaff;
  --v163-muted:rgba(231,225,242,.55);
  --v163-purple:#a77cff;
  --v163-purple-soft:#d5c3ff;
}

.v163-nav{
  position:fixed;
  z-index:260;
  top:14px;
  left:50%;
  transform:translate3d(-50%,0,0);
  width:min(1260px,calc(100vw - 28px));               /* V6: 10 Register + CTA brauchen mehr Platz als 1010px (sonst umbrochener/überlappender Text) */
  height:62px;
  pointer-events:none;
  isolation:isolate;
  font-family:Inter,"SF Pro Display","Segoe UI Variable Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.v163-nav__compact,
.v163-nav__expanded{
  position:absolute;
  top:0;
  left:50%;
  border:1.5px solid var(--v163-line);                 /* V6: sichtbarer gegen helle wie dunkle Videoszenen */
  border-radius:999px;
  overflow:hidden;
  color:var(--v163-text);
  background:
    linear-gradient(118deg,var(--v163-bg-a),var(--v163-bg-b) 52%,rgba(10,9,15,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(169,124,255,.05),
    0 14px 40px rgba(0,0,0,.4),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.2),
    0 0 44px rgba(150,105,235,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  backface-visibility:hidden;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

.v163-nav__compact::before,
.v163-nav__expanded::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.06),transparent 28%,rgba(161,112,255,.05) 67%,transparent);
  mix-blend-mode:screen;
}

/* V6: „Liquid Glass“ – ein kleiner, unscharfer Lichtfleck aus Glas, der dem Zeiger in der Kapsel folgt
   (x UND y, vorher nur x), mit einem helleren Kern und einem feinen Rand-Glanz wie eine echte Glaslinse. */
.v163-nav__compact::after,
.v163-nav__expanded::after{
  content:"";
  position:absolute;
  z-index:1;
  left:var(--v163-x,50%);
  top:var(--v163-y,50%);
  width:190px;
  height:190px;
  margin:-95px 0 0 -95px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.5),rgba(210,190,255,.22) 34%,rgba(170,125,255,.08) 58%,transparent 75%);
  mix-blend-mode:screen;
  opacity:0;
  filter:blur(2px);
  transition:opacity var(--d-base) ease;
}
.v163-nav.is-hovering .v163-nav__compact::after,
.v163-nav.is-hovering .v163-nav__expanded::after{opacity:1}

.v163-nav__compact{
  width:370px;
  height:58px;
  padding:0 9px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  transform:translate3d(-50%,0,0) scale(1);
  opacity:1;
  pointer-events:auto;
  transition:opacity var(--d-fast) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}

.v163-nav__expanded{
  width:min(1230px,100%);
  height:60px;
  padding:0 11px 0 14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:18px;
  transform:translate3d(-50%,0,0) scale(.965);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}

.v163-nav.is-open .v163-nav__compact{opacity:0;transform:translate3d(-50%,0,0) scale(.955);pointer-events:none}
.v163-nav.is-open .v163-nav__expanded{opacity:1;transform:translate3d(-50%,0,0) scale(1);pointer-events:auto}

.v163-nav__mark,
.v163-nav__remote-orb{
  display:grid;
  place-items:center;
}

.v163-nav__mark,
.v163-nav__remote-orb{
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(220,207,255,.19);
  background:linear-gradient(145deg,rgba(166,123,255,.18),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(140,91,229,.07);
  color:white;
}
/* V24i (David 15.10.: «Logo auf der ersten Seite entfernen, im Menü etwas anderes»): links ein Menü-Knopf statt des Fuchses –
   öffnet die Navigation wie die Mitte. Zwei feine Linien wie bei Apple. */
.v163-nav__menu{appearance:none;padding:0;cursor:pointer;font:inherit}
.v163-menu-glyph{position:relative;display:block;width:16px;height:7px}
.v163-menu-glyph i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:#fbfaff}
.v163-menu-glyph i:first-child{top:0}.v163-menu-glyph i:last-child{bottom:0}

.v163-nav__current{
  position:relative;
  z-index:2;
  border:0;
  background:none;
  color:inherit;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 14px 2px;
  cursor:pointer;
  min-width:0;
}
.v163-nav__current small{
  font-size:7.5px;
  line-height:1;
  letter-spacing:.17em;
  font-weight:700;
  color:var(--v163-muted);
  margin-bottom:5px;
}
.v163-nav__current strong{
  font-size:13.5px;
  line-height:1;
  font-weight:720;
  letter-spacing:-.022em;
  white-space:nowrap;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.8,.2,1),filter var(--d-quick) ease;
}
.v163-nav__current strong.is-changing{opacity:.18;transform:translate3d(0,4px,0);filter:blur(3px)}

.v163-nav__progress{
  position:absolute;
  z-index:3;
  left:52px;
  right:52px;
  bottom:4px;
  height:1px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.045);
}
.v163-nav__progress i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#a77cff 0%,#d9c8ff 48%,rgba(255,255,255,.82) 100%);
  box-shadow:0 0 7px rgba(171,126,255,.32);
}

/* V24j (David 16.10.: «den alten TeamViewer, aber verbessern – nicht das originale TeamViewer verwenden»): das bisherige PCFOX-Zeichen
   (Doppelpfeil im Glas-Kreis) bleibt, nur klarer – heller Lavendel-Glas-Kreis wie der Menü-Knopf, feiner Ring, weisser Doppelpfeil als
   scharfes SVG (vorher dünn, unscharf und zum Rand hin dunkelviolett). */
.v163-nav__remote-orb{cursor:pointer;padding:0;border-color:rgba(225,212,255,.3);background:linear-gradient(145deg,rgba(178,140,255,.32),rgba(255,255,255,.07));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 0 18px rgba(160,120,255,.22);transition:transform var(--d-quick) ease}
.v163-nav__remote-orb:hover{transform:scale(1.05)}
.v163-tv{display:block;width:26px;height:26px;overflow:visible}
.v163-tv circle{fill:none;stroke:rgba(222,208,255,.62);stroke-width:1.2}
.v163-tv path{fill:#fbfaff;stroke:#fbfaff;stroke-width:.5;stroke-linejoin:round;filter:drop-shadow(0 0 2.5px rgba(200,170,255,.75))}

.v163-nav__brand{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 8px 0 2px;
  white-space:nowrap;
  color:var(--v163-text);
}
.v163-nav__brand strong{font-size:13.5px;font-weight:750;letter-spacing:-.03em}

.v163-nav__links{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;                                /* V6: Boden bleibt eine Linie, wenn Links beim Vergrössern nach oben wachsen */
  gap:2px;
}
.v163-nav__links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  /* V6: 10 Register + Marke + CTA passen nicht immer in eine Reihe. Statt bei einer festen Breite umzubrechen
     (siehe darunter, war der Fehler), schrumpfen Schrift und Polster fliessend zwischen 861px und 1320px Fensterbreite. */
  padding:0 clamp(4px,calc(4px + (100vw - 861px) * .0098),8px);          /* V14: neun Register + Globus + Fernwartung-Symbol */
  border-radius:999px;
  color:rgba(238,233,245,.67);
  font-size:clamp(10.5px,calc(10.5px + (100vw - 861px) * .00436),12.5px);
  font-weight:650;
  letter-spacing:-.012em;
  white-space:nowrap;                                  /* nie umbrechen – lieber schrumpfen/die Kapsel breiter (siehe oben) */
  transform-origin:50% 100%;
  transform:translateY(calc((var(--mag,1) - 1) * -11px)) scale(var(--mag,1));
  transition:color var(--d-quick) ease,background var(--d-fast) ease;
  z-index:1;
}
.v163-nav__links a:hover{color:#fff;background:rgba(255,255,255,.055);z-index:2}
.v163-nav__links a.is-active{color:#fff;background:linear-gradient(110deg,rgba(167,124,255,.12),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(204,184,255,.08)}

.v163-nav__remote{
  position:relative;
  z-index:2;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(215,202,255,.16);
  background:linear-gradient(115deg,rgba(168,126,255,.12),rgba(255,255,255,.05));
  color:#fff;
  padding:0 14px 0 9px;
  display:flex;
  align-items:center;
  gap:8px;
  font:inherit;
  font-size:12.5px;
  font-weight:690;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.10);
  transition:transform var(--d-quick) ease,background var(--d-quick) ease,border-color var(--d-quick) ease;
}
.v163-nav__remote:hover{transform:translateY(-1px);background:linear-gradient(115deg,rgba(174,132,255,.19),rgba(255,255,255,.07));border-color:rgba(222,207,255,.24)}
.v163-nav__remote .v163-tv{width:24px;height:24px}

/* V14: Sprachwahl als Globus-Symbol (rund wie die Marke und der Fernwartungs-Orb); die Liste hängt als eigenes Element an der Navigation,
   damit sie nicht von der abgerundeten Kapsel abgeschnitten wird. Position setzt i18n.js unter dem Globus. */
.v163-nav__lang{position:relative;z-index:2;display:flex;align-items:center}
.lang-globe{
  appearance:none;display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(220,207,255,.19);
  background:linear-gradient(145deg,rgba(166,123,255,.18),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(140,91,229,.07);
  color:var(--v163-text);
  transition:transform var(--d-quick) ease,background var(--d-quick) ease,border-color var(--d-quick) ease;
}
.lang-globe svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang-globe:hover,.lang-globe[aria-expanded="true"]{transform:translateY(-1px);background:linear-gradient(145deg,rgba(176,134,255,.34),rgba(255,255,255,.08));border-color:rgba(222,207,255,.38)}
.lang-globe:focus-visible{outline:2px solid rgba(210,190,255,.7);outline-offset:2px}
.lang-menu{
  position:absolute;z-index:3;top:70px;left:0;min-width:184px;padding:6px;display:grid;gap:2px;
  border-radius:20px;border:1.5px solid var(--v163-line);
  background:linear-gradient(118deg,var(--v163-bg-a),var(--v163-bg-b) 52%,rgba(10,9,15,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 46px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35),0 0 38px rgba(150,105,235,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  color:var(--v163-text);pointer-events:none;opacity:0;transform:translate3d(0,-6px,0) scale(.97);transform-origin:90% 0;
  transition:opacity var(--d-quick) ease,transform var(--d-fast) cubic-bezier(.2,.85,.2,1);
}
.lang-menu[hidden]{display:none}
.lang-menu a{text-decoration:none}   /* V26: Sprachwahl sind Links auf dieselbe Seite in der anderen Sprache */
.lang-menu.is-open{pointer-events:auto;opacity:1;transform:none}
.lang-menu :is(button,a){
  appearance:none;border:0;cursor:pointer;font:inherit;text-align:left;display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:14px;background:transparent;color:var(--v163-muted);font-size:13.5px;font-weight:600;
  transition:background var(--d-fast) ease,color var(--d-quick) ease;
}
.lang-menu :is(button,a) b{width:24px;font-size:10.5px;letter-spacing:.09em;font-weight:760;color:rgba(213,195,255,.78)}
.lang-menu :is(button,a):hover,.lang-menu :is(button,a):focus-visible{color:#fff;background:rgba(255,255,255,.07);outline:0}
.lang-menu :is(button,a).is-active{color:#fff;background:linear-gradient(120deg,rgba(167,124,255,.42),rgba(210,190,255,.2));box-shadow:inset 0 1px rgba(255,255,255,.18)}
.lang-menu :is(button,a).is-active::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:#e4d7ff;box-shadow:0 0 8px rgba(190,160,255,.8)}

/* V6: unter 1320px reicht die Reihe trotz Schrumpfen nicht mehr locker – „GmbH” und die CTA-Beschriftung
   verschwinden, das Kürzel und das reine Icon bleiben (Marke/CTA bleiben erkennbar, nur schmaler). */
/* V14: «GmbH» und die Beschriftung des Fernwartung-Symbols entfallen auf allen Desktop-Breiten (Fernwartung steht auch als Register) – sonst reicht die Kapsel mit neun Registern nicht. */
.v163-nav__gmbh{display:none}
.v163-nav__remote{padding:0 11px;position:relative}
.v163-nav__remote-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}  /* nur visuell weg, bleibt als Name für Screenreader */
.v163-nav__expanded{gap:12px}
@media(max-width:1020px){.v163-nav__brand{display:none}}

/* Mobile: compact capsule; tapping the center opens a floating menu sheet. */
@media(max-width:860px){
  .v163-nav{top:10px;width:calc(100vw - 20px);height:58px}
  .v163-nav__compact{width:min(340px,100%);height:54px}
  .v163-nav__expanded{
    width:min(390px,calc(100vw - 20px));height:auto;min-height:58px;
    padding:12px;grid-template-columns:1fr auto;gap:10px;
    border-radius:28px;
  }
  .v163-nav__brand{display:flex;grid-column:1;grid-row:1;padding-left:8px}.v163-nav__remote{grid-column:2;grid-row:1}
  .v163-nav__brand strong{font-size:15px}.v163-nav__gmbh{display:inline}
  .v163-nav__links{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:5px;padding-top:4px;align-items:stretch}
  .v163-nav__links a{justify-content:flex-start;padding:8px 14px;height:auto;white-space:normal;line-height:1.25;background:rgba(255,255,255,.025);transform:none}
  .v163-nav__lang{grid-column:1/-1;grid-row:3;justify-content:center;margin-top:2px}
  .lang-menu{min-width:min(220px,calc(100vw - 40px))}
}

@media(prefers-reduced-motion:reduce){
  .v163-nav__compact,.v163-nav__expanded,.v163-nav__current strong,.v163-nav__remote-orb{transition:none!important;animation:none!important}
}

/* V25: Orb und Fernwartung sind Links (scrollen zu #remote), Tastaturfokus sichtbar. */
.v163-nav a{text-decoration:none}
.v163-nav__remote{font-family:inherit}

/* V6: Hinweis „Seite bisher nur Deutsch" — erscheint nur bei EN/FR, einmal pro Sitzung wegklickbar. */
.i18n-notice{
  position:fixed;
  z-index:250;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(440px,calc(100vw - 32px));
  padding:10px 10px 10px 16px;
  border-radius:14px;
  border:1px solid rgba(223,214,255,.22);
  background:linear-gradient(118deg,rgba(11,10,16,.92),rgba(28,21,38,.88) 52%,rgba(10,9,15,.94));
  color:var(--v163-text);
  font:500 12.5px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 30px rgba(150,105,235,.12);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  animation:i18n-in .4s cubic-bezier(.2,.85,.2,1);
}
.i18n-notice span{flex:1}
.i18n-notice button{
  appearance:none;border:0;cursor:pointer;flex:none;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--v163-muted);
  background:rgba(255,255,255,.06);
  font-size:15px;line-height:1;
  transition:color var(--d-quick) ease,background var(--d-quick) ease;
}
.i18n-notice button:hover{color:#fff;background:rgba(255,255,255,.12)}
@keyframes i18n-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:860px){.i18n-notice{bottom:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.i18n-notice{animation:none}}
.v163-nav :focus-visible{outline:2px solid #c3b2ff;outline-offset:2px}
.v163-nav__current:focus-visible{outline-offset:-4px;border-radius:999px}


/* V27 (David 17.10.: «Menüleiste auf dem Handy schöner»): schmales Handy – das offene Menü als ruhige Liste statt zweispaltiger Chips:
   eine Zeile je Thema (17 px, feine Trennlinien, Pfeil rechts, aktives Thema in Lavendel), darunter Sprache und Fernwartung nebeneinander. */
@media(max-width:480px){
  .v163-nav{top:8px;width:calc(100vw - 16px)}
  .v163-nav__expanded{width:calc(100vw - 16px);padding:14px 14px 14px;border-radius:26px;max-height:calc(100svh - 20px);overflow:auto;background:rgba(12,11,18,.94)}   /* dichter: der Seitentext scheint nicht durch */
  .v163-nav__brand{padding:6px 0 4px 8px}.v163-nav__brand strong{font-size:17px}
  .v163-nav__links{grid-template-columns:1fr;gap:0;padding:8px 0 4px}
  .v163-nav__links a{position:relative;padding:12px 34px 12px 10px;font-size:16.5px;font-weight:560;letter-spacing:-.01em;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.07);background:none;color:rgba(245,245,247,.86)}
  .v163-nav__links a:last-child{border-bottom:0}
  .v163-nav__links a::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid rgba(195,178,255,.6);border-bottom:1.5px solid rgba(195,178,255,.6);transform:translateY(-50%) rotate(-45deg)}
  .v163-nav__links a.is-active{color:#fff;background:linear-gradient(90deg,rgba(167,124,255,.16),rgba(167,124,255,0));box-shadow:none}
  .v163-nav__links a.is-active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--lavender,#c3b2ff)}
  .v163-nav__lang{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:6px;padding-left:4px}
  .v163-nav__remote{grid-column:2;grid-row:3;align-self:center;margin-top:6px}
}