/* ============================================================ ATG-Gigerl – Abschnitt "Persoenlich erreichbar" Liegt unter: fileadmin/templates/css/persoenlich.css Stand: 21.09.2026 Formatiert das Inhaltselement "Card Group" von bootstrap_package MIT EINER KARTE zu dem Abschnitt "Persoenlich erreichbar" auf der Startseite: Text links, Foto rechts, darunter der Knopf "Zu den Ansprechpartnern". Muss NACH tokens.css und NACH design.css geladen werden - es ueberschreibt dort die Ueberschriften-Optik der Karte und die Schaltflaechen-Optik. ------------------------------------------------------------ WORAN DAS DESIGN HAENGT An der Klasse .atg-persoenlich. Die setzt NICHT bootstrap_package, sondern wir selbst: in autogentechnik.typoscript haengt am Feld "Layout" ein CASE, der fuer Layout 21 diesen Kasten schreibt:
...
Damit "Persoenlich erreichbar" im Feld "Layout" ueberhaupt zur Auswahl steht, muss einmalig diese Zeile in der Seiten-TSconfig der Wurzelseite "Startseite" (ID 1) stehen: TCEFORM.tt_content.layout.addItems.21 = Persoenlich erreichbar Das Feld "Rahmen" bleibt auf "Standard". "Kein Rahmen" wirft die komplette Frame-Huelle weg, also auch den Container, der Inhaltsbreite und Seitenrand setzt - siehe Projekt-Dokument "Design Kartengruppe Produktvorschau". ------------------------------------------------------------ DAS MARKUP der Karte, am 21.09.2026 im DOM der Live-Vorschau nachgesehen und nicht angenommen: div.card div.card-img-top > picture > img Feld "Image" div.card-body h4.card-title Feld "Header" h5.card-subtitle Feld "Subheader" p Feld "Text" div.card-footer > a.btn > span.btn-text Felder "Link"/"Title" Zwei Dinge folgen daraus: 1. Der Link haengt von sich aus NUR am Knopf. Die beiden Ueberschriften tragen kein href. Dafuer ist hier nichts zu tun. 2. Die beiden Ueberschriften der Karte tragen KEINE Klasse h1 bis h5 - das Backend-Feld "Header Class" kommt an der Karte nicht an. Die Optik der Unterueberschrift wird deshalb hier gesetzt und nicht im Backend ausgewaehlt. Sie holt sich ihre Groesse aus --atg-h2-fs und laeuft damit ueber alle vier Breiten mit dem Ueberschriften- System mit. ------------------------------------------------------------ DER BLOCK IST AUF GENAU EINE KARTE GERECHNET. Kommt im Backend eine zweite Karte dazu, stehen beide untereinander statt nebeneinander. Fuer mehrere Karten ist Layout 20 "Produkt Vorschau" da. ------------------------------------------------------------ ALLE MASSE UND FARBEN STEHEN IN tokens.css. Hier stehen nur Regeln und die Typografie-Verhaeltnisse, die schon in design.css so stehen (Zeilenabstand, Laufweite). ============================================================ */ /* ============================================================ 1 - DAS HELLE BAND ============================================================ Gegenstueck zum Petrol-Band der Produktvorschau darueber. Die Seite bekommt damit einen Rhythmus: dunkles Band, helles Band, Weiss. Der Abschnitt ist dadurch als eigener Abschnitt erkennbar, ohne dass die Karte selbst laut werden muss. 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 - die Karte steht damit automatisch auf derselben Kante wie Menue, Fusszeile und Produktvorschau. */ .section.atg-persoenlich { background: var(--atg-pe-band); padding-block: var(--atg-pe-band-y); } /* ============================================================ 2 - DIE HUELLE VON bootstrap_package ENTSCHAERFEN ============================================================ Die Kartengruppe ist im Theme ein Flex-Kasten und rechnet die Breite der Karte selbst aus: width: calc(100% / var(--cardgroup-columns) - ...) Bei einer Spalte geht das zwar auf, aber der Abzug bleibt. width:100% am Item setzt das gerade. Dieselbe Falle wie bei der Produktvorschau, dort steht sie ausfuehrlich. */ .atg-persoenlich .card-group-element { display: block; margin: 0; padding: 0; } .atg-persoenlich .card-group-element-item { display: block; width: 100%; max-width: none; margin: 0; padding: 0; } /* ============================================================ 3 - DIE KARTE ============================================================ Ein Raster mit zwei Spalten. Das Bild steht im Quelltext VOR dem Text, wird hier aber in die rechte Spalte gelegt - dafuer ist kein Eingriff ins Markup noetig. Die vier Zeilen 1fr / auto / auto / 1fr sind der Trick fuer die senkrechte Mitte: Text und Knopf stehen in den beiden auto-Zeilen, die beiden 1fr-Zeilen teilen sich den Rest zu gleichen Teilen. Ist der Text laenger als die Mindesthoehe, werden die 1fr-Zeilen einfach null hoch. min-height sorgt dafuer, dass ein kurzer Text das Foto nicht zusammendrueckt. Nach oben ist nichts gedeckelt: mehr Text macht die Karte hoeher, das Bild waechst mit. */ .atg-persoenlich .card { position: relative; display: grid; grid-template-columns: var(--atg-pe-text-col) var(--atg-pe-img-col); grid-template-rows: 1fr auto auto 1fr; min-height: var(--atg-pe-min-h); background: var(--atg-white); border: 1px solid var(--atg-line); border-radius: 0; box-shadow: var(--atg-pe-shadow); overflow: hidden; transition: transform var(--atg-pe-hover-time), box-shadow var(--atg-pe-hover-time); } /* ---------- Beim Darueberfahren: Karte anheben ---------- Die ganze Karte hebt sich um --atg-pe-lift und wirft dabei einen tieferen Schatten. Dauer wie ueberall sonst: --atg-pe-hover-time (= --atg-transition, 0,15s). Nur dort, wo es einen Zeiger gibt. Auf Touch-Geraeten gibt es kein Hover - dort passiert nichts, und das ist richtig: die Schaltflaeche ist ohnehin dauerhaft sichtbar. Die Bewegung ist reine Optik. Anders als bei den Produktkarten ist die Karte hier NICHT anklickbar - der Link haengt nur am Knopf, so wie festgelegt. :focus-within ist trotzdem dabei, damit die Karte auch reagiert, wenn der Knopf mit der Tastatur angesteuert wird. transform statt margin oder top: nur transform und opacity laufen im Browser ohne Neuberechnung des Seitenaufbaus. Mit margin wuerde bei jedem Darueberfahren der ganze Textfluss neu vermessen. */ @media (hover: hover) { .atg-persoenlich .card:hover, .atg-persoenlich .card:focus-within { transform: translateY(calc(-1 * var(--atg-pe-lift))); box-shadow: var(--atg-pe-shadow-hover); } } /* ---------- Bildfeld ---------- object-fit: cover, nicht contain wie bei den Produktkarten. Dort sind es Freisteller auf weissem Grund, hier ist es ein Foto: ein weisser Rand um ein Foto faellt auf, ein kleiner Anschnitt nicht. DAS BILD STEHT ABSOLUT, UND DAS IST DER GANZE PUNKT. Steht es im Fluss, bringt es seine eigene Hoehe in die Rasterzeile ein - und die Karte wird so hoch wie das Bild. Am 21.09.2026 an der Live-Vorschau nachgemessen: mit einem Bild von 600 x 900 Punkten wurde die Karte bei 1440px 893 statt 350 Pixel hoch, obwohl Text und Knopf zusammen nur rund 445 Pixel brauchen. "height: 100%" hilft dagegen nicht, weil die Zeilenhoehe zu diesem Zeitpunkt noch gar nicht feststeht und der Browser auf die Bildhoehe zurueckfaellt. Absolut gestellt zaehlt das Bild fuer die Zeilenhoehe nicht mit. Die Hoehe der Karte kommt damit nur noch aus Text und Mindesthoehe, und das Bild fuellt, was uebrig bleibt - egal welches Seitenverhaeltnis das spaetere Teamfoto hat. position: relative am Bildfeld ist hier unbedenklich. Bei der Produktvorschau waere es ein Fehler, weil dort eine Hover-Linie als ::before auf der Karte liegt, die das Bildfeld sonst verdecken wuerde - diese Karte hat kein ::before. Die Hintergrundfarbe ist nur fuer den Moment sichtbar, in dem das Bild noch nicht geladen ist. */ .atg-persoenlich .card-img-top { grid-column: 2; grid-row: 1 / -1; position: relative; min-height: 0; border-radius: 0; overflow: hidden; background: var(--atg-line); } .atg-persoenlich .card-img-top picture { position: absolute; inset: 0; display: block; } .atg-persoenlich .card-img-top img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* ---------- Textteil ---------- */ .atg-persoenlich .card-body { grid-column: 1; grid-row: 2; padding: var(--atg-pe-pad) var(--atg-pe-pad) 0; } /* Der Selektor ist absichtlich laenger, als er aussehen muss. Das Theme von bootstrap_package setzt .card-group-element-item .card-body + .card-footer { padding-top: 0 } also DREI Klassen, und nur fuer den Abstand nach oben. Eine Regel mit ".atg-persoenlich .card-footer" hat zwei Klassen und verliert genau an dieser einen Stelle: links, rechts und unten kam der Innenabstand an, oben nicht - der Knopf klebte ohne jeden Abstand am Text. Am 22.09.2026 an der Live-Seite gemessen: Abstand Text -> Knopf 0 Pixel. Mit der zusaetzlichen Klasse am Kartenkasten sind es vier, und die Regel gewinnt - ohne !important. Dieselbe Falle und dasselbe Gegenmittel wie bei news-basic.css im News-Bereich. */ .atg-persoenlich .card-group-element-item .card-body + .card-footer { grid-column: 1; grid-row: 3; padding: var(--atg-pe-btn-gap) var(--atg-pe-pad) var(--atg-pe-pad); background: none; border: 0; border-radius: 0; } /* ============================================================ 4 - DIE TEXTE ============================================================ */ /* Kicker. Das Tag ist eine h4, Versalien und Sperrung kommen also schon aus der h4-Regel in design.css. Nur das Grau passt nicht: als kleine graue Zeile ueber einer Ueberschrift wirkt es wie Kleingedrucktes. Dunkles Tuerkis wie in der Design-Vorlage. */ .atg-persoenlich .card-title { color: var(--atg-accent-deep); margin: 0 0 var(--atg-pe-kicker-gap); } /* Unterueberschrift. Das Tag ist eine h5 und faellt damit in die h5-Regel aus design.css - 18,5px, also viel zu klein fuer die Hauptaussage dieses Abschnitts. Hier bekommt sie die Optik der Ebene 2. Groesse, Zeilenabstand und Laufweite sind dieselben Werte wie in der h2-Regel; die Groesse kommt aus derselben Variablen und laeuft damit ueber alle vier Breiten automatisch mit. Das ist die eine Stelle, an der die Optik bewusst nicht am Feld "Header Class" haengt: das Feld kommt an der Karte nicht an. */ .atg-persoenlich .card-subtitle { font-size: var(--atg-h2-fs); font-weight: 600; line-height: 1.22; letter-spacing: -.006em; color: var(--atg-petrol); margin: 0; text-wrap: balance; } .atg-persoenlich .card-body p { font-size: var(--atg-pe-body-fs); line-height: 1.6; color: var(--atg-text-soft); margin: var(--atg-pe-text-gap) 0 0; } .atg-persoenlich .card-body p:last-child { margin-bottom: 0; } /* ============================================================ 5 - DER KNOPF ============================================================ Form und Groesse wie die Schaltflaeche "Anfrage stellen" in der ersten Menueleiste (.atg-cta in menu.css). Die FARBEN kommen dagegen vom Sockel der Produktkarten und vom Knopf "Weiterlesen" im News-Bereich: gefuellt in --atg-pe-btn-bg (= --atg-ink), beim Darueberfahren --atg-pe-btn-hover (= --atg-accent-deep), Schrift immer weiss. Damit reagieren alle drei Knoepfe der Startseite gleich. Kein Rahmen, wie beim News-Knopf: auf einer gefuellten Flaeche waere er im Ruhezustand unsichtbar und beim Darueberfahren ein dunkler Strich um die hellere Flaeche. box-sizing ist hier Pflicht, nicht Zierde: am Handy ist der Knopf width:100% breit. Ohne border-box kaemen Innenabstand und Rahmen obendrauf, und er stuende um gut 45px ueber die Kartenkante hinaus. Auf der Live-Seite setzt Bootstrap das ohnehin global - in einer Nachbildung ohne Bootstrap nicht, und genau dort ist es aufgefallen. Das !important ist noetig und kein Schlamperei-Rest: design.css setzt "main a { color: #52bfd3 !important }". Gegen ein !important hilft keine Spezifitaet, nur ein zweites. Faellt weg, sobald die !important aus design.css aufgeloest sind. */ .atg-persoenlich .card-footer .btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--atg-pe-btn-h); padding: 0 var(--atg-pe-btn-pad); background: var(--atg-pe-btn-bg); border: 0; border-radius: var(--atg-radius); box-shadow: none; font-size: var(--atg-pe-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-pe-hover-time); } /* Der Knopf faerbt sich nur, wenn die Maus auf ihm selbst steht. Beim Ueberfahren der Karte hebt sich die Karte, der Knopf bleibt im Ruhezustand - dieselbe Festlegung wie im News-Bereich. Hier ergibt sich das von selbst: die Karte traegt keine Klickflaeche, die ueber dem Knopf laege. */ .atg-persoenlich .card-footer .btn:hover, .atg-persoenlich .card-footer .btn:focus-visible { background: var(--atg-pe-btn-hover); } /* ============================================================ 6 - BIS 767 PIXEL: BILD OBEN, KNOPF UEBER DIE VOLLE BREITE ============================================================ Eine Spalte, drei Zeilen. Das Bild bekommt hier als einziger Fall eine feste Hoehe - untereinander gibt es nichts mehr, mit dem es mitwachsen koennte. */ @media (max-width: 767.98px) { .atg-persoenlich .card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; } .atg-persoenlich .card-img-top { grid-column: 1; grid-row: 1; height: var(--atg-pe-img-h); } .atg-persoenlich .card-body { grid-column: 1; grid-row: 2; } .atg-persoenlich .card-footer { grid-column: 1; grid-row: 3; } .atg-persoenlich .card-footer .btn { display: flex; width: 100%; } }