/* Startseite proxmolds-control.com: Farbwelt „Ordner, ruhig“ wie im Fahrtenbuch (LogMyTrip E-018), hell und dunkel
   nach Systemeinstellung. Kein JavaScript, keine fremden Quellen. */

@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("archivo-latin-600-normal.woff2") format("woff2"); }

:root {
  --schrift: "Archivo", system-ui, sans-serif;
  --grund: #f3f3f1;
  --karte: #ffffff;
  --tinte: #1b1d20;
  --leise: #5f646a;
  --linie: #e5e4df;
  --linie-stark: #cfcec8;
  --akzent: #2a6889;
  --akzent-zart: #e6f0f5;
  --schatten: 0 1px 2px rgba(27, 29, 32, 0.04), 0 6px 18px rgba(27, 29, 32, 0.05);
  --schatten-hoch: 0 2px 6px rgba(27, 29, 32, 0.08), 0 18px 44px rgba(27, 29, 32, 0.14);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #121314;
    --karte: #1a1b1d;
    --tinte: #ecebe7;
    --leise: #a4a8ac;
    --linie: #2a2c2f;
    --linie-stark: #3c3f43;
    --akzent: #8cc1da;
    --akzent-zart: #1d2c34;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --schatten-hoch: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html { font-family: var(--schrift); background: var(--grund); color: var(--tinte); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }

main { width: 100%; max-width: 720px; }
.kopf { margin-bottom: 28px; }
.marke { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--leise); }
h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; }

.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kachel {
  display: grid; gap: 6px; height: 100%; padding: 22px 22px 20px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); box-shadow: var(--schatten);
  color: inherit; text-decoration: none; transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-hoch); transform: translateY(-1px); }
.kachel:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--akzent), 0 0 0 4px var(--akzent-zart); }
.kachel h2 { margin: 0; font-size: 19px; font-weight: 600; }
.kachel p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--leise); }
.kachel .weiter { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--akzent); }

.fuss { margin-top: 28px; font-size: 13px; color: var(--leise); }

@media (prefers-reduced-motion: reduce) { .kachel { transition: none; } .kachel:hover { transform: none; } }