/* ==========================================================================
   transformis® · Content (Gutenberg-Block-Styles, geteilt)
   --------------------------------------------------------------------------
   Wird auf JEDEM Template benutzt, das Gutenberg-Content rendert.
   Klasse `.tm-content` an den Content-Wrapper anhaengen.
   Das Layout (Breite, Padding) macht das Page-CSS, NICHT diese Datei.

   Beispiel:
     <div class="tm-standard__content-inner tm-content">
       <?php the_content(); ?>
     </div>
   ========================================================================== */

/* Reset Geschwister-Abstaende, Margins steuern wir pro Element bewusst */
.tm-content > * {
  margin-top: 0;
}

.tm-content > *:last-child {
  margin-bottom: 0;
}

/* ── Absaetze: body-m ── */
.tm-content p {
  font-family: var(--tm-font-body, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-regular, 400);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-black, #1A1A1A);
  margin: 0 0 24px;
}

/* ── Headings ── */
.tm-content h1 {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-extrabold, 800);
  font-size: 40px;
  line-height: 1.3;
  color: var(--tm-blue, #05132C);
  margin: 0 0 32px;
}

.tm-content h2 {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-extrabold, 800);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.3;
  color: var(--tm-blue, #05132C);
  margin: 48px 0 24px;
}

.tm-content h3 {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-extrabold, 800);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
  color: var(--tm-blue, #05132C);
  margin: 40px 0 16px;
}

.tm-content h4 {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-extrabold, 800);
  font-size: 20px;
  line-height: 1.3;
  color: var(--tm-blue, #05132C);
  margin: 32px 0 12px;
}

.tm-content > h1:first-child,
.tm-content > h2:first-child,
.tm-content > h3:first-child,
.tm-content > h4:first-child {
  margin-top: 0;
}

/* ── Strong / Bold ── */
.tm-content strong,
.tm-content b {
  font-weight: var(--tm-fw-bold, 700);
  color: var(--tm-blue, #05132C);
}

/* ── Links (mit !important gegen The7-Overrides) ──
   .tm-btn ausgenommen: Buttons behalten 1:1 ihr globales Styling/Hover. */
.tm-content a:not(.tm-btn) {
  color: var(--tm-blue, #05132C) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: opacity 0.2s ease !important;
}

.tm-content a:not(.tm-btn):hover {
  color: var(--tm-blue, #05132C) !important;
  opacity: 0.7 !important;
}

/* ── Listen ── */
.tm-content ul,
.tm-content ol {
  font-family: var(--tm-font-body, "Open Sans", sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-black, #1A1A1A);
  margin: 0 0 24px;
  padding-left: 24px;
}

.tm-content li {
  margin-bottom: 8px;
}

/* ── Gutenberg Button Block ── */
.tm-content .wp-block-button {
  margin: 32px 0 24px !important;
}

.tm-content .wp-block-button__link {
  display: inline-block !important;
  padding: 12px 17px !important;
  background: var(--tm-green, #ABFF00) !important;
  color: var(--tm-blue, #05132C) !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-family: var(--tm-font-body, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-bold, 700) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  border: 1px solid var(--tm-green, #ABFF00) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.tm-content .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--tm-green, #ABFF00), black 10%) !important;
  border-color: color-mix(in srgb, var(--tm-green, #ABFF00), black 10%) !important;
  color: var(--tm-blue, #05132C) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Outline-Variante (Gutenberg "Outline"-Style) */
.tm-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--tm-blue, #05132C) !important;
  border-color: var(--tm-blue, #05132C) !important;
}

.tm-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--tm-green, #ABFF00) !important;
  border-color: var(--tm-green, #ABFF00) !important;
  color: var(--tm-blue, #05132C) !important;
}


/* ==========================================================================
   Bild-Block: Hintergrundflaeche (Block-Style-Varianten)
   --------------------------------------------------------------------------
   Farbige Flaeche hinter dem Bild, die bis an die Content-Raender reicht;
   Bild sitzt zentriert darauf. Auswahl im Editor via "Stile"-Panel.
   Frontend-Regeln bewusst HIER (immer geladene Komponente), da inline_style
   aus register_block_style() im Frontend nicht zuverlaessig durchkommt.
   ========================================================================== */

.wp-block-image.is-style-tm-image-grey,
.wp-block-image.is-style-tm-image-blue {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(24px, 4vw, 56px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-image.is-style-tm-image-grey img,
.wp-block-image.is-style-tm-image-blue img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wp-block-image.is-style-tm-image-grey figcaption,
.wp-block-image.is-style-tm-image-blue figcaption {
  text-align: center !important;
}

.wp-block-image.is-style-tm-image-grey {
  background: #F3F3F3 !important;
}

.wp-block-image.is-style-tm-image-blue {
  background: var(--tm-blue, #05132C) !important;
}

.wp-block-image.is-style-tm-image-blue figcaption {
  color: var(--tm-white-soft, #FAFCFC) !important;
}