/* ========================================================================== Stellenkarten auf der Startseite GESCHICHTE, damit der naechste Schritt sie nicht wiederholt: Am 28.08.2026 waren die Listingseiten kurzzeitig auf das PANEL der Karrieresektion umgebaut - umrandeter Kasten, Zeilen durch feine Linien getrennt. Als unuebersichtlicher gemeldet. Die Kartenansicht ist zurueck, und die Startseite folgt ihr jetzt: dort standen die Stellen als Zeilen in zwei Panels, hier stehen sie als Karten wie ueberall sonst im Projekt. DIE KARTENWERTE STEHEN NICHT HIER, sondern an .stkarte in pages/karriere.css - das ist die Karte des Projekts. Diese Datei richtet nur die Auszeichnung der STARTSEITE darauf aus. Waeren die Werte doppelt, wuerden sie auseinanderlaufen; das ist im Projekt schon zweimal passiert. ========================================================================== */ /* Zwei Spalten bleiben - so war die Sektion freigegeben. */ .karr__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--sp-4), 2.5vw, var(--sp-5)); align-items: start; } @media (max-width: 56rem) { .karr__panels { grid-template-columns: 1fr; } } /* KEIN PANEL MEHR: die Spalte traegt nur noch Ueberschrift, Karten und den Weg. Flaeche, Rand und Schatten sitzen an den Karten. */ .karr__jobs { display: grid; align-content: start; gap: var(--sp-4); } .karr__jobs h3 { font-size: var(--fs-300); font-weight: 700; color: var(--toem-blau); margin: 0; } /* Eine Spalte je Panelseite - die zwei Spalten macht .karr__panels. */ .karr__list { display: grid; gap: var(--sp-4); } /* Die Karte. Werte wortgleich von .stkarte - dieselbe Karte, andere Seite. */ .karr__job { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-5); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-karte); transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); } .karr__job:hover, .karr__job:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-2); } .karr__job__text { display: grid; gap: var(--sp-2); min-width: 0; } .karr__job__title { display: block; font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-snug); color: var(--toem-blau); overflow-wrap: break-word; } .karr__job__meta { display: block; font-size: var(--fs-200); color: var(--text-muted); } .karr__job svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: 0 0 auto; color: var(--toem-gold); transition: transform var(--dur-hover) var(--ease-hover); } .karr__job:hover svg, .karr__job:focus-visible svg { transform: translateX(3px); } /* ========================================================================== DIE KARTE DES PROJEKTS Verschoben aus pages/karriere.css am 28.08.2026, unveraendert. Sie wird an vier Stellen gebraucht: Stellenarchiv, Ausbildungsseite, Stellendetail ("Weitere Stellen") und als .stkarte--weg auf /handel/ und /unternehmen/historie/ - dazu jetzt auf der STARTSEITE, die pages/karriere.css nicht laedt. ========================================================================== */ /* ZWEISPALTIG, gemeldet am 28.08.2026. Vorher eine Spalte in 52rem Breite bei 1208 px Satzspiegel - das rechte Drittel blieb leer. DER WEG STEHT DABEI UNTER DEM TEXT, nicht daneben. Gemessen bei 588 px Kartenbreite: "Zur Stelle" rechts Titelspalte 396 px 7 von 9 Titeln mehrzeilig "Zur Stelle" unten Titelspalte 540 px 1 von 9 Titeln mehrzeilig Die Karte wird dadurch rund 18 px hoeher, die Titel bleiben aber einzeilig. Dieselbe Anordnung traegt .stkarte--weg schon auf /handel/ und /unternehmen/historie/. */ /* ZAEHLZEILE UEBER DEN KARTEN. Sie war vorher .visually-hidden und traegt jetzt die Zahl der offenen Stellen - der Kunde wollte sie unmittelbar an den Karten, nicht als Eyebrow ueber dem Bogen. FARBE KOMMT AUS sektionstitel.css. Die Zeile stand zuerst nicht in dessen handgepflegter Selektorenliste und fiel damit auf Fliesstext-Tinte und Gewicht 700 zurueck - der VIERTE Fall derselben Falle im Projekt, nach .kakopf__title, .hiepoche__title und .kabereiche__title. Wer hier einen neuen Titel anlegt, traegt ihn dort ein. 64 px nach unten: das Hausmass zwischen Titelblock und Kartenraster. .kawege__grid laeuft auf demselben Wert, die Startseite misst dort 62 px. */ /* GEWICHT 600, nicht 400. Die Gewichtsregel in sektionstitel.css: mit Schwungzeile 400, ohne Schwungzeile 600 - die Zeile steht allein und muss die Praesenz selbst tragen. Die geteilte Regel setzt 400, weil sie fuer Titel MIT geschrieben ist. */ .stliste__zahl { margin: 0 0 var(--sp-8); font-weight: 600; } .stliste__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--sp-5), 3vw, var(--sp-6)); } @media (max-width: 56rem) { .stliste__grid { grid-template-columns: 1fr; } } .stliste__grid .stkarte, .karr__list .stkarte { grid-template-columns: minmax(0, 1fr); align-items: start; } /* DER PFEIL AN DEN FUSS DER KARTE, 15.09.2026. In der zweispaltigen Liste stehen zwei Karten nebeneinander und sind gleich hoch; der Pfeil sass aber direkt unter dem Text seiner eigenen Karte. Bricht ein Stellentitel zweizeilig und der daneben einzeilig, landen die zwei Pfeile auf verschiedenen Hoehen - GEMESSEN 11 px, auf neun Seiten und bei 1024, 1280 und 1440 px, einmal auch 22 px. align-content: space-between schiebt den freien Platz zwischen die beiden Zeilen der Karte, also unter den Text. Die Karte hat genau zwei Kinder (Text und Pfeil), deshalb geht das auf; bei einem dritten muesste man auf grid-template-rows umstellen. NUR IN DER ZWEISPALTIGEN LISTE: einspaltig gibt es keinen Nachbarn, an dem sich etwas ausrichten muesste, und der Pfeil soll dort dicht am Text bleiben. */ .stliste__grid .stkarte__pfeil, .karr__list .stkarte__pfeil { justify-self: start; margin-top: var(--sp-2); } @media (min-width: 56.0625rem) { .stliste__grid .stkarte { align-content: space-between; } } /* Eine Spalte, nicht drei. Stellentitel sind lang ("Anlagenfahrer Saatlager mit Vertretungsfunktion Teamleitung Saatlager") und wuerden in einer Kachelspalte vierzeilig umbrechen. Eine Zeile je Stelle liest sich wie eine Liste, und das ist es auch. */ .stkarte { /* relative wegen des ::after, das den Hoverschatten traegt. */ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-5); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-karte); transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); } /* HUB WIE ALLE ANDEREN KARTEN: var(--lift), also -4 px. Erste Fassung hatte -2 px - eine Abweichung ohne Grund, gemeldet am 28.08.2026. Vergleich: a.pshops__item, a.b2b__card, .kontakt__way, .prod__card, .rez__card und .usp__item heben alle um var(--lift). AUSNAHME, die bleibt: .usp__item und .prod__action nehmen --shadow-3 statt --shadow-2. Das ist begruendet und im jeweiligen CSS dokumentiert - unter dem dunklen USP-Textblock und auf der dunkelblauen Flaeche von .prod__action ist die leichte Schattenstufe nicht zu sehen. */ /* Ruhestufe mit der Geometrie der Hoverstufe, siehe tokens.css: damit aendert der Uebergang nur die Deckkraft. Der erste Ansatz mit einem ::after und opacity ist wieder raus - er funktioniert nur hier, weil .stkarte kein overflow: hidden traegt, und waere bei den sechs anderen Karten unsichtbar gewesen. Eine Loesung fuer alle ist besser als zwei. */ .stkarte:hover, .stkarte:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-2); } .stkarte:hover .stkarte__pfeil, .stkarte:focus-visible .stkarte__pfeil { color: var(--toem-gold); } .stkarte:hover .stkarte__pfeil svg, .stkarte:focus-visible .stkarte__pfeil svg { transform: translateX(3px); } /* ALLEIN STEHEND, ohne Karte drumherum - „Jetzt bewerben" unter Praktika & Aushilfen (Wunsch vom 25.09.2026: „den Hover anpassen mit dem Pfeil wie bei den anderen Textlinks"). Die Regeln darueber haengen am :hover der Karte; ohne Karte reagierte der Link gar nicht. Derselbe Hover wie .rez__all: Gold, und der Pfeil rueckt 3 px vor. */ a.stkarte__pfeil { transition: color var(--dur) var(--ease); } a.stkarte__pfeil:hover, a.stkarte__pfeil:focus-visible { color: var(--toem-gold); } a.stkarte__pfeil:hover svg, a.stkarte__pfeil:focus-visible svg { transform: translateX(3px); } /* --- Teaser-Variante: Weg in einen Zweig -------------------------------- */ /* DIE CTA GEHOERT NACH UNTEN LINKS, nicht mittig an den rechten Rand. Gemeldet am 28.08.2026: bei drei Karten nebeneinander mit unterschiedlich langem Untertitel stand "Ansehen" auf drei verschiedenen Hoehen und wirkte willkuerlich. margin-top: auto setzt sie auf die Grundlinie der Karte, damit stehen alle drei gleich - dasselbe Muster wie .b2b__cta auf der Startseite. In der LISTE bleibt die Zeilenform: dort ist die CTA rechts richtig, weil jede Stelle eine Zeile ist. Deshalb eine Variante und keine Aenderung an .stkarte selbst - vierzehn Stellenzeilen mit CTA unter dem Text waeren dreizeilig und die Liste doppelt so hoch. */ .stkarte--weg { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-4); } .stkarte--weg .stkarte__pfeil { margin-top: auto; } /* ========================================================================== DIE KARTE DES PROJEKTS Verschoben aus pages/karriere.css am 28.08.2026, unveraendert. Sie wird an vier Stellen gebraucht: Stellenarchiv, Ausbildungsseite, Stellendetail ("Weitere Stellen") und als .stkarte--weg auf /handel/ und /unternehmen/historie/ - dazu jetzt auf der STARTSEITE, die pages/karriere.css nicht laedt. ========================================================================== */ .stkarte__text { display: grid; gap: var(--sp-2); min-width: 0; } .stkarte__titel { margin: 0; font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-snug); color: var(--toem-blau); } .stkarte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-200); color: var(--text-muted); } /* Der Punkt zwischen den Angaben kommt aus dem CSS, nicht aus dem Text - sonst liest ein Screenreader "Vollzeit Punkt Ibbenbueren". */ .stkarte__meta i { width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--c-grau-300); } .stkarte__pfeil { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-200); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--toem-blau); } /* DER PFEIL BRAUCHTE EINE TRANSITION. Er wechselte beim Hover die Farbe, hatte aber keine - gemessen transition-property: all, duration 0s, also ein harter Sprung. Das war der einzige echte Sprung unter allen Karten der Website und der Grund, warum sich der Hover hier anders anfuehlte. Dazu die Pfeilbewegung von 3 px, die alle uebrigen Karten schon haben (.b2b__cta, .karr__job, .rez__all, .prod__all, .herst__all). */ .stkarte__pfeil svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; transition: transform var(--dur-hover) var(--ease-hover); } .stkarte__pfeil { transition: color var(--dur-hover) var(--ease-hover); }