*{box-sizing:border-box} :root{--ink:#25313a;--steel1:#f6f7f7;--steel2:#c9ced1;--steel3:#8f989d;--accent:#1769aa}body{margin:0;color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#edf0f2}button,input,textarea,select{font:inherit}button{border:0;border-radius:9px;padding:10px 14px;background:#1769aa;color:white;font-weight:700;cursor:pointer}button:hover{filter:brightness(.95)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7cbcff;outline-offset:2px}label{display:grid;gap:6px;margin:12px 0;font-weight:650}input,textarea,select{width:100%;border:1px solid #c8d0d5;border-radius:8px;padding:10px;background:white;color:#202832}input[type=color]{height:44px;padding:4px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 20%,#fff,#dfe5e8 70%)}.login-card,.panel,.modal-card{background:#fff;border:1px solid #d9dfe2;border-radius:16px;padding:22px;box-shadow:0 12px 34px #24313b12}.login-card{width:min(100%,420px)}h1,h2,h3{line-height:1.2}h1{font-size:1.6rem}.fridge-mini{text-align:center;font-size:3rem}.login-card button,.login-card form button{width:100%;margin-top:8px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:#18252e;color:white;position:sticky;top:0;z-index:5}.topbar>div,.top-actions{display:flex;align-items:center;gap:14px}.welcome{color:#d0dce3;font-size:.9rem}.topbar form{margin:0}.daycount{font-size:.85rem;color:#d5e4ec}.secondary{background:#42525e}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;max-width:1500px;margin:20px auto;padding:0 18px}.fridge-area{min-width:0}.fridge-title{display:flex;justify-content:space-between;align-items:center;padding:0 4px 12px;font-weight:800;letter-spacing:.12em}.fridge{position:relative;min-height:75vh;overflow:hidden;border:1px solid #929ca1;border-radius:18px;padding:24px;background:linear-gradient(90deg,#aeb6ba 0%,#e8ebec 9%,#cbd1d4 20%,#f5f6f6 45%,#cbd1d4 70%,#f4f5f5 90%,#aab3b8 100%);box-shadow:inset 0 0 18px #35434a55,0 12px 26px #0002}.fridge:before{content:"";position:absolute;top:0;bottom:0;left:74%;width:4px;background:linear-gradient(90deg,#8c969a,#f8f9f9,#8e989c);box-shadow:3px 0 7px #0002}.fridge:after{content:"";position:absolute;top:30%;bottom:30%;right:18px;width:9px;border-radius:8px;background:linear-gradient(90deg,#8a9499,#f9fafa,#929ca1);box-shadow:1px 1px 4px #0005}.posts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;align-items:start;padding:8px 22px 20px 4px}.postit{position:relative;min-height:160px;padding:17px 15px 14px;background:var(--note,#ffe66d);color:#2b2b2b;box-shadow:2px 5px 9px #0003;cursor:pointer;transform:rotate(var(--tilt,1deg));overflow-wrap:anywhere;transition:transform .12s,box-shadow .12s}.postit:nth-child(3n){--tilt:-1.5deg}.postit:nth-child(4n){--tilt:1.8deg}.postit:hover{transform:rotate(0) scale(1.025);box-shadow:4px 8px 14px #0004}.postit:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:#fff5}.post-text{white-space:pre-wrap;margin:6px 0 16px}.post-meta{font-size:.72rem;color:#4b4b4b;border-top:1px dashed #0003;padding-top:8px}.post-image{display:block;width:100%;max-height:160px;object-fit:cover;margin:8px 0;border-radius:4px}.post-views{font-size:.72rem;margin-top:5px}.post-actions{display:flex;justify-content:flex-end;margin-top:6px}.delete-post{background:#9d3434;font-size:.75rem;padding:5px 8px}.sidebar{display:grid;gap:14px;align-content:start}.panel{padding:18px}.panel h2{font-size:1.15rem;margin:0 0 10px}.panel h3{font-size:1rem}.panel hr{border:0;border-top:1px solid #e1e5e8;margin:18px 0}.small{font-size:.78rem;color:#65727a}.log-list{max-height:240px;overflow:auto;font-size:.82rem}.log-entry{padding:8px 0;border-bottom:1px solid #edf0f2}.log-entry span{display:block;color:#71808a;font-size:.75rem}.modal{position:fixed;inset:0;background:#0c1820a8;display:grid;place-items:center;padding:18px;z-index:10}.hidden{display:none!important}.modal-card{position:relative;width:min(100%,520px);max-height:90vh;overflow:auto}.expanded-card{width:min(100%,720px)}.x{position:absolute;right:12px;top:10px;background:#e8edf0;color:#29343b;font-size:1.4rem;padding:3px 11px}.expanded-note{padding:24px;box-shadow:0 5px 18px #0002;white-space:normal;overflow-wrap:anywhere}.expanded-note .post-text{white-space:pre-wrap;font-size:1.1rem}.expanded-note img{max-width:100%;max-height:60vh;object-fit:contain}.notice{background:#e0f5e6;padding:10px;border-radius:8px}.error{background:#ffe4e4;padding:10px;border-radius:8px}.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:30;background:#1f303a;color:white;padding:12px 18px;border-radius:10px;box-shadow:0 8px 25px #0003;max-width:90vw}.change-wrap{max-width:650px;margin:35px auto;padding:18px}.change-wrap .panel{padding:24px}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.fridge{min-height:55vh}.fridge:before{left:85%}}@media(max-width:560px){.topbar{align-items:flex-start;flex-direction:column}.topbar>div{width:100%;justify-content:space-between}.welcome{font-size:.8rem}.layout{padding:0 9px;margin:12px auto}.fridge{padding:12px;min-height:60vh}.posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-right:14px}.postit{min-height:140px;padding:14px 11px;font-size:.9rem}.fridge:after{right:8px}.fridge-title{letter-spacing:.05em;font-size:.8rem}.fridge-title button{font-size:.85rem;padding:9px}.login-card{padding:20px}}

/* Mobile-first usability improvements (added October 2026) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth }
body{min-width:0;overflow-x:hidden}
button, input, textarea, select{max-width:100%}
button, .postit, input[type=color]{touch-action:manipulation}
input,textarea,select{font-size:16px} /* prevents unwanted zoom on iOS */
.postit{min-width:0;word-break:break-word}
.fridge{isolation:isolate}
@media(max-width:700px){
  .topbar{position:relative;padding:12px 14px;gap:8px}
  .topbar>div,.top-actions{flex-wrap:wrap;gap:8px}
  .layout{display:flex;flex-direction:column;gap:14px;margin:10px auto;padding:0 10px}
  .fridge-title{gap:8px;align-items:center;letter-spacing:.03em;font-size:.78rem}
  .fridge-title button{white-space:nowrap;padding:10px 12px;min-height:44px}
  .fridge{min-height:58vh;padding:10px;border-radius:12px}
  .fridge:before{left:88%;width:3px;opacity:.75}
  .fridge:after{right:5px;width:6px;opacity:.8}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 12px 16px 2px}
  .postit{min-height:130px;padding:13px 10px 11px;font-size:.9rem;transform:rotate(var(--tilt,0deg))}
  .postit:hover{transform:rotate(var(--tilt,0deg));box-shadow:2px 5px 9px #0003}
  .post-image{max-height:120px}
  .post-meta,.post-views{font-size:.72rem}
  .sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .panel{padding:15px;border-radius:12px}
  .modal{padding:10px;align-items:end}
  .modal-card,.expanded-card{width:100%;max-width:none;max-height:88dvh;border-radius:16px 16px 10px 10px;padding:18px}
  .expanded-note{padding:18px}
  .expanded-note .post-text{font-size:1rem}
  .x{min-width:44px;min-height:44px;right:8px;top:8px}
  .login-wrap{padding:12px;min-height:100svh}
  .login-card{padding:18px}
  .change-wrap{margin:12px auto;padding:10px}
  .change-wrap .panel{padding:18px}
  .toast{bottom:max(12px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 24px);text-align:center}
}
@media(max-width:380px){
  .posts{grid-template-columns:minmax(0,1fr);padding-right:8px}
  .postit{min-height:100px}
  .fridge-title{font-size:.72rem}
  .fridge-title button{font-size:.8rem;padding:9px}
}
@media(hover:none){.postit:hover{transform:rotate(var(--tilt,0deg));box-shadow:2px 5px 9px #0003}}


/* Comicartige Einflug-Animation: Haus -> Küche -> Kühlschrank */
.first-views{font-size:.74rem;margin-top:8px;padding-top:7px;border-top:1px dashed #0003;color:#3b4b3e}
.first-views b{display:block;margin-bottom:3px}.first-views span{display:block}
.post-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.post-tools button,.edit-post-btn{font-size:.85rem;padding:8px 11px}
.edit-area{width:100%;min-height:130px;margin:8px 0}

/* Anmeldeseite: kleine, farbige Post-its neben Titel und Anmeldehinweis – responsiv */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 20%,#fff,#dfe5e8 70%)}
.login-card{width:min(100%,520px);position:relative;z-index:1;overflow:hidden}
.login-heading{display:grid;grid-template-columns:minmax(112px,.8fr) minmax(0,1.2fr);gap:12px;align-items:center;margin:0 0 20px;}
.login-heading-text{min-width:0;position:relative;z-index:2}
.login-heading-text h1{margin:0 0 8px;font-size:clamp(1.45rem,5vw,1.8rem);white-space:nowrap}
.login-heading-text p{margin:0;color:#46545d;white-space:normal}
.login-decor{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start;pointer-events:none}
.login-note{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:38px;padding:6px 5px;text-align:center;font-weight:700;color:#26313a;box-shadow:2px 3px 5px #25313a25;border:1px solid #00000010;font-size:clamp(.58rem,1.8vw,.72rem);line-height:1.15;overflow-wrap:anywhere;word-break:normal;border-radius:1px}
.login-note:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff55}
.login-note span{margin-right:2px;flex-shrink:0}
.note-a{background:#ffe66d;transform:rotate(-2deg);font-family:"Comic Sans MS","Segoe Print",cursive}
.note-b{background:#ff9fc8;transform:rotate(1.5deg);font-family:Georgia,serif}
.note-c{background:#9ee8f4;transform:rotate(1deg);font-family:"Trebuchet MS",sans-serif}
.note-d{background:#bce98a;transform:rotate(-1.5deg);font-family:"Comic Sans MS","Segoe Print",cursive}
.note-e{background:#ffc47a;transform:rotate(1deg);font-family:monospace}
.note-f{background:#d7c2ff;transform:rotate(-1deg);font-family:Georgia,serif}
@media(max-width:600px){
 .login-wrap{padding:12px;min-height:100svh}
 .login-card{width:100%;max-width:440px;padding:16px;border-radius:16px}
 .login-heading{grid-template-columns:minmax(94px,.82fr) minmax(0,1.18fr);gap:8px;margin-bottom:18px;align-items:center}
 .login-heading-text h1{font-size:clamp(1.25rem,6vw,1.55rem);white-space:nowrap}
 .login-heading-text p{font-size:.9rem;line-height:1.25}
 .login-decor{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .login-note{min-height:34px;padding:5px 3px;font-size:clamp(.52rem,2.3vw,.65rem);line-height:1.1;box-shadow:1px 2px 4px #25313a20}
}
@media(max-width:360px){.login-heading{grid-template-columns:minmax(88px,.75fr) minmax(0,1.25fr);gap:6px}.login-note{font-size:.5rem;min-height:32px}}


/* Korrektur Login-Post-its 17.10.2026: kompakt neben der Überschrift, niemals als lose Textliste. */
.login-heading{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(145px,1fr)!important;gap:10px!important;align-items:center!important}
.login-heading-text{grid-column:1;grid-row:1;min-width:0;z-index:2}
.login-decor{grid-column:2;grid-row:1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;min-width:0;align-self:center}
.login-note{display:flex!important;position:relative!important;min-width:0!important;min-height:35px!important;padding:5px 4px!important;font-size:clamp(9px,1.5vw,12px)!important;line-height:1.12!important;overflow-wrap:anywhere!important;white-space:normal!important}
@media(max-width:600px){
 .login-heading{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:8px!important}
 .login-heading-text h1{font-size:clamp(21px,6vw,27px)!important;white-space:nowrap}
 .login-heading-text p{font-size:clamp(13px,3.8vw,16px)!important}
 .login-decor{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
 .login-note{min-height:31px!important;padding:4px 3px!important;font-size:clamp(8px,2.5vw,10px)!important;line-height:1.08!important}
}
@media(max-width:360px){
 .login-heading{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;gap:5px!important}
 .login-note{font-size:8px!important;min-height:29px!important}
}