/*!
 * TELLIT - Layout- und Sektions-Styles fuer die Startseite
 * ----------------------------------------------------------------------------
 * The7-Child-Theme  |  geladen von  classes/class-tellit-assets.php
 *
 * Herkunft: war bis zum 10.09.2026 unter
 *   Design  >  Customizer  >  Zusaetzliches CSS  (custom_css Post #4065)
 * Ab jetzt bitte NUR noch DIESE Datei aendern.
 *
 * Reihenfolge:
 *   1) Hero-Wechselwort-Animation
 *   2) The7/UAE-Layoutfix + Standard-Sektionsbreite  (.tellit-section)
 *   3) 00 HALTUNG
 *   4) 01 WIE WIR ERZAEHLEN        (.tellit-prozess)
 *   5) 02 AUSGEWAEHLTE ARBEITEN    (.tellit-arbeiten)
 *   6) 03 HERZLICH WILLKOMMEN      (.tellit-willkommen)
 *   7) 04 STIMMEN                  (.tellit-stimmen-section, Markup: [tellit_stimmen])
 *   8) 05 LET'S TALK               (.tellit-kontakt)
 */

/* ==========================================================================
   1) Hero – Wechselwort-Animation   (frueher inline im Elementor-HTML-Widget)
      JS dazu: assets/js/tellit-hero.js
   ========================================================================== */
.tellit-wechselwort{
  display:inline-block;
  opacity:1;
  transform:translateY(0);
  transition:opacity 180ms ease, transform 180ms ease;
  will-change:opacity, transform;
}
.tellit-wechselwort.is-changing{
  opacity:0;
  transform:translateY(0.08em);
}
@keyframes tellitMarkenthrillerShake{
  0%,100%{ transform:translate3d(0,0,0) rotate(0); }
  10%{ transform:translate3d(-3px,1px,0) rotate(-0.25deg); }
  20%{ transform:translate3d(4px,-1px,0) rotate(0.25deg); }
  30%{ transform:translate3d(-5px,0,0) rotate(-0.3deg); }
  40%{ transform:translate3d(5px,1px,0) rotate(0.3deg); }
  50%{ transform:translate3d(-4px,-1px,0) rotate(-0.2deg); }
  60%{ transform:translate3d(4px,0,0) rotate(0.2deg); }
  70%{ transform:translate3d(-3px,1px,0) rotate(-0.15deg); }
  80%{ transform:translate3d(2px,-1px,0) rotate(0.1deg); }
  90%{ transform:translate3d(-1px,0,0) rotate(0); }
}
.tellit-markenthriller.is-shaking{
  animation:tellitMarkenthrillerShake 800ms ease-in-out 1;
}
@media (prefers-reduced-motion: reduce){
  .tellit-wechselwort{ transition:none; }
  .tellit-markenthriller.is-shaking{ animation:none; }
}

/* ==========================================================================
   2) The7/UAE-Layoutfix + Standard-Sektionsbreite + alle Abschnitte
   ========================================================================== */
/* The7 + UAE: Desktop-Layout reparieren */
@media (min-width: 1025px) {

  body.ehf-header.ehf-footer #page {
    display: block !important;
  }

  body.ehf-header.ehf-footer #masthead,
  body.ehf-header.ehf-footer #content,
  body.ehf-header.ehf-footer #colophon {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
/* Hero: orange Schlusszeile */
.tellit-hero-ending {
  margin: -24px 0 0 !important;
  padding: 0 !important;
}

.tellit-hero-ending .elementor-widget-container,
.tellit-hero-ending p {
  margin: 0 !important;
  padding: 0 !important;
}

.tellit-hero-ending,
.tellit-hero-ending p {
  font-family: "Open Sans", sans-serif !important;
  font-size: clamp(60px, 6.6vw, 116px) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase;
  color: #ff6b00 !important;
}

@media (min-width: 1025px) {
  .tellit-hero-ending,
  .tellit-hero-ending p {
    white-space: nowrap;
  }
}
/* Hero: Kennzeile "TELLIT – WHAT'S YOUR STORY?"  (Text-Editor-Widget, Klasse: tellit-hero-eyebrow) */
.tellit-hero-eyebrow,
.tellit-hero-eyebrow p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  line-height: 1.2 !important;
  color: #111111 !important;
}

/* Hero: Award-Siegel (Bild-Widget, Klasse: tellit-hero-award-img) */
.tellit-hero-award-img { margin: 0 0 24px !important; align-self: center !important; }
.tellit-hero-award-img img {
  display: block !important;
  width: 100% !important;
  min-width: 260px;
  height: auto !important;
}

/* Hero: große Hauptheadline */
.tellit-hero-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(60px, 6.6vw, 116px) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase;
  color: #0b0b0b !important;
}

.tellit-hero-title .tellit-wechselwort {
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
/* Award-Link */
.tellit-award-link,
.tellit-award-link p {
  margin: 0 !important;
  text-align: right !important;
}

.tellit-award-link a {
  color: #111111 !important;
  text-decoration: none !important;
  border-bottom: 2px solid #ff6b00;
  padding-bottom: 4px;
}

.tellit-award-link a:hover {
  color: #ff6b00 !important;
}
/* Hero: SEO-Unterzeile */
.tellit-hero-seo {
  width: 72% !important;
  margin: 48px 0 0 !important;
  padding: 0 !important;
}

.tellit-hero-seo .elementor-widget-container,
.tellit-hero-seo p {
  margin: 0 !important;
  padding: 0 !important;
}

.tellit-hero-seo,
.tellit-hero-seo p {
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #111111 !important;
}

/* ---------------------------------------------------------------------------
   Hero – responsives Verhalten (Tablet / Smartphone)
   1) Reihenfolge auf schmalen Screens:
        Kennzeile → Headline → MARKENTHRILLER! → Award-Siegel → Applaus-Text
        → SEO-Zeile → Meta-Zeile
      Dazu wird der Zweispalter "Hero Hauptbereich" (b353e21) per display:contents
      aufgeloest und die Kinder direkt im Hero via order sortiert.
   2) Headline fuellt die Content-Breite (Logo ↔ Hamburger).
   3) Kein horizontales Ueberlaufen ("MARKENTHRILLER!" ist EIN Wort).
   --------------------------------------------------------------------------- */
.tellit-hero-title,
.tellit-hero-ending,
.tellit-hero-ending p {
  overflow-wrap: break-word !important;
}

@media (max-width: 1024px) {

  /* --- Reihenfolge --- */
  .elementor-element-b353e21 { display: contents !important; }

  .elementor-element-6100e36 { order: 1 !important; }              /* Kennzeile      */
  .elementor-element-0f302c0 { order: 2 !important; margin-top: 44px !important; }  /* Headline */
  .elementor-element-c583c5d { order: 3 !important; margin-top: 18px !important; }  /* MARKENTHRILLER! */
  .elementor-element-385dbc4 { order: 4 !important; margin-top: 40px !important; gap: 0 !important; }  /* Award-Spalte */
  .elementor-element-54aeffe { order: 5 !important; }              /* SEO-Zeile      */
  .elementor-element-4a83f20 { order: 6 !important; margin-top: 44px !important; }  /* Meta-Zeile */
  .elementor-element-a020791 { order: 7 !important; }              /* (Animation, unsichtbar) */

  /* --- Typo fuellt die Breite (laengste Zeile ~ Logo↔Hamburger) --- */
  .tellit-hero-title {
    font-size: clamp(40px, 11.5vw, 124px) !important;
    line-height: 0.92 !important;
  }
  .tellit-hero-ending,
  .tellit-hero-ending p {
    font-size: clamp(37px, 10vw, 110px) !important;
    line-height: 0.9 !important;
    white-space: normal !important;
  }

  .tellit-hero-seo {
    width: 100% !important;
    margin-top: 38px !important;
  }

  /* --- Award-Spalte linksbuendig, kleineres Siegel --- */
  .tellit-hero-award-img {
    align-self: flex-start !important;
    margin-bottom: 12px !important;
  }
  .tellit-hero-award-img img {
    min-width: 0 !important;
    width: 200px !important;
    max-width: 58% !important;
  }
  .elementor-element-76c78ec,
  .elementor-element-76c78ec p {
    text-align: left !important;
    margin-top: 2px !important;
  }
  .tellit-award-link,
  .tellit-award-link p {
    text-align: left !important;
    margin-top: 12px !important;
  }
  .tellit-award-link a { display: inline-block !important; }
}

@media (max-width: 600px) {
  .tellit-hero-title {
    font-size: clamp(36px, 11.5vw, 70px) !important;
  }
  .tellit-hero-ending,
  .tellit-hero-ending p {
    font-size: clamp(34px, 10vw, 62px) !important;
  }
  .elementor-element-0f302c0 { margin-top: 40px !important; }
  .tellit-hero-seo,
  .tellit-hero-seo p { font-size: 17px !important; }
}

@media (max-width: 380px) {
  .tellit-hero-title { font-size: 35px !important; }
  .tellit-hero-ending,
  .tellit-hero-ending p { font-size: 32px !important; }
}

/* Root-Container: seitliches Default-Padding entfernen -> Full-Width-Sektionen randlos */
.elementor-element-92764de {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Standard-Sektionsbreite – einheitliches Layout fuer alle Abschnitte ===== */
/* Nutzung: _css_classes = "tellit-section tellit-<name>" an einem Full-Width-Widget/Container */
.tellit-section {
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .tellit-section,
  .e-8a6b35c-e536efd { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (max-width: 600px) {
  .tellit-section,
  .e-8a6b35c-e536efd { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ===========================================================================
   WIEDERVERWENDBARE TYPO-BAUSTEINE
   ---------------------------------------------------------------------------
   Ab Abschnitt 00 gilt: Layout / Box / Abstaende der Abschnitte stellst du in
   Elementor an den CONTAINERN ein (die sind dann auch duplizierbar).
   Diese Datei liefert nur noch die TYPOGRAFIE – als Klasse an einem WIDGET
   (Feld "CSS-Klassen" im Reiter "Erweitert").
   =========================================================================== */

/* Akzentwort orange  ->  <span class="tellit-accent"> im Text */
.tellit-accent { color: #ff6b00 !important; }

/* Kennung "00 / HALTUNG"  ->  Text-Editor-Widget, Klasse: tellit-section-index */
.tellit-section-index,
.tellit-section-index p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: #66645f !important;
}

/* Abschnitts-Headline (H2)  ->  Ueberschrift-Widget, Klasse: tellit-h2 */
.tellit-h2,
.tellit-h2 h2,
.tellit-h2 .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(50px, 5.9vw, 112px) !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

/* Fett-Lead  ->  Text-Editor-Widget, Klasse: tellit-lead */
.tellit-lead,
.tellit-lead p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(22px, 2vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #101010 !important;
}

/* Fliesstext  ->  Text-Editor-Widget, Klasse: tellit-copy */
.tellit-copy,
.tellit-copy p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #3f3e3a !important;
}

/* ===== 01 / WIE WIR ERZÄHLEN =====
   Abschnitt 01 ist jetzt NATIV in Elementor aufgebaut (Abschnitt "01 / WIE WIR ERZÄHLEN").
   - Hintergrund (#f1f1ed), Innenabstände, Box-Breite 1504, Kapitel-Raster (5→2→1)
     und die Haarlinien-Trenner stecken in den Elementor-Container-Einstellungen.
   - Der Hover-Effekt (Kachel leicht transparent) liegt im "Kapitel-Reihe"-Container
     unter  Erweitert › Benutzerdefiniertes CSS.
   Hier stehen nur noch die Schrift-Stile der einzelnen Text-Widgets. */

.tellit-prozess-title,
.tellit-prozess-title .elementor-heading-title {
  margin-top: 24px !important;
}

/* Kapitel-Nummer  (Text-Editor-Widget, Klasse: tellit-chapter-num) */
.tellit-chapter-num,
.tellit-chapter-num p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.2 !important;
  color: #ff6b00 !important;
}

/* Kapitel-Titel  (Überschrift-Widget H3, Klasse: tellit-chapter-title) */
.tellit-chapter-title,
.tellit-chapter-title .elementor-heading-title {
  margin: 56px 0 14px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(19px, 1.4vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

/* Kapitel-Text  (Text-Editor-Widget, Klasse: tellit-chapter-desc) */
.tellit-chapter-desc,
.tellit-chapter-desc p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #6b6a64 !important;
}

@media (max-width: 1024px) {
  .tellit-chapter-title,
  .tellit-chapter-title .elementor-heading-title { margin-top: 32px !important; }
}

@media (max-width: 767px) {
  .tellit-chapter-title,
  .tellit-chapter-title .elementor-heading-title { margin-top: 20px !important; }
}

/* ===== 02 / AUSGEWÄHLTE ARBEITEN =====
   Rahmen (Box-Breite, Abstände, Kopf-2-Spalter) ist NATIV in Elementor
   (Abschnitt "02 / AUSGEWÄHLTE ARBEITEN": Kennung + Überschrift + Intro + Button).
   Das Projekt-Raster liefert der Shortcode  [tellit_arbeiten]  aus dem
   Beitragstyp "Arbeiten"  (classes/class-tellit-portfolio.php) — die 6 neuesten.
   Markup:  .tellit-projects > .tellit-projects-col > a.tellit-project >
            span.tellit-project-media / -client / -name / -services            */

.tellit-arbeiten-title,
.tellit-arbeiten-title .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(46px, 5.2vw, 100px) !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

.tellit-arbeiten-intro,
.tellit-arbeiten-intro p {
  margin: 12px 0 0 !important;
  max-width: 420px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #6b6a64 !important;
}
@media (max-width: 1024px) {
  .tellit-arbeiten-intro,
  .tellit-arbeiten-intro p { max-width: none !important; margin-top: 0 !important; }
}

/* --- Projekt-Raster (Shortcode [tellit_arbeiten]) --- */
.tellit-projects {
  display: flex !important;
  gap: clamp(24px, 3.4vw, 60px) !important;
  margin-top: clamp(56px, 7vw, 110px) !important;
}
.tellit-projects-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(44px, 5.5vw, 96px) !important;
}
.tellit-projects-col:nth-child(2) { margin-top: clamp(48px, 6vw, 110px) !important; }

.tellit-project {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: opacity 160ms ease !important;
}
.tellit-project:hover { opacity: 0.8 !important; }
.tellit-project[hidden] { display: none !important; }

.tellit-project-media {
  display: block !important;
  background: #f1f1ed !important;
  overflow: hidden !important;
}
.tellit-project-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.tellit-project-client {
  display: block !important;
  margin-top: 18px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #66645f !important;
}
.tellit-project-name {
  display: block !important;
  margin-top: 8px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(19px, 1.5vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}
.tellit-project-services {
  display: block !important;
  margin-top: 8px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9a988f !important;
}

@media (max-width: 640px) {
  .tellit-projects { flex-direction: column !important; gap: clamp(44px, 9vw, 72px) !important; }
  .tellit-projects-col:nth-child(2) { margin-top: 0 !important; }
}

/* "Alle Geschichten ansehen"  (Button-Widget, Klasse: tellit-arbeiten-link) */
.tellit-arbeiten-link { margin-top: clamp(28px, 4vw, 64px) !important; }
.tellit-arbeiten-link .elementor-button,
.tellit-arbeiten-link .elementor-button:hover,
.tellit-arbeiten-link .elementor-button:focus {
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #ff6b00 !important;
  border-radius: 0 !important;
  padding: 0 0 4px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
  box-shadow: none !important;
  transition: color 160ms ease !important;
}
.tellit-arbeiten-link .elementor-button:hover { color: #ff6b00 !important; }

/* ===== 03 / HERZLICH WILLKOMMEN =====
   Abschnitt 03 ist NATIV in Elementor (Abschnitt "03 / HERZLICH WILLKOMMEN").
   - Box, Abstände, 2-Spalter (Text / Foto), Auszeichnungs-Raster (3→1) und
     die Haarlinien stecken in den Elementor-Container-Einstellungen.
   - Hover der Auszeichnungen (Schrift → Orange): Container "Auszeichnungen"
     › Erweitert › Benutzerdefiniertes CSS.
   Hier nur Schrift-/Bild-Stile der Widgets. */

/* Headline (Überschrift-Widget H2, Klasse: tellit-willkommen-title) */
.tellit-willkommen-title,
.tellit-willkommen-title .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(46px, 5.6vw, 108px) !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

/* Zitat (Text-Editor-Widget, Klasse: tellit-willkommen-quote) */
.tellit-willkommen-quote,
.tellit-willkommen-quote p {
  margin: clamp(40px, 6vw, 88px) 0 0 !important;
  max-width: 620px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(19px, 1.5vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #101010 !important;
}

/* Signatur (Text-Editor-Widget, Klasse: tellit-willkommen-sign) */
.tellit-willkommen-sign { margin-top: 36px !important; }
.tellit-willkommen-sign span,
.tellit-willkommen-sign strong {
  display: block !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}
.tellit-willkommen-sign-intro { font-size: 14px !important; color: #6b6a64 !important; }
.tellit-willkommen-sign strong {
  margin-top: 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #101010 !important;
}
.tellit-willkommen-sign-role {
  margin-top: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9a988f !important;
}

/* Foto (Bild-Widget, Klasse: tellit-willkommen-figure) */
.tellit-willkommen-figure { margin: 0 !important; }
.tellit-willkommen-figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center 28% !important;
}
@media (max-width: 1024px) {
  .tellit-willkommen-figure img { aspect-ratio: 16 / 11 !important; }
}

/* Auszeichnung – Titel (Text-Editor-Widget, Klasse: tellit-credential-title) */
.tellit-credential-title,
.tellit-credential-title p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  line-height: 1.3 !important;
  color: #101010 !important;
}

/* Auszeichnung – Zusatz (Text-Editor-Widget, Klasse: tellit-credential-sub) */
.tellit-credential-sub,
.tellit-credential-sub p {
  margin: 4px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #6b6a64 !important;
}

/* ===== 04 / STIMMEN ===== */
.tellit-stimmen-section {
  width: 100% !important;
  background: #ff6b00 !important;
  padding-top: clamp(80px, 10vw, 170px) !important;
  padding-bottom: clamp(80px, 10vw, 170px) !important;
}
.tellit-stimmen-section .tellit-section-index { color: #ffd9bd !important; }

.tellit-stimmen {
  margin-top: clamp(44px, 6vw, 90px) !important;
  overflow: hidden !important;
}

.tellit-stimmen-track {
  display: flex !important;
  gap: clamp(32px, 5vw, 100px) !important;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) !important;
  will-change: transform !important;
}

.tellit-stimme {
  flex: 0 0 calc((100% - clamp(32px, 5vw, 100px)) / 2) !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
}
.tellit-stimme blockquote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  quotes: none !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(23px, 2.4vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}
.tellit-stimme blockquote::before,
.tellit-stimme blockquote::after { content: none !important; }
.tellit-stimme figcaption {
  margin-top: clamp(28px, 3.5vw, 56px) !important;
  background: transparent !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffd9bd !important;
}

.tellit-stimmen-nav {
  display: flex !important;
  gap: 12px !important;
  margin-top: clamp(40px, 5vw, 72px) !important;
}
.tellit-stimmen-nav button {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease !important;
}
.tellit-stimmen-nav button:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #ff6b00 !important;
}

@media (max-width: 900px) {
  .tellit-stimme { flex-basis: 100% !important; }
}

/* ===== 05 / LET'S TALK =====
   Abschnitt 05 ist NATIV in Elementor (Kennung + Überschrift-Widget + Button-Widget).
   Box / Abstände / Rahmen = Container-Einstellungen. Hier nur die Widget-Stile. */

.tellit-kontakt-title,
.tellit-kontakt-title .elementor-heading-title {
  margin: 40px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(52px, 7vw, 132px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

/* Kontakt-Button (Button-Widget, Klasse: tellit-kontakt-button) */
.tellit-kontakt-button { margin-top: clamp(48px, 6vw, 96px) !important; }
.tellit-kontakt-button .elementor-button {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 560px !important;
  padding: 26px 30px !important;
  background: #101010 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background 180ms ease !important;
}
.tellit-kontakt-button .elementor-button-content-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 32px !important;
}
.tellit-kontakt-button .elementor-button-text {
  order: 1 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.tellit-kontakt-button .elementor-button-icon {
  order: 2 !important;
  margin: 0 !important;
  color: #ff6b00 !important;
  font-size: 20px !important;
  flex: 0 0 auto !important;
  transform: rotate(-45deg) !important;
  transition: color 180ms ease, transform 180ms ease !important;
}
.tellit-kontakt-button .elementor-button:hover { background: #ff6b00 !important; color: #ffffff !important; }
.tellit-kontakt-button .elementor-button:hover .elementor-button-icon {
  color: #ffffff !important;
  transform: rotate(-45deg) translate(3px, -3px) !important;
}

@media (max-width: 600px) {
  .tellit-kontakt-button .elementor-button { max-width: none !important; padding: 22px !important; gap: 18px !important; }
  .tellit-kontakt-button .elementor-button-content-wrapper { gap: 18px !important; }
  .tellit-kontakt-button .elementor-button-text { font-size: 12px !important; }
}


/* ===========================================================================
   PROJEKT-DETAILSEITE  (Beitragstyp "Arbeiten" – Single)
   ---------------------------------------------------------------------------
   Aufbau (Theme-Builder-Vorlage "TELLIT – Projekt (Single)"):
     [tellit_arbeit_kopf]      – Kopf aus den Feldern
     .tellit-case-main         – Flex-Row: roter Faden (Sidebar) + Post-Inhalt
       [tellit_arbeit_faden]   – Sidebar (JS: assets/js/tellit-faden.js)
       Post-Inhalt-Widget      – die Kapitel (Elementor-Vorlage "Projekt-Kapitel")
     [tellit_arbeit_abschluss] – Zurueck-Link + CTA
   Schrift-Klassen fuer die Kapitel-Widgets:
     .tellit-case-ch-eyebrow / -ch-title / -ch-lead / -ch-text / -ch-img
     .tellit-case-statement   (Statement-Band, H2-Widget)
   =========================================================================== */

.tellit-case-box {
  max-width: 1504px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

/* ----- Kopf ----- */
.tellit-case-kopf { padding-top: clamp(40px, 6vw, 96px); }

.tellit-case-toprow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.tellit-case-eyebrow {
  margin: 0;
  font: 800 13px/1.3 "Open Sans", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #66645f;
}
.tellit-case-back {
  font: 800 12px/1.3 "Open Sans", Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #101010;
  text-decoration: none;
  border-bottom: 2px solid #ff6b00;
  padding-bottom: 3px;
  transition: color 160ms ease;
}
.tellit-case-back:hover { color: #ff6b00; }

.tellit-case-title {
  margin: 34px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(44px, 7.4vw, 140px);
  font-weight: 700;
  line-height: 0.92 !important;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #101010;
  overflow-wrap: break-word;
}
.tellit-case-title::after {
  content: "";
  display: block;
  width: clamp(180px, 26vw, 360px);
  height: clamp(6px, 0.7vw, 11px);
  margin-top: 14px;
  background: #ff6b00;
}

.tellit-case-sub {
  margin: 22px 0 0;
  max-width: 900px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.5 !important;
  color: #101010;
}

.tellit-case-leadrow {
  display: flex;
  gap: clamp(40px, 7vw, 150px);
  align-items: flex-start;
  margin-top: clamp(48px, 6vw, 96px);
}
.tellit-case-intro {
  flex: 1 1 58%;
  min-width: 0;
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 700;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  color: #101010;
}
.tellit-case-kurz {
  flex: 0 1 38%;
  min-width: 0;
  max-width: 420px;
  margin: 6px 0 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7 !important;
  color: #6b6a64;
}

.tellit-case-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #d9d9d4;
  margin: clamp(48px, 6vw, 90px) 0 0;
}
.tellit-case-facts > div { padding: 26px 24px 6px 0; }
.tellit-case-facts dt {
  margin: 0 0 6px;
  font: 800 11px/1.3 "Open Sans", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a988f;
}
.tellit-case-facts dd {
  margin: 0;
  font: 800 13px/1.45 "Open Sans", Arial, sans-serif;
  color: #101010;
}

/* ----- Hero-Band (volle Breite, orange) ----- */
.tellit-case-hero {
  width: 100%;
  margin-top: clamp(48px, 6vw, 90px);
  background: #ff6b00;
  padding: clamp(36px, 6vw, 90px) 0;
}
.tellit-case-hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}
.tellit-case-hero[data-count="2"] .tellit-case-hero-inner { grid-template-columns: 1fr 1fr; }
.tellit-case-hero[data-count="3"] .tellit-case-hero-inner { grid-template-columns: 1fr 1fr 1fr; }
.tellit-case-hero-inner img { display: block; width: 100%; height: auto; }
.tellit-case-hero-caption {
  max-width: 1160px;
  margin: clamp(16px, 2vw, 26px) auto 0;
  padding: 0 clamp(20px, 4vw, 48px);
  font: 800 11px/1.4 "Open Sans", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #101010;
}

/* ----- Mittelteil: roter Faden + Kapitel -----
   Der Zeilen-Container ist nativ in Elementor: Flex-Row, boxed 1504,
   align-items flex-start, Spalten-Abstand ~110, auf Tablet -> Spalte.
   Diese Regeln greifen an den beiden Widgets darin (nur hier vorhanden). */
/* The7 legt overflow:hidden auf .site -> das wuerde position:sticky killen.
   overflow:clip schneidet genauso ab, bildet aber keinen Scroll-Container. */
body.single-tellit_arbeit .site { overflow: clip !important; }

.tellit-faden-col {
  flex: 0 0 190px !important;
  align-self: flex-start !important;
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}
.elementor-widget-theme-post-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 940px;
}
.tellit-faden-label {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 3px solid #ff6b00;
  font: 800 11px/1.3 "Open Sans", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #101010;
}
.tellit-faden-list {
  list-style: none !important;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #ececE6;
  counter-reset: none;
}
.tellit-faden-list li { position: relative; list-style: none !important; }
.tellit-faden-list li::marker { content: none; }
.tellit-faden-list li + li { margin-top: 14px; }
.tellit-faden-list a {
  display: block;
  text-decoration: none;
  transition: opacity 160ms ease;
}
.tellit-faden-num {
  display: inline-block;
  margin-right: 8px;
  font: 800 11px/1 "Open Sans", Arial, sans-serif;
  color: #ff6b00;
}
.tellit-faden-txt {
  font: 700 13px/1.35 "Open Sans", Arial, sans-serif;
  color: #9a988f;
  transition: color 160ms ease;
}
.tellit-faden-list li.is-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #ff6b00;
}
.tellit-faden-list li.is-active .tellit-faden-txt { color: #101010; }

/* ----- Kapitel-Widgets (Elementor-Vorlage "Projekt-Kapitel") ----- */
.tellit-case-ch-eyebrow,
.tellit-case-ch-eyebrow p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #ff6b00 !important;
  scroll-margin-top: 110px;
}
.tellit-case-ch-title,
.tellit-case-ch-title .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(32px, 3.8vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
  overflow-wrap: break-word !important;
}
.tellit-case-ch-title .tellit-accent { color: #ff6b00 !important; }
.tellit-case-ch-lead,
.tellit-case-ch-lead p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(19px, 1.7vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #101010 !important;
}
.tellit-case-ch-text,
.tellit-case-ch-text p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #6b6a64 !important;
}
.tellit-case-ch-img img { display: block !important; width: 100% !important; height: auto !important; }

/* ----- Statement-Band (H2-Widget, Klasse tellit-case-statement) ----- */
.tellit-case-statement,
.tellit-case-statement .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(40px, 6vw, 118px) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}
.tellit-case-statement .tellit-outline {
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
}

/* ----- Abschluss ----- */
.tellit-case-abschluss {
  max-width: 1504px;
  margin: clamp(70px, 9vw, 150px) auto 0;
  padding: clamp(50px, 7vw, 110px) clamp(20px, 4vw, 48px) clamp(70px, 9vw, 140px);
  border-top: 1px solid #d9d9d4;
}
.tellit-case-back--bottom { display: inline-block; }
.tellit-case-cta {
  display: block;
  margin-top: clamp(28px, 4vw, 60px);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(38px, 5.6vw, 116px);
  font-weight: 900;
  line-height: 0.95 !important;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #101010;
  text-decoration: none;
  overflow-wrap: break-word;
}
.tellit-case-cta .tellit-accent { color: #ff6b00; }
.tellit-case-cta-arrow {
  display: inline-block;
  margin-left: 0.15em;
  color: #ff6b00;
  transition: transform 180ms ease;
}
.tellit-case-cta:hover .tellit-case-cta-arrow { transform: translate(6px, -6px); }

/* ----- responsiv ----- */
@media (max-width: 1024px) {
  .tellit-faden-col { display: none !important; }
  .elementor-widget-theme-post-content { max-width: none; }
  .tellit-case-leadrow { flex-direction: column; gap: 24px; }
  .tellit-case-intro, .tellit-case-kurz { flex: 1 1 100%; max-width: none; }
  .tellit-case-facts { grid-template-columns: 1fr 1fr; }
  .tellit-case-facts > div { padding-right: 16px; }
}
@media (max-width: 1024px) {
  /* Kapitel-Kennung dichter an die H2 ruecken (Elementor-Default-Paddings) */
  .tellit-case-ch-eyebrow { margin-bottom: -22px !important; }
}
@media (max-width: 600px) {
  .tellit-case-facts { grid-template-columns: 1fr; }
  .tellit-case-facts > div { border-top: 1px solid #ececE6; padding: 18px 0 6px; }
  .tellit-case-facts > div:first-child { border-top: 0; }
  .tellit-case-title { font-size: clamp(38px, 12vw, 72px); }
  .tellit-case-cta { font-size: clamp(32px, 11vw, 56px); }
}


/* ===========================================================================
   KONTAKTSEITE  (Seite "/kontakt/", eigene Farbwelt: komplett orange #ff6b00)
   ---------------------------------------------------------------------------
   Eigene Klassen (nicht mit den .tellit-h2 / .tellit-copy usw. der Startseite
   geteilt), damit diese Seite unabhaengig weiss-auf-orange gestaltet ist.
   =========================================================================== */

body.page-id-3941 { background-color: #ff6b00; }

.tellit-kontakt-eyebrow,
.tellit-kontakt-eyebrow p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.tellit-kontakt-hero-title,
.tellit-kontakt-hero-title .elementor-heading-title {
  margin: 22px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(44px, 6.6vw, 116px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

.tellit-kontakt-h2,
.tellit-kontakt-h2 .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(38px, 4.6vw, 84px) !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

.tellit-kontakt-accent-black { color: #101010 !important; }

.tellit-kontakt-hero-sub,
.tellit-kontakt-hero-sub p {
  margin: 20px 0 0 !important;
  max-width: 640px;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.tellit-kontakt-copy,
.tellit-kontakt-copy p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.tellit-kontakt-label,
.tellit-kontakt-label p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.tellit-kontakt-value,
.tellit-kontakt-value p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
}
.tellit-kontakt-value a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}
.tellit-kontakt-value a:hover { color: #101010 !important; }

/* ----- Kontaktformular (Elementor-Pro-Widget "form") ----- */
.tellit-kontakt-form .elementor-field-group { margin-bottom: 26px !important; }
.tellit-kontakt-form .elementor-field-label {
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 8px !important;
}
.tellit-kontakt-form .elementor-field {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 16, 16, 0.55) !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  color: #101010 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.tellit-kontakt-form .elementor-field::placeholder { color: rgba(16, 16, 16, 0.45) !important; }
.tellit-kontakt-form .elementor-field:focus { border-bottom-color: #101010 !important; outline: none !important; }
.tellit-kontakt-form textarea.elementor-field { resize: vertical !important; }

.tellit-kontakt-form .elementor-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
  padding: 22px 26px !important;
  background: #101010 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 180ms ease !important;
}
.tellit-kontakt-form .elementor-button:hover { background: #000000 !important; }
.tellit-kontakt-form .elementor-button-content-wrapper {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  width: 100% !important;
}
.tellit-kontakt-form .elementor-button-text {
  order: 1 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.tellit-kontakt-form .elementor-button-icon { order: 2 !important; color: #ff6b00 !important; }

@media (max-width: 1024px) {
  .tellit-kontakt-hero-sub { max-width: none; }
}
@media (max-width: 600px) {
  .tellit-kontakt-hero-title,
  .tellit-kontakt-hero-title .elementor-heading-title { font-size: clamp(38px, 12vw, 60px) !important; }
  .tellit-kontakt-h2,
  .tellit-kontakt-h2 .elementor-heading-title { font-size: clamp(32px, 10vw, 48px) !important; }
}

/* ----- Nur auf der Kontaktseite: Header + Footer ebenfalls auf Orange -----
   Header/Footer sind globale Vorlagen mit eigenem weissem Hintergrund;
   hier via body-Klasse "page-id-3941" ueberschrieben, damit wirklich die
   GANZE Seite orange ist. Die Footer-Claim-Zeile ist normalerweise selbst
   orange (auf weiss) -> auf dieser Seite auf Schwarz umgefaerbt, sonst
   unsichtbar. */
body.page-id-3941 #masthead .elementor-element-5f76cf4,
body.page-id-3941 #colophon .elementor-element-ftrc0001,
body.page-id-3941 .tellit-footer-wrap {
  background: #ff6b00 !important;
}
body.page-id-3941 .tellit-footer-col--claim,
body.page-id-3941 .tellit-footer-col--claim * {
  color: #101010 !important;
}

/* ===========================================================================
   ÜBER-UNS-SEITE  (Seite "/ueber-uns/")
   ---------------------------------------------------------------------------
   Viele Bausteine sind bewusst mit der Startseite geteilt (.tellit-section-index,
   .tellit-h2, .tellit-lead, .tellit-copy, .tellit-chapter-num/-title,
   .tellit-willkommen-*, .tellit-credential-*, .tellit-kontakt-eyebrow) –
   hier stehen nur die Klassen, die NUR auf dieser Seite vorkommen.
   =========================================================================== */

/* Vollflaechiges Kopf-Foto */
.tellit-ueberuns-hero-img { margin: 0 !important; }
.tellit-ueberuns-hero-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 8 !important;
  object-fit: cover !important;
  object-position: center 45% !important;
}
@media (max-width: 767px) {
  .tellit-ueberuns-hero-img img { aspect-ratio: 4 / 5 !important; }
}

/* 00 / WHAT'S OUR STORY? – grosse Statement-Headline (H1) */
.tellit-ueberuns-h1,
.tellit-ueberuns-h1 .elementor-heading-title {
  margin: 22px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(52px, 6.4vw, 128px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

/* 01 / WIE WIR TICKEN – dunkler Vollbild-Abschnitt */
.tellit-ticken-h2,
.tellit-ticken-h2 .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(40px, 4.6vw, 84px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-ticken-num,
.tellit-ticken-num p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: #ff6b00 !important;
}
.tellit-ticken-title,
.tellit-ticken-title .elementor-heading-title {
  margin: 20px 0 12px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(19px, 1.4vw, 23px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-ticken-desc,
.tellit-ticken-desc p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #a7a59d !important;
}

/* Statement-Box (inset, orange) */
.tellit-statement-line1,
.tellit-statement-line1 .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(30px, 3.6vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}
.tellit-statement-line2 {
  display: inline-block !important;
  color: #ffffff !important;
}

/* 05 / LET'S TALK – Formular auf weissem Grund (Elementor-Pro-Widget "form") */
.tellit-ueberuns-form .elementor-field-group { margin-bottom: 26px !important; }
.tellit-ueberuns-form .elementor-field-label {
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6b6a64 !important;
  margin-bottom: 8px !important;
}
.tellit-ueberuns-form .elementor-field {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #c9c9c2 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  color: #101010 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.tellit-ueberuns-form .elementor-field::placeholder { color: rgba(16, 16, 16, 0.4) !important; }
.tellit-ueberuns-form .elementor-field:focus { border-bottom-color: #101010 !important; outline: none !important; }
.tellit-ueberuns-form textarea.elementor-field { resize: vertical !important; }
.tellit-ueberuns-form .elementor-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
  padding: 22px 26px !important;
  background: #101010 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 180ms ease !important;
}
.tellit-ueberuns-form .elementor-button:hover { background: #ff6b00 !important; }
.tellit-ueberuns-form .elementor-button-content-wrapper {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  width: 100% !important;
}
.tellit-ueberuns-form .elementor-button-text {
  order: 1 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.tellit-ueberuns-form .elementor-button-icon { order: 2 !important; color: #ff6b00 !important; }

@media (max-width: 600px) {
  .tellit-ueberuns-h1,
  .tellit-ueberuns-h1 .elementor-heading-title { font-size: clamp(38px, 12vw, 60px) !important; }
  .tellit-ticken-h2,
  .tellit-ticken-h2 .elementor-heading-title { font-size: clamp(32px, 10vw, 48px) !important; }
}

/* ===========================================================================
   ARBEITEN-SEITE  (Seite "/arbeiten/")
   ---------------------------------------------------------------------------
   Header/Breadcrumb-Zaehler/Auswahlnavi = Shortcode [tellit_arbeiten_filter],
   Projekt-Raster = Shortcode [tellit_arbeiten count="-1" cols="3"] (beide in
   assets/classes/class-tellit-portfolio.php). CTA-Formular am Seitenende nutzt
   dieselben Klassen wie die Über-uns-Seite (.tellit-ueberuns-form usw.).
   =========================================================================== */

/* Hero-Headline (H1) */
.tellit-arbeiten-hero-h1,
.tellit-arbeiten-hero-h1 .elementor-heading-title {
  margin: 22px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(60px, 7.6vw, 150px) !important;
  font-weight: 700 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}
.tellit-arbeiten-hero-h1 { overflow: hidden !important; }
@keyframes tellit-roll-in {
  0% { opacity: 0; transform: translateY(65%) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.tellit-arbeiten-hero-h1 .elementor-heading-title {
  transform-origin: left bottom;
  animation: tellit-roll-in 900ms cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .tellit-arbeiten-hero-h1 .elementor-heading-title { animation: none !important; }
}
.tellit-arbeiten-hero-sub,
.tellit-arbeiten-hero-sub p {
  margin: 20px 0 0 !important;
  max-width: 640px;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: #3f3e3a !important;
}

/* Zaehler ("07 —— 07") + Auswahlnavi  ([tellit_arbeiten_filter]) */
.tellit-arbeiten-filter {
  margin-top: clamp(56px, 7vw, 100px) !important;
}
.tellit-arbeiten-counter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #101010;
}
.tellit-arbeiten-counter-bar {
  position: relative;
  flex: 0 1 200px;
  height: 1px;
  background: #d9d9d4;
}
.tellit-arbeiten-counter-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #ff6b00;
  transition: width 260ms ease;
}
.tellit-arbeiten-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #d9d9d4;
  padding-top: 18px;
}
.tellit-arbeiten-cat {
  background: none;
  border: 0;
  margin: 4px 16px 4px 0;
  padding: 6px 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6a64;
  cursor: pointer;
  transition: color 160ms ease;
}
.tellit-arbeiten-cat:not(:last-child)::after {
  content: "/";
  margin-left: 16px;
  color: #c9c9c2;
  font-weight: 400;
}
.tellit-arbeiten-cat-num { color: #ff6b00; margin-right: 4px; }
.tellit-arbeiten-cat:hover,
.tellit-arbeiten-cat.is-active { color: #101010; }

/* Projekt-Raster: 3-spaltige Variante (Shortcode-Attribut cols="3") */
.tellit-projects--3col .tellit-projects-col:nth-child(2) { margin-top: clamp(32px, 4vw, 64px) !important; }
.tellit-projects--3col .tellit-projects-col:nth-child(3) { margin-top: clamp(64px, 8vw, 128px) !important; }

@media (max-width: 600px) {
  .tellit-arbeiten-hero-h1,
  .tellit-arbeiten-hero-h1 .elementor-heading-title { font-size: clamp(38px, 12vw, 60px) !important; }
}

/* ===========================================================================
   SEITE „WIE WIR ERZÄHLEN"  (Page 3937, Slug /leistungen/, Navi-Label "Wie wir erzählen")
   ---------------------------------------------------------------------------
   Einzige komplett dunkle Seite neben Kontakt (dort orange). Hintergrund
   durchgehend #141310, Typo überwiegend weiss, Akzente orange #ff6b00,
   Haarlinien hellgrau auf dunklem Grund (rgba(255,255,255,.15)).
   =========================================================================== */

body.page-id-3937 { background-color: #141310 !important; }

/* ----- Header + Footer auf dieser Seite ebenfalls dunkel ----- */
body.page-id-3937 #masthead,
body.page-id-3937 #masthead .elementor-element-5f76cf4,
body.page-id-3937 #colophon,
body.page-id-3937 .tellit-footer-wrap {
  background: #141310 !important;
}
body.page-id-3937 #masthead img { filter: invert(1) !important; }
body.page-id-3937 #masthead .hfe-menu-item,
body.page-id-3937 #masthead a,
body.page-id-3937 .tellit-footer-wrap,
body.page-id-3937 .tellit-footer-wrap a,
body.page-id-3937 .tellit-footer-legal,
body.page-id-3937 .tellit-footer-legal a {
  color: #ffffff !important;
}
body.page-id-3937 .tellit-footer-wrap { border-top-color: rgba(255, 255, 255, .28) !important; }
body.page-id-3937 .hfe-creative-menu a {
  background: #ff6b00 !important;
  color: #101010 !important;
}
body.page-id-3937 .tellit-footer-col--claim,
body.page-id-3937 .tellit-footer-col--claim * {
  color: #ff6b00 !important;
}

/* ----- Eyebrow (orange, auf dunklem Grund) ----- */
.tellit-leistungen-eyebrow,
.tellit-leistungen-eyebrow p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: #ff6b00 !important;
}

/* ----- Kopf: 5-zeilige Headline ----- */
.tellit-leistungen-h1,
.tellit-leistungen-h1 .elementor-heading-title {
  margin: 22px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(38px, 4.6vw, 84px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-leistungen-sub,
.tellit-leistungen-sub p {
  margin: 28px 0 0 !important;
  max-width: 480px;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, .72) !important;
}

/* ----- Video-Box "Story in Motion" ----- */
.tellit-leistungen-video-el,
.tellit-leistungen-video-el .elementor-wrapper,
.tellit-leistungen-video-el video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  background: #000 !important;
}
.tellit-leistungen-video-caption {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}
.tellit-leistungen-video-label,
.tellit-leistungen-video-label p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #ff6b00 !important;
}
.tellit-leistungen-video-text,
.tellit-leistungen-video-text p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, .55) !important;
  text-align: right !important;
}

/* ----- Erzählfaden-Kapitel (H2 weiss) ----- */
.tellit-leistungen-h2,
.tellit-leistungen-h2 .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(40px, 4.6vw, 84px) !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* ----- Prozess-Schritte (5 Zeilen, Haarlinien hellgrau) ----- */
.tellit-leistungen-step-title,
.tellit-leistungen-step-title .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(28px, 3.1vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-leistungen-step-text,
.tellit-leistungen-step-text p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .68) !important;
}
.tellit-leistungen-step-tags,
.tellit-leistungen-step-tags p {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ff6b00 !important;
}
@media (max-width: 1024px) {
  .tellit-leistungen-step-tags, .tellit-leistungen-step-tags p { text-align: left !important; }
}

/* ----- Statement ----- */
.tellit-leistungen-statement-white,
.tellit-leistungen-statement-white .elementor-heading-title {
  margin: 0 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(32px, 3.8vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-leistungen-statement-orange { color: #ff6b00 !important; }

/* ----- CTA "GESCHICHTE BEGINNEN" ----- */
.tellit-leistungen-cta-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: clamp(36px, 4.5vw, 56px) !important;
}
.tellit-leistungen-cta-link .elementor-button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #ff6b00 !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.tellit-leistungen-cta-link .elementor-button-text {
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(16px, 1.4vw, 19px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.tellit-leistungen-cta-link .elementor-button-icon { color: #ff6b00 !important; }
.tellit-leistungen-cta-link .elementor-button:hover .elementor-button-text { color: #ff6b00 !important; }

@media (max-width: 1024px) {
  .tellit-leistungen-video-frame { margin-top: 40px; }
}
@media (max-width: 600px) {
  .tellit-leistungen-h1, .tellit-leistungen-h1 .elementor-heading-title { font-size: clamp(32px, 10vw, 48px) !important; }
  .tellit-leistungen-h2, .tellit-leistungen-h2 .elementor-heading-title { font-size: clamp(30px, 9vw, 44px) !important; }
  .tellit-leistungen-statement-white, .tellit-leistungen-statement-white .elementor-heading-title { font-size: clamp(26px, 8vw, 36px) !important; }
}