/* Touchbud story block – follows the ChatGPT slideshow on the homepage and the
 * Play+ page: real life (a client's screen), peace of mind (RemoteDroid), made
 * with love (what Touchbud Play can show) and a call to action.
 *
 * Same tokens as .tb-gpt and the other Touchbud product sections:
 * Open Sans, accent #e2171d, dark #15161b / #0b0b0e.
 */

.tb-story {
  --rot: #e2171d;
  --dunkel: #15161b;
  --tief: #0b0b0e;
  --text: #5b5f6a;
  --grau: #9a9da6;
  --linie: #e3e5ea;
  --flaeche: #f5f6f8;

  font-family: "Open Sans", Arial, sans-serif;
  color: var(--dunkel);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.tb-story *, .tb-story *::before, .tb-story *::after { box-sizing: border-box; }

.tb-story .st-kicker {
  color: var(--rot);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tb-story h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--dunkel);
  margin: 0 0 16px;
  padding: 0;
}
.tb-story p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 14px;
  padding: 0;
}

/* ---------- 1. Real life: the client's screen ---------- */

.tb-story .st-leben {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
  margin: 88px 0 0;
}
.tb-story .st-foto { margin: 0; }
.tb-story .st-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(21, 22, 27, .18), 0 2px 8px rgba(21, 22, 27, .06);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--flaeche);
}
.tb-story .st-foto figcaption {
  font-size: 13.5px;
  color: var(--grau);
  margin-top: 14px;
  line-height: 1.5;
}
.tb-story .st-leben .st-satz {
  font-weight: 700;
  color: var(--dunkel);
  font-size: 17px;
  margin-top: 22px;
}

/* ---------- 2. Peace of mind: RemoteDroid ---------- */

.tb-story .st-ruhe {
  margin: 96px 0 0;
  background: var(--tief);
  background-image: radial-gradient(circle at 85% 0%, rgba(226, 23, 29, .16), transparent 55%);
  border-radius: 22px;
  padding: 60px 60px 56px;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 56px;
  align-items: center;
  color: #fff;
}
.tb-story .st-ruhe h2 { color: #fff; }
.tb-story .st-ruhe p { color: #c7c9d0; }
/* the paragraph colour above is more specific than .st-kicker and would turn
   the kicker grey - keep it red, as on the other dark Touchbud sections */
.tb-story .st-ruhe .st-kicker { color: var(--rot); }
/* the five countries, one line under the RemoteDroid text */
.tb-story .st-ruhe .st-orte {
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
}
.tb-story .st-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid var(--rot);
  padding-bottom: 2px;
}
.tb-story .st-link:hover { color: #fff; opacity: .85; }
.tb-story .st-link span { color: var(--rot); }

.tb-story .st-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.tb-story .st-punkte li {
  position: relative;
  padding: 18px 20px 18px 58px;
  background: #15161b;
  border: 1px solid #2a2b31;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #e7e8ec;
  margin: 0;
}
.tb-story .st-punkte li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--rot);
}
/* the white tick on top of the red circle */
.tb-story .st-punkte li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: no-repeat center / 24px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 12.5l3.2 3.2L17 9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------- 3. Made with love + call to action ---------- */

.tb-story .st-liebe {
  margin: 96px 0 0;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.tb-story .st-liebe .st-kicker { display: inline-flex; align-items: center; gap: 8px; }
.tb-story .st-herz {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--rot);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-10-9.3C.4 8.3 2.3 4 6.4 4c2.3 0 3.9 1.3 5.6 3.2C13.7 5.3 15.3 4 17.6 4 21.7 4 23.6 8.3 22 11.7 19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-10-9.3C.4 8.3 2.3 4 6.4 4c2.3 0 3.9 1.3 5.6 3.2C13.7 5.3 15.3 4 17.6 4 21.7 4 23.6 8.3 22 11.7 19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
}
.tb-story .st-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.tb-story .st-chips li {
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--linie);
  font-size: 14px;
  font-weight: 600;
  color: var(--dunkel);
}

/* "In use in five countries" with drawn flags, under the chips */
.tb-story .st-laender { margin: 34px 0 0; }
.tb-story .st-laender .st-laender-titel {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 14px;
}
.tb-story .st-laender ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}
.tb-story .st-laender li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dunkel);
}
.tb-story .st-flagge {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(21, 22, 27, .12);
}
.tb-story .st-flagge svg { display: block; width: 100%; height: 100%; }

.tb-story .st-aktion {
  margin: 56px auto 96px;
  max-width: 820px;
  text-align: center;
  background: var(--flaeche);
  border-radius: 20px;
  padding: 44px 32px 40px;
}
.tb-story .st-aktion h2 { font-size: 28px; margin-bottom: 10px; }
.tb-story .st-knopf {
  display: inline-block;
  margin-top: 12px;
  background: var(--rot);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(226, 23, 29, .28);
  transition: transform .18s ease, filter .18s ease;
}
.tb-story .st-knopf:hover { transform: translateY(-2px); filter: brightness(1.06); }
.tb-story .st-knopf:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 3px; }
.tb-story .st-klein {
  font-size: 13px;
  color: var(--grau);
  margin: 18px 0 0;
}

/* ---------- Stream Player note, foot of the homepage ---------- */

.tb-story .st-sp {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: 52px;
  align-items: center;
  background: var(--flaeche);
  border-radius: 20px;
  padding: 52px 56px;
}
.tb-story .st-sp .st-sp-ver {
  font-size: 13px;
  color: var(--grau);
  letter-spacing: .02em;
  margin: -4px 0 14px;
}
.tb-story .st-sp h2 { font-size: 28px; }
/* three quiet lines with a small red dot, as on the Stream Player page */
.tb-story .st-sp-punkte {
  list-style: none;
  margin: 4px 0 16px;
  padding: 0;
}
.tb-story .st-sp-punkte li {
  position: relative;
  margin: 0 0 7px;
  padding: 0 0 0 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--dunkel);
}
.tb-story .st-sp-punkte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rot);
}
.tb-story .st-sp .st-satz {
  font-weight: 700;
  color: var(--dunkel);
  font-size: 16.5px;
  margin: 0 0 18px;
}
.tb-story .st-sp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dunkel);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid var(--rot);
  padding-bottom: 2px;
}
.tb-story .st-sp-link:hover { color: var(--dunkel); opacity: .8; }
.tb-story .st-sp-link span { color: var(--rot); }
.tb-story .st-sp-bild { margin: 0; }
.tb-story .st-sp-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--linie);
  box-shadow: 0 22px 56px rgba(21, 22, 27, .14), 0 2px 6px rgba(21, 22, 27, .05);
  background: #fff;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .tb-story h2 { font-size: 25px; }
  .tb-story .st-leben {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
  .tb-story .st-ruhe {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 36px 22px;
    margin-top: 64px;
    border-radius: 18px;
  }
  .tb-story .st-liebe { margin-top: 64px; }
  .tb-story .st-aktion { margin: 40px auto 64px; padding: 32px 20px; }
  .tb-story .st-aktion h2 { font-size: 23px; }
  .tb-story .st-sp {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 32px 22px;
    border-radius: 18px;
  }
  .tb-story .st-sp h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-story .st-knopf { transition: none; }
}