/* b-theme.css – Konzept 2 · Begegnung (menschlich und nahbar)
   Zentrale Gestaltungswerte. Die Redaktion wählt nur Varianten, keine Werte. */

.th{
  --f-body:"Figtree","Segoe UI",Arial,sans-serif; --f-head:var(--f-body);
  --ink:#2B2521; --ink2:#4E4540; --mute:#6A5F57;
  --line:#E2D6C8; --line2:#EEE5DA;
  --bg:#FFFFFF; --sand:#F6F0E8; --sand2:#EDE3D6; --sf:#F6F0E8;
  --red:#E60005; --red-d:#B3000B; --rose:#FBEAE8;
  --link:#B3000B; --link-h:#2B2521; --focus:#2B2521; --bullet:#E60005;
  --fs:18px; --lh:1.65; --r:20px; --r-s:14px; --r-img:24px;
  --wrap:1240px; --gut:40px; --measure:40em; --sec:88px;
  --ce-max:var(--wrap); --ce-pad:var(--gut); --demo-pad:0px;
}
@container pg (max-width:600px){ .pg > *, .demo > *{ --gut:20px; --sec:56px } }
.th.demo{--sec:44px}

/* ---------- Typografie ---------- */
.th .kicker{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.3;font-weight:600;color:var(--red-d);margin-bottom:14px}
.th .kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.th .hero-h{font-size:clamp(36px,5.4cqi,58px);line-height:1.06;font-weight:700;letter-spacing:-.02em}
.th .h2{font-size:clamp(28px,3.6cqi,38px);line-height:1.15;font-weight:700;letter-spacing:-.015em}
.th .lead{font-size:clamp(19px,2.2cqi,22px);line-height:1.55;color:var(--ink2)}

/* ---------- Handlungslinks ---------- */
.th .btn{font-weight:600;font-size:17px;border-radius:999px;min-height:52px;padding:.7em 1.5em}
.th .btn-p{background:var(--red);color:#FFFFFF}
.th .btn-p:hover{background:var(--red-d);color:#FFFFFF}
.th .btn-s{background:transparent;color:var(--ink);border-color:var(--ink)}
.th .btn-s:hover{background:var(--ink);color:#FFFFFF}
.th .lnk{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.th .lnk:hover{color:var(--red-d)}

/* ---------- Kopf ---------- */
.th .hdr{position:relative;z-index:20;background:#FFFFFF;border-bottom:1px solid var(--line2)}
.th .hdr-in,.th .dept-in{max-width:1440px}
.th .hdr-in{display:flex;align-items:center;gap:14px;min-height:96px}
.th .brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;margin-right:auto;flex:none}
.th .brand img{height:46px;width:auto}
.th .brand-name{font-weight:700;font-size:16px;line-height:1.2}
.th .nav-list{display:flex;align-items:center;gap:2px}
.th .nav-list > li > a,.th .more > summary{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border-radius:999px;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap}
.th .nav-list > li > a:hover,.th .more > summary:hover{background:var(--sand)}
.th .nav-list > li > a[aria-current]{background:var(--sand2)}
.th .more{position:relative}
.th .more > summary{list-style:none;cursor:pointer}
.th .more > summary::-webkit-details-marker{display:none}
.th .more-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:280px;background:#FFFFFF;border-radius:var(--r-s);box-shadow:0 18px 40px rgba(43,37,33,.16);padding:8px;display:flex;flex-direction:column}
.th .more-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500}
.th .more-panel a:hover{background:var(--sand)}
.th .hdr-tools{display:flex;align-items:center;gap:10px;flex:none}
.th .icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--sand);color:var(--ink);cursor:pointer}
.th .icon-btn:hover{background:var(--sand2)}
.th .emg{position:relative}
.th .emg > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:var(--red);color:#FFFFFF;font-weight:700;font-size:16px}
.th .emg > summary::-webkit-details-marker{display:none}
.th .emg > summary:hover{background:var(--red-d)}
.th .emg-panel{position:absolute;right:0;top:calc(100% + 10px);width:320px;background:#FFFFFF;border-radius:var(--r-s);box-shadow:0 18px 40px rgba(43,37,33,.18);padding:20px;z-index:40}
.th .emg-h{font-weight:700;font-size:18px;margin-bottom:8px}
.th .emg-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-bottom:1px solid var(--line2)}
.th .emg-list a{font-weight:700;color:var(--ink);font-size:18px}
.th .emg-list li:last-child{border-bottom:0}

/* Mobiles Menü */
.th .mnav > summary{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:600;font-size:16px}
.th .burger{position:relative;width:18px;height:2px;flex:none;background:currentColor}
.th .burger::before,.th .burger::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.th .burger::before{top:-6px}
.th .burger::after{top:6px}
.th .mnav[open] .burger{background:transparent}
.th .mnav[open] .burger::before{top:0;transform:rotate(45deg)}
.th .mnav[open] .burger::after{top:0;transform:rotate(-45deg)}
.th .mnav-panel{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--sand);padding:16px var(--gut) 32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 40px rgba(43,37,33,.18)}
.th .mn-search{display:flex;align-items:center;gap:10px;background:#FFFFFF;border-radius:999px;padding:0 6px 0 18px;min-height:52px}
.th .mn-search:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.th .mn-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;min-height:48px}
.th .mn-search input::placeholder{color:var(--mute)}
.th .mn-list{background:#FFFFFF;border-radius:var(--r-s);padding:6px}
.th .mn-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px;border-radius:10px;font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
.th .mn-list a[aria-current="true"]{background:var(--sand)}
.th .mn-sub{padding:4px 0 8px 12px}
.th .mn-sub a{min-height:46px;font-weight:500;font-size:16px}
.th .mn-sub a[aria-current="page"]{color:var(--red-d);font-weight:700}
.th .mn-emg{background:var(--rose);border-radius:var(--r-s);padding:14px 18px}
.th .mn-emg li{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.th .mn-emg a{font-weight:700;color:var(--ink)}

@container pg (max-width:1360px){
  .th .nav,.th .hdr-tools .icon-btn{display:none}
  .th .mnav{display:block}
}
@container pg (max-width:600px){
  .th .hdr-in{min-height:72px;gap:8px}
  .th .brand img{height:36px}
  .th .brand-name{display:none}
  .th .emg > summary,.th .mnav > summary{padding:0 14px;font-size:15px}
  .th .emg{position:static}
  .th .emg-panel{left:var(--gut);right:var(--gut);width:auto;top:calc(100% - 4px)}
}

/* ---------- Bereichsnavigation (Fachbereiche) ---------- */
.th .dept{background:#FFFFFF;border-bottom:1px solid var(--line2)}
.th .dept-in{display:flex;align-items:center;gap:12px;min-height:72px;overflow-x:auto;scrollbar-width:none}
.th .dept-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.th .dept-list{display:flex;gap:6px}
.th .dept-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.th .dept-list a:hover{border-color:var(--ink)}
.th .dept-list a[aria-current]{background:var(--ink);border-color:var(--ink);color:#FFFFFF;font-weight:600}

/* ---------- Abschnittsfluss: jedes Element ist ein Band ---------- */
.flow{display:flex;flex-direction:column}
.flow > .ce{padding-block:var(--sec)}
.flow > :is(.ce-text,.ce-media,.ce-acc,.ce-group,.ce-dl).is-featured,.flow > .ce-hero{background:var(--sand)}
.flow > .ce:not(.is-band) + .ce:not(.is-band){padding-top:0}
.flow > .is-band + .is-band{padding-top:0}
.flow > .ce-note > .ce-in{width:calc(100% - 2 * var(--gut));max-width:calc(var(--wrap) - 2 * var(--gut));padding:32px!important}

/* ---------- 1 Seiteneinstieg ---------- */
.th .ce-hero{--hero-cols:minmax(0,6fr) minmax(0,6fr);--hero-ratio:5/4;--hero-gap:56px}
.flow > .ce-hero{padding-block:64px 80px}
.th .ce-hero .lead{margin-top:22px}
.th .ce-hero .actions{margin-top:34px}
.th .hero-img img{border-radius:var(--r-img)}
@container (max-width:759px){ .th .ce-hero{--hero-gap:28px} .flow > .ce-hero{padding-block:32px 40px} .th .hero-img img{aspect-ratio:4/3} }

/* ---------- 2 Textblock ---------- */
.th .ce-text .h2{margin-bottom:18px}
.th .ce-text .rt{font-size:19px}
.th .grp .ce-text.is-featured > .ce-in{background:var(--sand);border-radius:var(--r);padding:28px}

/* ---------- 3 Bild-Text ---------- */
.th .ce-media{--m-ratio:3/2;--m-cols-l:minmax(0,1fr) minmax(0,1fr);--m-cols-r:minmax(0,1fr) minmax(0,1fr);--m-gap:64px;--m-align:center}
.th .m-img img{border-radius:var(--r-img)}
.th figcaption{font-size:15px;color:var(--mute);margin-top:10px}
.th .m-txt .h2{margin-bottom:18px}
.th .m-txt .actions{margin-top:28px}

/* ---------- 4 Leistungen & Akkordeon ---------- */
.th .acc-head{margin-bottom:28px}
.th .acc-intro{margin-top:12px;color:var(--ink2);max-width:var(--measure)}
.th .acc{display:flex;flex-direction:column;gap:10px}
.th .acc-item{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r-s);padding:0 22px}
.flow > .ce:not(.is-featured) .acc-item{background:var(--sand);border-color:var(--sand)}
.th .acc-item > summary{min-height:68px;padding:14px 0;font-weight:600;font-size:18px;line-height:1.35}
.th .acc-item > summary:hover .acc-t{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.2em}
.th .acc-i{border-radius:50%;background:var(--sand2);color:var(--ink)}
.th .acc-item[open] .acc-i{background:var(--red);color:#FFFFFF}
.th .acc-c{padding:0 0 22px}
.th .acc.is-grid{display:grid;--acc-min:320px;--acc-gap:14px}
.th .ce-acc.is-compact .acc-item > summary{min-height:56px;padding:8px 0;font-size:17px}
.th .ce-acc.is-compact .acc{gap:6px}

/* ---------- 5 Ansprechpartner: Kontaktkarte ---------- */
.th .ce-contact > .ce-in{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r);background:#FFFFFF;border:1px solid var(--line2)}
.flow > .ce-group:not(.is-featured) .ce-contact > .ce-in,.th .demo > .ce-contact > .ce-in{background:var(--sand);border-color:var(--sand)}
.th .ce-contact.is-featured > .ce-in{background:var(--rose)!important;border-color:var(--rose)!important}
.th .ct-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid #FFFFFF}
.th .ct-label{font-family:var(--f-body);font-size:16px;line-height:1.3;font-weight:600;color:var(--red-d)}
.th .ct-name{font-size:24px;line-height:1.25;font-weight:700;margin-top:4px}
.th .ct-role{color:var(--mute)}
.th .ct-lines{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.th .ct-lines li{gap:12px;min-height:44px}
.th .ct-ic{width:40px;height:40px;padding:10px;border-radius:50%;background:#FFFFFF;color:var(--red-d)}
.th .ct-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.th .ct-lines a{font-weight:600;color:var(--ink);text-decoration:none;font-size:17px}
.th .ct-lines a:hover{text-decoration:underline;text-decoration-color:var(--red)}
@container (max-width:420px){ .th .ce-contact > .ce-in{padding:22px} .th .ct-ic{width:36px;height:36px;padding:9px} .th .ct-lines li{gap:10px} .th .ct-lines a{font-size:16px} }
.th .ct-extra{margin-top:12px;color:var(--ink2)}

/* ---------- 5 Ansprechpartner: Profil ---------- */
.th .ce-person > .ce-in{display:grid;gap:28px}
@container (min-width:720px){ .th .ce-person.has-photo > .ce-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center} }
.th .ps-img img{aspect-ratio:4/5;border-radius:var(--r-img)}
@container (max-width:719px){ .th .ps-img img{aspect-ratio:4/3} }
.th .ce-person:not(.has-photo) > .ce-in{background:var(--sand);border-radius:var(--r);padding:32px}
.th .ps-name{font-size:clamp(30px,4.4cqi,46px);line-height:1.1;font-weight:700;letter-spacing:-.02em}
.th .ps-role{font-size:20px;color:var(--ink2);margin-top:10px}
.th .ps-text{margin-top:18px}
.th .ps-links{flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:28px}
.th .ps-links a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:2px solid var(--ink);font-weight:600;color:var(--ink);text-decoration:none}
.th .ps-links a:hover{background:var(--ink);color:#FFFFFF}

/* ---------- 6 Downloadliste ---------- */
.th .dl-h{font-size:22px;line-height:1.3;font-weight:700;margin-bottom:14px}
.th .dl-list{display:flex;flex-direction:column;gap:8px}
.th .dl-list a{background:var(--sand);border-radius:var(--r-s);padding:10px 18px 10px 10px;color:var(--ink)}
.th .dl-list a:hover{background:var(--sand2)}
.th .dl-list .ic{width:40px;height:40px;padding:10px;border-radius:50%;background:#FFFFFF;color:var(--red-d)}
.th .dl-t{font-weight:600;line-height:1.35}
.th .dl-m{font-size:14px;font-weight:600;color:var(--mute)}
.th .ce-dl.is-compact .dl-list{flex-direction:row;flex-wrap:wrap}
.th .ce-dl.is-compact .dl-list a{border-radius:999px}

/* ---------- 7 Hinweis & Handlung ---------- */
.th .ce-note > .ce-in{align-items:flex-start}
.th .ce-note:not(.is-featured) > .ce-in{background:var(--sand);border-radius:var(--r);padding:32px}
.th .note-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;color:var(--red-d)}
.th .note-ic .ic{width:24px;height:24px}
.th .note-h{font-size:24px;line-height:1.25;font-weight:700}
.th .note-txt p{margin-top:8px;color:var(--ink2)}
.th .ce-note.is-featured > .ce-in{background:var(--rose);border-radius:var(--r);padding:32px}
@container (max-width:420px){ .th .ce-note > .ce-in,.flow > .ce-note > .ce-in{padding:24px!important} }

/* ---------- 8 Spaltengruppe ---------- */
.th .ce-group .grp-h{margin-bottom:28px}
.th .grp{--grp-gap:20px}

/* ---------- Fuß ---------- */
.th .ftr{background:var(--ink);color:#FFFFFF;font-size:17px}
.th .ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:40px 48px;padding-block:72px 48px}
.th .ftr-logo{display:inline-block;background:#FFFFFF;border-radius:var(--r-s);padding:14px 18px;margin-bottom:22px}
.th .ftr-logo img{height:44px;width:auto}
.th .ftr-h{font-family:var(--f-body);font-size:16px;font-weight:600;color:#D9CFC6;margin-bottom:12px}
.th .ftr-list li{display:flex;align-items:center;gap:10px;min-height:40px}
.th .ftr-k{color:#D9CFC6;min-width:72px}
.th .ftr a{color:#FFFFFF;font-weight:600}
.th .ftr a:hover{color:#FFFFFF;text-decoration-thickness:2px}
.th .ftr :focus-visible{outline-color:#FFFFFF}
.th .ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:24px 48px;border-top:1px solid rgba(255,255,255,.18)}
.th .ftr-legal{display:flex;flex-wrap:wrap;gap:0 28px}
.th .ftr-legal a,.th .linklike{display:inline-flex;align-items:center;min-height:44px}
.th .linklike{background:none;border:0;padding:0;cursor:pointer;color:#FFFFFF;font-weight:600;text-decoration:underline;text-underline-offset:.22em}
.th .eu-box{background:#FFFFFF;border-radius:var(--r-s);padding:10px 16px}
.th .eu-box img{height:44px;width:auto}

/* Ergänzung für die Präsentationswebsite: Suchfeld hinter dem Such-Symbol */
.th .srch{position:relative}
.th .srch > summary{list-style:none;cursor:pointer}
.th .srch > summary::-webkit-details-marker{display:none}
.th .srch[open] > summary{background:var(--sand2)}
.th .srch-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:380px;display:flex;gap:8px;background:#FFFFFF;border-radius:var(--r-s);box-shadow:0 18px 40px rgba(43,37,33,.18);padding:10px}
.th .srch-panel input{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#FFFFFF;font-size:16px}
.th .srch-panel input::placeholder{color:var(--mute)}
.th .srch-panel button{min-height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:600;cursor:pointer}
.th .srch-panel button:hover{background:var(--red-d)}
@container pg (max-width:1360px){ .th .hdr-tools .srch{display:none} }
/* Sehr schmale Geräte (bis 360 px) */
@container pg (max-width:360px){
  .th .brand img{height:30px}
  .th .emg > summary{padding:0 12px;font-size:14px;gap:6px}
  .th .mnav > summary{padding:0 14px}
  .th .mnav > summary > span:not(.burger){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}