/* =====================================================
   R22 · Kundenänderungen 30.08. – Zusatzdatei
   (wird NACH styles.css geladen; neuer Dateiname, damit
   sie beim Upload sicher ankommt)
   ===================================================== */

/* 1) Logo-Schriftzug im Kopf 20 % größer */
.brand span {
  font-size: 1.2em;
}

.brand small {
  font-size: 0.56rem;
}

/* 2) psol: Hover-Robo 30 % größer + Hinweiszeile */
.psol-robo img {
  width: clamp(182px, 17.5vw, 234px);
}

.psol-what {
  margin: -0.6rem 0 1.2rem;
  color: var(--silver-mid);
  font-family: var(--font-light);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* 3) pagecharge: etwas heller + neue Marke (Glossy-P ohne Ring) */
.pcharge {
  background: #161616;
}

.pcharge-glow {
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(242, 199, 0, 0.20), transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 90%, rgba(242, 199, 0, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(242, 199, 0, 0.10), transparent 70%);
}

.pcharge-beta {
  background: rgba(38, 36, 26, 0.75);
}

.pcharge-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
}

.pcharge-brand img {
  width: clamp(46px, 4.5vw, 62px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.pcharge-brand span {
  font-family: var(--font-light);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1;
}

/* 4) Betatester nur zum Ausklappen */
.pcharge-beta {
  display: block;
}

.pcharge-beta-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.5rem;
  border: 1px solid rgba(242, 229, 0, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--yellow);
  font-family: var(--font-light);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.pcharge-beta-toggle:hover,
.pcharge-beta-toggle:focus-visible {
  background: var(--yellow);
  color: var(--black);
}

.pcharge-chev {
  transition: transform 350ms ease;
}

.pcharge-beta.is-open .pcharge-chev {
  transform: rotate(180deg);
}

.pcharge-beta-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pcharge-beta.is-open .pcharge-beta-more {
  grid-template-rows: 1fr;
}

.pcharge-beta-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.pcharge-beta-inner > .pcharge-beta-copy {
  padding-top: clamp(1.4rem, 2.5vw, 2.2rem);
}

@media (min-width: 960px) {
  .pcharge-beta-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .pcharge-beta-inner > .pcharge-form {
    padding-top: clamp(1.4rem, 2.5vw, 2.2rem);
  }
}

/* 6) vios homes – Schwesterfirma mit Buchungssystem */
.vios {
  padding: clamp(2.5rem, 4.5vw, 4.5rem) 7vw;
  background: var(--black);
}

.vios-card {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(1.8rem, 3.2vw, 3.2rem);
  border-radius: 22px;
  background: #1c1a16;
  border: 1px solid rgba(226, 205, 165, 0.22);
  color: #f0ece3;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.vios-eyebrow {
  margin: 0 0 1rem;
  color: #cdb88c;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.vios-head h2 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #f7f3ea;
}

.vios-head h2 em {
  font-style: italic;
  color: #cdb88c;
}

.vios-text {
  margin: 0 0 1.6rem;
  max-width: 70ch;
  font-family: var(--font-light);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #c9c2b4;
}

.vios-band {
  display: block;
  border-radius: 14px;
  overflow: hidden;
}

.vios-band img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms ease;
}

.vios-band:hover img,
.vios-band:focus-visible img {
  transform: scale(1.015);
}

.vios-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: clamp(1.4rem, 2.5vw, 2.2rem);
}

.vios-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 54px;
  padding: 0 1.8rem;
  border-radius: 12px;
  background: #8f9398;
  color: #14130f;
  font-family: var(--font-light);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.vios-btn:hover,
.vios-btn:focus-visible {
  background: #c9cdd1;
  transform: translateY(-2px);
}

.vios-key {
  display: block;
  max-width: clamp(220px, 26vw, 360px);
  transform: rotate(-3deg);
  transition: transform 300ms ease;
}

.vios-key:hover,
.vios-key:focus-visible {
  transform: rotate(0deg) scale(1.04);
}

.vios-key img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
}

@media (max-width: 700px) {
  .vios-foot {
    justify-content: center;
  }
}

/* =====================================================
   R23 · Feinschliff 31.08.: stärkere Streifen, Safari-Screens,
   vios-Anpassungen, Werkzeugleiste dezenter
   ===================================================== */

/* psol: Visual = Robo + wechselnde Browser-Screens */
.psol-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.psol-visual .psol-robo {
  position: relative;
  z-index: 2;
  margin-right: clamp(-64px, -4vw, -36px);
  flex-shrink: 0;
}

.psol-shots {
  position: relative;
  width: clamp(300px, 30vw, 460px);
  aspect-ratio: 888 / 561;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.psol-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  animation: pwl-psol-shot 24s linear infinite;
}

.psol-shots img:nth-child(1) { position: relative; animation-delay: 0s; }
.psol-shots img:nth-child(2) { animation-delay: 6s; }
.psol-shots img:nth-child(3) { animation-delay: 12s; }
.psol-shots img:nth-child(4) { animation-delay: 18s; }

@keyframes pwl-psol-shot {
  0% { opacity: 0; }
  3% { opacity: 1; }
  25% { opacity: 1; }
  29% { opacity: 0; }
  100% { opacity: 0; }
}

/* Lichtstreifen deutlich verstärkt + zweiter, feinerer Streifen */
.psol-robo::before {
  height: 14px;
  top: 32%;
  background: linear-gradient(90deg, transparent, rgba(242, 229, 0, 0.5) 40%, rgba(255, 248, 170, 1));
  box-shadow: 0 0 30px rgba(242, 229, 0, 0.85), 0 0 90px rgba(242, 199, 0, 0.5);
}

.psol-robo::after {
  content: "";
  position: absolute;
  top: 44%;
  right: 60%;
  z-index: 1;
  width: clamp(160px, 24vw, 380px);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 140, 0.8));
  box-shadow: 0 0 18px rgba(242, 229, 0, 0.6);
  transform: rotate(-9deg);
  transform-origin: right center;
  pointer-events: none;
  animation: pwl-psol-streak 5.5s ease-in-out infinite reverse;
}

@keyframes pwl-psol-shot-safe { to { opacity: 1; } }

@media (max-width: 899px) {
  .psol-visual {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }

  .psol-visual .psol-robo {
    margin-right: 0;
  }

  .psol-shots {
    width: min(92%, 460px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psol-shots img {
    animation: none;
  }

  .psol-shots img:nth-child(1) {
    opacity: 1;
  }
}

/* vios: Kundenauftrag – Schlüssel so breit wie zwei Bildfenster, Button in Messing */
.vios-key {
  max-width: none;
  width: min(62%, 780px);
}

.vios-btn {
  background: #b08d57;
  color: #171410;
}

.vios-btn:hover,
.vios-btn:focus-visible {
  background: #cdb88c;
}

@media (max-width: 700px) {
  .vios-key {
    width: 92%;
  }
}

/* Werkzeugleiste (A + − ↺): dezenter, mobil kleiner */
.a11y-bar {
  opacity: 0.45;
  transition: opacity 200ms ease;
}

.a11y-bar:hover,
.a11y-bar:focus-within {
  opacity: 1;
}

@media (max-width: 700px) {
  .a11y-bar {
    transform: scale(0.78);
    transform-origin: right center;
  }
}

/* R23b · vios: drei Bilder in voller Beitragsbreite; Screens in Robo-Höhe */
.vios-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
  overflow: visible;
  border-radius: 0;
}

.vios-band img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 700px) {
  .vios-band {
    grid-template-columns: 1fr;
  }
}

.psol-shots {
  width: clamp(320px, 36vw, 540px);
}

/* R23c · psol: rechter Bereich breiter, Screens nicht mehr gequetscht */
@media (min-width: 900px) {
  .psol-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.psol-shots {
  flex-shrink: 0;
}

/* =====================================================
   R25 · Founder-Porträt: sauber, ohne Farbstich
   -----------------------------------------------------
   Ursache des Gelbstichs: .founder-img liegt im
   mix-blend-mode "lighten" über dem warmen Radialverlauf
   der Sektion (#43301c in der Mitte). "lighten" nimmt je
   Kanal den helleren Wert – dadurch schlug das Braun durch
   das gesamte Foto durch, am stärksten in der Verlaufsmitte
   (= der gelbe Fleck).
   Lösung: exakt hinter dem Porträt liegt jetzt eine fast
   schwarze Fläche in der Bildgeometrie, deren Rand über
   einen weichen Schatten in die warme Bühne ausläuft.
   Das Foto wird dadurch farbneutral wiedergegeben,
   der nahtlose Übergang bleibt erhalten.
   Die Bilddatei selbst bleibt unverändert.
   ===================================================== */

.founder-stage::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  height: min(88%, 760px);
  aspect-ratio: 1023 / 1537;
  transform: translateX(-50%);
  background: #060505;
  /* weicher schwarzer Auslauf in den warmen Bühnenverlauf */
  box-shadow: 0 0 96px 76px #060505;
  pointer-events: none;
}

/* Porträt farbneutral: keine Masken-Weichzeichnung mehr –
   der schwarze Studiogrund verschmilzt von selbst */
.founder-img {
  mix-blend-mode: lighten;
  -webkit-mask-image: none;
  mask-image: none;
}

/* =====================================================
   R26 · Hover · 3D-Kampagne für pagesolution
   (Film & Social – drei Hochformat-Spots 9:16)
   ===================================================== */
.hover3d {
  padding: clamp(3rem, 6vw, 6rem) 7vw clamp(2.4rem, 4vw, 4rem);
  background: linear-gradient(180deg, #0c0c0e 0%, #141210 52%, #0a0a0b 100%);
  color: #f2efe9;
}

.hover3d > * {
  max-width: 1180px;
  margin-inline: auto;
}

.hover3d-head {
  margin-bottom: clamp(2rem, 3.5vw, 3.2rem);
}

.hover3d-eyebrow {
  margin: 0 0 1rem;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hover3d h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  color: #f8f5ee;
}

.hover3d h2 em {
  font-style: italic;
  color: var(--yellow);
}

.hover3d-lead {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-light);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: #e6e1d6;
}

/* Spot-Kacheln */
.hover3d-row .phone {
  max-width: 340px;
}

/* Fließtext zweispaltig unter den Spots */
.hover3d-body {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3.6rem);
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
}

@media (min-width: 900px) {
  .hover3d-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hover3d-body p {
  margin: 0 0 1.1rem;
  font-family: var(--font-light);
  font-size: 0.93rem;
  line-height: 1.75;
  color: #b9b3a7;
}

.hover3d-body a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hover3d-body a:hover,
.hover3d-body a:focus-visible {
  color: #fff;
}

.hover3d-facts {
  display: grid;
  gap: 0.9rem 1.8rem;
  margin: clamp(1.4rem, 2.5vw, 2.2rem) auto;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hover3d-facts li {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hover3d-facts strong {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hover3d-facts span {
  font-family: var(--font-light);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #cfc9bd;
}

.hover3d-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
}

.hover3d-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 52px;
  padding: 0 1.7rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #12100c;
  font-family: var(--font-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}

.hover3d-btn:hover,
.hover3d-btn:focus-visible {
  background: #fff36b;
  transform: translateY(-2px);
}

.hover3d-link {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfc9bd;
  transition: color 180ms ease;
}

.hover3d-link:hover,
.hover3d-link:focus-visible {
  color: var(--yellow);
}

.hover3d-note {
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* KI-Kennzeichnung auf Bewegtbild – gleiche Anmutung wie
   die Kennzeichnung auf den Bildern (Kontur, 60 % transparent) */
.phone--ai::after {
  content: "KI";
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  padding: 0.2em 0.55em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  pointer-events: none;
}

@media (max-width: 860px) {
  .hover3d-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   R29 · Nordseeherz · Teaser auf der Startseite
   Der freigestellte Hering umkreist den Schriftzug,
   der auf einer Sandkante steht. Reine CSS-Bewegung,
   kein Skript.
   ===================================================== */
.nsh {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 5vw, 5rem) 7vw clamp(2.4rem, 4.5vw, 4.5rem);
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, #e8f2f6 0%, rgba(232, 242, 246, 0) 70%),
    linear-gradient(180deg, #f4f8f9 0%, #f8f3ea 46%, #f0e6d6 78%, #e6d5bd 100%);
  color: #0c2c58;
}

/* ---- Bühne mit Sandkante ---- */
.nsh-stage {
  --ox: clamp(100px, 22vw, 292px);  /* Halbachse der Schwimmbahn, waagerecht */
  --oy: clamp(30px, 4.6vw, 68px);   /* Halbachse der Schwimmbahn, senkrecht  */
  position: relative;
  max-width: 1180px;
  height: clamp(238px, 27vw, 340px);
  margin: 0 auto;
}

.nsh-sand {
  position: absolute;
  z-index: 0;
  right: -6vw;
  bottom: 0;
  left: -6vw;
  height: clamp(58px, 8vw, 104px);
  background: url("media/nordseeherz/nordseeherz-sandkante.webp") center bottom / cover no-repeat;
  /* unten ausblenden, damit keine harte Kante zum Fliesstext entsteht */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* ---- Schriftzug mit Seestern, steht auf dem Sand ---- */
.nsh-mark {
  position: absolute;
  z-index: 2;
  bottom: clamp(44px, 6.4vw, 86px);
  left: 50%;
  translate: -50% 0;
  width: clamp(230px, 40vw, 520px);
  pointer-events: none;
}

/* weicher Schattenwurf im Sand */
.nsh-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -9%;
  left: 4%;
  width: 92%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(92, 64, 34, 0.26), rgba(92, 64, 34, 0) 70%);
}

.nsh-word {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(12, 44, 88, 0.16));
}

.nsh-star {
  position: absolute;
  top: -58%;
  left: -7%;
  width: 26%;
  height: auto;
  rotate: -14deg;
  filter: drop-shadow(0 12px 16px rgba(12, 44, 88, 0.18));
}

/* ---- Der Hering: Ellipse aus zwei verschachtelten Ebenen ---- */
.nsh-fish-x,
.nsh-fish-y {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 0;
  height: 0;
}

.nsh-fish-y {
  top: 0;
  left: 0;
}

.nsh-fish {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(122px, 17vw, 236px);
  /* die Trägerebenen sind 0 breit – ohne diese Zeile rechnet
     die globale Regel img{max-width:100%} die Breite auf null */
  max-width: none;
  height: auto;
  margin: -6% 0 0 -50%;
  filter: drop-shadow(0 14px 22px rgba(12, 44, 88, 0.22));
}

.nsh-fish-x {
  z-index: 0;
  animation: nsh-x 24s linear infinite, nsh-depth 24s step-end infinite;
}

.nsh-fish-y { animation: nsh-y 24s linear infinite; }
.nsh-fish   { animation: nsh-flip 24s step-end infinite, nsh-tilt 24s ease-in-out infinite; }

/* waagerechter Anteil: A · sin(t) */
@keyframes nsh-x {
  0%     { translate: 0 0; }
  12.5%  { translate: calc(var(--ox) * 0.707) 0; }
  25%    { translate: var(--ox) 0; }
  37.5%  { translate: calc(var(--ox) * 0.707) 0; }
  50%    { translate: 0 0; }
  62.5%  { translate: calc(var(--ox) * -0.707) 0; }
  75%    { translate: calc(var(--ox) * -1) 0; }
  87.5%  { translate: calc(var(--ox) * -0.707) 0; }
  100%   { translate: 0 0; }
}

/* senkrechter Anteil: B · cos(t), dazu Tiefenwirkung über die Größe */
@keyframes nsh-y {
  0%     { translate: 0 calc(var(--oy) * -1);     scale: 0.82; }
  12.5%  { translate: 0 calc(var(--oy) * -0.707); scale: 0.88; }
  25%    { translate: 0 0;                        scale: 1; }
  37.5%  { translate: 0 calc(var(--oy) * 0.707);  scale: 1.1; }
  50%    { translate: 0 var(--oy);                scale: 1.15; }
  62.5%  { translate: 0 calc(var(--oy) * 0.707);  scale: 1.1; }
  75%    { translate: 0 0;                        scale: 1; }
  87.5%  { translate: 0 calc(var(--oy) * -0.707); scale: 0.88; }
  100%   { translate: 0 calc(var(--oy) * -1);     scale: 0.82; }
}

/* ferne Bahnhälfte (oben) = hinter Schriftzug und Sand,
   nahe Bahnhälfte (unten) = davor */
@keyframes nsh-depth {
  0%   { z-index: 1; }
  25%  { z-index: 3; }
  75%  { z-index: 1; }
}

/* Der Fisch schaut nach links. Zwischen 0 und 25 % sowie ab 75 %
   schwimmt er nach rechts – dort wird er gespiegelt. */
@keyframes nsh-flip {
  0%   { scale: -1 1; }
  25%  { scale: 1 1; }
  75%  { scale: -1 1; }
}

/* leichte Nickbewegung: abwärts bis zur Hälfte, dann wieder aufwärts */
@keyframes nsh-tilt {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: 3.5deg; }
  50%      { rotate: 0deg; }
  75%      { rotate: -3.5deg; }
}

/* ---- Text ---- */
.nsh-copy {
  max-width: 1180px;
  margin: clamp(1.4rem, 2.5vw, 2.4rem) auto 0;
  text-align: center;
}

.nsh-eyebrow {
  margin: 0 0 0.9rem;
  color: #17457e;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nsh h2 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.06;
  color: #0c2c58;
}

.nsh h2 em {
  font-style: italic;
  color: #17457e;
}

.nsh-lead {
  max-width: 62ch;
  margin: 0 auto clamp(1.5rem, 2.5vw, 2.2rem);
  font-family: var(--font-light);
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  line-height: 1.7;
  color: #3d5878;
}

.nsh-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
}

.nsh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 52px;
  padding: 0 1.7rem;
  border-radius: 999px;
  background: #0c2c58;
  color: #f7f2e8;
  font-family: var(--font-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.nsh-btn:hover,
.nsh-btn:focus-visible {
  background: #17457e;
  transform: translateY(-2px);
}

.nsh-link {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3d5878;
  transition: color 180ms ease;
}

.nsh-link:hover,
.nsh-link:focus-visible { color: #0c2c58; }

@media (max-width: 700px) {
  .nsh { padding-inline: 5vw; }
  .nsh-star { top: -52%; left: -10%; width: 30%; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt ein ruhiges Bild */
@media (prefers-reduced-motion: reduce) {
  .nsh-fish-x,
  .nsh-fish-y,
  .nsh-fish { animation: none; }
  .nsh-fish-x { translate: calc(var(--ox) * -0.8) 0; z-index: 3; }
  .nsh-fish-y { translate: 0 calc(var(--oy) * 0.6); }
}