/* ==========================================================
   MTV Schrobenhausen – Stylesheet (ohne Framework)
   Aufbau: 1 Farben und Schriften · 2 Grundlagen · 3 Kopf und Menü
           4 Hero · 5 Abschnitte und Karten · 6 Tabellen
           7 Aktuelles · 8 Fuß und Nach-oben-Button
   ========================================================== */

/* 1 Farben und Schriften ------------------------------------ */
:root{
  --wein:#7a1f2e;        /* Hauptfarbe */
  --wein-dunkel:#5a1521;
  --gold:#d9b46a;        /* Akzentfarbe */
  --papier:#f7f4f1;      /* Seitenhintergrund */
  --text:#241c1d;
  --rand:#e3dcd7;
  --schrift:'Source Sans 3',system-ui,sans-serif;
  --schrift-titel:'Barlow Condensed',Impact,sans-serif;
}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-display:swap;src:url('fonts/source-sans-3-400.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-display:swap;src:url('fonts/source-sans-3-600.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:700;font-display:swap;src:url('fonts/source-sans-3-700.woff2') format('woff2')}

/* 2 Grundlagen ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,p,ul,dl,dd{margin:0}
body{font-family:var(--schrift);background:var(--papier);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
ul{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p a,td a{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse}
h3{font-size:1.125rem;font-weight:700}
mark{background:#fff3c4;color:inherit;padding:0 .25em;border-radius:2px}
[hidden]{display:none!important}
.fett{font-weight:700}
.klein{font-size:.875rem}
.hinweis-klein{font-size:.875rem;margin-top:1rem}
.hinweis-klein.gedaempft,.gedaempft{color:rgba(36,28,29,.7)}
.fl-weiss{background:#fff}
.fl-papier{background:var(--papier)}

/* 3 Kopf und Menü ------------------------------------------- */
.kopf{position:sticky;top:0;z-index:30;background:var(--wein);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.kopf-innen{max-width:72rem;margin:0 auto;padding:0 1rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
.marke{display:flex;align-items:center;gap:.75rem}
.logo{height:2.5rem;width:2.5rem;object-fit:contain;background:#fff;border-radius:9999px;padding:2px}
.marke-name{font-family:var(--schrift-titel);font-weight:600;font-size:1.5rem;letter-spacing:.025em}
.menue-desktop{display:none;gap:1.5rem;font-weight:600}
.menue-desktop a:hover{color:var(--gold)}
.burger{padding:.5rem;margin-right:-.5rem}
.menue-mobil{display:none;background:var(--wein-dunkel);padding:0 1rem 1rem;gap:.25rem;font-weight:600}
.menue-mobil.offen{display:grid}
.menue-mobil a{padding:.5rem 0}
@media (min-width:768px){
  .menue-desktop{display:flex}
  .burger,.menue-mobil,.menue-mobil.offen{display:none}
}

/* 4 Hero ---------------------------------------------------- */
.hero{background:var(--wein);color:#fff}
.hero-innen{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.hero-vorspann{color:var(--gold);font-weight:600}
.hero-titel{font-family:var(--schrift-titel);font-weight:600;font-size:2.25rem;line-height:1.25;margin-top:.5rem;max-width:48rem}
.hero-text{margin-top:1.25rem;max-width:42rem;font-size:1.125rem;color:rgba(255,255,255,.85)}
.abteilungs-buttons{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:48rem}
.abteilungs-button{background:#fff;color:var(--wein);font-weight:700;padding:.75rem 1rem;text-align:center;border-radius:.25rem}
.abteilungs-button:hover{background:var(--gold)}
.schnellzugriff{margin-top:1.5rem;max-width:48rem;border-top:1px solid rgba(255,255,255,.25)}
.schnellzugriff a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.25);padding:.75rem 0;font-weight:600;color:var(--gold)}
.hero-linie{height:.375rem;background:var(--gold)}
@media (min-width:768px){
  .hero-innen{padding:5rem 1rem}
  .hero-titel{font-size:3.75rem;line-height:1.25}
  .abteilungs-buttons{grid-template-columns:repeat(4,1fr)}
  .schnellzugriff{display:none}
}

/* 5 Abschnitte und Karten ------------------------------------ */
.inhalt{max-width:72rem;margin:0 auto;padding:3.5rem 1rem}
.abteilungen-grid{display:grid;gap:3.5rem}
.abschnitt-titel{font-family:var(--schrift-titel);font-weight:600;font-size:2.25rem;line-height:2.5rem;color:var(--wein)}
.untertitel{font-family:var(--schrift-titel);font-weight:600;font-size:1.5rem;margin-top:2.5rem}
.intro{margin-top:.75rem;max-width:48rem}
.intro-schmal{max-width:42rem}
.zwei-spalten{margin-top:1.5rem;display:grid;gap:1.5rem}
.karte{border:1px solid var(--rand);border-radius:.25rem;padding:1.25rem}
.karte-weiss{background:#fff}
.karte h3+p{margin-top:.5rem}
.hallen-liste{margin-top:1.5rem;display:grid;gap:1rem}
.hinweis-box{margin-top:1.25rem;border-left:4px solid var(--gold);background:#fff;padding:1rem;max-width:48rem}
.stopp{color:#b91c1c;font-weight:600}
.button{display:inline-block;margin-top:1.5rem;background:var(--wein);color:#fff;font-weight:700;padding:.75rem 1.5rem;border-radius:.25rem}
.button:hover{background:var(--wein-dunkel)}
#kontakt p+p{margin-top:.5rem}
@media (min-width:768px){
  .abschnitt-titel{font-size:3rem;line-height:1}
  .zwei-spalten{grid-template-columns:repeat(2,1fr)}
  .hallen-liste{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){.hallen-liste{grid-template-columns:repeat(3,1fr)}}

/* 6 Tabellen (Trainingszeiten) -------------------------------- */
.tabelle-box{margin-top:.75rem;overflow-x:auto;background:#fff;border-radius:.25rem;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tt{width:100%;font-size:1rem}
.tt thead{background:var(--wein);color:#fff}
.tt th{font-weight:600;text-align:left}
.tt th,.tt td{padding:.75rem}
.tt td:first-child{font-weight:600}
.tt tbody tr+tr{border-top:1px solid var(--rand)}
@media (min-width:768px){.tt{font-size:.875rem}}
/* Smartphone: jede Gruppe als Karte statt Tabelle */
@media (max-width:767px){
  .tt thead{position:absolute;left:-9999px}
  .tt,.tt tbody,.tt tr,.tt td{display:block}
  .tt tr{padding:.85rem 1rem}
  .tt td{padding:.1rem 0}
  .tt td:first-child{font-size:1.1rem;color:var(--wein);padding-bottom:.25rem}
  .tt td:not(:first-child)::before{content:attr(data-label)": ";font-weight:600;color:#6b5e5f}
}

/* 7 Aktuelles ------------------------------------------------- */
.filter-leiste{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem}
.filter{border:1px solid var(--rand);border-radius:9999px;padding:.375rem 1rem;font-size:.875rem;font-weight:600}
.filter[aria-pressed="true"]{background:var(--wein);color:#fff;border-color:var(--wein)}
.news-liste{margin-top:1.5rem;display:grid;gap:1rem;align-items:start}
.news{border:1px solid var(--rand);border-radius:.25rem;background:var(--papier)}
.news-details{padding:1.25rem}
.news-details p{margin-top:.75rem}
.news-kopf{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.news-kopf::-webkit-details-marker{display:none}
.news-meta{display:block;font-size:.875rem;color:rgba(36,28,29,.7)}
.news-titel{display:block;font-weight:700;font-size:1.125rem}
.pfeil{margin-top:.5rem;flex-shrink:0;transition:transform .2s}
.news-details[open] .pfeil{transform:rotate(180deg)}
.archiv-link{font-weight:600;color:var(--wein);text-decoration:underline}
@media (min-width:768px){.news-liste{grid-template-columns:repeat(2,1fr)}}

/* 8 Fuß und Nach-oben-Button ---------------------------------- */
.fuss{background:var(--wein-dunkel);color:rgba(255,255,255,.85)}
.fuss-innen{max-width:72rem;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:.75rem;font-size:.875rem}
.fuss-links{display:flex;gap:1.25rem}
.fuss a{text-decoration:underline}
@media (min-width:768px){.fuss-innen{flex-direction:row;justify-content:space-between}}
.nach-oben{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:20;display:none;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--wein);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.nach-oben:hover{background:var(--wein-dunkel)}
.nach-oben.sichtbar{display:flex}

.karte .klein.gedaempft{margin-top:.25rem}
.zwei-spalten .hinweis-box{margin-top:0;max-width:none}
.news-leer{margin-top:1.5rem;color:rgba(36,28,29,.7)}

/* Textseiten (Impressum, Datenschutz) */
.kopf-zurueck{font-weight:600}
.kopf-zurueck:hover{color:var(--gold)}
.textseite{max-width:48rem;margin:0 auto;padding:2rem 1rem 4rem}
.textseite h1{font-family:var(--schrift-titel);font-weight:600;font-size:2.25rem;line-height:1.25;color:var(--wein)}
.textseite h2{font-size:1.25rem;font-weight:700;margin-top:2rem}
.textseite p,.textseite ul{margin-top:.5rem}
.textseite ul{list-style:disc;padding-left:1.25rem}
.textseite a{text-decoration:underline}