/*
 * Grundlegende Einstellungen
 */



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

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

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

    font-family:'Arial';
    font-size: 1rem;
    line-height: 1.6;

    color: #1a1a1a;
    background-color: #FFFFFF;
}


/*
 * Seitenlayout
 */

.seite {
    display: grid;
    place-items: center;

    min-height: 100vh;
    min-height: 100svh;

    padding: clamp(1rem, 4vw, 3rem);
}

.kontaktkarte {
    width: min(100%, 42rem);
    padding: clamp(1.5rem, 6vw, 4rem);

    text-align: center;

    background-color: #EFF7FF;
    border: 0.0625rem solid #d5d9dd;
    border-radius: 1rem;

    box-shadow:
        0 0.25rem 0.75rem rgb(0 0 0 / 8%),
        0 1rem 2.5rem rgb(0 0 0 / 6%);
}

/*
 * Logo und Überschrift
 */

.kopfbereich {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    display: block;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
}

h2 {
	margin: 0;
	font-family:'Arial';
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
	padding:40px 0 0 0;
	font-size: 1.3rem;
	font-weight:normal;
}

h2 strong {
	font-weight:bold; 
}

h1 {
    margin: 0;
	font-family:'Arial';
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
	padding:10px 0 0 0;
	font-size: 2.4rem;
	color: #005caa
}

small {
	font-size:70%;
	line-height:70%;
	padding:0px;
	margin:0px;
}

/*
 * Kontaktdaten
 */

.kontaktdaten {
    margin-top: 1.5rem;

    font-style: normal;
    font-size: clamp(1rem, 3vw, 1.125rem);
}

.adresse {
    margin: 0;
	padding: 0;
}

.kontaktliste {
    display: grid;
    gap: 0.75rem;

    margin: 1.75rem 0 0;
    padding: 0;

    list-style: none;
}

.kontaktliste li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
}

.kontaktbezeichnung {
    font-weight: 700;
}

a {
    color: #005caa;
    text-decoration-thickness: 0.08rem;
    text-underline-offset: 0.3em;

    overflow-wrap: anywhere;
}

a:hover {
    color: #141E5A;
    text-decoration-thickness: 0.15rem;
}

/*
 * Deutlich sichtbarer Tastaturfokus
 */

a:focus-visible {
    color: #111111;
    background-color: #ffdf5d;

    outline: 0.1875rem solid #111111;
    outline-offset: 0.1875rem;

    border-radius: 0.125rem;
    text-decoration: none;
}


/*
 * Anpassung für schmale Bildschirme
 */

@media (max-width: 30rem) {
    .seite {
        align-items: start;
        padding: 1rem;
    }

    .kontaktkarte {
        padding: 1.5rem 1rem;
        border-radius: 0.75rem;
    }

    .kontaktliste li {
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
    }
}

/*
 * Reduzierte Bewegungen berücksichtigen
 */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * Kontrastmodus von Windows unterstützen
 */

@media (forced-colors: active) {
    .kontaktkarte {
        border: 0.125rem solid CanvasText;
    }

    .logo {
        border: 0.0625rem solid CanvasText;
    }
}