/* SK Empire Landing – dunkler Glass-Look mit Natur-Touch */
:root {
  --sk-bg: #0b1210;
  --sk-ink: #ecf3ee;
  --sk-muted: #9bb0a4;
  --sk-line: rgba(180, 210, 190, 0.14);
  --sk-accent: #7dcea0;
  --sk-accent-hot: #a8e6c1;
  --sk-glass: rgba(18, 32, 26, 0.55);
  --sk-glass-strong: rgba(22, 38, 30, 0.72);
  --sk-blur: 28px;
  --sk-radius: 22px;
  --sk-font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --sk-display: "Syne", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background: var(--sk-bg);
  color: var(--sk-ink);
  font-family: var(--sk-font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.sk-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(70, 130, 95, 0.28), transparent 58%),
    radial-gradient(700px 480px at 88% 18%, rgba(45, 90, 70, 0.22), transparent 55%),
    radial-gradient(800px 520px at 50% 100%, rgba(30, 70, 55, 0.35), transparent 60%),
    linear-gradient(160deg, #08100d 0%, #0d1713 45%, #0a120f 100%);
}

.sk-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.sk-glow-a {
  width: 42vw;
  height: 42vw;
  max-width: 480px;
  max-height: 480px;
  left: -8%;
  top: -10%;
  background: rgba(90, 160, 120, 0.35);
}

.sk-glow-b {
  width: 36vw;
  height: 36vw;
  max-width: 420px;
  max-height: 420px;
  right: -6%;
  bottom: 8%;
  background: rgba(50, 110, 85, 0.4);
}

.sk-leaf {
  position: absolute;
  inset: auto 8% 12% auto;
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  opacity: 0.12;
  background:
    radial-gradient(circle at 30% 30%, rgba(170, 230, 190, 0.5), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(90, 150, 110, 0.45), transparent 50%);
  border-radius: 60% 40% 55% 45%;
  transform: rotate(-18deg);
}

.sk-shell {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 1.25rem clamp(1.1rem, 4vw, 2rem) 3.5rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.sk-shell--empty {
  max-width: none;
  padding: 1.25rem clamp(1.1rem, 4vw, 2rem);
}

.sk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sk-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sk-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sk-mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  background: var(--sk-glass);
  border: 1px solid var(--sk-line);
  backdrop-filter: blur(var(--sk-blur)) saturate(140%);
  color: var(--sk-accent);
  font-size: 1rem;
}

.sk-empty {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}

.sk-hero-logo {
  display: block;
  width: min(78vw, 42rem);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
  user-select: none;
  pointer-events: none;
}

/* Unsichtbarer Login-Hotspot (unten links) */
.sk-ghost-login {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  z-index: 20;
  opacity: 0;
}

/* Rechtliche Buttons unten rechts */
.sk-legal-btns {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.sk-impressum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--sk-line);
  background: var(--sk-glass);
  backdrop-filter: blur(var(--sk-blur)) saturate(140%);
  color: var(--sk-ink);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sk-impressum-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 206, 160, 0.45);
  color: var(--sk-accent);
}