/* WTEO Schulen – Grundstil.
   Farben über Variablen, damit du sie in Elementor (Website-Einstellungen → Eigenes CSS) anpassen kannst:
   :root{ --wteo-akzent:#C8323A; --wteo-linie:rgba(0,0,0,.12); } */

.wteo-schule,
.wteo-liste{
  --wteo-akzent: var(--e-global-color-accent, #C8323A);
  --wteo-text-leise: color-mix(in srgb, currentColor 65%, transparent);
  --wteo-linie: color-mix(in srgb, currentColor 14%, transparent);
  --wteo-flaeche: color-mix(in srgb, currentColor 4%, transparent);
  margin: 2rem 0;
}
.wteo-schule *, .wteo-schule *::before, .wteo-schule *::after,
.wteo-liste *, .wteo-liste *::before, .wteo-liste *::after{ box-sizing: border-box; }

/* ── Raster: Zeiten + Kontakt ── */
.wteo-schule__raster{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem;
}
@media (max-width: 860px){
  .wteo-schule__raster{ grid-template-columns: minmax(0, 1fr); }
}

.wteo-box{
  border: 1px solid var(--wteo-linie);
  background: var(--wteo-flaeche);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.wteo-box__titel{
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* ── Trainingszeiten ── */
.wteo-zeiten{ width: 100%; border-collapse: collapse; font-size: 1rem; margin: 0; border: 0; }
.wteo-zeiten tr, .wteo-zeiten tr:nth-child(odd), .wteo-zeiten tr:nth-child(even),
.wteo-zeiten td, .wteo-zeiten th{ background: transparent !important; border-left: 0; border-right: 0; border-top: 0; }
.wteo-zeiten tr:hover > td{ background: transparent !important; }
.wteo-zeiten th{
  text-align: left; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wteo-text-leise); font-weight: 600; padding: 0 .75rem .6rem 0;
  border-bottom: 1px solid var(--wteo-linie);
}
.wteo-zeiten td{ padding: .8rem .75rem .8rem 0; border-bottom: 1px solid var(--wteo-linie); vertical-align: top; }
.wteo-zeiten td:first-child{ font-weight: 600; }
.wteo-zeiten td:last-child{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.wteo-hinweis{ margin: 1rem 0 0; font-size: .95rem; color: var(--wteo-text-leise); }

/* Auf dem Handy: jede Zeile als kleine Karte */
@media (max-width: 560px){
  .wteo-zeiten thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wteo-zeiten tr{ display: block; padding: .8rem 0; border-bottom: 1px solid var(--wteo-linie); }
  .wteo-zeiten td{ display: block; padding: .1rem 0; border: 0; white-space: normal !important; }
  .wteo-zeiten td:first-child{ margin-bottom: .2rem; }
}

/* ── Kontakt ── */
.wteo-kontakt{ list-style: none; margin: 0 0 1.5rem; padding: 0; }
.wteo-kontakt li{
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--wteo-linie);
  overflow-wrap: anywhere;
}
.wteo-kontakt li:first-child{ padding-top: 0; }
.wteo-kontakt__k{ font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wteo-text-leise); padding-top: .2rem; }
.wteo-kontakt a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* ── Buttons ── */
.wteo-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.4rem;
  background: var(--wteo-akzent); color: #fff !important; border: 1px solid var(--wteo-akzent);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem;
  text-decoration: none !important; cursor: pointer; transition: filter .2s ease;
  text-align: center; max-width: 100%;
}
.wteo-btn:hover{ filter: brightness(1.1); }
.wteo-btn--ghost{ background: transparent; color: inherit !important; border-color: var(--wteo-linie); }
.wteo-btn:focus-visible,
.wteo-karte-item__link:focus-visible,
.wteo-suche input:focus-visible{ outline: 2px solid var(--wteo-akzent); outline-offset: 3px; }
.wteo-box--kontakt .wteo-btn{ width: 100%; }

/* ── Karte (Zwei-Klick) ── */
.wteo-karte{
  margin-top: 1.5rem; position: relative; aspect-ratio: 16 / 7; min-height: 280px;
  border: 1px solid var(--wteo-linie); background: var(--wteo-flaeche); overflow: hidden;
}
.wteo-karte__platz{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; text-align: center;
}
.wteo-karte__platz p{ max-width: 42ch; margin: 0; font-size: .95rem; color: var(--wteo-text-leise); }
.wteo-karte iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px){ .wteo-karte{ aspect-ratio: 1 / 1; } }
.wteo-route{ margin: .75rem 0 0; }
.wteo-route a{ color: inherit; font-weight: 600; }

/* ── Schulliste ── */
.wteo-suche{ margin-bottom: 1.5rem; }
.wteo-suche label{ display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wteo-text-leise); margin-bottom: .4rem; }
.wteo-suche input{
  width: 100%; max-width: 480px; min-height: 48px; padding: .7rem 1rem; font-size: 1.05rem;
  border: 1px solid var(--wteo-linie); background: transparent; color: inherit;
}
.wteo-suche__status{ margin: .5rem 0 0; font-size: .9rem; color: var(--wteo-text-leise); min-height: 1.2em; }

.wteo-liste__raster{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem;
}
.wteo-karte-item[hidden]{ display: none; }
.wteo-karte-item__link{
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  padding: 1.25rem; border: 1px solid var(--wteo-linie); background: var(--wteo-flaeche);
  color: inherit !important; text-decoration: none !important; transition: border-color .2s ease;
}
.wteo-karte-item__link:hover{ border-color: var(--wteo-akzent); }
.wteo-karte-item__ort{ font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wteo-akzent); font-weight: 600; }
.wteo-karte-item__name{ font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.wteo-karte-item__adr,
.wteo-karte-item__tel{ font-size: .95rem; color: var(--wteo-text-leise); }
.wteo-karte-item__mehr{ margin-top: auto; padding-top: .75rem; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce){
  .wteo-btn, .wteo-karte-item__link{ transition: none; }
}