/* Deutsche Meisterschaft im Bayerischen Steinheben 2026
   Kraftsport Isartal e.V. — Stylesheet */

:root{
  --blau:      #1f4ed8;
  --blau-dark: #17399e;
  --dunkel:    #3d3d3d;
  --text:      #1a1a1a;
  --grau:      #6b6b6b;
  --linie:     #e4e4e4;
  --flaeche:   #f6f6f6;
  --breite:    1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--blau);}
a:hover{color:var(--blau-dark);}

h1,h2,h3{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;
  line-height:1.15;
  margin:0;
}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px;}

/* ---------- Kopfbereich ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--linie);
}
.kopf .wrap{display:flex;align-items:center;gap:16px;min-height:78px;}
.kopf img{height:52px;width:auto;}
.kopf .marke{display:flex;align-items:center;gap:12px;text-decoration:none;}
.kopf .zurueck{
  margin-left:auto;font-size:15px;text-decoration:none;
  font-weight:700;white-space:nowrap;
}

/* ---------- Hero ---------- */
.hero{background:var(--dunkel);color:#fff;padding:56px 0 64px;}
.hero .wrap{max-width:820px;text-align:center;}
.hero .eyebrow{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:#9fbaf5;font-weight:800;margin-bottom:14px;
}
.hero h1{font-size:clamp(30px,4.4vw,52px);color:#fff;}
.hero .ort{margin:16px 0 0;font-size:19px;color:#d8d8d8;}
.hero .plakat-link{display:block;width:340px;max-width:100%;margin:38px auto 0;}
.hero .plakat{
  width:100%;height:auto;border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}

/* ---------- Ergebnisübersicht ---------- */
.uebersicht{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:44px 0;}
.uebersicht h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:20px;}
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabelle{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;background:#fff;
  border:1px solid var(--linie);border-radius:6px;overflow:hidden;}
.tipp{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--grau);max-width:78ch;}
.tipp em{font-style:normal;font-weight:800;color:var(--text);}
.tabelle th,.tabelle td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linie);}
.tabelle th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);font-weight:800;background:#fafafa;}
.tabelle tr:last-child td{border-bottom:none;}
.tabelle td:first-child{font-weight:800;}
.tabelle .zahl{font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---------- Klassenbereiche ---------- */
.klasse{padding:64px 0;border-bottom:1px solid var(--linie);}
.klasse:last-of-type{border-bottom:none;}
.klasse > .wrap > h2{
  font-size:clamp(26px,3.2vw,38px);
  padding-bottom:14px;border-bottom:4px solid var(--blau);
  display:inline-block;margin-bottom:8px;
}

.siegerehrung{margin:28px 0 44px;}
.siegerehrung a{display:block;}
.siegerehrung img{width:100%;border-radius:6px;border:1px solid var(--linie);}
.bildunter{font-size:14px;color:var(--grau);margin-top:9px;}

/* ---------- Teilnehmer ---------- */
.person{margin-top:44px;}
.person:first-of-type{margin-top:0;}
.person h3{font-size:clamp(22px,2.6vw,30px);}

.werte{
  display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 26px;
  list-style:none;padding:0;
}
.werte li{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;
  padding:9px 15px;font-size:15px;
}
.werte b{font-family:'Archivo',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;}
.werte .platz{background:var(--blau);border-color:var(--blau);color:#fff;}

/* ---------- Videogalerie ---------- */
.galerie{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.clip video{
  width:100%;aspect-ratio:16/9;background:#000;
  border-radius:6px;border:1px solid var(--linie);
}
.clip figcaption{margin-top:10px;}
.clip .titel{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums;
}
.clip .hoehe{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--blau);
}
.clip .hoehe::before{content:"·";color:var(--linie);margin:0 9px;}
.clip .zusatz{display:block;font-size:14px;color:var(--grau);margin-top:1px;}
.clip .dl{display:flex;gap:8px;margin-top:9px;}
.clip .dl a{
  font-size:13px;font-weight:800;text-decoration:none;
  color:var(--blau);background:var(--flaeche);
  border:1px solid var(--linie);border-radius:4px;padding:5px 11px;
  transition:background .15s,border-color .15s;
}
.clip .dl a::before{content:"\2193";margin-right:6px;opacity:.65;}
.clip .dl a:hover{background:#fff;border-color:var(--blau);}

/* Fingerbedienung: groessere Schaltflaechen auf Touchgeraeten */
@media (pointer:coarse){
  .clip .dl{gap:10px;}
  .clip .dl a{
    flex:1 1 0;text-align:center;
    font-size:15px;padding:13px 12px;min-height:48px;
    display:flex;align-items:center;justify-content:center;
  }
  .siegerehrung a,.plakat-link{-webkit-tap-highlight-color:rgba(31,78,216,.2);}
}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:#cfcfcf;padding:40px 0;font-size:15px;}
.fuss a{color:#9fbaf5;}
.fuss img{height:44px;width:auto;margin-bottom:16px;filter:invert(1);}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:820px){
  body{font-size:16px;}
  .hero{padding:36px 0 44px;}
  .hero .plakat-link{width:280px;margin-top:28px;}
  .klasse{padding:44px 0;}
  .galerie{grid-template-columns:1fr;gap:22px;}
  .kopf .wrap{min-height:64px;}
  .kopf img{height:42px;}
  .tabelle{font-size:15px;}
  .tabelle th,.tabelle td{padding:10px 11px;}
}
@media (max-width:520px){
  .kopf .zurueck{display:none;}
}