:root{
  --bg1:#ffe0bb; --bg2:#fff1e2; --bg3:#dfe6f5;
  --ink:#13224a; --muted:#4b5a7c; --card:rgba(255,255,255,.58); --card-b:rgba(255,255,255,.85);
  --accent:#e2601f; --accent2:#b8412a; --sun:#ffb347; --glow:rgba(255,140,60,.35);
  --navy:#13224a; --line:rgba(19,34,74,.22); --dot:rgba(19,34,74,.18);
  --shadow:0 10px 30px rgba(19,34,74,.14); --stars:0;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg1:#060b1e; --bg2:#0d1838; --bg3:#2a1836;
  --ink:#eef1fb; --muted:#aab4d4; --card:rgba(255,255,255,.07); --card-b:rgba(255,255,255,.14);
  --accent:#ff9a5a; --accent2:#ffc47a; --sun:#ff7a3d; --glow:rgba(255,110,50,.25);
  --navy:#0d1838; --line:rgba(255,140,70,.35); --dot:rgba(140,170,255,.18);
  --shadow:0 10px 30px rgba(0,0,0,.45); --stars:1;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);overflow-x:hidden;
  font:400 17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 45%,var(--bg3) 100%) fixed;background-color:var(--bg2)}
a{color:inherit}

/* ---------- Futuristischer Hintergrund ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dots{position:absolute;inset:0;
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask:linear-gradient(180deg,#000 0,transparent 55%);mask:linear-gradient(180deg,#000 0,transparent 58%)}
.floor{position:absolute;left:-60%;right:-60%;top:58vh;height:34vh;transform-origin:50% 0;
  transform:perspective(40vh) rotateX(60deg);
  background-image:linear-gradient(var(--line) 2px,transparent 2px),linear-gradient(90deg,var(--line) 2px,transparent 2px);
  background-size:48px 48px;animation:run 4s linear infinite;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 45%);mask:linear-gradient(180deg,transparent 0,#000 45%)}
.horizon{position:absolute;left:0;right:0;top:58vh;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--navy) 50%,var(--accent) 75%,transparent);opacity:.6;
  box-shadow:0 0 24px 3px var(--glow)}
.stars{position:absolute;inset:0 0 45% 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%);
  background-size:380px 380px;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes run{to{background-position:0 48px,0 0}}
@keyframes twinkle{to{opacity:calc(var(--stars)*.5)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@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:86vh;min-height:86svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0 20px}
.face{width:min(200px,48vw);aspect-ratio:1;border-radius:50%;padding:5px;
  position:relative;
  box-shadow:0 18px 40px var(--glow);animation:bob 6s ease-in-out infinite}
.face .ring{position:absolute;inset:0;border-radius:50%;
  /* dunkelste Stelle (navy) bei 0deg = 12 Uhr, dreht wie ein Sekundenzeiger; Startphase setzt JS ueber --sec */
  background:conic-gradient(var(--navy),var(--accent2) 18%,var(--accent) 35%,var(--sun) 50%,var(--accent) 65%,var(--accent2) 82%,var(--navy));
  animation:sec 60s linear infinite;animation-delay:var(--sec,0s)}
@keyframes sec{to{transform:rotate(360deg)}}
.face img{position:relative;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:18% 45%;border:4px solid var(--bg2)}
h1{font:800 clamp(2.4rem,9vw,4.6rem)/1 var(--round);letter-spacing:-.035em;margin:.45em 0 .15em}
h1 span{background:linear-gradient(95deg,var(--ink) 10%,var(--accent) 60%,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font:600 clamp(1.05rem,3.2vw,1.35rem)/1.35 var(--round);margin:.2em 0}
.sub{color:var(--muted);margin:0 0 1.6em;font-size:.95rem}
.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(--bg2);box-shadow:var(--shadow);transition:transform .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,.btn:focus-visible{transform:translateY(-2px) rotate(-1deg)}
.scroll{margin-top:3em;color:var(--muted);text-decoration:none;font-size:.85rem;animation:bob 2.5s ease-in-out infinite}

h2{position:relative;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}

/* ---------- Kacheln ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,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.8rem;line-height:1;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(19,34,74,.25);margin-bottom:12px}
.card b{display:block;font:700 1.15rem var(--round);padding-right:1.2em}
.card span{color:var(--muted);font-size:.93rem}
.card small{display:block;margin-top:10px;font:600 .78rem var(--mono);color:var(--accent)}
.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)}
.card.big{grid-column:span 2}
.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}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:.55em 1.05em;border-radius:999px;text-decoration:none;font:600 .95rem var(--round);
  background:var(--card);border:1px solid var(--card-b);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s cubic-bezier(.2,.8,.2,1.6),background .2s,color .2s}
.chip:hover,.chip:focus-visible{background:var(--ink);color:var(--bg2);transform:scale(1.07) rotate(-2deg)}
.chip:nth-child(3n):hover{transform:scale(1.07) rotate(2deg)}

/* ---------- Kontakt ---------- */
.contact{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:24px;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)}
.contact .mail{font:600 1.1rem var(--mono)}

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:640px){
  body{font-size:16px}
  .card.big{grid-column:auto}
  .grid{gap:12px}
  .card{padding:16px 16px 14px;border-radius:18px}
  .contact{padding:18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Unterseiten (Kontakt/Impressum) ---------- */
.top{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:20px 16px 0;display:flex;align-items:center;gap:12px}
.top a{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.05rem var(--round)}
.top img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:18% 45%;border:2px solid var(--accent)}
.page{max-width:760px}
.page h1{font-size:clamp(2rem,7vw,3rem);margin:.6em 0 .2em}
.paper{padding:24px;border-radius:24px;margin-bottom:18px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .6s both}
.paper h2{margin:0 0 .5em;font-size:1.3rem}
.paper address{font-style:normal;line-height:1.75}
form .row{display:grid;gap:6px;margin-bottom:14px}
form label{font:600 .9rem var(--round);color:var(--muted)}
form input[type=text],form input[type=email],form textarea{width:100%;font:inherit;color:var(--ink);padding:.7em .9em;border-radius:14px;
  border:1px solid var(--card-b);background:rgba(255,255,255,.6);outline:none;transition:border-color .2s,box-shadow .2s}
@media (prefers-color-scheme:dark){form input[type=text],form input[type=email],form textarea{background:rgba(0,0,0,.25)}}
form input:focus,form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
form textarea{min-height:12em;resize:vertical}
form input[type=file]{font-size:.9rem;color:var(--muted)}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form button{border:0;cursor:pointer}
.spam{padding:12px 14px;border-radius:14px;border:1px dashed var(--accent);font-size:.9rem}
.js .spam{display:none}
.done{text-align:center;padding:40px 24px}
.done .big{font-size:3.5rem;line-height:1}
@media (max-width:640px){form .two{grid-template-columns:1fr}}

h2::before{content:"";display:block;width:42px;height:4px;border-radius:2px;margin-bottom:.45em;background:linear-gradient(90deg,var(--navy),var(--accent))}
@media (prefers-color-scheme:dark){h2::before{background:linear-gradient(90deg,#4f6bd8,var(--accent))}.card .ico{background:#162658}}
@media (prefers-reduced-motion:reduce){.face .ring{transform:rotate(var(--rot,0deg))}}