.btn-soft-primary {
    background:rgba(79,70,229,0.1);
    color:#4f46e5;
    border:none;
}

.btn-soft-primary:hover {
    background:#4f46e5;
    color:#fff;
}

.btn-soft-primary {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(79,70,229,0.5); }
    70% { box-shadow: 0 0 0 10px rgba(79,70,229,0); }
    100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); }
}

.nav-link.active {
    font-weight:600;
    color:#4f46e5 !important;
}

.nav-link:hover {
    color:#4f46e5 !important;
}

body.dark-mode {
    background:#121212;
    color:#eee;
}

.dark-mode .card {
    background:#1e1e1e;
    color:#eee;
}

.dark-mode .btn-outline-dark {
    border-color:#aaa;
    color:#eee;
}

.dark-mode .bg-light {
    background:#1e1e1e !important;
}

.dark-mode .border {
    border-color:#444 !important;
}

.dark-mode .text-muted {
    color:#aaa !important;
}



/* GLOBAL */
body{
font-family: system-ui;
background:#f8fafc;
}

.section{
padding:90px 0;
}

.section-title{
    font-size: 32px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 18px;
    color: #6b7280;
}

.feature-box{
padding:25px;
border-radius:10px;
background:#f8f9fa;
height:100%;
}

.price-summary {
    max-width: 400px;
    margin: 20px auto;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-family: 'Inter', sans-serif;
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 16px;
}

.price-item.discount .value {
    color: #d9534f; /* rot für Rabatt */
}

.price-item.total-net,
.price-item.vat,
.price-item.total-gross {
    font-weight: 600;
    font-size: 18px;
}

.price-item.total-gross {
    font-size: 20px;
    color: #28a745; /* grün für Brutto */
}

/* HERO */
.hero{
padding:70px 0 100px;
background:linear-gradient(135deg,#eef2ff,#f8fafc);
}

.hero h1 {
    font-weight: 700;
    line-height: 1.2;
}

.hero img{
border-radius:15px;
box-shadow:0 25px 70px rgba(0,0,0,0.15);
}

/* CARDS */
.card-saas{
border:0;
border-radius:15px;
padding:30px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:all .3s ease;
}


.card-saas h5 {
    font-weight: 600;
}

.card-saas:hover{
transform:translateY(-10px);
box-shadow:0 20px 60px rgba(0,0,0,0.1);
}

/* TRUST */
.trust{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* CTA */
.cta{
background:linear-gradient(135deg,#4f46e5,#6366f1);
color:#fff;
border-radius:20px;
padding:60px;
}

/* PRICE */
.price-box{
font-size:32px;
font-weight:bold;
}

/* FOOTER */
footer{
background:#111;
color:#fff;
padding:40px 0;
}

footer a{
color:#ccc;
text-decoration:none;
}
/* ANIMATION */
.fade-in{
opacity:0;
transform:translateY(20px);
transition:all .6s ease;
}

.fade-in.visible{
opacity:1;
transform:none;
}

.screenshot{
cursor:pointer;
transition:.3s;
}

.screenshot:hover{
transform:scale(1.03);
}



/* Core Web Vitals Fix */

img {
    height: auto;
}

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
}

/* verhindert Layout Shift */
.screenshot {
    cursor: pointer;
    transition: transform 0.2s;
}

.screenshot:hover {
    transform: scale(1.02);
}

.header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
}

.logo-svg {
  width: 240px;
  height: auto;
}

/* Text Styling */
.logo-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 26px;
  fill: #111;
  font-weight: 600;
}

/* Animation */
#hand1, #hand2 {
  transform-origin: 40px 40px;
}

#hand1 {
  animation: rotateMain 1.2s ease-out;
}
#hand2 {
  animation: rotateSmall 1.2s ease-out;
}

@keyframes rotateMain {
  from { transform: rotate(-60deg); }
  to { transform: rotate(0deg); }
}

@keyframes rotateSmall {
  from { transform: rotate(-20deg); }
  to { transform: rotate(0deg); }
}

/* Hover */
.logo-svg:hover #hand1 {
  animation: tickMain 0.6s ease-in-out;
}
.logo-svg:hover #hand2 {
  animation: tickSmall 0.6s ease-in-out;
}

@keyframes tickMain {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tickSmall {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .logo-svg {
    width: 120px;
  }

  .logo-text {
    font-size: 20px;
  }
}

@media (max-width:768px){

.hero{
padding:100px 0;
text-align:center;
}

h1{
font-size:28px;
}

.btn-lg{
width:100%;
margin-bottom:10px;
}

.section{
padding:20px 15px;
}

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

}



.section-light {
    background:#f8fafc;
}

.section-dark {
    background:#EBF5FC;
}


.pulse-cta {
    animation: pulseCTA 1.8s infinite;
}

@keyframes pulseCTA {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.mobile-cta {
    position: fixed;
    bottom: -100px; /* versteckt */
    left: 0;
    width: 100%;
    background: #4f46e5;
    padding: 12px;
    text-align: center;
    z-index: 9999;
    transition: bottom 0.3s ease;
}

.mobile-cta.show {
    bottom: 0;
}

.mobile-cta a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
}

/* nur mobile */
@media (max-width:768px){
    .mobile-cta {
        display: block;
    }

    body {
        padding-bottom: 70px;
    }
 
    
}

.card-saas:active {
    transform: scale(0.97);
}

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: #4f46e5;
    width: 0%;
    z-index: 9999;
}

.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}


/* Label nebeneinander */
.form-check-label.with-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Details darf keinen Zeilenumbruch erzwingen */
.hint {
  display: inline-block;
  position: relative;
}

/* Fragezeichen-Kreis */
.hint summary {
  list-style: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}

.hint summary::-webkit-details-marker {
  display: none;
}

/* Tooltip */
.hint-box {
  position: absolute;
  top: 22px;
  left: 0;
  background: #1f2937;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  width: 260px;
  font-size: 12px;
  z-index: 100;
}

.form-control-small {
width:75% !important;
}