:root {
  --color-bg: #ffffff;
  --color-bg-alt: #dedede;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-primary: #bd0e15;       /* Rot Akzent */
  --color-primary-soft: #fdeaea;  /* Heller Rot-Hintergrund */
}

.btn-primary { box-shadow: 0 8px 22px rgba(189, 14, 21, 0.25); }

/* Logo im Header verkleinern */
.logo img {
  max-height: 70px;
  width: auto;
}
.footer-logo img {
  max-height: 100px;}

.btn-secondary{
  color: var(--color-bg)
}
.btn-secondary:hover{
  background: var(--color-primary);
}
/* Menü im Header mittig ausrichten */
@media (min-width: 900px) {
  header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: stretch;
  }

  .nav-desktop {
    justify-self: center;
  }

  .header-right {
    justify-self: end;
  }
}

.header .logo { letter-spacing: -0.01em; }

/* --- Premium Animations, UX & Hover --- */
[data-animate] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Standard: Slide Up */
[data-animate],
[data-animate="slide-up"] {
    transform: translateY(40px);
}

/* Slide von links */
[data-animate="slide-left"] {
    transform: translateX(-30px);
}

/* Slide von rechts */
[data-animate="slide-right"] {
    transform: translateX(30px);
}

/* Zoom In */
[data-animate="zoom-in"] {
    transform: scale(0.92);
}

/* In-View Zustand für alle */
[data-animate].in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Button Pulse Effekt */
@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(189, 14, 21, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(189, 14, 21, 0); }
    100% { box-shadow: 0 0 0 0 rgba(189, 14, 21, 0); }
}

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

.section-hero .btn-primary:hover {
    animation: none;
    transform: translateY(-2px);
}

/* Karten & Interaktionen */
.usp-card, .portfolio-item, .application-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.usp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 0;
    background: var(--color-primary);
    transition: height 0.3s ease;
}

.usp-card:hover {
    background: #fff;
    border-color: var(--color-primary);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.usp-card:hover::before {
    height: 100%;
}

.portfolio-item:hover, .application-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.portfolio-item__image img, .application-card__image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item:hover .portfolio-item__image img,
.application-card:hover .application-card__image img {
    transform: scale(1.05);
}

/* Formular UX */
.contact-form .form-row input:focus,
.contact-form .form-row textarea:focus {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Bild-Reveal Effekt */
.portfolio-item__image, .card-image, .cta-image {
    overflow: hidden;
    border-radius: 0.8rem;
}

[data-animate] img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].in-view img {
    transform: scale(1);
}

[data-animate="zoom-in"] img {
    transform: scale(1.15);
}

/* Bilder & Sektionen verkleinern */
.section-hero {
  min-height: 400px;
}
.section-hero__content {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.cta-image img {
  max-height: 280px;
  width: auto;
  border-radius: 0.8rem;
}

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

.card {
  background: #ffffff;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.card-body {
  padding: 1.25rem;
}

.cta-layout {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .cta-layout {
    grid-template-columns: 1fr 1fr;
  }
}


/* Nav-Toggle (Mobil-Menü) ganz rechts ausrichten */
@media (max-width: 899px) {
  .nav-toggle {
    margin-left: auto;
    margin-right: -0.5rem; /* Etwas weiter nach rechts in das Container-Padding */
  }
  .header-right {
    display: none; /* Verhindert, dass leere Container Platz beanspruchen */
  }
}