/* 2Minds - Startseite
 *
 * Nur diese Seite. Die Anwendung selbst bekommt spaeter ihre eigene Datei;
 * eine gemeinsame Datei fuer beides waere der Anfang davon, dass eine
 * Aenderung an der Verkaufsseite die App verschiebt.
 */

.bahn {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--luft-block);
}

/* Der Sprung an den Inhalt. Sichtbar erst beim Tabben - aber dann richtig,
   nicht als 1-Pixel-Andeutung. */
.ueberspringen {
  position: absolute;
  left: var(--luft-block);
  top: -100px;
  z-index: 100;
  padding: var(--luft-liste) var(--luft-block);
  background: var(--akzent);
  color: var(--akzent-tinte);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dauer) var(--kurve);
}
.ueberspringen:focus { top: var(--luft-eng); }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-liste);
  min-height: 64px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-eng);
}
.marke-zeichen {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--akzent);
}
.marke-zeichen svg { width: 100%; height: 100%; }
.marke-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* -------------------------------------------------------------- Notfall */

/* Die Leiste traegt Farbe, aber gedaempft. Ein knallroter Kasten ganz oben
   waere auf einer Seite fuer Menschen mit Angst- und Anspannungserleben genau
   das Falsche - er alarmiert, statt zu beruhigen. Die Aussage traegt der Text,
   die Farbe hilft nur beim Finden. */
.notfall {
  background: var(--akzent-sanft);
  border-bottom: 1px solid var(--rand);
  padding-block: var(--luft-block);
}
.notfall-titel {
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--luft-haar);
}
.notfall-text {
  color: var(--text-zweit);
  font-size: var(--fs-sm);
  margin-bottom: var(--luft-liste);
}
.notfall-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-eng);
}
.notfall-liste a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--luft-eng);
  min-height: var(--ziel-min);
  padding: 0 var(--luft-block);
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  color: var(--text);
  text-decoration: none;
  align-items: center;
}
.notfall-liste b { font-size: var(--fs-lg); color: var(--akzent); }
.notfall-liste span { font-size: var(--fs-sm); color: var(--text-zweit); }
.notfall-liste a:hover { background: var(--flaeche-tief); }

/* ------------------------------------------------------------- Kopfteil */

.kopfteil { padding-block: var(--luft-kapitel) var(--luft-abschnitt); }
.kopfteil h1 {
  font-size: var(--fs-titel);
  max-width: 16ch;
  margin-bottom: var(--luft-block);
}
.kopfteil-satz {
  font-size: var(--fs-lg);
  color: var(--text-zweit);
  max-width: 46ch;
  margin-bottom: var(--luft-block);
}
/* Die Abgrenzung steht NICHT im Kleingedruckten. Sie ist der wichtigste Satz
   der Seite - siehe den Kommentar im Kopf von index.html. */
.kopfteil-abgrenzung {
  padding: var(--luft-liste) var(--luft-block);
  border-left: 4px solid var(--rand-stark);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-zweit);
  max-width: 52ch;
}

/* --------------------------------------------------------------- Raster */

section h2 { margin-bottom: var(--luft-block); }
main section + section { margin-top: var(--luft-kapitel); }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--luft-block);
}
.karte-zeichen {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--luft-liste);
  border-radius: var(--radius-klein);
  background: var(--akzent-sanft);
  color: var(--akzent);
}
.karte-zeichen svg { width: 24px; height: 24px; }
.karte h3 { margin-bottom: var(--luft-eng); }

/* -------------------------------------------------------------- Haltung */

.haltung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--luft-abschnitt) var(--luft-block);
}
.haltung h3 { margin-bottom: var(--luft-eng); }

/* ---------------------------------------------------------------- Stand */

.stand { padding-bottom: var(--luft-kapitel); }
.stand-karte h2 { margin-bottom: var(--luft-liste); }
.stand-karte p + p { margin-top: var(--luft-liste); }

/* ----------------------------------------------------------------- Fuss */

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--flaeche);
  padding-block: var(--luft-block);
}
.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-eng) var(--luft-block);
  justify-content: space-between;
}

/* ----------------------------------------------------------------- Handy */

@media screen and (max-width: 560px) {
  .kopfteil { padding-block: var(--luft-abschnitt); }
  .kopfteil h1 { max-width: none; }
  /* Die Notfallknoepfe nebeneinander werden bei 320px zu schmal fuer die
     Nummer plus das Wort. Untereinander bleibt beides lesbar, und jede Zeile
     behaelt ihre 48 Pixel. */
  .notfall-liste { flex-direction: column; }
  .notfall-liste a { justify-content: flex-start; }
}