/* index.css
   Responsive, an Stil der ueber-uns.html angepasst.
   Farben: Primär #2089CB, Text #212121, Hintergrund weiß/hell.
   Achtung: diese Datei versucht außerdem einige Muse-Positionierungen zu neutralisieren
   damit die Seite nicht "weiß" bleibt (sichtbarkeits- / Position-reset).
*/

/* ------------- RESET / Basis ------------- */
* { box-sizing: border-box; }
html,body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  color:#212121;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Sicherheit: falls alte Muse-CSS body versteckt */
html, body, #page, main {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Neutralisiere typische "versteckende" Muse-Regeln (z.B. margin-right:-10000px, absolute offsets)
   WARNUNG: sehr breit wirkende Regeln, helfen zuverlässig, dass Inhalte sichtbar sind.
*/
[id^="u"], .grpelem, .colelem, .browser_width {
  margin-right: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
  top: auto !important;
  position: static !important;
  transform: none !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Entferne alle extremen negative offsets die Muse verwendet */
*[style*="margin-right:-10000px"]{ margin-right:0 !important; }

/* ------------- Layout-Container ------------- */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header: Logo links, Menu rechts */
header {
  background: #fff;
  color: #212121;
  position: relative;
  z-index: 200;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
}

.logo img {
  height: 60px;
  display: block;
}

/* Navigation */
.navbar { display:flex; align-items:center; gap:1rem; }
.navbar .nav-links {
  list-style:none;
  display:flex;
  gap: 1.2rem;
  margin:0;
  padding:0;
}

.navbar .nav-links li { display:inline-block; }
.navbar .nav-links a{
  color: #212121;
  font-family: open-sans, sans-serif;
  text-align: center;
  text-decoration:none;
  font-weight:300;
  letter-spacing: 0.4px;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}
.navbar .nav-links a:hover,
.navbar .nav-links a.active {
  opacity: 0.9;
  font-weight:600;
}

/* Hamburger für Mobile (initial hidden) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #212121;
  font-size: 1.8rem;
  cursor: pointer;
}

/* ------------- Hero / Titelbereich ------------- */
.hero {
  background: center/cover no-repeat;
  background-image: url("../images/hahnarrangement_150922.jpg");
  color: #fff;
  min-height: 50vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

#bild .titel {
    height: 598px;
    background-image: url("../images/hahnarrangement_150922.jpg");
  background-position: center center;
  filter: alpha(opacity=45);
  opacity: 0.45;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
  background-repeat: no-repeat;
  background-color: transparent;
  z-index: 32;
  background-size: cover;
}

.hero .overlay {
  background: rgba(253, 253, 253, 0);
  padding: 15rem 0rem 1rem 0rem;
  width:90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top:15rem;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0.4rem;
  text-align:left;
  color: #030303;
  line-height: 1.1;
}
.hero h2 {
  font-size: 1.05rem;
  font-weight: 400;
  color: #010101;
  text-align:Left;
}

/* ------------- Content-Bereiche (wie ueber-uns) ------------- */
main, .content {
  background: #fff;
  padding: 2rem 0;
}

section {
  padding: 1.5rem 0;
}

/* Überschriften */
h2 {
  color: #060606;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight:400;
  font-family: open-sans, sans-serif;
  text-align: left;
}
.linie {
  background-color: #000000;
  width: 50px;
  position: relative;
  margin-top: 17px;
  z-index: 63;
  height: 1px;
}

/* Absätze */
p {
  color: #212121;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  font-family: open-sans, sans-serif;
  font-weight: 300;
  text-align: left;
}
ul {
   display: block;
   list-style-type: disc;  
   margin-top: 0em;
   margin-bottom: 0em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 20px;
}
li {
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: open-sans, sans-serif;
  font-weight: 300;
  text-align: left;
}

/* Grid / Karten */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card, .leistungen div, .maschinen div {
  background:#f5f5f5;
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 0 0 rgba(0,0,0,0); /* placeholder */
}

/* Ansprechpartner Karte */
.card h3 {
  color:#2089CB;
  margin-bottom: .6rem;
  font-size:1.05rem;
  font-weight:700;
}

/* Zertifikat / kleine Bilder */
.zertifikat img, .card img {
  max-width: 100%;
  height: auto;
  display:block;
  border-radius: 6px;
}

/* ------------- Bilder wie auf Originalseite (responsive) ------------- */
/* Viele Bilder in Muse wurden als background-image in containers verwendet.
   Falls die Seite IMG mit data-orig-src verwendet, das JS-Snippet (weiter unten)
   sorgt dafür, dass die richtigen src gesetzt werden. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wenn image tags haben "temp_no_img_src" (Muse) -> just ensure they show */
.temp_no_img_src { opacity: 1 !important; visibility: visible !important; }

/* ------------- Footer ------------- */
footer {
  background: #212121;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
}

/* ------------- Kleinigkeiten / Buttons ------------- */
.button, .btn {
  display:inline-block;
  background:#2089CB;
  color:#fff;
  padding:.6rem 1rem;
  border-radius: 40px;
  text-decoration:none;
  font-weight:700;
}

/* ------------- Responsive: Mobile / Tablet ------------- */
@media (max-width: 992px) {
  .hero { min-height: 40vh; 
background-image:url("../images/hahnarrangement_150922.jpg");}
}

@media (max-width: 768px) {
  header .container { align-items:center; }

  /* Navigation wird Hamburger */
  .navbar .nav-links { 
    position: fixed;
    top: 72px;
    right: 0;
    background: #E1E2E3;
    width: 230px;
    height: calc(100% - 72px);
    flex-direction: column;
    padding: 1rem;
    display: none;
    gap: 1rem;
    z-index: 400;
    overflow-y: auto;
  }
  .navbar .nav-links.open {
    display:flex;
  }
  .menu-toggle { display: block; }
  .navbar .nav-links a { text-align: right; display:block; padding-right: .25rem; font-size: 0.9rem; }
  .logo img { height: 50px; }

  /* Hero kleiner */
  .hero { min-height: 28vh; padding: 1rem 0;
background-image:url("../images/hahnarrangement_150922-u19136-3-fr"); }
  .hero .overlay { padding: .8rem 1rem; }
}

/* Maximal harte Übersteuerung: falls irgendwas noch weiße Boxen vor den Inhalten legt */
*:not(html):not(body) {
  -webkit-transform:none !important;
  transform:none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}
/* Layout für Bild und Text nebeneinander */
.bild-text-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 2rem;
}
.bild-text-row img {
  width: 50%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
}
.bild-text-row .text {
  width: 50%;
  padding-left: 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 768px) {
  .bild-text-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bild-text-row img,
  .bild-text-row .text {
    width: 100%;
    padding-left: 0;
  }
}
/* Footer Styles */
.footer {
  background: #2d2d2d;
  color: #fff;
  padding: 1.5rem 0;
  font-size: 1rem;
  margin-top: 3rem;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}
.footer-address {
  font-family: open-sans, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  width: 80%;
  color: #fff;
}
.footer-address p {
  color: #fff;
}
.footer-address a{
  color: #fff !important;
  margin-right: 1rem;
  text-decoration: none;
}
.footer-address a:hover {
  opacity: 0.8; /* optionaler Hover-Effekt */
}
.footer-links {
  font-family: open-sans, sans-serif;
  font-size: 1rem;
  margin-top: 1rem;
}
.footer-links a {
  color: #fff !important;
  margin-right: 1rem;
  text-decoration: none;
}
.footer-links a:hover {
  opacity: 0.8; /* optionaler Hover-Effekt */
}
.footer-links a:last-child {
  margin-right: 0;
}
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-links {
    margin-top: 1rem;
  }
}

/* Signet (Logo) im Footer */
.footer-signet {
  flex: 0 0 auto;
  margin-right: 1rem;
  display: flex;
  align-items: center;
}
.footer-signet img {
  width: 174px; /* wie Referenz */
  height: auto;
  display: block;
}
/* Nach-oben-Button im Footer */
.footer-totop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #444;
  color: #fff;
  border: none;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.footer-totop:hover {
  background: #666;
}

@media (max-width: 768px) {
  .footer-totop {
    align-self: flex-end;
    margin-top: 1rem;
  }
  .footer-signet {
    margin-bottom: 1rem;
  }
  .footer-signet img {
    width: 140px;
  }
}