/*
Theme Name: Karate TVV
Theme URI: https://karate-vohenstrauss.de
Description: Eigene Gestaltung fuer das Karate Dojo Vohenstrauss im TV. Schwarz mit
  roten Hervorhebungen, abgeleitet von der Seminarseite zum Andre-Bertel-Lehrgang
  2027. Kindblatt von Astra. Nicht von Hand aendern, die Quelle liegt unter
  "C:\claude\Karate Webseite\theme\karate-tvv\" und wird von dort ausgerollt.
Author: Karate Dojo Vohenstrauss
Template: astra
Version: 1.0.0
Text Domain: karate-tvv
*/

/* ============================================================
   1. Farben und Masse
   Werte aus GESTALTUNG.md, ausgelesen aus der Bertel-Seminarseite.
   ============================================================ */
:root {
  --k-grund:        #0b0c0e;  /* Seitenhintergrund */
  --k-flaeche:      #141619;  /* Karten, abgesetzte Kaesten */
  --k-flaeche-hoch: #1f2226;  /* aktiver Zustand */
  --k-linie:        #26292e;  /* Rahmen, Trennlinien */
  --k-linie-hell:   #3a3d42;  /* Rahmen von Bedienelementen */
  --k-text:         #f2f2ef;  /* Fliesstext, gebrochenes Weiss */
  --k-text-ruhig:   #b9bec5;  /* Beitexte, Bildunterschriften */
  --k-text-leise:   #8d939b;  /* Auszeichnungen, Fusszeile */
  --k-akzent:       #e8402f;  /* das tragende Rot */
  --k-akzent-link:  #e8a08f;  /* Verweise im Fliesstext */

  --k-schrift: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --k-schrift-titel: "Oswald", "Arial Narrow", Impact, sans-serif;

  --k-breite: 1200px;
}

/* ------------------------------------------------------------
   Astras eigene Farbpalette umlegen.

   Warum das noetig ist: Astra schreibt seine Farben als CSS-Variablen
   ins Kopfteil der Seite und benutzt sie in Regeln wie
   ".entry-content h1 { color: var(--ast-global-color-2) }". Diese Regel
   ist genauer als ein blosses "h1" und setzt sich deshalb gegen das
   eigene Blatt durch: die Ueberschriften standen dadurch in Astras
   Dunkelblau #1e293b statt im gebrochenen Weiss.

   Statt jede einzelne Regel mit noch genaueren Selektoren zu
   ueberbieten, werden hier die Variablen selbst umgelegt. Damit stimmen
   auch die Stellen, die das eigene Blatt nie erreicht: Ausgaben von
   Erweiterungen, Kopf- und Fussbereich, Formularfelder.
   ------------------------------------------------------------ */
:root {
  --ast-global-color-0: #e8402f;  /* Akzent: Knoepfe, aktive Zustaende */
  --ast-global-color-1: #e8a08f;  /* Akzent hell: Verweise */
  --ast-global-color-2: #f2f2ef;  /* Ueberschriften */
  --ast-global-color-3: #f2f2ef;  /* Fliesstext */
  --ast-global-color-4: #0b0c0e;  /* Grund */
  --ast-global-color-5: #141619;  /* abgesetzte Flaeche */
  --ast-global-color-6: #f2f2ef;  /* Text auf dunklem Grund */
  --ast-global-color-7: #26292e;  /* Rahmen und Trennlinien */
  --ast-global-color-8: #f2f2ef;
  --ast-border-color: #26292e;
}

/* ============================================================
   2. Grundlage
   ============================================================ */
body,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template {
  background-color: var(--k-grund);
  color: var(--k-text);
  font-family: var(--k-schrift);
  font-size: 16px;
  line-height: 1.65;
}

#page, #content, .site-content { background-color: var(--k-grund); }

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container #primary,
.ast-separate-container .comment-respond {
  background-color: transparent;
  box-shadow: none;
}

img, figure img { border-radius: 0; }

/* Lange Woerter umbrechen lassen.
   Deutsch hat Komposita wie "Prueferlizenzverlaengerung". Auf der
   Terminseite ragte ein solcher Titel drei Bildpunkte ueber den Rand
   hinaus, und die ganze Seite liess sich dadurch seitwaerts schieben.
   Silbentrennung nur im Fliesstext, in Ueberschriften wirkt sie unruhig. */
h1, h2, h3, h4, .entry-title, .k-name, a, td, th, summary,
.tribe-events-calendar-list__event-title-link {
  overflow-wrap: break-word;
  word-break: normal;
}
.entry-content p, .entry-content li, .k-karte p, .k-frage .k-antwort {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Verbandslogos.
   Das flex-shrink: 0 ist der eigentliche Punkt: ohne es quetscht der
   Flexverbund die Logos auf schmalen Bildschirmen auf 16 Bildpunkte
   Breite, waehrend die Hoehe bei 86 bleibt. Sie sind dann unsichtbar. */
.k-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: 26px 0;
}
.k-logos img {
  flex: 0 0 auto;
  height: 86px;
  width: auto;
  max-width: 100%;
  background: var(--k-text);
  padding: 8px;
}

::selection { background: var(--k-akzent); color: var(--k-grund); }

/* Rechtwinklig, ueberall. Das ist der Ton der Seite. */
.wp-block-button__link, .ast-button, button, input, select, textarea,
.wp-block-image img, .wp-block-cover, .k-karte {
  border-radius: 0 !important;
}

/* ============================================================
   3. Ueberschriften
   ============================================================ */
h1, h2, h3, .entry-title, .page-title {
  font-family: var(--k-schrift-titel);
  font-weight: 400;
  color: var(--k-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

h1, .entry-title, .page-title {
  font-size: clamp(34px, 6vw, 58px);
  margin: 0 0 18px;
}

h2 {
  font-size: clamp(26px, 4.5vw, 38px);
  margin: 46px 0 6px;
}

/* Das Erkennungszeichen der Gestaltung: roter Balken unter jeder H2. */
.entry-content h2::after,
.k-inhalt h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--k-akzent);
  margin-top: 10px;
}

h3 {
  font-size: clamp(19px, 2.6vw, 24px);
  margin: 32px 0 8px;
}

h4 {
  font-family: var(--k-schrift);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--k-text-leise);
  margin: 26px 0 8px;
}

/* ============================================================
   4. Fliesstext, Verweise, Listen
   ============================================================ */
p { margin: 0 0 16px; }

.entry-content a:not(.wp-block-button__link):not(.k-knopf) {
  color: var(--k-akzent-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content a:not(.wp-block-button__link):not(.k-knopf):hover {
  color: var(--k-akzent);
}

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

/* Liste mit rotem Strich statt Punkt */
.k-haken { list-style: none; padding-left: 0; }
.k-haken li { position: relative; padding-left: 26px; }
.k-haken li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 3px;
  background: var(--k-akzent);
}

blockquote {
  border-left: 4px solid var(--k-akzent);
  background: var(--k-flaeche);
  margin: 26px 0;
  padding: 18px 22px;
  color: var(--k-text);
  font-size: 18px;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-text-leise);
}

hr, .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--k-linie);
  margin: 40px 0;
}

/* ============================================================
   5. Knoepfe
   Roter Grund, fast schwarze Schrift, keine Pillenform. Genau das ist
   der Unterschied zur Vereinsseite, die runde Knoepfe in Blau hat.
   ============================================================ */
/* Der Unterstrich muss ausdruecklich weg. Astra setzt Verweise im
   Inhaltsbereich mit ".entry-content a" unterstrichen, und dieser Selektor
   ist genauer als ein blosses ".k-knopf". Die Knoepfe waren dadurch
   unterstrichen. */
.entry-content a.k-knopf,
.entry-content .k-knopf,
.k-hero a.k-knopf,
.k-knopf,
.wp-block-button__link,
.ast-button,
button, input[type="submit"] {
  text-decoration: none;
  display: inline-block;
  background: var(--k-akzent);
  color: var(--k-grund);
  border: 0;
  font-family: var(--k-schrift);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.k-knopf:hover,
.wp-block-button__link:hover,
.ast-button:hover,
button:hover, input[type="submit"]:hover {
  background: var(--k-text);
  color: var(--k-grund);
}

/* Zweitrangiger Knopf: nur Umriss.
   Die Selektoren sind so ausfuehrlich, weil die Regel fuer den roten Knopf
   darueber mit ".entry-content a.k-knopf" und ".k-hero a.k-knopf" arbeitet,
   um Astras Unterstreichung zu schlagen. Ein blosses ".k-knopf-leer" waere
   dagegen zu ungenau: der zweite Knopf im Kopfbereich stand dadurch
   ebenfalls in Rot, statt nur einen Umriss zu tragen. */
.k-knopf-leer,
.entry-content a.k-knopf-leer,
.k-hero a.k-knopf-leer,
.entry-content .k-knopf-leer {
  background: transparent;
  color: var(--k-text);
  border: 1px solid var(--k-linie-hell);
}
.k-knopf-leer:hover,
.entry-content a.k-knopf-leer:hover,
.k-hero a.k-knopf-leer:hover {
  background: var(--k-flaeche-hoch);
  color: var(--k-text);
  border-color: var(--k-akzent);
}

/* ============================================================
   6. Karten im Raster
   ============================================================ */
.k-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 22px 0 8px;
}
.k-karten-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.k-karten-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.k-karte {
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
  padding: 18px 18px 16px;
}
.k-karte h3,
.k-karte .k-kopf {
  font-family: var(--k-schrift);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--k-text-leise);
  margin: 0 0 10px;
}
.k-karte h3::after { display: none; }
.k-karte p { margin: 0 0 6px; font-size: 15.5px; }
.k-karte p:last-child { margin-bottom: 0; }
.k-karte .k-gross {
  font-family: var(--k-schrift-titel);
  font-size: 32px;
  line-height: 1.1;
  color: var(--k-text);
}
.k-karte .k-klein {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--k-text-ruhig);
}
.k-karte a { color: var(--k-akzent-link); }

/* ============================================================
   7. Kopfbereich einer Seite
   ============================================================ */
.k-hero {
  position: relative;
  overflow: hidden;
  padding: 46px 0 30px;
  background: radial-gradient(ellipse 80% 60% at 50% 20%,
              rgba(90,112,140,.30), transparent 70%);
}
.k-hero .k-figur {
  float: right;
  height: 380px;
  width: auto;
  max-width: 45%;
  margin: -18px 0 8px 20px;
  object-fit: contain;
  filter: grayscale(1) sepia(.42) hue-rotate(178deg)
          saturate(1.15) brightness(.94) contrast(1.14);
}
.k-hero h1 { font-size: clamp(40px, 8vw, 78px); line-height: .94; }
.k-hero .k-vorsatz { color: var(--k-text-ruhig); font-size: 17px; margin: 0 0 24px; }

/* Signet: rotes Quadrat plus gesperrte Zeile */
.k-signet { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.k-signet .k-zeichen {
  background: var(--k-akzent);
  color: var(--k-grund);
  font-family: var(--k-schrift-titel);
  font-size: 24px;
  line-height: 1;
  padding: 7px 10px 5px;
}
.k-signet .k-wort {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--k-text-ruhig);
}

.k-rot { color: var(--k-akzent); }
.k-ruhig { color: var(--k-text-ruhig); }
.k-leise { color: var(--k-text-leise); font-size: 14px; }

/* ============================================================
   8. Tabellen, zum Beispiel die Trainingszeiten
   ============================================================ */
.entry-content table, .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15.5px;
}
.entry-content th, .wp-block-table th {
  background: var(--k-flaeche-hoch);
  color: var(--k-text-leise);
  font-family: var(--k-schrift);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--k-linie);
}
.entry-content td, .wp-block-table td {
  padding: 12px 14px;
  border: 1px solid var(--k-linie);
  background: var(--k-flaeche);
  vertical-align: top;
}
.entry-content tr:hover td { background: var(--k-flaeche-hoch); }

/* Tag und Zeit hervorheben, das sind die beiden Angaben, wegen derer
   die Seite aufgerufen wird. */
.k-zeiten td:first-child {
  font-family: var(--k-schrift-titel);
  font-size: 19px;
  color: var(--k-akzent);
  white-space: nowrap;
}
.k-zeiten td:nth-child(2) {
  font-family: var(--k-schrift-titel);
  font-size: 18px;
  color: var(--k-text);
  white-space: nowrap;
}

/* ============================================================
   9. Ausklapper, fuer die Fragen und Antworten
   Nativ mit details und summary, ohne Skript und mit Tastatur bedienbar.
   ============================================================ */
.k-frage {
  border: 1px solid var(--k-linie);
  background: var(--k-flaeche);
  margin-bottom: 10px;
}
.k-frage > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--k-text);
}
.k-frage > summary::-webkit-details-marker { display: none; }
.k-frage > summary::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 12px; height: 3px;
  background: var(--k-akzent);
  transform: translateY(-50%);
}
.k-frage > summary::before {
  content: "";
  position: absolute;
  right: 22.5px; top: 50%;
  width: 3px; height: 12px;
  background: var(--k-akzent);
  transform: translateY(-50%);
  transition: opacity .15s;
}
.k-frage[open] > summary::before { opacity: 0; }
.k-frage[open] > summary { background: var(--k-flaeche-hoch); }
.k-frage > summary:hover { background: var(--k-flaeche-hoch); }
.k-frage .k-antwort { padding: 4px 18px 18px; border-top: 1px solid var(--k-linie); }
.k-frage .k-antwort > *:first-child { margin-top: 14px; }
.k-frage .k-antwort > *:last-child { margin-bottom: 0; }

/* ============================================================
   9b. Ausklappbare Sammlung (die drei Kata-Sammlungen)
   ============================================================ */
.k-sammlung {
  border: 1px solid var(--k-linie);
  background: var(--k-flaeche);
  margin: 0 0 12px;
}
.k-sammlung > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.k-sammlung > summary::-webkit-details-marker { display: none; }
.k-sammlung .k-sammlung-name {
  font-family: var(--k-schrift-titel);
  font-size: clamp(21px, 3.4vw, 28px);
  text-transform: uppercase;
  color: var(--k-text);
  line-height: 1.1;
}
.k-sammlung .k-sammlung-zahl {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-akzent);
}
/* Plus- und Minuszeichen, wie bei den Fragen */
.k-sammlung > summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 14px; height: 3px;
  background: var(--k-akzent);
  transform: translateY(-50%);
}
.k-sammlung > summary::before {
  content: "";
  position: absolute;
  right: 25.5px; top: 50%;
  width: 3px; height: 14px;
  background: var(--k-akzent);
  transform: translateY(-50%);
  transition: opacity .15s;
}
.k-sammlung[open] > summary::before { opacity: 0; }
.k-sammlung[open] > summary,
.k-sammlung > summary:hover { background: var(--k-flaeche-hoch); }
.k-sammlung-inhalt {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--k-linie);
}
.k-sammlung-inhalt .k-haken { margin-top: 16px; }

/* ============================================================
   10. Hinweiskasten
   ============================================================ */
.k-hinweis {
  border-left: 4px solid var(--k-akzent);
  background: var(--k-flaeche);
  padding: 16px 20px;
  margin: 24px 0;
}
.k-hinweis > *:last-child { margin-bottom: 0; }

/* ============================================================
   11. Trainerraster
   ============================================================ */
.k-trainer {
  display: grid;
  /* Ab 240 px, damit auf der vollen Inhaltsbreite vier Kacheln
     nebeneinander stehen. Bei den zwoelf Portraits ergibt das drei ruhige
     Reihen. Die Vorlagen sind 600 px breit, hochgerechnet wird nichts. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 26px 0;
}
.k-trainer figure {
  margin: 0;
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
}
/* Verhaeltnis 1,24 zu 1, wie das Bildmaterial.
   Elf der vierzehn Trainerbilder sind Montagen mit eingebranntem Namen und
   Dan-Grad und liegen nur in etwa 390 auf 335 Bildpunkten vor. Quadratisch
   oder hochkant zugeschnitten wuerde der Text angeschnitten. Naeheres im
   Kopf von bau_medien.py. */
.k-trainer img {
  display: block;
  width: 100%;
  /* Hochformat, wie die Aufnahmen von 2026. Bis 2025 lagen hier
     Montagen im Querformat 420 auf 339. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Bei einem Portrait steht der Kopf oben. */
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06) brightness(.97);
  transition: filter .2s;
}
.k-trainer figure:hover img { filter: none; }
.k-trainer figcaption { padding: 14px 16px 16px; }
.k-trainer .k-name {
  font-family: var(--k-schrift-titel);
  font-size: 21px;
  text-transform: uppercase;
  color: var(--k-text);
  display: block;
  line-height: 1.15;
}
.k-trainer .k-rolle {
  display: block;
  margin: 4px 0 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-akzent);
}
.k-trainer ul {
  margin: 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--k-text-ruhig); line-height: 1.5;
}
.k-trainer li { margin-bottom: 3px; }

/* ============================================================
   12. Kopf und Navigation (Astra Header Footer Builder)
   ============================================================ */
.site-header, #masthead,
.ast-above-header, .ast-main-header-wrap, .main-header-bar,
.ast-below-header, .site-header-focus-item {
  background-color: var(--k-grund) !important;
  border-bottom: 1px solid var(--k-linie);
  box-shadow: none;
}

/* Der Seitenname wird bereits in PHP in Grossbuchstaben gesetzt, siehe
   karate_tvv_seitentitel_gross() in functions.php. Grund: CSS macht aus
   einem "ß" beim Umwandeln in Grossbuchstaben regelwidrig "SS", aus
   "Vohenstrauß" wuerde also "VOHENSTRAUSS". Deshalb hier ausdruecklich
   KEIN text-transform. */
.site-title, .site-title a {
  font-family: var(--k-schrift-titel);
  text-transform: none;
  color: var(--k-text) !important;
  letter-spacing: 0.02em;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.15;
  white-space: nowrap;
}

/* Das Menue hat acht Punkte und braucht mit Astras Voreinstellung 840 px,
   waehrend nur 816 px zur Verfuegung stehen. Es brach dadurch um und
   "Kontakt" landete auf einer zweiten Zeile. Engere Abstaende und eine
   Kleinigkeit weniger Schriftgroesse bringen es auf etwa 780 px.
   Unterhalb von 1150 px Fensterbreite uebernimmt das Klappmenue, siehe
   die Astra-Einstellung "mobile-header-breakpoint". */
.main-header-menu > .menu-item > .menu-link {
  padding-left: 8px;
  padding-right: 8px;
}
.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link { font-size: 13px; }
.ast-header-break-point .main-header-menu .menu-link { font-size: 15px; }
.site-description {
  color: var(--k-text-leise) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.main-navigation .menu-link,
.ast-builder-menu .menu-item > .menu-link {
  font-family: var(--k-schrift);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--k-text-ruhig) !important;
}
.main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link,
.ast-builder-menu .current-menu-ancestor > .menu-link {
  color: var(--k-text) !important;
}
/* Roter Strich unter dem aktiven Menuepunkt.
   Nur im Menue auf dem Rechner. Astra setzt der Seite die Klasse
   "ast-header-break-point", sobald das Klappmenue uebernimmt. Ohne diese
   Einschraenkung wurde aus dem Unterstrich im Klappmenue ein roter Balken
   ueber die ganze Bildschirmbreite, der wie ein Versehen aussah. */
body:not(.ast-header-break-point) .main-header-menu > .menu-item > .menu-link {
  position: relative;
}
body:not(.ast-header-break-point) .main-header-menu > .menu-item.current-menu-item > .menu-link::after,
body:not(.ast-header-break-point) .main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
body:not(.ast-header-break-point) .main-header-menu > .menu-item:hover > .menu-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 3px;
  background: var(--k-akzent);
}

/* Untermenues */
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu {
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie);
  box-shadow: none;
}
.main-header-menu .sub-menu .menu-link {
  border-bottom: 1px solid var(--k-linie);
  letter-spacing: 0.06em;
}
.main-header-menu .sub-menu .menu-item:last-child .menu-link { border-bottom: 0; }
.main-header-menu .sub-menu .menu-item:hover > .menu-link {
  background: var(--k-flaeche-hoch) !important;
}
.main-header-menu > .menu-item > .sub-menu > .menu-item > .menu-link::after {
  display: none;
}

/* ------------------------------------------------------------
   Klappmenue auf dem Mobilgeraet

   Drei Dinge waren hier falsch und sind hier gerichtet:

   1. **Der Aufklappwinkel war unsichtbar.** Astras SVG bringt weder ein
      fill-Attribut noch eine Regel mit und faellt damit auf die
      Voreinstellung Schwarz zurueck. Auf dem fast schwarzen Grund der
      Seite sah man ihn kaum. Jetzt folgt er der Textfarbe.
   2. **Nach dem Antippen erschien ein hellblauer Rahmen.** Das ist die
      Voreinstellung von -webkit-tap-highlight-color, rgba(51,181,229,.4).
      Sie ist abgeschaltet, dafuer gibt es einen eigenen gedrueckten
      Zustand in der Flaechenfarbe.
   3. Der rote Strich des aktiven Punktes lief ueber die ganze Breite,
      siehe die Regel weiter oben.
   ------------------------------------------------------------ */
.ast-mobile-menu-trigger-fill, .ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-buttons-minimal {
  background: transparent !important;
  color: var(--k-akzent) !important;
  border: 1px solid var(--k-linie-hell);
}

.ast-header-break-point .main-header-bar-navigation,
.ast-mobile-header-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background: var(--k-grund) !important;
}

/* Kein hellblaues Aufblitzen beim Antippen, nirgends. */
a, button, summary, .menu-link, .ast-menu-toggle, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Die Punkte im Klappmenue: als Liste lesbar, gross genug zum Antippen */
.ast-mobile-header-content .menu-item > .menu-link,
.ast-header-break-point #ast-hf-mobile-menu .menu-link {
  position: relative;
  /* 48 Bildpunkte sind das Mass, das sich sicher antippen laesst. Mit
     Polsterung 12 kam die Zeile auf 70 und das Menue wurde unnoetig lang:
     neun Hauptpunkte allein waren 630 Bildpunkte. */
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 8px 60px 8px 20px;
  border-bottom: 1px solid var(--k-linie);
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.ast-mobile-header-content .menu-item > .menu-link:active,
.ast-header-break-point #ast-hf-mobile-menu .menu-link:active {
  background: var(--k-flaeche-hoch);
}

/* Aktiver Punkt: roter Balken links, nicht quer ueber den Bildschirm */
.ast-mobile-header-content .current-menu-item > .menu-link,
.ast-mobile-header-content .current-menu-ancestor > .menu-link {
  background: var(--k-flaeche);
  color: var(--k-text) !important;
  box-shadow: inset 4px 0 0 0 var(--k-akzent);
}
.ast-mobile-header-content .current-menu-item > .menu-link::after,
.ast-mobile-header-content .current-menu-ancestor > .menu-link::after {
  content: none !important;
}

/* Untermenue: eingerueckt und abgesetzt, damit die Ebene zu erkennen ist */
.ast-mobile-header-content .sub-menu {
  background: #0f1113 !important;
  border: 0 !important;
}
/* Die ID-Fassung muss mit aufgefuehrt werden.
   Die allgemeine Regel fuer die Menuepunkte oben nennt als zweiten
   Selektor "#ast-hf-mobile-menu .menu-link". Darin steckt eine ID, und die
   schlaegt jede Regel aus blossen Klassen. Ohne die ID hier setzten sich
   Schriftgroesse und Polsterung der allgemeinen Regel durch, die
   Untermenueregel wurde stillschweigend uebergangen. Das war auch der
   Grund, warum ein erster Versuch mit "padding-left" nicht wirkte, und
   nicht, wie zunaechst vermutet, eine Regel von Astra. */
.ast-mobile-header-content .sub-menu .menu-link,
.ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link {
  font-size: 14.5px;
  color: var(--k-text-ruhig) !important;
  letter-spacing: 0.06em;
  text-transform: none;
  min-height: 46px;
}

/* Der rote Strich als Marke vor dem Namen.
   Er steht IM TEXTFLUSS und ist nicht absolut gesetzt. Erster Versuch war
   "position: absolute; left: 20px" zusammen mit "padding-left: 34px" am
   Verweis. Die Polsterung setzte sich nicht durch (siehe den Hinweis zur
   ID oben), der Strich lag dadurch genau auf dem ersten Buchstaben.

   Im Fluss kann das nicht passieren: Der Verweis ist ein Flexbehaelter,
   also wird das ::before zu einem Flexelement und schiebt den Text vor
   sich her, ganz gleich welche Polsterung gilt. */
.ast-mobile-header-content .sub-menu .menu-link::before,
.ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link::before {
  content: "";
  position: static;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 2px;
  margin-right: 13px;
  background: var(--k-akzent);
}

/* Astras eigenes Pfeilsymbol im Unterpunkt ausblenden.
   Die Erweiterung setzt in jeden Verweis eines Untermenues ein
   <span class="ast-icon icon-arrow"> mit einem Winkel. Zusammen mit dem
   roten Strich standen dadurch zwei Marken vor jedem Namen
   ("- > Wir über uns"). Der Strich bleibt, er ist dieselbe Marke wie in
   den Aufzaehlungen im Fliesstext. Der Winkel am Aufklappknopf ist ein
   anderes Element und bleibt unberuehrt.

   Hier steht ausnahmsweise ein !important. Astras Regel dafuer lautet
   ".ast-header-break-point .main-navigation ul .sub-menu
    .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type"
   und kommt auf neun Klassen. Die zu ueberbieten waere ein noch laengerer,
   unlesbarer Selektor, der beim naechsten Astra-Update ohnehin bricht.
   Nebenbei: Astra setzt dort "display: inline", im Flexbehaelter wird
   daraus "block", deshalb war das Symbol ein Block. */
.ast-mobile-header-content .sub-menu .menu-link > .ast-icon.icon-arrow,
.ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon {
  display: none !important;
}

/* Der Aufklappwinkel: sichtbar, gross, und er dreht sich beim Oeffnen. */
.ast-mobile-header-content .ast-menu-toggle,
.ast-header-break-point .ast-menu-toggle {
  /* Bewusst das aufgehellte Rot und nicht Grau: der Winkel ist ein
     Bedienelement und darf sich vom Text abheben. Es ist dieselbe Farbe
     wie bei den Verweisen im Fliesstext. */
  color: var(--k-akzent-link) !important;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--k-linie);
  width: 58px;
  padding: 0;
}
.ast-mobile-header-content .ast-menu-toggle .ast-arrow-svg,
.ast-header-break-point .ast-menu-toggle .ast-arrow-svg,
.ast-menu-toggle .ast-arrow-svg path {
  /* Das eigentliche Uebel: ohne das ist der Winkel schwarz auf schwarz. */
  fill: currentColor;
}
.ast-mobile-header-content .ast-menu-toggle .ast-arrow-svg {
  width: 20px;
  height: auto;
  transition: transform .18s ease;
}
.ast-mobile-header-content .ast-menu-toggle:active { color: var(--k-akzent); }
.ast-mobile-header-content .ast-menu-toggle[aria-expanded="true"] {
  color: var(--k-akzent);
}
.ast-mobile-header-content .ast-menu-toggle[aria-expanded="true"] .ast-arrow-svg {
  transform: rotate(180deg);
}
/* Der Tastaturrahmen liegt innen, damit er nicht als loser Rahmen um den
   Knopf herum erscheint. */
.ast-menu-toggle:focus { outline: none; }
.ast-menu-toggle:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: -4px;
}

/* Etwas Luft unter dem letzten Punkt */
.ast-mobile-header-content .main-navigation { padding-bottom: 8px; }

/* Auf der Startseite steht der Seitenname schon gross im Kopfbereich.
   Die zusaetzliche Ueberschrift "Startseite" darueber ist doppelt. */
.home .entry-header,
.home .ast-single-entry-banner { display: none; }

/* Kopfzeile der Seite (Astra Titelbereich) */
.ast-single-entry-banner, .ast-archive-entry-banner {
  background: var(--k-grund) !important;
  border-bottom: 1px solid var(--k-linie);
  padding-top: 34px !important;
  padding-bottom: 26px !important;
}
.ast-breadcrumbs-wrapper, .ast-breadcrumbs-inner, .trail-items {
  color: var(--k-text-leise);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.ast-breadcrumbs-wrapper a { color: var(--k-text-ruhig); }

/* ============================================================
   13. Fusszeile
   ============================================================ */
.site-footer, .ast-footer-overlay, .site-below-footer-wrap,
.site-primary-footer-wrap, .site-above-footer-wrap {
  background-color: #08090a !important;
  border-top: 1px solid var(--k-linie);
  color: var(--k-text-leise);
}
.site-footer h2, .site-footer h3, .site-footer .widget-title {
  font-family: var(--k-schrift-titel);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--k-text) !important;
  margin-bottom: 12px;
}
.site-footer h2::after, .site-footer h3::after { display: none; }
.site-footer, .site-footer p, .site-footer li { font-size: 14px; }
.site-footer a { color: var(--k-text-ruhig) !important; text-decoration: none; }
.site-footer a:hover { color: var(--k-akzent) !important; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer img { max-height: 64px; width: auto; }

/* Eigener Fussbereich, vier Spalten. Erzeugt von
   karate_tvv_fussbereich() in functions.php. */
.k-fuss { padding: 40px 0 30px; }
.k-fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}
.k-fuss-spalte h3 {
  font-family: var(--k-schrift-titel);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--k-text);
  margin: 0 0 12px;
}
.k-fuss-spalte h3::after { display: none; }
.k-fuss-spalte p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.k-fuss-spalte a { color: var(--k-text-ruhig); text-decoration: none; }
.k-fuss-spalte a:hover { color: var(--k-akzent); }
.k-fuss-spalte ul { list-style: none; padding: 0; margin: 0; }
.k-fuss-spalte li { margin-bottom: 7px; font-size: 14px; }
.k-fuss-spalte img { max-height: 74px; }

/* Die beiden Zeichen im Fussbereich, Dojo und Verein.
   flex-shrink auf 0: ohne das schrumpfen Bilder in einem Flexbehaelter auf
   ihre Mindestbreite zusammen, in der Logoreihe waren sie dadurch schon
   einmal 16 Punkte gross (siehe Fallstrick in BAUFORTSCHRITT.md). */
.k-fuss-zeichen {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0 12px;
}
.k-fuss-zeichen a {
  display: block;
  line-height: 0;
  flex: 0 0 auto;
}
.k-fuss-zeichen img {
  display: block;
  height: 64px;
  width: auto;
  max-height: none;
  opacity: .82;
  transition: opacity .2s;
}
.k-fuss-zeichen a:hover img { opacity: 1; }

@media (max-width: 782px) {
  .k-fuss-zeichen { gap: 16px; }
  .k-fuss-zeichen img { height: 56px; }
}

/* Astras eigene Zeile darunter, nur noch der Urhebervermerk. */
.ast-footer-copyright { font-size: 12.5px; color: var(--k-text-leise); }
.ast-footer-copyright a { color: var(--k-text-leise) !important; }

/* ============================================================
   14. Beitraege in der Liste
   ============================================================ */
.ast-article-post, .blog-layout-1, .ast-grid-common-col {
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie);
  box-shadow: none !important;
}
.ast-article-post .entry-title { font-size: clamp(21px, 2.6vw, 27px); }
.ast-article-post .entry-title a { color: var(--k-text); text-decoration: none; }
.ast-article-post .entry-title a:hover { color: var(--k-akzent); }
.ast-article-post .entry-title::after { display: none; }
.entry-meta, .entry-meta * {
  color: var(--k-text-leise) !important;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.read-more a, .ast-blog-single-element .read-more a {
  color: var(--k-akzent) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Gleich hohe Kacheln, Weiterlesen unten angeschlagen.
   Die Anreisser sind zwischen 180 und 250 Zeichen lang, ohne das
   springt der Verweis von Kachel zu Kachel. */
.ast-article-post .ast-article-inner,
.ast-article-post .post-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ast-article-post .entry-content { flex: 1 1 auto; }
.ast-article-post .read-more { margin-top: auto; margin-bottom: 0; }
/* Der Titel steht im Weiterlesen-Verweis noch einmal, damit
   Vorleseprogramme wissen, wohin er fuehrt. Sichtbar waere er doppelt. */
.read-more .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Blaetterwerk */
.ast-pagination a, .ast-pagination .page-numbers {
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
  color: var(--k-text-ruhig);
  padding: 8px 14px;
}
.ast-pagination .current {
  background: var(--k-akzent);
  border-color: var(--k-akzent);
  color: var(--k-grund);
}

/* ============================================================
   15. Formulare
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie-hell) !important;
  color: var(--k-text) !important;
  padding: 11px 13px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--k-akzent) !important;
  outline: 0;
}
::placeholder { color: var(--k-text-leise); }
label { color: var(--k-text-ruhig); font-size: 14px; font-weight: 600; }

/* Fluent Forms in die Gestaltung einpassen. Die Erweiterung liefert
   ordentliche Grundwerte, hier wird nur nachgezogen, was abweicht. */
.fluentform .ff-el-group { margin-bottom: 18px; }
.fluentform .ff-el-input--label label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-text-leise);
}
.fluentform .ff-el-is-error .text-danger,
.fluentform .error_text { color: var(--k-akzent) !important; font-size: 13px; }
.fluentform .ff-el-input--label.ff-el-is-required > label::after { color: var(--k-akzent); }

/* Absendeknopf wie die uebrigen Knoepfe der Seite: fast schwarze Schrift
   auf Rot, Grossbuchstaben, rechtwinklig. Fluent Forms setzt von sich aus
   weisse Schrift. */
.fluentform .ff-btn-submit {
  background: var(--k-akzent) !important;
  color: var(--k-grund) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 13px 26px !important;
}
.fluentform .ff-btn-submit:hover {
  background: var(--k-text) !important;
  color: var(--k-grund) !important;
}

/* Haken und Auswahlknoepfe im Akzentrot */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] { accent-color: var(--k-akzent); }
.fluentform .ff-el-form-check-label,
.fluentform .ff_item_selected {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--k-text-ruhig);
}
.fluentform .ff-el-form-check-label a { color: var(--k-akzent-link); }
.fluentform .ff-message-success {
  background: var(--k-flaeche);
  border-left: 4px solid var(--k-akzent);
  padding: 16px 20px;
  color: var(--k-text);
}

/* ============================================================
   16. Eingebundene Fremdinhalte (Embed Privacy)
   ============================================================ */
/* Embed Privacy ersetzt jedes YouTube-Fenster durch einen Platzhalter, das
   Video wird erst nach einem Klick geladen. Der Platzhalter kommt von der
   Erweiterung recht wuchtig daher: gut 300 Bildpunkte hoch und mit viel
   Text. Auf der Kata-Seite stehen 79 davon. Deshalb hier auf das Mass eines
   Videofensters gebracht (16 zu 9) und der Text verkleinert. */
.embed-privacy-container {
  position: relative;
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie);
  color: var(--k-text-ruhig) !important;
}
.k-video .embed-privacy-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.k-video .embed-privacy-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: transparent !important;
  border: 0;
  cursor: pointer;
}
.k-video .embed-privacy-overlay:hover { background: var(--k-flaeche-hoch) !important; }
.k-video .embed-privacy-inner { text-align: center; max-width: 320px; }

/* Rotes Dreieck als Abspielzeichen */
.k-video .embed-privacy-inner::before {
  content: "";
  display: block;
  width: 0; height: 0;
  margin: 0 auto 12px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--k-akzent);
}
.k-video .embed-privacy-inner p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--k-text-ruhig);
}
.k-video .embed-privacy-input-wrapper,
.k-video .embed-privacy-input-wrapper label {
  font-size: 11px;
  color: var(--k-text-leise);
  line-height: 1.4;
}
/* Der Verweis "direkt oeffnen" stand neben dem Text und lief ihm ins
   Wort. Als eigene Zeile darunter ist er lesbar. */
.k-video .embed-privacy-inner a {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--k-akzent-link) !important;
}
.k-video .embed-privacy-inner > * { display: block; }
.k-video .embed-privacy-container iframe { position: absolute; inset: 0; }

.embed-privacy-overlay { background: var(--k-flaeche) !important; }
.embed-privacy-enable {
  background: var(--k-akzent) !important;
  color: var(--k-grund) !important;
  border: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
/* Die Schaltflaeche, die die Erweiterung nur fuer Vorleseprogramme
   ausgibt, darf nicht ploetzlich rot im Bild stehen. */
.embed-privacy-enable.screen-reader-text,
.embed-privacy-sr-message.screen-reader-text {
  background: transparent !important;
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wp-block-embed iframe, .k-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--k-linie);
}

/* Videoraster fuer die Kata-Sammlungen */
.k-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.k-videos figure { margin: 0; }
.k-videos figcaption {
  margin-top: 8px;
  font-family: var(--k-schrift-titel);
  font-size: 17px;
  text-transform: uppercase;
  color: var(--k-text);
}

/* ============================================================
   17. Termine (The Events Calendar)
   ============================================================ */
.tribe-common, .tribe-events, .tribe-common--breakpoint-medium.tribe-events {
  background: transparent !important;
  color: var(--k-text) !important;
  --tec-color-background-events: transparent;
}
.tribe-common p, .tribe-common a, .tribe-common span, .tribe-common time,
.tribe-common h1, .tribe-common h2, .tribe-common h3 {
  color: var(--k-text) !important;
}
.tribe-events-calendar-list__event-row,
.tribe-events-calendar-list__event-wrapper {
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
  padding: 16px;
  margin-bottom: 12px;
}
.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-list__event-date-tag-month {
  color: var(--k-akzent) !important;
}
.tribe-events-calendar-list__event-title-link { text-decoration: none !important; }
.tribe-events-calendar-list__event-title-link:hover { color: var(--k-akzent) !important; }
.tribe-events .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-nav__next, .tribe-events .tribe-events-c-nav__prev {
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie) !important;
  color: var(--k-text) !important;
}

/* ============================================================
   18. Breite und Abstaende
   ============================================================ */
.ast-container, .site-content .ast-container {
  max-width: var(--k-breite);
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content { max-width: 100%; }
/* Fliesstext nicht ueber die volle Breite laufen lassen, das liest sich schlecht */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote { max-width: 78ch; }

/* ============================================================
   19. Kleine Bildschirme
   ============================================================ */
@media (max-width: 782px) {

  /* --- Kopfbereich straffen ---
     Auf einem Telefon war der Kopfbereich der Startseite 777 Bildpunkte
     hoch, also mehr als ein ganzer Bildschirm, bevor der erste Inhalt kam.
     Kleineres Logo, engere Abstaende. */
  .k-hero { padding: 22px 0 22px; }
  .k-hero .k-figur {
    float: none;
    display: block;
    height: 200px;
    max-width: 100%;
    margin: 0 auto 10px;
  }
  .k-hero h1 { font-size: clamp(32px, 9vw, 46px); }
  .k-hero .k-vorsatz { font-size: 16px; margin-bottom: 18px; }
  .k-signet { margin-bottom: 14px; }

  /* --- Knoepfe ueber die ganze Breite ---
     Gestapelt hatten sie unterschiedliche Breiten (211 und 194
     Bildpunkte), das sah nach Zufall aus. Volle Breite ist ruhiger und
     gibt eine groessere Flaeche zum Antippen. */
  /* Getrennte Regeln, nicht eine Selektorliste.
     Kennt ein Browser :has() nicht, gilt eine ganze Selektorliste als
     ungueltig und auch der erste, harmlose Selektor verliert seine
     Wirkung. Getrennt faellt nur die zweite Regel aus. */
  .k-hero .k-tasten { display: block; }
  .entry-content p:has(> .k-knopf) { display: block; }
  .k-knopf, .entry-content a.k-knopf {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 10px;
    padding: 15px 20px;
  }

  .k-karten, .k-karten-2, .k-karten-4 { grid-template-columns: 1fr; }
  h2 { margin-top: 34px; }

  /* Logos kleiner, damit zwei nebeneinander passen */
  .k-logos { gap: 12px; }
  .k-logos img { height: 62px; }

  /* --- Tabellen mit drei und mehr Spalten zu Karten stapeln ---
     Die Trainingszeiten haben fuenf Spalten und waren 682 Bildpunkte
     breit in einem 335 Bildpunkte schmalen Fenster: zwei Spalten
     unsichtbar, die Zeilen durch den verborgenen Umbruch absurd hoch.
     Jede Zelle traegt ihre Spaltenbeschriftung als data-spalte mit,
     siehe tabelle() in bausteine.py. */
  .k-tabelle-breit table,
  .k-tabelle-breit tbody,
  .k-tabelle-breit tr,
  .k-tabelle-breit td { display: block; width: 100%; }
  /* Der Tabellenkopf wird nur AUSSER SICHT gebracht, nicht mit
     display: none entfernt.
     display: none nimmt ihn auch aus dem Barrierefreiheitsbaum. Ein
     Vorleseprogramm las die Trainingszeiten dann ohne jede
     Spaltenbezeichnung, waehrend es auf dem Rechner mit sichtbarem Kopf
     funktionierte. So bleibt er lesbar fuer Vorleseprogramme und
     unsichtbar fuer das Auge. Die Zuordnung der Zellen zu den Spalten
     tragen die Rollen im Markup, siehe tabelle() in bausteine.py. */
  .k-tabelle-breit thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .k-tabelle-breit table { margin: 18px 0; }
  .k-tabelle-breit tr {
    border: 1px solid var(--k-linie);
    background: var(--k-flaeche);
    margin-bottom: 12px;
  }
  .k-tabelle-breit td {
    border: 0;
    border-bottom: 1px solid var(--k-linie);
    padding: 10px 14px;
    display: flex;
    gap: 12px;
    align-items: baseline;
  }
  .k-tabelle-breit tr td:last-child { border-bottom: 0; }
  .k-tabelle-breit td::before {
    content: attr(data-spalte);
    flex: 0 0 34%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--k-text-leise);
    line-height: 1.7;
  }
  .k-tabelle-breit td:empty { display: none; }
  .entry-content .k-tabelle-breit tr:hover td { background: transparent; }

  /* Zwei Spalten passen auch schmal, die bleiben eine Tabelle. Sie
     bekommen nur einen Notausgang, falls der Inhalt doch zu breit wird. */
  .wp-block-table:not(.k-tabelle-breit) { overflow-x: auto; }

  /* --- Bedienelemente gross genug zum Antippen ---
     Das Namensfeld war 40 Bildpunkte hoch, das Haekchen 13 auf 13. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="date"], select {
    min-height: 46px;
    /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
    font-size: 16px !important;
  }
  textarea { font-size: 16px !important; }
  .fluentform input[type="checkbox"],
  .fluentform input[type="radio"] { width: 20px; height: 20px; }
  .fluentform .ff-el-form-check-label { line-height: 1.5; }
  .fluentform .ff-btn-submit { width: 100%; }

  /* Fragen und Sammlungen: mehr Flaeche zum Antippen */
  .k-frage > summary { padding: 17px 44px 17px 16px; }
  .k-sammlung > summary { padding: 16px 46px 16px 16px; }
  .k-sammlung-inhalt { padding: 4px 14px 16px; }

  /* Breite Bilder laufen auf dem Telefon absichtlich bis an den Rand.
     Astra setzt dafuer einen negativen Rand von 20 Bildpunkten. Das ist
     hier gewollt: auf einem schmalen Bildschirm nutzt ein randloses Bild
     den Platz besser, waehrend der Text seinen Abstand behaelt. Nicht
     "richten", es ist keine Panne. Die Bildunterschrift bekommt den
     Abstand zurueck, damit sie zum Text passt. */
  .entry-content .alignwide img { width: 100%; height: auto; }
  .entry-content .alignwide figcaption { padding: 0 20px; }

  /* Trainerkacheln: Beitext etwas enger, die Seite ist mit vierzehn
     Personen ohnehin lang. */
  .k-trainer { gap: 14px; }
  .k-trainer figcaption { padding: 12px 14px 14px; }
  .k-trainer .k-name { font-size: 19px; }

  blockquote { padding: 15px 16px; font-size: 17px; }
  .k-hinweis { padding: 14px 16px; }
}

/* Sehr schmale Geraete, etwa ein iPhone SE der ersten Fassung mit 320
   Bildpunkten. Die Grenze liegt bewusst bei 340 und nicht bei 380: bei 375
   Bildpunkten, dem Mass der meisten Telefone, stand die Beschriftung sonst
   ueber dem Wert, und jede Tabellenzeile wurde 347 Bildpunkte hoch. Neben
   dem Wert bleibt es bei etwa 200. */
@media (max-width: 340px) {
  .k-tabelle-breit td { display: block; }
  .k-tabelle-breit td::before { display: block; margin-bottom: 2px; }
  .k-logos img { height: 54px; }
  .k-hero .k-figur { height: 170px; }
}

/* ============================================================
   20. Bildergalerien in den Berichten
   ============================================================
   Die alten Berichte kamen mit Kadence-Karussells. Beim Umzug werden sie
   in dieses Raster uebersetzt (siehe bau_berichte.py, kadence_umbauen).
   Kein Skript, keine fremde Erweiterung, nur Grid.
   ============================================================ */
.k-galerie {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}
.k-galerie-2 { grid-template-columns: repeat(2, 1fr); }
.k-galerie-3 { grid-template-columns: repeat(3, 1fr); }

.k-galerie figure {
  margin: 0;
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
  overflow: hidden;
}
.k-galerie figure a {
  display: block;
  line-height: 0;
  border: 0;
  text-decoration: none;
}
.k-galerie img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Einheitlicher Zuschnitt nur im Raster, also erst ab zwei Spalten.
   Die Angabe steht bewusst in einer Medienabfrage und nicht im Grundsatz:
   siehe die Erklaerung am Ende dieses Abschnitts. */
@media (min-width: 561px) {
  .k-galerie img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}
.k-galerie figure a:hover img,
.k-galerie figure a:focus-visible img {
  transform: scale(1.03);
  opacity: 0.88;
}
/* Der Fokusrahmen gehoert um die Kachel, nicht um das Bild darin. */
.k-galerie figure a:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: -2px;
}
.k-galerie figcaption {
  padding: 10px 12px 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--k-text-leise);
}

/* Eine einzelne Aufnahme wird nicht ins Raster gezwungen, sie behaelt
   ihr eigenes Seitenverhaeltnis. */
.k-galerie-einzel {
  margin: 30px 0;
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
}
.k-galerie-einzel img {
  display: block;
  width: 100%;
  height: auto;
}
.k-galerie-einzel figcaption {
  padding: 10px 14px 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--k-text-leise);
}

hr.k-trenner {
  height: 1px;
  margin: 34px auto;
  border: 0;
  background: var(--k-linie-hell);
  width: 70%;
}

/* Zwei Spalten ab dem Tablet, eine auf dem Telefon. Drei Spalten auf
   335 Punkten Breite ergeben Briefmarken. */
@media (max-width: 880px) {
  .k-galerie-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .k-galerie-2, .k-galerie-3 { grid-template-columns: 1fr; }
  .k-galerie { gap: 12px; margin: 24px 0; }

  /* Umfangreiche Galerien bleiben zweispaltig, sonst wird der Bericht
     zum Endlosband. Dort dann wieder der einheitliche Zuschnitt, damit
     das Raster ruhig bleibt. Das ganze Bild ist einen Fingertipp weit
     entfernt, jede Kachel verweist auf die Bilddatei. */
  .k-galerie-viele { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .k-galerie-viele img { aspect-ratio: 3 / 2; object-fit: cover; }
}

/* Warum hier kein "aspect-ratio: auto" steht:
   Der Browser leitet aus width und height am img-Tag selbst ein Verhaeltnis
   ab und legt es als "auto 1024 / 683" an. Eine eigene Angabe "auto"
   ueberschreibt das und nimmt das Verhaeltnis damit ganz weg. Das Bild hatte
   danach 1500 Bildpunkte Hoehe, ein Bericht mit 19 Bildern wurde 32000
   Bildpunkte lang. Ein Wert wird deshalb nur dort gesetzt, wo er gebraucht
   wird, und nirgends zurueckgenommen. */

/* ============================================================
   21. Tastaturbedienung, Bewegungsarmut, Druck
   ============================================================ */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .k-hero .k-figur { display: none; }
  h1, h2, h3 { color: #000; }
  .k-karte, .entry-content td, .k-galerie figure,
  .k-galerie-einzel { background: #fff; border-color: #999; }
}