/* Schriften lokal (OFL-1.1, Lizenzen unter /assets/fonts/), kein CDN. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/source-serif-4-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/source-serif-4-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/source-serif-4-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/source-serif-4-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Farben gemessen an den Logo-Dateien von DUR (2026-10-27).
   Gold als Schrift auf hellem Grund nur in --gold-text: #C9A15B erreicht dort 2.4:1. */
:root {
  --navy: #090C36;
  --gold: #C9A15B;
  --gold-text: #7D5F27;
  --muted: #4A4D63;
  --grund: #F7F5F0;
  --linie: #E4DFD3;
  --linie-fein: #EFEBE2;
  --feld: #C9C4B6;
  --navy-text: #C9CBDA;
  --navy-linie: #262A5C;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--gold-text); }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; overflow-wrap: break-word; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: #FFFFFF; padding: 10px 16px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 96px; padding-bottom: 96px; }
.section--kompakt { padding-top: 80px; padding-bottom: 80px; }
.bg-grund { background: var(--grund); }
.bg-weiss { background: #FFFFFF; }
.bg-navy { background: var(--navy); color: #FFFFFF; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.bg-navy .eyebrow { color: var(--gold); }
.h2 { font-size: 40px; line-height: 1.15; margin-bottom: 20px; }
.h2--klein { font-size: 34px; line-height: 1.2; }
.lead { margin: 0 0 56px; color: var(--muted); max-width: 720px; }
.muted { color: var(--muted); }
.regel { width: 64px; height: 2px; background: var(--gold); margin: 0 0 28px; }
.nummer { margin: 0 0 8px; font-family: var(--serif); font-size: 32px; color: var(--gold); line-height: 1; }
.nummer--gross { font-size: 40px; }

/* Schaltflächen */
.btn {
  display: inline-block;
  padding: 15px 28px;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--navy);
  cursor: pointer;
}
.btn--primaer { background: var(--navy); color: #FFFFFF; }
.btn--primaer:hover { background: #1A1E52; color: #FFFFFF; }
.btn--sekundaer { background: transparent; color: var(--navy); }
.btn--sekundaer:hover { background: var(--navy); color: #FFFFFF; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn--gold:hover { background: #D8B477; color: var(--navy); }
.btn--klein { padding: 12px 22px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: #FFFFFF; }
.kopf .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding-top: 18px; padding-bottom: 18px;
}
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marke img { height: 52px; width: auto; display: block; }
.marke__text {
  display: flex; flex-direction: column; line-height: 1.25;
  border-left: 1px solid var(--linie); padding-left: 14px;
}
.marke__firma { font-weight: 600; font-size: 15px; color: var(--navy); letter-spacing: 0.02em; }
.marke__ort { font-size: 13px; color: var(--muted); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; padding: 10px 0; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.nav .btn { padding: 12px 20px; color: #FFFFFF; }
.nav .btn:hover { color: #FFFFFF; }

/* Einstieg */
.hero { padding-top: 96px; padding-bottom: 104px; }
.hero--seite { padding-top: 80px; padding-bottom: 88px; }
.hero__raster { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hero__text { flex: 999 1 560px; min-width: 0; }
.hero h1 { font-size: 56px; line-height: 1.1; letter-spacing: -0.01em; max-width: 640px; margin-bottom: 28px; }
.hero--seite h1 { font-size: 52px; line-height: 1.12; max-width: 820px; }
.hero .eyebrow { margin-bottom: 20px; }
.hero__lead { margin: 0 0 40px; font-size: 19px; color: var(--muted); max-width: 600px; }
.hero--seite .hero__lead { max-width: 720px; margin-bottom: 36px; }
.grundsaetze {
  flex: 1 1 340px; min-width: 0;
  background: var(--navy); color: #FFFFFF;
  padding: 40px 36px; border-radius: 2px; border-top: 3px solid var(--gold);
}
.grundsaetze .eyebrow { margin-bottom: 24px; }
.grundsaetze ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.grundsaetze li { display: flex; gap: 16px; }
.grundsaetze li span:first-child { font-family: var(--serif); color: var(--gold); font-size: 20px; line-height: 1.3; }

/* Leistungskarten */
.karten { display: flex; flex-wrap: wrap; gap: 32px; }
.karte {
  flex: 1 1 420px; min-width: 0;
  border: 1px solid var(--linie); border-top: 3px solid var(--navy);
  padding: 40px; border-radius: 2px;
}
.karte h3 { font-size: 26px; line-height: 1.25; margin-bottom: 24px; }
.karte ul { margin: 0 0 32px; padding: 0; list-style: none; }
.karte li { padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.karte li:last-child { border-bottom: 0; }
.karte__hinweis { margin: -8px 0 32px; color: var(--muted); font-size: 15px; }
.weiter { font-weight: 500; }

/* Arbeitsweise */
.schritte {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
}
.schritte li { border-top: 2px solid var(--gold); padding-top: 20px; }
.schritte__nr { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold-text); }
.schritte h3 { font-size: 22px; margin-bottom: 8px; }
.schritte p { margin: 0; color: var(--muted); font-size: 16px; }

/* Was wir nicht tun */
.grenzen { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.grenzen__kopf { flex: 1 1 320px; min-width: 0; }
.grenzen__kopf .h2 { color: #FFFFFF; }
.grenzen__kopf p { margin: 0; color: var(--navy-text); }
.grenzen ul { flex: 2 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.grenzen li { padding: 18px 0; border-bottom: 1px solid var(--navy-linie); display: flex; gap: 16px; }
.grenzen li:last-child { border-bottom: 0; }
.grenzen li::before { content: "—"; color: var(--gold); }

/* Zwei Spalten */
.spalten { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.spalte-breit { flex: 3 1 480px; min-width: 0; }
.spalte-schmal { flex: 2 1 340px; min-width: 0; }
.spalte-links { flex: 1 1 300px; min-width: 0; }
.spalte-rechts { flex: 2 1 560px; min-width: 0; }
.spalte-kontakt { flex: 1 1 340px; min-width: 0; }
.spalte-formular { flex: 2 1 520px; min-width: 0; }
.text p { margin: 0 0 20px; color: var(--muted); }
.text p:last-child { margin-bottom: 0; }
.h2 + .text, .h2 + address { margin-top: 24px; }
address { font-style: normal; line-height: 1.8; }

/* Firmendaten */
.daten {
  margin: 0; border: 1px solid var(--linie); border-top: 3px solid var(--gold);
  padding: 32px 32px 16px; border-radius: 2px; font-size: 15px;
}
.daten div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linie-fein); }
.daten div:last-child { border-bottom: 0; margin-bottom: 0; }
.daten dt { flex: 0 0 130px; color: var(--muted); }
.daten dd { margin: 0; font-weight: 500; }

/* Leistungsseite */
.abschnitt-kopf h2 { font-size: 34px; line-height: 1.2; margin-bottom: 16px; }
.abschnitt-kopf p { margin: 0; color: var(--muted); }
.leistung { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--linie); }
.leistung:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.leistung h3 { font-size: 23px; margin-bottom: 10px; }
.leistung p { margin: 0 0 14px; color: var(--muted); }
.leistung p:last-child { margin-bottom: 0; }
.leistung ul, .leistung ol { margin: 0 0 14px; padding-left: 22px; color: var(--muted); }
.leistung li + li { margin-top: 4px; }
.leistung ol:last-child, .leistung ul:last-child { margin-bottom: 0; }
.leistung .fazit { color: var(--navy); font-weight: 500; }
.leistung .klein { font-size: 15px; }

.branchen {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
.branchen li { background: #FFFFFF; border: 1px solid var(--linie); border-top: 3px solid var(--navy); padding: 28px; border-radius: 2px; }
.branchen strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.branchen span { color: var(--muted); font-size: 16px; }
.h2 + .branchen { margin-top: 40px; }

.faq { border-top: 1px solid var(--linie); margin-top: 32px; }
.faq details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.faq p { margin: 12px 0 0; color: var(--muted); max-width: 760px; }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: 72px; padding-bottom: 72px; }
.cta h2 { flex: 1 1 520px; min-width: 0; font-size: 30px; line-height: 1.3; color: #FFFFFF; }

/* Formular */
.formular {
  background: #FFFFFF; border: 1px solid var(--linie); padding: 40px; border-radius: 2px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 24px;
}
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.feld--voll, .zustimmung, .formular__fuss, .meldung { grid-column: 1 / -1; }
.feld input, .feld textarea {
  font: inherit; font-weight: 400; font-size: 16px; color: var(--navy);
  padding: 12px 14px; border: 1px solid var(--feld); border-radius: 2px; background: #FFFFFF;
}
.feld textarea { resize: vertical; min-height: 140px; }
.feld input:focus, .feld textarea:focus { border-color: var(--navy); outline: 2px solid var(--gold); outline-offset: 0; }
.optional { font-weight: 400; color: var(--muted); }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.zustimmung input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--navy); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formular__fuss p { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--muted); }
.formular button { border: 0; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.meldung { margin: 0; padding: 16px 20px; border-radius: 2px; border-left: 3px solid; }
.meldung--fehler { background: #FBF1EF; border-color: #A23B2A; color: #5E1E14; }
.meldung--fehler ul { margin: 8px 0 0; padding-left: 20px; }
.meldung--ok { background: #F1F5EE; border-color: #3E6B2F; color: #22401A; }

/* Rechtstexte */
.recht { max-width: 760px; }
.recht h1 { font-size: 44px; line-height: 1.15; margin-bottom: 20px; }
.recht h2 { font-size: 24px; margin: 48px 0 12px; }
.recht p, .recht li { color: var(--muted); }
.recht p { margin: 0 0 14px; }
.recht ul { margin: 0 0 14px; padding-left: 22px; }
.recht .stand { font-size: 14px; margin-top: 48px; }

/* Fuss */
.fuss { background: var(--navy); color: var(--navy-text); font-size: 14px; }
.fuss__oben {
  display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; justify-content: space-between;
  padding-top: 56px; padding-bottom: 40px;
}
.fuss__marke { display: flex; align-items: center; gap: 16px; }
.fuss__marke img { height: 56px; width: 56px; display: block; }
.fuss__marke strong { color: #FFFFFF; font-weight: 600; }
.fuss__oben > div { line-height: 1.7; }
.fuss nav { display: flex; gap: 24px; }
.fuss nav a { color: #FFFFFF; padding: 10px 0; }
.fuss nav a:hover { color: var(--gold); }
.fuss__unten { padding-bottom: 32px; }
.fuss__unten div { border-top: 1px solid var(--navy-linie); padding-top: 20px; font-size: 13px; }

@media (max-width: 720px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section--kompakt { padding-top: 56px; padding-bottom: 56px; }
  .hero { padding-top: 56px; padding-bottom: 64px; }
  .hero--seite { padding-top: 48px; padding-bottom: 56px; }
  .hero h1, .hero--seite h1 { font-size: 32px; }
  .h2 { font-size: 30px; }
  .h2--klein, .abschnitt-kopf h2 { font-size: 28px; }
  .recht h1 { font-size: 34px; }
  .karte, .formular { padding: 28px 22px; }
  .grundsaetze { padding: 32px 24px; }
  .lead { margin-bottom: 40px; }
  .marke__text { display: none; }
  h1, h2, h3 { hyphens: auto; }
  .nav { gap: 4px 20px; }
}