/* ===========================================
   Frontend2 Base CSS
   Minimal, Bootstrap-first design system
   =========================================== */

/* CSS Variables */
:root {
    --section-padding-y: 3rem;
    --section-padding-y-lg: 5rem;
    --container-max-width: 1280px;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Images responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* ===========================================
   Section Base
   =========================================== */
.section {
    padding-block: var(--section-padding-y);
}

@media (min-width: 992px) {
    .section {
        padding-block: var(--section-padding-y-lg);
    }
}

/* Section Modifiers */
.section--no-padding {
    padding-block: 0;
}

.section--py-sm {
    padding-block: 2rem;
}

.section--bg-light {
    background-color: var(--bs-light);
}

.section--bg-dark {
    background-color: var(--bs-dark);
    color: #fff;
}

.section--bg-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ===========================================
   Typography
   =========================================== */
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.section-lead {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    max-width: 65ch;
}

/* ===========================================
   Section Description (einheitlich)
   Für alle Description-Texte in Sections
   =========================================== */
.section-description {
    font-size: 1.25rem;  /* Bootstrap lead size */
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.section-description:last-child {
    margin-bottom: 0;
}

/* Content-Bereich (Markdown-Inhalt) */
.section-content {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    line-height: 1.7;
}

.section-content > *:last-child {
    margin-bottom: 0;
}

.section-content p {
    margin-bottom: 1rem;
}

.section-content ul,
.section-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.section-content li {
    margin-bottom: 0.5rem;
}

/* Responsive Headings in Content */
.section-content h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-content h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 0.875rem;
    line-height: 1.25;
}

.section-content h3 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.section-content h4 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.section-content h5,
.section-content h6 {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* ===========================================
   Utilities
   =========================================== */
.text-balance {
    text-wrap: balance;
}

.max-w-prose {
    max-width: 65ch;
}

.max-w-lg {
    max-width: 800px;
}