/* ==========================================================================
   Classroom Club – Design Tokens
   Werte aus design-system.md (siehe dort für Herkunft / Konfidenz)
   ========================================================================== */

/* ==========================================================================
   Intro-Loader
   Läuft komplett fest getimt (keine Kopplung an echten Ladefortschritt).
   Ablauf: 3 Logo-Bänder blenden nacheinander ein → Balken füllt sich →
   Logo + Balken fahren (FLIP-Technik, in js/script.js berechnet) an ihre
   echte Position im Hero → weißer Screen blendet aus.
   ========================================================================== */

html.is-loading,
body.is-loading {
  overflow: hidden;
  height: 100%;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity .6s ease;
}

/* Blendet erst aus, NACHDEM das Logo seine Zielposition erreicht hat (Klasse wird
   in js/script.js entsprechend spät gesetzt) – zu diesem Zeitpunkt steht das Logo
   bereits still, daher fällt es dem Nutzer nicht auf, dass es mit ausblendet: an
   exakt derselben Stelle liegt bereits das echte, normal fließende Hero-Logo. */
.loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: clamp(220px, 30vw, 360px);
}

.loader-logo {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.loader-logo__part {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: loaderPartIn .6s cubic-bezier(.22, 1, .36, 1) forwards;
}

.loader-logo__part--1 { animation-delay: .1s; }
.loader-logo__part--2 { animation-delay: .5s; }
.loader-logo__part--3 { animation-delay: .9s; }

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

.loader-bar {
  width: 100%;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--color-navy);
  padding: 4px;
  opacity: 0;
  animation: loaderBarIn .4s ease forwards;
  animation-delay: 1.5s;
}

@keyframes loaderBarIn {
  to { opacity: 1; }
}

/* Balken muss nicht mehr exakt auf der echten Tagline-Pill landen (das saß nie
   ganz präzise) – er blendet stattdessen einfach aus, während sich gleichzeitig
   nur noch das Logo an seine Zielposition bewegt. */
.loader-bar.is-fading {
  animation: none; /* beendet loaderBarIn (hält sonst per forwards die Opacity fest und blockiert die Transition) */
  transition: opacity .7s ease;
  opacity: 0;
}

.loader-bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--color-navy);
  animation: loaderBarFill 1.4s linear forwards;
  animation-delay: 1.6s;
}

/* Bewusst unregelmäßig statt linear: schneller Start, zwei kurze "Stockungen"
   (34%/64%, Breite bleibt kurz stehen), dann Endspurt – wirkt wie ein echter
   Ladevorgang statt einer gleichmäßigen Balkenanimation. */
@keyframes loaderBarFill {
  0%   { width: 0%; }
  8%   { width: 22%; }
  20%  { width: 41%; }
  32%  { width: 52%; }
  34%  { width: 52%; }
  50%  { width: 60%; }
  62%  { width: 75%; }
  64%  { width: 75%; }
  82%  { width: 90%; }
  100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-logo__part,
  .loader-bar,
  .loader-bar__fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
  }

  .hero__portrait,
  .hero__edge,
  .section-next__fade,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

:root {
  /* Farben */
  --color-navy: #183050;
  --color-mint: #a8c8c8;
  --color-mint-deep: #a0c0c0;
  --color-sage-text: #849c9c;
  --color-bg: #f6f6f5;
  --color-white: #ffffff;

  /* Schriften (Font-Family-Namen exakt aus dem Adobe-Fonts-Kit übernommen) */
  --font-sans: "pacaembu", sans-serif;
  --font-accent: "utopia-std-subhead", serif;

  /* Abstände */
  --container-width: 1280px;
  --container-padding: clamp(24px, 5vw, 64px);
  --header-height: 104px;
}

/* ==========================================================================
   Reset / Basics
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-navy);
  /* Papiertextur scrollt mit dem Content (kachelt über die volle Seitenhöhe).
     Um zur fixen Variante zurückzuwechseln (Textur bleibt beim Scrollen stehen,
     Content läuft darüber), die Zeile unten einkommentieren und die obere
     auskommentieren: */
  background: var(--color-bg) url("../img/papiertextur2.jpg") top left repeat;
  /* background: var(--color-bg) url("../img/papiertextur.jpg") center top / cover no-repeat fixed; */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   Scroll-Reveal
   Generische Utility für Text-/Bildblöcke unterhalb des Heros: blenden per
   IntersectionObserver (js/script.js) ein, sobald sie in den Sichtbereich
   scrollen. Beobachtung startet dort bewusst erst NACH dem Intro-Loader, damit
   z. B. die Headline der zweiten Section nicht schon während der Loader-
   Animation als "sichtbar" gilt, falls sie bei kurzen Viewports bereits im
   initialen Sichtbereich läge.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Parallax
   Dezenter Scroll-Parallax für Ilirs Bilder + die Sprech-/Prozent-Bubble im
   Intro (siehe .parallax-Zuweisung + Steuerung in js/script.js). Bewusst
   subtil (kleine Speed-Faktoren) statt auffällig.
   ========================================================================== */

.parallax {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .parallax {
    transform: none !important;
  }
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.95em 1.9em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn--primary:hover {
  background: #0f2038;
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 20px;
  background: transparent;
  box-shadow: 0 2px 16px rgba(24, 48, 80, 0);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Wird per JS (js/script.js) gesetzt, sobald die Seite gescrollt wurde –
   Hintergrund + Schatten blenden erst dann ein, statt von Anfang an dazustehen. */
.site-header--scrolled {
  background: var(--color-bg);
  box-shadow: 0 2px 16px rgba(24, 48, 80, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  flex-shrink: 0;
}

.brand__logo {
  height: 64px;
  width: auto;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 48px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  transition: color .2s ease;
}

.main-nav a:hover {
  color: var(--color-mint-deep);
}

@media (max-width: 900px) {
  /* TODO: mobiles Menü (Hamburger/Overlay) ist noch nicht umgesetzt –
     hier zunächst nur ausgeblendet, bis Interaktion/Icon geliefert wird. */
  .main-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(24px, 5vw, 56px);
  padding-bottom: 200px;
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hero__content {
  max-width: 620px;
  padding-top: 24px;
}

.hero__portrait {
  align-self: flex-end;
}

.hero__logo {
  width: clamp(280px, 30vw, 460px);
  height: auto;
  margin-bottom: 28px;
}

.hero__tagline {
  margin: 0;
  padding-left: 12px;
}

.pill {
  display: inline-block;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 999px;
  padding: 0.85em 1.6em;
  font-size: 1.1rem;
  line-height: 1.3;
}

.pill strong {
  font-family: var(--font-sans);
  font-weight: 600;
}

.pill em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
}

.pill--cta {
  cursor: pointer;
  transition: background-color .2s ease;
}

.pill--cta:hover {
  background: #0f2038;
}

.hero__tagline .pill {
  transform: rotate(-3deg);
}

.hero__portrait {
  flex-shrink: 0;
  width: min(45vw, 560px);
  margin-bottom: -300px;
  position: relative;
  z-index: 1;
  /* overflow: hidden sollte hier ursprünglich den Parallax-Versatz abfangen,
     hat auf schmalen Viewports (Smartphone) aber Ilirs Kopf oben abgeschnitten,
     da der Parallax-Versatz dort relativ zur Bildhöhe größer ausfällt. Die
     Abrisskante darunter (z-index: 2, deckt den unteren Bildbereich ohnehin ab)
     macht das Abfangen unnötig – overflow bleibt daher sichtbar. */
  overflow: visible;
}

/* Gerissene Papierkante – liegt über dem unteren Teil von Ilirs Bild */
.hero__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}

/* Portrait bleibt unsichtbar, bis der Intro-Loader komplett ausgeblendet hat –
   js/script.js setzt dann .is-revealed (nicht an Scroll gekoppelt, sondern
   direkt ans Loader-Ende). */
.hero__portrait {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

.hero__portrait.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Abrisskante + der erste weiche Verlauf direkt darunter (.section-next__fade,
   siehe .intro weiter unten) starten in derselben Ausgangsform, werden aber
   NICHT per CSS-Transition/.is-revealed animiert: Zwei unabhängige Transitions
   könnten je nach Compositor-Timing minimal auseinanderdriften (sichtbare
   Kante). Stattdessen schreibt js/script.js (syncRevealEdgeAndFade) beide per
   rAF-Schleife frame-genau synchron auf denselben Wert. */
.hero__edge,
.section-next__fade {
  opacity: 0;
  transform: translateY(50px);
}

@media (max-width: 900px) {
  .hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 24px;
  }

  .hero__logo {
    margin-inline: auto;
  }

  .hero__tagline {
    padding-left: 0;
  }

  .hero__portrait {
    width: min(70vw, 420px);
    margin-bottom: -110px;
  }

  .hero {
    padding-bottom: 130px;
  }
}

/* ==========================================================================
   Intro – "Ich bin Ilir"
   ========================================================================== */

.intro {
  position: relative;
  padding-bottom: 100px;
}

/* Weicher Übergang: oben 100% Weiß, läuft nach ~200px ins Transparente aus –
   passend zur weißen Unterkante von .hero__edge (kante-unten-header.png). */
.section-next__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(243, 243, 243, 0) 100%);
  pointer-events: none;
}

.intro__grid {
  position: relative;
  z-index: 1; /* über dem .section-next__fade-Verlauf, der sonst wegen position:absolute darüber läge */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "intro-text badges"
    "portrait   body";
  column-gap: 64px;
  row-gap: 40px;
  align-items: center;
  padding-top: 96px;
}

.intro__intro-text { grid-area: intro-text; }
.intro__badges { grid-area: badges; }
.intro__portrait { grid-area: portrait; }
.intro__body { grid-area: body; }

.intro__headline {
  margin: 0 0 20px;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
}

.intro__rule {
  display: block;
  width: 160px;
  height: 2px;
  background: var(--color-mint);
  margin-bottom: 28px;
}

.intro__intro-text p,
.intro__body p {
  margin: 0 0 20px;
  line-height: 1.65;
  font-size: 1rem;
}

.intro__intro-text strong,
.intro__body strong {
  font-weight: 600;
  color: var(--color-sage-text);
}

.intro__portrait {
  max-width: 420px;
}

.intro__badges {
  position: relative;
}

.badge-free {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-mint);
  color: var(--color-white);
  width: 190px;
  height: 108px;
  border-radius: 34px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.badge-free__percent {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 2.55rem;
  line-height: 1;
}

.badge-free__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
}

.speech-bubble {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 30px;
  padding: 22px 30px;
  max-width: 320px;
  margin-left: 60px;
  margin-top: -16px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.intro__closing {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
}

.intro__signature {
  width: 160px;
  height: auto;
  margin-top: 8px;
}

.intro__cta {
  text-align: center;
  margin: 64px 0 0;
}

.intro__cta .pill em {
  color: var(--color-mint);
}

@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro-text"
      "portrait"
      "badges"
      "body";
    gap: 48px;
    padding-top: 64px;
    text-align: center;
  }

  .intro__rule {
    margin-inline: auto;
  }

  .intro__portrait {
    margin-inline: auto;
  }

  .intro__badges {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .speech-bubble {
    margin-left: 0;
    margin-top: 16px;
  }

  .intro__signature {
    margin-inline: auto;
  }
}

/* ==========================================================================
   Features – "Was dich erwartet"
   ========================================================================== */

.features {
  position: relative;
  padding-block: 100px;
}

.features > .container {
  position: relative;
  z-index: 1; /* über dem .features__fade-Verlauf, s. .intro__grid */
}

/* Gleicher Verlauf wie .section-next__fade (Übergang unter der Abrisskante
   im Header), hier gespiegelt: unten weiß, läuft nach oben ins Transparente
   aus – sorgt für einen weichen Übergang zur Abrisskante der nächsten Section. */
.features__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(243, 243, 243, 1) 0%, rgba(243, 243, 243, 0) 100%);
  pointer-events: none;
}

.section-heading {
  margin: 0 0 72px;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  color: var(--color-navy);
}

.section-heading em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.28em;
  color: var(--color-sage-text);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 56px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.feature-item__icon {
  width: 72px;
  height: 72px;
  transition: transform .3s ease;
}

.feature-item__label {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-navy);
  max-width: 16ch;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .25s ease;
}

/* Hover: Icon wird sanft größer + dreht sich leicht (mit Überschwingen beim
   Reinhovern), Label bekommt gleichzeitig eine Unterstreichung. Beim
   Verlassen läuft das Icon über die einfache ease-Transition oben zurück. */
.feature-item:hover .feature-item__icon {
  transform: scale(1.12) rotate(-8deg);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.feature-item:hover .feature-item__label {
  text-decoration-color: currentColor;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 520px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .feature-item__icon {
    width: 60px;
    height: 60px;
  }
}

/* ==========================================================================
   Warum unterstützt CASIO den Classroom Club?
   ========================================================================== */

.why-casio {
  position: relative;
}

/* Mint-Einfärbung liegt multipliziert über der gemeinsamen Papiertextur,
   damit die Struktur durchscheint statt einer platten Fläche. */
.why-casio__bg {
  position: absolute;
  inset: 0;
  background-color: #aecdc8;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Identischer Verlauf wie .section-next__fade im Header: oben weiß, läuft
   nach unten ins Transparente aus – weicher Übergang unter der Abrisskante. */
.why-casio__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(243, 243, 243, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.why-casio__edge {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.why-casio__edge--bottom {
  transform: rotate(180deg);
}

.why-casio__inner {
  position: relative;
  z-index: 1;
  padding-block: 72px 96px;
}

.why-casio__heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin-bottom: 72px;
}

.why-casio__heading {
  margin: 0;
  text-align: center;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
}

.why-casio__heading em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.18em;
  color: var(--color-white);
}

.why-casio__badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-top: 6px;
}

.why-casio__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.why-casio__col p {
  margin: 0 0 20px;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--color-navy);
}

.why-casio__col strong {
  font-weight: 700;
}

.why-casio__signature {
  width: 220px;
  height: auto;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .why-casio__heading-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .why-casio__columns {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }

  .why-casio__signature {
    margin-inline: 0;
  }
}

/* ==========================================================================
   Box 1 Teaser
   ========================================================================== */

.box-teaser {
  position: relative;
  padding-block: 110px 100px;
}

.box-teaser > .container {
  position: relative;
  z-index: 1; /* über dem .box-teaser__fade-Verlauf */
}

/* Gleicher Verlauf wie .section-next__fade im Header: blendet die
   Papiertextur unter der (grünen) Abrisskante von .why-casio__edge--bottom
   sanft ein, statt hart auf die Section-Farbe zu schneiden. */
.box-teaser__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(243, 243, 243, 0) 100%);
  pointer-events: none;
}

.box-teaser__kicker {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 2rem;
  color: var(--color-navy);
}

.box-teaser__kicker em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--color-sage-text);
  font-size: 2.8rem;
}

.box-teaser__heading {
  margin: 8px 0 72px;
  text-align: center;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 700;
  color: var(--color-navy);
}

.box-teaser__heading em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  color: var(--color-sage-text);
}

.box-teaser__grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 64px;
  align-items: start;
}

/* Lupen-Effekt: das scharfe Bild ist per clip-path auf einen Kreis um die
   Maus reduziert, alles daneben zeigt weiterhin nur das weichgezeichnete Bild. */
.box-preview {
  position: relative;
  aspect-ratio: 1;
  --reveal-x: -9999px;
  --reveal-y: -9999px;
}

.box-preview__circle {
  position: absolute;
  inset: 0;
  overflow: hidden; /* Badge liegt bewusst außerhalb dieser Ebene, damit es nicht mit weggeschnitten wird */
}

.box-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Weicher Lupen-Effekt: die Maske hat einen Verlauf statt einer harten Kante,
   und clippt (anders als vorher clip-path) nicht auf einen Kreis, sondern
   respektiert die eigene, organische Form des PNGs samt seiner Transparenz. */
.box-preview__img--sharp {
  -webkit-mask-image: radial-gradient(circle 90px at var(--reveal-x) var(--reveal-y), #000 55%, transparent 100%);
  mask-image: radial-gradient(circle 90px at var(--reveal-x) var(--reveal-y), #000 55%, transparent 100%);
}

/* Zweite Absicherung neben dem JS-Gate (siehe script.js): Auf Geräten ohne
   echten Hover (Touch) bleibt der scharfe Layer komplett unsichtbar – ein
   langer Tap kann sonst das komplette ungeblurrte Bild aufdecken, ohne dass es
   sich (mangels "pointerleave") je wieder verbirgt. */
@media (hover: none) {
  .box-preview__img--sharp {
    display: none;
  }
}

.box-preview__badge {
  position: absolute;
  top: -6%;
  right: -6%;
  width: 22%;
  height: auto;
  z-index: 1;
}

.box-teaser__text p {
  margin: 0 0 20px;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--color-navy);
}

.box-teaser__text strong {
  font-weight: 700;
  color: var(--color-sage-text);
}

.box-teaser__cta {
  margin-top: 32px;
}

.pill--rotate {
  transform: rotate(-3deg);
}

@media (max-width: 900px) {
  .box-teaser__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .box-preview {
    width: min(70vw, 360px);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: 40px 60px;
}

.site-footer__row {
  text-align: center;
  margin-bottom: 56px;
}

.site-footer__heading {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-navy);
}

.site-footer__heading em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--color-sage-text);
  font-size: 1.55rem;
}

.pill-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-mint);
  color: var(--color-navy);
  border-radius: 999px;
  padding: 0.7em 1.4em;
  font-weight: 600;
  font-size: 0.95rem;
}

.pill-ghost__icon {
  width: 18px;
  height: 18px;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.social-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.social-icon img {
  width: 100%;
  height: 100%;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-navy);
  font-size: 0.85rem;
}

.site-footer__legal a {
  color: var(--color-navy);
}

.site-footer__legal a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .site-footer__social {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}