/* ============================================================
   Telefonie & Zeiterfassung alt (45) — /leistungen/telefonie-zeiterfassung/
   Seitenspezifische Styles (Prefix tz-), Werte 1:1 aus 45.css
   + 295.css + universal.css. Das Original hat kaum Mobile-Regeln
   — deshalb bewusst wenige Media Queries (Ist-Zustand!).
   ============================================================ */

/* ------------------------------------------------------------
   Hero (section-2-12, hoehe fix: 100vh + 875px)
   ------------------------------------------------------------ */
.tz-hero {
  height: calc(100vh + 875px);
}

.tz-hero .section-inner {
  max-width: 100%;
  padding: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Pfeil-Icon der btn-el-right Buttons (universal-Pseudo, sektions-scoped) */
.tz-tc-btn.btn-el-right:before,
.tz-trio-btn.btn-el-right:before {
  content: "";
  background: var(--btn-arrow-image);
  background-size: contain;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  position: absolute;
  transition: var(--global-transition);
}

.tz-tc-btn.btn-el-right:hover:before,
.tz-trio-btn.btn-el-right:hover:before {
  right: 15px;
}

/* ------------------------------------------------------------
   Intro-Block "#mehr" — nutzt lp-Bausteine, hier nur Abweichungen
   ------------------------------------------------------------ */
/* Original: padding bleibt auch mobil 142/50 (keine Mobile-Regel in 45.css) */
.tz-mehr {
  padding: 142px 50px 20px;
}

/* Headline: Grundfarbe weiss, Span GRUEN (shared: dunkelblau) */
.tz-mehr-headline.lp-intro-block-headline span {
  color: #32b4a2;
  display: inline-block;
}

/* Copy: 18px (shared setzt mobil 20px), zweiter Absatz ohne Margin */
.tz-mehr-copy.lp-intro-block-copy {
  font-size: 18px;
}

.tz-mehr-copy--last.lp-intro-block-copy {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Counter-Sektion (section-1797-12)
   ------------------------------------------------------------ */
.tz-count .section-inner {
  padding-bottom: 241px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* new_columns-1798-12 */
.tz-count-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  z-index: 9;
  position: relative;
}

/* div_block-1799-12 (Spalte, Oxygen-Default-Padding 20) */
.tz-count-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
  padding: 20px;
}

/* headline-1801-12: 54px fix (keine Responsive-Regel im Original) */
.tz-count-headline {
  text-align: center;
  color: #fdfeff;
  margin: 0 0 20px;
  font-size: 54px;
  line-height: 1.2;
  font-weight: 400;
}

.tz-count-headline span {
  color: #32b4a2;
  display: inline-block;
}

/* text_block-1807-12 (+ .margin-bottom-l: mb 80, fw 300) */
.tz-count-intro {
  color: #fdfeff;
  max-width: 815px;
  text-align: center;
  font-size: 22px;
}

/* div_block-10603-61 — bleibt auch mobil flex row (Original!) */
.tz-count-row {
  width: 100%;
  text-align: left;
  flex-direction: row;
  display: flex;
}

.tz-count-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
}

/* div_block-10611-61 */
.tz-count-inner {
  flex-direction: column;
  display: flex;
  align-items: center;
  font-size: 64px;
  font-weight: 600;
  width: 270px;
  min-width: 215px;
  position: relative;
}

.tz-count-blob {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tz-count-blob img {
  width: 100%;
  max-width: 100%;
}

/* div_block-10614-61 — Zahl mittig auf dem Blob, dunkelblauer Kasten */
.tz-count-num {
  transform: translate(-50%, -50%);
  text-align: left;
  flex-direction: row;
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  background-color: #223a4f;
}

/* .oxy-counter (48/1.2) + .count .oxy-counter_digit (54, gruen) */
.tz-counter-box {
  font-size: 48px;
  line-height: 1.2;
}

.tz-counter {
  font-size: 54px;
  color: #32b4a2;
  line-height: 1;
}

/* text_block-10609-61 */
.tz-count-pct {
  font-size: 54px;
  color: #32b4a2;
}

/* .count-headline */
.tz-count-title {
  font-size: 26px;
  color: #fdfeff;
  margin-top: -10px;
}

/* text_block-10636-61 usw. */
.tz-count-sub {
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 1.2;
  color: #32b4a2;
}

/* ------------------------------------------------------------
   Tabs (section-10703-61)
   ------------------------------------------------------------ */
/* div_block-10776-61 */
.tz-tabsbar-wrap {
  width: 100%;
  padding-bottom: 27px;
  border-radius: 25px;
  overflow: hidden;
}

/* _tabs-10705-61 (.oxy-tabs) */
.tz-tabbar {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border-radius: 25px;
  overflow: visible;
  gap: 2px;
  background-color: #2f2f2f;
}

/* .tabs-0300-tab */
.tz-tab {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  background-color: #32b4a2;
  padding: 20px;
  position: relative;
  cursor: pointer;
}

.tz-tab:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.tz-tab:last-child {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.tz-tab:after {
  content: "";
  background: url("/wp-content/uploads/2024/02/tab-arrow3.webp");
  background-size: contain;
  width: 45px;
  height: 18px;
  bottom: -18px;
  left: 35px;
  position: absolute;
  opacity: 0;
  transition: .15s;
}

.tz-tab--active {
  background-color: #223a4f;
}

.tz-tab--active:after {
  opacity: 1;
}

/* .tab-head / .tab-subhead */
.tz-tab-head {
  font-size: 22px;
  color: #223a4f;
}

.tz-tab--active .tz-tab-head {
  color: var(--light-primary);
}

.tz-tab-sub {
  color: #fdfeff;
  font-size: 18px;
}

.tz-tab--active .tz-tab-sub {
  color: var(--secondary-1000);
}

/* _tabs_contents-10712-61 */
.tz-tabcontents {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

/* .tabs-contents-0300-tab */
.tz-tabcontent {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  padding: 95px 20px 20px;
  gap: 150px;
}

.tz-tabcontent[hidden] {
  display: none;
}

/* div_block-10734-61 / 10736-61 */
.tz-tc-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tz-tc-right {
  width: 60%;
  height: 100%;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* headline-10728-61: 54px fix */
.tz-tc-headline {
  text-align: left;
  color: #fdfeff;
  margin: 0 0 20px;
  font-size: 54px;
  line-height: 1.2;
  font-weight: 400;
}

.tz-tc-headline span {
  color: #32b4a2;
  display: inline-block;
}

.tz-tc-copy {
  color: #fdfeff;
  font-size: 22px;
}

.tz-tc-copy--btn {
  margin-bottom: 10px;
}

.tz-tc-btn {
  text-transform: none;
  color: #fff;
  text-align: center;
}

/* ------------------------------------------------------------
   Leistungen-Kachelslider (section-10740-61) — nutzt leistungen.css
   ------------------------------------------------------------ */
.tz-slider .section-inner {
  padding-top: 141px;
  padding-bottom: 64px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* div_block-10741-61 */
.tz-slider-row {
  text-align: left;
  flex-direction: row;
  display: flex;
  width: 100%;
  z-index: 3;
  position: relative;
}

/* div_block-10749-61 */
.tz-slider-wrap {
  width: 100%;
}

/* #-carousel-builder-10750-61: Radius nur links */
.tz-lslider {
  border-radius: 15px 0 0 15px;
}

/* 45.css: Kachel-Titel max-width 200 (Startseite: 250), Linkbox left 40 */
.tz-lslider .leistungen-tile-title {
  max-width: 200px;
  font-weight: 700;
}

.tz-lslider .leistungen-linkbox {
  left: 40px;
}

/* Original 45: Kacheln bleiben auch mobil 380px breit
   (leistungen.css setzt @480 100% fuer die Startseite) */
@media only screen and (max-width: 480px) {
  .tz-lslider .leistungen-tile {
    width: 380px !important;
  }
}

/* ------------------------------------------------------------
   Icon-Dreier (section-10802-61)
   ------------------------------------------------------------ */
.tz-trio .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* new_columns-10804-61 */
.tz-trio-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

/* div_block-10805/6/7-61 (Oxygen-Spalten, Default-Padding 20) */
.tz-trio-col {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
  padding: 20px;
}

.tz-trio-col img {
  margin-bottom: 20px;
  max-width: 100%;
}

/* text_block-10813-61 */
.tz-trio-title {
  color: #32b4a2;
  text-align: center;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.tz-trio-title span {
  color: #fdfeff;
  display: inline-block;
}

/* text_block-10825-61 */
.tz-trio-copy {
  color: #fdfeff;
  font-size: 22px;
  text-align: center;
  font-weight: 300;
  max-width: 420px;
}

.tz-trio-btn {
  text-transform: none;
  text-align: center;
}

@media (max-width: 1399px) {
  /* Original: new_columns-Kinder 100% (1156, 10678, 1798, 10804) */
  .tz-trio-row > .tz-trio-col {
    width: 100% !important;
  }
}

@media (max-width: 767px) {

  /* shared setzt 25/20 — Original 45 behaelt 142/50 */
  /* Audit 26.09.2026: Original 142/50 + 42 links ließ nur ~230px Inhaltsbreite */
  .tz-mehr {
    padding: 60px 20px 20px;
  }

  /* shared setzt 31px/20px — Original nutzt die Klassenwerte (fluid) */
  .tz-mehr-headline.lp-intro-block-headline {
    font-size: var(--headline-xl-size);
  }

  .tz-mehr-copy.lp-intro-block-copy {
    font-size: 18px;
  }

  /* shared .lp-intro-block-text setzt padding 0 — Original behaelt 20/42 */
  .tz-mehr-text.lp-intro-block-text {
    padding: 20px 0;
  }

  /* shared .lp-linkcards? bleibt wie Desktop (20px Padding, gap 30) */
  .tz-mehr .lp-linkcards {
    padding: 20px 0;
  }
}

/* universal: #section-2-12 @768 height:auto !important */
@media only screen and (max-width: 768px) {
  .tz-hero {
    height: auto !important;
  }
}

/* universal: .intro-headline @600 44px / @480 35px (!important) */
@media only screen and (max-width: 600px) {
  .tz-intro-headline {
    font-size: 44px !important;
  }
}

/* Audit 18.10.2026: Hier stand ein nicht geschlossener Kommentar — dadurch galten die folgenden
   .tzb-Regeln versehentlich nur bis 479 px. Optik bleibt bewusst so (live seit Umbau) → explizit. */
@media (max-width: 479px) {

/* ------------------------------------------------------------
   Blog-Slider-Overrides (.tzb …) — Original 45 weicht vom
   Startseiten-Blog ab (45.css statt 286.css):
   ------------------------------------------------------------ */
.tzb .blog-section > .section-inner {
  padding-top: 198px;
  padding-bottom: 97px;
}

/* div_block-8101-12: Deko-Block ist GRAU (Startseite: gruen), immer sichtbar */
.tzb .blog-deco {
  background-color: #2f2f2f;
  display: flex;
}

/* div_block-6613-12: Intro bleibt 50% breit ohne Padding (alle Breiten) */
.tzb .blog-intro {
  width: 50%;
  padding: 0;
}

/* headline-6614-12 / text_block-6616-12: Groessen fix (keine Media-Regeln) */
.tzb .blog-section .blog-headline {
  font-size: 54px;
}

.tzb .blog-section .blog-intro-text {
  font-size: 22px;
}

/* Slider-Spalte 90% */
.tzb .blog-slider-wrap {
  width: 90%;
  padding: 0;
}

/* (feste 480px-Kachelbreite entfernt — auf dem Handy breiter als der Bildschirm, Audit 18.10.2026) */

/* Original 45: Blog-Buttons tragen cocco-narrow-semi (+ fw600 auf den
   Kachel-Buttons, "Zur Themenwelt" ohne Uppercase) — Startseite nicht */
.tzb .blog-btn,
.tzb .blog-tile-btn {
  font-family: "CocogooseProNarrow Semilight", sans-serif !important;
}

.tzb .blog-btn {
  text-transform: none;
}

.tzb .blog-tile-btn {
  font-weight: 600;
}

/* 45.css: span-6619-12 gruen (Startseite: dunkelblau) */
.tzb .blog-headline-sub {
  color: #32b4a2;
}

/* QA 08/2026: Aussagen-Kacheln statt Fantasie-Prozenten (Wunsch Martin) */
.tz-check {
  font-size: 64px;
  line-height: 1;
  color: #ffffff;
}
}

/* Audit 18.10.2026: Zähler-Reihe blieb wie im Original auch mobil vierspaltig → Titel
   überlagerten sich, Untertitel liefen aus dem Bildschirm. Ab Tablet 2 × 2, Headline fluid. */
@media (max-width: 1199px) {
  .tz-count-row {
    flex-wrap: wrap;
    row-gap: 40px;
  }
  .tz-count-item {
    width: 50%;
    padding: 0 10px;
  }
  .tz-count-inner {
    width: 100%;
    max-width: 270px;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .tz-count-headline {
    font-size: var(--headline-xl-size);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .tz-count-title,
  .tz-count-sub {
    font-size: 20px;
  }
}

/* Audit 18.10.2026: Hero hatte feste Höhe (Original 100vh + 875px). Seit Intro + Linkkarten
   gewachsen sind, lief der Inhalt ~950px in die Zähler-Sektion (Text über Text). */
.tz-hero {
  height: auto;
  min-height: calc(100vh + 875px);
}

/* Türkise Akzente stehen hier auf türkisem Grund (Kontrast 1:1, unsichtbar).
   Wie auf den übrigen Leistungsseiten: Akzent auf Türkis = Dunkelblau. */
.tz-mehr-headline.lp-intro-block-headline span,
.tz-count-headline span,
.tz-count-sub,
.tz-tc-headline span,
.tz-trio-title {
  color: #223a4f;
}

/* Haken auf dem dunklen Blob weiß (stand im versehentlichen 479-px-Block → nur Handy) */
.tz-check {
  color: #ffffff;
}

/* Blur-Ausläufer der Zähler-Sektion legte sich als Schleier über Tab-Leiste und Tabinhalt */
.tz-tabs .section-inner {
  position: relative;
  z-index: 3;
}

/* Tabs: Original ohne Mobil-Regeln → Leiste gequetscht, Inhalt lief rechts aus dem Bild */
@media (max-width: 1199px) {
  .tz-tabcontent {
    gap: 40px;
  }
  .tz-tc-right {
    margin-top: 0;
  }
  .tz-tc-headline {
    font-size: var(--headline-xl-size);
  }
}

@media (max-width: 1023px) {
  .tz-tabcontent {
    flex-direction: column;
    gap: 20px;
  }
  .tz-tc-left,
  .tz-tc-right {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .tz-tabbar {
    flex-direction: column;
  }
  .tz-tab:first-child {
    border-radius: 25px 25px 0 0;
  }
  .tz-tab:last-child {
    border-radius: 0 0 25px 25px;
  }
  .tz-tab:after {
    display: none;
  }
  .tz-tab-head {
    font-size: 18px;
  }
  .tz-tab-sub {
    font-size: 15px;
  }
  .tz-tabcontent {
    padding: 40px 0 0;
  }
}