/* „Über uns / Unsere Geschichte“ (ueber-uns.php) – Drehspieß-Zeitleiste im Berlin-Design (dunkel, Glas-Karten, Rot).
   Aufbau wie Istanbul Döner (geschichte.php); Fleisch = 3D-Modell (js/geschichte-3d.js), .gs-meat = Maßvorlage und
   Ersatzdarstellung ohne WebGL. Bewusst ohne backdrop-filter (ruckelt beim Scrollen über die 3D-Leinwand).
   Bewegung nur ohne prefers-reduced-motion; „Bewegung anhalten“ (Laufband) stoppt auch die Drehung. */
.gs-page{
  --gs-red-rgb:222,10,23;
  --gs-card:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  --gs-card-solid:#17171a;
  --gs-ease:cubic-bezier(.2,.8,.2,1);
  --snap-ease:cubic-bezier(.34,1.56,.64,1);
  --spin:0;          /* von js/geschichte.js aus der Scrollposition gesetzt */
  --col:220px;       /* Breite der Spieß-Spalte */
  --axis:50%;        /* Lage der Spieß-Achse innerhalb von .wrap */
  --k:1;             /* Skalierung der Fleischbreite */
  --band-pad:clamp(56px, 8vw, 112px);
}
.gs-card__text{ white-space:pre-line; }

/* =========================================================
   Kopfbereich
   ========================================================= */
.gs-hero{ position:relative; isolation:isolate; overflow:hidden; }
.gs-hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(55% 70% at 85% 40%, rgba(var(--gs-red-rgb),.28), transparent 70%),
  radial-gradient(45% 60% at 0% 100%, rgba(var(--gs-red-rgb),.10), transparent 70%); }
.gs-hero__grid{ display:grid; gap:28px; align-items:center; padding-block:clamp(36px,6vw,88px) clamp(36px,5vw,64px); }
@media (min-width:960px){ .gs-hero__grid{ grid-template-columns:minmax(0,1fr) 280px; gap:48px; } }
.gs-hero__title{ margin:0; font-weight:600; letter-spacing:-.035em; line-height:1.02; font-size:clamp(40px, 7.2vw, 88px); }
.gs-hero__title span{ display:block; color:var(--accent); }
.gs-hero__lead{ margin:20px 0 0; max-width:62ch; color:var(--muted); font-size:clamp(16px,1.6vw,18px); line-height:1.65; }
.gs-hero__jump{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; padding:0; list-style:none; }
.page a.gs-jump{ display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 18px 0 8px; border-radius:14px; text-decoration:none;
  background:var(--gs-card); border:1px solid rgba(255,255,255,.14); color:var(--text); box-shadow:var(--shadow-soft); font-weight:600; font-size:15px;
  transition:transform .18s var(--gs-ease), border-color .18s var(--gs-ease), background-color .18s var(--gs-ease); }
.page a.gs-jump:hover{ transform:translateY(-2px); border-color:rgba(var(--gs-red-rgb),.6); }
.gs-jump__tag{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; font-size:16px;
  box-shadow:0 8px 20px rgba(var(--gs-red-rgb),.35); }

/* Logo-Sticker: dreht sich mit dem Scrollen (nicht automatisch) */
/* Schatten als box-shadow am runden Sticker statt filter:drop-shadow (der würde bei jeder Drehung neu berechnet) */
.gs-sticker{ position:relative; justify-self:center; width:clamp(150px,22vw,260px); aspect-ratio:1; border-radius:50%; box-shadow:0 18px 40px rgba(var(--gs-red-rgb),.35); }
.gs-sticker__ring{ display:block; width:100%; height:100%; transform:rotate(calc(var(--spin, 0) * .35deg)); will-change:transform; }
.gs-sticker__disc{ fill:#141416; stroke:rgba(255,255,255,.16); stroke-width:1.5; }
.gs-sticker text{ font-family:inherit; font-weight:600; font-size:14.5px; letter-spacing:1.6px; fill:rgba(255,255,255,.88); }
/* Mitte dunkel mit rotem Ring: das rot-weiße Logo bleibt gut sichtbar */
.gs-sticker::after{ content:""; position:absolute; inset:21%; border-radius:50%; background:radial-gradient(circle at 50% 40%, #222226, #0b0b0c 70%);
  box-shadow:0 0 0 3px var(--accent), 0 0 24px rgba(var(--gs-red-rgb),.35); }
.gs-sticker__signet{ position:absolute; z-index:1; inset:24%; width:52%; height:52%; object-fit:contain; }
@media (max-width:959px){
  .gs-hero__grid{ position:relative; }
  .gs-sticker{ position:absolute; right:20px; top:clamp(28px,5vw,72px); width:clamp(104px, 22vw, 160px); }
  .gs-hero .heroKicker, .gs-hero__title{ padding-right:clamp(110px, 24vw, 180px); }
}
@media (max-width:640px){
  .gs-sticker{ top:20px; right:16px; width:88px; }
  .gs-sticker text{ font-size:17px; }
  .gs-hero .heroKicker, .gs-hero__title{ padding-right:96px; }
  .gs-hero__jump li{ flex:1 1 100%; }
  .page a.gs-jump{ width:100%; box-sizing:border-box; }
}

/* =========================================================
   Bänder
   ========================================================= */
.gs-band{ position:relative; padding-block:var(--band-pad); overflow:clip; }
.gs-band--a{ background:radial-gradient(900px 600px at 50% 0%, rgba(var(--gs-red-rgb),.10), transparent 70%), var(--bg-2); border-top:1px solid var(--line); }
.gs-band--b{ background:radial-gradient(900px 700px at 50% 100%, rgba(var(--gs-red-rgb),.14), transparent 70%), #0f0f11; }

/* =========================================================
   DER DREHSPIESS
   ========================================================= */
.gs-spit{ position:relative; isolation:isolate; }
/* Stahlstange: läuft durch das ganze Band (und optisch unter dem Laufband weiter) */
.gs-spit::before{ content:""; position:absolute; z-index:0; left:var(--axis); width:8px; margin-left:-4px; top:0; bottom:calc(-1 * var(--band-pad));
  border-radius:4px; background:linear-gradient(90deg, #5f5c57, #e9e6df 40%, #a9a59d 60%, #4d4a45); box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.gs-spit--b::before{ top:calc(-1 * var(--band-pad)); bottom:20px; }
/* Glut: eigenes Element, das js/geschichte.js per transform mit der Bildschirmmitte verschiebt (Compositor –
   kein Neuzeichnen beim Scrollen, wichtig für Safari). */
.gs-spit > *{ position:relative; z-index:1; }
.gs-spit > .gs-glow{ position:absolute; z-index:0; left:var(--axis); top:0; width:min(560px, 140vw); aspect-ratio:1;
  transform:translate3d(-50%, 40vh, 0) translateY(-50%); pointer-events:none; will-change:transform;
  background:radial-gradient(closest-side, rgba(var(--gs-red-rgb),.30), rgba(var(--gs-red-rgb),.09) 55%, transparent); }

/* Spitze oben */
.gs-spit__tip{ height:96px; position:relative; }
.gs-spit__tip::before{ content:""; position:absolute; left:var(--axis); top:0; width:18px; height:38px; margin-left:-9px;
  background:linear-gradient(90deg, #8d8a84, #f2efe8 50%, #8d8a84); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.gs-spit--a::before{ top:36px; }

/* Kapitel-Schild: auf die Stange gesteckt */
.gs-sign{ position:relative; z-index:3; width:fit-content; max-width:100%; box-sizing:border-box; margin:0 auto; padding:20px 28px 22px; text-align:center;
  background:var(--gs-card), var(--gs-card-solid); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  scroll-margin-top:calc(var(--navH) + 24px); }
.gs-sign__kicker{ margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#ff5a64; }
.gs-sign__title{ margin:0; font-weight:600; letter-spacing:-.03em; font-size:clamp(34px,5.4vw,64px); line-height:1.02; }
.gs-sign__title::after{ content:""; display:block; width:56px; height:4px; margin:14px auto 0; border-radius:2px; background:var(--accent); }
.gs-sign__note{ margin:12px auto 0; max-width:42ch; font-size:15px; line-height:1.55; color:var(--muted); }

/* Deckplatte oben / Teller unten */
.gs-plate{ position:relative; z-index:3; display:block; width:calc(var(--w0, 190) * var(--k) * 1px + 24px); height:12px; margin:40px 0 0 var(--axis); transform:translateX(-50%);
  border-radius:6px; background:linear-gradient(180deg, #e9e6df, #8d8a84); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.gs-plate--bottom{ margin:0 0 0 var(--axis); width:calc(var(--w0, 190) * var(--k) * 1px + 60px); height:18px; background:linear-gradient(180deg, #2a2a2e, #111113);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 34px rgba(var(--gs-red-rgb),.25); }

/* Zeitleiste: eine Zeile pro Kapitel = eine Fleischschicht */
.gs-tl{ margin:0; padding:0; list-style:none; }
.gs-ch{ display:grid; grid-template-columns:minmax(0,1fr) var(--col) minmax(0,1fr); grid-template-areas:"card core year"; align-items:center; }
.gs-ch:nth-child(even){ grid-template-areas:"year core card"; }
.gs-ch__core{ grid-area:core; align-self:stretch; position:relative; z-index:2; min-height:300px; }
.gs-ch__card{ grid-area:card; justify-self:end; width:100%; max-width:450px; padding-block:44px; position:relative; z-index:1; }
.gs-ch:nth-child(even) .gs-ch__card{ justify-self:start; }
.gs-ch__year{ grid-area:year; min-width:0; padding:0 0 0 36px; container-type:inline-size; }
.gs-ch:nth-child(even) .gs-ch__year{ padding:0 36px 0 0; text-align:right; }

/* Fleisch: Platzhalter für Breite/Verjüngung (liest js/geschichte-3d.js) und Ersatzdarstellung ohne WebGL. */
.gs-meat{ position:absolute; top:0; bottom:0; left:50%; width:calc(var(--w) * var(--k) * 1px); transform:translateX(-50%);
  --taper:calc((var(--w) - var(--wb)) / var(--w) * 50%);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--taper)) 100%, var(--taper) 100%);
  background:
    linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0) 28%, rgba(255,214,170,.2) 42%, rgba(0,0,0,0) 58%, rgba(0,0,0,.62)),
    repeating-linear-gradient(0deg, #6d3518 0 3px, #9c5a2b 3px 7px, #c4874c 7px 9px, #82431f 9px 12px); }
.gs-spit.has-3d .gs-meat{ visibility:hidden; }
.gs-spit > .gs-spit__3d{ position:absolute; z-index:2; left:var(--axis); top:0; height:0; transform:translateX(-50%); pointer-events:none; }
.gs-spit__3d canvas{ position:absolute; top:0; left:0; display:block; will-change:transform; }

/* Karte: Glas-Optik wie die übrigen Berlin-Karten (ohne Weichzeichner), schnappt an die Schicht an */
.gs-card{ position:relative; padding:22px 24px; border-radius:var(--radius); background:var(--gs-card), var(--gs-card-solid); color:var(--text);
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-soft); transition:transform .2s var(--gs-ease), border-color .2s var(--gs-ease); }
/* Spießnadel: verbindet Karte und Schicht */
.gs-card::before{ content:""; position:absolute; top:50%; left:100%; width:calc(var(--col) / 2 + 1px); height:4px; margin-top:-2px; z-index:-1;
  border-radius:2px; background:linear-gradient(180deg, #e9e6df, #8d8a84); }
.gs-card::after{ content:""; position:absolute; top:50%; right:-8px; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 5px rgba(var(--gs-red-rgb),.18); }
.gs-ch:nth-child(even) .gs-card::before{ left:auto; right:100%; }
.gs-ch:nth-child(even) .gs-card::after{ right:auto; left:-8px; }
.gs-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#ff5a64; }
.gs-card__no{ font-size:13px; letter-spacing:.04em; padding:3px 8px; border-radius:8px; background:var(--accent); color:#fff; }
.gs-card__title{ margin:0; font-weight:600; letter-spacing:-.02em; font-size:clamp(21px,2.2vw,26px); line-height:1.15; }
/* ganzes Bild zeigen (auch Hochformat): höchstens 380 px hoch, sonst eingepasst statt beschnitten */
.gs-card__img{ display:block; width:100%; height:auto; max-height:380px; object-fit:contain; background:#0f0f11; margin:14px 0 0; border-radius:12px; border:1px solid rgba(255,255,255,.10); }
.gs-card__text{ margin:12px 0 0; color:var(--muted); font-size:15.5px; line-height:1.62; }
.gs-card__text strong{ color:var(--text); font-weight:600; }
.gs-card__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.gs-card__chips .chip{ display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); font-size:13px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .gs-card:hover{ transform:translateY(-3px); border-color:rgba(var(--gs-red-rgb),.55); }
}

/* Fakten-Karte „Heute in Hennef“ */
.gs-card--today{ border-color:rgba(var(--gs-red-rgb),.45); }
.gs-facts{ display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.gs-facts li{ display:grid; grid-template-columns:96px 1fr; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted); }
.gs-facts li:last-child{ border-bottom:0; padding-bottom:0; }
.gs-facts__k{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-top:3px; }
.page .gs-facts a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-12px; color:var(--text); font-weight:600; text-decoration:underline;
  text-decoration-color:rgba(var(--gs-red-rgb),.8); text-decoration-thickness:2px; text-underline-offset:4px; overflow-wrap:anywhere; }

/* Große Jahreszahl / Epoche: Kontur → beim Erreichen rot gefüllt */
.gs-year{ display:inline-block; margin:0; padding:.06em .03em .1em; font-weight:700; letter-spacing:-.03em; line-height:.95; white-space:nowrap;
  font-size:min(150px, calc(100cqi / (var(--len) * .62)));
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55);
  background:linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 100% no-repeat; -webkit-background-clip:text; background-clip:text; }
.gs-year__cap{ display:block; margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* ---------- Zustände (nur mit JS und ohne „Bewegung reduzieren“; sonst alles sofort sichtbar) ---------- */
@media (prefers-reduced-motion:no-preference){
  .gs-js .gs-year{ transition:background-size 1s var(--gs-ease) .1s; }
  .gs-js .gs-ch:not(.is-reached) .gs-year{ background-size:100% 0%; }
  .gs-js .gs-ch__card{ transition:opacity .35s ease, transform .75s var(--snap-ease); }
  .gs-js .gs-ch:not(.is-reached) .gs-ch__card{ opacity:0; transform:translateX(-60px) rotate(-3deg); }
  .gs-js .gs-ch:nth-child(even):not(.is-reached) .gs-ch__card{ transform:translateX(60px) rotate(3deg); }
  .gs-js .gs-ch__year .gs-year__cap{ transition:opacity .5s ease .3s; }
  .gs-js .gs-ch:not(.is-reached) .gs-year__cap{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .gs-sticker__ring{ transform:none; } }

/* ---------- iPad hochkant: schmalere Spieß-Spalte, mehr Platz für die Karten ---------- */
@media (min-width:761px) and (max-width:1024px){
  .gs-page{ --col:160px; --k:.78; }
  .gs-ch__year{ padding-left:24px; }
  .gs-ch:nth-child(even) .gs-ch__year{ padding-right:24px; }
}

/* ---------- Schmal: Spieß links ---------- */
@media (max-width:760px){
  .gs-page{ --col:60px; --axis:30px; --k:.3; }
  /* Eine Achse für alles: Mitte der Spieß-Spalte. Stange, Glut und 3D-Leinwand sind absolut zum Außenrand von .gs-spit
     positioniert (inkl. Seitenabstand), Spitze und Platten liegen im Inhaltsbereich (ohne Seitenabstand). */
  .gs-spit{ --pad:max(16px, env(safe-area-inset-left)); padding-left:var(--pad); padding-right:max(16px, env(safe-area-inset-right));
    --axis:calc(var(--pad) + var(--col) / 2); }
  .gs-spit__tip::before{ left:calc(var(--col) / 2); }
  .gs-plate, .gs-plate--bottom{ margin-left:calc(var(--col) / 2); }
  .gs-spit__tip{ height:72px; }
  .gs-sign{ margin:0 0 0 12px; text-align:left; padding:16px 18px 18px; }
  .gs-sign__title::after{ margin-left:0; }
  .gs-sign__note{ margin-left:0; }
  .gs-plate:not(.gs-plate--bottom){ margin-top:32px; }
  .gs-ch, .gs-ch:nth-child(even){ grid-template-columns:var(--col) minmax(0,1fr); grid-template-areas:"core year" "core card"; column-gap:16px; align-items:start; }
  .gs-ch__core{ grid-row:1 / span 2; min-height:0; }
  .gs-ch__year, .gs-ch:nth-child(even) .gs-ch__year{ padding:36px 0 0; text-align:left; }
  .gs-ch__card, .gs-ch:nth-child(even) .gs-ch__card{ justify-self:stretch; max-width:none; padding-block:14px 40px; }
  .gs-year{ font-size:min(84px, calc(100cqi / (var(--len) * .62))); -webkit-text-stroke-width:1.2px; }
  .gs-card{ padding:18px; }
  .gs-card::before, .gs-ch:nth-child(even) .gs-card::before{ left:auto; right:100%; top:34px; width:calc(var(--col) / 2 + 16px + 1px); }
  .gs-card::after, .gs-ch:nth-child(even) .gs-card::after{ right:auto; left:-8px; top:34px; }
  .gs-js .gs-ch:not(.is-reached) .gs-ch__card, .gs-js .gs-ch:nth-child(even):not(.is-reached) .gs-ch__card{ transform:translateX(36px) rotate(2deg); }
  .gs-facts li{ grid-template-columns:1fr; gap:2px; }
  .gs-plate--bottom{ width:80px; }
}

/* =========================================================
   Laufband zwischen Kapitel A und B
   ========================================================= */
.gs-marquee{ position:relative; z-index:5; display:flex; align-items:center; background:var(--accent); color:#fff; overflow:hidden;
  box-shadow:0 18px 50px rgba(var(--gs-red-rgb),.25); }
.gs-marquee__viewport{ flex:1; min-width:0; overflow:hidden; }
.gs-marquee__track{ display:flex; width:max-content; margin:0; padding:16px 0; font-weight:600; font-size:clamp(20px,2.6vw,32px); line-height:1; letter-spacing:-.01em; white-space:nowrap; }
.gs-marquee__group{ display:flex; align-items:center; gap:28px; padding-right:28px; }
.gs-marquee__star{ color:rgba(255,255,255,.7); font-size:.7em; }
@media (prefers-reduced-motion:no-preference){
  .gs-marquee__track{ animation:gs-marquee 34s linear infinite; }
  .gs-marquee:hover .gs-marquee__track, .is-still .gs-marquee__track{ animation-play-state:paused; }
}
@keyframes gs-marquee{ to{ transform:translateX(-50%); } }
.gs-marquee__toggle{ flex:none; align-self:stretch; min-width:44px; padding:0 16px; border:0; cursor:pointer;
  background:rgba(0,0,0,.35); color:#fff; font:600 13px/1.2 inherit; font-family:inherit; letter-spacing:.02em; }
.gs-marquee__toggle:hover{ background:rgba(0,0,0,.5); }
.gs-marquee__toggle:focus-visible{ outline:2px solid #fff; outline-offset:-5px; }
@media (prefers-reduced-motion:reduce){ .gs-marquee__toggle{ display:none; } }
html:not(.gs-js) [data-js-only]{ display:none !important; }
@media (max-width:640px){ .gs-marquee__toggle{ font-size:12px; padding:0 10px; max-width:96px; } }

/* =========================================================
   Abschluss
   ========================================================= */
.gs-page .storyBox.gs-cta{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--gs-card), var(--gs-card-solid);
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"copy img" "actions img"; gap:8px 28px; align-items:center; padding:clamp(22px,3vw,36px); }
.gs-cta__copy{ grid-area:copy; }
.gs-cta__copy .h2{ font-size:clamp(28px,4vw,44px); font-weight:600; }
.gs-cta__img{ grid-area:img; width:clamp(140px,18vw,220px); height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.12); }
.gs-cta__actions{ grid-area:actions; display:flex; flex-wrap:wrap; gap:10px 12px; min-width:0; }
.gs-page .storyBox.gs-cta .gs-cta__actions .btn{ margin-top:0; }
.gs-cta__actions{ margin-top:14px; }
.gs-page .storyBox.gs-cta .btn{ margin-top:8px; }
@media (max-width:640px){
  .gs-page .storyBox.gs-cta{ grid-template-columns:1fr; grid-template-areas:"img" "copy" "actions"; }
  .gs-cta__img{ width:min(100%, 320px); max-height:none; aspect-ratio:1; justify-self:center; }
  .gs-cta__actions .btn{ flex:1 1 100%; }
}