/*=============== PILL-LEISTE (unten mittig) ===============
   Ersetzt die vier ausfahrenden Reiter rechts, den Cookie-Knopf unten links
   und den schwebenden Chat-Knopf unten rechts. Vorbild: Leiste der
   Klinik Wollmarshöhe – Glas-Kapsel, runde Symbole, kleines Label darunter,
   Funktionen (Chat, Cookies) durch eine Haarlinie von den Links getrennt. */

.gt-pill {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   bottom: 24px;
   bottom: calc(24px + env(safe-area-inset-bottom));
   z-index: 1000;
   display: flex;
   align-items: stretch;
   max-width: calc(100vw - 24px);
   padding: 6px 8px;
   border: 1px solid rgba(7, 18, 42, 0.08);
   border-radius: 999px;
   background-color: rgba(255, 255, 255, 0.72);
   -webkit-backdrop-filter: blur(18px) saturate(160%);
   backdrop-filter: blur(18px) saturate(160%);
   box-shadow: 0 6px 24px rgba(7, 18, 42, 0.08);
   font-family: inherit;
}

.gt-pill__item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 6px;
   padding: 6px 16px;
   margin: 0;
   border: 0;
   background: none;
   color: var(--dirtydarkblue, #07122a);
   text-decoration: none;
   cursor: pointer;
   font: inherit;
   line-height: 1;
}

.gt-pill__sep + .gt-pill__item {
   border-left: 1px solid rgba(7, 18, 42, 0.12);
}

.gt-pill__sep { display: none; }

.gt-pill__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   margin: -4px;
   border-radius: 50%;
   font-size: 18px;
   color: var(--dirtydarkblue, #07122a);
   background-color: transparent;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.gt-pill__label {
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   white-space: nowrap;
   color: var(--dirtydarkblue, #07122a);
}

/* Hover/Fokus: Kreis färbt sich GROHE-Pink, Symbol weiß. Keine Bewegung. */
.gt-pill__item:hover .gt-pill__icon,
.gt-pill__item:focus-visible .gt-pill__icon {
   background-color: var(--pink-color, #ff009f);
   color: #fff;
}

.gt-pill__item:focus-visible {
   outline: 2px solid var(--pink-color, #ff009f);
   outline-offset: 2px;
   border-radius: 12px;
}

/* Chat sitzt dauerhaft im pinkfarbenen Kreis – wie der frühere Chat-Knopf. */
.gt-pill__item--chat .gt-pill__icon {
   background-color: var(--pink-color, #ff009f);
   color: #fff;
}
.gt-pill__item--chat:hover .gt-pill__icon,
.gt-pill__item--chat:focus-visible .gt-pill__icon {
   background-color: var(--faf-color-pink, #af025a);
}

/* Alte Elemente sicherheitshalber ausblenden, falls irgendwo noch vorhanden. */
.help.main__contact { display: none !important; }

/* Platz am Seitenende, damit die Kapsel den Footer nicht verdeckt. */
body { padding-bottom: 96px; }

@media screen and (max-width: 767px) {
   .gt-pill {
      bottom: 8px;
      bottom: calc(8px + env(safe-area-inset-bottom));
      max-width: calc(100vw - 16px);
      padding: 5px 6px;
   }
   .gt-pill__item { padding: 8px 9px; }
   .gt-pill__icon { font-size: 16px; }
   .gt-pill__label { font-size: 7.5px; letter-spacing: 0.5px; }
   body { padding-bottom: 80px; }
}

@media screen and (max-width: 359px) {
   .gt-pill__item { padding: 8px 6px; }
   .gt-pill__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
   .gt-pill__icon { transition: none; }
}

/* Der Cookie-Knopf sitzt jetzt in der Kapsel. Diese Regel nimmt die alte
   freistehende Gestaltung zurück, auch falls noch eine ältere cookie.css
   aus dem Browser-Cache kommt. */
.gt-pill #cookie-settings-btn {
   position: static;
   width: auto;
   height: auto;
   padding: 6px 16px;
   border-radius: 0;
   background: none;
   box-shadow: none;
   opacity: 1;
   font-size: inherit;
   color: var(--dirtydarkblue, #07122a);
}
@media screen and (max-width: 767px) {
   .gt-pill #cookie-settings-btn { padding: 8px 9px; }
}
@media screen and (max-width: 359px) {
   .gt-pill #cookie-settings-btn { padding: 8px 6px; }
}

/* Globale button-Regeln der Seite (feste Höhe) für die Kapsel neutralisieren,
   damit Chat- und Cookie-Kachel exakt auf der Linie der Links sitzen. */
.gt-pill .gt-pill__item {
   height: auto;
   min-height: 0;
   width: auto;
}