/* =========================================================
   ONE51 – Startseiten-Abschnitte
   (für den Block „Individuelles HTML“ und die Vorschau)
   ========================================================= */
.o51-section { padding-block: var(--space-12); }
.o51-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.o51-section__head h2 { font-size: 36px; line-height: 42px; margin: 0; }
.o51-eyebrow {
  font-family: var(--font-arcade); font-size: 10px; line-height: 16px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2);
}

/* Hero */
.o51-hero { display: grid; gap: var(--space-8); align-items: center; padding-block: var(--space-8) var(--space-12); }
@media (min-width: 880px) { .o51-hero { grid-template-columns: 1.1fr .9fr; gap: var(--space-12); } }
.o51-hero__title {
  font-family: var(--font-pixel); font-weight: 700;
  font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.o51-hero__title mark { background: var(--one51-blue); color: var(--on-blue); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.o51-hero__lead { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink); margin: 0 0 var(--space-6); max-width: 46ch; }
.o51-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.o51-hero__art {
  position: relative; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; justify-self: center;
  background-color: var(--one51-blue);
  background-image: radial-gradient(var(--lcd-0) 2px, transparent 2px);
  background-size: 24px 24px;
  border: var(--border-pixel) solid var(--line); box-shadow: 8px 8px 0 0 var(--lcd-3);
  display: grid; place-items: center; overflow: hidden;
}
.o51-hero__art .o51-mark { width: 56%; image-rendering: pixelated; animation: o51-hop 1.6s steps(2, jump-none) infinite; }
.o51-hero__art .o51-sprite { position: absolute; width: 22%; image-rendering: pixelated; }
.o51-hero__art .o51-sprite--a { left: 6%; bottom: 7%; }
.o51-hero__art .o51-sprite--b { right: 6%; top: 7%; }
.o51-hero__art .o51-sprite--c { right: 8%; bottom: 6%; width: 16%; }
.o51-hero__art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 18%;
  background: var(--lcd-2); border-top: var(--border-pixel) solid var(--lcd-3); z-index: 0;
}
.o51-hero__art > * { position: relative; z-index: 1; }
.o51-hero__art > .o51-sprite { position: absolute; }
@keyframes o51-hop { 0% { transform: translateY(0) } 100% { transform: translateY(-8px) } }

/* Versprechen */
.o51-usp { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.o51-usp__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: var(--border-pixel) solid var(--line); }
.o51-usp__item img, .o51-usp__item svg { width: 48px; height: 48px; image-rendering: pixelated; }
.o51-usp__item h3 { margin: 0 0 var(--space-1); font-size: 20px; line-height: 24px; }
.o51-usp__item p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
:root[data-theme="dark"] .o51-usp__item svg g { fill: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o51-usp__item svg g { fill: var(--ink); } }

/* Kategorien */
.o51-cats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); list-style: none; padding: 0; margin: 0; }
.o51-cat {
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; color: var(--ink);
  background: var(--surface-tint); border: var(--border-pixel) solid var(--line);
  padding: var(--space-4); height: 100%; box-sizing: border-box; cursor: pointer;
  font: inherit; text-align: left; width: 100%;
  transition: transform 60ms steps(1), box-shadow 60ms steps(1);
}
.o51-cat:hover { box-shadow: var(--shadow-pixel); transform: translate(-2px, -2px); color: var(--ink); }
.o51-cat img, .o51-cat svg { width: 64px; height: 64px; image-rendering: pixelated; }
.o51-cat strong { font-family: var(--font-pixel); font-size: 20px; line-height: 24px; font-weight: 600; }
.o51-cat span { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }

/* Geschichte */
.o51-story { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 880px) { .o51-story { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.o51-story__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.o51-story__facts div { border-top: var(--border-pixel) solid var(--line); padding-top: var(--space-2); }
.o51-story__facts b { display: block; font-family: var(--font-arcade); font-size: 16px; line-height: 24px; font-weight: 400; }
.o51-story__facts span { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }

/* Newsletter */
.o51-news {
  background: var(--one51-blue); color: var(--on-blue);
  border: var(--border-pixel) solid var(--lcd-3); box-shadow: 8px 8px 0 0 var(--lcd-3);
  padding: var(--space-8); display: grid; gap: var(--space-6); align-items: center;
}
@media (min-width: 880px) { .o51-news { grid-template-columns: 1fr 1fr; padding: var(--space-12); } }
.o51-news h2 { color: var(--on-blue); margin: 0 0 var(--space-2); font-size: 36px; line-height: 42px; }
.o51-news p { margin: 0; font-weight: 600; }
.o51-news form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.o51-news input[type="email"] { flex: 1 1 220px; min-width: 0; border-color: var(--lcd-3) !important; background: #fff !important; color: #16293a; }
.o51-news .o51-btn { background: var(--lcd-3); color: var(--lcd-0); border-color: var(--lcd-3) !important; box-shadow: 4px 4px 0 0 var(--lcd-2); }
.o51-news .o51-btn:hover { background: #22506e; color: var(--lcd-0); }
.o51-news small { display: block; margin-top: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; }