@font-face {
  font-family: "Montserrat Local";
  src: url("assets/montserrat-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Local";
  src: url("assets/montserrat-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #121a1d;
  --paper: #f6f8f7;
  --accent: #42778e;
  --line: rgb(17 27 30 / 18%);
  --content-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Montserrat Local", Montserrat, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #a1d3e7; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.04em; }
p { margin: 0 0 1em; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; color: #fff; background: #000; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

/* Header und Navigation: System der neuen Startseite */
.site-header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto auto; align-items: center; min-height: 76px; padding: 14px clamp(24px, 5vw, 76px); color: #fff; background: #060707; }
.brand { display: inline-flex; width: 174px; line-height: 0; }
.brand img { width: 100%; height: 42px; object-fit: contain; filter: invert(1); }
.primary { display: flex; gap: .5em; align-items: center; margin-left: auto; margin-right: 2rem; }
.primary a { color: #fff; font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.primary a + a::before { content: " "; }
.primary a:hover, .site-footer a:hover { color: #a1d3e7; }
.menu { position: relative; }
.menu summary { display: grid; width: 44px; height: 44px; place-items: center; color: #fff; font-size: 0; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { width: 22px; height: 14px; content: ""; border-top: 2px solid; border-bottom: 2px solid; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.menu nav { position: absolute; top: calc(100% + 17px); right: -76px; display: grid; width: min(420px, 100vw); max-height: calc(100vh - 76px); padding: 28px clamp(24px, 5vw, 54px) 36px; overflow-y: auto; background: #101315; box-shadow: -20px 26px 60px rgb(0 0 0 / 32%); }
.menu nav a { padding: .55rem 0; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 14%); }

/* Das originale Markup bleibt unverändert; diese Regeln geben ihm die neue Bildsprache. */
#inhalt { overflow: clip; }
.outer { padding: clamp(72px, 9vw, 138px) max(24px, calc((100vw - var(--content-width)) / 2)) !important; }
.section { position: relative; }
.section > .row, .container > .row { display: flex; flex-wrap: wrap; width: min(100%, var(--content-width)); margin: auto; position: relative; z-index: 1; }
.column { width: var(--col, 100%); min-width: 0; padding: 12px; }
.column > .section { width: 100%; }
.widget { max-width: 100%; }
.widget-heading { color: inherit !important; }
.widget-heading h1, .widget-heading h2, .widget-heading h3 { color: inherit !important; font-size: clamp(2rem, 4vw, 4.4rem) !important; font-weight: 700 !important; }
.widget-text-editor { max-width: 730px; font-size: 1rem !important; line-height: 1.7; }
.widget-text-editor p + p { margin-top: 1rem; }
.spacer { max-height: 54px; }
.has-bg { color: #fff; background-size: cover !important; background-position: center !important; isolation: isolate; }
.has-bg::before { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(90deg, rgb(2 14 18 / 69%), rgb(2 14 18 / 25%)); }
.has-bg .row { position: relative; z-index: 1; }
.has-bg .widget-heading, .has-bg .widget-text-editor { color: #fff !important; }
.has-bg .widget-heading h1, .has-bg .widget-heading h2, .has-bg .widget-heading h3 { color: #fff !important; }
.button { display: inline-block; padding: .9rem 1.35rem; color: #fff !important; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; background: #11191c !important; border: 1px solid #11191c !important; border-radius: 0 !important; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.button:hover { color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important; transform: translateY(-2px); }
.has-bg .button { color: #fff !important; background: rgb(5 14 18 / 73%) !important; border-color: rgb(255 255 255 / 76%) !important; }
.image-box { display: block; min-height: 100%; padding: 26px; color: var(--ink); text-align: left; text-decoration: none; background: #fff; border: 1px solid var(--line); transition: transform 180ms ease, background 180ms ease; }
.image-box:hover { color: #fff; background: var(--accent); transform: translateY(-4px); }
.image-box img { width: auto; height: 60px; margin: 0 0 30px; object-fit: contain; }
.image-box:hover img { filter: brightness(0) invert(1); }
.image-box h3 { font-size: 1.25rem; font-weight: 700; }
.image-box p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; }
.cards .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cards .column { width: 100% !important; padding: 0; }
.widget-image img { width: var(--image-width, auto); max-width: 100%; }
.section-video { display: block; width: 100%; max-height: 74vh; object-fit: cover; background: #101719; }
.has-bg .section-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-height: none; opacity: .6; }

/* Footer ohne zusätzliches Logo */
.site-footer { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(480px, 1.3fr); gap: 6vw; padding: 58px max(32px, calc((100vw - var(--content-width)) / 2)); color: #fff; background: #060707; }
.site-footer strong { display: block; font-size: 1.35rem; }
.site-footer p { margin: .3rem 0 1rem; }
.site-footer > div > a { display: block; width: fit-content; color: #fff; text-decoration: none; }
.site-footer > div > a[aria-label="E-Mail senden"] { font-size: 2.7rem; line-height: 1; }
.site-footer nav { display: flex; flex-wrap: wrap; align-content: center; gap: 1rem 2rem; }
.site-footer nav a { color: #fff; font-size: .9rem; text-decoration: none; }
.site-footer img, .site-footer svg { display: none !important; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .primary { display: none; }
  .menu nav { right: -24px; }
  .section > .row, .container > .row { display: block; }
  .column { width: 100% !important; padding: 10px 0; }
  .cards .row { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr; gap: 2.4rem; }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; padding: 10px 20px; }
  .brand { width: 150px; }
  .brand img { height: 38px; }
  .outer { padding: 70px 20px !important; }
  .widget-heading h1, .widget-heading h2, .widget-heading h3 { font-size: clamp(2rem, 11vw, 3.3rem) !important; }
  .cards .row { grid-template-columns: 1fr; }
  .site-footer { padding: 44px 20px; }
  .site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
}