/* DORS: Anpassungen nach dem Webflow-Export (gilt für alle Seiten) */

/* "Made in Webflow"-Badge ausblenden */
.w-webflow-badge { display: none !important; }

/* Logo oben links als Link zur Startseite */
.logo-link { display: inline-block; line-height: 0; }
.logo-link .image-2 { display: block; text-decoration: none; }

/* Hauptmenü: beim Überfahren wird die Schrift lime */
@media screen and (min-width: 992px) {
  .nav-text.navbar { transition: color .2s; }
  .nav-text.navbar:hover,
  .nav-text.navbar:focus-visible { color: var(--lime); }
}

/* Startseite: Übergang Hero -> "Wobei DORS": schlanker Lime-Streifen, wird einmal eingeblendet
   (statt eines hohen Blocks, der an die Scrollposition gekoppelt wächst) */
.hero-about .image-reveal-wrap { height: clamp(48px, 7vh, 72px); }
html.w-mod-js .lime-curtain {
  transform: scaleX(0) !important;
  transform-origin: 0 50% !important;
  height: 100%;
  transition: transform .9s cubic-bezier(.22, .7, .2, 1);
}
html.w-mod-js .lime-curtain.dors-in { transform: scaleX(1) !important; }

/* Startseite Desktop: Hero samt Zahlenzeile ("1:1 & Teams ...") passt auch auf niedrige Laptop-Bildschirme */
@media screen and (min-width: 992px) {
  .hero-content { padding-top: 40px; padding-bottom: 40px; }
  .hero-text-wrap { min-height: calc(100vh - 270px); }
}

/* Startseite: Heldenfoto über die volle Höhe der linken Textspalte */
@media screen and (min-width: 992px) {
  .hero-photo-wrap { aspect-ratio: auto; align-self: stretch; height: 100%; }
}

/* Leistungen-Übersicht */
.ud-btn-dark { color: #fff; background-color: #0e263f; letter-spacing: .08em; margin-bottom: 12px; margin-right: 12px; padding: 18px 28px; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; transition: color .2s, background-color .2s; }
.ud-btn-dark:hover { color: #c8f25a; }
.ud-li-w { color: #ffffffd1; }

/* Startseite: Heldenfoto beim Laden einblenden (Wischeffekt von oben + sanftes Zoomen), Ecken folgen */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo-clip { animation: dorsPhotoReveal 1.2s cubic-bezier(.22, .7, .2, 1) .35s both; }
  .hero-photo-bracket { animation: dorsBracketIn .6s ease 1.15s both; }
}
@keyframes dorsPhotoReveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0; transform: scale(1.04); }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; transform: scale(1); }
}
@keyframes dorsBracketIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Profilseiten: Porträt beim Laden einblenden (wie das Heldenfoto auf der Startseite) */
@media (prefers-reduced-motion: no-preference) {
  .portrait-frame .ud-portrait { animation: dorsPhotoReveal 1.1s cubic-bezier(.22, .7, .2, 1) .25s both; }
  .portrait-frame .hero-photo-bracket { animation: dorsBracketIn .6s ease 1.0s both; }
}

/* ===== Mobile Version (Telefon) ===== */
@media screen and (max-width: 767px) {
  /* Abschnitt "Wobei DORS ...": kein riesiger Leerraum zwischen Überschrift und Text */
  .service-static-text { height: auto; padding-top: 48px; padding-bottom: 28px; gap: 20px; justify-content: flex-start; }

  /* Leistungen-Slider: kein Festpinnen, Karte passt auf den Bildschirm */
  .service-sticky-wrap { height: auto; }
  .service-content { height: auto; min-height: 0; }
  .service-list-item { height: auto; position: relative; top: auto; }
  .service-slider { height: auto; min-height: 0; touch-action: pan-y; }
  .service-slider { --svc-h: clamp(460px, 78vh, 640px); }
  @supports (height: 1svh) { .service-slider { --svc-h: clamp(460px, 78svh, 640px); } }
  .service-slide { height: var(--svc-h); }
  .service-slider .service-image { height: var(--svc-h); }
  .service-slider .service-item-card { height: 100%; }
  .service-slider .service-item-content { height: 100% !important; padding-bottom: 92px; opacity: 1 !important; visibility: visible !important; display: flex !important; }
  .service-slider .service-image-wrap.top { height: 100% !important; visibility: visible !important; display: flex !important; opacity: 1 !important; }
  /* Pfeile und Punkte näher an den Inhalt, Pfeile gut sichtbar */
  .service-slider .service-slider-nav { bottom: 24px; }
  .service-slider .service-arrow-left,
  .service-slider .service-arrow-right { bottom: 24px; border-color: #c8f25a; background-color: #0e263fcc; }
  .service-slider .service-arrow-right { animation: dorsNudge 1.4s ease-in-out 3 1.2s; }

  /* Methodik-Karten: untereinander, kein Aufklapp-Effekt */
  .how-item-grid { grid-template-columns: 1fr 1fr !important; height: auto; }
  .how-desc .bs.how { height: auto !important; opacity: 1 !important; }

  /* Formular: kompakter, Checkbox nicht am Rand */
  .form-block { padding: 8px 0 16px; }
  .form-wrap { grid-row-gap: 12px; }
  .contact-form-style.bm.test-area { height: 104px; }
  .consent-wrap { padding-left: 0; margin-bottom: 4px; }
  .consent-wrap .w-checkbox-input { margin-left: 0; margin-right: 0; flex: none; float: none; }
  .consent-label { padding-left: 12px; }
  .submit-button-wrap { padding-top: 8px; }

  /* Footer: linksbündig, Navigation und Rechtliches nebeneinander */
  .footer-content, .footer-main-content, .footer-link-content, .footer-brand, .footer-brand-desc,
  .footer-copyright, .cta-content, .cta-button-desc { align-items: flex-start; text-align: left; }
  .footer-brand-desc { align-items: flex-start; }
  .footer-section .footer-desc, .footer-section .bs.footer-desc { text-align: left; width: 100%; max-width: 320px; }
  .footer-brand-desc { width: 100%; }
  .social-media-link { justify-content: flex-start; }
  .footer-section .social-media { margin-left: 0; padding-left: 0; justify-content: flex-start; }
  .footer-link-list { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; column-gap: 48px; row-gap: 24px; }
  .footer-link-wrap { flex-direction: column; align-items: flex-start; width: auto; row-gap: 8px; }
  .footer-link { align-items: flex-start; }
}
@media screen and (max-width: 479px) {
  .how-item-grid { grid-template-columns: 1fr !important; }
}
@keyframes dorsNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .service-slider .service-arrow-right { animation: none; } }

/* Telefon: Abstände um den Lime-Streifen */
@media screen and (max-width: 767px) {
  .hero-content { padding-bottom: 28px; }
  .hero-about .image-reveal-wrap { height: 40px; }
  .service-section { padding-top: 0; }
  .service-static-text { padding-top: 40px; }
}