/* ═══════════════════════════════════════════════════════════════
   The Setting Lab — gemeinsames Stylesheet (Stand 29.09.2026)
   Weiß bleibt der Grund; dazu ein warmer Orange-Ton als weicher Verlauf
   (Luis' Referenz „Gradient": #E8D9C9 · #E7B8A7 · #BC8271).
   Genutzt von index.html und pricing.html. Die älteren Unterseiten
   hängen noch an style.css.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#15171A;
  --ink-soft:#4A4F57;
  --ink-mute:#8E929A;
  --hairline:rgba(21,23,26,.08);
  --ground:#FFFFFF;
  --sand:#E8D9C9;
  --blush:#E7B8A7;
  --terra:#BC8271;
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --wordmark:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --header-h:64px;
  --gutter:clamp(18px,2.6vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;color:var(--ink);background:var(--ground);
  font-family:var(--display);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ── Warmer Verlauf: oben aus der Ecke, läuft nach unten in Weiß aus ── */
.warmth{
  position:absolute;inset:0 0 auto 0;height:min(1100px,130vh);z-index:0;pointer-events:none;overflow:hidden;
}
.warmth::before,.warmth::after{content:"";position:absolute;border-radius:50%;filter:blur(40px)}
.warmth::before{
  width:85vw;height:85vw;max-width:1200px;max-height:1200px;left:-24vw;top:-40vw;
  background:radial-gradient(circle,rgba(226,170,140,.34) 0%,rgba(242,200,176,.32) 34%,rgba(244,226,208,.24) 58%,rgba(255,255,255,0) 72%);
}
.warmth::after{
  width:60vw;height:60vw;max-width:900px;max-height:900px;right:-22vw;top:-18vw;
  background:radial-gradient(circle,rgba(244,204,180,.32) 0%,rgba(246,228,210,.24) 45%,rgba(255,255,255,0) 72%);
}
.warmth + *{position:relative;z-index:1}

/* ── Header: Menü links, Name mittig, Get Started rechts ── */
header.site{
  position:relative;z-index:5;height:var(--header-h);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
  padding-inline:var(--gutter);
}
header.site nav{display:flex;gap:28px;justify-self:start;grid-area:1/1}
header.site nav a{font-size:14.5px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--ink)}
header.site .wordmark{grid-area:1/2}
header.site .btn{grid-area:1/3;justify-self:end}
.wordmark{
  justify-self:center;font-family:var(--wordmark);font-variation-settings:"wdth" 118,"wght" 600;
  font-size:15px;letter-spacing:.30em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.wordmark .the{
  font-variation-settings:"wdth" 100,"wght" 400;font-size:10px;letter-spacing:.22em;color:var(--ink-mute);
  display:inline-block;transform:translateY(-3px);margin-right:.5em;
}

/* ── Buttons: eckiger wie bei Trade Republic ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:10px 18px;border-radius:10px;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--ink);color:#fff;border:1px solid var(--ink);transition:background .16s,border-color .16s,color .16s;
}
.btn:hover{background:#000}
.btn-light{background:rgba(255,255,255,.7);color:var(--ink);border-color:rgba(21,23,26,.12)}
.btn-light:hover{background:#fff;border-color:rgba(21,23,26,.25)}

/* ── Footer: zentriert, leer, ohne Trennlinie (Luis 29.09.2026) ── */
footer.site{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:clamp(56px,9vh,88px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background:var(--ground);color:var(--ink-soft);font-size:14px;
}
footer.site .wordmark{justify-self:auto}
footer.site p{margin:-7px 0 0;color:var(--ink-mute)}   /* Luis: Satz 50 % näher an den Namen */
footer.site .social{display:flex;gap:14px;margin-top:6px}
footer.site .social a{display:grid;place-items:center;width:40px;height:40px;color:var(--ink);opacity:.85;transition:opacity .16s}   /* ohne Rahmen */
footer.site .social a svg{width:18px;height:18px}
footer.site .social a:hover{opacity:1}
footer.site .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:10px}
footer.site .legal a{text-decoration:none;color:var(--ink-soft)}
footer.site .legal a:hover{color:var(--ink)}
footer.site .copy{margin-top:18px;font-size:12.5px;color:var(--ink-mute)}

@media(max-width:860px){header.site nav{display:none}}
@media(max-width:560px){
  :root{--header-h:54px}
  header.site{gap:8px;padding-inline:14px}
  .wordmark{font-size:11.5px;letter-spacing:.12em}
  .wordmark .the{font-size:9px;letter-spacing:.14em;margin-right:.4em}
  header.site .btn{font-size:13px;padding:8px 13px}
}
@media(max-width:400px){
  .wordmark{font-size:11px;letter-spacing:.08em}
  header.site .btn{font-size:12.5px;padding:7px 11px}
}

/* ── Leuchtstreifen: ein feiner heller Lauf entlang des Rahmens (Pricing-Karte, How-it-works-Karten) ── */
@property --ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.ring{position:relative}
.ring::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--ring-a),transparent 0deg,transparent 286deg,rgba(255,236,224,.9) 318deg,#F2B9A0 336deg,rgba(255,236,224,.9) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
}
.ring.lit::after{opacity:1;animation:ring-run 10.6s linear infinite}   /* Luis: 0,3× Geschwindigkeit */
@keyframes ring-run{to{--ring-a:360deg}}
@media(prefers-reduced-motion:reduce){.ring.lit::after{animation:none}}