/* === Selbstgehostete Schriften (kein Google-Server, revDSG) === */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-700-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/manrope-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/manrope-800-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}

/* Blaue Landwirtschaft Schweiz — Website DRAFT v1 — shared styles */
:root{
  --ink:#0a2038; --navy:#0f3a6b; --navy-2:#12457f; --blue:#1f6fb2;
  --green:#3f9145; --green-deep:#2e7d35; --cream:#f3f7f4; --wash:#eef4f8;
  --paper:#ffffff; --line:#dfe7ee; --muted:#5b6b7a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.62}
h1,h2,h3,h4{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* DRAFT banner */
.draftbar{background:#0f2b12;color:#dff0d8;font-size:12.5px;letter-spacing:.02em;text-align:center;padding:7px 16px}
.draftbar b{color:#fff}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:10px 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px}

.navlinks{display:flex;gap:20px;align-items:center;flex-wrap:nowrap}
.navlinks a{color:#25415c;font-size:14px;font-weight:500;white-space:nowrap}
.navlinks a:hover,.navlinks a.active,.navlinks a[aria-current="page"]{color:var(--navy)}
.navlinks a{position:relative}
.navlinks a.active,.navlinks a[aria-current="page"],.navitem.has-current>a{font-weight:600}
.navlinks a.active::after,.navlinks a[aria-current="page"]::after,.navitem.has-current>a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--green);border-radius:2px}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.lang b{color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:14px;border-radius:40px;padding:13px 22px;transition:transform .15s,box-shadow .2s,background .2s;text-align:center;justify-content:center}
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:0 8px 20px rgba(47,120,60,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,120,60,.4)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid #7d93a6}
.btn-ghost:hover{background:var(--wash)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-light:hover{background:rgba(255,255,255,.22)}
@media(max-width:980px){.navlinks{display:none}}

/* HERO (home) */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#08243f}
.hero .photo{position:absolute;inset:0;background:url('assets/hero-800.webp') center/cover;z-index:0}
@media(min-width:801px){.hero .photo{background-image:url('assets/hero-1920.webp')}}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(7,26,45,.95) 0%,rgba(7,26,45,.88) 34%,rgba(7,26,45,.55) 70%,rgba(7,26,45,.25) 100%),linear-gradient(0deg,rgba(7,26,45,.6),rgba(7,26,45,0) 34%)}
.hero .wrap{position:relative;z-index:2;padding:70px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#cfe6d2;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px}
.hero h1{font-weight:800;font-size:clamp(38px,5.4vw,68px);line-height:1.03;max-width:15ch}
.hero h1 .pct{color:#eaf3ea;position:relative;white-space:nowrap}
.hero h1 .pct::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.1em;background:var(--green);border-radius:3px}
.hero .sub{font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.93);max-width:56ch;margin-top:20px}
.hero .actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px}
.chip b{display:block;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:32px;color:#eaf3ea;line-height:1}
.chip span{font-size:13px;color:rgba(255,255,255,.82);max-width:19ch;display:block;margin-top:4px}
.reassure{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:9px}

/* PAGE HEAD (subpages) */
.pagehead{background:linear-gradient(160deg,#0f3a6b,#0a2038);color:#fff;padding:clamp(46px,7vw,84px) 0 clamp(38px,5vw,58px)}
.pagehead .crumb{font-size:12.5px;color:#9fc7ea;margin-bottom:14px}
.pagehead .crumb a{color:#9fc7ea}
.pagehead h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.05;max-width:20ch}
.pagehead p{font-size:clamp(16px,1.3vw,18.5px);color:rgba(255,255,255,.86);max-width:60ch;margin-top:16px}

/* SECTIONS */
section{padding:clamp(48px,6.5vw,88px) 0}
section.alt{background:var(--wash)}
section.dark{background:linear-gradient(160deg,#0f3a6b,#0a2038);color:#fff}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep);margin-bottom:12px}
.dark .kicker{color:#8fd39a}
h2{font-size:clamp(26px,3.3vw,38px);font-weight:800;line-height:1.12;max-width:22ch}
.lead{font-size:clamp(16px,1.25vw,18px);color:var(--muted);max-width:64ch;margin-top:16px}
.dark .lead{color:rgba(255,255,255,.85)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:38px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px}

.card .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--cream);color:var(--green-deep);margin-bottom:16px}

.card h3{font-size:18px;font-weight:700;margin-bottom:7px}
.card p{font-size:14.5px;color:var(--muted)}

/* market viz */
.viz{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;margin-top:38px}
@media(max-width:820px){.viz{grid-template-columns:1fr}}
.viz .panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px}
.statrow{display:flex;flex-direction:column;gap:18px}
.stat{display:block}
.stat .n{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:23px;color:#8fd39a;white-space:nowrap;line-height:1.15}
.stat p{font-size:14.5px;color:rgba(255,255,255,.86)}
.stat p b{color:#fff;font-weight:600}
.bignote{margin-top:26px;padding:18px 22px;border-radius:14px;background:rgba(143,211,154,.12);border:1px solid rgba(143,211,154,.3);font-size:15px}

/* prose */
.prose{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:38px}
@media(max-width:760px){.prose{grid-template-columns:1fr}}
.prose h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--navy)}
.dark .prose h3{color:#bfe6c4}
.prose p{font-size:15px;color:var(--muted)}
.dark .prose p{color:rgba(255,255,255,.84)}
.h3b{font-size:18px;color:var(--navy);margin-top:34px;font-weight:700}

/* list */
.checklist{list-style:none;margin-top:22px;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;font-size:15px;align-items:flex-start}
.checklist li::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%233f9145' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;margin-top:1px}

/* table */
table{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
thead th{background:var(--navy);color:#fff;font-weight:600;font-size:13px}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:var(--wash)}
td.num{font-weight:600;color:var(--navy);white-space:nowrap}
.softnote{font-size:12.5px;color:var(--muted);margin-top:10px;max-width:70ch}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-top:34px}
.person{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.person .ph{height:150px;background:linear-gradient(135deg,#dbe7f2,#e8f0e6);display:flex;align-items:center;justify-content:center;color:#4a5c6d;font-size:12px}
.person .body{padding:18px}
.person h3{font-size:16.5px;font-weight:700}
.person .role{font-size:12.5px;color:var(--green-deep);font-weight:600;margin:3px 0 9px}
.person p{font-size:13.5px;color:var(--muted)}

/* form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
@media(max-width:760px){.formgrid{grid-template-columns:1fr}}
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px}
.formcard.primary{border-color:#bfe0c3;box-shadow:0 12px 30px rgba(47,120,60,.1)}
.formcard h3{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:6px}
.formcard .fmini{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.fld{display:block;margin-bottom:11px}
.fld span{display:block;font-size:12.5px;color:#33475b;margin-bottom:4px;font-weight:500}
.fld input,.fld select{width:100%;padding:12px 12px;border:1px solid #8a9dae;border-radius:9px;font-family:inherit;font-size:14px;background:#fbfdff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.chk{display:flex;gap:9px;font-size:13px;color:var(--muted);margin:9px 0;align-items:flex-start}

/* partner categories */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
@media(max-width:760px){.catgrid{grid-template-columns:1fr}}
.cat{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper)}
.cat h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.cat p{font-size:13.5px;color:var(--muted)}

/* steps (wirkungsmodell) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:34px;counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:14px}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}

/* faq */
details{border:1px solid var(--line);border-radius:12px;padding:4px 20px;margin-top:12px;background:var(--paper)}
details summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--navy)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:20px;color:var(--green)}
details[open] summary::after{content:"\2013"}
details p{font-size:14.5px;color:var(--muted);padding:0 0 16px}

/* CTA band */
.band{background:linear-gradient(160deg,#2e7d35,#215c27);color:#fff;border-radius:22px;padding:clamp(30px,5vw,52px);text-align:center}
.band h2{color:#fff;margin:0 auto 10px}
.band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 22px}

/* downloads */
.dls{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
.dl{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14px;font-weight:500}
.dl .di{width:34px;height:34px;border-radius:9px;background:var(--wash);display:flex;align-items:center;justify-content:center;color:var(--navy);flex:0 0 34px}

/* footer */
footer{background:#081a2d;color:#b8c6d4;padding:52px 0 30px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer .foot-h{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
footer a{color:#b8c6d4;display:block;margin-bottom:0;padding:10px 0}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;font-size:12.5px;color:#7f92a4;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- v1.1 additions: real logo + infographics ---------- */
.brand img.logo{height:42px;width:auto;display:block}
@media(max-width:520px){.brand img.logo{height:34px}}
.footlogo{background:#fff;border-radius:12px;padding:9px 14px;display:inline-block;margin-bottom:14px}
.footlogo img{height:40px;width:auto;display:block}

/* import split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin-top:38px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.splitbar{display:flex;height:74px;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(10,32,56,.12)}
.splitbar .seg{display:flex;flex-direction:column;justify-content:center;padding:0 20px;color:#fff}
.splitbar .imp{flex:1 1 auto;min-width:0;background:linear-gradient(160deg,#123a6b,#0a2038)}
.splitbar .ch{flex:0 0 auto;background:linear-gradient(160deg,#2e7d35,#215c27);padding:0 18px}
.splitbar .seg b{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:22px;line-height:1}
.splitbar .seg span{font-size:11.5px;opacity:.9;margin-top:3px;white-space:nowrap}
.splitlead .big{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(40px,6vw,68px);color:var(--navy);line-height:1}
.splitlead .big em{color:var(--green-deep);font-style:normal}
.splitlead p{color:var(--muted);font-size:15px;margin-top:12px;max-width:42ch}

/* value chain cycle */
.cyclewrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:38px}
@media(max-width:820px){.cyclewrap{grid-template-columns:1fr}}
.cyclewrap ul{list-style:none;display:grid;gap:14px}
.cyclewrap ul li{display:flex;gap:13px;align-items:flex-start;font-size:15px}
.cyclewrap ul li .dot{flex:0 0 12px;height:12px;border-radius:50%;margin-top:5px}
.cyclewrap ul li b{color:var(--navy)}

/* bar charts */
.bars{display:grid;gap:12px;margin-top:8px}
.bar{display:grid;grid-template-columns:190px 1fr 46px;gap:12px;align-items:center;font-size:13.5px}
@media(max-width:560px){.bar{grid-template-columns:130px 1fr 40px}}
.bar .lab{color:var(--ink)}
.bar .track{background:var(--wash);border-radius:20px;height:14px;overflow:hidden}
.bar .fill{display:block;width:var(--w,0);height:100%;border-radius:20px;background:linear-gradient(90deg,#1f6fb2,#12457f)}
.bar.g .fill{background:linear-gradient(90deg,#4a9d4e,#2e7d35)}
.bar .val{font-weight:700;color:var(--navy);text-align:right}
.barcol h3{font-size:16px;color:var(--navy);margin-bottom:14px;font-weight:700}
.bargrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px}
@media(max-width:760px){.bargrid{grid-template-columns:1fr}}

/* task icon grid */
.taskgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:30px}
.task{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.task .ti{flex:0 0 38px;height:38px;border-radius:10px;background:var(--cream);color:var(--green-deep);display:flex;align-items:center;justify-content:center}
.task p{font-size:14px;color:var(--ink)}

/* embedded figure */
figure.shot{margin-top:30px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 12px 30px rgba(10,32,56,.08)}
figure.shot img{width:100%;display:block}
figure.shot figcaption{font-size:12.5px;color:var(--muted);padding:12px 18px;border-top:1px solid var(--line)}

/* ---------- v1.2: mobile menu + responsive polish ---------- */
.nav-inner{position:relative}
.nt{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;display:block;pointer-events:none}
.burger{display:none}
.menu{display:flex;align-items:center;gap:22px}
@media(max-width:980px){
  .menu{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 34px rgba(10,32,56,.14);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .28s ease;z-index:60}
  .nt:checked ~ .menu{max-height:82vh}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;margin-left:auto}
  .burger span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;margin:0 auto;transition:transform .25s,opacity .2s}
  .nt:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nt:checked ~ .burger span:nth-child(2){opacity:0}
  .nt:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu .navlinks a{padding:14px clamp(20px,5vw,56px);border-bottom:1px solid var(--line);font-size:15.5px}
  .menu .navlinks a.active{border-bottom:1px solid var(--line);color:var(--green-deep)}
  .menu .navlinks a.active::after{display:none}
  .menu .nav-right{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px clamp(20px,5vw,56px)}
  .menu .nav-right .lang{text-align:left}
  .menu .nav-right .btn{width:100%}
}

/* cycle svg tidy */
.cyclewrap svg{max-width:360px;display:block;margin:0 auto}

/* hero + section spacing on phones */
@media(max-width:640px){
  .hero{min-height:auto}
  .hero .wrap{padding:56px 0}
  .hero .chips{gap:22px}
  .chip b{font-size:27px}
  .splitlead .big{font-size:clamp(34px,11vw,56px)}
  .prose{gap:24px}
  .band{border-radius:16px}
}

/* tables + forms on small phones */
@media(max-width:520px){
  th,td{padding:11px 13px;font-size:13.5px}
  .frow{grid-template-columns:1fr}
  .splitbar{height:64px}
  .splitbar .seg b{font-size:19px}
  .stat{gap:10px}
  .stat .n{min-width:88px;font-size:21px}
}

/* ============================================================
   v2 — Vorwort/Story, Impact, News, A11y, Micro-Animations
   ============================================================ */

/* Accessibility: sichtbarer Fokus + Skip-Link */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}

/* Scroll-Reveal (dezent, nur bei aktivem JS — sonst Inhalt sichtbar) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* Hero-Einblendung beim Laden */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .wrap>*{animation:rise .8s both}
.hero .eyebrow{animation-delay:.05s}.hero h1{animation-delay:.12s}
.hero .sub{animation-delay:.22s}.hero .actions{animation-delay:.3s}
.hero .chips{animation-delay:.38s}.hero .reassure{animation-delay:.46s}

/* Vorwort / Story-Aufmacher direkt unter dem Hero */
.vorwort{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);position:relative}
.vorwort .wrap{max-width:900px}
.vorwort .eyebrow{color:var(--green-deep)}
.vorwort h2{font-size:clamp(1.5rem,1.1rem+1.7vw,2.15rem);line-height:1.18;margin:.2em 0 .6em;
  max-width:20ch}
.vorwort .lede{font-size:clamp(1.06rem,1rem+.5vw,1.28rem);color:var(--ink);line-height:1.55;font-weight:500}
.vorwort p{color:#31485c;line-height:1.7;margin:0 0 1em}
.vorwort .accent{color:var(--navy);font-weight:600}
.vorwort .rule{width:64px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--green));margin:0 0 22px}
.vorwort .storycta{margin-top:8px}

/* Callout / Frage-Box */
.callout{border-left:4px solid var(--blue);background:var(--wash);border-radius:0 12px 12px 0;
  padding:20px 22px;margin:26px 0;color:var(--ink)}
.callout b{color:var(--navy)}

/* Impact-Statblock (helle Variante, neue Kennzahlen) */
.impact{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.impact .ip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;
  box-shadow:0 1px 0 rgba(15,58,107,.03)}
.impact .ip .n{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(1.4rem,1rem+1.4vw,1.9rem);
  color:var(--navy);letter-spacing:-.02em;display:block}
.impact .ip p{margin:.35em 0 0;font-size:.92rem;color:var(--muted);line-height:1.45}
@media(max-width:820px){.impact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.impact{grid-template-columns:1fr}}

/* Vergleichstabelle Ist/Soll (Komplementarität & Reziprozität) */
.compare{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.compare th{background:var(--navy);color:#fff;text-align:left;padding:14px 16px;font-size:.95rem}
.compare td{padding:14px 16px;vertical-align:top;border-top:1px solid var(--line);font-size:.95rem;line-height:1.5}
.compare tr td:first-child{font-weight:700;color:var(--navy);width:170px;background:var(--wash)}
.compare .is{color:#7a4a3a}.compare .soll{color:var(--green-deep)}
@media(max-width:640px){.compare tr td:first-child{width:120px}}

/* Signatur (Story/News) */
.sig{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.sig b{color:var(--navy);font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif}
.sig span{display:block;color:var(--muted);font-size:.92rem}

/* News/Artikel */

.article h2{margin-top:1.6em;font-size:clamp(1.3rem,1rem+1.2vw,1.7rem)}
.article h3{margin-top:1.4em;color:var(--navy)}
.article p{line-height:1.75;color:#31485c;margin:0 0 1.05em}
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.article blockquote{margin:1.2em 0;padding:16px 22px;border-left:4px solid var(--green);
  background:var(--cream);border-radius:0 12px 12px 0;font-size:1.1rem;color:var(--ink);font-weight:500;font-style:normal}
.article ul{margin:0 0 1.1em;padding-left:1.1em}.article li{margin:.3em 0;line-height:1.6}

/* News-Teaser-Karte (Home) */
.newscard{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:#fff}
.newscard .nc-body{padding:clamp(22px,3vw,34px)}
.newscard .nc-side{background:linear-gradient(150deg,var(--navy),var(--blue));color:#fff;
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:center}
.newscard .nc-side b{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.15rem;line-height:1.3;display:block;margin-bottom:8px}
@media(max-width:760px){.newscard{grid-template-columns:1fr}}

/* Reduced Motion: alle Bewegungen aus */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   v2.1 — Story lesbarer: breiter, Autor-Karte, Bild-Platzhalter
   ============================================================ */
.article .wrap{max-width:880px}
.article .lead-in{font-size:clamp(1.12rem,1rem+.7vw,1.42rem);line-height:1.5;color:var(--ink);font-weight:500;margin:0 0 1.1em}

/* Autor-Karte (mit Foto-Platzhalter) */
.authorcard{display:flex;gap:18px;align-items:center;background:var(--wash);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 26px}
.authorcard .ph{width:74px;height:74px;border-radius:50%;flex:0 0 74px;background:linear-gradient(160deg,#dce7f0,#eef4f8);display:flex;align-items:center;justify-content:center;color:#9fb2c4;font-size:.7rem;text-align:center;border:1px solid var(--line);overflow:hidden}
.authorcard .ph img{width:100%;height:100%;object-fit:cover}
.authorcard b{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--navy);display:block;font-size:1.04rem}
.authorcard span{color:var(--muted);font-size:.9rem;display:block}

/* Bild-Platzhalter im Fliesstext (Motiv-Vorschlag) */
.figph{margin:32px 0;border-radius:16px;border:1.5px dashed #c4d3e0;background:linear-gradient(160deg,#eef4f8,#f6faf7);min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#5b6b7a;text-align:center;padding:26px}
.figph svg{opacity:.55}
.figph b{color:var(--navy);font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.94rem}
.figph .cap{font-size:.85rem;max-width:46ch}

/* Schnellleser-Box */
.keypoints{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 16px 16px 0;padding:20px 22px;background:#fff;margin:0 0 28px}
.keypoints h2{margin:0 0 10px!important;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--navy);font-size:1.05rem!important}
.keypoints ul{margin:0;padding-left:1.1em}
.keypoints li{margin:.4em 0;line-height:1.5;color:#31485c}

/* Autor-Signatur mit Foto */
.sig.with-photo{display:flex;gap:16px;align-items:center}
.sig.with-photo .ph{width:60px;height:60px;border-radius:50%;flex:0 0 60px;background:linear-gradient(160deg,#dce7f0,#eef4f8);display:flex;align-items:center;justify-content:center;color:#9fb2c4;font-size:.66rem;text-align:center;border:1px solid var(--line);overflow:hidden}
.sig.with-photo .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:520px){.authorcard{flex-direction:row}}

/* ==========================================================================
   v3 — Fixes & neue Komponenten (27.07.2026)
   ========================================================================== */

/* Mobile-Menü: Tastaturbedienung + Fokus nur bei offenem Menü */
@media(min-width:981px){ .nt{display:none} }
@media(max-width:980px){
  .nt:focus-visible ~ .burger{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
  .menu{transition:max-height .28s ease, visibility 0s .28s}
  .nt:checked ~ .menu{visibility:visible;transition:max-height .28s ease, visibility 0s}
}
@media(prefers-reduced-motion:reduce){ .menu{transition:none} }

/* Tabellen auf Mobile scrollbar statt überlaufend */
.tablescroll{max-width:100%}
@media(max-width:760px){
  .tablescroll{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:14px;box-shadow:inset -14px 0 12px -12px rgba(10,32,56,.22)}
  .tablescroll>table{min-width:460px;margin-top:0}
  .tablescroll:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
}
.tablescroll-hint{font-size:12.5px;color:var(--muted);margin-top:8px;display:none}
@media(max-width:760px){ .tablescroll-hint{display:block} }

/* Checkboxen: 13x13 -> 22x22 (Touch-Target vor der Datenschutz-Zustimmung) */
.chk input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;margin-top:1px;accent-color:var(--green-deep)}
.chk{line-height:1.5}
.chk a{color:var(--navy-2);text-decoration:underline}

/* Links im Fliesstext sichtbar unterscheidbar (WCAG 1.4.1) */
main p a:not(.btn), .article a:not(.btn), .fine a{text-decoration:underline;text-underline-offset:2px}

/* Breadcrumb + Footer-Claim + Sprachwahl */
.pagehead .crumb a{display:inline-block;padding:6px 0}
.foot-claim{max-width:36ch;color:#9fb2c4}
.lang .off{color:#66757f}

/* Downloads sind jetzt echte Links */
a.dl{color:var(--navy);text-decoration:none;transition:border-color .15s,transform .15s}
a.dl:hover{border-color:var(--blue);transform:translateY(-1px)}
a.dl .meta{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:400;white-space:nowrap}
a.dl[aria-disabled=true]{opacity:1;color:var(--muted);pointer-events:none;border-style:dashed}

/* Risiko- und Statushinweise */
.riskbox{border:1.5px solid #d8c48a;background:#fdf8ec;border-radius:14px;padding:20px 22px;margin:24px 0}
.riskbox h3{font-size:16px;color:#6b5310;margin-bottom:8px;font-weight:700}
.riskbox p{font-size:14px;line-height:1.65;color:#4a412a}
.riskbox p+p{margin-top:10px}
.statusbox{border-left:4px solid var(--blue);background:var(--wash);border-radius:0 14px 14px 0;padding:20px 24px;margin:28px 0}
.statusbox h3{font-size:16px;color:var(--navy);margin-bottom:8px;font-weight:700}
.statusbox p{font-size:14.5px;line-height:1.7;color:var(--ink)}
.statusbox .todo{color:#8a5a00;font-weight:600}

/* Formular-Feedback */
.formnote{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.55}
.reqlegend{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.req{color:#a33; font-weight:700}
.formmsg{display:none;border-radius:11px;padding:13px 16px;font-size:14px;margin-bottom:14px;line-height:1.55}
.formmsg.err{display:block;background:#fdecec;border:1.5px solid #d99;color:#7d2323}
.formmsg.ok{display:block;background:#eaf6ec;border:1.5px solid #8cbf93;color:#1f5c28}
.fld input[aria-invalid=true],.fld select[aria-invalid=true]{border-color:#c0392b;background:#fffafa}

/* Rechtsseiten */
.legal .wrap{max-width:800px}
.legal h2{font-size:1.35rem;color:var(--navy);margin:34px 0 10px}
.legal h3{font-size:1.02rem;color:var(--navy);margin:22px 0 6px}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--ink)}
.legal ul{margin:8px 0 8px 20px}
.legal li{margin-bottom:5px}
.legal .todo{background:#fff3cd;border-bottom:2px solid #d8a800;padding:1px 5px;border-radius:3px;font-weight:600}
.legal dl{margin:10px 0}
.legal dt{font-weight:700;color:var(--navy);margin-top:12px;font-size:14.5px}
.legal dd{margin-left:0;font-size:15px;line-height:1.7}

/* 404 */
.err404{text-align:center;padding:90px 0}
.err404 .big{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(64px,10vw,96px);font-weight:800;color:#cfdce8;line-height:1;letter-spacing:.02em}
.err404 h1{margin:8px 0 12px}
.err404 .btnrow{justify-content:center;margin-top:22px}

/* Utilities statt Inline-Styles */
.mt-s{margin-top:10px}.mt-m{margin-top:20px}.mt-l{margin-top:30px}
.w-full{width:100%}
.viz-caption{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:12px;line-height:1.5}

/* Nachträge aus dem Seiten-Build (27.07.2026) */
.todo{background:#fff3cd;border-bottom:2px solid #d8a800;padding:1px 5px;border-radius:3px;font-weight:600;color:#5c4700}
.statusbox .todo,.legal .todo{background:#fff3cd;border-bottom:2px solid #d8a800;color:#5c4700}
.actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.band .actions,.err404 .actions{justify-content:center}
@media(max-width:560px){.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}}
.nav-open{overflow:hidden}
@media(min-width:981px){.nav-open{overflow:visible}}

/* ==========================================================================
   v3.1 — Typografie- und Layout-Politur (27.07.2026)
   ========================================================================== */

/* --- Header: eigenes Raster, damit die Navigation auf eine Zeile passt --- */
.nav .wrap{max-width:1340px}
.nav-right .btn{white-space:nowrap}
@media(max-width:1240px){
  .navlinks{gap:16px}
  .navlinks a{font-size:13.5px}
  .nav-inner{gap:18px}
}
@media(max-width:1080px) and (min-width:981px){
  .navlinks{gap:13px}
  .navlinks a{font-size:13px}
  .lang{display:none}
}

/* --- Umbrüche: keine Waisenzeilen mehr in Titeln, kein Hurenkind im Text --- */
h1,h2,h3,.hero h1,.pagehead h1{text-wrap:balance}
p,li,.lead,figcaption{text-wrap:pretty}
.hero h1{max-width:16ch}
h2{max-width:24ch}
.lead,.hero .sub{max-width:58ch}
.card h3,.cat h3,.person h3,.ip .n{text-wrap:balance}

/* --- Kartenraster: Spaltenzahl passt zur Kartenzahl, keine 4+2-Reste --- */
.cards{grid-template-columns:repeat(4,1fr)}
.cards:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.cards:has(> :nth-child(5):last-child),
.cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.cards:has(> :nth-child(7)){grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards,.cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards,.cards:has(> :nth-child(6):last-child),.cards:has(> :nth-child(3):last-child){grid-template-columns:1fr}}

.steps{grid-template-columns:repeat(4,1fr)}
.steps:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* Karteninhalt oben ausrichten, damit unterschiedlich lange Texte nicht
   optisch auseinanderfallen */
.card,.step,.cat{display:flex;flex-direction:column}
.card p:last-child,.step p:last-child,.cat p:last-child{margin-bottom:0}

/* --- Kreislaufgrafik: Bildunterschrift statt Text im Kreis --- */
.cyclecap{text-align:center;font-size:13px;color:var(--muted);margin-top:14px;letter-spacing:.01em}

/* --- Fliesstext: keine Silbentrennung erzwingen --- */
body{hyphens:manual}

/* --- Split-Balken: echte 95/5-Proportion, Beschriftung als Legende --- */
.splitfig{margin-top:4px}
.splitbar{height:56px;border-radius:12px;overflow:hidden;display:flex;
  box-shadow:0 10px 26px rgba(10,32,56,.12)}
.splitbar .seg{padding:0}
.splitbar .imp{flex:0 0 72%;background:linear-gradient(160deg,#123a6b,#0a2038)}
.splitbar .ch{flex:0 0 24%;background:linear-gradient(160deg,#3f9145,#2e7d35);padding:0}
.splitbar .fz{flex:0 0 4%;background:linear-gradient(160deg,#9ccf7a,#7fb069);padding:0}
.splitkey .k-fz{background:#8fc46e}
.splitkey{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.splitkey li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.splitkey b{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;color:var(--navy)}
.splitkey i{width:12px;height:12px;border-radius:3px;flex:0 0 12px}
.splitkey .k-imp{background:#123a6b}
.splitkey .k-ch{background:#2e7d35}
@media(max-width:560px){.splitbar{height:44px}.splitkey{gap:16px}.splitkey li{font-size:13px}}

/* --- Stat-Block gestapelt, bricht nie um in einen anderen --- */
.statrow{gap:26px}
.stat p{margin:0;line-height:1.6}

/* --- Buttons bekommen überall Luft (vorher 0 bis 49 px, jetzt einheitlich) --- */
main p:has(> .btn), main .actions, main .btnrow, main .dls + p{margin-top:40px}
main .cards + p:has(> .btn), main .steps + p:has(> .btn),
main .cards + .actions, main .steps + .actions,
main .impact + p:has(> .btn), main .tablescroll + p:has(> .btn),
main .checklist + p:has(> .btn), main figure + p:has(> .btn){margin-top:52px}
main p:has(> .btn){margin-bottom:6px}
main .band p:has(> .btn), main .band .actions{margin-top:30px}
.btnrow{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
@media(max-width:560px){
  main p:has(> .btn), main .actions, main .btnrow{margin-top:32px}
  main .cards + p:has(> .btn), main .steps + p:has(> .btn),
  main .cards + .actions, main .steps + .actions{margin-top:38px}
}

/* --- Sprungnavigation im Seitenkopf --- */
.jumpnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.jumpnav a{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:30px;
  border:1.5px solid rgba(255,255,255,.34);color:#fff;font-size:13.5px;font-weight:600;
  text-decoration:none;transition:background .15s,border-color .15s}
.jumpnav a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.jumpnav a::after{content:'↓';font-size:12px;opacity:.75}

/* --- Zwei-Schritt-Formularseite --- */
.formstep{scroll-margin-top:90px}
.formstep.alt{background:var(--wash)}
.stepgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.stepgrid{grid-template-columns:1fr;gap:32px}}
.stepintro .lead{margin-top:10px}
.stepintro .checklist{margin-top:14px}
.stepintro .riskbox{margin-top:26px}
.stepintro .softnote{margin-top:20px}
.charta-h{font-size:1rem;color:var(--navy);margin-top:28px;letter-spacing:.01em}
.stepbadge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--green-deep);border-radius:30px;padding:6px 14px;margin-bottom:16px}
.stepbadge.optional{background:transparent;color:var(--muted);border:1.5px solid #b6c4d2;padding:5px 13px}

.wrap-note{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.fmini a{text-decoration:underline}

main p.storycta:has(> .btn){margin-top:40px}


/* ============================================================
   v3.1 (03.09.2026) — Fotos der Entwicklungspartner
   ============================================================ */
.person .ph{position:relative;height:200px}
.person .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.authorcard .ph{position:relative}
.authorcard .ph img{position:absolute;inset:0}

/* ============================================================
   v3.1 (03.09.2026) — Zahlen und Grafiken animieren.
   Greift nur, wenn site.js die Klasse .anim setzt (JS aktiv,
   IntersectionObserver vorhanden, keine reduced-motion-Einstellung).
   Ohne JS und mit reduced-motion bleibt alles statisch sichtbar.
   ============================================================ */
/* 95/5-Balken: das grüne Segment wächst in den Import-Balken hinein */
.anim .splitbar .imp{flex:0 0 100%;transition:flex-basis 1.3s cubic-bezier(.2,.7,.2,1) .15s}
.anim .splitbar .ch,.anim .splitbar .fz{flex:0 0 0%;transition:flex-basis 1.3s cubic-bezier(.2,.7,.2,1) .15s}
.anim .go .splitbar .imp{flex-basis:72%}
.anim .go .splitbar .ch{flex-basis:24%}
.anim .go .splitbar .fz{flex-basis:4%}
.anim .splitkey{opacity:0;transform:translateY(6px);transition:opacity .5s ease 1.2s,transform .5s ease 1.2s}
.anim .go .splitkey{opacity:1;transform:none}

/* Wachstumskurve: Linie zeichnet sich, Punkte und Werte folgen */
.anim .panel svg polyline{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease-out .2s}
.anim .panel.go svg polyline{stroke-dashoffset:0}
.anim .panel svg polygon{opacity:0;transition:opacity .9s ease 1.3s}
.anim .panel.go svg polygon{opacity:1}
.anim .panel svg>circle,.anim .panel svg>text{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.anim .panel.go svg>circle,.anim .panel.go svg>text{opacity:1;transform:none}
.anim .panel.go svg>circle:nth-of-type(1),.anim .panel.go svg>text:nth-of-type(1){transition-delay:.3s}
.anim .panel.go svg>circle:nth-of-type(2),.anim .panel.go svg>text:nth-of-type(2){transition-delay:.95s}
.anim .panel.go svg>circle:nth-of-type(3),.anim .panel.go svg>text:nth-of-type(3){transition-delay:1.6s}

/* Finanzierungsbalken: wachsen gestaffelt auf ihren Wert */
.anim .bar .fill{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.anim .bars.go .fill{width:var(--w,0)}
.anim .bars.go .bar:nth-child(2) .fill{transition-delay:.07s}
.anim .bars.go .bar:nth-child(3) .fill{transition-delay:.14s}
.anim .bars.go .bar:nth-child(4) .fill{transition-delay:.21s}
.anim .bars.go .bar:nth-child(5) .fill{transition-delay:.28s}
.anim .bars.go .bar:nth-child(6) .fill{transition-delay:.35s}
.anim .bars.go .bar:nth-child(7) .fill{transition-delay:.42s}

/* Kreislauf: Ring zeichnet sich, Stationen erscheinen im Uhrzeigersinn, Zentrum zuletzt */
.anim .cyclewrap svg circle{transform-box:fill-box;transform-origin:center}
.anim .cyclewrap svg circle[r="118"]{stroke-dasharray:742;stroke-dashoffset:742;transition:stroke-dashoffset 1.7s ease-out}
.anim .cyclewrap.go svg circle[r="118"]{stroke-dashoffset:0}
.anim .cyclewrap svg circle[r="24"]{opacity:0;transform:scale(.4);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.anim .cyclewrap.go svg circle[r="24"]{opacity:1;transform:none}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(2){transition-delay:.25s}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(3){transition-delay:.45s}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(4){transition-delay:.65s}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(5){transition-delay:.85s}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(6){transition-delay:1.05s}
.anim .cyclewrap.go svg circle[r="24"]:nth-of-type(7){transition-delay:1.25s}
.anim .cyclewrap svg circle[r="62"],.anim .cyclewrap svg path,.anim .cyclewrap svg text{opacity:0;transition:opacity .6s ease 1.4s}
.anim .cyclewrap.go svg circle[r="62"],.anim .cyclewrap.go svg path,.anim .cyclewrap.go svg text{opacity:1}

/* Wirkungsmodell: Schritt-Nummern poppen nacheinander auf */
.anim .step::before{opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.anim .steps.go .step::before{opacity:1;transform:none}
.anim .steps.go .step:nth-child(2)::before{transition-delay:.15s}
.anim .steps.go .step:nth-child(3)::before{transition-delay:.3s}
.anim .steps.go .step:nth-child(4)::before{transition-delay:.45s}

/* Hero-Bild: sehr langsamer Zoom, nur Desktop */
@media(min-width:900px){
  .anim .hero .photo{transform-origin:55% 45%;animation:kenburns 26s ease-out forwards}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* v3.1 — Marktziel-Infografik als echter Inhalt (Blaue Landwirtschaft) */
.producer{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-top:26px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 12px 30px rgba(10,32,56,.08);overflow:hidden}
.producer-text{padding:28px 30px}
.producer-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--wash);color:var(--navy);margin-bottom:16px}
.producer-text h3{font-size:19px;color:var(--navy);margin-bottom:10px;text-wrap:balance}
.producer-text p{font-size:15px;color:var(--ink);line-height:1.65}
.producer-text p b{color:var(--green-deep);font-weight:700}
.producer-levers{padding:28px 30px;background:var(--wash);border-left:1px solid var(--line)}
.producer-levers h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:4px}
.producer-levers .checklist{margin-top:14px;gap:10px}
.producer-levers .checklist li{font-size:14.5px}
@media(max-width:820px){.producer{grid-template-columns:1fr}.producer-levers{border-left:0;border-top:1px solid var(--line)}}


/* ============================================================
   v4 (08.09.2026) — globale Korrekturen
   ============================================================ */
footer .fine a{display:inline;padding:0;margin:0}
.legal p{margin:0 0 1em}.legal p:last-child{margin-bottom:0}

/* ---------- v4: index.html ---------- */
/* ============================================================
   css-v4/index.css — Ergänzungen für index.html (Textstand Phil 08.09.2026)
   Wird später in styles.css eingegliedert. Nur neue Regeln, keine
   Überschreibungen bestehender Komponenten.
   ============================================================ */

/* --- Split-Balken: drittes Segment «Freizeitfang» ---
   Breite, Farbe und Animation für .splitbar .fz und .splitkey .k-fz stehen bereits
   in styles.css (Zeilen 570–573, 645–648). Hier bewusst keine Doppelregel. */

/* --- Statusbox «Wo wir heute stehen»: Entwicklungsschritte als Aufzählung --- */
.statusbox .statuslist{margin:8px 0 12px;padding-left:1.2em;font-size:14.5px;line-height:1.6;color:var(--ink)}
.statusbox .statuslist li{margin:0 0 5px}
.statusbox .statuslist li::marker{color:var(--blue)}
.statusbox p + .statuslist + p{margin-top:0}

/* --- Karten: Zitat am Ende von Grund 1 --- */
.card .cardquote{display:block;margin-top:10px;font-style:italic;color:var(--navy)}

/* --- Kartenraster für genau fünf Karten:
   Desktop 3 + 2, wobei die fünfte (längste) Karte doppelt breit läuft (a b c / d e e),
   Tablet 2 Spalten (fünfte Karte über beide), Mobile 1 Spalte --- */
.cards:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}
.cards:has(> :nth-child(5):last-child) > .card:nth-child(5){grid-column:span 2}
@media(max-width:1000px){
  .cards:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .cards:has(> :nth-child(5):last-child){grid-template-columns:1fr}
  .cards:has(> :nth-child(5):last-child) > .card:nth-child(5){grid-column:auto}
}

/* --- Hero: langes Wort «Süsswasserfischbedarfs» darf den Flex-Container nicht sprengen.
   Im HTML steht ein weiches Trennzeichen (­); min-width:0 verhindert, dass .wrap
   auf Min-Content-Breite wächst, overflow-wrap ist die Rückfallebene. --- */
.hero .wrap{min-width:0}
.hero h1{max-width:24ch;overflow-wrap:anywhere} /* 15ch in styles.css ist zu schmal für «Süsswasserfischbedarfs.» */

/* --- Hero: seitlicher Innenabstand wie alle anderen Sektionen.
   styles.css setzt .hero .wrap{padding:70px 0} und überschreibt damit das horizontale
   Padding von .wrap (0 clamp(20px,5vw,56px)); Folge: Hero-Text 56 px weiter links als
   der restliche Inhalt, mobil ganz ohne Rand. War schon in v3.1 so. --- */
.hero .wrap{padding:70px clamp(20px,5vw,56px)}
@media(max-width:640px){.hero .wrap{padding:56px clamp(20px,5vw,56px)}}

/* ---------- v4: initiative.html ---------- */
/* Blaue Landwirtschaft Schweiz — v4-Ergänzungen für initiative.html (08.09.2026)
   Wird nach styles.css geladen. Nur Seiten-spezifische Regeln, kein Eingriff ins Basis-CSS. */

/* Fahrplan: Jahreszahl als eigenes Label über dem Etappentitel */
.step h3{display:flex;flex-direction:column;gap:4px}
.step .step-year{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}

/* Absicht & Aufgaben: Aufgabenliste zweispaltig, Karten-Optik wie die früheren Aufgaben-Kacheln */
.tasklist{margin-top:30px;grid-template-columns:repeat(2,1fr);gap:14px;max-width:960px}
.tasklist li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14.5px;color:var(--ink);line-height:1.55}
.tasklist li::before{margin-top:0}
@media(max-width:760px){.tasklist{grid-template-columns:1fr}}

/* ---------- v4: blaue-landwirtschaft.html ---------- */
/* Blaue Landwirtschaft Schweiz — v4-Ergänzungen für blaue-landwirtschaft.html (08.09.2026)
   Wird nach styles.css geladen. Nur Seiten-spezifische Regeln, kein Eingriff ins Basis-CSS. */

/* Produzenten-Kasten: die Hebel-Überschrift ist neu ein h3 (korrekte Überschriften-Hierarchie
   nach dem Wegfall des h3 im Textteil), Optik wie das bisherige h4 */
.producer-levers h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:4px;font-weight:700}

/* Kennzahlentabelle: die längere Zielzeile darf auf schmalen Viewports umbrechen */
@media(max-width:560px){.tablescroll table:not(.compare) td.num{white-space:normal}}

/* ---------- v4: wirkungsmodell.html ---------- */
/* ==========================================================================
   v4 — Wirkungsmodell (wirkungsmodell.html)
   Ergänzt styles.css; wird nur auf wirkungsmodell.html geladen.
   ========================================================================== */

/* Hinweiszeile unter den drei Buttons: beide Dokumente online lesbar */
.readonline{font-size:14px;color:var(--muted);margin-top:16px;max-width:70ch}
.readonline a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.readonline a:hover{color:var(--green-deep)}

/* ---------- v4: traegerschaft.html ---------- */
/* ==========================================================================
   v4 — Initianten (traegerschaft.html)
   Ergänzt styles.css; wird nur auf traegerschaft.html geladen.
   ========================================================================== */

/* Seitenkopf: der Lead ist deutlich länger als auf den übrigen Seiten */
.pagehead p{max-width:68ch}

/* Drei Initianten statt vier Karten: drei Spalten,
   Raster gedeckelt, damit die Porträts nicht zu breit gezogen werden. */
.people{grid-template-columns:repeat(3,1fr);max-width:960px}
.person .ph{height:190px}
@media(max-width:900px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.people{grid-template-columns:1fr;max-width:420px}}

/* Genossenschaft: drei gleichwertige Absätze nebeneinander statt 2 + 1 */
.prose{grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:900px){.prose{grid-template-columns:1fr;gap:26px}}

/* ---------- v4: manifest.html ---------- */
/* ==========================================================================
   v4 — Das Manifest 2026 (manifest.html)
   Ergänzt styles.css; wird nur auf manifest.html geladen.
   ========================================================================== */

/* --- Seitenkopf: langer Titel, zwei Einleitungsabsätze --- */
.manifest-head .kicker{color:#8fd39a;margin-bottom:14px}
.manifest-head h1{max-width:26ch;font-size:clamp(28px,3.7vw,46px)}
.manifest-head p{max-width:68ch}
.manifest-head p+p{margin-top:14px}

/* --- Lesespalte wie die alte Story (.article .wrap = 880px) --- */
.manifest h2{max-width:32ch;color:var(--navy)}
.manifest .chapter{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.manifest .chapter h2{margin-top:0;margin-bottom:.6em}
.manifest .intro p{font-size:1.02rem}

/* --- Hervorgehobene Kästen (Worum es uns geht, Haltung, Vision, Mission, Schlussgedanke) --- */
.mbox{background:var(--wash);border-left:4px solid var(--navy);border-radius:0 14px 14px 0;
  padding:22px 26px;margin:28px 0}
.mbox .kicker{margin-bottom:8px}
.mbox p{margin:0;font-size:1.04rem;line-height:1.6;color:var(--ink);font-weight:500}
.mbox.dark{background:linear-gradient(160deg,#0f3a6b,#0a2038);border-left-color:var(--green);color:#fff}
.mbox.dark .kicker{color:#8fd39a}
.mbox.dark p{color:#fff;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.18rem;font-weight:600;line-height:1.45}

/* Vision + Mission nebeneinander ab 820 px */
.mbox-pair{display:grid;gap:18px;margin:28px 0}
.mbox-pair .mbox{margin:0;height:100%}
@media(min-width:820px){.mbox-pair{grid-template-columns:1fr 1fr}}

/* --- 2×2-Raster in Kapitel 2 (überschreibt das 4-Spalten-Raster von .cards) --- */
.manifest .cards{grid-template-columns:repeat(2,1fr);margin-top:8px}
.manifest .card h3{margin-top:0;color:var(--navy);font-size:17.5px}
.manifest .card p{font-size:15px;color:#31485c;line-height:1.6}
@media(max-width:600px){.manifest .cards{grid-template-columns:1fr}}

/* --- Checklisten im Artikel: keine Listeneinrückung aus .article ul --- */
.manifest .checklist{padding-left:0;margin:20px 0 30px}
.manifest .checklist li{margin:0;font-size:15.5px;line-height:1.65;color:#31485c}

/* --- Signatur und Abschluss --- */
.manifest .authorcard{margin:44px 0 26px}
.manifest .authorcard .ph{font-size:0}
.manifest .note{font-size:.95rem;color:var(--muted)}
.manifest .actions{margin-top:28px}

@media(max-width:640px){
  .mbox{padding:18px 20px;border-radius:0 12px 12px 0}
  .mbox p{font-size:1rem}
  .mbox.dark p{font-size:1.08rem}
  .manifest .chapter{margin-top:34px;padding-top:26px}
}

/* ---------- v4: positionspapier.html ---------- */
/* ============================================================
   Blaue Landwirtschaft Schweiz — Positionspapier 2026
   Ergänzende Styles (v4, 08.09.2026). Lädt nach styles.css.
   ============================================================ */

/* --- Seitenkopf --- */
.pp-head .kicker{color:#8fd39a;margin-bottom:14px}
.pp-head h1{max-width:16ch}
.pp-head .pp-sub{font-size:clamp(17px,1.5vw,21px);color:#fff;font-weight:500;max-width:34ch;margin-top:16px;line-height:1.35;text-wrap:balance}
.pp-head .pp-stand{font-size:13.5px;color:#9fc7ea;margin-top:14px;letter-spacing:.02em}
.pp-head .pp-claim{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(15px,1.2vw,17px);color:#dff0d8;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);max-width:44ch}
.pp-head .jumpnav{margin-top:26px;gap:8px}
.pp-head .jumpnav a{padding:7px 13px;font-size:12.5px}
.pp-head .jumpnav a b{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;color:#8fd39a;font-weight:800}
@media(max-width:640px){
  .pp-head .jumpnav a{padding:7px 11px;font-size:12px}
  .pp-head .jumpnav a::after{display:none}
}

/* --- Artikelkörper --- */
.article.pp .wrap{max-width:880px}
.pp h2{margin:2.1em 0 .55em;scroll-margin-top:96px;max-width:none}
.pp h2 .num{color:var(--green-deep);margin-right:.35em;font-variant-numeric:tabular-nums}
.pp h2.first{margin-top:.4em}
.pp h3{margin-top:1.3em;font-size:1.08rem;color:var(--navy)}
.pp .lede{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(1.05rem,1rem+.5vw,1.25rem);color:var(--navy);margin:1.3em 0 0;line-height:1.45}
.pp .checklist{margin:18px 0 1.2em;padding-left:0}
.pp .checklist li{margin:0;line-height:1.62;color:#31485c}
.pp .checklist li b{color:var(--navy)}
.pp .tablescroll{margin-top:22px}
.pp .compare{margin-top:0}
.pp .compare td:first-child{width:150px}
.pp .compare .is,.pp .compare .soll{color:var(--ink)}
@media(max-width:640px){.pp .compare td:first-child{width:120px}}

/* --- Kästen mit Label (ZWECK, ZAHLEN, ZWISCHENBILANZ, ...) --- */
.pbox{border-left:4px solid var(--navy);background:var(--wash);border-radius:0 14px 14px 0;padding:22px 26px;margin:28px 0}
.pbox .kicker{margin-bottom:8px;color:var(--green-deep)}
.pbox p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink)}
.pbox.dark{background:linear-gradient(160deg,#0f3a6b,#0a2038);border-left-color:#8fd39a;color:#fff;border-radius:14px;padding:28px 30px;margin-top:36px}
.pbox.dark .kicker{color:#8fd39a}
.pbox.dark p{color:rgba(255,255,255,.92);font-size:16.5px}
@media(max-width:520px){.pbox{padding:18px 18px}.pbox.dark{padding:22px 20px}}

/* --- Timeline (Kapitel 2) --- */
.pp-timeline{list-style:none;margin:30px 0 8px;padding:0;position:relative}
.pp-timeline::before{content:'';position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--blue),var(--green));border-radius:2px}
.pp-timeline li{position:relative;padding:0 0 30px 38px}
.pp-timeline li:last-child{padding-bottom:6px}
.pp-timeline li::before{content:'';position:absolute;left:3px;top:7px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-sizing:border-box}
.pp-timeline .when{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.pp-timeline .when .inst{text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);font-size:13.5px}
.pp-timeline h3{margin:6px 0 6px;font-size:1.08rem;color:var(--ink);line-height:1.35}
.pp-timeline p{margin:0;font-size:15px;line-height:1.7}
.pp-cite{font-weight:700;color:var(--green-deep);text-decoration:none!important;white-space:nowrap;padding:0 2px}
.pp-cite:hover{text-decoration:underline!important}
@media(max-width:520px){
  .pp-timeline li{padding-left:30px;padding-bottom:26px}
  .pp-timeline::before{left:7px}
  .pp-timeline li::before{left:1px;width:13px;height:13px}
  .pp-timeline .when .inst{display:block;width:100%}
}

/* --- Prüfdimensionen (Kapitel 4) --- */
.pp-dims{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 8px;padding:0}
.pp-dims li{margin:0;display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;min-height:118px;line-height:1.35}
.pp-dims .n{font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--navy);letter-spacing:-.02em}
.pp-dims .t{font-weight:600;font-size:14.5px;color:var(--ink);text-wrap:balance}
@media(max-width:900px){.pp-dims{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .pp-dims{grid-template-columns:1fr;gap:10px}
  .pp-dims li{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px 16px}
  .pp-dims .n{font-size:1.6rem;min-width:34px;text-align:center}
}

/* --- Nutzen-Karten (Kapitel 8) --- */
.pp .cards{grid-template-columns:repeat(2,1fr);margin-top:26px}
.pp .card h3{margin-top:0;font-size:1.02rem;color:var(--navy)}
.pp .card p{margin:0;font-size:15px;color:#31485c;line-height:1.6}
@media(max-width:600px){.pp .cards{grid-template-columns:1fr}}

/* --- Quellen --- */
.pp-sources{list-style:none;counter-reset:q;margin:22px 0 0;padding:0;display:grid;gap:12px}
.pp-sources li{position:relative;padding:14px 16px 14px 54px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:14.5px;line-height:1.6;color:#31485c;margin:0;scroll-margin-top:96px}
.pp-sources li::before{counter-increment:q;content:"[" counter(q) "]";position:absolute;left:16px;top:14px;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.pp-sources li:target{border-color:var(--green);box-shadow:0 0 0 3px rgba(63,145,69,.18)}
.pp-sources .src{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--green-deep);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.pp-sources .src svg{flex:0 0 12px}
@media(max-width:520px){.pp-sources li{padding:12px 14px 12px 44px}.pp-sources li::before{left:13px;top:12px}}

/* --- Signatur und Buttons --- */
.pp .authorcard{margin:44px 0 0}
.pp .actions{margin-top:36px}

/* ---------- v4: mitmachen.html ---------- */
/* ==========================================================================
   v4 — Mitmachen (mitmachen.html)
   Ergänzt styles.css; wird nur auf mitmachen.html geladen.
   ========================================================================== */

/* Pflichtfeld-Sternchen bleibt in der Beschriftungszeile:
   styles.css setzt .fld span auf display:block, was auch das innere
   .req-Sternchen erfasst und es auf eine eigene Zeile schiebt. */
.fld span .req{display:inline;margin:0 0 0 2px}

/* Langes Auswahlfeld «Ich interessiere mich für»: volle Breite, damit die
   Optionen im geschlossenen Zustand nicht abgeschnitten werden. */
#c-mitwirkung{text-overflow:ellipsis}

/* Checkbox-Beschriftungen: Text, Link und Sternchen sitzen in einem span,
   damit sie als ein Flex-Element umbrechen statt als drei getrennte. */
.chk > span{flex:1 1 auto}

/* ---------- v4: stakeholder.html ---------- */
/* ==========================================================================
   v4 — Stakeholder (stakeholder.html)
   Ergänzt styles.css; wird nur auf stakeholder.html geladen.
   ========================================================================== */

/* --- Lesespalte --- */
.stakeholder .wrap{max-width:900px}
.stakeholder .lead{max-width:66ch}

/* --- Drei Phasen als gestapelte Karten mit Nummern-Badge (Optik von .step) --- */
.phases{display:grid;gap:22px;margin-top:30px;counter-reset:ph}
.phase{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,3.4vw,36px);position:relative}
.phase::before{counter-increment:ph;content:counter(ph);display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:14px}
.phase h2{font-size:clamp(1.25rem,1rem+1.1vw,1.65rem);line-height:1.2;color:var(--navy);margin:0 0 12px;max-width:none}
.phase p{font-size:15.5px;line-height:1.7;color:#31485c;margin:0 0 1em}
.phase p:last-child{margin-bottom:0}
.phase .listlead{margin-bottom:0}
.phase .checklist{margin:12px 0 20px;padding-left:0}
.phase .checklist li{font-size:15px;line-height:1.6;color:#31485c}
.phase .decision{border-left:4px solid var(--blue);background:var(--wash);border-radius:0 12px 12px 0;
  padding:14px 18px;color:var(--ink);font-weight:500}

/* --- Claim-Zeile --- */
.claim{margin:36px 0 0;padding:26px 30px;border-left:4px solid var(--green);background:var(--cream);border-radius:0 14px 14px 0}
.claim p{margin:0;font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;
  font-size:clamp(1.12rem,1rem+.8vw,1.45rem);line-height:1.4;color:var(--navy);text-wrap:balance}

@media(max-width:640px){
  .phase{border-radius:14px}
  .phase p,.phase .checklist li{font-size:15px}
  .claim{padding:20px 20px;border-radius:0 12px 12px 0}
}

/* v4 — Druck/PDF (Manifest, Positionspapier) */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,footer,.skip-link,.actions,.jumpnav,.band,.note,.readonline,.crumb{display:none!important}
  .js .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
  body{background:#fff}
  .pagehead{padding:36px 0 30px}
  .pbox,.mbox,.card,.pp-dims li,.pp-timeline li,.authorcard,table tr{break-inside:avoid;page-break-inside:avoid}
  h2{break-after:avoid}
  a{text-decoration:none;color:inherit}
  .pp-sources a{color:#123a6b}
}
@page{size:A4;margin:16mm 14mm}

/* ============================================================
   v4.1 (15.09.2026) — Untermenü «Blaue Landwirtschaft»
   ============================================================ */
.navitem{position:relative;display:flex;align-items:center;gap:2px}
.subtoggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;background:none;color:#25415c;cursor:pointer;border-radius:6px;padding:0}
.subtoggle:hover,.subtoggle:focus-visible{color:var(--navy);background:var(--wash)}
.subtoggle svg{transition:transform .2s}
.navitem.open .subtoggle svg{transform:rotate(180deg)}
.submenu{display:none;position:absolute;top:calc(100% + 14px);left:-14px;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(10,32,56,.14);padding:8px;z-index:60}
.submenu::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.navitem:hover .submenu,.navitem:focus-within .submenu,.navitem.open .submenu{display:block}
.navlinks .submenu a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;white-space:nowrap}
.navlinks .submenu a:hover,.navlinks .submenu a:focus-visible{background:var(--wash);color:var(--navy)}
.navlinks .submenu a[aria-current="page"]{background:var(--wash);color:var(--green-deep);font-weight:600}
.navlinks .submenu a[aria-current="page"]::after{display:none}
@media(max-width:980px){
  .navitem{display:block}
  .navitem>a{display:block}
  .subtoggle{display:none}
  .submenu{display:block;position:static;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0;background:var(--wash)}
  .submenu::before{display:none}
  .menu .navlinks .submenu a{padding:12px clamp(20px,5vw,56px) 12px calc(clamp(20px,5vw,56px) + 18px);font-size:14.5px;border-bottom:1px solid var(--line);border-radius:0}
  .menu .navlinks .submenu a[aria-current="page"]{background:var(--wash)}
}
/* Formular: Honeypot-Feld für Bots, für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}