/* Stil der Hilfe-Sektion (/hilfe). Baut auf legal.css auf, das zuerst geladen
   wird: Farben, Schrift, Kopf und Fuss kommen von dort. Hier stehen nur die
   Bausteine, die es auf den Rechtsseiten nicht gibt.

   Kein Tracking, keine externen Schriften, kein JavaScript. Die Seite muss auf
   einem iPhone lesbar sein, waehrend daneben die Kurzbefehle-App offen ist. */

:root {
  --akzent: #E8B33A;
  --leise:  #7A828D;
}

/* Breiter als die Rechtsseiten, weil hier Tabellen und Bilder stehen. */
.wrap { max-width: 760px; }

/* --- Kopf mit Pfad ------------------------------------------------------ */

.pfad {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
}
.pfad a { color: var(--muted); }
.pfad a:hover { color: var(--text); }

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: #C4CAD2;
  margin: 0 0 32px;
}

/* --- Inhaltsverzeichnis ------------------------------------------------- */

nav.toc {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 40px;
}
nav.toc p {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}
nav.toc ol { margin: 0; padding-left: 20px; }
nav.toc li { margin-bottom: 4px; }

/* --- Kacheln auf der Einstiegsseite ------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
  margin: 0 0 40px;
}

a.kachel {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 0.2s;
}
a.kachel:hover { border-color: var(--leise); text-decoration: none; }
a.kachel b {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
a.kachel span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Schritte ----------------------------------------------------------- */

ol.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0 0 24px;
  padding: 0;
}
ol.schritte > li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 22px 44px;
  margin: 0;
  border-left: 1px solid var(--line);
  margin-left: 15px;
}
ol.schritte > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: -16px;
  top: -2px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
}
ol.schritte > li > b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
ol.schritte p { margin: 0 0 8px; }
ol.schritte p:last-child { margin-bottom: 0; }

/* --- Hinweiskaesten ----------------------------------------------------- */

.wichtig {
  background: rgba(232, 179, 58, 0.07);
  border: 1px solid rgba(232, 179, 58, 0.45);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 20px;
}
.wichtig p:last-child { margin-bottom: 0; }
.wichtig b { color: var(--akzent); }

/* --- Tabellen ----------------------------------------------------------- */

.tabelle { overflow-x: auto; margin: 0 0 20px; }
table {
  border-collapse: collapse;
  width: 100%;
  /* Kein grosszuegiges min-width: die Feldzuordnung ist die wichtigste Tabelle
     der ganzen Sektion und steht eingerueckt in einem Schritt. Mit 320 px war
     sie auf einem 390-px-iPhone seitlich wegzuschieben, obwohl in beiden
     Spalten nur ein Wort steht. Breitere Tabellen scrollen weiterhin in ihrem
     eigenen Kasten, siehe .tabelle. */
  min-width: 260px;
  font-size: 15px;
}
th, td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #C4CAD2;
}
/* Kein text-transform: uppercase. In der Feldzuordnung steht "Feld in zahly",
   und die Marke wird klein geschrieben. */
th {
  color: var(--leise);
  font-size: 13px;
  font-weight: 600;
}
td:last-child, th:last-child { padding-right: 0; }

/* --- Bilder ------------------------------------------------------------- */

figure.bild {
  margin: 0 0 24px;
  max-width: 260px;
}
figure.bild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
figure.bild figcaption {
  color: var(--leise);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Platzhalter fuer Aufnahmen, die noch fehlen. Beschreibt in Worten, was dort
   zu sehen sein wird, statt ein fremdes Bild einzusetzen. */
.bildplatz {
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 20px;
  color: var(--leise);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Fussnote pro Seite ------------------------------------------------- */

.frage {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 20px;
  color: var(--muted);
  font-size: 15px;
}

.weiter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.weiter li { margin: 0; font-size: 15px; }

.marken {
  color: var(--leise);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 32px;
}

@media (max-width: 520px) {
  .lead { font-size: 17px; }
  ol.schritte > li { padding-left: 34px; }
  .kacheln { grid-template-columns: 1fr; }
  figure.bild { max-width: 100%; }
}