/* Farben aus den Original-Screenshots gemessen */
:root {
  --outer: #d8a55d;      /* orangefarbener Seitenhintergrund */
  --beige: #d5c09a;      /* Inhaltsspalte */
  --band: rgba(119, 57, 34, 0.81); /* halbtransparentes Navigationsband */
  --brown: #895339;      /* Seitenleiste Kontakt */
  --dark: #763821;       /* Überschriften, Links, Button */
  --line: #b09563;       /* Trennlinien */
  --line2: #c2aa7f;
  --text: #3c3220;
  --footer: #584b35;
  --footer-text: #c7b9a0;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--outer);
  color: var(--text);
  font: 10.5px/1.4 Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 640px;
  max-width: 100%;
  margin: 0 auto;
}

a { color: var(--dark); }

/* ---------- Kopf ---------- */
#header {
  position: relative;
  /* oberer beiger Streifen nur über der Inhaltsspalte */
  background: linear-gradient(to right, transparent calc(50% - 320px), var(--beige) calc(50% - 320px), var(--beige) calc(50% + 320px), transparent calc(50% + 320px));
  padding-top: 20px;
}
.navband {
  background: var(--band);
  height: 72px;
}
.navband .wrap {
  position: relative;
  height: 72px;
  text-align: center;
}
.sitetitle {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--beige);
  border: 1px solid #ece2cf;
  color: #000;
  font-size: 11px;
  line-height: 22px;
  padding: 0 7px;
  white-space: nowrap;
}
.mainnav {
  list-style: none;
  margin: 0;
  padding: 35px 0 0;
}
.mainnav li { display: inline-block; margin: 0 3px; }
.mainnav a {
  color: var(--beige);
  text-decoration: none;
  font-size: 12px;
  padding-bottom: 1px;
}
.mainnav a:hover,
.mainnav a.active {
  color: #f1ebe9;
  border-bottom: 2px solid #c8b8a6;
}

/* ---------- Inhalt ---------- */
#page {
  flex: 1 0 auto;
  width: 640px;
  background: var(--beige);
  min-height: 300px;
}
#content { padding: 39px 13px 18px; }

.page-startseite #content { padding-top: 40px; }

.headimg {
  display: block;
  width: 100%;
  height: auto;
}
.headimg.gray {
  background: #a0a0a0;
  aspect-ratio: 614 / 186;
}

.inner { padding: 36px 30px 10px; }
.page-startseite .inner { padding-top: 0; }

h1 {
  color: var(--dark);
  font-size: 14px;
  font-weight: normal;
  margin: 8px 0 7px;
}
.page-startseite h1 { font-size: 14.5px; margin-bottom: 11px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line2);
  margin: 10px 0 12px;
}

p { margin: 0 0 13px; }

ul.list { margin: 0 0 12px; padding-left: 27px; }
ul.list li { line-height: 13.8px; }

.spacer { height: 40px; }

/* Startseite: gleichmäßige Abstände statt Leerzeilen */
.start { padding: 6px 0 22px; }
.start p { margin: 0 0 16px; }
.hinweis {
  margin: 4px 0 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.28);
  border-left: 4px solid var(--dark);
}
.start .gruss { margin: 24px 0 0; }

/* Doctolib-Button (ersetzt die alte Fußzeile), in den Farben der Seite */
.buchen { padding: 0 43px 34px; text-align: center; }
.doctolib {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  background: var(--dark); color: #fff;
  border-radius: 6px; text-decoration: none;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(60, 30, 15, 0.25);
}
.doctolib:hover, .doctolib:focus { background: #5e2b18; color: #fff; }
.doctolib-marke {
  font-weight: bold; font-size: 17px; letter-spacing: 0.3px;
  padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, 0.45);
}
@media print { .buchen { display: none; } }

/* ---------- Team ----------
   (Original-Screenshot in 50 % Zoom aufgenommen, Maße hier verdoppelt) */
.chef { width: 266px; text-align: center; }
.chef img { display: block; width: 266px; height: auto; }
.badge {
  display: inline-block;
  margin: 10px 0 30px;
  background: #2e2228;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 3px;
}
.teamgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  margin-top: 30px;
}
.member img { display: block; margin: 0 auto; width: 156px; height: auto; }
.member .name { font-weight: bold; color: #000; font-size: 10px; text-align: left; width: 156px; margin: 0 auto; padding-left: 0; }
.member .role { font-size: 10px; margin-bottom: 2px; }

/* ---------- Kontakt ---------- */
.kontakt {
  display: flex;
  gap: 30px;
  padding-top: 38px;
}
.sidebar {
  flex: 0 0 175px;
  background: var(--brown);
  color: #e6e3de;
  padding: 14px 17px 20px;
  margin-top: 15px;
  align-self: flex-start;
  line-height: 19px;
  font-size: 10px;
}
.sidebar h3 {
  color: var(--dark);
  font-size: 11px;
  margin: 0 0 7px;
}
.sidebar p { margin: 0 0 7px; }
.sidebar .fax { display: inline-block; width: 40px; }
.sidebar hr { border-top-color: #bc9667; border-bottom-color: #a37450; margin: 12px 0 0; }
.anfahrt { flex: 1; }
.anfahrt h1 { margin-top: 6px; }
.map { padding: 0 10px; }
.map iframe { display: block; width: 100%; height: 268px; border: 0; }
.btn {
  display: inline-block;
  background: var(--dark);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  text-decoration: none;
  font-size: 11px;
  padding: 6px 14px;
  margin-top: 8px;
}
.btn:hover { background: #5e2b18; }

/* ---------- Datenschutz (im Original aus Word kopiert, Calibri) ---------- */
.ds {
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #7a3f17;
}
.ds h1 {
  font-family: inherit;
  font-weight: bold;
  color: #3c3220;
  font-size: 14px;
  margin: 18px 0 30px;
}
.ds h2 {
  font-size: 10px;
  font-weight: bold;
  color: #3c3220;
  margin: 0 0 14px;
}
.ds p { margin: 0 0 15px; }

/* ---------- Sitemap ---------- */
ul.sitemap { list-style: none; padding-left: 10px; margin: 20px 0 30px; }
ul.sitemap li {
  padding-left: 11px;
  margin-bottom: 4px;
  font-size: 10px;
  background: no-repeat left center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8'%3E%3Cpath d='M0 0h4l2 4-2 4H0z' fill='%23c6a98a'/%3E%3C/svg%3E");
}

/* ---------- Fuß ---------- */
#footer {
  background: var(--footer);
  color: var(--footer-text);
  font-size: 11px;
  border-bottom: 3px solid var(--outer);
}
.footer-inner { padding: 18px 13px 16px; line-height: 15px; }
#footer a { color: var(--footer-text); }
#footer a.print svg { vertical-align: -1px; }

/* ---------- Druck ---------- */
@media print {
  body, #page, #header { background: #fff !important; }
  .navband, #footer { display: none; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 660px) {
  #header { background: var(--beige); }
  .kontakt { flex-direction: column; }
  .sidebar { flex-basis: auto; }
  .inner { padding-left: 16px; padding-right: 16px; }
  .mainnav { padding-top: 22px; }
  .navband, .navband .wrap { height: auto; min-height: 72px; padding-bottom: 8px; }
}