@charset "UTF-8";
/* --------------------------------------------------------------------------
   1. Base - Fundament & Grundregeln
   -------------------------------------------------------------------------- */
/* === Fonts === */
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  src: url("Montserrat-Regular.woff2") format("woff2"), url("Montserrat-Regular.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: italic;
  src: url("Montserrat-Italic.woff2") format("woff2"), url("Montserrat-Italic.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  src: url("Montserrat-Bold.woff2") format("woff2"), url("Montserrat-Bold.woff") format("woff");
}
/* === Root-Variable === */
:root {
  /* === Textfarben === */
  --color-text: #1e1e1e; /* Standardtextfarbe – Kontrast zu #f1f3f5: 12.4:1 */
  --color-muted: #4c566a; /* Sekundärtext, Hinweise, Labels – Kontrast zu #ffffff: 7.3:1 */
  --color-border: #ccc; /* Farbe für Border */
  /* === Hintergrundfarben === */
  --color-bg-light: #f1f3f5; /* Helle Flächen, z. B. Header, Cards – Kontrast zu #1e1e1e: 12.4:1 */
  --color-bg-dark: #1f2937; /* Dunkle Flächen, z. B. Footer, Sidebar – Kontrast zu #ffffff: 12.6:1 */
  --color-white: #ffffff; /* Reines Weiß für Kontrastflächen – Kontrast zu #1f2937: 12.6:1 */
  /* === Seitenhintergrund === */
  --color-bg-site: #f8fafc; /* Grundfläche der Seite (html, body) – Kontrast zu #1e1e1e: 15.3:1 */
  /* === Primärfarben === */
  --color-primary: #005fa3; /* Hauptakzentfarbe (Buttons, Links, Icons) – Kontrast zu #ffffff: 6.6:1 */
  /* === Sekundärfarben === */
  --color-secondary: #d97706; /* Sekundärer Akzent (z. B. CTA, Highlights) – Kontrast zu #ffffff: 7.8:1 */
  --color-secondary-dark: #92400e; /* Hover- oder Fokuszustand der Sekundärfarbe – Kontrast zu #ffffff: 10.9:1 */
  --verlauf-one: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(37, 99, 235, 0.08) 100%);
  --shadow-one: 0 8px 24px rgba(0, 95, 163, 0.08);
  --font-base: "Roboto", Arial, sans-serif;
  --form-font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-sm: clamp(12px, 11.60px + 0.13vw, 14px); /* sehr klein, Meta, Labels */
  --font-size-base: clamp(14px, 13.20px + 0.25vw, 18px); /* Standard-Body */
  --font-size-md: clamp(16px, 15.60px + 0.13vw, 18px); /* kleiner Heading / h6 */
  --font-size-lg: clamp(20px, 19.20px + 0.25vw, 24px); /* h5/h4 */
  --font-size-xl: clamp(28px, 25.60px + 0.75vw, 40px); /* h3/h2 */
  --font-size-xxl: clamp(32px, 27.20px + 1.50vw, 56px); /* h1 / Hero */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --border-radius: 5px;
  --body-width-min: 340px;
  --container-max: 1366px;
  --header-height: 100px;
  --header-height-scroll: 60px;
  --header-max-width: 1920px;
  --header-z: 1000;
  --hero-max-width: 1366px;
  --footer-max-width: 1920px;
  --nav-width-mobile: 100%;
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease-in-out;
  --transition-slow: all 0.6s ease;
  --form-gap: 15px;
}

/* === Basic === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

main.layout {
  flex: 1;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-site);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* === Helper === */
[data-lazy] {
  opacity: 0;
  transition: opacity 1s ease, transform 0.5s ease;
}

[data-lazy].is-visible {
  opacity: 1;
}

/* === Typografie === */
/* --------------------------------------------------------------------------
   2. Layout - Struktur & Container
   -------------------------------------------------------------------------- */
/* === Main / Grid === */
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  margin: var(--header-height-scroll) auto 0;
  padding: var(--space-sm);
}

main > section {
  width: 100%;
  margin: 0;
  padding: 10px 0;
}

main > aside {
  width: 100%;
  margin: 0;
  padding: var(--space-lg);
  background-color: var(--color-muted-bg);
}

@media (min-width: 768px) {
  main {
    margin: var(--header-height) auto 0;
    padding: var(--space-xl);
  }
}
@media (min-width: 1024px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr; /* L= 2fr 1fr | R= 1fr 2fr */
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xl);
  }
  main > section {
    grid-column: 1/2; /* L= 1/2 | R= 2/3 */
  }
  main > aside {
    grid-column: 2/3; /* L= 1/2 | R= 2/3 */
    grid-row: 1/-1;
    height: 100%;
  }
  .layout--single {
    display: grid;
    grid-template-columns: 1fr;
  }
  .layout--single > section {
    grid-column: 1/-1;
  }
}
/* === Header === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z);
  background: var(--color-bg-site);
  color: var(--color-white);
  transition: var(--transition-base);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.3);
}

.site-header p {
  margin: 0;
  padding: 0;
}

.header-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--header-max-width);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  transition: var(--transition-base);
}

.logo img {
  display: block;
  width: auto;
  max-height: 50px;
  transition: max-height 0.3s ease;
}

.is-scrolled .logo img {
  max-height: 40px;
}

#header.is-scrolled .header-inner {
  height: var(--header-height-scroll);
  /* padding: calc(var(--space-md) * 0.25) var(--space-xl); */
}

@media (max-width: 768px) {
  .logo img {
    width: 190px;
  }
  .header-inner {
    height: var(--header-height-scroll);
    padding: 0 var(--space-sm);
  }
}
/* === Sidebar === */
/* === Footer === */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-white);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
  margin-top: auto;
  padding: 12px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  gap: 16px;
}

.footer-left,
.footer-center,
.footer-right {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
}

.footer-left {
  flex: 0 0 auto;
}

.f-copyright {
  margin: 0;
  color: var(--color-white);
}

.footer-center {
  justify-content: center;
  text-align: center;
}

.made-with-love {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: var(--color-white);
}

.footer-right {
  flex: 0 0 auto;
}

.f-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.f-links li {
  margin: 0;
}

.footer-btn {
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  border-radius: 0px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.footer-btn:hover,
.footer-btn.active {
  color: var(--color-bg-dark);
  background: var(--color-secondary);
}

.mwl-heart {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--color-secondary);
  transform-origin: 50% 50%;
  animation: mwl-pulse 1200ms infinite cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

@keyframes mwl-pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.28);
  }
  18% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.12);
  }
  36% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
  }
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    justify-content: center;
  }
  .footer-right {
    order: 1;
  }
  .footer-left {
    order: 3;
  }
  .footer-center {
    order: 2;
  }
  .f-links {
    flex-direction: row;
    gap: var(--space-sm);
  }
  .footer-btn {
    display: inline-block;
    min-width: 160px;
    max-width: 320px;
    width: auto;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
  }
  .footer-btn:hover,
  .footer-btn.active {
    background: var(--color-secondary);
    color: var(--color-bg-dark);
  }
  .mwl-heart {
    width: 1.5rem;
    height: 1.5rem;
  }
  .made-with-love {
    gap: 0.6rem;
    font-size: 1rem;
  }
}
@media (max-width: 420px) {
  .footer-btn {
    min-width: 140px;
    padding: 0.45rem 0.6rem;
  }
  .mwl-heart {
    width: 1.35rem;
    height: 1.35rem;
  }
}
/* --------------------------------------------------------------------------
   3. Components - UI-Komponenten
   -------------------------------------------------------------------------- */
/* === Buttons === */
/* === Forms === */
.form-card,
form.form-only {
  background: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid rgba(30, 30, 30, 0.04);
  box-shadow: var(--shadow-one);
  padding: var(--space-lg);
  font-family: var(--form-font);
  color: var(--color-text);
}

.form-card h1,
.form-card h2,
form.form-only h1,
form.form-only h2 {
  margin: 0 0 8px 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.form-card .form-sub,
form.form-only .form-sub {
  margin: var(--space-xs) 0 var(--space-sm) 0;
  color: var(--color-muted);
  font-size: var(--font-size-base);
}

.form-card .form-grid,
form.form-only .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--form-gap);
}

.form-card .form-grid .full,
form.form-only .form-grid .full {
  grid-column: 1/-1;
}

@media (min-width: 760px) {
  .form-card .form-grid.two-col,
  form.form-only .form-grid.two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.form-card .form-field,
form.form-only .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-card label,
form.form-only label {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text, var(--color-text));
  display: inline-block;
}

.form-card .help,
form.form-only .help {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

input:focus,
textarea:focus {
  outline: 0;
  box-shadow: none;
}

.form-card .input,
.form-card select,
.form-card textarea,
form.form-only .input,
form.form-only select,
form.form-only textarea {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.14s ease, border-color 0.12s ease, transform 60ms ease;
}

.form-card textarea,
form.form-only textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
  padding-top: var(--space-xs);
}

form.form-only .checkbox-group {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--form-gap);
}

.form-card .checkbox,
form.form-only .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.form-card .checkbox input,
form.form-only .checkbox input {
  margin: 0;
}

.checkbox-label {
  color: var(--color-text);
  font-weight: 500;
}

.form-card .input:hover,
.form-card select:hover,
.form-card textarea:hover,
form.form-only .input:hover,
form.form-only select:hover,
form.form-only textarea:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 95, 163, 0.06);
  box-shadow: inset 0 -3px 0 #004a94;
}

.form-card .input:focus,
.form-card select:focus,
form-card textarea:focus,
form.form-only .input:focus,
form.form-only select:focus,
form.form-only textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 95, 163, 0.06);
  box-shadow: inset 0 -2px 0 #004a94;
  z-index: 1;
}

.form-card .has-error .input,
form.form-only .has-error .input {
  border-color: var(--color-secondary);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.06);
}

.form-card .error-text,
form.form-only .error-text {
  color: var(--color-secondary);
  font-size: var(--font-base);
  margin-top: 0;
}

.form-card .btn,
form.form-only .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: var(--border-radius);
  background: var(--color-primary);
  color: var(--color-white);
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-base);
  transition: transform 0.12s ease;
}

.form-card .btn:hover,
form.form-only .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.form-card .btn.secondary,
form.form-only .btn.secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.form-card .btn.secondary:hover,
form.form-only .btn.secondary:hover {
  background: var(--color-secondary-dark);
}

.form-card .form-foot,
form.form-only .form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.form-card .form-disclaimer,
form.form-only .form-disclaimer {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-top: var(--space-sm);
}

.form-card .text-right,
form.form-only .text-right {
  text-align: right;
}

.form-card .form-message,
form.form-only .form-message {
  margin-top: 12px;
  font-size: var(--font-size-base);
}

form.form-only .form-message.success {
  color: var(--color-primary);
}

form.form-only .form-message.error {
  color: var(--color-secondary);
}

@media (max-width: 420px) {
  .form-card,
  form.form-only {
    padding: 0;
    background: 0;
    box-shadow: none;
    border: 0;
  }
  .form-card h1,
  .form-card h2,
  form.form-only h1,
  form.form-only h2 {
    font-size: 1.02rem;
  }
}
/* === Fieldset === */
fieldset {
  border: 1px solid var(--color-border);
  padding: calc(var(--space-md)) calc(var(--space-md));
  margin: 0 0 var(--space-md);
  border-radius: calc(var(--border-radius) + 2px);
  background: var(--color-white);
}

legend {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  padding: 0 var(--space-xs);
  margin-left: 0.25rem;
  font-weight: 600;
}

/* Help text / hint */
.field-help {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* === Navigation === */
.main-nav ul {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  background: 0 0;
}

.main-nav a {
  display: flex;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-text);
  text-decoration: none;
}

.main-nav li {
  position: relative;
}

.main-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: calc(100% - 0px);
  height: 2px;
  background-color: var(--color-muted);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.main-nav a.active::before,
.main-nav a:hover::before {
  transform: scaleX(1);
}

.main-nav a:hover {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 32px;
  height: 28px;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.nav-toggle-label span,
.nav-toggle-label::after,
.nav-toggle-label::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 3px;
  background: var(--color-bg-dark);
  border-radius: var(--border-radius);
  transform: translateX(-50%);
  transition: var(--transition-base);
}

.nav-toggle-label span {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-label::before {
  top: var(--space-xxs);
}

.nav-toggle-label::after {
  bottom: var(--space-xxs);
}

.nav-toggle:checked + .nav-toggle-label span {
  opacity: 0;
}

.nav-toggle:checked + .nav-toggle-label::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label::after {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle-label {
    display: block;
  }
  .main-nav a::before {
    display: none;
  }
  .main-nav {
    position: absolute;
    top: var(--header-height-scroll);
    right: 0;
    width: var(--nav-width-mobile);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-site);
  }
  .main-nav a {
    border-top: 1px solid var(--color-muted);
    padding-left: var(--space-lg);
  }
  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 50px;
    padding: 0 var(--space-md);
    text-decoration: none;
  }
  .main-nav li:first-child a {
    border-top: 1px solid var(--color-primary);
  }
  .main-nav li:last-child a {
    border-bottom: 1px solid var(--color-muted);
  }
  .nav-toggle:checked ~ .main-nav {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
  }
}
/* === List === */
ul, ol {
  margin: 0 0 var(--space-md) 1.25rem;
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
}

ul li, ol li {
  margin: 0.45rem 0;
  line-height: 1.5;
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* Definition lists */
dl {
  margin: 0 0 var(--space-md);
}

dt {
  font-weight: 600;
  margin-top: var(--space-sm);
  font-size: var(--font-size-base);
}

dd {
  margin: 0 0 var(--space-sm) 1.25rem;
  color: var(--color-muted);
}

/* List markers (better contrast) */
ul {
  list-style: disc outside;
}

ol {
  list-style: decimal outside;
}

/* === Cards === */
/* === Hero === */
/* === Tables === */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-base);
}

th, td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  color: var(--color-text);
}

thead th {
  background: var(--color-bg-light);
  font-weight: 700;
  color: var(--color-text);
}

tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

table caption {
  caption-side: bottom;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* Responsive: horizontal scroll on small screens */
@media (max-width: 767px) {
  .content table, .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td {
    white-space: nowrap;
  }
}
/* === Pagination === */
/* === Icons === */
/* === ToTop === */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 48px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #005fa3;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: transform 0.25s ease, opacity 0.2s ease;
  z-index: 1000;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:focus,
.to-top:hover {
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.to-top__icon {
  width: 60%;
  height: 60%;
  fill: currentColor;
  display: block;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
    transform: none;
  }
}
/* small screens */
@media (max-width: 420px) {
  .to-top {
    right: 12px;
    bottom: 40px;
    width: 40px;
    height: 40px;
  }
}
/* large screens */
@media (min-width: 1024px) {
  .to-top {
    right: 24px;
    bottom: 64px;
    width: 52px;
    height: 52px;
  }
}/*# sourceMappingURL=style.css.map */