/* Scriptomat – Changelog
   Alle Regeln unter .scriptomat-changelog gescoped bzw. mit Präfix "scriptomat-".
   Keine globalen Selektoren, keine externen Frameworks, keine CDN-Abhängigkeiten. */

.scriptomat-changelog {
  --scriptomat-green: #3BD7A2;
  --scriptomat-green-700: #149a6f;
  --scriptomat-green-50: #eefbf6;
  --scriptomat-green-100: #d7f6ea;
  --scriptomat-blue: #3557b7;
  --scriptomat-blue-bg: rgba(53,87,183,0.08);
  --scriptomat-blue-bd: rgba(53,87,183,0.20);
  --scriptomat-amber: #B7791F;
  --scriptomat-amber-bg: rgba(183,121,31,0.10);
  --scriptomat-amber-bd: rgba(183,121,31,0.25);
  --scriptomat-ink-900: #1B1C2B;
  --scriptomat-ink-600: #4a4c5c;
  --scriptomat-ink-500: #565a6e;
  --scriptomat-ink-400: #6e7286;
  --scriptomat-border: #e3e4e8;
  --scriptomat-border-strong: #c4c8d2;
  --scriptomat-surface-page: #ffffff;
  --scriptomat-surface-muted: #f1f2f4;
  --scriptomat-radius-md: 10px;
  --scriptomat-radius-lg: 16px;
  --scriptomat-shadow-sm: 0 1px 3px rgba(27,28,43,0.06), 0 1px 2px rgba(27,28,43,0.04);
  --scriptomat-dur: 200ms;
  --scriptomat-ease: cubic-bezier(.22,1,.36,1);
  --scriptomat-font-display: "Schibsted Grotesk", "Segoe UI", -apple-system, sans-serif;
  --scriptomat-font-text: "Hanken Grotesk", "Segoe UI", -apple-system, sans-serif;

  font-family: var(--scriptomat-font-text);
  color: var(--scriptomat-ink-600);
  background: var(--scriptomat-surface-page);
  box-sizing: border-box;
}
.scriptomat-changelog *,
.scriptomat-changelog *::before,
.scriptomat-changelog *::after { box-sizing: inherit; }

.scriptomat-changelog a { color: var(--scriptomat-green-700); font-weight: 600; text-decoration: none; }
.scriptomat-changelog a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.scriptomat-hero { position: relative; background: var(--scriptomat-surface-muted); overflow: hidden; }
.scriptomat-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--scriptomat-border-strong) 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.35; pointer-events: none;
}
.scriptomat-hero::after {
  content: ""; position: absolute; top: -140px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(59,215,162,0.22), transparent 62%); pointer-events: none;
}
.scriptomat-hero__inner { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(40px,8vw,72px) 64px; }
.scriptomat-back-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; font-weight: 600;
  color: var(--scriptomat-ink-500); margin-bottom: 28px;
}
.scriptomat-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--scriptomat-green-700); margin: 0;
}
.scriptomat-h1 {
  font-family: var(--scriptomat-font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.75rem); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--scriptomat-ink-900); margin: 12px 0 0;
}
.scriptomat-lead { font-size: 1.1875rem; line-height: 1.6; color: var(--scriptomat-ink-500); margin: 24px 0 0; max-width: 62ch; }

/* ---------- Versionen ---------- */
.scriptomat-versions__inner { max-width: 1320px; margin: 0 auto; padding: clamp(40px,8vw,72px) 64px; }

.scriptomat-year-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.scriptomat-year-heading__label {
  font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1.6rem; color: var(--scriptomat-ink-900);
}
.scriptomat-year-heading__line { flex: 1; height: 1px; background: var(--scriptomat-border); }

.scriptomat-version-list { display: flex; flex-direction: column; gap: 40px; }
.scriptomat-version-list--nested { margin-top: 32px; }

.scriptomat-version {
  position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 32px;
}
.scriptomat-version::before {
  content: ""; position: absolute; left: 7px; top: 34px; bottom: -40px; width: 2px; background: var(--scriptomat-border);
}
.scriptomat-version:last-child::before { display: none; }

.scriptomat-version__meta { position: relative; padding-left: 34px; }
.scriptomat-version__marker {
  position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--scriptomat-border-strong);
  box-shadow: 0 0 0 4px var(--scriptomat-surface-page);
}
.scriptomat-version--latest .scriptomat-version__marker { background: var(--scriptomat-green); border-color: var(--scriptomat-green); }
.scriptomat-version__number { font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1.35rem; color: var(--scriptomat-ink-900); margin: 0; }
.scriptomat-version__date { display: block; font-size: 0.95rem; color: var(--scriptomat-ink-400); margin-top: 4px; }
.scriptomat-badge {
  display: inline-flex; margin-top: 12px; align-items: center; gap: 6px;
  background: var(--scriptomat-green-50); border: 1px solid var(--scriptomat-green-100); color: var(--scriptomat-green-700);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 999px;
}

.scriptomat-version__card {
  background: #fff; border: 1px solid var(--scriptomat-border); border-radius: var(--scriptomat-radius-lg);
  box-shadow: var(--scriptomat-shadow-sm); padding: 28px 32px;
}
.scriptomat-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--scriptomat-border);
  padding-bottom: 16px; margin-bottom: 18px;
}
.scriptomat-tab {
  font-family: var(--scriptomat-font-text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--scriptomat-border); background: #fff;
  color: var(--scriptomat-ink-500); transition: all var(--scriptomat-dur) var(--scriptomat-ease);
}
.scriptomat-tab:hover { border-color: var(--scriptomat-green); color: var(--scriptomat-green-700); }
.scriptomat-tab--active {
  border-color: var(--scriptomat-green); background: var(--scriptomat-green-50); color: var(--scriptomat-green-700);
}

.scriptomat-change-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.scriptomat-change { display: flex; align-items: flex-start; gap: 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--scriptomat-ink-600); }
.scriptomat-change[hidden] { display: none; }
.scriptomat-tag {
  flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 74px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; border: 1px solid transparent;
}
.scriptomat-tag--neu { color: var(--scriptomat-green-700); background: var(--scriptomat-green-50); border-color: var(--scriptomat-green-100); }
.scriptomat-tag--verbessert { color: var(--scriptomat-blue); background: var(--scriptomat-blue-bg); border-color: var(--scriptomat-blue-bd); }
.scriptomat-tag--behoben { color: var(--scriptomat-amber); background: var(--scriptomat-amber-bg); border-color: var(--scriptomat-amber-bd); }

/* ---------- Jahres-Gruppe (native <details>) ---------- */
.scriptomat-year-group { margin-top: 48px; }
.scriptomat-year-summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
}
.scriptomat-year-summary::-webkit-details-marker { display: none; }
.scriptomat-year-summary__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1.6rem; color: var(--scriptomat-ink-900);
}
.scriptomat-year-summary__chevron { color: var(--scriptomat-green-700); transition: transform var(--scriptomat-dur) var(--scriptomat-ease); }
.scriptomat-year-group[open] .scriptomat-year-summary__chevron { transform: rotate(90deg); }
.scriptomat-year-summary__count { font-size: 0.9rem; font-weight: 600; color: var(--scriptomat-ink-400); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .scriptomat-hero__inner, .scriptomat-versions__inner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 760px) {
  .scriptomat-version { grid-template-columns: 1fr; gap: 14px; }
  .scriptomat-version::before { display: none; }
  .scriptomat-version__meta { padding-left: 26px; }
  .scriptomat-version__card { padding: 22px 20px; }
}
@media (max-width: 640px) {
  .scriptomat-hero__inner, .scriptomat-versions__inner { padding-left: 22px; padding-right: 22px; }
  .scriptomat-year-summary { flex-wrap: wrap; }
  .scriptomat-year-heading__line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scriptomat-changelog * { transition: none !important; }
}

/* -------------------------------------------------------------------------
   Einpassung in das Seitensystem dieser Website
   Ergaenzung gegenueber dem Handoff-Fragment. Das Fragment war fuer eine
   Seite ohne eigenen Satzspiegel gebaut und trug deshalb 1320 px. Hier
   steht es innerhalb einer Website, deren Satzspiegel 1280 px misst -
   sonst laege der Versionsverlauf breiter als Kopfzeile und Fuss und die
   linken Kanten stimmten nicht ueberein.
   Nur die Breite wird angeglichen. Bauform, Farben, Radien und Verhalten
   des Fragments bleiben unveraendert.
   ------------------------------------------------------------------------- */
.scriptomat-versions__inner { max-width: 1280px; }

/* Umbruch auf schmalen Fenstern.
   Die Fassungszeile ist ein Raster aus 200 px und 1fr. Eine 1fr-Spalte
   traegt als Mindestbreite ihren eigenen Mindestinhalt - und der ist hier
   die laengste Aenderungszeile samt nicht umbrechender Kennzeichnung.
   Auf 390 px schob die Spalte die Seite dadurch um rund 80 px waagerecht
   auf. minmax(0, ...) nimmt der Spalte diese Mindestbreite; der Text
   bricht dann um, statt die Seite zu verbreitern.
   Sachlich aendert sich nichts, es ist ausschliesslich eine Umbruchregel. */
.scriptomat-version { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.scriptomat-change__text { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 760px) {
  .scriptomat-version { grid-template-columns: minmax(0, 1fr); }
}