/* Typografie und Layout der Beitragsseiten (Relaunch).
   Im WordPress-Original gab es für den Beitragsinhalt kein eigenes CSS — alles kam
   aus den Kadence-Defaults (Roboto 16px/1.6, Montserrat für Überschriften). Diese
   Datei setzt darauf auf: ruhigerer Lesefluss, klare Gliederungshierarchie und
   Markenakzente aus der Theme-Palette (--global-palette1 #ffb424, palette3 #19333f).

   Verfügbare Schriftschnitte sind Montserrat 700 sowie Roboto 400/700 — andere
   Gewichte würde der Browser nur künstlich verzerren, deshalb kommen hier
   ausschließlich diese drei vor.

   Gescopet wird über .entry-content-html > … (Kindselektoren): so bleiben
   Ninja-Tables und das Inhaltsverzeichnis mit ihrem eigenen CSS außen vor, weil
   deren Innenleben nie direktes Kind ist. Die wp-review-Box bekommt weiter
   unten einen eigenen Abschnitt mit #review-Anker (s. dort). */

.entry-content-html {
  --post-accent: #ffb424;
  --post-ink: #19333f;
  --post-text: #333f4d;
  --post-muted: #6b7785;
  --post-link: #1a6d93;
  --post-rule: #e3e9f0;
  --post-surface: #f7fafc;
}

/* --- Fließtext ------------------------------------------------------------ */
.entry-content-html > p {
  margin: 0 0 1.4em;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--post-text);
}
.entry-content-html > p:last-child { margin-bottom: 0; }
.entry-content-html strong { font-weight: 700; color: var(--post-ink); }

/* --- Überschriften -------------------------------------------------------- */
/* .imgh2 ist der Flex-Wrapper aus dem Original, in dem ein Icon links neben der
   Überschrift steht — dort sitzt das h2 eine Ebene tiefer. */
.entry-content-html > h2,
.entry-content-html > .imgh2 > h2 {
  margin: 0 0 0.7em;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--post-ink);
}
.entry-content-html > h2 { margin-top: 2.2em; }
.entry-content-html > .imgh2 { margin: 2.2em 0 0.7em; gap: 12px; }
.entry-content-html > .imgh2 > h2 { margin: 0; }
/* Kurzer Akzentstrich über der Überschrift — im Icon-Fall übernimmt das Icon
   diese Rolle, dort bleibt er weg. */
.entry-content-html > h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 0.55em;
  border-radius: 2px;
  background: var(--post-accent);
}
.entry-content-html > h2:first-child { margin-top: 0; }
/* In den migrierten Beiträgen stecken 15 Überschriften, die statt Text nur ein Bild
   enthalten (so wurden Titelbilder im Original platziert) — dort wäre der Strich
   ein sinnloser Balken über einer Grafik. */
/* Bewusst zwei Regeln: kennt ein Browser :has() nicht, verwirft er die komplette
   Selektorliste — die first-child-Regel soll davon unabhängig greifen. */
.entry-content-html > h2:first-child::before { display: none; }
.entry-content-html > h2:has(img)::before { display: none; }

.entry-content-html > h3 {
  margin: 1.9em 0 0.6em;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--post-ink);
}
.entry-content-html > h4,
.entry-content-html > h5 {
  margin: 1.6em 0 0.5em;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--post-ink);
}

/* --- Links ---------------------------------------------------------------- */
.entry-content-html > p a,
.entry-content-html > ul a,
.entry-content-html > ol a,
.entry-content-html > table a,
.entry-content-html > .ninja-table-wrap a {
  color: var(--post-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(26, 109, 147, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.entry-content-html > p a:hover,
.entry-content-html > ul a:hover,
.entry-content-html > ol a:hover,
.entry-content-html > table a:hover,
.entry-content-html > .ninja-table-wrap a:hover {
  color: var(--post-ink);
  text-decoration-color: var(--post-accent);
}

/* --- Listen --------------------------------------------------------------- */
.entry-content-html > ul,
.entry-content-html > ol {
  margin: 0 0 1.5em;
  padding-left: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--post-text);
}
.entry-content-html > ul { list-style: none; }
.entry-content-html > ul > li {
  position: relative;
  margin-bottom: 0.55em;
  padding-left: 1.6em;
}
/* Aufzählungspunkt in der Akzentfarbe statt Browser-Bullet */
.entry-content-html > ul > li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--post-accent);
}
.entry-content-html > ol { padding-left: 1.4em; }
.entry-content-html > ol > li { margin-bottom: 0.55em; padding-left: 0.3em; }
.entry-content-html > ol > li::marker { color: var(--post-link); font-weight: 700; }

/* --- Bilder und Video ------------------------------------------------------ */
.entry-content-html img { max-width: 100%; height: auto; }
/* Nur großformatige Inhaltsbilder abrunden — die kleinen Icons in .imgh2 und
   inline im Text bleiben unangetastet. */
.entry-content-html > p > img.aligncenter,
.entry-content-html > p > img.size-full,
.entry-content-html > figure img,
.entry-content-html > .video-container {
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(25, 51, 63, 0.08), 0 18px 40px -28px rgba(25, 51, 63, 0.5);
}
.entry-content-html > .video-container { margin: 1.8em 0 2em; }
.entry-content-html > figure { margin: 1.8em 0 2em; }
/* Hochformatige Screenshots bekommen eine feste Breite (style="width: …"), damit
   sie die Textspalte nicht über die volle Höhe blockieren. Ohne margin:auto
   stünden sie dann links statt mittig — .aligncenter liefert im portierten
   WP-CSS nur text-align, keinen Außenabstand. */
.entry-content-html > figure.aligncenter { margin-left: auto; margin-right: auto; }
.entry-content-html figcaption,
.entry-content-html .wp-caption-text {
  margin-top: 0.7em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--post-muted);
  text-align: center;
}

/* --- Tabellen ------------------------------------------------------------- */
/* Schmale Viewports: die Tabelle scrollt in sich, statt das Grid zu sprengen. */
.entry-content-html > table,
.entry-content-html > .ninja-table-wrap {
  display: block;
  width: 100%;
  margin: 1.8em 0 2em;
  overflow-x: auto;
}
.entry-content-html > table {
  border-collapse: collapse;
  font-size: 1rem;
}
.entry-content-html > table th,
.entry-content-html > table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--post-rule);
  text-align: left;
  vertical-align: top;
}
.entry-content-html > table thead th {
  background: var(--post-surface);
  border-bottom: 2px solid var(--post-accent);
  color: var(--post-ink);
  font-weight: 700;
  white-space: nowrap;
}
.entry-content-html > table tbody tr:last-child td { border-bottom: 0; }

/* --- Trenner -------------------------------------------------------------- */
.entry-content-html > hr {
  height: 1px;
  margin: 2.4em 0;
  border: 0;
  background: var(--post-rule);
}

/* --- wp-review-Box (Produktbewertungen) ------------------------------------
   Das Plugin-CSS (wp-review.css) liefert nur das Grundgerüst — Sterne-Icons,
   Flex-Raster für Pros/Cons, Zebra-Streifen. Look kommt von hier: abgerundete
   Karte statt offener Ecken, ruhigere Zeilen, ein echter CTA-Button.

   #review als ID-Anker: jede Box hat diese ID, und pro Post generiert die
   Migration ein eigenes <style> (aus box-templates/*.php, reine Klassen-
   Selektoren wie „.wp-review-3771 .review-title"). Nur ein ID-Selektor schlägt
   das zuverlässig, ganz ohne !important. Ausnahme: die Pros/Cons-Farben und der
   Karten-Radius stehen in theme.css mit !important (bewusste Gestaltung der
   Original-Site) — dort inzwischen als eine Regel für alle Boxen statt als
   Liste einzelner Beitrags-IDs.

   Seit August 2026 liefert migration/lib/wp-review.js für jeden Beitrag
   dasselbe Box-Template und dieselbe Farbpalette (siehe UNIFORM_COLORS dort);
   hier steht deshalb nur noch ein Look, nicht mehr eine Sammlung von
   Sonderfällen je Beitrag. */
#review.review-wrapper {
  overflow: hidden; /* rundet auch Header/Footer-Flächen mit ab, die sonst als
                        eckige Kanten aus der abgerundeten Karte ragen */
  border: 1px solid var(--post-rule);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(25, 51, 63, 0.08), 0 18px 40px -28px rgba(25, 51, 63, 0.5);
  margin: 2em 0 2.4em;
}

#review .review-title {
  /* Überschreibt sowohl das Plugin-Default (background-color:#f6f6f6) als auch
     die pro Post generierte Hintergrundfarbe (bgcolor1) — hier bewusst fest,
     damit der Karten-Header unabhängig von der Post-Farbwahl dunkel bleibt. */
  background: var(--post-ink);
  padding: 18px 24px;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Grundraster der Box: Kriterienliste links, Gesamtnote rechts daneben.
   Das stand bisher nur im <style>-Block, den die Migration pro Beitrag aus dem
   Plugin-Template erzeugt. Die beiden neu geschriebenen Beiträge (LinkedIn
   Learning, ZEIT Akademie) tragen ihre Box fest im HTML und haben keinen
   solchen Block — bei ihnen lief die Liste über die volle Breite und die Note
   rutschte darunter. Hier gilt es jetzt für jede Box, egal woher sie kommt. */
#review.review-wrapper .review-list {
  clear: none;
  float: left;
  width: 60%;
  border-top: 1px solid var(--post-rule);
}
#review.review-wrapper .review-total-wrapper {
  clear: none;
  float: right;
  width: 40%;
  margin: 0;
  border-top: 1px solid var(--post-rule);
  border-left: 1px solid var(--post-rule);
  text-align: center;
}
#review.review-wrapper .review-pros-cons {
  clear: both;
  padding: 0;
  border-top: 1px solid var(--post-rule);
}
#review.review-wrapper .review-list li {
  border-bottom: 1px solid var(--post-rule);
}
#review.review-wrapper .review-list li:last-child { border-bottom: 0; }
/* Zebrastreifen in der Blaufamilie des Beitrags statt im Plugin-Grau. */
#review.review-wrapper .review-list li:nth-child(2n) { background: #f4f8fc; }

/* Kriterienzeilen: Beschriftung links, Sterne rechts — und zwar in einer
   Spalte. Mit „justify-content: space-between" hing die Sternreihe an der
   Beschriftung und begann in jeder Zeile woanders, sobald eine Beschriftung
   länger war (und komplett, wenn ein <strong> aus dem Dump beide zu einem
   einzigen Flex-Kind zusammenfasste, s. transform.js → MARKER_IN_P). Ein Raster
   mit fester Sternspalte kann das nicht passieren: --review-stars ist so breit
   wie fünf Sterne bei 15px und 0.14em Sperrung, die Spalte steht deshalb in
   jeder Zeile an derselben Stelle. */
#review .review-list {
  --review-stars: 122px;
}
#review .review-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--review-stars);
  align-items: center;
  gap: 16px;
  padding: 13px 24px;
}
#review .review-list li > span {
  font-weight: 600;
  color: var(--post-ink);
}
/* word-spacing statt letter-spacing: Die Sterne-Icons sind im migrierten
   Markup durch echte Leerzeichen getrennt (migration/lib/wp-review.js,
   STAR_ICONS). letter-spacing legt auch hinter das letzte Icon noch Abstand —
   dadurch passt die Breite, auf die sich die width:NN%-Überlagerung der
   Teil-Sterne bezieht, nicht mehr exakt zur sichtbaren Sternreihe, und beide
   Reihen können je nach Zoom/Skalierung sichtbar auseinanderdriften.
   word-spacing vergrößert nur die Lücken zwischen den Sternen. */
#review .review-star .review-result-wrapper {
  font-size: 15px;
  word-spacing: 0.14em;
}
/* Das Plugin lässt die Sterne rechts floaten (.review-list .review-star).
   Im Raster ist der Float wirkungslos, die feste Spaltenbreite ersetzt ihn. */
#review .review-list .review-star {
  float: none;
  width: var(--review-stars);
}

#review .review-total-wrapper {
  padding: 20px 24px 4px;
}
#review .review-total-box {
  /* volle Ersetzung des Plugin-Defaults (padding: 35px 0 20px) — sonst
     addiert sich dessen großzügiger Innenabstand mit dem des Wrappers.
     text-align: right stammt ebenfalls von dort und ließ Zahl und Beschriftung
     an der rechten Kante kleben, während die Sterne darunter mittig standen. */
  padding: 0 0 6px;
  text-align: center;
}
/* Alle Boxen laufen inzwischen über das Template „edge": die Zahl steckt in
   einem <div> neben einem <h5>Insgesamt</h5>. Der span-Selektor bleibt für die
   Variante „default" stehen, falls doch einmal eine Box darauf zurückfällt —
   in beiden Fällen soll nur die Zahl groß werden, sonst wächst „Insgesamt"
   auf Zahlengröße mit. */
#review span.review-total-box,
#review .review-total-box > div {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--post-ink);
}
#review .review-total-box h5 {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--post-link);
}
#review .review-star.review-total .review-result-wrapper {
  font-size: 16px;
}

#review .review-desc {
  padding: 2px 24px 22px;
}
#review .review-summary-title {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--post-link);
}
#review .review-desc p {
  line-height: 1.7;
}

#review .review-pros-cons .mb-5 {
  /* Das Template setzt hier text-transform: uppercase. Bei „PROS"/„CONS" fiel
     das nicht auf, „DAS SPRICHT DAFÜR" schreit dagegen. */
  margin-bottom: 12px;
  text-transform: none;
}
#review .review-pros-cons .mb-5 strong {
  font-size: 0.95rem;
}
/* Daumen vor der Überschrift und Haken bzw. Kreuz vor jedem Punkt kommen als
   FontAwesome-::before aus dem Plugin-CSS, mit opacity 0.7 bzw. 0.4. Auf dem
   dunklen Pro-Feld verschwanden sie damit fast. */
#review .review-pros-cons .mb-5 strong::before { opacity: 0.9; }
#review .review-pros-cons .review-pros ul li::before { opacity: 0.75; }
#review .review-pros-cons .review-cons ul li::before { opacity: 0.55; }
#review .review-pros,
#review .review-cons {
  padding: 20px 24px 26px;
}
#review .review-pros-cons ul li,
#review .review-pros-cons ol li {
  padding: 6px 0 6px 22px;
  line-height: 1.55;
}
/* Das Pro-Feld steht auf dunklem Grund (theme.css), die Schrift muss also weiß
   sein. „Farbe erben" reicht dafür nicht: .entry-content-html strong setzt
   var(--post-ink), und in der Coursera- wie der Blinkist-Box steckt jeder
   Pluspunkt in einem <strong> — die Stichpunkte standen deshalb dunkelblau auf
   dunkelblau und waren praktisch unlesbar. Dasselbe galt für den <span> mit
   Inline-Schriftart in der ZEIT-Akademie-Box. Hier deshalb ausdrücklich für
   alle Nachfahren, nicht nur für das Feld selbst. */
#review .review-pros-cons .review-pros,
#review .review-pros-cons .review-pros li,
#review .review-pros-cons .review-pros p,
#review .review-pros-cons .review-pros span,
#review .review-pros-cons .review-pros strong,
#review .review-pros-cons .review-pros em {
  color: #fff;
}
#review .review-pros-cons .review-pros a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
/* Das Contra-Feld liegt auf hellem Grund und behält die Textfarbe des
   Beitrags — auch dort dürfen die <strong> aus dem Dump nicht durchschlagen,
   sonst steht die halbe Liste in einem anderen Ton als die andere Hälfte. */
#review .review-pros-cons .review-cons,
#review .review-pros-cons .review-cons li,
#review .review-pros-cons .review-cons p,
#review .review-pros-cons .review-cons span,
#review .review-pros-cons .review-cons strong,
#review .review-pros-cons .review-cons em {
  color: var(--post-ink);
}

#review .review-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 22px 24px 26px;
  border-bottom: 0;
}
#review .review-links li {
  margin: 0;
}
#review .review-links li a {
  margin: 0;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--dunkelblau, #2c5669);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(44, 86, 105, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#review .review-links li a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(44, 86, 105, 0.7);
}

/* Auf schmalen Screens untereinander statt nebeneinander. Diese Regeln standen
   früher im <style>-Block je Beitrag; ohne sie blieben Liste und Gesamtnote
   auch auf dem Handy bei 60/40, und in der 60-Prozent-Spalte brach jede
   Beschriftung buchstabenweise um ("Kur / se- / und / Th / em / env / ielf"). */
@media (max-width: 767px) {
  #review.review-wrapper .review-list,
  #review.review-wrapper .review-total-wrapper {
    float: none;
    width: 100%;
  }
  #review.review-wrapper .review-total-wrapper {
    padding-bottom: 20px;
    border-left: 0;
  }
  #review.review-wrapper .review-pros-cons .review-pros,
  #review.review-wrapper .review-pros-cons .review-cons {
    flex: 0 0 100%;
  }
}

@media (max-width: 480px) {
  #review .review-title,
  #review .review-list li,
  #review .review-total-wrapper,
  #review .review-desc,
  #review .review-pros,
  #review .review-cons,
  #review .review-links {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* Schmalere Sternspalte, damit „Benutzerfreundlichkeit" daneben noch in eine
     Zeile passt und nicht nach dem vorletzten Buchstaben umbricht. */
  #review .review-list { --review-stars: 104px; }
  #review .review-star .review-result-wrapper {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
}

/* --- Beitragskopf --------------------------------------------------------- */
.single-post .entry-header .entry-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #19333f;
}
.single-post .entry-header {
  margin-bottom: 1.8em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid #e3e9f0;
}
.entry-reading-meta {
  margin: 0.5em 0 0;
  font-size: 0.9rem;
  color: #6b7785;
}

/* --- Grid-Korrektur ------------------------------------------------------- */
/* .has-sidebar .content-container ist ein Grid mit 5fr/2fr. Grid-Items haben per
   Default min-width:auto, also kann breiter Inhalt (Tabelle, Review-Box, langes
   Wort) die erste Spalte aufblähen und die Sidebar aus dem Viewport schieben.
   #secondary bringt min-width:0 schon mit, #main nicht. */
.has-sidebar .content-container > #main { min-width: 0; }

@media (max-width: 767px) {
  .entry-content-html > p,
  .entry-content-html > ul,
  .entry-content-html > ol { font-size: 1rem; }
  .entry-content-html > h2,
  .entry-content-html > .imgh2 > h2 { font-size: 1.5rem; }
  .entry-content-html > h3 { font-size: 1.18rem; }
  .single-post .entry-header .entry-title { font-size: 1.85rem; }
}

/* --- Medien-Text-Block ---------------------------------------------------- */
/* Der Block bringt seine Spaltenaufteilung als Inline-Style mit
   (style="grid-template-columns: 15% auto"), das zugehörige display:grid
   steht jedoch in wp-block-library.css, das nicht mitportiert wurde. Ohne die
   folgenden Regeln lag das Bild in voller Breite über dem Text: aus dem
   kleinen Symbol neben der Zwischenüberschrift wurde auf dem Handy eine
   375px breite Grafik. Inhaltlich das Kern-Stylesheet von WordPress. */
.entry-content-html .wp-block-media-text {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-template-rows: auto;
}

.entry-content-html .wp-block-media-text > .wp-block-media-text__media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.entry-content-html .wp-block-media-text > .wp-block-media-text__content {
  grid-column: 2;
  grid-row: 1;
  padding: 0 8%;
  word-break: break-word;
}

.entry-content-html .wp-block-media-text > .wp-block-media-text__media img,
.entry-content-html .wp-block-media-text > .wp-block-media-text__media video {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  width: 100%;
}

.entry-content-html .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
  grid-column: 2;
}

.entry-content-html .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  grid-column: 1;
}

.entry-content-html .wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__media,
.entry-content-html .wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__content {
  align-self: center;
}

/* theme.css setzt für diesen Block margin: 0, die von Kadence vorgesehenen
   negativen Außenabstände für .alignwide fallen damit weg — die Breite von
   100vw bleibt aber stehen. Auf dem Handy ragte der Block dadurch um die
   Innenabstände des Beitragsrahmens nach rechts heraus (auch auf der
   Live-Site). Innerhalb der Spalte bleibt nichts abgeschnitten. */
.entry-content-html .wp-block-media-text.alignwide {
  width: 100%;
  max-width: 100%;
  padding-right: 0;
}

/* --- Tarifkarten (Preisvergleich in den Plattform-Artikeln) ----------------
   Ersetzt die aus WordPress übernommenen Preistabellen. Die kamen mit
   Inline-Breiten von 33 %, 36 % und 79 % (Summe 149 %) und einer leeren
   Schlusszeile aus dem Editor, waren auf dem Handy nicht lesbar und stellten
   den teuersten Tarif am breitesten dar. Karten stapeln sich stattdessen
   sauber und tragen den Preis dort, wo das Auge zuerst hinfällt. */
.entry-content-html > .preiskarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 1.8em 0 1.1em;
}

.entry-content-html .preiskarte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* schneidet die Kopffläche an den runden Ecken ab */
  border: 1px solid var(--post-rule);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(25, 51, 63, 0.06), 0 18px 40px -30px rgba(25, 51, 63, 0.45);
}

/* Der empfohlene Tarif hebt sich über Rahmenfarbe und Schatten ab, nicht über
   Größe — sonst bricht das Raster auf schmalen Viewports unruhig um. */
.entry-content-html .preiskarte-tipp {
  border-color: var(--post-accent);
  box-shadow: 0 0 0 1px var(--post-accent), 0 18px 40px -26px rgba(25, 51, 63, 0.55);
}

.entry-content-html .preiskarte-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--post-accent);
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--post-ink);
}

.entry-content-html .preiskarte-kopf {
  padding: 16px 18px;
  background: var(--post-ink);
}

.entry-content-html .preiskarte-name {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.entry-content-html .preiskarte-fuer {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #b8c7d0;
}

.entry-content-html .preiskarte-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.entry-content-html .preiskarte-preis {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.entry-content-html .preiskarte-betrag {
  font-family: Montserrat, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--post-ink);
}

.entry-content-html .preiskarte-takt {
  font-size: 0.9rem;
  color: var(--post-muted);
}

.entry-content-html .preiskarte-jahr {
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--post-muted);
}

.entry-content-html .preiskarte-aktion {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff6e3;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #6b4c07;
}

.entry-content-html .preiskarte-rabatt {
  display: block;
  font-weight: 700;
  color: #8a5c00;
}

.entry-content-html .preiskarte-punkte {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--post-rule);
}

.entry-content-html .preiskarte-punkt {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--post-text);
}

/* Häkchen und Kreuz als CSS-Inhalt: keine zusätzliche Schrift, kein Icon-Font,
   und in der Vorlesereihenfolge taucht kein sinnloses Zeichen auf. */
.entry-content-html .preiskarte-punkt::before {
  position: absolute;
  top: 4px;
  left: 0;
  font-weight: 700;
}
.entry-content-html .preiskarte-punkt.ja::before {
  content: "\2713";
  color: #2f7d55;
}
.entry-content-html .preiskarte-punkt.nein::before {
  content: "\2715";
  color: #b04141;
}
.entry-content-html .preiskarte-punkt.nein { color: var(--post-muted); }

.entry-content-html > .preiskarten-fussnote {
  margin: 0 0 1.4em;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--post-muted);
}

/* --- Kategorieraster ------------------------------------------------------
   Für Abschnitte, die das Themenangebot einer Plattform auflisten. Als
   Aufzählung wären das 13 Zeilen, die niemand liest; als Kacheln lässt sich
   die Liste überfliegen und die Kurszahl steht direkt daneben. */
.entry-content-html > .kategorien-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  margin: 1.6em 0 1.5em;
}

.entry-content-html .kategorie-kachel {
  padding: 12px 14px;
  border: 1px solid var(--post-rule);
  border-left: 3px solid var(--post-accent);
  border-radius: 10px;
  background: var(--post-surface);
}

.entry-content-html .kategorie-zahl {
  float: right;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--post-ink);
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.entry-content-html .kategorie-name {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--post-ink);
}

.entry-content-html .kategorie-original {
  display: block;
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--post-muted);
}

.entry-content-html .kategorie-bsp {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--post-text);
}