/*
  Stildefinitionen für die neugestaltete Praxis‑Website.  Die Akzentfarbe
  orientiert sich am Logoblau (#0073cd) und erfüllt die Kontrastanforderungen
  der WCAG.  Der Kopfbereich ist in drei Spalten unterteilt: Logo,
  Praxisinformationen und EU‑Förderhinweis.  Navigationslinks sind
  übersichtlich unterhalb des Kopfbereichs platziert.
*/

:root {
  --accent: #0073cd;
  --accent-hover: #005999;
}

body {
  font-family: Calibri, Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  color: #000;
  background-color: #ffffff;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* Skip‑Link sichtbar machen, wenn fokussiert */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--accent);
  color: #ffffff;
  padding: 8px 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

header {
  /* Entferne den farbigen Balken über dem Logo für ein ruhigeres Erscheinungsbild */
  border: none;
  background-color: #fdfdfd;
}

/* Drei‑Spalten‑Layout im Kopfbereich */
/* Kopfbereich: flexibles Layout für harmonische Anordnung */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Verhindert, dass das EU-Logo unter das Praxislogo rutscht; Elemente bleiben in einer Zeile */
  flex-wrap: nowrap;
  padding: 10px 20px;
}
.header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
/* Anpassung der Logogröße: etwas kleiner und unabhängig vom veralteten .header-left-Container */
.logo img {
  max-width: 150px;
  height: auto;
}
.header-left .practice-info {
  flex: 1 1 auto;
}
.practice-info h1 {
  margin: 0 0 4px 0;
  font-size: 1.6rem;
}
.practice-info p {
  margin: 0;
  line-height: 1.3;
}
.practice-info .accent {
  color: var(--accent);
}
.eu-funding-header img {
  /* EU‑Förderlogo größer darstellen */
  max-width: 350px;
  height: auto;
}

/* Neue Layoutregeln für Kopfbereich ohne verschachtelte header-left: Logo links, Practice-Info mittig, EU-Logo rechts */
.header-top .logo {
  flex: 0 0 auto;
}
.header-top .practice-info {
  flex: 1 1 auto;
  text-align: center;
}
.header-top .eu-funding-header {
  flex: 0 0 auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
}
nav li {
  margin-right: 15px;
}
nav a {
  padding: 8px;
  font-weight: bold;
}
nav a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 40px;
}

/* Kontakt und Hauptinformationen nebeneinander auf großen Bildschirmen */
.contact-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* Kontaktspalte: feste Breite, damit der Termintisch nicht in den rechten Bereich ragt */
/* Reduziere die Breite der Kontaktspalte, damit die linke Spalte schmaler wird */
.contact-info {
  flex: 0 0 240px;
  max-width: 260px;
}
/* Hauptinformationsbereich nimmt den restlichen Platz ein */
.main-info {
  flex: 1 1 400px;
}

/* Tabellenstil für Termin- und Öffnungszeiten */
.hours-table,
.full-hours-table {
  width: 100%;
  max-width: 450px;
  margin-left: 0;
  margin-right: auto;
  border-collapse: collapse;
  margin-top: 5px;
}
.hours-table th,
.hours-table td,
.full-hours-table th,
.full-hours-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #dddddd;
}
.full-hours-table th {
  background-color: var(--accent);
  color: #ffffff;
  text-align: left;
}

/* Feinabstimmung der Kontaktspalte: reduziert den Abstand zwischen Überschriften (h4) und dem nachfolgenden Text,
   um eine harmonischere Optik zu erreichen */
.contact-info h4 {
  /* Kleinerer Abstand über und unter den Unterüberschriften im Kontaktbereich */
  /* Abstand oberhalb der Überschrift für optische Trennung, darunter klein, damit Nummern dichter stehen */
  margin-top: 12px;
  margin-bottom: 8px;
}
.contact-info p {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Warnhinweise und Abwesenheitsboxen */
.alert-box {
  background-color: #f8f8f8;
  border-left: 5px solid var(--accent);
  padding: 10px;
  margin: 20px 0;
}
.alert-small {
  color: var(--accent);
  font-weight: bold;
}
.note {
  font-style: italic;
}

/* EU‑Förderung im Startbereich (wird oben im Kopf angezeigt) */
.eu-funding img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}
figure {
  margin: 20px 0;
}
figure img {
  width: 100%;
  height: auto;
}
figcaption {
  font-size: 0.9rem;
  color: #555555;
  margin-top: 5px;
}

/* Begrenzt die Größe des Lageplans, damit er nicht zu groß dargestellt wird */
.map-image {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Optische Trennlinie zur Abgrenzung einzelner Abschnitte */
.divider {
  border: none;
  border-top: 1px solid var(--accent);
  margin: 20px 0;
}

footer {
  background-color: #f5f5f5;
  color: #333333;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
}
footer a {
  color: var(--accent);
}
.email {
  font-weight: bold;
}

/* Visually hidden class for table captions and andere Screenreader‑Text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Responsives Verhalten */
@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-top .eu-funding-header {
    margin-top: 10px;
  }
  nav ul {
    justify-content: center;
  }
  .contact-hours {
    flex-direction: column;
  }
}