/* Zentrales Design dachdecker-soest.de - Markus Gockel */
:root {
    --main-red: #ee0000;
    --dark-grey: #000000;
    --text-grey: #000000;
    --light-grey: #000000;
    --white: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.92);
    --card-bg: #ffffff;
    --accent-bg: #9e9e9e;
}

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

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    color: var(--text-grey);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(var(--bg-overlay), var(--bg-overlay)), 
                url('https://dachdecker-soest.de/wp-content/uploads/2018/06/Geflammte-Dachziegel_Dachdecker-Soest_Markus-Gockel-e1529147679241.jpg') no-repeat center center fixed;
    background-size: cover;
}

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



/* Mobile First Ansatz */
.element {
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .element {
    width: 50%;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .element {
    width: 33.333%;
  }
}


img, video, iframe {
  max-width: 100%;
  height: auto;
}




.card-container {
    background-color: var(--card-bg);
    width: 100%;
    max-width: 900px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--light-grey);
}

.header-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 25px 40px; gap: 20px; }
.since { color: var(--main-red); font-weight: 800; font-size: 1.4rem; }
.title { text-align: center; }
.title h1 { font-size: 1.6rem; color: var(--dark-grey); margin: 0; }
.title h2 { font-size: 1.1rem; color: var(--light-grey); font-weight: 500; }

.top-contact a { color: var(--dark-grey); text-decoration: none; font-weight: bold; font-size: 1.1rem; }



.logo-bar { 
    background-color: var(--accent-bg); 
    text-align: center; 
    padding: 20px 0; 
    border-top: 0px solid #ddd; 
    border-bottom: 0px solid #ddd; 
}


.call-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--white);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.call-button:hover {
    background-color: #b30000; /* etwas dunkleres rot */
}






/* Index-Spezifisch (Main Content) */
.main-content { display: grid; grid-template-columns: 300px 1fr; padding: 40px; gap: 40px; align-items: start; }

/* Profilfoto: Gockel.webp *//* NEU: Das rechteckige Profilfoto mit rotem Rahmen */
.profile-side img { 
    width: 100%; 
    max-width: 200px; /* Standard für Mobile/Tablet */
    border-radius: 0; /* Eckig */
    border: 4px solid var(--main-red); 
    height: auto; 
    display: block;  /* Entfernt den grauen Streifen (Abstand nach unten) */
    margin: 0 auto;
}

/* Speziell für PC (Desktop) kleiner machen */
@media (min-width: 1024px) {
    .profile-side img {
        max-width: 300px; /* Hier kannst du die Größe für den PC feinjustieren */
    }
}




.contact-section { padding-left: 20px; } /* Rückt den Text nach rechts */

.services { background-color: var(--accent-bg); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 40px; gap: 20px; text-align: center; }
.service-item { background: var(--card-bg); padding: 20px; border-radius: 6px; border-bottom: 3px solid var(--main-red); }

/* Textseiten-Spezifisch (Impressum/Datenschutz) */
.legal-content { padding: 40px; max-height: 70vh; overflow-y: auto; }
.legal-content h1 { border-bottom: 2px solid var(--main-red); padding-bottom: 10px; margin-bottom: 20px; }
.legal-content h2 { color: var(--dark-grey); margin-top: 25px; font-size: 1.3rem; }
.legal-content h3 { color: var(--text-grey); margin-top: 20px; font-size: 1.1rem; }
.legal-content p { margin: 15px 0; }
.legal-content ul { margin: 15px 20px; }

/* Footer */
footer { background-color: var(--dark-grey); color: #fff; padding: 25px; text-align: center; font-size: 0.9rem; }
footer a { color: #fff; text-decoration: none; margin: 0 10px; border-bottom: 1px solid transparent; }
footer a:hover { color: var(--main-red); border-bottom: 1px solid var(--main-red); }



/* Hilfsklassen */
.red { color: var(--main-red); font-weight: bold; }
.mail-link { color: var(--main-red); text-decoration: none; font-weight: bold; }

/* Das Logo (gockel.webp) auf dem PC verkleinern */
@media (min-width: 1024px) {
    .brand-logo {
        max-width: 600px; /* Hier kannst du den Wert anpassen, bis es dir gefällt */
        width: 100%;
    }
}

/* Sicherstellen, dass kein Freiraum unter Bildern entsteht */
img {
    display: block;
}


/* Mobile Anpassungen */
@media (max-width: 768px) {
    .header-top { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .main-content { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .profile-side img { max-width: 200px; margin: 0 auto; }
    .top-contact { display: none; } /* Versteckt Telefon oben auf kleinen Handys */