/* mycelyn · Produktseite · Farbwelt und Schrift aus dem Instrument selbst */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.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: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.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; }

:root {
  color-scheme: light dark;
  /* Elfenbein, Nachtgrün, Champagnergold */
  --bg: #F5F2E9;
  --surface: #FBF9F4;
  --sunk: #E9E4D5;
  --ink: #0C1512;
  --ink-hover: #22302A;
  --muted: #4F5D55;
  --line: #D6D0BF;
  --gold: #9C8038;
  --gold-text: #7A6226;
  --ok: #4F7049;
  --warn: #A05C45;
  --cool: #8A6A22;
  /* Lebenswelten, nur für Daten */
  --lw-familie: #724728;
  --lw-mandate: #46773B;
  --lw-industrie: #91441E;
  --lw-politik: #2E6895;
  --lw-medien: #A45C62;
  --lw-kultur: #798131;
  --lw-wissen: #0A726E;
  --lw-kapital: #585396;
  --lw-ehrenamt: #794E00;
  --lw-weitere: #4A626A;
  --orbit-linie: rgba(12, 21, 18, .13);
  --orbit-linie-stark: rgba(12, 21, 18, .28);
  /* Nachtband: in beiden Schemata dunkel */
  --nacht: #101F18;
  --nacht-ink: #F5F2E9;
  --nacht-muted: #A3ABA3;
  --nacht-line: #24372D;
  --schatten: 0 1px 0 rgba(12, 21, 18, .04), 0 28px 56px -36px rgba(12, 21, 18, .42);
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --r: 12px;
  --r-klein: 10px;
  --gutter: 16px;
  --breite: 1240px;
  --abstand: clamp(64px, 4vw + 40px, 112px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1512;
    --surface: #101F18;
    --sunk: #0A110E;
    --ink: #F5F2E9;
    --ink-hover: #DCD6C7;
    --muted: #A3ABA3;
    --line: #24372D;
    --gold: #C3A96A;
    --gold-text: #C3A96A;
    --ok: #8CB386;
    --warn: #D68468;
    --cool: #D2AE5C;
    --lw-familie: #A17557;
    --lw-mandate: #8FC184;
    --lw-industrie: #DE8E69;
    --lw-politik: #79B1E0;
    --lw-medien: #F2A6AB;
    --lw-kultur: #C2CC80;
    --lw-wissen: #6BBBB6;
    --lw-kapital: #9E9CE1;
    --lw-ehrenamt: #C39553;
    --lw-weitere: #799199;
    --orbit-linie: rgba(245, 242, 233, .12);
    --orbit-linie-stark: rgba(245, 242, 233, .26);
    --nacht: #101F18;
    --schatten: 0 0 0 1px rgba(245, 242, 233, .02);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p, ul, dl, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-thickness .18s ease, color .18s ease; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 16px; top: -64px; z-index: 20; padding: 12px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r-klein); text-decoration: none; font-weight: 500; transition: top .18s ease; }
.sprung:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Kopf */
.kopf { padding-block: 18px 0; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 44px; border-radius: 6px; }
.lockup .zeichen { width: 36px; height: 36px; flex: none; }
.zeichen-kern { fill: var(--gold); }
.wortmarke { font-family: var(--f-text); font-weight: 500; font-size: 1.25rem; letter-spacing: .14em; line-height: 1; }
.wortmarke b { font-weight: 500; color: var(--gold-text); }
.herkunft { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.3; }
@media (max-width: 640px) { .herkunft { display: none; } }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--r-klein); border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  font: 500 1rem/1.2 var(--f-text); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.knopf:hover { transform: translateY(-1px); background: var(--ink-hover); border-color: var(--ink-hover); box-shadow: 0 10px 22px -14px rgba(12, 21, 18, .55); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf .ikon { width: 20px; height: 20px; flex: none; }
.knopf-zweit { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.knopf-zweit:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: var(--ink); color: var(--ink); }
.knopf-klein { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.handeln { display: flex; flex-wrap: wrap; gap: 12px; }
.kanal-hinweis { margin-top: 14px; font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .handeln .knopf { width: 100%; }
  .kopf .knopf-klein { padding: 0 14px; }
}

/* Hero */
.hero { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 96px); }
.hero-raster { display: grid; gap: 40px; align-items: center; }
.hero-text { min-width: 0; }
.hero h1 { font-size: clamp(2.75rem, 1.5rem + 3.6vw, 4.625rem); line-height: 1.02; letter-spacing: -.015em; max-width: 11em; }
.vorspann { margin-top: 24px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3125rem, 1.15rem + .45vw, 1.5rem); line-height: 1.36; max-width: 28em; }
.hero .handeln { margin-top: 32px; }
.hero-figur { margin: 0; min-width: 0; }
.orbit-buehne { position: relative; aspect-ratio: 10 / 11; }
.orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kreise { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: .875rem; color: var(--muted); }
.kreise[hidden] { display: none; }
.kreise-titel { color: var(--ink); font-weight: 500; }
.kreise-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kreis {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 .875rem/1 var(--f-text); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.kreis:hover { border-color: var(--gold); transform: translateY(-1px); }
.kreis[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.kreise-stand { flex-basis: 100%; min-height: 1.5em; }
@media (min-width: 960px) {
  .hero-raster { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 40px; }
  .orbit-buehne { aspect-ratio: 6 / 5; }
  .kreise { padding-left: 148px; }
}

/* Auftritt im Hero: einmal, gestaffelt */
.auftritt { animation: auftritt .7s cubic-bezier(.2, .7, .2, 1) both; }
.auftritt-2 { animation-delay: .12s; }
.auftritt-3 { animation-delay: .24s; }
@keyframes auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Abschnitte */
.abschnitt { padding-block: var(--abstand); border-top: 1px solid var(--line); }
.abschnitt h2, .nacht h2 { font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.625rem); line-height: 1.06; }
.satz { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; max-width: 34em; color: var(--muted); }
.kopfzeile { display: grid; gap: 0 48px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 960px) {
  .kopfzeile { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
  .kopfzeile .satz { margin-top: 0; }
}
.zwei { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .zwei-gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .zwei-gespiegelt > .text-spalte { order: 2; }
  .zwei-oben { align-items: start; }
}

/* Tafeln: echte Bildschirmfotos */
.tafel { margin: 0; min-width: 0; }
.tafel img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--schatten); }
.tafel figcaption, .raum-bild figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.5; color: var(--muted); max-width: 60ch; }

/* Legenden */
.legende { margin-top: 32px; display: grid; }
.legende > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.legende > div:last-child { border-bottom: 1px solid var(--line); }
.legende dt { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.legende dd { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 479px) { .legende > div { grid-template-columns: 1fr; } }

/* Drei Werte */
.drei { display: grid; gap: 0; margin-top: clamp(40px, 5vw, 64px); }
.wert { display: grid; gap: 12px; align-content: start; padding-block: 24px; border-top: 1px solid var(--ink); }
.wert dt { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.1; }
.wert dd { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 30em; }
.wert-skala { display: grid; gap: 8px; }
.wert-zahl { font-size: .875rem; color: var(--muted); }
.balken { display: block; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.balken-fuellung { display: block; height: 100%; border-radius: 3px; background: var(--ink); transform-origin: left center; }
.balken-85 { width: 85%; }
.balken-72 { width: 72%; }
.js .wert.reveal.warten .balken-fuellung { transform: scaleX(0); }
.js .wert.reveal .balken-fuellung { transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
.klima-liste { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.klima { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; line-height: 1.3; }
.klima::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid var(--muted); }
.klima-warm::before { border-color: var(--ok); }
.klima-stabil::before { border-color: var(--muted); }
.klima-kuehl::before { border-color: var(--cool); border-style: dashed; }
.klima-belastet::before { border-color: var(--warn); border-style: double; border-width: 3px; }
.klima-pruefen::before { border-color: var(--warn); border-style: dotted; }
@media (min-width: 960px) {
  .drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
}

/* Sendung */
.sendung-raster { display: grid; gap: 48px; }
.teile { margin-top: 32px; display: grid; }
.teile > div { padding-block: 16px; border-top: 1px solid var(--line); }
.teile > div:last-child { border-bottom: 1px solid var(--line); }
.teile dt { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.teile dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.55; }
.sendung-bilder { display: grid; gap: 32px; align-content: start; min-width: 0; }
.tafel-karte { max-width: 400px; }
.leitsatz { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.12; color: var(--gold-text); max-width: 12em; text-wrap: balance; }
.leitsatz span { display: block; }
@media (min-width: 960px) {
  .sendung-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px 64px; align-items: start; }
  .sendung-bilder { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 32px; }
  .sendung-bilder .leitsatz { font-size: clamp(1.5rem, .6rem + 1.6vw, 2.25rem); }
  .tafel-impuls { grid-column: 1 / -1; }
  .tafel-wandel { grid-column: 1 / -1; }
}

/* Fragen */
.beispielfragen { margin-top: 32px; display: grid; gap: 0; }
.beispielfragen li { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.22; padding-block: 14px; border-top: 1px solid var(--line); text-wrap: balance; }
.beispielfragen li:last-child { border-bottom: 1px solid var(--line); }

/* Zwischenruf */
.ruf { background: var(--sunk); padding-block: clamp(40px, 5vw, 64px); }
.ruf-zeile { display: grid; gap: 24px; align-items: center; }
.ruf-titel { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.1; }
.ruf-text { margin-top: 8px; color: var(--muted); }
@media (min-width: 960px) { .ruf-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* Nachtband: Verbindungen */
.nacht { background: var(--nacht); color: var(--nacht-ink); padding-block: var(--abstand) clamp(48px, 5vw, 80px); border-block: 1px solid var(--nacht-line); }
.nacht .satz { color: var(--nacht-muted); }
.nacht-raster { display: grid; gap: 24px; }
.raum-bild { margin: 0; }
.raum-bild img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 100%); }
.raum-bild figcaption { color: var(--nacht-muted); margin-inline: auto; text-align: center; }
.nacht :focus-visible { outline-color: #C3A96A; }
@media (min-width: 960px) {
  .nacht-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 32px; align-items: center; }
  .nacht .text-spalte { padding-bottom: 48px; }
}

/* Diskretion */
.regeln { display: grid; gap: 0 48px; counter-reset: none; }
.regeln li { padding-block: 20px; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.55; max-width: 36em; }
.regeln strong { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; letter-spacing: 0; margin-right: .2em; }
@media (min-width: 840px) { .regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Angebot */
.zielgruppen { margin-top: 32px; }
.zielgruppen li { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.25; padding-block: 14px; border-top: 1px solid var(--line); }
.zielgruppen li:last-child { border-bottom: 1px solid var(--line); }
.angebot-spalte { display: grid; gap: 24px; justify-items: start; padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.formen { display: grid; gap: 0; width: 100%; }
.formen > div { display: grid; gap: 2px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.formen > div:first-child { padding-top: 0; }
.formen dt { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; }
.formen dd { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.anfrage { font-size: 1.0625rem; }
@media (min-width: 960px) { .angebot-spalte { margin-top: 8px; } }

/* Ursprung */
.ursprung-raster { display: grid; gap: 40px; }
.grosszahl { font-family: var(--f-display); font-weight: 600; font-size: clamp(5rem, 3rem + 9vw, 11rem); line-height: .9; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.grosszahl-vor { font-weight: 500; font-style: italic; font-size: .28em; letter-spacing: 0; color: var(--gold-text); vertical-align: .9em; margin-right: .1em; }
.zahl { font-variant-numeric: lining-nums tabular-nums; }
.grosszahl-text { margin-top: 16px; max-width: 22em; color: var(--muted); font-size: 1.0625rem; }
.zitat { margin-top: 32px; padding-left: 20px; border-left: 2px solid var(--gold); }
.zitat p { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; }
.ursprung .handeln { margin-top: 36px; }
.fussnote { margin-top: 28px; font-size: .875rem; color: var(--muted); }
@media (min-width: 960px) { .ursprung-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; } }

/* Fuß */
.fuss { border-top: 1px solid var(--line); padding-block: 40px 48px; font-size: .9375rem; color: var(--muted); }
.fuss-raster { display: grid; gap: 24px; }
.fuss-marke p { margin-top: 10px; }
.gannaca-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); border-radius: 4px; }
.gannaca-wortmarke { width: 132px; height: auto; aspect-ratio: 299.09 / 75.6; }
.fuss-adresse { font-style: normal; line-height: 1.7; }
.fuss-adresse a, .fuss-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 24px; align-content: start; }
@media (min-width: 840px) { .fuss-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* Einblenden beim Scrollen: nur was beim Laden noch nicht sichtbar war */
.js .reveal { transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.warten { opacity: 0; transform: translateY(18px); }
.js .verz-1 { transition-delay: .09s; }
.js .verz-2 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .auftritt { animation: none; }
  .js .reveal, .js .reveal.warten { opacity: 1; transform: none; transition: none; }
  .js .wert.reveal.warten .balken-fuellung { transform: none; }
  .knopf, .kreis, a { transition: none; }
  .knopf:hover, .kreis:hover { transform: none; }
}

@media print {
  .js .reveal.warten { opacity: 1; transform: none; }
  .js .wert.reveal.warten .balken-fuellung { transform: none; }
  .kopf .knopf, .hero-figur, .ruf, .handeln { display: none; }
  .nacht { background: none; color: #000; }
}