*, *::before, *::after { margin: 0; padding: 0; font: inherit; box-sizing: border-box; }

:root {
	color-scheme: dark;
	accent-color: #5099eb; --accent: #5099eb;
	
	--muted: #999;      /* grau / text4 */
	--info: #5099eb;    /* blau */
	--success: #50eb99; /* grün */
	--warning: #ebcf50; /* gelb */
	--danger: #eb5050;  /* rot */
	--notice: #eb9950;  /* orange */
	--special: #9950eb; /* lila */
	
	--box0: #000;
	--box1: #0D0F11;
	--box2: #111417;
	--box3: #15181C;
	--box4: #191C20;
	--box5: #24272B;
	
	--text0: #000;
	--text1: #222;
	--text2: #444;
	--text3: #666;
	--text4: #999; /* muted */
	--text5: #fff;
}

:root:has(#switch:checked) {
	color-scheme: light;
	accent-color: #5099eb; --accent: #5099eb;
	
	--muted: #666;
	--info: #005bb5;
	--success: #008040;
	--warning: #a07a00;
	--danger: #b30000;
	--notice: #eb9950;
	--special: #6b21a8;
	
	--box0: #fff;
	--box1: #e2e5e9;
	--box2: #ffffff;
	--box3: #f1f3f5;
	--box4: #eceef1;
	--box5: #dee2e6;
	
	--text0: #fff;
	--text1: #adb5bd;
	--text2: #868e96;
	--text3: #495057;
	--text4: #212529;
	--text5: #000;
}

html { min-block-size: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--box1); }

body { 
display: flex; gap: 1rem; flex-wrap: wrap; 
max-inline-size: 55rem; margin-inline: auto; padding-inline: 1rem; 
font-family: monospace, Courier; font-size: .9rem; font-weight: 100; 
background: var(--box4); color: var(--text4);
}

/* EXTRAS */
a { text-decoration: none; color: var(--text4); text-decoration-skip-ink: auto; }
a:hover { color: var(--text5); }
strong { font-weight: 900; }
em { font-style: italic; }
i { color: var(--notice); }
b { font-size: 1rem; }
small { font-size: .7rem; }
abbr { text-decoration: underline dotted; text-decoration-color: var(--accent); }
code { font-family: monospace; color: var(--accent); }
mark, kbd { background: var(--box5); color: var(--text4); padding-inline: .2rem; }
[for="switch"] { color: var(--accent); }
ol, ul { list-style-position: inside; }

/* COLORS */
[data-accent] { color: var(--accent); }
[data-muted] { color: var(--muted); }
[data-info] { color: var(--info); }
[data-success] { color: var(--success); }
[data-warning] { color: var(--warning); }
[data-danger] { color: var(--danger); }
[data-notice] { color: var(--notice); }
[data-special] { color: var(--special); }

/* COLORS USER */
[data-user] { font-style: italic; color: var(--accent); }
[data-admin] { font-style: italic; color: var(--accent); }
[data-mod] { color: var(--accent); }

/* COLORS EXTRAS */
[data-dot]::before { content: "●"; color: var(--accent); }

data[value]:is([data-accent], [data-muted], [data-info], [data-success], [data-warning], [data-danger], [data-notice], [data-special]) {
display: inline-block; vertical-align: middle; line-height: .9; padding-block: .1rem; padding-inline: .2rem;
border: .06rem solid currentColor; background: color-mix(in srgb, currentColor 20%, transparent);
}

:is(body>header, body>footer) { flex: 0 0 100%; position: sticky; z-index: 999; text-transform: uppercase; background: var(--box1); padding-block: 1rem; padding-inline: 1rem; }
body>header { inset-block-start: 0; }
body>footer { inset-block-end: 0; }
:is(body>header>nav, body>footer>nav) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
body>header>nav>a[aria-current="page"] { color: var(--accent); }
:is(body>header>nav>:first-child, body>footer>nav>:first-child) { margin-inline-end: auto; }
body>footer>nav>:last-child { margin-inline-start: auto; }
body>header>nav>a:nth-of-type(1)::before { content: ""; display: inline-block; inline-size: .5rem; block-size: .5rem; margin-inline-end: .5rem; background: var(--accent); }
:is(main, aside) { display: flex; flex-direction: column; gap: 1rem; flex: 0 0 100%; }

/* BREADCRUMB */
main>nav>ol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none; }
main>nav[aria-label="Breadcrumb"] li+li:before { content: "/\00a0"; color: var(--accent); }
main>nav[aria-label="Breadcrumb"] { background: var(--box2); padding-block: 1rem; padding-inline: 1rem; margin-block-start: -1rem; border-end-start-radius: .5rem; border-end-end-radius: .5rem; }
main>nav[aria-label="Breadcrumb"] { font-size: .9rem; }
main>nav[aria-label="Breadcrumb"] li[aria-current="page"] { color: var(--text3); }

/* ASIDE */
aside>* { background: var(--box2); padding-block: 1.5rem; padding-inline: 1.5rem; border-radius: .5rem; }
aside>*>*+*:not(a[rel="tag"]) { margin-block-start: .5rem; }
aside>*> :first-child { margin-block-start: 0; }
aside>*> :last-child { margin-block-end: 0; }
aside :is(ul, ol) li { display: flex; flex-wrap: wrap; justify-content: space-between; }
aside ul li a::before { content: "▷ "; color: var(--text2); }
aside ul li a:hover::before { color: var(--accent); }
aside nav:not(:has(ul)) { display: flex; flex-wrap: wrap; gap: .5rem; }
aside nav:not(:has(ul)) h3 { flex: 0 0 100%; }
aside nav a[rel="tag"] { flex: 1 1 0; font-size: .8rem; text-align: center; text-transform: uppercase; padding-block: .2rem; padding-inline: .5rem; background: var(--box4); color: var(--text4); }
aside nav a[rel="tag"]:hover { background: var(--accent); color: var(--text0); }
aside nav a[rel="tag"][aria-current="page"] { background: var(--accent); color: var(--text0); }
aside h3 { font-family: monospace; font-size: 1.2rem; text-transform: uppercase; color: var(--text3); display: flex; flex-wrap: wrap; justify-content: space-between; }
aside a { color: var(--text4); }
aside a[aria-current="page"] { color: var(--accent); }
aside data { color: var(--text2); }

/* ARTICLE */
article { background: var(--box2); padding-block: 1.5rem; padding-inline: 1.5rem; border-radius: .5rem; }
article>*:not(header):not(footer) { margin-block: 1rem; }
article>*:not(header):not(footer):first-child { margin-block-start: 0; }
article>*:not(header):not(footer):last-child { margin-block-end: 0; }
article> :is(header, footer) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
article> :is(header, footer)> :first-child { margin-inline-end: auto; }
article>h2 { font-size: 1.5rem; color: var(--text4); }
article>h3 { font-size: 1.2rem; color: var(--text4); }
article>h2>a { color: var(--text4); }
article>h2>a:hover { color: var(--text5); }
article>p { line-height: 1.4rem; }
article>p>a { text-decoration: underline var(--accent); }
article>p>a:hover { color: var(--accent); }
article>ol>li { margin-block-end: .5rem; }
article>ul>li::marker, article>ol>li::marker { color: var(--accent); }
article>header>time, article>footer>data, article>footer>span { color: var(--text2); }
article>header a[rel="tag"] { font-size: .8rem; text-align: center; text-transform: uppercase; padding-block: .2rem; padding-inline: .5rem; background: var(--box4); color: var(--text4); }
article>header a[rel="tag"]:hover { background: var(--accent); color: var(--text0); }

/* SECTION */
body>section { display: flex; flex-direction: column; gap: 1rem; flex: 0 0 100%; padding-inline: 1rem; }

/* PAGING */
nav[aria-label="Paging"] { background: var(--box2); padding-block: 1rem; padding-inline: 1rem; border-radius: .5rem; }
nav[aria-label="Paging"] ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; list-style: none; }
nav[aria-label="Paging"] ul li a { border: .05rem solid transparent; background: var(--box4); color: var(--text4); padding-block: .2rem; padding-inline: .5rem; }
nav[aria-label="Paging"] ul li a:hover { border: .05rem solid var(--accent); }
nav[aria-label="Paging"] ul li span[aria-current] { border: .05rem solid var(--accent); padding-block: .2rem; padding-inline: .5rem; }

/* PRE */
pre { font-family: monospace; tab-size: 2; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--box1); padding-block: 1rem; padding-inline: 1rem; border-inline-start: .1rem solid var(--accent); }

/* PROGRESS & METER */
progress, meter { inline-size: 100%; }

/* BLOCKQUOTE */
blockquote { background: var(--box4); padding-block: 1rem; padding-inline: 1rem; }
blockquote q { display: block; font-style: italic; text-align: center; }
blockquote>cite { display: block; text-align: right; color: var(--text3); margin-block-start: 1rem; }

/* DEFINITION */
dt { font-weight: 900; margin-block-end: .5rem; }
dd { font-style: italic; margin-inline-start: .5rem; margin-block-end: .5rem; background: var(--box3); padding-block: .5rem; padding-inline: .5rem; border-inline-end: .1rem solid var(--accent); }
dd:last-child { margin-block-end: 0; }

/* TABLE */
table { inline-size: 100%; }
tr>th { font-weight: 600; background: var(--box3); padding-block: .5rem; padding-inline: .5rem; }
tr>td { background: var(--box4); padding-block: .5rem; padding-inline: .5rem; white-space: pre-line; }
tr:not(:has(th)):hover td { background: var(--box5); }

/* DETAILS */
details>summary { color: var(--text4); cursor: pointer; }
details[open]>summary { margin-block-end: 1rem; }
details>summary:hover { color: var(--text4); }
details>summary:hover::marker, details[open]>summary::marker { color: var(--accent); }

/* IMG & MEDIA */
img, video, audio, iframe { max-inline-size: 100%; block-size: auto; }
img[alt^="Icon"] { inline-size: 16px; block-size: 16px; object-fit: cover; }
img[alt^="Avatar"] { inline-size: 32px; block-size: 32px; object-fit: cover; border-radius: 50%; }

/* FIGURE */
figure:has(img) { position: relative; }
figure:has(img) figcaption { position: absolute; inset-block-end: 0; inset-inline: 0; text-align: right; background: var(--box1); color: var(--text4); opacity: .9; padding-block: .5rem; padding-inline: 1rem; }
figure img { filter: grayscale(70%); object-fit: cover; inline-size: 100%; block-size: 15rem; }
figure img:hover { filter: grayscale(0%); }
figure:not(:has(img)) { background: var(--box1); padding-block: 1.5rem; padding-inline: 1.5rem; border-radius: .5rem; }
figure:not(:has(img)) figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; margin-block-end: 1rem; }
figure:not(:has(img)) figcaption>strong { font-size: 1rem; color: var(--accent); }
figure:not(:has(img)) figcaption>time { color: var(--text3); }

/* LINE */
hr { block-size: .1rem; background: var(--box4); margin-inline: -1.5rem; border: 0; }

/* FORM */
form { display: flex; flex-direction: column; gap: 1rem; }
form :is(input, select, textarea) { inline-size: 100%; padding-block: .5rem; padding-inline: .5rem; background: var(--box4); color: var(--text4); border: .1rem solid transparent; border-radius: .5rem; outline: 0; }
form :is(input, select, textarea):hover { background: var(--box5); }
form :is(input, select, textarea):focus-visible { border-color: var(--accent); }
form fieldset { display: flex; gap: 1rem; border: none; }
form fieldset p { flex: 1; }
form fieldset button { inline-size: 100%; }
form button { padding-block: .5rem; padding-inline: .5rem; background: var(--box5); color: var(--text4); border: none; border-radius: .5rem; cursor: pointer; }
form button:hover { background: var(--accent); color: var(--text0); }

@media (min-width: 45rem) {
body>section { padding-inline: 0; }
main { flex: 2; }
aside { flex: 1; }
}