/* ==========================================================================
   About
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.abo-hero {
  position: relative;
  z-index: 6;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  padding: var(--pad-hero) var(--pad-x) clamp(60px, 7vw, 100px);
}
.abo-hero__inhalt {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  align-self: center;
  animation: aufsteigen 1200ms var(--kurve) both;
}
.abo-hero__kennung {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: clamp(2px, .3vw, 5px);
  font-size: 11px; letter-spacing: .22em; line-height: 1.7;
  text-transform: uppercase;
  color: rgb(248 204 193 / .9);
}
.abo-hero__reihe {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
}
.abo-hero__titel {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 1.4vw, 26px);
  font-size: clamp(62px, 11vw, 180px);
  line-height: .86; letter-spacing: -.025em;
  color: var(--creme);
  /* Der Entwurf zieht Titel und Text im Hero nach oben, das Foto
     bleibt stehen. Unterhalb von 1024px hebt er beides wieder auf. */
  transform: translateY(clamp(-70px, -5vw, -30px));
}
.abo-hero__titel-akzent { color: var(--apricot); }

.abo-hero__bild {
  position: relative;
  width: clamp(180px, 21vw, 330px);
  aspect-ratio: 3 / 4;
  margin-left: auto;
  margin-right: clamp(0px, 2vw, 40px);
}
.abo-hero__bild img {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 133%; height: 133%;
  object-fit: contain;
}

.abo-hero__unten {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(6px, .7vw, 10px);
  transform: translateY(clamp(-140px, -10vw, -60px));
  margin-top: clamp(-16px, -1.6vw, 0px);
}
.abo-hero__satz {
  max-width: 34ch;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 23px); line-height: 2.05;
}
.abo-hero__lead {
  max-width: 46ch;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.9;
  color: rgb(246 241 243 / .9);
}

/* --- Mein Weg ------------------------------------------------------------ */

.abo-weg { padding-block: clamp(110px, 13vw, 170px) clamp(90px, 10vw, 140px); }

.abo-weg__kopf {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(32px, 4.6vw, 64px);
  /* Unten buendig: die Textspalte reicht bis zur Linie, das Foto
     stellt sich mit seiner Unterkante darauf. */
  align-items: end;
}
.abo-weg__bild { position: relative; width: 92%; margin-left: auto; }
.abo-weg__bild img { width: 100%; height: auto; object-fit: contain; }

/* Apricot auf Taubenblau erreicht nur 4.1 und faellt fuer kleinen Text
   durch. Deshalb hier Creme statt Apricot. */
.abo-weg__label { color: rgb(246 241 243 / .92); }

.abo-weg__ruf {
  margin: 0 0 clamp(24px, 3vw, 34px);
  font-family: var(--schrift-headline);
  /* Nicht unter 24px: darunter braeuchte Apricot auf Taubenblau 4.5,
     erreicht aber hoechstens 4.05. Ab 24px gilt 3.0. */
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2;
  color: var(--apricot);
}
.abo-weg__vorstellung {
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 23px); line-height: 1.95;
}

.abo-weg__aussage {
  max-width: 44ch;
  /* Steht jetzt in der rechten Spalte, die Einrueckung macht das
     Raster. Unten etwas Luft, damit der Satz nicht auf der Linie
     klebt. Das Foto folgt der Linie, weil es unten buendig sitzt. */
  margin: clamp(26px, 3.2vw, 40px) 0 clamp(20px, 2.4vw, 32px);
  font-family: var(--schrift-headline);
  font-size: clamp(24px, 2.3vw, 32px); line-height: 1.4;
  color: var(--apricot);
}

.abo-weg__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 46px);
  border-top: 1px solid rgb(246 241 243 / .3);
  padding-top: clamp(26px, 3vw, 38px);
  align-items: stretch;
}
.abo-weg__spalten p {
  /* margin-top ausdruecklich auf 0: die Grundregel p + p in stil.css
     setzt 1.4em. Die drei Absaetze sind Geschwister, stehen aber in
     drei Spalten nebeneinander -- der Abstand liess die zweite und
     dritte Spalte 23 Pixel tiefer beginnen als die erste. */
  margin-top: 0;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75;
  color: rgb(246 241 243 / .9);
}

/* --- Der Wendepunkt ------------------------------------------------------ */

.abo-wende {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  background: var(--apricot);
  color: var(--navy);
}
.abo-wende__links { background: var(--navy); color: var(--creme); }
.abo-wende__klebt {
  position: sticky; top: 0;
  height: 100svh;
  padding: clamp(28px, 2.8vw, 40px) clamp(28px, 3.4vw, 56px) 0 var(--pad-x);
  display: flex; flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
.abo-wende__klebt .eyebrow { color: rgb(248 204 193 / .85); }
.abo-wende__titel {
  max-width: 20ch;
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.45; letter-spacing: -.01em;
}
.abo-wende__titel .marker { padding: .1em .3em; }
.abo-wende__bild {
  flex: 1; min-height: 0;
  display: flex; align-items: flex-end;
}
.abo-wende__bild img { width: 88%; height: 100%; object-fit: contain; }

.abo-wende__rechts {
  padding: clamp(60px, 7vw, 96px) var(--pad-x) clamp(80px, 9vw, 130px) clamp(32px, 4vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
}
.abo-wende__ruf,
.abo-wende__absatz {
  max-width: 54ch;
  font-size: clamp(16px, 1.25vw, 19px);
  color: rgb(44 66 103 / .92);
}
.abo-wende__ruf { max-width: 52ch; line-height: 1.45; }
.abo-wende__absatz { line-height: 1.95; }
.abo-wende__gross {
  font-family: var(--schrift-headline);
  font-size: 1.35em;
}
/* Der Entwurf setzt „Es reicht." auf 1.35em, die beiden anderen
   Stellen auf 1.3em. */
.abo-wende__gross--klein { font-size: 1.3em; }
.abo-wende__gross--sperr { font-size: 1.3em; letter-spacing: .02em; }
.abo-wende__merksatz {
  margin: clamp(6px, 1vw, 14px) 0 clamp(10px, 1.6vw, 22px);
  max-width: 28ch;
  font-family: var(--schrift-headline);
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.28; letter-spacing: -.01em;
  text-wrap: balance;
}
.abo-wende__schluss {
  border-top: 1px solid rgb(44 66 103 / .3);
  padding-top: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}
.abo-wende__schluss p {
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.9;
  color: rgb(44 66 103 / .9);
}
.abo-wende__schluss p + p { margin-top: 0; }
.abo-wende__heilung {
  margin-top: clamp(4px, .8vw, 10px) !important;
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.25 !important;
  color: var(--navy) !important;
}

/* --- Some Facts ---------------------------------------------------------- */

.abo-fakten {
  position: relative; z-index: 4;
  padding-block: clamp(96px, 11vw, 150px) clamp(60px, 7vw, 110px);
}
.abo-fakten__inhalt { position: relative; max-width: var(--breite-seite); margin-inline: auto; }
.abo-fakten .eyebrow { color: rgb(246 241 243 / .92); }

.abo-fakten__titel {
  margin: 0 0 clamp(40px, 5vw, 72px);
  font-size: clamp(46px, 8vw, 140px); line-height: .95; letter-spacing: .01em;
  color: var(--apricot);
}

.abo-fakten__bild {
  position: absolute; right: 0; z-index: 3;
  bottom: clamp(-190px, -13vw, -100px);
  width: clamp(240px, 29vw, 430px);
  aspect-ratio: 3 / 4;
}
/* Das Foto ist 5:7, der Kasten 3:4. "contain" liesse damit oben und
   unten einen Streifen frei -- unten waere das eine Luecke zur Kante.
   object-position schiebt den Rest nach oben. */
.abo-fakten__bild img { width: 94%; height: 101%; object-fit: contain; object-position: bottom; }

.abo-fakten__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: start;
}
.abo-fakten__spalte {
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.2vw, 32px);
}
.abo-fakten__spalte:nth-child(1) { padding-top: clamp(70px, 9vw, 150px); }
.abo-fakten__spalte:nth-child(2) { padding-top: clamp(35px, 4.5vw, 75px); }
.abo-fakten__spalte:nth-child(3) { padding-bottom: clamp(200px, 25vw, 400px); }

.abo-fakt {
  padding: clamp(24px, 2.6vw, 36px);
  text-align: justify;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.85;
}
.abo-fakt--navy    { background: var(--navy); border: 1px solid rgb(248 204 193 / .4); color: var(--apricot); }
.abo-fakt--offen   { background: transparent; border: 1px solid var(--apricot); color: rgb(246 241 243 / .94); }
.abo-fakt--apricot { background: var(--apricot); border: 1px solid rgb(44 66 103 / .4); color: var(--navy); }

/* --- Currently ----------------------------------------------------------- */

.abo-jetzt {
  position: relative; z-index: 2;
  padding-block: clamp(96px, 11vw, 150px);
  overflow: hidden;
}
.abo-jetzt__bild {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: clamp(270px, 34vw, 500px);
  aspect-ratio: 3 / 4;
}
.abo-jetzt__bild img { width: 100%; height: 109%; object-fit: contain; object-position: bottom; }
.abo-jetzt__inhalt { position: relative; max-width: var(--breite-seite); margin-inline: auto; }
.abo-jetzt__text {
  margin-left: clamp(240px, 38vw, 520px);
  max-width: 620px;
}
.abo-jetzt .eyebrow { color: rgb(44 66 103 / 0.88); }
.abo-jetzt__titel {
  margin: 0 0 clamp(30px, 3.6vw, 52px);
  font-size: clamp(44px, 7vw, 120px); line-height: .95; letter-spacing: -.015em;
}
.abo-jetzt__liste { margin: 0; display: flex; flex-direction: column; }
.abo-jetzt__liste > div {
  display: grid;
  grid-template-columns: clamp(96px, 10vw, 150px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 30px);
  align-items: baseline;
  padding: clamp(12px, 1.5vw, 18px) 0;
  border-bottom: 1px solid rgb(44 66 103 / .6);
}
.abo-jetzt__liste > div:last-child { border-bottom: 0; }
.abo-jetzt__liste dt { font-size: clamp(14px, 1.05vw, 16px); letter-spacing: .02em; }
.abo-jetzt__liste dd {
  margin: 0;
  /* Opencare hat keine Umlaute. Wer hier etwas aendert, muss sie meiden. */
  font-family: var(--schrift-hand);
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.3;
}

/* --- Abschluss ----------------------------------------------------------- */

.abo-schluss { padding-block: clamp(96px, 10.4vw, 160px); }
.abo-schluss__inhalt { max-width: 700px; margin-inline: auto; text-align: center; }
.abo-schluss__titel {
  margin: 0 0 clamp(34px, 4vw, 56px);
  font-size: clamp(32px, 3.9vw, 56px); line-height: 1.2; letter-spacing: .005em;
  color: var(--weiss);
}
.abo-schluss__knopf {
  background: var(--navy); color: var(--weiss);
  border: 2px solid var(--navy);
  box-shadow: 6px 6px 0 rgb(16 25 42 / .35);
  font-size: 12px;
}
.abo-schluss__knopf:hover {
  transform: translate(5px, 5px);
  box-shadow: 2px 2px 0 rgb(16 25 42 / .6);
}

/* ==========================================================================
   Schmalere Schirme
   ========================================================================== */

@media (max-width: 1023px) {
  .abo-hero { min-height: 0; }
  .abo-hero__titel { font-size: 64px; transform: none; }
  .abo-hero__unten { transform: none; }
  .abo-hero__bild { width: clamp(160px, 26vw, 260px); margin-right: 0; }
  .abo-hero__bild img { position: static; transform: none; width: 100%; height: 100%; }

  /* Untereinander gestapelt braucht es den Abstand zur Linie wieder.
     Das Foto steht rechts, "Mein Weg" links davon auf gleicher Hoehe --
     also auf der Unterkante des Fotos. Dafuer wird der Textkasten mit
     display:contents aufgeloest, sonst koennte die Auszeichnungszeile
     nicht allein neben das Foto ruecken. */
  .abo-weg__kopf {
    grid-template-columns: minmax(0, 1fr) min(68%, 290px);
    column-gap: clamp(14px, 3vw, 24px);
    row-gap: 0;
    margin-bottom: clamp(40px, 5vw, 66px);
  }
  /* Nur der Textkasten wird aufgeloest. Ohne das :not() traefe die
     Regel auch den Bildkasten -- der ist ebenfalls ein div und faellt
     mit display:contents auf null zusammen. */
  .abo-weg__kopf > div:not(.abo-weg__bild) { display: contents; }
  .abo-weg__bild { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
  .abo-weg__label { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  .abo-weg__ruf,
  .abo-weg__vorstellung,
  .abo-weg__aussage { grid-column: 1 / -1; }
  .abo-weg__ruf { margin-top: clamp(24px, 4vw, 34px); }
  .abo-weg__spalten { grid-template-columns: 1fr 1fr; }

  /* Das klebende Bild loesen, sonst blockiert es die halbe Seite */
  .abo-wende { grid-template-columns: 1fr; }
  .abo-wende__klebt { position: static; height: auto; min-height: 0; }
  .abo-wende__bild { justify-content: center; padding: 16px 0 24px; }
  .abo-wende__bild img { width: 70%; max-width: 300px; height: auto; aspect-ratio: 3 / 4; }
  .abo-wende__rechts { padding-left: var(--pad-x); }

  .abo-fakten__spalten { grid-template-columns: 1fr 1fr; }
  .abo-fakten__spalte { padding-top: 0 !important; padding-bottom: 0 !important; }
  .abo-fakten__bild {
    position: static;
    width: 85%; max-width: 320px;
    margin: 40px auto 0;
  }

  .abo-jetzt__bild {
    position: static;
    width: 85%; max-width: 340px;
    margin: 0 auto 40px;
  }
  .abo-jetzt__text { margin-left: 0; max-width: none; }
}

@media (max-width: 767px) {
  .abo-hero__titel { font-size: 44px; }
  .abo-hero__bild { width: 70%; max-width: 240px; margin-inline: auto; }
  .abo-hero__reihe { justify-content: center; }

  .abo-weg__spalten { grid-template-columns: 1fr; }
  .abo-fakten__spalten { grid-template-columns: 1fr; }

  /* Blocksatz bricht auf schmalen Spalten auseinander */
  .abo-fakt { text-align: left; }

  /* Nicht unter 17px, sonst zoomt iOS */
  .abo-weg__spalten p,
  .abo-wende__schluss p,
  .abo-fakt { font-size: 17px; }

  .abo-wende__rechts { padding-inline: var(--pad-x); }
  .abo-schluss__knopf { display: block; width: 100%; }

  /* Im Entwurf steht das Foto bei SOME FACTS auf dem Handy klein
     rechts neben Auszeichnungszeile und Ueberschrift, nicht gross
     darunter. Die drei Spalten laufen darunter ueber die volle
     Breite. */
  .abo-fakten__inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    column-gap: 14px;
    align-items: start;
  }
  .abo-fakten .eyebrow {
    grid-column: 1; grid-row: 1;
    white-space: nowrap; letter-spacing: .12em;
  }
  .abo-fakten__titel { grid-column: 1; grid-row: 2; }
  .abo-fakten__spalten { grid-column: 1 / -1; grid-row: 3; }
  .abo-fakten__bild {
    grid-column: 2; grid-row: 1 / span 2;
    width: 100%; max-width: 150px; margin: 0;
  }

  /* Bei Currently sitzt das Foto im Entwurf linksbuendig unter dem
     Text, nicht gross und mittig darueber. Die untere Polsterung des
     Abschnitts faellt weg, damit das Foto genau auf der Kante zum
     naechsten Abschnitt aufsitzt. */
  .abo-jetzt { display: flex; flex-direction: column; padding-bottom: 0; }
  .abo-jetzt__bild {
    order: 1;
    width: 72%; max-width: 260px;
    /* Die Polsterung des Abschnitts wieder herausgerechnet: das Foto
       soll die linke Bildschirmkante beruehren, nicht die Textkante. */
    margin: 32px auto 0 calc(-1 * var(--pad-x));
  }
  /* Die 109 Prozent sind der Ueberhang fuer den Rechner. Hier waere er
     ein Ueberstand in den naechsten Abschnitt hinein. */
  .abo-jetzt__bild img { height: auto; }
}

@media (max-width: 479px) {
  .abo-hero__titel { font-size: 34px; }
}

/* Unter 360 Pixeln bleibt neben dem Foto zu wenig Platz und "Mein Weg"
   braeche auf zwei Zeilen um. Dort wird das Foto etwas schmaler. */
@media (max-width: 359px) {
  .abo-weg__kopf { grid-template-columns: minmax(0, 1fr) 60%; }
}