@font-face{
font-family: 'Roboto';
src: url('../fonts/roboto-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Roboto';
src: url('../fonts/roboto-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Roboto';
src: url('../fonts/roboto-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}

:root{
--bg: #eef3f9;
--card: #ffffff;
--text: #0f172a;
--muted: #5b6b82;
--border: rgba(15, 23, 42, 0.10);
--shadow: 0 18px 40px rgba(15, 23, 42, 0.10);

--hero1: #0b4f95;
--hero2: #0b67b9;
--hero3: #0a78d1;

--bluebtn: #0b67b9;
--bluebtn2: #0a78d1;

--accent: #ff8a00;
--accent-x: #ffd400; /* Header-Akzent ("IP" im Logo) */
--label: #00425B;

--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--sans: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
margin:0;
font-family: var(--sans);
color: var(--text);
background: var(--bg);
}

.container{
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}

.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }
.ico{ display:block; }

.site-header{
position:sticky;
top:0;
z-index:1000;
background: linear-gradient(180deg, rgba(11, 79, 149, 0.86), rgba(6, 20, 45, 0.86)); /* dunkles blaues Glas, auch am Seitenanfang */
backdrop-filter:saturate(1.2) blur(8px);
-webkit-backdrop-filter:saturate(1.2) blur(8px);
border-bottom:1px solid rgba(255,255,255,.14);
padding-top: env(safe-area-inset-top, 0px);
}
.header-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 16px 0}  /* Header Höhe */
.brand:link, .brand:visited{color:#fff; text-decoration:none}
.brand:hover, .brand:active{color:#fff; text-decoration:none}

.brand{
display:flex;
flex-direction:row;
align-items:stretch;   /* sorgt dafür, dass Icon und Textblock die gleiche Höhe haben */
gap:.7rem;
}

.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
gap:.15rem;
}

.brand-mark{
  height: calc(
    (clamp(1.1rem, 3vw, 1.6rem) + 1px) * 1.25 /* Icon Größe */
    + .95rem * 1.15
    + .15rem
  );
  width: auto;
  display: block;
  flex: 0 0 auto;
}


.brand-title{font-weight:800; letter-spacing:.2px; font-size:calc(clamp(1.1rem,3vw,1.6rem) + 1px)}
.brand-title .accent{color:var(--accent-x); font-size:calc(1em + 1px)}
.brand-claim{font-size:.95rem; opacity:.9}

/* Top-Navigation (Header rechts) */
.topnav{ display:flex; align-items:center;margin-right: 60px; }

@supports (position: sticky){
  .topnav{ position: relative; }
}
.navToggle{
display:none;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
backdrop-filter: saturate(1.1) blur(8px);
-webkit-backdrop-filter: saturate(1.1) blur(8px);
cursor: pointer;
padding: 0;
}
.navToggle__bar{
display:block;
width: 18px;
height: 2px;
margin: 4px auto;
background: rgba(255,255,255,0.92);
border-radius: 2px;
}

.navMenu{ display:flex; align-items:center; gap: 14px; }

.navLink{
color: rgba(255,255,255,0.95);
text-decoration: none;
font-weight: 600;
font-size: 18px; /* +20% */
padding: 9px 12px;
border-radius: 10px;
line-height: 1.1;
}
a.navLink:link, a.navLink:visited{ color: rgba(255,255,255,0.95); text-decoration: none; }
.navLink:hover, .navLink:active{ background: rgba(255,255,255,0.08); }

/* NEU: gleiche Farbe auch für den Button ("Ratgeber") */
button.navLink,
button.navLink:visited{
  color: rgba(255,255,255,0.95);
}

.navDrop{ position: relative; }
.navDrop__btn{ background: transparent; border: none; color: inherit; }
.navDrop__btn::after{
content: "";
display: inline-block;
margin-left: 8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
opacity: 0.9;
transform: translateY(1px);
}
.navDrop__menu{
position: absolute;
right: 0;
top: calc(100% + 10px);
min-width: 220px;
background: rgba(11, 23, 43, 0.92);
backdrop-filter: saturate(1.1) blur(12px);
-webkit-backdrop-filter: saturate(1.1) blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,0.35);
padding: 8px;
display: none;
z-index: 1100;
}
.navDrop__menu.is-open{ display: block; }
.navDrop__item{
display:block;
color: rgba(255,255,255,0.94);
text-decoration:none;
font-size: 14px;
padding: 10px 10px;
border-radius: 10px;
}
.navDrop__item:hover{ background: rgba(255,255,255,0.08); }

/* HERO */
.heroStage{
background:
radial-gradient(900px 420px at 20% 10%, rgba(31,182,255,0.22), transparent 55%),
radial-gradient(900px 420px at 85% 20%, rgba(45,212,191,0.14), transparent 58%),
linear-gradient(180deg, var(--hero1), var(--hero2) 55%, var(--hero3));
color: #fff;
padding: 44px 0 86px 0;
position: relative;
overflow: hidden;
}
.heroStage__inner{ text-align: center; position: relative; z-index: 1; }

.heroNet{
position: absolute;
inset: 0;
z-index: 0;
}
.heroNet canvas{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.heroTitle{
margin: 16px 0 10px 0;
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.6px;
font-weight: 700;
}
.heroSub{
margin: 0 auto 14px auto;
max-width: 900px;
font-size: 18px;
line-height: 1.55;
color: rgba(255,255,255,0.90);
}

/* Breadcrumb */
.heroCrumbs{
margin: 10px 0 18px 0;
text-align: center;
font-size: 14px;
color: rgba(255,255,255,0.92);
}
.heroCrumbs a{
color: rgba(255,255,255,0.92);
text-decoration: none;
padding: 6px 8px;
border-radius: 10px;
}
.heroCrumbs a:hover{
background: rgba(255,255,255,0.12);
}
.heroCrumbs .sepC{ opacity: 0.75; padding: 0 6px; }

.heroPanel{
position: relative;
margin: 0 auto;
max-width: 980px;
background: #fff;
color: var(--text);
border-radius: 18px;
box-shadow: 0 30px 60px rgba(2, 24, 58, 0.35);
border: 1px solid rgba(15,23,42,0.10);
padding: 18px;
text-align: left;
}

.ipLine{
border-radius: 16px;
border: 1px solid rgba(15,23,42,0.10);
background: #fff;
padding: 14px 14px 12px 14px;
}
.ipLine + .ipLine{ margin-top: 12px; }
.ipLine--v6{
background: linear-gradient(180deg, rgba(31,182,255,0.10), rgba(255,138,0,0.06));
border-color: rgba(31,182,255,0.22);
}
.ipLine--v4{ background: rgba(15,23,42,0.02); }

.ipLine__head{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: 10px;
}
.ipLabel{
display:flex;
align-items:center;
gap: 10px;
font-weight: 700;
}
.ipPill{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(15,23,42,0.10);
}
.ipPill--v6{
border-color: rgba(31,182,255,0.30);
background: rgba(31,182,255,0.10);
color: #0b4f95;
}
.ipPill--v4{
border-color: rgba(15,23,42,0.12);
background: rgba(15,23,42,0.03);
color: var(--muted);
}
.ipNote{
font-size: 12px;
color: #0b4f95;
font-weight: 700;
}
.ipNote--muted{ color: var(--muted); }

.ipValueRow{ display:flex; align-items:center; }

.ipValue{
display:block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.2px;
}
.ipValue--v6{
font-size: 30px;
font-weight: 700;
color: #0b2c57;
text-align: center;
}
.ipValue--v4{
font-size: 16px;
font-weight: 700;
color: var(--muted);
}

/* Wenn keine IPv6 vorhanden ist: IPv4 optisch als primäre Ausgabe hervorheben */
.heroPanel.ipSwap .ipLine--v4{
background: linear-gradient(180deg, rgba(31,182,255,0.10), rgba(255,138,0,0.06));
border-color: rgba(31,182,255,0.22);
}
.heroPanel.ipSwap .ipLine--v6{
background: rgba(15,23,42,0.02);
border-color: rgba(15,23,42,0.10);
}
.heroPanel.ipSwap .ipValue--v4{
font-size: 36px;
font-weight: 700;
color: #0b2c57;
text-align: center;
}
.heroPanel.ipSwap .ipValue--v6{
font-size: 16px;
font-weight: 700;
color: var(--muted);
text-align: left;
}

/* Wenn IPv4 primär ist: Wert sowohl horizontal als auch vertikal zentrieren */
.heroPanel.ipSwap .ipLine--v4{ display:flex; flex-direction:column; }
.heroPanel.ipSwap .ipLine--v4 .ipValueRow{ flex:1; align-items:center; justify-content:center; min-height: 46px; }

.ipHint{
margin-top: 8px;
font-size: 12px;
color: rgba(15,23,42,0.62);
text-align: center;
}

.alert{
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
font-size: 14px;
border: 1px solid rgba(15,23,42,0.12);
}
.alert--warn{
background: rgba(255,138,0,0.10);
border-color: rgba(255,138,0,0.35);
color: #7a3b00;
}

.btn{
border: 1px solid rgba(15,23,42,0.12);
background: #fff;
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
font-weight: 700;
cursor: pointer;
}
.btn:hover{ filter: brightness(0.98); }
.btn--blue{
background: linear-gradient(180deg, var(--bluebtn), var(--bluebtn2));
border-color: rgba(11,103,185,0.40);
color: #fff;
}
.btn--ghost{
background: rgba(15,23,42,0.03);
}
.btn--slim{
padding: 8px 12px;
border-radius: 10px;
}

.iconbtn{
width: 40px;
height: 40px;
border-radius: 12px;
display:grid;
place-items:center;
cursor:pointer;
border: 1px solid rgba(15,23,42,0.12);
background: #fff;
}
.iconbtn:disabled{ opacity: 0.55; cursor: not-allowed; }
.iconbtn:hover:not(:disabled){ filter: brightness(0.98); }
.iconbtn--primary{
background: linear-gradient(180deg, var(--accent), #ff6a00);
border-color: rgba(255,138,0,0.55);
color: #fff;
}
.iconbtn--ghost{
background: rgba(15,23,42,0.03);
}
.iconbtn--ghost:hover:not(:disabled){
background: rgba(31,182,255,0.10);
border-color: rgba(31,182,255,0.22);
}

/* Tooltip */
.tip{
position: relative;
display:inline-flex;
align-items:center;
justify-content:center;
width: 28px;
height: 28px;
border-radius: 10px;
border: 1px solid rgba(15,23,42,0.10);
background: rgba(15,23,42,0.02);
color: var(--label);
cursor: default;
z-index: 20;
}
.tip--bare{
width: auto;
height: auto;
border: none;
background: transparent;
padding: 0;
border-radius: 0;
color: var(--label);
}

/* spacing when used inline as prefix icon */
.kv__k .tip--bare,
.pKey .tip--bare{
margin-right: 8px;
vertical-align: -3px;
}

.tip__bubble{
position:absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(calc(-50% + var(--tip-shift, 0px)));
width: min(360px, 78vw);
background: rgba(15,23,42,0.92);
color:#fff;
border-radius: 12px;
padding: 10px 12px;
font-size: 13px;
line-height: 1.35;
opacity: 0;
pointer-events:none;
transition: opacity 120ms ease, transform 120ms ease;
box-shadow: 0 12px 28px rgba(15,23,42,0.25);
z-index: 9999;
}
.tip:focus .tip__bubble,
.tip:hover .tip__bubble{
opacity: 1;
transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(-2px);
}

.toast{
position:absolute;
right: 16px;
bottom: 14px;
padding: 8px 10px;
font-size: 13px;
color: #fff;
background: rgba(15,23,42,0.92);
border-radius: 12px;
opacity: 0;
transform: translateY(6px);
transition: opacity 140ms ease, transform 140ms ease;
pointer-events:none;
}
.toast--show{ opacity: 1; transform: translateY(0); }

.mainContent{
margin-top: -44px;
padding-bottom: 34px;
}

.profileCard{
margin-top: 14px;
border: 1px solid rgba(15,23,42,0.10);
border-radius: 16px;
background: #fff;
padding: 14px;
}
.profileHead{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: 10px;
}
.profileTitle{
display:flex;
align-items:center;
gap: 10px;
font-weight: 700;
color: var(--label);
}
.profileIcon{ color: var(--label); display:inline-flex; }
.profileActions{ display:flex; gap: 10px; }

.profileGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pItem{
border: 1px solid rgba(15,23,42,0.10);
border-radius: 14px;
padding: 10px 12px;
background: rgba(15,23,42,0.02);
}
.pItem--wide{ grid-column: 1 / -1; }
.pKey{
font-weight: 700;
color: var(--label);
font-size: 13px;
margin-bottom: 6px;
}
.pVal{ font-size: 14px; color: var(--text); overflow-wrap:anywhere; }

.traffic{
display:flex;
flex-wrap: wrap;
gap: 12px 16px;
align-items:center;
justify-content: center;
}
.traffic__item{ display:flex; align-items:center; gap: 8px; font-size: 14px; }
.lamp{
width: 12px; height: 12px;
border-radius: 999px;
background: rgba(15,23,42,0.18);
box-shadow: 0 0 0 4px rgba(15,23,42,0.06);
}
.lamp--g{ background: #1db954; box-shadow: 0 0 0 4px rgba(29,185,84,0.18); }
.lamp--y{ background: #ffb020; box-shadow: 0 0 0 4px rgba(255,176,32,0.20); }
.lamp--r{ background: #ff4d4f; box-shadow: 0 0 0 4px rgba(255,77,79,0.18); }

.acc{
margin: 16px 0;
border-radius: 18px;
border: 1px solid var(--border);
background: transparent;
}
.acc__sum{
list-style: none;
cursor: pointer;
display:flex;
align-items:center;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow);
position: relative;
z-index: 5;
}
.acc__sum::-webkit-details-marker{ display:none; }
.acc__title{
font-size: 18px;
font-weight: 700;
color: var(--label);
}
.sectionIcon{ color: var(--label); display:inline-flex; align-items:center; }
.acc__chev{
margin-left:auto;
width: 10px;
height: 10px;
border-right: 2px solid rgba(15,23,42,0.5);
border-bottom: 2px solid rgba(15,23,42,0.5);
transform: rotate(45deg);
transition: transform 120ms ease;
}
.acc[open] .acc__chev{ transform: rotate(-135deg); }

.acc__body{ margin-top: 10px; }

/* Homogener Übergang zwischen Summary und Inhalt */
.acc[open] .acc__sum{
border-radius: 18px 18px 0 0;
box-shadow: none;
border-bottom: 1px solid var(--border);
}
.acc[open] .acc__body{
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.acc__body.card{
border: none;
border-radius: 0 0 18px 18px;
background: linear-gradient(180deg, rgba(15,23,42,0.035) 0%, rgba(255,255,255,1) 22px);
}

.card{
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 22px;
}
.card--inner{ box-shadow: none; margin: 0; }
.card__head{ margin-bottom: 8px; }
.card__head--spacious{ margin-bottom: 16px; }
.card__head p{ margin:0; color: var(--muted); }

/* Inline-Icons (OS / Flaggen etc.) */
.withIcon{
display:flex;
align-items:center;
gap: 10px;
}
.miniIcon{
width: 18px;
height: 18px;
display:inline-block;
opacity: .92;
}
.flagIcon{
width: 1.1em;
height: 1em;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
}

/* Fingerprint-Risiko: Text + 5er-Farbskala */
.riskWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.riskText{
  display:inline-block;
}

.riskScale{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}

.riskDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: .22;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}

/* Farbleiter von “gut” nach “kritischer” */
.riskDot--1{ background: #22c55e; }  /* gruen */
.riskDot--2{ background: #84cc16; }  /* gelbgruen */
.riskDot--3{ background: #facc15; }  /* gelb */
.riskDot--4{ background: #fb923c; }  /* orange */
.riskDot--5{ background: #ef4444; }  /* rot */

.riskDot.is-on{
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.08), 0 8px 16px rgba(15,23,42,0.12);
}



.grid2{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 14px;
}

/* CLIPPING FIX */
.kv{
border: 1px solid var(--border);
border-radius: 16px;
background: #fff;
overflow: visible;
position: relative;
z-index: 2;
}
.kv__row{
display:flex;
gap: 16px;
padding: 12px 14px;
border-top: 1px solid var(--border);
position: relative;
z-index: 2;
}
.kv__row:first-child{ border-top: none; }

.kv__k{
width: 42%;
color: var(--label);
font-size: 14px;
font-weight: 700;
}
.kv__v{
width: 58%;
font-size: 14px;
color: var(--text);
overflow-wrap: anywhere;
}

.sep{
border: none;
border-top: 1px solid var(--border);
margin: 18px 0;
}
.h3{ margin: 4px 0 10px 0; font-size: 16px; font-weight: 700; color: var(--label); }

.note{
margin-top: 14px;
border: 1px solid rgba(31,182,255,0.28);
background: rgba(31,182,255,0.10);
border-radius: 14px;
padding: 12px 14px;
color: #0b4f95;
font-size: 14px;
}

.mapwrap{
margin-top: 16px;
border: 1px solid var(--border);
border-radius: 16px;
overflow:hidden;
background: #fff;
}
.map{ height: 360px; }
.maplegend{ padding: 10px 14px; }

.dnsForm{
display:flex;
gap: 10px;
align-items:center;
margin-top: 14px;
}
.dnsLabel{ font-weight: 700; color: var(--label); }
.dnsInput{
flex: 1;
border-radius: 12px;
border: 1px solid rgba(15,23,42,0.14);
padding: 10px 12px;
font-size: 14px;
outline: none;
}
.dnsInput:focus{ border-color: rgba(11,103,185,0.45); box-shadow: 0 0 0 4px rgba(11,103,185,0.12); }
.dnsGrid{ margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

.webrtcActions{ margin-top: 14px; }
.webrtcBox{ margin-top: 14px; }

.nettestActions{ display:flex; gap: 10px; margin-top: 14px; }


#ipv6-missing{
text-align: center;
}


/* Spinner + Progress */
.spinner{
display:inline-block;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(15,23,42,0.22);
border-top-color: rgba(11,103,185,0.90);
margin-right: 8px;
vertical-align: -3px;
animation: spin 0.8s linear infinite;
}
@keyframes spin{
to{ transform: rotate(360deg); }
}
.spinner[hidden]{
display:none !important;
}
.stateicon{
display:inline-flex;
align-items:center;
justify-content:center;
margin-left:8px;
color: rgba(15,23,42,0.55);
vertical-align: -3px;
}
.stateicon--hide{
display:none !important;
}

.progress{
margin-top: 8px;
width: min(380px, 100%);
height: 8px;
border-radius: 999px;
background: rgba(15,23,42,0.08);
overflow: hidden;
}
.progress__bar{
height: 100%;
width: 0%;
background: linear-gradient(90deg, rgba(11,103,185,0.90), rgba(10,120,209,0.90));
transition: width 160ms ease;
}

.progress__bar--fluid{
background: linear-gradient(90deg, rgba(11,103,185,0.95), rgba(33,214,214,0.95), rgba(11,103,185,0.95));
background-size: 200% 100%;
animation: ntFluid 1.15s ease-in-out infinite;
}

@keyframes ntFluid{
0%{ background-position: 0% 50%; }
50%{ background-position: 100% 50%; }
100%{ background-position: 0% 50%; }
}
#nt-size-ul{
margin-top:6px;
}

/* Übergang vom Analyse- zum Content-Teil */
.contentShift{
display:flex;
justify-content:center;
margin: 30px 0 30px 0;
}
.contentShift__line{
display:block;
width: min(520px, 86%);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(15,23,42,0.22), transparent);
}

/* PDF Export Button (unterhalb der Analyse, vor dem Content-Teil) */
.pdfBar{
display:flex;
justify-content:center;
margin: 18px 0 18px 0;
}

.contentBox{
margin: 0 0 22px 0;
padding: 22px;
border: 1px solid var(--border);
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow);
}
.contentBox__head{ margin-bottom: 12px; }
.contentBox__title{
margin: 0;
font-size: 22px;
font-weight: 800;
color: var(--label);
}
.contentBox__sub{
margin: 6px 0 0 0;
color: var(--muted);
}

.footer{
padding: 22px 0;
text-align: center;
font-size: 16px;
color: #888;
}
.footer__links{ margin: 0 0 25px 0; }
.footer__link{ color: #888; text-decoration: none; }
.footer__link:hover{ text-decoration: underline; }
.footer__sep{ display:inline-block; margin: 0 10px; color: #888; }

.skel{
color: transparent !important;
background: linear-gradient(90deg, rgba(15,23,42,0.06), rgba(15,23,42,0.12), rgba(15,23,42,0.06));
background-size: 200% 100%;
border-radius: 8px;
display:inline-block;
min-width: 120px;
animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel{
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}



@media (max-width: 980px){
.heroTitle{ font-size: 40px; }
}
@media (max-width: 860px){
.grid2{ grid-template-columns: 1fr; }
.heroStage{ padding-bottom: 74px; }
.mainContent{ margin-top: -34px; }
.ipValue--v6{ font-size: 22px; }
.profileGrid{ grid-template-columns: 1fr; }

/* Navigation: Mobile */
.navToggle{ display: block;}
.container{
 width: min(1120px, calc(100% - 26px));}
 
    
.navMenu{
display: none;
position: absolute;
right: 0;
transform: translateX(22px); /* nach rechts */
top: calc(100% + 10px);
flex-direction: column;
align-items: stretch;
gap: 6px;
min-width: 240px;
background: rgba(11, 23, 43, 0.92);
backdrop-filter: saturate(1.1) blur(12px);
-webkit-backdrop-filter: saturate(1.1) blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 16px;
box-shadow: 0 18px 46px rgba(0,0,0,0.40);
padding: 10px;
z-index: 1200;
}
.topnav.is-open .navMenu{ display: flex; }

.navLink{ width: 100%; text-align: left; }
.navDrop__menu{ position: static; top: auto; right: auto; min-width: auto; box-shadow: none; border-radius: 12px; }
}