/* GEO-Optimierung, Variante: nur die Bausteine dieser Seite.
   Gemeinsame Bausteine stehen in ../shared/service-base.css. */

/* Einordnung: Aussage mit Gegensatz */
.gx-statement {
    max-width: 24ch;
    margin-top: clamp(2.2rem, 4vw, 3.4rem);
    font-size: clamp(1.7rem, 2.7vw, 2.8rem);
    font-stretch: 84%;
    font-weight: 540;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.gx-statement span { display: block; margin-bottom: 0.25em; color: #7d8a85; }

.gx-scene {
    position: relative;
    margin-top: clamp(1rem, 2vw, 1.75rem);
    container-type: inline-size;
    perspective: 1500px;
    perspective-origin: 50% 35%;
}

/* Der Lösungszustand ist das normale Layout: Quellen links, Antwort rechts.
   Die Ausgangslage verschiebt dieselben Elemente nur per transform. */
.gx-scene__space {
    display: grid;
    min-height: clamp(400px, 36cqw, 520px);
    grid-template-columns: 22cqw minmax(0, 1fr);
    align-items: center;
    column-gap: 9cqw;
    padding: 2cqw 1cqw;
    transform-style: preserve-3d;
}

.gx-stack { position: relative; display: flex; flex-direction: column; gap: 14px; transform-style: preserve-3d; }

.gx-doc,
.gx-vague,
.gx-answer {
    transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--s, 1));
    transition: transform 900ms var(--ease-in-out), opacity 500ms ease;
}

.gx-doc { position: relative; transform-style: preserve-3d; transition-delay: calc(var(--i) * 80ms); }
.gx-doc--0 { --i: 0; }
.gx-doc--1 { --i: 1; }
.gx-doc--2 { --i: 2; }

.gx-doc__face {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem 1.25rem;
    background: #f3f7f5;
    color: var(--ink);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 13px) 100%, 0 100%);
}

.gx-doc__face svg { width: 22px; height: 22px; color: #5b6763; }
.gx-doc__face strong { font-size: clamp(0.9rem, 1.2vw, 1.06rem); font-weight: 640; letter-spacing: -0.01em; line-height: 1.25; hyphens: manual; }
.gx-doc__face--back { position: absolute; inset: 0; align-content: start; background: var(--white); box-shadow: inset 5px 0 0 var(--accent); transform: rotateY(180deg); }
.gx-doc__face--back .gx-hex { width: 2.2em; }

.gx-lines { display: grid; gap: 0.45rem; }
.gx-lines i { height: 6px; background: #d3ddd9; }
.gx-lines i:nth-child(2) { width: 84%; }
.gx-lines i:nth-child(3) { width: 58%; }

/* Verbindung: Klammer vom Quellenstapel und eine Linie in die Antwort */
.gx-stack::before,
.gx-stack::after {
    position: absolute;
    left: 100%;
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 500ms var(--ease-out), opacity 300ms ease;
}

.gx-stack::after {
    top: calc((100% - 28px) / 6);
    bottom: calc((100% - 28px) / 6);
    width: 3.5cqw;
    border: 2px solid var(--accent);
    border-left: 0;
}

.gx-stack::before { top: calc(50% - 1px); width: 12.5cqw; height: 2px; background: var(--accent); }

.gx-vague,
.gx-answer { grid-row: 1; grid-column: 2; }

.gx-vague {
    width: min(100%, 30rem);
    align-self: start;
    justify-self: start;
    margin: 1cqw 0 0 4cqw;
    padding: 1.4rem 1.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    color: var(--text-on-dark);
    text-align: center;
}

.gx-vague__mark {
    display: grid;
    width: 44px;
    aspect-ratio: 2 / 1.732;
    place-items: center;
    margin: 0 auto 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    clip-path: var(--hex);
    font-size: 1.05rem;
    font-weight: 700;
}

.gx-vague p { color: var(--white); font-size: clamp(1.15rem, 1.9cqw, 1.6rem); font-stretch: 85%; font-weight: 560; line-height: 1.2; }
.gx-vague small { display: block; margin-top: 0.6rem; color: var(--muted-on-dark); font-size: 0.85rem; }

.gx-answer {
    --c: 26px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    padding: clamp(1.25rem, 2.2cqw, 2rem);
    background: var(--white);
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * 0.577) 100%, 0 100%);
}

.gx-answer__mark { display: grid; width: 44px; height: 44px; place-items: center; background: var(--accent); }
.gx-answer__mark svg { width: 24px; height: 24px; }
.gx-answer strong { display: block; font-size: clamp(1.25rem, 2.2cqw, 2rem); font-stretch: 85%; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.gx-answer p { margin-top: 0.6rem; color: var(--text); font-size: clamp(0.92rem, 1.15cqw, 1.02rem); }

.gx-answer__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.25rem;
    margin-block: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.gx-answer__facts li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.92rem;
    font-weight: 560;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 300ms ease, transform 400ms var(--ease-out);
}

.gx-answer__facts li::before {
    position: absolute;
    top: 0.32em;
    left: 0;
    width: 0.95rem;
    height: 0.55rem;
    border-bottom: 2px solid var(--teal);
    border-left: 2px solid var(--teal);
    content: "";
    transform: rotate(-45deg) scale(0.8);
}

.gx-answer__sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 600;
}

.gx-answer__sources span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Ausgangslage: dieselben Dokumente, verstreut im Raum */
.gx-example[data-state="before"] .gx-doc--0 { --x: 3cqw; --y: -1cqw; --z: -60px; --rx: 10deg; --ry: 24deg; --rz: -8deg; }
.gx-example[data-state="before"] .gx-doc--1 { --x: 36cqw; --y: 9cqw; --z: 40px; --rx: -8deg; --ry: -18deg; --rz: 6deg; }
.gx-example[data-state="before"] .gx-doc--2 { --x: 72cqw; --y: calc(-2 * (100% + 14px) + 2cqw); --z: -110px; --rx: 12deg; --ry: -26deg; --rz: -5deg; }
.gx-example[data-state="before"] .gx-answer { --z: -240px; --rx: 14deg; opacity: 0; pointer-events: none; }

/* Lösungsansatz: Dokumente drehen sich um und ordnen sich als Quellen */
.gx-example[data-state="after"] .gx-doc { --ry: 180deg; }
.gx-example[data-state="after"] .gx-vague { --z: -280px; opacity: 0; }
.gx-example[data-state="after"] .gx-answer { --z: 30px; opacity: 1; transition-delay: 220ms; }
.gx-example[data-state="after"] .gx-answer__facts li { opacity: 1; transform: none; transition-delay: calc(700ms + var(--k) * 60ms); }
.gx-example[data-state="after"] .gx-stack::before,
.gx-example[data-state="after"] .gx-stack::after { opacity: 1; transform: none; transition-delay: 760ms; }
.gx-answer__facts li:nth-child(1) { --k: 0; }
.gx-answer__facts li:nth-child(2) { --k: 1; }
.gx-answer__facts li:nth-child(3) { --k: 2; }
.gx-answer__facts li:nth-child(4) { --k: 3; }

@media (max-width: 760px) {
    .gx-scene__space { min-height: 0; grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 0; }
    .gx-stack { gap: 8px; }
    .gx-stack::before,
    .gx-stack::after { display: none; }
    .gx-doc__face { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; padding: 0.75rem 0.9rem; }
    .gx-doc__face--back { align-content: center; }
    .gx-doc .gx-lines { display: none; }
    .gx-vague,
    .gx-answer { grid-row: 2; grid-column: 1; }
    .gx-vague { width: auto; align-self: center; justify-self: stretch; margin: 0; }
    .gx-answer { grid-template-columns: minmax(0, 1fr); }
    .gx-answer__facts { grid-template-columns: minmax(0, 1fr); }

    .gx-example[data-state="before"] .gx-doc--0 { --x: -3cqw; --y: 4px; --z: -30px; --rx: 6deg; --ry: 14deg; --rz: -5deg; --s: 0.92; }
    .gx-example[data-state="before"] .gx-doc--1 { --x: 7cqw; --y: -2px; --z: 20px; --rx: -4deg; --ry: -12deg; --rz: 4deg; --s: 0.92; }
    .gx-example[data-state="before"] .gx-doc--2 { --x: -1cqw; --y: -8px; --z: -50px; --rx: 6deg; --ry: 16deg; --rz: -3deg; --s: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-doc,
    .gx-vague,
    .gx-answer,
    .gx-answer__facts li { transition-property: opacity; transition-delay: 0ms !important; }
    .gx-answer__facts li { transform: none; }
}