/* ==========================================================================
   LESTRAT – gemeinsames Basis-Stylesheet
   Enthält Farben, Reset, Typografie, Raster, Navigation und Footer.
   Seitenspezifisches CSS steht weiterhin im <style>-Block der jeweiligen Seite.
   Die Inhaltsbreite wird pro Seite über --container gesetzt.
   ========================================================================== */

:root {
    --teal:       #26aba1;
    --teal-dark:  #1d8c83;
    --teal-mid:   #2abdb2;
    --teal-light: #3dc4ba;
    --teal-pale:  #e8f7f6;

    --white:      #FFFFFF;
    --offwhite:   #F7F9F9;
    --gray-100:   #EEF1F1;
    --gray-200:   #D8E2E2;
    --gray-400:   #94a3b8;
    --gray-500:   #718096;
    --gray-700:   #2D3748;
    --gray-900:   #111827;
    --text:       #1A202C;

    --shadow-sm:  0 2px 8px rgba(38,171,161,.08);
    --shadow-md:  0 6px 24px rgba(38,171,161,.15);
    --shadow-lg:  0 16px 48px rgba(38,171,161,.18);

    --radius:     8px;
    --radius-lg:  16px;
    --transition: .3s cubic-bezier(.4,0,.2,1);

    /* Inhaltsbreite – pro Seite überschreibbar */
    --container:     1100px;
    --container-pad: 32px;
}

/* --- Reset & Grundlagen -------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Lora', serif; line-height: 1.3; }

a { color: inherit; text-decoration: none; }

/* E-Mail-Links bekommen ihr href erst per JS (Spamschutz) */
a[data-u][data-d] { cursor: pointer; }

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

/* --- Raster -------------------------------------------------------------- */

.container,
.nav-inner,
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* --- Navigation ---------------------------------------------------------- */

#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 12px 0;
    background: rgba(29,140,131,.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(38,171,161,.25);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; }

.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 44px; width: auto; display: block; }

.nav-back {
    color: rgba(255,255,255,.8);
    font-size: .85rem; font-weight: 500;
    display: flex; align-items: center; gap: 6px;
    transition: color .2s;
}
.nav-back:hover { color: #fff; }

/* --- Footer -------------------------------------------------------------- */

footer { background: var(--teal-dark); padding: 36px 0; }

.footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
}
.footer-inner p { color: rgba(255,255,255,.5); font-size: .78rem; }

.footer-links { display: flex; gap: 24px; }
.footer-links a { color: rgba(255,255,255,.5); font-size: .78rem; transition: color .2s; }
.footer-links a:hover { color: #fff; }

/* --- Mobil --------------------------------------------------------------- */

@media (max-width: 640px) {
    :root { --container-pad: 20px; }
}