/* ============================================================ ATG-Gigerl – Brotkrumen (Navigationszeile der Unterseiten) Liegt unter: fileadmin/templates/css/brotkrumen.css Stand: 28.09.2026 - Baender der Seite Kontakt / Anfahrt ergaenzt Die Zeile "Startseite › Unternehmen" zwischen Menue und erstem Inhaltsblock. Markup aus lib.rootline in autogentechnik.typoscript, Platz in autogen-template.html: div.breadcrumps > div.atg-container > nav.atg-crumbs > ol.atg-crumbs__list > li.atg-crumbs__item > a Elternseite > li.atg-crumbs__item > span[aria-current] aktuelle Seite Die seitlichen Abstaende kommen aus .atg-container (menu.css), der Pfad beginnt damit auf jeder Breite auf derselben Kante wie Menue, Inhalt und Fusszeile. Alle Zahlen und Farben stehen in tokens.css unter "Brotkrumen". Diese Datei enthaelt keine. ============================================================ */ /* ---------- 1 - Weisser Rand ueber dem Inhalt ---------- design.css setzt "#inhalt { margin-top: 2% }". Auf Unterseiten lag dadurch ein weisser Streifen zwischen Menue und Zeile, und ein farbiges Band begann erst unter der Zeile. Die Luft steckt jetzt als Innenabstand in der Zeile selbst - oben und unten gleich viel, damit der Text senkrecht mittig steht. Dasselbe gilt fuer "margin-bottom: 0.5%" am Headerbild aus design.css: das ist auf Unterseiten leer, der Rand blieb aber stehen - bei 1440px ein weisser Streifen von 7px. Startseite (1) und Seite 2 zeigen keine Zeile und behalten beide Raender. */ body:not(#pageid1, #pageid2) .headerimage, body:not(#pageid1, #pageid2) #inhalt { margin-block: 0; } /* ---------- 2 - Die Zeile ---------- */ .breadcrumps { background: var(--atg-crumbs-bg); padding-block: var(--atg-crumbs-pad-y); text-align: start; } .atg-crumbs__list { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; list-style: none; font-family: var(--atg-font); font-size: var(--atg-h4-fs); font-weight: var(--atg-crumbs-weight); line-height: 1.3; letter-spacing: var(--atg-crumbs-tracking); text-transform: uppercase; color: var(--atg-crumbs-current); } .atg-crumbs__item { margin: 0; padding: 0; } /* Der Pfeil gehoert zum FOLGENDEN Eintrag. Bricht ein langer Pfad um, steht er dadurch am Anfang der neuen Zeile und nie allein am Ende der alten. Hinter dem Schraegstrich steht der Ersatztext fuer Screenreader: leer, der Pfeil wird nicht vorgelesen. */ .atg-crumbs__item + .atg-crumbs__item::before { content: "\203A"; content: "\203A" / ""; display: inline-block; margin-inline: var(--atg-crumbs-sep-gap); font-size: var(--atg-crumbs-sep-size); font-weight: 400; line-height: 0; letter-spacing: 0; color: var(--atg-crumbs-sep); } /* design.css setzt "main a { color: #52bfd3 !important }". Gegen ein !important hilft nur ein zweites - dieselbe Loesung wie in inhaltsbloecke.css. Faellt weg, sobald die Regel in design.css entfernt ist. */ .atg-crumbs__item a { color: var(--atg-crumbs-link) !important; text-decoration: none; transition: color var(--atg-transition); } .atg-crumbs__item a:hover, .atg-crumbs__item a:focus-visible { color: var(--atg-crumbs-hover) !important; } .atg-crumbs__item [aria-current] { color: var(--atg-crumbs-current); } /* ---------- 3 - Farbe des ersten Inhaltsblocks ---------- Folgt auf die Zeile ein Block mit Band, uebernimmt sie dessen Farbe und steht damit optisch schon im Band. Sonst bleibt sie weiss. Kommt ein neuer Band-Block dazu, gehoert seine Klasse in eine der beiden Listen. hell: 21 Persoenlich erreichbar, 23 Text und Bild, 27 Karte zentriert, 29 Einleitung hell, 31 Partnerkarten, 34 Kontaktkarte dunkel: 20 Produkt Vorschau, 22 News, 24 Spaltenband dunkel, 28 Hinweiskarten, 30 Premium-Partner, 33 Ansprechpartner, 35 Anfahrt, 44 Service-Titel (Petrol) */ .breadcrumps:has(+ .atg-persoenlich, + .atg-textbild, + .atg-kartezentriert, + .atg-einleitung, + .atg-partnerkarten, + .atg-kontakt) { --atg-crumbs-bg: var(--atg-crumbs-band-light); } .breadcrumps:has(+ .atg-produktvorschau, + .atg-news, + .atg-spaltenband, + .atg-hinweiskarten, + .atg-premium, + .atg-ansprechpartner, + .atg-anfahrt, + .atg-servicetitel) { --atg-crumbs-bg: var(--atg-crumbs-band-dark); --atg-crumbs-link: var(--atg-crumbs-link-dark); --atg-crumbs-hover: var(--atg-crumbs-hover-dark); --atg-crumbs-current: var(--atg-crumbs-cur-dark); --atg-crumbs-sep: var(--atg-crumbs-sep-dark); } /* Service-Titel (Layout 44) liegt auf Petrol, nicht auf --atg-band-dark - die Zeile nimmt deshalb dessen Bandfarbe. */ .breadcrumps:has(+ .atg-servicetitel) { --atg-crumbs-bg: var(--atg-st-band); } /* ---------- 4 - Luft oben im folgenden Band ---------- Steht die Zeile schon in der Farbe des Bandes, gehoert sie optisch zum Band. Dessen volle Luft oben kaeme dann zur Luft der Zeile dazu. Das Band bekommt oben deshalb nur den Anteil --atg-crumbs-band-top seiner eigenen Luft, unten bleibt sie unveraendert. Jedes Band hat seine eigene Luft-Variable, daher eine Zeile je Variable. */ .breadcrumps + .atg-textbild.section, .breadcrumps + .atg-kartezentriert.section, .breadcrumps + .atg-spaltenband.section { padding-top: calc(var(--atg-block-band-y) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-hinweiskarten.section { padding-top: calc(var(--atg-hk-band-y) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-persoenlich.section { padding-top: calc(var(--atg-pe-band-y) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-produktvorschau.section { padding-top: calc(var(--atg-pv-band-y) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-news.section { padding-top: calc(var(--atg-nw-band-y) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-einleitung.section, .breadcrumps + .atg-premium.section, .breadcrumps + .atg-partnerkarten.section { padding-top: calc(var(--atg-pa-band-top) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-ansprechpartner.section { padding-top: calc(var(--atg-ap-band-top) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-kontakt.section, .breadcrumps + .atg-anfahrt.section { padding-top: calc(var(--atg-ko-band-top) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-servicetitel.section { padding-top: calc(var(--atg-st-pad-top) * var(--atg-crumbs-band-top)); }