/* Grundlook „Design C“ für die bestehenden Seiten. Erzeugt von quellen/werkzeuge/grundlook.py aus vorschau/design-c (c-rahmen.css, c-alt.css). Nicht von Hand ändern. */
:root{--p:#F4F2EE;--p2:#ECE8E1;--k:#1D1D1B;--k2:#55534E;--li:#D8D3CA;--or:#E8993A;--or2:#C9761C;--d:#16181F;
--h:'Anton',Impact,'Arial Narrow',sans-serif;--s:'Archivo',system-ui,sans-serif;--t:'Source Serif 4',Georgia,serif;--hand:'Caveat',cursive}
html:root{--navy:#16181F;--navy2:#22252E;--navy3:#2E313B;--cyan:#E8993A;--cyan-d:#C9761C;--amber:#E8993A;--ice:#ECE8E1;--light:#ECE8E1;
--ink:#1D1D1B;--grey:#55534E;--line:#D8D3CA;--white:#FAF8F3;--serif:'Anton',Impact,sans-serif;--sans:'Archivo',system-ui,sans-serif;--wrap:1280px}
html body{background:var(--p)!important;color:var(--k);font-family:var(--s);display:block!important;padding:0!important;min-height:0!important}
html body h1,html body h2,html body h3{overflow-wrap:break-word}
/* Seiten, die ihren Inhalt früher per Flex auf body zentriert haben (Passwort, Offline): Karte mittig */
html body > .card{margin:64px auto!important}
@media(max-width:700px){html body > .card{margin:32px 16px!important;width:auto!important}}
html body *{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important}
html body *:not(input[type=checkbox]):not(input[type=radio]){border-radius:0!important}
html body a:hover,html body [class]:not(.scrolldown):not(.track):hover{transform:none!important}
html body .reveal{opacity:1!important;transform:none!important}
html body .orb,html body .pulse,html body .ejbadge,html body .stickycta,html body .banner-band,html body .bar,html body .portrait .frame,html body .ic:empty{display:none!important}
html body .wrap{max-width:1280px!important;padding-left:56px!important;padding-right:56px!important}
html body h1,html body h2{font-family:var(--h)!important;font-weight:400!important;letter-spacing:-.005em!important;line-height:.98!important}
html body h1{font-size:clamp(44px,5.4vw,84px)!important;max-width:17ch}
html body h2{font-size:clamp(32px,3.4vw,54px)!important}
html body h3,html body h4{font-family:var(--s)!important;font-weight:700!important;letter-spacing:-.01em}
html body main p,html body section p,html body header p,html body article p,html body .lead p{font-family:var(--t)}
/* Kopfbereiche: Papier statt Navy */
html body header.top,html body header.hero,html body section.hero,html body .hero{background:var(--p)!important;color:var(--k)!important;min-height:0!important;border-bottom:1px solid var(--li);background-image:none!important}
html body section.hero{padding-top:72px!important;padding-bottom:76px!important;display:block!important}
html body header.top .hero{padding-top:64px!important;padding-bottom:72px!important}
html body .hero :is(h1,h2,h3,h4,p,li,span,div,small,b,strong,em,i,label,a:not(.btn)){color:var(--k)!important}
html body .hero :is(.accent,.role,.kicker,.badge){color:var(--or2)!important}
html body .hero :is(.sub,.lead,p){color:var(--k2)!important}
html body .accent{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--or2)!important}
html body .hero h1{margin-top:22px!important}
html body .hero .sub{font:400 clamp(21px,1.9vw,27px)/1.3 var(--t)!important;max-width:40ch}
/* Etiketten */
html body .kicker,html body .badge{font:600 12px/1.3 var(--s)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--or2)!important;background:none!important;border:0!important;padding:0!important;display:inline-flex!important;align-items:center;gap:14px}
html body .kicker::before,html body .badge::before{content:"";width:34px;height:1px;background:currentColor;flex:0 0 auto}
html body .dark .kicker,html body .kicker.light{color:var(--or)!important}
/* Knöpfe */
html body .btn{font-family:var(--s)!important;font-weight:600!important;border-radius:0!important}
html body .btn-primary{background:var(--or)!important;color:var(--k)!important;border-color:var(--or)!important}
html body .btn-primary:hover{background:#f0a64c!important}
html body .btn-ghost{background:transparent!important;color:var(--k)!important;border:1.5px solid var(--k)!important}
html body .btn-dark{background:var(--k)!important;color:var(--p)!important}
html body .dark .btn-ghost{color:var(--p)!important;border-color:var(--p)!important}
/* Fotos von Menschen einheitlich */
html body img[src*="/team-"],html body img[src*="/dozenten/"]{filter:grayscale(1) contrast(1.05)}
html body .c-skizze{background:#CFC6B8;line-height:0;max-width:720px}
html body .c-skizze svg{width:100%;height:auto;display:block}
/* Barrierefreiheit-Knopf schlicht */
html body #a11yToggle{background:var(--k)!important;color:var(--p)!important}
@media(max-width:700px){
html body .zeile,html body .row2{flex-wrap:wrap}
html body .zeile .w{white-space:normal}
html body .grid>*,html body .panel{min-width:0;max-width:100%}
html body .panel canvas,html body .panel img,html body .panel svg{max-width:100%;height:auto}
}
@media(max-width:1000px){html body .wrap{padding-left:24px!important;padding-right:24px!important}}
/* ---------- alte Kopfleisten (Startseite header.nav, Unterseiten header.top) ---------- */
html body header.nav,html body header.nav.scrolled,html body .nav.mopen{background:var(--p)!important;border-bottom:1px solid var(--li)!important}
html body header.nav{padding:12px 0!important}
html body header.nav .brand img,html body header.top .brand img,html body header.kopf .brand img{filter:brightness(0)!important}
html body header.nav .navlinks a,html body header.nav .ndtog,html body header.nav .langdrop *{color:var(--k)!important}
html body header.nav .navlinks a:hover{color:var(--or2)!important}
html body .navdrop .ndmenu{background:var(--p)!important;border:1px solid var(--li)!important}
html body .navdrop .ndmenu a{color:var(--k)!important}
html body .navdrop .ndmenu a:hover{background:var(--p2)!important;color:var(--k)!important}
html body .navdrop .ndhead{color:var(--or2)!important}
html body header.nav .navlinks a.btn-primary{color:var(--k)!important}
html body header.nav button,html body header.nav .mtog,html body header.nav .burger{color:var(--k)!important;border-color:var(--k)!important}
html body header.top{background:var(--p)!important;color:var(--k)!important;background-image:none!important}
html body header.top .crumbs,html body header.top .crumbs a,html body header.top .crumbs span,html body header.top .tabs a{color:var(--k)!important}
html body header.top .tabs a.on{border-bottom:2px solid var(--or)!important}
html body header.top .cdm{background:var(--p)!important;border:1px solid var(--li)!important}
html body header.top .cdm a{color:var(--k)!important}
html body footer{background:var(--d)!important;color:#D8D3CA!important}
html body footer a{color:#F4F2EE!important}
html body img[src*="/team-"],html body img[src*="team-"],html body img[src*="/dozenten/"]{filter:none!important}
html body section.hero:has(.ticker){padding-top:190px!important}
html body:has(header.nav) section.hero:not(:has(.ticker)){padding-top:150px!important}
html body .ticker{background:var(--k)!important;border:0!important}
html body .ticker *{color:var(--p)!important}
html body #heronet,html body canvas.heronet{display:none!important}
html body section[aria-hidden="true"]:has(> img){padding:0!important}
/* Leuchtflecken (radiale Verläufe) in Kästen entfernen */
html body .inhouse-box::after,html body .promise::after{display:none!important}
html body .inhouse-box{border-radius:0!important}
/* Hinweiszeilen auf den Programmseiten (Dozent:innen, Whitepaper): kompakt, links bündig, Papiergrund statt Pastellband */
html body section[style*="#fdf6e9"],html body section[style*="#eef7f8"]{background:var(--p)!important;padding:0!important;border:0!important;border-top:1px solid var(--li)!important}
html body section[style*="#fdf6e9"]+section[style*="#eef7f8"]{border-top:0!important}
html body section[style*="#eef7f8"]{border-bottom:1px solid var(--li)!important}
html body section[style*="#fdf6e9"]>.wrap,html body section[style*="#eef7f8"]>.wrap{padding-top:14px!important;padding-bottom:14px!important;text-align:left!important;font:500 15px/1.5 var(--s)!important;color:var(--k2)!important}
html body section[style*="#fdf6e9"]>.wrap>span:first-child,html body section[style*="#eef7f8"]>.wrap>span:first-child{width:8px!important;height:8px!important;background:var(--or)!important;margin-right:12px!important}
html body section[style*="#fdf6e9"] a,html body section[style*="#eef7f8"] a{color:var(--k)!important;font-weight:600;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:4px}
/* Startseite: getöntes Foto rechts neben der Überschrift, von links eingeblendet (ab 1200 px Breite) */
@media(min-width:1200px){
html body section.hero#top:has(.ticker)::after,html body:has(img[src*="programm-"]) section.hero#top::after,html body:has(img[src*="bildmaterial/ai-engineering."]) section.hero#top::after{content:"";position:absolute;top:112px;right:0;bottom:0;width:52%;background:url(/media/grundlook/hero-gestalter.jpg) 22% center/cover no-repeat;-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 22%,#000 55%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 22%,#000 55%);pointer-events:none;z-index:0}
html body section.hero#top>.wrap{position:relative;z-index:2}
/* Programmseiten: eigenes Programmbild statt des Startseiten-Fotos, schwarzweiß mit warmem Ton wie die übrigen Bilder */
html body:has(img[src*="programm-"]) section.hero#top::after,html body:has(img[src*="bildmaterial/ai-engineering."]) section.hero#top::after{top:0;filter:grayscale(1) sepia(.18) contrast(1.05)}
html body:has(img[src*="programm-crisis-counselor."]) section.hero#top::after{background-image:url(/media/programm-crisis-counselor.jpg)!important;background-position:center 30%!important}
html body:has(img[src*="programm-digital-defense."]) section.hero#top::after{background-image:url(/media/programm-digital-defense.jpg)!important;background-position:70% center!important}
html body:has(img[src*="programm-digital-strategy."]) section.hero#top::after{background-image:url(/media/programm-digital-strategy.jpg)!important;background-position:center 40%!important}
html body:has(img[src*="programm-legal-tech."]) section.hero#top::after{background-image:url(/media/programm-legal-tech.jpg)!important;background-position:70% center!important}
html body:has(img[src*="bildmaterial/ai-engineering."]) section.hero#top::after{background-image:url(/media/bildmaterial/ai-engineering.jpg)!important}
}
/* Startseite, Kasten „Jedes Programm – auch als Inhouse-Programm“: getöntes Team-Foto (Büro) oben rechts, von links und nach unten eingeblendet */
@media(min-width:1200px){
html body #inhouse .inhouse-box::after{display:block!important;content:"";position:absolute;top:0;right:0;left:auto;bottom:auto;width:50%;height:66%;border-radius:0!important;background:url(/media/grundlook/inhouse-team.jpg) center 45%/cover no-repeat!important;opacity:.62;
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 60%),linear-gradient(to bottom,#000 55%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 60%),linear-gradient(to bottom,#000 55%,transparent 100%);mask-composite:intersect;pointer-events:none;z-index:0}
html body #inhouse .inhouse-box>*{position:relative;z-index:1}
}
/* Kopfleiste: Anmelden, Suche (⌘K) und Sprache als gleich hohe Kästen */
html body .kbtn,html body .langdrop .ldt{box-sizing:border-box!important;height:36px!important;min-width:36px;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center;gap:6px;border:1px solid var(--k)!important;background:transparent!important;color:var(--k)!important;font:600 13px/1 var(--s)!important;line-height:1!important}
html body .kbtn.plogin{padding:0 10px!important}
html body .kbtn svg,html body .kbtn img{width:16px;height:16px}
/* Inhouse-Kasten (Startseite und Programmseiten): drei Punkte nebeneinander, auch wo die Seite die Regeln nicht selbst mitbringt */
html body .inhouse-box h2{line-height:1.1!important}
/* AI Engineering: Bildband unter dem Kopf ausblenden (das Bild steht jetzt im Kopf; die anderen Programmseiten blenden ihr Band schon aus) */
html body section[aria-hidden="true"]:has(> img[src*="bildmaterial/ai-engineering."]){display:none!important}
/* Startseite: Bildband mit der Hand ausblenden (dasselbe Foto steht schon im Kopf) */
html body section[aria-hidden="true"]:has(> img[src*="bildmaterial/2.jpg"]){display:none!important}
/* Überschriften (Anton): etwas mehr Zeilenabstand, damit Unterlängen (g, p) die Umlaute der nächsten Zeile nicht berühren (Jan, 04.11.) */
html body h1,html body h2{line-height:1.08!important}
/* Startseite: Bildband vor dem Leitbild ausblenden (Jan, 04.11.) */
html body section[aria-hidden="true"]:has(> img[src*="bildmaterial/3.jpg"]){display:none!important}
html body .inhouse-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:28px 0;position:relative}
html body .inhouse-points b{display:block;color:var(--or)!important;font:700 1.02rem/1.3 var(--s);margin-bottom:3px}
html body .inhouse-points span{font-size:.9rem;color:#D8D3CA!important}
@media(max-width:900px){html body .inhouse-points{grid-template-columns:1fr}}
/* Programmseiten: „Lernen von Praktiker:innen“ mit Dozentenfotos (section.gl-doz, siehe dozenten_streifen.py) */
html body section.gl-doz[style]{background:var(--p2)!important;border:0!important}
html body section.gl-doz[style]>.wrap{display:flex!important;align-items:center;gap:20px 28px;flex-wrap:wrap;padding-top:34px!important;padding-bottom:34px!important}
html body section.gl-doz[style]>.wrap>span.gl-doz-bilder:first-child{display:flex;flex:0 0 auto;margin:0!important;width:auto!important;height:auto!important;background:none!important}
html body section.gl-doz[style] .gl-doz-bilder img{display:none;width:104px;height:104px;object-fit:cover;object-position:center 22%}
html body section.gl-doz[style] .gl-doz-bilder:not(.gewaehlt) img:first-child,html body section.gl-doz[style] .gl-doz-bilder img.an{display:block}
html body section.gl-doz[style] .gl-doz-name{display:block;font:500 12.5px/1.3 var(--s);color:var(--k2);margin-top:8px;max-width:104px}
html body section.gl-doz[style]>.wrap>span.gl-doz-bilder:first-child{flex-direction:column!important}
html body section.gl-doz[style] .gl-doz-text{font:400 clamp(26px,2.6vw,36px)/1.05 var(--h)!important;color:var(--k)!important;margin-left:12px}
html body section.gl-doz[style] a{margin-left:auto;display:inline-flex;align-items:center;padding:13px 20px;border:1.5px solid var(--k);text-decoration:none!important;font:600 15px/1 var(--s)!important;color:var(--k)!important;white-space:nowrap}
html body section.gl-doz[style] a:hover{background:var(--k);color:var(--p)!important}
@media(max-width:760px){html body section.gl-doz[style] a{margin-left:0}html body section.gl-doz[style] .gl-doz-text{margin-left:0;flex-basis:100%}}
/* Einheitliche Kopfleiste (#gl-kopf, siehe grundlook_kopf.js): ersetzt die drei alten Kopfleisten */
html.gl-kopf-an body header.nav{display:none!important}
html.gl-kopf-an body header.top>.wrap.nav,html.gl-kopf-an body header.top>.bar{display:none!important}
html.gl-kopf-an,html.gl-kopf-an body{overflow-x:clip!important;overflow-y:visible!important}
#gl-kopf{position:sticky;top:0;z-index:80;background:var(--p);border-bottom:1px solid var(--li);font-family:var(--s);color:var(--k);text-align:left}
#gl-kopf *{box-sizing:border-box}
#gl-kopf .gl-w{max-width:1280px;margin:0 auto;padding:0 56px;min-height:84px;display:flex;align-items:center;gap:26px}
#gl-kopf .gl-logo{flex:0 0 auto;line-height:0}
#gl-kopf .gl-logo img{height:46px;width:auto;display:block;filter:brightness(0)}
#gl-kopf .gl-menu{display:flex;align-items:center;gap:22px;margin-left:auto}
#gl-kopf .navdrop{position:relative;display:flex;align-items:center;min-height:84px;width:auto}
#gl-kopf .ndtog{font:500 14.5px/1 var(--s)!important;color:var(--k)!important;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
#gl-kopf .ndtog:hover{color:var(--or2)!important}
#gl-kopf .ndtog .car{font-size:.7em}
#gl-kopf .ndmenu{display:none;position:absolute;top:100%;left:-14px;min-width:260px;flex-direction:column;padding:10px;background:var(--p)!important;border:1px solid var(--li)!important;z-index:90;backdrop-filter:none}
#gl-kopf .navdrop:hover .ndmenu,#gl-kopf .navdrop:focus-within .ndmenu{display:flex}
#gl-kopf .ndmenu a{padding:9px 12px;font:400 14px/1.3 var(--s)!important;color:var(--k)!important;white-space:nowrap;text-decoration:none;background:none}
#gl-kopf .ndmenu a:hover{background:var(--p2)!important}
#gl-kopf .ndhead{display:block;padding:12px 12px 4px;font:600 11px/1.2 var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--or2)!important}
#gl-kopf .gl-rechts{display:flex;align-items:center;gap:10px;flex:0 0 auto}
#gl-kopf .langdrop{position:relative}
#gl-kopf .langdrop .ldm{display:none;position:absolute;right:0;top:100%;flex-direction:column;background:var(--p)!important;border:1px solid var(--li)!important;padding:6px;min-width:160px;z-index:90}
#gl-kopf .langdrop:hover .ldm,#gl-kopf .langdrop:focus-within .ldm,#gl-kopf .langdrop.lopen .ldm{display:flex!important}
#gl-kopf .langdrop .ldm a{padding:8px 10px;color:var(--k)!important;white-space:nowrap;font:500 14px/1.2 var(--s);text-decoration:none}
#gl-kopf .gl-burger{display:none;margin-left:auto;background:none;border:1px solid var(--k);width:42px;height:36px;font-size:18px;line-height:1;color:var(--k);cursor:pointer}
@media(max-width:1240px){
#gl-kopf .gl-w{padding:10px 24px;min-height:68px;flex-wrap:wrap}
#gl-kopf .gl-logo img{height:38px}
#gl-kopf .gl-menu,#gl-kopf .gl-rechts{display:none}
#gl-kopf .gl-burger{display:block}
#gl-kopf.offen .gl-menu{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;order:3;margin:6px 0 0;gap:0;max-height:70vh;overflow:auto}
#gl-kopf.offen .navdrop{flex-shrink:0;min-height:0;flex-direction:column;align-items:flex-start;border-top:1px solid var(--li);padding:12px 0}
#gl-kopf.offen .ndmenu{display:flex;position:static;border:0!important;padding:4px 0 0 10px;min-width:0}
#gl-kopf.offen .gl-rechts{display:flex;order:4;flex-basis:100%;padding:12px 0 4px;border-top:1px solid var(--li)}
}
/* Startseite und Programmseiten: Kopf steht jetzt im Fluss statt darüber – Abstände anpassen */
html.gl-kopf-an body section.hero:has(.ticker){padding-top:112px!important}
html.gl-kopf-an body section.hero .ticker{top:0!important}
html.gl-kopf-an body section.hero#top:has(.ticker)::after{top:44px}
html.gl-kopf-an body:has(header.nav) section.hero:not(:has(.ticker)){padding-top:64px!important}
/* Stufenleiter der Programme (.ladder .rung l0–l4): durchgehende Stufung hell → dunkel in der Design-C-Palette */
html body .rung{border-left-width:6px!important}
html body .rung.l0{border-left-color:#D8D3CA!important}html body .rung.l0 .lvl{background:#D8D3CA!important;color:#1D1D1B!important}
html body .rung.l1{border-left-color:#E8993A!important}html body .rung.l1 .lvl{background:#E8993A!important;color:#1D1D1B!important}
html body .rung.l2{border-left-color:#C9761C!important}html body .rung.l2 .lvl{background:#C9761C!important;color:#F4F2EE!important}
html body .rung.l3{border-left-color:#55534E!important}html body .rung.l3 .lvl{background:#55534E!important;color:#F4F2EE!important}
html body .rung.l4{border-left-color:#16181F!important}html body .rung.l4 .lvl{background:#16181F!important;color:#F4F2EE!important}