/* Tresen · Website des Betriebs (AP-42): Start, Liste, Detailseiten. Gleiche Regeln wie bauteile.css, geprüft in
   tests/test_designsystem.py. Die Farbe der Art trägt jede Karte; frei, knapp und belegt zeigen die Stempel. */

.website-nav { display: flex; flex-wrap: wrap; gap: var(--s1); }
.website-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-s);
  color: var(--tinte); font-weight: 600; text-decoration: none; }
.website-nav a:hover { background: var(--flaeche-2); }
.website-nav a[aria-current="page"] { background: var(--aktion-zart); color: var(--aktion); }
/* ED-06: Fuß mit den Seiten aus dem Editor und den festen Rechtstexten; Zeilenumbruch statt Überlauf am Telefon. */
.website-fuss { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-bottom: var(--s2); }
.website-fuss a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.website-fuss a[aria-current="page"] { color: var(--aktion); }

.website-kopf { display: grid; gap: var(--s4); }
.website-kopf h1 { font-family: var(--anzeige); font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; }
.website-suche { display: grid; gap: var(--s3); padding: var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); }
.website-suche fieldset, .website-filter fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.website-suche legend, .website-filter legend { font-size: 0.875rem; font-weight: 700; padding: 0; }
@media (min-width: 48rem) {
  .website-suche { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}

/* Auswahl als Chips: Funnels mit Knöpfen, ohne Aufklappliste. Das Optionsfeld bleibt bedienbar, nur unsichtbar. */
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { background: var(--aktion-zart); border-color: var(--aktion); color: var(--aktion); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.chip { position: relative; cursor: pointer; min-height: 44px; text-decoration: none; }
.chip small { color: var(--leise); font-weight: 400; }

.website-abschnitt { display: grid; gap: var(--s3); }
.website-abschnitt h2, .angebot__abschnitt h2 { font-family: var(--anzeige); margin: 0; }

.angebotskarten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.angebotskarte { display: grid; height: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  overflow: hidden; color: var(--tinte); text-decoration: none; }
.angebotskarte:hover { border-color: var(--a); }
.angebotskarte__bild { display: block; aspect-ratio: 4 / 3; background: var(--flaeche-2);
  border-bottom: 4px solid var(--a); }
.angebotskarte__text { display: grid; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); align-content: start; }
.angebotskarte__name { font-family: var(--anzeige); font-size: 1.15rem; }
.angebotskarte__kurz { color: var(--leise); font-size: 0.9rem; }
.angebotskarte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.angebotskarte__hinweis { font-size: 0.875rem; color: var(--leise); }
.angebotskarte__preis { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1); }
.angebotskarte__preis small, .angebot__preis small { color: var(--leise); }
.preisschild { white-space: nowrap; }

.terminliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.terminliste__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.terminliste__zeile a, .terminliste__zeile > span:first-child { display: grid; gap: var(--s1); color: var(--tinte); text-decoration: none; }

.website-liste { display: grid; gap: var(--s5); align-items: start; }
.website-filter { display: grid; gap: var(--s4); padding: var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); }
.website-ergebnis { display: grid; gap: var(--s4); min-width: 0; }
.website-sortierung { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; color: var(--leise); margin: 0; }
.website-sortierung a { display: inline-flex; align-items: center; min-height: 44px; color: var(--aktion); }
@media (min-width: 60rem) { .website-liste { grid-template-columns: 18rem minmax(0, 1fr); } }

.angebot { display: grid; gap: var(--s5); }
.angebot__kopf { display: grid; gap: var(--s3); }
.angebot__kopf h1 { font-family: var(--anzeige); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0; }
.angebot__kopf p { margin: 0; }
.angebot__bild { max-width: 28rem; border-radius: var(--r-l); border: 1px solid var(--linie); }
.angebot__kurz { font-size: 1.1rem; color: var(--leise); }
.angebot__preis { display: flex; align-items: center; gap: var(--s2); }
.angebot__abschnitt { display: grid; gap: var(--s3); padding: var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); }
.angebot__text { white-space: pre-line; max-width: 65ch; margin: 0; }
.angebot__ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.formular--zeile { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); }

.kalender__blaettern { display: flex; justify-content: space-between; gap: var(--s3); margin: 0; }
.kalender__blaettern a { display: inline-flex; align-items: center; min-height: 44px; color: var(--aktion); }
.kalender { table-layout: fixed; }
.kalender td { vertical-align: top; padding: var(--s1); height: 3.25rem; border-top: 1px solid var(--linie); }
.kalender__tag { display: table-cell; }
.kalender__tag span { display: block; font-weight: 700; }
.kalender__tag small { display: block; font-size: 0.7rem; }
.kalender__tag--frei small { color: var(--frei); }
.kalender__tag--knapp { background: var(--gehalten-zart); }
.kalender__tag--knapp small { color: var(--gehalten); }
.kalender__tag--belegt { background: var(--flaeche-2); }
.kalender__tag--belegt span { text-decoration: line-through; color: var(--leise); }
.kalender__tag--vorbei span { color: var(--leise); font-weight: 400; }

.impressum { font-style: normal; line-height: 1.6; }

/* Website-Editor (AP-45): Zahlen-Block und Abstände */
.website-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s3); }
.website-zahl { display: grid; gap: var(--s1); }
.website-zahl b { font-family: var(--anzeige); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.website-abstand--klein { height: var(--s3); }
.website-abstand--mittel { height: var(--s5); }
.website-abstand--gross { height: var(--s6); }

/* Bilder aus dem Studio (AP-45 Teil 3): ein Bild in voller Breite, eine Galerie als Raster; nie breiter als die Seite. */
.website-bilder--galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s3); }
.website-bilder--galerie h2 { grid-column: 1 / -1; }
.website-bild { margin: 0; display: grid; gap: var(--s1); }
.website-bild img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.website-bild figcaption { color: var(--leise); font-size: 0.9rem; }
.kopf__logo { height: 2.5rem; width: auto; max-width: 10rem; object-fit: contain; vertical-align: middle; margin-inline-end: var(--s2); }
/* Beiträge (AP-45 Teil 4): Karten im Raster, das Bild führt; der Titel ist der Link. */
.beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: 0; }
.beitrag-karte { display: grid; gap: var(--s2); align-content: start; }
.beitrag-karte img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.beitrag-karte__text { display: grid; gap: var(--s1); }
.beitrag-karte__text h3 { margin: 0; font-family: var(--anzeige); }
.beitrag-karte__text small { color: var(--leise); }
.beitrag-karte__text p { margin: 0; }
/* Kasse und Kundenkonto (AP-43): einspaltig, ruhig und auch bei 320 px ohne horizontales Schieben. */
.schmal, .kasse { max-width: 48rem; }
.kassenpositionen, .kontovorgaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.kassenpositionen li, .kontovorgaenge li, .kassensumme { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s2); padding: var(--s3); border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.kassensumme { font-size: 1.1rem; border-width: 2px; }
.auswahl { display: flex; align-items: flex-start; gap: var(--s2); max-width: 42rem; }
.auswahl input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
/* Bewertungen (AP-98) */
.bewertungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.sterne { font-size: 1.15rem; letter-spacing: 0.1em; color: var(--aktion); margin: 0; }
.bewertung__antwort { border-left: 3px solid var(--linie); padding-left: var(--s3); }
/* Service-Zeiten (AP-98): freie Beginne als Auswahl, die auch schmal umbricht. */
.zeitwahl { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; margin: 0; inline-size: 100%; }
.zeitwahl legend { padding: 0; margin-block-end: var(--s2); font-weight: 600; }
.zeitwahl__zeit { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s3);
  border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
/* Gestaltungen (AP-99): Farben, Schrift und Ecken kommen aus /gestaltung.css; hier steht nur der Aufbau, der eine
   Gestaltung von der anderen unterscheidet. data-stil sitzt am Dokument, gesetzt aus der veröffentlichten Wahl. */
.website-kopf { padding-block: var(--s6); }
.website-kopf p { max-width: 60ch; font-size: 1.1rem; color: var(--leise); margin: 0; }
.website-kopf .reihe { color: var(--tinte); }
[data-stil="ritter"] .website-kopf h1 { font-weight: 700; letter-spacing: -0.01em; }
[data-stil="marmor"] .website-kopf { text-align: center; justify-items: center; padding-block: var(--s8); }
[data-stil="marmor"] h1, [data-stil="marmor"] h2, [data-stil="marmor"] h3 { font-weight: 400; letter-spacing: 0.01em; }
[data-stil="marmor"] .website-abschnitt { padding-block: var(--s6); border-top: 1px solid var(--linie); }
[data-stil="marmor"] .angebotskarte { border-color: var(--flaeche); }
[data-stil="marmor"] .website-nav a { font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
[data-stil="nacht"] .website-kopf { padding: var(--s7) var(--s5); background: var(--flaeche-2); border-radius: var(--r-l); }
[data-stil="nacht"] .website-kopf h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.5rem); }
[data-stil="nacht"] .website-abschnitt h2 { font-weight: 800; }
[data-stil="nacht"] .angebotskarte:hover { border-color: var(--aktion); }
[data-stil="leise"] h1, [data-stil="leise"] h2, [data-stil="leise"] h3 { font-weight: 600; letter-spacing: -0.01em; }
[data-stil="leise"] .website-kopf h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
[data-stil="leise"] .website-abschnitt { padding-top: var(--s4); border-top: 1px solid var(--linie); }
[data-stil="leise"] .website-abschnitt h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise); }
[data-stil="leise"] .angebotskarte__bild { border-bottom-width: 1px; }
[data-stil="weite"] .website-kopf { padding-block: var(--s8); }
[data-stil="weite"] .website-kopf h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 0.95; text-transform: uppercase; }
[data-stil="weite"] .website-abschnitt { padding-top: var(--s5); border-top: 3px solid var(--tinte); }
[data-stil="weite"] .website-abschnitt h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em;
  text-transform: uppercase; }
[data-stil="weite"] .angebotskarte__bild { aspect-ratio: 16 / 9; }
[data-stil="weite"] .knopf { text-transform: uppercase; letter-spacing: 0.04em; }
.bewertungen--raster { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.website-gutschein { padding: var(--s5); background: var(--flaeche-2); border-radius: var(--r-l); justify-items: start; }
.website-gutschein h2, .website-gutschein p { margin: 0; }

/* Extras und Kaution (AP-102): Pflicht offen beim Preis, Wahl als Häkchen, nie vorgewählt; Extrazeilen in der Kasse
   eingerückt unter ihrem Eintrag; die Kaution im Konto als eigener Satz. */
.angebot__dazu { color: var(--leise); font-size: 0.9rem; }
.extras-wahl { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; inline-size: 100%; }
.extras-wahl legend { padding: 0; margin-block-end: var(--s2); font-weight: 600; }
.extras-wahl__eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 44px; }
.extras-wahl__eintrag small { color: var(--leise); }
.kassenpositionen li.kassenpositionen__extra { padding-inline-start: var(--s5); color: var(--leise); font-size: 0.9rem; }
.kassenpositionen__zeit { display: block; font-weight: 400; font-size: 0.9rem; color: var(--leise); }
.kontokaution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 0.9rem; color: var(--leise); }

/* Gestaltung „Court“ nach der Lindenhof-Tennis-Website (Florian 06.10.2026): Navigation als schwebende Insel,
   sehr große Überschriften mit enger Laufweite, Knöpfe als Pillen, Karten im Doppelrahmen (Schale und Kern mit
   konzentrischen Radien) und „Heute frei“ als dunkle Kachel auf Courtgrün. Farben nur aus den Tokens. */
[data-stil="court"] body { -webkit-font-smoothing: antialiased; }
[data-stil="court"] .kopf { position: sticky; top: var(--s4); z-index: 10; width: max-content; max-width: calc(100% - var(--s6));
  margin: var(--s4) auto 0; padding: var(--s2) var(--s2) var(--s2) var(--s5); gap: var(--s5); border: 0;
  border-radius: var(--r-pille); background: color-mix(in srgb, var(--flaeche) 72%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px var(--linie), 0 12px 32px -16px color-mix(in srgb, var(--aktion) 25%, transparent); }
[data-stil="court"] .kopf__marke { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
[data-stil="court"] .kopf__marke::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem;
  margin-inline-start: var(--s1); border-radius: var(--r-pille); background: var(--aktion); vertical-align: 0.15em; }
[data-stil="court"] .website-nav { gap: var(--s1); }
[data-stil="court"] .website-nav a { font-weight: 500; font-size: 0.95rem; color: var(--leise); border-radius: var(--r-pille); }
[data-stil="court"] .website-nav a:hover { color: var(--tinte); background: color-mix(in srgb, var(--tinte) 5%, transparent); }
[data-stil="court"] .website-nav a[aria-current="page"] { color: var(--tinte); background: color-mix(in srgb, var(--tinte) 7%, transparent); }
[data-stil="court"] .inhalt { max-width: 82rem; padding-inline: var(--s7); gap: var(--s9); }
[data-stil="court"] h1, [data-stil="court"] h2, [data-stil="court"] h3 { font-weight: 600; text-wrap: balance; }
[data-stil="court"] .website-kopf { padding-block: var(--s9) var(--s6); gap: var(--s6); }
[data-stil="court"] .website-kopf h1 { font-size: clamp(3.5rem, 8.4vw, 8.25rem); line-height: 0.9; letter-spacing: -0.05em; }
[data-stil="court"] .website-kopf--bild h1 { font-size: clamp(3.5rem, 6.6vw, 7rem); }
[data-stil="court"] .website-kopf p { font-size: 1.2rem; line-height: 1.6; max-width: 34em; }
[data-stil="court"] .website-abschnitt { gap: var(--s7); }
[data-stil="court"] .website-abschnitt > h2 { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 0.95; letter-spacing: -0.04em; }
[data-stil="court"] .knopf { min-height: 52px; padding: var(--s2) var(--s5); border-radius: var(--r-pille); border: 0; font-weight: 500;
  font-size: 0.95rem;
  background: var(--tinte); color: var(--grund); }
[data-stil="court"] .knopf::after { content: "↗"; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem;
  height: 2.5rem; margin-inline-end: calc(-1 * var(--s4)); border-radius: var(--r-pille);
  background: color-mix(in srgb, var(--grund) 14%, transparent); }
[data-stil="court"] .knopf--zweit { background: color-mix(in srgb, var(--tinte) 6%, transparent); color: var(--tinte); }
[data-stil="court"] .knopf--zweit::after { background: var(--flaeche); }
[data-stil="court"] .knopf:hover { filter: none; background: var(--aktion); color: var(--aktion-auf); }
[data-stil="court"] .knopf:active { transform: scale(0.98); }
[data-stil="court"] .angebotskarten { gap: var(--s4); }
[data-stil="court"] .angebotskarte { padding: var(--s1); border: 0; border-radius: var(--r-l);
  background: color-mix(in srgb, var(--tinte) 4%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 4%, transparent); }
[data-stil="court"] .angebotskarte__bild, [data-stil="court"] .angebotskarte__text { background: var(--flaeche); }
[data-stil="court"] .angebotskarte__bild { border: 0; border-radius: var(--r) var(--r) 0 0; object-fit: cover; width: 100%; }
[data-stil="court"] .angebotskarte__text { border-radius: 0 0 var(--r) var(--r); padding: var(--s5); }
[data-stil="court"] .angebotskarte__name { font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; }
[data-stil="court"] .angebotskarte:hover .angebotskarte__text { background: var(--flaeche-2); }
/* „Heute frei“ als dunkle Kachel: Courtgrün mit heller Schrift, die Karten darin hell wie Stundenwahl. */
[data-stil="court"] .website-abschnitt--heute_frei { padding: var(--s7); border-radius: var(--r-l); background: var(--aktion);
  color: var(--aktion-auf); box-shadow: 0 32px 64px -32px color-mix(in srgb, var(--aktion) 40%, transparent); }
[data-stil="court"] .website-abschnitt--heute_frei > h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -0.03em; }
[data-stil="court"] .website-abschnitt--heute_frei .hinweis { color: inherit; opacity: 0.8; }
[data-stil="court"] .website-abschnitt--kurse .website-termine { list-style: none; margin: 0; padding: 0; display: grid; }
[data-stil="court"] .website-abschnitt--kurse .website-termine li { padding-block: var(--s3); border-top: 1px solid var(--linie); }
[data-stil="court"] .website-zahl b { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
[data-stil="court"] .website-gutschein { padding: var(--s7); border-radius: var(--r-l); background: var(--flaeche);
  box-shadow: 0 0 0 var(--s1) color-mix(in srgb, var(--tinte) 4%, transparent), 0 32px 64px -32px color-mix(in srgb, var(--aktion) 28%, transparent); }
[data-stil="court"] .website-gutschein > h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
[data-stil="court"] .website-bild img { border-radius: var(--r-l); }
[data-stil="court"] .fuss { max-width: 82rem; margin: 0 auto; padding: var(--s8) var(--s7) var(--s7); }
[data-stil="court"] .website-fuss a { text-decoration: none; }
@media (max-width: 48rem) {
  [data-stil="court"] .inhalt { padding-inline: var(--s4); gap: var(--s8); }
  [data-stil="court"] .kopf { padding-inline-start: var(--s4); gap: var(--s2); }
  [data-stil="court"] .website-abschnitt--heute_frei, [data-stil="court"] .website-gutschein { padding: var(--s5); }
}
/* Kopf und Gutschein mit Bild (Lindenhof-Aufbau): ab Tabletbreite Text und Bild nebeneinander, darunter gestapelt. */
.website-kopf__text, .website-gutschein__text { display: grid; gap: var(--s4); align-content: center; justify-items: start; min-width: 0; }
.website-augenbraue { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leise); }
.website-bildfeld { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-l); }
@media (min-width: 60rem) {
  .website-kopf--bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s7); }
  .website-gutschein--bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
[data-stil="court"] .website-augenbraue { padding: var(--s1) var(--s3); border-radius: var(--r-pille); font-weight: 500;
  background: color-mix(in srgb, var(--flaeche) 60%, transparent); box-shadow: 0 0 0 1px var(--linie); }
[data-stil="court"] .website-kopf--bild .website-bildfeld { aspect-ratio: 4 / 5; height: auto; transform: rotate(1.5deg);
  border: var(--s1) solid var(--flaeche);
  box-shadow: 0 32px 64px -32px color-mix(in srgb, var(--aktion) 28%, transparent); }
[data-stil="court"] .website-gutschein--bild { padding: 0; overflow: hidden; }
[data-stil="court"] .website-gutschein--bild .website-gutschein__text { padding: var(--s7); }
[data-stil="court"] .website-gutschein--bild .website-bildfeld { border-radius: 0; min-height: 18rem; }
@media (max-width: 48rem) { [data-stil="court"] .website-kopf--bild .website-bildfeld { transform: none; } }
/* Termine als Zeilen: wann, was, wie viel frei; schmal untereinander. */
.website-termine { list-style: none; margin: 0; padding: 0; display: grid; }
.website-termine li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding-block: var(--s3); border-top: 1px solid var(--linie); }
.website-termine__wann { color: var(--leise); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.website-termine__frei { color: var(--leise); font-size: 0.85rem; }
@media (max-width: 40rem) { .website-termine li { grid-template-columns: minmax(0, 1fr) auto; }
  .website-termine__wann { grid-column: 1 / -1; } }
/* Court: Bento wie auf der Lindenhof-Seite. Ab Desktopbreite stehen „Heute frei“ und die Termine nebeneinander;
   im Editor packt das Raster dicht, damit die Einfügestellen dazwischen die Kacheln nicht trennen. */
[data-stil="court"] .website-termine a { font-weight: 500; text-decoration: none; color: var(--tinte); }
[data-stil="court"] .website-termine__wann { font-family: "Geist Mono", ui-monospace, monospace; }
[data-stil="court"] .website-termine .stempel { border: 0; padding: 0; font-size: 0.85rem; font-weight: 500; }
[data-stil="court"] .website-termine .stempel::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: var(--r-pille);
  background: currentColor; }
[data-stil="court"] .website-abschnitt--kurse { padding: var(--s6); border-radius: var(--r-l); background: var(--flaeche);
  box-shadow: 0 0 0 var(--s1) color-mix(in srgb, var(--tinte) 4%, transparent), 0 32px 64px -32px color-mix(in srgb, var(--aktion) 28%, transparent); }
[data-stil="court"] .website-abschnitt--kurse > h2 { font-size: 1.4rem; letter-spacing: -0.02em; }
[data-stil="court"] .website-zahlen { padding: var(--s6); border-radius: var(--r-l); background: var(--flaeche); }
[data-stil="court"] .website-gutschein--bild .website-bildfeld { max-height: 24rem; }
@media (min-width: 60rem) {
  [data-stil="court"] .inhalt, [data-stil="court"] .leinwand { grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense; column-gap: var(--s4); }
  [data-stil="court"] .inhalt > *, [data-stil="court"] .leinwand > * { grid-column: 1 / -1; }
  [data-stil="court"] .inhalt > .website-abschnitt--heute_frei,
  [data-stil="court"] .leinwand > .leinwand__block[data-art="heute_frei"] { grid-column: span 7; }
  [data-stil="court"] .inhalt > .website-abschnitt--kurse,
  [data-stil="court"] .leinwand > .leinwand__block[data-art="kurse"] { grid-column: span 5; }
  [data-stil="court"] .leinwand > .leinwand__plus { justify-self: center; }
}
/* Text in zwei Spalten: links die Überschrift, rechts die Absätze (ab Desktopbreite). Ein einzelner Knopf bleibt so
   breit wie sein Wort. */
@media (min-width: 60rem) {
  .website-abschnitt--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-items: start; }
  .website-abschnitt--zwei > h2, .website-abschnitt--zwei > h3 { grid-row: span 6; }
  .website-abschnitt--zwei > p { grid-column: 2; margin: 0; }
}
p.website-abschnitt > .knopf { justify-self: start; }
[data-stil="court"] .website-abschnitt > p { font-size: 1.1rem; line-height: 1.65; color: var(--leise); max-width: 38em; margin: 0; }
[data-stil="court"] .website-abschnitt--zwei { row-gap: var(--s4); }
[data-stil="court"] .website-abschnitt--zwei > h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
[data-stil="court"] .website-standort { display: grid; gap: var(--s2); }
[data-stil="court"] .website-standort ul { list-style: none; margin: 0; padding: 0; display: grid; max-width: 32rem; }
[data-stil="court"] .website-standort li { padding-block: var(--s3); border-top: 1px solid var(--linie);
  font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
[data-stil="court"] .website-standort h3 { font-size: 1.2rem; letter-spacing: -0.02em; margin: 0; }
[data-stil="court"] .website-standort p { margin: 0; color: var(--leise); }
/* Fotos der Angebote (Lindenhof-Aufbau, N21): auf der Karte das Titelbild, auf der Detailseite groß mit einer Reihe
   kleiner Fotos darunter. */
img.angebotskarte__bild { width: 100%; height: auto; object-fit: cover; }
.angebot__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); max-width: 40rem; }
.angebot__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.angebot__foto--titel { grid-column: 1 / -1; border-radius: var(--r-l); }
/* Court auf der Detailseite: ruhigere Abschnittsüberschriften und ein Kalender, der auch in der Seitenspalte passt. */
[data-stil="court"] .angebot__abschnitt { border: 0; border-radius: var(--r-l);
  box-shadow: 0 0 0 var(--s1) color-mix(in srgb, var(--tinte) 4%, transparent), 0 32px 64px -32px color-mix(in srgb, var(--aktion) 22%, transparent); }
[data-stil="court"] .angebot__abschnitt h2 { font-size: 1.4rem; letter-spacing: -0.02em; }
[data-stil="court"] .angebot__kopf h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -0.03em; }
[data-stil="court"] .kalender { font-size: 0.8rem; }
[data-stil="court"] .kalender th, [data-stil="court"] .kalender td { overflow-wrap: normal; word-break: keep-all; }
[data-stil="court"] .kalender__tag small { font-size: 0.6rem; }
/* Bereiche nebeneinander (Taste-Vorlagen, AP-102): Ein Bereich mit eigener Breite steht in einer Hülle; sobald eine
   Seite eine solche Hülle hat, wird ihr Inhalt ab Desktopbreite ein Raster aus zwölf Spalten. Ohne Breite bleibt
   alles wie bisher untereinander. */
@media (min-width: 60rem) {
  .inhalt:has(> .website-bereich), .leinwand:has(> .leinwand__block:not([data-breite="voll"])) {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: var(--s4); }
  .inhalt:has(> .website-bereich) > *, .leinwand:has(> .leinwand__block:not([data-breite="voll"])) > * { grid-column: 1 / -1; }
  .inhalt > .website-bereich[data-breite="zwei_drittel"], .leinwand > .leinwand__block[data-breite="zwei_drittel"] { grid-column: span 8; }
  .inhalt > .website-bereich[data-breite="halb"], .leinwand > .leinwand__block[data-breite="halb"] { grid-column: span 6; }
  .inhalt > .website-bereich[data-breite="drittel"], .leinwand > .leinwand__block[data-breite="drittel"] { grid-column: span 4; }
  .leinwand:has(> .leinwand__block:not([data-breite="voll"])) > .leinwand__plus { justify-self: center; }
}
.website-bereich { display: grid; min-width: 0; }
.website-bereich > .website-abschnitt { height: 100%; }
/* Zahlen mit Titel und Bild: links das Bild, rechts Titel und Zahlen untereinander. */
.website-zahlen__inhalt { display: grid; gap: var(--s3); align-content: start; }
.website-zahlen__titel { margin: 0; }
.website-zahlen--bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
.website-zahlen--bild .website-bildfeld { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; border-radius: var(--r); }
[data-stil="court"] .website-zahlen--bild { padding: 0; overflow: hidden; }
[data-stil="court"] .website-zahlen--bild .website-bildfeld { border-radius: 0; }
[data-stil="court"] .website-zahlen--bild .website-zahlen__inhalt { padding: var(--s6) var(--s6) var(--s6) 0; }
[data-stil="court"] .website-zahlen__titel { font-size: 1.4rem; letter-spacing: -0.02em; }
/* In einem schmalen Bereich ist die Überschrift eine Kachelüberschrift, keine Abschnittsüberschrift. */
.website-bereich:not([data-breite="voll"]) .website-abschnitt > h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.15; }
[data-stil="court"] .website-bereich:not([data-breite="voll"]) .website-abschnitt > h2 { letter-spacing: -0.02em; }
/* „Heute frei“ als Uhrzeiten (Taste-Vorlage): je Angebot eine Zeile, die freien Stunden als Chips zum Buchen. */
.website-heute__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.website-heute__zeile { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(6rem, 1fr) minmax(0, 2fr); gap: var(--s3);
  align-items: center; padding-block: var(--s3); border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.website-heute__name { font-weight: 600; color: inherit; text-decoration: none; }
.website-heute__info { font-size: 0.85rem; opacity: 0.7; }
.website-heute__zeiten { display: flex; flex-wrap: wrap; gap: var(--s1); }
.website-heute__zeit { padding: var(--s1) var(--s2); border-radius: var(--r-s); font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.85rem; color: inherit; text-decoration: none; background: color-mix(in srgb, currentColor 10%, transparent); }
.website-heute__zeit:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
@media (max-width: 40rem) { .website-heute__zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
/* Kopf mit Karte „Heute noch frei“ über dem Bild (Taste-Vorlage). */
.website-kopf__bild { position: relative; }
.website-kopf__heute { position: absolute; left: calc(-1 * var(--s6)); bottom: var(--s6); display: grid; gap: var(--s2);
  padding: var(--s4); border-radius: var(--r-l); background: var(--flaeche); color: var(--tinte);
  box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--tinte) 35%, transparent); max-width: 18rem; }
.website-kopf__heute-stand { margin: 0; font-size: 0.8rem; color: var(--aktion); }
.website-kopf__heute-stand::before { content: "● "; }
.website-kopf__heute-name { font-weight: 600; font-size: 1.15rem; color: inherit; text-decoration: none; }
.website-kopf__heute .website-heute__zeit { border: 1px solid var(--linie); background: var(--flaeche); }
@media (max-width: 48rem) { .website-kopf__heute { position: static; margin-top: var(--s3); max-width: none; } }
.website-heute { align-content: start; }
.website-heute > .website-augenbraue { justify-self: start; color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.website-heute__hinweis { margin: 0; opacity: 0.8; }
/* Die Spalte der Website wächst nie über den Bildschirm hinaus; sonst zog ein breites Menü die ganze Seite seitlich
   auf (AP-102 Befund 32, Lindenhof am Handy). Im Court-Stil bricht das Menü am Handy in eine zweite Zeile um. */
.rahmen { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 48rem) {
  [data-stil="court"] .kopf { width: auto; flex-wrap: wrap; justify-content: center; border-radius: var(--r-l);
    padding: var(--s2) var(--s3); }
  [data-stil="court"] .website-nav { justify-content: center; }
  [data-stil="court"] .website-nav a { min-height: 40px; padding: 0 var(--s2); font-size: 0.9rem; }
}
[data-stil="court"] .website-heute > p, [data-stil="court"] .website-heute > .website-augenbraue { color: inherit; background: transparent; }