/* Was es nur im Portal gibt. Alles Gemeinsame steht in marke.css, die in
   jeder Medicent-Anwendung Zeichen fuer Zeichen dieselbe ist.

   Diese Seite ist fuers Telefon gedacht und nicht fuer den Schreibtisch:
   eine Spalte, grosse Beruehrungsflaechen, keine Tabelle. Am grossen
   Schirm wird die Spalte breiter und bekommt zwei Tage nebeneinander -
   mehr braucht es nicht.

   Namen: KEIN '.pille' - auf der Homepage ist das eine Farbe. Das
   Kennzeichen heisst hier '.kennung'. */

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 40px;        /* 16 px Rand, auch am schmalen Telefon */
}

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

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 5;
}

.kopf .marke { text-decoration: none; color: var(--text); line-height: 1.15; }
.kopf .marke strong {
  display: block;
  font-size: 14px;
  letter-spacing: .09em;
  color: var(--akzent-dunkel);
}
.kopf .marke small { font-size: 12px; color: var(--grau2); }

.kopf form { display: flex; align-items: center; gap: 9px; margin: 0; }
.kopf .wer { font-size: 13px; color: var(--grau2); }

.fuss {
  padding: 18px 16px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--grau2);
}

/* -------------------------------------------------------------- Standzeile
   Steht absichtlich oben und nicht im Kleingedruckten: Ein stiller alter
   Kalender ist der einzige Schaden, den dieser Spiegel anrichten kann. */

.standzeile {
  margin: 0;
  padding: 7px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--grau2);
  background: var(--linie2);
  border-bottom: 1px solid var(--linie);
}
.standzeile.warnung {
  color: var(--warn);
  background: var(--warn-hell);
  border-bottom-color: var(--warn-rand);
  font-weight: 600;
}

/* ------------------------------------------------------------ Wochenwahl */

.wochenwahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.wochenwahl .zeitraum {
  font-weight: 650;
  text-align: center;
  flex: 1;
}
.knopf.aus { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------- Die Tage */

.tag {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.tag.heute { border-color: var(--akzent-rand); background: var(--akzent-hell); }

.tag h2 {
  margin: 0 0 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag .frei { margin: 0; font-size: 13px; color: var(--grau2); }

.posten {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--linie2);
}
.posten:first-of-type { border-top: 0; }

.posten .zeit {
  min-width: 92px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.posten .sache { flex: 1; }
.posten .belegt { color: var(--grau); font-weight: 600; }

/* Der eigene OP-Tag soll man beim Hinsehen finden, ohne zu lesen. */
.posten.eigen .zeit { color: var(--akzent-dunkel); }

.raum {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 8px;
  font-size: 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--grau);
  background: var(--flaeche);
}

.kennung {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  border-radius: 999px;
  color: var(--akzent-dunkel);
  background: var(--akzent-hell);
  border: 1px solid var(--akzent-rand);
}

/* --------------------------------------------------------------- Personal */

.personal { margin-top: 6px; }
.personal summary {
  font-size: 13px;
  color: var(--akzent-dunkel);
  cursor: pointer;
  width: fit-content;
}
.personal ul { margin: 7px 0 2px; padding-left: 0; list-style: none; }
.personal li { font-size: 13.5px; padding: 2px 0; }
.personal .art {
  display: inline-block;
  min-width: 120px;
  color: var(--grau2);
  font-size: 12.5px;
}

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

.karte.schmal { max-width: 440px; margin: 28px auto; }
.anmeldung { display: grid; gap: 10px; margin-top: 14px; }
.anmeldung input { width: 100%; }
/* Das Mailfeld steckt in einem .feld, damit die Meldung bei leerem Feld
   darunter Platz hat. Den Abstand macht hier das Raster, nicht das .feld. */
.anmeldung .feld { margin: 0; }

.grau { color: var(--grau2); font-weight: 400; }

/* ------------------------------------------------------- Grosser Schirm */

@media (min-width: 700px) {
  main { padding-top: 22px; }
  .posten .zeit { min-width: 110px; }
  .personal .art { min-width: 150px; }
}

/* ------------------------------------------------- Das Stundenraster
   Dasselbe Bild wie der OP-Kalender im Haus: sieben Tage nebeneinander,
   24 Stunden untereinander, die Balken absolut gesetzt. Uebernommen aus
   der OPZ-Anwendung und auf die Namen der marke.css umgeschrieben.

   Am Telefon wird die Stunde flacher und die Spalten schmaler - sieben
   Tage auf 375 px sind eng, aber ein Kalender, der nur drei Tage zeigt,
   beantwortet die Frage "wann ist etwas frei?" nicht mehr. */

.kalenderraum {
  --std: 44px;
  max-height: min(70vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--grund);
  margin-bottom: 14px;
}
.kalenderkopfzeile, .kalendergitter {
  display: grid;
  grid-template-columns: 46px repeat(7, minmax(62px, 1fr));
  min-width: 520px;
}
.kalenderkopfzeile {
  position: sticky; top: 0; z-index: 2;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.kalendertag {
  padding: 6px 7px; border-left: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 1px;
}
.kalendertag strong { font-size: 13px; }
.kalendertag.heute { background: var(--akzent-hell); }
.kalendertag .ohnezeit {
  font-size: 10.5px; color: var(--grau2);
  border-top: 1px dotted var(--linie); margin-top: 2px; padding-top: 2px;
}

.kalenderraum .zeitspalte { position: relative; }
.kalendergitter .stunde {
  height: var(--std); border-top: 1px solid var(--linie2);
}
.kalendergitter .zeitspalte .stunde { border-top-color: transparent; }
.kalendergitter .zeitspalte span {
  display: block; transform: translateY(-7px); padding-right: 6px;
  text-align: right; font-size: 10.5px; color: var(--grau2);
}
.kalenderspalte { position: relative; border-left: 1px solid var(--linie); }
.kalenderspalte.heute { background: var(--akzent-hell); }

.kalenderbalken {
  position: absolute; left: 2px; right: 2px; overflow: hidden;
  padding: 2px 5px; border-radius: 6px;
  font-size: 10.5px; line-height: 1.3;
  display: flex; flex-direction: column;
}
.kalenderbalken strong { font-size: 11px; }

/* Belegt ist satt, nicht buchbar ist schraffiert und blass, angefragt
   ist umrandet statt gefuellt - es ist ja noch nichts. */
.kalenderbalken.art-belegt {
  background: var(--akzent); border: 1px solid var(--akzent-dunkel);
  color: #fff;
}
.kalenderbalken.art-sperre {
  color: var(--grau2);
  border: 1px solid var(--linie);
  background: repeating-linear-gradient(135deg,
    var(--flaeche) 0 6px, var(--pille) 6px 12px);
  justify-content: center;
}
/* Reserviert: jemand hat gefragt, entschieden ist nichts. Blasser als
   belegt, aber gefuellt - die Zeit ist weg, bis das Haus spricht. */
.kalenderbalken.art-reserviert {
  background: var(--pille); color: var(--grau);
  border: 1px solid var(--feldrand);
}
.kalenderbalken.art-angefragt {
  background: var(--grund); color: var(--akzent-dunkel);
  border: 2px dashed var(--akzent);
}

.zeichenerklaerung {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; margin-bottom: 18px;
}
.zeichenerklaerung .probe {
  display: inline-block; width: 13px; height: 13px;
  border-radius: 4px; margin-right: 5px; vertical-align: -2px;
}

.anfrageform {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin-top: 12px;
}
.anfrageform label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; color: var(--grau2);
}
.anfrageform label.breit { flex: 1 1 200px; }
.anfrageform input { min-width: 120px; }

.kennung.gut {
  color: var(--gruen); background: var(--gruen-hell);
  border-color: var(--gruen-rand);
}
.kennung.weg {
  color: var(--rot); background: var(--rot-hell);
  border-color: var(--rot-rand);
}

@media (max-width: 560px) {
  .kalenderraum { --std: 34px; }
  .kalendergitter, .kalenderkopfzeile { min-width: 470px; }
  .kalenderbalken { font-size: 9.5px; padding: 1px 3px; }
  .kalenderbalken strong { font-size: 10px; }
}