/* =====================================================================
   KGS TOPIC  —  Aufklappbare Themenkarte
   ---------------------------------------------------------------------
   Zweck: Themen zeigen zuerst nur Symbol + Titel. Die Beschreibung
   erscheint erst auf Klick. Damit verschwinden die dauerhaft offenen
   Textwaende, und die Bloecke lesen sich als ruhige, gleichwertige
   Reihe statt als Textwueste.

   Zwei Skins, weil die Sektionen wechseln:
     .kgs-topic            dunkler Grund (Standard)
     .kgs-topic--light     heller Grund

   Aufklappen laeuft ueber grid-template-rows 0fr -> 1fr. Das animiert
   echte Inhaltshoehen weich, ohne dass eine feste max-height geraten
   werden muss (die bei langen Texten sonst abschneidet oder nachruckelt).
   ===================================================================== */

.kgs-topics {
    display: grid;
    gap: 14px;
    width: 100%;
    /* Die Karten-Grids sitzen teils in Spalten, die von einer hoeheren
       Nachbarspalte gestreckt werden. Der Grid-Standard
       (align-content/-items: stretch) wuerde die Resthoehe auf die Zeilen
       verteilen, sodass die Karten je nach Nachbarspalte unterschiedlich
       hoch ausfallen. start haelt jede Karte auf ihrer Inhaltshoehe -
       wichtig, weil die Hoehe hier zwischen zu und offen wechselt. */
    align-content: start;
    align-items: start;
}
.kgs-topics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kgs-topics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kgs-topic {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(202, 138, 4, .18);
    background:
        radial-gradient(circle at 8% 0%, rgba(202, 138, 4, .10), transparent 42%),
        linear-gradient(150deg, rgba(28, 24, 19, .92), rgba(8, 7, 6, .97));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                border-color .4s ease, box-shadow .4s ease;
    overflow: hidden;
    isolation: isolate;
}
.kgs-topic--light {
    border-color: rgba(137, 90, 8, .16);
    background:
        radial-gradient(circle at 6% 0%, rgba(202, 138, 4, .08), transparent 38%),
        rgba(255, 255, 255, .78);
    box-shadow: 0 18px 44px rgba(72, 47, 7, .10), inset 0 1px 0 #FFF;
}

/* Feine Lichtkante oben - dieselbe Sprache wie die uebrigen Karten */
.kgs-topic::before {
    content: '';
    position: absolute;
    inset-inline: 22px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 184, 59, .55), transparent);
    opacity: .7;
    pointer-events: none;
}

.kgs-topic:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 184, 59, .42);
    box-shadow: 0 30px 66px rgba(0, 0, 0, .42), 0 0 28px rgba(202, 138, 4, .10),
                inset 0 1px 0 rgba(255, 255, 255, .07);
}
.kgs-topic--light:hover {
    border-color: rgba(190, 128, 12, .40);
    box-shadow: 0 30px 66px rgba(72, 47, 7, .16), 0 0 26px rgba(202, 138, 4, .08),
                inset 0 1px 0 #FFF;
}

/* ── Kopfzeile: als Button, damit Tastatur und Screenreader sie bedienen ── */
.kgs-topic-head {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.kgs-topic-head:focus-visible {
    outline: 2px solid rgba(229, 184, 59, .75);
    outline-offset: -4px;
    border-radius: 22px;
}

/* Symbol-Kachel */
.kgs-topic-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgba(202, 138, 4, .30);
    background: linear-gradient(150deg, rgba(202, 138, 4, .16), rgba(202, 138, 4, .04));
    transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                border-color .4s ease, box-shadow .4s ease;
}
.kgs-topic-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #E5B83B;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kgs-topic--light .kgs-topic-icon svg { stroke: #A97708; }
.kgs-topic:hover .kgs-topic-icon,
.kgs-topic.is-open .kgs-topic-icon {
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(229, 184, 59, .60);
    box-shadow: 0 0 22px rgba(202, 138, 4, .22);
}

.kgs-topic-title {
    margin: 0;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -.2px;
    color: #F6EFE2;
}
.kgs-topic--light .kgs-topic-title { color: #1C1917; }

/* Plus-Zeichen, das sich beim Oeffnen zum Minus dreht */
.kgs-topic-sign {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(202, 138, 4, .35);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .4s ease;
}
.kgs-topic-sign::before,
.kgs-topic-sign::after {
    content: '';
    position: absolute;
    inset: 50% 7px auto 7px;
    height: 1.5px;
    border-radius: 2px;
    background: #E5B83B;
    transform: translateY(-50%);
    transition: opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.kgs-topic-sign::after { transform: translateY(-50%) rotate(90deg); }
.kgs-topic--light .kgs-topic-sign::before,
.kgs-topic--light .kgs-topic-sign::after { background: #A97708; }
.kgs-topic.is-open .kgs-topic-sign { transform: rotate(180deg); border-color: rgba(229, 184, 59, .65); }
.kgs-topic.is-open .kgs-topic-sign::after { opacity: 0; transform: translateY(-50%) rotate(0deg); }

/* ── Aufklappbarer Bereich ── */
.kgs-topic-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1);
}
.kgs-topic.is-open .kgs-topic-panel { grid-template-rows: 1fr; }
.kgs-topic-panel > div { overflow: hidden; }

.kgs-topic-body {
    padding: 0 22px 22px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    line-height: 1.75;
    color: #A8A29E;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .45s ease .1s, transform .45s ease .1s;
}
.kgs-topic--light .kgs-topic-body { color: #514B44; }
.kgs-topic.is-open .kgs-topic-body { opacity: 1; transform: none; }

/* Trennlinie zwischen Titel und Text, erscheint mit dem Oeffnen */
.kgs-topic-body::before {
    content: '';
    display: block;
    height: 1px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, rgba(202, 138, 4, .45), transparent);
}

@media (max-width: 900px) {
    .kgs-topics--2, .kgs-topics--3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .kgs-topics { gap: 11px; }
    .kgs-topic-head { padding: 16px 17px; gap: 13px; }
    .kgs-topic-icon { width: 40px; height: 40px; border-radius: 12px; }
    .kgs-topic-icon svg { width: 20px; height: 20px; }
    .kgs-topic-title { font-size: 1rem; }
    .kgs-topic-body { padding: 0 17px 18px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kgs-topic, .kgs-topic-icon, .kgs-topic-sign,
    .kgs-topic-panel, .kgs-topic-body { transition: none !important; }
}

/* Schritt-Marker: im Ablauf-Block traegt die Karte zusaetzlich die
   Position in der Abfolge, damit die Reihenfolge lesbar bleibt, wenn
   aus der Zeitleiste eine Kartenreihe wird. */
.kgs-topic-step {
    display: block;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #C79A2A;
}
.kgs-topic--light .kgs-topic-step { color: #A97708; }

/* Verbindungslinie zwischen den Schritt-Karten (nur in der Abfolge) */
.kgs-topics--flow .kgs-topic + .kgs-topic::after {
    content: '';
    position: absolute;
    left: 44px;
    top: -8px;
    width: 1px;
    height: 8px;
    background: linear-gradient(rgba(202, 138, 4, .5), transparent);
}