/* Heute: Begrüßung, Stecktafel, Lücken.
   Die Tafel ist die Bürowand mit Eichenleisten. Namensschilder sind weiß wie die Hemden,
   eine Lücke ist das einzige Schild in Beere, ein Teil-Abdeckungs-Hinweis das einzige in Gelb. */
.gruss { margin-bottom: 1.25rem; }
.gruss h1 { margin-bottom: .25rem; }
.gruss p { max-width: 44rem; font: 500 italic 1.1875rem/1.35 var(--titel); color: var(--leise); }

.tafel { background: var(--wand); color: var(--auf-wand); }
.tafel::after { content: ""; display: block; height: 1rem; background: var(--dielen); border-top: 2px solid #5a3514; }
.tafel-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1rem; }
.tafel h2 { margin: 0 0 .625rem; color: #fff; font-size: 1.375rem; }
.tafel h3 { margin: 0 0 .5rem; padding-top: .625rem; color: var(--auf-wand-leise); font: 600 .9688rem/1.2 var(--schrift); border-top: 4px solid var(--eiche); }
.schiene + .schiene { margin-top: 1rem; }
.schilder { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Das Namensschild steckt mit seiner linken Kante in der Leiste. */
.schild {
  position: relative; flex: 1 1 9.5rem; display: block;
  min-height: 3.75rem; padding: .5rem .75rem .5rem 1.125rem;
  background: var(--hemd); color: var(--tinte);
  border: 0; border-radius: 1px; text-align: left; line-height: 1.25; text-decoration: none;
  min-width: 0; overflow-wrap: anywhere;
}
.schild::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .4375rem; background: var(--gruen); }
.schild strong, .schild span { display: block; }
.schild span { font-size: .9375rem; color: var(--leise); }
.schild:hover { background: var(--rose-2); }
.schild-krank::before { background: var(--bordeaux); }
.schild-urlaub::before { background: var(--eiche); }
.schild-urlaub_halb::before { background: repeating-linear-gradient(var(--eiche) 0 7px, #fff 7px 11px); }
.schild-aussendienst::before { background: var(--blau); }
.schild-berufsschule::before { background: #5b4b8a; }
.schild-frei::before, .schild-feiertag::before { background: #93a39b; }
.schild-vormittag::before { background: repeating-linear-gradient(var(--gruen) 0 7px, #fff 7px 11px); }

/* Lücken stecken ganz oben auf der Tafel und leuchten. */
.tafel-luecken { padding: 1rem 1rem 0; }
.tafel-luecken h2 { color: #fff; }
.schild-luecke, .schild-hinweis { flex-basis: 100%; }
.schild-luecke { background: var(--beere); color: #fff; box-shadow: 0 0 0 2px #ff8fc4; }
.schild-luecke::before { background: #fff; }
.schild-luecke span { color: #fff; }
.schild-luecke:hover { background: var(--bordeaux); }
.schild-hinweis { background: var(--gelb); color: var(--tinte); }
.schild-hinweis::before { background: var(--tinte); }
.schild-hinweis span { color: var(--tinte); }
.schild-hinweis:hover { background: #ffe680; }
.tafel-ruhe { display: flex; align-items: center; gap: .875rem; padding: 1rem 1rem 0; color: var(--auf-wand); }
.tafel-ruhe .hund { width: 3.5rem; height: 3.5rem; }

/* Lückenliste */
.zeilen { background: var(--hemd); border: 1px solid var(--linie); }
.zeilen > li { padding: .875rem 1rem; }
.zeilen > li + li { border-top: 1px solid var(--linie); }
dialog .zeilen > li { padding: .75rem; }

.luecke { display: grid; gap: .5rem; border-left: 6px solid var(--beere); }
.luecke-gelb { border-left-color: #e0b400; }
.luecke-fall { display: block; color: inherit; text-decoration: none; }
.luecke-fall strong { display: block; font: 500 1.1875rem/1.25 var(--titel); color: var(--bordeaux-tief); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.luecke-fall span { color: var(--leise); }
.luecke-grund { font-weight: 600; color: var(--bordeaux-tief); }
.luecke-gelb .luecke-grund { color: var(--tinte); }
.luecke-aktion { display: grid; gap: .375rem; }
.luecke-aktion .knopf { width: 100%; white-space: normal; }
.luecke, .luecke-aktion { min-width: 0; overflow-wrap: anywhere; }

.antrag { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }

@media (min-width: 48rem) {
  .tafel-innen { grid-template-columns: 2fr 3fr; gap: 2rem; padding: 1.5rem; }
  .tafel-luecken, .tafel-ruhe { padding: 1.5rem 1.5rem 0; }
  .schild { max-width: 15rem; }
  .schild-luecke, .schild-hinweis { flex-basis: 15rem; max-width: 19rem; }
  .luecke { grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 1rem; }
}

/* Übersicht: Kacheln und Karten im Aufbau der Team-Demo (weiß, eckig, ruhige Linien) */
.kacheln { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.kachel {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; padding: .875rem 1rem;
  background: var(--hemd); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none;
}
.kachel:hover { border-color: var(--bordeaux); }
.kachel svg { grid-row: span 2; width: 2rem; height: 2rem; color: var(--bordeaux); }
.kachel-zahl { font: 500 1.875rem/1 var(--titel); color: var(--bordeaux-tief); }
.kachel-text { color: var(--leise); font-size: .9375rem; line-height: 1.25; }
.kachel:last-child { grid-column: 1 / -1; }

.uebersicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
/* minmax(0, 1fr): Lange Knöpfe oder Namen dürfen die Spalte nicht über 390 px hinaus aufweiten (mobil). */
.uebersicht-haupt, .uebersicht-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; min-width: 0; }
.uebersicht-haupt > section > h2:first-child { margin-top: 0; }
.karte { background: var(--hemd); border: 1px solid var(--linie); padding: 0 1rem 1rem; }
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.karte-kopf h2 { margin: 1rem 0 .5rem; font-size: 1.25rem; }
.karte-kopf a { font-size: .9688rem; font-weight: 600; white-space: nowrap; }
.karte-leer { color: var(--leise); padding: .25rem 0; }
.karte-liste > li + li { border-top: 1px solid var(--linie); }
.karte-zeile {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: var(--ziel); padding: .625rem 0;
  background: none; border: 0; color: var(--tinte); text-align: left; text-decoration: none; line-height: 1.3;
}
a.karte-zeile:hover strong, button.karte-zeile:hover strong { text-decoration: underline; }
.karte-zeile > span:not(.gesicht) { flex: 1; min-width: 0; }
.karte-zeile strong { font-weight: 600; }
.karte-zeile small { display: block; }

@media (min-width: 48rem) {
  .kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kachel:last-child { grid-column: auto; }
}
@media (min-width: 72rem) {
  .uebersicht { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}