/*
Theme Name: Karate TVV
Theme URI: https://karate-tvv.duckdns.org
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;
}

/* ============================================================
   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; }

::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.
   ============================================================ */
.k-knopf,
.wp-block-button__link,
.ast-button,
button, input[type="submit"] {
  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 */
.k-knopf-leer {
  background: transparent;
  color: var(--k-text);
  border: 1px solid var(--k-linie-hell);
}
.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); }

/* Zeitspalte hervorheben */
.k-zeiten td:first-child {
  font-family: var(--k-schrift-titel);
  font-size: 19px;
  color: var(--k-akzent);
  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; }

/* ============================================================
   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;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 26px 0;
}
.k-trainer figure {
  margin: 0;
  background: var(--k-flaeche);
  border: 1px solid var(--k-linie);
}
.k-trainer img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  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;
}

.site-title, .site-title a {
  font-family: var(--k-schrift-titel);
  text-transform: uppercase;
  color: var(--k-text) !important;
  letter-spacing: 0.02em;
}
.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 */
.main-header-menu > .menu-item > .menu-link { position: relative; }
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
.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;
}

/* Menue auf dem Mobilgeraet */
.ast-mobile-menu-trigger-fill, .ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-buttons-minimal {
  background: transparent !important;
  color: var(--k-text) !important;
  border: 1px solid var(--k-linie-hell);
}
.ast-header-break-point .main-header-bar-navigation,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background: var(--k-grund) !important;
}
.ast-header-break-point .main-header-menu .menu-link {
  border-bottom: 1px solid var(--k-linie);
}

/* 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; }

/* ============================================================
   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;
}

/* 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; }

/* ============================================================
   16. Eingebundene Fremdinhalte (Embed Privacy)
   ============================================================ */
.embed-privacy-container, .embed-privacy-overlay {
  background: var(--k-flaeche) !important;
  border: 1px solid var(--k-linie);
  color: var(--k-text-ruhig) !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;
}
.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) {
  .k-hero { padding-top: 30px; }
  .k-hero .k-figur {
    float: none;
    display: block;
    height: 260px;
    max-width: 100%;
    margin: 0 auto 14px;
  }
  .k-karten, .k-karten-2, .k-karten-4 { grid-template-columns: 1fr; }
  h2 { margin-top: 34px; }
  .entry-content table, .wp-block-table { display: block; overflow-x: auto; }
}

/* ============================================================
   20. 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 { background: #fff; border-color: #999; }
}