/* IBMH Partnerbereich: Logo-Laufband, Partnerübersicht, Partner-Einzelseite.
 *
 * ALLE Selektoren beginnen mit .ibmh-partner. Diese Datei fasst bewusst keine bestehende Klasse
 * und kein Element-Tag global an, damit sie neben ibmh-components.css und house-experience.css
 * liegen kann, ohne dass irgendeine andere Seite sich verändert.
 *
 * Tokens lokal auf dem Wurzelelement der Komponenten gesetzt, gleiche Werte wie in
 * ibmh-components.css (Quelle: brand/tokens.css). Kein :root, damit nichts Globales entsteht.
 */

.ibmh-partner-band,
.ibmh-partner-grid,
.ibmh-partner-kopf,
.ibmh-partner-steckbrief,
.ibmh-partner-website,
.ibmh-partner-leer {
  --ibmh-partner-blue-700: #1848a0;
  --ibmh-partner-blue-600: #1f63c4;
  --ibmh-partner-blue-500: #1e9fe9;
  --ibmh-partner-ink: #161616;
  --ibmh-partner-muted: #51607a;
  --ibmh-partner-line: rgba(24, 72, 160, 0.12);
  --ibmh-partner-flaeche: #f4f6fa;
  /* Grund für die zwei Partnerlogos, die nur als Hell-Version vorliegen.
   * Exakt der mittlere Halt des Footer-Verlaufs (#0d2b63). Zuvor stand hier ein fast schwarzes
   * #0f1a2d — das las sich neben dem Marken-Navy des Footers als Fremdkörper, nicht als System
   * (Fable-Fund 2026-09-09, Footerfarbe im Browser nachgemessen). Weiße Logoschrift steht
   * darauf immer noch bei rund 12:1. */
  --ibmh-partner-dunkel: #0d2b63;
  --ibmh-partner-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ibmh-partner-breite: 1180px;
}

/* ---------------------------------------------------------------------------
 * Logo-Laufband (Startseite)
 *
 * Monochrom über eine CSS-Maske: Die Logodatei liefert nur ihren Alphakanal als Form, die Farbe
 * kommt aus `currentColor`. Damit bleibt die Originaldatei in der Mediathek unverändert — die
 * fremde Marke wird nirgends umgefärbt gespeichert — und die Bandfarbe ist an genau einer Stelle
 * steuerbar. Voraussetzung ist ein freigestelltes Logo; das ist bei allen eingesetzten
 * Partnerlogos geprüft (2026-09-09).
 *
 * Warum Hover NICHT auf die Originalfarben umschaltet: Zwei der Partnerlogos sind reine
 * Hell-Versionen für dunkle Hintergründe. Auf dem hellen Band wäre dort beim Hover die halbe
 * Wortmarke unsichtbar. Der Wechsel geht deshalb von zurückgenommenem Graublau auf kräftiges
 * IBMH-Blau, was bei allen Logos gleich zuverlässig funktioniert.
 * ------------------------------------------------------------------------ */

.ibmh-partner-band {
  --ibmh-band-h: 44px;          /* muss zu BAND_LOGO_HOEHE in partner.php passen */
  --ibmh-band-max: 190px;       /* muss zu BAND_LOGO_MAXBREITE in partner.php passen */
  --ibmh-band-gap: 64px;        /* muss zu BAND_ABSTAND in partner.php passen */
  /* Ruhefarbe: kraeftig genug, dass auch feine Wortmarken lesbar bleiben (rund 5:1 gegen
   * Weiss), aber deutlich zurueckgenommen gegenueber dem aktiven IBMH-Blau. Ein blasseres
   * Grau liess die Schriftzuege im Band ausbleichen (gemessen 2026-09-09). */
  --ibmh-band-ruhe: #5b7096;
  --ibmh-band-aktiv: var(--ibmh-partner-blue-700);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem);
  background: #ffffff;
}

.ibmh-partner-band__inner {
  max-width: var(--ibmh-partner-breite);
  box-sizing: border-box;
  margin: 0 auto;
}

.ibmh-partner-band__titel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibmh-partner-blue-600);
  margin: 0 0 0.6rem;
}

/* Erster Satz als eigenständige Leadzeile: Er trägt die Aussage, der zweite Satz erklärt sie.
 * Als Überschrift wäre er zu laut — darüber steht bereits der Eyebrow —, im Fließtext ginge er
 * unter. */
.ibmh-partner-band__lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ibmh-partner-ink);
  margin: 0 0 0.6rem;
  max-width: 42ch;
}

.ibmh-partner-band__intro {
  color: var(--ibmh-partner-muted);
  margin: 0 0 2rem;
  max-width: 62ch;
}

/* Das Sichtfenster klippt den Streifen. `clip` statt `hidden`, damit kein Scrollcontainer
 * entsteht: Ein Scrollcontainer würde die Seite bei Tastaturfokus im ausgeblendeten Teil
 * seitwärts springen lassen. */
.ibmh-partner-band__fenster {
  max-width: var(--ibmh-partner-breite);
  box-sizing: border-box;
  margin: 0 auto;
  overflow-x: clip;
  /* Weiche Kanten, damit die Logos nicht hart abgeschnitten ein- und austreten. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.ibmh-partner-band__lauf {
  display: flex;
  width: max-content;
  animation: ibmh-partner-band-lauf var(--ibmh-band-dauer, 45s) linear infinite;
  /* will-change bewusst NICHT gesetzt: Der Streifen läuft dauerhaft, eine permanent
   * heraufbeförderte Ebene kostet auf schwachen Geräten mehr, als sie einbringt. */
}

@keyframes ibmh-partner-band-lauf {
  from { transform: translate3d(0, 0, 0); }
  /* Genau EIN vollständiger Satz. Danach steht die nächste Kopie exakt an derselben Stelle,
   * der Sprung zurück auf 0 ist deshalb unsichtbar. */
  to   { transform: translate3d(calc(-100% / var(--ibmh-band-kopien, 3)), 0, 0); }
}

/* Maus: anhalten, solange der Zeiger über dem Band steht. Ohne das müsste man ein bewegtes
 * Ziel treffen. Der Hover ist bewusst der EINZIGE Mausauslöser — siehe unten. */
.ibmh-partner-band__fenster:hover .ibmh-partner-band__lauf {
  animation-play-state: paused;
}

/* Tastatur: NICHT nur anhalten, sondern auf die ruhende Zeile umschalten.
 *
 * Ein bloßes Pausieren genügt nicht. Der Streifen ist im Moment des Tabbens irgendwo mitten im
 * Lauf; der fokussierte Link kann längst aus dem Sichtfenster geschoben sein. Das Band bliebe
 * dann an genau dieser Stelle stehen und der Fokusrahmen säße unsichtbar außerhalb.
 *
 * Der Auslöser ist :focus-visible, NICHT :focus-within. Das ist der entscheidende Unterschied:
 * Ein Mausklick auf ein Logo setzt zwar den Fokus, aber kein :focus-visible. Stand hier zuvor
 * :focus-within, klappte das Band bei jedem Mausdruck in die statische Zeile und sprang dabei
 * auf Position 0 zurück — gemessen 2026-09-09: nach einem Ziehversuch stand `animation: none`
 * und `transform: none`. Genau das war der Fehler „Banner gerät beim Ziehen durcheinander".
 *
 * Fällt :has() aus (sehr alter Browser), greift die Regel gar nicht und es bleibt beim
 * Pausieren per Hover. Das ist die schlechtere, aber unschädliche Rückfallebene. */
.ibmh-partner-band__fenster:has(:focus-visible) {
  overflow-x: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

.ibmh-partner-band__fenster:has(:focus-visible) .ibmh-partner-band__lauf {
  animation: none;
  transform: none;
  width: 100%;
}

.ibmh-partner-band__fenster:has(:focus-visible) .ibmh-partner-band__satz[aria-hidden="true"] {
  display: none;
}

.ibmh-partner-band__fenster:has(:focus-visible) .ibmh-partner-band__satz {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  padding-right: 0;
}

/* Rückfallebene für Browser ohne :has().
 *
 * Dort gäbe es keinen Weg, beim Tabben auf die ruhende Zeile umzuschalten — das Band liefe
 * weiter und könnte den fokussierten Link aus dem Sichtfenster tragen. Statt das in Kauf zu
 * nehmen, läuft es dort gar nicht erst: dieselbe statische, umbrechende Darstellung wie bei
 * reduzierter Bewegung. Alle Partner bleiben sichtbar und erreichbar, nur ohne Bewegung.
 * Betroffen sind ausschließlich sehr alte Browser (:has() ist seit Chrome 105, Safari 15.4 und
 * Firefox 121 verfügbar). (Codex-Hinweis 2026-09-09.) */
@supports not selector(:has(*)) {
  .ibmh-partner-band__fenster {
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .ibmh-partner-band__lauf {
    animation: none;
    transform: none;
    width: 100%;
  }

  .ibmh-partner-band__satz[aria-hidden="true"] {
    display: none;
  }

  .ibmh-partner-band__satz {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
    padding-right: 0;
  }
}

/* Das Band ist eine Reihe von Links, kein Karussell zum Schieben.
 *
 * Ohne diese Regeln hängt beim Ziehen eine Link-Geisterkopie am Zeiger und die Textauswahl
 * greift über die Logos. Bewusst eng auf das Band gescopt; nirgends global.
 * Wichtig: KEIN pointer-events und KEIN touch-action-Eingriff — beides würde das normale
 * Klicken und Tippen beschädigen, das hier ausdrücklich erhalten bleiben muss. */
/* Auch die Sektionsfläche selbst: WebKit löste beim Ziehen von einer leeren Stelle des
 * Abschnitts ein dragstart aus. Hier NUR user-drag, kein user-select — Überschrift, Einleitung
 * und der Link „Alle Partner ansehen" bleiben ganz normal markierbar. */
.ibmh-partner-band {
  -webkit-user-drag: none;
}

.ibmh-partner-band__fenster,
.ibmh-partner-band__fenster * {
  -webkit-user-drag: none;
     -moz-user-select: none;
      -ms-user-select: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Der Universalselektor gilt AUSDRUECKLICH nur innerhalb des laufenden Streifens. Überschrift,
 * Einleitung und der Link „Alle Partner ansehen" liegen außerhalb des Fensters und bleiben
 * deshalb ganz normal markierbar — Text, den jemand kopieren möchte, wird nicht gesperrt. */

.ibmh-partner-band__satz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--ibmh-band-gap);
  /* Verhindert, dass der letzte und der erste Eintrag zweier Kopien zusammenkleben. */
  padding-right: var(--ibmh-band-gap);
}

.ibmh-partner-band__item {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

/* Der Elementselektor steht ausdrücklich davor. Das Theme färbt Links global ein; eine Regel
 * aus nur einer Klasse verliert dagegen, und die Ruhefarbe des Bandes wäre wirkungslos
 * (gemessen 2026-09-09: currentColor kam als #1848a0 statt als Graublau an). Gleiche
 * Spezifitätsfalle wie beim Hero-Sekundärbutton, im Projekt dokumentiert. */
a.ibmh-partner-band__link {
  display: block;
  color: var(--ibmh-band-ruhe);
  text-decoration: none;
  border-radius: 6px;
  transition: color 260ms var(--ibmh-partner-ease);
}

a.ibmh-partner-band__link:hover,
a.ibmh-partner-band__link:focus-visible {
  color: var(--ibmh-band-aktiv);
}

a.ibmh-partner-band__link:focus-visible {
  outline: 3px solid var(--ibmh-partner-blue-700);
  outline-offset: 6px;
}

/* Die eingefärbte Fläche. Höhe fest, Breite aus dem echten Seitenverhältnis des Logos —
 * dadurch steht die Breite schon vor dem Laden der Maskendatei fest und es gibt kein
 * Nachrücken (CLS). Die Deckelung verhindert, dass ein sehr breites Wortlogo die Zeile
 * dominiert; die Proportion jedes Logos bleibt unangetastet. */
.ibmh-partner-band__logo {
  display: block;
  /* --ibmh-band-scale gleicht die Strichstärke aus: fette Marken etwas kleiner, feine etwas
   * größer. Der Wert kommt aus dem Bild selbst (Anteil deckender Pixel), nicht aus einer
   * gepflegten Liste. Der Deckel skaliert mit, sonst hebelte er den Ausgleich bei den
   * breitesten Logos wieder aus. */
  height: calc(var(--ibmh-band-h) * var(--ibmh-band-scale, 1));
  width: calc(var(--ibmh-band-h) * var(--ibmh-band-scale, 1) * var(--ibmh-band-ratio, 3));
  max-width: calc(var(--ibmh-band-max) * var(--ibmh-band-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: var(--ibmh-band-logo);
          mask-image: var(--ibmh-band-logo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Der Partnername steht im HTML und ist damit für Screenreader und Suchmaschinen da, bleibt
 * aber unsichtbar: Eine Namenszeile unter jedem Logo machte aus der ruhigen Logozeile eine
 * Tabelle. Keine width/height 0 und kein display:none — beides nähme den Text auch dem
 * Screenreader. */
.ibmh-partner-band__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ibmh-partner-band__mehr {
  margin: 2.75rem 0 0;
}

.ibmh-partner-band__mehr a {
  color: var(--ibmh-partner-blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ibmh-partner-band__mehr a:hover {
  color: var(--ibmh-partner-blue-600);
}

/* Auf der Startseite blendet sich ab 1180px rechts die Szenen-Rail ein. Der Wert wird dort auf
 * .ibmh-hx gesetzt; außerhalb der Startseite greift der Fallback 0px und die Regel bleibt
 * wirkungslos. So laufen die Logos nie unter der Punktleiste durch. */
.ibmh-partner-band__inner,
.ibmh-partner-band__fenster {
  padding-right: var(--ibmh-rail-gutter, 0px);
}

/* ---------------------------------------------------------------------------
 * Logo und Wortmarken-Ersatz (Übersicht und Einzelseite, in Originalfarben)
 * ------------------------------------------------------------------------ */

.ibmh-partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0.6rem 1rem;
  border-radius: 14px;
  background: var(--ibmh-partner-flaeche);
}

/* Zwei der Partnerlogos liegen offiziell nur als Hell-Version für dunkle Hintergründe vor.
 * Auf weißem Grund fehlte dort die halbe Wortmarke. Der dunkle Grund wird beim Import
 * automatisch aus dem Bild selbst bestimmt, nicht redaktionell gepflegt. */
.ibmh-partner__logo--dunkel {
  background: var(--ibmh-partner-dunkel);
}

/* Kein Strecken: Jedes Logo behält seine Proportion, gleiche Wirkung entsteht über die
 * gemeinsame Bühnenhöhe, nicht über gleiche Bildgrößen. */
.ibmh-partner__logo-bild {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Neutraler Ersatz, wenn kein offizielles Logo vorliegt: die Wortmarke als Schrift.
 * Bewusst kein nachgebautes Bildzeichen — ein erfundenes Logo wäre eine Falschaussage über
 * die Marke des Partners. */
.ibmh-partner__logo--wortmarke {
  background: rgba(24, 72, 160, 0.05);
}

/* Deutlich größer als der Kartentitel darunter. Zuvor stand die Wortmarke in derselben Größe
 * und Farbe wie die Überschrift und las sich dadurch als fehlgeschlagener Bildladevorgang statt
 * als bewusste Typo-Marke — ausgerechnet in der Karte, die kein Logo hat (Fable-Fund 2026-09-09).
 * Sie soll die optische Masse der Nachbarlogos bekommen, nicht deren Form imitieren. */
.ibmh-partner__wortmarke {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--ibmh-partner-blue-700);
  /* Lange Firmierungen dürfen die Bühnenhöhe nicht sprengen. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Partnerübersicht /partner/
 *
 * EINE zusammenhängende Liste, ausdrücklich ohne Gruppierung nach Netzwerken: Woher eine
 * Zusammenarbeit stammt, erklärt dem Besucher nichts über die fachliche Leistung.
 * ------------------------------------------------------------------------ */

.ibmh-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  margin: 2.5rem 0 0;
}

.ibmh-partner-karte {
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--ibmh-partner-line);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  transition: border-color 220ms var(--ibmh-partner-ease),
              box-shadow 220ms var(--ibmh-partner-ease),
              transform 220ms var(--ibmh-partner-ease);
}

.ibmh-partner-karte:hover,
.ibmh-partner-karte:focus-within {
  border-color: rgba(30, 159, 233, 0.5);
  box-shadow: 0 16px 38px rgba(13, 43, 99, 0.1);
  transform: translateY(-3px);
}

/* Die ganze Karte ist EIN Klickziel — kein Link im Link. */
.ibmh-partner-karte__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  /* Farbe ausdrücklich gesetzt: Ein globales a:hover würde die Kartenschrift sonst umfärben
   * (Spezifitätsfalle, im Projekt dokumentiert). */
  color: var(--ibmh-partner-ink);
}

.ibmh-partner-karte__link:focus-visible {
  outline: 3px solid var(--ibmh-partner-blue-700);
  outline-offset: -3px;
}

/* Feste Bühnenhöhe für alle Karten. Erst dadurch bekommen ein breites Wortlogo und ein
 * hochformatiges Zeichen dieselbe optische Gewichtung, ohne dass eines verzerrt wird. */
.ibmh-partner-karte__buehne {
  display: block;
  height: 132px;
  padding: 1.1rem 1.1rem 0;
  box-sizing: border-box;
}

.ibmh-partner-karte__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding: 1.3rem 1.5rem 1.4rem;
}

.ibmh-partner-karte__titel {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ibmh-partner-blue-700);
  transition: color 160ms var(--ibmh-partner-ease);
}

.ibmh-partner-karte__link:hover .ibmh-partner-karte__titel,
.ibmh-partner-karte__link:focus-visible .ibmh-partner-karte__titel {
  color: var(--ibmh-partner-blue-600);
}

.ibmh-partner-karte__bereich {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ibmh-partner-blue-600);
}

.ibmh-partner-karte__text {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ibmh-partner-muted);
}

/* Fuß immer unten, damit die Pfeilzeile über alle Karten einer Reihe auf einer Linie steht,
 * auch wenn die Beschreibungen unterschiedlich lang sind. */
.ibmh-partner-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: auto;
  padding-top: 1rem;
}

.ibmh-partner-karte__ort {
  font-size: 0.86rem;
  color: var(--ibmh-partner-muted);
}

.ibmh-partner-karte__cue {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ibmh-partner-blue-700);
}

.ibmh-partner-karte__cue::after {
  content: " →";
  display: inline-block;
  transition: transform 200ms var(--ibmh-partner-ease);
}

.ibmh-partner-karte__link:hover .ibmh-partner-karte__cue::after,
.ibmh-partner-karte__link:focus-visible .ibmh-partner-karte__cue::after {
  transform: translateX(3px);
}

.ibmh-partner-leer {
  color: var(--ibmh-partner-muted);
}

/* ---------------------------------------------------------------------------
 * Partner-Einzelseite
 * ------------------------------------------------------------------------ */

/* Original-Logo im Seitenkopf, in den Farben des Partners. Die Breite ist begrenzt, damit ein
 * breites Wortlogo nicht wie ein Seitentitel wirkt; die Höhe trägt die Erkennung. */
.ibmh-partner-kopf {
  margin: 0 0 1.4rem;
}

/* KEINE Fläche hinter dem Logo auf der Einzelseite.
 *
 * Hier stand zuvor dieselbe helle Bühne wie in den Übersichtskarten. Auf der Karte sitzt sie auf
 * Weiß, ist über die volle Kartenbreite konsistent und liest sich als gestaltete Fläche. Auf der
 * Einzelseite dagegen umschloss sie das Bild eng — gemessen: Bühne rgb(244,246,250) auf einem
 * Seitengrund von rgb(246,249,253), also drei Farbwerte Unterschied, und bei der Kanzlei E.R.K.
 * blieben davon 77px Grau links und rechts neben dem Logo stehen. Das ergab genau das kaum
 * sichtbare Rechteck in Bildabmessungen, das hier nicht hingehört.
 *
 * Die Ursache lag ausschließlich in dieser Regel: Die Bilddateien selbst sind sauber
 * freigestellt, ohne Filter, ohne Blendmodus, ohne eigene Hintergrundfarbe (nachgemessen). */
.ibmh-partner-kopf .ibmh-partner__logo {
  width: auto;
  max-width: min(330px, 100%);
  height: 104px;
  padding: 0;
  background: none;
  border-radius: 0;
  /* Ohne Fläche muss das Bild selbst auf der Seitenachse beginnen. Zentriert saß es in der
   * unsichtbar gewordenen Box und startete dadurch bis zu 44px rechts von Titel und Faktenband
   * (gemessen: Bild x=174, H1 x=130). */
  justify-content: flex-start;
}

/* Die einzige Ausnahme, und sie ist funktional: Drei Partnerlogos liegen offiziell nur als
 * Hell-Version für dunkle Hintergründe vor. Ohne diesen Grund fehlte dort die halbe Wortmarke.
 * Das ist eine bewusst gestaltete Fläche in fester Größe, kein Rahmen ums Bild. */
.ibmh-partner-kopf .ibmh-partner__logo--dunkel,
.ibmh-partner-kopf .ibmh-partner__logo--wortmarke {
  /* Die sichtbare Fläche ist eine gestaltete Bühne, dort steht das Logo mittig darin. */
  justify-content: center;
}

/* Der Hintergrund muss hier ausdrücklich noch einmal stehen. Die Regel darüber setzt
 * `background: none` und ist mit zwei Klassen spezifischer als `.ibmh-partner__logo--wortmarke`
 * allein — ohne diese Zeile bliebe der typografische Ersatz entgegen seinem Kommentar ohne Feld.
 * (Codex-Fund 2026-09-09; latent, weil derzeit jeder Partner ein Logo hat.) */
.ibmh-partner-kopf .ibmh-partner__logo--wortmarke {
  background: rgba(24, 72, 160, 0.05);
}

.ibmh-partner-kopf .ibmh-partner__logo--dunkel {
  background: var(--ibmh-partner-dunkel);
  padding: 0.9rem 1.3rem;
  border-radius: 18px;
}

/* Der typografische Ersatz braucht weiterhin sein eigenes Feld, sonst stünde er als nackte
 * Schriftzeile über der Überschrift. */
.ibmh-partner-kopf .ibmh-partner__logo--wortmarke {
  padding: 0.9rem 1.3rem;
  border-radius: 18px;
}

/* Faktenband analog zum Projekt-Steckbrief in der Bandvariante, damit Projekt- und Partnerseite
 * sich gleich anfühlen. box-sizing steht ausdrücklich drin: Ohne border-box addiert sich das
 * Innenabstandspaar auf die Breite und das Band steht breiter als der Container. */
.ibmh-partner-steckbrief {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 1.75rem 0 2rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 16px 44px rgba(13, 43, 99, 0.08);
}

/* Das eigentliche Raster. Der Titel steht bewusst DARÜBER und nicht darin: Als Rasterkind mit
 * grid-column: 1 / -1 zwang er jede Spur, belegt zu sein — auto-fit konnte die leeren Spuren
 * dann nicht mehr einklappen, und die drei Angaben drängten sich in drei von fünf Spalten.
 * Gemessen bei 1440px: 462px der Bandbreite blieben rechts ungenutzt. */
.ibmh-partner-steckbrief__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.1rem 1.8rem;
}

.ibmh-partner-steckbrief__titel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibmh-partner-blue-600);
  margin: 0;
}

/* align-content: start ist nötig, nicht kosmetisch. Die Zellen des äußeren Rasters werden auf
 * die Höhe der höchsten Zelle gedehnt; ohne diese Zeile verteilt das innere Raster seine zwei
 * Zeilen über die volle Höhe und der kurze Wert steht dann tiefer als der lange daneben
 * (gemessen 2026-09-09: „Igensdorf" saß 29px unter der Beschriftung, „Baufinanzierung …" nur 24px). */
.ibmh-partner-steckbrief__row {
  display: grid;
  align-content: start;
  gap: 0.1rem;
}

.ibmh-partner-steckbrief__row span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ibmh-partner-blue-600);
}

.ibmh-partner-steckbrief__row strong {
  color: var(--ibmh-partner-ink);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Lesebreite auf der Partner-Einzelseite
 *
 * Gleiches Muster wie .single-ibmh_project in ibmh-components.css. Das Template legt ALLE
 * Blöcke auf die 1180px-Außenachse, damit Logo, Faktenband und Text auf derselben linken Kante
 * beginnen. Für den Fließtext ist das zu breit: gemessen 122 Zeichen je Zeile bei 1280 und 1440
 * (Fable-Fund 2026-09-09). Die angenehme Lesebreite stellt deshalb diese Regel her —
 * linksbündig, nicht zentriert.
 * ------------------------------------------------------------------------ */

.single-partner .wp-block-post-content > p,
.single-partner .wp-block-post-content > h2,
.single-partner .wp-block-post-content > h3,
.single-partner .wp-block-post-content > ul,
.single-partner .wp-block-post-content > ol {
  max-width: 50rem;
  /* !important ist hier nötig und vertretbar: Das Core-Constrained-Layout setzt auf direkte
   * Kinder margin-left/right: auto !important. Ohne Gegengewicht bliebe der Textblock mittig
   * und begänne rechts vom Faktenband. Strikt auf .single-partner gescopt. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.single-partner .wp-block-post-content > .wp-block-table,
.single-partner .wp-block-post-content > figure {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ibmh-partner-website {
  margin: 1.4rem 0 2rem;
}

/* Bewusst als Sekundärbutton mit Kontur statt gefüllt wie [ibmh_cta]: Auf der Partnerseite
 * stehen beide Schaltflächen untereinander. Wäre der externe Link ebenso kräftig gefüllt, wäre
 * die auffälligste Handlung der Seite das Verlassen der Website. Die Erstberatung bleibt die
 * primäre Handlung, der Partnerlink die nachgeordnete.
 * Die Textfarbe steht ausdrücklich auf der Regel: Ein globales a:hover würde sie sonst
 * überschreiben (Spezifitätsfalle, im Projekt dokumentiert). */
a.ibmh-partner-website__btn {
  display: inline-block;
  background: transparent;
  color: var(--ibmh-partner-blue-700);
  border: 2px solid var(--ibmh-partner-blue-700);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 160ms var(--ibmh-partner-ease),
              color 160ms var(--ibmh-partner-ease),
              transform 160ms var(--ibmh-partner-ease);
}

a.ibmh-partner-website__btn:hover,
a.ibmh-partner-website__btn:focus-visible {
  background: var(--ibmh-partner-blue-700);
  color: #fff;
  transform: translateY(-2px);
}

/* Der Zusatz „(externe Seite)" ist bewusst sichtbar und nicht nur für Screenreader: Er
 * unterscheidet den einen Link, der das Haus verlässt, von jedem anderen Button der Website. */
.ibmh-partner-website__hinweis {
  font-weight: 500;
  opacity: 0.82;
}

/* ---------------------------------------------------------------------------
 * Schmale Bildschirme
 * ------------------------------------------------------------------------ */

@media (max-width: 782px) {
  /* Kleinere Logos und engerer Abstand. Die Dauer wird im selben Verhältnis verkürzt, damit
   * die Geschwindigkeit in Pixeln pro Sekunde gleich bleibt — sonst liefe das Band auf dem
   * Telefon spürbar langsamer als am Schreibtisch. */
  /* Auf dem Telefon werden die Logos NICHT kleiner, sondern nur wenig kleiner als am
   * Schreibtisch — feine Linienlogos wie die Kanzlei-Marken waren bei 34px nicht mehr als Logo
   * erkennbar (Fable-Fund 2026-09-09). Der Ton geht zugleich eine Stufe kräftiger, weil eine
   * kleine Fläche mehr Kontrast braucht als eine große. */
  .ibmh-partner-band {
    --ibmh-band-h: 40px;
    --ibmh-band-max: 168px;
    --ibmh-band-gap: 48px;
    --ibmh-band-ruhe: #4d628a;
  }

  .ibmh-partner-band__lauf {
    /* Dauer ungefähr im Verhältnis der Maße, damit die Geschwindigkeit in Pixeln pro Sekunde
     * nahe am Desktopwert bleibt. Exakt gleich ist sie nicht: Höhe (40/44), Deckelung (168/190)
     * und Abstand (48/64) schrumpfen unterschiedlich stark, ein einzelner Faktor kann das nicht
     * genau abbilden. Die Abweichung liegt unter einem Zehntel und ist nicht wahrnehmbar. */
    animation-duration: calc(var(--ibmh-band-dauer, 45s) * 0.89);
  }

  .ibmh-partner-karte__buehne {
    height: 110px;
  }

  .ibmh-partner-kopf .ibmh-partner__logo {
    height: 84px;
    max-width: min(280px, 100%);
  }

  .ibmh-partner-kopf .ibmh-partner__logo--dunkel,
  .ibmh-partner-kopf .ibmh-partner__logo--wortmarke {
    padding: 0.7rem 1rem;
  }

  .ibmh-partner-steckbrief {
    padding: 1.2rem;
  }

  .ibmh-partner-steckbrief__felder {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem 1.2rem;
  }

  /* Unter 782px ist der Container ohnehin schmaler als die Lesebreite; der Deckel würde nur
   * eine zweite, überflüssige Begrenzung einziehen. */
  .single-partner .wp-block-post-content > * {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
 * Bewegung reduziert
 *
 * Kein automatischer Lauf. Statt dessen eine ruhige, umbrechende Logozeile: Alle Partner
 * bleiben erreichbar, kein Logo ist angeschnitten. Die Kopien werden ausgeblendet, sonst
 * stünde jeder Partner mehrfach da.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ibmh-partner-band__fenster {
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .ibmh-partner-band__lauf {
    animation: none;
    width: 100%;
  }

  .ibmh-partner-band__satz[aria-hidden="true"] {
    display: none;
  }

  .ibmh-partner-band__satz {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
    padding-right: 0;
  }

  a.ibmh-partner-band__link,
  .ibmh-partner-karte,
  .ibmh-partner-karte__titel,
  .ibmh-partner-karte__cue::after,
  a.ibmh-partner-website__btn {
    transition: none;
  }

  /* transition: none allein genügt nicht — die Transformation bliebe bestehen und würde nur
   * ohne Übergang gesetzt (im Projekt gemessen). */
  .ibmh-partner-karte:hover,
  .ibmh-partner-karte:focus-within,
  a.ibmh-partner-website__btn:hover {
    transform: none;
  }

  .ibmh-partner-karte__link:hover .ibmh-partner-karte__cue::after,
  .ibmh-partner-karte__link:focus-visible .ibmh-partner-karte__cue::after {
    transform: none;
  }
}

/* ===========================================================================
 * FIX-LAUF 1 VOR GO-LIVE — 2026-09-20 (Agent B-frontend)
 *
 * GRAF-02 (P2, verwandt mit PL-051 / F-16) — Steckbrief laeuft ueber den
 * Kartenrand hinaus
 *
 * Ursache: `.ibmh-partner-steckbrief__felder` benutzt
 * `repeat(auto-fit, minmax(180px, 1fr))`, unter 782px `minmax(140px, 1fr)`.
 * Die Mindestbreite 140px ist eine feste Spurgroesse: Bei 390px passen zwei
 * Spuren zu je ~157px in die Karte, der laengste Wert ist aber ein einziges
 * langes Wort ("Immobilienvermittlung", 214px). Ein Wort kann nicht umbrechen,
 * solange nichts es dazu auffordert — es lief deshalb 5px ueber den rechten
 * Kartenrand (Textkante 379px, Karte 374px). Mit den WCAG-Textabstaenden
 * (1.4.12) wuchs derselbe Wert so weit, dass die Seite 29px horizontal
 * scrollte.
 *
 * Fix in drei Schritten, ohne globale Eingriffe:
 *   1. minmax(0, 1fr) fuer die Spuren und min-width: 0 fuer die Zellen: die
 *      Spur darf schmaler werden als ihr Inhalt verlangt, statt ihn
 *      herausragen zu lassen.
 *   2. overflow-wrap: anywhere + hyphens: auto auf Beschriftung und Wert:
 *      ueberlange Einzelwoerter brechen innerhalb der Spalte um. Das greift
 *      auch dann noch, wenn eigene Lese-Stylesheets die Textabstaende
 *      vergroessern.
 *   3. Unter 400px eine Spalte: bei 360/390px bleiben sonst zwei Spuren von
 *      ~150px uebrig, in denen jeder laengere Fachbegriff in Silben zerfaellt.
 *
 * Geprueft auf allen acht Partnerseiten (unterschiedlich lange Werte, z. B.
 * "Rechtsberatung" vs. "Immobilienvermittlung") bei 360/390/430/768/1440.
 * ======================================================================== */
.ibmh-partner-steckbrief__felder {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.ibmh-partner-steckbrief__row {
  min-width: 0;
}

.ibmh-partner-steckbrief__row span,
.ibmh-partner-steckbrief__row strong {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 782px) {
  .ibmh-partner-steckbrief__felder {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }
}

@media (max-width: 400px) {
  .ibmh-partner-steckbrief__felder {
    grid-template-columns: 1fr;
  }
}


/* ===========================================================================
 * FIX-LAUF 2 VOR GO-LIVE — 2026-09-21 (Agent U-frontend)
 *
 * PL-050 (P2, WCAG 2.2.2) — Pause-/Weiter-Schalter fuer das Logoband
 *
 * Ursache und Begruendung der Loesung stehen ausfuehrlich im Kopf des
 * zugehoerigen Blocks in assets/js/partner-band.js. Kurz: Das Band lief
 * endlos (44 s / 39 s pro Durchlauf, iterations = Infinity) und pausierte nur
 * bei :hover und :has(:focus-visible) — auf Touchgeraeten also nie.
 *
 * Hier steht nur die Darstellung. Den Schalter selbst erzeugt das Skript,
 * weil er ohne JavaScript nichts schalten koennte und dann ein totes
 * Bedienelement waere.
 * ------------------------------------------------------------------------- */

/* Der Anhaltezustand. Spezifitaet 0,2,0 und spaeter in der Datei als die
 * animation-Kurzschreibweise auf .ibmh-partner-band__lauf (0,1,0), die
 * animation-play-state sonst auf `running` zuruecksetzen wuerde. */
.ibmh-partner-band.is-angehalten .ibmh-partner-band__lauf {
  animation-play-state: paused;
}

/* Die untere Innen-Spalte traegt „Alle Partner ansehen" und den Schalter in
 * EINER Zeile. Die Klasse setzt das Skript; ohne JavaScript bleibt die Spalte
 * unveraendert, der Abschnitt sieht also aus wie bisher. */
.ibmh-partner-band__inner--steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

/* Der Aussenabstand sass bisher am Absatz „Alle Partner ansehen". In der
 * gemeinsamen Zeile gehoert er an die Zeile, sonst sitzen Link und Schalter
 * auf verschiedenen Hoehen. */
.ibmh-partner-band__inner--steuerung {
  margin-top: 2.75rem;
}

.ibmh-partner-band__inner--steuerung .ibmh-partner-band__mehr {
  margin: 0;
}

/* Ruhige Umrissform in der Markenfarbe — dieselbe Sprache wie der Link
 * daneben, nur als Bedienelement erkennbar. Kein Vollton: Der Abschnitt hat
 * bereits einen Handlungsanker („Alle Partner ansehen"), und der Schalter
 * soll ihn nicht ueberstimmen.
 *
 * min-height/min-width 44px erfuellen die Mindest-Trefferflaeche (WCAG 2.5.8
 * AA verlangt 24px, hier bewusst die AAA-Groesse 44px, weil der Schalter auf
 * dem Telefon der einzige Weg ist, die Bewegung anzuhalten). */
.ibmh-partner-band__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.15rem;
  /* 0.65 statt eines zarteren Werts ist gerechnet, nicht geschaetzt: ueber Weiss ergibt
   * rgba(24,72,160,0.65) = #6988c1 einen Kontrast von 3,56:1 und erfuellt damit 1.4.11
   * (Nicht-Text-Kontrast, mindestens 3:1) fuer die Umrandung des Bedienelements. Bei 0.34
   * waeren es nur 1,82:1 gewesen. */
  border: 1px solid rgba(24, 72, 160, 0.65);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ibmh-partner-blue-700);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 200ms var(--ibmh-partner-ease),
              border-color 200ms var(--ibmh-partner-ease),
              color 200ms var(--ibmh-partner-ease);
}

.ibmh-partner-band__schalter:hover {
  background: rgba(24, 72, 160, 0.07);
  border-color: var(--ibmh-partner-blue-700);
}

.ibmh-partner-band__schalter:focus-visible {
  outline: 3px solid var(--ibmh-partner-blue-700);
  outline-offset: 3px;
}

/* Symbol vor der Beschriftung: zwei Balken (laeuft → anhalten), im
 * angehaltenen Zustand ein Dreieck (steht → fortsetzen). Rein dekorativ, die
 * Beschriftung traegt die Bedeutung allein — deshalb kein aria-hidden noetig,
 * ::before erzeugt keinen Textknoten im Accessibility-Baum. */
.ibmh-partner-band__schalter::before {
  content: "";
  flex: none;
  width: 0.72em;
  height: 0.82em;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 34% 100% no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 34% 100% no-repeat;
}

.ibmh-partner-band.is-angehalten .ibmh-partner-band__schalter::before {
  background: currentColor;
  clip-path: polygon(12% 0, 100% 50%, 12% 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ibmh-partner-band__schalter {
    transition: none;
  }
}