/* -------------------------------------------------
   0️⃣  Grund‑Reset & Box‑Sizing
   ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------
   1️⃣  Basis‑Typografie & Body
   ------------------------------------------------- */
html {
    font-size: 100%;               /* 1 rem = 16 px (Ausgangs‑Basis) */
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #fafafa;
}

/* -------------------------------------------------
   2️⃣  Zentrale Layout‑Container
   ------------------------------------------------- */
/* Für Header, Main‑Content und Footer – gleiche Breite */
.container {
    max-width: 1200px;             /* an deine gewünschte Breite anpassen */
    margin: 0 auto;                /* zentriert */
    padding: 0 1rem;               /* kleiner horizontaler Innenabstand */
}

/* -------------------------------------------------
   3️⃣  Header & Navigation (START / KONTAKT)
   ------------------------------------------------- */
.site-header {
    background: #333;          /* Hintergrund über die gesamte Breite */
    padding: 0rem 0;              /* vertikaler Abstand oben/unten */
}

/* Flex‑Box sorgt dafür, dass die Links linksbündig bleiben */
.site-nav {
    display: flex;
    gap: 0.8rem;                  /* Abstand zwischen den Rechtecken */
    justify-content: flex-start;  /* zwingt linksbündig */
}

/* Menü‑Rechtecke */
.nav-item {
    display: inline-block;
    padding: 0.8rem 1.6rem;        /* Größe des Rechtecks */
    background: #444;          /* Grundfarbe */
    color: #fff;                  /* Schriftfarbe */
    text-decoration: none;
    font-weight: 600;
    border-radius: 0px;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover‑ / Focus‑Effekt */
.nav-item:hover,
.nav-item:focus {
    background: #1c3745;          /* dunkleres Blau beim Überfahren */
    color: #fff;
}

/* Aktiver Menüpunkt (optional) */
.nav-item.active {
    background: #2d5a71;          /* mgi-Farbe für die aktuelle Seite */
}

/* -------------------------------------------------
   4️⃣  HERO – Flex‑Layout (Bild + Logo)
   ------------------------------------------------- */
.hero {
    position: relative;               /* für das absolut positionierte Bild */
    display: flex;                    /* Flex‑Container: Bild + Container */
    align-items: center;              /* vertikale Zentrierung des Logos */
    justify-content: center;          /* zentriert den Container horizontal */
    height: 400px;                    /* Desktop‑Höhe */
    margin-bottom: 2rem;
    overflow: hidden;
    background:#000;                  /* fallback, falls das Bild nicht lädt */
}

/* -----------------------------------------------
   4️⃣ a  Hintergrund‑Bild (füllt den kompletten Hero‑Container)
   ----------------------------------------------- */
.hero-img {
    position: absolute;               /* liegt *unter* dem Inhalt */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                /* Bild deckt den gesamten Raum, behält Seitenverhältnis */
    z-index: 1;                       /* darunter */
}

/* -----------------------------------------------
   4️⃣ b  Container im Hero (identisch zu allen anderen .container‑Boxen)
   ----------------------------------------------- */
.hero .container {
    position: relative;               /* kein absolute mehr → nutzt Flex‑Ausrichtung */
    z-index: 2;                       /* liegt über dem Bild */
    width: 100%;                      /* nimmt die volle Breite des Flex‑Containers */
    max-width: 1200px;                /* exakt wie deine anderen .container */
    padding: 0 1rem;                  /* gleicher Innen‑Abstand wie überall */
    margin: 0 auto;                   /* zentriert (wie bei allen .container) */
    box-sizing: border-box;
}

/* -----------------------------------------------
   4️⃣ c  Logo selbst (innerhalb des .container)
   ----------------------------------------------- */
.hero-logo {
    display: block;                   /* vermeidet den kleinen Abstand unter dem img */
    max-width: 400px;                 /* Desktop‑Standard‑Breite, kann an dein Logo angepasst werden */
    height: auto;
    width: auto;
}

/* -------------------------------------------------
   4️⃣ d  Responsive Hero‑Anpassungen
   ------------------------------------------------- */

/* Mobile (≤ 480 px) – Hero‑Höhe halbieren, Logo kleiner */
@media (max-width: 480px) {
    .hero { height: 200px; }               /* 200 px Höhe */
    .hero-logo { max-width: 140px; }       /* max. 140 px Breite auf Handys */
}

/* Tablet (481 – 768 px) – etwas höhere Hero‑Box und größeres Logo */
@media (min-width: 481px) and (max-width: 768px) {
    .hero { height: 250px; }
    .hero-logo { max-width: 200px; }
}

/* (optional) very small devices – noch etwas kleiner */
@media (max-width: 360px) {
    .hero-logo { max-width: 120px; }
}

/* -------------------------------------------------
   5️⃣  Haupt‑Content‑Bereich
   ------------------------------------------------- */
.content {
    max-width: 1200px;            /* gleiche Breite wie .container */
    margin: 2rem auto;
    padding: 0 1rem;
}


/* -------------------------------------------------
   6️⃣  KONTAKT‑SEITE – Text + Bild nebeneinander
   ------------------------------------------------- */

/* Flex‑Container, der die beiden Spalten hält */
.contact-section {
    display: flex;
    flex-wrap: wrap;               /* sorgt dafür, dass bei geringerer Breite umgebrochen wird */
    gap: 2rem;                     /* Abstand zwischen Text‑ und Bild‑Spalte */
    align-items: flex-start;       /* beide Spalten am oberen Rand ausrichten */
    margin: 2rem 0;
}

/* -----------------------------------------------------------------
   6.1  Text‑Spalte (nimmt auf großen Bildschirmen ca. 60 % ein)
   ----------------------------------------------------------------- */
.contact-text {
    flex: 1 1 60%;                 /* wächst, schrumpft, Grundbreite 60 % */
    min-width: 260px;              /* verhindert zu starkes Schrumpfen */
}

/* Stil für das Kontakt‑Formular (optional, aber hübsch) */
.contact-form {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}
.contact-form label {
    display: block;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font: inherit;
}
.contact-form button {
    margin-top: 0.6rem;
}

/* -----------------------------------------------------------------
   6.2  Bild‑Spalte */
.contact-image {
    flex: 1 1 18%;
    min-width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------  Desktop (≥768px)  ---------------------------------- */
@media (min-width: 768px) {
    .contact-image picture,
    .contact-image img {
        width: 100%;            /* füllt die ganze Spaltenbreite */
        height: auto;           /* proportional */
        max-height: none;       /* keine Beschränkung */
        object-fit: cover;      /* Bild ggf. leicht abschneiden, damit es die Breite füllt */
    }
}

/* ----------  Mobile (≤767px)  ----------------------------------- */
@media (max-width: 767px) {
    .contact-image picture,
    .contact-image img {
        max-height: 40vh;       /* höchstens 40 % der Viewport‑Höhe */
        width: auto;            /* Breite folgt der Höhe */
        object-fit: contain;    /* Bild komplett sichtbar, kein Beschnitt */
    }
}
/* -----------------------------------------------------------------
   6.3  RESPONSIVE – Bild & Text untereinander bei kleinen Bildschirmen
   ----------------------------------------------------------------- */
@media (max-width: 767px) {
    .contact-section {
        flex-direction: column;    /* Stapelt die Spalten vertikal */
    }
    .contact-text,
    .contact-image {
        flex-basis: 100%;          /* nimmt die volle Breite ein */
    }
}

/* -------------------------------------------------
   67  Produkt‑/ Dienstleistungs‑Kachel‑Grid
   ------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.product-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.product-card img {
    max-width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 0.5rem;
}
.product-card h2 {
    margin: 0.5rem 0;
    font-size: 1.25rem;
}
.product-card .price {
    font-weight: bold;
    margin: 0.5rem 0;
}
.btn {
    display: inline-block;
    background: #0069d9;
    color: #fff;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.2s ease;
}
.btn:hover {background:#0053b3;}

/* -------------------------------------------------
   8️⃣  Footer
   ------------------------------------------------- */
.site-footer {
    background: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
}
.site-footer a {
    color: #fff;
    text-decoration: underline;
}

/* -------------------------------------------------
   8️9  Optional: Cookie‑Banner (nur bei externen Tools)
   ------------------------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 9999;
}
.cookie-btn {
    background: #0069d9;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.cookie-btn:hover {background:#0053b3;}

/* -------------------------------------------------
   9️⃣  Responsive Anpassungen
   ------------------------------------------------- */

/* Kleine Bildschirme – Menü wird vertikal gestapelt */
@media (max-width: 480px) {
    .site-nav {
        flex-direction: column;
        align-items: flex-start;   /* bleibt linksbündig */
    }
    .nav-item {
        width: 100%;               /* füllt die gesamte Container‑Breite */
        text-align: left;
        padding-left: 1rem;
    }

    .hero-img {height: 200px;}
    .hero h1 {font-size: 2rem;}
}

/* Mittlere Bildschirme (zwischen 481 px – 768 px) */
@media (min-width: 481px) and (max-width: 768px) {
    .hero-img {height: 250px;}
    .hero h1 {font-size: 2.2rem;}
}

/* -----------------------------------------------
   10️⃣  Hilfsklassen (falls du sie brauchst)
   ----------------------------------------------- */
.text-center {text-align: center;}
.mt-1 {margin-top: 1rem;}
.mb-1 {margin-bottom: 1rem;}
.hidden {display: none !important;}


/* -----------------------------------------------------------------
   Produkt‑Liste – 2 Spalten auf Desktop, 1 Spalte auf Mobile
   ----------------------------------------------------------------- */
.product-list {
    display: grid;
    gap: 2rem;
}

/* Desktop (≥768 px) → 2 Spalten */
@media (min-width: 768px) {
    .product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (≤767 px) → 1 Spalte */
@media (max-width: 767px) {
    .product-list {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------
   Listen‑Anpassung – verhindert Überlauf nach links
   ------------------------------------------------- */
.content ul,
.content ol {
    margin-left: 0;                 /* Standard‑Außenabstand abschalten */
    padding-left: 1.2rem;           /* Innenabstand, passend zu deinem .container‑Padding */
    list-style-position: inside;    /* Aufzählungs‑Kästchen bleibt **innerhalb** des Padding */
}

/* Optional: etwas Abstand zwischen Aufzählung und folgendem Absatz */
.content ul + p,
.content ol + p {
    margin-top: 0.8rem;
}

/* Typografie‑Feintuning (optional) */
.product-list h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: #222;               /* ggf. Anpassung an deine CI */
}
.product-list ul {
    margin-left: 1.2rem;
    line-height: 1.5;
}
.product-list li {
    margin-bottom: 0.4rem;
}


/* Emailadresse verstecken */

#contactLabel {
  position: absolute;
  width: 1px; /* breit genug, um einen Platzhalter zu sein */
  height: 1px; /* hoch genug, um einen Platzhalter zu sein */
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* versteckt den Text */
}

#contactLink {
  display: inline-block; /* macht den Link für Menschen clickbar */
  cursor: pointer;
}

#contactLabel {
  /* um den Text zu verbergen, kann man auch auf `visibility: hidden;` oder `opacity: 0;` setzen */
  visibility: hidden;
  left: -1000em; /* bewegt den Text weit links außerhalb des sichtbaren Bereichs */
}