Kunden-Reiter Funktionen als Tabelle mit Textaktionen, Bestaetigung als eigene Zeile

Alle Funktionen als eine Tabelle: Projektzeile, Funktionszeilen mit Status, Ticket (ticketPath) und Textaktionen, Bestaetigung, Einbauanleitung und Zustimmung in Textform als Zeilen darunter, Webshop-Anfrage als Block unter der Tabelle. Alle .funktionen-*-Regeln aus admin-areas.css in den Block Kunden (P4), Handy mit Zweispalten-Zeilen.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/styles/global.css

@@ -1060,6 +1060,56 @@ button.link { font-weight: 500; } /* font: inherit setzt sonst das Gewicht von .
 .kunde-sub .badge { margin-right: 8px; vertical-align: top; }
 /* Reiter "Abo & Angebote": Abstand zwischen Abo-Status und Angeboten (der Umschlag ist ein div, .page section + section greift dort nicht) */
 .kunde-abo-angebote { margin-top: 36px; }
+/* Reiter "Funktionen": eine Tabelle, je Projekt eine Gruppenzeile; Bestaetigung und Panels sind Zusatzzeilen direkt unter der Funktionszeile */
+.funktionen-group th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text); padding-top: 20px; overflow-wrap: anywhere; white-space: normal; }
+.funktionen-group .link { font-size: 13px; font-weight: 400; margin-left: 8px; }
+.funktionen-sitekey { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
+.funktionen-sitekey code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; user-select: all; }
+.funktionen-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
+.funktionen-confirm td { padding-top: 0; }
+.funktionen-note { width: 100%; max-width: 260px; }
+/* Zeilen einer Gruppe (Funktionszeile, Bestaetigung, Panels): nur die letzte behaelt die Haarlinie */
+.funktionen-offen td { border-bottom: 0; }
+.funktionen-extra td { padding-top: 0; }
+.funktionen-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--bg-subtle); border-radius: var(--radius); }
+.funktionen-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
+.funktionen-panel-warnungen { margin: 0; padding-left: 18px; }
+.funktionen-panel-abschnitt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; }
+.funktionen-panel-abschnitt > summary { padding: 8px 12px; cursor: pointer; font-weight: 600; }
+.funktionen-panel-abschnitt pre {
+  margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); max-width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text);
+  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text;
+}
+/* Oeffnungszeiten live (Panel unter der Funktionszeile): Team-Formular und Ersatz-HTML */
+.funktionen-panel-form { display: flex; flex-direction: column; gap: 8px; }
+.funktionen-panel-feld { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
+.funktionen-panel-html { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; min-height: 120px; }
+.funktionen-zustimmung { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
+.funktionen-zustimmung input { flex: none; margin-top: 3px; width: 15px; height: 15px; accent-color: var(--accent); }
+.funktionen-vorlage summary { cursor: pointer; }
+.funktionen-vorlage p { margin: 6px 0; white-space: pre-wrap; }
+.funktionen-msg { margin-top: 12px; }
+/* Webshop-Anfrage je Projekt unter der Tabelle: ein Block je Eintrag, dazwischen eine Haarlinie */
+.funktionen-shop { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
+.funktionen-shop + .funktionen-shop { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
+.funktionen-shop dd { white-space: pre-wrap; }
+.funktionen-begruendung { width: 100%; max-width: 560px; }
+@media (min-width: 861px) {
+  .funktionen-shop .kv { grid-template-columns: max-content minmax(0, 1fr); }
+}
+/* Handy: Kopf nur fuer Screenreader, jede Funktionszeile als zwei Spalten (Name | Status, Ticket, Aktionen untereinander) */
+@media (max-width: 860px) {
+  .funktionen-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .funktionen-table, .funktionen-table tbody, .funktionen-table tr, .funktionen-table td, .funktionen-table th { display: block; }
+  .funktionen-table .funktionen-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
+  .funktionen-table .funktionen-zeile.funktionen-offen { border-bottom: 0; }
+  .funktionen-zeile > td { grid-column: 2; min-width: 0; padding: 0; border-bottom: 0; }
+  .funktionen-zeile > td:first-child { grid-column: 1; grid-row: 1; }
+  .funktionen-zeile > td:empty, .funktionen-zeile > .funktionen-ohne-ticket { display: none; }
+  .funktionen-confirm td { padding-bottom: 12px; }
+  .funktionen-extra td { padding-bottom: 12px; }
+}
 /* ===== ENDE Kunden (P4) ===== */
 
 /* ===== KOMPAT (bis P10) ===== */