/* Schwan-App - Grundstil.
   Handy zuerst: eine Spalte, grosse Tippflaechen, untere Leiste.
   Dezent und gastlich: warmes Papier, geraeuchertes Holz, ein ruhiges Gruen.
   Am Rechner wird der Inhalt nur breiter zentriert, nicht anders aufgebaut. */

:root {
  --grund:        #f7f4ef;   /* Seitenhintergrund, warmes Papier */
  --flaeche:      #ffffff;   /* Karten, Formulare */
  --flaeche-tief: #efe9e0;   /* leichte Abhebung, Kopfzeile */
  --linie:        #e0d8cc;
  --schrift:      #2b2723;
  --gedaempft:    #6d655b;
  --akzent:       #3f6b52;   /* Pfaelzer Wald */
  --akzent-hell:  #e5efe9;
  --akzent-text:  #ffffff;
  --warnung:      #9a4a2f;
  --warnung-hell: #f7e9e3;
  --erfolg:       #3f6b52;
  --erfolg-hell:  #e5efe9;

  --rand:   14px;   /* Eckenrundung */
  --luft:   16px;   /* Seitenrand auf dem Handy */
  --tippen: 48px;   /* Mindesthoehe fuer alles, was man antippt */

  color-scheme: light dark;
}

/* Dunkel: automatisch nach Systemeinstellung ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:        #17171a;
    --flaeche:      #1f1f23;
    --flaeche-tief: #26262b;
    --linie:        #34343a;
    --schrift:      #ece7df;
    --gedaempft:    #a39b90;
    --akzent:       #7aa98d;
    --akzent-hell:  #22312a;
    --akzent-text:  #12211a;
    --warnung:      #d98b6a;
    --warnung-hell: #33231d;
    --erfolg:       #7aa98d;
    --erfolg-hell:  #22312a;
  }
}
/* ... und von Hand umschaltbar, falls spaeter jemand das will. */
:root[data-thema="dunkel"] {
  --grund:        #17171a;
  --flaeche:      #1f1f23;
  --flaeche-tief: #26262b;
  --linie:        #34343a;
  --schrift:      #ece7df;
  --gedaempft:    #a39b90;
  --akzent:       #7aa98d;
  --akzent-hell:  #22312a;
  --akzent-text:  #12211a;
  --warnung:      #d98b6a;
  --warnung-hell: #33231d;
  --erfolg:       #7aa98d;
  --erfolg-hell:  #22312a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;          /* auf dem Handy gut lesbar, ohne Zoom */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px var(--luft);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--flaeche-tief);
  border-bottom: 1px solid var(--linie);
}
.kopf-marke {
  display: flex; align-items: center; gap: 9px;
  color: var(--schrift); text-decoration: none; min-width: 0;
}
.kopf-schwan { display: flex; color: var(--akzent); }
.kopf-titel {
  font-weight: 600; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.kopf-name { color: var(--gedaempft); font-size: 15px; }
.kopf-abmelden {
  color: var(--gedaempft); text-decoration: none; font-size: 14px;
  border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px;
  background: var(--flaeche);
}
.kopf-abmelden:active { background: var(--akzent-hell); }

/* Zurueck-Knopf. 44 px hoch = Tippflaeche nach Apple-Richtlinie; am Handy
   wird er mit dem Daumen getroffen, nicht mit dem Mauszeiger. */
.kopf-zurueck {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: var(--schrift); text-decoration: none;
  font-size: 15px; font-weight: 600;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche);
}
.kopf-zurueck:active { background: var(--akzent-hell); }
/* Mit Zurueck-Knopf sind es drei Teile im Kopf. "space-between" wuerde das
   Logo dann in die Mitte schieben - die automatische Luft rechts vom Logo
   haelt Zurueck und Logo links zusammen. Ohne Knopf (Startseite) greift die
   Regel nicht, und alles bleibt wie vorher. */
.kopf-zurueck + .kopf-marke { margin-right: auto; }
/* Sehr schmale Handys: der Name weicht, bevor Knoepfe zusammengequetscht werden. */
@media (max-width: 360px) {
  .kopf-zurueck ~ .kopf-rechts .kopf-name { display: none; }
}

/* ---------------------------------------------------------------- Inhalt */

.inhalt {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--luft);
  /* Platz fuer die untere Leiste, damit sie nichts verdeckt. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

h1 { font-size: 22px; margin: 4px 0 14px; font-weight: 600; }
h2 { font-size: 18px; margin: 22px 0 10px; font-weight: 600; }
p  { margin: 0 0 12px; }
a  { color: var(--akzent); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 14px;
  margin-bottom: 12px;
}
.karte-titel { font-weight: 600; margin-bottom: 4px; }
.gedaempft { color: var(--gedaempft); font-size: 15px; }

/* Listen statt Tabellen - auf dem Handy liest sich eine Karte besser. */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* Wenn es doch eine Tabelle sein muss: eigener Querlauf, nie die Seite. */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabellenrahmen table { border-collapse: collapse; width: 100%; min-width: 520px; }
.tabellenrahmen th, .tabellenrahmen td {
  padding: 9px 10px; border-bottom: 1px solid var(--linie); text-align: left;
  white-space: nowrap;
}

/* ------------------------------------------------------------ Formulare */

label { display: block; font-size: 15px; color: var(--gedaempft); margin: 12px 0 5px; }

input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=search], input[type=email], select, textarea {
  width: 100%;
  min-height: var(--tippen);
  padding: 11px 13px;
  font-size: 16px;            /* unter 16px zoomt iOS beim Antippen hinein */
  font-family: inherit;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent);
}

.knopf, button, input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tippen);
  padding: 11px 18px;
  font-size: 16px; font-family: inherit; font-weight: 600;
  color: var(--akzent-text); background: var(--akzent);
  border: 1px solid transparent; border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.knopf-breit { width: 100%; }
.knopf-still, button.still {
  color: var(--schrift); background: var(--flaeche); border-color: var(--linie);
}
.knopf-warnung { background: var(--warnung); color: #fff; }
.knopf:active, button:active { filter: brightness(.94); }
button[disabled], .knopf[disabled] { opacity: .5; cursor: default; }

/* ------------------------------------------------------------- Meldungen */

.meldungen { max-width: 760px; margin: 12px auto 0; padding: 0 var(--luft); }
.meldung {
  margin: 0 0 8px; padding: 11px 13px; border-radius: 10px; font-size: 15px;
  border: 1px solid var(--linie); background: var(--flaeche);
}
.meldung-fehler  { background: var(--warnung-hell); border-color: var(--warnung); }
.meldung-erfolg  { background: var(--erfolg-hell);  border-color: var(--erfolg); }
.meldung-hinweis { background: var(--flaeche-tief); }

/* --------------------------------------------------------- Untere Leiste */

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--flaeche-tief);
  border-top: 1px solid var(--linie);
  /* Acht Punkte passen auf kein Telefon nebeneinander. Statt sie zu
     stapeln (frisst den halben Bildschirm) laeuft die Leiste seitlich -
     mit Fangpunkten, damit man nicht zwischen zwei Punkten stehenbleibt. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.leiste::-webkit-scrollbar { display: none; }
.leiste-punkt {
  flex: 1 0 auto;
  min-width: 74px;
  min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--gedaempft); text-decoration: none;
  scroll-snap-align: center;
}
.leiste-titel { font-size: 13px; font-weight: 600; white-space: nowrap; }
.leiste-punkt.ist-da { background: var(--akzent-hell); color: var(--akzent); }
.leiste-leer { opacity: .38; cursor: default; }

/* ------------------------------------------------------------- Anmeldung */

.anmeldung { max-width: 380px; margin: 8vh auto 0; padding: 0 var(--luft); }
.anmeldung .karte { padding: 20px; }
.anmeldung h1 { text-align: center; margin-bottom: 4px; }
.anmeldung .gedaempft { text-align: center; margin-bottom: 18px; }

/* ----------------------------------------------------------- Startseite */

.kacheln {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.kachel {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 84px; padding: 12px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rand);
  color: var(--schrift); text-decoration: none; font-weight: 600;
}
.kachel:active { background: var(--akzent-hell); }
.kachel-leer { color: var(--gedaempft); opacity: .55; font-weight: 400; }

/* Am Rechner: mehr Luft, Leiste bleibt unten (alle kennen sie vom Handy). */
@media (min-width: 720px) {
  body { font-size: 16px; }
  .kacheln { grid-template-columns: repeat(4, 1fr); }
  .leiste { justify-content: center; overflow-x: visible; }
  .leiste-punkt { flex: 0 0 auto; min-width: 96px; }
}

/* Aufklapper (<details>) - z.B. ein Mensch in der Benutzerverwaltung.
   Die Zusammenfassung ist eine Tippflaeche, kein Textlink. */
.aufklapp {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tippen);
  margin-top: 10px; padding: 0 4px;
  color: var(--akzent); font-size: 15px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.aufklapp::-webkit-details-marker { display: none; }
.aufklapp::before { content: "+"; font-size: 18px; line-height: 1; width: 14px; }
details[open] > .aufklapp::before { content: "\2212"; }