/** AMEPRES Tools V2 productive frontend and V1-template compatibility skin. */
@layer at2-runtime {
  .at2-runtime {
    --bg: var(--at2-bg);
    --bg-elev-1: var(--at2-bg-elevated);
    --bg-elev-2: var(--at2-ink-800);
    --bg-elev-3: var(--at2-ink-750);
    --text: var(--at2-text);
    --text-soft: var(--at2-text-soft);
    --text-body: var(--at2-text-soft);
    --text-dim: var(--at2-text-dim);
    --primary: var(--at2-primary);
    --primary-strong: var(--at2-primary-hover);
    --accent: var(--at2-accent);
    --success: var(--at2-success);
    --warning: var(--at2-warning);
    --danger: var(--at2-danger);
    --line: var(--at2-line);
    --line-strong: var(--at2-line-strong);
    --border: var(--at2-line);
    --bg-card: var(--at2-surface);
    margin: 0;
  }

  .at2-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
  .at2-runtime-hero { padding-top: clamp(5rem, 9vw, 8rem); }
  .at2-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--at2-space-2); padding-block: var(--at2-space-4); color: var(--at2-text-dim); font-size: var(--at2-step--1); }
  .at2-breadcrumbs a { color: var(--at2-text-soft); }
  .at2-section-intro { max-width: 72ch; margin-bottom: var(--at2-space-10); color: var(--at2-text-soft); }
  .at2-product-description { color: var(--at2-text-soft); }
  .at2-product-description > :first-child { margin-top: 0; }
  .at2-product-description > :last-child { margin-bottom: 0; }
  /* Neutrale Systemflaeche, wenn ein Produkt noch kein Bild hat.
     Fuellt denselben Rahmen wie ein echtes Produktbild. @since FS2 v0.51.4 */
  .at2-product-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--at2-primary); font: 800 clamp(2rem, 7vw, 5rem)/1 var(--at2-font-mono); background: radial-gradient(circle, rgba(66,212,229,.15), transparent 58%); }
  .at2-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

  .at2-product-detail-hero { padding-block: clamp(3rem, 7vw, 7rem); }
  .at2-product-detail-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(22rem, .96fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .at2-product-detail-media { min-height: 26rem; margin: 0; 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% 40%, rgba(66,212,229,.12), transparent 58%), var(--at2-ink-950); box-shadow: var(--at2-shadow-lg), var(--at2-glow-cyan); }
  .at2-product-detail-media img { width: 100%; height: 100%; max-height: 36rem; object-fit: contain; }
  .at2-product-detail-copy .at2-display { margin-block: var(--at2-space-5); font-size: clamp(2.45rem, 5vw, 5.2rem); }
  .at2-product-detail-price { display: flex; gap: var(--at2-space-3); align-items: baseline; margin-top: var(--at2-space-7); }
  .at2-product-detail-price strong { color: var(--at2-text); font-size: var(--at2-step-3); }
  .at2-product-detail-price span { color: var(--at2-text-dim); }
  .at2-preview-note { max-width: 54ch; margin-top: var(--at2-space-5); color: var(--at2-text-dim); font-size: var(--at2-step--1); }
  .at2-product-content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .at2-product-article { max-width: 50rem; }
  .at2-product-article p { color: var(--at2-text-soft); font-size: var(--at2-step-1); line-height: 1.78; }
  .at2-checkout-preview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 65vh; }

  /* Existing templates retain their field names, actions and controller data.
     These aliases make every mirrored state part of the same V2 system. */
  .at2-runtime .container { width: min(calc(100% - (2 * var(--at2-gutter))), var(--at2-content-wide)); margin-inline: auto; }
  .at2-runtime .section { padding-block: clamp(3.5rem, 7vw, 7rem); }
  .at2-runtime .hero { padding-block: clamp(4.5rem, 8vw, 8rem); }
  .at2-runtime .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); gap: var(--at2-grid-gap); align-items: start; }
  .at2-runtime .panel,
  .at2-runtime .card { padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--at2-line); border-radius: var(--at2-radius-lg); background: linear-gradient(150deg, var(--at2-surface), rgba(7,17,25,.9)); box-shadow: var(--at2-shadow-sm); }
  .at2-runtime .hero__eyebrow { margin-bottom: var(--at2-space-4); color: var(--at2-primary); font: 650 var(--at2-step--1)/1.4 var(--at2-font-mono); letter-spacing: var(--at2-tracking-wide); text-transform: uppercase; }
  .at2-runtime :where(.hero, .section) h1 { margin: 0 0 var(--at2-space-6); color: var(--at2-text); font-size: var(--at2-step-4); line-height: var(--at2-leading-tight); letter-spacing: var(--at2-tracking-tight); }
  .at2-runtime :where(.hero, .section) h2 { color: var(--at2-text); font-size: var(--at2-step-3); line-height: var(--at2-leading-heading); letter-spacing: var(--at2-tracking-tight); }
  .at2-runtime :where(.hero, .section) h3 { color: var(--at2-text); font-size: var(--at2-step-1); }
  .at2-runtime :where(.hero, .section) p,
  .at2-runtime :where(.hero, .section) li { color: var(--at2-text-soft); }
  .at2-runtime .hero__actions,
  .at2-runtime .product-card__actions,
  .at2-runtime .cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--at2-space-3); margin-top: var(--at2-space-6); }
  .at2-runtime .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .72rem 1.2rem; border: 1px solid var(--at2-line-strong); border-radius: var(--at2-radius-pill); background: rgba(121,232,243,.055); color: var(--at2-text); font-weight: 720; text-decoration: none; cursor: pointer; }
  .at2-runtime .btn--primary { border-color: transparent; background: var(--at2-primary); color: var(--at2-on-primary); }
  .at2-runtime .btn--secondary { border-color: var(--at2-line-warm); background: rgba(242,160,102,.1); color: #ffd8bd; }
  .at2-runtime .btn:hover { transform: translateY(-2px); }
  .at2-runtime .hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--at2-space-3); margin-top: var(--at2-space-8); }
  .at2-runtime .meta-card { padding: var(--at2-space-4); border-top: 1px solid var(--at2-line-strong); }
  .at2-runtime .meta-card strong,
  .at2-runtime .meta-card span { display: block; }
  .at2-runtime .meta-card span { color: var(--at2-text-dim); font-size: var(--at2-step--1); }
  .at2-runtime .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--at2-grid-gap); }
  .at2-runtime .product-card { display: flex; flex-direction: column; }
  .at2-runtime .product-card__actions { margin-top: auto; }
  .at2-runtime .product-card__price { margin-block: var(--at2-space-5); color: var(--at2-text); font-size: var(--at2-step-2); font-weight: 750; }
  .at2-runtime .badge { display: inline-flex; padding: .35rem .7rem; border-radius: var(--at2-radius-pill); background: rgba(66,212,229,.09); color: var(--at2-primary); font-size: .78rem; font-weight: 700; }
  .at2-runtime .section__header,
  .at2-runtime .cta-banner { display: flex; justify-content: space-between; gap: var(--at2-space-6); align-items: center; margin-bottom: var(--at2-space-8); }
  .at2-runtime .fs-article { position: relative; max-width: 58rem; margin-inline: auto; }
  /* Lange, nicht umbrechbare Zeichenketten im Datenbanktext — vollstaendige Adressen
     und der zerschossene Platzhalter in AGB Paragraf 3 — trieben die Dokumentbreite
     auf dem Smartphone um bis zu 300 px auseinander (BUG-011).
     @since FS2 v0.51.8 */
  .at2-runtime .fs-article__content { color: var(--at2-text-soft); overflow-wrap: anywhere; }
  .at2-runtime :where(.fs-article, .at2-prose) :where(p, li, td, th, dd, a, strong, em, span) {
    overflow-wrap: anywhere;
  }

  /* Ueberschriften brauchen eine eigene Behandlung: lange deutsche Komposita wie
     "Geschaeftsbedingungen" oder "Datenschutzerklaerung" passen in der Titelgroesse
     nicht in 311 px und trieben die Dokumentbreite weiter auseinander. Zuerst
     Silbentrennung — das Dokument traegt `lang="de"`, also trennt der Browser
     sauber —, `break-word` nur als Netz fuer den Fall, dass keine Trennstelle passt.
     @since FS2 v0.51.8 */
  .at2-runtime :where(.fs-article, .at2-prose) :where(h1, h2, h3, h4),
  .at2-runtime .fs-article__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .at2-runtime .fs-article__content a { color: var(--at2-primary); }
  .at2-runtime .fs-article__content :where(h2,h3) { margin-top: 2em; }

  .at2-runtime :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 3.15rem; padding: .78rem .95rem; border: 1px solid var(--at2-line); border-radius: var(--at2-radius-sm); background: rgba(5,11,16,.72); color: var(--at2-text); }
  .at2-runtime textarea { min-height: 9rem; resize: vertical; }
  .at2-runtime label { color: var(--at2-text); font-weight: 700; }
  .at2-runtime :where(input,select,textarea):focus { outline: none; border-color: var(--at2-primary); box-shadow: 0 0 0 4px rgba(66,212,229,.12); }
  .at2-runtime .form-group,
  .at2-runtime .field { margin-bottom: var(--at2-space-5); }
  .at2-runtime .alert,
  .at2-runtime .notice,
  .at2-runtime .error-message,
  .at2-runtime .success-message { padding: var(--at2-space-5); border: 1px solid var(--at2-line-strong); border-radius: var(--at2-radius-md); background: rgba(66,212,229,.07); color: var(--at2-text-soft); }
  .at2-runtime table { width: 100%; border-collapse: collapse; color: var(--at2-text-soft); }
  .at2-runtime :where(th,td) { padding: .8rem; border-bottom: 1px solid var(--at2-line); text-align: left; }
  .at2-runtime .mock-window { overflow: hidden; border: 1px solid var(--at2-line); border-radius: var(--at2-radius-lg); background: var(--at2-ink-950); }
  .at2-runtime .mock-window__top { display: flex; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--at2-line); color: var(--at2-text-dim); }
  .at2-runtime .mock-grid { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; padding: .5rem; }
  .at2-runtime .mock-column--stack { display: grid; gap: .5rem; }
  .at2-runtime .mock-image { width: 100%; height: 100%; object-fit: contain; background: var(--at2-ink-950); }
  .at2-runtime .mock-block { min-height: 8rem; background: linear-gradient(135deg, rgba(66,212,229,.1), rgba(79,120,244,.08)); }
  .at2-runtime .mock-card { margin-top: var(--at2-space-4); padding: var(--at2-space-4); border: 1px solid var(--at2-line); border-radius: var(--at2-radius-md); }

  .at2-checkout-header { border-bottom: 1px solid var(--at2-line); background: rgba(7,17,25,.88); }
  .at2-checkout-header__inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; }
  .at2-checkout-trust { color: var(--at2-text-soft); }
  .at2-checkout-footer { margin-top: auto; padding-block: var(--at2-space-6); border-top: 1px solid var(--at2-line); }
  .at2-checkout-footer .at2-container { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--at2-space-5); color: var(--at2-text-dim); font-size: var(--at2-step--1); }

  @media (max-width: 68rem) {
    .at2-runtime .hero__grid { grid-template-columns: 1fr; }
    .at2-product-detail-grid,
    .at2-product-content-grid,
    .at2-checkout-preview { grid-template-columns: 1fr; }
  }
  @media (max-width: 48rem) {
    .at2-runtime .product-grid,
    .at2-runtime .hero__meta { grid-template-columns: 1fr; }
    .at2-runtime .section__header,
    .at2-runtime .cta-banner { align-items: flex-start; flex-direction: column; }
    .at2-runtime :where(.hero, .section) h1 { font-size: var(--at2-step-3); }
  }
  /* Druckausgabe.
     Die fruehere Fassung setzte nur `.at2-runtime { background:#fff; color:#111 }`.
     Diese eine Regel erreicht die Elemente nicht, die ihre Farbe selbst setzen, und
     greift nur auf den Seiten mit der Vertraeglichkeitsklasse. Ergebnis: Ueberschriften
     druckten mit Kontrast 1,08, Fliesstext mit 1,78 — das Blatt blieb praktisch leer
     (BUG-017). V1 hatte an dieser Stelle laengst einen vollstaendigen Druckstil; das
     hier ist der Gleichstand.
     @since FS2 v0.51.8 */
  @media print {
    @page { size: A4 portrait; margin: 20mm 18mm; }

    /* Harte Ruecksetzung ueber alles — sonst ueberleben die Farben des dunklen Themas. */
    .at2-scope,
    .at2-scope *,
    .at2-scope *::before,
    .at2-scope *::after {
      background: #fff !important;
      color: #111 !important;
      border-color: #bbb !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    /* Seitenumgebung und Bedienelemente gehoeren nicht aufs Papier. */
    .at2-header,
    .at2-footer,
    .at2-checkout-header,
    .at2-checkout-footer,
    .at2-breadcrumbs,
    .at2-skip-link,
    .at2-scope .at2-skip-link,
    .at2-nav-toggle,
    .at2-modal,
    .fs-print-btn,
    .at2-button,
    .at2-hero-actions,
    .at2-cta,
    form { display: none !important; }

    .at2-main, .at2-section, .at2-container, .fs-article {
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Adressen ausschreiben, damit der Ausdruck fuer sich steht. */
    .fs-article__content a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      word-break: break-all;
    }

    :where(h1, h2, h3) { break-after: avoid-page; }
    :where(p, li, tr, figure) { break-inside: avoid; }
  }
}