/* 22.10.2026: Die MEEYO-Geschichte (/geschichte) — Vorlage _geschichte.html, Verhalten geschichte.js. Markenwelt Pflaume/Korall/Violett
   wie das Herzensprojekt. Mobil zuerst (400 px: eine Spalte, Zeitstrahl links), ab 900 px Held zweispaltig und Zeitstrahl mittig. */
.gs-wurzel { padding-bottom: 48px }
.gs-bald { text-align: center; padding: 60px 0 }
.gs { --gs-rand: clamp(16px, 3.5vw, 64px); max-width: 1180px; margin: 0 auto }
.gs h2 { font-size: clamp(1.35rem, 3vw, 2rem); margin: 0 0 14px; letter-spacing: .01em }

/* 1 — Held: der Erfinder (bleibt in beiden Farbschemen dunkel) */
.gs-held { margin: -24px calc(-1 * var(--gs-rand)) 0; padding: 30px var(--gs-rand) 36px; color: #fff; display: grid; gap: 22px; align-items: center;
  background: radial-gradient(circle at 80% 20%, rgba(255, 79, 122, .32), transparent 55%), radial-gradient(circle at 10% 90%, rgba(139, 61, 255, .32), transparent 50%),
    linear-gradient(180deg, #1a0a26 0%, #120619 100%) }
.gs-held-bild { margin: 0; display: flex; justify-content: center }
.gs-held-bild img { width: min(64vw, 300px); height: auto; aspect-ratio: 36 / 47; object-fit: cover; border-radius: 160px 160px 22px 22px;
  border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 0 50px rgba(255, 79, 122, .45), 0 0 110px rgba(139, 61, 255, .3) }
.gs-held-text { text-align: center }
.gs-marke { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff8fab; margin: 0; font-size: .85rem }
.gs-held h1 { font-size: clamp(1.7rem, 4.6vw, 3.1rem); line-height: 1.12; margin: .25em 0 .3em;
  background: linear-gradient(100deg, #fff 0%, #ffc2d6 55%, #d9bdff 100%); -webkit-background-clip: text; background-clip: text; color: transparent }
.gs-unter { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin: 0 0 14px }
.gs-vorschau { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--gelb); color: #1a0f24; font-weight: 700; font-size: .85rem }
.gs-name { margin: 0 0 8px; color: #e9d8f5 } .gs-name b { color: #fff; font-size: 1.25rem }
.gs-ich { margin: 0 auto; max-width: 560px; line-height: 1.6; color: #f6effa; font-size: 1.05rem }

/* 3 — Werte */
.gs-werte { padding: 30px 0 6px }
.gs-werte h2, .gs-anfang h2, .gs-gedanken h2, .gs-team h2, .gs-schluss h2 { text-align: center }
.gs-werte ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr }
.gs-werte li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie) }
.gs-werte h3 { margin: 2px 0 4px; font-size: 1.08rem } .gs-werte p { margin: 0; color: var(--nebel); line-height: 1.5 }
.gs-nr { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--verlauf) }

@media (min-width: 900px) {
  .gs-held { grid-template-columns: minmax(260px, 360px) 1fr; padding-top: 46px; padding-bottom: 50px }
  .gs-held-text { text-align: left } .gs-ich { margin: 0 }
  .gs-held-bild img { width: 100% }
  .gs-werte ol { grid-template-columns: repeat(3, 1fr) }
}
:root[data-theme="light"] :root[data-theme="light"] .gs-werte li, :root[data-theme="light"] .gs-gedanken li, :root[data-theme="light"] .gs-team li, :root[data-theme="light"] .gs-zitat { box-shadow: 0 8px 30px rgba(60, 20, 90, .08) }

/* Rework 22.10.: Kapitel, Abschnitte in Ich-Form, Zitate, Gedanken, Team, Schluss */
.gs-anfang { padding: 34px 0 6px }
.gs-kapitel { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; counter-reset: kap }
.gs-kap { position: relative; padding: 0 0 26px 52px; counter-increment: kap }
.gs-kap::before { content: counter(kap); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--verlauf) }
.gs-kap:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 6px; width: 2px; background: var(--linie) }
.gs-wann { margin: 0 0 2px; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--korall-schrift) }
.gs-kap h3 { margin: 0 0 6px; font-size: 1.25rem } .gs-kap > p { margin: 0; line-height: 1.65; font-size: 1.05rem }
.gs-foto { margin: 14px 0 0 } .gs-foto img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: var(--radius) }
.gs-foto figcaption { font-size: .85rem; color: var(--nebel); margin-top: 6px }
.gs-zitat { margin: 16px 0 0; padding: 14px 18px; border-left: 4px solid var(--korall); border-radius: 0 var(--radius) var(--radius) 0; background: var(--pflaume) }
.gs-zitat blockquote { margin: 0; font-size: 1.12rem; line-height: 1.5; font-weight: 700; font-style: italic }
.gs-zitat figcaption { margin-top: 6px; font-size: .85rem; color: var(--nebel) }
.gs-text { max-width: 760px; margin: 0 auto; padding: 30px 0 4px }
.gs-text h2 { text-align: left } .gs-text p { line-height: 1.7; font-size: 1.07rem; margin: 0 0 12px }
.gs-gedanken { padding: 34px 0 6px }
.gs-gedanken ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr }
.gs-gedanken li { padding: 18px 18px 14px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie); position: relative }
.gs-gedanken blockquote { margin: 0; font-size: 1.1rem; line-height: 1.45; font-weight: 700 }
.gs-gedanken li p { margin: 8px 0 0; font-size: .8rem; color: var(--nebel) }
.gs-dank { margin-top: 6px !important; font-size: .85rem; color: var(--korall-schrift) !important; font-weight: 700 }
.gs-team { padding: 34px 0 6px }
.gs-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr) }
.gs-team li { text-align: center; padding: 16px 10px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie) }
.gs-team li img, .gs-initiale { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; border: 3px solid var(--korall) }
.gs-initiale { display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; background: var(--verlauf) }
.gs-team h3 { margin: 0 0 4px; font-size: 1.1rem } .gs-team li p { margin: 0; font-size: .88rem; color: var(--nebel); line-height: 1.4 }
.gs-teamfoto { max-width: 420px; margin: 16px auto 0 } .gs-teamfoto img { max-width: 100% }
.gs-schluss { text-align: center; margin: 34px auto 0; max-width: 720px; padding: 26px 18px; border-radius: var(--radius); color: #fff;
  background: radial-gradient(circle at 20% 20%, rgba(255, 79, 122, .35), transparent 55%), linear-gradient(180deg, #1a0a26, #120619) }
.gs-schluss p { line-height: 1.6; font-size: 1.08rem } .gs-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
@media (min-width: 900px) {
  .gs-gedanken ul { grid-template-columns: repeat(3, 1fr) }
  .gs-team ul { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) }
}

/* 22.10. (Owner: «die Biografie unten … mit den Punkten aus dem MEEYOVERSUM in der Mitte, Erkennungswert»): Zeitleiste «Von Anfang an»
   in der Bildsprache des MEEYOVERSUM (meeyoversum.css / meeyoversum3d.js): Nachthimmel, goldene Bahn, violette Planeten mit Goldring
   und Leuchten, Personen als runde Fotos. Nur CSS, kein Skript. Handy: Linie links, eine Spalte; ab 900 px Linie in der Mitte, abwechselnd. */
@font-face { font-family: "Cinzel"; src: url("/static/fonts/Cinzel-latin.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
.gs-weg { --gs-gold: linear-gradient(180deg, #fff6cf, #ffd77a 30%, #c98a24 60%, #ffe9a6 85%, #8c5b12);
  margin: 34px calc(-1 * var(--gs-rand)) 0; padding: 34px var(--gs-rand) 40px; color: #f7eef8; border-radius: 0;
  background: radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 78%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 88%, #fff 50%, transparent 51%),
    radial-gradient(circle at 50% 0%, rgba(139, 61, 255, .28), transparent 60%), radial-gradient(circle at 50% 100%, rgba(255, 79, 122, .2), transparent 55%),
    linear-gradient(180deg, #0b0314, #05010b) }
.gs-weg h2 { text-align: center; font-family: "Cinzel", "Times New Roman", serif; letter-spacing: .08em; color: #ffe2a0;
  text-shadow: 0 0 14px rgba(255, 190, 90, .45) }
.gs-zeitstrahl { list-style: none; margin: 18px auto 0; padding: 0 0 0 34px; position: relative; max-width: 1040px }
.gs-zeitstrahl::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--gs-gold);
  box-shadow: 0 0 10px rgba(255, 196, 94, .55), 0 0 26px rgba(255, 196, 94, .25) }
.gs-punkt { position: relative; margin: 0 0 14px; min-height: 30px }
.gs-knoten { position: absolute; left: -31px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #d9a8f0 0%, #8a3fb0 30%, #3a1052 65%, #16051f 100%);
  box-shadow: 0 0 0 2px #f2c45a, 0 0 12px rgba(255, 190, 90, .65), 0 0 26px rgba(139, 61, 255, .45) }
.gs-person .gs-knoten { width: 46px; height: 46px; left: -43px; top: 4px; box-shadow: 0 0 0 3px #f2c45a, 0 0 18px rgba(255, 190, 90, .7) }
.gs-knoten img { width: 100%; height: 100%; object-fit: cover; display: block }
/* Planeten aus dem MEEYOVERSUM: das Medaillon bringt Goldring und Leuchten selbst mit */
.gs-planet .gs-knoten { width: 60px; height: 60px; left: -51px; top: -2px; background: none; box-shadow: none; overflow: visible }
.gs-planet .gs-karte { margin-left: 20px }
.gs-knoten b { font-family: "Cinzel", serif; font-size: 1.2rem; color: #ffe2a0 }
.gs-person .gs-karte { margin-left: 18px }
.gs-weg .gs-karte { padding: 10px 14px; border-radius: 16px; color: #f7eef8; background: linear-gradient(160deg, rgba(48, 18, 64, .72), rgba(18, 6, 28, .86));
  border: 1px solid rgba(255, 206, 120, .35) }
.gs-weg .gs-datum { margin: 0 0 2px; font-family: "Cinzel", "Times New Roman", serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em;
  background: var(--gs-gold); -webkit-background-clip: text; background-clip: text; color: transparent }
.gs-weg .gs-karte h3 { margin: 0 0 2px; font-size: 1.02rem; color: #fff4c8 } .gs-weg .gs-karte p:last-child { margin: 0; color: #d6c3df; line-height: 1.45; font-size: .95rem }
.gs-person .gs-karte { border-color: rgba(255, 206, 120, .7); box-shadow: 0 0 22px rgba(255, 180, 80, .15) }
@media (min-width: 900px) {
  .gs-zeitstrahl { padding: 0 }
  .gs-zeitstrahl::before { left: 50%; transform: translateX(-50%) }
  .gs-punkt { width: 50%; box-sizing: border-box; padding-right: 40px; margin-bottom: -34px }
  .gs-punkt:nth-child(even) { margin-left: 50%; padding: 0 0 0 40px }
  .gs-knoten { left: auto; right: -10px } .gs-punkt:nth-child(even) .gs-knoten { right: auto; left: -10px }
  .gs-person .gs-knoten { left: auto; right: -23px } .gs-punkt.gs-person:nth-child(even) .gs-knoten { right: auto; left: -23px }
  .gs-planet .gs-knoten { left: auto; right: -30px } .gs-punkt.gs-planet:nth-child(even) .gs-knoten { right: auto; left: -30px }
  .gs-planet .gs-karte { margin-left: 0 } .gs-punkt.gs-planet:nth-child(odd) .gs-karte { margin-right: 14px } .gs-punkt.gs-planet:nth-child(even) .gs-karte { margin-left: 14px }
  .gs-punkt:nth-child(odd) .gs-karte { text-align: right }
  .gs-person .gs-karte { margin-left: 0 } .gs-punkt.gs-person:nth-child(odd) .gs-karte { margin-right: 14px } .gs-punkt.gs-person:nth-child(even) .gs-karte { margin-left: 14px }
}
/* 22.10.2026: Song zur Geschichte */
.gs-song { text-align: center; max-width: 720px; margin: 34px auto 0; padding: 0 4px }
.gs-song p { line-height: 1.6 } .gs-song audio { width: 100%; max-width: 520px; margin: 6px auto 12px; display: block }