/* base.css – gemeinsame Mechanik aller drei Konzepte.
   Raster, responsive Regeln, Akkordeon und Barrierefreiheit.
   Alle gestalterischen Werte (Schrift, Farbe, Abstand, Form) setzt das jeweilige Theme.
   Jedes Inhaltselement (.ce) ist ein eigener Container: Es reagiert auf seine eigene Breite,
   nicht auf die Fensterbreite. So funktioniert es in jeder Spalte und an jeder Position. */

.pg,.demo{container:pg/inline-size}
.pg,.demo{position:relative}
.ce{container-type:inline-size;min-width:0}

:where(.th){font-family:var(--f-body);color:var(--ink);background:var(--bg);font-size:var(--fs);line-height:var(--lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
:where(.th) *,:where(.th) *::before,:where(.th) *::after{box-sizing:border-box}
:where(.th) :is(h1,h2,h3,h4,p,ul,ol,figure,address,dl,dd){margin:0}
:where(.th) :is(ul,ol){padding:0;list-style:none}
:where(.th) img{display:block;max-width:100%;height:auto}
:where(.th) :is(h1,h2,h3){font-family:var(--f-head);text-wrap:balance;overflow-wrap:break-word}
:where(.th) a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
:where(.th) a:hover{color:var(--link-h);text-decoration-thickness:2px}
:where(.th) :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:where(.th) :is(button,input){font:inherit;color:inherit}
:where(.th) address{font-style:normal}

.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.skip{position:absolute;left:16px;top:12px;z-index:50;padding:12px 18px;background:#FFFFFF;color:#111111;font-weight:700;text-decoration:none}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.flow > .ce > .ce-in{max-width:var(--ce-max,none);margin-inline:auto;padding-inline:var(--ce-pad,0)}

/* Fließtext mit Listen */
.rt > * + *{margin-top:1em}
@container (max-width:480px){ .rt,.ct-name,.ps-name{hyphens:auto} }
.rt ul > li{position:relative;padding-left:1.35em}
.rt ul > li + li{margin-top:.5em}
.rt ul > li::before{content:"";position:absolute;left:.1em;top:.66em;width:.4em;height:.4em;background:var(--bullet)}

/* Handlungslinks */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.7em 1.3em;text-decoration:none;cursor:pointer;border:2px solid transparent;line-height:1.2;text-align:left}
.lnk{display:inline-flex;align-items:center;gap:.5em;min-height:44px}

/* 1 Seiteneinstieg */
.ce-hero .ce-in{display:grid;gap:var(--hero-gap,32px)}
.hero-img img{width:100%;aspect-ratio:var(--hero-ratio,4/3);object-fit:cover}
@container (min-width:760px){
  .ce-hero.has-img .ce-in{grid-template-columns:var(--hero-cols,minmax(0,7fr) minmax(0,5fr));align-items:var(--hero-align,center)}
}

/* 2 Textblock */
.ce-text .rt,.ce-text .h2{max-width:var(--measure,44em)}

/* 3 Bild-Text */
.ce-media .ce-in{display:grid;gap:24px}
.m-img img{width:100%;aspect-ratio:var(--m-ratio,4/3);object-fit:cover}
.ce-media:not(.has-img) .m-txt{max-width:var(--measure,44em)}
@container (min-width:720px){
  .ce-media.has-img .ce-in{grid-template-columns:var(--m-cols-l,minmax(0,5fr) minmax(0,7fr));gap:var(--m-gap,48px);align-items:var(--m-align,start)}
  .ce-media.has-img.img-right .ce-in{grid-template-columns:var(--m-cols-r,minmax(0,7fr) minmax(0,5fr))}
  .ce-media.img-right .m-img{order:2}
}

/* 8 Spaltengruppe */
.grp{display:grid;gap:var(--grp-gap,24px);grid-template-columns:repeat(auto-fit,minmax(min(var(--grp-min,280px),100%),1fr))}
.grp-3{--grp-min:250px}
@container (min-width:760px){.grp-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.grp > .ce > .ce-in{height:100%}

/* 4 Leistungen & Akkordeon */
.acc-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;min-height:56px}
.acc-item > summary::-webkit-details-marker{display:none}
.acc-t{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto}
.acc-i{flex:none;position:relative;width:32px;height:32px}
.acc-i::before,.acc-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.acc-i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s ease}
.acc-item[open] .acc-i::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--acc-min,300px),100%),1fr));gap:var(--acc-gap,16px);align-items:start}

/* 5 Ansprechpartner */
.ct-lines li{display:flex;align-items:center;gap:10px;min-height:40px}
.ct-lines a{overflow-wrap:anywhere}
.ps-img img{width:100%;object-fit:cover}
.ps-links{display:flex;flex-direction:column}

/* 6 Downloadliste */
.dl-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:56px;text-decoration:none}

/* 7 Hinweis & Handlung */
.ce-note .ce-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.note-txt{flex:1 1 320px;min-width:0}

/* Seitenrahmen: mobiles Menü als <details>, ohne Skript bedienbar */
.mnav{display:none}
.mnav > summary{list-style:none;cursor:pointer}
.mnav > summary::-webkit-details-marker{display:none}
.mnav .when-open{display:none}
.mnav[open] .when-open{display:inline}
.mnav[open] .when-closed{display:none}
.toc-m{display:none}
.toc-m > summary{list-style:none;cursor:pointer}
.toc-m > summary::-webkit-details-marker{display:none}

@media (prefers-reduced-motion:reduce){
  .th *,.th *::before,.th *::after{transition:none!important;animation:none!important}
}