/* Gemeinsam kann mehr – Ideenpapier | Stand 2026-09-26-1303 */
:root{
  --bg:#F6F9F8;
  --text:#1A1A1A;
  --muted:#4A5A55;
  --green:#2D5A45;
  --teal:#45D4C0;
  --violet:#6B5B9E;
  --orange:#E8732A;
  --lime:#8DB83A;
  --mint:#D1E0DE;
  --panel:#E7EFEC;
  --link:#2D5A45;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16211D;
    --text:#E9F0ED;
    --muted:#A9BBB4;
    --green:#8FD1B3;
    --panel:#1F2E29;
    --mint:#2A3D36;
    --link:#7FE0D2;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  font-size:1.125rem;
  line-height:1.65;
}
h1,h2,h3,.sans{
  font-family:"Segoe UI",Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
main{width:92%;margin:0 auto;padding:0 0 4rem}
a{color:var(--link);text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Kopf */
header{width:92%;margin:0 auto;padding:3.5rem 0 2rem}
.voices{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.voices span{width:1.1rem;height:1.1rem;border-radius:50%;display:block}
h1{
  font-size:clamp(2.6rem,9vw,4.2rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 1.25rem;
  color:var(--green);
}
h1 .line{display:block}
.lede{font-size:1.25rem;color:var(--text);margin:0 0 1rem}
.meta{font-size:.9rem;color:var(--muted);margin:0}

h2{
  font-size:1.5rem;
  line-height:1.25;
  color:var(--green);
  margin:3rem 0 .75rem;
}
h3{font-size:1.1rem;margin:1.75rem 0 .4rem}
p{margin:0 0 1rem}
ul,ol{padding-left:1.4rem;margin:0 0 1rem}
li{margin-bottom:.35rem}
strong{font-weight:700}
em.note{color:var(--muted)}

.panel{
  background:var(--panel);
  border-left:4px solid var(--teal);
  padding:1rem 1.25rem;
  margin:1.25rem 0;
  border-radius:0 .5rem .5rem 0;
}
.panel p:last-child,.panel ol:last-child{margin-bottom:0}
.satzung{font-size:1rem}
.tldr{margin-top:1.5rem;border-left-color:var(--green)}
.tldr h2{font-size:1.1rem;margin:0 0 .5rem;color:var(--green)}
.tldr ul{margin:0;padding-left:1.2rem}
.tldr li{margin-bottom:.45rem}
.tldr li:last-child{margin-bottom:0}
sup.fn{font-size:.7em;line-height:0}
sup.fn a{text-decoration:none;padding:0 .1em}
.praeambel{margin-top:1.75rem;border-left-color:var(--green);font-size:1.05rem}
.praeambel p:first-child{font-weight:500}
.note{margin-top:1.5rem;border-left-color:var(--orange);font-size:1rem}
.satzung h3{margin-top:0}

dl{margin:0 0 1rem}
dt{font-weight:700;margin-top:.9rem}
dd{margin:0}


/* Aufklappbare Abschnitte */
details{border-bottom:1px solid var(--mint)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:.9rem 0}
summary::-webkit-details-marker{display:none}
summary h2{margin:0;flex:1}
summary::after{
  content:"+";font-family:"Segoe UI",Ubuntu,Arial,sans-serif;font-size:1.6rem;line-height:1;
  color:var(--orange);transition:transform .2s ease;
}
details[open] > summary::after{transform:rotate(45deg)}
summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:.25rem}
.section-body{padding:0 0 1.5rem}
.toggle{margin:0 0 .5rem;text-align:right}
.toggle button{
  font:inherit;font-size:.9rem;color:var(--green);background:transparent;
  border:1px solid var(--green);border-radius:999px;padding:.35rem .9rem;cursor:pointer;
}
.toggle button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion: reduce){summary::after{transition:none}}
@media print{.toggle{display:none}summary::after{display:none}}

/* Bereichsfarben */
:root{--a-gruen:#2D5A45;--a-tuerkis:#2FB8A6;--a-lime:#7FA92F;--a-violett:#6B5B9E;--a-orange:#E8732A;--a-rot:#C0392B;--a-blau:#2E6F9E;--a-beere:#A8477E;--a-sand:#B8862B;--a-moos:#4B7D4A}
@media (prefers-color-scheme: dark){:root{--a-gruen:#8FD1B3;--a-tuerkis:#45D4C0;--a-lime:#A9D45C;--a-violett:#A99BE0;--a-rot:#E07366;--a-blau:#7FB6E0;--a-beere:#E093C0;--a-sand:#E0B85C;--a-moos:#8FC08D}}
@media (min-width:900px){header,main,footer{width:80%}}
details{--area:var(--a-gruen)}
summary::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--area)}
details[open]>summary h2{color:var(--area)}
.section-body{border-left:3px solid color-mix(in srgb,var(--area) 45%,transparent);padding-left:1.1rem;background:color-mix(in srgb,var(--area) 4%,transparent);border-radius:0 .4rem .4rem 0;padding-top:.3rem;padding-bottom:.3rem}
.section-body h3{color:var(--area)}
summary:hover h2{color:var(--area)}
.sharepic{margin:2rem 0 .5rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.sharepic img{flex:none;width:11rem;height:auto}
.sharepic figcaption{flex:1 1 18rem;font-size:.95rem;color:var(--muted)}
.sharepic figcaption p{margin:0 0 .5rem}
.sharepic figcaption strong{color:var(--text)}
.sharepic .quelle{font-size:.85rem;margin:0}
.sharepic .legende{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;font-size:.85rem}
.sharepic .legende span span.dot{margin-right:.35rem}
.sharepic .dot{width:.65rem;height:.65rem;border-radius:50%;display:inline-block;margin-right:.35rem}
.sharepic .dot.nw{background:#C9D3D0}
.sharepic .dot.k1{background:#5C9C2F}
.sharepic .dot.k2{background:#3A4744}
.sharepic .dot.k3{background:#C0392B}
@media (prefers-color-scheme: dark){.sharepic .dot.nw{background:#3B4B45}.sharepic .dot.k1{background:#8DB83A}.sharepic .dot.k2{background:#93A69F}.sharepic .dot.k3{background:#E07366}}
.mindmap{margin:2rem 0 .5rem}
.mindmap svg,.mindmap object{display:block;width:100%;height:auto;border:0}
.mindmap .mm-wide{display:none}
@media (min-width:760px){.mindmap .mm-wide{display:block}.mindmap .mm-narrow{display:none}}
.mindmap figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.mm-box rect{fill:color-mix(in srgb,var(--c) 13%,var(--bg));stroke:var(--c);stroke-width:1}
.mm-box a:hover rect,.mm-box a:focus-visible rect{fill:color-mix(in srgb,var(--c) 26%,var(--bg))}
.mm-box a:focus-visible{outline:none}
.mm-box a:focus-visible rect{stroke-width:2.5}
.mm-t{font-weight:700;fill:var(--text)}
.mm-i{fill:var(--muted)}
.mm-center rect{fill:var(--mint);stroke:var(--green);stroke-width:1.2}
.mm-line{fill:none;stroke:var(--muted);stroke-width:1;opacity:.55}

/* Teile und Rollentabelle */
.part{margin:3.5rem 0 .75rem;padding-top:1rem;border-top:3px solid var(--part)}
.part-label{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--part);font-weight:700}
.part .part-title{margin:.2rem 0 .3rem;font-size:clamp(1.7rem,4vw,2.2rem);color:var(--part)}
.part p{margin:0;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:0 0 1rem}
.roles{width:100%;border-collapse:collapse;font-size:1rem}
.roles th,.roles td{text-align:left;vertical-align:top;padding:.55rem .8rem;border-bottom:1px solid var(--mint)}
.roles thead th{font-family:"Segoe UI",Ubuntu,Arial,sans-serif;color:var(--green)}
.roles tbody th{font-family:"Segoe UI",Ubuntu,Arial,sans-serif;font-weight:700;white-space:nowrap}
.mm-zone{fill:var(--muted);letter-spacing:.08em;font-weight:700}

.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--mint);font-size:.9rem}
.legal h2{font-size:1.05rem;margin:1.5rem 0 .4rem;color:var(--green)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 .6rem}

footer{
  width:92%;margin:0 auto;padding:2rem 0 3rem;
  font-size:.95rem;color:var(--muted);
}
@media (max-width:480px){
  body{font-size:1.05rem}
  header{padding-top:2.25rem}
}

/* Zurück nach oben */
.totop{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:10;
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:999px;
  background:var(--panel);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
  text-decoration:none;font-size:.9rem;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .2s ease,transform .2s ease,visibility .2s
}
.totop.sichtbar{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--mint)}
.totop:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (max-width:600px){.totop span{display:none}.totop{padding:.7rem .85rem;font-size:1.1rem}}
@media (prefers-reduced-motion: reduce){.totop{transition:none}}
@media print{.totop{display:none}}