:root { --ff-main: 'Poppins', sans-serif; --ff-accent: 'Poppins', sans-serif; --fw-light: 100; --fw-regular: 400; --fw-semi-bold: 500; --fw-bold: 700; --fs-100: 0.625rem; --fs-200: 0.750rem; --fs-300: 0.875rem; --fs-400: 1.000rem; --fs-500: 1.125rem; --fs-600: 1.375rem; --fs-700: 1.750rem; --fs-800: 2.000rem; --fs-900: 2.500rem; --col-main-100: hsla(238.5, 15%, 34%, 1); --col-main-200: hsla(238.5, 20%, 39%, 1); --col-main-300: hsla(238.5, 25%, 44%, 1); --col-main-400: hsla(238.5, 30%, 49%, 1); --col-main-500: hsla(238.5, 35%, 54%, 1); --col-main-600: hsla(238.5, 40%, 59%, 1); --col-main-700: hsla(238.5, 45%, 64%, 1); --col-sec-100: hsla(159, 60%, 30%, 1); --col-sec-200: hsla(159, 50%, 35%, 1); --col-sec-300: hsla(159, 40%, 40%, 1); --col-sec-400: hsla(159, 30%, 45%, 1); --col-sec-500: hsla(159, 20%, 50%, 1); --col-sec-600: hsla(159, 10%, 55%, 1); --col-sec-700: hsla(159, 0%, 60%, 1);}@media (prefers-color-scheme: dark) { :root { }}html { color-scheme: dark; width: 100%; min-height: 100%; overflow: visible;}html, body { scrollbar-gutter: stable; touch-action: auto; }* { font-family: inherit; min-width: 0; min-height: 0; word-break: break-word;}input, select, textarea { min-width: 0;}html, :has(:target) { scroll-behavior: smooth; scroll-padding-top: 3rem;}body { min-height: 100vh; min-height: 100svh; overflow: hidden; overflow-y: scroll; font-family: var(--ff-main); font-weight: var(--fw-regular); font-size: var(--fs-300); line-height: 1.7; background-color: hsla(0, 0%, 13%, 1); color: hsla(0, 0%, 79%, 1); direction: ltr; writing-mode: lr-tb;}.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); position: absolute; height: 1px; width: 1px; overflow: hidden; white-space: nowrap;}input, select, textarea, button { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit;}h1, h2, h3, h4, h5, h6 { font-family: var(--ff-accent); line-height: 1.1; text-wrap: balance;}p { max-width: var(--chars-per-row, 70ch); text-wrap: pretty;}.accountBoxWrapper { background-color: rgba(30, 30, 30, 0.8);}.accountBoxWrapper > .accountBox { max-width: min(30rem, 100%); background-color: var(--main-color-bg); padding: 1em 1.5em; display: grid; grid-template-columns: auto 1fr auto; gap: 0.25em;}.accountBoxWrapper .title { grid-column: 1 / span 2; font-size: 1.3em; font-weight: bold; margin-bottom: 1em;}.accountBoxWrapper .icon-close { grid-column: 3;}.accountBoxWrapper .text { margin-bottom: 1em; grid-column: 1 / span 3;}.accountBoxWrapper .label { grid-column: 1; margin-right: 1em;}.accountBoxWrapper .label:after { content: ":";}.accountBoxWrapper input { grid-column: 2 / span 2;}.accountBoxWrapper .buttonBox { grid-column: 1 / span 3; margin-top: 1em; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: stretch; align-content: flex-start;}@media (max-width: 700px) { .accountBoxWrapper { background-color: var(--main-color-bg); } .accountBoxWrapper > .accountBox { width: 100%; max-width: 100%; }}.buttonStyle-1 { transition: color 0.3s ease-out, background-color 0.3s ease-out, opacity 0.3s ease-out; cursor: pointer; background-color: rgba(100, 100, 100, 0.75); padding: 0.4em 1.5em; color: #eee; text-decoration: none;}.buttonStyle-1.active,.buttonStyle-1:focus,.buttonStyle-1:hover { background-color: rgba(125, 125, 125, 0.75); color: #fff;}.buttonStyle-1.active { box-shadow: 0 0 0 1px var(--col-sec-400) inset;}.buttonStyle-1:not(.disabled):active { background-color: rgba(170, 170, 170, 0.75); color: #fff;}.buttonStyle-1.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-2 { transition: color 0.3s ease-out, background-color 0.3s ease-out, opacity 0.3s ease-out; cursor: pointer; background-color: rgba(20, 20, 20, 0.75); padding: 0.4em 1.5em; color: #eee; text-decoration: none;}.buttonStyle-2.active,.buttonStyle-2:focus,.buttonStyle-2:hover { background-color: rgba(70, 70, 70, 0.75); color: #fff;}.buttonStyle-2.active { box-shadow: 0 0 0 1px var(--col-sec-400) inset;}.buttonStyle-2:not(.disabled):active { background-color: rgba(150, 150, 150, 0.75); color: #fff;}.buttonStyle-2.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-mini { cursor: pointer; background-color: transparent; border: none; padding: 0 1.5em; color: #eee; text-decoration: none;}.buttonStyle-mini.active,.buttonStyle-mini:focus,.buttonStyle-mini:hover,.buttonStyle-mini:not(.disabled):active { color: #fff;}.buttonStyle-mini.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}.buttonStyle-icon { cursor: pointer; background-color: transparent; border: none; padding: 0; color: #eee; text-decoration: none;}.buttonStyle-icon.active,.buttonStyle-icon:focus,.buttonStyle-icon:hover,.buttonStyle-icon:not(.disabled):active { color: #fff;}.buttonStyle-icon.disabled { opacity: 0.75; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}main.contentBox { padding-inline: 16vw; padding-block-end: 10rem;}h1 { text-align: center; margin-top: 3rem;}@media all and (max-width: 1200px) { main.contentBox { padding-inline: 1rem; }}@media all and (max-width: 800px) { main.contentBox { padding-inline: 0; }}.contentBackgroundImage { position: fixed; inset: 0; z-index: -1; background-position: 50% 0%; background-repeat: no-repeat; transition: opacity 3s ease-in-out; opacity: 0;}.contentBackgroundImage-1 { background-image: url('/img/drache_transparent.webp'); background-size: cover; opacity: 0.25; filter: blur(2px); --scroll-via-js: 1;}.contentBackgroundImage-2 { background-image: url('/img/haus_aussen.webp'); background-size: cover; opacity: 0.15; filter: blur(5px);}.contentBackgroundImage-3 { background-image: url('/img/schlange.webp'); background-size: cover; opacity: 0.15; filter: blur(5px);}.contentBackgroundImage-4 { background-image: url('/img/teich_mit_gebaeude.webp'); background-size: cover; opacity: 0.15; filter: blur(5px);}h1 { font-size: var(--fs-800); }h2 { font-size: var(--fs-700); }h3 { font-size: var(--fs-600); }h4 { font-size: var(--fs-500); }.contentBox { padding-inline: 16vw; padding-block-end: 10rem;}.contentDesign-1 { margin-block-start: 3rem; margin-inline: auto; width: 90ch; max-width: 96%; padding: 1rem 1.5rem; background-color: rgba(17, 17, 17, 0.75); }@media all and (max-width: 900px) { .contentDesign-1 { max-width: 100%; }}.auto-grid { --min-column-size: 300px; --gap: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min-width), 100%), 1fr)); gap: var(--gap);}.auto-flex { --min-column-size: 200px; --gap: 1rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; gap: var(--gap);}.auto-flex > * { flex: 1 1 var(--min-width);}@supports (animation-timeline: view()) { .effect_fade-in { transform: scale(0.9); opacity: 0; animation: effect_fade-in ease-in-out forwards; animation-timeline: view(); animation-range: entry 10vh; } .effect_fade-out { transform: scale(1); opacity: 1; animation: effect_fade-out ease-in-out forwards; animation-timeline: view(); animation-range: exit -10vh; }}@keyframes effect_fade-in { 0% { transform: scale(0.9); opacity: 0; } 70%, 100% { transform: scale(1); opacity: 1; }}@keyframes effect_fade-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; }}.feedbackWrapper { margin-top: 2rem;}.feedbackWrapper > :not(:last-child) { margin-bottom: 0.5rem;}.feedback { padding: 0.25em 1.5em; position: relative; background-color: rgba(25, 25, 25, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.3); z-index: 1; font-weight: 400; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; align-content: flex-start;}.feedback > * { flex: 0 1 auto; line-height: 1.25;}.feedback > .message {}.feedback > .feedbackIcon { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75)); margin-right: 0.67rem;}.feedback.feedback-success > .feedbackIcon { color: rgb(50, 255, 50); border-color: rgba(50, 255, 50, 0.5);}.feedback.feedback-error > .feedbackIcon { color: rgb(255, 0, 0); border-color: rgba(255, 0, 0, 0.5);}.feedback.feedback-info > .feedbackIcon { color: rgb(50, 200, 255); border-color: rgba(50, 200, 255, 0.5);}@keyframes feedbackShake { 0% { transform: translateX(0em); } 25% { transform: translateX(-0.5em); } 75% { transform: translateX(0.5em); } 100% { transform: translateX(0em); }}.feedback.shake { animation: feedbackShake 0.20s linear infinite;}@property --glow-card-border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true;}.glow-card { --glow-card-border-angle: 0deg; --border-width: 0.3rem; --blur-size: 3.5rem; --color-1: #f00; --color-2: #707; --color-3: #00f; background-color: #333; color: #eee; padding: 0.5em 0.75em; border-radius: 0.2rem; position: relative;}.glow-card::before,.glow-card::after { content: ""; position: absolute; inset: calc(var(--border-width) * -1); z-index: -1; border-radius: inherit; background: conic-gradient( from var(--glow-card-border-angle), var(--color-1), var(--color-2), var(--color-3), var(--color-2), var(--color-1) ); animation: glow-card-border-rotation 22s linear infinite;}.glow-card::after { filter: blur(var(--blur-size));}@keyframes glow-card-border-rotation { 0% { --glow-card-border-angle: 0deg; } 100% { --glow-card-border-angle: 360deg; }}body > header { position: relative; background-color: inherit; padding: 1rem; display: grid; justify-items: center; align-items: space-between; align-content: space-between; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: ". title ." ". menu ."; gap: 0rem 2rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.65);}body > header > .brandLogoWrapper { grid-area: logo; display: none; }body > header > .brandName { grid-area: title; align-self: start; }body > header > .headerMenu { grid-area: menu; align-self: end; }body > header > * { position: relative;}body > header > .headerBackground { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2); background-image: url('/img/skua-quer.webp'); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0.25; filter: grayscale(1) brightness(0.4);}body > header .buttonStyle-1,body > header .buttonStyle-2 { box-shadow: 0 0 2rem rgba(255, 255, 255, 0.1);}header .brandLogoWrapper {}header .brandLogo { height: 11rem; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%;}header .brandName { width: fit-content; font-size: var(--fs-900); line-height: 1.3; padding-bottom: 4rem; text-decoration: none; color: var(--col-main-500); font-weight: var(--fw-semi-bold); }@supports (background-clip: text) { header .brandName { color: rgba(255, 255, 255, 0); background: linear-gradient(90deg, var(--col-sec-500) 20%, var(--col-main-600) 70%); background-clip: text; filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.6)) drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7)); } header .brandName > * { }}header .brandName > * { transition: color 3s ease, text-shadow 3.3s ease 0.3s; color: rgba(255, 255, 255, 0);}header .brandName > .glare { transition: color 0.6s ease 0.1s, text-shadow 0.6s ease; color: rgba(255, 255, 255, 0.75); text-shadow: 0 0 1.5rem rgba(255, 255, 255, 0.35);}.headerMenu .menuEntries { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: center; gap: 1rem;}.headerMenu .menuEntries > * { display: block;}.oneRowFormBox { --arrow-size: 0.8em; position: relative; text-align: center;}.oneRowFormBox > * { clip-path: polygon(0% 0%, calc(100% - var(--arrow-size)) 0%, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0% 100%, var(--arrow-size) 50%); padding-left: calc(0.75em + var(--arrow-size));}.oneRowFormBox > * { margin-left: calc(var(--arrow-size) * -0.5); margin-right: calc(var(--arrow-size) * -0.5);}.oneRowFormBox:focus-within::before,.oneRowFormBox:focus-within::after { content: ""; position: absolute; left: calc(var(--arrow-size) * -0.5 - 3px); right: calc(var(--arrow-size) * 0.5 + 2px); border: 0 solid rgba(255, 255, 255, 0.4);}.oneRowFormBox:focus-within::before { top: -4px; border-top-width: 1px;}.oneRowFormBox:focus-within::after { bottom: -4px; border-bottom-width: 1px;}@media all and (max-width: 700px) { .oneRowFormBox {  margin-left: 1rem; margin-right: 1rem; } .oneRowFormBox > * { width: 100%;  }}.inputBox { display: inline-flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; background-color: #eee; padding: 0.75em 1.5em;}.inputBox:focus-within { outline: 2px solid var(--main-color-less); outline-offset: 2px;}.inputBox > * { color: #aaa;}.inputBox > input,.inputBox > select,.inputBox > textarea { background-color: transparent; border: none; margin: 0; padding: 0; outline: none; width: auto;}.mask-reveal { overflow: hidden;}.mask-reveal > * { transition: transform 1.7s cubic-bezier(0.165, 0.84, 0.44, 1); transform: translateX(0%) translateY(0%);}.mask-reveal.mask-reveal-plus-x:not(.show) > * { transform: translateX(100%) translateY(0%); }.mask-reveal.mask-reveal-minus-x:not(.show) > * { transform: translateX(-100%) translateY(0%); }.mask-reveal.mask-reveal-plus-y:not(.show) > * { transform: translateX(0%) translateY(100%); }.mask-reveal.mask-reveal-minus-y:not(.show) > * { transform: translateX(0%) translateY(-100%); }.mask-reveal.mask-reveal-plus-x.mask-reveal-plus-y:not(.show) > * { transform: translateX(100%) translateY(100%); }.mask-reveal.mask-reveal-plus-x.mask-reveal-minus-y:not(.show) > * { transform: translateX(100%) translateY(-100%); }.mask-reveal.mask-reveal-minus-x.mask-reveal-minus-y:not(.show) > * { transform: translateX(-100%) translateY(-100%); }.mask-reveal.mask-reveal-minus-x.mask-reveal-plus-y:not(.show) > * { transform: translateX(-100%) translateY(100%); }.pagesV2 { display: flex; flex-flow: row nowrap; justify-content: center; align-items: baseline; align-content: center; gap: 0.5rem;}.pagesV2 > label { flex: 0 1 auto;}.pagesV2 > .page { flex: 0 1 auto; background-color: rgba(0, 0, 0, 0.2); padding-inline: 0.25rem; min-width: 2em; min-height: 2em; border: 1px solid transparent; color: inherit; text-decoration: none; display: grid; place-items: center;}.pagesV2 > .page:hover,.pagesV2 > .page:active,.pagesV2 > .page:focus { background-color: rgba(255, 255, 255, 0.1);}.pagesV2 > .page.active { font-weight: bold; background-color: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.15);}.scrollbarStyle-1 { --scrollbar-size: 10px; --scrollbar-foreground: #999; --scrollbar-background: #333; scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); scrollbar-width: var(--scrollbar-size);}.scrollbarStyle-1::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size);}.scrollbarStyle-1::-webkit-scrollbar-thumb { background: var(--scrollbar-foreground); box-shadow: 0 0 calc(var(--scrollbar-size) * 0.6) rgba(0, 0, 0, 0.3);}.scrollbarStyle-1::-webkit-scrollbar-track { background: var(--scrollbar-background); border-radius: var(--scrollbar-size); box-shadow: 0 0 calc(var(--scrollbar-size) * 0.6) rgba(0, 0, 0, 0.3);}.scrollbarStyle-1::-webkit-scrollbar-corner { background: var(--scrollbar-background);}.statsbox { position: fixed; bottom: 0; right: 0; padding: 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.75); line-height: 1.2;}.standardTabBox { align-self: stretch; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; padding: 0 18px; border-bottom: 2px solid var(--clr-main-400, #ffff); position: relative; overflow: hidden;}.standardTabBox > .standardTab { transition: background-color 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out; padding: 5px 10px 10px 10px; margin: 5px 1px -5px 0; background-color: rgba(0, 0, 0, 0.45); cursor: pointer; transform: scale(1, 1) translateY(0px); transform-origin: 50% 100%; will-change: transform;}.standardTabBox > .standardTab:focus-visible,.standardTabBox > .standardTab:hover { background-color: var(--clr-main-400, #fff7);}.standardTabBox > .standardTab:active,.standardTabBox > .standardTab.active { transition: background-color 0.05s ease-out, color 0.05s ease-out, transform 0.3s ease-out; background-color: var(--clr-main-400, #ffff); z-index: 1; color: #fff; text-shadow: 0 0 2px #fff, 0 0 3px #000; transform: scale(1, 1) translateY(-3px);}.standardTabContents-hidden { display: none;}