/* Sandokai Karate Dojo Bern
   Farben und Proportionen aus dem Entwurf Sandokai_0.1.ai (Zeichenfläche 1920 pt) */

:root {
  --rot:        #9C1116;   /* Flächen und Schrift */
  --rot-logo:   #9C1006;   /* das Signet – bewusst ein eigener Ton */
  --rot-dunkel: #7E0D11;
  --grund:      #F6F6F6;
  --text:       #333333;
  --text-leise: #6B6B6B;
  --linie:      #D7D7D7;
  --hero-text:  #BDBCBC;   /* Vollton aus dem Entwurf – bewusst nicht weiss */
  --hero-leise: #BDBCBC;

  --spalte-nav: 340px;
  --spalte-sig: 52px;
  --bahn:       1100px;
  --luft:       48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Signet (Kalligrafie als Maske, daher frei einfärbbar) ---------- */

.signet {
  display: block;
  background-color: currentColor;
  -webkit-mask: url("logo.svg") no-repeat center / contain;
          mask: url("logo.svg") no-repeat center / contain;
}

/* Seitenverhältnis des Signets: 47.36 : 359.98 = 1 : 7.6 (im Browser gemessen) */
.signet-gross { width: 62px;             aspect-ratio: 1 / 7.6; color: var(--hero-text); margin: 0 auto; }
.signet-klein { width: var(--spalte-sig); aspect-ratio: 1 / 7.6; color: var(--rot-logo); }

/* ---------- Hero ---------- */

.hero {
  background: var(--rot);
  color: var(--hero-text);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 64px 24px;
  text-align: center;
}

.hero-inhalt > * { margin: 0 auto; }

.hero-name {
  margin-top: 56px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
}

.hero-untertitel { font-size: 26px; font-weight: 400; }

.hero-jahr {
  margin-top: 4px;
  font-size: 15px;
  color: var(--hero-leise);
}

.hero-nav {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 22px;
}

.hero-nav a {
  color: var(--hero-text);
  text-decoration: none;
  padding: 2px 0;
}

.hero-nav a:hover,
.hero-nav a:focus-visible { color: #D9D8D8; }

.hero-nav a:last-child { margin-top: 22px; }

/* ---------- Bühne: Inhalt links, Signet und Navigation rechts ---------- */

.buehne {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spalte-sig) var(--spalte-nav);
  gap: 0 var(--luft);
  align-items: start;
}

main { grid-column: 1; }

.seitenleiste {
  grid-column: 2 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--spalte-sig) var(--spalte-nav);
  gap: var(--luft);
  position: sticky;
  top: 72px;
  padding-top: 96px;
}

.nav-titel {
  margin: 0 0 18px;
  color: var(--rot);
  font-weight: 700;
}

.hauptnav ul { margin: 0; padding: 0; list-style: none; }

.hauptnav li { border-bottom: 1px solid var(--linie); }

.hauptnav li:first-child { border-top: 1px solid var(--linie); }

.hauptnav a {
  display: block;
  padding: 5px 0;
  color: var(--rot);
  text-decoration: none;
}

.hauptnav a:hover,
.hauptnav a:focus-visible { color: var(--rot-dunkel); }

.hauptnav a[aria-current="true"] { font-weight: 700; }

/* ---------- Abschnitte ---------- */

section {
  padding: 96px 0 0;
  scroll-margin-top: 48px;
  max-width: 34em;
}

section:last-of-type { padding-bottom: 120px; }

h1, h2 {
  margin: 0 0 1.4em;
  font-size: 17px;
  font-weight: 700;
  color: var(--rot);
}

h3 {
  margin: 2em 0 .3em;
  font-size: 17px;
  font-weight: 700;
  color: var(--rot);
}

p { margin: 0 0 1.4em; }

a { color: var(--rot); text-decoration-color: rgba(156, 17, 22, .35); text-underline-offset: .15em; }
a:hover { text-decoration-color: var(--rot); }

/* Begriffe im Fliesstext bleiben wie im Entwurf ohne Unterstreichung */
.begriff { color: var(--rot); font-weight: 400; text-decoration: none; }
a.begriff:hover { text-decoration: underline; text-underline-offset: .15em; }

address a { text-decoration: none; }
address a:hover { text-decoration: underline; }

.fakten {
  display: grid;
  grid-template-columns: minmax(5.5em, max-content) 1fr;
  gap: .2em 1.4em;
  margin: 1.4em 0;
}

.fakten dt { font-weight: 400; color: var(--text-leise); }
.fakten dd { margin: 0; }

/* Lange Bezeichnungen stehen wie im Entwurf über dem Wert, nicht daneben */
.fakten--gestapelt { display: block; }
.fakten--gestapelt dt { font-weight: 700; color: var(--text); margin-top: .8em; }
.fakten--gestapelt dt:first-child { margin-top: 0; }

.liste, .regeln { margin: 0 0 1.4em; padding-left: 1.2em; }
.liste { list-style: none; padding-left: 0; }
.liste li::before { content: "– "; color: var(--text-leise); }

.regeln li { margin-bottom: .55em; }

/* Originaltext nach dem Shoto Nijukun (shotokai.jp) – Mincho setzt den
   klassischen Lehrtext gegen die Grotesk der Seite ab */
.kun {
  display: block;
  margin-top: .1em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho", serif;
  font-size: 15px;
  color: var(--text-leise);
}

/* Wo der deutsche Text zwei Zeilen füllt, schliesst das Original hinten an,
   statt eine dritte Zeile zu beginnen */
.kun-fluss { display: inline; margin: 0 0 0 .7em; }

/* Wörter, die am Bindestrich nicht umbrechen sollen */
.zusammen { white-space: nowrap; }

.person { margin-bottom: 1.4em; }
.person-name { margin: 0; font-weight: 700; }
.person-zeile { margin: 0; color: var(--text-leise); }

.silben { margin-top: 2em; }

address { font-style: normal; margin-bottom: 1.4em; }

/* Stellen, die vor dem Aufschalten inhaltlich geprüft werden müssen */
.pruefen {
  border-left: 3px solid var(--rot);
  padding: .4em 0 .4em .8em;
  color: var(--text-leise);
  font-size: 15px;
}

/* ---------- Anmeldung ---------- */

.knopf {
  display: inline-block;
  border: 1px solid var(--rot);
  color: var(--rot);
  text-decoration: none;
  padding: .5em 1.4em;
  margin: .4em 0 1em;
}

.knopf:hover,
.knopf:focus-visible { background: var(--rot); color: #fff; }

.hinweis {
  color: var(--text-leise);
  font-size: 15px;
}

/* ---------- Fuss ---------- */

footer {
  border-top: 1px solid var(--linie);
  padding: 28px 24px;
  text-align: center;
  color: var(--text-leise);
  font-size: 15px;
}

/* ---------- Schmalere Bildschirme ---------- */

@media (max-width: 1000px) {
  :root { --spalte-nav: 260px; --luft: 32px; }
}

@media (max-width: 760px) {
  .buehne {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 20px;
  }
  main { grid-column: 1; grid-row: 2; }
  .seitenleiste {
    grid-column: 1;
    grid-row: 1;
    position: static;
    grid-template-columns: 40px 1fr;
    gap: 24px;
    padding-top: 56px;
  }
  .signet-klein { width: 40px; }
  section { padding-top: 64px; max-width: none; }
  .hero-name { font-size: 26px; }
  .hero-untertitel { font-size: 22px; }
  .hero-nav { font-size: 19px; }
  .signet-gross { width: 52px; }

  /* Schriftgrad wie auf der 375-pt-Zeichenfläche des Entwurfs: Inhalt 15 pt.
     Der Kleintext zieht proportional mit (Desktop 17:15), sonst stünde er
     gleich gross wie der Fliesstext. */
  body { font-size: 15px; }
  h1, h2, h3 { font-size: 15px; }
  .kun, .pruefen, .hinweis, footer { font-size: 13px; }
}

@media (max-width: 460px) {
  .seitenleiste { grid-template-columns: 32px 1fr; }
  .signet-klein { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}