/* --- Fonts: Schibsted Grotesk, self-hosted, variable weight 400-700 ---
   Kein Request an fonts.googleapis.com oder fonts.gstatic.com */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin-ext.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin.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;
}

/* --- Global reset (from design) --- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #F5F4F0; -webkit-font-smoothing: antialiased; }
a { color: #00756F; }
a:hover { color: #16383B; }
:focus-visible { outline: 3px solid #007F78; outline-offset: 3px; border-radius: 4px; }
[data-dark] a { color: #8FDCD3; }
[data-dark] a:hover { color: #F5F4F0; }
[data-dark] :focus-visible { outline-color: #8FDCD3; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* --- Skip link --- */
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: #16383B; color: #F5F4F0;
  padding: 10px 16px; border-radius: 6px; z-index: 10;
  text-decoration: none; font-weight: 600;
  transition: top 0.1s;
}
.skip-link:focus-visible { top: 12px; outline: none; }

/* --- Nav links --- */
.nav-link {
  color: #16383B; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent; box-sizing: border-box;
}
.nav-link:hover { border-bottom-color: #007F78; color: #16383B; }

/* --- Header CTA (wide only) --- */
.btn-header {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border: 1.5px solid #007F78;
  color: #00756F; font-weight: 600; font-size: 16px;
  text-decoration: none; border-radius: 6px; box-sizing: border-box;
  transition: background 160ms, color 160ms;
}
.btn-header:hover { background: #007F78; color: #FFFFFF; }
@media (max-width: 639px) { .btn-header { display: none; } }

/* --- Primary CTA --- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: #007F78; color: #FFFFFF; font-weight: 600; font-size: 18px;
  text-decoration: none; border-radius: 6px; box-sizing: border-box;
  transition: background 160ms;
  flex: 0 0 auto;
}
.btn-primary:hover { background: #00615C; color: #FFFFFF; }
@media (max-width: 639px) { .btn-primary { flex: 1 1 100%; } }

/* --- Secondary text link --- */
.link-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; color: #00756F; font-weight: 600; font-size: 17px;
  text-decoration: none;
}
.link-secondary:hover { color: #16383B; }
.link-secondary .u { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link-secondary:hover .u { text-decoration-thickness: 2px; }

/* --- Vorhaben link in dark section --- */
.link-vorhaben {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-weight: 600; font-size: 17px;
  text-decoration: none; color: inherit;
}
.link-vorhaben .u { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link-vorhaben:hover .u { text-decoration-thickness: 2px; }

/* --- Kontakt info links --- */
.kontakt-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 0; border-bottom: 1px solid rgba(22,56,59,0.16);
  text-decoration: none; color: #16383B;
}
.kontakt-link:hover { color: #00756F; }

/* --- Footer links --- */
.footer-link {
  color: #252B2D; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-link:hover { color: #00756F; text-decoration: underline; }

/* --- Layer shape transitions --- */
[data-ls] { transition: background 200ms; }
[data-nc] { transition: background 200ms, color 200ms; }

/* Service pages: same palette and type as the home page. */
* { box-sizing: border-box; }
body { font-family:'Schibsted Grotesk',system-ui,sans-serif; font-size:18px; line-height:1.6; color:#252B2D; }
.service-shell { container-type:inline-size; }
.wrap { max-width:1280px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
h1,h2,h3 { color:#16383B; line-height:1.18; letter-spacing:-.025em; text-wrap:balance; }
h1 { font-size:clamp(34px,4.5vw,56px); max-width:850px; margin:20px 0 24px; }
h2 { font-size:clamp(28px,3vw,40px); margin:0 0 24px; }
h3 { font-size:22px; margin:0 0 12px; }
p { margin:0 0 20px; text-wrap:pretty; }
a { text-underline-offset:4px; }
.hero { padding-block:40px 64px; }
.eyebrow { font-size:15px; font-weight:600; color:#00756F; margin:0 0 12px; }
.lead { max-width:740px; font-size:clamp(19px,2vw,22px); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:28px; }
.breadcrumb { font-size:15px; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px 10px; padding:0; margin:0 0 32px; }
.breadcrumb a { display:inline-flex; align-items:center; min-height:44px; }
.breadcrumb li { display:flex; align-items:center; gap:10px; }
.breadcrumb li + li::before { content:'/'; color:#4A5557; }
.topic-nav { display:flex; flex-wrap:wrap; gap:8px 28px; border-top:1px solid #BECAC6; border-bottom:1px solid #BECAC6; padding-block:14px; margin-top:40px; }
.topic-nav a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.topic { padding-block:clamp(56px,7vw,96px); border-top:1px solid #D3D7D2; scroll-margin-top:28px; }
.topic:target .topic-intro { border-left:4px solid #007F78; padding-left:20px; }
.topic-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px clamp(32px,6vw,80px); }
.topic-intro > p { max-width:580px; }
.topic-number { color:#00756F; font-size:15px; font-weight:600; margin-bottom:12px; }
.work-list { margin:0; padding:0; list-style:none; }
.work-list li { padding:16px 0; border-top:1px solid #BECAC6; }
.work-list strong { display:block; color:#16383B; margin-bottom:4px; }
.example { margin-top:28px; padding:24px; background:#ECEAE4; border-radius:12px; }
.example p:last-child { margin-bottom:0; }
.scope { margin:32px 0 0; padding-top:20px; border-top:1px solid #BECAC6; font-size:16px; max-width:76ch; }
.scope strong { color:#16383B; }
.care { background:#16383B; color:#D5DFDD; padding-block:clamp(56px,7vw,96px); }
.care h2,.care h3 { color:#F5F4F0; }
.care .eyebrow { color:#8FDCD3; }
.care p { max-width:72ch; }
.steps { margin:28px 0 0; padding-left:24px; }
.steps li { padding:0 0 16px 8px; }
.steps strong { color:#F5F4F0; }
.contact { padding-block:clamp(56px,7vw,96px); }
.contact p { max-width:650px; }
.contact-options { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:24px; }
.contact-options a { min-height:44px; display:inline-flex; align-items:center; overflow-wrap:anywhere; }
.related { background:#ECEAE4; padding-block:40px; }
.related h2 { font-size:24px; }
.related ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px 32px; }
.related a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:720px) { .topic-grid { grid-template-columns:minmax(0,1fr); } .hero { padding-top:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Underline only link labels, leaving directional arrows undecorated. */
.topic-nav a, .related a { text-decoration:none; gap:6px; }
.topic-nav .link-label, .related .link-label { text-decoration:underline; }