/* ==========================================================================
   kyrabohner.ch - gemeinsame Gestaltung fuer alle Seiten.

   Vorher stand dieses Stylesheet zweimal wortgleich in den Seiten selbst.
   Jetzt steht es einmal hier, damit eine Aenderung an Kopf, Fuss oder
   Farben nicht an zwei Stellen nachgezogen werden muss.

   Seitenspezifisches steht als Modifikator daneben, etwa
   .kb-hero--buch gegenueber .kb-hero--podcast.
   ========================================================================== */

/* ---------- Grundlage ---------- */

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: "Acumin Pro", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

:root {
  --black: #000;
  --white: #fff;
  --gold: #d9b85c;
  --gold-light: #fff2a8;
  --red: #e60039;
}

/* Wer die Bewegung reduziert haben moechte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #fff;
  color: #000;
  padding: 12px 24px;
  z-index: 200;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus {
  top: 10px;
}

/* Sichtbarer Fokus fuer die Tastaturbedienung. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Kopfzeile ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: rgba(0, 0, 0, .53);
  -webkit-backdrop-filter: blur(31px);
  backdrop-filter: blur(31px);
  display: flex;
  align-items: center;
  padding-top: 1vw;
  padding-bottom: 1vw;
  border: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 4vw;
  position: relative;
}

.site-header .logo {
  height: 50px;
  width: auto;
  max-height: 50px;
  filter: invert(1) brightness(0) invert(1);
}

.site-header nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  align-items: center;
}

.site-header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .85;
  transition: opacity .2s;
}

.site-header nav a:hover,
.site-header nav a.active {
  opacity: 1;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: #fff;
  margin: 6px 0;
  transition: .3s;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .97);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 28px;
  font-weight: 500;
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
}

/* ---------- Seitenrumpf ---------- */

#kb-book-landing {
  background: #000;
  color: #fff;
  overflow: hidden;
}

.kb-hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

/* Beide Auftakte tragen dasselbe Bild, nur die Hoehe unterscheidet sie.
   Die erste Zeile nennt das PNG, die zweite dasselbe Bild noch einmal als
   WebP. Browser, die image-set nicht kennen, ueberlesen die zweite Zeile
   und behalten das PNG. */
.kb-hero--buch,
.kb-hero--podcast {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .12) 100%),
    url("../../images/hero-desktop.png");
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .12) 100%),
    image-set(url("../../images/hero-desktop.webp") type("image/webp"),
              url("../../images/hero-desktop.png") type("image/png"));
  background-size: cover;
  background-position: center;
}

.kb-hero--buch {
  min-height: 76vh;
  padding: 96px 6vw 64px;
}

.kb-hero--podcast {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Oben so viel Luft, dass die Zeile "Deeptalk mit Kyra" nicht unter der
     fixierten Kopfzeile verschwindet. Reicht die Bildhoehe fuer den Text
     nicht, waechst der Auftakt mit, statt ihn oben abzuschneiden. */
  padding: 140px 6vw 64px;
}

.kb-hero-inner {
  max-width: 760px;
  position: relative;
  z-index: 2;
}

.kb-label {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  margin: 0 0 24px;
  position: relative;
  z-index: 3;
  display: block;
  font-weight: 700;
}

.kb-h1 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 8vw, 112px);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 700;
  margin: 0 0 28px;
}

.kb-hero .kb-h1 {
  color: var(--red);
}

.kb-sub {
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.35;
  max-width: 580px;
  opacity: .86;
  margin-bottom: 36px;
}

.kb-section {
  padding: 110px 6vw;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.kb-final-section {
  padding-top: 48px;
  padding-bottom: 44px;
}

.kb-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.kb-book-img {
  width: 100%;
  /* Ohne height:auto bliebe die Hoehe aus dem height-Attribut stehen und das
     Seitenverhaeltnis wuerde nicht greifen. */
  height: auto;
  max-width: 520px;
  display: block;
  margin: auto;
  object-fit: contain;
  aspect-ratio: 1402 / 1122;
  filter: drop-shadow(0 40px 70px rgba(217, 184, 92, .18));
}

.kb-h2 {
  font-family: "Recoleta", Georgia, serif;
  font-size: clamp(40px, 6vw, 82px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 500;
  margin: 0 0 28px;
}

.kb-copy {
  font-size: 18px;
  line-height: 1.65;
  opacity: .82;
  max-width: 620px;
  margin-bottom: 28px;
}

.kb-quote {
  padding: 34px;
  border: 1px solid rgba(217, 184, 92, .45);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(217, 184, 92, .14), rgba(255, 255, 255, .03));
  font-family: "Recoleta", Georgia, serif;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-top: 42px;
}

.kb-dark-card {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px;
  padding: 60px;
  background:
    radial-gradient(circle at 85% 10%, rgba(217, 184, 92, .18), transparent 32%),
    rgba(255, 255, 255, .035);
}

.kb-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 42px;
}

.kb-col {
  border-top: 1px solid rgba(217, 184, 92, .55);
  padding-top: 22px;
}

.kb-col h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
  margin: 0 0 14px;
}

.kb-col p {
  font-size: 16px;
  line-height: 1.55;
  opacity: .78;
  margin: 0;
}

.kb-final {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.kb-final .kb-label {
  margin-bottom: 14px;
}

.kb-final .kb-h2 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.kb-final .kb-copy {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 22px;
}

.kb-section-head {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.kb-section-head .kb-copy {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Schaltflaechen ---------- */

.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: .25s ease;
  font-size: 16px;
  cursor: pointer;
}

.kb-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.kb-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}

.kb-btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.kb-btn--wide {
  width: 100%;
}

.kb-btn-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- Kanal-Schaltflaechen YouTube und Spotify ---------- */

/* Aufbau: runde Marken-Plakette links, zweizeilige Beschriftung rechts.
   Die Plakette traegt einen goldenen Ring, damit beide Marken trotz sehr
   unterschiedlicher Eigenfarbe zur Seite passen. */
.kb-btn.platform {
  gap: 14px;
  padding: 12px 26px 12px 14px;
  text-align: left;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kb-btn.platform:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(217, 184, 92, .7);
}

.kb-btn.platform .platform-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

.kb-btn.platform:hover .platform-icon {
  transform: scale(1.06);
}

.kb-btn.platform--youtube:hover .platform-icon {
  filter: drop-shadow(0 0 12px rgba(230, 0, 57, .55));
}

.kb-btn.platform--spotify:hover .platform-icon {
  filter: drop-shadow(0 0 12px rgba(29, 185, 84, .55));
}

.kb-btn.platform .platform-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
  display: block;
  margin-bottom: 3px;
}

.kb-btn.platform .platform-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  display: block;
}

/* Der Sprite mit den Farbverlaeufen. Er zeichnet nichts, er haelt nur die
   Definitionen, auf die die Plaketten verweisen. */
.kb-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Fusszeile ---------- */

.site-footer {
  background: var(--red);
  color: #fff;
  padding: 8vh 6vw;
}

.footer-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  min-height: 30vh;
}

.footer-logo {
  height: 72px;
  width: auto;
  filter: invert(1) brightness(0) invert(1);
  opacity: 1;
}

.footer-contact {
  text-align: right;
}

.footer-contact h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin: 0 0 8px;
  font-weight: 600;
  opacity: .85;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  opacity: .95;
  transition: opacity .2s;
}

.footer-contact a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 800px) {

  .site-header {
    padding-top: 6vw;
    padding-bottom: 6vw;
  }

  .site-header .logo {
    max-height: 30px;
    height: 30px;
  }

  .site-header nav {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .kb-hero--buch,
  .kb-hero--podcast {
    min-height: 58vh;
    aspect-ratio: auto;
    padding: 104px 20px 26px;
    align-items: flex-end;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .48) 38%, rgba(0, 0, 0, .86) 100%),
      url("../../images/hero-mobile.png");
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .48) 38%, rgba(0, 0, 0, .86) 100%),
      image-set(url("../../images/hero-mobile.webp") type("image/webp"),
                url("../../images/hero-mobile.png") type("image/png"));
    background-size: cover;
    background-position: center top;
  }

  .kb-hero-inner {
    max-width: 100%;
    padding-bottom: 0;
  }

  .kb-label {
    font-size: 10px;
    letter-spacing: .13em;
    margin-bottom: 8px;
  }

  .kb-sub {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 12px;
    max-width: 100%;
  }

  .kb-btn {
    padding: 11px 18px;
    font-size: 13px;
  }

  /* Nur die Kanal-Reihe stapeln. Die uebrigen Reihen bleiben nebeneinander,
     sonst waechst der Auftakt ueber die Bildhoehe hinaus. */
  .kb-btn-row--platform {
    flex-direction: column;
    width: 100%;
  }

  .kb-btn.platform {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 18px 12px 12px;
  }

  .kb-section {
    padding: 72px 22px;
  }

  .kb-final-section {
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .kb-final .kb-label {
    margin-bottom: 10px;
  }

  .kb-final .kb-h2 {
    margin-bottom: 12px;
  }

  .kb-final .kb-copy {
    margin-bottom: 16px;
  }

  .kb-grid,
  .kb-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kb-dark-card {
    padding: 32px 24px;
    border-radius: 26px;
  }

  .kb-book-img {
    max-width: 340px;
  }

  .kb-copy {
    font-size: 16px;
  }

  .footer-inner {
    justify-content: center;
    text-align: center;
  }

  .footer-contact {
    text-align: center;
  }
}

@media (max-width: 420px) {

  .kb-hero--buch,
  .kb-hero--podcast {
    min-height: auto;
    padding: 96px 18px 20px;
    align-items: flex-end;
  }

  .kb-h1 {
    font-size: 30px;
    line-height: .95;
    margin-bottom: 8px;
    letter-spacing: -.04em;
  }

  .kb-sub {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .kb-btn {
    padding: 10px 17px;
    font-size: 12.5px;
  }

  .kb-final-section {
    padding-top: 26px;
    padding-bottom: 22px;
  }

  .kb-final .kb-h2 {
    font-size: 34px;
    margin-bottom: 10px;
  }

  .kb-final .kb-copy {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
}