:root{
  --sky1:#7ec3f5; --sky2:#bfe3fb; --sky3:#ffe7d1;
  --ink:#16324f; --muted:#3f5f80; --card:rgba(255,255,255,.55); --card-b:rgba(255,255,255,.75);
  --cloud:#fff; --accent:#ff7a59; --accent2:#4f8fe0; --shadow:0 10px 30px rgba(22,50,79,.12);
  --sun:#ffd166; --stars:0; --logo-ink:#16324f; --logo-de:#dc5a35;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --sky1:#0b1430; --sky2:#1b2752; --sky3:#3b2f5e;
  --ink:#e8eefc; --muted:#a9b6d6; --card:rgba(255,255,255,.07); --card-b:rgba(255,255,255,.14);
  --cloud:#c9d3f0; --accent:#ffb36b; --accent2:#8fb8ff; --shadow:0 10px 30px rgba(0,0,0,.35);
  --sun:#f4f1de; --stars:1; --logo-ink:#1b2752; --logo-de:#d06a24;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font:400 17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%) fixed;
  background-color:var(--sky1);
  overflow-x:hidden;
}
a{color:inherit}

/* ---------- Himmel ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sun{position:absolute;top:7vh;right:9vw;width:min(22vw,150px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff8 0,var(--sun) 45%,transparent 72%);
  filter:blur(.5px);animation:pulse 8s ease-in-out infinite}
@media (prefers-color-scheme:dark){.sun{background:radial-gradient(circle at 35% 35%,#fff 0,var(--sun) 40%,#f4f1de00 70%);
  box-shadow:inset -18px -8px 0 0 #0000}}
.stars{position:absolute;inset:0;opacity:var(--stars);
  background-image:
   radial-gradient(1.5px 1.5px at 10% 20%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 30% 70%,#fff 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 50% 30%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 70% 15%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 85% 55%,#fff 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 20% 85%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 60% 90%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 92% 85%,#fff 50%,transparent 51%);
  background-size:420px 420px;animation:twinkle 5s ease-in-out infinite alternate}
.drift{position:absolute;left:0;fill:var(--cloud);opacity:.8;animation:drift linear infinite;will-change:transform}
.d1{top:12%;width:220px;animation-duration:70s;animation-delay:-10s}
.d2{top:38%;width:140px;opacity:.55;animation-duration:95s;animation-delay:-60s}
.d3{top:62%;width:300px;opacity:.45;animation-duration:120s;animation-delay:-30s}
.d4{top:80%;width:120px;opacity:.6;animation-duration:80s;animation-delay:-50s}
.d5{top:24%;width:90px;opacity:.5;animation-duration:60s;animation-delay:-5s}
@media (prefers-color-scheme:dark){.drift{opacity:.12}}
@keyframes drift{from{transform:translateX(-35vw)}to{transform:translateX(110vw)}}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes twinkle{to{opacity:calc(var(--stars)*.5)}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Layout ---------- */
main{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 16px 40px}
.hero{min-height:88vh;min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0 20px}
.logo{width:min(560px,92vw);height:auto;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 18px 30px rgba(22,50,79,.18))}
.logo .cloud{fill:var(--cloud)}
.logo .letters{fill:var(--logo-ink)}
.logo .de{fill:var(--logo-de);font:700 17px var(--round)}
.tag{font:600 clamp(1.15rem,3.6vw,1.6rem)/1.3 var(--round);margin:.4em 0 .2em;letter-spacing:-.01em}
.tag em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:0 0 1.6em;font-size:.98rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.35em;border-radius:999px;text-decoration:none;font:600 1rem var(--round);
  background:var(--ink);color:var(--sky2);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--card-b);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.scroll{margin-top:3.5em;color:var(--muted);text-decoration:none;font-size:.85rem;opacity:.8;animation:bob 2.5s ease-in-out infinite}

h2{font:700 clamp(1.5rem,4.5vw,2.1rem)/1.15 var(--round);margin:2.2em 0 .3em;letter-spacing:-.02em}
h2 + p{color:var(--muted);margin:0 0 1.3em}

/* ---------- Dienste ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{position:relative;display:block;padding:20px 20px 18px;border-radius:22px;text-decoration:none;
  background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:transform .25s cubic-bezier(.2,.8,.2,1.4),border-color .2s;animation:rise .6s both}
.card:hover,.card:focus-visible{transform:translateY(-5px) rotate(-.6deg);border-color:var(--accent)}
.card:nth-child(even):hover{transform:translateY(-5px) rotate(.6deg)}
.card .ico{font-size:1.9rem;line-height:1;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:var(--card-b);margin-bottom:12px}
.card b{display:block;font:700 1.15rem var(--round)}
.card span{color:var(--muted);font-size:.93rem}
.card small{display:block;margin-top:10px;font-size:.78rem;color:var(--accent2);font-weight:600}
.card::after{content:"↗";position:absolute;top:18px;right:20px;color:var(--muted);transition:transform .2s}
.card:hover::after{transform:translate(3px,-3px);color:var(--accent)}
.grid .card:nth-child(2){animation-delay:.05s}.grid .card:nth-child(3){animation-delay:.1s}
.grid .card:nth-child(4){animation-delay:.15s}.grid .card:nth-child(5){animation-delay:.2s}.grid .card:nth-child(6){animation-delay:.25s}


/* ---------- Footer ---------- */
footer{position:relative;z-index:1;text-align:center;padding:50px 16px 40px;color:var(--muted);font-size:.9rem}
footer a{text-decoration:none;border-bottom:1px dashed currentColor}
footer .servus{font:700 1.1rem var(--round);color:var(--ink);margin-bottom:.4em}


@media (max-width:560px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:16px 14px;border-radius:18px}
  .card .ico{width:44px;height:44px;font-size:1.6rem;border-radius:13px}
  .card::after{top:14px;right:14px}
  .card span{font-size:.85rem}
  .sun{right:4vw;top:4vh}
}
@media (max-width:360px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* ---------- FreeDyn ---------- */
.brand{font:800 clamp(2.8rem,11vw,5.2rem)/1 var(--round);letter-spacing:-.04em;margin:0;display:flex;align-items:center;gap:.18em;
  animation:bob 6s ease-in-out infinite}
.brand svg{width:1.15em;height:1.15em;flex:none;filter:drop-shadow(0 10px 18px rgba(22,50,79,.18))}
.brand .org{color:var(--accent)}
.ip{display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.6em;padding:.5em 1em;border-radius:999px;font-size:.92rem;
  background:var(--card);border:1px solid var(--card-b);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ip code{font:600 .95rem ui-monospace,"SF Mono",Menlo,Consolas,monospace;word-break:break-all}
.ip .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:10px}
.fact{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fact .ico{font-size:1.6rem}
.fact b{display:block;font:700 1.05rem var(--round);margin:.3em 0 .15em}
.fact span{color:var(--muted);font-size:.9rem}

.panel{padding:22px;border-radius:24px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel p:first-child{margin-top:0}.panel p:last-child{margin-bottom:0}
.url{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 10px 10px 14px;border-radius:14px;
  background:rgba(22,50,79,.88);color:#e8eefc}
.url code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:500 .88rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;scrollbar-width:thin}
.url .lbl{flex:none;font:700 .7rem var(--round);text-transform:uppercase;letter-spacing:.06em;color:#ffb36b}
.copy{flex:none;border:0;border-radius:10px;padding:.45em .8em;font:600 .8rem var(--round);cursor:pointer;background:#ffffff22;color:#fff;transition:background .2s}
.copy:hover{background:#ffffff40}.copy.ok{background:#22c55e}
pre{margin:10px 0;padding:14px;border-radius:14px;background:rgba(22,50,79,.88);color:#e8eefc;overflow-x:auto;
  font:500 .85rem/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
p code,li code,.panel code.i{font:600 .88em ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--card-b);padding:.1em .4em;border-radius:6px;word-break:break-all}
.hint{color:var(--muted);font-size:.92rem}

/* Geräte-Akkordeon */
.dev{margin:0 0 12px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.dev summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px;font:700 1.08rem var(--round)}
.dev summary::-webkit-details-marker{display:none}
.dev summary .ico{font-size:1.5rem;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--card-b);flex:none}
.dev summary small{display:block;font:400 .85rem system-ui,sans-serif;color:var(--muted)}
.dev summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--muted);transition:transform .25s}
.dev[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.dev .body{padding:0 18px 18px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.shots figure{margin:0}
.shots a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--card-b);background:#fff}
.shots img{display:block;width:100%;height:170px;object-fit:cover;object-position:top left;transition:transform .3s}
.shots a:hover img{transform:scale(1.04)}
.shots figcaption{font-size:.8rem;color:var(--muted);margin-top:6px}

/* IPv6-Modi */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:14px 0}
.mode{padding:14px 16px;border-radius:16px;background:var(--card-b)}
.mode b{display:block;font:700 1rem var(--round);margin-bottom:.2em}
.mode span{font-size:.88rem;color:var(--muted)}

.admin{text-align:center;padding:34px 22px}
.admin h2{margin-top:0}

/* Lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:92vh}
dialog.lb::backdrop{background:rgba(5,10,25,.82);backdrop-filter:blur(4px)}
dialog.lb img{display:block;max-width:96vw;max-height:84vh;border-radius:12px}
dialog.lb p{color:#e8eefc;text-align:center;margin:.6em 0 0;font-size:.9rem}

@media (max-width:560px){
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .fact{padding:14px}
  .panel{padding:16px;border-radius:20px}
  .url{flex-wrap:wrap}
  .url code{flex-basis:100%;order:3}
  .dev summary{padding:14px}
  .dev .body{padding:0 14px 14px}
}