/* ============================================================
   DEMOS / GRUNDSCHICHT

   Die ersten drei Demos (Praxis, Handwerk, Gastro) haben je ein
   komplett eigenes Stylesheet. Das war richtig, um zu zeigen,
   dass es keine Vorlage gibt - und es war viermal dieselbe
   Arbeit an Reset, Raster, Knoepfen und Fuss.

   Ab der zweiten Staffel liegt dieses Handwerkszeug hier. Was
   eine Demo unterscheidet, sind ohnehin nicht die Innenabstaende
   eines Knopfes, sondern Farbe, Schrift, Rhythmus und der Aufbau
   der Abschnitte. Genau das steht weiterhin je Demo einzeln.

   ------------------------------------------------------------
   BEDIENUNG
   ------------------------------------------------------------
   Jede Demo setzt oben ihre Variablen und laedt DANACH ihre
   eigenen Abschnitte. Vorgesehen sind:

     --grund      Flaeche
     --grund-2    abgesetzte Flaeche (jeder zweite Abschnitt)
     --text       Schrift
     --text-2     zurueckgenommene Schrift
     --akzent     Signalfarbe
     --akzent-2   Signalfarbe, hellere oder dunklere Stufe
     --auf-akzent Schrift auf der Signalfarbe
     --linie      Trennlinien
     --tit        Schrift der Ueberschriften
     --txt        Schrift des Fliesstextes
     --r          Eckenradius (0 fuer kantige Entwuerfe)
     --tit-transform  none oder uppercase
     --tit-spacing    Laufweite der Ueberschriften
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--txt);
  font-size: 1.0625rem;   /* 17px: Fliesstext, nicht Kleingedrucktes */
  line-height: 1.62;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--tit);
  line-height: 1.08;
  letter-spacing: var(--tit-spacing, -0.01em);
  text-transform: var(--tit-transform, none);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: 36rem; }
a { color: var(--akzent); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--maxw, 72rem);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.abschnitt { padding-block: clamp(3rem, 8vw, 5.5rem); }
.abschnitt--ab { background: var(--grund-2); }

.auge {
  font-family: var(--txt);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 0.85rem;
}

.gross { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 1.25rem; }

/* ------------------------------------------------------------
   HINWEISBAND

   Steht auf jeder Demo ganz oben und bleibt dort. Eine
   erfundene Firma ohne Kennzeichnung waere irrefuehrend.
   ------------------------------------------------------------ */
.demo-band { background: var(--text); color: var(--grund); font-size: 0.8125rem; line-height: 1.4; }
.demo-band .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.6rem;
}
.demo-band a { color: var(--grund); text-underline-offset: 3px; }

/* ------------------------------------------------------------
   KOPF
   ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--kopf-linie, 1px solid var(--linie));
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.6rem; min-height: 62px;
}
.logo {
  font-family: var(--tit);
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-transform: var(--tit-transform, none);
  letter-spacing: var(--tit-spacing, -0.01em);
}
.kopf-nav { display: none; gap: 1.5rem; }
.kopf-nav a {
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-nav a:hover { color: var(--text); }
@media (min-width: 60rem) { .kopf-nav { display: flex; } }

/* ------------------------------------------------------------
   KNOEPFE
   ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.75rem 1.4rem;
  border: 1px solid transparent; border-radius: var(--r, 3px);
  font: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.knopf--voll { background: var(--akzent); color: var(--auf-akzent); }
.knopf--voll:hover { background: var(--akzent-2); }
.knopf--linie { border-color: var(--text); color: var(--text); background: transparent; }
.knopf--linie:hover { background: var(--text); color: var(--grund); }
.knopf svg { width: 18px; height: 18px; flex: none; }

.tun { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------
   RASTER
   ------------------------------------------------------------ */
.zwei { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60rem) { .zwei { grid-template-columns: 1fr 1fr; } }

.drei { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 46rem) { .drei { grid-template-columns: repeat(3, 1fr); } }

.karte {
  border: 1px solid var(--linie);
  border-radius: var(--r, 3px);
  background: var(--grund);
  padding: clamp(1.25rem, 3vw, 1.7rem);
}
.karte h3 { font-size: 1.35rem; margin-bottom: 0.55rem; }
.karte p { font-size: 0.9375rem; color: var(--text-2); margin: 0; max-width: none; }

/* Tabellen: Preise, Zeiten, Kurse. Ziffern in gleicher Breite,
   sonst tanzen die Spalten. */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabelle th, .tabelle td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-weight: 600; color: var(--text-2); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tabelle td:last-child, .tabelle th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------
   FRAGEN
   ------------------------------------------------------------ */
.fragen { max-width: 44rem; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1rem 2.5rem 1rem 0; min-height: 48px;
  display: flex; align-items: center;
  font-family: var(--tit); font-size: 1.15rem;
  text-transform: var(--tit-transform, none);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fragen details p { padding-bottom: 1rem; color: var(--text-2); }

/* ------------------------------------------------------------
   FUSS
   ------------------------------------------------------------ */
.fuss {
  background: var(--fuss-grund, var(--text));
  color: var(--fuss-text, var(--grund));
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.fuss a { color: inherit; }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr; } }
.fuss h3 {
  font-family: var(--txt); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.65; margin-bottom: 0.8rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { text-decoration: none; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.fuss p { opacity: 0.85; font-size: 0.9375rem; max-width: 24rem; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: 0.8125rem; opacity: 0.75;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------------
   TASTATUR
   ------------------------------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--auf-akzent);
  padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }