/* Ergänzungen zum Next.js-Export (lubeca-it.de) */
picture { display: contents; }
.m-at::before { content: "@"; }

/* Kontakt: ShareSecret */
.contact-action--secret { grid-column: 1 / -1; min-height: 96px; background: rgba(234, 214, 46, .06); border-color: rgba(234, 214, 46, .45); }
.contact-button-secret { position: absolute; right: 22px; top: 20px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; font-size: 19px; }

/* Partner: einheitliche Logo-Größe, dezent grau, farbig beim Hover */
.partner-grid .partner-logo { background: #fff; }
.partner-grid .partner-logo img { width: 150px; height: 38px; max-width: 100%; max-height: none; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; }
/* optischer Ausgleich: kompakte, fette Wortmarken kleiner, Logos mit viel Innenabstand größer */
.partner-grid .partner-logo--hpe img, .partner-grid .partner-logo--dell img { height: 28px; }
.partner-grid .partner-logo--ingram img { height: 34px; }
.partner-grid .partner-logo--lenovo img { height: 30px; }
.partner-grid .partner-logo--veeam img { width: 132px; height: 44px; }
.partner-grid .partner-logo--ninja img { width: 190px; height: 56px; }
.partner-grid article:hover .partner-logo img { filter: grayscale(0) drop-shadow(0 10px 16px rgba(20, 23, 45, .12)); opacity: 1; }

/* Leistungen: Icons */
.service-list h3 { margin-top: 26px; }
.service-list h3::before { content: ""; display: block; width: 46px; height: 46px; margin-bottom: 20px; border: 1px solid rgba(157, 140, 255, .22); background: rgba(108, 80, 238, .08) no-repeat center / 24px; }
.service-list article:nth-child(3n+2) h3::before { border-color: rgba(40, 202, 117, .22); background-color: rgba(40, 202, 117, .06); }
.service-list article:nth-child(3n) h3::before { border-color: rgba(234, 214, 46, .2); background-color: rgba(234, 214, 46, .05); }
.service-list article:nth-child(1) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d8cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.service-list article:nth-child(2) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328ca75' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z%22/%3E%3C/svg%3E"); }
.service-list article:nth-child(3) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ead62e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%2216%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/%3E%3Crect x=%222%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/%3E%3Crect x=%229%22 y=%222%22 width=%226%22 height=%226%22 rx=%221%22/%3E%3Cpath d=%22M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3%22/%3E%3Cpath d=%22M12 12V8%22/%3E%3C/svg%3E"); }
.service-list article:nth-child(4) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d8cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%222%22 y=%223%22 width=%2220%22 height=%227%22 rx=%222%22/%3E%3Crect x=%222%22 y=%2214%22 width=%2220%22 height=%227%22 rx=%222%22/%3E%3Cpath d=%22M6 6.5h.01M6 17.5h.01M10 6.5h4M10 17.5h4%22/%3E%3C/svg%3E"); }
.service-list article:nth-child(5) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328ca75' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.service-list article:nth-child(6) h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ead62e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); }

/* So arbeiten wir: Ablauf mit verbundenen Schritten */
.process-grid { position: relative; gap: 40px; background: none; }
.process-grid::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc(33.333% - 28px); height: 2px; background: linear-gradient(90deg, var(--purple), var(--green), var(--yellow)); opacity: .55; }
.process-grid article { position: relative; padding: 0; background: none; }
.process-grid span { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--purple); border-radius: 50%; background: #eeefea; color: var(--ink); font-size: 14px; letter-spacing: .04em; }
.process-grid article:nth-child(2) span { border-color: var(--green); }
.process-grid article:nth-child(3) span { border-color: var(--yellow); }
.process-grid h3 { margin: 28px 0 12px; }
.process-grid p { max-width: 320px; }
@media (max-width: 880px) {
  .process-grid { gap: 34px; }
  .process-grid::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--purple), var(--green), var(--yellow)); }
  .process-grid article { padding-left: 80px; min-height: 56px; }
  .process-grid span { position: absolute; left: 0; top: 0; }
  .process-grid h3 { margin-top: 12px; }
}

/* Sanftes Einblenden beim Scrollen (nur wo unterstützt und erwünscht).
   "translate" statt "transform", damit die vorhandenen Hover-Effekte bleiben. */
@keyframes lubecaReveal { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .service-heading, .service-list article, .partner-heading, .process-heading, .process-grid article, .contact-action {
      /* "forwards" statt "both": vor dem Einblenden bleibt alles sichtbar,
         falls die Scroll-Zeitleiste in einem Browser nicht greift */
      animation: lubecaReveal linear forwards;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}