mit data-ghos-lightbox — Lightbox-Hook */
position: relative;
display: block;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 8px;
background: #f0ede5;
cursor: zoom-in;
text-decoration: none;
color: inherit;
}
.ghos-angebot__galerie-item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .3s;
}
.ghos-angebot__galerie-item:hover img { transform: scale(1.04); }
.ghos-angebot__galerie-item figcaption {
position: absolute;
inset: auto 0 0 0;
padding: .5rem .75rem;
font-size: .8rem;
color: #fff;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
pointer-events: none;
}
/* Verwandte Angebote */
.ghos-angebot__verwandt {
border-top: 1px solid var(--ghos-color-border, #e2dfd5);
padding-top: 2.5rem; margin-top: 3rem;
}
.ghos-angebot__verwandt h2 {
font-size: 1.25rem; margin: 0 0 1.25rem;
}
.ghos-angebot__verwandt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
/* Karte (auch im Block angebote_grid genutzt) */
.ghos-angebot-karte {
display: block;
background: #fff;
border: 1px solid var(--ghos-color-border, #e2dfd5);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ghos-angebot-karte:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px -10px rgba(0,0,0,.12);
border-color: var(--ghos-color-primary, #2d6a3e);
}
.ghos-angebot-karte__bild {
aspect-ratio: 16/10;
background: #f0ede5;
overflow: hidden;
}
.ghos-angebot-karte__bild img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.ghos-angebot-karte__korpus { padding: 1.1rem 1.25rem 1.4rem; }
.ghos-angebot-karte__kategorie {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ghos-color-primary, #2d6a3e);
font-weight: 600;
margin-bottom: .35rem;
}
.ghos-angebot-karte__titel {
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 .4rem;
font-family: var(--ghos-font-headings, inherit);
line-height: 1.25;
}
.ghos-angebot-karte__teaser {
margin: 0 0 .8rem;
font-size: .92rem;
color: var(--ghos-color-text-muted, #555);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ghos-angebot-karte__meta {
display: flex;
flex-wrap: wrap;
gap: .35rem .75rem;
font-size: .8rem;
color: var(--ghos-color-text-muted, #666);
border-top: 1px dashed var(--ghos-color-border, #e2dfd5);
padding-top: .6rem;
}
/* Block angebote_grid (Container im CMS) */
.ghos-block-angebote-grid {
padding: 3rem 0;
}
.ghos-block-angebote-grid__inner {
max-width: 78rem; margin: 0 auto; padding: 0 1.5rem;
}
.ghos-block-angebote-grid__head {
text-align: center;
margin-bottom: 2rem;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
.ghos-block-angebote-grid__kicker {
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ghos-color-primary, #2d6a3e);
font-weight: 600;
margin-bottom: .5rem;
}
.ghos-block-angebote-grid__titel {
font-size: clamp(1.6rem, 3vw + .5rem, 2.4rem);
margin: 0 0 .5rem;
font-family: var(--ghos-font-headings, inherit);
}
.ghos-block-angebote-grid__einleitung {
color: var(--ghos-color-text-muted, #555);
margin: 0;
line-height: 1.6;
}
.ghos-block-angebote-grid__filter {
display: flex; flex-wrap: wrap; justify-content: center;
gap: .5rem; margin-bottom: 1.5rem;
}
.ghos-block-angebote-grid__filter-btn {
border: 1px solid var(--ghos-color-border, #e2dfd5);
background: transparent;
border-radius: 999px;
padding: .35rem .9rem;
font-size: .85rem;
cursor: pointer;
color: inherit;
transition: all .15s;
}
.ghos-block-angebote-grid__filter-btn:hover,
.ghos-block-angebote-grid__filter-btn[aria-pressed="true"] {
background: var(--ghos-color-primary, #2d6a3e);
color: var(--ghos-color-on-primary, #fff);
border-color: var(--ghos-color-primary, #2d6a3e);
}
.ghos-block-angebote-grid__grid {
display: grid; gap: 1.25rem;
}
.ghos-block-angebote-grid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ghos-block-angebote-grid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ghos-block-angebote-grid__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
.ghos-block-angebote-grid__grid,
.ghos-block-angebote-grid__grid--2,
.ghos-block-angebote-grid__grid--3,
.ghos-block-angebote-grid__grid--4 {
grid-template-columns: 1fr;
}
}
@media (min-width: 720px) and (max-width: 1080px) {
.ghos-block-angebote-grid__grid--3,
.ghos-block-angebote-grid__grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
.ghos-block-angebote-grid__leer {
text-align: center;
padding: 3rem 1rem;
color: var(--ghos-color-text-muted, #777);
border: 1px dashed var(--ghos-color-border, #e2dfd5);
border-radius: 12px;
}
/* ════════════════════════════════════════════════════════════════════
v1.39.0 — Buchungs-Kalender: Range-Highlight + Validierung-UI
Wird von public/assets/js/buchung-kalender.js dynamisch befüllt.
════════════════════════════════════════════════════════════════════ */
.ghos-kal-tag {
text-align: center;
padding: .35rem 0;
font-size: .9rem;
font-variant-numeric: tabular-nums;
position: relative;
transition: background-color .12s ease, color .12s ease;
}
/* Vergangenheit oder über Vorschau-Ende hinaus */
.ghos-kal-tag--inaktiv {
opacity: .3;
cursor: default;
}
/* Belegt — rot */
.ghos-kal-tag--blockiert {
background: rgba(220, 40, 40, .15);
color: #a01;
cursor: not-allowed;
border-radius: .25rem;
}
/* Frei und auswählbar — dezent grün */
.ghos-kal-tag--frei {
background: rgba(40, 160, 80, .12);
color: #1a6b34;
cursor: pointer;
border-radius: .25rem;
}
.ghos-kal-tag--frei:hover {
background: rgba(40, 160, 80, .25);
}
/* Anreise- und Abreise-Tag — kräftige Akzentfarbe */
.ghos-kal-tag--start,
.ghos-kal-tag--ende {
background: var(--ghos-akzent, #773e18) !important;
color: #fff !important;
font-weight: 600;
cursor: pointer;
}
.ghos-kal-tag--start { border-radius: .25rem 0 0 .25rem; }
.ghos-kal-tag--ende { border-radius: 0 .25rem .25rem 0; }
.ghos-kal-tag--start.ghos-kal-tag--ende {
/* Wenn Start == Ende (1 Tag), beide Rundungen */
border-radius: .25rem;
}
/* Tage zwischen Anreise und Abreise — Range-Body */
.ghos-kal-tag--range {
background: color-mix(in srgb, var(--ghos-akzent, #773e18) 22%, transparent);
color: var(--ghos-akzent, #773e18);
font-weight: 500;
border-radius: 0;
cursor: pointer;
}
/* Hover-Preview wenn Anreise gewählt, Abreise nicht — heller */
.ghos-kal-tag--preview {
background: color-mix(in srgb, var(--ghos-akzent, #773e18) 10%, rgba(40, 160, 80, .12));
color: var(--ghos-akzent, #773e18);
cursor: pointer;
}
/* Validierungs-Fehler-Block unter dem Submit-Button */
.ghos-buchen-fehler {
margin-top: .65rem;
padding: .65rem .85rem;
background: #fff4f4;
border: 1px solid #ecbcbc;
border-radius: 4px;
color: #9a2a2a;
font-size: .88rem;
line-height: 1.4;
}
.ghos-buchen-fehler[hidden] { display: none; }
/* Pflichtfeld-Hervorhebung wenn Validierung fehlschlägt */
.ghos-buchen-feld--fehler {
border-color: #c84a4a !important;
background: #fff8f8;
}
/* ════════════════════════════════════════════════════════════════════
/buchen — Filter-Bar + Karten + Empty-State
v1.54.7 — Vorher fehlten alle .ghos-buchen-*-Klassen in
app-public.css; sie existierten nur in app.css (Admin) und konnten
im öffentlichen Layout nicht greifen, weil das Frontend NUR
app-public.css lädt. Form-Felder rendeten ohne Padding/Border,
Karten-Layout war komplett unstyled.
Var-Mapping vs. Admin-CSS:
--ghos-akzent-zart → --ghos-primary-soft
--ghos-akzent → --ghos-primary
--ghos-surface → #fff (Public hat kein Surface-Var)
--ghos-border → --ghos-border (gleich)
════════════════════════════════════════════════════════════════════ */
.ghos-buchen-filter-section {
background: var(--ghos-primary-soft, rgba(0, 0, 0, .03));
}
.ghos-buchen-filter {
background: #fff;
border: 1px solid var(--ghos-border, rgba(0, 0, 0, .1));
border-radius: .6rem;
padding: 1rem 1.25rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.ghos-buchen-filter__felder {
display: grid;
grid-template-columns: 1fr 1fr 100px auto;
gap: 1rem;
align-items: end;
}
.ghos-buchen-filter__feld {
display: flex;
flex-direction: column;
font-size: .82rem;
font-weight: 500;
gap: .25rem;
}
.ghos-buchen-filter__feld > span {
opacity: .8;
}
.ghos-buchen-filter__feld input {
padding: .5rem .65rem;
border: 1px solid var(--ghos-border, rgba(0, 0, 0, .15));
border-radius: .3rem;
font: inherit;
background: #fff;
}
.ghos-buchen-filter__feld input:focus {
outline: 2px solid var(--ghos-primary, #2c5f3f);
outline-offset: 1px;
}
.ghos-buchen-filter__aktionen {
display: flex;
gap: .5rem;
align-items: center;
}
.ghos-buchen-filter__aktionen .ghos-btn {
white-space: nowrap;
}
.ghos-buchen-filter__status {
margin-top: .75rem;
font-size: .9rem;
min-height: 1.2em;
padding: 0;
border-radius: .3rem;
transition: background .15s, padding .15s;
}
.ghos-buchen-filter__status:not(:empty) {
padding: .5rem .75rem;
background: var(--ghos-primary-soft, #f5f5f0);
}
.ghos-buchen-filter__status--ok {
background: #e8f5e8;
color: #1f5e2c;
}
.ghos-buchen-filter__status--warn {
background: #fff7e0;
color: #7a5a00;
}
.ghos-buchen-filter__status--fehler {
background: #fde8e8;
color: #8a1f1f;
}
@media (max-width: 720px) {
.ghos-buchen-filter__felder {
grid-template-columns: 1fr;
}
.ghos-buchen-filter__feld--klein {
max-width: 8rem;
}
.ghos-buchen-filter__aktionen {
justify-content: flex-start;
}
.ghos-buchen-filter__aktionen .ghos-btn {
flex: 1;
}
}
/* v1.54.7 — Zart-Button-Variante. Im Admin-CSS gibt es das, im public-
Button-System bisher nicht. Hier minimal nachgereicht, damit der
„Zurücksetzen"-Button bei der Filter-Bar einen visuellen Rahmen hat. */
.ghos-btn--zart {
background: transparent;
color: var(--ghos-text, #1f2329);
border: 1px solid var(--ghos-border, rgba(0, 0, 0, .15));
}
.ghos-btn--zart:hover {
background: var(--ghos-primary-soft, #f5f5f0);
color: var(--ghos-primary, #2c5f3f);
}
/* ─── Karten-Layout (Häuser/Räume-Ergebnisliste) ──────────────────── */
.ghos-buchen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
gap: 1.25rem;
margin-top: 1.25rem;
}
.ghos-buchen-gruppe {
margin-top: 2rem;
}
.ghos-buchen-gruppe:first-child {
margin-top: 0;
}
.ghos-buchen-karte {
background: #fff;
border: 1px solid var(--ghos-border, rgba(0, 0, 0, .1));
border-radius: .5rem;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: box-shadow .12s, transform .12s;
}
.ghos-buchen-karte:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
transform: translateY(-2px);
}
.ghos-buchen-karte__bild {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
background: #f0eee8;
}
.ghos-buchen-karte__bild--leer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4/3;
background: var(--ghos-primary-soft, #f5f5f0);
color: var(--ghos-text-soft, #8c95a1);
font-size: .85rem;
}
.ghos-buchen-karte__inhalt {
padding: 1rem 1.25rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.ghos-buchen-karte--raum .ghos-buchen-karte__inhalt {
padding: 1.25rem;
}
.ghos-buchen-karte__meta {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
flex-wrap: wrap;
font-size: .85rem;
color: var(--ghos-text-mute, #5b6470);
padding-top: .75rem;
}
.ghos-buchen-karte__kapa {
color: var(--ghos-text-mute, #5b6470);
}
.ghos-buchen-karte__preis {
font-weight: 600;
color: var(--ghos-text, #1f2329);
font-size: 1rem;
}
.ghos-buchen-karte__preis small {
font-weight: 400;
color: var(--ghos-text-mute, #5b6470);
font-size: .8rem;
}
.ghos-buchen-karte__preis--leer {
color: var(--ghos-text-soft, #8c95a1);
font-weight: 400;
font-size: .85rem;
}
.ghos-buchen-karte__badge {
display: inline-block;
padding: .15rem .55rem;
border-radius: 99px;
font-size: .75rem;
font-weight: 500;
letter-spacing: .02em;
text-transform: uppercase;
background: var(--ghos-primary-soft, #f5f5f0);
color: var(--ghos-primary, #2c5f3f);
margin-bottom: .5rem;
align-self: flex-start;
}
.ghos-buchen-karte__badge--frei {
background: #d1fadf;
color: #1f5e2c;
}
.ghos-buchen-karte__badge--blockiert {
background: #fde8e8;
color: #8a1f1f;
}
.ghos-buchen-karte__badge--zuklein {
background: #fff3d6;
color: #7a5a00;
}
.ghos-buchen-karte--frei {
border-color: #74c186;
}
.ghos-buchen-karte--blockiert,
.ghos-buchen-karte--zuklein {
opacity: .65;
filter: grayscale(.4);
}
.ghos-buchen-karte--blockiert:hover,
.ghos-buchen-karte--zuklein:hover {
opacity: .85;
}
.ghos-buchen-leer {
margin-top: 1.5rem;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1px dashed var(--ghos-border, rgba(0, 0, 0, .15));
border-radius: .4rem;
font-size: .95rem;
opacity: .75;
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════
v1.55.0 — UI-VEREINHEITLICHUNG (Frontend)
════════════════════════════════════════════════════════════════════
Parallel zu app.css — Lücken im Frontend-Design-System schließen.
Backend und Frontend teilen sich konzeptuell die gleichen
Bausteine (Button-Vollsatz, Code-Blöcke, Tabellen-Schliff), aber
die Token-Namen unterscheiden sich (--ghos-primary vs --ghos-akzent,
--ghos-border vs --ghos-trennlinie). Beide Welten werden hier
sauber gefasst.
──────────────────────────────────────────────────────────────────── */
/* ── BUTTON-ALIAS-VARIANTEN (falls Views beide Welten mischen) ──────── */
.ghos-btn--zart,
.ghos-btn--sekundaer,
.ghos-btn--neutral {
background: transparent;
border: 1px solid var(--ghos-border, #e3e1da);
color: var(--ghos-text-mute, #5b6470);
}
.ghos-btn--zart:hover,
.ghos-btn--sekundaer:hover,
.ghos-btn--neutral:hover {
background: var(--ghos-bg-creme, #faf6ef);
border-color: var(--ghos-border-stark, #c5c2b6);
color: var(--ghos-text, #1f2329);
}
.ghos-btn--primary {
/* Englischer Alias auf --primaer */
background: var(--ghos-primary, #2c5f3f);
border: 1px solid var(--ghos-primary, #2c5f3f);
color: #fff;
}
.ghos-btn--primary:hover {
background: var(--ghos-primary-dark, #1f4630);
border-color: var(--ghos-primary-dark, #1f4630);
}
/* ── PRE / CODE-BLÖCKE ────────────────────────────────────────────────
Auch im Frontend kann ein auftauchen (z.B. Anfrage-Mail-Detail
im Mandant-Bereich). Einheitliche Card-Optik statt Browser-Default. */
.ghos-pre,
.ghos-public-pre {
margin: 0;
padding: .85rem 1rem;
background: var(--ghos-bg-creme, #faf6ef);
border: 1px solid var(--ghos-border, #e3e1da);
border-radius: var(--ghos-radius, 8px);
color: var(--ghos-text, #1f2329);
font-family: var(--ghos-font-mono, ui-monospace, 'SF Mono', monospace);
font-size: .85rem;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
max-height: 480px;
}
/* ── TABELLEN ──────────────────────────────────────────────────────────
Frontend-Tabellen-Helper, falls in Buchungsbestätigungen oder
Faktura-Übersichten Tabellen erscheinen. */
.ghos-public-tabelle {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
}
.ghos-public-tabelle thead th {
text-align: left;
font-weight: 600;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ghos-text-mute, #5b6470);
border-bottom: 1px solid var(--ghos-border, #e3e1da);
padding: .65rem .85rem;
}
.ghos-public-tabelle tbody td {
padding: .75rem .85rem;
border-bottom: 1px solid var(--ghos-border, #e3e1da);
}
.ghos-public-tabelle tbody tr:last-child td { border-bottom: none; }
.ghos-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--ghos-border, #e3e1da);
border-radius: var(--ghos-radius, 8px);
background: #fff;
}
/* ── DETAILS / SUMMARY ────────────────────────────────────────────────
Konsistentes Disclosure-Pattern. */
details.ghos-public-details {
margin: .5rem 0;
}
details.ghos-public-details > summary {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: .4rem;
font-weight: 500;
font-size: .95rem;
color: var(--ghos-primary, #2c5f3f);
list-style: none;
padding: .25rem 0;
}
details.ghos-public-details > summary::-webkit-details-marker { display: none; }
details.ghos-public-details > summary::before {
content: "";
width: 0; height: 0;
border-left: 4px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform .15s ease;
}
details.ghos-public-details[open] > summary::before {
transform: rotate(90deg);
}
/* ── KEYBOARD-FOCUS ───────────────────────────────────────────────────
Sichtbare Focus-Outline für Tastaturnutzer, ersetzt Browser-Default. */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--ghos-primary, #2c5f3f);
outline-offset: 2px;
border-radius: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--ghos-primary, #2c5f3f);
outline-offset: 1px;
}