/* =====================================================================
   Startseite des Hilfebereichs (hilfe.placeofmotion.com).

   Bewusst eigenes Stylesheet und nicht einschulung.css mitgeladen: Die
   Einschulungsseite bringt Nachbauten von App-Dialogen mit, also rund
   dreissig Klassen, die hier keine Rolle spielen. Wer spaeter eine
   dritte Seite anlegt, soll sich an dieser hier orientieren koennen,
   ohne die Dialog-Klassen mitzuschleppen.
   ===================================================================== */

body{
  font-family:var(--body); color:var(--ink);
  background:radial-gradient(120% 60% at 50% 0%, #F4F6FA 0%, #E9EDF4 55%, #E2E7EF 100%);
  min-height:100dvh; margin:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.st{ width:100%; max-width:620px; margin:0 auto; background:#fff; min-height:100dvh }
@media (min-width:680px){
  body{ padding:40px 16px }
  .st{ min-height:auto; border-radius:26px; overflow:hidden;
    box-shadow:0 44px 90px -44px rgba(15,23,42,.5), 0 0 0 1px rgba(15,23,42,.05) }
}

.st__head{ background:var(--olive); color:#fff; padding:calc(26px + env(safe-area-inset-top)) 24px 26px }
.st__mark{ display:inline-flex; background:#fff; border-radius:13px; padding:10px 14px; margin-bottom:18px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.45) }
.st__mark img{ height:44px; width:auto; display:block }
.st__h1{ font-family:var(--display); font-weight:800; font-size:29px; line-height:1.12; letter-spacing:-.02em; margin:0 0 10px }
.st__sub{ font-size:15px; line-height:1.55; margin:0; opacity:.94; max-width:46ch }

.st__body{ padding:24px }

.kachel{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--s200); border-radius:18px; padding:18px; box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease }
.kachel:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(15,23,42,.3) }
.kachel__txt{ flex:1; min-width:0 }
.kachel__txt b{ display:block; font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:4px }
.kachel__txt span{ display:block; color:var(--s500); font-size:13.5px; line-height:1.55 }
.kachel__go{ flex:0 0 auto; color:var(--olive); font-family:var(--display); font-weight:700; font-size:14px }

.st__hilfe{ color:var(--s500); font-size:13.5px; line-height:1.6; margin:22px 2px 0 }

.st__footer{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:22px 0 calc(4px + env(safe-area-inset-bottom));
  border-top:1px solid var(--s200); margin-top:26px; font-size:12px; color:var(--s400) }
.st__footer a{ color:var(--s500) }

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