:root{
  --max-width: 820px;
  --page-pad: clamp(1rem, 3vw, 2rem);

  --bg: #0b0c0f;
  --surface: #13151b;
  --text: #eef0f6;
  --muted: #b7bdc9;
  --line: #2a2f3a;
  --accent: #7dd3fc;

  --ga-large: 2.5rem;
  --ga-medium: 1rem;
  --ga-small: 0.5rem;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f7fb;
    --surface: #ffffff;
    --text: #111827;
    --muted: #4b5563;
    --line: #e5e7eb;
    --accent: #0369a1;
    --shadow: 0 12px 30px rgba(2, 6, 23, .08);
  }
}

/* reset */
*{ 
  margin: 0 0;
  padding: 0 0;
  box-sizing: border-box;
}

html{ 
  scroll-behavior: smooth; 
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width: min(var(--max-width), 100% - 2*var(--page-pad));
  margin-inline: auto;
}


/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .container{
  padding-block: 12px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}


/* Inhalt */
.page{
  padding-block: 28px 60px;
}

.content-block{
  margin-bottom: var(--ga-large);
}

/* Inhalt -Header */
.preheadline{
  margin: 0 0 var(--ga-small);
  color: var(--muted);
  font-weight: 800;
}

.headline{
  margin: 0 0 var(--ga-medium);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.2;
}

.lead{
  margin: 0 0 var(--ga-small);
  font-size: 1.05rem;
  font-weight: 600;
}

.author-line{
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: var(--ga-large);
}

.author-name {
  font-style: italic;
  font-weight: 800;
}


/* Audio */
.audio-card{
  margin: var(--ga-large) 0;
  display: grid;
  gap: 10px;
}

.audio-label{
  margin: 0;
}

.audio{
  width: 100%;
  height: var(--ga-large);
}


/* Text */
.text-block .subheadline{
  margin-top: 0;
}

.subheadline{
  margin: 0 0 8px;
}


/* Bild */
figure {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.figure-image{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.figure-caption{
  margin-top: 10px;
  color: var(--muted);
  font-size: .95rem;
}


/* Zusammenfassung oder Transkription 
für Menschen mit Hörbeeinträchtigung */
.text-toggle summary {
  cursor: pointer;
  font-weight: 700;
}

.text-toggle[open] summary {
  margin-bottom: .5rem;
}


/* Footer */
.article-footer{
  color: var(--muted);
  font-size: .9rem;
  padding-inline: 6px;
  margin-top: var(--ga-large);
}

.copyleft {
  display: inline-block;   /* wichtig, damit transform sauber greift */
  transform: rotate(180deg);
}