/* Kapitalanlage Magazin.
   Seit 2026-10-07 im Aufbau von gewinnermagazin.de: Leiste oben quer, ein
   großer Aufmacher, Liste mit großem Bild links, Seitenleiste rechts mit
   Kästen, dunkler Fuß.
   Farben aus dem Creme-Design der Instagram-Postings: Creme, Sandbeige,
   Navy, Greige. Was C von A unterscheidet, sind Aufbau und Schrift:
   Barlow Condensed in Versalien für Namen und Überschriften, Lora mit Serife
   im Lauftext, Instrument Sans in gesperrten Versalien für Labels.
   Vorher Petrol auf Weiß, davor Burgunder auf Blaugrau. */

:root{
  /* Farben aus dem Creme-Design der Instagram-Postings (2026-10-07):
     Creme, Sandbeige, Navy, Greige. */
  --bg:#FAF6F1;
  --bg-warm:#EFE4D3;         /* Anzeigen: wärmer als die Kästen der Leiste */
  --bg-tief:#E9DFD0;
  --karte:#F2EBE0;           /* Kästen der Seitenleiste */
  --ink:#0A1124;
  --body:#1A1A1A;
  --muted:#7A8A9A;
  --linie:rgba(10,17,36,.12);
  --linie-stark:rgba(10,17,36,.30);
  --linie-karte:rgba(10,17,36,.10);
  --greige:#1F273F;          /* Akzent: Navy-Ton für Labels, Links, Zahlenkreise */
  --greige-tief:#0A1124;
  --greige-hell:#E9E3DA;
  --zierlinie:#C7C1BA;       /* Greige: Linien, Unterstreichungen, Etikett */
  --warn:#8A5A2B;
  --rand:clamp(16px,4vw,48px);
  --schrift:'Lora',Georgia,'Times New Roman',serif;
  --serif:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --kopfschrift:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --mono:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mass:64ch;
}

body{font-weight:400;font-size:17.5px;line-height:1.72}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:0;line-height:1.08;text-transform:uppercase}
.huelle{max-width:1240px}

.kicker,.beitrag__teaser,.fuss__satz,.titelkopf__satz,
.satz blockquote p,.aufmacher__teaser{font-family:var(--schrift);font-style:normal}

.label,.zeile__fuss,.zeile__zeile,.beitrag__meta,.filterleiste,
.karte__fuss,.aufmacher__fuss,.aufmacher__zeile,.kompakt__zeile,
.blaettern,.krume,.belege__titel,.weiterlesen__titel,.widget__titel,
.fuss__zeile,.marke,.anriss__zeile{font-family:var(--mono);letter-spacing:.04em}
.label,.belege__titel,.weiterlesen__titel{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--greige)}

.nur-vorleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- Kopf
   Weiße Leiste, Drei-Striche links, Name, Rubriken in Akzentfarbe. */
.leiste{background:rgba(250,246,241,.97);border-bottom:1px solid var(--linie)}
.leiste__inhalt{min-height:58px}
.wortmarke{font-family:var(--kopfschrift);font-weight:600;font-size:27px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.navi{margin-left:clamp(12px,3vw,40px);gap:clamp(16px,2vw,26px)}
.navi a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.navi a:hover,.navi a[aria-current]{color:var(--ink);border-bottom-color:var(--zierlinie)}
.navi__anzeigen{color:var(--warn) !important}
.menuknopf{color:var(--greige)}
.menuklappe{background:var(--karte)}

/* ------------------------------------------------------------- Mosaik
   Ein einziger großer Beitrag über die volle Breite, Überschrift in dunklen
   Kästen auf dem Bild. Die Höhe hängt an der Fensterhöhe, damit Reiter und
   erste Zeile darunter noch anlaufen. */
.mosaik{display:block;margin-top:clamp(14px,1.8vw,24px);height:clamp(320px,50vh,480px)}
.mosaik__gross{position:relative;height:100%;min-width:0;background:var(--greige-tief)}
.mosaik__flaeche{display:block;position:relative;height:100%;color:#fff;text-decoration:none;overflow:hidden}
.mosaik__flaeche picture,.mosaik__flaeche img{display:block;width:100%;height:100%}
.mosaik__flaeche img{object-fit:cover;transition:transform .5s ease-out}
.mosaik__flaeche:hover img{transform:scale(1.02)}
.mosaik__flaeche::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 100%)}
.mosaik__text{position:absolute;left:clamp(14px,2.4vw,40px);right:clamp(14px,2.4vw,40px);
  bottom:clamp(14px,2.4vw,36px);z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;max-width:820px}
.mosaik__titel{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.2vw,58px);line-height:1.2;text-transform:uppercase}
.mosaik__titel span{background:var(--ink);color:#fff;padding:.02em .26em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.mosaik__flaeche:hover .mosaik__titel span{background:var(--greige-tief)}
.mosaik__marke{display:inline-block;background:var(--zierlinie);color:var(--ink);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;line-height:1.3}
.mosaik__zeile{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin:0;color:#fff;background:rgba(21,35,42,.72);padding:3px 8px}

/* Reiterzeile rechtsbündig über der Liste, wie „Neueste / Trending". */
.filterleiste{border:0;border-bottom:1px solid var(--linie);justify-content:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding-block:14px;margin-top:clamp(16px,2vw,26px)}
.filterleiste label,.filterleiste a{color:var(--muted)}
.filterleiste label:hover,.filterleiste a:hover{color:var(--greige)}
.filterleiste__aktiv,.filterleiste [aria-current]{border-bottom-color:var(--zierlinie)}

/* --------------------------------------------------------------- Liste
   Ohne Karte: großes Bild links bündig, Text daneben, Haarlinie dazwischen. */
.liste{gap:0}
.zeile{background:none;border:0;border-bottom:1px solid var(--linie);
  padding:clamp(16px,1.8vw,22px) 0;
  grid-template-columns:clamp(200px,38%,290px) 1fr;gap:clamp(16px,2vw,26px)}
.zeile:hover{border-color:var(--linie)}
.zeile--ohne-bild{grid-template-columns:1fr}
.zeile__bild img{aspect-ratio:4/3;transition:transform .5s ease-out}
.zeile:hover .zeile__bild img{transform:scale(1.03)}
.zeile__titel{font-size:clamp(22px,2vw,27px);line-height:1.14}
.zeile__titel a:hover{color:var(--greige);text-decoration:none}
.zeile__zeile{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.zeile__zeile a{color:var(--greige);text-decoration:none}
.zeile__teaser{font-size:15.5px;line-height:1.62}
.zeile__fuss a{color:var(--ink);border-bottom-color:var(--zierlinie)}
.zeile--anzeige{background:var(--bg-warm);border-left:3px solid var(--warn);
  padding-inline:clamp(12px,1.4vw,18px)}

.anzeigenblock{border-top:2px solid var(--ink);margin-top:clamp(24px,3vw,40px);padding-top:14px}

/* ------------------------------------------------------- Seitenleiste
   Graue Kästen ohne Rand, Titel mit Akzentlinie wie beim Vorbild. */
.widget{background:var(--karte);border:0;padding:20px}
.widget__titel{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--zierlinie);
  padding-bottom:10px;margin-bottom:14px}
.widget--anzeige{background:var(--bg-warm)}
.widget--hinweis{background:var(--karte)}
.anriss__titel{font-size:15.5px;line-height:1.34}
.anriss__titel a:hover{color:var(--greige);text-decoration:none}
.widget__rubriken a:hover{color:var(--greige)}

/* Auf der Startseite steht rechts eine Spalte mit eigenen Kästen über der
   gemeinsamen Leiste. Die Spalte klebt nicht, dafür ist sie zu lang. */
.rechts{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0 clamp(40px,5vw,72px);min-width:0}
.rechts .leiste-seit{position:static;padding:0}

/* Zahlen mit Fundstelle: nummerierte Kreise wie „Trending", aber eine
   Aufzählung, keine Rangliste. */
.zahlen{list-style:none;margin:0;padding:0;counter-reset:zahl}
.zahl{counter-increment:zahl;border-top:1px solid var(--linie)}
.zahl:first-child{border-top:0}
.zahl__feld{display:grid;grid-template-columns:34px 1fr;column-gap:12px;row-gap:2px;
  padding:12px 0;text-decoration:none;color:inherit}
.zahl__feld::before{content:counter(zahl);grid-row:1 / span 3;width:30px;height:30px;
  border-radius:50%;background:var(--greige);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;margin-top:2px}
.zahl__wert{font-family:var(--serif);font-weight:600;font-size:26px;text-transform:uppercase;line-height:1.1;color:var(--ink)}
.zahl__satz{font-size:14px;line-height:1.45;color:var(--body)}
.zahl__stelle{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--greige)}
.zahl__feld:hover .zahl__wert{color:var(--greige)}
.zahl__feld:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Kurz beantwortet: an der Stelle des Tickers. */
.fragen{list-style:none;margin:0;padding:0}
.frage{padding:12px 0;border-top:1px solid var(--linie)}
.frage:first-child{border-top:0;padding-top:0}
.frage__datum{margin:0 0 3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.frage__frage{font-size:16px;line-height:1.3;margin:0 0 5px}
.frage__frage a{text-decoration:none}
.frage__frage a:hover{color:var(--greige)}
.frage__antwort{margin:0;font-size:14px;line-height:1.55;color:var(--body)}
.frage__mehr{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--greige);
  text-decoration:none;white-space:nowrap}
.frage__mehr:hover{text-decoration:underline}

/* --------------------------------------------------------------- Beitrag */
.satz a{color:var(--greige);border-bottom-color:var(--greige)}
.satz blockquote{border-left:3px solid var(--greige)}
.satz blockquote p{font-size:1.05em;font-style:italic;color:var(--ink)}
.kasten{background:var(--karte);border:0;border-left:3px solid var(--greige)}
.kasten--zitat{border-left-color:var(--linie-stark)}
.titelbild figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
.faq__paar{border-top:1px solid var(--linie)}
.autorenbox{background:var(--karte);border:0;border-left:3px solid var(--greige)}
.kompakt{background:var(--karte);border:0}
.kompakt:hover{background:var(--greige-hell)}
.aufmacher__fuss a{color:var(--greige);border-bottom-color:var(--greige)}

/* Titelkopf der Rubrik- und Archivseiten: linksbündig wie beim Vorbild. */
.titelkopf,.titelkopf--flach{text-align:left;border-bottom:2px solid var(--ink)}
.titelkopf__satz{color:var(--muted)}

/* ------------------------------------------------------------------ Fuß */
.fuss{background:var(--ink);color:#D9D4CC;border-top:4px solid var(--zierlinie)}
.fuss a,.fuss__liste a{color:#D9D4CC}
.fuss .label{color:var(--zierlinie)}
.fuss__satz{color:#C7C1BA}
.fuss .wortmarke--fuss{color:#fff;font-family:var(--kopfschrift);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.fuss__zeile{border-top-color:rgba(255,255,255,.16);color:#9AA3B0}
.fuss__liste a:hover{color:#fff}

/* ---------------------------------------------------------- Umbrüche */
@media (max-width:1000px){
  .mosaik{height:clamp(300px,56vw,420px)}
  .rechts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding-top:0}
  .rechts .leiste-seit{grid-column:1 / -1}
}
@media (max-width:760px){
  .navi{margin-left:auto}
  .mosaik__titel{font-size:clamp(28px,8vw,36px)}
  .zeile{grid-template-columns:clamp(96px,32vw,140px) 1fr;gap:14px;padding:14px 0}
  .zeile__bild img{aspect-ratio:1/1}
  .zeile__teaser{display:none}
}
@media (max-width:520px){
  .mosaik{height:clamp(300px,96vw,400px)}
}
@media (prefers-reduced-motion:reduce){
  .mosaik__flaeche img,.zeile__bild img{transition:none}
  .mosaik__flaeche:hover img,.zeile:hover .zeile__bild img{transform:none}
}