/* =========================================================================
   AKTIEN2GO — Website
   Farben und Schrift folgen dem Marken-Design-System
   (3_A2G/design-system/colors_and_type.css).

   Keine externen Ressourcen: Schriften, Bilder und Stile liegen auf dem
   eigenen Server. Es wird nichts von fremden Hosts geladen. Das ist die
   technische Grundlage dafuer, dass die Seite ohne Einwilligungsbanner
   auskommt, und wird von Tools/website_check.py bei jedem Lauf nachgemessen.
   ========================================================================= */

/* ---------- Schrift: Barlow Condensed, lokal ----------------------------- */
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/BarlowCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/BarlowCondensed-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2");
}

:root {
  --orange:      #fd6404;
  --orange-dark: #d95403;
  --navy:        #1e4d78;
  --navy-light:  #2f6ba3;

  /* Warmes Off-White statt reinem Weiss. Reines #fff wirkt am Bildschirm
     hart und billig, der leichte Warmton nimmt der Seite die Kaelte, ohne
     dass er als Farbe auffaellt. */
  --paper:       #faf9f7;
  --paper-card:  #ffffff;
  --paper-deep:  #f2f0ec;
  --ink:         #16150f;
  --ink-2:       #4d4a45;
  --ink-3:       #6e6a64;
  --rule:        #e0ddd6;
  --rule-soft:   #ebe8e2;

  --dark:        #191817;
  --dark-2:      #232120;
  --dark-rule:   #38352f;
  --on-dark:     #ffffff;
  --on-dark-2:   #a8a49d;
  --on-dark-3:   #d6d2cb;

  /* Display-Schrift nur fuer Ueberschriften, Zahlen und Navigation.
     Der Fliesstext laeuft in der Systemschrift: Barlow Condensed ist eine
     schmale Display-Schrift und auf laengeren Strecken schlechter lesbar,
     gerade fuer die Kernzielgruppe zwischen 35 und 64. */
  --display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 24px;

  --shadow-lift: 0 2px 4px rgba(20,18,14,.05), 0 12px 34px rgba(20,18,14,.09);
}

/* ---------- Grundlagen --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.62;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  /* Grosse Condensed-Grade wirken ohne leichte Verengung auseinandergefallen */
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Silbentrennung nur dort, wo die Spalte wirklich schmal wird (siehe Handy-
   Block unten). Am Desktop erzeugt sie in kurzen Zeilen ein unruhiges
   Trennungsbild und laesst gesetzten Text billig aussehen. */

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

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
/* Frueher hing ein feiner Strich hinter jedem Label. Er stand auf sechs
   Abschnitten identisch und ordnete nichts ein, was die Ueberschrift nicht
   schon sagt - ein Ornament, wie es jede Vorlage mitliefert. Das Label
   allein reicht. */
.eyebrow.on-light { color: var(--navy); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff; padding: 12px 18px; z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- Kopfbereich -------------------------------------------------- */
.top {
  background: var(--dark);
  color: var(--on-dark);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #000;
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); flex-shrink: 0; }
.brand img { width: 38px; height: 38px; border-radius: 6px; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: 0.015em; }
.brand span b { color: var(--orange); font-weight: 700; }

nav.main { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
nav.main a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.015em;
  color: var(--on-dark-2);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 3px;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
nav.main a:hover { color: #fff; background: var(--dark-2); }
nav.main a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn-ghost { color: var(--ink); border-color: #c5c0b7; background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
/* Kein zweiter, nur umrandeter Knopf mehr neben dem orangen: das Paar aus
   gefuelltem und umrandetem Knopf ist ein reiner Vorlagen-Reflex. Wer die
   Folgen sehen will, scrollt eine Bildschirmhoehe weiter und hat sie. */

/* ---------- Einstieg ----------------------------------------------------- */
/* Bewusst KEIN dunkler Vollbild-Einstieg mit Lichtschein und zweifarbiger
   Schlagzeile. Genau diese Kombination - schwarze Flaeche, farbiger Schein
   hinter dem Text, zweite Zeile in der Akzentfarbe, daneben ein gefuellter
   und ein umrandeter Knopf - ist die Optik jeder beliebigen generierten
   Landingpage, und die Kernzielgruppe (45-64) erkennt sie als solche.
   Der Kopf laeuft deshalb auf demselben Papier wie der Rest der Seite und
   ist kurz genug, dass sofort darunter echtes Material steht: die
   Vorschaubilder der letzten Folgen. Siehe BRANDING.md 5.2 "echt statt KI". */
.hero {
  background: var(--paper);
  color: var(--ink);
  padding: 74px 0 56px;
  position: relative;
}
/* Der Markenstreifen schliesst den Kopf ab. Geometrisch und flach: er traegt
   die beiden Markenfarben, ohne dass irgendwo ein Farbverlauf entsteht. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right, var(--orange) 0 38%, var(--navy) 38% 100%);
}
.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  /* Keine Breitenbegrenzung: der zweite Satz ist der laengere und muss in
     eine Zeile passen. Mit Begrenzung brach er mitten im Satz um und die
     Schlagzeile las sich dreizeilig kaputt. */
  max-width: none;
  margin-bottom: 22px;
  /* Kein Ausbalancieren: der Umbruch soll den beiden Saetzen folgen,
     nicht gleich lange Zeilen erzwingen. */
  text-wrap: normal;
}
/* Die beiden Haelften der Zeile stehen immer untereinander. Ueberlaesst man
   den Umbruch dem Browser, faellt er je nach Fensterbreite mitten in den
   zweiten Satz und der Satzbau ist nicht mehr lesbar. Nur der Umbruch, kein
   Farbwechsel: beide Saetze gehoeren zusammen und sind gleich wichtig. */
.hero h1 span { display: block; }
.hero .lead {
  font-size: clamp(19px, 2.3vw, 21px);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Kennzahlen im Kopf ------------------------------------------- */
/* Frueher ein eigenes Band mit drei grossen Zahlen nebeneinander. Das las
   sich wie die Kennzahlen-Zeile eines Software-Anbieters, und die dritte
   Zahl (Startjahr) stand nur dort, damit es drei sind. Jetzt eine ruhige
   Zeile im Kopf - mit Stichtag, weil eine Zahl ohne Stand nichts wert ist. */
.kennzahlen {
  margin: 0;
  font-size: 16px;
  color: var(--ink-3);
}
.kennzahlen b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kennzahlen .stand {
  display: inline-block;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-3);
}

/* ---------- Abschnitte --------------------------------------------------- */
section.band { padding: 104px 0; }
section.band.tight { padding: 84px 0; }
section.band.tint { background: var(--paper-deep); }
section.band.dark { background: var(--dark); color: var(--on-dark); }
section.band.dark h2 { color: #fff; }

.band h2 { font-size: clamp(34px, 5.2vw, 52px); max-width: 19ch; margin-bottom: 20px; }
.band .intro { max-width: 60ch; color: var(--ink-2); font-size: 20px; line-height: 1.6; margin-bottom: 52px; }
section.band.dark .intro { color: var(--on-dark-2); }

.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; }
.band-head h2 { margin-bottom: 0; }
.band-head .intro { margin-bottom: 0; }
.band-head .aside { flex-shrink: 0; }

/* ---------- Neueste Folgen ----------------------------------------------- */
.episodes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 34px 30px;
}
.episodes a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.episodes a:hover { transform: translateY(-3px); }
.episodes .shot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark-2);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20,18,14,.10);
  transition: box-shadow .2s ease;
}
.episodes a:hover .shot { box-shadow: var(--shadow-lift); }
.episodes .shot img { width: 100%; height: 100%; object-fit: cover; }
/* Abspiel-Zeichen, in Markenfarbe statt im YouTube-Rot */
.episodes .shot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(25,24,23,.72) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.2v9.6l8-4.8z' fill='%23fd6404'/%3E%3C/svg%3E") center/26px no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
}
.episodes a:hover .shot::after { opacity: 1; }
.episodes h3 {
  font-size: 24px;
  line-height: 1.18;
  margin: 18px 0 0;
  color: var(--ink);
  transition: color .16s ease;
}
.episodes a:hover h3 { color: var(--navy); }

/* ---------- Regelkarten -------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.card {
  background: var(--paper-card);
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--orange);
  padding: 34px 30px 36px;
  border-radius: 0 0 3px 3px;
}
.card h3 { font-size: 27px; margin-bottom: 12px; color: var(--ink); max-width: 22ch; }
.card p { color: var(--ink-2); font-size: 18px; line-height: 1.58; margin: 0; }
.card .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--orange);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Aussage-Block ------------------------------------------------ */
.statement {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.16;
  max-width: 20ch;
  margin: 0;
  color: var(--ink);
  border-left: 4px solid var(--orange);
  padding-left: 30px;
}
.statement .by {
  display: block;
  font-family: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 22px;
  max-width: 46ch;
  letter-spacing: 0;
}

/* ---------- Negativ-Liste ------------------------------------------------ */
.nots { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.nots li {
  padding: 22px 0 22px 40px;
  border-bottom: 1px solid var(--dark-rule);
  position: relative;
  color: var(--on-dark-2);
  font-size: 19px;
}
.nots li:first-child { border-top: 1px solid var(--dark-rule); }
.nots li::before {
  content: "";
  position: absolute; left: 0; top: 34px;
  width: 22px; height: 2px; background: var(--orange);
}
.nots li b { color: #fff; font-weight: 600; }

/* ---------- Themenliste -------------------------------------------------- */
.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 30px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.topics li:last-child { border-bottom: 1px solid var(--rule); }
.topics .k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.topics h3 { font-size: 27px; margin-bottom: 9px; }
.topics p { color: var(--ink-2); font-size: 18px; margin: 0; max-width: 62ch; }

/* ---------- Kontaktzeile ------------------------------------------------- */
.contact-line {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  margin: 0;
}
.contact-line a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 2px solid rgba(253,100,4,.3);
  display: inline-block;
  padding: 6px 0;
  transition: border-color .16s ease;
}
.contact-line a:hover { border-bottom-color: var(--orange); }

/* ---------- Fliesstext-Seiten -------------------------------------------- */
.doc { padding: 72px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(38px, 6vw, 56px); margin-bottom: 12px; }
.doc .stand { color: var(--ink-3); font-size: 16px; margin-bottom: 46px; }
.doc h2 { font-size: 28px; margin: 46px 0 14px; padding-top: 26px; border-top: 1px solid var(--rule); }
.doc h3 { font-size: 21px; margin: 28px 0 8px; font-family: var(--text); font-weight: 700; letter-spacing: 0; }
.doc p, .doc li { font-size: 18px; color: #2f2c28; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .kv { margin: 0 0 24px; }
.doc .kv div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.doc .kv dt { font-weight: 600; min-width: 210px; color: var(--ink); }
.doc .kv dd { margin: 0; color: #2f2c28; }
/* Die E-Mail-Adresse ist hier ein echtes Tippziel, kein Link im Satz */
.doc .kv dd a { display: inline-block; padding: 11px 0; }

.callout {
  background: var(--paper-deep);
  border-left: 3px solid var(--orange);
  padding: 22px 26px;
  margin: 30px 0;
  font-size: 17px;
  color: var(--ink-2);
}

/* ---------- Fussbereich -------------------------------------------------- */
footer.foot { background: var(--dark); color: var(--on-dark-2); padding: 68px 0 40px; font-size: 16px; }
footer.foot .cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--dark-rule);
}
footer.foot h4 {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 600;
}
footer.foot ul { list-style: none; margin: 0; padding: 0; }
footer.foot li { margin-bottom: 10px; }
footer.foot a { color: var(--on-dark-2); text-decoration: none; transition: color .16s ease; }
footer.foot a:hover { color: #fff; text-decoration: underline; }
footer.foot .risk { padding: 30px 0 0; color: #8a8680; font-size: 15px; line-height: 1.62; max-width: 84ch; }
footer.foot .copy { padding-top: 26px; color: #75716b; font-size: 15px; }

/* ---------- Tablet ------------------------------------------------------- */
@media (max-width: 900px) {
  .topics li { grid-template-columns: 118px 1fr; gap: 24px; }
  footer.foot .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* ---------- Handy -------------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 18px; }

  /* Hier lohnt die Silbentrennung: bei rund 40 Zeichen je Zeile reissen
     lange Komposita wie "Dividendenrendite" sonst grosse Luecken auf. */
  p, li, dd { hyphens: auto; -webkit-hyphens: auto; }

  /* Am Handy braucht der Kopf zwei Zeilen. Mitscrollen wuerde dauerhaft ein
     Viertel des Bildschirms kosten, deshalb bleibt er hier oben stehen. */
  .top { position: static; }
  .top .wrap { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 8px; }
  nav.main { width: 100%; gap: 0; margin-left: -14px; }
  nav.main a { font-size: 19px; padding: 8px 14px; }

  .hero { padding: 58px 0 54px; }
  .hero h1 { max-width: none; }
  .hero .lead { margin-bottom: 30px; }

  section.band, section.band.tight { padding: 58px 0; }
  .band .intro, .band-head { margin-bottom: 34px; }
  .band-head { display: block; }
  .band-head .aside { margin-top: 22px; }

  /* Der Stichtag rutscht am Handy in eine eigene Zeile: nebeneinander bricht
     die Zeile sonst mitten in "Folgen seit 2024" um. */
  .kennzahlen .stand {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    border-left: 0;
  }

  .episodes { grid-template-columns: 1fr; gap: 30px; }
  .episodes h3 { font-size: 23px; }

  .cards { gap: 20px; }
  .card { padding: 28px 24px 30px; }

  .statement { padding-left: 20px; }

  .topics li { grid-template-columns: 1fr; gap: 6px; padding: 26px 0; }
  .topics .k { font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }

  .btn { display: block; text-align: center; }
  .hero-actions { display: block; }
  .hero-actions .btn { margin-bottom: 12px; }

  footer.foot { font-size: 16px; }
  footer.foot .cols { grid-template-columns: 1fr; gap: 30px; }
  footer.foot li { margin-bottom: 2px; }
  footer.foot li a { display: inline-block; padding: 11px 0; }
  footer.foot .risk, footer.foot .copy { font-size: 16px; }

  .doc { padding: 48px 0 68px; }
  .doc .kv dt { min-width: 0; width: 100%; }
  .doc .kv div { gap: 2px; }
}

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

@media print {
  .top, footer.foot .cols, .hero-actions, .episodes { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}