/* Inline-Head-CSS aus Live-Template (design26 etc.), 1:1 uebernommen */

        [v-cloak] {
            display: none;
        }

        .textbox-ansagentext[placeholder]:empty:before {
            content: attr(placeholder);
        }

        .list-item {
        display: inline-block;
        margin-right: 10px;
      }

      .list-enter-active,
      .list-leave-active {
        transition: all 1s;
      }

      .list-enter,
      .list-leave-to

      /* .list-leave-active below version 2.1.8 */
        {
        opacity: 0;
        transform: translateY(30px);
      }


      .fade-enter-active,
      .fade-leave-active {
        transition: opacity .3s;
      }

      .fade-enter,
      .fade-leave-to

      /* .fade-leave-active below version 2.1.8 */
        {
        opacity: 0;
      }
    

/* Preistabelle + Zeichen-Rechner, 2026-08-02 */
/* ============================================================
   telefonansagen.ai — Preistabelle + Zeichen-Rechner
   Stand 02.08.2026
   ALLES gescoped auf .tai-pt / .tai-calc — keine nackten
   Element-Selektoren (siehe feedback_no_global_css_without_test)
   ============================================================ */

/* ---------- gemeinsame Bausteine ---------- */
.tai-pt,
.tai-calc {
  max-width: 100%;
  min-width: 0;
  --tai-navy: #001357;
  --tai-mint: #56DFCD;
  --tai-mint-tx: #27D4BD;
  --tai-red: #FF0046;
  --tai-grey: #d7dce1;
  --tai-txt: #64748b;
  font-weight: 300;
}

.tai-pt-h2,
.tai-calc-h2 {
  color: var(--tai-navy);
  font-weight: 300;
  text-align: center;
  margin: 0 0 .5rem;
}
.tai-pt-h2 strong,
.tai-calc-h2 strong { font-weight: 600; }

.tai-pt-sub,
.tai-calc-sub {
  color: var(--tai-txt);
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2rem;
}

/* ---------- Auf dunklem Verlauf (.keyvisual-gradient) ----------
   Beide Bausteine sitzen im Artikel innerhalb von
   <div class="content keyvisual-gradient"> — Verlauf #103173 -> #348dc5.
   Navy-Text waere dort unlesbar, deshalb alles ausserhalb der weissen
   Karten auf Weiss umstellen. Nur in DIESEM Kontext, damit die
   Bausteine auf weissem Grund unveraendert bleiben. */
.keyvisual-gradient .tai-pt-h2,
.keyvisual-gradient .tai-calc-h2 { color: #fff; }

.keyvisual-gradient .tai-pt-sub,
.keyvisual-gradient .tai-calc-sub { color: rgba(255, 255, 255, .85); }

.keyvisual-gradient .tai-pt-incl li { color: rgba(255, 255, 255, .92); }
.keyvisual-gradient .tai-pt-incl li::before {
  border-left-color: var(--tai-mint);
  border-bottom-color: var(--tai-mint);
}

.keyvisual-gradient .tai-pt-note { color: rgba(255, 255, 255, .72); }
.keyvisual-gradient .tai-pt-swipe { color: rgba(255, 255, 255, .75); }

.keyvisual-gradient .tai-calc-all a { color: #fff; }
/* .tai-calc-disc NICHT umfaerben — steht in der weissen Karte */

/* Kauf-Button (Icon + Text) — beide Bausteine */
.tai-pt-cart,
.tai-calc-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 2rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  /* Rand-Breite ist in jedem Zustand gleich und wird in die Box gerechnet —
     der Button darf beim Hover weder springen noch schrumpfen.
     border-color wird animiert, border-width NIE. */
  box-sizing: border-box;
  border-style: solid;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.tai-pt-cart svg,
.tai-calc-cart svg { flex: 0 0 auto; }

/* ============================================================
   1) Preistabelle  (/preise)
   ============================================================ */
.tai-pt { padding: 1rem 0 0; }

.tai-pt-swipe {
  display: none;
  margin: 0 0 .5rem;
  color: #94a3b8;
  font-size: .74rem;
  text-align: right;
}

.tai-pt-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid var(--tai-grey);
  box-shadow: 0 10px 30px rgba(0, 19, 87, .07);
}

.tai-pt-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  background: transparent;
}

.tai-pt-table thead th {
  background: #f7f9fb;
  color: var(--tai-navy);
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: right;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--tai-grey);
  white-space: nowrap;
}
.tai-pt-table thead th:first-child { text-align: left; }

.tai-pt-table tbody tr { border-bottom: 1px solid #eef1f4; }
.tai-pt-table tbody tr:last-child { border-bottom: 0; }
.tai-pt-table tbody tr:hover { background: #fbfdfe; }

.tai-pt-table td,
.tai-pt-table tbody th {
  padding: .95rem 1rem;
  vertical-align: middle;
  text-align: right;
}

.tai-pt-name {
  text-align: left !important;
  color: var(--tai-navy);
  font-weight: 600;
  font-size: 1.02rem;
  white-space: nowrap;
}

.tai-pt-num { color: var(--tai-navy); font-variant-numeric: tabular-nums; }
.tai-pt-num strong { font-weight: 600; font-size: 1.05rem; display: block; }

/* .tai-pt-gross entfaellt seit 02.08.2026 — keine Bruttopreise mehr
   (B2B-Angebot, Hinweis „zzgl. gesetzl. MwSt." steht unter der Tabelle
   und in der Fusszeile). Regel bleibt als Schutz, falls in einer alten
   Cache-Fassung noch ein Span auftaucht. */
.tai-pt-gross { display: none; }

/* B2B-Hinweis in der Fusszeile (index.php, alle Seiten).
   .footer ist ein flex-wrap-Container mit fester Hoehe — ein normales <p>
   landet in der Zeile und wird abgeschnitten. Deshalb volle Breite
   erzwingen (flex-basis 100%), damit es in eine eigene Zeile umbricht,
   und die feste Hoehe des Containers aufheben. */
.wrapper_global .content .modul .footer { height: auto; }

.wrapper_global .content .modul .footer .tai-b2b-hinweis,
.footer .tai-b2b-hinweis {
  flex: 0 0 100%;
  width: 100%;
  order: 99;                 /* immer als letzte Zeile */
  max-width: 60rem;
  margin: .35rem auto 0;
  text-align: center;
  font-size: .72rem;
  line-height: 1.5;
  opacity: .7;
}

.tai-pt-per { color: var(--tai-txt); font-size: .9rem; }

.tai-pt-save {
  color: var(--tai-mint-tx);
  font-weight: 500;
  font-size: .85rem;
  white-space: nowrap;
}

.tai-pt-buy { text-align: right; width: 1%; }

.tai-pt-cart {
  padding: .55rem 1.1rem;
  color: var(--tai-navy);
  background: #fff;
  border: 1px solid var(--tai-mint);
}
.tai-pt-cart:hover,
.tai-pt-cart:focus-visible {
  background: var(--tai-mint);
  color: var(--tai-navy);
  /* Rand MUSS sichtbar bleiben: gleiche Breite, aber dunkler als die
     Fuellung — sonst verschmilzt mint auf mint und der Button wirkt
     optisch kleiner. */
  border-color: var(--tai-mint-tx);
  transform: translateY(-1px);
}

/* Bestseller-Zeile */
.tai-pt-best { background: #f4fdfb; }
.tai-pt-best:hover { background: #eefbf8; }

.tai-pt-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .16rem .5rem;
  border-radius: 1rem;
  background: var(--tai-mint);
  color: var(--tai-navy);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}

.tai-pt-cart--best {
  background: var(--tai-red);
  border-color: var(--tai-red);
  color: #fff;
}
.tai-pt-cart--best:hover,
.tai-pt-cart--best:focus-visible {
  background: #e0003d;
  border-color: #c40036;   /* dunkler als die Fuellung, Rand bleibt sichtbar */
  color: #fff;
}

.tai-pt-vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tai-pt-incl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.tai-pt-incl li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--tai-txt);
  font-size: .88rem;
}
.tai-pt-incl li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: .72rem; height: .38rem;
  border-left: 2px solid var(--tai-mint-tx);
  border-bottom: 2px solid var(--tai-mint-tx);
  transform: rotate(-45deg);
}

.tai-pt-note {
  text-align: center;
  color: var(--tai-txt);
  font-size: .8rem;
  max-width: 50rem;
  margin: 1.25rem auto 0;
  line-height: 1.6;
}

/* ============================================================
   2) Zeichen-Rechner  (Startseite)
   ============================================================ */
.tai-calc { padding: 1rem 0 0; }

/* Das Band, in dem der Rechner steht (05.08.2026).
   Er sass bis dahin auf demselben Navy-Verlauf wie die Preistabelle direkt
   darueber; seither auf einem eigenen Band. Das Band traegt jetzt denselben
   Verlauf wie die Empfehlungskarte (#f4fdfb -> #fff), damit Karte und Flaeche
   eine Einheit bilden statt zweier konkurrierender Toene.

   Volle Selektorkette noetig: die --alt-Basisregel im Design26-Scope faerbt
   grau und legt das driftende Punktraster auf (0,5,0). :has(> .tai-calc)
   bindet die Ausnahme an genau dieses eine Band und hebt auf (0,6,0). */
.wrapper_global .scope-design26 .content.b2b-section.b2b-section--alt:has(> .tai-calc) {
  background-color: #ffffff;
  background-image: linear-gradient(160deg, #f4fdfb 0%, #ffffff 62%);
  /* Die --alt-Basisregel bringt background-size: 22px 22px fuer ihr
     Punktraster mit. Ohne Reset wird der Verlauf in 22-px-Kacheln
     wiederholt — sichtbar als feines Streifenmuster. */
  background-repeat: no-repeat;
  background-size: cover;
  animation: none;
}


/* Der Intro-Absatz beider Bausteine bringt `margin: 0 auto` mit (0,1,0)
   und verliert damit gegen die Design26-Fliesstextregel
   `.scope-design26 .b2b-section .modul > p` (0,3,1): die setzt margin auf 0
   und max-width auf 72ch. Solange der Rechner auf dem keyvisual-Verlauf
   sass, fiel das nicht auf — dort greift die Regel nicht. Seit er in
   einem .b2b-section steht, stand der Absatz linksbuendig unter einer
   mittigen Ueberschrift. Hier zurueckgeholt. */
.wrapper_global .scope-design26 .content.b2b-section .modul > p.tai-pt-sub,
.wrapper_global .scope-design26 .content.b2b-section .modul > p.tai-calc-sub {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.tai-calc-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.5rem;
  align-items: stretch;      /* beide Karten gleich hoch */
}

.tai-calc-controls {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tai-grey);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 19, 87, .07);
}

.tai-calc-row { margin-bottom: 1.6rem; }
.tai-calc-row:last-of-type { margin-bottom: 1.2rem; }

.tai-calc-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--tai-navy);
  font-size: .95rem;
  margin-bottom: .6rem;
}

.tai-calc-val {
  color: var(--tai-mint-tx);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Slider */
.tai-calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #e6ebf0;
  background-image: linear-gradient(90deg, var(--tai-mint-tx) 0%, var(--tai-mint) var(--tai-fill, 0%), transparent var(--tai-fill, 0%));
  background-repeat: no-repeat;
  outline: none;
  margin: 0;
}
.tai-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tai-mint-tx);
  box-shadow: 0 2px 8px rgba(0, 19, 87, .18);
  cursor: pointer;
  transition: transform .15s ease;
}
.tai-calc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.tai-calc-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tai-mint-tx);
  box-shadow: 0 2px 8px rgba(0, 19, 87, .18);
  cursor: pointer;
}
.tai-calc-range:focus-visible { box-shadow: 0 0 0 3px rgba(86, 223, 205, .45); }

.tai-calc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  color: #94a3b8;
  font-size: .72rem;
}

.tai-calc-hint {
  margin: .55rem 0 0;
  color: var(--tai-txt);
  font-size: .82rem;
}

.tai-calc-sum {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid #eef1f4;
  color: var(--tai-navy);
  font-size: 1.05rem;
}
.tai-calc-sum strong {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--tai-navy);
}

/* Aufteilungs-Hinweis: verhindert das Missverstaendnis, man kaufe eine
   feste Anzahl Ansagen. Bewusst als abgesetzter Kasten, nicht als
   Kleingedrucktes — das ist eine Kernaussage des Preismodells. */
.tai-calc-split {
  margin: .7rem 0 0;
  padding: .65rem .85rem;
  border-left: 3px solid var(--tai-mint);
  border-radius: .35rem;
  background: rgba(86, 223, 205, .1);
  color: #0f766e;
  font-size: .82rem;
  line-height: 1.5;
}
.tai-calc-split strong { font-weight: 600; color: #0d8d7c; }

.tai-calc-disc {
  margin: .55rem 0 0;
  color: #94a3b8;
  font-size: .74rem;
  line-height: 1.5;
}

/* Ergebnis-Karte */
.tai-calc-result { display: flex; min-width: 0; }

.tai-calc-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, #f4fdfb 0%, #ffffff 62%);
  border: 1px solid var(--tai-mint);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 19, 87, .08);
}

.tai-calc-reco {
  margin: 0 0 .3rem;
  color: var(--tai-mint-tx);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Paketname: kraeftig, aber leichter als der Preis — der Preis ist der Anker.
   letter-spacing gleicht das Uppercase-freie Rendering optisch aus; der
   negative Wert auf der rechten Seite wuerde den letzten Buchstaben
   anschneiden, deshalb padding-right als optischer Ausgleich. */
.tai-calc-pkg {
  margin: 0;
  color: var(--tai-navy);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  padding-right: .06em;
}

.tai-calc-price { margin: .55rem 0 0; color: var(--tai-navy); }
.tai-calc-price strong {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding-right: .08em;   /* Abstand rechts, damit das € nicht klebt */
}
/* Brutto-Zeile in der Karte entfaellt seit 02.08.2026 (B2B). */
.tai-calc-price span { display: none; }

.tai-calc-chars {
  margin: .6rem 0 0;
  max-width: 17rem;
  color: var(--tai-txt);
  font-size: .84rem;
  line-height: 1.45;
}

/* Reserve = Kaufargument, deshalb als eigene mint-Pille statt als
   Nebensatz. Ohne Reserve (exakt passend / sehr grosser Bedarf)
   faellt die Auszeichnung weg -> .is-plain. */
.tai-calc-rest {
  margin: .5rem 0 1.2rem;
  font-size: .82rem;
  line-height: 1.3;
}

.tai-calc-rest.is-bonus {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: .3rem .7rem;
  border-radius: 1rem;
  background: rgba(86, 223, 205, .16);
  border: 1px solid rgba(86, 223, 205, .55);
  color: #12a894;
}
.tai-calc-rest.is-bonus strong {
  font-weight: 700;
  font-size: .95rem;
  color: #0d8d7c;
}

.tai-calc-rest.is-plain {
  color: var(--tai-txt);
}

.tai-calc-cart {
  padding: .8rem 1.6rem;
  background: var(--tai-red);
  border: 2px solid var(--tai-red);
  color: #fff;
  font-size: .82rem;
}
.tai-calc-cart:hover,
.tai-calc-cart:focus-visible {
  background: #e0003d;
  border-color: #c40036;   /* dunkler als die Fuellung, Rand bleibt sichtbar */
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 0, 70, .25);
}

.tai-calc-alt {
  margin: .9rem 0 0;
  color: var(--tai-txt);
  font-size: .8rem;
  line-height: 1.5;
}
.tai-calc-alt a { color: var(--tai-mint-tx); }
.tai-calc-alt:empty { display: none; }

.tai-calc-all {
  text-align: center;
  margin: 1.5rem 0 0;
  font-size: .9rem;
}
.tai-calc-all a { color: var(--tai-navy); }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 900px) {
  .tai-calc-grid { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 600px) {
  .tai-calc-controls { padding: 1.25rem; }
  .tai-calc-card { padding: 1.5rem 1.15rem; }
  .tai-calc-pkg { font-size: 1.6rem; }
  .tai-pt-table { min-width: 30rem; }
  .tai-pt-table td,
  .tai-pt-table tbody th { padding: .75rem .55rem; }
  .tai-pt-table thead th { padding: .8rem .55rem; font-size: .68rem; }
  .tai-pt-swipe { display: block; }
  .tai-pt-cart span { display: none; }        /* Mobile: nur Icon, Name via aria-label */
  .tai-pt-vh {                                /* "Kaufen"-Header sichtbar machen */
    position: static;
    width: auto; height: auto;
    clip: auto;
  }
  .tai-pt-cart { padding: .62rem .78rem; }
  .tai-pt-name { font-size: .95rem; }
  .tai-pt-num strong { font-size: .98rem; }
  .tai-pt-per,
  .tai-pt-save { font-size: .8rem; }
  .tai-pt-incl { gap: .45rem 1.1rem; }
}