/* ==========================================================================
   Flamore — sub-pages (Leistungen, service pages, Über mich, Fragen, Kontakt)
   --------------------------------------------------------------------------
   Built on the shared components (components.css) and sections (sections.css).

     breadcrumb · page-head · steps · icon-cards · service-intro
     faq--solo · about-story · seal · faq-browser · chip · help-card
     contact-teaser · contact-list extras
   ========================================================================== */

@layer components {
  /* ----- breadcrumb (in the photo hero and in text page heads) ------------ */
  .breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .photo-hero .breadcrumb__list {
    justify-content: center;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-inline-end: var(--space-2);
    opacity: 0.5;
  }

  .breadcrumb a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
  }

  .breadcrumb a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .breadcrumb [aria-current] {
    color: var(--color-text);
  }

  /* ----- page-head: text-only page header (Fragen, Kontakt) --------------- */
  .page-head {
    padding-block-start: var(--section-space-sm);
  }

  .page-head > .container {
    --stack-space: var(--space-6);
  }

  .page-head + .section {
    padding-block-start: var(--section-space-sm);
  }

  .section-head--page {
    max-inline-size: 50rem;
  }

  .section-head--page h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 5.25rem);
    letter-spacing: var(--tracking-tight);
  }

  /* ----- steps: numbered process, vertical → horizontal ------------------- */
  .steps-wrap {
    container-type: inline-size;
  }

  .steps {
    --step-dot: 2.75rem;
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps__item {
    position: relative;
    padding-inline-start: calc(var(--step-dot) + var(--space-5));
    counter-increment: step;
  }

  .steps__item::before {
    content: counter(step);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    inline-size: var(--step-dot);
    block-size: var(--step-dot);
    border-radius: var(--radius-full);
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
    transition:
      background-color var(--duration-normal) var(--ease-standard),
      color var(--duration-normal) var(--ease-standard);
  }

  .steps__item:hover::before {
    background-color: var(--color-flame);
    color: var(--ink);
  }

  /* Connector line between the dots. */
  .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: calc(var(--step-dot) + var(--space-2)) calc(-1 * var(--space-6) + var(--space-2));
    inset-inline-start: calc(var(--step-dot) / 2);
    inline-size: 1px;
    background-color: var(--color-border-strong);
  }

  .steps__title {
    padding-block-start: 0.45rem;
    font-size: var(--text-xl);
  }

  .steps__text {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
  }

  @container (min-width: 48rem) {
    .steps {
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      gap: var(--space-6);
    }

    .steps__item {
      padding-inline-start: 0;
      padding-block-start: calc(var(--step-dot) + var(--space-4));
    }

    .steps__item:not(:last-child)::after {
      inset-block: calc(var(--step-dot) / 2) auto;
      inset-inline: calc(var(--step-dot) + var(--space-3)) calc(-1 * var(--space-6) + var(--space-3));
      inline-size: auto;
      block-size: 1px;
    }

    .steps__title {
      padding-block-start: 0;
    }
  }

  /* ----- icon-cards: icon + title + text on white cards ------------------- */
  .icon-cards {
    --grid-min: 14rem;
    --grid-space: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 3, 5, 6 items: max. three columns instead of an orphan row. */
  .icon-cards:is([data-count="3"], [data-count="5"], [data-count="6"]) {
    --grid-min: 20rem;
  }

  .icon-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: clamp(var(--space-5), 1rem + 1.5vw, var(--space-6));
    border-radius: var(--radius-xl);
    background-color: var(--color-bg);
    transition:
      transform var(--duration-slow) var(--ease-emphasized),
      box-shadow var(--duration-slow) var(--ease-standard);
  }

  .icon-card__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    transition: background-color var(--duration-normal) var(--ease-standard);
    --icon-size: 1.35rem;
  }

  .icon-card:hover .icon-card__icon {
    background-color: var(--color-flame);
  }

  @media (prefers-reduced-motion: no-preference) {
    .icon-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
  }

  .icon-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
  }

  .icon-card__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .highlights__panel,
  .values__panel {
    --stack-space: var(--space-7);
  }

  /* ----- service page --------------------------------------------------- */
  .service-intro__media img {
    aspect-ratio: 4 / 3;
  }

  @container (min-width: 48rem) {
    .service-intro__media img {
      aspect-ratio: 4 / 5;
    }
  }

  .service-intro__body {
    --stack-space: var(--space-5);
  }

  .service-intro__text {
    color: var(--color-text-muted);
  }

  .services__more {
    text-align: center;
  }

  .more-services > .container {
    --stack-space: var(--space-7);
  }

  /* FAQ section without an image (service pages): one centered column. */
  .faq__panel--solo .faq__body {
    inline-size: 100%;
    max-inline-size: 52rem;
    margin-inline: auto;
  }

  @media (min-width: 64rem) {
    .faq__panel--solo {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ----- about-story: sticky B/W portrait beside the story --------------- */
  .about-story__portrait {
    margin: 0;
  }

  .about-story__portrait img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-xl);
    filter: grayscale(1) contrast(1.05);
  }

  @container (min-width: 48rem) {
    .about-story__grid {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: start;
    }

    .about-story__portrait {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-5));
    }
  }

  .about-story__body {
    --stack-space: var(--space-5);
  }

  .about-story__text > p:first-child {
    font-size: var(--text-lg);
  }

  /* ----- seal: Meisterbetrieb badge + text ------------------------------- */
  .seal__card {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    padding: clamp(var(--space-5), 1rem + 3vw, var(--space-8));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    text-align: center;
  }

  @media (min-width: 40rem) {
    .seal__card:has(.seal__image) {
      grid-template-columns: auto minmax(0, 1fr);
      justify-items: start;
      align-items: center;
      gap: var(--space-7);
      text-align: start;
    }
  }

  .seal__image {
    inline-size: clamp(7rem, 5rem + 5vw, 9.5rem);
    margin: 0;
  }

  .seal__image img {
    inline-size: 100%;
    block-size: auto;
  }

  .seal__body {
    --stack-space: var(--space-3);
  }

  .seal__title {
    font-size: var(--text-2xl);
  }

  .seal__text {
    color: var(--color-text-muted);
  }

  /* ----- faq-browser (/fragen): sticky topics + help card, grouped lists -- */
  .faq-browser__grid {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 64rem) {
    .faq-browser__grid {
      grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
      gap: var(--space-9);
      align-items: start;
    }

    .faq-browser__aside {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-5));
    }
  }

  .faq-browser__aside {
    --stack-space: var(--space-6);
  }

  .faq-browser__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 64rem) {
    .faq-browser__topics {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .faq-browser__groups {
    display: grid;
    gap: var(--space-8);
  }

  .faq-browser__empty {
    max-inline-size: 40rem;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
  }

  .faq-group {
    --stack-space: var(--space-5);
    scroll-margin-block-start: calc(var(--header-height) + var(--space-5));
  }

  .faq-group__title {
    font-size: var(--text-2xl);
  }

  .faq-group .accordion__item {
    background-color: var(--color-bg-subtle);
  }

  .faq-group__more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-decoration: none;
  }

  .faq-group__more a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* ----- chip: pill link with a count ------------------------------------ */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5em 0.6em 0.5em 1.1em;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .chip:hover {
    border-color: var(--ink);
    background-color: var(--ink);
    color: var(--paper);
  }

  .chip__count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.6rem;
    padding: 0.1em 0.45em;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    color: var(--ink);
    font-size: var(--text-xs);
  }

  /* ----- help-card: small dark contact prompt ---------------------------- */
  .help-card {
    --stack-space: var(--space-4);
    padding: clamp(var(--space-5), 1rem + 1.5vw, var(--space-6));
    border-radius: var(--radius-2xl);
  }

  .help-card__title {
    font-size: var(--text-xl);
  }

  .help-card__text {
    color: var(--color-text-muted);
  }

  /* ----- contact teaser (home) + contact-list extras -------------------- */
  .contact-teaser__actions {
    padding-block-start: var(--space-2);
  }

  .contact-list__stack {
    display: grid;
    gap: var(--space-1);
  }

  .contact-list__item .contact-list__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    --icon-size: 0.9em;
  }

  /* ----- legal (Impressum, Datenschutz): sticky aside + prose ------------ */
  .legal {
    padding-block-start: var(--section-space-sm);
  }

  .legal__layout {
    display: grid;
    gap: var(--space-8);
  }

  @media (min-width: 64rem) {
    .legal__layout {
      grid-template-columns: minmax(17rem, 24rem) minmax(0, 46rem);
      gap: var(--space-10);
      align-items: start;
    }

    .legal__facts,
    .legal__toc {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-5));
    }
  }

  .legal__facts,
  .legal__toc {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-subtle);
  }

  .legal__facts {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
  }

  .legal__fact {
    display: grid;
    gap: var(--space-1);
  }

  .legal__fact + .legal__fact {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  .legal__fact dt {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .legal__fact dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .legal__fact a,
  .legal__toc a {
    color: inherit;
  }

  .legal__toc-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-inline-start: 1.4em;
    font-size: var(--text-sm);
    list-style: decimal;
  }

  .legal__toc-list ::marker {
    color: var(--color-text-muted);
  }

  .legal__toc a {
    text-decoration: none;
  }

  .legal__toc a:hover {
    text-decoration: underline;
  }

  .legal__body h2 {
    font-size: var(--text-2xl);
    scroll-margin-block-start: calc(var(--header-height) + var(--space-5));
  }

  .legal__body :where(h3) {
    font-size: var(--text-lg);
  }

  /* ----- not-found (404): copy + a "4 flame 4" numeral ------------------ */
  .not-found__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .not-found__layout {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
  }

  .not-found__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04em;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(7rem, 4rem + 14vw, 17rem);
    font-weight: var(--font-medium);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--mist-strong);
    user-select: none;
  }

  @media (max-width: 55.99rem) {
    .not-found__code {
      order: -1;
      justify-content: flex-start;
      font-size: clamp(5rem, 3rem + 10vw, 8rem);
    }
  }

  .not-found__flame {
    inline-size: 0.5em;
    block-size: 0.95em;
    color: var(--ink);
  }

  @media (prefers-reduced-motion: no-preference) {
    .not-found__flame {
      transform-origin: 50% 100%;
      animation: flicker 3.2s var(--ease-standard) infinite alternate;
    }
  }

  @keyframes flicker {
    0%   { transform: scale(1, 1) skewX(0deg); }
    35%  { transform: scale(0.97, 1.03) skewX(-1.5deg); }
    70%  { transform: scale(1.02, 0.98) skewX(1deg); }
    100% { transform: scale(0.99, 1.02) skewX(-0.5deg); }
  }

  .not-found__contact .contact-list {
    max-inline-size: 40rem;
  }
}