#ownerPortalModule .hg-dashboard-articles {
  margin-top: 18px;
}

#ownerPortalModule .hg-dashboard-articles--footer {
  margin-top: 22px;
  margin-bottom: 6px;
}

#ownerPortalModule .hg-dashboard-articles.hidden {
  display: none;
}

#ownerPortalModule .hg-article-related {
  margin-top: 0;
  padding: 20px 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(210, 218, 230, 0.85);
  background: linear-gradient(180deg, #fffdfb 0%, #faf9f7 100%);
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.06);
}

#ownerPortalModule .hg-article-related h2 {
  margin: 0 0 0.35rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 800;
  color: #101318;
}

#ownerPortalModule .hg-article-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0.85rem;
}

@media (max-width: 960px) {
  #ownerPortalModule .hg-article-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #ownerPortalModule .hg-article-related__grid {
    grid-template-columns: 1fr;
  }
}

#ownerPortalModule .hg-article-related__link {
  display: block;
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  color: #101318;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(210, 218, 230, 0.9);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.15s;
}

#ownerPortalModule .hg-article-related__link:hover {
  border-color: rgba(255, 145, 29, 0.38);
  box-shadow: 0 12px 28px rgba(255, 145, 29, 0.1);
  transform: translateY(-1px);
  color: #c45f08;
}

#ownerPortalModule .hg-article-related__link small {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 500;
  color: #5e6675;
}

#ownerPortalModule .hg-article-related__link--all {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(255, 244, 232, 0.65) 0%, #fff 100%);
}

html[data-color-mode="dark"] #ownerPortalModule .hg-article-related {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #151a22 0%, #11161d 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

html[data-color-mode="dark"] #ownerPortalModule .hg-article-related h2 {
  color: #e9edef;
}

html[data-color-mode="dark"] #ownerPortalModule .hg-article-related__link {
  color: #e9edef;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-color-mode="dark"] #ownerPortalModule .hg-article-related__link small {
  color: #8696a0;
}

html[data-color-mode="dark"] #ownerPortalModule .hg-article-related__link:hover {
  color: #ffb86a;
  border-color: rgba(255, 145, 29, 0.35);
}

/* 20260912: hg-article.css/wissen.css (von der oeffentlichen Artikel-Seite
   nachgeladen, siehe hgRenderDashboardArticles) setzen fuer Titel/Tags/Nav
   "Plus Jakarta Sans"/"Inter" ohne die im Dashboard sonst ueberall genutzte
   System-Fallback-Kette - da hausgurus-fonts.css (die @font-face-Deklarationen)
   im Dashboard-Build nicht eingebunden ist, greift sofort der browsereigene
   generische sans-serif-Font, der sichtbar anders aussieht als der Rest der
   Seite ("Schriftart oben nicht korrekt"). Hier mit hoeherer Spezifitaet
   (#ownerDashboardArticlesMount-Praefix) auf dieselbe Fallback-Kette wie
   .hg-title/.hg-header (-apple-system/Segoe UI/Roboto) gezogen. */
#ownerDashboardArticlesMount .hg-artikel-card__title,
#ownerDashboardArticlesMount .hg-artikel-card__tag,
#ownerDashboardArticlesMount .hg-artikel-card__row-tag,
#ownerDashboardArticlesMount .hg-artikel-hub-group__title,
#ownerDashboardArticlesMount .hg-artikel-hub-nav__link,
#ownerDashboardArticlesMount .hg-artikel-card__spotlight-kicker {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 20260913: vorher auf schmalen Bildschirmen eine horizontal scrollende
   Reihe (flex-wrap:nowrap + overflow-x:auto) - Nutzer-Feedback: "in einem
   Wrap-Layout hintereinander/untereinander platzieren, sodass man nicht
   horizontal scrollen muss". Jetzt stattdessen echtes Umbruch-Layout
   (flex-wrap:wrap): die Themen-Pills brechen bei Bedarf in mehrere Zeilen
   um, kein Scroll-Container mehr noetig. */
@media (max-width: 640px) {
  #ownerDashboardArticlesMount .hg-artikel-hub-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    margin: 0;
  }
  #ownerDashboardArticlesMount .hg-artikel-hub-nav__link {
    flex: 0 1 auto;
    padding: 7px 12px;
    font-size: 0.76rem;
  }
}

/* 20260913 Bugfix "Ratgeber Layout zerschossen": #ownerDashboardArticlesMount
   sitzt als Grid-Item in .hg-owner-page-content (display:grid) - Grid-Items
   wachsen per CSS-Default (min-width:auto) auf die Content-Breite ihres
   groessten NICHT umbrechenden Nachfahren, statt auf die verfuegbare
   Spaltenbreite geschrumpft zu werden ("Grid Blowout"). Hier war das die
   Spotlight-Karte/Pill-Reihe aus hg-article.css, fuer die volle Desktop-
   Breite gedacht - dadurch wurde der GESAMTE Mount (und damit auch alle
   Artikel-Kartentexte) auf ~560px aufgeblaeht und rechts von .hg-surface
   (overflow:hidden) abgeschnitten, statt zu umbrechen. min-width:0 auf der
   gesamten Kette erzwingt, dass jede Ebene wieder auf die tatsaechlich
   verfuegbare Breite schrumpft. */
#ownerDashboardArticlesMount,
#ownerDashboardArticlesMount .hg-artikel-magazine,
#ownerDashboardArticlesMount .hg-artikel-hub-spotlight,
#ownerDashboardArticlesMount .hg-artikel-hub-group,
#ownerDashboardArticlesMount .hg-artikel-hub-group__grid,
#ownerDashboardArticlesMount .hg-artikel-card,
#ownerDashboardArticlesMount .hg-artikel-card__row-body,
#ownerDashboardArticlesMount .hg-artikel-card__spotlight-main {
  min-width: 0;
  max-width: 100%;
}
/* 20260913 Responsive-Korrektur: die Spotlight-Umschaltung (Reihe -> Spalte)
   griff bisher IMMER, unabhaengig von der Breite - dadurch blieb die
   Spotlight-Karte auch auf Tablet/Desktop (wo die Karte selbst 700px+ breit
   ist und die urspruengliche Zeilen-Anordnung aus hg-article.css problemlos
   passt) unnoetig in die schmale Mobile-Spaltenform gezwaengt. Jetzt an
   denselben Breakpoint gekoppelt, den hg-article.css selbst fuer diese
   Umschaltung nutzt (@media max-width:640px) - oberhalb bleibt die
   urspruengliche, breitere Zeilen-Darstellung erhalten. */
@media (max-width: 640px) {
  #ownerDashboardArticlesMount .hg-artikel-card--spotlight {
    flex-direction: column;
    align-items: stretch;
  }
  #ownerDashboardArticlesMount .hg-artikel-card__spotlight-kicker {
    writing-mode: horizontal-tb;
    transform: none;
  }
  #ownerDashboardArticlesMount .hg-artikel-card__spotlight-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* 20260913 (Korrektur): der vorherige Versuch gegen "zu viele Aussenboxen"
   hatte JEDER einzelnen Artikelzeile ihre eigene Karten-Optik aus
   hg-article.css genommen (Rand/Radius/Schatten entfernt, Trennlinie statt
   Box). Nutzer-Korrektur: gemeint war NUR die AEUSSERSTE Box (die ganze
   Ratgeber-Karte inkl. Kopf+Liste) - die einzelnen Artikel sollen wieder
   ihre eigene Box haben wie vorher. Diese Zeilen-Flachklopf-Regeln daher
   komplett entfernt; jede Artikelzeile nutzt wieder unveraendert die
   Standard-Kartenoptik aus hg-article.css (Rand, linker Akzentrand, Radius,
   Schatten). Der Aussenrahmen wird stattdessen direkt an
   .hg-owner-ratgeber-card in login_dashboard.html entfernt. */

/* 20260913 "Fachartikel im Dashboard oeffnen statt neue Seite": der Lese-
   Bereich (#ownerArticleReaderMount) sitzt in derselben Ratgeber-Karte wie
   #ownerDashboardArticlesMount und zeigt einen per fetch() nachgeladenen
   Artikel (.hg-wissen-hero__inner + .hg-wissen-main + .hg-article-related)
   inline an. Beide Seiten der bereits fuer die oeffentliche Artikel-Seite
   geschriebenen CSS (wissen.css/hg-article.css) sind bereits auf schmale
   Viewports responsiv (@media-Breakpoints richten sich nach der echten
   Bildschirmbreite, nicht der Kartenbreite) - hier nur Karten-Einbettung,
   Zurueck-Button und defensive min-width:0-Kette fuer den engeren
   Karten-Kontext. */
#ownerArticleReaderMount {
  padding: 6px 14px 14px;
}
#ownerArticleReaderMount.hidden {
  display: none;
}
/* 20260913: auf Mobile sass "Zurueck zur Uebersicht" zu dicht unter der
   Trennlinie des Ratgeber-Kopfes (nur 6px Abstand) - etwas mehr Luft, nur
   fuer Mobile (Desktop/Tablet unveraendert). */
@media (max-width: 768px) {
  #ownerArticleReaderMount {
    padding-top: 14px;
  }
}
.hg-owner-article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210, 218, 230, 0.95);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hg-owner-article-back:hover {
  border-color: rgba(255, 145, 29, 0.45);
  color: #c45f08;
}
.hg-owner-article-loading,
.hg-owner-article-error {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: #5e6675;
  padding: 8px 2px;
}
.hg-owner-article-body,
.hg-owner-article-body .hg-wissen-hero__inner,
.hg-owner-article-body .hg-wissen-main,
.hg-owner-article-body .hg-article-related {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hg-owner-article-body .hg-owner-article-hero.hg-wissen-hero {
  padding: 0 0 10px;
  background: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  overflow-x: visible;
}
.hg-owner-article-body .hg-wissen-hero__inner {
  text-align: left;
  width: 100%;
}
.hg-owner-article-body .hg-wissen-badge {
  margin-bottom: 0.6rem;
}
/* 20260913 "Ueberschrift/Untertext/Bubbles oben linksbuendig": .hg-wissen-
   hero__inner selbst ist bereits links ausgerichtet (siehe oben), aber der
   Lead-Absatz traegt zusaetzlich die Klasse .hg-article-lead, die in
   hg-article.css EXPLIZIT text-align:center setzt (eine direkte Regel auf
   dem Element selbst schlaegt jede geerbte Ausrichtung, unabhaengig von der
   Spezifitaet der Vorfahren-Regel) - deshalb blieb ausgerechnet der
   Einleitungstext trotzdem zentriert, waehrend Titel/Badges/Meta-Zeile
   bereits links standen. */
.hg-owner-article-body .hg-article-lead {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* 20260913 "Ratgeber-Kategorien auf Mobile platzsparender": die vier
   Themen-Chips (Einstieg & Orientierung / Vorbereitung & Vermarktung /
   Besondere Situationen / Kosten, Steuer & Energie) sind bereits ein
   Wrap-/Chip-Layout (hg-article.css: display:flex;flex-wrap:wrap), landeten
   auf schmalen Bildschirmen aber wegen der langen vollen Labels trotzdem
   praktisch immer einzeln je Zeile (gemessen: 212-255px Chip-Breite bei nur
   ~301px Container-Breite - fuer zwei Chips pro Zeile reicht das bei vollem
   Text nicht, unabhaengig von Padding/Schriftgroesse). Fix: auf Mobile ein
   kompaktes KURZ-Label einblenden (voller Name bleibt als aria-label auf dem
   Link und als sichtbare Abschnitts-Ueberschrift direkt darunter erhalten,
   also kein Informationsverlust) plus kleineres Padding/Schrift/Abstand -
   dadurch passen regelmaessig zwei Chips pro Zeile, deutlich weniger
   vertikaler Platzverbrauch, ohne Text abzuschneiden oder horizontal zu
   scrollen. Desktop/Tablet (>640px) bleiben unveraendert (volles Label, wie
   bisher). */
#ownerDashboardArticlesMount .hg-artikel-hub-nav__label-short {
  display: none;
}
@media (max-width: 640px) {
  #ownerDashboardArticlesMount .hg-artikel-hub-nav {
    gap: 6px;
  }
  #ownerDashboardArticlesMount .hg-artikel-hub-nav__label-full {
    display: none;
  }
  #ownerDashboardArticlesMount .hg-artikel-hub-nav__label-short {
    display: inline;
  }
  #ownerDashboardArticlesMount .hg-artikel-hub-nav__link {
    padding: 6px 10px;
    font-size: 0.74rem;
    gap: 5px;
  }
  #ownerDashboardArticlesMount .hg-artikel-hub-nav__count {
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: 0.62rem;
  }
}

/* 20260913 Nachtrag zu "Titel/Untertext/Bubbles linksbuendig": die Meta-
   Bubbles (Lesezeit/Aktualisiert/Fuer Eigentuemer) blieben trotz der
   vorherigen Lead-Absatz-Korrektur weiterhin zentriert, weil sie NICHT ueber
   text-align ausgerichtet werden, sondern .hg-article-meta ein Flex-
   Container mit justify-content:center ist (hg-article.css) - eine ganz
   andere CSS-Achse, von der text-align:left-Vererbung unberuehrt. */
.hg-owner-article-body .hg-article-meta {
  justify-content: flex-start;
}

/* 20260913 Fehlerkorrektur: .hg-wissen-fold ("Wertbeeinflussende Faktoren"
   u. ae.) wird im Dashboard-Lesebereich per JS (hg-dashboard-articles.js)
   dauerhaft offen gehalten und das Zuklappen per Klick abgefangen - das
   "+/-"-Symbol aus wissen.css suggerierte trotzdem weiterhin eine
   Klick-Interaktion, die hier nicht mehr existiert. Ausgeblendet, analog
   zur bereits bestehenden Desktop-Darstellung auf der oeffentlichen Seite
   (.hg-wissen-fold--desktop-open > summary::after { display:none; }). */
.hg-owner-article-body .hg-wissen-fold > summary::after {
  display: none;
}