/* ─────────────────────────────────────────────────────────────────────────────
   `textSideNote` — aviso a dos columnas, sin fondo propio y sin caja.
   La columna del titular se estira a todo el alto (`align-self: stretch`) para
   que el bloque pegajoso tenga recorrido y ninguna mitad quede hueca.
   Columnas con `minmax(0, …fr)`: el titular lleva palabras largas en alemán.
   Una sola curva de movimiento: cubic-bezier(.22,.61,.36,1).
   ───────────────────────────────────────────────────────────────────────────── */

.g-textSideNote-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5.6vw, 88px);
  align-items: start;
}
.g-textSideNote-grid > :first-child { align-self: stretch; }
.g-textSideNote-head { position: sticky; top: 132px; }

/* la etiqueta es lo único que destaca: va en el acento del sitio */
.g-textSideNote-tag {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--a2);
  margin-bottom: 20px;
}
.g-textSideNote-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a2);
  flex: none;
}

/* titular corto: 26-42px. `hyphens: manual` — a cuerpo de titular el guionado
   automático parte casi todas las líneas («dazwi-schenschiebt») */
.g-textSideNote-title {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  hyphens: manual;
  overflow-wrap: break-word;
}

.g-textSideNote-body { max-width: 62ch; }
.g-textSideNote-text {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.68;
  color: var(--t2);
  text-wrap: pretty;
  hyphens: manual;
  overflow-wrap: break-word;
}
.g-textSideNote-text + .g-textSideNote-text { margin-top: 1.05em; }

.g-textSideNote-tail { margin-top: clamp(28px, 3.8vh, 42px); }
.g-textSideNote-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.g-textSideNote-when span {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t3);
}
.g-textSideNote-when b {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* enlace de texto con la flecha del kit (nada de iconos dibujados) */
.g-textSideNote-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line2);
  transition: color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.g-textSideNote-when + .g-textSideNote-go { margin-top: 22px; }
.g-textSideNote-go svg { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.g-textSideNote-go:hover { color: var(--a2); border-color: var(--a2); }
.g-textSideNote-go:hover svg { transform: translate(3px, -3px); }

/* ── móvil: una sola columna, el titular deja de ser pegajoso ─────────────── */
@media (max-width: 900px) {
  .g-textSideNote-grid { grid-template-columns: 1fr; gap: 28px; }
  .g-textSideNote-head { position: static; }
  .g-textSideNote-title { font-size: clamp(26px, 7.6vw, 36px); }
  .g-textSideNote-tag { margin-bottom: 16px; }
  .g-textSideNote-body { max-width: none; }
  .g-textSideNote-text { font-size: 18px; line-height: 1.62; }
  .g-textSideNote-tail { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-textSideNote-go, .g-textSideNote-go svg { transition: none; }
  .g-textSideNote-go:hover svg { transform: none; }
}