/* ============================================================
   KARATE BREGENZ 2026 – zentrales Stylesheet
   Design-Tokens aus dem Prototyp karate-bregenz-2026.html
   Rot / Schwarz / Weiß · Space Grotesk / Inter / Fraunces / Noto Serif JP
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp.woff2') format('woff2');
  unicode-range:U+25cb, U+4e71, U+4f59, U+50d5, U+520a, U+5217, U+5230, U+523a-523b, U+541b, U+5439, U+5747, U+59c9, U+5bdf, U+5c31, U+5de8, U+5e7c, U+5f69, U+6050, U+60d1, U+63cf, U+663c, U+67c4, U+6885, U+6c38, U+6d6e, U+6db2, U+6df7, U+6e2c, U+6f5f, U+7532, U+76e3-76e4, U+7701, U+793c, U+79f0, U+7a93, U+7d00, U+7de0, U+7e54, U+8328, U+8840, U+969c, U+96e8, U+9811, U+9aea, U+9b5a, U+ff24, U+ff2e, U+ff57;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp-2.woff2') format('woff2');
  unicode-range:U+3d, U+5e, U+25cf, U+4e0e, U+4e5d, U+4e73, U+4e94, U+4f3c, U+5009, U+5145, U+51ac, U+5238, U+524a, U+53f3, U+547c, U+5802, U+5922, U+5a66, U+5c0e, U+5de6, U+5fd8, U+5feb, U+6797, U+685c, U+6b7b, U+6c5f-6c60, U+6cc9, U+6ce2, U+6d17, U+6e21, U+7167, U+7642, U+76db, U+8001, U+821e, U+8857, U+89d2, U+8b1b, U+8b70, U+8cb4, U+8cde, U+8f03, U+8f2a, U+968e, U+9b54, U+9e7f, U+9ebb, U+ff05, U+ff33;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp-3.woff2') format('woff2');
  unicode-range:U+4e16, U+4e3b, U+4ea4, U+4ee4, U+4f4d, U+4f4f, U+4f55, U+4f9b, U+5317, U+5358, U+53c2, U+53e4, U+548c, U+571f, U+59cb, U+5cf6, U+5e38, U+63a2, U+63b2, U+6559, U+662d, U+679c, U+6c7a, U+72b6, U+7523, U+767d, U+770c, U+7a2e, U+7a3f, U+7a7a, U+7b2c, U+7b49, U+7d20, U+7d42, U+8003, U+8272, U+8a08, U+8aac, U+8cb7, U+8eab, U+8ee2, U+9054-9055, U+90fd, U+914d, U+91cd, U+969b, U+97f3, U+984c, U+ff06;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp-4.woff2') format('woff2');
  unicode-range:U+26, U+5f, U+2026, U+203b, U+4e09, U+4eac, U+4ed5, U+4fa1, U+5143, U+5199, U+5207, U+539f, U+53e3, U+53f7, U+5411, U+5473, U+5546, U+55b6, U+5929, U+597d, U+5bb9, U+5c11, U+5c4b, U+5ddd, U+5f97, U+5fc5, U+6295, U+6301, U+6307, U+671b, U+76f8, U+78ba, U+795e, U+7d30, U+7d39, U+7d9a, U+89e3, U+8a00, U+8a73, U+8a8d, U+8a9e, U+8aad, U+8abf, U+8cea, U+8eca, U+8ffd, U+904b, U+9650, U+ff11-ff12;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp-5.woff2') format('woff2');
  unicode-range:U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c, U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c, U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279, U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868, U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6, U+9ad8, U+ff1a, U+ff1f;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-jp-6.woff2') format('woff2');
  unicode-range:U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}
@font-face{
  font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/noto-serif-jp-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --rot:#E42320;
  --rot-dunkel:#C01714;
  --ink:#131313;
  --ink-soft:#3a3a3a;
  --grau:#6d6d6d;
  --linie:#e6e3df;
  --papier:#ffffff;
  --papier-warm:#f8f7f5;
  --karte-bg:#ffffff;
  --marker:rgba(228,35,32,.22);
  --display:'Space Grotesk',sans-serif;
  --accent-font:'Fraunces',serif;
  --body:'Inter',system-ui,sans-serif;
  --jp:'Noto Serif JP',serif;
  --max:1240px;
  --pad:clamp(1.25rem,4vw,3rem);
  --radius:2px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f2f0ec;
    --ink-soft:#c9c6c1;
    --grau:#9b9893;
    --linie:#37342f;
    --papier:#161514;
    --papier-warm:#1e1c1a;
    --karte-bg:#232120;
    --marker:rgba(228,35,32,.38);
    color-scheme:dark;
  }
}

/* ---------- Cross-Document View Transitions ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation-duration:.18s}
  ::view-transition-new(root){animation-duration:.18s}
}

/* ---------- Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--papier);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,picture{max-width:100%;display:block}
picture img{height:auto}
a{color:inherit}
::selection{background:var(--rot);color:#fff}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rot);color:#fff;padding:.8rem 1.4rem;
  font-family:var(--display);font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Typografie ---------- */
.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.06;
  text-wrap:balance;
}
h1.display{font-size:clamp(2.6rem,6.6vw,5.6rem)}
h2.display{font-size:clamp(1.9rem,4.2vw,3.2rem)}
h3{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.accent-wort{
  font-family:var(--accent-font);font-style:italic;font-weight:500;
  padding:0 .12em;
  background:linear-gradient(transparent 58%,var(--marker) 58%);
}
p{max-width:64ch}
strong{font-weight:600}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);max-width:56ch}
.klein{font-size:.95rem}
.winzig{font-size:.85rem;color:var(--grau)}

.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  margin-bottom:1.5rem;
}
.eyebrow::before{content:"";width:2.2em;height:3px;background:var(--rot);flex:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);
  font-weight:600;font-size:1rem;letter-spacing:0;
  padding:.9rem 1.7rem;text-decoration:none;border:1.5px solid var(--ink);
  border-radius:10px;
  color:var(--ink);background:transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.btn::after{content:"→";transition:transform .25s}
.btn:hover{background:var(--ink);color:var(--papier)}
.btn:hover::after{transform:translateX(4px)}
.btn.rot{background:var(--rot);border-color:var(--rot);color:#fff}
.btn.rot:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.btn.hell{border-color:#fff;color:#fff;background:transparent}
.btn.hell:hover{background:#fff;color:#131313}
.btn.ohne-pfeil::after{content:none}
.btn:active{transform:translateY(1px)}
.filter-leiste button:active{transform:scale(.97)}
.karte:focus-within{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.09)}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--linie);
}
/* Blur liegt auf dem Pseudoelement: backdrop-filter direkt am Header würde
   ihn zum Containing Block machen und das fixe Mobilmenü einsperren */
header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-wrap{max-width:var(--max);margin:0 auto;padding:.7rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:36px;width:auto}
nav.main{display:flex;align-items:center;gap:1.5rem;font-family:var(--display);font-size:.95rem;font-weight:500}
nav.main a{text-decoration:none;padding:.3rem 0;position:relative;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--rot);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
nav.main .cta-nav{background:var(--rot);color:#fff;padding:.55rem 1rem;border-radius:10px}
nav.main .cta-nav::after{display:none}
nav.main .cta-nav:hover{background:var(--rot-dunkel)}
.dropdown{position:relative}
.dropdown>button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:.3rem 0;display:flex;gap:.35rem;align-items:center}
.dropdown-menu{
  position:absolute;top:calc(100% + .8rem);right:0;min-width:240px;
  background:var(--papier);border:1px solid var(--linie);box-shadow:0 18px 40px rgba(0,0,0,.12);
  display:none;flex-direction:column;padding:.5rem 0;
}
/* Hover-Brücke: überdeckt die Lücke zwischen Button und Menü (nur Desktop-Nav) */
@media(min-width:981px){
  .dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1.1rem}
}
/* Klick-Umschalter */
.dropdown.offen .dropdown-menu{display:flex}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:flex}
.dropdown-menu a{padding:.6rem 1.2rem;text-decoration:none}
.dropdown-menu a:hover{background:var(--papier-warm);color:var(--rot)}
/* Dropdown-Einträge: Innenabstand und kein Nav-Unterstrich –
   muss die spezifischere Regel nav.main a (padding .3rem 0) schlagen */
nav.main .dropdown-menu a{padding:.6rem 1.2rem}
nav.main .dropdown-menu a::after{display:none}
.burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative;z-index:60}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;rotate:45deg}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;rotate:-45deg}
@media(max-width:1080px){
  .logo-schrift{display:none}
}
@media(max-width:980px){
  nav.main{
    display:none;position:fixed;inset:63px 0 0 0;background:var(--papier);
    flex-direction:column;align-items:flex-start;padding:2rem var(--pad);gap:.4rem;font-size:1.05rem;overflow:auto;
  }
  nav.main.open{display:flex}
  .dropdown-menu{position:static;display:flex;border:none;box-shadow:none;padding-left:1rem;background:transparent}
  .dropdown>button{display:none}
  .burger{display:block}
  .logo-schrift{display:inline}
  nav.main a{padding:.6rem 0}          /* Touch-Ziel >=44px */
  .dropdown-menu a{padding:.7rem 1.2rem}
}

/* ---------- Sektionen ---------- */
section.block{padding:clamp(3.5rem,8vw,7rem) var(--pad)}
.inner{max-width:var(--max);margin:0 auto}
.warm{background:var(--papier-warm)}
.dunkel{background:#131313;color:#fff}
.dunkel .eyebrow{color:#fff}
.dunkel p{color:#d8d8d8}
.seitenkopf{padding:clamp(3rem,7vw,5.5rem) var(--pad) 0}
.seitenkopf .lead{margin-top:1.5rem}

/* Wasserzeichen-Pinselstrich für Sektionen */
.mit-pinsel{position:relative;overflow:hidden}
.mit-pinsel>.inner{position:relative;z-index:2}
.pinsel-wasserzeichen{
  position:absolute;right:-4%;bottom:-12%;width:min(40vw,420px);
  opacity:.05;z-index:1;pointer-events:none;user-select:none;
}
@media (prefers-color-scheme: dark){
  .pinsel-wasserzeichen{filter:invert(1);opacity:.07}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(4rem,10vw,8.5rem) var(--pad) clamp(4rem,9vw,7.5rem)}
.hero .inner{position:relative;z-index:2;display:grid;gap:2rem}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:1rem}
.hero-pinsel{
  position:absolute;right:-6%;top:50%;translate:0 -50%;
  width:min(48vw,600px);opacity:.13;z-index:1;pointer-events:none;user-select:none;
}
@media (prefers-color-scheme: dark){
  .hero-pinsel{filter:invert(1);opacity:.15}
}
@media (prefers-reduced-motion: no-preference){
  .hero-pinsel{animation:pinsel-erscheinen 1.6s cubic-bezier(.25,.5,.25,1) both}
  @keyframes pinsel-erscheinen{
    from{opacity:0;clip-path:inset(0 100% 0 0)}
    60%{opacity:.13}
    to{opacity:.13;clip-path:inset(0 0 0 0)}
  }
}
/* Vollbreites Einstiegsbild unter dem Hero – Höhe gedeckelt, damit es auf breiten
   Bildschirmen nicht die halbe Seite einnimmt. */
.start-bild{margin:0}
.start-bild img{width:100%;height:clamp(260px,42vw,520px);object-fit:cover;object-position:center 32%}

.hero-fakten{display:flex;flex-wrap:wrap;gap:2.5rem;border-top:1px solid var(--linie);padding-top:1.8rem;margin-top:.5rem}
.hero-fakten div b{font-family:var(--display);font-weight:700;font-size:1.7rem;display:block}
.hero-fakten div span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}

/* ---------- Karten & Grids (Container Queries) ---------- */
.grid{display:grid;gap:1.5rem;container-type:inline-size}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.karte{
  background:var(--karte-bg);border:1px solid var(--linie);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.karte:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.09)}
.karte img{aspect-ratio:3/2;object-fit:cover;width:100%}
.karte .k-body{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.karte .k-body p{font-size:.95rem}
.karte .alter{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rot)}
/* Container Query: sehr schmale Karten-Container → kompaktere Karten */
@container (max-width: 340px){
  .karte .k-body{padding:1.1rem;gap:.6rem}
  .karte .k-body p{font-size:.9rem}
}
.karte a.mehr{margin-top:auto;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.karte a.mehr:hover{color:var(--rot)}

/* ---------- Intro-Spalten (Startseite): feiner Rahmen um jeden Textblock ---------- */
.intro-spalten .grid{gap:1.5rem}
.intro-spalten .grid>div{border:1px solid var(--linie);background:var(--karte-bg);padding:1.5rem}
.intro-spalten h3{margin-bottom:.75rem}
/* Eigenständiger Pfeil-Text-Link (CTA in Fließtextnähe) */
.link-pfeil{display:inline-block;margin-top:1rem;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--rot)}
.link-pfeil:hover,.link-pfeil:focus-visible{color:var(--rot-dunkel);text-decoration:underline;text-underline-offset:3px}

/* ---------- Werte ---------- */
.werte .grid>div{border-top:2px solid var(--ink);padding-top:1.2rem}
.werte .grid>div h3{margin-bottom:.6rem}
.werte .grid>div:hover{border-color:var(--rot)}
.werte .grid>div p{font-size:.95rem}

/* ---------- Japan-Zitat ---------- */
.zitat{text-align:center}
.zitat .kanji{font-family:var(--jp);font-size:clamp(1.5rem,4vw,2.8rem);line-height:1.5;letter-spacing:.08em;color:#fff;max-width:none}
.zitat .romaji{margin:1.4rem auto .4rem;font-style:italic;color:#bdbdbd;max-width:none}
.zitat .uebersetzung{color:#fff;font-weight:500;max-width:none}

/* ---------- News-Karten ---------- */
.news-karte time{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.news-karte h3{font-size:1.05rem;line-height:1.35;letter-spacing:0;font-weight:600;font-family:var(--body)}
.news-karte h3 a{text-decoration:none}
.news-karte h3 a:hover{color:var(--rot)}
.news-karte .kategorie{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rot)}

/* ---------- Galerie ---------- */
.galerie{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;
  content-visibility:auto;contain-intrinsic-size:auto 2400px;
}
.galerie button{border:none;padding:0;cursor:zoom-in;background:none;overflow:hidden}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%;height:100%;transition:transform .5s}
.galerie button:hover img{transform:scale(1.06)}
.galerie button:focus-visible{outline-offset:-3px}

dialog.lightbox{
  border:none;background:rgba(10,10,10,.94);
  max-width:100vw;max-height:100vh;width:100vw;height:100vh;
  padding:2rem;
}
dialog.lightbox:not([open]){display:none}
dialog.lightbox .lb-inhalt{display:grid;place-items:center;width:100%;height:100%}
dialog.lightbox img{max-width:min(92vw,1200px);max-height:84vh;object-fit:contain;width:auto;height:auto}
dialog.lightbox .lb-schliessen{position:fixed;top:1.2rem;right:1.6rem;background:none;border:none;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
dialog.lightbox .lb-pfeil{position:fixed;top:50%;translate:0 -50%;background:none;border:none;color:#fff;font-size:2.6rem;cursor:pointer;padding:1rem}
dialog.lightbox .lb-zurueck{left:.6rem}
dialog.lightbox .lb-vor{right:.6rem}
dialog.lightbox::backdrop{background:rgba(0,0,0,.65)}
dialog.lightbox .lb-hinweis{position:fixed;bottom:1rem;left:50%;translate:-50% 0;color:#999;font-size:.8rem}

/* ---------- Team ---------- */
.trainer{display:grid;grid-template-columns:280px 1fr;gap:2.2rem;align-items:start;padding:2.4rem 0;border-top:1px solid var(--linie)}
.trainer img{aspect-ratio:3/4;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.trainer:hover img,.trainer:focus-within img{filter:grayscale(0)}
.trainer h3{font-size:1.5rem}
.trainer .rolle{color:var(--rot);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:.3rem 0 1rem}
.trainer blockquote{margin-top:1.2rem;padding-left:1.2rem;border-left:3px solid var(--rot);font-style:italic;color:var(--ink-soft)}
@media(max-width:720px){.trainer{grid-template-columns:1fr}.trainer picture{max-width:280px}}

/* ---------- Formulare ---------- */
form.mf{display:grid;gap:1.1rem;max-width:680px}
form.mf fieldset{border:1px solid var(--linie);padding:1.6rem;display:grid;gap:1rem}
form.mf legend{font-family:var(--display);font-weight:600;font-size:1.1rem;padding:0 .6rem}
form.mf label{font-size:.82rem;font-weight:600;letter-spacing:.05em;display:block}
form.mf label>input,form.mf label>select,form.mf label>textarea{margin-top:.35rem}
form.mf input,form.mf select,form.mf textarea{
  font:inherit;padding:.7rem .9rem;border:1px solid color-mix(in srgb,var(--grau) 45%,var(--linie));
  background:var(--karte-bg);color:var(--ink);border-radius:var(--radius);width:100%;
}
form.mf input:focus,form.mf select:focus,form.mf textarea:focus{
  border-color:var(--rot);outline:none;box-shadow:0 0 0 3px rgba(228,35,32,.15);
}
form.mf input[aria-invalid="true"],form.mf select[aria-invalid="true"]{border-color:var(--rot)}
form.mf .zwei{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.mf .drei{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media(max-width:560px){form.mf .zwei,form.mf .drei{grid-template-columns:1fr}}
form.mf .check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.9rem;letter-spacing:0}
form.mf .check input{width:1.1rem;height:1.1rem;accent-color:var(--rot);margin-top:.15rem;flex:none}
/* :has(): bestätigte Zustimmungen dezent markieren */
form.mf .check:has(input:checked) label{color:var(--ink)}
form.mf .check:has(input:checked)::after{content:"✓";color:var(--rot);font-weight:700;margin-left:auto}
form.mf .honig{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
form.mf .fehlertext{display:none;color:var(--rot);font-weight:600;max-width:none}
form.mf .fehlertext.sichtbar{display:block}
form.mf button[disabled]{opacity:.6;cursor:progress}
.danke-block{border:1px solid var(--linie);background:var(--papier-warm);padding:2.4rem;max-width:680px}
.danke-block h2{font-family:var(--display);margin-bottom:.8rem}
.pflicht{color:var(--rot)}

/* ---------- Footer ---------- */
footer{background:#131313;color:#cfcfcf;padding:4rem var(--pad) 2.5rem}
footer .inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.footer-titel{color:#fff;font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:1rem}
footer a{color:#cfcfcf;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer ul{list-style:none;display:grid;gap:.5rem}
footer .klein{color:#cfcfcf}
footer .winzig{color:#8f8f8f;margin-top:1rem}
footer .unten{max-width:var(--max);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid #333;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:#8f8f8f}
@media(max-width:840px){footer .inner{grid-template-columns:1fr}}

/* ---------- Scroll-Reveal (scroll-driven, Fallback IO) ---------- */
.reveal{opacity:1}
.js .reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s ease}
.js .reveal.in{opacity:1;translate:0 0}
@supports (animation-timeline: view()){
  .js .reveal,.reveal{
    opacity:1;translate:0 0;transition:none;
    animation:einblenden linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 42%;
  }
  @keyframes einblenden{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
}

/* ---------- Stories: Filter + Artikel ---------- */
.filter-leiste{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 2.5rem}
.filter-leiste button{
  font-family:var(--display);font-weight:500;font-size:.9rem;
  border:1.5px solid var(--linie);background:transparent;color:var(--ink);
  padding:.5rem 1.1rem;border-radius:99px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.filter-leiste button:hover{border-color:var(--ink)}
.filter-leiste button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--papier)}
.story-karte[hidden]{display:none}

article.story{max-width:760px;margin:0 auto}
article.story .story-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;color:var(--grau);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin:1.2rem 0 2rem}
article.story .story-meta .kategorie{color:var(--rot);font-weight:600}
article.story h1{margin-top:.5rem}
article.story .inhalt{display:grid;gap:1.1rem;font-size:1.05rem}
article.story .inhalt h2,article.story .inhalt h3{font-family:var(--display);margin-top:1rem}
article.story .inhalt img{border:1px solid var(--linie)}
article.story .titelbild{margin:0 0 2rem}
article.story .titelbild img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem;margin-top:2.5rem}
.story-galerie button{border:none;padding:0;cursor:zoom-in;background:none}
.story-galerie img{aspect-ratio:4/3;object-fit:cover;width:100%}
.teilen-leiste{display:flex;gap:1rem;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.teilen-leiste button,.teilen-leiste a{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  display:inline-flex;gap:.5rem;align-items:center;
  border:1.5px solid var(--ink);border-radius:10px;background:none;color:var(--ink);
  padding:.55rem 1.1rem;cursor:pointer;text-decoration:none;
}
.teilen-leiste button:hover,.teilen-leiste a:hover{background:var(--ink);color:var(--papier)}
.story-nachbarn{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}

/* ---------- Trainingszeiten-Widget ---------- */
.tz-widget{border:1px solid var(--linie);background:var(--karte-bg)}
.tz-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.tz-kopf h3{font-size:1.15rem}
.tz-naechstes{font-size:.9rem;color:var(--ink-soft)}
.tz-naechstes b{color:var(--rot)}
/* max-width:none hebt die globale Lesebreite p{max-width:64ch} auf – der Streifen
   soll über die ganze Widget-Breite laufen, nicht nur über die Textbreite. */
.tz-pause{padding:.9rem 1.5rem;border-bottom:1px solid var(--linie);font-size:.9rem;color:var(--ink-soft);background:var(--papier-warm);max-width:none}
.tz-pause b{color:var(--rot)}
.tz-tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.tz-tabelle th,.tz-tabelle td{text-align:left;padding:.75rem 1.5rem;border-top:1px solid var(--linie)}
.tz-tabelle th{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.tz-tabelle tr:first-child th{border-top:none}
.tz-gruppe{font-weight:600}
.tz-alter{color:var(--rot);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;display:block}
.tz-fuss{padding:1rem 1.5rem;border-top:1px solid var(--linie);font-size:.88rem;color:var(--grau)}

/* ---------- Gürtel-Rechner ---------- */
.guertel-liste{display:grid;gap:.7rem;max-width:820px}
.guertel-liste details{border:1px solid var(--linie);background:var(--karte-bg)}
.guertel-liste summary{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem;cursor:pointer;
  font-family:var(--display);font-weight:600;list-style:none;
}
.guertel-liste summary::-webkit-details-marker{display:none}
.guertel-liste summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--grau);transition:rotate .25s}
.guertel-liste details[open] summary::after{rotate:45deg}
.guertel-band{width:54px;height:16px;border:1px solid rgba(0,0,0,.2);flex:none;border-radius:2px;position:relative;overflow:hidden}
.guertel-info{padding:0 1.3rem 1.3rem;display:grid;gap:.7rem}
.guertel-info h4{font-family:var(--display);font-size:.95rem}
.guertel-info ul{padding-left:1.2rem;display:grid;gap:.3rem;font-size:.95rem}
.guertel-stufe{color:var(--grau);font-weight:400;font-size:.85rem;margin-left:auto;padding-right:.8rem}

/* ---------- Videos ---------- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.4rem}
.video-karte{border:1px solid var(--linie);background:var(--karte-bg);overflow:hidden}
.video-karte .vk-thumb{position:relative;aspect-ratio:16/9;cursor:pointer;border:none;padding:0;background:#000;width:100%;display:block}
.video-karte .vk-thumb img{width:100%;height:100%;object-fit:cover;opacity:.92}
.video-karte .vk-thumb::after{
  content:"▶";position:absolute;inset:0;display:grid;place-items:center;
  font-size:2.2rem;color:#fff;background:rgba(0,0,0,.25);transition:background .25s;
}
.video-karte .vk-thumb:hover::after{background:rgba(228,35,32,.55)}
.video-karte .vk-titel{padding:1rem 1.2rem;font-family:var(--display);font-weight:600;font-size:1rem}
.video-karte iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.video-hinweis{font-size:.8rem;color:var(--grau);padding:0 1.2rem 1rem}

/* ---------- Hinweise ---------- */
.hinweis{
  background:color-mix(in srgb,var(--rot) 6%,var(--papier));
  border:1px solid color-mix(in srgb,var(--rot) 30%,var(--linie));
  padding:.9rem 1.2rem;font-size:.9rem;max-width:760px;
}

/* ---------- Inhaltsseiten (Datenschutz, Statuten …) ---------- */
.textseite{max-width:760px}
.textseite h2{font-family:var(--display);font-size:1.5rem;margin:2.2rem 0 .8rem}
.textseite h3{margin:1.6rem 0 .6rem}
.textseite p,.textseite li{font-size:1rem}
/* Der globale Reset nimmt Absätzen und Listen jeden Abstand – auf den reinen
   Textseiten (Impressum, Datenschutz, Statuten) klebten die Blöcke sonst aneinander. */
.textseite p{margin-bottom:1rem}
.textseite ul,.textseite ol{padding-left:1.3rem;display:grid;gap:.4rem;margin-bottom:1.6rem}
.textseite li>p{margin-bottom:0}
.textseite a{color:var(--rot);text-underline-offset:2px}

/* ---------- Druck: Mitgliedschaftsantrag ---------- */
@media print{
  header,footer,.skip-link,.cta-row,.hinweis,.kein-druck{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  form.mf{max-width:none}
  form.mf fieldset{break-inside:avoid;border:1px solid #999}
  form.mf input,form.mf select{border:none;border-bottom:1px solid #999;border-radius:0;background:#fff}
  .druck-kopf{display:block !important;margin-bottom:1cm}
  .druck-kopf h1{font-size:18pt}
  a[href^="http"]::after{content:""}
}
.druck-kopf{display:none}
.nur-druck-unterschrift{display:none}
@media print{
  .nur-druck-unterschrift{
    display:block;margin-top:1.6cm;padding-top:.4cm;
  }
  .nur-druck-unterschrift::before{
    content:"Ort, Datum: ____________________________          Unterschrift (bei Minderjährigen: Erziehungsberechtigte): ____________________________";
    font-size:10pt;
  }
  form.mf input[type="file"],form.mf .honig{display:none}
  form.mf .check input{-webkit-appearance:checkbox;appearance:checkbox}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto}
  .js .reveal{opacity:1;translate:0}
}