/* ============================================================
   UpGrade, Neuigkeit auf der Startseite (08.10.2026)
   Der Hero des Teasers (teaser.html, teaser.css) als volle Flaeche direkt
   unter dem Abby-Film in index.html: "Gegruendet. Bald geht's los." mit
   Abby-Kachel, Zettel und Aufkleber.

   Laedt NACH brand.css und landing.css. Alles ist auf .neuigkeit gescoped,
   damit nichts mit landing.css kollidiert (dort gibt es .hero, .eyebrow,
   .landing-button). Uebernommen werden .eyebrow, .landing-button und
   .landing-container aus landing.css, sie sind dort genauso gestaltet wie
   im Teaser. Selektoren hier haben mindestens (0,2,0), damit sie die
   Grundregeln .landing-body h2/p/a (0,1,1) schlagen, ohne !important.

   Bewegung: Strich und Aufkleber starten erst, wenn sie ins Bild kommen
   (neuigkeit.js setzt .is-strich und .is-aufgeklebt). Ohne JavaScript
   (keine Klasse .js auf <html>) stehen beide fertig da. Bei reduzierter
   Bewegung ebenso.

   CSP: style-src 'self'. Keine style-Attribute, Zustaende nur ueber Klassen.
   ============================================================ */

/* Kyrillisch fuer die Sprachzeile (Українська, Русский). landing.css
   bringt nur die Latein-Datei mit, Poppins hat gar keine kyrillischen
   Zeichen. Wegen unicode-range laedt der Browser die Datei nur, wenn solche
   Zeichen auf der Seite stehen. Dieselbe Deklaration wie in teaser.css. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

.neuigkeit {
  /* Die Wandfarbe im Abby-Bild (gemessen #f8efe0), nur hinter dem Bild,
     damit Bildkante und Kachel nicht sichtbar springen. */
  --wand: #f8efe0;
  position: relative;
  /* Zettel und Aufkleber ragen absichtlich ueber die Kachelkante. Nur
     waagerecht abschneiden, der Aufkleber darf nach oben ueberstehen. */
  overflow-x: clip;
  padding: clamp(2.5rem, 5.5vw, 5rem) 0 clamp(3.5rem, 7vw, 6.5rem);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.neuigkeit__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

/* h2 in der Optik des Teaser-h1 (Begruendung in index.html). */
.neuigkeit .neuigkeit__titel {
  max-width: 11ch;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(2.45rem, 6.6vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
}

.neuigkeit .neuigkeit__strich {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--lilac-deep);
  white-space: nowrap;
}

.neuigkeit__strich svg {
  position: absolute;
  z-index: -1;
  left: -.03em;
  bottom: -.06em;
  width: calc(100% + .06em);
  height: .3em;
  overflow: visible;
}

/* Grundzustand: fertig gezogen (ohne JavaScript bleibt es so). */
.neuigkeit__strich path {
  fill: none;
  stroke: var(--sun);
  stroke-width: .17em;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Mit JavaScript: zuerst leer, dann von links nach rechts einziehen. */
.js .neuigkeit__strich path {
  stroke-dashoffset: 100;
}

.js .neuigkeit.is-strich .neuigkeit__strich path {
  animation: neuigkeit-strich .9s .2s cubic-bezier(.6, .05, .3, 1) forwards;
}

@keyframes neuigkeit-strich {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

.neuigkeit .neuigkeit__lead {
  max-width: 44ch;
  margin-top: 1.6rem;
  color: var(--ink-soft);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.neuigkeit .neuigkeit__beta {
  max-width: 44ch;
  margin-top: .9rem;
  color: var(--ink);
  font-weight: 650;
}

.neuigkeit__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2rem;
}

.neuigkeit .neuigkeit__link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--ink);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: var(--lilac);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.neuigkeit .neuigkeit__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  max-width: 36rem;
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 650;
}

.neuigkeit__fakten i {
  color: var(--lilac);
  font-style: normal;
}

.neuigkeit :lang(uk),
.neuigkeit :lang(ru) {
  font-family: var(--font-body);
}

/* ---------- Kachel mit Abby ---------- */
.neuigkeit__kachel {
  position: relative;
  margin: 0;
}

.neuigkeit__flaeche {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 32px 12px 32px 12px;
  background: var(--wand);
  box-shadow: 12px 12px 0 var(--lilac);
}

.neuigkeit .neuigkeit__flaeche img {
  width: 100%;
  aspect-ratio: 1080 / 1230;
  object-fit: cover;
  object-position: 50% 100%;
}

.neuigkeit__zettel {
  position: absolute;
  left: -1.8rem;
  top: 2.2rem;
  display: grid;
  gap: .15rem;
  max-width: 15rem;
  padding: .75rem 1rem .85rem;
  border: 2px solid var(--ink);
  border-radius: 16px 5px 16px 5px;
  background: var(--sun);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  transform: rotate(-3deg);
}

.neuigkeit__zettel span {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.neuigkeit__zettel strong {
  font: 700 1.05rem/1.2 var(--font-head);
  letter-spacing: -.02em;
}

/* Aufkleber: wird einmal aufgedrueckt, dann steht er. */
.neuigkeit .neuigkeit__aufkleber {
  position: absolute;
  top: -2.4rem;
  right: -.3rem;
  display: grid;
  place-content: center;
  width: 9rem;
  height: 9rem;
  margin: 0;
  padding: 1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink);
  font: 700 1rem/1.15 var(--font-head);
  letter-spacing: -.02em;
  text-align: center;
  transform: rotate(10deg);
}

.neuigkeit__aufkleber span {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.04em;
}

.js .neuigkeit .neuigkeit__aufkleber {
  opacity: 0;
}

.js .neuigkeit.is-aufgeklebt .neuigkeit__aufkleber {
  opacity: 1;
  animation: neuigkeit-aufkleben .65s .5s cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes neuigkeit-aufkleben {
  from { opacity: 0; transform: rotate(24deg) scale(1.3); box-shadow: 16px 16px 0 rgba(24, 33, 61, 0); }
  45% { opacity: 1; }
  to { opacity: 1; transform: rotate(10deg) scale(1); box-shadow: 5px 5px 0 var(--ink); }
}

/* ---------- Handy: Text oben, Kachel darunter ---------- */
@media (max-width: 760px) {
  .neuigkeit {
    padding: 2rem 0 3.5rem;
  }

  .neuigkeit__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  /* "Bald geht's los." darf nicht umbrechen (nowrap wegen des Strichs) und
     ist rund 7,1 em breit. Bei schmalen Schirmen waechst die Schrift darum
     mit der Breite mit (Spalte = 100vw minus Seitenrand, siehe
     .landing-container in landing.css; 2rem als sicherer Wert). */
  .neuigkeit .neuigkeit__titel {
    font-size: min(2.45rem, calc((100vw - 2rem) / 7.4));
    line-height: 1;
  }

  .neuigkeit .neuigkeit__lead {
    font-size: var(--text-17);
  }

  .neuigkeit__aktionen {
    margin-top: 1.6rem;
  }

  .neuigkeit__aktionen .landing-button {
    width: 100%;
  }

  .neuigkeit__kachel {
    margin: 1.4rem .5rem 0 0;
  }

  .neuigkeit__zettel {
    left: -.4rem;
    top: -1rem;
    max-width: 12.5rem;
    padding: .6rem .8rem;
  }

  .neuigkeit__zettel strong {
    font-size: var(--text-15);
  }

  .neuigkeit .neuigkeit__aufkleber {
    top: auto;
    right: -.5rem;
    bottom: -1.2rem;
    width: 6.6rem;
    height: 6.6rem;
    padding: .6rem;
    font-size: var(--text-12);
  }

  .neuigkeit__aufkleber span {
    font-size: 1.35rem;
  }
}

/* ---------- Weniger Bewegung: sofort der fertige Zustand ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .neuigkeit__strich path,
  .js .neuigkeit.is-strich .neuigkeit__strich path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .js .neuigkeit .neuigkeit__aufkleber,
  .js .neuigkeit.is-aufgeklebt .neuigkeit__aufkleber {
    opacity: 1;
    animation: none;
  }
}