/* =========================================================
   COMPLEXION 28
   grundlagen.css
   ========================================================= */


/* =========================================================
   01. VARIABLEN
   ========================================================= */

:root {

    color-scheme: dark;


    /* -----------------------------------------------------
       Bilder
       ----------------------------------------------------- */

    --hgbig: url(../../../images/complexion28/bg_main.png);


    /* -----------------------------------------------------
       Avatar
       ----------------------------------------------------- */

    --ava-w: 310px;
    --ava-h: 265px;
    --ava-ratio: 310 / 265;


    /* -----------------------------------------------------
       Schriftarten
       ----------------------------------------------------- */

    --akzenttext:
        "GC Cultivo",
        "Arial Narrow",
        Arial,
        sans-serif;

    --fliesstext:
        "Franklin Gothic",
        "ITC Franklin Gothic",
        "Libre Franklin",
        Arial,
        sans-serif;


    /* -----------------------------------------------------
       Schriftgrößen
       ----------------------------------------------------- */

    --txtxxxsmall: 6px;
    --txtxxsmall: 7px;
    --txtxsmall: 8px;
    --txtsmall: 9px;
    --txtm: 11px;
    --txtbase: 12px;
    --txtl: 14px;
    --txtxl: 20px;
    --txtxxl: 40px;
    --txtxxxl: 60px;
    --megatxt: 160px;


    /* -----------------------------------------------------
       Grundfarben
       ----------------------------------------------------- */

    --bg-main: #101111;
    --bg-deep: #0b0c0c;

    --tbl-main: #171818;

    --tbl-main-tr:
        rgba(17, 18, 18, 0.94);

    --tbl-main-tr2:
        rgba(28, 29, 29, 0.90);

    --tbl-main-tr3:
        rgba(232, 228, 217, 0.05);

    --paper: #e6e1d5;
    --paper-muted: #c9c5bb;

    --akzent-dkl: #292b2a;
    --akzent-mid: #858984;
    --akzent-hell: #d8d6ce;

    --txtcol: #a6aaa5;
    --txtcol-soft: #777b77;
    --txtcol-dark: #171818;


    /* -----------------------------------------------------
       Designfarben
       ----------------------------------------------------- */

    --design: #4164d8;
    --design-dark: #2d469a;
    --design-light: #7891ec;

    --signal: #d2ac3b;
    --signal-dark: #967927;
    --signal-light: #ead27e;

    --akzent-red: #a94f51;
    --akzent-red-soft: #cb8586;

    --akzent-green: #668c70;
    --akzent-green-soft: #91b09a;


    /* -----------------------------------------------------
       Linien
       ----------------------------------------------------- */

    --hairline:
        rgba(230, 225, 213, 0.13);

    --hairline-soft:
        rgba(230, 225, 213, 0.07);

    --hairline-strong:
        rgba(230, 225, 213, 0.25);

    --hairline-design:
        rgba(65, 100, 216, 0.65);


    /* -----------------------------------------------------
       Abstände
       ----------------------------------------------------- */

    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 18px;
    --space-l: 28px;
    --space-xl: 42px;
    --space-xxl: 70px;


    /* -----------------------------------------------------
       Inhaltsbreiten
       ----------------------------------------------------- */

    --content-max: 1380px;
    --content-wide: 1560px;


    /* -----------------------------------------------------
       Buttons
       ----------------------------------------------------- */

    --btn-padding: 8px 14px;
    --btn-font: 600;


    /* -----------------------------------------------------
       Scrollbar
       ----------------------------------------------------- */

    --sb-track-color: var(--bg-deep);
    --sb-thumb-color: var(--design);
    --sb-size: 7px;


    /* -----------------------------------------------------
       Nutzergruppen
       ----------------------------------------------------- */

    --liberants: #6f927d;
    --scions: #9b7d68;
    --openers: #a94f51;
    --thelics: #4164d8;
    --normies: #aaa79f;
    --operatives: #737b7d;
    --npc: #d4d0c5;

    --liberants-rgb: 111, 146, 125;
    --scions-rgb: 155, 125, 104;
    --openers-rgb: 169, 79, 81;
    --thelics-rgb: 65, 100, 216;
    --normies-rgb: 170, 167, 159;
    --operatives-rgb: 115, 123, 125;
    --npc-rgb: 212, 208, 197;


    /* -----------------------------------------------------
       Standard-Gruppenvariable
       Wird von den group-Klassen überschrieben
       ----------------------------------------------------- */

    --group-color: var(--design);
    --group-rgb: 65, 100, 216;
}


/* =========================================================
   02. RESET UND BASIS
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;

    background: var(--bg-deep);

    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    color: var(--txtcol);
    background: var(--bg-main);

    font-family: var(--fliesstext);
    font-size: var(--txtbase);
    font-weight: 400;
    line-height: 1.6;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;

    border: 0;
}

iframe {
    border: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    height: 1px;
    margin: var(--space-l) 0;

    background: var(--hairline);
    border: 0;
}

::selection {
    color: var(--paper);
    background: var(--design);
}


/* =========================================================
   03. HINTERGRUND
   ========================================================= */

.themebg {
    position: relative;

    min-height: 100vh;

    background-color: var(--bg-deep);

    background-image:
        linear-gradient(
            to bottom,
            rgba(8, 9, 9, 0.18),
            rgba(8, 9, 9, 0.56)
        ),
        var(--hgbig);

    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
}

.forenheader {
    min-height: clamp(240px, 34vh, 460px);
}


/* =========================================================
   04. INHALTSBREITEN
   ========================================================= */

.content-width {
    width: min(
        calc(100% - 40px),
        var(--content-max)
    );

    margin-inline: auto;
}

.content-wide {
    width: min(
        calc(100% - 40px),
        var(--content-wide)
    );

    margin-inline: auto;
}


/* =========================================================
   05. TYPOGRAFIE
   ========================================================= */

p {
    margin: 0 0 1em;
}

strong,
b {
    color: var(--design-light);

    font-weight: 600;
}

em,
i {
    color: var(--akzent-hell);

    font-style: italic;
}

u {
    text-decoration-line: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

s,
strike {
    color: var(--txtcol-soft);
}

small {
    font-size: var(--txtsmall);
}

mark {
    padding: 1px 4px;

    color: var(--txtcol-dark);
    background: var(--signal);
}

.markierung {
    display: inline-block;

    margin: 3px 0;
    padding: 4px 8px 4px 14px;

    color: var(--signal-light);
    background: var(--akzent-dkl);

    border-left: 3px solid var(--signal);
}


/* =========================================================
   06. ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;

    color: var(--akzent-hell);

    font-family: var(--akzenttext);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

h1 {
    padding-bottom: 10px;

    font-size:
        clamp(
            42px,
            5vw,
            var(--txtxxl)
        );

    letter-spacing: -0.025em;

    border-bottom: 1px solid var(--design);
}

h2 {
    padding-bottom: 7px;

    font-size:
        clamp(
            24px,
            3vw,
            var(--txtxl)
        );

    letter-spacing: -0.015em;

    border-bottom: 1px solid var(--hairline);
}

h3 {
    color: var(--design-light);

    font-size: var(--txtl);
    letter-spacing: 0.025em;
}

h4 {
    display: inline-block;

    padding: 6px 10px;

    color: var(--paper);
    background: var(--akzent-dkl);

    font-size: var(--txtm);
    letter-spacing: 0.22em;

    border-left: 3px solid var(--design);
}

h5 {
    color: var(--signal);

    font-size: var(--txtsmall);
    letter-spacing: 0.16em;
}

h6 {
    color: var(--txtcol-soft);

    font-family: var(--fliesstext);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.12em;
}


/* =========================================================
   07. LINKS
   ========================================================= */

a {
    color: var(--design-light);

    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color 160ms ease,
        text-decoration-color 160ms ease;
}

a:hover {
    color: var(--signal-light);

    text-decoration-color: currentColor;
}

a:focus-visible {
    outline: 1px solid var(--signal);
    outline-offset: 3px;
}

.lexicon-entry a:not(.button):not(.btn),
.post_body a:not(.button):not(.btn) {
    position: relative;

    padding-right: 0.85em;

    color: var(--akzent-hell);
}


/* =========================================================
   08. FORMULARE
   ========================================================= */

input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    max-width: 100%;
    min-height: 36px;

    padding: 8px 10px;

    color: var(--akzent-hell);
    background: var(--tbl-main);

    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    outline: 0;

    font-family: var(--fliesstext);
    font-size: var(--txtm);

    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

input[type="text"] {
    width: auto;
}

input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 90%;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    background: var(--tbl-main-tr2);

    border-color: var(--design);
}

input::placeholder,
textarea::placeholder {
    color: var(--txtcol-soft);

    opacity: 1;
}

textarea {
    width: 100%;
    min-height: 140px;

    line-height: 1.6;

    resize: vertical;
}

select {
    cursor: pointer;
}

input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;

    opacity: 0.5;
}

.modal .editscname {
    width: 50%;
}


/* =========================================================
   09. BUTTONS
   ========================================================= */

.btn,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 34px;

    padding: var(--btn-padding);

    color: var(--akzent-hell);
    background: var(--tbl-main);

    border: 1px solid var(--hairline-strong);
    border-radius: 0;

    font-family: var(--fliesstext);
    font-size: var(--txtsmall);
    font-weight: var(--btn-font);
    line-height: 1;
    letter-spacing: 0.08em;

    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.btn:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    color: var(--paper);
    background: var(--akzent-dkl);

    border-color: var(--design);

    text-decoration: none;
}

.btn:focus-visible,
.button:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 1px solid var(--signal);
    outline-offset: 3px;
}

.btn-design {
    color: var(--paper);
    background: var(--design);

    border-color: var(--design);
}

.btn-design:hover {
    color: var(--paper);
    background: var(--design-dark);

    border-color: var(--design-light);
}

.btn-red {
    color: var(--paper);
    background: var(--akzent-red);

    border-color: var(--akzent-red);
}

.btn-red:hover {
    background: #7e383a;

    border-color: var(--akzent-red-soft);
}

.btn-green {
    color: var(--paper);
    background: var(--akzent-green);

    border-color: var(--akzent-green);
}

.btn-green:hover {
    background: #45664e;

    border-color: var(--akzent-green-soft);
}

.btn-ghost {
    color: var(--akzent-hell);
    background: transparent;

    border-color: var(--hairline-strong);
}

.btn-ghost:hover {
    color: var(--bg-main);
    background: var(--paper);

    border-color: var(--paper);
}


/* =========================================================
   10. AVATARE
   ========================================================= */

.avatar,
.post_avatar,
.profile-avatar,
.dossier-avatar {
    width: var(--ava-w);
    max-width: 100%;
}

.avatar img,
.post_avatar img,
.profile-avatar img,
.dossier-avatar img {
    display: block;

    width: var(--ava-w);
    max-width: 100%;
    height: var(--ava-h);

    aspect-ratio: var(--ava-ratio);

    object-fit: cover;
    object-position: center;

    background: var(--tbl-main);

    border: 0;
    border-radius: 0;
}

.avatar-cover img,
.dossier-avatar-cover img {
    object-position: center;
}

.avatar-top img,
.dossier-avatar-top img {
    object-position: center top;
}

.avatar-bottom img,
.dossier-avatar-bottom img {
    object-position: center bottom;
}

.avatar-left img,
.dossier-avatar-left img {
    object-position: left center;
}

.avatar-right img,
.dossier-avatar-right img {
    object-position: right center;
}


/* =========================================================
   11. NUTZERGRUPPEN
   ========================================================= */

.group-liberants {
    --group-color: var(--liberants);
    --group-rgb: var(--liberants-rgb);
}

.group-scions {
    --group-color: var(--scions);
    --group-rgb: var(--scions-rgb);
}

.group-openers {
    --group-color: var(--openers);
    --group-rgb: var(--openers-rgb);
}

.group-thelics {
    --group-color: var(--thelics);
    --group-rgb: var(--thelics-rgb);
}

.group-normies {
    --group-color: var(--normies);
    --group-rgb: var(--normies-rgb);
}

.group-operatives {
    --group-color: var(--operatives);
    --group-rgb: var(--operatives-rgb);
}

.group-npc,
.group-guest,
.group-gastaccount {
    --group-color: var(--npc);
    --group-rgb: var(--npc-rgb);
}


/* =========================================================
   12. GRUPPEN-HILFSKLASSEN
   ========================================================= */

.group-color {
    color: var(--group-color);
}

.group-background {
    color: var(--paper);
    background: var(--group-color);
}

.group-background-soft {
    background:
        rgba(
            var(--group-rgb),
            0.10
        );
}

.group-border {
    border-color: var(--group-color);
}

.group-border-left {
    border-left:
        3px solid
        var(--group-color);
}

.group-border-right {
    border-right:
        3px solid
        var(--group-color);
}

.group-border-top {
    border-top:
        1px solid
        var(--group-color);
}

.group-border-bottom {
    border-bottom:
        1px solid
        var(--group-color);
}

.group-line {
    height: 1px;

    background:
        rgba(
            var(--group-rgb),
            0.65
        );
}

.group-label,
.usergroup-label,
.post-author-group,
.dossier-status {
    color: var(--group-color);
}

.group-label,
.usergroup-label {
    display: inline-block;

    padding: 4px 8px;

    background:
        rgba(
            var(--group-rgb),
            0.10
        );

    border-left:
        3px solid
        var(--group-color);

    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.10em;

    text-transform: uppercase;
}

.group-tab {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 5px 12px;

    color: var(--group-color);
    background: var(--tbl-main);

    border-top:
        2px solid
        var(--group-color);

    border-right:
        1px solid
        var(--hairline);

    border-bottom:
        1px solid
        var(--hairline);

    border-left:
        1px solid
        var(--hairline);

    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.10em;

    text-transform: uppercase;
}

.group-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    background: var(--group-color);

    border-radius: 0;
}

.group-marker {
    display: inline-block;

    width: 3px;
    min-height: 1.2em;

    margin-right: 7px;

    vertical-align: middle;

    background: var(--group-color);
}

.group-field,
.usergroup-field {
    padding: 8px 10px;

    background:
        rgba(
            var(--group-rgb),
            0.08
        );

    border-left:
        3px solid
        var(--group-color);
}

.group-name,
.usergroup-name {
    color: var(--group-color);

    font-weight: 600;
}

.group-number {
    color: var(--group-color);

    font-family: var(--akzenttext);
    font-size: var(--txtxl);
    font-weight: 500;
    line-height: 0.9;
}

.group-progress {
    position: relative;

    height: 3px;

    overflow: hidden;

    background: var(--hairline);
}

.group-progress::after {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: var(--group-progress, 50%);

    background: var(--group-color);
}


/* =========================================================
   13. DIREKTE GRUPPEN-FARBKLASSEN
   ========================================================= */

.text-liberants {
    color: var(--liberants);
}

.text-scions {
    color: var(--scions);
}

.text-openers {
    color: var(--openers);
}

.text-thelics {
    color: var(--thelics);
}

.text-normies {
    color: var(--normies);
}

.text-operatives {
    color: var(--operatives);
}

.text-npc {
    color: var(--npc);
}

.bg-liberants {
    background: var(--liberants);
}

.bg-scions {
    background: var(--scions);
}

.bg-openers {
    background: var(--openers);
}

.bg-thelics {
    background: var(--thelics);
}

.bg-normies {
    background: var(--normies);
}

.bg-operatives {
    background: var(--operatives);
}

.bg-npc {
    background: var(--npc);
}


/* =========================================================
   14. EMBEDS
   ========================================================= */

.embed,
.iframe-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid var(--hairline);
}

.embed iframe,
.iframe-wrap iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   15. LISTEN
   Nur Inhaltsbereiche
   ========================================================= */

.post_body ul,
.lexicon-entry ul,
.content ul {
    margin: 1em 0;
    padding-left: 1.5em;

    list-style: none;
}

.post_body ul > li,
.lexicon-entry ul > li,
.content ul > li {
    position: relative;

    margin: 0.35em 0;
    padding-left: 1.15em;
}

.post_body ul > li::before,
.lexicon-entry ul > li::before,
.content ul > li::before {
    content: "＋";

    position: absolute;
    left: 0;

    color: var(--design-light);

    font-weight: 600;
}

.post_body ol,
.lexicon-entry ol,
.content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.post_body li::marker,
.lexicon-entry li::marker,
.content li::marker {
    color: var(--signal);
}


/* =========================================================
   16. ZITATE UND CODE
   ========================================================= */

blockquote {
    margin: var(--space-m) 0;
    padding: var(--space-m);

    color: var(--paper-muted);
    background: var(--tbl-main-tr2);

    border-left: 3px solid var(--design);
}

code,
pre {
    color: var(--paper-muted);
    background: var(--bg-deep);

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: var(--txtsmall);
}

code {
    padding: 2px 5px;
}

pre {
    max-width: 100%;

    margin: var(--space-m) 0;
    padding: var(--space-m);

    overflow: auto;

    white-space: pre-wrap;

    border: 1px solid var(--hairline);
}


/* =========================================================
   17. MYBB-GRUNDELEMENTE
   ========================================================= */

.tborder {
    width: 100%;

    background: var(--tbl-main-tr);

    border: 1px solid var(--hairline);
}

.thead,
.tcat {
    color: var(--paper);
    background: var(--tbl-main-tr2);

    border-bottom: 1px solid var(--hairline-strong);
}

.trow1 {
    background: var(--tbl-main-tr);
}

.trow2 {
    background: var(--tbl-main-tr2);
}

.trow1,
.trow2 {
    border-bottom: 1px solid var(--hairline);
}

.invalid_field {
    border-color:
        var(--akzent-red)
        !important;
}

.valid_field {
    border-color:
        var(--akzent-green)
        !important;
}

.error,
.alert {
    padding-left: 10px;

    color: var(--akzent-red-soft);

    border-left:
        3px solid
        var(--akzent-red);
}

.success {
    padding-left: 10px;

    color: var(--akzent-green-soft);

    border-left:
        3px solid
        var(--akzent-green);
}


/* =========================================================
   18. POST-CONTROLS
   ========================================================= */

.post_controls {
    display: flex;

    flex-direction: column;
    flex-wrap: nowrap;

    align-content: space-evenly;
}

.postbit_buttons {
    display: flex;

    flex-direction: column;
    align-items: stretch;

    gap: 5px;

    margin: 5px;
}

.post_controls .postbit_buttons a {
    width: 100%;
}


/* =========================================================
   19. MARKITUP
   ========================================================= */

.markItUpButton a::before,
.markItUpButton a::after,
li.markItUpButton::before,
li.markItUpButton::after {
    content: none !important;
}


/* =========================================================
   20. SCROLLBARS
   ========================================================= */

*::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
}

*::-webkit-scrollbar-track {
    background: var(--sb-track-color);
}

*::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--design-light);
}

@supports not selector(::-webkit-scrollbar) {

    * {
        scrollbar-width: thin;

        scrollbar-color:
            var(--sb-thumb-color)
            var(--sb-track-color);
    }
}


/* =========================================================
   21. ALLGEMEINE HILFSKLASSEN
   ========================================================= */

.hidden {
    display: none !important;
}

.clear {
    clear: both;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.flex-center {
    display: flex;

    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.flex-column {
    display: flex;

    flex-direction: column;
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-s {
    gap: var(--space-s);
}

.gap-m {
    gap: var(--space-m);
}

.gap-l {
    gap: var(--space-l);
}

.muted {
    color: var(--txtcol-soft);
}

.designtext {
    color: var(--design-light);
}

.signaltext {
    color: var(--signal);
}

.papertext {
    color: var(--paper);
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.no-transform {
    text-transform: none;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.border-top {
    border-top: 1px solid var(--hairline);
}

.border-bottom {
    border-bottom: 1px solid var(--hairline);
}

.border-left {
    border-left: 1px solid var(--hairline);
}

.border-right {
    border-right: 1px solid var(--hairline);
}

.surface-main {
    background: var(--tbl-main);
}

.surface-transparent {
    background: var(--tbl-main-tr);
}

.surface-secondary {
    background: var(--tbl-main-tr2);
}

.surface-soft {
    background: var(--tbl-main-tr3);
}


/* =========================================================
   22. SMILIES
   ========================================================= */

.smilie {
    max-width: 24px !important;
}


/* =========================================================
   23. RESPONSIVE BASIS
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --ava-w: 280px;
        --ava-h: 239px;
    }
}


@media (max-width: 900px) {

    :root {
        --ava-w: 260px;
        --ava-h: 222px;
    }

    .themebg {
        background-attachment: scroll;
    }

    .modal .editscname {
        width: 100%;
    }
}


@media (max-width: 600px) {

    :root {
        --txtbase: 12px;
        --txtxl: 24px;
        --txtxxl: 44px;
        --txtxxxl: 60px;
        --megatxt: 100px;

        --ava-w: 100%;
        --ava-h: auto;
    }

    .forenheader {
        min-height: 220px;
    }

    .avatar,
    .post_avatar,
    .profile-avatar,
    .dossier-avatar {
        width: 100%;
    }

    .avatar img,
    .post_avatar img,
    .profile-avatar img,
    .dossier-avatar img {
        width: 100%;
        height: auto;

        aspect-ratio: var(--ava-ratio);
    }

    input[type="text"],
    input[type="number"],
    input[type="url"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        width: 100%;
    }

    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 38px;
    }

    .content-width,
    .content-wide {
        width:
            min(
                calc(100% - 24px),
                var(--content-max)
            );
    }
}


/* =========================================================
   24. REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms
            !important;

        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;
    }
}