/* Enneagramm-Stile — Typen, Triaden, Flügel, Beziehungs-Matrix (15.10.2026)
   Nutzt Basis-Klassen aus style.css/themes.css (card-grid, card-link,
   card-detail, card-meaning, deck-*, orakel-cta). Eigene Klassen: ennea-*. */

/* --- Überschriften über Typ-Grids / Matrix --- */
.ennea-grid-title {
    text-align: center;
    margin: 2.4rem 0 1rem;
    color: var(--color-gold, #d4a944);
    font-size: 1.35rem;
    letter-spacing: 0.04em;
}

/* --- Typ-Karten im Grid (Index) --- */
.ennea-grid {
    max-width: 760px;
    margin: 0 auto 1.4rem;
}

.ennea-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
}

.ennea-glyph-sm {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border-radius: 50%;
    font-size: 1.7rem;
    font-weight: 600;
    color: #10101f;
    background: var(--color-gold, #d4a944);
    box-shadow: 0 0 18px rgba(212, 169, 68, 0.25);
}

/* Triaden-Farben: Bauch = erdrot, Herz = gold, Kopf = blau */
.triad-glyph[data-triad="bauch"] { background: #c25a4a; }
.triad-glyph[data-triad="herz"]  { background: #d4a944; }
.triad-glyph[data-triad="kopf"]  { background: #5a8ab4; }

/* --- Detailseite: große Typ-Zahl --- */
.ennea-visual {
    text-align: center;
    margin: 1.6rem 0 0.4rem;
}

.ennea-glyph {
    width: 110px;
    height: 110px;
    line-height: 110px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 3.2rem;
    font-weight: 700;
    color: #10101f;
    background: var(--color-gold, #d4a944);
    box-shadow: 0 0 30px rgba(212, 169, 68, 0.3);
}

.ennea-subtitle {
    color: var(--color-text-muted, #a7a7c2);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin: 0.7rem 0 0;
    text-align: center;
}

.ennea-summary {
    color: var(--color-text-muted, #a7a7c2);
    font-style: italic;
    margin-top: 0;
}

/* --- Kernthema-Tabelle --- */
.ennea-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.97rem;
}

.ennea-table th {
    text-align: left;
    width: 38%;
    padding: 0.55rem 0.7rem;
    color: var(--color-gold, #d4a944);
    font-weight: 600;
    vertical-align: top;
    border-bottom: 1px solid rgba(212, 169, 68, 0.15);
}

.ennea-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(212, 169, 68, 0.15);
}

/* --- Flügel-Boxen --- */
.fluegel-box {
    background: var(--color-bg-card, #151527);
    border: 1px solid var(--color-secondary, #26264a);
    border-left: 3px solid var(--color-gold, #d4a944);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0.8rem 0;
}

.fluegel-box h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.fluegel-box h3 a {
    color: var(--color-gold, #d4a944);
    text-decoration: none;
}

.fluegel-box h3 a:hover {
    text-decoration: underline;
}

/* --- Stress/Wachstum-Linien --- */
.linie-box {
    background: var(--color-bg-card, #151527);
    border: 1px solid var(--color-secondary, #26264a);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0.8rem 0;
}

.linie-box h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.linie-box h3 a {
    color: var(--color-gold, #d4a944);
    text-decoration: none;
}

.linie-box h3 a:hover {
    text-decoration: underline;
}

.linie-stress {
    border-left: 3px solid #c25a4a;
}

.linie-wachstum {
    border-left: 3px solid #6fa86a;
}

/* --- Linkliste der Paar-Kombinationen --- */
.paar-links {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.45rem 1rem;
}

.paar-links li {
    margin: 0;
}

.paar-links a {
    color: var(--color-gold-light, #e8cf8a);
    text-decoration: none;
    font-size: 0.95rem;
}

.paar-links a:hover {
    text-decoration: underline;
}

/* --- Enneagramm-Symbol (Index) --- */
.enneagramm-symbol {
    display: block;
    max-width: 400px;
    width: 90%;
    margin: 2rem auto 0.6rem;
}

.enneagramm-symbol .sym-nr {
    fill: #10101f;
    font-size: 15px;
    font-weight: 700;
}

.enneagramm-symbol .sym-label {
    fill: var(--color-text-muted, #a7a7c2);
    font-size: 13px;
    font-weight: 600;
}

/* --- Triaden-Legende --- */
.legende {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 1.6rem;
}

.triad-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #10101f;
}

.triad-pill[data-triad="bauch"] { background: #c25a4a; }
.triad-pill[data-triad="herz"]  { background: #d4a944; }
.triad-pill[data-triad="kopf"]  { background: #5a8ab4; }

/* --- CTA-Zentrierung (Index/Beziehungen liegen in <article>, nicht card-detail) --- */
.orakel-cta {
    text-align: center;
}

/* --- Beziehungs-Matrix --- */
.table-scroll {
    overflow-x: auto;
    margin: 1rem auto 1.6rem;
    max-width: 720px;
}

.paar-matrix {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-size: 0.95rem;
}

.paar-matrix th,
.paar-matrix td {
    border: 1px solid rgba(212, 169, 68, 0.18);
    padding: 0.42rem 0.55rem;
    text-align: center;
}

.paar-matrix th {
    background: rgba(212, 169, 68, 0.08);
}

.paar-matrix th a,
.paar-matrix td a {
    color: var(--color-gold-light, #e8cf8a);
    text-decoration: none;
}

.paar-matrix th a:hover,
.paar-matrix td a:hover {
    text-decoration: underline;
}

.paar-matrix td.diag {
    background: rgba(212, 169, 68, 0.05);
    opacity: 0.55;
}

.paar-block {
    scroll-margin-top: 5.5rem;
}

.paar-block h3 a {
    color: var(--color-gold, #d4a944);
    text-decoration: none;
}

.paar-block h3 a:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .ennea-table th { width: 45%; }
    .paar-links { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
}