html[data-theme="light"]{color-scheme:light;--bg:#f4f1ea;--ink:#1c2b3a;--muted:#58616a;--line:#d3ccbf;--accent:#285d88}
html[data-theme="dark"]{color-scheme:dark}
.global-header nav .language-toggle,.global-header nav .appearance-toggle{display:inline-flex;align-items:stretch;flex:none;overflow:hidden;border:1px solid #d9d1c4;border-radius:999px;background:#f4f1ea;vertical-align:middle;gap:0}
.global-header nav .language-toggle a,.global-header nav .appearance-toggle button{display:flex;align-items:center;justify-content:center;min-width:31px;min-height:30px;padding:6px 8px;color:#736b60;font:700 10px/1 Sora,Arial,sans-serif;letter-spacing:0;text-decoration:none;border:0;border-radius:0;background:transparent;cursor:pointer}
.global-header nav .appearance-toggle button{font:20px/1 Arial,sans-serif}
.global-header nav .language-toggle a+a,.global-header nav .appearance-toggle button+button{border-left:1px solid #d9d1c4}
.global-header nav .language-toggle a.is-active,.global-header nav .appearance-toggle button[aria-pressed="true"]{background:#22333e;color:#fff}
.global-header nav .language-toggle a:focus-visible,.global-header nav .appearance-toggle button:focus-visible{outline:2px solid #ed675a;outline-offset:-3px}
html[data-theme="light"] .global-header{background:#f4f1ea!important;color:#1c2b3a!important;border-color:#d3ccbf!important}
html[data-theme="light"] .global-header .brand.mxm-brand,html[data-theme="light"] .global-footer .brand.mxm-brand{color:#1c2b3a!important}
html[data-theme="light"] .mxm-identity strong,html[data-theme="light"] .mxm-m{color:#1c2b3a!important}
html[data-theme="light"] .mxm-identity>span{color:#58616a!important}
html[data-theme="light"] .global-header nav>a,html[data-theme="light"] .global-header summary,html[data-theme="light"] .menu-toggle{color:#1c2b3a!important}
html[data-theme="light"] .global-header .nav-contact .contact-options{background:#fbf9f4!important}
html[data-theme="light"] .global-header .nav-contact .contact-options a{color:#1c2b3a!important}
/* Photographs retain their tonal treatment and readable white overlays. */
html[data-theme="light"] .photo-hero,html[data-theme="light"] .training-hero .hero{background:#0a0a0b!important}
html[data-theme="light"] .photo-hero::after{background:linear-gradient(0deg,#0a0a0b,rgba(10,10,11,.55) 35%,transparent 90%)!important}
html[data-theme="light"] .hero-content,html[data-theme="light"] .hero-content :is(h1,p,span),html[data-theme="light"] .training-hero .kasten :is(h1,p,span){color:#f4f2ee!important}
html[data-theme="light"] .training-hero .kasten{background:rgba(12,13,15,.7)!important}
html[data-theme="dark"]:has(.reading-room){--paper:#111519;--card:#1b2228;--ink:#f1eee7;--muted:#b6b5af;--line:#39434b;--coral:#ef796c;--red:#ef8f83;--soft:#232d34}
html[data-theme="dark"] .reading-room .reading-header,html[data-theme="dark"] .reading-room .reading-footer{background:#111519;color:#f1eee7;border-color:#39434b}
html[data-theme="dark"] .reading-room :is(input,textarea,select){background:#1b2228;color:#f1eee7;border-color:#55616b}
html[data-theme="dark"] .reading-room .brand.mxm-brand,html[data-theme="dark"] .reading-room .mxm-identity strong,html[data-theme="dark"] .reading-room .mxm-m{color:#f4f2ee!important}
html[data-theme="dark"] .reading-room .mxm-identity>span{color:#b6b5af!important}
@media(min-width:1051px){.global-header #main-navigation{gap:13px}.global-header #main-navigation>a{font-size:12px}}
@media(max-width:1050px) and (min-width:801px){.global-header{gap:12px;padding-left:2%;padding-right:2%}.global-header #main-navigation{gap:9px}.global-header .brand.mxm-brand{--mxm-size:28px;gap:9px}.global-header .mxm-identity strong{font-size:14px}.global-header #main-navigation>a{font-size:10px}}
@media(max-width:800px){.global-header nav .language-toggle,.global-header nav .appearance-toggle{align-self:flex-start;margin:7px 0;width:max-content}.global-header nav .language-toggle a,.global-header nav .appearance-toggle button{min-height:36px;min-width:36px;padding:8px}}
.reading-sidebar nav>a{display:block;color:var(--ink);text-decoration:none;padding:11px 0;font:500 20px/1.5 var(--serif);border-bottom:1px solid transparent}.reading-sidebar nav>a[aria-current]{color:var(--red);border-color:var(--red)}.reading-sidebar .course-nav-label{margin:35px 0 12px}.reading-main [id]{scroll-margin-top:28px}@media(max-width:800px){.reading-sidebar nav{display:flex;flex-wrap:wrap;gap:5px 18px}.reading-sidebar .course-nav-label{width:100%;margin:18px 0 4px}.reading-sidebar nav>a{font-size:15px;padding:7px 0}}
html[data-theme="light"] .training-hero .btn.secondary{color:#f4f2ee!important;background:transparent!important}html[data-theme="light"] .training-hero .btn.primary{color:#1c2b3a!important}html[data-theme="light"] .training-hero .hero :is(.eyebrow,.kicker){color:#c3d9ed!important}
html[data-theme="light"] .training-hero .btn.primary{background:#22333e!important;color:#fff!important;border-color:#8b9ba8!important}
html .global-header nav .language-toggle a.is-active,html .global-header nav .appearance-toggle button[aria-pressed="true"]{background:#22333e!important;color:#fff!important}html .global-header nav .language-toggle a:not(.is-active),html .global-header nav .appearance-toggle button:not([aria-pressed="true"]){color:#736b60!important;background:#f4f1ea!important}
.global-header nav .language-toggle>span[aria-disabled]{display:flex;align-items:center;justify-content:center;padding:6px 8px;min-width:31px;font:700 10px/1 Sora,Arial,sans-serif;color:#8b8174;background:#f4f1ea;border-left:1px solid #d9d1c4;opacity:.6}
/* ==========================================================================
Ergänzungen 18.10.2026 · Stand 3
1 Schalter kleiner und ruhiger · 2 mobil neben dem Haus-Symbol
3 Lesezimmer-Symbol · 4 Kopfzeile/Menü · 5 helle Ansicht lesbar
========================================================================== */
/* --- 1 · Schalter kleiner und zurückhaltender ---------------------------- */
.global-header nav .language-toggle,
.global-header nav .appearance-toggle{border-color:#ded7cb;border-radius:8px}
.global-header nav .language-toggle a,
.global-header nav .appearance-toggle button,
.global-header nav .language-toggle>span[aria-disabled]{
min-width:23px;min-height:21px;padding:3px 5px;
font:700 9px/1 Sora,Arial,sans-serif;letter-spacing:.02em}
.global-header nav .appearance-toggle button{font:12px/1 Arial,sans-serif}
/* etwas Abstand, damit sie sich von den Menüpunkten absetzen */
.global-header nav .language-toggle{margin-left:18px}
.global-header nav .appearance-toggle{margin-left:5px}
/* --- 2 · Lesezimmer als Symbol, direkt neben dem Haus -------------------- */
.global-header nav a.reading-room-link{display:inline-flex;align-items:center;gap:0;padding-left:2px;padding-right:2px}
.global-header nav a.reading-room-link .rr-icon{flex:none;opacity:.92}
/* Beschriftung bleibt für Screenreader und als Tooltip erhalten */
.global-header nav a.reading-room-link .rr-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* --- 3 · Mobil: Schalter in die erste Zeile, neben das Haus -------------- */
@media(max-width:800px){
.global-header nav .language-toggle,
.global-header nav .appearance-toggle{align-self:center;margin:0;width:max-content}
.global-header nav .language-toggle a,
.global-header nav .appearance-toggle button,
.global-header nav .language-toggle>span[aria-disabled]{min-width:29px;min-height:27px;padding:5px 7px;font-size:10px}
.global-header nav .appearance-toggle button{font:14px/1 Arial,sans-serif}
.global-header nav.open{flex-direction:row;flex-wrap:wrap;align-items:center}
.global-header nav.open>a:not(.home-icon):not(.reading-room-link),
.global-header nav.open>details{width:100%}
.global-header nav.open>.home-icon{order:-3;width:auto;padding:10px 0}
.global-header nav.open>a.reading-room-link{order:-3;width:auto;padding:10px 0 10px 18px}
.global-header nav.open>.language-toggle{order:-2;margin:0 0 0 auto}
.global-header nav.open>.appearance-toggle{order:-1;margin:0 0 0 6px}
/* Kopfzeile gleitet beim Runterscrollen weg – aber nie bei offenem Menü */
.global-header{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.global-header.header-hidden{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.global-header{transition:none}}
/* --- 4 · Helle Ansicht: Eingangsbild bleibt dunkel, Schrift hell --------- */
html[data-theme="light"] .photo-hero,
html[data-theme="light"] .photo-hero .hero-content,
html[data-theme="light"] .home .hero-content{background:#0a0a0a!important}
html[data-theme="light"] .photo-hero .eyebrow{color:#f2f1ed!important}
html[data-theme="light"] .photo-hero .eyebrow::before{background:currentColor!important}
html[data-theme="light"] .photo-hero .hero-content :is(h1,h2,p,span,li,strong,em){color:#f4f2ee!important}
/* --- 5 · Helle Ansicht: Marke, Schaltflächen, Fusszeile ------------------ */
html[data-theme="light"] .mxm-brand .mxm-x::before,
html[data-theme="light"] .mxm-brand .mxm-x::after,
html[data-theme="light"] .global-header .brand::before,
html[data-theme="light"] .global-header .brand::after,
html[data-theme="light"] .signal-cross{background:#ed675a!important}
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .button.primary{background:#22333e!important;color:#f7f5f0!important;border-color:#22333e!important}
html[data-theme="light"] .btn,
html[data-theme="light"] .button{border-color:#c3bcae!important}
@media(max-width:600px){
.global-footer .footer-identity{align-items:flex-start!important;text-align:left!important}
.global-footer .footer-identity>*{text-align:left!important}
}
/* ========================================================================
Feinschliff 18.10.2026 · Stand 5
Trainingsraum · Keynotes · AI Sandbox · mobile Fusszeile
======================================================================== */
/* Der geschützte Bereich ist der Trainingsraum. Die kleine Untermarke sitzt
bewusst unter dem Hauptlogo und hebt sich nur leicht vom Header ab. */
.reading-header .reading-brand-slot{
width:260px;flex-direction:column;align-items:flex-start;gap:7px
}
.reading-header .room-wordmark{
margin:0;padding:4px 8px;border:1px solid rgba(237,103,90,.32);
border-radius:999px;background:rgba(237,103,90,.08);color:#ed675a;
font:700 9px/1.15 Sora,Arial,sans-serif;letter-spacing:.16em;
opacity:.92;transform:none
}
html[data-theme="light"] .reading-header .room-wordmark{
background:rgba(179,67,55,.07);border-color:rgba(179,67,55,.26);
color:#b34337!important
}
/* Das rotierende ×/+ bleibt in Hell und Dunkel eine freistehende Marke. */
.training .keynote-intro .signal-cross,
html[data-theme="light"] .training .keynote-intro .signal-cross{
display:inline-block!important;width:auto!important;height:auto!important;
padding:0!important;background:transparent!important;color:#ed675a!important;
font-size:22px!important;line-height:1!important;box-shadow:none!important
}
/* Beschriftung und Cursor bleiben unten links im Foto; in der hellen Ansicht
hebt Mintgrün beides klar vom Schwarzweissbild ab. */
html[data-theme="light"] .training-sandbox-photo .sandbox-wordmark,
html[data-theme="light"] .training-sandbox-photo .sandbox-wordmark s{
color:#70f5b5!important
}
html[data-theme="light"] .training-sandbox-photo .sandbox-wordmark i{
background:#70f5b5!important
}
@media(max-width:800px){
.reading-header .reading-brand-slot{width:auto;gap:5px}
.reading-header .room-wordmark{font-size:8px;padding:3px 6px;letter-spacing:.14em}
.training .training-sandbox-photo{
display:grid!important;grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:auto auto!important
}
.training .training-sandbox-photo>img{grid-area:1/1!important}
.training .training-sandbox-photo .sandbox-wordmark{
grid-area:1/1!important;position:relative!important;inset:auto!important;
z-index:3!important;display:flex!important;align-items:center!important;
align-self:end!important;justify-self:start!important;width:max-content!important;
margin:0 0 18px 18px!important;padding:0!important;transform:none!important;
font-size:clamp(17px,5vw,23px)!important
}
.training .training-sandbox-photo .ov{grid-area:2/1!important}
}
/* Auf schmalen Bildschirmen bildet die Marken-Spalte einen ruhigen,
mittigen Abschluss; die übrigen Footer-Spalten bleiben gut scanbar. */
@media(max-width:600px){
.global-footer .footer-identity{
align-items:center!important;text-align:center!important;justify-self:stretch!important
}
.global-footer .footer-identity .brand,
.global-footer .footer-identity .footer-identity-rule,
.global-footer .footer-identity p{
align-self:center!important;text-align:center!important
}
.reading-footer{text-align:center!important}
.reading-footer .footer-wordmark{align-items:center!important}
.reading-footer .footer-rule{margin-left:auto!important;margin-right:auto!important}
.reading-footer nav{justify-content:center!important}
}