#adminTrigger {
text-decoration: none;
cursor: default;
transition: opacity 0.2s ease;
}

#adminTrigger:hover,
#adminTrigger:focus-visible {
opacity: 0.6;
}

.admin-modal-overlay {
position: fixed;
inset: 0;
background: rgba(16, 48, 87, 0.65);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 200;
animation: adminFadeIn 0.15s ease-out;
}

.admin-modal-overlay.hidden {
display: none;
}

@keyframes adminFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.admin-modal-card {
background: #ffffff;
border-radius: 6px;
width: 100%;
max-width: 360px;
padding: 2rem;
position: relative;
box-shadow: 0 25px 60px rgba(16, 48, 87, 0.35);
}

.admin-modal-close {
position: absolute;
top: 0.75rem;
right: 0.9rem;
font-size: 1.5rem;
line-height: 1;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 0.25rem;
}

.admin-modal-close:hover,
.admin-modal-close:focus-visible {
color: #103057;
}

.admin-modal-card .form-feedback {
margin-top: 0.75rem;
font-size: 0.8125rem;
color: #b91c1c;
}

.admin-modal-card input:focus-visible,
.admin-modal-close:focus-visible {
outline: 2px solid #18a14a;
outline-offset: 2px;
}

body.admin-mode {
outline: 4px solid #9dd9eb;
outline-offset: -4px;
}

body.admin-mode {
padding-top: 42px;
}

body.admin-mode #navbar {
top: 42px;
}

.admin-bar {
--admin-bg: #9dd9eb;
--admin-text: #103057;
--admin-dot: #103057;
--admin-logout-bg: rgba(16, 48, 87, 0.1);
--admin-logout-border: rgba(16, 48, 87, 0.25);
--admin-logout-hover: rgba(16, 48, 87, 0.18);
--admin-save-bg: #103057;
--admin-save-border: #103057;
--admin-save-hover: #0b213d;
--admin-save-disabled-bg: rgba(16, 48, 87, 0.2);
--admin-save-disabled-border: transparent;
--admin-save-disabled-text: rgba(255, 255, 255, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
background: var(--admin-bg);
color: var(--admin-text);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1.25rem;
font-family: 'Barlow', sans-serif;
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.02em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.admin-bar[data-status="dirty"] {
--admin-bg: #f59e0b;
--admin-text: #1a1a1a;
--admin-dot: #1a1a1a;
--admin-logout-bg: rgba(0, 0, 0, 0.15);
--admin-logout-border: rgba(0, 0, 0, 0.25);
--admin-logout-hover: rgba(0, 0, 0, 0.25);
}

.admin-bar[data-status="saving"] {
--admin-bg: #103057;
--admin-text: #ffffff;
--admin-dot: #ffffff;
--admin-logout-bg: rgba(255, 255, 255, 0.12);
--admin-logout-border: rgba(255, 255, 255, 0.3);
--admin-logout-hover: rgba(255, 255, 255, 0.2);
--admin-save-bg: #ffffff;
--admin-save-border: #ffffff;
--admin-save-hover: #f3f4f6;
--admin-save-disabled-bg: rgba(255, 255, 255, 0.18);
--admin-save-disabled-border: transparent;
--admin-save-disabled-text: rgba(255, 255, 255, 0.55);
}

.admin-bar[data-status="saved"] {
--admin-bg: #18a14a;
--admin-text: #ffffff;
--admin-dot: #ffffff;
--admin-logout-bg: rgba(0, 0, 0, 0.14);
--admin-logout-border: rgba(0, 0, 0, 0.24);
--admin-logout-hover: rgba(0, 0, 0, 0.22);
}

.admin-bar[data-status="error"] {
--admin-bg: #b91c1c;
--admin-text: #ffffff;
--admin-dot: #ffffff;
--admin-logout-bg: rgba(0, 0, 0, 0.14);
--admin-logout-border: rgba(0, 0, 0, 0.24);
--admin-logout-hover: rgba(0, 0, 0, 0.22);
}

.admin-bar-left {
display: flex;
align-items: center;
gap: 0.6rem;
}

.admin-bar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--admin-dot);
animation: adminPulse 1.4s infinite;
flex-shrink: 0;
}

@keyframes adminPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.admin-bar-logout {
background: var(--admin-logout-bg);
border: 1px solid var(--admin-logout-border);
color: var(--admin-text);
padding: 0.35rem 0.9rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.8125rem;
cursor: pointer;
}

.admin-bar-logout:hover {
background: var(--admin-logout-hover);
}

.admin-bar-right {
display: flex;
align-items: center;
gap: 0.5rem;
}

.admin-bar-btn {
background: #1a1a1a;
border: 1px solid #1a1a1a;
color: #fff;
padding: 0.35rem 0.75rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.8125rem;
cursor: pointer;
white-space: nowrap;
}

.admin-bar-btn:hover:not(:disabled) {
background: #333;
}

.admin-bar-btn:disabled {
background: rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.4);
cursor: not-allowed;
}

.admin-bar-save {
  background: #18a14a;
  border-color: #18a14a;
  color: #fff;
}

.admin-bar-save:hover:not(:disabled) {
  background: #149a41;
}

.admin-bar-save:disabled {
background: var(--admin-save-disabled-bg);
border-color: var(--admin-save-disabled-border);
color: var(--admin-save-disabled-text);
}

.admin-bar-status {
font-weight: 500;
font-size: 0.75rem;
opacity: 0.8;
}

.admin-editing-text {
outline: 1px dashed rgba(245, 158, 11, 0.6);
outline-offset: 2px;
cursor: text;
border-radius: 2px;
transition: outline-color 0.15s ease, background-color 0.15s ease;
}

.admin-editing-text:hover {
outline-color: rgba(245, 158, 11, 0.9);
background-color: rgba(245, 158, 11, 0.06);
}

.admin-editing-text:focus {
outline: 2px solid #18a14a;
outline-offset: 2px;
background-color: rgba(24, 161, 74, 0.06);
}

.admin-editable-wrapper {
position: relative;
}

body.admin-mode .admin-editable-wrapper img {
outline: 2px dashed rgba(245, 158, 11, 0.75);
outline-offset: -2px;
}

.admin-edit-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(24, 161, 74, 0.95);
border: 2px solid #fff;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
z-index: 10;
transition: transform 0.15s ease, background 0.15s ease;
padding: 0;
}

body.admin-mode .admin-edit-btn {
display: flex;
}

.admin-edit-btn:hover {
background: #149a41;
transform: scale(1.08);
}

.admin-edit-btn svg {
width: 16px;
height: 16px;
stroke: #fff;
}

.admin-image-status {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
right: 0.5rem;
background: rgba(16, 48, 87, 0.92);
color: #fff;
font-family: 'Barlow', sans-serif;
font-size: 0.75rem;
font-weight: 500;
padding: 0.4rem 0.6rem;
border-radius: 4px;
z-index: 11;
}

.admin-image-status-error {
background: rgba(185, 28, 28, 0.92);
}

/* ============================================================
   ADMIN BAR — MOBILE  (max-width: 767px)
   Keeps the full status text and both buttons (nothing is hidden
   behind icons), but stacks them into two rows with bigger tap
   targets and legible text sizes for elderly users on small screens.
   Desktop layout above is untouched.
   ============================================================ */
@media (max-width: 767px) {

  /* Bar becomes taller (two rows) — push the page content and the
     sticky navbar down to match, so nothing sits underneath it. */
  body.admin-mode {
    padding-top: 160px;
  }

  body.admin-mode #navbar {
    top: 155px;
  }

  .admin-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }

  /* Row 1: status dot + "ADMIN-MODUS AKTIV" + save-state text,
     left-aligned, allowed to wrap if a translation runs long. */
  .admin-bar-left {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 0.75rem;
  }

  .admin-bar-status {
    font-size: 0.75rem;
  }

  /* Row 2: both buttons, full width, stacked — large enough to tap
     comfortably and the label text stays big enough to read easily. */
  .admin-bar-right {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .admin-bar-btn,
  .admin-bar-logout {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    font-size: 0.9375rem;
    min-height: 44px;
  }
}

.admin-fit-controls {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  gap: 6px;
  z-index: 5;
}
body.admin-mode .admin-editable-wrapper .admin-fit-controls { display: flex; }
.admin-fit-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  background: rgba(16, 48, 87, 0.85);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.admin-fit-btn:hover { background: rgba(16, 48, 87, 1); }
.admin-fit-btn.active { background: var(--green); }