/* ============================================================ ATG-Gigerl – Kartengruppe "Produkt Vorschau" Liegt unter: fileadmin/templates/css/produktvorschau.css Stand: 21.09.2026 Formatiert das Inhaltselement "Card Group" von bootstrap_package zu dem Block "Unsere Produktbereiche". Stand 28.09.2026: Glaskarten auf dunklem Band mit Lichtflaechen - dieselbe Sprache wie "Partner", "Ansprechpartner" und "Kontakt / Anfahrt". Davor waren es weisse Karten mit scharfen Ecken und einem dunklen Sockel; der Block war damit der letzte im alten Stil. Muss NACH tokens.css und NACH design.css geladen werden: es ueberschreibt dort die Ueberschriften-Farben und die Schaltflaechen-Optik. ------------------------------------------------------------ WORAN DAS DESIGN HAENGT An der Klasse .atg-produktvorschau. Die setzt NICHT bootstrap_package, sondern wir selbst: in autogentechnik.typoscript haengt am Feld "Layout" ein CASE, der jedes Inhaltselement in einen eigenen Kasten wickelt. Fuer Layout 20 lautet der Kasten
...
Damit haengt das Design an einer Klasse, die wir selbst vergeben - und nicht daran, wie TYPO3 seine frame-Klassen schreibt. Damit "Produkt Vorschau" im Feld "Layout" ueberhaupt zur Auswahl steht, muss einmalig diese Zeile in die Seiten-TSconfig der Wurzelseite: TCEFORM.tt_content.layout.addItems.20 = Produkt Vorschau NICHT ueber das Feld "Rahmen" = "Kein Rahmen" gehen. Geprueft am 21.09.2026: TYPO3 laesst dabei die komplette frame-Huelle weg - div.frame, frame-container und frame-inner entfallen ersatzlos. Damit fehlt der Container, der Inhaltsbreite und Seitenrand setzt, und eine Klasse "frame-none" entsteht dabei nie. ------------------------------------------------------------ ALLE ZAHLEN STEHEN IN tokens.css In dieser Datei steht keine einzige Farbe und keine einzige Groesse als fester Wert - nur Regeln. Die Werte je Bildschirmbreite stehen als --atg-pv-* in css/tokens.css und bilden dort die Masstabelle aus dem Design-Dokument ab. ============================================================ */ /* ============================================================ 1 - DAS DUNKLE BAND ============================================================ Das Band geht ueber die volle Bildschirmbreite, ohne negative Raender und ohne 100vw: div.section hat weder max-width noch Innenabstand. Die Inhaltsbreite regelt weiterhin main .frame-container aus design.css - der Inhalt steht damit automatisch auf derselben Kante wie Menue und Fusszeile. Die Farbe ist --atg-band-dark, NICHT --atg-petrol. Petrol ist die Farbe der Produktleiste, und die bleibt beim Scrollen ueber dem Band stehen - bei gleicher Farbe gibt es dort keine sichtbare Kante mehr. */ /* 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). .atg-produktvorschau.section meint dasselbe und hat dieselbe Spezifitaet. */ .atg-produktvorschau.section { background-color: var(--atg-band-dark); background-image: var(--atg-pv-glow); padding-block: var(--atg-pv-band-y); color: var(--atg-on-dark); } /* ============================================================ 2 - BLOCKKOPF ============================================================ Seit dem 28.09.2026 traegt die Ueberschrift dieselbe Optik wie die Blockueberschriften auf "Partner" und "Ansprechpartner": 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, so wie er vorher 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-produktvorschau .frame-header { margin: 0 0 var(--atg-pv-head-gap); } .atg-produktvorschau .frame-header .element-header { color: var(--atg-accent); } .atg-produktvorschau .frame-header .element-subheader { margin-bottom: 0; font-size: var(--atg-pv-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 ============================================================ Drei Spalten, fest. Was im Backend-Feld "Columns" steht, spielt fuer dieses Layout keine Rolle - das Design ist auf drei Spalten gerechnet. */ .atg-produktvorschau .card-group-element { display: grid; grid-template-columns: repeat(3, 1fr); /* 1fr statt auto: sonst bemisst sich jede Zeile nur an ihrer eigenen laengsten Karte, und die zweite Reihe steht niedriger als die erste, sobald oben ein Text drei Zeilen braucht und unten zwei. */ grid-auto-rows: 1fr; gap: var(--atg-pv-gap); margin: 0; padding: 0; } /* width:100% ist hier Pflicht, nicht Zierde. Das Theme von bootstrap_package setzt an dieser Stelle width: calc(100% / var(--cardgroup-columns) - ...) und rechnet damit die Spaltenbreite selbst aus. Solange die Gruppe ein Flex-Kasten ist, geht das auf. Im Raster bezieht sich das Prozentzeichen aber auf die Rasterspalte, in der die Karte schon steht - die Karte wird also ein zweites Mal gedrittelt und ist nur noch ein Drittel so breit. Die selbst gebaute Nachbildung hat den Fehler nicht gezeigt, weil dort flex-basis statt width stand; flex-basis ist im Raster wirkungslos, width nicht. Gefunden erst beim Messen an der echten Seite. */ .atg-produktvorschau .card-group-element-item { display: flex; width: 100%; max-width: none; padding: 0; margin: 0; } /* ============================================================ 4 - DIE KARTE ============================================================ */ /* Glaskarte. Der Weichzeichner wirkt auf das, was hinter der Karte liegt - das sind die Lichtflaechen des Bandes. Ohne sie waere der Weichzeichner wirkungslos. */ .atg-produktvorschau .card { position: relative; width: 100%; display: flex; flex-direction: column; padding: var(--atg-pv-pad); border: 1px solid var(--atg-pv-glass-line); border-radius: var(--atg-pv-radius); background: var(--atg-pv-glass-bg); box-shadow: var(--atg-pv-shadow); -webkit-backdrop-filter: blur(var(--atg-pv-glass-blur)); backdrop-filter: blur(var(--atg-pv-glass-blur)); color: var(--atg-on-dark); transition: transform var(--atg-pv-hover-time), box-shadow var(--atg-pv-hover-time), border-color var(--atg-pv-hover-time), background var(--atg-pv-hover-time); } /* ---------- Weisse Bildflaeche ---------- */ /* Freisteller auf weissem Grund brauchen eine weisse Flaeche, sonst stehen sie als heller Klotz auf dem Glas. Sie hat einen eigenen Radius, ringsum bleibt Glas sichtbar - dasselbe Muster wie die Logoflaeche der Partnerkarten. */ .atg-produktvorschau .card-img-top { flex: 0 0 auto; /* Hoehe kommt aus der Breite, nicht aus einem festen Wert - siehe Kommentar bei --atg-pv-img-ratio in tokens.css. box-sizing steht hier ausdruecklich, obwohl das Theme es ohnehin auf border-box setzt: aspect-ratio rechnet auf den Kasten, den box-sizing bestimmt. Ohne die Zeile haengt das Ergebnis davon ab, was gerade sonst noch geladen ist - in der Nachbildung kam ein anderes Verhaeltnis heraus als auf der echten Seite. */ box-sizing: border-box; aspect-ratio: var(--atg-pv-img-ratio); /* Ohne min-height:0 gilt fuer ein Flex-Element die inhaltsbedingte Mindesthoehe. Das Bild darin waere dann hoeher als das Seitenverhaeltnis erlaubt und wuerde die Flaeche aufdruecken - in der Nachbildung kam so 1,81 statt 1,90 heraus. */ min-height: 0; padding: var(--atg-pv-img-pad); border: 0; border-radius: var(--atg-pv-img-radius); background: var(--atg-white); } .atg-produktvorschau .card-img-top picture { display: block; height: 100%; } /* contain, nicht cover: ein Freisteller darf nicht angeschnitten werden. */ .atg-produktvorschau .card-img-top img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; } /* ---------- Textteil ---------- */ .atg-produktvorschau .card-body { flex: 1 1 auto; margin: var(--atg-pv-title-gap) 0 0; padding: 0; background: none; } /* Der Titel kommt aus bootstrap_package als h2 ohne Header Class und faellt damit in die h2-Regel aus design.css - 30px und Mittel-Tuerkis. Beides passt in der Karte nicht, also wird es hier neu gesetzt. Das ist die eine Stelle, an der die Optik bewusst nicht am Feld "Header Class" haengt: das Feld gibt es an der Karte gar nicht. */ .atg-produktvorschau .card-title { font-size: var(--atg-pv-title-fs); font-weight: 700; line-height: 1.24; letter-spacing: -.008em; color: var(--atg-pv-title-color); margin: 0; text-wrap: balance; } .atg-produktvorschau .card-body p { font-size: var(--atg-pv-body-fs); line-height: 1.55; color: var(--atg-pv-text); margin: var(--atg-pv-text-gap) 0 0; } .atg-produktvorschau .card-body p:last-child { margin-bottom: 0; } /* ---------- Knopf ---------- */ .atg-produktvorschau .card-footer { flex: 0 0 auto; margin-top: var(--atg-pv-knopf-gap); padding: 0; border: 0; border-radius: 0; background: none; } /* Von bootstrap_package kommt der Knopf als a.btn.btn-default mit oranger Flaeche - das wird vollstaendig zurueckgesetzt. Danach derselbe Knopf wie im Premium-Block der Partnerseite: gefuellt hell, beim Darueberfahren weiss. */ .atg-produktvorschau .card-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--atg-pv-arrow-gap); height: var(--atg-pv-knopf-h); margin: 0; padding-inline: var(--atg-pv-knopf-pad); background: var(--atg-pv-knopf-bg); border: 1px solid transparent; border-radius: var(--atg-pv-knopf-h); box-shadow: var(--atg-pv-knopf-glow); font-size: var(--atg-pv-knopf-fs); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; box-sizing: border-box; transition: background-color var(--atg-pv-hover-time), border-color var(--atg-pv-hover-time), box-shadow var(--atg-pv-hover-time); /* Das !important ist hier leider noetig und kein Schlamperei-Rest: design.css setzt in Zeile 156 "main a { color: #52bfd3 !important; }". Gegen ein !important hilft keine Spezifitaet, nur ein zweites. Faellt weg, sobald die 87 !important aus design.css aufgeloest sind - das steht im Projekt-Dokument "Uebertragung ins Backend" als offener Punkt. */ color: var(--atg-pv-knopf-fg) !important; } /* Der Pfeil, dasselbe Zeichen aus Font Awesome wie in den Knoepfen der Partnerseite. Er haengt an ::before und nicht an ::after, obwohl er hinter dem Text steht: ::after traegt die Klickflaeche ueber der ganzen Karte (naechste Regel). Pseudoelemente stehen im Flex-Kasten in Quellreihenfolge, order:1 schiebt ihn hinter den Text. */ .atg-produktvorschau .card-footer .btn::before { content: "\f061"; order: 1; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--atg-pv-arrow-fs); transition: transform var(--atg-pv-hover-time); } /* Die ganze Karte ist klickbar: der Sockel-Link wird unsichtbar ueber die gesamte Karte gelegt. Nebenwirkung - Titel und Beschreibung lassen sich nicht mehr mit der Maus markieren. Das ist so entschieden. */ .atg-produktvorschau .card-footer .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---------- Beim Darueberfahren ---------- Nur dort, wo es einen Zeiger gibt. Auf Touch-Geraeten gibt es kein Hover - deshalb ist der Knopf dauerhaft sichtbar und erscheint nicht erst beim Darueberfahren. Karte und Knopf reagieren getrennt: die Karte hebt sich, sobald die Maus irgendwo auf ihr steht, der Knopf faerbt sich erst, wenn sie auf ihm liegt - wie auf der Partnerseite. Warum das JavaScript braucht, steht weiter unten. */ @media (hover: hover) { .atg-produktvorschau .card:hover, .atg-produktvorschau .card:focus-within { transform: translateY(calc(-1 * var(--atg-pv-lift))); border-color: var(--atg-pv-glass-line-hover); background: var(--atg-pv-glass-bg-hover); box-shadow: var(--atg-pv-shadow-hover); } } /* ---------- Der Knopf reagiert nur auf sich selbst ---------- Die ganze Karte ist klickbar: der Knopf-Link liegt als unsichtbare Flaeche ueber ihr. Fuer den Browser ist der Knopf damit immer mit-gehovert, sobald die Maus irgendwo auf der Karte steht - ":hover" gilt fuer jeden Kasten eines Elements, auch fuer ein Pseudoelement. Mit CSS allein sind die beiden Zustaende nicht zu trennen, egal wie der Selektor aussieht. Deshalb setzt js/produktvorschau.js die Klasse is-knopf-hover, sobald der Zeiger wirklich im Rechteck des Knopfes liegt. Ohne JavaScript bleibt der Knopf in seiner Ruhefarbe - er ist dann nicht kaputt, sondern nur ohne Hover. Auf Touch-Geraeten passiert ohnehin nichts. :focus-visible steht daneben, damit die Tastaturbedienung dieselbe Rueckmeldung bekommt. */ .atg-produktvorschau .card-footer .btn.is-knopf-hover, .atg-produktvorschau .card-footer .btn:focus-visible { background: var(--atg-pv-knopf-hover); border-color: var(--atg-pv-knopf-hover); } .atg-produktvorschau .card-footer .btn.is-knopf-hover::before, .atg-produktvorschau .card-footer .btn:focus-visible::before { transform: translateX(var(--atg-pv-arrow-shift)); } /* Tastaturbedienung muss auch ohne Zeiger sichtbar sein. */ .atg-produktvorschau .card-footer .btn:focus-visible { outline: 2px solid var(--atg-accent); outline-offset: -4px; } /* ============================================================ 5 - SLIDER UNTER 1024 PIXEL ============================================================ Eine Reihe, alle sechs Karten, waagrecht scrollbar. Wischen und Einrasten funktionieren ohne JavaScript. Die Spur bricht seitlich um genau --atg-gutter aus dem Container aus. Die erste Karte steht dadurch auf der Inhaltskante, die angeschnittene laeuft rechts bis zum Bildschirmrand. Das ist die bewusste Ausnahme von der Kantenregel, wie .hunderter und .headerimage. div.section darueber hat overflow-x:hidden - der Ausbruch endet also sauber an der Bildschirmkante und erzeugt kein Querscrollen der Seite. */ @media (max-width: 1023.98px) { .atg-produktvorschau .card-group-element { display: flex; flex-wrap: nowrap; grid-template-columns: none; 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 das Anheben und den Schatten. Ein waagrecht scrollender Kasten schneidet senkrecht ebenfalls ab - ohne genug Luft endet der Schatten der Karte mit gerader Kante mitten auf dem Band. Oben wird die Luft gleich wieder abgezogen, damit der Abstand zur Ueberschrift derselbe bleibt wie im Raster ab 1024px. Dasselbe Muster wie bei den Slidern auf "Partner", "Ansprechpartner" und im Download Center. */ padding-block: var(--atg-pv-track-top) var(--atg-pv-track-bottom); margin-top: calc(-1 * var(--atg-pv-track-top)); } .atg-produktvorschau .card-group-element::-webkit-scrollbar { display: none; } /* Kartenbreite. Sichtbar ist die Inhaltsbreite plus ein Seitenrand (die Spur laeuft rechts bis zum Rand). Davon gehen je sichtbarer Karte ein Abstand und einmal der Anschnitt ab: (100% + Seitenrand - Anzahl x Abstand - Anschnitt) ------------------------------------------------- Anzahl 100% ist die Inhaltsbreite: Prozentwerte rechnen gegen den Inhaltskasten der Spur, und deren seitlicher Innenabstand ist genau der Seitenrand. */ .atg-produktvorschau .card-group-element-item { flex: 0 0 calc( (100% + var(--atg-gutter) - var(--atg-pv-cols) * var(--atg-pv-gap) - var(--atg-pv-peek) ) / var(--atg-pv-cols) ); max-width: var(--atg-pv-card-max); scroll-snap-align: start; } } /* ============================================================ 6 - BEDIENELEMENTE UNTER DEM SLIDER ============================================================ Fortschrittsbalken links, zwei runde Knoepfe rechts. Der ganze Block wird von js/produktvorschau.js eingehaengt - im Inhaltselement gibt es dafuer kein Feld. Ohne JavaScript ist nichts da, was ausgeblendet werden muesste; die Regel fuer (scripting: none) steht trotzdem, falls das Skript spaeter einmal serverseitig eingebaut wird. ============================================================ */ .atg-produktvorschau .atg-pv-nav { display: none; } @media (max-width: 1023.98px) { .atg-produktvorschau .atg-pv-nav { display: flex; align-items: center; gap: var(--atg-pv-nav-gap); /* Gemessen wird ab der Kartenunterkante. Die Luft, die unten in der Spur steht, wird deshalb abgezogen. */ margin-top: calc(var(--atg-pv-nav-space) - var(--atg-pv-track-bottom)); } } @media (scripting: none) { .atg-produktvorschau .atg-pv-nav { display: none; } } /* ---------- Fortschrittsbalken ---------- */ .atg-produktvorschau .atg-pv-bar { flex: 1 1 auto; height: var(--atg-pv-bar-h); background: var(--atg-pv-bar-track); border-radius: var(--atg-pv-bar-h); overflow: hidden; } .atg-produktvorschau .atg-pv-bar span { display: block; height: 100%; border-radius: inherit; background: var(--atg-accent); transition: transform var(--atg-pv-hover-time); transform-origin: left center; will-change: transform; } /* ---------- Knoepfe ---------- */ .atg-produktvorschau .atg-pv-buttons { display: flex; gap: var(--atg-pv-btn-gap); flex: 0 0 auto; } .atg-produktvorschau .atg-pv-buttons button { position: relative; width: var(--atg-pv-btn); height: var(--atg-pv-btn); display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--atg-pv-btn-border); border-radius: 50%; background: none; color: var(--atg-accent); font-size: var(--atg-pv-btn-fs); line-height: 0; cursor: pointer; transition: border-color var(--atg-pv-hover-time), color var(--atg-pv-hover-time), opacity var(--atg-pv-hover-time); } .atg-produktvorschau .atg-pv-buttons button:disabled { opacity: .35; cursor: default; } @media (hover: hover) { .atg-produktvorschau .atg-pv-buttons button:not(:disabled):hover { border-color: var(--atg-accent); color: var(--atg-white); } } .atg-produktvorschau .atg-pv-buttons button:focus-visible { outline: 2px solid var(--atg-accent); outline-offset: 2px; } /* ---------- Hinweis-Animation ---------- Der rechte Knopf wippt nach dem Laden dreimal nach rechts, dazu laeuft je Durchgang ein Ring nach aussen. Danach ist Ruhe - keine Dauerschleife. Ausgeloest wird sie vom Skript ueber die Klasse is-hint, und nur solange noch nicht gescrollt wurde. */ @keyframes atg-pv-wippen { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(var(--atg-pv-hint-shift)); } 60% { transform: translateX(0); } } @keyframes atg-pv-ring { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } } .atg-produktvorschau .atg-pv-next.is-hint { animation: atg-pv-wippen var(--atg-pv-hint-time) ease-in-out 3; } .atg-produktvorschau .atg-pv-next.is-hint::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--atg-accent); border-radius: 50%; animation: atg-pv-ring var(--atg-pv-hint-time) ease-out 3; } @media (prefers-reduced-motion: reduce) { .atg-produktvorschau .card-group-element { scroll-behavior: auto; } .atg-produktvorschau .atg-pv-next.is-hint { animation: none; } .atg-produktvorschau .atg-pv-next.is-hint::after { content: none; } }