/* sisign — Design-Tokens und Basis (Designvorgabe 12.07.2026, Richtung: Signatur/Bernstein)
   Regel: accent nie als Flächenfarbe hinter Text. Auf Hell für Text immer --accent-text (AA). */

:root {
  --bg: #F4F5F6;
  --surface: #FFFFFF;
  --ink: #16181B;
  --text-2: #575C63;
  --text-3: #8A9097;
  --line: #E2E4E7;
  --accent: #C2751B;
  --accent-text: #A35F0E;
  --ok: #3E7D4E;
  /* dunkle Sektionen (fest, unabhängig vom Modus) */
  --d-bg: #101214;
  --d-surface: #191C1F;
  --d-text: #E8EAEC;
  --d-text-2: #9AA0A8;
  --d-line: #2A2E33;
  --d-accent: #E39A3B;
  --d-ok: #7FB07F;
}

/* Echter Dunkel-Modus: helle Flächen wechseln auf die Dunkel-Spalte,
   dunkle Sektionen behalten ihre Gestaltung (Vorgabe: kein Invert-Filter). */
html[data-theme="dark"] {
  --bg: #101214;
  --surface: #191C1F;
  --ink: #E8EAEC;
  --text-2: #9AA0A8;
  --text-3: #8A9097;
  --line: #2A2E33;
  --accent: #E39A3B;
  --accent-text: #E39A3B;
  --ok: #7FB07F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
a { color: var(--ink); }
a:hover { color: var(--accent-text); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
.sec { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }

h1, h2, h3, .serif { font-family: 'Newsreader', serif; font-weight: 500; margin: 0; }
h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; text-wrap: pretty; }
h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; }

.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.mono { font-family: 'IBM Plex Mono', monospace; font-weight: 400; letter-spacing: .06em; }
.text2 { color: var(--text-2); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot-ok { background: var(--ok); }
.dot-accent { background: var(--accent); }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--surface);
  padding: 14px 26px; border: none; border-radius: 2px;
  font-family: 'Archivo', sans-serif; font-size: 14.5px; font-weight: 600;
}
html[data-theme="dark"] .btn { background: #E8EAEC; color: #16181B; }
.btn-line {
  display: inline-block; text-decoration: none; color: var(--ink);
  padding: 14px 4px; font-size: 14.5px; font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.card { border: 1px solid var(--line); background: var(--surface); }
.chip {
  background: var(--bg); border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 14px; font-family: 'Archivo', sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}

/* dunkle Marken-Sektionen */
.dark-sec { background: var(--d-bg); color: var(--d-text); }
.dark-sec .kicker { color: var(--d-accent); }
.dark-sec .card, .dark-sec .d-card { border: 1px solid var(--d-line); background: var(--d-surface); }
.dark-sec .text2 { color: var(--d-text-2); }
.dark-sec a { color: var(--d-text); }
.dark-sec a:hover { color: var(--d-accent); }
.dark-sec .btn { background: var(--d-text); color: #16181B; }
.dark-sec .btn-line { color: var(--d-text); border-bottom-color: var(--d-accent); }

/* Navigation */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 15px; padding-bottom: 15px; }
.nav-logo { text-decoration: none; font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; color: var(--ink); }
.nav-logo span, .logo-dot { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; padding-bottom: 3px; }
.nav-links a.aktiv { color: var(--ink); border-bottom-color: var(--accent); }
.nav-status { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-2); letter-spacing: .08em; }
.nav-cta { text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.theme-btn { background: none; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 12px; }
.burger span { width: 22px; height: 2px; background: var(--ink); display: block; }
.nav-mobile { display: none; flex-direction: column; border-top: 1px solid var(--line); padding: 12px clamp(20px, 5vw, 48px) 20px; }
.nav-mobile a { text-decoration: none; font-size: 16px; font-weight: 500; color: var(--text-2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav-mobile a.aktiv { color: var(--ink); }
.nav-mobile a.cta { color: var(--accent-text); font-weight: 600; border-bottom: none; padding: 14px 0; }
@media (max-width: 919px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-mobile.offen { display: flex; }
}

/* Assistent */
.as-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.as-head .t { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10.5px; letter-spacing: .08em; }
.as-status { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-2); }
.as-status .dot { width: 7px; height: 7px; }
.as-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.as-intro { font-family: 'Newsreader', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--text-3); }
.as-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); transform: translateY(2px); margin-left: 1px; }
.as-q { align-self: flex-end; background: var(--bg); border: 1px solid var(--bg); border-radius: 8px 8px 2px 8px; padding: 10px 14px; font-size: 14px; line-height: 1.55; max-width: 88%; }
.as-a { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; padding: 10px 14px; font-size: 14px; line-height: 1.55; max-width: 88%; }
.as-typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; }
.as-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: as-blink 1.2s infinite; }
.as-typing span:nth-child(2) { animation-delay: .2s; }
.as-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes as-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.as-eingabe { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.as-eingabe input { flex: 1; border: none; background: none; font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--ink); padding: 6px 0; }
.as-eingabe input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.as-eingabe button { background: var(--ink); color: var(--surface); border: none; border-radius: 2px; padding: 9px 18px; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; }
html[data-theme="dark"] .as-eingabe button { background: #E8EAEC; color: #16181B; }
.as-kennzeichen { padding: 9px 18px; background: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--text-2); letter-spacing: .05em; }
.as-aus { padding: 22px 18px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

/* Schalter */
.schalter-pille { width: 56px; height: 30px; border-radius: 15px; background: var(--accent); position: relative; display: inline-block; transition: background .25s; flex: none; }
.schalter-pille .knopf { position: absolute; top: 3px; left: 29px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; display: block; transition: left .25s; }
.schalter-pille.aus { background: #2A2E33; }
.schalter-pille.aus .knopf { left: 3px; }

/* FAQ */
.faq-frage { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: none; padding: 18px 2px; cursor: pointer; font-family: 'Archivo', sans-serif; text-align: left; }
.faq-frage .q { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.faq-frage .icon { font-family: 'Newsreader', serif; font-size: 22px; color: var(--accent-text); flex: none; }
.faq-antwort { display: none; padding: 0 2px 20px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); max-width: 560px; }
.faq-eintrag.offen .faq-antwort { display: block; }

/* Scroll-Reveal (progressive enhancement) */
@keyframes sec-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: sec-reveal .55s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 16%; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hr-0 { animation: hero-rise .6s ease both; }
.hr-1 { animation: hero-rise .6s ease .1s both; }
.hr-2 { animation: hero-rise .6s ease .2s both; }
.hr-3 { animation: hero-rise .6s ease .3s both; }
.hr-35 { animation: hero-rise .6s ease .35s both; }
.hr-45 { animation: hero-rise .6s ease .45s both; }
.hr-5 { animation: hero-rise .7s ease .5s both; }
.hr-7 { animation: hero-rise .7s ease .7s both; }
.hr-11 { animation: hero-rise .6s ease 1.1s both; }
.hr-13 { animation: hero-rise .6s ease 1.3s both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Footer */
.footer { background: var(--d-bg); color: var(--d-text); font-family: 'Archivo', sans-serif; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--d-accent); }
.footer a:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 3px; }

/* ===== Grosse Buehne (v3) ===== */
.stage { padding-top: clamp(88px, 12vw, 176px); padding-bottom: clamp(88px, 12vw, 176px); }
.stage-sm { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.display-xl { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(40px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.display-l { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; text-wrap: balance; margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.65; color: var(--text-2); }
.zentriert { text-align: center; }
.zentriert .lead { margin-left: auto; margin-right: auto; }

/* Foto-Frame: zeigt gestalteten Grund, echtes Foto legt sich darueber sobald Datei existiert */
.foto-frame { position: relative; overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, color-mix(in srgb, var(--ink) 10%, var(--surface)) 100%); }
.foto-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 28%); }
.foto-frame .frame-hinweis { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .1em; background: var(--surface); border: 1px solid var(--line); padding: 5px 9px; color: var(--text-2); }
.foto-frame.hat-bild .frame-hinweis { display: none; }
.foto-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 3vw, 34px); background: linear-gradient(transparent, rgba(10,11,12,.62)); color: #FFFFFF; }

/* Daten-Overlay-Pillen im Bild (godaylight-Muster) */
.overlay-pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.94); border: 1px solid #E2E4E7; border-radius: 99px; padding: 9px 15px; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: .06em; color: #16181B; }

/* Menschen-Galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.galerie .foto-frame { aspect-ratio: 3 / 4; }

/* Buehnen-Sektion dunkel mit Produkt */
.produkt-buehne { background: radial-gradient(ellipse 75% 60% at 50% 24%, #1C2024 0%, #101214 70%); color: #E8EAEC; }

/* Scroll-Reveal auch fuer Buehnen */
@supports (animation-timeline: view()) {
  [data-reveal] { animation: sec-reveal .55s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 16%; }
}

/* ===== Akte: jede Sektion eine Vollbild-Buehne (v4) ===== */
.akt { scroll-margin-top: 64px; position: relative; }
.akt-voll { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; }
.akt > .wrap { width: 100%; }
@media (max-height: 640px) { .akt-voll { min-height: auto; } }

/* Canvas-Ebene hinter Akt-Inhalt */
.akt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.akt > .wrap, .akt > .verlauf-anker { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .akt-canvas { display: none; } }

/* Gestaffelter Auftritt der Inhalte je Akt */
@supports (animation-timeline: view()) {
  .st-1, .st-2, .st-3, .st-4 { animation: sec-reveal .5s ease-out both; animation-timeline: view(); }
  .st-1 { animation-range: entry 0% entry 14%; }
  .st-2 { animation-range: entry 3% entry 18%; }
  .st-3 { animation-range: entry 6% entry 22%; }
  .st-4 { animation-range: entry 9% entry 26%; }
}

/* Verlaufs-Navigation rechts */
.verlauf { position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.verlauf button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--text-3); background: transparent; cursor: pointer; padding: 0; position: relative; transition: background .25s, border-color .25s, transform .25s; }
.verlauf button.aktiv { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.verlauf button .vl { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.verlauf button:hover .vl, .verlauf button:focus-visible .vl { opacity: 1; }
@media (max-width: 919px) { .verlauf { display: none; } }

/* ===== Licht-Inszenierung: ruhige Verlaeufe statt Gimmicks (v4) ===== */
.glanz { position: relative; overflow: hidden; }
.glanz > * { position: relative; z-index: 2; }
.glanz::before { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 38% at 22% 18%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 50% 42% at 82% 76%, color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 72%);
  animation: glanz-drift 34s ease-in-out infinite alternate; }
@keyframes glanz-drift { from { transform: translate3d(-2.5%, -2%, 0) scale(1); } to { transform: translate3d(2.5%, 2.5%, 0) scale(1.06); } }

.produkt-buehne { position: relative; overflow: hidden; }
.produkt-buehne > * { position: relative; z-index: 2; }
.produkt-buehne::before { content: ""; position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 28% 22%, rgba(227,154,59,.13) 0%, transparent 70%),
    radial-gradient(ellipse 46% 40% at 76% 70%, rgba(227,154,59,.07) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 55% 40%, rgba(138,144,151,.08) 0%, transparent 75%);
  animation: glanz-drift 40s ease-in-out infinite alternate; }

.dark-sec.glanz-dunkel { position: relative; overflow: hidden; }
.dark-sec.glanz-dunkel > * { position: relative; z-index: 2; }
.dark-sec.glanz-dunkel::before { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 48% 40% at 74% 24%, rgba(227,154,59,.09) 0%, transparent 70%);
  animation: glanz-drift 38s ease-in-out infinite alternate reverse; }

@media (prefers-reduced-motion: reduce) { .glanz::before, .produkt-buehne::before, .dark-sec.glanz-dunkel::before { animation: none; } }

/* Lesefortschritt oben */
.lesefortschritt { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
@supports (animation-timeline: scroll()) {
  .lesefortschritt { animation: lese-f linear both; animation-timeline: scroll(root); }
  @keyframes lese-f { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.akt .stage, .akt .stage-sm { padding-top: clamp(56px, 8vh, 92px); padding-bottom: clamp(56px, 8vh, 92px); }