/* Variablen */
:root {
  --primary-color: #0A4A5A;
  --secondary-color: #3C9D9B;
  --accent-color: #2CA595;
  --light-accent-color: #A7E1E5;
  --background-light: #F4F4F4;
  --text-color: #333333;
  --link-color: #0088a9;
  --cta-background: #3C9D9B; 
  --cta-text: #3A3A3A; 
  --main-background: #eaeaea;
}
/* CSS-Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Grundlegende Einstellungen, optimiert für Mobilgeräte */
body {
  font-family: Arial, sans-serif;
  background-color: var(--main-background);
  color: var(--text-color);
  line-height: 1.6;
}

/* Kopfzeile */
header {
  background-color: var(--primary-color);
  color: white; 
  text-align: center;
  border-radius: 0 0 10px 10px;
}

/* Logo Platzhalter */
#logo-placeholder img {
  display: none;
  width: 9.375rem;
  height: auto;
  margin: 0 auto;
  border-radius: 10%;
}

/*Smartphone Menü */
nav.show {
  display: block;
  position: fixed;
  width: 100%;
}
a[href^="tel"] {
  width: 20%;
  background-color: var(--accent-color);
  color: white;
  padding: 0.3rem;
  border-radius: 5px;
  text-decoration: none;
}

a.none {
  background-color: transparent;
  padding: 0 !important;
}

#menu-toggle {
  width: 20%;
  cursor: pointer;
  background-color: var(--accent-color);
  padding: 0.3rem;
  border-radius: 5px;
}
.sliding-menu {
  display: none;
}
nav.show .navbild {
  width: 100%;
}
#navbar {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 6rem;
  justify-content: space-around;
  align-items: center;
  background-color: #333;
  padding: 1rem;
  z-index: 1;
}

.bar {
  width: 30px;
  height: 3px;
  background-color: #fff; 
  margin: 4px auto;
}

/* Navigationsleiste */
nav {
  display: column;
  justify-content: space-between; /* Verteilt den Platz zwischen Logo und ul */
  align-items: center; /* Zentriert die Elemente vertikal */
  padding: 10px 20px;
  background-color: #DCC5A4;
  margin-top: 6rem;
}

/* Target the h1 when sliding-menu is active */
#sliding-menu.show + h1.h1,
#sliding-menu.show ~ h1.h1 {
  margin-top: 0rem !important; /* Use !important to ensure the rule applies */
}

nav ul {
  list-style: none;
  display: column;
  padding: 0;
  margin: 0; /* Entfernen des Standard-Margins */
  align-items: center; /* Zentriert die Links vertikal */
}

nav li {
  padding: 0 15px;
}

nav a {
  color: var(--cta-text);
  font-weight: bold;
  padding: 0.375rem 0.75rem; /* ≈ 6px 12px */
  border-radius: 1.25rem;    /* ≈ 20px */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: var(--secondary-color);
}

.contact-info {
  text-align: center; /* Zentrierter Text auf kleinen Bildschirmen */
  background-color: #f4f4f4; /* Leichter Hintergrund für Kontrast */
  padding: 1rem; /* Polsterung um den Text */
  border-radius: 0.5rem; /* Abgerundete Ecken */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtiler Schatten für Tiefe */
  margin: 1rem auto; /* Zentriert den Abschnitt mit einem Abstand */
  max-width: 600px; /* Maximale Breite des Kontaktbereichs */
}

.contact-info h2 {
  color: #333; /* Dunkelgraue Schriftfarbe für die Überschrift */
  font-size: 1.5rem; /* Größere Schrift für die Überschrift */
  margin-bottom: 0.8rem; /* Abstand unter der Überschrift */
}

.contact-info p {
  font-size: 1rem; /* Standard-Schriftgröße für Text */
  line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
  margin-bottom: 0.5rem; /* Abstand unter jedem Absatz */
  color: #666; /* Mittelgraue Schriftfarbe */
}

.contact-info a {
  color: #0056b3; /* Farbe für Links */
  text-decoration: none; /* Keine Unterstreichung für Links */
}

.contact-info a:hover {
  text-decoration: underline; /* Unterstreichung beim Hover für Links */
}

.phone-link, .email-link {
  display: none;
  align-items: center;
  color: var(--text-color); /* oder jede andere Farbe Ihrer Wahl */
  text-decoration: none;
  margin-bottom: 0.5rem; /* Abstand zwischen den Links */
}

.icon {
  margin-right: 0.5rem; /* Abstand zwischen Icon und Text */
}

.logo {
  display: block;
  margin: 0 auto;
  width: 5rem;
  max-width: 100%; /* Prevents the logo from being larger than its container */
  height: auto; /* Ensures the aspect ratio remains correct */
  border-radius: 10%;
}

h1 {
  display: none;
}
.h1 {
 display: block;
 text-align: center;
 margin-top: 6rem;
}

/* Hauptinhalt */

main {
  background-color: var(--main-background);
  color: #333; /* Dunkelgraue Schriftfarbe */
  padding: 1rem;
  margin: auto; /* Zentrieren des Inhalts */
}

section {
  text-align: center;
  margin-bottom: 20px;
}

.info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Kartenstil (besteht ja bereits) */
.info-card {
  width: 100%;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  max-width: 100%;
  text-align: left;
}



/* Stile für die Tabelle */
.table-desktop {
  display: none;
}
.table-mobile {
  display: table;
}
.sprechzeiten-tabelle-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.sprechzeiten-tabelle {
  width: 100%;
  max-width: 98vw; /* für kleine Bildschirme, fast randlos */
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin: 2rem auto;
  box-sizing: border-box;
  overflow-x: auto; /* Fallback für sehr kleine Geräte */
}
.sprechzeiten-tabelle table {
  width: 100%;
  border-collapse: collapse;
  min-width: 300px;
}

/* Tabellenzellen */
.sprechzeiten-tabelle th,
.sprechzeiten-tabelle td {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  min-width: 70px;
}

/* Keine Linie rechts bei letzter Spalte */
.sprechzeiten-tabelle td:last-child,
.sprechzeiten-tabelle th:last-child {
  border-right: none;
}

/* Kopfzeile */
.sprechzeiten-tabelle thead th {
  font-weight: bold;
  background: #f3f3f3;
  text-transform: uppercase;
}

/* Grauer Hintergrund für Tag-Spalte */
.sprechzeiten-tabelle tbody th {
  background: #f5f5f5;
  font-weight: bold;
}

/* Stil für den Informationsbereich */
section p {
  line-height: 1.4; /* Bessere Zeilenhöhe für Lesbarkeit */
  margin-bottom: 0.5rem; /* Abstand zwischen den Paragraphen */
}

/* Spezifische Stile für die Telefonnummer */
.phone-number {
  background-color: var(--cta-background); /* Verwendung von CSS-Variablen für Farben */
  color: var(--cta-text);
  padding: 5px;
  border-radius: 5px;
  text-decoration: none;
}

.phone-number:hover, .phone-number:focus {
  background-color: var(--accent-color); /* Hervorheben bei Hover/Fokus */
}

/*Team */
.info-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin: 2.2rem auto;
  max-width: 98vw;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 1px 7px rgba(0,0,0,0.09);
  padding: 0.8rem 0.5rem;
}

.info-image {
  width: 100%;
  max-width: 100%;
  height: 300px;               /* Feste Höhe für alle Bilder auf Mobile! */
  object-fit: cover;           /* Schneidet zu, aber verzerrt nie */
  border-radius: 12px;
  box-shadow: 0 1px 7px rgba(0,0,0,0.08);
  margin: 0 0 1rem 0;
  min-width: 0;
  display: block;              /* Verhindert seltsames Umflussverhalten */
}


/* Bild und Text IMMER in der Reihenfolge: Bild (order: 1), Text (order: 2) */
.info-image { order: 1; width: 100%; max-width: 100%; border-radius: 12px; box-shadow: 0 1px 7px rgba(0,0,0,0.08); object-fit: cover; margin: 0 0 1rem 0; min-width: 0; }
.info-text  { order: 2; width: 100%; min-width: 0; text-align: left; }

.info-text h3 {
  margin-top: 0;
  color: var(--primary-color, #0A4A5A);
  font-size: 1.13rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Praxis */
/* Image Gallery Styles */
.praxis-bilder {
  padding: 1rem;
  text-align: center;
}

.praxis-bilder h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

/* Styling the image gallery */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 Bilder pro Reihe */
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 1200px;
}

.image-item {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  background-color: white;
}

.image-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  display: block;
}

.image-item img:hover {
  transform: scale(1.05);
}

.image-item figcaption {
  font-size: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--background-light);
  color: var(--text-color);
  border-top: 1px solid #ddd;
  text-align: center;
}

/* Leistungen */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto; /* Centering the grid */
}

.service-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  gap: 1.5rem;
  align-items: center; /* Ensures proper centering of text and images */
}

.service-text {
  width: 95%;
  max-width: 600px; /* Sets a max width for better readability */
  text-align: left;
  padding: 0;
}

.service-text ul {
  list-style-position: outside; /* Ensures the bullets are outside the text area */
  padding-left: 20px; /* Ensures proper indentation for bullet points */
  margin-top: 10px; /* Adds spacing between heading and list */
  line-height: 1.6; /* Improves readability of list items */
  text-align: left; /* Ensures the text is left-aligned */
}

.service-text li {
  text-align: left; /* Forces list items to align left */
  margin-bottom: 10px; /* Adds spacing between each bullet point */
}

.service-image {
  width: 100%;
  display: flex;
  justify-content: center;
        border-radius: 1rem;
}

.service-image img {
  width: 95%;
  height: auto;
        border-radius: 1rem;
}

.mobile-hr {
  border: none;
  height: 1px;
  background-color: #999;
  margin: 2rem 0;
}


/* Kontakt */
/* Grundlegende Stildefinitionen für das Kontaktformular */
.contact-form {
  background-color: #f8f9fa; /* Hintergrundfarbe */
  padding: 2rem; /* Abstand um das Formular */
  border-radius: 0.5rem; /* Abgerundete Ecken */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Schatten für Tiefe */
  max-width: 600px; /* Maximale Breite des Formulars */
  margin: 2rem auto; /* Zentriert das Formular mit Abstand oben und unten */
}

.contact-form form {
  display: flex;
  flex-direction: column; /* Anordnung der Elemente in einer Spalte */
}

.contact-form label {
  font-size: 1rem; /* Schriftgröße für Labels */
  color: #333; /* Farbe der Schrift */
  margin-bottom: 0.5rem; /* Abstand unter den Labels */
  font-weight: bold; /* Fett gedruckte Labels */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form input[type="submit"] {
  padding: 0.8rem; /* Polsterung innerhalb der Eingabefelder */
  margin-bottom: 1rem; /* Abstand unter den Eingabefeldern */
  border: 1px solid #ccc; /* Rahmen der Eingabefelder */
  border-radius: 0.3rem; /* Abgerundete Ecken der Eingabefelder */
}

.contact-form input[type="submit"] {
  background-color: #0056b3; /* Hintergrundfarbe des Senden-Buttons */
  color: white; /* Schriftfarbe im Button */
  font-size: 1rem; /* Schriftgröße im Button */
  cursor: pointer; /* Cursor als Zeiger */
  transition: background-color 0.3s ease; /* Übergang für Hover-Effekt */
}

.contact-form input[type="submit"]:hover {
  background-color: #004494; /* Dunklere Hintergrundfarbe beim Hover */
}

/* Impressum */
.impressum {
  background-color: var(--main-background);
  color: var(--text-color);
  padding: 2rem 1rem;
  margin: 2rem auto;
  border-radius: 10px;
  max-width: 600px; /* Maximale Breite reduziert für bessere Lesbarkeit */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: left; /* Links ausgerichteter Text */
}

.impressum-title {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.impressum-item {
  margin-bottom: 1rem;
  line-height: 1.5; /* Etwas kompaktere Zeilenhöhe */
}

.impressum-link {
  color: var(--link-color);
  text-decoration: none;
}

.impressum-link:hover {
  text-decoration: underline;
}

.impressum-list {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
}

.impressum-list li {
  margin-bottom: 0.5rem;
}

.datenschutz h1,
.datenschutz h2,
.datenschutz h3,
.datenschutz h4,
.datenschutz h5,
.datenschutz h6 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
}


.datenschutz {
  text-align: left;
  max-width: 900px;
  margin: 2rem auto;
  padding: 1rem;
  line-height: 1.8;
  font-size: 1.05rem;
}



/* Fußzeile */
footer {
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 5rem 0 1rem;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.2); /* Sanfter Schatten nach oben */
  clip-path: ellipse(120rem 100% at 50% 100%);
}

iframe {
  height: 20rem;
  width: 20rem;
}
  .mapurecht iframe {
  border-radius: 1rem;
  }
.rechtliches {
  display: flex;
  flex-direction: column;
}


/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}


/* Media Queries für größere Bildschirme */
@media (max-width: 500px) {
  .sprechzeiten-tabelle th,
  .sprechzeiten-tabelle td {
    padding: 0.6rem 0.4rem;
    font-size: 0.92rem;
  }
    .desktop-table {
    display: table;
  }

  .mobile-table {
    display: none;
  }
}

@media (min-width: 768px) {
  header, main, footer {
    max-width: 1200px;
    margin: auto;
  }

  #logo-placeholder {
    margin-right: 1.25rem; /* 20px bei einer Basis-Schriftgröße von 16px */
  }

  #logo-placeholder img {
    display: block;
    height: 9.375rem ; /* Stellt die Höhe des Logos automatisch ein */
    width: auto; /* Passt die Breite des Logos an, um das Originalverhältnis beizubehalten */
    max-width: 12.5rem; /* entspricht 200px bei einer Basis-Schriftgröße von 16px */
  }

  nav {
    justify-content: center; /* Zentriert die Elemente horizontal */
    margin-top: 0;
  }

  nav>ul {
    display: flex;
  }

  /* Navigationsleiste */
  /* Menü */
  nav.show {
    display: flex;
    position: static;
    width: auto;
  }
  #navbar {
    display: none;
  }
  #menu-toggle {
    display: none; 
  }
  .sliding-menu {
    display: flex;
  }

  nav ul {
    justify-content: center;
    flex-grow: 1; /* Erlaubt der ul, verfügbaren Platz auszufüllen */
  }

  nav li {
      padding: 0 15px;
  }

  .phone-link, .email-link {
    display: flex;
    align-items: center;
    color: var(--text-color); /* oder jede andere Farbe Ihrer Wahl */
    text-decoration: none;
    margin-bottom: 0.5rem; /* Abstand zwischen den Links */
  }
  .decnone {
    text-decoration: none;
    color: var(--text-color);
  }

  h1 {
    display: block;
    padding: 10px;
  }

  .h1 {
    display: none;
   }

  .logo {
    display: none;
  }

  /* Hauptinhalt */
  main {
      padding: 20px;
  }

  section {
      margin-bottom: 40px;
  }

/* Grundstil für Kontaktinformationen */
  .contact-info {
    padding: 2rem; 
    text-align: left; 
  }

  /* Telefon Button */
  a[href^="tel"] {
    width: 100%;
    padding: 10px 20px;
    margin-top: 10px;
  }

  /* Sprechstunde */
  .sprechzeiten-tabelle-wrapper {
    /* zentriert, maximal 1200px, gleichmäßige Ränder */
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .sprechzeiten-tabelle {
    max-width: 900px;  /* zieht sich weiter in die Breite */
    min-width: 550px;  /* wird nicht zu schmal */
    margin: 2.5rem auto;
    box-shadow: 0 2px 14px rgba(0,0,0,0.10);
  }
  .table-desktop {
    display: table;
  }
  .table-mobile {
    display: none;
  }
  .sprechzeiten-tabelle th,
  .sprechzeiten-tabelle td {
    font-size: 1.15rem;
    padding: 1.05rem 1.4rem;
  }

  
  /* Praxis */
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /*Team */
  .info-section {
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    gap: 0;
    margin: 2.2rem auto;
    padding: 1.5rem 2.5rem;
  }

  /* Standard: Bild links, Text rechts */
  .info-image, .info-text { width: 50%; min-width: 0; }

  .info-image {
    margin: 0 2.5rem 0 0;
    width: 30rem;
    height: 25rem;
    object-fit: cover;
    border-radius: 1rem;
    transition: transform 0.4s ease;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    order: unset;
  }

  .info-image:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  }

  .info-text {
    margin: 0 0 0 2.5rem;
    order: unset;
  }
  
  /* Damit ALTERNIERENDE Abschnitte richtig wechseln, falls Text zuerst kommt */
  .info-section:nth-child(even) .info-image { order: 2; margin: 0 0 0 2.5rem; }
  .info-section:nth-child(even) .info-text  { order: 1; margin: 0 2.5rem 0 0; }

    .info-section.reverse {
    flex-direction: row-reverse;
  }
  
/* Leistungen */
.service-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Ensures spacing between text and image */
  align-items: center; /* Aligns text and image vertically */
  margin-bottom: 1.5rem; /* Reduces space between rows */
}

  .mobile-hr {
    display: none;
  }

/* Text and Image Alignment */
.service-text, .service-image {
  flex: 1; /* Ensures the text and image take up equal width */
  max-width: 48%; /* Adds a max width to keep them proportionally equal */
}

.service-text {
  padding-right: 1rem; /* Adds padding to the right of the text */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically centers the text */
}

.service-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1rem; /* Adds margin to the left for alignment */
        border-radius: 1rem;
}

.service-image img {
  max-width: 400px; /* Ensures the image doesn't exceed a certain width */
  width: 100%; /* Scales down with the container */
  height: auto; /* Keeps aspect ratio */
        border-radius: 1rem;
}

/* Alternating row layout for desktop */
  .service-row:nth-of-type(odd) {
    flex-direction: row;
  }

  .service-row:nth-of-type(even) {
    flex-direction: row-reverse;
  }

/* Handles bullet points padding */
.service-text ul {
  padding-left: 20px; /* Consistent indentation for bullet points */
}

.services-grid .service-row:nth-child(odd) .service-text {
  margin-left: 3rem; /* Schiebt den Text um 2rem nach rechts */
}
.services-grid .service-row:nth-child(even) .service-text {
  margin-left: 12rem; /* Schiebt den Text um 2rem nach rechts */
}

/* Kontakt */
.contact-form form {
    max-width: 600px;
}
/* Impressum */
  .impressum {
    padding: 3rem 2rem;
    margin: 3rem auto;
    max-width: 600px; /* Auch auf großen Bildschirmen bleibt es maximal 600px breit */
  }

  .impressum-title {
    text-align: center;
  }
/* Fußzeile */
footer {
  padding: 10px 0;
  clip-path: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.mapurecht {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1rem 0;
}

  .mapurecht iframe {
  border: none;
  border-radius: 1rem; /* rund! */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* optional: sanfter Schatten */
  overflow: hidden;
}

}

@media (min-width: 1024px) {
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .info-wrapper {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    padding: 1.5rem 2rem;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .info-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
  }
}

@media (max-width: 450px) {
  .sprechzeiten-tabelle th,
  .sprechzeiten-tabelle td {
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
  }
}