/* Hellwach — Farben und Schrift wie in der App.
   Jede Farbe hat genau eine Bedeutung:
   Honiggelb = Handlung, Blutorange = Achtung, Grau = Struktur. */

:root {
  --grund:      #D4D7D5;   /* RAL 7035 Lichtgrau  */
  --flaeche:    #EDEEEC;
  --schrift:    #1C1E1F;   /* RAL 9011 Graphit    */
  --neben:      #4A4E4C;
  --leise:      #6E7170;   /* RAL 7036 Platingrau */
  --linie:      #BCBFBD;
  --akzent:     #B5730A;   /* RAL 1005 Honiggelb  */
  --achtung:    #C23B22;   /* RAL 2002 Blutorange */
  --rahmen:     #9DA29F;   /* Untergrund der Bildschirmfotos */
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:   #14120E;
    --flaeche: #1E1B15;
    --schrift: #F7EFE0;
    --neben:   #C9C0AE;
    --leise:   #B0A794;
    --linie:   #332E24;
    --akzent:  #EF9F27;
    --achtung: #E07A5F;
    --rahmen:  #2A2620;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.blatt {
  max-width: 840px;
  margin: 0 auto;
  padding: 56px 28px 64px;
}

/* Kopf */

.marke {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
  text-decoration: none;
  color: inherit;
}

.marke img { width: 56px; height: 56px; border-radius: 23%; }
.marke span { font-size: 26px; font-weight: 300; letter-spacing: 0.5px; }

h1 {
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 56px 0 18px;
}

/* Der Strich in Honiggelb trennt Überschrift und Text —
   dieselbe Rolle wie in der App. */
.strich {
  width: 64px;
  height: 3px;
  background: var(--akzent);
  margin: 22px 0;
}

/* Der Textkörper bleibt bewusst schmal, auch wenn die Seite breiter
   ist: Zeilen über etwa 75 Zeichen ermüden beim Lesen. Die Breite
   gewinnen wir für die Bildschirmfotos, nicht für den Text. */
.vorspann {
  font-size: 17px;
  color: var(--neben);
  max-width: 34em;
  margin: 0 0 36px;
}

/* Der eine Knopf. Es gibt bewusst keinen zweiten. */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
}

.knopfzeile { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.knopfzeile .dazu { color: var(--leise); font-size: 14px; }

/* Bildschirmfotos */

/* Ein Raster, kein Streifen zum Schieben.
   Die Spalten teilen sich die verfügbare Breite selbst auf: drei
   nebeneinander, wenn Platz ist, sonst zwei oder eine untereinander.
   Vorher war die Breite fest vorgegeben und passte auf vier Punkte
   genau nicht — dann erscheint eine Bildlaufleiste, die niemand will. */
.bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 22px;
}

/* Die App hat dasselbe Lichtgrau wie diese Seite — ohne eigenen
   Untergrund verschwimmen die Ränder der Bildschirmfotos.
   Deshalb ein dunklerer Rahmen ringsum, wie ein Gerät auf dem Tisch. */
.bilder figure { margin: 0; }

.bilder .geraet {
  background: var(--rahmen);
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.bilder img {
  width: 100%;
  border-radius: 21px;
  display: block;
}

.bilder figcaption {
  font-size: 13px;
  color: var(--leise);
  margin-top: 10px;
}

/* Merkmale */

.merkmale { display: grid; gap: 26px; max-width: 38em; }
.merkmale h3 { font-size: 16px; margin: 0 0 4px; font-weight: 600; }
.merkmale p  { margin: 0; color: var(--neben); font-size: 15px; }

/* Kasten für Voraussetzungen */

.kasten {
  max-width: 38em;
  background: var(--flaeche);
  border-radius: 10px;
  padding: 20px 22px;
  font-size: 15px;
}

.kasten ul { margin: 0; padding-left: 1.2em; }
.kasten li { margin: 4px 0; }

/* Hinweis ohne Gewähr — Blutorange heißt Achtung, hier wie in der App. */

.hinweis {
  max-width: 38em;
  border-left: 3px solid var(--achtung);
  padding: 2px 0 2px 14px;
  color: var(--neben);
  font-size: 14px;
  margin: 40px 0;
}

/* Fuß */

footer {
  border-top: 1px solid var(--linie);
  margin-top: 56px;
  padding-top: 20px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--leise);
}

footer a { color: var(--leise); text-decoration: none; }
footer a:hover { color: var(--schrift); }
footer .rechts { margin-left: auto; }

/* Fließtext auf den Unterseiten */

.text h2 { text-transform: none; letter-spacing: 0; font-size: 19px; color: var(--schrift); }
.text p  { color: var(--neben); max-width: 38em; }
.text a  { color: var(--akzent); }