table {
    /* Silbentrennung in allen Browsern (Safari/iOS brauchen -webkit-) + langer Wörter umbrechen
       statt überlaufen. Trennung greift dank lang="de" am <html>. */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* HERMES-Datentabellen: einheitliche Ausrichtung – Inhalt linksbündig, Spaltenköpfe und
   Zeilenlabels zentriert; lange Inhalte werden silbengetrennt umgebrochen (nicht hart). */
.hermespjm td, .hermespgm td,
.table td {
    /* «anywhere» statt «break-word»: nur so schrumpft die Mindestbreite der Spalten, sodass die
       Tabelle auch OHNE Trennwörterbuch (Headless/ältere Browser) in die Inhaltsspalte passt;
       mit Silbentrennung (hyphens:auto) wird weiterhin zuerst am Trennpunkt umgebrochen. (2026-09-14) */
    overflow-wrap: anywhere;
}
/* Links in Zellen: Main.css setzt auf <a> overflow-wrap:break-word und würde damit das
   geerbte «anywhere» wieder aufheben – die Titel stehen aber fast alle in Links. */
.hermespjm td a, .hermespgm td a,
.table td a {
    overflow-wrap: anywhere;
}

.container__aside {
    hyphens: auto;
}

strong {
    color: inherit !important; /* ZH: Hervorhebung nur fett, keine Sonderfarbe */
}

container__nav {
    float: right;
    display: block;
    position: relative;
    width: 200px;
}

.hermespjm {
    text-align: left;
}

.hermespjm thead tr th, .darkblue {
    background-color: #0070b4 !important; /* ZH Blau */
    text-align: center;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
}

.hermespjm thead tr th span a, .darkblue span.pgmmodul a, .darkblue span.pgmszenario a, .darkblue span a{
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700;
}

.hermespjm thead tr th span a:hover, .darkblue span.pgmmodul a:hover, .darkblue span.pgmszenario a:hover, .darkblue span a:hover {
    color: var(--color-primary-600);
}

.hermespjm thead tr th {
    color: #ffffff;
}

.hermespjm tr td {
    color: #000000;
}

.hermespjm tr td span a {
    color: #000000;
}

.hermespjm tr td span a:hover {
    color: var(--color-primary-600);
}

.hermespjm tr:nth-child(odd), .white {
    background-color: #ffffff;
}

.hermespjm tr:nth-child(even), .blue {
    background-color: #e0e8ee !important; /* ZH Blaugrau */
}

.pjmergebnis-minimal a {
    color: #7f3da7 !important; /* ZH Violett */
}

.pjmaufgabe-entscheid a {
    color: #7f3da7 !important; /* ZH Violett */
}

.pjmergebnis-meilenstein a {
    color: #b01657 !important; /* ZH Bordeaux */
}



.hermespgm {
    text-align: left;
}

.hermespgm thead tr th, .darklila {
    background-color: #00407c !important; /* ZH Dunkelblau (PgM) */
    text-align: center;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
}

.hermespgm thead tr th span a, .darklila span.pgmmodul a {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700;
}

.hermespgm thead tr th span a:hover, .hermespgm thead tr th, .darkblue span.pgmmodul a:hover, .darkblue span.pgmszenario a:hover, .darkblue span a:hover {
    color: var(--color-primary-600);
}

.hermespgm thead tr th {
    color: #ffffff;
}

.hermespgm tr td {
    color: #000000;
}

.hermespgm tr td span a {
    color: #000000;
}

.hermespgm tr td span a:hover {
    color: var(--color-primary-600);
}

.hermespgm tr:nth-child(odd) {
    background-color: #ffffff;
}

.hermespgm tr:nth-child(even), .lila {
    background-color: #dfe4e9 !important /* ZH hell */
}

.pgmergebnis-minimal a {
    color: #7f3da7 !important; /* ZH Violett */
}

.pgmaufgabe-entscheid a {
    color: #7f3da7 !important; /* ZH Violett */
}

.pgmergebnis-meilenstein a {
    color: #b01657 !important; /* ZH Bordeaux */
}



.high {
    height: 300px;
}

.middle {
    vertical-align: middle;
}

.rotate {
    position: relative ;
}

/* Gedrehte Spaltenköpfe (Tabellen TabellePjMSzenarien/TabellePjMModule/TabellePgMModule).
   NUR das direkte Kind-Span (die Label-Komponente, z.B. span.pgmmodul / span.pgmphase) drehen:
   Als Nachfahren-Selektor (`.rotate span`) traf die Regel auch die darin verschachtelten Badges
   (.kanton-wappen-badge, AusgeblendetBadge). Deren Transform multipliziert sich dann mit dem des
   Elternteils (-90° + -90° = 180° → Wappen stand auf dem Kopf) und `position: absolute` riss sie
   aus dem Textfluss an left:50%/bottom:5px der Label-Box – das Wappen klebte nicht mehr hinter
   dem Wort, sondern sass daneben wie eine zweite Zeile (Befund Jan 2026-09-21, Kopf „Forschung"). */
.rotate > span {
    bottom: 5px ;
    left: 50% ;
    position: absolute ;
    transform: rotate( -90deg ) ;
    transform-origin: center left ;
    white-space: nowrap ;
}

/* Von hermes.zh.ch übernommene Aufzählungen (Rechtsetzung-Inhalte, Rollen, Ergebnis-Inhalt):
   <ol class="ictpark-hermes-content-hermesenumeration"> mit <li class="…element discs|circles|
   numbers|arrows|noSymbol">. Die Quelle zeichnet die Marker per ::before; ohne diese Regeln
   rendert die Liste hier als nummerierte bzw. markerlose Liste („Formatierung verschwunden"). */
/* Importierte hermes.zh.ch-Texte: Hervorhebung „hermesfett" (dort nur pink eingefärbt) hier fett. */
.hermesfett { font-weight: 700; }

/* Darstellung IDENTISCH zu den Standardlisten der Site (Main.css: main ul:not([class]) /
   .list--default: disc outside, padding-left 1.25rem, 0.5rem Abstand zwischen Einträgen).
   Vorher wurden die Marker als Zeichen ● in voller Schriftgrösse per ::before gezeichnet –
   sichtbar grösser als der native Browser-Punkt (Befund Jan 2026-09-10). Jetzt native
   list-style-Marker; nur «arrows» braucht weiterhin ein ::before. */
ol.ictpark-hermes-content-hermesenumeration,
ul.ictpark-hermes-content-hermesenumeration {
    display: block;
    margin: 0.5em 0 1em 0;
    padding-left: 1.25rem;
    list-style: none;
    counter-reset: li;
}
.ictpark-hermes-content-hermesenumerationelement {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
    counter-increment: li;
}
.ictpark-hermes-content-hermesenumerationelement + .ictpark-hermes-content-hermesenumerationelement {
    margin-top: 0.5rem;
}
.ictpark-hermes-content-hermesenumerationelement::before { content: none; }
.ictpark-hermes-content-hermesenumerationelement.discs { list-style-type: disc; }
.ictpark-hermes-content-hermesenumerationelement.circles { list-style-type: circle; }
.ictpark-hermes-content-hermesenumerationelement.numbers { list-style-type: decimal; }
.ictpark-hermes-content-hermesenumerationelement.noSymbol { list-style-type: none; }
.ictpark-hermes-content-hermesenumerationelement.arrows { list-style-type: none; }
.ictpark-hermes-content-hermesenumerationelement.arrows::before {
    content: "\2192";
    display: inline-block;
    width: 1.25rem;
    margin-left: -1.25rem;
    color: currentColor;
}
/* Der Eintragstext liegt in <div class="hermesSimpleText"> – muss neben dem Marker fliessen */
.ictpark-hermes-content-hermesenumerationelement > .hermesSimpleText { display: inline; }
.ictpark-hermes-content-hermesenumerationelement > .ictpark-hermes-content-hermesenumeration {
    margin: 0.5rem 0 0.3em 0;
}

/* E-Learning (SCORM-/Web-Kurse): Player-Rahmen im HERMES-Layout, Toolbar, Vollbild, Liste. */
.scorm-player { margin: 1.5rem 0; border: 1px solid #c2d0dd; border-radius: 6px; background: #fff; overflow: hidden; }
.scorm-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem; background: #edf5fa; border-bottom: 1px solid #c2d0dd; font-size: .9rem; }
.scorm-toolbar__title { font-weight: 700; color: #00407c; }
.scorm-toolbar__status { color: #5b6b7a; font-size: .85em; }
.scorm-toolbar__spacer { flex: 1; }
.scorm-btn { display: inline-block; padding: .35rem .8rem; border: 1px solid #0070b4; border-radius: 4px; background: #fff; color: #0070b4 !important; font: inherit; font-size: .85rem; line-height: 1.2; text-decoration: none !important; cursor: pointer; }
.scorm-btn:hover { background: #edf5fa; }
.scorm-btn--primary { background: #0070b4; color: #fff !important; }
.scorm-btn--primary:hover { background: #00407c; }
.scorm-btn--large { font-size: 1.05rem; padding: .7rem 1.4rem; }
.scorm-frame-wrap { position: relative; width: 100%; min-height: 320px; background: #fff; transition: height .2s ease; }
.scorm-frame { display: block; width: 100%; height: 100%; border: 0; }
.scorm-note { color: #5b6b7a; padding: .4rem .75rem .6rem; margin: 0; }
.scorm-player--fullscreen { border: 0; border-radius: 0; background: #000; }
.scorm-player--fullscreen .scorm-frame-wrap { height: calc(100vh - 44px) !important; min-height: 0; }
.scorm-player--fullscreen .scorm-note { display: none; }
.scorm-alert { padding: .8rem 1rem; border-left: 4px solid #e8a317; background: #fff8e1; }
.scorm-start { margin: 1.5rem 0; }
.scorm-liste__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.scorm-liste__item { margin: 0; }
.scorm-liste__meta { color: #5b6b7a; margin: .3rem 0 0; }
.scorm-badge { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.scorm-badge--started { background: #edf5fa; color: #00407c; }
.scorm-badge--done { background: #e3f6e8; color: #1a7f3c; }
.scorm-badge--failed { background: #fde8e8; color: #b00020; }
@media (max-width: 600px) {
    .scorm-frame-wrap { min-height: 240px; }
    .scorm-toolbar__title { width: 100%; }
}

/* NUR Projektübersicht (Projekt.fusion): Spaltenbreiten aus dem <colgroup> übernehmen (alle
   Phasen gleich breit), statt sie am Zellinhalt auszurichten. Achtung: die Klasse `hermespjm`
   tragen ALLE Methodentabellen (Beziehungen, Module, Ergebnisse …) – dort darf das Layout
   NICHT fest sein, sonst werden Ergebnis-/Aufgabenspalten zusammengequetscht (Befund
   Riccarda 2026-09-08). Deshalb eigene Klasse. */
table.hermespjm-projektuebersicht {
    table-layout: fixed;
    width: 100%;
}

.hermespjm-projektuebersicht-row {
    height: 1px;
}

.hermespjm-projektuebersicht-cell {
    font-size: smaller !important;
    text-align: left;
    vertical-align: top;
    padding: 5px;
    border: #ccc 1px solid;
    height: inherit;
}

.hermespjm-projektuebersicht-container {
    position: relative;
    margin-bottom: 15px;
}

.hermespjm-projektuebersicht-cell-empty {
    background-color: #ccc;
}

.hermespjm-projektuebersicht-cell-aufgabe {

}

.hermespjm-projektuebersicht-cell-ergebnisse {
    font-size: xx-small;
}

.hermespjm-projektuebersicht-cell:hover {
    background-color: rgba(0, 112, 180, 0.6); /* ZH Blau */
}

.blacklink {
    color: #000 !important;
}

.linethrough {
    text-decoration: line-through;
}

.hermespjm-projektuebersicht-cell-verantwortlicher {
    font-size: xx-small;
    text-align: right;
    vertical-align: bottom;
}

.mobile-menu {
    padding: 20px;
    font-size: x-large;
}

.modal {
    margin-top: 0 !important;
}

.btn__text-centered {
    word-break: break-word !important;
}

.container__main {
    overflow: hidden;
}

.modal-open #main-header {
    position: relative;
    z-index: -500;
}

.gcsc-find-more-on-google {display: none!important}

u {
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
}

span.tooltip {
    /* gestrichelte Unterstreichung */
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;

    /* optional: hilft, den Tooltip-Hinweis erkennbar zu machen */
    cursor: help;
}

span.tooltip-class {
    padding-left: 5px;
    padding-right: 5px;
    background-color: #edf5fa; /* ZH Softblau */
}


ul.badgelist {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 600px;
}

ul.badgelist li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

ul.badgelist li:last-child {
    border-bottom: 0px;
}

.badgelistitem-text {
    flex: 1 1 200px;
    margin-right: 10px;
}

.badgelistitem-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 100px;
}

.badgelistitem-badge {
    padding: 4px 10px;
    background-color: #0070b4; /* ZH Blau */
    color: white;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
}

/* Phasen-Abdeckung der Ergebnisse in der Szenarioübersicht (Segmentbalken / Mini-Gantt).
   Ein Segment je Phase der Aufgaben-Spanne; gefüllt = Ergebnis deckt diese Phase ab.
   Deckt ein Ergebnis nicht alle Phasen ab, werden die fehlenden Segmente getönt hervorgehoben. */
.hermespjm-phasenbalken {
    display: flex;
    gap: 1px;
    /* Balken von Zellenrand zu Zellenrand, damit die Segmente exakt auf den Spaltengrenzen
       liegen: die Liste (ul, 20px Einzug) und die Zelle (5px Innenabstand) werden links
       herausgerechnet, rechts der Zellen-Innenabstand. Segmente = gleich breit = Spalten
       (colgroup, table-layout: fixed). */
    width: calc(100% + 30px);
    margin: 2px 0 5px -25px;
    height: 5px;
}
.hermespjm-phasenbalken .seg {
    flex: 1 1 0;
    border-radius: 1px;
}
.hermespjm-phasenbalken .seg--an { background-color: #0070b4; }
.hermespjm-phasenbalken .seg--aus { background-color: #d3dae0; }
.hermespjm-phasenbalken--teil .seg--aus { background-color: #efc4b4; }

/* Rollen-Partner-Matrix: X-Markierungen der Spalten Anwender/Ersteller/Betreiber
   einheitlich zentrieren (Kopf- und Steuerungs-/Führungs-/Ausführungszeilen sind
   bereits via .darkblue/thead zentriert; hier kommen die Datenzeilen dazu). */
.hermespjm-rollenmatrix td:nth-child(n+3) { text-align: center; }

/* Redaktionelle Inline-Bedienelemente (nur im Backend-Edit-Modus gerendert). */
.hermes-pflege-toggle {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0 0.4em;
    font-size: 0.75em;
    line-height: 1.6;
    border: 1px solid #b0b8c0;
    border-radius: 3px;
    background: #eef1f4;
    color: #4a5560 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}
.hermes-pflege-toggle--an {
    border-color: #0070b4;
    background: #0070b4;
    color: #ffffff !important;
}
/* Entfernen-Schaltfläche (Stufe 3) */
.hermes-pflege-remove {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0 0.45em;
    font-size: 0.8em;
    line-height: 1.5;
    border: 1px solid #d4a0a0;
    border-radius: 3px;
    background: #fbeaea;
    color: #b33 !important;
    text-decoration: none !important;
    cursor: pointer;
}
.hermes-pflege-remove:hover {
    background: #b33;
    color: #fff !important;
    border-color: #b33;
}
/* Einzel-/Mehrfach-Auswahl (Stufe 1 Kategorie, Stufe 2 Referenzen) */
.hermes-pflege-select,
.hermes-pflege-ref select {
    font-size: 0.8em;
    padding: 2px 4px;
    border: 1px solid #b0b8c0;
    border-radius: 3px;
    background: #fff;
    color: #333;
}
.hermes-pflege-ref {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin: 0.3em 0;
    vertical-align: top;
}
.hermes-pflege-ref__label {
    font-size: 0.75em;
    color: #4a5560;
    font-weight: 600;
}
/* Phasen-X-Umschalter (Stufe 2) */
.hermes-pflege-phase {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 3px;
    text-align: center;
    font-weight: 700;
    text-decoration: none !important;
    color: #99a2ab !important;
    border: 1px solid #d2d8de;
    border-radius: 3px;
    cursor: pointer;
}
.hermes-pflege-phase--an {
    background: #0070b4;
    color: #ffffff !important;
    border-color: #0070b4;
}
/* Nach-oben-Verschieben (Stufe 3) */
.hermes-pflege-move {
    display: inline-block;
    margin-left: 0.3em;
    padding: 0 0.4em;
    border: 1px solid #b0b8c0;
    border-radius: 3px;
    background: #eef1f4;
    color: #4a5560 !important;
    text-decoration: none !important;
    cursor: pointer;
}
.hermes-pflege-move:hover {
    background: #0070b4;
    color: #ffffff !important;
    border-color: #0070b4;
}

/* Methodenabbildung: Lupe + Vollbild-Overlay */
.methodenabbildung__grafik-wrap {
    position: relative;
    margin: 0;
}
/* Abbildung füllt die volle Inhaltsspalte (die Seite rendert ohne rechte
   Navigationsspalte, siehe Presentation/Layout/Page.fusion) – bewusst KEIN
   Viewport-Ausbruch: randlos war zu gross (2026-08-27), und so fluchten Grafik
   und Bildunterschrift (figcaption) mit dem Fliesstext. */
.methodenabbildung__grafik {
    width: 100%;
    /* Schmale Viewports: SVG hat dort eine feste Mindestbreite (siehe KantonZuerich.css)
       und wird im Grafik-Container horizontal gescrollt. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.methodenabbildung__grafik svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Nur für Screenreader sichtbar (KI-Bildbeschreibung) – robust, unabhängig von Tailwind. */
.methodenabbildung__sr-beschreibung {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.methodenabbildung__lupe {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #c5c5c5;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #0070b4;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.methodenabbildung__lupe:hover {
    background: #0070b4;
    color: #ffffff;
    border-color: #0070b4;
}
.methodenabbildung__lupe-icon {
    display: block;
}
/* Vollbild (Jan 2026-09-10: «echtes Fullscreen, alles was geht»): die Lupe fordert per
   Fullscreen-API den ganzen Bildschirm an (Methodenabbildung.js); Browser ohne API (iPhone)
   bekommen dieselbe Optik als fixiertes Overlay. In beiden Fällen: weisse Fläche über den
   gesamten Viewport, das SVG füllt ihn maximal (Breite UND Höhe 100 %, Seitenverhältnis bleibt
   durch preserveAspectRatio erhalten), zusätzlich Mausrad-/Pinch-Zoom und Ziehen (JS). */
.methodenabbildung__grafik-wrap--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    margin: 0;
    padding: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: methodenabbildung-fade-in 0.18s ease-out;
}
.methodenabbildung__grafik-wrap--fullscreen:fullscreen,
.methodenabbildung__grafik-wrap--fullscreen:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
}
@keyframes methodenabbildung-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.methodenabbildung__grafik-wrap--fullscreen .methodenabbildung__grafik {
    background: #ffffff;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    animation: methodenabbildung-zoom-in 0.34s cubic-bezier(0.22, 1.18, 0.36, 1);
}
.methodenabbildung__grafik-wrap--fullscreen .methodenabbildung__grafik.methodenabbildung__grafik--dragging {
    cursor: grabbing;
}
@keyframes methodenabbildung-zoom-in {
    from { transform: scale(0.82); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* Abbildung so gross wie der Bildschirm: Breite und Höhe 100 %, das SVG passt sich ein */
.methodenabbildung__grafik-wrap--fullscreen .methodenabbildung__grafik svg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    cursor: inherit;
    transform-origin: 0 0;
    will-change: transform;
}
.methodenabbildung__grafik-wrap--fullscreen .methodenabbildung__lupe {
    position: fixed;
    top: 16px;
    right: 16px;
    background: #ffffff;
    z-index: 3;
}
/* Im Vollbild nur die Grafik: Bildunterschrift weg, Leo-Widget (FAB/Panel) weg */
.methodenabbildung__grafik-wrap--fullscreen .methodenabbildung__untertitel {
    display: none;
}
html.methodenabbildung-noscroll .hc-fab,
html.methodenabbildung-noscroll .hc-panel {
    display: none !important;
}
/* Kurzer Hinweis unten links (Zoom/Ziehen/Escape) – blendet nach dem Öffnen aus */
.methodenabbildung__hilfe {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(0, 64, 124, 0.85);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    pointer-events: none;
    animation: methodenabbildung-hilfe 6s ease-in forwards;
}
@keyframes methodenabbildung-hilfe {
    0% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
html.methodenabbildung-noscroll {
    overflow: hidden;
}
/* Sticky L2-Navigation UND den (klebenden) blauen Haupt-Header ausblenden, solange die
   Vollbild-Lightbox offen ist – sonst liegen sie über der Vollbild-Grafik. */
html.methodenabbildung-noscroll .navigation-menu-container,
html.methodenabbildung-noscroll #main-header {
    display: none;
}

/* L2-Navigation: beim Scrollen oben am Fenster fixieren */
.navigation-menu-container--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    animation: navigation-slide-down 0.22s ease-out;
}
@keyframes navigation-slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Content.VorlagenListe: zweispaltige Liste (spaltenweise A–Z), mobil einspaltig. */
.vorlagen-liste--zweispaltig {
    column-count: 2;
    column-gap: 2.5rem;
}
.vorlagen-liste--zweispaltig > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
@media (max-width: 768px) {
    .vorlagen-liste--zweispaltig {
        column-count: 1;
    }
}

/* Modul-Kacheln auf der Downloads-Seite (Content.DownloadAlleModulePjMVorlagen):
   dieselben Abstaende wie die Vorlagenliste darunter - horizontal die 2.5rem aus
   .vorlagen-liste--zweispaltig, vertikal die 0.5rem, die .list--default zwischen
   zwei <li> setzt. Das responsive .gap--responsive des Rasters (1.25rem bis 4rem)
   wirkte daneben deutlich luftiger. */
.vorlagen-modulkacheln {
    column-gap: 2.5rem;
    row-gap: 0.5rem;
}

/* Interne Volltextsuche: Suchfeld + Button im ZH-Stil (Klassen button--base/input--base
   sind im Designsystem nicht definiert, daher hier explizit). */
.hermes-search__form .search__group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.hermes-search__form .form__group__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.hermes-search__form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hermes-search__form input[type="search"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    line-height: 1.4;
    border: 1px solid #b3c2cf;
    border-radius: 2px;
    background: #fff;
    color: #1a1a1a;
    box-sizing: border-box;
}
.hermes-search__form input[type="search"]:focus {
    outline: none;
    border-color: #0070b4;
    box-shadow: 0 0 0 3px rgba(0, 112, 180, 0.18);
}
.hermes-search__submit {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.85rem 1.75rem;
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
    background: #0070b4;
    border: 1px solid #0070b4;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hermes-search__submit:hover,
.hermes-search__submit:focus {
    background: #00578c;
    border-color: #00578c;
}
@media (max-width: 600px) {
    .hermes-search__form .search__group {
        flex-direction: column;
    }
    .hermes-search__submit {
        padding: 0.85rem 1rem;
    }
}

/* Dynamische Phasengrafik (Aufgaben-Seiten, Modus „automatisch"): Inline-SVG skaliert wie das Bild */
.phasengrafik {
    margin: 0;
}
.phasengrafik svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1118px;
}

/* Beziehungstabellen (Modul | Aufgabe | Verantwortung | Ergebnis | Beteiligt): Soll-Spalten-
   breiten als Prozent-Hinweis. Ohne Vorgabe verteilt der Browser die freie Breite nach dem
   längsten Zelleninhalt – die Beteiligt-Spalte bekam dann fast alles und die übrigen Spalten
   wurden auf Mindestbreite gequetscht (viel Silbentrennung). (2026-09-14) */
.hermespjm th[data-col="modul"] { width: 14%; }
.hermespjm th[data-col="aufgabe"] { width: 24%; }
.hermespjm th[data-col="verantwortung"] { width: 17%; }
.hermespjm th[data-col="ergebnis"] { width: 21%; }
.hermespjm th[data-col="beteiligt"] { width: 24%; }

/* Projektübersicht-Plugin mit «Methodenelemente nicht verlinken» (Property keineLinks):
   die <a> bleiben im Markup (gleiche Struktur/Farben), nur ohne href → wie Text darstellen. */
.hermespjm-projektuebersicht a:not([href]) {
    text-decoration: none;
    cursor: default;
}
/* … und ohne Hover-Effekt (Farbwechsel/Unterstreichung der Link-Regeln oben bzw. aus Main.css) */
.hermespjm-projektuebersicht a:not([href]):hover,
.hermespjm-projektuebersicht a:not([href]):focus {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Checkliste (Content.Checkliste, 2026-09-15): Ergebnis | Prüfkriterium | Bewertung (leeres
   Kästchen). Spaltenbreiten via <colgroup> 22/63/15 %; Kästchen ~1em, druckt schwarz. */
.hermes-checkliste__tabelle { table-layout: fixed; width: 100%; }
.hermes-checkliste__tabelle th:last-child,
.hermes-checkliste__bewertung { text-align: center; vertical-align: middle; }
.hermes-checkliste__ergebnis { font-weight: 600; }
.hermes-checkliste__box {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    background: #ffffff;
    vertical-align: -0.15em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.hermes-checkliste__einleitung { margin: 0 0 .6rem; }
.hermes-checkliste__hinweis { margin: .5rem 0 0; font-size: .9em; color: #5b6b7a; }

/* Buch-Download (Content.DownloadBuch, 2026-09-15): Liste der generierten Buch-PDFs. */
.hermes-buchdownload__liste { list-style: none; margin: 0; padding: 0; }
.hermes-buchdownload__eintrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .45rem 0; border-bottom: 1px solid #e2e6ea; }
.hermes-buchdownload__eintrag:last-child { border-bottom: 0; }
.hermes-buchdownload__link { font-weight: 600; text-decoration: none; }
.hermes-buchdownload__link i { margin-right: .4rem; color: #b3261e; }
.hermes-buchdownload__meta { font-size: .9em; color: #5b6b7a; }
.hermes-buchdownload__leer { font-size: .9em; color: #7a4b00; background: #fff4e5; padding: .5rem .75rem; border-radius: 4px; }