/* ==========================================================================
   Seiten-Templates: Plattform, Wissen, Über uns
   Gemeinsame Styles für alle Unterseiten
   ========================================================================== */

/* Full-Width Override für Unterseiten (wie Startseite) */
.of-main-content--fullwidth {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100%;
}

/* Page Content Wrapper (unter Hero) — Breite wie Startseite (1600px) */
.of-page-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Feature-Sektionen (Plattform + Über uns) */
.of-feature-section {
    padding: 4rem 0;
}
.of-feature-section--alt {
    background: rgba(20, 184, 166, 0.03);
    border-radius: 1rem;
    margin: 1rem 0;
    padding: 4rem 2rem;
}
.of-feature-section__inner {
    max-width: 1600px;
    margin: 0 auto;
}

/* Section Header mit Icon */
.of-feature-section__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.of-feature-section__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.of-feature-section__icon--teal { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
.of-feature-section__icon--violet { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

.of-feature-section__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.of-feature-section__title {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 1rem;
}
[data-theme="dark"] .of-feature-section__title { color: #f1f5f9; }

.of-feature-section__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1.5rem;
    max-width: 820px;
}
[data-theme="dark"] .of-feature-section__desc { color: #94a3b8; }

/* Video-Platzhalter */
.of-video-placeholder {
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem 0;
    transition: border-color 0.2s ease;
}
.of-video-placeholder:hover { border-color: #cbd5e1; }
[data-theme="dark"] .of-video-placeholder { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .of-video-placeholder:hover { border-color: #475569; }

.of-video-placeholder__icon {
    font-size: 2rem;
    color: #14b8a6;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.of-video-placeholder__text {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* Highlight-Punkte (Feature-Details) */
.of-feature-section__highlights {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.of-highlight {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.of-highlight__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.of-highlight__dot--teal { background: #14b8a6; }
.of-highlight__dot--violet { background: #8b5cf6; }

.of-highlight strong {
    font-size: 0.95rem;
    color: #1e293b;
    display: block;
    margin-bottom: 0.25rem;
}
[data-theme="dark"] .of-highlight strong { color: #f1f5f9; }

.of-highlight p {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
[data-theme="dark"] .of-highlight p { color: #94a3b8; }

/* Hero compact (Unterseiten) */
.of-hero-new--compact {
    padding: 6rem 2rem 3rem;
}
.of-hero-new--compact .of-hero-new__title { font-size: 2.5rem; }
.of-hero-new--compact .of-hero-new__subtitle { font-size: 1.1rem; }

/* ==========================================================================
   Wissen-Seite: Kategorien-Grid
   ========================================================================== */
.of-wissen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) { .of-wissen-grid { grid-template-columns: 1fr; } }

.of-wissen-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
    position: relative;
}

/* INTERN-Badge auf der Wissen-Card (für Mitglieder-Bereich) */
.of-wissen-card .of-wissen-card__badge {
    position: absolute !important;
    top: 12px;
    right: 12px;
    display: inline-block !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #b8860b;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), rgba(184, 134, 11, 0.1));
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 4px;
    padding: 3px 7px;
    line-height: 1;
    z-index: 5;
}
.of-wissen-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .of-wissen-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .of-wissen-card:hover { border-color: #475569; box-shadow: none; }

.of-wissen-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.of-wissen-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
[data-theme="dark"] .of-wissen-card__title { color: #f1f5f9; }

.of-wissen-card__desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.of-wissen-card__link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #14b8a6;
    margin-top: auto;
}

.of-wissen-hint {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* ==========================================================================
   Kontakt-Seite
   ========================================================================== */
.of-kontakt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 640px) { .of-kontakt-grid { grid-template-columns: 1fr; } }

.of-kontakt-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
[data-theme="dark"] .of-kontakt-card { background: #1e293b; border-color: #334155; }

.of-kontakt-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.of-kontakt-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
[data-theme="dark"] .of-kontakt-card__title { color: #f1f5f9; }

.of-kontakt-card__link {
    color: #14b8a6;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}
.of-kontakt-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.of-kontakt-card__desc {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
[data-theme="dark"] .of-kontakt-card__desc { color: #94a3b8; }

/* Kontaktformular */
.of-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.of-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.of-contact-form__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}
[data-theme="dark"] .of-contact-form__label { color: #e2e8f0; }

.of-contact-form__input,
.of-contact-form__textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s ease;
}
.of-contact-form__input:focus,
.of-contact-form__textarea:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}
[data-theme="dark"] .of-contact-form__input,
[data-theme="dark"] .of-contact-form__textarea {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-theme="dark"] .of-contact-form__input:focus,
[data-theme="dark"] .of-contact-form__textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.of-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

.of-contact-form__field--checkbox {
    flex-direction: row;
}
.of-contact-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
}
[data-theme="dark"] .of-contact-form__checkbox-label { color: #94a3b8; }
.of-contact-form__checkbox-label a { color: #14b8a6; text-decoration: none; }
.of-contact-form__checkbox-label a:hover { text-decoration: underline; }

.of-contact-form__checkbox {
    margin-top: 3px;
    accent-color: #14b8a6;
}

.of-contact-form__submit {
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
}
.of-contact-form__submit:hover {
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

.of-contact-form__hint {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Erfolg/Fehler-Meldungen */
.of-contact-alert {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.of-contact-alert--success {
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: #14b8a6;
}
.of-contact-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.of-kontakt-hint {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}
[data-theme="dark"] .of-kontakt-hint { color: #94a3b8; }
.of-kontakt-hint strong { color: #14b8a6; }
.of-kontakt-hint a { color: #14b8a6; text-decoration: none; font-weight: 600; }
.of-kontakt-hint a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Newsletter-Intro */
.of-newsletter-intro {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 0.5rem;
}
.of-newsletter-intro h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    color: #0f172a;
}
[data-theme="dark"] .of-newsletter-intro h2 { color: #e2e8f0; }
.of-newsletter-intro ul {
    margin: 0 0 0.75rem 1.25rem;
    padding: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
}
[data-theme="dark"] .of-newsletter-intro ul { color: #94a3b8; }
.of-newsletter-intro__promise {
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(20, 184, 166, 0.15);
    font-size: 0.85rem;
    color: #475569;
}
[data-theme="dark"] .of-newsletter-intro__promise { color: #94a3b8; }
.of-newsletter-intro__promise strong { color: #14b8a6; }

/* Legal-Text (Impressum, Datenschutz) */
.of-legal-text {
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.7;
}
[data-theme="dark"] .of-legal-text { color: #94a3b8; }
.of-legal-text h2 {
    margin: 2rem 0 0.75rem 0;
    font-size: 1.15rem;
    color: #0f172a;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(20, 184, 166, 0.2);
}
[data-theme="dark"] .of-legal-text h2 { color: #e2e8f0; }
.of-legal-text h2:first-child { margin-top: 0; }
.of-legal-text p { margin: 0 0 1rem 0; }
.of-legal-text a { color: #14b8a6; text-decoration: none; }
.of-legal-text a:hover { text-decoration: underline; text-underline-offset: 3px; }
.of-legal-text strong { color: #0f172a; }
[data-theme="dark"] .of-legal-text strong { color: #e2e8f0; }
.of-legal-text h3 {
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1rem;
    color: #0f172a;
}
[data-theme="dark"] .of-legal-text h3 { color: #cbd5e1; }
.of-legal-text ul, .of-legal-text ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}
.of-legal-text li { margin-bottom: 0.35rem; }

/* Abo kündigen: Schritte + CTA */
.of-kuendigen-steps {
    counter-reset: step;
    list-style: none;
    margin: 1rem 0 1.5rem 0;
    padding: 0;
}
.of-kuendigen-steps li {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 3rem;
    margin-bottom: 0.5rem;
    background: rgba(20, 184, 166, 0.04);
    border-left: 3px solid #14b8a6;
    border-radius: 0 0.375rem 0.375rem 0;
    counter-increment: step;
}
.of-kuendigen-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: #14b8a6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.of-kuendigen-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 0.5rem;
    text-align: center;
}
.of-kuendigen-cta h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #0f172a;
}
[data-theme="dark"] .of-kuendigen-cta h3 { color: #e2e8f0; }
.of-kuendigen-cta p {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #475569;
}
[data-theme="dark"] .of-kuendigen-cta p { color: #94a3b8; }

/* Risikohinweise: Warn-Box */
.of-risiko-warnung {
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    background: rgba(239, 68, 68, 0.06);
    border-left: 4px solid #ef4444;
    border-radius: 0 0.375rem 0.375rem 0;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.6;
}
[data-theme="dark"] .of-risiko-warnung { color: #cbd5e1; }
.of-risiko-warnung strong { color: #dc2626; }

/* ==========================================================================
   Video-Grid (Wissen/Videos)
   ========================================================================== */
.of-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) { .of-videos-grid { grid-template-columns: 1fr; } }

.of-video-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.of-video-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
[data-theme="dark"] .of-video-card__title { color: #f1f5f9; }

.of-video-card__desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
[data-theme="dark"] .of-video-card__desc { color: #94a3b8; }

/* ==========================================================================
   Blog (Übersicht + Single Post)
   ========================================================================== */

/* Filter-Bar — Tab-Style mit Underline (modern, minimalistisch) */
.of-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2.5rem;
    justify-content: center;
    border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .of-blog-filters { border-bottom-color: #334155; }

.of-blog-filter {
    padding: 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
}
.of-blog-filter:hover {
    color: #475569;
}
[data-theme="dark"] .of-blog-filter:hover { color: #cbd5e1; }

.of-blog-filter--active {
    color: #14b8a6;
    border-bottom-color: #14b8a6;
}
.of-blog-filter--active:hover {
    color: #14b8a6;
}

/* Blog Card-Grid */
.of-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) { .of-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .of-blog-grid { grid-template-columns: 1fr; } }

.of-blog-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.of-blog-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
[data-theme="dark"] .of-blog-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .of-blog-card:hover { border-color: #475569; box-shadow: none; }

.of-blog-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}
.of-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.of-blog-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}
[data-theme="dark"] .of-blog-card__image { background: #0f172a; }
[data-theme="dark"] .of-blog-card__image--placeholder { color: #475569; }

.of-blog-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.of-blog-card__category {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.of-blog-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}
[data-theme="dark"] .of-blog-card__title { color: #f1f5f9; }

.of-blog-card__excerpt {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
[data-theme="dark"] .of-blog-card__excerpt { color: #94a3b8; }

.of-blog-card__meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}
.of-blog-card__meta-sep { color: #cbd5e1; }
[data-theme="dark"] .of-blog-card__meta { border-top-color: #334155; color: #64748b; }

/* Pagination */
.of-blog-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}
.of-blog-pagination ul.page-numbers {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}
.of-blog-pagination .page-numbers {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #475569;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.of-blog-pagination .page-numbers:hover {
    border-color: #14b8a6;
    color: #14b8a6;
}
.of-blog-pagination .page-numbers.current {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-color: transparent;
}
[data-theme="dark"] .of-blog-pagination .page-numbers {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* Empty State */
.of-blog-empty {
    text-align: center;
    padding: 3rem 0;
}

/* ==========================================================================
   Single Blog Post
   ========================================================================== */
.of-single-post__hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    padding: 5rem 2rem 3rem;
    color: #fff;
    overflow: hidden;
}
.of-single-post__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.of-single-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.of-single-post__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.95) 100%);
}
.of-single-post__hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.of-single-post__back {
    display: inline-block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    transition: color 0.2s ease;
}
.of-single-post__back:hover { color: #14b8a6; }

.of-single-post__category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.15);
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.of-single-post__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.of-single-post__meta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    font-size: 0.85rem;
    color: #94a3b8;
}
.of-single-post__meta-sep { color: #475569; }

/* Artikel-Inhalt (the_content output) */
.of-single-post__content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #1e293b;
}
[data-theme="dark"] .of-single-post__content { color: #cbd5e1; }
.of-single-post__content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    color: #0f172a;
}
[data-theme="dark"] .of-single-post__content h2 { color: #f1f5f9; }
.of-single-post__content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: #1e293b;
}
[data-theme="dark"] .of-single-post__content h3 { color: #e2e8f0; }
.of-single-post__content p { margin: 0 0 1.25rem; }
.of-single-post__content a { color: #14b8a6; text-decoration: underline; text-underline-offset: 3px; }
.of-single-post__content a:hover { color: #0d9488; }
.of-single-post__content ul, .of-single-post__content ol {
    margin: 0 0 1.5rem 1.5rem;
}
.of-single-post__content li { margin-bottom: 0.5rem; }
.of-single-post__content blockquote {
    border-left: 4px solid #14b8a6;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: rgba(20, 184, 166, 0.05);
    font-style: italic;
}
.of-single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}
.of-single-post__content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
[data-theme="dark"] .of-single-post__content code { background: #0f172a; }

@media (max-width: 768px) {
    .of-single-post__title { font-size: 1.75rem; }
    .of-single-post__hero { padding: 4rem 1.5rem 2.5rem; }
}

/* ==========================================================================
   Coming Soon (Glossar)
   ========================================================================== */
.of-coming-soon {
    padding: 3rem 0;
}
.of-coming-soon__icon {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .of-page-content { padding: 0 1rem; }
    .of-feature-section { padding: 2.5rem 0; }
    .of-feature-section--alt { padding: 2.5rem 1rem; }
    .of-feature-section__title { font-size: 1.5rem; }
    .of-hero-new--compact { padding: 4rem 1.5rem 2rem; }
    .of-hero-new--compact .of-hero-new__title { font-size: 1.75rem; }
}

/* ==========================================================================
   Über uns Hub (page-ueber-uns.php)
   ========================================================================== */
.of-uns-hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: 1200px;
    margin: 0 auto;
}

.of-uns-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .of-uns-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}
.of-uns-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.35);
}
[data-theme="dark"] .of-uns-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: rgba(20, 184, 166, 0.45);
}

.of-uns-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}
.of-uns-card__icon--teal {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}
.of-uns-card__icon--violet {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.of-uns-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.65rem;
    line-height: 1.3;
}
[data-theme="dark"] .of-uns-card__title { color: #f1f5f9; }

.of-uns-card__desc {
    font-size: 0.93rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 1.25rem;
    flex: 1;
}
[data-theme="dark"] .of-uns-card__desc { color: #94a3b8; }

.of-uns-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #14b8a6;
    transition: gap 0.15s ease;
}
.of-uns-card:hover .of-uns-card__more { gap: 0.6rem; }

@media (max-width: 1024px) {
    .of-uns-hub { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mission Page (page-mission.php)
   ========================================================================== */
.of-mission-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}
.of-mission-value {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    text-align: left;
}
[data-theme="dark"] .of-mission-value {
    background: #1e293b;
    border-color: #334155;
}
.of-mission-value__icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.of-mission-value__icon--teal {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
}
.of-mission-value__icon--violet {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}
.of-mission-value h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.65rem;
}
[data-theme="dark"] .of-mission-value h3 { color: #f1f5f9; }
.of-mission-value p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}
[data-theme="dark"] .of-mission-value p { color: #94a3b8; }

.of-mission-notlist {
    margin-top: 1rem;
}
.of-mission-not {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #ef4444;
    border-radius: 0.5rem;
}
[data-theme="dark"] .of-mission-not {
    background: #0f172a;
    border-color: #334155;
    border-left-color: #ef4444;
}
.of-mission-not__x {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.of-mission-not div {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
}
[data-theme="dark"] .of-mission-not div { color: #cbd5e1; }
.of-mission-not strong {
    color: #1e293b;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}
[data-theme="dark"] .of-mission-not strong { color: #f1f5f9; }

@media (max-width: 1024px) {
    .of-mission-values { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Team Page (page-team.php)
   ========================================================================== */
.of-team-bg {
    margin-top: 1rem;
}
.of-team-bg__item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
}
[data-theme="dark"] .of-team-bg__item {
    background: #1e293b;
    border-color: #334155;
}
.of-team-bg__icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.of-team-bg__item strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.35rem;
}
[data-theme="dark"] .of-team-bg__item strong { color: #f1f5f9; }
.of-team-bg__item p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}
[data-theme="dark"] .of-team-bg__item p { color: #94a3b8; }

.of-team-quote {
    position: relative;
    margin-top: 2rem;
    padding: 1.75rem 2rem 1.75rem 4.5rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.07), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 0.85rem;
}
[data-theme="dark"] .of-team-quote {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(20, 184, 166, 0.35);
}
.of-team-quote__mark {
    position: absolute;
    left: 1.25rem;
    top: 0.5rem;
    font-size: 4rem;
    font-weight: 700;
    color: rgba(20, 184, 166, 0.4);
    line-height: 1;
    font-family: Georgia, serif;
}
.of-team-quote p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #334155;
    margin: 0;
    font-style: italic;
}
[data-theme="dark"] .of-team-quote p { color: #cbd5e1; }

/* ==========================================================================
   FAQ Page (page-faq.php)
   ========================================================================== */
.of-faq-wrapper {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 0 1rem;
}

.of-faq-group {
    margin-bottom: 2.5rem;
}
.of-faq-group__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid #14b8a6;
    display: inline-block;
}
[data-theme="dark"] .of-faq-group__title { color: #f1f5f9; }

.of-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
[data-theme="dark"] .of-faq-item {
    background: #1e293b;
    border-color: #334155;
}
.of-faq-item[open] {
    border-color: rgba(20, 184, 166, 0.35);
}

.of-faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}
[data-theme="dark"] .of-faq-item__question { color: #f1f5f9; }
.of-faq-item__question::-webkit-details-marker { display: none; }
.of-faq-item__question:hover { background: rgba(20, 184, 166, 0.04); }
[data-theme="dark"] .of-faq-item__question:hover { background: rgba(20, 184, 166, 0.08); }

.of-faq-item__chevron {
    color: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.of-faq-item[open] .of-faq-item__chevron {
    transform: rotate(180deg);
    color: #14b8a6;
}

.of-faq-item__answer {
    padding: 0 1.25rem 1.1rem;
}
.of-faq-item__answer p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}
[data-theme="dark"] .of-faq-item__answer p { color: #cbd5e1; }
.of-faq-item__answer a {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 600;
}
.of-faq-item__answer a:hover { text-decoration: underline; }

.of-faq-cta {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 0.85rem;
    text-align: center;
}
[data-theme="dark"] .of-faq-cta {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(139, 92, 246, 0.08));
    border-color: rgba(20, 184, 166, 0.35);
}
.of-faq-cta h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.4rem;
}
[data-theme="dark"] .of-faq-cta h3 { color: #f1f5f9; }
.of-faq-cta p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 1.25rem;
}
[data-theme="dark"] .of-faq-cta p { color: #cbd5e1; }
.of-faq-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.of-faq-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

/* ==========================================================================
   Optionen Grundlagen (page-grundlagen.php)
   ========================================================================== */
.of-grundlagen-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.of-grundlagen-content {
    max-width: 1600px;
    margin: 0 auto;
}

/* Inhaltsverzeichnis */
.of-grundlagen-toc {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .of-grundlagen-toc {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}
.of-grundlagen-toc__label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 0.85rem;
}
.of-grundlagen-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    counter-reset: toc;
}
.of-grundlagen-toc__list li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    color: #334155;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
[data-theme="dark"] .of-grundlagen-toc__list li a { color: #cbd5e1; }
.of-grundlagen-toc__list li a:hover { color: #14b8a6; }
.of-grundlagen-toc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0.35rem;
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}
[data-theme="dark"] .of-grundlagen-toc__num {
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
}

/* Cards */
.of-grundlagen-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 100px;
}
[data-theme="dark"] .of-grundlagen-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}

.of-grundlagen-card__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}
[data-theme="dark"] .of-grundlagen-card__header { border-bottom-color: #1e293b; }

.of-grundlagen-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.of-grundlagen-card__title-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}
.of-grundlagen-card__icon {
    color: #14b8a6;
    flex-shrink: 0;
}
.of-grundlagen-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}
[data-theme="dark"] .of-grundlagen-card__title { color: #f1f5f9; }

.of-grundlagen-card__body {
    padding: 1.75rem 2rem 2rem;
}

.of-grundlagen-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1.75rem;
    max-width: 900px;
}
[data-theme="dark"] .of-grundlagen-lead { color: #cbd5e1; }

.of-grundlagen-h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin: 1.75rem 0 0.85rem;
}
[data-theme="dark"] .of-grundlagen-h3 { color: #f1f5f9; }

.of-grundlagen-card__body p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 0.85rem;
    max-width: 900px;
}
[data-theme="dark"] .of-grundlagen-card__body p { color: #cbd5e1; }
.of-grundlagen-card__body p strong { color: #1e293b; font-weight: 700; }
[data-theme="dark"] .of-grundlagen-card__body p strong { color: #f1f5f9; }

/* 2-Spalten Konzept-Boxen (Call/Put, Long/Short, OI/Volumen) */
.of-grundlagen-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0;
}
.of-grundlagen-concept {
    padding: 1.25rem 1.5rem;
    border-radius: 0.6rem;
    border: 1px solid;
}
.of-grundlagen-concept--call {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.25);
}
.of-grundlagen-concept--put {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.25);
}
.of-grundlagen-concept--neutral {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="dark"] .of-grundlagen-concept--call {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .of-grundlagen-concept--put {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="dark"] .of-grundlagen-concept--neutral {
    background: #0f172a;
    border-color: #334155;
}

.of-grundlagen-concept__badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.65rem;
}
.of-grundlagen-concept--call .of-grundlagen-concept__badge {
    background: #10b981;
    color: #fff;
}
.of-grundlagen-concept--put .of-grundlagen-concept__badge {
    background: #ef4444;
    color: #fff;
}
.of-grundlagen-concept__badge--violet {
    background: #8b5cf6;
    color: #fff;
}
.of-grundlagen-concept__badge--teal {
    background: #14b8a6;
    color: #fff;
}

.of-grundlagen-concept h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}
[data-theme="dark"] .of-grundlagen-concept h3 { color: #f1f5f9; }
.of-grundlagen-concept p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}
[data-theme="dark"] .of-grundlagen-concept p { color: #cbd5e1; }

/* Listen innerhalb von Konzepten */
.of-grundlagen-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.of-grundlagen-list li {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    padding: 0.3rem 0 0.3rem 1.1rem;
    position: relative;
}
.of-grundlagen-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}
[data-theme="dark"] .of-grundlagen-list li { color: #cbd5e1; }

/* 3- und 4-Spalten Tile-Grids */
.of-grundlagen-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.of-grundlagen-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1rem 0 0.5rem;
}
.of-grundlagen-tile {
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
}
[data-theme="dark"] .of-grundlagen-tile {
    background: #0f172a;
    border-color: #334155;
}
.of-grundlagen-tile--itm { border-left: 3px solid #10b981; }
.of-grundlagen-tile--atm { border-left: 3px solid #f59e0b; }
.of-grundlagen-tile--otm { border-left: 3px solid #6366f1; }
.of-grundlagen-tile__label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.of-grundlagen-tile p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 0.4rem;
}
.of-grundlagen-tile p:last-child { margin-bottom: 0; }
[data-theme="dark"] .of-grundlagen-tile p { color: #cbd5e1; }
.of-grundlagen-tile__hint {
    font-size: 0.78rem !important;
    color: #64748b !important;
    padding-top: 0.4rem;
    border-top: 1px dashed #e2e8f0;
}
[data-theme="dark"] .of-grundlagen-tile__hint {
    color: #94a3b8 !important;
    border-top-color: #334155;
}

/* Greek-Eintrag */
.of-grundlagen-greek {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #14b8a6;
    border-radius: 0.6rem;
}
[data-theme="dark"] .of-grundlagen-greek {
    background: #0f172a;
    border-color: #334155;
    border-left-color: #14b8a6;
}
.of-grundlagen-greek__symbol {
    font-size: 2.5rem;
    line-height: 1;
    color: #14b8a6;
    font-weight: 700;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}
.of-grundlagen-greek__body {
    flex: 1;
}
.of-grundlagen-greek__body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}
[data-theme="dark"] .of-grundlagen-greek__body h3 { color: #f1f5f9; }
.of-grundlagen-greek__body p {
    font-size: 0.88rem !important;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 0.5rem !important;
}
.of-grundlagen-greek__body p:last-child { margin-bottom: 0 !important; }
[data-theme="dark"] .of-grundlagen-greek__body p { color: #cbd5e1; }

/* Formel-Box */
.of-grundlagen-formula {
    text-align: center;
    padding: 1.25rem;
    margin: 1.25rem 0;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03));
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d9488;
    font-family: 'Cambria Math', 'Times New Roman', serif;
}
[data-theme="dark"] .of-grundlagen-formula {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.05));
    color: #5eead4;
}

/* Callouts */
.of-grundlagen-callout {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.6;
    border-left: 4px solid;
}
.of-grundlagen-callout strong { font-weight: 700; }
.of-grundlagen-callout--teal {
    background: rgba(20, 184, 166, 0.06);
    border-left-color: #14b8a6;
    color: #0f5b54;
}
.of-grundlagen-callout--info {
    background: rgba(59, 130, 246, 0.06);
    border-left-color: #3b82f6;
    color: #1e40af;
}
.of-grundlagen-callout--warning {
    background: rgba(245, 158, 11, 0.07);
    border-left-color: #f59e0b;
    color: #78350f;
}
[data-theme="dark"] .of-grundlagen-callout--teal {
    background: rgba(20, 184, 166, 0.1);
    color: #5eead4;
}
[data-theme="dark"] .of-grundlagen-callout--info {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
}
[data-theme="dark"] .of-grundlagen-callout--warning {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
}

/* Häufige Fehler — nummerierte Liste */
.of-grundlagen-mistakes {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    counter-reset: mistakes;
}
.of-grundlagen-mistakes li {
    counter-increment: mistakes;
    position: relative;
    padding: 1rem 1.25rem 1rem 3.5rem;
    margin-bottom: 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
}
[data-theme="dark"] .of-grundlagen-mistakes li {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
.of-grundlagen-mistakes li::before {
    content: counter(mistakes);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
.of-grundlagen-mistakes li strong {
    color: #1e293b;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}
[data-theme="dark"] .of-grundlagen-mistakes li strong { color: #f1f5f9; }

/* CTA am Ende */
.of-grundlagen-cta {
    margin-top: 2.5rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 1rem;
    text-align: center;
}
[data-theme="dark"] .of-grundlagen-cta {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(139, 92, 246, 0.1));
    border-color: rgba(20, 184, 166, 0.35);
}
.of-grundlagen-cta h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.5rem;
}
[data-theme="dark"] .of-grundlagen-cta h3 { color: #f1f5f9; }
.of-grundlagen-cta p {
    font-size: 1rem;
    color: #475569;
    margin: 0 0 1.5rem;
}
[data-theme="dark"] .of-grundlagen-cta p { color: #cbd5e1; }
.of-grundlagen-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.75rem;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 0.55rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.of-grundlagen-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .of-grundlagen-grid4 { grid-template-columns: repeat(2, 1fr); }
    .of-grundlagen-toc__list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .of-grundlagen-page { padding: 1.5rem 1rem 3rem; }
    .of-grundlagen-card__header { padding: 1.25rem 1.25rem; gap: 0.85rem; }
    .of-grundlagen-card__body { padding: 1.25rem 1.25rem 1.5rem; }
    .of-grundlagen-card__title { font-size: 1.15rem; }
    .of-grundlagen-card__num { width: 40px; height: 40px; font-size: 0.95rem; }
    .of-grundlagen-twocol { grid-template-columns: 1fr; }
    .of-grundlagen-grid3 { grid-template-columns: 1fr; }
    .of-grundlagen-grid4 { grid-template-columns: 1fr; }
    .of-grundlagen-greek { flex-direction: column; gap: 0.5rem; }
    .of-grundlagen-greek__symbol { width: auto; text-align: left; font-size: 2rem; }
    .of-grundlagen-cta { padding: 2rem 1.25rem; }
    .of-grundlagen-cta h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   Strategien-Glossar (page-strategien.php)
   ========================================================================== */
.of-strat-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.of-strat-section { padding: 3rem 0 1rem; }
.of-strat-section__inner { max-width: 1600px; margin: 0 auto; }

.of-strat-h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.75rem;
}
[data-theme="dark"] .of-strat-h2 { color: #f1f5f9; }

.of-strat-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    max-width: 720px;
    margin: 0 0 2rem;
}
[data-theme="dark"] .of-strat-lead { color: #94a3b8; }

/* Vergleichsmatrix */
.of-strat-matrix {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .of-strat-matrix {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}

.of-strat-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.of-strat-matrix th {
    text-align: left;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .of-strat-matrix th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}
.of-strat-matrix td {
    padding: 0.85rem 1rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
[data-theme="dark"] .of-strat-matrix td {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}
.of-strat-matrix tbody tr:last-child td { border-bottom: none; }
.of-strat-matrix tbody tr:hover td { background: #f8fafc; }
[data-theme="dark"] .of-strat-matrix tbody tr:hover td { background: #0f172a; }

.of-strat-matrix-link,
.of-strat-module-link {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 600;
}
.of-strat-matrix-link:hover,
.of-strat-module-link:hover { text-decoration: underline; }

/* Legs- und Kapitaleinsatz-Badges in der Vergleichsmatrix */
.of-strat-matrix-center { text-align: center; }

.of-strat-legs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
    font-size: 0.85rem;
}
[data-theme="dark"] .of-strat-legs { background: #0f172a; color: #cbd5e1; }

.of-strat-capital {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.of-strat-capital--spread {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.of-strat-capital--full {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}
[data-theme="dark"] .of-strat-capital--spread { color: #10b981; }
[data-theme="dark"] .of-strat-capital--full { color: #ef4444; }

/* Strategie-Cards (full-width, ohne Sticky Nav) */
.of-strat-content {
    margin-top: 3rem;
}

/* Toolbar mit TP/SL Toggle (violett wie Startseite) */
.of-strat-toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(139, 92, 246, 0.30);
    border-radius: 0.6rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08);
}
[data-theme="dark"] .of-strat-toolbar {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.06));
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: none;
}

/* Param-Badges (TP/SL) */
.of-strat-toolbar__params {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.of-strat-param {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.of-strat-param--tp {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.of-strat-param--sl {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .of-strat-param--tp { color: #10b981; }
[data-theme="dark"] .of-strat-param--sl { color: #ef4444; }

/* Auto-Order-Hinweis */
.of-strat-toolbar__auto {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
}
[data-theme="dark"] .of-strat-toolbar__auto { color: #cbd5e1; }
.of-strat-toolbar__auto svg {
    color: #8b5cf6;
    flex-shrink: 0;
}
.of-strat-toolbar__auto strong {
    color: #7c3aed;
    font-weight: 700;
}
[data-theme="dark"] .of-strat-toolbar__auto strong { color: #c4b5fd; }

@media (max-width: 1100px) {
    .of-strat-toolbar__auto { margin-left: 0; flex-basis: 100%; }
}

/* Custom Switch */
.of-strat-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}
.of-strat-switch input { position: absolute; opacity: 0; pointer-events: none; }
.of-strat-switch__track {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
[data-theme="dark"] .of-strat-switch__track { background: #475569; }
.of-strat-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.of-strat-switch input:checked + .of-strat-switch__track {
    background: #8b5cf6;
}
.of-strat-switch input:checked + .of-strat-switch__track::after {
    transform: translateX(16px);
}
.of-strat-switch__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}
[data-theme="dark"] .of-strat-switch__label { color: #cbd5e1; }

/* TP/SL-Linien: default hidden, sichtbar wenn Container .show-tpsl hat */
.of-payoff-tp,
.of-payoff-sl { display: none; }
.of-strat-content.show-tpsl .of-payoff-tp,
.of-strat-content.show-tpsl .of-payoff-sl { display: inline; }

.of-strat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 100px;
}
[data-theme="dark"] .of-strat-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}

.of-strat-card__header {
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
[data-theme="dark"] .of-strat-card__header { border-bottom-color: #1e293b; }

.of-strat-card__title-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.of-strat-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.of-strat-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
[data-theme="dark"] .of-strat-card__title { color: #f1f5f9; }

.of-strat-pro-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #b8860b;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), rgba(184, 134, 11, 0.1));
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 0.25rem;
    padding: 0.15rem 0.45rem;
    vertical-align: middle;
    line-height: 1;
}
[data-theme="dark"] .of-strat-pro-badge {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.35);
}

.of-strat-card__subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}
[data-theme="dark"] .of-strat-card__subtitle { color: #94a3b8; }

.of-strat-card__body {
    padding: 1.5rem 2rem 2rem;
}

.of-strat-card__idea {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1.75rem;
}
[data-theme="dark"] .of-strat-card__idea { color: #cbd5e1; }

/* 3-Spalten-Hauptreihe: Payoff | Wann einsetzen | Wann meiden */
.of-strat-card__main {
    display: grid;
    grid-template-columns: 380px 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.of-strat-payoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 0.6rem;
}
[data-theme="dark"] .of-strat-payoff { background: #0f172a; }

.of-strat-payoff__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.of-payoff-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}
[data-theme="dark"] .of-payoff-svg {
    background: #1e293b;
    border-color: #334155;
}
.of-strat-payoff__axis {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.4rem;
}

/* KPIs als 3-Spalten-Reihe darunter */
.of-strat-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.of-strat-kpi {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}
[data-theme="dark"] .of-strat-kpi {
    background: #0f172a;
    border-color: #334155;
}
.of-strat-kpi__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.of-strat-kpi__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
[data-theme="dark"] .of-strat-kpi__value { color: #f1f5f9; }
.of-strat-kpi__value--positive { color: #059669; }
.of-strat-kpi__value--negative { color: #dc2626; }
[data-theme="dark"] .of-strat-kpi__value--positive { color: #10b981; }
[data-theme="dark"] .of-strat-kpi__value--negative { color: #ef4444; }

/* Wann einsetzen / Wann meiden */
.of-strat-when {
    border-radius: 0.6rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid;
    display: flex;
    flex-direction: column;
}
.of-strat-when--use {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}
.of-strat-when--avoid {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.2);
}
[data-theme="dark"] .of-strat-when--use {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .of-strat-when--avoid {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.25);
}

.of-strat-when__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.65rem;
}
.of-strat-when--use .of-strat-when__title { color: #059669; }
.of-strat-when--avoid .of-strat-when__title { color: #dc2626; }
[data-theme="dark"] .of-strat-when--use .of-strat-when__title { color: #10b981; }
[data-theme="dark"] .of-strat-when--avoid .of-strat-when__title { color: #ef4444; }

.of-strat-when ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.of-strat-when li {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    padding: 0.3rem 0 0.3rem 1.1rem;
    position: relative;
}
.of-strat-when li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}
[data-theme="dark"] .of-strat-when li { color: #cbd5e1; }

/* Plattform-Hinweis */
.of-strat-card__platform {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 0.55rem;
    font-size: 0.88rem;
    color: #475569;
}
[data-theme="dark"] .of-strat-card__platform {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.25);
    color: #cbd5e1;
}
.of-strat-card__platform-icon {
    color: #14b8a6;
    flex-shrink: 0;
}
.of-strat-card__platform a {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 700;
}
.of-strat-card__platform a:hover { text-decoration: underline; }
.of-strat-card__platform-label {
    color: #1e293b;
    margin-right: 0.4rem;
}
[data-theme="dark"] .of-strat-card__platform-label { color: #f1f5f9; }
.of-strat-card__platform strong { font-weight: 700; }

/* Disclaimer */
.of-strat-disclaimer {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #64748b;
}
[data-theme="dark"] .of-strat-disclaimer {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
.of-strat-disclaimer strong { color: #475569; }
[data-theme="dark"] .of-strat-disclaimer strong { color: #cbd5e1; }

/* Responsive */
@media (max-width: 1280px) {
    .of-strat-card__main {
        grid-template-columns: 340px 1fr 1fr;
        gap: 1.25rem;
    }
}
@media (max-width: 1024px) {
    .of-strat-card__main {
        grid-template-columns: 1fr;
    }
    .of-strat-payoff { padding: 1.5rem; }
}
@media (max-width: 768px) {
    .of-strat-page { padding: 0 1rem 3rem; }
    .of-strat-h2 { font-size: 1.4rem; }
    .of-strat-matrix { overflow-x: auto; }
    .of-strat-matrix table { min-width: 720px; }
    .of-strat-card__header { padding: 1.25rem 1.25rem 1rem; }
    .of-strat-card__body { padding: 1.25rem 1.25rem 1.5rem; }
    .of-strat-card__title { font-size: 1.2rem; }
    .of-strat-kpis { grid-template-columns: 1fr; }
}

/* =========================================================================
   LOGIN / LOST PASSWORD / RESET PASSWORD — Standardbreite, zentriert
   ========================================================================= */
/* Login/Lost-Password/Reset: 600px breit, zentriert, Abstand zum Header.
   PMPro-Card waechst nur so breit wie der Content (Inputs haben feste size),
   darum width + max-width erzwingen und Inputs auf 100% setzen. */
.of-pmpro-page .pmpro_login_wrap,
.of-pmpro-page .pmpro_lost_password_wrap,
.of-pmpro-page .pmpro_reset_password_wrap,
.pmpro .pmpro_login_wrap,
.pmpro .pmpro_lost_password_wrap,
.pmpro .pmpro_reset_password_wrap,
div.pmpro_login_wrap,
div.pmpro_lost_password_wrap,
div.pmpro_reset_password_wrap {
    width: 600px !important;
    max-width: 100% !important;
    margin: 5rem auto 3rem !important;
    padding: 0 !important;
}

/* Inputs und Buttons in Login/Reset-Formularen volle Breite */
div.pmpro_login_wrap input[type="text"],
div.pmpro_login_wrap input[type="email"],
div.pmpro_login_wrap input[type="password"],
div.pmpro_lost_password_wrap input[type="text"],
div.pmpro_lost_password_wrap input[type="email"],
div.pmpro_reset_password_wrap input[type="text"],
div.pmpro_reset_password_wrap input[type="password"],
.pmpro .pmpro_login_wrap input[type="text"],
.pmpro .pmpro_login_wrap input[type="password"],
.pmpro .pmpro_lost_password_wrap input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* =========================================================================
   PMPro BUTTONS & LINKS — OptionFinder Farbschema (global, alle PMPro-Seiten)
   Teal (#14b8a6) als Primaer, Teal Dark (#0d9488) als Hover.
   ========================================================================= */

/* --- Buttons (Submit, CTA) — PMPro + WP Login Form --- */
.of-pmpro-page .pmpro_btn,
.of-pmpro-page .pmpro_btn-submit,
.of-pmpro-page .pmpro_btn-submit-checkout,
.of-pmpro-page input[type="submit"].pmpro_btn,
.of-pmpro-page #wp-submit,
.of-pmpro-page input[type="submit"].button-primary {
    background: #14b8a6 !important;
    color: #fff !important;
    border: none !important;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none !important;
    display: inline-block;
    width: auto;
}
.of-pmpro-page .pmpro_btn:hover,
.of-pmpro-page .pmpro_btn-submit:hover,
.of-pmpro-page .pmpro_btn-submit-checkout:hover,
.of-pmpro-page input[type="submit"].pmpro_btn:hover,
.of-pmpro-page #wp-submit:hover,
.of-pmpro-page input[type="submit"].button-primary:hover {
    background: #0d9488 !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* --- Links in PMPro-Cards (Einloggen, Passwort vergessen etc.) --- */
.of-pmpro-page .pmpro_card_actions a,
.of-pmpro-page .pmpro_form a,
.of-pmpro-page .pmpro_login_wrap a,
.of-pmpro-page .pmpro_lost_password_wrap a,
.of-pmpro-page .pmpro_reset_password_wrap a {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.of-pmpro-page .pmpro_card_actions a:hover,
.of-pmpro-page .pmpro_form a:hover,
.of-pmpro-page .pmpro_login_wrap a:hover,
.of-pmpro-page .pmpro_lost_password_wrap a:hover,
.of-pmpro-page .pmpro_reset_password_wrap a:hover {
    color: #0d9488;
    text-decoration: none;
}

/* --- Plain-Buttons (z.B. "Passwort anzeigen"-Toggle falls noch vorhanden) --- */
.of-pmpro-page .pmpro_btn-plain {
    background: none;
    border: none;
    color: #14b8a6;
    padding: 0;
    font-weight: 500;
    cursor: pointer;
}
.of-pmpro-page .pmpro_btn-plain:hover {
    color: #0d9488;
    text-decoration: none;
}

/* --- "Passwort anzeigen" Toggle ausblenden ---
   Kommt aus WP Core (wp_login_form) und PMPro. Die Passwort-Felder
   haben bereits native Browser-Augen-Icons. Doppelter Toggle unnoetig. */
.of-pmpro-page .wp-pwd .wp-hide-pw,
.of-pmpro-page .pmpro_form_field-password-toggle,
.of-pmpro-page .pmpro_btn-password-toggle {
    display: none !important;
}

/* =========================================================================
   DARK MODE: PMPro-Seiten (Invoice, Confirmation, Account, Login etc.)
   =========================================================================
   KERNLOESUNG: PMPro nutzt CSS Custom Properties (--pmpro--color--base etc.)
   fuer ALLE Hintergruende, Texte und Borders. Statt jeden Selektor einzeln
   zu ueberschreiben, setzen wir die Variablen auf Dark-Mode-Werte.
   Das deckt automatisch ALLE PMPro-Elemente ab. */

[data-theme="dark"] .pmpro,
[data-theme="dark"] .of-pmpro-page .pmpro {
    --pmpro--color--base: #1e293b;
    --pmpro--color--base-2: #0f172a;
    --pmpro--color--contrast: #e2e8f0;
    --pmpro--color--border: #475569;
    --pmpro--color--border--variation: #334155;
    --pmpro--color--white: #1e293b;
    --pmpro--color--accent: #14b8a6;
    --pmpro--box-shadow: none;
}

/* Texte innerhalb der Cards */
[data-theme="dark"] .pmpro .pmpro_card h1,
[data-theme="dark"] .pmpro .pmpro_card h2,
[data-theme="dark"] .pmpro .pmpro_card h3,
[data-theme="dark"] .pmpro .pmpro_card strong,
[data-theme="dark"] .pmpro .pmpro_card th {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .pmpro .pmpro_card td,
[data-theme="dark"] .pmpro .pmpro_card p,
[data-theme="dark"] .pmpro .pmpro_card span,
[data-theme="dark"] .pmpro .pmpro_card div {
    color: #cbd5e1;
}

/* Card-Actions-Bereich (Links: Einloggen, Passwort vergessen etc.) */
[data-theme="dark"] .pmpro .pmpro_card_actions {
    background: #162032 !important;
    border-top-color: #334155 !important;
}

/* Tabellen in Invoice */
[data-theme="dark"] .pmpro .pmpro_card table,
[data-theme="dark"] .pmpro .pmpro_card table td,
[data-theme="dark"] .pmpro .pmpro_card table th {
    border-color: #334155 !important;
}

/* Confirmation-Seite: Begrüßungstext über der Invoice-Card */
[data-theme="dark"] .of-pmpro-page .pmpro_message,
[data-theme="dark"] .of-pmpro-page > .pmpro > p,
[data-theme="dark"] .of-pmpro-page .pmpro p {
    color: #cbd5e1;
}

/* Gelbe E-Mail-Hervorhebung auch im Dark Mode lesbar */
[data-theme="dark"] .of-pmpro-page mark,
[data-theme="dark"] .pmpro mark {
    background: #854d0e !important;
    color: #fef08a !important;
}

/* "Bezahlt" / "Paid" Badge */
[data-theme="dark"] .pmpro .pmpro_tag {
    background: rgba(20, 184, 166, 0.15) !important;
    color: #14b8a6 !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
}

/* Invoice-Summenzeile */
[data-theme="dark"] .pmpro .pmpro_invoice_total td {
    color: #f1f5f9 !important;
    font-weight: 700;
}

/* Print-Link */
[data-theme="dark"] .pmpro .pmpro_a-print {
    color: #14b8a6 !important;
}

/* Footer-Links (Alle Bestellungen / Mitgliedskonto) */
[data-theme="dark"] .pmpro .pmpro_actions_nav a {
    color: #14b8a6 !important;
}
[data-theme="dark"] .pmpro .pmpro_actions_nav a:hover {
    color: #0d9488 !important;
}

/* Input-Felder auf Login/Reset-Seiten */
[data-theme="dark"] .of-pmpro-page .pmpro_form input[type="text"],
[data-theme="dark"] .of-pmpro-page .pmpro_form input[type="email"],
[data-theme="dark"] .of-pmpro-page .pmpro_form input[type="password"],
[data-theme="dark"] .of-pmpro-page input[type="text"],
[data-theme="dark"] .of-pmpro-page input[type="password"] {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Labels */
[data-theme="dark"] .of-pmpro-page label {
    color: #e2e8f0 !important;
}

/* Checkbox-Label (Angemeldet bleiben) */
[data-theme="dark"] .of-pmpro-page .forgetmenot label {
    color: #94a3b8 !important;
}