:root {
  --frank-paper: #f6f5f1;
  --frank-surface: #fcfbf8;
  --frank-ink: #171817;
  --frank-muted: #646560;
  --frank-line: #d9d7cf;
  --frank-accent: #ad765a;
}

body {
  background: var(--frank-paper);
  color: var(--frank-ink);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a {
  color: inherit;
}

body.article-page {
  --frank-reading-width: 1120px;
  --paper: var(--frank-paper);
  --surface: var(--frank-surface);
  --ink: var(--frank-ink);
  --muted: var(--frank-muted);
  --line: var(--frank-line);
  --copper: var(--frank-accent);
  --acid: var(--frank-accent);
  --p: var(--frank-paper);
  --i: var(--frank-ink);
  --m: var(--frank-muted);
  --l: var(--frank-line);
  --r: var(--frank-accent);
  --lime: #e6d2be;
  --coral: var(--frank-accent);
}

body.article-page .article-opening {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
}

body.article-page .article-opening > section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-bottom: clamp(28px, 3vw, 44px);
}

body.article-page .article-opening .intro-grid,
body.article-page .article-opening .hero-grid {
  display: block;
}

body.article-page .article-opening h1 {
  width: 100%;
  max-width: none;
  text-wrap: balance;
  line-height: 1.12;
}

body.article-page .article-opening h1 mark {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-block: 0;
}

body.article-page .article-opening__story {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  margin-bottom: 72px;
  padding: 22px 0 25px;
  border-top: 1px solid var(--frank-line);
  border-bottom: 1px solid var(--frank-line);
}

body.article-page .article-opening__copy {
  align-self: center;
  padding-left: 20px;
  border-left: 2px solid var(--frank-accent);
}

body.article-page .article-opening__copy p {
  max-width: 390px;
  margin: 0;
  color: #4c4c47;
  font: 400 clamp(17px, 1.5vw, 21px)/1.58 Georgia, serif;
}

body.article-page .article-visual {
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.article-page .article-visual img {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 340px);
  object-fit: contain;
}

body.article-page .article-visual figcaption {
  max-width: 600px;
  margin: 4px auto 0;
  color: var(--frank-muted);
  font: 12px/1.45 "Segoe UI", Arial, sans-serif;
  text-align: center;
}

body.article-page .article-body.page-wrap {
  display: block;
}

body.article-page .reading-rail {
  display: none;
}

body.article-page .content.shell {
  display: block;
}

body.article-page .content.shell .aside {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 36px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--frank-line);
}

body.article-page .content.shell .aside p {
  margin: 0;
}

body.article-page .content.wrap,
body.article-page .prose.wrap {
  width: min(var(--frank-reading-width), calc(100% - 64px));
  max-width: none;
}

body.article-page .content.wrap {
  padding-inline: 0;
}

body.article-page .article-author--f03.wrap {
  width: min(var(--frank-reading-width), calc(100% - 64px));
  max-width: none;
}

body.article-page .decision .tree h2 {
  min-height: 2.2em;
}

body.article-page .dek,
body.article-page .intro,
body.article-page .summary {
  color: #535450;
}

body.article-page .kicker,
body.article-page .rule span,
body.article-page .check li::before {
  color: #855b45;
}

body.article-page h1 em {
  color: #877d72;
}

body.article-page .content .lead {
  color: #343632;
}

body.article-page .note,
body.article-page .copy {
  background: #eeeae3;
}

body.article-page .copy > p,
body.article-page .reply-grid p {
  color: #855b45;
}

body.article-page .signal,
body.article-page .decision {
  background: #252622;
  color: var(--frank-surface);
}

body.article-page .signal p,
body.article-page .signal-line b,
body.article-page .decision-top span,
body.article-page .step,
body.article-page .branches b {
  color: #e3b89b;
}

body.article-page .decision-top p,
body.article-page .branches p {
  color: #e0ded7;
}

body.article-page .author-card {
  background: transparent;
}

.article-author {
  padding-bottom: 88px;
}

.article-author__card {
  display: grid;
  gap: 10px;
  padding: 29px 32px 31px;
  border: 1px solid var(--frank-line);
  border-top: 3px solid var(--frank-accent);
  background: var(--frank-surface);
  color: var(--frank-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.article-author__card:hover {
  border-color: var(--frank-accent);
  transform: translateY(-2px);
}

.article-author__card:focus-visible,
.authors .author-list > a:focus-visible,
.chapter h3 a:focus-visible,
.chapter-mark:focus-visible {
  outline: 2px solid var(--frank-accent);
  outline-offset: 4px;
}

.article-author__label {
  color: #855b45;
  font: 700 10px/1.4 "Segoe UI", Arial, sans-serif;
  letter-spacing: .14em;
}

.article-author__name {
  font: 600 clamp(27px, 3.2vw, 36px)/1.1 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.045em;
}

.article-author__action {
  color: var(--frank-muted);
  font: 14px/1.5 "Segoe UI", Arial, sans-serif;
}

.article-author__related {
  color: var(--frank-muted);
  font: 13px/1.5 "Segoe UI", Arial, sans-serif;
  text-decoration: none;
}

.article-author__related:hover {
  color: #855b45;
}

.article-author--f11,
.article-author--f01 {
  display: block;
}

.article-author--f11 > .article-author__related,
.article-author--f01 > .article-author__related {
  display: block;
  margin-top: 12px;
}

.article-author--f02 > * {
  width: 100%;
}

.article-author--f03 > * {
  width: 100%;
}

.article-author--f02 > .article-author__related {
  display: block;
  margin-top: 12px;
}

.authors .author-list > a {
  display: grid;
  grid-template-columns: 120px 1fr 260px;
  align-items: baseline;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid #c7c7c0;
  color: inherit;
  text-decoration: none;
}

.authors .author-list > a:hover h3,
.chapter h3 a:hover {
  color: #855b45;
}

.chapter h3 a {
  color: inherit;
  text-decoration: none;
}

.author-page .person-card,
.author-page .person-card:visited,
.author-page .article-entry,
.author-page .article-entry:visited {
  color: var(--frank-ink);
}

.author-page .person-card:hover h2 {
  color: #855b45;
}

.author-page .person-mark,
.author-page .person-mark.anna,
.author-page .person-mark.alexander {
  border-color: var(--frank-accent);
  color: #855b45;
}

@media (max-width: 780px) {
  body.article-page .article-body.page-wrap {
    grid-template-columns: 1fr;
  }

  .article-author--f01 {
    grid-template-columns: 1fr;
  }

  .article-author--f01 > * {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  body.article-page .content.shell {
    grid-template-columns: 1fr;
  }

  .article-author--f11 {
    grid-template-columns: 1fr;
  }

  .article-author--f11 > * {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  body.article-page .article-opening {
    width: calc(100% - 40px);
  }

  body.article-page .article-opening__story {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 45px;
    padding: 20px 0;
  }

  body.article-page .article-visual img {
    height: clamp(210px, 58vw, 300px);
  }

  body.article-page .article-visual {
    width: 100%;
  }

  body.article-page .content.wrap,
  body.article-page .prose.wrap,
  body.article-page .article-author--f03.wrap {
    width: min(var(--frank-reading-width), calc(100% - 40px));
  }

  body.article-page .decision .tree h2 {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .authors .author-list > a {
    grid-template-columns: 35px 1fr;
    padding: 22px 0;
  }

  .authors .author-list > a p {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .article-author {
    padding-bottom: 64px;
  }

  .article-author__card {
    padding: 23px 22px 25px;
  }
}

/* Long German words in headings must wrap on phones instead of widening the page (e.g. "Kundengewinnung" at 320-390 px). */
h1, h2, h3, h1 mark { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* "Mehr aus der Rubrik" at the end of every article */
.rubric-more { box-sizing: border-box; max-width: 1180px; margin: 56px auto 40px; padding: 28px clamp(20px, 4vw, 40px) 0; border-top: 1px solid rgba(23, 24, 22, .16); }
.rubric-more__label { margin: 0 0 14px; font: 700 11px/1.3 Consolas, "Courier New", monospace; letter-spacing: .13em; text-transform: uppercase; color: #646560; }
.rubric-more__label a { color: #855b45; text-decoration: none; }
.rubric-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px 32px; }
.rubric-more li a { display: block; padding: 10px 0; border-bottom: 1px solid rgba(23, 24, 22, .1); color: inherit; text-decoration: none; font-weight: 600; line-height: 1.35; }
.rubric-more li a:hover, .rubric-more li a:focus-visible { color: #855b45; }

/* Author card with a mini portrait on the left (both card templates); selectors beat the per-article grids */
.article-author__card.has-photo, .feature-author a.has-photo { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 4px; align-items: center; }
.article-author__card.has-photo > .author-mini, .feature-author a.has-photo > .author-mini { grid-column: 1; grid-row: 1 / span 4; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: 0 0 0 1px rgba(23, 24, 22, .12); }
.article-author__card.has-photo > :not(.author-mini), .feature-author a.has-photo > :not(.author-mini) { grid-column: 2; grid-row: auto; }

/* publication date under the author name */
.article-author__card.has-photo > .author-date, .feature-author a.has-photo > .author-date { display: block; font: 600 13px/1.4 "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #646560; }