/* ==========================================================================
   Komponenten — geteilt zwischen Portalseite und beiden OnePagern
   ========================================================================== */

@layer components {

  /* --- Sektion ---------------------------------------------------------- */
  .section {
    padding-block: var(--sp-3xl);   /* 112px */
  }

  /* Die abgesetzte Flaeche traegt den Zweitton der jeweiligen Einheit —
     Sand auf der Dachseite, Stahlblau auf consulting, Petrol auf 2nd look.
     Ohne Ueberschreibung faellt sie auf das neutrale paper-soft zurueck. */
  .section--soft { background: var(--ton-flaeche); }

  /* Haarlinien oben und unten — setzen die Flaeche vom Weiss ab */
  .section--lines {
    border-block: 1px solid var(--ton-linie);
  }
  .section--tight { padding-block: var(--sp-2xl); }   /* 96px */
  .section--slim { padding-block: var(--sp-lg); }

  .kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--grey);
    margin-block-end: var(--sp-xs);
  }

  .lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ink);
    max-width: var(--measure);
  }

  /* --- Buttons ---------------------------------------------------------- */
  .button {
    display: inline-block;
    padding: var(--sp-xs) var(--sp-md);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: var(--fw-normal);
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  /* Flaeche im abgedunkelten Logo-Gruen, Schrift dunkel — 6,34:1.
     Die hellere Limette bleibt den Akzenten vorbehalten. */
  .button--primary {
    background: var(--aktion);
    color: var(--ink);
    border: 2px solid var(--aktion);
    font-weight: var(--fw-semi);
  }

  .button--primary:hover,
  .button--primary:focus-visible {
    background: var(--aktion-hover);
    border-color: var(--aktion-hover);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  .button--ghost {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--border);
  }

  .button--ghost:hover,
  .button--ghost:focus-visible {
    color: var(--ink);
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    .button:hover,
    .button:focus-visible { transform: none; }
  }

  /* Telefonlink mit Limette-Unterstreichung */
  .tel-link {
    color: var(--ink);
    text-decoration: none;
    border-block-end: 2px solid var(--lime);
    padding-block-end: 1px;
    transition: border-color var(--dur) var(--ease);
  }

  .tel-link:hover,
  .tel-link:focus-visible {
    color: var(--ink);
    border-block-end-color: var(--green);
  }

  /* --- Karte ------------------------------------------------------------
     Rahmenbreite ist in allen Zustaenden konstant. Ein Wechsel der Breite
     verschiebt den Innenraum und laesst den Inhalt springen — deshalb
     wechselt ausschliesslich die Farbe. */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    padding: var(--sp-md);
    background: var(--paper);
    border: var(--border-w) solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition:
      border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  .card:hover,
  .card:focus-visible,
  .card:focus-within {
    border-color: var(--lime);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }

  @media (prefers-reduced-motion: reduce) {
    .card:hover,
    .card:focus-visible,
    .card:focus-within { transform: none; }
  }

  .card__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
  }

  .card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-lead);
    color: var(--grey);
  }

  /* --- Karten-Raster ohne Breakpoint-Umschaltung ------------------------ */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--sp-md);
  }

  /* --- Ablauf: nummerierte Schritte -------------------------------------
     Die Ziffer sitzt als weisser Kreis mit Limette-Rand mittig auf der
     oberen Kartenkante, die Karte laesst oben Platz dafuer. */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;                     /* 28px */
    align-items: stretch;
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (max-width: 56.25rem) {
    .steps { grid-template-columns: 1fr; }
  }

  .steps__item {
    counter-increment: step;
    position: relative;
    padding-block-start: 1.5625rem;   /* 25px — halbe Ziffernhoehe */
    display: flex;
    flex-direction: column;
  }

  .steps__num {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.125rem;            /* 50px */
    block-size: 3.125rem;
    border-radius: 50%;
    background: var(--paper);
    border: 4px solid var(--lime);
    box-shadow: 0 6px 14px rgb(184 196 24 / 0.3);
    color: var(--lime-text);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    transition:
      background-color var(--dur) var(--ease),
      color var(--dur) var(--ease);
  }

  .steps__num::before { content: counter(step); }

  .steps__card {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3.75rem var(--sp-md) var(--sp-md);   /* 60px oben fuer die Ziffer */
    text-align: center;
    background: var(--paper);
    border: var(--border-w) solid var(--border-soft);
    border-radius: 1rem;              /* 16px */
    box-shadow: 0 14px 34px rgb(23 52 4 / 0.14);
    transition:
      border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  .steps__title {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi-bold);
    margin-block-end: var(--sp-2xs);
  }

  .steps__text {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.75;
    margin: 0;
  }

  /* Hervorhebung: bei Hover, Tastaturfokus und im automatischen Durchlauf */
  .steps__item:hover .steps__card,
  .steps__item:focus-within .steps__card,
  .steps__item.is-active .steps__card {
    border-color: var(--lime);
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgb(23 52 4 / 0.2);
  }

  .steps__item:hover .steps__num,
  .steps__item:focus-within .steps__num,
  .steps__item.is-active .steps__num {
    background: var(--lime);
    color: var(--ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .steps__item:hover .steps__card,
    .steps__item:focus-within .steps__card,
    .steps__item.is-active .steps__card { transform: none; }
  }

  /* --- Zeitleiste -------------------------------------------------------- */
  .timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    border-inline-start: 2px solid var(--lime-line);
    padding-inline-start: var(--sp-md);
  }

  .timeline__item { position: relative; }

  .timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1 * var(--sp-md) - 6px);
    inset-block-start: 0.75em;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--lime);
  }

  .timeline__year {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.1;
  }

  .timeline__title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    margin-block: var(--sp-3xs) var(--sp-3xs);
  }

  .timeline__text {
    font-size: var(--fs-sm);
    color: var(--grey);
    max-width: var(--measure);
  }

  /* --- Siegelleiste ------------------------------------------------------ */
  .seals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    text-align: center;
  }

  .seals__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--grey);
  }

  .seals__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-lg) var(--sp-xl);
  }

  /* Fremdmarken behalten ihre eigenen Farben — kein Filter, keine Einfaerbung */
  .seals img {
    block-size: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
    inline-size: auto;
    max-inline-size: none;
  }

  /* --- Aufzaehlung mit Limette-Punkt ------------------------------------- */
  .dot-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs) var(--sp-lg);
  }

  .dot-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-2xs);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
  }

  .dot-list li::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--lime);
  }

  /* --- Text-Bild-Sektion mit klebendem Bild ------------------------------ */
  .text-media {
    display: grid;
    gap: var(--sp-xl);
    align-items: start;
  }

  .text-media__media {
    display: flex;
    justify-content: center;
  }

  .text-media__media img {
    inline-size: 100%;
    aspect-ratio: var(--bild-format, 3 / 4);
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(23 52 4 / 0.08);
  }

  @media (min-width: 56.25rem) {          /* 900px */
    .text-media {
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-gap);       /* 64px */
    }

    .text-media--reverse .text-media__media { order: -1; }

    .text-media__media {
      position: sticky;
      inset-block-start: 8.75rem;         /* 140px — Klebepunkt wie im Entwurf */
      align-self: flex-start;
      transform: translateZ(0);           /* stabilisiert sticky in Safari */
    }

    /* Sticky wirkt nur, wenn die Textspalte laenger ist als das Bild.
       Die Spalte ist volle Bildschirmhoehe, der Text darin mittig; das Bild
       misst 70vh. Die Differenz von 30vh ist die Klebestrecke. */
    .text-media__body {
      min-block-size: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Hoehe fuehrt, Breite folgt aus dem Seitenverhaeltnis — wie im Entwurf.
       max-inline-size: none hebt die Begrenzung aus dem Reset auf: Bei hohen
       Fenstern wird das Bild dadurch breiter als seine Spalte und ragt
       mittig darueber hinaus. Genau das macht es dort so praesent.
       Der Wrapper faengt den Ueberstand mit overflow-x: clip ab. */
    .text-media__media img {
      block-size: 70vh;
      max-block-size: 70vh;
      inline-size: auto;
      max-inline-size: none;
    }
  }

  /* --- Scroll-Reveal -----------------------------------------------------
     Startzustand nur, wenn JS laeuft (html.js). Ohne JS bleibt alles
     sichtbar — die Seite darf nie von einem Skript abhaengen. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
      opacity: 1;
      transform: none;
    }
  }
}