/* Landingpage der DNS-Verwaltung.
   Zurueckhaltende, technische Anmutung: kuehle Neutraltoene, ein einziger
   gedeckter Akzent, keine Animation. Die Persoenlichkeit traegt die Typografie
   und der Wechsel zu Monospace fuer alles, was DNS woertlich sagt.
   Einziges Zierelement ist der Punkt der Root-Zone hinter dem Namen. */

:root {
  --ground:   #f6f7f9;
  --panel:    #ffffff;
  --panel-2:  #f0f2f5;
  --ink:      #0f1419;
  --ink-mid:  #3d4854;
  --ink-soft: #626e7b;
  --line:     #dfe3e8;
  --line-soft:#eaedf1;
  --accent:   #1f5170;
  --accent-in:#ffffff;
  --ok:       #16704f;
  --shadow:   0 1px 2px rgba(15,20,25,.04), 0 6px 20px rgba(15,20,25,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #0e1216;
    --panel:    #161b21;
    --panel-2:  #1b2229;
    --ink:      #e8ecf1;
    --ink-mid:  #b3bec9;
    --ink-soft: #8794a1;
    --line:     #262e37;
    --line-soft:#1f262e;
    --accent:   #7dafd0;
    --accent-in:#0e1216;
    --ok:       #57bd97;
    --shadow:   0 1px 2px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body.lp {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .93em;
  font-variant-ligatures: none;
}

/* Signatur: der Punkt der Root-Zone. Sparsam eingesetzt - zweimal auf der Seite. */
.root { color: var(--accent); }

.band, .hero, .lp-foot > * { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* ---------- Navigation ---------- */

.lp-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem clamp(1rem, 5vw, 3rem);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.lp-brand {
  font-weight: 640; letter-spacing: -.02em; font-size: 1.05rem;
  color: var(--ink); text-decoration: none;
}
.lp-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-size: .93rem; }
.lp-links a { color: var(--ink-soft); text-decoration: none; transition: color .12s ease; }
.lp-links a:hover { color: var(--ink); }
.lp-cta {
  padding: .48rem 1.1rem; border-radius: 6px;
  background: var(--accent); color: var(--accent-in) !important;
  font-weight: 560; letter-spacing: .005em;
}
.lp-cta:hover { filter: brightness(1.12); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1rem, 5vw, 3rem);
}
.hero-text { min-width: 0; }

.eyebrow, .band-eyebrow {
  margin: 0 0 1rem;
  font-size: .74rem; font-weight: 620;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero h1 {
  margin: 0 0 1.15rem;
  font-size: clamp(2.15rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.032em;
  font-weight: 660;
}
.lede {
  margin: 0 0 2.1rem;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 33rem;
}

.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }
.btn-primary, .btn-ghost {
  display: inline-block; padding: .7rem 1.5rem; border-radius: 6px;
  text-decoration: none; font-weight: 560; font-size: .96rem;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-in); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink-mid); background: var(--panel); }
.btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }

/* ---------- Produktausschnitt ---------- */

.preview {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.preview-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.preview-title { font-weight: 560; }
.preview-meta { margin-left: auto; color: var(--ink-soft); font-size: .78rem; }

.state { width: .5rem; height: .5rem; border-radius: 50%; flex: none; display: inline-block; }
.state-ok { background: var(--ok); }

.preview-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.preview-table th {
  text-align: left; padding: .5rem 1rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--line);
  font-family: system-ui, sans-serif;
}
.preview-table td { padding: .46rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-mid); }
.preview-table tr:last-child td { border-bottom: 0; }
.preview-table td:nth-child(2) { color: var(--ink); }
.preview-table td:last-child { color: var(--ink-soft); text-align: right; white-space: nowrap; }
.rt {
  display: inline-block; min-width: 2.4rem; padding: .06rem .4rem;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px;
  font-size: .72rem; text-align: center; color: var(--ink-mid);
}

.preview-foot {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .7rem 1rem;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-mid);
}
.preview-foot > span { display: inline-flex; align-items: center; gap: .4rem; }
.preview-link { flex: 0 0 2.5rem; height: 1px; background: var(--line); }
.preview-note { margin-left: auto; color: var(--ink-soft); font-size: .76rem; }

/* ---------- Baender ---------- */

.band { padding: clamp(3rem, 6.5vw, 5.5rem) clamp(1rem, 5vw, 3rem); }
.band.alt {
  max-width: none;
  background: var(--panel-2);
  border-block: 1px solid var(--line);
}
.band.alt > * { max-width: 1120px; margin-left: auto; margin-right: auto; }

.band h2 {
  margin: 0 0 2.2rem;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  letter-spacing: -.025em; font-weight: 640;
  max-width: 30rem;
}

/* ---------- Karten ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cards article { background: var(--panel); padding: 1.4rem 1.5rem; }
.cards h3 { margin: 0 0 .5rem; font-size: .98rem; font-weight: 620; letter-spacing: -.01em; }
.cards p  { margin: 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.58; }

/* ---------- Ablauf: echte Reihenfolge, daher nummeriert ---------- */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; font-weight: 600; color: var(--accent);
  padding-top: .18rem;
}
.steps h3 { margin: 0; font-size: .98rem; font-weight: 620; letter-spacing: -.01em; }
.steps p  { margin: 0; color: var(--ink-soft); font-size: .91rem; max-width: 46rem; }

/* ---------- Spezifikationen ---------- */

.spec-wrap { overflow-x: auto; }
.spec {
  width: 100%; border-collapse: collapse; font-size: .91rem;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.spec th, .spec td { text-align: left; padding: .78rem 1.2rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { font-weight: 560; color: var(--ink); white-space: nowrap; width: 14rem; }
.spec td { color: var(--ink-soft); }

.closing { margin: 2.4rem 0 0; }

/* ---------- Fuss ---------- */

.lp-foot {
  padding: 1.8rem clamp(1rem, 5vw, 3rem) 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: .85rem;
}
.lp-foot p { margin: 0; }

/* ---------- Zugaenglichkeit ---------- */

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .spec th { width: auto; white-space: normal; }
}