/* Shared foundations for V4 and legacy pages. */
:root {
    --primary-bg-color: rgba(25, 25, 25, 1);
    --secondary-bg-color: rgba(60, 60, 60, 1);
    --primary-text-color: rgb(255, 255, 255, 1);
    --secondary-text-color: #ff5f0f;
}
/* Skip-Link für Barrierefreiheit */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}
.no-break {         /* Wörter, die nie getrennt werden sollen */
  white-space: nowrap;
}
* {
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    font-family: "Be Vietnam Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* background-color: var(--primary-bg-color); */
    color: var(--primary-text-color);
}

/* Typografie: Be Vietnam Pro für Überschriften/UI, Outfit für Fließtext. */
h1, h2, h3, h4, h5, h6,
nav, button, label, legend, summary,
input[type="button"], input[type="submit"], input[type="reset"] {
    font-family: "Be Vietnam Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

p, li, figcaption, blockquote, cite,
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea, select {
    font-family: "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1 {
    font-size: clamp(1.6rem, 1.05rem + 1.4vw, 2.7rem);

    color: var(--primary-text-color);
}
h2 {
    font-size: clamp(1.1rem, 0.98rem + 0.3vw, 1.35rem);

    color: var(--secondary-text-color);
}
h3 {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.3rem);

    color: var(--primary-text-color);
}
p{
    color:var(--primary-text-color);
    hyphens: auto;
    margin-top: 1rem;
    text-align: justify;
    line-height: 150%;
}
a {
    text-decoration: none;
}

/* header / footerspezifisch */
header ul,
footer ul {
    margin: 0;
    list-style: none;
}
header ul li {
    font-size: clamp(0.8rem, 0.76rem + 0.1vw, 0.9rem);

    padding-left: 0;
    line-height: 100%;
    list-style-type: none;
}
section ul,
section ol {
    margin: 2rem 15px;
}
section ul li,
section ol li {
    padding-left: 15px;
    line-height: 175%;
    list-style-type: square;
}

/* Unterseiten */

/* Fokus-Stil für Links im Fließtext (z.B. in der Datenschutzerklärung) */
main a:focus {
    outline: 2px solid var(--secondary-text-color);
    outline-offset: 4px;
    border-radius: 4px;
    color: var(--secondary-text-color);
}
main p a,
main li a {
    color: var(--secondary-text-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}
main p a:hover,
main li a:hover {
    color: var(--primary-text-color);
    text-decoration-thickness: 2px;
}
/* Fokus (Barrierefreiheit) */
main p a:focus,
main li a:focus {
    outline: 2px solid var(--secondary-text-color);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (max-width:800px) {
   
    h2 {
        margin: 3% 0;
        
    }
    p {
        margin: 3% 0;
        line-height: 160%;
        }
}

@media (max-width:480px) {
    section ul {
        padding: 3% 6px 3% 15px;
    }
}

/* Accessible labels and honeypot fields, shared by both layouts. */
.visually-hidden,
.form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}