/* ==========================================================================
   Erfolgsgeschichten: vier Karten im Format 1080x1080

   Die Karten kommen aus dem Sozialen und sind auf ein festes Raster von
   1080 Pixeln gesetzt. Statt jeden Wert umzurechnen, bleibt das Raster stehen
   und wird als Ganzes auf die Spaltenbreite skaliert (siehe stories.js).
   Wer an einer Karte etwas aendert, rechnet also weiter in 1080er Pixeln.
   ========================================================================== */

/* Die Karten sind in Poppins gesetzt, und zwar mit festen Pixelwerten. Mit der
   Schrift der uebrigen Seite wird das Prozent-Schild in der Karte von Anna
   56 Pixel breiter als gezeichnet und stoesst an die Zahl daneben. Deshalb
   liegt Poppins hier lokal daneben, wie die Hausschrift auch: ein Aufruf zu
   Google waere in Deutschland ein Abmahnthema.
   Geladen wird nur, was die Karten benutzen (400, 500, 600, 700). */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}


/* Die Hoehe steht ueber aspect-ratio schon vor dem ersten Lauf von stories.js
   fest, sonst klappt die Seite beim Laden einmal zusammen. */
.tc-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
}

.tc-scale {
  width: 1080px;
  height: 1080px;
  transform-origin: top left;
  /* Bis stories.js den Faktor kennt, klein halten statt ueberlaufen lassen */
  transform: scale(0.001);
}

/* Auf dem Handy zaehlt jeder Pixel: Die Karten sind ein festes Quadrat, und
   alles darin schrumpft mit der Breite. Deshalb heben sie hier das Polster des
   Containers auf und laufen bis an den Rand. */
@media (max-width: 560px) {
  .story-grid {
    margin-inline: -20px;
  }

  .tc-wrap {
    border-radius: 0;
  }
}

/* -------------------------------------------------------- Farben der Karte */

.tc-card {
  --mf-gold: #be9c67;
  --mf-gold-soft: #f1e7d4;
  --mf-gold-deep: #8a6d3f;
  --mf-anthracite: #181818;
  --mf-white: #ffffff;
  --mf-font: "Poppins", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ------------------------------------------------------------- Animationen */

@keyframes tcPop {
  0%   { transform: scale(0.72); opacity: 0; }
  58%  { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tcPing {
  0%   { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(2.7); opacity: 0; }
}

@keyframes tcShine {
  0%   { stroke-dashoffset: 720; opacity: 0; }
  12%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -120; opacity: 0; }
}

@keyframes anClimb {
  0%   { transform: translateY(10px); opacity: 0; }
  35%  { opacity: 0.9; }
  100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes anPeakGrow {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}

.tc-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}

.tc-port {
  opacity: 0;
  transform: translateX(48px) scale(1.05);
  transition: opacity .95s cubic-bezier(.2, .7, .2, 1), transform 1.05s cubic-bezier(.2, .7, .2, 1);
}

.tc-area { opacity: 0; transition: opacity .9s ease .55s; }
.tc-line { stroke-dasharray: 780; stroke-dashoffset: 780; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1) .55s; }
.tc-shine { opacity: 0; stroke-dasharray: 60 800; }
.tc-arrow { opacity: 0; transition: opacity .5s ease 1.5s; }
.tc-pop { opacity: 0; }
.tc-ping { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tc-seam { transform: scaleY(0); transform-origin: top; transition: transform .85s cubic-bezier(.2, .7, .2, 1) .15s; }

.an-bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.2, .8, .25, 1); }
.an-arrow { opacity: 0; transition: opacity .5s ease 1.35s; }
.an-peak-glow { animation: none; transform: scaleY(0); transform-origin: bottom; }
.an-climb { opacity: 0; }

/* Alles daran haengt an dieser einen Klasse, die stories.js setzt, sobald die
   Karte im Bild ist. */
.tc-on .tc-rise { opacity: 1; transform: none; }
.tc-on .tc-port { opacity: 1; transform: none; }
.tc-on .tc-area { opacity: 1; }
.tc-on .tc-line { stroke-dashoffset: 0; }
.tc-on .tc-shine { animation: tcShine 1.15s ease 1.75s; }
.tc-on .tc-arrow { opacity: 1; }
.tc-on .tc-pop { animation: tcPop .6s cubic-bezier(.3, 1.2, .5, 1) 1s forwards; }
.tc-on .tc-ping { animation: tcPing 1.7s ease-out 2.2s 3; }
.tc-on .tc-seam { transform: scaleY(1); }

.tc-on .an-bar { transform: scaleY(1); }
.tc-on .an-arrow { opacity: 1; }
.tc-on .an-peak-glow { animation: anPeakGrow 1.1s cubic-bezier(.2, .8, .25, 1) .95s forwards; }
.tc-on .an-climb { animation: anClimb 1.7s ease-out 1.9s 3; }

/* Die Karte mit dem Balkendiagramm braucht ihren Wert etwas spaeter, sonst
   springt die Zahl vor den Balken ins Bild. */
.tc-on [data-story="anna"] .tc-pop,
.tc-card[data-story="anna"].tc-on .tc-pop {
  animation: tcPop .62s cubic-bezier(.3, 1.25, .5, 1) 1.15s forwards;
}

/* Wer Bewegung abgestellt hat, bekommt die Karten fertig aufgebaut zu sehen
   statt gar nichts. */
@media (prefers-reduced-motion: reduce) {
  .tc-rise, .tc-port, .tc-area, .tc-arrow, .tc-pop, .an-arrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tc-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .tc-seam, .an-bar { transform: scaleY(1) !important; transition: none !important; }
  .tc-shine, .tc-ping, .an-climb, .an-spark, .an-peak-glow { animation: none !important; }
}