@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
:root {
/* Standard-Theme ist dunkel (Kunden-/Login-Seiten haben keinen Umschalter
und bleiben immer so). color-scheme sagt dem Browser, native Widgets wie
den Datums-Picker ebenfalls im dunklen Erscheinungsbild zu zeichnen -
ohne das rendert der Browser sie trotzdem in SEINEM Standard-Hell-Design,
was als grell-weisser Fremdkoerper auffaellt (z.B. bei den Datumsfeldern
in "Abwesenheiten"). Betrifft nur deren eigene Optik (Picker-Popup,
Scrollbars), nicht unsere eigenen CSS-Farben - fuer Admin/Mitarbeiter
ueberschreibt :root[data-theme="light"] weiter unten diese Variablen samt
color-scheme fuer den hellen Modus. */
color-scheme: dark;
--bg: #1a1b1c;
--card: #232527;
--card-hover: #2a2c2f;
--border: #35383b;
--text: #f5f5f5;
--muted: #a7abaf;
--accent: #f06800;
--accent-hover: #d75c00;
--accent-text: #1a1b1c;
--success: #3ecf76;
--success-bg: rgba(62, 207, 118, 0.12);
--warning: #f0b400;
--warning-bg: rgba(240, 180, 0, 0.12);
--danger: #ff5c5c;
--danger-bg: rgba(255, 92, 92, 0.12);
/* Eigene Tokens fuer deaktivierte Buttons (button.primary:disabled/
button.danger:disabled) - vorher feste Hex-Werte, die im hellen Modus
nicht mitgewechselt sind und dort wie ein dunkler Fleck aussahen
(echter Befund aus dem Code-Review). */
--primary-disabled-bg: #57493a;
--danger-disabled-bg: #7a4a4a;
}
/* Heller Modus, nur fuer Admin- und Mitarbeiterbereich (siehe .theme-toggle
in admin.html/mitarbeiter.html) - Kunden-/Login-Seiten bleiben bewusst
dunkel, dafuer gibt es dort keinen Umschalter. [data-theme] sitzt auf
, damit ein kleines Inline-Script im (vor dem ersten Rendern)
den gespeicherten Modus setzen kann, ohne dass kurz das falsche Theme
aufblitzt. Da alle Farben ausschliesslich ueber diese Variablen laufen,
reicht es, sie hier zu ueberschreiben - der Rest der Seite folgt automatisch. */
:root[data-theme="light"] {
color-scheme: light;
--bg: #f3f4f5;
--card: #ffffff;
--card-hover: #eef0f2;
--border: #dde1e5;
--text: #1a1b1c;
--muted: #6b7280;
--accent: #f06800;
--accent-hover: #d75c00;
--accent-text: #1a1b1c;
--success: #15803d;
--success-bg: rgba(21, 128, 61, 0.1);
--warning: #a15c00;
--warning-bg: rgba(161, 92, 0, 0.1);
--danger: #dc2626;
--danger-bg: rgba(220, 38, 38, 0.08);
--primary-disabled-bg: #e4d9cc;
--danger-disabled-bg: #f0d5d5;
}
/* .card-accent's dezenter weisser Rand ist fuer dunkle Karten gedacht und
auf einer weissen Karte praktisch unsichtbar - im hellen Modus stattdessen
ein dunkler Rand fuer dieselbe Wirkung (etwas Kontur am Kartenrand). */
:root[data-theme="light"] .card-accent { border-color: rgba(0, 0, 0, 0.08); }
/* Das dekorative Gitter-Hintergrundbild ist fuer den dunklen Hintergrund
gezeichnet (heller Verlauf) - auf hellem Grund wuerde es wie ein
Darstellungsfehler aussehen statt wie eine dezente Textur. */
:root[data-theme="light"] body { background-image: none; }
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Outfit", Arial, sans-serif;
background: var(--bg) url("/static/img/grid-bg.svg") bottom center / cover repeat-x;
color: var(--text);
/* Footer (site-footer + legal-links) soll am unteren Bildschirmrand kleben,
wenn der Seiteninhalt kurz ist (z.B. nach dem Stornieren), statt direkt
unter dem Inhalt zu haengen - bei langen Seiten scrollt er normal mit */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wrap {
/* width:100% statt "auto": .wrap ist seit dem Sticky-Footer-Flex-Layout
auf body ein Flex-Item mit auto-Seitenraendern zur Zentrierung - bei
width:auto deaktivieren diese Raender das Stretchen und .wrap schrumpft
dann auf die Breite seines schmalsten Inhalts (z.B. beim kurzen "Lade
Termine…"-Text), was die ganze Karte sichtbar in der Breite springen
liess. Mit width:100% bleibt die Breite unabhaengig vom Inhalt fix. */
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 24px 20px 24px;
flex: 1 0 auto;
}
/* Admin-Oberfläche braucht mehr Breite für die Tabellen als die schmale,
bewusst enge Buchungsseite. Bewusst eine FESTE Breite (nicht
fit-content/prozentual) - jede Admin-Seite (Kalender, Mitarbeiter,
Dienste, Zusatzfelder, Verfuegbarkeit, Buchungen) reserviert dadurch
immer denselben Platz, egal ob ihr eigener Inhalt so breit ist oder
nicht. So verhalten sich alle Seiten beim Verkleinern des Fensters
identisch: sie scrollen alle ab genau derselben Fensterbreite horizontal
(statt jede Seite je nach ihrem eigenen Inhalt an einem anderen Punkt). */
.wrap-admin { width: 1080px; max-width: none; }
.login-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
.login-wrap .brand-logo { height: 64px; }
.login-card { width: 100%; max-width: 380px; margin-top: 12px; }
/* Kundenseiten (Buchung, Storno, Meine Termine): bewusst breiter und mit
groesserer Schrift/Logo als der generische Rahmen, damit auf einem
normalen Desktop-Monitor nichts zu klein wirkt. Admin bleibt unberuehrt. */
.wrap-booking { max-width: 880px; }
.wrap-booking .brand-logo { height: 52px; }
.wrap-booking .logo { font-size: 1.7rem; }
.wrap-booking h1 { font-size: 1.9rem; }
.wrap-booking .subtitle { font-size: 1.05rem; }
.wrap-booking .section-box-header h3 { font-size: 1.15rem; }
.wrap-booking .section-box-icon { width: 30px; height: 30px; }
.wrap-booking .section-box-icon svg { width: 16px; height: 16px; }
.wrap-booking label { font-size: 0.95rem; }
.wrap-booking select,
.wrap-booking input,
.wrap-booking textarea { font-size: 1.05rem; padding: 12px 14px; }
.wrap-booking button.primary,
.wrap-booking button.outline { font-size: 1.1rem; padding: 14px 22px; }
.wrap-booking button.secondary { font-size: 1rem; padding: 11px 20px; }
.wrap-booking .type-toggle { font-size: 1rem; padding: 12px 14px; }
.wrap-booking .msg-body { font-size: 1rem; }
.wrap-booking .trust-note { font-size: 0.9rem; }
.wrap-booking .muted { font-size: 0.92rem; }
.wrap-booking .slot-btn { font-size: 0.95rem; padding: 10px 8px; }
.wrap-booking .day-heading { font-size: 1rem; }
.wrap-booking .calendar-weekdays { font-size: 0.78rem; }
.wrap-booking .cal-day { height: 36px; font-size: 0.92rem; }
.wrap-booking .home-cta { font-size: 1.1rem; padding: 16px 32px; }
@media (min-width: 601px) {
.wrap-booking .picker { gap: 32px; }
.wrap-booking .picker .calendar { flex: 0 0 300px; }
}
/* Admin-Layout: linke Seitenleiste + Inhalt, es wird jeweils nur EIN
Bereich (.admin-page) angezeigt statt einer langen Scroll-Seite */
.admin-layout {
display: flex;
align-items: flex-start;
}
.admin-sidebar {
/* position:sticky (nur "top" gesetzt, kein "left"): klebt beim vertikalen
Scrollen oben an, wandert aber ganz normal mit, wenn die breiten
Admin-Tabellen die Seite horizontal scrollen lassen (siehe .table-scroll
weiter unten) - die Seitenleiste ist dann Teil der Seite und verschiebt
sich mit ihr, statt am Viewport fixiert zu bleiben. */
position: sticky;
top: 0;
align-self: flex-start;
width: 230px;
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 24px 12px;
background: var(--card);
border-right: 1px solid var(--border);
}
/* Fest oben rechts auf der Seite (Rueckmeldung: "die sonne mond zeichen
sollen oben rechts auf die seite", dann "der abmelden button auch") -
ausserhalb von .admin-layout, damit beide beim Scrollen des Seiteninhalts
an Ort und Stelle bleiben, unabhaengig von Sidebar/Content-Bereich. */
.top-bar {
position: fixed;
top: 16px;
right: 20px;
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
}
.top-bar-logout {
color: var(--muted);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 14px;
height: 36px;
display: flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card);
}
.top-bar-logout:hover { border-color: var(--accent); color: var(--text); }
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card);
color: var(--muted);
cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--text); }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: block; }
.admin-sidebar a {
padding: 10px 14px;
border-radius: 8px;
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
}
.admin-sidebar a:hover { background: var(--card-hover); color: var(--text); }
.admin-sidebar a.active {
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
/* Logo oben in der Leiste: schmaler als der generische Header, deshalb
kleiner und ohne Umbruchrisiko */
.admin-sidebar .brand {
padding: 0 14px;
margin-bottom: 18px;
}
.admin-sidebar .brand-logo { height: 68px; }
.admin-sidebar .logo { font-size: 1.05rem; }
/* Eigener Flex-Column-Kontext, damit .wrap-admin (flex:1 0 auto, siehe .wrap)
den verfuegbaren Platz einnimmt und .site-footer wie auf den Kundenseiten
ganz unten klebt, wenn der Seiteninhalt kuerzer als der Bildschirm ist
(z.B. bei wenigen Zusatzfeldern) - bei langem Inhalt scrollt es stattdessen
normal wie gewohnt. */
.admin-content {
flex: 1;
min-width: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.admin-page { display: none; }
.admin-page.active { display: block; }
/* go-eCommerce-Logo + Produkt-Wordmark nebeneinander */
.brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.brand-logo {
height: 40px;
width: auto;
flex-shrink: 0;
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
/* Wordmark im Stil von "go eCommerce": "go" + Produktname ohne Leerzeichen ("goBooking") */
.logo {
display: flex;
align-items: baseline;
font-weight: 700;
font-size: 1.4rem;
text-decoration: none;
}
.logo .go { color: var(--text); font-weight: 400; }
.logo .product, h1 .product { color: var(--accent); }
h1 { font-size: 1.4rem; margin-bottom: 4px; font-weight: 600; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
.subtitle { color: var(--muted); margin-top: 0; margin-bottom: 10px; }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
}
/* Buchungsseite: Hauptkarte mit warmem orangem Verlauf aus der Ecke,
im Stil der go-eCommerce-Trust-Boxen */
/* Feste Pixel-Stops statt Prozent, damit der Verlauf bei unterschiedlich
hohen Karten (Terminauswahl vs. Formular) gleich aussieht */
.card-accent {
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: 16px;
background: linear-gradient(135deg, rgba(240, 104, 0, 0.2) 0, rgba(240, 104, 0, 0.1) 220px, var(--card) 420px) padding-box;
}
.trust-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 0.82rem;
margin: -4px 0 8px;
}
.trust-note svg { flex-shrink: 0; color: var(--success); }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
select, input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
margin-bottom: 16px;
background: var(--bg);
color: var(--text);
font-family: inherit;
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
/* Browser (Chrome/Edge) ersetzen den Hintergrund automatisch ausgefuellter
Felder durch ein hartes Weiss, sobald sie einen Wert erkennen (z.B. beim
Buchungsformular Name/E-Mail per gespeicherter Adresse) - das
background-color direkt zu setzen wirkt dort nicht, nur der
box-shadow-inset-Trick ueberschreibt es zuverlaessig. Firefox nutzt
stattdessen die Standard-Pseudoklasse :autofill und respektiert
background-color normal. */
select:-webkit-autofill,
input:-webkit-autofill,
select:-webkit-autofill:hover,
input:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-webkit-autofill:focus,
select:-webkit-autofill:active,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
box-shadow: 0 0 0 1000px var(--bg) inset;
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
}
select:autofill, input:autofill {
background-color: var(--bg);
color: var(--text);
}
/* Markiert ein Pflichtfeld, das bei der Validierung leer war */
.field-error { border-color: var(--danger) !important; }
.field-error:focus { border-color: var(--danger) !important; }
.field-upload-status { margin: -10px 0 16px; }
/* Das native Uhr-/Kalender-Symbol in Zeit- und Datumsfeldern ist
standardmaessig dunkel gezeichnet und auf dem dunklen Hintergrund dieser
App praktisch unsichtbar - Filter faerbt es in Akzentfarbe ein, damit man
ueberhaupt sieht, wo man klicken kann. */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(48%) sepia(94%) saturate(1955%) hue-rotate(1deg) brightness(103%) contrast(105%);
cursor: pointer;
}
/* Eigener Datei-Auswahl-Button (Buchungsseite, Zusatzfelder vom Typ
"Datei") statt des nativen -Buttons - dessen Text
("Datei auswaehlen"/"Keine ausgewaehlt" bzw. "Choose file"/"No file
chosen") zeichnet der Browser selbst in DESSEN Sprache, nicht in der
Sprache der Seite (Rueckmeldung: "auf der Bookingseite ist datei
auswaehlen und keine ausgewaehlt noch auf deutsch"). Das native
bleibt unsichtbar im DOM als Datei-Halter, siehe customFieldHtml in
booking.js. */
.file-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.file-field-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.file-field-trigger {
background: var(--accent);
color: var(--accent-text);
border: none;
border-radius: 6px;
padding: 8px 14px;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
}
.file-field-trigger:hover { background: var(--accent-hover); }
.file-field-name { font-size: 0.9rem; word-break: break-all; }
/* markFieldError() (booking.js) setzt .field-error auf das native ,
das ist aber unsichtbar (siehe .file-field-input oben) - ohne diese Regel
wuerde ein Pflicht-Datei-Feld beim Absenden ohne Datei zwar den Fehler-
Toast zeigen, aber keinerlei sichtbare Markierung am Feld selbst (echter
Befund aus dem Code-Review). ~ setzt voraus, dass das im Markup
VOR Button/Dateiname steht (siehe customFieldHtml). */
.file-field-input.field-error ~ .file-field-trigger { outline: 2px solid var(--danger); outline-offset: 2px; }
.file-field-input.field-error ~ .file-field-name { color: var(--danger); }
.staff-contact {
display: flex;
align-items: center;
gap: 14px;
margin: -6px 0 14px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--card-hover);
}
.staff-contact-photo,
.staff-contact-initials {
width: 80px;
height: 80px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
border: 2px solid var(--accent);
}
/* CSS-Filter-Versuche (Kontrast-Boost, dann Unsharp-Mask per SVG) wurden
beide getestet und wieder verworfen - Kontrast brachte nichts, die
Unsharp-Mask machte es laut Rueckmeldung sogar schlechter (Halo-Artefakte
auf einem ohnehin schon weichen Foto). Das Problem liegt am Quellfoto,
nicht an CSS - siehe Projekt-Notizen. */
.staff-contact-initials {
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
font-size: 1.7rem;
}
.staff-contact-text { font-size: 0.95rem; color: var(--muted); }
.staff-contact-text strong { display: block; font-size: 1.05rem; color: var(--text); }
.personal-staff-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 4px 0 20px;
text-align: center;
}
.personal-staff-photo,
.personal-staff-initials {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent);
}
.personal-staff-initials {
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
font-size: 2.6rem;
}
.personal-staff-name { font-size: 1.1rem; color: var(--text); }
/* Mitarbeiter-Bereich (/mitarbeiter/): persoenlicher Willkommens-
Header mit eigenem Foto statt der bisherigen reinen Text-Ueberschrift. */
.portal-welcome {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.portal-welcome-photo,
.portal-welcome-initials {
width: 72px;
height: 72px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
border: 3px solid var(--accent);
}
.portal-welcome-initials {
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
font-size: 1.6rem;
}
.portal-photo-wrap { position: relative; flex-shrink: 0; }
.photo-edit-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-text);
border: 2px solid var(--card);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
line-height: 1;
cursor: pointer;
padding: 0;
}
.photo-edit-badge:hover { background: var(--accent-hover); }
/* Foto-Zuschnitt-Editor: runder Rahmen wie das eigentliche Profilfoto, das
Bild selbst wird per JS ueber transform: translate()/scale() verschoben
und skaliert (siehe mitarbeiter.js) - keine externe Cropper-Bibliothek. */
.photo-crop-viewport {
width: 220px;
height: 220px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: relative;
background: var(--card-hover);
border: 2px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.photo-crop-viewport.has-image { border-style: solid; border-color: var(--accent); cursor: grab; }
.photo-crop-viewport.dragging { cursor: grabbing; }
.photo-crop-viewport img {
position: absolute;
top: 0;
left: 0;
max-width: none;
user-select: none;
-webkit-user-drag: none;
touch-action: none;
}
.portal-welcome h1 { margin-bottom: 2px; }
.portal-welcome .subtitle { margin: 0; }
.portal-link-card {
text-align: center;
margin-bottom: 20px;
}
/* Kreisrunder Foto-Platzhalter (Mitarbeiter-Tabelle + "Mitarbeiter
hinzufügen"): vorher nur ein leerer gestrichelter Kreis ohne jeden
Hinweis, dass/wie man dort ein Foto setzen kann - jetzt mit Kamera-Icon,
das beim Hover in die Akzentfarbe wechselt. */
.photo-picker {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px dashed var(--border);
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.photo-picker:hover { border-color: var(--accent); color: var(--accent); }
.photo-picker svg { flex-shrink: 0; }
.portal-link-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.portal-link-text {
font-size: 1.25rem;
font-weight: 600;
word-break: break-all;
}
.copy-icon-btn {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
padding: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.copy-icon-btn svg { display: block; }
.copy-icon-btn:hover { color: var(--accent-hover); }
/* Kompakter oranger Button fuer einzelne Tabellen-Aktionen (z.B.
"Passwort zurücksetzen"), im Gegensatz zu den schlichten Text-Links
(zeigt sofort: das ist eine Aktion, kein reiner Info-Link). */
.btn-chip {
display: inline-block;
padding: 6px 12px;
border-radius: 6px;
background: var(--accent);
color: var(--accent-text);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.btn-chip:hover { background: var(--accent-hover); }
/* Fuer "speichern"/"abbrechen" NEBEN den kompakten 32px-Feldern einer
Inline-Bearbeiten-Zeile (Abwesenheiten, Arbeitszeiten) - der normale
.btn-chip ist mit seinem eigenen Padding/Font-Size 4px niedriger als
diese Felder und fiel dadurch weiterhin aus der Reihe, obwohl die
Felder selbst schon einheitlich waren. Nur dort per Zusatzklasse
aktiviert, .btn-chip bleibt ueberall sonst (z.B. Listen-Aktionen) in
seiner bisherigen, kleineren Groesse. */
.btn-chip--row { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* Zusammengefasstes Link-Menü in der Mitarbeiter-Tabelle: ein Icon statt
mehrerer einzelner Icons/Spalten nebeneinander (Buchungslink, Portal-Link,
Portal-Link zuruecksetzen sassen vorher als separate Icons in zwei
Spalten). */
.link-menu { position: relative; }
.link-menu summary {
display: flex;
align-items: center;
color: var(--accent);
cursor: pointer;
list-style: none;
}
.link-menu summary::-webkit-details-marker { display: none; }
.link-menu summary:hover { color: var(--accent-hover); }
.link-menu summary svg { display: block; }
.link-menu-list {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 20;
display: flex;
flex-direction: column;
min-width: 190px;
background: var(--card-hover);
border: 1px solid var(--border);
border-radius: 8px;
padding: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.link-menu-list a {
display: block;
padding: 7px 10px;
border-radius: 6px;
font-size: 0.85rem;
text-decoration: none;
white-space: nowrap;
}
.link-menu-list a:hover { background: var(--card); }
.portal-stats {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.portal-stat {
flex: 1;
min-width: 140px;
background: var(--card-hover);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.portal-stat-value { display: block; font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.portal-stat-next .portal-stat-value { font-size: 1rem; font-weight: 600; color: var(--text); }
.portal-stat-label { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 600px) {
.portal-welcome { flex-direction: column; text-align: center; }
}
input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--accent);
vertical-align: middle;
}
/* Flex statt Grid mit 1fr-Spalten: bei wenigen Terminen sonst wenige,
ueber die ganze Zeile verzerrte Buttons statt kompakt gepackter Zeiten */
.slots-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Nimmt die Hoehe, die nach der (fixen) Tages-Ueberschrift noch bleibt, und
scrollt bei mehr Terminen als Platz - die Karte selbst waechst nicht mit */
.day-slots .slots-scroll { flex: 1; overflow-y: auto; padding-right: 4px; }
/* "Lade Termine…" / "keine Termine an diesem Tag": ohne Tages-Ueberschrift
direktes Kind von #day-slots, soll die Restflaeche trotzdem ausfuellen
statt oben klein anzukleben */
.day-slots > p.muted { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
.slot-btn {
flex: 0 0 auto;
min-width: 78px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
color: var(--text);
cursor: pointer;
font-size: 0.85rem;
font-family: inherit;
}
.slot-btn:hover { border-color: var(--accent); }
.slot-btn.selected { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.day-heading { font-weight: 600; font-size: 0.9rem; margin: 0 0 8px; }
/* Terminauswahl: Kalender links, Uhrzeiten rechts, damit ohne Scrollen sichtbar.
align-items: stretch statt flex-start, damit die Zeiten-Box IMMER exakt so
hoch ist wie der Kalender (der dank 6-Zeilen-Auffuellung in renderCalendar()
selbst nie die Hoehe aendert) - unabhaengig davon, ob gerade "Lade
Termine…" steht, ein Mitarbeiter wenig frei hat oder ein Tag ausgewaehlt
wird. Die Karte selbst bleibt dadurch immer gleich gross, nur der Inhalt
der Zeiten-Box wechselt (und scrollt bei Bedarf intern). */
.picker {
display: flex;
gap: 24px;
align-items: stretch;
}
.picker .calendar { flex: 0 0 252px; }
.picker .day-slots {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
@media (max-width: 600px) {
.picker { flex-direction: column; gap: 12px; }
.picker .calendar { flex: none; width: 100%; max-width: 300px; }
.picker .day-slots { width: 100%; }
}
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-weight: 600;
font-size: 0.9rem;
text-transform: capitalize;
}
.cal-nav {
background: none;
border: 1px solid var(--border);
color: var(--text);
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
line-height: 1;
font-family: inherit;
padding: 0;
}
.cal-nav:hover:not(:disabled) { border-color: var(--accent); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
color: var(--muted);
font-size: 0.7rem;
margin-bottom: 4px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.cal-day {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 5px; /* Platz fuer den Verfuegbarkeits-Punkt, damit er nicht auf der Zahl liegt */
border-radius: 6px;
font-size: 0.8rem;
color: var(--border);
position: relative;
border: 1px solid transparent;
}
.cal-day.empty { visibility: hidden; }
.cal-day.available {
color: var(--text);
cursor: pointer;
border-color: var(--border);
}
.cal-day.available:hover { border-color: var(--accent); }
.cal-day.available::after {
content: "";
position: absolute;
bottom: 4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
}
.cal-day.selected {
background: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
font-weight: 600;
}
.cal-day.selected::after { background: var(--accent-text); }
.booking-form #selected-slot-label { margin: 0 0 8px; color: var(--accent); }
.booking-form-fields {
display: flex;
gap: 10px;
align-items: flex-end;
margin-bottom: 10px;
}
.booking-form-fields .field {
flex: 1;
min-width: 0; /* erlaubt Schrumpfen, ohne dass die Felder kollabieren */
}
.booking-form .field input,
.booking-form .field textarea { margin-bottom: 0; }
/* Anliegen-Feld und Button in einer Zeile, damit die Seite nicht laenger wird */
.booking-form-submit {
display: flex;
gap: 10px;
align-items: flex-end;
}
.booking-form-submit .field { flex: 1; min-width: 0; }
/* .primary hat sonst width:100% und wuerde das Textfeld zusammendruecken */
.booking-form-submit button.primary {
width: auto;
white-space: nowrap;
flex: 0 0 auto;
}
@media (max-width: 600px) {
.booking-form-submit { flex-direction: column; align-items: stretch; }
.booking-form-submit button.primary { width: 100%; }
}
textarea {
display: block; /* verhindert die 4px Zeilen-Luecke unter dem Feld */
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.95rem;
background: var(--bg);
color: var(--text);
font-family: inherit;
resize: vertical;
min-height: 42px;
}
textarea:focus { outline: none; border-color: var(--accent); }
@media (max-width: 600px) {
.booking-form-fields { flex-direction: column; align-items: stretch; }
}
/* Auswahl Telefonisch/Teams beim Buchen - Segmented Control, nur eine Option aktiv */
.type-picker { display: flex; gap: 8px; margin-bottom: 16px; }
.type-toggle {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
color: var(--muted);
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
font-family: inherit;
}
.type-toggle:hover { border-color: var(--accent); }
.type-toggle svg { flex-shrink: 0; }
.type-toggle.on {
background: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
}
button.primary {
background: var(--accent);
color: var(--accent-text);
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
width: 100%;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { background: var(--primary-disabled-bg); color: var(--muted); cursor: not-allowed; }
button.secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
padding: 10px 18px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
width: auto;
}
button.secondary:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.5; }
button.secondary:disabled:hover { background: transparent; color: var(--muted); border-color: var(--border); }
button.secondary:hover {
background: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
}
/* Wie "Support buchen" auf store.go-ecommerce.de: dunkler Hintergrund,
dezenter weißer Rand, kein Orange-Hover - für gleichrangige Aktionen
wie Termin verschieben/stornieren */
button.outline {
background: var(--bg);
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 12px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
button.outline:hover { background: var(--card-hover); border-color: rgba(255, 255, 255, 0.3); }
/* Fuer zerstoerende Sammel-Aktionen (z.B. "Ausgewählte stornieren") - deutlich
sichtbar in der Warnfarbe, damit der Button nicht mit den eher dezenten
secondary/outline-Buttons verwechselt oder uebersehen wird */
button.danger {
background: var(--danger);
color: #1a1b1c;
border: none;
padding: 10px 18px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
width: auto;
}
button.danger:hover { background: #e64545; }
button.danger:disabled { background: var(--danger-disabled-bg); color: var(--muted); cursor: not-allowed; }
/* Sammel-Aktionsleiste (Mehrfachauswahl stornieren): eigener Hintergrund in
der Warnfarbe, damit sie beim Erscheinen sofort auffaellt statt im
restlichen Seiteninhalt untergehen zu koennen */
.bulk-bar {
display: flex;
align-items: center;
gap: 12px;
background: var(--danger-bg);
border: 1px solid rgba(255, 92, 92, 0.25);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 16px;
}
.bulk-bar p { margin: 0; flex: 1; color: var(--text); font-weight: 500; }
/* Bestaetigungs-/Fehlermeldungen erscheinen als Toast unten rechts im
Fenster statt im normalen Seitenfluss - dadurch verschieben sie
umliegende Inhalte nicht und fallen trotzdem sofort auf. #message ist
quer durch die App derselbe Container (Buchung, Admin, Mitarbeiter,
Anmeldung, Storno, Meine Termine). */
#message {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1100;
width: calc(100% - 40px);
max-width: 380px;
}
#message:empty { display: none; }
/* Im Stil der "Kleiner Tipp"-Box auf store.go-ecommerce.de: Icon-Chip
links, dünner Rand in der Statusfarbe statt nur Hintergrundfläche */
.msg {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 0;
border: 1px solid transparent;
background: var(--card);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.msg-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.msg-icon svg { width: 16px; height: 16px; }
.msg-body { flex: 1; min-width: 0; color: var(--text); font-size: 0.92rem; line-height: 1.45; }
.msg-action {
display: block;
width: fit-content;
margin-top: 10px;
padding: 6px 16px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-text);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
}
.msg-action:hover { background: var(--accent-hover); }
.msg.success { background: var(--success-bg); border-color: rgba(62, 207, 118, 0.25); }
.msg.success .msg-icon { background: rgba(62, 207, 118, 0.15); color: var(--success); }
.msg.error { background: var(--danger-bg); border-color: rgba(255, 92, 92, 0.25); }
.msg.error .msg-icon { background: rgba(255, 92, 92, 0.15); color: var(--danger); }
.msg.info { background: rgba(240, 104, 0, 0.08); border-color: rgba(240, 104, 0, 0.2); }
.msg.info .msg-icon { background: rgba(240, 104, 0, 0.15); color: var(--accent); }
/* Nach erfolgreicher Buchung: statt des Kalenders steht hier ein grosser
Button zurueck zur Hauptseite, mit Farbverlauf + Hover-Anhebung */
.success-actions { text-align: center; margin: 24px 0; }
/* "Zum Kalender hinzufuegen": dezenter als der grosse home-cta-Button
(gleiche optische Sprache wie button.outline), damit der Blick zuerst auf
der Bestaetigung landet, bevor er zu den drei kleineren Kalender-Links
wandert. */
.calendar-links-label { margin: 0 0 10px; }
.calendar-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 22px;
}
.calendar-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 8px;
background: var(--bg);
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.calendar-link:hover { background: var(--card-hover); border-color: rgba(255, 255, 255, 0.3); }
.calendar-link svg { flex-shrink: 0; }
/* Eigener Kalender-Picker (static/js/datepicker.js) statt des nativen
-Popups - der laesst sich nicht umfaerben oder
abrunden (reines Browser-Element, wie ein