/* ============================================================================
   DESIGN „GLAS" — Projekte (produktion/projekte.php)
   ----------------------------------------------------------------------------
   Laufen in der Woche nur EIN oder ZWEI Projekte, füllen große Karten die Breite
   (pg-…): farbiger Kopf mit „ist/soll besetzt", darunter die Tage als Spalten mit
   den Leuten (Gesicht + Vorname), freie Plätze als gestrichelter Kreis mit Zahl,
   unten der Stand und der eine Knopf. Wer eine Person antippt, sieht in den Karten
   die Tage aufleuchten, an denen sie hinpasst (assets/js/projekte-verschieben.js).
   Ab drei Projekten bleibt die Kartenansicht (pk-…) — hier nur in Glas gekleidet.
   Am Ende: der Kalender eines Projekts (Monat, Jahr — produktion/projekt-kalender.php).

   Die Projektfarbe kommt als --pk-farbe aus dem Markup. Auf ihr steht weiße
   Schrift — in beiden Modi, wie auf --verlauf.
   ============================================================================ */

/* --- Kartenansicht (ab drei Projekten) und was die Seite sonst zeigt -------- */
html[data-design="glas"] .pk-karte-kopf,
html[data-design="glas"] .pg-kopf {
    background: var(--pk-farbe, var(--accent-b));
    background: linear-gradient(135deg, var(--pk-farbe, var(--accent-b)), color-mix(in srgb, var(--pk-farbe, var(--accent-b)) 58%, #000));
    color: #fff;
}
html[data-design="glas"] .pk-karte { transition: transform .25s var(--feder), box-shadow .25s; }
html[data-design="glas"] .pk-karte:not(.pg-gross):hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html[data-design="glas"] .pk-karten > .pk-karte { animation: pg-rein .4s var(--feder) backwards; }
html[data-design="glas"] .pk-karten > .pk-karte:nth-child(2) { animation-delay: 50ms; }
html[data-design="glas"] .pk-karten > .pk-karte:nth-child(3) { animation-delay: 100ms; }
html[data-design="glas"] .pk-karten > .pk-karte:nth-child(n+4) { animation-delay: 150ms; }
/* Ein offenes Menü liegt über der Nachbarkarte. */
html[data-design="glas"] .pk-karte:has(.pk-mehr[open]) { z-index: 3; }

html[data-design="glas"] .pk-cta { transition: transform .2s var(--feder), filter .2s, background .2s; }
html[data-design="glas"] .pk-cta:active { transform: scale(0.97); }
html[data-design="glas"] .pk-cta.pk-cta-pink,
html[data-design="glas"] .pk-cta.pk-cta-pink:hover { background: var(--verlauf); color: #fff; box-shadow: 0 14px 26px -14px var(--accent); }
html[data-design="glas"] .pk-cta.pk-cta-pink:hover { filter: brightness(1.07); }
html[data-design="glas"] .pk-cta.pk-cta-schwarz,
html[data-design="glas"] .pk-cta.pk-cta-schwarz:hover { background: var(--ink); color: var(--paper); }
html[data-design="glas"] .pk-cta.pk-cta-grau { background: var(--paper-2); color: var(--ink); }
html[data-design="glas"] .pk-cta.pk-cta-grau:hover { background: var(--line-2); color: var(--ink); }

html[data-design="glas"] .pk-tag-voll { background: var(--success-light); color: var(--success-2); }
/* Überschneidung: die Gefahr-Familie aus 90-dunkel.css; fehlt sie, trägt die Warnfarbe. */
html[data-design="glas"] .pk-tag-konflikt { background: var(--gefahr-flaeche, var(--warning-light)); color: var(--gefahr, var(--warning)); }
html[data-design="glas"] .pk-neu-kachel { border-color: var(--line-2); border-radius: 26px; transition: transform .25s var(--feder), border-color .2s; }
html[data-design="glas"] .pk-neu-kachel:hover { transform: translateY(-3px); border-color: var(--accent); }
html[data-design="glas"] .pk-zeile { border: 1px solid var(--glas-kante); background: var(--glas); }

/* „Zuerst erledigen": Glas statt Pastell — die Farbe trägt die Zahl und der Pfeil. */
html[data-design="glas"] .pk-kachel { border: 1px solid var(--glas-kante); background: var(--glas); box-shadow: var(--shadow); transition: transform .25s var(--feder); }
html[data-design="glas"] .pk-kachel:hover { filter: none; transform: translateY(-3px); }
html[data-design="glas"] .pk-kachel.pk-kachel-luecke .pk-kachel-zahl { color: var(--accent-2); }
html[data-design="glas"] .pk-kachel.pk-kachel-luecke .pk-kachel-pfeil { background: var(--verlauf); }
html[data-design="glas"] .pk-kachel.pk-kachel-konflikt .pk-kachel-zahl { color: var(--gefahr, var(--warning)); }
html[data-design="glas"] .pk-kachel.pk-kachel-versand .pk-kachel-zahl { color: var(--warning); }
html[data-design="glas"] .pk-kachel.pk-kachel-konflikt .pk-kachel-pfeil,
html[data-design="glas"] .pk-kachel.pk-kachel-versand .pk-kachel-pfeil { background: var(--ink); color: var(--paper); }

/* --- Große Karten: ein oder zwei Projekte füllen die Breite ----------------- */
html[data-design="glas"] .pg-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); align-items: stretch; }
html[data-design="glas"] .pg-zwei.pg-allein { grid-template-columns: minmax(0, 1fr); }
html[data-design="glas"] .pg-gross { min-height: 420px; border-radius: 28px; animation: pg-rein .4s var(--feder) backwards; }
html[data-design="glas"] .pg-gross:nth-child(2) { animation-delay: 70ms; }
/* Allein sind die Spalten breit — die Leute stehen nebeneinander, die Karte muss nicht so hoch sein. */
html[data-design="glas"] .pg-allein .pg-gross { min-height: 340px; }

html[data-design="glas"] .pg-kopf {
    display: flex; align-items: center; gap: var(--s-14);
    padding: var(--s-18) var(--s-16) var(--s-18) var(--s-24);
    border-radius: 27px 27px 0 0;
}
html[data-design="glas"] .pg-kopf-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
html[data-design="glas"] .pg-zahl { flex: 0 0 auto; text-align: right; line-height: 1; }
html[data-design="glas"] .pg-zahl b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
html[data-design="glas"] .pg-zahl small { display: block; margin-top: var(--s-4); font-size: 12px; font-weight: 500; opacity: 0.9; }
/* Das Menü steht hier in der Zeile, nicht in der Ecke. */
html[data-design="glas"] .pg-kopf .pk-mehr { position: relative; top: auto; right: auto; flex: 0 0 auto; }

html[data-design="glas"] .pg-tage {
    flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--pg-spalten, 5), minmax(0, 1fr)); gap: var(--s-8);
    padding: var(--s-14) var(--s-16);
}
/* `.pg-tag` heißt auch der Tageskopf des Planungsrasters (th.pg-tag in produktion/planung.php).
   Deshalb gilt hier alles nur für das Kind der Tagesreihe: `.pg-tage > .pg-tag`. */
html[data-design="glas"] .pg-tage > .pg-tag {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-10);
    padding: var(--s-10) var(--s-4) var(--s-12); border-radius: 18px; background: var(--paper-2);
    font-size: 12px; color: var(--ink-3);
}
html[data-design="glas"] .pg-tage > .pg-tag.ist-heute { box-shadow: inset 0 0 0 1.5px var(--accent); }
html[data-design="glas"] .pg-tage > .pg-tag.ist-heute .pg-tag-name b { color: var(--accent-2); }
html[data-design="glas"] .pg-tage > .pg-tag.ist-vorbei { opacity: 0.55; }
html[data-design="glas"] .pg-tag-name { display: inline-flex; align-items: center; gap: var(--s-4); white-space: nowrap; }
html[data-design="glas"] .pg-tag-name b { font-weight: 700; color: var(--ink-2); }
html[data-design="glas"] .pg-ausruf {
    width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%;
    background: var(--gefahr, var(--warning)); color: var(--paper); font-size: 11px; font-weight: 800; line-height: 1;
}
html[data-design="glas"] .pg-leute { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: var(--s-8) var(--s-2); }

/* Eine Person: Gesicht, darunter der Vorname. Als Knopf lässt sie sich verschieben. */
html[data-design="glas"] .pg-person {
    flex: 0 0 auto; width: min(56px, 100%); min-height: 36px; display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
    padding: 0; border: 0; background: none; color: var(--ink-2);
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; transition: opacity .2s;
}
html[data-design="glas"] button.pg-person { cursor: pointer; }
html[data-design="glas"] .pg-person .pkreis { width: 40px; height: 40px; box-shadow: var(--shadow); transition: transform .2s var(--feder), box-shadow .2s; }
html[data-design="glas"] button.pg-person:hover .pkreis { transform: scale(1.12); }
html[data-design="glas"] button.pg-person:focus-visible { outline: 0; }
html[data-design="glas"] button.pg-person:focus-visible .pkreis { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-b); }
html[data-design="glas"] .pg-person[aria-pressed="true"] { color: var(--accent-2); }
html[data-design="glas"] .pg-person[aria-pressed="true"] .pkreis { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
html[data-design="glas"] .pg-vorname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Offene Anfrage: gefragt, aber noch nicht da. */
html[data-design="glas"] .pg-person.ist-offen .pkreis { opacity: 0.6; outline: 2px dashed var(--ink-4); outline-offset: 2px; box-shadow: none; }
html[data-design="glas"] .pg-frei {
    flex: 0 0 auto; width: 40px; height: 40px; margin: 0 var(--s-8); display: grid; place-items: center; border-radius: 50%;
    border: 2px dashed var(--accent); color: var(--accent-2); font-size: 14px; font-weight: 700; line-height: 1;
}
html[data-design="glas"] .pg-kein { min-height: 40px; display: grid; place-items: center; color: var(--ink-4); font-size: 16px; }

/* Ist eine Person gewählt, treten die anderen zurück — die Ziele sollen auffallen. */
html[data-design="glas"] .pg-zwei.ist-wahl .pg-person:not([aria-pressed="true"]) { opacity: 0.5; }
html[data-design="glas"] .pg-tage > .pg-tag.ist-ziel { background: var(--success-light); outline: 2px dashed var(--success); outline-offset: -2px; }
/* „Passt teilweise": die Achtung-Familie aus 90-dunkel.css — --warning auf --warning-light
   hatte in 11 px nur 3,8:1; --achtung auf --achtung-flaeche hat 5,9:1 (dunkel 8,2:1). */
html[data-design="glas"] .pg-tage > .pg-tag.ist-ziel-teil { background: var(--achtung-flaeche, var(--warning-light)); outline-color: var(--achtung, var(--warning)); }
/* Das „+" steht für den freien Platz — die Zahl daneben wäre doppelt. */
html[data-design="glas"] .pg-tage > .pg-tag.ist-ziel .pg-frei { display: none; }
/* Ein Ziel nimmt die ganze Spaltenbreite: Darunter stehen, wenn das Projekt an dem Tag
   mehrere Schichten hat, Uhrzeit (eigene Zeile, kurz) und Station (darf umbrechen). */
html[data-design="glas"] .pg-ziel {
    flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    padding: 0; border: 0; background: none; color: var(--success-2); cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center;
    animation: pg-auf .3s var(--feder) backwards;
}
html[data-design="glas"] .pg-ziel-rund {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    border: 2px dashed var(--success); background: var(--surface); font-size: 20px; font-weight: 500; line-height: 1;
    /* Pulsiert rund 4 s (6 × 0,7 s), dann steht das Ziel ruhig gestrichelt da. Das Keyframe
       nennt nur den Anfang (groß); „alternate-reverse" beginnt beim eigenen Stil und endet
       nach einer geraden Zahl von Durchläufen wieder dort — ohne Sprung, ohne fill „forwards". */
    margin-bottom: var(--s-2);
    animation: pg-puls .7s ease-in-out 6 alternate-reverse backwards;
}
html[data-design="glas"] .pg-ziel:hover .pg-ziel-rund,
html[data-design="glas"] .pg-ziel:focus-visible .pg-ziel-rund { border-style: solid; background: var(--success); color: var(--surface); animation: none; }
html[data-design="glas"] .pg-ziel:focus-visible { outline: 0; }
html[data-design="glas"] .pg-ziel-wort { text-transform: lowercase; }
html[data-design="glas"] .pg-ziel-zeit { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-design="glas"] .pg-ziel-ort,
html[data-design="glas"] .pg-ziel-grund { max-width: 100%; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
html[data-design="glas"] .pg-ziel.ist-teil { color: var(--achtung, var(--warning)); }
html[data-design="glas"] .pg-ziel.ist-teil .pg-ziel-rund { border-color: var(--achtung, var(--warning)); animation: none; }
html[data-design="glas"] .pg-ziel.ist-teil:hover .pg-ziel-rund,
html[data-design="glas"] .pg-ziel.ist-teil:focus-visible .pg-ziel-rund { background: var(--achtung, var(--warning)); color: var(--surface); }

html[data-design="glas"] .pg-fuss { display: flex; align-items: center; gap: var(--s-12); padding: 0 var(--s-16) var(--s-16); }
html[data-design="glas"] .pg-status { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2); }
html[data-design="glas"] .pg-fuss .pk-cta { flex: 0 0 auto; margin-top: 0; min-height: 44px; padding: 0 var(--s-18); font-size: 14px; font-weight: 700; }

/* Wer gewählt ist und wie es weitergeht — fest am unteren Rand, wie die Meldung
   (.kmeldung). Das Skript hängt die Leiste an den <body>; deshalb darf sie Glas sein.
   Mittig über left/right + margin, nicht über transform: Das gehört der Einblendung. */
html[data-design="glas"] .pg-reise {
    position: fixed; z-index: 1200; left: var(--s-12); right: var(--s-12); bottom: calc(var(--leiste-unten, 0px) + var(--s-24));
    width: max-content; max-width: calc(100% - var(--s-24)); box-sizing: border-box; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8);
    padding: var(--s-6) var(--s-8) var(--s-6) var(--s-6);
    border: 1px solid var(--glas-kante); border-radius: 26px; background: var(--glas-stark); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    font-size: 13px; font-weight: 600; color: var(--ink);
    animation: pg-hoch .3s var(--feder) backwards;
}
html[data-design="glas"] .pg-reise[hidden] { display: none; }
/* Leiste und Meldung (.kmeldung) haben dieselbe Unterkante. Das Skript zeigt nie beide
   zugleich (eine neue Auswahl räumt die Meldung weg, eine Meldung hebt die Auswahl auf).
   Sollte es doch geschehen, rückt die Leiste über die Meldung, statt unter ihr zu liegen. */
html[data-design="glas"] body:has(> .kmeldung:not([hidden])) > .pg-reise {
    bottom: calc(var(--leiste-unten, 0px) + var(--s-24) + var(--s-32) + var(--s-32) + var(--s-8));
}
html[data-design="glas"] .pg-reise-wer { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: var(--s-8); padding-right: var(--s-6); }
html[data-design="glas"] .pg-reise-wer .pkreis { width: 36px; height: 36px; }

/* „Kommt noch: …" und „Neues Projekt" */
html[data-design="glas"] .pg-danach {
    margin-top: var(--s-14); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-10) var(--s-14);
    padding: var(--s-10) var(--s-10) var(--s-10) var(--s-18);
    border: 1px solid var(--glas-kante); border-radius: 22px; background: var(--glas); box-shadow: var(--shadow);
    font-size: 14px; color: var(--ink-2);
}
html[data-design="glas"] .pg-danach-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
html[data-design="glas"] .pg-danach-text b { color: var(--ink); }
html[data-design="glas"] .pg-danach-text a { color: var(--ink); font-weight: 600; text-decoration: none; }
html[data-design="glas"] .pg-danach-text a:hover { color: var(--accent-2); text-decoration: underline; }
html[data-design="glas"] .pg-pille {
    margin-left: auto; min-height: 40px; display: inline-flex; align-items: center; gap: var(--s-6); padding: 0 var(--s-16);
    border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: transform .2s var(--feder);
}
html[data-design="glas"] .pg-pille:hover { color: var(--paper); text-decoration: none; transform: scale(1.04); }
html[data-design="glas"] .pg-pille svg { width: 16px; height: 16px; display: block; }

/* --- Kalender eines Projekts (produktion/projekt-kalender.php): Monat und Jahr ---
   Die Seite bringt ihr Raster selbst mit; hier nur das Glas-Kleid. Die Stationsfarbe
   kommt als --cell-ink aus dem Markup — getönt statt Pastell, damit sie auch im Dunkeln trägt. */
html[data-design="glas"] .cal-grid.month { border-color: var(--glas-kante); border-radius: 22px; box-shadow: var(--shadow); }
html[data-design="glas"] .cal-month-cell .cell-shift {
    border-radius: 6px; border-left: 0;
    background: color-mix(in srgb, var(--cell-ink, var(--ink-3)) 20%, transparent);
    color: color-mix(in srgb, var(--cell-ink, var(--ink-3)) 55%, var(--ink));
}
html[data-design="glas"] .year-month { border-color: var(--glas-kante); border-radius: 18px; background: var(--glas); box-shadow: var(--shadow); }

@keyframes pg-rein { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes pg-auf  { from { opacity: 0; transform: scale(0.6); } }
@keyframes pg-hoch { from { opacity: 0; transform: translateY(10px); } }
@keyframes pg-puls { from { transform: scale(1.14); } }

/* Zwei Karten nebeneinander brauchen Platz für fünf bis sieben Spalten. */
@media (max-width: 1000px) {
    html[data-design="glas"] .pg-zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s-14); }
    html[data-design="glas"] .pg-gross { min-height: 0; }
}
/* Handy: die Tage als Zeilen — links der Tag, rechts die Leute. */
@media (max-width: 640px) {
    html[data-design="glas"] .pg-gross { border-radius: 24px; }
    html[data-design="glas"] .pg-kopf { gap: var(--s-10); padding: var(--s-14) var(--s-10) var(--s-14) var(--s-16); border-radius: 23px 23px 0 0; }
    html[data-design="glas"] .pg-zahl b { font-size: 24px; }
    html[data-design="glas"] .pg-tage { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-10); }
    html[data-design="glas"] .pg-tage > .pg-tag { flex-direction: row; align-items: flex-start; gap: var(--s-8); padding: var(--s-8) var(--s-10); border-radius: 16px; }
    html[data-design="glas"] .pg-tag-name { flex: 0 0 auto; width: 44px; min-height: 40px; flex-wrap: wrap; align-content: center; gap: 0 var(--s-4); }
    html[data-design="glas"] .pg-leute { width: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
    /* In der Zeile stehen die Ziele neben den Leuten — so breit wie ihr Text, nie breiter als die Zeile. */
    html[data-design="glas"] .pg-ziel { flex: 0 1 auto; width: auto; min-width: 64px; max-width: 100%; }
    html[data-design="glas"] .pg-fuss { flex-wrap: wrap; padding: 0 var(--s-10) var(--s-12); }
    html[data-design="glas"] .pg-fuss .pk-cta { flex: 1 1 100%; }
    html[data-design="glas"] .pg-reise { width: auto; bottom: calc(var(--leiste-unten, 0px) + var(--s-16)); border-radius: 22px; }
    /* Am Handy bricht die Meldung um und wird höher. */
    html[data-design="glas"] body:has(> .kmeldung:not([hidden])) > .pg-reise {
        bottom: calc(var(--leiste-unten, 0px) + var(--s-16) + var(--s-32) + var(--s-32) + var(--s-32) + var(--s-8));
    }
    html[data-design="glas"] .pg-reise-wer { flex: 1 1 100%; }
    html[data-design="glas"] .pg-reise .btn { flex: 1 1 auto; }
    html[data-design="glas"] .pg-danach { padding: var(--s-10); }
    html[data-design="glas"] .pg-pille { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .pk-karte,
    html[data-design="glas"] .pk-kachel,
    html[data-design="glas"] .pk-neu-kachel,
    html[data-design="glas"] .pk-cta,
    html[data-design="glas"] .pg-pille,
    html[data-design="glas"] .pg-person,
    html[data-design="glas"] .pg-person .pkreis { transition: none; }
    html[data-design="glas"] .pk-karten > .pk-karte,
    html[data-design="glas"] .pg-gross,
    html[data-design="glas"] .pg-ziel,
    html[data-design="glas"] .pg-ziel-rund,
    html[data-design="glas"] .pg-reise { animation: none; }
}