/* ============================================================ ATG-Gigerl – Abschnitt "Social Media" der Startseite Liegt unter: fileadmin/templates/css/social.css Stand: 23.10.2026 (dritte Fassung) Layout 39. Weisse Karte wie "Persoenlich erreichbar" auf demselben hellen Band: links Kicker, Ueberschrift und Text aus einem normalen Text-Element, rechts ein Petrol-Feld mit Lichtflaechen, darauf die CTA-Zeile und vier Glaskreise - LinkedIn, YouTube, Facebook, Instagram. Ab 1024px Text und Feld nebeneinander, darunter steht das Feld unter dem Text. Vier Kreise in einer Reihe ab 768px, bis 767px zwei mal zwei. Muss NACH tokens.css und design.css geladen werden. ------------------------------------------------------------ WORAN DAS DESIGN HAENGT An der Klasse .atg-social. Die schreibt der Layout-CASE in autogentechnik.typoscript (Nummer 39) - zusammen mit der Karte, dem Petrol-Feld und den Kreisen. Im Backend steht nur das Text-Element: div.section.atg-social div.reveal div.atg-container Inhaltskante div.atg-social__karte das Raster div#cNN.frame.frame-type-text Text-Element ... div.frame-inner div.frame-header h4.element-header Feld "Header" (Kicker) h5.element-subheader.h1 > span Feld "Subheader" (Ueberschrift) p Feld "Text" div.atg-social__panel <- vom CASE p.atg-social__cta atg.kanaele.cta ul.atg-social__liste li > a.atg-social__kachel.atg-social__kachel--linkedin span.atg-social__logo Maske, wie Fusszeile span.atg-social__name span.atg-social__aktion atg.kanaele..aktion Kopf-Markup am 23.10.2026 am echten Element (c237) im DOM der Live-Seite nachgesehen. Adressen: constants.typoscript, atg.social - dieselben wie in der Fusszeile. Eine leere Adresse laesst den Kreis weg. Die Karte steht in .atg-container und hat damit dieselbe Kante wie Menue, Fusszeile und "Persoenlich erreichbar". Der frame-container des Text-Elements darin wird deshalb neutralisiert - sonst kaeme der Seitenrand ein zweites Mal dazu. ALLE MASSE UND FARBEN STEHEN IN tokens.css (--atg-sm-*). Selektoren beginnen mit ".atg-social", nie mit ".section" - sonst haelt TYPO3 die Datei beim Upload fuer Assembler. ============================================================ */ /* ============================================================ 1 - BAND UND KARTE ============================================================ */ .atg-social.section { background-color: var(--atg-sm-band); padding-block: var(--atg-sm-band-y); } .atg-social__karte { display: grid; grid-template-columns: var(--atg-sm-cols); min-height: var(--atg-sm-min-h); background: var(--atg-sm-card-bg); border: 1px solid var(--atg-sm-card-line); box-shadow: var(--atg-sm-card-shadow); overflow: hidden; } /* Die Huelle des Text-Elements: keine Theme-Luft, kein zweiter Seitenrand, senkrecht mittig in der Karte */ .atg-social__karte > .frame { align-self: center; padding-block: 0; } .atg-social__karte .frame-container { max-width: none; padding-inline: 0; } .atg-social__karte .frame-inner { padding: var(--atg-sm-pad); } /* ============================================================ 2 - TEXTTEIL ============================================================ Gesetzt wie der Text in "Persoenlich erreichbar": Kicker in dunklem Tuerkis, Ueberschrift in der Groesse der Ebene 2 in Petrol, ohne Unterstrich. Das Feld "Header Class" steht im Backend trotzdem auf h1, wie bei den anderen Blockkoepfen - die Optik wird hier fuer diesen einen Block ueberschrieben. */ .atg-social .frame-header { margin: 0 0 var(--atg-sm-text-gap); } .atg-social .frame-header .element-header { margin: 0 0 var(--atg-sm-kicker-gap); color: var(--atg-sm-kicker); } .atg-social .frame-header .element-subheader { margin: 0; font-size: var(--atg-sm-head-fs); font-weight: 600; line-height: var(--atg-sm-head-lh); letter-spacing: var(--atg-sm-head-track); color: var(--atg-sm-head); text-wrap: balance; } /* Der globale Unterstrich der ersten Ebene haengt als Hintergrund am span (design.css). Hier faellt er weg. */ .atg-social .atg-social__karte .element-subheader > span { padding-bottom: 0; background-image: none; } .atg-social .frame-inner > p { margin: 0; font-size: var(--atg-sm-text-fs); line-height: var(--atg-sm-text-lh); color: var(--atg-sm-text); } .atg-social .frame-inner > p + p { margin-top: var(--atg-sm-text-para); } /* ============================================================ 3 - PETROL-FELD UND REIHE ============================================================ */ .atg-social__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--atg-sm-panel-pad-y) var(--atg-sm-panel-pad-x); background-color: var(--atg-sm-panel); background-image: var(--atg-sm-panel-glow); } .atg-social__cta { margin: 0 0 var(--atg-sm-cta-gap); font-size: var(--atg-sm-cta-fs); font-weight: 600; line-height: var(--atg-sm-cta-lh); letter-spacing: var(--atg-sm-cta-track); color: var(--atg-sm-cta); text-align: center; } /* Raster mit festen Spalten in Kreisgroesse, mittig im Feld. Bis 767px ist --atg-sm-circle eine halbe Feldbreite und --atg-sm-per-row 2. */ .atg-social__liste { display: grid; grid-template-columns: repeat(var(--atg-sm-per-row), var(--atg-sm-circle)); justify-content: center; gap: var(--atg-sm-gap); width: 100%; margin: 0; padding: 0; list-style: none; } .atg-social__liste > li { margin: 0; padding: 0; } /* ============================================================ 4 - DIE GLASKREISE ============================================================ Die ganze Kachel ist der Link. Glas wie die Karten der Seite Ansprechpartner: halbdurchsichtige Flaeche, heller Rand, Unschaerfe. Beim Darueberfahren hebt sich der Kreis an, der Rand wird tuerkis, das Handlungswort weiss, der Pfeil rueckt vor. */ .atg-social__kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 50%; text-align: center; background: var(--atg-sm-glass-bg); border: 1px solid var(--atg-sm-glass-line); box-shadow: var(--atg-sm-glass-shadow); -webkit-backdrop-filter: blur(var(--atg-sm-glass-blur)); backdrop-filter: blur(var(--atg-sm-glass-blur)); text-decoration: none !important; transition: transform var(--atg-sm-hover-time), border-color var(--atg-sm-hover-time); } .atg-social__kachel:hover, .atg-social__kachel:focus-visible { transform: translateY(calc(-1 * var(--atg-sm-lift))); border-color: var(--atg-sm-line-hover); } .atg-social__kachel:focus-visible { outline: var(--atg-sm-focus); outline-offset: var(--atg-sm-focus-off); } /* Logo - dieselben Dateien und dieselbe Masken-Technik wie die Ringe der Fusszeile, hier in Weiss */ .atg-social__logo { flex: none; width: var(--atg-sm-logo); height: var(--atg-sm-logo); margin-bottom: var(--atg-sm-logo-gap); background: var(--atg-sm-logo-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .atg-social__kachel--linkedin .atg-social__logo { -webkit-mask-image: var(--atg-so-linkedin); mask-image: var(--atg-so-linkedin); } .atg-social__kachel--youtube .atg-social__logo { -webkit-mask-image: var(--atg-so-youtube); mask-image: var(--atg-so-youtube); } .atg-social__kachel--facebook .atg-social__logo { -webkit-mask-image: var(--atg-so-facebook); mask-image: var(--atg-so-facebook); } .atg-social__kachel--instagram .atg-social__logo { -webkit-mask-image: var(--atg-so-instagram); mask-image: var(--atg-so-instagram); } .atg-social__name { font-size: var(--atg-sm-name-fs); font-weight: 700; line-height: var(--atg-sm-name-lh); color: var(--atg-sm-name); } .atg-social__aktion { display: inline-flex; align-items: center; gap: var(--atg-sm-arrow-gap); margin-top: var(--atg-sm-act-gap); font-size: var(--atg-sm-act-fs); font-weight: 700; letter-spacing: var(--atg-sm-act-track); color: var(--atg-sm-act); transition: color var(--atg-sm-hover-time); } .atg-social__aktion::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--atg-sm-arrow-fs); transition: transform var(--atg-sm-hover-time); } .atg-social__kachel:hover .atg-social__aktion, .atg-social__kachel:focus-visible .atg-social__aktion { color: var(--atg-sm-act-hover); } .atg-social__kachel:hover .atg-social__aktion::after, .atg-social__kachel:focus-visible .atg-social__aktion::after { transform: translateX(var(--atg-sm-arrow-shift)); } /* ============================================================ 5 - WENIGER BEWEGUNG ============================================================ */ @media (prefers-reduced-motion: reduce) { .atg-social__kachel:hover, .atg-social__kachel:focus-visible { transform: none; } }