/* ============================================================ ATG-Gigerl – Design-Tokens Liegt unter: fileadmin/templates/css/tokens.css Stand: 17.10.2026 - Abschnitt "Social Media" (Layout 39) ergaenzt Alle Farben stammen aus dem Logo bzw. sind aus den vier Design-Vorlagen der Startseite gemessen. Wer eine Farbe aendern will, aendert sie HIER – nirgends sonst. Diese Datei muss VOR menu.css geladen werden. ============================================================ */ :root { /* ---------- Farben ---------- */ /* Logo-Tuerkis. Exakt aus dem Logo gemessen. */ --atg-accent: #7EBED1; /* Dunklere Variante fuer aktive Punkte und Hover auf hellem Grund */ --atg-accent-deep: #17708C; /* Textfarbe auf hellem Grund */ --atg-ink: #15202A; /* Produktleiste, Icon-Schaltflaechen */ --atg-petrol: #102834; /* Dunkles Inhaltsband. Die Kartengruppe "Produkt Vorschau" und der News-Bereich verwenden es gemeinsam - die Farbe steht deshalb nur an dieser einen Stelle. Bewusst heller als --atg-petrol: die Produktleiste bleibt beim Scrollen ueber dem Band stehen, und bei gleicher Farbe gibt es dort keine Kante mehr - Kontrastverhaeltnis 1,00. Mit diesem Wert sind es 1,46 zur Leiste und 1,58 zum dunklen Sockel der Karten. Zur fast schwarzen Fusszeile (--atg-topbar), auf der der News-Bereich aufsitzt, sind es 1,79. Weiss auf dem Band hat 10,4:1, das Logo-Tuerkis 5,1:1. Vorgaenger war #173A4E. Zur Fusszeile waren das nur 1,57 - zu knapp, seit der News-Bereich unmittelbar darueber steht. */ --atg-band-dark: #1B4457; /* Oberste Kontaktzeile */ --atg-topbar: #0B1316; /* Gedaempfter Text (Gruppen-Ueberschriften im Mobilmenue) */ --atg-muted: #8A979E; /* Fliesstext in Karten. Dunkler als --atg-muted, weil der auf Weiss zu wenig Kontrast hat. Steht hier einmal und wird von den Bloecken nur noch referenziert. */ --atg-text-soft: #4C5C65; /* Trennlinien */ --atg-line: #E3E8EB; --atg-white: #FFFFFF; /* Text auf dunklem Grund */ --atg-on-dark: #FFFFFF; --atg-on-dark-soft: rgba(255, 255, 255, .75); /* Noch etwas zurueckgenommen - WKO-Zeile in der Fusszeile */ --atg-on-dark-mute: rgba(255, 255, 255, .62); /* Am schwaechsten - Copyright-Zeile */ --atg-on-dark-faint: rgba(255, 255, 255, .47); /* Trennlinien auf dunklem Grund */ --atg-rule-dark: rgba(255, 255, 255, .12); /* ---------- Ueberschriften ---------- Ebene 1 traegt das dunkle Tuerkis, Ebene 2 und 3 sind dieselbe Farbe mit 85 bzw. 70 Prozent Deckung auf Weiss. Ebene 4 ist bewusst grau: sie steht als kleine Kontextzeile ueber einer Ebene 1, und zwei Tuerkistoene direkt uebereinander nehmen sich gegenseitig die Wirkung. Der Grauwert ist dunkler als --atg-muted (#8A979E), weil der bei 13px auf Weiss nur 2,97:1 Kontrast hat - zu wenig zum Lesen. #5F6E76 hat 5,2:1 bei gleichem Charakter. */ --atg-h1: #115568; --atg-h2: #356E7F; --atg-h3: #588895; --atg-h4: #5F6E76; --atg-h5: var(--atg-ink); /* Unterstrich unter Ebene 1. War zuerst das helle Logo-Tuerkis --atg-accent (#7EBED1) und wirkte unter der dunklen Ueberschrift zu schwach. Jetzt das dunkle Tuerkis. */ --atg-h-underline: var(--atg-accent-deep); /* ---------- Kopfbereich: Hoehen ---------- Werte fuer >= 1440px. menu.css setzt sie pro Breakpoint neu. --atg-sticky-h ist die Hoehe des Teils, der beim Scrollen oben stehen bleibt. Seit 28.10.2026 klebt der GANZE Kopf, also auch die Kontaktzeile: 42 + 110 + 64 = 216. Bis dahin scrollte die Kontaktzeile weg (174). Der Wert speist scroll-padding-top und die Lage des Burger-Menues und muss zur Summe der drei Zeilen passen. */ --atg-topbar-h: 42px; --atg-headbar-h: 110px; --atg-productbar-h: 64px; --atg-sticky-h: 216px; /* Seitenabstand des Inhalts */ --atg-gutter: 100px; /* Maximale Inhaltsbreite */ --atg-content-max: 1240px; /* ---------- Spalten-Container ---------- Die sechs Container-Inhaltselemente. Hier steht, wie breit die Spalten sind und wie viel Luft dazwischen liegt; der Regelsatz in css/container.css enthaelt bewusst keine Zahl. Der Spaltenabstand ist bei 1440px genau der halbe Seitenrand (50 von 100). Nach unten laeuft er NICHT weiter mit: der Seitenrand faellt bis 1024px auf 32px, die Haelfte davon waere keine erkennbare Trennung mehr. Ab da gilt ein Mindestwert. */ --atg-col-gap: 50px; /* Aufteilung je Container-Typ. Die Namen entsprechen den Backend-Typen: _right = 25/75, _left = 75/25. */ --atg-col-1: 1fr; --atg-col-2: 1fr 1fr; --atg-col-2-right: 1fr 3fr; --atg-col-2-left: 3fr 1fr; --atg-col-3: repeat(3, 1fr); --atg-col-4: repeat(4, 1fr); /* ---------- Schrift ---------- */ --atg-font: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --atg-fs-topbar: 14px; --atg-fs-nav: 17px; /* Die Produktleiste traegt seit dem Umbau des Seitenbaums die gesamte Navigation - die obere Leiste ist leer. Deshalb 16 statt 13px (28.10.2026). Die Groesse ist auf die sechs jetzigen Begriffe ausgelegt; kommen die langen Produktbegriffe ("Flaschendruckminderer", "Zentrale Gasversorgungen") zurueck, ist sie neu zu pruefen. */ --atg-fs-product: 16px; /* ---------- Schaltflaechen im Kopf und im Burger-Menue ---- "Zum Onlineshop" ist gefuellt, "Feedback geben" ein Umriss - dasselbe Paar wie im Abschnitt Service. Beide gehen beim Darueberfahren auf dieselbe tuerkise Flaeche. */ --atg-cta-h: 44px; --atg-cta-pad: 22px; --atg-cta-fs: 15px; --atg-cta-gap: 12px; --atg-cta-ico: 17px; --atg-cta-fill-bg: var(--atg-pe-btn-bg); --atg-cta-fill-fg: var(--atg-white); --atg-cta-line: var(--atg-ink); --atg-cta-line-w: 1.5px; --atg-cta-hover: var(--atg-pe-btn-hover); /* Knopfpaar im Burger-Menue */ --atg-pcta-gap: 12px; --atg-pcta-top: 28px; --atg-pcta-dir: row; --atg-pcta-flex: 1 1 0; /* ---------- Kartengruppe "Produkt Vorschau" ---------- Bildet die Masstabelle aus dem Projekt-Dokument "Design Kartengruppe Produktvorschau" ab. Die Werte hier gelten ab 1440px; die drei Bloecke am Dateiende setzen sie fuer die schmaleren Breiten neu - eine Zeile je Spalte der Tabelle. Der zugehoerige Regelsatz steht in css/produktvorschau.css und enthaelt bewusst keine einzige Zahl. */ /* Beschreibungstext in der Karte. Seit dem 28.09.2026 steht er auf dem Glas und nicht mehr auf Weiss - daher derselbe gedaempfte Weisston wie im Premium-Block der Partnerseite. */ --atg-pv-text: var(--atg-pa-text); --atg-pv-title-color: var(--atg-on-dark); /* Luft ueber und unter dem dunklen Band */ --atg-pv-band-y: 80px; /* Blockueberschrift -> Karten. Dieselbe Optik und derselbe Abstand wie die Blockueberschriften der Unterseiten. */ --atg-pv-head-gap: var(--atg-pa-head-gap); --atg-pv-head-fs: var(--atg-pa-head-fs); /* Lichtflaechen auf dem Band. Derselbe Verlauf wie auf "Ansprechpartner" - dort liegt er ebenfalls hinter einem Kartenraster, die Flaechen sitzen also an den richtigen Stellen. Ohne sie saehe man die Unschaerfe des Glases nicht: auf einer einfarbigen Flaeche gibt es nichts, was verschwimmen koennte. */ --atg-pv-glow: var(--atg-ap-glow); /* --- Masstabelle --- */ --atg-pv-cols: 3; /* Karten nebeneinander */ --atg-pv-gap: 32px; /* Abstand zwischen Karten */ /* Die weisse Bildflaeche rechnet ihre Hoehe aus der Kartenbreite aus, statt eine feste zu haben. Sie sitzt seit dem 28.09.2026 INNERHALB der Karte und ist damit um den Innenabstand schmaler - eine feste Hoehe ergaebe auf jeder Breite ein anderes Seitenverhaeltnis, am Handy eine fast quadratische Flaeche mit viel Weiss um das Produkt. 1,9:1 ist das Format der Bilder selbst (788 x 414). Loest die frueheren festen Hoehen 206 / 180 / 190 px ab. */ --atg-pv-img-ratio: 1.9 / 1; --atg-pv-pad: 28px; /* Innenabstand der Karte */ --atg-pv-title-fs: 22px; /* Titel */ --atg-pv-body-fs: 17px; /* Fliesstext */ --atg-pv-peek: 0px; /* Anschnitt naechste Karte */ --atg-pv-card-max: none; /* Deckel fuer die Karte */ /* --- Die Glaskarte --- Dieselbe Machart wie die Karten auf "Ansprechpartner" und "Partner": halbtransparenter Verlauf, Weichzeichner dahinter, helle Linie, Lichtkante oben innen. Wo der Wert derselbe ist, zeigt er dorthin, statt ein zweites Mal geschrieben zu werden - aendert sich die Glasoptik der Seite, wandert die Kartengruppe mit. */ --atg-pv-radius: var(--atg-ap-radius); --atg-pv-glass-bg: var(--atg-ap-glass-bg); --atg-pv-glass-bg-hover: var(--atg-pa-glass-bg-hover); --atg-pv-glass-line: var(--atg-ap-glass-line); --atg-pv-glass-line-hover: var(--atg-ap-line-hover); --atg-pv-glass-blur: var(--atg-ap-glass-blur); --atg-pv-shadow: var(--atg-ap-shadow); --atg-pv-shadow-hover: var(--atg-ap-shadow-hover); /* --- Weisse Bildflaeche in der Karte --- Die Produktbilder sind Freisteller auf weissem Grund. Auf Glas braucht das eine eigene weisse Flaeche mit eigenem Radius, genau wie die Logoflaeche der Partnerkarten; ringsum bleibt das Glas sichtbar. Ihre Hoehe rechnet sie sich aus der Breite aus - siehe --atg-pv-img-ratio. */ --atg-pv-img-radius: 10px; --atg-pv-img-pad: 10px; /* Bild -> Rand der Flaeche */ /* --- Abstaende im Textteil --- */ --atg-pv-title-gap: 16px; /* Bildflaeche -> Titel */ --atg-pv-text-gap: 10px; /* Titel -> Beschreibung */ --atg-pv-knopf-gap: 22px; /* Beschreibung -> Knopf */ /* --- Knopf in der Karte --- "knopf", nicht "btn": --atg-pv-btn-* weiter unten sind die beiden runden Knoepfe unter dem Slider, das ist etwas anderes. Werte wie im Premium-Block: gefuellt hell, beim Darueberfahren weiss. */ --atg-pv-knopf-h: var(--atg-pa-btn-h); --atg-pv-knopf-pad: var(--atg-pa-btn-pad); --atg-pv-knopf-fs: var(--atg-pa-btn-fs); --atg-pv-knopf-bg: var(--atg-pa-btn-bg); --atg-pv-knopf-fg: var(--atg-pa-btn-fg); --atg-pv-knopf-hover: var(--atg-pa-btn-hover); --atg-pv-knopf-glow: var(--atg-pa-btn-glow); --atg-pv-arrow-fs: var(--atg-pa-arrow-fs); --atg-pv-arrow-gap: var(--atg-pa-arrow-gap); --atg-pv-arrow-shift: var(--atg-pa-arrow-shift); --atg-pv-lift: 3px; /* Karte hebt sich beim Hover */ --atg-pv-hover-time: var(--atg-transition); /* --- Hinweis-Animation am rechten Knopf --- */ --atg-pv-hint-time: 1.4s; /* Dauer eines Durchgangs */ --atg-pv-hint-shift: 5px; /* so weit wippt der Knopf */ /* --- Slider-Spur --- */ /* Luft nach oben und unten im scrollenden Kasten. Ein waagrecht scrollender Kasten schneidet senkrecht ebenfalls ab - und damit den Schatten der Karten. Genau das war die Naht, die am 30.09.2026 aufgefallen ist: der Schatten endete mit gerader Kante, darunter lag das blanke Petrol des Bandes. Gemessen an der Live-Seite bei 390px: unmittelbar unter der Karte rgb(23,59,75), eine Zeile unterhalb der Spurkante rgb(31,66,85) - ein Sprung von rund 10 Stufen quer ueber die ganze Breite, genau dort, wo die Pfeile stehen. 6/20px stammen aus der Zeit der weissen Karten mit kleinem Schatten. Die Glaskarte wirft 0 20px 44px, das reicht rund 64px unter die Karte. Dieselben Werte wie bei den Slidern auf "Partner", "Ansprechpartner" und im Download Center; damit der Block dadurch nicht waechst, wird die Luft in produktvorschau.css oben und an den Bedienelementen wieder abgezogen. */ --atg-pv-track-top: var(--atg-slider-hell-track-top); --atg-pv-track-bottom: var(--atg-slider-hell-track-bottom); /* --- Bedienelemente unter dem Slider --- */ /* Abstand Kartenunterkante -> Bedienelemente. Die Spurluft darueber wird davon abgezogen, siehe produktvorschau.css. */ --atg-pv-nav-space: var(--atg-slider-hell-nav-space); --atg-pv-nav-gap: 20px; --atg-pv-bar-h: 3px; --atg-pv-bar-track: rgba(255, 255, 255, .16); --atg-pv-btn: 46px; --atg-pv-btn-gap: 12px; --atg-pv-btn-fs: 22px; /* aus --atg-accent abgeleitet, damit das Logo-Tuerkis nicht ein zweites Mal als Zahl in einer Datei steht */ --atg-pv-btn-border: color-mix(in srgb, var(--atg-accent) 45%, transparent); /* ---------- Abschnitt "Persoenlich erreichbar" ---------- Werte fuer >= 1440px; die drei Bloecke am Dateiende setzen sie fuer die schmaleren Breiten neu. Der zugehoerige Regelsatz steht in css/persoenlich.css. Die Kartenmasse sind aus den vier Startseiten-PDFs gemessen: Karte 100...1340 bei 1440px, Hoehe 326px, Textspalte zu Bildfeld rund 52 zu 48. */ /* Helles Band hinter der Karte - Gegenstueck zum Petrol-Band der Produktvorschau darueber. */ --atg-pe-band: #F1F5F6; --atg-pe-shadow: 0 10px 30px rgba(16, 40, 52, .09); /* Luft ueber und unter der Karte */ --atg-pe-band-y: 80px; /* Spaltenteilung der Karte */ --atg-pe-text-col: 52%; --atg-pe-img-col: 48%; /* Mindesthoehe, damit ein kurzer Text das Foto nicht zusammendrueckt. Nach oben nicht gedeckelt. */ --atg-pe-min-h: 326px; /* Bildausschnitt. Das Bildfeld ist auf jeder Breite flacher als das Foto (Foto 4:3, Feld 1,67:1 ab 1440px). "cover" schneidet deshalb oben und unten weg - und bei der Voreinstellung "50% 50%" je zur Haelfte, also genau dort, wo auf einem Personenfoto die Koepfe sind. 0% am zweiten Wert heisst: der Ausschnitt sitzt oben buendig, weggeschnitten wird nur unten. Auf einem Teamfoto stehen die Koepfe immer oben - damit bleiben sie auf jeder Breite ganz. */ --atg-pe-img-pos: 50% 0%; /* Bildfeld unter 768px, wo das Bild oben steht. Seitenverhaeltnis statt fester Hoehe: 4:3 ist das Verhaeltnis gaengiger Kamerafotos, das Feld ist damit so geschnitten wie das Bild und es wird gar nichts weggeschnitten. Frueher stand hier eine feste Hoehe von 190px; bei 390px Bildschirmbreite hat das Feld damit nur 73 Prozent des Fotos gezeigt. Der Deckel bremst das obere Ende des Bereichs: bei 767px waere das Feld sonst 545px hoch und wuerde die Karte erschlagen. Bis etwa 600px Bildschirmbreite greift er nicht, dort ist das Foto vollstaendig zu sehen. */ --atg-pe-img-ratio: 4 / 3; --atg-pe-img-h-max: 420px; /* Innenabstand des Textteils */ --atg-pe-pad: 56px; --atg-pe-body-fs: 17px; --atg-pe-kicker-gap: 14px; /* Kicker -> Ueberschrift */ --atg-pe-text-gap: 18px; /* Ueberschrift -> Text */ /* Text -> Knopf ist absichtlich derselbe Wert wie Ueberschrift -> Text und steht deshalb nicht als eigene Zahl da: wer den einen Abstand aendert, aendert beide. */ --atg-pe-btn-gap: var(--atg-pe-text-gap); /* Knopf "Zu den Ansprechpartnern". Form und Groesse wie die Schaltflaeche "Anfrage stellen" in der ersten Menueleiste, Farben wie der Sockel der Produktkarten und der Knopf "Weiterlesen" im News-Bereich: gefuellt in --atg-ink, beim Darueberfahren --atg-accent-deep, Schrift immer weiss. Dieselben Werte stehen als --atg-nw-btn-bg und --atg-nw-btn-hover beim News-Bereich. */ --atg-pe-btn-h: 44px; --atg-pe-btn-pad: 22px; --atg-pe-btn-fs: 15px; --atg-pe-btn-bg: var(--atg-ink); --atg-pe-btn-hover: var(--atg-accent-deep); /* Beim Darueberfahren hebt sich die ganze Karte an und wirft einen deutlicheren Schatten. 4px statt der 3px der Produktkarten: die Karte ist hier bis zu 1240px breit und damit rund dreimal so gross wie eine Produktkarte - bei 3px ist die Bewegung an einem so grossen Element kaum wahrnehmbar. Der Schatten ist derselbe wie im Ruhezustand, nur tiefer und kraeftiger: gleiche Farbe, damit die Karte nicht beim Darueberfahren einen anderen Ton bekommt. */ --atg-pe-lift: 4px; --atg-pe-shadow-hover: 0 18px 40px rgba(16, 40, 52, .16); --atg-pe-hover-time: var(--atg-transition); /* ---------- News-Bereich der Startseite ---------- Werte fuer >= 1440px; die drei Bloecke am Ende setzen sie fuer die schmaleren Breiten neu. */ /* Dasselbe Band wie bei der Produktvorschau. Die Farbe steht weiter oben als --atg-band-dark und hier nur einmal verwiesen - sonst stuende derselbe Wert zweimal in dieser Datei. */ --atg-nw-band: var(--atg-band-dark); /* Luft ueber/unter dem Band. Am 29.10.2026 um je 16px gekuerzt (80 -> 64, und so weiter), zusammen mit dem kleineren Bildrahmen: der Abschnitt war am PC so hoch wie das Fenster und ging am Handy nicht auf einen Blick auf. Damit steht dieser Block etwas enger als die uebrigen Baender - bewusst. */ --atg-nw-band-y: 64px; /* Lichtflaechen auf dem Band. Derselbe Verlauf wie bei der Produktvorschau und auf "Ansprechpartner" - dort liegt er ebenfalls hinter einem Kartenraster, die Flaechen sitzen also an den richtigen Stellen. Der Wert steht nur einmal in dieser Datei, als --atg-ap-glow. */ --atg-nw-glow: var(--atg-ap-glow); /* Blockueberschrift. Seit 29.09.2026 dieselbe Optik und derselbe Abstand wie bei der Produktvorschau und auf den Unterseiten: gross, weiss, mit tuerkisem Unterstrich. Beide zeigen auf --atg-pa-*, damit die Werte nicht dreimal in dieser Datei stehen. Die frueher durchgehende Trennlinie unter dem Kopf ist entfallen. */ /* Abstand Ueberschrift -> Karten. Zeigte bis 29.10.2026 auf --atg-pa-head-gap (44px) wie die Unterseiten. Jetzt ein eigener, kleinerer Wert - siehe Bandluft oben. */ --atg-nw-head-gap: 32px; --atg-nw-head-fs: var(--atg-pa-head-fs); /* --- Masstabelle --- */ --atg-nw-cols: 4; /* Karten nebeneinander */ --atg-nw-gap: 32px; /* Abstand zwischen Karten */ --atg-nw-pad: 24px; /* Innenabstand der Karte */ --atg-nw-title-fs: 20px; /* Titel */ --atg-nw-date-fs: 12px; /* Datumszeile */ --atg-nw-peek: 0px; /* Anschnitt naechste Karte */ --atg-nw-card-max: none; /* Deckel fuer die Karte */ /* ---------- Der Bildrahmen ---------- Seit 29.10.2026 steht das Bild nicht mehr formatfuellend ueber die ganze Kartenbreite, sondern klein in einem eigenen Rahmen, mittig in der Karte - wie die Bildrahmen der Download-Karten. Anlass: der Abschnitt war am PC so hoch wie das Fenster (997px bei 1440x900) und ging am Handy nicht auf einen Blick auf (1017px bei 390x844). Der Rahmen hat eine feste HOEHE, die Breite ergibt sich aus dem Bild. Ein Hochformat sitzt damit randlos darin, ein Querformat bekommt einen breiteren Rahmen und fuellt ihn ebenfalls. Beschnitten wird nie etwas. Die Hoehe je Breite: 190 ab 1440, 180 von 1024 bis 1439, 200 von 768 bis 1023, 180 bis 767. Die Groesse ist am 29.10.2026 aus drei gerenderten Varianten gewaehlt worden (150 / 190 / 230 bei 1440px). Die erste Fassung mit 150 war dem Nutzer zu klein. Warum auf dem Tablet 200: dort zeigt der Slider zwei Karten von bis zu 420px Breite, ein kleinerer Rahmen saehe darin verloren aus. Preis der Groesse: am Handy ist der Abschnitt damit hoeher als die nutzbare Fensterhoehe (766px unter der klebenden Kopfzeile). Bewusst so entschieden - lesbare Bilder gehen vor. Wer das zurueckdrehen will, aendert hier und in der 767er-Regel auf 140. */ --atg-nw-shot-h: 190px; /* Hoehe des Rahmens */ --atg-nw-shot-gap: 24px; /* Kartenoberkante -> Rahmen */ --atg-nw-shot-line: var(--atg-line); --atg-nw-shot-bg: var(--atg-white); --atg-nw-shot-radius: var(--atg-radius); /* --- Bestandteile der Karte --- */ --atg-nw-date-gap: 12px; /* Datum -> Titel */ --atg-nw-accent-w: 38px; /* Laenge der Akzentlinie */ --atg-nw-accent-gap: 14px; /* Titel -> Akzentlinie */ --atg-nw-btn-gap: 20px; /* Akzentlinie -> Knopf */ --atg-nw-rule: 3px; /* Akzent- und Hover-Linie */ --atg-nw-lift: 3px; /* Karte hebt sich beim Hover */ --atg-nw-hover-time: var(--atg-transition); /* --- Knopf "Weiterlesen" --- */ /* Form und Groesse wie .atg-cta und der Knopf im Abschnitt "Persoenlich erreichbar", Farben wie der Sockel der Produktkarten: dunkle Flaeche, beim Hover dunkles Tuerkis. */ --atg-nw-btn-h: 44px; --atg-nw-btn-pad: 22px; --atg-nw-btn-fs: 15px; --atg-nw-btn-bg: var(--atg-ink); --atg-nw-btn-hover: var(--atg-accent-deep); /* --- Slider-Spur (erst unter 1024px) --- */ --atg-nw-track-top: 6px; --atg-nw-track-bottom: 20px; /* --- Bedienelemente unter dem Slider --- */ --atg-nw-nav-top: 12px; --atg-nw-nav-gap: 20px; --atg-nw-bar-h: 3px; --atg-nw-bar-track: rgba(255, 255, 255, .16); --atg-nw-btn-round: 46px; --atg-nw-round-gap: 12px; --atg-nw-round-fs: 22px; --atg-nw-round-border: color-mix(in srgb, var(--atg-accent) 45%, transparent); /* --- Hinweis-Animation am rechten Knopf --- */ --atg-nw-hint-time: 1.4s; --atg-nw-hint-shift: 5px; /* ============================================================ DETAILSEITEN-BLOECKE (Layout 23 bis 28) ============================================================ Sechs Layouts fuer die Unterseiten. Sie sind nicht an die Seite "Unternehmen" gebunden - jede Detailseite kann sie ueber das Backend-Feld "Layout" aufrufen. Der zugehoerige Regelsatz steht in css/inhaltsbloecke.css und enthaelt bewusst keine Zahl. Gemessen aus den vier Vorlagen unternehmen-1440/1280/900/ 390px.png. Wo die Vorlagen untereinander schwanken - die Bandluft etwa steht dort auf 80/64/64/41 - gilt die im Projekt schon eingefuehrte Reihe 80/64/56/48. Sonst haette die Seite zwei verschiedene Bandluftmasse. Die Werte hier gelten ab 1440px; die Bloecke am Dateiende setzen sie fuer die schmaleren Breiten neu. Die Konstanten in den clamp-Formeln sind ausgerechnet, nicht geschaetzt: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. */ /* Helles Band. Zeigt auf --atg-pe-band, damit derselbe Off-white-Ton nicht zweimal als Zahl in dieser Datei steht: Text-und-Bild-Band, Grundsatzband und der Abschnitt "Persoenlich erreichbar" auf der Startseite verwenden dieselbe Farbe. */ --atg-block-band: var(--atg-pe-band); /* Luft ueber und unter jedem Band */ --atg-block-band-y: 80px; /* ---------- Layout 23: Text und Bild ---------- Vorlage 1440: Bild 569 breit auf 1240 Inhaltsbreite, also 46 Prozent; Textspalte 48 Prozent, dazwischen 6 Prozent Luft. Bei 900px misst das Bild 385 auf 840 - dieselben 46 Prozent, die Aufteilung laeuft also mit. */ --atg-tb-cols: 48% 46%; --atg-tb-col-gap: 6%; /* Festes Bildformat, das Bild fuellt es aus. Die Vorlagen zeigen je Breite ein anderes Verhaeltnis (1,50 / 1,81 / 1,28 / 1,59) - gezeichnet, nicht gerechnet. Bis 02.11.2026 stand hier fest 3:2, der Wert der Grossbildvorlage, und das Bild fuellte das Feld formatfuellend aus. Das Hallenfoto ist 1180 x 664, also 16:9 - in einem 3:2-Feld fehlten links und rechts je 8 Prozent der Bildbreite. Jetzt: auto. Das Feld nimmt das Seitenverhaeltnis der Bilddatei an, jedes Bild ist vollstaendig zu sehen, und es wird nie wieder etwas beschnitten. Der Preis dafuer ist bekannt und bewusst in Kauf genommen: die Hoehe des Blocks haengt jetzt am Bild. Ein Hochformat macht ihn rund doppelt so hoch, und der Text daneben steht dann in viel Luft - genau der Grund, weshalb am 22.09.2026 ein festes Feld gewaehlt worden war. Wer hier ein Bild einsetzt, sieht sich das Ergebnis an. */ --atg-tb-img-ratio: auto; --atg-tb-img-radius: var(--atg-radius); /* Zeilenabstand, sobald Text und Bild untereinander stehen */ --atg-tb-stack-gap: 32px; /* ---------- Layout 50: Text und Bild dunkel ---------- Dieselbe Struktur wie Layout 23, nur auf Petrol statt auf Off-white. Festgelegt am 03.11.2026: die Seite "Unternehmen" wechselt von oben nach unten durchgehend Petrol - Off-white - Petrol - Hell - Petrol, und der Einleitungsblock macht den Anfang. Es gibt bewusst zwei Layouts und nicht eines mit Umschalter: wer auf einer anderen Seite "Text und Bild" auf hellem Grund braucht, nimmt weiter Layout 23. Die Struktur steht trotzdem nur einmal im CSS - die dunkle Fassung ergaenzt nur Band und Schriftfarben. */ --atg-tbd-band: var(--atg-band-dark); /* KEINE Lichtflaechen auf diesem Band - entschieden am 03.11.2026, nachdem beide Fassungen gerendert nebeneinander lagen. --atg-pa-glow-dark ist Licht von oben: die erste Ellipse sitzt mit ihrer Mitte auf der Oberkante des Bandes. Auf den beiden anderen Petrol-Baendern der Seite liegt diese Kante mitten im Seitenverlauf, das Licht hat Platz und wirkt wie eine Lichtstimmung. Hier beginnt das Band direkt unter der Produktleiste - der hellste Fleck landet auf der Brotkrumenzeile und der Ueberschrift und sieht aus wie ein Schmierer, nicht wie Absicht. Tiefer legen laesst er sich nicht: wo das Bild anfaengt, ist es hell. Jede Verschiebung erzeugt nur weiter unten dieselbe gerade Kante. Der Wert steht als "none" da und nicht als geloeschte Zeile: wer die Lichtflaechen doch will, setzt hier var(--atg-pa-glow-dark) ein - dann braucht die Brotkrumenzeile aber wieder ihre gespiegelte Fassung, siehe Projekt-Dokument "Brotkrumen-Navigation". */ --atg-tbd-glow: none; /* Die Kontextzeile ueber der Ueberschrift ist auf hellem Grund grau (--atg-h4, #5F6E76). Auf Petrol hat dieses Grau nur 2,0 Kontrast - deshalb hier Logo-Tuerkis, derselbe Ton wie der Kicker "SORTIMENT" auf dem dunklen Band der Startseite. */ --atg-tbd-kicker: var(--atg-accent); /* ---------- Layout 51: Zeitachse ---------- Die Unternehmensgeschichte als waagrechte Achse mit vier Stationen: Jahreszahl, Punkt auf der Achse, Titel, Text. Inhaltselement ist eine "Card Group", je Station eine Karte - Header = Jahreszahl, Subheader = Titel, Text = Beschreibung. Die Achse laeuft als eine durchgehende Linie hinter den Punkten durch und endet beim letzten. Die letzte Station ist der aktuelle Stand und traegt einen gefuellten Punkt statt eines Rings. Der zugehoerige Regelsatz steht in css/zeitachse.css. */ /* Helles Band, derselbe Ton wie die uebrigen hellen Baender */ --atg-zl-band: var(--atg-pe-band); --atg-zl-band-y: var(--atg-block-band-y); /* Blockueberschrift -> Achse */ --atg-zl-head-gap: 38px; /* --- Anordnung --- */ --atg-zl-cols: 4; /* Stationen nebeneinander */ --atg-zl-gap: 40px; /* Abstand zwischen Stationen */ /* --- Bestandteile einer Station --- */ --atg-zl-jahr-fs: 30px; /* Zeilenhoehe der Jahreszahl. Steht als eigener Wert da, weil die senkrechte Fassung daraus die Hoehe des Punktes errechnet: er sitzt auf der Mitte der ersten Textzeile, also bei jahr-fs mal jahr-lh geteilt durch zwei. */ --atg-zl-jahr-lh: 1.1; --atg-zl-jahr-gap: 18px; /* Jahreszahl -> Punkt */ --atg-zl-punkt: 14px; /* Durchmesser */ --atg-zl-punkt-rand: 3px; --atg-zl-punkt-gap: 22px; /* Punkt -> Titel */ --atg-zl-achse: 2px; /* Staerke der Linie */ --atg-zl-titel-fs: 18px; --atg-zl-titel-lh: 1.3; --atg-zl-titel-gap: 10px; /* Titel -> Text */ --atg-zl-text-fs: 16px; --atg-zl-text-lh: 1.6; /* Senkrechte Fassung bis 1023px: Abstand von der Achse links zum Text rechts */ --atg-zl-v-gap: 24px; /* --- Farben --- */ --atg-zl-jahr: var(--atg-h1); --atg-zl-jahr-jetzt: var(--atg-accent-deep); --atg-zl-titel: var(--atg-h2); --atg-zl-text: var(--atg-text-soft); --atg-zl-linie: var(--atg-line); --atg-zl-punkt-farbe: var(--atg-accent-deep); /* Fuellung im Ring. Bandfarbe, damit der Punkt hohl aussieht. Die letzte Station setzt diesen Wert auf die Randfarbe und bekommt dadurch einen gefuellten Punkt - ohne zweite Regel fuer den Hintergrund. */ --atg-zl-punkt-fill: var(--atg-zl-band); /* ---------- Layout 24: Spaltenband dunkel ---------- Dieselbe Farbe wie die beiden Baender der Startseite. Steht weiter oben als --atg-band-dark und wird hier nur verwiesen. */ --atg-sb-band: var(--atg-band-dark); /* Weiche Lichtflaechen auf dem Band, nachgezogen am 01.10.2026. Zuerst dasselbe Bild wie auf dem Petrol-Band der Seite "Partner" - der Block dort ist derselbe Aufbau, Text links und Datenliste rechts auf Petrol. Seit 03.11.2026 die Fassung mit dem Licht INNERHALB des Bandes: ueber diesem Band liegt die Zeitachse auf Off-white, und die alte Fassung war genau an der gemeinsamen Kante am hellsten. Begruendung bei --atg-band-glow-innen. Der Wert steht weiterhin nur einmal im Projekt, hier wird er verwiesen. */ --atg-sb-glow: var(--atg-band-glow-innen); /* Abstand der beiden Spalten, sobald sie untereinander stehen. Der Spaltenabstand des Containers ist dort 28px - zu wenig, sobald die untere Spalte eine Datenliste mit eigener Linie oben ist. Die Vorlage bei 390px zeigt rund 55px zwischen Link und erster Linie. */ --atg-sb-stack-gap: 44px; /* ---------- Layout 26: Datenliste auf dunklem Band ---------- Je "text-column" aus dem RTE eine Zeile: Bezeichnung links, Wert rechts, Haarlinie oben und unten. Vorlage 1440: Linien bei 669/720/771/822, also 51px Zeilenhoehe; Bezeichnung 13px Versalien, Wert 19px fett. */ --atg-dl-label-fs: 13px; --atg-dl-label-track: .08em; --atg-dl-value-fs: 19px; --atg-dl-row-pad: 14px; --atg-dl-gap: 20px; /* Bezeichnung -> Wert */ --atg-dl-rule: 1px; /* ---------- Layout 27: Karte zentriert ---------- Vorlage: Karte 640px breit auf allen drei grossen Breiten, erst unter 768px ueber die volle Inhaltsbreite. */ --atg-kz-card-max: 640px; --atg-kz-pad: 44px; --atg-kz-radius: var(--atg-radius); --atg-kz-shadow: var(--atg-pe-shadow); --atg-kz-head-gap: 30px; /* Ueberschrift -> Liste */ --atg-kz-item-gap: 16px; /* Abstand der Punkte */ --atg-kz-mark-col: 26px; /* Spalte fuer das Haekchen */ --atg-kz-mark-fs: 16px; /* Beim Darueberfahren hebt sich die Karte und wirft einen tieferen Schatten - dieselbe Bewegung wie bei den Produktkarten und im Abschnitt "Persoenlich erreichbar". 3px und nicht 4px wie dort: die Karte ist 640 statt bis zu 1240 Punkte breit und damit im Normalfall der Kartengroessen. */ --atg-kz-lift: 3px; --atg-kz-shadow-hover: var(--atg-pe-shadow-hover); --atg-kz-hover-time: var(--atg-transition); /* Das Haekchen ist kein Schriftzeichen, sondern eine Maske. Als Zeichen "\2713" geschrieben haengt es davon ab, ob die lokal eingebundene Fassung von Source Sans Pro es enthaelt - tut sie es nicht, springt der Browser auf eine fremde Schrift und das Haekchen sieht auf jedem Rechner anders aus. Als Maske traegt die Flaeche darunter die Farbe, und die steht damit weiterhin hier in dieser Datei. */ --atg-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2.1 8.3l1.3-1.3 2.8 2.8 6.4-6.4 1.3 1.3z'/%3E%3C/svg%3E"); --atg-kz-body-fs: 17px; /* ---------- Layout 28: Hinweiskarten ---------- Vorlage 1440: Karten 1441...1567 und 1587...1713, also 126px hoch mit 20px Abstand; Symbol 18x18 bei x=132, Text ab 169, Knopf 270x44 mit 29px Abstand zur rechten Kante. Ungerade Karte gefuellt, gerade Karte mit Linie: so wird die dritte Karte von selbst wie die erste, ohne dass eine Kartennummer im CSS steht. */ /* Dunkles Band, dieselbe Farbe wie das Spaltenband und die beiden Baender der Startseite. Festlegung vom 23.09.2026: die Seite greift damit den Wechsel hell-dunkel-hell-dunkel der Startseite auf. Die Karten sind dafuer umgebaut worden - eine helle Karte auf diesem Band haette den Unterschied zwischen gefuellter und umrandeter Karte verschluckt, weil #F1F5F6 und #FFFFFF auf dunklem Grund fast gleich aussehen. */ --atg-hk-band: var(--atg-band-dark); /* Dieselben Lichtflaechen wie auf dem Spaltenband darueber. Beide Baender einer Seite tragen dasselbe Bild - mit zwei verschiedenen saehe die Seite uneinheitlich aus. Seit 03.11.2026 die Fassung mit dem Licht innerhalb des Bandes: darueber liegt die Karte "Unsere Grundsaetze" auf Off-white, und an dieser Kante war die alte Fassung am hellsten. */ --atg-hk-glow: var(--atg-band-glow-innen); --atg-hk-band-y: 72px; --atg-hk-gap: 20px; --atg-hk-min-h: 126px; --atg-hk-pad-x: 32px; --atg-hk-pad-y: 24px; --atg-hk-radius: var(--atg-radius); /* Die gefuellte Karte ist das Band selbst, nur aufgehellt - keine eigene Farbe. Dadurch bleibt sie Teil des Bandes, statt als Kasten darauf zu liegen. */ --atg-hk-fill: rgba(255, 255, 255, .07); --atg-hk-fill-line: rgba(255, 255, 255, .10); /* Die umrandete Karte traegt nur eine Linie. Derselbe Wert wie die Trennlinien der Datenliste. */ --atg-hk-line: var(--atg-rule-dark); --atg-hk-rule: 1px; /* Beim Darueberfahren hebt sich die Karte. Ein Schatten taugt auf dunklem Grund nicht - er ist dort nicht zu sehen. Sichtbar wird die Bewegung, indem die Flaeche eine Spur heller wird; die umrandete Karte bekommt dabei ueberhaupt erst eine Flaeche. */ --atg-hk-lift: 3px; --atg-hk-fill-hover: rgba(255, 255, 255, .12); --atg-hk-line-hover: rgba(255, 255, 255, .22); --atg-hk-open-hover: rgba(255, 255, 255, .05); --atg-hk-hover-time: var(--atg-transition); /* 22 statt der 18 aus der Vorlage. Die Vorlage zeigt das Symbol als duenne Linie auf weissem Grund; auf dem dunklen Band ist es seit dem 23.09.2026 eine gefuellte Form, und die braucht etwas mehr Flaeche, um als Symbol und nicht als Fleck gelesen zu werden. */ --atg-hk-icon: 22px; --atg-hk-icon-gap: 20px; --atg-hk-title: var(--atg-on-dark); --atg-hk-text: var(--atg-on-dark-soft); --atg-hk-title-fs: 20px; --atg-hk-title-gap: 6px; /* Titel -> Text */ --atg-hk-body-fs: 16px; /* Deckel fuer die Textspalte. Ohne ihn liefe der Text bis an den Knopf, in der Vorlage bricht er deutlich frueher: bei 1440px endet die erste Zeile bei x=554, der Knopf beginnt erst bei 1041. */ --atg-hk-text-max: 440px; --atg-hk-btn-gap: 32px; /* Text -> Knopf */ /* Knopf: Form und Groesse wie .atg-cta und die Knoepfe der Startseite, Farben wie dort. Die gefuellte Karte traegt den gefuellten Knopf, die Karte mit Linie den Umriss. */ --atg-hk-btn-h: 44px; --atg-hk-btn-pad: 26px; --atg-hk-btn-fs: 15px; /* Auf dunklem Band muss der gefuellte Knopf hell sein - ueberall sonst im Projekt ist er dunkel mit weisser Schrift. Das ist die einzige Stelle mit dieser Umkehrung und bewusst so: ein Knopf in --atg-ink auf einem Band in --atg-band-dark hat 1,58 Kontrast zur Flaeche und liest sich nicht mehr als Schaltflaeche. Beim Darueberfahren geht er nach Weiss - dieselbe Richtung wie sonst "zum Akzent hin", hier eben aufwaerts. --atg-hk-btn-hover gilt fuer BEIDE Knopfarten, den gefuellten wie den mit Umriss (Festlegung vom 23.09.2026). Der Umriss-Knopf fuellte sich vorher mit --atg-hk-btn-line, also mit der Ruhefarbe der gefuellten Knoepfe daneben - er sah beim Darueberfahren aus wie ein Knopf im Ruhezustand. Jetzt hat der gehoverte Zustand ein Aussehen, das sonst kein Knopf im Block hat. */ --atg-hk-btn-bg: var(--atg-accent); --atg-hk-btn-fg: var(--atg-ink); --atg-hk-btn-hover: var(--atg-white); --atg-hk-btn-line: var(--atg-accent); /* ---------- Brotkrumen (Navigationszeile der Unterseiten) ---------- Festgelegt am 23.09.2026. Schrift wie die Kontextzeile h4 (Groesse aus --atg-h4-fs, Grossbuchstaben, weiter Zeichenabstand), aber halbfett statt fett - sonst saehe die Zeile genauso aus wie die h4-Zeile im Band direkt darunter. Uebergeordnete Seiten grau, aktuelle Seite dunkel. Die Zeile uebernimmt die Farbe des ersten Inhaltsblocks, wenn der ein Band hat. Die Zuordnung Block -> Farbe steht in css/brotkrumen.css, die Farben selbst hier. Neue Farbwerte gibt es dafuer keine, alles zeigt auf vorhandene Tokens. */ --atg-crumbs-pad-y: 18px; --atg-crumbs-weight: 600; --atg-crumbs-tracking: .16em; /* Luft links und rechts vom Pfeil, und seine Groesse relativ zur Schrift - der Pfeil ist ein Kleinbuchstaben-Zeichen und wirkt neben Grossbuchstaben sonst zu klein */ --atg-crumbs-sep-gap: .75em; --atg-crumbs-sep-size: 1.3em; /* Beginnt die Seite mit einem Band, steht die Zeile schon in dessen Farbe. Die volle Bandluft darunter waere dann doppelt Luft (bei 1440px 18 + 80 px bis zur ersten Zeile Inhalt) - das Band bekommt oben nur diesen Anteil seiner Luft. */ --atg-crumbs-band-top: .5; /* auf Weiss */ --atg-crumbs-bg: transparent; --atg-crumbs-link: var(--atg-h4); --atg-crumbs-hover: var(--atg-accent-deep); --atg-crumbs-current: var(--atg-ink); --atg-crumbs-sep: color-mix(in srgb, var(--atg-h4) 55%, transparent); /* auf hellem Band (Layout 21, 23, 27) */ --atg-crumbs-band-light: var(--atg-pe-band); /* auf dunklem Band (Layout 20, 22, 24, 28) */ --atg-crumbs-band-dark: var(--atg-band-dark); --atg-crumbs-link-dark: var(--atg-on-dark-soft); --atg-crumbs-hover-dark: var(--atg-accent); --atg-crumbs-cur-dark: var(--atg-on-dark); --atg-crumbs-sep-dark: var(--atg-on-dark-faint); /* ---------- Sonstiges ---------- */ --atg-radius: 4px; --atg-transition: .15s ease; } /* Anker-Sprungziele duerfen nicht unter dem klebenden Teil des Kopfes landen. Frueher stand hier ein fester Wert von 200px, der zu keiner tatsaechlichen Kopfhoehe gepasst hat. */ html { scroll-padding-top: var(--atg-sticky-h); } @media (prefers-reduced-motion: reduce) { :root { --atg-transition: 0s; } } /* ============================================================ KARTENGRUPPE "PRODUKT VORSCHAU" - DIE SCHMALEREN BREITEN ============================================================ Eine Zeile je Spalte der Masstabelle. Die gleitenden Werte laufen zwischen 1024 und 1440px mit; beide Enden stehen im clamp, die Untergrenze gilt bei 1024, die Obergrenze ab 1440. Die Konstanten in den clamp-Formeln sind ausgerechnet, nicht geschaetzt: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ /* 1024 bis 1439px - Raster mit drei Spalten, Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-pv-band-y: 64px; --atg-pv-gap: clamp(20px, 2.88462vw - 9.538px, 32px); --atg-pv-pad: clamp(22px, 1.44231vw + 7.231px, 28px); --atg-pv-title-fs: clamp(19px, 0.72115vw + 11.615px, 22px); --atg-pv-body-fs: clamp(16px, 0.24038vw + 13.538px, 17px); } } /* 768 bis 1023px - Slider, zwei Karten sichtbar */ @media (max-width: 1023.98px) { :root { --atg-pv-band-y: 56px; --atg-pv-cols: 2; --atg-pv-gap: 20px; --atg-pv-pad: 22px; --atg-pv-title-fs: 20px; --atg-pv-body-fs: 16px; --atg-pv-peek: 60px; --atg-pv-card-max: 420px; } } /* bis 767px - Slider, eine Karte sichtbar */ @media (max-width: 767.98px) { :root { --atg-pv-band-y: 48px; --atg-pv-cols: 1; --atg-pv-gap: 16px; --atg-pv-peek: 52px; --atg-pv-card-max: 460px; } } /* unter 380px - nur der Anschnitt wird noch einmal schmaler, sonst bliebe fuer die Karte selbst zu wenig uebrig */ @media (max-width: 379.98px) { :root { --atg-pv-peek: 44px; } } /* ============================================================ ABSCHNITT "PERSOENLICH ERREICHBAR" - DIE SCHMALEREN BREITEN ============================================================ Gemessen aus den vier Startseiten-PDFs. Die gleitenden Werte laufen zwischen 1024 und 1440px mit; beide Enden stehen im clamp, die Untergrenze gilt bei 1024, die Obergrenze ab 1440. Die Konstanten in den clamp-Formeln sind ausgerechnet: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ /* 1024 bis 1439px - Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-pe-band-y: 64px; --atg-pe-pad: clamp(45px, 2.64423vw + 17.923px, 56px); --atg-pe-min-h: clamp(290px, 8.65385vw + 201.400px, 326px); --atg-pe-body-fs: clamp(16px, 0.24038vw + 13.538px, 17px); --atg-pe-btn-h: 42px; } } /* 768 bis 1023px - Text und Bild stehen weiter nebeneinander */ @media (max-width: 1023.98px) { :root { --atg-pe-band-y: 56px; --atg-pe-pad: 34px; --atg-pe-min-h: 316px; --atg-pe-body-fs: 16px; --atg-pe-btn-h: 40px; } } /* bis 767px - Bild oben, Knopf ueber die volle Breite */ @media (max-width: 767.98px) { :root { --atg-pe-band-y: 48px; --atg-pe-pad: 22px; --atg-pe-btn-h: 48px; } } /* unter 380px - nur der Innenabstand wird noch einmal kleiner, sonst bliebe fuer den Text zu wenig uebrig */ @media (max-width: 379.98px) { :root { --atg-pe-pad: 18px; } } /* ============================================================ NEWS-BEREICH - DIE SCHMALEREN BREITEN ============================================================ Eine Zeile je Spalte der Masstabelle aus dem Projekt-Dokument "Design News-Bereich Startseite". Die gleitenden Werte laufen zwischen 1024 und 1440px mit; beide Enden stehen im clamp. Die Konstanten in den clamp-Formeln sind ausgerechnet: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ /* 1024 bis 1439px - weiterhin vier Karten, Werte gleitend. Steigung = (oben - unten) / 416, 416 ist der Abstand zwischen 1024 und 1440. */ @media (max-width: 1439.98px) { :root { --atg-nw-band-y: 56px; --atg-nw-gap: clamp(20px, 2.88462vw - 9.538px, 32px); --atg-nw-pad: clamp(22px, 0.48077vw + 17.077px, 24px); --atg-nw-head-gap: 32px; --atg-nw-shot-h: 180px; --atg-nw-title-fs: clamp(18px, 0.48077vw + 13.077px, 20px); --atg-nw-btn-h: 42px; } } /* 768 bis 1023px - Slider, zwei Karten sichtbar */ @media (max-width: 1023.98px) { :root { --atg-nw-band-y: 48px; --atg-nw-cols: 2; --atg-nw-gap: 20px; --atg-nw-pad: 22px; --atg-nw-head-gap: 28px; /* Slider: die Karte ist hier bis 420px breit */ --atg-nw-shot-h: 200px; --atg-nw-shot-gap: 22px; --atg-nw-title-fs: 19px; --atg-nw-date-fs: 11.5px; --atg-nw-peek: 60px; --atg-nw-card-max: 420px; --atg-nw-btn-h: 40px; --atg-nw-btn-pad: 20px; } } /* bis 767px - Slider, eine Karte sichtbar */ @media (max-width: 767.98px) { :root { --atg-nw-band-y: 40px; --atg-nw-shot-h: 180px; --atg-nw-cols: 1; --atg-nw-gap: 16px; --atg-nw-peek: 52px; --atg-nw-card-max: 460px; --atg-nw-btn-h: 44px; } } /* unter 380px - nur der Anschnitt wird noch einmal schmaler */ @media (max-width: 379.98px) { :root { --atg-nw-peek: 44px; } } /* ============================================================ SPALTEN-CONTAINER - DIE SCHMALEREN BREITEN ============================================================ Festgelegt am 22.09.2026: - zwei Spalten stehen ab 768px nebeneinander, darunter untereinander - drei Spalten bleiben auch auf dem Tablet quer nebeneinander - vier Spalten werden auf dem Tablet quer zu zwei mal zwei Die Konstante in der clamp-Formel ist ausgerechnet, nicht geschaetzt: Steigung = (50 - 28) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ /* 1024 bis 1439px - Spaltenabstand gleitend */ @media (max-width: 1439.98px) { :root { --atg-col-gap: clamp(28px, 5.28846vw - 26.154px, 50px); } } /* 768 bis 1023px - vier Spalten werden zu zwei mal zwei */ @media (max-width: 1023.98px) { :root { --atg-col-gap: 24px; --atg-col-4: repeat(2, 1fr); } } /* bis 767px - alles untereinander. Der Abstand ist jetzt der Zeilenabstand zwischen den Bloecken und darf dafuer nicht der knappe Wert von oben sein. */ @media (max-width: 767.98px) { :root { --atg-col-gap: 28px; --atg-col-2: 1fr; --atg-col-2-right: 1fr; --atg-col-2-left: 1fr; --atg-col-3: 1fr; --atg-col-4: 1fr; } } /* ============================================================ DETAILSEITEN-BLOECKE - DIE SCHMALEREN BREITEN ============================================================ Eine Zeile je Spalte der Masstabelle im Projekt-Dokument "Detailseite Unternehmen". Die gleitenden Werte laufen zwischen 1024 und 1440px mit; beide Enden stehen im clamp, die Untergrenze gilt bei 1024, die Obergrenze ab 1440. Die Konstanten in den clamp-Formeln sind ausgerechnet: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ /* 1024 bis 1439px - Anordnung wie ab 1440, Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-block-band-y: 64px; --atg-dl-row-pad: clamp(13px, 0.24038vw + 10.538px, 14px); --atg-dl-value-fs: clamp(18px, 0.24038vw + 15.538px, 19px); --atg-kz-pad: clamp(40px, 0.96154vw + 30.154px, 44px); --atg-kz-head-gap: clamp(26px, 0.96154vw + 16.154px, 30px); --atg-kz-body-fs: clamp(16px, 0.24038vw + 13.538px, 17px); --atg-hk-band-y: 56px; --atg-hk-min-h: clamp(123px, 0.72115vw + 115.615px, 126px); --atg-hk-pad-x: clamp(30px, 0.48077vw + 25.077px, 32px); --atg-hk-pad-y: clamp(22px, 0.48077vw + 17.077px, 24px); --atg-hk-title-fs: clamp(19px, 0.24038vw + 16.538px, 20px); --atg-hk-btn-h: 42px; } } /* 768 bis 1023px - Text und Bild stehen weiter nebeneinander, die beiden Spalten des dunklen Bandes ebenfalls */ @media (max-width: 1023.98px) { :root { --atg-block-band-y: 56px; --atg-dl-label-fs: 12.5px; --atg-dl-value-fs: 18px; --atg-dl-row-pad: 12px; --atg-dl-gap: 16px; --atg-kz-pad: 36px; --atg-kz-head-gap: 26px; --atg-kz-item-gap: 14px; --atg-kz-mark-col: 24px; --atg-kz-body-fs: 16px; --atg-hk-band-y: 56px; --atg-hk-gap: 18px; --atg-hk-min-h: 120px; --atg-hk-pad-x: 28px; --atg-hk-pad-y: 20px; --atg-hk-icon-gap: 18px; --atg-hk-title-fs: 18px; --atg-hk-btn-h: 40px; --atg-hk-btn-pad: 22px; --atg-hk-btn-gap: 24px; } } /* bis 767px - alles untereinander. Im Block "Text und Bild" steht dann der Text zuerst und das Bild darunter; der Knopf der Hinweiskarten laeuft ueber die volle Kartenbreite. */ @media (max-width: 767.98px) { :root { --atg-block-band-y: 48px; --atg-tb-cols: 1fr; --atg-tb-col-gap: var(--atg-tb-stack-gap); --atg-dl-label-fs: 12px; --atg-dl-value-fs: 17px; --atg-kz-card-max: none; --atg-kz-pad: 26px; --atg-kz-head-gap: 24px; --atg-kz-item-gap: 14px; --atg-kz-mark-col: 22px; --atg-hk-band-y: 40px; --atg-hk-gap: 16px; --atg-hk-text-max: none; /* Die Karte wird nur noch so hoch, wie ihr Inhalt braucht - Symbol, Titel, Text und Knopf stehen untereinander. */ --atg-hk-min-h: 0; --atg-hk-pad-x: 22px; --atg-hk-pad-y: 22px; --atg-hk-icon-gap: 14px; --atg-hk-title-fs: 18px; --atg-hk-body-fs: 15px; --atg-hk-btn-gap: 20px; --atg-hk-btn-h: 44px; } } /* unter 380px - nur die Innenabstaende werden noch einmal kleiner, sonst bliebe fuer den Text zu wenig uebrig */ @media (max-width: 379.98px) { :root { --atg-kz-pad: 22px; --atg-hk-pad-x: 18px; --atg-hk-pad-y: 18px; } } /* ============================================================ BROTKRUMEN - DIE SCHMALEREN BREITEN Nur die Luft ueber und unter der Zeile. Die Schriftgroesse laeuft ueber --atg-h4-fs aus design.css von selbst mit. ============================================================ */ @media (max-width: 1439.98px) { :root { --atg-crumbs-pad-y: 16px; } } @media (max-width: 1023.98px) { :root { --atg-crumbs-pad-y: 14px; } } @media (max-width: 767.98px) { :root { --atg-crumbs-pad-y: 12px; } } /* ============================================================ SEITE "PARTNER" - LAYOUT 29, 30 UND 31 ============================================================ Bildet die Masstabelle aus dem Projekt-Dokument "Design Partnerseite" ab. Die Werte hier gelten ab 1440px; die vier Bloecke darunter setzen sie fuer die schmaleren Breiten neu. Der Regelsatz steht in css/partner.css und enthaelt keine einzige Zahl. 29 Einleitung hell .atg-einleitung 30 Premium-Partner .atg-premium 31 Partnerkarten .atg-partnerkarten Praefix --atg-pa-* fuer die Seite und den Premium-Block, --atg-pk-* fuer die Partnerkarten. Die Konstanten in den clamp-Formeln sind ausgerechnet: Steigung = (oben - unten) / 416, und 416 ist der Abstand zwischen 1024 und 1440. ============================================================ */ :root { /* ---------- Baender ---------- */ /* Zwei helle Baender und ein dunkles. Beide Toene zeigen auf die bestehenden Tokens - die Seite hat damit dasselbe Off-white wie "Unternehmen" und "Persoenlich erreichbar" und dasselbe Petrol wie alle dunklen Baender. */ --atg-pa-light: var(--atg-pe-band); --atg-pa-dark: var(--atg-band-dark); --atg-pa-band-top: 80px; --atg-pa-band-bottom: 88px; /* Blockueberschrift "Unser Premium-Partner" / "Unsere Partnerfirmen". Optik der ersten Ebene, aber kleiner als die h1 der Seite - so gezeichnet. */ --atg-pa-head-fs: 34px; --atg-pa-head-gap: 44px; /* Unterstrich -> Inhalt */ /* Weiche Lichtflaechen. Ohne sie saehe man die Unschaerfe des Glases nicht - auf einer einfarbigen Flaeche gibt es nichts, was verschwimmen koennte. Farben aus dem Logo. */ --atg-pa-glow-dark: radial-gradient(ellipse 34% 58% at 52% 0%, color-mix(in srgb, var(--atg-accent-deep) 60%, transparent), transparent 72%), radial-gradient(ellipse 24% 44% at 38% 46%, color-mix(in srgb, var(--atg-accent-deep) 72%, transparent), transparent 70%), radial-gradient(ellipse 24% 50% at 6% 66%, color-mix(in srgb, var(--atg-accent) 22%, transparent), transparent 72%); /* Dasselbe Licht, aber vollstaendig INNERHALB des Bandes. Angelegt am 03.11.2026 fuer die Seite "Unternehmen". --atg-pa-glow-dark ist Licht von oben: die erste Ellipse sitzt mit ihrer Mitte auf der Bandoberkante und ist genau dort am hellsten. Stoesst das Band oben an ein helles Band, trifft dessen gleichmaessige Flaeche auf eine Kante, die in der Mitte hell und an den Seiten dunkel ist - der Uebergang wirkt hart und ungewollt. Am 03.11. bei 1440px an der Oberkante des Spaltenbandes gemessen: rgb(27,68,87) aussen gegen rgb(24,91,116) in der Mitte. Hier liegen alle drei Ellipsen mit ihrem sichtbaren Teil zwischen Ober- und Unterkante. Das Band beginnt und endet deshalb ueberall im reinen Bandton, und das Licht entwickelt sich erst darin. Gerechnet: der Farbverlauf ist bei 72 Prozent des Radius durchsichtig, sichtbar ist also 0,72 mal die Hoehe des Radius. Erste Ellipse Mitte 36, Radius 44 -> sichtbar von 4 bis 68 Prozent. Zweite Mitte 62, Radius 40 -> 34 bis 91. Dritte Mitte 70, Radius 34 -> 46 bis 94. Waagrecht darf Licht ueber den Rand laufen: links und rechts ist der Bildschirmrand, kein Nachbarband. Die Farben und ihre Anteile sind unveraendert. */ --atg-band-glow-innen: radial-gradient(ellipse 34% 44% at 52% 36%, color-mix(in srgb, var(--atg-accent-deep) 60%, transparent), transparent 72%), radial-gradient(ellipse 24% 40% at 38% 62%, color-mix(in srgb, var(--atg-accent-deep) 72%, transparent), transparent 70%), radial-gradient(ellipse 24% 34% at 6% 70%, color-mix(in srgb, var(--atg-accent) 22%, transparent), transparent 72%); --atg-pa-glow-light: radial-gradient(ellipse 22% 26% at 28% 100%, color-mix(in srgb, var(--atg-accent) 34%, transparent), transparent 72%), radial-gradient(ellipse 16% 36% at 100% 50%, color-mix(in srgb, var(--atg-accent) 32%, transparent), transparent 72%); /* ---------- 29 Einleitung ---------- */ --atg-pa-intro-max: 760px; --atg-pa-intro-fs: 19px; --atg-pa-intro-lh: 1.6; --atg-pa-intro-text: #2B3A42; /* ---------- 30 Premium-Partner ---------- */ --atg-pa-col-gap: 50px; --atg-pa-text-fs: 19px; --atg-pa-text-lh: 1.62; --atg-pa-text: rgba(255, 255, 255, .82); --atg-pa-dl-gap: 32px; /* Text -> Datenliste */ /* Glaskarte */ --atg-pa-glass-pad: 30px; --atg-pa-glass-radius: 20px; --atg-pa-glass-blur: 22px; --atg-pa-glass-bg: linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .08) 100%); --atg-pa-glass-bg-hover: linear-gradient(150deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .09) 55%, rgba(255, 255, 255, .13) 100%); --atg-pa-glass-line: rgba(255, 255, 255, .28); --atg-pa-glass-line-hover: rgba(255, 255, 255, .40); /* Lichtkante oben innen und Schatten unter der Karte */ --atg-pa-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 56px rgba(6, 22, 30, .38); --atg-pa-glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 64px rgba(6, 22, 30, .46); /* Glanzverlauf links oben, liegt ueber dem Inhalt */ --atg-pa-glass-sheen: radial-gradient(ellipse 85% 75% at 0% 0%, rgba(255, 255, 255, .18), transparent 70%); /* Plakette "Premium-Partner" (Text aus dem Feld Subheader) */ --atg-pa-badge-h: 28px; --atg-pa-badge-pad: 14px; --atg-pa-badge-fs: 12px; --atg-pa-badge-track: .18em; --atg-pa-badge-star: 10px; --atg-pa-badge-gap: 9px; /* Stern -> Text */ --atg-pa-badge-bg: var(--atg-accent); --atg-pa-badge-fg: var(--atg-ink); /* Logoflaeche und Logo. Die Logodateien sind auf eine einheitliche Flaeche zugeschnitten (720 x 240, 3:1) - deshalb reicht eine Hoehe, die Breite folgt daraus. */ --atg-pa-logo-box-h: 196px; --atg-pa-logo-radius: 14px; --atg-pa-logo-h: 112px; /* Abstaende in der Karte. Der Zeilenabstand gilt, wenn Firmenname und Knopf untereinander stehen; die beiden Abstaende darueber sind um ihn verringert, weil er dort ebenfalls wirkt. */ --atg-pa-row-gap: 14px; --atg-pa-badge-space: 8px; /* 22 - 14: Plakette -> Logo */ --atg-pa-logo-space: 11px; /* 25 - 14: Logo -> Name */ --atg-pa-name-gap: 16px; /* Name -> Knopf, nebeneinander */ --atg-pa-name-fs: 24px; /* Knopf in der Glaskarte: gefuellt hell, beim Darueberfahren weiss - dieselbe Regel wie bei den Hinweiskarten. */ --atg-pa-btn-h: 46px; --atg-pa-btn-pad: 24px; --atg-pa-btn-fs: 16px; --atg-pa-btn-bg: var(--atg-accent); --atg-pa-btn-fg: var(--atg-ink); --atg-pa-btn-hover: var(--atg-white); --atg-pa-btn-glow: 0 8px 22px color-mix(in srgb, var(--atg-accent) 35%, transparent); /* Pfeil in beiden Knopfarten */ --atg-pa-arrow-fs: 12px; --atg-pa-arrow-gap: 12px; --atg-pa-arrow-shift: 4px; --atg-pa-lift: 3px; --atg-pa-hover-time: var(--atg-transition); /* ---------- 31 Partnerkarten ---------- */ --atg-pk-cols: 3; /* Karten nebeneinander */ --atg-pk-gap: 32px; /* Abstand zwischen Karten */ --atg-pk-pad: 24px; /* Innenabstand der Karte */ --atg-pk-radius: 18px; --atg-pk-peek: 0px; /* Anschnitt naechste Karte */ --atg-pk-card-max: none; /* Helle Glaskarte */ --atg-pk-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .52) 100%); --atg-pk-glass-line: var(--atg-white); --atg-pk-glass-blur: 18px; --atg-pk-shadow: 0 14px 34px rgba(16, 40, 52, .12); --atg-pk-shadow-hover: 0 20px 44px rgba(16, 40, 52, .18); --atg-pk-logo-box-h: 120px; --atg-pk-logo-radius: 12px; --atg-pk-logo-h: 72px; --atg-pk-title-fs: 20px; --atg-pk-body-fs: 16px; --atg-pk-title-gap: 22px; /* Logoflaeche -> Titel */ --atg-pk-text-gap: 10px; /* Titel -> Text */ --atg-pk-btn-gap: 24px; /* Text -> Knopf (mindestens) */ /* Umriss-Knopf, beim Darueberfahren gefuellt */ --atg-pk-btn-h: 40px; --atg-pk-btn-pad: 20px; --atg-pk-btn-fs: 15px; --atg-pk-btn-fg: var(--atg-accent-deep); --atg-pk-btn-line: color-mix(in srgb, var(--atg-accent-deep) 55%, transparent); --atg-pk-btn-hover: var(--atg-accent-deep); --atg-pk-btn-hover-fg: var(--atg-white); --atg-pk-lift: 3px; /* ---------- Slider auf hellem Band ---------- Gilt fuer JEDEN Slider auf hellem Hintergrund, nicht nur fuer die Partnerkarten (Festlegung 23.09.2026): Balken auf dunkler Spur, runde Knoepfe als helle Glasknoepfe. Ein kuenftiger heller Slider zeigt mit seinen eigenen Tokens hierher, statt Farben neu zu schreiben. Der Hintergrund kommt IMMER vom Band darunter - Spur und Bedienelemente haben keine eigene Flaeche. Luft in der Spur: ein waagrecht scrollender Kasten schneidet alles ab, was ueber ihn hinausragt - auch den Schatten der Karten. Mit 6 / 28 px wie bei der Produktvorschau endete der Schatten oben und unten mit gerader Kante, die Spur wirkte dadurch wie ein eigener, anders gefaerbter Kasten auf dem Band. Die Luft reicht jetzt fuer den groessten Schatten (Hover: 20 px Versatz + 44 px Unschaerfe); damit sich der Abstand zur Ueberschrift und zu den Bedienelementen nicht aendert, wird sie mit negativem Aussenabstand wieder abgezogen. */ --atg-slider-hell-track-top: 28px; --atg-slider-hell-track-bottom: 64px; --atg-slider-hell-nav-space: 40px; /* Kartenunterkante -> Bedienelemente */ --atg-slider-hell-bar-track: rgba(16, 40, 52, .12); --atg-slider-hell-round-bg: rgba(255, 255, 255, .82); --atg-slider-hell-round-line: var(--atg-white); --atg-slider-hell-round-fg: var(--atg-ink); --atg-slider-hell-round-shadow: 0 6px 18px rgba(16, 40, 52, .12); /* Partnerkarten: Masse wie bei der Produktvorschau, Farben und Spur aus "Slider auf hellem Band" */ --atg-pk-track-top: var(--atg-slider-hell-track-top); --atg-pk-track-bottom: var(--atg-slider-hell-track-bottom); --atg-pk-nav-space: var(--atg-slider-hell-nav-space); --atg-pk-nav-gap: var(--atg-pv-nav-gap); --atg-pk-bar-h: var(--atg-pv-bar-h); --atg-pk-bar-track: var(--atg-slider-hell-bar-track); --atg-pk-round: var(--atg-pv-btn); --atg-pk-round-gap: var(--atg-pv-btn-gap); --atg-pk-round-fs: var(--atg-pv-btn-fs); --atg-pk-round-bg: var(--atg-slider-hell-round-bg); --atg-pk-round-line: var(--atg-slider-hell-round-line); --atg-pk-round-fg: var(--atg-slider-hell-round-fg); --atg-pk-round-shadow: var(--atg-slider-hell-round-shadow); --atg-pk-hint-time: var(--atg-pv-hint-time); --atg-pk-hint-shift: var(--atg-pv-hint-shift); } /* 1024 bis 1439px - Anordnung wie ab 1440, Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-pa-band-top: 64px; --atg-pa-band-bottom: 72px; --atg-pa-head-fs: clamp(32px, 0.48077vw + 27.077px, 34px); --atg-pa-intro-fs: 18px; --atg-pa-col-gap: 40px; --atg-pa-text-fs: 18px; --atg-pa-glass-pad: 26px; --atg-pa-logo-box-h: 170px; --atg-pa-logo-h: 98px; --atg-pa-name-fs: 22px; --atg-pk-gap: clamp(20px, 2.88462vw - 9.538px, 32px); --atg-pk-pad: 20px; --atg-pk-logo-box-h: 104px; --atg-pk-logo-h: 62px; --atg-pk-title-fs: 19px; } } /* 768 bis 1023px - Premium weiter zweispaltig, Firmenname und Knopf untereinander; Partnerkarten als Slider mit zwei Karten */ @media (max-width: 1023.98px) { :root { --atg-pa-band-top: 56px; --atg-pa-band-bottom: 64px; --atg-pa-head-fs: 29px; --atg-pa-intro-fs: 18px; --atg-pa-col-gap: 32px; --atg-pa-text-fs: 17px; --atg-pa-glass-pad: 22px; --atg-pa-logo-box-h: 150px; --atg-pa-logo-h: 90px; --atg-pa-name-fs: 20px; --atg-pk-cols: 2; --atg-pk-gap: 20px; --atg-pk-peek: 60px; --atg-pk-card-max: 460px; --atg-pk-title-fs: 18px; } } /* bis 767px - alles untereinander, die Glaskarte zuerst. Beide Knopfarten laufen ueber die volle Breite. */ @media (max-width: 767.98px) { :root { --atg-pa-band-top: 48px; --atg-pa-band-bottom: 56px; --atg-pa-head-fs: 27px; --atg-pa-head-gap: 32px; --atg-pa-intro-fs: 17px; --atg-pa-col-gap: 32px; --atg-pa-glass-pad: 20px; --atg-pa-logo-h: 93px; --atg-pk-cols: 1; --atg-pk-gap: 16px; --atg-pk-peek: 52px; --atg-pk-logo-box-h: 110px; --atg-pk-logo-h: 66px; --atg-pk-body-fs: 15px; } } /* unter 380px - Innenabstand, Logoflaeche und Anschnitt noch einmal kleiner, sonst bliebe fuer den Inhalt zu wenig */ @media (max-width: 379.98px) { :root { --atg-pa-glass-pad: 16px; --atg-pa-logo-box-h: 136px; --atg-pa-logo-h: 83px; --atg-pk-peek: 44px; } } /* ============================================================ SEITE "ANSPRECHPARTNER" - LAYOUT 32 UND 33 ============================================================ Bildet die Masstabelle aus dem Projekt-Dokument "Design Ansprechpartner" ab (Vorlage A2). Die Werte hier gelten ab 1440px; die Bloecke darunter setzen sie fuer die schmaleren Breiten neu. Der Regelsatz steht in css/ansprechpartner.css und enthaelt keine einzige Zahl. 32 Zitat .atg-zitat Card Group mit EINER Karte in der rechten Spalte des Einleitungs-Containers (Layout 29). 33 Ansprechpartner .atg-ansprechpartner Card Group mit den Mitarbeiterkarten auf dunklem Band. Praefix --atg-zi-* fuer das Zitat, --atg-ap-* fuer die Ansprechpartner. ============================================================ */ :root { /* ---------- Einleitung mit Zitat (Layout 29 + 32) ---------- Stehen Header-Element und Container beide auf Layout 29, liegen zwei helle Baender aneinander. Zwischen ihnen gilt statt zweimal Bandluft nur dieser Abstand: Unterstrich der h1 -> Einleitungstext. */ --atg-zi-head-gap: 24px; /* Spalten Text | Zitat. Bei 1440 ist die Zitatkarte 583 px breit, so gezeichnet. */ --atg-zi-cols: 1fr 1fr; --atg-zi-col-gap: 74px; /* Abstand Text -> Zitatkarte, wenn beides untereinander steht (ab 1023px abwaerts). Gemessen bis zur Karte, der Anfuehrungs-Knopf ragt in diesen Abstand hinein. */ --atg-zi-row-gap: 58px; /* Luft ueber der Karte, solange beide Spalten nebeneinander stehen: der Anfuehrungs-Knopf ragt ueber die Karte hinaus und endet so knapp unter dem Unterstrich der h1. */ --atg-zi-top: 8px; /* Luft unter der Einleitung. Gezeichnet ist dort dieselbe Luft wie oben im Band (80 / 64 / 56 / 48), nicht die etwas groessere untere Bandluft von Layout 29. */ --atg-zi-band-bottom: var(--atg-pa-band-top); /* Zitat ALLEIN als Einleitung (Festlegung 24.09.2026, das Textelement ist entfallen): die Karte laeuft ueber die volle Breite, ab 1024px Zitat links, Absender rechts. Abstand Unterstrich der h1 -> Oberkante der Karte; der Knopf ragt zur Haelfte in diesen Abstand hinein. */ --atg-zi-solo-gap: 56px; --atg-zi-wide-pad-y: 28px; --atg-zi-wide-pad-right: 44px; --atg-zi-wide-quote-fs: 22px; /* Zitat -> senkrechte Trennlinie -> Portraet */ --atg-zi-divider-gap: 40px; /* ---------- 32 Zitatkarte ---------- */ --atg-zi-bg: var(--atg-white); --atg-zi-line: var(--atg-line); --atg-zi-shadow: var(--atg-pe-shadow); --atg-zi-radius: 14px; --atg-zi-pad-top: 46px; --atg-zi-pad-x: 47px; --atg-zi-pad-right: 44px; --atg-zi-pad-bottom: 33px; /* Kante links: 4 px Logo-Tuerkis, oben und unten eingerueckt */ --atg-zi-bar: 4px; --atg-zi-bar-inset: 29px; --atg-zi-bar-color: var(--atg-accent); /* Runder Anfuehrungs-Knopf, sitzt mittig auf der Oberkante */ --atg-zi-knob: 60px; --atg-zi-knob-x: 40px; /* Abstand von der linken Kartenkante */ --atg-zi-knob-bg: var(--atg-accent-deep); --atg-zi-knob-fg: var(--atg-white); --atg-zi-knob-fs: 24px; /* Das Zitat selbst */ --atg-zi-quote-fs: 24px; --atg-zi-quote-lh: 1.45; --atg-zi-quote-color: var(--atg-h1); /* Trennlinie und Absender */ --atg-zi-rule-gap: 24px; /* Zitat -> Linie */ --atg-zi-foot-gap: 20px; /* Linie -> Portraet */ --atg-zi-portrait: 56px; /* inkl. Rand */ --atg-zi-portrait-line: 2px; --atg-zi-portrait-pos: 50% 0%; /* Ausschnitt: oben mittig */ --atg-zi-portrait-gap: 14px; /* Portraet -> Name */ --atg-zi-name-fs: 17px; --atg-zi-name-color: var(--atg-ink); --atg-zi-role-fs: 12px; --atg-zi-role-track: .18em; --atg-zi-role-color: var(--atg-accent-deep); /* ---------- 33 Ansprechpartner: Band ---------- */ /* Dasselbe Petrol und dieselbe Bandluft wie die dunklen Baender der Seite "Partner" */ --atg-ap-band: var(--atg-band-dark); --atg-ap-band-top: var(--atg-pa-band-top); --atg-ap-band-bottom: var(--atg-pa-band-bottom); /* Lichtflaechen: oben mittig, links und rechts auf halber Hoehe. Ohne sie saehe man die Unschaerfe der Glaskarten nicht. */ --atg-ap-glow: radial-gradient(ellipse 24% 24% at 50% 0%, color-mix(in srgb, var(--atg-accent-deep) 62%, transparent), transparent 72%), radial-gradient(ellipse 9% 32% at 2% 62%, color-mix(in srgb, var(--atg-accent) 20%, transparent), transparent 72%), radial-gradient(ellipse 9% 30% at 97% 62%, color-mix(in srgb, var(--atg-accent-deep) 55%, transparent), transparent 72%); /* ---------- 33 Ansprechpartner: Anordnung ---------- */ --atg-ap-cols: 4; /* Karten nebeneinander */ --atg-ap-gap: 24px; /* Abstand zwischen Karten */ --atg-ap-peek: 0px; /* Anschnitt naechste Karte */ --atg-ap-card-max: none; /* Foto: Seitenverhaeltnis und Ausrichtung. Das Foto fuellt sein Feld immer ganz aus (object-fit: cover). Der Ausschnitt haengt oben an - bei den Hochformat-Fotos (2:3) wird damit unten abgeschnitten, der Kopf bleibt, wo er im Foto steht. Im quadratischen Feld (768-1023) etwas tiefer, sonst wirkt der Kopf zu nah am Rand. Neue Fotos passen dadurch ohne Code-Aenderung. */ --atg-ap-photo-ratio: 4 / 5; --atg-ap-photo-pos: 50% 0%; --atg-ap-photo-bg: var(--atg-white); /* Glaskarte */ --atg-ap-radius: 14px; --atg-ap-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .06) 100%); --atg-ap-glass-line: rgba(255, 255, 255, .26); --atg-ap-glass-blur: 18px; --atg-ap-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 20px 44px rgba(6, 22, 30, .34); --atg-ap-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .26), 0 26px 54px rgba(6, 22, 30, .44); --atg-ap-line-hover: rgba(255, 255, 255, .40); /* Textteil */ --atg-ap-pad-top: 23px; --atg-ap-pad-x: 20px; --atg-ap-pad-right: 16px; --atg-ap-pad-bottom: 22px; --atg-ap-name-fs: 22px; --atg-ap-name-color: var(--atg-on-dark); --atg-ap-role-fs: 12px; --atg-ap-role-lh: 1.5; --atg-ap-role-track: .16em; --atg-ap-role-color: var(--atg-accent); --atg-ap-role-gap: 4px; /* Name -> Funktion */ /* Die Funktion haelt immer Platz fuer zwei Zeilen frei. So liegen Linie und Kontaktzeilen in allen Karten auf gleicher Hoehe, auch wenn eine Funktion umbricht und die andere nicht - und im Slider haben alle Karten dieselbe Hoehe. */ --atg-ap-role-lines: 2; --atg-ap-rule-gap: 15px; /* Funktion -> Linie (mind.) */ --atg-ap-rule: var(--atg-rule-dark); /* Kontaktzeilen: Telefon, Mobil und E-Mail, beliebig viele */ --atg-ap-contact-top: 13px; /* Linie -> erste Zeile */ /* Schriftgroesse der Kontaktzeile. Sie ist 15 px, wird aber knapp kleiner, wenn die laengste Adresse "p.vanderstok@autogentechnik.at" sonst umbrechen muesste (Karte bei 1024 px oder mit klassischer Bildlaufleiste). --atg-ap-contact-fit ist das Verhaeltnis Textbreite zu Schriftgroesse dieser Adresse, gemessen: 228 px bei 15 px. */ --atg-ap-contact-fs: 15px; --atg-ap-contact-fs-min: 13px; --atg-ap-contact-fit: 15.2; --atg-ap-contact-lh: 1.4; --atg-ap-contact-gap: 8px; /* zwischen den Zeilen */ --atg-ap-contact-color: var(--atg-on-dark); /* Text hinter dem Link, z. B. "(Zentrale)" */ --atg-ap-contact-note: var(--atg-on-dark-soft); --atg-ap-contact-note-fs: 13px; --atg-ap-contact-hover: var(--atg-accent); --atg-ap-icon: 14px; --atg-ap-icon-gap: 10px; /* Symbol -> Text */ --atg-ap-icon-color: var(--atg-accent); /* Die drei Symbole (Telefon, Mobil, E-Mail) als Umrisszeichnung. Sie werden als Maske verwendet, die Farbe kommt aus --atg-ap-icon-color. Zeichnungen aus dem Symbolsatz Lucide (ISC-Lizenz). */ --atg-ap-icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --atg-ap-icon-mobil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); --atg-ap-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); /* Hover: Karte hebt sich, Foto zoomt leicht */ --atg-ap-lift: 3px; --atg-ap-zoom: 1.04; --atg-ap-hover-time: var(--atg-transition); --atg-ap-zoom-time: .6s ease; /* Einflug beim ersten Sichtbarwerden (js/effekte.js). Die Karten kommen von der Seite, auf der sie stehen - im Slider alle von rechts. Versatz = Verzoegerung je Staffel. */ --atg-ap-fly-shift: 64px; --atg-ap-fly-time: .8s; --atg-ap-fly-ease: cubic-bezier(.22, 1, .36, 1); --atg-ap-fly-stagger: .14s; /* Slider unter 1024px: Luft der Spur fuer den Schatten (wie bei allen Slidern mit Schatten), Bedienelemente wie bei der Produktvorschau - dunkle Variante */ --atg-ap-track-top: var(--atg-slider-hell-track-top); --atg-ap-track-bottom: var(--atg-slider-hell-track-bottom); --atg-ap-nav-space: var(--atg-slider-hell-nav-space); --atg-ap-nav-gap: 24px; --atg-ap-bar-h: var(--atg-pv-bar-h); --atg-ap-bar-track: var(--atg-pv-bar-track); --atg-ap-round: var(--atg-pv-btn); --atg-ap-round-gap: var(--atg-pv-btn-gap); --atg-ap-round-fs: var(--atg-pv-btn-fs); --atg-ap-round-line: var(--atg-pv-btn-border); --atg-ap-hint-time: var(--atg-pv-hint-time); --atg-ap-hint-shift: var(--atg-pv-hint-shift); } /* 1024 bis 1439px - Zitat weiter rechts neben dem Text; Karten 2 x 2, Foto links */ @media (max-width: 1439.98px) { :root { --atg-zi-col-gap: 50px; --atg-zi-head-gap: 22px; --atg-zi-top: 9px; --atg-zi-pad-top: 42px; --atg-zi-pad-x: 42px; --atg-zi-pad-right: 36px; --atg-zi-pad-bottom: 30px; --atg-zi-knob: 54px; --atg-zi-knob-fs: 22px; --atg-zi-quote-fs: 21px; --atg-zi-rule-gap: 27px; --atg-zi-wide-pad-right: 36px; --atg-zi-divider-gap: 32px; --atg-ap-cols: 2; --atg-ap-photo-w: 36%; /* Text steht neben dem Foto senkrecht mittig - hier wird keine zweite Zeile freigehalten */ --atg-ap-role-lines: 1; --atg-ap-pad-x: 26px; --atg-ap-pad-right: 20px; } } /* 768 bis 1023px - alles untereinander; Karten als Slider mit zwei Karten, Foto quadratisch */ @media (max-width: 1023.98px) { :root { --atg-zi-cols: 1fr; --atg-zi-top: 0px; --atg-zi-head-gap: 20px; --atg-zi-row-gap: 56px; --atg-zi-pad-top: 34px; --atg-zi-pad-bottom: 24px; --atg-zi-pad-x: 40px; --atg-zi-pad-right: 34px; --atg-zi-knob: 52px; --atg-zi-knob-x: 40px; --atg-zi-quote-fs: 21px; --atg-zi-rule-gap: 20px; --atg-zi-foot-gap: 16px; --atg-ap-cols: 2; --atg-ap-gap: 20px; --atg-ap-peek: 40px; --atg-ap-card-max: 460px; --atg-ap-photo-ratio: 1 / 1; --atg-ap-photo-pos: 50% 8%; --atg-ap-role-lines: 2; --atg-ap-pad-top: 19px; --atg-ap-pad-x: 20px; --atg-ap-pad-right: 20px; --atg-ap-name-fs: 21px; } } /* bis 767px - eine Karte im Slider, Foto wieder 4:5 */ @media (max-width: 767.98px) { :root { --atg-zi-head-gap: 18px; --atg-zi-row-gap: 50px; --atg-zi-solo-gap: 44px; --atg-zi-pad-top: 30px; --atg-zi-pad-x: 28px; --atg-zi-pad-right: 22px; --atg-zi-pad-bottom: 20px; --atg-zi-knob: 46px; --atg-zi-knob-x: 26px; --atg-zi-knob-fs: 19px; --atg-zi-quote-fs: 18px; --atg-zi-rule-gap: 16px; --atg-zi-foot-gap: 14px; --atg-zi-portrait: 50px; --atg-ap-cols: 1; --atg-ap-gap: 16px; --atg-ap-peek: 36px; --atg-ap-photo-ratio: 4 / 5; --atg-ap-photo-pos: 50% 0%; --atg-ap-pad-top: 18px; --atg-ap-pad-x: 18px; --atg-ap-pad-right: 18px; --atg-ap-name-fs: 20px; } } /* unter 380px - Anschnitt und Kontaktzeile noch etwas kleiner */ @media (max-width: 379.98px) { :root { --atg-zi-pad-x: 22px; --atg-zi-pad-right: 18px; --atg-ap-peek: 28px; --atg-ap-contact-fs: 14.5px; } } /* ============================================================ SEITE "KONTAKT / ANFAHRT" - LAYOUT 34 UND 35 Stand: 28.09.2026 - neu Werte fuer >= 1440px; die drei Bloecke darunter setzen sie fuer die schmaleren Breiten neu. Der Regelsatz steht in css/kontakt.css und enthaelt keine einzige Zahl. 34 Kontaktkarte .atg-kontakt 3-Spalten-Container: helles Band, weisse Karte mit drei Bereichen (Anschrift | Direkter Kontakt | Oeffnungszeiten). 35 Anfahrt .atg-anfahrt 1-Spalten-Container mit einem HTML-Element: Petrol-Band, Google-Maps-Karte, Glaskarte "Ihr Ziel". Praefix --atg-ko-*. Band, Bandluft, Lichtflaechen und die Ueberschrift "Anfahrt" kommen von der Seite "Partner", Karte, Schatten und Kante links von der Zitatkarte - die Seiten sehen damit gleich aus, ohne dass eine Zahl doppelt steht. ============================================================ */ :root { /* ---------- Baender ---------- */ --atg-ko-light: var(--atg-pa-light); --atg-ko-dark: var(--atg-pa-dark); --atg-ko-glow: var(--atg-pa-glow-dark); --atg-ko-band-top: var(--atg-pa-band-top); --atg-ko-band-bottom: var(--atg-pa-band-bottom); /* Unter der Kontaktkarte dieselbe Luft wie oben im Band (80 / 64 / 56 / 48) - wie unter der Zitatkarte. */ --atg-ko-light-bottom: var(--atg-pa-band-top); /* Einleitungssatz (Layout 29) -> Oberkante der Karte */ --atg-ko-card-gap: 48px; /* ---------- 34 Kontaktkarte ---------- */ --atg-ko-card-bg: var(--atg-white); --atg-ko-card-radius: var(--atg-zi-radius); --atg-ko-card-shadow: var(--atg-zi-shadow); --atg-ko-bar: var(--atg-zi-bar); --atg-ko-bar-inset: var(--atg-zi-bar-inset); --atg-ko-bar-color: var(--atg-zi-bar-color); --atg-ko-divider: var(--atg-line); /* Aufteilung der drei Bereiche; die Oeffnungszeiten brauchen am meisten Platz. */ --atg-ko-cols: 1fr 1fr 1.2fr; --atg-ko-pad-y: 36px; --atg-ko-pad-x: 40px; /* Kopfzeile je Bereich: Symbol + Versalien, Feld "Header" des Textelements */ --atg-ko-kicker-fs: 12px; --atg-ko-kicker-track: .18em; --atg-ko-kicker-color: var(--atg-accent-deep); --atg-ko-kicker-icon: 16px; --atg-ko-kicker-igap: 8px; --atg-ko-kicker-gap: 18px; /* Kopfzeile -> Inhalt */ /* Anschrift */ --atg-ko-firm-fs: 22px; --atg-ko-firm-color: var(--atg-h1); --atg-ko-firm-gap: 8px; --atg-ko-text-fs: 18px; --atg-ko-text-lh: 1.6; --atg-ko-text: var(--atg-ink); --atg-ko-text-soft: var(--atg-text-soft); /* Telefon und E-Mail */ --atg-ko-row-gap: 18px; --atg-ko-circle: 44px; --atg-ko-circle-bg: var(--atg-ko-light); --atg-ko-circle-hover: var(--atg-accent); --atg-ko-row-icon: 20px; --atg-ko-row-igap: 14px; --atg-ko-label-fs: 12px; --atg-ko-label-track: .16em; --atg-ko-label-gap: 2px; /* Bezeichnung -> Wert */ --atg-ko-label-color: var(--atg-h4); --atg-ko-value-fs: 18px; --atg-ko-value-color: var(--atg-ink); --atg-ko-value-hover: var(--atg-accent-deep); /* Oeffnungszeiten */ --atg-ko-sub-fs: 19px; --atg-ko-sub-gap: 12px; /* Unterueberschrift -> Liste */ --atg-ko-sub-top: 4px; /* Kopfzeile -> "Geschaeft" */ --atg-ko-group-gap: 22px; /* Hinweis -> "Buero" */ --atg-ko-hrow-pad: 11px; --atg-ko-hlabel-fs: 12.5px; --atg-ko-hvalue-fs: 16px; --atg-ko-hint-fs: 14.5px; --atg-ko-hint-gap: 12px; --atg-ko-hours-gap: 36px; /* Geschaeft | Buero, 768-1023 */ /* ---------- 35 Anfahrt ---------- */ --atg-ko-head-fs: var(--atg-pa-head-fs); --atg-ko-head-gap: var(--atg-pa-head-gap); --atg-ko-map-h: 540px; --atg-ko-map-radius: var(--atg-zi-radius); /* Flaeche, solange die Karte noch nicht geladen ist */ --atg-ko-map-bg: var(--atg-ko-light); --atg-ko-map-grid: var(--atg-line); --atg-ko-map-grid-step: 64px; /* Glaskarte "Ihr Ziel" - ab 1024px oben rechts auf der Karte. Dunkles Glas statt des hellen der Partnerseite: auf der hellen Landkarte waere weisse Schrift auf hellem Glas nicht lesbar. */ --atg-ko-glass-w: 380px; --atg-ko-glass-off: 32px; --atg-ko-glass-pad-y: 30px; --atg-ko-glass-pad-x: 32px; --atg-ko-glass-radius: 12px; --atg-ko-glass-bg: color-mix(in srgb, var(--atg-band-dark) 90%, transparent); --atg-ko-glass-blur: 14px; --atg-ko-glass-line: rgba(255, 255, 255, .18); --atg-ko-glass-shadow: 0 18px 40px rgba(6, 22, 30, .30); /* Unter 1024px unter der Karte angedockt: 768-1023 Adresse links, Knoepfe rechts in fester Breite; bis 767 alles untereinander, dann mit Luft ueber den Knoepfen. */ --atg-ko-dock-bg: color-mix(in srgb, var(--atg-petrol) 55%, transparent); --atg-ko-dock-btn-w: 240px; --atg-ko-dock-gap: 32px; --atg-ko-dock-btn-gap: 0px; --atg-ko-g-kicker-color: var(--atg-accent); --atg-ko-g-name-fs: 24px; --atg-ko-g-name-gap: 12px; /* Kicker -> Firma */ --atg-ko-g-addr-fs: 17px; --atg-ko-g-addr-gap: 6px; /* Firma -> Adresse */ --atg-ko-g-addr: var(--atg-on-dark-soft); --atg-ko-g-rule: var(--atg-rule-dark); --atg-ko-g-rule-gap: 22px; /* Knopf "Route planen" - wie "Zu unserem Partner" */ --atg-ko-btn-h: var(--atg-pa-btn-h); --atg-ko-btn-pad: var(--atg-pa-btn-pad); --atg-ko-btn-fs: var(--atg-pa-btn-fs); --atg-ko-btn-bg: var(--atg-pa-btn-bg); --atg-ko-btn-fg: var(--atg-pa-btn-fg); --atg-ko-btn-hover: var(--atg-pa-btn-hover); --atg-ko-btn-glow: var(--atg-pa-btn-glow); --atg-ko-btn-icon: 18px; --atg-ko-btn-igap: 10px; /* Link "In Google Maps oeffnen" */ --atg-ko-link-fs: 15px; --atg-ko-link-gap: 14px; /* Knopf -> Link */ --atg-ko-link-icon: 15px; --atg-ko-link: var(--atg-accent); --atg-ko-link-hover: var(--atg-on-dark); /* Hinweis "Karte laden", solange keine Zustimmung da ist */ --atg-ko-veil: color-mix(in srgb, var(--atg-petrol) 55%, transparent); --atg-ko-note-bg: var(--atg-white); --atg-ko-note-max: 420px; --atg-ko-note-pad-y: 28px; --atg-ko-note-pad-x: 32px; --atg-ko-note-radius: 8px; --atg-ko-note-icon: 30px; --atg-ko-note-title-fs: 19px; --atg-ko-note-fs: 14.5px; --atg-ko-note-gap: 10px; --atg-ko-note-btn-gap: 18px; --atg-ko-note-btn-h: var(--atg-pe-btn-h); --atg-ko-note-btn-pad: var(--atg-pe-btn-pad); --atg-ko-note-btn-fs: var(--atg-pe-btn-fs); --atg-ko-note-btn-bg: var(--atg-pe-btn-bg); --atg-ko-note-btn-hover: var(--atg-pe-btn-hover); --atg-ko-note-margin: 0px; /* Abstand zum Kartenrand, bis 767 */ /* Symbole (Lucide, ISC-Lizenz), als Maske - die Farbe kommt aus background-color. Telefon und E-Mail sind dieselben wie bei den Ansprechpartnern. */ --atg-ko-icon-tel: var(--atg-ap-icon-tel); --atg-ko-icon-mail: var(--atg-ap-icon-mail); --atg-ko-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); --atg-ko-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); --atg-ko-icon-nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 19-9-9 19-2-8-8-2z'/%3E%3C/svg%3E"); --atg-ko-icon-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); } /* 1024 bis 1439px - Anordnung wie ab 1440, nur enger */ @media (max-width: 1439.98px) { :root { /* Anschrift schmaler, Kontakt breiter: sonst bricht "office@autogentechnik.at" bei 1024px mitten im Wort um (an der Live-Vorschau gesehen, 28.09.2026). */ --atg-ko-cols: .9fr 1.15fr 1.2fr; --atg-ko-card-gap: 40px; --atg-ko-pad-y: 32px; --atg-ko-pad-x: 32px; --atg-ko-map-h: 480px; --atg-ko-glass-w: 340px; --atg-ko-glass-off: 24px; --atg-ko-glass-pad-y: 26px; --atg-ko-glass-pad-x: 28px; --atg-ko-g-name-fs: 22px; } } /* 768 bis 1023px - Anschrift | Kontakt, darunter die Oeffnungszeiten ueber die volle Breite; Glaskarte unter der Landkarte angedockt */ @media (max-width: 1023.98px) { :root { --atg-ko-card-gap: 36px; --atg-ko-cols: 1fr 1fr; --atg-ko-pad-y: 30px; --atg-ko-pad-x: 30px; --atg-ko-map-h: 400px; --atg-ko-glass-pad-y: 24px; --atg-ko-glass-pad-x: 28px; --atg-ko-g-name-fs: 20px; --atg-ko-g-name-gap: 6px; --atg-ko-g-addr-fs: 16px; } } /* bis 767px - alles untereinander */ @media (max-width: 767.98px) { :root { --atg-ko-card-gap: 28px; --atg-ko-cols: 1fr; --atg-ko-pad-y: 26px; --atg-ko-pad-x: 22px; --atg-ko-text-fs: 17px; --atg-ko-value-fs: 17px; --atg-ko-map-h: 320px; --atg-ko-glass-pad-y: 22px; --atg-ko-glass-pad-x: 20px; --atg-ko-dock-btn-gap: 18px; --atg-ko-note-pad-y: 22px; --atg-ko-note-pad-x: 20px; --atg-ko-note-margin: 16px; } } /* unter 380px - Seitenrand und Innenabstand noch etwas kleiner */ @media (max-width: 379.98px) { :root { --atg-ko-pad-x: 18px; --atg-ko-value-fs: 16px; --atg-ko-circle: 40px; --atg-ko-row-igap: 12px; } } /* ============================================================ KOPFZEILE AM HANDY - VIER SCHALTFLAECHEN (29.09.2026) Unter 768px stehen neben dem Logo: Feedback (Sprechblase), Mail, Telefon, Burger. Mit den alten Massen (Logo 46 hoch, Symbole 44, Abstand 8) braucht die Zeile 375px und passt erst ab rund 420px Fensterbreite. Deshalb laufen die drei Werte zwischen 380 und 767px gleitend mit. Die Konstanten sind ausgerechnet: Steigung = (oben - unten) / 387, und 387 ist der Abstand zwischen 380 und 767. Logo 40 -> 46 Symbol 40 -> 44 Abstand 6 -> 8 Wer einen Wert aendert, aendert BEIDE Enden. Unter 380px feste Werte. Gemessen bei 360px: 16 + Logo 152 + Symbole 4 x 38 + 3 x 4 + 16 = 348, bleiben 12px Luft. Unter rund 350px reicht es nicht mehr. ============================================================ */ @media (max-width: 767.98px) { :root { --atg-hb-logo-h: clamp(40px, 1.5504vw + 34.109px, 46px); --atg-hb-icon: clamp(40px, 1.0336vw + 36.072px, 44px); --atg-hb-icon-gap: clamp( 6px, 0.5168vw + 4.036px, 8px); } } @media (max-width: 379.98px) { :root { --atg-hb-logo-h: 40px; --atg-hb-icon: 38px; --atg-hb-icon-gap: 4px; } } /* ============================================================ FEEDBACK-FORMULAR - LAYOUT 36 (29.09.2026) Seite "Feedback zur Website" (ID 159, /feedback). Das Formular kommt aus ext:form, der Regelsatz steht in css/feedback.css und enthaelt keine Zahl. Praefix --atg-fb-*. Band, Karte und Kante links uebernehmen die Werte der Kontaktkarte (Layout 34) und zeigen dorthin. Die Werte hier gelten ab 1440px; die Bloecke am Ende setzen sie fuer die schmaleren Breiten neu. ============================================================ */ :root { /* Band und Karte */ --atg-fb-band: var(--atg-pa-light); --atg-fb-band-top: var(--atg-pa-band-top); --atg-fb-band-bottom: var(--atg-pa-band-bottom); --atg-fb-card-gap: var(--atg-ko-card-gap); /* Einleitung -> Karte */ --atg-fb-card-bg: var(--atg-white); --atg-fb-card-radius: var(--atg-ko-card-radius); --atg-fb-card-shadow: var(--atg-ko-card-shadow); --atg-fb-bar: var(--atg-ko-bar); --atg-fb-bar-inset: var(--atg-ko-bar-inset); --atg-fb-bar-color: var(--atg-ko-bar-color); --atg-fb-card-max: 760px; --atg-fb-pad-y: 40px; --atg-fb-pad-x: 44px; /* Felder */ --atg-fb-field-gap: 28px; /* Feld -> naechstes Feld */ --atg-fb-label-fs: 17px; --atg-fb-label-lh: 1.35; --atg-fb-label-gap: 8px; /* Beschriftung -> Feld */ --atg-fb-label-color: var(--atg-ink); --atg-fb-req-color: var(--atg-accent-deep); --atg-fb-req-gap: 3px; --atg-fb-input-h: 48px; --atg-fb-input-pad-x: 14px; --atg-fb-input-pad-y: 12px; /* nur Textfeld */ --atg-fb-input-fs: 17px; --atg-fb-input-lh: 1.5; --atg-fb-input-bw: 1px; /* Rand der Eingabefelder: 3,42 : 1 auf Weiss. --atg-muted (#8A979E) hat nur 3,0 und liegt damit genau auf der Grenze fuer Bedienelemente - deshalb eine Stufe dunkler. */ --atg-fb-input-border: #7F8D94; --atg-fb-input-radius: var(--atg-radius); --atg-fb-area-h: 160px; --atg-fb-focus: var(--atg-accent-deep); --atg-fb-focus-ring: 0 0 0 3px rgba(23, 112, 140, .2); --atg-fb-outline: 2px; /* Tastatur-Rahmen um den Stern */ --atg-fb-outline-off: 2px; /* Sterne */ --atg-fb-star: 40px; --atg-fb-star-gap: 6px; /* als Innenabstand, damit die Luft zwischen zwei Sternen zum Stern gehoert und die Vorschau nicht flackert */ --atg-fb-star-empty: var(--atg-h4); /* 5,3 : 1 */ --atg-fb-star-full: var(--atg-accent-deep); /* 5,6 : 1 */ --atg-fb-star-hover: var(--atg-accent); --atg-fb-star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2.9l2.8 5.68 6.27.91-4.54 4.42 1.07 6.24L12 17.2l-5.6 2.95 1.07-6.24L2.93 9.49l6.27-.91z'/%3E%3C/svg%3E"); --atg-fb-star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2.9l2.8 5.68 6.27.91-4.54 4.42 1.07 6.24L12 17.2l-5.6 2.95 1.07-6.24L2.93 9.49l6.27-.91z'/%3E%3C/svg%3E"); /* Checkbox Datenschutz */ --atg-fb-check: 22px; --atg-fb-check-top: 1px; /* Kasten mittig zur ersten Zeile */ --atg-fb-check-gap: 12px; --atg-fb-check-fs: 16px; --atg-fb-check-lh: 1.5; --atg-fb-check-color: var(--atg-text-soft); /* Knopf - Form und Farben wie "Persoenlich erreichbar" */ --atg-fb-btn-gap: 36px; /* Checkbox -> Knopf */ --atg-fb-btn-h: var(--atg-pe-btn-h); --atg-fb-btn-pad: var(--atg-pe-btn-pad); --atg-fb-btn-fs: var(--atg-pe-btn-fs); --atg-fb-btn-bg: var(--atg-pe-btn-bg); --atg-fb-btn-hover: var(--atg-pe-btn-hover); --atg-fb-btn-radius: var(--atg-radius); --atg-fb-btn-width: auto; --atg-fb-btn-lh: 1; /* Link im Einleitungstext */ --atg-fb-link: var(--atg-accent-deep); /* Fehlermeldungen. Die einzige rote Farbe der Seite - das Logo hat keine. 6,6 : 1 auf Weiss; das Rot des Themes (#D4403A) haette bei 14px nur 4,6. */ --atg-fb-error: #B42318; --atg-fb-error-gap: 8px; /* Feld -> Meldung */ --atg-fb-error-fs: 15px; /* Nach dem Absenden springt die Seite zum Formular (#). So viel Luft bleibt dann unter dem klebenden Kopf. */ --atg-fb-anchor-gap: 24px; /* Danke-Meldung nach dem Absenden */ --atg-fb-done-fs: 19px; --atg-fb-done-lh: 1.5; /* nur fuer Screenreader sichtbarer Text */ --atg-fb-sr: 1px; --atg-fb-sr-clip: inset(50%); } /* 1024-1439px - Innenabstand gleitend, Steigung / 416 */ @media (max-width: 1439.98px) { :root { --atg-fb-pad-y: clamp(36px, 0.96154vw + 26.154px, 40px); --atg-fb-pad-x: clamp(38px, 1.44231vw + 23.231px, 44px); } } /* 768-1023px */ @media (max-width: 1023.98px) { :root { --atg-fb-pad-y: 32px; --atg-fb-pad-x: 34px; --atg-fb-field-gap: 26px; --atg-fb-star: 38px; } } /* bis 767px - Karte ueber die volle Breite, Knopf ebenso */ @media (max-width: 767.98px) { :root { --atg-fb-card-max: none; --atg-fb-pad-y: 26px; --atg-fb-pad-x: 24px; --atg-fb-field-gap: 24px; --atg-fb-label-fs: 16px; --atg-fb-input-fs: 16px; /* unter 16px zoomt iOS beim Tippen */ --atg-fb-area-h: 140px; --atg-fb-star: 36px; --atg-fb-btn-gap: 28px; --atg-fb-btn-width: 100%; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-fb-pad-y: 22px; --atg-fb-pad-x: 20px; --atg-fb-star: 34px; --atg-fb-star-gap: 4px; } } /* ============================================================ SEITE "DOWNLOAD CENTER" - LAYOUT 37 UND 38 ============================================================ 37 Katalog .atg-katalog (--atg-dc-*) Weisse Karte, links ein Petrol-Feld mit dem Cover, das oben herausragt. Rechts Kicker (Feld "Subheader"), Titel, Beschreibung, Angabenzeile (Aufzaehlung im Feld "Text") und Knopf. 38 Downloads .atg-downloads (--atg-dl-*) Helle Glaskarten wie die Partnerkarten, vier je Reihe, unter 1024px ein Slider je Card Group. Beide stehen auf demselben Off-white wie die Einleitung (Layout 29), damit die Seite ein durchgehendes Band ist. Wo ein Wert anderswo schon existiert, zeigt das Token dorthin. Design-Entscheidung vom 30.09.2026. */ :root { /* ---------- gemeinsam ---------- */ --atg-dc-band: var(--atg-pa-light); --atg-dc-band-top: var(--atg-pa-band-top); --atg-dc-band-bottom: var(--atg-pa-band-bottom); /* Unterstrich der Seitenueberschrift -> Oberkante Karte. Seit 21.10.2026 (2. Runde) eigener, kleinerer Wert statt --atg-pa-head-gap (44) plus Ueberstand des Covers: die Seite soll moeglichst frueh die ersten Download-Karten anreissen. */ --atg-dc-head-gap: 32px; /* Katalogkarte -> Blockueberschrift der Downloads */ --atg-dc-after: 72px; /* ---------- 37 Katalog: Karten ---------- Seit 04.11.2026 zwei Kataloge nebeneinander (Produktkatalog und ATG Online Katalog, Vorschlag A): zwei gleich grosse Karten im Raster. Je Karte links das Petrol-Feld mit dem herausragenden Cover, rechts Kicker, Titel, eine kleine Angabenzeile und der Knopf. Bis 767px stehen die Karten weiterhin nebeneinander, dann mit dem Feld OBEN. */ --atg-dc-cols: 2; --atg-dc-gap: var(--atg-pk-gap); --atg-dc-radius: 16px; --atg-dc-bg: var(--atg-white); --atg-dc-shadow: 0 14px 34px rgba(16, 40, 52, .10); --atg-dc-shadow-hover: 0 22px 48px rgba(16, 40, 52, .16); --atg-dc-lift: var(--atg-pa-lift); --atg-dc-pad-y: 28px; --atg-dc-pad-x: 36px; /* Mindesthoehe: das Cover fuellt das Feld bis auf den Rand, die Karte bestimmt damit die Groesse des Titelbilds (240 -> rund 152 x 215, durch die Feldbreite begrenzt). */ --atg-dc-min-h: 240px; /* Petrol-Feld mit Cover. Das Cover ragt oben um --atg-dc-overhang aus der Karte und wird mit object-fit: contain in das Feld (seitlich und unten abzueglich --atg-dc-cover-inset) eingepasst, oben angehaengt. Bis 767px steht das Feld oben, seine Hoehe ist dann --atg-dc-panel-h. */ --atg-dc-panel-w: 200px; --atg-dc-panel-h: auto; --atg-dc-panel-bg: var(--atg-band-dark); --atg-dc-panel-glow: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--atg-accent-deep) 70%, transparent), transparent 72%), radial-gradient(ellipse 30% 50% at 0% 70%, color-mix(in srgb, var(--atg-accent) 22%, transparent), transparent 72%), radial-gradient(ellipse 30% 50% at 100% 70%, color-mix(in srgb, var(--atg-accent-deep) 55%, transparent), transparent 72%); --atg-dc-overhang: 24px; --atg-dc-cover-inset: 24px; /* drop-shadow statt box-shadow: folgt dem eingepassten Bild, nicht dem Kasten des img */ --atg-dc-cover-shadow: drop-shadow(0 14px 22px rgba(0, 0, 0, .40)); --atg-dc-cover-lift: 4px; /* Text */ --atg-dc-kicker-fs: 13px; --atg-dc-kicker-track: .16em; --atg-dc-kicker-color: var(--atg-accent-deep); --atg-dc-kicker-gap: 8px; --atg-dc-title-fs: 24px; --atg-dc-title-gap: 10px; /* kleine Angabenzeile: Aufzaehlung ODER Absatz im Feld "Text". Bei der Aufzaehlung werden die fetten Beschriftungen ausgeblendet und die Punkte mit " · " verbunden: "PDF · 17,6 MB · 162 Seiten". Bis 1023px ausgeblendet. */ --atg-dc-mini-fs: 14px; --atg-dc-mini-color: var(--atg-text-soft); --atg-dc-mini-sep: " · "; --atg-dc-btn-gap: 18px; /* Angabenzeile -> Knopf */ /* Knopf */ --atg-dc-btn-h: 48px; --atg-dc-btn-pad: 26px; --atg-dc-btn-fs: 16px; --atg-dc-btn-bg: var(--atg-accent-deep); --atg-dc-btn-fg: var(--atg-white); --atg-dc-btn-hover: var(--atg-petrol); /* Fuehrt der Knopf NICHT auf ein PDF (Online Katalog), traegt er statt des Download-Symbols den Pfeil schraeg nach oben - dieselbe Zeichnung wie beim Onlineshop. */ --atg-dc-ico-ext: var(--atg-os-ico-ext); --atg-dc-ico-ext-size: 14px; --atg-dc-ico-ext-shift: 2px; /* Download-Symbol in beiden Knopfarten (--atg-ico-download) */ --atg-dc-icon-fs: 13px; --atg-dc-icon-gap: 12px; --atg-dc-icon-shift: 2px; /* ---------- 38 Downloads ---------- */ --atg-dl-head-fs: var(--atg-pa-head-fs); /* Blockueberschrift -> Karten. Seit 21.10.2026 (2. Runde) kleiner als --atg-pa-head-gap (44), damit die Karten frueher ins Bild kommen. */ --atg-dl-head-gap: 28px; --atg-dl-cols: 4; --atg-dl-gap: var(--atg-pk-gap); --atg-dl-group-gap: var(--atg-pk-gap); /* Card Group -> naechste Card Group */ /* ... wenn die naechste Gruppe eine eigene Ueberschrift hat */ --atg-dl-group-head-gap: var(--atg-dc-after); /* Luft ueber der Gruppe, wenn das Kategorie-Menue dorthin springt (die Hoehe des klebenden Kopfes zieht schon scroll-padding-top am html ab) */ --atg-dl-anchor-gap: 32px; --atg-dl-peek: 0px; --atg-dl-card-max: none; --atg-dl-pad: 20px; --atg-dl-radius: var(--atg-pk-radius); --atg-dl-glass-bg: var(--atg-pk-glass-bg); --atg-dl-glass-line: var(--atg-pk-glass-line); --atg-dl-glass-blur: var(--atg-pk-glass-blur); --atg-dl-shadow: var(--atg-pk-shadow); --atg-dl-shadow-hover: var(--atg-pk-shadow-hover); --atg-dl-lift: var(--atg-pk-lift); /* Bildrahmen. Seit 12.10.2026 fuellt das Cover den Rahmen ganz aus (vorher: Cover mit fester Breite auf weisser Flaeche, links und rechts Leerraum). Der Rahmen ist so breit wie die Karte innen und hat ein festes Seitenverhaeltnis 3:4 - die Hoehe laeuft mit jeder Kartenbreite von selbst mit. Ein Cover im A4-Format (1 : 1,414) ist etwas schmaler als 3:4 und verliert rund 6 Prozent der Hoehe. Der Schnitt faellt mit "center top" ganz auf die UNTERE Kante, der Titel oben auf dem Cover bleibt stehen - dieselbe Regel wie bei den News-Bildern (--atg-nw-img-ratio). Ein Querformat wuerde links und rechts beschnitten. */ --atg-dl-img-ratio: 3 / 4; --atg-dl-img-pos: center top; /* Hoehe des Bildrahmens. Der Rahmen umschliesst das Bild eng (3:4), seine Breite folgt aus dieser Hoehe; mittig in der Karte, links und rechts steht die Glaskarte. Vorher (12.10.) war der Rahmen kartenbreit und die Karten 489px hoch. Stand 21.10.2026, 2. Runde. */ --atg-dl-shot-h: 220px; --atg-dl-shot-radius: var(--atg-pk-logo-radius); --atg-dl-shot-line: var(--atg-line); --atg-dl-shot-bg: var(--atg-white); --atg-dl-title-fs: 19px; /* zwei Zeilen Platz, damit Karten verschiedener Gruppen gleich hoch sind (jede Gruppe ist ein eigenes Raster) */ --atg-dl-title-min: 2.6em; --atg-dl-title-gap: 18px; /* Bildflaeche -> Titel */ --atg-dl-btn-gap: 20px; /* Titel -> Knopf (mindestens) */ /* Umriss-Knopf wie bei den Partnerkarten */ --atg-dl-btn-h: var(--atg-pk-btn-h); --atg-dl-btn-pad: var(--atg-pk-btn-pad); --atg-dl-btn-fs: var(--atg-pk-btn-fs); --atg-dl-btn-fg: var(--atg-pk-btn-fg); --atg-dl-btn-line: var(--atg-pk-btn-line); --atg-dl-btn-hover: var(--atg-pk-btn-hover); --atg-dl-btn-hover-fg: var(--atg-pk-btn-hover-fg); /* Slider: alles aus "Slider auf hellem Band" bzw. von den Partnerkarten - Pfeile, Balken und Knoepfe sehen dadurch genau so aus wie dort. */ --atg-dl-track-top: var(--atg-pk-track-top); --atg-dl-track-bottom: var(--atg-pk-track-bottom); --atg-dl-nav-space: var(--atg-pk-nav-space); --atg-dl-nav-gap: var(--atg-pk-nav-gap); --atg-dl-bar-h: var(--atg-pk-bar-h); --atg-dl-bar-track: var(--atg-pk-bar-track); --atg-dl-round: var(--atg-pk-round); --atg-dl-round-gap: var(--atg-pk-round-gap); --atg-dl-round-fs: var(--atg-pk-round-fs); --atg-dl-round-bg: var(--atg-pk-round-bg); --atg-dl-round-line: var(--atg-pk-round-line); --atg-dl-round-fg: var(--atg-pk-round-fg); --atg-dl-round-shadow: var(--atg-pk-round-shadow); --atg-dl-hint-time: var(--atg-pk-hint-time); --atg-dl-hint-shift: var(--atg-pk-hint-shift); } /* 1024 bis 1439px - Anordnung wie ab 1440, Feld gleitend */ @media (max-width: 1439.98px) { :root { --atg-dc-after: 64px; --atg-dc-pad-y: 24px; --atg-dc-pad-x: 28px; --atg-dc-panel-w: clamp(150px, 12.01923vw + 26.923px, 200px); --atg-dc-min-h: 220px; --atg-dc-cover-inset: 20px; --atg-dc-overhang: 22px; --atg-dc-title-fs: 22px; --atg-dl-shot-h: 200px; } } /* 768 bis 1023px - Katalogkarten nebeneinander, ohne Angabenzeile; Downloads als Slider mit zwei Karten */ @media (max-width: 1023.98px) { :root { --atg-dc-after: 64px; --atg-dc-head-gap: 28px; --atg-dc-gap: 20px; --atg-dc-pad-y: 20px; --atg-dc-pad-x: 22px; --atg-dc-panel-w: 130px; --atg-dc-min-h: auto; --atg-dc-cover-inset: 14px; --atg-dc-overhang: 18px; --atg-dc-title-fs: 19px; --atg-dc-btn-gap: 14px; --atg-dc-btn-h: 44px; --atg-dc-btn-pad: 20px; --atg-dc-btn-fs: 15px; --atg-dl-cols: 2; --atg-dl-gap: 20px; --atg-dl-group-gap: 40px; --atg-dl-peek: 60px; --atg-dl-card-max: 460px; --atg-dl-title-fs: 18px; --atg-dl-shot-h: 240px; --atg-dl-head-gap: 24px; } } /* bis 767px - Katalogkarten weiter nebeneinander, Feld oben, Knopf ueber die volle Kartenbreite; Downloads Slider mit einer Karte */ @media (max-width: 767.98px) { :root { --atg-dc-after: 56px; --atg-dc-head-gap: 24px; --atg-dc-gap: 12px; --atg-dc-pad-y: 14px; --atg-dc-pad-x: 14px; --atg-dc-panel-h: 150px; --atg-dc-cover-inset: 12px; --atg-dc-overhang: 16px; --atg-dc-title-fs: 16px; --atg-dc-kicker-fs: 10px; --atg-dc-kicker-track: .12em; --atg-dc-kicker-gap: 6px; --atg-dc-title-gap: 12px; --atg-dc-btn-h: 40px; --atg-dc-btn-pad: 12px; --atg-dc-btn-fs: 14px; --atg-dl-cols: 1; --atg-dl-gap: 16px; --atg-dl-peek: 52px; --atg-dl-anchor-gap: 24px; --atg-dl-head-gap: 20px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-dc-panel-h: 136px; --atg-dc-title-fs: 15px; --atg-dl-peek: 44px; --atg-dl-shot-h: 220px; } } /* ============================================================ FUSSZEILE - SOZIALE NETZWERKE Vier verlinkte Ringe ueber der WKO-Zeile, mittig. Die Symbole sind einzelne SVG-Dateien auf dem Server unter fileadmin/user_upload/icons/. Sie werden als MASKE verwendet (mask-image), nicht als Bild: dadurch bestimmt das CSS die Farbe, alle vier sind gleich grau, und beim Darueberfahren wechseln sie mit dem Ring gemeinsam auf Tuerkis - egal in welcher Farbe die Datei selbst vorliegt. Die Dateien gehoeren nicht in templates/ und liegen deshalb auch im Repo unter Icons/, nicht unter templates/. ============================================================ */ :root { /* Masken. Pfad ist absolut ab dem Webstamm, weil tokens.css zwei Ebenen tiefer liegt als user_upload. */ --atg-so-linkedin: url("/fileadmin/user_upload/icons/social-linkedin.svg"); --atg-so-youtube: url("/fileadmin/user_upload/icons/social-youtube.svg"); --atg-so-facebook: url("/fileadmin/user_upload/icons/social-facebook.svg"); --atg-so-instagram: url("/fileadmin/user_upload/icons/social-instagram.svg"); /* Farben. Bewusst zurueckhaltend: die Fusszeile soll unten ruhig auslaufen, die Symbole duerfen nicht lauter sein als die Rechtslinks darueber. */ --atg-so-ring: rgba(255, 255, 255, .22); --atg-so-ink: rgba(255, 255, 255, .55); --atg-so-ring-hover: var(--atg-accent); --atg-so-ink-hover: var(--atg-accent); /* Masse - Werte fuer >= 1440px */ --atg-so-size: 54px; /* Durchmesser des Rings */ --atg-so-ico: 24px; /* Kantenlaenge des Symbols */ --atg-so-gap: 18px; /* Abstand zwischen den Ringen */ --atg-so-top: 28px; /* obere Trennlinie bis Ringe */ --atg-so-bottom: 26px; /* Ringe bis untere Trennlinie */ } /* 1024-1439px */ @media (max-width: 1439.98px) { :root { --atg-so-size: 52px; --atg-so-ico: 23px; } } /* 768-1023px */ @media (max-width: 1023.98px) { :root { --atg-so-size: 50px; --atg-so-ico: 22px; } } /* bis 767px - der kleinste Ring der vier Breiten, und trotzdem deutlich ueber der 44px-Mindestgroesse fuer Tippflaechen. Diese Groesse ist am Geraet abgenommen und bleibt so. */ @media (max-width: 767.98px) { :root { --atg-so-size: 46px; --atg-so-ico: 20px; --atg-so-top: 26px; --atg-so-bottom: 24px; } } /* ============================================================ STARTSEITE - ABSCHNITT "SOCIAL MEDIA" (Layout 39) Stand 23.10.2026, dritte Fassung. Weisse Karte wie "Persoenlich erreichbar" auf demselben hellen Band. Links Kicker, Ueberschrift und Text aus dem Backend, rechts ein Petrol-Feld mit Lichtflaechen, darauf die CTA-Zeile und vier Glaskreise (LinkedIn, YouTube, Facebook, Instagram) mit Logo, Name und Handlungswort. Ab 1024px Text links (40 %), Feld rechts (60 %) - breiter als bei "Persoenlich erreichbar" (48 %), damit vier Kreise nebeneinander Platz haben. Bis 1023px steht das Feld unter dem Text: 768-1023 vier Kreise in einer Reihe, bis 767 zwei mal zwei. Die Logos sind dieselben Masken wie in der Fusszeile (--atg-so-*), die Adressen dieselben Konstanten (atg.social). Handlungswoerter und CTA-Zeile stehen in constants.typoscript unter atg.kanaele. Praefix --atg-sm-* ("Social Media"), weil --atg-so-* schon der Fusszeile gehoert. ============================================================ */ :root { /* Band - dasselbe helle Band wie "Persoenlich erreichbar" */ --atg-sm-band: var(--atg-pe-band); --atg-sm-band-y: var(--atg-pe-band-y); /* Karte - Rand, Schatten und Mindesthoehe wie dort */ --atg-sm-card-bg: var(--atg-white); --atg-sm-card-line: var(--atg-line); --atg-sm-card-shadow: var(--atg-pe-shadow); --atg-sm-min-h: var(--atg-pe-min-h); --atg-sm-cols: 40% 60%; /* Text | Petrol-Feld */ /* Textteil - Groessen und Farben wie "Persoenlich erreichbar" */ --atg-sm-pad: var(--atg-pe-pad); --atg-sm-kicker: var(--atg-accent-deep); --atg-sm-kicker-gap: var(--atg-pe-kicker-gap); --atg-sm-head-fs: var(--atg-h2-fs); --atg-sm-head-lh: 1.22; --atg-sm-head-track: -.006em; --atg-sm-head: var(--atg-petrol); --atg-sm-text-gap: var(--atg-pe-text-gap); /* Ueberschrift -> Text */ --atg-sm-text-fs: var(--atg-pe-body-fs); --atg-sm-text-lh: 1.6; --atg-sm-text: var(--atg-text-soft); --atg-sm-text-para: .8em; /* Absatz -> Absatz */ /* Petrol-Feld - Farbe und Lichtflaechen wie die dunklen Baender */ --atg-sm-panel: var(--atg-band-dark); --atg-sm-panel-glow: var(--atg-pa-glow-dark); --atg-sm-panel-pad-y: 40px; --atg-sm-panel-pad-x: 44px; /* CTA-Zeile im Feld */ --atg-sm-cta-fs: 16px; --atg-sm-cta-lh: 1.4; --atg-sm-cta-track: .01em; --atg-sm-cta: var(--atg-on-dark); --atg-sm-cta-gap: 22px; /* CTA-Zeile -> Kreise */ /* Glaskreise - Glas wie die Karten der Seite Ansprechpartner */ --atg-sm-per-row: 4; --atg-sm-circle: 140px; --atg-sm-gap: 22px; --atg-sm-glass-bg: var(--atg-ap-glass-bg); --atg-sm-glass-line: var(--atg-ap-glass-line); --atg-sm-glass-blur: var(--atg-ap-glass-blur); --atg-sm-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 12px 28px rgba(5, 20, 28, .28); --atg-sm-line-hover: var(--atg-accent); --atg-sm-lift: var(--atg-pa-lift); --atg-sm-hover-time: var(--atg-transition); --atg-sm-focus: 2px solid var(--atg-accent); --atg-sm-focus-off: 3px; /* Inhalt der Kreise */ --atg-sm-logo: 40px; --atg-sm-logo-ink: var(--atg-white); --atg-sm-logo-gap: 10px; /* Logo -> Name */ --atg-sm-name-fs: 16px; --atg-sm-name-lh: 1.2; --atg-sm-name: var(--atg-on-dark); --atg-sm-act-gap: 3px; /* Name -> Handlungswort */ --atg-sm-act-fs: 13px; --atg-sm-act-track: .02em; --atg-sm-act: var(--atg-accent); --atg-sm-act-hover: var(--atg-white); --atg-sm-arrow-fs: 10px; --atg-sm-arrow-gap: 6px; --atg-sm-arrow-shift: var(--atg-pa-arrow-shift); } /* 1024-1439px - Werte gleitend. Steigung = (oben - unten) / 416, Untergrenze bei 1024, Obergrenze ab 1440. */ @media (max-width: 1439.98px) { :root { --atg-sm-panel-pad-y: 36px; --atg-sm-panel-pad-x: clamp( 28px, 3.84615vw - 11.385px, 44px); --atg-sm-gap: clamp( 14px, 1.92308vw - 5.692px, 22px); --atg-sm-circle: clamp(112px, 6.73077vw + 43.077px, 140px); --atg-sm-logo: clamp( 32px, 1.92308vw + 12.308px, 40px); --atg-sm-name-fs: clamp(14.5px, 0.36058vw + 10.808px, 16px); --atg-sm-act-fs: clamp( 12px, 0.24038vw + 9.538px, 13px); --atg-sm-logo-gap: 8px; } } /* 768-1023px - Feld unter dem Text, vier Kreise in einer Reihe. Steigung = (oben - unten) / 255, Untergrenze bei 768, Obergrenze bei 1023. */ @media (max-width: 1023.98px) { :root { --atg-sm-cols: 1fr; --atg-sm-min-h: 0; --atg-sm-panel-pad-y: 32px; --atg-sm-panel-pad-x: 28px; --atg-sm-gap: 22px; --atg-sm-circle: clamp(136px, 9.41176vw + 63.718px, 160px); --atg-sm-logo: 40px; --atg-sm-name-fs: 16px; --atg-sm-act-fs: 13px; --atg-sm-logo-gap: 10px; } } /* bis 767px - zwei mal zwei. Der Kreis ist eine halbe Feldbreite gross, hoechstens 150px. */ @media (max-width: 767.98px) { :root { --atg-sm-panel-pad-y: 28px; --atg-sm-panel-pad-x: 20px; --atg-sm-cta-fs: 15px; --atg-sm-cta-gap: 18px; --atg-sm-per-row: 2; --atg-sm-gap: 16px; --atg-sm-circle: min(calc((100% - var(--atg-sm-gap)) / 2), 150px); --atg-sm-logo: 38px; } } /* unter 380px - Logo und Innenabstand noch einmal kleiner, wie Logo und Seitenrand im Kopf */ @media (max-width: 379.98px) { :root { --atg-sm-panel-pad-x: 16px; --atg-sm-gap: 12px; --atg-sm-logo: 34px; --atg-sm-name-fs: 15px; } } /* ============================================================ DOWNLOAD CENTER - LAYOUT 40 "KATEGORIEN" ============================================================ Das Inhaltselement "Kategorisierter Inhalt" (Menue) als Reihe von Sprungknoepfen ueber den Download-Gruppen. Steht auf demselben Off-white wie Katalog und Downloads. 21.10.2026. */ :root { --atg-kn-band: var(--atg-dc-band); --atg-kn-before: 32px; /* Katalogkarte -> Knoepfe */ --atg-kn-after: 48px; /* Knoepfe -> erste Gruppe */ --atg-kn-gap: 12px; --atg-kn-btn-h: 44px; --atg-kn-btn-pad: 22px; --atg-kn-btn-fs: 15px; --atg-kn-btn-bg: var(--atg-petrol); --atg-kn-btn-fg: var(--atg-white); --atg-kn-btn-hover: var(--atg-accent-deep); --atg-kn-btn-shadow: 0 6px 16px rgba(16, 40, 52, .14); --atg-kn-lift: 2px; } @media (max-width: 1023.98px) { :root { --atg-kn-after: 40px; } } @media (max-width: 767.98px) { :root { --atg-kn-before: 24px; --atg-kn-after: 36px; --atg-kn-gap: 10px; --atg-kn-btn-h: 40px; --atg-kn-btn-pad: 18px; --atg-kn-btn-fs: 14px; } } /* ============================================================ STARTSEITE - ABSCHNITT "ONLINESHOP" (Layout 41) ============================================================ Petrol-Band ueber "Persoenlich erreichbar": Kicker, Ueberschrift (Header/Subheader der Card Group), Kennzahlen, zwei Knoepfe und Hinweiszeile (Textfeld der Karte), rechts der Shop als Bildschirmfoto im Browserfenster auf einer Glaskarte. Entwurf und Masstabelle: Projekt-Dokument "Konzept Onlineshop Startseite". 23.10.2026. Gleitende Werte zwischen 1024 und 1440px: Steigung = (oben - unten) / 416. */ :root { /* Band - wie Partner/Ansprechpartner */ --atg-os-band: var(--atg-band-dark); --atg-os-glow: var(--atg-pa-glow-dark); --atg-os-band-top: var(--atg-pa-band-top); --atg-os-band-bottom: var(--atg-pa-band-bottom); /* Spalten */ --atg-os-txt: 480px; /* Textspalte */ --atg-os-gap: 80px; /* Text -> Bild */ /* Kopf */ --atg-os-kicker: var(--atg-accent); --atg-os-head: var(--atg-on-dark); --atg-os-head-fs: var(--atg-pa-head-fs); --atg-os-rule: var(--atg-accent); --atg-os-head-gap: 28px; /* Strich -> Kennzahlen */ /* Kennzahlen */ --atg-os-line: var(--atg-rule-dark); --atg-os-fact-fs: 26px; --atg-os-fact-lh: 1.1; --atg-os-fact-ink: var(--atg-on-dark); --atg-os-label-fs: 14px; --atg-os-label: var(--atg-on-dark-mute); --atg-os-fact-pad: 12px; /* oben; unten 1px weniger */ --atg-os-fact-in: 22px; /* Abstand nach der Trennlinie */ --atg-os-fact-num-w: 64px; /* Zahlenspalte, nur 768-1023 */ --atg-os-fact-row-gap: 10px; /* Zahl -> Beschriftung, 768-1023 */ /* Knoepfe - Hausart der dunklen Baender (Hinweiskarten) */ --atg-os-cta-gap: 24px; /* Kennzahlen -> Knoepfe */ --atg-os-btn-h: 44px; --atg-os-btn-pad: 22px; --atg-os-btn-fs: 15px; --atg-os-btn-gap: 14px; --atg-os-btn-radius: var(--atg-radius); --atg-os-btn-bg: var(--atg-hk-btn-bg); --atg-os-btn-fg: var(--atg-hk-btn-fg); --atg-os-btn-hover: var(--atg-hk-btn-hover); --atg-os-btn-line: var(--atg-hk-btn-line); --atg-os-btn-line-w: 1.5px; --atg-os-btn-ghost-fg: var(--atg-on-dark); --atg-os-btn-min: 220px; /* bis 767: Mindestbreite, sonst umbrechen */ --atg-os-ico: 15px; --atg-os-ico-gap: 10px; --atg-os-ico-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); --atg-os-focus: 2px solid var(--atg-accent); --atg-os-focus-off: 2px; --atg-os-hover-time: var(--atg-transition); /* Hinweiszeile */ --atg-os-hint-gap: 12px; --atg-os-hint-fs: 15px; --atg-os-hint-lh: 1.45; --atg-os-hint: var(--atg-on-dark-mute); /* Glaskarte um das Browserfenster */ --atg-os-glass-pad: 16px; --atg-os-glass-radius: 16px; --atg-os-glass-bg: var(--atg-ap-glass-bg); --atg-os-glass-line: var(--atg-ap-glass-line); --atg-os-glass-blur: var(--atg-ap-glass-blur); --atg-os-glass-shadow: var(--atg-ap-shadow); /* Browserfenster */ --atg-os-win-radius: 10px; --atg-os-win-bg: var(--atg-white); --atg-os-bar: #EEF2F4; --atg-os-bar-line: var(--atg-line); --atg-os-bar-h: 34px; --atg-os-dot: #C9D2D7; --atg-os-dot-d: 10px; /* Durchmesser */ --atg-os-dot-img: radial-gradient(circle closest-side, var(--atg-os-dot) 92%, transparent 100%); --atg-os-dot-in: calc(var(--atg-os-dot-d) * 1.4); /* Rand -> erster Punkt */ --atg-os-dot-step: calc(var(--atg-os-dot-d) * 1.7); /* Punkt -> Punkt */ --atg-os-url: "shop.autogentechnik.at"; --atg-os-url-fs: 12px; --atg-os-url-h: 22px; --atg-os-url-w: 320px; /* hoechstens */ --atg-os-url-pad: 10px; --atg-os-url-top: calc((var(--atg-os-bar-h) - var(--atg-os-url-h)) / 2); --atg-os-url-left: calc(var(--atg-os-dot-in) * 2 + var(--atg-os-dot-step) * 2 + var(--atg-os-dot-d)); --atg-os-url-ink: var(--atg-text-soft); --atg-os-url-bg: var(--atg-white); /* Bildfeld flacher als das Foto (790 x 462): gezeigt wird der obere Teil des Shops, unten wird beschnitten. Haelt den Abschnitt niedrig (Festlegung 23.10.2026: kompakter). */ --atg-os-shot-ratio: 2.2; --atg-os-shot-max: 560px; /* Bildspalte hoechstens, ab 1024 */ --atg-os-shot-pos: 0 0; /* oben links verankert */ /* bis 767: Abstand vor und nach dem Bild */ --atg-os-m-gap: 22px; } /* 1024 bis 1439px - Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-os-txt: clamp(380px, 24.038vw + 133.85px, 480px); --atg-os-gap: clamp(40px, 9.615vw - 58.46px, 80px); --atg-os-head-gap: clamp(26px, .4808vw + 21.08px, 28px); --atg-os-fact-fs: clamp(24px, .4808vw + 19.08px, 26px); --atg-os-cta-gap: clamp(22px, .4808vw + 17.08px, 24px); --atg-os-btn-h: 42px; --atg-os-glass-pad: 14px; --atg-os-glass-radius: 14px; --atg-os-bar-h: 30px; --atg-os-dot-d: 9px; } } /* 768 bis 1023px - Ueberschrift ueber die volle Breite, darunter links Kennzahlen und Knoepfe, rechts das Bild */ @media (max-width: 1023.98px) { :root { --atg-os-txt: 290px; --atg-os-gap: 32px; --atg-os-head-gap: 22px; --atg-os-fact-fs: 22px; --atg-os-fact-pad: 9px; --atg-os-cta-gap: 20px; --atg-os-btn-h: 40px; --atg-os-btn-pad: 18px; --atg-os-btn-gap: 10px; --atg-os-hint-fs: 14px; --atg-os-glass-pad: 12px; --atg-os-glass-radius: 12px; --atg-os-win-radius: 8px; --atg-os-bar-h: 28px; --atg-os-dot-d: 8px; --atg-os-url-fs: 11px; --atg-os-url-h: 20px; } } /* bis 767px - eine Spalte: Kopf, Kennzahlen, Bild, Knoepfe, Hinweis */ @media (max-width: 767.98px) { :root { --atg-os-head-gap: 20px; --atg-os-fact-fs: 22px; --atg-os-fact-pad: 10px; --atg-os-fact-in: 14px; --atg-os-label-fs: 13px; --atg-os-btn-h: 48px; --atg-os-glass-pad: 10px; --atg-os-win-radius: 7px; --atg-os-bar-h: 24px; --atg-os-dot-d: 7px; --atg-os-url-fs: 10.5px; --atg-os-url-h: 17px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-os-fact-in: 10px; } } /* ============================================================ STARTSEITE - ABSCHNITT "SERVICE" (Layout 42) ============================================================ Erster Abschnitt der Startseite, ueber dem Onlineshop. Weisse Karte in der Hausart von "Persoenlich erreichbar" (eckig, gleicher Schatten, gleiche Innenabstaende, gleiche Knopfhoehen): links Kicker, Ueberschrift, Haekchenliste wie "Unsere Grundsaetze" und zwei Knoepfe, rechts das Foto mit einer Petrol-Plakette (Hinweiszeile des Textfelds). Entwurf und Masstabelle: Projekt-Dokument "Abschnitt Service Startseite". 25.10.2026. Gleitende Werte zwischen 1024 und 1440px: Steigung = (oben - unten) / 416. */ :root { /* Band - Off-white wie "Persoenlich erreichbar". 72 statt 80px Luft, damit der Abschnitt bei 1440px genau so hoch ist wie der Onlineshop darunter (475px). */ --atg-sv-band: var(--atg-pe-band); --atg-sv-band-y: 72px; /* Karte */ --atg-sv-card-bg: var(--atg-white); --atg-sv-card-line: var(--atg-line); --atg-sv-shadow: var(--atg-pe-shadow); --atg-sv-shadow-hover: var(--atg-pe-shadow-hover); --atg-sv-lift: var(--atg-pe-lift); --atg-sv-hover-time: var(--atg-transition); --atg-sv-img-col: var(--atg-pe-img-col); /* 48 % */ --atg-sv-min-h: 331px; --atg-sv-pad: var(--atg-pe-pad); /* seitlich */ --atg-sv-pad-y: 36px; /* oben/unten mindestens */ /* Kopf */ --atg-sv-kicker: var(--atg-accent-deep); --atg-sv-kicker-gap: var(--atg-pe-kicker-gap); --atg-sv-head: var(--atg-petrol); --atg-sv-head-fs: var(--atg-h2-fs); --atg-sv-head-lh: 1.22; --atg-sv-head-ls: -.006em; /* Haekchenliste - Haken wie "Unsere Grundsaetze" */ --atg-sv-list-gap: 24px; /* Ueberschrift -> Liste */ --atg-sv-cols: auto auto; --atg-sv-col-gap: 44px; --atg-sv-item-gap: 12px; --atg-sv-item-fs: 17px; --atg-sv-item-lh: 1.45; --atg-sv-item-ink: var(--atg-ink); --atg-sv-mark: var(--atg-accent-deep); --atg-sv-mark-col: 26px; --atg-sv-mark-fs: 16px; /* Knoepfe - Farben und Hoehe wie "Persoenlich erreichbar" */ --atg-sv-cta-gap: 28px; /* Liste -> Knoepfe */ --atg-sv-btn-dir: row; --atg-sv-btn-flex: 0 0 auto; --atg-sv-btn-gap: 14px; --atg-sv-btn-h: var(--atg-pe-btn-h); --atg-sv-btn-pad: var(--atg-pe-btn-pad); --atg-sv-btn-fs: var(--atg-pe-btn-fs); --atg-sv-btn-radius: var(--atg-radius); --atg-sv-btn-bg: var(--atg-pe-btn-bg); --atg-sv-btn-fg: var(--atg-white); --atg-sv-btn-hover: var(--atg-pe-btn-hover); --atg-sv-btn-line: var(--atg-ink); --atg-sv-btn-line-w: 1.5px; --atg-sv-ico: 15px; --atg-sv-ico-gap: 10px; /* Pfeil schraeg nach rechts oben - derselbe wie beim Onlineshop */ --atg-sv-ico-next: var(--atg-os-ico-ext); --atg-sv-focus: 2px solid var(--atg-accent-deep); --atg-sv-focus-off: 2px; /* Foto */ --atg-sv-img-pos: 45% 40%; /* Stand frueher auf var(--atg-pe-img-h). Seit dem 31.10.2026 arbeitet der Abschnitt "Persoenlich erreichbar" unter 768px mit einem Seitenverhaeltnis statt einer festen Hoehe; damit sich das hier nicht ungefragt mitaendert, steht der Wert jetzt eigenstaendig. */ --atg-sv-img-h: 190px; /* nur bis 767 */ /* Plakette auf dem Foto */ --atg-sv-badge-bg: var(--atg-petrol); --atg-sv-badge-fg: var(--atg-white); --atg-sv-badge-edge: 4px solid var(--atg-accent); --atg-sv-badge-fs: 15px; --atg-sv-badge-lh: 1.2; --atg-sv-badge-pad: 10px 18px 10px 16px; /* Abstand der Plakette zum unteren Bildrand; links liegt sie bewusst am Rand an (Fahne) */ --atg-sv-badge-bottom: 28px; } /* 1024 bis 1439px - Werte gleitend */ @media (max-width: 1439.98px) { :root { --atg-sv-band-y: 64px; --atg-sv-min-h: clamp(290px, 8.65385vw + 201.4px, 326px); --atg-sv-pad-y: 32px; --atg-sv-list-gap: clamp(20px, .96154vw + 10.154px, 24px); --atg-sv-col-gap: clamp(24px, 4.80769vw - 25.23px, 44px); --atg-sv-item-fs: clamp(16px, .24038vw + 13.538px, 17px); --atg-sv-cta-gap: clamp(24px, .96154vw + 14.154px, 28px); } } /* 768 bis 1023px - Liste einspaltig, Knoepfe untereinander */ @media (max-width: 1023.98px) { :root { --atg-sv-band-y: 56px; --atg-sv-min-h: 316px; --atg-sv-pad-y: var(--atg-sv-pad); --atg-sv-list-gap: 20px; --atg-sv-cols: minmax(0, 1fr); --atg-sv-item-gap: 8px; --atg-sv-item-fs: 16px; --atg-sv-cta-gap: 22px; --atg-sv-btn-dir: column; --atg-sv-btn-gap: 10px; --atg-sv-badge-fs: 14px; --atg-sv-badge-pad: 8px 14px 8px 12px; --atg-sv-badge-bottom: 20px; } } /* bis 767px - Foto oben, Liste ab rund 520px zweispaltig, Knoepfe nebeneinander, solange beide 220px breit sein koennen */ @media (max-width: 767.98px) { :root { --atg-sv-band-y: 48px; --atg-sv-min-h: 0px; --atg-sv-list-gap: 18px; --atg-sv-cols: repeat(auto-fit, minmax(230px, 1fr)); --atg-sv-btn-dir: row; --atg-sv-btn-flex: 1 1 220px; --atg-sv-badge-bottom: 14px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-sv-list-gap: 16px; } } /* ============================================================ SERVICE-FORMULAR - LAYOUT 43 (28.10.2026) Seite "Service" (/service), Formular "Reparatur, Service, Pruefung anfragen" aus ext:form. Regelsatz in css/service-formular.css, dort keine Zahl. Praefix --atg-sf-*. Felder, Checkbox, Knopf, Fehler und Karte sind dieselben wie beim Feedback-Formular und zeigen auf --atg-fb-*. Neu sind nur die drei Gruppen (fieldset) und das Raster. Ab 1440px steht der Gruppenname links in einer eigenen Spalte, darunter nur noch ueber der Gruppe. Die Umschaltung laeuft ueber --atg-sf-legend-pos, die Blockdatei braucht dafuer keine eigene Media Query. ============================================================ */ :root { /* Band und Karte - wie Feedback */ --atg-sf-band: var(--atg-fb-band); --atg-sf-band-top: var(--atg-fb-band-top); --atg-sf-band-bottom: var(--atg-fb-band-bottom); --atg-sf-card-gap: var(--atg-fb-card-gap); --atg-sf-pad-y: var(--atg-fb-pad-y); --atg-sf-pad-x: var(--atg-fb-pad-x); /* Danke-Meldung: so breit wie die Feedback-Karte */ --atg-sf-done-max: var(--atg-fb-card-max); /* Gruppen */ --atg-sf-group-pad: 26px; /* Luft ueber/unter jeder Gruppe */ --atg-sf-line: var(--atg-line); --atg-sf-line-w: 1px; /* Gruppenname (legend) */ --atg-sf-legend-pos: absolute; /* links in eigener Spalte */ --atg-sf-legend-col: 190px; --atg-sf-legend-w: var(--atg-sf-legend-col); /* Rasterbereich der legend. Absolut MUSS das "auto" sein: mit einer Spaltenangabe waere der Rasterbereich ihr Bezugsrahmen, und left: 0 laege an der ersten Feldspalte statt am Rand. */ --atg-sf-legend-area: auto; --atg-sf-indent: 222px; /* Spalte 190 + Abstand 32 */ --atg-sf-legend-top: 2px; /* auf Hoehe der Feldbeschriftung */ --atg-sf-legend-fs: 13px; --atg-sf-legend-lh: 20px; --atg-sf-legend-ls: .16em; --atg-sf-legend-color: var(--atg-h4); --atg-sf-num-color: var(--atg-accent-deep); --atg-sf-num-display: block; /* "01" ueber dem Namen */ --atg-sf-num-mb: 2px; --atg-sf-num-mr: 0px; /* Raster der Felder */ --atg-sf-cols: repeat(4, minmax(0, 1fr)); --atg-sf-col-gap: 24px; --atg-sf-row-gap: 20px; --atg-sf-span-select: span 2; /* "Es handelt sich um:" */ --atg-sf-span-full: 1 / -1; /* Gruppenname oben, Textfeld */ --atg-sf-area-h: 96px; /* Textfeld, kompakter als Feedback */ --atg-sf-select-pad-r: 44px; /* Platz fuer den Pfeil */ /* "Es handelt sich um:" als Mehrfach-Checkbox (seit 10.11.2026). Ueber die volle Gruppenbreite, die Kaestchen im eigenen Raster. Kaestchen wie die Datenschutz-Checkbox. Zwei Spalten statt drei: bei drei bricht "Griffstueck, Schneideinsatz Reparatur" ab 1440px abwaerts in zwei Zeilen um. Zwei Spalten liegen genau auf den Spalten 1-2 und 3-4 der Felder darunter. */ --atg-sf-mc-cols: repeat(2, minmax(0, 1fr)); --atg-sf-mc-gap-y: 12px; --atg-sf-mc-gap-x: 24px; --atg-sf-mc-legend-gap: 12px; /* Frage -> erste Zeile */ --atg-sf-mc-fs: var(--atg-fb-input-fs); --atg-sf-mc-lh: 1.4; --atg-sf-mc-color: var(--atg-ink); /* Beschreibung unter dem Feld ("zu je max. 30 kg") */ --atg-sf-hint-gap: 6px; --atg-sf-hint-fs: 14px; --atg-sf-hint-lh: 1.4; --atg-sf-hint-color: var(--atg-h4); /* 5,3 : 1 */ --atg-sf-placeholder: var(--atg-h4); /* Fusszeile: Checkbox und Knopf */ --atg-sf-foot-cols: minmax(0, 1fr) auto; /* nebeneinander */ --atg-sf-foot-gap: 48px; /* Checkbox -> Knopf */ --atg-sf-check-max: 640px; --atg-sf-act-line: var(--atg-sf-line-w) solid var(--atg-sf-line); --atg-sf-act-pad: var(--atg-sf-group-pad); --atg-sf-act-mt: 0px; --atg-sf-arrow: "\2192"; --atg-sf-arrow-gap: 10px; } /* 1024-1439px - Gruppenname ueber der Gruppe, vier Spalten */ @media (max-width: 1439.98px) { :root { --atg-sf-legend-pos: static; --atg-sf-legend-w: auto; --atg-sf-legend-area: var(--atg-sf-span-full); --atg-sf-indent: 0px; --atg-sf-legend-top: 0px; --atg-sf-num-display: inline; --atg-sf-num-mb: 0px; --atg-sf-num-mr: 10px; --atg-sf-group-pad: 24px; --atg-sf-row-gap: 18px; } } /* 768-1023px - zwei Spalten, Knopf unter der Checkbox */ @media (max-width: 1023.98px) { :root { --atg-sf-cols: repeat(2, minmax(0, 1fr)); --atg-sf-col-gap: 20px; --atg-sf-mc-gap-x: 20px; --atg-sf-span-select: 1 / -1; --atg-sf-foot-cols: minmax(0, 1fr); --atg-sf-foot-gap: 0px; --atg-sf-check-max: none; --atg-sf-act-line: none; --atg-sf-act-pad: 0px; --atg-sf-act-mt: 24px; } } /* bis 767px - eine Spalte, Knopf ueber die volle Breite (Feedback) */ @media (max-width: 767.98px) { :root { --atg-sf-cols: minmax(0, 1fr); --atg-sf-mc-cols: minmax(0, 1fr); --atg-sf-mc-gap-y: 14px; --atg-sf-group-pad: 22px; --atg-sf-legend-fs: 12px; --atg-sf-area-h: 120px; --atg-sf-act-mt: 24px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-sf-group-pad: 20px; --atg-sf-row-gap: 16px; } } /* ============================================================ SEITE "SERVICE" - LAYOUT 44 BIS 49 (28.10.2026) Regelsatz in css/service.css (Abschnitte 8 bis 14), dort keine Zahl. Praefixe: --atg-st-* 44 Service-Titel Petrol-Band mit Foto --atg-sl-* 45 Service-Vorteilsleiste --atg-vn-* 46 Service-Vorher-Nachher --atg-sp-* 47 Service-Pruefung helles Band --atg-sk-* 48 Service-Pruefkarten gleiches helles Band --atg-sa-* 49 Service-Abholung Petrol-Band Ueberschriften der Abschnitte: Optik Ebene 2, Petrol, ohne Unterstrich - wie der Service-Abschnitt der Startseite. ============================================================ */ :root { /* ---------- gemeinsam ---------- */ --atg-ss-head: var(--atg-petrol); --atg-ss-head-fs: var(--atg-h2-fs); --atg-ss-head-lh: 1.22; --atg-ss-kicker-gap: var(--atg-pe-kicker-gap); --atg-ss-lead: var(--atg-text-soft); --atg-ss-lead-fs: 19px; --atg-ss-band-light: var(--atg-pe-band); --atg-ss-band-dark: var(--atg-petrol); --atg-ss-red: var(--atg-fb-error); /* #B42318, 6,6 : 1 auf Weiss */ --atg-ss-img-radius: 8px; --atg-ss-card-radius: 8px; --atg-ss-band-y: 88px; /* Symbole als Masken (Farbe kommt aus dem CSS) */ --atg-ico-werkzeug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); --atg-ico-werkstatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-5 9 5v12'/%3E%3Cpath d='M7 21v-8h10v8'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E"); --atg-ico-lkw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E"); --atg-ico-medaille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M8.5 13l-1.5 8 5-3 5 3-1.5-8'/%3E%3C/svg%3E"); --atg-ico-warnung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 20h20z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --atg-ico-waage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M5 7l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M19 7l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); --atg-ico-schild-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9.5 9.5l5 5'/%3E%3Cpath d='M14.5 9.5l-5 5'/%3E%3C/svg%3E"); --atg-ico-formular: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z'/%3E%3Cpath d='M9 10h6'/%3E%3Cpath d='M9 14h6'/%3E%3Cpath d='M9 18h3'/%3E%3C/svg%3E"); --atg-ico-paket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5L12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5L12 12l9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); --atg-ico-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h22M17 5l7 7-7 7'/%3E%3C/svg%3E"); --atg-ico-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E"); /* ---------- 44 Service-Titel ---------- */ --atg-st-band: var(--atg-petrol); --atg-st-ink: var(--atg-on-dark); --atg-st-pad-top: 112px; --atg-st-pad-bottom: 112px; --atg-st-text-max: 480px; /* Mindesthoehe des Bandes; der Text steht darin senkrecht mittig. Das Titelfoto (4 : 3) hat links rund 35 % freie Flaeche fuer den Verlauf - ein flaches Band schnitt davon oben und unten zu viel ab (Festlegung 31.10.2026). */ --atg-st-band-h: 520px; --atg-st-img-w: 60%; /* rechtsbuendig: angeschnitten wird zuerst die freie Flaeche links; senkrecht etwas nach unten, damit der Schluessel bleibt */ --atg-st-img-pos: right 80%; /* Verlauf von links ueber die freie Flaeche des Fotos: 0-8 % voll, 18 % 85 %, 32 % 35 %, ab 42 % frei */ --atg-st-veil: linear-gradient(90deg, var(--atg-petrol) 0%, var(--atg-petrol) 8%, color-mix(in srgb, var(--atg-petrol) 85%, transparent) 18%, color-mix(in srgb, var(--atg-petrol) 35%, transparent) 32%, transparent 42%); /* Verlauf ragt links ueber die Fotokante: bei Bruchteil-Pixeln blieb dort sonst eine helle Haarlinie stehen */ --atg-st-veil-bleed: 2px; --atg-st-h1-fs: 60px; --atg-st-h1-lh: 1.1; --atg-st-rule: var(--atg-accent); --atg-st-lead: rgba(255, 255, 255, .9); --atg-st-lead-fs: 22px; --atg-st-lead-lh: 1.4; --atg-st-lead-gap: 24px; /* Ueberschrift -> Unterzeile */ --atg-st-mark: var(--atg-accent); --atg-st-cta-gap: 34px; /* Unterzeile -> Knopf */ --atg-st-btn-h: 50px; --atg-st-btn-pad: 26px; --atg-st-btn-fs: 16px; --atg-st-btn-bg: var(--atg-accent); --atg-st-btn-fg: var(--atg-ink); --atg-st-btn-hover: var(--atg-white); --atg-st-ico: 18px; --atg-st-ico-gap: 10px; --atg-st-focus: 2px solid var(--atg-white); --atg-st-focus-off: 3px; --atg-st-img-h: 0px; /* nur bis 767: Hoehe des Fotos oben */ /* bis 767: Verlauf am unteren Fotorand in die Bandfarbe, dazu der Abstand Foto -> Ueberschrift */ --atg-st-veil-stack: linear-gradient(180deg, transparent 62%, var(--atg-petrol) 100%); --atg-st-img-gap: 20px; /* ---------- 45 Service-Vorteilsleiste ---------- */ --atg-sl-pad-y: 36px; --atg-sl-cols: repeat(4, minmax(0, 1fr)); --atg-sl-gap: 16px 32px; --atg-sl-line: var(--atg-line); --atg-sl-fs: 17px; --atg-sl-ink: var(--atg-ink); --atg-sl-ico: 28px; --atg-sl-ico-gap: 12px; --atg-sl-ico-color: var(--atg-accent-deep); /* ---------- 46 Service-Vorher-Nachher ---------- */ --atg-vn-band-y: var(--atg-ss-band-y); --atg-vn-img-gap: 12px; --atg-vn-gal-gap: 40px; /* Kaestchen -> Bilder */ --atg-vn-lead-gap: 14px; --atg-vn-chips-gap: 28px; /* Text -> Kaestchen */ --atg-vn-chip-gap: 10px; --atg-vn-chip-bg: var(--atg-pe-band); --atg-vn-chip-fs: 15px; --atg-vn-chip-pad: 8px 14px; --atg-vn-chip-radius: var(--atg-radius); --atg-vn-steps-gap: 24px; /* Bilder -> Schritte */ --atg-vn-steps-cols: repeat(4, minmax(0, 1fr)); --atg-vn-step-gap: 16px; --atg-vn-step-bg: var(--atg-petrol); --atg-vn-step-fg: var(--atg-on-dark); --atg-vn-step-pad: 20px; --atg-vn-step-radius: 8px; --atg-vn-step-fs: 17px; --atg-vn-num: 38px; --atg-vn-num-bg: var(--atg-accent); --atg-vn-num-fg: var(--atg-ink); --atg-vn-num-gap: 14px; /* ---------- 47 Service-Pruefung ---------- */ --atg-sp-band-top: var(--atg-ss-band-y); /* Luft Text -> Karten = sp-band-bottom + sk-band-top (56). Die Karten brauchen oben eigene Luft: .section hat overflow: hidden, die Plakette (--atg-sk-badge-top) wuerde sonst abgeschnitten. */ --atg-sp-band-bottom: 20px; --atg-sp-cols: minmax(0, 1.1fr) minmax(0, 1fr); --atg-sp-col-gap: 64px; --atg-sp-img-gap: 12px; --atg-sp-lead-gap: 14px; --atg-sp-card-gap: 30px; /* Text -> rote Karte */ --atg-sp-card-bg: var(--atg-white); --atg-sp-card-line: var(--atg-line); --atg-sp-card-edge: 3px; --atg-sp-card-pad: 26px; --atg-sp-card-pad-top: 22px; --atg-sp-card-pad-bot: 24px; --atg-sp-label-fs: 13px; --atg-sp-label-track: .16em; --atg-sp-list-gap: 14px 32px; --atg-sp-list-top: 16px; --atg-sp-item-fs: 17px; --atg-sp-ico: 22px; --atg-sp-ico-gap: 10px; /* ---------- 48 Service-Pruefkarten ---------- */ --atg-sk-band-top: 36px; --atg-sk-band-bottom: var(--atg-ss-band-y); --atg-sk-cols: repeat(3, minmax(0, 1fr)); --atg-sk-gap: 24px; --atg-sk-bg: var(--atg-white); --atg-sk-shadow: 0 1px 3px rgba(16, 40, 52, .08); --atg-sk-pad: 30px 32px; --atg-sk-title-fs: 24px; --atg-sk-sub-fs: 16px; --atg-sk-sub: var(--atg-text-soft); --atg-sk-list-top: 18px; --atg-sk-item-gap: 12px; --atg-sk-mark: var(--atg-accent-deep); --atg-sk-mark-col: 32px; --atg-sk-mark-fs: 16px; --atg-sk-num: 26px; --atg-sk-num-fs: 13px; --atg-sk-num-bg: var(--atg-petrol); --atg-sk-num-fg: var(--atg-on-dark); /* Karte mit Bild = Petrol-Karte mit Plakette */ --atg-sk-dark-bg: var(--atg-petrol); --atg-sk-dark-fg: var(--atg-on-dark); --atg-sk-dark-title: var(--atg-accent); --atg-sk-dark-title-fs: 28px; --atg-sk-dark-text-fs: 19px; --atg-sk-dark-min-h: 230px; --atg-sk-badge-w: 120px; --atg-sk-badge-top: -26px; --atg-sk-badge-right: 24px; --atg-sk-badge-shadow: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); /* ---------- 49 Service-Abholung ---------- */ --atg-sa-band: var(--atg-petrol); --atg-sa-band-y: 56px; --atg-sa-gap: 48px; /* Kopf <-> Kreise */ --atg-sa-kicker: var(--atg-accent); --atg-sa-head: var(--atg-on-dark); --atg-sa-head-fs: var(--atg-h2-fs); --atg-sa-text: var(--atg-on-dark-soft); /* 9,3 : 1 auf Petrol */ --atg-sa-text-fs: 17px; --atg-sa-text-gap: 12px; --atg-sa-text-max: 420px; --atg-sa-item-w: 150px; --atg-sa-item-gap: 68px; /* 20 + Pfeil 28 + 20 */ --atg-sa-ring: 64px; --atg-sa-ring-w: 2px; --atg-sa-ring-color: var(--atg-accent); --atg-sa-ico: 28px; --atg-sa-ico-color: var(--atg-accent); --atg-sa-label-gap: 12px; --atg-sa-label-fs: 16px; --atg-sa-arrow-w: 28px; --atg-sa-arrow-h: 24px; --atg-sa-arrow-color: rgba(255, 255, 255, .55); } /* 1024 bis 1439px */ @media (max-width: 1439.98px) { :root { --atg-ss-band-y: clamp(72px, 3.84615vw + 32.615px, 88px); --atg-st-pad-top: clamp(88px, 5.76923vw + 28.923px, 112px); --atg-st-pad-bottom: clamp(88px, 5.76923vw + 28.923px, 112px); --atg-st-band-h: clamp(440px, 19.23077vw + 243.077px, 520px); --atg-st-h1-fs: clamp(52px, 1.92308vw + 32.308px, 60px); --atg-st-lead-fs: clamp(20px, .48077vw + 15.077px, 22px); --atg-sp-col-gap: clamp(40px, 5.76923vw - 19.077px, 64px); --atg-sk-gap: clamp(16px, 1.92308vw - 3.692px, 24px); --atg-sk-pad: clamp(24px, 1.44231vw + 9.231px, 30px) clamp(24px, 1.92308vw + 4.308px, 32px); --atg-sl-gap: 16px clamp(20px, 2.88462vw - 9.538px, 32px); --atg-sl-fs: clamp(16px, .24038vw + 13.538px, 17px); --atg-sa-item-w: clamp(120px, 7.21154vw + 46.154px, 150px); --atg-sa-item-gap: clamp(52px, 3.84615vw + 12.615px, 68px); } } /* 768 bis 1023px */ @media (max-width: 1023.98px) { :root { --atg-ss-band-y: 64px; --atg-ss-lead-fs: 18px; --atg-st-pad-top: 72px; --atg-st-pad-bottom: 80px; --atg-st-text-max: 400px; --atg-st-band-h: 380px; --atg-st-img-w: 58%; --atg-st-h1-fs: 44px; --atg-st-lead-fs: 19px; --atg-sl-cols: repeat(2, minmax(0, 1fr)); --atg-sl-pad-y: 28px; --atg-sl-fs: 16px; --atg-sl-gap: 16px 24px; --atg-vn-gal-gap: 32px; --atg-vn-steps-gap: 20px; --atg-vn-steps-cols: repeat(2, minmax(0, 1fr)); --atg-vn-step-fs: 16px; --atg-sp-cols: minmax(0, 1fr) minmax(0, 1fr); --atg-sp-col-gap: 32px; --atg-sp-band-bottom: 48px; --atg-sk-band-top: 0px; --atg-sp-list-gap: 12px; --atg-sk-cols: minmax(0, 1fr); --atg-sk-gap: 16px; --atg-sk-pad: 24px 26px; --atg-sk-title-fs: 22px; --atg-sk-dark-min-h: 150px; --atg-sk-badge-w: 100px; --atg-sk-badge-top: -20px; --atg-sa-gap: 32px; --atg-sa-item-w: 140px; --atg-sa-item-gap: 52px; } } /* bis 767px - Foto oben ueber die volle Breite, alles einspaltig */ @media (max-width: 767.98px) { :root { --atg-ss-band-y: 56px; --atg-ss-lead-fs: 17px; --atg-st-pad-top: 0px; --atg-st-pad-bottom: 56px; --atg-st-text-max: none; --atg-st-band-h: 0px; /* Titelfoto oben: 360 bei 390, waechst bis 480 bei 767 mit - bei fester Hoehe fehlte am oberen Ende ein Drittel des Fotos */ --atg-st-img-h: clamp(360px, 31.83024vw + 235.862px, 480px); --atg-st-h1-fs: 36px; --atg-st-lead-fs: 18px; --atg-st-lead-gap: 18px; --atg-st-cta-gap: 26px; --atg-st-btn-h: 48px; --atg-sl-pad-y: 24px; --atg-sl-fs: 15px; --atg-sl-ico: 24px; --atg-sl-ico-gap: 10px; --atg-sl-gap: 14px 16px; --atg-vn-img-gap: 8px; --atg-vn-gal-gap: 28px; --atg-vn-steps-gap: 16px; --atg-vn-steps-cols: minmax(0, 1fr); --atg-vn-step-gap: 10px; --atg-vn-step-pad: 16px; --atg-vn-num: 34px; --atg-vn-chips-gap: 22px; --atg-sp-cols: minmax(0, 1fr); --atg-sp-img-gap: 8px; --atg-sp-card-pad: 20px; --atg-sp-band-bottom: 40px; --atg-sk-dark-title-fs: 24px; --atg-sk-dark-text-fs: 18px; --atg-sk-badge-w: 88px; --atg-sk-badge-top: -18px; --atg-sk-badge-right: 18px; --atg-sa-band-y: 48px; --atg-sa-text-fs: 16px; --atg-sa-gap: 28px; --atg-sa-item-w: auto; --atg-sa-item-gap: 28px; --atg-sa-ring: 52px; --atg-sa-ico: 24px; --atg-sa-label-gap: 16px; --atg-sa-arrow-w: 20px; --atg-sa-arrow-h: 14px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-st-img-h: 330px; --atg-st-h1-fs: 32px; --atg-sl-cols: minmax(0, 1fr); } } /* ============================================================ LAYOUT 51: ZEITACHSE - DIE VIER BILDSCHIRMBREITEN ============================================================ Nachgetragen am 03.11.2026. Eigene Gruppe am Dateiende, weil der Block nach den Service-Werten entstanden ist. Ab 1024px stehen die vier Stationen nebeneinander und die Achse laeuft waagrecht. Darunter kippt sie: --atg-zl-cols geht auf 1, die Achse steht links und laeuft senkrecht nach unten. Bei vier Stationen auf 768px blieben je Spalte nur rund 160px - zu wenig fuer eine Jahreszahl in 26px und drei Zeilen Text. */ /* 1024-1439px - weiter vier Spalten, alles etwas kleiner */ @media (max-width: 1439.98px) { :root { --atg-zl-head-gap: clamp(30px, 1.92308vw + 10.308px, 38px); --atg-zl-gap: clamp(28px, 2.88462vw - 1.538px, 40px); --atg-zl-jahr-fs: clamp(26px, 0.96154vw + 16.154px, 30px); --atg-zl-jahr-gap: clamp(14px, 0.96154vw + 4.154px, 18px); --atg-zl-punkt-gap: clamp(18px, 0.96154vw + 8.154px, 22px); --atg-zl-titel-fs: clamp(17px, 0.24038vw + 14.538px, 18px); --atg-zl-text-fs: clamp(15px, 0.24038vw + 13.538px, 16px); } } /* 768-1023px - die Achse kippt, eine Station je Zeile */ @media (max-width: 1023.98px) { :root { --atg-zl-cols: 1; --atg-zl-head-gap: 30px; /* Jetzt der Abstand von einer Station zur naechsten */ --atg-zl-gap: 32px; --atg-zl-jahr-fs: 26px; /* Senkrecht sitzt der Punkt links neben der Jahreszahl, nicht darunter. Dieser Wert ist deshalb der Abstand Jahreszahl -> Titel. */ --atg-zl-jahr-gap: 12px; --atg-zl-v-gap: 24px; --atg-zl-titel-fs: 18px; --atg-zl-text-fs: 16px; } } /* bis 767px */ @media (max-width: 767.98px) { :root { --atg-zl-head-gap: 26px; --atg-zl-gap: 28px; --atg-zl-jahr-fs: 24px; --atg-zl-v-gap: 18px; --atg-zl-titel-fs: 17px; --atg-zl-text-fs: 16px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-zl-jahr-fs: 22px; --atg-zl-v-gap: 14px; } } /* ============================================================ STARTSEITE - HEADER-VIDEO (Layout 52) Design in css/headervideo.css, Festlegung 05.11.2026, ueberarbeitet am selben Tag (zweite Fassung). Video ueber die volle Breite, darauf OBEN LINKS auf der Inhaltskante, direkt unter dem Kopfbereich: Kicker "Seit 1998" mit kurzem Tuerkis-Strich, Ueberschrift, Zeile "Verkauf - Reparatur - Beratung" und zwei Knoepfe. Bis 767 px das 4:5-Video, der Text liegt auch dort oben. ============================================================ */ :root { /* Flaeche hinter dem Video, solange noch nichts geladen ist */ --atg-hv-band: var(--atg-petrol); /* Farbe des Verlaufs ueber dem Video */ --atg-hv-veil-c: var(--atg-topbar); /* Hoehe: Seitenverhaeltnis des Videos, aber nie hoeher als das Fenster abzueglich Kopfbereich - das Video endet an der Unterkante des Fensters. Die Mindesthoehe faengt flache Fenster ab (Laptop quer, Browserfenster halb hoch). Bewusst KEIN aspect-ratio: das gibt eine Hoechsthoehe als Hoechstbreite weiter - das Band wurde bei 1440 x 900 nur 1216 px breit. Deshalb die Hoehe aus der Fensterbreite. */ --atg-hv-ratio-h: calc(100vw * 9 / 16); --atg-hv-kopf-h: calc(var(--atg-topbar-h) + var(--atg-headbar-h) + var(--atg-productbar-h)); --atg-hv-max-h: calc(100svh - var(--atg-hv-kopf-h)); --atg-hv-min-h: 520px; --atg-hv-pad-y: 56px; /* senkrechte Lage des Textes: oben, direkt unter dem Kopfbereich - auf allen Breiten (bis 05.11.2026 Mitte, bis 767 px unten) */ --atg-hv-align: flex-start; /* Textblock */ --atg-hv-text-max: 600px; --atg-hv-ink: var(--atg-on-dark); --atg-hv-h1-lh: 1.2; /* Kicker "Seit 1998" ueber der Ueberschrift (Feld "Subheader"): Schrift wie die Kontextzeile der Ebene 4, etwas groesser, weiss; davor ein kurzer Strich in Logo-Tuerkis. Weiss statt Tuerkis, weil kleine Schrift 4,5 : 1 braucht und der Verlauf blasser geworden ist - Tuerkis traegt der Strich. */ --atg-hv-kicker-fs: 14px; --atg-hv-kicker-track: .16em; --atg-hv-kicker: var(--atg-on-dark); --atg-hv-kicker-line: var(--atg-accent); --atg-hv-kicker-line-w: 32px; --atg-hv-kicker-line-h: 2px; --atg-hv-kicker-igap: 12px; /* Strich -> Schrift */ --atg-hv-kicker-gap: 14px; /* Kicker -> Ueberschrift */ --atg-hv-sub: var(--atg-accent); --atg-hv-sub-fs: 22px; --atg-hv-sub-lh: 1.3; --atg-hv-sub-ls: .01em; --atg-hv-sub-gap: 18px; /* Ueberschrift -> Zeile */ --atg-hv-cta-gap: 32px; /* Zeile -> Knoepfe */ /* Knoepfe: dieselben wie auf den anderen dunklen Baendern (Onlineshop). Gefuellt hell mit Pfeil, Umriss weiss. */ --atg-hv-btn-h: var(--atg-os-btn-h); --atg-hv-btn-pad: var(--atg-os-btn-pad); --atg-hv-btn-fs: var(--atg-os-btn-fs); --atg-hv-btn-gap: var(--atg-os-btn-gap); --atg-hv-btn-radius: var(--atg-os-btn-radius); --atg-hv-btn-line-w: var(--atg-os-btn-line-w); --atg-hv-btn-bg: var(--atg-os-btn-bg); --atg-hv-btn-fg: var(--atg-os-btn-fg); --atg-hv-btn-hover: var(--atg-os-btn-hover); --atg-hv-btn-ghost: var(--atg-on-dark); --atg-hv-btn-flex: 0 0 auto; --atg-hv-ico: var(--atg-os-ico); --atg-hv-ico-gap: var(--atg-os-ico-gap); --atg-hv-ico-next: var(--atg-ico-pfeil); --atg-hv-focus: 2px solid var(--atg-white); --atg-hv-focus-off: 3px; --atg-hv-hover-time: var(--atg-transition); /* Verlauf ("Schatten") um den Text: eine Ellipse aus der Ecke oben links, die rechts am Ende des Textblocks (--atg-hv-text-end) und unten knapp unter den Knoepfen auslaeuft. Der Rest des Videos bleibt frei. Bis 05.11.2026 war es ein Verlauf ueber die ganze Hoehe mit 90 / 82 / 55 %; jetzt blasser (--atg-hv-veil-1 bis -3). Werte an allen Bildern des neuen Videos (2 je Sekunde) und an sechs Breiten nachgerechnet, gemessen am hellsten Zwanzigstel der Flaeche unter jeder Zeile - Ergebnis in der README unter "Header-Video Startseite". */ --atg-hv-text-end: calc(max(var(--atg-gutter), (100% - var(--atg-content-max)) / 2) + var(--atg-hv-text-max)); --atg-hv-veil-1: 80%; /* Ecke oben links */ --atg-hv-veil-2: 66%; /* auf dem Text */ --atg-hv-veil-3: 30%; /* Rand der Ellipse */ /* Breite der Ellipse in vw statt %: Chrome nimmt in der Groesse eines radial-gradient kein calc() aus % und px an - der ganze Verlauf fiele dann weg. Das Band ist immer fensterbreit. */ --atg-hv-veil-w: calc(max(var(--atg-gutter), (100vw - var(--atg-content-max)) / 2) + var(--atg-hv-text-max) + 28vw); --atg-hv-veil-h: 92%; --atg-hv-veil: radial-gradient(ellipse var(--atg-hv-veil-w) var(--atg-hv-veil-h) at 0 0, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-1), transparent) 0%, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-2), transparent) 55%, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-3), transparent) 80%, transparent 100%), linear-gradient(0deg, color-mix(in srgb, var(--atg-hv-veil-c) 30%, transparent) 0%, transparent 22%); /* Ein- und Ausblenden des Videos ueber dem Standbild */ --atg-hv-fade: .6s ease; /* Bildlage des Videos. Ist das Band flacher als 16:9 (breite, niedrige Fenster), wird oben und unten abgeschnitten - normal gleich viel. Waehrend der Zeitbereiche aus atg.headervideo. untenDesktop (constants.typoscript) steht das Bild unten buendig, damit die Funken am unteren Rand zu sehen sind (Brennschneidmaschine am Anfang des Videos, Festlegung 06.11.2026). Zurueck in die Mitte gleitet es waehrend der Ueberblendung zum naechsten Clip - deren Laenge steht in --atg-hv-lage-zeit. */ --atg-hv-lage: 50% 50%; --atg-hv-lage-unten: 50% 100%; --atg-hv-lage-zeit: .32s ease-in-out; /* Runder Knopf mit Pfeil nach unten rechts neben den beiden Knoepfen: scrollt bis unter die Unterkante des Videos. Umriss wie der zweite Knopf, gleich hoch wie die Knoepfe. */ --atg-hv-weiter: var(--atg-hv-btn-h); --atg-hv-weiter-ico: 18px; --atg-hv-weiter-ico-img: var(--atg-ico-runter); /* bis 767: Abstand Knopfspalte -> runder Knopf */ --atg-hv-weiter-gap: 14px; /* Pause-Knopf: rechts unten auf der Inhaltskante, auf allen Breiten */ --atg-hv-pause: 40px; --atg-hv-pause-ico: 14px; --atg-hv-pause-line: rgba(255, 255, 255, .55); --atg-hv-pause-bg: color-mix(in srgb, var(--atg-hv-veil-c) 35%, transparent); --atg-hv-pause-hover: color-mix(in srgb, var(--atg-hv-veil-c) 70%, transparent); --atg-hv-pause-x: max(var(--atg-gutter), (100% - var(--atg-content-max)) / 2); --atg-hv-pause-top: auto; --atg-hv-pause-bottom: 24px; --atg-hv-ico-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='4.5' height='16' rx='1'/%3E%3Crect x='14.5' y='4' width='4.5' height='16' rx='1'/%3E%3C/svg%3E"); --atg-hv-ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.86l12-7.5a1 1 0 0 0 0-1.72l-12-7.5A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E"); } /* 1024-1439px. Zwischen 1024 und 1280 px laufen die Werte gleitend mit, ab 1280 px gelten die oberen Werte. */ @media (max-width: 1439.98px) { :root { --atg-hv-min-h: 480px; --atg-hv-pad-y: 48px; --atg-hv-text-max: clamp(500px, 23.4375vw + 260px, 560px); --atg-hv-sub-fs: clamp(20px, .78125vw + 12px, 22px); --atg-hv-sub-gap: 16px; --atg-hv-cta-gap: 28px; } } /* 768-1023px */ @media (max-width: 1023.98px) { :root { --atg-hv-min-h: 400px; --atg-hv-pad-y: 40px; --atg-hv-text-max: 440px; --atg-hv-sub-fs: 19px; --atg-hv-sub-gap: 14px; --atg-hv-cta-gap: 24px; --atg-hv-pause: 36px; --atg-hv-pause-ico: 12px; --atg-hv-pause-bottom: 20px; /* das Band ist hier flach (16:9 bei schmaler Breite) - die Ellipse reicht ueber die volle Hoehe, sonst wird der Umriss-Knopf zu schwach */ --atg-hv-veil-h: 110%; } } /* bis 767px: 4:5-Video, der Text liegt oben darauf, ueber die volle Breite. Der Verlauf kommt deshalb von oben und laeuft unter den Knoepfen aus. Der Pause-Knopf sitzt wie auf den breiteren Fenstern rechts unten (bis 05.11.2026 rechts oben, als der Text unten lag). Beide Knoepfe nebeneinander, gleich breit; passen sie nicht mehr, brechen sie um. */ @media (max-width: 767.98px) { :root { --atg-hv-ratio-h: calc(100vw * 5 / 4); --atg-hv-min-h: 0px; --atg-hv-pad-y: 28px; --atg-hv-text-max: none; --atg-hv-text-end: 100%; --atg-hv-kicker-fs: 13px; --atg-hv-kicker-line-w: 24px; --atg-hv-kicker-igap: 10px; --atg-hv-kicker-gap: 10px; /* 19 px statt 17: ab 18,7 px fett gilt Tuerkis als grosse Schrift (3 : 1) - so reicht der blassere Verlauf */ --atg-hv-sub-fs: 19px; --atg-hv-sub-gap: 10px; --atg-hv-cta-gap: 20px; /* beide Knoepfe nebeneinander in der Breite der Zeile (bei 19 px rund 250 px): Schrift 14 statt 15 px, Innen- abstand 12 px - zusammen 241 px, der Rest wird verteilt */ --atg-hv-btn-fs: 14px; --atg-hv-btn-pad: 12px; --atg-hv-btn-gap: 8px; --atg-hv-ico-gap: 8px; --atg-hv-btn-flex: 1 1 auto; /* bis 767 kein Beschnitt beim 4:5-Video bis 430 px - und die Zeitbereiche gelten nur fuer das 16:9-Video */ --atg-hv-lage-unten: 50% 50%; --atg-hv-veil-1: 78%; --atg-hv-veil-2: 64%; --atg-hv-veil-3: 28%; --atg-hv-veil: linear-gradient(180deg, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-1), transparent) 0%, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-2), transparent) 46%, color-mix(in srgb, var(--atg-hv-veil-c) var(--atg-hv-veil-3), transparent) 68%, transparent 86%), linear-gradient(0deg, color-mix(in srgb, var(--atg-hv-veil-c) 30%, transparent) 0%, transparent 20%); --atg-hv-pause-x: var(--atg-gutter); --atg-hv-pause-bottom: 16px; } } /* unter 380px */ @media (max-width: 379.98px) { :root { --atg-hv-pad-y: 22px; --atg-hv-cta-gap: 16px; /* runder Knopf kleiner, damit Zeile + Knopf bei 360 px sicher in die Inhaltsbreite passen */ --atg-hv-weiter: 44px; --atg-hv-weiter-gap: 10px; --atg-hv-pause-bottom: 12px; } } /* ============================================================ SYMBOLE - bis 09.11.2026 Zeichen aus Font Awesome ============================================================ Font Awesome lud seine Schrift von fontawesome.com nach. Seit 09.11.2026 ist es entfernt; die fuenf Symbole, die die Seite davon brauchte, stehen hier als Masken - wie alle anderen Symbole des Projekts. Die Zeichnungen sind dieselben wie vorher, die Symbole sehen also unveraendert aus. Herkunft der Zeichnungen: Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0). Dieser Vermerk muss stehen bleiben. Das Seitenverhaeltnis (-ratio) ist Breite durch Hoehe der Zeichnung. Die Hoehe kommt aus dem jeweiligen Block und ist die fruehere Schriftgroesse des Zeichens (--atg-pa-arrow-fs, --atg-pa-badge-star, --atg-pv-arrow-fs, --atg-sm-arrow-fs, --atg-dc-icon-fs, --atg-zi-knob-fs, --atg-totop-pfeil) - ein Zeichen von Font Awesome war genau so hoch wie seine Schriftgroesse, die Masse bleiben dadurch gleich. Verwendet in: partner.css (Pfeil im Knopf, Stern der Plakette), produktvorschau.css und social.css (Pfeil), download.css (Download), ansprechpartner.css (Anfuehrungs- zeichen), design.css (Zurueck nach oben). ============================================================ */ :root { --atg-ico-pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E"); --atg-ico-pfeil-hoch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z'/%3E%3C/svg%3E"); --atg-ico-pfeil-ratio: 0.875; --atg-ico-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E"); --atg-ico-stern-ratio: 1.125; --atg-ico-zitat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E"); --atg-ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E"); /* Zurueck nach oben: Pfeil 16 px hoch, unten 2 px unter der Grundlinie - genau wie vorher das Zeichen (Font Awesome reicht 64 von 512 Einheiten unter die Grundlinie). */ --atg-totop-pfeil: 16px; --atg-totop-pfeil-tief: -2px; }