/* Meldet dem Browser: diese Seite kann hell und dunkel.
   Dadurch folgen die Standardfarben automatisch der iPhone-Einstellung. */
:root {
  color-scheme: light dark;
}

body {
  /* Schriftart des Geraets statt Times: auf dem iPhone ist das San Francisco */
  font-family: system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
  /* Begrenzt die Textbreite am PC und zentriert den Inhalt */
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: 1.6rem;
}

/* --- Liste der Rezepte --- */

#rezeptListe {
  list-style: none;
  padding: 0;
}

#rezeptListe li {
  border: 1px solid gray;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  /* Mindesthoehe, damit der Eintrag mit dem Finger gut zu treffen ist */
  min-height: 2.75rem;
  cursor: pointer;
}

/* --- Knoepfe --- */

button {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid gray;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#umschaltleiste {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem 0;
}

/* Der gerade gewaehlte Umschaltknopf. Die Klasse setzt spaeter JavaScript. */
button.aktiv {
  font-weight: bold;
  border-width: 2px;
}

/* --- Rezeptansicht: bewusst grosser Text zum Lesen beim Kochen --- */

#detailZutaten,
#detailAnleitung {
  font-size: 1.25rem;
}

#detailZutaten li,
#detailAnleitung li {
  margin-bottom: 0.75rem;
}