/* ==========================================================================
   Evers | Seemann – Gastroenterologie Aurich
   Ein Stylesheet für alle Seiten. Aufbau:
   1. Farben, Schrift, Abstände (Variablen)      7. Bild-Text-Abschnitte
   2. Grundlagen                                  8. Kontaktkästen „Wir sind für Sie da“
   3. Kopfzeile + Hauptmenü                       9. Seiten-Bausteine (Leistungen, Ärzte, Kontakt)
   4. Handy-Menü                                 10. Bewerbungsformular
   5. Bildwechsler (Slider)                      11. Fußzeile
   6. Aufklapper (Akkordeon)                     12. Tablet (≤ 1024 px) und Handy (≤ 767 px)
   Schrift „soleil“ kommt von Adobe Fonts (Projekt ltd5ugu, setzt keine Cookies).
   ========================================================================== */

/* 1. Farben, Schrift, Abstände ------------------------------------------- */
:root {
  --navy: #2b3f57;
  --beige: #cbbeae;
  --text: #000;
  --text-weich: #312f2d;   /* Einleitungstext auf der Startseite */
  --grau-hell: #333;
  --feld: rgba(215, 215, 215, .19);
  --weiss: #fff;

  --schrift: "soleil", "Helvetica Neue", Arial, sans-serif;

  --inhalt: 1120px;        /* Breite des Inhalts */
  --inhalt-breit: 1140px;  /* farbige Kästen sind 10 px je Seite breiter */
  --rand: 10px;            /* Seitenrand, wenn der Inhalt nicht mehr in 1120 px passt (Tablet/Handy: 25 px) */

  --abstand-slider: 80px;  /* vom Bildwechsler bis zur ersten Überschrift */
  --abstand: 80px;         /* zwischen großen Abschnitten */
  --kopf-hoehe: 86px;
}

/* 2. Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--weiss); color: var(--text); font: 400 17px/1.5 var(--schrift); }
/* overflow-x: clip – das Original lässt sich bei manchen Breiten seitlich verschieben (Fehler), hier nicht */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.5em; }
ul { margin: 0 0 1.5em; padding: 0; }
li { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
button { font: inherit; }

.inhalt { width: min(var(--inhalt), 100% - 2 * var(--rand)); margin-inline: auto; }
.inhalt-breit { width: min(var(--inhalt-breit), 100%); margin-inline: auto; }

/* Überschriften */
.titel { color: var(--navy); font-size: 40px; line-height: 1; margin-bottom: 20px; }
.titel-klein { color: var(--navy); font-size: 20px; line-height: 1; }
.erster-titel { margin-top: var(--abstand-slider); }

/* Knöpfe */
.knopf {
  display: inline-block; padding: 12px 24px; background: var(--beige); color: var(--weiss);
  font-size: 20px; font-weight: 800; line-height: 1; text-decoration: none; transition: transform .3s;
}
.knopf:hover, .knopf:focus-visible { transform: scale(1.1); }
.knopf-navy { background: var(--navy); }

/* Icons (SVG-Dateien in /bilder/icons, Farbe = Textfarbe) */
.icon { display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }

/* 3. Kopfzeile + Hauptmenü ------------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); box-shadow: 0 0 10px rgba(0, 0, 0, .13); transition: transform .34s; }
.kopf.versteckt { transform: translateY(-150px); }   /* beim Runterscrollen weg, beim Hochscrollen zurück (main.js) */
.kopf-innen { display: flex; width: min(1140px, 100%); height: var(--kopf-hoehe); margin-inline: auto; }
.logo { flex: 0 0 35%; padding: 15px 10px 0; }
.logo img { width: 85%; }

.hauptmenue { flex: 1; display: flex; align-items: center; }
.hauptmenue > ul { display: flex; margin: 0; list-style: none; }
.hauptmenue li { position: relative; }
.hauptmenue a {
  display: flex; align-items: center; height: 80px; padding: 0 30px;
  color: var(--navy); font-size: 20px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
}
.hauptmenue > ul > li > a:hover,
.hauptmenue > ul > li:focus-within > a,
.hauptmenue > ul > li > a[aria-current] { background: var(--navy); color: var(--weiss); }
.hat-untermenue > a::after {
  content: ""; width: 12.5px; height: 14px; margin-left: 10px; background: currentColor;
  -webkit-mask: url(/bilder/icons/pfeil-unten.svg) no-repeat left center / 9px 14px; mask: url(/bilder/icons/pfeil-unten.svg) no-repeat left center / 9px 14px;
}
.untermenue {
  position: absolute; top: 100%; left: 0; z-index: 2; min-width: 100%; margin: 0; padding: 0; list-style: none;
  background: var(--weiss); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
}
.hat-untermenue:hover .untermenue, .hat-untermenue:focus-within .untermenue { visibility: visible; opacity: 1; }
.untermenue a { height: auto; padding: 13px 20px; }
.untermenue a:hover, .untermenue a:focus-visible { background: var(--beige); }

.menue-knopf { display: none; margin-left: auto; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; }
.menue-knopf .icon { --icon: url(/bilder/icons/menu.svg); width: 35px; height: 35px; }

/* 4. Handy-Menü: Panel rechts, 386 px breit, Rest der Seite abgedunkelt (wie im Original) */
.handymenue {
  width: 386px; max-width: calc(100% - 4px); height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0 35px 0 20px;
  border: 0; background: var(--navy); color: var(--weiss); text-align: center;
}
.handymenue::backdrop { background: rgba(0, 0, 0, .8); }
.handymenue-schliessen { position: absolute; top: 20px; right: 20px; padding: 0; border: 0; background: none; color: var(--weiss); cursor: pointer; }
.handymenue-schliessen .icon { --icon: url(/bilder/icons/schliessen.svg); width: 55px; height: 55px; }
.handymenue img { width: 100%; margin: 75px 0 20px; }
.handymenue ul { margin: 0; list-style: none; }
.handymenue a { display: block; margin-bottom: -3px; padding: 12px 24px; font-size: 30px; font-weight: 800; line-height: 30px; text-decoration: none; }
@media (min-width: 768px) {
  .handymenue { padding: 0 10px; }
  .handymenue-schliessen .icon { width: 50px; height: 50px; }
  .handymenue img { margin-top: 65px; }
}

/* 5. Bildwechsler (Slider) ------------------------------------------------- */
.slider { position: relative; height: 815px; overflow: hidden; background: #bbb; }
.slider-niedrig { height: 790px; }
.slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider[data-bereit] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slider.zieht { cursor: grabbing; }
.slider[data-bereit] img { transform: translateX(100%); visibility: hidden; pointer-events: none; -webkit-user-drag: none; }
.slider[data-bereit] img.aktiv { transform: none; visibility: visible; }
.slider-pfeil {
  position: absolute; top: 50%; z-index: 1; width: 25px; height: 25px; margin-top: -12.5px;
  padding: 0; border: 0; background: none; color: rgba(237, 237, 237, .9); cursor: pointer;
}
.slider-pfeil .icon { width: 25px; height: 25px; }
.slider-pfeil.zurueck { left: 10px; }
.slider-pfeil.zurueck .icon { --icon: url(/bilder/icons/pfeil-links.svg); }
.slider-pfeil.weiter { right: 10px; }
.slider-pfeil.weiter .icon { --icon: url(/bilder/icons/pfeil-rechts.svg); }
.slider-punkte { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; }
.slider-punkte button { width: 6px; height: 6px; margin: 0 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; }
.slider-punkte button[aria-current] { opacity: 1; }

/* Einzelbild in voller Kastenbreite (Karriere) */
.bildband { height: 400px; }
.bildband img { width: 100%; height: 100%; object-fit: cover; }

/* 6. Aufklapper (Akkordeon) ------------------------------------------------ */
.aufklapper { background: var(--beige); color: var(--weiss); }
.aufklapper-navy { background: var(--navy); }
.aufklapper summary {
  display: block; padding: 20px; font-size: 20px; font-weight: 800; line-height: 21px; cursor: pointer; list-style: none;
}
.aufklapper summary::-webkit-details-marker { display: none; }
.aufklapper summary::before {
  content: ""; float: left; width: 14px; height: 16px; margin: 2px 26px 0 0; background: currentColor;   /* Folgezeilen laufen unter dem Plus weiter */
  -webkit-mask: url(/bilder/icons/plus.svg) no-repeat left top / 14px 16px; mask: url(/bilder/icons/plus.svg) no-repeat left top / 14px 16px;
}
.aufklapper details[open] > summary::before { -webkit-mask-image: url(/bilder/icons/minus.svg); mask-image: url(/bilder/icons/minus.svg); }
.aufklapper-text { padding: 0 60px 30px; }
.aufklapper-text ul { list-style: disc; padding-left: 1.2em; }
.aufklapper-text a { color: inherit; }

/* 7. Bild-Text-Abschnitte -------------------------------------------------- */
/* Bild links 570 px, Text rechts 535 px; .gespiegelt = Text links, Bild rechts */
/* Wie Elementor: zwei 50-%-Spalten. Bild 570 px breit, 75 px vor der Mitte; Text ab 35 px nach der Mitte, höchstens 535 px */
.bild-text { display: grid; grid-template-columns: 50% 50%; align-items: center; }
.bild-text-bild { width: 570px; height: 427px; justify-self: end; margin-right: 75px; }
.bild-text-inhalt { width: 100%; max-width: 570px; padding-left: 35px; }
.bild-text.gespiegelt .bild-text-bild { order: 2; justify-self: start; margin: 0 0 0 75px; }
.bild-text.gespiegelt .bild-text-inhalt { justify-self: end; padding: 0 35px 0 0; }
.bild-text-bild img { width: 100%; height: 100%; object-fit: cover; }
.knopf-zeile { margin-bottom: 0; }
.bild-text .knopf-zeile { margin-top: 45px; } /* = Absatzabstand 25 px + 20 px */
.knopf-zeile.rechts { text-align: right; }

/* 8. Kontaktkästen „Wir sind für Sie da“ ----------------------------------- */
.kontaktkaesten { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: var(--abstand); }
.kontaktkasten {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 167px;
  padding: 10px; border-right: 15px solid var(--weiss); background: var(--navy) padding-box; color: var(--weiss);
  text-align: center; text-decoration: none; font-size: 20px; font-weight: 800; line-height: 1;
}
.kontaktkasten strong { font-size: 40px; font-weight: 800; line-height: 1; }
.kontaktkasten .icon { width: 60px; height: 60px; margin: 20px 0 27px; }
.icon-telefon { --icon: url(/bilder/icons/telefon.svg); }
.icon-fax { --icon: url(/bilder/icons/fax.svg); }

/* 9. Seiten-Bausteine ------------------------------------------------------ */
/* Startseite */
.einleitung { columns: 2; column-gap: 17px; color: var(--text-weich); }
.einleitung p, .einleitung p:last-child { margin-bottom: 1.5em; break-inside: avoid; }
.einleitung + .aufklapper { margin-top: 40px; }
.abschnitt { margin-top: var(--abstand); }
.abschnitt-letzter { margin-bottom: 70px; }

/* Leistungen */
.leistungen .aufklapper { margin-top: 90px; }
.downloads { margin-top: 40px; }
.downloads .titel-klein { margin-bottom: 20px; }
.download-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.download-liste a { padding: 12px 24px; background: var(--navy); color: var(--weiss); font-size: 17px; line-height: 1; text-align: center; text-decoration: none; transition: transform .3s; }
.download-liste a:hover, .download-liste a:focus-visible { transform: scale(1.05); }
.hinweiskasten { padding: 30px; background: var(--beige); color: var(--weiss); }
.hinweiskasten h2 { font-size: 20px; line-height: 1; text-align: center; }
.hinweiskasten h2 + div { margin-top: 20px; }
.tipps { margin-top: 80px; }
.atemtest { margin-top: 70px; }

/* Über uns */
.arzt { margin-top: 70px; }
.arzt.erster { margin-top: 80px; }
.arzt .bild-text-bild { height: 670px; }
.arzt h2 { color: var(--navy); font-size: 30px; line-height: 1; margin-bottom: 20px; }
.arzt h3 { color: var(--navy); font-size: 20px; line-height: 1; }
.arzt ul { list-style: disc; margin-bottom: 0; }
.arzt ul + h3 { margin-top: 20px; }
.arzt h2.naeher { margin-bottom: 5px; }   /* wie im Original: bei Dr. Seemann steht der Name dichter am Text */

/* Karriere */
.karriere .aufklapper { margin-top: 40px; }
.karriere .bildband { margin-top: 30px; }
.karriere .bildband + section { margin-top: 50px; }
.karriere { padding-bottom: 65px; }

/* Kontakt: Anfahrt */
/* Anfahrt: wie die Bild-Text-Abschnitte, Karte 635 px breit, 10 px vor bzw. nach der Mitte */
.anfahrt { display: grid; grid-template-columns: 50% 50%; align-items: center; margin-top: 110px; }
.anfahrt img { width: 635px; max-width: none; justify-self: end; margin-right: 10px; }
.anfahrt > div { width: 100%; max-width: 570px; padding-left: 35px; }
.anfahrt.gespiegelt img { order: 2; justify-self: start; margin: 0 0 0 10px; }
.anfahrt.gespiegelt > div { justify-self: end; padding: 0 35px 0 0; }
.anfahrt + .anfahrt { margin-top: 90px; }
.anfahrt + .anfahrt + .anfahrt { margin-top: 80px; }
.anfahrt h2 { color: var(--navy); font-size: 40px; line-height: 1; margin-bottom: 20px; }

/* Kontakt: Impressum und Datenschutz */
#impressum { margin-top: 90px; }
#impressum .titel { margin-bottom: 40px; }
.impressum { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
.impressum h3 { margin-top: 45px; color: var(--navy); font-size: 20px; line-height: 1; }  /* 25 px Absatz + 20 px */
.impressum > div > h3:first-child { margin-top: 0; }
.impressum a { text-decoration: none; }
.impressum-agentur { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 10px; padding: 0 10px; }
.impressum-agentur img { width: 90%; margin-top: 15px; }
#datenschutz { margin-top: 20px; }
#datenschutz .titel { margin-bottom: 40px; }
.datenschutz { columns: 2; column-gap: 30px; }
/* Überschriften im Datenschutz: Abstand oben 1,5 em, unten 0,75 em (wie im Original-Theme) */
.datenschutz h2, .datenschutz h3, .datenschutz h4 { margin: 0 0 .75em; padding-top: 1.5em; line-height: 1.4; color: var(--grau-hell); }
.datenschutz h2 { color: #666; font-size: 26px; font-weight: 400; }
.datenschutz h3 { font-size: 22px; font-weight: 400; }
.datenschutz h4 { font-size: 18px; }
.datenschutz > :first-child { padding-top: 0; }
.datenschutz ul { list-style: disc; }
.datenschutz a { color: #222; }

/* 10. Bewerbungsformular --------------------------------------------------- */
.bewerbung { display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px 15px; margin-top: 75px; }
.bewerbung .feld { grid-column: span 6; }
.bewerbung .feld-drittel { grid-column: span 2; }
.bewerbung .feld-halb { grid-column: span 3; }
.bewerbung label { display: block; margin-bottom: 10px; color: var(--navy); font-size: 20px; font-weight: 800; line-height: 30px; text-transform: uppercase; }
.bewerbung input:not([type=checkbox]), .bewerbung select {
  display: block; width: 100%; padding: 11.9px; border: 0; border-radius: 0; background-color: var(--feld);
  color: var(--navy); font: 17px/1.4 var(--schrift);
}
.bewerbung select { min-height: 51px; padding-right: 40px; -webkit-appearance: none; appearance: none;
  background-image: url(/bilder/icons/pfeil-unten.svg); background-repeat: no-repeat; background-position: right 12px center; background-size: 9px 14px; }
.bewerbung input[type=file] { min-height: 32px; padding: 4px 12px; }
.bewerbung .zustimmung label { display: block; margin: 0; color: var(--text); font-size: 15px; font-weight: 400; line-height: 1.5; text-transform: none; }
.bewerbung .zustimmung input { margin: 0 8px 0 0; vertical-align: -1px; }
.bewerbung .zustimmung a { text-decoration: none; }
.bewerbung button { justify-self: start; padding: 15px 20px 15px 15px; border: 0; background: var(--navy); color: var(--weiss); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.formular-hinweis { grid-column: span 6; padding: 15px; background: var(--beige); color: var(--weiss); }

/* 11. Fußzeile ------------------------------------------------------------- */
.fuss { background: var(--navy); color: var(--weiss); }
.fuss-innen { display: grid; grid-template-columns: 35% 22% 18% 24.752%; width: min(1140px, 100%); margin-inline: auto; }
.fuss-innen > * { padding: 30px 10px 10px; }
.fuss-logo { padding: 50px; }
.fuss-logo img { width: 100%; }
.fuss a { text-decoration: none; }
.fuss p { margin: 0; }
.fuss-links { font-size: 20px; font-weight: 800; line-height: 30px; padding-top: 23px; }
.nur-klein { display: none; }

/* 12. Tablet (≤ 1024 px) ---------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --abstand-slider: 25px; --kopf-hoehe: 114px; --rand: 25px; }
  .hauptmenue { display: none; }
  .kopf { box-shadow: none; }
  .kopf-innen { align-items: flex-start; }
  .logo { flex: 0 0 50%; padding: 10px 10px 0; }
  .logo img { width: 100%; }
  .menue-knopf { display: block; margin: 28px 10px 0 auto; }
  .menue-knopf .icon { width: 50px; height: 50px; }

  .slider, .slider-niedrig { height: 430px; }
  .einleitung { column-gap: 40px; }
  .einleitung + .aufklapper { margin-top: 70px; }
  .inhalt-breit { width: calc(100% - 30px); }
  .nur-gross { display: none; }
  .nur-klein { display: inline; }

  /* Bild-Text: Bild 492 px (Start) bzw. 505 px (Ärzte), Text daneben */
  /* Spalten in Prozent wie Elementor (bei 1024 px: Bild 492, Abstand 55, Text 457) */
  .bild-text { grid-template-columns: 49% 1fr; column-gap: 5.48%; margin-left: -5px; margin-right: 25px; }
  .bild-text.gespiegelt { grid-template-columns: 46.5% 48%; column-gap: 5.5%; margin-left: 25px; margin-right: 0; }
  .bild-text-bild, .bild-text.gespiegelt .bild-text-bild { width: auto; justify-self: stretch; margin: 0; }
  .bild-text-inhalt, .bild-text.gespiegelt .bild-text-inhalt { max-width: none; padding: 0; }
  .bild-text.abschnitt { margin-top: 75px; }
  .kontaktkaesten { padding: 15px 0; margin-block: 65px; }   /* 65 + 15 Innenabstand = 80 wie im Original */
  .kontaktkasten { border-right-width: 10px; }
  .abschnitt-letzter { margin-bottom: 51px; }
  .kontaktkasten:last-child { border-right-width: 5px; }

  .leistungen .aufklapper { margin: 75px -10px 0; }
  .leistungen .downloads { width: calc(100% - 20px); margin-top: 45px; }
  .tipps { margin-top: 55px; }
  .atemtest { margin-top: 64px; }

  .arzt { grid-template-columns: 50.75% 1fr; column-gap: 1.5%; margin-left: 0; margin-right: 29px; margin-top: 65px; }
  .arzt.erster { column-gap: 3.5%; margin-top: 40px; }
  .arzt.gespiegelt { grid-template-columns: 1fr 50.75%; column-gap: 1.5%; margin-left: 30px; margin-right: 0; }
  .arzt .bild-text-bild { height: 670px; }

  .karriere .aufklapper { margin-top: 70px; }
  .karriere .bildband { width: 100%; margin-top: 46px; }
  .karriere .bildband + section { width: calc(100% - 20px); }
  .karriere .bildband + section .aufklapper { margin-top: 0; }

  /* Anfahrt: erst Überschrift und Text, darunter die Karte (wie im Original) */
  .anfahrt, .anfahrt.gespiegelt { display: flex; flex-direction: column; margin: 45px 20px 0; }
  .anfahrt + .anfahrt, .anfahrt + .anfahrt + .anfahrt { margin-top: 121px; }
  .anfahrt img, .anfahrt.gespiegelt img { order: 2; width: calc(100% - 20px); margin: 9px 10px 0; }
  .anfahrt > div, .anfahrt.gespiegelt > div { max-width: none; padding: 0; }
  #impressum .titel { margin-bottom: 55px; }
  .impressum, .datenschutz { margin-inline: -15px; }

  .fuss-innen { grid-template-columns: 50% 25% 25%; }
  .fuss-innen > * { padding: 29px 10px 0; }
  .fuss-logo { padding: 10px; }
  .fuss .fuss-links { grid-column: 1 / -1; margin-top: -9px; padding: 0 0 30px 25px; }
}

/* Handy (≤ 767 px) ---------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --kopf-hoehe: 76px; --abstand: 75px; }
  body { line-height: 1.66; }
  .titel, .anfahrt h2 { font-size: 28px; }
  .inhalt-breit { width: calc(100% - 30px); }
  .logo { flex: 0 0 80%; }
  .menue-knopf { margin-top: 23px; }
  .menue-knopf .icon { width: 35px; height: 35px; }

  .slider, .slider-niedrig { height: 400px; }
  .einleitung { columns: 1; }
  .aufklapper summary { padding: 20px; font-size: 15px; line-height: 16px; }
  .aufklapper summary::before { width: 13px; height: 15px; margin-right: 21px; -webkit-mask-size: 13px 15px; mask-size: 13px 15px; }
  .aufklapper-text { padding: 0 20px 30px; }

  .bild-text, .bild-text.gespiegelt { display: block; margin-left: 0; margin-right: 0; }
  .bild-text .bild-text-bild, .bild-text.gespiegelt .bild-text-bild { width: auto; height: 427px; margin: 0 15px; }
  .bild-text .bild-text-inhalt, .bild-text.gespiegelt .bild-text-inhalt { padding: 15px 30px 0; }
  .bild-text.ohne-handybild .bild-text-bild { display: none; }   /* Bild „Leistungen“ fehlt auf dem Handy (wie im Original) */
  .bild-text.ohne-handybild .bild-text-inhalt { padding-top: 0; }
  .abschnitt-letzter { margin-bottom: 65px; }
  .kontaktkaesten { grid-template-columns: 1fr; padding: 0; width: calc(100% - 20px); }
  .kontaktkaesten { margin-block: var(--abstand); }
  .leistungen .kontaktkaesten { margin-top: 55px; margin-bottom: 45px; }
  .arzt + .kontaktkaesten { margin-top: 35px; margin-bottom: 45px; }
  .kontaktkasten, .kontaktkasten:last-child { min-height: 0; border: 5px solid var(--weiss); }
  .kontaktkasten strong { font-size: 28px; }

  .download-liste { grid-template-columns: 1fr; }
  .leistungen .aufklapper { margin: 40px -10px 0; }
  .leistungen .downloads { margin-top: 40px; }
  .tipps { margin-top: 25px; }
  .hinweiskasten { padding: 30px; }
  .arzt, .arzt.erster { margin-top: 40px; }
  .arzt.bild-text .bild-text-bild, .arzt.bild-text.gespiegelt .bild-text-bild { height: 355px; }
  .arzt.bild-text .bild-text-inhalt, .arzt.bild-text.gespiegelt .bild-text-inhalt { padding: 10px 25px 0; }
  .anfahrt, .anfahrt.gespiegelt { margin: 55px var(--rand) 0; }
  .anfahrt + .anfahrt, .anfahrt + .anfahrt + .anfahrt { margin-top: 55px; }
  .anfahrt > div { padding: 0 5px; }
  .anfahrt img, .anfahrt.gespiegelt img { width: 100%; margin: 24px 0 0; }
  .anfahrt + .kontaktkaesten { margin-top: 35px; }
  .impressum { grid-template-columns: 1fr; }
  #impressum { margin-top: 105px; }
  .impressum-agentur { grid-template-columns: 1fr; padding: 0 10px; }
  .datenschutz { columns: 1; }
  .bewerbung { gap: 24px 0; }
  .bewerbung label { line-height: 1.66; }
  .bewerbung .zustimmung label { line-height: inherit; }
  .bewerbung .feld-drittel, .bewerbung .feld-halb { grid-column: span 6; }
  .bildband { height: 190px; }

  .fuss-innen { grid-template-columns: 1fr; }
  .fuss-innen > * { margin: 0; padding: 0 10px 0 25px; }
  .fuss-logo { padding: 10px; }
  .fuss-innen > p:nth-child(2) { margin: 20px 0 46px; }
  .fuss-innen > p:nth-child(3) { margin-bottom: 16px; }
  .fuss .fuss-links { margin-top: 0; padding: 0 0 31px 25px; line-height: 33px; }
}

/* Kleine Handys (< 480 px): Datenschutz-Überschriften kleiner, wie im Original-Theme */
@media (max-width: 479px) {
  .datenschutz h2 { font-size: 20px; }
  .datenschutz h3 { font-size: 18px; }
  .datenschutz h4 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .download-liste a { transition: none; }
}