/* Latina Simplex - eine Stildatei fuer die ganze Seite.
   ---------------------------------------------------------------------------
   Keine Fremdquellen: keine Google Fonts, kein CDN, kein Tracker. Alles, was
   der Browser laedt, liegt auf diesem Server. Das ist nicht nur eine
   Datenschutzentscheidung - es gibt damit auch nichts, was ausfaellt.

   Die Schriften sind bewusst Systemschriften. Eine Antiqua wie Georgia oder
   Palatino liegt auf praktisch jedem Geraet, passt zum Gegenstand und kostet
   keinen einzigen Byte Ladezeit.
   ------------------------------------------------------------------------- */

/* --- Schrift ------------------------------------------------------------
   Cinzel, nach roemischen Inschriftenkapitalen. SIL Open Font License,
   Lizenztext in fonts/OFL.txt.

   VOM EIGENEN SERVER. Impressum, Datenschutzerklaerung und der Fuss jeder
   Seite sagen "ohne fremde Schriften" zu. Ein Blatt von fonts.googleapis.com
   wuerde die IP-Adresse jedes Besuchers an Google senden und diese Zusage
   brechen. Eine Datei von latina-simplex.de tut das nicht.

   Eine einzige Datei fuer beide Staerken: Cinzel ist eine variable Schrift,
   die heruntergeladenen Dateien fuer 400 und 600 waren bytegleich.

   "font-display: swap": Bis die Schrift da ist, zeigt der Browser die
   Ersatzschrift an, statt die Ueberschrift leer zu lassen. Bei 26 KB dauert
   das selten lange, aber ein unsichtbarer Titel ist schlimmer als ein
   spaeter wechselnder. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cinzel.woff2") format("woff2");
  /* Derselbe Bereich, den die Datei tatsaechlich enthaelt. Zeichen ausserhalb
     holt der Browser aus der Ersatzschrift, statt ein leeres Kaestchen zu
     zeigen. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Warmer Stein und Terrakotta. Das Terrakotta ist der Farbton der alten
     Seite (rgb(110,44,0)) - die Marke behaelt ihre Farbe. */
  --pergament: #f7f3ec;
  --pergament-tief: #efe7da;
  --weiss: #fffdfa;
  --tinte: #221d18;
  --tinte-leise: #6b6055;
  --tinte-zart: #9a8f82;
  --terrakotta: #6e2c00;
  --terrakotta-hell: #8f4318;
  --terrakotta-zart: #f3e6dc;
  --gold: #b08d57;
  --linie: #e2d8c8;
  --erfolg: #2f6b46;
  --erfolg-grund: #eaf3ec;
  --fehler: #9b3320;
  --fehler-grund: #fbeeea;

  --antiqua: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  /* Fuer Marke und grosse Ueberschriften. Die Ersatzschriften dahinter sind
     ebenfalls Antiqua - faellt die Datei aus, bleibt der Charakter erhalten
     und die Seite springt nicht in eine Groteske. */
  --inschrift: "Cinzel", Georgia, "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --grotesk: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --inhalt: 68rem;
  --schmal: 42rem;
  --rund: 0.75rem;
  --schatten: 0 1px 2px rgba(34, 29, 24, 0.04), 0 8px 24px rgba(34, 29, 24, 0.07);
  --schatten-hoch: 0 2px 4px rgba(34, 29, 24, 0.06), 0 18px 44px rgba(34, 29, 24, 0.13);
}

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

html {
  scroll-behavior: smooth;
  /* Die Kopfzeile klebt oben; ohne diesen Abstand verschwindet die
     Ueberschrift eines Sprungziels darunter. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pergament);
  color: var(--tinte);
  font-family: var(--antiqua);
  font-size: 1.0625rem;
  line-height: 1.7;
  /* Alte Antiqua-Schriften setzen Ziffern unterschiedlich breit; in Tabellen
     und Preislisten sollen sie untereinander stehen. */
  font-variant-numeric: tabular-nums lining-nums;
}

img,
picture,
svg {
  max-width: 100%;
  /* "height: auto" gehoert zwingend zu "max-width: 100%". Fehlt es, gilt das
     height-Attribut aus dem Markup weiter als feste Hoehe, sobald die Breite
     von irgendwoher kommt - und das Bild wird gestaucht oder gezogen.
     Am 27.09.2026 stand das Zeichen im Fuss deshalb 56 Pixel breit und 160
     hoch da. Hier an der Wurzel gesetzt, damit die Falle nicht in der
     naechsten Regel wieder aufgeht; wo eine feste Hoehe gewollt ist, setzt
     die jeweilige Regel sie ohnehin. */
  height: auto;
  display: block;
}

a {
  color: var(--terrakotta);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--terrakotta-hell);
}

/* Sichtbarer Fokus - und zwar ueberall. Wer die Seite mit der Tastatur
   bedient, muss sehen, wo er ist; das gilt gerade fuer das Buchungsraster,
   das aus vierzig Schaltflaechen besteht. */
:focus-visible {
  outline: 3px solid var(--terrakotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Bausteine ---------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.huelle--schmal {
  max-width: var(--schmal);
}

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

.sprungmarke {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--terrakotta);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--rund) var(--rund);
  transition: top 0.15s ease;
}

.sprungmarke:focus {
  top: 0;
  color: #fff;
}

.augenbraue {
  font-family: var(--grotesk);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terrakotta);
  margin: 0 0 0.75rem;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

/* Inschriftenkapitale nur fuer die beiden groessten Ebenen. h3 und h4 stehen
   nah am Fliesstext und bleiben bei der Antiqua - sonst wirkt jede
   Zwischenueberschrift wie ein Denkmal.

   Etwas mehr Laufweite als bei der Antiqua: Cinzel ist nach in Stein
   gehauenen Buchstaben gezeichnet, und die standen weiter auseinander. Eng
   gesetzt verlieren sie ihre Ruhe. */
h1 {
  font-family: var(--inschrift);
  font-size: clamp(2rem, 5.2vw, 3.3rem);
  letter-spacing: 0.005em;
}

h2 {
  font-family: var(--inschrift);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: 0.005em;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

p {
  margin: 0 0 1.1rem;
  text-wrap: pretty;
}

.fuehrung {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--tinte-leise);
  max-width: 48rem;
}

.leise {
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.abschnitt-kopf {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.abschnitt-kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

.abschnitt-kopf--mitte .fuehrung {
  margin-inline: auto;
}

.grund-hell {
  background: var(--weiss);
}

.grund-tief {
  background: var(--pergament-tief);
}

/* Ein leiser Marmorschleier. Deckkraft bewusst niedrig: die Textur soll man
   spueren und nicht lesen. */
.grund-marmor {
  position: relative;
  background: var(--pergament-tief);
  isolation: isolate;
}

.grund-marmor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/marmor.webp") center / 40rem repeat;
  opacity: 0.09;
  mix-blend-mode: multiply;
}

/* --- Schaltflaechen ----------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--terrakotta);
  border-radius: 999px;
  background: var(--terrakotta);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.knopf:hover {
  background: var(--terrakotta-hell);
  border-color: var(--terrakotta-hell);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}

.knopf:disabled,
.knopf[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.knopf--linie {
  background: transparent;
  color: var(--terrakotta);
}

.knopf--linie:hover {
  background: var(--terrakotta-zart);
  color: var(--terrakotta);
}

.knopf--hell {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--tinte);
}

.knopf--hell:hover {
  background: #fff;
  border-color: #fff;
  color: var(--terrakotta);
}

.knopf--klar {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.knopf--klar:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

.knopf--breit {
  width: 100%;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinte);
}

.marke img {
  /* 3.4rem und nicht 2.7: darunter faellt der Kranz in einen Ring zusammen -
     die einzelnen Blaetter verschmelzen. Geprueft bei 96, 48 und 24 Pixeln. */
  width: 3.4rem;
  height: auto;
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.marke__name {
  /* Antiqua statt Groteske: dieselbe Schrift, die die Texte der Seite traegt.
     Eine Lateinmarke in der Schrift eines Formularfelds zu setzen, verschenkt
     das Naheliegendste, was diese Marke hat. Weiterhin eine Systemschrift -
     es wird nichts nachgeladen. */
  /* Der Schriftzug in derselben Inschriftenschrift wie die Ueberschriften.
     Cinzel ist ohnehin nach Grossbuchstaben gezeichnet - Versalien sind hier
     nicht Zurichtung, sondern die Form, fuer die die Schrift gemacht ist. */
  font-family: var(--inschrift);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terrakotta);
}

.marke__zusatz {
  /* Bewusst die Groteske: der Wechsel der Schriftart trennt Name und
     Untertitel deutlicher als jeder Groessenunterschied es koennte. */
  font-family: var(--grotesk);
  font-size: 0.76rem;
  color: var(--tinte-zart);
  letter-spacing: 0.04em;
}

.hauptnavigation {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 500;
}

.hauptnavigation a {
  color: var(--tinte);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}

.hauptnavigation a:hover,
.hauptnavigation a[aria-current="page"] {
  color: var(--terrakotta);
  border-bottom-color: var(--gold);
}

.hauptnavigation .knopf {
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
  border-bottom: none;
}

.hauptnavigation .knopf:hover {
  border-bottom: none;
  color: #fff;
}

.menuknopf {
  display: none;
  background: transparent;
  border: 1.5px solid var(--linie);
  border-radius: var(--rund);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  align-items: center;
  gap: 0.45rem;
}

@media (max-width: 62rem) {
  .menuknopf {
    display: inline-flex;
  }

  .hauptnavigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1.25rem;
  }

  .hauptnavigation[hidden] {
    display: none;
  }

  .hauptnavigation a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--linie);
  }

  .hauptnavigation .knopf {
    margin-top: 1rem;
    justify-content: center;
    padding-block: 0.8rem;
  }
}

/* --- Titelbereich ------------------------------------------------------- */

.titel {
  position: relative;
  min-height: min(82vh, 44rem);
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.titel__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Der Verlauf ist nicht Dekoration, sondern Lesbarkeit: auf dem hellen Himmel
   des Titelbildes haette weisse Schrift sonst keinen Kontrast. Unten dunkler
   als oben, weil dort der Text steht. */
.titel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(28, 20, 14, 0.62) 0%,
    rgba(28, 20, 14, 0.42) 35%,
    rgba(28, 20, 14, 0.74) 100%
  );
}

.titel__innen {
  padding-block: clamp(4rem, 12vw, 8rem);
  max-width: 46rem;
}

.titel h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.titel .fuehrung {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  margin-bottom: 2rem;
}

.titel .augenbraue {
  color: var(--gold);
}

.titel__merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 2.25rem 0 0;
  padding: 0;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.titel__merkmale li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.titel__merkmale li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* --- Karten ------------------------------------------------------------- */

.raster {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Feste Spaltenzahl statt auto-fit: Bei drei Kacheln legt auto-fit zwischen
   576 und 880 Pixeln zwei Spalten an, und die dritte steht allein darunter.
   Drei Spalten oder eine - dazwischen gibt es keine Anordnung, die aufgeht. */
.raster--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Unterhalb von 60rem waeren drei Spalten schmaler als rund 280 Pixel. Eine
   Kachel mit Bild, Ueberschrift und zwei Absaetzen braucht mehr. */
@media (max-width: 60rem) {
  /* Eine Spalte - aber nicht ueber die ganze Breite. Eine Kachel mit 880
     Pixeln traegt ein 587 Pixel hohes Bild und erschlaegt den Text darunter.
     Gedeckelt und mittig sieht die Reihe gewollt aus statt auseinandergezogen. */
  .raster--drei {
    grid-template-columns: minmax(0, min(100%, 34rem));
    justify-content: center;
  }
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

.karte__bild {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  /* NICHT SCHRUMPFEN. ".karte" ist ein Flex-Container in Spaltenrichtung, und
     ein Bild darin ist ein Flex-Element mit dem Vorgabewert "flex-shrink: 1".
     Fordert der Text darunter mehr Platz, als die Kachel hat, wird die
     Differenz hier abgezogen - das Bild wird flacher, und zwar bei jeder
     Kachel unterschiedlich, je nach Textlaenge. Genau so standen die drei
     Konzeptkacheln am 27.09.2026 ungleich da. */
  flex-shrink: 0;
}

/* Flex-Spalte, damit "margin-top: auto" am Weiterlesen-Verweis greift und die
   Verweise aller Kacheln auf einer Linie stehen, auch bei verschieden langen
   Texten.
   "flex: 1" und NICHT "height: 100%": Eine geforderte Hoehe laesst die Spalte
   ueberlaufen und drueckt das Bild zusammen - siehe den Hinweis darueber. */
.karte__text {
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.karte__text > :last-child {
  margin-bottom: 0;
}

.karte__unter {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

/* --- Ablauf in Schritten ------------------------------------------------ */

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  /* Vier Schritte: vier Spalten oder zwei oder eine. auto-fit legte
     dazwischen drei an und liess den vierten Schritt allein stehen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .schritte {
    grid-template-columns: minmax(0, 1fr);
  }
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}

.schritte li::before {
  content: counter(schritt, upper-roman);
  display: block;
  font-family: var(--antiqua);
  font-size: 1.35rem;
  color: var(--terrakotta);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.schritte h3 {
  font-size: 1.1rem;
}

.schritte p {
  margin: 0;
  color: var(--tinte-leise);
  font-size: 0.97rem;
}

/* --- Dozent ------------------------------------------------------------- */

.dozent {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

@media (max-width: 48rem) {
  .dozent {
    grid-template-columns: 1fr;
  }

  .dozent__bild {
    max-width: 16rem;
  }
}

.dozent__bild {
  border-radius: var(--rund);
  box-shadow: var(--schatten-hoch);
  width: 100%;
  height: auto;
}

/* --- Video (erst auf Klick) --------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 54rem;
  margin-inline: auto;
  border-radius: var(--rund);
  overflow: hidden;
  background: #17120e;
  box-shadow: var(--schatten-hoch);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__vorschau {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
  background: url("../img/band-forum.webp") center / cover no-repeat;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--grotesk);
  width: 100%;
}

.video__vorschau::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 17, 12, 0.6);
}

.video__vorschau > * {
  position: relative;
}

.video__pfeil {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--terrakotta);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  transition: transform 0.18s ease;
}

.video__vorschau:hover .video__pfeil {
  transform: scale(1.08);
}

.video__hinweis {
  font-size: 0.85rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* --- Preise ------------------------------------------------------------- */

/* Der Einstiegshinweis unter der Preistafel. Bewusst kein vierter Preiskasten:
   Das Angebot ist eine Bedingung auf die 10er-Karte und kein eigenes Produkt -
   als Kachel neben den anderen sähe es aus, als könne man es einzeln kaufen. */
.einfuehrung-hinweis {
  margin: 1.75rem auto 0;
  max-width: var(--schmal);
  padding: 1rem 1.25rem;
  border: 1px solid var(--gold);
  border-radius: var(--rund);
  background: var(--terrakotta-zart);
  color: var(--tinte);
  text-align: center;
  line-height: 1.55;
}

/* Seit dem Wegfall von Probestunde und 20er-Karte sind es zwei Kacheln. Mit
   "1fr" zogen sie sich auf je ueber 500 Pixel auseinander - zwei riesige
   Kaesten mit vier Zeilen Inhalt. Die Hoechstbreite haelt sie in Form, und
   "justify-content: center" stellt sie mittig, damit der freie Platz links
   und rechts gleich gross ist statt nur rechts. */
.preise {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
  justify-content: center;
  align-items: start;
}

.preis {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.9rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
}

.preis--empfohlen {
  border-color: var(--terrakotta);
  border-width: 2px;
  box-shadow: var(--schatten-hoch);
}

.preis__band {
  position: absolute;
  top: -0.85rem;
  left: 1.5rem;
  background: var(--terrakotta);
  color: #fff;
  font-family: var(--grotesk);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
}

.preis__name {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0;
}

.preis__betrag {
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0.35rem 0 0;
}

.preis__betrag small {
  font-size: 0.9rem;
  color: var(--tinte-leise);
  font-family: var(--grotesk);
  letter-spacing: 0.02em;
}

.preis__je {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.preis ul {
  list-style: none;
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.97rem;
  color: var(--tinte-leise);
}

.preis li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  line-height: 1.5;
}

.preis li::before {
  content: "\2713";
  color: var(--terrakotta);
  font-weight: 700;
  flex: none;
}

.preis .knopf {
  margin-top: auto;
}

/* --- Fragen (nativ, ohne Skript) --------------------------------------- */

.fragen {
  max-width: 48rem;
  margin-inline: auto;
  border-top: 1px solid var(--linie);
}

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

.frage summary {
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--terrakotta);
  line-height: 1;
}

.frage[open] summary::after {
  content: "\2013";
}

.frage__inhalt {
  padding: 0 2.5rem 1.35rem 0;
  color: var(--tinte-leise);
}

.frage__inhalt > :last-child {
  margin-bottom: 0;
}

/* --- Aufforderungsband -------------------------------------------------- */

.aufforderung {
  position: relative;
  color: #fff;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.aufforderung::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/band-muenzen.webp") center / cover no-repeat;
}

.aufforderung::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(40, 24, 12, 0.76);
}

.aufforderung h2 {
  color: #fff;
}

.aufforderung .fuehrung {
  color: rgba(255, 255, 255, 0.9);
  margin-inline: auto;
  margin-bottom: 2rem;
}

.aufforderung .knopfreihe {
  justify-content: center;
}

/* --- Formulare ---------------------------------------------------------- */

.feldgruppe {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}

.feldgruppe--zwei {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feld label,
.feld > .feld__frage {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinte);
}

.feld__hinweis {
  font-family: var(--grotesk);
  font-size: 0.8rem;
  color: var(--tinte-zart);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: var(--grotesk);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--rund);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--terrakotta);
  outline: none;
  box-shadow: 0 0 0 3px var(--terrakotta-zart);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--fehler);
}

textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

.kaestchen {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tinte-leise);
}

.kaestchen input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--terrakotta);
}

/* Honigtopf: ein Feld, das kein Mensch sieht und kein Mensch fuellt. Wird es
   gefuellt, war es ein Automat. Bewusst nicht display:none - manche Automaten
   pruefen darauf und lassen solche Felder aus. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  border-radius: var(--rund);
  padding: 1rem 1.15rem;
  font-family: var(--grotesk);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.meldung--fehler {
  background: var(--fehler-grund);
  border: 1px solid #e6c4bb;
  color: var(--fehler);
}

.meldung--erfolg {
  background: var(--erfolg-grund);
  border: 1px solid #c3ddcb;
  color: var(--erfolg);
}

.meldung--hinweis {
  background: var(--terrakotta-zart);
  border: 1px solid #e3cdbc;
  color: var(--terrakotta);
}

.kasten {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: var(--schatten);
}

/* --- Buchungsraster ----------------------------------------------------- */

.wochenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.wochenkopf__spanne {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 1rem;
}

.blaettern {
  display: flex;
  gap: 0.5rem;
}

.blaettern button {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  color: var(--tinte);
}

.blaettern button:hover:not(:disabled) {
  border-color: var(--terrakotta);
  color: var(--terrakotta);
}

.blaettern button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tage {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.tag {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1rem 0.9rem 1.1rem;
}

.tag__name {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terrakotta);
  margin: 0;
}

.tag__datum {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: var(--tinte-zart);
  margin: 0 0 0.85rem;
}

.zeiten {
  display: grid;
  gap: 0.45rem;
}

.zeit {
  font-family: var(--grotesk);
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--pergament);
  border: 1.5px solid var(--linie);
  border-radius: var(--rund);
  padding: 0.55rem 0.5rem;
  cursor: pointer;
  color: var(--tinte);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.zeit:hover {
  border-color: var(--terrakotta);
  background: var(--terrakotta-zart);
  color: var(--terrakotta);
}

.zeit[aria-pressed="true"] {
  background: var(--terrakotta);
  border-color: var(--terrakotta);
  color: #fff;
}

.tag__leer {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: var(--tinte-zart);
  margin: 0;
}

.gewaehlt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--terrakotta-zart);
  border: 1px solid #e3cdbc;
  border-radius: var(--rund);
  padding: 0.9rem 1.15rem;
  font-family: var(--grotesk);
  font-size: 0.95rem;
  color: var(--terrakotta);
  margin-bottom: 1.5rem;
}

.gewaehlt strong {
  font-weight: 700;
}

.laedt {
  font-family: var(--grotesk);
  font-size: 0.95rem;
  color: var(--tinte-zart);
  padding-block: 2rem;
  text-align: center;
}

/* --- Auswahl als Karten (Radiogruppe) ----------------------------------- */

.wahl {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}

.wahl legend {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.6rem;
}

/* Die Beschriftung ist die Karte. Das versteckte Radiofeld traegt trotzdem
   den Zustand: Tastatur, Vorlesegeraet und Formularversand funktionieren
   damit unveraendert - nur gezeichnet wird es selbst nicht. */
.wahl__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.15rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wahl__option:hover {
  border-color: var(--gold);
}

.wahl__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wahl__option:has(input:checked) {
  border-color: var(--terrakotta);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--terrakotta-zart);
}

.wahl__option:has(input:focus-visible) {
  outline: 3px solid var(--terrakotta);
  outline-offset: 3px;
}

.wahl__titel {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 1rem;
}

.wahl__preis {
  font-size: 1.5rem;
  line-height: 1.2;
}

.wahl__zusatz {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: var(--tinte-leise);
  line-height: 1.5;
}

/* Alte Browser ohne :has bekommen wenigstens einen sichtbaren Haken. Ohne das
   waere gar nicht zu erkennen, was gewaehlt ist. */
@supports not selector(:has(*)) {
  .wahl__option input {
    position: static;
    opacity: 1;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--terrakotta);
    margin-bottom: 0.4rem;
  }
}

/* --- Zusammenfassung / Kontoangaben ------------------------------------- */

.daten {
  display: grid;
  gap: 0.4rem 1.25rem;
  grid-template-columns: auto 1fr;
  font-family: var(--grotesk);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

.daten dt {
  color: var(--tinte-zart);
}

.daten dd {
  margin: 0;
  font-weight: 600;
}

/* --- Bestelluebersicht -------------------------------------------------- */
/*
   Steht unmittelbar ueber dem Bestellknopf. Das ist keine Gestaltungsfrage:
   § 312j Abs. 2 BGB mit Art. 246a EGBGB verlangt, dass Leistung und
   Gesamtpreis dort stehen, wo der Kunde klickt - nicht weiter oben auf der
   Seite, wo er sie vielleicht nicht mehr sieht.
*/
.uebersicht {
  background: var(--pergament-tief);
  border: 1.5px solid var(--gold);
  border-radius: var(--rund);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.25rem;
  font-family: var(--grotesk);
}

.uebersicht h3 {
  font-family: var(--grotesk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 .75rem;
}

.uebersicht dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.25rem;
  margin: 0 0 .75rem;
  font-size: .95rem;
}

.uebersicht dt {
  color: var(--tinte-leise);
}

.uebersicht dd {
  margin: 0;
  font-weight: 600;
}

.uebersicht .summe dd,
.uebersicht .summe dt {
  font-size: 1.25rem;
  color: var(--terrakotta);
  font-weight: 700;
  padding-top: .35rem;
  border-top: 1px solid var(--linie);
}

.uebersicht .klein {
  font-size: .82rem;
  color: var(--tinte-leise);
  line-height: 1.55;
  margin: 0;
}

/* --- Rechtsseiten ------------------------------------------------------- */

.rechtstext {
  max-width: 46rem;
}

.rechtstext h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
}

.rechtstext h3 {
  font-size: 1.15rem;
  margin-top: 1.9rem;
}

.rechtstext h4 {
  font-size: 1rem;
  margin-top: 1.5rem;
}

.rechtstext p,
.rechtstext li {
  font-size: 1rem;
  color: var(--tinte-leise);
}

.rechtstext strong {
  color: var(--tinte);
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  background: #2a1d12;
  color: rgba(255, 255, 255, 0.76);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: 0.95rem;
}

.fuss__raster {
  display: grid;
  gap: 2rem;
  /* Vier Bloecke: der Markenblock breiter, daneben die drei Spalten mit
     Verweisen. Feste Zahl statt auto-fit - das legte bei 768 Pixeln drei
     Spalten an, und der vierte Block stand allein darunter. */
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.fuss img {
  width: 3.5rem;
  /* MUSS dabeistehen. Ohne "height: auto" gilt das height-Attribut aus dem
     Markup als Hoehe - bei einem 160 x 160 grossen Zeichen also 56 Pixel
     breit und 160 hoch. Das Zeichen stand dadurch schmal und in die Laenge
     gezogen im Fuss. Der Fehler war schon vorher da und ist erst aufgefallen,
     als mit der Lyra ein Kreis an dieser Stelle stand: an einem Kranz sieht
     man eine Verzerrung viel schlechter. */
  height: auto;
  margin-bottom: 0.9rem;
  /* KEIN Filter mehr. Hier stand "brightness(0) invert(1) opacity(.82)", was
     jedes Zeichen in eine weisse Silhouette verwandelt. Gedacht war das fuer
     den alten Lorbeerkranz, der dunkel gezeichnet war und auf dem dunklen
     Grund verschwand. Die Lyra ist gold und traegt auf #2a1d12 von selbst -
     der Filter haette ihr nur die Farbe genommen. */
}

@media (max-width: 48rem) {
  /* Der Markenblock ueber die ganze Breite, die drei Verweisspalten darunter
     nebeneinander. So bleibt jede Reihe voll. */
  .fuss__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fuss__raster > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 34rem) {
  /* Drei Spalten waeren hier unter 130 Pixel breit - "Karten & Einzelstunden"
     braucht mehr. Untereinander. */
  .fuss__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fuss h2 {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.fuss a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.fuss a:hover {
  color: #fff;
  text-decoration: underline;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.fuss__schluss {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Einblenden beim Scrollen ------------------------------------------- */

/* Der unsichtbare Ausgangszustand haengt an der Klasse "animiert", die ein
   winziges Skript im Kopf der Seite setzt - und nur dann, wenn der Besucher
   Bewegung nicht abbestellt hat und sein Browser IntersectionObserver kennt.
   Ohne Skript gibt es die Klasse nicht, und dann steht schlicht alles da.

   Genau so herum und nicht anders: stuende das opacity:0 fest in der Regel,
   waere die Seite ohne JavaScript leer. Das ist der eine Fehler, den eine
   Einblendung niemals wert ist. */
html.animiert .eintritt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.animiert .eintritt.sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .kopf,
  .fuss,
  .aufforderung,
  .knopf {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* Tabellen in den Rechtstexten - bisher gab es dort keine, weil der
   Markdown-Umwandler sie gar nicht erst erzeugt hat. Die Preistabelle in § 5
   der AGB stand deshalb als Fließtext auf der Seite. */
.tabelle-huelle {
  overflow-x: auto;
  margin: 1.2rem 0;
}

.tabelle-huelle table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-size: 0.95rem;
}

.tabelle-huelle th,
.tabelle-huelle td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--linie);
}

.tabelle-huelle th {
  font-family: var(--grotesk);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  border-bottom-width: 2px;
}

.tabelle-huelle tbody tr:last-child th,
.tabelle-huelle tbody tr:last-child td {
  border-bottom: none;
}

/* Der Weiterlesen-Verweis am Fuss der drei Konzeptkacheln. Bewusst kein
   Knopf: Auf der Startseite stehen schon zwei Knöpfe im Titelbereich, und
   ein dritter in jeder Kachel nähme ihnen das Gewicht. */
.karte__weiter {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 500;
}

.karte__weiter a {
  color: var(--terrakotta);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.karte__weiter a:hover,
.karte__weiter a:focus-visible {
  color: var(--terrakotta-hell);
  border-bottom-color: var(--terrakotta-hell);
}