/* ==========================================================================
   aNuCa Seiten-Stile

   Seitenspezifische Abschnitte fuer Landingpage, FAQ und Kontaktformular.
   Setzt anuca-tokens.css voraus.

   Ladereihenfolge:
       anuca-tokens.css  ->  anuca-ui.css  ->  anuca-pages.css

   Die Regeln bleiben auf #anuca-landing / #anuca-faq / #anuca-kontakt
   gescoped - dadurch kein Durchschlagen auf den Anwendungsbereich.
   ========================================================================== */



/* ==========================================================================
   LANDINGPAGE
   ========================================================================== */

#anuca-landing {

    /* Modulfarben aus styles.css / base.html - Wiedererkennung zur App */

    background: var(--al-paper);
    color: var(--al-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  #anuca-landing *,
  #anuca-landing *::before,
  #anuca-landing *::after { box-sizing: border-box; }

  /* Globale Layout-Vererbung neutralisieren */
  #anuca-landing div,
  #anuca-landing section,
  #anuca-landing p,
  #anuca-landing h1,
  #anuca-landing h2,
  #anuca-landing h3,
  #anuca-landing span,
  #anuca-landing a {
    float: none;
    clear: none;
  }

  #anuca-landing h1,
  #anuca-landing h2,
  #anuca-landing h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);       /* explizit: globales CSS setzt hier teils weiss */
    text-transform: none;
    text-shadow: none;
  }

  #anuca-landing p { color: inherit; margin: 0; }
  #anuca-landing a { color: inherit; }

  #anuca-landing .al-wrap {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    float: none;
  }

  /* ---------- Hero ---------- */
  #anuca-landing .al-hero { padding: 56px 0 72px; }
  #anuca-landing .al-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    width: 100%;
  }
  #anuca-landing .al-eyebrow {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
  }
  #anuca-landing .al-hero h1 {
    font-size: 44px;
    line-height: 1.12;
    margin-bottom: 20px;
  }
  #anuca-landing .al-hero h1 em { font-style: normal; color: var(--al-amber); }
  #anuca-landing .al-hero .al-sub {
    font-size: 18px;
    color: var(--al-ink-soft);
    max-width: 46ch;
    margin-bottom: 32px;
  }
  #anuca-landing .al-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  #anuca-landing .al-hero-note {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--al-ink-soft);
    display: flex;
    align-items: center;
    gap: 8px 22px;          /* groesserer Abstand zwischen den Punkten statt Trennzeichen */
    flex-wrap: wrap;
  }
  /* Icon und Text bilden eine Einheit, damit das Haekchen beim Umbruch
     nicht vom zugehoerigen Text getrennt wird. */
  #anuca-landing .al-note-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }
  #anuca-landing .al-note-item i { color: var(--al-sage); font-size: 12px; }
  #anuca-landing .al-btn {
    background: var(--al-amber);
    color: #fff;
    padding: 14px 26px;
    border-radius: var(--al-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    border: 0;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  #anuca-landing .al-btn:hover { background: var(--al-amber-deep); color: #fff; text-decoration: none; transform: translateY(-1px); }
  #anuca-landing .al-btn-text {
    color: var(--al-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 2px solid var(--al-line);
    padding-bottom: 2px;
  }
  #anuca-landing .al-btn-text:hover { border-color: var(--al-ink); text-decoration: none; }

  #anuca-landing .al-frame {
    background: var(--al-card);
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(52, 58, 64, 0.25), 0 2px 8px rgba(52, 58, 64, 0.08);
    overflow: hidden;
    border: 1px solid var(--al-line);
    width: 100%;
  }
  #anuca-landing .al-frame img { display: block; width: 100%; height: auto; }
  #anuca-landing .al-frame-bar {
    background: #EDEAE5;
    padding: 10px 14px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--al-line);
  }
  #anuca-landing .al-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #D5D1CA; display: inline-block; }

  /* ---------- Ankuendigung ---------- */
  #anuca-landing .al-announce {
    background: var(--al-card);
    border-top: 1px solid var(--al-line);
    border-bottom: 1px solid var(--al-line);
    padding: 16px 0;
  }
  #anuca-landing .al-announce .al-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  #anuca-landing .al-badge {
    background: var(--al-amber);
    color: #fff;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #anuca-landing .al-announce p { font-size: 14.5px; color: var(--al-ink-soft); }
  #anuca-landing .al-announce a { font-weight: 600; color: var(--al-teal); white-space: nowrap; margin-left: auto; }

  /* ---------- Trust-Bar ---------- */
  #anuca-landing .al-trustbar { background: var(--al-teal); padding: 52px 0; }
  #anuca-landing .al-trust-head { text-align: center; margin-bottom: 32px; }
  #anuca-landing .al-trust-kicker {
    display: block;
    color: var(--al-amber);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 600;
  }
  #anuca-landing .al-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    width: 100%;
  }
  #anuca-landing .al-trust-num {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 34px;
    font-weight: 600;
    color: var(--al-amber);
    display: block;
    margin-bottom: 6px;
    line-height: 1.1;
  }
  #anuca-landing .al-trust-label { font-size: 13.5px; color: #C9D6D4; line-height: 1.4; display: block; }

  /* ---------- Section Head ---------- */
  #anuca-landing .al-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
  #anuca-landing .al-head h2 { font-size: 30px; margin-bottom: 10px; }
  #anuca-landing .al-head p { color: var(--al-ink-soft); font-size: 16px; }

  /* ---------- So funktioniert's ---------- */
  #anuca-landing .al-howto { padding: 84px 0; background: var(--al-card); border-bottom: 1px solid var(--al-line); }
  #anuca-landing .al-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
    width: 100%;
    align-items: stretch;      /* alle Spalten gleich hoch */
  }
  /* Verbindungslinie hinter den Nummernkreisen macht die Sequenz sichtbar */
  #anuca-landing .al-steps::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--al-line);
    z-index: 0;
  }
  /* Die Beschreibungstexte sind unterschiedlich lang. Damit die Screenshots
     trotzdem auf einer Linie beginnen, wird die Spalte zur Flexbox und das
     Bild per margin-top:auto nach unten geschoben. */
  #anuca-landing .al-step {
    position: relative;
    z-index: 1;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #anuca-landing .al-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--al-amber);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 6px var(--al-card), 0 6px 16px -6px rgba(226, 128, 58, 0.55);
  }
  #anuca-landing .al-step h3 { font-size: 19px; margin-bottom: 10px; color: var(--al-ink); }
  #anuca-landing .al-step p { color: var(--al-ink-soft); font-size: 15px; min-height: 112px;}
  #anuca-landing .al-shot {
    margin-top: auto;          /* schiebt den Screenshot an das untere Ende */
    border-radius: var(--al-radius);
    overflow: hidden;
    border: 1px solid var(--al-line);
    background: var(--al-paper);
    margin-top: 18px;
    box-shadow: 0 10px 28px -14px rgba(52, 58, 64, 0.22);
  }
  #anuca-landing .al-shot img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top left; }

  /* ---------- Lebenszyklus ---------- */
  #anuca-landing .al-cycle { padding: 84px 0; }
  #anuca-landing .al-phases {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    width: 100%;
  }
  #anuca-landing .al-phase {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 26px 18px;
    text-align: center;
    position: relative;
  }
  #anuca-landing .al-phase-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(226, 128, 58, 0.12);
    color: var(--al-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 14px;
  }
  #anuca-landing .al-phase-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--al-ink);
    margin-bottom: 6px;
  }
  #anuca-landing .al-phase-text { font-size: 13.5px; color: var(--al-ink-soft); line-height: 1.45; }

  /* ---------- Feature-Karten ---------- */
  #anuca-landing .al-features { padding: 84px 0; background: var(--al-card); border-top: 1px solid var(--al-line); border-bottom: 1px solid var(--al-line); }
  /* Hauptfunktion: hervorgehoben ueber dem Karten-Grid, damit die Rationsanalyse
     nicht als eine von vielen gleichwertigen Funktionen erscheint. */
  #anuca-landing .al-feat-main {
    border: 1px solid rgba(52, 58, 64, 0.22);
    border-radius: 14px;
    padding: 34px 32px;
    background: linear-gradient(180deg, rgba(170, 163, 142, 0.12) 0%, var(--al-paper) 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
  }
  #anuca-landing .al-feat-main-icon {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--mod-analyse);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  #anuca-landing .al-feat-main h3 { font-size: 22px; margin-bottom: 8px; }
  #anuca-landing .al-feat-main p { font-size: 15.5px; color: var(--al-ink-soft); line-height: 1.55; margin-bottom: 16px; }
  #anuca-landing .al-feat-main-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  #anuca-landing .al-feat-main-list span {
    font-size: 14px;
    color: var(--al-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  #anuca-landing .al-feat-main-list i { color: var(--al-sage); font-size: 12px; }

  /* Kennzahlen-Leiste als Beweisstück in der Rationsanalyse-Hauptkarte */
  #anuca-landing .al-feat-kpi-shot {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--al-line);
    box-shadow: 0 8px 20px -12px rgba(52, 58, 64, 0.2);
  }
  #anuca-landing .al-feat-kpi-shot img { display: block; width: 100%; height: auto; }
  /* Zusatzpakete docken an der Rationsanalyse an - deshalb hier als Fusszeile
     der Hauptkarte statt als eigenstaendige Karten im Grid darunter. */
  #anuca-landing .al-feat-addons {
    grid-column: 1 / -1;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(52, 58, 64, 0.14);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  #anuca-landing .al-feat-addons-label {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-ink-soft);
  }
  #anuca-landing .al-addon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--al-ink);
    font-weight: 600;
  }
  #anuca-landing .al-addon-chip i { color: var(--al-sage); font-size: 13px; }
  #anuca-landing .al-addon-chip small {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 400;
  }

  #anuca-landing .al-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
  }
  #anuca-landing .al-feat {
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 28px 26px;
    background: var(--al-paper);
    position: relative;
  }
  #anuca-landing .al-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(226, 128, 58, 0.12);
    color: var(--al-amber);
    /* Modulspezifische Einfaerbung siehe .al-feat-icon--* unten */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
  }
  /* Jede Feature-Karte traegt die Farbe ihres Moduls aus der Anwendung.
     Dadurch findet der Nutzer dieselbe Farbcodierung spaeter in aNuCa wieder. */
  #anuca-landing .al-feat-icon--wachstum     { background: rgba(254, 203, 0, 0.16);  color: #B08D00; }
  #anuca-landing .al-feat-icon--reduktion    { background: rgba(146, 162, 189, 0.22); color: #5C6E8C; }
  #anuca-landing .al-feat-icon--napfplan     { background: rgba(68, 68, 68, 0.12);   color: #444444; }
  #anuca-landing .al-feat-icon--futtermittel { background: rgba(162, 173, 0, 0.16);  color: #6E7600; }
  #anuca-landing .al-feat-icon--analyse      { background: rgba(170, 163, 142, 0.22); color: #7D765F; }
  #anuca-landing .al-feat-icon--marktplatz   { background: rgba(193, 84, 84, 0.14);  color: #B04A4A; }

  #anuca-landing .al-feat h3 { font-size: 18px; margin-bottom: 8px; }
  #anuca-landing .al-feat p { font-size: 14.5px; color: var(--al-ink-soft); line-height: 1.5; }
  #anuca-landing .al-feat-tag {
    display: inline-block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-sage);
    border: 1px solid var(--al-line);
    background: var(--al-card);
    border-radius: 4px;
    padding: 3px 7px;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  /* ---------- Detail-Chips ---------- */
  #anuca-landing .al-details { padding: 76px 0; }
  #anuca-landing .al-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 880px;
    margin: 0 auto;
  }
  #anuca-landing .al-chip {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 100px;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--al-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #anuca-landing .al-chip i { color: var(--al-sage); font-size: 12px; }
  #anuca-landing .al-chip-group + .al-chip-group { margin-top: 40px; }
  #anuca-landing .al-chip-head {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-sage);
    text-align: center;
    margin-bottom: 18px;
  }
  #anuca-landing .al-chip-strong { border-color: rgba(226, 128, 58, 0.45); }
  #anuca-landing .al-chip-strong i { color: var(--al-amber); }
  #anuca-landing .al-langs {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--al-sage);
    background: rgba(170, 163, 142, 0.16);
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 6px;
  }

  /* ---------- Datenbasis: zwei Quellen, ein Ergebnis ---------- */
  #anuca-landing .al-db { padding: 84px 0; background: var(--al-card); border-top: 1px solid var(--al-line); }
  #anuca-landing .al-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
  }
  #anuca-landing .al-pillar {
    border: 1px solid var(--al-line);
    border-radius: 14px;
    padding: 28px 26px;
    background: var(--al-paper);
  }
  #anuca-landing .al-pillar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--al-line);
  }
  #anuca-landing .al-pillar-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
  }
  #anuca-landing .al-pillar-icon-a { background: rgba(68, 68, 68, 0.12); color: #444444; }  /* Modulfarbe Napfplan - wie Feature-Karte */
  #anuca-landing .al-pillar-icon-b { background: rgba(170, 163, 142, 0.22); color: #7D765F; }  /* Modulfarbe Analyse */
  #anuca-landing .al-pillar-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 17px; color: var(--al-ink); }
  #anuca-landing .al-pillar-sub { font-size: 13px; color: var(--al-ink-soft); }

  #anuca-landing .al-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(225, 228, 221, 0.7);
  }
  #anuca-landing .al-row:last-child { border-bottom: 0; padding-bottom: 0; }
  #anuca-landing .al-row-key {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--al-teal);
    min-width: 84px;
    flex-shrink: 0;
  }
  #anuca-landing .al-row-text { font-size: 14px; color: var(--al-ink-soft); line-height: 1.5; }
  #anuca-landing .al-row-text b { color: var(--al-ink); font-weight: 600; }
  /* Suchbeispiel im Monospace-Stil, damit es als konkrete Eingabe erkennbar ist */
  #anuca-landing .al-query {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12.5px;
    background: rgba(52, 58, 64, 0.07);
    border: 1px solid var(--al-line);
    border-radius: 5px;
    padding: 2px 7px;
    color: var(--al-teal);
    white-space: nowrap;
  }
  #anuca-landing .al-row-tag {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-sage);
    border: 1px solid var(--al-line);
    background: var(--al-card);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 4px;
    white-space: nowrap;
  }

  /* Zusammenfuehrung beider Saeulen zum Ergebnis */
  #anuca-landing .al-merge-arrow { text-align: center; color: var(--al-line); font-size: 26px; margin: 20px 0 16px; }
  #anuca-landing .al-result {
    background: var(--al-teal);
    border-radius: 14px;
    padding: 34px 36px;
    max-width: 720px;
    margin: 0 auto;
  }
  /* Beide Aussagen im Ergebnisblock nutzen dasselbe Layout: Icon links, Text rechts */
  #anuca-landing .al-result-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }
  #anuca-landing .al-result-item + .al-result-item {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  #anuca-landing .al-result-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(226, 128, 58, 0.18);
    border: 1px solid rgba(226, 128, 58, 0.4);
    color: var(--al-amber);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
  }
  #anuca-landing .al-result h3,
  #anuca-landing .al-result-title {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
  }
  #anuca-landing .al-result p { color: #A8BDBA; font-size: 14.5px; line-height: 1.5; margin: 0; }

  /* ---------- Pricing ---------- */
  #anuca-landing .al-pricing { padding: 84px 0; }
  /* Dezenter Verweis auf die FAQ - bewusst zurueckhaltend, damit er nicht mit den
     Haupt-CTAs konkurriert. */
  #anuca-landing .al-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--al-ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed var(--al-line);
    padding-bottom: 1px;
  }
  #anuca-landing .al-faq-link:hover { color: var(--al-ink); border-color: var(--al-ink-soft); text-decoration: none; }
  #anuca-landing .al-faq-link i { font-size: 11px; }
  #anuca-landing .al-plan {
    background: var(--al-card);
    border: 2px solid var(--al-amber);
    border-radius: 14px;
    padding: 40px;
    max-width: 560px;
    margin: 0 auto 40px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 50px -24px rgba(226, 128, 58, 0.45);
  }
  #anuca-landing .al-price-flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--al-amber);
    color: #fff;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 5px;
    white-space: nowrap;
  }
  #anuca-landing .al-plan-name { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 4px; }
  #anuca-landing .al-plan-claim { font-size: 15px; color: var(--al-ink-soft); margin-bottom: 24px; }
  #anuca-landing .al-price-free {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 52px;
    font-weight: 600;
    color: var(--al-amber);
    line-height: 1;
  }
  #anuca-landing .al-price-free-label { font-size: 15px; color: var(--al-ink); font-weight: 600; display: block; margin-top: 6px; }
  #anuca-landing .al-price-after {
    font-size: 14.5px;
    color: var(--al-ink-soft);
    display: block;
    margin: 10px 0 26px;
    padding-top: 14px;
    border-top: 1px solid var(--al-line);
  }
  #anuca-landing .al-price-after b { color: var(--al-ink); font-weight: 600; }
  #anuca-landing .al-price-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 28px;
    max-width: 380px;
    text-align: left;
  }
  #anuca-landing .al-price-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--al-ink-soft);
    padding: 6px 0;
  }
  #anuca-landing .al-price-list i { color: var(--al-sage); font-size: 13px; margin-top: 4px; flex-shrink: 0; }
  #anuca-landing .al-plan .al-btn { display: block; text-align: center; }
  #anuca-landing .al-plan-note { font-size: 13px; color: var(--al-ink-soft); margin-top: 14px; }

  /* Ablauf des Testzeitraums */
  #anuca-landing .al-trial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 780px;
    margin: 0 auto 56px;
    width: 100%;
  }
  #anuca-landing .al-trial-item { text-align: center; }
  #anuca-landing .al-trial-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(170, 163, 142, 0.18);
    color: var(--al-sage);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; margin: 0 auto 12px;
  }
  #anuca-landing .al-trial-title { font-weight: 600; font-size: 14.5px; color: var(--al-ink); margin-bottom: 4px; }
  #anuca-landing .al-trial-text { font-size: 13.5px; color: var(--al-ink-soft); line-height: 1.45; }

  #anuca-landing .al-addons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
  }
  #anuca-landing .al-addon {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 26px 24px;
  }
  #anuca-landing .al-addon-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(170, 163, 142, 0.16);
    color: var(--al-sage);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-bottom: 14px;
  }
  #anuca-landing .al-addon h3 { font-size: 17px; margin-bottom: 7px; }
  #anuca-landing .al-addon p { font-size: 14px; color: var(--al-ink-soft); line-height: 1.5; }
  #anuca-landing .al-addons-note { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--al-ink-soft); }

  /* ---------- Sondermitgliedschaften ---------- */
  #anuca-landing .al-special { padding: 0 0 84px; }
  #anuca-landing .al-special-box {
    background: rgba(170, 163, 142, 0.12);
    border: 1px solid rgba(170, 163, 142, 0.35);
    border-radius: 14px;
    padding: 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
  }
  #anuca-landing .al-special-icon {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--al-amber); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  #anuca-landing .al-special h3 { font-size: 21px; margin-bottom: 8px; }
  #anuca-landing .al-special p { font-size: 15px; color: var(--al-ink-soft); max-width: 60ch; margin-bottom: 10px; }
  #anuca-landing .al-special .al-faq-link { display: inline-flex; }

  /* ---------- SmartAssist (dunkler Highlight-Block) ---------- */
  #anuca-landing .al-smart {
    background: var(--al-teal);
    padding: 84px 0;
    position: relative;
    overflow: hidden;
  }
  /* Weicher Amber-Schein als Akzent, hebt den Block ohne harte Kante */
  #anuca-landing .al-smart::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 128, 58, 0.22) 0%, rgba(226, 128, 58, 0) 70%);
    pointer-events: none;
  }
  #anuca-landing .al-smart-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px 56px;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
  }
  #anuca-landing .al-smart h2 { color: #fff; font-size: 32px; margin-bottom: 16px; }
  #anuca-landing .al-smart .al-eyebrow { color: #8FB3A9; }
  /* SmartAssist-Brand: nutzt das native Markup/CSS der App (styles.css).
     Hier nur groesser skaliert, da der Landingpage-Kontext mehr Gewicht braucht als
     die Inline-Verwendung in der Anwendung. Farben kommen bewusst aus styles.css. */
  #anuca-landing .al-smart-logo { display: inline-flex; margin-bottom: 18px; }
  /* Kurze Schlagzeile als Bindeglied zwischen Sublogo und Headline */
  #anuca-landing .al-smart-kicker {
    display: block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--al-amber);
    font-weight: 600;
    margin-bottom: 12px;
  }
  #anuca-landing .al-smart-logo .smartassist-powered { font-size: 13px; letter-spacing: 0.12em; }
  #anuca-landing .al-smart-logo .smartassist-text_color { font-size: 36px; line-height: 1.1; }
  #anuca-landing .al-smart-logo .smartassist-icon_color { font-size: 28px; }
  #anuca-landing .al-smart-lead {
    color: #C9D6D4;
    font-size: 17px;
    margin-bottom: 32px;
    max-width: 46ch;
  }
  /* Prozessschritte mit Verbindungslinie zwischen den Nummernkreisen.
     Kreise und Text linksbuendig - bei zentriertem Text wirken unterschiedlich
     lange Absaetze unruhig. */
  #anuca-landing .al-procs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 12px;
  }
  #anuca-landing .al-proc { position: relative; }
  /* Linie laeuft von Kreisrand zu Kreisrand, nicht durch die Kreise hindurch
     (der Kreis ist halbtransparent, eine durchlaufende Linie waere sichtbar). */
  #anuca-landing .al-proc:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 42px;
    width: calc(100% - 14px);
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
  }
  #anuca-landing .al-proc-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(226, 128, 58, 0.18);
    border: 1px solid rgba(226, 128, 58, 0.45);
    color: var(--al-amber);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  #anuca-landing .al-proc-title { color: #fff; font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
  #anuca-landing .al-proc-text { color: #A8BDBA; font-size: 14.5px; line-height: 1.5; }
  #anuca-landing .al-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  #anuca-landing .al-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12.5px;
    color: #C9D6D4;
  }
  #anuca-landing .al-source i { color: var(--al-amber); font-size: 11px; }

  #anuca-landing .al-smart-note {
    grid-column: 1 / -1;
    margin-top: 6px;
    color: #8FB3A9;
    font-size: 14.5px;
    max-width: 92ch;
  }
  #anuca-landing .al-smart-frame {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  }
  #anuca-landing .al-smart-frame img { display: block; width: 100%; height: auto; }

  /* ---------- Testimonials ---------- */
  #anuca-landing .al-testimonials { padding: 84px 0; }
  #anuca-landing .al-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    align-items: stretch;      /* alle Karten gleich hoch */
  }
  /* Die Zitate sind unterschiedlich lang. Damit der Personenblock in allen
     Karten auf einer Linie steht, wird die Karte zur Flexbox und der Block
     per margin-top:auto nach unten geschoben. */
  #anuca-landing .al-testi {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 32px 28px 26px;
    position: relative;
    overflow: hidden;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #anuca-landing .al-quote {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 78px;
    line-height: 1;
    color: var(--mod-analyse);
    opacity: 0.5;
    position: absolute;
    top: 2px;
    left: 16px;
    font-weight: 700;
    pointer-events: none;
  }
  #anuca-landing .al-testi-text {
    font-size: 15.5px;
    color: var(--al-ink);
    position: relative;
    /* Abstand nach oben haelt die erste Zeile vom Anfuehrungszeichen frei,
       das absolut positioniert darueber liegt. */
    margin: 26px 0 24px;
    /* min-height entfaellt: die Flexbox regelt die Hoehe jetzt ueber
       margin-top:auto am Personenblock. */
  }
  #anuca-landing .al-testi-person {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--al-line);
    padding-top: 16px;
    margin-top: auto;          /* haelt den Block am unteren Kartenrand */
  }
  #anuca-landing .al-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mod-analyse);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
  }
  #anuca-landing .al-testi-name { font-weight: 600; font-size: 14.5px; color: var(--al-ink); }
  #anuca-landing .al-testi-role { font-size: 13px; color: var(--al-ink-soft); }
  #anuca-landing .al-flag {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 10px;
    color: var(--al-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: absolute;
    top: 10px;
    right: 14px;
    opacity: 0.45;
  }

  @media (max-width: 860px) {
    #anuca-landing .al-hero-grid { grid-template-columns: 1fr; }
    #anuca-landing .al-hero h1 { font-size: 32px; }
    #anuca-landing .al-trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    #anuca-landing .al-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    #anuca-landing .al-steps::before { display: none; }
    #anuca-landing .al-phases { grid-template-columns: repeat(2, 1fr); }
    #anuca-landing .al-feat-grid { grid-template-columns: repeat(2, 1fr); }
    #anuca-landing .al-feat-main { grid-template-columns: 1fr; gap: 18px; }
    #anuca-landing .al-pillars { grid-template-columns: 1fr; }
    #anuca-landing .al-trial { grid-template-columns: 1fr; gap: 26px; }
    #anuca-landing .al-addons { grid-template-columns: 1fr; }
    #anuca-landing .al-special-box { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; padding: 32px 24px; }
    #anuca-landing .al-smart-grid { grid-template-columns: 1fr; gap: 32px; }
    #anuca-landing .al-procs { grid-template-columns: 1fr; gap: 26px; }
    #anuca-landing .al-proc:not(:last-child)::after { display: none; }
    #anuca-landing .al-testi-grid { grid-template-columns: 1fr; }
    #anuca-landing .al-announce a { margin-left: 0; }
  }

  @media (max-width: 560px) {
    #anuca-landing .al-steps { grid-template-columns: 1fr; }
    #anuca-landing .al-phases { grid-template-columns: 1fr; }
    #anuca-landing .al-feat-grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    #anuca-landing * { transition: none !important; }
  }


/* ==========================================================================
   FAQ
   ========================================================================== */

#anuca-faq {

    /* Modulfarben aus styles.css / base.html - Wiedererkennung zur App */

    background: var(--al-paper);
    color: var(--al-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;
  }

  #anuca-faq *,
  #anuca-faq *::before,
  #anuca-faq *::after { box-sizing: border-box; }

  #anuca-faq div, #anuca-faq section, #anuca-faq p,
  #anuca-faq h1, #anuca-faq h2, #anuca-faq h3,
  #anuca-faq span, #anuca-faq a, #anuca-faq ul, #anuca-faq li {
    float: none;
    clear: none;
  }

  #anuca-faq h1, #anuca-faq h2, #anuca-faq h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
    text-shadow: none;
  }
  #anuca-faq p { color: inherit; margin: 0; }
  #anuca-faq a { color: inherit; }

  #anuca-faq .af-wrap {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
  }

  /* ---------- Kopfbereich ---------- */
  #anuca-faq .af-head {
    text-align: center;
    padding: 56px 0 40px;
    max-width: 640px;
    margin: 0 auto;
  }
  #anuca-faq .af-eyebrow {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
  }
  #anuca-faq .af-head h1 { font-size: 40px; line-height: 1.12; margin-bottom: 16px; }
  #anuca-faq .af-head p { font-size: 17px; color: var(--al-ink-soft); }

  /* ---------- Suche ---------- */
  #anuca-faq .af-search-wrap { max-width: 520px; margin: 26px auto 0; position: relative; }
  #anuca-faq .af-search {
    width: 100%;
    padding: 13px 16px 13px 42px;
    font-size: 15px;
    font-family: inherit;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    outline: none;
  }
  #anuca-faq .af-search:focus { border-color: var(--al-sage); box-shadow: 0 0 0 3px rgba(125, 118, 95, 0.18); }
  #anuca-faq .af-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--al-ink-soft);
    font-size: 14px;
    pointer-events: none;
  }
  #anuca-faq .af-noresult {
    display: none;
    text-align: center;
    color: var(--al-ink-soft);
    font-size: 15px;
    padding: 40px 0;
  }

  /* ---------- Layout: Sidebar + Inhalt ---------- */
  #anuca-faq .af-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 20px;
  }

  #anuca-faq .af-nav {
    position: sticky;
    top: 24px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 12px;
  }
  #anuca-faq .af-nav ul { list-style: none; margin: 0; padding: 0; }
  #anuca-faq .af-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--al-ink-soft);
    text-decoration: none;
    line-height: 1.35;
  }
  #anuca-faq .af-nav a:hover { background: var(--al-paper); color: var(--al-ink); text-decoration: none; }
  #anuca-faq .af-nav a i { color: var(--al-sage); font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }

  /* ---------- Kategorie ---------- */
  #anuca-faq .af-cat { margin-bottom: 48px; scroll-margin-top: 24px; }
  #anuca-faq .af-cat-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--al-line);
  }
  #anuca-faq .af-cat-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(226, 128, 58, 0.12);
    color: var(--al-amber);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
  }
  #anuca-faq .af-cat-head h2 { font-size: 21px; margin-bottom: 3px; }
  #anuca-faq .af-cat-intro { font-size: 14px; color: var(--al-ink-soft); }

  /* ---------- Frage/Antwort ---------- */
  /* <details>/<summary> statt eigenem JS: funktioniert ohne JavaScript, ist
     von Haus aus tastatur- und screenreaderfaehig, und der Browser findet den
     Inhalt auch bei zugeklapptem Zustand ueber die Seitensuche. */
  #anuca-faq .af-q {
    border-bottom: 1px solid var(--al-line);
    scroll-margin-top: 24px;
  }
  #anuca-faq .af-q > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--al-ink);
    list-style: none;
  }
  #anuca-faq .af-q > summary::-webkit-details-marker { display: none; }
  #anuca-faq .af-q > summary::marker { content: ''; }
  #anuca-faq .af-q > summary:hover { color: var(--al-amber-deep); }
  /* Chevron als echtes Icon-Element statt CSS-Pseudo-Glyph: funktioniert
     unabhaengig davon, ob Font Awesome als Webfont oder per JS als SVG rendert. */
  #anuca-faq .af-chevron {
    color: var(--al-sage);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform 0.18s ease;
  }
  #anuca-faq .af-q[open] .af-chevron { transform: rotate(180deg); }
  #anuca-faq .af-a {
    padding: 0 32px 20px 4px;
    font-size: 15px;
    color: var(--al-ink-soft);
    line-height: 1.6;
  }
  #anuca-faq .af-a p + p { margin-top: 12px; }
  #anuca-faq .af-a a { color: var(--al-teal); font-weight: 600; }

  /* ---------- Abschluss-CTA ---------- */
  #anuca-faq .af-contact {
    background: var(--al-teal);
    border-radius: 14px;
    padding: 36px;
    text-align: center;
    margin-top: 20px;
  }
  #anuca-faq .af-contact h2 { color: #fff; font-size: 22px; margin-bottom: 10px; }
  #anuca-faq .af-contact p { color: #C9D6D4; font-size: 15px; max-width: 52ch; margin: 0 auto 22px; }
  #anuca-faq .af-btn {
    background: var(--al-amber);
    color: #fff;
    padding: 13px 26px;
    border-radius: var(--al-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    border: 0;
    transition: background 0.15s ease;
  }
  #anuca-faq .af-btn:hover { background: var(--al-amber-deep); color: #fff; text-decoration: none; }

  @media (max-width: 860px) {
    #anuca-faq .af-layout { grid-template-columns: 1fr; gap: 28px; }
    #anuca-faq .af-nav { position: static; }
    #anuca-faq .af-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
    #anuca-faq .af-nav a { font-size: 13.5px; padding: 7px 10px; }
    #anuca-faq .af-head h1 { font-size: 30px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #anuca-faq * { transition: none !important; }
  }


/* ==========================================================================
   KONTAKTFORMULAR
   ========================================================================== */

#anuca-kontakt {

    background: var(--al-paper);
    color: var(--al-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;
  }

  #anuca-kontakt *,
  #anuca-kontakt *::before,
  #anuca-kontakt *::after { box-sizing: border-box; }

  #anuca-kontakt div, #anuca-kontakt section, #anuca-kontakt p,
  #anuca-kontakt h1, #anuca-kontakt h2, #anuca-kontakt label {
    float: none; clear: none;
  }

  #anuca-kontakt h1, #anuca-kontakt h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
  }
  #anuca-kontakt p { color: inherit; margin: 0; }

  #anuca-kontakt .ak-wrap {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Kopf ---------- */
  #anuca-kontakt .ak-head { text-align: center; padding: 56px 0 36px; }
  #anuca-kontakt .ak-eyebrow {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
  }
  #anuca-kontakt .ak-head h1 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
  #anuca-kontakt .ak-head p { font-size: 16.5px; color: var(--al-ink-soft); max-width: 52ch; margin: 0 auto; }

  /* ---------- Karte ---------- */
  #anuca-kontakt .ak-card {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 14px;
    padding: 36px;
    box-shadow: 0 12px 32px -18px rgba(52, 58, 64, 0.18);
  }

  /* ---------- Felder ---------- */
  #anuca-kontakt .ak-row { margin-bottom: 20px; }
  #anuca-kontakt .ak-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  #anuca-kontakt label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--al-ink);
    margin-bottom: 6px;
  }
  #anuca-kontakt .ak-hint { font-weight: 400; color: var(--al-ink-soft); font-size: 13px; display: block; margin-top: -4px; margin-bottom: 6px; }

  #anuca-kontakt input[type="text"],
  #anuca-kontakt input[type="email"],
  #anuca-kontakt select,
  #anuca-kontakt textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  #anuca-kontakt textarea { min-height: 160px; resize: vertical; }
  #anuca-kontakt select { appearance: auto; }

  #anuca-kontakt input:focus,
  #anuca-kontakt select:focus,
  #anuca-kontakt textarea:focus {
    border-color: var(--al-amber);
    box-shadow: 0 0 0 3px rgba(226, 128, 58, 0.14);
  }

  #anuca-kontakt .ak-error { color: #B04A4A; font-size: 13px; margin-top: 5px; display: block; }

  /* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
  #anuca-kontakt .ak-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ---------- Einwilligung ---------- */
  #anuca-kontakt .ak-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--al-ink-soft);
    line-height: 1.5;
    margin-bottom: 24px;
  }
  #anuca-kontakt .ak-consent input { margin-top: 4px; flex-shrink: 0; }
  #anuca-kontakt .ak-consent label { font-weight: 400; margin: 0; font-size: 14px; }
  #anuca-kontakt .ak-consent a { color: var(--al-teal); font-weight: 600; }

  /* ---------- Button ---------- */
  #anuca-kontakt .ak-btn {
    background: var(--al-amber);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--al-radius);
    border: 0;
    font-weight: 600;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  #anuca-kontakt .ak-btn:hover { background: var(--al-amber-deep); }

  /* ---------- Hinweisbox ---------- */
  #anuca-kontakt .ak-note {
    margin-top: 26px;
    padding: 18px 20px;
    background: rgba(170, 163, 142, 0.14);
    border: 1px solid rgba(170, 163, 142, 0.3);
    border-radius: var(--al-radius);
    font-size: 14px;
    color: var(--al-ink-soft);
  }
  #anuca-kontakt .ak-note b { color: var(--al-ink); }
  #anuca-kontakt .ak-note a { color: var(--al-teal); font-weight: 600; }

  @media (max-width: 620px) {
    #anuca-kontakt .ak-row-2 { grid-template-columns: 1fr; gap: 0; }
    #anuca-kontakt .ak-row-2 > div { margin-bottom: 20px; }
    #anuca-kontakt .ak-card { padding: 26px 20px; }
    #anuca-kontakt .ak-head h1 { font-size: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #anuca-kontakt * { transition: none !important; }
  }

  @media (max-width: 860px) {
    #anuca-landing .al-step p { min-height: 0; }
  }

/* ==========================================================================
   Videoseite  (#anuca-tutorials)

   Oeffentliche Seite: Interessenten sollen sich einen Eindruck von der
   Anwendung verschaffen koennen, ohne sich anzumelden. Aufbau wie die
   FAQ-Seite, mit einem Unterschied: Jede Kachel traegt ueber --katfarbe
   die Farbe des Moduls, um das es geht. Damit ist die Seite auf einen
   Blick sortiert, und die Farbcodierung der Anwendung wird schon vor der
   Anmeldung eingeuebt.

   Die Farben kommen aus dem Template und stehen als Variable am Abschnitt
   - so bleibt diese Datei frei von Modulwissen.
   ========================================================================== */

  #anuca-tutorials {
    background: var(--al-paper);
    color: var(--al-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;
  }

  #anuca-tutorials *,
  #anuca-tutorials *::before,
  #anuca-tutorials *::after { box-sizing: border-box; }

  /* styles.css setzt an vielen Stellen float und Textschatten - hier
     zuruecksetzen, wie auf den uebrigen neuen Seiten. */
  #anuca-tutorials div, #anuca-tutorials section, #anuca-tutorials p,
  #anuca-tutorials h1, #anuca-tutorials h2, #anuca-tutorials h3,
  #anuca-tutorials span, #anuca-tutorials a, #anuca-tutorials article {
    float: none;
    clear: none;
  }

  #anuca-tutorials h1, #anuca-tutorials h2, #anuca-tutorials h3 {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
    text-shadow: none;
  }
  #anuca-tutorials p { color: inherit; margin: 0; }
  #anuca-tutorials a { color: inherit; }

  #anuca-tutorials .at-wrap {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
  }

  /* ---------- Kopfbereich ---------- */
  #anuca-tutorials .at-head {
    text-align: center;
    padding: 56px 0 36px;
    max-width: 640px;
    margin: 0 auto;
  }
  #anuca-tutorials .at-eyebrow {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
  }
  #anuca-tutorials .at-head h1 { font-size: 40px; line-height: 1.12; margin-bottom: 16px; }
  #anuca-tutorials .at-head p { font-size: 17px; color: var(--al-ink-soft); }

  /* ---------- Zwei Spalten, wie in der FAQ ---------- */
  #anuca-tutorials .at-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 20px;
  }

  #anuca-tutorials .at-nav {
    position: sticky;
    top: 24px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 12px;
  }
  #anuca-tutorials .at-nav ul { list-style: none; margin: 0; padding: 0; }
  #anuca-tutorials .at-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--al-ink-soft);
    text-decoration: none;
    line-height: 1.35;
  }
  #anuca-tutorials .at-nav a:hover {
    background: var(--al-paper);
    color: var(--al-ink);
    text-decoration: none;
  }
  #anuca-tutorials .at-nav a i {
    color: var(--al-sage);
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
  }

  /* ---------- Kategorie ---------- */
  #anuca-tutorials .at-kat {
    margin-bottom: 48px;
    scroll-margin-top: 24px;
  }

  #anuca-tutorials .at-kat-kopf {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--al-line);          /* Rueckfall */
    border-bottom: 2px solid color-mix(in srgb, var(--katfarbe) 55%, var(--al-line));
  }
  #anuca-tutorials .at-kat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 17px;
    color: var(--al-ink);
    background: var(--al-line);                        /* Rueckfall */
    background: color-mix(in srgb, var(--katfarbe) 22%, var(--al-card));
  }
  #anuca-tutorials .at-kat-kopf h2 { font-size: 22px; margin-bottom: 3px; }
  #anuca-tutorials .at-kat-intro { font-size: 15px; color: var(--al-ink-soft); }

  /* ---------- Raster ----------
     Feste Spaltenzahl statt auto-fit, damit sich die Anordnung nicht bei
     jedem Pixel neu berechnet. */
  #anuca-tutorials .at-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  @media (max-width: 560px) {
    #anuca-tutorials .at-raster { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Karte ---------- */
  #anuca-tutorials .at-karte {
    display: flex;
    flex-direction: column;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06),
                0 6px 16px -10px rgba(52, 58, 64, 0.10);
  }

  /* Vorschauflaeche: traegt die Modulfarbe und ersetzt das Standbild von
     YouTube. 16:9 ueber aspect-ratio, mit padding-top als Rueckfall. */
  #anuca-tutorials .at-vorschau {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--katfarbe);
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--katfarbe) 85%, white) 0%,
                color-mix(in srgb, var(--katfarbe) 55%, white) 100%);
  }
  @supports not (aspect-ratio: 16 / 9) {
    #anuca-tutorials .at-vorschau { height: 0; padding-top: 56.25%; }
  }

  #anuca-tutorials .at-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--al-card);
    color: var(--al-ink);
    font-size: 18px;
    padding-left: 4px;                 /* optischer Ausgleich des Dreiecks */
    box-shadow: 0 2px 10px rgba(23, 40, 42, 0.25);
    transition: transform 120ms ease-in;
  }
  #anuca-tutorials .at-vorschau:hover .at-play { transform: translate(-50%, -50%) scale(1.08); }
  #anuca-tutorials .at-vorschau:focus-visible {
    outline: 3px solid var(--al-ink);
    outline-offset: -3px;
  }

  /* Player nach dem Klick */
  #anuca-tutorials .at-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--al-teal);
  }
  @supports not (aspect-ratio: 16 / 9) {
    #anuca-tutorials .at-player { height: 0; padding-top: 56.25%; }
  }
  #anuca-tutorials .at-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  #anuca-tutorials .at-karte-text { padding: 16px 18px 20px; }
  #anuca-tutorials .at-karte-text h3 { font-size: 16px; margin-bottom: 6px; }
  #anuca-tutorials .at-karte-text p { font-size: 14px; color: var(--al-ink-soft); }

  /* ---------- Abschluss ---------- */
  #anuca-tutorials .at-abschluss {
    text-align: center;
    padding: 44px 24px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 14px;
  }
  #anuca-tutorials .at-abschluss h2 { font-size: 24px; margin-bottom: 10px; }
  #anuca-tutorials .at-abschluss p { font-size: 16px; color: var(--al-ink-soft); margin-bottom: 22px; }
  #anuca-tutorials .at-btn {
    display: inline-block;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--al-amber);
    border-radius: 8px;
    text-decoration: none;
  }
  #anuca-tutorials .at-btn:hover {
    background: var(--al-amber-deep);
    color: #FFFFFF;
    text-decoration: none;
  }

  /* ---------- Schmale Schirme ----------
     Die Navigation wandert nach oben und wird zur Zeile, statt als
     Spalte die halbe Breite zu belegen. */
  @media (max-width: 860px) {
    #anuca-tutorials .at-layout { grid-template-columns: 1fr; gap: 28px; }
    #anuca-tutorials .at-nav { position: static; }
    #anuca-tutorials .at-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
    #anuca-tutorials .at-nav a { font-size: 13.5px; padding: 7px 10px; }
    #anuca-tutorials .at-head h1 { font-size: 30px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #anuca-tutorials * { transition: none !important; }
  }


/* ==========================================================================
   Marktplatz  (#anuca-marktplatz)

   Aufbau wie FAQ und Videoseite: Kategorien links, Inhalt rechts. Zwei
   Unterschiede, die aus der Sache folgen:

   1. Die Kategorien sind hier ein Filter, kein Inhaltsverzeichnis - es
      ist immer genau eine sichtbar. Die Sichtbarkeit steuert weiterhin
      das vorhandene JavaScript ueber display:none, weil PayPal seine
      Schaltflaechen beim Laden in teils verborgene Container rendert.
   2. "Angebote" ist keine Kategorie, sondern ein Filter quer durch alle.
      Deshalb steht der Eintrag abgesetzt unter der Liste.

   Die Seite traegt die Modulfarbe --mod-marktplatz (warmes Braun).
   ========================================================================== */

  #anuca-marktplatz {
    --katfarbe: var(--mod-marktplatz);
    --katfarbe-kontrast: var(--mod-marktplatz-dark);
    background: var(--al-paper);
    color: var(--al-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;
  }

  #anuca-marktplatz *,
  #anuca-marktplatz *::before,
  #anuca-marktplatz *::after { box-sizing: border-box; }

  #anuca-marktplatz div, #anuca-marktplatz section, #anuca-marktplatz p,
  #anuca-marktplatz h1, #anuca-marktplatz h2, #anuca-marktplatz h3,
  #anuca-marktplatz span, #anuca-marktplatz a, #anuca-marktplatz article,
  #anuca-marktplatz nav, #anuca-marktplatz ul, #anuca-marktplatz li {
    float: none;
    clear: none;
  }

  #anuca-marktplatz h1, #anuca-marktplatz h2, #anuca-marktplatz h3 {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
    text-shadow: none;
  }
  #anuca-marktplatz p { color: inherit; margin: 0; }
  #anuca-marktplatz ul { list-style: none; margin: 0; padding: 0; }

  #anuca-marktplatz .am-seite {
    max-width: var(--al-seitenbreite);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 24px 0;
  }

  /* ---------- Kopfbereich ----------
     Hell und zentriert wie auf der FAQ- und der Videoseite. Eine dunkle
     Flaeche ueber die volle Breite zieht mehr Aufmerksamkeit auf sich als
     die Produkte darunter - und die sind der Inhalt der Seite. */
  #anuca-marktplatz .am-head {
    text-align: center;
    padding: 40px 0 32px;
    max-width: 680px;
    margin: 0 auto;
  }
  #anuca-marktplatz .am-head h1 {
    font-size: 38px;
    line-height: 1.12;
    margin-bottom: 14px;
  }
  #anuca-marktplatz .am-head p { font-size: 17px; color: var(--al-ink-soft); }
  #anuca-marktplatz .am-eyebrow {
    display: block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--katfarbe-kontrast);
    font-weight: 600;
    margin-bottom: 14px;
  }

  /* ---------- Auswertung (nur Administratoren) ---------- */
  #anuca-marktplatz .am-auswertung {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
  }
  /* Der Titel ist zugleich der Aufklappschalter. Standardmaessig
     zugeklappt: die Auswertung ist Verwaltung, nicht Inhalt der Seite. */
  #anuca-marktplatz .am-auswertung-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--al-ink-soft);
    background: none;
    border: 0;
    padding: 0 0 8px;
    cursor: pointer;
    border-bottom: 2px solid var(--al-line);
    border-bottom: 2px solid color-mix(in srgb, var(--katfarbe) 55%, var(--al-line));
  }
  #anuca-marktplatz .am-auswertung-titel span { flex: 1 1 auto; }
  #anuca-marktplatz .am-auswertung-titel i { color: var(--katfarbe-kontrast); }
  #anuca-marktplatz .am-auswertung-titel:hover { color: var(--al-ink); }

  #anuca-marktplatz .am-auswertung-pfeil {
    flex: 0 0 auto;
    font-size: 11px;
    transition: transform 150ms ease-in;
  }
  #anuca-marktplatz .am-auswertung-titel--offen .am-auswertung-pfeil {
    transform: rotate(180deg);
  }
  #anuca-marktplatz .am-auswertung-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
  }
  @media (max-width: 900px) {
    #anuca-marktplatz .am-auswertung-raster { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Zwei Spalten ---------- */
  #anuca-marktplatz .am-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
  }

  #anuca-marktplatz .am-nav {
    position: sticky;
    top: 24px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 12px;
  }
  #anuca-marktplatz .am-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--al-ink-soft);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.35;
  }
  #anuca-marktplatz .am-nav-link:hover {
    background: var(--al-paper);
    color: var(--al-ink);
    text-decoration: none;
  }
  #anuca-marktplatz .am-nav-link.active {
    color: var(--al-ink);
    font-weight: 600;
    background: var(--al-paper);
    background: color-mix(in srgb, var(--katfarbe) 12%, var(--al-card));
  }
  #anuca-marktplatz .am-nav-link i {
    color: var(--katfarbe-kontrast);
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
  }
  #anuca-marktplatz .am-nav-text { flex: 1 1 auto; }

  /* Zaehler je Kategorie */
  #anuca-marktplatz .am-zahl {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--al-ink-soft);
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    border-radius: 20px;
  }

  /* Leere Kategorien bleiben erreichbar, treten aber zurueck */
  #anuca-marktplatz .am-nav-link--leer { opacity: 0.5; }

  #anuca-marktplatz .am-nav-trenner {
    height: 1px;
    background: var(--al-line);
    margin: 10px 4px;
  }
  #anuca-marktplatz .am-nav-link--angebot i { color: var(--al-amber); }

  /* ---------- Kategorie ---------- */
  #anuca-marktplatz .am-kat-kopf {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--al-line);
    border-bottom: 2px solid color-mix(in srgb, var(--katfarbe) 55%, var(--al-line));
  }
  #anuca-marktplatz .am-kat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 17px;
    color: var(--katfarbe-kontrast);
    background: var(--al-line);
    background: color-mix(in srgb, var(--katfarbe) 22%, var(--al-card));
  }
  #anuca-marktplatz .am-kat-kopf h2 { font-size: 22px; margin-bottom: 3px; }
  #anuca-marktplatz .am-kat-intro { font-size: 15px; color: var(--al-ink-soft); max-width: 720px; }
  #anuca-marktplatz .am-leer { font-size: 15px; color: var(--al-ink-soft); }

  /* Im Angebotsfilter koennen mehrere Kategorien gleichzeitig sichtbar
     sein - dann brauchen sie Abstand voneinander. */
  #anuca-marktplatz .am-kat + .am-kat { margin-top: 44px; }

  /* ---------- Produktraster ---------- */
  /* stretch statt start: Karten einer Zeile werden gleich hoch. Zusammen
     mit margin-top:auto an .am-aktionen stehen die Kaufschaltflaechen
     damit auf einer Linie. Unterschiedlich lange Texte fallen dann kaum
     noch auf - das Ausfransen entstand nicht durch die Hoehe selbst,
     sondern dadurch, dass die Schaltflaechen versetzt sassen. */
  #anuca-marktplatz .am-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
  }
  @media (max-width: 1240px) {
    #anuca-marktplatz .am-raster { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Produktkarte ---------- */
  #anuca-marktplatz .am-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06),
                0 6px 16px -10px rgba(52, 58, 64, 0.10);
  }

  /* Bearbeiten - nur fuer Administratoren und eigene Produkte. */
  #anuca-marktplatz .am-bearbeiten {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    color: var(--al-ink-soft);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 7px;
    text-decoration: none;
  }
  #anuca-marktplatz .am-bearbeiten:hover {
    color: var(--katfarbe-kontrast);
    border-color: var(--katfarbe);
    background: var(--al-paper);
    text-decoration: none;
  }

  /* Damit der Schalter nicht in den Text laeuft. */
  #anuca-marktplatz .am-karte-kopf { padding-right: 34px; }

  #anuca-marktplatz .am-angebot-marke {
    position: absolute;
    top: 16px;
    right: 50px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--al-amber);
    border-radius: 20px;
  }

  #anuca-marktplatz .am-karte-kopf {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  #anuca-marktplatz .am-karte-text { flex: 1 1 auto; min-width: 0; }

  #anuca-marktplatz .am-unterkategorie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--katfarbe-kontrast);
    margin-bottom: 8px;
  }
  #anuca-marktplatz .am-karte-kopf h3 { font-size: 19px; line-height: 1.25; }
  #anuca-marktplatz .am-karte-zusatz { font-size: 14px; color: var(--al-ink-soft); margin-top: 2px; }

  #anuca-marktplatz .am-preis {
    margin-top: 10px;
    font-size: 15px;
    color: var(--al-ink);
  }
  #anuca-marktplatz .am-dauer {
    margin-left: 8px;
    font-size: 13px;
    color: var(--al-ink-soft);
  }

  /* Bild: feste Flaeche, Inhalt eingepasst - die Motive reichen vom Logo
     bis zum Foto und haben sehr unterschiedliche Seitenverhaeltnisse. */
  #anuca-marktplatz .am-bild {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 10px;
    overflow: hidden;
  }
  #anuca-marktplatz .am-bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* ---------- Beschreibung ---------- */
  #anuca-marktplatz .am-beschreibung { margin-top: 14px; }
  #anuca-marktplatz .am-text {
    font-size: 14.5px;
    color: var(--al-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #anuca-marktplatz .am-text-lang { display: none; }

  #anuca-marktplatz .am-beschreibung--offen .am-text {
    display: block;
    overflow: visible;
  }
  #anuca-marktplatz .am-beschreibung--offen .am-text-lang {
    display: block;
    margin-top: 10px;
  }

  #anuca-marktplatz .am-mehr {
    margin-top: 6px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--katfarbe-kontrast);
    background: none;
    border: 0;
    cursor: pointer;
  }
  #anuca-marktplatz .am-mehr:hover { text-decoration: underline; }

  /* ---------- Aktionen ---------- */
  #anuca-marktplatz .am-aktionen {
    margin-top: auto;
    padding-top: 16px;
  }

  #anuca-marktplatz .am-hinweis-erworben {
    display: block;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: var(--al-ink);
    background: rgba(226, 128, 58, 0.10);
    border-left: 3px solid var(--al-amber);
    border-radius: 6px;
  }
  #anuca-marktplatz .am-hinweis-erworben i { color: var(--al-amber); margin-right: 5px; }
  #anuca-marktplatz .am-gueltig { display: block; color: var(--al-ink-soft); }

  /* Hinweis auf die Voraussetzung. Bewusst nicht in Amber wie der Hinweis
     darueber: das eine ist eine Warnung ("schon gekauft"), das andere eine
     Bedingung. Zwei gleich aussehende Kaesten waeren nicht unterscheidbar. */
  #anuca-marktplatz .am-hinweis-abo {
    display: block;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: var(--al-ink-soft);
    background: var(--al-paper);
    background: color-mix(in srgb, var(--katfarbe) 10%, var(--al-card));
    border-left: 3px solid var(--katfarbe);
    border-radius: 6px;
  }
  #anuca-marktplatz .am-hinweis-abo i { color: var(--katfarbe-kontrast); margin-right: 5px; }

  #anuca-marktplatz .am-kaufzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  /* Die PayPal-Schaltflaeche kommt aus einem iframe. Ihre Hoehe wird im
     Template ueber style.height gesetzt - beide Werte muessen
     uebereinstimmen, sonst sind die Schaltflaechen unterschiedlich hoch.

     Der Versatz nach unten kommt von etwas anderem: ein iframe ist ein
     inline-Element und sitzt auf der Grundlinie, wodurch darunter der
     Platz fuer Unterlaengen frei bleibt - je nach Schrift vier bis fuenf
     Pixel. Deshalb wird der Rahmen auf Blockdarstellung gesetzt und die
     Hoehe des Containers festgelegt. */
  #anuca-marktplatz .am-paypal {
    width: 170px;
    height: 36px;
    display: flex;
    align-items: center;
  }
  #anuca-marktplatz .am-paypal > div,
  #anuca-marktplatz .am-paypal .paypal-buttons {
    width: 100% !important;
    height: 36px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #anuca-marktplatz .am-paypal iframe {
    display: block !important;
    vertical-align: top;
    margin: 0 !important;
    /* Ein iframe traegt von Haus aus einen eingelassenen Rahmen. Solange
       er als inline-Element lief, war er nicht zu sehen; mit der
       Blockdarstellung wird er sichtbar. */
    border: 0 !important;
    background: transparent !important;
  }

  #anuca-marktplatz .am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;          /* entspricht style.height der PayPal-Schaltflaeche */
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  #anuca-marktplatz .am-btn:hover {
    border-color: var(--al-ink-soft);
    color: var(--al-ink);
    text-decoration: none;
  }
  #anuca-marktplatz .am-btn--shop {
    color: #FFFFFF;
    background: var(--al-amber);
    border-color: var(--al-amber);
  }
  #anuca-marktplatz .am-btn--shop:hover {
    background: var(--al-amber-deep);
    border-color: var(--al-amber-deep);
    color: #FFFFFF;
  }

  /* ---------- Schmale Schirme ---------- */
  @media (max-width: 860px) {
    #anuca-marktplatz .am-layout { grid-template-columns: 1fr; gap: 24px; }
    #anuca-marktplatz .am-nav { position: static; }
    #anuca-marktplatz .am-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
    #anuca-marktplatz .am-nav-trenner { display: none; }
    #anuca-marktplatz .am-head { padding: 28px 0 22px; }
    #anuca-marktplatz .am-head h1 { font-size: 28px; }
    #anuca-marktplatz .am-karte-kopf { flex-direction: column-reverse; }
    #anuca-marktplatz .am-bild { width: 100%; height: 150px; }
  }

/* ==========================================================================
   Affiliate-Programm  (#anuca-affiliate, Praefix .ap-)

   Ans Ende von anuca-pages.css, hinter den vorhandenen Seitenabschnitten.

   Die Seite traegt kein Fachmodul und nimmt deshalb --mod-standard. Der
   einzige wirklich eigene Baustein ist die Fortschrittskette einer
   Anwerbung; alles andere kommt aus anuca-ui.css.
   ========================================================================== */

/* ---------- Fortschrittskette einer Anwerbung ----------

   Fuenf Stationen von der Einladung bis zur Gutschrift, verbunden durch
   Linien.

   Die Kette traegt bewusst NICHT die Modulfarbe, obwohl sie auf einer
   Modulseite steht. Ein Status muss auf jeder Seite gleich aussehen, sonst
   bedeutet dasselbe Symbol im Affiliate-Programm etwas anderes als in der
   Rechnungsuebersicht. Erreicht ist deshalb gruen und gescheitert rot -
   dieselben beiden Farben, die auch .au-status--erledigt und
   .au-status--achtung verwenden.

   Gefuellte Kreise statt eingefaerbter Flaechen: eine Einfaerbung aus
   color-mix landet bei rund 1,3:1 gegen den Kartenhintergrund und ist damit
   kaum von einem leeren Kreis zu unterscheiden. Gefuellt sind es 6,2:1
   fuer das weisse Symbol - so eindeutig wie die fruehere
   Bootstrap-Darstellung, nur in der Palette des Systems.

   Die Beschriftung lag zuvor ausschliesslich im title-Attribut und war beim
   Ausdruck und auf dem Telefon nicht erreichbar. Dafuer gibt es jetzt die
   Legende weiter unten.                                                    */

#anuca-affiliate .ap-kette {
    display: flex;
    align-items: center;
    gap: 0;
    /* Kein Umbruch: eine umgebrochene Kette liest sich nicht mehr als
       Abfolge. Die Tabelle rollt bei Bedarf waagerecht. */
    flex-wrap: nowrap;
}

#anuca-affiliate .ap-schritt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 11px;
    border-radius: 50%;
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    color: var(--al-ink-soft);
}

#anuca-affiliate .ap-schritt--erreicht {
    background: var(--al-gruen);
    border-color: var(--al-gruen);
    color: #FFFFFF;
}

/* Qualifizierung negativ - die Kette endet hier. Ein Abbruch, kein
   Zwischenschritt, deshalb ebenso kraeftig wie die erreichten Stationen. */
#anuca-affiliate .ap-schritt--gescheitert {
    background: var(--al-warn);
    border-color: var(--al-warn);
    color: #FFFFFF;
}

#anuca-affiliate .ap-linie {
    width: 16px;
    height: 3px;
    flex-shrink: 0;
    background: var(--al-line);
}
#anuca-affiliate .ap-linie--erreicht {
    background: var(--al-gruen);
}

/* Beim Ausdruck werden Hintergrundfarben von den meisten Browsern
   weggelassen - die Kette waere dann durchgehend weiss und ohne Aussage.
   Der Rand bleibt in jedem Fall erhalten und traegt die Unterscheidung. */
@media print {
    #anuca-affiliate .ap-schritt--erreicht    { border-width: 3px; }
    #anuca-affiliate .ap-schritt--gescheitert { border-width: 3px; }
    #anuca-affiliate .ap-schritt              { color: var(--al-ink); }
}

/* ---------- Legende der Kette ---------- */

#anuca-affiliate .ap-legende {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 20px;
    margin: 0;
}
#anuca-affiliate .ap-legende-zeile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--al-ink-soft);
}
/* Das Symbol soll bei mehrzeiligem Text an der ersten Zeile stehen bleiben
   und nicht mitwachsen. */
#anuca-affiliate .ap-legende-zeile .ap-schritt { margin-top: 2px; }

/* ---------- Ablauf auf der Einstiegsseite ----------

   Dieselben fuenf Stationen, aber gross und untereinander: hier erklaeren
   sie das Programm, in der Tabelle zeigen sie einen Zustand.              */

#anuca-affiliate .ap-ablauf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
}
#anuca-affiliate .ap-ablauf-schritt {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#anuca-affiliate .ap-ablauf-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-family: var(--al-font-mono);
    font-size: 14px;
    font-weight: 600;
    border-radius: 50%;
    background: var(--al-paper);                                 /* Rueckfall */
    background: color-mix(in srgb, var(--modulfarbe) 18%, var(--al-card));
    color: var(--modulfarbe-kontrast);
}
#anuca-affiliate .ap-ablauf-titel {
    font-size: 14px;
    font-weight: 600;
    color: var(--al-ink);
}
#anuca-affiliate .ap-ablauf-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--al-ink-soft);
}

/* ---------- Teilnahmebedingungen ----------

   Fliesstext aus zwei Uebersetzungsschluesseln, die HTML enthalten und mit
   | safe ausgegeben werden. Die Regel greift deshalb auf den Container und
   nicht auf einzelne Elemente.                                            */

#anuca-affiliate .ap-vereinbarung {
    max-height: 340px;
    overflow-y: auto;
    padding: 18px 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--al-ink-soft);
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
}
#anuca-affiliate .ap-vereinbarung hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--al-line);
}

/* Beim Ausdruck soll die Vereinbarung vollstaendig erscheinen und nicht in
   einem Rollbereich enden. */
@media print {
    #anuca-affiliate .ap-vereinbarung { max-height: none; overflow: visible; }
}

/* ---------- Leerzustand ---------- */

#anuca-affiliate .ap-leer {
    padding: 36px 24px;
    text-align: center;
    color: var(--al-ink-soft);
}
#anuca-affiliate .ap-leer i {
    font-size: 26px;
    color: var(--al-line);
    margin-bottom: 12px;
}
#anuca-affiliate .ap-leer-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--al-ink);
    margin-bottom: 6px;
}