/* ── FotoArchiv 2.1 – Dark Mode Default, Clean & Professional ─────────────── */
/* ════════════════════════════ TOKENS ════════════════════════════════════ */
:root {
  /* Dark Mode ist Standard */
  --bg:       #0F1117;
  --surf:     #181C27;
  --surf2:    #1E2435;
  --surf3:    #242D42;
  --brd:      #2A3349;
  --brd2:     #37415B;

  --txt:      #EEF0F5;
  --txt2:     #8B95AE;
  --txt3:     #4B5574;

  --pri:      #4F7FFF;
  --pri-h:    #6B96FF;
  --pri-f:    rgba(79,127,255,.12);
  --pri-g:    rgba(79,127,255,.28);

  --ok:       #34D399;
  --ok-bg:    rgba(52,211,153,.1);
  --warn:     #FBBF24;
  --warn-bg:  rgba(251,191,36,.1);
  --err:      #F87171;
  --err-bg:   rgba(248,113,113,.1);

  /* Radien – einheitlich */
  --r1:  4px;
  --r2:  8px;
  --r3:  12px;
  --r4:  16px;
  --r5:  20px;

  --sh1: 0 1px 4px rgba(0,0,0,.45);
  --sh2: 0 4px 20px rgba(0,0,0,.55);
  --sh3: 0 16px 52px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);

  --dur: 150ms;
  --hdr: 60px;
}

[data-theme="light"] {
  --bg:       #F2F5FB;
  --surf:     #FFFFFF;
  --surf2:    #EFF2F8;
  --surf3:    #E5E9F2;
  --brd:      #DDE3EF;
  --brd2:     #C8D1E3;

  --txt:      #0D1117;
  --txt2:     #5A6480;
  --txt3:     #9AA4BC;

  --pri:      #2563EB;
  --pri-h:    #1D55D0;
  --pri-f:    rgba(37,99,235,.08);
  --pri-g:    rgba(37,99,235,.22);

  --ok:       #059669;  --ok-bg:   rgba(5,150,105,.08);
  --warn:     #D97706;  --warn-bg: rgba(217,119,6,.08);
  --err:      #DC2626;  --err-bg:  rgba(220,38,38,.08);

  --sh1: 0 1px 4px rgba(0,0,0,.08);
  --sh2: 0 4px 20px rgba(0,0,0,.1);
  --sh3: 0 16px 52px rgba(0,0,0,.14);
}

/* ════════════════════════════ RESET ═════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--txt);
  min-height: 100vh; line-height: 1.55;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; image-orientation: from-image; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; line-height: 1; }
input, select { font-family: inherit; font-size: inherit; color: inherit; background: transparent; border: none; outline: none; }

/* ════════════════════════════ UTILS ═════════════════════════════════════ */
.hidden  { display: none !important; }
.truncate{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txt-2   { color: var(--txt2); }
.txt-err { color: var(--err); }
.txt-ok  { color: var(--ok); }
.txt-pri { color: var(--pri); }
.fw6     { font-weight: 600; }
.fw7     { font-weight: 700; }
.fs-sm   { font-size: .875rem; }
.fs-xs   { font-size: .75rem; }

/* ════════════════════════════ FORM ══════════════════════════════════════ */
.field        { margin-bottom: 1.1rem; }
.field-lbl    { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .07em;
                text-transform: uppercase; color: var(--txt2); margin-bottom: .4rem; }
.field-inp,
.field-sel    { display: block; width: 100%; padding: .7rem 1rem;
                background: var(--surf2); border: 1.5px solid var(--brd);
                border-radius: var(--r2); font-size: .95rem; color: var(--txt);
                transition: border-color var(--dur), box-shadow var(--dur); }
.field-inp:focus, .field-sel:focus {
  border-color: var(--pri); background: var(--surf);
  box-shadow: 0 0 0 3px var(--pri-f);
}
.field-inp::placeholder { color: var(--txt3); }
.field-sel { appearance: none; cursor: pointer; }
.field-hint { font-size: .78rem; color: var(--txt3); margin-top: .3rem; }

/* ════════════════════════════ BUTTONS ══════════════════════════════════ */
/* ALLE Buttons haben var(--r2) = 8px – keine Ausnahme */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.2rem;
  border-radius: var(--r2);  /* 8px überall */
  font-size: .9rem; font-weight: 600; font-family: inherit;
  line-height: 1; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  min-height: 44px;          /* Touch-freundlich */
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background var(--dur), border-color var(--dur),
              box-shadow var(--dur), transform var(--dur), opacity var(--dur);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-pri   { background: var(--pri);   color: #fff; border-color: var(--pri); }
.btn-pri:hover   { background: var(--pri-h); border-color: var(--pri-h); box-shadow: 0 4px 16px var(--pri-g); }

.btn-sec   { background: var(--surf2); color: var(--txt); border-color: var(--brd); }
.btn-sec:hover   { background: var(--surf3); border-color: var(--brd2); }

.btn-save-outline {
  background: transparent;
  color: var(--pri);
  border-color: var(--pri);
}
.btn-save-outline:hover {
  background: var(--pri);
  color: #fff;
  box-shadow: 0 4px 14px var(--pri-g);
}

.btn-err   { background: transparent; color: var(--err); border-color: var(--err); }
.btn-err:hover   { background: var(--err); color: #fff; box-shadow: 0 4px 14px rgba(248,113,113,.3); }

.btn-warn  { background: var(--warn-bg); color: var(--warn); border-color: rgba(251,191,36,.3); }
.btn-warn:hover  { background: var(--warn); color: #000; }

.btn-ghost { background: transparent; color: var(--txt2); border-color: transparent; min-height: 40px; }
.btn-ghost:hover { background: var(--surf2); color: var(--txt); }

.btn-sm   { padding: .5rem .85rem; font-size: .82rem; min-height: 38px; }
.btn-lg   { padding: .85rem 1.5rem; font-size: 1rem;  min-height: 52px; }
.btn-full { width: 100%; }
.btn-icon { padding: .6rem; aspect-ratio: 1; min-height: 40px; min-width: 40px; }

/* ════════════════════════════ HEADER ════════════════════════════════════ */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.hdr {
  position: sticky; top: 0; z-index: 100;
  height: var(--hdr); background: var(--surf);
  border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem;
}
.hdr-logo {
  font-size: 1.1rem; font-weight: 700; color: var(--pri);
  letter-spacing: -.02em;
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
.hdr-logo svg { width: 22px; height: 22px; }

.hdr-mode {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem;
  border-radius: 12px;
  border: 1.5px solid var(--brd);
  background: var(--surf2);
}
.mode-btn {
  min-height: 34px;
  min-width: 106px;
  padding: .42rem .8rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--txt2);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.mode-btn:hover {
  color: var(--txt);
}
.mode-btn.is-active {
  background: var(--pri);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 78, 216, .28);
}
@media (max-width: 640px) {
  .hdr-mode {
    flex: 1 1 auto;
  }
  .mode-switch {
    width: 100%;
  }
  .mode-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: .3rem;
    padding-right: .3rem;
    font-size: .76rem;
  }
}

.bc { display: flex; align-items: center; gap: .25rem; font-size: .85rem; color: var(--txt2); overflow: hidden; flex: 1; min-width: 0; }
.bc-i  { cursor: pointer; flex-shrink: 0; white-space: nowrap; padding: .25rem .1rem; border-radius: var(--r1); transition: color var(--dur); }
.bc-i:hover { color: var(--pri); }
.bc-s  { color: var(--txt3); flex-shrink: 0; }
.bc-c  { color: var(--txt); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hdr-r { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto; }

.theme-btn {
  width: 38px; height: 38px; border-radius: var(--r2);
  background: var(--surf2); border: 1.5px solid var(--brd);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all var(--dur); cursor: pointer;
}
.theme-btn:hover { border-color: var(--pri); }

.hdr-settings {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.settings-btn {
  width: 36px; height: 36px; border-radius: var(--r2);
  background: var(--surf2); border: 1.5px solid var(--brd);
  color: var(--txt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.settings-btn:hover,
.hdr-settings.open .settings-btn {
  border-color: var(--pri);
  background: var(--surf);
  box-shadow: 0 0 0 3px var(--pri-f);
}

.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, 88vw);
  padding: .6rem;
  border-radius: 14px;
  border: 1px solid var(--brd2);
  background: rgba(10, 18, 33, .98);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .36);
  display: none;
  z-index: 280;
}
.hdr-settings.open .settings-menu {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  animation: fadeIn .12s ease;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.settings-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--txt2);
  line-height: 1.2;
}
.settings-theme-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-shrink: 0;
}
.settings-lang {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
}

@media (max-width: 640px) {
  .settings-menu {
    width: min(300px, 92vw);
  }
  .settings-lang {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
  }
}

.lang-select {
  min-height: 38px;
  padding: .35rem .8rem;
  border-radius: var(--r2);
  border: 1.5px solid var(--brd);
  background: var(--surf2);
  color: var(--txt);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
  appearance: none;
}
.lang-select:hover,
.lang-select:focus {
  border-color: var(--pri);
  background: var(--surf);
  box-shadow: 0 0 0 3px var(--pri-f);
}
.hdr-lang {
  width: 126px;
  min-width: 126px;
  max-width: 126px;
}
@media (max-width: 640px) {
  .hdr-lang {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    padding-left: .55rem;
    padding-right: .55rem;
  }
}

.lang-select.is-enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
}
.lang-picker-hdr {
  width: 126px;
  min-width: 126px;
  max-width: 126px;
}
.lang-picker-login {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
}

.lang-picker-btn {
  width: 100%;
  min-height: 38px;
  padding: .35rem .72rem;
  border-radius: var(--r2);
  border: 1.5px solid var(--brd);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--txt);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur), transform var(--dur);
}
.lang-picker-btn:hover,
.lang-picker.open .lang-picker-btn {
  border-color: var(--pri);
  background: var(--surf);
  box-shadow: 0 0 0 3px var(--pri-f);
}
.lang-picker-btn:focus-visible {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-f);
}

.lang-picker-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-picker-btn-chev {
  font-size: .68rem;
  opacity: .78;
  transition: transform var(--dur), opacity var(--dur);
}
.lang-picker.open .lang-picker-btn-chev {
  transform: rotate(180deg);
  opacity: 1;
}

.lang-picker-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: .32rem;
  border-radius: 12px;
  border: 1px solid var(--brd2);
  background: rgba(10, 18, 33, .98);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .36);
  display: none;
  z-index: 260;
}
.lang-picker.open .lang-picker-menu {
  display: block;
  animation: fadeIn .12s ease;
}

.lang-picker-opt {
  width: 100%;
  min-height: 34px;
  padding: .42rem .58rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt);
  text-align: left;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.lang-picker-opt:hover {
  background: var(--pri-f);
  border-color: rgba(47, 128, 255, .34);
}
.lang-picker-opt.is-active {
  background: var(--pri-f);
  border-color: rgba(47, 128, 255, .62);
  color: var(--txt);
}

[data-theme="light"] .lang-picker-btn {
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}
[data-theme="light"] .lang-picker-menu {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(18, 35, 61, .14);
  box-shadow: 0 14px 28px rgba(28, 45, 74, .18);
}
[data-theme="light"] .settings-menu {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(18, 35, 61, .14);
  box-shadow: 0 14px 28px rgba(28, 45, 74, .18);
}

.offline-sync-status {
  display: none;
  align-items: center;
  min-height: 38px;
  width: min(940px, calc(100% - 2rem));
  margin: .75rem auto 0;
  padding: .55rem .75rem;
  border-radius: var(--r2);
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(15, 23, 42, .84);
  color: var(--txt);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.25;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .18);
}
.offline-sync-status.is-visible { display: flex; }
body.camera-open .offline-sync-status.is-visible {
  display: none;
}
.offline-sync-status.is-offline,
.offline-sync-status.is-pending {
  border-color: rgba(251, 191, 36, .42);
  background: rgba(83, 59, 14, .86);
  color: #fff7d6;
}
.offline-sync-status.is-uploading {
  border-color: rgba(47, 128, 255, .48);
  background: rgba(16, 45, 94, .88);
  color: #e6f0ff;
}
[data-theme="light"] .offline-sync-status {
  background: rgba(255, 255, 255, .96);
  color: #172033;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
}
[data-theme="light"] .offline-sync-status.is-offline,
[data-theme="light"] .offline-sync-status.is-pending {
  background: #fff6d7;
  color: #5f4105;
}
[data-theme="light"] .offline-sync-status.is-uploading {
  background: #e8f1ff;
  color: #123f7f;
}

.pc-save-status {
  display: none;
  width: min(940px, calc(100% - 2rem));
  margin: .5rem auto 0;
  padding: .58rem .75rem .62rem;
  border-radius: var(--r2);
  border: 1px solid rgba(47, 128, 255, .48);
  background: rgba(16, 45, 94, .9);
  color: #e6f0ff;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .18);
}
.pc-save-status.is-visible {
  display: block;
}
body.camera-open .pc-save-status.is-visible {
  display: none;
}
.pc-save-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-width: 0;
}
.pc-save-status-text {
  min-width: 0;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.25;
}
.pc-save-status-count {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1;
  opacity: .9;
}
.pc-save-status-bar {
  height: 4px;
  margin-top: .5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}
.pc-save-status-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #7dd3fc;
  transition: width .22s ease;
}
.pc-save-status-fill.is-indeterminate {
  width: 42% !important;
  animation: pcSaveIndeterminate 1.2s ease-in-out infinite;
}
.pc-save-status.is-done {
  border-color: rgba(52, 211, 153, .52);
  background: rgba(19, 78, 74, .9);
  color: #d8fff2;
}
.pc-save-status.is-done .pc-save-status-fill {
  background: #34d399;
}
.pc-save-status.is-warn {
  border-color: rgba(251, 191, 36, .52);
  background: rgba(83, 59, 14, .9);
  color: #fff7d6;
}
.pc-save-status.is-warn .pc-save-status-fill {
  background: #fbbf24;
}
.pc-save-status.is-error {
  border-color: rgba(248, 113, 113, .54);
  background: rgba(127, 29, 29, .9);
  color: #ffe3e3;
}
.pc-save-status.is-error .pc-save-status-fill {
  background: #f87171;
}
[data-theme="light"] .pc-save-status {
  background: #e8f1ff;
  color: #123f7f;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
}
[data-theme="light"] .pc-save-status.is-done {
  background: #dcfce7;
  color: #14532d;
}
[data-theme="light"] .pc-save-status.is-warn {
  background: #fff6d7;
  color: #5f4105;
}
[data-theme="light"] .pc-save-status.is-error {
  background: #fee2e2;
  color: #7f1d1d;
}

@keyframes pcSaveIndeterminate {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(55%); }
  100% { transform: translateX(240%); }
}

.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  width: min(940px, calc(100% - 1.25rem));
  min-height: 52px;
  padding: .68rem .78rem .68rem .92rem;
  transform: translateX(-50%);
  border: 1px solid rgba(251, 191, 36, .48);
  border-radius: var(--r2);
  background: rgba(83, 59, 14, .94);
  color: #fff7d6;
  box-shadow: 0 16px 36px rgba(2, 6, 23, .34);
}
.app-update-banner.is-visible { display: flex; }
.app-update-copy {
  min-width: 0;
  display: grid;
  gap: .12rem;
  line-height: 1.22;
}
.app-update-title {
  font-size: .86rem;
  font-weight: 850;
}
.app-update-text {
  font-size: .78rem;
  font-weight: 650;
}
.app-update-action {
  flex: 0 0 auto;
  min-height: 38px;
  padding: .52rem .72rem;
  border: 0;
  border-radius: var(--r2);
  background: #ffffff;
  color: #4b3304;
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
}
.app-update-action:disabled {
  cursor: wait;
  opacity: .72;
}
[data-theme="light"] .app-update-banner {
  background: #fff6d7;
  color: #5f4105;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
[data-theme="light"] .app-update-action {
  background: #5f4105;
  color: #fff7d6;
}
@media (max-width: 600px) {
  .offline-sync-status {
    width: calc(100% - 1.2rem);
    margin-top: .55rem;
    font-size: .78rem;
  }
  .pc-save-status {
    width: calc(100% - 1.2rem);
    margin-top: .45rem;
  }
  .pc-save-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .32rem;
  }
  .app-update-banner {
    align-items: stretch;
    flex-direction: column;
    gap: .62rem;
    width: calc(100% - 1rem);
    padding: .72rem;
  }
  .app-update-action {
    width: 100%;
  }
}

.avatar {
  width: 34px; height: 34px; border-radius: var(--r2);
  background: var(--pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: opacity var(--dur);
}
.avatar:hover { opacity: .82; }

/* ════════════════════════════ MAIN ══════════════════════════════════════ */
.main { flex: 1; padding: 1.5rem; max-width: 940px; margin: 0 auto; width: 100%; }
@media (max-width: 600px) { .main { padding: 1rem .875rem; } }

.ph  { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ph-title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.025em; flex: 1; line-height: 1.3; }
.ph-acts  { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ════════════════════════════ CARD ══════════════════════════════════════ */
.card {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--r4); overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.card-body { padding: 1.1rem 1.15rem; }
.card-foot {
  padding: .75rem 1.15rem;
  border-top: 1px solid var(--brd); background: var(--surf2);
  display: flex; gap: .45rem; flex-wrap: wrap; align-items: center;
  /* FIX: untere Ecken explizit runden damit overflow:hidden korrekt greift */
  border-radius: 0 0 var(--r4) var(--r4);
}

/* ════════════════════════════ PROJEKT-GRID ══════════════════════════════ */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; gap: .75rem; } }

.fcard { cursor: pointer; border-radius: var(--r4); }
.fcard:hover { border-color: var(--pri); box-shadow: 0 0 0 1px var(--pri), var(--sh2); transform: translateY(-2px); }
.fcard:active { transform: translateY(0); }

.fplan { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--surf2); }
.fplan-ph {
  width: 100%; aspect-ratio: 16/9; background: var(--surf2);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt3); font-size: 3rem;
}
.fname  { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.3; }
.fmeta  { font-size: .8rem; color: var(--txt2); display: flex; gap: .75rem; flex-wrap: wrap; }
.fdate  { font-size: .74rem; color: var(--txt3); margin-top: .2rem; }

/* ════════════════════════════ GRUPPEN ═══════════════════════════════════ */
.glist { display: flex; flex-direction: column; gap: .6rem; }

.gcard {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--r4); overflow: hidden;
  cursor: pointer; transition: all var(--dur);
  /* FIX: isolation verhindert Rendering-Bugs mit border-radius + overflow */
  isolation: isolate;
}
.gcard:hover  { border-color: var(--pri); box-shadow: var(--sh1); }
.gcard:active { transform: scale(.99); }

.gcard-in { padding: 1rem 1.15rem; display: flex; align-items: center; gap: .9rem; }
.gicon {
  width: 48px; height: 48px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
/* SVG-Icons in Gruppen */
.gicon svg { width: 26px; height: 26px; }
.gi-s svg  { color: #FBBF24; }
.gi-r svg  { color: #4F7FFF; }
.gi-o svg  { color: #F87171; }
.gi-g svg  { color: #34D399; }
.gi-c svg  { color: #A78BFA; }
.gi-x svg  { color: #8B95AE; }
/* gchoice icon size */
.gchoice-ic svg { width: 32px; height: 32px; }
.ginfo { flex: 1; min-width: 0; }
.gname { font-weight: 600; font-size: .95rem; }
.gdesc { font-size: .8rem; color: var(--txt2); margin-top: .15rem; }
.gcnt  { font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--r1); background: var(--pri-f); color: var(--pri); white-space: nowrap; flex-shrink: 0; }
.gchev { color: var(--txt3); font-size: .9rem; margin-left: .2rem; }

/* Icon-Farben */
.gi-s { background: rgba(251,191,36,.12); }
.gi-r { background: rgba(79,127,255,.12); }
.gi-o { background: rgba(248,113,113,.12); }
.gi-g { background: rgba(52,211,153,.12); }
.gi-c { background: rgba(167,139,250,.12); }
.gi-x { background: rgba(139,149,174,.12); }

[data-theme="light"] .gi-s { background: #FEF9E7; }
[data-theme="light"] .gi-r { background: #EFF6FF; }
[data-theme="light"] .gi-o { background: #FFF1F2; }
[data-theme="light"] .gi-g { background: #ECFDF5; }
[data-theme="light"] .gi-c { background: #F5F3FF; }
[data-theme="light"] .gi-x { background: #F9FAFB; }

/* ════════════════════════════ TABS ══════════════════════════════════════ */
.tabs {
  display: flex; gap: .3rem; border-bottom: 2px solid var(--brd);
  margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .65rem 1.1rem; font-size: .88rem; font-weight: 500;
  color: var(--txt2); border-bottom: 2px solid transparent;
  margin-bottom: -2px; white-space: nowrap; cursor: pointer;
  border-radius: var(--r2) var(--r2) 0 0;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.tab:hover  { color: var(--txt); background: var(--surf2); }
.tab.on     { color: var(--pri); border-bottom-color: var(--pri); }

/* ════════════════════════════ FOTO-GRID ═════════════════════════════════ */
.pgrid {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.pitem {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--r3); overflow: hidden;
  animation: fadeIn .25s ease;
}
.pthumb {
  width: 100%; aspect-ratio: var(--photo-aspect-ratio, 16/9); object-fit: contain; object-position: center center;
  display: block; background: var(--surf2); cursor: pointer;
  transition: opacity var(--dur);
  min-height: 140px;
}
.pthumb:hover { opacity: .88; }
.pthumb.is-loading {
  opacity: .72;
  filter: saturate(.78);
}
.pthumb.is-ready {
  opacity: 1;
  filter: none;
}
.pfoot {
  padding: .6rem .75rem; display: flex; align-items: center; gap: .4rem;
  min-height: 44px;
}
.pnum {
  font-size: .72rem; font-weight: 700;
  background: var(--pri-f); color: var(--pri);
  border-radius: var(--r1); padding: .12rem .4rem; flex-shrink: 0;
}
.pdel {
  margin-left: auto; width: 30px; height: 30px;
  border-radius: var(--r1);
  color: var(--txt3); display: flex; align-items: center; justify-content: center;
  font-size: .82rem; transition: all var(--dur); background: transparent;
  cursor: pointer;
}
.pdel:hover { background: var(--err-bg); color: var(--err); }

/* ════════════════════════════ FAB ═══════════════════════════════════════ */
.fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--pri); color: #fff; font-size: 1.6rem;
  box-shadow: 0 6px 24px var(--pri-g), var(--sh2);
  display: flex; align-items: center; justify-content: center;
  z-index: 90; border: none; cursor: pointer;
  transition: transform var(--dur), box-shadow var(--dur);
  -webkit-tap-highlight-color: transparent;
}
.fab:hover  { transform: scale(1.07); box-shadow: 0 8px 32px var(--pri-g); }
.fab:active { transform: scale(.93); }

/* ════════════════════════════ OVERLAY + MODAL ═══════════════════════════ */
.ov {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.68); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: fadeIn .15s ease;
}
.modal {
  background: var(--surf); border: 1px solid var(--brd2);
  border-radius: var(--r5); padding: 1.75rem;
  width: min(480px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sh3); animation: fadeUp .2s ease;
}
.modal-sm { max-width: 360px; }
.modal-lg { max-width: 580px; }

.mhdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.mtitle { font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; }
.mclose {
  width: 32px; height: 32px; border-radius: var(--r2);
  color: var(--txt2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur); background: transparent; font-size: 1rem;
}
.mclose:hover { background: var(--err-bg); color: var(--err); }
.mfoot { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.3rem; flex-wrap: wrap; }

/* ── CONFIRM-DIALOG ─────────────────────────────────────────────── */
.cfm-icon {
  width: 54px; height: 54px; border-radius: var(--r3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin: 0 auto 1rem;
}
.cfm-icon.err  { background: var(--err-bg); }
.cfm-icon.warn { background: var(--warn-bg); }
.cfm-icon.info { background: var(--pri-f); }
.cfm-title { font-size: 1.05rem; font-weight: 700; text-align: center; margin-bottom: .5rem; }
.cfm-msg   { font-size: .88rem; color: var(--txt2); text-align: center; line-height: 1.55; }

/* ── NUMMER-DIALOG ──────────────────────────────────────────────── */
.num-hint { font-size: .88rem; color: var(--txt2); text-align: center; margin-bottom: .75rem; line-height: 1.55; }
.num-big  {
  width: 100%; padding: .9rem; font-size: 2rem; font-weight: 700; text-align: center;
  background: var(--surf2); border: 2px solid var(--brd); border-radius: var(--r2);
  color: var(--txt);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.num-big:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-f); }

/* ── GRUPPEN-WAHL ───────────────────────────────────────────────── */
.gchoices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .25rem; }
@media (max-width: 400px) { .gchoices { grid-template-columns: 1fr; } }
.gchoice {
  padding: .9rem .75rem; border: 1.5px solid var(--brd);
  border-radius: var(--r2); cursor: pointer; text-align: center;
  transition: all var(--dur); display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: var(--surf2); min-height: 80px;
}
.gchoice:hover   { border-color: var(--pri); background: var(--pri-f); }
.gchoice.sel     { border-color: var(--pri); background: var(--pri-f); box-shadow: 0 0 0 1px var(--pri); }
.gchoice-ic      { font-size: 1.7rem; }
.gchoice-lbl     { font-size: .82rem; font-weight: 600; }
.group-no-seil-wrap {
  display: grid;
  grid-template-columns: minmax(11ch, 14ch) auto minmax(8ch, 10ch);
  gap: .5rem;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  justify-content: start;
}
.group-no-seil-wrap .field-inp {
  min-width: 0;
  width: 100%;
}
.seil-slash-btn {
  width: 2.4rem;
  min-width: 2.4rem;
  height: 44px;
  padding: 0;
  border: 1px solid var(--brd);
  border-radius: var(--r2);
  background: var(--surf2);
  color: var(--txt2);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur), box-shadow var(--dur), color var(--dur);
}
.seil-slash-btn:hover {
  border-color: var(--pri);
  color: var(--pri);
}
.seil-slash-btn:focus-visible {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-f);
}

@media (max-width: 560px) {
  .group-no-seil-wrap {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, .82fr);
  }
}

/* ── PLAN-ZONE ──────────────────────────────────────────────────── */
.plan-zone {
  border: 2px dashed var(--brd); border-radius: var(--r2);
  padding: 1.1rem; text-align: center; cursor: pointer;
  font-size: .88rem; color: var(--txt2); background: var(--surf2);
  transition: all var(--dur);
  width: 100%;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  min-height: 50px; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.plan-zone:hover { border-color: var(--pri); color: var(--pri); background: var(--pri-f); }
.plan-prev {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r2); border: 1px solid var(--brd);
  display: block; margin-top: .6rem;
}

/* ════════════════════════════ TOAST ═════════════════════════════════════ */
#toasts {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: .4rem;
  pointer-events: none; width: min(380px, 90vw);
}
.toast {
  background: var(--surf); border: 1px solid var(--brd2); color: var(--txt);
  padding: .7rem 1rem; border-radius: var(--r2);
  font-size: .88rem; font-weight: 500; box-shadow: var(--sh3);
  animation: toastIn .2s ease; pointer-events: all;
  display: flex; align-items: center; gap: .55rem;
}
.tic { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; }
.toast.ok  .tic { background: var(--ok);   color: #000; }
.toast.err .tic { background: var(--err);  color: #fff; }
.toast.wn  .tic { background: var(--warn); color: #000; }
.toast.ok  { border-left: 3px solid var(--ok); }
.toast.err { border-left: 3px solid var(--err); }
.toast.wn  { border-left: 3px solid var(--warn); }

/* ════════════════════════════ BADGE ════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: .2rem; padding: .18rem .55rem; border-radius: var(--r1); font-size: .73rem; font-weight: 600; }
.b-blue  { background: var(--pri-f);  color: var(--pri); }
.b-ok    { background: var(--ok-bg);  color: var(--ok); }
.b-gray  { background: var(--surf2);  color: var(--txt2); border: 1px solid var(--brd); }
.b-warn  { background: var(--warn-bg); color: var(--warn); }
.b-admin { background: rgba(251,191,36,.12); color: var(--warn); }

/* ════════════════════════════ TABLE ════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: .55rem .9rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--txt2); border-bottom: 1.5px solid var(--brd); }
.tbl td { padding: .75rem .9rem; border-bottom: 1px solid var(--brd); font-size: .88rem; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surf2); }

/* ════════════════════════════ CTX-MENU ═════════════════════════════════ */
.ctx {
  position: fixed; z-index: 150;
  background: var(--surf); border: 1px solid var(--brd2);
  border-radius: var(--r3); box-shadow: var(--sh3);
  min-width: 190px; overflow: hidden; animation: fadeUp .15s ease;
}
.ctx-i {
  width: 100%; padding: .75rem 1.1rem; text-align: left;
  font-size: .88rem; font-weight: 500;
  display: flex; align-items: center; gap: .6rem;
  min-height: 46px; background: transparent; color: var(--txt);
  cursor: pointer; border-radius: 0;
  transition: background var(--dur);
}
.ctx-i:hover { background: var(--surf2); }
.ctx-i.err { color: var(--err); }
.ctx-i.err:hover { background: var(--err-bg); }
.ctx-sep { height: 1px; background: var(--brd); }

/* ════════════════════════════ EMPTY ════════════════════════════════════ */
.empty { text-align: center; padding: 3.5rem 1.5rem; color: var(--txt2); }
.empty-ic { font-size: 3rem; margin-bottom: .8rem; opacity: .35; }
.empty-t  { font-size: .95rem; font-weight: 500; }
.empty-s  { font-size: .82rem; margin-top: .35rem; color: var(--txt3); }

/* ════════════════════════════ LOGIN ════════════════════════════════════ */
#login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 1rem;
  background-image: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(79,127,255,.12) 0%, transparent 65%);
}
.login-card {
  width: min(390px, 100%); background: var(--surf); border: 1px solid var(--brd2);
  border-radius: var(--r5); padding: 2.25rem 2rem;
  box-shadow: var(--sh3); animation: fadeUp .3s ease;
}
.login-lang {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .85rem;
}
.login-lang .lang-select {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
}
.login-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.login-icon  { width: 42px; height: 42px; background: var(--pri); border-radius: var(--r2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.login-name  { font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; }
.login-sub   { font-size: .85rem; color: var(--txt2); margin-bottom: 1.75rem; }
.login-err   { background: var(--err-bg); color: var(--err); border: 1px solid rgba(248,113,113,.25); border-radius: var(--r2); padding: .65rem .9rem; font-size: .85rem; margin-bottom: 1rem; display: none; }

/* ════════════════════════════ LIGHTBOX ═════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.93);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 1rem; animation: fadeIn .15s ease;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.lb-stage {
  width: min(100%, 1420px);
  height: 80vh;
  max-height: 80vh;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
.lb-track {
  --lb-drag-x: 0px;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(-100% + var(--lb-drag-x)), 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.lb-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
}
.lb-slide.is-empty {
  visibility: hidden;
}
.lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r2);
  opacity: var(--lb-swipe-opacity, 1);
  transform: translate3d(var(--lb-swipe-x, 0px), 0, 0) scale(var(--lb-swipe-scale, 1));
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform, opacity;
}
.lb-stage .lb-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
  user-select: none;
}
.lb-nav:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.52);
}
.lb-nav:active { transform: translateY(-50%) scale(.97); }
.lb-nav:disabled,
.lb-nav.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-50%);
}
.lb-nav-left { left: 1.05rem; }
.lb-nav-right { right: 1.05rem; }
.lb-count {
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.lb-x {
  position: fixed; top: 1rem; right: 1rem;
  width: 42px; height: 42px; background: rgba(255,255,255,.12);
  border-radius: var(--r2); color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 360;
  pointer-events: auto;
  cursor: pointer; transition: background var(--dur);
}
.lb-x:hover { background: rgba(255,255,255,.25); }
.lb-dl {
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: .6rem 1.25rem; border-radius: var(--r2);
  font-size: .9rem; font-weight: 500; cursor: pointer; min-height: 44px;
  transition: background var(--dur);
}
.lb-dl:hover { background: rgba(255,255,255,.2); }

/* ════════════════════════════ PROGRESS ═════════════════════════════════ */
.pbar { width: 100%; height: 4px; border-radius: 2px; background: var(--surf2); overflow: hidden; margin: .5rem 0; }
.pfill { height: 100%; border-radius: 2px; background: var(--pri); transition: width .3s ease; }

/* ════════════════════════════ DIVIDER ══════════════════════════════════ */
.div { height: 1px; background: var(--brd); margin: 1.1rem 0; }

/* ════════════════════════════ ANIMATIONS ═══════════════════════════════ */
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pulse   { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ════════════════════════════ SCROLLBAR ════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 3px; }

/* ════════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 600px) {
  :root { --hdr: 56px; }
  .btn    { min-height: 48px; }
  .btn-sm { min-height: 42px; }
  .btn-icon { min-height: 44px; min-width: 44px; }
  .ph-title  { font-size: 1.2rem; }
  .modal  { padding: 1.25rem 1rem; border-radius: var(--r4); }
  .card-foot { justify-content: stretch; }
  .card-foot .btn { flex: 1; min-width: 0; }
}

/* ── PC-Only: nur auf Desktop sichtbar ───────────────────────────────────── */
/* Auf Touchgeräten und schmalen Bildschirmen ausblenden */
.pc-only { display: inline-flex; }

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .pc-only { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   PC-ONLY – nur auf Desktop sichtbar (Speichern-Button)
═════════════════════════════════════════════════════════════════════════ */
.pc-only { display: inline-flex; }
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .pc-only { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   ZURÜCK-BUTTON (in Gruppen-/Unterordner-Ansicht)
═════════════════════════════════════════════════════════════════════════ */
.back-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .45rem .85rem; border-radius: var(--r2);
  background: var(--surf2); border: 1.5px solid var(--brd);
  color: var(--txt2); font-size: .88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 40px; transition: all var(--dur); align-self: center; line-height: 1;
}
.back-btn:hover  { background: var(--surf3); border-color: var(--brd2); color: var(--txt); }
.back-btn:active { transform: scale(.96); }
.ph-main { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }

/* ════════════════════════════════════════════════════════════════════════
   SCREEN 1: LIVE-KAMERA VIEWFINDER
   Reiner Vollbild-Viewfinder, nur Auslöser. Sonst nichts.
═════════════════════════════════════════════════════════════════════════ */
.cam-live {
  position: fixed; inset: 0; z-index: 500;
  --cam-media-top: max(4rem, calc(3.35rem + env(safe-area-inset-top)));
  --cam-media-right: 0px;
  --cam-media-bottom: max(8.15rem, calc(7.55rem + env(safe-area-inset-bottom)));
  --cam-media-left: 0px;
  width: 100vw;
  height: var(--cam-viewport-height, 100dvh);
  min-height: var(--cam-viewport-height, 100dvh);
  max-height: var(--cam-viewport-height, 100dvh);
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}
.cam-video-placeholder {
  position: absolute;
  top: var(--cam-media-top);
  right: var(--cam-media-right);
  bottom: var(--cam-media-bottom);
  left: var(--cam-media-left);
  z-index: 0;
  background: var(--surf);
  pointer-events: none;
}
.cam-live:fullscreen,
.cam-live:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}
.cam-video {
  position: absolute;
  top: var(--cam-media-top);
  right: var(--cam-media-right);
  bottom: var(--cam-media-bottom);
  left: var(--cam-media-left);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
}
.cam-live.cam-stream-ready:not(.cam-mode-preview) .cam-video {
  opacity: 1;
}
.cam-live.cam-stream-ready .cam-video-placeholder {
  display: none;
}

/* Flash beim Auslösen */
.cam-live.cam-flash::after {
  content: ''; position: absolute; inset: 0;
  background: #fff; opacity: .7;
  animation: camFlash .18s ease-out forwards;
  pointer-events: none; z-index: 10;
}
@keyframes camFlash { from { opacity: .7; } to { opacity: 0; } }

/* X-Button oben rechts */
.cam-close-btn {
  position: absolute;
  top: max(.85rem, env(safe-area-inset-top)); right: 1rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.52); color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 6;
  border: 1.5px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); transition: background var(--dur);
}
.cam-close-btn:hover  { background: rgba(255,255,255,.18); }
.cam-close-btn:active { transform: scale(.9); }

/* Kamera-Wechsel oben links */
.cam-flip-btn {
  position: absolute;
  top: max(.85rem, env(safe-area-inset-top)); left: 1rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.52); color: #fff; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 6;
  border: 1.5px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); transition: all var(--dur);
}
.cam-flip-btn:active { transform: rotate(180deg) scale(.9); }

/* Nummern-Eingabe oben in der Kamera */
.cam-num-top {
  position: absolute;
  top: calc(max(.85rem, env(safe-area-inset-top)) + 58px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(86vw, 300px);
  padding: .45rem .55rem .55rem;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1.2px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.cam-num-label {
  font-size: .72rem;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cam-num-input-top {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: .38rem .55rem;
}
.cam-num-input-top:focus {
  outline: none;
  border-color: #9cc7ff;
  box-shadow: 0 0 0 3px rgba(79,127,255,.28);
}
.cam-num-input-top:disabled {
  opacity: .65;
}

/* Auslöser – großer weißer Kreis unten mittig */
.cam-shutter-wrap {
  position: absolute;
  bottom: max(2.5rem, calc(1.5rem + env(safe-area-inset-bottom)));
  left: 50%; transform: translateX(-50%);
  z-index: 6;
}
.cam-shutter {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 4px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .1s, background .1s;
  backdrop-filter: blur(4px);
}
.cam-shutter:active { transform: scale(.87); background: rgba(255,255,255,.3); }
.cam-shutter-ring {
  width: 60px; height: 60px; border-radius: 50%; background: #fff;
  transition: transform .1s;
}
.cam-shutter:active .cam-shutter-ring { transform: scale(.9); }

/* Fehler-Box */
.cam-err {
  position: absolute; inset: 0; z-index: 7;
  background: rgba(0,0,0,.88);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; padding: 2rem; text-align: center; color: #fff;
}
.cam-err p { font-size: .95rem; line-height: 1.6; max-width: 300px; opacity: .85; }
.cam-err-hint { font-size: .8rem !important; opacity: .7 !important; max-width: 320px !important; margin-top: .5rem; }
.cam-err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.cam-err-actions .btn {
  min-width: 152px;
}

/* ════════════════════════════════════════════════════════════════════════
   SCREEN 2: REVIEW / FOTO-VORSCHAU
   Layout (von oben nach unten):
     1. Unterordner-Tabs
     2. Zurück-Button + Status
     3. Foto (füllt freien Platz)
     4. Nummer-Feld (optional)
     5. [Neues Foto] [Weiter] Buttons
═════════════════════════════════════════════════════════════════════════ */
.rev-screen {
  position: fixed; inset: 0; z-index: 500;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 1. Tabs (Typenschild / Endschloss / Übersicht …) ── */
.rev-tabs {
  display: flex; gap: 0;
  background: var(--surf);
  border-bottom: 2px solid var(--brd);
  overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0;
}
.rev-tabs::-webkit-scrollbar { display: none; }
.rev-tab {
  padding: .7rem 1.2rem;
  font-size: .88rem; font-weight: 600;
  color: var(--txt2);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap; cursor: pointer;
  background: transparent;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
  min-height: 48px;
  display: flex; align-items: center;
}
.rev-tab:hover  { color: var(--txt); background: var(--surf2); }
.rev-tab.active { color: var(--pri); border-bottom-color: var(--pri); }

/* ── 2. Zurück + Upload-Status ── */
.rev-back-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem;
  background: var(--surf); border-bottom: 1px solid var(--brd);
  flex-shrink: 0;
}
.rev-back {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .85rem; border-radius: var(--r2);
  background: var(--surf2); border: 1.5px solid var(--brd);
  color: var(--txt2); font-size: .88rem; font-weight: 600;
  cursor: pointer; min-height: 40px;
  transition: all var(--dur);
}
.rev-back:hover  { background: var(--surf3); color: var(--txt); }
.rev-back:active { transform: scale(.96); }

.rev-upload-status {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: var(--warn);
}
.rev-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); animation: pulse 1s ease-in-out infinite;
}
.rev-upload-status.done { color: var(--ok); }
.rev-upload-status.done .rev-status-dot { background: var(--ok); animation: none; }

/* ── 3. Foto-Vorschau (füllt gesamten freien Platz) ── */
.rev-photo-wrap {
  flex: 1; min-height: 0; overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] .rev-photo-wrap {
  background: #edf2fa;
}
.rev-photo {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* ── 4. Nummer-Feld ── */
.rev-num-row {
  flex-shrink: 0;
  padding: .65rem 1rem;
  background: var(--surf); border-top: 1px solid var(--brd);
  display: flex; flex-direction: column; gap: .25rem;
}
.rev-num-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.rev-num-label {
  margin: 0;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--txt3);
}
.rev-num-toggle {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brd);
  border-radius: 999px;
  background: var(--surf2);
  color: var(--txt2);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--dur), border-color var(--dur), color var(--dur), background var(--dur);
}
.rev-num-toggle:hover {
  border-color: var(--pri);
  color: var(--pri);
}
.rev-num-toggle:focus-visible {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-f);
}
.rev-num-row.expanded .rev-num-toggle {
  transform: rotate(180deg);
}
.rev-num-row.collapsed .rev-num-toggle {
  transform: rotate(0deg);
}
.rev-num-inp {
  width: 100%; padding: .6rem .75rem;
  font-size: 1.6rem; font-weight: 800; text-align: center;
  background: var(--surf2); border: 2px solid var(--brd);
  border-radius: var(--r2); color: var(--txt);
  transition: border-color var(--dur), box-shadow var(--dur);
  -moz-appearance: textfield;
}
.rev-num-inp::-webkit-inner-spin-button,
.rev-num-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
.rev-num-inp:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-f); outline: none; }
.rev-num-inp::placeholder { color: var(--txt3); font-size: 1rem; font-weight: 400; }

/* ── 5. Buttons unten – volle Breite, nebeneinander ── */
.rev-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; flex-shrink: 0;
  border-top: 1px solid var(--brd);
}
.rev-actions.rev-actions-single {
  grid-template-columns: 1fr;
}
.rev-actions.rev-actions-single .rev-btn-new {
  border-right: 0;
}
.rev-btn-new,
.rev-btn-next {
  padding: 1rem;
  font-size: 1rem; font-weight: 700;
  cursor: pointer; min-height: 60px;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background var(--dur), color var(--dur);
}
.rev-btn-new {
  background: var(--surf);
  color: var(--txt2);
  border-right: 1px solid var(--brd);
}
.rev-btn-new:hover  { background: var(--surf2); color: var(--txt); }
.rev-btn-new:active { background: var(--surf3); }

.rev-btn-next {
  background: var(--pri);
  color: #fff;
}
.rev-btn-next:hover  { background: var(--pri-h); }
.rev-btn-next:active { background: var(--pri); opacity: .85; }
.rev-btn-next:disabled,
.rev-btn-new:disabled { opacity: .4; cursor: not-allowed; }


/* ============================================================
   DESIGN OVERHAUL 2026
   Professional UI refresh + better touch ergonomics
   ============================================================ */
:root {
  --bg: #0b1220;
  --surf: #121c31;
  --surf2: #1a2741;
  --surf3: #243655;
  --brd: #2f4468;
  --brd2: #3a547f;

  --txt: #f3f7ff;
  --txt2: #b2c2df;
  --txt3: #7f93b8;

  --pri: #1f78ff;
  --pri-h: #3b8bff;
  --pri-f: rgba(31, 120, 255, .14);
  --pri-g: rgba(31, 120, 255, .34);

  --ok: #1ec58a;
  --ok-bg: rgba(30, 197, 138, .16);
  --warn: #ffbb38;
  --warn-bg: rgba(255, 187, 56, .16);
  --err: #ff6e6e;
  --err-bg: rgba(255, 110, 110, .16);

  --r1: 10px;
  --r2: 14px;
  --r3: 18px;
  --r4: 22px;
  --r5: 28px;
  --hdr: 68px;

  --sh1: 0 8px 18px rgba(5, 12, 24, .28);
  --sh2: 0 16px 36px rgba(5, 12, 24, .36);
  --sh3: 0 28px 62px rgba(5, 12, 24, .48);
}

[data-theme="light"] {
  --bg: #eef3fb;
  --surf: #ffffff;
  --surf2: #f4f7fc;
  --surf3: #eaf0f8;
  --brd: #d2ddee;
  --brd2: #becde4;

  --txt: #12233d;
  --txt2: #4f6487;
  --txt3: #7f93b1;

  --pri: #0e67ea;
  --pri-h: #2a7df0;
  --pri-f: rgba(14, 103, 234, .1);
  --pri-g: rgba(14, 103, 234, .22);

  --ok: #0e9f6e;
  --ok-bg: rgba(14, 159, 110, .12);
  --warn: #d88908;
  --warn-bg: rgba(216, 137, 8, .12);
  --err: #d84040;
  --err-bg: rgba(216, 64, 64, .12);
}

body {
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(31, 120, 255, .22), transparent 58%),
    radial-gradient(800px 500px at 110% -15%, rgba(19, 201, 177, .18), transparent 60%),
    var(--bg);
}

.hdr {
  height: var(--hdr);
  background: rgba(12, 20, 35, .75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
}
[data-theme="light"] .hdr {
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(18, 35, 61, .1);
}

.hdr-logo {
  font-size: 1.17rem;
  letter-spacing: -.015em;
}

.main {
  max-width: 1120px;
  padding: 1.75rem 1.2rem 2rem;
}

.ph {
  margin-bottom: 1.35rem;
  align-items: center;
}
.ph-title {
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  font-weight: 700;
}

.btn,
.back-btn,
.rev-back,
.tab,
.rev-tab,
.ctx-i,
.theme-btn,
.mclose,
.avatar,
.lang-select {
  min-height: 46px;
}

.btn {
  border-radius: var(--r2);
  min-height: 48px;
  padding: .78rem 1.25rem;
  font-size: .95rem;
  font-weight: 700;
}

.btn-pri {
  background: linear-gradient(135deg, var(--pri), var(--pri-h));
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 20px rgba(31, 120, 255, .26);
}
.btn-pri:hover { transform: translateY(-1px); }

.btn-sec {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-color: var(--brd2);
}

.btn-sm {
  min-height: 42px;
  padding: .62rem .95rem;
  font-size: .85rem;
}

.card,
.gcard,
.pitem,
.login-card,
.modal {
  border-radius: var(--r4);
  box-shadow: var(--sh1);
}

.card,
.gcard,
.pitem {
  border: 1px solid rgba(255, 255, 255, .11);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surf);
}
[data-theme="light"] .card,
[data-theme="light"] .gcard,
[data-theme="light"] .pitem {
  border: 1px solid rgba(18, 35, 61, .12);
}

.fgrid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.fcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}

.fplan,
.fplan-ph {
  aspect-ratio: 16/9;
  min-height: 176px;
}
.fplan {
  object-fit: cover;
}

.project-plan-wrap {
  margin-bottom: 1.4rem;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--r3);
  padding: .75rem;
}
.project-plan-img {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  border: 1px solid var(--brd);
  object-fit: contain;
  background: #080e1a;
  cursor: zoom-in;
}
[data-theme="light"] .project-plan-img {
  background: #eef3fb;
}
.project-plan-img.full {
  max-height: 74vh;
  cursor: zoom-out;
}
.project-plan-note {
  margin-top: .45rem;
  text-align: center;
  color: var(--txt2);
  font-size: .8rem;
}
.modal.modal-plan {
  width: min(1080px, 96vw);
  max-width: 1080px;
  max-height: 92vh;
  padding: .65rem;
}
.project-plan-modal {
  display: flex;
  flex-direction: column;
}
.project-plan-modal .project-plan-img {
  max-height: min(76vh, 920px);
}

.plan-view {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg);
  color: var(--txt);
  animation: none !important;
}

.plan-view::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--bg);
  pointer-events: none;
}

body.plan-view-open {
  overflow: hidden;
}

.plan-view-head {
  min-width: 0;
  padding: calc(.72rem + env(safe-area-inset-top)) .9rem .72rem;
  border-bottom: 1px solid var(--brd);
  background: var(--bg);
}

.plan-view-title {
  color: var(--txt);
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.2;
}

.plan-view-project {
  max-width: 100%;
  margin-top: .16rem;
  color: var(--txt2);
  font-size: .82rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-view-main {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  overflow: auto;
  background: var(--bg);
}

.plan-view-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--brd);
  border-radius: 8px;
  background: #040811;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.plan-view-actions {
  padding: .55rem .8rem calc(.65rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--brd);
  background: var(--surf);
  box-shadow: 0 -10px 24px rgba(0,0,0,.16);
}

.plan-view-status {
  width: 100%;
  max-width: 980px;
  min-height: 1.05rem;
  margin: 0 auto .38rem;
  color: var(--txt2);
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
}

.plan-view-status.is-error {
  color: var(--err);
}

.plan-view-row {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.plan-view-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .48rem;
  min-width: 0;
}

.plan-view-btn {
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--brd);
  border-radius: 7px;
  padding: .42rem .72rem;
  background: var(--surf2);
  color: var(--txt);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

.plan-view-btn:hover {
  background: var(--surf3);
  border-color: var(--brd2);
}

.plan-view-btn:active {
  transform: none !important;
}

.plan-view-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.plan-view-back {
  color: var(--txt2);
  background: transparent;
}

.plan-view-back:hover {
  color: var(--txt);
  background: rgba(255,255,255,.04);
}

.plan-view-primary {
  border-color: var(--pri);
  background: var(--pri);
  color: #fff;
}

.plan-view-primary:hover {
  background: var(--pri-h);
  border-color: var(--pri-h);
}

.plan-view-danger {
  border-color: rgba(248,113,113,.38);
  background: rgba(248,113,113,.08);
  color: #ffcaca;
}

.plan-view-danger:hover {
  border-color: rgba(248,113,113,.58);
  background: rgba(248,113,113,.14);
}

@media (max-width: 520px) {
  .plan-view-actions {
    padding-left: .55rem;
    padding-right: .55rem;
  }

  .plan-view-row,
  .plan-view-action-buttons {
    gap: .38rem;
  }

  .plan-view-row {
    display: grid;
    grid-template-columns: .72fr 1.55fr;
  }

  .plan-view-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .plan-view-btn {
    min-height: 38px;
    padding-left: .38rem;
    padding-right: .38rem;
    font-size: .76rem;
  }
}

.tabs,
.rev-tabs {
  border-bottom-color: var(--brd2);
}
.tab,
.rev-tab {
  border-radius: 12px 12px 0 0;
  padding: .75rem 1rem;
  font-weight: 700;
}

.pgrid {
  gap: 1rem;
}
.pitem {
  overflow: hidden;
}
.pthumb {
  width: 100%;
  min-height: 220px;
  max-height: min(62vh, 560px);
  aspect-ratio: var(--photo-aspect-ratio, 4 / 3);
  object-fit: contain;
  background: #050a13;
  padding: .15rem;
}
[data-theme="light"] .pthumb {
  background: #edf2fa;
}
.pfoot {
  min-height: 52px;
  padding: .72rem .85rem;
}
.pnum {
  padding: .24rem .52rem;
  border-radius: 999px;
  font-size: .76rem;
}
.pdel {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: .9rem;
}

.fab {
  width: 66px;
  height: 66px;
  right: 1.15rem;
  bottom: 1.25rem;
  background: linear-gradient(140deg, #1f78ff, #36a3ff);
  box-shadow: 0 16px 30px rgba(31, 120, 255, .36);
}

.field-inp,
.field-sel,
.rev-num-inp {
  min-height: 48px;
}

.cam-close-btn,
.cam-flip-btn {
  width: 52px;
  height: 52px;
}
.cam-num-top {
  width: min(90vw, 330px);
  top: calc(max(.85rem, env(safe-area-inset-top)) + 62px);
}
.cam-num-input-top {
  min-height: 42px;
  font-size: 1.04rem;
}
.cam-shutter {
  width: 88px;
  height: 88px;
}
.cam-shutter-ring {
  width: 66px;
  height: 66px;
}

@media (max-width: 900px) {
  .main {
    max-width: 100%;
    padding: 1.05rem .82rem 1.4rem;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .btn,
  .back-btn,
  .tab,
  .rev-tab {
    min-height: 50px;
  }
  .pthumb {
    min-height: 170px;
    max-height: 54vh;
  }
  .project-plan-img {
    max-height: 44vh;
  }
}

/* ============================================================
   COMPACT UI TUNING (User request 2026-03-11)
   - kleinere Buttons/Elemente
   - Projektuebersicht immer 2-spaltig
   - kompaktere Projekt-/Gruppenansicht
   - Gruppen-Auswahl ohne viel Scrollen
   ============================================================ */

html, body {
  scroll-behavior: auto;
}

.main {
  max-width: 1040px;
  padding: .95rem .72rem 1rem;
}

.ph {
  gap: .5rem;
  margin-bottom: .7rem;
}
.ph-title {
  font-size: clamp(1rem, 2vw, 1.32rem);
}
.ph-acts {
  gap: .35rem;
}

.btn,
.back-btn,
.rev-back,
.tab,
.rev-tab,
.ctx-i,
.theme-btn,
.mclose,
.avatar,
.lang-select {
  min-height: 40px;
}

.btn {
  min-height: 40px;
  padding: .52rem .85rem;
  font-size: .83rem;
  font-weight: 700;
}

.btn-sm {
  min-height: 34px;
  padding: .38rem .62rem;
  font-size: .74rem;
}

.btn-lg {
  min-height: 44px;
  padding: .58rem .92rem;
  font-size: .86rem;
}

.card-body {
  padding: .7rem .72rem;
}
.card-foot {
  padding: .45rem .52rem;
  gap: .34rem;
}
.card-foot .btn {
  flex: 1;
  min-width: 0;
}

/* Projektuebersicht: immer 2 Karten nebeneinander */
.fgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .62rem;
  align-items: start;
}
.fplan,
.fplan-ph {
  min-height: 92px;
  aspect-ratio: 4/3;
}
.fplan-ph {
  font-size: 2rem;
}
.fname {
  font-size: .84rem;
  margin-bottom: .2rem;
}
.fmeta {
  font-size: .68rem;
  gap: .35rem;
}
.fdate {
  font-size: .63rem;
  margin-top: .1rem;
}

/* Innerhalb Projekt: Gruppen kompakter und uebersichtlicher */
.glist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.gcard-in {
  padding: .58rem .62rem;
  gap: .52rem;
}
.gicon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.gicon svg {
  width: 18px;
  height: 18px;
}
.gname {
  font-size: .8rem;
  line-height: 1.2;
}
.gdesc {
  font-size: .68rem;
  margin-top: .08rem;
  line-height: 1.25;
}
.gcnt {
  font-size: .64rem;
  padding: .12rem .34rem;
}
.gchev {
  font-size: .74rem;
}
.project-plan-wrap {
  margin-bottom: .72rem;
  padding: .45rem;
}
.project-plan-img {
  max-height: 220px;
}
.project-plan-note {
  font-size: .69rem;
}

/* Tabs und Foto-Listen kompakter */
.tabs {
  margin-bottom: .65rem;
  gap: .2rem;
}
.tab,
.rev-tab {
  padding: .45rem .68rem;
  min-height: 36px;
  font-size: .76rem;
}
.pgrid {
  gap: .5rem;
}
.pthumb {
  min-height: 112px;
  max-height: min(38vh, 250px);
}
.pfoot {
  min-height: 36px;
  padding: .4rem .48rem;
}
.pnum {
  font-size: .64rem;
}
.pdel {
  width: 26px;
  height: 26px;
  font-size: .7rem;
}

.fab {
  width: 54px;
  height: 54px;
  right: .8rem;
  bottom: .85rem;
  font-size: 1.28rem;
}

/* Gruppe hinzufuegen Modal: mehr auf einen Blick */
.modal {
  padding: 1rem .88rem;
}
.mhdr {
  margin-bottom: .8rem;
}
.gchoices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}
.gchoice {
  min-height: 82px;
  padding: .52rem .35rem;
  gap: .24rem;
}
.gchoice-ic svg {
  width: 32px;
  height: 32px;
}
.gchoice-lbl {
  font-size: 1.06rem;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .main {
    padding: .78rem .55rem .92rem;
  }
  .gchoices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none) {
  .fcard:hover,
  .fab:hover,
  .btn-pri:hover {
    transform: none;
  }
}

/* Review Nummernfeld: startet eingeklappt, oeffnet erst bei Klick */
.rev-num-row {
  transition: padding var(--dur), gap var(--dur);
}
.rev-num-row .rev-num-label {
  cursor: pointer;
}
.rev-num-row.collapsed {
  padding-top: .4rem;
  padding-bottom: .4rem;
  gap: 0;
}
.rev-num-row.collapsed .rev-num-inp {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  pointer-events: none;
}
.rev-num-row.expanded .rev-num-inp {
  max-height: 120px;
  opacity: 1;
  pointer-events: auto;
}

/* Fast, clean camera flow + iconfreie Gruppenauswahl */
.fab {
  touch-action: manipulation;
}

.gchoice {
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: .58rem .45rem;
  gap: 0;
}
.gchoice-ic {
  display: none !important;
}
.gchoice-lbl {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
}

.cam-live {
  overflow: hidden;
}

html.camera-open,
body.camera-open {
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.cam-topbar {
  position: absolute;
  top: max(.7rem, env(safe-area-inset-top));
  left: .7rem;
  right: .7rem;
  z-index: 9;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55rem;
  align-items: center;
}
.cam-top-btn {
  min-height: 42px;
  padding: .42rem .7rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.cam-top-spacer {
  min-height: 42px;
  padding: .42rem .7rem;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 700;
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}
.cam-top-btn:active {
  transform: scale(.96);
}
.cam-top-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cam-top-center {
  min-width: 0;
}
.cam-top-number,
.cam-top-static {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.45);
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  padding: .38rem .62rem;
}
.cam-top-number:focus {
  outline: none;
  border-color: #9cc7ff;
  box-shadow: 0 0 0 3px rgba(79,127,255,.28);
}
.cam-top-number.is-invalid {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(248,113,113,.28);
}
.cam-top-static {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  letter-spacing: .02em;
  opacity: .86;
}

.cam-captured {
  position: absolute;
  top: var(--cam-media-top);
  right: var(--cam-media-right);
  bottom: var(--cam-media-bottom);
  left: var(--cam-media-left);
  z-index: 2;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.cam-video {
  z-index: 1;
  transition: opacity .15s ease;
}
.cam-live.cam-mode-preview .cam-captured {
  opacity: 1;
  pointer-events: auto;
}
.cam-live.cam-mode-preview {
  --cam-media-bottom: max(8.15rem, calc(7.55rem + env(safe-area-inset-bottom)));
}
.cam-live.cam-mode-preview .cam-video {
  opacity: 0;
}
.cam-live.cam-mode-preview.cam-preview-video-fallback .cam-captured {
  opacity: 0;
}
.cam-live.cam-mode-preview.cam-preview-video-fallback .cam-video {
  opacity: 1;
}

.cam-shutter-wrap {
  z-index: 8;
  transition: opacity .16s ease, transform .16s ease;
}
.cam-live.cam-mode-preview .cam-shutter-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

.cam-live-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(.95rem, calc(.9rem + env(safe-area-inset-bottom)));
  z-index: 8;
  pointer-events: auto;
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}

.cam-live-ctrl {
  position: absolute;
  bottom: 0;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.56);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem .72rem;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cam-live-ctrl:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.cam-live-lens:disabled {
  opacity: 1;
  cursor: default;
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.56);
}

.cam-live-ctrl.on {
  background: rgba(31,120,255,.86);
  border-color: rgba(143,190,255,.78);
  color: #fff;
}

.cam-live-flash {
  left: max(.7rem, calc(.65rem + env(safe-area-inset-left)));
}

.cam-live-switch {
  right: max(.7rem, calc(.65rem + env(safe-area-inset-right)));
}

.cam-live-lens {
  left: max(.7rem, calc(.65rem + env(safe-area-inset-left)));
}

.cam-live.cam-mode-preview .cam-live-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.cam-live.cam-controls-locked .cam-live-controls,
.cam-live.cam-controls-locked .cam-live-ctrl {
  pointer-events: none !important;
}

.cam-post-actions {
  position: absolute;
  left: 50%;
  bottom: max(.95rem, calc(.9rem + env(safe-area-inset-bottom)));
  transform: translateX(-50%) translateY(10px);
  z-index: 9;
  width: min(92vw, 360px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.cam-post-actions.cam-post-actions-single {
  grid-template-columns: 1fr;
}
.cam-live.cam-mode-preview .cam-post-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cam-post-btn {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  padding: .52rem .72rem;
}
.cam-post-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cam-post-new {
  background: rgba(0,0,0,.62);
}
.cam-post-next {
  background: var(--pri);
  border-color: var(--pri);
}
.cam-post-next:hover {
  background: var(--pri-h);
}

.cam-err {
  z-index: 12;
}

@media (max-width: 560px) {
  .cam-topbar {
    left: .5rem;
    right: .5rem;
    gap: .42rem;
  }
  .cam-top-btn {
    min-height: 40px;
    padding: .4rem .62rem;
    font-size: .8rem;
  }
  .cam-top-spacer {
    min-height: 40px;
    padding: .4rem .62rem;
    font-size: .8rem;
  }
  .cam-top-number,
  .cam-top-static {
    min-height: 40px;
    font-size: .95rem;
  }
  .cam-live-ctrl {
    min-height: 40px;
    font-size: .76rem;
    padding: .36rem .56rem;
  }
  .cam-live-flash { left: max(.5rem, calc(.45rem + env(safe-area-inset-left))); }
  .cam-live-switch { right: max(.5rem, calc(.45rem + env(safe-area-inset-right))); }
}

/* User request: Fotos immer in 2 Spalten anzeigen */
.pgrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}

/* Toasts sollen keine Buttons blockieren */
.toast {
  pointer-events: none !important;
}

/* Projektuebersicht: kompakte Action-Buttons ohne Ueberstand */
.fcard .card-foot {
  gap: .28rem !important;
}

.fcard .card-foot .btn {
  flex: 0 1 auto !important;
  min-height: 30px !important;
  padding: .3rem .45rem !important;
  font-size: .7rem !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcard .card-foot .project-rename-btn,
.fcard .card-foot .project-delete-btn {
  order: 20;
  flex: 1 1 calc(50% - .18rem) !important;
  min-width: calc(50% - .18rem) !important;
  max-width: calc(50% - .18rem) !important;
}

/* Projektkarte unten kompakter: nur Erstellt + Aktionen */
.fcard .card-body {
  padding-top: .52rem !important;
  padding-bottom: .4rem !important;
}
.fcard .fdate {
  margin-top: .06rem !important;
  font-size: .64rem !important;
}
.fcard .card-foot {
  padding: .28rem .4rem !important;
  gap: .22rem !important;
}

/* Projektkarten in einer Zeile immer gleich hoch */
.fgrid {
  align-items: stretch !important;
}

.fgrid > .fcard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fgrid > .fcard .card-foot {
  margin-top: auto;
}

/* Projektansicht: Kopf + Aktionen laut Wunschlayout */
.project-head {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: .65rem;
}

.project-head-top,
.project-head-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.project-head-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
}

.project-head-top .btn,
.project-head-bottom .btn,
.project-head-bottom .back-btn {
  min-height: 34px !important;
  padding: .35rem .65rem !important;
  font-size: .78rem !important;
}

.project-head-note {
  margin-bottom: .7rem;
  padding: .55rem .75rem;
  border: 1px solid var(--brd);
  border-radius: var(--r2);
  background: var(--surf2);
  color: var(--txt2);
  font-size: .78rem;
}

.wartung-head-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: end;
  gap: .45rem;
  margin-left: auto;
  min-width: 0;
}

.wartung-head-actions .btn {
  white-space: nowrap;
}

.wartung-project {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

.wartung-section {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.wartung-section-title {
  color: var(--txt2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wartung-project #photo-area {
  min-height: 190px;
}

.wartung-folder-empty.empty {
  margin-top: 0;
}

.wartung-folder-list .gcard[data-type="wartung"],
.wartung-folder-list .gcard[data-type="sonderfall"] {
  border-color: var(--brd2);
}

@media (max-width: 560px) {
  .project-head-bottom {
    flex-wrap: wrap;
  }

  .wartung-head-actions {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: min(100%, 210px);
  }

  .wartung-head-actions .btn {
    min-width: 0;
    padding-left: .45rem !important;
    padding-right: .45rem !important;
  }
}

/* Gruppen in Projekt immer untereinander (nicht 2-spaltig) */
.project-glist {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  width: 100%;
  max-width: none;
  margin: 0;
}

.project-glist .gcard {
  width: 100%;
}

.project-glist .gcard-in {
  padding: .62rem .7rem !important;
}

.project-glist .gicon,
.project-glist .gchev {
  display: none !important;
}

.project-glist .gactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .42rem;
  padding: .48rem .62rem .62rem;
  border-top: 1px solid var(--brd);
}

.project-glist .gactions .btn {
  width: 100%;
  min-height: 34px !important;
  padding: .34rem .56rem !important;
  font-size: .74rem !important;
}

/* Plan: oben links Zurück, oben rechts Plan ändern */
.project-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .5rem;
}

.project-plan-top .back-btn,
.project-plan-top .btn {
  min-height: 34px !important;
  padding: .34rem .6rem !important;
  font-size: .76rem !important;
}

.photo-top-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem;
  margin: .1rem 0 .65rem;
  padding: .48rem .58rem;
  border: 1px solid var(--brd);
  border-radius: var(--r2);
  background: var(--surf2);
}

.photo-top-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.9rem;
  padding: 0 .58rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 127, 255, .42);
  background: var(--pri-f);
  color: var(--pri);
  font-size: .78rem;
  font-weight: 850;
}

.pgrid-overview-topnums .pitem .pnum-top {
  position: absolute;
  top: .56rem;
  left: .56rem;
  z-index: 3;
  margin: 0;
  background: rgba(10, 16, 27, .84);
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .22);
}

.pgrid-overview-topnums .pfoot > .pnum {
  display: none !important;
}

[data-theme="light"] .pgrid-overview-topnums .pitem .pnum-top {
  background: rgba(255, 255, 255, .93);
  color: #1d2a3d;
  border-color: rgba(24, 33, 48, .2);
}

/* Fotokarten unten: nur Nummer + Icon-Aktionen */
.pfoot {
  justify-content: flex-start;
}

.pfoot .pnum {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 800;
}

.pfoot .pact-ic {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--brd);
  background: var(--surf2);
  color: var(--txt2);
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur);
}

.pfoot .pact-ic:active {
  transform: scale(.95);
}

.pfoot .pact-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pfoot .pact-edit:hover {
  background: var(--pri-f);
  border-color: rgba(79,127,255,.45);
  color: var(--pri);
}

.pfoot .pact-del:hover {
  background: var(--err-bg);
  border-color: rgba(248,113,113,.45);
  color: var(--err);
}

.pfoot .pact-ic:disabled,
.pitem .pfoot .pact-ic:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Foto-Karten: Nummer unten links, dann Bearbeiten, dann Loeschen */
.pitem {
  position: relative;
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.pitem.is-local-pending {
  outline: 2px solid rgba(251, 191, 36, .7);
  outline-offset: -2px;
}

.pitem.is-local-pending::before {
  content: "Lokal";
  position: absolute;
  top: .58rem;
  left: .58rem;
  z-index: 5;
  padding: .25rem .52rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, .88);
  color: #111827;
  font-size: .7rem;
  font-weight: 850;
  pointer-events: none;
}
.pitem.is-local-pending[data-local-status="uploading"]::before {
  content: "Upload";
  background: rgba(47, 128, 255, .9);
  color: #fff;
}
.fcard.is-local-pending {
  outline: 2px solid rgba(251, 191, 36, .72);
  outline-offset: -2px;
}

.fcard.is-local-pending .fname::after {
  content: "Lokal";
  display: inline-flex;
  margin-left: .45rem;
  padding: .12rem .42rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, .9);
  color: #111827;
  font-size: .65rem;
  font-weight: 850;
  vertical-align: middle;
}

.pitem::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 19, 0) 0%,
    rgba(5, 10, 19, .82) 70%,
    rgba(5, 10, 19, .93) 100%
  );
}
[data-theme="light"] .pitem::after {
  background: linear-gradient(
    180deg,
    rgba(237, 242, 250, 0) 0%,
    rgba(237, 242, 250, .82) 70%,
    rgba(237, 242, 250, .96) 100%
  );
}

.pitem .pfoot {
  position: absolute;
  left: .56rem;
  right: .56rem;
  bottom: .56rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .46rem;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.pitem .pnum {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 2.1rem;
  padding: 0 .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(10, 16, 27, .84);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .22);
}

.pitem .pfoot .pactions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .46rem;
}

.pitem .pfoot .pact-ic {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 16, 27, .84);
  color: #e8edf8;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
}

.pitem .pfoot .pact-ic svg {
  width: 15px;
  height: 15px;
}

.pitem .pfoot .pact-edit:hover {
  background: rgba(44, 112, 255, .86);
  border-color: rgba(111, 159, 255, .76);
  color: #fff;
}

.pitem .pfoot .pact-del:hover {
  background: rgba(214, 60, 78, .9);
  border-color: rgba(255, 158, 170, .72);
  color: #fff;
}

[data-theme="light"] .pitem .pnum {
  background: rgba(255, 255, 255, .93);
  color: #1d2a3d;
  border-color: rgba(24, 33, 48, .2);
}

[data-theme="light"] .pitem .pfoot .pact-ic {
  background: rgba(255, 255, 255, .93);
  color: #253247;
  border-color: rgba(24, 33, 48, .22);
}

@media (max-width: 560px) {
  .pitem::after {
    height: 64px;
  }

  .pitem .pfoot {
    left: .42rem;
    right: .42rem;
    bottom: .42rem;
    gap: .38rem;
  }

  .pitem .pnum {
    height: 1.9rem;
    min-width: 1.95rem;
    padding: 0 .5rem;
    font-size: .7rem;
  }

  .pitem .pfoot .pact-ic {
    width: 1.9rem;
    height: 1.9rem;
  }

  .pitem .pfoot .pact-ic svg {
    width: 14px;
    height: 14px;
  }
}

/* Wunsch: Rundung bei Fotos und Projekten etwas kleiner */
.fcard,
.fgrid > .fcard,
.pitem {
  border-radius: 14px !important;
}

.fcard .card-foot {
  border-radius: 0 0 14px 14px !important;
}

/* Kamera: Handy-Querformat -> vier Bedienelemente gleich gross, Nummernfeld kompakter */
@media (orientation: landscape) and (max-width: 980px) {
  .cam-live {
    --cam-land-btn-w: clamp(112px, 24vw, 148px);
    --cam-land-btn-h: 40px;
    --cam-media-top: max(3.45rem, calc(3rem + env(safe-area-inset-top)));
    --cam-media-right: calc(var(--cam-land-btn-w) + max(2.15rem, calc(1.85rem + env(safe-area-inset-right))));
    --cam-media-bottom: max(3.5rem, calc(3.1rem + env(safe-area-inset-bottom)));
  }

  .cam-live.cam-mode-preview {
    --cam-media-right: calc(var(--cam-land-btn-w) + max(2.15rem, calc(1.85rem + env(safe-area-inset-right))));
    --cam-media-bottom: max(3.5rem, calc(3.1rem + env(safe-area-inset-bottom)));
  }

  .cam-live .cam-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: max(.7rem, calc(.6rem + env(safe-area-inset-left)));
    right: max(.7rem, calc(.6rem + env(safe-area-inset-right)));
    gap: .5rem;
  }

  .cam-live .cam-top-spacer {
    display: none !important;
  }

  .cam-live .cam-top-center {
    margin-left: 0;
    width: var(--cam-land-btn-w);
    min-width: var(--cam-land-btn-w);
    flex: 0 0 var(--cam-land-btn-w);
  }

  .cam-live .cam-top-btn,
  .cam-live .cam-top-number,
  .cam-live .cam-live-ctrl {
    width: var(--cam-land-btn-w);
    min-width: var(--cam-land-btn-w);
    min-height: var(--cam-land-btn-h);
    height: var(--cam-land-btn-h);
    padding: .34rem .54rem;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cam-live .cam-top-number {
    font-size: 16px;
  }

  .cam-live .cam-live-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cam-live:not(.cam-mode-preview) .cam-shutter-wrap {
    top: 50%;
    bottom: auto;
    left: auto;
    right: max(.9rem, calc(.75rem + env(safe-area-inset-right)));
    transform: translateY(-50%);
  }

  .cam-live.cam-mode-preview .cam-shutter-wrap {
    top: 50%;
    bottom: auto;
    left: auto;
    right: max(.9rem, calc(.75rem + env(safe-area-inset-right)));
    transform: translateY(-50%) translateX(14px);
  }
}

/* Desktop: Projektuebersicht ueber volle Breite mit 4 Karten + groessere Buttons */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .main {
    max-width: none !important;
    width: 100% !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  .fgrid {
    --project-card-h: clamp(350px, 24vw, 410px);
    --project-card-body-h: 74px;
    --project-card-foot-h: 66px;
    --project-plan-h: calc(var(--project-card-h) - var(--project-card-body-h) - var(--project-card-foot-h));
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .72rem !important;
  }

  .fcard .card-foot {
    gap: .4rem !important;
    padding: .4rem .56rem !important;
  }

  .fcard .card-foot .btn {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    padding: .46rem .72rem !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
  }

  .fgrid {
    grid-auto-rows: var(--project-card-h) !important;
    align-items: stretch !important;
  }

  .fgrid > .fcard {
    height: var(--project-card-h) !important;
    min-height: var(--project-card-h) !important;
    max-height: var(--project-card-h) !important;
  }

  .fgrid > .fcard .fplan,
  .fgrid > .fcard .fplan-ph {
    flex: 0 0 var(--project-plan-h) !important;
    height: var(--project-plan-h) !important;
    min-height: var(--project-plan-h) !important;
    max-height: var(--project-plan-h) !important;
    aspect-ratio: auto !important;
  }

  .fgrid > .fcard .card-body {
    flex: 0 0 var(--project-card-body-h) !important;
    min-height: var(--project-card-body-h) !important;
    max-height: var(--project-card-body-h) !important;
    overflow: hidden !important;
  }

  .fgrid > .fcard .fname {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .fgrid > .fcard .card-foot {
    flex: 0 0 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    overflow: hidden !important;
  }
}

/* Desktop/PC: Foto-Uebersicht mit fuenf Fotos nebeneinander */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .pgrid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Projekt-Status: manuell ankreuzbar und automatisch nach Save */
.fcard.is-saved {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .55), var(--sh1);
}

.fcard.is-saved:hover {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .78), var(--sh2);
}

.fcard .fsave-tag {
  margin-top: .38rem;
  display: none !important;
  align-items: center;
  gap: .28rem;
  padding: .18rem .42rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid rgba(52, 211, 153, .35);
  visibility: hidden;
  opacity: 0;
}

.fcard.is-saved .fsave-tag,
.fcard .fsave-tag.is-visible {
  visibility: visible;
  opacity: 1;
}

.fcard .fsave-tag::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .18);
}

.fcard .card-foot .project-save-toggle {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-color: rgba(52, 211, 153, .45);
}

.fcard .card-foot .project-save-toggle:hover {
  border-color: rgba(52, 211, 153, .78);
  background: rgba(52, 211, 153, .12);
}

.fcard .card-foot .project-save-toggle-box {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid currentColor;
  color: var(--ok);
  display: inline-block;
}

.fcard .card-foot .project-save-toggle-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(40deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur);
}

.fcard .card-foot .project-save-toggle.is-on {
  background: var(--ok-bg);
  border-color: rgba(52, 211, 153, .82);
}

.fcard .card-foot .project-save-toggle.is-on .project-save-toggle-box::after {
  transform: rotate(40deg) scale(1);
}

.fcard .card-foot .project-save-pc-btn {
  background: transparent !important;
  color: var(--pri) !important;
  border-color: var(--pri) !important;
  box-shadow: none !important;
}

.fcard .card-foot .project-save-pc-btn:hover {
  background: var(--pri) !important;
  color: #fff !important;
  border-color: var(--pri) !important;
  box-shadow: 0 4px 14px var(--pri-g) !important;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .fgrid {
    --project-card-h: clamp(390px, 27vw, 455px) !important;
    --project-card-foot-h: 112px !important;
    --project-plan-h: calc(var(--project-card-h) - var(--project-card-body-h) - var(--project-card-foot-h)) !important;
  }

  .fgrid > .fcard .card-foot.project-actions {
    flex: 0 0 var(--project-card-foot-h) !important;
    min-height: var(--project-card-foot-h) !important;
    max-height: var(--project-card-foot-h) !important;
    display: grid !important;
    align-items: stretch !important;
    gap: .42rem !important;
    padding: .55rem .62rem !important;
    overflow: hidden !important;
  }

  .fgrid > .fcard .card-foot.project-actions.has-save-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "save save"
      "rename delete";
  }

  .fgrid > .fcard .card-foot.project-actions.only-manage-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: "rename delete";
    align-content: center !important;
  }

  .fgrid > .fcard .project-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: .48rem .64rem !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .fgrid > .fcard .project-actions .project-save-pc-btn {
    grid-area: save;
    justify-self: start !important;
    width: calc(100% - 40px - .42rem) !important;
  }

  .fgrid > .fcard .project-actions .project-save-toggle {
    grid-area: save;
    justify-self: end !important;
    align-self: stretch !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-left: 0 !important;
  }

  .fgrid > .fcard .project-actions .project-rename-btn {
    grid-area: rename;
    order: initial !important;
    flex: initial !important;
  }

  .fgrid > .fcard .project-actions .project-delete-btn {
    grid-area: delete;
    order: initial !important;
    flex: initial !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  #photo-area .pgrid {
    gap: 2px !important;
    align-items: stretch !important;
    margin-left: calc(-1 * clamp(.55rem, 2vw, .82rem)) !important;
    margin-right: calc(-1 * clamp(.55rem, 2vw, .82rem)) !important;
  }

  #photo-area .pitem {
    border: 0 !important;
    border-radius: 0 !important;
    background: #050a13 !important;
    box-shadow: none !important;
  }

  [data-theme="light"] #photo-area .pitem {
    background: #edf2fa !important;
  }

  #photo-area .pthumb {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--photo-aspect-ratio, 4 / 3) !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #050a13 !important;
  }

  [data-theme="light"] #photo-area .pthumb {
    background: #edf2fa !important;
  }

  .lb {
    --lb-mobile-top: 0px;
    gap: 0 !important;
    padding: 0 !important;
    animation: none !important;
    touch-action: none !important;
  }

  .lb-stage {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  .lb-track,
  .lb-slide {
    height: 100% !important;
  }

  .lb-img {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    touch-action: none !important;
  }

  .lb-stage .lb-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .lb-count {
    top: max(.65rem, env(safe-area-inset-top)) !important;
    left: .75rem !important;
    z-index: 302 !important;
    padding: .42rem .78rem !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .lb-x {
    top: max(.65rem, env(safe-area-inset-top)) !important;
    right: .75rem !important;
    z-index: 302 !important;
  }

  .lb-nav {
    display: none !important;
  }

  .lb,
  .lb-img,
  .pitem,
  .pthumb,
  .cam-captured,
  .cam-video,
  .cam-shutter-wrap,
  .cam-live-controls,
  .cam-post-actions {
    animation: none !important;
    transition: none !important;
  }

  .pthumb.is-loading,
  .pthumb.is-ready {
    opacity: 1 !important;
  }
}

/* Desktop/PC: Gruppenkarten ruhiger und kompakter (mobile bleibt unveraendert) */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .project-head-top .btn,
  .project-head-bottom .btn,
  .project-head-bottom .back-btn,
  .project-plan-top .btn,
  .project-plan-top .back-btn {
    min-height: 42px !important;
    padding: .48rem .86rem !important;
    font-size: .86rem !important;
  }

  .project-glist .gcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
  }

  .project-glist .gcard-in {
    flex: 1 1 auto;
    min-width: 0;
    padding: .8rem .95rem !important;
  }

  .project-glist .gactions {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    padding: .4rem .75rem .4rem .25rem !important;
    border-top: 0 !important;
    grid-template-columns: none !important;
  }

  .project-glist .gactions .btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: .4rem .74rem !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .project-glist .gactions .btn.btn-pri {
    background: var(--surf2) !important;
    border-color: var(--brd2) !important;
    color: var(--txt) !important;
  }

  .project-glist .gactions .btn.btn-pri:hover {
    background: var(--surf3) !important;
    border-color: var(--pri) !important;
    color: var(--txt) !important;
  }

  .project-glist .gactions .btn.btn-err {
    background: transparent !important;
    border-color: rgba(248, 113, 113, .42) !important;
    color: var(--err) !important;
  }

  .project-glist .gactions .btn.btn-err:hover {
    background: rgba(248, 113, 113, .12) !important;
    color: var(--err) !important;
    border-color: rgba(248, 113, 113, .68) !important;
  }
}

/* UI motion layer: kurze Bewegungen fuer Bedienung, nicht fuer Foto/Kamera. */
:root {
  --motion-fast: 120ms;
  --motion-ui: 180ms;
  --motion-panel: 220ms;
  --motion-ease: cubic-bezier(.2, .82, .2, 1);
  --motion-pop: cubic-bezier(.16, 1, .3, 1);
}

@keyframes uiPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes uiItemIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .back-btn,
  .mode-btn,
  .settings-btn,
  .theme-btn,
  .lang-picker-btn,
  .avatar,
  .mclose,
  .ctx-i,
  .tab,
  .gchoice,
  .plan-zone,
  .plan-btn {
    transition:
      transform var(--motion-ui) var(--motion-ease),
      background-color var(--motion-ui) var(--motion-ease),
      border-color var(--motion-ui) var(--motion-ease),
      color var(--motion-ui) var(--motion-ease),
      box-shadow var(--motion-ui) var(--motion-ease),
      opacity var(--motion-ui) var(--motion-ease);
  }

  .btn,
  .back-btn,
  .plan-btn {
    position: relative;
    overflow: hidden;
  }

  .btn::after,
  .back-btn::after,
  .plan-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-55%);
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16), transparent 58%);
    transition: opacity var(--motion-fast) var(--motion-ease), transform 360ms var(--motion-ease);
  }

  .btn:not(:disabled):hover::after,
  .back-btn:not(:disabled):hover::after,
  .plan-btn:not(:disabled):hover::after {
    opacity: .9;
    transform: translateX(55%);
  }

  .btn:not(:disabled):hover,
  .back-btn:not(:disabled):hover,
  .mode-btn:hover,
  .settings-btn:hover,
  .theme-btn:hover,
  .lang-picker-btn:hover,
  .avatar:hover,
  .mclose:hover,
  .ctx-i:hover,
  .tab:hover,
  .gchoice:hover,
  .plan-zone:hover,
  .plan-btn:not(:disabled):hover {
    transform: translateY(-1px);
  }

  .btn:not(:disabled):active,
  .back-btn:not(:disabled):active,
  .mode-btn:active,
  .settings-btn:active,
  .theme-btn:active,
  .lang-picker-btn:active,
  .avatar:active,
  .mclose:active,
  .ctx-i:active,
  .tab:active,
  .gchoice:active,
  .plan-zone:active,
  .plan-btn:not(:disabled):active {
    transform: translateY(0) scale(.975);
    transition-duration: 70ms;
  }

  .btn-pri:not(:disabled):hover {
    box-shadow: 0 8px 22px var(--pri-g);
  }

  .btn-err:not(:disabled):hover,
  .ctx-i.err:hover {
    box-shadow: 0 8px 22px rgba(248,113,113,.22);
  }

  .btn-sec:not(:disabled):hover,
  .back-btn:not(:disabled):hover,
  .plan-btn:not(:disabled):hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
  }

  .ov {
    animation: uiFadeIn 140ms var(--motion-ease) both;
  }

  .modal,
  .login-card,
  .ctx {
    animation: uiPanelIn var(--motion-panel) var(--motion-pop) both;
  }

  .field-inp,
  .field-sel,
  .num-big,
  .seil-num-part,
  .seil-slash-btn {
    transition:
      transform var(--motion-ui) var(--motion-ease),
      border-color var(--motion-ui) var(--motion-ease),
      box-shadow var(--motion-ui) var(--motion-ease),
      background-color var(--motion-ui) var(--motion-ease);
  }

  .field-inp:focus,
  .field-sel:focus,
  .num-big:focus,
  .seil-num-part:focus {
    transform: translateY(-1px);
  }

  .fgrid > .fcard,
  .project-glist > .gcard,
  .gchoices > .gchoice {
    animation: uiItemIn var(--motion-panel) var(--motion-pop) both;
  }

  .fgrid > .fcard:nth-child(2),
  .project-glist > .gcard:nth-child(2),
  .gchoices > .gchoice:nth-child(2) { animation-delay: 18ms; }
  .fgrid > .fcard:nth-child(3),
  .project-glist > .gcard:nth-child(3),
  .gchoices > .gchoice:nth-child(3) { animation-delay: 36ms; }
  .fgrid > .fcard:nth-child(4),
  .project-glist > .gcard:nth-child(4),
  .gchoices > .gchoice:nth-child(4) { animation-delay: 54ms; }
  .fgrid > .fcard:nth-child(n+5),
  .project-glist > .gcard:nth-child(n+5),
  .gchoices > .gchoice:nth-child(n+5) { animation-delay: 72ms; }

  .fcard,
  .gcard {
    transition:
      transform var(--motion-ui) var(--motion-ease),
      border-color var(--motion-ui) var(--motion-ease),
      box-shadow var(--motion-ui) var(--motion-ease),
      background-color var(--motion-ui) var(--motion-ease);
  }

  .fcard:hover {
    transform: translateY(-3px) scale(1.002);
  }

  .gcard:hover {
    transform: translateY(-2px);
  }

  .toast {
    animation: uiPanelIn 180ms var(--motion-pop) both;
  }
}

/* Keine Bewegungen beim Fotografieren und beim Fotos ansehen. */
.cam-live,
.cam-live *,
.rev-screen,
.rev-screen *,
.lb,
.lb *,
.pgrid,
.pgrid *,
.pitem,
.pitem *,
.pthumb,
.pact-ic,
.pdel,
.fab {
  animation: none !important;
}

.cam-live,
.cam-live *,
.rev-screen,
.rev-screen *,
.lb,
.lb *,
.pgrid,
.pgrid *,
.pitem,
.pitem *,
.pthumb,
.pact-ic,
.pdel,
.fab {
  transition: none !important;
}

.cam-live.cam-flash::after {
  animation: none !important;
  opacity: 0 !important;
}

.cam-live.cam-shot-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: #000;
  animation: camShotFlash 230ms cubic-bezier(.2, .8, .2, 1) forwards !important;
}

@keyframes camShotFlash {
  0% { opacity: 0; }
  18% { opacity: .86; }
  58% { opacity: .72; }
  100% { opacity: 0; }
}

.cam-live .cam-shutter:active,
.cam-live .cam-shutter:active .cam-shutter-ring,
.cam-live .cam-close-btn:active,
.cam-live .cam-flip-btn:active,
.cam-live .cam-top-btn:active,
.cam-live .cam-post-btn:active,
.rev-screen .rev-back:active,
.lb .lb-nav:active,
.fab:hover,
.fab:active {
  transform: none !important;
}

.lb .lb-nav:active {
  transform: translateY(-50%) !important;
}

.lb.lb-swiping .lb-img {
  transition: none !important;
}

.lb.lb-swipe-animating .lb-img {
  transition: none !important;
}

.lb.lb-swiping .lb-track {
  transition: none !important;
}

.lb.lb-swipe-animating .lb-track {
  transition: transform var(--lb-swipe-ms, 280ms) cubic-bezier(.22, .61, .36, 1) !important;
}

.lb-gallery .lb-stage {
  contain: layout size paint;
  background: #000;
}

.lb-gallery .lb-track,
.lb-gallery .lb-slide,
.lb-gallery .lb-img {
  backface-visibility: hidden;
}

.lb-gallery .lb-track {
  transform-style: preserve-3d;
}

.lb-gallery .lb-img {
  contain: paint;
  transform: translate3d(var(--lb-zoom-x, 0px), var(--lb-zoom-y, 0px), 0) scale(var(--lb-zoom-scale, 1));
  transform-origin: center center;
  cursor: zoom-in;
  will-change: transform;
}

.lb-gallery.is-zoomed .lb-img {
  cursor: grab;
}

.lb-gallery.is-zoomed.lb-zoom-panning .lb-img {
  cursor: grabbing;
}

.lb-gallery.is-zoomed .lb-stage,
.lb-gallery.is-zoomed .lb-img,
.lb-gallery.is-pinching .lb-stage,
.lb-gallery.is-pinching .lb-img {
  touch-action: none !important;
}

.lb-gallery.lb-zoom-animating .lb-img {
  transition: transform .16s ease-out !important;
}

.lb-gallery .lb-slide {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lb-gallery .lb-slide:nth-child(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lb-gallery.lb-swiping .lb-slide {
  transition: none !important;
}

.lb-gallery.lb-swipe-animating .lb-slide {
  transition: none !important;
}

.lb-gallery.lb-dir-next.lb-swipe-animating .lb-slide:nth-child(2),
.lb-gallery.lb-dir-prev.lb-swipe-animating .lb-slide:nth-child(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lb-gallery.lb-dir-next.lb-swipe-animating .lb-slide:nth-child(3),
.lb-gallery.lb-dir-prev.lb-swipe-animating .lb-slide:nth-child(1) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lb .lb-count,
.lb .lb-x {
  background: rgba(3, 7, 18, .86) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lb .lb-count {
  min-width: 2.9rem;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .48rem .82rem !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.lb .lb-x {
  width: 48px !important;
  height: 48px !important;
  top: max(.85rem, env(safe-area-inset-top)) !important;
  right: max(.85rem, env(safe-area-inset-right)) !important;
  z-index: 360 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
}

.lb .lb-x:hover,
.lb .lb-x:active {
  background: rgba(10, 16, 30, .96) !important;
}

/* Projektuebersicht: Planfoto fuellt die Karte komplett; Detailansicht bleibt separat komplett sichtbar. */
.fgrid > .fcard {
  overflow: hidden !important;
  isolation: isolate;
}

.fgrid > .fcard .fplan,
.fgrid > .fcard .fplan-ph {
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background-color: var(--surf2) !important;
  box-sizing: border-box !important;
}

.fgrid > .fcard .fplan {
  padding: 0 !important;
  background-image: var(--project-plan-cover, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

[data-theme="light"] .fgrid > .fcard .fplan,
[data-theme="light"] .fgrid > .fcard .fplan-ph {
  background-color: #edf2fa !important;
}

/* Camera viewfinder fills the screen; controls stay overlaid. */
.cam-live {
  --cam-media-top: 0px !important;
  --cam-media-right: 0px !important;
  --cam-media-bottom: 0px !important;
  --cam-media-left: 0px !important;
}

.cam-live .cam-video,
.cam-live .cam-captured {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Ruhige Foto-/Kamera-Flächen: kein schwarzes Einblenden beim Laden oder Scrollen. */
#photo-area .pitem,
#photo-area .pgrid.pgrid-zoom-saved .pitem {
  background: var(--surf2) !important;
}

#photo-area .pthumb,
#photo-area .pitem .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pthumb,
#photo-area .pitem.is-portrait .pthumb,
#photo-area .pitem.is-square .pthumb {
  background: var(--surf2) !important;
  opacity: 1 !important;
  filter: none !important;
}

#photo-area .pthumb:hover,
#photo-area .pthumb.is-loading,
#photo-area .pthumb.is-ready,
#photo-area .pthumb.is-error {
  opacity: 1 !important;
  filter: none !important;
}

.cam-video-placeholder {
  display: none !important;
}

.cam-live,
.cam-live .cam-video,
.cam-live .cam-captured {
  background: #111827 !important;
}

.cam-live .cam-video {
  opacity: 1 !important;
}

/* Floating capture button removed; photo capture now uses the header action. */
.fab {
  display: none !important;
}

html.camera-open,
body.camera-open {
  background: #111827 !important;
}