/*
Theme Name: LTU Graz
Theme URI: https://ltu-graz.at
Author: LTU Graz
Author URI: https://ltu-graz.at
Description: Custom Theme für den Leichtathletikverein LTU Graz. Modernes, responsives Design mit Custom Post Types für Personen, Trainings und Partner. Alle Inhalte sind im WordPress-Backend bearbeitbar.
Version: 2.1.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ltu-graz
Tags: sports, club, custom-menu, featured-images, threaded-comments, translation-ready, block-styles
*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================
   TOKENS
========================= */
:root{
  --primary-color:#0F172A;
  --secondary-color:#F9FAFB;

  --text-primary:#F9FAFB;
  --text-secondary:#DCDDDE;

  --accent-color:#F36F21;

  /* Layout */
  --content-width:900px;
  --wide-width:1280px;
  --narrow-width:760px;
  --side-pad:2rem;

  /* Typography scale */
  --font-base:18px;
  --font-small:16px;
  --font-button:16px;

  --radius-sm:4px;
  --radius-md:12px;
  --radius-lg:16px;

  --shadow-sm:0 4px 12px rgba(0,0,0,.2);
  --shadow-md:0 8px 18px rgba(0,0,0,.28);

  /* Partner logo sizing (default cards) */
  --partner-logo-wrap-h:140px;
  --partner-logo-max-h:92px;

  /* TEAM: fixed person card size */
  --person-card-w: 300px;
  --person-card-h: 280px;

  /* TRAINING: card height */
  --training-card-h: 300px;

  /* TRAINING: dark card token */
  --training-card-bg: var(--primary-color);
  --training-card-text: var(--secondary-color);
  --training-card-muted: var(--text-secondary);
  --training-pill-bg: rgba(255,255,255,0.06);
  --training-pill-border: rgba(255,255,255,0.10);
}

/* =========================
   BASE / GLOBAL
========================= */
*{ box-sizing:border-box; }

html{ font-size:var(--font-base); }

body{
  margin:0;
  font-family:'Inter', Helvetica, Arial, sans-serif;
  background:var(--primary-color);
  color:var(--text-secondary);
  line-height:1.65;
  padding-top:110px; /* fixed header offset */
}

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

/* =========================
   TYPOGRAPHY
========================= */
h1{
  font-weight:800;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--text-primary);
  font-size:clamp(36px,4.5vw,64px);
  margin:0 0 1rem;
}

h2,h3,h4,h5,h6{
  font-weight:800;
  line-height:1.2;
  color:var(--text-primary);
  margin:0 0 .75rem;
}

p,li{
  font-size:1rem;
  line-height:1.65;
  color:var(--text-secondary);
}

small,.text-small{ font-size:0.888rem; }

/* =========================
   LINKS
========================= */
a{
  color:var(--text-secondary);
  text-decoration:none;
}

a:hover,
a:focus{
  text-decoration:underline;
  text-decoration-color:var(--accent-color);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}

/* =========================
   BUTTONS
========================= */
.button,
button,
input[type="submit"],
input[type="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-color);
  color:var(--primary-color);
  font-family:inherit;
  font-size:var(--font-button);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.2;
  min-height:52px;
  padding:14px 26px;
  border-radius:var(--radius-sm);
  border:2px solid var(--accent-color);
  cursor:pointer;
  text-decoration:none;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .15s ease,
    filter .2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background:transparent;
  color:var(--accent-color);
  border-color:var(--accent-color);
  transform:translateY(-1px);
  text-decoration:none;
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible{
  outline:2px solid var(--accent-color);
  outline-offset:3px;
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.2);
}

/* =========================
   LAYOUT HELPERS
========================= */
.container{
  max-width:var(--content-width);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

.container--wide{ max-width:var(--wide-width); }
.container--narrow{ max-width:var(--narrow-width); }

/* aliases (falls du in HTML "container wide/narrow" nutzt) */
.container.wide{ max-width:var(--wide-width); }
.container.narrow{ max-width:var(--narrow-width); }

/* =========================
   HEADER / NAVIGATION
========================= */
header{
  background:var(--primary-color);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  width:100%;
  border-bottom:none;
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease;
  will-change:transform;
}

/* WordPress Admin-Bar Offset (wenn eingeloggt) */
body.admin-bar header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar header{ top:46px; }
}

header.header--hidden{ transform:translateY(-110%); }
header.header--scrolled{ box-shadow:0 10px 26px rgba(0,0,0,.28); }

.navbar{
  max-width:var(--wide-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem var(--side-pad);
}

/* Logo */
.navbar .logo{ display:flex; align-items:center; }

.navbar .logo a{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
}

.navbar .logo img{ height:72px; width:auto; }

/* optional: show text if you add it */
.navbar .logo span{
  font-size:1.5rem;
  font-weight:800;
  color:var(--secondary-color);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Mobile toggle (hamburger) */
.menu-toggle{ display:none; }

.hamburger{
  display:none; /* shown via media query */
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  color:var(--secondary-color);
}

.hamburger svg{ width:22px; height:22px; }

/* Nav list */
.navbar nav ul,
.nav-links{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  gap:1.5rem;
}

.navbar nav ul li{ margin:0; }

.navbar nav ul li a{
  color:var(--text-secondary);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:0.95rem;
  padding:10px 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  text-decoration:none;
}

.navbar nav ul li a:hover,
.navbar nav ul li a:focus{ text-decoration:none; }

.navbar nav ul li a:hover,
.navbar nav ul li a.active{
  color:var(--accent-color);
  border-bottom-color:var(--accent-color);
}

/* Instagram Icon */
.navbar nav ul li.nav-instagram{ margin-left:.5rem; }

.navbar nav ul li.nav-instagram a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
  border-bottom:2px solid transparent;
  color:var(--text-secondary);
}

.navbar nav ul li.nav-instagram a:hover,
.navbar nav ul li.nav-instagram a:focus{
  color:var(--accent-color);
  border-bottom-color:transparent;
}

.navbar nav ul li.nav-instagram{
  padding-left:1.25rem;
  border-left:1px solid rgba(255,255,255,0.10);
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  width:100%;
  height:60vh;
  min-height:420px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--secondary-color);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(15,23,42,.78), rgba(15,23,42,.78));
}

.hero .hero-content{
  position:relative;
  z-index:1;
  max-width:1000px;
  padding:0 1rem;
}

.hero p{ font-size:1.125rem; margin:0 0 1.5rem; }

.hero::after{
  content:"";
  position:absolute;
  bottom:-1px;
  right:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 80px 80vw;
  border-color:transparent transparent var(--accent-color) transparent;
}

/* =========================
   SECTIONS
========================= */
.section{ padding:4rem 2rem; position:relative; }

.section > :where(h2,h3,p,ul,ol){
  max-width:var(--content-width);
  margin-left:auto;
  margin-right:auto;
}

.section > p{ margin:0 auto 1.25rem; }

.section > ul,
.section > ol{
  padding-left:1.25rem;
  margin:0 auto 1.25rem;
}

.section.alt{
  background:var(--secondary-color);
  color:var(--primary-color);
}

.section h2{
  font-size:clamp(28px,3vw,36px);
  font-weight:800;
  text-transform:uppercase;
  color:var(--accent-color);
  margin-bottom:1rem;
}

.section h2::after{
  content:"";
  display:inline-block;
  width:34px;
  height:22px;
  margin-left:.55rem;
  transform:translateY(3px);
  background:currentColor;
  clip-path:polygon(3.95% 28.26%,96.93% 15.22%,60.53% 90.22%);
}

.section.alt h2{ color:var(--primary-color); }

/* =========================
   CARDS (base)
========================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
  max-width:var(--wide-width);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

.card{
  background:var(--primary-color);
  border-radius:var(--radius-md);
  overflow:hidden;
  color:var(--secondary-color);
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.card img{ width:100%; height:180px; object-fit:cover; }

.card-content{ padding:1.25rem; flex-grow:1; }

.card h3{
  font-size:1.125rem;
  font-weight:700;
  margin:0 0 .5rem;
  text-transform:uppercase;
  color:var(--secondary-color);
}

.card p{ margin:0; font-size:0.888rem; color:var(--text-secondary); }

.section.alt .card{ background:var(--primary-color); }
.section.alt .card p{ color:var(--text-secondary); }

/* =========================
   PERSON CARDS (Team)
========================= */
.card--person{ text-align:center; padding-top:1.75rem; }

.card--person img,
.card--person img.wp-post-image,
.card--person img.attachment-ltu-person{
  /* ROOT CAUSE FIX: WordPress adds contain-intrinsic-size:3000px 1500px (2:1 ratio) to images
     with sizes="auto,..." Chrome uses this ratio for lazy-loaded images → 120×60px oval.
     Override to 120×120 forces Chrome to compute a 1:1 aspect ratio → correct circle. */
  contain-intrinsic-size: 120px 120px !important;
  flex:0 0 auto !important;           /* prevent flex-shrink in column layout */
  width:120px !important;
  height:120px !important;
  max-width:120px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50% !important;
  margin:0 auto 1rem !important;
}

.card--person .card-content{
  padding:0 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  height:100%;
}

.section--trainers .card.card--person,
.section--board .card.card--person{
  width:var(--person-card-w);
  height:var(--person-card-h);
}

.section--trainers .card--person h3,
.section--board .card--person h3{
  margin:0;
  font-size:0.95rem;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
}

.accent-line{
  width:44px;
  height:3px;
  background:var(--accent-color);
  margin:.75rem auto .9rem;
}

.card--person .meta,
.card--person .role{
  margin:0;
  font-size:0.9rem;
  color:var(--text-secondary);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  line-height:1.35;
}

.card--person .meta + .meta,
.card--person .meta + .role,
.card--person .role + .meta{ margin-top:.25rem; }

.section--trainers .card--person .card-content > :last-child,
.section--board .card--person .card-content > :last-child{ margin-top:auto; }

/* =========================
   TEAM PAGE (layout)
   Flex statt Grid → letzte Reihe wird automatisch zentriert.
   Card-Breite ist überall identisch (var(--person-card-w)).
========================= */

/* TRAINER:INNEN — max. 5 pro Reihe, letzte Reihe zentriert */
.section--trainers .cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  max-width:calc((var(--person-card-w) * 5) + (1.5rem * 4) + (var(--side-pad) * 2));
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* VORSTAND — Wrapper mit max. Breite für 4 Cards (Reihe 1 und 2 gleich breit) */
.section--board .board-rows{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-width:calc((var(--person-card-w) * 4) + (1.5rem * 3) + (var(--side-pad) * 2));
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* VORSTAND-Reihen — gleiche Anordnungs-Logik, beide zentriert */
.section--board .cards.board-row--top,
.section--board .cards.board-row--bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  margin:0;
  padding:0;
  max-width:none;
}

/* Cards in beiden Sektionen identisch groß */
.section--trainers .card.card--person,
.section--board .card.card--person{
  flex:0 0 var(--person-card-w);
  width:var(--person-card-w);
  height:var(--person-card-h);
}

/* =========================
   NEWS  (UPDATED: fixes oversized images)
========================= */
.news-posts{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  max-width:var(--wide-width);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* Support, falls du (wie aktuell) .news-post direkt ohne Wrapper nutzt */
.section.alt .news-post{
  max-width:var(--wide-width);
  margin:0 auto 1.5rem;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

.news-post{
  background:var(--primary-color);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  display:flex;
  gap:2rem;
  align-items:stretch;
}

/* FIX: Bildgröße begrenzen */
.news-post img{
  width:320px;
  height:220px;
  object-fit:cover;
  flex-shrink:0;
}

.news-post-content{
  padding:1.25rem 1.25rem 1.25rem 0;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.news-post-content .news-date{
  display:block;
  color:var(--accent-color);
  font-weight:700;
  font-size:0.9rem;
  margin:0 0 .5rem;
}

.news-post-content h3{
  color:var(--secondary-color);
  font-size:1.25rem;
  margin:0 0 .5rem;
  text-transform:uppercase;
}

.news-post-content p{
  font-size:0.95rem;
  color:var(--text-secondary);
  margin:0 0 1rem;
}

.news-post-content a{
  margin-top:auto;
  font-weight:800;
  color:var(--accent-color);
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none;
}

.news-post-content a:hover{ text-decoration:none; filter:brightness(1.05); }

/* Mobile: Bild oben, Content unten */
@media (max-width:768px){
  .news-post{
    flex-direction:column;
    gap:0;
  }
  .news-post img{
    width:100%;
    height:220px;
  }
  .news-post-content{
    padding:1rem;
  }
}

/* =========================
   PARTNERS
========================= */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.5rem;
  max-width:var(--content-width);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

.partner-card{
  background:var(--secondary-color);
  border-radius:var(--radius-md);
  padding:1.25rem 1.25rem 1.1rem;
  text-align:center;
  color:var(--primary-color);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}

.partner-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.partner-logo{
  height:var(--partner-logo-wrap-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 18px;
  margin:0 auto 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}

.partner-logo img{
  max-height:var(--partner-logo-max-h);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  /* AUSKOMMENTIERT: Grayscale-Effekt zum Testen deaktiviert */
  /* filter:grayscale(100%) contrast(1.05); */
  /* opacity:.92; */
  transition:filter .22s ease, opacity .22s ease, transform .22s ease;
}

.partner-card:hover .partner-logo img{
  /* AUSKOMMENTIERT: Hover-Reset zum Testen deaktiviert */
  /* filter:none; */
  /* opacity:1; */
  transform:scale(1.02);
}

.partner-card h3{
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
  margin:10px 0 6px;
  color:var(--primary-color);
}

.partner-card p{
  font-size:0.888rem;
  margin:0 0 1rem;
  color:var(--primary-color);
}

.partner-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:var(--radius-sm);
  border:2px solid var(--accent-color);
  background:var(--accent-color);
  color:var(--primary-color);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:0.9rem;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
  text-decoration:none;
}

.partner-card a:hover{
  background:transparent;
  color:var(--accent-color);
  transform:translateY(-1px);
}

.section.alt .partner-card{ background:#fff; }

/* =========================
   HAUPTSPONSOR
========================= */
.partners-grid--main{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  max-width:var(--content-width);
}

.partner-card--main .partner-logo{
  height:calc(var(--partner-logo-wrap-h) * 2);
  padding:22px 22px;
}

.partner-card--main .partner-logo img{
  max-height:calc(var(--partner-logo-max-h) * 2);
}

.partner-card--main h3{ margin-top:14px; }

/* =========================
   CONTACT
========================= */
.contact-info{ text-align:center; margin-bottom:2rem; }

.form-wrapper{
  max-width:640px;
  margin:0 auto;
  background:var(--primary-color);
  padding:2rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.form-wrapper form{ display:grid; gap:1rem; }

.form-wrapper label{
  display:block;
  font-size:0.888rem;
  margin-bottom:.25rem;
  color:var(--secondary-color);
}

.form-wrapper input,
.form-wrapper textarea{
  width:100%;
  padding:.85rem;
  border:1px solid var(--accent-color);
  border-radius:var(--radius-sm);
  background:var(--primary-color);
  color:var(--secondary-color);
  font-family:inherit;
  font-size:1rem;
}

.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder{ color:var(--text-secondary); }

.form-wrapper textarea{ resize:vertical; min-height:140px; }

/* =========================
   LEGAL PAGES (Impressum, Datenschutz)
========================= */
.page--legal{
  max-width:var(--narrow-width);
  margin-left:auto;
  margin-right:auto;
}

.page--legal h2{
  margin-bottom:1.5rem;
}

.page--legal h3{
  margin-top:2rem;
  margin-bottom:.5rem;
  font-size:1.05rem;
  text-transform:uppercase;
  color:var(--accent-color);
}

.page--legal p,
.page--legal li{
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-secondary);
}

.page--legal ul{
  padding-left:1.25rem;
  margin:0 0 1rem;
}

.page--legal a{
  color:var(--accent-color);
  text-decoration:underline;
  text-decoration-color:var(--accent-color);
  text-underline-offset:.2em;
}

/* =========================
   CARD CTA (Mehr-Link in Cards)
========================= */
.card-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:1rem;
  font-size:0.888rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent-color);
}

.card-cta::after{
  content:"→";
  font-size:1em;
  transition:transform .2s ease;
}

.card--link:hover .card-cta::after{
  transform:translateX(4px);
}

/* =========================
   FOOTER (3-column)
========================= */
.footer{
  background:var(--primary-color);
  color:var(--text-secondary);
  padding:1.5rem var(--side-pad);
}

.footer-bar{
  max-width:var(--wide-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}

.footer-left{ justify-self:start; }
.footer-center{ justify-self:center; }
.footer-right{ justify-self:end; }

.footer-logo{
  height:44px;
  width:auto;
  display:block;
  opacity:.92;
  transition:opacity .2s ease;
}

.footer-left a:hover .footer-logo{ opacity:1; }

.footer-center a{
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:0.9rem;
  text-decoration:none;
}

.footer-center a:hover{ color:var(--accent-color); text-decoration:none; }

.footer-sep{ margin:0 .65rem; opacity:.6; }

.footer-right a{
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color .2s ease;
}

.footer-right a:hover{ color:var(--accent-color); }

.footer-copy{
  max-width:var(--wide-width);
  margin:1rem auto 0;
  text-align:center;
  font-size:0.833rem;
  color:var(--text-secondary);
  opacity:.9;
}

@media (max-width:680px){
  .footer-bar{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .footer-left,
  .footer-center,
  .footer-right{ justify-self:center; }
  .footer-copy{ margin-top:.9rem; }
}

/* =========================
   TRAINING (DARK CARDS on white section)
========================= */
.section--training .training-list{
  max-width:var(--wide-width);
  margin:1.25rem auto 0;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
  display:grid;
  gap:18px;
}

.training-card{
  display:grid;
  grid-template-columns:30% 70%;
  height:var(--training-card-h);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--training-card-bg);
  color:var(--training-card-text);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.training-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.training-media{
  position:relative;
  height:var(--training-card-h);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.training-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(15,23,42,.15), rgba(15,23,42,.55));
  pointer-events:none;
}

.training-content{
  padding:18px 22px 18px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.training-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}

.training-head h3{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  text-transform:uppercase;
  color:var(--accent-color);
  letter-spacing:.03em;
}

.training-ort{
  font-size:0.95rem;
  color:var(--training-card-muted);
  white-space:nowrap;
}

.training-ort strong{
  color:var(--training-card-text);
  font-weight:700;
}

.training-accent{
  display:block;
  width:100%;
  height:3px;
  background:var(--accent-color);
  margin:10px 0 12px;
  border-radius:999px;
}

.training-sub{
  margin:0 0 12px;
  color:var(--training-card-muted);
  font-size:1.02rem;
  font-weight:500;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

.training-times-grid{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.time-pill{
  background:var(--training-pill-bg);
  border:1px solid var(--training-pill-border);
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.time-pill strong{
  color:var(--training-card-text);
  font-weight:800;
  font-size:0.92rem;
  white-space:nowrap;
}

.time-pill span{
  color:var(--training-card-muted);
  font-size:0.92rem;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.time-pill abbr{
  text-decoration:none;
  border-bottom:0;
  cursor:help;
}

.time-pill em{
  font-style:normal;
  opacity:.9;
  white-space:nowrap;
  color:var(--training-card-muted);
}

/* =========================
   TRAINING INFO (REWORK)
========================= */
.section--training-info{ padding-top:3rem; }

.training-info-grid{
  max-width:var(--wide-width);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}

.training-info{
  background:#fff;
  color:var(--primary-color);
  padding:2rem;
  border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
}

.training-info h3{
  margin:0 0 1rem;
  font-size:1.25rem;
  text-transform:uppercase;
  font-weight:800;
  color:var(--primary-color);
}

.training-info p{
  margin:0 0 1rem;
  color:#475569;
  font-size:1rem;
}

.info-highlight{
  font-weight:700;
  color:var(--accent-color);
  margin-bottom:.5rem;
}

.training-info .button{
  align-self:center;
  margin-top:auto;
}

.training-info--accent{ border-top:0; }

/* =========================
   HOME HERO – LOGO FOCUS (FINAL)
========================= */
.hero.hero--logo{
  height:70vh;
  min-height:520px;
}

.hero .hero-content.hero-content--logo{ max-width:1100px; }

.hero-title.hero-title--stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  margin:0 0 1rem;
}

.hero-title__line{ display:block; }

.hero-title__line--plain{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:800;
  letter-spacing:.06em;
}

.hero-fox.hero-fox--big{
  height:clamp(150px, 18vw, 250px);
  width:auto;
  margin-top:.35rem;
  transform:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.hero-claim{
  max-width:760px;
  margin:0 auto 1.5rem;
  font-size:1.125rem;
}

.hero-actions{
  display:flex;
  justify-content:center;
}

/* =========================
   CLICKABLE CARDS
========================= */
.card--link{
  display:flex;
  flex-direction:column;
  text-decoration:none !important;
  color:inherit;
  cursor:pointer;
}

.card--link:hover,
.card--link:focus,
.card--link:active{ text-decoration:none !important; }

.card--link *{ text-decoration:none !important; }

.card--link:focus-visible{
  outline:2px solid var(--accent-color);
  outline-offset:4px;
}

/* Hinweis unter Trainingsliste (lesbar auf weißem Hintergrund) */
.section--training .training-note{
  grid-column: 1 / -1;
  margin: 16px 0 0;
  text-align: center;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.98rem;
  opacity: .9;
}

.section--training .training-note__star{
  color: var(--accent-color);
  font-weight: 800;
  margin-right: .25rem;
}

.section--training .training-note strong{
  color: var(--primary-color);
  font-weight: 800;
}

/* =========================
   RESPONSIVE (SITEWIDE)
========================= */
/* Trainer/Vorstand-Cards: Flex-Wrap übernimmt Responsive automatisch */

@media (max-width:900px){
  .training-card{
    grid-template-columns:1fr;
    height:auto;
  }
  .training-media{ height:220px; }
  .training-head{ flex-direction:column; align-items:flex-start; }
  .training-ort{ white-space:normal; }
  .training-times-grid{ grid-template-columns:1fr; }

  .training-info-grid{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  :root{ --side-pad:1.25rem; }

  body{ padding-top:96px; }
  .navbar{ padding:.85rem var(--side-pad); }
  .navbar .logo img{ height:60px; }

  .hamburger{ display:inline-flex; }

  .navbar nav{ position:relative; }

  .navbar nav ul.nav-links{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    left:auto;
    width:min(340px, calc(100vw - (var(--side-pad) * 2)));
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 12px;
    background:rgba(15,23,42,0.98);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:max-height .28s ease, opacity .2s ease, transform .2s ease;
  }

  .navbar nav ul.nav-links li{
    width:100%;
    padding:0;
    margin:0;
  }

  .navbar nav ul.nav-links li a{
    width:100%;
    padding:12px 6px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:0.95rem;
  }

  .navbar nav ul.nav-links li:last-child a{ border-bottom:none; }

  .navbar nav ul.nav-links li.nav-instagram{
    padding-left:0;
    border-left:none;
    margin-left:0;
  }

  .navbar nav ul.nav-links li.nav-instagram a{
    justify-content:flex-start;
    gap:10px;
  }

  .menu-toggle:checked ~ ul.nav-links{
    max-height:480px;
    opacity:1;
    transform:translateY(0);
  }

  .hero{ min-height:360px; }
  .section{ padding:3rem var(--side-pad); }
  .section h2{ font-size:clamp(24px,5vw,32px); }

  :root{
    --partner-logo-wrap-h:130px;
    --partner-logo-max-h:86px;
  }
  .partner-card--main .partner-logo{
    height:calc(var(--partner-logo-wrap-h) * 1.6);
  }
  .partner-card--main .partner-logo img{
    max-height:calc(var(--partner-logo-max-h) * 1.6);
  }

  .hero.hero--logo{
    height:auto;
    min-height:420px;
    padding:3.25rem 0;
  }
  .hero-claim{ font-size:1.05rem; }
  .hero-fox.hero-fox--big{ height:clamp(110px, 26vw, 160px); }
}

@media (max-width:600px){
  .section--trainers .cards,
  .section--board .cards.board-row--top,
  .section--board .cards.board-row--bottom{
    grid-template-columns:1fr;
  }

  .section--trainers .card.card--person,
  .section--board .card.card--person{
    width:100%;
    height:auto;
  }

  .section--trainers .card--person h3,
  .section--board .card--person h3{
    white-space:normal;
  }

  .cards{ grid-template-columns:1fr; }
}

/* =========================
   NEWS DETAIL PAGE
========================= */
.page--news{
  max-width:var(--narrow-width);
  margin-left:auto;
  margin-right:auto;
}

.page--news .entry-content{
  margin-bottom:2rem;
}

.page--news p > a.button,
.page--news .button{
  display:inline-flex;
  margin:1rem auto 0;
}

.page--news > p:last-child{
  text-align:center;
}

/* =========================
   WPFORMS LITE: VORNAME/NACHNAME NEBENEINANDER + hCAPTCHA & BUTTON NEBENEINANDER
   (Button-Stil wie Theme-Buttons)
========================= */

/* Alle Feld-Container standardmäßig auf volle Breite */
.form-wrapper .wpforms-field-container {
  width: 100%;
  padding: 0;
  margin: 0 0 1rem 0;
}

/* Container für Vorname & Nachname: 50% Breite */
.form-wrapper .wpforms-field-container.wpforms-field-text:first-of-type,
.form-wrapper .wpforms-field-container.wpforms-field-text + .wpforms-field-container.wpforms-field-text {
  display: inline-block;
  width: calc(50% - 0.5rem);
  margin-right: 0.5rem;
}

/* E-Mail & Nachricht: volle Breite */
.form-wrapper .wpforms-field-container.wpforms-field-email,
.form-wrapper .wpforms-field-container.wpforms-field-textarea,
.form-wrapper .wpforms-field-container.wpforms-field-checkbox {
  display: block;
  width: 100%;
}

/* hCaptcha und Submit-Container: Flexbox für nebeneinander */
.form-wrapper .wpforms-field-container.wpforms-field-captcha,
.form-wrapper .wpforms-submit-container {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

/* hCaptcha: 70% Breite */
.form-wrapper .wpforms-field-container.wpforms-field-captcha {
  width: calc(70% - 0.5rem);
  margin-right: 0.5rem;
}

/* Submit-Container: 30% Breite, rechtsbündig */
.form-wrapper .wpforms-submit-container {
  width: 30%;
  text-align: right;
}

/* hCaptcha-Container intern anpassen */
.form-wrapper .h-captcha-box {
  width: 100% !important;
}

/* Inputs & Textarea: Stil anpassen */
.form-wrapper .wpforms-field input[type="text"],
.form-wrapper .wpforms-field input[type="email"],
.form-wrapper .wpforms-field textarea {
  width: 100% !important;
  padding: 0.85rem !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  box-sizing: border-box;
}

/* Placeholder weiß */
.form-wrapper .wpforms-field input::placeholder,
.form-wrapper .wpforms-field textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7;
}

/* Labels ausblenden (außer Checkbox) */
.form-wrapper .wpforms-field-label,
.form-wrapper .wpforms-field-sublabel {
  display: none !important;
}

/* DSGVO-Checkbox: Weißer Text und sichtbare Label */
.form-wrapper .wpforms-field-checkbox .wpforms-field-label,
.form-wrapper .wpforms-field-checkbox label {
  display: block !important;
  color: var(--secondary-color) !important;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* Checkbox-Stil */
.form-wrapper .wpforms-field-checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: var(--accent-color);
}

/* Submit-Button: STIL WIE THEME-BUTTONS */
.form-wrapper .wpforms-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--accent-color) !important;
  color: var(--primary-color) !important;
  font-family: inherit !important;
  font-size: var(--font-button) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  min-height: 52px;
  padding: 14px 26px !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid var(--accent-color) !important;
  cursor: pointer;
  width: 100%;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    filter 0.2s ease;
}

.form-wrapper .wpforms-submit:hover {
  background: transparent !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  transform: translateY(-1px);
  text-decoration: none;
}

.form-wrapper .wpforms-submit:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.form-wrapper .wpforms-submit:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mobile: Alles untereinander */
@media (max-width: 600px) {
  .form-wrapper .wpforms-field-container.wpforms-field-text:first-of-type,
  .form-wrapper .wpforms-field-container.wpforms-field-text + .wpforms-field-container.wpforms-field-text {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .form-wrapper .wpforms-field-container.wpforms-field-captcha,
  .form-wrapper .wpforms-submit-container {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .form-wrapper .wpforms-submit-container {
    text-align: center;
  }
}