@font-face {
    font-family: "Roboto Local";
    src: url("../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --nb-bg: #faf7f2;
    --nb-surface: #ffffff;
    --nb-text: #222222;
    --nb-muted: #666666;
    --nb-border: #e4ddd4;
    --nb-red: #cf0000;
    --nb-red-hover: #a90000;
    --nb-heading: "Roboto Local", Roboto, Arial, sans-serif;
    --nb-body: "Roboto Local", Roboto, Arial, sans-serif;
}

html { background: var(--nb-bg); color: var(--nb-text); scroll-behavior: smooth; scroll-padding-top: 90px; }
body { min-width: 320px; background: var(--nb-bg); color: var(--nb-text); font: 17px/1.7 var(--nb-body); }
h1, h2, h3 { color: var(--nb-text); font-family: var(--nb-heading); font-weight: 700; letter-spacing: 0; }
h2 { max-width: 780px; margin-bottom: 20px; font-size: 2.2rem; line-height: 1.16; }
h3 { margin-bottom: 16px; font-size: 1.28rem; line-height: 1.28; }
p, address { color: var(--nb-muted); }
address { font-style: normal; }
a { color: inherit; }
a:hover { color: var(--nb-red-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(207, 0, 0, 0.28); outline-offset: 4px; }
img { display: block; }

.nb-skip-link {
    position: fixed;
    top: 16px;
    left: 20px;
    z-index: 2000;
    padding: 10px 14px;
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    color: var(--nb-text);
    transform: translateY(-140%);
    transition: transform 160ms ease;
}
.nb-skip-link:focus { transform: translateY(0); }

.nb-navbar, .nb-footer { border-bottom: 1px solid var(--nb-border); background: var(--nb-surface); }
.nb-footer { border-top: 1px solid var(--nb-border); border-bottom: 0; background: var(--nb-bg); }
.nb-navbar-inner { min-height: 78px; }
.nb-logo { min-height: auto; padding-left: 0; }
.nb-logo img { width: auto; height: 120px; }
.nb-navbar-actions { gap: 14px; }

.nb-nav-links > li > a {
    min-height: 70px;
    padding: 0 14px;
    color: var(--nb-muted);
    font: 600 0.92rem/1.5 var(--nb-body);
    letter-spacing: 0;
    text-transform: none;
}
.nb-nav-links > li > a:hover, .nb-nav-links > .uk-active > a { color: var(--nb-red); }

.nb-button {
    min-height: 46px;
    padding: 0 22px;
    border-radius: 6px;
    font: 700 0.92rem/44px var(--nb-body);
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nb-button--primary, .nb-button--primary:hover { color: #ffffff; }
.nb-button--primary { border: 1px solid var(--nb-red); background: var(--nb-red); }
.nb-button--primary:hover { border-color: var(--nb-red-hover); background: var(--nb-red-hover); }
.nb-button--secondary { border: 1px solid var(--nb-border); background: transparent; color: var(--nb-text); }
.nb-button--secondary:hover { border-color: var(--nb-red); background: var(--nb-surface); color: var(--nb-red-hover); }
.nb-header-call { align-self: center; min-height: 40px; padding: 0 16px; line-height: 1.2; white-space: nowrap; }
.nb-header-call:hover { border-color: #bd0000; background: #bd0000; }
.nb-menu-toggle {
    width: 42px;
    min-height: 42px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
}
.nb-menu-toggle .uk-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform 100ms ease; }
.nb-menu-toggle .uk-icon svg { display: block; }
.nb-menu-toggle.is-open .uk-icon { transform: rotate(-90deg); }

.nb-hero { overflow: hidden; padding: 64px 0 74px; background: var(--nb-bg); }
.nb-hero-title {
    position: relative;
    z-index: 3;
    margin: 0 0 24px;
    color: var(--nb-text);
    font-size: 3rem;
    line-height: 0.98;
}
.nb-card, .nb-office-image { border: 1px solid var(--nb-border); }
.nb-card { background: var(--nb-surface); box-shadow: none; }

.nb-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--nb-text);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nb-kicker::before { width: 22px; height: 2px; background: var(--nb-red); content: ""; }
.nb-note { gap: 10px; margin: 2px 0 28px; color: var(--nb-red); }
.nb-note span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--nb-red); }

.nb-card-number {
    color: var(--nb-red);
    font-family: var(--nb-heading);
    font-size: 0.96rem;
    font-weight: 700;
}

.nb-office { padding: 70px 0; border-top: 1px solid var(--nb-border); background: var(--nb-bg); }
.nb-contact-details { max-width: 430px; }
.nb-contact-details dt, .nb-contact-details a { color: var(--nb-text); font-weight: 700; }
.nb-contact-intro { padding-right: 5vw; }
.nb-text-accent { color: var(--nb-red); }
.nb-footer-inner { padding-top: 30px; padding-bottom: 30px; }
.nb-legal h1 { font-size: 2.25rem; line-height: 1.12; }
.nb-legal h2 { margin-top: 34px; font-size: 1.45rem; line-height: 1.24; }
.nb-legal .uk-text-lead { font-size: 1.08rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 420px) {
    body { font-size: 16px; }
    .nb-navbar-inner { min-height: 70px; }
    .nb-logo img { height: 4rem; }
    .nb-navbar-actions { gap: 6px; }
    .nb-hero-title { font-size: 2.45rem; }
    .nb-legal { padding-top: 46px; padding-bottom: 54px; }
    .nb-legal h1 { font-size: 1.85rem; line-height: 1.15; }
    .nb-legal h2 { margin-top: 30px; margin-bottom: 12px; font-size: 1.22rem; line-height: 1.28; }
    .nb-legal p, .nb-legal address, .nb-legal dd { font-size: 0.95rem; line-height: 1.68; }
    .nb-legal .uk-text-lead { font-size: 1rem; line-height: 1.58; }
}

@media (max-width: 959px) {
    .nb-footer nav, .nb-footer > .uk-container > .uk-grid > p:last-child { text-align: center; }
    .nb-footer .uk-subnav { justify-content: center; }
}

@media (min-width: 768px) {
    .nb-hero-title { font-size: 4.4rem; }
}

@media (min-width: 960px) {
    .nb-hero { padding: 86px 0 102px; }
    .nb-hero-title { max-width: 780px; margin-right: -130px; font-size: 5rem; }
}

@media (min-width: 1200px) {
    h2 { font-size: 2.55rem; }
    .nb-hero-title { margin-right: -210px; font-size: 5.8rem; }
}

@media (max-width:500px){
    .nb-header-call { min-width: 74px; min-height: 38px; padding: 0 12px; font-size: 0; line-height: 1.2; }
    .nb-header-call::after { content: "Anrufen"; font-size: 0.84rem; }
}