/*
 * Grundlegende Einstellungen
 */


/* yanone-kaffeesatz-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* yanone-kaffeesatz-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* yanone-kaffeesatz-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* yanone-kaffeesatz-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* yanone-kaffeesatz-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* yanone-kaffeesatz-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/yanone-kaffeesatz-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dynalight-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dynalight';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dynalight-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



.font-primary {
 font-family: "Dynalight", cursive;
  font-weight: 400;
	font-size: 4rem;
	color: #82ab57
}

.font-secondary {
   font-family: "Yanone Kaffeesatz", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	font-size: 3rem
}
.light { font-weight: 300; }
  .normal { font-weight: 400; }
  .bold { font-weight: 700; }
  .extra-bold { font-weight: 900; }



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

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

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

    font-family:"Yanone Kaffeesatz", sans-serif;
	
	

    font-size: 1.3rem;
    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: #f7fcf4;
    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;
}

h1 {
    margin: 0;
	font-family: Dynalight;

    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.2;

    overflow-wrap: anywhere;
}


/*
 * Kontaktdaten
 */

.kontaktdaten {
    margin-top: 1.5rem;

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

.adresse {
    margin: 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: #82ab57;
    text-decoration-thickness: 0.08rem;
    text-underline-offset: 0.3em;

    overflow-wrap: anywhere;
}

a:hover {
    color: #375518;
    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;
    }
}