/* Kontaktflags
   ---------------------------------------------------------------
   Desktop: Flaggen am rechten Rand, vertikal mittig. Im Ruhezustand nur das
   Symbol, die Beschriftung faehrt beim Ueberfahren oder per Tastatur aus.
   Handy: schwebendes Dock am unteren Rand. Ohne Kante kann beim Ein- und
   Ausklappen der Safari-Leiste kein Spalt sichtbar wandern.
   --------------------------------------------------------------- */

.kontaktflags {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 40;
}
.kontaktflags ul { list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf-flag a {
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 20px 0 17px;
  background: var(--blue); color: #fff;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: 0 10px 26px -14px rgba(0, 60, 130, .7);
  /* Nur das Symbol schaut heraus: 54px Flaggenbreite. */
  transform: translateX(calc(100% - 54px));
  transition: transform .35s var(--ease), background .2s var(--ease);
}
.kf-flag:nth-child(even) a { background: var(--slate); }
.kf-flag a:hover, .kf-flag a:focus-visible { transform: translateX(0); }
.kf-flag a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.kf-flag .ph { font-size: 1.3rem; }
.kf-text { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.kf-zusatz { font-size: 0.8rem; font-weight: 400; opacity: .85; }
/* Im Ruhezustand schaut die Flagge 54px heraus, der Text beginnt aber schon
   bei 52px. Ohne Ausblenden blitzt ein Rand der Beschriftung hervor. */
.kf-flag .kf-text { opacity: 0; transition: opacity .2s var(--ease); }
.kf-flag a:hover .kf-text, .kf-flag a:focus-visible .kf-text { opacity: 1; }
.kf-mobil { display: none; }

@media (max-width: 860px) {
  .kontaktflags {
    top: auto; transform: none;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .kontaktflags ul {
    flex-direction: row; align-items: stretch; gap: 0;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 34px -12px rgba(28, 39, 49, .55);
  }
  .kf-flag { flex: 1 1 0; }
  .kf-mobil { display: block; }
  .kf-desktop { display: none; }
  .kf-flag a {
    transform: none; height: 58px; padding: 0 8px; border-radius: 0;
    flex-direction: column; justify-content: center; gap: 4px; box-shadow: none;
  }
  .kf-flag .ph { font-size: 1.25rem; }
  .kf-text { font-size: 0.74rem; white-space: normal; text-align: center; }
  .kf-flag .kf-text { opacity: 1; }
  .kf-zusatz { display: none; }
  /* Am Seitenende Platz fuer das Dock lassen, im Footer selbst: sonst stuende
     unter dem dunklen Footer ein heller Streifen. */
  body > footer .foot-bottom { padding-bottom: calc(24px + 70px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .kf-flag a { transition: none; }
}

/* Solange die Einwilligungsbox offen ist, treten die Flags zurueck: sie laegen
   sonst ueber der Abdunkelung und wirkten bedienbar, obwohl erst die
   Entscheidung ansteht. */
body:has(#BorlabsCookieBox .brlbs-cmpnt-dialog) .kontaktflags { display: none; }