/* ==========================================================================
   KREAGENCY (KA) BLUEPRINT FRAMEWORK V2.0
   ==========================================================================
   Author:  Marco Blindenbacher / Kreagency
   Basis:   Kreagency V3.0 + ATF
   Logic:   Attribute-Based Styling (ABS)
   Stack:   WordPress + Bricks 2.2 + Advanced Themer Framework

   INDEX
   ───────────────────────────────────────────────────────────────────────────
   01. SEKTION HERO   
   02. SEKTION INTRO
   03. SEKTION TEXT
   04. SEKTION FLIESSTEXT
   05. SEKTION TEXT MEDIA (REPEATER)
   06. FEATURES
   07. PROFILE
   08. PREISE
   09. ZAHLEN
   10. CTA
   11. ARTIKEL
   12. KUNDENSTIMMEN
   13. KONTAKT 
   14. BLOG
   15. EVENTS
   16. LOGO & PARTNER
   17. TAGLINE
   18. FOOTER CTA
   19. FOOTER
   ───────────────────────────────────────────────────────────────────────────
========================================================================== */

/* ==========================================================================
   01. SECTION HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  justify-content: center;
  block-size: 100dvh;

  @media (max-width: 1024px) { block-size: 90dvh; }
  @media (max-width: 767px)  { block-size: 70dvh; }
  @media (max-width: 478px)  { block-size: 60dvh; }

  & .hero__content-wrapper {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--at-content-gap);
    text-align: start;
  }

  & .hero__headline {
    inline-size: 22ch;

    & span { color: var(--at-accent); }
  }

  & .hero__lede {
    font-size: var(--at-text--m);
    inline-size: 45ch;
  }

  & .hero__background {
    position: absolute;
    inset: 0;  
    z-index: -1;
  }

  & .hero__media {
    position: absolute;
    inset: 0;  
    inline-size: 100%;
    block-size: 100%;
    z-index: -1;
    object-fit: cover;
  }
    
 & .hero__media:not(.tag),
   .hero__media img {
   object-fit: cover;
}

  & .hero__overlay {
    position: absolute;
    inset: 0;  
    background: var(--at-black-t-6);
  }
}

/* ==========================================================================
   02. SECTION INTRO
   ========================================================================== */
.intro {
  align-items: flex-start;
  text-align: start;

  & .intro__headline {
    inline-size: 100%;
  }

  & .intro__lede {
    inline-size: 100%;
  }

  @media (max-width: 1024px) {
    grid-template-columns: var(--at-grid--1);
  }
}

/* ==========================================================================
   03. SEKTION TEXT
   ========================================================================== */
.text {
  row-gap: var(--at-container-gap);
}

.text__content {
  --rule-width: .1rem;
  --rule-type: solid;
  --rule-color: var(--card-border);
  columns: 2;
  column-gap: 6rem;
  column-rule: var(--rule-width) var(--rule-type) var(--rule-color);
}

@media (max-width: 768px) {
  .text__content {
    column-count: 1;
    column-rule: none;
  }
}
/* ==========================================================================
   04. SEKTION FLIESSTEXT
   ========================================================================== */

/* Rich Text (Global Class) */
.rich-text > * + * {
  margin-block: var(--at-space--s);
}

.rich-text ul,
.rich-text ol {
  list-style-position: outside;
  padding-inline-start: 1.4rem;
  margin-inline-start: 0;
}

.rich-text ul { list-style-type: disc; }

.rich-text li {
  padding-inline-start: 0;
  margin-block-end: 0.5rem;
}

.rich-text li::marker { color: var(--at-secondary); }

.rich-text li a,
.rich-text a {
  text-decoration: none;
  color: var(--at-primary-l-6);
  transition: color 0.25s ease;
}

.rich-text a:hover,
.rich-text li a:hover { color: var(--at-secondary); }

/* Button (Global Class) */
.ka-button { --btn-icon-size: var(--at-text--l); }

.prose {
  & p {
    margin-block: 0.75em;
    line-height: 1.5;
  }

  /* Headings */
  & h1, & h2, & h3, & h4, & h5, & h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
  }
  & h2 { font-size: var(--at-heading--m); }
  & h3 { font-size: var(--at-heading--s); }
  & h4 { font-size: var(--at-heading--xs); }

  /* Listen – kein Einzug */
  & ul,
  & ol {
    padding-inline-start: 0;
    margin-block: 0.75em;
    list-style: none;
  }

  & li {
    margin-block: 0.4em;
    padding-inline-start: 1.5em;
    position: relative;
  }

  /* Bulletpoints in span-Farbe */
  & ul > li::before {
    content: "\2022";
    color: var(--span-color);
    font-weight: 700;
    position: absolute;
    inset-inline-start: 0;
    line-height: 1.5;
  }

  /* Nummerierte Liste */
  & ol {
    counter-reset: prose-counter;
  }
  & ol > li {
    counter-increment: prose-counter;
  }
  & ol > li::before {
    content: counter(prose-counter) ".";
    color: var(--span-color);
    font-weight: 700;
    position: absolute;
    inset-inline-start: 0;
    line-height: 1.75;
  }

  /* Blockquote */
  & blockquote {
    border-inline-start: 3px solid var(--span-color);
    padding-inline-start: 1.25em;
    margin-inline: 0;
    margin-block: 1.25em;
    font-style: italic;
    color: var(--at-primary-l-4);
  }

  /* Links */
  & a {
    color: var(--span-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--at-duration--medium);

    &:hover {
      opacity: 0.8;
    }
  }

  /* Trennlinie */
  & hr {
    border: none;
    border-block-start: 1px solid var(--at-primary-l-3);
    margin-block: 2em;
  }

  /* Code */
  & code {
    font-size: 0.875em;
    background: var(--at-primary-l-2);
    padding: 0.15em 0.4em;
    border-radius: var(--at-radius--s);
  }

  /* Erstes Element kein oberer Abstand */
  & > *:first-child { margin-block-start: 0; }
  & > *:last-child  { margin-block-end: 0; }
}
/* ==========================================================================
   05. SECTION CONTENT MEDIA
   ========================================================================== */
.content-media {
  display: flex;
  flex-direction: column;  
  row-gap: var(--at-container-gap);

  & .content-media__inner {
    gap: calc(var(--at-grid-gap--l) * 2);
    align-items: stretch;
  }

  & .content-media__content-wrapper {
    row-gap: var(--at-content-gap);
    justify-content: flex-start;
  }

  & .content-media__media-wrapper {
    display: grid;
    grid-template-columns: var(--at-grid--2);
    gap: var(--at-grid-gap--l);
    align-items: flex-start;
  }
}

/* ==========================================================================
   06. SECTION FEATURES
   ========================================================================== */
.features {
  row-gap: var(--at-container-gap);

  & .feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--at-content-gap);

    & .feature-card__media {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  & .features__inner {
    row-gap: var(--at-container-gap);
  }

  & .features__grid {
    align-items: stretch;
    align-content: stretch;
  }

  & .features__card {
    display: flex;
    row-gap: var(--at-content-gap);
    flex-direction: column;

    & .features__icon-wrapper {
      inline-size: 50px;
      block-size: 50px;
      border-radius: var(--at-radius--s);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      & [data-ka-icon],
      & svg,
      & i,
      & img {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        block-size: 100%;
        line-height: 1;
      }
    }

    & .features__headline {
      font-size: var(--at-heading--s);
    }

    & .features__link {
      margin-block-start: auto;
    }

    & .features__lede ul {
      list-style: none;
      padding: 0;
      margin-block: 1.5rem;

      & li {
        display: flex;
        align-items: flex-start;
        gap: 0.5em;
        padding: 0;
        margin-block: 1rem;

        &::before {
          content: "✓";
          color: var(--span-color);
          font-weight: 700;
          flex-shrink: 0;
          line-height: 1.5;
        }
      }
    }
  }
}

/* ==========================================================================
   06b. SECTION FEATURE STACK
   ========================================================================== */
.feature-stack {

  & .feature-stack__inner {
    --stackspacing: 50px;
  }

  & .feature-stack__spacing {
    display: grid;
    position: relative;
    --stackspacing: 50px;
    --offset: 80px;
    gap: calc(var(--at-grid-gap--l) * 2);

  & .feature-stack__content-wrapper {
    position: sticky;
    row-gap: var(--at-content-gap);
    padding: 2rem;
  }

  & .feature-stack__card-wrapper {
    padding-inline-start: 0;
    row-gap: var(--at-container-gap);
  }

  & .feature-stack-card {
    position: sticky;
    transition: all var(--at-duration--medium);
    row-gap: var(--at-content-gap--xs);

    & .feature-stack-card__headline {
      font-size: var(--at-heading--s);  
      text-wrap: pretty;
    }
  }

  & .icon-wrapper {
    justify-content: center;
    align-items: center;
  }
  }
}

/* ==========================================================================
   08. SECTION PREISE / SEPARATES CSS PREISLISTE.CSS IN FLUENT SNIPPET
   ========================================================================== */
/* ==========================================================================
   09. SECTION ZAHLEN
   ========================================================================== */
.numbers__inner {
  row-gap: var(--at-container-gap);
}

.numbers-card {
  row-gap: var(--at-content-gap);
  align-items: center;

  & .numbers-card__number {
    font-size: var(--at-text--3xl);
    text-align: center;
    color: var(--span-color);
    font-weight: 600;
  }

  & .numbers-card__headline {
    font-size: var(--at-heading--xs);
    text-align: center;
  }

  & .numbers-card__text {
    font-size: var(--at-text--xs);
    text-align: center;
  }
}

/* ==========================================================================
   10. SECTION CTA
   ========================================================================== */
.cta {
  row-gap: var(--at-container-gap);
  overflow: hidden;

  & .cta__inner {
    align-items: stretch;
  }

  & .cta__content-wrapper {
    row-gap: var(--at-content-gap);
    padding-block: var(--at-space--xl);
    padding-inline: var(--at-space--m);
    justify-content: center;
  }

  & .cta__media {
    inline-size: 100%;
    block-size: 100%;
  }
}
/* ==========================================================================
   11. SECTION ARTIKEL
   ========================================================================== */
/* ==========================================================================
   12. SECTION KUNDENSTIMMEN
   ========================================================================== */
.customer-review__inner {
  row-gap: var(--at-container-gap);
}

.customer-review-card {
  grid-template-rows: subgrid;
  grid-row: span 3;
  display: grid;
  align-items: stretch;

  & .customer-review-card__header {
    flex-direction: row;
    align-items: center;
    column-gap: var(--at-grid-gap);
    row-gap: var(--at-grid-gap);
  }

  & .customer-review-card__avatar {
    inline-size: 5rem;
    block-size: 5rem;
    border-radius: var(--at-radius-full);
  }

  & .customer-review-card__icon-wrapper {
    padding-block: var(--at-space--xs);
    padding-inline-end: var(--at-space--xs);
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: var(--at-content-gap--xs);
  }
}

/* ==========================================================================
   13. SECTION KONTAKT / SEPARATES CSS KONTAKT.CSS IN FLUENT SNIPPET
   ========================================================================== */
/* ==========================================================================
   14. SECTION BLOG
   ========================================================================== */
/* ==========================================================================
   15. SECTION EVENTS
   ========================================================================== */
.events {
  row-gap: var(--at-container-gap);

  & .event-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--at-content-gap);

    & .event-card__media {
      inline-size: 100%;
      block-size: 100%;
    }

    & .event-card__meta-data {
      font-size: var(--at-text--xs);
    }
  }
}
/* ==========================================================================
   16. SECTION LOGO & PARTNER
   ========================================================================== */
.logo {
  row-gap: var(--at-container-gap);

  & .logo__slider {
    padding-block: var(--at-space--3xs);
    mask-image: linear-gradient(to right, transparent, var(--background) 15%, var(--background) 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, var(--background) 15%, var(--background) 85%, transparent);
  }

  & .logo__slide {
    display: flex;
    flex-wrap: nowrap;
    padding: var(--at-space--m);
  }

  & .logo__svg {
    display: block;
    inline-size: 25rem;
    block-size: auto;
    min-block-size: 10em;
    min-inline-size: 10em;
    background: var(--card-bg);
  }
}
/* ==========================================================================
   17. TAGLINE
   ========================================================================== */
.tagline {
  order: -1;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--span-color) !important;
  inline-size: fit-content;
}

/* ==========================================================================
   18. FOOTER CTA
   ========================================================================== */
/* Styles bereits unter 10. CTA definiert */


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.footer {
  z-index: 10;
  position: relative;
  row-gap: var(--at-container-gap);

  & .footer__inner {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    column-gap: var(--at-content-gap--s);

    @media (max-width: 767px) {
      align-items: flex-start;
    }
  }

  & .footer__heading {
    font-size: var(--at-heading--xs);
  }

  & .footer__list {
    padding-block: 0;
    padding-inline: 0;
    flex-direction: row;
    list-style: none;
    column-gap: var(--at-space--2xs);
    row-gap: var(--at-space--2xs);
    justify-content: flex-end;
    margin-block: 0;

    @media (max-width: 767px) {
      justify-content: flex-start;
    }
  }

  & .footer__list-item {
    display: flex;
    flex-direction: column;
    padding-block: 0;
  }

  & .footer__list-icon {
    font-size: var(--at-text--xl);
    transition: var(--at-duration--medium);

    &:hover {
      color: var(--at-accent);
    }
  }
}

.subfooter {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: var(--at-text--s);
  column-gap: var(--at-grid-gap--l);
  row-gap: var(--at-grid-gap--l);

  @media (max-width: 767px) {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }

  & .subfooter__copyright {
    color: var(--at-primary-l-6);
    font-size: var(--at-text--xs);
    transition: var(--at-duration--medium);
  }

  & .subfooter__nav-list {
    display: flex;
    column-gap: var(--at-content-gap--s);
    row-gap: var(--at-content-gap--s);
    flex-wrap: wrap;
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;

    @media (max-width: 478px) {
      flex-direction: column;
    }

  & .subfooter__nav-list__nav-link {
    font-size: var(--at-text--xs);
    }      
  }
}