:root {
  --ink:#153358;
  --ink-deep:#102844;
  --teal:#39797b;
  --teal-dark:#2d6567;
  --mint:#b9ebe2;
  --paper:#f4f8f7;
  --white:#fff;
  --muted:#647987;
  --muted-2:#829098;
  --line:rgba(21,51,88,.13);
  --soft:#eaf3f0;
  --radius-lg:34px;
  --radius-md:22px;
  --shadow:0 22px 70px rgba(21,51,88,.11);
  --max:1240px;
  --header-h:78px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

.skip-link { position:absolute; left:18px; top:-80px; z-index:20; padding:11px 15px; border-radius:10px; background:var(--ink); color:white; }
.skip-link:focus { top:18px; }
.shell { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }

.site-header { position:relative; z-index:1000; height:var(--header-h); display:flex; align-items:center; background:var(--paper); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo { width:clamp(154px,15vw,180px); height:auto; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link,.nav-cta { display:inline-flex; align-items:center; padding:10px 13px; border-radius:999px; color:var(--muted); font-size:.9rem; font-weight:650; transition:color .2s ease; }
.nav-link:hover,.nav-link:focus-visible,.nav-link.nav-active,.nav-cta:hover,.nav-cta:focus-visible { color:var(--ink-deep); outline:none; }
.menu-toggle { display:none; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.65); color:var(--ink); cursor:pointer; }
.menu-toggle span,.menu-toggle::before,.menu-toggle::after { content:""; display:block; width:18px; height:2px; margin:4px auto; border-radius:2px; background:currentColor; transition:transform .2s ease,opacity .2s ease; }
.menu-open .menu-toggle span { opacity:0; }
.menu-open .menu-toggle::before { transform:translateY(6px) rotate(45deg); }
.menu-open .menu-toggle::after { transform:translateY(-6px) rotate(-45deg); }

.content-header { min-height:82px; display:flex; align-items:center; padding:0; border-bottom:0; background:transparent; }
.content-header-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.info-header { min-height:auto; display:block; padding:28px 0 0; border-bottom:0; background:transparent; }
.info-header .content-header-inner { justify-content:flex-start; }
.content-brand { display:inline-flex; align-items:center; }
.content-brand img { width:176px; height:auto; }

.overview-hero { padding:clamp(74px,9vw,126px) 0 58px; }
.overview-kicker,.article-kicker { margin-bottom:18px; color:var(--teal); font-size:.73rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.overview-hero h1,.article-heading h1 { margin:0; color:var(--ink-deep); letter-spacing:-.055em; }
.overview-hero h1 { max-width:900px; font-size:clamp(3rem,6.2vw,5.9rem); line-height:.97; }
.overview-lead { max-width:750px; margin:26px 0 0; color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.28rem); line-height:1.7; }

.blog-overview { padding:0 0 110px; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.post-card { min-width:0; }
.post-card-link { height:100%; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.78); box-shadow:0 14px 44px rgba(21,51,88,.06); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.post-card-link:hover { transform:translateY(-5px); border-color:rgba(57,121,123,.34); box-shadow:var(--shadow); }
.post-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:48px; color:var(--teal); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.post-meta time { color:var(--muted-2); letter-spacing:.02em; }
.post-card h2 { margin:0 0 14px; font-size:1.58rem; line-height:1.13; letter-spacing:-.035em; }
.post-card p { margin:0 0 26px; color:var(--muted); font-size:.91rem; line-height:1.68; }
.read-link { display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-size:.77rem; font-weight:800; }
.read-link::after { content:"\2192"; color:var(--teal); }

.article-main { padding:clamp(64px,8vw,108px) 0 120px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:35px; color:var(--muted-2); font-size:.75rem; }
.breadcrumbs a { transition:color .2s ease; }
.breadcrumbs a:hover,.breadcrumbs a:focus-visible { color:var(--teal); }
.breadcrumbs > *:not(:last-child)::after { content:"/"; margin-left:8px; color:rgba(21,51,88,.3); }
.article-heading { max-width:930px; padding-bottom:44px; border-bottom:1px solid var(--line); }
.article-heading h1 { font-size:clamp(2.65rem,5.7vw,5.5rem); line-height:1; }
.article-description { max-width:780px; margin:24px 0 0; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.68; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; color:var(--muted-2); font-size:.76rem; }
.article-meta strong { color:var(--teal); }
.article-layout { display:grid; grid-template-columns:minmax(0,820px) minmax(220px,1fr); gap:clamp(52px,8vw,110px); align-items:start; padding-top:50px; }
.article-layout.no-toc { width:min(100%,860px); grid-template-columns:minmax(0,860px); }
.journal-article-layout { padding-top:54px; }
.article-placeholder { padding:28px; border-left:4px solid var(--teal); background:rgba(185,235,226,.2); }
.article-placeholder span { display:block; margin-bottom:8px; color:var(--teal); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.article-placeholder p { margin:0; color:var(--ink); font-weight:600; }

.prose { min-width:0; color:#334e63; font-size:1.03rem; line-height:1.82; }
.prose > :first-child { margin-top:0; }
.prose h2,.prose h3,.prose h4 { color:var(--ink-deep); scroll-margin-top:30px; letter-spacing:-.035em; }
.prose h2 { margin:2.5em 0 .65em; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.15; }
.prose h3 { margin:2em 0 .55em; font-size:1.38rem; line-height:1.25; }
.prose h4 { margin:1.7em 0 .45em; font-size:1.08rem; }
.prose p { margin:0 0 1.25em; }
.prose ul,.prose ol { margin:.5em 0 1.5em; padding-left:1.45em; }
.prose li { margin:.38em 0; padding-left:.25em; }
.prose li::marker { color:var(--teal); font-weight:700; }
.prose strong { color:var(--ink); }
.prose em { color:#405c70; }
.prose a { color:var(--teal-dark); text-decoration:underline; text-decoration-color:rgba(57,121,123,.34); text-underline-offset:3px; }
.prose blockquote { margin:2em 0; padding:22px 25px; border-left:4px solid var(--teal); border-radius:0 16px 16px 0; background:rgba(185,235,226,.22); color:var(--ink); font-size:1.05em; font-weight:600; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose code { padding:.16em .42em; border-radius:6px; background:#e6efed; color:var(--teal-dark); font-size:.9em; }
.prose pre { max-width:100%; overflow:auto; margin:1.6em 0; padding:21px; border-radius:16px; background:var(--ink-deep); color:#eaf3f0; line-height:1.58; }
.prose pre code { padding:0; background:none; color:inherit; }
.prose hr { margin:3em 0; border:0; border-top:1px solid var(--line); }
.table-wrap { width:100%; overflow:auto; margin:1.7em 0; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.75); }
.prose table { width:100%; border-collapse:collapse; font-size:.9rem; line-height:1.55; }
.prose th,.prose td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.prose th { color:var(--ink); background:var(--soft); font-weight:800; }
.prose tr:last-child td { border-bottom:0; }

.toc { position:sticky; top:28px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.66); }
.toc-title { margin:0 0 14px; color:var(--ink); font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.toc-list { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.toc-list a { display:block; padding:8px 10px; border-left:3px solid transparent; border-radius:0; color:var(--muted); font-size:.76rem; line-height:1.38; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.toc-list a:hover { background:var(--soft); color:var(--teal); }
.toc-list a.is-active { color:var(--ink); border-left-color:var(--teal); background:linear-gradient(90deg,rgba(185,235,226,.42),rgba(185,235,226,.14)); font-weight:800; }
.toc-list .toc-level-3 { padding-left:22px; font-size:.72rem; }

.site-footer { padding:26px 0 38px; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted-2); font-size:.75rem; }
.footer-brand { color:var(--ink); font-weight:780; }
.footer-legal { display:flex; align-items:center; gap:18px; }
.imprint-trigger { padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.imprint-trigger:hover,.imprint-trigger:focus-visible { color:var(--teal); }
.imprint-contact-link { color:var(--teal); font-weight:750; text-decoration:none; }
.imprint-contact-link:hover,.imprint-contact-link:focus-visible { text-decoration:underline; }
.imprint-contact-intro { margin-bottom:14px !important; }
.imprint-contact-form { display:grid; gap:11px; }
.imprint-contact-form label { display:grid; gap:5px; color:var(--ink); font-size:.75rem; font-weight:720; }
.imprint-contact-form input:not([type="checkbox"]),.imprint-contact-form textarea { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); font:inherit; font-size:.86rem; }
.imprint-contact-form textarea { min-height:84px; resize:vertical; }
.imprint-contact-form .imprint-consent { display:flex; align-items:flex-start; gap:8px; color:var(--muted); font-weight:500; line-height:1.45; }
.imprint-contact-form .imprint-consent input { margin:2px 0 0; accent-color:var(--teal); }
.imprint-contact-form button { justify-self:start; padding:10px 13px; border:0; border-radius:8px; background:var(--teal); color:var(--white); font:inherit; font-size:.8rem; font-weight:780; cursor:pointer; }

.imprint-dialog { width:min(calc(100% - 32px),540px); padding:0; border:0; border-radius:24px; color:var(--ink); background:var(--white); box-shadow:0 28px 90px rgba(16,40,68,.26); }
.imprint-dialog::backdrop { background:rgba(16,40,68,.5); backdrop-filter:blur(6px); }
.imprint-panel { padding:32px; }
.imprint-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }
.imprint-kicker { margin:0 0 7px; color:var(--teal); font-size:.67rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.imprint-dialog h2 { margin:0; color:var(--ink-deep); font-size:2rem; letter-spacing:-.04em; }
.imprint-dialog section + section { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.imprint-dialog h3 { margin:0 0 9px; color:var(--ink); font-size:.82rem; }
.imprint-dialog p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.65; }
.imprint-close { position:relative; width:36px; height:36px; display:block; flex:0 0 auto; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); font-size:0; cursor:pointer; }
.imprint-close::before,.imprint-close::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; border-radius:2px; background:currentColor; transform-origin:center; }
.imprint-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.imprint-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.imprint-close:hover,.imprint-close:focus-visible { border-color:rgba(57,121,123,.35); color:var(--teal); }

.contact-main { padding:clamp(64px,8vw,108px) 0 112px; }
.contact-heading { max-width:780px; }
.contact-heading h1 { margin:0; color:var(--ink-deep); font-size:clamp(3rem,6vw,5.5rem); line-height:1; letter-spacing:-.055em; }
.contact-heading p { max-width:680px; margin:22px 0 0; color:var(--muted); font-size:1.08rem; line-height:1.7; }
.contact-card { max-width:850px; margin-top:48px; padding:clamp(24px,4vw,46px); border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(255,255,255,.76); box-shadow:var(--shadow); }
.contact-form { display:grid; gap:20px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.form-field { display:grid; gap:8px; }
.form-field label,.form-consent { color:var(--ink); font-size:.82rem; font-weight:750; }
.form-field input,.form-field textarea { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--white); font:inherit; }
.form-field textarea { min-height:170px; resize:vertical; line-height:1.55; }
.form-field input:focus,.form-field textarea:focus { border-color:var(--teal); outline:3px solid rgba(185,235,226,.55); }
.form-consent { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-weight:500; line-height:1.55; }
.form-consent input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--teal); }
.form-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.form-actions button { padding:13px 20px; border:0; border-radius:10px; color:var(--white); background:var(--teal); font:inherit; font-weight:800; cursor:pointer; }
.form-actions button:hover,.form-actions button:focus-visible { background:var(--teal-dark); }
.form-note { margin:0; color:var(--muted-2); font-size:.76rem; line-height:1.55; }
.form-status { margin:0 0 22px; padding:13px 15px; border-left:4px solid var(--teal); background:rgba(185,235,226,.24); color:var(--ink); font-size:.9rem; line-height:1.55; }
.form-status.is-error { border-left-color:#a75a58; background:rgba(167,90,88,.1); }

@media (max-width:940px) {
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:1fr; gap:35px; }
  .toc { position:static; order:-1; }
}

@media (max-width:1080px) {
  .nav-links { display:none; position:absolute; inset:calc(100% + 8px) 24px auto; padding:14px; border:1px solid var(--line); border-radius:18px; background:rgba(244,248,247,.98); box-shadow:var(--shadow); }
  .menu-open .nav-links { display:grid; }
  .nav-link,.nav-cta { min-height:46px; padding:11px 15px; }
  .nav-cta { justify-content:flex-start; text-align:left; }
  .menu-toggle { display:block; }
}

@media (max-width:620px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .content-header { min-height:auto; padding:20px 0; }
  .content-brand img { width:155px; }
  .overview-hero { padding-top:58px; }
  .post-card-link { padding:24px; }
  .post-grid { grid-template-columns:1fr; }
  .post-meta { margin-bottom:34px; }
  .article-heading h1 { font-size:clamp(2.35rem,12vw,3.6rem); }
  .article-layout { padding-top:34px; }
  .prose { font-size:.98rem; }
  .footer-wrap { align-items:flex-start; flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .imprint-panel { padding:25px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms!important; }
}