/* obs-zugang.css - Kachel und Streifen des Zugangstors, 13.09.2026. Gehoert zu obs-zugang.js. */

.obs-zugang-kachel {
  position: fixed; z-index: 1200; right: 20px; bottom: 20px;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 14px 16px 12px;
  border: 1px solid rgba(179, 38, 30, 0.25); border-left: 4px solid #b3261e;
  border-radius: 12px;
  background: #ffffff; color: #0f1a20;
  box-shadow: 0 14px 40px rgba(15, 26, 32, 0.18);
  font-family: inherit; font-size: 13px; line-height: 1.45;
}

.obs-zugang-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.obs-zugang-kopf b { font-size: 14px; }
.obs-zugang-app { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: #6b7a84; }

.obs-zugang-text { margin: 0 0 6px; }
.obs-zugang-rollen { margin: 0 0 8px; color: #3b4a55; }
.obs-zugang-fuss { font-size: 12px; color: #6b7a84; }
.obs-zugang-link { color: #2a3be0; text-decoration: none; font-weight: 600; }
.obs-zugang-link:hover { text-decoration: underline; }

.obs-zugang-zu {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; color: #6b7a84;
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
}
.obs-zugang-zu:hover { color: #0f1a20; }

.obs-zugang-streifen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 0 0 14px; padding: 8px 12px;
  border-radius: 8px;
  background: #fff6e5; color: #5a3d0a; border: 1px solid rgba(179, 84, 30, 0.25);
  font-size: 13px;
}
.obs-zugang-streifen a { margin-left: auto; color: #2a3be0; font-weight: 600; text-decoration: none; }
.obs-zugang-streifen a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .obs-zugang-kachel { right: 12px; left: 12px; bottom: 12px; width: auto; }
}