* { box-sizing: border-box; }
  body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #f3f5f8; color: #222; }
  header { background: #1f3b5c; color: #fff; padding: 20px 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
  header h1 { margin: 0; font-size: 1.6rem; }
  .toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
  input, textarea, button, select { font: inherit; }
  #search { padding: 8px 12px; border-radius: 6px; border: none; min-width: 240px; }
  button { cursor: pointer; border: none; border-radius: 6px; padding: 8px 16px; background: #3b82f6; color: #fff; }
  button.secondary { background: #e5e7eb; color: #222; }
  button.danger { background: #dc2626; }
  main { padding: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 24px; }

  .card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s; }
  .card:hover { transform: translateY(-3px); }
  .photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #fff; }
  .photos figure { aspect-ratio: 4 / 5; }
  .photos figure { margin: 0; position: relative; overflow: hidden; background: #cbd5e1; cursor: zoom-in; }
  .photos figure.empty { cursor: default; }
  .photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photos .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }
  .photos figure.main .ph { font-size: 2.6rem; }
  .photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: .72rem; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }

  .card .body { padding: 16px; flex: 1; }
  .card h2 { margin: 0 0 4px; font-size: 1.25rem; }
  .card .job { color: #3b82f6; font-weight: 600; margin-bottom: 12px; }
  .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .92rem; margin: 0; }
  .facts dt { color: #6b7280; }
  .facts dd { margin: 0; }
  .special { margin-top: 12px; padding: 10px 12px; background: #fff7e6; border-left: 4px solid #f59e0b; border-radius: 6px; font-size: .92rem; white-space: pre-line; }
  .special b { display: block; margin-bottom: 2px; color: #b45309; }
  .card .actions { padding: 0 16px 16px; display: flex; gap: 8px; }
  .card .actions button { padding: 4px 10px; font-size: .85rem; }
  .none { grid-column: 1/-1; text-align: center; color: #6b7280; padding: 60px; }

  dialog { border: none; border-radius: 12px; padding: 24px; width: min(620px, 95vw); }
  dialog::backdrop { background: rgba(0,0,0,.45); }
  form label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .9rem; }
  form input, form textarea, form select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
  form textarea { min-height: 70px; resize: vertical; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .upload { border: 2px dashed #cbd5e1; border-radius: 10px; padding: 8px; text-align: center; font-size: .85rem; }
  .upload .prev { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; background: #f1f5f9 center/cover no-repeat; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 2rem; cursor: pointer; }
  .upload .title { font-weight: 600; margin-bottom: 6px; }
  .upload-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .upload button { padding: 2px 8px; font-size: .75rem; margin-top: 2px; }
  #cropDlg { width: fit-content; max-width: 96vw; text-align: center; }
  #cropDlg h2 { margin-top: 0; }
  #cropDlg .hint { display: block; max-width: 340px; margin: 0 auto 12px; }
  .crop-frame { position: relative; overflow: hidden; margin: 0 auto; background: #fff; border-radius: 4px;
    box-shadow: 0 0 0 1px #cbd5e1, 0 4px 14px rgba(0,0,0,.15); touch-action: none; cursor: grab; user-select: none; }
  .crop-frame:active { cursor: grabbing; }
  .crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
  #cropZoom { width: min(320px, 78vw); margin: 14px auto 6px; display: block; }
  .crop-quick { display: flex; justify-content: center; gap: 8px; }
  .upload input[type=file] { display: none; }
  .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

  #lightbox { background: transparent; padding: 0; width: auto; max-width: 92vw; text-align: center; }
  #lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 10px; display: block; }
  #lightbox p { color: #fff; margin: 10px 0 0; font-size: 1.1rem; }
  #lightbox::backdrop { background: rgba(0,0,0,.85); }
  button.accent { background: #f59e0b; }

  /* ---------- Slideshow-Einstellungen ---------- */
  form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
  .check input { width: auto; }

  /* ---------- Slideshow / Freundebuch ---------- */
  #show { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
          background: radial-gradient(ellipse at center, #6b4a2f 0%, #3b2616 70%, #22160c 100%); }
  #show.open { display: flex; }
  #show.idle { cursor: none; }
  .book { width: min(94vw, calc((100vh - 80px) * 1.45)); aspect-ratio: 1.45; container-type: inline-size;
          background: linear-gradient(135deg, #8b1e2d, #5c1220); border-radius: 1.2cqw; padding: 1.3cqw;
          box-shadow: 0 2cqw 5cqw rgba(0,0,0,.6); }
  .spread { position: relative; width: 100%; height: 100%; perspective: 260cqw; }
  .slot { position: absolute; top: 0; width: 50%; height: 100%; }
  .slot.l { left: 0; } .slot.r { left: 50%; }
  .page { position: absolute; inset: 0; overflow: hidden; background: #fffdf5; color: #2b2b2b;
          font-family: "Segoe UI", Arial, sans-serif; font-size: 1.35cqw; }
  .page.left  { border-radius: .6cqw 0 0 .6cqw; box-shadow: inset -2.5cqw 0 2.5cqw -1.5cqw rgba(0,0,0,.28); }
  .page.right { border-radius: 0 .6cqw .6cqw 0; box-shadow: inset 2.5cqw 0 2.5cqw -1.5cqw rgba(0,0,0,.28); }
  .hand { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; }
  .pageno { position: absolute; bottom: 1.2cqw; font-size: 1cqw; color: #9ca3af; }
  .page.left .pageno { left: 2cqw; } .page.right .pageno { right: 2cqw; }

  .leaf { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 5; }
  .leaf.next { left: 50%; transform-origin: left center; }
  .leaf.prev { left: 0; transform-origin: right center; }
  .leaf .page { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .leaf .page.back { transform: rotateY(180deg); }
  .leaf .shade { position: absolute; inset: 0; pointer-events: none; background: rgba(0,0,0,.35); opacity: 0; }

  /* linke Seite: Polaroids */
  .photos-page { height: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2.2cqw 1.4cqw; padding: 1.5cqw 1.2cqw; }
  .polaroid { width: 21.5cqw; background: #fff; padding: .9cqw .9cqw 0; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.25); position: relative; }
  .polaroid::before { content: ""; position: absolute; top: -1cqw; left: 50%; width: 6cqw; height: 1.8cqw; transform: translateX(-50%) rotate(-3deg);
                      background: rgba(250, 230, 150, .75); }
  .polaroid .img { width: 100%; aspect-ratio: 4 / 5; font-size: 6cqw; background: #e5e7eb center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
  .polaroid .cap { text-align: center; padding: .5cqw 0 .8cqw; font-size: 1.75cqw; color: #374151; }
  .polaroid:nth-child(1) { transform: rotate(-2deg); }
  .polaroid:nth-child(2) { transform: rotate(2deg); }
  .polaroid:nth-child(3) { transform: rotate(-1deg); }

  /* rechte Seite: Steckbrief */
  .info-page { height: 100%; padding: 3cqw 3.4cqw; display: flex; flex-direction: column; }
  .info-page h1 { margin: 0 0 1.6cqw; font-size: 3.8cqw; color: #8b1e2d; font-weight: 400; text-align: center; }
  .field { display: flex; align-items: baseline; gap: 1cqw; border-bottom: .12cqw dashed #cbd5e1; padding: .7cqw 0 .3cqw; }
  .field .k { font-size: 1.15cqw; color: #6b7280; white-space: nowrap; min-width: 11cqw; }
  .field .v { font-size: 2.25cqw; color: #1e3a8a; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .special-box { margin-top: 1.8cqw; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .special-box .k { font-size: 1.15cqw; color: #6b7280; }
  .special-box .v { flex: 1; overflow: hidden; font-size: 2.1cqw; color: #1e3a8a; line-height: 2.6cqw; white-space: pre-line;
                    background: repeating-linear-gradient(transparent 0, transparent 2.45cqw, #cbd5e1 2.45cqw, #cbd5e1 2.6cqw); }

  /* Deckblatt */
  .cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4cqw; }
  .cover h1 { font-size: 5.3cqw; margin: 0; color: #8b1e2d; font-weight: 400; }
  .cover p { font-size: 2.3cqw; color: #4b5563; }
  .cover .deco { font-size: 6cqw; }

  /* Steuerleiste */
  #ctrl { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
          background: rgba(0,0,0,.6); padding: 8px 12px; border-radius: 999px; color: #fff; transition: opacity .3s; }
  #show.idle #ctrl { opacity: 0; }
  #ctrl button { background: transparent; color: #fff; padding: 6px 10px; font-size: 1.1rem; border-radius: 999px; }
  #ctrl button:hover { background: rgba(255,255,255,.15); }
  #ctrl .count { min-width: 70px; text-align: center; font-size: .9rem; }
  #progress { position: fixed; left: 0; top: 0; height: 4px; background: #f59e0b; width: 0; }
  #endMsg { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.65); color: #fff; padding: 8px 18px; border-radius: 999px; display: none; }

/* ---------- Server-Version: Login, Codes, Status ---------- */
.hidden { display: none !important; }
.badge { background: #f59e0b; color: #1f2937; border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; margin-left: 8px; vertical-align: middle; }
.hint { font-size: .82rem; color: #6b7280; margin: 4px 0 0; }
.error { color: #b91c1c; font-size: .9rem; margin-top: 10px; min-height: 1.2em; }
.code-box { font-family: Consolas, monospace; font-size: 1.1rem; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; word-break: break-all; user-select: all; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 2000; pointer-events: none; }
.busy { opacity: .6; pointer-events: none; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1f3b5c; }
.login-card { background: #fff; border-radius: 14px; padding: 32px; width: min(380px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-card h1 { margin: 0 0 6px; font-size: 1.5rem; }
.login-card p { color: #6b7280; margin: 0 0 18px; font-size: .92rem; }
.login-card input { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; }
.login-card button { width: 100%; margin-top: 14px; padding: 10px; }

/* ---------- Handschrift (lokal ausgeliefert, keine externen Server) ---------- */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/caveat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/caveat-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Rollen: Banner, eigene Karte, Einladungen, Link/QR ---------- */
.banner { margin: 24px 32px 0; padding: 16px 20px; background: #fff7e6; border: 1px solid #fcd34d; border-radius: 12px;
          display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.banner p { margin: 0; }
.card.mine { outline: 3px solid #f59e0b; }
.card .mine-tag { display: inline-block; font-size: .72rem; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.card .actions { flex-wrap: wrap; }

.inv-add { display: flex; gap: 8px; margin: 8px 0 14px; }
.inv-add input { flex: 1; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.inv-table th, .inv-table td { text-align: left; padding: 6px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.inv-table th { color: #6b7280; font-weight: 600; font-size: .8rem; }
.inv-table td.acts { white-space: nowrap; text-align: right; }
.inv-table td.acts button { padding: 3px 8px; font-size: .8rem; margin-left: 4px; }
.inv-list { max-height: 55vh; overflow: auto; }
.pill { border-radius: 999px; padding: 1px 8px; font-size: .75rem; font-weight: 600; }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.open { background: #e5e7eb; color: #374151; }
.inv-sum { color: #6b7280; font-size: .85rem; margin: 0 0 6px; }
.inv-add label.check.inline { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .85rem; }
.inv-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: #f8fafc; border: 1px solid #e5e7eb;
                border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: .88rem; }
.inv-settings select { width: 100%; margin-top: 4px; padding: 6px; }
.inv-settings button.small { padding: 3px 10px; font-size: .8rem; margin: 6px 6px 0 0; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #374151; cursor: pointer; white-space: nowrap; }
.switch input { width: 18px; height: 18px; accent-color: #16a34a; }
dialog#invDlg { width: min(820px, 96vw); }

/* ---------- Hinweis bei eingeschraenkter Sicht + Beispielprofil ---------- */
.note { margin: 20px 32px 0; padding: 12px 16px; background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 12px; color: #1e3a8a; font-size: .92rem; }
.card.example { position: relative; outline: 3px dashed #a78bfa; }
.card .example-tag { display: inline-block; font-size: .72rem; background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.example-ribbon { position: absolute; top: 14px; left: -34px; z-index: 2; transform: rotate(-45deg); background: #7c3aed; color: #fff;
                  font-weight: 700; font-size: .8rem; letter-spacing: .06em; padding: 4px 40px; box-shadow: 0 2px 6px rgba(0,0,0,.25); text-transform: uppercase; pointer-events: none; }

.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid #e5e7eb; border-radius: 8px; }
.link-box { font-family: Consolas, monospace; font-size: .85rem; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; word-break: break-all; user-select: all; }
.form-actions.wrap { flex-wrap: wrap; }
.login-switch { text-align: center; margin: 16px 0 0 !important; font-size: .85rem; }
.login-switch a { color: #6b7280; }
.login-card label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .88rem; }
#code { font-family: Consolas, monospace; letter-spacing: .05em; }

/* ---------- Smartphone / kleine Bildschirme ---------- */
@media (max-width: 700px) {
  header { padding: 14px 16px; }
  header h1 { font-size: 1.3rem; }
  .toolbar { width: 100%; }
  .toolbar button { flex: 1 1 auto; }
  #search { min-width: 0; width: 100%; flex: 1 1 100%; }
  main { padding: 16px; gap: 16px; }
  .banner { margin: 16px 16px 0; }
  .row { grid-template-columns: 1fr; }
  dialog { padding: 16px; width: 96vw; max-height: 92dvh; }
  .upload-grid { gap: 6px; }
  .upload { padding: 4px; font-size: .75rem; }
  .card:hover { transform: none; }
  .inv-table .col-login { display: none; }
  .inv-settings { grid-template-columns: 1fr; }
  .inv-add { flex-wrap: wrap; }
  .note { margin: 16px 16px 0; }
  .inv-table td.acts { white-space: normal; }
  .inv-table td.acts button { margin: 2px 0 2px 4px; }
}
/* Eingabefelder min. 16px: sonst zoomt iOS beim Antippen hinein */
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* ---------- Slideshow auf dem Handy ---------- */
#rotateHint { display: none; position: fixed; inset: 0; z-index: 20; flex-direction: column; align-items: center; justify-content: center;
              gap: 18px; padding: 24px; text-align: center; color: #fff; background: rgba(34, 22, 12, .96); }
#rotateHint .icon { font-size: 4rem; animation: sb-rotate 2s ease-in-out infinite; }
#rotateHint p { margin: 0; font-size: 1.1rem; }
#rotateHint .row2 { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@keyframes sb-rotate { 0%, 20% { transform: rotate(0); } 50%, 70% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) and (max-width: 700px) {
  #show:not(.small-ok) #rotateHint { display: flex; }
  #show.small-ok .book { width: 98vw; }
}

/* Handy quer: Buch fuellt den ganzen Bildschirm, Groessen nach Hoehe */
@media (orientation: landscape) and (max-height: 560px) {
  #show .book { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; padding: 1.2vh 1.2vw; }
  #show .page { font-size: 3.2vh; }
  #show .photos-page { gap: 3.5vh 3vh; padding: 2vh; }
  #show .polaroid { padding: 1.6vh 1.6vh 0; }
  #show .polaroid::before { top: -1.8vh; width: 10vh; height: 3vh; }
  #show .polaroid { width: 31vh; }
  #show .polaroid .img { font-size: 9vh; }
  #show .polaroid .cap { font-size: 3.6vh; padding: .8vh 0 1.2vh; }
  #show .info-page { padding: 3.5vh 4vh; }
  #show .info-page h1 { font-size: 7vh; margin: 0 0 1.5vh; }
  #show .field { gap: 2vh; padding: 1vh 0 .4vh; border-bottom-width: 1px; }
  #show .field .k { font-size: 3.2vh; min-width: 24vh; }
  #show .field .v { font-size: 4.6vh; }
  #show .special-box { margin-top: 2vh; }
  #show .special-box .k { font-size: 3.2vh; }
  #show .special-box .v { font-size: 4.3vh; line-height: 5.4vh;
    background: repeating-linear-gradient(transparent 0, transparent 5.1vh, #cbd5e1 5.1vh, #cbd5e1 5.4vh); }
  #show .pageno { font-size: 2.6vh; bottom: 1.5vh; }
  #show .cover h1 { font-size: 11vh; }
  #show .cover p { font-size: 5vh; }
  #show .cover .deco { font-size: 13vh; }
  #ctrl { bottom: 8px; padding: 4px 8px; }
  #ctrl button { padding: 4px 8px; font-size: 1rem; }
}

/* Bildausschnitt-Dialog bei wenig Hoehe (Handy quer) */
@media (max-height: 560px) { #cropDlg { padding: 10px 16px; } #cropDlg .hint { display: none; } #cropDlg h2 { font-size: 1rem; margin-bottom: 6px; } #cropZoom { margin: 8px auto 4px; } #cropDlg .form-actions { margin-top: 8px; } }