.elementor-kit-6{--e-global-color-primary:#FF5A1F;--e-global-color-secondary:#000000;--e-global-color-text:#F5F5F5;--e-global-color-accent:#A8A8A8;--e-global-color-9e3daa2:#FFFFFF;--e-global-color-95ff162:#141414;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#F5F5F500;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#F5F5F500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */:root {
  --glut: #ff5a1f;
}

/* Abschnitts-Themes: Klassen werden in den Templates an den Containern gesetzt */
.mk-dark { --bg:#000000; --tx:#f5f5f5; --mut:#a8a8a8; --brd:#2a2a2a; --cbg:#101010; --hover:#161616; }
.mk-light { --bg:#ffffff; --tx:#141414; --mut:#5c5c5c; --brd:#e7e7e7; --cbg:#ffffff; --hover:#fafafa; }
.mk-sec { color: var(--tx); }
.mk-sec ::selection { background: var(--glut); color: #fff; }

/* ---------- Typo-Bausteine ---------- */
.mk-sec .eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--glut); display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
}
.mk-sec .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--glut); flex: none; }
.mk-sec h2.sect, .mk-sec .sect {
  font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--tx);
  line-height: 1.22; letter-spacing: -.015em; margin: 0 0 16px;
}
.mk-sec .lede { color: var(--mut); max-width: 62ch; font-size: 1.05rem; line-height: 1.65; margin: 0; }
.mk-sec .glut { color: var(--glut); }
.mk-sec .outline { color: transparent; -webkit-text-stroke: 1.5px var(--tx); }
@supports not (-webkit-text-stroke: 1px #000) { .mk-sec .outline { color: var(--tx); } }
.mk-pagehead h1.big, .mk-sec h1.big {
  font-weight: 800; font-size: clamp(2.1rem, 5.5vw, 3.6rem); color: var(--tx);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.mk-pagehead .crumb { font-size: 13px; color: var(--mut); margin: 0 0 18px; }
.mk-pagehead .crumb a { color: var(--glut); font-weight: 500; text-decoration: none; }
.mk-pagehead .lede { margin-top: 16px; }

/* ---------- Buttons (HTML-Widget-Variante) ---------- */
.mk-btn {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem;
  padding: 14px 30px; border: 2px solid var(--glut); border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.mk-btn-solid { background: var(--glut); color: #fff; }
.mk-btn-solid:hover { background: var(--tx); border-color: var(--tx); color: var(--bg); transform: translateY(-2px); }
.mk-btn-ghost { color: var(--tx); }
.mk-btn-ghost:hover { background: rgba(255,90,31,.12); transform: translateY(-2px); }

/* ---------- Hero (Startseite) ---------- */
.mk-hero .hero-h1 {
  font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 4.8rem); line-height: 1.18;
  letter-spacing: -.02em; color: #fff; margin: 0;
}
.mk-hero .hero-h1 .outline { -webkit-text-stroke: 2px #fff; color: transparent; }
.mk-hero .hero-proof { margin-top: 46px; display: flex; gap: 14px; flex-wrap: wrap; }
.mk-hero .proof {
  display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 18px 10px 14px;
}
.mk-hero .proof-txt { display: flex; flex-direction: column; line-height: 1.3; }
.mk-hero .proof .v { font-weight: 700; font-size: .96rem; color: #fff; }
.mk-hero .proof .v .s { color: var(--glut); }
.mk-hero .proof .k { font-size: 11.5px; color: #b5b5b5; }

/* ---------- Text-Spalten & Stats ---------- */
.txt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.txt-cols p { color: var(--mut); line-height: 1.65; margin: 0; }
.txt-cols p + p { margin-top: 14px; }
.txt-cols p strong { color: var(--tx); }
@media (max-width: 820px) { .txt-cols { grid-template-columns: 1fr; gap: 20px; } }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 54px; }
.stat { border: 1px solid var(--brd); border-radius: 16px; padding: 24px 22px; background: var(--cbg); }
.stat .n { font-weight: 800; font-size: 2rem; color: var(--glut); line-height: 1.1; }
.stat .l { font-size: .9rem; color: var(--mut); margin-top: 4px; }
@media (max-width: 820px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Leistungs-Karten ---------- */
.svc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc {
  background: var(--cbg); border: 1px solid var(--brd); border-radius: 18px;
  padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 13px;
  transition: border-color .2s, transform .2s;
}
.svc:hover { border-color: var(--glut); transform: translateY(-4px); }
.svc:hover .svc-num { color: var(--glut); }
.svc-num { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--mut); transition: color .2s; }
.svc h3 { font-weight: 700; font-size: 1.22rem; line-height: 1.25; color: var(--tx); margin: 0; }
.svc p { color: var(--mut); font-size: .96rem; flex: 1; margin: 0; }
.svc .more { font-size: 13.5px; font-weight: 600; color: var(--tx); text-decoration: none; }
.svc .more::after { content: " →"; color: var(--glut); }
.svc .more:hover { color: var(--glut); }
@media (max-width: 960px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Arbeitsweise ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 50px; }
.mode { border-top: 3px solid var(--glut); padding-top: 20px; }
.mode h3 { font-weight: 700; font-size: 1.3rem; margin: 0 0 8px; color: var(--tx); }
.mode p { color: var(--mut); font-size: .97rem; margin: 0; }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Projektliste ---------- */
.proj-list { display: flex; flex-direction: column; border-top: 1px solid var(--brd); margin-top: 46px; }
.proj {
  display: grid; grid-template-columns: 90px 1fr auto auto; gap: 24px; align-items: center;
  padding: 18px 10px; border-bottom: 1px solid var(--brd); text-decoration: none;
  transition: background .18s, padding-left .18s;
}
.proj:hover { background: var(--hover); padding-left: 20px; }
.proj:hover .arrow { color: var(--glut); transform: translateX(6px); }
.proj .plogo { width: 74px; height: 46px; object-fit: contain; }
.mk-dark .proj .plogo { background: #fff; border-radius: 8px; padding: 4px; }
.proj .name { font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.2; color: var(--tx); }
.proj .tag { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); border: 1px solid var(--brd); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.proj .arrow { font-size: 1.4rem; color: var(--mut); transition: color .18s, transform .18s; }
@media (max-width: 680px) { .proj { grid-template-columns: 60px 1fr auto; } .proj .tag { display: none; } .proj .plogo { width: 60px; height: 40px; } }
.pr-meta { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; }
.pr-meta img { height: 54px; width: auto; }
.mk-dark .pr-meta img { background: #fff; border-radius: 8px; padding: 5px; }
.pr-meta .tag { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); border: 1px solid var(--brd); border-radius: 999px; padding: 6px 14px; }
.pr-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 48px; }

/* ---------- Kundenstimmen-Slider ---------- */
.slider { position: relative; margin-top: 50px; }
.slider-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.slider-track::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 calc(50% - 11px); scroll-snap-align: start;
  background: var(--cbg); border: 1px solid var(--brd); border-radius: 18px;
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 820px) { .quote { flex: 0 0 100%; } }
.quote .stars { color: var(--glut); letter-spacing: 4px; font-size: .95rem; }
.quote p { font-size: 1rem; font-style: italic; color: var(--tx); flex: 1; margin: 0; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--brd); background: #fff; flex: none; }
.quote .who .who-txt { display: flex; flex-direction: column; line-height: 1.35; }
.quote .who b { font-weight: 600; font-size: .98rem; color: var(--tx); }
.quote .who span { font-size: 12.5px; color: var(--mut); }
.slider-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.sbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--brd); background: var(--cbg);
  font-size: 1.1rem; cursor: pointer; color: var(--tx); transition: border-color .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.sbtn:hover { border-color: var(--glut); color: var(--glut); }
.sdots { display: flex; gap: 8px; }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--brd); border: none; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.sdot.on { background: var(--glut); transform: scale(1.25); }
.google-note { margin-top: 20px; font-size: 13px; color: var(--mut); }
.google-note b { color: var(--tx); }

/* ---------- Team (Hover-Wechsel rein per CSS) ---------- */
.team-row { display: flex; gap: 20px; margin-top: 50px; flex-wrap: wrap; }
.member {
  flex: 1 1 190px; border: 1px solid var(--brd); border-radius: 18px; background: var(--cbg);
  padding: 14px 14px 18px; transition: border-color .18s, transform .18s;
}
.member:hover { border-color: var(--glut); transform: translateY(-4px); }
.member .ph { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--hover); margin-bottom: 14px; }
.member .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s, transform .35s; }
.member .ph img.hover-img { opacity: 0; }
.member:hover .ph img.hover-img { opacity: 1; }
.member:hover .ph img.front-img { transform: scale(1.04); }
.member b { font-weight: 700; font-size: 1.12rem; display: block; color: var(--tx); }
.member .role { font-size: 13px; color: var(--mut); }

/* ---------- Features / Schritte / FAQ ---------- */
.sv-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 10px; }
@media (max-width: 720px) { .sv-feat { grid-template-columns: 1fr; } }
.feat { border: 1px solid var(--brd); border-radius: 16px; padding: 26px 24px; background: var(--cbg); }
.feat h4 { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; color: var(--tx); }
.feat p { color: var(--mut); font-size: .95rem; margin: 0; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 3px solid var(--glut); padding-top: 18px; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-weight: 800; font-size: 1.6rem; color: var(--glut); display: block; margin-bottom: 6px; }
.step h4 { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; color: var(--tx); }
.step p { color: var(--mut); font-size: .95rem; margin: 0; }
.faq { margin-top: 10px; border-top: 1px solid var(--brd); }
.faq details { border-bottom: 1px solid var(--brd); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; font-weight: 600; font-size: 1.02rem; color: var(--tx); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--glut); font-size: 1.4rem; font-weight: 600; transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 4px 22px; color: var(--mut); max-width: 70ch; }

/* ---------- CTA-Band & Final ---------- */
.mk-ctaband .cta-flex { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mk-ctaband .cta-h { font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.015em; color: var(--tx); margin: 0; }
.mk-ctaband .cta-p { color: var(--mut); margin: 6px 0 0; max-width: 50ch; }
.mk-final .mega { font-weight: 800; font-size: clamp(2.2rem, 6.5vw, 4.6rem); line-height: 1.18; letter-spacing: -.02em; color: var(--tx); margin: 0; }
.mk-final .final-sub { color: var(--mut); margin: 22px 0 0; max-width: 52ch; font-size: 1.08rem; }
.mk-final .cta-row { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.cform { background: var(--cbg); border: 1px solid var(--brd); border-radius: 20px; padding: 36px 32px; }
.cform .form-note { color: var(--mut); margin: 0; }
.info-card { border: 1px solid var(--brd); border-radius: 20px; padding: 28px 26px; margin-bottom: 20px; background: var(--cbg); }
.info-card h4 { font-weight: 700; font-size: 1.08rem; margin: 0 0 12px; color: var(--tx); }
.info-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; color: var(--mut); font-size: .95rem; margin: 0; padding: 0; }
.info-card ul a { color: var(--tx); border-bottom: 1px solid var(--brd); text-decoration: none; transition: color .15s, border-color .15s; }
.info-card ul a:hover { color: var(--glut); border-color: var(--glut); }

/* ---------- Video ---------- */
.mk-video video, .mk-video .elementor-video { border-radius: 20px; }

/* ---------- Elementor-Formulare im dunklen Bereich ---------- */
.mk-dark .elementor-field-group .elementor-field {
  background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 10px; color: #f5f5f5;
}
.mk-dark .elementor-field-group .elementor-field:focus { border-color: var(--glut); }
.mk-dark .elementor-field-group label { color: #a8a8a8; }/* End custom CSS */