/* ===================================================================== Myra Branding für Material for MkDocs Quelle der Tokens und Regeln: "Myra_Design_System_1.2__standalone_.html" (DOCU/htmldesign) Leitsätze des Design Systems 1.2: · Navy ist die Fläche, Cyan der Akzent, Weiß der Textkörper. · Scharfe Kanten überall — kein border-radius (Markenvorgabe). · Kontrastgebot: auf hellem Grund ist jeder Text Navy, auf dunklem Grund ist jeder Text Weiß. Gedämpfte Töne bleiben Platzhaltern vorbehalten (--ds-ph). · Für Text ausschließlich die funktionalen Token-Paare (WCAG AA), nie die rohen Markenfarben. · Montserrat = Überschriften, Rubik = Fließtext, JetBrains Mono = Code, Labels, Eyebrows. ===================================================================== */ /* ---------- Schriften (self-hosted) ---------- woff2 zuerst, die älteren OTF/TTF aus dem Flare-Projekt als Fallback. */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap; src:url("../assets/fonts/Montserrat-Regular.otf") format("opentype");} @font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap; src:url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2");} @font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap; src:url("../assets/fonts/Montserrat-Bold.otf") format("opentype");} @font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap; src:url("../assets/fonts/Montserrat-ExtraBold.woff2") format("woff2");} @font-face{font-family:"Montserrat";font-style:normal;font-weight:900;font-display:swap; src:url("../assets/fonts/Montserrat-Black.otf") format("opentype");} @font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap; src:url("../assets/fonts/Rubik-Regular.woff2") format("woff2"), url("../assets/fonts/Rubik-Regular.ttf") format("truetype");} @font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap; src:url("../assets/fonts/Rubik-Medium.woff2") format("woff2");} @font-face{font-family:"Rubik";font-style:normal;font-weight:600;font-display:swap; src:url("../assets/fonts/Rubik-SemiBold.woff2") format("woff2");} @font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap; src:url("../assets/fonts/Rubik-Bold.ttf") format("truetype");} /* ---------- 1. Tokens aus dem Design System 1.2 ---------- */ :root{ /* Marke */ --brand-cyan: #2AD9FF; --brand-cyan-hi: #5BE3FF; --brand-darkblue: #002B4A; --brand-buttontext:#00052C; /* Funktionale Paare auf Weiß (WCAG AA). --text-muted ist im Design System 1.2 gleich --text-primary: "rule: all text = ink (light)". */ --text-primary: #002B4A; --text-muted: #002B4A; --sky-on-white: #005E8A; --green-on-white: #2A7200; --red-on-white: #B91C1C; --orange-on-white: #92400E; /* Funktionale Paare auf Navy. "rule: all text = white (dark surfaces)". */ --text-inverse: #FFFFFF; --text-muted-inv: #FFFFFF; --sky-on-navy: #3EDDFF; --green-on-navy: #5FBF40; --red-on-navy: #FF5744; --orange-on-navy: #F79121; /* Navy-Chrome: die Navigation auf der Markenfläche trägt im Design System einen eigenen, ruhigeren Ton als der Fließtext (.nav-item). */ --nav-ink: #C8D8E4; /* Flächen und Banner */ --surface-neutral: #F2F4F6; --surface-sky: #E0F4FF; --surface-green: #E5FFDD; --surface-red: #FEDCD9; --surface-orange: #FEF0DC; --border: #CCD5DB; /* Abstände */ --space-xs:8px; --space-s:12px; --space-m:16px; --space-l:24px; --space-xl:32px; --space-2xl:40px; /* Bewegung */ --dur-fast:120ms; --dur-base:180ms; /* Schriftfamilien */ --font-head:"Montserrat","Helvetica Neue",Arial,sans-serif; --font-body:"Rubik","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* Hellmodus-Ebenen (html[data-theme='light'] im Design System) */ [data-md-color-scheme="myra"]{ color-scheme:light; --ds-bg: #F2F4F6; --ds-bg-2: #FFFFFF; --ds-surface: #FFFFFF; --ds-surface-2: #F2F4F6; --ds-line: #CCD5DB; --ds-line-soft: #E1E6EA; --ds-ink: #002B4A; --ds-ink-dim: #002B4A; --ds-ink-mute: #002B4A; --ds-ph: #4D6B80; --ds-accent: #005E8A; --ds-accent-bg: #E0F4FF; --ds-shadow: 0 1px 2px rgba(0,43,74,.08); /* Funktionale Statusfarben */ --ds-pos:#2A7200; --ds-neg:#B91C1C; --ds-warn:#C2410C; --ds-info:#005E8A; --ds-focus:#2360C5; /* Rollennamen auf dieselben Farben — keine neuen Töne */ --ds-link:#005E8A; --ds-success:#2A7200; --ds-danger:#B91C1C; --ds-warning:#C2410C; /* Interaktionsstufen: nur dort, wo eine klickbare Fläche eine sichtbare Rückmeldung braucht. */ --ds-accent-hover:#00476B; --ds-accent-active:#00354F; --ds-on-accent:#FFFFFF; } /* Dunkelmodus-Ebenen (html[data-theme='dark'] im Design System) */ [data-md-color-scheme="slate"]{ color-scheme:dark; --ds-bg: #0A1A29; --ds-bg-2: #0F2334; --ds-surface: #102A40; --ds-surface-2: #163049; --ds-line: rgba(62,221,255,.20); --ds-line-soft: rgba(255,255,255,.10); --ds-ink: #FFFFFF; --ds-ink-dim: #FFFFFF; --ds-ink-mute: #FFFFFF; --ds-ph: #C2D2DF; --ds-accent: #5BE3FF; --ds-accent-bg: rgba(62,221,255,.12); --ds-shadow: 0 1px 0 rgba(0,0,0,.30); --ds-pos:#5FBF40; --ds-neg:#FF5744; --ds-warn:#FFB454; --ds-info:#3EDDFF; --ds-focus:#2360C5; --ds-link:#3EDDFF; --ds-success:#5FBF40; --ds-danger:#FF5744; --ds-warning:#FFB454; --ds-accent-hover:#26C6E6; --ds-accent-active:#12AECF; --ds-on-accent:#002B4A; } /* ---------- 2. Material-Paletten aus den Tokens ableiten ---------- */ [data-md-color-scheme="myra"], [data-md-color-scheme="slate"]{ --md-default-fg-color: var(--ds-ink); --md-default-fg-color--light: var(--ds-ink-dim); --md-default-fg-color--lighter: var(--ds-ink-mute); --md-default-fg-color--lightest: var(--ds-line); --md-default-bg-color: var(--ds-bg-2); --md-primary-fg-color: var(--brand-darkblue); --md-primary-fg-color--light: #163049; --md-primary-fg-color--dark: #001B30; --md-primary-bg-color: var(--text-inverse); --md-primary-bg-color--light: var(--nav-ink); --md-accent-fg-color: var(--ds-accent); --md-accent-fg-color--transparent:var(--ds-accent-bg); --md-typeset-color: var(--ds-ink); --md-typeset-a-color: var(--ds-link); --md-code-bg-color: var(--ds-surface-2); --md-code-fg-color: var(--ds-ink); --md-footer-bg-color: var(--brand-darkblue); --md-footer-bg-color--dark: #001B30; --md-footer-fg-color: var(--text-inverse); --md-footer-fg-color--light: var(--nav-ink); --md-footer-fg-color--lighter: var(--nav-ink); --md-typeset-table-color: var(--ds-line); --md-text-font-family: var(--font-body); --md-code-font-family: var(--font-mono); } /* ---------- 3. Grundlagen ---------- */ /* Markenvorgabe des Design Systems: scharfe Kanten, kein border-radius. */ *,*::before,*::after{border-radius:0 !important;} /* Fließtext: Rubik 14 px, Zeilenhöhe 1.5 (body des Design Systems). Material stellt die Wurzel auf 125 %, 1 rem sind also 20 px. */ body,input,select,textarea,button{font-family:var(--font-body);} .md-typeset{font-size:.7rem;line-height:1.5;} .md-typeset .md-content__inner>:first-child{margin-top:0;} ::placeholder{color:var(--ds-ph);opacity:1;} /* Fokusring — universell, 2 px Akzent mit 2 px Abstand. */ *:focus{outline:none;} *:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important;animation:none !important;} } /* ---------- 4. Seitenraster: Fläche, Inhaltskarte, Breite ---------- */ .md-grid{max-width:none;} .md-main{background:var(--ds-bg);} .md-main__inner{margin-top:0;} /* .md-main__inner ist eine Flex-Zeile aus Navigation, Inhaltsverzeichnis und Inhalt. Mit Umbruch belegt die Kopfleiste (.myra-topbar) die erste Zeile neben der Navigation und läuft bis zum rechten Rand; Inhalt und Inhaltsverzeichnis rücken in die zweite Zeile darunter. Die Reihenfolge wird dafür ausdrücklich gesetzt, weil Flex nach "order" umbricht. */ .md-main__inner{flex-wrap:wrap;} .myra-topbar{order:1;flex:0 0 100%;} .md-content{order:2;padding:0;} .md-sidebar--secondary{order:3;} /* Sobald das Inhaltsverzeichnis eingeblendet wird, tritt an die Stelle des Umbruchs ein Raster: die Navigation steht über beide Zeilen links, die Kopfleiste beginnt an ihrer Kante und läuft bis zum rechten Rand, Inhalt und Inhaltsverzeichnis liegen darunter. Ohne Seitennavigation (hide: navigation, z. B. Startseite) oder solange sie als Schublade über der Seite liegt, entfällt die erste Spalte und die Leiste nimmt die volle Breite ein. */ @media screen and (min-width:60em){ .md-main__inner{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto 1fr;} .md-sidebar--primary{grid-column:1;grid-row:1/3;align-self:start;} .myra-topbar{grid-column:2/4;grid-row:1;} .md-content{grid-column:2;grid-row:2;} .md-sidebar--secondary{grid-column:3;grid-row:2;align-self:start;} } /* .page des Design Systems: keine Karte, keine Umrandung — der Text steht unmittelbar auf der Seitenfläche. Maße 26/36/56, Satzbreite höchstens 1280 px. */ .md-content__inner{ background:transparent; border:none; box-shadow:none; padding:26px 36px 56px; margin:0; max-width:64rem; } .md-content__inner::before{display:none;} @media screen and (max-width:76.1875em){ .md-content__inner{padding:24px 18px 60px;} } /* ---------- 5. Typografie (Product-Ramp des Design Systems) ---------- */ .md-typeset :is(h1,h2,h3,h4,h5,h6){ font-family:var(--font-head);color:var(--ds-ink);text-wrap:balance;} .md-typeset h1{font-size:1.9rem;font-weight:800;line-height:1.06; letter-spacing:-.02em;color:var(--ds-ink);margin:0 0 var(--space-s);} /* Abschnitte werden im Design System durch eine Haarlinie *über* dem Titel getrennt (.section + .section), nicht durch eine Linie darunter. */ .md-typeset h2{font-size:1.05rem;font-weight:700;line-height:1.2; letter-spacing:0;margin-top:var(--space-2xl); padding-top:var(--space-xl);border-top:1px solid var(--ds-line-soft);} .md-typeset h1+h2{margin-top:var(--space-l);padding-top:0;border-top:none;} .md-typeset h3{font-size:.8rem;font-weight:700;line-height:1.35; margin-top:var(--space-xl);} .md-typeset h4{font-size:.7rem;font-weight:600;line-height:1.45; margin-top:var(--space-l);} .md-typeset h5{font-size:.65rem;font-weight:600;line-height:1.5; text-transform:none;color:var(--ds-ink);} /* h6 folgt dem Label-Stil des Design Systems (.card__head) */ .md-typeset h6{font-size:.55rem;font-weight:700;line-height:1.5; text-transform:uppercase;letter-spacing:.10em;color:var(--ds-ink);} .md-typeset p{text-wrap:pretty;} .md-typeset .lead,.md-typeset h1+p{font-size:.75rem;line-height:1.55; color:var(--ds-ink-dim);} @media screen and (max-width:76.1875em){ .md-typeset h1{font-size:1.6rem;} .md-typeset h2{font-size:.98rem;} } /* ---------- 6. Kopfleiste ---------- */ .md-header{ background-color:var(--brand-darkblue); color:var(--text-inverse); box-shadow:0 1px 0 rgba(0,0,0,.30); } .md-header__title{font-family:var(--font-head);font-weight:800; font-size:.8rem;letter-spacing:.01em;} .md-header__button.md-logo :is(img,svg){height:1.5rem;width:auto;} /* Wortmarke wie .sidebar__brand: nur der Titel, mittig auf einer Linie mit dem Myra-Logo — die Zeilenhöhe von .md-header__title zentriert ihn, deshalb bleibt sie hier unangetastet. */ /* Sprachschalter links neben dem Umschalter für Hell- und Dunkelmodus. Benannt ist immer die andere Fassung: auf der deutschen Seite steht EN, auf der englischen DE. Maße wie bei den Symbolschaltflächen der Kopfleiste, Beschriftung in Mono wie die übrigen Kennungen. */ a.md-header__button.myra-lang{ display:inline-flex;align-items:center;justify-content:center; min-width:1.2rem;height:1.2rem;padding:0 .25rem; font-family:var(--font-mono);font-size:.6rem;font-weight:600; letter-spacing:.08em;line-height:1; color:currentcolor;text-decoration:none; border:1px solid rgba(255,255,255,.35); transition:border-color var(--dur-fast),background-color var(--dur-fast);} a.md-header__button.myra-lang:is(:hover,:focus){ opacity:1;border-color:var(--text-inverse); background-color:rgba(255,255,255,.12);} /* ---------- 6a. Hauptnavigation waagerecht (.md-tabs) -------------- Die obersten Navigationspunkte stehen als Reiter in der Kopfleiste; die Seitenleiste zeigt daraufhin nur den Unterbaum des aktiven Reiters. Gestaltung nach .nav-item des Design Systems: Rubik 500 auf Navy, aktiv in Weiß mit Cyan-Balken. */ .md-tabs{background-color:#001B30;} .md-tabs__list{padding-left:0;} .md-tabs__item{padding:0 .8rem;} .md-tabs__link{ font-family:var(--font-body);font-weight:500;font-size:.7rem; color:var(--nav-ink);opacity:1;position:relative; margin-top:.5rem;padding-bottom:.5rem; transition:color var(--dur-fast);} .md-tabs__link:is(:hover,:focus){color:var(--text-inverse);} /* Material markiert den aktiven Reiter am
  • , nicht am Anker. */ .md-tabs__item--active>.md-tabs__link, .md-tabs__item--active>.md-tabs__link:hover{ color:var(--text-inverse);font-weight:600;} .md-tabs__item--active>.md-tabs__link::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--sky-on-navy);} /* Suchfeld: scharfe Kanten, Akzentrahmen im Fokus */ .md-search__form{background-color:rgba(255,255,255,.10);} .md-search__form:hover{background-color:rgba(255,255,255,.16);} [data-md-toggle=search]:checked~.md-header .md-search__form{ background-color:var(--ds-surface); box-shadow:0 0 0 2px var(--sky-on-navy);} .md-search__input::placeholder{color:var(--nav-ink);} .md-search-result__link:is(:focus,:hover){background-color:var(--ds-accent-bg);} .md-search-result__article--document .md-search-result__title{ font-family:var(--font-head);font-weight:700;} /* ---------- 7. Primärnavigation — Navy-Chrome des Design Systems ---- */ @media screen and (min-width:76.25em){ /* Die Navigation klebt am oberen Rand und ist nur so hoch wie ihr Baum. Der Navy-Streifen gehört deshalb an .md-main: der Bereich reicht von der Kopf- bis zur Fußzeile, damit läuft die Leiste über die ganze Seitenlänge und schiebt sich nicht über die Fußzeile. */ .md-main{ background:linear-gradient(to right, var(--brand-darkblue) 0 12rem, rgba(255,255,255,.08) 12rem calc(12rem + 1px), var(--ds-bg) calc(12rem + 1px) 100%);} .md-sidebar--primary{ background:transparent;border-right:none; width:12rem;padding:0; height:auto;max-height:calc(100vh - 2.4rem);} .md-main:has(>.md-main__inner>.md-sidebar--primary[hidden]){ background:var(--ds-bg);} .md-sidebar--primary .md-sidebar__scrollwrap{ margin:0;padding:18px 14px 20px; max-height:calc(100vh - 4.8rem);overflow-y:auto;} .md-sidebar--primary .md-nav{color:var(--nav-ink);} /* Gruppentitel wie .sidebar__group-title */ /* Der Seitenname steht bereits in der Kopfleiste — in der Seitenleiste wird er nicht wiederholt. */ .md-sidebar--primary .md-nav__title{display:none;} /* Sektionen: Material bettet den Titelanker in .md-nav__container ein — beide Ebenen müssen den Label-Stil bekommen. */ .md-sidebar--primary .md-nav__item--section>.md-nav__link, .md-sidebar--primary .md-nav__item--section>.md-nav__container>.md-nav__link{ font-family:var(--font-head);font-weight:700;font-size:.5rem; letter-spacing:.16em;text-transform:uppercase; color:rgba(200,216,228,.55);background:transparent;} .md-sidebar--primary .md-nav__item--section>.md-nav__container{ margin-top:var(--space-m);} /* Navigationseinträge wie .nav-item */ .md-sidebar--primary .md-nav__link{ font-family:var(--font-body);font-weight:500;font-size:.7rem; color:var(--nav-ink);padding:9px 12px;margin:0; transition:background-color var(--dur-fast),color var(--dur-fast);} .md-sidebar--primary .md-nav__link:hover{ background:rgba(255,255,255,.05);color:var(--text-inverse);} .md-sidebar--primary .md-nav__link--active, .md-sidebar--primary .md-nav__link--active:hover{ background:rgba(62,221,255,.10);color:var(--text-inverse); font-weight:600;position:relative;} .md-sidebar--primary .md-nav__link--active::before{ content:"";position:absolute;left:0;top:5px;bottom:5px; width:3px;background:var(--sky-on-navy);} /* Aufklappbare Einträge bestehen aus .md-nav__container + Anker + Label. Material markiert Anker UND Label als aktiv — das ergäbe zwei getrennte Kästen. Der aktive Zustand liegt deshalb auf dem Container, damit die Zeile wie ein .nav-item des Design Systems durchgehend wirkt. */ .md-sidebar--primary .md-nav__container:has(>.md-nav__link--active){ background:rgba(62,221,255,.10);position:relative;} .md-sidebar--primary .md-nav__container:has(>.md-nav__link--active)::before{ content:"";position:absolute;left:0;top:5px;bottom:5px; width:3px;background:var(--sky-on-navy);z-index:1;} .md-sidebar--primary .md-nav__container>.md-nav__link--active{ background:transparent;} .md-sidebar--primary .md-nav__container>.md-nav__link--active::before{ content:none;} /* Der Container trägt selbst die Klasse .md-nav__link — sein Innenabstand käme sonst zu dem des Ankers hinzu und Einträge mit Pfeil stünden weiter rechts als ihre Geschwister ohne Pfeil. */ .md-sidebar--primary .md-nav__link.md-nav__container{padding:0;} .md-sidebar--primary .md-nav__container>label.md-nav__link{ cursor:pointer;} /* Mit den Reitern hebt Material (.md-nav--lifted) den Namen des aktiven Reiters an den Kopf der Seitenleiste. Er steht bereits im Reiter und im Brotkrumenpfad und entfällt hier. */ .md-sidebar--primary .md-nav--lifted>.md-nav__list >.md-nav__item--active>:is(.md-nav__link,.md-nav__container>.md-nav__link){ display:none;} .md-sidebar--primary .md-nav--secondary{display:none;} /* Material kürzt lange Titel mit Auslassungspunkten. In dieser Doku sind die Abschnittstitel lang und beschreibend — sie werden umbrochen statt abgeschnitten. */ .md-sidebar--primary .md-ellipsis{ white-space:normal;overflow:visible;text-overflow:clip; /* Ein einzelnes langes Wort — „Mitigationsberichte“, „Benutzerverwaltung“ — ist breiter als die Spalte und ragte über sie hinaus. Es wird nach den Regeln der Seitensprache getrennt (das Wurzelelement trägt lang="de" bzw. lang="en"); wo das Wörterbuch nicht greift, bricht es notfalls hart um. */ overflow-wrap:break-word;hyphens:auto;} } /* Aufklapppfeil der Hauptnavigation: der Hover-Zustand zeigt sich allein an der Farbe des Pfeils, die Fläche bleibt in jedem Fall transparent. Material hinterlegt den Pfeil sonst mit --md-accent-fg-color--transparent — im Myra-Farbsatz ein deckendes Hellblau (#E0F4FF), das auf dem navyfarbenen Grund als heller Kasten erscheint. Die Regeln stehen bewusst außerhalb der Breitenabfragen: dieselbe Navigation erscheint auf breiten Fenstern als Seitenleiste und auf schmalen als Schublade. */ .md-nav--primary .md-nav__icon, .md-nav--primary .md-nav__icon:hover, .md-nav--primary .md-nav__link:hover .md-nav__icon:hover{ background-color:transparent;} .md-nav--primary .md-nav__icon{ color:var(--nav-ink);transition:color var(--dur-fast);} .md-nav--primary .md-nav__link:hover .md-nav__icon, .md-nav--primary .md-nav__icon:hover{color:var(--sky-on-navy);} /* Bei Einträgen mit eigener Seite ist der Pfeil ein Label neben dem Anker — die Zeile soll trotzdem als Ganzes reagieren. */ .md-nav--primary .md-nav__container:has(>label.md-nav__link:hover):not(:has(>.md-nav__link--active)){ background:rgba(255,255,255,.05);} /* Ausklappnavigation auf schmalen Viewports */ @media screen and (max-width:76.1875em){ /* Material legt für jede Ebene der Schubladennavigation ein eigenes