/* ══════════════════════════════════════════════════════════════════════ SPECIAL NOTICE — Sondertag-Hinweisleiste + Kalender-Kennzeichnung OHST-C6 Zwei Dinge in einer Datei, weil sie dieselbe Quelle haben: die Leiste unter dem Header und die Markierung gesperrter Tage im Buchungskalender. Beide zeigen denselben Sondertag, nur an verschiedenen Orten. Design-Regeln: nur Schwarz / #0A0A0A / #111 / Weiss / Gold (#B29474), border-radius 0, Versalien mit Letterspacing, Gold sparsam. Die Leiste ist eine LABEL-Zeile, keine Werbefläche. ══════════════════════════════════════════════════════════════════════ */ /* ── Leiste ─────────────────────────────────────────────────────────── */ /* Fest unter dem Header, damit kein Hero-Layout verrutscht: der Header selbst ist position:fixed und transparent, die Seiten rechnen ihre Abstände gegen --header-height. Eine Leiste im normalen Fluss würde jede Startsektion nach unten schieben. */ .cq-sn { position: fixed; top: var(--header-height); left: 0; right: 0; /* Eine Stufe unter dem Header (1000) — Menü und Mega-Dropdown überdecken die Leiste, nicht umgekehrt. */ z-index: 999; background: var(--elevated, #111111); border-top: 1px solid rgba(255, 255, 255, 0.10); border-bottom: 1px solid var(--gold, #B29474); border-radius: 0; } /* Weggeklickt: setzt special-notice.js als Klasse an , noch bevor der Body gerendert ist — so blitzt beim zweiten Seitenaufruf innerhalb derselben Sitzung nichts auf. */ .cq-sn-zu .cq-sn { display: none; } .cq-sn-inner { max-width: var(--content-max, 1400px); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem); display: flex; align-items: center; gap: 0.75rem; min-height: 38px; } .cq-sn-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; /* Mehrere Einträge: dezente Aufzählung nebeneinander. Reicht der Platz nicht, wird waagerecht IN DER LEISTE gescrollt — nie im Body. */ gap: 0 1.5rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cq-sn-list::-webkit-scrollbar { display: none; } .cq-sn-item { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; padding: 0.5rem 0; font-family: var(--font-mono, 'Courier New', monospace); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; color: var(--text, rgba(255, 255, 255, 0.85)); white-space: nowrap; } /* Mehrere Einträge bekommen einen dünnen Trenner statt eines Aufzählungs- punkts — Punkte sind im Rest der Seite nicht vorhanden. */ .cq-sn-item + .cq-sn-item { padding-left: 1.5rem; margin-left: -0.75rem; border-left: 1px solid rgba(255, 255, 255, 0.12); } .cq-sn-ico { font-size: 0.8125rem; line-height: 1; flex: 0 0 auto; } /* Gold ist der einzige Akzent und bleibt der POSITIVEN Nachricht vorbehalten: „wir haben trotzdem auf". Eine Schliessung ist weiss — sie muss lesbar sein, nicht leuchten. */ .cq-sn-item.is-open .cq-sn-txt { color: var(--gold, #B29474); } .cq-sn-item.is-closed .cq-sn-txt { color: var(--text-strong, #ffffff); } .cq-sn-close { flex: 0 0 auto; appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; color: var(--text-muted, rgba(255, 255, 255, 0.6)); font: inherit; font-size: 0.625rem; line-height: 1; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease); } .cq-sn-close:hover, .cq-sn-close:focus-visible { color: var(--gold, #B29474); border-color: var(--gold, #B29474); } /* Admin-Bar: der Header rückt um 32px nach unten (siehe cq_admin_bar_fix in inc/enqueue.php), die Leiste muss mit. */ body.admin-bar .cq-sn { top: calc(var(--header-height) + 32px); } @media (max-width: 782px) { body.admin-bar .cq-sn { top: var(--header-height-mobile, 90px); } } @media (max-width: 768px) { .cq-sn { top: var(--header-height-mobile, 90px); } .cq-sn-inner { min-height: 34px; gap: 0.5rem; padding: 0 1rem; } .cq-sn-item { font-size: 0.625rem; letter-spacing: 0.08em; } } /* Kein Animations-Spielwerk — die Leiste steht einfach da. Die einzige Bewegung ist der Farbwechsel am Schliessen-Knopf, und den nimmt prefers-reduced-motion mit. */ @media (prefers-reduced-motion: reduce) { .cq-sn-close { transition: none; } .cq-sn-list { scroll-behavior: auto; } } /* Drucken: ein Aushang gehört nicht aufs Papier. */ @media print { .cq-sn { display: none; } } /* ── Kalender-Kennzeichnung im Buchungs-Widget ────────────────────────── Die Regeln stehen hier und nicht in frontend/css/booking-widget.css: Ausspielung von Sondertagen ist EIN Thema und liegt in EINER Datei. Ausserdem gehört die Datei dem Theme — das Plugin wird derzeit von mehreren Seiten gleichzeitig bearbeitet. Gesetzt wird die Klasse in frontend/js/booking-widget.js aus GET cq-booking/v1/special-days/public. */ /* Geschlossen / Feiertag / raum-scoped gesperrt: durchgestrichenes Datum. Vorher war so ein Tag ununterscheidbar von „ausgebucht" und von „an diesem Wochentag nie offen". */ .cq-cal-day.cq-sd-closed { position: relative; color: var(--text-dim, rgba(255, 255, 255, 0.4)); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--gold, #B29474); /* Der Tag bleibt anklickbar — beim Antippen erscheint der Grund anstelle des leeren Slot-Rasters. */ cursor: pointer; } /* Abweichende Öffnung: der Tag bleibt buchbar, bekommt aber eine Gold-Markierung als Fussnote. */ .cq-cal-day.cq-sd-custom { position: relative; } .cq-cal-day.cq-sd-custom::after { content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 10px; height: 1px; background: var(--gold, #B29474); } /* Grund unter dem Kalender — die Legende erklärt, was die Striche heissen, und zaehlt die betroffenen Tage NICHT auf (das tut die Leiste oben). */ .cq-cal-sd-legend { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-mono, 'Courier New', monospace); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, rgba(255, 255, 255, 0.6)); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; } .cq-cal-sd-legend b { color: var(--gold, #B29474); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--gold, #B29474); } /* Der Grund am ausgewählten, gesperrten Tag — steht dort, wo sonst die Slots stehen, statt eines kommentarlos leeren Rasters. */ .cq-slots-special { padding: 1rem; border: 1px solid var(--gold, #B29474); border-radius: 0; background: rgba(178, 148, 116, 0.06); font-family: var(--font-mono, 'Courier New', monospace); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; color: var(--text-strong, #ffffff); } .cq-slots-special .cq-slots-special-sub { display: block; margin-top: 0.35rem; letter-spacing: 0.06em; text-transform: none; color: var(--text-muted, rgba(255, 255, 255, 0.6)); }