/* ============================================================ ATG-Gigerl - LAYOUT 51: ZEITACHSE Liegt unter: fileadmin/templates/css/zeitachse.css Stand: 03.11.2026 - neu Die Unternehmensgeschichte als Achse mit vier Stationen. Entstanden fuer die Seite "Unternehmen", aber nicht an sie gebunden: jede Seite kann den Block ueber das Backend-Feld "Layout" aufrufen. Muss NACH tokens.css und design.css geladen werden. Alle Masse und Farben stehen als --atg-zl-* in tokens.css, hier steht keine einzige Zahl ausser den Rechenkonstanten 2 (halber Durchmesser) und -1 (Vorzeichenwechsel). ------------------------------------------------------------ DAS INHALTSELEMENT bootstrap_package "Card Group", je Station eine Karte. Markup, am 22.09.2026 im DOM der Live-Vorschau nachgesehen und in css/inhaltsbloecke.css dokumentiert: div.card-group-element div.card-group-element-item div.card div.card-img-top Feld "Image" div.card-body h2.card-title Feld "Header" h3.card-subtitle Feld "Subheader" p Feld "Text" div.card-footer > a.btn Feld "Link" Belegt werden drei Felder: Header = Jahreszahl ("1998", "Bis heute") Subheader = Titel ("Die Gruendung") Text = Beschreibung Bild und Link bleiben leer; beides ist unten ausgeblendet, weil die Station dafuer keinen Platz hat. ------------------------------------------------------------ WARUM DIE REIHENFOLGE UEBER "order" GESETZT WIRD Dass der Subheader als h3.card-subtitle herauskommt, ist am 22.09.2026 im DOM geprueft; dass der Fliesstext als nackter Absatz in derselben Huelle steht, ebenfalls (Kartengruppe der Startseite). Ungeprueft ist, ob TYPO3 den Absatz VOR oder NACH dem Subheader schreibt - auf der Live-Seite ist bisher kein Kartenelement mit beiden Feldern gefuellt. Statt das zu raten, bekommt jeder Teil seinen Platz ausdruecklich zugewiesen. Die Darstellung stimmt damit in beiden Faellen. ------------------------------------------------------------ WARUM DER PUNKT EIN HINTERGRUNDBILD IST Eine Station hat vier Teile - Jahreszahl, Punkt, Titel, Text - aber nur drei Felder im Backend. Fuer den Punkt gibt es also kein Element. Er wird deshalb zusammen mit dem Stueck Achse, das bis zur naechsten Station reicht, als Hintergrundbild eines Pseudoelements gezeichnet: ein radialer Verlauf fuer den Ring, ein linearer fuer die Linie. Der Ring ist hohl, weil seine Fuellung die Bandfarbe traegt. Die letzte Station setzt --atg-zl-punkt-fill auf die Randfarbe und hat dadurch einen gefuellten Punkt, ohne dass es eine zweite Regel fuer den Hintergrund braucht. Gegenprobe vor dem Upload: file --mime-type -b css/zeitachse.css Es muss text/plain oder text/css herauskommen. ============================================================ */ /* ============================================================ 1 - DAS BAND ============================================================ Helles Band ueber die volle Bildschirmbreite, dieselbe Technik wie bei den Baendern in inhaltsbloecke.css: der Abschnitt hat weder Hoechstbreite noch Innenabstand, die Inhaltskante regelt main .frame-container aus design.css. Die 42px Luft, die jedes Inhaltselement aus dem Theme mitbringt, liegen INNERHALB der farbigen Flaeche und kommen zur Bandluft dazu. Sie werden deshalb abgezogen; die Luft steht ausschliesslich in --atg-zl-band-y. */ .atg-zeitachse.section { background: var(--atg-zl-band); padding-block: var(--atg-zl-band-y); } .atg-zeitachse .frame { padding-block: 0; } .atg-zeitachse .frame-header { margin: 0 0 var(--atg-zl-head-gap); } /* ============================================================ 2 - DIE REIHE DER STATIONEN ============================================================ Das Theme macht aus der Kartengruppe einen Flex-Kasten und rechnet die Kartenbreite am Element selbst aus: width: calc(100% / var(--cardgroup-columns) - ...). In einem Raster bezieht sich das Prozentzeichen auf die Rasterspalte, die Karte wuerde also ein zweites Mal geteilt. Dieselbe Falle wie bei Produktvorschau und Hinweiskarten. Die Spaltenzahl steht hier und nicht im Backend-Feld "Spalten": der Block kippt bei 1024px auf eine Spalte, und das kann ein Backend-Feld nicht. */ .atg-zeitachse .card-group-element { display: grid; grid-template-columns: repeat(var(--atg-zl-cols), minmax(0, 1fr)); gap: var(--atg-zl-gap); margin: 0; padding: 0; } .atg-zeitachse .card-group-element-item { width: 100%; max-width: none; margin: 0; padding: 0; } /* Die Karte ist keine Karte: kein Rahmen, keine Flaeche, kein Innenabstand. Sie ist nur die Huelle einer Station. */ .atg-zeitachse .card { display: block; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .atg-zeitachse .card-img-top, .atg-zeitachse .card-footer { display: none; } /* ============================================================ 3 - EINE STATION, WAAGRECHT (ab 1024px) ============================================================ Jahreszahl, Punkt, Titel, Text untereinander. Die vier Teile liegen alle in derselben Huelle, deshalb ist sie ein Flex-Kasten und jeder Teil bekommt seinen Platz ueber "order". Der Punkt ist dabei das Pseudoelement der Huelle - ein Pseudoelement eines Flex-Kastens ist ein Flex-Element und reiht sich wie die uebrigen Teile ein. */ .atg-zeitachse .card-body { display: flex; flex-direction: column; margin: 0; padding: 0; background: none; } .atg-zeitachse .card-title { order: 1; margin: 0 0 var(--atg-zl-jahr-gap); font-size: var(--atg-zl-jahr-fs); font-weight: 700; line-height: var(--atg-zl-jahr-lh); color: var(--atg-zl-jahr); } /* Punkt und das Stueck Achse bis zur naechsten Station. align-self: stretch gibt dem Kasten die volle Spaltenbreite - in einem senkrechten Flex-Kasten ist die Breite die Querachse. Der negative rechte Rand schiebt ihn zusaetzlich ueber die Spaltenluft hinweg, damit die Linie ohne Unterbrechung beim Punkt der naechsten Station ankommt. Zwei Hintergrundbilder: zuerst der Ring, darunter die Linie. Was im Ring durchsichtig ist, laesst die Linie durch; die Fuellung des Rings deckt sie ab. */ .atg-zeitachse .card-body::before { order: 2; content: ""; align-self: stretch; height: var(--atg-zl-punkt); margin: 0 calc(-1 * var(--atg-zl-gap)) var(--atg-zl-punkt-gap) 0; background-image: radial-gradient(circle at calc(var(--atg-zl-punkt) / 2) 50%, var(--atg-zl-punkt-fill) 0 calc(var(--atg-zl-punkt) / 2 - var(--atg-zl-punkt-rand)), var(--atg-zl-punkt-farbe) calc(var(--atg-zl-punkt) / 2 - var(--atg-zl-punkt-rand)) calc(var(--atg-zl-punkt) / 2), transparent calc(var(--atg-zl-punkt) / 2)), linear-gradient(var(--atg-zl-linie), var(--atg-zl-linie)); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, 100% var(--atg-zl-achse); background-position: 0 0, 0 50%; } .atg-zeitachse .card-subtitle { order: 3; margin: 0 0 var(--atg-zl-titel-gap); font-size: var(--atg-zl-titel-fs); font-weight: 700; line-height: var(--atg-zl-titel-lh); color: var(--atg-zl-titel); /* Das Theme setzt auf die Unterueberschrift der Karte "text-wrap: balance". Der Browser verteilt die Woerter dann auf gleich lange Zeilen - bei "Zusammenschluss und neue Ausrichtung" stand dadurch in der engen Spalte ein einzelnes Wort auf der letzten Zeile. */ text-wrap: wrap; } .atg-zeitachse .card-body p { order: 4; margin: 0; font-size: var(--atg-zl-text-fs); line-height: var(--atg-zl-text-lh); color: var(--atg-zl-text); } /* Die letzte Station ist der heutige Stand: gefuellter Punkt, keine Linie mehr nach rechts, Jahreszahl im dunklen Tuerkis der Achse. Der gefuellte Punkt entsteht allein dadurch, dass die Fuellung des Rings auf die Randfarbe wechselt. */ /* Der Wert sitzt auf der KARTE und nicht auf der Texthuelle: senkrecht zeichnet das Pseudoelement der Karte den Punkt, waagrecht das der Texthuelle. Von der Karte aus erben beide. */ .atg-zeitachse .card-group-element-item:last-child .card { --atg-zl-punkt-fill: var(--atg-zl-punkt-farbe); } .atg-zeitachse .card-group-element-item:last-child .card-body::before { background-size: 100% 100%, 0 0; } .atg-zeitachse .card-group-element-item:last-child .card-title { color: var(--atg-zl-jahr-jetzt); } /* ============================================================ 4 - EINE STATION, SENKRECHT (bis 1023px) ============================================================ --atg-zl-cols steht hier auf 1, die Stationen stehen also untereinander. Die Achse kippt mit: sie laeuft als senkrechte Linie links neben dem Text nach unten. Dafuer wird die Karte selbst zum Raster mit zwei Spalten - links die Achse, rechts der Text. Die Achse ist jetzt das Pseudoelement der KARTE, nicht das der Texthuelle: nur so steht sie neben allen vier Teilen statt zwischen zweien. Der Punkt sitzt auf der Mitte der ersten Textzeile. Diese Hoehe ist gerechnet, nicht geschaetzt: Schriftgroesse der Jahreszahl mal Zeilenhoehe, davon die Haelfte, minus den halben Durchmesser des Punktes. */ @media (max-width: 1023.98px) { .atg-zeitachse .card { display: grid; grid-template-columns: var(--atg-zl-punkt) minmax(0, 1fr); column-gap: var(--atg-zl-v-gap); } .atg-zeitachse .card::before { content: ""; grid-area: 1 / 1; /* reicht ueber die Zeilenluft hinweg bis zum Punkt der naechsten Station */ margin-bottom: calc(-1 * var(--atg-zl-gap)); background-image: radial-gradient(circle at 50% calc(var(--atg-zl-punkt) / 2), var(--atg-zl-punkt-fill) 0 calc(var(--atg-zl-punkt) / 2 - var(--atg-zl-punkt-rand)), var(--atg-zl-punkt-farbe) calc(var(--atg-zl-punkt) / 2 - var(--atg-zl-punkt-rand)) calc(var(--atg-zl-punkt) / 2), transparent calc(var(--atg-zl-punkt) / 2)), linear-gradient(var(--atg-zl-linie), var(--atg-zl-linie)); background-repeat: no-repeat, no-repeat; background-size: var(--atg-zl-punkt) var(--atg-zl-punkt), var(--atg-zl-achse) 100%; background-position: 0 calc(var(--atg-zl-jahr-fs) * var(--atg-zl-jahr-lh) / 2 - var(--atg-zl-punkt) / 2), 50% calc(var(--atg-zl-jahr-fs) * var(--atg-zl-jahr-lh) / 2); } .atg-zeitachse .card-body { grid-area: 1 / 2; } /* Der Punkt steht jetzt links. Die Zeile, die ihn waagrecht getragen hat, faellt weg - samt ihren Abstaenden. Der Abstand Jahreszahl -> Titel haengt dann allein an --atg-zl-jahr-gap. */ .atg-zeitachse .card-body::before { display: none; } .atg-zeitachse .card-group-element-item:last-child .card::before { background-size: var(--atg-zl-punkt) var(--atg-zl-punkt), 0 0; } }