/* =====================================================================
   site.css - Aussehen der Website von DoneNow.

   Aus dem VERTRAG der Centric-Familie hervorgegangen (siehe
   /_rawutility/CLAUDE.md, Abschnitt "Die Website: Muster fuer Kopf und
   Fuss"): er legt fest, wie Kopfzeile, Fusszeile, Sprachwahl, Farbmodus
   und Hilfe-Panel in JEDER App der Familie gebaut sind - an der Kopf-
   und Fusszeile wird NICHT gerueckt (Reihenfolge, 64px Hoehe,
   ein-zeiliger Fuss ohne Satz ueber den Betreiber).

   Nach demselben Vertrag gebaut:
     /_rawutility/css/site.css   /_skramkoob/css/site.css
     /_testr/css/site.css        /_mallorca-spielt-golf/css/site.css

   Eingebunden von index.asp/index_en.asp/index_es.asp (Startseite) und
   von den zwoelf Rechtstexten. NICHT von index.html - das ist die App,
   die hat core.css und app.css. NICHT von den Hilfeseiten - die haben
   hilfe.css, weil sie im iframe laufen und von App UND Website geoeffnet
   werden (hilfe.css bleibt hier byte-identisch zu /_rawutility, siehe
   CLAUDE.md - deshalb bleibt sie beim Apple-Blau).

   DoneNow hat, anders als skramkoob, nur ZWEI Kleider (Hell/Dunkel) -
   kein Retro. Die Markenfarbe ist dasselbe Navy wie --header-bg/--primary
   in css/app.css.

   Aufbau:
     1. Farbwerte
     2. Gemeinsam       Grundgeruest, Kopf, Knoepfe, Fuss, Hilfe-Panel
     3. Nur Startseite  .page-home
     4. Nur Rechtstexte .page-legal
     5. Zugaenglichkeit
   ===================================================================== */

/* =====================================================================
   1. Farbwerte

   Vier Bloecke wie ueberall in der Familie: :root (hell),
   prefers-color-scheme (dunkel), body.theme-dark, body.theme-light.
   Der Knopf in der Kopfzeile wechselt System -> Hell -> Dunkel und merkt
   sich die Wahl unter "user-theme" - demselben Schluessel wie die App.
   .theme-forced am <html> schaltet die Media-Query ab, damit "hell" auch
   auf einem dunkel eingestellten Geraet hell bleibt.
   ===================================================================== */
:root{
  --bg:#f2f2f7; --surface:#ffffff; --surface-2:#f7f7fa; --ink:#000000;
  --ink-soft:#6e6e73; --ink-faint:#8e8e93;
  --accent:#1c3f5f; --accent-soft:#e6edf3; --accent-red:#d92626;
  --border:#d8d8de; --border-soft:rgba(0,0,0,.06); --btn-secondary-bg:#e5e5ea;
  --header-bg:rgba(255,255,255,.78);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
  --card-shadow:rgba(0,0,0,.05);
  --lift-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.14);
  --num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Der Punkt der Wortmarke ("DoneNow."): dasselbe Navy wie in der App
     (--primary in css/app.css). */
  --brand-dot:#1c3f5f;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#000000; --surface:#1c1c1e; --surface-2:#161618; --ink:#ffffff;
    --ink-soft:#a1a1a6; --ink-faint:#98989d;
    --accent:#6f9bc2; --accent-soft:#16283a; --accent-red:#ff5a52;
    --border:#38383a; --border-soft:rgba(255,255,255,.08); --btn-secondary-bg:#2c2c2e;
    --header-bg:rgba(28,28,30,.78);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --card-shadow:rgba(0,0,0,.3);
    --lift-shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -8px rgba(0,0,0,.6);
    /* Aufgehellt - auf schwarzem Grund verschwindet das dunkle Navy sonst. */
    --brand-dot:#6f9bc2;
  }
}
body.theme-dark{
  --bg:#000000; --surface:#1c1c1e; --surface-2:#161618; --ink:#ffffff;
  --ink-soft:#a1a1a6; --ink-faint:#98989d;
  --accent:#6f9bc2; --accent-soft:#16283a; --accent-red:#ff5a52;
  --border:#38383a; --border-soft:rgba(255,255,255,.08); --btn-secondary-bg:#2c2c2e;
  --header-bg:rgba(28,28,30,.78);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --card-shadow:rgba(0,0,0,.3);
  --lift-shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -8px rgba(0,0,0,.6);
  --brand-dot:#6f9bc2;
}
body.theme-light{
  --bg:#f2f2f7; --surface:#ffffff; --surface-2:#f7f7fa; --ink:#000000;
  --ink-soft:#6e6e73; --ink-faint:#8e8e93;
  --accent:#1c3f5f; --accent-soft:#e6edf3; --accent-red:#d92626;
  --border:#d8d8de; --border-soft:rgba(0,0,0,.06); --btn-secondary-bg:#e5e5ea;
  --header-bg:rgba(255,255,255,.78);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
  --card-shadow:rgba(0,0,0,.05);
  --lift-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.14);
  --brand-dot:#1c3f5f;
}


/* =====================================================================
   2. Gemeinsam - Startseite und Rechtstexte
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-top:64px}
a{color:var(--accent)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* ---------------------------------------------------------------------
   EINHEITLICHE MASSE - in ALLEN Apps der Familie dieselben Zahlen.

     Kopfzeile        64px hoch, 12px Abstand zwischen den Teilen
     Inhalt beginnt   64px unter dem Seitenrand (body padding-top)
     Sprungziele      76px (scroll-margin-top)
     Klappmenue       oeffnet bei 64px
     Fuss             1px durchgezogener Strich, 28px oben / 40px unten

   REIHENFOLGE IN DER LEISTE - ebenfalls ueberall gleich:

     Wortmarke - Navigationspunkte - Farbmodus - Sprachwahl - Knopf - Menue

   Die Navigationspunkte stehen ZENTRIERT zwischen der Wortmarke und dem
   rechten Teil: .navlinks traegt margin-inline:auto. Die Wortmarke darf
   deshalb KEIN margin-right:auto haben und es darf kein <span
   class="grow"> im Kopf stehen.

   MATERIAL statt Balken: die Leiste ist eine durchscheinende Schicht, der
   Inhalt laeuft darunter durch. Der Trennstrich erscheint erst, wenn
   wirklich etwas darunter liegt - .navbar.scrolled setzt js/site.js.
   --------------------------------------------------------------------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.navbar.scrolled{border-bottom-color:var(--border-soft)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  font-size:17px;white-space:nowrap}
.brand .dot{color:var(--brand-dot)}
.navlinks{display:flex;align-items:center;gap:2px;margin-inline:auto}
.navlinks a{text-decoration:none;color:var(--ink-soft);font-size:15px;padding:12px;
  border-radius:10px;min-height:48px;display:flex;align-items:center;
  transition:color .18s var(--ease-out),background-color .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .navlinks a:hover{color:var(--ink);background:var(--btn-secondary-bg)}
}

/* Knopf. Sekundaer mit Rahmen, der Handlungsknopf gefuellt. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;border-radius:12px;font:inherit;font-weight:590;
  font-size:15px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--border);
  transition:transform .16s var(--ease-out),border-color .18s var(--ease-out),
             background-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--accent);color:var(--accent)}
}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(1.12);color:#fff;border-color:transparent;
    box-shadow:0 2px 10px -2px rgba(0,0,0,.25)}
}
.btn-lg{min-height:54px;padding:15px 26px;font-size:16.5px;border-radius:14px}

/* Runder Icon-Knopf - traegt den Farbmodus und den Menueknopf. */
.iconbtn{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;
  display:grid;place-content:center;
  transition:border-color .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out)}
.iconbtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .iconbtn:hover{border-color:var(--accent);color:var(--accent)}
}
.burger{display:none}

/* Sprachwahl. NUR auf den Startseiten, dort zweimal im Markup: einmal in
   der Leiste (auf Telefonen ausgeblendet) und einmal in der Klappliste.
   In den Rechtstexten gibt es sie nicht. */
.lang-switch{display:flex;align-items:center;gap:8px;font-family:var(--num);
  font-size:13px;letter-spacing:.06em}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:4px 2px;
  border-bottom:1px solid transparent;transition:color .18s var(--ease-out)}
.lang-switch a:hover{color:var(--accent)}
.lang-switch a.active{color:var(--accent);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--border)}

@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px 18px 16px;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:0 6px 16px var(--card-shadow)}
  .navlinks.open{display:flex}
  .nav > .brand{margin-right:auto}
  .nav > .btn{display:none}
  .navlinks a.cta-menu{display:flex;justify-content:center;width:100%;margin-top:12px}
  .nav > .lang-switch{display:none}
  .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px}
}
@media (min-width:861px){
  .navlinks .lang-switch{display:none}
  .navlinks a.cta-menu{display:none}
}

/* ---------------------------------------------------------------------
   FUSSZEILE - auf jeder Website-Seite identisch aufgebaut:

     links die Wortmarke (Verweis auf die Startseite der eigenen Sprache),
     rechts die vier Rechtstexte, ganz aussen die Hilfe.

   KEIN "Startseite", KEIN "Kontakt", KEINE Sprachwahl im Fuss.
   KEIN SATZ UEBER DEN BETREIBER - kein Firmenname, keine Copyright-Zeile.
   --------------------------------------------------------------------- */
footer{border-top:1px solid var(--border);padding:28px 0 40px;
  color:var(--ink-soft);font-size:14.5px}
footer .fl{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
footer .fl > a{white-space:nowrap}
footer .brand-sm{white-space:nowrap;flex:0 0 auto;font-size:15px}

@media (max-width:640px){
  footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px}
  footer .grow{display:none}
  footer .brand-sm,footer .logo{flex:0 0 100%;justify-content:center}
}

footer a{color:var(--ink-soft);text-decoration:none;transition:color .18s var(--ease-out)}
footer a:hover{color:var(--ink)}

/* ---------------------------------------------------------------------
   HILFE - Panel von rechts, hilfe_<sprache>.html im iframe. Ausgeloest
   ausschliesslich vom Verweis im Fuss (class="help-trigger"), nie aus dem
   Kopf. Steuerung: js/site.js.
   --------------------------------------------------------------------- */
.help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.45);
  display:none;opacity:0;transition:opacity .3s var(--ease-out);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);z-index:1100;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .42s var(--ease-out)}
.help-panel.open{transform:translateX(0)}
@media (max-width:800px){ .help-panel{width:100%;max-width:none;min-width:0} }
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.help-panel-header h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)}
.help-close{width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-content:center;
  transition:border-color .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out)}
.help-close:active{transform:scale(.94)}
.help-close:hover{border-color:var(--accent);color:var(--accent)}


/* =====================================================================
   3. Nur die Startseite (index.asp/index_en.asp/index_es.asp)
   ===================================================================== */
.page-home section{padding:88px 0}
.page-home section[id]{scroll-margin-top:76px}
.page-home section + section{border-top:1px solid var(--border-soft)}

.page-home h1{font-size:clamp(36px,6vw,60px);line-height:1.06;font-weight:700;
  letter-spacing:-.032em;margin:0 0 18px;max-width:17ch}
.page-home h2{font-size:clamp(26px,3.2vw,37px);line-height:1.12;font-weight:700;
  letter-spacing:-.026em;margin:0 0 10px}
.page-home h3{font-size:19px;line-height:1.3;font-weight:640;letter-spacing:-.015em;margin:0 0 8px}
.page-home .section-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);font-weight:640;margin:0 0 10px}
.page-home .lead{color:var(--ink-soft);max-width:60ch;font-size:18.5px;line-height:1.55;
  letter-spacing:-.008em;margin:0 0 36px}

/* ACHTUNG, KURZFORM: .hero traegt im Markup zugleich .wrap. Eine
   padding-Kurzform hier wuerde die seitliche Polsterung von .wrap
   mitloeschen - deshalb nur Longhand. */
.page-home .hero{padding-top:clamp(60px,10vw,112px);padding-bottom:clamp(52px,8vw,88px);
  position:relative;overflow-x:clip}
.page-home .hero p.sub{max-width:54ch;color:var(--ink-soft);font-size:clamp(17px,2vw,20px);
  line-height:1.5;letter-spacing:-.01em;margin:0 0 30px}
.page-home .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-home .hero-note{margin:20px 0 0;font-size:14px;color:var(--ink-faint);letter-spacing:-.005em}

.page-home .hero::before{content:"";position:absolute;z-index:-1;
  top:-140px;left:50%;width:min(760px,120%);height:480px;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 14%,transparent),transparent);
  filter:blur(18px);pointer-events:none}

/* --- Karten --------------------------------------------------------- */
.page-home .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.page-home .card{background:var(--surface);border:1px solid var(--border-soft);
  border-radius:18px;padding:24px;box-shadow:0 1px 2px var(--card-shadow);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .page-home .card:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow)}
}
.page-home .card p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.55}
.page-home .card .ico{width:38px;height:38px;border-radius:11px;display:grid;place-content:center;
  font-size:19px;margin:0 0 16px;background:var(--accent-soft);color:var(--accent)}

/* --- Schritte (So funktioniert es) ----------------------------------- */
.page-home .steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.page-home .step{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;
  padding:22px}
.page-home .step .n{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-content:center;font-size:14px;font-weight:700;margin:0 0 14px}
.page-home .step p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* --- Abschluss (Laden) ------------------------------------------------ */
.page-home .closing{text-align:center}
.page-home .closing h2{margin-inline:auto}
.page-home .closing .lead{margin-inline:auto;margin-bottom:30px}
.page-home .closing .hero-cta{justify-content:center}

/* --- Auftritt beim Scrollen -------------------------------------------
   js/site.js haengt .reveal an die Bloecke und nimmt es wieder ab, sobald
   der Block im Bild ist. Ohne JavaScript bleibt alles sichtbar. */
.page-home .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.page-home .reveal.in{opacity:1;transform:none}


/* =====================================================================
   4. Nur die Rechtstexte (.page-legal)
   ===================================================================== */
.page-legal main{padding:64px 0 72px}
.page-legal .legal{max-width:74ch}
.page-legal .legal h1{font-size:clamp(30px,4.4vw,42px);font-weight:700;line-height:1.1;
  letter-spacing:-.03em;margin:0 0 10px}
.page-legal .legal .stand{color:var(--ink-faint);font-size:14.5px;margin:0 0 38px}
.page-legal .legal h2{font-size:22.5px;font-weight:680;letter-spacing:-.02em;margin:44px 0 12px;
  padding-top:28px;border-top:1px solid var(--border-soft)}
.page-legal .legal h2:first-of-type{border-top:none;padding-top:0}
.page-legal .legal h3{font-size:17.5px;font-weight:640;letter-spacing:-.012em;margin:26px 0 8px}
.page-legal .legal p,.page-legal .legal ul,.page-legal .legal ol{
  color:var(--ink-soft);font-size:16.5px;line-height:1.68;margin:0 0 14px}
.page-legal .legal ul,.page-legal .legal ol{padding-left:22px}
.page-legal .legal li{margin-bottom:7px}
.page-legal .legal strong{color:var(--ink);font-weight:640}
.page-legal .legal code{font-family:var(--num);font-size:.92em;background:var(--accent-soft);
  padding:2px 6px;border-radius:5px}
.page-legal .legal .box{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;
  box-shadow:0 1px 2px var(--card-shadow);padding:22px 26px;margin:0 0 20px}
.page-legal .toc{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;
  box-shadow:0 1px 2px var(--card-shadow);padding:20px 26px;margin:0 0 40px}
.page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.75}
@media (max-width:640px){ .page-legal .toc ol{columns:1} }
.page-legal .toc a{text-decoration:none}
.page-legal .toc a:hover{text-decoration:underline}
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px}


/* =====================================================================
   5. Zugaenglichkeit
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .page-home .reveal{opacity:1;transform:none}
  .help-panel{transition:opacity .2s ease;transform:none}
  .help-panel:not(.open){opacity:0;pointer-events:none;visibility:hidden}
  .page-home .card:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .navbar{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:var(--border)}
  .help-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .page-home .card,.page-legal .legal .box,.page-legal .toc{border-color:var(--border)}
  .navbar{border-bottom-color:var(--border)}
}