@charset "UTF-8";

:root {
    --base:hsl(231, 18%, 14%);
    --container:hsl(230, 20%, 18%);
    --element:hsl(232, 19%, 23%);
    --txt-light:hsl(231, 8%, 51%);
    --txt-default:hsl(233, 67%, 98%);
    --highlight:hsl(250, 60%, 60%);
    --spot:hsl(247, 39%, 44%);
    --page-bg: #f3e4cf;
    --page-text: #313233;
    --page-heading: #800000;
    --page-accent: #998b6d;
    --page-semi: color-mix(in srgb, var(--page-accent) 20%, transparent 100%);
}
*,*::after,*::before{ max-width:unset; -webkit-box-sizing:border-box; box-sizing:border-box; margin:0; padding:0; line-height:100%; }
html,
body { width:100vw; height:100vh; }
html { overflow-x:hidden; text-rendering:optimizeSpeed; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { position:relative; font-family:Arial,Helvetica,sans-serif; font-size:16px; color:var(--txt-default); background-color:var(--base); display:-webkit-box; display:-ms-flexbox; display:flex; overflow:clip; }

main { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; }
aside { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }

#editor-panel { width:100%; max-width:45vw; background-color:var(--container); position:relative; }
#editor-panel > footer { padding:10px 40px; background-color:var(--spot); }
#editor-panel > footer > .notes { margin-bottom:0.5em; }
#editor-panel > footer > .notes > div:first-child,
#editor-panel > footer > .notes > small { font-size:75%; white-space:nowrap; display:inline-block; vertical-align:top; width:calc(50% - 6px); }
#editor-panel > footer > .notes > small { text-align:right; }
#editor-panel > header { width:100%; height:auto; }

.app-title { background-color:var(--highlight); text-transform:uppercase; padding:12px 0 10px 40px; }
.app-title > h1 { display:inline-block; font-size:20px; font-weight:bold; line-height:1; color:var(--txt-default); margin-bottom:5px;  }
.app-title > h2 { display:inline-block; font-size:18px; font-weight:bold; line-height:1; color:var(--highlight); background:var(--txt-default); padding:1px 0 0 4px; }
.app-title > h2 > u { text-decoration:none; border-bottom:2px solid var(--txt-default); }

#toolbar { background-color:var(--spot); padding:12px 0 5px 39px; }
#toolbar ul { list-style:none; display:block; }
#toolbar ul li { position:relative; display:inline-block; width:auto; margin-right:5px; margin-bottom:5px; }
#toolbar button { background-color:var(--element); color:var(--txt-default); border:1px solid var(--container); padding:8px 12px; border-radius:4px; cursor:pointer; -webkit-transition:background-color 0.2s; -o-transition:background-color 0.2s; transition:background-color 0.2s; }
#toolbar button:hover { background-color:var(--highlight); }

#toolbar .dropdown-menu,
#toolbar .flyout-menu { display:none; position:absolute; z-index:10; background-color:var(--element); border:1px solid var(--base); border-radius:4px; padding:5px!important; min-width:180px; -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.2); box-shadow:0 4px 8px rgba(0,0,0,0.2); -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; gap:5px; }
#toolbar .dropdown-menu { top:100%; left:0; }
#toolbar .flyout-menu { top:-6px; left:100%; }

.dropdown:hover > .dropdown-menu,
.has-flyout:hover > .flyout-menu { display:-webkit-box!important; display:-ms-flexbox!important; display:flex!important; }

.dropdown-menu li,
.flyout-menu li { width:100%; }
.dropdown-menu button,
.flyout-menu button { width:100%; text-align:left; }

.has-flyout { position:relative; }
.has-flyout > button::after { content:'›'; position:absolute; right:10px; font-size:1.2em; color:var(--txt-light); }

#highlighter-wrapper { position:relative; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; margin:0; font-size:16px; overflow:hidden; }
#editor,
#highlighter-highlights,
#highlighter-linenumbers { margin:0; -webkit-box-sizing:border-box; box-sizing:border-box; position:absolute; top:0; height:100%; font-family:'Courier New', Courier, monospace; font-size:inherit; line-height:1.5; padding:1vw; }
#highlighter-linenumbers { left:0; width:40px; padding-left:0; padding-right:0; text-align:right; color:var(--container); background-color:var(--spot); z-index:1; overflow:hidden; border-right:1px solid var(--container); }
#highlighter-linenumbers > span { display:block; line-height:1.5; padding-right:5px; font-weight:bold; position:relative; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
#highlighter-linenumbers > span:nth-child(odd) { background:-webkit-gradient(linear, right top, left top, color-stop(80%, color-mix(in srgb, var(--highlight) 20%, transparent 80%)),to(transparent)); background:-o-linear-gradient(right, color-mix(in srgb, var(--highlight) 20%, transparent 80%) 80%,transparent 100%); background:linear-gradient(-90deg, color-mix(in srgb, var(--highlight) 20%, transparent 80%) 80%,transparent 100%); }
#highlighter-linenumbers > span::after { content:""; display:block; width:100%; height:1px; position:absolute; top:98%; left:5px; background:-webkit-gradient(linear, right top, left top, color-stop(75%, var(--element)), to(transparent)); background:-o-linear-gradient(right, var(--element) 75%, transparent 100%); background:linear-gradient(-90deg, var(--element) 75%, transparent 100%); opacity:0.75; }
#editor,
#highlighter-highlights { left:40px; width:calc(100% - 40px); border:none; outline:none; white-space:pre-wrap; word-wrap:break-word; }
#editor { z-index:2; color:var(--txt-light); background:transparent; resize:none; overflow-x:hidden; scrollbar-color:var(--container) var(--spot); scrollbar-width:auto; }
#highlighter-highlights { z-index:1; color:transparent; pointer-events:none; overflow:auto; }

/* action buttons */
#editor-panel footer input[type="file"]::-webkit-file-upload-button { font-size:0.75rem; background:var(--element); color:white; border:1px solid var(--highlight); line-height:0.75rem; border-radius:3px; padding:3px 5px; cursor: pointer; text-transform:normal; }
#editor-panel footer button,
#editor-panel footer input[type="file"]::file-selector-button { font-size:0.75rem; background:var(--element); color:white; border:1px solid var(--highlight); line-height:0.75rem; border-radius:3px; padding:3px 5px; cursor: pointer; text-transform:normal; }
#editor-panel footer .print { float:right; border-color:var(--element); background:var(--highlight); }

/* preview area */
#preview { width:55vw; max-width:900px!important; height:100vh; overflow-y:scroll; overflow-x:hidden; padding-top:40px; padding-bottom:20px; scrollbar-color:var(--spot) var(--base); scrollbar-width:auto; direction:rtl; }
#preview .page { width:794px; height:1123px; background-color:transparent; -webkit-box-shadow:0 4px 8px black; box-shadow:0 4px 8px black; margin-left:auto; margin-right:auto; position:relative; direction:ltr; }
#preview .page > .page-entry.landscape { height:794px; width:1123px; }

#preview .page:first-child { margin-top:0; }
#preview .page:last-child { margin-bottom:20px !important; }

#preview .page-entry { position:relative; width:794px; height:1123px; background-color:white; -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; padding:10mm; -webkit-box-sizing:border-box; box-sizing:border-box; overflow:clip; }
#preview .page-entry.landscape { height:794px; width:1123px; }

/* preview area font-styles */
#preview h1 { font-size:180%; line-height:110%; color:var(--page-heading); font-weight:bold; letter-spacing:0.05em; text-transform:uppercase; }
#preview h1, #preview h2 { text-shadow: 0 1px 2px var(--page-accent), 0 -2px 1px #ffffffAA; }
#preview h2, #preview h4 { font-size:120%; line-height:110%; color:var(--page-heading); font-weight:normal; text-transform:uppercase; }
#preview h3 { color:inherit; position:relative; font-size:100%; line-height:110%; text-indent:0; }
#preview h3:first-letter { font-size:285%; float:left; margin:0.16em 0.05em 0 -0.1em; color:var(--page-accent); text-shadow:0 1px 1px color-mix(in srgb, var(--page-heading) 50%, var(--page-accent) 50%), 0 -1px 2px #ffffffAA, -0.09em 0.025em 3px #f5ecddAA, -0.18em 0.075em 0px var(--page-semi); }
#preview h4 { text-transform:unset; font-variant:small-caps slashed-zero; border-bottom:2px solid var(--page-accent); color:var(--page-text); margin-bottom:0.25em; color:var(--page-heading); letter-spacing:0.03em; }
#preview :is(h5,h6) { font-family:'Times New Roman',Times,serif; text-transform:unset; font-weight:bolder; font-variant:small-caps slashed-zero; letter-spacing:0.05em; font-size:105%; line-height:110%; }

#preview h2:has(+ h1) { text-align:center; letter-spacing:0.1em; margin-top:-0.5em; }
#preview h2:has(+ h1)::before,
#preview h2:has(+ h1)::after { content:""; display:inline-block; vertical-align:bottom; width:3.6em; height:1.25em; margin:0 0.4em; background:transparent url('image/stroke-m.svg') no-repeat center; background-size:100% auto; }
#preview h2:has(+ h1)::after { -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); margin:0 0.35em; }
#preview h2 + h1 { position:relative; text-align:center; padding-top:0.25em; margin-bottom:2em; font-weight:bold; }
#preview h2 + h1::before,
#preview h2 + h1::after { content:""; position:absolute; top:100%; left:0%; display:inline-block; vertical-align:bottom; width:50%; height:1.25em; background:transparent url('image/stroke.svg') no-repeat center; background-size: 100% auto; }
#preview h2 + h1::after { -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); left:49.925%; }

#preview p { font-family:'Times New Roman',Times,serif; position:relative; font-weight:normal; line-height:130%; margin-bottom:1em; max-width:80ch; }
/*#preview p { backdrop-filter:blur(12px) brightness(120%) contrast(77%) opacity(25%) sepia(23%); }*/
#preview .page > .page-entry > *:not(:has(img)) { opacity:0.88; }

#preview ul, 
#preview ol { font-family:'Times New Roman',Times,serif; font-size:100%; line-height:100%; margin-bottom:1em; }
#preview ol { counter-reset:circle-count; list-style:none; padding:0; }
#preview :is(p,ul,ol) + :is(h1,h2,h3,h4,h5,h6) { margin-top:1.5em!important; }
#preview p + ul,
#preview p + ol { margin-top:-0.75em; }
#preview ul > li { line-height:130%; margin:0 0 0.25em 0; list-style:circle; padding:0; }
#preview ol > li { line-height:130%; padding:0.25em 0 0.25em 0.75em; margin:0; counter-increment:circle-count; position:relative; border-left: 2px solid transparent; }
#preview ol li:nth-child(odd) { border-left-color:var(--page-accent); background-color:#7d746b30; }
#preview ol li::before { content:counter(circle-count); color:#eee5d6; font-size:80%; font-weight:normal; position:absolute; top:calc(50% - 0.625em); left:-0.75em; line-height:1.1em; width:calc(1.1em + 3px); height:calc(1.1em + 3px); background:var(--page-heading); border-radius:50%; text-align:center; border:2px solid #eee5d6; }

/* Preview table layout */
#preview table { font-family:'Times New Roman',Times,serif; position:relative; color:var(--page-heading); font-size:90%; border-collapse:collapse; width:calc(100% + 1em); margin:1em 0 1.75em -0.5em; }
#preview table::before,
#preview table::after { content:""; position:absolute; bottom:100%; left:0; height:0.25em; width:100%; background:var(--page-heading); border-radius:2px 60% 60% 2px; }
#preview table::after { bottom:unset; top:100%; }
#preview tr:nth-child(odd) > td { position:relative; background-color:#7d746b30; }
#preview th, #preview td { border:0; padding:0.25em 0.5em; }
#preview tr:nth-child(odd) > td:last-child { background:-webkit-gradient(linear, right top, left top, from(#eee5d6), color-stop(50%, #7d746b30)); background:-o-linear-gradient(right, #eee5d6 0%, #7d746b30 50%); background:linear-gradient(-90deg, #eee5d6 0%, #7d746b30 50%); }
#preview th { text-align:left; font-style:italic; border-bottom:1px solid var(--page-heading); }

/* Preview secondary table */
#preview :is(h4,h5,h6) + table,
#preview :is(h4,h5,h6) + .column > table,
#preview :is(h4,h5,h6) + p + .column > table,
#preview :is(h4,h5,h6) + p + table,
#preview :is(h4,h5,h6) + p + .column + .column > table { color:var(--page-text); margin-top:0.5em; margin-bottom:1em; border:0; }
#preview :is(h4,h5,h6) + table::after, #preview :is(h4,h5,h6) + table::before,
#preview :is(h4,h5,h6) + .column > table::after, #preview :is(h4,h5,h6) + .column > table::before,
#preview :is(h4,h5,h6) + p + .column > table::after, #preview :is(h4,h5,h6) + p + .column > table::before,
#preview :is(h4,h5,h6) + p + table::after, #preview :is(h4,h5,h6) + p + table::before,
#preview :is(h4,h5,h6) + p + .column + .column > table::after, #preview :is(h4,h5,h6) + p + .column + .column > table::before { content:unset; display:none; }
#preview :is(h4,h5,h6) + table :is(th,td),
#preview :is(h4,h5,h6) + .column > table :is(th,td),
#preview :is(h4,h5,h6) + p + .column > table :is(th,td),
#preview :is(h4,h5,h6) + p + table :is(th,td),
#preview :is(h4,h5,h6) + p + .column + .column > table :is(th,td) { font-style:normal; border:0; border-right:0.5em solid transparent; }

/* Image floats */
#preview img[alt*="klein"] { height:auto; width:40%; margin:1em; }
#preview img[alt*="groß"] { height:auto; width:99%; margin:1em 0; }
#preview img[alt*="größer"] { position:absolute; top:0; left:0; height:auto; width:150%; margin:0; }
#preview img[alt*="rechts"] { float:right; margin-top:0; margin-right:0; }
#preview img[alt*="links"] { float:left; margin-top:0; margin-left:0; }
#preview img[alt*="cover"] { position:absolute; top:0; left:50%; width:auto; max-width:unset; height:100%; transform:translateX(-50%); }

/* Blockquote */
#preview blockquote { position:relative; border-left:none; border-right:none; z-index:1; display:block; padding:0; background:transparent; }
#preview blockquote { border:20px solid transparent; -o-border-image:url('image/blockquote_border-image.svg') 20 round; border-image:url('image/blockquote_border-image.svg') 20 round; }
#preview blockquote::after { content:""; -webkit-box-shadow:0 15px 10px -15px black; box-shadow:0 15px 10px -15px black; position:absolute; border:0; z-index:-1; top:-12px; left:-20px; width:calc(100% + 40px); height:calc(100% + 24px); background:-o-linear-gradient(85deg,color-mix(in srgb,var(--page-accent) 50%,transparent 100%) 25%,color-mix(in srgb,var(--page-accent) 25%,transparent 100%) 100%); background:linear-gradient(5deg,color-mix(in srgb,var(--page-accent) 50%,transparent 100%) 25%,color-mix(in srgb,var(--page-accent) 25%,transparent 100%) 100%); mix-blend-mode:color-burn; }
#preview blockquote > *:last-child { margin-bottom:0; padding-bottom:0; }
/* Column-Layout */
#preview .column + hr { margin-top:0; }
#preview h2:has(+ .column > h3:first-child) { margin-bottom:0.5em; }
#preview .column h2:not(:first-of-type) { color:var(--page-text); font-size:100%; line-height:110%; border-bottom:1px solid currentColor; margin:0.75em 0 calc(-0.25em + 1px) 0; }

#preview .column { display:inline-block; vertical-align:top; width:50%; margin-right:-4px; margin-bottom:1rem; padding-right:0.75em; padding-left:0; }
#preview .column + .column:not(:has(+ .column)) { width:45%; padding-left:0.75em; padding-right:0; }
#preview .column > *:last-child { margin-bottom:0; }

#preview .column:has(+ .column + .column),
#preview .column + .column:has(+ .column),
#preview .column + .column + .column:not(:has(+ .column)) { width:33.33%; }
#preview .column + .column:has(+ .column) { padding-left:0.75em; }

#preview hr { position:relative; display:block; clear:both; overflow:visible; width:100%; height:2px; background:#998b6dCC; border:0; border-bottom:1px dotted #ffffff99; margin:1em 0; -webkit-box-shadow:0 1px 0 #00000088; box-shadow:0 1px 0 #00000088; }
#preview hr::before, #preview hr::after { content:""; position:absolute; display:inline-block; border-radius:50%; width:7px; height:7px; background:var(--page-accent); top:-2px; left:-1px; }
#preview hr::after { left:unset; right:-1px; }

/* perchment */
#preview pre { font-family:'Times New Roman',Times,serif; position:relative; z-index:1; border-radius:0.75em 0.75em 1px 1px; z-index:1; display:inline-block; width:calc(100% + 1em); height:auto; padding:0.5em; margin:1em 0 2em -0.5em; background-color:color-mix(in srgb, var(--page-accent) 20%, var(--page-heading) 10%);; color:var(--bg-color); clear:both; border:2px solid #7d746b; border-bottom:0; -webkit-box-shadow:inset 0 0 2em #12131444, 0 0.4em 0.75em -0.5em #00000099; box-shadow:inset 0 0 2em #12131444, 0 0.4em 0.75em -0.5em #00000099; }
#preview pre > code { display:inline-block; width:100%; font-family:'Times New Roman',Times,serif; word-break:normal; word-wrap:normal; white-space:normal; line-break:auto; padding:0.1em 0.2em 0.3em 0.2em; font-weight:bolder; text-align:center; }
#preview pre::before { content:""; position:absolute; z-index:-1; bottom:-18px; left:-2px; max-width:unset; width:calc(100% + 4px); height:100%; border:28px solid transparent; -o-border-image:url('image/perchment-role.svg') 33 round; border-image:url('image/perchment-role.svg') 33 round; }

/* double border */
#preview .frameing { font-family:'Times New Roman',Times,serif; position:relative; z-index:1; z-index:1; display:inline-block; width:100%; height:auto; position:relative; padding:1em 1.5em; margin:0; }
#preview .frameing::after { content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; border:31px solid transparent; -o-border-image:url('image/double_border-image.svg') 13.75 round; border-image:url('image/double_border-image.svg') 13.75 round; }
#preview .frameing > *:last-child { margin-bottom:0; }
#preview .frameing > * { background-color:var(--page-bg); }

/* Pagination */
.pagination { position:absolute; z-index:1337; bottom:1.5em; right:2em; color:var(--page-heading); display:block; font-size:80%; font-weight:bold; opacity:0.5; text-shadow: 0 0 4px #e9ddcf, 0 0 3px #e9ddcf, 0 0 2px #e9ddcf; }
.pagination::after { content:""; background:transparent url('image/stroke.svg') no-repeat center; background-size:100% 100%; position:absolute; z-index:-1; top:-0.6em; right:0; width:56ch; max-width:unset; height:2em; -webkit-transform:scale(1,-1); -ms-transform:scale(1,-1); transform:scale(1,-1); }
.pagination > .number { display:inline-block; width:4ch; text-align:right; margin-left:2ch; }
.pagination > .indent { background-color:#f3e4cfCC; }
#preview .page:nth-child(2n) .pagination { right:unset; left:2em; direction:rtl; }
#preview .page:nth-child(2n) .pagination::after { right:unset; left:0; -webkit-transform:scale(-1,-1); -ms-transform:scale(-1,-1); transform:scale(-1,-1); }
#preview .page:nth-child(2n) .pagination > * { direction:ltr; text-align:left; margin-left:0; margin-right:2ch; }

#autoSaveStatus { position:fixed; bottom:4em; left:50px; background:green; color:white; padding:7px 14px; border-radius:5px; opacity:0; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s; transition:opacity 0.5s; z-index:100; }
#autoSaveStatus.visible { opacity:1; }
#filenameModal { border:1px solid var(--txt-light); border-radius:8px; background:var(--container); color:var(--txt-default); padding:20px; }
#filenameModal::-webkit-backdrop { background:rgba(0, 0, 0, 0.5); }
#filenameModal::backdrop { background:rgba(0, 0, 0, 0.5); }

/* Background-Images */
.pagebg { position:absolute; z-index:-1; top:0; left:0; width:100%; height:36%; }
.pagebg > span { position:relative; z-index:-1; display:block; width:100%; height:100%; background-size:100% auto; background-position:0% 40%; background-repeat:no-repeat; }
.pagebg::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background-size:100% 100%; background-image:url('frame/top_painted.png'); background-position:left bottom; background-repeat:no-repeat; }

span + .pagebg + * { margin-top:15%!important; }

h1 + .pagebg,
h2 + .pagebg,
h3 + .pagebg,
h4 + .pagebg,
p + .pagebg { left:unset; bottom:unset; top:0; right:0; width:48%; height:85%; }

h1 + .pagebg > span,
h2 + .pagebg > span,
h3 + .pagebg > span,
h4 + .pagebg > span,
p + .pagebg > span { background-size:auto 100%; background-position:40% 10%; }

h1 + .pagebg::after,
h2 + .pagebg::after,
h3 + .pagebg::after,
h4 + .pagebg::after,
p + .pagebg::after { width:calc(100% + 4px); height:calc(100% + 4px); left:-2px; bottom:-2px; background-image:url('frame/right_painted.png'); }

.pagebg:last-child { top:unset; bottom:0; width:100%; height:33%; }
.pagebg:last-child > span { background-size:100% auto; background-position:0% 40%; background-repeat:no-repeat; }
.pagebg:last-child::after { width:calc(100% + 4px); height:calc(100% + 4px); left:-2px; bottom:-2px; background-image:url('frame/bottom_painted.png'); }

/* Print-Page layouts */
.page-entry { background:var(--page-bg) url('image/old_paper.jpg') no-repeat center; background-size:cover; color:var(--page-text); font-size:16px; line-height:16px; letter-spacing:0.1px; font-family:'Times New Roman',Times,serif; }
.page-entry h1,
.page-entry h2,
.page-entry h3,
.page-entry h4 { color:var(--page-heading); }

@media print {
    @page { margin:0!important; }
    dialog, 
    #editor-panel { display:none!important; }
    html, body, main, #preview { display:block!important; width:unset!important; height:unset!important; margin:0!important; padding:0!important; -webkit-transform:0!important; -ms-transform:0!important; transform:0!important; -webkit-appearance:unset!important; -moz-appearance:unset!important; appearance:unset!important; background:0!important; overflow:visible!important; }
    #preview > .page { margin:0!important; padding:0!important; width:unset!important; height:unset!important; overflow:visible!important; -webkit-transform:unset!important; -ms-transform:unset!important; transform:unset!important; }
    #preview > .page > .page-entry { display:block!important; width:794px!important; height:1123px!important; -webkit-transform:unset!important; -ms-transform:unset!important; transform:unset!important; }
    #preview > .page > .page-entry.landscape { height:794px!important; width:1123px!important; }
    #preview > .page { position:relative!important; page-break-after:always; }
    #preview > .page > .page-entry > * { z-index:100!important; }
    #preview > .page > .page-entry > .column { position:relative; }
    #preview > .page > .page-entry > .pagebg { z-index:0!important; }
}