/* ============================================================ ATG-Gigerl – News-Bereich der Startseite Liegt unter: fileadmin/templates/css/news-design.css Stand: 29.10.2026 - kleiner Bildrahmen mittig in der Karte. Davor: 29.09.2026, Band mit Lichtflaechen und Ueberschrift wie bei der Produktvorschau. Davor: 21.09.2026, komplett neu geschrieben Die vorige Fassung stammte von der Vorgaengerseite: orange Schaltflaechen, vierspaltige Liste mit Prozentmassen, drei einander widersprechende float-Regeln fuer dasselbe Bild. Sie ist vollstaendig ersetzt. Der letzte Abschnitt dieser Datei haelt die Detailansicht einer Meldung als Uebergang am Leben. Formatiert die Listenansicht von tx_news zu dem Block "Neuigkeiten in der Autogentechnik" auf der Startseite. Muss NACH tokens.css und NACH design.css geladen werden. ------------------------------------------------------------ WORAN DAS DESIGN HAENGT An der Klasse .atg-news, gesetzt vom Layout-CASE in autogentechnik.typoscript (Layout 22). Nicht an einer frame-Klasse von bootstrap_package - der Wert aus dem Layout-Feld kommt dort gar nicht an. ------------------------------------------------------------ DAS MARKUP, am 21.09.2026 im DOM der Live-Vorschau nachgesehen: div.section.atg-news > div.reveal div.frame.frame-type-news_pi1 ... frame-container > frame-inner div.frame-header h4.element-header Feld "Header" (Kicker) h5.element-subheader Feld "Subheader" (Ueberschrift) div.news > div.news-list-view div.article div.header > h3 > a > span Titel, verlinkt div.news-img-wrap > span > a > img div.teaser-text div[itemprop=description] Anrisstext a.more "Weiterlesen" div.footer > p > span.news-list-date > time Die Anzeigereihenfolge Bild - Datum - Titel - Knopf wird mit order hergestellt, am Markup ist nichts geaendert. ------------------------------------------------------------ WARUM FAST JEDE REGEL ".atg-news .news .article ..." HEISST Die Extension laedt eine eigene Datei typo3conf/ext/news/Resources/Public/Css/news-basic.css und zwar NACH allen Dateien aus page.includeCSS - am 21.09.2026 an der Live-Seite nachgesehen: sie steht an Position 15, persoenlich.css an 13. Bei gleicher Spezifitaet gewinnt sie damit. Ihre Regeln stammen aus der float-Zeit und wuerden diesen Block zerlegen: .news .article Aussenabstand unten 15px .news .article::after ein Kind mit einem Punkt .news .article .news-img-wrap float: left, Abstaende .news .article .news-img-wrap a grauer Rahmen, 4px Rand .news .article .news-img-wrap img float, width: auto .news .article .teaser-text Abstand unten 10px .news .footer graue Linie oben, grau .news .footer span senkrechter Trennstrich Die drei Bildregeln haben drei Klassen. Eine Regel mit ".atg-news .news-img-wrap" (zwei Klassen) verliert dagegen - das Bild waere links umflossen, mit Rahmen, in Originalgroesse. Deshalb steht vor den Kartenregeln ".atg-news .news .article", und die Vorgaben werden dort ausdruecklich zurueckgesetzt (float: none, border: 0 und so weiter). Jede dieser Stellen ist im Code vermerkt. ------------------------------------------------------------ ALLE ZAHLEN STEHEN IN tokens.css. ============================================================ */ /* ============================================================ 1 - DAS DUNKLE BAND ============================================================ */ /* Der Selektor steht bewusst andersherum als man ihn schreiben wuerde. Eine Zeile, die mit ".section" beginnt, haelt TYPO3 beim Upload fuer Assembler-Quelltext und lehnt die ganze Datei ab (siehe README). Hier .atg-news.section - dasselbe Ziel, dieselbe Spezifitaet. background-color und background-image stehen getrennt: die Kurzschreibweise background wuerde das Bild wieder zuruecksetzen. */ .atg-news.section { background-color: var(--atg-nw-band); background-image: var(--atg-nw-glow); padding-block: var(--atg-nw-band-y); color: var(--atg-on-dark); overflow-x: hidden; } /* ============================================================ 2 - BLOCKKOPF ============================================================ */ /* Seit dem 29.09.2026 traegt die Ueberschrift dieselbe Optik wie die der Produktvorschau und der Unterseiten: weiss, groesser, mit tuerkisem Unterstrich. Die frueher durchgehende Trennlinie unter dem ganzen Kopf ist dabei entfallen - zwei Striche uebereinander waeren einer zu viel. Der Kicker aus dem Feld "Header" bleibt, wie er war. Groesse, Versalien und Sperrung kommen aus der h4-Regel in design.css, hier wird nur die Farbe getauscht: das Grau von dort ist auf dem dunklen Band unlesbar. */ .atg-news .frame-header { margin: 0 0 var(--atg-nw-head-gap); } .atg-news .frame-header .element-header { color: var(--atg-accent); } .atg-news .frame-header .element-subheader { margin-bottom: 0; font-size: var(--atg-nw-head-fs); color: var(--atg-on-dark); /* der einfahrende Unterstrich aus design.css, hier hell */ --atg-h-underline: var(--atg-accent); } /* ============================================================ 3 - RASTER AB 1024 PIXEL ============================================================ */ .atg-news .news-list-view { display: grid; grid-template-columns: repeat(var(--atg-nw-cols), 1fr); /* 1fr: sonst bemisst sich eine Zeile nur an ihrer eigenen laengsten Karte. */ grid-auto-rows: 1fr; gap: var(--atg-nw-gap); margin: 0; padding: 0; } /* ============================================================ 4 - DIE KARTE ============================================================ */ .atg-news .news .article { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; background: var(--atg-white); transition: transform var(--atg-nw-hover-time), box-shadow var(--atg-nw-hover-time); } /* Linie, die beim Darueberfahren oben einfaehrt. z-index: 2 ist Pflicht - ohne das liegt das Bildfeld darueber und die Linie bleibt unsichtbar. */ .atg-news .news .article::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: var(--atg-nw-rule); background: var(--atg-accent-deep); transform: scaleX(0); transform-origin: left center; transition: transform var(--atg-nw-hover-time); z-index: 2; } /* news-basic.css haengt an jede Karte ein ::after mit einem Punkt als Inhalt - ein Ueberbleibsel der float-Zeit. Im Flex-Kasten waere das ein zusaetzliches Kind. */ .atg-news .news .article::after { content: none; } /* Anzeigereihenfolge: Bild, Datum, Titel, Knopf. */ .atg-news .news .article > .news-img-wrap { order: 1; } .atg-news .news .article > .footer { order: 2; } .atg-news .news .article > .header { order: 3; } .atg-news .news .article > .teaser-text { order: 4; } /* ---------- Bildfeld ---------- */ /* Kein position:relative - die Hover-Linie der Karte ist ein ::before am .article und braucht ihren z-index 2, um ueber dem Bildrahmen zu liegen. Wer dem Rahmen hier eine Position gibt, prueft das mit. Der Rahmen hat eine feste HOEHE und keine feste Breite: die ergibt sich aus dem Bild. Deshalb steht hier KEIN aspect-ratio. Ein Hochformat sitzt damit randlos im Rahmen, ein Querformat bekommt einen breiteren und fuellt ihn ebenfalls - beschnitten wird nie etwas. align-self: center stellt den Rahmen mittig in die Karte; flex: 0 0 auto und min-height: 0 verhindern, dass der Flex-Kasten ihn streckt oder staucht. max-width deckelt ihn auf die Inhaltsbreite der Karte - greift nur bei sehr breiten Querformaten, das Bild passt sich dann darin ein. box-sizing ausdruecklich, damit der 1px-Rahmen in der Hoehe enthalten ist. */ .atg-news .news .article .news-img-wrap { display: block; flex: 0 0 auto; align-self: center; box-sizing: border-box; height: var(--atg-nw-shot-h); width: auto; max-width: calc(100% - 2 * var(--atg-nw-pad)); min-height: 0; /* news-basic.css stellt das Bildfeld auf float: left mit Aussenabstand - das ist die Anordnung "Text umfliesst Vorschaubild" der Grundformatierung. */ float: none; margin: var(--atg-nw-shot-gap) 0 0; padding: 0; overflow: hidden; border: 1px solid var(--atg-nw-shot-line); border-radius: var(--atg-nw-shot-radius); background: var(--atg-nw-shot-bg); } /* tx_news legt um das Bild je nach Datensatz einen span (.no-media-element) und einen Link. Beide werden auf volle Hoehe gestellt und von den Resten der alten Datei befreit. width: auto ist wichtig - sonst spannen sie die Breite auf und der Rahmen kann sich nicht um das Bild legen. */ .atg-news .news .article .news-img-wrap span, .atg-news .news .article .news-img-wrap a { display: block; float: none; width: auto; height: 100%; margin: 0; /* news-basic.css legt dem Link einen grauen Rahmen und 4px Innenabstand um das Bild. */ padding: 0; border: 0; background: none; } /* contain und width: auto - das Bild bestimmt die Breite des Rahmens und wird nie beschnitten. Verlauf, damit es nicht ein viertes Mal von vorn beginnt: 22.09. cover im 16:9-Feld ueber die ganze Kartenbreite. Vom ersten echten Beitragsbild - einem Magazin-Cover - blieb ein Streifen aus der Mitte uebrig. 07.10. contain mit unscharfem Hintergrund, Feld 4:5. Vollstaendig sichtbar, aber klein und von Streifen umgeben. 12.10. cover im Feld 3:4 ueber die ganze Kartenbreite. Das Bild fuellte das Feld - der Abschnitt war dadurch so hoch wie das Browserfenster. 29.10. kleiner Rahmen mittig in der Karte, Bild darin vollstaendig. Entscheidung des Nutzers, Vorbild sind die Bildrahmen der Download-Karten. */ .atg-news .news .article .news-img-wrap img { display: block; float: none; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: center; } /* ---------- Datum ---------- */ /* Steht im Markup in div.footer ganz unten und war in der alten Datei ausgeblendet. Hier kommt es per order nach oben. */ .atg-news .news .article > .footer { display: block; /* news-basic.css gibt der Fusszeile eine graue Linie oben, einen Aussenabstand und graue Schrift. */ clear: none; border-top: 0; color: inherit; margin: 0; padding: var(--atg-nw-pad) var(--atg-nw-pad) 0; } .atg-news .news .article > .footer p { margin: 0; } .atg-news .news .article .news-list-date { display: inline-block; /* news-basic.css setzt hinter jede Angabe der Fusszeile einen senkrechten Trennstrich. Bei nur einer Angabe steht er sinnlos hinter dem Datum. */ border-right: 0; padding-right: 0; margin-right: 0; font-size: var(--atg-nw-date-fs); font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--atg-accent-deep); } /* ---------- Titel ---------- */ .atg-news .news .article > .header { padding: var(--atg-nw-date-gap) var(--atg-nw-pad) 0; } /* Die alte Datei gab h3 eine min-height von 50px und einen Aussenabstand in Prozent - beides wuerde die gleiche Kartenhoehe stoeren. */ .atg-news .news .article h3 { font-size: var(--atg-nw-title-fs); font-weight: 700; line-height: 1.24; letter-spacing: -.008em; margin: 0; min-height: 0; /* Bei 1024px ist die Textspalte nur 181px breit. Lange deutsche Woerter wie "Flaschendruckminderer" muessen dort trennen duerfen. */ hyphens: auto; overflow-wrap: break-word; } .atg-news .news .article h3 a, .atg-news .news .article h3 a span { /* Das !important ist noetig: design.css Zeile 156 setzt main a { color: #52bfd3 !important }. Gegen ein !important hilft nur ein zweites. */ color: var(--atg-petrol) !important; text-decoration: none; } /* Kurze Akzentlinie unter dem Titel - dasselbe Element wie an der Produktkarte, es bindet die beiden Kartengruppen optisch zusammen. */ .atg-news .news .article h3::after { content: ""; display: block; width: var(--atg-nw-accent-w); height: var(--atg-nw-rule); margin-top: var(--atg-nw-accent-gap); background: var(--atg-accent-deep); } /* ---------- Anrisstext ---------- Bleibt vorerst aus: die Karte traegt Datum, Titel und Knopf. Soll er doch mit, genuegt hier display:block und eine Begrenzung auf zwei Zeilen. */ .atg-news .news .article .teaser-text [itemprop="description"] { display: none; } /* ---------- Knopf "Weiterlesen" ---------- */ /* margin-top:auto schiebt den Knopf auf die Unterkante. Damit stehen die Knoepfe aller Karten einer Reihe auf derselben Hoehe, unabhaengig von der Laenge des Titels. */ .atg-news .news .article .teaser-text { margin-top: auto; margin-bottom: 0; padding: var(--atg-nw-btn-gap) var(--atg-nw-pad) var(--atg-nw-pad); } /* Von der alten Datei kommt .more mit oranger Flaeche, Prozent-Innenabstand und Aussenabstand. Das wird vollstaendig zurueckgesetzt. */ .atg-news .news .article .teaser-text .more { box-sizing: border-box; /* Der Knopf liegt UEBER der Klickflaeche der Karte (z-index 1, siehe unten). Ohne das wuerde die Klickflaeche den Knopf verdecken, und :hover am Knopf kaeme nie an. */ position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; height: var(--atg-nw-btn-h); margin: 0; padding: 0 var(--atg-nw-btn-pad); background: var(--atg-nw-btn-bg); border: 0; border-radius: var(--atg-radius); font-size: var(--atg-nw-btn-fs); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; color: var(--atg-on-dark) !important; transition: background-color var(--atg-nw-hover-time); } /* Die ganze Karte ist klickbar. Die unsichtbare Flaeche haengt am TITEL-Link, nicht am Knopf - und das ist kein Zufall: Ein ::after gehoert zu seinem Element. Lag die Flaeche am Knopf, dann galt jedes Darueberfahren irgendwo auf der Karte als Darueberfahren ueber dem Knopf, und der Knopf faerbte sich mit. Genau das soll er nicht mehr. Am Titel-Link ist die Flaeche dieselbe, die Karte bleibt ueberall klickbar, und der Knopf behaelt sein eigenes :hover - er liegt mit z-index 2 darueber. Nebenwirkung wie bei den Produktkarten, bewusst in Kauf genommen: Titel und Datum lassen sich nicht mehr mit der Maus markieren. Der Bezugsrahmen ist .article (position: relative). Die Akzentlinie haengt an h3::after, die Flaeche an h3 a::after - zwei verschiedene Elemente, sie kommen sich nicht ins Gehege. */ .atg-news .news .article h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---------- Beim Darueberfahren ---------- */ @media (hover: hover) { .atg-news .news .article:hover, .atg-news .news .article:focus-within { transform: translateY(calc(-1 * var(--atg-nw-lift))); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); } .atg-news .news .article:hover::before, .atg-news .news .article:focus-within::before { transform: scaleX(1); } /* Der Knopf faerbt sich NUR, wenn die Maus auf ihm steht - nicht schon, wenn sie irgendwo auf der Karte steht. Beim Ueberfahren der Karte heben sich Karte und Linie, der Knopf bleibt im Ruhezustand. */ .atg-news .news .article .teaser-text .more:hover { background: var(--atg-nw-btn-hover); } } /* Tastaturbedienung: hier faerbt sich der Knopf sehr wohl, denn dann liegt der Fokus tatsaechlich auf ihm. */ .atg-news .news .article .teaser-text .more:focus-visible { background: var(--atg-nw-btn-hover); outline: 2px solid var(--atg-accent); outline-offset: 2px; } /* Der Titel-Link traegt die Klickflaeche der Karte. Wird er mit der Tastatur angesteuert, soll der Rahmen um die ganze Karte laufen und nicht nur um den Text. Der Rahmen haengt deshalb am ::after - ein outline folgt immer dem eigenen Kasten des Elements, und der Kasten des Links ist nur der Titeltext. Die Flaeche, die die Karte bedeckt, ist das Pseudoelement. */ .atg-news .news .article h3 a:focus-visible { outline: none; } .atg-news .news .article h3 a:focus-visible::after { outline: 2px solid var(--atg-accent); outline-offset: -2px; } /* ============================================================ 5 - SLIDER UNTER 1024 PIXEL ============================================================ Gleiche Mechanik wie bei der Produktvorschau: eine Reihe, alle Karten, waagrecht scrollbar, Einrasten auf der Inhaltskante. Die Spur bricht um --atg-gutter seitlich aus dem Container aus; .section.atg-news hat overflow-x:hidden, damit daraus kein Querscrollen der Seite wird. */ @media (max-width: 1023.98px) { .atg-news .news-list-view { display: flex; flex-wrap: nowrap; grid-template-columns: none; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(-1 * var(--atg-gutter)); padding-inline: var(--atg-gutter); scroll-padding-inline-start: var(--atg-gutter); /* Luft fuer Anheben und Schatten - ein waagrecht scrollender Kasten schneidet senkrecht ebenfalls ab. */ padding-block: var(--atg-nw-track-top) var(--atg-nw-track-bottom); } .atg-news .news-list-view::-webkit-scrollbar { display: none; } /* Kartenbreite: (100% + Seitenrand - Anzahl x Abstand - Anschnitt) ------------------------------------------------- Anzahl */ .atg-news .news .article { flex: 0 0 calc( (100% + var(--atg-gutter) - var(--atg-nw-cols) * var(--atg-nw-gap) - var(--atg-nw-peek) ) / var(--atg-nw-cols) ); max-width: var(--atg-nw-card-max); scroll-snap-align: start; } } /* ============================================================ 6 - BEDIENELEMENTE UNTER DEM SLIDER ============================================================ Fortschrittsbalken links, zwei runde Knoepfe rechts, eingehaengt von js/produktvorschau.js. Ohne JavaScript bleiben Wischen und Einrasten erhalten. */ .atg-news .atg-nw-nav { display: none; } @media (max-width: 1023.98px) { .atg-news .atg-nw-nav { display: flex; align-items: center; gap: var(--atg-nw-nav-gap); margin-top: var(--atg-nw-nav-top); } } @media (scripting: none) { .atg-news .atg-nw-nav { display: none; } } .atg-news .atg-nw-bar { flex: 1 1 auto; height: var(--atg-nw-bar-h); background: var(--atg-nw-bar-track); border-radius: var(--atg-nw-bar-h); overflow: hidden; } .atg-news .atg-nw-bar span { display: block; height: 100%; border-radius: inherit; background: var(--atg-accent); transform-origin: left center; transition: transform var(--atg-nw-hover-time); will-change: transform; } .atg-news .atg-nw-buttons { display: flex; flex: 0 0 auto; gap: var(--atg-nw-round-gap); } .atg-news .atg-nw-buttons button { position: relative; width: var(--atg-nw-btn-round); height: var(--atg-nw-btn-round); display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--atg-nw-round-border); border-radius: 50%; background: none; color: var(--atg-accent); font-size: var(--atg-nw-round-fs); line-height: 0; cursor: pointer; transition: border-color var(--atg-nw-hover-time), color var(--atg-nw-hover-time), opacity var(--atg-nw-hover-time); } .atg-news .atg-nw-buttons button:disabled { opacity: .35; cursor: default; } @media (hover: hover) { .atg-news .atg-nw-buttons button:not(:disabled):hover { border-color: var(--atg-accent); color: var(--atg-white); } } .atg-news .atg-nw-buttons button:focus-visible { outline: 2px solid var(--atg-accent); outline-offset: 2px; } /* ---------- Hinweis-Animation ---------- */ @keyframes atg-nw-wippen { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(var(--atg-nw-hint-shift)); } 60% { transform: translateX(0); } } @keyframes atg-nw-ring { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } } .atg-news .atg-nw-next.is-hint { animation: atg-nw-wippen var(--atg-nw-hint-time) ease-in-out 3; } .atg-news .atg-nw-next.is-hint::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--atg-accent); border-radius: 50%; animation: atg-nw-ring var(--atg-nw-hint-time) ease-out 3; } @media (prefers-reduced-motion: reduce) { .atg-news .news-list-view { scroll-behavior: auto; } .atg-news .atg-nw-next.is-hint { animation: none; } .atg-news .atg-nw-next.is-hint::after { content: none; } } /* ============================================================ 7 - UEBERGANG: DETAILANSICHT EINER MELDUNG ============================================================ Dieser Abschnitt gehoert NICHT zum Startseiten-Block. Er ersetzt das Noetigste aus der alten Fassung dieser Datei, damit die Seite hinter "Weiterlesen" nicht unformatiert dasteht. Kein Feinschliff - die Detailansicht bekommt einen eigenen Arbeitsschritt. Alle Regeln hier haengen an .news-single, .news-backlink-wrap, .f3-widget-paginator oder der Kategorieliste. Keine davon kommt im Startseiten-Block vor, sie koennen ihm also nicht dazwischenfunken. Was die alte Datei hatte und hier bewusst fehlt: die Listenansicht auf Unterseiten. Sie stand dort auf vier Spalten mit grauer Flaeche und festen Prozentwerten. Bis sie ihren eigenen Schritt bekommt, laeuft sie auf der Grundformatierung des Browsers - lesbar, aber schmucklos. Eine allgemeine Regel dafuer waere hier falsch: sie wuerde ueber die Spezifitaet auch im Startseiten-Block landen. ============================================================ */ /* Bild nicht mehr umflossen - die alte Datei hatte hier drei sich widersprechende float-Regeln uebereinander. */ .news-single.news-single .article { display: flex; flex-direction: column; } .news-single.news-single .header { order: 1; } .news-single.news-single .news-text-wrap { order: 2; } .news-single.news-single .news-img-wrap { order: 3; } .news-single.news-single .news-backlink-wrap { order: 4; } .news-single.news-single .news-img-wrap { float: none; width: 100%; margin: 0 0 var(--atg-nw-btn-gap); } .news-single.news-single .news-img-wrap img { display: block; width: 100%; height: auto; float: none; } .news-single.news-single .teaser-text { font-size: var(--atg-h3-fs); line-height: 1.5; color: var(--atg-text-soft); margin-bottom: var(--atg-nw-btn-gap); } /* Zurueck-Link im Stil des "Weiterlesen"-Knopfes. */ .news-backlink-wrap a { box-sizing: border-box; display: inline-flex; align-items: center; height: var(--atg-nw-btn-h); padding: 0 var(--atg-nw-btn-pad); background: var(--atg-nw-btn-bg); border: 0; border-radius: var(--atg-radius); font-size: var(--atg-nw-btn-fs); font-weight: 600; line-height: 1; text-decoration: none; color: var(--atg-on-dark) !important; transition: background-color var(--atg-nw-hover-time); } .news-backlink-wrap a:hover { background: var(--atg-nw-btn-hover); } /* Kategorieliste und Blaetterlinks - die alte Datei hatte hier das Orange der Vorgaengerseite. */ .news ul.category-menu, .f3-widget-paginator { display: flex; flex-wrap: wrap; gap: var(--atg-nw-round-gap); list-style: none; margin: var(--atg-nw-btn-gap) 0 0; padding: 0; } .news ul.category-menu li, .f3-widget-paginator li { float: none; } .news ul.category-menu li a, .f3-widget-paginator li a { display: inline-block; padding: .5em 1.2em; border: 1px solid var(--atg-accent-deep); border-radius: var(--atg-radius); font-size: var(--atg-nw-btn-fs); text-decoration: none; color: var(--atg-accent-deep) !important; transition: background-color var(--atg-nw-hover-time), color var(--atg-nw-hover-time); } .news ul.category-menu li a:hover, .f3-widget-paginator li a:hover { background: var(--atg-accent-deep); color: var(--atg-on-dark) !important; }