/* ========================================================================== Barockreitzentrum Heimsheim — belegung.css Modul "Belegungskalender". Setzt tokens.css und app.css voraus. Reihenfolge im : 1. tokens.css 2. app.css 3. belegung.css Farben ausschliesslich aus tokens.css. Kein eigener Farbwert. Inhalt: 01 Rahmen & Kopfzeile 02 Legende 03 Monatsraster 04 Monatstabelle 05 Tage & Zustaende 06 Weitere Monate 07 Naechste freie Wochenenden 08 Hinweis- & Fehlerbox 09 Motion ========================================================================== */ /* ========================================================================== 01 — RAHMEN & KOPFZEILE ========================================================================== */ .bk { /* Schraffur fuer "angefragt" — aus dem Messington abgeleitet, kein neuer Wert */ --bk-hatch: var(--brass-light); display: grid; gap: var(--sp-6); min-width: 0; } @supports (color: color-mix(in srgb, white 50%, transparent)) { .bk { --bk-hatch: color-mix(in srgb, var(--brass) 38%, transparent); } } .bk__bar { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: var(--hairline) solid var(--line-strong); } @media (min-width: 760px) { .bk__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-6); } .bk__meta { text-align: right; } } .bk__stand { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-hover); } .bk__hinweis { margin-top: var(--sp-1); font-size: var(--t-tiny); line-height: var(--lh-snug); color: var(--text-muted); max-width: 42ch; } @media (min-width: 760px) { .bk__meta .bk__hinweis { margin-left: auto; } } /* ========================================================================== 02 — LEGENDE ========================================================================== */ .bk-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); list-style: none; margin: 0; padding: 0; } .bk-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-tiny); color: var(--text-muted); } .bk-legend__swatch { flex: none; width: 1.05rem; height: 1.05rem; border-radius: var(--r-sm); } .bk-legend__swatch--frei { background-color: var(--ampel-frei-tint); box-shadow: inset 0 -3px 0 var(--ampel-frei); } .bk-legend__swatch--angefragt { background-color: var(--ampel-offen-tint); box-shadow: inset 0 -3px 0 var(--ampel-offen); } .bk-legend__swatch--vergeben { background-color: var(--ampel-belegt-tint); box-shadow: inset 0 -3px 0 var(--ampel-belegt); } /* ========================================================================== 03 — MONATSRASTER ========================================================================== */ .bk__months { display: grid; gap: var(--sp-7) var(--sp-gap); min-width: 0; } @media (min-width: 680px) { .bk__months { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .bk__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bk-month { min-width: 0; } .bk-month[hidden] { display: none; } /* ========================================================================== 04 — MONATSTABELLE ========================================================================== */ .bk-cal { width: 100%; table-layout: fixed; border-collapse: collapse; } /* Bleibt bewusst display: table-caption — sonst rutscht die Beschriftung unter die Wochentagszeile. */ .bk-cal__cap { caption-side: top; text-align: left; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: var(--hairline) solid var(--line-strong); } .bk-cal__month { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: var(--ls-heading); font-variation-settings: var(--fraunces-heading); color: var(--forest); } .bk-cal__year { margin-left: var(--sp-2); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--ls-label); color: var(--ink-faint); } .bk-cal__wd { padding: var(--sp-2) 0; font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); border-bottom: var(--hairline) solid var(--line); } .bk-cal__wd abbr { text-decoration: none; border: 0; cursor: help; } /* Wochenenden sind das, wonach gesucht wird — Spalte durchgehend abgesetzt */ .bk-cal__wd--we { color: var(--accent-hover); background-color: var(--brass-tint); } .bk-cell { padding: 0; border-bottom: var(--hairline) solid var(--line); vertical-align: middle; } .bk-cell--we { background-color: var(--brass-tint); } /* Leerzellen vor dem 1. und nach dem Monatsende bleiben ungefaerbt, damit das Band genau am letzten Tag endet. */ .bk-cell--leer.bk-cell--we { background-color: transparent; } .bk-cal tbody tr:last-child .bk-cell { border-bottom: 0; } /* ========================================================================== 05 — TAGE & ZUSTAENDE ========================================================================== */ .bk-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.4rem; margin-block: 3px; border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; font-variation-settings: var(--fraunces-small); line-height: 1; color: var(--text); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .bk-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); } .bk-day__num { pointer-events: none; } /* Heute: dezenter Punkt, zusaetzlich zum Text fuer Screenreader */ .bk-day--heute::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--r-pill); background-color: currentColor; opacity: .7; } /* Vergangen: ruhig, nicht interaktiv */ .bk-day--vergangen { color: var(--ink-faint); } /* Freies Wochenende: klickbar. Die Messinglinie laeuft ueber alle drei Tage durch und zeigt das Wochenende als eine Einheit. */ a.bk-day--wefrei { background-color: var(--ampel-frei-tint); color: var(--ampel-frei); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ampel-frei); } a.bk-day--wefrei:hover, a.bk-day--wefrei.is-we-hover { background-color: var(--ampel-frei); box-shadow: inset 0 -2px 0 var(--ampel-frei); color: #fff; } /* Zusammenhaengender Block: benachbarte Tage gleichen Zustands wachsen zu einem Balken zusammen, Rundung nur an den Aussenkanten. */ .bk-day--block { border-radius: 0; } .bk-day--block-solo { border-radius: var(--r-sm); } .bk-day--block-start { border-radius: var(--r-sm) 0 0 var(--r-sm); } .bk-day--block-ende { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .bk-day--vergeben { background-color: var(--ampel-belegt-tint); color: var(--ampel-belegt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ampel-belegt); } .bk-day--angefragt { background-color: var(--ampel-offen-tint); color: var(--ampel-offen); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ampel-offen); } /* ========================================================================== 06 — WEITERE MONATE ========================================================================== */ .bk__more { display: flex; justify-content: center; padding-top: var(--sp-2); } .bk__more[hidden] { display: none; } /* ========================================================================== 07 — NAECHSTE FREIE WOCHENENDEN ========================================================================== */ .bk-next { padding-top: var(--sp-5); border-top: var(--hairline) solid var(--line-strong); } .bk-next__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: var(--ls-heading); font-variation-settings: var(--fraunces-heading); color: var(--forest); margin-bottom: var(--sp-3); } .bk-next__list { list-style: none; margin: 0; padding: 0; } .bk-next__item + .bk-next__item { border-top: var(--hairline) solid var(--line); } .bk-next__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; text-decoration: none; } .bk-next__num { font-family: var(--font-display); font-size: var(--t-tiny); letter-spacing: var(--ls-num); font-variation-settings: var(--fraunces-small); color: var(--accent-hover); } .bk-next__date { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: var(--ls-heading); font-variation-settings: var(--fraunces-small); color: var(--forest); transition: transform var(--dur-fast) var(--ease-out-quart); } .bk-next__tag { font-size: var(--t-micro); } .bk-next__arrow { width: 15px; height: 15px; color: var(--accent-hover); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-quart); } .bk-next__link:hover .bk-next__arrow, .bk-next__link:focus-visible .bk-next__arrow { opacity: 1; transform: none; } .bk-next__link:hover .bk-next__date { transform: translateX(3px); } @media (max-width: 479px) { .bk-next__tag { display: none; } .bk-next__date { font-size: var(--t-base); } } /* ========================================================================== 08 — HINWEIS- & FEHLERBOX ========================================================================== */ .bk-note { font-size: var(--t-small); color: var(--text-muted); max-width: var(--measure); } .bk-fallback { display: grid; gap: var(--sp-4); padding: var(--sp-6); background-color: var(--forest-tint); border-left: 3px solid var(--brass); border-radius: var(--r-md); } .bk-fallback__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: var(--ls-heading); font-variation-settings: var(--fraunces-heading); color: var(--forest); } .bk-fallback__text { font-size: var(--t-small); color: var(--text-muted); max-width: 46ch; } /* ========================================================================== 09 — MOTION Nur opacity und transform. Bei reduzierter Bewegung nichts davon. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .bk-month { animation: bk-auf var(--dur-slow) var(--ease-out-quart) both; } .bk-month:nth-child(2) { animation-delay: 80ms; } .bk-month:nth-child(3) { animation-delay: 160ms; } } @keyframes bk-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bk-month { animation: none; } .bk-day, .bk-next__arrow, .bk-next__date { transition: none; } } @media print { .bk__more { display: none; } .bk-month[hidden] { display: block; } }