/* ==========================================================================
   aNuCa UI-Bausteine

   Elemente, die auf mehreren Seiten vorkommen. Setzt anuca-tokens.css voraus.

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

   Alle Klassen sind mit "au-" gepraefixt (aNuCa UI) und kollidieren damit
   nicht mit styles.css oder Bootstrap.

   Diese Datei ist die Grundlage, wenn der neue Stil schrittweise in die
   Anwendung uebernommen wird - Buttons und Textbausteine muessen dort
   nicht neu gebaut werden.
   ========================================================================== */


/* ==========================================================================
   1. Seitengrundlage
   Wird auf den aeusseren Container einer Seite gesetzt.
   ========================================================================== */

.au-page {
    background: var(--al-paper);
    color: var(--al-ink);
    font-family: var(--al-font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.au-page *,
.au-page *::before,
.au-page *::after { box-sizing: border-box; }

/* Layout-Vererbung aus styles.css neutralisieren: was hier nicht gesetzt
   wird, kann sonst von globalen Regeln durchschlagen. */
.au-page div,
.au-page section,
.au-page p,
.au-page h1,
.au-page h2,
.au-page h3,
.au-page span,
.au-page a,
.au-page ul,
.au-page li {
    float: none;
    clear: none;
}

.au-page h1,
.au-page h2,
.au-page h3 {
    font-family: var(--al-font);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
    text-shadow: none;
}

.au-page p { color: inherit; margin: 0; }
.au-page a { color: inherit; }


/* ==========================================================================
   2. Container
   ========================================================================== */

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

.au-wrap--narrow { max-width: 720px; }


/* ==========================================================================
   3. Textbausteine
   ========================================================================== */

/* Kleines Label ueber einer Ueberschrift */
.au-eyebrow {
    display: block;
    font-family: var(--al-font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
}

/* Zentrierter Kopf einer Sektion: Eyebrow + Ueberschrift + Beschreibung */
.au-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 48px;
}
.au-head h2 { font-size: 30px; margin-bottom: 10px; }
.au-head p { color: var(--al-ink-soft); font-size: 16px; }


/* ==========================================================================
   4. Schaltflaechen
   ========================================================================== */

.au-btn {
    display: inline-block;
    background: var(--al-amber);
    color: #fff;
    padding: 14px 26px;
    border-radius: var(--al-radius);
    border: 0;
    text-decoration: none;
    font-family: var(--al-font);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.au-btn:hover {
    background: var(--al-amber-deep);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Zweitrangige Aktion: Text mit Unterstrich statt Flaeche */
.au-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;
}
.au-btn-text:hover {
    border-color: var(--al-ink);
    color: var(--al-ink);
    text-decoration: none;
}

/* Dezenter Verweis, der nicht mit einem Button konkurrieren soll */
.au-link-soft {
    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;
}
.au-link-soft:hover {
    color: var(--al-ink);
    border-color: var(--al-ink-soft);
    text-decoration: none;
}
.au-link-soft i { font-size: 11px; }


/* ==========================================================================
   5. Flaechen
   ========================================================================== */

.au-card {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 28px 26px;
}

/* Dunkle Flaeche, farblich identisch zur Navigation */
.au-dark {
    background: var(--al-teal);
    border-radius: 14px;
    padding: 34px 36px;
}
.au-dark h2,
.au-dark h3 { color: #fff; }
.au-dark p { color: #C9D6D4; }


/* ==========================================================================
   6. Icon-Kacheln
   Grundform in Amber; die Modulvarianten nur dort einsetzen, wo das
   jeweilige Modul auch benannt ist.
   ========================================================================== */

.au-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(226, 128, 58, 0.12);
    color: var(--al-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.au-icon--analyse      { background: rgba(170, 163, 142, 0.22); color: var(--mod-analyse-dark); }
.au-icon--wachstum     { background: rgba(254, 203, 0, 0.16);   color: var(--mod-wachstum-dark); }
.au-icon--reduktion    { background: rgba(146, 162, 189, 0.22); color: var(--mod-reduktion-dark); }
.au-icon--napfplan     { background: rgba(68, 68, 68, 0.12);    color: var(--mod-napfplan); }
.au-icon--futtermittel { background: rgba(162, 173, 0, 0.16);   color: var(--mod-futtermittel-dark); }
.au-icon--marktplatz   { background: rgba(193, 84, 84, 0.14);   color: var(--mod-marktplatz-dark); }


/* ==========================================================================
   7. Kennzeichnungen
   ========================================================================== */

/* Pillenfoermige Auflistung, z.B. fuer Merkmale */
.au-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 100px;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--al-ink-soft);
}
.au-chip i { color: var(--al-sage); font-size: 12px; }

/* Kleines Label, etwa fuer Zusatzpakete */
.au-tag {
    display: inline-block;
    font-family: var(--al-font-mono);
    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;
}


/* ==========================================================================
   8. Barrierefreiheit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .au-page * { transition: none !important; }
}