/* Bewerberportal — ein Stil, zwei Layouts.
 *
 * Zuerst das Handy (eine Spalte, Navigation unten am Daumen), ab 700 px
 * der Browser (mehr Luft, Navigation oben, zwei Spalten bei den Slots).
 * Das ist die Antwort auf „zwei HTML-Versionen pflegen" aus dem Auftrag:
 * ein Satz Seiten, zwei Layouts — siehe Kommentar in rahmen.html.
 *
 * Keine fremden Schriften, keine fremden Skripte: die Content-Security-
 * Policy des Portals laesst nur eigene Quellen zu.
 */

:root {
  --papier: #fbfaf8;
  --karte: #ffffff;
  --linie: #e3e0da;
  --text: #24211d;
  --leise: #6c675f;
  --akzent: #2f5d50;
  --akzent-hell: #e7f0ec;
  --wartet: #c8811b;
  --laeuft: #3a6ea5;
  --fertig: #4a7a52;
  --ruht: #8a857c;
  --fehler: #a33a2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 5rem;                 /* Platz fuer die Leiste unten */
  background: var(--papier);
  color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Kopf ──────────────────────────────────────────────────────────── */

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.1rem;
  background: var(--karte); border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 600; color: var(--text); text-decoration: none; }
.abmelden { display: flex; align-items: center; gap: .6rem; margin: 0; }
.wer { color: var(--leise); font-size: .9rem; }

.inhalt { max-width: 46rem; margin: 0 auto; padding: 1.1rem; }

h1 { font-size: 1.45rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }

.klein, .hinweis-klein { font-size: .87rem; color: var(--leise); }
.leer { color: var(--leise); }

/* ── Meldungen ─────────────────────────────────────────────────────── */

.meldung {
  padding: .7rem .9rem; border-radius: .5rem; margin: 0 0 1rem;
  border-left: 4px solid var(--linie); background: var(--karte);
}
.meldung.erfolg  { border-left-color: var(--fertig); background: #eef5ef; }
.meldung.fehler  { border-left-color: var(--fehler); background: #fbeeec; }
.meldung.warnung { border-left-color: var(--wartet); background: #fdf4e6; }
.meldung.hinweis { border-left-color: var(--laeuft); background: #eef2f8; }

/* ── Slots ─────────────────────────────────────────────────────────── */

.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }

.slot {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: .7rem; padding: .95rem 1.05rem;
}
.slot .kopfzeile { display: flex; flex-direction: column; gap: .15rem; }
.slot .titel { font-weight: 600; }
.slot .firma { color: var(--leise); font-size: .9rem; }

.slot .zustand {
  margin: .6rem 0 .8rem; display: flex; align-items: baseline; gap: .5rem;
}
.slot .zustand::before {
  content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--ruht);
}
.slot.wartet .zustand::before { background: var(--wartet); }
.slot.laeuft .zustand::before { background: var(--laeuft); }
.slot.fertig .zustand::before { background: var(--fertig); }

.slot.gesperrt { background: #f6f5f2; }

.fuss { margin-top: 1.6rem; color: var(--leise); }

/* ── Knoepfe und Formulare ─────────────────────────────────────────── */

.knopf {
  display: inline-block; padding: .6rem 1.05rem; border-radius: .5rem;
  background: var(--akzent); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; text-decoration: none;
  min-height: 2.75rem;                /* gut mit dem Daumen zu treffen */
}
.knopf:hover { filter: brightness(1.08); }
.knopf.gross { width: 100%; text-align: center; }
.knopf.schlicht {
  background: transparent; color: var(--leise);
  border: 1px solid var(--linie); padding: .4rem .8rem; min-height: 0;
}

label { display: block; margin: .9rem 0 .25rem; font-size: .92rem; }
input[type=text], input[type=password], input[type=email], input[type=tel],
input:not([type]), textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--linie); border-radius: .45rem;
  background: #fff; color: var(--text);
}
textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
           font-size: .93rem; resize: vertical; }
textarea[readonly] { background: #f4f3f0; color: var(--leise); }
input:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

.datei { margin: .9rem 0; }
.datei span { display: block; font-size: .92rem; margin-bottom: .25rem; }

form .knopf { margin-top: .9rem; }

.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: .7rem; padding: 1.05rem; margin: 0 0 1.1rem;
}

.anmeldung { max-width: 22rem; margin: 3rem auto; }

/* ── Listen ────────────────────────────────────────────────────────── */

.dateien { list-style: none; padding: 0; margin: .4rem 0; }
.dateien li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.dateien li:last-child { border-bottom: 0; }

.post { list-style: none; padding: 0; margin: 0; }
.post li { border-bottom: 1px solid var(--linie); }
.post a {
  display: grid; gap: .1rem; padding: .75rem .2rem;
  text-decoration: none; color: var(--text);
}
.post .richtung { font-size: .78rem; color: var(--leise); }
.post .betreff { font-weight: 600; }
.post li.aus { background: #fafaf8; }

.brieftext {
  white-space: pre-wrap; word-wrap: break-word; font-size: .93rem;
  background: #faf9f7; padding: .8rem; border-radius: .45rem;
  border: 1px solid var(--linie);
}

.profilbild {
  width: 8rem; height: 8rem; object-fit: cover; border-radius: 50%;
  border: 1px solid var(--linie); display: block; margin: .6rem 0;
}

/* ── Preise ────────────────────────────────────────────────────────── */

.preise { display: grid; gap: .8rem; margin: 1rem 0 1.4rem; }
.preis {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: .7rem; padding: 1rem; margin: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .2rem .6rem;
}
.preis .menge { font-size: 1.6rem; font-weight: 600; color: var(--akzent); }
.preis .was { color: var(--leise); }
.preis .euro { font-size: 1.2rem; font-weight: 600; }
.preis .knopf { grid-column: 1 / -1; margin-top: .7rem; text-align: center; }

.schritte { margin: .4rem 0 0; padding-left: 1.2rem; }
.schritte li { margin: .35rem 0; }

/* Offene Zahlung: der Knopf ist das Wichtigste auf der Seite, die Kennung
   direkt darunter — ohne sie kann der Bediener die Zahlung niemandem
   zuordnen, und PayPal.Me kann den Verwendungszweck nicht vorbelegen. */
.karte.offen { border-color: var(--wartet); }
.zahlung { padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.zahlung:last-child { border-bottom: 0; padding-bottom: 0; }
.zahlung p { margin: .2rem 0; }
.zahlung .knopf { margin: .5rem 0 .4rem; }
.kennung { font-size: .9rem; color: var(--leise); }
.kennung strong { font-family: ui-monospace, Menlo, monospace;
                  font-size: 1.05rem; color: var(--text);
                  letter-spacing: .04em; }

/* ── Navigation ────────────────────────────────────────────────────── */

.wege {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; background: var(--karte);
  border-top: 1px solid var(--linie);
}
.wege a {
  flex: 1; text-align: center; padding: .75rem .2rem .9rem;
  font-size: .8rem; color: var(--leise); text-decoration: none;
}
.wege a.hier { color: var(--akzent); font-weight: 600;
               box-shadow: inset 0 2px 0 var(--akzent); }

/* ── Ab hier der Browser ───────────────────────────────────────────── */

@media (min-width: 700px) {
  /* Am Schreibtisch klebt nichts am unteren Rand: die Leiste wandert nach
     oben, direkt unter den Kopf. Dafuer wird der Koerper zur Spalte und die
     drei Bloecke bekommen eine ausdrueckliche Reihenfolge — im Quelltext
     steht die Navigation hinter dem Inhalt, weil sie auf dem Handy unten
     hingehoert und Vorleseprogramme der Quelltextfolge folgen. */
  body { padding-bottom: 1rem; display: flex; flex-direction: column; }
  .kopf   { order: 0; }
  .wege   { order: 1; }
  .inhalt { order: 2; width: 100%; }

  .wege {
    position: static; max-width: 46rem; margin: 1rem auto 0;
    border: 1px solid var(--linie); border-radius: .7rem;
  }
  .wege a { padding: .7rem .4rem; font-size: .95rem; }
  .wege a.hier { background: var(--akzent-hell); border-radius: .6rem;
                 box-shadow: none; }

  .slots { grid-template-columns: 1fr 1fr; align-items: start; }
  .preise { grid-template-columns: repeat(3, 1fr); }
  .inhalt { padding: 1.4rem; }
  h1 { font-size: 1.7rem; }
}