/* ============================================================================================================
   Family & Friends Hub – peppiges Design «Stickeralbum»
   Eine eigene Schicht ÜBER style.css: Jede Regel hier gilt nur, solange <html> die Klasse «design-pep» trägt.
   Ausgeschaltet (Knopf mit der Farbpalette oben in der Leiste, nur Admins) sieht der Hub genau aus wie vorher.

   Idee: Der Hub als Stickeralbum der Familie. Dunkelblaue Tinte als Rand, kräftige Aufkleber-Schatten,
   runde, griffige Formen. Jeder Bereich hat seine Farbe:
     Messenger Mandarine · Video Himbeer · Fotos Sonne · Kalender Minze · Ablage Himmel · Verwaltung Flieder
   Schriften: Bricolage Grotesque (Titel, Knöpfe) und Figtree (Lesetext – freundlich und klar, gut lesbar für
   Kinder und Grosseltern). Beide liegen im Hub (public/vendor/fonts), nichts kommt aus dem Internet.
   ============================================================================================================ */
@font-face { font-family: "Bricolage Grotesque"; src: url("/vendor/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/vendor/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/vendor/fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root.design-pep {
  --tinte: #14213d;
  --mandarine: #ff7a1a; --sonne: #ffc93c; --himbeer: #ff5c8a; --minze: #2ec4a6; --himmel: #4dabf7; --flieder: #a78bfa;
  --ink: #14213d; --muted: #56627f; --line: #d8e0ef; --soft: #edf1f9;
  --bg: #eef2fb; --panel: #ffffff;
  --rail: #14213d; --rail-fg: #c5d0e8;
  --accent: #ff7a1a; --accent-ink: #14213d; --accent-text: #b94a06; --accent-soft: #ffe6d1;
  --navy: #14213d; --orange: #ff7a1a;
  --danger: #cf1f52;
  --mod: var(--mandarine); --mod-soft: #ffe6d1;         /* Farbe des Bereichs, in dem man gerade ist */
  --radius: 20px;
  --shadow: 0 2px 0 rgba(20,33,61,.05), 0 16px 36px rgba(20,33,61,.16);
  --display: "Bricolage Grotesque", "Figtree", ui-rounded, system-ui, sans-serif;
  --federn: cubic-bezier(.34, 1.56, .64, 1);            /* kleiner Überschwinger, wie ein Aufkleber, der einrastet */
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}
.design-pep body[data-mod="chat"]      { --mod: var(--mandarine); --mod-soft: #ffe6d1; }
.design-pep body[data-mod="video"]     { --mod: var(--himbeer);   --mod-soft: #ffe1ea; }
.design-pep body[data-mod="fotoalbum"] { --mod: var(--sonne);     --mod-soft: #fff2c9; }
.design-pep body[data-mod="calendar"]  { --mod: var(--minze);     --mod-soft: #d5f5ee; }
.design-pep body[data-mod="files"]     { --mod: var(--himmel);    --mod-soft: #dceeff; }
.design-pep body[data-mod="admin"]     { --mod: var(--flieder);   --mod-soft: #ebe4ff; }

.design-pep ::selection { background: var(--sonne); color: var(--tinte); }
.design-pep :focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; }
.design-pep * { scrollbar-width: thin; scrollbar-color: #b9c5de transparent; }
.design-pep h1, .design-pep h2, .design-pep h3, .design-pep h4 { font-family: var(--display); letter-spacing: -.015em; }
.design-pep a { text-underline-offset: 2px; }

/* ---------- Knöpfe: Aufkleber, die man drücken kann ---------- */
.design-pep .btn { border: 2px solid var(--tinte); border-radius: 14px; padding: 7px 14px; background: #fff; color: var(--tinte);
  font-family: var(--display); font-weight: 650; box-shadow: 0 3px 0 var(--tinte);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s; }
.design-pep .btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 var(--tinte); }
.design-pep .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tinte); }
.design-pep .btn.primary { background: var(--accent); border-color: var(--tinte); color: var(--tinte); }
.design-pep .btn.primary:hover { background: #ff8a33; filter: none; }
.design-pep .btn.danger { color: var(--danger); }
.design-pep .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.design-pep .btn.ghost:hover { background: var(--soft); transform: none; box-shadow: none; }
.design-pep .btn.ghost:active { transform: scale(.94); }
.design-pep .btn.icon { padding: 7px; border-radius: 12px; }
.design-pep .btn:disabled { opacity: .45; transform: none; box-shadow: 0 3px 0 var(--tinte); }
.design-pep .btn.ghost:disabled { box-shadow: none; }
.design-pep .btn svg { width: 17px; height: 17px; }
.design-pep .link-btn { font-family: var(--display); font-weight: 600; }

/* ---------- Eingabefelder ---------- */
.design-pep .input, .design-pep select.input, .design-pep textarea.input { border: 2px solid #c3cee4; border-radius: 13px; padding: 9px 12px; background: #fff;
  transition: border-color .12s, box-shadow .12s; }
.design-pep .input:focus, .design-pep textarea:focus { outline: 0; border-color: var(--tinte); box-shadow: 3px 3px 0 var(--sonne); }
.design-pep label.field > span { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--tinte); }
.design-pep input[type="checkbox"], .design-pep input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; }
.design-pep .check { gap: 10px; }
.design-pep .badge { font-family: var(--display); font-weight: 700; font-size: 11.5px; padding: 3px 9px; background: var(--soft); color: #44506e; }
.design-pep .role-badge { color: #fff; }
.design-pep .count { background: var(--sonne); color: var(--tinte); font-family: var(--display); font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; }

/* ---------- Rahmen: dunkelblaues Album, darin das helle Blatt ---------- */
.design-pep body, .design-pep .shell { background: var(--rail); }
.design-pep .shell { grid-template-columns: 92px 1fr; }
.design-pep .main { background-color: var(--bg); margin: 10px 10px 10px 0; border-radius: 26px; overflow: hidden;
  background-image: radial-gradient(#d3dcee 1.1px, transparent 1.3px); background-size: 22px 22px; }
.design-pep .rail { background: transparent; padding: 16px 0 14px; gap: 8px; }
.design-pep .rail .nav { width: 80px; padding: 4px 0 2px; gap: 5px; border-radius: 16px; background: none; color: var(--rail-fg);
  font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .01em; --c: #fff; }
.design-pep .rail .nav:hover { background: none; color: #fff; }
.design-pep .rail .nav > span:not(.count) { width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 16px;
  background: var(--c); color: var(--tinte); box-shadow: 0 3px 0 rgba(0,0,0,.38); transition: transform .22s var(--federn), border-radius .22s; }
.design-pep .rail .nav svg { width: 23px; height: 23px; stroke-width: 2.1; }
.design-pep .rail .nav:hover > span:not(.count) { transform: rotate(-7deg) scale(1.07); }
.design-pep .rail .nav:active > span:not(.count) { transform: scale(.92); }
.design-pep .rail .nav.active { background: none; color: #fff; font-weight: 750; }
.design-pep .rail .nav.active::before { display: none; }
.design-pep .rail .nav.active svg { color: var(--tinte); }
.design-pep .rail .nav.active > span:not(.count) { box-shadow: 0 0 0 3px var(--rail), 0 0 0 6px #fff; border-radius: 50%; animation: pep-einrasten .45s var(--federn); }
.design-pep .rail .nav[data-mod="chat"]      { --c: var(--mandarine); }
.design-pep .rail .nav[data-mod="video"]     { --c: var(--himbeer); }
.design-pep .rail .nav[data-mod="fotoalbum"] { --c: var(--sonne); }
.design-pep .rail .nav[data-mod="calendar"]  { --c: var(--minze); }
.design-pep .rail .nav[data-mod="files"]     { --c: var(--himmel); }
.design-pep .rail .nav[data-mod="admin"]     { --c: var(--flieder); }
.design-pep .rail .nav .count { top: -3px; right: 10px; background: #fff; color: var(--tinte); box-shadow: 0 0 0 2.5px var(--rail); }
.design-pep .rail .me { width: 46px; height: 46px; border-radius: 17px; border: 0; padding: 0; background: none; box-shadow: 0 0 0 2.5px #fff; overflow: hidden; margin-top: 4px; transition: transform .22s var(--federn); }
.design-pep .rail .me:hover { transform: rotate(6deg) scale(1.06); }
.design-pep .rail .me .avatar { width: 46px; height: 46px; border-radius: 0; font-size: 15px; box-shadow: none; }
@keyframes pep-einrasten { 0% { transform: scale(.7) rotate(-14deg); } 60% { transform: scale(1.1) rotate(4deg); } 100% { transform: none; } }

/* Leiste oben */
.design-pep .topbar { height: 52px; background: #fff; border-bottom: 1px solid var(--line); }
.design-pep .top-title { font-family: var(--display); font-weight: 500; font-size: 13.5px; color: var(--muted); }
.design-pep .top-feedback, .design-pep .top-design { border: 2px solid var(--tinte); background: #fff; color: var(--tinte); font-family: var(--display); font-weight: 650;
  box-shadow: 0 2px 0 var(--tinte); transition: transform .12s, box-shadow .12s; }
.design-pep .top-feedback { padding: 5px 13px; }
.design-pep .top-feedback:hover, .design-pep .top-design:hover { border-color: var(--tinte); color: var(--tinte); transform: translateY(-1px); box-shadow: 0 3px 0 var(--tinte); }
.design-pep .top-feedback:active, .design-pep .top-design:active { transform: translateY(2px); box-shadow: 0 0 0 var(--tinte); }
.design-pep .top-design { width: 34px; height: 34px; background: var(--sonne); }

/* Seiten */
.design-pep .page { padding: 28px 34px; }
.design-pep .page-head { margin-bottom: 22px; }
.design-pep .page-head h2, .design-pep .fa-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; padding: 0 8px 0 4px; margin-left: -4px;
  text-decoration: underline; text-decoration-color: var(--mod); text-decoration-thickness: .34em; text-underline-offset: -.16em; text-decoration-skip-ink: none; }
.design-pep .crumbs { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.design-pep .empty { font-family: var(--display); font-size: 16px; }

/* ---------- Karten: weisse Aufkleber mit farbigem Schatten ---------- */
.design-pep .card { border: 2px solid var(--tinte); border-radius: 22px; padding: 20px; box-shadow: 6px 6px 0 var(--s, var(--mod)); }
.design-pep .cards { gap: 22px; }
.design-pep .cards > .card:nth-child(4n+2) { --s: var(--sonne); }
.design-pep .cards > .card:nth-child(4n+3) { --s: var(--minze); }
.design-pep .cards > .card:nth-child(4n+4) { --s: var(--himmel); }
.design-pep .card h3 { font-size: 19px; font-weight: 750; }
.design-pep .stat { font-family: var(--display); font-size: 32px; font-weight: 800; }
.design-pep .file-ico { border-radius: 12px; background: var(--mod-soft); color: var(--tinte); }
.design-pep .file-ico.folder { background: var(--sonne); color: var(--tinte); }
.design-pep .file-ico.folder.personal { background: var(--mandarine); color: var(--tinte); }

/* Videoräume: nächste Meetings */
.design-pep .upcoming { border: 1.5px solid var(--line); border-radius: 20px; padding: 14px 18px; margin-bottom: 22px; }
.design-pep .upcoming h3 { font-size: 16px; font-weight: 750; }
.design-pep .up-when strong { font-family: var(--display); }

/* Tabellen */
.design-pep .table { border: 2px solid var(--tinte); border-radius: 20px; box-shadow: 6px 6px 0 var(--mod); border-collapse: separate; border-spacing: 0; }
.design-pep .table th { background: var(--mod-soft); color: var(--tinte); font-family: var(--display); font-weight: 700; font-size: 12.5px; border-bottom: 2px solid var(--tinte); }
.design-pep .table tr.click:hover td { background: #f6f8fd; }
.design-pep .tabs { gap: 8px; border-bottom: 0; }
.design-pep .tab { font-family: var(--display); font-weight: 650; padding: 7px 14px; border: 2px solid transparent; border-radius: 999px; color: var(--muted); }
.design-pep .tab:hover { background: #fff; color: var(--tinte); }
.design-pep .tab.active { background: var(--mod); color: var(--tinte); border-color: var(--tinte); box-shadow: 0 2px 0 var(--tinte); }

/* ---------- Menüs, Fenster, Hinweise ---------- */
.design-pep .menu { border: 2px solid var(--tinte); border-radius: 18px; padding: 7px; box-shadow: 5px 5px 0 var(--tinte); animation: pep-auf .16s var(--federn); transform-origin: top left; }
.design-pep .menu .item { border-radius: 11px; padding: 8px 11px; }
.design-pep .menu .item.active { background: var(--mod-soft); font-weight: 700; }
.design-pep .menu .label { text-transform: none; letter-spacing: 0; font-family: var(--display); font-weight: 700; font-size: 12px; }
.design-pep .backdrop { background: rgba(20,33,61,.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.design-pep .modal { border: 2.5px solid var(--tinte); border-radius: 26px; box-shadow: 9px 9px 0 var(--sonne); animation: pep-auf .22s var(--federn); }
.design-pep .modal header { padding: 22px 24px 0; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.design-pep .modal .body { padding: 16px 24px; }
.design-pep .modal footer { padding: 4px 24px 22px; gap: 10px; }
.design-pep .toast { background: var(--tinte); border-radius: 16px; padding: 11px 16px; font-weight: 600; box-shadow: 4px 4px 0 var(--sonne); animation: pep-auf .22s var(--federn); }
.design-pep .toast.error { background: var(--danger); box-shadow: 4px 4px 0 var(--tinte); }
@keyframes pep-auf { from { transform: scale(.92) translateY(6px); opacity: 0; } }

/* ---------- Personen ---------- */
.design-pep .avatar { border-radius: 38%; font-family: var(--display); font-weight: 800; color: var(--tinte); text-shadow: none; letter-spacing: 0;
  background-image: none; box-shadow: inset 0 0 0 1.5px rgba(20,33,61,.22); }
.design-pep .avatar .dot { width: 11px; height: 11px; background: #aab4c9; }
.design-pep .avatar .dot.on { background: #1fbf75; }
.design-pep .side-section .presence-dot.on { background: #1fbf75; }

/* ---------- Messenger ---------- */
.design-pep .side { width: 272px; background: #f8faff; border-right: 1px solid var(--line); }
.design-pep .side-head { padding: 18px 18px 8px; }
.design-pep .side-head .org-name { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.design-pep .side-section { font-family: var(--display); font-weight: 700; font-size: 12.5px; color: #44506e; padding-top: 16px; }
.design-pep .side-item { border-radius: 13px; padding: 7px 10px; border: 2px solid transparent; }
.design-pep .side-item:hover { background: #fff; }
.design-pep .side-item.active { background: var(--mod); color: var(--tinte); border-color: var(--tinte); box-shadow: 0 2px 0 var(--tinte); font-weight: 700; }
.design-pep .side-item.active svg { color: var(--tinte); }
.design-pep .side-item.offline.active { color: var(--tinte); }
.design-pep .chat { background: #fff; }
.design-pep .chat-head { padding: 12px 22px; }
.design-pep .chat-head .title { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
/* Tapete im Gespräch: kleine Kritzeleien, ganz blass */
.design-pep .messages { padding: 14px 22px 8px; background-color: #f3f6fd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23dbe3f3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='30' r='9'/%3E%3Cpath d='M92 18v16M84 26h16'/%3E%3Cpath d='M138 40c6-8 12 8 18 0s12 8 18 0' transform='translate(-14 0)'/%3E%3Cpath d='M40 104l10 17H30z'/%3E%3Cpath d='M104 96l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M150 120a9 9 0 1 0 0.1 0' stroke-dasharray='3 6'/%3E%3Cpath d='M22 160c8-10 16 10 24 0'/%3E%3Crect x='86' y='146' width='16' height='16' rx='4' transform='rotate(18 94 154)'/%3E%3Cpath d='M146 166l12-12M146 154l12 12'/%3E%3C/svg%3E"); }
.design-pep .day { font-family: var(--display); font-weight: 650; }
.design-pep .day::before, .design-pep .day::after { border-top: 2px dotted #c3cee4; }
.design-pep .msg { padding: 3px 8px; }
.design-pep .msg:hover { background: transparent; }
.design-pep .msg .name { font-family: var(--display); font-weight: 750; }
.design-pep .msg .meta { margin-bottom: 3px; }
.design-pep .msg .text { width: fit-content; max-width: min(100%, 64ch); background: #fff; border: 1.5px solid #c9d3e8; border-radius: 6px 18px 18px 18px;
  padding: 8px 13px; line-height: 1.45; box-shadow: 0 2px 0 #c9d3e8; margin-top: 2px; }
.design-pep .msg.cont .text { border-radius: 18px; }
.design-pep .msg .text.emoji-only { background: none; border: 0; box-shadow: none; padding: 0 2px; }
.design-pep .msg.mine { flex-direction: row-reverse; }
.design-pep .msg.mine > .avatar { display: none; }
.design-pep .msg.mine > .grow { display: flex; flex-direction: column; align-items: flex-end; }
.design-pep .msg.mine .meta .name { display: none; }
.design-pep .msg.mine .text { background: #ffdcbd; border-color: #f59a4f; box-shadow: 0 2px 0 #f59a4f; border-radius: 18px 6px 18px 18px; }
.design-pep .msg.mine.cont .text { border-radius: 18px; }
.design-pep .msg.mine .text.emoji-only { background: none; border: 0; box-shadow: none; }
.design-pep .messages > .msg:last-child .text { animation: pep-auf .25s var(--federn); transform-origin: bottom left; }
.design-pep .messages > .msg.mine:last-child .text { transform-origin: bottom right; }
.design-pep .msg .tools { display: none; top: -4px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 2px; box-shadow: 0 2px 0 var(--line); z-index: 2; }
.design-pep .msg:hover .tools, .design-pep .msg:focus-within .tools { display: flex; }
.design-pep .msg.mine .tools { right: auto; left: 8px; }
@media (hover: none) { .design-pep .msg .tools { display: flex; } }
.design-pep .msg .tools .btn { box-shadow: none; border: 0; padding: 5px; }
.design-pep .msg .deleted { background: none; }
.design-pep .attach { border: 2px solid var(--tinte); border-radius: 14px; background: #fff; box-shadow: 3px 3px 0 var(--himmel); }
.design-pep .attach-img { border: 2px solid var(--tinte); border-radius: 16px; }
.design-pep .composer { padding: 6px 22px 18px; background: #f3f6fd; }
.design-pep .typing { background: #f3f6fd; padding: 0 24px; font-style: italic; }
.design-pep .composer-box { border: 2px solid var(--tinte); border-radius: 22px; padding: 7px; background: #fff; box-shadow: 4px 4px 0 var(--mod); transition: box-shadow .15s; }
.design-pep .composer-box:focus-within { border-color: var(--tinte); box-shadow: 4px 4px 0 var(--sonne); }
.design-pep .composer textarea:focus { border: 0; box-shadow: none; }
.design-pep .composer-box .btn { box-shadow: none; border-color: transparent; border-radius: 50%; }
.design-pep .composer-box .btn.primary { border: 2px solid var(--tinte); width: 38px; height: 38px; justify-content: center; transition: transform .2s var(--federn); }
.design-pep .composer-box .btn.primary:hover { transform: rotate(-12deg) scale(1.08); box-shadow: none; }
.design-pep .composer-box .btn.primary:active { transform: scale(.9); }
.design-pep .e2e-badge { background: #dff6ea; color: #116a44; }
.design-pep .group-section { font-family: var(--display); }

/* ---------- Fotoalbum: Alben als Sofortbilder, leicht schief aufgeklebt ---------- */
.design-pep .fa-albums { gap: 26px; }
.design-pep .fa-album { background: #fff; border: 2px solid var(--tinte); border-radius: 10px 10px 16px 16px; padding: 10px 10px 14px; box-shadow: 6px 6px 0 var(--sonne);
  transition: transform .25s var(--federn), box-shadow .2s; }
.design-pep .fa-album:nth-child(odd) { transform: rotate(-1.6deg); }
.design-pep .fa-album:nth-child(even) { transform: rotate(1.3deg); }
.design-pep .fa-album:nth-child(3n) { box-shadow: 6px 6px 0 var(--himbeer); }
.design-pep .fa-album:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--himmel); }
.design-pep .fa-album:hover, .design-pep .fa-album:focus-visible { transform: rotate(0) scale(1.03); }
.design-pep .fa-album .fa-cover { border-radius: 5px; box-shadow: none; }
.design-pep .fa-album strong { font-family: var(--display); font-size: 17px; font-weight: 750; margin-top: 10px; }
.design-pep .fa-local { border-radius: 20px; background: var(--tinte); border: 2px solid var(--tinte); box-shadow: 6px 6px 0 var(--sonne); }
.design-pep .fa-local .btn { box-shadow: 0 3px 0 rgba(0,0,0,.4); border-color: #fff; }

/* ---------- Kalender ---------- */
.design-pep .seg { border: 2px solid var(--tinte); border-radius: 14px; box-shadow: 0 3px 0 var(--tinte); }
.design-pep .seg button { font-family: var(--display); font-weight: 650; padding: 7px 13px; }
.design-pep .seg button + button { border-left: 2px solid var(--tinte); }
.design-pep .seg button.on { background: var(--mod); color: var(--tinte); }
.design-pep .cal-title { font-family: var(--display); font-weight: 750; font-size: 18px; }
.design-pep .cal-week, .design-pep .cal-month { border: 2px solid var(--tinte); border-radius: 20px; box-shadow: 6px 6px 0 var(--mod); margin: 0 6px 6px 0; }
.design-pep .cal-dayhead strong { font-family: var(--display); font-weight: 750; }
.design-pep .cal-dayhead.today strong { background: var(--mod); color: var(--tinte); padding: 0 9px; }
.design-pep .cal-col.today { background: #eefbf7; }
.design-pep .cal-ev { background: #dcf5ee; color: var(--tinte); border-left: 4px solid var(--minze); border-radius: 9px; font-weight: 600; }
.design-pep .cal-ev.online { background: #ffe1ea; border-left-color: var(--himbeer); color: var(--tinte); }
.design-pep .cal-now, .design-pep .cal-now::before { background: var(--himbeer); }

/* ---------- Anmeldung: das Titelblatt ---------- */
.design-pep .login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 400px); align-items: center; align-content: center; justify-content: center;
  column-gap: clamp(28px, 7vw, 110px); row-gap: 22px; padding: 36px clamp(20px, 7vw, 110px); background: var(--tinte); position: relative; overflow: hidden; }
.design-pep .login-hello { display: flex; flex-direction: column; gap: 18px; color: #fff; min-width: 0; }
.design-pep .lh-big { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-size: clamp(60px, 9.5vw, 150px); line-height: .9; letter-spacing: -.04em; color: var(--sonne);
  animation: pep-hoi .7s var(--federn) both; }
.design-pep .lh-sub { position: relative; z-index: 2; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.35; max-width: 22ch; color: #dfe7f7; animation: pep-hoi .7s .12s var(--federn) both; }
.design-pep .lh-shape { position: absolute; z-index: 1; animation: pep-form .8s var(--federn) both; }
.design-pep .lh-1 { width: 54vmin; height: 54vmin; left: -17vmin; bottom: -24vmin; border-radius: 50%; background: var(--mandarine); animation-delay: .1s; }
.design-pep .lh-2 { width: 34vmin; height: 34vmin; right: -9vmin; top: -11vmin; border-radius: 50%; border: 6.5vmin solid var(--himbeer); animation-delay: .22s; }
.design-pep .lh-3 { width: 22vmin; height: 11vmin; right: 31%; bottom: -1vmin; border-radius: 11vmin 11vmin 0 0; background: var(--minze); animation-delay: .34s; }
.design-pep .lh-4 { width: 9vmin; height: 9vmin; left: 37%; top: 11%; background: var(--himmel); animation-delay: .46s;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.design-pep .login-card { position: relative; z-index: 3; max-width: 400px; border-radius: 28px; padding: 30px; box-shadow: 10px 10px 0 var(--mandarine); animation: pep-auf .5s .15s var(--federn) both; }
.design-pep .login-card .login-sub { display: none; }
.design-pep .login-card .btn.primary { font-size: 16.5px; padding: 12px !important; border-radius: 16px; box-shadow: 0 4px 0 var(--tinte); }
.design-pep .login-foot { grid-column: 1 / -1; position: relative; z-index: 3; text-align: center; color: #8fa0c4; font-family: var(--display); }
.design-pep .login > .login-card:first-child, .design-pep .login > .login-card:only-of-type:not(.login-hello ~ *) { grid-column: 1 / -1; justify-self: center; }
.design-pep .demo-users button { border-radius: 12px; padding: 6px 8px; }
@keyframes pep-hoi { from { transform: translateY(26px) rotate(-3deg); opacity: 0; } }
@keyframes pep-form { from { transform: scale(0) rotate(-40deg); } }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 760px) {
  .design-pep .shell { grid-template-columns: 1fr; }
  .design-pep .main { margin: 0; border-radius: 0 0 22px 22px; }
  .design-pep .rail { padding: 6px 6px calc(4px + var(--bottom-inset)); gap: 0; }
  .design-pep .rail .nav { width: auto; flex: 1; min-width: 0; font-size: 10.5px; gap: 3px; padding: 2px 0 0; }
  .design-pep .rail .nav > span:not(.count) { width: 36px; height: 36px; border-radius: 13px; box-shadow: 0 2px 0 rgba(0,0,0,.38); }
  .design-pep .rail .nav svg { width: 19px; height: 19px; }
  .design-pep .rail .nav.active > span:not(.count) { box-shadow: 0 0 0 2px var(--rail), 0 0 0 4px #fff; }
  .design-pep .rail .me { margin: 2px 6px 0 4px; box-shadow: 0 0 0 2px #fff; }
  .design-pep .rail .me .avatar { border-radius: 0; }
  .design-pep .chat-head { padding: 10px 12px; }
  .design-pep .chat-head .title { font-size: 17px; }
  .design-pep .rail .nav .count { right: calc(50% - 26px); }
  .design-pep .rail .me, .design-pep .rail .me .avatar { width: 36px; height: 36px; border-radius: 13px; font-size: 13px; }
  .design-pep .page { padding: 18px 16px; }
  .design-pep .page-head { gap: 10px; }
  .design-pep .page-head h2 { flex: 1 0 100%; }
  .design-pep .btn { padding: 7px 12px; }
  .design-pep .upcoming-row > .grow { min-width: 58%; }
  .design-pep .rail .nav.nav-bottom { margin-bottom: 0; }
  .design-pep .page-head h2, .design-pep .fa-head h2 { font-size: 25px; }
  .design-pep .side { width: 100%; }
  .design-pep .messages { padding: 10px 12px 6px; }
  .design-pep .composer { padding: 6px 12px 12px; }
  .design-pep .msg .text { max-width: 100%; }
  .design-pep .modal { border-radius: 22px; box-shadow: 6px 6px 0 var(--sonne); }
  .design-pep .login { grid-template-columns: minmax(0, 1fr); padding: 28px 18px; align-content: start; }
  .design-pep .login-hello { gap: 8px; padding-top: 4vh; }
  .design-pep .lh-big { font-size: clamp(54px, 17vw, 84px); }
  .design-pep .lh-sub { font-size: 16px; max-width: 26ch; }
  .design-pep .login-card { justify-self: center; width: 100%; box-shadow: 7px 7px 0 var(--mandarine); }
  .design-pep .lh-2 { width: 40vmin; height: 40vmin; border-width: 8vmin; right: -14vmin; top: -14vmin; }
  .design-pep .lh-3, .design-pep .lh-4 { display: none; }
}

/* Wer weniger Bewegung möchte, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .design-pep *, .design-pep *::before, .design-pep *::after { animation: none !important; transition: none !important; }
}