@import url("fonts/fonts.css");

:root{
  --bg:#ffffff; --bg2:#f4f6f8; --ink:#101620; --mut:#5b6573; --line:#e6e9ee;
  --acc:#5b9bd5; --acc2:#3f82d4;
  --serif:'Syne',sans-serif; --body:'Sora',sans-serif; --mono:'Space Mono',monospace;
  --chrome:linear-gradient(180deg,#454c54 0%,#10161e 44%,#5f6873 58%,#1c232b 100%);
  --wrap:880px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% -10%, #eef4f7 0%, var(--bg) 60%)}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}

/* Nav */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px clamp(20px,5vw,48px);background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.14em;
  display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--acc);display:inline-block}
.wm{text-transform:uppercase;background:var(--chrome);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.nav-right{display:flex;align-items:center;gap:10px}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line);border-radius:100px;color:var(--ink);transition:.25s}
.back:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}

/* Sprach-Umschalter (kompakt) */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  padding:9px 13px;border:1px solid var(--line);border-radius:100px;background:#fff;
  color:var(--ink);cursor:pointer;transition:.25s}
.lang-btn:hover{border-color:var(--acc);color:var(--acc2)}
.lang-btn svg{width:14px;height:14px}.lang-btn .chev{width:11px;height:11px;transition:.25s}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;width:208px;max-height:340px;
  overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px -18px rgba(16,24,32,.3);padding:6px;display:none;z-index:60}
.lang.open .lang-menu{display:block}
.lang-opt{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;
  padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);
  font-family:var(--body);font-size:14px;text-align:left;cursor:pointer;transition:.15s}
.lang-opt:hover{background:#eef4fa}
.lang-opt.on{background:rgba(91,155,213,.14);color:var(--acc2);font-weight:600}
.lang-opt .lc{font-family:var(--mono);font-size:11px;color:var(--mut)}

/* Inhalt */
main{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,48px) 100px}
main h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5vw,46px);
  line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:8px}
main h3{font-family:var(--serif);font-weight:700;font-size:clamp(17px,2.2vw,21px);
  margin:38px 0 10px;letter-spacing:.01em}
main p{margin:0 0 14px;color:#2c3543;font-size:clamp(15px,1.4vw,16.5px)}
main p.lead{color:var(--mut);font-size:clamp(16px,1.6vw,18px);margin-bottom:10px}
main p.muted{color:var(--mut);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;margin-top:40px}
main strong{color:var(--ink);font-weight:600}

/* Footer */
footer{border-top:1px solid var(--line);padding:32px clamp(20px,5vw,48px);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  color:var(--mut);font-size:13px}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--mut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:600px){
  .back{padding:8px 12px;font-size:10px}
  footer{flex-direction:column;align-items:flex-start}
}