:root{
    --body-background-fill:#0b0f19;
    --body-text-color:#c7cfe2;
    --border-color-accent:#4b5563;
    --orange:#be5c01;
    --orange-darker:#9c4c01;    
    --background-accent:#1f2937;
}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,b,u,i,ol,ul,li,fieldset,form,label,input,select,textarea,table,tbody,tfoot,thead,tr,th,td,footer,header,nav{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    box-sizing:border-box;
}
footer,header{display:block}
body{line-height:1}
ol, ul{list-style:none}
*{outline: none}
html,body{
    height:100%;
    min-height:100%;
    margin:0;padding:
    0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
    font-size:17px;
    line-height:1.4
}
body{
    background:var(--body-background-fill);
    color:var(--body-text-color);
    display:flex;
    flex-direction:column
}
h1{font-weight:bold;font-size:1.6rem;margin:2.5rem 0 1rem 0;padding:0}
h2{font-weight:bold;font-size:1.1rem;margin:2.5rem 0 1rem 0;padding:0}
p{margin:1.3rem 0;padding:0 0.5rem}
p.kontakt-error{font-weight:bold;color:var(--orange-darker)}
.form-field{margin:0.25rem 0;padding:0 0.5rem}
.container{max-width:1000px;margin:0 auto;padding:1rem;flex:1 0 auto}
ol, ul{margin: 1.3rem 0;padding: 0 1rem}
ol li, ul li{margin: 0 0 0.5rem}
b{font-weight:bold}
textarea{
    margin:1rem 0;
    background-color:var(--background-accent);
    border:1px solid var(--border-color-accent);
    border-radius:0.5rem;
    color:var(--body-text-color);
    padding:1rem;
    display:block;
    width:100%;
    line-height:1.3;
}
button, a.button{
    display:inline-block;
    line-height:1;
    margin:0.25rem;
    color:var(--body-text-color);
    background-color:var(--orange);
    padding:0.5rem 1rem;
    border-radius:0.25rem;
    border:1px solid var(--orange);
    font-size:17px;
    cursor:pointer;
    text-decoration:none;
}
a.button.btn-outline{
    background-color:transparent;
    border:1px solid var(--border-color-accent);
}
button:hover,a.button:hover{
    background-color: var(--orange-darker);
    border-color: var(--orange-darker);
}
select{color:var(--body-text-color);background-color:var(--background-accent);padding:0.5rem 1rem;border-radius:0.25rem;border:1px solid var(--border-color-accent);margin:1rem 1rem 1rem 0;font-size:17px}
input[type="text"],input[type="email"],input[type="number"]{color:var(--body-text-color);background-color:var(--background-accent);padding:0.5rem 1rem;border-radius:0.25rem;border:1px solid var(--border-color-accent);margin:1rem 1rem 1rem 0;font-size:17px}
input[type="radio"]{cursor:pointer}
label{display:inline-block;margin-right:1rem}
.text-center{text-align:center}
.loader{width:50px;margin:0 auto;aspect-ratio:4;--_g: no-repeat radial-gradient(circle closest-side,#d7dbe4 90%,#d7dbe400);background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:calc(100%/3) 100%;animation: l7 1.5s infinite linear;}
@keyframes l7{33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0% }}
footer{flex-shrink:0;text-align:center;padding:2rem 1rem 1rem;font-size:90%;opacity:0.6}
a{color:var(--body-text-color);text-decoration:none}
.domain-boxes{margin: 2rem auto;}
.navbar
{
    width: 100%;
    padding: 10px 20px;
    background: var(--background-accent);
    border-bottom: 1px solid var(--border-color-accent);
    font-size: 90%;
    margin-bottom: 30px;
}

.navbar-minimal
{
    background: transparent;
    border-bottom: none;
    opacity: 0.6;
}

.nav-inner
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.nav-left a
{
    font-weight: 500;
    color: var(--body-text-color);
    text-decoration: none;
}

.nav-right a
{
    margin-left: 15px;
    color: var(--body-text-color);
    text-decoration: none;
}

.nav-right a:hover
{
    color: var(--orange);
}
.portfolio-columns
{
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.portfolio-column
{
    flex: 1;
}

.letter-group
{
    margin-bottom: 25px;
}

.domain-item
{
    margin-bottom: 6px;
}

.domain-item a
{
    text-decoration: none;
    color: var(--body-text-color);
}

.domain-item a:hover
{
    color: var(--orange);
}
mark
{
    background: rgba(77,163,255,0.3);
    color: #fff;
    padding: 0 2px;
    border-radius: 3px;
}
@media (max-width: 900px) {
    body{font-size: 16px}
}

@media (max-width: 768px) {
    .portfolio-columns
    {
        display: block;
    }
    .portfolio-column
    {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .container{
        padding:0.5rem;
        width:100%;
    }
}