/* ==========================================================
   AS SURA – Base CSS
   ========================================================== */

/* 1. Grundlegende Einstellungen */

:root {
    color-scheme: light;
}

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* 2. Typografie */

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #293330;
    background-color: #fff;
}

/* 3. Medien */

img,
svg,
video {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* 4. Grundlegende Bedienbarkeit */

:focus-visible {
    outline: 2px solid #3f6f64;
    outline-offset: 3px;
}


/* ==========================================================
   5. Page Layout
   ========================================================== */

.site-container {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.site-main {
    padding-block: 2rem;
}

@media (max-width: 575.98px) {
    .site-container {
        padding-inline: 1rem;
    }

    .site-main {
        padding-block: 1.5rem;
    }
}


/* ==========================================================
   6. Documentation Layout
   ========================================================== */

.site-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.site-sidebar {
    min-width: 0;
}

.site-content {
    min-width: 0;
}

/* Tablet und Smartphone */
@media (max-width: 767.98px) {
    .site-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}



/* ==========================================================
   7. Site Header
   ========================================================== */

.site-header {
    background-color: #f5f7f6;
    border-bottom: 1px solid #dce5df;
}

.site-header .site-container {
    padding-block: 1.25rem;
}

.site-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    color: #253c35;
    text-decoration: none;
}

.site-brand-logo {
    display: block;
    width: 190px;
    height: auto;
}

.site-brand-subtitle {
    font-size: 0.75rem;
    color: #567267;
    letter-spacing: 0.025em;
}

.site-brand:hover {
    color: #3f7463;
}

.site-brand:focus-visible {
    border-radius: 2px;
}


/* ==========================================================
   8. Sticky Documentation Navigation
   ========================================================== */

@media (min-width: 768px) {
    .site-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}


/* ==========================================================
   9. Documentation Navigation Design
   ========================================================== */

.site-navigation {
    background-color: #f5f7f6;
    border: 1px solid #dce5df;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.site-navigation-item + .site-navigation-item {
    margin-top: 0.25rem;
}

.site-navigation-item a {
    display: block;
    padding: 0.65rem 0.75rem;
    color: #344d44;
    text-decoration: none;
    border-radius: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: background-color 0.15s ease,
                color 0.15s ease;
}

.site-navigation-item a:hover {
    background-color: #e4ede8;
    color: #245b49;
}

.site-navigation-item a:focus-visible {
    outline: 2px solid #3f6f64;
    outline-offset: 2px;
}


/* ==========================================================
   10. Active Navigation Item
   ========================================================== */

.site-navigation-item.is-active > a {
    background-color: #dceae3;
    color: #245b49;
    font-weight: 600;
}

.site-navigation-item.is-active > a:hover {
    background-color: #d1e3d9;
}


/* ==========================================================
   11. Documentation Subnavigation
   ========================================================== */

.site-navigation-subitem {
    margin-top: 0.5rem;
    margin-left: 0.75rem;
}

.site-navigation-subitem > a {
    font-size: 0.85rem;
    padding-block: 0.55rem;
}


/* ==========================================================
   12. Current Navigation Item
   ========================================================== */

.site-navigation-item.is-current > a {
    background-color: #3f6f64;
    color: #fff;
    font-weight: 600;
}

.site-navigation-item.is-current > a:hover {
    background-color: #345d54;
    color: #fff;
}


/* ==========================================================
   13. Fluid Typography
   ========================================================== */

.site-content h1 {
    font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    line-height: 1.2;
}

.site-content h2 {
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    line-height: 1.3;
}


/* ==========================================================
   14. Content Typography – Vertical Spacing
   ========================================================== */

/* Grundabstände für Textelemente */
.site-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote) {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Hauptüberschrift ohne oberen Abstand */
.site-content h1 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Abschnittsüberschriften */
.site-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.site-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.site-content h4,
.site-content h5,
.site-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Keine zusätzliche Lücke am Anfang des Inhalts */
.site-content > :first-child,
.site-content > :first-child > :first-child {
    margin-top: 0;
}

/* Listen */
.site-content :is(ul, ol) {
    padding-left: 1.5rem;
}

.site-content li + li {
    margin-top: 0.25rem;
}

/* Kein überflüssiger Abstand am Ende */
.site-content > :last-child {
    margin-bottom: 0;
}


/* ==========================================================
   15. Content Links
   ========================================================== */

.site-content a:not([class]) {
    color: #3f6f64;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}

.site-content a:not([class]):visited {
    color: #3f6f64;
}

.site-content a:not([class]):hover {
    color: #245b49;
    text-decoration-thickness: 2px;
}

.site-content a:not([class]):focus-visible {
    color: #245b49;
    outline: 2px solid #3f6f64;
    outline-offset: 3px;
}

.site-content a:not([class]):active {
    color: #1c493a;
}




/* ========================================
   Feature Card
======================================== */

.feature-card {
    padding: 1.5rem;
    background-color: #f5f7f6;
    border: 1px solid #dce5df;
    border-radius: 0.5rem;
}

.feature-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #253c35;
    font-size: 1.15rem;
    line-height: 1.3;
}

.feature-card p {
    margin: 0;
    color: #465a52;
}


/* ========================================
   Feature Cards – Raster
======================================== */


.feature-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .feature-card-grid.grid-md-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .feature-card-grid.grid-lg-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-card-grid.grid-lg-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

a.as-sura-demo-button {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background-color: #3f7167;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0.3125rem;
}

a.as-sura-demo-button:hover {
    background-color: #30594f;
    color: #fff;
}

a.as-sura-demo-button:focus-visible {
    outline: 3px solid #243f38;
    outline-offset: 3px;
}

.as-sura-demo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.site-footer {
    margin-top: 3rem;
    padding-block: 1.5rem;
    background-color: #f5f7f6;
    border-top: 1px solid #dce5df;
}

.site-footer-navigation ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-footer-navigation li {
    list-style-type: none;
}

.site-footer-navigation li a {
    color: #567267;
    font-size: 0.85rem;
    text-decoration: none;
}

.site-footer-navigation li.is-active a {
    text-decoration: underline;
}

.site-footer-navigation li a:hover,
.site-footer-navigation li a:focus-visible {
    color: #245b49;
    text-decoration: underline;
}

/* ========================================
   TYPO3 Form – AS SURA
======================================== */

.site-content .form-element {
    margin-bottom: 1.25rem;
}

.site-content .form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #344d44;
}

.site-content .form-control {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: #293330;
    background-color: #fff;
    border: 1px solid #cbd8d2;
    border-radius: 0.35rem;
    transition: border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.site-content .form-control:focus {
    outline: none;
    border-color: #3f6f64;
    box-shadow: 0 0 0 3px rgb(63 111 100 / 15%);
}

.site-content textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.site-content .form-navigation {
    margin-top: 1.5rem;
}

.site-content .btn.btn-primary {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background-color: #3f7167;
    border: 1px solid #3f7167;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.site-content .btn.btn-primary:hover {
    background-color: #30594f;
}

.site-content .btn.btn-primary:focus-visible {
    outline: 3px solid #243f38;
    outline-offset: 3px;
}

/* ========================================
   TYPO3 Form – Responsive Grid
======================================== */

.site-content .form-element-gridrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.site-content .form-element-gridrow > * {
    min-width: 0;
}

@media (min-width: 992px) {
    .site-content .form-element-gridrow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================
   TYPO3 Form – Zusammenfassung
======================================== */

.site-content form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.site-content form fieldset legend {
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #293330;
}

.site-content .summary-list dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1rem;
}

.site-content .summary-list dt {
    font-weight: 600;
    color: #344d44;
}

.site-content .summary-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.site-content .actions .form-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Zurück-Button */

.site-content .form-navigation .btn:not(.btn-primary) {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #3f7167;
    background: transparent;
    border: 1px solid #3f7167;
    border-radius: 0.35rem;
    cursor: pointer;
}

.site-content .form-navigation .btn:not(.btn-primary):hover {
    color: #fff;
    background: #3f7167;
}

.site-content .form-navigation .btn:not(.btn-primary):focus-visible {
    outline: 3px solid #243f38;
    outline-offset: 3px;
}

@media (max-width: 575px) {
    .site-content .summary-list dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }
}