/* ===== Corporate Design Preckel Automobile GmbH (CD-Manual 06/2024) =====
   Primärfarbe:   Schwarz  #000000
   Sekundärfarbe: Grau     #646363
   Akzentfarbe:   Orange   #FAB200
   Hausschrift:   Assistant (lokal eingebunden – kein Abruf externer Server)
========================================================================= */

/* Lokale Einbindung der Hausschrift (Variable Font, Latin) */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/assistant-variable-latin.woff2') format('woff2');
}

:root {
    --preckel-schwarz: #000000;
    --preckel-grau: #646363;
    --preckel-orange: #FAB200;
    --preckel-hellgrau: #f5f4f2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Assistant', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    color: var(--preckel-grau);
    background: #ffffff;
    line-height: 1.7;
    font-size: 1.125rem;
}

/* Orange Akzentbalken – wiederkehrendes Element aus dem CD-Manual */
.akzentbalken {
    height: 6px;
    background: var(--preckel-orange);
}

/* ===== Hero (Startseite) ===== */
.hero {
    background: var(--preckel-schwarz);
    color: #ffffff;
    text-align: center;
    padding: clamp(4rem, 10vw, 8rem) 1.5rem clamp(4rem, 9vw, 7rem);
}

.hero__logo {
    width: min(420px, 78vw);
    height: auto;
    display: block;
    margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

.hero__linie {
    width: 90px;
    height: 3px;
    background: var(--preckel-orange);
    margin: 0 auto 2.25rem;
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: 0.01em;
    color: #ffffff;
    margin-bottom: 1rem;
}

.hero__untertitel {
    font-weight: 300;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 44ch;
    margin: 0 auto;
}

.hero__untertitel strong {
    color: var(--preckel-orange);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Kopfbereich Unterseiten (Impressum / Datenschutz) ===== */
.seitenkopf {
    background: var(--preckel-schwarz);
    color: #ffffff;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.seitenkopf__logo {
    width: min(220px, 55vw);
    height: auto;
    display: block;
    margin: 0 auto 1.75rem;
}

.seitenkopf h1 {
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #ffffff;
}

.seitenkopf__linie {
    width: 70px;
    height: 3px;
    background: var(--preckel-orange);
    margin: 1.25rem auto 0;
}

/* ===== Inhalt ===== */
.inhalt {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}

.inhalt h2 {
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--preckel-schwarz);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--preckel-orange);
    display: inline-block;
    margin-bottom: 1.75rem;
}

.inhalt p + p {
    margin-top: 1.25rem;
}

/* ===== Unterseiten-Inhalt (Rechtstexte) ===== */
.rechtstext {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(3.5rem, 8vw, 5.5rem);
}

.rechtstext h2 {
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    color: var(--preckel-schwarz);
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--preckel-orange);
    display: inline-block;
    margin: 2.5rem 0 1.25rem;
}

.rechtstext h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--preckel-schwarz);
    margin: 1.75rem 0 0.6rem;
}

.rechtstext p + p {
    margin-top: 1rem;
}

.rechtstext ul {
    margin: 0.75rem 0 1rem 1.4rem;
}

.rechtstext li + li {
    margin-top: 0.35rem;
}

.rechtstext address {
    font-style: normal;
    line-height: 1.7;
}

.rechtstext a {
    color: var(--preckel-schwarz);
    font-weight: 600;
    text-decoration-color: var(--preckel-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.rechtstext a:hover {
    color: var(--preckel-orange);
}

.rechtstext .stand {
    margin-top: 2.5rem;
    font-size: 0.95rem;
    color: var(--preckel-grau);
    font-weight: 300;
}

.zurueck {
    display: inline-block;
    margin-top: 2.5rem;
    font-weight: 600;
    color: var(--preckel-schwarz);
    text-decoration: none;
    border-bottom: 2px solid var(--preckel-orange);
    padding-bottom: 2px;
}

.zurueck:hover {
    color: var(--preckel-orange);
}

/* ===== Hinweis Leasing ===== */
.leasing {
    background: var(--preckel-hellgrau);
}

.leasing .inhalt {
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.leasing__karte {
    border-left: 6px solid var(--preckel-orange);
    padding-left: clamp(1.25rem, 3vw, 2rem);
}

/* ===== Abschied / Dank ===== */
.dank {
    text-align: center;
}

.dank .inhalt {
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.dank p {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 300;
}

.dank .signatur {
    margin-top: 2rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--preckel-schwarz);
}

/* ===== Footer ===== */
footer {
    background: var(--preckel-schwarz);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    font-size: 0.95rem;
    font-weight: 300;
}

footer .footer__logo {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
    opacity: 0.9;
}

footer p + p {
    margin-top: 0.35rem;
}

footer nav {
    margin-top: 1.75rem;
}

footer nav a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--preckel-orange);
    padding-bottom: 2px;
    margin: 0 0.9rem;
    white-space: nowrap;
}

footer nav a:hover {
    color: var(--preckel-orange);
}