@charset "utf-8";
:root {
  --head: #7b8a94;
  --line: #8b9aa4;
  --row-a: #f6fbff;
  --row-b: #bcdce9;
  --text: #1f2a30;
  --op: #c4521f;
  --op-bg: #fff1ea;
  --op-line: #f0b99f;
  --heute: #1f5f7a;
  --jetzt: #1e8f5a;
  --jetzt-bg: #e3f6ec;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 2px; background: transparent; color: var(--text);
  font: 15px/1.3 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
table.plan {
  width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(31,42,48,.10);
}
.plan th, .plan td { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: middle; }
.plan tr > :last-child { border-right: 0; }
.plan tbody tr:last-child > * { border-bottom: 0; }
.plan thead th { background: var(--head); color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; }
.plan tbody tr:nth-child(odd)  { background: var(--row-a); }
.plan tbody tr:nth-child(even) { background: var(--row-b); }
.plan tbody th, .plan thead th:first-child { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.plan tbody th { font-weight: 600; }

/* Zeit + Aerzte-Chips */
.t { display: inline-block; font-weight: 600; margin: 0 6px 0 0; vertical-align: middle; white-space: nowrap; }
.ds { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.d { background: #fff; border: 1px solid #9fb6c1; border-radius: 999px; padding: 1px 9px; font-size: 14px; line-height: 1.4; }
.d.op { background: var(--op-bg); border-color: var(--op-line); color: var(--op); font-weight: 600; }

/* Heute: Tageszelle farbig + Balken links */
.plan tbody tr.heute th { background: var(--heute); color: #fff; box-shadow: inset 4px 0 0 rgba(255,255,255,.35); }
.plan tbody tr.heute td { box-shadow: inset 0 3px 0 -1px rgba(31,95,122,.25), inset 0 -3px 0 -1px rgba(31,95,122,.25); }

/* Jetzt: aktuelle Spalte (Kopf) + aktuelle Zelle */
.plan thead th.jetzt-spalte { background: var(--jetzt); }
.plan td.jetzt { background: var(--jetzt-bg); outline: 3px solid var(--jetzt); outline-offset: -3px; position: relative; padding-top: 21px; }
.plan td.jetzt::after {
  content: "JETZT"; position: absolute; top: 3px; right: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--jetzt);
  border-radius: 999px; padding: 1px 7px;
}

/* Mobil: pro Tag eine kompakte Karte - links Tageszeit + Uhrzeit, rechts die Namen */
@media (max-width: 680px) {
  body { font-size: 15px; padding: 0; }
  table.plan, .plan tbody, .plan tr, .plan th, .plan td { display: block; width: auto; }
  table.plan { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .plan thead { display: none; }
  .plan tbody tr {
    margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    background: var(--row-a) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  .plan tbody tr.heute { border-color: var(--heute); box-shadow: 0 0 0 2px var(--heute); }
  .plan tbody th {
    width: auto; background: var(--head); color: #fff; border: 0; padding: 7px 12px;
    font-size: 0; box-shadow: none;
  }
  .plan tbody th::after { content: attr(data-full); font-size: 16px; font-weight: 600; letter-spacing: .02em; }
  .plan tbody tr.heute th { box-shadow: none; }
  .plan tbody tr.heute th::after { content: attr(data-full) " · heute"; }
  .plan tbody tr.heute td { box-shadow: none; }
  .plan td {
    border: 0; border-top: 1px solid #d3e3ea; padding: 8px 12px;
    display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "l c" "t c"; column-gap: 8px; row-gap: 0; align-items: center;
  }
  .plan td.leer { display: none; }
  .plan td::before { grid-area: l; content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5a6a73; }
  .t { grid-area: t; font-size: 16px; margin: 0; }
  .ds { grid-area: c; }
  .plan td.jetzt { padding-top: 8px; grid-template-areas: "l c" "t c" "j c"; }
  .plan td.jetzt::after { grid-area: j; position: static; justify-self: start; margin-top: 3px; }
}