/* ==========================================================================
   Blogartikel
   Navy Seitenspalte, Apricot Lesebereich, Taubenblau Fussbereich.
   ========================================================================== */

.artikel {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  background: var(--apricot);
}

/* --- Seitenspalte -------------------------------------------------------- */

.artikel__spalte {
  flex: 1 1 420px; min-width: 0;
  z-index: 10;
  position: sticky; top: 0;
  align-self: flex-start;
  min-height: 100svh;
  box-sizing: border-box;
  background: var(--navy); color: var(--apricot);
  padding: clamp(36px, 4.4vw, 60px) clamp(28px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(32px, 4vw, 56px);
}
.artikel__spaltenkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.artikel__logo { display: flex; align-items: center; min-height: 44px; }
.artikel__logo img { height: 38px; width: auto; filter: contrast(1.25) brightness(1.1); }

/* Der Burger sitzt hier in der Spalte statt in einer schwebenden Leiste.
   Ab 1024 Pixel steht die volle Navigation im Fuss zur Verfuegung. */
.burger--spalte { border-color: rgb(248 204 193 / .4); }
.burger--spalte span { background: var(--apricot); }
.artikel__zurueck {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px;
  color: rgb(248 204 193 / 0.85);
}
.artikel__zurueck:hover { color: var(--apricot); }

.artikel__kopf { animation: aufsteigen 900ms var(--kurve) both; }
.artikel__meta {
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-family: var(--schrift-meta);
  font-size: 13px; letter-spacing: .05em;
  color: rgb(248 204 193 / 0.85);
}
.artikel__titel {
  margin-bottom: clamp(22px, 2.8vw, 34px);
  font-size: clamp(28px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--apricot);
}
.artikel__teaser {
  max-width: 38ch;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7;
  color: rgb(248 204 193 / .85);
}

/* Lesefortschritt */
.fortschritt[hidden] { display: none; }
.fortschritt__strich { height: 1px; background: rgb(248 204 193 / .3); margin-bottom: 18px; }
.fortschritt__zeile {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--schrift-meta);
  font-size: 12px; letter-spacing: .05em;
  color: rgb(248 204 193 / 0.85);
}
.fortschritt__zeile span:first-child { flex: 1 1 auto; min-width: 0; }
.fortschritt__zeile span:last-child  { flex: 0 0 auto; }
.fortschritt__schiene { margin-top: 12px; height: 2px; background: rgb(248 204 193 / .25); }
.fortschritt__balken  { height: 100%; width: 0; background: var(--apricot); transition: width 120ms linear; }

/* --- Lesebereich --------------------------------------------------------- */

.artikel__text {
  flex: 1 1 560px; min-width: 0;
  box-sizing: border-box;
  background: var(--apricot); color: var(--navy);
  padding: clamp(56px, 7vw, 110px) clamp(28px, 5vw, 88px) clamp(80px, 10vw, 140px);
}

/* Lesegrid mit den fuenf Blockbreiten aus Abschnitt 7 des Briefings.
   Die mittlere Spalte ist die Lesespalte, links und rechts liegen
   Randstreifen, in die breitere Bloecke hineinlaufen duerfen. */
.lesegrid {
  display: grid;
  grid-template-columns:
    [full-anfang] minmax(0, 1fr)
    [wide-anfang] minmax(0, 40px)
    [text-anfang] minmax(0, 660px) [text-ende]
    minmax(0, 40px) [wide-ende]
    minmax(0, 1fr) [full-ende];
  column-gap: 0;
}
/* Standard: alles was direkt im Lesegrid liegt, sitzt in der Lesespalte */
.lesegrid > * { grid-column: text-anfang / text-ende; }

.block-text        { grid-column: text-anfang / text-ende !important; }
.block-wide        { grid-column: wide-anfang / wide-ende !important; }
.block-full        { grid-column: full-anfang / full-ende !important; }
.block-beside-left { grid-column: full-anfang / text-anfang !important; }
.block-beside-right{ grid-column: text-ende / full-ende !important; }

/* --- Typografie im Artikel ----------------------------------------------- */

/* Im Entwurf traegt jeder Absatz des Artikels text-wrap:pretty. */
.artikel__text p {
  font-size: clamp(17px, 1.35vw, 19px); line-height: 1.75;
  text-wrap: pretty;
}
.artikel__text p + p { margin-top: 28px; }

.artikel__text h2 {
  margin: clamp(56px, 7vw, 84px) 0 28px;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2;
}
.artikel__text h3 {
  margin: clamp(36px, 4.4vw, 48px) 0 20px;
  font-size: clamp(21px, 2.2vw, 24px); line-height: 1.3;
}
.artikel__text h2 + p, .artikel__text h3 + p { margin-top: 0; }

.artikel__text strong { font-weight: 700; }
.artikel__text em { font-style: italic; }

.artikel__text a:not(.knopf) {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.artikel__text a:not(.knopf):hover { text-decoration-thickness: 2.5px; }

.artikel__text ul, .artikel__text ol {
  margin: 28px 0; padding-left: 32px;
  display: grid; gap: 16px;
}
.artikel__text li { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; }

.artikel__text blockquote {
  margin: clamp(40px, 5vw, 56px) 0;
  padding: 2px 0 2px 28px;
  border-left: 2px solid var(--taubenblau);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6;
}

/* Blogbilder bleiben farbig. Das ist so entschieden, nicht vergessen:
   die Graustufen aus Abschnitt 4 gelten fuer die Portraits und
   freigestellten Fotos der Hauptseiten, nicht fuer den Blog. */
.artikel__bild { margin: clamp(44px, 5.5vw, 68px) 0; }
.artikel__bild img { width: 100%; height: auto; }
.artikel__bild figcaption {
  margin-top: 12px;
  font-size: 13px; line-height: 1.5;
  color: rgb(44 66 103 / 0.88);
}

.artikel__ende { margin-top: clamp(48px, 6vw, 80px); }

/* --- Autorin und Weiterlesen --------------------------------------------- */

.artikel__fuss { padding-block: clamp(64px, 8vw, 110px) clamp(72px, 9vw, 120px); }

.autorin { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 44px); align-items: flex-start; }
.autorin__bild { flex: 0 0 160px; width: 160px; }
.autorin__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.autorin__text { flex: 1 1 380px; min-width: 0; }
.autorin__name {
  margin-bottom: 14px;
  font-family: var(--schrift-headline);
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1;
}
.autorin__satz {
  margin-bottom: 18px; max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7;
  color: rgb(246 241 243 / .9);
}
.autorin__mehr {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px;
  text-decoration: underline; text-underline-offset: 5px;
}

.artikel__strich {
  height: 1px; background: rgb(246 241 243 / .28);
  margin: clamp(48px, 6vw, 80px) 0 clamp(28px, 3.4vw, 44px);
}

.weiterlesen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
/* Die ganze Karte ist ein Link, also muss er ein Block sein.
   Als inline-Element faellt er sonst auf Textzeilenhoehe zusammen. */
.vorschau a { display: block; }
.vorschau__bild { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.vorschau__bild img { width: 100%; height: 100%; object-fit: cover; }
.vorschau__meta {
  margin: 16px 0 10px;
  font-family: var(--schrift-meta);
  font-size: 13px; letter-spacing: .05em;
  color: rgb(246 241 243 / 0.9);
}
.vorschau__titel {
  font-family: var(--schrift-headline);
  font-size: 20px; line-height: 1.25;
}
.vorschau a:hover .vorschau__titel { color: var(--apricot); }

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

@media (max-width: 1023px) {
  .artikel__spalte {
    flex: 1 1 100%;
    position: static;
    min-height: 0;
    padding-top: clamp(116px, 16vw, 150px);
  }
  /* Der Entwurf zeigt den Lesefortschritt auch hier, obwohl die Spalte
     nicht klebt und die Zeile mit dem Artikelanfang wegscrollt. */

  .lesegrid {
    grid-template-columns:
      [full-anfang wide-anfang text-anfang] minmax(0, 1fr) [text-ende wide-ende full-ende];
  }
  /* Nebenstehende Bloecke laufen hier normal im Text mit */
  .block-beside-left, .block-beside-right {
    grid-column: text-anfang / text-ende !important;
  }
}

@media (max-width: 767px) {
  .artikel__ende .knopf { display: block; width: 100%; }
  .autorin__bild { flex: 0 0 120px; width: 120px; }
}