/* ============================================================ 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; /* Bildhoehe - gilt nur unter 768px, wo das Bild oben steht */ --atg-pe-img-h: 190px; /* 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); --atg-nw-band-y: 80px; /* Luft ueber/unter dem Band */ /* 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. */ --atg-nw-head-gap: var(--atg-pa-head-gap); --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 */ /* Das Bildfenster hat KEINE feste Hoehe, sondern ein festes Seitenverhaeltnis - es laeuft damit mit jeder Kartenbreite von selbst mit (225px bei 1024, 286px ab 1440) und ist auf jeder Breite gleich geformt. 3:4, also hochkant. Die Geschichte dieses Wertes in zwei Zeilen: bis 07.10.2026 stand hier 16:9 (Annahme: Beitragsbilder kommen quer - falsch), danach kurz 4:5 mit eingepasstem Bild. Seit dem 12.10.2026 fuellt das Bild den Rahmen aus, statt sich einzupassen. Das Verhaeltnis muss deshalb zu dem passen, was tatsaechlich kommt: Titelbilder von Magazinen und Prospekten. Die sind A4 oder nah dran - A4 ist 1 : 1,414, das vorliegende Cover 354 x 500 ist 1 : 1,412. 3:4 ist 1 : 1,333 und damit das gaengige Hochformat, das diesen Bildern am naechsten kommt: es schneidet rund 6 Prozent der Hoehe ab. Zum Vergleich, jeweils was bei einem Cover 354 x 500 verloren geht: 3:4 rund 6 % der Hoehe 2:3 rund 6 % der Breite 4:5 rund 12 % der Hoehe Querformate werden in diesem Rahmen stark beschnitten - von einem 16:9-Bild bleiben rund 42 Prozent der Breite. Verzerrt wird nichts. */ --atg-nw-img-ratio: 3 / 4; /* Kein Deckel fuer die Fensterhoehe mehr. Ein Deckel wuerde den Rahmen auf schmalen Breiten flacher machen als 3:4 - und da das Bild den Rahmen fuellt, wuerde es dort staerker beschnitten als anderswo. Der Rahmen soll auf jeder Breite gleich geformt sein, also faellt der Deckel weg. (Er stand zuletzt auf 460px, davor auf 190px.) */ --atg-nw-img-max: none; /* --- 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. Festgelegt am 22.09.2026 auf 3:2, dem Wert der Grossbildvorlage. */ --atg-tb-img-ratio: 3 / 2; --atg-tb-img-radius: var(--atg-radius); /* Zeilenabstand, sobald Text und Bild untereinander stehen */ --atg-tb-stack-gap: 32px; /* ---------- 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. Dasselbe Bild wie auf dem Petrol-Band der Seite "Partner" - der Block dort ist derselbe Aufbau, Text links und Datenliste rechts auf Petrol. Der Wert steht nur einmal im Projekt, hier wird er verwiesen. */ --atg-sb-glow: var(--atg-pa-glow-dark); /* 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. */ --atg-hk-glow: var(--atg-pa-glow-dark); --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: 64px; --atg-nw-gap: clamp(20px, 2.88462vw - 9.538px, 32px); --atg-nw-pad: clamp(22px, 0.48077vw + 17.077px, 24px); --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: 56px; --atg-nw-cols: 2; --atg-nw-gap: 20px; --atg-nw-pad: 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: 48px; --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%); --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 und E-Mail */ --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 beiden Symbole 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-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: Karte ---------- */ --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: 44px; /* Mindesthoehe der Karte. Das Cover fuellt das Bildfeld bis auf den Rand --atg-dc-cover-inset, die Karte bestimmt damit die Groesse des Titelbilds: 280 -> Cover rund 164 x 232. Verlauf: 30.09. ohne Mindesthoehe (Cover 141 x 199), 21.10. 340 mit Ueberstand (240 x 338), 21.10. 2. Runde 280 ohne Ueberstand - die Seite soll die Download-Karten frueher anreissen. */ --atg-dc-min-h: 280px; /* Bildfeld links, auf jeder Breite neben dem Text (seit 21.10.2026 keine Stapelung mehr). Stand 22.10.2026: wieder Petrol mit Lichtflaechen (die helle Fassung vom 21.10. wurde verworfen), das Cover ragt oben um --atg-dc-overhang aus der Karte. Das Bild wird mit object-fit: contain in das Feld eingepasst (oben plus Ueberstand, seitlich und unten abzueglich --atg-dc-cover-inset) und haengt oben an - so ragt es auch dann heraus, wenn die Feldbreite begrenzt. */ --atg-dc-panel-w: 240px; --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: 30px; --atg-dc-title-gap: 10px; --atg-dc-text-fs: 18px; --atg-dc-text-lh: 1.6; --atg-dc-text-max: 76ch; --atg-dc-text-color: var(--atg-text-soft); --atg-dc-para-gap: 12px; /* Angabenzeile: Aufzaehlung im Feld "Text", Beschriftung fett */ --atg-dc-meta-gap: 20px; /* Text -> Angaben */ --atg-dc-meta-fs: 16px; --atg-dc-meta-pad-y: 10px; --atg-dc-meta-space: 24px; /* Abstand um die Trennlinie */ --atg-dc-meta-line: var(--atg-line); --atg-dc-label-fs: 12px; --atg-dc-label-track: .14em; --atg-dc-label-color: var(--atg-h4); --atg-dc-label-gap: 10px; /* Knopf, neben der Angabenzeile */ --atg-dc-btn-gap: 32px; --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); /* Download-Symbol in beiden Knopfarten (Font Awesome f019) */ --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: 26px; --atg-dc-pad-x: 36px; --atg-dc-panel-w: clamp(210px, 7.21154vw + 136.154px, 240px); --atg-dc-min-h: 260px; --atg-dc-cover-inset: 22px; --atg-dc-overhang: 22px; --atg-dc-title-fs: 28px; --atg-dc-text-fs: 17px; --atg-dc-meta-space: 18px; --atg-dl-shot-h: 200px; } } /* 768 bis 1023px - Katalogkarte gestapelt (Feld oben), Angaben und Knopf nebeneinander; Downloads als Slider mit zwei Karten */ @media (max-width: 1023.98px) { :root { --atg-dc-after: 64px; --atg-dc-pad-y: 24px; --atg-dc-pad-x: 28px; --atg-dc-panel-w: 200px; /* bis 1023px ohne Angabenzeile (22.10.2026) - die Karte wird so hoch wie Kicker, Titel und Knopf */ --atg-dc-min-h: auto; --atg-dc-cover-inset: 20px; --atg-dc-overhang: 20px; --atg-dc-head-gap: 28px; --atg-dc-title-fs: 25px; --atg-dc-text-fs: 16px; --atg-dc-meta-space: 20px; --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 - Angaben dreispaltig, Knopf ueber die volle Breite; Slider mit einer Karte */ @media (max-width: 767.98px) { :root { --atg-dc-after: 56px; --atg-dc-pad-y: 18px; --atg-dc-pad-x: 16px; /* breit genug, dass das Cover die Kartenhoehe fuellt (gemessen bei 390: 136 x 192) und unten kein Leerraum bleibt */ --atg-dc-panel-w: 156px; --atg-dc-cover-inset: 10px; --atg-dc-overhang: 16px; --atg-dc-head-gap: 24px; --atg-dc-title-fs: 19px; --atg-dc-kicker-fs: 11px; --atg-dc-meta-gap: 14px; --atg-dc-btn-h: 42px; --atg-dc-btn-fs: 15px; --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-w: 140px; --atg-dc-pad-x: 14px; --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; --atg-sv-ico-next: 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='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); --atg-sv-focus: 2px solid var(--atg-accent-deep); --atg-sv-focus-off: 2px; /* Foto */ --atg-sv-img-pos: 45% 40%; --atg-sv-img-h: var(--atg-pe-img-h); /* 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-addr: span 2; /* Abholadresse, Adresszusatz */ --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 */ /* 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-span-select: 1 / -1; --atg-sf-span-addr: span 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-span-addr: auto; --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; --atg-st-img-w: 64%; --atg-st-img-pos: 45% 50%; /* Verlauf von links ueber das Foto: 0 voll, 20 % 60 %, 48 % frei */ --atg-st-veil: linear-gradient(90deg, var(--atg-petrol) 0%, color-mix(in srgb, var(--atg-petrol) 60%, transparent) 20%, transparent 48%); --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 45%, 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-img-h: 340px; --atg-vn-gal-gap: 40px; /* Kaestchen -> Bilder */ /* Die Fotos tragen die Beschriftung "Vorher"/"Nachher" oben links - beim Zuschneiden bleibt deshalb die linke obere Ecke stehen */ --atg-vn-img-pos: left top; --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-img-h: 300px; --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-h1-fs: clamp(52px, 1.92308vw + 32.308px, 60px); --atg-st-lead-fs: clamp(20px, .48077vw + 15.077px, 22px); --atg-vn-img-h: clamp(280px, 14.42308vw + 132.308px, 340px); --atg-sp-col-gap: clamp(40px, 5.76923vw - 19.077px, 64px); --atg-sp-img-h: clamp(240px, 14.42308vw + 92.308px, 300px); --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-img-w: 58%; --atg-st-veil: linear-gradient(90deg, var(--atg-petrol) 0%, color-mix(in srgb, var(--atg-petrol) 70%, transparent) 28%, transparent 60%); --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-img-h: 240px; --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-img-h: 220px; --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-img-h: 240px; --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-img-h: 180px; --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-img-h: 200px; --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: 200px; --atg-st-h1-fs: 32px; --atg-sl-cols: minmax(0, 1fr); --atg-vn-img-h: 150px; --atg-sp-img-h: 170px; } }