/* Suche: Vorschlagsliste unter dem Suchfeld und Trefferliste — ergänzt das
   unveränderte Design-Stylesheet, nutzt ausschließlich dessen Tokens. */
.head-search,.hero-search{position:relative}
/* Das Suchfeld im Kopf ist in der Design-Vorlage 240px breit — zu wenig für
   Treffer wie „Siemens Energy AG · ISIN DE000ENER6Y0". Die Navigation braucht
   links wenig Platz (nur zwei Punkte), also darf das Feld deutlich breiter
   werden; die Vorschlagsliste geht bei Bedarf noch darüber hinaus. */
.head-search{width:340px}
@media(max-width:1400px){ .head-search{width:300px} }
@media(max-width:1320px){ .head-search{display:none} }
.such-vorschlaege{min-width:360px;right:0;left:auto}
.such-vorschlaege{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);overflow:hidden}
.hero-search .such-vorschlaege,.seite .such-vorschlaege{min-width:0;left:0;right:0}
.such-vorschlaege a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;color:var(--ink);text-decoration:none;font-size:13.5px}
/* Lange Namen kuerzen statt umbrechen — sonst sind die Zeilen unterschiedlich
   hoch und die Kennnummer rutscht optisch weg. */
.such-vorschlaege a > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-vorschlaege a:hover,.such-vorschlaege a.aktiv{background:var(--bg-soft)}
.such-vorschlaege .zusatz{color:var(--ink-3);font-size:12px;white-space:nowrap}
.such-liste{overflow:hidden}
.such-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.such-zeile:last-child{border-bottom:0}
.such-zeile:hover{background:var(--bg-soft)}
.such-zeile .nm{font-weight:600;font-size:14.5px}
.such-zeile .meta{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px;flex-wrap:wrap;justify-content:flex-end}

/* Startseite: drei Marktbewegungs-Karten nebeneinander (Design hat zwei). */
@media (min-width:1000px){
  .movers-3{grid-template-columns:1fr 1fr 1fr}
}

/* Artikel-Typografie des Magazins */
.artikel-inhalt{font-size:16px;line-height:1.65;color:var(--ink)}
.artikel-inhalt p{margin:0 0 16px}
.artikel-inhalt h2{font-size:21px;letter-spacing:-.02em;margin:26px 0 10px}
.artikel-inhalt h3{font-size:17px;margin:20px 0 8px}
.artikel-inhalt img{max-width:100%;height:auto;border-radius:var(--r-md)}
.artikel-inhalt a{color:var(--brand);text-decoration:underline}
.artikel-inhalt ul,.artikel-inhalt ol{margin:0 0 16px 22px}
.artikel-inhalt blockquote{border-left:3px solid var(--line-2);margin:0 0 16px;padding:4px 0 4px 16px;color:var(--ink-2)}

/* Innenseiten: vertikaler Rhythmus OHNE das Seitenpadding der .shell zu
   überschreiben (padding-Shorthand hatte links/rechts auf 0 gesetzt). */
.seite{padding-top:30px;padding-bottom:52px}
.seite-schmal{max-width:1000px}
.seitenkopf{margin-bottom:22px}
.seitenkopf h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;font-weight:800}
.seitenkopf .sub{margin-top:6px;font-size:14px;color:var(--ink-2)}
.qpill.aktiv{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.treffer-anzahl{margin:18px 0 10px;font-size:13px;color:var(--ink-3)}
.such-zeile .kurs{display:flex;align-items:baseline;gap:8px;white-space:nowrap}

/* Mover-Zeilen: einheitlicher Aufbau und gleiche Hoehe.
   Jede Zeile hat oben den Namen, darunter Ticker/ISIN — beide einzeilig
   gekuerzt, damit kein Titel die Zeile aufblaeht. */
/* Spalten an die tatsaechlichen Inhalte anpassen: Die Design-Vorlage reserviert
   96px fuer die Sparkline und ebenso viel fuer den Kurs — der Name bekommt dann
   in den drei nebeneinander stehenden Karten zu wenig Platz und wird schon bei
   „MODERNA INC." abgeschnitten. */
.mrow{min-height:64px;grid-template-columns:minmax(0,1fr) 66px auto auto;gap:10px}
/* Feste Zeilenhoehen: sonst schwankt die Zeilenhoehe je nach Schriftzeichen
   um ein Pixel, und die Karten stehen nicht mehr buendig nebeneinander. */
.mrow .bez{display:flex;flex-direction:column;justify-content:center;gap:2px;
  height:36px;min-width:0;flex:1 1 auto}
.mrow .tick,.mrow .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.mrow .tick{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:19px}
.mrow .name{font-size:11.5px;color:var(--ink-3);font-weight:400;line-height:15px}
.mrow .price{text-align:right;white-space:nowrap}
.mrow .pill{text-align:center;white-space:nowrap;min-width:6.5ch}

/* Alterskennzeichnung: erscheint nur, wenn der letzte Abschluss lange her ist.
   Zurueckhaltend gehalten — es ist ein Hinweis, keine Warnung. */
.kurs-alt{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:5px 9px}
.kurs-alt svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--ink-3);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kurs-alt-klein{color:var(--ink-3)}
.stock-right .kurs-alt{justify-content:flex-end}

/* Orderbuch: Geld und Brief — laufend aktuell, auch ohne Abschluss */
.orderbuch{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:8px;
  justify-content:flex-end;font-size:13.5px}
.orderbuch .k{color:var(--ink-3);font-size:12px;margin-right:3px}
.orderbuch .num{font-weight:600}
.orderbuch .q-stand{color:var(--ink-3);font-size:12px}

/* Universums-Umschalter der Marktbewegungen */
.universum-hinweis{flex:1 1 340px;margin:0 0 0 auto;text-align:right;
  font-size:12px;line-height:1.45;color:var(--ink-3)}
@media(max-width:980px){.universum-hinweis{flex-basis:100%;text-align:left}}
.block-head .segmented{margin-left:0}

/* Indikativer Wert: tritt bei veraltetem Abschluss in den Vordergrund */
.stock-price .marke{display:inline-block;vertical-align:middle;margin-left:8px;
  padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  background:var(--surface-2)}
.bezahlt{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:8px;
  justify-content:flex-end;font-size:12.5px;color:var(--ink-2)}
.bezahlt .k{color:var(--ink-3);font-size:12px}
.bezahlt .num{font-weight:600;color:var(--ink)}

/* ── Markt-Puls im Hero-Hintergrund ─────────────────────────────────────────
   Eine breite, an den Raendern ausblendende Kurslinie hinter dem Hero-Inhalt.
   Rein dekorativ, aber aus echten Kursdaten gezeichnet. */
.hero{position:relative;overflow:hidden}
.hero > .shell{position:relative;z-index:1}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto;height:150%;z-index:0;
  background:radial-gradient(ellipse 55% 50% at 50% 45%,var(--brand-soft),transparent 72%);
  opacity:.6;
  pointer-events:none;
}
.hero-puls{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:0;
  width:min(1400px,160vw);height:340px;color:var(--brand);
  pointer-events:none;user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero-puls{animation:pulsEin .9s ease-out both}
}
@keyframes pulsEin{from{opacity:0}to{opacity:1}}
@media(max-width:900px){ .hero-puls{height:260px} }

/* Meistgehandelt-Leiste im Hero: eine Zeile, kleinere Schrift, rechts sanft
   auslaufend statt umzubrechen. Gilt nur im Hero — die gleiche Klasse traegt
   auf der Ratgeber-Seite den Kategoriefilter, der umbrechen darf. */
.hero .hero-quick{
  flex-wrap:nowrap;overflow:hidden;font-size:12px;
  -webkit-mask-image:linear-gradient(to right,#000 86%,transparent 100%);
  mask-image:linear-gradient(to right,#000 86%,transparent 100%);
}
.hero .hero-quick > span:first-child{flex:none}
.hero .hero-quick .qpill{flex:none;font-size:12px;padding:4px 10px}

/* Die drei Aussagen im Hero: zweizeilig wie im Entwurf, aber alle drei
   nebeneinander in einer Reihe. Die Texte sind kurz genug, dass das ohne
   kleinere Schrift aufgeht; unter 1150px darf wieder umbrochen werden. */
.hero .usps{flex-wrap:nowrap;gap:16px;margin-top:30px}
.hero .usps li{flex:1 1 0;min-width:0;white-space:nowrap}
@media(max-width:1150px){
  .hero .usps{flex-wrap:wrap;gap:14px 24px}
  .hero .usps li{flex:0 1 auto}
}

/* Trust-Leiste: Symbol mittig zum Text statt oben ausgerichtet. */
.trust > div{align-items:center}

/* ── Bereichsseiten /aktien und /etf ────────────────────────────────────── */

/* Nur eine Karte (ETFs: allein „Meistgehandelt") — sonst zöge sie sich über
   die ganze Breite und die Zeilen stünden verloren nebeneinander. */
.movers-1{grid-template-columns:minmax(0,560px)}

/* Filterleiste über dem Verzeichnis: Länder bzw. Währungen. */
.filterleiste{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.filterleiste a{
  font-size:13px;font-weight:600;color:var(--ink-2);
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);
}
.filterleiste a:hover{border-color:var(--line-2);color:var(--ink)}
.filterleiste a.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Sortierumschalter: dieselbe Optik wie der Universums-Schalter, aber Links. */
.segmented a{
  display:inline-block;border-radius:6px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);padding:4px 12px;
}
.segmented a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

/* Verzeichnistabelle. Der Rahmen scrollt waagrecht, statt die Seite zu dehnen. */
.tabelle-rahmen{overflow-x:auto}
.wp-tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.wp-tabelle th,.wp-tabelle td{padding:10px 14px;text-align:left;font-weight:400}
.wp-tabelle thead th{
  font-size:12px;font-weight:600;color:var(--ink-3);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.wp-tabelle thead th.num,.wp-tabelle td.num{text-align:right}
.wp-tabelle tbody tr{border-bottom:1px solid var(--line)}
.wp-tabelle tbody tr:last-child{border-bottom:0}
.wp-tabelle tbody tr:hover{background:var(--surface-2)}
.wp-tabelle tbody th{padding:0}
.wp-tabelle tbody th a{display:block;padding:10px 14px}
.wp-tabelle .wp-name{display:block;font-weight:600;letter-spacing:-.01em}
.wp-tabelle .wp-kennung{display:block;font-size:12px;color:var(--ink-3)}
.wp-tabelle .pill{display:inline-block;justify-self:auto;min-width:7ch;text-align:center}
.wp-tabelle .sp-land,.wp-tabelle .sp-waehrung{color:var(--ink-2);white-space:nowrap}
.wp-tabelle .sp-kurs,.wp-tabelle .sp-umsatz{white-space:nowrap}

/* Schmale Fenster: Herkunft und Umsatz treten zurück, Kurs und Veränderung
   sind das, wofür die Tabelle da ist. */
@media(max-width:720px){
  .wp-tabelle .sp-land,.wp-tabelle .sp-waehrung,.wp-tabelle .sp-umsatz{display:none}
  .wp-tabelle th,.wp-tabelle td{padding:8px 10px}
  .wp-tabelle tbody th a{padding:8px 10px}
}

/* Blättern */
.blaettern{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:13.5px}
.blaettern a{font-weight:600;color:var(--brand)}
.blaettern a:hover{color:var(--brand-dark)}
.blaettern .aus{color:var(--ink-3)}
.blaettern .stand{margin-left:auto;color:var(--ink-3)}
.tabelle-fussnote{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3);max-width:88ch}

/* Suchmaske der Bereichsseiten */
.wp-maske{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:18px}
.wp-maske .feld{display:flex;flex-direction:column;gap:5px;min-width:150px}
.wp-maske .feld-breit{flex:1 1 320px}
.wp-maske .feld-knopf{justify-content:flex-end}
.wp-maske label{font-size:12px;font-weight:600;color:var(--ink-3)}
.wp-maske input,.wp-maske select{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 12px;
}
.wp-maske input:focus,.wp-maske select:focus{outline:2px solid var(--brand);outline-offset:-1px}
.wp-maske .btn{padding:10px 20px;white-space:nowrap}
.masken-hinweis{margin:10px 2px 0;font-size:12px;line-height:1.5;color:var(--ink-3);max-width:78ch}
@media(max-width:620px){
  .wp-maske .feld,.wp-maske .feld-breit{flex:1 1 100%}
  .wp-maske .btn{width:100%}
}

/* Länderspalten auf /aktien: vier nebeneinander, gestaffelt bis auf eine. */
@media (min-width:1100px){ .movers-4{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1099px) and (min-width:861px){ .movers-4{grid-template-columns:1fr 1fr} }
.movers-4 .card-head a{color:inherit}
.movers-4 .card-head a:hover{color:var(--brand)}

/* In vier Spalten ist die Sparkline zu klein, um etwas zu zeigen — sie kostet
   nur die Breite, die der Name braucht. Kurs und Tagesveränderung stehen
   übereinander statt nebeneinander: Das schafft dieselbe Breite noch einmal,
   und die Zeile bleibt so hoch wie der zweizeilige Name links ohnehin ist.
   Aus „App…" wird damit „Apple Inc.". */
.movers-4 .mrow{
  grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;padding:9px 14px;
}
.movers-4 .mrow .spark,.movers-4 .mrow .spark-platz{display:none}
.movers-4 .mrow .bez{grid-row:1 / span 2}
.movers-4 .mrow .price{grid-column:2;grid-row:1;text-align:right;font-size:13px}
.movers-4 .mrow .pill{grid-column:2;grid-row:2;justify-self:end;font-size:11.5px;padding:2px 7px}

/* Der aktive Menüpunkt wird fett und damit breiter — die Nachbarn rutschten
   bei jedem Seitenwechsel zur Seite. Der Platzhalter aus data-text belegt die
   fette Breite von vornherein: null hoch, unsichtbar, aber breit. Deshalb
   steht hier inline-block statt flex, sonst stellte er sich daneben. */
.mainnav a{display:inline-block}
.mainnav a::after{
  content:attr(data-text);
  display:block;height:0;overflow:hidden;visibility:hidden;
  font-weight:600;
}

/* Chart-Blase: klappt unter den Punkt, wenn oben kein Platz ist. */
.tt.unten{transform:translate(-50%,35%)}

/* ── Mobil: Hero darf den Rahmen nicht sprengen ─────────────────────────── */

/* Ein Grid-Track mit 1fr ist minmax(auto,1fr) — sein Minimum ist die
   min-content-Breite des Inhalts. Die Pill-Leiste „Meistgehandelt" ließ sich
   nicht unter 536 px stauchen und schob damit die ganze Spalte über den
   Bildschirmrand, wo overflow:hidden sie abschnitt. minmax(0,…) erlaubt dem
   Track zu schrumpfen; die Kinder regeln ihren Umbruch selbst. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }

/* Die Meistgehandelt-Leiste bleibt einzeilig mit weichem Auslaufen (siehe
   oben). Auf dem Desktop ist das Zierde — am Handy lägen die hinteren Titel
   unerreichbar hinter dem Rand. Dort darf sie deshalb gewischt werden; die
   Bildlaufleiste bleibt unsichtbar, der Verlauf zeigt, dass es weitergeht. */
.hero-quick{min-width:0}
@media(max-width:980px){
  .hero .hero-quick{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero .hero-quick::-webkit-scrollbar{display:none}
}

/* Anderswo (Kategoriefilter im Ratgeber) darf ein langer Name kürzen statt
   überstehen — dort bricht die Leiste um, statt zu scrollen. */
.qpill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero .hero-quick .qpill{max-width:none}

/* Die Kennzahlen unter dem Kurs stehen auf schmalen Geräten zu zweit statt
   zu dritt — sechs Spalten mit nicht umbrechenden Werten passen dort nicht. */
@media(max-width:420px){ .qc-stats{grid-template-columns:repeat(2,1fr)} }

/* Dieselbe Falle wie im Hero: Der 1fr-Track der Detailseite konnte nicht unter
   die min-content-Breite seines Inhalts schrumpfen und schob die Spalte über
   den Rand. Die Bausteine darin bringen ihre eigenen Umbrüche mit. */
@media(max-width:1040px){ .detail-grid{grid-template-columns:minmax(0,1fr)} }

/* ── Rechtstexte ────────────────────────────────────────────────────────── */
.rechtstext{padding:24px 28px 28px;margin-bottom:40px;max-width:78ch}
.rechtstext h2{font-size:16px;letter-spacing:-.01em;margin:26px 0 8px}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 10px}
.rechtstext a{color:var(--brand)}
.rechtstext .hinweis{font-size:13px;color:var(--ink-3)}
/* Aufzaehlungen erben von .rechtstext p nichts, weil die Regel auf p sitzt.
   Ohne eigene Angabe faellt ein li auf die Grundgroesse des Koerpers zurueck
   und steht eine Spur groesser und dunkler neben dem Absatz darueber, aus dem
   es haengt. Der Einzug kommt aus padding-left statt aus margin, damit die
   Punkte innerhalb der Textspalte bleiben. */
.rechtstext ul,.rechtstext ol{margin:0 0 12px;padding-left:20px}
.rechtstext li{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:5px}
.rechtstext li:last-child{margin-bottom:0}
.rechtstext li::marker{color:var(--ink-3)}

/* Offene Angaben sichtbar machen: Ein Impressum mit unbemerkter Lücke ist
   schlimmer als eines, dem man die Baustelle ansieht. */
.platzhalter{
  display:inline-block;padding:1px 8px;border-radius:5px;
  background:var(--brand-soft);color:var(--brand);
  font-weight:600;font-size:13.5px;
}
/* Dieselbe Auszeichnung, wenn der Text aus der Redaktion kommt: Im Editor ist
   die Hervorhebung das <mark>-Format, es trägt dort keine Klasse. */
.rechtstext mark{
  display:inline-block;padding:1px 8px;border-radius:5px;
  background:var(--brand-soft);color:var(--brand);
  font-weight:600;font-size:13.5px;
}
.entwurfshinweis{
  padding:11px 14px;margin:0 0 22px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
}
@media(max-width:620px){ .rechtstext{padding:18px} }

/* Dünn gehandelte Titel: Die Veränderung tritt zurück, statt Gewissheit zu
   behaupten, die drei Abschlüsse nicht hergeben. */
.wp-tabelle .pill.vage{opacity:.55}
.wp-tabelle .sp-trades{color:var(--ink-3);white-space:nowrap}
.wp-tabelle .sp-trades.duenn{color:var(--down)}
@media(max-width:860px){ .wp-tabelle .sp-trades{display:none} }
.wp-tabelle .nur-wenige{color:var(--down)}
@media(min-width:861px){ .wp-tabelle .nur-wenige{display:none} }

/* Admin-Menü im Kopf — der Knopf gebaut wie der Hell/Dunkel-Schalter daneben.

   Der Punkt am Zahnrad steht, solange die Archivansicht läuft, also solange
   die Seite etwas anderes zeigt als einem Besucher. Bernstein statt Grün oder
   Rot — die beiden sind für Kurssignale reserviert und dürfen hier keine
   Bedeutung vortäuschen. */
:root { --hinweis: #b45309; --hinweis-soft: #fdf1e2; }
:root[data-theme="dark"] { --hinweis: #eda44a; --hinweis-soft: #2a2013; }

.admin-menue { position: relative; display: inline-flex; }
.admin-knopf { text-decoration: none; }
.admin-knopf.an { color: var(--hinweis); border-color: var(--hinweis); background: var(--hinweis-soft); }
.admin-knopf.an:hover { color: var(--hinweis); border-color: var(--hinweis); }
/* Der Punkt sitzt an der Ecke des Knopfes, nicht im Zahnrad: Im Icon selbst
   wäre er bei 20 Pixeln Kantenlänge nicht mehr als ein Pixelklecks. */
.admin-knopf.an::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hinweis);
}

/* Das Menü steht mit neun Pixeln Abstand unter dem Knopf, berührt ihn also
   nicht. Die Lücke gehört trotzdem zur Hoverfläche, sonst verlässt der Zeiger
   auf dem Weg nach unten das Menü und es klappt sofort wieder zu.

   Die Brücke ist ein unsichtbarer Streifen unter dem Knopf, der **erst zählt,
   wenn das Menü schon offen ist**. Ohne diese Bedingung öffnet das Menü, bevor
   man den Knopf erreicht hat: Wer von unten kommt, trifft zuerst die Brücke.
   Solange der Container nicht überfahren wird, lässt sie den Zeiger deshalb
   durch; erst danach fängt sie ihn und hält das Überfahren aufrecht.

   Zwei Umwege, die nicht taugten: Ein ::before am Menü wird abgeschnitten,
   sobald das Menü `overflow-y: auto` trägt, um bei vielen Einträgen scrollen zu
   können. Innenabstand am Container vergrößert dessen Fläche dauerhaft und
   öffnet damit genau zu früh. */
.admin-menue::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
  pointer-events: none;
}
.admin-menue:hover::after { pointer-events: auto; }
.admin-liste {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
  display: none; min-width: 244px; margin: 0; padding: 6px 0;
  list-style: none; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
/* Auf Zeigergeräten öffnet allein das Überfahren, und das Menü schließt
   wieder, sobald der Zeiger es verlässt. */
@media (hover: hover) {
  .admin-menue:hover .admin-liste { display: block; }
}
/* Ohne Hover — Telefon, Tablet — bleibt der Tipp der einzige Weg. Die
   Umschaltung setzt aria-expanded, siehe initAdminMenue() in app.js. */
.admin-knopf[aria-expanded="true"] + .admin-liste { display: block; }
/* Tastaturbedienung. Bewusst :has(:focus-visible) statt :focus-within: Ein
   Mausklick setzt ebenfalls den Fokus, und mit :focus-within blieb das Menü
   danach offen stehen, bis man irgendwo anders hinklickte. Genau das fühlte
   sich falsch an. :focus-visible zeigt nur die Tastatur an. */
.admin-menue:has(:focus-visible) .admin-liste { display: block; }

.admin-punkte a {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.admin-punkte a:hover { background: var(--surface-2); }
/* Die Zeichen der drei Wege: Raster fürs Backend, Stift für den Beitrag, Tür
   fürs Abmelden. Blass gehalten — sie führen das Auge an die Zeile, sollen
   aber nicht lauter sein als die Beschriftung. */
.admin-punkte a svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.admin-punkte a:hover svg { stroke: var(--ink-2); }

/* Die Kursanzeige ist keine Handlung, sondern ein Zustand mit zwei
   Möglichkeiten. Als Umschalter gebaut, sieht man das: zwei Felder
   nebeneinander, das geltende hervorgehoben. Zwei Zeilen mit einem Haken
   davor sahen dagegen aus wie zwei weitere Wege. Dieselbe Optik wie die
   Segmentschalter der Ranglisten. */
.admin-punkte .segment-zeile { padding: 2px 14px 6px; }
.menue-segment {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.menue-segment a {
  flex: 1 1 0; justify-content: center; padding: 5px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.menue-segment a:hover { background: none; color: var(--ink); }
/* Gefüllt statt nur getönt wie die Segmentschalter der Ranglisten: Die sitzen
   auf hellgrauem Grund, hier ist der Grund ohnehin weiß, und ein blasses Feld
   wäre vom übrigen Menü kaum zu unterscheiden.

   Die Farbe kommt aus dem Schaltflächenpaar des Projekts: hell ein dunkles
   Blau mit weißer Schrift, dunkel die Umkehrung. Ein dunkles Blau bliebe im
   Dunkelmodus sonst auf dunklem Grund stehen. */
.menue-segment a.on {
  background: var(--cta); color: var(--cta-ink); box-shadow: var(--shadow-sm);
}
.menue-segment a.on:hover { background: var(--cta-hover); color: var(--cta-ink); }
.admin-punkte .kopf {
  padding: 6px 14px 2px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.admin-punkte .trenner { height: 1px; margin: 6px 0; background: var(--line); }

/* Kurszeile von TradingView im Widget-Betrieb. Sie sitzt an der Stelle, an
   der im Archivbetrieb die eigene Kurszahl steht. */
.tv-kurs { min-width: 260px; }
.tv-chart { min-height: 400px; }
/* Die Leiste bringt eigene Höhe mit; sie soll beim Laden nicht springen.
   44 px gilt für das laufende Band (ticker-tape). Die stehende Variante
   (tickers) braucht 78 — wer in tv-widgets.js zurückwechselt, muss diesen
   Wert mitziehen, sonst springt die Seite beim Laden. */
.indexbar #tv-leiste { min-height: 44px; }
.tv-hero { min-height: 260px; }

/* Verweis auf die eigene Aktienseite im Aufmacher — im Widget-Betrieb der
   einzige Weg von der Karte zu uns, deshalb sichtbar als Link gehalten. */
.qc-zur-aktie { color: var(--brand); text-decoration: none; }
.qc-zur-aktie:hover { text-decoration: underline; }

/* ── Ratgeber: Artikelseite ────────────────────────────────────────────────
   Volle Seitenbreite wie überall sonst (.shell), nicht mehr die 1000er-Spalte.
   Das Beitragsbild steht neben dem Titel statt darüber: Über die ganze Breite
   gelegt drückte es den Text unter die Falzkante — man scrollte an einem Bild
   vorbei, bevor der Artikel begann. Rechts läuft eine Leiste mit, die trägt,
   was am Artikel hängt (Gliederung, Wertpapiere, weitere Beiträge). */

/* Spaltenbreite und Abstand der rechten Spalte. Kopf und Textteil teilen sich
   beide Werte, damit das Beitragsbild und die Seitenleiste dieselbe Kante
   haben: Standen sie auf 420 und 340 Pixeln, lief eine sichtbare Stufe durch
   die Seite. Der Abstand ist bewusst knapp — was an Breite übrig bleibt, geht
   in die rechte Spalte statt in den Spalt zwischen den beiden. */
:root{
  --artikel-leiste-breite:400px;
  --artikel-spalt:clamp(28px,3vw,44px);
}

.artikel-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--artikel-leiste-breite));
  gap:var(--artikel-spalt);align-items:center;
  padding:22px 0 30px;margin-bottom:32px;border-bottom:1px solid var(--line);
}
.artikel-kopf.ohne-bild{grid-template-columns:minmax(0,880px)}
.artikel-marken{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-3);margin-bottom:14px}
.artikel-kopf h1{font-size:clamp(28px,3.3vw,42px);line-height:1.1;
  letter-spacing:-.035em;font-weight:800}
.artikel-lead{margin-top:16px;max-width:56ch;font-size:19px;line-height:1.5;color:var(--ink-2)}

/* Feste Bildfläche: Die Redaktion lädt in jedem Seitenverhältnis hoch — ohne
   Zuschnitt bestimmte das höchste Bild die Höhe des ganzen Kopfs. */
.artikel-bild{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.artikel-bild img{width:100%;height:100%;object-fit:cover}

.artikel-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--artikel-leiste-breite);
  gap:var(--artikel-spalt);align-items:start}
.artikel-grid.ohne-leiste{grid-template-columns:minmax(0,1fr)}
.artikel-leiste{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.artikel-leiste .side-card{margin-bottom:0}

/* Ratgeberzeile ohne Kategoriezeile darüber (Seitenleiste der Aktienseite):
   Der Abstand über dem Titel hielt Abstand zur Meta-Zeile — ohne sie stand
   der Titel drei Pixel unter der Bildmitte. */
.grow .txt > h4:only-child{margin-top:0}

/* Das Seitenpadding wandert von der Liste in die Zeile, damit Hover-Fläche und
   Trennlinie bis an den Kartenrand laufen (Maße unten bei den Kartenzeilen). */
.ratgeber-karte .guide-rows{padding:0}

/* Zeilenlänge: Der Fließtext bleibt bei rund 80 Zeichen, auch wenn die Spalte
   breiter ist. Die 18 Pixel Schriftgröße sind dabei nicht nur Lesbarkeit —
   sie füllen bei gleicher Zeichenzahl mehr Breite und lassen weniger Weißraum
   neben dem Text stehen. Was von der Breite lebt (Tabellen, Bilder, Merkkästen)
   bekommt sie über .breit trotzdem. */
.artikel-inhalt{max-width:800px;font-size:18px;line-height:1.7}
.artikel-inhalt > :first-child{margin-top:0}
.artikel-inhalt p{margin:0 0 20px}
.artikel-inhalt h2{font-size:clamp(23px,2.2vw,28px);font-weight:700;letter-spacing:-.025em;
  line-height:1.25;margin:44px 0 14px;scroll-margin-top:96px}
.artikel-inhalt h3{font-size:20px;font-weight:600;letter-spacing:-.015em;
  margin:32px 0 10px;scroll-margin-top:96px}
.artikel-inhalt ul,.artikel-inhalt ol{margin:0 0 18px;padding-left:22px}
.artikel-inhalt li{margin-bottom:7px}
.artikel-inhalt li::marker{color:var(--ink-3)}
.artikel-inhalt blockquote{border-left:3px solid var(--brand);background:var(--bg-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;margin:26px 0;padding:16px 20px;
  color:var(--ink-2);font-size:17px}
.artikel-inhalt blockquote p:last-child{margin-bottom:0}
.artikel-inhalt figure,.artikel-inhalt table,.artikel-inhalt .breit{max-width:none}
.artikel-inhalt figure{margin:26px 0}
.artikel-inhalt figcaption{margin-top:8px;font-size:13px;color:var(--ink-3)}
/* Auf breiten Fenstern kein display:block. Es war fuer das Querscrollen
   gedacht, hebt aber das Tabellenlayout auf: Die Zellen richten sich dann nach
   ihrem Inhalt, und die Trennlinien enden mitten in der Textspalte statt an
   deren Kante. Unterhalb von 700px ist die Tabelle ohnehin breiter als der
   Platz — dort tritt das Scrollen wieder an seine Stelle, und das Strecken
   waere gegenstandslos. */
.artikel-inhalt table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px}
.artikel-inhalt th,.artikel-inhalt td{padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.artikel-inhalt th{font-weight:600;color:var(--ink-2);white-space:nowrap}
.artikel-inhalt hr{border:0;border-top:1px solid var(--line);margin:32px 0}

.artikel-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;max-width:800px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.artikel-fuss p{margin:0;max-width:48ch;font-size:13px;color:var(--ink-3)}

/* Gliederung — leise gehalten, sie ist Wegweiser und nicht Inhalt. */
.gliederung ol{list-style:none;margin:0;padding:6px 0 8px}
.gliederung a{display:block;padding:7px 18px;font-size:13.5px;line-height:1.4;
  color:var(--ink-2);border-left:2px solid transparent}
.gliederung a:hover{color:var(--brand);background:var(--bg-soft);border-left-color:var(--brand)}

/* Wertpapiere zum Artikel: die eine Stelle der Seite, an der Zahlen stehen —
   deshalb zweizeilig mit Kurs und Veränderung statt als bloße Linkliste. */
.wp-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}

/* Kartenzeilen in der Seitenleiste: Wertpapiere zum Artikel und passende
   Ratgeber sind derselbe Baustein, nur anders gefüllt — Maße, Trennlinie und
   Hover kommen deshalb aus einer Regel. Die Fläche greift dieselbe Farbe wie
   der Kartenfuß darunter; --bg-soft hellte im Dunkelmodus nicht auf, sondern
   vertiefte die Zeile gegen die Karte. */
.wp-zeile,
.ratgeber-karte .grow,
.ratgeber-karte .grow:last-of-type{padding:14px 18px;border-bottom:1px solid var(--line)}
.wp-zeile:hover,
.ratgeber-karte .grow:hover{background:var(--surface-2)}
.wp-nm{grid-column:1;grid-row:1;font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-kurs{grid-column:2;grid-row:1;font-size:14px;white-space:nowrap;text-align:right}
.wp-tick{grid-column:1;grid-row:2;display:flex;align-items:center;gap:6px;min-width:0}
.wp-isin{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-zeile .pill{grid-column:2;grid-row:2;font-size:12px;padding:2px 7px}

@media(max-width:1160px){
  .artikel-grid{grid-template-columns:minmax(0,1fr)}
  .artikel-inhalt,.artikel-fuss{max-width:800px}
  /* Die Leiste rutscht unter den Text und legt sich dort nebeneinander. */
  .artikel-leiste{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:16px;align-items:start;margin-top:40px}
}
@media(max-width:700px){
  .artikel-inhalt table{display:block;overflow-x:auto;font-size:15px}
}
@media(max-width:880px){
  .artikel-kopf{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:24px;margin-bottom:26px}
  .artikel-bild{aspect-ratio:16/9}
}

/* ── Ratgeber: Themenseiten ───────────────────────────────────────────────
   Die Liste bleibt so breit wie zuvor, die Themen stehen in der Pillenzeile.
   Eigene Regeln braucht nur die Überschrift der Themenseite. */

/* „Ratgeber / Grundlagen": Der erste Teil ist der Weg zurück. Er steht leiser
   als der Themenname, damit die Überschrift trotz Verweis eine Überschrift
   bleibt und nicht wie eine Brotkrume aussieht. */
.h1-zurueck{color:var(--ink-3);font-weight:700}
.h1-zurueck:hover{color:var(--brand)}
.h1-trenner{margin:0 .38em;color:var(--ink-3);font-weight:400}

/* ── Anmeldeseite der Redaktion ────────────────────────────────────────────
   Eine einzelne Karte in der Seitenmitte. Sie ersetzt das oeffentliche
   WordPress-Frontend, das unter /redaktion/ dieselben Artikel ein zweites Mal
   zeigte, und faengt den Basic-Auth-Dialog ab, der sonst ungeankuendigt kaeme. */

.anmeldeseite{display:flex;justify-content:center;
  padding-top:clamp(36px,7vh,84px);padding-bottom:clamp(56px,12vh,120px)}
.anmelde-karte{width:100%;max-width:420px;padding:34px 32px 28px;text-align:center}
.anmelde-schild{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:16px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand)}
.anmelde-schild svg{width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.anmelde-karte h1{font-size:24px;font-weight:700;letter-spacing:-.03em}
.anmelde-karte p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.anmelde-karte .btn{width:100%;margin-top:6px}

/* Das Formular postet unmittelbar an wp-login.php, siehe templates/anmeldung.php. */
.anmelde-form{margin-top:22px;text-align:left;display:flex;flex-direction:column;gap:6px}
.anmelde-form label{font-size:13px;font-weight:600;color:var(--ink-2)}
.anmelde-form label + input{margin-bottom:10px}
.anmelde-form input[type=text],.anmelde-form input[type=password]{
  height:42px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.anmelde-form input[type=text]:focus,.anmelde-form input[type=password]:focus{
  border-color:var(--brand);outline:2px solid var(--brand-soft);outline-offset:0}
.anmelde-merken{display:flex;align-items:center;gap:8px;margin:2px 0 12px;
  font-size:13.5px;font-weight:400;color:var(--ink-2);cursor:pointer}
.anmelde-merken input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.anmelde-fehler{margin-top:16px;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid var(--down);background:var(--down-soft);color:var(--down);
  font-size:13.5px;line-height:1.45}

/* Zwei Nebenwege nebeneinander unter dem Knopf, keiner davon betont. */
.anmelde-zurueck{display:inline-block;margin:20px 10px 0;font-size:13px;color:var(--ink-3)}
.anmelde-zurueck:hover{color:var(--brand);text-decoration:underline}

/* ── Kopfleiste auf schmalen Geräten ────────────────────────────────────────
   Unter 360 Pixeln rutscht allein der Hell/Dunkel-Knopf ins Klappmenü. Bei 300
   läuft der Kopf mit drei Knöpfen über den rechten Rand, bei 320 bleiben zwölf
   Pixel Luft — die Grenze liegt also dazwischen, und 360 lässt Reserve für
   größere Systemschriften. Der Verwaltungsknopf bleibt stehen, er wird
   häufiger gebraucht als der Themenwechsel. */
.nav-extra { display: none; }

@media (max-width: 360px) {
  .head-actions #themeToggle { display: none; }
  .nav-extra { display: block; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* Zwei Knöpfe nebeneinander statt einer Umschaltzeile: „Dunkle Ansicht" als
   Zeile sagt nicht, was gerade gilt. Hier steht beides da, der geltende
   Zustand ist markiert. Gebaut wie die Segmentschalter der Ranglisten. */
.nav-thema { display: flex; gap: 8px; }
.nav-thema-knopf {
  display: inline-flex; align-items: center; gap: 7px; flex: 1 1 0;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14px; cursor: pointer;
}
.nav-thema-knopf svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Der geltende Zustand. Zwei Regeln, weil „hell" auch dann gilt, wenn gar
   nichts gewählt ist und das System auf hell steht. */
:root:not([data-theme="dark"]) .nav-thema-knopf[data-theme-setzen="light"],
:root[data-theme="dark"] .nav-thema-knopf[data-theme-setzen="dark"] {
  border-color: var(--brand); color: var(--brand); background: var(--brand-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-thema-knopf[data-theme-setzen="light"] {
    border-color: var(--line); color: var(--ink-2); background: var(--surface);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-thema-knopf[data-theme-setzen="dark"] {
    border-color: var(--brand); color: var(--brand); background: var(--brand-soft);
  }
}

/* ── Lange Menüs scrollen in sich selbst ────────────────────────────────────
   Wurde das Klappmenü höher als der Bildschirm, scrollte darunter die Seite
   weiter und das Menü blieb stehen: Man kam an die unteren Punkte nicht heran.
   Jetzt begrenzt es seine Höhe und scrollt selbst; die Seite dahinter sperrt
   app.js, solange es offen steht. */
@media (max-width: 1180px) {
  .mainnav { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 720px) {
  .mainnav { max-height: calc(100dvh - 60px); }
}
body.menue-offen { overflow: hidden; }

/* Dasselbe für das Verwaltungsmenü im Kopf: Mit acht Einträgen reicht es auf
   einem kleinen Gerät sonst über den unteren Rand hinaus. */
.admin-liste { max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }

/* ── Einwilligung: Banner, Dialog, Platzhalter ──────────────────────────── */
/* Das Banner sitzt unten und legt sich nicht ueber die Seite. Eine Sperrschicht
   waere bequemer zu bauen, drueckt die Zustimmung aber heraus, statt sie
   einzuholen, und haelt jemanden auf, der nur den Ratgeber liest.

   "Alle annehmen" und "Alle ablehnen" tragen beide .btn-primary: gleiche
   Groesse, gleiche Farbe, gleiches Gewicht. Ein zurueckgenommenes Ablehnen ist
   der haeufigste Grund, aus dem solche Abfragen beanstandet werden. */
.ew-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding:16px 22px;
  background:var(--surface);border-top:1px solid var(--line-2);
  box-shadow:0 -8px 24px rgba(16,28,44,.10);
}
.ew-banner-text{flex:1 1 420px;min-width:0}
.ew-banner-text strong{display:block;font-size:14.5px;margin-bottom:3px}
.ew-banner-text p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ew-banner-text a{color:var(--brand)}
.ew-banner-knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ew-banner-mehr{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.ew-banner-mehr:hover{color:var(--ink);background:var(--surface-2)}
@media(max-width:620px){
  .ew-banner{padding:14px 16px;gap:12px}
  .ew-banner-knoepfe{width:100%}
  /* Basis 0 statt auto: Sonst bemessen sich Ablehnen und Annehmen nach ihrer
     Textlaenge und stehen neun Pixel verschieden breit nebeneinander. Gleiche
     Gewichtung ist hier keine Geschmacksfrage. */
  .ew-banner-knoepfe .btn{flex:1 1 0}
  /* Einstellungen nimmt die erste Zeile allein, damit Ablehnen und Annehmen
     als Paar auf der zweiten stehen. Liesse man umbrechen, wie es faellt,
     bliebe Annehmen allein auf voller Breite unten stehen und waere damit das
     auffaelligste Element der Leiste — genau die Ungleichheit, die der Aufbau
     vermeidet. */
  /* Mit dem Elternteil davor, sonst gewinnt .ew-banner-knoepfe .btn oben mit
     seinen zwei Klassen und der Knopf bleibt in der Zeile stehen. */
  .ew-banner-knoepfe .ew-banner-mehr{flex:1 1 100%}
}

.ew-schatten{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(16,28,44,.45);
}
.ew-dialog{
  width:min(560px,100%);max-height:86vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:24px 26px;
}
.ew-dialog h2{font-size:18px;margin:0 0 6px}
.ew-dialog-sub{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ew-zweck{padding:14px 0;border-top:1px solid var(--line)}
.ew-zweck-kopf{display:flex;align-items:center;gap:10px;cursor:pointer}
.ew-zweck-titel{font-size:14.5px;font-weight:600}
.ew-zweck-text{margin:7px 0 4px 26px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ew-zweck-meta{margin:0 0 0 26px;font-size:12.5px;color:var(--ink-3)}
.ew-dialog-knoepfe{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ew-dialog-knoepfe .btn:not(.btn-primary){
  background:transparent;border-color:var(--line-2);color:var(--ink-2);
}

/* Platzhalter an der Stelle, an der das Widget staende. Drei Formate, weil der
   Platz drei verschiedene ist: das Laufband misst 44 Pixel und traegt genau
   eine Zeile, die Kurszeile eine flache Box, der Chart einen Block. */
.ew-platzhalter{
  display:flex;align-items:center;gap:16px;
  background:var(--surface-2);border:1px dashed var(--line-2);
  border-radius:var(--r-sm);
}
.ew-platzhalter .ew-ph-text{flex:1 1 auto;min-width:0}
.ew-platzhalter p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ew-platzhalter a{color:var(--brand)}
.ew-platzhalter .ew-ph-knopf{flex:0 0 auto;height:34px;padding:0 14px;font-size:13.5px}

/* Das Laufband: Satz und Knopf stehen zusammen in der Mitte, wie die Eintraege
   des Bandes, das hier sonst laeuft. Der Text traegt deshalb kein flex:1 — das
   schoebe den Knopf an den rechten Rand. */
.ew-zeile{
  height:44px;padding:0 16px;border-radius:0;border-left:0;border-right:0;
  font-size:13px;color:var(--ink-2);overflow:hidden;justify-content:center;
}
.ew-zeile .ew-ph-text{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ew-zeile .ew-ph-knopf{height:28px;padding:0 12px;font-size:13px}

/* Die Kurszeile sitzt im Kopf der Detailseite in .stock-right, das sich per
   margin-left:auto nach rechts schiebt und nur so breit wird wie sein Inhalt.
   Ein Platzhalter mit vollstaendigem Text geriet dadurch dreiviertelbreit und
   stand weder neben dem Namensblock noch unter ihm.
   Mit Platzhalter darin nimmt die Spalte deshalb die volle Breite und bricht
   unter den Namensblock. Verkuerzen waere die Alternative gewesen, aber der
   Text muss Empfaenger und Drittland nennen, sonst ist die Einwilligung nicht
   wirksam — dafuer ist neben dem Namen kein Platz. */
.stock-right:has(.ew-platzhalter){width:100%;margin-left:0;align-items:stretch}
.ew-box{padding:16px 18px;flex-wrap:wrap}
.ew-box .ew-ph-text strong{font-size:14.5px}
.tv-kurs:has(.ew-platzhalter){min-width:0}

/* Der Block fuellt die Chartflaeche ganz aus, statt als flacher Kasten darin zu
   schweben: .tv-chart bringt 400 Pixel min-height mit, und ein Kasten von 150
   liess den Rest als Loch stehen. Fuer height:100% braucht das Elternelement
   eine aufgeloeste Hoehe — min-height allein genuegt nicht —, deshalb wird der
   Behaelter zum Flex-Container und das Kind streckt sich darin. */
.tv-chart:has(.ew-block),
.tv-hero:has(.ew-block){display:flex}
.ew-block{
  flex:1 1 auto;padding:22px 24px;gap:14px;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
/* Die Grundregel gibt dem Text flex:1, damit er in der Zeile den Platz bis zum
   Knopf einnimmt. In der Spalte wuerde er damit in die Hoehe wachsen und den
   Knopf an den unteren Rand druecken — Text oben, Knopf unten, dazwischen ein
   Loch. Hier zaehlt deshalb nur die Eigengroesse. */
.ew-block .ew-ph-text{flex:0 0 auto}
.ew-block .ew-ph-text strong{font-size:15px}
.ew-block p{max-width:62ch;margin-left:auto;margin-right:auto}

@media(max-width:620px){
  .ew-zeile{height:auto;padding:10px 14px;flex-wrap:wrap;gap:10px}
  .ew-zeile .ew-ph-text{white-space:normal}
}