/* ============================================================================
   custom-theme.css – handschriftlicher Anpassungs-Layer für das Theme „simm".

   Wird im Frontend NACH theme.css geladen. Reines, Node-frei editierbares CSS:
   theme.css bleibt generiert & neutral, feine Korrekturen leben hier.
   ========================================================================== */

/* Sanftes Auftauchen der Inhaltssektionen (respektiert reduzierte Bewegung). */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: simm-fade-in 0.6s ease-out both;
  }

  @keyframes simm-fade-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

main a {
  text-decoration: none;
}

header nav ul li a {
  font-size: 18px;
}

/* Höhe des FIXIERTEN Headers = Logo-Höhe (+ 1 px Unterkante). EINE Stelle: das Logo und der
   Abstand des Inhalts zum Header lesen denselben Wert – ändert sich das Logo, rückt der Inhalt mit. */
:root {
  --simm-header-h: 150px;
}

@media (min-width: 40rem) {
  :root {
    --simm-header-h: 175px;
  }
}

header .img-logo {
  height: var(--simm-header-h);
  padding: 15px 0;
}

/* Breadcrumbs und Inhalt beginnen UNTER dem fixierten Header – auf allen Seiten außer der
   Startseite, deren Fullscreen-Hero bewusst unter dem Header liegt (body.site-home,
   Rollen-Body-Klasse). Am <body>, weil die Breadcrumbs (wie im Kern-Layout) vor <main> stehen. */
body:not(.site-home) {
  padding-top: calc(var(--simm-header-h) + 1px);
}

/* Sprungziele (Anker, z. B. #form_kontakt) nicht unter dem Header verstecken. */
html {
  scroll-padding-top: calc(var(--simm-header-h) + 1rem);
}

/* ============================================================================
   niarxbuilder – Text-Block im simm-Look (2026-10-13, Umbau HTML → Blöcke).
   Der Text-Block rendert <div class="prose max-w-none">. `prose` ist im Build NICHT definiert
   (kein Typography-Plugin) – hier nur der Haken für genau diesen Inhalt. Diese Datei ist
   ungelayert und schlägt damit die Kern-Typografie (#content :where(...) in @layer base).
   Der Inhalt bleibt KLASSENLOS (h1, h2, p, a) – das Aussehen gehört dem Theme.
   ========================================================================== */
#content .prose {
  color: #646363;
  line-height: 1.625;
}

#content .prose h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.025em);
  line-height: 1.1;
  text-transform: uppercase;
  color: #1b1b1b;
  margin: 0 0 2rem;
}

@media (min-width: 48rem) {
  #content .prose h1 {
    font-size: var(--text-6xl, 3.75rem);
  }
}

/* Rote Linie unter der Seitenüberschrift (vorher ein eigenes <div> im Seiten-HTML).
   Zentrierte Überschrift (Ausrichtung im Editor) → Linie mittig und kürzer. */
#content .prose h1::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.25rem;
  margin-top: 1.5rem;
  background: #e4002c;
}

#content .prose h1.text-center::after {
  width: 3rem;
  margin-inline: auto;
}

#content .prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: #1b1b1b;
  margin: 1rem 0 0.5rem;
}

@media (min-width: 48rem) {
  #content .prose h2 {
    font-size: var(--text-3xl, 1.875rem);
  }
}

/* Kicker: ein Absatz DIREKT vor der Seitenüberschrift wird zur roten Versalzeile („Seit 1974").
   Der Inhalt bleibt klassenlos. Zwei Formen, weil der Editor jeden Absatz als eigenen Text-Block
   speichert (eigenes <div class="prose">): im selben Block ODER im Block davor. */
#content .prose p:has(+ h1),
#content .prose:has(+ .prose > h1:first-child) > p:only-child {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e4002c;
  margin-bottom: 1rem;
}

#content .prose p {
  margin: 0 0 1rem;
}

#content .prose a {
  color: #e4002c;
  font-weight: 600;
  text-decoration: none;
}

#content .prose a:hover,
#content .prose a:focus-visible {
  text-decoration: underline;
}

#content .prose strong {
  color: #1b1b1b;
}

/* Bereich mit der Klasse `simm-narrow` (⚙︎ › CSS-Klassen): Rechtsseiten – lesbare Zeilenlänge
   (max-w-3xl), linksbündig mit den Breadcrumbs, Überschriften in den bisherigen kleineren Maßen. */
#content .simm-narrow .prose {
  max-width: 48rem;
}

#content .simm-narrow .prose h1 {
  margin-bottom: 2.5rem;
}

@media (min-width: 48rem) {
  #content .simm-narrow .prose h1 {
    font-size: var(--text-5xl, 3rem);
  }
}

#content .simm-narrow .prose h1::after {
  width: 4rem;
  margin-top: 1rem;
}

#content .simm-narrow .prose h2 {
  font-size: var(--text-xl, 1.25rem);
}

/* ---- Kontakt: Bereich mit `simm-contact` (2 Spalten) ----------------------------------------
   Links die Standorte als rot umrandete Karten, rechts das Formular auf heller Karte. Ab lg im
   Verhältnis 5:7 wie das bisherige Layout (der Bereich kennt nur gleich breite Spalten). Jeder
   Absatz ist ein eigener Text-Block – die Karte entsteht aus dem Rand an jedem Block der Spalte,
   der Abstand zwischen zwei Standorten sitzt außerhalb des Rands (an der nächsten Überschrift). */
@media (min-width: 64rem) {
  #content .simm-contact > .grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

#content .simm-contact .nb-col:first-child > .prose {
  border-left: 2px solid #e4002c;
  padding-left: 1.5rem;
}

#content .simm-contact .nb-col:first-child > .prose:has(> :is(h2, h3)):not(:first-child) {
  margin-top: 3rem;
}

#content .simm-contact :is(h2, h3) {
  font-size: var(--text-2xl, 1.5rem);
  letter-spacing: var(--tracking-tight, -0.025em);
  margin: 0 0 1rem;
}

#content .simm-contact .nb-col:first-child :is(h2, h3) {
  color: #e4002c;
}

#content .simm-contact .nb-col:first-child p {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

#content .simm-contact .nb-col:first-child a {
  color: #1b1b1b;
}

#content .simm-contact .nb-col:first-child a:hover,
#content .simm-contact .nb-col:first-child a:focus-visible {
  color: #e4002c;
  text-decoration: none;
}

#content .simm-contact .nb-col:last-child {
  background: #fcfcfc;
  border: 1px solid rgba(228, 228, 231, 0.6);
  border-radius: 2px;
  padding: 2rem;
}

@media (min-width: 48rem) {
  #content .simm-contact .nb-col:last-child {
    padding: 3rem;
  }
}

#content .simm-contact .nb-col:last-child h2 {
  margin-bottom: 1.5rem;
}

/* Einleitung: die Absätze nach der Seitenüberschrift in DERSELBEN Spalte (im selben Text-Block
   oder in den folgenden) werden zum größeren, leichten Einleitungstext. Nicht auf den Rechtsseiten
   (simm-narrow). Weiterer Fließtext gehört deshalb in einen eigenen Bereich. */
#content section:not(.simm-narrow) .prose h1 + p,
#content section:not(.simm-narrow) .prose:has(> h1:last-child) ~ .prose > p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.625;
  max-width: 48rem;
}

@media (min-width: 48rem) {
  #content section:not(.simm-narrow) .prose h1 + p,
  #content section:not(.simm-narrow) .prose:has(> h1:last-child) ~ .prose > p {
    font-size: 1.25rem;
  }
}

#content section:not(.simm-narrow) .prose p.text-center {
  margin-inline: auto;
}

/* Bilder des Bild-Blocks: simm ist durchgehend eckig (der Block rundet standardmäßig ab). */
#content .nb-col figure img {
  border-radius: 0;
}

/* ---- Karten-Raster: Bereich mit `simm-cards` ------------------------------------------------
   Je Spalte: Bild-Block (verlinkt) + Überschrift + „Ansehen →"-Link. Die Spalte ist die Karte:
   Überfahren zoomt das Bild und färbt die Überschrift rot (vorher ein umschließender Link). */
#content .simm-cards figure {
  overflow: hidden;
  background: #f4f4f5;
  margin: 0 0 1.25rem;
}

#content .simm-cards figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  #content .simm-cards figure img {
    transition: transform 0.5s ease;
  }

  #content .simm-cards .nb-col:hover figure img {
    transform: scale(1.05);
  }
}

#content .simm-cards h2 {
  font-size: var(--text-2xl, 1.5rem);
  text-transform: uppercase;
  margin: 0;
  transition: color 0.2s ease;
}

#content .simm-cards .nb-col:hover h2 {
  color: #e4002c;
}

#content .simm-cards .prose p {
  margin: 1rem 0 0;
}

#content .simm-cards .prose p a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Produktseiten (2026-10-13): allgemeine Bausteine --------------------------------------- */

/* Überschrift 3 (z. B. „Was / Wer / Wie"). */
#content .prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.025em);
  line-height: 1.3;
  color: #1b1b1b;
  margin: 0 0 1.25rem;
}

@media (min-width: 48rem) {
  #content .prose h3 {
    font-size: var(--text-2xl, 1.5rem);
  }
}

/* Aufzählungen mit roten Punkten (vorher je Punkt ein eigenes <span> im Seiten-HTML). */
#content .prose ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

#content .prose ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-top: 1rem;
}

#content .prose ul > li:first-child {
  margin-top: 0;
}

#content .prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #e4002c;
}

#content .prose li > p {
  margin: 0;
}

/* Bereich `simm-caps`: Überschriften in Versalien (z. B. „Aus unserer Fertigung"). */
#content .simm-caps .prose h2 {
  text-transform: uppercase;
}

/* Bänder: randloser Hintergrund über die volle Breite, der Inhalt behält die Breite des Bereichs.
   border-image-Langform (Muster ropesolutions): der „fill"-Teil malt die Fläche, der seitliche
   Überstand zählt nicht zur Scrollbreite. Bänder liegen ohne Außenabstand aneinander. */
#content section.simm-band-light,
#content section.simm-band-red {
  margin-block: 0;
  border-image-source: linear-gradient(var(--simm-band-bg) 0 0);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
}

#content section.simm-band-light {
  --simm-band-bg: #fcfcfc;
}

#content section.simm-band-red {
  --simm-band-bg: #e4002c;
}

/* Rotes Band: Text weiß, Button invertiert; ab lg Text links, Button rechts. */
#content .simm-band-red > .grid {
  align-items: center;
}

#content .simm-band-red .prose,
#content .simm-band-red .prose h2 {
  color: #fff;
}

#content .simm-band-red .prose h2 {
  font-size: var(--text-2xl, 1.5rem);
  margin: 0 0 0.5rem;
}

@media (min-width: 48rem) {
  #content .simm-band-red .prose h2 {
    font-size: var(--text-4xl, 2.25rem);
  }
}

#content .simm-band-red .prose p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

@media (min-width: 64rem) {
  #content .simm-band-red .nb-col:last-child {
    justify-self: end;
  }
}

/* CTA-Button (Block „CTA-Button", Haken `nb-cta`). */
#content .nb-cta {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1rem 2rem;
  background: #e4002c;
  color: #fff;
}

#content .nb-cta:hover,
#content .nb-cta:focus-visible {
  background: #1b1b1b;
  color: #fff;
}

#content .simm-band-red .nb-cta {
  background: #fff;
  color: #e4002c;
}

#content .simm-band-red .nb-cta:hover,
#content .simm-band-red .nb-cta:focus-visible {
  background: #1b1b1b;
  color: #fff;
}

/* Video-Block: eckig, dunkler Grund, Höhe begrenzt. */
#content .nb-col video {
  border-radius: 0;
  background: #1b1b1b;
  max-height: 620px;
  object-fit: cover;
}

/* Bilder-Raster mit Lightbox: Bereich `simm-gallery` (quadratisch), mit `simm-ratio-43` im 4:3-Format. */
#content .simm-gallery > .grid {
  gap: 1rem;
}

#content .simm-gallery figure {
  margin: 0;
  overflow: hidden;
  background: #fcfcfc;
  border: 1px solid #e4e4e7;
}

#content .simm-gallery figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#content .simm-gallery.simm-ratio-43 figure img {
  aspect-ratio: 4 / 3;
}

@media (prefers-reduced-motion: no-preference) {
  #content .simm-gallery figure img {
    transition: transform 0.5s ease;
  }

  #content .simm-gallery figure:hover img {
    transform: scale(1.05);
  }
}

/* Zentrierte Zwischenüberschrift (z. B. „Die Techniken des Münzprägens"): größer, mit roter Linie;
   ein zentrierter Absatz direkt davor wird zum Kicker. */
#content .prose h2.text-center::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.25rem;
  margin: 1.5rem auto 0;
  background: #e4002c;
}

@media (min-width: 48rem) {
  #content .prose h2.text-center {
    font-size: var(--text-4xl, 2.25rem);
  }
}

#content .prose p.text-center:has(+ h2.text-center),
#content .prose:has(+ .prose > h2.text-center:first-child) > p.text-center:only-child {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e4002c;
  margin-bottom: 1rem;
}

/* ---- Schritt-/Technik-Karten: Bereich `simm-steps` ------------------------------------------
   Je Spalte eine weiße Karte mit Rahmen: Bild oben randlos, darunter eine große blasse Nummer
   (Absatz direkt vor der Überschrift), rote Überschrift 3, Text und optional ein Button. */
#content .simm-steps .nb-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e7;
  padding-bottom: 2rem;
}

#content .simm-steps .nb-col > .prose,
#content .simm-steps .nb-col > div:not(.prose) {
  padding-inline: 2rem;
}

#content .simm-steps figure {
  margin: 0 0 2rem;
  overflow: hidden;
  background: #fcfcfc;
}

#content .simm-steps figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#content :is(.simm-steps, .simm-facts) .prose:has(+ .prose > h3:first-child) > p:only-child,
#content :is(.simm-steps, .simm-facts) .prose p:has(+ h3) {
  font-family: var(--font-display);
  font-size: var(--text-5xl, 3rem);
  font-weight: 700;
  line-height: 1;
  color: #e4002c;
  opacity: 0.15;
  margin: 0 0 1rem;
}

#content .simm-steps .prose h3 {
  color: #e4002c;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#content .simm-steps .nb-cta {
  padding: 0.75rem 1.5rem;
}

/* Bereich `simm-more`: „Weitere … ansehen →"-Link in Display-Schrift. */
#content .simm-more .prose p a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Bereich `simm-h2-kicker`: Überschrift 2 im Kicker-Look (rote Versalzeile) – für Abschnitte, deren
   Titel optisch nur eine Kennzeichnung ist („Unser Sortiment"), semantisch aber Überschrift bleibt. */
#content .simm-h2-kicker .prose h2 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e4002c;
  margin: 0 0 1rem;
}

/* Bereich `simm-media`: Text neben einem Bild im 4:3-Format, vertikal mittig. */
#content .simm-media > .grid {
  align-items: center;
}

#content .simm-media figure {
  margin: 0;
  overflow: hidden;
  background: #1b1b1b;
}

#content .simm-media figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---- Über uns (2026-10-13) ------------------------------------------------------------------ */

/* Bereich `simm-measure`: lesbare Zeilenlänge (max-w-3xl); der erste Absatz nach der Überschrift 2
   wird zum Einleitungstext. */
#content .simm-measure .prose {
  max-width: 48rem;
}

#content .simm-measure .prose:has(> h2:last-child) + .prose > p:first-child,
#content .simm-measure .prose h2 + p {
  font-size: 1.125rem;
  font-weight: 300;
}

/* Bereich `simm-kicker`: ein Absatz direkt vor einer Überschrift 2 wird zum Kicker (nicht zentriert). */
#content .simm-kicker .prose:has(+ .prose > h2:first-child) > p:only-child,
#content .simm-kicker .prose p:has(+ h2) {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e4002c;
  margin-bottom: 1rem;
}

/* Bereich `simm-avatars`: runde Fotos zentriert in einer Reihe (der Bereich kennt höchstens 4 Spalten). */
#content .simm-avatars > .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

#content .simm-avatars .nb-col {
  width: 7rem;
}

@media (min-width: 48rem) {
  #content .simm-avatars > .grid {
    gap: 2.5rem;
  }

  #content .simm-avatars .nb-col {
    width: 8rem;
  }
}

#content .simm-avatars figure {
  margin: 0;
}

#content .simm-avatars figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e4e4e7;
}

/* Bereich `simm-facts`: Kennzahlen (große blasse Zahl = Absatz vor der Überschrift 3, siehe simm-steps). */
#content .simm-facts .prose h3 {
  font-size: var(--text-lg, 1.125rem);
  margin-bottom: 0.25rem;
}

/* Zeitleiste: je Eintrag ein Bereich `simm-timeline` (mit simm-band-light) – Bild links, Jahr (Absatz
   vor dem Text) und Text rechts. Linie und Punkt zeichnet das Theme; ohne Bild einspaltig. */
#content section.simm-timeline {
  position: relative;
  padding-left: 3.5rem;
}

#content section.simm-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  width: 2px;
  background: rgba(228, 0, 44, 0.2);
}

#content section.simm-timeline::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: 1.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: #e4002c;
  box-shadow: 0 0 0 4px #fcfcfc;
  transform: translateX(calc(-50% + 1px));
}

@media (min-width: 48rem) {
  #content section.simm-timeline {
    padding-left: 5rem;
  }

  #content section.simm-timeline::before,
  #content section.simm-timeline::after {
    left: 1.5rem;
  }
}

#content .simm-timeline > .grid {
  background: #fff;
  border: 1px solid #e4e4e7;
  padding: 1.25rem;
  gap: 1rem;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

#content .simm-timeline > .grid:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

@media (min-width: 48rem) {
  #content .simm-timeline > .grid {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  #content .simm-timeline > .grid:has(> .nb-col:nth-child(2)) {
    grid-template-columns: 14rem 1fr;
  }
}

#content .simm-timeline figure {
  margin: 0;
  overflow: hidden;
  background: #fcfcfc;
  border: 1px solid #f4f4f5;
}

#content .simm-timeline figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#content .simm-timeline figure img.object-contain {
  object-fit: contain;
}

#content .simm-timeline .prose:has(+ .prose > p) > p:only-child:first-child {
  font-family: var(--font-display);
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  line-height: 1;
  color: #e4002c;
  margin: 0 0 0.75rem;
}

@media (min-width: 48rem) {
  #content .simm-timeline .prose:has(+ .prose > p) > p:only-child:first-child {
    font-size: var(--text-4xl, 2.25rem);
  }
}

#content .simm-timeline .prose p {
  margin: 0;
}

/* Seitenkopf als eigener Bereich (nur Kicker + H1, linksbündig, z. B. „Über uns"): der folgende Bereich
   schließt direkt an. Sonst addieren sich H1-Abstand, die festen Außenabstände des Bereichs-Blocks
   (my-8, im Editor nicht einstellbar) und der Abstand über der nächsten Überschrift. */
#content section:has(.nb-col > .prose:last-child > h1:last-child:not(.text-center)) {
  margin-bottom: 0;
}

#content section:has(.nb-col > .prose:last-child > h1:last-child:not(.text-center)) + section {
  margin-top: 0;
}

#content section:has(.nb-col > .prose:last-child > h1:last-child:not(.text-center)) + section .nb-col > .prose:first-child > :first-child {
  margin-top: 0;
}

/* ---- Startseite (2026-10-13) ---------------------------------------------------------------- */

/* Bereich `simm-intro`: zentriertes Intro unter dem Hero – große Überschrift 2 (nicht in Versalien),
   rote Linie, darunter der Einleitungstext. */
#content .simm-intro .prose {
  max-width: 64rem;
  margin-inline: auto;
}

#content .simm-intro .prose h2 {
  line-height: 1.15;
}

@media (min-width: 48rem) {
  #content .simm-intro .prose h2.text-center {
    font-size: var(--text-5xl, 3rem);
  }
}

#content .simm-intro .prose h2.text-center::after {
  margin: 2rem auto;
}

#content .simm-intro .prose:has(> h2) + .prose > p,
#content .simm-intro .prose h2 + p {
  max-width: 48rem;
  margin-inline: auto;
  font-size: 1.125rem;
  font-weight: 300;
}

@media (min-width: 48rem) {
  #content .simm-intro .prose:has(> h2) + .prose > p,
  #content .simm-intro .prose h2 + p {
    font-size: 1.25rem;
  }
}

/* Weißes Band (wie simm-band-light, nur weiß) – damit Reihen mit wechselndem Grund lückenlos aneinanderliegen. */
#content section.simm-band-white {
  margin-block: 0;
  border-image-source: linear-gradient(#fff 0 0);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
}

/* Leistungs-Reihen: Bereich `simm-feature` (Text | Bild, ab lg 5:7), mit `simm-image-left` Bild links
   (dazu „Spalten umkehren ab lg", mobil bleibt der Text oben). Die Nummer 01/02/03 zählt das Theme
   (CSS-Zähler) – reine Gestaltung: im Bild als Badge, über der Überschrift groß und blass. */
#content {
  counter-reset: simm-feature;
}

#content section.simm-feature {
  counter-increment: simm-feature;
}

#content .simm-feature > .grid {
  align-items: center;
}

@media (min-width: 64rem) {
  #content .simm-feature > .grid {
    grid-template-columns: 5fr 7fr;
  }

  #content .simm-feature.simm-image-left > .grid {
    grid-template-columns: 7fr 5fr;
  }
}

#content .simm-feature figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #f4f4f5;
}

#content .simm-feature figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  #content .simm-feature figure img {
    transition: transform 0.5s ease;
  }

  #content .simm-feature figure:hover img {
    transform: scale(1.05);
  }
}

#content .simm-feature figure::after {
  content: counter(simm-feature, decimal-leading-zero);
  content: counter(simm-feature, decimal-leading-zero) / "";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 1rem;
  background: #1b1b1b;
  color: #e4002c;
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
}

#content .simm-feature:not(.simm-image-left) figure::after {
  top: auto;
  bottom: 1.5rem;
}

#content .simm-feature .prose h3 {
  font-size: var(--text-3xl, 1.875rem);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

#content .simm-feature .prose h3::before {
  content: counter(simm-feature, decimal-leading-zero);
  content: counter(simm-feature, decimal-leading-zero) / "";
  display: block;
  font-size: var(--text-6xl, 3.75rem);
  line-height: 1;
  color: #e4002c;
  opacity: 0.15;
  margin-bottom: 0.5rem;
}

@media (min-width: 48rem) {
  #content .simm-feature .prose h3 {
    font-size: var(--text-5xl, 3rem);
  }

  #content .simm-feature .prose h3::before {
    font-size: var(--text-8xl, 6rem);
  }

  #content .simm-feature .prose ul {
    font-size: 1.125rem;
  }
}

#content .simm-feature .prose ul > li {
  margin-top: 0.75rem;
}

#content .simm-feature .prose ul {
  margin-bottom: 2rem;
}

#content .simm-feature .prose ul > li:first-child {
  margin-top: 0;
}

#content .simm-feature .prose p a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}