/* ============================================================ ATG-Gigerl – Fusszeile Liegt unter: fileadmin/templates/css/footer.css Stand: 12.10.2026 - Soziale Netzwerke ergaenzt Ersetzt die alten footer-Regeln aus design.css und die beiden Inhaltselemente auf der Template-Seite (Footer, Copyright). Aufbau der Datei ---------------- 1. Rahmen der Fusszeile 2. Slogan-Bild 3. Die drei Spalten 4. Trennlinien, WKO-Zeile, Copyright 5. Breakpoints: 1024–1439 / 768–1023 / bis 767 Vorgehen wie bei menu.css: Desktop-First. Die Grundwerte gelten ab 1440px, danach drei max-width-Bloecke. Alle Maße stammen aus den vier Design-Vorlagen der Startseite. Die seitlichen Abstaende kommen aus .atg-container (menu.css). Dadurch steht der Text der Fusszeile auf JEDER Breite exakt unter dem Menue - das war die Vorgabe aus dem Bild "Container fuer Fusszeile". Kein !important. Alle Klassen mit Praefix "atg-". ============================================================ */ /* ============================================================ 1. RAHMEN ============================================================ */ .atg-footer { /* Maße, die sich pro Breakpoint aendern. Wer etwas verschieben will, aendert sie hier - nicht in den einzelnen Regeln weiter unten. */ --f-pad-top: 58px; /* Oberkante bis Slogan-Bild */ --f-pad-bottom: 36px; /* Copyright bis Unterkante */ --f-slogan-max-w: 860px; --f-slogan-max-h: 200px; --f-slogan-gap: 45px; /* Slogan-Bild bis Spalten */ --f-head-fs: 17.5px; /* KONTAKT, OEFFNUNGSZEITEN, ... */ --f-head-gap: 18px; /* Ueberschrift bis erste Zeile */ --f-body-fs: 15.5px; --f-lh: 1.75; --f-mail-gap: 6px; /* zusaetzlich vor der E-Mail */ --f-sub-gap: 14px; /* vor "Werkstatt & Abholung" / "Buero" */ --f-legal-gap: 5px; /* zusaetzlich zwischen den Rechtslinks */ --f-cols-gap: 50px; /* Spalten bis erste Trennlinie */ --f-band-pad: 28px; /* Trennlinie bis WKO-Zeile */ --f-copy-gap: 22px; /* Trennlinie bis Copyright */ --f-wko-fs: 14.5px; --f-copy-fs: 13.5px; --f-col-abstand: 32px; /* Schutzabstand zwischen den Spalten */ background: var(--atg-topbar); color: var(--atg-on-dark-soft); font-family: var(--atg-font); font-size: var(--f-body-fs); line-height: var(--f-lh); padding-top: var(--f-pad-top); padding-bottom: var(--f-pad-bottom); } /* Innenabstaende zaehlen zur Groesse - sonst laufen die Spaltenbreiten in Prozent um ihr padding daneben. */ .atg-footer *, .atg-footer *::before, .atg-footer *::after { box-sizing: border-box; } /* design.css setzt fuer die ganze Seite "* {margin:0; padding:0}", das Bootstrap-Package setzt danach eigene Abstaende auf p und ul. Beides wird hier fuer die Fusszeile bewusst zurueckgesetzt, damit die Abstaende nur aus den Werten oben kommen. WICHTIG: :where() ist kein Schmuck, sondern noetig. Ohne das waere ".atg-footer p" staerker als jede spaetere Klasse und wuerde alle Abstaende weiter unten wieder auf null setzen - die Fusszeile stand dadurch als ein einziger Block ohne Zwischenraeume da. :where() zaehlt bei der Staerke nicht mit. */ .atg-footer :where(p, ul, li, h2) { margin: 0; padding: 0; } .atg-footer :where(ul) { list-style: none; } .atg-footer a { color: inherit; text-decoration: none; transition: color var(--atg-transition); } .atg-footer a:hover, .atg-footer a:focus-visible { color: var(--atg-accent); } /* Sichtbarer Fokusrahmen fuer die Tastaturbedienung. */ .atg-footer a:focus-visible { outline: 2px solid var(--atg-accent); outline-offset: 3px; } /* ============================================================ 2. SLOGAN-BILD ------------------------------------------------------------ Das Bild liegt im Backend unter fileadmin/user_upload/logos/slogan_bild.png und ist in constants.typoscript eingetragen. Massgeblich ist die BREITE. Die Hoehe ist nur eine Notbremse fuer den Fall, dass spaeter ein hochformatiges Bild eingesetzt wird - beim jetzigen Bild (2480 x 472 Punkte, also sehr breit) greift sie nicht. Frueher stand es umgekehrt: die Hoehe war der engere Wert und hat das Bild auf gut ein Drittel der vorgesehenen Breite heruntergerechnet. Wer das Bild groesser oder kleiner haben will, aendert --f-slogan-max-w. Die Datei hat mehr als genug Aufloesung, um in dieser Groesse scharf zu bleiben. ============================================================ */ .atg-footer__slogan { text-align: center; } .atg-footer__slogan img { display: block; width: auto; height: auto; max-width: min(100%, var(--f-slogan-max-w)); max-height: var(--f-slogan-max-h); margin: 0 auto; } /* ============================================================ 3. DIE DREI SPALTEN ------------------------------------------------------------ Breitenverhaeltnis 40 / 32 / 28 Prozent. So steht es in beiden Desktop-Vorlagen: die Kontaktspalte ist die breiteste, "Rechtliches" die schmalste. ============================================================ */ .atg-footer__cols { display: grid; grid-template-columns: 40% 32% 28%; margin-top: var(--f-slogan-gap); } /* Schutzabstand, damit lange Zeilen (etwa die E-Mail-Adresse oder "Datenschutzerklaerung") nicht an die naechste Spalte stossen. Die Spalten beginnen dadurch trotzdem exakt bei 0 / 40 / 72 Prozent. */ .atg-footer__col:not(:last-child) { padding-right: var(--f-col-abstand); } /* Die Spaltentitel stehen bewusst deutlich ueber den Zwischentiteln in den Spalten ("ATG-Gigerl e.U.", "Buero"): sie sind groesser, tuerkis und gesperrt gesetzt. In der Design-Vorlage waren sie kleiner als der Fliesstext - das hat die Rangfolge auf den Kopf gestellt. */ .atg-footer__head { font-size: var(--f-head-fs); font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--atg-accent); margin-bottom: var(--f-head-gap); } /* --- Spalte 1: Kontakt --- */ .atg-footer__firma { font-weight: 700; color: var(--atg-on-dark); } .atg-footer__mail { margin-top: var(--f-mail-gap); } /* Telefonnummer und E-Mail sind Links - waehlbar am Handy, anklickbar am Rechner -, aber ohne Unterstrich. Dass es Links sind, zeigt die hellere Schrift und der Farbwechsel beim Darueberfahren. */ .atg-footer__mail a, .atg-footer__tel a { color: var(--atg-on-dark); text-decoration: none; } /* --- Spalte 2: Oeffnungszeiten --- */ /* Zwischentitel innerhalb der Spalte. Die Firma hat zwei verschiedene Zeitfenster - Werkstatt/Abholung und Buero -, die Vorlage kennt nur eines. Die Zwischentitel trennen beide sauber, ohne eine vierte Spalte zu brauchen. */ .atg-footer__sublabel { font-weight: 600; color: var(--atg-on-dark); margin-top: var(--f-sub-gap); } .atg-footer__sublabel:first-of-type { margin-top: 0; } /* --- Spalte 3: Rechtliches --- */ /* Die dritte Spalte: der ganze Block sitzt rechts am Containerrand, die drei Links beginnen aber alle an derselben Kante - sie sind untereinander linksbuendig. Zwei Schritte, die zusammengehoeren: "width: max-content" macht die Spalte nur so breit wie ihre laengste Zeile - das ist entweder die Ueberschrift oder "Datenschutzerklaerung". "margin-left: auto" schiebt diesen schmalen Block an den rechten Containerrand. Der Text bleibt dabei linksbuendig. Ergebnis: Ueberschrift und alle drei Links beginnen an derselben Kante, und die laengste Zeile endet genau am rechten Ende der Trennlinie. Mit "text-align: right" stuenden die drei Links links ausgefranst untereinander. Linksbuendig ueber die ganze Spaltenbreite - so wie in der Design-Vorlage - blieb rechts ein breiter leerer Streifen. Unter 1024px wird das wieder aufgehoben (siehe unten), dort ist der Platz knapp und die Spalten stehen eng genug. */ .atg-footer__col:last-child { width: max-content; max-width: 100%; margin-left: auto; } /* Gesperrte Schrift setzt hinter den letzten Buchstaben noch einen Zwischenraum. Ohne diese Korrektur stuende die Ueberschrift zwei Punkte weiter links als die Links darunter. */ .atg-footer__col:last-child .atg-footer__head { margin-right: -.12em; } .atg-footer__legal li + li { margin-top: var(--f-legal-gap); } .atg-footer__legal a { display: inline-block; } /* ============================================================ 4. TRENNLINIEN, WKO-ZEILE, COPYRIGHT ============================================================ */ .atg-footer__rule { height: 1px; border: 0; background: var(--atg-rule-dark); margin: 0; } .atg-footer__rule--oben { margin-top: var(--f-cols-gap); } /* --- Soziale Netzwerke --- Vier verlinkte Ringe, mittig ueber der WKO-Zeile. Alle Zahlen und Farben dazu stehen in tokens.css unter "FUSSZEILE - SOZIALE NETZWERKE" - hier steht bewusst keine. Das Symbol ist eine MASKE, kein Bild: die Farbe kommt aus background, die SVG-Datei gibt nur die Form vor. Dadurch sind alle vier gleich grau und wechseln beim Darueberfahren gemeinsam mit dem Ring die Farbe. */ .atg-footer__social { display: flex; justify-content: center; gap: var(--atg-so-gap); padding: var(--atg-so-top) 0 var(--atg-so-bottom); } .atg-footer__social-link { display: flex; align-items: center; justify-content: center; width: var(--atg-so-size); height: var(--atg-so-size); border: 1px solid var(--atg-so-ring); border-radius: 50%; transition: border-color var(--atg-transition); } .atg-footer__social-ico { width: var(--atg-so-ico); height: var(--atg-so-ico); background: var(--atg-so-ink); transition: background-color var(--atg-transition); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .atg-footer__social-ico--linkedin { -webkit-mask-image: var(--atg-so-linkedin); mask-image: var(--atg-so-linkedin); } .atg-footer__social-ico--youtube { -webkit-mask-image: var(--atg-so-youtube); mask-image: var(--atg-so-youtube); } .atg-footer__social-ico--facebook { -webkit-mask-image: var(--atg-so-facebook); mask-image: var(--atg-so-facebook); } .atg-footer__social-ico--instagram { -webkit-mask-image: var(--atg-so-instagram); mask-image: var(--atg-so-instagram); } .atg-footer__social-link:hover, .atg-footer__social-link:focus-visible { border-color: var(--atg-so-ring-hover); } .atg-footer__social-link:hover .atg-footer__social-ico, .atg-footer__social-link:focus-visible .atg-footer__social-ico { background: var(--atg-so-ink-hover); } /* Die Symbolreihe steht in einem eigenen Streifen zwischen zwei Trennlinien, die WKO-Zeile im naechsten. Beide behalten ihre eigene Luft - wird die Symbolreihe abgeschaltet (alle vier Adressen in constants.typoscript leer), stehen die beiden Linien direkt uebereinander. Das faellt auf; in dem Fall gehoert auch die zweite Linie aus dem Template entfernt. */ .atg-footer__wko { text-align: center; font-size: var(--f-wko-fs); line-height: 1.6; color: var(--atg-on-dark-mute); padding: var(--f-band-pad) 0; } .atg-footer__wko a { color: var(--atg-on-dark-soft); text-decoration: underline; text-underline-offset: 3px; } .atg-footer__copyright { text-align: center; font-size: var(--f-copy-fs); line-height: 1.6; color: var(--atg-on-dark-faint); margin-top: var(--f-copy-gap); } /* ============================================================ 5. BREAKPOINT 1024–1439px ------------------------------------------------------------ Seitenabstand kommt aus .atg-container und laeuft in diesem Bereich gleitend mit (siehe menu.css). Der Text der Fusszeile steht dadurch immer genau unter dem Menue. ============================================================ */ @media (max-width: 1439.98px) { .atg-footer { --f-pad-top: 50px; --f-pad-bottom: 34px; --f-slogan-max-w: 740px; --f-slogan-max-h: 170px; --f-slogan-gap: 37px; --f-head-fs: 16.5px; --f-head-gap: 15px; --f-body-fs: 15px; --f-cols-gap: 44px; --f-wko-fs: 14px; --f-copy-fs: 13px; --f-col-abstand: 28px; } } /* ============================================================ 6. BREAKPOINT 768–1023px ------------------------------------------------------------ Die drei Spalten bleiben nebeneinander stehen, alles wird etwas kompakter. ============================================================ */ @media (max-width: 1023.98px) { .atg-footer { --f-pad-top: 46px; --f-slogan-max-w: 600px; --f-slogan-max-h: 140px; --f-slogan-gap: 34px; --f-head-gap: 13px; --f-legal-gap: 6px; --f-cols-gap: 39px; --f-col-abstand: 24px; } /* Hier weicht die Aufteilung bewusst von 40/32/28 ab. Die Vorlage zeigt fuer diese Breite Platzhaltertexte ("[UHRZEIT] bis [UHRZEIT]"). Mit den echten Zeiten - und mit den Buerozeiten zusaetzlich - ist die mittlere Spalte hier zu schmal: jede Zeile waere zweizeilig umgebrochen. Die mittlere Spalte bekommt deshalb mehr Platz, die beiden anderen geben ihn ab - sie brauchen ihn nicht, ihre laengste Zeile ist die E-Mail-Adresse beziehungsweise "Datenschutzerklaerung". Bei 768px, dem schmalsten Punkt dieses Bereichs, geht sich damit jede Zeile der mittleren Spalte aus. Der Text der Fusszeile steht weiterhin genau unter dem Menue, nur die innere Aufteilung ist anders. */ .atg-footer__cols { grid-template-columns: 32% 42% 26%; } /* Nach rechts gerueckt wird nur bei den beiden grossen Breiten - hier sind die Spalten ohnehin eng beieinander. */ .atg-footer__col:last-child { width: auto; margin-left: 0; } .atg-footer__col:last-child .atg-footer__head { margin-right: 0; } } /* ============================================================ 7. BREAKPOINT bis 767px ------------------------------------------------------------ Die Spalten stehen untereinander. Telefonnummer und E-Mail werden zu deutlich sichtbaren Links, die Rechtslinks bekommen groessere Abstaende - beides, damit man sie mit dem Daumen sicher trifft. ============================================================ */ @media (max-width: 767.98px) { .atg-footer { --f-pad-top: 38px; --f-pad-bottom: 34px; --f-slogan-max-w: 100%; --f-slogan-max-h: 120px; --f-slogan-gap: 30px; --f-head-fs: 17px; --f-head-gap: 12px; --f-body-fs: 15.5px; --f-sub-gap: 16px; --f-legal-gap: 19px; --f-cols-gap: 44px; } .atg-footer__cols { grid-template-columns: 1fr; } .atg-footer__col:not(:last-child) { padding-right: 0; } .atg-footer__col + .atg-footer__col { margin-top: 32px; } /* Telefon und E-Mail stehen am Handy etwas freier - hier sind es die beiden wichtigsten Elemente der ganzen Fusszeile. */ .atg-footer__tel { margin-top: 20px; } .atg-footer__mail { margin-top: 25px; } }