/*
Theme Name: The Believe Club
Theme URI: https://thebelieveclub.de
Author: Marvin Nowozin
Description: Eigenes Theme nach der Markenrichtlinie. Schwarz, Weiß, zwei Grautöne,
             keine Akzentfarbe. Gebaut für die volle Ausbaustufe, ausgeliefert wird Phase 1.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: tbc
*/

/* ── Schriften ────────────────────────────────────────────────────────────
   Beide als variable Fassung, Zeichensatz latin, lokal ausgeliefert.
   "Archivo Condensed" gibt es bei Google Fonts nicht als eigene Familie —
   die Richtlinie meint die schmale Breite von Archivo. Die variable Fassung
   trägt eine Breitenachse (62–125 %); Condensed entsteht über font-stretch,
   nicht über künstliches Schmalziehen durch den Browser.
   ──────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  /* Die Breitenachse ist auf 75 % festgesetzt und aus der Datei entfernt:
     Die Seite benutzt ausschliesslich diesen Schnitt, und die Variationsdaten
     für 62 % bis 125 % waren zwei Drittel der Datei. Der Wert hier muss dem
     festgesetzten entsprechen, sonst sucht der Browser eine Breite, die es
     nicht mehr gibt, und rechnet sich eine eigene aus. */
  font-stretch: 75%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ── Marke ────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Die Farben der Richtlinie, unverändert. */
  --tbc-schwarz: #000000;
  --tbc-weiss: #ffffff;
  --tbc-grau-dunkel: #3d3d3d;  /* 10,9:1 auf Weiß — für Fließtext zulässig */
  --tbc-grau: #7f7f7f;         /* 4,0:1 auf Weiß — NUR für Text ab 24px */
  --tbc-grau-hell: #c9c9c9;    /* 1,7:1 auf Weiß — nur Flächen und Linien */

  /* Die Rollen. Nur diese werden im dunklen Modus getauscht — die Farben
     der Richtlinie bleiben, was sie sind. */
  --tbc-grund: var(--tbc-weiss);
  --tbc-schrift: var(--tbc-schwarz);
  --tbc-schrift-leise: var(--tbc-grau-dunkel);
  --tbc-linie: var(--tbc-grau-hell);
  --tbc-flaeche: var(--tbc-grau-hell);
  --tbc-karte-filter: none;
  --tbc-logo-anzeige: block;
  --tbc-logo-anzeige-hell: none;

  --tbc-schrift-titel: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tbc-schrift-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tbc-breite-titel: 75%;   /* Condensed */

  --tbc-breite-text: 68ch;
  --tbc-breite-voll: 76rem;

  /* Der seitliche Rand der Seite. Steht als Variable, weil ihn mehrere
     Bausteine brauchen — als zweimal notierte Formel liefen sie auseinander,
     sobald einer eine Ausnahme bekam. */
  --tbc-rand: clamp(1.25rem, 4vw, 2.5rem);

  --tbc-abstand-s: 0.75rem;
  --tbc-abstand-m: 1.5rem;
  --tbc-abstand-l: 4rem;
  --tbc-abstand-xl: 8rem;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tbc-grund);
  color: var(--tbc-schrift);
  font-family: var(--tbc-schrift-text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden erzeugt einen Scroll-Container und macht
     position: sticky in allen Nachfahren wirkungslos. clip schneidet den
     Überlauf genauso ab, ohne diesen Nebeneffekt. */
  overflow-x: clip;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-wrap: balance;
  /* Bei 200 % Textgröße steht die H1 auf 80 px, der Container wächst aber
     nicht mit. Ohne Umbruch langer Wörter schiebt "UNTERNEHMER." die ganze
     Seite waagerecht auf.
     Getrennt wird trotzdem nicht: In Versalien liest sich "MIT-EINANDER"
     wie ein Fehler. Der Umbruch fängt nur den Notfall ab. */
  overflow-wrap: break-word;
  hyphens: manual;
}

h1 { font-size: clamp(2rem, 1rem + 6vw, 6.5rem); margin: 0 0 var(--tbc-abstand-m); }
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  margin: calc(var(--tbc-abstand-xl) * 0.95) 0 var(--tbc-abstand-m);
}
/* Die erste Überschrift eines Abschnitts braucht den Abstand nicht — den
   trägt dort schon der Abschnitt selbst. */
.tbc-abschnitt > h2:first-child,
.tbc-abschnitt > *:first-child + h2:first-of-type { margin-top: 0; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); margin: var(--tbc-abstand-m) 0 var(--tbc-abstand-s); }

p { max-width: var(--tbc-breite-text); }
a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--tbc-schrift); outline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }

/* ── Raster ───────────────────────────────────────────────────────────── */

/* Der Seitenrand ist Layout, keine Schrift — deshalb an die Fensterbreite
   gebunden statt an die Schriftgröße. Mit rem verschluckt er bei großer
   Textgröße den halben Bildschirm. */
.tbc-huelle {
  width: min(100% - var(--tbc-rand), var(--tbc-breite-voll));
  margin-inline: auto;
}
/* Halber Abstand oben und unten: Zwischen zwei Abschnitten ergibt das
   zusammen wieder den vollen — vorher war es das Doppelte. */
.tbc-abschnitt { padding-block: calc(var(--tbc-abstand-xl) * 0.66); }

/* Der erste Abschnitt einer Seite bekommt mehr Anlauf. Sonst beginnt die
   Überschrift auf den Unterseiten höher als auf der Startseite, und beim
   Wechsel springt die Seite. */
main > :first-child.tbc-abschnitt,
main > :first-child > .tbc-abschnitt:first-child,
main > article.tbc-abschnitt:first-child {
  padding-top: clamp(3rem, 1.5rem + 8vw, 8rem);
}

/* Und ebenso viel Luft am Ende, bevor der Fussbereich anschliesst. */
main > :last-child,
main > :last-child > .tbc-abschnitt:last-child {
  padding-bottom: clamp(3rem, 1.5rem + 8vw, 8rem);
}

.tbc-nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Vorspann ─────────────────────────────────────────────────────────── */

.tbc-vorspann {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 54ch;
}

/* Ein Absatz, der die volle Breite nehmen darf — unter der Preistabelle,
   damit er auf deren Kante endet statt mitten darunter abzubrechen. */
.tbc-breit { max-width: none; }

/* ── Kopf und Fuß ─────────────────────────────────────────────────────── */

.tbc-sprung {
  position: absolute; left: var(--tbc-abstand-m); top: -4rem; z-index: 10;
  background: var(--tbc-schrift); color: var(--tbc-grund);
  padding: var(--tbc-abstand-s) var(--tbc-abstand-m);
  text-decoration: none;
  transition: top 0.15s ease;
}
.tbc-sprung:focus { top: var(--tbc-abstand-m); }

.tbc-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  /* position: sticky ist zugleich Bezugsrahmen für das ausklappende Menü:
     Es hängt damit unter dem ganzen Kopf, nicht unter der breitenbegrenzten
     Zeile darin. */
  /* Deckender Grund: Ohne ihn scheint der Inhalt beim Scrollen durch. */
  background: var(--tbc-grund);
  border-bottom: 1px solid var(--tbc-linie);
}

/* Der Kopf schrumpft beim Scrollen, damit er auf dem Telefon nicht ein
   Sechstel des Bildschirms belegt. Ohne JavaScript über die Scroll-Zeitachse;
   wo der Browser sie nicht kennt, bleibt der Kopf einfach in voller Höhe. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .tbc-kopf__reihe {
      animation: tbc-kopf-schrumpft linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 240px;
    }
    .tbc-kopf__logo {
      animation: tbc-logo-schrumpft linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 240px;
    }
  }
}

@keyframes tbc-kopf-schrumpft {
  from { padding-block: 0.85rem; }
  to   { padding-block: 0.4rem; }
}
@keyframes tbc-logo-schrumpft {
  from { width: 168px; }
  to   { width: 128px; }
}
/* Ein klebender Kopf darf nicht hoch bauen — er nimmt den Platz dauerhaft.
   Deshalb kein Umbruch, sondern eine Zeile, die sich zusammenschiebt. */
.tbc-kopf__reihe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tbc-abstand-m);
  padding-block: 0.85rem;
  flex-wrap: nowrap;
  min-height: 0;
}
.tbc-kopf__marke { text-decoration: none; display: inline-flex; align-items: center; }

.tbc-wortmarke {
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.35rem; line-height: 1;
}

.tbc-nav__liste, .tbc-fuss__liste {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--tbc-abstand-m); margin: 0; padding: 0;
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.95rem;
}
.tbc-nav__liste a, .tbc-fuss__liste a { text-decoration: none; }
.tbc-nav__liste a:hover, .tbc-nav__liste a:focus-visible { text-decoration: underline; }

/* Der Fussbereich kehrt die Seite um: im hellen Erscheinungsbild schwarz,
   im dunklen weiss. Möglich ohne eine einzige neue Farbe — er benutzt
   schlicht die Rollen über Kreuz. Damit stimmt es in beiden Fassungen
   automatisch, ohne zweiten Regelsatz. */
.tbc-fuss {
  background: var(--tbc-schrift);
  color: var(--tbc-grund);
  padding-block: var(--tbc-abstand-xl);
  font-size: 0.9rem;
  /* Innerhalb des Fusses sind die Rollen getauscht — damit erben Links,
     Trennlinien und der Gruppenverweis die richtigen Werte. */
  --tbc-schrift-leise: var(--tbc-grau);
  --tbc-linie: var(--tbc-grau-dunkel);
}
.tbc-fuss a { color: var(--tbc-grund); }

/* Das Markenmuster im Fussbereich. Hier stört es nicht: Es steht kaum Text
   darauf, und der wenige liegt auf voller Fläche statt zwischen Kreisen.
   Als eigene Ebene, damit die Deckkraft nicht den Text mitnimmt. */
.tbc-fuss { position: relative; isolation: isolate; }
.tbc-fuss::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("assets/img/muster-kachel.png");
  background-size: clamp(64px, 7vw, 92px);
  background-repeat: repeat;
  /* Auf schwarzem Grund wirkt ein helles Muster bei gleicher Deckkraft
     schwächer als ein dunkles auf weissem. Deshalb hier etwas kräftiger —
     im dunklen Erscheinungsbild wird der Wert unten wieder gesenkt. */
  opacity: 0.22;
  /* Im hellen Erscheinungsbild ist der Fuss schwarz, das Muster also
     umkehren; im dunklen ist er weiss und das Muster bleibt, wie es ist.
     Genau umgekehrt zur Karte — deshalb eine eigene Angabe. */
  filter: invert(1);
  pointer-events: none;
}
:root[data-modus="dunkel"] .tbc-fuss::before { filter: none; opacity: 0.14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .tbc-fuss::before { filter: none; opacity: 0.14; }
}
.tbc-fuss__reihe {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--tbc-abstand-m); flex-wrap: wrap;
}
.tbc-fuss__adresse { margin: 0; }

/* ── Startseite ───────────────────────────────────────────────────────── */

.tbc-eroeffnung { padding-block: clamp(3rem, 1.5rem + 8vw, 8rem) calc(var(--tbc-abstand-xl) / 2); }
.tbc-eroeffnung h1 { margin-bottom: var(--tbc-abstand-l); }

/* Die Weiche: Trennlinien entstehen über gap auf schwarzem Grund.
   Ein Rahmen je Karte würde an der Nahtstelle doppelt zeichnen. */
/* Die Rahmenlinien laufen über die volle Breite, das Raster der Karten hält
   dagegen dieselbe Spalte wie der übrige Seitentext. Ohne das sitzt der
   Kartentext 50 px weiter links als alles andere und liest sich als Versehen. */
.tbc-weiche { border-block: 1px solid var(--tbc-schrift); }
.tbc-weiche__raster {
  width: min(100% - var(--tbc-rand), var(--tbc-breite-voll));
  margin-inline: auto;
  display: grid; gap: 1px; background: var(--tbc-schrift);
  /* Die Umbruchschwelle ist Layout und darf nicht mit der Textgröße wachsen —
     mit 22rem stünde sie bei 200 % Schrift auf 704 px und sprengt die Spalte. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.tbc-weiche__karte {
  background: var(--tbc-grund);
  padding: var(--tbc-abstand-l) clamp(20px, 4vw, 48px) var(--tbc-abstand-l) 0;
  display: flex; flex-direction: column; gap: var(--tbc-abstand-m);
}
.tbc-weiche__karte + .tbc-weiche__karte { padding-left: clamp(20px, 4vw, 48px); }
.tbc-weiche__karte h3 { margin-top: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.tbc-weiche__karte p { flex: 1; margin: 0; max-width: 38ch; }

.tbc-knopf {
  align-self: start;
  display: inline-block;
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; text-decoration: none;
  background: var(--tbc-schrift); color: var(--tbc-grund);
  padding: var(--tbc-abstand-s) var(--tbc-abstand-m);
  border: 1px solid var(--tbc-schrift);
  max-width: 100%;
}
.tbc-knopf:hover, .tbc-knopf:focus-visible { background: var(--tbc-grund); color: var(--tbc-schrift); }
.tbc-knopf--offen { background: var(--tbc-grund); color: var(--tbc-schrift); }
.tbc-knopf--offen:hover, .tbc-knopf--offen:focus-visible { background: var(--tbc-schrift); color: var(--tbc-grund); }

.tbc-ordnung__liste {
  list-style: none; margin: 0; padding: 0; counter-reset: regel;
  max-width: var(--tbc-breite-text);
}
.tbc-ordnung__liste li {
  counter-increment: regel;
  border-top: 1px solid var(--tbc-linie);
  padding-block: var(--tbc-abstand-m);
  /* auto statt fester Breite: die Ziffer nimmt, was sie braucht.
     minmax(0, 1fr) statt 1fr: eine Grid-Spalte schrumpft sonst nie unter
     die Inhaltsbreite und schiebt lange Wörter aus dem Fenster. */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tbc-abstand-m);
}
.tbc-ordnung__liste li::before {
  content: counter(regel, decimal-leading-zero);
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700; color: var(--tbc-schrift-leise);
  font-size: 1.125rem;
}
.tbc-ordnung__liste li:last-child { border-bottom: 1px solid var(--tbc-linie); }

/* Die Clubordnung zweispaltig: drei Regeln links, drei rechts. Die Zeilen
   liegen auf gleicher Höhe, weil sie Rasterzeilen teilen — bei einem
   Mehrspaltensatz stünden die Trennlinien versetzt.
   Die drei Zeilen sind die halbe Anzahl der sechs Regeln. Kommt eine Regel
   dazu, gehört diese Zahl angepasst, sonst entsteht eine dritte Spalte. */
@media (min-width: 62rem) {
  .tbc-ordnung__liste--zwei {
    max-width: none;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: var(--tbc-abstand-l);
    border-bottom: 1px solid var(--tbc-linie);
  }
  .tbc-ordnung__liste--zwei li:last-child { border-bottom: 0; }
}

.tbc-schluss__wege { display: flex; flex-wrap: wrap; gap: var(--tbc-abstand-m); margin-top: var(--tbc-abstand-l); }

/* ── Kopf: Logo und Gruppenverweis ────────────────────────────────────── */

.tbc-kopf__logo { display: block; width: 168px; height: auto; }
.tbc-kopf__rechts {
  display: flex; align-items: center; gap: var(--tbc-abstand-m);
  flex-wrap: nowrap; justify-content: flex-end;
}


/* ── Zahlen als Gestaltungsmittel (Briefing 4.1) ──────────────────────── */

.tbc-zahlen {
  display: grid; gap: 1px; margin: var(--tbc-abstand-l) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: var(--tbc-linie);
  border: 1px solid var(--tbc-linie);
}
.tbc-zahlen__paar {
  background: var(--tbc-grund);
  padding: var(--tbc-abstand-m);
  display: flex; flex-direction: column; gap: var(--tbc-abstand-s);
}
.tbc-zahlen__zahl {
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.9;
}
.tbc-zahlen__label {
  margin: 0; font-size: 0.875rem; line-height: 1.35;
  color: var(--tbc-schrift-leise); max-width: 20ch;
}

/* ── Seite A: Coworking ───────────────────────────────────────────────── */

.tbc-hervor {
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  letter-spacing: 0.02em;
}

.tbc-faelle {
  display: grid; gap: var(--tbc-abstand-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-block: var(--tbc-abstand-m);
}
.tbc-faelle p {
  margin: 0; padding-top: var(--tbc-abstand-m);
  border-top: 2px solid var(--tbc-schrift);
  max-width: none;
}

.tbc-preise { width: 100%; border-collapse: collapse; margin-block: var(--tbc-abstand-m); }
.tbc-preise caption {
  text-align: left; color: var(--tbc-schrift-leise); font-size: 0.9rem;
  padding-bottom: var(--tbc-abstand-s);
}
.tbc-preise th, .tbc-preise td {
  text-align: left; vertical-align: top;
  padding: var(--tbc-abstand-m) var(--tbc-abstand-m) var(--tbc-abstand-m) 0;
  border-bottom: 1px solid var(--tbc-linie);
}
.tbc-preise thead th {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
  border-bottom: 1px solid var(--tbc-schrift);
  padding-block: var(--tbc-abstand-s);
}
.tbc-preise tbody th { font-weight: 600; }
/* td.-Präfix nötig: .tbc-preise td { text-align: left } trägt Klasse plus
   Element und schlägt sonst jede reine Klassenregel. */
.tbc-preise td.tbc-preise__preis {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  font-weight: 700; font-size: 1.25rem; white-space: nowrap;
  text-align: right; padding-right: 0;
  font-variant-numeric: tabular-nums;
  width: 18%;
}
.tbc-preise thead th:last-child { text-align: right; padding-right: 0; }
.tbc-preise tbody th { width: 22%; }

/* Unter 34rem bricht die Tabelle in Blöcke auf. Die Spaltenüberschrift
   wandert per data-Attribut vor den Wert, damit der Bezug erhalten bleibt. */
@media (max-width: 34rem) {
  .tbc-preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbc-preise, .tbc-preise tbody, .tbc-preise td, .tbc-preise th { display: block; }

  /* Die Bildunterschrift braucht die Angabe mit: Sobald die Tabelle ein Block
     ist, schrumpft eine table-caption auf ihre kleinstmögliche Breite — der
     Satz stand dann fünfzeilig untereinander. */
  .tbc-preise caption { display: block; }

  /* Jede Zeile ein kleines Raster: Name links, Preis rechts daneben, die
     Erklärung darunter — aber in derselben linken Spalte. Über die volle
     Breite lief sie unter den Preis und sah aus, als gehörte sie dazu. */
  .tbc-preise tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--tbc-abstand-m);
    border-bottom: 1px solid var(--tbc-linie);
    padding-block: var(--tbc-abstand-m);
  }
  .tbc-preise th, .tbc-preise td { border: 0; padding: 0 0 0.25rem; }
  .tbc-preise tbody th { font-size: 1.1rem; grid-column: 1; grid-row: 1; }
  .tbc-preise td[data-spalte="Was drin ist"] { grid-column: 1; grid-row: 2; }
  .tbc-preise td.tbc-preise__preis {
    grid-column: 2; grid-row: 1;
    text-align: right; align-self: start; width: auto; padding: 0;
  }
  .tbc-preise td[data-spalte="Preis"]::before { content: ""; }
}

/* Begriff und Erklärung müssen auf einer Zeile stehen. Mit auto-fit landen
   sie in beliebigen Spalten, und die Zuordnung ist nicht mehr erkennbar —
   der klassische Fehler bei Beschreibungslisten im Raster. */
.tbc-zeiten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--tbc-abstand-m);
  margin-block: var(--tbc-abstand-m);
  max-width: var(--tbc-breite-text);
}
.tbc-zeiten dt,
.tbc-zeiten dd {
  border-top: 1px solid var(--tbc-linie);
  padding-block: var(--tbc-abstand-s);
  margin: 0;
}
.tbc-zeiten dt { font-weight: 600; }
.tbc-zeiten dd { color: var(--tbc-schrift-leise); }

@media (max-width: 34rem) {
  /* Zu schmal für zwei Spalten: dann untereinander, aber ohne Trennlinie
     zwischen zusammengehörenden Paaren. */
  .tbc-zeiten { grid-template-columns: 1fr; }
  .tbc-zeiten dd { border-top: 0; padding-top: 0; }
}

.tbc-tagesnutzung {
  display: grid; gap: 1px; background: var(--tbc-linie);
  border: 1px solid var(--tbc-linie);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-block: var(--tbc-abstand-m);
}
.tbc-tagesnutzung section { background: var(--tbc-grund); padding: var(--tbc-abstand-m); }
.tbc-tagesnutzung h3 { margin-top: 0; }
.tbc-tagesnutzung__preis {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  font-weight: 700; font-size: 1.5rem; line-height: 1.15; margin: 0 0 var(--tbc-abstand-s);
}
.tbc-tagesnutzung__preis span {
  font-family: var(--tbc-schrift-text); font-weight: 400; font-size: 0.9rem;
  color: var(--tbc-schrift-leise);
}
.tbc-tagesnutzung p:last-child { margin-bottom: 0; font-size: 0.95rem; }

.tbc-zweitweg { margin-top: var(--tbc-abstand-m); }
.tbc-zweitweg a {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  text-underline-offset: 0.3em;
}

/* ── Seite B: Der Club ────────────────────────────────────────────────
   Schmalere Textspalte und gedämpfte Farbe sind der Tonunterschied zu
   Seite A, in CSS übersetzt: hier wird nicht verkauft, hier wird
   eingeladen. */

.tbc-club { --tbc-breite-text: 58ch; }
.tbc-club p { color: var(--tbc-schrift-leise); }
.tbc-club h2 { margin-top: var(--tbc-abstand-xl); }
.tbc-club .tbc-vorspann p { color: var(--tbc-schrift); }

.tbc-nicht { border-left: 2px solid var(--tbc-schrift); padding-left: var(--tbc-abstand-m); }

.tbc-programm {
  display: grid; gap: var(--tbc-abstand-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-block: var(--tbc-abstand-m);
}
.tbc-programm h3 { margin-top: 0; }
.tbc-programm section > p { max-width: none; }

.tbc-gruendung {
  border-top: 1px solid var(--tbc-schrift);
  padding-top: var(--tbc-abstand-l);
  margin-top: var(--tbc-abstand-xl);
}
.tbc-gruendung h2 { margin-top: 0; }
.tbc-gruendung__zaehler {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  font-weight: 700; font-size: 1.75rem; text-transform: uppercase;
  color: var(--tbc-schrift);
}

/* ── Formulare ────────────────────────────────────────────────────────── */

/* Das Formular in zwei Spalten: Untereinander wirkte es wie ein Antrag.
   Kurze Angaben stehen nebeneinander, alles Lange nimmt die volle Breite. */
.tbc-formular {
  max-width: var(--tbc-breite-text);
  margin-top: var(--tbc-abstand-l);
}
/* Gemessen wird die Spalte, in der das Formular steht — nicht das Fenster.
   Auf der Coworking-Seite sitzt es neben dem Text und hat dort nur die halbe
   Breite; ein Fenstermaß hätte es dort in zwei viel zu schmale Spalten
   gezwungen. */
.tbc-formular__huelle { container-type: inline-size; }

@container (min-width: 40rem) {
  .tbc-formular {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--tbc-abstand-l);
    /* Kein eigener Deckel: Die Breite gibt der Platz vor, in dem das Formular
       steht — neben dem Text auf der Coworking-Seite die halbe Spalte, auf der
       Clubseite die volle Breite der Abschnitte darüber. */
    max-width: none;
  }
  /* Der Fehlerhinweis gilt dem ganzen Formular, Knopf und Hinweise stehen
     unten links — dort endet die letzte kurze Eingabe. */
  .tbc-formular__hinweis { grid-column: 1 / -1; }
  .tbc-formular__fuss    { grid-column: 1 / -1; }
}

/* Die rechte Spalte trägt Auswahl und freies Feld. Das Textfeld wächst mit,
   bis beide Spalten unten auf gleicher Höhe enden. */
.tbc-formular__spalte--frei { display: flex; flex-direction: column; }
.tbc-formular__spalte--frei .tbc-feld:has(textarea) { flex: 1; }
.tbc-formular__spalte--frei textarea { flex: 1; min-height: 9rem; max-height: 22rem; }

/* Das Köderfeld liegt ausserhalb des Bildes, nicht auf display:none —
   manche Bots erkennen versteckte Felder und lassen sie dann aus. */
.tbc-koeder { position: absolute; left: -9999px; }

.tbc-feld { display: flex; flex-direction: column; gap: 0.35rem; margin-block: var(--tbc-abstand-m); }
.tbc-feld label {
  font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.85rem;
}
.tbc-feld input, .tbc-feld select, .tbc-feld textarea {
  font: inherit; font-family: var(--tbc-schrift-text);
  padding: var(--tbc-abstand-s);
  border: 1px solid var(--tbc-grau);
  background: var(--tbc-grund); color: var(--tbc-schrift);
  border-radius: 0;
  width: 100%;
}
.tbc-feld textarea { resize: vertical; }

/* Der Fehlerzustand wird über die Rahmenstärke gezeigt, nicht über Farbe:
   Die Palette kennt keine Rotstufe, und Farbe allein wäre ohnehin kein
   zulässiges Unterscheidungsmerkmal. */
.tbc-feld--fehler input,
.tbc-feld--fehler select,
.tbc-feld--fehler textarea { border-color: var(--tbc-schrift); border-width: 2px; }
.tbc-feld__fehler { font-size: 0.9rem; font-weight: 600; }

.tbc-formular__hinweis {
  border: 2px solid var(--tbc-schrift);
  padding: var(--tbc-abstand-m);
  margin-block: var(--tbc-abstand-m);
}
.tbc-formular__hinweis p { margin: 0; }
.tbc-formular__datenschutz,
.tbc-formular__frist { font-size: 0.9rem; color: var(--tbc-schrift-leise); }
/* Die beiden Hinweise laufen über beide Spalten und stehen über dem Knopf —
   gelesen wird erst, wozu die Angaben dienen, dann abgeschickt. */
.tbc-formular__fuss .tbc-formular__datenschutz,
.tbc-formular__fuss .tbc-formular__frist { max-width: none; }
.tbc-formular__fuss .tbc-formular__frist { margin-bottom: var(--tbc-abstand-m); }
.tbc-formular button { cursor: pointer; font: inherit; }

/* Anfrage: Ansprache links, Formular rechts. Die Überschrift steht auf der
   gleichen Höhe wie das erste Feld, damit beide Spalten oben abschliessen. */
/* Den Abstand nach oben trägt jetzt der Block, nicht die Überschrift: Ihr
   eigener Abstand muss weg, damit sie mit dem ersten Feld auf einer Linie
   beginnt — sonst stünde die rechte Spalte um eine Überschriftenhöhe höher. */
.tbc-anfrage { margin-top: calc(var(--tbc-abstand-xl) * 0.95); }
.tbc-anfrage .tbc-anfrage__wort > h2:first-child { margin-top: 0; }

@media (min-width: 62rem) {
  .tbc-anfrage {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: var(--tbc-abstand-l);
    align-items: start;
  }
  .tbc-anfrage .tbc-formular { margin-top: 0; }
}

/* ── Bestätigungsseiten ───────────────────────────────────────────────── */

.tbc-bestaetigung { max-width: 62ch; }
.tbc-bestaetigung__zurueck { margin-top: var(--tbc-abstand-l); }

/* ── Klappmenü ────────────────────────────────────────────────────────────
   Lange trugen Logo und Menü gemeinsam eine Zeile, indem beide schrumpften.
   Mit dem dritten Eintrag ging das nicht mehr auf — der Kopf brach um und
   belegte ein Fünftel des Bildschirms. Ab hier ein Klappmenü.

   Der Knopf sitzt aussen rechts, wo der Daumen ist. Sichtbar wird er nur auf
   schmalen Geräten, und eingeklappt wird nur, wenn das Skript gelaufen ist
   (data-klapp am Wurzelelement) — ohne Skript bleibt die Navigation stehen. */

.tbc-menue { display: none; }

@media (max-width: 34rem) {
  .tbc-menue {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;      /* 44 px: die Mindestgrösse für Finger */
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  }
  .tbc-menue__striche,
  .tbc-menue__striche::before,
  .tbc-menue__striche::after {
    display: block; width: 22px; height: 2px;
    background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .tbc-menue__striche { position: relative; }
  .tbc-menue__striche::before,
  .tbc-menue__striche::after { content: ""; position: absolute; left: 0; }
  .tbc-menue__striche::before { top: -7px; }
  .tbc-menue__striche::after  { top:  7px; }

  /* Offen wird aus den drei Strichen ein Kreuz. */
  .tbc-menue[aria-expanded="true"] .tbc-menue__striche { background: transparent; }
  .tbc-menue[aria-expanded="true"] .tbc-menue__striche::before { transform: translateY(7px) rotate(45deg); }
  .tbc-menue[aria-expanded="true"] .tbc-menue__striche::after  { transform: translateY(-7px) rotate(-45deg); }

  html[data-klapp] .tbc-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--tbc-grund);
    border-bottom: 1px solid var(--tbc-schrift);
    display: none;
  }
  html[data-klapp] .tbc-nav[data-offen] { display: block; }

  html[data-klapp] .tbc-nav__liste {
    flex-direction: column; align-items: stretch;
    gap: 0; font-size: 1rem; letter-spacing: 0.06em;
    padding: 0;
  }
  html[data-klapp] .tbc-nav__liste li { border-top: 1px solid var(--tbc-linie); }
  html[data-klapp] .tbc-nav__liste li:first-child { border-top: 0; }
  html[data-klapp] .tbc-nav__liste a {
    display: block;
    padding: var(--tbc-abstand-m) max(var(--tbc-rand), 0.75rem);
  }
}

/* ── Kopf auf schmalen Geräten ────────────────────────────────────────────
   Logo und Umschalter müssen weiterhin in eine flache Zeile passen. */

@media (max-width: 34rem) {
  /* Schmalerer Rand — über die Variable, damit ihn die Weiche mitbekommt. */
  :root { --tbc-rand: 1.5rem; }

  /* Untereinander stehende Karten brauchen kein seitliches Polster mehr:
     Es verschob ihren Text gegen die Kante der übrigen Seite. */
  .tbc-weiche__karte,
  .tbc-weiche__karte + .tbc-weiche__karte { padding-inline: 0; }

  /* (2) Beide Handlungsaufrufe gleich breit — untereinander wirkte der
     kürzere sonst wie der schwächere Weg. Am Schreibtisch bleibt es bei
     der Breite des Wortes. */
  .tbc-schluss__wege { display: grid; }
  .tbc-schluss__wege .tbc-knopf { width: 100%; text-align: center; }

  /* (6) Ohne dieses Zurücksetzen behält die Namensspalte 22 % Breite —
     auf 351 px sind das 77 px, und "Einzelbüro" bricht mitten im Wort. */
  .tbc-preise tbody th { width: auto; }
  .tbc-kopf__logo { width: 118px; }
  .tbc-kopf__reihe { gap: 0.75rem; padding-block: 0.6rem; }
  /* Die Schrumpfstufen der Liste gelten nur noch ohne Skript. */
  html:not([data-klapp]) .tbc-nav__liste { gap: 0.85rem; font-size: 0.78rem; letter-spacing: 0.04em; }
}

@media (max-width: 22rem) {
  /* Unter 352 px reicht auch das nicht mehr: Dann trägt das Zeichen allein. */
  .tbc-kopf__logo { width: 92px; }
  html:not([data-klapp]) .tbc-nav__liste { font-size: 0.72rem; gap: 0.6rem; }
}

/* ── Häufige Fragen ───────────────────────────────────────────────────── */

.tbc-fragen__liste { border-top: 1px solid var(--tbc-schrift); max-width: var(--tbc-breite-text); }

.tbc-frage { border-bottom: 1px solid var(--tbc-linie); }

.tbc-frage__frage {
  cursor: pointer; list-style: none;
  padding-block: var(--tbc-abstand-m);
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.2;
}
/* Das Standarddreieck weg — in beiden Schreibweisen, sonst bleibt es in Safari. */
.tbc-frage__frage::-webkit-details-marker { display: none; }
.tbc-frage__frage::marker { content: ""; }

/* Eigenes Zeichen: waagerechter Strich, der beim Aufklappen zum Kreuz wird.
   Rein über CSS, ohne Schrift-Symbol — das würde bei fehlender Schrift fehlen. */
.tbc-frage__frage::after,
.tbc-frage__frage::before {
  content: ""; position: absolute; right: 0.25rem; top: 50%;
  width: 1rem; height: 2px; background: var(--tbc-schrift);
  transition: transform 0.2s ease;
}
.tbc-frage__frage::before { transform: translateY(-50%) rotate(90deg); }
.tbc-frage__frage::after  { transform: translateY(-50%); }
.tbc-frage[open] .tbc-frage__frage::before { transform: translateY(-50%) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .tbc-frage__frage::after, .tbc-frage__frage::before { transition: none; }
}

.tbc-frage__antwort { padding-bottom: var(--tbc-abstand-m); }
.tbc-frage__antwort p { margin: 0; color: var(--tbc-schrift-leise); }
.tbc-frage__frage:focus-visible { outline: 3px solid var(--tbc-schrift); outline-offset: 3px; }

/* ── Umgebungskarte ───────────────────────────────────────────────────── */

/* Die Karte läuft über die volle Fensterbreite, auch wenn sie in einer
   Hülle steht: 100vw abzüglich der Scrollleiste, dann zurück nach links
   geschoben. Ohne den Abzug entsteht waagerechtes Scrollen, sobald eine
   Scrollleiste sichtbar ist. */
.tbc-karte {
  /* Aus der Hülle ausbrechen: Die Ränder werden so weit negativ gezogen, wie
     die Hülle vom Fensterrand entfernt ist. calc(100vw - (100vw - 100%))
     ergibt rechnerisch nur 100% und bringt gar nichts. */
  margin: var(--tbc-abstand-l) calc(50% - 50vw) 0;
  width: auto;
}
.tbc-karte__rahmen { border-block: 1px solid var(--tbc-linie); }
.tbc-karte__bild { display: block; width: 100%; height: auto; }

/* Zwei Fassungen, eine sichtbar. Die schmale ist hochformatig und zeigt
   einen engeren Ausschnitt — dadurch bleibt der Massstab lesbar, ohne dass
   seitlich geschoben werden muss. Gedeckelt, damit sie auf dem Tablet nicht
   einen ganzen Bildschirm hoch wird. */
.tbc-karte__bild--schmal { display: none; }

@media (max-width: 52rem) {
  .tbc-karte__bild--weit { display: none; }
  .tbc-karte__bild--schmal {
    display: block;
    max-width: 34rem;
    margin-inline: auto;
  }
}
.tbc-karte figcaption {
  width: min(100% - clamp(1.25rem, 4vw, 2.5rem), var(--tbc-breite-voll));
  margin: var(--tbc-abstand-s) auto 0;
  font-size: 0.9rem; color: var(--tbc-schrift-leise);
  max-width: var(--tbc-breite-text);
}

/* ── Dunkler Modus ────────────────────────────────────────────────────────
   Die Marke kennt keine Akzentfarbe — deshalb lässt sie sich vollständig
   umkehren, ohne dass etwas kippt. Getauscht werden nur die Rollen, die
   Farbwerte der Richtlinie bleiben unverändert.

   Kontraste im dunklen Modus:
     #ffffff auf #000000  21,0:1
     #c9c9c9 auf #000000  12,5:1   Nebentext
     #7f7f7f auf #000000   5,3:1   Linien, kleine Angaben
   ──────────────────────────────────────────────────────────────────────── */

:root[data-modus="dunkel"],
:root[data-seiten-modus="dunkel"]:not([data-modus="hell"]) {
  color-scheme: dark;
  --tbc-grund: var(--tbc-schwarz);
  --tbc-schrift: var(--tbc-weiss);
  --tbc-schrift-leise: var(--tbc-grau-hell);
  --tbc-linie: var(--tbc-grau-dunkel);
  --tbc-flaeche: var(--tbc-grau-dunkel);
  /* Die Karte ist eine schwarze Zeichnung auf weissem Grund. Umkehren statt
     zweite Datei: Bei einer reinen Strichzeichnung ist das Ergebnis dasselbe. */
  --tbc-karte-filter: invert(1);
  --tbc-logo-anzeige: none;
  --tbc-logo-anzeige-hell: block;
}

/* Wer nichts gewählt hat, bekommt die Einstellung seines Geräts. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    color-scheme: dark;
    --tbc-grund: var(--tbc-schwarz);
    --tbc-schrift: var(--tbc-weiss);
    --tbc-schrift-leise: var(--tbc-grau-hell);
    --tbc-linie: var(--tbc-grau-dunkel);
    --tbc-flaeche: var(--tbc-grau-dunkel);
    --tbc-karte-filter: invert(1);
    --tbc-logo-anzeige: none;
    --tbc-logo-anzeige-hell: block;
  }
}

.tbc-karte__bild { filter: var(--tbc-karte-filter); }
.tbc-kopf__logo        { display: var(--tbc-logo-anzeige); }
.tbc-kopf__logo--hell  { display: var(--tbc-logo-anzeige-hell); }

/* Der Umschalter. Zwei Zustände, kein Menü — es gibt nur zwei Möglichkeiten. */
/* Nur das Zeichen, ohne Beschriftung. Die Fläche bleibt trotzdem gross
   genug zum Treffen — 44 Pixel sind das Mass, unter dem Schaltflächen auf
   Berührungsgeräten unzuverlässig werden. */
.tbc-modus {
  appearance: none; background: none; border: 0; padding: 0;
  color: var(--tbc-schrift); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
}
.tbc-modus__kreis {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
  transition: transform 0.25s ease;
}
.tbc-modus:hover .tbc-modus__kreis,
.tbc-modus:focus-visible .tbc-modus__kreis { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .tbc-modus__kreis { transition: none; }
}

/* Der Gruppenverweis trug einen festen Grauwert. Der Fuß dreht die Rollen
   aber um: Auf der Clubseite und im dunklen Modus steht er dann auf weißem
   Grund — #c9c9c9 auf Weiß sind 1,66:1 statt der geforderten 4,5. Jetzt wird
   die Farbe aus den Rollen gemischt und kippt mit: 8,5:1 hell, 6,9:1 dunkel.
   Die erste Zeile ist der Rückfall für Browser ohne color-mix. */
.tbc-fuss__gruppe {
  color: var(--tbc-grund);
  color: color-mix(in srgb, var(--tbc-grund) 65%, var(--tbc-schrift));
}

/* ── Zwei mittige Abschnitte ──────────────────────────────────────────────
   Der Rest der Seite bleibt linksbündig: Überschrift über dem Text, Textspalte
   links. Clubordnung und Fragen stehen dagegen mittig — beide sind
   Aufzählungen, die für sich stehen und einen ruhigen, symmetrischen Block
   vertragen. Der Text bleibt auch dort linksbündig; zentrierte Fliesstext-
   zeilen sind bei jeder Zeile neu zu suchen.
   ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 62rem) {
  .tbc-abschnitt.tbc-mittig { display: flex; flex-direction: column; align-items: center; }
  .tbc-abschnitt.tbc-mittig > * { width: 100%; max-width: 62ch; }
  .tbc-abschnitt.tbc-mittig > h2 { text-align: center; max-width: 32ch; }

  /* Der Schlussabschnitt ist die Ausnahme von der Ausnahme: Zwei Zeilen und
     zwei Knöpfe, die den Blick aufteilen sollen — hier steht auch der Text
     mittig, weil er kurz genug ist, um nicht gesucht werden zu müssen. */
  .tbc-schluss.tbc-mittig > p { text-align: center; max-width: 54ch; }
  .tbc-schluss.tbc-mittig .tbc-schluss__wege { justify-content: center; }
}

/* ── Seite nicht gefunden ─────────────────────────────────────────────── */

.tbc-vierhundertvier__zahl {
  font-family: var(--tbc-schrift-titel);
  font-stretch: var(--tbc-breite-titel);
  font-weight: 700;
  font-size: clamp(5rem, 3rem + 12vw, 14rem);
  line-height: 0.85;
  color: var(--tbc-linie);
  margin: 0 0 var(--tbc-abstand-m);
}
.tbc-vierhundertvier__wege {
  border: 1px solid var(--tbc-schrift);
  margin-top: var(--tbc-abstand-l);

  /* Das Raster bringt für die Startseite eine eigene Breite und eine
     Zentrierung mit — dort steht es als eigener Block über die ganze Seite.
     Hier sitzt es schon in der Hülle, und beides zusammen ergab eine
     doppelte Einrückung: Überschrift und Suchfeld begannen bei 105 px, die
     Box erst bei 125, rechts fehlten sogar 140. */
  width: auto;
  margin-inline: 0;
}

/* Auf der Startseite steht die erste Karte bündig zum Text und braucht
   deshalb links keinen Innenabstand. Hier liegt ein Rahmen rundherum —
   ohne Abstand klebte die Überschrift einen Pixel neben dem Strich. */
.tbc-vierhundertvier__wege .tbc-weiche__karte,
.tbc-vierhundertvier__wege .tbc-weiche__karte + .tbc-weiche__karte {
  padding-inline: clamp(20px, 4vw, 48px);
}
.tbc-vierhundertvier__wege h2 { margin-top: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.tbc-vierhundertvier__zurueck { margin-top: var(--tbc-abstand-l); }

/* ── Suchfeld ─────────────────────────────────────────────────────────────
   Steht auf der 404-Seite und über den Suchergebnissen. Bewusst schlicht:
   ein Feld, ein Knopf, dieselbe Form wie bei den übrigen Handlungsaufrufen. */

.tbc-suche { margin-top: var(--tbc-abstand-l); }

.tbc-suche__schild {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tbc-grund) 45%, var(--tbc-schrift));
  margin-bottom: var(--tbc-abstand-s);
}

.tbc-suche__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tbc-abstand-s);
  max-width: var(--tbc-breite-text);
}

.tbc-suche__feld {
  /* Die Grundbreite von 15rem ist zugleich der Umbruchpunkt: Darunter
     rutscht der Knopf in die nächste Zeile, statt das Feld auf eine
     Handbreit zu quetschen. min-width: 0 muss dazu — ohne das behält ein
     Flex-Element seine Wunschbreite und läuft über. */
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  color: var(--tbc-schrift);
  background: var(--tbc-grund);
  border: 1px solid var(--tbc-schrift);
  border-radius: 0;
  padding: var(--tbc-abstand-s) var(--tbc-abstand-m);
  -webkit-appearance: none;
  appearance: none;
}

.tbc-suche__feld::placeholder {
  color: color-mix(in srgb, var(--tbc-grund) 55%, var(--tbc-schrift));
  opacity: 1;                      /* Firefox setzt sonst zusätzlich 0.54 */
}

@media (max-width: 34rem) {
  /* Wie bei den übrigen Handlungsaufrufen: auf dem Telefon volle Breite. */
  .tbc-suche__zeile .tbc-knopf { width: 100%; text-align: center; }
}

/* ── Kapazität als Raster ─────────────────────────────────────────────────
   Hundert Felder für hundert Mitgliedschaften. Die Zahl wird sichtbar statt
   behauptet — und das Verhältnis der drei Grössen zueinander erklärt sich
   von selbst. */

.tbc-raster { margin: var(--tbc-abstand-l) 0 0; }

.tbc-raster__felder {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: clamp(4px, 0.8vw, 10px);
  max-width: 48rem;
}
@media (max-width: 40rem) {
  .tbc-raster__felder { grid-template-columns: repeat(10, 1fr); }
}

.tbc-raster__feld {
  aspect-ratio: 1;
  border: 1px solid var(--tbc-schrift);
  opacity: 0.22;
}
.tbc-raster__feld--platz     { background: var(--tbc-schrift); opacity: 1; }
.tbc-raster__feld--gruendung { background: var(--tbc-schrift); opacity: 0.42; }

/* Die Felder laufen beim Sichtbarwerden ein — einmal, nicht bei jedem
   Scrollen. Wer Bewegung abbestellt hat, sieht sie sofort vollständig. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tbc-raster__feld {
      animation: tbc-feld-ein 0.01s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
      animation-delay: var(--verzug, 0s);
    }
  }
}
@keyframes tbc-feld-ein {
  from { transform: scale(0.3); opacity: 0; }
}

.tbc-raster__legende {
  display: flex; flex-wrap: wrap; gap: var(--tbc-abstand-m);
  /* Die Legende steht über dem Raster: Wer die Felder sieht, weiss dann
     schon, wofür sie stehen, statt es hinterher nachzuschlagen. */
  margin-bottom: var(--tbc-abstand-m);
  font-size: 0.9rem; color: var(--tbc-schrift-leise);
}
.tbc-raster__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.tbc-raster__punkt {
  width: 0.75rem; height: 0.75rem; flex: none;
  border: 1px solid var(--tbc-schrift); opacity: 0.22;
}
.tbc-raster__punkt--platz     { background: var(--tbc-schrift); opacity: 1; }
.tbc-raster__punkt--gruendung { background: var(--tbc-schrift); opacity: 0.42; }

/* ── Markenmuster ─────────────────────────────────────────────────────────
   Das Signet versetzt gekachelt, wie in der Richtlinie auf Seite 17. Als
   Trennband zwischen zwei Abschnitten — nicht als Hintergrund unter Text,
   dort würde es die Lesbarkeit kosten.

   Die Kachel ist schwarz und wird im dunklen Modus umgekehrt; so genügt
   eine Datei für beide Fassungen. */



/* ── Punkt statt Mauszeiger ───────────────────────────────────────────────
   Nur auf Geräten mit genauem Zeigegerät und nur, wenn das Skript wirklich
   läuft — die Klasse setzt es selbst. Scheitert es, bleibt der gewohnte
   Zeiger stehen. */

.tbc-zeiger {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 18px; height: 18px; border-radius: 50%;
  /* Statt Umkehrung ein Kontrastring: Bei mix-blend-mode verrechnet sich der
     Punkt mit dem Untergrund, und über einer Linie sieht es aus, als läge er
     dahinter. Mit Ring liegt er sichtbar obenauf — und bleibt auf jedem
     Untergrund erkennbar. */
  background: var(--tbc-schrift);
  box-shadow: 0 0 0 2px var(--tbc-grund);
  pointer-events: none;
  transition: width 0.12s ease, height 0.12s ease, opacity 0.15s ease,
              border-width 0.12s ease;
  will-change: transform;
}
.tbc-zeiger--greifbar {
  width: 46px; height: 46px; margin: -14px;
  background: transparent;
  border: 2px solid var(--tbc-schrift);
  box-shadow: 0 0 0 2px var(--tbc-grund), inset 0 0 0 2px var(--tbc-grund);
}
.tbc-zeiger--druck { transform-origin: center; opacity: 0.55; }

/* Den eigenen Zeiger erst ausblenden, wenn der Ersatz nachweislich läuft. */
html.hat-zeiger, html.hat-zeiger * { cursor: none; }
/* In Eingabefeldern gilt das nicht: Ohne Textcursor weiss niemand, wo er
   gerade schreibt. */
html.hat-zeiger input, html.hat-zeiger textarea, html.hat-zeiger select,
html.zeiger-schreibt, html.zeiger-schreibt * { cursor: auto; }
html.zeiger-schreibt .tbc-zeiger { opacity: 0; }

/* ── Plangrafik ───────────────────────────────────────────────────────── */

.tbc-plan { margin: var(--tbc-abstand-m) 0 0; }
.tbc-plan__rahmen { color: var(--tbc-schrift); }
.tbc-plan__bild { display: block; width: 100%; height: auto; }

/* Die Raumliste ist die Bedienung für das Telefon. Am Schreibtisch trägt die
   Zeichnung ihre eigenen Beschriftungen, dort wäre sie doppelt. */
.tbc-plan__wahl { display: none; }

@media (max-width: 52rem) {
  /* Die Zeichnung steht vollständig im Bild statt seitlich verschiebbar.
     Ihre Beschriftungen wären bei dieser Größe unter sieben Pixel hoch —
     also weg damit; die Namen stehen darunter in der Liste. */
  .tbc-plan__bild text { display: none; }

  .tbc-plan__wahl {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    list-style: none; margin: var(--tbc-abstand-m) 0 0; padding: 0;
  }
  .tbc-plan__wahl a {
    display: block;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--tbc-linie);
    font-family: var(--tbc-schrift-titel); font-stretch: var(--tbc-breite-titel);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; font-size: 0.8rem;
    text-decoration: none; color: inherit;
  }
  .tbc-plan__wahl a.ist-gewaehlt {
    background: var(--tbc-schrift); color: var(--tbc-grund);
    border-color: var(--tbc-schrift);
  }
  /* Der gewählte Raum leuchtet in der Zeichnung mit — sonst wäre die Liste
     eine Aufzählung neben einem Bild statt seine Bedienung. */
  .tbc-plan__texte { margin-top: var(--tbc-abstand-m); }
}
.tbc-plan figcaption {
  margin-top: var(--tbc-abstand-m);
  font-size: 0.9rem; color: var(--tbc-schrift-leise);
  max-width: var(--tbc-breite-text);
}

/* ── Räume anklickbar ─────────────────────────────────────────────────────
   Jeder Raum ist ein Sprungziel, der zugehörige Text wird über :target
   sichtbar. Ohne JavaScript, und die Auswahl lässt sich verlinken.

   Ohne Skript und ohne Auswahl stehen alle Texte untereinander — die Seite
   ist dann länger, aber vollständig. Das ist der Zustand, den auch
   Suchmaschinen und Bildschirmleser sehen. */

.tbc-plan__raum { cursor: pointer; }
.tbc-plan__raum rect { transition: fill-opacity 0.15s ease; }
.tbc-plan__raum:hover rect,
.tbc-plan__raum:focus-visible rect { fill-opacity: 0.3; }
.tbc-plan__raum:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Zeichnung und Text nebeneinander, sobald Platz ist.
   Untereinander springt der Browser beim Anklicken eines Raumes zum Text —
   und die Zeichnung wandert dabei aus dem Bild. Genau die will man aber
   weiter sehen, während man liest. */
.tbc-plan { margin-top: var(--tbc-abstand-l); }

/* Zeichnung und Erklärung nebeneinander, die Zeichnung auf zwei Dritteln.
   Das Springen, das dagegen sprach, ist behoben — das Skript fängt den Klick
   ab, statt zum Text zu scrollen. */
@media (min-width: 62rem) {
  .tbc-plan {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: var(--tbc-abstand-m) var(--tbc-abstand-l);
    align-items: start;
  }
  .tbc-plan__rahmen    { grid-column: 1; }
  .tbc-plan__texte     { grid-column: 2; grid-row: 1; margin-top: 0; border-top: 0; padding-top: 0; }
  .tbc-plan figcaption { grid-column: 1 / -1; }
}

.tbc-plan__texte {
  margin-top: var(--tbc-abstand-m);
  border-top: 1px solid var(--tbc-linie);
  padding-top: var(--tbc-abstand-m);
  min-height: 8.5rem;
}
.tbc-plan__hinweis {
  margin: 0; color: var(--tbc-schrift-leise); font-size: 0.9rem;
}
.tbc-plan__text {
  max-width: var(--tbc-breite-text);
  /* Der Browser springt beim Anklicken zum Text. Der Abstand hält die
     Zeichnung darüber im Bild, statt sie nach oben hinauszuschieben. */
  scroll-margin-top: min(72vh, 38rem);
}
.tbc-plan__text h3 { margin-top: 0; }
.tbc-plan__text p { margin-bottom: 0; }
.tbc-plan__text:focus { outline: none; }

/* Ohne Auswahl steht neben der Zeichnung nur der Hinweis. Die Texte sind
   dann für das Auge weggeklappt, für Bildschirmleser und Suchmaschinen
   aber vollständig da — display:none nähme sie beiden weg.

   Stünden alle sechs sichtbar untereinander, wären sie zusammen dreimal so
   hoch wie die Zeichnung, und die ginge daneben unter. */
@supports selector(:has(*)) {
  .tbc-plan__text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tbc-plan__text:target {
    position: static; width: auto; height: auto;
    overflow: visible; clip-path: none; white-space: normal;
  }
  .tbc-plan:has(.tbc-plan__text:target) .tbc-plan__hinweis { display: none; }
}

/* Sobald das Skript übernimmt, entscheidet es allein — sonst bliebe ein
   alter Sprunganker aus der Adresszeile hängen und zwei Texte stünden offen. */
.tbc-plan--geskriptet .tbc-plan__text,
.tbc-plan--geskriptet .tbc-plan__text:target {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tbc-plan--geskriptet .tbc-plan__text.ist-offen {
  position: static; width: auto; height: auto;
  overflow: visible; clip-path: none; white-space: normal;
}

/* Der gewählte Raum bleibt in der Zeichnung markiert. */
.tbc-plan__raum.ist-gewaehlt rect { fill-opacity: 0.42; }

/* Ohne :has() bleibt alles sichtbar — vollständig statt kaputt. */