@font-face {
 font-family:'Space Grotesk';
 src:url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
 font-weight:400;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Space Grotesk';
 src:url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
 font-weight:500;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Space Grotesk';
 src:url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
 font-weight:600;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Space Grotesk';
 src:url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
 font-weight:700;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Poppins';
 src:url('fonts/Poppins-Regular.ttf') format('truetype');
 font-weight:400;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Poppins';
 src:url('fonts/Poppins-Medium.ttf') format('truetype');
 font-weight:500;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Poppins';
 src:url('fonts/Poppins-SemiBold.ttf') format('truetype');
 font-weight:600;
 font-style:normal;
 font-display:swap
}

@font-face {
 font-family:'Poppins';
 src:url('fonts/Poppins-Bold.ttf') format('truetype');
 font-weight:700;
 font-style:normal;
 font-display:swap
}

.dark,
:root {
 --shadow-hover:0 0 0 1px var(--primary-color)
}

.theme-toggle-inline,
.theme-toggle-mobile {
 background:0 0;
 cursor:pointer;
 height:36px;
 transition:.3s
}

*,
body {
 margin:0;
 padding:0
}

body,
html,
main,
section {
 width:100%
}

.checkbox-label input[type=checkbox],
.form-checkbox input[type=checkbox] {
 margin-top:.25rem;
 margin-right:.5rem
}

.dropdown-menu,
.footer-section ul,
.nav-menu {
 list-style:none
}

:root {
 --primary-color:#FF5722;
 --primary-dark:#E64A19;
 --secondary-color:#757575;
 --text-color:#212121;
 --text-light:#616161;
 --bg-light:#f5f5f5;
 --bg-white:#ffffff;
 --border-color:#e0e0e0;
 --border-light:#f0f0f0;
 --gray-dark:#424242;
 --gray-medium:#9E9E9E;
 --shadow:none;
 --max-width:1200px;
 --line-width:1px;
 --card-bg:#ffffff;
 --nav-bg:#ffffff;
 --footer-bg:#212121;
 --input-bg:#ffffff;
 --code-bg:#f5f5f5;
 --dropdown-bg:#ffffff;
 --text-xs:0.75rem;
 --text-sm:0.875rem;
 --text-base:0.9375rem;
 --text-lg:1rem;
 --text-xl:1.125rem;
 --text-2xl:1.375rem;
 --text-3xl:1.75rem;
 --text-4xl:2.25rem
}

.dark {
 --text-color:#e0e0e0;
 --text-light:#b0b0b0;
 --bg-light:#1a1a1a;
 --bg-white:#0d0d0d;
 --border-color:#404040;
 --border-light:#2a2a2a;
 --gray-dark:#e0e0e0;
 --gray-medium:#909090;
 --card-bg:#1f1f1f;
 --nav-bg:#1a1a1a;
 --footer-bg:#0d0d0d;
 --input-bg:#2a2a2a;
 --code-bg:#1a1a1a;
 --dropdown-bg:#1f1f1f;
 --shadow:0 2px 8px rgba(0, 0, 0, 0.6)
}

.dark .logo-dark,
.form-step.active,
.logo-light {
 display:block
}

.contact-separator,
.dark .logo-light,
.logo-dark,
.logo-subtext,
.logo-text,
.option-radio input[type=radio] {
 display:none
}

.theme-toggle-inline,
.theme-toggle-nav {
 display:flex;
 align-items:center
}

.theme-toggle-inline {
 border:1px solid var(--border-color);
 border-radius:20px;
 padding:6px 12px;
 justify-content:center;
 font-size:18px;
 min-width:50px;
 position:relative
}

.theme-toggle-mobile,
body {
 font-size:var(--text-base);
 position:relative
}

.theme-toggle-inline:hover,
.theme-toggle-mobile:hover {
 background:var(--bg-light);
 border-color:var(--primary-color)
}

.tech-term[title]:hover::after,
.tooltip::after {
 content:attr(title);
 bottom:125%;
 background:#333;
 color:#fff;
 padding:.5rem 1rem;
 font-size:.875rem;
 z-index:1000;
 pointer-events:none
}

.theme-toggle-mobile {
 display:none;
 border:1px solid var(--border-color);
 border-radius:20px;
 padding:6px 10px;
 align-items:center;
 justify-content:center;
 margin-left:auto;
 margin-right:10px;
 min-width:45px
}

.theme-toggle-inline .moon-icon,
.theme-toggle-inline .sun-icon,
.theme-toggle-mobile .moon-icon,
.theme-toggle-mobile .sun-icon {
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 transition:opacity .3s,transform .3s
}

.dark .theme-toggle-inline .moon-icon,
.dark .theme-toggle-mobile .moon-icon,
.theme-toggle-inline .sun-icon,
.theme-toggle-mobile .sun-icon {
 opacity:1;
 transform:translate(-50%,-50%) scale(1) rotate(0)
}

.dark .theme-toggle-inline .sun-icon,
.dark .theme-toggle-mobile .sun-icon,
.theme-toggle-inline .moon-icon,
.theme-toggle-mobile .moon-icon {
 opacity:0;
 transform:translate(-50%,-50%) scale(0) rotate(180deg)
}

.dark .theme-toggle-inline,
.dark .theme-toggle-mobile,
.dark td {
 border-color:var(--border-color)
}

.dark .faq-question:hover,
.dark .theme-toggle-inline:hover,
.dark .theme-toggle-mobile:hover {
 background:rgba(255,87,34,.1);
 border-color:var(--primary-color)
}

@media (max-width:1024px) {
 .theme-toggle-nav {
 display:none!important
}

.theme-toggle-mobile {
 display:flex
}

}

@media (min-width:1025px) {
 .theme-toggle-mobile {
 display:none!important
}

}

.tech-term,
.tooltip,
h2 {
 display:inline-block
}

.tooltip {
 border-bottom:1px dotted var(--text-light);
 cursor:help
}

.tooltip::after {
 border-radius:0;
 white-space:nowrap;
 max-width:300px;
 opacity:0;
 visibility:hidden;
 transition:opacity .3s,visibility .3s
}

.features::before,
.hero::after,
.nav-menu a.active::after,
.navbar::after {
 bottom:0;
 content:'';
 left:0;
 right:0
}

.tech-term.active .tooltip,
.tech-term:hover .tooltip,
.tooltip:hover::after {
 opacity:1;
 visibility:visible
}

.tech-term {
 border-bottom:1px dotted var(--gray-medium);
 font-weight:500
}

.tech-term[title]:hover::after {
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 line-height:1.4;
 white-space:normal;
 max-width:250px;
 min-width:150px;
 opacity:1;
 visibility:visible;
 font-weight:400
}

* {
 box-sizing:border-box
}

html {
 overflow-y:scroll
}

body {
 font-family:'Poppins',system-ui,-apple-system,sans-serif;
 line-height:1.6;
 color:var(--text-color);
 background-color:var(--bg-white);
 letter-spacing:-.01em;
 padding-bottom:env(safe-area-inset-bottom);
 padding-left:env(safe-area-inset-left);
 padding-right:env(safe-area-inset-right)
}

header {
 position:sticky;
 top:0;
 z-index:1000;
 background:var(--header-bg);
 box-shadow:0 2px 4px rgba(0,0,0,.05);
 transition:box-shadow .3s ease
}

/* Smooth transition for scrolled state */
header.scrolled {
 box-shadow:0 2px 10px rgba(0,0,0,.1)
}

.nav-wrapper {
 padding:1rem 0;
 transition:padding .3s ease
}

header.scrolled .nav-wrapper {
 padding:.5rem 0
}

.logo img {
 height:50px;
 transition:transform .3s ease;
 will-change:transform
}

header.scrolled .logo img {
 transform:scale(0.85)
}

.container {
 max-width:var(--max-width);
 margin:0 auto;
 padding:0 20px;
 width:100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 font-weight:600;
 line-height:1.2;
 margin-bottom:1rem;
 letter-spacing:-.02em
}

.form-group select option,
footer {
 font-family:'Poppins',system-ui,-apple-system,sans-serif
}

.heading-with-lines,
h2 {
 margin-bottom:2rem;
 text-align:center
}

h1 {
 font-size:var(--text-4xl);
 font-weight:700
}

h2 {
 font-size:var(--text-3xl);
 position:relative;
 width:auto
}

h2::after,
h2::before {
 content:'';
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 width:40px;
 height:1px;
 background:var(--primary-color)
}

h2::before {
 right:calc(100% + 20px)
}

h2::after {
 left:calc(100% + 20px)
}

.heading-with-lines {
 position:relative;
 display:flex;
 justify-content:center;
 align-items:center;
 overflow:hidden
}

.heading-with-lines h2 {
 display:inline-block;
 width:auto;
 position:relative
}

h3 {
 font-size:var(--text-2xl)
}

.feature-card h3,
p {
 margin-bottom:1rem
}

a {
 color:var(--primary-color);
 text-decoration:none;
 transition:color .3s
}

.dark a:hover,
a:hover {
 color:var(--primary-dark)
}

.navbar {
 background:var(--nav-bg);
 box-shadow:0 1px 3px rgba(0,0,0,.1);
 border-bottom:1px solid var(--border-color);
 position:relative
}

.cta-button,
.has-dropdown,
.nav-menu a {
 position:relative
}

.nav-wrapper {
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:1rem 0
}

.logo {
 display:flex;
 align-items:center;
 gap:1rem
}

.logo img {
 height:50px;
 width:auto;
 transition:transform .3s ease;
 transform-origin:left center
}

.mobile-menu-toggle {
 display:none;
 flex-direction:column;
 background:0 0;
 border:none;
 cursor:pointer;
 padding:10px;
 margin-right:.5rem;
 width:44px;
 height:44px;
 min-width:44px;
 min-height:44px;
 justify-content:center;
 align-items:center;
 position:relative;
 z-index:1001;
 -webkit-tap-highlight-color:transparent
}

.mobile-menu-toggle span {
 width:25px;
 height:3px;
 background:var(--text-color);
 margin:3px 0;
 transition:.3s;
 transform-origin:center;
 display:block;
 pointer-events:none
}

.mobile-menu-toggle.menu-open span:first-child {
 transform:rotate(45deg) translateY(8px)
}

.mobile-menu-toggle.menu-open span:nth-child(2) {
 opacity:0;
 transform:scaleX(0)
}

.mobile-menu-toggle.menu-open span:nth-child(3) {
 transform:rotate(-45deg) translateY(-8px)
}

.nav-menu {
 display:flex;
 gap:2rem;
 align-items:center
}

.nav-menu a {
 color:var(--text-color);
 font-weight:500;
 padding:.5rem 0
}

.dark .contact-link,
.dark .faq-icon,
.dark .footer-bottom a:hover,
.dark .nav-menu a.active,
.dark .nav-menu a:hover,
.dark .option-card.selected .option-title,
.dark a,
.nav-menu a:hover,
.service-icon,
.tech-term:hover {
 color:var(--primary-color)
}

.nav-menu a.active,
.success-steps li strong {
 color:var(--primary-color);
 font-weight:600
}

.cta-button {
 background:var(--primary-color);
 color:#fff!important;
 padding:.75rem 1.5rem!important;
 border-radius:0;
 transition:.3s;
 border:2px solid var(--primary-color)!important;
 border-bottom:2px solid var(--primary-color)!important
}

.cta-button:hover {
 background:#fff;
 border:2px solid var(--primary-color)!important;
 transform:translateY(-2px);
 color:var(--primary-color)!important;
 box-shadow:0 4px 8px rgba(255,87,34,.2)
}

.dropdown-arrow {
 font-size:var(--text-xs);
 margin-left:.3rem;
 transition:transform .3s;
 display:inline-block
}

.dropdown-menu,
.dropdown-menu li {
 margin:0;
 padding:0
}

.has-dropdown:hover .dropdown-arrow {
 transform:rotate(180deg)
}

.dropdown-menu {
 visibility:hidden;
 opacity:0;
 position:absolute;
 top:calc(100% + .5rem);
 left:0;
 background:#fff;
 min-width:220px;
 box-shadow:0 4px 12px rgba(0,0,0,.1);
 border:1px solid rgba(0,0,0,.05);
 border-top:3px solid var(--primary-color);
 z-index:1000;
 transform:translateY(-10px);
 transition:none
}

.has-dropdown:hover .dropdown-menu {
 visibility:visible;
 opacity:1;
 transform:translateY(0);
 transition:opacity .2s ease,transform .2s ease
}

.dropdown-menu a {
 display:block;
 padding:.75rem 1.25rem!important;
 color:var(--text-color);
 transition:background .2s,color .2s;
 white-space:nowrap
}

.dropdown-menu a:hover {
 background:var(--bg-light);
 color:var(--primary-color)
}

.d-none,
.dropdown-menu a::after {
 display:none!important
}

.hero {
 background:linear-gradient(135deg,rgba(66,66,66,.7) 0,rgba(33,33,33,.7) 100%) center center/cover no-repeat,url('images/Festung-bild-neu.jpg') center center/cover no-repeat;
 color:#fff;
 padding:5rem 0;
 text-align:center;
 position:relative
}

.webp .hero,
.webp .hero-small {
 background-image:linear-gradient(135deg,rgba(66,66,66,.7) 0,rgba(33,33,33,.7) 100%),url('images/Festung-bild-neu.webp')
}

.hero::after {
 position:absolute;
 height:4px;
 background:var(--primary-color)
}

.btn,
.features,
.hero-buttons,
.hero-small {
 position:relative
}

.hero-small {
 padding:3rem 0;
 background:linear-gradient(135deg,rgba(66,66,66,.7) 0,rgba(33,33,33,.7) 100%),url('images/Festung-bild-neu.jpg') center center/cover
}

.hero-small .hero-description {
 background:rgba(0,0,0,.5);
 padding:1rem 2rem;
 text-shadow:2px 2px 4px rgba(0,0,0,.7);
 border:1px solid rgba(255,255,255,.2);
 border-left:3px solid var(--primary-color);
 display:inline-block;
 position:relative
}

.hero-content h1 {
 color:#fff;
 margin-bottom:1.5rem;
 text-shadow:2px 2px 4px rgba(0,0,0,.5)
}

.hero-description {
 font-size:var(--text-lg);
 max-width:800px;
 margin:0 auto 2rem;
 opacity:.95;
 text-shadow:1px 1px 2px rgba(0,0,0,.5);
 background:rgba(0,0,0,.3);
 padding:1rem;
 border-radius:0;
 backdrop-filter:blur(5px);
 -webkit-backdrop-filter:blur(5px);
 -webkit-backdrop-filter:blur(5px);
 border:1px solid rgba(255,255,255,.1);
 border-left:3px solid var(--primary-color)
}

.btn,
.btn-dark,
.btn-ghost,
.btn-outline {
 padding:.875rem 2rem;
 font-weight:600;
 letter-spacing:1px;
 text-transform:uppercase
}

.btn,
.feature-card {
 border-radius:0;
 transition:.3s
}

.hero-buttons {
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
 z-index:1
}

.btn {
 display:inline-block;
 cursor:pointer;
 border:none;
 font-size:var(--text-lg)
}

.btn-primary {
 background:var(--primary-color);
 color:#fff;
 transition:.3s;
 border:2px solid var(--primary-color)
}

.btn-primary:not(:disabled):hover {
 background:#fff;
 color:var(--primary-color);
 border:2px solid var(--primary-color);
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(255,87,34,.3)
}

.btn-primary:disabled,
.btn-primary[disabled] {
 background:var(--primary-color)!important;
 color:#fff!important;
 opacity:.7;
 cursor:not-allowed;
 transform:none!important;
 pointer-events:none
}

.btn-dark:hover,
.btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover {
 transform:translateY(-2px)
}

.btn-secondary {
 background:#fff;
 color:var(--text-color);
 border:2px solid var(--text-color);
 transition:.3s
}

.btn-secondary:hover {
 background:var(--text-color);
 color:#fff;
 box-shadow:0 4px 6px rgba(33,33,33,.2)
}

.btn-outline {
 background:0 0;
 color:var(--primary-color);
 border:2px solid var(--primary-color);
 transition:.3s
}

.btn-outline:hover {
 background:var(--primary-color);
 color:#fff;
 box-shadow:0 4px 8px rgba(255,87,34,.2)
}

.btn-ghost {
 background:#fff;
 color:var(--text-color);
 border:2px solid #e0e0e0;
 transition:.3s
}

.btn-ghost:hover {
 background:var(--bg-light);
 border-color:var(--text-color);
 box-shadow:0 4px 6px rgba(0,0,0,.1)
}

.btn-dark {
 background:var(--text-color);
 color:#fff;
 border:2px solid var(--text-color);
 transition:.3s
}

.btn-dark:hover {
 background:#424242;
 border-color:#424242;
 box-shadow:0 4px 8px rgba(33,33,33,.3)
}

.btn-large {
 padding:1rem 2.5rem;
 font-size:var(--text-xl)
}

.btn-small {
 padding:.625rem 1.5rem;
 font-size:var(--text-sm);
 letter-spacing:.5px
}

.features {
 padding:5rem 0;
 background:var(--bg-light)
}

.feature-card,
.service-card {
 background:#fff;
 text-align:center
}

.features::before {
 position:absolute;
 top:0;
 background-image:linear-gradient(var(--border-light) 1px,transparent 1px),linear-gradient(90deg,var(--border-light) 1px,transparent 1px);
 background-size:50px 50px;
 opacity:.3;
 z-index:0
}

.cta-section,
.feature-card,
.feature-icon,
.service-card,
.services-overview,
.testimonial {
 position:relative
}

.features .container {
 position:relative;
 z-index:1
}

.features-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2rem
}

.feature-card {
 padding:2rem;
 box-shadow:none;
 border:1px solid var(--border-color);
 border-top:3px solid var(--primary-color)
}

.reference-card,
.service-card {
 border-radius:0;
 transition:.3s
}

.feature-card::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:linear-gradient(90deg,transparent,var(--border-light),transparent)
}

.feature-card:hover {
 transform:translateY(-5px);
 border-color:var(--text-color);
 border-top-width:3px;
 border-top-color:var(--primary-color);
 background:var(--bg-white);
 box-shadow:0 10px 30px rgba(0,0,0,.1)
}

.feature-icon {
 color:var(--primary-color);
 margin-bottom:1.5rem
}

.dark .footer-bottom a,
.dark .footer-bottom p,
.dark .info-card small,
.dark .option-card p,
.dark .option-card.selected p,
.dark .popup-content p,
.dark .step-subtitle,
.dark .testimonial-box .testimonial-role,
.dark cite,
.feature-card p,
.info-card small,
.reference-industry,
.service-card p {
 color:var(--text-light)
}

.feature-icon::after {
 content:'';
 position:absolute;
 bottom:-10px;
 left:50%;
 transform:translateX(-50%);
 width:30px;
 height:2px;
 background:var(--primary-color)
}

.services-overview {
 padding:5rem 0
}

.services-overview::after,
.services-overview::before {
 content:'';
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 width:1px;
 height:30px;
 background:var(--border-color)
}

.services-overview::before {
 top:0
}

.services-overview::after {
 bottom:0
}

.services-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:1.5rem
}

.service-card {
 padding:2rem;
 border:1px solid var(--border-color);
 display:block;
 color:var(--text-color);
 position:relative;
 overflow:hidden;
 transition:transform .3s ease, border-color .3s ease, background .3s ease
}

/* Animated lines inside the card */
.service-card::before,
.service-card::after {
 content:'';
 position:absolute;
 width:100%;
 height:2px;
 background:var(--primary-color);
 z-index:1;
 transition:transform .3s ease
}

/* Top line - slides from left */
.service-card::before {
 top:0;
 left:0;
 transform:translateX(-100%)
}

/* Bottom line - slides from right */
.service-card::after {
 bottom:0;
 right:0;
 transform:translateX(100%)
}

/* On hover: lines slide in from opposite sides */
.service-card:hover::before {
 transform:translateX(0)
}

.service-card:hover::after {
 transform:translateX(0)
}

.service-card:hover {
 border-color:var(--text-color);
 transform:translateY(-5px) !important;
 border-top-color:var(--primary-color);
 border-bottom-color:var(--primary-color);
 background:linear-gradient(to bottom,rgba(0,0,0,.02),transparent)
}

.cta-section::before,
.testimonial::before {
 position:absolute;
 left:50%;
 transform:translateX(-50%)
}

.service-card h3 {
 font-size:var(--text-xl);
 margin-bottom:.75rem
}

.service-card p {
 font-size:var(--text-sm)
}

.testimonial {
 padding:4rem 0;
 background:var(--bg-light)
}

.testimonial::before {
 content:'"';
 top:0.5rem;
 font-size:4rem;
 color:var(--primary-color);
 opacity:.3;
 font-family:Georgia,serif
}

.testimonial-content {
 max-width:800px;
 margin:0 auto;
 text-align:center
}

.testimonial blockquote {
 font-size:var(--text-xl);
 font-style:italic;
 color:var(--text-color)
}

.testimonial cite {
 display:block;
 margin-top:1rem;
 font-style:normal;
 color:var(--text-light)
}

.cta-section {
 padding:5rem 0;
 background:linear-gradient(135deg,#616161 0,#424242 100%);
 color:#fff;
 text-align:center
}

.cta-section::before {
 content:'';
 top:0;
 width:60px;
 height:4px;
 background:var(--primary-color)
}

.contact-form::after,
.contact-form::before {
 width:30px;
 height:30px;
 position:absolute;
 content:''
}

.cta-content h2,
.footer-bottom a:hover,
.footer-section a:hover {
 color:#fff
}

.cta-content p {
 font-size:var(--text-xl);
 margin-bottom:2rem;
 opacity:.95
}

.contact-section,
.service-detail {
 padding:4rem 0
}

.checkbox-label:hover,
.dark .progress-bar,
.dark .testimonial,
.service-detail:nth-child(2n) {
 background:var(--bg-light)
}

.service-detail h3 {
 color:var(--text-color);
 margin-bottom:1rem;
 padding-bottom:.5rem;
 border-bottom:3px solid var(--primary-color);
 display:inline-block
}

.service-intro {
 font-size:var(--text-xl);
 font-weight:500;
 margin-bottom:1rem
}

.service-benefit {
 background:#fff;
 padding:1rem;
 border-left:4px solid var(--primary-color);
 margin:1.5rem 0
}

.reference-quote,
.service-cta {
 margin-top:1.5rem
}

.reference-grid {
 display:grid;
 gap:3rem;
 padding:3rem 0
}

.reference-card {
 background:#fff;
 padding:2rem;
 box-shadow:none;
 border:1px solid var(--border-color);
 border-left:4px solid transparent;
 position:relative
}

.reference-quote,
.value-item {
 border-radius:0;
 position:relative
}

.reference-card::before {
 content:'';
 position:absolute;
 top:-1px;
 left:-1px;
 right:-1px;
 bottom:-1px;
 background:linear-gradient(45deg,var(--primary-color),transparent 30%);
 opacity:0;
 transition:opacity .3s;
 z-index:-1
}

.footer-bottom::before,
.form-submit:hover,
.team-card::before,
.value-item h3::before {
 background:var(--primary-color)
}

.reference-card:hover {
 border-left-color:var(--primary-color)
}

.reference-card:hover::before {
 opacity:.05
}

.reference-header {
 border-bottom:1px solid var(--border-color);
 padding-bottom:1rem;
 margin-bottom:1.5rem
}

.reference-client {
 font-size:var(--text-xl);
 font-weight:600;
 margin-bottom:.25rem
}

.reference-content h4 {
 color:var(--primary-color);
 font-size:var(--text-lg);
 margin-top:1.5rem;
 margin-bottom:.5rem
}

.reference-quote {
 background:var(--bg-light);
 padding:1.5rem;
 font-style:italic;
 border-left:2px solid var(--primary-color)
}

.reference-quote::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 border:1px solid var(--border-light);
 pointer-events:none
}

.about-intro {
 padding:4rem 0;
 text-align:center
}

.about-intro h1,
.success-animation {
 margin-bottom:2rem
}

.values-section {
 padding:3rem 0;
 background:var(--bg-light)
}

.values-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:2rem;
 margin-top:2rem
}

.value-item {
 background:#fff;
 padding:1.5rem;
 border:1px solid var(--border-color);
 transition:.3s
}

.value-item:hover {
 border-color:var(--gray-medium);
 transform:translateX(5px)
}

.value-item h3 {
 color:var(--text-color);
 font-size:var(--text-xl);
 margin-bottom:.75rem;
 position:relative;
 padding-left:1.5rem
}

.value-item h3::before {
 content:'';
 position:absolute;
 left:0;
 top:50%;
 transform:translateY(-50%);
 width:4px;
 height:20px
}

.content-section,
.team-section {
 padding:3rem 0
}

.contact-grid {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:3rem;
 margin:2rem auto 0;
 max-width:1000px;
 padding:0 1rem
}

.contact-form,
.contact-info {
 padding:2rem;
 position:relative
}

.contact-info {
 background:var(--bg-light);
 border-radius:0;
 border:1px solid var(--border-color)
}

.contact-info::after {
 content:'';
 position:absolute;
 top:10px;
 left:10px;
 right:-10px;
 bottom:-10px;
 border:1px solid var(--border-light);
 z-index:-1
}

.contact-details {
 margin:1.5rem 0
}

.contact-details p {
 margin-bottom:.5rem
}

.contact-form {
 background:#fff;
 border-radius:0;
 box-shadow:none;
 border:1px solid var(--border-color)
}

.contact-form::before {
 top:-1px;
 left:-1px;
 border-top:2px solid var(--primary-color);
 border-left:2px solid var(--primary-color)
}

.contact-form::after {
 bottom:-1px;
 right:-1px;
 border-bottom:2px solid var(--primary-color);
 border-right:2px solid var(--primary-color)
}

.form-group input,
.form-group select,
.form-group textarea {
 width:100%;
 padding:.75rem;
 border:1px solid var(--border-color);
 border-radius:0;
 font-size:16px; /* iOS zoom prevention */
 font-family:'Poppins',system-ui,-apple-system,sans-serif;
 transition:.3s;
 background:#fff
}

.error-404-number,
.terminal-box {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif
}

.form-group select option {
 font-size:var(--text-sm);
 padding:.5rem
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
 outline:0;
 border-color:var(--primary-color);
 box-shadow:inset 0 0 0 1px var(--primary-color);
 background:linear-gradient(to right,rgba(255,87,34,.02),transparent)
}

.form-group textarea {
 resize:vertical;
 min-height:120px
}

.form-checkbox {
 display:flex;
 align-items:flex-start;
 margin-bottom:1.5rem
}

.form-submit {
 width:100%;
 padding:1rem;
 background:var(--text-color);
 color:#fff;
 border:1px solid var(--text-color);
 border-radius:0;
 font-size:var(--text-lg);
 font-weight:600;
 cursor:pointer;
 transition:.3s;
 text-transform:uppercase;
 letter-spacing:1px;
 position:relative
}

.form-submit:hover {
 border-color:var(--primary-color);
 transform:translateY(-2px);
 box-shadow:0 5px 15px rgba(255,87,34,.3);
 color:#fff
}

footer {
 background:var(--gray-dark);
 color:#fff;
 padding:0;
 padding-bottom:env(safe-area-inset-bottom);
 position:relative;
 overflow:hidden
}

.footer-top-accent {
 height:3px;
 background:var(--primary-color)
}

footer .container {
 position:relative;
 z-index:1;
 padding-top:2rem;
 padding-bottom:1rem
}

.footer-content {
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 gap:3rem;
 margin-bottom:2rem
}

.footer-logo {
 height:50px;
 margin-bottom:1rem;
 filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))
}

.footer-tagline {
 font-size:var(--text-sm);
 opacity:0.95;
 line-height:1.4
}

.footer-description {
 font-size:var(--text-sm);
 margin-top:0.5rem;
 opacity:0.8
}

.footer-section h3,
.footer-section h4 {
 color:#fff;
 margin-bottom:1rem;
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 font-size:var(--text-lg);
 text-transform:uppercase;
 letter-spacing:.05em;
 position:relative;
 padding-bottom:0.5rem
}

.footer-section h4::after {
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:30px;
 height:2px;
 background:var(--primary-color)
}

.footer-contact p,
.footer-section ul li {
 margin-bottom:.25rem;
 font-size:var(--text-sm);
 line-height:1.4
}

.footer-contact p {
 opacity:.9
}

.footer-bottom p,
.footer-bottom p:first-child,
.footer-bottom p:last-child {
 font-size:var(--text-sm)
}

.contact-link,
.footer-contact-link {
 color:inherit!important;
 text-decoration:none!important;
 cursor:pointer;
 opacity:1!important
}

.contact-link:active,
.contact-link:focus,
.contact-link:hover,
.contact-link:visited,
.footer-contact-link:active,
.footer-contact-link:focus,
.footer-contact-link:hover,
.footer-contact-link:visited {
 color:inherit!important;
 text-decoration:none!important;
 opacity:1!important;
 outline:0
}

.footer-section a {
 color:rgba(255,255,255,.8)
}

.footer-bottom,
.footer-bottom a {
 color:rgba(255,255,255,.6)
}

.footer-bottom {
 text-align:center;
 padding-top:.8rem;
 padding-bottom:.5rem;
 border-top:1px solid rgba(255,255,255,.1);
 position:relative;
 background:transparent
}

.footer-bottom p {
 margin:.2rem 0;
 line-height:1.4
}

.footer-bottom::before {
 content:'';
 position:absolute;
 top:0;
 left:50%;
 transform:translateX(-50%);
 width:100px;
 height:1px
}

@media (max-width:1024px) {
 .dropdown-menu a,
.nav-menu a {
 display:block;
 text-align:center
}

.mobile-menu-toggle {
 display:flex;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}

.mobile-menu-toggle:active,
.mobile-menu-toggle:hover {
 background:rgba(0,0,0,.05);
 border-radius:4px
}

.nav-menu {
 display:none;
 position:absolute;
 top:100%;
 left:0;
 right:0;
 background:var(--nav-bg);
 box-shadow:0 4px 6px rgba(0,0,0,.1);
 padding:1rem 0;
 z-index:999;
 flex-direction:column;
 gap:0;
 align-items:center;
 max-height:calc(100vh - 80px);
 max-height:calc(100svh - 80px);
 max-height:calc(100dvh - 80px);
 overflow-y:visible
}

.nav-menu.active {
 display:flex
}

.nav-menu li {
 margin:0;
 padding:.5rem 1rem;
 width:100%;
 text-align:center
}

.nav-menu a {
 padding:.5rem 0;
 width:100%
}

.nav-menu .cta-button {
 margin:.5rem auto;
 display:inline-block;
 text-align:center
}

.logo img {
 height:40px
}

.dropdown-arrow {
 display:inline-block;
 margin-left:.3rem;
 font-size:.8em;
 transition:transform .3s
}

.has-dropdown.active .dropdown-arrow {
 transform:rotate(180deg)
}

.has-dropdown .dropdown-menu {
 display:none;
 position:static;
 transform:none;
 box-shadow:none;
 border:none;
 border-top:none;
 background:rgba(0,0,0,.05);
 padding:.5rem 0;
 margin-top:.5rem;
 transition:none;
 visibility:visible;
 opacity:1;
 width:100%
}

.has-dropdown.active .dropdown-menu {
 display:block!important;
 visibility:visible!important;
 opacity:1!important
}

.dropdown-menu li {
 padding:0;
 margin:0
}

.dropdown-menu a {
 padding:.75rem 2rem!important;
 font-size:var(--text-sm)
}

.dropdown-menu a:hover {
 background:rgba(255,102,0,.1);
 color:var(--primary-color)
}

* {
 max-width:100vw
}

h2::after,
h2::before {
 width:20px
}

h2::before {
 right:calc(100% + 10px)
}

h2::after {
 left:calc(100% + 10px)
}

.features-grid,
.option-grid,
.services-grid {
 grid-template-columns:repeat(2,1fr);
 padding:0 1rem
}

.contact-grid {
 grid-template-columns:1fr;
 gap:2.5rem;
 max-width:700px
}

.contact-form,
.contact-info {
 padding:2rem
}

}

@media (max-width:768px) {
 .contact-grid,
.features-grid,
.footer-content,
.services-grid {
 grid-template-columns:1fr
}

.hero {
 background-attachment:scroll;
 padding:3rem 0
}

h1 {
 font-size:2rem
}

h2 {
 font-size:1.5rem
}

.logo img {
 height:40px
}

.contact-info::after,
h2::after,
h2::before {
 display:none
}

.contact-grid {
 gap:2rem;
 padding:0 1rem
}

.contact-form,
.contact-info {
 padding:1.5rem
}

.contact-details {
 margin:1rem 0
}

.hero-buttons {
 flex-direction:column;
 align-items:center
}

.footer-content {
 text-align:center
}

}

.max-width-800 {
 max-width:800px;
 margin:0 auto
}

.legal-text,
.max-width-900 {
 max-width:900px;
 margin:0 auto
}

.content-box,
.content-box-light {
 padding:2rem;
 border:1px solid var(--border-color);
 margin-bottom:2rem
}

.content-box {
 background:#fff
}

.content-box-light {
 background:var(--bg-light)
}

.section-title {
 font-size:var(--text-2xl);
 margin-bottom:1.5rem;
 border-bottom:2px solid var(--primary-color);
 padding-bottom:.5rem
}

.faq-item,
.team-card,
.terminal-box {
 border:1px solid var(--border-color)
}

.faq-item:hover,
.option-card.selected,
.option-card:hover {
 border-color:var(--primary-color)
}

.subsection-title {
 font-size:var(--text-xl);
 margin-bottom:1rem;
 color:var(--text-color)
}

.faq-category {
 margin-bottom:3rem
}

.faq-item {
 transition:.3s
}

.faq-item:hover {
 transform:translateX(5px)
}

.team-card {
 background:#fff;
 padding:2rem;
 margin-bottom:2rem;
 position:relative
}

.team-card::before {
 content:'';
 position:absolute;
 left:0;
 top:0;
 bottom:0;
 width:4px
}

.error-404 {
 padding:5rem 0;
 min-height:70vh;
 min-height:70svh;
 min-height:70dvh;
 display:flex;
 align-items:center
}

.error-404-number {
 font-size:10rem;
 font-weight:700;
 color:var(--primary-color);
 line-height:1;
 margin-bottom:1rem
}

.terminal-box {
 background:var(--gray-dark);
 color:#0f0;
 padding:1.5rem;
 text-align:left;
 margin:2rem auto;
 max-width:600px
}

.step-form-section {
 padding:4rem 0;
 background:var(--gray-light)
}

.step-form-container {
 max-width:750px;
 margin:0 auto;
 background:var(--card-bg);
 border-radius:0;
 box-shadow:var(--box-shadow);
 padding:1.5rem;
 border:1px solid var(--border-color)
}

.progress-bar {
 position:relative;
 height:32px;
 background:var(--bg-light);
 border-radius:0;
 margin-bottom:1.25rem;
 border:1px solid var(--border-color);
 box-shadow:none
}

.progress-fill {
 position:absolute;
 left:0;
 top:0;
 height:100%;
 background:var(--primary-color);
 border-radius:0;
 transition:width .5s;
 width:14.28%
}

.progress-text {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 font-weight:600;
 color:var(--text-color);
 font-size:.85rem;
 z-index:2;
 background:0 0;
 letter-spacing:.2px
}

.form-step {
 display:none;
 animation:.3s fadeIn
}

.form-step h2 {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 color:var(--text-color);
 font-size:var(--text-2xl);
 margin-bottom:.5rem;
 text-align:center
}

.step-subtitle {
 color:var(--text-light);
 text-align:center;
 margin-bottom:1.25rem;
 font-size:var(--text-sm)
}

.option-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 gap:.75rem;
 margin-bottom:1.5rem
}

.option-card {
 background:#fff;
 border:2px solid var(--border-color);
 border-radius:0;
 padding:1rem .75rem;
 cursor:pointer;
 transition:var(--transition);
 text-align:center;
 position:relative;
 overflow:hidden
}

.option-card:hover {
 transform:translateY(-3px);
 box-shadow:var(--box-shadow-hover)
}

.option-card.selected {
 background:#fff;
 color:var(--text-color);
 border-width:2px
}

.option-card.selected h3 {
 color:var(--primary-color);
 font-weight:600
}

.dark .contact-grid,
.dark .cta-content,
.dark .info-card strong,
.dark .nav-menu a,
.dark .option-title,
.dark .popup-content h2,
.dark .testimonial-box .testimonial-author,
.dark .testimonial-box p,
.dark .testimonial-content,
.dark blockquote,
.dark ol li,
.dark p,
.dark strong,
.dark ul li,
.option-card.selected p {
 color:var(--text-color)
}

.option-icon {
 font-size:var(--text-2xl);
 margin-bottom:.4rem
}

.option-title,
.service-card-title {
 font-size:1.25rem;
 color:var(--text-color);
 font-weight:600
}

.option-card h3 {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 font-size:var(--text-sm);
 margin-bottom:.25rem;
 color:#212529
}

.option-card p {
 font-size:var(--text-xs);
 color:#6c757d;
 margin:0;
 line-height:1.3
}

.option-list {
 max-width:500px;
 margin:0 auto 2rem
}

.option-radio {
 display:block;
 background:var(--card-bg);
 border:2px solid var(--border-color);
 border-radius:0;
 padding:.7rem 1rem;
 margin-bottom:.5rem;
 cursor:pointer;
 transition:.3s
}

.option-radio:hover {
 border-color:var(--text-color);
 background:var(--bg-light)
}

.option-radio input[type=radio]:checked+span {
 font-weight:600
}

.option-radio input[type=radio]:checked~.option-radio,
.option-radio:has(input:checked) {
 background:var(--card-bg);
 color:var(--primary-color);
 border-color:var(--primary-color);
 border-width:2px;
 font-weight:600
}

.option-radio span {
 display:block;
 font-size:.9rem
}

.option-title {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 margin-bottom:.5rem
}

.service-card-title {
 margin-bottom:.75rem;
 line-height:1.2
}

.form-fields {
 max-width:500px;
 margin:0 auto
}

.form-group {
 margin-bottom:1.25rem
}

.form-group label {
 display:block;
 margin-bottom:.4rem;
 font-weight:500;
 color:#495057;
 font-size:.85rem
}

.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=text],
.form-group textarea {
 width:100%;
 padding:.6rem;
 font-size:16px; /* iOS zoom prevention */
 border:1px solid #e9ecef;
 border-radius:0;
 font-size:.9rem;
 font-family:'Poppins',system-ui,-apple-system,sans-serif;
 transition:border-color .3s
}

.form-group input:focus,
.form-group textarea:focus {
 outline:0;
 border-color:var(--primary-color)
}

.checkbox-label {
 display:flex!important;
 align-items:flex-start;
 justify-content:flex-start;
 cursor:pointer;
 padding:.5rem;
 border:1px solid #e9ecef;
 margin-bottom:.5rem;
 transition:.2s;
 text-align:left
}

.checkbox-label:has(input:checked) {
 border-color:var(--primary-color);
 background:#fff
}

.checkbox-label input[type=checkbox] {
 accent-color:var(--primary-color);
 flex-shrink:0
}

.checkbox-label span {
 text-align:left;
 line-height:1.5
}

.privacy-note {
 font-size:.9rem;
 color:#6c757d;
 text-align:center;
 margin-top:1rem
}

.form-navigation {
 display:flex;
 justify-content:space-between;
 margin-top:1.25rem;
 padding-top:1.25rem;
 border-top:1px solid #e9ecef
}

.form-navigation .btn-primary,
.form-navigation .btn-secondary {
 padding:.6rem 1.5rem;
 border:none;
 border-radius:0;
 font-size:.9rem;
 font-weight:600;
 cursor:pointer;
 transition:.3s
}

.form-navigation .btn-primary {
 background:var(--primary-color);
 color:#fff
}

.form-navigation .btn-primary:hover {
 background:var(--primary-hover);
 transform:translateY(-2px);
 box-shadow:var(--box-shadow-hover)
}

.form-navigation .btn-secondary {
 background:#e9ecef;
 color:#495057
}

.form-navigation .btn-secondary:hover {
 background:#dee2e6
}

.tech-term {
 position:relative;
 border-bottom:1px dotted var(--primary-color);
 cursor:help;
 transition:color .2s
}

.tooltip,
.tooltip::after {
 position:absolute;
 left:50%;
 transform:translateX(-50%)
}

.tooltip {
 bottom:calc(100% + 10px);
 background:rgba(33,33,33,.95);
 color:#fff;
 padding:.75rem 1rem;
 border-radius:8px;
 font-size:.875rem;
 line-height:1.4;
 white-space:normal;
 width:max-content;
 max-width:280px;
 opacity:0;
 visibility:hidden;
 transition:opacity .3s,visibility .3s;
 pointer-events:none;
 z-index:1000;
 box-shadow:0 4px 12px rgba(0,0,0,.3)
}

.tooltip::after {
 content:'';
 top:100%;
 border:6px solid transparent;
 border-top-color:rgba(33,33,33,.95)
}

.service-item,
.success-popup-content {
 border:1px solid var(--border-color)
}

@media print {
 h2,
h3 {
 page-break-after:avoid
}

.btn,
.cta-section,
.heading-with-lines:after,
.heading-with-lines:before,
.hero,
footer,
header,
nav {
 display:none!important
}

.legal-content {
 padding:0!important
}

.legal-text {
 max-width:100%!important;
 margin:0!important;
 font-size:11pt
}

h2 {
 color:#ff5722!important;
 -webkit-print-color-adjust:exact;
 print-color-adjust:exact
}

p {
 orphans:3;
 widows:3
}

}

.legal-footer,
.legal-text p+.heading-with-lines {
 margin-top:3rem
}

.legal-content {
 padding:2rem 0
}

.legal-text .heading-with-lines {
 margin-top:3rem;
 margin-bottom:1rem
}

.legal-text .heading-with-lines:first-child {
 margin-top:0
}

.legal-text h3 {
 color:var(--text-color);
 font-size:1.1rem;
 margin-top:1.5rem;
 margin-bottom:.75rem
}

.legal-text p {
 margin-bottom:.75rem;
 line-height:1.7;
 color:var(--text-light)
}

.legal-footer {
 padding-top:2rem;
 border-top:1px solid var(--border-color);
 text-align:center
}

.service-support-section {
 padding:4rem 0;
 background:var(--bg-light)
}

.service-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
 gap:2rem
}

.service-item {
 background:#fff;
 padding:2rem;
 transition:transform .3s,box-shadow .3s
}

.service-item:hover {
 transform:translateY(-5px);
 box-shadow:var(--box-shadow-hover)
}

.service-icon {
 font-size:2.5rem;
 margin-bottom:1rem
}

.service-item h3 {
 color:var(--primary-color);
 font-size:1.25rem;
 margin-bottom:.75rem
}

.service-item p {
 color:var(--text-light);
 line-height:1.6
}

.btn-text-link {
 display:inline-block;
 margin-top:.5rem;
 color:var(--primary-color);
 text-decoration:none;
 font-weight:500;
 transition:color .3s
}

.btn-close-popup,
.contact-option {
 transition:var(--transition);
 font-weight:600
}

.btn-text-link:hover {
 color:var(--primary-hover);
 text-decoration:underline
}

.success-popup {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:10000
}

.success-popup-overlay {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,.8);
 backdrop-filter:blur(5px);
 -webkit-backdrop-filter:blur(5px)
}

.success-popup-content {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 background:#fff;
 max-width:600px;
 width:90%;
 max-height:90vh;
 max-height:90svh;
 max-height:90dvh;
 overflow-y:auto;
 padding:3rem;
 box-shadow:0 20px 60px rgba(0,0,0,.3);
 animation:.5s popupSlideIn
}

.check-icon,
.success-checkmark {
 width:80px;
 height:80px;
 position:relative
}

@keyframes popupSlideIn {
 from {
 opacity:0;
 transform:translate(-50%,-40%)
}

to {
 opacity:1;
 transform:translate(-50%,-50%)
}

}

.success-checkmark {
 margin:0 auto
}

.check-icon {
 background:var(--primary-color);
 animation:.5s rotateCircle
}

@keyframes rotateCircle {
 from {
 transform:rotate(0)
}

to {
 transform:rotate(360deg)
}

}

.icon-line {
 height:4px;
 background-color:#fff;
 display:block;
 position:absolute;
 opacity:0
}

.icon-line.line-tip {
 top:46px;
 left:18px;
 width:20px;
 transform:rotate(45deg);
 animation:.5s .5s forwards iconLineTip
}

.icon-line.line-long {
 top:40px;
 right:12px;
 width:38px;
 transform:rotate(-45deg);
 animation:.5s .5s forwards iconLineLong
}

@keyframes iconLineTip {
 0% {
 width:0;
 opacity:1
}

100% {
 width:20px;
 opacity:1
}

}

@keyframes iconLineLong {
 0% {
 width:0;
 opacity:1
}

100% {
 width:38px;
 opacity:1
}

}

.success-popup-content h2 {
 color:var(--primary-color);
 text-align:center;
 margin-bottom:1.5rem;
 font-size:1.8rem
}

.success-main {
 text-align:center;
 font-size:1.1rem;
 margin-bottom:2rem;
 color:var(--text-color)
}

.success-info-box {
 background:var(--gray-light);
 padding:1.5rem;
 margin:2rem 0;
 border-left:4px solid var(--primary-color)
}

.success-info-box h3 {
 color:var(--primary-color);
 margin-bottom:1rem;
 font-size:1.2rem
}

.check-list,
.success-steps {
 list-style:none;
 padding:0
}

.success-steps li {
 padding:.75rem 0;
 font-size:1rem;
 color:var(--text-color);
 line-height:1.6;
 text-align:left
}

.success-contact {
 text-align:center;
 margin:2rem 0;
 padding:1.5rem;
 background:#f9fafb;
 border-radius:8px
}

.success-contact p {
 margin-bottom:1rem;
 font-weight:500
}

.success-contact-options {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:1rem;
 flex-wrap:wrap;
 margin-top:1rem
}

.contact-option {
 display:inline-block;
 padding:.75rem 1.5rem;
 background:var(--primary-color);
 color:#fff;
 text-decoration:none;
 border-radius:6px;
 font-size:1rem
}

.contact-option:hover {
 background:var(--primary-dark);
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(255,87,34,.3)
}

.success-quote {
 text-align:left;
 font-style:italic;
 color:#555;
 margin:2rem 0;
 font-size:1.1rem;
 padding:1rem 1rem 1rem 1.5rem;
 border-left:3px solid var(--primary-color);
 background:0 0
}

.btn-close-popup {
 display:block;
 width:100%;
 padding:1rem 2rem;
 background:var(--primary-color);
 color:#fff;
 border:none;
 font-size:1.1rem;
 cursor:pointer;
 margin-top:1rem
}

.btn-close-popup:hover {
 background:var(--primary-hover);
 transform:translateY(-2px)
}

@media (max-width:1024px) and (min-width:769px) {
 .success-popup-content {
 position:fixed;
 max-height:85vh;
 max-height:85svh;
 max-height:85dvh;
 top:7.5vh;
 left:50%;
 transform:translateX(-50%);
 width:80%;
 max-width:500px
}

}

@keyframes fadeIn {
 from {
 opacity:0;
 transform:translateY(10px)
}

to {
 opacity:1;
 transform:translateY(0)
}

}

.mt-0 {
 margin-top:0!important
}

.mt-1 {
 margin-top:.5rem!important
}

.mt-2 {
 margin-top:1rem!important
}

.mt-3 {
 margin-top:1.5rem!important
}

.mt-4 {
 margin-top:2rem!important
}

.mt-5 {
 margin-top:3rem!important
}

.mt-6 {
 margin-top:4rem!important
}

.mb-0 {
 margin-bottom:0!important
}

.mb-1 {
 margin-bottom:.5rem!important
}

.mb-2 {
 margin-bottom:1rem!important
}

.mb-3 {
 margin-bottom:1.5rem!important
}

.mb-4 {
 margin-bottom:2rem!important
}

.mb-5 {
 margin-bottom:3rem!important
}

.mx-auto {
 margin-left:auto!important;
 margin-right:auto!important
}

.my-1 {
 margin-top:.5rem!important;
 margin-bottom:.5rem!important
}

.my-2 {
 margin-top:1rem!important;
 margin-bottom:1rem!important
}

.my-3 {
 margin-top:1.5rem!important;
 margin-bottom:1.5rem!important
}

.my-4 {
 margin-top:2rem!important;
 margin-bottom:2rem!important
}

.my-5 {
 margin-top:3rem!important;
 margin-bottom:3rem!important
}

.p-0 {
 padding:0!important
}

.p-1 {
 padding:.5rem!important
}

.p-2 {
 padding:1rem!important
}

.p-3 {
 padding:1.5rem!important
}

.p-4 {
 padding:2rem!important
}

.p-5 {
 padding:3rem!important
}

.px-2 {
 padding-left:1rem!important;
 padding-right:1rem!important
}

.px-3 {
 padding-left:1.5rem!important;
 padding-right:1.5rem!important
}

.px-4 {
 padding-left:2rem!important;
 padding-right:2rem!important
}

.py-2 {
 padding-top:1rem!important;
 padding-bottom:1rem!important
}

.py-3 {
 padding-top:1.5rem!important;
 padding-bottom:1.5rem!important
}

.py-4 {
 padding-top:2rem!important;
 padding-bottom:2rem!important
}

.py-5 {
 padding-top:3rem!important;
 padding-bottom:3rem!important
}

.pl-2 {
 padding-left:1rem!important
}

.pl-3 {
 padding-left:1.5rem!important
}

.pl-4 {
 padding-left:2rem!important
}

.pt-2 {
 padding-top:1rem!important
}

.pt-3 {
 padding-top:1.5rem!important
}

.pt-4 {
 padding-top:2rem!important
}

.pb-2 {
 padding-bottom:1rem!important
}

.pb-3 {
 padding-bottom:1.5rem!important
}

.pb-4 {
 padding-bottom:2rem!important
}

.text-center {
 text-align:center!important
}

.text-left {
 text-align:left!important
}

.text-right {
 text-align:right!important
}

.text-justify {
 text-align:justify!important
}

.text-small {
 font-size:.875rem!important
}

.text-base {
 font-size:1rem!important
}

.text-lg {
 font-size:1.125rem!important
}

.text-xl {
 font-size:1.25rem!important
}

.text-2xl {
 font-size:1.5rem!important
}

.text-3xl {
 font-size:2rem!important
}

.text-4xl {
 font-size:2.5rem!important
}

.font-normal {
 font-weight:400!important
}

.font-medium {
 font-weight:500!important
}

.font-semibold {
 font-weight:600!important
}

.font-bold {
 font-weight:700!important
}

.font-mono {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif!important
}

.italic {
 font-style:italic!important
}

.line-height-relaxed {
 line-height:1.6!important
}

.line-height-loose {
 line-height:1.8!important
}

.text-primary {
 color:var(--primary-color)!important
}

.text-secondary {
 color:var(--text-light)!important
}

.text-muted {
 color:#9e9e9e!important
}

.dark .popup-contact-box p,
.text-white {
 color:#fff!important
}

.text-inherit {
 color:inherit!important
}

.check-mark,
.dark #prevBtn:hover,
.quote-icon,
.testimonial-author {
 color:var(--primary-color)
}

.bg-light,
.dark .bg-gray-50,
.dark .bg-light {
 background:var(--bg-light)!important
}

.bg-white {
 background:#fff!important
}

.bg-primary {
 background:var(--primary-color)!important
}

.bg-dark {
 background:var(--gray-dark)!important
}

.bg-transparent {
 background:0 0!important
}

.border-0 {
 border:none!important
}

.border {
 border:1px solid var(--border-color)!important
}

.border-2 {
 border:2px solid var(--border-color)!important
}

.border-primary {
 border-color:var(--primary-color)!important
}

.border-l-4 {
 border-left:4px solid var(--primary-color)!important
}

.border-l-3 {
 border-left:3px solid var(--primary-color)!important
}

.border-t {
 border-top:1px solid var(--border-color)!important
}

.border-b {
 border-bottom:1px solid var(--border-color)!important
}

.rounded-0 {
 border-radius:0!important
}

.rounded {
 border-radius:4px!important
}

.rounded-lg {
 border-radius:8px!important
}

.d-block {
 display:block!important
}

.d-inline {
 display:inline!important
}

.d-inline-block {
 display:inline-block!important
}

.d-flex {
 display:flex!important
}

.d-grid {
 display:grid!important
}

.flex-row {
 flex-direction:row!important
}

.flex-column {
 flex-direction:column!important
}

.flex-wrap {
 flex-wrap:wrap!important
}

.justify-center {
 justify-content:center!important
}

.justify-between {
 justify-content:space-between!important
}

.justify-around {
 justify-content:space-around!important
}

.align-center {
 align-items:center!important
}

.align-start {
 align-items:flex-start!important
}

.align-end {
 align-items:flex-end!important
}

.gap-1 {
 gap:.5rem!important
}

.gap-2 {
 gap:1rem!important
}

.gap-3 {
 gap:1.5rem!important
}

.gap-4 {
 gap:2rem!important
}

.grid-cols-1 {
 grid-template-columns:repeat(1,1fr)!important
}

.grid-cols-2 {
 grid-template-columns:repeat(2,1fr)!important
}

.grid-cols-3 {
 grid-template-columns:repeat(3,1fr)!important
}

.grid-cols-4 {
 grid-template-columns:repeat(4,1fr)!important
}

.grid-cols-auto {
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important
}

.w-100 {
 width:100%!important
}

.w-auto {
 width:auto!important
}

.max-w-600 {
 max-width:600px!important
}

.max-w-800 {
 max-width:800px!important
}

.max-w-1000 {
 max-width:1000px!important
}

.max-w-1200 {
 max-width:1200px!important
}

.min-h-screen {
 min-height:100vh!important;
 min-height:100svh!important;
 min-height:100dvh!important
}

.min-h-70vh {
 min-height:70vh!important;
 min-height:70svh!important;
 min-height:70dvh!important
}

.position-relative {
 position:relative!important
}

.position-absolute {
 position:absolute!important
}

.position-fixed {
 position:fixed!important
}

.position-sticky {
 position:sticky!important
}

.top-0 {
 top:0!important
}

.left-0 {
 left:0!important
}

.right-0 {
 right:0!important
}

.bottom-0 {
 bottom:0!important
}

.list-none {
 list-style:none!important
}

.list-disc {
 list-style-type:disc!important
}

.overflow-hidden {
 overflow:hidden!important
}

.overflow-auto {
 overflow:auto!important
}

.overflow-visible {
 overflow:visible!important
}

.hero-intro {
 text-align:center;
 max-width:800px;
 margin:0 auto 3rem;
 font-size:1.125rem
}

#logo-grid,
.service-grid-container {
 max-width:1000px;
 margin:0 auto
}

.feature-box {
 background:var(--bg-light);
 padding:3rem 2rem;
 border-left:4px solid var(--primary-color);
 max-width:800px;
 margin:0 auto
}

.check-list li {
 margin-bottom:1rem;
 padding-left:2rem;
 position:relative
}

.check-list li:last-child {
 margin-bottom:0
}

.check-mark {
 position:absolute;
 left:0
}

.info-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:1rem
}

.info-card {
 background:#fff;
 padding:1rem;
 border-left:3px solid var(--primary-color)
}

.info-card strong {
 display:block;
 margin-bottom:.25rem
}

.service-highlight {
 background:var(--bg-light);
 padding:2rem;
 border-radius:8px;
 text-align:center
}

.testimonial-box {
 background:#fff;
 padding:2rem;
 border-left:4px solid var(--primary-color)
}

.testimonial-header {
 display:flex;
 align-items:center;
 margin-bottom:1rem
}

.quote-icon {
 font-size:3rem;
 margin-right:1rem
}

.testimonial-author {
 display:block;
 font-weight:700
}

.testimonial-role {
 display:block;
 color:var(--text-light);
 font-size:.875rem
}

.testimonial-text {
 font-style:italic;
 line-height:1.8;
 margin-bottom:1rem
}

.testimonial-services {
 color:var(--text-light);
 font-size:.9rem
}

#logo-grid {
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:2rem;
 align-items:center;
 padding:0 1rem
}

#logo-grid>div {
 display:flex;
 align-items:center;
 justify-content:center;
 padding:1rem;
 min-height:100px
}

.logo-img {
 max-width:180px;
 max-height:80px;
 width:auto;
 height:auto;
 object-fit:contain;
 filter:grayscale(100%);
 opacity:.7;
 transition:.3s
}

.logo-img:hover {
 filter:grayscale(0%);
 opacity:1;
 transform:scale(1.05)
}

@media (max-width:1024px) {
 #logo-grid {
 grid-template-columns:repeat(3,1fr);
 gap:1.5rem
}

}

@media (max-width:768px) {
 .tooltip {
 max-width:240px;
 font-size:.825rem;
 padding:.625rem .875rem
}

.tooltip.tooltip-left {
 left:0;
 transform:translateX(0)
}

.tooltip.tooltip-right {
 left:auto;
 right:0;
 transform:translateX(0)
}

.tooltip.tooltip-left::after {
 left:20px
}

.tooltip.tooltip-right::after {
 left:auto;
 right:20px
}

.info-grid,
.option-grid,
.service-grid {
 grid-template-columns:1fr
}

.success-popup-content {
 position:fixed;
 padding:1.5rem;
 width:90%;
 max-width:95%;
 max-height:80vh;
 max-height:80svh;
 max-height:80dvh;
 margin:0;
 top:10vh;
 left:50%;
 transform:translateX(-50%)
}

.success-popup-content h2 {
 font-size:1.4rem;
 margin-bottom:1rem
}

.success-popup-content p {
 font-size:.95rem;
 margin-bottom:.8rem
}

.progress-text,
.success-popup-content ul {
 font-size:.9rem
}

.success-popup-content::-webkit-scrollbar {
 width:6px
}

.success-popup-content::-webkit-scrollbar-track {
 background:#f1f1f1
}

.success-popup-content::-webkit-scrollbar-thumb {
 background:#888;
 border-radius:3px
}

.step-form-container {
 padding:1.5rem
}

.form-step h2 {
 font-size:1.5rem
}

.option-icon {
 font-size:2rem
}

#logo-grid {
 grid-template-columns:repeat(2,1fr);
 gap:1rem
}

.logo-img {
 max-width:150px;
 max-height:70px
}

.grid-cols-auto {
 grid-template-columns:1fr!important
}

}

@media (max-width:480px) {
 .container {
 padding:0 15px
}

h1 {
 font-size:1.75rem
}

.btn {
 padding:.75rem 1.5rem;
 font-size:.95rem
}

#logo-grid {
 grid-template-columns:repeat(2,1fr);
 gap:.75rem;
 padding:0 .5rem
}

#logo-grid>div {
 padding:.5rem;
 min-height:80px
}

.logo-img {
 max-width:120px;
 max-height:60px
}

}

.faq-item {
 background:#fff;
 padding:1.5rem;
 border:1px solid var(--border-color);
 margin-bottom:1rem
}

.faq-item h3 {
 color:var(--text-color);
 margin-bottom:1rem
}

.dark .navbar {
 background:var(--nav-bg);
 border-bottom-color:var(--border-color)
}

.dark .dropdown-menu {
 background:var(--dropdown-bg);
 border-color:var(--border-color)
}

.dark .contact-form,
.dark .contact-form-container,
.dark .contact-info,
.dark .faq-item,
.dark .feature-box,
.dark .feature-card,
.dark .option-card,
.dark .pricing-card,
.dark .reference-card,
.dark .service-card,
.dark .step-form-container,
.dark .team-card,
.dark .testimonial-card {
 background:var(--card-bg);
 border-color:var(--border-color)
}

.dark .contact-section,
.dark .faq-container,
.dark .step-form-section {
 background:var(--bg-white)
}

.dark .progress-text {
 color:var(--text-color);
 background:0 0;
 text-shadow:none
}

.dark input[type=email],
.dark input[type=number],
.dark input[type=password],
.dark input[type=search],
.dark input[type=tel],
.dark input[type=text],
.dark input[type=url],
.dark select,
.dark textarea {
 background:#2a2a2a!important;
 border-color:var(--border-color);
 color:var(--text-color)!important
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
 border-color:var(--primary-color)!important;
 background:#2a2a2a!important;
 color:var(--text-color)!important
}

.dark .hero-small::before,
.dark .hero::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.3) 100%);
 pointer-events:none;
 z-index:1
}

.dark .hero-small>*,
.dark .hero>* {
 position:relative;
 z-index:2
}

.dark footer {
 background:var(--footer-bg);
 border-top-color:var(--border-color)
}

.dark .footer-top {
 background:#0a0a0a
}

.dark .footer-bottom {
 background:transparent;
 color:var(--text-color)
}

.dark .form-step,
.dark table {
 background:var(--card-bg)
}

.dark th {
 background:var(--bg-light);
 border-color:var(--border-color)
}

.dark tr:nth-child(2n) {
 background:rgba(255,255,255,.02)
}

.dark code,
.dark pre {
 background:var(--code-bg);
 color:#f8f8f2
}

.dark .alert-success {
 background:rgba(76,175,80,.1);
 border-color:#4caf50;
 color:#4caf50
}

.dark .alert-error {
 background:rgba(244,67,54,.1);
 border-color:#f44336;
 color:#f44336
}

.dark .logo-img,
.dark .reference-logo {
 background:#fff;
 border-radius:8px
}

.dark .mobile-menu-toggle span {
 background:var(--text-color)
}

.dark .progress-fill {
 background:var(--primary-color)
}

.dark .faq-category {
 background:0 0;
 border-color:var(--border-color)
}

.dark .faq-answer,
.dark .faq-question {
 background:0 0;
 border-color:var(--border-color);
 color:var(--text-color)
}

.dark .contact-details,
.dark .option-radio,
.dark .service-grid,
.dark .service-grid-container {
 background:0 0
}

.dark .service-item {
 background:var(--card-bg);
 border:1px solid var(--border-color)
}

.dark .service-item:hover {
 border-color:var(--primary-color);
 box-shadow:0 0 20px rgba(255,87,34,.2)
}

.dark .bg-white {
 background:var(--card-bg)!important
}

.dark .border {
 border-color:var(--border-color)!important
}

.dark .content-section {
 background:var(--bg-white);
 color:var(--text-color)
}

.dark .info-box,
.dark .option-card,
.dark .popup-content {
 background:var(--card-bg);
 border-color:var(--border-color);
 color:var(--text-color)
}

.dark .info-card,
.dark .testimonial-box {
 background:var(--card-bg);
 border-left-color:var(--primary-color);
 color:var(--text-color)
}

.dark .company-info,
.dark .info-block,
.dark .legal-info,
.dark .option-checkbox {
 background:#2a2a2a!important;
 border-color:#404040!important;
 color:#e0e0e0!important
}

.dark .company-info p,
.dark .info-block p,
.dark .legal-info p,
.dark .popup-info-box h3,
.dark .popup-info-box strong {
 color:#e0e0e0!important
}

.dark .option-card:hover {
 border-color:var(--primary-color);
 background:var(--card-bg);
 box-shadow:0 0 0 1px var(--primary-color)
}

.dark .option-card.selected {
 background:rgba(255,87,34,.15);
 border-color:var(--primary-color);
 color:var(--text-color)
}

.dark .option-radio span {
 background:0 0;
 border-color:#404040;
 color:#e0e0e0
}

.dark .option-radio:hover span {
 border-color:var(--primary-color);
 background:0 0
}

.dark .option-radio input:checked+span {
 background:0 0;
 border-color:var(--primary-color);
 color:var(--primary-color)
}

.dark .option-checkbox:hover {
 background:#333!important;
 border-color:var(--primary-color)!important
}

.dark input[type=checkbox] {
 accent-color:var(--primary-color)
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:active,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:hover,
.dark select:-webkit-autofill,
.dark textarea:-webkit-autofill {
 -webkit-box-shadow:0 0 0 1000px #2a2a2a inset!important;
 -webkit-text-fill-color:#e0e0e0!important;
 background-color:#2a2a2a!important;
 color:#e0e0e0!important
}

.dark .cta-section {
 background:#161616
}

.dark .btn-primary:not(.step-form-container .btn-primary),
.dark .cta-button,
.dark .form-submit {
 background:#ff5722!important;
 color:#fff!important;
 border:2px solid #ff5722!important
}

.dark .btn-primary:not(.step-form-container .btn-primary):not(:disabled):hover,
.dark .form-submit:hover {
 background:#fff!important;
 color:#ff5722!important;
 border:2px solid #ff5722!important
}

.dark .btn-secondary:not(.step-form-container .btn-secondary) {
 background:#fff!important;
 color:#212121!important;
 border:2px solid #212121!important
}

.dark .btn-secondary:not(.step-form-container .btn-secondary):hover {
 background:#212121!important;
 color:#fff!important;
 border:2px solid #212121!important
}

.dark .cta-button {
 background:#FF5722!important;
 color:#fff!important;
 border:2px solid #FF5722!important
}

.dark .cta-button:hover {
 background:#fff!important;
 color:#FF5722!important;
 border-color:#FF5722!important
}

.dark .popup-content-inner>p,
.dark .popup-content-inner>p[style*="font-style: italic"],
.dark .popup-info-box div {
 color:#b0b0b0!important
}

.dark .success-popup-overlay .popup-content-inner {
 background:#1e1e1e!important;
 color:var(--text-color)!important;
 border:1px solid var(--border-color)
}

.dark .popup-info-box {
 background:#0d0d0d!important;
 border:1px solid var(--border-color)!important;
 color:#e0e0e0!important
}

.dark .popup-contact-box {
 background:#ff5722!important;
 color:#fff!important
}

.dark .popup-title {
 color:var(--primary-color)!important
}

.dark .popup-description {
 color:var(--text-light)!important
}

.dark .popup-step-item {
 color:var(--text-color)!important
}

.dark .popup-footer-note {
 color:var(--text-light)!important;
 font-style:italic
}

/* Dark Mode: Icon Circle mit besserem Kontrast */
.dark .popup-icon-circle {
 background:transparent!important;
 border:3px solid #4CAF50!important
}

.dark .popup-checkmark {
 color:#4CAF50!important
}

.dark #nextBtn,
.dark #submitBtn,
.dark .popup-close,
.dark .popup-confirm-btn {
 background:var(--primary-color);
 color:#fff!important;
 border-color:var(--primary-color)
}

.dark #nextBtn:hover,
.dark #submitBtn:hover,
.dark .popup-close:hover {
 background:var(--primary-dark);
 border-color:var(--primary-dark)
}

.dark #prevBtn {
 background:0 0;
 color:var(--text-light);
 border-color:var(--border-color)
}

.dark #prevBtn:hover {
 background:rgba(255,87,34,.1);
 border-color:var(--primary-color)
}

.dark div[style*="background: #fff"],
.dark div[style*="background: #ffffff"],
.dark div[style*="background: white"],
.dark div[style*="background:#fff"],
.dark div[style*="background:#ffffff"],
.dark div[style*="background:white"] {
 background:#2a2a2a!important;
 color:#e0e0e0!important
}

.dark p[style*="background: #fff3cd"] {
 background:#ffc107!important;
 color:#212121!important
}

.dark p[style*="background: #fff3cd"] strong {
 color:#212121!important
}

.dark div[style*="background: #f9f9f9"] {
 background:var(--card-bg)!important;
 color:var(--text-color)!important
}

.dark div[style*="background: #f9f9f9"] p,
.dark div[style*="background: #f9f9f9"] strong {
 color:var(--text-color)!important
}

.dark .success-popup {
 background:rgba(0,0,0,.95)
}

.dark .popup-checkmark {
 border-color:#4caf50;
 color:#4caf50
}

.dark .value-item {
 background:var(--card-bg);
 border-color:var(--border-color)
}

.dark .value-item p {
 color:var(--text-light)
}

/* Styles für die neuen span-Elemente in option-cards */
.option-card .option-icon,
.option-card .option-title,
.option-card .option-description {
 display:block
}

.option-card .option-icon {
 font-size:var(--text-2xl);
 margin-bottom:.4rem
}

.option-card .option-title {
 font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
 font-size:var(--text-sm);
 margin-bottom:.25rem;
 color:#212529;
 font-weight:600
}

.option-card .option-description {
 font-size:var(--text-xs);
 color:#6c757d;
 margin:0;
 line-height:1.3
}

.dark .option-card .option-title {
 color:var(--text-color)
}

.dark .option-card .option-description {
 color:var(--text-light)
}

/* Success Popup Styles */
@keyframes popupScale {
 from {
  opacity:0;
  transform:scale(0.8)
 }
 to {
  opacity:1;
  transform:scale(1)
 }
}

.success-popup-overlay {
 display:none;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.7);
 z-index:10000;
 align-items:center;
 justify-content:center;
 overflow-y:auto
}

.popup-content-inner {
 background:white;
 padding:3rem;
 max-width:500px;
 width:90%;
 max-height:90vh;
 max-height:90svh;
 max-height:90dvh;
 overflow-y:auto;
 text-align:center;
 position:relative;
 margin:2rem auto;
 transform:scale(1);
 animation:popupScale 0.3s ease
}

.popup-close-btn {
 position:absolute;
 top:15px;
 right:15px;
 background:none;
 border:none;
 font-size:28px;
 cursor:pointer;
 color:#666;
 line-height:1;
 padding:0;
 width:30px;
 height:30px
}

.popup-icon-wrapper {
 margin-bottom:1.5rem
}

.popup-icon-circle {
 width:80px;
 height:80px;
 background:linear-gradient(135deg,#4CAF50,#45a049);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto
}

.popup-checkmark {
 color:white;
 font-size:40px
}

.popup-title {
 color:#4CAF50;
 margin-bottom:1.5rem;
 font-size:1.75rem
}

.popup-title.no-lines::before,
.popup-title.no-lines::after {
 display:none!important
}

.popup-description {
 color:#666;
 font-size:1.1rem;
 margin-bottom:2rem
}

.popup-info-box {
 background:#f9f9f9;
 padding:1.5rem;
 margin-bottom:2rem;
 text-align:left
}

.popup-info-title {
 color:#333;
 font-size:1.1rem;
 margin-bottom:1rem
}

.popup-step-item {
 margin-bottom:0.75rem
}

.popup-step-icon {
 font-size:1.2rem;
 margin-right:0.5rem
}

.popup-contact-box {
 background:#FF5722;
 color:white;
 padding:1rem;
 margin-bottom:1.5rem
}

.popup-contact-title {
 margin:0 0 0.5rem 0;
 font-weight:bold
}

.popup-contact-info {
 margin:0
}

.popup-footer-note {
 color:#666;
 font-style:italic;
 font-size:1rem;
 margin-bottom:2rem
}

.popup-confirm-btn {
 background:var(--primary-color);
 color:white;
 border:none;
 padding:0.875rem 2rem;
 font-size:1rem;
 font-weight:600;
 cursor:pointer;
 text-transform:uppercase;
 letter-spacing:1px;
 transition:all 0.3s ease
}

/* Responsive Anpassungen für Tablet und Mobile */
@media (max-width:768px) {
 .popup-content-inner {
  padding:1.5rem!important;
  width:95%!important;
  max-height:85vh!important;
  max-height:85svh!important;
  max-height:85dvh!important;
  margin:1rem auto!important
 }
 
 .popup-content-inner h2 {
  font-size:1.4rem!important
 }
 
 .popup-content-inner p {
  font-size:0.95rem!important
 }
 
 .popup-content-inner button {
  padding:0.75rem 1.5rem!important;
  font-size:0.9rem!important
 }
 
 .popup-icon-circle {
  width:60px!important;
  height:60px!important
 }
 
 .popup-checkmark {
  font-size:30px!important
 }
}

@media (max-width:480px) {
 .popup-content-inner {
  padding:1rem!important;
  margin:0.5rem auto!important
 }
}

/* Utility Classes for Inline Style Migration */
.text-center {
 text-align: center;
}

.text-white-80 {
 color: rgba(255,255,255,0.8);
}

.text-small {
 font-size: 0.875rem;
}

.text-large {
 font-size: 1.125rem;
}

.text-bold {
 font-weight: 500;
}

.text-nowrap {
 white-space: nowrap;
}

.mt-1 {
 margin-top: 1rem;
}

.mt-2 {
 margin-top: 2rem;
}

.mt-3 {
 margin-top: 3rem;
}

.mb-0 {
 margin: 0;
}

.mb-1 {
 margin-bottom: 1rem;
}

.mb-1-5 {
 margin-bottom: 1.5rem;
}

.mb-2 {
 margin-bottom: 2rem;
}

.mx-auto {
 margin: 0 auto;
}

.max-w-800 {
 max-width: 800px;
}

/* Progress Bar Styles */
.progress-bar-hidden {
 display: none;
}

/* Bot Protection Field */
.bot-protection {
 position: absolute;
 left: -5000px;
}

/* Form Navigation */
.form-nav-hidden {
 display: none;
}

/* About Page Specific */
.about-intro-text {
 max-width: 800px;
 margin: 0 auto;
 font-size: 1.125rem;
}

.about-intro-text-secondary {
 max-width: 800px;
 margin: 2rem auto 0;
 font-size: 1.125rem;
}

/* Team Section Styles */
.team-container {
 text-align: center;
 max-width: 800px;
 margin: 0 auto;
}

.team-card {
 background: white;
 padding: 2rem;
 border-radius: 0;
 border: 1px solid var(--border-color);
 margin-bottom: 2rem;
}

.team-card-secondary {
 background: var(--bg-light);
 padding: 2rem;
 border-radius: 0;
 border: 1px solid var(--border-color);
}

.team-title {
 color: var(--primary-color);
 margin-bottom: 1rem;
}

.team-role {
 font-weight: 500;
 margin-bottom: 1rem;
}

/* Contact Page Styles */
.contact-subtitle {
 color: var(--primary-color);
 font-size: 1.25rem;
 margin-bottom: 1rem;
}

.contact-whatsapp-link {
 display: inline-block;
 vertical-align: middle;
 font-size: 1.5rem;
 text-decoration: none;
 margin-left: 8px;
}

.mt-075 {
 margin-top: 0.75rem;
}

.contact-highlight-box {
 background: white;
 padding: 1.5rem;
 margin-top: 2rem;
}

.dark .contact-highlight-box {
 background: var(--card-bg);
 border: 1px solid var(--border-color);
}

.contact-highlight-title {
 color: #FF5722;
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
}

/* Location Section */
.location-box {
 background: var(--bg-light);
 border-radius: 0;
 padding: 2rem;
 text-align: center;
 border: 1px solid var(--border-color);
}

.location-title {
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
}

.location-address {
 font-size: 1.125rem;
 margin-bottom: 1.5rem;
}

.location-note {
 font-size: 0.9rem;
}

.location-button {
 margin-top: 1rem;
 display: inline-block;
 background: var(--primary-color);
 color: white;
 border: 2px solid var(--primary-color);
 padding: 0.875rem 2rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.location-button:hover {
 background: white;
 color: var(--primary-color);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

.location-button span {
 position: relative;
 z-index: 2;
}

/* Dark Mode: Location Button behält Light Mode Design */
.dark .location-button {
 background: var(--primary-color);
 color: white !important;
 border: 2px solid var(--primary-color);
}

.dark .location-button:hover {
 background: white;
 color: var(--primary-color) !important;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

/* CTA Section Variations */
.cta-section-light {
 background: var(--bg-light);
}

.cta-title-dark {
 color: var(--text-color);
}

.cta-text-light {
 color: var(--text-light);
}

.cta-buttons-flex {
 display: flex;
 gap: 1rem;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

.btn-secondary-white {
 background: white;
 color: var(--primary-color);
 border: 2px solid var(--primary-color);
}

/* Step Form Specific */
.step-subtitle-light {
 margin-bottom: 1.5rem;
 color: var(--text-light);
}

/* Service Pages */
.service-intro-text {
 text-align: center;
 max-width: 800px;
 margin: 0 auto 3rem;
 font-size: 1rem;
}

.service-grid-center {
 max-width: 1000px;
 margin: 0 auto;
}

.mt-4 {
 margin-top: 4rem;
}

.highlight-box {
 background: var(--bg-light);
 padding: 3rem 2rem;
 border-left: 4px solid var(--primary-color);
 max-width: 800px;
 margin: 0 auto;
}

.checklist {
 list-style: none;
 padding: 0;
}

.checklist-item {
 margin-bottom: 1rem;
 padding-left: 2rem;
 position: relative;
}

.checklist-item:last-child {
 margin-bottom: 0;
}

.checklist-icon {
 position: absolute;
 left: 0;
 color: var(--primary-color);
}

.text-center-mt-3 {
 text-align: center;
 margin-top: 3rem;
}

.text-mb-2 {
 font-size: 1rem;
 margin-bottom: 2rem;
}

.grid-services {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 2rem;
 max-width: 800px;
 margin: 0 auto;
}

.service-box {
 background: var(--bg-light);
 padding: 2rem;
 border-radius: 8px;
 text-align: center;
}

.flex-buttons {
 display: flex;
 gap: 1rem;
 justify-content: center;
 flex-wrap: wrap;
}

.warning-box {
 background: #fff3cd;
 border-left: 4px solid #ffc107;
}

/* Dark Mode: Warning Box mit besserem Kontrast */
.dark .warning-box {
 background: rgba(255, 193, 7, 0.1);
 border-left: 4px solid #ffc107;
 color: var(--text-color);
}

.dark .warning-box strong {
 color: #ffc107;
}

.p-2 {
 padding: 2rem;
}