/* Start view: fit the viewport, not an arbitrarily tall landing page. */
body[data-view=start]{height:100svh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body[data-view=start]>header{padding:18px 28px 10px;background:transparent;color:#244b40;flex:none}
body[data-view=start] h1{font-size:clamp(26px,2.6vw,42px);margin:0;line-height:1.15}
body[data-view=start] h1 span{color:#9d753c}
body[data-view=start]>main{width:100%;max-width:1660px;padding:8px 28px;flex:1;min-height:0;display:flex;flex-direction:column}
#status:empty{display:none}#status{min-height:0;margin:0 0 6px;font-size:14px;line-height:1.3}
.startLayout{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(310px,1fr) minmax(290px,1fr);gap:24px;flex:1;min-height:0;align-items:stretch}
.startPhoto{margin:0;border-radius:18px;overflow:hidden;min-height:0;box-shadow:0 6px 24px #234b4015}
.startPhoto img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 32%}
#startPanel{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
#login{width:100%;margin:0;padding:24px}#login h2{margin:0 0 12px}#login label{margin:10px 0}#login input:not([type=checkbox]){padding:10px}#login button{width:100%}
#startControls{width:100%;min-height:0}#startControls .toolbar{gap:8px;justify-content:space-between;margin-bottom:10px}#startControls .toolbar button{padding:9px 12px;font-size:13px}#startControls .note{font-size:12px;line-height:1.35;margin:0 0 12px}

#flipper{display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px;max-height:100%;padding:6px 0 0}
#flipStage{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
#flipStage canvas{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 6px 24px #244b4025;background:white;border-radius:3px}
#flipStage p{font-size:14px;color:#617568}.flipNav{display:flex;justify-content:space-between;gap:10px;align-items:center;flex:none;height:44px}.flipNav button{width:48px;height:42px;padding:0;font-size:22px}.flipNav span{font-size:14px;text-align:center}
body[data-view=start]>footer{padding:8px;font-size:12px;flex:none}
body:not([data-view=start])>header{padding:16px 24px;background:transparent;color:#244b40}body:not([data-view=start]) h1{font-size:30px;margin:0}body:not([data-view=start])>main{max-width:1160px;padding-top:0}
#editor .editorActions{position:sticky;bottom:0;display:flex;justify-content:center;padding:12px;background:#f4f3eced;z-index:5;border-top:1px solid #d7ded4}#save{min-width:220px}#editor #design{margin:0 auto 16px}#editor .bleedFrame{max-width:620px;margin:18px auto}#editor>p{text-align:center}#adminArea{margin:0;padding:18px}#adminBack{margin-bottom:16px}#adminMonths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(min-width:1500px){.startLayout{gap:34px}}
@media(max-width:1000px) and (min-width:701px){.startLayout{grid-template-columns:minmax(130px,.6fr) minmax(270px,1fr) minmax(220px,.9fr);gap:16px}body[data-view=start]>main{padding:6px 18px}}
@media(max-width:700px){body[data-view=start]>header{padding:12px 14px 6px}body[data-view=start] h1{font-size:25px}body[data-view=start]>main{padding:4px 12px;max-width:none}.startLayout{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(82px,14svh,130px) auto minmax(0,1fr);gap:9px}.startPhoto{border-radius:12px}.startPhoto img{object-position:50% 27%}#startPanel{display:block}#login{padding:12px 14px}#login h2{font-size:19px;margin-bottom:6px}#login label{font-size:13px;margin:6px 0}#login input:not([type=checkbox]){padding:8px;margin-top:3px}#login button{padding:10px}#startControls .toolbar{margin:0 0 6px}#startControls .toolbar button{padding:7px 9px;font-size:12px}#roleBadge{font-size:12px}#startControls .note{font-size:11px;margin-bottom:6px}#flipper{gap:5px;padding:0}.flipNav{height:36px}.flipNav button{height:36px;width:44px}.flipNav span{font-size:12px}body[data-view=start]>footer{font-size:10px;padding:4px}#status{font-size:12px;line-height:1.2;margin-bottom:4px}#adminMonths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:650px) and (min-width:701px){body[data-view=start]>header{padding:8px 20px 4px}body[data-view=start] h1{font-size:28px}.startLayout{gap:16px}#startControls .note{margin-bottom:5px}}
@media(max-height:650px) and (max-width:700px){.startLayout{grid-template-rows:65px auto minmax(0,1fr);gap:5px}body[data-view=start]>header{padding-top:6px}#login h2{display:none}#login{padding:8px 12px}#startControls .note{display:none}#flipper .flipNav{height:32px}.flipNav button{height:32px}}
#editor #resolution{max-width:620px;margin:4px auto 10px;text-align:center;font-size:13px;line-height:1.3;color:#74644a}#editor #resolution[data-level=warning]{color:#a34530;font-weight:600}
#editor #resolution[data-level=warning]{background:#fff0d4;color:#863d08;border:1px solid #db8c32;border-left:5px solid #d07819;border-radius:8px;padding:10px 12px;text-align:left;font-size:14px;font-weight:700}
/* One shared canvas renderer makes the ten styles identical in preview/PDF. */
#preview,#visual{background:#000}.calendar{background:#000;color:#f4f4f4}.calendar h3{color:#fff}.day{border-right-color:#333;color:#eee}.day.holiday{color:#ffb878;background:transparent}.day.saturday{background:transparent;color:#b8cbda}.day.holiday.saturday{color:#ffb878}#placeholder{color:#b9b9b9}
#sticker{padding:0!important;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;overflow:visible}#previewTitle,#previewText{display:none}#stickerArtwork{display:block;width:100%;height:auto;pointer-events:none}
#stylePicker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0}#stylePicker button{padding:6px;background:#c5c7c5;border:2px solid transparent;min-height:48px;display:flex;align-items:center;justify-content:center}#stylePicker button[aria-pressed=true]{border-color:#e4c27c;box-shadow:0 0 0 2px #244b40}#stylePicker canvas{max-width:100%;height:auto;display:block;pointer-events:none}
.calendar{font-family:KatrinSans,sans-serif}.calendar h3{font-family:KatrinSerif,serif}

#fontPicker{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}#fontPicker button{padding:7px 10px;background:#f3f4ef;color:#243c36;border:2px solid transparent;font-size:17px}#fontPicker button[aria-pressed=true]{border-color:#285848;background:#e2ece3}

.contactFields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contactFields label{min-width:0}#contact{position:absolute;bottom:1.347cqw;left:1.347cqw;right:1.347cqw;margin:0;font:400 .9cqw KatrinSans;line-height:1.1;color:#eee;white-space:nowrap}#contact:empty{display:none}@media(max-width:420px){.contactFields{gap:8px}.contactFields input{padding:10px 7px}}

#yearList{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}#yearList button{padding:10px;background:#fff;color:#243c36;border:1px solid #bbcbbd}#testYearBanner{padding:10px;border-left:4px solid #b28c43;background:#fbf0d7;font-size:14px}#testYearBanner button{padding:6px 9px;margin-left:8px}

#contact{display:none}#sticker{transform-origin:center}#rotateSticker{position:absolute;top:-17px;right:-17px;width:34px;height:34px;padding:0;border-radius:50%;background:#fff;color:#285848;border:2px solid #285848;font:24px KatrinSans;box-shadow:0 2px 6px #0004;touch-action:none}#rotateSticker:focus-visible{outline:3px solid #e5a248}

#editor #resolution{display:block;border-radius:8px;padding:10px 12px;text-align:left;font-size:14px;border:1px solid #ccd3ca;border-left-width:5px;background:#eef1ed;color:#3d4c40}#editor #resolution[data-level=fine]{background:#e4f3e6;color:#20582f;border-color:#82b68c;font-weight:500}#editor #resolution[data-level=borderline]{background:#fff4d1;color:#775608;border-color:#d5b346;font-weight:500}#editor #resolution[data-level=warning]{background:#fee6e3;color:#99271f;border-color:#ce766d;font-weight:700}

/* Cover selection and separate fullscreen viewer. */
.calendarLink{align-self:center;flex:none;padding:7px 12px;margin:5px 0 0;background:transparent;color:#285848;text-decoration:underline;font-size:14px}#flipStage{position:relative}.coverPage{position:relative;flex:none;max-width:100%;max-height:100%;box-shadow:0 6px 24px #244b4025}.coverPage canvas{display:block;width:100%!important;height:100%!important;box-shadow:none!important}.coverMonth{position:absolute;padding:0;background:transparent;border:1px solid transparent;border-radius:0;color:#294437;touch-action:manipulation}.coverMonth:hover,.coverMonth:focus-visible{border-color:#285848;outline:2px solid #e6b95e;outline-offset:1px}.coverMonth>span{position:absolute;bottom:1px;left:0;right:0;background:#fffefb;padding:1px;font:10px KatrinSans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coverMonth>small{position:absolute;left:1px;right:1px;top:2px;background:#fff1cfec;color:#744c08;font:9px KatrinSans;padding:2px}.coverMonth.vergeben:hover{background:#ffffff15}
#calendarDialog{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:12px;background:#f6f2e9;border:0;overflow:hidden}#calendarDialog[open]{display:flex;flex-direction:column;gap:10px}#calendarDialog::backdrop,#reserveDialog::backdrop{background:#18382bbd}#closeCalendar{align-self:flex-end;padding:9px 13px;flex:none}#modalStage{display:flex;justify-content:center;align-items:center;flex:1;min-height:0;overflow:hidden;touch-action:pan-y}#modalStage canvas{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 4px 30px #17392a33}#calendarDialog .flipNav{max-width:650px;width:100%;align-self:center}#reserveDialog{max-width:min(440px,90vw);padding:24px;border:0;border-radius:14px;color:#244b40;background:#fffdf5}#reserveDialog p{font-size:18px;line-height:1.4}#reserveDialog>div{display:flex;gap:12px;justify-content:flex-end}#cancelReserve{background:#e7ece6;color:#294437}

body:not([data-view=start]) #viewCalendar{display:none}

#feedbackDialog{margin:auto;border:0;border-radius:18px;padding:26px;max-width:min(420px,calc(100vw - 32px));box-shadow:0 18px 90px #0005;text-align:center;color:#203a30;background:#fffdf7}#feedbackDialog::backdrop{background:#142b2566;backdrop-filter:blur(3px)}#feedbackDialog p{font-size:1.15rem;line-height:1.5;margin:0 0 20px}#feedbackDialog button{min-width:100px}#feedbackDialog[data-kind=success]{border-top:5px solid #328363}.fieldError{display:block;color:#b32424;font-size:.85rem;margin:4px 0}[aria-invalid=true]{outline:2px solid #ba2929!important;border-color:#ba2929!important}

#feedbackDialog,#reserveDialog{margin:auto;border:0;border-radius:18px;padding:26px;max-width:min(440px,calc(100vw - 32px));box-shadow:0 18px 90px #0005;background:#fffdf7;color:#203a30}#feedbackDialog::backdrop,#reserveDialog::backdrop{background:#142b2566;backdrop-filter:blur(3px)}

#stickerTools{position:absolute;z-index:20;background:#fffdf7f2;color:#243c36;border-radius:14px;box-shadow:0 3px 18px #0005;padding:6px;display:flex;gap:5px;flex-wrap:wrap;width:280px;max-width:100%;touch-action:none}#stickerTools button{padding:4px;min-width:24px;height:26px;font-size:18px;background:#e4e9e3;color:#244638;line-height:1;border:1px solid #bbc5bb}#stickerTools button.colourDot{min-width:20px;width:20px;height:20px;border-radius:50%;align-self:center}#stickerTools button[aria-pressed=true]{outline:2px solid #33867a}#stickerTools .extraPopup{flex-basis:100%;display:flex;gap:4px;flex-wrap:wrap}#stickerTools img{width:23px;height:23px}.selected{outline:1px dashed #e4bc64}#resizeSticker{position:absolute;right:-12px;bottom:-12px;width:26px;height:26px;padding:0;border:1px solid #fff;border-radius:50%;background:#245848;color:#fff;touch-action:none;display:none}#sticker:not(.selected) #rotateSticker{display:none}#sticker.selected #resizeSticker{display:block}#decoLayer{position:absolute;inset:0;pointer-events:none;z-index:5}.deco{position:absolute;pointer-events:auto;touch-action:none;user-select:none}.deco canvas{display:block;width:100%;height:100%;pointer-events:none}.deco button{display:none;position:absolute;width:24px;height:24px;padding:0;background:#285848;border:1px solid #fff}.deco.selected button{display:block}.deco [data-mode=rotate]{top:-24px;right:0}.deco [data-mode=resize]{bottom:-12px;right:-12px}#sticker{z-index:6}

/* Explicit shrink constraints: all 28–31 days and the whole portrait page remain visible. */
#preview{width:100%;min-width:0;max-width:100%;grid-template-columns:none;grid-template-rows:none;gap:0}#editor .bleedFrame{width:100%;box-sizing:border-box;min-width:0}.calendar{width:auto;min-width:0;max-width:100%;box-sizing:border-box}#grid{width:100%;min-width:0;grid-auto-columns:minmax(0,1fr)}#grid>*{min-width:0;overflow:hidden}#modalStage,#pageGallery section{min-width:0}#modalStage canvas,#pageGallery canvas{display:block;object-fit:contain;max-width:100%;flex-shrink:1}#stickerTools{width:250px} .textTools{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 2px;position:relative}.textTools button{padding:6px 10px;background:#e8eee7;color:#244b40;min-width:34px}.textTools>button:first-child{font-weight:bold}.textTools>button:nth-child(2){font-style:italic}.inlineEmoji{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:#fffaf0;border-radius:10px}.inlineEmoji img{width:24px;height:24px;display:block}.inlineEmoji button{padding:5px}.textTools [hidden]{display:none!important}

#placeholder{display:flex;align-items:center;justify-content:center}#uploadPhoto{font-size:clamp(14px,2cqw,20px);padding:12px 20px;background:#fffffff0;color:#285848;border:1px solid #c6d1c7;border-radius:12px;z-index:4;cursor:pointer;pointer-events:auto}.photoLink{display:block;margin:0 auto 5px;padding:3px 8px;font-size:13px;background:none;color:#426454;text-decoration:underline}#stickerTools{width:300px}.styleOptions{flex-basis:100%;max-height:230px;overflow:auto;width:100%;padding:3px}#stickerTools #stylePicker{margin:4px 0;gap:4px}#stickerTools #stylePicker button{height:auto;min-height:45px;padding:3px}#stickerTools #fontPicker button{height:30px;font-size:14px;padding:3px 6px}#stickerTools #fontPicker{display:flex;flex-wrap:wrap;gap:4px}

#editor #resolution{white-space:pre-line}

.yearDeleteActions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.yearDeleteActions button{background:#87483f}#adminMonths input[type=checkbox]{margin:8px}#deleteConfirmRow{padding:10px;background:#fff1e6;border-radius:8px;color:#873c29;font-weight:600}

#stickerTools{overflow:auto}#stickerTools>button:not(.colourDot){font-size:12px;padding:4px 7px;height:28px;font-family:system-ui,sans-serif}#stickerTools #stylePicker{grid-template-columns:repeat(3,minmax(0,1fr))}#stickerTools #stylePicker button{display:flex;flex-direction:column;gap:3px;height:auto;min-height:65px}.styleName{display:block;font:10px system-ui,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#284b40}#resizeSticker svg,#rotateSticker svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.textTools button{font-size:13px}

#stickerTools #stylePicker button{background:#fffdf7;border:1px solid #d8dfd6}#stickerTools #stylePicker button[aria-pressed=true]{border:2px solid #2d725d}

.emojiCredit{font-size:9px;margin-left:8px}.emojiCredit a{color:inherit}

/* Signed out: a single quiet, centred login. Authenticated cover remains unchanged. */
body[data-auth=login]{display:grid;place-items:center;min-height:100svh;height:auto;overflow:auto;background:#f4f3ec;padding:24px}
body[data-auth=login]>header,body[data-auth=login]>footer,body[data-auth=login] .startPhoto,body[data-auth=login] #flipper,body[data-auth=login] #viewCalendar,body[data-auth=login] #workspace{display:none!important}
body[data-auth=login]>main{display:block;flex:none;width:100%;max-width:360px;padding:0;min-height:0}
body[data-auth=login] .startLayout{display:block;flex:none;min-height:0}
body[data-auth=login] #startPanel{display:block}
body[data-auth=login] #login{width:100%;max-width:none;margin:0;padding:28px;background:#fffefa;border:1px solid #e3e6dc;box-shadow:0 8px 32px #234b4008;border-radius:18px}
body[data-auth=login] #login h2{display:block;font:27px Georgia,serif;color:#244b40;text-align:center;margin:0 0 24px}
body[data-auth=login] #login label{font-size:14px;margin:16px 0}
body[data-auth=login] #login input:not([type=checkbox]){min-height:48px;padding:12px;width:100%}
body[data-auth=login] #login button{width:100%;min-height:46px;padding:12px}
@media(max-width:450px){body[data-auth=login]{padding:20px}body[data-auth=login] #login{padding:24px}}