/* ------------------------------------------------------------------------
   Doctolib-Terminknopf
   Angelegt 02.11.2026 nach dem Auftrag von Doctolib (Mail vom 23.07.2026,
   weitergeleitet von der Praxis am 02.11.2026).
   Am selben Tag auf Wunsch von Stefan auf den reinen Terminknopf reduziert -
   "Nachricht", "Anrufen" und der Hinweis zum Telefonassistenten sind raus.

   Gegenueber der Code-Vorlage von Doctolib geaendert:
   - Logo liegt lokal (/grafik/doctolib-logo.png) statt von doctolib.de.
     Sonst wuerde jeder Seitenaufruf die Besucher-IP an Doctolib melden.
   - Schrift ist die der Seite (Open Sans) statt des nicht geladenen Montserrat.
   - "width:100" ohne Einheit (ungueltig) entfernt, opacity:.85 entfernt
     (machte die weisse Schrift blass).
   - Touch-Geraete: durchgehende Leiste am unteren Rand statt kleiner Kasten in
     der Ecke; der Fussbereich bekommt unten Platz, damit nichts verdeckt bleibt.
   - Verschwindet, solange das mobile Hamburger-Menue offen ist.
   ------------------------------------------------------------------------ */

.dl-widget{
  --dl-blau:#00264c;
  position:fixed; top:180px; right:0; z-index:1200;
  width:112px; padding:7px 7px 9px;
  background:var(--dl-blau);
  border-radius:6px 0 0 6px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-family:"Open Sans",Arial,sans-serif;
  font-size:14px; line-height:1.3; text-align:center;
}
.dl-widget__logo{
  display:block; width:84px; height:auto;
  margin:2px auto 7px;
}
.dl-widget a{
  font-family:inherit; font-size:14px; font-weight:700;
  box-sizing:border-box;
}
.dl-knopf{
  display:block; margin:0;
  padding:9px 4px;
  background:#fff; color:var(--dl-blau);
  text-decoration:none; text-align:center;
  border:none; border-radius:4px;
  transition:background .15s, color .15s;
}
.dl-knopf--haupt{ background:#ff8000; color:#fff; }
.dl-knopf:hover,.dl-knopf:focus-visible{ background:#e8eef5; color:var(--dl-blau); }
.dl-knopf--haupt:hover,.dl-knopf--haupt:focus-visible{ background:#e67300; color:#fff; }
.dl-widget a:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* -------- Touch-Geraete: Leiste am unteren Rand --------
   Umschaltpunkt 999px, weil ab 1000px auch das Hamburger-Menue greift: wo mit
   dem Finger bedient wird, liegt der Knopf unten und ist gross genug. */
@media (max-width:999px){
  .dl-widget{
    top:auto; bottom:0; right:0; left:0;
    width:auto; border-radius:0;
    display:flex; align-items:center; gap:10px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 10px rgba(0,0,0,.25);
  }
  .dl-widget__logo{ width:72px; margin:0; flex:0 0 auto; }
  .dl-knopf{
    flex:1 1 auto; margin:0; padding:11px 6px; font-size:16px;
    min-height:44px;                     /* Fingerkuppe braucht Platz */
    display:flex; align-items:center; justify-content:center;
  }
  /* Der Fuss darf nicht unter der Leiste verschwinden */
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom,0px)); }
}
/* Sehr schmale Geraete: Logo weg, damit der Knopf lesbar bleibt */
@media (max-width:360px){
  .dl-widget__logo{ display:none; }
}

/* Solange das Hamburger-Menue offen ist, stoert der Knopf nur */
html.mm-opened .dl-widget{ display:none; }

/* Im Ausdruck weglassen */
@media print{ .dl-widget{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .dl-widget *{ transition:none !important; }
}