Buchungsseite mit individuellem CSS anpassen (Schriftart ändern)

Du möchtest, dass deine Buchungsseite genauso aussieht wie deine Marke? In diesem Artikel zeigen wir dir, wie du das Design mit deinen Markenfarben oder per CSS anpassen kannst. Wenn deine meetergo-Buchungsseite perfekt zu deinem Stil passen soll, bist du hier genau richtig.

Du kannst deine Unternehmensfarben (Corporate Identity) ganz einfach in den Einstellungen festlegen. Zusätzlich hast du die Möglichkeit, das Design und die Formatierung der Buchungsseite mithilfe von CSS-Klassen individuell anzupassen.

So änderst du das Aussehen deiner Buchungsseite

Für einfache Anpassungen bieten wir einige Einstellungen, um die Markenfarben anzupassen. Fortgeschrittene Nutzer können die gesamte Buchungsseite mithilfe von CSS individuell gestalten!

Gehe auf deine Unternehmenseinstellungen

In der mittleren Spalte unter "Branding" kannst du Design-Änderungen vornehmen

Lade dein Unternehmenslogo hoch (optional - nur für Visitenkarten/Round-Robin-Terminarten)

Setze den Haken bei "Markenfarbe auf der Terminseite verwenden". Klicke auf den Kreis neben "Primärfarbe", um im Farbpicker deine Farbe auszuwählen

Klicke auf "CSS der Terminseite bearbeiten", um CSS einzufügen. Lies diesen Artikel, um mehr darüber zu erfahren, wie das funktioniert.

Die vollständige Klassen-Referenz findest du auch direkt im Designer der Buchungsseite. Öffne den CSS-Editor und klappe "CSS Class Reference" auf, um alle Klassen zu durchsuchen. Ein Klick auf eine Klasse kopiert sie in deine Zwischenablage.

Wo du CSS einträgst

Es gibt mehr als ein CSS-Feld, und jedes gilt für andere Seiten. Eine Regel im falschen Feld ist der häufigste Grund dafür, dass sie "nicht funktioniert".

Was du gestalten willst	Wo du das CSS einträgst
Alle Buchungsseiten deines Accounts	Branding → CSS der Terminseite bearbeiten
Die Bestätigungsseite ("Danke-Seite")	Branding → Edit Confirmation Page CSS
Nur die Buchungsseiten eines Teams	Branding Editor → Anwenden auf (unter den Tabs) → Nur bestimmte Teams, dann im Tab CSS bearbeiten
Nur eine Terminseite	Terminseite → Branding & Styling → Für diesen Termintyp anpassen → Individuelles CSS für diesen Termintyp
Ein Formular	Formular-Editor → Design-Bereich → Tab CSS → Individuelles CSS

Individuelles CSS ist ab dem Suite-Tarif verfügbar (Growth in den alten Tarifnamen). In Free und Light kannst du weiterhin den visuellen Branding-Editor nutzen (Farben, Ecken, Schatten, Buttons, Schriftarten und Vorlagen), aber der Tab CSS wird nicht angezeigt und das Speichern von CSS wird abgelehnt. Siehe Planvergleich.

Die Terminseite entscheidet, ob dein Firmen-CSS gilt

Unter Branding & Styling einer Terminseite gibt es drei CSS-Optionen, und eine davon schaltet dein Firmen-CSS für diese Seite ab:

Firmen-CSS verwenden — übernimmt das Firmen- bzw. Team-Stylesheet. Das ist die Standardeinstellung.
Kein individuelles CSS — Standard-Aussehen der Buchungsseite. Dein Firmen-CSS wird hier nicht angewendet.
Individuelles CSS für diesen Termintyp — es gilt nur das CSS aus diesem Feld, es ersetzt das Firmen-Stylesheet für diese Seite.

Wenn genau eine Buchungsseite dein Styling ignoriert und alle anderen nicht, prüfe zuerst diese Einstellung.

Schriftart ohne CSS ändern

Lade eine Schriftart nicht über @import url('https://fonts.googleapis.com/...'). meetergo entfernt externe @import-Regeln, bevor die Seite ausgeliefert wird, denn beim Laden einer Schrift von Google würden die IP-Adressen deiner Besucher an Google übertragen. Die Regel wird entfernt, die Seite fällt auf die Standardschrift zurück, und es sieht so aus, als wäre nichts gespeichert worden.

Eine font-family-Regel mit einer Schrift, die nur auf deinem eigenen Rechner installiert ist, hat denselben Effekt aus einem anderen Grund: Sie wird bei dir korrekt angezeigt und bei niemandem sonst.

Nutze stattdessen die eingebauten Schriftart-Auswahlfelder:

Öffne den Branding Editor
Gehe auf den Tab Stil
Wähle unter Typografie eine Überschriften-Schriftart und eine Text-Schriftart

Die Schriften liegen auf den Servern von meetergo, es werden also keine Besucherdaten an Dritte übertragen. Verfügbare Schriften: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Source Sans Pro, Nunito, Mulish, Playfair Display, Merriweather, IBM Plex Sans, IBM Plex Serif, Space Grotesk, DM Sans, JetBrains Mono, Plus Jakarta Sans, Sora, Cormorant Garamond, Fraunces und Libre Franklin. Lass ein Auswahlfeld auf Standard (Theme-Schriftart), um die Standardschrift zu behalten.

Praktische Beispiele

Jedes Element auf der Buchungsseite trägt eine stabile CSS-Klasse. Füge deine Regeln im CSS-Editor hinzu und sie gelten für alle deine Buchungsseiten.

Den Umschalter für das 12/24-Stunden-Format ausblenden:

.booking-time-format-tabs {
  display: none;
}

Die Hintergrundfarbe des Hauptcontainers ändern:

#bookingContainer {
  background-color: #f2f2f2;
}

Die Zeitslot-Buttons abrunden und den ausgewählten hervorheben:

.booking-time-slot-button {
  border-radius: 9999px;
}

.booking-time-slot-button-selected {
  font-weight: 700;
}

Falls eine Regel nicht greift, füge !important zum Wert hinzu, zum Beispiel color: white !important;. Damit überschreibst du die Standard-Styles der Seite.

Mein CSS funktioniert auf der Live-Seite nicht

Dein CSS wird auf unsichere Regeln geprüft, bevor es auf die Seite kommt. Die Vorschau im Branding Editor führt dieselbe Prüfung durch, du siehst dort also das, was auch deine Besucher bekommen. Wenn dein Styling auf der Live-Seite fehlt, arbeite diese Liste durch.

Symptom	Ursache	Lösung
Das ganze Stylesheet wird ignoriert, gar nichts greift	Dein CSS enthält eines der unten genannten blockierten Muster. Wird eines gefunden, wird das komplette Stylesheet verworfen, nicht nur diese eine Regel	Muster entfernen, auch aus Kommentaren
Alles greift außer der Schriftart	Ein externer `@import` (zum Beispiel Google Fonts) wurde entfernt	Schriftart stattdessen im Tab Stil auswählen, siehe oben
Ein Hintergrundbild oder Icon fehlt	`url()` zeigt auf eine `http://`-Adresse	`https://`, eine `data:`-URI oder einen Pfad mit `/` am Anfang verwenden
Nichts wurde gespeichert, oder der Tab CSS fehlt	Individuelles CSS gibt es ab dem Suite-Tarif	Upgrade, oder den visuellen Branding-Editor nutzen
Eine Buchungsseite ist ungestylt, alle anderen sind in Ordnung	Diese Terminseite steht auf Kein individuelles CSS oder hat ihr eigenes CSS	Terminseite → Branding & Styling
Die Regel ist da, aber der Standard-Stil gewinnt	Spezifität	`!important` ergänzen

Diese Muster verwerfen das ganze Stylesheet, und sie werden als reiner Text gesucht — eine Erwähnung in einem /* Kommentar */ zählt mit:

expression(
javascript:
behavior:
-moz-binding
<script
</style
ein @import, bei dem das abschließende ; fehlt

Eine Notiz wie /* keine javascript: URLs hier */ am Anfang deines Stylesheets reicht aus, um jede Regel darunter abzuschalten. Wenn dein CSS auf einen Schlag nicht mehr wirkt, durchsuche zuerst deine Kommentare nach diesen Wörtern.

CSS-Klassen-Referenz

Diese Klassen kannst du ansprechen, gruppiert nach Bereich der Buchungsseite.

Layout & Struktur

#bookingContainer
.booking-left-panel-wrapper
.booking-left-panel
.booking-left-panel-inner
.booking-right-panel-wrapper
.booking-right-panel
.booking-right-panel-tabs

Funnel / Routing-Formulare

.booking-funnel
.booking-funnel-card
.booking-funnel-header
.booking-funnel-footer
.booking-funnel-steps-wrapper
.booking-funnel-steps
.booking-funnel-step-dot
.booking-funnel-step-dot--active
.booking-funnel-steps-count
.booking-funnel-back-button
.booking-funnel-next-button
.booking-funnel-submit-button
.booking-funnel-button-loading
.booking-funnel-slide
.booking-funnel-slide-header
.booking-funnel-slide-title
.booking-funnel-slide-description
.booking-funnel-slide-back
.booking-funnel-slide-content
.booking-funnel-infobox-wrapper
.booking-funnel-infobox
.booking-funnel-options
.booking-funnel-option
.booking-funnel-option-selected
.booking-funnel-option-card
.booking-funnel-option-row
.booking-funnel-option-image
.booking-funnel-option-icon
.booking-funnel-option-label
.booking-funnel-option-content
.booking-funnel-option-indicator
.booking-funnel-option-text
.booking-funnel-checkbox
.booking-funnel-radio
.booking-funnel-radio-selected
.booking-funnel-form-wrapper
.booking-funnel-form

Meeting-Informationen

.booking-title
.booking-description-content
.booking-company-logo-wrapper
.booking-host-avatar
.booking-host-name
.booking-host-info-wrapper
.booking-duration-info
.booking-location-text
.booking-location-info
.booking-legal-details

Kalender & Zeitauswahl

.booking-calendar
.booking-calendar-month
.booking-month-text
.booking-calendar-weekday
.booking-calendar-date-cell
.booking-calendar-disabled-overlay
.booking-calendar-disabled-tooltip
.booking-calendar-disabled-text
.booking-time-format-tabs
.booking-time-scroll-inner
.booking-time-tab-content
.booking-time-slot-button
.booking-time-slot-button-selected
.booking-day-header
.booking-timezone-picker
.booking-pagination-buttons

Dauer- & Kanalauswahl

.booking-duration-selection
.booking-duration-button
.booking-duration-scroll-area
.booking-channel-selection
.booking-channel-button
.booking-channel-scroll-area

Host-Auswahl

.booking-host-item
.booking-host-item-text
.booking-host-search
.booking-fastest-option
.booking-fastest-text
.booking-specific-host-header

Formularfelder

.booking-form
.booking-form-field
.booking-form-label
.booking-input
.booking-input-text
.booking-input-email
.booking-input-url
.booking-input-number
.booking-input-error
.booking-textarea
.booking-textarea-error
.booking-phone-input
.booking-form-error

.booking-select-trigger
.booking-select-content
.booking-select-item

Checkboxen

.booking-checkbox
.booking-checkbox-label
.booking-checkbox-group
.booking-checkbox-wrapper
.booking-form-field-checkbox

Radio-Buttons

.booking-radio
.booking-radio-label
.booking-radio-group
.booking-radio-wrapper

Buttons

.booking-submit-button
.booking-submit-button-loading
.booking-confirm-button
.booking-confirm-button-loading
.booking-continue-button
.booking-change-host-button

Bestätigungsseite

.booking-confirmation
.booking-confirmation-card
.booking-confirmation-content
.booking-confirmation-content-inner
.booking-confirmation-status
.booking-confirmation-header
.booking-confirmation-title
.booking-confirmation-subtitle
.booking-confirmation-details
.booking-confirmation-meta
.booking-confirmation-what
.booking-confirmation-when
.booking-confirmation-who
.booking-confirmation-where
.booking-confirmation-manage
.booking-confirmation-add-to-calendar
.booking-confirmation-calendar-buttons
.booking-confirmation-legal

Stornierungsseite

.cancellation-page-wrapper
.cancellation-policy-violation
.booking-cancellation-card
.booking-cancellation-content
.booking-cancellation-form
.booking-cancellation-reason-group
.booking-cancellation-notice
.booking-cancellation-button
.booking-cancellation-current-appointment
.booking-cancellation-current-appointment-icon
.booking-cancellation-current-appointment-date
.booking-cancellation-series-info
.booking-cancellation-series-list
.booking-cancellation-series-list-label
.booking-cancellation-series-items
.booking-cancellation-series-item
.booking-cancellation-series-item-info
.booking-cancellation-series-item-icon
.booking-cancellation-series-item-date
.booking-cancellation-series-item-button
.booking-cancellation-series-choice
.booking-cancellation-series-choice-label
.booking-cancellation-radio-group
.booking-cancellation-option-single
.booking-cancellation-option-single-label
.booking-cancellation-option-single-date
.booking-cancellation-option-all
.booking-cancellation-option-all-label
.booking-cancellation-option-all-info

Umbuchungsseite

#reschedule
.reschedule-page-wrapper
.reschedule-policy-violation
.booking-reschedule-series-panel
.booking-reschedule-current-appointment
.booking-reschedule-current-appointment-icon
.booking-reschedule-current-appointment-label
.booking-reschedule-current-appointment-date
.booking-reschedule-series-info
.booking-reschedule-series-list
.booking-reschedule-series-list-label
.booking-reschedule-series-items
.booking-reschedule-series-item
.booking-reschedule-series-item-info
.booking-reschedule-series-item-icon
.booking-reschedule-series-item-date
.booking-reschedule-series-item-button
.booking-reschedule-series-overflow

Hinweis bei Richtlinienverstoß

.policy-violation-card
.policy-violation-title
.policy-violation-description
.policy-violation-advice-box
.policy-violation-advice-title
.policy-violation-advice-text
.policy-violation-button

Bundle-Buchungsseite

.bundle-booking-wrapper
.bundle-booking-header
.bundle-booking-step-header
.bundle-card
.bundle-category-header
.bundle-category-icon
.bundle-category-icon-text
.bundle-selected-count
.bundle-divider
.bundle-search-container
.bundle-search-input
.bundle-clear-search
.bundle-meeting-list
.bundle-meeting-item
.bundle-meeting-item-selected
.bundle-meeting-accent
.bundle-selection-checkbox
.bundle-option-button-selected
.bundle-price-badge
.bundle-sidebar
.bundle-sidebar-header
.bundle-sidebar-content
.bundle-sidebar-item
.bundle-sidebar-divider
.bundle-continue-button
.bundle-mobile-bar
.bundle-footer

Ladezustände

.booking-skeleton-buttons
.booking-calendar-loading-date-cell
.booking-calendar-loading-weekday

Sonstiges

.booking-divider
.booking-spots-left

Legacy-Selektoren

Generische Selektoren wie input[type="text"], input[type="email"], input[type="tel"], label, textarea, select und button funktionieren weiterhin, sind aber weniger präzise. Nutze bevorzugt die booking-*-Klassen von oben, um Elemente gezielt anzusprechen.

Ältere Artikel und Setups verweisen teilweise noch auf Klassennamen wie bookingTimeContainer oder bookingTimePicker. Diese gehören zur früheren Version der Buchungsseite und gelten nicht mehr. Verwende stattdessen die Klassen aus diesem Artikel.

FAQ

Was kann ich mit CSS anpassen?

Fast alles. Du kannst Schriftarten, Farben, Größen und Layouts ändern und sogar Elemente verstecken oder neu anordnen. Wenn es auf der Buchungsseite ist, kann CSS es wahrscheinlich anpassen.

Muss ich programmieren können?

Nur wenn du CSS verwenden möchtest. Für einfaches Branding ist kein Programmieren nötig. Wähle einfach deine Markenfarbe und dein Logo aus.

Wirken sich Änderungen auf bestehende Termine aus?

Nein. Die Anpassung deiner Buchungsseite ändert nur das Aussehen der Seite. Sie beeinflusst nicht deine Terminarten oder Verfügbarkeit.

Welchen Tarif brauche ich für individuelles CSS?

Den Suite-Tarif (in den alten Tarifnamen Growth). Der visuelle Branding-Editor mit Farben, Ecken, Schatten, Button-Stilen, Schriftarten und Design-Vorlagen ist ab Light (Essentials) verfügbar. Auch das Ausblenden des meetergo-Brandings gehört zum Suite-Tarif.

Kann ich eine Google-Schriftart verwenden?

Nicht über @import. Externe Stylesheet-Importe werden entfernt, bevor die Seite ausgeliefert wird, damit keine Besucher-IP-Adressen bei Google landen. Die meisten gängigen Google-Schriftarten stehen in den Auswahlfeldern im Tab Stil zur Verfügung und werden von meetergo selbst gehostet.

Kann ich ein Element ausblenden, das ich nicht brauche, zum Beispiel das Gutscheincode-Feld?

Ja. Suche die Klasse des Elements in der Referenz weiter unten (oder öffne den Browser-Inspektor) und setze display: none. Zum Beispiel:

.booking-time-format-tabs {
  display: none;
}

Kann ich den Button "Jetzt buchen" umbenennen?

Ja, und zwar über eine Einstellung statt über CSS. Öffne an der Terminseite Buchungsformular → Einstellungen → Button-Text und trage deine Formulierung ein. Der Wert wird pro Sprache gespeichert und ersetzt auch „Jetzt zahlungspflichtig buchen“. Schritte und Grenzen: Den Button-Text „Jetzt buchen“ ändern. Dasselbe Feld steuert den Button eines Formulars, dort liegt es in den Formular-Einstellungen.

Ohne Einstellung bleibt nur der kleine Button Bestätigen neben einem ausgewählten Zeitfenster. Den kannst du per CSS überschreiben:

.booking-confirm-button {
  font-size: 0;
}

.booking-confirm-button::after {
  content: 'Diese Zeit nehmen';
  font-size: 16px;
}

Ein per CSS gesetzter Ersatztext wird nicht übersetzt. Nutze das also nur auf einer Seite, die du in einer einzigen Sprache anbietest.

Funktioniert individuelles CSS auch bei Formularen und Auswahlseiten?

Ja, aber jede Fläche hat ihr eigenes CSS-Feld. Ein Formular gestaltest du im Tab CSS des Formular-Editors, nicht im CSS der Buchungsseite. Auswahlseiten übernehmen das Firmen- bzw. Team-Stylesheet.