/**
 * AP Avatar — Master-Avatar im Menueband.
 * Decision-ID: pereta-avatar-menueband-20260825, pereta-avatar-chat-20260825,
 * pereta-avatar-dialog-zweistufig-20260826, pereta-avatar-nachrichtenfeld-sichtbar-20260826,
 * pereta-chat-keine-innenscrolls-20260826, pereta-avatar-chat-rechner-20260826,
 * pereta-avatar-chat-rechner-entfernt-20260827, pereta-chat-verlauf-scrollport-20260827,
 * pereta-chat-sota-standard-20260827, pereta-chat-bubbles-bleiben-lokal-20260827,
 * pereta-chat-fluid-feste-groesse-20260827, pereta-chat-hellblau-surface-20260827,
 * pereta-startseite-sota-doppelabnahme-20260831
 *
 * ⚠ Diese Datei ist bewacht. Wer sie ausrollt, loest zwei Laeufe aus:
 *   VOR dem Tausch  — tests/verhaltenspruefung_chat_scrollen.sh misst im Browser
 *                     ueber vier Breiten. Faellt er durch, wird nichts geschrieben.
 *   NACH dem Tausch — derselbe Pruefstand gegen die dann ausgelieferte Seite,
 *                     mit Cache-Purge davor. Er verhindert nichts mehr, er meldet.
 * Not-Aus fuer beide: NABE_VORLAUF_UEBERSPRINGEN=1 (meldet sich sichtbar).
 *
 * Zwei Regeln, die hier je einen halben Tag gekostet haben:
 *   - Genau DER VERLAUF bekommt den sichtbaren Scrollport. Vorschlaege und Eingabe
 *     bleiben ausserhalb, damit kein Abschlussweg wieder unsichtbar wird.
 *   - `.ap-avatar-chat--bereit .ap-avatar-chat__eingabe { display: block }` haelt
 *     das Nachrichtenfeld dauerhaft sichtbar. Ohne die Regel ist es 0x0 gross,
 *     und der einzige Weg dorthin liegt im abgeschnittenen Teil der Knopfliste.
 * Decision-ID: nabe-ausrollen-chat-vorlauf-20260826, nabe-ausrollen-chat-nachlauf-20260826
 */

/* ---------------------------------------------------------------------------
   Goldener Ring — das freigestellte Original, kein CSS-Nachbau.

   ⚠ Die Quelle war bis 26.08. die FALSCHE Emblem-Fassung. Es gibt zwei 4K-
   Dateien desselben Zeichens mit verschiedenem Ring; gegen das live im Kopf
   ausgelieferte Emblem gemessen (Ringfarbe ueber 24 Winkel) liegt die richtige
   bei einem Farbabstand von 6,0, die andere bei 67,6. Massgeblich ist
   `emblem-truecolor-merged-transparent.png`; die Datei unter
   ~/.cache/pereta-angebote/emblem.png ist byte-identisch mit der anderen.

   Geometrie des Ringbildes, an der richtigen Quelle gemessen (26.08.2026):
     Bildkante          104 % der Ring-Aussenkante (Luft fuer den Schlagschatten,
                        der im Bild steckt und bis 102,2 % reicht)
     Gold aussen        96,16 % des Bildradius
     Gold innen         85,28 %   (Ringdicke 7,34 % des Durchmessers)
     Trennring          79,10 - 82,00 %
   Mit `inset: -2%` liegt die Gold-Aussenkante wieder genau auf dem Rand der
   Buehne; alle Werte oben gelten dann mal 1,04 — Gold innen 88,7 %, Trennring
   82,3 - 85,3 %.

   Das Portraet endet bei 83,6 % (padding 8,2 %), also MITTEN im Trennring:
   seine harte Kreiskante liegt damit unter dem deckenden Navy und kann nicht
   als zweite Linie neben dem Gold erscheinen.
   ------------------------------------------------------------------------- */
:root {
  /* Abstand Buehnenrand -> Portraetkante. 8,2 % = Portraet bis 83,6 % des
     Radius. Haengt an der Ringgeometrie oben — wird die Quelle gewechselt,
     muss dieser Wert mit. */
  --ap-ring-innen: 8.2%;
}
.ap-avatar,
.ap-avatar *,
.ap-avatar *::before,
.ap-avatar *::after,
.ap-avatar__panel,
.ap-avatar__panel * {
  box-sizing: border-box;
}

.ap-avatar {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Im Menueband haengt der Avatar links AM RAND, ohne in den Textfluss zu geraten.
   Das Menue daneben ist `style: centered` und zentriert sich ueber die volle
   Spaltenbreite — stuende der Avatar im Fluss, wuerde er das Menue verschieben
   ODER die Bandhoehe vergroessern (gemessen 44-75 px, die Kopfhoehe haengt daran).
   Absolut positioniert bleibt beides unberuehrt. */
.et-l--header .et_pb_column:has(.ap-avatar) {
  position: relative;
}

.et-l--header .ap-avatar {
  position: static;
}

/* Die Groesse folgt der gemessenen Bandhoehe (25.08.2026): 44 px ab 820 abwaerts,
   62,8 bei 1024, 69,4 bei 1440, 75,2 bei 1920. Ein fester 28-px-Kreis waere im
   breiten Band nur 40 % hoch — sichtbar zu klein fuer ein Gesicht. Der
   Vergroesserungsfaktor leitet sich rechnerisch aus beiden Werten ab, damit er
   beim Aendern einer Groesse nicht von Hand nachgezogen werden muss. */
/* Die Werte haengen am KOPF, nicht am Avatar: das Modul, das die vertikale
   Zentrierung rechnet, ist ein VORFAHR des Avatars — CSS-Variablen vererben nur
   nach unten. Auf `.ap-avatar` allein definiert saehe das Modul sie nie und
   fiele still auf seinen Rueckfallwert zurueck. */
.et-l--header,
.ap-avatar {
  /* 44 px ist zugleich sichtbare Groesse und Beruehrungsflaeche. Ein unsichtbarer
     Hit-Area-Ueberstand wuerde mit dem zentrierten Divi-Menue kollidieren. */
  --ap-avatar-klein: 44px;
  --ap-avatar-gross: 120px;
}

@media (min-width: 1024px) {
  .et-l--header,
  .ap-avatar { --ap-avatar-klein: 54px; }
}

@media (min-width: 1440px) {
  .et-l--header,
  .ap-avatar { --ap-avatar-klein: 60px; }
}

@media (min-width: 1920px) {
  .et-l--header,
  .ap-avatar { --ap-avatar-klein: 64px; }
}

.ap-avatar__trigger {
  display: grid;
  place-items: center;
  width: var(--ap-avatar-klein);
  height: var(--ap-avatar-klein);
  padding: 0;
  overflow: visible;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform-origin: top left;
  transition: transform 200ms ease-out;
}

/* Derselbe Emblem-Ring wie auf der Buehne, nur klein (Operator-Wahl 2c,
   26.08.). Bei 44 px Bandhoehe ist der Goldring 3,2 px breit, der Trennring
   0,6 px — fein, aber am Gold noch als Rahmen erkennbar. `overflow` bleibt
   sichtbar, sonst schnitte das Visual den 2-%-Ueberstand des Ringbildes ab. */
.ap-avatar__visual {
  position: relative;
  display: block;
  width: var(--ap-avatar-klein);
  height: var(--ap-avatar-klein);
  padding: var(--ap-ring-innen, 8.2%);
  overflow: visible;
  background: #182240;
  border: 0;
  border-radius: 50%;
}

.ap-avatar__standbild,
.ap-avatar__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ap-avatar__ring {
  position: absolute;
  inset: -2%;
  display: block;
  pointer-events: none;
}

.ap-avatar__ring img {
  display: block;
  width: 100%;
  height: 100%;
}

.ap-avatar__trigger:focus-visible {
  outline: 2px solid rgb(15, 26, 46);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(225, 204, 152, 0.78);
}

@media (hover: hover) and (pointer: fine) {
  .ap-avatar__trigger:hover {
    transform: scale(calc(var(--ap-avatar-gross) / var(--ap-avatar-klein)));
  }
}

/* Divi setzt auf Sektionen ein `display:block`, das die UA-Regel
   `[popover]:not(:popover-open){display:none}` schlaegt — gemessen 25.08.2026 auf
   arnold-pereta.de: das Panel stand auf jeder Seite offen und verdeckte den Hero.
   Diese Regel stellt den geschlossenen Zustand wieder her. */
.ap-avatar__panel[popover]:not(:popover-open) {
  display: none;
}

/* Das MODUL muss aus dem Fluss, nicht nur der Avatar darin. Divi setzt
   `.et_pb_gutters3 .et_pb_column_4_4.et_block_column .et_pb_module{margin-bottom:2.75%}`
   — Spezifitaet (0,4,0), gemessen 35,19 px bei 1440 px Fensterbreite, und weil es ein
   Prozentwert ist, waechst er mit der Spaltenbreite. Ein Ueberbieten der Spezifitaet
   waere zerbrechlich; absolut positioniert ist das Modul ganz aus dem Layout und sein
   Margin damit wirkungslos.
   Kein `transform` zum Zentrieren: das erzeugt einen Stapelkontext, und darunter
   wuerde die Positionierung des Popovers unberechenbar. `margin-top` tut dasselbe
   ohne Nebenwirkung. */
.et-l--header .et_pb_module:has(.ap-avatar) {
  position: absolute;
  top: 50%;
  left: clamp(16px, 2vw, 24px);
  margin: calc(var(--ap-avatar-klein, 28px) / -2) 0 0;
  z-index: 2;
}

.ap-avatar__panel[popover] {
  position: fixed;
  top: calc(var(--ap-kopfhoehe, 162px) + 0.75rem);
  left: clamp(0.75rem, 3vw, 3rem);
  width: min(320px, calc(100vw - 1.5rem));
  max-width: 320px;
  margin: 0;
  padding: 1rem;
  color: rgb(15, 26, 46);
  background: #ffffff;
  border: 1px solid rgb(224, 232, 245);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 26, 46, 0.16);
}

.ap-avatar__panel::backdrop {
  background: transparent;
}

.ap-avatar__titel,
.ap-avatar__begruessung {
  margin: 0;
}

.ap-avatar__titel {
  color: rgb(15, 26, 46);
  font-size: 1.125rem;
  line-height: 1.25;
}

.ap-avatar__begruessung {
  margin-top: 0.5rem;
  color: rgb(15, 26, 46);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ap-avatar__links {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ap-avatar__link {
  display: block;
  padding: 0.625rem 0.75rem;
  color: rgb(15, 26, 46);
  border: 1px solid rgb(15, 26, 46);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.ap-avatar__link:hover,
.ap-avatar__link:focus-visible {
  color: #ffffff;
  background: rgb(15, 26, 46);
}

.ap-avatar__link:focus-visible {
  outline: 2px solid rgb(15, 26, 46);
  outline-offset: 3px;
}

.ap-avatar__link--primaer {
  color: #ffffff;
  background: rgb(15, 26, 46);
}

.ap-avatar__link--primaer:hover,
.ap-avatar__link--primaer:focus-visible {
  color: rgb(15, 26, 46);
  background: #ffffff;
}

@supports (anchor-name: --ap-avatar-trigger) and (position-anchor: --ap-avatar-trigger) {
  .ap-avatar__trigger {
    anchor-name: --ap-avatar-trigger;
  }

  .ap-avatar__panel[popover] {
    position-anchor: --ap-avatar-trigger;
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-avatar__trigger {
    transition: none;
  }

  .ap-avatar__trigger:hover {
    transform: none;
  }
}

/* Getrennte Divi-Module fuer Buehne und Gespraech.
   Decision-ID: pereta-avatar-chat-20260825 */
.ap-avatar-buehne,
.ap-avatar-buehne *,
.ap-avatar-buehne *::before,
.ap-avatar-buehne *::after,
.ap-avatar-chat,
.ap-avatar-chat *,
.ap-avatar-chat *::before,
.ap-avatar-chat *::after {
  box-sizing: border-box;
}

.ap-avatar-buehne {
  position: relative;
  display: grid;
  place-items: center;
  /* Volle Spaltenbreite (Operator-Wahl 25.08.). Bei 1280 px Zeile sind das 830 px
     — deshalb liegt fuer diese Buehne eine 1152-px-Videofassung bereit; die
     768er der alten Sektion waere hier sichtbar hochskaliert. */
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: var(--ap-ring-innen, 8.2%);
  /* Navy als Grund: laedt das Ringbild nicht, bleibt die Trennung trotzdem
     sichtbar statt Gold-loser weisser Kante. Farbe aus dem Emblem-Innenkreis. */
  background: #182240;
  border: 0;
  border-radius: 50%;
}

.ap-avatar-buehne__visual {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(234, 240, 248);
  border-radius: 50%;
}

/* Der Ring liegt UEBER dem Portraet, damit sein Navy-Innenring dessen harte
   Kreiskante ueberdeckt. `inset: -2%` gleicht die Schattenluft im Bild aus. */
.ap-avatar-buehne__ring {
  position: absolute;
  inset: -2%;
  display: block;
  pointer-events: none;
}

.ap-avatar-buehne__ring img {
  display: block;
  width: 100%;
  height: 100%;
}

.ap-avatar-chat {
  --ap-chat-block-size: clamp(36.5rem, 74vh, 44rem);
  --ap-chat-block-size: clamp(36.5rem, 74svh, 44rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%;
  /* Ein gemeinsamer fluider Wert fuer Soll-, Mindest- und Hoechsthoehe ist hier
     absichtlich streng: andernfalls vergroessern wechselnde Chip-Zeilen den
     Grid-Container von 584 auf 832 px. Nur der Verlauf darf wachsen/scrollen. */
  flex: 1 1 auto;
  block-size: var(--ap-chat-block-size);
  min-block-size: var(--ap-chat-block-size);
  max-block-size: var(--ap-chat-block-size);
  overflow: clip;
  overflow-anchor: none;
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface-alt);
  border: 1px solid var(--ap-chat-border);
  border-radius: var(--gvid-ngpEFiUf, 26px);
}

.ap-avatar-chat__kopf {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ap-chat-border);
}

.ap-avatar-chat__kopf h2 {
  margin: 0;
  color: var(--ap-chat-text);
  font-size: 0.9375rem;
  line-height: 1.25;
}

.ap-avatar-chat__verlauf {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 1rem;
  padding: 1rem;
  background: var(--ap-chat-surface-alt);
}

.ap-avatar-chat__blase,
.ap-avatar-chat__antwortquelle,
.ap-avatar-chat__abschluss {
  width: fit-content;
  max-width: min(92%, 36rem);
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--ap-chat-border);
  border-radius: var(--gvid-MmpjhDW3, 10px);
  line-height: 1.5;
}

.ap-avatar-chat__blase--avatar,
.ap-avatar-chat__antwortquelle,
.ap-avatar-chat__abschluss {
  justify-self: start;
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface);
}

.ap-avatar-chat__blase--besucher {
  justify-self: end;
  color: var(--ap-chat-surface);
  background: var(--ap-chat-focus);
  border-color: var(--ap-chat-focus);
}

.ap-avatar-chat__antwortquelle h3,
.ap-avatar-chat__antwortquelle h4,
.ap-avatar-chat__antwortquelle p {
  margin-top: 0;
}

.ap-avatar-chat__antwortquelle h3 {
  margin-bottom: 0.375rem;
  font-size: 1rem;
  line-height: 1.3;
}

.ap-avatar-chat__antwortquelle h4 {
  margin: 0.875rem 0 0.375rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.ap-avatar-chat__antwortquelle ul {
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
}

.ap-avatar-chat__antwortquelle li,
.ap-avatar-chat__szene {
  line-height: 1.5;
}

.ap-avatar-chat__antwortquelle p:last-child {
  margin-bottom: 0;
}

.ap-avatar-chat__fallback {
  display: grid;
  gap: 0.75rem;
}

.ap-avatar-chat__abschlussquelle {
  display: grid;
  gap: 0.75rem;
}

.ap-avatar-chat__vorschlaege {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ap-chat-border);
}

.ap-avatar-chat--bereit .ap-avatar-chat__vorschlaege {
  display: flex;
}

.ap-avatar-chat--bereit .ap-avatar-chat__eingabe {
  display: block;
}

.ap-avatar-chat__vorschlag {
  min-block-size: clamp(2.75rem, 2.65rem + 0.25vw, 3rem);
  padding: 0.375rem 0.625rem;
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface);
  border: 1px solid var(--ap-chat-focus);
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  cursor: pointer;
}

.ap-avatar-chat__vorschlag:hover {
  color: var(--ap-chat-surface);
  background: var(--ap-chat-focus);
}

.ap-avatar-chat__eingabe {
  display: none;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--ap-chat-border);
}

.ap-avatar-chat__abschlussquelle[hidden],
.ap-avatar-chat__eingabe[hidden],
.ap-avatar-chat__vorschlaege[hidden] {
  display: none !important;
}

.ap-avatar-chat__schritt {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="nachricht"] [data-ap-avatar-chat-schritt-panel="nachricht"],
.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="email"] [data-ap-avatar-chat-schritt-panel="email"],
.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="name"] [data-ap-avatar-chat-schritt-panel="name"],
.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="branche"] [data-ap-avatar-chat-schritt-panel="branche"],
.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="groesse"] [data-ap-avatar-chat-schritt-panel="groesse"],
.ap-avatar-chat__eingabe[data-ap-avatar-chat-schritt="einwilligung"] [data-ap-avatar-chat-schritt-panel="einwilligung"] {
  display: grid;
}

.ap-avatar-chat__eingabe textarea,
.ap-avatar-chat__eingabe input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface);
  border: 1px solid var(--ap-chat-focus);
  border-radius: var(--gvid-MmpjhDW3, 10px);
  font: inherit;
  line-height: 1.4;
}

.ap-avatar-chat__eingabe textarea {
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  resize: vertical;
}

.ap-avatar-chat__eingabe button {
  align-self: end;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  color: var(--ap-chat-surface);
  background: var(--ap-chat-focus);
  border: 1px solid var(--ap-chat-focus);
  border-radius: var(--gvid-MmpjhDW3, 10px);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.ap-avatar-chat__eingabe button:hover:not(:disabled) {
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface);
}

.ap-avatar-chat__eingabe button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.ap-avatar-chat__schritt > label,
.ap-avatar-chat__schritt > textarea,
.ap-avatar-chat__schritt > input:not([type="checkbox"]) {
  grid-column: 1 / -1;
}

.ap-avatar-chat__schritt > label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.ap-avatar-chat__schritt > input:not([type="checkbox"]) {
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
}

.ap-avatar-chat__schritt--auswahl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ap-avatar-chat__eingabe .ap-avatar-chat__vorschlag {
  width: 100%;
  min-height: 2.75rem;
  color: var(--ap-chat-text);
  background: var(--ap-chat-surface);
  border-color: var(--ap-chat-focus);
  border-radius: 999px;
  font-weight: 400;
}

.ap-avatar-chat__eingabe .ap-avatar-chat__vorschlag:hover {
  color: var(--ap-chat-surface);
  background: var(--ap-chat-focus);
}

.ap-avatar-chat__einwilligung {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ap-avatar-chat__einwilligung > span {
  color: var(--ap-chat-text-muted);
}

.ap-avatar-chat__datenschutz {
  color: var(--ap-chat-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.ap-avatar-chat__einwilligung input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
}

.ap-avatar-chat__status {
  margin: 0.625rem 0 0;
  color: var(--ap-chat-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ap-avatar-chat__label,
.ap-avatar-chat__sprecher {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ap-avatar-chat__honigtopf {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ap-avatar-chat__ohne-js {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--ap-chat-border);
}

.ap-avatar-chat--bereit .ap-avatar-chat__fallback,
.ap-avatar-chat--bereit .ap-avatar-chat__ohne-js {
  display: none;
}

.ap-avatar-chat__vorschlag:focus-visible,
.ap-avatar-chat__eingabe textarea:focus-visible,
.ap-avatar-chat__eingabe input:focus-visible,
.ap-avatar-chat__eingabe button:focus-visible,
.ap-avatar-chat__datenschutz:focus-visible {
  outline: 2px solid var(--ap-chat-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--ap-chat-focus-ring);
}

@media (max-width: 899px) {
  .ap-avatar-chat {
    --ap-chat-block-size: clamp(40rem, 90vh, 44rem);
    --ap-chat-block-size: clamp(40rem, 90svh, 44rem);
  }
}

@media (max-height: 480px) and (max-width: 899px) {
  .ap-avatar-chat {
    --ap-chat-block-size: 90vh;
    --ap-chat-block-size: 90svh;
    grid-template-rows: auto minmax(4rem, 1fr) auto auto;
  }

  .ap-avatar-chat__kopf,
  .ap-avatar-chat__vorschlaege,
  .ap-avatar-chat__eingabe {
    padding-block: 0.5rem;
  }

  /* Im kurzen Querformat passen sieben Vorschlaege und das Fragefeld nicht
     untereinander in den festen Chat. Die Chips bleiben in einer tastatur-
     bedienbaren horizontalen Leiste; vertikal scrollt weiterhin nur der Verlauf. */
  .ap-avatar-chat__vorschlaege {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .ap-avatar-chat__vorschlaege > .ap-avatar-chat__vorschlag {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ap-avatar-chat__schritt[data-ap-avatar-chat-schritt-panel="nachricht"] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .ap-avatar-chat__schritt[data-ap-avatar-chat-schritt-panel="nachricht"] > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ap-avatar-chat__schritt[data-ap-avatar-chat-schritt-panel="nachricht"] > textarea {
    grid-column: 1;
    height: 2.75rem;
    min-height: 2.75rem;
    resize: none;
  }

  .ap-avatar-chat__schritt[data-ap-avatar-chat-schritt-panel="nachricht"] > button {
    grid-column: 2;
  }
}

/* --- Innenaufteilung des Chats (Master, 25.08.2026) ---
   Kopf, Vorschlaege und Eingabe haben Inhaltszeilen. Nur der Verlauf bekommt die
   verbleibende Hoehe und scrollt, sobald seine Nachrichten nicht mehr hineinpassen. */
/* Die Hoehe wird per FLEX durchgereicht, nicht per Prozent. Zwei Gruende, beide
   am lebenden System gemessen (25.08.2026):
   1. `height: 100%` braucht eine EXPLIZITE Elternhoehe. Die Divi-Zeile ist 830 px
      hoch, aber berechnet — `100%` davon ist undefiniert und faellt auf `auto`.
   2. Schlimmer: ein Flex-Item mit eigener `height` wird von `align-items: stretch`
      NICHT mehr gestreckt. Die Regel verhinderte also genau das, was sie bewirken
      sollte; der Chat blieb bei 460 px neben einer 830-px-Buehne. */
.et_pb_row:has(.ap-avatar-buehne) {
  align-items: stretch;
}

.et_pb_column:has(.ap-avatar-chat) {
  display: flex;
  flex-direction: column;
}

.et_pb_column:has(.ap-avatar-chat) > .et_pb_module,
.et_pb_column:has(.ap-avatar-chat) .et_pb_code_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.ap-avatar-chat__vorschlaege,
.ap-avatar-chat__eingabe,
[data-ap-avatar-chat-vorschlaege],
[data-ap-avatar-chat-form] {
  flex: 0 0 auto;
}

.ap-avatar-rollen,
.ap-avatar-rollen *,
.ap-avatar-rollen *::before,
.ap-avatar-rollen *::after {
  box-sizing: border-box;
}

.ap-avatar-rollen {
  /* Der sichtbare Card-Rahmen und sein Innenraum liegen nativ auf der umgebenden
     Divi-Spalte. Dieses Bauteil steuert nur noch seinen inneren Rhythmus. */
  padding-bottom: 0;
  color: var(--gcid-c-text, #0F1A2E);
}

.ap-avatar-rollen__eyebrow,
.ap-avatar-rollen__titel,
.ap-avatar-rollen__lead,
.ap-avatar-rollen__hinweis {
  margin-top: 0;
}

.ap-avatar-rollen__eyebrow {
  margin-bottom: var(--gvid-apf-gap-xs, clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem));
  color: var(--gcid-c-gold, #8A6D28);
  font-size: var(--gvid-ap-v2-eyebrow, clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ap-avatar-rollen__titel {
  margin-bottom: var(--gvid-apf-gap-s, clamp(0.75rem, 0.65rem + 0.75vw, 1.25rem));
  color: var(--gcid-c-text, #0F1A2E);
  font-size: var(--gvid-ap-v2-h2, clamp(1.875rem, 1.45rem + 1.7vw, 3rem));
  font-weight: 600;
  line-height: 1.15;
}

.ap-avatar-rollen__lead {
  max-width: var(--gvid-apf-width-reading, 45rem);
  margin-bottom: 0;
  color: var(--gcid-c-text-muted, #3B4761);
  font-size: var(--gvid-ap-v2-lead, clamp(1.125rem, 0.98rem + 0.58vw, 1.5rem));
  line-height: 1.5;
}

.ap-avatar-rollen .ap-avatar-rollen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gvid-apf-space-grid-gap, clamp(1rem, 0.75rem + 1vw, 2rem));
  padding: 0;
  margin: var(--gvid-apf-gap-l, clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem)) 0
    var(--gvid-apf-gap-m, clamp(1rem, 0.85rem + 1vw, 1.75rem));
  /* Divis Theme-CSS setzt list-style mit hoeherer Spezifitaet — gemessen am
     berechneten Wert "disc" trotz "none". Deshalb beide Ebenen und mit Vorrang. */
  list-style: none;
}

.ap-avatar-rollen .ap-avatar-rollen__kachel {
  list-style: none;
}

.ap-avatar-rollen .ap-avatar-rollen__kachel::marker {
  content: "";
}

.ap-avatar-rollen__kachel {
  min-width: 0;
  display: block;
}

.ap-avatar-rollen__knopf {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  transition: transform 200ms ease-out;
}

.ap-avatar-rollen__knopf picture {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--gcid-c-navy-50, #F0F3FA);
  border: 1px solid var(--gcid-c-border, #E0E8F5);
  border-radius: var(--gvid-ap-v2-card-radius, clamp(1rem, 0.75rem + 0.8vw, 1.625rem));
}

.ap-avatar-rollen__knopf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-avatar-rollen__titelzeile {
  margin-top: var(--gvid-apf-gap-xs, clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem));
  font-size: var(--gvid-apf-type-sm, clamp(0.875rem, 0.8rem + 0.3vw, 1rem));
  font-weight: 700;
  line-height: 1.3;
}

.ap-avatar-rollen__text {
  margin-top: var(--gvid-apf-space-xs, clamp(0.25rem, 0.15rem + 0.4vw, 0.5rem));
  color: var(--gcid-c-text-muted, #3B4761);
  font-size: max(0.9375rem, var(--gvid-apf-type-xs, clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)));
  line-height: 1.5;
}

.ap-avatar-rollen__hinweis {
  margin-bottom: 0;
  color: var(--gcid-c-text-muted, #3B4761);
  font-size: max(0.9375rem, var(--gvid-apf-type-xs, clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)));
  line-height: 1.5;
}

.ap-avatar-rollen__knopf:hover,
.ap-avatar-rollen__knopf:focus-visible {
  transform: translateY(-4px);
}

.ap-avatar-rollen__knopf:focus-visible {
  outline: 2px solid var(--gcid-c-gold, #8A6D28);
  outline-offset: var(--gvid-apf-space-xs, clamp(0.25rem, 0.15rem + 0.4vw, 0.5rem));
}

/* Gleiche Spezifitaet wie die Basisregel oben (0,2,0) — eine Media Query erhoeht sie
   NICHT, die Regel waere sonst wirkungslos. Gemessen am 25.08.: sie war es. */
@media (min-width: 1180px) {
  .ap-avatar-rollen .ap-avatar-rollen__raster {
    grid-template-columns: repeat(var(--ap-rollen-spalten, 5), 1fr);
  }
}

/* Unterhalb des breiten Viererrasters stehen die Rollen kompakt quer. Bild und
   Text wachsen ueber clamp gemeinsam; nur die strukturelle Spaltenzahl bricht um. */
@media (max-width: 1179px) {
  .ap-avatar-rollen .ap-avatar-rollen__knopf {
    display: grid;
    grid-template-columns: clamp(88px, 18vw, 132px) 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--gvid-apf-gap-s, clamp(0.75rem, 0.65rem + 0.75vw, 1.25rem));
    align-items: start;
  }

  .ap-avatar-rollen .ap-avatar-rollen__knopf picture {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .ap-avatar-rollen .ap-avatar-rollen__titelzeile {
    grid-column: 2;
    margin-top: 0;
  }

  .ap-avatar-rollen .ap-avatar-rollen__text {
    grid-column: 2;
  }
}

/* Mobil bleibt der feste Chat gross, aber nicht seine Schalterleiste. Die
   Vorschlaege nutzen eine einzeilige, tastaturbedienbare Schiene; dadurch
   gewinnen Verlauf und Eingabe Hoehe, obwohl jeder Chip mindestens 44 px hat. */
@media (max-width: 640px) {
  .ap-avatar-chat__vorschlaege {
    flex-wrap: nowrap;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .ap-avatar-chat__vorschlaege > .ap-avatar-chat__vorschlag {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 641px) and (max-width: 1179px) {
  .ap-avatar-rollen .ap-avatar-rollen__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-avatar-rollen__knopf {
    transition: none;
  }

  .ap-avatar-rollen__knopf:hover,
  .ap-avatar-rollen__knopf:focus-visible {
    transform: none;
  }
}