/* Das Personalbüro (A.0.95.0, tafeln/personal-seiten.js): das Jobportal „händeringend.de“ als Webseite in der Tafel (Adresse
   als Titel wie bei Shoppital, Kopf in Indigo mit sonnengelbem Zeichen), die Bewerbungsmappen (Stapel links, aufgeschlagene
   Mappe rechts, das Anschreiben als Brief auf Papier) und der Kurskatalog des Bildungswerks (Karten nebeneinander). */

/* ── händeringend.de ─────────────────────────────────────────────────── */
.tafel.portal-tafel {
  --j-indigo: #2f3a8f; --j-indigo2: #232b6e; --j-gelb: #ffd447; --j-papier: #fff; --j-grau: #f3f4f9; --j-linie: #dfe1ee;
  --j-text: #1b1e33; --j-leise: #5b6080; --j-gut: #1f7a45;
  background: var(--j-papier); color: var(--j-text); border: 1px solid #8c90b0; border-radius: .55em;
}
.portal-tafel .tafel-kopf { background: linear-gradient(#eef0f6, #dfe2ee); color: var(--j-text); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--j-linie); }
.portal-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--j-linie); color: var(--j-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.portal-tafel .tafel-zu { color: var(--j-text); background: transparent; box-shadow: none; }
.portal-tafel .tafel-zu:hover, .portal-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; }
.portal-tafel .tafel-inhalt { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.portal-tafel .tafel-fuss { background: var(--j-grau); border-top: 1px solid var(--j-linie); }
.jp-seite { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 1em 1em; }
.jp-kopf { display: flex; align-items: center; gap: 1em; margin: 0 -1em .8em; padding: .5em 1em; background: var(--j-indigo); color: #fff; }
.jp-logo { display: flex; align-items: center; gap: .35em; }
.jp-zeichen { width: 2.1em; height: 2.1em; flex: none; }
.jp-logo b { font: 700 1.35em/1 var(--zier); color: #fff; letter-spacing: -.01em; }
.jp-logo b i { font-style: normal; color: var(--j-gelb); }
.jp-logo b small { font-size: .6em; color: #c7cbef; font-weight: 600; }
.jp-spruch { margin-left: auto; font-weight: 700; color: #dfe2ff; font-size: .9em; }
.portal-tafel .jp-titel { margin: 0 0 .5em; font: 700 1.15em var(--zier); color: var(--j-indigo2); }
.jp-block { margin-bottom: 1em; }
.portal-tafel .jp-block h3 { margin: 0 0 .45em; font: 700 1em var(--zier); color: var(--j-indigo2); border-bottom: 2px solid var(--j-gelb); padding-bottom: .15em; }
.jp-leise { color: var(--j-leise); font-weight: 600; margin: .2em 0; max-width: 75ch; }
.jp-anzeige { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .3em .8em; padding: .5em .7em;
  border: 1px solid var(--j-linie); border-radius: .45em; margin-bottom: .4em; background: var(--j-grau); }
.jp-anzeige b { display: block; }
.jp-anzeige small { color: var(--j-leise); font-weight: 600; }
.jp-kopfbild { font-size: 1.5em; line-height: 1; }
.jp-uhr { color: var(--j-leise); font-weight: 700; font-size: .88em; white-space: nowrap; }
.jp-zahl { font-weight: 800; font-size: .88em; color: var(--j-leise); white-space: nowrap; }
.jp-zahl.da { color: var(--j-gut); }
.jp-taten { display: flex; gap: .3em; }
.jp-berufe { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: .6em; }
.portal-tafel .knopf.jp-beruf { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'bild name' 'bild geld' 'lage lage' 'los los';
  align-items: center; gap: .1em .55em; padding: .55em .7em .6em; text-align: left; background: #fff; color: var(--j-text);
  border: 1px solid var(--j-linie); border-radius: .5em; box-shadow: 0 .08em .2em rgba(35, 43, 110, .1); }
.portal-tafel .knopf.jp-beruf:hover, .portal-tafel .knopf.jp-beruf:focus-visible { border-color: var(--j-indigo); outline: 2px solid var(--j-gelb); outline-offset: 0; }
.jp-beruf .jp-kopfbild { grid-area: bild; font-size: 1.9em; }
.jp-beruf b { grid-area: name; font-size: 1em; }
.jp-beruf small { grid-area: geld; color: var(--j-leise); font-weight: 600; }
.jp-lage { grid-area: lage; margin-top: .3em; font-size: .84em; line-height: 1.35; color: var(--j-text); font-weight: 500; }
.jp-los { grid-area: los; margin-top: .4em; justify-self: start; font-weight: 800; font-size: .82em; color: var(--j-indigo2); background: var(--j-gelb); padding: .15em .6em; border-radius: 999px; }
.jp-konkurrenz { list-style: none; margin: 0 0 .3em; padding: 0; display: flex; flex-wrap: wrap; gap: .35em; }
.jp-konkurrenz li { background: var(--j-grau); border: 1px solid var(--j-linie); border-radius: 999px; padding: .2em .7em; font-size: .9em; }
.portal-tafel .stellenanzeige { margin-top: .2em; }

/* ── Bewerbungsmappen ─────────────────────────────────────────────────── */
.mappen-tafel .tafel-inhalt { display: flex; flex-direction: column; min-height: 0; }
.mappen { display: grid; grid-template-columns: minmax(13em, 17em) minmax(0, 1fr); gap: .8em; min-height: 0; flex: 1 1 auto; }
.stapel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: .3em; display: flex; flex-direction: column; gap: .3em; }
.stapel-kopf { margin: .4em 0 .1em; font-size: .8em; color: #6a563c; font-weight: 800; }
.stapel-kopf:first-child { margin-top: 0; }
.mappen-tafel .knopf.stapel-mappe { display: flex; align-items: center; gap: .5em; padding: .35em .5em; text-align: left; background: #fbf6ea;
  border: 1px solid #d8c49c; border-left: .3em solid #c9a86a; border-radius: .35em; box-shadow: none; }
.mappen-tafel .knopf.stapel-mappe.an { background: #fff; border-color: #6b4a22; border-left-color: #6b4a22; box-shadow: 0 .1em .35em rgba(60, 40, 10, .25); }
.stapel-mappe .bogen-bild { width: 2.6em; height: 2.6em; flex: none; font-size: .9em; }
.stapel-text { display: flex; flex-direction: column; min-width: 0; }
.stapel-text b { font-size: .92em; }
.stapel-text small { font-size: .74em; color: #6a563c; font-weight: 600; }
.stapel-text .warnung { color: #a3261d; }
.mappe { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: .3em; }
.brief { position: relative; margin: 0 0 .8em; padding: .9em 1.1em 1em; background: #fffdf7; color: #262019; border: 1px solid #e3d6b8;
  box-shadow: 0 .15em .5em rgba(60, 40, 10, .18); font: 1em/1.55 'PT Serif', Georgia, serif; max-width: 70ch; }
.brief::before { content: ''; position: absolute; top: -.35em; left: 1.4em; width: 2.6em; height: .7em; background: rgba(205, 205, 205, .7); transform: rotate(-3deg); }
.brief p { margin: 0 0 .55em; }
.brief-anrede { font-weight: 700; }
.brief-gruss { margin-bottom: 0; }
.brief-name { display: inline-block; margin-top: .25em; font: italic 700 1.15em 'PT Serif', Georgia, serif; color: #233b7a; }

/* ── Kurskatalog ──────────────────────────────────────────────────────── */
.katalog-tafel .tafel-inhalt { display: flex; flex-direction: column; min-height: 0; }
.kk-seite { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.kk-kopf { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-bottom: .7em; padding-bottom: .35em; border-bottom: 2px solid #6b4a22; }
.kk-hut { font-size: 1.4em; align-self: center; }
.kk-kopf b { font: 700 1.2em var(--zier); color: #4a3216; }
.kk-kopf small { color: #6a563c; font-weight: 700; font-style: italic; }
.kurse { display: grid; grid-template-columns: repeat(auto-fill, minmax(19em, 1fr)); gap: .7em; }
.kurs { display: flex; flex-direction: column; gap: .35em; padding: .7em .8em .8em; background: #fffaf0; border: 1px solid #d8c49c; border-radius: .45em; }
.kurs.voll { opacity: .75; }
.kurs header h4 { margin: 0; font: 700 1.02em/1.2 var(--zier); color: #4a3216; }
.kurs header span { font-size: .82em; color: #6a563c; font-weight: 700; }
.kurs-text { margin: 0 0 .2em; font-size: .92em; line-height: 1.45; color: #2a1d12; }
.kurs-daten .zeile { padding: .18em 0; font-size: .9em; }
.kurs-leute { margin: .1em 0; font-size: .9em; }
.kurs .knopf.kurs-knopf { margin-top: auto; align-self: flex-start; }

@media (max-width: 760px), (max-height: 520px) {
  .jp-anzeige { grid-template-columns: auto minmax(0, 1fr); }
  .jp-anzeige .jp-uhr, .jp-anzeige .jp-zahl, .jp-anzeige .jp-taten { grid-column: 2; }
  .jp-spruch { display: none; }
  .mappen { grid-template-columns: minmax(10em, 13em) minmax(0, 1fr); }
  .kurse { grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); }
}

/* ── A.0.104.0: die Listen des Personalbüros als die Dinge, die sie öffnen (tafeln/personal.js) ───────────────────────────
   Stecktafel: Whiteboard mit Alurahmen, oben der Streifen in der Farbe der gemalten Spalte, je Person eine angepinnte Karte.
   Aktenschrank: Hängeregister mit Reiter (Nummer). Ordner: Lohnliste wie ein Kassenbuch. Bogen: in einer Personalakte (Manila). */
.st-brett { padding: .55em .7em .8em; border-radius: .4em; background: linear-gradient(#ffffff, #f2f4f6); border: .3em solid #c3cad1;
  box-shadow: inset 0 0 0 1px #e3e7ea, 0 .15em .4em rgba(0, 0, 0, .18); --st-farbe: #6aa84f; }
.st-brett.gruen { --st-farbe: #6aa84f; }
.st-brett.blau { --st-farbe: #5b9bd5; }
.st-brett.orange { --st-farbe: #f0883e; }
.st-brett.grau { --st-farbe: #9aa3ab; }
.st-kopf { margin: -.55em -.7em .5em; padding: .3em .7em; background: var(--st-farbe); color: #fff; font: 800 .9em/1.3 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.st-kopf small { margin-left: .4em; font-weight: 700; opacity: .85; }
.st-gruppe h5 { margin: .4em 0 .3em; font-size: .8em; color: #4a5560; text-transform: uppercase; letter-spacing: .06em; }
.st-gruppe h5 small { color: #7d8790; font-weight: 600; }
.st-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .45em; }
.tafel .knopf.st-karte { position: relative; display: flex; align-items: center; gap: .55em; padding: .45em .55em .45em .5em; text-align: left; color: #1c232a;
  background: #fffef9; border: 1px solid #e0dccb; border-left: .3em solid var(--st-farbe); border-radius: .25em; box-shadow: 0 .12em .25em rgba(0, 0, 0, .14); }
.tafel .knopf.st-karte:hover:not(:disabled), .tafel .knopf.st-karte:focus-visible { background: #fff; box-shadow: 0 .2em .45em rgba(0, 0, 0, .22); outline: none; }
.st-nadel { position: absolute; top: -.35em; left: 50%; width: .7em; height: .7em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a80, #c62828);
  box-shadow: 0 .1em .15em rgba(0, 0, 0, .35); }
.st-karte .bogen-bild, .st-karte .bogen-bild.foto { width: 2.6em; height: 2.6em; font-size: 1.1em; flex: none; }
.st-text { display: flex; flex-direction: column; min-width: 0; }
.st-text b { font-size: .9em; }
.st-text small { font-size: .72em; color: #56636e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-text small.fort { color: #8a6a3a; font-style: italic; }
.st-laune, .ak-laune { display: flex; align-items: center; gap: .3em; font-size: .72em; color: #56636e; }
.st-laune .balken, .ak-laune .balken { width: 4em; }
.st-laune.warnung, .ak-laune.warnung { color: #b0281b; font-weight: 700; }
.st-zettel { display: inline-block; max-width: 30em; margin: .3em 0; padding: .55em .8em; background: #fff7c2; border: 1px solid #e6d77d; transform: rotate(-.6deg);
  box-shadow: 0 .12em .25em rgba(0, 0, 0, .15); font-weight: 700; color: #4d4416; }
.ak-schublade { padding: .5em .6em .7em; border-radius: .35em; background: linear-gradient(#8c949b, #6f777e); box-shadow: inset 0 .2em .45em rgba(0, 0, 0, .35); }
.ak-schublade .st-gruppe h5 { color: #f0f2f4; }
.ak-schublade .st-gruppe h5 small { color: #d0d5da; }
.ak-schublade .st-karten { grid-template-columns: minmax(0, 1fr); gap: .25em; }
.tafel .knopf.ak-akte { position: relative; display: grid; grid-template-columns: 4.2em 2.3em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .35em .6em .35em .3em;
  text-align: left; color: #2b2214; background: linear-gradient(#f3e3b8, #e8d29a); border: 1px solid #c8ad6a; border-radius: .2em .2em .3em .3em; }
.tafel .knopf.ak-akte:hover:not(:disabled), .tafel .knopf.ak-akte:focus-visible { background: linear-gradient(#f8ebc8, #eedba9); outline: none; }
.ak-reiter { padding: .05em .4em; border-radius: .2em; background: #fffdf5; border: 1px solid #c8ad6a; font: 700 .72em/1.3 'Courier Prime', 'Courier New', monospace; text-align: center; }
.ak-akte .bogen-bild, .ak-akte .bogen-bild.foto { width: 2.2em; height: 2.2em; font-size: 1em; }
.ak-name { display: flex; flex-direction: column; min-width: 0; }
.ak-name b { font-size: .9em; }
.ak-name small { font-size: .72em; color: #6b5a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-name small.fort { font-style: italic; }
.lo-blatt { padding: .6em .9em .8em; background: #fffef8; border: 1px solid #d9d2bf; border-radius: .25em; box-shadow: 0 .15em .35em rgba(60, 40, 10, .15);
  background-image: repeating-linear-gradient(transparent 0 1.9em, #e8f0f7 1.9em calc(1.9em + 1px)); }
.lo-titel { margin: 0 0 .4em; padding-bottom: .2em; border-bottom: 2px solid #23313b; font: 800 1em/1.3 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #23313b; }
.lo-titel small { margin-left: .5em; font-size: .68em; letter-spacing: .03em; text-transform: none; color: #8a5a00; font-weight: 700; }
.lo-spalten, .tafel .knopf.lo-zeile, .lo-summe { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 6.5em 6em; gap: .6em; align-items: center; }
.lo-spalten { margin: 0; font-size: .7em; text-transform: uppercase; letter-spacing: .07em; color: #7a8590; }
.lo-spalten span:last-child { text-align: right; }
.tafel .knopf.lo-zeile { width: 100%; padding: .25em .2em; text-align: left; background: none; border: 0; border-bottom: 1px dotted #c8ccd0; border-radius: 0; color: #1c232a; }
.tafel .knopf.lo-zeile:hover:not(:disabled), .tafel .knopf.lo-zeile:focus-visible { background: #f3f7fb; outline: none; }
.lo-nr { font: 700 .8em/1 'Courier Prime', 'Courier New', monospace; color: #6a7680; }
.lo-name { display: flex; flex-direction: column; min-width: 0; }
.lo-name b { font-size: .9em; }
.lo-name small { font-size: .72em; color: #6a7680; }
.lo-laune { font-size: .75em; color: #2c7a4b; font-weight: 700; }
.lo-laune.warnung { color: #b0281b; }
.lo-betrag { font: 700 .95em/1 'Courier Prime', 'Courier New', monospace; text-align: right; }
.lo-summe { margin: .3em 0 0; padding-top: .3em; border-top: 2px solid #23313b; font-weight: 800; }
.lo-summe span { grid-column: 1 / 4; }
.lo-summe b { text-align: right; font-family: 'Courier Prime', 'Courier New', monospace; }
.ak-mappe { position: relative; margin-top: 1.1em; padding: .7em .8em .6em; background: linear-gradient(#f4e6bf, #ecd9a7); border: 1px solid #c8ad6a; border-radius: 0 .35em .35em .35em;
  box-shadow: 0 .15em .4em rgba(60, 40, 10, .2); }
.ak-mappe-reiter { position: absolute; left: -1px; top: -1.55em; margin: 0; padding: .2em .8em; background: #f4e6bf; border: 1px solid #c8ad6a; border-bottom: 0;
  border-radius: .35em .35em 0 0; font: 700 .78em/1.3 'Courier Prime', 'Courier New', monospace; color: #3b2a17; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ak-mappe > .bogen { background: #fffdf7; border-radius: .25em; padding: .4em .6em; box-shadow: 0 .1em .2em rgba(0, 0, 0, .1); }
.bw-leer { display: flex; align-items: center; gap: 1.2em; padding: .6em .2em; }
/* die leere Briefablage: drei offene Fächer übereinander (von vorn: Boden und Seiten, oben offen), kein Blatt darin */
.bw-ablage { position: relative; flex: none; width: 7.5em; height: 6em; }
.bw-ablage i { position: absolute; left: 0; right: 0; height: 1.5em; border: .22em solid #33414d; border-top: 0; border-radius: 0 0 .3em .3em;
  background: linear-gradient(transparent 55%, rgba(51, 65, 77, .18)); box-shadow: 0 .15em .15em rgba(0, 0, 0, .2); }
.bw-ablage i::before { content: ''; position: absolute; left: -.22em; right: -.22em; bottom: -.22em; height: .45em; background: #33414d; border-radius: 0 0 .3em .3em; }
.bw-ablage i:nth-child(1) { top: .3em; } .bw-ablage i:nth-child(2) { top: 2.25em; } .bw-ablage i:nth-child(3) { top: 4.2em; }
.tafel .knopf.bw-weg { margin-top: .5em; }
@container (max-width: 560px) {
  .tafel .knopf.ak-akte { grid-template-columns: 3.6em 2.2em minmax(0, 1fr); }
  .ak-laune { grid-column: 3; }
  .lo-spalten, .tafel .knopf.lo-zeile, .lo-summe { grid-template-columns: 2.2em minmax(0, 1fr) 5.5em; }
  .lo-laune { display: none; }
  .lo-spalten span:nth-child(3) { display: none; }
  .lo-summe span { grid-column: 1 / 3; }
}