/* ===================================================================
   AERONA SPACE – AERONA OFFICE (Ideenseite)

   Eine Sammlung von Ideen, kein Produkt. Deshalb bewusst ohne
   Produktgestaltung: keine Kaufknöpfe, keine Erscheinungstermine,
   keine Bildschirmfotos von etwas, das es nicht gibt.

   Eigener Akzent in Violett, damit der Bereich neben dem blauen Rest
   der Seite als etwas Eigenes erkennbar ist.

   Zweiter Teil in office-markt.css: die Übersicht des Marktes.
   =================================================================== */

.of-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 7rem 1.5rem 6rem;
    /* Netz gegen waagerechtes Rollen: `clip` schneidet ab, ohne einen
       Rollbereich zu erzeugen – anders als `hidden`, das das
       mitlaufende Tabellenkopf-Verhalten kaputt machen würde. */
    overflow-x: clip;
}

/* ---------- Kopfbereich ---------- */

.of-hero {
    position: relative;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

/* Weicher Schein hinter der Überschrift – rein dekorativ.
   Bleibt innerhalb der Seitenbreite: ragte er nach links hinaus,
   würde die ganze Seite auf schmalen Bildschirmen waagerecht rollen. */
.of-hero::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    width: min(460px, 100%);
    height: 300px;
    background: radial-gradient(circle at 30% 40%, rgba(167, 139, 250, 0.16), transparent 68%);
    pointer-events: none;
    z-index: -1;
}

.of-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #c4b5fd;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
    padding: 4px 11px;
    border-radius: 6px;
    margin-bottom: 1.4rem;
}

.of-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1.3rem;
    background: linear-gradient(120deg, #f8fafc 30%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.of-unter {
    max-width: 66ch;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #cbd5e1;
    margin: 0 0 2rem;
}

/* Der Hinweis, dass hier nichts fertig ist */
.of-warnung {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 74ch;
    padding: 1.1rem 1.3rem;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.26);
    color: #fde68a;
    font-size: 0.95rem;
    line-height: 1.65;
}

.of-warnung i {
    margin-top: 0.25rem;
    color: #fbbf24;
    flex-shrink: 0;
}

.of-warnung strong {
    color: #fef3c7;
}

/* ---------- Abschnitte ---------- */

.of-block {
    margin-bottom: 4.5rem;
}

.of-block__titel {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #f1f5f9;
    margin: 0 0 0.7rem;
}

.of-block__unter {
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 2.2rem;
}

/* ---------- Die geplanten Bausteine ---------- */

.of-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 1.2rem;
}

.of-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.35));
    border: 1px solid rgba(148, 163, 184, 0.14);
    transition:
        transform var(--bew-normal) var(--bew-beides),
        border-color var(--bew-normal) var(--bew-beides),
        background-color var(--bew-normal) var(--bew-beides);
}

.of-karte:hover {
    transform: translateY(-4px);
    border-color: rgba(167, 139, 250, 0.4);
    background: linear-gradient(160deg, rgba(49, 46, 129, 0.3), rgba(15, 23, 42, 0.45));
}

.of-karte__symbol {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #ddd6fe;
    background: rgba(167, 139, 250, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.26);
}

.of-karte__name {
    font-size: 1.15rem;
    font-weight: 750;
    color: #f8fafc;
    margin-bottom: 0.15rem;
}

/* „Statt Word", „Statt Excel" – der Vergleich in einem Wort */
.of-karte__statt {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a78bfa;
    margin-bottom: 0.85rem;
}

.of-karte__text {
    font-size: 0.93rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0;
}

/* ---------- Was anders werden soll ---------- */

.of-anders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.1rem;
}

.of-punkt {
    padding: 1.4rem 1.4rem 1.3rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.4);
    border-left: 3px solid rgba(167, 139, 250, 0.5);
}

.of-punkt h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 0.55rem;
}

.of-punkt p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0;
}

/* ---------- Was schwer wird ---------- */

.of-huerden {
    display: grid;
    gap: 0.9rem;
}

.of-huerde {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.15rem 1.35rem;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.of-huerde i {
    margin-top: 0.3rem;
    color: #fb7185;
    flex-shrink: 0;
}

.of-huerde__inhalt h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 0.35rem;
}

.of-huerde__inhalt p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0;
}

/* ---------- Abschluss ---------- */

.of-schluss {
    max-width: 74ch;
    padding: 1.6rem 1.7rem;
    border-radius: 14px;
    background: rgba(167, 139, 250, 0.07);
    border: 1px solid rgba(167, 139, 250, 0.22);
    font-size: 0.98rem;
    line-height: 1.75;
    color: #cbd5e1;
}

.of-schluss strong {
    color: #ddd6fe;
}

.of-weiter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: #c4b5fd;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.of-weiter:hover {
    gap: 0.85rem;
}

@media (max-width: 640px) {
    .of-main {
        padding: 5.5rem 1.1rem 4rem;
    }

    .of-block {
        margin-bottom: 3.5rem;
    }
}