/* ==================================================================================================
   MVGEOLEX — der Auftritt der Firma (28.08.2026)
   ==================================================================================================
   Ein Stil für drei Seiten: Startseite, Impressum, Datenschutz. Er liegt hier und nicht in einem
   <style>-Block je Seite, weil sonst jede Änderung dreimal gemacht werden müsste — und beim dritten
   Mal vergessen wird.

   DIE HALTUNG DES ENTWURFS. Der Wirt wollte es „серьёзно, как у крупных фирм". Das heisst nicht
   mehr Schmuck, sondern weniger: eine einzige Akzentfarbe, viel Weissraum, harte Typohierarchie,
   keine Schlagschatten-Orgien, keine Symbolbilder von lachenden Menschen am Laptop. Dunkler Kopf
   für das Gewicht, heller Körper für die Lesbarkeit, dunkler Fuss als Klammer.

   NICHTS VON AUSSEN. Keine Schrift von Google, kein Zeichensatz von einem CDN, kein Skript.
   Der Grund steht ausführlich in der Datenschutzerklärung: eine eingebundene Schrift überträgt die
   IP-Adresse jedes Besuchers an einen Fremden, und genau dafür hat das LG München 2022 bei Google
   Fonts Schadenersatz zugesprochen. Die Systemschrift sieht auf jedem Gerät zu Hause aus — GitHub
   und Stripe fahren dieselbe Linie.
   ================================================================================================== */

:root {
    --tinte:        #0b1220;   /* fast schwarz, mit einem Stich ins Blaue */
    --tinte-2:      #111a2e;
    --text:         #1e293b;
    --text-leise:   #64748b;
    --linie:        #e4e8ef;
    --grund:        #ffffff;
    --grund-2:      #f7f9fc;
    --akzent:       #2563eb;
    --akzent-hell:  #60a5fa;
    --gruen:        #059669;
    --bernstein:    #b45309;
    --breite:       1120px;
}

* { box-sizing: border-box; }

/* scroll-padding-top: die Kopfleiste klebt oben. Ohne diese Zeile springt „#leistungen" so weit,
   dass die Ueberschrift genau hinter der Leiste liegt — man landet mitten im Text. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

.bahn { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 28px; }

/* --- Kopfleiste ------------------------------------------------------------------------------- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 18, 32, .88);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.marke {
    display: inline-flex; align-items: center; gap: 11px;
    color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.4px;
    text-decoration: none;
}
.marke svg { width: 26px; height: 26px; color: var(--akzent-hell); }

.kopf-wege { display: flex; align-items: center; gap: 28px; }
.kopf-wege a {
    color: #cbd5e1; text-decoration: none; font-size: 15px; font-weight: 500;
}
.kopf-wege a:hover { color: #fff; }

@media (max-width: 720px) { .kopf-wege { display: none; } }

/* --- Der Kopfbereich -------------------------------------------------------------------------- */

.buehne {
    position: relative;
    background: var(--tinte);
    color: #fff;
    overflow: hidden;
    padding: 108px 0 116px;
}
/* Ein Netz aus feinen Punkten statt eines Fotos: es altert nicht und wiegt nichts. */
.buehne::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(148, 163, 184, .18) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.buehne::after {
    content: '';
    position: absolute; left: 50%; top: -260px; transform: translateX(-50%);
    width: 900px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .30) 0%, transparent 68%);
    filter: blur(20px);
}
.buehne .bahn { position: relative; z-index: 1; }

.marker {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 12px;
    border: 1px solid rgba(96, 165, 250, .35);
    border-radius: 999px;
    background: rgba(37, 99, 235, .12);
    color: #bfdbfe;
    font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
    margin-bottom: 30px;
}
.marker i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--akzent-hell); box-shadow: 0 0 0 4px rgba(96, 165, 250, .18);
}

.buehne h1 {
    margin: 0 0 22px;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -2px;
    max-width: 15ch;
}
.buehne h1 em { font-style: normal; color: var(--akzent-hell); }

.buehne .fuehrung {
    margin: 0 0 38px;
    max-width: 60ch;
    font-size: clamp(1.05rem, 2.2vw, 1.28rem);
    color: #b4c0d3;
    line-height: 1.65;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

.knopf {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    border-radius: 11px;
    font-size: 16px; font-weight: 650;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf-voll { background: var(--akzent); color: #fff; }
.knopf-voll:hover { background: #1d4ed8; }
.knopf-leer { border-color: rgba(255, 255, 255, .22); color: #e2e8f0; }
.knopf-leer:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }

/* --- Abschnitte ------------------------------------------------------------------------------- */

section { padding: 92px 0; }
section.hell { background: var(--grund-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

.uebertitel {
    margin: 0 0 12px;
    font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--akzent);
}
h2 {
    margin: 0 0 16px;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.18; font-weight: 800; letter-spacing: -1px;
    color: var(--tinte);
    max-width: 20ch;
}
.abschnitt-text { margin: 0 0 52px; max-width: 62ch; color: var(--text-leise); font-size: 1.06rem; }

/* --- Die Karten der Vorhaben ------------------------------------------------------------------ */

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; }

.karte {
    position: relative;
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: 16px;
    padding: 28px 26px 26px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.karte:hover {
    border-color: #c7d2e4;
    box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .45);
    transform: translateY(-2px);
}
.karte-zeichen {
    width: 42px; height: 42px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(37, 99, 235, .09);
    color: var(--akzent);
}
.karte-zeichen svg { width: 22px; height: 22px; }
.karte h3 { margin: 0 0 8px; font-size: 1.16rem; font-weight: 750; color: var(--tinte); letter-spacing: -.3px; }
.karte p { margin: 0; color: var(--text-leise); font-size: .98rem; line-height: 1.62; }

/* Der Stand: ehrlich benannt. „In Entwicklung" neben „In Betrieb" wirkt seriöser als ein
   Versprechen, das man nicht halten kann — und § 5 UWG verlangt es ohnehin. */
.stand {
    position: absolute; top: 22px; right: 22px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
}
.stand-betrieb    { background: rgba(5, 150, 105, .10);  color: var(--gruen); }
.stand-entwicklung{ background: rgba(180, 83, 9, .10);   color: var(--bernstein); }
.stand-geplant    { background: rgba(100, 116, 139, .10); color: var(--text-leise); }

/* --- Grundsätze ------------------------------------------------------------------------------- */

/* Vier Grundsaetze: auf dem grossen Schirm bewusst 2x2. Mit auto-fit standen sie 3+1 —
   das sieht nicht nach Absicht aus, sondern nach Versehen. */
.saeulen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 56px; }
.saeule h3 {
    margin: 0 0 10px; font-size: 1.1rem; font-weight: 750; color: var(--tinte);
    padding-top: 18px; border-top: 2px solid var(--tinte);
    letter-spacing: -.3px;
}
.saeule p { margin: 0; color: var(--text-leise); font-size: .99rem; }

/* --- Zahlenband ------------------------------------------------------------------------------- */

.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.band-wert { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 800; letter-spacing: -1.5px; color: var(--tinte); line-height: 1.05; }
.band-wort { margin-top: 6px; color: var(--text-leise); font-size: .96rem; }

/* --- Aufruf ----------------------------------------------------------------------------------- */

.aufruf { background: var(--tinte); color: #fff; text-align: center; }
.aufruf h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 22ch; }
.aufruf p { color: #b4c0d3; max-width: 54ch; margin: 0 auto 34px; }
.aufruf .knopfreihe { justify-content: center; }

/* --- Fuss ------------------------------------------------------------------------------------- */

.fuss { background: var(--tinte-2); color: #94a3b8; padding: 52px 0 40px; font-size: 14.5px; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.fuss .marke { font-size: 17px; }
.fuss-wege { display: flex; flex-wrap: wrap; gap: 22px; }
.fuss a { color: #94a3b8; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss-schluss { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13.5px; color: #64748b; }

/* --- Rechtsseiten ----------------------------------------------------------------------------- */

.recht-seite { padding: 62px 0 96px; max-width: 800px; }
.recht-seite h1 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); font-weight: 800; letter-spacing: -1px; color: var(--tinte); margin: 0 0 6px; }
.recht-seite h2 { font-size: 1.16rem; margin: 44px 0 14px; max-width: none; }
.recht-stand { color: var(--text-leise); font-size: 14.5px; margin: 0 0 32px; }

.recht-karte { background: var(--grund-2); border: 1px solid var(--linie); border-radius: 14px; padding: 22px 24px; }
.recht-karte p { margin: 0 0 12px; }
.recht-karte p:last-child { margin-bottom: 0; }

.daten { display: grid; grid-template-columns: 200px 1fr; gap: 12px 22px; margin: 0; }
.daten dt { font-weight: 700; color: var(--text-leise); font-size: 14.5px; }
.daten dd { margin: 0; }
.klein { font-size: 13.5px; color: var(--text-leise); }

@media (max-width: 760px) {
    /* Vier Grundsaetze stehen auf dem grossen Schirm als 2x2 — „drei und einer" sieht aus wie
       ein Fehler. Auf dem Telefon untereinander. */
    .saeulen { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 640px) {
    section { padding: 64px 0; }
    .buehne { padding: 76px 0 82px; }
    .daten { grid-template-columns: 1fr; gap: 4px; }
    .daten dd { margin: 0 0 14px; }
}