/* ==========================================================================
   Chinesisch-Deutsches Zentrum e.V. — Design-System  „Song & Tang“
   Song-Grundstruktur, Tang-Akzente: Xuan-Papier, tiefe Tusche, Celadon als
   Primärfarbe – und die Tang-Palette (Zinnober, Gold, Azurit, Malachit) als
   sparsame Akzente. Zinnober trägt die Handlung (CTA) und das Siegel.
   Zierrat nach Song-Vorbild: Haitang-Bogen (海棠) und Fischschuppen (魚鱗).
   Zweisprachige Kulturinstitution: editorial, ruhig, seriös. Mobile-First.
   Schriften selbst gehostet (DSGVO): Petrona (Display) · Hanken Grotesk (Text).
   ========================================================================== */

/* --- Schriften (selbst gehostet) ---------------------------------------- */
@font-face {
  font-family: "Petrona"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/petrona-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: "Petrona"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/petrona-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: "Petrona"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/petrona-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: "Petrona"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/petrona-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: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-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: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-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;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* --- 1. Grundstruktur (Song) ------------------------------------------ */
  --paper:      #f2f0e7;   /* Xuan-Papier – Grund */
  --paper-deep: #e8e0cf;   /* Elfenbein – abgesetzte Sektionen */
  --surface:    #fbfaf5;   /* Porzellanweiß – Karten, hellste Fläche */
  --surface-2:  #f2f0e7;
  --ink:        #252a28;   /* Tiefe Tusche – Text */
  --ink-soft:   #4d5854;   /* Fließtext, gedämpft (aus Tusche + Celadon) */
  --ink-faint:  #5c6561;   /* Captions, Meta – trägt über .small echten Fließtext
                              und muss darum auch auf Elfenbein AA halten (4.6:1). */
  --line:       #c8c9be;   /* Stein-Grau – Rahmen */
  --line-soft:  #ddded4;

  /* Celadon = Primärfarbe: Verweise, Navigation, Marke */
  --celadon:       #36554d;
  --celadon-deep:  #27403a;   /* Überfahren */
  --celadon-light: #a9bbb3;   /* helles Celadon – Flächen, Tinten auf Dunkel */
  --mist:          #5c7276;   /* Nebelblaugrün – Sekundärfarbe */

  /* --- 2. Akzente (Tang) ------------------------------------------------- */
  /* Zinnober trägt die Handlung: Knöpfe, Siegel, aktive Marke. */
  --seal:       #a52a24;   /* Zinnoberrot – CTA */
  --seal-deep:  #841f1a;   /* Dunkler Zinnober – Überfahren */
  --seal-bright:#c4382f;   /* Siegelglanz */
  /* Schrift auf Zinnober. Zinnober bleibt in beiden Schemata rot, also darf
     diese Farbe NICHT mit dem Schema kippen – sonst stünde im Dunkelmodus
     tiefe Tusche auf Rot. Wird im Dunkelmodus bewusst nicht überschrieben. */
  --on-seal:    #fbfaf5;

  --gold:       #c58a26;   /* Tang-Gold – Zierlinien, Metall */
  --gold-light: #f2d28b;   /* Goldbeige – Glanz auf Dunkel */
  --gold-deep:  #8f6115;   /* Schattenseite der Goldstange */
  --azurit:     #245a78;   /* Azuritblau */
  --malachit:   #3f7251;   /* Malachitgrün */

  /* Dunkle Bühne (nur noch der Footer) */
  --stage:      #252a28;   /* Tiefe Tusche */
  --stage-ink:  #f2f0e7;   /* Text auf Dunkel = Xuan-Papier */
  --stage-soft: #a9bbb3;   /* helles Celadon */

  /* --- Zierrat (Song-Vorbild) -------------------------------------------
     Haitang (海棠): vier Blattbögen an den Achsen, vier Spitzen in den
     Diagonalen – die Fensterform der Song-Architektur. Einmal als Fläche
     (Maske), einmal als Kontur (das Echo im Inneren).
     Fischschuppen (魚鱗): das Gittermuster der Trennwand, als leiser Grund. */
  /* Vier Halbbögen, Spitzen bei 24/76, Scheitel bei 2 – Radius 26.4 stellt die
     Spitze auf ~71°. Flacher (r 32) verschwimmt die Form bei 56px zum Klecks,
     spitzer (reiner Vierpass, r 25) kippt sie zum Kleeblatt. */
  --haitang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 24A26.4 26.4 0 0 1 76 24A26.4 26.4 0 0 1 76 76A26.4 26.4 0 0 1 24 76A26.4 26.4 0 0 1 24 24Z' fill='%23000'/%3E%3C/svg%3E");
  --haitang-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 24A26.4 26.4 0 0 1 76 24A26.4 26.4 0 0 1 76 76A26.4 26.4 0 0 1 24 76A26.4 26.4 0 0 1 24 24Z' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 24A12 12 0 0 1 24 24'/%3E%3Cpath d='M-12 12A12 12 0 0 1 12 12'/%3E%3Cpath d='M12 12A12 12 0 0 1 36 12'/%3E%3C/g%3E%3C/svg%3E");

  --radius: 12px;
  --radius-s: 7px;
  --shadow: 0 1px 2px rgba(37,42,40,.05), 0 14px 34px -18px rgba(37,42,40,.28);
  --shadow-soft: 0 1px 2px rgba(37,42,40,.04);
  --maxw: 1140px;
  --measure: 66ch;

  --display: "Petrona", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", "Avenir Next", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  --han: "Songti TC", "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", var(--display);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.65rem); }
h3 { font-size: 1.24rem; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; font-weight: 700; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }
.zh, [lang="zh-Hant"] { font-family: var(--han); font-weight: 500; }
h1 .zh, h2 .zh { color: var(--celadon); font-size: .78em; margin-left: .35rem; letter-spacing: 0; }

a { color: var(--celadon); text-decoration: none; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--celadon) 42%, transparent); }
a:hover { color: var(--ink); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; z-index: 220; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Das Siegel (Signatur) ---------------------------------------------- */
/* Zinnober-Stempel „華德“ – die einzige rote Marke der Seite.
   Nur das Textsiegel (Sprachwahl-Startseite, kein Logo-Bild) trägt die
   Zinnoberfläche; das Logo selbst ist bereits eine eigenständige Marke
   und bekommt keinen zusätzlichen Rahmen. */
.seal, .footer-seal, .brand-seal:not(:has(img)) {
  --seal-size: 46px;
  width: var(--seal-size); height: var(--seal-size); flex: none;
  display: grid; place-items: center; position: relative;
  background: linear-gradient(150deg, var(--seal-bright), var(--seal));
  border-radius: 5px; color: var(--on-seal);
  font-family: var(--han); font-weight: 700; line-height: .96;
  letter-spacing: -.04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 3px rgba(37,42,40,.25);
}
.brand-seal {
  --seal-size: 46px;
  width: var(--seal-size); height: var(--seal-size); flex: none;
  display: grid; place-items: center; font-size: 0;
}
.brand-seal:not(:has(img)) { font-size: calc(var(--seal-size) * .32); }
.brand-seal img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Kopf: „Die Montierung“ (裱) -----------------------------------------
   Der Kopf ist der Himmelrand eines Hängerollbilds: Marke links, Dienstleiste
   rechts, darunter die Navigation – und unten die Goldstange, an der die ganze
   Seite hängt. Über die Stange läuft beim Lesen eine Zinnoberspur mit.
   Beim Scrollen verdichtet sich der Kopf (Beizeile weg, Siegel kleiner). */
.site-header {
  position: sticky; top: 0; z-index: 210;
  --header-pad: .8rem;
  --rod-fill: 0%;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.35) blur(12px); backdrop-filter: saturate(1.35) blur(12px);
  border-bottom: 0;
  transition: box-shadow .35s ease;
}
.site-header::after {                     /* die Stange + Zinnoberspur */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background:
    linear-gradient(90deg, var(--seal) var(--rod-fill), transparent var(--rod-fill)),
    linear-gradient(180deg, var(--gold-light), var(--gold) 46%, var(--gold-deep));
  box-shadow: 0 1px 0 rgba(37,42,40,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.site-header.is-stuck { box-shadow: 0 14px 30px -26px rgba(37,42,40,.75); }

.header-inner {
  display: grid; align-items: center; gap: 0 .9rem;
  grid-template-columns: 1fr auto auto auto;
  padding: var(--header-pad) 1.5rem calc(var(--header-pad) - .15rem);
  max-width: var(--maxw); margin: 0 auto;
  transition: padding .3s ease;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-seal { --seal-size: 44px; transition: width .3s ease, height .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  /* Siegeldruck: die Marke gibt beim Überfahren kurz nach, als würde ein
     Stempel angesetzt, und federt zurück. */
  .brand-seal { transition: width .3s ease, height .3s ease, transform .18s cubic-bezier(.3,.6,.3,1); }
  .brand:hover .brand-seal, .brand:focus-visible .brand-seal { transform: scale(.92) rotate(-2deg); }
}
.brand-name {
  position: relative; padding-left: .95rem;
  font-family: var(--display); font-weight: 500; font-size: 1.08rem; line-height: 1.2;
  color: var(--ink); letter-spacing: -.012em;
}
.brand-name::before {                     /* Haarlinie der Zeitungskopf-Zeile */
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 1px;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--gold) 60%, transparent) 22%,
    color-mix(in srgb, var(--gold) 60%, transparent) 78%, transparent);
}
.brand-name small {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--sans); font-weight: 600; font-size: .66rem;
  color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase;
  margin-top: .3rem; max-height: 2rem; overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease;
}
.brand-name small [lang="zh-Hant"] {
  font-family: var(--han); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: none; color: var(--celadon);
}
.brand-name small i { flex: none; width: 1px; height: 11px; background: var(--line); }
html[lang="zh-Hant"] .brand-name { font-family: var(--han); letter-spacing: .04em; }
html[lang="zh-Hant"] .brand-name small { text-transform: none; letter-spacing: .03em; font-size: .7rem; }

.site-header.is-stuck { --header-pad: .5rem; }
.site-header.is-stuck .brand-seal { --seal-size: 36px; }
.site-header.is-stuck .brand-name small { max-height: 0; opacity: 0; margin-top: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; width: 40px; height: 40px;
  background: none; border: 0; border-radius: 8px; padding: 0; cursor: pointer;
}
.nav-toggle:hover { background: var(--paper-deep); }
.nav-toggle:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.nav-toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Schublade (Mobile-Nav) – Aufbau angelehnt an das „Sheet“-Muster
   (fixiertes Panel + abgedunkelter Hintergrund), auf reines CSS/JS übertragen. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 195; background: rgba(21,26,24,.5);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.nav-scrim.open { opacity: 1; visibility: visible; }
/* .site-header hat backdrop-filter, das sonst einen eigenen Containing Block
   für die fixierten Kind-Elemente (Schublade, Scrim) aufspannt – dadurch würden
   sie auf die Kopfzeilenhöhe statt auf das Viewport begrenzt. Während die
   Schublade offen ist, kurz deaktivieren. */
.site-header:has(.site-nav.open) { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 999px) {
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width: min(84vw, 340px); background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 40px rgba(21,26,24,.2);
    padding: 5rem 0 2rem; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.32,.72,0,1), visibility .35s;
  }
  .site-nav.open { transform: translateX(0); visibility: visible; }
  .site-nav ul { list-style: none; display: flex; flex-direction: column; padding: 0 .5rem; }
  .site-nav li { border-bottom: 1px solid var(--line-soft); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav li {
    opacity: 0; transform: translateX(14px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .site-nav.open li { opacity: 1; transform: none; }
  .site-nav.open li:nth-child(1) { transition-delay: .05s; }
  .site-nav.open li:nth-child(2) { transition-delay: .09s; }
  .site-nav.open li:nth-child(3) { transition-delay: .13s; }
  .site-nav.open li:nth-child(4) { transition-delay: .17s; }
  .site-nav.open li:nth-child(5) { transition-delay: .21s; }
  .site-nav.open li:nth-child(6) { transition-delay: .25s; }
  .site-nav.open li:nth-child(7) { transition-delay: .29s; }
  .site-nav.open li:nth-child(8) { transition-delay: .33s; }
  .site-nav.open li:nth-child(9) { transition-delay: .37s; }
  .site-nav a {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1.1rem; color: var(--ink);
    font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  }
  .site-nav a:hover { color: var(--celadon); background: var(--paper-deep); text-decoration: none; }
  .site-nav a[aria-current="page"] { color: var(--seal); font-weight: 600; }
  .site-nav a[aria-current="page"]::before {
    content: ""; width: 7px; height: 7px; border-radius: 2px; flex: none;
    background: var(--seal); transform: rotate(45deg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  }
}

/* Dienstleiste: Sprache + Farbschema als eine Gruppe, durch Haarlinie getrennt */
.lang-switch { display: flex; align-items: center; gap: .1rem; font-size: .8rem; font-weight: 600;
  font-family: var(--sans); }
.lang-switch a, .lang-switch span { position: relative; padding: .34rem .5rem .42rem;
  color: var(--ink-faint); letter-spacing: .04em; }
.lang-switch [lang="zh-Hant"] { font-family: var(--han); font-size: .88rem; letter-spacing: .06em; }
.lang-switch a::after, .lang-switch [aria-current="true"]::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .14rem; height: 1.5px;
  border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.lang-switch a:hover { color: var(--ink); text-decoration: none; }
.lang-switch a:hover::after { transform: scaleX(1); }
.lang-switch [aria-current="true"] { color: var(--ink); font-weight: 700; }
.lang-switch [aria-current="true"]::after { transform: scaleX(1); }

.theme-toggle { margin-left: .5rem; }
.theme-toggle::before {
  content: ""; position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: var(--line);
}

@media (max-width: 700px) {
  /* Der lange Vereinsname bricht auf schmalen Schirmen in drei Zeilen und
     treibt die Kopfhöhe auf. Dort trägt das Siegel allein – der Name steht
     im Alternativtext des Logos und bleibt vorlesbar. */
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .brand-seal { --seal-size: 42px; }
}
@media (max-width: 420px) {
  .header-inner { gap: .35rem; padding: var(--header-pad) 1rem; }
  .lang-switch { gap: 0; font-size: .75rem; }
  .lang-switch a, .lang-switch span { padding: .3rem .35rem .38rem; }
  .lang-switch a::after, .lang-switch [aria-current="true"]::after { left: .35rem; right: .35rem; }
}

@media (min-width: 1000px) {
  .header-inner {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand .   lang theme"
      "nav   nav nav  nav";
  }
  .brand { grid-area: brand; }
  .lang-switch { grid-area: lang; }
  .theme-toggle { grid-area: theme; }
  .site-nav { grid-area: nav; }
  .nav-toggle, .nav-scrim { display: none; }

  /* Navigation als gesetzte Zeile: Serifen, weite Spatien, keine Kacheln.
     Überfahren zieht eine Goldlinie, die aktuelle Seite trägt das Siegel. */
  .site-nav { display: block; margin-top: .5rem; padding-top: .1rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
  .site-nav ul { list-style: none; display: flex; flex-wrap: wrap;
    gap: 0 clamp(.9rem, 2.2vw, 1.95rem); padding: 0; margin: 0; }
  .site-nav a { position: relative; display: block; padding: .7rem .1rem 1.05rem;
    font-family: var(--display); font-weight: 500; font-size: 1.02rem; letter-spacing: -.006em;
    color: var(--ink); }
  .site-nav a::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: .62rem; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
  }
  .site-nav a:hover { color: var(--celadon); text-decoration: none; }
  .site-nav a:hover::before { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .site-nav a[aria-current="page"]::before { display: none; }
  .site-nav a[aria-current="page"]::after {   /* das Siegel unter der Signatur */
    content: ""; position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 2px;
    background: linear-gradient(150deg, var(--seal-bright), var(--seal));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  }
  html[lang="zh-Hant"] .site-nav a { font-family: var(--han); font-size: 1rem; letter-spacing: .04em; }
}

/* --- Hero ---------------------------------------------------------------- */
/* Der Hero ist jetzt Papier, keine Bühne: Xuan-Grund, darüber ein Elfenbein-
   Lichtfeld von links oben, rechts unten der leise Fischschuppen-Grund (魚鱗)
   nach dem Gitter der Song-Trennwand. Alles Song – die Tang-Farben kommen
   erst im Zinnober-Knopf und im Siegel dazu. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 120% at 8% -12%, var(--surface) 0%, var(--paper) 46%, var(--paper-deep) 100%);
  color: var(--ink-soft); text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-block: clamp(3.75rem, 8vw, 6.25rem);
  padding-inline: max(1.5rem, calc((100% - var(--maxw)) / 2 + 1.5rem));
  border-bottom: 1px solid var(--line-soft);
}
.hero::before {          /* Wert-Kolumne, vertikal – dieselbe Inschrift wie auf der Startseite,
                            nur leiser. white-space: nowrap, sonst bricht die Spalte um und läuft
                            als zweite Kolumne quer durch den Text. */
  content: "誠仁恕"; position: absolute; right: clamp(1.25rem, 4vw, 3.25rem); top: 50%;
  transform: translateY(-50%); z-index: -1; pointer-events: none;
  font-family: var(--han); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.1rem);
  color: color-mix(in srgb, var(--celadon) 22%, transparent);
  writing-mode: vertical-rl; white-space: nowrap; letter-spacing: .34em; line-height: 1;
  clip-path: inset(0 0 100% 0);
}
@media (prefers-reduced-motion: no-preference) {
  /* Pinselzug: die Inschrift zieht einmal von oben nach unten auf, wie ein
     Hängerollbild, das gerade entrollt wird. */
  .hero::before { animation: inscriptionDraw 1.1s cubic-bezier(.3,.7,.15,1) .1s both; }
}
@keyframes inscriptionDraw { to { clip-path: inset(0 0 0% 0); } }
.hero::after {            /* Xuan-Papier-Faser: feines Rauschen statt Flachfarbe,
                            reines CSS (SVG-Turbulenz), liegt hinter dem Text.
                            Auf hellem Papier senkt „multiply“ die Körnung leicht
                            ins Blatt, statt sie wie auf Dunkel aufzuhellen.
                            Papier flimmert nicht: die Körnung steht still. */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero > * { max-width: min(60ch, 100%); }
.hero h1 { color: var(--ink); margin: 0 0 1rem; max-width: 20ch; }
/* Das Zitat steht in Celadon – der Primärfarbe – und trägt links die
   Tang-Goldstange. Kein Glanzstreif mehr: Gold schimmert auf dunklem Lack,
   Tinte auf Papier tut das nicht. Die Ruhe ist hier die Aussage. */
.hero .hero-quote {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--celadon);
  max-width: 40ch; margin: 0 0 1.15rem; letter-spacing: .01em;
}
.hero .hero-sub { color: var(--ink-soft);
  max-width: 58ch; margin: 0 0 2rem; font-size: 1.08rem; }
.hero-cta { display: flex; gap: .8rem; justify-content: flex-start; flex-wrap: wrap; max-width: none; }
@media (max-width: 540px) {   /* umgebrochene Knöpfe sonst unterschiedlich breit */
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Startseiten-Hero: „Das Kolophon“ (落款) ------------------------------
   Links spricht der Text deutsch, rechts steht dieselbe Aussage als senkrechte
   Inschrift – 誠實 仁愛 寬容 – und darunter das Zinnober-Siegel, das sie
   beglaubigt. Genau so wird ein chinesisches Rollbild signiert: Inschrift,
   dann Stempel. Beim Laden fallen die Zeichen von oben, zuletzt setzt der
   Stempel auf. Kein Bild, keine Zierde – die Signatur trägt die Seite. */
.hero-home {
  display: grid; align-items: center; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(4.25rem, 10vw, 7.5rem);
}
.hero-home::before { content: none; }
.hero-home > * { max-width: none; }
@media (min-width: 880px) { .hero-home { grid-template-columns: minmax(0, 1fr) auto; } }

.hero-text > * { max-width: 58ch; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  /* Tang-Gold (#c58a26) käme auf dem hellen Papier nur auf 2.6:1 – als
     Kleinversalie zu wenig. Die Schattenseite der Goldstange hält 4.8:1
     und bleibt derselbe Ton. */
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 1.2rem;
}
.hero-eyebrow::before { content: ""; flex: none; width: 2.2rem; height: 1px;
  background: var(--gold); opacity: .8; }

.hero-home h1 { max-width: 17ch; margin-bottom: 1.3rem;
  font-size: clamp(2.6rem, 5.8vw, 4.6rem); line-height: 1.04; letter-spacing: -.028em; }
.hero-home .hero-quote {
  border-left: 2px solid var(--gold);
  padding-left: .95rem; max-width: 34ch; margin: 0 0 1.5rem;
}
.hero-home .hero-sub { max-width: 52ch; margin-bottom: 2.15rem; }

.hero-colophon-block {
  position: relative; margin: 0; display: flex; align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2.75rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.hero-colophon { position: relative; display: flex; align-items: center; gap: 1.1rem; }
.hero-colophon i {
  font-style: normal; font-family: var(--han); font-weight: 500;
  font-size: 2.2rem; letter-spacing: .12em; line-height: 1;
  color: var(--celadon);
}
/* Solange main.js die Striche zeichnet, bleibt der schlichte Text unsichtbar
   (der reservierte Platz bleibt erhalten) – kein kurzes Aufblitzen der Zeichen
   vor dem Schreiben. Die gezeichneten Striche sind eigene SVG-Pfade und davon
   nicht betroffen. */
.hero-colophon.is-drawing i { color: transparent; line-height: 0; }
/* Pinselzug per Hand: main.js ersetzt die Zeichen durch HanziWriter-Mounts
   und zeichnet jeden Strich einzeln nach – hier nur der Platzhalter. */
.hanzi-mount { display: inline-block; line-height: 0; vertical-align: middle; }
.hero-seal {
  position: relative;
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 5px; font-family: var(--han); font-weight: 700; font-size: .9rem;
  letter-spacing: .08em; line-height: 1; color: var(--on-seal);
  background: linear-gradient(150deg, var(--seal-bright), var(--seal));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 3px 12px -5px rgba(165,42,36,.5);
}

@media (min-width: 880px) {   /* die eigentliche Form: senkrecht, wie am Rollbild */
  .hero-colophon-block {
    display: grid; justify-items: center; gap: 1.7rem;
    margin-top: 0; padding: .5rem 0 .5rem clamp(1.75rem, 3.5vw, 3rem);
    border-top: 0;
  }
  .hero-colophon-block::before {           /* Kante der Montierung */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent,
      var(--gold) 16%, var(--gold) 84%, transparent);
    opacity: .55;
  }
  .hero-colophon { flex-direction: column; gap: .85rem; }
  .hero-colophon i { writing-mode: vertical-rl; text-orientation: upright;
    font-size: clamp(2.7rem, 4vw, 3.7rem); letter-spacing: .14em; }
  .hero-seal { width: 46px; height: 46px; font-size: 1rem;
    writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Der Stempel wartet, bis main.js die Inschrift zu Ende geschrieben hat
     (Klasse .play), statt nach einer geschätzten festen Zeit zu feuern.
     Ohne JS/HanziWriter bleibt der Stempel einfach sichtbar stehen. */
  /* Der Stempel bleibt unsichtbar, bis die Inschrift zu Ende geschrieben ist.
     main.js setzt .pending beim Start und tauscht am Ende gegen .play. */
  .hero-seal.pending { opacity: 0; }
  .hero-seal.play { animation: sealStamp .42s cubic-bezier(.2,.7,.3,1) both; }
  .hero-seal.play::after {           /* Siegelblüte: ein Ring löst sich vom Stempel */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: 1.5px solid var(--seal-bright); pointer-events: none;
    animation: sealBloom 1.1s cubic-bezier(.2,.6,.3,1) .08s both;
  }
}
@keyframes sealStamp {
  0%   { opacity: 0; transform: scale(1.16); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes sealBloom { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }

/* Unterseiten-Hero: kompakter, gleiche Container-Ausrichtung.
   .hero.hero-sub trifft nur die Sektion (die Unterzeile <p class="hero-sub"> nicht). */
.hero.hero-sub { padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.hero.hero-sub h1 { margin-bottom: .7rem; }

/* Scroll-Hinweis: main.js hängt ihn unten mittig in jeden Hero – zeigt an,
   dass darunter mehr folgt, verschwindet mit dem Hero beim Weiterscrollen. */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: clamp(.9rem, 2.6vw, 1.6rem); transform: translateX(-50%);
  z-index: 2; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%; background: none; color: var(--celadon); cursor: pointer;
  opacity: .72; transition: opacity .2s ease, border-color .2s ease;
}
.hero-scroll-cue:hover, .hero-scroll-cue:focus-visible { opacity: 1; border-color: var(--celadon); }
.hero-scroll-cue:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.hero-scroll-cue svg { width: 13px; height: 13px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue { animation: scrollCueBob 1.8s ease-in-out .6s infinite; }
}
@keyframes scrollCueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}

/* Disziplin-Sektion: großes, ruhiges Schriftzeichen statt Poster-Bild.
   Das Zeichen kommt sprachneutral über die CSS-Variable --glyph. */
.discipline { position: relative; isolation: isolate; overflow: clip; }
.discipline > .container { position: relative; z-index: 1; }
.discipline::before {
  content: var(--glyph, ""); position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: clamp(-1rem, 3vw, 4rem); transform: translateY(-50%);
  font-family: var(--han); font-weight: 500; font-size: clamp(10rem, 23vw, 21rem); line-height: .82;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--celadon) 30%, transparent);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 44%, #fff 52%, #000 60%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 44%, #fff 52%, #000 60%, #000 100%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%;
  -webkit-mask-position: 130% 0; mask-position: 130% 0;
}
@media (max-width: 900px) { .discipline::before { right: -2rem; font-size: 44vw; opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  /* Glanzspur: das Zeichen zieht einmal von einer hellen Kante nach, dann
     atmet es leise weiter – wie frische Tinte, die noch nicht ganz ruht. */
  .discipline::before {
    animation: glyphTrace 1.5s cubic-bezier(.3,.6,.2,1) both,
               glyphBreathe 6s ease-in-out 1.5s infinite;
  }
}
@keyframes glyphTrace { to { -webkit-mask-position: -50% 0; mask-position: -50% 0; } }
@keyframes glyphBreathe {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.025); }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 999px; font-family: var(--sans);
  font-weight: 600; font-size: .96rem; letter-spacing: .005em; transition: .2s ease;
  border: 1.5px solid transparent; cursor: pointer;
}
/* Zinnober trägt die Handlung: der eine Knopf, der etwas auslöst, ist rot –
   wie der Stempel, der ein Blatt gültig macht. Alles Übrige bleibt Song. */
.btn-primary { background: var(--seal); color: var(--on-seal);
  box-shadow: 0 1px 2px rgba(132,31,26,.25), inset 0 0 0 1px rgba(255,255,255,.14); }
.btn-primary:hover { background: var(--seal-deep); color: var(--on-seal);
  text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(132,31,26,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
.btn-ghost { border-color: var(--line); color: var(--celadon); background: var(--surface); }
.btn-ghost:hover { border-color: var(--celadon); background: var(--surface);
  color: var(--celadon-deep); text-decoration: none; }
.btn-outline { border-color: var(--celadon); color: var(--celadon); }
.btn-outline:hover { background: var(--celadon); color: var(--surface); text-decoration: none; }

/* --- Sektionen ----------------------------------------------------------- */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--paper-deep); }
.section-head { max-width: var(--measure); margin-bottom: 2.4rem; }
.section-head p { font-size: 1.08rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--celadon);
  margin-bottom: 1rem;
}
.eyebrow::before {           /* Mini-Siegel – Echo der Zinnober-Marke */
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none;
  background: var(--seal); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* --- Raster & Karten ----------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem; position: relative;
  box-shadow: var(--shadow-soft); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card h3 { margin-bottom: .5rem; }
.card h3 .zh { color: var(--celadon); font-size: .95rem; margin-left: .3rem; font-weight: 600; }
a.card:hover, .card:has(> .card-link):hover { border-color: var(--line); box-shadow: var(--shadow); }
/* Das Haitang-Fenster (海棠窗) --------------------------------------------
   Die Zeichenmarke sitzt nicht im Rechteck, sondern im Begonienbogen der
   Song-Fensterlaibung: vier Blattbögen an den Achsen, vier Spitzen in den
   Diagonalen. Die Form kommt aus der Maske, die Kontur aus dem ::before –
   eine zweite, eingerückte Linie, wie sie das Vorbild innen mitführt. */
.card-icon {
  position: relative; isolation: isolate;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--paper-deep), var(--celadon-light));
  color: var(--celadon); margin-bottom: 1.1rem; border: 0;
  font-family: var(--han); font-weight: 600; font-size: 1.5rem;
  -webkit-mask-image: var(--haitang); mask-image: var(--haitang);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.card-icon::before {            /* das eingerückte Konturecho */
  content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none;
  background: var(--surface); opacity: .5;
  -webkit-mask-image: var(--haitang-line); mask-image: var(--haitang-line);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.card-icon svg { width: 24px; height: 24px; }
.card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-weight: 600; font-size: .93rem; color: var(--celadon); }
.card-link::after { content: "→"; transition: transform .2s; }
.card-link:hover { text-decoration: none; color: var(--ink); }
.card-link:hover::after { transform: translateX(3px); }

/* --- Wochenplan / Tabellen ---------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schedule { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.schedule caption { text-align: left; padding-bottom: .9rem; color: var(--ink-soft); font-size: .95rem; }
.schedule th, .schedule td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft);
  font-size: .97rem; vertical-align: top; }
.schedule thead th { background: var(--ink); color: #f2ead9; font-weight: 600; font-family: var(--sans);
  letter-spacing: .02em; }
.schedule tbody tr:last-child td { border-bottom: 0; }
.schedule tbody tr:nth-child(even) { background: var(--surface-2); }
.schedule .day { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* --- Fakten / Hinweise --------------------------------------------------- */
.facts { list-style: none; display: grid; gap: .65rem; }
.facts li { padding-left: 1.5rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: .15rem; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }

.notice { border-left: 3px solid var(--seal); background: var(--surface-2);
  padding: 1.1rem 1.3rem; border-radius: 0 8px 8px 0; font-size: .96rem; margin: 1.5rem 0; }
.placeholder { border: 1.5px dashed var(--line); background: var(--surface-2);
  border-radius: var(--radius); display: grid; place-items: center; text-align: center;
  color: var(--ink-faint); font-size: .9rem; padding: 1.4rem; min-height: 200px; }

/* --- Stimmungsbilder ----------------------------------------------------- */
.mood-frame { position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line); }
.mood-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mood-img { cursor: help; }
.mood-poster { background: radial-gradient(130% 130% at 50% 0%, var(--surface-2) 0%, var(--paper-deep) 70%); }
.mood-poster img { width: 100%; height: auto; object-fit: contain; }
.has-mood-note { position: relative; }
.gallery-grid a { position: relative; }
.mood-note { position: absolute; right: .7rem; bottom: .7rem; z-index: 4;
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(37,42,40,.55); color: var(--gold-light);
  border: 1px solid rgba(217,187,99,.4); font-family: var(--display); font-size: .82rem;
  font-style: italic; font-weight: 600; cursor: help; opacity: .72;
  transition: opacity .2s, background-color .2s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mood-note:hover, .mood-note:focus-visible { opacity: 1; background: rgba(37,42,40,.85); outline: none; }
.mood-note-tip { position: absolute; bottom: calc(100% + 8px); right: -.4rem; z-index: 6;
  width: min(17rem, 62vw); background: var(--ink); color: #f4ead0; font-family: var(--sans);
  font-style: normal; font-weight: 400; font-size: .76rem; line-height: 1.5; text-align: left;
  padding: .65rem .8rem; border-radius: 8px; border: 1px solid rgba(217,187,99,.28);
  box-shadow: 0 6px 26px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: .18s; pointer-events: none; }
.mood-note-tip::after { content: ""; position: absolute; top: 100%; right: 1rem;
  border: 6px solid transparent; border-top-color: var(--ink); }
.mood-note:hover .mood-note-tip, .mood-note:focus-visible .mood-note-tip { opacity: 1; visibility: visible; transform: none; }

/* --- Timeline (Über uns) ------------------------------------------------- */
.timeline { list-style: none; border-left: 2px solid var(--line); margin-left: .5rem; }
.timeline li { padding: 0 0 1.7rem 1.8rem; position: relative; }
.timeline li::before { content: ""; width: 11px; height: 11px; border-radius: 2px; background: var(--gold);
  transform: rotate(45deg); position: absolute; left: -6px; top: .5rem; box-shadow: 0 0 0 4px var(--paper); }
.timeline .year { font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--celadon); display: block; margin-bottom: .15rem; }

/* --- Team ---------------------------------------------------------------- */
.team-card { text-align: center; }
.team-photo { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; }
.team-card .role { color: var(--celadon); font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .7rem; }

/* --- Rezepte ------------------------------------------------------------- */
.recipe { scroll-margin-top: 90px; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 1.1rem; }
.tag { font-size: .76rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px;
  background: var(--surface-2); color: var(--celadon); border: 1px solid var(--line); }
.recipe-cols { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .recipe-cols { grid-template-columns: 1fr 1.7fr; } }
.recipe h4 { font-size: 1rem; margin-bottom: .55rem; letter-spacing: .01em; }
.recipe ol, .recipe ul { padding-left: 1.3rem; display: grid; gap: .45rem; }

/* --- Galerie & Lightbox -------------------------------------------------- */
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-soft); }
.gallery-grid img { width: 100%; height: 168px; object-fit: cover; transition: transform .4s ease; }
.gallery-grid a:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; background: rgba(21,26,24,.95); z-index: 300; display: none;
  place-items: center; padding: 2rem; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 82vh; max-width: 92vw; border-radius: 6px; }
.lightbox figcaption { color: var(--stage-soft); text-align: center; margin-top: .8rem; font-size: .9rem; }
.lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; color: #fff;
  font-size: 2.3rem; cursor: pointer; line-height: 1; }

/* --- Presse -------------------------------------------------------------- */
.press-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.press-table th, .press-table td { text-align: left; padding: .75rem .85rem;
  border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.press-table th { color: var(--ink); border-bottom: 2px solid var(--ink); }
.press-scans { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; margin-top: 1.5rem; }

/* --- Kontakt ------------------------------------------------------------- */
.vcard { display: flex; flex-direction: column; gap: .3rem; }
.vcard .big { font-family: var(--display); font-size: 1.35rem; color: var(--ink); }
.vcard a.big:hover { color: var(--celadon); }
.contact-panel { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--surface);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); overflow: hidden; }
.vcard-modern { padding: clamp(2rem, 4vw, 3.25rem); }
.vcard-modern h3 { font-size: 1.45rem; margin-bottom: 1.9rem; }
.vcard-list { list-style: none; display: grid; gap: 1.6rem; }
.vcard-list li { display: flex; gap: 1rem; align-items: flex-start; }
.vcard-list .card-icon { margin-bottom: 0; flex: none; width: 46px; height: 46px; }
.vcard-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin-bottom: .25rem; font-weight: 600; }
.vcard-list a, .vcard-list li > div > span:not(.vcard-label) { font-family: var(--display);
  font-size: 1.16rem; font-weight: 600; color: var(--ink); }
.vcard-list a:hover { color: var(--celadon); }
.contact-logo { background: var(--paper-deep); border-left: 1px solid var(--line);
  display: grid; place-items: center; padding: clamp(1.75rem, 5vw, 3rem); }
.contact-logo img { width: 100%; max-width: 280px; height: auto; }
@media (max-width: 760px) {
  .contact-panel { grid-template-columns: 1fr; }
  .contact-logo { border-left: none; border-top: 1px solid var(--line); }
}

/* --- Social -------------------------------------------------------------- */
.social-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.social-row a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: .92rem; font-weight: 600; }
.social-row a:hover { border-color: var(--gold); color: var(--celadon); text-decoration: none; }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Instagram-Feed: „Aushang“ ------------------------------------------- */
/* Das Fenster ist ein Hängerollbild (立軸): Goldstange oben, Papierbahn darunter,
   unten angeschnitten – der halb sichtbare Beitrag zeigt, dass Papier folgt.
   Rechts läuft eine Tintenspur mit, die sich beim Scrollen im Fenster füllt.
   Daneben bleibt die Spalte stehen: wer nicht mitscrollen will, scrollt vorbei. */
.ig-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 940px) {
  .ig-layout { grid-template-columns: 1fr minmax(380px, 480px); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .ig-aside { position: sticky; top: 8.5rem; }
}
.ig-aside > p { max-width: 46ch; }
.ig-aside .social-row { margin: 1.6rem 0 1.2rem; }
.ig-privacy { display: block; max-width: 42ch; }

.ig-panel { position: relative; padding-top: 1.4rem; --ig-progress: 0%; }
.ig-panel::before {          /* die Stange */
  content: ""; position: absolute; top: 0; left: -.6rem; right: -.6rem; height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--celadon));
  box-shadow: 0 4px 14px -6px rgba(37,42,40,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.ig-panel::after {           /* die Tintenspur: Fortschritt im Fenster */
  content: ""; position: absolute; top: 4.6rem; bottom: .4rem; right: -.9rem; width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--seal) var(--ig-progress), var(--line) var(--ig-progress));
  transition: background .1s linear;
}
@media (max-width: 939px) { .ig-panel::after { display: none; } }

.ig-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem .2rem .9rem;
}
.ig-handle { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.ig-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ig-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .ig-hint svg { animation: igNudge 2.4s ease-in-out infinite; }
}
@keyframes igNudge { 0%, 70%, 100% { transform: none; } 82% { transform: translateY(2px); } }
.ig-panel.is-ended .ig-hint { opacity: 0; transition: opacity .3s; }

.ig-scroll {
  height: 32rem;                 /* Startwert; JS setzt exakt 1,3 Beiträge */
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  border-radius: var(--radius);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent 100%);
}
.ig-panel.is-ended .ig-scroll { -webkit-mask-image: none; mask-image: none; }
.ig-scroll:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
.ig-scroll::-webkit-scrollbar { width: 6px; }
.ig-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.ig-list { display: grid; gap: 1.1rem; }

.ig-post {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.ig-post-head {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--line-soft);
}
.ig-post-head time { font-family: var(--display); font-style: italic; font-size: .98rem; color: var(--celadon); }
.ig-badge { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: .18rem .6rem; }

/* Bildhöhe folgt der Fensterhöhe: nur so passen 1,3 Beiträge wirklich ins
   Fenster. Hohe Schirme zeigen das Bild quadratisch, flache breiter. */
.ig-media { display: block; background: var(--surface-2); }
.ig-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
@media (min-height: 1100px) { .ig-media img { aspect-ratio: 1 / 1; } }
@media (max-height: 720px) { .ig-media img { aspect-ratio: 16 / 9; } }
.ig-media:hover img { transform: scale(1.02); }
.ig-media:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }

.ig-body { padding: 1.05rem 1.15rem .2rem; }
.ig-caption {
  margin: 0; font-size: .96rem; line-height: 1.62; color: var(--ink-soft); white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
@media (min-height: 1100px) { .ig-caption { -webkit-line-clamp: 5; } }
@media (max-height: 720px) { .ig-caption { -webkit-line-clamp: 3; } }
.ig-caption.is-open { -webkit-line-clamp: unset; overflow: visible; }
.ig-more { margin-top: .45rem; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--celadon); }
.ig-more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ig-more:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 3px; }

.ig-meta {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem 1.05rem; margin-top: .9rem; border-top: 1px solid var(--line-soft);
}
.ig-meta-item { display: inline-flex; align-items: center; gap: .38rem; font-size: .9rem; color: var(--ink-faint); }
.ig-meta-item b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ig-meta-item svg { width: 16px; height: 16px; fill: currentColor; }
.ig-meta-item:first-child svg { color: var(--seal); }   /* Zinnober: das eine Rot */
.ig-open { margin-left: auto; font-size: .86rem; font-weight: 600; }

.ig-status { display: grid; gap: .8rem; justify-items: start; padding: 1.6rem 0 .4rem; color: var(--ink-faint); }
.ig-panel[data-state="ready"] .ig-status { display: none; }
.ig-panel[data-state="empty"] .ig-scroll,
.ig-panel[data-state="loading"] .ig-scroll { -webkit-mask-image: none; mask-image: none; }
.ig-panel[data-state="empty"] .ig-scroll { height: auto; }
.ig-panel[data-state="empty"] .ig-hint { display: none; }
.ig-panel[data-state="empty"]::after,
.ig-panel[data-state="loading"]::after { display: none; }   /* keine Tintenspur ohne Beiträge */

.ig-post-skeleton { border-style: dashed; box-shadow: none; }
.ig-skel { background: var(--surface-2); border-radius: 6px; display: block; }
.ig-post-skeleton .ig-media { aspect-ratio: 4 / 5; }
.ig-skel-line { height: .7rem; width: 100%; }
.ig-post-skeleton .ig-body { display: grid; gap: .55rem; padding-bottom: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .ig-skel { animation: igPulse 1.6s ease-in-out infinite; }
}
@keyframes igPulse { 50% { opacity: .55; } }

/* --- Footer: „Die Trennwand“ (魚鱗) --------------------------------------
   Der Fuß ist die dunkle Gitterwand am Ende des Raums: tiefe Tusche, darüber
   das Fischschuppenmuster der Song-Trennwand – so leise, dass es erst beim
   Hinsehen kippt. Die Goldkante oben ist die Leiste, auf der sie steht. */
.site-footer { position: relative; isolation: isolate;
  background: var(--stage); color: var(--stage-soft); margin-top: 3.5rem;
  border-top: 1px solid var(--gold); }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--celadon-light); opacity: .07;
  -webkit-mask-image: var(--scales); mask-image: var(--scales);
  -webkit-mask-size: 26px 26px; mask-size: 26px 26px;
}
.footer-grid { display: grid; gap: 2rem; padding: 3.5rem 0 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-logo { width: 64px; height: 64px; margin-bottom: 1rem; filter: invert(1) sepia(.3); }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-footer h3 { color: var(--stage-ink); font-size: 1.06rem; margin-bottom: .8rem; }
.site-footer p { color: var(--stage-soft); }
/* .small ist auf Papier gedacht (--ink-faint); auf der dunklen Fußfläche
   käme es auf 3.7:1 und fiele durch. Dort trägt helles Celadon. */
.site-footer .small { color: var(--stage-soft); }
.site-footer a { color: var(--stage-ink); text-decoration-color: color-mix(in srgb, var(--gold-light) 40%, transparent); }
.site-footer a:hover { color: var(--gold-light); }
.site-footer ul { list-style: none; display: grid; gap: .45rem; }
.footer-social { display: flex; gap: .8rem; margin-top: 1.1rem; }
.footer-social a { display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid color-mix(in srgb, var(--celadon-light) 30%, transparent); border-radius: 50%; }
.footer-social a:hover { border-color: var(--gold-light); background: var(--gold-light); color: var(--stage); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom { border-top: 1px solid color-mix(in srgb, var(--celadon-light) 20%, transparent);
  padding: 1.2rem 0; font-size: .84rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; }
.footer-bottom [lang="zh-Hant"] { color: var(--gold-light); letter-spacing: .12em; }

/* --- Utility ------------------------------------------------------------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; }
.small { font-size: .88rem; color: var(--ink-faint); }
.center { text-align: center; }
.center .section-head, .center.section-head { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
.center .hero-cta { justify-content: center; }   /* Knöpfe folgen der Mittelachse */
.divider { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
.prose-measure { max-width: var(--measure); }

/* --- Scroll-Reveal: „Aufsteigende Tinte" ---------------------------------
   Nach dem Vorbild von ReactBits (Animated Content / Fade Content), auf reines
   CSS/JS übertragen. Beim Scrollen steigt der Inhalt wie frische Tinte ins
   Papier: leicht von unten, die Unschärfe klärt sich. Stimmungsbilder rollen
   von oben auf – wie ein Hängerollbild (立軸). Greift nur, wenn JS aktiv ist
   (html.reveal-on) UND Bewegung erwünscht ist; sonst steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-Eingang: der Text steigt beim Laden auf, dann fällt das Kolophon,
     zuletzt setzt der Stempel (siehe inkFall / sealStamp). Die H1 selbst
     bekommt stattdessen den Pinselzug weiter unten (siehe .brush-h1). */
  .hero-home .hero-text > :not(h1),
  .hero.hero-sub > .hero-sub {
    opacity: 0; animation: heroRise .8s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-home .hero-text > :nth-child(1) { animation-delay: .05s; }
  .hero-home .hero-text > :nth-child(2) { animation-delay: .14s; }
  .hero-home .hero-text > :nth-child(3) { animation-delay: .23s; }
  .hero-home .hero-text > :nth-child(4) { animation-delay: .32s; }
  .hero-home .hero-text > :nth-child(5) { animation-delay: .41s; }
  .hero.hero-sub > .hero-sub { animation-delay: .16s; }

  /* Pinselzug: die Hero-Überschrift setzt sich zeichenweise, statt als Block
     aufzusteigen – bewusst nur die H1, nicht jede Überschrift auf der Seite.
     JS zerlegt den Text in main.js; ohne JS bleibt die H1 einfach stehen. */
  .brush-h1 .brush-word { white-space: nowrap; }
  .brush-h1 .brush-char {
    display: inline-block;
    opacity: 0; filter: blur(6px); transform: translateY(10px);
    transition: opacity .5s cubic-bezier(.2,.7,.2,1),
                filter .5s cubic-bezier(.2,.7,.2,1),
                transform .5s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 22ms);
  }
  .brush-h1.is-visible .brush-char { opacity: 1; filter: blur(0); transform: none; }

  /* Scroll-Reveal (unterhalb des Heros); JS setzt data-reveal + Staffel-Index. */
  .reveal-on [data-reveal] {
    opacity: 0; transform: translateY(20px); filter: blur(6px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1),
                transform .7s cubic-bezier(.2,.7,.2,1),
                filter .7s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--reveal-i, 0) * 85ms);
    will-change: opacity, transform;
  }
  .reveal-on [data-reveal="scroll"] {   /* Bild rollt von oben auf */
    opacity: 1; transform: none; filter: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .95s cubic-bezier(.3,.72,0,1);
    transition-delay: calc(var(--reveal-i, 0) * 85ms);
  }
  .reveal-on [data-reveal].is-visible {
    opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0);
  }
}

@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- Motion / Barrierefreiheit ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero-colophon i, .hero-seal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Dark Mode — „Celadon-Nacht“
   Dieselbe Song-Ordnung bei Lampenlicht: der Grund ist tiefe Tusche mit einem
   Zug Celadon, das Papier wird zur Tinte. Celadon kann auf Dunkel nicht mehr
   führen (zu dunkel für Text), darum übernimmt helles Celadon die Primärrolle
   und Zinnober hellt auf, um als Handlungsfarbe lesbar zu bleiben.
   ========================================================================== */
html[data-theme="dark"] {
  --paper:      #171c1a;
  --paper-deep: #1e2422;
  --surface:    #212826;
  --surface-2:  #26302c;
  --ink:        #f2f0e7;
  --ink-soft:   #bcc5c0;
  --ink-faint:  #8a938e;
  --line:       #3a4441;
  --line-soft:  #2c3532;

  --celadon:       #a9bbb3;   /* helles Celadon führt auf Dunkel */
  --celadon-deep:  #c6d3cc;
  --celadon-light: #7d938a;
  --mist:          #8aa2a5;

  /* Zinnober trägt weiter helle Schrift (--on-seal), darf also nicht zu weit
     aufhellen: #d4483d käme nur auf 4.2:1. #c93c31 hält 4.8:1 und liest sich
     auf Dunkel trotzdem als das hellere, wärmere Rot. */
  --seal:       #c93c31;
  --seal-deep:  #b83428;
  --seal-bright:#e35c4e;

  --gold:       #d9a03f;
  --gold-light: #f2d28b;
  --gold-deep:  #c58a26;   /* auf Dunkel ist das helle Tang-Gold die Tiefe */
  --azurit:     #4b8cad;
  --malachit:   #5f9c78;

  --stage:      #101413;
  --stage-ink:  #f2f0e7;
  --stage-soft: #94a29c;
  /* --haitang/--scales bleiben: es sind Masken, die Farbe kommt vom Element. */
}
html { transition: none; }
body, .site-header, .card, .schedule, .schedule td, .notice, .tag, .card-icon,
.social-row a, .gallery-grid a, .contact-panel { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
html[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); }
html[data-theme="dark"] .brand-seal img { filter: invert(1) sepia(.35) saturate(1.6) brightness(1.05); }
html[data-theme="dark"] .schedule thead th { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .card-icon { background: linear-gradient(155deg, var(--surface-2), var(--celadon-light)); }
/* Der Hero ist im Dunkeln kein Papier mehr, sondern Lack: das Lichtfeld von
   links oben bleibt, es leuchtet nur nicht mehr, es glimmt. */
html[data-theme="dark"] .hero {
  background: radial-gradient(120% 120% at 8% -12%, var(--surface-2) 0%, var(--paper) 52%, #121716 100%);
}
html[data-theme="dark"] .hero::after { mix-blend-mode: overlay; opacity: .42; }
html[data-theme="dark"] .btn-outline { border-color: var(--ink); color: var(--ink); }
html[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: var(--paper); }
/* Die Fußfläche ist in BEIDEN Schemata dunkel – die Aufhellung des Logos muss
   darum auch im Dunkelmodus bestehen bleiben (sonst steht das dunkle Logo auf
   dunkler Wand). Kein Sonderfall nötig. */
html[data-theme="dark"] .placeholder { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .press-table th { color: var(--ink); border-bottom-color: var(--ink-soft); }

/* --- Theme-Umschalter ---------------------------------------------------- */
.theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none; background: transparent;
  border: 0; border-radius: 8px; color: var(--ink-faint); cursor: pointer;
  transition: color .2s, background-color .2s; }
.theme-toggle:hover { color: var(--celadon); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; display: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme-pref="light"]  .theme-toggle .ti-light,
html[data-theme-pref="dark"]   .theme-toggle .ti-dark,
html[data-theme-pref="system"] .theme-toggle .ti-system { display: block; }
html:not([data-theme-pref]) .theme-toggle .ti-system { display: block; }