/**
 * Aurora Digital Vienna — Zentrales Artikel-Stylesheet
 * Quelle der Wahrheit: DESIGN-IDENTITY.md
 *
 * Scope: AUSSCHLIESSLICH body.single-post.
 * Grund: Elementor-Template #4692 (include/singular) rendert AUCH Seiten
 * (/ki-beratung-wien/, /ueber-peter/). Ein Scoping auf .elementor-4692
 * wuerde die Money-Pages mitreissen.
 *
 * !important ist hier kein Stilmittel, sondern Notwendigkeit:
 * 1.147 von 1.246 Artikeln tragen Inline-Styles (705 davon mit Farbe).
 * Inline-Styles schlaegt nur author-!important.
 */

/* ==========================================================================
   1. Inter — bereits self-hosted, aber die OMGF-CSS zeigt auf die ALTE
      Domain (//echtjetztki.at) ohne CORS-Header. Daher eigene Deklaration
      auf den Aurora-Pfad.
      ========================================================================== */
@font-face {
  font-family: 'Inter aurora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/omgf/omgf-stylesheet-116/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter aurora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/omgf/omgf-stylesheet-116/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens (DESIGN-IDENTITY §1)
      ========================================================================== */
body.single-post {
  --au-bg-dark: #0f172a;
  --au-bg-dark-mid: #1e3a5f;
  --au-bg-card: #1e293b;
  --au-primary: #0088ff;        /* Akzent, Glow, Rahmen — NICHT als CTA-Flaeche mit weisser Schrift */
  --au-primary-deep: #2563eb;
  --au-primary-cta: #0072e0;    /* Abweichung v. Identity §3, begruendet: weiss auf #0088ff = 3.52:1 (AA verfehlt), auf #0072e0 = 4.68:1 */
  --au-primary-light: #60a5fa;
  --au-text-main: #ffffff;
  --au-text-body: #cbd5e1;
  --au-text-muted: #94a3b8;
  --au-border: rgba(255, 255, 255, .1);
  --au-success: #34d399;

  --au-font-head: 'Poppins', system-ui, sans-serif;
  --au-font-body: 'Inter aurora', 'Inter', system-ui, sans-serif;

  --au-read: 720px;             /* Lesebreite statt Bleiwueste */
  --au-radius: 16px;
}

/* ==========================================================================
   3. Seitenflaeche: Zeitung (weiss/serif) raus, Aurora-Navy rein
      ========================================================================== */
body.single-post {
  background: var(--au-bg-dark) !important;
  font-family: var(--au-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

body.single-post .elementor-location-single,
body.single-post .e-con,
body.single-post .e-con-inner {
  background-color: transparent !important;
}

/* Titel-Container: Verlauf nach Identity (Hero) */
body.single-post .elementor-4692 .elementor-element.elementor-element-14e04b80:not(.elementor-motion-effects-element-type-background) {
  background-image: linear-gradient(135deg, var(--au-bg-dark) 0%, var(--au-bg-dark-mid) 100%) !important;
  border-bottom: 1px solid var(--au-border);
}

/* ==========================================================================
   4. Typografie (DESIGN-IDENTITY §2) — Merriweather/Montserrat raus
      ========================================================================== */
body.single-post .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--au-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 5vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;   /* war: capitalize */
  color: var(--au-text-main) !important;
  max-width: min(var(--au-read), 100%) !important;  /* !important: Elementors (0,4,0)-Regel setzt max-width:100% */
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-wrap: break-word;
}

body.single-post .elementor-widget-theme-post-content {
  font-family: var(--au-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--au-text-body) !important;
  /* min(): 720px Lesebreite, aber NIE breiter als der Flex-Container.
     Ohne den 100%-Deckel zieht eine breite Tabelle das Flex-Item auf ihre
     min-content-Breite (gemessen: 416px bei 375px Viewport) -> Seite scrollt
     horizontal. Effekt ist Vorbestand (ohne dieses Stylesheet: 432px),
     wird hier mitgefixt. */
  max-width: min(var(--au-read), 100%) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-wrap: break-word;              /* lange URLs sprengen sonst die Zeile */
}

body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4 {
  font-family: var(--au-font-head) !important;
  color: var(--au-text-main) !important;
  letter-spacing: -.015em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
body.single-post .elementor-widget-theme-post-content h2 {
  font-size: clamp(22px, 3vw, 31px) !important;
  font-weight: 700 !important;
  margin: 2.2em 0 .6em !important;
}
body.single-post .elementor-widget-theme-post-content h3 {
  font-size: clamp(19px, 2.2vw, 23px) !important;
  font-weight: 600 !important;
  margin: 1.8em 0 .5em !important;
}

body.single-post .elementor-widget-theme-post-content p {
  color: var(--au-text-body) !important;
  margin: 0 0 1.15em !important;
}
body.single-post .elementor-widget-theme-post-content strong,
body.single-post .elementor-widget-theme-post-content b {
  color: var(--au-text-main) !important;
  font-weight: 600 !important;
}

/* Lead: erster Absatz traegt die Emotion (Identity §5) */
body.single-post .elementor-widget-theme-post-content > p:first-of-type {
  font-size: 1.12em !important;
  color: #e2e8f0 !important;
}

/* ==========================================================================
   5. Links — #0088ff auf dunkel waere zu dunkel; #60a5fa = 7.02:1
      ========================================================================== */
body.single-post .elementor-widget-theme-post-content a {
  color: var(--au-primary-light) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(96, 165, 250, .45);
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.single-post .elementor-widget-theme-post-content a:hover {
  color: #93c5fd !important;
  text-decoration-color: currentColor;
}

/* Fokus sichtbar (Identity §7) */
body.single-post a:focus-visible,
body.single-post button:focus-visible {
  outline: 3px solid var(--au-primary-light) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   6. Listen, Zitate, Code, Tabellen, Bilder — Karten statt Bleiwueste
      ========================================================================== */
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol {
  margin: 0 0 1.3em !important;
  padding-left: 1.3em !important;
}
body.single-post .elementor-widget-theme-post-content li {
  color: var(--au-text-body) !important;
  margin-bottom: .5em !important;
}
body.single-post .elementor-widget-theme-post-content li::marker {
  color: var(--au-primary) !important;
}

body.single-post .elementor-widget-theme-post-content blockquote {
  background: var(--au-bg-card) !important;
  border: 1px solid var(--au-border) !important;
  border-left: 4px solid var(--au-primary) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin: 1.8em 0 !important;
  color: var(--au-text-body) !important;
  font-style: normal !important;
}

body.single-post .elementor-widget-theme-post-content code,
body.single-post .elementor-widget-theme-post-content pre {
  background: #0b1220 !important;
  border: 1px solid var(--au-border) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  font-size: .92em !important;
}
body.single-post .elementor-widget-theme-post-content pre {
  padding: 16px !important;
  overflow-x: auto !important;      /* Identity §7: kein horizontales Scrollen der Seite */
}
body.single-post .elementor-widget-theme-post-content code { padding: 2px 6px !important; }

/* Tabellen: 20 Artikel betroffen — muessen mobil scrollen, nicht die Seite sprengen */
body.single-post .elementor-widget-theme-post-content table {
  display: block !important;          /* macht die Tabelle zum Scroll-Container */
  width: max-content !important;      /* Spalten behalten ihre Breite ... */
  max-width: 100% !important;         /* ... werden aber am Container gedeckelt -> scrollt intern */
  overflow-x: auto !important;
  border-collapse: collapse !important;
  color: var(--au-text-body) !important;
  -webkit-overflow-scrolling: touch;
}
body.single-post .elementor-widget-theme-post-content th,
body.single-post .elementor-widget-theme-post-content td {
  border: 1px solid var(--au-border) !important;
  padding: 10px 14px !important;
}
body.single-post .elementor-widget-theme-post-content th {
  background: var(--au-bg-card) !important;
  color: var(--au-text-main) !important;
  font-family: var(--au-font-head) !important;
}

body.single-post .elementor-widget-theme-post-content img {
  border-radius: 14px !important;
  border: 1px solid var(--au-border);
  height: auto !important;          /* verhindert Layout-Shift bei width/height-Attributen */
}

body.single-post .elementor-widget-theme-post-content hr {
  border: 0 !important;
  border-top: 1px solid var(--au-border) !important;
  margin: 2.4em 0 !important;
}

/* Beitragsbild */
body.single-post .elementor-widget-theme-post-featured-image img {
  border-radius: var(--au-radius) !important;
  border: 1px solid var(--au-border);
}

/* ==========================================================================
   7. BUTTONS — der eigentliche Bug
      Ist: color:#0088ff auf background:white = 3.52:1 (AA verfehlt)
      ========================================================================== */

/* 7a. Elementor-Button im Template ("Zur Blog-Uebersicht") */
body.single-post .elementor-4692 .elementor-element .elementor-button,
body.single-post .elementor-widget-button .elementor-button {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--au-primary-cta), var(--au-primary-deep)) !important;
  color: #ffffff !important;        /* Identity §3: NIE dunkle Schrift auf dunklem Button */
  fill: #ffffff !important;
  font-family: var(--au-font-head) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 16px 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 136, 255, .32) !important;
  min-height: 44px !important;      /* Identity §7: Touch-Target */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.single-post .elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 136, 255, .42) !important;
  color: #ffffff !important;
}

/* 7b. Inline-CTA-Bloecke im Content (42 Artikel: div[style*=gradient]) */
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] {
  background-image: linear-gradient(135deg, var(--au-primary-cta) 0%, var(--au-primary-deep) 100%) !important;
  border-radius: var(--au-radius) !important;
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 28px !important;
}
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] h2,
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] h3,
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] p {
  color: #ffffff !important;
}
/* Der unlesbare Pill-Button: weisse Flaeche BLEIBT (Inversion im blauen Block ist ok),
   aber die Schrift wird von #0088ff (3.52:1) auf Navy (17.85:1) gezogen. */
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] a {
  background: #ffffff !important;
  color: var(--au-bg-dark) !important;
  font-family: var(--au-font-head) !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  box-shadow: 0 10px 26px rgba(2, 8, 23, .35);
}
body.single-post .elementor-widget-theme-post-content div[style*="gradient"] a:hover {
  background: #f1f5f9 !important;
  color: var(--au-bg-dark) !important;
}

/* 7c. Inline-gestylte Buttons im Content vereinheitlichen.
       Bestand (gemessen): 436 Artikel mit #007bff, 96 mit #4CAF50 (gruen),
       46 mit #000 — alle off-brand und mit eigener Textfarbe.
       WICHTIG: Ohne diese Regel faerbt die Link-Regel oben (0,2,2) das weisse
       Button-Label auf #60a5fa um -> gemessen 1.09:1 auf Gruen = unsichtbar.
       Ein <a> mit Inline-Background ist ein BUTTON, kein Textlink.
       Spezifitaet (0,3,2) schlaegt die Link-Regel (0,2,2); der Pill-Button in
       7b bleibt dank (0,3,3) unberuehrt. */
body.single-post .elementor-widget-theme-post-content a[style*="background"] {
  background: none !important;
  background-image: linear-gradient(135deg, var(--au-primary-cta), var(--au-primary-deep)) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: var(--au-font-head) !important;
  font-weight: 700 !important;
  padding: 16px 30px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  box-shadow: 0 12px 30px rgba(0, 136, 255, .32) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.single-post .elementor-widget-theme-post-content a[style*="background"]:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 136, 255, .42) !important;
}

/* 7d. Helle Inline-Boxen zu Aurora-Karten machen.
       Bestand (gemessen, alle hellen Werte beginnen mit #f):
       background-color:#f8f9fa (420), #f0f8ff (72), #f9f9f9 (70), #f0f0f0 (37),
       #f5f9ff (9), #f5f5f5 (7) + background:#f... (~50).
       BEIDE Schreibweisen noetig — `background:` UND `background-color:`:
       [style*="background:#f"] matcht "background-color:#f8f9fa" NICHT.
       Ohne das blieben ~600 helle Kaesten auf Navy stehen — mit hellem Text
       drin = unlesbar. */
body.single-post .elementor-widget-theme-post-content div[style*="background:#f"],
body.single-post .elementor-widget-theme-post-content div[style*="background: #f"],
body.single-post .elementor-widget-theme-post-content div[style*="background-color:#f"],
body.single-post .elementor-widget-theme-post-content div[style*="background-color: #f"],
body.single-post .elementor-widget-theme-post-content div[style*="background:white"],
body.single-post .elementor-widget-theme-post-content div[style*="background: white"] {
  background: var(--au-bg-card) !important;
  border: 1px solid var(--au-border) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  color: var(--au-text-body) !important;
}
/* Kinder einfaerben — aber NICHT die Buttons darin.
   `*` waere (0,3,2) und damit gleichauf mit der Button-Regel 7c (0,3,2);
   bei Gleichstand gewinnt die spaetere Regel, also diese hier -> der Button
   haette wieder Fliesstextfarbe auf blauem Grund bekommen.
   `:not([style*="background"])` nimmt Buttons sauber aus (und hebt zugleich
   auf (0,4,2)). */
body.single-post .elementor-widget-theme-post-content div[style*="background:#f"] *:not([style*="background"]),
body.single-post .elementor-widget-theme-post-content div[style*="background: #f"] *:not([style*="background"]),
body.single-post .elementor-widget-theme-post-content div[style*="background-color:#f"] *:not([style*="background"]),
body.single-post .elementor-widget-theme-post-content div[style*="background-color: #f"] *:not([style*="background"]),
body.single-post .elementor-widget-theme-post-content div[style*="background:white"] *:not([style*="background"]),
body.single-post .elementor-widget-theme-post-content div[style*="background: white"] *:not([style*="background"]) {
  color: var(--au-text-body) !important;
}

/* ==========================================================================
   8. Aurora-CTA-Block (per mu-plugin angehaengt) — Cal.com bleibt Conversion
      Achtung Spezifitaet: der Block sitzt IM Content-Wrapper. Die Regel
      `body.single-post .elementor-widget-theme-post-content a` ist (0,2,2)
      und schlaegt trotz !important sowohl `.au-cta__btn` (0,1,0) als auch
      `.au-cta .au-cta__btn` (0,2,0) — gemessen: der CTA-Button erbte die
      Linkfarbe #60a5fa = 1.84:1 auf dem Verlauf. Daher `body.single-post`
      davor: (0,3,1) gewinnt.
      ========================================================================== */
body.single-post .au-cta {
  max-width: var(--au-read, 720px);
  margin: 3rem auto 0 !important;
  background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 55%, #2563eb 140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 30px 70px -30px rgba(2, 8, 23, .8);
  text-align: center;
}
body.single-post .au-cta .au-cta__eyebrow {
  display: inline-block;
  font-family: var(--au-font-head, 'Poppins', sans-serif) !important;
  font-weight: 600 !important;
  font-size: .78rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #dbeafe !important;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 16px;
}
body.single-post .au-cta .au-cta__title {
  font-family: var(--au-font-head, 'Poppins', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 31px) !important;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #fff !important;
  margin: 0 0 10px !important;
}
body.single-post .au-cta .au-cta__sub {
  font-family: var(--au-font-body, 'Inter', sans-serif) !important;
  color: #cbd5e1 !important;
  line-height: 1.6;
  margin: 0 0 24px !important;
}
body.single-post .au-cta .au-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  background: linear-gradient(135deg, #0072e0, #2563eb);
  color: #fff !important;
  font-family: var(--au-font-head, 'Poppins', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 16px 30px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(0, 136, 255, .32);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.single-post .au-cta .au-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 136, 255, .45);
  color: #fff !important;
}
body.single-post .au-cta .au-cta__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin: 20px 0 0 !important;
  font-family: var(--au-font-body, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
}
body.single-post .au-cta .au-cta__trust span { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   9. Mobil (Identity §7)
      ========================================================================== */
@media (max-width: 767px) {
  body.single-post .elementor-4692 .elementor-element.elementor-element-14e04b80 {
    --padding-left: 20px;
    --padding-right: 20px;
  }
  body.single-post .elementor-4692 .elementor-element.elementor-element-5ccfa237 {
    --padding-left: 20px;
    --padding-right: 20px;
  }
  body.single-post .elementor-widget-theme-post-content { font-size: 17px !important; }
  body.single-post .elementor-widget-theme-post-content div[style*="gradient"] { padding: 22px !important; }
  /* Touch-Targets: Footer-Links im Artikel */
  body.single-post .custom-footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  body.single-post *,
  .au-cta__btn { transition: none !important; }
  body.single-post .elementor-widget-button .elementor-button:hover,
  .au-cta__btn:hover { transform: none !important; }
}