/*
* CityMarina — MotoPress-Hotel-Booking-Oberflächen im Token-System.
*
* Geltungsbereich: alles, was MPHB (Lite 6.1.0) im Front-End rendert —
* Suchformular, Ergebnisliste, Klassenseite, Checkout, Bestätigungsseite,
* Datepicker — plus die Bootsdaten-Sektion, die marina-core in den Checkout
* hängt (#marina-boat-details).
*
* Regeln (wie style.css):
* - Werte kommen ausschließlich aus theme.json (--wp--preset--* /
* --wp--custom--*). Die einzige Ausnahme ist --cm-mphb-danger, siehe unten.
* - Kein !important. Diese Datei wird nach `mphb.min.css`, nach dessen
* Inline-Block und nach `style.css` geladen (Enqueue-Abhängigkeit auf
* `citymarina-style` in functions.php); bei gleicher Spezifität gewinnt
* damit die Quellreihenfolge. Wo das Plugin höher spezifiziert, ist die
* Selektorform der Plugin-Regel bewusst nachgebaut — nachgewiesene Fälle
* sind an Ort und Stelle kommentiert.
* - Breakpoints nur 991px und 767px (Audit), Rest fluid.
*
* Nicht abgedeckt: E-Mail-Templates (bleiben Default, eigene Styles im
* Plugin, nicht overridebar) und der Admin-Bereich.
*/
:root {
/*
* Fehlerrot. Die Palette in theme.json hat bewusst keine Fehlerfarbe —
* das Design-Audit kannte keine. Dieser Wert ist nicht neu erfunden: er
* kam mit dem Inline-CSS von mu-plugins/marina-core/booking.php
* (:user-invalid der Bootsfelder), das inzwischen hierher konsolidiert
* ist, und ist zugleich das Fehlerrot des WordPress-Backends. Kontrast auf Weiß
* 6,2:1 → AA für Fließtext. Wird nur für Feldfehler benutzt; die
* Meldungsblöcke selbst laufen im Notiz-Stil (Audit: `note`-Verlauf).
*/
--cm-mphb-danger: #b32d2e;
--cm-mphb-danger-soft: #fdf3f3;
}
/* ---------------------------------------------------------------------------
* 1. Wrapper — Breiten und Rhythmus
* ------------------------------------------------------------------------- */
/*
* Die Shortcode-Wrapper sitzen in `.entry-content` (contentSize 1120px).
* Formulare bleiben schmaler: eine Spalte Formular auf 1120px liest sich
* nicht. Ergebnisliste und Klassenseite dürfen die volle Inhaltsbreite haben.
*/
.mphb_sc_checkout-wrapper,
.mphb_sc_booking_confirmation {
width: min(46rem, 100%);
margin-inline: auto;
}
.mphb_sc_search_results-wrapper > *,
.mphb_sc_checkout-wrapper > * {
min-width: 0;
}
/* ---------------------------------------------------------------------------
* 2. Bedienelemente — Label, Feld, Pflichtfeld-Stern
* ------------------------------------------------------------------------- */
/*
* Die Feldoptik (46px, Box-Rechnung, Rahmen, Radius) steht vollständig in
* style.css §7 und greift für alles innerhalb von `.wp-site-blocks`. Hier
* kommt nur dazu, was MPHB an eigenem Markup mitbringt: Labels als Block,
* Einheiten/Hinweise gedämpft, der Pflichtfeld-Stern als lesbares Zeichen
* statt als gepunktetes abbr.
*
* Der Zeilenrhythmus ist überall derselbe und kommt aus einem Token:
* Label → --control--label-gap → Feld → --control--label-gap → Hilfetext,
* und --control--row-gap zur nächsten Zeile (das Raster-Gap weiter unten).
* Vorher standen hier 0.5rem Labelabstand gegen 1rem Zeilenabstand — bei
* 67px hohen Feldern (siehe style.css §7) rückte damit das Label der
* nächsten Zeile optisch an die Unterkante des Feldes darüber.
*/
.mphb_sc_search-form label,
.mphb-booking-form label,
.mphb_sc_checkout-form label,
.mphb_sc_checkout-form .mphb-customer-details label,
#marina-boat-details label {
display: block;
margin-bottom: var(--wp--custom--control--label-gap);
color: var(--wp--preset--color--navy-heading);
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.3;
}
/* Die Zustimmungszeile ist eine Checkbox-Zeile: Label steht neben der Box. */
#marina-boat-details .marina-boat-field-consent label,
.mphb_sc_checkout-form .mphb-checkbox-label,
.mphb_sc_checkout-form .mphb-radio-label {
display: inline;
margin-bottom: 0;
font-size: var(--wp--preset--font-size--s);
font-weight: 400;
line-height: 1.5;
}
.mphb_sc_search-form abbr,
.mphb-booking-form abbr,
.mphb_sc_checkout-form abbr,
.mphb-required-fields-tip abbr,
#marina-boat-details abbr {
border: 0;
color: var(--wp--preset--color--accent-deep);
cursor: help;
font-weight: 800;
text-decoration: none;
}
.mphb-required-fields-tip {
margin: 0 0 var(--wp--preset--spacing--30);
color: var(--wp--preset--color--muted-soft);
font-size: var(--wp--preset--font-size--xs);
}
.mphb-required-fields-tip small {
font-size: inherit;
}
/*
* Einheiten- und Hinweiszeilen der Bootsdaten (marina-core-Markup).
* Die Hilfetexte selbst brauchen hier nichts mehr: `input + small` in
* style.css §7 setzt Abstand, Größe und Farbe für jeden Feld-Hilfetext der
* Site — der Hinweis klebt am Feld darüber, nicht an der nächsten Zeile.
*/
#marina-boat-details .marina-boat-unit {
color: var(--wp--preset--color--muted-soft);
font-weight: 400;
}
/* Das Ableseergebnis der Größenklasse unter den Bootsfeldern. */
#marina-boat-details .marina-band-readout {
font-weight: 600;
}
/*
* Sichtbarer Fokus auf allen MPHB-Feldern. Die globale Regel in style.css
* (`:focus-visible`, 2px accent, offset 2px) gilt schon; hier kommt der
* Rahmenwechsel dazu, damit das Feld selbst mitspricht und nicht nur der
* Ring darum herum.
*/
.mphb_sc_search-form :focus-visible,
.mphb-booking-form :focus-visible,
.mphb_sc_checkout-form :focus-visible,
.mphb_sc_search_results-wrapper :focus-visible,
.datepick-popup :focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 2px;
}
.mphb_sc_search-form input:focus,
.mphb_sc_search-form select:focus,
.mphb-booking-form input:focus,
.mphb-booking-form select:focus,
.mphb_sc_checkout-form input:focus,
.mphb_sc_checkout-form select:focus,
.mphb_sc_checkout-form textarea:focus {
border-color: var(--wp--preset--color--accent);
}
/* Fehlerzustand eines einzelnen Feldes — gilt für alle MPHB-Pflichtfelder
* und für die Bootsfelder. Der Fokusring wechselt mit, sonst umrandete ein
* rot markiertes Feld beim Tabben wieder in Akzentblau. */
.mphb_sc_checkout-form input:user-invalid,
.mphb_sc_checkout-form select:user-invalid,
.mphb_sc_checkout-form textarea:user-invalid,
#marina-boat-details input:user-invalid,
#marina-boat-details select:user-invalid {
background-color: var(--cm-mphb-danger-soft);
border-color: var(--cm-mphb-danger);
outline-color: var(--cm-mphb-danger);
}
/* ---------------------------------------------------------------------------
* 3. Buttons — MPHB-Schaltflächen auf die Theme-Rezeptur
* ------------------------------------------------------------------------- */
/*
* MPHB rendert Schaltflächen als `.button` bzw. `.mphb-button` und kann die
* Klassen nicht überall über Templates setzen (Ergebnisliste, Checkout und
* Buchungsformular kommen aus Views). Deshalb liegt die Button-Rezeptur hier
* auf den MPHB-Klassen statt über `wp-element-button` im Markup — sonst sähen
* nur die überschriebenen Templates richtig aus.
*/
.mphb_sc_search-form input[type="submit"],
.mphb-booking-form input[type="submit"],
.mphb_sc_checkout-form input[type="submit"],
.mphb_sc_search_results-wrapper .button,
.mphb_sc_search_results-wrapper .mphb-button,
.mphb_sc_booking_confirmation .button {
display: inline-block;
padding: 0.85rem 1.5rem;
border: 0;
border-radius: var(--wp--custom--radius--base);
background: var(--wp--preset--gradient--button);
box-shadow: var(--wp--custom--shadow--button);
color: var(--wp--preset--color--surface);
cursor: pointer;
font-family: inherit;
font-size: var(--wp--preset--font-size--s);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
filter var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}
.mphb_sc_search-form input[type="submit"]:hover,
.mphb_sc_search-form input[type="submit"]:focus-visible,
.mphb-booking-form input[type="submit"]:hover,
.mphb-booking-form input[type="submit"]:focus-visible,
.mphb_sc_checkout-form input[type="submit"]:hover,
.mphb_sc_checkout-form input[type="submit"]:focus-visible,
.mphb_sc_search_results-wrapper .button:hover,
.mphb_sc_search_results-wrapper .button:focus-visible,
.mphb_sc_search_results-wrapper .mphb-button:hover,
.mphb_sc_search_results-wrapper .mphb-button:focus-visible,
.mphb_sc_booking_confirmation .button:hover,
.mphb_sc_booking_confirmation .button:focus-visible {
box-shadow: var(--wp--custom--shadow--button-hover);
color: var(--wp--preset--color--surface);
filter: brightness(var(--wp--custom--motion--brightness));
transform: translateY(var(--wp--custom--motion--lift));
}
/* Zweitrangige Aktion: „Details ansehen" führt weg vom Buchen, darf also
* nicht wie der Buchen-Knopf aussehen. */
.mphb_sc_search_results-wrapper .mphb-view-details-button {
background: var(--wp--preset--color--surface);
box-shadow: none;
border: 1px solid var(--wp--preset--color--border-input);
color: var(--wp--preset--color--accent-deep);
}
.mphb_sc_search_results-wrapper .mphb-view-details-button:hover,
.mphb_sc_search_results-wrapper .mphb-view-details-button:focus-visible {
background: var(--wp--preset--color--nav-hover);
box-shadow: none;
color: var(--wp--preset--color--nav-hover-text);
}
/* Textlink-Aktionen bleiben Links. */
.mphb_sc_search_results-wrapper .mphb-remove-from-reservation {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--xs);
}
/* ---------------------------------------------------------------------------
* 4. Suchformular — Zwei-Spalten-Raster, vollbreiter Submit
* ------------------------------------------------------------------------- */
.cm-mphb-searchform {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--custom--control--row-gap) var(--wp--preset--spacing--30);
align-items: end;
}
/*
* Voreinstellung: alles läuft über die volle Breite. Nur das Datumspaar
* teilt sich eine Zeile — Anreise und Abreise gehören zusammen, alles andere
* (Personen an Bord, spätere Attribut-Selects, Hinweise, Submit) nicht.
* Hidden-Inputs sind `display: none` und werden gar nicht erst zu
* Rasterzellen.
*/
.cm-mphb-searchform > * {
grid-column: 1 / -1;
margin: 0;
}
.cm-mphb-searchform > .mphb_sc_search-check-in-date,
.cm-mphb-searchform > .mphb_sc_search-check-out-date {
grid-column: span 1;
}
.cm-mphb-searchform__submit input[type="submit"] {
width: 100%;
min-height: var(--wp--custom--control--submit-height);
}
/* ---------------------------------------------------------------------------
* 5. Ergebnisliste — Klassenraster aus Karten
* ------------------------------------------------------------------------- */
/*
* Die Ergebnisse liegen flach im Wrapper (Infozeile, Empfehlung, Warenkorb,
* dann n Klassen). Das Raster fasst nur die Klassenkarten; alles andere
* spannt über die volle Breite. `auto-fit` mit `min(100%, 26rem)` ergibt auf
* 1120px zwei Spalten und fällt unterhalb selbsttätig auf eine zurück —
* ohne dass es dafür einen dritten Breakpoint bräuchte.
*/
.mphb_sc_search_results-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
gap: var(--wp--preset--spacing--50);
align-items: start;
}
.mphb_sc_search_results-wrapper > *:not(.mphb-room-type) {
grid-column: 1 / -1;
}
/*
* Plugin-Regel (assets/css/mphb.css:352):
* `.mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type)`
* setzt `margin-top: 4em`. Im Raster erzeugt das versetzte Karten.
* Selektorform 1:1 nachgebaut (gleiche Spezifität), unsere Datei lädt
* später — kein !important nötig.
*/
.mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type) {
margin-top: 0;
}
.mphb_sc_search_results-info {
margin: 0;
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--s);
}
/* Die Karte. Klasse kommt aus dem Override
* hotel-booking/shortcodes/search-results/room-content.php. */
.cm-mphb-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--wp--preset--gradient--panel);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--custom--shadow--card);
}
.cm-mphb-card__media img {
display: block;
width: 100%;
height: auto;
}
.cm-mphb-card__media p {
margin: 0;
}
.cm-mphb-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--wp--preset--spacing--30);
padding: var(--wp--preset--spacing--50);
}
.cm-mphb-card__body > * {
margin: 0;
}
/* Titel: H2 und der Link darin tragen im Plugin dieselbe Klasse. */
.cm-mphb-card h2.mphb-room-type-title {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--m);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
}
.cm-mphb-card a.mphb-room-type-title {
color: var(--wp--preset--color--navy-heading);
text-decoration: none;
}
.cm-mphb-card a.mphb-room-type-title:hover,
.cm-mphb-card a.mphb-room-type-title:focus-visible {
color: var(--wp--preset--color--accent);
text-decoration: underline;
}
/*
* Nur der Auszug. `the_excerpt()` liefert einen klassenlosen