/* Lyska custom styles (Unterseiten, Orange-Branding, Blob-Hintergrund, Portal-Link).
   Ergänzt das Webflow-Stylesheet. Präfix: lk- */

/* Markenfarbe: Lyska/Fox Orange ersetzt das frühere Grün.
   Der Variablenname --green bleibt, damit alle Webflow-Regeln weiter greifen. */
:root {
  --green: #f74b00;
}

.button.big {
  color: #fff;
}

.button:hover {
  color: #fff;
}

/* Hover der großen CTAs: dunkleres Orange (überschreibt hartkodiertes Grün #d3ff50) */
.button.big:hover {
  background-color: #d63e00;
  color: #fff;
}

/* Headline auf der dunklen Sektion in Weiß statt Orange */
.h2.green {
  color: #fff;
}

/* Orange Konturlinie unter den dunklen Sektionen entfernen */
.section-black,
.lk-dark {
  border-bottom-style: none;
}

/* Wobble-/Blob-Hintergrund (adaptiert von kinshofer.lyska.io, in Hellblau-Weiß).
   Einsatz: <section class="... has-blobs"> mit .lk-blobs als erstem Kind
   und einem versteckten SVG-Filter #lk-goo pro Seite. */
.lk-goo-svg {
  position: absolute;
  width: 0;
  height: 0;
}

/* Element+Klasse für höhere Spezifität: gewinnt gegen die Gradient-Regeln
   von .lk-page-hero / .lk-section.alt unabhängig von der Reihenfolge. */
section.has-blobs,
header.has-blobs {
  /* Ganz, ganz leichtes Hellblau als Grundton (lt. Farbmuster von Moritz),
     die Blobs laufen als rein weiße, subtile Highlights darüber. */
  background-color: #f0f4fc;
  background-image: none;
  position: relative;
  overflow: hidden;
}

.has-blobs > *:not(.lk-blobs) {
  position: relative;
  z-index: 1;
}

.lk-blobs {
  --lk-blob-size: 680px;
  pointer-events: none;
  position: absolute;
  inset: 0;
  /* Kein Goo-Filter: der verstärkt Alpha so stark, dass weiße Blobs auf hellem
     Grund zu deckenden Flächen werden. Reiner Blur ergibt weiche weiße Wolken. */
  filter: blur(48px);
}

.lk-blob {
  border-radius: 50%;
  width: var(--lk-blob-size);
  height: var(--lk-blob-size);
  opacity: 0.6;
  position: absolute;
  top: calc(50% - var(--lk-blob-size) / 2);
  left: calc(50% - var(--lk-blob-size) / 2);
}

.lk-b1 {
  background: radial-gradient(circle, #ffffffe6 0, transparent 60%);
  left: 2%;
  top: calc(30% - var(--lk-blob-size) / 2);
  transform-origin: calc(50% - 200px) 60%;
  animation: 28s ease-in-out infinite lkMoveInCircle;
}

.lk-b2 {
  background: radial-gradient(circle, #ffffffcc 0, transparent 60%);
  left: 62%;
  top: calc(60% - var(--lk-blob-size) / 2);
  transform-origin: calc(50% + 180px) 40%;
  animation: 22s ease-in-out infinite reverse lkMoveInCircle;
}

.lk-b3 {
  background: radial-gradient(circle, #ffffffd9 0, transparent 60%);
  left: 30%;
  top: calc(20% - var(--lk-blob-size) / 2);
  transform-origin: calc(50% - 100px) calc(50% + 150px);
  animation: 30s ease-in-out infinite lkMoveVertical;
}

.lk-b4 {
  background: radial-gradient(circle, #ffffffbf 0, transparent 60%);
  left: 80%;
  top: calc(15% - var(--lk-blob-size) / 2);
  transform-origin: calc(50% + 100px) calc(50% - 120px);
  animation: 26s ease-in-out infinite lkMoveHorizontal;
}

.lk-b5 {
  background: radial-gradient(circle, #ffffffb3 0, transparent 60%);
  width: calc(var(--lk-blob-size) * 0.7);
  height: calc(var(--lk-blob-size) * 0.7);
  left: 45%;
  top: calc(80% - var(--lk-blob-size) * 0.35);
  transform-origin: calc(50% - 50px) calc(50% + 200px);
  animation: 34s ease-in-out infinite lkMoveInCircle;
}

@keyframes lkMoveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes lkMoveVertical {
  0% { transform: translateY(-40%); }
  50% { transform: translateY(40%); }
  100% { transform: translateY(-40%); }
}

@keyframes lkMoveHorizontal {
  0% { transform: translateX(-40%) translateY(-15%); }
  50% { transform: translateX(40%) translateY(15%); }
  100% { transform: translateX(-40%) translateY(-15%); }
}

@media (prefers-reduced-motion: reduce) {
  .lk-blob {
    animation: none;
  }
}

/* Kundenportal-Link in der Top-Navi (ganz rechts, nach dem CTA-Button) */
.lk-portal-link {
  order: 10000;
  color: #333;
  align-items: center;
  gap: 7px;
  margin-right: 20px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: flex;
}

.lk-portal-link:hover {
  color: #000;
}

.lk-portal-link svg {
  flex-shrink: 0;
}

/* Zentrierte CTA-Zeile auf der Landingpage */
.lk-center {
  text-align: center;
  width: 100%;
}

/* Kontakt-Kasten: feste 700px-Höhe aufheben, damit der Inhalt
   (inkl. Porträt) nicht über den Kasten hinausläuft */
.container-10 {
  height: auto;
  min-height: 700px;
  padding-top: 50px;
  padding-bottom: 60px;
}

/* Rundes Porträt im Kontakt-Kasten */
.lk-portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 35px auto 0;
  box-shadow: 0 4px 18px #0f1e3c26;
}

.lk-page-hero {
  padding: 180px 20px 60px;
  text-align: center;
  background-image: linear-gradient(#fff 34%, #f0f4fe 65%, #fff);
}

.lk-page-hero h1 {
  color: #000;
  letter-spacing: -2px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 58px;
  margin: 0 auto 25px;
  max-width: 800px;
}

.lk-page-hero p {
  color: #727272;
  letter-spacing: 1px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.lk-section {
  padding: 60px 20px;
}

.lk-section.alt {
  background-image: linear-gradient(#fff, #f0f4fe 65%, #fff);
}

.lk-container {
  max-width: 1100px;
  margin: 0 auto;
}

.lk-label {
  display: inline-block;
  color: #fff;
  background-color: var(--green);
  border-radius: 5px;
  padding: 4px 12px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.lk-section h2 {
  color: #000;
  letter-spacing: -1px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  margin: 0 0 15px;
}

.lk-section .lk-intro {
  color: #727272;
  letter-spacing: 1px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  max-width: 720px;
  margin-bottom: 40px;
}

/* Intro-Zeile mit Illustration rechts */
.lk-intro-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.lk-illu {
  width: 300px;
  max-width: 38%;
  height: auto;
  flex-shrink: 0;
}

.lk-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lk-cards.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.lk-cards.cols-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.lk-card {
  background-color: #fff;
  border: 1px solid #e4e9f1;
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 2px 10px #0f1e3c0a;
}

.lk-card h3 {
  color: #000;
  font-family: "Inter", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0 0 10px;
}

.lk-card p {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 24px;
  margin: 0;
}

.lk-card .lk-tag {
  display: inline-block;
  color: #333;
  background-color: var(--light-blue);
  border-radius: 5px;
  padding: 3px 10px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 12px 6px 0 0;
}

/* Produkt-Logo im Seiten-Hero (statt Text-Label) */
.lk-product-logo {
  display: block;
  width: 260px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 30px;
}

/* App-Screenshots (Produktseiten) */
.lk-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e4e9f1;
  border-radius: 14px;
  box-shadow: 0 10px 34px #0f1e3c1f;
}

.lk-shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.lk-shot-caption {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 10px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lk-shot-grid {
    grid-template-columns: 1fr;
  }
}

/* Produkt-Landingpages: Preiskarten, Listen, Schritte, Tag-Wolke, Teaser */
.lk-card .lk-price {
  color: #000;
  font-family: "Inter", Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 4px 0 14px;
}

.lk-card .lk-price small {
  color: #727272;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.lk-card ul {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 24px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.lk-card ul li {
  margin-bottom: 6px;
}

.lk-card.featured {
  border: 2px solid var(--green);
}

.lk-step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--green);
  color: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.lk-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lk-tags-cloud .lk-tag {
  display: inline-block;
  color: #333;
  background-color: var(--light-blue);
  border-radius: 5px;
  padding: 6px 14px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.lk-more {
  display: inline-block;
  color: #333;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  margin-top: 14px;
}

.lk-more:hover {
  color: #000;
}

.lk-cta-note {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 14px;
}

.lk-note {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 22px;
  margin-top: 25px;
}

/* Dunkle Akzent-Sektion, an .section-black angelehnt */
.lk-dark {
  background-color: #353535;
  background-image: radial-gradient(circle, #414141, #000);
  border-bottom: 5px solid var(--green);
  text-align: center;
  padding: 80px 20px;
}

.lk-dark h2 {
  color: var(--green);
  letter-spacing: -1px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  margin: 0 0 20px;
}

.lk-dark p {
  color: #e4e4e4;
  letter-spacing: 1px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  max-width: 720px;
  margin: 0 auto;
}

/* FAQ */
.lk-faq {
  max-width: 800px;
  margin: 0 auto;
}

.lk-faq details {
  background-color: #fff;
  border: 1px solid #e4e9f1;
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 12px;
}

.lk-faq summary {
  color: #000;
  font-family: "Inter", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.lk-faq details p {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 24px;
  margin: 12px 0 0;
}

/* Logo-Link in der Navbar (übernimmt die Flex-Order des .image) */
.lk-logo-link {
  order: -9999;
  display: flex;
  align-items: center;
}

/* Footer-Linkzeile */
.lk-footer-links {
  margin-top: 15px;
}

.lk-footer-links a {
  color: #727272;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  margin-right: 18px;
}

.lk-footer-links a:hover {
  color: #000;
}

@media screen and (max-width: 991px) {
  .lk-cards.cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Auf Mobile übernimmt das Burger-Menü den Kundenportal-Link */
  .lk-portal-link {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .lk-page-hero {
    padding-top: 140px;
  }

  .lk-page-hero h1 {
    font-size: 34px;
    letter-spacing: -1px;
    line-height: 38px;
  }

  .lk-cards,
  .lk-cards.cols-3,
  .lk-cards.cols-4 {
    grid-template-columns: 1fr;
  }

  .lk-intro-row {
    display: block;
  }

  .lk-illu {
    display: block;
    max-width: 260px;
    margin: 0 auto 30px;
  }

  .lk-section h2 {
    font-size: 28px;
    line-height: 33px;
  }
}

/* Inter läuft etwa 14 % breiter als das frühere SF Pro Display.
   Die Navigationsleiste hat eine feste Breite (746 px) und lief dadurch
   in die zweite Zeile um. Statt an der Schriftgröße zu drehen, wird die
   Seitenpolsterung der Links von 15 px auf 12 px reduziert: gemessen
   717 px Bedarf bei 746 px Platz, wieder einzeilig. */
.navi-link {
  padding-left: 12px;
  padding-right: 12px;
}

/* Bilder haben width/height-Attribute, damit der Browser das Seitenverhältnis
   kennt und beim Laden kein Layout-Sprung entsteht (CLS). Ohne height:auto
   wirkt das height-Attribut aber wie eine feste CSS-Höhe: sobald max-width
   die Breite beschneidet, bleibt die Höhe stehen und das Bild wird verzerrt.
   height:auto ist der vorgeschriebene Gegenpart — das Seitenverhältnis aus
   den Attributen bleibt erhalten, die Höhe skaliert mit. */
img[width][height] {
  height: auto;
}