/* ============================================================
   Telefonie & Zeiterfassung alt (45) — /telefon-und-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;
}

/* div_block-5-12 (.intro-section) */
.tz-intro {
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

/* new_columns-1156-12 */
.tz-intro-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  padding-top: 81px;
}

/* div_block-1157-12 (Oxygen-Spalte: 20px Default-Padding) */
.tz-intro-col-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  padding: 166px 20px 20px;
}

/* div_block-3547-12 */
.tz-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  position: relative;
  z-index: 10;
}

/* headline-3548-12 (.intro-headline; @600/480 via universal !important) */
.tz-intro-headline {
  font-size: 111px;
  color: #fdfeff;
  margin: 0 -350px 12px 0;
}

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

/* text_block-3553-12 */
.tz-intro-text {
  font-size: 26px;
  color: #fdfeff;
  margin-bottom: 14px;
}

/* div_block-10600-61 (.intro-btn) — bleibt auch mobil flex row! */
.tz-intro-btns {
  display: flex;
  flex-direction: row;
  gap: 25px;
  text-align: left;
}

.tz-intro-btns .btn-xl-primary {
  text-transform: none;
  color: #fff;
  text-align: center;
}

.tz-intro-btns .tz-btn-green {
  color: #fdfeff;
}

/* Pfeil-Icon der btn-el-right Buttons (universal-Pseudo, sektions-scoped) */
.tz-intro-btns .btn-el-right:before,
.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-intro-btns .btn-el-right:hover:before,
.tz-tc-btn.btn-el-right:hover:before,
.tz-trio-btn.btn-el-right:hover:before {
  right: 15px;
}

/* div_block-1158-12 */
.tz-intro-col-visual {
  width: 50%;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
  padding: 20px;
}

/* div_block-3545-12 */
.tz-intro-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  margin-left: -150px;
}

/* code_block-1159-12 */
.tz-intro-blob {
  width: 100%;
  max-width: 800px;
  opacity: .7;
}

.tz-intro-blob svg {
  width: 100%;
}

/* image-3546-12 (.intro-image) */
.tz-intro-image {
  position: absolute;
  max-width: 755px;
  top: 49.5%;
  transform: translateY(-50%);
  left: 20px;
  opacity: 0;
  transition: 1s ease;
}

.tz-intro-image.show {
  opacity: 1;
}

/* div_block-10738-12 (295.css) — "Mehr Information" */
.tz-scroll-link {
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 15;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  opacity: .8;
  text-align: left;
  text-decoration: none;
  transition: .5s;
}

.tz-scroll-icon {
  width: 40px;
  height: 40px;
  z-index: 1;
  display: block;
}

.tz-scroll-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tz-scroll-text {
  font-style: italic;
  color: #fdfeff;
}

/* ------------------------------------------------------------
   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-intro-columns > .tz-intro-col-content,
  .tz-intro-columns > .tz-intro-col-visual,
  .tz-trio-row > .tz-trio-col {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* 295.css: Scroll-Link rechts */
  .tz-scroll-link {
    right: 50px;
    left: auto;
  }

  /* shared setzt 25/20 — Original 45 behaelt 142/50 */
  .tz-mehr {
    padding: 142px 50px 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 20px 20px 42px;
  }

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

/* 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;
  }
}

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

@media (max-width: 479px) {
  /* universal: .intro-section { min-height:1px } */
  .tz-intro {
    min-height: 1px;
  }

  /* universal: .arrow-down-link { margin-bottom:15px } */
  .tz-scroll-link {
    margin-bottom: 15px;
  }
}

@media only screen and (max-height: 780px) {
  .tz-scroll-link {
    display: none;
  }
}

/* ------------------------------------------------------------
   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;
}

/* Kacheln bleiben fix 480px (auch mobil), Slider-Spalte 90% */
.tzb .blog-slider-wrap {
  width: 90%;
  padding: 0;
}

.tzb .blog-tile {
  width: 480px;
  min-width: 480px;
  max-width: none;
}

.tzb .blog-tile-image {
  width: 480px;
}

/* 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;
}