/*
Theme Name: Blog FSE
Author: BlocksWP
Author URI: https://blocks-wp.com/
Theme URI: https://wp-fse.com/blog-fse/
Description: Blog FSE is a free block based blogging theme for WordPress.
Version: 1.0.1
*/

/* =====================================
   BASE THEME UTILITIES
===================================== */
.have-rounded-courners { border-radius: 15px; }

.have-shadow {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.colored-categories a {
  display: inline-block;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 5px;
  text-decoration: none;
  background-color: #000;
}

.colored-categories a:nth-of-type(6n)   { background-color: var(--wp--preset--color--luminous-vivid-orange); }
.colored-categories a:nth-of-type(6n+1) { background-color: var(--wp--preset--color--vivid-red); }
.colored-categories a:nth-of-type(6n+2) { background-color: var(--wp--preset--color--vivid-cyan-blue); }
.colored-categories a:nth-of-type(6n+3) { background-color: var(--wp--preset--color--vivid-purple); }
.colored-categories a:nth-of-type(6n+4) { background-color: var(--wp--preset--color--luminous-vivid-amber); }
.colored-categories a:nth-of-type(6n+5) { background-color: var(--wp--preset--color--cyan-bluish-gray); }

body .is-layout-flex.small-gap { gap: 1rem; }
/* =====================================
   DESIGN SYSTEM — BASE COLORS (LIGHT)
===================================== */
:root {
  /* Backgrounds */
  --color-bg-page: #ffffff;
  --color-bg-section: #f3f7ff;
  --color-bg-card: #ffffff;
  --color-bg-table-head: #3776FF;
  --color-bg-table-row-alt: #e8efff;
  --color-bg-button: #3776FF;
  --color-table-first-column: #3776FF;

  /* Table section rows */
  --color-table-section-bg: #e8efff;
  --color-table-section-text: #0f1a33;

  /* Text */
  --color-text-primary: #0f1a33;
  --color-text-secondary: #1a1a1a;
  --color-text-muted: #5a6b8a;

  /* Borders & Shadows */
  --color-border: #c7d4f5;
  --color-shadow-soft: 0 4px 20px rgba(0,0,0,0.04);

  /* Brand */
  --color-brand: #0047d4;
  --color-brand-dark: #6ea8ff;
  --color-link: var(--color-brand);

  /* Performance */
  --color-positive-text: #1b5e20;
  --color-positive-bg: #e8f5e9;
  --color-negative-text: #c62828;
  --color-negative-bg: #fdecea;

  /* Risk */
  --color-risk-defensive: #4caf50;
  --color-risk-balanced: #2196f3;
  --color-risk-opportunity: #ff9800;

  /* Note Box */
  --color-note-bg: #fff6f6;
  --color-note-border: #ff4d4f;
  --color-note-text: #e60000;
}

/* =====================================
   DARK MODE
===================================== */
html.dark-mode {
  --color-bg-page: #0f1115;
  --color-bg-section: #16181d;
  --color-bg-card: #1b1e24;
  --color-bg-table-head: #2b5fcc;
  --color-bg-table-row-alt: #22252c;
  --color-bg-button: #2b5fcc;
  --color-table-first-column: #2b5fcc;

  --color-table-section-bg: #1d2230;
  --color-table-section-text: #e5e9f0;

  --color-text-primary: #ffffff;
  --color-text-secondary: #d6d6d6;
  --color-text-muted: #9ca3af;

  --color-border: #2a2d33;

  --color-positive-text: #81c784;
  --color-positive-bg: #1b4020;
  --color-negative-text: #ef9a9a;
  --color-negative-bg: #4a1f1f;

  --color-risk-defensive: #81c784;
  --color-risk-balanced: #64b5f6;
  --color-risk-opportunity: #ffb74d;

  --color-note-bg: #2a0000;
  --color-note-border: #990000;
  --color-note-text: #ffcccc;
}

/* =====================================
   LINKS
===================================== */
a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--color-brand-dark);
  text-decoration-color: var(--color-brand-dark);
}

/* =====================================
   GLOBAL
===================================== */
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* =====================================
   WORDPRESS BACKGROUND COLOR CLASSES
===================================== */
.has-base-background-color {
  background-color: var(--color-bg-card) !important;
}

.has-contrast-background-color {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
}

.has-primary-background-color {
  background-color: var(--color-brand) !important;
  color: #ffffff !important;
}

.has-secondary-background-color {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
}

.has-tertiary-background-color {
  background-color: var(--color-text-muted) !important;
  color: #ffffff !important;
}

/* DARK MODE */
html.dark-mode .has-base-background-color {
  background-color: var(--color-bg-card) !important;
}

html.dark-mode .has-contrast-background-color {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
}

html.dark-mode .has-primary-background-color {
  background-color: var(--color-bg-table-head) !important;
  color: #ffffff !important;
}

html.dark-mode .has-secondary-background-color {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
}

html.dark-mode .has-tertiary-background-color {
  background-color: var(--color-text-muted) !important;
  color: #ffffff !important;
}
html.dark-mode .wp-block-post-author__content {
    color: #ccc !important;
}
html.dark-mode .wp-block-post-author,
html.dark-mode .wp-block-post-author-name,
html.dark-mode .wp-block-post-author__name,
html.dark-mode .wp-block-post-author__content {
    color: #ccc !important;
}

/* =====================================
   SECTION HEADINGS
===================================== */
section {
  margin: 3rem 0;
}

section h2,
section h3 {
  color: var(--color-text-primary);
}

section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

section h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

/* =====================================
   WORDPRESS TEXT COLOR CLASSES
===================================== */
.has-base-color {
  color: var(--color-text-primary) !important;
}

.has-contrast-color {
  color: var(--color-text-primary) !important;
}

.has-primary-color {
  color: var(--color-brand) !important;
}

.has-secondary-color {
  color: var(--color-text-secondary) !important;
}

.has-tertiary-color {
  color: var(--color-text-muted) !important;
}

/* DARK MODE */
html.dark-mode .has-base-color,
html.dark-mode .has-contrast-color {
  color: var(--color-text-primary) !important;
}

html.dark-mode .has-secondary-color {
  color: var(--color-text-secondary) !important;
}

html.dark-mode .has-tertiary-color {
  color: var(--color-text-muted) !important;
}

html.dark-mode .has-primary-color {
  color: var(--color-bg-table-head) !important;
}
html.dark-mode .wp-block-post-author-name {
    color: #ccc !important;
}

/* =====================================
   COVER BLOCK
===================================== */
.wp-block-cover__background.has-background-dim.has-background-dim-100,
.wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
  background-color: var(--color-bg-card) !important;
}

html.dark-mode .wp-block-cover__background.has-background-dim.has-background-dim-100,
html.dark-mode .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
  background-color: var(--color-bg-card) !important;
}

html.dark-mode .wp-block-cover,
html.dark-mode .wp-block-cover p,
html.dark-mode .wp-block-cover h1,
html.dark-mode .wp-block-cover h2,
html.dark-mode .wp-block-cover h3,
html.dark-mode .wp-block-cover h4,
html.dark-mode .wp-block-cover h5,
html.dark-mode .wp-block-cover h6,
html.dark-mode .wp-block-cover a,
html.dark-mode .wp-block-cover__inner-container,
html.dark-mode .wp-block-cover-text {
  color: var(--color-text-primary) !important;
}

/* =====================================
   GROUP BLOCKS
===================================== */
html.dark-mode .wp-block-group[style*="background-color:#f5eac1"] {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-primary);
}

html.dark-mode main .wp-block-group {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
}
html.dark-mode .wp-block-query .wp-block-post-title a {
    color: #fff !important;
}

html.dark-mode .wp-block-query .wp-block-post-author__name,
html.dark-mode .wp-block-query .wp-block-post-date {
    color: #ccc !important;
}


/* =====================================
   NAVIGATION
===================================== */
.wp-block-navigation a,
.wp-block-navigation__container a,
.wp-block-navigation-item a,
.wp-block-navigation-link a {
  color: var(--color-text-primary) !important;
}

.wp-block-navigation a:hover,
.wp-block-navigation__container a:hover,
.wp-block-navigation-item a:hover,
.wp-block-navigation-link a:hover {
  color: var(--color-brand) !important;
}

.wp-block-navigation__submenu-container {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
}

.wp-block-navigation__submenu-container a {
  color: var(--color-text-primary) !important;
}

/* DARK MODE */
html.dark-mode .wp-block-navigation a,
html.dark-mode .wp-block-navigation__container a,
html.dark-mode .wp-block-navigation-item a,
html.dark-mode .wp-block-navigation-link a {
  color: var(--color-text-primary) !important;
}

html.dark-mode .wp-block-navigation a:hover,
html.dark-mode .wp-block-navigation__container a:hover,
html.dark-mode .wp-block-navigation-item a:hover,
html.dark-mode .wp-block-navigation-link a:hover {
  color: var(--color-bg-table-head) !important;
}

html.dark-mode .wp-block-navigation__submenu-container {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
}

html.dark-mode .wp-block-navigation__submenu-container a {
  color: var(--color-text-primary) !important;
}

/* =====================================
   COLUMNS
===================================== */
.wp-block-columns,
.wp-block-column {
  color: var(--color-text-primary);
}

html.dark-mode .wp-block-columns,
html.dark-mode .wp-block-column {
  color: var(--color-text-primary) !important;
}

/* =====================================
   QUIZ BLOCK
===================================== */
html.dark-mode #quiz {
  background: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* =====================================
   FRAGEBOGEN (Risikoprofil)
===================================== */
.question {
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

.question label {
  display: block;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.question input[type="radio"] {
  margin-right: 0.4rem;
}

#findBtn {
  background-color: var(--color-bg-table-head);
  color: #fff;
  font-size: 1rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  margin-top: 0.8rem;
}

#findBtn:hover {
  background-color: var(--color-brand-dark);
}

#result {
  display: none;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border-radius: 0.5rem;
}

html.dark-mode #result {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

#result a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
}

/* =====================================
   WIKIFOLIO COMPARE → DARK MODE FIX
===================================== */
html.dark-mode #wikifolio-compare {
  background: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
}

html.dark-mode #wikifolio-compare * {
  color: var(--color-text-primary) !important;
}

html.dark-mode #wikifolio-compare > div > div {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}

html.dark-mode #wikifolio-compare select {
  background: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

html.dark-mode #wikifolio-compare span[style*="background"] {
  background: var(--color-bg-section) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

html.dark-mode #wikifolio-compare table td {
  border-color: var(--color-border) !important;
}

html.dark-mode #wikifolio-compare span[style*="border-radius:999px"] {
  color: #fff !important;
}

html.dark-mode #wikifolio-compare canvas {
  background: transparent !important;
}

//KI DARKMODE
:root {
  --ki-header-bg: #0a2540;
  --ki-header-text: #ffffff;

  --ki-input-bg: #ffffff;
  --ki-input-border: #dddddd;

  --chat-bg: #ffffff;
}
.ki-chat {
  display: flex;
  flex-direction: column;
  gap: 0;
}
:root {
  --bubble-user-bg: #3776FF;   /* User-Bubble */
  --bubble-user-text: #ffffff !important;

--bubble-ai-bg: #e8efff;
--bubble-ai-text: #0a2540;
--bubble-ai-border: #bcd0ff;

}
.ki-button {
  padding: 8px 16px;
  background: #3776FF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}
.ki-input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ki-input {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* User-Bubble (rechts) */
.ki-bubble-user {
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* KI-Bubble (links) */
.ki-bubble-ai {
  background: var(--bubble-ai-bg);
  color: var(--bubble-ai-text);
  border: 1px solid var(--bubble-ai-border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}


.dark {
  --ki-header-bg: #0a2540; /* oder dunkler, wenn du willst */
  --ki-header-text: #ffffff;

  --ki-input-bg: #0f0f0f;
  --ki-input-border: #444444;

  --chat-bg: #0f0f0f;
}
#chat {
  background: var(--chat-bg);
}
/* Grundstil für alle Bubbles */
.ki-bubble {
  max-width: 80%;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 16px;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.ki-header {
  padding: 16px;
  background: var(--ki-header-bg);
  color: var(--ki-header-text);
  font-size: 20px;
  font-weight: bold;
}

/* =====================================
   PORTFOLIO CHART → DARK MODE FIX
===================================== */
html.dark-mode #portfolio-chart {
  background: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
}

html.dark-mode #portfolio-chart > div {
  background: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

html.dark-mode #portfolio-chart h2 {
  color: var(--color-text-primary) !important;
}

html.dark-mode #portfolio-chart table,
html.dark-mode #portfolio-chart table td,
html.dark-mode #portfolio-chart table th {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

html.dark-mode #portfolio-chart thead.table-head {
  background: var(--color-bg-table-head) !important;
}

html.dark-mode #portfolio-chart thead.table-head th {
  color: #fff !important;
}

html.dark-mode #portfolio-chart canvas {
  background: transparent !important;
}

/* =====================================
   TABLE SECTION ROWS
===================================== */
.table-section {
  background: var(--color-table-section-bg);
  color: var(--color-table-section-text);
  text-align: center;
  font-weight: bold;
}

/* =====================================
   TABLE HEAD
===================================== */
.table-head {
  background: var(--color-bg-table-head);
}

/* =====================================
   TABLES — UNIVERSAL
===================================== */
.info-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.info-tabelle thead {
  background: var(--color-bg-table-head);
}

.info-tabelle th {
  padding: 1rem;
  color: #ffffff;
  font-weight: 700;
  text-align: left;
}

.info-tabelle td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.info-tabelle th,
.info-tabelle td {
  border-right: 1px solid var(--color-border);
}

.info-tabelle th:last-child,
.info-tabelle td:last-child {
  border-right: none;
}

/* =====================================
   FIRST COLUMN (BLUE)
===================================== */
.kerninformationen .info-tabelle td:first-child,
.kerninformationen .info-tabelle th.kategorie,
.strategie-ansatz .info-tabelle td:first-child,
.strategie-ansatz .info-tabelle th.kategorie,
.info-tabelle.vergleich td:first-child,
.info-tabelle.vergleich th:first-child {
  background: var(--color-table-first-column);
  color: #ffffff;
  font-weight: bold;
  width: 30%;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

/* =====================================
   RISK COLORS
===================================== */
.info-tabelle td.risiko-defensiv {
  color: var(--color-risk-defensive) !important;
  font-weight: bold;
}

.info-tabelle td.risiko-ausgewogen {
  color: var(--color-risk-balanced) !important;
  font-weight: bold;
}

.info-tabelle td.risiko-chancenorientiert {
  color: var(--color-risk-opportunity) !important;
  font-weight: bold;
}

/* =====================================
   PERFORMANCE COLORS
===================================== */
.performance-tabelle .info-tabelle td.positiv:not(:empty) {
  color: var(--color-positive-text);
  background-color: var(--color-positive-bg);
  font-weight: 600;
}

.performance-tabelle .info-tabelle td.negativ:not(:empty) {
  color: var(--color-negative-text);
  background-color: var(--color-negative-bg);
  font-weight: 600;
}

/* =====================================
   PORTFOLIO TABLE
===================================== */
.portfolio-table {
  width: 100%;
  max-width: 400px;
  margin: 2rem auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.portfolio-table thead th {
  background: var(--color-bg-table-head);
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 1.2rem;
}

/* =====================================
   IMPORTANT NOTE BOX
===================================== */
#important-note {
  background: var(--color-note-bg);
  border: 2px solid var(--color-note-border);
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  color: var(--color-note-text);
}

/* =====================================
   CHART COMPONENT
===================================== */
.portfolio-chart {
  padding: 3rem 1rem;
  background: var(--color-bg-section);
}

.portfolio-card {
  max-width: 300px;
  margin: 0 auto;
  background: var(--color-bg-card);
  border-radius: 1rem;
  box-shadow: var(--color-shadow-soft);
  padding: 2rem;
}

.portfolio-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* =====================================
   DESKTOP: MEHRWERT & VERGLEICH WRAPPER AUSBLENDEN
===================================== */
.mehrwert-cards,
.vergleich-cards {
  display: none;
}

/* =====================================
   MOBILE TABLES → ROW CARDS
   (ALLE Tabellen außer .mehrwert und .vergleich)
===================================== */
@media (max-width: 600px) {

  .info-tabelle:not(.vergleich):not(.mehrwert) {
    display: block;
    border: none;
    background: none;
  }

  .info-tabelle:not(.vergleich):not(.mehrwert) thead {
    display: none;
  }

  .info-tabelle:not(.vergleich):not(.mehrwert) tbody tr {
    display: block;
    background: var(--color-bg-card);
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 0.7rem;
    box-shadow: var(--color-shadow-soft);
    border: 1px solid var(--color-border);
  }

  .info-tabelle:not(.vergleich):not(.mehrwert) td {
    display: block;
    padding: 0.4rem 0;
    border: none;
    font-size: 1rem;
  }

  .info-tabelle:not(.vergleich):not(.mehrwert) td:first-child {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-table-first-column);
    padding-bottom: 0.8rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
  }

  .info-tabelle:not(.vergleich):not(.mehrwert) td:nth-child(n+2)::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.1rem;
  }

  .info-tabelle td:first-child a {
    color: var(--color-table-first-column);
    text-decoration: none;
    font-weight: 700;
  }
}

#<?php echo $canvas_id; ?> {
    width: 100% !important;
    max-width: 1200px;
    height: 600px !important;
    display: block;
    margin: 0 auto;
}

.mi-chart-wrapper {
    min-height: 600px !important;
}

.mi-chart-wrapper canvas {
    min-height: 600px !important;
    height: 600px !important;
    display: block !important;
}


/* Mobile */
@media (max-width: 600px) {
    #<?php echo $canvas_id; ?> {
        height: 350px !important;
        max-width: 100% !important;
    }
}
.mi-chart-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* =====================================
   MOBILE: SPALTEN-KARTEN (MEHRWERT & VERGLEICH)
===================================== */
@media (max-width: 600px) {

  /* Originaltabellen ausblenden */
  .info-tabelle.mehrwert,
  .info-tabelle.vergleich {
    display: none;
  }

  /* Wrapper sichtbar machen */
  .mobile-column-cards,
  .mehrwert-cards,
  .vergleich-cards {
    display: grid !important;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  /* Karten */
  .mobile-column-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--color-shadow-soft);
  }

  .mobile-column-card h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-table-first-column);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
  }

  .mobile-column-card p {
    margin: 0.4rem 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .mobile-column-card p strong {
    color: var(--color-text-primary);
  }

  .mobile-column-card a {
    color: var(--color-link);
    font-weight: 700;
    text-decoration: underline;
  }
}