/* ==========================================================================
   SocialMet IT Solutions - eigene Anpassungen am Theme
   Stand vorher als <style>-Block in index-5.html; jetzt eine Datei fuer
   alle Seiten, damit Unterseiten dieselbe Kopf-/Fusszeile nutzen koennen.
   ========================================================================== */

/* ===== Preloader =====
   main.js blendet den Preloader erst bei window.load aus, also erst
   wenn wirklich jedes Bild und jedes Script fertig ist. Bis dahin
   liegt eine Vollbildflaeche ueber der Seite. Hier wird er per
   Klasse ausgeblendet, sobald das HTML steht (Script am Seitenende).
   Das spaetere fadeOut aus main.js laeuft dann ins Leere. */
/* ===== Kundenstimmen-Slider vor dem Swiper-Start =====
   Swiper und sein CSS kommen erst, wenn der Abschnitt in Sichtweite
   ist. Bis dahin wuerden ohne swiper.min.css alle Slides untereinander
   stehen - deshalb zeigt der Platzhalter nur den ersten. Die Hoehe
   stimmt dadurch schon vorher und es gibt keinen Layout-Sprung. */
.tj-testimonial-slider-two.lc-swiper-pending .swiper-wrapper {
   display: flex;
}
.tj-testimonial-slider-two.lc-swiper-pending .swiper-slide {
   flex: 0 0 100%;
   max-width: 100%;
}
.tj-testimonial-slider-two.lc-swiper-pending .swiper-slide:not(:first-child) {
   display: none;
}

.preloader.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
/* ===== Laufband (frueher Swiper, jetzt reine CSS-Animation) =====
   Laeuft ueber transform im Compositor und belastet den Main-Thread
   nicht. Die Spur enthaelt den Inhalt zweimal, deshalb ist -50 %
   genau eine Runde und der Umlauf nahtlos. */
.lc-marquee {
   overflow: hidden;
}
.lc-marquee-track {
   display: flex;
   align-items: center;
   width: max-content;
   animation: lc-marquee-scroll 50s linear infinite;
}
.lc-marquee-track .marquee-item {
   flex: 0 0 auto;
   flex-wrap: nowrap;
}
@keyframes lc-marquee-scroll {
   from { transform: translate3d(0, 0, 0); }
   to   { transform: translate3d(-50%, 0, 0); }
}
/* Beim Ueberfahren anhalten - und fuer alle, die Bewegung reduziert haben. */
.lc-marquee:hover .lc-marquee-track {
   animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
   .lc-marquee-track {
      animation: none;
   }
   .marquee-item .marquee-icons img {
      animation: none;
   }
}

/* ===== Layout vor dem Bild-Download reservieren =====
   Die width/height-Attribute an den <img> liefern das Seitenverhaeltnis,
   height:auto verhindert, dass daraus eine feste Hoehe wird. */
img {
   height: auto;
}

/* ===== Inline-SVG-Icons (ersetzen einzelne Font-Awesome-Glyphen) ===== */
.lc-svg-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.lc-svg-icon > svg {
   width: 0.8em;
   height: 0.8em;
   display: block;
}
.client-experience .images-thumb li.plus .lc-svg-icon > svg {
   width: 16px;
   height: 16px;
}
.tj-footer-input-btn .lc-svg-icon > svg {
   width: 18px;
   height: 18px;
}

/* ===== Founder / About Me Section ===== */
.lc-about-section {
   padding-top: 120px;
   padding-bottom: 120px;
   background: linear-gradient(160deg, #eef2f9 0%, #f7f9fc 60%, #eaf0fb 100%);
   overflow: hidden;
   position: relative;
}
/* Subtle decorative circle in top-right */
.lc-about-section::before {
   content: '';
   position: absolute;
   top: -120px;
   right: -120px;
   width: 480px;
   height: 480px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(0,117,255,0.07) 0%, transparent 70%);
   pointer-events: none;
}
/* Image wrapper */
.lc-founder-wrap {
   position: relative;
   padding: 24px 0 24px 24px;
}
.lc-founder-image {
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 32px 80px rgba(5,18,41,0.16);
   position: relative;
   z-index: 1;
}
.lc-founder-image img {
   width: 100%;
   display: block;
   object-fit: cover;
}
/* Blue offset border behind photo */
.lc-founder-wrap::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 24px;
   bottom: 24px;
   border: 3px solid var(--tj-color-theme-primary, #0075ff);
   border-radius: 22px;
   z-index: 0;
   opacity: 0.55;
}
/* Floating badge on image */
.lc-badge {
   position: absolute;
   bottom: 36px;
   right: -20px;
   background: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
   border-radius: 14px;
   padding: 14px 22px;
   box-shadow: 0 10px 32px rgba(0,117,255,0.35);
   z-index: 3;
   text-align: center;
   min-width: 120px;
}
.lc-badge strong {
   display: block;
   font-size: 1.8rem;
   font-weight: 800;
   line-height: 1;
}
.lc-badge span {
   font-size: 0.78rem;
   font-weight: 500;
   opacity: 0.9;
   line-height: 1.3;
   display: block;
   margin-top: 3px;
}
/* Content side */
.lc-founder-content {
   padding-left: 40px;
}
@media (max-width: 991px) {
   .lc-founder-content { padding-left: 0; margin-top: 48px; }
   .lc-badge { right: 10px; bottom: 20px; }
   .lc-about-section { padding-top: 80px; padding-bottom: 80px; }
}
.lc-founder-name {
   font-size: 2.3rem;
   font-weight: 800;
   color: var(--tj-color-heading-primary, #051229);
   margin-bottom: 6px;
   line-height: 1.2;
}
.lc-founder-role {
   color: var(--tj-color-theme-primary, #0075ff);
   font-weight: 600;
   font-size: 0.88rem;
   margin-bottom: 22px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
.lc-founder-divider {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px;
}
.lc-founder-divider::before {
   content: '';
   display: block;
   width: 48px;
   height: 3px;
   background: var(--tj-color-theme-primary, #0075ff);
   border-radius: 2px;
}
.lc-founder-divider::after {
   content: '';
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--tj-color-theme-primary, #0075ff);
}
/* Highlighted quote block */
.lc-quote {
   border-left: 4px solid var(--tj-color-theme-primary, #0075ff);
   background: #fff;
   padding: 18px 22px;
   border-radius: 0 12px 12px 0;
   margin-bottom: 28px;
   box-shadow: 0 4px 20px rgba(0,117,255,0.07);
}
.lc-quote p {
   color: var(--tj-color-text-body, #364052);
   line-height: 1.8;
   font-size: 1rem;
   margin: 0;
   font-style: italic;
}
/* Tags */
.lc-founder-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 32px;
}
.lc-tag {
   background: rgba(0, 117, 255, 0.06);
   color: var(--tj-color-theme-primary, #0075ff);
   padding: 7px 18px;
   border-radius: 50px;
   font-size: 0.83rem;
   font-weight: 600;
   border: 1px solid rgba(0, 117, 255, 0.22);
   transition: background 0.25s, color 0.25s, border-color 0.25s;
   cursor: default;
}
.lc-tag:hover {
   background: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
   border-color: transparent;
}
/* Stats row */
.lc-stats {
   display: flex;
   gap: 0;
   margin-bottom: 36px;
   border: 1px solid rgba(0,117,255,0.15);
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,117,255,0.06);
}
.lc-stat {
   flex: 1;
   padding: 20px 16px;
   text-align: center;
   position: relative;
}
.lc-stat + .lc-stat::before {
   content: '';
   position: absolute;
   left: 0;
   top: 20%;
   height: 60%;
   width: 1px;
   background: rgba(0,117,255,0.15);
}
.lc-stat strong {
   display: block;
   font-size: 1.7rem;
   font-weight: 800;
   color: var(--tj-color-theme-primary, #0075ff);
   line-height: 1;
}
.lc-stat span {
   font-size: 0.78rem;
   color: var(--tj-color-text-body-2, #7e8590);
   font-weight: 500;
   margin-top: 4px;
   display: block;
}
/* CTA row */
.lc-founder-actions {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
}
.lc-social-link {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #fff;
   color: var(--tj-color-heading-primary, #051229);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 14px rgba(0,0,0,0.10);
   font-size: 16px;
   transition: background 0.25s, color 0.25s, transform 0.25s;
   text-decoration: none;
   border: 1px solid rgba(0,117,255,0.12);
}
.lc-social-link:hover {
   background: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0,117,255,0.28);
}

/* ===== Section spacing helpers ===== */
.section-space-top { padding-top: 120px; }
@media (max-width: 767px) { .section-space-top { padding-top: 80px; } }

/* ===== Hero subtitle badge ===== */
.hero-subtitle span {
   background: var(--tj-color-theme-primary, #0075ff);
   color: #fff;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: inherit;
}

/* ===== Feature section separator ===== */
.tj-feature-section-three .feature-style-5 {
   border-top: none;
}

/* ===== Pricing card hover improvement ===== */
.pricing-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 48px rgba(0, 117, 255, 0.12);
}

/* ===== Topbar language select ===== */
.header-topbar .nice-select {
   background: transparent;
   border: none;
   color: inherit;
   font-size: inherit;
   padding-left: 0;
}

/* ===== Footer newsletter input padding ===== */
.newsletter-form .form-input input {
   padding-right: 60px;
}

/* ===== Blog dates in German ===== */
.blog-three-meta { opacity: 0.8; }

/* ===== Consistent about-wrapper section bg ===== */
.h5-team-section {
   background: var(--tj-color-theme-bg, #e1e8f0);
   padding-top: 100px;
   padding-bottom: 100px;
}
@media (max-width: 767px) {
   .h5-team-section { padding-top: 60px; padding-bottom: 60px; }
}

/* ===== CTA section button gap ===== */
.h5-cta-contact {
   gap: 16px;
}

/* ===== CTA section banner image (inserted 1:1) ===== */
.h5-cta-section {
   padding: 0;
}
.lc-cta-banner {
   position: relative;
   width: 100%;
   line-height: 0;
}
.lc-cta-banner img {
   display: block;
   width: 100%;
   height: auto;
}
.lc-cta-overlay {
   position: absolute;
   inset-inline-start: 37%;
   top: 68%;
   z-index: 1;
}
.lc-cta-overlay .h5-cta-contact {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}
@media (max-width: 767px) {
   .lc-cta-overlay {
      position: static;
      padding: 20px 16px;
      background-color: var(--tj-color-theme-primary);
   }
   .lc-cta-overlay .h5-cta-contact {
      justify-content: center;
   }
}
/* ===== Skip-Link =====
   Liegt ausserhalb des Sichtbereichs und kommt erst beim
   Fokussieren herein - so stoert er das Layout nicht, ist fuer
   Tastaturnutzer aber der erste erreichbare Punkt der Seite. */
.lc-skip-link {
   position: absolute;
   top: -100px;
   inset-inline-start: 16px;
   z-index: 10000;
   padding: 12px 20px;
   border-radius: 0 0 8px 8px;
   background-color: var(--tj-color-theme-primary);
   color: var(--tj-color-common-white);
   font-weight: var(--tj-fw-bold);
   text-decoration: none;
   transition: top 200ms ease;
}
.lc-skip-link:focus {
   top: 0;
   color: var(--tj-color-common-white);
}

.lc-visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ===== Honeypot =====
   Muss fuer Bots wie ein normales Feld aussehen, deshalb kein
   display:none und kein hidden-Attribut - stattdessen aus dem
   sichtbaren Bereich geschoben. tabindex="-1" im Markup haelt es
   zusaetzlich aus der Tab-Reihenfolge. */
.lc-hp {
   position: absolute !important;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* ===== Datenschutz-Einwilligung im Kontaktformular =====
   Das Formular ist ein zweispaltiges Grid. Ohne eigene Angabe
   landet der Hinweis in einer halben Spalte neben dem Button und
   bricht dort in eine schmale Textsaeule um - er braucht wie das
   Nachrichtenfeld die ganze Breite. Auf schmalen Schirmen ist das
   Grid ohnehin einspaltig, dort aendert die Regel nichts. */
.lc-consent-wrapper,
#lc-contact-form .lc-form-status:not(:empty) {
   grid-column: 1 / -1;
}
.lc-consent-wrapper {
   margin-bottom: 0;
}
.lc-consent {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   font-size: 14px;
   line-height: 1.55;
   color: var(--tj-color-text-body);
}
.lc-consent input[type="checkbox"] {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   margin: 3px 0 0;
   accent-color: var(--tj-color-theme-primary);
   cursor: pointer;
}
.lc-consent a {
   color: var(--tj-color-theme-primary);
   text-decoration: underline;
}
/* Sichtbare Rueckmeldung, wenn abgeschickt wird, ohne die Box zu setzen.
   :user-invalid statt :invalid, damit nichts rot ist, bevor der
   Besucher ueberhaupt etwas getan hat. */
.lc-consent input[type="checkbox"]:user-invalid {
   outline: 2px solid #d64545;
   outline-offset: 2px;
}
.lc-consent input[type="checkbox"]:focus-visible {
   outline: 2px solid var(--tj-color-theme-primary);
   outline-offset: 2px;
}

/* ===== Einwilligungshinweis unter dem Newsletter-Feld ===== */
.lc-newsletter-consent {
   margin: 10px 0 0;
   font-size: 12px;
   line-height: 1.5;
   opacity: 0.75;
}
.lc-newsletter-consent a {
   text-decoration: underline;
}

/* ===== Hauptmenue mit sieben Eintraegen =====
   Der Standardabstand von 30px passt auf grossen Schirmen, wird
   zwischen 992px und 1399px aber zu breit fuer Logo, Menue, Suche
   und Button in einer Zeile. */
@media (min-width: 992px) and (max-width: 1399px) {
   .mainmenu ul {
      gap: 20px;
   }
   .mainmenu ul > li > a {
      font-size: 15px;
   }
}

/* ===== Remove blank/placeholder links style ===== */
a[href="#"] {
   pointer-events: auto;
}

/* ===== Client logo section as text wordmarks ===== */
.lc-brands-text {
   grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 575px) {
   .lc-brands-text {
      grid-template-columns: repeat(2, 1fr);
   }
}
.lc-brands-text .brand_item div {
   width: 100%;
   text-align: center;
   padding: 0 16px;
}
.lc-brands-text .brand_item div span {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: var(--tj-ff-heading);
   font-size: 20px;
   font-weight: var(--tj-fw-sbold);
   letter-spacing: -0.01em;
   color: var(--tj-color-heading);
   opacity: 0.4;
   transition: all 500ms ease;
   white-space: nowrap;
}
.lc-brands-text .brand_item div span i,
.lc-brands-text .brand_item div span .lc-tech-svg {
   font-size: 18px;
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   color: var(--tj-color-theme-primary);
}
.lc-brands-text .brand_item div span:first-child {
   position: absolute;
   inset-inline-start: 0;
   top: 0;
   inset-inline-end: 0;
   bottom: 0;
   z-index: 1;
   transform: translateX(50%);
   opacity: 0;
}
/* Frueher lag hier ein <a href="#">. main.min.css gibt die Groesse
   ueber .brand_item a vor - das uebernimmt jetzt .brand_link. */
.lc-brands-text .brand_item .brand_link {
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
}
.lc-brands-text .brand_item .brand_link:hover div span {
   opacity: 1;
}
.lc-brands-text .brand_item .brand_link:hover div span:first-child {
   transform: translateX(0);
   opacity: 1;
}
.lc-brands-text .brand_item .brand_link:hover div span:last-child {
   transform: translateX(-50%);
   opacity: 0;
}

/* Die Projekt-Tags waren <a href="#"> ohne Ziel und sind jetzt <span>.
   main.min.css gestaltet die Pillen ueber "... .category li a" -
   dieselben Regeln hier noch einmal fuer das span. */
.h5-case-study-item .case-study-content .category li span {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;
   border: 1px solid var(--tj-color-border-2);
   color: var(--tj-color-text-body);
   font-size: 14px;
   line-height: 1;
   padding: 5px 9px;
}
.h9-case-study-item .case-study-content .category li span {
   color: var(--tj-color-common-white);
   background-color: rgba(247, 247, 247, 0.1);
   -webkit-backdrop-filter: blur(50px);
   backdrop-filter: blur(50px);
   border: 0;
}

/* ===== Selected pricing package ===== */
.pricing__box.is-package-selected {
   outline: 3px solid #10b95a;
   outline-offset: -3px;
}
.pricing__box.is-package-selected .pricing__select-btn {
   background: #10b95a !important;
   border-color: #10b95a !important;
}

/* ===== Contact form submit status ===== */
.lc-form-status {
   display: none;
   font-size: 15px;
   line-height: 1.5;
   padding: 12px 16px;
   border-radius: 6px;
   margin-bottom: 20px;
}
.lc-form-status.is-success {
   display: block;
   color: #0a7a34;
   background: rgba(16, 185, 90, 0.12);
}
.lc-form-status.is-error {
   display: block;
   color: #b3261e;
   background: rgba(217, 45, 32, 0.1);
}
#lc-contact-submit.is-sending {
   opacity: 0.7;
   pointer-events: none;
}

/* ===== FAQ =====
   Das Accordion nutzt bewusst kein Template-JS: natives
   <details>/<summary> funktioniert auch ohne Script, und der
   Antworttext steht immer im HTML - also auch fuer Crawler da,
   die kein JavaScript ausfuehren. */
.lc-faq-list {
   max-width: 900px;
   margin: 0 auto;
}
.lc-faq-item {
   border-bottom: 1px solid rgba(5, 18, 41, 0.12);
}
.lc-faq-item > summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
   padding: 24px 0;
   font-family: var(--tj-ff-heading);
   font-weight: var(--tj-fw-sbold);
   font-size: 19px;
   line-height: 1.45;
   color: var(--tj-color-heading-primary);
}
.lc-faq-item > summary::-webkit-details-marker {
   display: none;
}
.lc-faq-item > summary::after {
   content: "+";
   flex: 0 0 auto;
   font-size: 26px;
   line-height: 1;
   color: var(--tj-color-theme-primary);
   transition: transform 0.25s ease;
}
.lc-faq-item[open] > summary::after {
   content: "\2013";
}
.lc-faq-item > summary:hover {
   color: var(--tj-color-theme-primary);
}
.lc-faq-answer {
   padding: 0 46px 26px 0;
   margin: 0;
   font-size: 16px;
   line-height: 1.75;
   color: var(--tj-color-text-body);
}
@media (max-width: 575px) {
   .lc-faq-item > summary {
      font-size: 17px;
   }
   .lc-faq-answer {
      padding-right: 0;
   }
}

/* NAP-Block im Footer: Name, Adresse, Telefon an genau der Stelle,
   an der Google sie bei lokalen Anbietern erwartet. Muss zeichengenau
   zum Impressum und zum Google-Unternehmensprofil passen. */
.lc-nap {
   font-style: normal;
   margin-top: 24px;
   font-size: 15px;
   line-height: 1.8;
}
.lc-nap a {
   color: inherit;
}
.lc-nap a:hover {
   color: var(--tj-color-theme-primary);
}
.lc-nap strong {
   display: block;
   margin-bottom: 4px;
}

/* Einsatzgebiet als Leiste im Footer. Steht damit auf jeder Seite und
   nicht nur einmal auf der Startseite - fuer lokale Suchanfragen
   ("KI Agentur in der Naehe") ist genau das der bessere Platz. */
.lc-footer-areas-bar {
   position: relative;
   z-index: 2;
   padding-bottom: 45px;
}
.lc-footer-areas {
   padding-top: 30px;
   border-top: 1px solid rgba(5, 18, 41, 0.12);
}
.lc-footer-areas .lc-areas-title {
   font-size: 15px;
   font-weight: var(--tj-fw-bold);
   margin: 0 0 14px;
   color: var(--tj-color-heading-primary);
}
.lc-footer-areas ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 10px;
}
.lc-footer-areas li {
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--tj-color-text-body);
}
.lc-footer-areas li:not(:last-child)::after {
   content: "\00b7";
   margin-inline-start: 10px;
   opacity: 0.45;
}
.lc-footer-areas .lc-areas-note {
   margin: 12px 0 0;
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--tj-color-text-body);
}

/* Laufband-Text: gilt jetzt fuer <h3> (erste Runde) und <span>
   (die ausgeblendeten Wiederholungen) gleichermassen, damit beide
   identisch aussehen. Werte entsprechen der h3-Basis aus main.min.css. */
.marquee-item .marquee-title .text {
   display: block;
   font-family: var(--tj-ff-heading);
   font-size: var(--tj-fs-h3);
   font-weight: var(--tj-fw-sbold);
   line-height: 1.2;
   margin-top: 0;
}

/* Hero: Text-Spalte naeher an die Bild-Spalte heranziehen - die
   Basisregel in main.css gibt ihr 130px extra padding-top, wodurch
   der Text deutlich tiefer startet als das Portraitfoto daneben. */
.hero-content-four {
   padding-top: 40px;
}
@media (max-width: 767px) {
   .tj-hero-section-four {
      padding-top: 95px;
   }
   .hero-content-four {
      padding-top: 15px;
   }
}


/* ===== Barrierefreiheit: Kontraste auf dem hellen Footer-Hintergrund =====
   Die Theme-Grautoene lagen knapp unter dem WCAG-Mindestkontrast von 4,5:1. */
.h5-footer .footer-widget .desc {
   color: #555c68;
}

.lc-newsletter-consent,
.lc-newsletter-consent a {
   color: #4f5766;
}

/* Die Grundregel oben blendet den Hinweis auf 75 % ab - das drueckte den
   Kontrast wieder unter 4,5:1. Die Farbe ist bereits dezent genug. */
.lc-newsletter-consent {
   opacity: 1;
}

/* Firmenname in der Copyright-Zeile: nicht nur an der Farbe als Link erkennbar */
.h5-footer-copyright .copyright-text a {
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* Absende-Knopf des Newsletters: Klickflaeche mindestens 32 px breit */
.tj-footer-input-btn {
   min-width: 32px;
}

/* ===== Stellenanzeigen: Stellentitel ist jetzt die H1 der Seite =====
   Optisch bleibt er so gross wie vorher als H3. */
h1.tj-careers-top-title {
   font-size: var(--tj-fs-h3);
   line-height: 1.25;
}

/* ===== Teilen-Buttons unter Artikeln und Stellen =====
   Das Theme begrenzt die Leiste auf vier Symbole; mit E-Mail und
   WhatsApp sind es fuenf. */
.tj-post-details_tags_share .tj-socials_share.lc-share {
   max-width: none;
   width: auto;
}

.lc-share .lc-svg-icon > svg {
   width: 14px;
   height: 14px;
}

/* ===== Seiten mit dunklem Kopfbereich (Ratgeber-Artikel) =====
   Dort war das Hauptmenue dunkel auf dunkel und damit unsichtbar. Das Logo
   tauscht die Seite selbst gegen die weisse Variante. */
.lc-dark-hero .tj-header-area.header-absolute .mainmenu > ul > li > a,
.lc-dark-hero .tj-header-area.header-absolute .header_search,
.lc-dark-hero .tj-header-area.header-absolute .header_search i,
.lc-dark-hero .tj-header-area.header-absolute .menu_btn {
   color: #fff;
}

.lc-dark-hero .tj-header-area.header-absolute .menu_btn .cubes span {
   border-color: #fff;
}

.lc-dark-hero .tj-header-area.header-absolute .mainmenu > ul > li > a:hover {
   color: var(--tj-color-theme-primary);
}

/* ===== Leistungen: sieben Karten nebeneinander =====
   Die Vorlage rechnet mit festen Breiten (175 px zu, 420 px offen) und
   weniger Karten. Bei sieben Karten ist die Zeile zu schmal, der Browser
   staucht alle Karten - der Text der offenen Karte (fest 330 px breit)
   und die senkrechten Titel wurden abgeschnitten. Jetzt teilen sich die
   zugeklappten Karten den Restplatz, die offene hat eine feste Breite,
   und ihr Text ist genau so breit wie ihr Innenraum. */
@media (min-width: 992px) {
   .h5-service-wrap .service-style-5 {
      --lc-open: 440px;
      --lc-open-pad: 40px;
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      padding: 0 30px;
   }
   .h5-service-wrap .service-style-5.active {
      flex: 0 0 var(--lc-open);
      width: auto;
      padding: 0 var(--lc-open-pad);
   }
   .h5-service-wrap .service-style-5 .h5-service-content-inner {
      width: calc(var(--lc-open) - 2 * var(--lc-open-pad));
   }
   .h5-service-wrap .service-style-5 .h5-title-area .title {
      white-space: nowrap;
   }
}
@media (min-width: 1200px) and (max-width: 1399px) {
   .h5-service-wrap .service-style-5 {
      --lc-open: 390px;
      --lc-open-pad: 25px;
      padding: 0 20px;
   }
}
@media (min-width: 992px) and (max-width: 1199px) {
   .h5-service-wrap .service-style-5 {
      --lc-open: 330px;
      --lc-open-pad: 20px;
      padding: 0 15px;
   }
}

/* ===== Prozess-Bereich: Ueberschrift auf dem Foto lesbar machen =====
   Ab 991px zieht sich das Hintergrundfoto ueber die volle Breite und die
   weisse Ueberschrift liegt direkt darauf - in helleren Bildbereichen
   (Gesicht/Hemd) ging der Text darin unter. Ein Verlauf dunkelt das Foto
   oben ab, wo Titel und Vorprozess-Schritte stehen. */
@media (max-width: 991px) {
   .h5-process-section .h5-process-image::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      inset-inline-end: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(5, 18, 41, 0.78) 0%, rgba(5, 18, 41, 0.45) 40%, rgba(5, 18, 41, 0.1) 65%);
   }
}

/* ===== Preise: Hinweis netto, weitere Pakete aufklappen =====
   Drei Pakete sind sofort sichtbar, der Rest kommt per Button. .lc-js
   setzt ein Script im <head>; ohne JavaScript bleibt alles sichtbar. */
.lc-price-note {
   margin: 12px 0 0;
   font-size: 14px;
}
.pricing__package-desc .lc-price-setup {
   margin: 10px 0 0;
   font-size: 15px;
}
.lc-price-more-toggle {
   display: none;
   margin-top: 40px;
   text-align: center;
}
.lc-js .lc-price-more-toggle {
   display: block;
}
.lc-js #preise-liste:not(.is-expanded) .lc-price-more {
   display: none;
}
/* Kurz hervorheben, wenn ein Link direkt auf ein Paket springt.
   Innen statt aussen: .pricing__box schneidet per clip-path alles ab,
   was ueber den Rand hinausgeht. */
.pricing__box.lc-flash {
   animation: lc-price-flash 1.8s ease-out;
}
@keyframes lc-price-flash {
   0%, 40% { box-shadow: inset 0 0 0 3px var(--tj-color-theme-primary); }
   100%    { box-shadow: inset 0 0 0 3px transparent; }
}