/* ============================================================ ATG-Gigerl - INHALTSBLOECKE DER DETAILSEITEN Liegt unter: fileadmin/templates/css/inhaltsbloecke.css Stand: 22.09.2026 - neu Sechs Layouts fuer die Unterseiten, zuerst gebaut fuer die Seite "Unternehmen". Sie sind nicht an diese Seite gebunden: jede Detailseite kann sie ueber das Backend-Feld "Layout" aufrufen. Layout 23 Text und Bild .atg-textbild Layout 24 Spaltenband dunkel .atg-spaltenband Layout 25 Text auf dunklem Band .atg-bandtext Layout 26 Datenliste dunkel .atg-datenliste Layout 27 Karte zentriert .atg-kartezentriert Layout 28 Hinweiskarten .atg-hinweiskarten Muss NACH tokens.css, design.css UND container.css geladen werden: die Datei braucht die Variablen von dort, sie ueberschreibt die Ueberschriften-Optik aus design.css und sie setzt am Spaltenband die Ausrichtung des Rasters aus container.css neu. ------------------------------------------------------------ WORAN DAS DESIGN HAENGT An den sechs Klassen oben. Die setzt NICHT bootstrap_package, sondern wir selbst: in autogentechnik.typoscript haengt am Feld "Layout" ein CASE, der je Nummer einen Kasten mit der passenden Klasse schreibt. Damit ist das Design unabhaengig davon, wie TYPO3 seine frame-Klassen schreibt - der Wert aus dem Feld "Layout" kommt dort naemlich gar nicht an. Damit die Eintraege im Feld "Layout" ueberhaupt zur Auswahl stehen, braucht es je eine Zeile in der Seiten-TSconfig der Wurzelseite "Startseite" (ID 1), Reiter "Ressourcen": TCEFORM.tt_content.layout.addItems.23 = Text und Bild TCEFORM.tt_content.layout.addItems.24 = Spaltenband dunkel TCEFORM.tt_content.layout.addItems.25 = Text auf dunklem Band TCEFORM.tt_content.layout.addItems.26 = Datenliste dunkel TCEFORM.tt_content.layout.addItems.27 = Karte zentriert TCEFORM.tt_content.layout.addItems.28 = Hinweiskarten Das Feld "Rahmen" bleibt bei ALLEN sechs auf "Standard". "Kein Rahmen" wirft die komplette Frame-Huelle weg, also auch den .frame-container, der Inhaltsbreite und Seitenrand setzt. Bei Layout 27 haengt zusaetzlich die Karte selbst am .frame-inner - ohne Rahmen gibt es also gar keine Karte. ------------------------------------------------------------ ALLE MASSE UND FARBEN STEHEN IN tokens.css, Abschnitt "DETAILSEITEN-BLOECKE". Hier stehen nur Regeln. ------------------------------------------------------------ WARUM DIE SELEKTOREN ".atg-textbild.section" HEISSEN UND NICHT ".section.atg-textbild" Beides ist dasselbe - gleiche Wirkung, gleiche Spezifitaet. Aber TYPO3 prueft beim Upload den erkannten Dateityp gegen die Endung, und die Erkennung (libmagic) haelt eine Zeile, die nach Leerzeichen mit ".section", ".text", ".data", ".globl", ".align" oder ".type" beginnt, fuer Assembler-Quelltext. Die Datei kam dadurch als text/x-asm an und der Upload wurde mit "Mime-Typ text/x-asm fuer Dateierweiterung css nicht zulaessig" abgewiesen. Deshalb faengt hier keine Zeile mit einem dieser Namen an - auch keine Kommentarzeile. Wer einen neuen Selektor schreibt, dreht ihn um; wer im Kommentar eine Klasse nennt, setzt ein Wort davor. Gegenprobe vor dem Upload: file --mime-type -b css/inhaltsbloecke.css Es muss text/plain oder text/css herauskommen. ============================================================ */ /* ============================================================ 1 - DIE BAENDER ============================================================ Ein 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. Dieselbe Technik wie beim Abschnitt "Persoenlich erreichbar" auf der Startseite. */ .atg-textbild.section, .atg-kartezentriert.section { background: var(--atg-block-band); padding-block: var(--atg-block-band-y); } /* Die Lichtflaechen liegen als Hintergrundbild auf dem Band selbst. background-color und background-image stehen deshalb einzeln da und nicht als Kurzform "background" - die wuerde das Bild bei jeder Farbangabe wieder auf none setzen. */ .atg-spaltenband.section { background-color: var(--atg-sb-band); background-image: var(--atg-sb-glow); padding-block: var(--atg-block-band-y); } /* Seit 23.09.2026 stehen auch die Hinweiskarten auf einem dunklen Band - dieselbe Farbe wie das Spaltenband darueber. Die Seite greift damit den Wechsel hell-dunkel-hell-dunkel der Startseite auf. */ .atg-hinweiskarten.section { background-color: var(--atg-hk-band); background-image: var(--atg-hk-glow); padding-block: var(--atg-hk-band-y); } /* Jedes Inhaltselement bringt aus dem Theme 42px Luft oben und unten mit - den Standardabstand zwischen zwei Elementen. Am 22.09.2026 an der Live-Vorschau nachgemessen: .frame ist dort 460px hoch, der .frame-container darin 376px. Innerhalb eines Bandes ist dieser Abstand falsch. Er liegt INNERHALB der farbigen Flaeche und kommt zur Bandluft dazu: das Band waere ueberall 84px hoeher als gezeichnet, und die Luft stuende an zwei Stellen statt an einer. Hier ist sie ausschliesslich --atg-block-band-y. Gilt auch fuer die Inhaltselemente INNERHALB des Spaltenbandes - sonst haetten die beiden Spalten den Abstand noch einmal. Folge: stehen zwei Elemente mit demselben Band-Layout untereinander, stossen die Baender ohne Fuge aneinander. Das ist so gewollt - es ergibt ein durchgehendes Band. */ :is(.atg-textbild, .atg-spaltenband, .atg-bandtext, .atg-datenliste, .atg-kartezentriert, .atg-hinweiskarten) .frame { padding-block: 0; } /* ============================================================ 2 - LAYOUT 23: TEXT UND BILD ============================================================ Inhaltselement "Text & Bilder" (CType textpic). Markup am 22.09.2026 im DOM der Live-Vorschau nachgesehen: div.textpic.textpic-centered.textpic-right div.textpic-item.textpic-gallery div.gallery-row > div.gallery-item figure.image > picture > img div.textpic-item.textpic-text div.frame-header > h4.element-header h5.element-subheader.h1 p Das Bild steht im Quelltext VOR dem Text. Im Theme ist div.textpic ein Flex-Kasten, und die Klasse textpic-right dreht die Reihenfolge per Flex-Richtung um. Sobald die beiden untereinander stehen, faellt diese Drehung weg - und dann stand am Handy das Foto oben und der Text darunter. Hier wird daraus ein Raster mit zwei ausdruecklich benannten Plaetzen. Am Markup ist nichts geaendert; welcher Teil wo steht, entscheidet allein die Rasterposition. Untereinander bekommt der Text deshalb Zeile 1 und das Bild Zeile 2 - der Text steht am Handy oben. */ .atg-textbild .textpic { display: grid; grid-template-columns: var(--atg-tb-cols); gap: var(--atg-tb-col-gap); align-items: center; } .atg-textbild .textpic-text { grid-area: 1 / 1; } .atg-textbild .textpic-gallery { grid-area: 1 / 2; } @media (max-width: 767.98px) { .atg-textbild .textpic-text { grid-area: 1 / 1; } .atg-textbild .textpic-gallery { grid-area: 2 / 1; } } /* Das Theme gibt Galerie, Zeile und Kachel eigene Breiten, Aussenabstaende und teilweise float. Innerhalb eines Rasters ist beides falsch - die Rasterspalte gibt die Breite vor. */ .atg-textbild .textpic-item, .atg-textbild .gallery-row, .atg-textbild .gallery-item { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } /* Eine Rasterspalte ist von Haus aus mindestens so breit wie ihr laengstes unteilbares Wort - 1fr heisst minmax(auto, 1fr), nicht minmax(0, 1fr). Bei 390px und der Ueberschrift "Flaschendruckminderer" wurde die Spalte dadurch 353 statt 350 Punkte breit und das Bild ragte ueber die Inhaltskante. Dieselbe Zeile steht aus demselben Grund in container.css. */ .atg-textbild .textpic-item { min-width: 0; } .atg-textbild figure.image { margin: 0; } .atg-textbild picture { display: block; } /* Festes Bildfeld, das Bild fuellt es aus. Ohne das bringt jedes hochgeladene Foto seine eigene Hoehe mit, und ein Hochformat macht den Block dreimal so hoch wie noetig - derselbe Fall wie beim Teamfoto im Abschnitt "Persoenlich erreichbar". Die Breiten- und Hoehenangaben, die TYPO3 ans img schreibt, werden dabei ueberschrieben. */ .atg-textbild .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: var(--atg-tb-img-ratio); object-fit: cover; border-radius: var(--atg-tb-img-radius); } /* Der letzte Absatz der Textspalte darf unten keine Luft mehr haben, sonst sitzt der Text neben dem Bild sichtbar zu hoch. */ .atg-textbild .textpic-text > :last-child { margin-bottom: 0; } /* ============================================================ 3 - LAYOUT 24: SPALTENBAND DUNKEL ============================================================ Kommt auf den Spalten-Container (alle sechs Typen). Das Band liegt unter dem ganzen Container, die Spalten selbst bleiben durchsichtig - ein durchgehendes Band, keine zwei Kaesten. container.css stellt die Spalten oben buendig, damit kurzer Text nicht neben einem hohen Bild in der Luft haengt. Auf dem Band ist das Gegenteil richtig: die Vorlage zeigt beide Spalten senkrecht mittig, Mitte der Datenliste und Mitte des Bandes liegen bei 1440px auf demselben Pixel. Grundfarben stehen hier und nicht erst im Layout der Spalte: ein Inhaltselement, bei dem das Layout der Spalte vergessen wurde, waere sonst dunkelgrau auf Petrol. */ .atg-spaltenband { color: var(--atg-on-dark); } .atg-spaltenband .atg-cols { align-items: center; } @media (max-width: 767.98px) { .atg-spaltenband .atg-cols { gap: var(--atg-sb-stack-gap); } } /* ============================================================ 4 - LAYOUT 25: TEXT AUF DUNKLEM BAND ============================================================ Kommt auf ein Inhaltselement INNERHALB des Spaltenbandes. Zur Spezifitaet: design.css setzt die Farbe der Ueberschriften ueber "main h2:not(.h1, .h2, .h3, .h4, .h5)". Das ist eine Klasse und zwei Elemente. Eine Regel mit nur einer eigenen Klasse verliert dagegen - deshalb steht hier ueberall "main" plus die Blockklasse. */ main .atg-bandtext :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: var(--atg-on-dark); } /* Die erste Ebene traegt auf hellem Grund einen Unterstrich in dunklem Tuerkis. Auf dem Band ist der kaum zu sehen; er wechselt deshalb auf das helle Logo-Tuerkis. */ main .atg-bandtext :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)) > span, main .atg-bandtext :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)):not(:has(> span)) { border-bottom-color: var(--atg-accent); } .atg-bandtext p, .atg-bandtext li { color: var(--atg-on-dark-soft); } /* 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. */ main .atg-bandtext a { color: var(--atg-accent) !important; font-weight: 600; } main .atg-bandtext a:hover { color: var(--atg-on-dark) !important; } .atg-bandtext > :last-child, .atg-bandtext .frame-inner > :last-child { margin-bottom: 0; } /* ============================================================ 5 - LAYOUT 26: DATENLISTE DUNKEL ============================================================ Kommt auf ein normales Textelement innerhalb des Spaltenbandes. Gepflegt wird es im Editor: je Zeile ein Block "Textspalte" (div.text-column) mit genau zwei Absaetzen - erst die Bezeichnung, dann der Wert. Das Theme legt auf .text-column ein zweispaltiges Textlayout (column-count). Das ist hier falsch: die beiden Absaetze sollen nicht umbrechend nebeneinander flottieren, sondern an der linken und der rechten Kante sitzen. Das Spaltenlayout wird deshalb zurueckgesetzt. Eine neue Zeile heisst: im Editor einen weiteren Block "Textspalte" anlegen. Im CSS ist dafuer nichts zu tun. */ .atg-datenliste .text-column { column-count: initial; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--atg-dl-gap); padding-block: var(--atg-dl-row-pad); border-top: var(--atg-dl-rule) solid var(--atg-rule-dark); margin: 0; } /* Die untere Linie traegt nur die letzte Zeile - sonst stuenden zwischen zwei Zeilen zwei Linien uebereinander. */ .atg-datenliste .text-column:last-child { border-bottom: var(--atg-dl-rule) solid var(--atg-rule-dark); } .atg-datenliste .text-column p { margin: 0; } .atg-datenliste .text-column p:first-child { font-size: var(--atg-dl-label-fs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--atg-dl-label-track); color: var(--atg-on-dark-mute); } .atg-datenliste .text-column p:last-child { font-size: var(--atg-dl-value-fs); font-weight: 700; line-height: 1.2; color: var(--atg-on-dark); text-align: right; /* Ist der Wert zu lang fuer eine Zeile - "Zentrale Gasversorgungen und Rohrleitungsbau" etwa - rutscht er unter die Bezeichnung, statt das Raster zu sprengen. Dafuer steht flex-wrap oben. */ margin-left: auto; } /* ============================================================ 6 - LAYOUT 27: KARTE ZENTRIERT ============================================================ Kommt auf ein normales Textelement. Aus der Huelle des Inhaltselements wird die Karte selbst: .frame-container traegt weiterhin Seitenrand und Hoechstbreite der Seite, .frame-inner wird die weisse Flaeche. Darum muss "Rahmen" auf "Standard" stehen. Mit "Kein Rahmen" gibt es keinen .frame-inner und damit keine Karte. Die Aufzaehlungspunkte bekommen ein Haekchen. Gepflegt wird das im Editor ueber den Knopf "Liste" - normale Absaetze in derselben Karte bleiben dadurch normale Absaetze. */ .atg-kartezentriert .frame-inner { max-width: var(--atg-kz-card-max); margin-inline: auto; padding: var(--atg-kz-pad); background: var(--atg-white); border-radius: var(--atg-kz-radius); box-shadow: var(--atg-kz-shadow); } /* Beim Darueberfahren hebt sich die Karte und wirft einen tieferen Schatten. Bewegt wird mit transform, nicht mit margin oder top: nur transform und opacity laufen im Browser ohne Neuberechnung des Seitenaufbaus. :focus-within ist dabei, damit die Karte auch reagiert, wenn ein Link darin mit der Tastatur angesteuert wird. Auf Touch-Geraeten passiert nichts - dafuer steht alles in @media (hover: hover). Bei prefers-reduced-motion ist --atg-transition bereits 0s, die Karte springt dann ohne Uebergang. */ @media (hover: hover) { .atg-kartezentriert .frame-inner { transition: transform var(--atg-kz-hover-time), box-shadow var(--atg-kz-hover-time); } .atg-kartezentriert .frame-inner:hover, .atg-kartezentriert .frame-inner:focus-within { transform: translateY(calc(-1 * var(--atg-kz-lift))); box-shadow: var(--atg-kz-shadow-hover); } } .atg-kartezentriert .frame-header { margin-bottom: var(--atg-kz-head-gap); } .atg-kartezentriert .frame-inner > :last-child { margin-bottom: 0; } .atg-kartezentriert ul { list-style: none; margin: 0; padding: 0; } .atg-kartezentriert ul li { display: grid; grid-template-columns: var(--atg-kz-mark-col) 1fr; align-items: start; font-size: var(--atg-kz-body-fs); color: var(--atg-ink); text-align: left; } .atg-kartezentriert ul li + li { margin-top: var(--atg-kz-item-gap); } /* Das Haekchen ist eine Maske, kein Schriftzeichen - warum, steht bei --atg-haken in tokens.css. Die Hoehe 1lh ist eine Zeilenhoehe: das Haekchen sitzt damit senkrecht mittig in der ersten Textzeile, egal wie gross die Schrift gerade ist. */ .atg-kartezentriert ul li::before { content: ""; width: var(--atg-kz-mark-fs); height: 1lh; background-color: var(--atg-accent-deep); -webkit-mask: var(--atg-haken) no-repeat center / var(--atg-kz-mark-fs); mask: var(--atg-haken) no-repeat center / var(--atg-kz-mark-fs); } /* ============================================================ 7 - LAYOUT 28: HINWEISKARTEN ============================================================ Inhaltselement "Card Group" von bootstrap_package mit beliebig vielen Karten. Markup am 22.09.2026 im DOM nachgesehen: div.card-group-element.card-group-element-columns-1 div.card-group-element-item div.card div.card-img-top > picture > img Feld "Image" div.card-body h2.card-title Feld "Header" h3.card-subtitle Feld "Subheader" div.card-footer > a.btn > span.btn-text Felder "Link"/"Title" Das Feld "Image" traegt hier kein Foto, sondern das Symbol links - die Card Group hat kein eigenes Icon-Feld. Fehlt das Bild, faellt die Spalte weg und Titel und Text ruecken nach links; die Rasterplaetze sind dafuer ausdruecklich benannt. Ungerade Karte gefuellt, gerade Karte mit Linie. Dadurch sieht die dritte Karte von selbst aus wie die erste, ohne dass eine Kartennummer im CSS steht - eine vierte Karte bekaeme den Umriss-Stil. */ /* Die Kartengruppe ist im Theme ein Flex-Kasten und rechnet die Kartenbreite selbst aus: width: calc(100% / --cardgroup-columns - ...). Bei einer Spalte geht das zwar auf, der Abzug bleibt aber. Dieselbe Falle wie bei der Produktvorschau. */ .atg-hinweiskarten .card-group-element { display: block; margin: 0; padding: 0; } .atg-hinweiskarten .card-group-element-item { width: 100%; max-width: none; margin: 0; padding: 0; } .atg-hinweiskarten .card-group-element-item + .card-group-element-item { margin-top: var(--atg-hk-gap); } .atg-hinweiskarten .card { display: flex; /* Im Theme ist die Karte eine Spalte (flex-direction: column) - Bild oben, Text darunter. Hier stehen Symbol, Text und Knopf nebeneinander. Ohne diese Zeile setzt "align-items: center" die drei Teile waagrecht mittig statt senkrecht: gemessen stand das Symbol bei 1440px auf x=703 statt auf x=132. */ flex-direction: row; align-items: center; gap: var(--atg-hk-icon-gap); min-height: var(--atg-hk-min-h); padding: var(--atg-hk-pad-y) var(--atg-hk-pad-x); border: 0; border-radius: var(--atg-hk-radius); background: none; } .atg-hinweiskarten .card-group-element-item:nth-child(odd) .card { background: var(--atg-hk-fill); border: var(--atg-hk-rule) solid var(--atg-hk-fill-line); } .atg-hinweiskarten .card-group-element-item:nth-child(even) .card { background: none; border: var(--atg-hk-rule) solid var(--atg-hk-line); } /* Beim Darueberfahren hebt sich die Karte. Anders als bei der Karte auf hellem Band gibt es hier keinen Schatten - auf dunklem Grund ist er nicht zu sehen. Sichtbar wird die Bewegung ueber die Flaeche: die gefuellte Karte wird heller, die umrandete bekommt ueberhaupt erst eine. Die Karte bleibt angehoben, wenn die Maus weiter auf den Knopf wandert, und der Knopf faerbt sich zusaetzlich (Festlegung vom 23.09.2026). Genauso verhaelt sich der Abschnitt "Persoenlich erreichbar" auf der Startseite. */ @media (hover: hover) { .atg-hinweiskarten .card { transition: transform var(--atg-hk-hover-time), background-color var(--atg-hk-hover-time), border-color var(--atg-hk-hover-time); } .atg-hinweiskarten .card:hover, .atg-hinweiskarten .card:focus-within { transform: translateY(calc(-1 * var(--atg-hk-lift))); } .atg-hinweiskarten .card-group-element-item:nth-child(odd) .card:hover, .atg-hinweiskarten .card-group-element-item:nth-child(odd) .card:focus-within { background: var(--atg-hk-fill-hover); border-color: var(--atg-hk-line-hover); } .atg-hinweiskarten .card-group-element-item:nth-child(even) .card:hover, .atg-hinweiskarten .card-group-element-item:nth-child(even) .card:focus-within { background: var(--atg-hk-open-hover); border-color: var(--atg-hk-line-hover); } } /* --- Symbol --- */ .atg-hinweiskarten .card-img-top { flex: 0 0 auto; width: var(--atg-hk-icon); margin: 0; padding: 0; background: none; } .atg-hinweiskarten .card-img-top img { display: block; width: 100%; height: auto; } /* --- Titel und Text --- */ .atg-hinweiskarten .card-body { flex: 1 1 auto; margin: 0; padding: 0; background: none; } .atg-hinweiskarten .card-title { margin: 0; font-size: var(--atg-hk-title-fs); font-weight: 700; line-height: 1.25; color: var(--atg-hk-title); } /* Der Deckel sitzt auf dem Text, nicht auf dem ganzen Textteil. Auf dem Textteil brach er auch die Ueberschrift um: "Ihr dynamischer Partner in der Autogentechnik" stand zweizeilig, obwohl rechts daneben bis zum Knopf 400px frei waren. Die Vorlage zeigt kurze Ueberschriften und einen umbrechenden Text - genau das macht der Deckel hier. */ .atg-hinweiskarten .card-subtitle { margin: var(--atg-hk-title-gap) 0 0; font-size: var(--atg-hk-body-fs); font-weight: 400; line-height: 1.6; max-width: var(--atg-hk-text-max); color: var(--atg-hk-text); /* Das Theme setzt auf die Unterueberschrift der Karte "text-wrap: balance". Der Browser verteilt die Woerter dann auf gleich lange Zeilen - hier stand dadurch die zweite Zeile laenger da als die erste ("Bei uns spricht man mit dem" / "Fachmann, nicht mit einem Callcenter."), und die Kartenhoehe haengt am Umbruchalgorithmus statt an der Textlaenge. Die Vorlage zeigt normalen Fluss. */ text-wrap: wrap; } /* --- Knopf --- */ .atg-hinweiskarten .card-footer { flex: 0 0 auto; margin: 0 0 0 auto; padding: 0 0 0 var(--atg-hk-btn-gap); border: 0; background: none; } /* Von bootstrap_package kommt der Knopf als a.btn.btn-default mit oranger Flaeche - das wird vollstaendig zurueckgesetzt. Das !important auf der Textfarbe ist noetig, weil design.css "main a { color: #52bfd3 !important }" setzt. */ .atg-hinweiskarten a.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--atg-hk-btn-h); padding-inline: var(--atg-hk-btn-pad); border: var(--atg-hk-rule) solid transparent; border-radius: var(--atg-radius); font-size: var(--atg-hk-btn-fs); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; box-sizing: border-box; transition: background-color var(--atg-transition), color var(--atg-transition), border-color var(--atg-transition); } .atg-hinweiskarten .card-group-element-item:nth-child(odd) a.btn { background: var(--atg-hk-btn-bg); color: var(--atg-hk-btn-fg) !important; } .atg-hinweiskarten .card-group-element-item:nth-child(even) a.btn { background: none; border-color: var(--atg-hk-btn-line); color: var(--atg-hk-btn-line) !important; } /* BEIDE Knopfarten gehen beim Darueberfahren auf dieselbe helle Flaeche. Das ist die Regel: im Ruhezustand unterscheiden sich die Knoepfe, beim Darueberfahren sehen sie gleich aus - und dieses Aussehen hat sonst kein Knopf im Block. Vorher fuellte sich der Umriss-Knopf mit --atg-accent, und das ist genau die RUHEFARBE der beiden gefuellten Knoepfe daneben. Der gehoverte Knopf sah dadurch aus wie ein gewoehnlicher Knopf im Ruhezustand - die Rueckmeldung fiel weg, obwohl sich die Farbe geaendert hatte. Auf einer Seite mit drei Knoepfen untereinander faellt so etwas sofort auf. Die vier Selektoren stehen ausgeschrieben da und nicht als ein kurzer ".atg-hinweiskarten a.btn:hover": die Ruhezustaende haengen an :nth-child und haben damit vier Klassen. Eine kuerzere Hover-Regel haette weniger und wuerde von ihnen ueberstimmt. */ .atg-hinweiskarten .card-group-element-item:nth-child(odd) a.btn:hover, .atg-hinweiskarten .card-group-element-item:nth-child(odd) a.btn:focus-visible, .atg-hinweiskarten .card-group-element-item:nth-child(even) a.btn:hover, .atg-hinweiskarten .card-group-element-item:nth-child(even) a.btn:focus-visible { background: var(--atg-hk-btn-hover); border-color: var(--atg-hk-btn-hover); color: var(--atg-hk-btn-fg) !important; } /* Bis 767px: Symbol und Titel stehen nebeneinander, der Text rueckt unter den Titel ein, der Knopf laeuft ueber die volle Kartenbreite. Die Plaetze sind benannt, damit eine Karte ohne Symbol nicht verrutscht. */ @media (max-width: 767.98px) { .atg-hinweiskarten .card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--atg-hk-icon-gap); align-items: start; } .atg-hinweiskarten .card-img-top { grid-area: 1 / 1; } .atg-hinweiskarten .card-body { grid-area: 1 / 2; } .atg-hinweiskarten .card-footer { grid-column: 1 / -1; margin: var(--atg-hk-btn-gap) 0 0; padding: 0; } .atg-hinweiskarten a.btn { width: 100%; white-space: normal; } }