/* =========================================================================
   changelog.css — Server-Übersicht (servers.html) und Changelog-Detail
   ========================================================================= */

/* =========================================================================
   Übersicht: große Serverkarten
   ========================================================================= */

.srv-list {
   display: grid;
   gap: var(--sp-5);
   padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--section-y);
}

.server-card {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
   padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   overflow: hidden;
   transition: border-color var(--t-sm) var(--ease-out), box-shadow var(--t-sm) var(--ease-out);
}

/* Linker Akzent-Rail, füllt sich beim Hover */
.server-card::before {
   content: "";
   position: absolute;
   inset-block: 0;
   left: 0;
   width: 3px;
   background: var(--accent);
   transform: scaleY(0.12);
   transform-origin: top;
   transition: transform var(--t-lg) var(--ease-out);
}

.server-card:hover,
.server-card:focus-within {
   border-color: var(--edge-strong);
   box-shadow: var(--shadow-lg);
}

.server-card:hover::before,
.server-card:focus-within::before {
   transform: scaleY(1);
}

@media (max-width: 900px) {
   .server-card {
      grid-template-columns: 1fr;
   }
}

/* Ohne Modulliste bleibt die Karte einspaltig, damit kein leerer Raum entsteht */
.server-card.is-solo {
   grid-template-columns: minmax(0, 1fr);
}

/* ---------- Kopfzeile der Karte ---------- */

.server-card__head {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1.1rem;
}

.server-card__glyph {
   display: grid;
   place-items: center;
   width: 58px;
   height: 58px;
   flex: none;
   font-size: 1.75rem;
   line-height: 1;
   background: var(--bg-sunken);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   transition: transform var(--t-md) var(--ease-spring);
}

.server-card:hover .server-card__glyph {
   transform: scale(1.07) rotate(-4deg);
}

.server-card__id {
   min-width: 0;
   flex: 1;
}

.server-card__name {
   font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
   line-height: var(--lh-snug);
}

.server-card__tagline {
   margin-top: 0.35rem;
   font-size: var(--fs-sm);
   line-height: var(--lh-base);
   color: var(--ink-2);
}

.server-card__badges {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.3rem;
   flex: none;
}

/* ---------- Faktenraster ---------- */

.server-facts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
   gap: 1px;
   margin-bottom: 1.15rem;
   background: var(--edge-faint);
   border: 1px solid var(--edge-faint);
   border-radius: var(--r-sm);
   overflow: hidden;
}

.server-fact {
   padding: 0.7rem 0.8rem;
   background: var(--surface);
}

.server-fact__key {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.server-fact__val {
   margin-top: 0.3rem;
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
   color: var(--ink);
   overflow-wrap: anywhere;
}

.server-fact__val.is-accent {
   color: var(--accent);
}

/* ---------- Beschreibung ---------- */

.server-card__summary {
   font-size: var(--fs-sm);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

/* ---------- Rechte Spalte ---------- */

.server-card__aside {
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
}

/* ---------- Rolle ---------- */

.server-roles {
   display: grid;
   grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
   gap: 0.25rem 0.85rem;
   align-items: baseline;
   padding: 0.7rem 0.8rem;
   margin-bottom: 1.15rem;
   background: var(--surface-2);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
}

.server-roles__key,
.server-work__key,
.server-modules__key {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.server-roles__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.3rem;
}

@media (max-width: 560px) {
   .server-roles {
      grid-template-columns: 1fr;
   }
}

/* ---------- Was ich gemacht habe ---------- */

.server-work {
   margin-top: 1.15rem;
   padding: 0.85rem 0.9rem;
   background: var(--accent-tint);
   border: 1px solid var(--accent-line);
   border-radius: var(--r-sm);
}

.server-work__key {
   margin-bottom: 0.45rem;
   color: var(--accent);
}

.server-work__text {
   font-size: var(--fs-sm);
   line-height: var(--lh-loose);
   color: var(--ink);
}

/* ---------- Texturenpaket des Servers ---------- */

.server-pack {
   margin-top: 1.15rem;
   padding: 0.85rem 0.9rem;
   background: var(--surface-2);
   border: 1px solid var(--edge);
   border-left: 2px solid var(--accent);
   border-radius: var(--r-sm);
}

.server-pack__key {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.45rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.server-pack__badge {
   padding: 0.1rem 0.4rem;
   letter-spacing: var(--track-wide);
   text-transform: none;
   color: var(--accent);
   background: var(--accent-tint);
   border: 1px solid var(--accent-line);
   border-radius: var(--r-xs);
}

.server-pack__text {
   font-size: var(--fs-sm);
   line-height: var(--lh-loose);
   color: var(--ink);
}

.server-pack__link {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   margin-top: 0.6rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--accent);
}

.server-pack__link:hover .server-pack__name {
   text-decoration: underline;
}

.server-pack__name {
   font-weight: 700;
}

.server-pack__link svg {
   width: 0.95rem;
   height: 0.95rem;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* Zweiter Link: direkt auf die Changelog-Seite des Pakets */
.server-pack__changelog {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   margin-left: 1rem;
   padding-bottom: 1px;
   border-bottom: 1px solid var(--accent-line);
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-2);
   transition: color var(--t-xs) var(--ease-out);
}

.server-pack__changelog:hover {
   color: var(--accent);
}

.server-pack__changelog svg {
   width: 0.95rem;
   height: 0.95rem;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Technische Eckdaten ---------- */

.server-code {
   margin-top: 1.15rem;
}

.server-code__title {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.server-code__title::before {
   content: "";
   width: 1.25rem;
   height: 1px;
   background: var(--accent);
}

.server-code__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
   gap: 1px;
   background: var(--edge-faint);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   overflow: hidden;
}

.server-code__cell {
   padding: 0.7rem 0.75rem;
   background: var(--surface-2);
}

.server-code__val {
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
   line-height: 1.2;
   color: var(--accent);
   font-variant-numeric: tabular-nums;
}

.server-code__key {
   margin-top: 0.3rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
}

/* ---------- Persönliche Anmerkung ---------- */

.server-note {
   margin-top: 1.15rem;
   padding: 0.9rem 1rem;
   background: var(--surface-2);
   border: 1px solid var(--edge);
   border-left: 2px solid var(--accent);
   border-radius: var(--r-sm);
}

.server-note__title {
   margin-bottom: 0.5rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--accent);
}

.server-note__text {
   font-size: var(--fs-sm);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

/* ---------- Module und Systeme ---------- */

.server-modules__key {
   display: flex;
   align-items: center;
   gap: 0.55rem;
   margin-bottom: 0.7rem;
}

.server-modules__key::before {
   content: "";
   width: 1.25rem;
   height: 1px;
   background: var(--accent);
}

.server-modules__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 19px;
   height: 19px;
   padding: 0 5px;
   font-size: var(--fs-micro);
   color: var(--accent-ink);
   background: var(--accent);
   border-radius: var(--r-pill);
}

.server-modules__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.3rem;
}

.server-modules__note,
.clg-section__note {
   margin-bottom: 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

.clg-section__note--lead {
   margin-bottom: 1.25rem;
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
   letter-spacing: var(--track-normal);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

/* ---------- Untergruppen der internen Module ---------- */

.server-modules__subhead {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin: 1.4rem 0 0.9rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.server-modules__subhead::after {
   content: "";
   flex: 1;
   height: 1px;
   background: var(--edge);
}

.server-modules__sub + .server-modules__sub {
   margin-top: 1.15rem;
}

.server-modules__sublabel {
   margin-bottom: 0.4rem;
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   letter-spacing: var(--track-wide);
   color: var(--accent);
}

.server-modules__subnote {
   margin-bottom: 0.55rem;
   font-size: var(--fs-xs);
   line-height: var(--lh-base);
   color: var(--ink-3);
}

/* ---------- Discord-Link (Definition in projects.css) ---------- */

/* ---------- Fuß mit Tags und Button ---------- */

.server-card__foot {
   grid-column: 1 / -1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding-top: 1.15rem;
   border-top: 1px solid var(--edge-faint);
}

.server-card__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.3rem;
}

.server-card__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.server-card__actions .btn {
   white-space: nowrap;
}

.server-card__count {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
}

/* =========================================================================
   Detailseite: Kopf
   ========================================================================= */

.clg-head {
   position: relative;
   padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
   border-bottom: 1px solid var(--edge);
   overflow: hidden;
}

.clg-head__grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
   background-size: calc(100% / 12) 100%;
   mask-image: radial-gradient(ellipse 110% 100% at 30% 0%, #000 10%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse 110% 100% at 30% 0%, #000 10%, transparent 75%);
}

.clg-head__nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
   margin-bottom: 1.35rem;
}

.clg-back {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   transition: color var(--t-xs) var(--ease-out);
}

.clg-back svg {
   width: 13px;
   height: 13px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: transform var(--t-sm) var(--ease-out);
}

.clg-back:hover {
   color: var(--accent);
}

.clg-back:hover svg {
   transform: translateX(-3px);
}

.clg-head__top {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1rem;
}

.clg-head__glyph {
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   flex: none;
   font-size: 1.55rem;
   line-height: 1;
   background: var(--bg-sunken);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
}

.clg-head__title {
   font-size: clamp(1.9rem, 1.15rem + 5vw, 5rem);
   line-height: var(--lh-tight);
   letter-spacing: var(--track-display);
   overflow-wrap: break-word;
}

.clg-head__tagline {
   max-width: 54ch;
   margin-top: 0.9rem;
   font-size: var(--fs-lead);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

.clg-head__facts {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem 1.5rem;
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--edge);
}

.clg-fact {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.clg-fact__key {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.clg-fact__val {
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
   color: var(--ink);
}

/* =========================================================================
   Detailseite: Layout
   ========================================================================= */

.clg-layout {
   display: grid;
   grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
   gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
   align-items: start;
   padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--section-y);
}

@media (max-width: 900px) {
   .clg-layout {
      grid-template-columns: 1fr;
   }
}

/* ---------- Sprungliste ---------- */

/* Die Seitenleiste darf bis zum unteren Bildschirmrand reichen.
   Die Versionsliste fuellt den Rest, "Umfang" bleibt dabei sichtbar. */
.clg-nav {
   position: sticky;
top: calc(var(--header-total) + 1.25rem);
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
   max-height: calc(100svh - var(--header-total) - 2.5rem);
}

@media (max-width: 900px) {
   .clg-nav {
      position: static;
      max-height: none;
      padding: 1.1rem;
      background: var(--surface);
      border: 1px solid var(--edge);
      border-radius: var(--r-sm);
   }

   /* Gestapelt nicht die ganze Seite fuellen, sonst wird der Einstieg weit
      nach unten geschoben */
   .clg-nav__block--jump .clg-nav__list {
      max-height: 40vh;
      min-height: 0;
   }
}

.clg-nav__block {
   display: grid;
   gap: 0.55rem;
   flex: none;
}

/* Der Sprungblock waechst in die freie Hoehe der Seitenleiste */
.clg-nav__block--jump {
   display: flex;
   flex-direction: column;
   min-height: 0;
   flex: 1 1 auto;

   /* Beim Zurueck-Knopf darf die Versionsauswahl nicht unter der
      festen Kopfzeile landen. */
   scroll-margin-top: calc(var(--header-total) + 1rem);
}

/* Die Versionsliste scrollt selbst, damit man ohne Auswendigzaehlen
   schnell nach oben oder unten springen kann. Sie folgt beim Seiten-Scrollen
   automatisch dem gerade sichtbaren Eintrag. */
.clg-nav__block--jump .clg-nav__list {
   flex: 1 1 auto;
   min-height: 5.5rem;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   padding-right: 0.2rem;
   mask-image: linear-gradient(to bottom, transparent 0, #000 0.6rem, #000 calc(100% - 0.6rem), transparent 100%);
   scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
   .clg-nav__block--jump .clg-nav__list {
      scroll-behavior: auto;
   }
}

.clg-nav__block--jump .clg-nav__list:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: var(--r-xs);
}

/* Auf kurzen Fenstern die Abstaende straffen, damit die Versionsliste
   genug Platz bekommt und "Umfang" trotzdem sichtbar bleibt */
@media (max-height: 720px) {
   .clg-nav {
      gap: 0.7rem;
   }

   .clg-nav__block {
      gap: 0.4rem;
   }

   .clg-nav__block--jump .clg-nav__list {
      min-height: 5rem;
   }
}

/* Auf kleinen Hoehen: Liste etwas kuerzer halten, damit Umfang sichtbar bleibt */
@media (max-height: 620px) {
   .clg-nav__block--jump .clg-nav__list {
      min-height: 4rem;
   }
}

.clg-nav__title {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.clg-nav__title::before {
   content: "";
   width: 1.25rem;
   height: 1px;
   background: var(--accent);
}

/* Kleine Zusatzzeile unter einer Blocküberschrift, z. B. der Umfang */
.clg-nav__note {
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   color: var(--ink-2);
}

.clg-nav__list {
   display: grid;
   gap: 0;
}

/* Die Sprungliste liest sich wie eine kleine Zeitleiste: eine duenne Schiene
   links, darueber die Trenner zwischen den Versionen. */
.clg-nav__link {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, auto) minmax(0, 1fr);
   gap: 0.5rem;
   align-items: baseline;
   padding: 0.42rem 0.5rem 0.42rem 1.2rem;
   font-size: var(--fs-sm);
   color: var(--ink-2);
   border-radius: var(--r-xs);
   transition: color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out);
}

/* Schiene, auf der alle Eintraege aufreihen */
.clg-nav__link::after {
   content: "";
   position: absolute;
   left: 0.5rem;
   top: 0;
   bottom: 0;
   width: 1px;
   background: var(--edge-faint);
}

/* ---------- Trenner zwischen den Versionen ----------
   Patch  -> hauchduenn
   Minor      -> duenn
   Hauptversion -> dick und mit Akzentkante                */
.clg-nav__link::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0.5rem;
   right: 0.45rem;
   height: 1px;
   background: var(--edge-faint);
}

.clg-nav__list > .clg-nav__link:first-child::before {
   display: none;
}

.clg-nav__link.is-minor::before {
   background: var(--edge);
}

.clg-nav__link.is-major::before {
   height: 2px;
   background: linear-gradient(90deg, var(--accent) 0, var(--accent-line) 55%, transparent 100%);
}

/* Groessere Spruenge bekommen etwas mehr Luft nach oben */
.clg-nav__link.is-minor {
   padding-top: 0.64rem;
}

.clg-nav__link.is-major {
   padding-top: 0.85rem;
}

.clg-nav__link:hover {
   color: var(--ink);
   background: var(--surface-2);
}

.clg-nav__link.is-active {
   color: var(--accent);
   background: var(--accent-tint);
}

.clg-nav__link.is-active::after {
   width: 2px;
   background: var(--accent);
}

.clg-nav__v {
   font-family: var(--font-mono);
   letter-spacing: var(--track-wide);
   white-space: nowrap;
}

/* Lange Bezeichnungen wie 1.2.4-HOTFIX-1 kleiner setzen,
   damit sie neben den kurzen ohne Umbruch auskommen */
.clg-nav__v.is-long {
   font-size: var(--fs-micro);
}

.clg-nav__v.is-label {
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-2);
}

.clg-nav__date {
   justify-self: end;
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   color: var(--ink-3);
   white-space: nowrap;
}

/* Legende der Trennerstaerken. Die Angaben 1.0 / 0.1 / 0.0.1 stehen fuer den
   Versionssprung und gelten in allen Sprachen. */
.clg-nav__legend {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem 0.9rem;
   flex: none;
   list-style: none;
   margin: 0.5rem 0 0;
   padding: 0 0 0 1.2rem;
}

.clg-nav__legend-item {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.clg-nav__legend-line {
   width: 1.15rem;
   height: 1px;
   flex: none;
   background: var(--edge-faint);
}

.clg-nav__legend-line.is-minor {
   background: var(--edge);
}

.clg-nav__legend-line.is-major {
   height: 2px;
   background: linear-gradient(90deg, var(--accent) 0, var(--accent-line) 100%);
}

.clg-nav__legend-note {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

/* ---------- Typfilter ---------- */

.clg-filters {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
}

/* =========================================================================
   Detailseite: Einträge
   ========================================================================= */

/* Überschrift über der Eintragsliste, mit Anzahl der Einträge */
.clg-entries__title {
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--edge);
}

.clg-entries__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 19px;
   height: 19px;
   padding: 0 5px;
   font-size: var(--fs-micro);
   color: var(--accent-ink);
   background: var(--accent);
   border-radius: var(--r-pill);
}

.clg-entry {
   position: relative;
   display: grid;
   grid-template-columns: 6.5rem minmax(0, 1fr);
   gap: 0 clamp(1rem, 0.5rem + 1.5vw, 2rem);
   padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
   scroll-margin-top: calc(var(--header-total) + 1.5rem);
}

/* ---------- Trenner zwischen den Versionen ----------
   Nur Patch  -> hauchduenn
   Minor      -> duenn
   Hauptversion -> deutlich dicker und mit Akzentkante           */

.clg-entry::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--edge-faint);
}

.clg-entry:first-child::before {
   display: none;
}

/* Patch-Eintraege ohne Trennerart bekommen die kleinste Stufe */
.clg-entry.is-patch {
   padding-top: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
}

.clg-entry.is-minor {
   padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.clg-entry.is-major {
   padding-top: clamp(2.6rem, 2rem + 2.6vw, 4rem);
}

.clg-entry.is-minor::before {
   background: var(--edge);
}

.clg-entry.is-major::before {
   height: 2px;
   background: linear-gradient(90deg,
      var(--accent) 0,
      var(--accent) 16%,
      var(--edge) 55%,
      transparent 100%);
}

/* ---------- Ziel nach einem Sprung ----------
   Die Regeln liegen in src/css/markierung.css, weil die Galerie
   dasselbe Highlight benutzt. */

/* Treffer nach einem Sprung in der Versionsliste kurz hervorheben */
.clg-entry.is-flash::after {
   content: "";
   position: absolute;
   inset: -0.75rem -1rem;
   border-radius: var(--r-sm);
   background: var(--accent-tint);
   opacity: 1;
   animation: clg-flash 1.4s var(--ease-out) forwards;
   pointer-events: none;
   z-index: -1;
}

@keyframes clg-flash {
   0%,
   60% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

@media (max-width: 640px) {
   .clg-entry {
      grid-template-columns: 1fr;
      gap: 0.9rem;
   }
}

/* Mehr Platz fuer die Versionsangabe, sobald der Bildschirm es hergibt.
   Damit bleibt auch eine Bezeichnung wie 1.2.4-HOTFIX-1 in einer Zeile. */
@media (min-width: 900px) {
   .clg-entry {
      grid-template-columns: 8.5rem minmax(0, 1fr);
   }
}

@media (min-width: 1280px) {
   .clg-entry {
      grid-template-columns: 10rem minmax(0, 1fr);
   }
}

@media (min-width: 1700px) {
   .clg-entry {
      grid-template-columns: 12rem minmax(0, 1fr);
   }
}

/* Versionsspalte links */
.clg-entry__aside {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.45rem;
}

/* Auf breiten Bildschirmen bleibt die Version stehen, während man den Text
   und die Aenderungsliste liest. Ohne align-self wuerde die Spalte auf die
   volle Zeilenhoehe gestreckt und haette nichts zum Kleben bleiben. */
@media (min-width: 900px) {
   .clg-entry__aside {
      position: sticky;
      top: calc(var(--header-total) + 1.5rem);
      align-self: start;
   }
}

.clg-entry__version {
   font-family: var(--font-display);
   font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
   line-height: 1;
   color: var(--accent);
   font-variant-numeric: tabular-nums;
}

/* Lange Versionsangaben etwas kleiner, damit sie neben den kurzen
   ohne Zeilenumbruch auskommen */
.clg-entry__version.is-long {
   font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem);
   line-height: 1.15;
}

/* Bezeichnungen wie "Start" oder "Ende" sind keine Nummern und stehen
   deshalb wie die Beschriftungen der Seite */
.clg-entry__version.is-label {
   font-family: var(--font-mono);
   font-size: var(--fs-h3);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-2);
}

.clg-entry__date {
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

@media (max-width: 640px) {
   .clg-entry__aside {
      flex-direction: row;
      align-items: baseline;
      gap: 0.75rem;
   }
}

/* Inhaltsspalte rechts */
.clg-entry__body {
   min-width: 0;
}

/* Kopfzeile des Eintrags: Art links, kurze Zaehlung der Aenderungen rechts */
.clg-entry__head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.4rem 1rem;
}

.clg-entry__title {
   margin-top: 0.7rem;
   font-size: var(--fs-h3);
   margin-bottom: 0.7rem;
}

/* Zaehlung der Aenderungsarten, z. B. +3 ~5 !2 */
.clg-tally {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   flex: none;
}

.clg-tally__item {
   display: inline-flex;
   align-items: baseline;
   gap: 0.15rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

.clg-tally__sign {
   font-weight: 700;
}

.clg-tally__num {
   font-variant-numeric: tabular-nums;
}

.clg-tally__item[data-kind="add"] .clg-tally__sign {
   color: var(--ok);
}

.clg-tally__item[data-kind="change"] .clg-tally__sign {
   color: var(--accent);
}

.clg-tally__item[data-kind="fix"] .clg-tally__sign {
   color: var(--warn);
}

/* ---------- Quelltext ----------
   Wie in Discord: alles zwischen ` oder " wird als Code gesetzt.
   Bewusst ohne Rahmen und ohne Hintergrund, damit es nicht wie ein
   Button wirkt, sondern wie eine Erwaehnung im Fliesstext. */
.clg-code {
   font-family: var(--font-mono);
   font-size: 0.92em;
   padding: 0.1em 0.36em;
   border-radius: var(--r-xs);
   background: var(--surface-2);
   border: 1px solid var(--edge-faint);
   color: var(--ink);
   white-space: nowrap;
   word-break: break-word;
}

/* In der Legende und in der Sprungliste gibt es keinen Code,
   deshalb darf dort nichts an der Zeile zerren. */
.clg-entry__title .clg-code {
   white-space: normal;
}

.clg-entry__text .clg-code,
.clg-change .clg-code {
   white-space: pre-wrap;
}

/* ---------- Lesbarkeit ----------
   Der Changelog-Text ist die meistgelesene Stelle der Seite,
   deshalb eine Stufe groesser als der Rest der Oberflaeche. */
.clg-entry__text {
   font-size: var(--fs-body);
   line-height: var(--lh-loose);
   color: var(--ink-2);
   max-width: 74ch;
}

/* ---------- Abschnitt ----------
   Eine Linie, die von aussen einfaedelt und zum Text hin duenner wird
   und spitz zulaeuft. Beide Seiten sind gleich breit, dadurch steht der
   Text mittig, egal wie lang er ist. Ohne Text bleibt in der Mitte eine
   Luecke. */
.clg-trenner {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   margin: 1.05rem 0;

   /* Nicht von aussen sichtbar, sonst entstehen Linien neben der Liste. */
   list-style: none;
   padding: 0;
}

.clg-trenner__line {
   /* 1 1 0, damit beide Seiten gleich wachsen und der Text mittig
      bleibt. min-width verhindert, dass eine sehr kurze Linie nichts wird. */
   flex: 1 1 0;
   min-width: 1.5rem;
   height: 2px;

   /* Der Verlauf blendet das Ende am Seitenrand aus. */
   background: linear-gradient(to right, transparent, var(--edge-strong) 72%);

   /* Die Keilform laesst die Linie zur Mitte hin auslaufen, statt sie
      einfach abzuschneiden. */
   clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.clg-trenner__line:last-child {
   background: linear-gradient(to left, transparent, var(--edge-strong) 72%);
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.clg-trenner__title {
   /* Darf schrumpfen und umbrechen, sonst drueckt ein langer Titel in
      einer Sprache die Linien auf null zusammen. */
   flex: 0 1 auto;
   min-width: 0;
   max-width: 70%;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   line-height: 1.35;
   color: var(--ink-3);
   text-align: center;
   text-wrap: balance;
}

/* Ohne Text: nur die Linie mit einer kleinen Luecke in der Mitte. */
.clg-trenner.is-leer {
   gap: 0.5rem;
   margin: 0.85rem 0;
}

.clg-trenner.is-leer .clg-trenner__title {
   display: none;
}

/* ---------- Änderungsliste ---------- */

/* Jede Aenderung eine eigene Zeile, damit sich nichts zu Reihen
   mit mehreren Punkten staffelt */
.clg-changes {
   display: grid;
   gap: 0.3rem;
   margin-top: 1.15rem;
   padding-top: 1.15rem;
   border-top: 1px solid var(--edge-faint);
}

.clg-change {
   display: grid;
   grid-template-columns: 1.4rem minmax(0, 1fr);
   gap: 0.7rem;
   align-items: start;
   padding: 0.32rem 0.6rem;
   border-left: 2px solid transparent;
   border-radius: var(--r-xs);
   font-size: var(--fs-body);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

/* Sehr dezente Tonung pro Art, damit die Zeilen scanbar bleiben,
   ohne dass die Liste bunt wirkt */
.clg-change[data-kind="add"] {
   background: color-mix(in srgb, var(--ok) 5%, transparent);
   border-left-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.clg-change[data-kind="change"] {
   background: var(--accent-tint);
   border-left-color: var(--accent-line);
}

.clg-change[data-kind="fix"] {
   background: color-mix(in srgb, var(--warn) 6%, transparent);
   border-left-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

.clg-change[data-kind="remove"] {
   background: color-mix(in srgb, var(--ink-3) 7%, transparent);
   border-left-color: var(--edge);
}

.clg-change__sign {
   display: grid;
   place-items: center;
   width: 1.35rem;
   height: 1.35rem;
   margin-top: 0.28rem;
   font-family: var(--font-mono);
   font-weight: 700;
   font-size: var(--fs-xs);
   line-height: 1;
   border-radius: var(--r-xs);
}

.clg-change[data-kind="add"] .clg-change__sign {
   color: var(--ok);
   background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.clg-change[data-kind="change"] .clg-change__sign {
   color: var(--accent);
   background: var(--accent-tint);
}

.clg-change[data-kind="fix"] .clg-change__sign {
   color: var(--warn);
   background: color-mix(in srgb, var(--warn) 14%, transparent);
}

.clg-change[data-kind="remove"] .clg-change__sign {
   color: var(--ink-3);
   background: var(--surface-2);
}

/* ---------- Typmarken der Eintraege ---------- */

.badge--change {
   color: var(--accent);
   border-color: var(--accent-line);
   background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* =========================================================================
   Detailseite: Abschnitte
   ========================================================================= */

.clg-section {
   padding-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
   margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
   border-bottom: 1px solid var(--edge);
}

.clg-section:last-child {
   border-bottom: none;
}

.clg-section__title {
   display: flex;
   align-items: center;
   gap: 0.65rem;
   margin-bottom: 0.95rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.clg-section__title::before {
   content: "";
   width: 1.25rem;
   height: 1px;
   background: var(--accent);
}

/* =========================================================================
   Zustände
   ========================================================================= */

.clg-missing {
   padding-block: var(--section-y);
}

.clg-missing__code {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 0.9rem;
}

.clg-missing__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1.5rem;
}

.clg-missing__actions {
   margin-top: 2rem;
}

/* =========================================================================
   Suchfenster
   ========================================================================= */

.clg-search {
   position: relative;
   display: flex;
   align-items: center;
}

.clg-search__icon {
   position: absolute;
   left: 0.6rem;
   width: 1rem;
   height: 1rem;
   fill: none;
   stroke: var(--ink-3);
   stroke-width: 1.8;
   stroke-linecap: round;
   pointer-events: none;
}

.clg-search__input {
   width: 100%;
   padding: 0.5rem 1.9rem 0.5rem 2rem;
   font-family: var(--font-sans);
   font-size: var(--fs-xs);
   color: var(--ink);
   background: var(--surface-2);
   border: 1px solid var(--edge);
   border-radius: var(--r-xs);
   transition: border-color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out);
}

.clg-search__input::placeholder {
   color: var(--ink-3);
}

.clg-search__input:focus {
   outline: none;
   border-color: var(--accent);
   background: var(--surface);
}

.clg-search__input::-webkit-search-cancel-button {
   display: none;
}

.clg-search__clear {
   position: absolute;
   right: 0.35rem;
   display: grid;
   place-items: center;
   width: 1.35rem;
   height: 1.35rem;
   font-size: 1.05rem;
   line-height: 1;
   color: var(--ink-3);
   background: none;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
}

.clg-search__clear:hover {
   color: var(--ink);
   background: var(--surface);
}

.clg-search__clear[hidden] {
   display: none;
}

/* =========================================================================
   Legende der Aenderungszeichen
   ========================================================================= */

.clg-legend {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.55rem 1.15rem;
   margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
   padding: 0.7rem 0.9rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
}

.clg-legend__title {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

/* Gleiche Akzentlinie wie bei den Abschnitts- und Blocküberschriften */
.clg-legend__title::before {
   content: "";
   width: 1.25rem;
   height: 1px;
   flex: none;
   background: var(--accent);
}

.clg-legend__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem 1.1rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.clg-legend__item {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   font-size: var(--fs-xs);
   color: var(--ink-2);
}

.clg-legend__sign {
   display: grid;
   place-items: center;
   width: 1.35rem;
   height: 1.35rem;
   flex: none;
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   font-weight: 700;
   line-height: 1;
   border-radius: var(--r-xs);
   cursor: help;
}

.clg-legend__sign--add {
   color: var(--ok);
   background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.clg-legend__sign--change {
   color: var(--accent);
   background: var(--accent-tint);
}

.clg-legend__sign--fix {
   color: var(--warn);
   background: color-mix(in srgb, var(--warn) 14%, transparent);
}

.clg-legend__sign--remove {
   color: var(--ink-3);
   background: var(--surface-2);
}

/* =========================================================================
   Kurzer Hinweis beim Ueberfahren der Zeichen
   ========================================================================= */

[data-tip] {
   position: relative;
}

[data-tip]::after {
   content: attr(data-tip);
   position: absolute;
   bottom: calc(100% + 0.5rem);
   left: 50%;
   translate: -50% 0;
   z-index: 6;
   padding: 0.32rem 0.55rem;
   font-family: var(--font-sans);
   font-size: var(--fs-micro);
   font-weight: 500;
   line-height: 1.35;
   white-space: nowrap;
   color: var(--bg);
   background: var(--ink);
   border-radius: var(--r-xs);
   box-shadow: var(--shadow-pop);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity var(--t-xs) var(--ease-out), visibility var(--t-xs) var(--ease-out);
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
   opacity: 1;
   visibility: visible;
}

/* =========================================================================
   Aktionen unterhalb des Kopfbereichs
   ========================================================================= */

.clg-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

/* =========================================================================
   Verweis auf das Projekt und Leerzustand
   ========================================================================= */

.clg-projectlink {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.25rem 1rem;
   margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
   padding: 1rem 1.15rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-left: 2px solid var(--accent);
   border-radius: var(--r-sm);
   transition: border-color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out);
}

.clg-projectlink:hover {
   background: var(--surface-2);
   border-color: var(--accent-line);
}

.clg-projectlink__key {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.clg-projectlink__text {
   grid-column: 1;
   font-size: var(--fs-sm);
   color: var(--ink);
}

.clg-projectlink svg {
   grid-row: 1 / span 2;
   grid-column: 2;
   width: 1.1rem;
   height: 1.1rem;
   fill: none;
   stroke: var(--accent);
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.clg-empty {
   padding: 1.5rem 0;
   font-size: var(--fs-sm);
   color: var(--ink-3);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 640px) {
   .server-card__head {
      flex-wrap: wrap;
   }

   .server-card__badges {
      justify-content: flex-start;
   }

   .server-card__foot {
      flex-direction: column;
      align-items: stretch;
   }

   .server-card__actions .btn {
      width: 100%;
   }

   .clg-head__facts {
      gap: 0.9rem 1.25rem;
   }
}
/* =========================================================================
   Zurueck zur Versionsauswahl
   Auf dem Handy steht die Versionsauswahl ueber den Eintraegen statt
   neben ihnen und ist nach dem Scrollen nicht mehr zu sehen. Der Knopf
   ersetzt das endlose Hochscrollen und taucht genau dann auf, wenn die
   Auswahl ausser Sicht ist.
   ========================================================================= */

.clg-up {
   position: fixed;
   right: clamp(0.9rem, 0.4rem + 2vw, 1.5rem);
   bottom: calc(clamp(0.9rem, 0.4rem + 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
   z-index: var(--z-sticky);

   display: grid;
   place-items: center;
   width: 2.9rem;
   height: 2.9rem;
   padding: 0;
   color: var(--ink-2);
   background: var(--surface);
   border: 1px solid var(--edge-strong);
   border-radius: 50%;
   box-shadow: var(--shadow-md);
   cursor: pointer;

   /* Zurueckhaltend: unsichtbar und nicht antippbar, bis es wirklich
      gebraucht wird. Kein Platzhalter, der am Rand klebt. */
   opacity: 0;
   visibility: hidden;
   transform: translateY(0.6rem) scale(0.82);
   transition: opacity var(--t-sm) var(--ease-out), transform var(--t-sm) var(--ease-out),
      visibility var(--t-sm) var(--ease-out), color var(--t-xs) var(--ease-out),
      border-color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out);
}

.clg-up.is-on {
   opacity: 1;
   visibility: visible;
   transform: none;
}

.clg-up:hover {
   color: var(--accent);
   border-color: var(--accent);
   background: var(--surface-hover);
}

.clg-up:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}

.clg-up svg {
   width: 1.15rem;
   height: 1.15rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.1;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* Die beiden Pfeile ziehen beim Einblenden kurz nach oben */
.clg-up.is-on svg {
   animation: clg-up-nudge 2.6s var(--ease-out) 1;
}

@keyframes clg-up-nudge {
   0%,
   62%,
   100% {
      transform: translateY(0);
   }
   72% {
      transform: translateY(-0.16rem);
   }
   82% {
      transform: translateY(0);
   }
   90% {
      transform: translateY(-0.09rem);
   }
}

/* Ab hier ist die Versionsauswahl wieder neben den Eintraegen sichtbar,
   der Knopf waere doppelt und verschwindet. */
@media (min-width: 901px) {
   .clg-up {
      display: none;
   }
}

/* Sehr kleine Displays: etwas kleiner, damit nichts im Weg steht */
@media (max-width: 380px) {
   .clg-up {
      width: 2.6rem;
      height: 2.6rem;
   }

   .clg-up svg {
      width: 1.05rem;
      height: 1.05rem;
   }
}