/* Own styles only: Bootstrap is vendored and provides the layout primitives. */

:root {
  --vcard-blue-900: #06304d;
  --vcard-blue-800: #08436a;
  --vcard-blue-700: #0b5c8a;
  --vcard-blue-100: #e3f0f7;
  /* Triplet for Bootstrap's rgba() focus shadows. */
  --vcard-blue-700-rgb: 11, 92, 138;
  --vcard-ink: #162631;
  --vcard-muted: #5b6b76;
  --vcard-line: #dbe4ea;
  --vcard-canvas: #f6f9fb;
}

body {
  background: var(--vcard-canvas);
  color: var(--vcard-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  background: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  outline: 3px solid var(--vcard-blue-700);
}

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--vcard-line);
  margin-bottom: 1.5rem;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.75rem;
}

.brand {
  font-weight: 700;
  color: var(--vcard-blue-900);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.header-inner nav {
  display: flex;
  gap: 1rem;
  margin-inline-end: auto;
}

.header-inner nav a {
  color: var(--vcard-muted);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.header-inner nav a[aria-current="page"] {
  color: var(--vcard-blue-700);
  border-bottom-color: var(--vcard-blue-700);
}

/* Account menu -------------------------------------------------------------- */

.account-menu {
  position: relative;
  margin-inline-start: auto;
}

.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.account-menu-trigger::-webkit-details-marker {
  display: none;
}

.account-menu-trigger:hover {
  border-color: var(--vcard-line);
  background: var(--vcard-blue-100);
}

.account-menu-trigger:focus-visible,
.account-menu[open] .account-menu-trigger {
  border-color: var(--vcard-blue-700);
  outline: 2px solid var(--vcard-blue-700);
  outline-offset: 1px;
}

.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--vcard-blue-100);
  color: var(--vcard-blue-700);
  font-size: 0.75rem;
  font-weight: 700;
}

.account-name {
  display: grid;
  line-height: 1.15;
  text-align: start;
}

.account-name strong {
  color: var(--vcard-ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.account-name small {
  color: var(--vcard-muted);
  font-size: 0.7rem;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  width: min(15rem, calc(100vw - 1.5rem));
  padding: 0.85rem;
  border: 1px solid var(--vcard-line);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(9, 45, 70, 0.14);
}

.account-menu-heading {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--vcard-line);
}

.account-menu-heading small {
  color: var(--vcard-muted);
  font-size: 0.72rem;
}

.account-menu-form + .account-menu-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--vcard-line);
}

.account-menu-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--vcard-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bootstrap draws the select chevron as a data: URI image, which the application's CSP blocks.
   This one is a rotated border, so it needs no network or data: resource. */
.account-menu-panel .form-select {
  appearance: none;
  padding-inline-end: 1.6rem;
  background-image: none;
}

.account-menu-select-wrap {
  position: relative;
}

.account-menu-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.65rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--vcard-muted);
  border-bottom: 1.5px solid var(--vcard-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.page {
  padding-bottom: 3rem;
}

/* Bootstrap caps .container at 1320px above the xxl breakpoint. Adding the container
   gutter keeps the usable content area (both columns combined) at 1450px, and the
   header/footer containers follow so the layout stays aligned. */
@media (min-width: 1400px) {
  .wide-page .container {
    max-width: calc(1450px + var(--bs-gutter-x));
  }
}

/* ----------------------------------------------------------------- administration */

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--vcard-line);
  margin-bottom: 1rem;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0.375rem 0.375rem 0 0;
  color: var(--vcard-muted);
  font-weight: 500;
  text-decoration: none;
}

.admin-tab:hover,
.admin-tab:focus-visible {
  color: var(--vcard-blue-700);
  background: var(--vcard-blue-100);
}

.admin-tab.is-active {
  color: var(--vcard-blue-900);
  border-bottom-color: var(--vcard-blue-700);
  background: #fff;
}

.admin-tab-count {
  display: inline-block;
  min-width: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--vcard-blue-100);
  color: var(--vcard-blue-900);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.admin-tab.is-active .admin-tab-count {
  background: var(--vcard-blue-700);
  color: #fff;
}

.admin-table thead th {
  white-space: nowrap;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vcard-muted);
}

.admin-nowrap {
  white-space: nowrap;
}

/* Dates are split so the table stays narrow: the date on one line, the time in a
   quieter second line, both in UTC. */
.admin-stamp {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--vcard-muted);
}

.admin-stamp-date,
.admin-stamp-time {
  display: block;
}

.admin-stamp-time {
  font-variant-numeric: tabular-nums;
}

.admin-table tbody td {
  vertical-align: middle;
}

/* The whole row is clickable, while the name stays a real link so keyboard and
   assistive-technology users get a focusable target and a context menu. */
.admin-row:hover {
  background: var(--vcard-blue-100);
}

.admin-row:has(.admin-row-link:focus-visible) {
  outline: 2px solid var(--vcard-blue-700);
  outline-offset: -2px;
}

.admin-row-link {
  font-weight: 600;
  text-decoration: none;
}

.admin-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.admin-row {
  position: relative;
}

.admin-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-history {
  border-top: 1px solid var(--vcard-line);
}

.admin-history-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vcard-line);
}

.admin-history-item:last-child {
  border-bottom: 0;
}

.admin-history-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.admin-history-label {
  font-weight: 600;
}

.admin-history-time {
  color: var(--vcard-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.admin-history-actor {
  font-size: 0.83rem;
  color: var(--vcard-ink);
}

.admin-history-detail {
  font-size: 0.78rem;
  color: var(--vcard-muted);
}

.site-footer {
  border-top: 1px solid var(--vcard-line);
  padding: 1.25rem 0 2rem;
  color: var(--vcard-muted);
  font-size: 0.8rem;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.imprint-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.imprint-links a {
  color: var(--vcard-muted);
  text-decoration: none;
}

.imprint-links a + a {
  border-left: 1px solid var(--vcard-line);
  padding-left: 0.6rem;
}

.imprint-links a:hover,
.imprint-links a:focus-visible {
  color: var(--vcard-blue-700);
  text-decoration: underline;
}

.card {
  border-color: var(--vcard-line);
}

.card-header {
  background: #fff;
  border-bottom-color: var(--vcard-line);
}

.link-field {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.link-field-url {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--vcard-line);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--vcard-blue-700);
  text-decoration: none;
}

.link-field-url:hover,
.link-field-url:focus-visible {
  border-color: var(--vcard-blue-700);
  background: var(--vcard-blue-100);
}

.link-field-icon {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--vcard-blue-700);
}

.link-display {
  word-break: break-all;
  font-size: 0.75rem;
  color: var(--vcard-muted);
}

.copy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  padding: 0;
  border: 1px solid var(--vcard-line);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--vcard-muted);
  cursor: pointer;
}

.copy-link:hover,
.copy-link:focus-visible {
  border-color: var(--vcard-blue-700);
  color: var(--vcard-blue-700);
}

.copy-link svg {
  width: 0.95rem;
  height: 0.95rem;
}

.copy-link-icon-check,
.copy-link.is-copied .copy-link-icon-copy {
  display: none;
}

.copy-link.is-copied .copy-link-icon-check {
  display: block;
  color: #1a7f37;
}

.copy-link-helper {
  position: absolute;
  left: -10000px;
  top: 0;
}

/* The QR card lives in half the page, so a tile is roughly a sixth of the viewport wide: three
   side by side only work on a wide screen. Gap is column-only; a row gap would reopen space
   between a title and its rule. */
.qr-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: min-content min-content 1fr min-content min-content;
  column-gap: 1rem;
}

@media (min-width: 1200px) {
  .qr-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .qr-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Five rows: title, rule, plate, hint, footer. Subgrid makes those rows shared, so the plates
   line up along their bottom edges even though the artwork above them differs in height. */
.qr-option {
  display: grid;
  grid-template-rows: min-content min-content 1fr min-content min-content;
  align-items: center;
  text-align: center;
  padding: 0.9rem 0.75rem;
  border: 1px solid var(--vcard-line);
  border-radius: 0.5rem;
  background: #fff;
}

@supports (grid-template-rows: subgrid) {
  .qr-option {
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}

.qr-option-title {
  /* The shared subgrid row fits the longest title; bottom-aligning keeps a one-line title flush
     against the rule instead of floating above it. */
  align-self: end;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vcard-blue-900);
  margin-bottom: 0;
}

/* Spacing belongs below the rule: it separates the rule from the plate, not the title from the
   rule. Overridden in the footer, where the rule sits under the hint. */
.qr-option-rule {
  border: 0;
  border-top: 1px solid var(--vcard-line);
  opacity: 1;
  width: 100%;
  margin: 0 0 calc(0.85rem + 5px);
}

.qr-option-figure {
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.qr-option-hint {
  font-size: 0.78rem;
  color: var(--vcard-muted);
  line-height: 1.45;
  margin: 0.6rem 0 0;
}

.qr-plate {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--vcard-line);
  border-radius: 0.375rem;
  background: #fff;
}

.qr-option-footer {
  width: 100%;
}

.qr-option-footer .qr-option-rule {
  margin: 0.85rem 0 0;
}

/* Stacked, not side by side: the buttons are the primary action of each tile and must stay
   readable at one-third of the card width. */
.qr-option-actions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  max-width: 14rem;
  margin-inline: auto;
  padding-top: 0.85rem;
}

.qr-option-size {
  font-size: 0.72rem;
  color: var(--vcard-muted);
  line-height: 1.5;
  margin: 0;
}

/* Shown only after a failed copy, so the owner is pointed at the download button that still works. */
.qr-copy-status:not(.visually-hidden) {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #a4262c;
  margin-top: 0.2rem;
}

/* A caption belongs to the button above it, so it sits tight; the gap before the following button
   is the wider one. */
.qr-option-actions .qr-option-size:not(:last-child) {
  margin-bottom: 0.45rem;
}

.qr-option-footer > .qr-option-size {
  margin-top: 0.4rem;
}

.qr-note {
  display: flex;
  gap: 0.6rem;
  background: var(--vcard-blue-100);
  border-left: 4px solid var(--vcard-blue-700);
  border-radius: 0.375rem;
  padding: 0.75rem 0.9rem;
}

.qr-note-icon {
  flex: none;
  color: var(--vcard-blue-700);
  margin-top: 0.15rem;
}

.qr-note-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--vcard-ink);
}

.qr-separator {
  border: 0;
  border-top: 1px solid var(--vcard-line);
  opacity: 1;
  margin: 1rem 0;
}

.manage-portrait {
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: 1px solid var(--vcard-line);
  border-radius: 0.5rem;
}

.public-preview,
.published-about {
  border: 1px dashed var(--vcard-line);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  background: #fff;
}

.published-about :last-child {
  margin-bottom: 0;
}

.publish-note {
  background: var(--vcard-blue-100);
  border-left: 4px solid var(--vcard-blue-700);
  border-radius: 0.375rem;
  padding: 0.85rem 1rem;
  color: var(--vcard-ink);
}

.publish-note-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vcard-blue-900);
  margin-bottom: 0.3rem;
}

.publish-note-body {
  font-size: 0.8rem;
  color: var(--vcard-muted);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- buttons */

/* Bootstrap's primary is blue-500 and its secondary is grey. The brand is a darker navy, so the
   variable-driven variants are re-pointed here rather than overriding each generated rule. Danger
   and warning keep their semantic colours: recolouring them would hide what they mean. Every
   combination below clears the 4.5:1 contrast minimum (blue-700 on white is 7.2:1). */
.btn-primary {
  --bs-btn-bg: var(--vcard-blue-700);
  --bs-btn-border-color: var(--vcard-blue-700);
  --bs-btn-hover-bg: var(--vcard-blue-800);
  --bs-btn-hover-border-color: var(--vcard-blue-800);
  --bs-btn-active-bg: var(--vcard-blue-900);
  --bs-btn-active-border-color: var(--vcard-blue-900);
  --bs-btn-disabled-bg: var(--vcard-blue-700);
  --bs-btn-disabled-border-color: var(--vcard-blue-700);
  --bs-btn-focus-shadow-rgb: var(--vcard-blue-700-rgb);
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--vcard-blue-700);
  --bs-btn-border-color: var(--vcard-blue-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vcard-blue-700);
  --bs-btn-hover-border-color: var(--vcard-blue-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vcard-blue-800);
  --bs-btn-active-border-color: var(--vcard-blue-800);
  --bs-btn-disabled-color: var(--vcard-blue-700);
  --bs-btn-disabled-border-color: var(--vcard-blue-700);
  --bs-btn-focus-shadow-rgb: var(--vcard-blue-700-rgb);
}

/* ---------------------------------------------------------------- public card */

/* The public page is the only surface an outsider sees, and it is opened from a printed QR code,
   usually on a phone. It therefore gets its own identity: a coloured hero, tappable contact rows
   that use the full row as the target, and one clearly primary action. */

.public-body {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(11, 92, 138, 0.12), transparent 70%),
    var(--vcard-canvas);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.75rem 1rem 2.5rem;
}

.public-shell {
  width: 100%;
  max-width: 30rem;
}

.public-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow:
    0 1px 2px rgba(9, 45, 70, 0.06),
    0 22px 48px rgba(9, 45, 70, 0.14);
  overflow: hidden;
}

/* Hero -------------------------------------------------------------------- */

.public-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.6rem;
  background: linear-gradient(135deg, var(--vcard-blue-900), var(--vcard-blue-700));
  color: #fff;
}

/* A hairline highlight keeps the flat gradient from looking like a solid block. */
.public-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.public-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.public-portrait {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.public-identity {
  min-width: 0;
}

.public-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.2rem;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.public-role {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.public-content {
  padding: 1.35rem 1.5rem 1.5rem;
}

/* Primary action ---------------------------------------------------------- */

.public-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}

/* Both labels name their format, so they stack full width instead of sitting side by side; the
   filled primary still carries the focus, the outlined secondary stays available. */
.public-action-primary,
.public-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-block: 0.6rem;
}

.public-action-primary {
  font-weight: 600;
}

.public-action-primary .public-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.public-action-secondary {
  font-size: 0.85rem;
}

.public-action-secondary .public-icon {
  width: 1rem;
  height: 1rem;
}

/* Contact rows ------------------------------------------------------------ */

.public-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--vcard-line);
}

.public-contact li:last-child .contact-link {
  border-bottom: 1px solid var(--vcard-line);
}

/* The whole row is the target, not just the text: on a phone the difference between a 20px and a
   60px tap area is the difference between a working card and a frustrating one. */
.contact-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.25rem;
  color: var(--vcard-ink);
  text-decoration: none;
}

.contact-link:hover,
.contact-link:focus-visible {
  background: var(--vcard-blue-100);
  color: var(--vcard-blue-900);
}

.contact-link:focus-visible {
  outline: 2px solid var(--vcard-blue-700);
  outline-offset: -2px;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: var(--vcard-blue-100);
  color: var(--vcard-blue-700);
}

.contact-link:hover .contact-icon,
.contact-link:focus-visible .contact-icon {
  background: #fff;
}

.public-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* A filled brand mark reads heavier than a drawn outline at the same box, so it is inset slightly to
   keep every icon in the contact list optically the same size. */
.contact-icon .public-icon-brand {
  width: 1rem;
  height: 1rem;
}

.contact-text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.contact-label {
  color: var(--vcard-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contact-value {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.contact-trailing {
  flex: none;
  margin-inline-start: auto;
  color: var(--vcard-muted);
}

/* About ------------------------------------------------------------------- */

.public-about {
  margin-top: 1.5rem;
}

.public-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vcard-muted);
  margin: 0 0 0.5rem;
}

.public-about-body {
  border-left: 3px solid var(--vcard-blue-100);
  padding-left: 0.9rem;
  color: var(--vcard-ink);
  font-size: 0.9rem;
}

.public-about-body :last-child {
  margin-bottom: 0;
}

/* Footer ------------------------------------------------------------------ */

.public-footer {
  border-top: 1px solid var(--vcard-line);
  background: var(--vcard-canvas);
  padding: 1.15rem 1.5rem 1.25rem;
  text-align: center;
}

.public-footer-logo {
  display: block;
  width: auto;
  height: 1.35rem;
  margin: 0 auto 0.55rem;
}

/* The organisation name and the website stay on one line where they fit. When they do not, the
   separator wraps together with the website rather than dangling at the end of a line. */
.public-footer-org {
  margin: 0 0 0.5rem;
  color: var(--vcard-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.public-footer-site {
  white-space: nowrap;
}

.public-footer-sep {
  color: var(--vcard-line);
  margin-inline: 0.35rem;
}

.public-footer-org a {
  color: var(--vcard-blue-700);
  text-decoration: none;
}

.public-footer-org a:hover,
.public-footer-org a:focus-visible {
  text-decoration: underline;
}

.public-footer .imprint-links {
  justify-content: center;
  font-size: 0.75rem;
}

/* Unavailable ------------------------------------------------------------- */

.public-unavailable {
  padding: 2.5rem 1.75rem;
  text-align: center;
}

.public-unavailable h1 {
  font-size: 1.2rem;
  color: var(--vcard-blue-900);
  margin-bottom: 0.4rem;
}

.public-unavailable p {
  color: var(--vcard-muted);
  margin: 0;
}

@media (max-width: 575.98px) {
  .public-body {
    padding: 0 0 1.5rem;
  }

  .public-card {
    border-radius: 0;
    box-shadow: none;
  }

  .public-hero {
    padding: 1.5rem 1.25rem 1.35rem;
  }

  .public-content {
    padding: 1.15rem 1.25rem 1.35rem;
  }

  .public-footer {
    padding-inline: 1.25rem;
  }

  /* Stacked lines instead of a separator: on a narrow screen the "|" would lead the second line. */
  .public-footer-sep {
    display: none;
  }

  .public-footer-org > span {
    display: block;
  }

  .public-footer-site {
    margin-top: 0.15rem;
  }

  .public-action-primary {
    flex-basis: 100%;
  }

  .public-action-secondary {
    flex: 1 1 auto;
  }
}

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