/* ========================================================================== SysTec.AI — Bausteine für Unter- und Detailseiten ========================================================================== */ /* ---- Seitenkopf --------------------------------------------------------- */ /* Jede Seite hat denselben Kopfaufbau — in der Bauart der Startseite, nur flacher: links die Farbfläche mit dem Text, rechts das Bild. Es gibt nur noch .pagehead--foto; die frühere Variante .pagehead--flaeche (reine Farbfläche mit Planraster, auf acht Detailseiten) ist entfallen. Der Text ragt über die Spaltengrenze ins Bild. Der Kontrast bleibt trotzdem vom Motiv unabhängig, aber nicht mehr trivialerweise: der Verlauf deckt an der Textkante 98,2 Prozent, das Bild trägt weniger als zwei Prozent bei. Nachgerechnet für ein reinweißes Foto an dieser Stelle: H1 13,49:1, Vorspann 10,38:1. Wer den Überhang vergrößert, muss das neu rechnen — die Kontrastprüfung kann Bildpixel nicht sehen, nur die Deckung. */ .pagehead { background: var(--c-900); border-bottom: 3px solid var(--c-500); } .pagehead__flaeche { display: grid; grid-template-columns: 1fr; align-content: center; padding-block: clamp(1.375rem, 2.6vw, 2rem) clamp(1.625rem, 3vw, 2.25rem); } /* Zwei Varianten, zwei Breitenregeln — und keine .wrap darum herum. Die .wrap bringt selbst max-width, Zentrierung und Seitenrand mit; zusammen mit der halben Breite hier ergibt das zwei Begrenzungen übereinander und die Überschrift fluchtet nicht mehr mit dem Logo. */ /* Der Textkasten wird BREITER, er wandert nicht. Beides zusammen ist noetig: die Breite waechst um den Ueberhang UND der rechte Rand ist um denselben Betrag negativ. Dann bleibt die linke Kante auf der Inhaltskante der Seite (dieselbe Linie wie das Logo in der Kopfzeile) und nur die rechte Kante ragt ins Bild. Nur der negative Rand allein verschiebt den ganzen Kasten: die freie Flaeche in der Spur waechst um X, margin-left:auto nimmt sie ganz, und die linke Kante rutscht um X nach rechts. Gemessen war die H1 dadurch 50px neben dem Logo. */ .pagehead--foto .pagehead__flaeche { position: relative; z-index: 1; } .pagehead--foto .pagehead__inhalt { width: min(calc(100% - var(--gutter) + var(--ueberhang)), calc(var(--maxw) / 2 - var(--gutter) + var(--ueberhang))); margin-left: auto; margin-right: calc(-1 * var(--ueberhang)); /* Kleiner als vorher: der Abstand war die Luecke zur harten Bildkante. Die gibt es nicht mehr -- der Text liegt jetzt auf dem Bild, und der Innenabstand wuerde den Ueberhang wieder wegnehmen. */ padding-right: clamp(.75rem, 1.2vw, 1rem); } /* Zweigeteilt */ .pagehead--foto { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .pagehead--foto > * { min-width: 0; } .pagehead--foto .pagehead__bildseite { position: relative; min-height: clamp(12rem, 18vw, 15rem); } .pagehead__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Deckend bis 22 statt 14 Prozent: der Text ragt jetzt in dieses Feld hinein und braucht dort noch Untergrund. Ab 40 Prozent ist das Bild wieder ueberwiegend zu sehen. */ .pagehead--foto .pagehead__bildseite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-900) 0%, rgba(5,46,69,.92) 22%, rgba(5,46,69,.35) 40%, rgba(5,46,69,0) 58%); } .pagehead .eyebrow { color: var(--c-200); } .pagehead h1 { color: #fff; margin-bottom: .5rem; } /* Optisch die H1, semantisch keine. Die Meldungsseiten tragen im Kopf alle dieselbe Zeile "Neues von SysTec.AI." -- als H1 hiessen drei Seiten gleich und der Titel der Meldung haette keine Ueberschrift erster Ordnung. Die H1 steht deshalb im Text darunter und benennt die Meldung. */ .pagehead__zeile { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: var(--fw-bold); color: #fff; margin-bottom: .5rem; } .pagehead .lead { color: var(--text-on-dark); } /* Brotkrumen auf dunklem Grund */ .pagehead .crumbs { color: var(--text-2-on-dark); } .pagehead .crumbs a { color: var(--text-2-on-dark); } .pagehead .crumbs a:hover { color: #fff; } .pagehead .crumbs li::after { color: rgba(169,201,220,.55); } .pagehead .crumbs li:last-child { color: #fff; } @media (max-width: 900px) { .pagehead--foto { grid-template-columns: 1fr; } .pagehead--foto .pagehead__bildseite { min-height: 10rem; order: -1; } .pagehead--foto .pagehead__bildseite::after { background: linear-gradient(180deg, rgba(5,46,69,0) 45%, rgba(5,46,69,.55) 78%, var(--c-900) 100%); } /* margin-right zuruecksetzen: einspaltig gibt es keine Spaltengrenze, ueber die der Text ragen koennte -- der Ueberhang wuerde den Text ueber den rechten Seitenrand schieben. */ .pagehead--foto .pagehead__inhalt { width: auto; margin-left: 0; margin-right: 0; padding-inline: var(--gutter); } } /* Seitenkopf ohne Bild -- fuer Impressum und Datenschutz. Eine Pflichtseite bekommt keine Stimmungsaufnahme; der dunkle Streifen allein genuegt. Die Inhaltsbreite kommt hier aus der Regel statt aus einer .wrap, damit der Aufbau derselbe bleibt wie bei der Bildvariante. */ .pagehead--text .pagehead__inhalt { /* 'justify-self' statt 'margin-inline: auto': in einem Raster schaltet ein automatischer Rand die Dehnung ab, das Feld schrumpft auf seinen Inhalt und wird mittig gesetzt. Gemessen stand die H1 dadurch je nach Laenge der Ueberschrift an einer anderen Stelle -- 392px auf dem Impressum, 322px auf der Datenschutzseite, das Logo darueber bei 171px. */ width: min(100%, var(--maxw)); justify-self: center; padding-inline: var(--gutter); } /* ---- Rechtstexte -------------------------------------------------------- Impressum und Datenschutzerklaerung. Eine Spalte auf Lesebreite, klare Abstaende zwischen den Abschnitten -- hier liest niemand quer, hier sucht jemand eine bestimmte Angabe. ---------------------------------------------------------------------- */ /* Keine eigene Lesebreite mehr: der Text stand auf 70ch und damit auf knapp der halben Seite, rechts daneben war nichts. Jetzt traegt ihn die Hauptspalte des Detailrasters, und die Randspalte bekommt das Inhaltsverzeichnis -- beides zusammen fuellt die Seite und der Text wird um die Haelfte breiter. */ .rechtstext > section + section { margin-top: 2.25rem; } .rechtstext h2 { margin-bottom: .5rem; } .rechtstext h3 { margin-top: 1.25rem; margin-bottom: .25rem; } .rechtstext p, .rechtstext li { color: var(--text-2); } .rechtstext p + p, .rechtstext p + ul, .rechtstext ul + p, .rechtstext p + dl, .rechtstext dl + p { margin-top: .625rem; } /* Angabenblock: Bezeichnung und Wert untereinander, nicht als Tabelle -- auf dem Telefon waere eine zweispaltige Tabelle hier unlesbar. */ .rechtstext dl { display: grid; gap: .5rem .875rem; margin-top: .75rem; } @media (min-width: 561px) { .rechtstext dl { grid-template-columns: 12rem 1fr; } } .rechtstext dt { font-weight: var(--fw-semi); color: var(--c-900); } .rechtstext dd { margin: 0; color: var(--text-2); } @media (max-width: 560px) { .rechtstext dd { margin-bottom: .375rem; } } /* Inhaltsverzeichnis in der Randspalte der Rechtstexte. Auf einer Seite, auf der jemand eine bestimmte Klausel sucht, ist das kein Zierrat. */ .inhaltsliste { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; } .inhaltsliste a { color: var(--text-2); text-decoration: none; } .inhaltsliste a:hover, .inhaltsliste a:focus-visible { color: var(--c-700); text-decoration: underline; } /* Einspaltig gehoert das Verzeichnis nach OBEN. Unter dem Text stehend haette es keinen Zweck mehr -- wer dort ankommt, hat die Seite schon gelesen. */ @media (max-width: 980px) { .detail:has(> .rechtstext) > .detail__side { order: -1; } } /* ---- Brotkrumen --------------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: var(--fs-klein); color: var(--text-2); margin-bottom: .875rem; } .crumbs a { color: var(--text-2); text-decoration: none; } .crumbs a:hover { color: var(--c-700); text-decoration: underline; } .crumbs li::after { content: "›"; margin-left: .4rem; color: var(--c-200); } .crumbs li:last-child::after { content: none; } .crumbs li:last-child { color: var(--c-900); font-weight: var(--fw-medium); } .crumbs ol, .crumbs { list-style: none; padding: 0; } /* ---- Faktenleiste ------------------------------------------------------- */ /* Die Trennlinien sind der 1px-Abstand, durch den die Flaeche der Leiste durchscheint. Das hat eine Folge, die man erst sieht, wenn eine Zeile nicht voll wird: eine leere Zelle ist dann ein graues Rechteck. Genau das ist mit 'auto-fit, minmax(135px, 1fr)' passiert -- bei 390px ergaben drei Fakten zwei Spalten und damit ein Loch unten rechts, bei fuenf Fakten und 700px gleich drei Loecher. Deshalb feste Spaltenzahlen, die zur Zahl der Fakten passen, und darunter direkt einspaltig: von 3 auf 1, nicht ueber 2. Dieselbe Falle wie bei grid--2, grid--3, grid--4 und grid--news. */ .facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; grid-template-columns: repeat(3, 1fr); margin-top: 1.375rem; } /* Vier Angaben: zweispaltig geht ohne Loch auf, einspaltig auch. Die Fuenferfassung ist mit dem Formatfeld auf der Schulungsseite entfallen. */ .facts--vier { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .facts--vier { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .facts, .facts--vier { grid-template-columns: 1fr; } } .fact { background: var(--surface); padding: .75rem .875rem; } .fact__k { font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .fact__v { font-size: var(--fs-text); font-weight: var(--fw-semi); color: var(--c-900); margin-top: .2rem; line-height: 1.3; } /* Heller Streifen direkt unter dem dunklen Seitenkopf, der die Faktenleiste aufnimmt. Sie stand vorher im Kopf selbst — als weisse Kachelreihe auf dunklem Grund waere sie dort ein Fremdkoerper und eine Textform zu viel. Gibt den Detailseiten denselben Rhythmus wie der Startseite: dunkler Kopf, heller Informationsstreifen, Inhalt. */ .faktenband { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 1.25rem; } .faktenband .facts { margin-top: 0; } /* ---- Nummerierter Ablauf ------------------------------------------------ */ .steplist { counter-reset: s; display: grid; gap: .5rem; } .steplist > li { counter-increment: s; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: .875rem 1.125rem .875rem 3.125rem; box-shadow: var(--sh-1); } .steplist > li::before { content: counter(s); position: absolute; left: .875rem; top: .875rem; width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill); background: var(--c-100); color: var(--c-900); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-klein); } .steplist h3 { margin-bottom: .2rem; } .steplist p { color: var(--text-2); font-size: var(--fs-text); } /* ---- Schritte, die man einzeln aufklappt -------------------------------- Auf der Oberflaeche stehen nur die Namen der Schritte -- die Kernaussage. Die Erklaerung liegt im jeweiligen Schritt und kommt auf Klick. Vorher stand die Liste ZWEIMAL auf der Seite: einmal als nackte Namen und einmal als dieselben Namen mit Erklaerung in einem gemeinsamen Aufklapper. Jetzt steht jeder Name genau einmal. ---------------------------------------------------------------------- */ .steplist--auf > li { padding-block: 0; } .steplist--auf > li::before { top: .8125rem; } .steplist--auf details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8125rem 0; /* Textgroesse, nicht h3-Groesse. Damit stehen ALLE Zusammenfassungen der Website auf einer Groesse: FAQ, Aufklapper im Fliesstext, Aufklappkachel und diese Liste. Eine Zeile, die man anklickt, sieht ueberall gleich aus -- vorher war diese hier die einzige Ausnahme. */ font-size: var(--fs-text); font-weight: var(--fw-semi); color: var(--c-900); } .steplist--auf details > summary::-webkit-details-marker { display: none; } /* Das Zeichen steht rechts wie in der FAQ, nicht links wie beim Aufklapper im Fliesstext: hier ist es eine Zeile in einer Liste, kein eigener Kasten. */ .steplist--auf details > summary::after { content: "+"; flex-shrink: 0; color: var(--c-500); font-weight: var(--fw-bold); font-size: 1.3em; line-height: 1; } .steplist--auf details[open] > summary::after { content: "–"; } .steplist--auf details > summary:hover { color: var(--c-700); } /* Steht in der Zusammenfassung eine Ueberschrift, traegt die ihre eigene Farbe -- ohne diese Zeile bliebe die Rueckmeldung beim Ueberfahren aus. */ .steplist--auf details > summary:hover :is(h2, h3) { color: var(--c-700); } .steplist--auf details > summary :is(h2, h3) { font-size: inherit; letter-spacing: 0; } .steplist--auf details > div { padding-bottom: .8125rem; border-top: 1px solid var(--line); padding-top: .625rem; } .steplist--auf details > div p { margin: 0; } /* Dieselben Zeilen ohne Ziffer. Die Ziffer auf den Leistungsseiten bedeutet 'Schritt N eines Ablaufs'. Auf der Schulungsseite stehen dort drei Fragen -- die haben eine Leserichtung, aber keine Reihenfolge in der Zeit, und eine Ziffer wuerde eine behaupten. Aussehen und Bedienung bleiben gleich. */ .steplist--ohnezahl > li { padding-left: 1.125rem; } .steplist--ohnezahl > li::before { content: none; } /* ---- Fragenzaehler in der Textspalte ------------------------------------ Die Rahmenbedingungen versprechen in der H1 drei Fragen. Die Nummern machen sichtbar, dass genau drei folgen -- im gleichen Aussehen wie die Abschnittsnummern der Uebersichtsseiten. Eigener Zaehler statt 'section--nr': dafuer muesste die Seite in mehrere
zerfallen, und dann hat die Randspalte .detail__side keinen Ort mehr. Diesen Aufbau teilen acht Detailseiten. */ .detail__main { counter-reset: frage; } .frage { counter-increment: frage; } .frage > h2::before { content: counter(frage, decimal-leading-zero); margin-right: .625rem; padding-right: .625rem; border-right: 2px solid var(--c-200); color: var(--c-700); font-variant-numeric: tabular-nums; } /* Fließtext auf getönter Karte. Stand vorher als Inline-Stil in mehreren Seiten -- als Klasse ist es eine Entscheidung statt einer Wiederholung. */ .card__text--auf-ton { color: var(--c-900); opacity: .8; } /* ---- Aufzählung mit Haken ----------------------------------------------- */ /* Bewusst kein Flex: ein reiner Textknoten wird darin zu einem anonymen Flex-Element mit min-width:auto und ist per CSS nicht erreichbar — lange Komposita sprengen dann die Spalte. */ .ticks { display: grid; gap: .4rem; } .ticks li { position: relative; padding-left: 1.05rem; } .ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4375rem; height: .4375rem; border-radius: 2px; background: var(--c-500); } .ticks--muted li::before { background: var(--c-200); } /* Ergebnisliste: dieselbe Aufzählung, nur mit Luft. Wird auf der Leistungsübersicht für „Was Sie am Ende haben" verwendet — vier Zeilen, die der Geschäftsführer einzeln lesen können soll, nicht als Block. */ .ticks--gross { gap: .875rem; } .ticks--gross li { padding-left: 1.375rem; font-size: var(--fs-text); color: var(--text-2); } .ticks--gross li strong { color: var(--c-900); } .ticks--gross li::before { top: .55em; width: .5625rem; height: .5625rem; border-radius: 2px; background: var(--c-500); } /* ---- Hinweiskasten ------------------------------------------------------ */ /* Ohne farbigen Balken links — dieselbe Entscheidung wie bei den Kennzahlen in main.css: der Balken macht aus einem Hinweis eine Pseudokarte und ist die einzige Stelle, an der --c-500 rein zierend auftritt. Die getönte Fläche allein trägt den Hinweis. */ .notice { background: var(--c-50); border: 1px solid var(--c-100); padding: 1rem 1.25rem; border-radius: var(--r-card); } /* h2 zugelassen, weil der Kasten im Seitenkopf direkt auf die h1 folgt — ein h3 an dieser Stelle wäre ein Sprung in der Gliederung. */ /* Auch H2: im Hinweiskasten zaehlt die Gliederungsebene, nicht die Groesse. Ein Kasten direkt unter der H1 muss H2 sein, sonst springt die Folge. */ .notice h2, .notice h3, .notice h4 { font-size: var(--fs-h3); margin-bottom: .25rem; letter-spacing: 0; } /* Auf einer getoenten Flaeche gehoert der Text nicht in die Nebenfarbe — dort liegt er auf der Kontrastgrenze. Und ein hervorgehobener Kasten soll ohnehin nicht blasser sein als der Fliesstext um ihn herum. */ .notice p { font-size: var(--fs-text); color: var(--text); } /* Zwei Stufen innerhalb derselben Farbe: der schlichte Hinweis auf --c-50, der starke auf --c-100 mit kraeftigerer Linie. */ .notice--stark { background: var(--c-100); border-color: var(--c-200); } /* ---- Formular ---------------------------------------------------------- Beschriftung immer sichtbar ueber dem Feld, nicht als Platzhaltertext im Feld: Platzhaltertext verschwindet beim Tippen und ist damit fuer alle unbrauchbar, die beim Ausfuellen nochmal nachsehen wollen. ---------------------------------------------------------------------- */ .formular { display: grid; gap: 1rem; } /* 'align-content: start' ist keine Kosmetik: .feldpaar ist ein Raster, beide Zellen werden auf die Hoehe der hoeheren gedehnt. Das Telefonfeld hat einen Hinweis darunter, das E-Mail-Feld nicht -- ohne diese Zeile wuchs deshalb das EINGABEFELD daneben mit und stand mit 60px neben 46px. */ .feld { display: grid; gap: .3125rem; min-width: 0; align-content: start; } .feld > label { font-size: var(--fs-text); font-weight: var(--fw-semi); color: var(--c-900); } /* 16px ist Pflicht: unter diesem Wert zoomt iOS Safari die ganze Seite, sobald ein Eingabefeld den Fokus bekommt. Keine Gestaltungsfrage. */ /* Rahmen auf Stufe 500, nicht 200: das Feld hat keine eigene Flaeche, der Rahmen ist seine einzige Begrenzung. Gemessen waren es 1,74:1 auf weissem und 1,55:1 auf getoentem Grund, gefordert sind 3,0:1 (WCAG 1.4.11). Betrifft auch die Auswahlfelder der Filterleiste, die von hier erben. */ .feld input, .feld select, .feld textarea { width: 100%; padding: .625rem .75rem; border: 1px solid var(--c-500); border-radius: var(--r-btn); background: var(--surface); color: var(--text); font-size: var(--fs-feld); } .feld textarea { min-height: 7rem; resize: vertical; } /* Eine Stufe dunkler als der Ruhezustand -- der stand vorher hier. */ .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--c-700); } .feld__hinweis { font-size: var(--fs-text); color: var(--text-2); } .feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .feldpaar { grid-template-columns: 1fr; } } .pflicht { color: var(--fehler); } .feld__fehler { font-size: var(--fs-text); color: var(--fehler); display: none; } .feld.ist-fehler input, .feld.ist-fehler select, .feld.ist-fehler textarea { border-color: var(--fehler); } .feld.ist-fehler .feld__fehler { display: block; } .einwilligung { display: grid; grid-template-columns: auto 1fr; gap: .625rem; align-items: start; font-size: var(--fs-text); color: var(--text-2); } .einwilligung input { width: 1.125rem; height: 1.125rem; margin-top: .1875rem; } .einwilligung.ist-fehler { color: var(--fehler); } /* ---- Blätterleiste (vorige / nächste Stufe) ----------------------------- */ .pager { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; margin-top: 0; } @media (max-width: 640px) { .pager { grid-template-columns: 1fr; } } .pager a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: .75rem 1rem; } .pager a:hover { border-color: var(--c-500); box-shadow: var(--sh-1); } .pager__k { font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .pager__v { font-weight: var(--fw-semi); color: var(--c-900); margin-top: .15rem; font-size: var(--fs-text); } .pager__next { text-align: right; } .pager__empty { border: 1px dashed var(--line); border-radius: var(--r-card); } /* ---- Stufenliste (Leistungsübersicht) ----------------------------------- */ /* ---- Gruppenkopf ------------------------------------------------------- Gliedert Übersichtsseiten entlang einer Ordnung, die die Zielgruppe im Kopf hat: dem Verlauf eines Projekts. Links die Phasenspanne als harte Angabe, daneben der Name der Gruppe, darunter ein Satz Erklärung. Wichtig ist, dass jede Gruppe eine GERADE Anzahl Kacheln enthält — sonst bleibt im Zweispalter eine Zelle leer und das sieht wie ein Ladefehler aus. Genau daran ist die erste Fassung gescheitert. ---------------------------------------------------------------------- */ .gruppe + .gruppe { margin-top: 2.25rem; } .gruppe__kopf { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding-bottom: .625rem; margin-bottom: 1rem; border-bottom: 1px solid var(--c-200); } .gruppe__spanne { font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--auf-hell); background: var(--c-100); padding: .25rem .5rem; border-radius: var(--r-pill); } .gruppe__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-900); margin: 0; } .gruppe__was { font-size: var(--fs-text); color: var(--text-2); flex: 1 1 16rem; } /* ---- Stufenraster ------------------------------------------------------ Fuenf Leistungsstufen auf einen Blick. Stufe 3 traegt die Wertschoepfung und belegt deshalb zwei Spalten und zwei Zeilen; die uebrigen vier stehen kompakt daneben, tragen aber dieselben Angaben. Platzierung ausdruecklich ueber nth-child statt ueber die Reihenfolge im Markup: so bleibt die Lesereihenfolge 1, 2, 3, 4, 5 — fuer Tastatur und Vorleseprogramm — waehrend Stufe 3 optisch links gross steht. ---------------------------------------------------------------------- */ /* Zwei Spalten, Stufe 3 ueber die ganze Breite. Damit stimmt die Reihenfolge beim Lesen wie beim Sehen: erst 1 und 2, dann gross 3, dann 4 und 5. Vorher stand 3 links neben 1 und 2 — optisch stark, aber die Nummerierung ergab keinen Weg mehr. */ .stufenraster { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; } .stufenraster > * { min-width: 0; } .stufenraster > :nth-child(3) { grid-column: 1 / -1; } .skarte { display: flex; flex-direction: column; gap: .4375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem 1.125rem; box-shadow: var(--sh-1); text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } a.skarte:hover { box-shadow: var(--sh-2); border-color: var(--c-200); transform: translateY(-2px); } /* Eine Kachel, die ganz ein Link ist, faerbt ihren Text beim Ueberfahren NICHT um. 'a:hover' in main.css setzt --c-500; auf der dunklen Stufe-3- Kachel (--c-700) sind das 1,92:1 -- unlesbar. Getroffen hat es nur den einen Text ohne eigene Farbregel, aber die Falle wartet auf jedes kuenftige Kind ohne Farbe. Die Rueckmeldung traegt der Schatten und das Anheben, nicht die Schrift. Die zweite Zeile ist noetig, weil 'a.skarte:hover' (0,1,1) sonst auch die helle Grundfarbe der dunklen Karte (0,1,0) ueberschreiben wuerde. */ a.skarte:hover { color: inherit; } a.skarte--gross:hover { color: var(--text-on-dark); } .skarte__stufe { font-family: var(--ff-technisch); font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .skarte__kopf { display: flex; align-items: center; gap: .625rem; } .skarte__nr { width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); background: var(--c-100); color: var(--c-900); flex-shrink: 0; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-klein); } .skarte__text { font-size: var(--fs-text); color: var(--text-2); } .skarte__fakten { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); display: grid; gap: .1875rem; font-size: var(--fs-klein); } .skarte__fakten > div { display: flex; justify-content: space-between; gap: .75rem; } .skarte__fakten dt { color: var(--text-2); } .skarte__fakten dd { margin: 0; color: var(--c-900); font-weight: var(--fw-semi); font-family: var(--ff-technisch); font-variant-numeric: tabular-nums; text-align: right; } /* Stufe 3 */ .skarte--gross { background: var(--c-700); border-color: var(--c-700); color: var(--text-on-dark); box-shadow: var(--sh-3); padding: clamp(1.125rem, 2vw, 1.5rem); gap: .5rem; } .skarte--gross .skarte__stufe { color: var(--c-200); } .skarte--gross .skarte__nr { width: 2.375rem; height: 2.375rem; font-size: var(--fs-text); background: var(--c-300); color: var(--auf-hell); } /* Bewusst dieselbe Groesse wie in den kleinen Karten: das Gewicht dieser Stufe kommt aus Kartenflaeche, Farbe und Ziffer, nicht aus der Schrift. Eine h3 in h2-Groesse haette die Rangfolge auf den Kopf gestellt. */ .skarte--gross h3 { color: #fff; } .skarte--gross .skarte__text { font-size: var(--fs-text); color: var(--text-on-dark); } .skarte--gross .badge { background: var(--c-300); color: var(--auf-hell); } .skarte--gross .skarte__fakten { border-top-color: rgba(255,255,255,.2); } /* Die Beschriftung vor den Prozessmarken. Hier stand vorher '.skarte__k' und '.skarte__betrifft' -- beide Klassen gibt es im Markup nicht mehr, die Regeln liefen ins Leere. Dadurch hatte 'Typische Prozesse' als einziger Text der Karte GAR KEINE Farbregel und hing an der Vererbung. Zwoelf Pixel statt vierzehn: die Marken daneben stehen auf zwoelf. Eine Beschriftung, die groesser ist als das, was sie beschriftet, dreht die Rangfolge um. */ .skarte__faelle__k { font-size: var(--fs-klein); color: var(--text-2); } .skarte--gross .skarte__faelle__k { color: var(--text-2-on-dark); } /* Ohne eigene Regel lag die Reihe im Textfluss: die Abstaende kamen aus dem Leerraum zwischen den Zeilen im Quelltext, und beim Umbruch klebten die Marken aneinander. */ .skarte__faelle { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; } /* Die drei Fakten stehen hier nebeneinander statt untereinander — es ist Platz dafuer, und sie werden damit zur Hauptaussage der Karte. */ .skarte--gross .skarte__fakten { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .skarte--gross .skarte__fakten > div { flex-direction: column; gap: .125rem; } .skarte--gross .skarte__fakten dt { color: var(--text-2-on-dark); } .skarte--gross .skarte__fakten dd { color: #fff; text-align: left; font-size: var(--fs-text); } /* Kachel mit eigenen Links darin (Stufe 3 mit Prozessmarken): die Kachel ist ein
, der Link sitzt auf der Überschrift und spannt per ::after über die ganze Kachel ("stretched link"). Die Prozessmarken liegen darüber und führen zum jeweiligen Anwendungsfall. Anheben und Schatten wie bei a.skarte. Die Selektoren mit "a." brauchen die Spezifität, um die Linkregel '.skarte--gross a:not(.btn)' aus main.css (Farbe, Unterstreichung) zu schlagen. */ .skarte--flaechenlink { position: relative; } .skarte--flaechenlink:hover { box-shadow: var(--sh-2); border-color: var(--c-200); transform: translateY(-2px); } .skarte--flaechenlink a.skarte__link { color: inherit; text-decoration: none; } .skarte--flaechenlink a.skarte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .skarte--flaechenlink a.skarte__link:focus-visible { outline: none; } .skarte--flaechenlink:has(a.skarte__link:focus-visible) { outline: 3px solid var(--c-500); outline-offset: 2px; } .skarte--flaechenlink a.skarte__fall { position: relative; z-index: 1; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .skarte--gross a.skarte__fall { color: var(--auf-hell); } .skarte--gross a.skarte__fall:hover { background: #fff; border-color: #fff; color: var(--c-900); } .skarte--gross a.skarte__fall:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 640px) { .stufenraster { grid-template-columns: 1fr; } .skarte--gross .skarte__fakten { grid-template-columns: 1fr; } .skarte--gross .skarte__fakten > div { flex-direction: row; justify-content: space-between; } } /* ---- Filterleiste ------------------------------------------------------ Drei Ausklappmenues in einer Zeile statt zwoelf Schaltern in drei Reihen. Nimmt denselben Platz wie eine Ueberschrift und beantwortet die Frage "welcher Kurs ist fuer mich" in einem Griff. ---------------------------------------------------------------------- */ /* Die Filter stehen frei, nicht in einem Kasten — ein Kasten um Auswahlfelder ist ein Rahmen um Rahmen. Der Hinweis "Inhouse oder offen" sitzt als einziger Kasten daneben und bekommt damit das Gewicht für sich. */ /* Der Hinweiskasten bekommt fast die Hälfte der Breite. Vorher hatte er nur ein Drittel und wurde dadurch schmal und hoch — bei zwei Sätzen Inhalt ein Turm neben einer flachen Filterzeile. */ .filterzeile { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } @media (max-width: 900px) { .filterzeile { grid-template-columns: 1fr; } } /* Zwei Auswahlfelder, daneben der Zurücksetzen-Link. Vorher waren es drei: der Formatfilter ist entfallen, weil jede Schulung in beiden Formaten möglich ist -- ein Filter, dessen jede Einstellung alle sechs Kurse zeigt, ist eine Bedienung, die nichts bedient. Der Link steht senkrecht mittig zu den Feldern, nicht auf ihrer Grundlinie: die Felder sind Beschriftung plus Kasten, und die Mitte dieses Blocks ist die Höhe, auf der das Auge den Link erwartet. */ .filterleiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: .75rem .875rem; align-items: end; } /* Keine eigene Groesse: eine Formularbeschriftung ist eine Formularbeschriftung. Stand vorher eine Stufe kleiner. */ .filterleiste select { padding: .5rem .625rem; font-size: var(--fs-feld); } /* Der Link bekommt annähernd die senkrechten Maße eines Auswahlfelds: gleiche Innenabstände, ein durchsichtiger Rahmen von 1 px. Die Schriftgröße ist bewusst anders — er ist ein Knopf (12 px), das Feld muss 16 px tragen, damit iOS beim Fokus nicht zoomt. Damit ist seine Box exakt so hoch wie ein Feld und der Text sitzt auf deren Mitte. Mit align-self:center saß er vorher auf der Mitte aus Beschriftung UND Feld — also sichtbar zu hoch. */ .filterleiste__reset { align-self: end; justify-self: start; white-space: nowrap; display: inline-flex; align-items: center; background: none; border: 1px solid transparent; padding: .5rem 0; cursor: pointer; font-size: var(--fs-klein); color: var(--c-700); text-decoration: underline; text-underline-offset: .18em; } .filterleiste__reset:hover { color: var(--c-500); } @media (max-width: 1080px) { .filterleiste { grid-template-columns: 1fr 1fr; } .filterleiste__reset { grid-column: 1 / -1; align-self: start; } } @media (max-width: 560px) { .filterleiste { grid-template-columns: 1fr; } } /* ---- Eingang und Ausgang in der Kachel -------------------------------- Zwei feste Zeilen: was der Assistent liest, was er erzeugt. Ersetzt den Beschreibungssatz, der vorher dasselbe in Prosa sagte. Eine Angabe für zwei Zielgruppen: der Geschäftsführer liest konkrete Dokumente, der ITler den Datenfluss. Der Beschreibungssatz konnte das nicht, weil er für eine der beiden Seiten immer zu vage war. ---------------------------------------------------------------------- */ .fluss { display: grid; gap: .3125rem; margin-top: .75rem; } .fluss > div { display: grid; grid-template-columns: 4.75rem 1fr; gap: .625rem; align-items: baseline; } .fluss dt { font-size: var(--fs-klein); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); } .fluss dd { margin: 0; font-size: var(--fs-klein); color: var(--text); min-width: 0; } @media (max-width: 420px) { .fluss > div { grid-template-columns: 1fr; gap: .0625rem; } } /* ---- PDF-Schau --------------------------------------------------------- Ein Musterdokument direkt auf der Seite statt eines Fotos von einem Dokument. Der Leser sieht, was am Ende herauskommt, ohne etwas herunterzuladen und ohne die Seite zu verlassen. statt