/* IBMH Presse & Marke (/presse-marke/) — D-brand, 2026-09-20, Buttonsystem 2026-09-21.
 * Nur fuer die Komponenten [ibmh_brand_*]. Keine globalen Selektoren, keine
 * Aenderung an bestehenden Klassen. Laedt nach ibmh-components.css und benutzt
 * deren Tokens; die Tokens sind dort auf .entry-content/.wp-block-post-content
 * gesetzt, deshalb hier ueberall Fallback-Werte.
 *
 * Layout-Stabilitaet ist hier eine harte Regel: Ein Klick auf einen Knopf darf
 * keine einzige Box der Seite veraendern. Deshalb
 *   - reserviert jeder Knopf die Flaeche der laengsten Beschriftung vorab
 *     (Grid-Stapel in .ibmh-brand-btn__swap, alle Varianten in derselben Zelle),
 *   - liegt das Icon in einer festen 18x18-Box, in der die Varianten gestapelt
 *     sind (kein Icon wird eingefuegt oder entfernt),
 *   - steht die Statusmeldung fuer Screenreader vollstaendig ausserhalb des
 *     Layoutflusses (.ibmh-brand-status, position: absolute, 1x1 px),
 *   - wirkt jede Bewegung ausschliesslich ueber transform/opacity/Farbe,
 *     also nie ueber Groesse, Abstand oder Position im Fluss.
 */

/* --- Nur-fuer-Screenreader ------------------------------------------------ */
/* Das Blockthema liefert keine .screen-reader-text. */
.ibmh-brand-sr,
.ibmh-brand-status {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Sicherheitsnetz: Falls eine aeltere, im CDN zwischengespeicherte Fassung des
   Skripts noch ein <span class="ibmh-brand-feedback"> in den Fluss einfuegt,
   bleibt es ohne jede Layoutwirkung. Frueher war genau das die Ursache fuer
   +27 bis +101 px Kartenhoehe pro Klick. */
.ibmh-brand-feedback {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ===========================================================================
 * Buttonsystem — vier Stufen, ein Raster
 *
 *   --primary    Markenpaket herunterladen        (gefuellt, Markenblau)
 *   --secondary  SVG/PNG/PDF/Brand Kit            (Kontur auf Weiss)
 *   --utility    HEX/Text/Prompt kopieren         (getoente Flaeche)
 *   --ai         Mit ChatGPT / Claude verwenden   (Kontur mit Akzentblau)
 *
 * Einheitlich: Radius (Pille), Mindesthoehe 48 px, Typografie 0.9rem/700,
 * Icon 18 px, gleiche Hover-/Active-/Focus-/Disabled-Logik.
 * ========================================================================= */

.entry-content .ibmh-brand-btn,
.wp-block-post-content .ibmh-brand-btn,
.ibmh-brand-btn {
  --ibmh-brand-btn-h: 48px;
  --ibmh-brand-btn-lift: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: var(--ibmh-brand-btn-h);
  margin: 0;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--ibmh-radius-pill, 999px);
  background: transparent;
  color: var(--ibmh-blue-700, #1848a0);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 160ms var(--ibmh-ease-out, ease),
    border-color 160ms var(--ibmh-ease-out, ease),
    color 160ms var(--ibmh-ease-out, ease),
    box-shadow 160ms var(--ibmh-ease-out, ease),
    transform 160ms var(--ibmh-ease-out, ease);
}

/* Beschriftungsstapel: alle Zustaende liegen in derselben Grid-Zelle, die Spalte
   ist deshalb so breit wie die laengste Variante. Der Wechsel
   „HEX kopieren" -> „Kopiert" aendert die Breite damit um 0 px. */
.ibmh-brand-btn__swap {
  display: grid;
  grid-template-areas: "swap";
  align-items: center;
  justify-items: center;
  min-width: 0;
}
.ibmh-brand-btn__swap > * { grid-area: swap; }
/* Die Zustandstexte stehen im HTML mit hidden. Nur wenn diese Datei geladen ist,
   werden sie wieder Teil des Stapels und reservieren die Breite. Fehlt sie (alte
   Datei im CDN, im Browsercache oder in einer minifizierten Kopie), bleibt das
   hidden wirksam und der Knopf zeigt einfach nur seinen Ausgangstext. */
.ibmh-brand-btn__swap > .ibmh-brand-btn__label[hidden] { display: block; }
.ibmh-brand-btn__icon > span[hidden] { display: block; }
.ibmh-brand-btn__label { transition: opacity 140ms var(--ibmh-ease-out, ease); }
/* visibility statt display: haelt die Zelle auf Maximalbreite und nimmt den
   inaktiven Text zugleich aus dem Accessibility-Tree. */
.ibmh-brand-btn__label--done,
.ibmh-brand-btn__label--error { visibility: hidden; opacity: 0; }
.ibmh-brand-btn[data-state="done"] .ibmh-brand-btn__label--idle,
.ibmh-brand-btn[data-state="error"] .ibmh-brand-btn__label--idle { visibility: hidden; opacity: 0; }
.ibmh-brand-btn[data-state="done"] .ibmh-brand-btn__label--done { visibility: visible; opacity: 1; }
.ibmh-brand-btn[data-state="error"] .ibmh-brand-btn__label--error { visibility: visible; opacity: 1; }

/* Iconbox: feste Groesse, Varianten gestapelt. Es wird nie ein Icon ein- oder
   ausgehaengt, nur die Deckkraft getauscht. */
.ibmh-brand-btn__icon {
  display: grid;
  grid-template-areas: "icon";
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.ibmh-brand-btn__icon > span,
.ibmh-brand-btn__icon > span[hidden] {
  grid-area: icon;
  display: block;
  width: 18px;
  height: 18px;
  transition: opacity 140ms var(--ibmh-ease-out, ease), transform 140ms var(--ibmh-ease-out, ease);
}
.ibmh-brand-btn__icon svg { display: block; width: 18px; height: 18px; }
.ibmh-brand-btn__icon-done { opacity: 0; transform: scale(0.7); }
.ibmh-brand-btn[data-state="done"] .ibmh-brand-btn__icon-idle { opacity: 0; transform: scale(0.7); }
.ibmh-brand-btn[data-state="done"] .ibmh-brand-btn__icon-done { opacity: 1; transform: scale(1); }
.ibmh-brand-btn[data-state="error"] .ibmh-brand-btn__icon-idle { opacity: 0.45; }

/* Zusaetze in der Beschriftung (Dateigroesse) brechen nicht mitten im Klammerwert. */
.ibmh-brand-btn__note { font-weight: 400; opacity: 0.85; white-space: nowrap; }

/* --- Varianten ----------------------------------------------------------- */
.entry-content .ibmh-brand-btn--primary,
.wp-block-post-content .ibmh-brand-btn--primary,
.ibmh-brand-btn--primary {
  background: var(--ibmh-blue-700, #1848a0);
  border-color: var(--ibmh-blue-700, #1848a0);
  color: #fff;
}
.entry-content .ibmh-brand-btn--secondary,
.wp-block-post-content .ibmh-brand-btn--secondary,
.ibmh-brand-btn--secondary {
  background: #fff;
  border-color: rgba(24, 72, 160, 0.28);
  color: var(--ibmh-blue-700, #1848a0);
}
.entry-content .ibmh-brand-btn--utility,
.wp-block-post-content .ibmh-brand-btn--utility,
.ibmh-brand-btn--utility {
  background: rgba(24, 72, 160, 0.06);
  border-color: rgba(24, 72, 160, 0.20);
  color: var(--ibmh-blue-700, #1848a0);
}
.entry-content .ibmh-brand-btn--ai,
.wp-block-post-content .ibmh-brand-btn--ai,
.ibmh-brand-btn--ai {
  background: linear-gradient(180deg, rgba(30, 159, 233, 0.10) 0%, rgba(24, 72, 160, 0.08) 100%);
  border-color: rgba(24, 72, 160, 0.32);
  color: var(--ibmh-blue-800, #123a86);
}

/* Die Download-Knoepfe sind <a>. Das Blockthema faerbt Links im Inhaltsbereich,
   deshalb hier noch einmal mit Typselektor (gleiche Spezifitaet, spaetere Datei). */
.entry-content a.ibmh-brand-btn,
.wp-block-post-content a.ibmh-brand-btn { text-decoration: none; }
.entry-content a.ibmh-brand-btn--primary,
.wp-block-post-content a.ibmh-brand-btn--primary { color: #fff; }
.entry-content a.ibmh-brand-btn--secondary,
.wp-block-post-content a.ibmh-brand-btn--secondary { color: var(--ibmh-blue-700, #1848a0); }
.entry-content a.ibmh-brand-btn--primary:hover,
.wp-block-post-content a.ibmh-brand-btn--primary:hover { color: #fff; }
.entry-content a.ibmh-brand-btn--secondary:hover,
.wp-block-post-content a.ibmh-brand-btn--secondary:hover { color: var(--ibmh-blue-700, #1848a0); }

/* --- Zustaende ------------------------------------------------------------ */
.entry-content .ibmh-brand-btn:hover,
.wp-block-post-content .ibmh-brand-btn:hover,
.ibmh-brand-btn:hover {
  transform: translateY(var(--ibmh-brand-btn-lift));
  box-shadow: 0 6px 16px rgba(13, 43, 99, 0.14);
}
.entry-content .ibmh-brand-btn--primary:hover,
.wp-block-post-content .ibmh-brand-btn--primary:hover,
.ibmh-brand-btn--primary:hover {
  background: var(--ibmh-blue-600, #1f63c4);
  border-color: var(--ibmh-blue-600, #1f63c4);
  color: #fff;
}
.entry-content .ibmh-brand-btn--secondary:hover,
.wp-block-post-content .ibmh-brand-btn--secondary:hover,
.ibmh-brand-btn--secondary:hover { background: rgba(24, 72, 160, 0.08); border-color: rgba(24, 72, 160, 0.42); color: var(--ibmh-blue-700, #1848a0); }
.entry-content .ibmh-brand-btn--utility:hover,
.wp-block-post-content .ibmh-brand-btn--utility:hover,
.ibmh-brand-btn--utility:hover { background: rgba(24, 72, 160, 0.13); border-color: rgba(24, 72, 160, 0.34); }
.entry-content .ibmh-brand-btn--ai:hover,
.wp-block-post-content .ibmh-brand-btn--ai:hover,
.ibmh-brand-btn--ai:hover { border-color: rgba(24, 72, 160, 0.48); color: var(--ibmh-blue-900, #0d2b63); }

/* Kleine, ruhige Iconbewegung beim Hover — transform, also ohne Layoutwirkung. */
.ibmh-brand-btn--secondary:hover .ibmh-brand-btn__icon-idle,
.ibmh-brand-btn--primary:hover .ibmh-brand-btn__icon-idle { transform: translateY(1px); }
.ibmh-brand-btn--ai:hover .ibmh-brand-btn__icon-idle { transform: translateX(1px); }

.entry-content .ibmh-brand-btn:active,
.wp-block-post-content .ibmh-brand-btn:active,
.ibmh-brand-btn:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(13, 43, 99, 0.20); }

.entry-content .ibmh-brand-btn:focus-visible,
.wp-block-post-content .ibmh-brand-btn:focus-visible,
.ibmh-brand-btn:focus-visible {
  outline: 3px solid var(--ibmh-blue-900, #0d2b63);
  outline-offset: 2px;
}

.ibmh-brand-btn[data-state="done"] { border-color: rgba(24, 72, 160, 0.45); }
.entry-content .ibmh-brand-btn--utility[data-state="done"],
.wp-block-post-content .ibmh-brand-btn--utility[data-state="done"],
.ibmh-brand-btn--utility[data-state="done"] { background: rgba(24, 72, 160, 0.16); }
.entry-content .ibmh-brand-btn--secondary[data-state="done"],
.wp-block-post-content .ibmh-brand-btn--secondary[data-state="done"],
.ibmh-brand-btn--secondary[data-state="done"] { background: rgba(24, 72, 160, 0.10); }
.ibmh-brand-btn[data-state="error"] { border-color: rgba(155, 28, 28, 0.55); color: #9b1c1c; }
.entry-content .ibmh-brand-btn--primary[data-state="error"],
.wp-block-post-content .ibmh-brand-btn--primary[data-state="error"],
.ibmh-brand-btn--primary[data-state="error"] { color: #fff; background: #9b1c1c; border-color: #9b1c1c; }

.entry-content .ibmh-brand-btn[disabled],
.entry-content .ibmh-brand-btn[aria-disabled="true"],
.wp-block-post-content .ibmh-brand-btn[disabled],
.wp-block-post-content .ibmh-brand-btn[aria-disabled="true"],
.ibmh-brand-btn[disabled],
.ibmh-brand-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* --- Raster ------------------------------------------------------------- */
.ibmh-brand-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.ibmh-brand-grid--assets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ibmh-brand-grid--colors { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ibmh-brand-grid--two    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- Panel (Grundkarte) -------------------------------------------------- */
.ibmh-brand-panel {
  background: #fff;
  border: 1px solid rgba(24, 72, 160, 0.14);
  border-radius: var(--ibmh-radius-md, 18px);
  padding: 1.35rem 1.45rem;
  box-shadow: 0 10px 28px rgba(13, 43, 99, 0.06);
}
.ibmh-brand-panel > :first-child { margin-top: 0; }
.ibmh-brand-panel > :last-child { margin-bottom: 0; }
.ibmh-brand-panel h3 {
  font-size: 1.06rem;
  margin: 0 0 0.6rem;
  color: var(--ibmh-ink, #161616);
}
.ibmh-brand-panel p { color: #33405a; font-size: 0.95rem; line-height: 1.6; }

.ibmh-brand-list { margin: 0.6rem 0 1rem; padding-left: 1.15rem; color: #33405a; font-size: 0.93rem; }
.ibmh-brand-list li { margin: 0 0 0.35rem; }
.ibmh-brand-list code {
  background: rgba(24, 72, 160, 0.07);
  border-radius: 6px;
  padding: 0.08em 0.4em;
  font-size: 0.92em;
}

.ibmh-brand-footnote {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ibmh-text-muted, #51607a);
  max-width: 68ch;
}

/* --- Asset-Karten -------------------------------------------------------- */
.ibmh-brand-asset {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(24, 72, 160, 0.14);
  border-radius: var(--ibmh-radius-md, 18px);
  overflow: hidden;
}
.ibmh-brand-asset__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1.2rem;
  min-height: 108px;
  background:
    linear-gradient(135deg, #f6f9fd 0%, #eef4fb 100%);
  border-bottom: 1px solid rgba(24, 72, 160, 0.10);
}
.ibmh-brand-asset__preview img { width: 100%; max-width: 210px; height: auto; display: block; }
.ibmh-brand-asset__preview--mark { background: #fff; }
.ibmh-brand-asset__preview--mark img { max-width: 76px; }
.ibmh-brand-asset__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.05rem 1.15rem 1.2rem;
}
.ibmh-brand-asset__name { font-size: 0.98rem; margin: 0 0 0.55rem; color: var(--ibmh-ink, #161616); }
.ibmh-brand-asset__meta { margin: 0 0 0.6rem; display: grid; gap: 0.18rem; }
.ibmh-brand-asset__meta > div { display: flex; gap: 0.5rem; font-size: 0.86rem; }
.ibmh-brand-asset__meta dt { flex: 0 0 4.6rem; color: var(--ibmh-text-muted, #51607a); margin: 0; }
.ibmh-brand-asset__meta dd { margin: 0; color: #33405a; font-weight: 600; }
.ibmh-brand-asset__note { margin: 0 0 1rem; font-size: 0.86rem; color: var(--ibmh-text-muted, #51607a); }
.ibmh-brand-asset .ibmh-brand-dl { margin-top: auto; align-self: flex-start; }

/* --- Farben -------------------------------------------------------------- */
.ibmh-brand-color {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(24, 72, 160, 0.14);
  border-radius: var(--ibmh-radius-md, 18px);
  overflow: hidden;
}
.ibmh-brand-color__chip { display: block; height: 82px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.ibmh-brand-color__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ibmh-brand-color__name { font-size: 0.98rem; margin: 0 0 0.55rem; color: var(--ibmh-ink, #161616); }
.ibmh-brand-color__role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibmh-blue-700, #1848a0);
  background: rgba(24, 72, 160, 0.08);
  border-radius: 999px;
  padding: 0.14em 0.6em;
  vertical-align: 0.1em;
}
.ibmh-brand-color__meta { margin: 0 0 0.85rem; display: grid; gap: 0.2rem; }
.ibmh-brand-color__meta > div { display: flex; gap: 0.5rem; font-size: 0.86rem; }
.ibmh-brand-color__meta dt { flex: 0 0 3.2rem; color: var(--ibmh-text-muted, #51607a); margin: 0; }
.ibmh-brand-color__meta dd { margin: 0; color: #33405a; }
.ibmh-brand-color__meta code { font-size: 0.92em; letter-spacing: 0.02em; }
.ibmh-brand-color .ibmh-brand-copy { margin-top: auto; align-self: flex-start; }

/* --- Logoverwendung ------------------------------------------------------ */
.ibmh-brand-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ibmh-brand-rules li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #33405a;
}
.ibmh-brand-rules__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  margin-top: 0.05rem;
}
.ibmh-brand-rules__mark--do   { background: rgba(24, 72, 160, 0.10); color: #10467a; }
.ibmh-brand-rules__mark--dont { background: rgba(155, 28, 28, 0.10); color: #9b1c1c; }
.ibmh-brand-panel--do   { border-color: rgba(24, 72, 160, 0.22); }
.ibmh-brand-panel--dont { border-color: rgba(155, 28, 28, 0.20); }
.ibmh-brand-panel--note { margin-top: 1.1rem; background: #f6f9fd; }

/* --- Schutzraum-Grafik ---------------------------------------------------
 * Der Innenabstand des Rahmens ist gemessen, nicht geschaetzt: ein Dach-Balken der
 * Bildmarke ist in IBMH_Logo_Horizontal_RGB_600px.png an den Aussenkanten 37 px hoch,
 * also rund 6,2 % der Logobreite. Prozentuales padding bezieht sich auf die Breite des
 * umgebenden Blocks (.__stage); 5,5 % davon ergeben nach Abzug beider Raender genau
 * 6,2 % der dann verbleibenden Logobreite. Skaliert damit auf jeder Viewportbreite mit. */
.ibmh-brand-clearspace { margin: 0 0 1.2rem; }
.ibmh-brand-clearspace__stage {
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 0.9rem;
  border: 1px solid rgba(24, 72, 160, 0.12);
}
.ibmh-brand-clearspace__frame {
  padding: 5.5%;
  border: 2px dashed rgba(24, 72, 160, 0.45);
  border-radius: 4px;
}
.ibmh-brand-clearspace__frame img { display: block; width: 100%; height: auto; }
.ibmh-brand-clearspace figcaption {
  margin-top: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ibmh-text-muted, #51607a);
  max-width: 420px;
}
/* Regel-Definitionsliste im Hinweis-Panel: etwas mehr Luft als die Datenliste */
.ibmh-brand-dl-list--rules { gap: 0.9rem; margin: 0 0 0.4rem; }
.ibmh-brand-dl-list--rules dd { color: #33405a; }
/* Die Absaetze nach der Regelliste brauchen sichtbaren Abstand, sonst lesen sie sich
   wie eine Fortsetzung der Mindestgroessen-Regel. */
.ibmh-brand-panel--note > p { margin: 1rem 0 0; }

/* --- Schriften ----------------------------------------------------------- */
.ibmh-brand-font { text-align: left; }
.entry-content .ibmh-brand-font__sample,
.wp-block-post-content .ibmh-brand-font__sample,
.ibmh-brand-font__sample { margin: 0 0 0.5rem; font-size: 2.6rem; line-height: 1.05; color: var(--ibmh-blue-700, #1848a0); }
.ibmh-brand-font__sample--display { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; }
.ibmh-brand-font__sample--body { font-family: "Open Sans", system-ui, sans-serif; font-weight: 400; }

/* --- Unternehmenstexte --------------------------------------------------- */
.ibmh-brand-texts { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.ibmh-brand-text__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.ibmh-brand-text__head h3 { margin: 0; }
.ibmh-brand-text__meta {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ibmh-text-muted, #51607a);
}
.ibmh-brand-text__body p { margin: 0 0 0.7rem; max-width: 72ch; }
.ibmh-brand-text__body p:last-child { margin-bottom: 0; }

/* --- Unternehmensdaten --------------------------------------------------- */
.ibmh-brand-dl-list { margin: 0; display: grid; gap: 0.65rem; }
.ibmh-brand-dl-list > div { display: grid; gap: 0.1rem; }
.ibmh-brand-dl-list dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ibmh-text-muted, #51607a);
  margin: 0;
}
.ibmh-brand-dl-list dd { margin: 0; color: #22304d; font-size: 0.95rem; line-height: 1.5; }

/* --- Pressebilder (Rechtepruefung) --------------------------------------- */
.ibmh-brand-panel--pending { background: #fffaf2; border-color: rgba(180, 120, 20, 0.30); }
.ibmh-brand-flag {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #7a4a05;
  background: rgba(180, 120, 20, 0.14);
  border-radius: 999px;
  padding: 0.3em 0.85em;
}

/* --- KI-Bereich ---------------------------------------------------------- */
.ibmh-brand-ai__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1rem 0 0; align-items: center; }
.ibmh-brand-ai__details { margin-top: 1rem; }
.ibmh-brand-ai__details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ibmh-blue-700, #1848a0);
  padding: 0.55rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ibmh-brand-ai__details summary:focus-visible {
  outline: 3px solid var(--ibmh-blue-900, #0d2b63);
  outline-offset: 2px;
  border-radius: var(--ibmh-radius-sm, 10px);
}
.ibmh-brand-ai__prompt {
  margin: 0.5rem 0 0;
  padding: 1rem;
  background: #f6f9fd;
  border: 1px solid rgba(24, 72, 160, 0.14);
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow: auto;
}

/* --- Schmale Viewports --------------------------------------------------- */
@media (max-width: 480px) {
  .ibmh-brand-grid--assets,
  .ibmh-brand-grid--colors,
  .ibmh-brand-grid--two { grid-template-columns: 1fr; }
  .ibmh-brand-panel { padding: 1.1rem 1.05rem; }
  .ibmh-brand-ai__actions { flex-direction: column; align-items: stretch; }
  .ibmh-brand-ai__actions > .ibmh-brand-btn { width: 100%; }
  .ibmh-brand-asset__meta dt { flex-basis: 4.2rem; }
}

/* --- Bewegungsreduktion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .entry-content .ibmh-brand-btn,
  .wp-block-post-content .ibmh-brand-btn,
  .ibmh-brand-btn,
  .ibmh-brand-btn__icon > span,
  .ibmh-brand-btn__label { transition: none; }
  .entry-content .ibmh-brand-btn:hover,
  .wp-block-post-content .ibmh-brand-btn:hover,
  .ibmh-brand-btn:hover { transform: none; }
  .ibmh-brand-btn:hover .ibmh-brand-btn__icon-idle { transform: none; }
  .ibmh-brand-btn__icon-done,
  .ibmh-brand-btn[data-state="done"] .ibmh-brand-btn__icon-idle { transform: none; }
}