/* ekey CMS – Seite „Support kontaktieren" ([ekey_support]).

   Das Kopfband ist bewusst nicht der blaue Hero der Academy, sondern das helle
   Band mit dem Fingerabdruck, wie es die Seite schon hatte. Die Werte stammen
   eins zu eins aus dem bisherigen Avada-Container:
   das SVG zentriert, ohne Wiederholung, 40px Luft oben und unten.

   Einzige Abweichung: die Flaeche ist #f5f5f7 statt des Avada-Tons #f9f9f9.
   Das ist die Hausflaeche des Plugins (Academy, Haendlersupport) – zwei
   Grautoene vier Stufen auseinander sieht niemand als Gestaltung, nur als
   Unsauberkeit.

   Das SVG liegt im Plugin, nicht in wp-content/uploads: so bringt das Plugin
   sein Bild selbst mit und das Band bleibt auch dort heil, wo die Datei nie
   hochgeladen wurde.

   Schrift kommt absichtlich vom Theme. h1 und h4 bleiben ohne eigene Klasse –
   dann sehen Ueberschrift und Unterzeile genauso aus wie auf jeder anderen
   Seite, und eine spaetere Schriftumstellung im Theme greift auch hier. */

.ekey-sup-banner {
  /* Volle Fensterbreite, auch wenn der Shortcode in einer schmalen
     Inhaltsspalte steht – derselbe Kniff wie bei .ekey-hero. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: 40px 0;
  background-color: #f5f5f7;
  background-image: url("fingerprint-banner.svg");
  background-repeat: no-repeat;
  /* `100% auto` statt `auto`: das SVG ist ein 4,19:1 breites Wasserzeichen, in
     dem der Abdruck bei rund 76 % der Breite sitzt und unten ueber den Rand
     laeuft. Nur wenn die Bildbreite an der Bandbreite haengt, landet er wieder
     dort, wo er gezeichnet wurde. Mit `auto` hat der Browser das SVG – es hat
     keine feste Groesse, nur ein viewBox-Verhaeltnis – auf die Bandhoehe
     eingepasst und den Abdruck dadurch verkleinert und nach links gezogen. */
  background-size: 100% auto;
  background-position: center center;
}

/* Schmale Fenster: an der Breite haengend waere der Abdruck nur noch ein
   Fleck. Hier lieber ueber die Hoehe skalieren und nach rechts schieben. */
@media (max-width: 900px) {
  .ekey-sup-banner {
    min-height: 180px;
    padding: 32px 0;
    background-size: auto 150%;
    background-position: 78% center;
  }
}

/* Inhaltsbreite wie in Academy und Haendlersupport.
   `width: 100%` ist hier nicht Zierde: als Flex-Kind schrumpft der Block sonst
   auf Textbreite, und `margin: 0 auto` zentriert ihn dann mitten im Fenster
   statt ihn linksbuendig an die 1248px-Spalte zu setzen. */
.ekey-sup-banner-inner {
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Nur die Abstaende setzen, nicht Groesse oder Farbe – die kommen vom Theme. */
.ekey-support .ekey-sup-banner-inner h1 { margin: 0; }
.ekey-support .ekey-sup-banner-inner h4 { margin: 10px 0 0; }

/* ── Inhaltsband unter dem Kopf ────────────────────────────────────────── */
.ekey-sup-inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ── Betriebszustand: ein Balken, der die Ampelfarbe traegt ────────────
   Beschriftung, Zustand, Zeitstempel und Knopf nebeneinander. Die Farbe des
   Balkens ist die Aussage – deshalb faellt der Punkt weg, den eine graue
   Fassung braeuchte.

   Die Zustandsklasse setzt das Modul (is-online / is-teilweise / is-gestoert),
   gelesen aus der Ausgabe von ekey-cloudstatus. */
.ekey-sup-statusbar {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  /* Oben Luft zum blauen Band, unten uebernimmt der Abstand der Karten. */
  margin: 40px 0 0;
  padding: 14px 20px;
  border-radius: 8px;
  background: #f5f5f7;          /* unbekannter Zustand: neutral, nicht gruen */
  color: #141617;
}
.ekey-sup-statusbar.is-online    { background: #00c352; color: #fff; }
.ekey-sup-statusbar.is-gestoert  { background: #e53935; color: #fff; }
/* Auf dem Gelb ist Weiss nicht lesbar – hier bleibt die Schrift dunkel. */
.ekey-sup-statusbar.is-teilweise { background: #fcbc05; color: #141617; }

.ekey-support .ekey-sup-statusbar-label {
  font-size: 15px;
  font-weight: 400;
  color: inherit;
}
/* Nach rechts geschoben wird ab hier der Zeitstempel (siehe unten); der Knopf
   folgt ihm. Zwei automatische Aussenabstaende wuerden den freien Platz
   untereinander aufteilen und beide in die Mitte ruecken. */
/* Weisser Knopf auf farbigem Grund – das Blau des Standardknopfs verschwindet
   auf Gruen und Rot fast. */
.ekey-support .ekey-sup-statusbar .ekey-btn {
  background: #fff;
  color: #141617;
  border: 1px solid transparent;
}
.ekey-support .ekey-sup-statusbar .ekey-btn:hover { background: #eef0f2; color: #141617; }
/* Ohne Farbe im Ruecken wieder der normale blaue Knopf. */
.ekey-support .ekey-sup-statusbar.is-unbekannt .ekey-btn { background: #00457c; color: #fff; }
.ekey-support .ekey-sup-statusbar.is-unbekannt .ekey-btn:hover { background: #003862; color: #fff; }

/* ── Die Pille des Fremdplugins aufloesen ──────────────────────────────
   Das Markup kommt aus ekey-cloudstatus: ein div mit Meldung (h2) und
   Zeitstempel (p) darin, gebaut als eigenstaendige Pille mit 30px Polster,
   runden Ecken, eigener Flaeche und `color: #fff`.

   `display: contents` nimmt beiden Huellen die eigene Box – Meldung und
   Zeitstempel werden dadurch zu direkten Elementen des Balkens. Erst das
   erlaubt, den Zeitstempel ans rechte Ende neben den Knopf zu schieben; als
   Geschwister tief in der Pille ginge das nicht.

   `color: inherit` muss trotzdem stehen: eine Box ohne eigene Darstellung
   vererbt ihre Farbe weiterhin nach unten, und das Fremdplugin setzt hier
   Weiss – auf dem gelben Balken waere die Schrift sonst unlesbar. */
.ekey-support .ekey-sup-status-box,
.ekey-support .ekey-sup-status-box > div {
  display: contents;
  color: inherit;
}

/* Die Meldung – das ist die Aussage, sie darf Gewicht haben. */
.ekey-support .ekey-sup-status-box > div > h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

/* Der Zeitstempel wandert ans rechte Ende und nimmt den Knopf mit. */
.ekey-support .ekey-sup-status-box > div > p {
  margin: 0 0 0 auto;
  font-size: 13px;
  color: inherit;
  opacity: .85;
  white-space: nowrap;
}

/* ── Band um den EVA-Abschnitt ─────────────────────────────────────────
   Volle Fensterbreite wie das Kopfband, damit der Abschnitt als eigene Zone
   liest und nicht als Kasten im Text.

   ekey-Blau und damit die einzige farbige Flaeche der Seite: Kopfband und die
   drei Kaesten sind grau. Groesse allein hat den Chat nicht hervorgehoben – er
   sah aus wie ein langer Abschnitt, nicht wie der empfohlene Weg. */
.ekey-sup-band {
  width: 100vw;
  /* Weisser Streifen zum Kopfband darueber: ohne ihn stossen graue und blaue
     Flaeche aneinander und die Seite beginnt mit einem Farbblock statt mit
     einem Kopf. */
  margin: 56px 0 0 calc(50% - 50vw);
  padding: 56px 0;
  background: #00457c;
}
@media (max-width: 780px) {
  .ekey-sup-band { margin-top: 40px; padding: 40px 0; }
}

/* ── EVA: der Aufruf zum Chat ──────────────────────────────────────────
   Halb Bild, halb Text. Der Chat ist der schnellste Weg und soll als erster
   auffallen – als Kasten stuende er optisch auf einer Stufe mit den zwei Wegen
   darunter, die nur die Auffanglinie sind. Hervorgehoben wird er ueber die
   Groesse und die Badge, nicht ueber eine Farbflaeche. */
.ekey-sup-eva-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
@media (max-width: 780px) {
  .ekey-sup-eva-cta { grid-template-columns: 1fr; gap: 24px; }
}

/* Die Rundung sitzt am Bild, nicht am Raster: die Textseite hat keine Flaeche
   mehr, die zu runden waere. */
.ekey-sup-eva-bild {
  position: relative;
  min-height: 340px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a5a8d;   /* eine Spur heller als das Band, sonst unsichtbar */
}
.ekey-sup-eva-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ohne Bild: blaue Flaeche mit dem Fingerabdruck des Kopfbands – sieht gewollt
   aus statt leer und kostet keine zweite Datei. */
.ekey-sup-eva-bild.is-leer {
  background: #00457c url("fingerprint-banner.svg") no-repeat center center;
  background-size: auto 180%;
}
@media (max-width: 780px) {
  .ekey-sup-eva-bild { min-height: 220px; }
}

.ekey-sup-eva-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ekey-support .ekey-sup-eva-text h2 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
/* Nicht reines Weiss: der Fliesstext soll unter der Ueberschrift bleiben,
   sonst konkurrieren beide. */
.ekey-support .ekey-sup-eva-text p {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: #d7e4ef;
}
/* `font-family: inherit` und `cursor` muessen sein: .ekey-btn ist fuer Links
   gedacht, hier ist es ein <button>, der sonst die Schrift des Betriebssystems
   traegt. */
.ekey-support .ekey-sup-eva-text .ekey-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: inherit;
  padding: 12px 22px;
  font-size: 15px;
}
/* Das Symbol soll die Zeile nicht auseinanderziehen. */
.ekey-support .ekey-sup-eva-text .ekey-btn svg { flex: none; }

/* ── Die zwei Wege: nachlesen oder fragen ──────────────────────────────
   Nebeneinander, weil es eine Entweder-oder-Entscheidung ist. Untereinander
   laese es sich wie eine Reihenfolge. */
.ekey-sup-wege {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 0;
}
@media (max-width: 780px) {
  .ekey-sup-wege { grid-template-columns: 1fr; gap: 20px; }
}
.ekey-sup-weg {
  background: #f5f5f7;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ekey-support .ekey-sup-weg h2 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: #141617;
}
.ekey-support .ekey-sup-weg p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #575756;
}
/* Haelt die Knoepfe beider Karten auf einer Linie, auch wenn der Text
   darueber unterschiedlich lang ist. */
.ekey-sup-weg .ekey-btn { margin-top: auto; }

/* ── Das Chat-Popup ────────────────────────────────────────────────────
   <dialog> statt handgebautem Overlay: Escape, unbedienbarer Hintergrund und
   die Fokusfuehrung bringt der Browser mit. */
.ekey-sup-eva {
  /* Schmal wie ein Chat, nicht breit wie ein Dokument: Sprechblasen lesen sich
     in einer engen Spalte besser, und 900px waren fuer zwei Zeilen Text zu
     viel.

     `dvh` statt `vh`: die Einheit schrumpft, wenn die Bildschirmtastatur
     aufgeht. Mit `vh` rechnet iOS weiter mit der vollen Fensterhoehe – die
     Eingabezeile rutschte dadurch hinter die Tastatur. Die vh-Zeile davor
     bleibt als Rueckfall fuer aeltere Browser stehen. */
  width: min(560px, 94vw);
  height: min(780px, 86vh);
  height: min(780px, 86dvh);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.ekey-sup-eva::backdrop { background: rgba(0, 0, 0, .6); }

/* Kopfzeile mit Name und Rolle, mittig auf ekey-Blau. Das Kreuz sitzt hier und
   nicht frei ueber dem Chat – dort laege es auf dessen Bedienelementen.

   Links und rechts derselbe Platzhalter: das Kreuz haengt absolut rechts, und
   ohne die gleich grosse Polsterung links waere die vermeintliche Mitte um
   dessen Breite verschoben. */
.ekey-sup-eva-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 52px;
  background: #00457c;
}
/* Zwei Ebenen, weil beides zugleich sein soll: die Zeile mittig in der Leiste
   (`center`), Name und Rolle untereinander auf einer Schriftlinie (`baseline`).
   In einem einzigen Flex-Kasten geht nur eins davon – `baseline` haette den
   Text an den oberen Rand gedrueckt. */
.ekey-sup-eva-titel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ekey-support .ekey-sup-eva-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
/* Die Aufloesung des Namens, leiser gesetzt: „EVA" allein sagt beim ersten
   Mal niemandem etwas, soll dem Namen aber nicht die Schau stehlen. */
.ekey-support .ekey-sup-eva-rolle {
  font-size: 13px;
  color: #cfe0ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekey-sup-eva-head .ekey-sup-eva-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #fff;
}
.ekey-sup-eva-x {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.ekey-sup-eva-x:hover { background: rgba(255, 255, 255, .15); color: #fff; }
/* Auf Blau braucht der Tastaturfokus einen hellen Ring – der blaue Standardring
   des Browsers verschwindet darauf. */
.ekey-sup-eva-x:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Rest der Hoehe fuer den Chat; `display:block` nimmt dem iframe die
   Grundlinien-Luecke unter dem Kopf. */
.ekey-sup-eva iframe {
  display: block;
  width: 100%;
  height: calc(100% - 48px);
  border: 0;
}

/* ── PSIRT ─────────────────────────────────────────────────────────────
   Derselbe Kasten wie FAQ und Ticket, nur ueber die volle Breite: er steht
   allein in seiner Reihe. Der Abstand nach oben entspricht der Luecke zwischen
   den zwei Karten, damit alle drei als eine Gruppe lesen. */
.ekey-sup-psirt {
  margin: 24px 0 72px;
  background: #f5f5f7;
  border-radius: 8px;
  padding: 32px;
}
.ekey-support .ekey-sup-psirt h2 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: #141617;
}
.ekey-support .ekey-sup-psirt p {
  margin: 0 0 20px;
  max-width: 820px;      /* lange Zeilen liest niemand gern */
  font-size: 15px;
  line-height: 1.6;
  color: #575756;
}

/* ── Knoepfe im Avada-Ton ──────────────────────────────────────────────
   Avada setzt --button_gradient_top_color und --button_gradient_bottom_color
   auf var(--awb-color6) = #575756 und die Schrift auf var(--awb-color1) = Weiss.
   Damit stehen die Knoepfe hier wie ueberall sonst auf der Website.

   Beim Hover kehrt Avada um: Flaeche var(--awb-color5), ein Fast-Weiss. Das
   uebernehme ich bewusst nicht – auf dem grauen Band waere der Knopf dann
   praktisch verschwunden. Stattdessen #3c3c3b, der naechstdunklere Ton
   derselben Palette (--awb-color7).

   Der Knopf im Statusbalken bleibt weiss: auf Gruen oder Rot waere Dunkelgrau
   matschig, dort traegt die Balkenfarbe die Aussage. */
.ekey-support .ekey-sup-weg .ekey-btn,
.ekey-support .ekey-sup-psirt .ekey-btn {
  background: #575756;
  color: #fff;
  border: 0;
}
.ekey-support .ekey-sup-weg .ekey-btn:hover,
.ekey-support .ekey-sup-psirt .ekey-btn:hover {
  background: #3c3c3b;
  color: #fff;
}

/* Weiss auf Blau – wie der Knopf im Statusbalken. Ein blauer Knopf auf blauem
   Grund verschwaende, und Dunkelgrau wie bei den drei anderen waere hier
   matschig: auf dem Band traegt die Flaeche selbst die Auszeichnung. */
.ekey-support .ekey-sup-eva-text .ekey-btn {
  background: #fff;
  color: #00457c;
  border: 0;
}
.ekey-support .ekey-sup-eva-text .ekey-btn:hover {
  background: #e7eef4;
  color: #00457c;
}

/* ── Schwebender Chat-Knopf ────────────────────────────────────────────
   Unten rechts, wie man es von Chats kennt. Links unten sitzt schon das
   Cookie-Symbol des Themes – deshalb rechts.

   z-index unter 99999: so bleibt er unter dem Modal der Academy. Der <dialog>
   liegt ohnehin in der obersten Ebene des Browsers und damit immer darueber. */
.ekey-support .ekey-sup-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #00457c;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: background .15s ease, transform .15s ease;
}
.ekey-support .ekey-sup-fab:hover {
  background: #003862;
  color: #fff;
  transform: translateY(-2px);
}
.ekey-support .ekey-sup-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: 0 0 0 3px #00457c, 0 6px 20px rgba(0, 0, 0, .25);
}

/* Waehrend der Chat offen ist, waere der Knopf hinter dem abgedunkelten
   Hintergrund nur noch ein Fleck. Anklickbar ist er dann ohnehin nicht –
   showModal() legt die Seite dahinter still. */
body:has(dialog.ekey-sup-eva[open]) .ekey-support .ekey-sup-fab {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 780px) {
  .ekey-support .ekey-sup-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* ── Die Chatflaeche im Popup ──────────────────────────────────────────
   Nimmt den Platz, den vorher das iframe hatte. WebChat baut sich selbst
   hinein, solange die Flaeche eine feste Hoehe hat – ohne die bleibt der
   Verlauf auf null Pixel stehen. */
.ekey-sup-eva-chat {
  height: calc(100% - 48px);
  background: #fff;
}

/* ── Ladeanzeige ───────────────────────────────────────────────────────
   Drei Punkte statt Kringel: dieselbe Sprache, die Chats zum Tippen benutzen –
   das passt zu dem, was danach kommt. Mittig in der Flaeche, damit der Blick
   dort ist, wo gleich die erste Sprechblase erscheint. */
.ekey-support .ekey-sup-eva-chat[data-zustand="laedt"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.ekey-sup-eva-chat[data-zustand="laedt"]::before,
.ekey-sup-eva-chat[data-zustand="laedt"]::after,
.ekey-sup-eva-chat[data-zustand="laedt"] > .ekey-sup-punkt {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00457c;
  opacity: .25;
  animation: ekey-sup-punkte 1.2s ease-in-out infinite;
}
.ekey-sup-eva-chat[data-zustand="laedt"] > .ekey-sup-punkt { animation-delay: .2s; }
.ekey-sup-eva-chat[data-zustand="laedt"]::after { animation-delay: .4s; }

@keyframes ekey-sup-punkte {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ekey-sup-eva-chat[data-zustand="laedt"]::before,
  .ekey-sup-eva-chat[data-zustand="laedt"]::after,
  .ekey-sup-eva-chat[data-zustand="laedt"] > .ekey-sup-punkt {
    animation: none;
    opacity: .45;
  }
}

/* ── Der Sendeknopf ────────────────────────────────────────────────────
   WebChat zeichnet ihn als grossen Umriss-Papierflieger. In einem 560px
   schmalen Fenster wirkt das wuchtig. Kleiner und gefuellt statt umrandet.

   Die Klassennamen stammen aus WebChat, nicht von uns – deshalb beide
   Schreibweisen: 4.x hat sie zwischendurch umbenannt. Was nicht passt, greift
   einfach nicht. */
/* Das voreingestellte Symbol ist ein duenner Umriss-Papierflieger und wirkt
   im schmalen Fenster unfertig. Statt es umzufaerben – was am Zusammenspiel
   von fill und stroke scheitert – wird es ersetzt: eigenes Symbol als Maske,
   eingefaerbt ueber currentColor.

   Die Klassennamen stammen aus WebChat 4.18 (aus dem Bundle ausgelesen, nicht
   geraten). Aendert Microsoft sie, greift die Regel nicht mehr und es steht
   wieder das Standardsymbol da – unschoen, aber nichts geht kaputt. */
.ekey-sup-eva-chat .webchat__send-box__button svg { display: none; }
.ekey-sup-eva-chat .webchat__send-box__button::after {
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2.01%2021%2023%2012%202.01%203%202%2010l15%202-15%202z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2.01%2021%2023%2012%202.01%203%202%2010l15%202-15%202z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.ekey-sup-eva-chat .webchat__send-box__button { color: #00457c; }
.ekey-sup-eva-chat .webchat__send-box__button:hover { color: #003862; }

.ekey-support .ekey-sup-eva-chat[data-zustand="fehler"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #575756;
}

/* ── Quellenangaben und ihr Dialog ─────────────────────────────────────
   Der Bot nennt seine Quellen; ein Klick oeffnet den Textauszug daraus.
   WebChat zeigt den ungekuerzt und ueber die volle Breite – das liest sich
   wie eine Textwand.

   Was hier nicht zu retten ist: der Auszug selbst. Kommen aus der
   Wissensquelle Shortcode-Reste wie [sc name="faqbuttons"] oder zerschnittene
   Saetze, stehen die auch hier. Das gehoert in Copilot Studio behoben.

   Die Klassennamen stammen aus WebChat 4.18, aus dem Bundle ausgelesen.
   Bewusst ohne .ekey-sup-Praefix: den Dialog haengt WebChat womoeglich
   ausserhalb unserer Flaeche ein. Diese Datei laedt ohnehin nur dort, wo der
   Shortcode steht. */

/* Lesbare Zeilenlaenge statt voller Fensterbreite. */
.webchat__citation-modal-dialog__body {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: #141617;
}
.webchat__citation-modal-dialog__header {
  max-width: 68ch;
  margin: 0 auto 18px;
  font-size: 19px;
  line-height: 1.3;
  color: #141617;
}
.webchat__modal-dialog__box {
  max-width: 820px;
  border-radius: 12px;
}

/* Die Quellenliste unter der Antwort: ruhiger, mit unseren Flaechen. */
.webchat__link-definitions {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
}
.webchat__link-definitions__header-text {
  font-size: 13px;
  font-weight: 700;
  color: #575756;
}
.webchat__link-definitions__list-item-main-text,
.webchat__link-definitions__list-item-text {
  font-size: 14px;
  color: #00457c;
}
.webchat__link-definitions__list-item-badge,
.webchat__link-definitions__badge {
  color: #575756;
}

/* Ueberschriften und Listen im Quellenauszug baendigen.
   Der Auszug ist gerenderter Text aus dem Dokument – steckt darin eine
   Ueberschrift, nimmt sie sonst die h1-Groesse des Themes an und ueberragt
   den Auszug um ein Vielfaches. Hier zaehlt sie als Zwischentitel, nicht als
   Seitentitel. */
.webchat__citation-modal-dialog__body h1,
.webchat__citation-modal-dialog__body h2,
.webchat__citation-modal-dialog__body h3,
.webchat__citation-modal-dialog__body h4 {
  margin: 24px 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #141617;
}
.webchat__citation-modal-dialog__body p { margin: 0 0 14px; }
.webchat__citation-modal-dialog__body ul,
.webchat__citation-modal-dialog__body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.webchat__citation-modal-dialog__body li { margin: 4px 0; }
/* Die langen FAQ-Adressen sprengen sonst die Spalte. */
.webchat__citation-modal-dialog__body a {
  color: #00457c;
  word-break: break-word;
}

/* ── Quellenauszug: der Rest, den Gestaltung hergibt ───────────────────
   Der Inhalt bleibt eine Textwand – zwanzig FAQ-Eintraege ohne Absatz,
   Shortcode-Reste, abgeschnittene Saetze. Das ist die Datei, nicht das CSS.
   Was sich trotzdem tun laesst: die Wand so setzen, dass man sie lesen kann. */

.webchat__modal-dialog__box {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
}
/* Der Auszug darf nie hoeher werden als das Fenster, sonst steht das Ende
   unerreichbar unter dem Bildschirmrand. */
.webchat__citation-modal-dialog__body {
  max-height: 68vh;
  max-height: 68dvh;
  overflow-y: auto;
  padding-right: 8px;
  /* Trennung: deutsche Komposita wie „Fingerprint-Systems" reissen sonst
     Luecken in den Flattersatz. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Kopfzeile als Dokumentangabe, nicht als Ueberschrift: der Dateiname ist
   eine Herkunft, keine Aussage. Kleiner, mit Symbol, abgesetzt durch eine
   Linie. */
.webchat__citation-modal-dialog__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4e7ec;
  font-size: 15px;
  font-weight: 700;
  color: #575756;
  word-break: break-word;
}
.webchat__citation-modal-dialog__header::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: #00457c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%202%204.5%204.5H14V4z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%202%204.5%204.5H14V4z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Die vielen nackten FAQ-Adressen im Text: leiser, damit sie den Fliesstext
   nicht zerhacken – sichtbar bleiben sie trotzdem. */
.webchat__citation-modal-dialog__body a {
  text-decoration-color: rgba(0, 69, 124, .35);
  text-underline-offset: 2px;
}
.webchat__citation-modal-dialog__body a:hover {
  text-decoration-color: currentColor;
}

/* Schliessen-Kreuz: groessere Trefferflaeche, ruhiger Hover. */
.webchat__modal-dialog__close-button {
  border-radius: 8px;
}
.webchat__modal-dialog__close-button:hover {
  background: #f5f5f7;
}

/* ── Fokusrahmen nur fuer die Tastatur ─────────────────────────────────
   Den gestrichelten Rahmen um die angeklickte Nachricht schaltet
   support.js ueber die Style-Optionen ab (Breite 0) – er erschien auch bei
   Mausklick und zerschnitt die Sprechblase.

   Wer mit der Tastatur durch die Nachrichten geht, braucht ihn aber: sonst
   ist nicht erkennbar, wo man gerade steht. `:focus-visible` unterscheidet
   genau das – es greift bei Tastatur, nicht bei Maus. */
.webchat__basic-transcript:focus-visible .webchat__basic-transcript__activity-indicator--focus,
.webchat__basic-transcript:focus-visible .webchat__basic-transcript__focus-indicator {
  outline: 2px solid #00457c;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Handy: der Chat nimmt den ganzen Bildschirm ───────────────────────
   Auf einem iPhone SE bleiben von 86dvh abzueglich Tastatur nur noch ein paar
   Zeilen Gespraech. Ganzflaechig ist auf dieser Groesse ohnehin das Uebliche –
   und es nimmt dem Layout die Rechnerei mit Raendern und Ecken. */
@media (max-width: 640px) {
  .ekey-sup-eva {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  /* Kopfzeile etwas flacher, jede Zeile Gespraech zaehlt. */
  .ekey-sup-eva-head { height: 44px; }
  .ekey-sup-eva-chat,
  .ekey-sup-eva iframe { height: calc(100% - 44px); }
  /* Die Rolle passt neben dem Namen oft nicht mehr auf eine Zeile. */
  .ekey-support .ekey-sup-eva-rolle { display: none; }

  /* Platz fuer den Zurueckrufen-Knopf des Consent-Managers.

     Er sitzt fest unten links, traegt den hoechsten z-index und ist weder
     ueber CSS noch ueber getElementById zu fassen – das Skript haengt ihn
     gekapselt ein. Ueberdecken laesst er sich also nicht; stattdessen
     bekommt die Eingabezeile links eine Rinne, in der er liegen kann, ohne
     auf der Schrift zu sitzen.

     Nur auf dem Handy: am Schreibtisch ueberlappt nichts. */
  .ekey-sup-eva-chat .webchat__send-box__main { padding-left: 52px; }
}

/* Nicht-modaler Dialog auf dem Handy: Position und Ebene muss das CSS setzen –
   die bringt sonst `showModal()` mit, das wir dort nicht benutzen. */
@media (max-width: 640px) {
  .ekey-sup-eva[open] {
    position: fixed;
    inset: 0;
    z-index: 100000;
  }
}
/* Solange der Chat offen ist, soll die Seite dahinter nicht mitblaettern.
   Bei `showModal()` macht das der Browser, beim nicht-modalen wir. */
body.ekey-sup-chat-offen { overflow: hidden; }
html.ekey-sup-chat-offen { overflow: hidden; }

/* Der Zurueckrufen-Knopf des Consent-Managers (Fingerabdruck-Symbol unten
   links) liegt mit sehr hohem z-index ueber allem und landet auf dem Handy
   mitten in der Eingabezeile des Chats. Ueberbieten laesst er sich nicht
   sinnvoll – solange der Chat offen ist, wird er deshalb ausgeblendet und
   kommt beim Schliessen von selbst zurueck.

   Nur waehrend des Chats: an die Datenschutz-Einstellungen muss man jederzeit
   herankommen, nur eben nicht durch die Tastatur hindurch. */
.ekey-sup-chat-offen #cmpboxrecall,
body.ekey-sup-chat-offen #cmpboxrecall { display: none !important; }