/* ============================================================================
   AG OKJA Bremen – statische Website
   Stand: Finaler Offener Brief v29
   Ziel: sauberes, wartbares CSS ohne historische Override-Schichten.
   Keine externen Fonts, kein JavaScript, keine Framework-Abhängigkeit.
   ============================================================================ */

:root {
  color-scheme: light;

  --color-navy: #101114;
  --color-navy-dark: #07080a;
  --color-ink: #171717;
  --color-cream: #fbf6ec;
  --color-cream-strong: #e5ded2;
  --color-white: #ffffff;

  --color-blue: #2f95d0;
  --color-red: #e63946;
  --color-red-text: #a61b2b;
  --color-red-strong: #b91c2b;
  --color-green: #2fae68;
  --color-pink: #d94c8a;
  --color-orange: #f59e0b;

  --color-border: #e5ded2;
  --color-muted: #57534e;
  --color-focus: #2f95d0;

  --color-header-bg: #fffdf8;
  --color-header-text: #111827;
  --color-header-hover: #a61b2b;
  --color-header-soft: #f3eadc;

  --shadow-rgb: 16 17 20;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --step--1: clamp(0.88rem, 0.84rem + 0.2vw, 1rem);
  --step-0: clamp(1rem, 0.96rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.18rem, 1.06rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.45rem, 1.24rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.8rem);
  --step-4: clamp(2.35rem, 1.75rem + 3vw, 4.55rem);

  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5rem;

  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.6rem;
  --shadow-soft: 0 1.2rem 3rem rgb(var(--shadow-rgb) / 0.11);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  scroll-behavior: smooth;
}

body {
  min-block-size: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 8% -5%, rgb(47 149 208 / 0.10), transparent 30rem),
    radial-gradient(circle at 92% 6%, rgb(230 57 70 / 0.08), transparent 24rem),
    linear-gradient(180deg, var(--color-cream), #ffffff 64%);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--color-navy);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-red-text);
}

:focus-visible {
  outline: 0.2rem solid var(--color-focus);
  outline-offset: 0.2rem;
  border-radius: 0.35rem;
}

::selection {
  background: var(--color-cream-strong);
  color: var(--color-navy-dark);
}

h1,
h2,
h3 {
  margin-block: 0;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-inline-size: 14ch;
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
}

p,
ul,
ol {
  margin-block: 0;
}

address {
  font-style: normal;
}

.container {
  inline-size: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.narrow {
  inline-size: min(100% - 2rem, 48rem);
}

.section {
  padding-block: var(--space-7);
}

.section-muted {
  background: rgb(255 255 255 / 0.72);
  border-block: 1px solid var(--color-border);
}

.section-accent {
  background:
    radial-gradient(circle at 8% 12%, rgb(47 149 208 / 0.13), transparent 18rem),
    radial-gradient(circle at 92% 0%, rgb(47 174 104 / 0.12), transparent 22rem),
    linear-gradient(135deg, #fff7ea 0%, #f7fbff 52%, #eef9f3 100%);
  border-block: 1px solid var(--color-border);
  color: var(--color-ink);
}

.section-accent .eyebrow {
  color: var(--color-red-text);
}

.section-accent p {
  color: var(--color-muted);
}

.section-heading {
  display: grid;
  gap: var(--space-3);
  max-inline-size: 52rem;
  margin-block-end: var(--space-5);
}

.content-flow {
  display: grid;
  gap: var(--space-4);
}

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 20;
  transform: translateY(-150%);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: #ffffff;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: rgb(255 253 248 / 0.94);
  border-block-end: 0;
  box-shadow: 0 0.55rem 1.6rem rgb(var(--shadow-rgb) / 0.07);
  backdrop-filter: blur(16px);
}

.site-header::after {
  content: "";
  display: block;
  block-size: 0.24rem;
  background: linear-gradient(
    90deg,
    var(--color-blue) 0%,
    var(--color-green) 38%,
    var(--color-red) 72%,
    var(--color-pink) 100%
  );
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--color-header-text);
  text-decoration: none;
}

.brand-logo {
  display: block;
  inline-size: clamp(8.5rem, 16vw, 12rem);
  block-size: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.25rem 0.55rem rgb(var(--shadow-rgb) / 0.12));
}

.nav-list,
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a,
.footer-links a {
  display: inline-flex;
  min-block-size: 2.55rem;
  align-items: center;
  padding-inline: 0.9rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: none;
}

.nav-list a {
  border: 1px solid var(--color-cream-strong);
  background: #fff7ea;
  color: var(--color-header-text);
  box-shadow: 0 0.35rem 0.9rem rgb(var(--shadow-rgb) / 0.06);
}

.nav-list a:hover,
.nav-list a:focus-visible {
  border-color: rgb(166 27 43 / 0.28);
  background: #fff1dc;
  color: var(--color-header-hover);
}

.nav-list a[aria-current="page"] {
  background: #fff2dd;
  color: var(--color-navy);
  box-shadow: inset 0 -0.18rem 0 var(--color-red), 0 0.35rem 0.9rem rgb(var(--shadow-rgb) / 0.05);
}

.footer-links a {
  color: var(--color-header-text);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  background: var(--color-header-soft);
  color: var(--color-header-hover);
}

.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset-block-start: 3.2rem;
  inset-inline-end: max(1rem, calc((100vw - 72rem) / 2));
  inline-size: clamp(7rem, 16vw, 13rem);
  aspect-ratio: 1;
  border-radius: 2rem 999px 999px 2rem;
  background: linear-gradient(135deg, var(--color-red), var(--color-blue));
  opacity: 0.92;
  transform: rotate(-8deg);
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  inset-block-end: 2.5rem;
  inset-inline-start: 4vw;
  inline-size: clamp(5rem, 9vw, 8rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--color-green);
  opacity: 0.22;
  z-index: -1;
}

.hero-content {
  display: grid;
  gap: var(--space-4);
}

.hero-intro {
  display: block;
}

.hero-letter-intro {
  padding-block-end: var(--space-5);
}

.hero-letter-intro::before,
.hero-letter-intro::after {
  display: none;
}

.hero-letter-content {
  max-inline-size: 72rem;
}

.hero-letter-content h1 {
  max-inline-size: 64rem;
  font-size: clamp(1.55rem, 2.75vw, 2.85rem);
  line-height: 1.12;
}

.lead {
  max-inline-size: 43rem;
  color: var(--color-muted);
  font-size: var(--step-1);
}

.eyebrow {
  color: var(--color-red-text);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.button {
  display: inline-flex;
  min-block-size: 3rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1.2rem;
  border: 2px solid var(--color-red-strong);
  border-radius: 999px;
  background: var(--color-red-strong);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 0.7rem 1.6rem rgb(230 57 70 / 0.24);
}

.button:hover {
  border-color: var(--color-navy-dark);
  background: var(--color-navy-dark);
  color: #ffffff;
}

.notice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-soft);
}

.open-letter-section {
  padding-block-start: var(--space-4);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.94)),
    radial-gradient(circle at 10% 0%, rgb(230 57 70 / 0.10), transparent 22rem),
    radial-gradient(circle at 92% 12%, rgb(47 149 208 / 0.12), transparent 26rem);
  border-block: 1px solid var(--color-border);
}

.open-letter {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 3vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.96);
  box-shadow: var(--shadow-soft);
}

.open-letter::before {
  content: "";
  display: block;
  block-size: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-red) 0%, var(--color-blue) 44%, var(--color-green) 100%);
}

.letter-kicker {
  justify-self: start;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--step--1);
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.letter-header {
  display: grid;
  gap: var(--space-3);
  max-inline-size: 58rem;
}

.letter-header h2 {
  font-size: clamp(2.1rem, 4vw, 4.2rem);
}

.letter-subtitle {
  max-inline-size: 58rem;
  color: var(--color-red-text);
  font-size: var(--step-2);
  line-height: 1.28;
}

.letter-body {
  max-inline-size: 66rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.08rem + 0.52vw, 1.46rem);
  line-height: 1.78;
}

.letter-body strong {
  color: var(--color-navy-dark);
  font-weight: 950;
}

.letter-demands h3,
.letter-kicker,
.letter-header,
.letter-subtitle,
.letter-meta {
  font-family: var(--font-sans);
}

.letter-demands {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgb(230 57 70 / 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(230 57 70 / 0.08), rgb(47 149 208 / 0.06)), var(--color-cream);
  font-size: inherit;
}

.letter-demands h3 {
  color: var(--color-red-text);
}

.letter-demands ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-inline-start: 1.2rem;
}

.letter-demands li::marker {
  color: var(--color-red-text);
  font-weight: 950;
}

.letter-statement {
  padding: var(--space-4);
  border-inline-start: 0.45rem solid var(--color-red-strong);
  border-radius: var(--radius-md);
  background: rgb(230 57 70 / 0.08);
  font-size: clamp(1.22rem, 1.06rem + 0.62vw, 1.5rem);
  line-height: 1.5;
}

.letter-closing.letter-closing-centered {
  margin-block: var(--space-3) var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #111827;
  font-family: var(--font-sans);
  font-size: clamp(1.28rem, 1.04rem + 0.88vw, 1.78rem);
  line-height: 1.35;
  text-align: center;
}

.letter-closing.letter-closing-centered strong {
  display: grid;
  gap: 0.38rem;
  justify-items: center;
}

.letter-closing.letter-closing-centered span {
  display: block;
}

.letter-closing.letter-closing-centered span:last-child {
  margin-block-start: 0.35rem;
  color: var(--color-red-text);
  font-size: 1.08em;
}


.letter-meta {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.letter-section-block {
  display: grid;
  gap: var(--space-3);
}

.letter-section-block h3 {
  margin-block-start: var(--space-2);
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.06rem + 0.62vw, 1.58rem);
  letter-spacing: -0.02em;
}

.example-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin-block: var(--space-2);
  padding: var(--space-4);
  border: 1px solid rgb(17 24 39 / 0.12);
  border-radius: var(--radius-lg);
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.94rem + 0.26vw, 1.13rem);
  line-height: 1.35;
  list-style: none;
}

.example-list li {
  position: relative;
  padding-inline-start: 1.45rem;
  font-weight: 800;
}

.example-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.18em;
  inset-inline-start: 0;
  inline-size: 1rem;
  block-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23e63946%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 10.5 12 3l9 7.5%22/%3E%3Cpath d=%22M5.5 9.5V21h13V9.5%22/%3E%3Cpath d=%22M9.5 21v-6h5v6%22/%3E%3C/svg%3E");
}

.quote-box {
  display: grid;
  gap: 0.45rem;
  margin-block: var(--space-2);
  padding: clamp(1.05rem, 2vw, 1.5rem);
  border: 1px solid rgb(17 24 39 / 0.16);
  border-inline-start: 0.55rem solid var(--color-navy-dark);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(17 24 39 / 0.055), rgb(230 57 70 / 0.055)),
    #fffdf8;
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.42rem);
  line-height: 1.42;
}

.quote-box p {
  margin: 0;
}

.major-demand {
  margin-block: var(--space-2);
  padding: clamp(1.15rem, 2.6vw, 2rem);
  border: 2px solid var(--color-red-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 14% 0%, rgb(255 255 255 / 0.20), transparent 12rem),
    linear-gradient(135deg, var(--color-red-strong), #8f1622);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(1.45rem, 1.1rem + 1.45vw, 2.35rem);
  line-height: 1.16;
  text-align: center;
  box-shadow: 0 1rem 2.4rem rgb(185 28 43 / 0.22);
}

.major-demand strong {
  color: inherit;
}

.letter-denn {
  justify-items: center;
  margin-block-start: var(--space-2);
  text-align: center;
}

.letter-denn h3 {
  color: var(--color-red-text);
  font-size: clamp(1.2rem, 1rem + 0.75vw, 1.72rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.letter-signature {
  margin-block-start: 0;
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  text-align: center;
}

.source-note {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fffdf8;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.55;
}

.source-note h3 {
  color: var(--color-navy-dark);
  font-size: var(--step-0);
  letter-spacing: -0.015em;
}

.source-note a {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.campaign-carpet {
  margin-block-start: var(--space-7);
  padding: clamp(0.85rem, 1.7vw, 1.35rem);
  border: 2px solid #111827;
  border-top: 0.55rem solid var(--color-red-strong);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background:
    radial-gradient(circle at 18% 0%, rgb(230 57 70 / 0.16), transparent 17rem),
    radial-gradient(circle at 88% 12%, rgb(47 149 208 / 0.10), transparent 19rem),
    linear-gradient(135deg, #2b3038 0%, #1f232b 48%, #111827 100%);
  box-shadow:
    0 0 0 0.28rem rgb(17 24 39 / 0.16),
    0 1.6rem 4rem rgb(var(--shadow-rgb) / 0.28);
}

.campaign-carpet__inner {
  display: grid;
  gap: var(--space-3);
}

.campaign-carpet__eyebrow {
  justify-self: center;
  margin: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--color-red-strong);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 0.18rem rgb(255 255 255 / 0.16),
    0 0.65rem 1.35rem rgb(0 0 0 / 0.22);
}

.campaign-carpet__figure {
  position: relative;
  margin: 0;
  border: 0.24rem solid #111827;
  border-radius: var(--radius-lg);
  background: #111827;
  box-shadow:
    0 0 0 0.34rem rgb(230 57 70 / 0.24),
    0 1.25rem 2.8rem rgb(0 0 0 / 0.34);
  overflow: hidden;
}

.campaign-carpet__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.72),
    inset 0 -3.8rem 5rem rgb(16 17 20 / 0.12);
}

.campaign-carpet__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.campaign-carpet__subline {
  justify-self: center;
  max-inline-size: 52rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #fffdf8;
  color: #111827;
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 0.95rem + 0.55vw, 1.38rem);
  font-weight: 900;
  line-height: 1.32;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgb(17 24 39 / 0.18),
    0 0.85rem 1.8rem rgb(0 0 0 / 0.16);
}

.label,
.small {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.notice {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 0.45rem solid var(--color-red);
  box-shadow: none;
}

.legal-section {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.legal-section h2,
.legal-section h3 {
  color: var(--color-navy);
  font-size: var(--step-1);
}


.legal-panel {
  display: none;
  scroll-margin-block-start: 6rem;
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 12% 0%, rgb(47 149 208 / 0.08), transparent 20rem),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
}

.legal-panel:target {
  display: block;
}

.legal-panel__inner {
  padding: clamp(1.25rem, 3vw, 2.35rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.96);
  box-shadow: var(--shadow-soft);
}

.legal-panel__inner > h2 {
  margin-block-start: var(--space-2);
}

.legal-panel__actions {
  margin-block-start: var(--space-4);
  font-weight: 800;
}

.site-footer {
  background:
    linear-gradient(
      90deg,
      var(--color-blue) 0%,
      var(--color-green) 38%,
      var(--color-red) 72%,
      var(--color-pink) 100%
    ) top / 100% 0.24rem no-repeat,
    linear-gradient(180deg, #fffdf8 0%, var(--color-cream) 100%);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.site-footer a,
.site-footer p {
  color: var(--color-ink);
}

.site-footer .footer-links a {
  border: 1px solid rgb(var(--shadow-rgb) / 0.12);
  background: rgb(255 255 255 / 0.62);
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  background: var(--color-header-soft);
  color: var(--color-header-hover);
}

.letter-header--with-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(17rem, 0.78fr);
  gap: clamp(1.25rem, 2.7vw, 2.35rem);
  align-items: start;
  max-inline-size: none;
}

.letter-title-block {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.letter-summary-box {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgb(17 24 39 / 0.14);
  border-top: 0.35rem solid var(--color-red);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(230 57 70 / 0.075), rgb(47 149 208 / 0.055)),
    #fffdf8;
  color: var(--color-ink);
  font-family: var(--font-sans);
  box-shadow:
    0 0.75rem 1.8rem rgb(var(--shadow-rgb) / 0.10),
    inset 0 0 0 1px rgb(255 255 255 / 0.70);
}

.letter-summary-box h3 {
  margin: 0;
  color: var(--color-red-text);
  font-size: var(--step-0);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.letter-summary-box p {
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.28vw, 1.12rem);
  line-height: 1.48;
}

.letter-summary-box strong {
  color: var(--color-navy-dark);
  font-weight: 950;
}

@media (max-width: 54rem) {
  .letter-header--with-summary {
    grid-template-columns: 1fr;
  }

  .letter-summary-box {
    max-inline-size: 38rem;
  }
}

@media (max-width: 52rem) {
  .header-inner,
  .footer-inner {
    display: grid;
    justify-items: start;
  }


  h1 {
    max-inline-size: 14ch;
  }
}

@media (max-width: 34rem) {
  .container,
  .narrow {
    inline-size: min(100% - 1rem, 72rem);
  }

  .section {
    padding-block: var(--space-6);
  }

  .nav-list a,
  .footer-links a {
    padding-inline: 0.65rem;
  }


  
.letter-meta {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.letter-section-block {
  display: grid;
  gap: var(--space-3);
}

.letter-section-block h3 {
  margin-block-start: var(--space-2);
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.06rem + 0.62vw, 1.58rem);
  letter-spacing: -0.02em;
}

.example-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin-block: var(--space-2);
  padding: var(--space-4);
  border: 1px solid rgb(17 24 39 / 0.12);
  border-radius: var(--radius-lg);
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.94rem + 0.26vw, 1.13rem);
  line-height: 1.35;
  list-style: none;
}

.example-list li {
  position: relative;
  padding-inline-start: 1.45rem;
  font-weight: 800;
}

.example-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.18em;
  inset-inline-start: 0;
  inline-size: 1rem;
  block-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23e63946%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 10.5 12 3l9 7.5%22/%3E%3Cpath d=%22M5.5 9.5V21h13V9.5%22/%3E%3Cpath d=%22M9.5 21v-6h5v6%22/%3E%3C/svg%3E");
}

.quote-box {
  display: grid;
  gap: 0.45rem;
  margin-block: var(--space-2);
  padding: clamp(1.05rem, 2vw, 1.5rem);
  border: 1px solid rgb(17 24 39 / 0.16);
  border-inline-start: 0.55rem solid var(--color-navy-dark);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(17 24 39 / 0.055), rgb(230 57 70 / 0.055)),
    #fffdf8;
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.42rem);
  line-height: 1.42;
}

.quote-box p {
  margin: 0;
}

.major-demand {
  margin-block: var(--space-2);
  padding: clamp(1.15rem, 2.6vw, 2rem);
  border: 2px solid var(--color-red-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 14% 0%, rgb(255 255 255 / 0.20), transparent 12rem),
    linear-gradient(135deg, var(--color-red-strong), #8f1622);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(1.45rem, 1.1rem + 1.45vw, 2.35rem);
  line-height: 1.16;
  text-align: center;
  box-shadow: 0 1rem 2.4rem rgb(185 28 43 / 0.22);
}

.major-demand strong {
  color: inherit;
}

.letter-denn {
  justify-items: center;
  margin-block-start: var(--space-2);
  text-align: center;
}

.letter-denn h3 {
  color: var(--color-red-text);
  font-size: clamp(1.2rem, 1rem + 0.75vw, 1.72rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.letter-signature {
  margin-block-start: 0;
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  text-align: center;
}

.source-note {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fffdf8;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.55;
}

.source-note h3 {
  color: var(--color-navy-dark);
  font-size: var(--step-0);
  letter-spacing: -0.015em;
}

.source-note a {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.campaign-carpet {
    margin-inline: -0.15rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
  }

  .campaign-carpet__figure {
    border-width: 0.16rem;
    box-shadow:
      0 0 0 0.24rem rgb(230 57 70 / 0.18),
      0 0.8rem 1.8rem rgb(var(--shadow-rgb) / 0.18);
  }

  .campaign-carpet__subline {
    border-radius: var(--radius-md);
    font-size: 1.04rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .button {
    border: 1px solid CanvasText;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .site-header {
    position: static;
    background: #ffffff;
  }

  .site-header::after {
    display: none;
  }

  .brand-logo {
    filter: none;
  }

  .nav-list a {
    color: #000000;
  }

  .skip-link,
  .action-row {
    display: none !important;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .notice,
  .open-letter,
  .letter-demands,
  .campaign-carpet,
  .campaign-carpet__figure {
    box-shadow: none;
    break-inside: avoid;
  }

  a {
    color: #000000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .section,
  .hero {
    padding-block: 1.5rem;
  }
}

.narrow-content {
  max-width: 48rem;
}

.compact-hero {
  min-height: 48vh;
  display: flex;
  align-items: center;
}