/** * smartEngin MeetMix — die Buchungsstrecke im Frontend. * * DIE eine Stilquelle fürs Frontend, nach der verbindlichen Vorlage * _design/frontend-buchung.html. Wer eine Seite mit eigenem CSS baut, * macht es falsch. * * Zwei Abweichungen von der Vorlage, beide notwendig: * * 1. JEDE Klasse trägt das Präfix seca- (die Vorlage nutzt .tag, .zeit, * .meta, .knopf — solche Namen kollidieren mit jedem Theme). Die Optik * ist unverändert, nur die Namen. * 2. Ein Zurücksetzen ganz oben: Themes bringen eigene Regeln für Knöpfe, * Auswahlfelder und Listen mit. Ohne das Zurücksetzen werden aus den * quadratischen Tageskacheln der Vorlage hohe Kästen (genau so von * Pierre am 11.08.2026 im Browser gefunden). * * WICHTIG zur Reihenfolge: Das Zurücksetzen unten wiegt 0-1-1. Jede eigene * Regel für einen Knopf muss deshalb mit ".seca-buchung " beginnen (0-2-0), * sonst gewinnt das Zurücksetzen gegen die eigene Gestaltung. * Der Zusatz ":where(:not(…))" hält es von FREMDEN Knöpfen fern, OHNE das * Gewicht zu verändern — ":where()" zählt nichts. Genau darauf kommt es an, * siehe die Begründung am Block selbst. * * Geladen wird die Datei NUR auf Seiten mit einer Kalenderfunktion * (Konzept §9.9). */ .seca-buchung { /* Hausfarben (Vorlage). Bewusst hier und nicht als Inline-Stil: zusammengesetzte Werte überleben den WordPress-Filter nicht. */ --seca-b-dunkel: #11314A; --seca-b-gruen: #37B971; --seca-b-gruen-dunkel: #2fa563; --seca-b-hellgruen: #4ED66F; --seca-b-hellblau: #8FD3FF; --seca-b-karte: #f3f8f5; --seca-b-rahmen: #d9e6de; --seca-b-rot: #D64545; --seca-b-grau: #6b7c88; --seca-b-radius: 16px; margin-left: auto; margin-right: auto; color: var(--seca-b-dunkel); font-size: 14px; line-height: 1.5; text-align: left; } /* Die Breite kommt aus Einstellungen → Design (wp_add_inline_style). * * Der Klassenname steht ABSICHTLICH zweimal da: Block-Themes setzen auf * denselben Bereich eine eigene Höchstbreite (bei smartengin.de 1240 px) * mit demselben Gewicht wie eine einfache Klasse — dann entscheidet die * Reihenfolge der Dateien, und das Theme gewinnt. Der Kalender war dadurch * 1240 statt 980 Pixel breit und wirkte viel zu groß (Pierre, 11.08.2026). * Zweimal derselbe Name wiegt schwerer und beendet den Streit. */ .seca-buchung.seca-buchung { max-width: var(--seca-b-breite, 980px); } .seca-buchung *, .seca-buchung *::before, .seca-buchung *::after { box-sizing: border-box; } /* ---------- Zurücksetzen: das Theme soll hier nicht hineinregieren ---------- ABER: Es darf auch nicht in ein FREMDES Plugin hineinregieren. Pierres Fund vom 15.08.2026: Auf der Terminseite steht der Kaufkasten von „smartEngin buy". Dessen Knöpfe heißen `.sels-btn` (Gewicht 0-1-0), das Zurücksetzen hier `.seca-buchung button` (Gewicht 0-1-1) — also gewann das Zurücksetzen, und aus den Bezahlknöpfen wurde nackter Text. Genau davor warnt der Kopf dieser Datei, nur eben für die EIGENEN Knöpfe. Gegenmittel: Alles, was eine `sels-`-Klasse trägt, bleibt unangetastet. **Und zwar mit `:where(:not(…))`, nicht mit `:not(…)` allein** — das ist der springende Punkt und hat am 15.08.2026 einen zweiten Anlauf gekostet: Ein blankes `:not([class*="sels-"])` hebt das Gewicht auf 0-2-1. Damit schlug das Zurücksetzen plötzlich die EIGENEN Knopf-Regeln (`.seca-buchung .seca-b-knopf`, `.seca-buchung .seca-b-zeit` — beide 0-2-0): Die Uhrzeit-Kacheln verloren ihren Rahmen und aus „Termin verbindlich buchen" wurde eine Textzeile (Pierres Fund). `:where()` zählt beim Gewicht NICHTS — die Ausnahme greift, das Gewicht bleibt bei 0-1-1 wie seit 0.3.3. Genau davor warnt der Kopf dieser Datei. ------------------------------------------------------------------------- */ .seca-buchung button:where(:not([class*="sels-"])) { margin: 0; padding: 0; border: 0; border-radius: 0; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; background-color: transparent; background-image: none; box-shadow: none; color: inherit; font: inherit; line-height: 1.4; text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal; cursor: pointer; } .seca-buchung select:where(:not([class*="sels-"])) { margin: 0; max-width: 100%; min-height: 0; height: auto; box-shadow: none; font: inherit; line-height: 1.4; text-transform: none; letter-spacing: normal; } .seca-buchung ul:where(:not([class*="sels-"])) { list-style: none; margin: 0; padding: 0; } /* Kein Textschatten im Kalender. * * **Pierres Fund vom 18.09.2026:** Auf einer Kundenseite steht in Elementors * globalen Knopf-Einstellungen ein Textschatten (`0 0 10px`, 30 % Schwarz). * Der liegt hinter JEDEM Knopftext der Seite — also hinter jeder * Kalenderzahl, jeder Uhrzeit und der Schrift im Buchungsknopf. Alle Ziffern * sahen dadurch verschwommen aus, als hätte jemand den Bildschirm * angehaucht. Das Zurücksetzen weiter oben hatte nur `box-shadow`, nicht * `text-shadow`. * * Zwei Zeilen, weil ein Schatten auf zwei Wegen hereinkommt: geerbt vom * `body` (die erste Zeile stoppt das Erben) und direkt am Knopf gesetzt (die * zweite). Das Plugin selbst benutzt nirgends einen Textschatten, hier kann * also nichts Eigenes verlorengehen. */ .seca-buchung.seca-buchung, .seca-buchung.seca-buchung button:where(:not([class*="sels-"])), .seca-buchung.seca-buchung input:where(:not([class*="sels-"])), .seca-buchung.seca-buchung select:where(:not([class*="sels-"])), .seca-buchung.seca-buchung textarea:where(:not([class*="sels-"])) { text-shadow: none; } /* Links erben ihre Groesse von dem Text, in dem sie stehen. * * **Pierres Fund vom 18.09.2026:** Elementor setzt unter „Globale Schriftart" * eine Regel `.elementor-kit-7 a { font-size: 18px }`. Eine Groesse AM Link * schlaegt jedes Erben — „Datenschutz Impressum" stand deshalb in 18 statt in * 11,5 Pixeln, und „Datenschutzerklaerung" ragte aus der Einwilligungszeile * heraus. * * `.seca-buchung` steht zweimal da (0-2-1) und wiegt damit mehr als * `.elementor-kit-7 a` (0-1-1) — dieselbe Bauform wie bei der Hoechstbreite * weiter oben. Ausgenommen sind Links mit eigener Klasse: Ein Link, der wie * ein Knopf aussieht (`a.seca-b-knopf`), bringt seine Groesse selbst mit. */ .seca-buchung.seca-buchung a:where(:not([class*="sels-"]):not([class*="seca-"])) { font-size: inherit; line-height: inherit; } /* ========================================================================== Fremdes CSS darf den Kalender nicht verbiegen (seit 0.33.4) ========================================================================== **Pierres Fund vom 18.09.2026, gemessen auf einer Kundenseite:** Dort stand im WordPress-Customizer unter „Zusätzliches CSS" diese Zeile: .elementor-kit-7 button, … { padding: 20px 36px !important; } Sie gilt für JEDEN Knopf der Seite — auch für die des Kalenders. Ein Tag im Monat IST ein Knopf. Er wurde dadurch 56 statt 16 Pixel hoch, und weil die Kachel quadratisch sein muss (`aspect-ratio`), wuchs sie im selben Maß in die Breite: 74 statt 33 Pixel. Sieben davon nebeneinander brauchten 599 statt 458 Pixel, das Gitter wurde breiter als die Karte — und die Karte schneidet ab (`overflow: hidden`). **Die ganze rechte Spalte mit den Uhrzeiten war weg.** Der Kalender sah aus wie kaputt, ohne dass am Plugin etwas falsch war. **Warum das Zurücksetzen weiter oben dagegen nichts ausrichtet:** Es steht unter `.seca-buchung button` und wiegt 0-1-1 — genau so viel wie `.elementor-kit-7 button`. Bei Gleichstand entscheidet die Reihenfolge, und das CSS des Customizers wird nach unserem gedruckt. Mit `!important` dort drüben ist der Streit ohnehin entschieden. **Gegenmittel und seine Grenze:** Die eigenen Bauteile setzen ihre Maße ebenfalls mit `!important` durch. Das reicht, weil unsere Selektoren mit `.seca-buchung` beginnen (0-2-0) und damit schwerer wiegen als eine Regel für „alle Knöpfe" (0-1-1): Bei zwei `!important` gewinnt das höhere Gewicht, unabhängig von der Reihenfolge. Gegen eine noch stärkere fremde Regel hilft es nicht — das ist bewusst in Kauf genommen. **Drei Regeln, wenn hier etwas dazukommt:** 1. `!important` gehört NUR an die eigenen `.seca-b-*`-Bauteile, NIEMALS in das allgemeine Zurücksetzen `.seca-buchung button` weiter oben. Das ist absichtlich schwach gebaut: Es würde sonst die eigenen Knopf-Regeln überfahren — aus „Termin verbindlich buchen" wurde am 15.08.2026 genau so eine nackte Textzeile — und außerdem in die Kasse von „smartEngin buy" hineinregieren. 2. `!important` nur auf MASSE (Innenabstand, Außenabstand, Breite, Höhe, Zeilenhöhe) — nicht auf Rahmen, Farben oder Schriftgröße. Rahmen und Farbe unterscheiden die Knopfarten voneinander (`.seca-b-knopf.seca-b-leiser`), die Größe des Logos kommt aus den Einstellungen als style-Attribut, und die Schriftgröße der Terminart setzt `seca-frontend.js` gemessen am Element. Ein `!important` würde alle drei aushebeln. 3. **Jede eigene Regel beginnt mit `.seca-buchung`** (seit 0.33.5). Sonst wiegt sie 0-1-0 und verliert schon gegen `.elementor-kit-7 p` oder `.elementor-kit-7 a` (0-1-1) — daran stand der Hinweistext zu tief und der Fusslink zu gross. **Achtung bei der Veranstaltungsliste:** Dort sitzen `seca-buchung` und `seca-ev-liste` am SELBEN Element, deshalb `.seca-buchung.seca-ev-liste` ohne Leerzeichen. 4. Aussenabstaende immer als volle Kurzschrift (`margin: 16px 0 0`), nie als `margin-top` allein: Fremdes CSS schreibt `margin: 1em auto`, und das setzt alle vier Seiten — ein `margin-top` haelt dann nur oben. 5. Wo zwei eigene Regeln dieselbe Eigenschaft setzen, entscheidet nicht mehr die Reihenfolge, sondern das Gewicht. Deshalb heißt der Weiter-Knopf unten `.seca-b-knopf.seca-b-weiter` (0-3-0) — sonst verlöre sein Abstand nach oben gegen `.seca-b-knopf` (0-2-0), das später in der Datei steht. ========================================================================== */ /* ---------- Überschrift und Einleitung ---------- */ .seca-buchung .seca-b-titel { margin: 0 0 6px; font-size: 22px; line-height: 1.3; color: var(--seca-b-dunkel); } .seca-buchung .seca-b-intro { margin: 0 0 18px; color: #33505f; font-size: 14.5px; } .seca-buchung .seca-b-intro p:last-child { margin-bottom: 0; } /* ---------- Die Karte ---------- */ .seca-buchung .seca-b-karte { background-color: #fff; border: 1px solid var(--seca-b-rahmen); border-radius: var(--seca-b-radius); box-shadow: 0 10px 30px rgba(17, 49, 74, 0.08); overflow: hidden; } /* * Die linke Spalte bleibt bei 300 Pixeln — und wird nur dann breiter, wenn * es wirklich nicht anders geht. * * **Die Reihenfolge ist Pierres Vorgabe vom 21.08.2026, und sie war beim * ersten Versuch falsch herum:** Damals stand hier `minmax(300px, 360px)`. * Ein `minmax` mit fester Obergrenze nimmt aber IMMER die 360, solange Platz * da ist — die Spalte wurde also breiter, egal wie kurz der Titel war, und * die Schrift kam nie an die Reihe. Pierre hat genau das gesehen. * * Richtig ist die umgekehrte Reihenfolge, weil der Kalender in der Mitte das * Wichtigere ist: * * 1. **Zuerst die Schrift.** `seca-frontend.js` verkleinert sie gemessen * von 14 auf 13, 12 oder 11 Pixel, solange die Spalte 300 breit bleibt. * 2. **Erst wenn auch 11 Pixel nicht reichen**, setzt das Skript * `--seca-b-linksbreite` — und zwar auf so viel, wie WIRKLICH gebraucht * wird, höchstens 360. * * Deshalb steht hier eine Variable mit dem Rückfallwert 300 und kein * `minmax`: Die Entscheidung, ob überhaupt breiter, kann nur der treffen, * der den Text gemessen hat — und das ist das Skript, nicht das Stylesheet. * Läuft kein JavaScript, bleibt es bei den 300 Pixeln von früher. */ .seca-buchung .seca-b-gitter { display: grid; grid-template-columns: var(--seca-b-linksbreite, 300px) 1fr 220px; min-height: 430px; } .seca-buchung .seca-b-links { padding: 24px; border-right: 1px solid var(--seca-b-rahmen); background-color: var(--seca-b-karte); } .seca-buchung .seca-b-mitte { padding: 24px; /* Sicherheitsnetz gegen genau den Fall oben: Ohne diese Null darf die mittlere Spalte nie schmaler werden als ihr Inhalt. Wird der Inhalt aus irgendeinem Grund zu breit, wächst das Gitter über die Karte hinaus und die Karte schneidet die Uhrzeiten ab. Mit `0` wird der Monat im Notfall enger statt unsichtbar. */ min-width: 0; } .seca-buchung .seca-b-rechts { padding: 24px 18px; border-left: 1px solid var(--seca-b-rahmen); } .seca-buchung .seca-b-leer { padding: 28px 24px; margin: 0; text-align: center; color: var(--seca-b-grau); } /* Während neue Zeiten geladen werden, bleibt das Bisherige stehen und wird nur blasser — sonst klappt die Karte für einen Moment zusammen und wirkt kaputt (von Pierre am 11.08.2026 gemeldet). */ .seca-buchung .seca-b-arbeitet { opacity: 0.45; transition: opacity 0.15s linear; pointer-events: none; } /* ---------- links: Anbieter, Auswahl, Angaben ---------- */ .seca-buchung .seca-b-anbieter { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } /* Das Logo ist ein KREIS, und sein Durchmesser ist je Buchungsansicht einstellbar (Pierres Wunsch vom 16.08.2026: mit 34 Pixeln und abgerundeten Ecken war das Bild kaum zu erkennen). Die Zahl selbst setzt das Frontend als `width`/`height` am Element (die Begruendung steht dort im Quelltext). Hier stehen nur die FORM und der Rueckfallwert 56 — er gilt, wenn eine Ansicht die Angabe noch nicht hat. */ .seca-buchung .seca-b-logo { width: 56px; height: 56px; flex: none; border-radius: 50%; background-color: var(--seca-b-dunkel); color: #fff; display: grid; place-items: center; /* Die Anfangsbuchstaben wachsen mit dem Kreis mit — sonst stuenden zwei winzige Zeichen in einem grossen Kreis. */ font-size: 21px; /* 0.38 der Vorgabegroesse; das Frontend rechnet mit. */ font-weight: 600; letter-spacing: 0.5px; overflow: hidden; /* Breite und Höhe stehen bewusst OHNE `!important`: Sie sind einstellbar und kommen als style-Attribut am Element. Erzwungener Innenabstand dagegen macht aus dem runden Bild eine Ellipse — auf der Kundenseite war der Kreis dadurch 396 statt 44 Pixel breit. */ padding: 0 !important; border: 0 !important; margin: 0 !important; } /* Das Bild fuellt den Kreis IMMER ganz aus — mit 100 % statt einer eigenen Zahl. So muss die Groesse nur an einer Stelle stehen (am Kreis), und die beiden koennen nie auseinanderlaufen. */ .seca-buchung .seca-b-logobild { width: 100%; height: 100%; /* `cover` schneidet mittig zu — ein Bild, das nicht quadratisch ist, wird dadurch beschnitten statt verzerrt. Der eigene Rundschnitt am Bild ist noetig, weil `overflow:hidden` am Rahmen bei manchen Browsern an einem Bild mit eigenem Rand vorbeigeht. */ border-radius: 50%; object-fit: cover; display: block; } /* ---------- Das Bild kurz gross sehen ---------- Pierres Wunsch vom 22.08.2026: Der Kreis bleibt klein, aber ein Klick zeigt das Bild zwei Sekunden lang dreimal so gross — lang genug, um zu sehen, wer einem gegenuebersitzt, kurz genug, um niemanden aufzuhalten. **Warum `left top` und nicht die Mitte:** Der Kreis sitzt oben links in der Karte, und die Karte schneidet ab (`.seca-b-karte` hat `overflow: hidden`). Von der Mitte aus gewachsen waere das Bild oben abgeschnitten; von der linken oberen Ecke aus waechst es nach rechts und unten in die Karte hinein. 168 Pixel (3 x 56) passen in die 300 Pixel breite Spalte. Dass es dabei den Text darunter verdeckt, ist gewollt und dauert zwei Sekunden. */ .seca-buchung .seca-b-logo--zoom { /* Ein `button` bringt eigene Randlinien, Innenabstaende und Schrift mit — ohne diesen Rueckbau saehe der Kreis in jedem Browser anders aus. */ padding: 0; border: 0; font: inherit; appearance: none; -webkit-appearance: none; cursor: zoom-in; transition: transform 0.25s ease-out; transform-origin: left top; } .seca-buchung .seca-b-logo--zoom.is-gross { transform: scale(3); cursor: zoom-out; /* Ueber allem, was darunter steht — sonst schoebe sich der Text der linken Spalte durch das vergroesserte Bild. */ position: relative; z-index: 5; } /* Wer Bewegung im System abgestellt hat, bekommt die Vergroesserung trotzdem — nur ohne den Uebergang. Die Funktion ist der Zweck, die Animation ist die Zugabe. */ @media (prefers-reduced-motion: reduce) { .seca-buchung .seca-b-logo--zoom { transition: none; } } .seca-buchung .seca-b-name { font-size: 13.5px; font-weight: 600; } .seca-buchung .seca-b-feldname { display: block; font-size: 12px; color: var(--seca-b-grau); margin: 0 0 6px; } .seca-buchung .seca-b-typwahl { width: 100%; padding: 10px 12px !important; border: 1px solid var(--seca-b-rahmen); border-radius: 10px; background-color: #fff; font-size: 14px; font-family: inherit; font-weight: 600; color: var(--seca-b-dunkel); appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; margin: 0 !important; } .seca-buchung .seca-b-beschreibung { font-size: 13.5px; line-height: 1.55; color: #33505f; margin: 16px 0 18px; } .seca-buchung .seca-b-beschreibung p { margin: 0 0 10px; } .seca-buchung .seca-b-beschreibung p:last-child { margin-bottom: 0; } .seca-buchung .seca-b-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .seca-buchung .seca-b-meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; } .seca-buchung .seca-b-meta .seca-b-zeichen { width: 18px; flex: none; text-align: center; color: var(--seca-b-gruen); } .seca-buchung .seca-b-fuss { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--seca-b-rahmen); font-size: 11.5px; color: var(--seca-b-grau); } .seca-buchung .seca-b-fuss a { color: var(--seca-b-grau); margin-right: 12px; } /* Die Marke ganz unten in der linken Spalte (Einstellungen → Design). Rechtsbündig und 94 Pixel breit (Pierre, 12.08.2026 — vorher mittig und 118 Pixel: zu groß und zu dominant unter den Fußzeilen-Links). max-width neben der festen Breite: Das Logo darf in einer schmalen Spalte mitschrumpfen, aber nie über sie hinauswachsen. height: auto hält das Seitenverhältnis auch dann, wenn ein Theme img { height } vorgibt. */ .seca-buchung .seca-b-marke { margin-top: 26px; text-align: right; } .seca-buchung .seca-b-marke img { width: 94px; max-width: 100%; height: auto; opacity: 0.85; } /* ---------- Mitte: der Monat ---------- */ .seca-buchung .seca-b-monatskopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .seca-buchung .seca-b-monatstitel { font-size: 17px; font-weight: 600; } .seca-buchung .seca-b-pfeile { display: flex; gap: 4px; } .seca-buchung .seca-b-pfeile button { width: 30px !important; height: 30px !important; flex: none; border: 1px solid var(--seca-b-rahmen); background-color: #fff; border-radius: 8px; color: var(--seca-b-dunkel); font-size: 14px; line-height: 1 !important; padding: 0 !important; margin: 0 !important; } .seca-buchung .seca-b-pfeile button[disabled] { opacity: 0.4; cursor: default; } .seca-buchung .seca-b-wochentage, .seca-buchung .seca-b-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .seca-buchung .seca-b-wochentage div { text-align: center; font-size: 11px; color: var(--seca-b-grau); padding-bottom: 6px; letter-spacing: 0.4px; text-transform: uppercase; } /* Die Kachel ist quadratisch — genau wie in der Vorlage. Höhe, Polsterung und Schriftgröße stehen ausdrücklich hier, damit kein Theme sie aufbläht. */ .seca-buchung .seca-b-tag { aspect-ratio: 1 / 1; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 400; line-height: 1 !important; background-color: transparent; color: #b8c4cc; position: relative; cursor: default; /* Zweite Bremse: Eine Fläche mit `aspect-ratio` rechnet ihre Höhe in eine Mindestbreite um und bläht damit die ganze Spalte auf. Mit `0` kann die Kachel im Notfall kleiner werden, statt den Kalender zu sprengen. */ min-width: 0; } .seca-buchung .seca-b-tag.seca-b-leerfeld { visibility: hidden; } .seca-buchung .seca-b-tag.seca-b-frei { background-color: var(--seca-b-karte); border-color: var(--seca-b-rahmen); color: var(--seca-b-dunkel); cursor: pointer; font-weight: 600; } .seca-buchung .seca-b-tag.seca-b-frei:hover, .seca-buchung .seca-b-tag.seca-b-frei:focus-visible { border-color: var(--seca-b-gruen); } .seca-buchung .seca-b-tag.seca-b-frei::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--seca-b-gruen); } .seca-buchung .seca-b-tag.seca-b-gewaehlt { background-color: var(--seca-b-dunkel); color: #fff; border-color: var(--seca-b-dunkel); } .seca-buchung .seca-b-tag.seca-b-gewaehlt::after { background-color: var(--seca-b-hellgruen); } .seca-buchung .seca-b-tag.seca-b-heute { box-shadow: inset 0 0 0 1.5px var(--seca-b-hellblau); } .seca-buchung .seca-b-naechster { margin: 16px 0 0 !important; width: 100% !important; padding: 9px !important; border: 1px solid var(--seca-b-rahmen); background-color: #fff; border-radius: 10px; font-size: 13px; line-height: 1.4 !important; color: var(--seca-b-dunkel); } .seca-buchung .seca-b-naechster:hover { border-color: var(--seca-b-gruen); } /* ---------- rechts: die Uhrzeiten ---------- */ .seca-buchung .seca-b-zeitkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .seca-buchung .seca-b-tagname { font-size: 14px; font-weight: 600; } .seca-buchung .seca-b-umschalter { display: flex; flex: none; border: 1px solid var(--seca-b-rahmen); border-radius: 8px; overflow: hidden; } .seca-buchung .seca-b-umschalter button { border: 0; background-color: #fff; padding: 5px 9px !important; font-size: 11.5px; line-height: 1.4 !important; color: var(--seca-b-grau); border-radius: 0; margin: 0 !important; } .seca-buchung .seca-b-umschalter button.an { background-color: var(--seca-b-dunkel); color: #fff; } .seca-buchung .seca-b-zeiten { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 4px; } .seca-buchung .seca-b-zeit { width: 100% !important; padding: 10px !important; border: 1px solid var(--seca-b-rahmen); border-radius: 10px; font-size: 14px; line-height: 1.4 !important; background-color: #fff; color: var(--seca-b-dunkel); margin: 0 !important; } .seca-buchung .seca-b-zeit:hover, .seca-buchung .seca-b-zeit:focus-visible { border-color: var(--seca-b-gruen); color: var(--seca-b-gruen); font-weight: 600; } .seca-buchung .seca-b-zeit.seca-b-gewaehlt { background-color: var(--seca-b-gruen); border-color: var(--seca-b-gruen); color: var(--seca-b-akzent-schrift, #fff); font-weight: 600; } .seca-buchung .seca-b-hinweis { font-size: 13px; color: var(--seca-b-grau); margin: 0; } /* Der Satz unter der fertigen Buchung braucht Luft nach oben (Pierre, 20.09.2026: „sieht sehr eng dran aus"). Er steht dort allein unter der Datenkarte — ohne Knopf dazwischen klebte er direkt darunter. Eigene Klasse, damit der Abstand nur hier gilt und nicht bei jedem Hinweis. */ .seca-buchung .seca-b-bestaetigt-hinweis { margin-top: 22px; } .seca-buchung .seca-b-zone { margin-top: 14px; font-size: 11.5px; color: var(--seca-b-grau); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .seca-buchung .seca-b-zone select { max-width: 100%; font-size: 11.5px; font-family: inherit; padding: 4px 6px !important; border: 1px solid var(--seca-b-rahmen); border-radius: 8px; background-color: #fff; color: var(--seca-b-grau); margin: 0 !important; } .seca-buchung .seca-b-zonenname { display: block; } /* ---------- Schrittführung auf dem Handy (Vorlage, Ansicht 5) ---------- */ .seca-buchung .seca-b-schrittkopf { padding: 14px 16px; border-bottom: 1px solid var(--seca-b-rahmen); background-color: var(--seca-b-karte); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .seca-buchung .seca-b-schritttitel { font-size: 13px; font-weight: 600; } .seca-buchung .seca-b-fortschritt { display: flex; gap: 5px; width: 100%; } .seca-buchung .seca-b-fortschritt i { height: 3px; flex: 1; border-radius: 2px; background-color: var(--seca-b-rahmen); } .seca-buchung .seca-b-fortschritt i.an { background-color: var(--seca-b-gruen); } .seca-buchung .seca-b-knopf.seca-b-weiter { width: 100% !important; margin: 16px 0 0 !important; } /* Im Schrittmodus ist immer nur eine der drei Spalten zu sehen. */ .seca-buchung .seca-b-schritte[data-schritt="1"] .seca-b-mitte, .seca-buchung .seca-b-schritte[data-schritt="1"] .seca-b-rechts, .seca-buchung .seca-b-schritte[data-schritt="2"] .seca-b-links, .seca-buchung .seca-b-schritte[data-schritt="2"] .seca-b-rechts, .seca-buchung .seca-b-schritte[data-schritt="3"] .seca-b-links, .seca-buchung .seca-b-schritte[data-schritt="3"] .seca-b-mitte { display: none; } .seca-buchung .seca-b-schritte .seca-b-links, .seca-buchung .seca-b-schritte .seca-b-rechts { border: 0; } /* ---------- Das Formular (Vorlage, Ansicht 2) ---------- */ .seca-buchung .seca-b-formkopf { padding: 18px 24px; border-bottom: 1px solid var(--seca-b-rahmen); background-color: var(--seca-b-karte); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .seca-buchung .seca-b-zurueck { border: 1px solid var(--seca-b-rahmen); background-color: #fff; border-radius: 8px; padding: 7px 12px !important; font-size: 13px; line-height: 1.4 !important; color: var(--seca-b-dunkel); margin: 0 !important; } .seca-buchung .seca-b-gewaehlt-info { font-size: 14px; } .seca-buchung .seca-b-formkoerper { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .seca-buchung .seca-b-formkoerper .seca-b-voll { grid-column: 1 / -1; } .seca-buchung .seca-b-fzeile { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .seca-buchung .seca-b-eingabe { width: 100% !important; padding: 10px 12px !important; border: 1px solid var(--seca-b-rahmen); border-radius: 10px; background-color: #fff; font-size: 14px; font-family: inherit; line-height: 1.4 !important; color: var(--seca-b-dunkel); margin: 0 !important; } .seca-buchung .seca-b-eingabe:focus-visible { outline: 2px solid var(--seca-b-gruen); outline-offset: 1px; } .seca-buchung .seca-b-anschrift { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; } .seca-buchung .seca-b-anschrift .seca-b-voll { grid-column: 1 / -1; } .seca-buchung .seca-b-pflicht { color: var(--seca-b-rot); } .seca-buchung .seca-b-leise { color: var(--seca-b-grau); font-weight: 400; } .seca-buchung .seca-b-hilfe { font-size: 12px; color: var(--seca-b-grau); } .seca-buchung .seca-b-feldfehler { font-size: 12.5px; color: var(--seca-b-rot); } .seca-buchung .seca-b-fehlerhaft .seca-b-eingabe { border-color: var(--seca-b-rot); } .seca-buchung .seca-b-gebiet { border: 1px solid #f0d9a8; background-color: #fdf6e7; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #7a5a12; } /* Hinweis zu Online-Terminen (Einstellungen → Datenschutz). Bewusst ruhiger als der gelbe Gebiets-Hinweis: Er warnt nicht, er erklärt. white-space: pre-line, weil der Text aus einem mehrzeiligen Feld kommt und im Skript über textContent gesetzt wird — ohne diese Zeile stünde alles in einem einzigen Absatz, obwohl im Backend Absätze eingegeben wurden. */ .seca-buchung .seca-b-online { border: 1px solid #cfe6f7; background-color: #f2f9fe; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #235676; white-space: pre-line; } .seca-buchung .seca-b-haken, .seca-buchung .seca-b-zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; flex-wrap: wrap; } .seca-buchung .seca-b-zustimmung input[type="checkbox"] { margin: 3px 0 0 !important; /* Ein Theme, das allen Feldern volle Breite gibt, machte aus dem Kästchen sonst einen Balken über die ganze Zeile. */ width: auto !important; height: auto !important; padding: 0 !important; } .seca-buchung .seca-b-zustimmung .seca-b-feldfehler { width: 100%; } /* Das versteckte Feld für den Spamschutz: für Menschen unsichtbar, für ein automatisches Programm ein verlockendes leeres Feld. */ .seca-buchung .seca-b-falle { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; /* **Kein Schönheitsfehler, sondern ein Buchungsverhinderer:** Wird dieses Feld durch fremdes CSS sichtbar, füllt ein Besucher es aus — und der Spamschutz weist seine Buchung ab. Deshalb mit `!important`. */ padding: 0 !important; margin: 0 !important; } .seca-buchung .seca-b-formfuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .seca-buchung .seca-b-knopf { background-color: var(--seca-b-gruen); color: var(--seca-b-akzent-schrift, #fff); border: 0; border-radius: 10px; padding: 13px 22px !important; font-size: 15px; font-weight: 600; line-height: 1.4 !important; /* Gegen `margin: 1em auto` aus fremdem Knopf-CSS: Der Knopf stünde sonst mittig und mit Abstand mitten im Formular. Der Weiter-Knopf setzt seinen Abstand mit höherem Gewicht wieder (siehe Abschnitt oben). */ margin: 0 !important; } .seca-buchung .seca-b-knopf:hover { background-color: var(--seca-b-gruen-dunkel); } .seca-buchung .seca-b-knopf[disabled] { opacity: 0.6; } /* Ein Knopf, der in Wahrheit ein Link ist (z. B. „Nein, behalten"): Er darf nicht unterstrichen sein und braucht dieselbe Fläche wie ein echter Knopf. */ .seca-buchung a.seca-b-knopf { display: inline-block; text-decoration: none; } /* Leiser Knopf (Vorlage: .knopf.leise) — für alles, was der Kunde eher selten will: Absagen, Verschieben, Abbrechen. Er MUSS mit .seca-buchung beginnen, sonst gewinnt das Zurücksetzen für Knöpfe (Merksatz aus 0.3.3). */ .seca-buchung .seca-b-knopf.seca-b-leiser { background-color: #fff; color: var(--seca-b-dunkel); border: 1px solid var(--seca-b-rahmen); font-weight: 500; } .seca-buchung .seca-b-knopf.seca-b-leiser:hover { background-color: var(--seca-b-karte); } /* Der Knopf, der wirklich absagt: rot, damit er sich vom Abbrechen unterscheidet. Er steht erst im zweiten Schritt, nie im ersten. */ .seca-buchung .seca-b-knopf.seca-b-gefahr { background-color: var(--seca-b-rot); } .seca-buchung .seca-b-knopf.seca-b-gefahr:hover { background-color: #b83a3a; } /* Zwei Knöpfe nebeneinander, auf dem Handy untereinander. */ .seca-buchung .seca-b-wahl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } /* Der Kasten für die Rückfrage vor dem Absagen. */ .seca-buchung .seca-b-rueckfrage { max-width: 440px; margin: 0 auto 4px; text-align: left; } .seca-buchung .seca-b-rueckfrage label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--seca-b-dunkel); } .seca-buchung .seca-b-formfehler { font-size: 13px; color: var(--seca-b-rot); } /* ---------- Die Bestätigung (Vorlage, Ansicht 3) ---------- */ .seca-buchung .seca-b-fertig { padding: 36px 24px; text-align: center; } .seca-buchung .seca-b-haken-kreis { width: 56px; height: 56px; border-radius: 50%; background-color: var(--seca-b-gruen); color: var(--seca-b-akzent-schrift, #fff); display: grid; place-items: center; margin: 0 auto 16px; font-size: 28px; } /* Wartet die Buchung noch auf ihre Bestätigung, ist der Kreis gelb statt grün — grün hieße "steht", und das wäre gelogen. */ .seca-buchung .seca-b-haken-kreis.seca-b-wartet { background-color: #D89000; } .seca-buchung .seca-b-fertig-aktionen { margin-top: 20px; } .seca-buchung .seca-b-fertig-titel { margin: 0 0 6px; font-size: 20px; } .seca-buchung .seca-b-fertig-sub { margin: 0 0 22px; color: var(--seca-b-grau); font-size: 14px; } .seca-buchung .seca-b-fertig-karte { max-width: 440px; margin: 0 auto; text-align: left; border: 1px solid var(--seca-b-rahmen); border-radius: 12px; padding: 18px; background-color: var(--seca-b-karte); } .seca-buchung .seca-b-fzeile-info { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; } .seca-buchung .seca-b-fzeile-info + .seca-b-fzeile-info { border-top: 1px dashed var(--seca-b-rahmen); } .seca-buchung .seca-b-fzeile-info .seca-b-wert { font-weight: 600; text-align: right; word-break: break-word; } .seca-buchung .seca-b-warnung { max-width: 440px; margin: 16px auto 0; border: 1px solid #f0d9a8; background-color: #fdf6e7; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #7a5a12; text-align: left; } /* ---------- Ladezustand und Fehler ---------- */ .seca-buchung .seca-b-laedt { color: var(--seca-b-grau); font-size: 13px; padding: 8px 0; margin: 0; } .seca-buchung .seca-b-fehler { color: var(--seca-b-rot); font-size: 13px; padding: 8px 0; margin: 0; } /* ---------- Tastaturbedienung sichtbar machen ---------- */ .seca-buchung button:focus-visible, .seca-buchung select:focus-visible { outline: 2px solid var(--seca-b-gruen); outline-offset: 2px; } /* ---------- Schmale Ansicht: die drei Spalten stapeln ---------- * * Die Klasse seca-b-schmal setzt das Skript, sobald der KALENDER schmaler * ist als der Wert aus Einstellungen → Design. Bewusst nicht über eine * Medienabfrage: Die misst das Fenster, nicht den Kalender — und der steht * meist in einer Spalte, die viel schmaler ist. Genau daran sah der Monat * auf Tablet-Breite zerdrückt aus (Pierre, 11.08.2026). * * Die Medienabfrage darunter ist nur die Rückfallebene für den Fall, dass * kein JavaScript läuft. */ .seca-buchung.seca-b-schmal .seca-b-gitter { grid-template-columns: 1fr; min-height: 0; } .seca-buchung.seca-b-schmal .seca-b-links { border-right: 0; border-bottom: 1px solid var(--seca-b-rahmen); } .seca-buchung.seca-b-schmal .seca-b-rechts { border-left: 0; border-top: 1px solid var(--seca-b-rahmen); } .seca-buchung.seca-b-schmal .seca-b-zeiten { max-height: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .seca-buchung.seca-b-schmal .seca-b-formkoerper { grid-template-columns: 1fr; } /* Rückfallebene ohne JavaScript. */ @media (max-width: 600px) { .seca-buchung .seca-b-gitter { grid-template-columns: 1fr; min-height: 0; } .seca-buchung .seca-b-links { border-right: 0; border-bottom: 1px solid var(--seca-b-rahmen); } .seca-buchung .seca-b-rechts { border-left: 0; border-top: 1px solid var(--seca-b-rahmen); } .seca-buchung .seca-b-zeiten { max-height: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .seca-buchung .seca-b-formkoerper { grid-template-columns: 1fr; } } /* ---------- Weniger Bewegung, wenn das System es wünscht ---------- */ @media (prefers-reduced-motion: reduce) { .seca-buchung .seca-b-arbeitet { transition: none; } } /* ========================================================================== Veranstaltungen (Etappe 1.1) — eine LISTE, kein Kalender (Konzept §4.2). Knoepfe, Eingabefelder, Hinweise und die Spamschutz-Falle kommen aus dem vorhandenen Baukasten (.seca-b-*); hier steht nur, was die Liste selbst ausmacht. ========================================================================== */ .seca-buchung.seca-ev-liste { display: grid; gap: 18px; } .seca-buchung .seca-ev-karte { background: var(--seca-b-karte); border: 1px solid var(--seca-b-rahmen); border-radius: var(--seca-b-radius); padding: 20px 22px; } .seca-buchung .seca-ev-titel { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; color: var(--seca-b-dunkel); } .seca-buchung .seca-ev-wann { margin: 0 0 2px; color: var(--seca-b-dunkel); } .seca-buchung .seca-ev-dauer, .seca-buchung .seca-ev-ort { color: var(--seca-b-grau); } .seca-buchung .seca-ev-ort { margin: 0 0 10px; } /* * Der Preis — bei der Veranstaltung und bei der Terminart. * * Er steht VOR der Anmeldung (Pierres Fund vom 17.08.2026): Bis dahin wurde er * nur benutzt, um zu entscheiden, OB bezahlt werden muss, und nirgends * angezeigt. Der Originalpreis steht durchgestrichen DAVOR — so herum liest * man einen Rabatt. */ .seca-buchung .seca-ev-preis { margin: 0 0 10px; font-size: 1.05em; } .seca-buchung .seca-ev-preis-alt, .seca-buchung .seca-b-preis-alt { color: var(--seca-b-grau); margin-right: 4px; font-weight: 400; } .seca-buchung .seca-ev-text { margin: 10px 0; } .seca-buchung .seca-ev-plaetze { margin: 10px 0 0; font-weight: 600; color: var(--seca-b-gruen-dunkel); } /* „Ausgebucht" und „Anmeldung geschlossen" stehen ruhig da, nicht in Rot: Es ist kein Fehler des Besuchers. */ .seca-buchung .seca-ev-zu, .seca-buchung .seca-ev-leer { margin: 12px 0 0; color: var(--seca-b-grau); font-style: italic; } .seca-buchung .seca-ev-formular { margin-top: 16px; display: grid; gap: 10px; } .seca-buchung .seca-ev-feld { margin: 0; display: grid; gap: 4px; } .seca-buchung .seca-ev-einwilligung { margin: 4px 0 0; font-size: 0.92rem; line-height: 1.45; } .seca-buchung .seca-ev-einwilligung input { margin: 0 6px 0 0 !important; } .seca-buchung .seca-ev-knopf { justify-self: start; } /* Nur fuer Vorleseprogramme. Eine EIGENE Klasse, nicht die des Themes (.screen-reader-text): Fehlt sie dort, stuende der Zusatztext plotzlich sichtbar mitten im Knopf. */ .seca-buchung .seca-b-nurvorlesen { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Zugeklapptes Anmeldeformular in der Liste (Pierre, 14.08.2026). Der sieht aus wie ein Knopf; der eigene Pfeil ersetzt das Dreieck, das jeder Browser anders zeichnet. */ .seca-buchung .seca-ev-aufklapp { margin-top: 14px; } .seca-buchung .seca-ev-aufklapp-knopf { display: inline-flex; align-items: center; gap: 8px; background-color: var(--seca-b-gruen); color: var(--seca-b-akzent-schrift, #fff); border-radius: 10px; padding: 13px 22px !important; font-size: 15px; font-weight: 600; line-height: 1.4 !important; cursor: pointer; list-style: none; } .seca-buchung .seca-ev-aufklapp-knopf::-webkit-details-marker { display: none; } .seca-buchung .seca-ev-aufklapp-knopf:hover { background-color: var(--seca-b-gruen-dunkel); } /* Sichtbarer Fokus fuer die Tastatur: ohne ihn weiss niemand, wo er steht. */ .seca-buchung .seca-ev-aufklapp-knopf:focus-visible { outline: 2px solid var(--seca-b-dunkel); outline-offset: 2px; } .seca-buchung .seca-ev-aufklapp-wort::after { content: ""; display: inline-block; margin-left: 8px; border: 5px solid transparent; border-top-color: #fff; transform: translateY(2px); } .seca-buchung .seca-ev-aufklapp[open] .seca-ev-aufklapp-wort::after { transform: translateY(-3px) rotate(180deg); } /* Allein auf einer Landingpage: mehr Luft, groessere Ueberschrift. */ .seca-buchung.seca-ev-liste--eine .seca-ev-karte { padding: 26px 28px; } .seca-buchung.seca-ev-liste--eine .seca-ev-titel { font-size: 1.4rem; } /* --------------------------------------------------------------------------- Bezahlte Termine (Etappe 1.2): der Schritt vor der Kasse. Pierres Fund vom 15.08.2026: Kästchen, Satz und Knopf liefen ineinander — der grüne Knopf stand mitten im Satz. Grund: Ein