/* Theme Name: bpmn.ch Theme URI: https://bpmn.ch Author: ELCA Informatik AG — BPM Academy Description: Block-Theme für bpmn.ch. Löst Divi ab. Einsprachig (Deutsch), Übersetzung weiterhin über GTranslate. Version: 1.0.0 Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 License: Proprietär — Eigentum der Betreiber von bpmn.ch Text Domain: bpmn-ch Tags: block-theme, business, education */ /* * Gestaltung steckt in theme.json, nicht hier. Diese Datei enthält nur, was * sich über theme.json nicht ausdrücken lässt. */ /* Fokus sichtbar halten — mehrere der abgelösten Plugins hatten den Fokusring entfernt, was Tastaturbedienung praktisch verunmöglicht. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; } /* Sprungmarke für Screenreader und Tastatur. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--brand); color: #fff; text-decoration: none; } .skip-link:focus { left: 0; } /* Icon-Schriften dürfen nicht vorgelesen werden. Auf der alten Site landeten dadurch einzelne Buchstaben wie "U", "a", "M" im Screenreader. */ [class^="icon-"]::before, [class*=" icon-"]::before, .fa::before, .fas::before { speak: never; } /* ----------------------------------------------------------------- Konto-Bereich im Kopfbereich (Shortcode bpmn_konto_menu). Bewusst ohne JavaScript: details/summary ist tastaturbedienbar und wird von Screenreadern als aufklappbarer Bereich angekündigt. ----------------------------------------------------------------- */ .bpmn-login-link, .bpmn-konto > summary { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 4px; font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none; color: var(--wp--preset--color--ink); white-space: nowrap; cursor: pointer; } .bpmn-login-link:hover, .bpmn-konto > summary:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); } .bpmn-konto { position: relative; } .bpmn-konto > summary { list-style: none; } .bpmn-konto > summary::-webkit-details-marker { display: none; } .bpmn-konto > summary::after { content: " ▾"; } .bpmn-konto ul { position: absolute; right: 0; z-index: 50; min-width: 14rem; margin: 0.35rem 0 0; padding: 0.35rem 0; list-style: none; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .bpmn-konto li a { display: block; padding: 0.5rem 1rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink); text-decoration: none; } .bpmn-konto li a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--brand); } /* ------------------------------------------------------------------------- * Kopfbereich nach dem Vorbild von elca.ch. * * Am Original gemessen, nicht geschätzt: Navigationspunkte in Halbfett ohne * Grossbuchstaben, der gewählte Punkt trägt einen roten Unterstrich von 2px * mit 4px Abstand, die Suche hat keinen Kasten sondern nur eine Grundlinie, * und der Kopf selbst führt keine Trennlinie. * ---------------------------------------------------------------------- */ /* Am Original gemessen: 16px, Halbfett, Farbe #414344 — ein weicheres Grau als unser Textschwarz, das den Kopfbereich merklich leichter macht. */ .site-header .wp-block-navigation-item__content { white-space: nowrap; font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--dark); text-decoration: none; } /* Der gewählte Punkt und der überfahrene sehen gleich aus — das Menü zeigt damit dieselbe Rückmeldung, egal ob man schon dort ist oder gleich hingeht. WordPress vergibt die current-Klassen für Seiten und Beiträge getrennt. */ .site-header .wp-block-navigation-item__content:hover, .site-header .wp-block-navigation-item__content:focus-visible, .site-header .wp-block-navigation-item__content.ist-aktuell, .site-header .wp-block-navigation-item__content.ist-vorfahre { text-decoration: underline; text-decoration-color: var(--wp--preset--color--brand-dark); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* „Demo anfragen" brach zweizeilig um und zog den Kopf in die Höhe. Der Knopf ist etwas flacher als im Fliesstext, sonst überragt er die Zeile. */ .site-header .kopf-aktion .wp-block-button__link { white-space: nowrap; padding: 0.45rem 1.4rem; } /* Suche als Feld mit blosser Grundlinie und Lupe darin — wie bei ELCA. „Über uns" brach ausserdem mitten im Punkt um: das flexWrap:nowrap der Leiste verhindert nur Umbrüche zwischen Punkten, nicht innerhalb eines. Kein Kasten, kein farbiger Knopf: im Kopfbereich soll genau eine Fläche rot sein, und das ist „Demo anfragen". */ .site-header .wp-block-search__inside-wrapper { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); border-radius: 0; background: transparent; padding: 0; } .site-header .wp-block-search__input { border: 0; background: transparent; padding: 0.3rem 0.25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink); } .site-header .wp-block-search__input:focus { outline: 0; } .site-header .wp-block-search__inside-wrapper:focus-within { border-bottom-color: var(--wp--preset--color--brand); } .site-header .wp-block-search__button { background-color: transparent; color: var(--wp--preset--color--ink-muted); border: 0; border-radius: 0; padding: 0.3rem 0.25rem; } .site-header .wp-block-search__button:hover, .site-header .wp-block-search__button:focus-visible { color: var(--wp--preset--color--brand); } /* Das Logo darf nicht schrumpfen — sonst zieht es sich zusammen, statt dass die Zeile umbricht. Der Titel daneben darf nachgeben. */ .site-header .wp-block-site-logo { flex-shrink: 0; } /* ------------------------------------------------------------------------- * Schmale Schirme. * * Der Kopf trägt Marke, Titel, Menü, Handlungsknopf, Suche und Konto. Das * passt nebeneinander erst ab etwa 1250px. Darunter fällt weg, was am * ehesten verzichtbar ist — zuerst die Suche, dann der Titel neben dem Logo. * ---------------------------------------------------------------------- */ @media (max-width: 1250px) { .site-header .wp-block-search { display: none; } /* WordPress klappt das Menü erst unter 600px zum Menüknopf zusammen. Dazwischen stehen fünf Punkte ausgeschrieben da und liefen über den rechten Rand hinaus — hier dürfen sie umbrechen. */ .site-header .wp-block-navigation__container { flex-wrap: wrap; justify-content: flex-end; } } @media (max-width: 900px) { .site-header .wp-block-site-title { display: none; } } /* Auf dem Telefon rutschten Menüknopf, Handlungsknopf und Konto in drei Zeilen. Enger gesetzt passen sie nebeneinander. */ @media (max-width: 600px) { .site-header .wp-block-group.is-layout-flex { gap: 0.6rem; } .site-header .kopf-aktion .wp-block-button__link { padding: 0.4rem 0.9rem; } .site-header .bpmn-login-link, .site-header .bpmn-konto > summary { padding: 0.4rem 0.8rem; } } /* ------------------------------------------------------------------------- * Untermenüs als Balken über die volle Breite statt als schwebender Kasten * — so öffnet elca.ch. * * WordPress setzt den Listenpunkt auf position:relative, wodurch das Untermenü * an ihm klebt. Wird er auf static gesetzt, wird der Kopfbereich zum Bezug, * und das Untermenü kann sich über dessen volle Breite legen. * ---------------------------------------------------------------------- */ .site-header { position: relative; } /* Der Selektor ist bewusst so lang: WordPress' eigenes Block-CSS adressiert das Untermenü mit „.wp-block-navigation .has-child .wp-block-navigation__ submenu-container" — drei Klassen. Ein kürzerer Selektor verliert, und die Regeln blieben wirkungslos, obwohl sie im Stylesheet stehen. */ .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { position: absolute; top: 100%; left: 0; right: 0; width: 100%; min-width: 0; /* Der Core beschneidet das Untermenü mit overflow:hidden auf die Höhe des Kastens, den er vorsieht. Als Balken über die volle Breite muss es sich nach dem Inhalt richten dürfen. */ height: auto; max-height: none; overflow: visible; /* Weiss auf Weiss: Ohne Unterkante ging der Balken in den Seiteninhalt über. Die Linie unten zieht die Grenze, der Schatten hebt den Balken von der Seite ab — deutlich kräftiger als zuvor, denn er hat gegen eine weisse Fläche zu bestehen. */ border: 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); border-radius: 0; background-color: var(--wp--preset--color--base); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); /* Höchstens vier Einträge je Spalte, danach beginnt eine neue — wie bei ELCA. Bewusst ein Raster und keine umbrechende Flexbox: die bräuchte eine feste Höhe zum Umbrechen, sonst landet jeder Eintrag in einer eigenen Spalte. Kurze Untermenüs bleiben so einspaltig. Der Inhalt beginnt an einer festen Stelle, unabhängig davon, welcher Menüpunkt geöffnet wurde — so hält es elca.ch auch. Ausgerichtet auf die Inhaltsspalte der Seite, damit die Einträge auf derselben Kante beginnen wie der Fliesstext darunter. */ display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; gap: 0.15rem 4rem; box-sizing: border-box; padding: 2rem 1.5rem; padding-left: max(1.5rem, calc((100% - 1140px) / 2)); } /* Zwischen Listenpunkt und Kopfbereich liegen vier weitere Elemente, die WordPress auf position:relative setzt — Navigation, Aufklapp-Behälter, Dialog und Liste. Solange auch nur eines davon positioniert ist, bezieht sich das Untermenü darauf und bleibt schmal. Auf dem Mobilgerät müssen sie positioniert bleiben, dort ist der Behälter die Überlagerung. Die Grenze ist genau 600px: WordPress zeigt den Menüknopf unterhalb davon, ab 600px steht das Menü ausgeschrieben. Bei 601px blieb genau ein Pixel übrig, in dem das Menü sichtbar war, der Balken sich aber noch am Listenpunkt festhielt und rechts hinauslief. */ @media (min-width: 600px) { .site-header nav.wp-block-navigation, .site-header .wp-block-navigation__responsive-container:not(.is-menu-open), .site-header .wp-block-navigation__responsive-dialog, .site-header .wp-block-navigation__container, .site-header .wp-block-navigation-submenu { position: static; } } /* Die Einträge im Balken sind bewusst leichter als die Hauptpunkte darüber: 16px in Gewicht 400 bei 24px Zeilenhöhe, gemessen an elca.ch. */ .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.35rem 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--wp--preset--color--dark); } .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand); } /* Das Kontomenü folgt der Pillenform der Knöpfe. */ .site-header .bpmn-login-link, .site-header .bpmn-konto > summary { border-radius: 9999px; padding: 0.45rem 1.2rem; } /* Bilder skalieren grundsätzlich mit. */ img, svg, video { max-width: 100%; height: auto; } /* Schmale Schirme: der Balken wird einspaltig. Diese Regel muss NACH der Grundregel stehen — sie ist gleich spezifisch, und bei Gleichstand entscheidet die Reihenfolge. Weiter oben platziert blieb sie wirkungslos. */ @media (max-width: 900px) { .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; padding: 1.25rem 1.5rem; } } /* Einblenden nach unten. WordPress schaltet den Balken über visibility und opacity — beides ist übergangsfähig, das Verschieben kommt dazu. Wer reduzierte Bewegung eingestellt hat, bekommt den Balken ohne Bewegung. */ .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { transform: translateY(-0.5rem); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; } /* Kein :hover — der Balken öffnet ausschliesslich auf Klick, und mit der Tastatur über Enter oder Leertaste; beides setzt aria-expanded. Kein :focus-within: Das wäre schon wahr, sobald der Hauptpunkt bloss den Fokus trägt, und der Balken bleibt bei openSubmenusOnClick trotzdem zu. */ .site-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { transform: none; transition: none; } } /* ------------------------------------------------------------------------- * Abdunkeln, solange ein Untermenü offen ist. * * Der Balken ist weiss, der Seiteninhalt darunter ebenfalls — die Grenze war * kaum zu erkennen. Statt den Balken lauter zu machen, tritt die Seite * zurück: Sie liegt hinter einem dunklen Schleier, solange das Menü offen * ist. Das ist derselbe Griff wie bei einem Dialog und sagt ohne Worte, dass * gerade das Menü an der Reihe ist. * * Umgesetzt über :has() am Kopfbereich — der Zustand steht bereits im * Dokument, WordPress setzt aria-expanded="true" am geöffneten Hauptpunkt. * Kein eigenes JavaScript nötig. Browser ohne :has() zeigen einfach keinen * Schleier; der Balken bleibt bedienbar. * ---------------------------------------------------------------------- */ /* Der Schleier hängt bewusst am body und NICHT am Kopfbereich. Als dessen ::after wäre er ein positioniertes Kind, und um die Kopfzeile darüber zu halten, hätte deren Gruppe position:relative gebraucht. Genau das macht die Gruppe zum Bezugspunkt des Balkens — der zog sich damit auf die Inhaltsbreite von 1400px zusammen, statt randlos zu stehen. */ body::after { content: ""; position: fixed; inset: 0; z-index: 5; background: rgba(29, 29, 27, 0.45); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms; /* Der Schleier fängt keine Klicks ab: Ein Klick daneben soll das Menü schliessen und nicht ins Leere gehen. Das erledigt WordPress' eigene Behandlung des Klicks ausserhalb. */ pointer-events: none; } /* Allein aria-expanded, bewusst ohne :focus-within. Mit openSubmenusOnClick öffnet der Balken ausschliesslich über diesen Zustand — die Tastatur löst ihn mit Enter oder Leertaste genauso aus wie die Maus mit einem Klick. :focus-within wäre dagegen schon wahr, sobald der Hauptpunkt bloss den Fokus trägt: Nach dem zweiten Klick war der Balken zu, der Schleier aber blieb liegen. */ body:has(.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"])::after { opacity: 1; visibility: visible; } /* Der Kopfbereich liegt über dem Schleier — mit ihm der aufgeklappte Balken. Er ist ohnehin position:relative (Bezugspunkt des Balkens); die Stapelnummer kommt hier dazu. */ .site-header { z-index: 10; } /* Auf dem Telefon ist das Menü bereits eine Überlagerung mit eigenem Grund. Ein zweiter Schleier darunter brächte nichts. */ @media (max-width: 599px) { body::after { display: none; } } @media (prefers-reduced-motion: reduce) { body::after { transition: none; } } /* Die Marke darf zwei Zeilen brauchen. Einzeilig belegt sie 190px, und mit der variablen Schrift — deren Halbfett breiter läuft als der bisherige statische Schnitt — reichte der Platz im Kopf nicht mehr für eine Zeile. */ .site-header .wp-block-site-title { max-width: 9rem; white-space: normal; } /* ------------------------------------------------------------------------- * Menü als Überlagerung (Telefon, unter 600px). * * Dort stehen die Untermenüs eingerückt im Fluss statt als Balken. Ohne diese * Regeln schleppten sie die Balken-Gestaltung mit: weisse Fläche, Schatten und * Trennlinie ergaben einen Kasten, der mitten in der Breite endet. * ---------------------------------------------------------------------- */ .site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static; display: block; width: auto; background: transparent; border: 0; box-shadow: none; padding: 0 0 0.5rem 1rem; transform: none; } /* ------------------------------------------------------------------------- * Abbildungen in den Beiträgen. * * Die Zeichnungen sind breiter angelegt als die Textspalte — in 760px * geschrumpft wären ihre Beschriftungen nicht mehr lesbar. Sie laufen deshalb * über die breite Spalte und bekommen etwas Luft nach oben und unten. * ---------------------------------------------------------------------- */ .artikel-diagramm { margin: var(--wp--preset--spacing--40) 0; } .artikel-diagramm svg { max-width: 100%; } /* ------------------------------------------------------------------------- * Auftaktband der Startseite. * * Es beginnt unmittelbar unter dem Menü, ohne weissen Zwischenraum — wie bei * elca.ch, wo der farbige Hero direkt an den Kopfbereich anschliesst. Deshalb * kein oberer Innenabstand und keine Aussenabstände darüber. * ---------------------------------------------------------------------- */ .kreis-band.ist-auftakt { margin-top: 0; padding-top: var(--wp--preset--spacing--40); } .home #main > .kreis-band.ist-auftakt:first-child { margin-top: 0; } /* ------------------------------------------------------------------------- * Sprachumschalter. * * Solange die Einwilligung fehlt, steht an seiner Stelle ein Knopf, der die * Einwilligungsabfrage öffnet — statt einer unerklärlichen Lücke. * ---------------------------------------------------------------------- */ .site-header .sprachwahl { display: flex; align-items: center; } .site-header .sprachwahl .gtranslate_wrapper { display: flex; align-items: center; gap: 0.35rem; } .site-header .sprachwahl-gesperrt { border: 1px solid var(--wp--preset--color--line); background: transparent; color: var(--wp--preset--color--dark); font-family: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 9999px; cursor: pointer; white-space: nowrap; } .site-header .sprachwahl-gesperrt:hover, .site-header .sprachwahl-gesperrt:focus-visible { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); } /* ------------------------------------------------------------------------- * Die eigenen PHP-Dienste: Student Area, Trainer Area, Zertifikatsliste. * * Deren Ausgabe stammt aus der Divi-Zeit. Die Knöpfe tragen bis heute * Divi-Klassen („et_pb_button"), und mit Divi ist auch deren Aussehen * verschwunden — übrig blieben graue Systemknöpfe mitten in einer Site, die * überall sonst rote Pillen zeigt. Nachgerüstet wird hier und nicht im * Plugin: Die Klassen stehen an über dreissig Stellen in drei Plugins, und * das Aussehen gehört ohnehin ins Theme. * ---------------------------------------------------------------------- */ /* Datentabellen mit sechs Spalten brauchen mehr als den Lesebereich von 760px. Dort brachen Schlüssel („H53EJI-QBR7NB-…") und Datumsfelder („2029-03-03") mitten im Wert um. */ .bpmn-dienstseite .entry-content { max-width: var(--wp--style--global--wide-size); } /* Der zweite Teil, ohne den der erste wirkungslos bleibt: Bei „constrained" bekommt zusätzlich jedes direkte Kind die Lesebreite verpasst. Die Tabelle steckt in einem
, und das blieb bei 760px stehen, während der Rahmen ringsum schon 1140px breit war. */ .bpmn-dienstseite .entry-content > * { max-width: 100%; } .bpmn-dienstseite .entry-content table { font-size: 0.9375rem; border-collapse: collapse; } /* Nur senkrecht polstern, waagerecht nicht. Die 8px rechts je Zelle summierten sich in der Klassenraum-Tabelle über sechs Spalten zu 48px — genug, um sie 16px breiter als den Inhaltsbereich zu machen. Der Löschknopf der letzten Spalte wurde dadurch angeschnitten. Die Spaltenbreiten stehen ohnehin in den Tabellen selbst; der Abstand fehlt nicht. */ .bpmn-dienstseite .entry-content th, .bpmn-dienstseite .entry-content td { vertical-align: top; padding: 0.35rem 0; } /* Auf schmalen Schirmen ist keine Breite der Welt genug: Sechs Spalten passen nicht auf ein Telefon. Dann schiebt sich der Inhalt innerhalb seiner Spalte zur Seite, statt die ganze Seite zu sprengen. Bewusst am Inhaltsbereich und nicht am Formular: Die Tabellen stehen mal in einem Formular (Student Area), mal frei daneben (Übersicht der Klassenraum- Schulungen). Am Formular allein blieben die freien Tabellen ungefasst. */ .bpmn-dienstseite .entry-content { overflow-x: auto; } /* Die Knöpfe. Dieselben Werte wie in theme.json unter elements.button — dort greift nur, was WordPress selbst rendert. */ .bpmn-dienstseite .entry-content .et_pb_button, .bpmn-dienstseite .entry-content .bpme_et_pb_button, .bpmn-dienstseite .entry-content .button-default, .bpmn-dienstseite .entry-content input[type="submit"], .bpmn-dienstseite .entry-content button[type="submit"] { /* inline-flex mit gap statt inline-block: So steht der Abstand zwischen Symbol und Beschriftung genau dann, wenn beides da ist. Bei Knöpfen mit blossem Symbol entfällt er von selbst. */ display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; background: var(--wp--preset--color--brand); color: #fff; border: 0; border-radius: 9999px; padding: 0.6rem 1.75rem; font-family: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .bpmn-dienstseite .entry-content .et_pb_button:hover, .bpmn-dienstseite .entry-content .bpme_et_pb_button:hover, .bpmn-dienstseite .entry-content .button-default:hover, .bpmn-dienstseite .entry-content input[type="submit"]:hover, .bpmn-dienstseite .entry-content button[type="submit"]:hover, .bpmn-dienstseite .entry-content .et_pb_button:focus-visible, .bpmn-dienstseite .entry-content .bpme_et_pb_button:focus-visible, .bpmn-dienstseite .entry-content .button-default:focus-visible, .bpmn-dienstseite .entry-content input[type="submit"]:focus-visible, .bpmn-dienstseite .entry-content button[type="submit"]:focus-visible { background: var(--wp--preset--color--brand-dark); color: #fff; } /* Mehrere Knöpfe nebeneinander brauchen Luft; im Quelltext stehen sie ohne Abstand direkt hintereinander. */ .bpmn-dienstseite .entry-content .et_pb_button + .et_pb_button, .bpmn-dienstseite .entry-content .bpme_et_pb_button + .bpme_et_pb_button { margin-left: 0.5rem; } /* Die Eingabefelder daneben: gleiche Höhe, gleiche Sprache. Die Plugins setzen teils font-size direkt im style-Attribut — das bleibt unangetastet, Rahmen und Form kommen von hier. */ .bpmn-dienstseite .entry-content input[type="text"], .bpmn-dienstseite .entry-content input[type="email"], .bpmn-dienstseite .entry-content input[type="password"], .bpmn-dienstseite .entry-content select { border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.9375rem; background: #fff; color: var(--wp--preset--color--ink); } .bpmn-dienstseite .entry-content input[type="text"]:focus, .bpmn-dienstseite .entry-content input[type="email"]:focus, .bpmn-dienstseite .entry-content input[type="password"]:focus { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 1px; } /* Die dunkle Variante — im Quelltext für „Bearbeiten" und die Kopfzeile der Klassenraum-Verwaltung. Damit bleibt Rot dem vorbehalten, was etwas auslöst oder löscht; Bearbeiten steht daneben ruhig. Der Elementname im Selektor ist kein Zierat: Ohne ihn schlägt die allgemeine Regel für button[type="submit"] diese hier — sie ist um ein Attribut spezifischer, und beide Knöpfe wären rot. */ .bpmn-dienstseite .entry-content button.bpme_et_pb_button_black, .bpmn-dienstseite .entry-content input.bpme_et_pb_button_black, .bpmn-dienstseite .entry-content a.bpme_et_pb_button_black { background: var(--wp--preset--color--dark); } .bpmn-dienstseite .entry-content button.bpme_et_pb_button_black:hover, .bpmn-dienstseite .entry-content button.bpme_et_pb_button_black:focus-visible, .bpmn-dienstseite .entry-content input.bpme_et_pb_button_black:hover, .bpmn-dienstseite .entry-content input.bpme_et_pb_button_black:focus-visible, .bpmn-dienstseite .entry-content a.bpme_et_pb_button_black:hover, .bpmn-dienstseite .entry-content a.bpme_et_pb_button_black:focus-visible { background: var(--wp--preset--color--ink); } /* ------------------------------------------------------------------------- * Die Symbole auf den Knöpfen der Trainer Area. * * Der Quelltext setzt und dergleichen. Font Awesome * kam von Divi; ohne Divi blieben die Symbole unsichtbar — die Knöpfe für * Anlegen, Bearbeiten und Löschen waren leere Flächen ohne jeden Hinweis * darauf, was sie tun. * * Nachgezeichnet als Masken: Die Form steckt im Stylesheet, die Farbe kommt * von currentColor. Kein Nachladen einer fremden Schrift, keine Lizenzfrage, * ein paar hundert Byte statt achtzig Kilobyte. * ---------------------------------------------------------------------- */ .bpmn-dienstseite .fa { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; /* Der Rückfall ist eine leere Maske und damit unsichtbar — nicht „none". Ohne Maske bliebe die volle Fläche stehen, und ein Symbol, das hier noch nicht nachgezeichnet ist, erschiene als roter Klotz. Genau das geschah mit „fa-graduation-cap" in der Student Area. */ -webkit-mask: var(--zeichen, url("data:image/svg+xml,")) center / contain no-repeat; mask: var(--zeichen, url("data:image/svg+xml,")) center / contain no-repeat; } /* Knöpfe, die nur ein Symbol tragen, brauchen keine Pillenbreite. */ .bpmn-dienstseite .entry-content button:has(> .fa:only-child) { padding: 0.45rem 0.7rem; } .bpmn-dienstseite .fa-plus { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-edit { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-trash { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-save { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-envelope { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-paper-plane{ --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-arrow-left { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-sign-out { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-file-text-o{ --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-upload { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-download { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-cloud-upload{--zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-spinner { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-eye { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-graduation-cap { --zeichen: url("data:image/svg+xml,"); } .bpmn-dienstseite .fa-spin { animation: bpmn-dreht 1.1s linear infinite; } @keyframes bpmn-dreht { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bpmn-dienstseite .fa-spin { animation: none; } } /* Sechs rote Pillen nebeneinander in der Kopfzeile der Klassenraum-Ansicht — das ist so viel Betonung, dass sie keine mehr ist. „Zurück" und „Abmelden" führen nur weg, sie ändern nichts; sie bleiben ruhig. Rot behalten die Knöpfe, die etwas tun: speichern, versenden, löschen. Unterschieden wird am name-Attribut, weil der Quelltext allen Knöpfen dieselbe Klasse gibt. */ .bpmn-dienstseite .entry-content .bpme_classroom_header_btn[name="back"], .bpmn-dienstseite .entry-content .bpme_classroom_header_btn:not([name]) { background: transparent; color: var(--wp--preset--color--dark); border: 1px solid var(--wp--preset--color--line); } .bpmn-dienstseite .entry-content .bpme_classroom_header_btn[name="back"]:hover, .bpmn-dienstseite .entry-content .bpme_classroom_header_btn:not([name]):hover, .bpmn-dienstseite .entry-content .bpme_classroom_header_btn[name="back"]:focus-visible, .bpmn-dienstseite .entry-content .bpme_classroom_header_btn:not([name]):focus-visible { background: transparent; border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); } /* Die sechs Kopfknöpfe stehen im Quelltext in einer Tabellenzeile — sie können also nicht umbrechen. In voller Pillengrösse brauchte die Zeile 1319px und schob die Seite 37px über den rechten Rand hinaus. Etwas kleiner gesetzt passt sie in die 1140px des Inhaltsbereichs. Der Elementname im Selektor ist nötig, damit die Regel die allgemeine für button[type="submit"] schlägt. */ .bpmn-dienstseite .entry-content button.bpme_classroom_header_btn { padding: 0.45rem 1rem; font-size: 0.875rem; /* Ohne das bricht „email & activate" innerhalb der Pille auf drei Zeilen um — die Tabelle verteilt die Breite gleichmässig, sobald sie darf. */ white-space: nowrap; } /* Die Knopfzeile unter der Schlüsselliste. Im Quelltext stand dafür eine Tabelle, deren Formular mitten in einer Zelle schloss — die Knöpfe standen entsprechend versetzt. Jetzt eine Reihe mit gleicher Grundlinie. */ .bpmn-dienstseite .bpme-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } /* Nur für Screenreader. Die Klasse wird an mehreren Stellen benutzt — von der Sprungmarke bis zu den Statusangaben der Zertifikatsliste — war aber nirgends definiert. Ohne Definition stand der Text sichtbar auf der Seite. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- * Die Liste der zertifizierten Professionals. * * Das Aushängeschild der Plattform — und bis eben eine Tabelle aus der * Frühzeit: graue Zellhintergründe, , ein roter Stern als * Gültigkeitszeichen und eine Spalte, die nur „>>" enthielt. * * Jetzt trägt die Liste sich selbst: Namen führen, Firmen erläutern, feine * Linien statt Farbflächen, und der Status steht als Siegel daneben. * ---------------------------------------------------------------------- */ .bpmn-dienstseite .zert-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .bpmn-dienstseite .zert-tabelle thead th { text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); padding: 0 1rem 0.5rem 0; white-space: nowrap; } .bpmn-dienstseite .zert-tabelle .zert-filterzeile th { padding-bottom: 0.9rem; text-transform: none; letter-spacing: 0; } /* Eine kräftige Linie unter dem Kopf, feine zwischen den Zeilen — mehr Struktur braucht die Liste nicht. */ .bpmn-dienstseite .zert-tabelle thead { border-bottom: 2px solid var(--wp--preset--color--ink); } .bpmn-dienstseite .zert-tabelle tbody td { padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: baseline; } .bpmn-dienstseite .zert-tabelle tbody tr:hover td { background: var(--wp--preset--color--surface); } .bpmn-dienstseite .zert-tabelle .zert-name { display: block; font-weight: 600; color: var(--wp--preset--color--ink); } .bpmn-dienstseite .zert-tabelle .zert-firma { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--ink-muted); } .bpmn-dienstseite .zert-tabelle .zert-firma a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--line); } .bpmn-dienstseite .zert-tabelle .zert-firma a:hover { color: var(--wp--preset--color--brand); border-bottom-color: currentColor; } .bpmn-dienstseite .zert-tabelle .zert-stufe { color: var(--wp--preset--color--ink); } /* Datum rechtsbündig und mit Ziffern gleicher Breite: So stehen die Jahre untereinander statt zu tanzen. */ .bpmn-dienstseite .zert-tabelle .zert-spalte-datum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--ink-muted); padding-right: 0; } .bpmn-dienstseite .zert-tabelle .zert-siegel { margin-left: 0.5rem; } /* Das Siegel: eine Auszeichnungsrosette — Medaille mit Stern und zwei Bändern. Ein Häkchen sagt „erledigt"; hier geht es aber um eine bestandene Prüfung, und dafür ist die Rosette das eingeführte Zeichen. Der frühere rote Stern war ebenfalls als Auszeichnung gemeint, stand aber allein und las sich als Fahne. */ .bpmn-dienstseite .zert-siegel { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -0.4em; background-color: var(--wp--preset--color--brand); -webkit-mask: var(--siegel) center / contain no-repeat; mask: var(--siegel) center / contain no-repeat; --siegel: url("data:image/svg+xml,"); } .bpmn-dienstseite .zert-siegel.ist-abgelaufen { background-color: var(--wp--preset--color--line); } /* Abgelaufene Einträge bleiben lesbar, treten aber zurück — sie sind Teil der Geschichte, nicht der Auslage. */ .bpmn-dienstseite .zert-tabelle tbody tr.ist-abgelaufen td, .bpmn-dienstseite .zert-tabelle tbody tr.ist-abgelaufen .zert-name { color: var(--wp--preset--color--ink-muted); font-weight: 400; } .bpmn-dienstseite .zert-tabelle .zert-leer { padding: 2rem 0; text-align: center; color: var(--wp--preset--color--ink-muted); } /* Fusszeile: Blätterung links, Anzahl und Seitengrösse rechts. Vorher ein dunkelgrauer Balken quer über die Tabelle. */ .bpmn-dienstseite .zert-tabelle .zert-fuss { padding: 1rem 0 0; border: 0; font-size: 0.875rem; color: var(--wp--preset--color--ink-muted); } .bpmn-dienstseite .zert-tabelle .zert-fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .bpmn-dienstseite .zert-tabelle .zert-blaetterung a, .bpmn-dienstseite .zert-tabelle #certPageNumbers a { color: var(--wp--preset--color--ink); text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 4px; } .bpmn-dienstseite .zert-tabelle .zert-blaetterung a:hover, .bpmn-dienstseite .zert-tabelle #certPageNumbers a:hover { color: var(--wp--preset--color--brand); background: var(--wp--preset--color--surface); } .bpmn-dienstseite .zert-tabelle .zert-fuss-rechts { display: flex; align-items: center; gap: 1.25rem; } /* Suchfeld und die beiden Auswahlfelder stehen nebeneinander und müssen dieselbe Höhe haben. Explizit gesetzt statt der Polsterung überlassen: Auswahlfelder rechnen ihre Höhe anders als Textfelder, und schon ein Pixel Unterschied fällt in einer Zeile auf. */ .bpmn-dienstseite .zert-tabelle .zert-filterzeile input, .bpmn-dienstseite .zert-tabelle .zert-filterzeile select { box-sizing: border-box; height: 2.25rem; font-size: 0.9375rem; font-family: inherit; } .bpmn-dienstseite .zert-tabelle .zert-filterzeile input[name="filter"] { width: 100%; max-width: 22rem; } /* ------------------------------------------------------------------------- * Kursübersicht auf /schulungen/. * * Fünf Spalten mit Preisen und Voraussetzungen. Die Zahlenspalten sollen * nicht umbrechen, die Kursnamen dürfen. * ---------------------------------------------------------------------- */ .kursuebersicht table { width: 100%; font-size: 0.9375rem; } .kursuebersicht th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); } .kursuebersicht td, .kursuebersicht th { vertical-align: top; } /* Dauer, Preis und Abschluss brauchen wenig Platz und keinen Umbruch — „2 Tage" über zwei Zeilen liest sich wie zwei Angaben. */ .kursuebersicht td:nth-child(2), .kursuebersicht td:nth-child(3), .kursuebersicht td:nth-child(5) { white-space: nowrap; } .kursuebersicht td:nth-child(3) { font-variant-numeric: tabular-nums; } /* Die Reihenbezeichnung unter dem Kursnamen tritt zurück. */ .kursuebersicht td a br + * , .kursuebersicht td a { text-decoration: none; } .kursuebersicht td a:hover strong { text-decoration: underline; } /* ------------------------------------------------------------------------- * Das Team auf /ueber-uns/. * * Ein Raster, kein Karussell: Fünf Personen passen nebeneinander, und was * sichtbar ist, wird auch gelesen. Ohne JavaScript, ohne Blätterlogik. * * auto-fit mit minmax: Auf der Lesebreite von 760px stehen drei Karten * nebeneinander, darunter die restlichen zwei; auf dem Telefon eine. * Es braucht keine Abfragen nach Bildschirmbreite — das Raster rechnet * selbst aus, wie viele Spalten hineinpassen. * ---------------------------------------------------------------------- */ .team-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; } .team-karte { margin: 0; } /* Die ganze Karte ist der Ausloeser. Ein Knopf, kein Verweis: Es wird nichts geladen, sondern ein Fenster geoeffnet. Deshalb auch button-Vorgaben zuruecksetzen — links ausgerichtet, ohne Rahmen und Grund. */ .team-anriss { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: transform 220ms ease; } .team-anriss:hover, .team-anriss:focus-visible { transform: translateY(-3px); } .team-bild { display: flex; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; margin-bottom: 0.9rem; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--surface); /* Der Ring wird nicht eingeblendet, sondern waechst von null heraus — deshalb box-shadow und nicht border: Ein Rahmen wuerde das Bild verschieben, der Schatten legt sich darum. */ box-shadow: 0 0 0 0 rgba(226, 54, 21, 0); transition: box-shadow 220ms ease, transform 220ms ease; } .team-anriss:hover .team-bild, .team-anriss:focus-visible .team-bild { box-shadow: 0 0 0 0.4rem rgba(226, 54, 21, 0.12); transform: scale(1.03); } .team-bild img { width: 100%; height: 100%; object-fit: cover; } /* Monogramm, solange kein Foto vorliegt. Gleiche Groesse und Form wie das spaetere Bild — so springt das Raster nicht, wenn die Fotos eintreffen. */ .team-monogramm { font-size: 1.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--wp--preset--color--brand); } .team-name { display: block; margin: 0 0 0.25rem; font-weight: 600; line-height: 1.3; } .team-rollen { display: block; margin: 0 0 0.35rem; font-size: 0.875rem; line-height: 1.45; color: var(--wp--preset--color--ink-muted); } /* Der Hinweis auf das Profil erscheint erst beim Ueberfahren — im Ruhezustand traegt die Karte nur, was zaehlt. Er belegt seinen Platz dauerhaft, sonst huepfte die Karte beim Erscheinen. */ .team-mehr { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--brand); opacity: 0; transform: translateX(-0.35rem); transition: opacity 220ms ease, transform 220ms ease; } .team-mehr::after { content: " ›"; } .team-anriss:hover .team-mehr, .team-anriss:focus-visible .team-mehr { opacity: 1; transform: translateX(0); } .team-kontakt { display: inline-block; margin-top: 0.15rem; font-size: 0.875rem; color: var(--wp--preset--color--brand); text-decoration: none; border-bottom: 1px solid transparent; } .team-kontakt:hover, .team-kontakt:focus-visible { border-bottom-color: currentColor; } /* ------------------------------------------------------------------------- * Das Profil-Fenster. * * statt selbstgebauter Ueberlagerung: Escape schliesst, der Fokus * bleibt im Fenster gefangen und kehrt beim Schliessen dorthin zurueck, wo * er herkam. Das alles waere von Hand mehrere Dutzend Zeilen Skript. * ---------------------------------------------------------------------- */ .team-dialog { width: min(34rem, calc(100vw - 2rem)); max-width: none; padding: 2rem; border: 0; border-radius: 8px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22); } .team-dialog[open] { animation: team-auf 220ms ease; } @keyframes team-auf { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } } .team-dialog::backdrop { background: rgba(29, 29, 27, 0.45); } .team-dialog-kopf { display: flex; align-items: flex-start; gap: 1.25rem; } /* Im Fenster steht das Bild ruhig — dort ist es kein Ausloeser mehr. */ .team-dialog .team-bild { flex-shrink: 0; margin-bottom: 0; box-shadow: none; transform: none; } .team-dialog .team-name { font-size: 1.25rem; margin-bottom: 0.4rem; } .team-rollen-lang { margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--ink-muted); } .team-dialog-zu { position: absolute; top: 0.5rem; right: 0.75rem; padding: 0.25rem 0.5rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--ink-muted); cursor: pointer; } .team-dialog-zu:hover, .team-dialog-zu:focus-visible { color: var(--wp--preset--color--brand); } .team-dialog p { margin: 0.75rem 0 0; font-size: 0.9375rem; } @media (prefers-reduced-motion: reduce) { .team-anriss, .team-bild, .team-mehr { transition: none; } .team-anriss:hover, .team-anriss:focus-visible { transform: none; } .team-dialog[open] { animation: none; } /* Ohne Bewegung braucht der Hinweis eine andere Rueckmeldung: Er steht dann dauerhaft da, statt sich einzublenden. */ .team-mehr { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- * Die Fenster der Student Area („Certification State", „Lost Training Key"). * * Grundgestaltung liefert das eigene CSS der Site (Plugin „Simple Custom * CSS", Option in der Datenbank) — dort stehen .bpme-modal, .bpme-modal- * content und .bpme-close seit der Divi-Zeit. Das bleibt unangetastet. * * Hier nur die Korrektur: 80 % Breite sind fuer ein Eingabefeld und zwei * Zeilen Text zu viel, und der Kasten traegt noch den grauen Rahmen von * 2015. Der Selektor fuehrt .bpmn-dienstseite mit, damit er die einklassige * Regel aus dem eigenen CSS schlaegt — jene wird spaeter geladen und * gewaenne bei Gleichstand. * ---------------------------------------------------------------------- */ .bpmn-dienstseite .bpme-modal-content { width: min(40rem, 100%); padding: 2rem; border: 0; border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22); } /* Die Eingabezeile im Fenster „Lost Training Key" stand gequetscht am Knopf. */ .bpmn-dienstseite .bpme-modal-content input[type="text"] { margin-right: 0.5rem; } /* Im Fenster braucht die Tabelle wieder waagerechten Abstand. Die Regel für die Dienstseiten nimmt ihn weg, weil er dort die breiten Tabellen über den Rand schob — hier gibt es diese Enge nicht, dafür klebten „First certified at" und „Next re-certification at" aneinander. */ .bpmn-dienstseite .bpme-modal-content th, .bpmn-dienstseite .bpme-modal-content td { padding-right: 1.25rem; } /* ------------------------------------------------------------------------- * Der Sitetitel wird übersetzt — und dabei länger. * * „Die BPM Wissensbasis" sind 20 Zeichen, „La base de connaissances BPM" * sind 28. Ohne Untergrenze gibt die Kopfzeile dem Titel nur so viel Breite, * wie sein längstes Wort braucht: bei „Wissensbasis" (12) reicht das für zwei * Zeilen, bei „connaissances" (13) entstehen drei — und der ganze Kopfbereich * wird höher, weil er sich nach dem höchsten Element richtet. * * 18ch ist die Breite, bei der auch die französische Fassung mit zwei Zeilen * auskommt („La base de" / „connaissances BPM"). Das Logo daneben schrumpft * ohnehin nicht (flex-shrink: 0), der Titel gibt nach — aber nicht mehr * beliebig weit. * ---------------------------------------------------------------------- */ .site-header .wp-block-site-title { min-width: 18ch; text-wrap: balance; }