/* ============================================================
   Character Teasers — Startseite
   Yindi (Chat), Bruno (Vorträge), Penny (Nachhilfe), Jens (Blog)
   als 2-Spalten-Raster — Desktop 2 Spalten, Mobil gestapelt
   ============================================================ */

.character-teasers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  width: min(var(--container, 1180px), calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

/* Ein Teaser innerhalb des Wrappers verliert seine Full-Bleed-Padding/
   -Hintergründe, damit beide nebeneinander als Karten wirken. */
.character-teasers > .yindi-chat-teaser,
.character-teasers > .bruno-talks-teaser,
.character-teasers > .penny-tutoring-teaser,
.character-teasers > .jens-blog-teaser {
  padding: 0;
  background: transparent;
}

.character-teasers > .yindi-chat-teaser::before,
.character-teasers > .bruno-talks-teaser::before,
.character-teasers > .penny-tutoring-teaser::before,
.character-teasers > .jens-blog-teaser::before {
  display: none;
}

/* Inneres Grid auf 1 Spalte (Avatar oben, Copy unten),
   weil zwei breite Teaser-Cards horizontal wenig Platz haben. */
.character-teasers .yindi-chat-teaser__inner,
.character-teasers .bruno-talks-teaser__inner,
.character-teasers .penny-tutoring-teaser__inner,
.character-teasers .jens-blog-teaser__inner {
  width: 100%;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

/* Avatar-Nische etwas niedriger machen */
.character-teasers .yindi-chat-teaser__avatar,
.character-teasers .bruno-talks-teaser__avatar,
.character-teasers .penny-tutoring-teaser__avatar,
.character-teasers .jens-blog-teaser__avatar {
  min-height: 240px;
}

/* Titel kompakter, damit zwei nebeneinander nicht ueberladen wirken */
.character-teasers .yindi-chat-teaser h2,
.character-teasers .bruno-talks-teaser h2,
.character-teasers .penny-tutoring-teaser h2,
.character-teasers .jens-blog-teaser h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.08;
}

.character-teasers .yindi-chat-teaser p,
.character-teasers .bruno-talks-teaser p,
.character-teasers .penny-tutoring-teaser p,
.character-teasers .jens-blog-teaser p {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
}

/* Auf schmaleren Screens untereinander stacken */
@media (max-width: 860px) {
  .character-teasers {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 4vw, 1.5rem);
  }

  .character-teasers .yindi-chat-teaser__avatar,
  .character-teasers .bruno-talks-teaser__avatar,
  .character-teasers .penny-tutoring-teaser__avatar,
  .character-teasers .jens-blog-teaser__avatar {
    min-height: 260px;
  }
}

/* ============================================================
   Bruno-Vortrags-Teaser
   Parallele Struktur zu .yindi-chat-teaser, aber Meeres-Farbpalette
   ============================================================ */

.bruno-talks-teaser {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(48, 120, 165, .14), transparent 60%),
    linear-gradient(180deg, #d7ecf6, #e6f3fa);
}

.bruno-talks-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(rgba(13, 70, 100, .14) 1px, transparent 1.6px);
  background-size: 32px 32px;
}

.bruno-talks-teaser__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container, 1180px), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .58)),
    linear-gradient(180deg, #cfe6f2, #b9d8e8);
  border: 1px solid rgba(13, 58, 84, .12);
  box-shadow:
    0 22px 46px rgba(13, 58, 84, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .46);
}

.bruno-talks-teaser__avatar {
  position: relative;
  min-height: 320px;
  border-radius: 1.6rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    url("../assets/collage/sea-bruno-teaser.png");
  background-size: cover;
  background-position: center center;
  border: 1px solid rgba(27, 64, 91, .35);
  box-shadow:
    0 24px 44px rgba(13, 58, 84, .18),
    inset 0 0 0 10px #2c5b7a,
    inset 0 0 0 14px #5d96b6,
    inset 0 0 0 24px #e1eff6,
    inset 0 0 0 25px rgba(33, 72, 95, .16);
}

.bruno-talks-teaser__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 91%, rgba(7, 40, 60, .26) 0 14%, transparent 34%),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .30), transparent 30%),
    linear-gradient(180deg, rgba(7, 31, 43, .08), rgba(7, 31, 43, .02) 42%, rgba(7, 31, 43, .16));
  pointer-events: none;
}

.bruno-talks-teaser__avatar::before {
  content: "🌊   🌊   🌊";
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 2.4rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #0e3a55;
  font-size: 1.15rem;
  letter-spacing: .15em;
  box-shadow: 0 6px 16px rgba(13, 58, 84, .25);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.has-bruno-3d .bruno-talks-teaser__avatar::before {
  opacity: 0;
  transform: translateX(-50%) translateY(8px) rotate(-2deg);
}

.bruno-talks-teaser__avatar canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.bruno-teaser-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.has-bruno-3d .bruno-teaser-fallback {
  display: none;
}

.bruno-talks-teaser__copy {
  position: relative;
}

.bruno-talks-teaser__kicker {
  display: inline-flex;
  width: fit-content;
  padding: .25rem .85rem;
  margin: 0 0 .8rem 0;
  border-radius: 999px;
  background: rgba(13, 58, 84, .12);
  color: #0e3a55;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.bruno-talks-teaser h2 {
  margin: 0;
  font-family: var(--font-adventure, Georgia, serif);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #0e3a55;
}

.bruno-talks-teaser p {
  max-width: 680px;
  color: var(--color-ink-soft, #234);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.bruno-talks-teaser__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a6593, #0e3a55);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 12px 24px rgba(13, 58, 84, .3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  margin-top: .9rem;
}

.bruno-talks-teaser__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(13, 58, 84, .4);
  filter: saturate(1.05);
}

.bruno-talks-teaser__button::before {
  content: "🐋";
  margin-right: .45rem;
}

@media (max-width: 680px) {
  .bruno-talks-teaser__inner {
    grid-template-columns: 1fr;
    border-radius: 1.35rem;
  }

  .bruno-talks-teaser__avatar {
    min-height: 260px;
  }
}

/* ============================================================
   Penny-Nachhilfe-Teaser
   Warm-papierige Schreibtisch-Optik mit der Schatzkarte
   ============================================================ */

.penny-tutoring-teaser {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 130, 60, .14), transparent 60%),
    linear-gradient(180deg, #f7ebd0, #fff6dc);
}

.penny-tutoring-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(rgba(120, 80, 30, .14) 1px, transparent 1.6px);
  background-size: 32px 32px;
}

.penny-tutoring-teaser__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container, 1180px), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .58)),
    linear-gradient(180deg, #f4e2bf, #f0d8a8);
  border: 1px solid rgba(120, 80, 30, .14);
  box-shadow:
    0 22px 46px rgba(120, 80, 30, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .46);
}

.penny-tutoring-teaser__avatar {
  position: relative;
  min-height: 320px;
  border-radius: 1.6rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    url("../assets/collage/world-map-table.png");
  background-size: cover;
  background-position: center center;
  border: 1px solid rgba(120, 80, 30, .35);
  box-shadow:
    0 24px 44px rgba(120, 80, 30, .18),
    inset 0 0 0 10px #7e5a2c,
    inset 0 0 0 14px #b88a4d,
    inset 0 0 0 24px #fbeec9,
    inset 0 0 0 25px rgba(120, 80, 30, .16);
}

.penny-tutoring-teaser__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 91%, rgba(60, 40, 12, .24) 0 14%, transparent 34%),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .26), transparent 30%),
    linear-gradient(180deg, rgba(43, 28, 8, .06), rgba(43, 28, 8, .02) 42%, rgba(43, 28, 8, .14));
  pointer-events: none;
}

.penny-tutoring-teaser__avatar::before {
  content: "✏️   ✏️   ✏️";
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 2.4rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #6a3f12;
  font-size: 1.15rem;
  letter-spacing: .15em;
  box-shadow: 0 6px 16px rgba(120, 80, 30, .25);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.has-penny-3d .penny-tutoring-teaser__avatar::before {
  opacity: 0;
  transform: translateX(-50%) translateY(8px) rotate(-2deg);
}

.penny-tutoring-teaser__avatar canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.penny-teaser-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.has-penny-3d .penny-teaser-fallback {
  display: none;
}

.penny-tutoring-teaser__copy {
  position: relative;
}

.penny-tutoring-teaser__kicker {
  display: inline-flex;
  width: fit-content;
  padding: .25rem .85rem;
  margin: 0 0 .8rem 0;
  border-radius: 999px;
  background: rgba(120, 80, 30, .12);
  color: #6a3f12;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.penny-tutoring-teaser h2 {
  margin: 0;
  font-family: var(--font-adventure, Georgia, serif);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #4a2c0e;
}

.penny-tutoring-teaser p {
  max-width: 680px;
  color: var(--color-ink-soft, #3a2916);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.penny-tutoring-teaser__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #c08641, #7e5a2c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 12px 24px rgba(120, 80, 30, .3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  margin-top: .9rem;
}

.penny-tutoring-teaser__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(120, 80, 30, .4);
  filter: saturate(1.05);
}

.penny-tutoring-teaser__button::before {
  content: "🦐";
  margin-right: .45rem;
}

@media (max-width: 680px) {
  .penny-tutoring-teaser__inner {
    grid-template-columns: 1fr;
    border-radius: 1.35rem;
  }

  .penny-tutoring-teaser__avatar {
    min-height: 260px;
  }
}

/* ============================================================
   Jens-Blog-Teaser
   Holzdeck-/Notizbuch-Atmosphäre
   ============================================================ */

.jens-blog-teaser {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 80, 40, .14), transparent 60%),
    linear-gradient(180deg, #efe1c8, #f8ecd2);
}

.jens-blog-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(rgba(90, 55, 20, .14) 1px, transparent 1.6px);
  background-size: 32px 32px;
}

.jens-blog-teaser__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container, 1180px), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .58)),
    linear-gradient(180deg, #e7d3a8, #dcc28e);
  border: 1px solid rgba(90, 55, 20, .14);
  box-shadow:
    0 22px 46px rgba(90, 55, 20, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .46);
}

.jens-blog-teaser__avatar {
  position: relative;
  min-height: 320px;
  border-radius: 1.6rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    url("../assets/collage/deck-segelboot.png");
  background-size: cover;
  background-position: center center;
  border: 1px solid rgba(90, 55, 20, .35);
  box-shadow:
    0 24px 44px rgba(90, 55, 20, .18),
    inset 0 0 0 10px #6f4a22,
    inset 0 0 0 14px #a07744,
    inset 0 0 0 24px #f5e5c3,
    inset 0 0 0 25px rgba(90, 55, 20, .16);
}

.jens-blog-teaser__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 91%, rgba(45, 28, 10, .26) 0 14%, transparent 34%),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .28), transparent 30%),
    linear-gradient(180deg, rgba(35, 22, 8, .08), rgba(35, 22, 8, .02) 42%, rgba(35, 22, 8, .16));
  pointer-events: none;
}

.jens-blog-teaser__avatar::before {
  content: "📓   📓   📓";
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 2.4rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #5a3712;
  font-size: 1.15rem;
  letter-spacing: .15em;
  box-shadow: 0 6px 16px rgba(90, 55, 20, .25);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.has-jens-3d .jens-blog-teaser__avatar::before {
  opacity: 0;
  transform: translateX(-50%) translateY(8px) rotate(-2deg);
}

.jens-blog-teaser__avatar canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.jens-teaser-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.has-jens-3d .jens-teaser-fallback {
  display: none;
}

.jens-blog-teaser__copy {
  position: relative;
}

.jens-blog-teaser__kicker {
  display: inline-flex;
  width: fit-content;
  padding: .25rem .85rem;
  margin: 0 0 .8rem 0;
  border-radius: 999px;
  background: rgba(90, 55, 20, .12);
  color: #5a3712;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.jens-blog-teaser h2 {
  margin: 0;
  font-family: var(--font-adventure, Georgia, serif);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #3e240a;
}

.jens-blog-teaser p {
  max-width: 680px;
  color: var(--color-ink-soft, #3a2916);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.jens-blog-teaser__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #a87344, #5a3712);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 12px 24px rgba(90, 55, 20, .3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  margin-top: .9rem;
}

.jens-blog-teaser__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(90, 55, 20, .4);
  filter: saturate(1.05);
}

.jens-blog-teaser__button::before {
  content: "🧭";
  margin-right: .45rem;
}

@media (max-width: 680px) {
  .jens-blog-teaser__inner {
    grid-template-columns: 1fr;
    border-radius: 1.35rem;
  }

  .jens-blog-teaser__avatar {
    min-height: 260px;
  }
}