*,
*::before,
*::after{

    box-sizing:border-box;

}

:root{
    --bg:#f5f7fa;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
	--horizontalruler:#EBECF2;
    --shadow:0 20px 60px rgba(0,0,0,.08);
}

*{
    margin:0;
    padding:0;
}

/* ===========================
   Geist
   =========================== */

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ===========================
   Manrope
   =========================== */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body{
    font-family:"Geist",system-ui,sans-serif;
    min-height:100vh;
    color:var(--text);
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
    background:

        radial-gradient(
            circle at top left,
            rgba(46,70,116,.06),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(46,70,116,.05),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #fafafa,
            #eef2f7
        );

}

body::before {

    content: "";

    position: fixed;
    inset: -15%;

    pointer-events: none;

    background:
        radial-gradient(circle at 20% 20%,
            rgba(46,70,116,.06),
            transparent 40%),
        radial-gradient(circle at 80% 80%,
            rgba(46,70,116,.1),
            transparent 45%);

    animation: backgroundFloat 4s ease-in-out infinite alternate;

    z-index: -1;

}

@keyframes backgroundFloat {

    from {

        transform:
            translate(-2%, -1%)
            scale(1);

    }

    to {

        transform:
            translate(2%, 2%)
            scale(1.05);

    }

}

.home{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.legal-page{

    display:block;

    justify-content:center;

    padding:60px 0;

}

.error{

    display:block;

    justify-content:center;

    align-items:center;
	
	padding:60px 0;

}

.card{
    width: 400px;
	padding: 60px 42px 56px;
    max-width:90%;
	background:rgba(255,255,255,.94);
    border-radius:18px;
    text-align:center;
	border: 1px solid rgba(255,255,255,.6);
    box-shadow:
        0 24px 60px rgba(0,0,0,.12),
        0 1px 0 rgba(255,255,255,.8) inset;
	opacity: 0;
    transform: translateY(4px);
    animation: fadeIn .45s ease-out forwards;
}

@supports (backdrop-filter: blur(8px)) {

    .card{

        background: rgba(255,255,255,.88);
        backdrop-filter: blur(8px);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(4px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.card.legal.imprint{

    width:min(560px,92vw);

    padding:48px;
	margin:0 auto;

}

.card.legal.privacy{

    width:min(760px,92vw);

    padding:48px;
	margin:0 auto;

}

.card.error {
    width:min(560px,92vw);
    padding:48px;
	margin:0 auto;

}

.logo{

    display:block;

    width:120px;

    margin:0 auto 5px;

    color:#2E4674;
	
	user-select:none;
	pointer-events:none;

}

h1{

    font-size:32px;
	font-family: "Manrope", system-ui, sans-serif;
    font-weight: 500;
	color:#2E4674;
}

.subtitle, .error .subtitle {
	margin-top:20px;
    color:var(--muted);
    line-height:1.6;
    font-size:16px;
	font-family: "Geist", system-ui, sans-serif;
    font-weight: 500;
}

.error .subtitle {
    margin-bottom:50px;

}

.icons{
    margin-top:42px;
	margin-bottom: 40px;
    display:flex;
    justify-content:center;
    gap:35px;
}

.icons a{

    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    color:#4b5563;

    font-size:26px;

    transition:
        transform .2s ease,
        color .2s ease,
        opacity .2s ease;
		
	touch-action: manipulation;

    user-select: none;
}

.icons a:hover{

    transform:translateY(-2px);

    box-shadow:none;
}

.logo,
.icons svg{

    -webkit-user-drag: none;
}

.linkedin:hover{

    color:#0A66C2;
}

.xing:hover{

    color:#006567;
}


.legal footer, footer {
    padding-top: 28px;
    border-top:1px solid rgba(46,70,116,.08);
	color:#9ca3af;
    font-size:13px;
	font-family: "Geist", system-ui, sans-serif;
    font-weight: 400;
}

footer {
    margin-top: 28px;
}

.legal footer {
    margin-top: 56px;
}

/* ==========================================
   Legal Pages
   ========================================== */

.legal-header {
margin-bottom:1.5rem;	
}

.legal{
    text-align:left;
}

.legal .logo, .error .logo{

    width:84px;

    margin:0 0 2rem;

}

.logo-link{
    display:inline-block;
    color:#2E4674;
    text-decoration:none;
}

.logo-link:hover{
    opacity:.85;
}

.logo-link:focus-visible{
    outline:2px solid #2E4674;
    outline-offset:6px;
    border-radius:8px;
}

.legal h1, .error h1 {

    margin-bottom:2rem;

    font-family:"Manrope",system-ui,sans-serif;

    font-weight:600;

    font-size:2rem;
	
	font-size:clamp(1.6rem, 4vw, 2rem);

    line-height:1.15;
	
	text-wrap:balance;

}

.legal h2, .error h2 {

    margin-top:2rem;

    margin-bottom:.75rem;

    font-family:"Manrope",system-ui,sans-serif;

    font-weight:600;

    font-size:1.15rem;

    color:#2E4674;

}

.legal h3{

    margin-top:1.8rem;
    margin-bottom:.6rem;

    font-family:"Manrope",sans-serif;
    font-size:1.1rem;
    font-weight:600;

}

.legal h4{

    margin-top:1.2rem;
    margin-bottom:.5rem;

    font-family:"Geist",sans-serif;
    font-size:1rem;
    font-weight:400;

    color:#4b5563;

}

.legal p,
.legal address{

    font-family:"Geist",system-ui,sans-serif;

    font-style:normal;

    line-height:1.75;
	margin-bottom:1rem;

    color:var(--text);

}

.legal address{

    margin-bottom:1rem;

}

.legal ul{

    margin:

        .8rem
        0
        1.2rem
        1.4rem;

}

.legal li{

    margin-bottom:.55rem;

    line-height:1.8;

}

.legal h2:first-of-type{

    margin-top:0;

}

.legal a, .error a {
    color: var(--text);
    text-decoration:none;
	overflow-wrap:anywhere;
}

footer a {
    color:#2E4674;
    text-decoration:none;
	overflow-wrap:anywhere;
}

.legal a:hover, .error a:hover, footer a:hover {
    text-decoration:none;
}

.legal a:hover, .error a:hover {
    color:#2E4674;
}

.legal-nav a{

    color:#8F98A8;

    text-decoration:none;

    transition:
        color .2s ease,
        opacity .2s ease;

}

.legal-nav a:hover{

    color:#2E4674;

    text-decoration:none;

}

.legal-nav a:focus-visible{

    color:#2E4674;

    outline:2px solid rgba(46,70,116,.35);
    outline-offset:4px;
    border-radius:4px;

}

.source{

    margin-top:2rem;
	margin-bottom:2.5rem;

    font-size:.9rem;

    color:var(--muted);
	
	opacity:.65;

}

.legal-nav{	
	margin-top:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.75rem;
    font-size:.9rem;
}

.legal-nav span{
    color:#b7bec9;
}

.back-link{
    display:inline-block;
    margin-bottom:2.2rem;
    color:#8F98A8;
    text-decoration:none;
    font-size:.8rem;
	opacity:.55;
}

.back-link:hover{

    color:#2E4674;

}

.meta{

    display:inline-block;

    padding:.35rem .75rem;

    border-radius:999px;

    background:rgba(46,70,116,.06);

    color:#2E4674;

    font-size:.82rem;

}

.tech-note{

    margin-top:3rem;

    padding:1.5rem 1.75rem;

    background:rgba(46,70,116,.035);

    border:1px solid rgba(46,70,116,.08);

    border-radius:12px;

}

.tech-note h2{

    margin-top:0;

    margin-bottom:1rem;

}

.back-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;

    margin:0 auto 2.5rem;

    padding:.75rem 1.25rem;

    border:1px solid rgba(46,70,116,.12);
    border-radius:999px;

    background:rgba(46,70,116,.03);

    color:#2E4674;

    font-family:"Geist",system-ui,sans-serif;
    font-size:.92rem;
    font-weight:400;

    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.card.error .back-button {
	margin:0 auto;
	
}

.back-button:hover{

    background:rgba(46,70,116,.06);

    border-color:rgba(46,70,116,.20);

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(46,70,116,.08);
}

.back-button:active{

    transform:translateY(0);
}

.back-button:focus-visible{

    outline:2px solid rgba(46,70,116,.35);
    outline-offset:4px;
}

.back-icon{

    width:18px;
    height:18px;

    flex-shrink:0;

    transition:transform .2s ease;
}

.back-button:hover .back-icon{

    transform:translateX(-2px);
}

a,
button{

    -webkit-tap-highlight-color: transparent;
}

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

    .card {

        animation: none;

        opacity: 1;

        transform: none;

    }

}


@media (max-width:480px){

    .card{

        padding:40px 28px;
    }

    .card.legal.imprint,
    .card.legal.privacy{

        padding:40px 28px;
    }

}