/* --------------- Allgemeine Definitionen --------------- */

html,
body,
address,
blockquote,
div,
form,
fieldset,
caption,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ul,
li,
ol,
ul,
table,
tr,
td,
th,
p,
img {
    margin: 0;
    padding: 0;
}

img,
fieldset {
    border: none;
}

* {
    box-sizing: border-box;
    border: none;
    transition: background 0.3s, color 0.3s;
}

*:focus {
    outline: 0px solid;
}

hr {
    display: none;
}

html {
    overflow: hidden;
}

html,
body {
    /* Unsicher bei den beiden, wenn 100% gibts manchmal Probleme und sie scheinen Aktuell keinen nutzen zu haben wenn sie 100% sind */
    /* width: 100%; */
    /* height: 100%; */
    scrollbar-color: var(--theme) #fff;
    font: normal 16px/24px tahoma, arial, helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    margin: 1rem;
}

textarea,
input,
button,
select {
    font: inherit;
}
input,
select,
.search-field{
    height: 2.5rem;
    padding: 0 var(--spacing-05);
    color: var(--text-01);
    background-color: var(--field-02);
    border-bottom: 1px solid var(--ui-04);
    font: var(--body-short-01);
    letter-spacing: var(--body-short-01-ls);
}

textarea {
    font: var(--body-short-01);
    letter-spacing: var(--body-short-01-ls);
    color: var(--text-01);
    background-color: var(--field-02);
    padding: var(--spacing-05);
    resize: none;
}

label {
    color: var(--text-02);
    margin-bottom: var(--spacing-03);
    font: var(--label-01);
    letter-spacing: var(--label-01-ls);
}

/* Definiert das aussehen bei Input Hilfe Texten */
form .helptext {
    color: var(--text-02);
    margin-top: var(--spacing-02);
    font: var(--label-01);
    letter-spacing: var(--var-label-01-ls);
}

form .helptext.disabled,
label.disabled {
    color: var(--disabled-02);
    cursor: not-allowed;
}

input::placeholder {
    color: var(--text-03);
}

input.dark,
select.dark {
    background-color: var(--field-01);
}
input.dark:disabled,
select.dark:disabled {
    background-color: var(--disabled-01);
    color: var(--disabled-02);
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

input:disabled {
    background-color: var(--disabled-02);
    color: var(--disabled-03);
    border-bottom: 0px;
    cursor: not-allowed;
}

input[type='checkbox'] {
    min-height: 0;
    height: 1rem;
    width: 1rem;
    border: 1px solid var(--icon-01);
}

form,
form > p {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

form > p {
    margin-bottom: var(--spacing-05);
}

form > button {
    margin-top: var(--spacing-05);
}

button,
input[type='submit'] {
    position: relative;
    text-align: left;
    min-height: 3rem;
    min-width: 3rem;
    background: transparent;
    color: var(--interactive-03);
    border-bottom: 1px solid var(--interactive-03);
    padding: 0 1rem;
    font: var(--body-short-01);
    letter-spacing: var(--body-short-01-ls);
    cursor: pointer;
}

button .icon,
button i,
input[type='submit'] .icon,
input[type='submit'] i {
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 1rem;
    height: 1rem;
    padding-left: 1rem;
}

button.icon {
    text-align: center;
}

button .icon::before,
button i::before {
    line-height: 1rem;
}

button:focus,
input[type='submit']:focus {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

button:hover,
input[type='submit']:hover {
    background-color: var(--hover-tertiary);
    color: var(--inverse-01);
}

button:disabled,
input[type='submit']:disabled {
    color: var(--disabled-03);
    border-bottom-color: var(--disabled-02);
    background-color: transparent;
}

.ui-container {
    background: var(--ui-01);
    padding: 1rem;
    border-top: 0.25rem solid var(--theme);
    box-shadow: var(--std-shadow);
}