@layer components {
  /* ==========================================================================
   * Landing Page - ITS Benjamin Deutscher
   *
   * Swiss-design-inspired layout: typography-driven, generous whitespace,
   * thin dividers as structural motif, monospaced labels.
   * ========================================================================== */

  .landing {
    --landing-inline: max(var(--space-lg), 6vw);
    --landing-max: 68rem;
    scroll-behavior: smooth;
  }

  /* --------------------------------------------------------------------------
   * Navigation
   * Fixed, translucent bar with frosted glass effect.
   * -------------------------------------------------------------------------- */

  .landing-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-fixed);
    background: oklch(100% 0 0 / 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-block-end: 1px solid oklch(0% 0 0 / 0.06);
  }

  .landing-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-inline-size: var(--landing-max);
    margin-inline: auto;
    padding-block: var(--space-md);
    padding-inline: var(--landing-inline);
  }

  .landing-nav__logo {
    text-decoration: none;
  }

  .landing-nav__logo-its {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text);
  }

  .landing-nav__logo:hover {
    text-decoration: none;
  }

  .landing-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .landing-nav__link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
  }

  .landing-nav__link:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .landing-nav__cta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--color-text);
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
  }

  .landing-nav__cta:hover {
    background: var(--color-text);
    color: var(--color-background);
    text-decoration: none;
  }

  /* --------------------------------------------------------------------------
   * Hero
   * Full-viewport, bottom-aligned content for dramatic entry.
   * -------------------------------------------------------------------------- */

  .landing-hero {
    min-block-size: 100dvh;
    display: flex;
    align-items: flex-end;
    padding-block-end: var(--space-3xl);
    padding-inline: var(--landing-inline);
  }

  .landing-hero__content {
    max-inline-size: var(--landing-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .landing-hero__title {
    display: flex;
    flex-direction: column;
    font-size: clamp(3.5rem, 11vw, 9rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 0;
  }

  .landing-hero__line {
    display: block;
    animation: landing-reveal 0.7s var(--ease-out) both;
  }

  .landing-hero__line--light {
    font-weight: 300;
  }

  .landing-hero__line:nth-child(2) {
    animation-delay: 0.08s;
  }

  .landing-hero__line:nth-child(3) {
    animation-delay: 0.16s;
  }

  .landing-hero__tagline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-block-start: var(--space-xl);
    animation: landing-reveal 0.7s var(--ease-out) 0.35s both;
  }

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

  /* --------------------------------------------------------------------------
   * Section label - recurring structural motif
   * Monospaced, uppercase, underlined with a thin rule.
   * -------------------------------------------------------------------------- */

  .landing-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-2xl);
    padding-block-end: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
  }

  /* --------------------------------------------------------------------------
   * Services
   * Three-column grid with top-border cards. Border darkens on hover.
   * -------------------------------------------------------------------------- */

  .landing-services {
    padding-block: var(--space-3xl);
    padding-inline: var(--landing-inline);
    max-inline-size: var(--landing-max);
    margin-inline: auto;
  }

  .landing-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  .landing-service {
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
    transition: border-color 0.3s var(--ease-out);
  }

  .landing-service:hover {
    border-color: var(--color-text);
  }

  .landing-service__number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: block;
    margin-block-end: var(--space-lg);
  }

  .landing-service__title {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--line-tight);
    margin-block-end: var(--space-sm);
  }

  .landing-service__desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
  }

  /* --------------------------------------------------------------------------
   * Approach
   * Left-aligned prose block with a highlighted strong statement.
   * -------------------------------------------------------------------------- */

  .landing-approach {
    padding-block: var(--space-3xl);
    padding-inline: var(--landing-inline);
    max-inline-size: var(--landing-max);
    margin-inline: auto;
  }

  .landing-approach__content {
    max-inline-size: 38rem;
  }

  .landing-approach__text {
    font-size: var(--text-xl);
    line-height: var(--line-relaxed);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-md);
  }

  .landing-approach__text strong {
    color: var(--color-text);
    font-weight: 600;
  }

  /* --------------------------------------------------------------------------
   * Contact
   * Contact form section with Swiss-style minimal form fields.
   * -------------------------------------------------------------------------- */

  .landing-contact {
    padding-block: var(--space-3xl) var(--space-2xl);
    padding-inline: var(--landing-inline);
    max-inline-size: var(--landing-max);
    margin-inline: auto;
  }

  .landing-contact__text {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-lg);
  }

  /* --------------------------------------------------------------------------
   * Contact Form
   * -------------------------------------------------------------------------- */

  .landing-form {
    max-inline-size: 38rem;
  }

  .landing-form__flash {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-text);
    margin-block-end: var(--space-lg);
  }

  .landing-form__field {
    margin-block-end: var(--space-lg);
  }

  .landing-form__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-2xs);
  }

  .landing-form__input {
    display: block;
    inline-size: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s var(--ease-out);
  }

  .landing-form__input:focus {
    outline: none;
    border-color: var(--color-text);
  }

  textarea.landing-form__input {
    min-block-size: 8rem;
    resize: vertical;
  }

  .landing-form__field--error .landing-form__input {
    border-color: oklch(0.65 0.2 25);
  }

  .landing-form__error {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: oklch(0.65 0.2 25);
    margin-block-start: var(--space-3xs);
  }

  .landing-form__privacy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--line-relaxed);
    margin-block-end: var(--space-lg);
  }

  .landing-form__privacy a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s var(--ease-out);
  }

  .landing-form__privacy a:hover {
    color: var(--color-text);
  }

  .landing-form__submit {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text);
    background: transparent;
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--color-text);
    cursor: pointer;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
  }

  .landing-form__submit:hover {
    background: var(--color-text);
    color: var(--color-background);
  }

  /* --------------------------------------------------------------------------
   * Footer
   * Minimal bar with copyright and legal links.
   * -------------------------------------------------------------------------- */

  .landing-footer {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-3xl);
    padding-inline: var(--landing-inline);
  }

  .landing-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-inline-size: var(--landing-max);
    margin-inline: auto;
    padding-block: var(--space-lg);
  }

  .landing-footer__copy {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .landing-footer__links {
    display: flex;
    gap: var(--space-lg);
  }

  .landing-footer__links a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
  }

  .landing-footer__links a:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  /* --------------------------------------------------------------------------
   * Legal Pages (Impressum, Datenschutz)
   * Typography-driven prose layout matching the Swiss-style identity.
   * -------------------------------------------------------------------------- */

  .landing-legal {
    padding-block-start: calc(var(--space-3xl) + var(--space-2xl));
    padding-block-end: var(--space-2xl);
    padding-inline: var(--landing-inline);
    max-inline-size: var(--landing-max);
    margin-inline: auto;
  }

  .landing-legal__title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-3xl);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
  }

  .landing-legal__section {
    margin-block-end: var(--space-2xl);
  }

  .landing-legal__section h2 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--color-border);
  }

  .landing-legal__section h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-block-start: var(--space-xl);
    margin-block-end: var(--space-sm);
  }

  .landing-legal__section h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-xs);
  }

  .landing-legal__section p {
    font-size: var(--text-base);
    line-height: var(--line-relaxed);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-md);
    max-inline-size: 48rem;
  }

  .landing-legal__section a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s var(--ease-out);
  }

  .landing-legal__section a:hover {
    color: var(--color-text-secondary);
  }

  .landing-legal__section ul {
    padding-inline-start: var(--space-lg);
    margin-block-end: var(--space-md);
  }

  .landing-legal__section li {
    font-size: var(--text-base);
    line-height: var(--line-relaxed);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-xs);
    max-inline-size: 48rem;
  }

  .landing-legal__emphasis {
    font-weight: 500;
    color: var(--color-text);
  }

  .landing-legal__table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: var(--space-lg);
    font-size: var(--text-sm);
  }

  .landing-legal__table th,
  .landing-legal__table td {
    text-align: start;
    padding: var(--space-xs) var(--space-sm);
    border-block-end: 1px solid var(--color-border);
  }

  .landing-legal__table th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .landing-legal__table td {
    color: var(--color-text-secondary);
  }

  .landing-legal__source {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-block-start: var(--space-xl);
  }

  .landing-legal__source a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .landing-legal__source a:hover {
    color: var(--color-text);
  }

  /* --------------------------------------------------------------------------
   * Animations
   * -------------------------------------------------------------------------- */

  @keyframes landing-reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* --------------------------------------------------------------------------
   * Responsive
   * -------------------------------------------------------------------------- */

  @media (max-width: 768px) {
    .landing-nav__links {
      gap: var(--space-md);
    }

    .landing-nav__link {
      display: none;
    }

    .landing-hero {
      padding-block-end: var(--space-2xl);
    }

    .landing-services__grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }

    .landing-footer__inner {
      flex-direction: column;
      gap: var(--space-md);
      text-align: center;
    }
  }
}