/* =====================================================================
   Wartenberg Flex GmbH — Übergangsseite
   Farben, Schrift und Formen der späteren Website (design-system.md).
   Reines CSS, keine Abhängigkeiten, nichts wird nachgeladen.
   ===================================================================== */

/* DM Sans — selbst gehostet. Bewusst NICHT über Google Fonts:
   Ein Aufruf dorthin überträgt die IP der Besucher an einen Dritten
   und wäre auf einer Seite ohne Datenschutzerklärung das falsche
   Signal. */
@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #14304d;          /* Dachmarke, Hanseatisch Dunkelblau */
    --navy-dark: #0c1f33;
    --navy-text: #0f2338;
    --red: #b03329;           /* Logo-Rot — nur Akzent, nie Fläche */
    --teal: #0e9aa7;          /* FlexMed */
    --orange: #e8842c;        /* FlexWerk */

    --wash: #f4f6f8;
    --line: #dde3e9;
    --muted: #5b6b7c;

    --radius: 1rem;
    --wrap: 68rem;
}

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

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

body {
    margin: 0;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--navy-text);
    background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Kopf ---------------------------------------------------------- */

.topbar {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.topbar-logo { width: 260px; max-width: 60vw; }

.topbar-claim {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 40rem) {
    .topbar-claim { display: none; }
}

/* --- Hero ---------------------------------------------------------- */

.hero {
    position: relative;
    color: #fff;
    /* Verlauf statt Foto (bewusst): Das Hero-Motiv der späteren
       Website trägt einen orangen Kreis, der je nach Bildschirmbreite
       genau hinter der Überschrift landet und dort wie ein Fleck
       aussieht. Ein Verlauf in denselben Markenfarben hält den
       Charakter, sitzt auf JEDER Breite richtig und spart das Asset.
       Die beiden weichen Lichter geben Tiefe, ohne Kanten. */
    background-color: var(--navy);
    background-image:
        radial-gradient(80rem 45rem at 92% 18%, rgba(14, 154, 167, 0.42), transparent 62%),
        radial-gradient(55rem 40rem at 8% 88%, rgba(20, 48, 77, 0.85), transparent 60%),
        linear-gradient(135deg, #0c1f33 0%, #14304d 45%, #146070 100%);
    isolation: isolate;
}

/* Dunkler Schleier: Das Motiv ist hell genug, dass weißer Text ohne
   ihn an den Rändern absäuft. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 31, 51, 0.15), rgba(12, 31, 51, 0.45));
    z-index: -1;
}

.hero-inner {
    padding-top: clamp(3.5rem, 9vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 9vw, 6.5rem);
    max-width: 46rem;
}

.eyebrow {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.lead {
    margin: 0 0 2rem;
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-note {
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.72);
}

/* --- Schaltflächen ------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Rot ist die Farbe des Logos und bleibt dem wichtigsten Weg
   vorbehalten — hier dem Anruf. */
.btn-primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: #8f281f;
    border-color: #8f281f;
}

.btn-ghost {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

/* --- Bereiche ------------------------------------------------------ */

.section-title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--navy);
}

.brands { padding: clamp(3rem, 7vw, 4.5rem) 0; }

.brand-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .brand-grid { grid-template-columns: 1fr 1fr; }
}

.brand-card {
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    /* Der farbige Streifen ordnet die Karte ihrem Bereich zu, ohne
       dass die Fläche die Markenfarbe tragen muss. */
    border-top: 4px solid var(--line);
}

.brand-card img {
    width: 220px;
    max-width: 70%;
    margin-bottom: 1.25rem;
}

.brand-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
}

.brand-card p {
    margin: 0;
    color: var(--muted);
}

.brand-med { border-top-color: var(--teal); }
.brand-werk { border-top-color: var(--orange); }

/* --- Kontakt ------------------------------------------------------- */

.contact {
    padding: clamp(3rem, 7vw, 4.5rem) 0;
    background: var(--wash);
    border-top: 1px solid var(--line);
}

.contact-inner {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .contact-inner { grid-template-columns: 1.2fr 1fr; }
}

.nap {
    margin: 0 0 1.5rem;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.7;
}

.nap strong { font-size: 1.1875rem; }

.contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.contact-list svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.contact-list a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(20, 48, 77, 0.25);
}

.contact-list a:hover { border-bottom-color: var(--navy); }

.hours-list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1.25rem;
}

.hours-list dt { font-weight: 600; }
.hours-list dd { margin: 0; color: var(--muted); }

.hours-note {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* --- Fuß ----------------------------------------------------------- */

.footer {
    padding: 2rem 0;
    background: var(--navy-dark);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    justify-content: space-between;
    align-items: flex-start;
}

.footer p { margin: 0; }

.footer-soon { color: rgba(255, 255, 255, 0.55); }

/* Links im Fuss erben die helle Schrift. Auf der Regelebene, nicht je
   Block: Der Vorgabewert `a { color: var(--navy) }` ist navy und der
   Fuss navy-dark -- ein Link, der die Regel verpasst, ist unsichtbar
   statt nur unschoen. */
.footer a { color: inherit; }

/* Impressum im Fuß: bewusst schmal gehalten — eine Übergangsseite
   braucht die Pflichtangaben, keinen zweiten Textblock. */

.footer-legal { max-width: 34rem; }

.footer-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}

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

.footer-address a {
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
}

.footer-address a:hover { border-bottom-color: #fff; }

.footer-note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Bedienung mit der Tastatur ------------------------------------ */

a:focus-visible,
.btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.contact-list a:focus-visible {
    outline-color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}