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

/*==============================================================================
  Basis-Typografie
==============================================================================*/
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  background: #f9f9f9;
  /* verhindert gelegentliche horizontale Scrollleisten */
  overflow-x: hidden;
}

/* Header & Footer aufpeppen */
#main_infobar,
#main_footer {
  background: #c0c0c0;
  color: #fafafa;
}

/*==============================================================================
  Links
==============================================================================*/
a {
  color: #7e362e;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/*==============================================================================
  Grid-Container
  – symmetrisches Padding, Safe-Area berücksichtigt
==============================================================================*/
#main_grid {
  display: grid;
  grid-template-areas:
    "infobar infobar"
    "content action"
    "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 1rem; /* oben/unten */
  padding-left: calc(env(safe-area-inset-left, 0px) + 2rem);
  padding-right: calc(env(safe-area-inset-right, 0px) + 2rem);
}

/*==============================================================================
  INFOBAR (Header)
==============================================================================*/
#main_infobar {
  grid-area: infobar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1rem 2rem;
  border-radius: 4px;
}
#infobar_logo {
  max-width: 180px;
  height: auto;
  margin-right: 2rem;
}
#infobar_contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}
#infobar_contact p {
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}
/* Normalerweise verhindern wir Umbruch im Stunden-String */
#infobar_contact p .hours {
  display: inline-block;
  white-space: nowrap;
}

/*==============================================================================
  MAIN CONTENT (linke Spalte)
==============================================================================*/
#main_content {
  grid-area: content;
  background-color: #fff;
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#main_content h1 {
  font-size: 2.25rem;
  color: #7e362e;
  margin-bottom: 1rem;
  line-height: 1.2;
}
#main_content p {
  margin-bottom: 1rem;
  color: #555;
}
#main_content h2 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  color: #333;
  border-left: 4px solid #7e362e;
  padding-left: 0.5rem;
}
#main_content ul.benefits {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
#main_content ul.benefits li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #444;
}
#main_content ul.benefits li .icon {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 1.25rem;
}
#main_content p,
#main_content ul {
  font-weight: bold;
}

/*==============================================================================
  CALL-TO-ACTION FORM (rechte Spalte)
==============================================================================*/
#main_action {
  grid-area: action;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#main_action h2 {
  margin-bottom: 1rem;
  color: #7e362e;
}
#contact_form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}
#contact_form input,
#contact_form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#contact_form button {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  background-color: #7e362e;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#contact_form button:hover {
  background-color: #663028;
}

/* PLZ & Ort in einer Zeile */
#plz-ort-row {
  display: flex;
  gap: 1rem;
}
#plz-ort-row .col {
  flex: 1;
}
#plz-ort-row label {
  display: block;
  margin-bottom: 0.25rem;
}
#plz-ort-row input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/*==============================================================================
  FOOTER
==============================================================================*/
#main_footer {
  grid-area: footer;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}
#footer_content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
#footer_content p {
  color: #fff;
  font-weight: bold;
}

/*==============================================================================
  Toast-Notifications
==============================================================================*/
#toast_container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}
.toast {
  min-width: 250px;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.5s forwards, fadeOut 0.5s 4s forwards;
}
.toast--success { background-color: #28a745; }
.toast--error   { background-color: #dc3545; }
@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100%); }
}

/*==============================================================================
  Feld-Fehler-Styling
==============================================================================*/
input:invalid, textarea:invalid {
  border-color: #dc3545;
}
input:valid, textarea:valid {
  border-color: #28a745;
}

/*==============================================================================
  RESPONSIVE: Mobile & Tablet
==============================================================================*/
@media (max-width: 768px) {
  #main_grid {
    grid-template-areas:
      "infobar"
      "content"
      "action"
      "footer";
    grid-template-columns: 1fr;
    padding: 1rem; /* wieder rundum 1rem */
  }
  #main_infobar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #infobar_contact {
    gap: 1rem;
  }
  /* auf Mobile Umbruch für alle P-Elemente im Infobar-Contact */
  #infobar_contact p {
    white-space: normal;
  }
  /* Stunden-Block auf Mobile ebenfalls umbrechen lassen */
  #infobar_contact p .hours {
    display: inline;
    white-space: normal;
  }
}

/*==============================================================================
  Cookie-Banner
==============================================================================*/
#cookie_banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(50,50,50,0.95);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#cookie_banner.hidden {
  display: none;
}
#cookie_banner p {
  margin: 0;
}
#cookie_banner button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#cookie_accept {
  background-color: #28a745;
  color: #fff;
}
#cookie_decline {
  background-color: #dc3545;
  color: #fff;
}
#cookietext a {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

/*==============================================================================
  Cookie-Banner: mobile Ansicht stapeln & größere Buttons
==============================================================================*/
@media (max-width: 1024px) {
  #cookie_banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
    width: 80%;             /* neu: Banner nimmt 80% der Viewport-Breite */
    max-width: 400px;        /* optional: verhindert zu breite Banner auf Tablets */
  }
  #cookie_banner p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
  }
  #cookie_banner button {
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
    border-radius: 6px;
    margin: 0;
  }
}