/* ============================================================ ATG-Gigerl – Brotkrumen (Navigationszeile der Unterseiten) Liegt unter: fileadmin/templates/css/brotkrumen.css Stand: 04.11.2026 - Layout 38 Downloads in der hellen Liste 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, 38 Downloads, 51 Zeitachse dunkel: 20 Produkt Vorschau, 22 News, 24 Spaltenband dunkel, 28 Hinweiskarten, 30 Premium-Partner, 33 Ansprechpartner, 35 Anfahrt, 44 Service-Titel (Petrol), 50 Einleitung dunkel Layout 50 traegt BEIDE Klassen, .atg-textbild und .atg-textbild-dunkel, und steht damit in beiden Listen. Das geht auf, weil beide Regeln gleich stark sind - die Spezifitaet von :has() ist die des staerksten Arguments, hier also je eine Klasse - und die dunkle Liste weiter unten steht. Wer die Reihenfolge der beiden Bloecke vertauscht, dreht damit auch die Farbe der Zeile um. */ .breadcrumps:has(+ .atg-persoenlich, + .atg-textbild, + .atg-kartezentriert, + .atg-einleitung, + .atg-partnerkarten, + .atg-kontakt, + .atg-downloads, + .atg-zeitachse) { --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-textbild-dunkel) { --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); } /* ---------- 3b - Baender mit Lichtflaechen ---------- Traegt das Band unter der Zeile Lichtflaechen, reicht die blosse Bandfarbe NICHT. Die erste Ellipse von --atg-pa-glow-dark sitzt mit ihrer Mitte auf der Oberkante des Bandes und ist dort am hellsten; ueber der Zeile waere die Flaeche einfarbig. An der Naht stuende dann eine gerade waagrechte Kante quer ueber die Seite - am 03.11.2026 bei 1440px gemessen: rgb(27, 68, 87) darueber gegen rgb(25, 92, 116) darunter, 24 Stufen im Blaukanal. Diesen Fall gibt es derzeit nicht: Layout 44 (Service-Titel) ist einfarbig, und Layout 50 traegt seit dem 03.11. keine Lichtflaechen mehr. Die Regeln dafuer sind deshalb wieder entfernt - toter Code, den niemand prueft, ist gefaehrlicher als keiner. Wie es geht, steht im Projekt-Dokument "Brotkrumen-Navigation": die Zeile bekommt dasselbe Bild senkrecht gespiegelt, dann stimmen die Farben an der Naht exakt ueberein. Gemessen und verworfen, nicht ungeprueft. */ /* ---------- 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-zeitachse.section { padding-top: calc(var(--atg-zl-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)); } /* Downloads (Layout 38) als erster Block, z. B. auf der versteckten Seite "News fuer Kunden" (04.11.2026) */ .breadcrumps + .atg-downloads.section { padding-top: calc(var(--atg-dc-band-top) * var(--atg-crumbs-band-top)); } .breadcrumps + .atg-servicetitel.section { padding-top: calc(var(--atg-st-pad-top) * var(--atg-crumbs-band-top)); }