/* overalt.de – Landeseite des CRM.
   Dieselben Werte wie das Buch (app/statisch/crm.css im Leadbuch-Repo):
   Apple-Systemfarben, Systemschrift, eine Toenung Rolex-Gruen nur fuer
   Interaktion. Hell und Dunkel folgen allein der Systemeinstellung. */
:root{
  color-scheme:light dark;
  --ground:#f2f2f7; --surface:#ffffff;
  --line:rgba(60,60,67,.29); --line-soft:rgba(60,60,67,.14);
  --ink:#000000; --ink-2:rgba(60,60,67,.6);
  --accent:#0b6b44; --on-accent:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#000000; --surface:#1c1c1e;
    --line:rgba(84,84,88,.65); --line-soft:rgba(84,84,88,.4);
    --ink:#ffffff; --ink-2:rgba(235,235,245,.6);
    --accent:#3fc48c; --on-accent:#00160c;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:22px;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* ---------- Startseite --------------------------------------------------- */
.buehne{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 16px 32px; text-align:center}
/* Das App-Symbol wie auf dem Home-Bildschirm: Radius 22,37 % wie iOS,
   eine Haarlinie statt Schatten, damit es auf Schwarz nicht verschwindet. */
.symbol{
  width:96px; height:96px; border-radius:22.37%;
  box-shadow:0 0 0 .5px var(--line)}
/* Large Title 34/41 Bold */
.buehne h1{margin:20px 0 0; font-size:34px; line-height:41px; font-weight:700; letter-spacing:.01em}
/* Body 17/22, Zweittext */
.unter{margin:6px 0 0; color:var(--ink-2); max-width:300px}
.handlungen{
  width:100%; max-width:320px; margin-top:32px;
  display:flex; flex-direction:column; align-items:stretch; gap:14px}
/* Hauptknopf wie im Buch: 50pt hoch, 12pt Radius, eine getoente Flaeche */
.haupt{
  height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent);
  font-size:17px; font-weight:600; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s ease-out, filter .12s ease-out}
.haupt:hover{filter:brightness(1.05)}
.haupt:active{transform:scale(.97); filter:brightness(.94)}
/* Drittknopf: nur Text in der Toenung */
.leise{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:17px; text-decoration:none}
.leise:hover{text-decoration:underline}
.leise svg{width:8px; height:13px; flex:none}

/* ---------- Fusszeile (Footnote 13/18) ---------------------------------- */
.fuss{
  padding:16px 16px 24px; text-align:center;
  font-size:13px; line-height:18px; color:var(--ink-2)}
.fuss a{color:var(--ink-2); text-decoration:none}
.fuss a:hover{color:var(--ink); text-decoration:underline}
.fuss .punkt{margin:0 6px}
.fuss p{margin:4px 0 0}

/* ---------- Rechtstexte -------------------------------------------------- */
.leiste{padding:12px 16px 0; max-width:712px; width:100%; margin:0 auto}
.zurueck{
  min-height:44px; display:inline-flex; align-items:center; gap:6px;
  font-size:17px; text-decoration:none}
.zurueck svg{width:10px; height:17px}
.text{flex:1; width:100%; max-width:712px; margin:0 auto; padding:8px 16px 48px}
.text h1{margin:4px 0 24px; font-size:34px; line-height:41px; font-weight:700}
/* Headline 17/22 Semibold */
.text h2{margin:28px 0 6px; font-size:17px; line-height:22px; font-weight:600}
.text p{margin:0 0 10px}
.text .klein{margin-top:32px; font-size:13px; line-height:18px; color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .haupt{transition:none}
}