/*
  Gemeinsames Aussehen der beiden Anruf-Bloecke auf hallo-webseite.de.
  Eingebunden aus zwei Website-Builder-Sections:
    Section 1213, Seite 194 /ki-telefonassistent  -> Wrapper .az-live.az-live--demo
    Section 1214, Seite 119 /contact-us           -> Wrapper .az-live.az-live--hotline
  Beide Sections sind vom Typ az-anrufblock, das Markup kommt aus az-anrufblock.tpl.

  WARUM DIESE DATEI EXISTIERT:
  Die beiden Bloecke zeigen bewusst Unterschiedliches. Auf der Produktseite ist es eine Demo
  ohne sichtbare Rufnummer, auf der Kontaktseite eine echte Hotline mit gross lesbarer Nummer.
  Gemeinsam sind Farbwelt, Karte, Typografie und Motiv. Laege dieses CSS wie frueher zweimal
  im Datenbankinhalt, waeren die beiden Fassungen in wenigen Monaten auseinandergelaufen.
  Deshalb: alles Gemeinsame steht hier, in den Sections steht nur noch Markup.

  NICHT OFFENSICHTLICH, BITTE BEIM AENDERN BEACHTEN:

  1) DUNKELMODUS HAENGT AN html.lagom-dark-mode, NICHT an prefers-color-scheme.
     Lagom setzt die Klasse selbst auf das html-Element, unabhaengig vom Betriebssystem.
     Eine prefers-color-scheme-Abfrage ist hier wirkungslos und erzeugte frueher fuer jeden
     Besucher mit hellem Systemthema eine weisse Karte auf dunkler Seite. Nicht wieder einbauen.

  2) DIE !important UND DIE LANGEN SELEKTOREN SIND NOETIG, KEIN SCHLAMPEREI-ARTEFAKT.
     theme.css enthaelt  a[href^="tel"] { color: inherit !important; }
     Diese Regel zwingt JEDEN Telefonlink auf die Erbfarbe. Ihre Spezifitaet ist 0,1,1, eine
     einfache Klasse (0,1,0) verliert dagegen auch mit !important. Deshalb stehen Rufnummer und
     Anrufknopf hier als .az-live a.az-live-... (0,2,1). Wer das auf eine Klasse zurueckkuerzt,
     bekommt eine unsichtbare Rufnummer in der Textfarbe und ein schwarzes Hoerersymbol auf dem
     blauen Knopf, weil dessen SVG mit currentColor arbeitet.
     Badge und Knopfschrift brauchen zusaetzlich !important gegen a:not(.btn) und die
     Textfarben des Themes.

  3) DER KNOPFVERLAUF IST IN BEIDEN THEMES DERSELBE.
     Ein hellerer Blauton im Dunkelmodus sah besser aus, weisser 12,5-Pixel-Text kam darauf
     aber nur auf 3,89:1 und damit unter AA. Deshalb keine Verlaufsvariablen im Dunkelblock.

  4) DIE FARBWERTE SIND GERECHNET, NICHT GEWAEHLT.
     Nachrechnen mit svg/kontrast-anrufblock.py im Projektordner. Wer eine Farbe aendert,
     traegt sie dort nach und laesst das Skript laufen. Es muss 0 Durchgefallene melden.

  5) BEIM AENDERN DIESER DATEI DEN ZAEHLER IN ?v= ERHOEHEN, sonst liefert der Browser still
     die alte Fassung aus. Der Zaehler steht seit dem Umbau auf den Sektionstyp nur noch an
     EINER Stelle, naemlich im <link> in az-anrufblock.tpl. Stand 18.08.2026: ?v=11.
     Vorher stand er zweimal im Datenbankinhalt der Sections und lief prompt auseinander
     (1214 auf 7, 1213 auf 4). Solange Seite 194 keine der neuen Regeln brauchte, war das
     harmlos. In dem Moment, in dem dort az-anrufblock-voll gesetzt wurde, war es ein Fehler:
     die Seite lud weiter die unter ?v=4 zwischengespeicherte Fassung, in der es die Regeln
     gar nicht gibt, die Klasse stand im HTML und nichts passierte. Deshalb gilt weiter:
     Regel aendern und Zaehler heben immer zusammen.
*/

.az-live {
  --az-primary: #1062fe;
  --az-primary-dark: #083fbf;
  --az-primary-light: #1560f0;
  --az-accent: linear-gradient(90deg, #1966ff 0%, #009aff 100%);
  --az-surface: #ffffff;
  --az-surface-muted: #f7f7f8;
  --az-border: #dfe2e8;
  --az-text: #17191c;
  --az-text-muted: #5e636e;
  --az-focus: #0b57d0;
  --az-badge-bg: #eaf1ff;
  --az-badge-border: #c9dbfa;
  --az-badge-text: #0b3fa8;
  --az-nummer: #0b3fa8;
  --az-success: #1f7a37;
  --az-on-success: #ffffff;
  --az-warning: #8a5a00;
  --az-danger: #d92632;
  font-family: Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  color: var(--az-text);
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}
.az-live *, .az-live *::before, .az-live *::after { box-sizing: border-box; }

html.lagom-dark-mode .az-live,
.az-live[data-scheme="dark"] {
  --az-primary: #6aa6ff;
  --az-surface: #1e2126;
  --az-surface-muted: #262a31;
  --az-border: #3a4049;
  --az-text: #f2f3f5;
  --az-text-muted: #b6bdc9;
  --az-focus: #8fbcff;
  --az-badge-bg: #17243a;
  --az-badge-border: #2c4470;
  --az-badge-text: #b3d0ff;
  --az-nummer: #9cc4ff;
  --az-success: #5fd97c;
  --az-on-success: #0d2b16;
  --az-warning: #ffc65c;
  --az-danger: #ff7b85;
}

/* ---------- Karte, auf beiden Seiten gleich ---------- */

.az-live-card {
  position: relative;
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: 14px;
  padding: 24px 22px 20px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 8px 28px rgba(16, 98, 254, .08);
}
.az-live-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--az-accent);
}

/* Pille oben. Als <a> ist sie eine Verlinkung, als <span> nur eine Auszeichnung. */
.az-live-marke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 12px 5px 14px;
  border: 1px solid var(--az-badge-border);
  border-radius: 999px;
  background: var(--az-badge-bg);
  color: var(--az-badge-text) !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
a.az-live-marke:hover, a.az-live-marke:focus { text-decoration: underline; }
.az-live-marke:focus-visible { outline: 3px solid var(--az-focus); outline-offset: 2px; }
.az-live-marke svg { flex: 0 0 auto; width: 15px; height: 15px; }

.az-live-titel {
  margin: 12px 0 0;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--az-text);
}

.az-live-motiv { margin: 14px 0 2px; }
.az-live-motiv img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  margin: 0 auto;
}

.az-live-fineprint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--az-text-muted);
}

/* ---------- Nur Produktseite: Hinweiskasten und Anrufknopf ---------- */

/* Der Hinweiskasten ist die Offenlegung nach dem EU-Regelwerk fuer KI. Er darf nicht gekuerzt,
   abgeschwaecht oder hinter eine Ausklappfunktion gelegt werden. Er steht direkt vor dem Knopf,
   damit er vor dem Druecken gelesen wird. */
.az-live-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: var(--az-surface-muted);
  border: 1px solid var(--az-border);
  border-radius: 10px;
  padding: 11px 13px;
  margin: 14px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--az-text);
}
.az-live-notice svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--az-primary);
}

.az-live a.az-live-button,
.az-live-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 60px;
  padding: 9px 18px;
  text-decoration: none;
  color: #ffffff !important;
  background: linear-gradient(90deg, var(--az-primary-light) 0%, #0f52d8 55%, var(--az-primary-dark) 100%);
  border-radius: 10px;
  transition: filter .15s ease;
}
.az-live a.az-live-button:hover { filter: brightness(1.1); text-decoration: none; }
.az-live-button:focus-visible { outline: 3px solid var(--az-focus); outline-offset: 2px; }
.az-live-button > svg { flex: 0 0 auto; width: 21px; height: 21px; }
.az-live-button-text { display: block; text-align: left; }
.az-live-button-haupt {
  display: block;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.az-live-button-zusatz {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff !important;
}

/* ---------- Nur Kontaktseite: Hotline ---------- */

/* Die Rufnummer steht hier absichtlich gross und lesbar. Viele lesen am Rechner und waehlen
   vom Telefon, dort nuetzt ein Knopf nichts. Kein user-select-Verbot, kein Aufsplitten in
   mehrere Elemente, sonst laesst sie sich nicht sauber markieren und kopieren.
   clamp statt Media Query, damit die Nummer auch auf 320 Pixel breiten Geraeten in eine
   Zeile passt, ohne dass es einen sichtbaren Sprung gibt. */
.az-live a.az-live-nummer,
.az-live-nummer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: clamp(22px, 7.2vw, 30px);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--az-nummer) !important;
  text-decoration: none;
}
.az-live a.az-live-nummer:hover { text-decoration: underline; }
.az-live-nummer:focus-visible { outline: 3px solid var(--az-focus); outline-offset: 3px; }
.az-live-nummer svg {
  flex: 0 0 auto;
  width: .8em;
  height: .8em;
}

.az-live-zeiten {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--az-text-muted);
}

/* NEU 18.08.2026: Der Anrufknopf steckt jetzt im Freischalt-Widget und ist ein <button> im
   Formular. Der Abstand zwischen den Eingabefeldern und dem Knopf steht deshalb am
   Formular-Button statt an der Hotline-Fassung. Der freigeschaltete tel:-Link regelt seinen
   Abstand selbst (siehe Abschnitt OTP-Freischaltung weiter unten). */
.az-live-form .az-live-button { margin-top: 16px; }

/* Auf der Hotline zaehlt die Rufnummer, nicht das Bild. Das Motiv ist hier deshalb kleiner
   als auf der Produktseite, damit die ganze Karte auf dem Telefon in den Bildausschnitt passt. */
.az-live--hotline .az-live-motiv { margin: 12px 0 0; }
.az-live--hotline .az-live-motiv img { max-width: 240px; }

/* NICHT OFFENSICHTLICH: Lagom haengt an jedes <li> im Seiteninhalt ein eigenes ::before,
   ein 24x24 grosses blaues Haken-Plaettchen aus der Schrift lagom-small-icons, absolut
   positioniert. list-style: none entfernt das NICHT. Ohne die Abschaltung unten stehen zwei
   Symbole nebeneinander und die Haken behaupten faelschlich eine Merkmalsliste.
   Die Zeilen sind hier eine Aufzaehlung, deshalb bleibt es ein <ul>, statt aus semantischen
   Gruenden auf <div> auszuweichen. */
.az-live ul.az-live-punkte li::before,
.az-live ul.az-live-punkte li::after {
  content: none !important;
  display: none !important;
}

.az-live-punkte {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
}
.az-live-punkte li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--az-border);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--az-text);
}
.az-live-punkte li:first-child { border-top: 0; padding-top: 0; }
.az-live-punkte svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--az-primary);
}

/* Dieselbe Pflichtangabe wie auf der Produktseite, wortgleich. Auf einer Hotline ist sie
   eine normale Auskunft und kein Alarm, deshalb ohne Kasten und ohne farbiges Warnzeichen.
   Der Wortlaut bleibt unangetastet.
   NICHT OFFENSICHTLICH: die volle Textfarbe var(--az-text) ist Absicht, nicht das gedaempfte
   Grau. Ruhiger darstellen heisst hier ohne Kasten, nicht leiser. Eine Pflichtangabe in
   Sekundaergrau waere eine Abschwaechung durch die Hintertuer. */
.az-live-hinweis {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--az-border);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--az-text);
}
.az-live-hinweis svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--az-text-muted);
}

/* ---------- Umgebungen ---------- */

@media (prefers-reduced-motion: reduce) {
  .az-live-button { transition: none; }
  .az-live-spinner { animation: none; }
}
@media (max-width: 420px) {
  .az-live-card { padding: 20px 15px 17px; }
  .az-live-titel { font-size: 21px; }
  .az-live-motiv img { max-width: 268px; }
  .az-live--hotline .az-live-motiv img { max-width: 200px; }
  .az-live-col-country { flex: 1 1 100%; }
}

/* ---------- Vollbreite, zurzeit nur Section 1214 auf /contact-us ---------- */

/*
  NEU 17.08.2026. Der Haken ist die Klasse az-anrufblock-voll. Sie steht NICHT im Markup der
  Section, sondern im Website-Builder-Feld "Section custom class" der Section 1214. Das ist der
  vom Theme dafuer vorgesehene Weg: call-to-action/section.php kennt kein Vollbreite-Feld, wohl
  aber custom_class, und call-to-action.tpl haengt den Wert an den aeusseren Section-Container.
  Vorteil gegenueber einer Klasse im eigenen Markup: die Einstellung ueberlebt ein Theme-Update
  und bleibt im Editor sichtbar und aenderbar.

  VOLLE BREITE HEISST HIER: DIE KARTE, NICHT DIE TEXTZEILE.
  Die Karte fuellt jetzt den ganzen Inhaltsbereich der Seite aus, also bis 1360 Pixel, das ist
  die max-width des Lagom-Containers. Der Text darf sich dabei NICHT mitstrecken, ab etwa 75
  Zeichen je Zeile verliert man beim Zeilenwechsel die Zeile. Deshalb bekommt jeder Textblock
  unten eine eigene Obergrenze in ch, und die beiden Aufzaehlungspunkte stehen ab 780 Pixeln
  nebeneinander statt untereinander. Nur so wird die gewonnene Breite genutzt, ohne dass eine
  einzelne Zeile ueber die ganze Karte laeuft.

  Wer die Karte spaeter echt randlos ueber das Browserfenster ziehen will: NICHT mit 100vw und
  negativen Raendern, das zaehlt die Scrollleiste mit und erzeugt waagerechtes Scrollen. Dann
  gehoert die Section aus dem .container heraus, und das ist eine Theme-Aenderung.
*/
/*
  DREI BREMSEN, ALLE DREI MUESSEN WEG, SONST PASSIERT NICHTS SICHTBARES.
  Das ist der Teil, den man nicht erraten kann, deshalb hier nachgemessen statt vermutet:

  a) .az-live steht weiter oben auf max-width 560px. Das ist die schmale Fassung.

  b) .section-subtitle aus lagom-cms.css steht auf max-width 768px. DAS ist die eigentliche
     Bremse. Der komplette Block liegt naemlich im Untertitel-Feld der Section, und das Theme
     begrenzt Untertitel bewusst auf lesbare Zeilenlaenge. Genau diese Aufgabe uebernehmen wir
     hier selbst, blockweise, deshalb darf die pauschale Grenze fallen.

  c) .section-box ist ein Flex-Kind des .container, ohne eigene Breitenangabe schrumpft es auf
     die Inhaltsbreite. Ohne width:100% bleibt die Karte auch nach a) und b) zu schmal.

  Wer nur eine der drei anfasst und sich wundert, warum nichts passiert: hier ist der Grund.
  Reihenfolge beim Suchen: erst die Elternkette im Browser durchmessen, nicht in theme.css
  greppen. In theme.css steht zu .section-box ueberhaupt nichts, die Suche geht ins Leere.
*/
.az-anrufblock-voll .section-box { width: 100%; }
.az-anrufblock-voll .section-subtitle { max-width: none; }
.az-anrufblock-voll .az-live { max-width: none; }
.az-anrufblock-voll .az-live-card { padding: 30px 26px 26px; }
.az-anrufblock-voll .az-live-widget { max-width: 560px; margin: 16px auto 0; }

.az-anrufblock-voll .az-live-titel { margin: 12px auto 0; max-width: 24ch; }
.az-anrufblock-voll .az-live-zeiten { margin: 5px auto 0; max-width: 60ch; }
.az-anrufblock-voll .az-live-punkte { margin: 16px auto 0; max-width: 1000px; }

/* Der Block bekommt die Breite der Punkte, damit seine Trennlinie buendig darunter sitzt.
   Der Text darin bleibt aber kurz: nur das innere <span> wird begrenzt, nicht der Rahmen.
   Ohne die Begrenzung liefe die Pflichtangabe ueber rund 110 Zeichen in einer Zeile. */
.az-anrufblock-voll .az-live-hinweis {
  margin: 14px auto 0;
  max-width: 1000px;
  justify-content: center;
}
.az-anrufblock-voll .az-live-hinweis > span { max-width: 68ch; }

/* Zwei Spalten erst, wenn eine Spalte noch mindestens rund 45 Zeichen breit bleibt.
   Die Trennlinien der Punkte entfallen dabei, sonst haengt ueber der rechten Spalte eine
   Linie ohne Bezug. Getrennt wird dann durch den Spaltenabstand. */
@media (min-width: 780px) {
  .az-anrufblock-voll .az-live-punkte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
  .az-anrufblock-voll .az-live-punkte li { border-top: 0; padding: 0; }
  /* Auf der breiten Karte wirkt das kleine Hotline-Motiv verloren, deshalb hier etwas groesser.
     Auf dem Telefon bleibt es bei den 240 bzw. 200 Pixeln weiter oben. */
  .az-anrufblock-voll .az-live-motiv img { max-width: 300px; }

  /* Der Freischalt-Bereich darf auf der breiten Karte nicht ueber die ganzen 1360 Pixel
     laufen. Die gemeinsame Obergrenze steht am .az-anrufblock-voll .az-live-widget weiter oben. */

  /* ----- Vollbreite auf der PRODUKTSEITE, Section 1213 auf /ki-telefonassistent -----

     NAMENSFALLE, KORRIGIERT AM 17.08.2026: Diese Regeln standen frueher auf az-live--produkt und
     stammen aus der Zeit, als der Block noch als handgeschriebenes HTML im Sectioninhalt lag.
     Der Sektionstyp az-anrufblock setzt am Wrapper aber az-live--demo, siehe az-anrufblock.tpl.
     Seit dem Umbau auf den Sektionstyp griff hier deshalb keine einzige Regel mehr, die
     Produktseite fiel stillschweigend auf die schmale Grundfassung zurueck. Wer die Klasse
     im Template umbenennt, muss sie hier mitziehen, sonst passiert dasselbe noch einmal.

     WARUM DIESER BLOCK EIGENE REGELN BRAUCHT:
     Die Produktfassung hat nur sechs Elemente und war 443 Pixel hoch. Auf 1280 Pixeln
     gestreckt sah sie aus wie ein leerer Kasten, also nach Versehen statt nach Absicht.
     Deshalb hier groesseres Motiv, groesserer Titel und mehr Innenabstand: die Karte wirkt
     als bewusster Banner-Abschnitt. Die Textbloecke behalten trotzdem ihre Obergrenze.

     WARUM KEIN ZWEISPALTER MIT MOTIV LINKS:
     Der waere schoener, geht aber nicht ohne einen zusaetzlichen Wrapper im Markup. Ohne ihn
     muss das Motiv per grid-row ueber alle Zeilen gespannt werden, und dann blaeht es die
     erste Zeile auf. Im Versuch wurde dadurch die Pille oben zu einer riesigen Blase
     auseinandergezogen. Sauber loesbar erst mit dem eigenen Sektionstyp az-anrufblock,
     wo das Markup einen Wrapper bekommen kann. Bis dahin bewusst einspaltig. */
  .az-anrufblock-voll .az-live--demo .az-live-card { padding: 40px 26px 34px; }
  .az-anrufblock-voll .az-live--demo .az-live-motiv { margin: 18px 0 4px; }
  .az-anrufblock-voll .az-live--demo .az-live-motiv img { max-width: 420px; }
  .az-anrufblock-voll .az-live--demo .az-live-titel { margin: 14px auto 0; max-width: 22ch; font-size: 27px; }
  .az-anrufblock-voll .az-live--demo .az-live-notice { margin: 18px auto; max-width: 68ch; }
  .az-anrufblock-voll .az-live--demo .az-live-fineprint { margin: 12px auto 0; max-width: 60ch; }
}

/* ---------- OTP-Freischaltung, beide Fassungen ----------

   NEU 18.08.2026. Der Anruf-Knopf ist nicht mehr frei klickbar, sondern muss erst
   freigeschaltet werden: Der Besucher gibt seine Telefonnummer ein, erhaelt per SMS oder
   WhatsApp einen Bestaetigungscode und schaltet damit den Knopf frei. Die vier Zustaende
   haengen am data-phase-Attribut des Wrappers .az-live-widget:

     locked  -> Knopf grau und gesperrt, Hinweis sichtbar
     nummer  -> Nummer wird eingegeben, Knopf blau und aktiv
     code    -> Nummer steht fest, OTP-Feld kommt dazu
     unlocked-> Formular weg, gruener tel:-Link statt Knopf

   Es wird NIE ein Rueckruf ausgeloest: Der freigeschaltete Knopf ist ein gewoehnlicher
   tel:-Link auf die Baustein-Rufnummer. Die Farbwerte fuer Erfolg/Warnung/Fehler stammen
   aus der lauffaehigen Referenz assets/widget-test.html und decken AA in beiden Themes.

   Der Knopf im Formular ist ein echtes <button>, der freigeschaltete Knopf ein <a>. Beide
   teilen die Klasse .az-live-button. Die Reset-Eigenschaften weiter unten gehoeren nur dem
   <button>, das <a> stuetzt sich auf die Basis-Regel oben. Die Datenattribut-Werte
   (data-phase, data-state, data-step, data-invalid) setzt das JavaScript im Baustein-
   Template, der Markup-Aufbau dazu steht in az-anrufblock.tpl. */

.az-live-widget {
  margin-top: 16px;
  text-align: left;
}
/* Auf der Demo folgt das Widget direkt auf den Hinweiskasten, der schon einen unteren
   Abstand hat. Deshalb dort kein zusaetzlicher Oberabstand. */
.az-live--demo .az-live-widget { margin-top: 2px; }

.az-live-locked-hint {
  display: none;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--az-text-muted);
}
.az-live-widget[data-phase="locked"] .az-live-locked-hint { display: flex; }
.az-live-locked-hint svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.az-live-form { margin: 0; }
.az-live-widget[data-phase="unlocked"] .az-live-form { display: none; }

.az-live-row { display: flex; flex-wrap: wrap; gap: 10px; }
.az-live-field { flex: 1 1 200px; min-width: 0; }
.az-live-col-country { flex: 0 0 190px; }
.az-live-otp { flex: 1 1 100%; margin-top: 14px; }
.az-live-widget[data-step="code"] .az-live-row { display: none; }

.az-live-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--az-text);
}

.az-live-input,
.az-live-country {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  color: var(--az-text);
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: 10px;
  appearance: none;
}
.az-live-country {
  color: var(--az-text-muted);
  background: var(--az-surface-muted);
  cursor: default;
}
.az-live-input::placeholder { color: var(--az-text-muted); opacity: 1; }
.az-live-input:focus-visible,
.az-live-country:focus-visible {
  outline: 3px solid var(--az-focus);
  outline-offset: 1px;
}
.az-live-widget[data-invalid="1"] .az-live-input,
.az-live-input[aria-invalid="true"] {
  border-color: var(--az-danger);
}

.az-live-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--az-text-muted);
}

.az-live-consent {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--az-text-muted);
  text-align: left;
}
.az-live-consent a { color: var(--az-primary); text-decoration: underline; }

/* Reset fuer das <button>-Element; das <a> stuetzt sich auf die Basis-Regel oben. */
.az-live-button {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  border: 0;
  cursor: pointer;
  appearance: none;
}
.az-live-button:disabled { cursor: not-allowed; opacity: .6; }
.az-live-widget .az-live-button:not(:disabled):hover { filter: brightness(1.05); }

/* Gesperrt: grauer Knopf statt blauem Verlauf. Die hohe Spezifitaet ist noetig gegen die
   Basis-Regel .az-live a.az-live-button (0,2,1) und ihr !important auf der Textfarbe. */
.az-live-widget[data-phase="locked"] .az-live-button,
.az-live-widget[data-phase="locked"] .az-live-button:hover {
  background: var(--az-surface-muted);
  color: var(--az-text-muted) !important;
  border: 1px solid var(--az-border);
  opacity: 1;
  filter: none;
  box-shadow: none;
}
.az-live-widget[data-phase="locked"] .az-live-button-haupt,
.az-live-widget[data-phase="locked"] .az-live-button-zusatz {
  color: var(--az-text-muted) !important;
}

.az-live-spinner {
  display: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: az-live-spin .7s linear infinite;
}
.az-live-widget[data-state="loading"] .az-live-spinner { display: inline-block; }
@keyframes az-live-spin { to { transform: rotate(360deg); } }

/* Freigeschaltet: gruener tel:-Link statt Formular. Die Spezifitaet 0,3,1 liegt ueber der
   Basis-Regel .az-live a.az-live-button (0,2,1), damit die gruene Flaeche den blauen
   Verlauf schlaegt. */
.az-live-unlocked { display: none; margin-top: 16px; }
.az-live-widget[data-phase="unlocked"] .az-live-unlocked { display: block; }
.az-live a.az-live-button.az-live-button--gruen {
  background: var(--az-success);
  color: var(--az-on-success) !important;
}
.az-live a.az-live-button.az-live-button--gruen .az-live-button-haupt,
.az-live a.az-live-button.az-live-button--gruen .az-live-button-zusatz {
  color: var(--az-on-success) !important;
}
.az-live-unlocked-number {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--az-text);
}
.az-live a.az-live-unlocked-tel {
  display: inline-block;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--az-primary) !important;
  text-decoration: none;
}
.az-live a.az-live-unlocked-tel:hover { text-decoration: underline; }
.az-live a.az-live-unlocked-tel:focus-visible {
  outline: 3px solid var(--az-focus);
  outline-offset: 2px;
}
.az-live-unlocked-fineprint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--az-text-muted);
}

/* Statuszeile: nur sichtbar, wenn das Widget einen Zustand meldet. Die Rahmenfarbe folgt
   der Textfarbe, damit Warnung/Fehler nicht nur an der Farbe zu erkennen sind. */
.az-live-status {
  display: none;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-color: currentColor;
  border-radius: 8px;
  background: var(--az-surface-muted);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}
.az-live-widget[data-state="success"] .az-live-status,
.az-live-widget[data-state="warning"] .az-live-status,
.az-live-widget[data-state="error"] .az-live-status { display: block; }
.az-live-widget[data-state="success"] .az-live-status { color: var(--az-success); }
.az-live-widget[data-state="warning"] .az-live-status { color: var(--az-warning); }
.az-live-widget[data-state="error"] .az-live-status { color: var(--az-danger); }

/* ---------- Was frueher hier stand ----------

   Bis zum 17.08.2026 folgten hier rund 60 Zeilen fuer .az-live-gast, .az-live-gast-text,
   .az-live-gast-wege, .az-live-gast-haupt und .az-live-gast-zweit. Sie gestalteten den
   Hinweis "Unsere Rufnummer sehen angemeldete Kunden" samt Anmelde- und Formularknopf.
   Dieser Zweig ist aus az-anrufblock.tpl entfernt, die Begruendung steht ausfuehrlich im
   Kopfkommentar dieser Vorlage. Das Markup existiert also nicht mehr, folglich sind auch die
   Regeln weg statt als Leiche liegen zu bleiben. Die alte Fassung liegt in
   /root/backups/anrufblock-loginzweig-raus-20260817-062508/az-anrufblock.css, falls jemand
   sie fuer etwas anderes wieder braucht.
*/