/**
 * AMEPRES Tools V2 — approved component vocabulary.
 * Requires design-tokens.css and base.css.
 */

@layer at2-components {
  /* Header and navigation */
  .at2-header {
    position: sticky;
    z-index: 100;
    top: 0;
    padding-block: var(--at2-space-3);
    pointer-events: none;
  }

  .at2-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    /* Sicherheitsnetz gegen ueberlange Inhalte: die Kopfzeile darf niemals
       breiter werden als ihr Container, egal welcher Text hineingeraet.
       @since FS2 v0.51.3 (BF-01) */
    max-width: 100%;
    gap: var(--at2-space-2);
    min-height: 4.5rem;
    padding: var(--at2-space-2) var(--at2-space-3) var(--at2-space-2) var(--at2-space-5);
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-lg);
    background: rgba(7, 17, 25, 0.78);
    box-shadow: var(--at2-shadow-sm);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    pointer-events: auto;
  }

  .at2-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--at2-space-3);
    flex: 0 1 auto;
    min-width: 0;   /* erlaubt das Kuerzen statt des Ausbrechens */
    color: var(--at2-text);
    text-decoration: none;
  }

  .at2-brand-mark {
    position: relative;
    width: 2.65rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--at2-line-strong);
    border-radius: 0.85rem;
    background:
      linear-gradient(135deg, rgba(66, 212, 229, 0.24), rgba(79, 120, 244, 0.08)),
      var(--at2-ink-800);
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: inset 0 0 0 1px rgba(243, 247, 246, 0.03), var(--at2-glow-cyan);
  }

  .at2-brand-mark::after {
    position: absolute;
    content: "";
    width: 1.1rem;
    height: 1px;
    right: -0.3rem;
    bottom: 0.55rem;
    transform: rotate(-42deg);
    background: var(--at2-accent);
    box-shadow: var(--at2-glow-copper);
  }

  .at2-brand-text {
    display: grid;
    min-width: 0;
    line-height: 1.1;
  }

  /* Marken- und Anspruchszeile kuerzen, statt die Kopfzeile zu sprengen.
     @since FS2 v0.51.3 */
  .at2-brand-text strong,
  .at2-brand-text small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .at2-brand-text strong {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
  }

  .at2-brand-text small {
    margin-top: 0.28rem;
    color: var(--at2-text-dim);
    font-family: var(--at2-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .at2-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--at2-space-1);
    margin-inline: auto;
    min-width: 0;
  }

  /* Der Projekt-CTA erscheint als eigener Menuepunkt nur im Mobilmenue;
     auf dem Desktop steht er als Schaltflaeche rechts in der Kopfzeile.
     @since FS2 v0.51.3 */
  .at2-nav .at2-nav-cta {
    display: none;
  }

  @media (max-width: 76rem) {
    .at2-nav .at2-nav-cta {
      display: inline-flex;
      margin-top: var(--at2-space-2);
      border: 1px solid var(--at2-line-warm);
      background: rgba(242, 160, 102, 0.1);
      color: #ffd8bd;
    }
  }

  .at2-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--at2-space-4);
    white-space: nowrap;   /* kein Umbruch mitten im Menuepunkt (BF-01) */
    border-radius: var(--at2-radius-pill);
    color: var(--at2-text-soft);
    font-size: var(--at2-step--1);
    font-weight: 650;
    text-decoration: none;
    transition:
      color var(--at2-duration-fast) ease,
      background var(--at2-duration-fast) ease;
  }

  .at2-nav a:hover,
  .at2-nav a[aria-current="page"] {
    background: var(--at2-surface-soft);
    color: var(--at2-text);
  }

  .at2-nav a[aria-current="page"]::after {
    position: absolute;
    content: "";
    inset: auto 1rem 0.28rem;
    height: 2px;
    border-radius: 2px;
    background: var(--at2-primary);
  }

  .at2-nav-toggle {
    display: none;
    width: 2.75rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-sm);
    background: var(--at2-surface-soft);
    color: var(--at2-text);
    cursor: pointer;
  }

  .at2-nav-toggle-lines,
  .at2-nav-toggle-lines::before,
  .at2-nav-toggle-lines::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--at2-duration-fast) var(--at2-ease-standard);
  }

  .at2-nav-toggle-lines {
    position: relative;
  }

  .at2-nav-toggle-lines::before,
  .at2-nav-toggle-lines::after {
    position: absolute;
    left: 0;
    content: "";
  }

  .at2-nav-toggle-lines::before { transform: translateY(-0.38rem); }
  .at2-nav-toggle-lines::after { transform: translateY(0.38rem); }

  .at2-nav-open .at2-nav-toggle-lines { background: transparent; }
  .at2-nav-open .at2-nav-toggle-lines::before { transform: rotate(45deg); }
  .at2-nav-open .at2-nav-toggle-lines::after { transform: rotate(-45deg); }

  /* Buttons and links */
  .at2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--at2-space-2);
    min-height: 3rem;
    padding: 0.72rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--at2-radius-pill);
    font-size: 0.95rem;
    font-weight: 720;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform var(--at2-duration-fast) var(--at2-ease-standard),
      background var(--at2-duration-fast) ease,
      border-color var(--at2-duration-fast) ease,
      box-shadow var(--at2-duration-fast) ease;
  }

  .at2-button:hover {
    transform: translateY(-2px);
  }

  .at2-button--primary {
    background: var(--at2-primary);
    color: var(--at2-on-primary);
    box-shadow: 0 0.65rem 1.7rem rgba(66, 212, 229, 0.18);
  }

  .at2-button--primary:hover {
    background: var(--at2-primary-hover);
    box-shadow: 0 0.9rem 2.2rem rgba(66, 212, 229, 0.25);
  }

  .at2-button--secondary {
    border-color: var(--at2-line-strong);
    background: rgba(121, 232, 243, 0.055);
    color: var(--at2-text);
  }

  .at2-button--secondary:hover {
    border-color: var(--at2-primary);
    background: rgba(121, 232, 243, 0.1);
  }

  .at2-button--quiet {
    border-color: var(--at2-line);
    background: transparent;
    color: var(--at2-text-soft);
  }

  .at2-button--quiet:hover {
    border-color: var(--at2-line-strong);
    color: var(--at2-text);
  }

  .at2-button--warm {
    border-color: var(--at2-line-warm);
    background: rgba(242, 160, 102, 0.11);
    color: #ffd8bd;
  }

  .at2-button--sm {
    min-height: 2.55rem;
    padding-inline: 1rem;
    font-size: var(--at2-step--1);
  }

  .at2-text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--at2-space-2);
    color: var(--at2-primary);
    font-weight: 700;
  }

  .at2-text-link::after {
    content: "→";
    transition: transform var(--at2-duration-fast) var(--at2-ease-standard);
  }

  .at2-text-link:hover::after {
    transform: translateX(0.25rem);
  }

  /* Hero */
  .at2-hero {
    min-height: min(52rem, calc(100vh - 2rem));
    display: grid;
    align-items: center;
    padding-block: clamp(4.5rem, 8vw, 8rem);
  }

  .at2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(25rem, 0.98fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
  }

  .at2-hero-copy {
    position: relative;
    z-index: 2;
  }

  .at2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-3);
    margin-top: var(--at2-space-8);
  }

  .at2-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-3) var(--at2-space-6);
    margin: var(--at2-space-8) 0 0;
    padding: var(--at2-space-5) 0 0;
    border-top: 1px solid var(--at2-line);
    color: var(--at2-text-dim);
    font-family: var(--at2-font-mono);
    font-size: var(--at2-step--1);
    list-style: none;
  }

  .at2-trust-row li {
    display: flex;
    align-items: center;
    gap: var(--at2-space-2);
  }

  .at2-trust-row li::before {
    width: 0.42rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--at2-primary);
    box-shadow: 0 0 0.7rem rgba(66, 212, 229, 0.7);
    content: "";
  }

  .at2-data-visual {
    position: relative;
    min-height: 32rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-xl);
    background:
      radial-gradient(circle at 50% 50%, rgba(66, 212, 229, 0.12), transparent 26%),
      linear-gradient(145deg, rgba(14, 29, 39, 0.92), rgba(5, 11, 16, 0.74));
    box-shadow: var(--at2-shadow-lg), var(--at2-glow-cyan);
    isolation: isolate;
  }

  .at2-data-visual::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: 0.55;
    background-image:
      linear-gradient(rgba(121, 232, 243, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(121, 232, 243, 0.055) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    mask-image: radial-gradient(circle, black 8%, transparent 72%);
  }

  .at2-data-map {
    width: min(100%, 39rem);
    height: auto;
    overflow: visible;
  }

  .at2-stream-base,
  .at2-stream-flow {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  .at2-stream-base {
    stroke: rgba(180, 198, 197, 0.14);
    stroke-width: 1.2;
  }

  .at2-stream-flow {
    stroke: var(--at2-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 15;
    filter: drop-shadow(0 0 4px rgba(66, 212, 229, 0.72));
    animation: at2-stream 4.8s linear infinite;
  }

  .at2-stream-flow--warm {
    stroke: var(--at2-accent);
    filter: drop-shadow(0 0 4px rgba(242, 160, 102, 0.64));
    animation-duration: 6.2s;
  }

  .at2-stream-node {
    fill: var(--at2-ink-800);
    stroke: var(--at2-line-strong);
    stroke-width: 1.3;
  }

  .at2-stream-node-core {
    fill: rgba(66, 212, 229, 0.14);
    stroke: var(--at2-primary);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 14px rgba(66, 212, 229, 0.28));
  }

  .at2-stream-label {
    fill: var(--at2-text-dim);
    font-family: var(--at2-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .at2-stream-core-label {
    fill: var(--at2-text);
    font-family: var(--at2-font-sans);
    font-size: 15px;
    font-weight: 700;
  }

  @keyframes at2-stream {
    to { stroke-dashoffset: -68; }
  }

  /* Cards */
  .at2-card {
    position: relative;
    min-width: 0;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-lg);
    background: linear-gradient(150deg, var(--at2-surface), rgba(7, 17, 25, 0.88));
    box-shadow: var(--at2-shadow-sm);
  }

  .at2-card--interactive {
    transition:
      transform var(--at2-duration-standard) var(--at2-ease-standard),
      border-color var(--at2-duration-standard) ease,
      box-shadow var(--at2-duration-standard) ease;
  }

  .at2-card--interactive:hover,
  .at2-card--interactive:focus-within {
    transform: translateY(-0.35rem);
    border-color: var(--at2-line-strong);
    box-shadow: var(--at2-shadow-lg), var(--at2-glow-cyan);
  }

  .at2-card--warm {
    border-color: var(--at2-line-warm);
    background:
      linear-gradient(145deg, rgba(242, 160, 102, 0.09), transparent 46%),
      var(--at2-surface);
  }

  .at2-card-index {
    display: grid;
    place-items: center;
    width: 2.55rem;
    aspect-ratio: 1;
    margin-bottom: var(--at2-space-8);
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-sm);
    background: rgba(66, 212, 229, 0.07);
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: var(--at2-step--1);
    font-weight: 700;
  }

  .at2-card p {
    color: var(--at2-text-soft);
  }

  .at2-section-intro {
    max-width: 52rem;
    margin: 0 0 var(--at2-space-10);
    color: var(--at2-text-soft);
    font-size: var(--at2-step-1);
  }

  .at2-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--at2-space-4);
    margin-top: var(--at2-space-8);
    padding-top: var(--at2-space-5);
    border-top: 1px solid var(--at2-line);
  }

  .at2-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--at2-space-2);
    min-height: 1.8rem;
    padding-inline: 0.72rem;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-pill);
    background: rgba(66, 212, 229, 0.07);
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .at2-badge--warm {
    border-color: var(--at2-line-warm);
    background: rgba(242, 160, 102, 0.08);
    color: #ffc69d;
  }

  .at2-badge--success {
    border-color: rgba(88, 212, 155, 0.36);
    background: rgba(88, 212, 155, 0.08);
    color: var(--at2-success);
  }

  .at2-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--at2-space-2);
    margin-block: var(--at2-space-6);
  }

  .at2-card-price strong {
    color: var(--at2-text);
    font-size: var(--at2-step-3);
    letter-spacing: var(--at2-tracking-tight);
    line-height: 1;
  }

  .at2-card-price span {
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
  }

  .at2-check-list {
    display: grid;
    gap: var(--at2-space-3);
    margin: var(--at2-space-6) 0 0;
    padding: 0;
    color: var(--at2-text-soft);
    list-style: none;
  }

  .at2-check-list li {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: var(--at2-space-3);
  }

  .at2-check-list li::before {
    color: var(--at2-primary);
    content: "✓";
    font-weight: 800;
  }

  /* Dynamic product presentation
   * The first item spans both columns only when the total product count is odd.
   * Product data and image URLs remain server-driven in production. */
  .at2-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--at2-grid-gap);
  }

  .at2-product-card {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-lg);
    background: linear-gradient(150deg, var(--at2-surface), rgba(7, 17, 25, 0.88));
    box-shadow: var(--at2-shadow-sm);
    flex-direction: column;
  }

  /* Vollbreite erste Karte bei ungerader Produktzahl.
     Mindesthoehe statt fester Hoehe: bei schmalen Spalten waechst die Karte
     mit dem Inhalt, statt ihn abzuschneiden. @since FS2 v0.51.4 */
  .at2-product-card:first-child:nth-last-child(odd) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    min-height: 17rem;
    align-items: stretch;
  }

  /* Bildrahmen der Produktkarte.
     Ein eingerueckter Rahmen mit festem Seitenverhaeltnis, auf jeder Karte
     gleich. Das Bild liegt vollstaendig darin, behaelt sein eigenes
     Verhaeltnis und wird nie beschnitten (BF-02).

     Technischer Hinweis: Das Bild ist absolut positioniert und traegt die
     Einrueckung als eigenes Padding. Ein Rasterelement mit `height: 100%`
     bleibt bei `place-items: center` in seiner natuerlichen Groesse und
     wuerde am Rahmen abgeschnitten; ein ersetztes Element mit `width: auto`
     ignoriert gegenueberliegende `inset`-Werte. Beide Varianten wurden
     gemessen und verworfen.
     @since FS2 v0.51.4 */
  .at2-product-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    margin: var(--at2-space-4) var(--at2-space-4) 0;
    overflow: hidden;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-md);
    background:
      radial-gradient(circle at 50% 38%, rgba(66, 212, 229, 0.08), transparent 60%),
      var(--at2-ink-950);
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-product-media {
    aspect-ratio: auto;
    height: auto;
    margin: var(--at2-space-4);
    align-self: stretch;
  }

  .at2-product-media img {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--at2-space-4);
    object-fit: contain;   /* niemals cover: kein Beschnitt (BF-02) */
    object-position: center;
    transition: opacity var(--at2-duration-slow) var(--at2-ease-standard);
  }

  .at2-product-card:hover .at2-product-media img,
  .at2-product-card:focus-within .at2-product-media img {
    opacity: 0.96;
  }

  .at2-product-signal {
    position: absolute;
    z-index: 1;
    right: var(--at2-space-4);
    top: var(--at2-space-4);
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--at2-radius-pill);
    background: rgba(5, 11, 16, 0.78);
    color: var(--at2-text);
    font-family: var(--at2-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Ein einziger Link je Produktkarte.
     Der Titel traegt ihn und deckt per Pseudoelement die ganze Karte ab.
     Damit ist die Karte vollstaendig anklickbar, ohne dass Screenreader
     dreimal dasselbe Ziel vorlesen. Die Schaltflaeche darunter ist nur noch
     eine sichtbare Handlungsaufforderung und kein zweiter Link.
     @since FS2 v0.51.4 */
  .at2-card-link {
    color: inherit;
    text-decoration: none;
  }

  .at2-card-link::after {
    position: absolute;
    content: "";
    inset: 0;
    border-radius: inherit;
  }

  .at2-card-link:hover,
  .at2-card-link:focus-visible {
    text-decoration: underline;
  }

  .at2-product-card:focus-within {
    border-color: var(--at2-line-strong);
  }

  .at2-card-action {
    margin-top: auto;
  }

  /* Kartentext: gleich lange, ruhige Absaetze statt ganzer Beschreibungen. */
  .at2-product-copy .at2-product-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .at2-product-copy {
    display: flex;
    align-items: flex-start;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    flex: 1;
    flex-direction: column;
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-product-copy {
    padding: 1rem clamp(1.15rem, 2vw, 1.6rem);
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-card-title {
    margin-block-end: var(--at2-space-2);
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-product-copy p {
    margin-block: 0;
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-card-price {
    margin-block: var(--at2-space-3);
  }

  .at2-product-card:first-child:nth-last-child(odd) .at2-card-price strong {
    font-size: var(--at2-step-2);
  }

  .at2-product-copy p {
    color: var(--at2-text-soft);
  }

  .at2-product-copy .at2-button {
    margin-top: auto;
  }

  .at2-custom-tool-band {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--at2-space-8);
    align-items: center;
    margin-top: var(--at2-grid-gap);
    padding: clamp(1.35rem, 2.5vw, 2rem);
    border: 1px solid var(--at2-line-warm);
    border-radius: var(--at2-radius-lg);
    background: linear-gradient(120deg, rgba(242, 160, 102, 0.09), rgba(79, 120, 244, 0.06));
  }

  .at2-custom-tool-band .at2-card-title {
    margin-bottom: 0;
  }

  .at2-custom-tool-band p {
    margin: 0;
    color: var(--at2-text-soft);
  }

  .at2-ai-band {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: var(--at2-grid-gap);
    padding: clamp(1.6rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-lg);
    background:
      radial-gradient(circle at 9% 50%, rgba(66, 212, 229, 0.12), transparent 23%),
      linear-gradient(145deg, rgba(79, 120, 244, 0.08), rgba(7, 17, 25, 0.94));
  }

  .at2-ai-band p:last-child {
    max-width: 66rem;
    color: var(--at2-text-soft);
  }

  .at2-ai-orbit {
    display: grid;
    place-items: center;
    width: clamp(7rem, 12vw, 10rem);
    aspect-ratio: 1;
    border: 1px solid var(--at2-line-strong);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(66, 212, 229, 0.2) 0 18%, transparent 19%),
      repeating-radial-gradient(circle, transparent 0 21%, rgba(66, 212, 229, 0.14) 22% 23%);
    box-shadow: var(--at2-glow-cyan);
  }

  .at2-ai-orbit span {
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: var(--at2-step-2);
    font-weight: 800;
  }

  /* Reference portfolio with complete, uncropped desktop and mobile views. */
  .at2-reference-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--at2-grid-gap);
  }

  .at2-ref-span-4 { grid-column: span 4; }
  .at2-ref-span-6 { grid-column: span 6; }
  .at2-ref-span-8 { grid-column: span 8; }
  .at2-ref-span-12 { grid-column: span 12; }

  .at2-reference-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-lg);
    background: linear-gradient(150deg, var(--at2-surface), rgba(7, 17, 25, 0.9));
    box-shadow: var(--at2-shadow-sm);
    transition:
      transform var(--at2-duration-standard) var(--at2-ease-standard),
      border-color var(--at2-duration-standard) ease,
      box-shadow var(--at2-duration-standard) ease;
  }

  .at2-reference-card:hover,
  .at2-reference-card:focus-within {
    transform: translateY(-0.25rem);
    border-color: var(--at2-line-strong);
    box-shadow: var(--at2-shadow-lg), var(--at2-glow-cyan);
  }

  .at2-reference-card--warm {
    border-color: var(--at2-line-warm);
    background: linear-gradient(150deg, rgba(242, 160, 102, 0.08), rgba(7, 17, 25, 0.94));
  }

  .at2-reference-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  }

  .at2-reference-card--showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  }

  .at2-device-stage {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(5.5rem, 1fr);
    gap: clamp(0.7rem, 1.6vw, 1.2rem);
    align-items: end;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid var(--at2-line);
    background:
      radial-gradient(circle at 24% 22%, rgba(66, 212, 229, 0.14), transparent 32%),
      linear-gradient(145deg, rgba(79, 120, 244, 0.13), rgba(5, 11, 16, 0.88));
  }

  .at2-reference-card--feature .at2-device-stage {
    min-height: 29rem;
    border-right: 1px solid var(--at2-line);
    border-bottom: 0;
  }

  .at2-device-desktop,
  .at2-device-mobile {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 0.28rem solid #101820;
    background: var(--at2-ink-950);
    box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, 0.38);
  }

  .at2-device-desktop {
    aspect-ratio: 2 / 1;
    border-radius: 0.72rem;
  }

  .at2-device-desktop::before {
    content: none;
  }

  .at2-device-mobile {
    aspect-ratio: 414 / 817;
    border-radius: 1.1rem;
  }

  .at2-device-mobile::before {
    content: none;
  }

  .at2-device-desktop img,
  .at2-device-mobile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }

  .at2-reference-card .at2-reference-copy {
    align-self: auto;
    padding: clamp(1.35rem, 2.5vw, 2rem);
  }

  .at2-reference-card .at2-reference-copy p {
    color: var(--at2-text-soft);
  }

  .at2-reference-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 27rem;
    padding: 0;
  }

  .at2-reference-visual {
    position: relative;
    min-height: 20rem;
    overflow: hidden;
    border-right: 1px solid var(--at2-line);
    background:
      radial-gradient(circle at 35% 35%, rgba(242, 160, 102, 0.18), transparent 30%),
      linear-gradient(145deg, rgba(79, 120, 244, 0.16), rgba(5, 11, 16, 0.8));
  }

  .at2-reference-visual::before,
  .at2-reference-visual::after {
    position: absolute;
    content: "";
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-md);
    background: rgba(7, 17, 25, 0.68);
    box-shadow: var(--at2-shadow-sm);
  }

  .at2-reference-visual::before {
    inset: 15% 13% 25% 18%;
    transform: rotate(-4deg);
  }

  .at2-reference-visual::after {
    inset: 28% 20% 12% 10%;
    transform: rotate(5deg);
  }

  .at2-reference-wordmark {
    position: absolute;
    z-index: 2;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    color: var(--at2-text);
    font-family: var(--at2-font-editorial);
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-style: italic;
    white-space: nowrap;
  }

  .at2-reference-copy {
    align-self: center;
    padding: clamp(1.6rem, 4vw, 3.2rem);
  }

  /* Process */
  .at2-process {
    counter-reset: at2-process;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--at2-space-3);
    margin: var(--at2-space-10) 0 0;
    padding: 0;
    list-style: none;
  }

  .at2-process li {
    counter-increment: at2-process;
    position: relative;
    padding: var(--at2-space-5);
    border-top: 1px solid var(--at2-line-strong);
    color: var(--at2-text-soft);
  }

  .at2-process li::before {
    display: block;
    margin-bottom: var(--at2-space-4);
    color: var(--at2-primary);
    font-family: var(--at2-font-mono);
    font-size: var(--at2-step--1);
    content: "0" counter(at2-process);
  }

  .at2-process strong {
    display: block;
    margin-bottom: var(--at2-space-2);
    color: var(--at2-text);
  }

  /* Forms */
  .at2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--at2-space-5);
  }

  .at2-field {
    display: grid;
    gap: var(--at2-space-2);
  }

  .at2-field--full {
    grid-column: 1 / -1;
  }

  .at2-label {
    color: var(--at2-text);
    font-size: var(--at2-step--1);
    font-weight: 700;
  }

  .at2-required {
    color: var(--at2-accent);
  }

  .at2-help,
  .at2-error {
    margin: 0;
    font-size: var(--at2-step--1);
  }

  .at2-help { color: var(--at2-text-dim); }
  .at2-error { color: var(--at2-danger); }

  .at2-input,
  .at2-select,
  .at2-textarea {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.78rem 0.95rem;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-sm);
    background: rgba(5, 11, 16, 0.72);
    color: var(--at2-text);
    caret-color: var(--at2-primary);
    transition:
      border-color var(--at2-duration-fast) ease,
      box-shadow var(--at2-duration-fast) ease,
      background var(--at2-duration-fast) ease;
  }

  .at2-input::placeholder,
  .at2-textarea::placeholder {
    color: var(--at2-text-dim);
    opacity: 1;
  }

  .at2-input:hover,
  .at2-select:hover,
  .at2-textarea:hover {
    border-color: rgba(180, 198, 197, 0.3);
  }

  .at2-input:focus,
  .at2-select:focus,
  .at2-textarea:focus {
    outline: none;
    border-color: var(--at2-primary);
    background: var(--at2-ink-900);
    box-shadow: 0 0 0 4px rgba(66, 212, 229, 0.12);
  }

  .at2-input[aria-invalid="true"],
  .at2-select[aria-invalid="true"],
  .at2-textarea[aria-invalid="true"] {
    border-color: var(--at2-danger);
    box-shadow: 0 0 0 3px rgba(255, 126, 137, 0.11);
  }

  .at2-textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .at2-checkbox {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--at2-space-3);
    align-items: start;
    color: var(--at2-text-soft);
  }

  .at2-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--at2-primary);
  }

  /* Notices and statuses */
  .at2-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--at2-space-4);
    align-items: start;
    padding: var(--at2-space-5);
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-md);
    background: rgba(66, 212, 229, 0.07);
    color: var(--at2-text-soft);
  }

  .at2-notice::before {
    display: grid;
    place-items: center;
    width: 1.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--at2-primary);
    color: var(--at2-on-primary);
    font-family: var(--at2-font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    content: "i";
  }

  .at2-notice strong {
    display: block;
    margin-bottom: var(--at2-space-1);
    color: var(--at2-text);
  }

  .at2-notice--success {
    border-color: rgba(88, 212, 155, 0.4);
    background: rgba(88, 212, 155, 0.07);
  }

  .at2-notice--success::before {
    background: var(--at2-success);
    content: "✓";
  }

  .at2-notice--warning {
    border-color: rgba(242, 196, 103, 0.4);
    background: rgba(242, 196, 103, 0.07);
  }

  .at2-notice--warning::before {
    background: var(--at2-warning);
    content: "!";
  }

  .at2-notice--danger {
    border-color: rgba(255, 126, 137, 0.4);
    background: rgba(255, 126, 137, 0.07);
  }

  .at2-notice--danger::before {
    background: var(--at2-danger);
    content: "×";
  }

  /* CTA and footer */
  .at2-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--at2-space-8);
    align-items: center;
    padding: clamp(1.8rem, 5vw, 4rem);
    overflow: hidden;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-xl);
    background:
      radial-gradient(circle at 90% 20%, rgba(66, 212, 229, 0.16), transparent 24rem),
      linear-gradient(140deg, var(--at2-ink-800), var(--at2-ink-900));
    box-shadow: var(--at2-shadow-lg);
  }

  .at2-footer {
    margin-top: auto;
    padding-block: var(--at2-space-12);
    border-top: 1px solid var(--at2-line);
    background: rgba(5, 11, 16, 0.72);
  }

  .at2-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--at2-space-5);
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
  }

  .at2-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-5);
  }

  /* ------------------------------------------------------------------
     Kopfzeile und Navigation
     Eigener Umbruchpunkt bei 76rem: die sechs festen Menuepunkte brauchen
     zusammen mit Wortmarke und Projekt-CTA rund 1150 Pixel. Unterhalb davon
     wird auf das Menue umgeschaltet, damit kein Eintrag umbricht (BF-01).
     @since FS2 v0.51.3
     ------------------------------------------------------------------ */
  @media (max-width: 76rem) {
    .at2-header-inner {
      flex-wrap: wrap;
    }

    .at2-nav-toggle {
      display: grid;
      place-items: center;
      margin-left: auto;
    }

    .at2-header-action {
      margin-left: var(--at2-space-2);
    }

    .at2-nav {
      order: 3;
      width: 100%;
      display: none;
      align-items: stretch;
      padding-block: var(--at2-space-3) var(--at2-space-2);
      border-top: 1px solid var(--at2-line);
      margin-top: var(--at2-space-3);
    }

    .at2-nav-open .at2-nav {
      display: grid;
    }

    .at2-nav a {
      justify-content: space-between;
      border-radius: var(--at2-radius-sm);
      white-space: normal;
    }

    .at2-nav a[aria-current="page"]::after {
      inset: 0.7rem 0.3rem 0.7rem auto;
      width: 2px;
      height: auto;
    }
  }

  /* Responsive components */
  @media (max-width: 68rem) {
    .at2-hero-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .at2-data-visual {
      min-height: 27rem;
    }

    .at2-process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .at2-ref-span-4,
    .at2-ref-span-6,
    .at2-ref-span-8 {
      grid-column: span 6;
    }

    .at2-custom-tool-band {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .at2-custom-tool-band > p {
      grid-column: 1;
    }

    .at2-custom-tool-band > .at2-button {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }

  @media (max-width: 48rem) {
    .at2-header {
      padding-block: var(--at2-space-2);
    }

    .at2-header-inner {
      min-height: 3.75rem;
      padding: var(--at2-space-2) var(--at2-space-2) var(--at2-space-2) var(--at2-space-3);
      border-radius: var(--at2-radius-md);
    }

    .at2-brand-text small,
    .at2-header-action {
      display: none;
    }

    .at2-hero {
      min-height: auto;
      padding-block: 4rem 3rem;
    }

    .at2-hero-actions .at2-button {
      flex: 1 1 100%;
    }

    .at2-data-visual {
      min-height: 22rem;
      border-radius: var(--at2-radius-lg);
    }

    .at2-process,
    .at2-form-grid,
    .at2-reference-feature,
    .at2-reference-card--feature,
    .at2-reference-card--showcase,
    .at2-cta-panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .at2-product-grid,
    .at2-product-card:first-child:nth-last-child(odd),
    .at2-custom-tool-band,
    .at2-ai-band,
    .at2-reference-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .at2-product-card:first-child:nth-last-child(odd),
    .at2-ref-span-4,
    .at2-ref-span-6,
    .at2-ref-span-8,
    .at2-ref-span-12,
    .at2-custom-tool-band > p,
    .at2-custom-tool-band > .at2-button {
      grid-column: 1;
    }

    .at2-product-card:first-child:nth-last-child(odd) {
      height: auto;
    }

    .at2-custom-tool-band > .at2-button {
      grid-row: auto;
      width: 100%;
    }

    /* Einspaltig: auch die vollbreite erste Karte bekommt denselben
       Bildrahmen wie alle anderen. @since FS2 v0.51.4 */
    .at2-product-card:first-child:nth-last-child(odd) {
      min-height: 0;
    }

    .at2-product-card:first-child:nth-last-child(odd) .at2-product-media {
      aspect-ratio: 3 / 2;
      height: auto;
      margin: var(--at2-space-4) var(--at2-space-4) 0;
    }

    .at2-ai-orbit {
      width: 7rem;
    }

    .at2-reference-card--feature .at2-device-stage {
      min-height: 22rem;
      border-right: 0;
      border-bottom: 1px solid var(--at2-line);
    }

    .at2-reference-card--showcase .at2-device-stage {
      border-right: 0;
      border-bottom: 1px solid var(--at2-line);
    }

    .at2-reference-visual {
      border-right: 0;
      border-bottom: 1px solid var(--at2-line);
    }

    .at2-process li {
      padding-inline: 0;
    }

    .at2-cta-panel .at2-button {
      width: 100%;
    }

    .at2-footer-inner,
    .at2-footer nav {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .at2-stream-flow {
      stroke-dasharray: 2 12;
      animation: none;
    }

    .at2-product-media img {
      transition: none;
    }
  }
}