/* =========================================================
		   1. BLOG – GRUNDLAYOUT
		   ========================================================= */
		
		#imContent {
		  align-self: start;
		  padding: 150px 0 300px 0;
		  margin-top: -75px !important;
		}
		
		
		/* =========================================================
		   2. BLOGÜBERSICHT – DUNKLER SEITENHINTERGRUND
		   ========================================================= */
		
		#imContent {
		  background:
		    radial-gradient(
		      circle at 10% 18%,
		      rgba(57, 170, 166, .27),
		      transparent 31%
		    ),
		    radial-gradient(
		      circle at 90% 82%,
		      rgba(239, 140, 104, .14),
		      transparent 30%
		    ),
		    linear-gradient(
		      137deg,
		      #061621 0%,
		      #103544 55%,
		      #081722 100%
		    ) !important;
		}
		
		
		/* X5-eigene Hintergrundebene deaktivieren */
		#imContentGraphics {
		  background: transparent !important;
		}
		
		
		/* Blogstrukturen transparent lassen */
		#imBlogPage,
		#imBlogContent {
		  background: transparent !important;
		}
		
		
		/* dunkle Grundfarbe für Restflächen */
		html,
		body,
		#imPageExtContainer,
		#imPageIntContainer,
		#imPage {
		  background-color: #071824 !important;
		}
		
		
		/* =========================================================
		   3. EINZELARTIKEL – HELLE LESEFLÄCHE
		
		   Nur Artikel bekommen diesen Hintergrund.
		   Header und Footer bleiben dunkel.
		   ========================================================= */
		
		html.tb-blog-article-url #imContent {
		  background:
		    radial-gradient(
		      circle at 8% 14%,
		      rgba(57, 170, 166, .055),
		      transparent 30%
		    ),
		    radial-gradient(
		      circle at 92% 84%,
		      rgba(239, 140, 104, .04),
		      transparent 31%
		    ),
		    linear-gradient(
		      145deg,
		      #ffffff 0%,
		      #f7fbfa 55%,
		      #fffdfb 100%
		    ) !important;
		}
		
		
		/* Artikelcontainer selbst transparent */
		html.tb-blog-article-url #imBlogPage,
		html.tb-blog-article-url #imBlogContent {
		  background: transparent !important;
		}
		
		
		/* sichere Grundfarbe für normalen Artikeltext */
		html.tb-blog-article-url #imBlogContent {
		  color: #223139;
		}
		
		
		/* =========================================================
		   4. BLOG-HEADER
		   ========================================================= */
		
		#imHeader {
		  position: relative !important;
		
		  background:
		    radial-gradient(
		      ellipse at 8% 15%,
		      rgba(57, 170, 166, .32) 0%,
		      rgba(57, 170, 166, .12) 22%,
		      transparent 42%
		    ),
		    radial-gradient(
		      ellipse at 88% 80%,
		      rgba(239, 140, 104, .14) 0%,
		      transparent 34%
		    ),
		    linear-gradient(
		      110deg,
		      #061621 0%,
		      #0b2936 32%,
		      #103544 55%,
		      #0a2733 74%,
		      #081722 100%
		    ) !important;
		
		  z-index: 3000 !important;
		}
		
		
		/* X5-Header-Hintergrund deaktivieren */
		#imHeaderBg {
		  background: transparent !important;
		}
		
		
		/* Menü, Logo und Button oberhalb der Linie */
		#imHeaderObjects {
		  position: relative !important;
		  z-index: 2 !important;
		}
		
		
		/* feine Akzentlinie unter Navigation */
		#imHeader::after {
		  content: "";
		
		  position: absolute;
		  z-index: 1;
		
		  left: 50%;
		  bottom: 0;
		
		  width: min(92%, 1440px);
		  height: 1px;
		
		  transform: translateX(-50%);
		  pointer-events: none;
		
		  background: linear-gradient(
		    90deg,
		    transparent 0%,
		    rgba(85, 195, 188, .22) 10%,
		    rgba(85, 195, 188, .62) 35%,
		    rgba(124, 221, 215, .72) 50%,
		    rgba(85, 195, 188, .62) 65%,
		    rgba(85, 195, 188, .22) 90%,
		    transparent 100%
		  );
		}
		
		
		/* =========================================================
		   5. SEO-EINLEITUNG – NUR BLOGÜBERSICHT
		   ========================================================= */
		
		.blog-intro-seo {
		  display: block;
		
		  width: 100%;
		  max-width: 900px;
		
		  margin: 0 auto 40px auto;
		  padding: 0 20px;
		
		  text-align: center;
		
		  box-sizing: border-box;
		  clear: both;
		}
		
		
		.blog-intro-seo h1 {
		  margin: 0 0 16px 0;
		
		  color: #ffffff !important;
		
		  font-size: 34px;
		  line-height: 1.15;
		}
		
		
		.blog-intro-seo p {
		  max-width: 820px;
		
		  margin: 0 auto;
		
		  color: rgba(239, 248, 249, .88) !important;
		
		  font-size: 18px;
		  line-height: 1.55;
		}
		
		
		/* =========================================================
		   6. BLOGKARTEN – BESCHREIBUNG
		   ========================================================= */
		
		#imBlogContent
		.blog-cardlayout-wrapper
		.im-cc-BlogPostCard
		.im-cc-BlogPostCardDescription,
		
		#imBlogContent
		.blog-cardlayout-wrapper
		.im-cc-BlogPostCard
		.im-cc-BlogPostCardDescription * {
		
		  font-size: 12px !important;
		  line-height: 1.35 !important;
		}
		
		
		/* =========================================================
		   7. EINZELARTIKEL – COVER
		   ========================================================= */
		
		#imBlogPage.imBlogArticle #imBlogPostCover {
		  display: block !important;
		
		  width: auto !important;
		  max-width: 640px !important;
		
		  height: auto !important;
		  max-height: none !important;
		
		  object-fit: contain !important;
		
		  margin: 0 auto 28px auto !important;
		}
		
		
		/* =========================================================
		   8. SIDEBAR – CTA
		   ========================================================= */
		
		.blog-sidebar-cta strong {
		  display: block;
		
		  margin-bottom: 8px;
		
		  font-size: 16px;
		}
		
		
		.blog-sidebar-cta p {
		  margin: 0 0 12px 0;
		}
		
		
		.blog-sidebar-cta a {
		  display: inline-block;
		
		  padding: 10px 14px;
		
		  border-radius: 999px;
		
		  background: #0b3558;
		
		  color: #ffffff !important;
		  text-decoration: none !important;
		
		  font-weight: 600;
		}
		
		
		/* =========================================================
		   9. SIDEBAR – KATEGORIEN ALS TAGS
		   ========================================================= */
		
		#imBlogSidebar a[href*="category"],
		#imBlogSidebar a[href*="cat="] {
		  display: inline-block !important;
		
		  margin: 0 4px 7px 0 !important;
		  padding: 5px 8px !important;
		
		  border: 1px solid #0b3558 !important;
		  border-radius: 999px !important;
		
		  background: #ffffff !important;
		
		  color: #0b3558 !important;
		  text-decoration: none !important;
		
		  font-size: 12px !important;
		  line-height: 1.2 !important;
		}
		
		
		#imBlogSidebar a[href*="category"]:hover,
		#imBlogSidebar a[href*="cat="]:hover {
		  background: #0b3558 !important;
		  color: #ffffff !important;
		}
		
		
		/* =========================================================
		   10. PAGINATION
		   ========================================================= */
		
		.tb-blog-pagination,
		.tb-blog-pagination span {
		  color: rgba(239, 248, 249, .78) !important;
		}
		
		
		.tb-blog-pagination a {
		  color: #ffffff !important;
		  text-decoration: none !important;
		
		  transition: color .18s ease;
		}
		
		
		.tb-blog-pagination a:hover {
		  color: #7cddd7 !important;
		}
		
		
		/* Fallback für X5-Pagination */
		#imBlogContent a[href*="start="] {
		  color: #ffffff !important;
		  text-decoration: none !important;
		}
		
		
		#imBlogContent a[href*="start="]:hover {
		  color: #7cddd7 !important;
		}
		
		
		/* =========================================================
		   11. FOOTER – HINTERGRUND
		   ========================================================= */
		
		#imFooterBg {
		  background: #04121b !important;
		}
		
		
		#imFooter {
		  position: relative !important;
		
		  background:
		    radial-gradient(
		      circle at 14% 22%,
		      rgba(57, 170, 166, .15),
		      transparent 31%
		    ),
		    radial-gradient(
		      circle at 86% 78%,
		      rgba(239, 140, 104, .08),
		      transparent 30%
		    ),
		    linear-gradient(
		      135deg,
		      #04121b 0%,
		      #071824 48%,
		      #0a2631 100%
		    ) !important;
		
		  border-top: 1px solid rgba(124, 221, 215, .24) !important;
		}
		
		
		/* =========================================================
		   12. FOOTER – ABSTAND NACH OBEN
		   ========================================================= */
		
		#imFooterObjects >
		.template-object-wrapper:not(#imFooter_imTextObject_02_wrapper) {
		  transform: translateY(24px);
		}
		
		
		/* =========================================================
		   13. FOOTER – TEXTFARBEN
		   ========================================================= */
		
		#imFooter,
		#imFooter .text-inner,
		#imFooter .text-inner div,
		#imFooter .text-inner span,
		#imFooter .text-inner i {
		  color: rgba(225, 239, 241, .76) !important;
		}
		
		
		/* Überschriften */
		#imFooter .text-inner b,
		#imFooter .text-inner b span,
		#imFooter .text-inner strong,
		#imFooter .text-inner strong span {
		  color: #ffffff !important;
		}
		
		
		/* Links */
		#imFooter a,
		#imFooter a span,
		#imFooter .imCssLink {
		  color: rgba(216, 239, 239, .84) !important;
		  text-decoration: none !important;
		}
		
		
		#imFooter a:hover,
		#imFooter a:hover span,
		#imFooter .imCssLink:hover {
		  color: #7cddd7 !important;
		}
		
		
		/* Social Icons */
		#imFooter .social-icon svg path,
		#imFooter .social-icon svg circle {
		  fill: rgba(124, 221, 215, .75) !important;
		}
		
		
		#imFooter .social-icon a:hover svg path,
		#imFooter .social-icon a:hover svg circle {
		  fill: #ffffff !important;
		}
		
		
		/* Copyright */
		#imFooter_imTextObject_02,
		#imFooter_imTextObject_02 span,
		#imFooter_imTextObject_02 div {
		  color: rgba(216, 232, 234, .58) !important;
		}
		
		
		/* =========================================================
		   14. RESPONSIVE – SIDEBAR
		
		   Der Umbruch erfolgt erst unter 900 px.
		   Das war die funktionierende Variante.
		   ========================================================= */
		
		@media (max-width: 900px) {
		
		  #imBlogPage {
		    display: block !important;
		
		    width: 100% !important;
		    max-width: 100% !important;
		    min-width: 0 !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  #imBlogContent {
		    display: block !important;
		
		    float: none !important;
		    clear: both !important;
		
		    width: 100% !important;
		    max-width: 100% !important;
		    min-width: 0 !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  #imBlogSidebar {
		    display: block !important;
		
		    float: none !important;
		    clear: both !important;
		
		    width: 100% !important;
		    max-width: 100% !important;
		    min-width: 0 !important;
		
		    margin: 42px auto 0 auto !important;
		    padding: 0 16px !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  #imBlogSidebar > * {
		    width: 100% !important;
		    max-width: 560px !important;
		
		    margin-left: auto !important;
		    margin-right: auto !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  .blog-sidebar-cta {
		    padding: 18px !important;
		    text-align: center !important;
		  }
		
		
		  .blog-sidebar-cta a {
		    display: block !important;
		
		    width: auto !important;
		    max-width: 320px !important;
		
		    margin: 0 auto !important;
		  }
		}
		
		
		/* =========================================================
		   15. RESPONSIVE – BLOGKARTEN
		
		   Erst unter 760 px auf eine Spalte.
		   ========================================================= */
		
		@media (max-width: 760px) {
		
		  #imBlogContent .blog-cardlayout-wrapper {
		    display: block !important;
		
		    width: 100% !important;
		    max-width: 100% !important;
		    min-width: 0 !important;
		
		    padding-left: 14px !important;
		    padding-right: 14px !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  #imBlogContent
		  .blog-cardlayout-wrapper
		  .im-cc-BlogPostCard {
		
		    display: block !important;
		
		    width: calc(100% - 28px) !important;
		    max-width: 620px !important;
		    min-width: 0 !important;
		
		    margin: 0 auto 28px auto !important;
		
		    box-sizing: border-box !important;
		  }
		
		
		  #imBlogContent
		  .blog-cardlayout-wrapper
		  .im-cc-BlogPostCard img {
		
		    display: block !important;
		
		    width: 100% !important;
		    max-width: 100% !important;
		
		    height: auto !important;
		  }
		}
		
		
		/* =========================================================
		   16. RESPONSIVE – INTRO
		   ========================================================= */
		
		@media (max-width: 768px) {
		
		  .blog-intro-seo {
		    margin: 0 auto 30px auto;
		    padding: 0 18px;
		  }
		
		
		  .blog-intro-seo h1 {
		    font-size: 28px;
		    line-height: 1.15;
		  }
		
		
		  .blog-intro-seo p {
		    font-size: 16px;
		    line-height: 1.55;
		  }
		}
		
		
		/* =========================================================
		   17. KLEINE SMARTPHONES
		   ========================================================= */
		
		@media (max-width: 480px) {
		
		  .blog-intro-seo {
		    padding-left: 16px;
		    padding-right: 16px;
		  }
		
		
		  .blog-intro-seo h1 {
		    font-size: 26px;
		    line-height: 1.15;
		  }
		
		
		  .blog-intro-seo p {
		    font-size: 15px;
		    line-height: 1.55;
		  }
		
		
		  #imBlogContent .blog-cardlayout-wrapper {
		    padding-left: 8px !important;
		    padding-right: 8px !important;
		  }
		
		
		  #imBlogContent
		  .blog-cardlayout-wrapper
		  .im-cc-BlogPostCard {
		
		    width: calc(100% - 8px) !important;
		
		    margin-left: auto !important;
		    margin-right: auto !important;
		  }
		}
		
		

		html.tb-blog-article-url #imHeader.tb-logo-tab-ready {
		  background-size: var(--tb-logo-background-size) !important;
		}
		html.tb-blog-article-url #imHeader_imObjectImage_15_wrapper {
		  overflow: visible !important;
		}
		html.tb-blog-article-url #imHeader.tb-logo-tab-ready
		#imHeader_imObjectImage_15_wrapper::before {
		  content: "";
		  position: absolute;
		  top: var(--tb-logo-tab-top);
		  left: -10px;
		  right: -10px;
		  bottom: -14px;
		  z-index: 0;
		  border-radius: 0 0 22px 22px;
		  background-image: var(--tb-logo-background-image);
		  background-size: var(--tb-logo-background-size);
		  background-position: var(--tb-logo-background-position);
		  background-repeat: no-repeat;
		  pointer-events: none;
		}
		

		
		/* =========================================================
		   ALLGEMEINE WEBSITE-ANPASSUNGEN
		   ========================================================= */
		
		#imContent {
		  margin-top: -75px !important;
		}
		
		#imHeader {
		  z-index: 3000 !important;
		}
		
		
		
		
		  
		
		
		/* =========================================================
		   HERVORGEHOBENE TEXTE
		   ========================================================= */
		
		.highlighted {
		  position: relative;
		  display: inline-block;
		  font-family: Georgia, serif;
		  font-size: 28pt;
		  color: #000000;
		}
		
		.highlighted::before {
		  content: "";
		  position: absolute;
		  left: -2px;
		  right: -2px;
		  bottom: 0;
		  height: 50%;
		  background-color: rgba(50, 118, 114, 0.3);
		  z-index: -1;
		}
		
		
		/* =========================================================
		   H1 INNERHALB BESTEHENDER HERO-BEREICHE
		   ========================================================= */
		
		.hero-h1 {
		  margin: 0;
		  padding: 0;
		  color: inherit;
		  font-family: inherit;
		  font-size: inherit;
		  font-weight: inherit;
		  line-height: inherit;
		}
		
		
		/* Health Coach Tino · Blogdesign 2 · 08.09.2026
		   Ersetzt den bisherigen tb-blog-Style vollständig.
		   Website-Farben: Navy #0d1a27, Petrol #3a9d98, Mint #55c3bc.
		   Bestehende Klassennamen bleiben kompatibel. */
		body .tb-blog-lead,
		body .tb-blog-info,
		body .tb-blog-h2,
		body .tb-blog-h2-test,
		body .tb-blog-subline,
		body .tb-blog-text,
		body .tb-blog-card,
		body .tb-blog-card-title,
		body .tb-blog-info-title {
		  --tb-navy: #0d1a27;
		  --tb-heading: #102938;
		  --tb-text: #284352;
		  --tb-petrol: #3a9d98;
		  --tb-mint: #55c3bc;
		  --tb-link: #1c6d69;
		  --tb-muted: #526873;
		  --tb-line: #dbe6ea;
		  box-sizing: border-box !important;
		  font-family: inherit !important;
		  letter-spacing: 0 !important;
		  overflow-wrap: anywhere !important;
		}
		/* Grundschrift: Website-X5-Schrift erben (aktuell Lato). */
		body .tb-blog-lead,
		body .tb-blog-info,
		body .tb-blog-text,
		body .tb-blog-card {
		  display: block !important;
		  color: var(--tb-text) !important;
		  font-size: 16px !important;
		  font-weight: 400 !important;
		  font-style: normal !important;
		  line-height: 1.65 !important;
		  -webkit-text-size-adjust: 100% !important;
		  text-size-adjust: 100% !important;
		}
		body .tb-blog-lead *,
		body .tb-blog-info *,
		body .tb-blog-text *,
		body .tb-blog-card *,
		body .tb-blog-subline * {
		  color: inherit !important;
		  font-family: inherit !important;
		  font-size: inherit !important;
		  line-height: inherit !important;
		  letter-spacing: inherit !important;
		}
		/* Einstieg: die dunkle Farbwelt der Website als kompakter Akzent. */
		body .tb-blog-lead {
		  margin: 0 0 20px !important;
		  padding: 24px 26px !important;
		  border: 1px solid #203d49 !important;
		  border-left: 5px solid var(--tb-mint) !important;
		  border-radius: 16px !important;
		  background: linear-gradient(120deg, #0d1a27 0%, #153440 100%) !important;
		  color: #f4f7f8 !important;
		  font-size: 19px !important;
		  line-height: 1.6 !important;
		  box-shadow: 0 8px 24px rgba(13,26,39,.08) !important;
		}
		/* Kurz erklärt: helle Mintfläche. */
		body .tb-blog-info {
		  margin: 18px 0 22px !important;
		  padding: 20px 22px !important;
		  border: 1px solid #cce5e1 !important;
		  border-left: 5px solid var(--tb-petrol) !important;
		  border-radius: 12px !important;
		  background: #edf8f6 !important;
		}
		body .tb-blog-info-title {
		  display: block !important;
		  margin: 0 0 8px !important;
		  color: var(--tb-heading) !important;
		  font-size: 22px !important;
		  font-weight: 700 !important;
		  line-height: 1.3 !important;
		}
		body .tb-blog-h2,
		body .tb-blog-h2-test {
		  display: block !important;
		  margin: 28px 0 10px !important;
		  padding: 2px 0 2px 13px !important;
		  border-left: 4px solid var(--tb-petrol) !important;
		  color: var(--tb-heading) !important;
		  font-size: 27px !important;
		  font-weight: 700 !important;
		  line-height: 1.3 !important;
		  scroll-margin-top: 100px !important;
		}
		body .tb-blog-h2 *,
		body .tb-blog-h2-test * {
		  color: inherit !important;
		  font-family: inherit !important;
		  font-size: inherit !important;
		  font-weight: inherit !important;
		  line-height: inherit !important;
		}
		body .tb-blog-subline {
		  display: block !important;
		  margin: -1px 0 16px !important;
		  padding: 0 !important;
		  color: var(--tb-muted) !important;
		  font-size: 16px !important;
		  font-style: italic !important;
		  font-weight: 400 !important;
		  line-height: 1.55 !important;
		}
		body .tb-blog-text {
		  margin: 0 0 12px !important;
		  padding: 0 !important;
		}
		body .tb-blog-card {
		  margin: 10px 0 !important;
		  padding: 18px 20px !important;
		  border: 1px solid var(--tb-line) !important;
		  border-radius: 12px !important;
		  background: #ffffff !important;
		  box-shadow: 0 3px 12px rgba(13,26,39,.035) !important;
		}
		body .tb-blog-card-title {
		  display: block !important;
		  margin: 0 0 7px !important;
		  color: var(--tb-heading) !important;
		  font-size: 18px !important;
		  font-weight: 700 !important;
		  line-height: 1.35 !important;
		}
		/* Alte Namen absichtlich beibehalten: kein Artikelumbau erforderlich. */
		body .tb-blog-card-blue {
		  border-top: 4px solid var(--tb-petrol) !important;
		  background: #edf8f6 !important;
		}
		body .tb-blog-card-orange {
		  border-top: 4px solid #284352 !important;
		  background: #f7fafb !important;
		}
		/* Links bleiben auch innerhalb der Vererbungsregeln erkennbar. */
		body :is(.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a {
		  color: var(--tb-link) !important;
		  text-decoration: underline !important;
		  text-decoration-thickness: 1px !important;
		  text-underline-offset: 3px !important;
		}
		body :is(.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a:hover {
		  color: var(--tb-heading) !important;
		  text-decoration-thickness: 2px !important;
		}
		body .tb-blog-lead a {
		  color: #8ae0d7 !important;
		  text-decoration: underline !important;
		  text-underline-offset: 3px !important;
		}
		body .tb-blog-lead a:hover { color: #ffffff !important; }
		body :is(.tb-blog-lead,.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a:focus-visible {
		  outline: 2px solid currentColor !important;
		  outline-offset: 4px !important;
		  border-radius: 2px !important;
		}
		@media only screen and (max-width: 768px) {
		  body .tb-blog-lead { margin-bottom:16px !important; padding:19px 20px !important; font-size:17px !important; border-radius:12px !important; }
		  body .tb-blog-info { margin:16px 0 20px !important; padding:17px 18px !important; border-left-width:4px !important; }
		  body .tb-blog-info-title { font-size:20px !important; margin-bottom:6px !important; }
		  body .tb-blog-h2, body .tb-blog-h2-test { margin:24px 0 8px !important; padding-left:10px !important; font-size:23px !important; }
		  body .tb-blog-subline { margin-bottom:13px !important; font-size:15px !important; }
		  body .tb-blog-text { margin-bottom:10px !important; }
		  body .tb-blog-card { margin:8px 0 !important; padding:16px 18px !important; }
		  body .tb-blog-card-title { font-size:18px !important; }
		}
		@media only screen and (max-width: 480px) {
		  body .tb-blog-lead { margin-bottom:14px !important; padding:17px 18px !important; font-size:16px !important; }
		  body .tb-blog-info { margin:14px 0 18px !important; padding:15px 16px !important; }
		  body .tb-blog-info-title { font-size:19px !important; }
		  body .tb-blog-h2, body .tb-blog-h2-test { margin:22px 0 7px !important; font-size:21px !important; }
		  body .tb-blog-subline { margin-bottom:12px !important; font-size:15px !important; }
		  body .tb-blog-card { padding:15px 16px !important; }
		  body .tb-blog-card-title { font-size:17px !important; }
		}