/* Nur fuer /chatbot_mymuell */

.chat-live-badge.coming .dot { background: #f78b77; }

/* Test-Fragen-Chips */

.try-chip {
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
      min-height: 88px;
      padding: 1.1rem 1.3rem;
      background: #fff;
      border: 1.5px solid #e9ebec;
      border-radius: 14px;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: all .2s ease;
    }

.try-chip:hover {
      border-color: #f78b77;
      box-shadow: 0 8px 24px rgba(247,139,119,.18);
      transform: translateY(-2px);
    }

.try-chip:active { transform: translateY(0); }

.try-chip-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(247,139,119,.12);
      color: #f78b77;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
      transition: all .2s ease;
    }

.try-chip:hover .try-chip-icon {
      background: #f78b77;
      color: #fff;
    }

.try-chip-text {
      flex: 1;
      font-size: .95rem;
      font-weight: 500;
      color: #343f52;
      line-height: 1.4;
    }

.try-chip-meta {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      flex-shrink: 0;
    }

.try-chip-tag {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: .3rem .65rem;
      background: #f7f8fa;
      color: #8a9098;
      font-weight: 700;
      border-radius: 6px;
    }

.try-chip:hover .try-chip-tag {
      background: #f78b77;
      color: #fff;
    }

.try-chip-arrow {
      color: #c4c9d0;
      font-size: 1.1rem;
      transition: all .2s ease;
    }

.try-chip:hover .try-chip-arrow {
      color: #f78b77;
      transform: translateX(4px);
    }

@media (max-width: 600px) {
      .try-chip { padding: 1rem 1.1rem; gap: .75rem; min-height: 80px; }
      .try-chip-icon { width: 38px; height: 38px; font-size: 1.05rem; }
      .try-chip-text { font-size: .88rem; }
      .try-chip-tag { font-size: .6rem; padding: .25rem .5rem; }
    }

/* Toast für Clipboard-Fallback */

.chat-toast {
      position: fixed;
      bottom: 6rem; right: 1.5rem;
      background: #343f52;
      color: #fff;
      padding: .95rem 1.25rem;
      border-radius: 12px;
      font-size: .9rem;
      font-weight: 500;
      box-shadow: 0 8px 28px rgba(0,0,0,.2);
      opacity: 0;
      transform: translateY(10px);
      transition: all .3s ease;
      z-index: 9999;
      pointer-events: none;
      max-width: 320px;
    }

.chat-toast.show {
      opacity: 1;
      transform: translateY(0);
    }

/* Form Status-Meldungen */

.form-alert {
      padding: .85rem 1.15rem;
      border-radius: 10px;
      font-size: .9rem;
      font-weight: 500;
      margin-bottom: 1.25rem;
      display: flex; align-items: flex-start; gap: .65rem;
      line-height: 1.5;
    }

.form-alert-success {
      background: #e7f5ea;
      color: #1e6e3a;
      border: 1px solid #b8d8c2;
    }

.form-alert-error {
      background: #fdecea;
      color: #a12424;
      border: 1px solid #f4b3b3;
    }

.form-alert i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* Privacy-Checkbox erzwingen (Theme versteckt native Checkboxen) */

.form-privacy {
      display: flex !important;
      align-items: flex-start;
      gap: .7rem;
      margin: 1.25rem 0;
    }

#form_privacy,
    .form-privacy input[type="checkbox"] {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px !important;
      min-height: 20px !important;
      max-width: 20px !important;
      max-height: 20px !important;
      margin: 2px 0 0 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: static !important;
      display: inline-block !important;
      appearance: auto !important;
      -webkit-appearance: checkbox !important;
      -moz-appearance: checkbox !important;
      accent-color: #f78b77 !important;
      cursor: pointer !important;
      flex-shrink: 0 !important;
      border: 1px solid #c4c9d0 !important;
      background: #fff !important;
      pointer-events: auto !important;
      clip: auto !important;
      overflow: visible !important;
    }

.form-privacy label {
      font-size: .9rem;
      line-height: 1.5;
      cursor: pointer;
      margin: 0;
      color: #343f52;
    }

/* Submit-Button disabled state */

.btn-primary:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

/* Beschriftungen im Formular standen auf 18 px, der Fliesstext daneben auf
   17. Ein Pixel Unterschied liest niemand als Ordnung, er macht die Seite
   nur unruhiger. */
main#content .contact-form label,
main#content form label {
  font-size: .85rem;
}


/* ===========================================================================
   Schriftstufen wie auf /portal
   ===========================================================================
   Die Seite trug 18 verschiedene Kombinationen aus Groesse und Gewicht, viele
   nur ein bis zwei Pixel auseinander. /portal wirkt ruhiger, und der Grund
   ist nicht die Zahl der Stufen, sondern das Gewicht: dort steht der
   Fliesstext auf 400, hier auf 500 — und der Vorspann dort auf 19 statt 22.

   Aufgebaut wie css/module.css es fuer /portal tut: erst alles Laufende auf
   eine Grundstufe ziehen, danach gezielt hochstufen. Das raeumt die vielen
   Zwischengroessen des Themes (fs-15, fs-17, lead, mb-0) in einem Schritt auf.
   =========================================================================== */

/* Grundstufe */
main#content p,
main#content li,
main#content address,
main#content label,
main#content .card-body,
main#content .accordion-body {
  font-size: .85rem;        /* 17px */
  font-weight: 400;
  line-height: 1.72;
}

/* 1 Seitentitel */
main#content h1,
main#content h1.display-1,
main#content h1.display-2 {
  font-size: 2.2rem;        /* 44px */
  font-weight: 700;
  line-height: 1.14;
}

/* 2 Abschnitt */
main#content h2.display-4,
main#content h3.display-4,
main#content h2.display-5 {
  font-size: 1.45rem;       /* 29px */
  font-weight: 700;
  line-height: 1.28;
}

/* 3 Untergliederung — Karten, Vorteile, Fragen */
main#content h3,
main#content h4,
main#content h5.h4,
main#content .accordion-header button {
  font-size: 1.15rem;       /* 23px */
  font-weight: 700;
  line-height: 1.35;
}

/* 4 Vorspann
   Auf /portal stehen zwei davon, hier acht — bei so vielen traegt die
   groessere Stufe keine Gliederung mehr, sie macht die Seite nur unruhig.
   Deshalb liegen alle Absaetze auf derselben Groesse. Nur der Einstieg
   unter der Hauptueberschrift bleibt gehoben. */
main#content p.lead,
main#content .lead {
  font-size: .85rem;        /* 17px, wie der uebrige Fliesstext */
  font-weight: 400;
  line-height: 1.72;
}

main#content .hero p.lead:first-of-type,
main#content > section:first-of-type p.lead {
  font-size: .95rem;        /* 19px */
  line-height: 1.66;
}

/* 5 Auszeichnungszeile ueber einer Ueberschrift */
main#content h2.fs-15 {
  font-size: .75rem;        /* 15px */
  font-weight: 700;
}

/* Hervorhebung im Fliesstext: 500 statt 700 — sie soll das Auge halten,
   nicht den Satz zerreissen. */
main#content p strong,
main#content li strong,
main#content p b,
main#content strong,
main#content b {
  font-weight: 500;
}

/* Der Zaehler bleibt gross — er ist Blickfang, keine Ueberschrift. */
main#content .counter {
  font-size: 2.2rem;
  line-height: 1.1;
}


/* ===========================================================================
   Aufnahmen aus dem laufenden Betrieb
   ===========================================================================
   Zwei Reihen mit unterschiedlicher Aufgabe: die Chatfenster zeigen, dass
   jede Kommune ihren eigenen Assistenten bekommt, die Gespraeche zeigen,
   was er beantwortet. Beide sind anklickbar — die Schrift in den Aufnahmen
   ist in dieser Groesse nicht zu lesen, und darum geht es hier auch nicht.
   =========================================================================== */

/* Die Aufnahmen stehen im Schieber ohne Rahmen und ohne Vergroesserung —
   sie sind dort vollstaendig zu sehen. */
main#content .bot-schieber img,
main#content .dialog-schieber img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f6f7f9;
}

/* Im Schieber steht ein Fenster allein und darf ganz zu sehen sein —
   Hochformat, deshalb eine Hoehenschranke, damit die Folie nicht
   ausufert. */
main#content .bot-schieber img {
  max-height: 470px;
  object-fit: contain;
  background: #f6f7f9;
}

main#content .kommune-name {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f78b77;
}

/* Die Pfeile des Themes stehen links und rechts ueber dem Inhalt und
   lagen damit mitten im Erklaertext. Sie ruecken unter den Schieber,
   neben die Punkte. */
main#content .bot-schieber .owl-nav,
main#content .bot-schieber .owl-nav button,
main#content .dialog-schieber .owl-nav button {
  position: static;
  transform: none;
}

/* Im Schieber steht die Aufnahme links und darf nicht die ganze Hoehe
   fuellen — sonst springt der Rahmen beim Blaettern. */
main#content .dialog-schieber img {
  max-height: 430px;
  object-fit: contain;
  object-position: center;
  background: #f6f7f9;
}

@media (prefers-reduced-motion: reduce) {
  main#content .bot-fenster-knopf,
  main#content .dialog-bild-knopf { transition: none; }
}

/* Die Aufnahme aus dem Portal ist Querformat und traegt viel Feinheit —
   sie steht deshalb allein und in voller Breite, nicht im Raster. */
main#content .admin-bild-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .18s ease, box-shadow .18s ease;
}

main#content .admin-bild-knopf:hover {
  border-color: #f78b77;
  box-shadow: 0 6px 20px rgba(30, 34, 40, .09);
}

main#content .admin-bild-knopf:focus-visible {
  outline: 2px solid #e55b13;
  outline-offset: 3px;
}

main#content .admin-bild-knopf img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  main#content .admin-bild-knopf { transition: none; }
}

/* Die drei Folgen unter "Warum jetzt?": kleiner gesetzt als der Vor- und
   Schlusssatz, damit sie als Aufzaehlung lesbar bleiben und den Absatz
   nicht ueberstimmen. */
main#content .druck-punkte h4 {
  font-size: .9rem;
  line-height: 1.35;
}

main#content .druck-punkte p {
  font-size: .8rem;
  line-height: 1.6;
}

main#content .icon-svg-xs {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

/* Der Schlusssatz traegt die Folgerung und steht deshalb abgesetzt. */
main#content .druck-schluss {
  padding-top: 1.2rem;
  border-top: 1px solid #e2e8f0;
}

/* ===== Hoerproben im Voicebot-Abschnitt ==============================
       Der Spieler bleibt der native des Browsers: er ist bedienbar per
       Tastatur, kennt die Systemlautstaerke und braucht kein Skript. Wir
       rahmen ihn nur so, dass er zu den uebrigen Kaesten der Seite passt.
       ====================================================================*/

.hoerprobe {
      height: 100%;
      background: #fff;
      border: 1px solid #e5e9f2;
      border-radius: 8px;
      padding: 1.4rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }

.hoerprobe-kopf {
      display: flex;
      align-items: flex-start;
      gap: .9rem;
    }

.hoerprobe-kopf h4 { font-size: 1rem; line-height: 1.3; }

.hoerprobe-dauer {
      font-size: .75rem;
      color: #8491a5;
      letter-spacing: .02em;
    }

.hoerprobe-text {
      margin: 0;
      font-size: .85rem;
      line-height: 1.72;
      color: #60697b;
      flex-grow: 1;
    }

.hoerprobe-spieler {
      width: 100%;
      height: 40px;
      display: block;
    }

/* Der Fokusring des Browsers laeuft sonst am abgerundeten Spieler vorbei. */

.hoerprobe-spieler:focus-visible {
      outline: 2px solid #e55b13;
      outline-offset: 3px;
      border-radius: 20px;
    }