/* ===== ÜBER-UNS-SECTION (Home) =====
 * Zwei-spaltiges Layout: Bild links, Text rechts.
 * Nutzt ausschließlich Home-Variablen aus landing-new.css.
 */

.about-section {
    padding: 100px 48px;
    background: var(--white);
}

.about-grid {
    max-width: 1560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: center;
}

.about-image {
    overflow: hidden;
    border-radius: 0;
}
.about-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* about-text trägt den Inhalt aus cms.sections.home-about.
 * .section-label und .section-title bleiben aus landing-new.css unangetastet —
 * NUR die echten Body-Paragraphen (ohne Klasse) bekommen das Body-Styling.
 * Werte 1:1 von der alten .about-content p-Regel (sans 14px / 300 / 1.85 / #555). */
.about-text > p:not([class]) {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.85;
    color: #555;
    margin: 0 0 20px;
}
.about-text > p:not([class]):last-child {
    margin-bottom: 0;
}
/* Section-Label / Title: gleicher Spacing-Wert wie auf der alten about-Section */
.about-text .section-label { margin-bottom: 16px; }
.about-text .section-title { margin-bottom: 32px; font-size: clamp(32px, 4vw, 52px); }

/* Tablet — schmalere Spalten, gleiche Anordnung */
@media (max-width: 980px) {
    .about-section { padding: 80px 32px; }
    .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}

/* Mobile — Bild oben, Text unten */
@media (max-width: 720px) {
    .about-section { padding: 56px 18px; }
    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-image img { aspect-ratio: 4 / 3; }
}