/* ===========================================================================
   Kono Karate Dojo Tamsweg – style.css
   ---------------------------------------------------------------------------
   A single stylesheet for the whole website.

   STRUCTURE (top to bottom):
     0) Webfont (self-hosted Jost)
     1) COLORS & THEME (CSS variables) – >>> CHANGE COLORS HERE <<<
     2) Base reset & basics
     3) Layout helpers (container, sections)
     4) Header / navigation
     5) Hero (intro area)
     6) Buttons, cards, tables, form
     7) Extra components (social, WhatsApp, values, trainer …)
     8) Footer & legal pages
     9) Accessibility
    10) Responsive (larger screens)
    11) Print (legal pages)

   Fonts: headings use self-hosted "Jost" (woff2 in /assets/fonts), body text a system sans-serif stack.

   Tip: nearly all colors are CSS variables in section 1. To change the accent
   color, one line there is enough.
   =========================================================================== */

/* ===========================================================================
   0) WEBFONT — Jost (SIL Open Font License 1.1), self-hosted, no CDN.
   Variable weight 400-700. latin-ext covers the macrons in "Wadō"/"Ōtsuka".
   =========================================================================== */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/jost-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: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/jost-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;
}

/* ===========================================================================
   1) COLORS & THEME   >>> CHANGE COLORS HERE <<<
   ---------------------------------------------------------------------------
   Light scheme with a dark hero. Accent red #d10d10 is measured from the
   club logo. All combinations meet WCAG AA (contrast pre-computed).
   =========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces & text */
  --bg:          #fafaf8;   /* page background (warm paper) */
  --surface:     #ffffff;   /* cards / raised areas */
  --surface-2:   #f1f0eb;   /* slightly stronger raised areas */
  --text:        #20242c;   /* body text */
  --text-muted:  #545b68;   /* secondary text */
  --heading:     #14161c;   /* headings */
  --border:      #e5e3dd;   /* decorative lines / borders */
  --border-strong: #767d8a; /* form-control borders (≥3:1 on white) */

  /* Accent (logo red) */
  --accent:        #d10d10; /* links & accent text — 5.56:1 on white */
  --accent-hover:  #a80a0d;
  --btn-bg:        #d10d10;
  --btn-bg-hover:  #a80a0d;
  --btn-text:      #ffffff;

  /* Header (light) */
  --nav-bg:     #ffffff;
  --nav-text:   #14161c;
  --nav-muted:  #545b68;
  --nav-border: #eceae6;

  /* Dark areas (hero, footer) */
  --dark-bg:    #14161c;
  --dark-bg-2:  #232733;
  --dark-muted: #aab1bd;    /* muted text on dark — 6.95:1 */
  --footer-bg:  #14161c;
  --footer-text:#cdd2dc;

  /* WhatsApp button — 5.17:1 with white text */
  --wa-bg:       #1b7d44;
  --wa-bg-hover: #16693a;

  /* Effects */
  --shadow: 0 1px 3px rgba(20, 22, 28, .06), 0 10px 28px rgba(20, 22, 28, .06);
  --ring:   #d10d10;        /* keyboard focus */

  /* Sizes */
  --maxw:    1080px;
  --radius:  14px;
  --radius-sm: 9px;

  /* Font stacks */
  --font-head: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ===========================================================================
   2) BASE RESET & BASICS
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Keep anchor targets AND keyboard-focused elements from landing under the
   sticky navigation (scroll-padding covers :target and focus scrolling,
   WCAG 2.2 SC 2.4.11 "Focus Not Obscured"). */
html { scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* ~17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: short pages (danke/404) used to leave a light strip of
     page background below the dark footer on tall screens */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

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

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

/* Contact info in <address> reads as normal text, not italic */
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: .01em;
  /* No orphan words in (long German) headings */
  text-wrap: balance;
  /* No auto-hyphenation: split headings ("Erwachse-nentraining") look broken.
     Whole words wrap to the next line instead; break-word stays as the last
     resort so an extreme word can never push the layout sideways. The h1
     minimum below is sized so the longest words ("Datenschutzerklärung",
     "Erwachsenentraining") still fit unbroken on a 320px phone. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem); }
/* h3 viewport cap: inert at normal settings, only shrinks the card headings
   ("Selbstverteidigung" ≈ 8.65em) on tiny screens with enlarged font-size,
   where the fixed 1.25rem would force a mid-word break inside a card */
h3 { font-size: min(1.25rem, calc((100vw - 8rem) / 8.8)); }

p { margin: 0 0 1rem; text-wrap: pretty; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: .25rem 0; text-wrap: pretty; }

strong { color: var(--heading); }

/* Reliably hide elements that JavaScript marks as hidden */
[hidden] { display: none !important; }

/* ===========================================================================
   3) LAYOUT HELPERS
   =========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Compact but still airy: 2.5rem on phones up to 4.25rem on desktop
   (was 3rem-6rem — the gap between two sections felt like dead space) */
.section { padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.25rem); }
.section--tint { background: var(--surface); }

/* small eyebrow heading above the H2 ("kicker") */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

.section-head { max-width: 60ch; margin-bottom: 1.75rem; }
.lead { font-size: 1.18rem; color: var(--text-muted); text-wrap: balance; }


/* ===========================================================================
   4) HEADER / NAVIGATION
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 2px solid var(--nav-border);
}
/* Two "Anmeldung" nav entries: brand + 7 items measure ~1142px and no longer
   fit the 1080px content container — the header row alone may use up to
   1280px. If the header social icons are ever activated in config.js, they
   add ~140px and this width must be revisited. */
.site-header .container { max-width: 1280px; }
.nav {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px;
  /* breathing room when the brand wraps to 4 lines on ~320px screens;
     inert above that (content + padding stays under the 64px minimum) */
  padding-block: .4rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--nav-text); text-decoration: none;
  /* name + tagline get their look from .brand b / .brand span below (the
     wrapper span intercepts inheritance) — a font-family/font-weight here
     never reached them and was removed as dead (audit 2026-07-10 night);
     making the name render in Jost would be a VISIBLE change (owner call) */
  margin-right: auto;            /* pushes the rest to the right */
  line-height: 1.1;
}
.brand img { width: 40px; height: 40px; }
.brand b { font-size: 1.02rem; display: block; }
.brand span { font-size: .72rem; color: var(--nav-muted); font-family: var(--font-body); font-weight: 400; }
/* Ultra-narrow screens: below 370px name + tagline wrap to four stacked
   lines ending in "Tamsweg" twice — show only the club name there
   (measured: everything is single-line from 370px up). The tagline stays
   in the DOM (config injection + tests unaffected). Owner-approved
   2026-07-10. */
@media (max-width: 369px) {
  .brand [data-site="tagline"] { display: none; }
}

.nav-menu ul {
  list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0;
}
.nav-menu a {
  display: block; padding: .55rem .7rem; border-radius: 8px;
  color: var(--nav-text); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.nav-menu a:hover { background: rgba(20, 22, 28, .06); color: var(--heading); }

.nav-actions { display: flex; align-items: center; gap: .4rem; }

/* Icon button (hamburger) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;            /* comfortable tap target */
  background: transparent; color: var(--nav-text);
  border: 1px solid rgba(20, 22, 28, .5); /* 3.4:1 boundary on white (WCAG 1.4.11) */
  border-radius: 10px;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(20, 22, 28, .06); }

.nav-toggle { display: inline-flex; }   /* visible on mobile */
.nav-toggle .bar { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after  { top: 6px; }

/* Mobile menu.
   Without JS the menu simply stays visible in the normal flow (no hamburger).
   With JS (html.js, set by js/head.js) it becomes a collapsible panel:
   closed = clipped AND visibility:hidden so no invisible tab stops remain. */
html:not(.js) .nav-toggle { display: none; }
/* flex-wrap lets the full-width menu actually wrap onto its own row;
   .nav-actions is empty without JS, so drop it (no phantom gap row) */
html:not(.js) .nav { flex-wrap: wrap; }
html:not(.js) .nav-actions { display: none; }
html:not(.js) .nav-menu { width: 100%; }

.js .nav-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  max-height: 0; overflow: hidden;
  visibility: hidden;
  transition: max-height .28s ease, visibility 0s linear .28s;
}
.js .nav-menu[data-open="true"] {
  max-height: 80vh;
  max-height: 80svh;             /* stable unit on mobile URL-bar resize */
  visibility: visible;
  transition: max-height .28s ease, visibility 0s;
  /* landscape phones: 80svh of a 390px-tall screen cannot fit 7 items —
     the panel must scroll or the last entries are unreachable by touch */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-menu ul { flex-direction: column; padding: .5rem 1.25rem 1rem; gap: .1rem; }
.nav-menu a { padding: .7rem .6rem; font-size: 1.05rem; }

/* Social bar in the header (hidden on phones, for space reasons) */
.social--header { display: none; }

/* ===========================================================================
   5) HERO (intro area)
   =========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--dark-bg), var(--dark-bg-2));
  border-bottom: 3px solid var(--accent);
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { padding-block: clamp(2.5rem, 1.75rem + 4vw, 5rem); max-width: 42rem; }

/* Brand logo (Logo 2) on a white panel.
   Mobile: compact letterhead-style card ABOVE the copy (order: -1) — the big
   centered panel below the CTAs hung half below the fold and looked lost.
   Desktop (see section 10): full-size panel in the right-hand hero column. */
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero-brand { order: -1; margin-bottom: 1.75rem; }
.hero-brand img {
  display: inline-block; width: 150px; height: auto;
  background: #fff; border-radius: var(--radius);
  padding: .75rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / .3);
}
.hero h1 { margin-bottom: .35em; color: #fff; }
.hero .lead { margin-bottom: 1.8rem; color: var(--dark-muted); }
.hero .kicker { color: var(--dark-muted); }   /* red fails 4.5:1 on dark */
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ===========================================================================
   6) BUTTONS, CARDS, TABLES, FORM
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .7rem 1.3rem;
  border-radius: 10px; border: 1.5px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--accent); border-color: currentColor; }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-hover); }
.btn--whatsapp { background: var(--wa-bg); color: #fff; }
.btn--whatsapp:hover { background: var(--wa-bg-hover); color: #fff; }
.btn svg { width: 20px; height: 20px; }

/* Gentle motion on real interactive elements only (cards are not links).
   The global reduced-motion block in section 9 neutralizes these. */
.btn, .action-link, .venue-line, .nav-menu a,
.partner-card, .icon-btn, .social a, .disclosure summary {
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
/* hover-capable pointers only: on touch the emulated hover sticks after a
   tap and the button stays visibly lifted */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: none; }

/* Card grid (disciplines) */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card .card-icon {
  width: 46px; height: 46px; color: var(--accent);
  display: grid; place-items: center; margin-bottom: .9rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
}
/* Discipline emblems (cropped from the badge set) instead of a stroke icon:
   larger, no tinted chip — the artwork brings its own white background,
   which blends into the white card. (The stroke-icon svg sizing rule was
   removed 2026-07-10 night: no stroke-icon card exists anymore.) */
.card .card-icon--img { width: 80px; height: 80px; background: none; border-radius: 0; }
.card .card-icon--img img { width: 100%; height: 100%; }
.card h3 { margin-bottom: .4rem; }
.card .jp { font-size: .9rem; color: var(--text-muted); font-style: italic; }
.card .jp:lang(ja) { font-style: normal; }  /* no synthetic-oblique kanji */
.card ul { margin-top: .75rem; margin-bottom: 0; }
/* uniform card bottoms: a trailing <p> must not add its margin on top of
   the card padding (trainer/audience cards ended visibly deeper than
   their ul-terminated siblings) */
.card > :last-child { margin-bottom: 0; }

/* Content layout with image + text (about, location). */
.media { display: grid; gap: 2rem; align-items: start; grid-template-columns: 1fr; }
.media img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.media .figure { margin: 0; }

/* Facts list (Teruo Kono) */
.facts { margin: 1.25rem 0 0; }
.facts div { display: flex; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.facts div:first-child { border-top: 0; }
.facts dt { flex: 0 0 8.5rem; font-weight: 700; color: var(--heading); }
.facts dd { margin: 0; }
/* ultra-narrow screens: the fixed 8.5rem label column starves the value
   column (6-line values at 320px) — stack label over value instead */
@media (max-width: 359px) {
  .facts div { flex-direction: column; gap: .1rem; }
  .facts dt { flex: 0 0 auto; }
}

/* Schedule as one card per training day (no table: needed horizontal
   scrolling on phones and looked sparse on wide screens) */
.schedule-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.schedule-grid h3 { margin-bottom: .5rem; }
.schedule-grid .times { list-style: none; margin: 0; padding: 0; }
.schedule-grid .times li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  /* narrow cards (768px 3-up, 320px phones): the whole badge wraps to its
     own line instead of fracturing the time range after the en-dash */
  flex-wrap: wrap; row-gap: .25rem;
}
.schedule-grid .times li + li { border-top: 1px solid var(--border); }
.schedule-grid .time { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-grid .times .badge { margin-left: auto; } /* right-aligned, wrapped or not */
/* ultra-narrow screens (audit 2026-07-10): "Erwachsene" missed fitting
   beside its time by ~4px at 320px and wrapped to a lone right-aligned
   line while "Kinder" stayed inline — tighten the column gap and badge
   padding just enough to keep time + badge on one line; below ~310px the
   whole-badge wrap fallback above still applies */
@media (max-width: 359px) {
  .schedule-grid .times li { column-gap: .5rem; }
  .schedule-grid .times .badge { padding-inline: .6rem; }
}
/* Venue strip under the day cards (whole bar is one link to #standort) */
.venue-line {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .75rem; padding: .85rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none;
}
.venue-line .venue-place { display: flex; align-items: flex-start; gap: .6rem; flex: 1 1 260px; min-width: 0; }
.venue-line svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: .15rem; }
.venue-line .venue-adresse { color: var(--text); }
.venue-line .venue-cta { margin-left: auto; color: var(--accent); font-weight: 700; white-space: nowrap; }
.venue-line:hover .venue-cta, .venue-line:focus-visible .venue-cta { text-decoration: underline; }
/* Keeps a time range ("18:00–19:00") from breaking after the en-dash when
   it lands at a line end inside running prose (the two .note boxes) */
.no-wrap { white-space: nowrap; }

/* Group badges (schedule day-cards) */
.badge {
  display: inline-block; padding: .25rem .75rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .88rem; font-weight: 600; color: var(--heading); white-space: nowrap;
}
.badge--kinder {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

/* Info box / note */
.note {
  background: var(--surface); border: 1px solid var(--border);
  /* radius matches .card — the notes sit directly under the discipline
     cards in #angebote at identical width */
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 1.25rem 0;
}
.note p:last-child { margin-bottom: 0; }
/* Calm arrow CTA on its own line (same look as .venue-cta) — used instead
   of underlined inline links, which read as noisy mid-paragraph */
.action-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.action-link:hover, .action-link:focus-visible { text-decoration: underline; }

/* Contact layout */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.contact-details { list-style: none; padding: 0; margin: 0; }
.contact-details li { display: flex; gap: .7rem; margin: .6rem 0; align-items: flex-start; }
.contact-details svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: .2rem; }

/* Form */
/* The print-only Anmeldung sheets have .form-row markup but (deliberately)
   no <form> ancestor, so a bare `form .form-row` rule never matches there —
   list both, like the 1fr-1fr pairing rule at ≥700px does. Row-gap 0: each
   .field brings its own 1rem margin; a row-gap on top of it doubled the
   stacked contact form's vertical rhythm below 700px. */
form .form-row, .form-doc .form-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label, .field .field-label { font-weight: 700; color: var(--heading); font-size: .95rem; margin: 0; }
.req { color: var(--accent); }        /* required-field asterisks (fields + consent) */
.field input, .field textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: .7rem .8rem; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
/* Browser-default placeholder gray computes below 4.5:1 in Firefox
   (default opacity .54) — pin color and opacity to the AA-safe muted tone */
.field ::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
/* .form-doc: the print-only Anmeldung sheets carry .hint paragraphs but
   (deliberately) no <form> ancestor — same mismatch the .form-row rule
   above already fixes; without it their hints rendered full-size */
form .hint, .form-doc .hint { font-size: .9rem; color: var(--text-muted); }

/* Required consent (privacy checkbox) */
.consent { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.25rem; }
.consent input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: .1rem; accent-color: var(--accent); } /* 24px target (WCAG 2.5.8) */
.consent label { font-weight: 400; font-size: .95rem; color: var(--text); text-wrap: pretty; } /* no lone * on the last line */

/* Honeypot (spam trap) – invisible to humans */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ===========================================================================
   7) EXTRA COMPONENTS
   =========================================================================== */
/* Values trio (Respect / Discipline / Character) */
.values { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-block: 1.75rem; } /* symmetric air above AND below the trio */
.value { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.value h3 { margin-bottom: .3rem; }
.value p { margin: 0; color: var(--text-muted); }

/* Audience block (the parents' "Respekt & Sicherheit" trust block). The
   "Für wen?" card variant and its .audience-list pills were removed on
   the owner's order (2026-07-10). */
.audiences { margin-top: 2rem; }

/* Two-column layout (e.g. first lesson: bring / expect) */
.cols { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

/* Training photo gallery. Owner review 2026-07-10: keep the ORIGINAL
   layout (stacked on phones, 2 columns from 700px) — a denser grid was
   tried and explicitly rolled back; don't re-propose. */
.gallery-head { margin-top: 2rem; }
/* Group-level sub-headers (erste Stunde, gallery, Respekt-block, Kono bio,
   Trainingsort) get their own step between the h2 and the 1.25rem card
   titles — they were pixel-identical to the card h3s they head. */
.gallery-head, .audiences > h3, .media h3 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.55rem);
}
/* Readable measure for full-width running text (everything inside the
   #verein disclosure — philosophy, club text, Kono bio — plus the
   Respekt-block): 72ch visually matches the 60ch section-head leads;
   boxed text (.card, .note) keeps its border-defined width. */
#verein .bio p,
.audiences p,
.audiences li { max-width: 72ch; }
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* WhatsApp buttons */
.wa-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 1.25rem; }

/* Social media icon bar */
.social { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
/* A deactivated link must not leave an empty flex item behind (double gaps) */
.social li:has(> a[hidden]) { display: none; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--accent); background: var(--surface);
}
.social a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.social a svg { width: 20px; height: 20px; }
/* Social in the dark footer */
.site-footer .social a {
  background: transparent; border-color: rgba(255, 255, 255, .18); color: var(--footer-text);
}
.site-footer .social a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Centered narrow pages (thank-you / 404) — same tightened range as .section */
.center-page { display: grid; place-items: center; text-align: center; min-height: 58vh; padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.25rem); }
/* 760px: wide enough for the h1 at its 3.4rem cap on ONE line on desktop
   (620px forced "Danke für / deine Nachricht!" while phones fit it) —
   the lead keeps its own reading measure */
.center-page .container { max-width: 760px; }
.center-page .lead { max-width: 52ch; margin-inline: auto; }
.center-page .btn { margin-top: .5rem; }


/* Trainer cards: portrait (placeholder SVG for now, real photo later) on
   top, credentials below. The portrait bleeds to the card edges. */
/* Height stability around the bio disclosure (audit fix 2026-07-10, replaces
   the earlier "siblings return to natural height" behavior — that let the
   sibling cards SHRINK below their closed height when Ferenc's bio opened):
   CLOSED, all three cards share one height (default stretch). site.js
   measures that closed height and freezes it as --trainer-card-h; while a
   bio is OPEN the grid switches to align-items:start, so the opened card
   grows alone and the min-height keeps the siblings at EXACTLY their closed
   height — no stretch, no shrink. Fallbacks: without JS the siblings drop
   to natural height while open (old behavior); without :has() they stretch.
   The e2e suite guards both closed equality and the no-stretch/no-shrink
   open state. */
.trainer-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
.trainer-grid:has(details[open]) { align-items: start; }
/* set via CSSOM from site.js only in the 3-column band (unset when stacked) */
.trainer-grid .card { min-height: var(--trainer-card-h, auto); }
.trainer-grid .portrait { margin: -1.5rem -1.5rem 1rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; border-bottom: 1px solid var(--border); }
/* On phones the stacked cards made each portrait ~400px tall (2026-07-10
   page-length pass): cap it and crop gently — real photos will be
   framed the same way. object-position keeps heads in frame.
   Mobile-first default (NOT a max-width:699px block: fractional widths
   like 699.5px under display scaling matched neither query and rendered
   the stacked layout uncropped); the 700px block restores natural size. */
.trainer-grid .portrait img { width: 100%; height: 230px; object-fit: cover; object-position: top center; display: block; }
.trainer-grid .grade { color: var(--text-muted); font-size: .9rem; }

/* Bio disclosures — the shared "Mehr erfahren" pattern (owner decisions
   2026-07-10/11): native <details class="disclosure">, no JS. Used on
   Ferenc's trainer card AND on the whole #verein body (philosophy,
   values trio, club text, Kono bio + facts — compact default since
   2026-07-11). The content opens ONLY via the summary line (on the
   trainer card, photo and name are deliberately not click targets). */
.disclosure summary {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--accent); font-weight: 700; font-size: .92rem;
  /* comfortable tap target: padding grows the hit area, the negative
     margin cancels the visual shift (closed-card height unchanged) */
  padding: .6rem .75rem; margin: -.6rem -.75rem;
}
.disclosure summary:hover, .disclosure summary:focus-visible { text-decoration: underline; } /* same feedback as .action-link */
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: " ▾"; }
.disclosure[open] summary::after { content: " ▴"; }
/* Same glyphs with empty alternative text: keeps the arrow out of the
   summary's accessible name (screen readers announced "abwärts zeigendes
   Dreieck" after the label). Browsers without the slash syntax drop just
   these two declarations and fall back to the plain ones above. */
.disclosure summary::after { content: " ▾" / ""; }
.disclosure[open] summary::after { content: " ▴" / ""; }
/* overflow-wrap: long bio words must wrap inside the fixed minmax(0,1fr)
   trainer tracks instead of overflowing */
.disclosure .bio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); overflow-wrap: break-word; }
/* Narrow trainer columns only: German hyphenation (lang="de-AT") instead
   of the bare mid-word break ("Selbstverteidigungst/raining" at 700-849px)
   — the minimal scoped fix chosen in the 2026-07-11 decision round (NOT a
   broad site-wide hyphens rule; the recorded owner dislike concerns
   HEADINGS). Wide columns (#verein) never trigger it and at stacked
   widths the words fit whole, so the rule is band-limited by nature.
   Owner veto = delete this one rule. */
.trainer-grid .bio { hyphens: auto; }
.disclosure .bio p:last-child { margin-bottom: 0; }

/* Partner / sponsor cards: the whole card is the link */
.partner-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.partner-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; text-align: center; padding: 1.75rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--text);
}
.partner-card:hover, .partner-card:focus-visible { border-color: var(--border-strong); }
/* Fixed-height logo zone so all captions start on the same line across the
   row. Logo heights inside it are balanced by eye, not equal: the almost-
   square Bushido mark needs more height than the wide Samson wordmark, and
   90px renders the 269x180 Bushido source pixel-perfect on 2x retina. The
   wide Tischler lockup mainly follows the card width; its max-height only
   caps it on extra-wide cards. */
.partner-logo { display: flex; align-items: center; justify-content: center; height: 100px; width: 100%; }
.partner-logo img { max-height: 72px; width: auto; max-width: 100%; }
.partner-logo--tall img { max-height: 90px; }
.partner-logo--light img { max-height: 88px; }
.partner-card .partner-role { font-size: .9rem; color: var(--text-muted); }

/* Anmeldeformular (anmeldung-*.html): filled in the browser, printed to PDF.
   Reuses the .field/.consent form styles; print rules in section 11.
   Document design language (redesign 2026-07-17): the sheet reads as one
   branded document — sheet card on screen, centered letterhead with the
   Japanese dojo name, title over a red rule, red-bar section heads, boxed
   print fields. Red is carried by TEXT and BORDERS only, so a b/w printout
   degrades to clean greys (browsers don't print backgrounds by default). */
.form-doc .container {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2rem clamp(1.25rem, 4vw, 2.75rem) 2.5rem;
}
.form-doc .letterhead { margin: .5rem 0 .4rem; text-align: center; }
/* multiply blends the logo's baked-in white ground into the warm page
   tone (no visible white box); print body is #fff, so print is unchanged.
   margin-inline centers the logo: the base reset makes img display:block,
   so the paragraph's text-align:center only reaches the kanji TEXT line */
.form-doc .letterhead img { width: 132px; height: auto; margin-inline: auto; mix-blend-mode: multiply; }
/* text-indent compensates the trailing letter-space, keeping the kanji
   optically centered */
.letterhead-kanji {
  text-align: center; color: var(--text-muted);
  font-size: .95rem; letter-spacing: .3em; text-indent: .3em;
  margin: 0 0 1.9rem;
}
.form-doc h1 {
  text-align: center;
  padding-bottom: .55rem; margin-bottom: 1.1rem;
  border-bottom: 3px solid var(--accent);
}
.form-doc .lead { text-align: center; max-width: 34rem; margin-inline: auto; }
/* h2 top margin comes from .legal h2 (2.5rem) — both sheets carry both
   classes, and the later .legal rule wins at equal specificity */
.form-doc h2 {
  border-left: 4px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding: .05rem 0 .4rem .65rem;
}
.form-doc .consent label { font-size: .92rem; }
.form-doc .form-foot {
  margin-top: 2.5rem; padding-top: .8rem;
  border-top: 1px solid #999; text-align: center;
}
/* Signature pad (canvas, revealed by JS) + plain-line fallback */
.sig-pad {
  display: block; width: 100%; max-width: 520px; height: auto;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 10px; touch-action: none; cursor: crosshair;
}
#unterschrift-linie { height: 88px; max-width: 520px; border-bottom: 1px solid var(--border-strong); }
/* Print-only content (e.g. the club identity line on the printed form) */
.print-only { display: none; }

/* ===========================================================================
   8) FOOTER & LEGAL PAGES
   =========================================================================== */
.site-footer {
  background: var(--footer-bg); color: var(--footer-text);
  padding-block: 2.5rem; margin-top: 2rem;
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.footer-grid .footer-head { margin-top: 0; color: #fff; font-family: var(--font-body); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: .3rem 0; }
.footer-grid .social { margin-top: 1rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 2rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .88rem; color: var(--dark-muted);
}

/* Legal pages (imprint/privacy) – calm reading column */
.legal { padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem); }
.legal .container { max-width: 760px; }
/* document pages: leads are body paragraphs here, not hero lines —
   `balance` shortened them into stubby heading-like lines */
.legal .lead { text-wrap: pretty; }
/* Document pages carry the longest headline words ("Datenschutzerklärung",
   "Unternehmensgegenstand", "Erziehungsberechtigte:r") — slightly smaller,
   calmer headings so every word wraps whole instead of breaking mid-word.
   The second min() argument caps the size against the actual viewport:
   the divisor is the longest word's width in em (h1 "Datenschutzerklärung"
   ≈ 10.04em, h2 "Unternehmensgegenstand" ≈ 11.95em) and the subtracted
   3.5rem is the container padding (2.5rem) plus a deliberate ~1rem safety
   margin for scrollbars/rounding — so the h1 cap already engages a touch
   below the rem floor between 320-340px (~5% smaller, intentional). This
   keeps the words fitting even below 320px or with an enlarged browser
   font-size — cases where a rem-only floor would overflow and fragment. */
.legal h1 { font-size: min(clamp(1.7rem, 1.1rem + 3vw, 3rem), calc((100vw - 3.5rem) / 10.2)); }
.legal h2 { font-size: min(clamp(1.35rem, .95rem + 2vw, 2rem), calc((100vw - 3.5rem) / 12.1)); }
.legal h2 { margin-top: 2.5rem; }
.legal .placeholder {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: .15rem .45rem; color: var(--heading); font-weight: 700;
  display: inline-block; /* wraps as one chip, never fragments mid-border */
}
.legal .editor-note {
  background: var(--surface-2); border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-sm); padding: .85rem 1rem; margin: 1rem 0;
  font-size: .92rem; color: var(--text-muted);
}
.back-link { display: inline-block; margin-bottom: 1.5rem; font-weight: 700; }

/* ===========================================================================
   9) ACCESSIBILITY
   =========================================================================== */
/* "Skip to content" link – only visible on keyboard focus */
.skip-link {
  position: absolute; left: .5rem; top: -3rem; z-index: 100;
  background: var(--btn-bg); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* clearly visible keyboard focus (no border-radius here: it would override
   each element's own radius and snap button corners while focused) */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* the red ring drops below 3:1 against the dark hero gradient — use white there */
.hero :focus-visible { outline-color: #fff; }

/* screen-reader only (visually hidden) — used for "(öffnet in neuem Tab)" hints */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* reduce motion when the system asks for it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;   /* also kills the .28s visibility delay of the menu */
  }
}


/* ===========================================================================
   10) RESPONSIVE – larger screens (mobile-first: the extras come here)
   =========================================================================== */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; }
  /* minmax(0,1fr): plain 1fr tracks resize when the OPEN bio's long words
     raise the column's min-content (700-849px band; audit fix 2026-07-10
     night) — the fixed tracks + .disclosure .bio overflow-wrap keep all
     three column widths stable while a bio is open */
  .trainer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3-up cards: portraits back to natural aspect (the 230px crop is the
     stacked-layout default below) */
  .trainer-grid .portrait img { height: auto; object-fit: unset; object-position: unset; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); }
  .cols { grid-template-columns: 1fr 1fr; }
  /* link columns never drop below their longest label ("Anmeldung
     Erwachsene" wrapped at 768px); ≥900px this computes identically
     to the old 2fr 1fr 1fr */
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(max-content, 1fr) minmax(max-content, 1fr); }
  form .form-row, .form-doc .form-row { grid-template-columns: 1fr 1fr; }
  .social--header { display: flex; }
}

@media (min-width: 900px) {
  /* Hero: copy left, large brand logo right (order back to source order) */
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; max-width: none; }
  .hero-copy { max-width: 42rem; }
  .hero-brand { order: 0; margin-bottom: 0; }
  .hero-brand img { width: 320px; padding: 1.3rem; box-shadow: 0 12px 32px rgb(0 0 0 / .35); }

  /* Two columns only with an image present — a lone text child (e.g.
     #verein until its photo exists) must keep the full width instead of
     being squeezed into a half-empty grid */
  .media:has(.figure) { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  /* #standort/#kontakt composition (audit fix 2026-07-10, supersedes the
     short-lived vertical centering from the same day's design pass): the
     section head sits INSIDE the text column (see index.html), so the text
     column and the map/form start on one top line and the columns come out
     nearly equal — no dead zone right of the heading, no floating address
     block. Top alignment is what makes the integrated head work; #verein's
     .media keeps its own align-items:start from the base rule. */
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  /* Three partner cards in one row; between 700px and here the 2-col rule wraps them 2+1 */
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Two discipline cards since 2026-07-10 — the grid stays 2 columns from
   700px up (a 4-column track would leave half the row empty). */

/* Three partner cards in the 2-column band (700-899px) wrapped 2+1 with an
   empty hole; a lone last card spans the full second row instead. The
   :nth-child(odd) guard keeps a future 4th partner wrapping 2+2; the
   900px block resets the span, so no fractional-width gap exists. */
@media (min-width: 700px) {
  .partner-grid > .partner-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .partner-grid > .partner-card:last-child:nth-child(odd) { grid-column: auto; }
}

@media (min-width: 1240px) {
  /* Horizontal navigation – the hamburger disappears. 1240px (not 900px)
     because brand + 7 nav items measure ~1142px and need slack; below this
     the mobile hamburger simply persists. */
  .nav-toggle { display: none; }
  .nav-menu, .js .nav-menu, .js .nav-menu[data-open="true"], html:not(.js) .nav-menu {
    position: static; max-height: none; overflow: visible;
    visibility: visible; transition: none;
    background: transparent; border: 0; width: auto;
  }
  .nav-menu ul { flex-direction: row; padding: 0; gap: .15rem; }
  .nav-menu a { padding: .55rem .7rem; font-size: .98rem; }
}

/* ===========================================================================
   11) PRINT — mainly for the legal pages (Impressum / Datenschutzerklärung)
   =========================================================================== */
@media print {
  .site-header, .site-footer, .skip-link, .back-link, .hero-cta, .wa-buttons,
  .print-hide { display: none; }
  body { background: #fff; color: #000; }
  /* Browsers don't print backgrounds — light-on-dark text must flip to black */
  .hero { background: none; }
  .hero h1, .hero .lead, .hero .kicker { color: #000; }
  .btn { background: none; color: #000; border: 1px solid #000; }
  .section, .legal { padding-block: 0; }
  a { color: inherit; }
  /* the screen-state frozen card height (site.js) must not pad the print */
  .trainer-grid .card { min-height: 0; }

  /* Anmeldeformular: typed values print in boxed fields (document redesign
     2026-07-17, supersedes the underline treatment; the box gives hand-
     writers a defined area and matches the on-screen look) */
  @page { margin: 18mm 16mm; }
  .form-doc .field input, .form-doc .field textarea {
    border: 1px solid #767d8a; border-radius: 6px;
    background: #fff; color: #000; padding: .3rem .5rem; min-height: 2.1rem;
  }
  .form-doc .field textarea { resize: none; min-height: 84px; }
  /* the sheet card is a screen-only decoration — without this reset it
     would print a frame around the whole A4 page (same leak class as the
     700px form-row trap below) */
  .form-doc .container {
    background: #fff; border: 0; border-radius: 0;
    box-shadow: none; padding: 0;
  }
  /* Compact print rhythm: the boxed fields are taller than the old
     underlines, and the un-tightened sheet ran to four pages with the
     club-identity line orphaned alone on the last one — these overrides
     keep every sheet at three pages, footer on the signature page */
  .form-doc .letterhead { margin: 0 0 .2rem; }
  .form-doc .letterhead img { width: 96px; }
  .letterhead-kanji { font-size: .85rem; margin-bottom: 1rem; }
  .form-doc h1 { font-size: 1.6rem; padding-bottom: .4rem; margin-bottom: .7rem; }
  .form-doc .lead { font-size: .95rem; }
  .form-doc h2 { margin-top: 1.4rem; font-size: 1.2rem; }
  .form-doc .field input { min-height: 1.9rem; }
  .form-doc .form-foot { margin-top: 2rem; }
  .form-doc .field, .form-doc .consent { break-inside: avoid; margin-bottom: .7rem; }
  /* the A4 page box (~794px) matches the 700px query above — keep every
     PRINTED .form-row single-column, pairing is screen-only (the contact
     form was still printing 2-column; audit fix 2026-07-10 night) */
  form .form-row, .form-doc .form-row { grid-template-columns: 1fr; }
  .form-doc h2 { break-after: avoid; }
  .print-only { display: block; }
  /* Signature: the drawn ink prints above a plain line; an empty pad
     prints as a blank line for handwriting. The pad prints SMALLER than
     its 520px screen size (Adam, PR-15 preview: the empty 150px-tall
     canvas read as a broken void between label and line) — max-width
     scales the height along the canvas's intrinsic 520:150 ratio, so
     drawn ink shrinks uniformly, never distorts. ~340px ≈ a 9cm
     signature line with ~2.6cm of writing room. The screen pad stays
     520px (settled owner decision — untouched here). */
  .sig-pad { border: 0; border-bottom: 1px solid #000; border-radius: 0; max-width: 340px; }
  #unterschrift-linie { border-bottom-color: #000; max-width: 340px; height: 64px; }
  /* label, fields and line form one block — never split across pages */
  .sig-block { break-inside: avoid; }
}