/* Deutschland Aktuell - Bauhaus modernist
   8px grid. Sharp edges only. Circle / square / triangle = Politik / Wirtschaft / Finanzen. */

@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("fonts/worksans.woff2") format("woff2"); }

:root {
  --bg: #EEF1F3;
  --ink: #16191D;
  --ink-soft: #444B53;
  --blue: #1B5FA8;
  --ochre: #D9A521;
  --red: #B8412E;
  --rule: 3px solid var(--ink);
  --gutter: 16px;
  --head: "Poppins", "Futura", "Century Gothic", "Segoe UI", sans-serif;
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol { list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Shapes ---------- */
.s-politik   { --c: var(--blue); }
.s-wirtschaft{ --c: var(--ochre); }
.s-finanzen  { --c: var(--red); }

.shape { display: block; flex: none; width: var(--s, 16px); height: var(--s, 16px); background: var(--c, var(--ink)); }
.shape.circle   { border-radius: 50%; }
.shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- Masthead ---------- */
.plate { background: #0A0A0B; padding: 24px 0 40px; overflow: hidden; }
.plate-inner { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }

.poster { position: relative; height: 144px; margin-bottom: 32px; }
.poster .shape { position: absolute; bottom: 6px; }
.p-circle   { --s: 120px; --c: var(--blue);  left: 0; }
.p-square   { --s: 80px;  --c: var(--ochre); left: 88px; }
.p-triangle { --s: 104px; --c: var(--red);   right: 0; }
.p-point    { --s: 16px;  --c: #EEF1F3;      left: calc(50% + 8px); bottom: auto; top: 24px; }
.p-line     { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #EEF1F3; }

.logo { container-type: inline-size; font-family: var(--head); font-weight: 800; line-height: 1; text-align: center; }
.logo-top {
  display: block;
  font-size: 15.6cqw;
  letter-spacing: -0.045em;
  color: #FFFFFF;
  white-space: nowrap;
}
.logo-bottom {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5cqw;
  margin-top: -0.4cqw;
  font-size: 15.6cqw;
}
.logo-yellow {
  letter-spacing: 0.005em;
  background: linear-gradient(180deg, #FFD52B 10%, #EDB40F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-inline: .02em;
}
.stripes { display: flex; flex-direction: column; gap: 1.6cqw; width: 19.5cqw; margin-top: 1.4cqw; }
.stripes b { display: block; height: 2.6cqw; }
.stripes b:nth-child(1) { background: linear-gradient(90deg, #3A3A3C, #1C1C1E); }
.stripes b:nth-child(2) { background: #E8211A; }
.stripes b:nth-child(3) { background: #FFD90F; }
.stripes-l b { clip-path: polygon(6% 0, 100% 0, 92% 100%, 0 100%); }
.stripes-r b { clip-path: polygon(0 0, 94% 0, 100% 100%, 8% 100%); }

/* Entrance: shapes settle into place in under half a second */
@keyframes shape-in {
  from { opacity: 0; transform: translateY(-28px) scale(.55); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-in { from { transform: scaleX(0); } to { transform: none; } }
.poster .shape { animation: shape-in .3s var(--ease) both; }
.p-circle   { animation-delay: 0s; }
.p-square   { animation-delay: .06s; }
.p-triangle { animation-delay: .12s; }
.p-point    { animation-delay: .16s; }
.p-line     { animation: line-in .3s var(--ease) both; transform-origin: left; }

/* ---------- Section tabs ---------- */
.tabs { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: var(--rule); }
.tabs-inner { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 720px; margin: 0 auto; }
.tab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 4px;
  font: 700 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .15s;
}
.tab .shape { --s: 12px; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--c); transform: scaleX(0); transition: transform .2s var(--ease); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { transform: none; }
.tab:hover { color: var(--ink); }
.tab .shape { animation: shape-in .3s var(--ease) both; animation-delay: .35s; }

/* ---------- Sections ---------- */
.section { scroll-margin-top: 48px; padding-bottom: 64px; }
.section-bar { height: 16px; background: var(--c); }
.section-head { display: flex; align-items: center; gap: 24px; padding-block: 40px 32px; }
.section-head .shape { --s: 64px; }
.section-head h2 { font: 800 clamp(2.25rem, 9vw, 3rem)/1 var(--head); letter-spacing: -0.03em; }

.story { border-top: var(--rule); }
.story:last-child { border-bottom: var(--rule); }
.story-link { display: block; padding-block: 24px 40px; }

.story-fig { position: relative; overflow: hidden; background: #DDE2E6; aspect-ratio: 2 / 1; margin-bottom: 16px; }
.story-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform .5s var(--ease); }
.story-fig.is-logo { background: #FFFFFF; }
.story-fig.is-logo img { object-fit: contain; padding: 24px 32px; }

.story-row { display: grid; grid-template-columns: 16px 1fr; column-gap: 16px; }
.story-row .shape { margin-top: 7px; }
.story h3 { font: 700 clamp(1.125rem, 5vw, 1.375rem)/1.25 var(--head); letter-spacing: -0.01em; hyphens: auto; overflow-wrap: break-word; }
.story p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; hyphens: auto; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 700 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.more i { display: block; width: 10px; height: 12px; background: var(--c); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .2s var(--ease); }

.story-link:hover h3 { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.story-link:hover .more i { transform: translateX(4px); }
.story-link:active { opacity: .7; }

/* Lead story: full-bleed image, larger headline */
.story.is-lead .story-link { padding-top: 0; }
.story.is-lead .story-fig { aspect-ratio: 3 / 2; margin-inline: calc(var(--gutter) * -1); margin-bottom: 24px; }
.story.is-lead h3 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.story.is-lead p { font-size: 16px; }
.story.is-lead .story-row .shape { margin-top: 10px; }
.story.is-lead .story-row { column-gap: 16px; }

.foot { border-top: var(--rule); padding-block: 40px 56px; }
.foot-inner { display: flex; gap: 16px; }
.foot .shape { --s: 24px; }

/* ---------- Reader ---------- */
.reader { position: fixed; inset: 0; z-index: 50; background: var(--bg); transform: translateX(100%); transition: transform .32s var(--ease); visibility: hidden; }
.reader.is-open { transform: none; visibility: visible; }
.reader-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.reader-bar { height: 16px; background: var(--c); }
.reader-top { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: var(--rule); }
.reader-top-inner { display: flex; align-items: center; height: 56px; }
.back { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding-inline: 12px 16px; background: var(--ink); color: #fff; font: 700 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; transition: background .15s; }
.back:hover { background: var(--c); }
.back:active { transform: translateY(2px); }

.reader-stage { position: relative; overflow: hidden; }
.watermark { --s: 320px; position: absolute; top: -24px; right: -96px; opacity: .13; pointer-events: none; }
.reader-article { position: relative; padding-block: 40px 32px; }
.kicker { display: flex; align-items: center; gap: 12px; font: 700 12px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; }
.reader-title { margin-top: 24px; font: 800 clamp(1.75rem, 8vw, 2.5rem)/1.12 var(--head); letter-spacing: -0.025em; hyphens: auto; overflow-wrap: break-word; }

.reader-figure { max-width: 720px; margin: 0 auto; border-block: var(--rule); background: #DDE2E6; }
.reader-figure img { width: 100%; max-height: 420px; object-fit: cover; object-position: 50% 40%; }
.reader-figure.is-logo { background: #fff; }
.reader-figure.is-logo img { object-fit: contain; padding: 32px; max-height: 200px; }

.reader-body { padding-block: 40px 16px; }
.reader-body p { font-size: 17px; line-height: 1.75; hyphens: auto; overflow-wrap: break-word; }
.reader-body p + p { margin-top: 24px; }
.reader-end { padding-block: 32px 96px; }

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
  .plate { padding-block: 40px 56px; }
  .poster { height: 176px; }
  .p-circle   { --s: 144px; }
  .p-square   { --s: 96px; left: 112px; }
  .p-triangle { --s: 128px; }
  .reader-body p { font-size: 18px; }
  .story.is-lead .story-fig { margin-inline: calc(var(--gutter) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}