/* Theme Name: FAREN IT Theme URI: https://faren-it.de Description: Child-Theme fuer Bricks. Traegt das Designsystem von FAREN IT: Farben, Schriftgroessen, Abstaende, Ecken und Schatten als CSS-Variablen. Alles, was hier steht, liegt in Dateien - nicht in der Datenbank - und ist damit sicherbar und uebertragbar. Author: FAREN IT Author URI: https://faren-it.de Template: bricks Version: 1.9.5 Text Domain: faren-child */ /* ------------------------------------------------------------------------- Schriftdatei selbst ausliefern Source Sans 3 wird NICHT von Google geladen. Beim Laden von Google Fonts uebertraegt der Browser die IP-Adresse des Besuchers an Google - das Landgericht Muenchen I hat dafuer am 20.01.2022 (Az. 3 O 17493/20) 100 Euro Schadenersatz zugesprochen. Die Schrift gehoert also auf den eigenen Server. Seit 1.5.0 aktiv: die drei .woff2-Dateien liegen unter /fonts/. Lizenz: SIL Open Font License 1.1 (fonts/OFL-Lizenz.txt) - eigenes Ausliefern ist ausdruecklich erlaubt. Quelle: @fontsource/source-sans-3 5.3.0, Zeichensatz "latin" (enthaelt ae oe ue ss, deutsche Anfuehrungs- zeichen, Gedankenstrich und Euro). ------------------------------------------------------------------------- */ @font-face { font-family: 'Source Sans 3'; src: url( 'fonts/source-sans-3-regular.woff2' ) format( 'woff2' ); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url( 'fonts/source-sans-3-semibold.woff2' ) format( 'woff2' ); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url( 'fonts/source-sans-3-bold.woff2' ) format( 'woff2' ); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- Marke, unveraenderlich --- */ --farbe-rot: #FF0000; /* 4,00:1 - KEINE Schriftfarbe */ --farbe-grau: #5A5A5A; /* 6,90:1 */ /* --- Rot, abgestuft nach Aufgabe --- */ --farbe-rot-tief: #D10000; /* 5,66:1 - alles, was Text traegt */ --farbe-rot-dunkel: #A80000; /* 7,88:1 - Hover und gedrueckt */ --farbe-rot-hauch: #FFF1F1; /* zarte Flaeche */ --farbe-rot-hell: #FF6B6B; /* 4,55:1 auf grau-800 */ /* --- Graustufen. 600 ist das CI-Grau. --- */ --grau-50: #F6F6F6; --grau-100: #ECECEC; --grau-200: #DCDCDC; --grau-300: #C2C2C2; --grau-400: #9B9B9B; /* ab hier KEINE Schrift */ --grau-500: #757575; /* 4,61:1 - unterste Schriftfarbe */ --grau-600: #5A5A5A; /* CI */ --grau-700: #454545; --grau-800: #333333; --grau-900: #262626; --weiss: #FFFFFF; /* --- Rollen: wer wird wofuer benutzt --- */ --ton-schrift: var( --grau-900 ); --ton-text: var( --grau-700 ); --ton-neben: var( --grau-500 ); --ton-linie: var( --grau-200 ); --ton-flaeche: var( --grau-50 ); --ton-band-dunkel: var( --grau-800 ); --ton-aktion: var( --farbe-rot-tief ); --ton-aktion-hover: var( --farbe-rot-dunkel ); --ton-aktion-dunkel: var( --farbe-rot-hell ); /* --- Schrift --- */ --schrift: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px */ --text-lg: 1.1875rem; /* 19px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: clamp( 1.625rem, 1.25rem + 1.6vw, 2.0625rem ); --text-4xl: clamp( 2rem, 1.4rem + 2.6vw, 2.625rem ); --zeile-eng: 1.15; --zeile-knapp: 1.35; --zeile-normal: 1.65; --stark-normal: 400; --stark-halb: 600; --stark-fett: 700; /* --- Abstaende, Raster 4px --- */ --platz-1: 0.25rem; --platz-2: 0.5rem; --platz-3: 0.75rem; --platz-4: 1rem; --platz-5: 1.5rem; --platz-6: 2rem; --platz-7: 3rem; --platz-8: 4rem; --platz-9: 6rem; --platz-10: 8rem; --luft-block: clamp( 3rem, 1.5rem + 5vw, 6rem ); --breite: 1200px; --rand: clamp( 1rem, 4vw, 2rem ); /* --- Ecken, Linien, Schatten --- */ --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-voll: 999px; --linie: 1px solid var( --ton-linie ); --linie-kraeftig: 2px solid var( --ton-linie ); --schatten-s: 0 1px 2px rgba( 90, 90, 90, .10 ); --schatten-m: 0 3px 10px rgba( 90, 90, 90, .12 ); --schatten-l: 0 10px 30px rgba( 90, 90, 90, .14 ); } /* ------------------------------------------------------------------------- Bezugsgroesse fuer rem zuruecksetzen Bricks setzt html { font-size: 62.5% } - nachgelesen in frontend-layer.min.css, innerhalb von @layer bricks. Damit ist 1rem = 10px statt 16px, und JEDER rem-Wert dieses Designsystems schrumpft auf 62,5 %: --text-base ergaebe 10,6px statt 17px, --platz-4 ergaebe 10px statt 16px. 100% statt 16px, weil so die Schriftgroesse erhalten bleibt, die der Besucher selbst im Browser eingestellt hat. Wer dort 20px waehlt, bekommt 20px. Eine feste Pixelangabe wuerde ihn uebergehen. Unbedenklich: In frontend-layer.min.css stehen auf 151 KB genau drei rem-Werte. Sichtbar betroffen ist davon nur der Rechtsabstand des Bricks-Elements "Post TOC". ------------------------------------------------------------------------- */ html { font-size: 100%; } /* ------------------------------------------------------------------------- Grundeinstellung Diese Datei wird ohne @layer geladen. Bricks legt seine eigenen Vorgaben seit Version 2.0 in @layer bricks ab - ungelayertes CSS gewinnt gegen eine Kaskadenebene, unabhaengig von der Spezifitaet. Deshalb greifen die Regeln hier ohne !important. ------------------------------------------------------------------------- */ body { font-family: var( --schrift ); font-size: var( --text-base ); line-height: var( --zeile-normal ); color: var( --ton-text ); background: var( --weiss ); } /* ========================================================================= Komponenten - Baustein 4 Beruht ausschliesslich auf den Variablen aus faren-child/style.css. Kein einziger fester Farb- oder Groessenwert. ========================================================================= */ /* --- Der Knopf --------------------------------------------------------- */ .knopf { /* Aufbau */ display: inline-flex; align-items: center; justify-content: center; gap: var( --platz-2 ); /* Groesse. 44px ist die Mindestflaeche fuer einen Finger. */ min-height: 44px; padding: var( --platz-3 ) var( --platz-5 ); /* Schrift */ font-family: inherit; font-size: var( --text-base ); font-weight: var( --stark-halb ); line-height: var( --zeile-eng ); text-align: center; text-decoration: none; /* Form */ border: 2px solid transparent; border-radius: var( --radius-m ); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Tastaturfokus. outline-offset legt den Ring auf den Seitenhintergrund, nicht auf die Knopffarbe - dort haette er nur 2,67:1. */ .knopf:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 2px; } /* Wer die Maus benutzt, braucht keinen Ring. :focus-visible entscheidet das der Browser - nicht wir. */ .knopf:focus:not( :focus-visible ) { outline: none; } .knopf[disabled], .knopf[aria-disabled="true"] { cursor: not-allowed; opacity: 1; /* kein Transparenztrick - siehe Text */ } /* --- Die drei Ausfuehrungen -------------------------------------------- */ .knopf--primaer { background-color: var( --ton-aktion ); border-color: var( --ton-aktion ); color: var( --weiss ); } .knopf--primaer:hover { background-color: var( --ton-aktion-hover ); border-color: var( --ton-aktion-hover ); } .knopf--primaer:active { background-color: var( --ton-aktion-hover ); transform: translateY( 1px ); } .knopf--sekundaer { background-color: transparent; border-color: var( --ton-aktion ); color: var( --ton-aktion ); } .knopf--sekundaer:hover { background-color: var( --farbe-rot-hauch ); border-color: var( --ton-aktion-hover ); color: var( --ton-aktion-hover ); } /* --- Der Knopf mit Linie: die zweite Wahl neben dem roten --------------- Entwurf C zeichnet diesen Rahmen mit --ton-linie (grau-200). Nachgerechnet kommt er damit auf 1,37:1 gegen Weiss. WCAG 1.4.11 verlangt 3:1 fuer die Kante eines Bedienelements - und dieser Knopf hat ausser der Kante nichts, woran man ihn als Knopf erkennt. --grau-500 erreicht 4,61:1 und ist die hellste Stufe der Skala, die besteht. ------------------------------------------------------------------------- */ .knopf--linie { background-color: var( --weiss ); border-color: var( --grau-500 ); color: var( --ton-band-dunkel ); } .knopf--linie:hover { background-color: var( --ton-flaeche ); border-color: var( --ton-schrift ); } /* Auf dunklem Grund kehrt sich das um: grau-500 kaeme dort nur auf 2,74:1, grau-400 auf 4,55:1. */ .band-dunkel .knopf--linie { background-color: transparent; border-color: var( --grau-400 ); color: var( --weiss ); } .band-dunkel .knopf--linie:hover { border-color: var( --weiss ); } .knopf--still { background-color: transparent; border-color: transparent; color: var( --ton-aktion ); padding-left: var( --platz-3 ); padding-right: var( --platz-3 ); } .knopf--still:hover { background-color: var( --ton-flaeche ); color: var( --ton-aktion-hover ); } /* --- Groessen ----------------------------------------------------------- */ .knopf--klein { min-height: 36px; padding: var( --platz-2 ) var( --platz-4 ); font-size: var( --text-sm ); } .knopf--gross { min-height: 52px; padding: var( --platz-4 ) var( --platz-6 ); font-size: var( --text-lg ); } /* --- Auf dunklem Grund -------------------------------------------------- */ .band-dunkel { background-color: var( --ton-band-dunkel ); color: var( --grau-200 ); /* 9,21:1 - weicher als reines Weiss */ } .band-dunkel .knopf--primaer { background-color: var( --ton-aktion-dunkel ); border-color: var( --ton-aktion-dunkel ); color: var( --grau-900 ); } .band-dunkel .knopf--sekundaer { border-color: var( --ton-aktion-dunkel ); color: var( --ton-aktion-dunkel ); } .band-dunkel .knopf:focus-visible { outline-color: var( --weiss ); } /* --- Die Knopfreihe ------------------------------------------------------ Ohne align-items strecken sich alle Knoepfe einer Flex-Zeile auf die Hoehe des groessten. Ein "kleiner" Knopf neben einem grossen ist dann nicht mehr klein - gemessen: 38px allein, 58px in schlechter Gesellschaft. ------------------------------------------------------------------------- */ .knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var( --platz-3 ); } /* --- Die Karte ---------------------------------------------------------- */ .karte { display: flex; flex-direction: column; gap: var( --platz-3 ); /* Ohne das laufen lange Woerter aus der Spalte heraus. */ min-width: 0; padding: var( --platz-5 ); background-color: var( --weiss ); border: var( --linie ); border-radius: var( --radius-l ); box-shadow: var( --schatten-s ); transition: box-shadow .15s ease, border-color .15s ease; } .karte__titel { margin: 0; font-size: var( --text-xl ); font-weight: var( --stark-halb ); line-height: var( --zeile-knapp ); color: var( --ton-schrift ); text-wrap: balance; } .karte__text { margin: 0; color: var( --ton-text ); overflow-wrap: break-word; } /* grau-600 statt --ton-neben: auf der getoenten Flaeche kommt --ton-neben nur auf 4,26:1 und faellt damit unter die Grenze fuer Fliesstext. */ .karte__fusszeile { margin-top: auto; padding-top: var( --platz-3 ); border-top: var( --linie ); font-size: var( --text-sm ); color: var( --grau-600 ); } .karte--flaeche { background-color: var( --ton-flaeche ); border-color: transparent; box-shadow: none; } .karte--klickbar:hover { border-color: var( --grau-300 ); box-shadow: var( --schatten-m ); } .karte--klickbar:focus-within { outline: 3px solid var( --ton-schrift ); outline-offset: 2px; } /* --- Das Raster, in dem Karten liegen ----------------------------------- */ .raster { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) ); gap: var( --platz-5 ); } /* --- Wer Bewegung nicht vertraegt --------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .knopf, .karte { transition: none; } .knopf--primaer:active { transform: none; } } /* ========================================================================= Die Bauteile aus Entwurf C Nachgetragen in Fassung 2 - vorher standen hier nur allgemeine Beispiele. ========================================================================= */ /* --- Die Marke: der rote Strich aus dem Logo vor einer Abschnittsmarke --- */ .marke { display: flex; flex-direction: row; align-items: center; gap: 13px; margin: 0; } .marke::before { content: ""; width: 3px; height: 19px; background: var( --farbe-rot ); flex: none; } /* > * statt span: Der Text darf ein Einfacher Text mit beliebigem HTML-Tag sein. Das ::before oben zaehlt nicht als Kind und bleibt unberuehrt. */ .marke > * { font-size: var( --text-xs ); letter-spacing: 0.16em; text-transform: uppercase; color: var( --ton-neben ); font-weight: var( --stark-halb ); } .marke--mittig { justify-content: center; } /* --- Die Leistungskachel: Kante links, Inhalt mittig --- */ .kachel { display: flex; flex-direction: column; min-width: 0; padding: var( --platz-5 ); text-align: center; background-color: var( --weiss ); border: var( --linie ); border-left: 3px solid var( --farbe-rot ); border-radius: 0 var( --radius-m ) var( --radius-m ) 0; transition: box-shadow .15s ease, border-color .15s ease; } .kachel:hover { box-shadow: var( --schatten-m ); border-top-color: var( --grau-300 ); border-right-color: var( --grau-300 ); border-bottom-color: var( --grau-300 ); } .kachel__titel { margin: 0 0 var( --platz-2 ); font-size: var( --text-base ); font-weight: var( --stark-halb ); color: var( --ton-schrift ); } .kachel__text { margin: 0; font-size: 0.88rem; line-height: 1.58; color: var( --ton-neben ); overflow-wrap: break-word; } /* --- Die Tafel: weisse Flaeche, die aus dunklem Grund ausbricht --------- */ .tafel { position: relative; padding: var( --platz-6 ); background-color: var( --weiss ); border-top: 3px solid var( --farbe-rot ); border-bottom: 3px solid var( --farbe-rot ); } /* --- Das Buendel: der Logo-Strich, vervielfacht --------------------------- */ .buendel { display: flex; gap: 5px; height: 40px; } .buendel span { display: block; width: 2px; background: var( --farbe-rot ); } /* --- Das Zitat ----------------------------------------------------------- */ .zitat { margin: var( --platz-6 ) 0 0; padding: var( --platz-2 ) 0 var( --platz-2 ) var( --platz-5 ); border-left: 3px solid var( --farbe-rot ); font-size: var( --text-lg ); line-height: var( --zeile-knapp ); color: var( --ton-schrift ); max-width: 46ch; } /* ========================================================================= Ergaenzung 1.5.0 - fuer Baustein 6 und 7 Jede Regel ist auf faren-it.de ausprobiert, am Rechner und bei 390 px. ========================================================================= */ /* --- Seitenrand ---------------------------------------------------------- Gemessen bei 390 px: Kopf, Held und Merkmale begannen bei 0 px - der Text stand direkt an der Bildschirmkante. Bricks gibt dem Container max-width: 100 %, Ihr Theme-Stil die Breite 1200 px. Mit dieser Regel bleibt es auf breiten Bildschirmen bei 1200 px, darunter ist links und rechts immer --rand frei (16 bis 32 px). ------------------------------------------------------------------------- */ .brxe-container { max-width: calc( 100% - 2 * var( --rand ) ); } /* --- Bauteile auf einem Bricks-Block ------------------------------------- Ein Block bringt aus @layer bricks mit: display:flex, flex-direction: column, align-items:flex-start. Jede Eigenschaft, die ein Bauteil nicht selbst setzt, kommt von dort. Gemessen: Knoepfe standen untereinander, Kacheln im Raster waren ungleich hoch (103/148/103 px), Kachelinhalte klebten links. Deshalb setzt jedes Bauteil Richtung und Ausrichtung ausdruecklich. (.marke steht oben schon auf row.) ------------------------------------------------------------------------- */ .knopfreihe, .buendel { flex-direction: row; } .raster { align-items: stretch; } .kachel, .karte { align-items: stretch; } /* --- Farben auf dunklem Grund -------------------------------------------- Der Theme-Stil faerbt h1 bis h4 mit --brx-ton-schrift. Im dunklen Band ergab das 1,20:1. Weisse Flaechen im Band erbten dagegen die helle Schrift: 1,00:1. Die Marke kam auf 2,74:1. Die Flaechen-Regeln stehen danach und gewinnen bei gleicher Spezifitaet - Reihenfolge ist Absicht. ------------------------------------------------------------------------- */ .band-dunkel :is( h1, h2, h3, h4 ) { color: var( --weiss ); } .band-dunkel .marke > * { color: var( --grau-300 ); } :is( .tafel, .kachel, .karte ) { color: var( --ton-text ); } :is( .tafel, .kachel, .karte ) :is( h1, h2, h3, h4 ) { color: var( --ton-schrift ); } /* Auf der grauen Flaeche (--grau-50) kommt --ton-neben nur auf 4,26:1 - zu wenig fuer 13 px. Eine Stufe dunkler: 6,38:1. */ .abschnitt--grau .marke > * { color: var( --grau-600 ); } /* --- Das Menue im Kopf --------------------------------------------------- Farbe und Mausfarbe kommen aus der Datei. Traegt man die Farbe im Builder ein, schreibt Bricks sie mit #brxe-... - dagegen kommt keine Regel aus der Datei an, auch nicht die fuer die Maus. Gemessen. ------------------------------------------------------------------------- */ .brxe-nav-menu .bricks-nav-menu > li > a { color: var( --ton-neben ); } .brxe-nav-menu .bricks-nav-menu > li > a:hover { color: var( --ton-schrift ); } /* Das aufgeklappte Handy-Menue zeichnet Bricks ab Werk rgb(35, 40, 45) - ein Blaugrau, das es in Ihrer Skala nicht gibt. */ .brxe-nav-menu .bricks-mobile-menu-wrapper::before { background-color: var( --ton-band-dunkel ); } /* --- Der Kopf am Handy --------------------------------------------------- Gemessen bei 390 px: Der Telefonknopf rutschte in eine zweite Zeile, der Kopf wurde 147 px hoch. Bis 767 px (Bricks: Mobil Querformat) stehen Logo, Telefonknopf und Menue-Symbol jetzt in einer Zeile - das Symbol ganz rechts, wo man es erwartet. Seit 1.8.7 bis 991 px: Das Handy-Menue greift jetzt ab Tablet hochkant (Bricks-Menue "tablet_portrait"), vorher war der Kopf zwischen 768 und ca. 1.000 px breiter als das Fenster (gemessen 768/800/900 px). ------------------------------------------------------------------------- */ @media ( max-width: 991px ) { #brx-header .brxe-container { flex-wrap: nowrap; gap: var( --platz-3 ); min-height: 64px; } #brx-header .brxe-image { flex: none; width: 112px; } #brx-header .brxe-nav-menu { order: 3; margin-left: 0; } #brx-header .knopf { margin-left: auto; padding: var( --platz-2 ) var( --platz-3 ); font-size: var( --text-sm ); white-space: nowrap; } /* 1.8.8: zwischen 768 und 991 px ist auch der Fernwartung-Knopf sichtbar - nur der erste Knopf schiebt nach rechts, sonst stand die Nummer mittig. */ #brx-header .knopf + .knopf { margin-left: 0; } } /* ========================================================================= Abschnitte - die Klassen, mit denen Baustein 6 und 7 bauen Die Probe aus Baustein 5: Brauche ich das noch einmal genauso? Ja - also gehoert es hierher und nicht in 30 einzelne Builder-Felder. ========================================================================= */ /* --- Der Abschnitt: Luft oben und unten, wahlweise grau ------------------ */ .abschnitt { padding-block: var( --luft-block ); } .abschnitt--grau { background-color: var( --ton-flaeche ); } /* --- Der Kopfblock: Marke, Ueberschrift, ein Satz - mittig --------------- */ .kopfblock { align-items: center; gap: var( --platz-3 ); margin-bottom: var( --platz-7 ); text-align: center; } .kopfblock .marke { justify-content: center; } .kopfblock > :is( h2, h3 ) { text-wrap: balance; } .kopfblock > .brxe-text-basic { max-width: 58ch; color: var( --grau-600 ); } .band-dunkel .kopfblock > .brxe-text-basic { color: var( --grau-300 ); } /* --- Die Strichbuendel im dunklen Band (seit 1.5.1) --------------------- Das Motiv aus Entwurf C: der Strich aus dem Logo, dreifach gebuendelt - links oben von der Kante herab, rechts unten von der Kante herauf, rechts seitlich waagerecht. Gezeichnet als Hintergrund eines ::before: kein Element im Builder, nichts fuer Bildschirmleser, und der Inhalt liegt immer darueber. Ab 1600 px Fensterbreite genau die Masse aus Entwurf C - dort liegen alle Striche neben dem 1200 px breiten Inhalt. Darunter ruecken Text und weisse Tafel an die Striche heran (nachgemessen bei 1440, 1280, 1024, 800, 390 und 360 px). Dann bleiben die senkrechten Striche im Abstand ueber und unter dem Inhalt (--luft-block), und die waagerechten entfallen, weil sie sonst hinter der Tafel verschwinden. ------------------------------------------------------------------------- */ .band-striche { position: relative; overflow: hidden; } .band-striche::before { --strich: linear-gradient( var( --farbe-rot ), var( --farbe-rot ) ); --oben-1: 120px; --oben-2: 90px; --oben-3: 150px; --unten-1: 170px; --unten-2: 110px; --unten-3: 200px; --quer-1: 90px; --quer-2: 130px; --quer-3: 70px; content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background: var( --strich ) left 7% top 0 / 2px var( --oben-1 ) no-repeat, var( --strich ) left calc( 7% + 7px ) top 0 / 2px var( --oben-2 ) no-repeat, var( --strich ) left calc( 7% + 14px ) top 0 / 2px var( --oben-3 ) no-repeat, var( --strich ) right 11% bottom 0 / 2px var( --unten-1 ) no-repeat, var( --strich ) right calc( 11% + 7px ) bottom 0 / 2px var( --unten-2 ) no-repeat, var( --strich ) right calc( 11% + 14px ) bottom 0 / 2px var( --unten-3 ) no-repeat, var( --strich ) right 0 top 20% / var( --quer-1 ) 2px no-repeat, var( --strich ) right 0 top calc( 20% + 7px ) / var( --quer-2 ) 2px no-repeat, var( --strich ) right 0 top calc( 20% + 14px ) / var( --quer-3 ) 2px no-repeat; } .band-striche > .brxe-container { position: relative; z-index: 1; } @media ( max-width: 1599px ) { .band-striche::before { --oben-1: calc( var( --luft-block ) * .68 ); --oben-2: calc( var( --luft-block ) * .51 ); --oben-3: calc( var( --luft-block ) * .85 ); --unten-1: calc( var( --luft-block ) * .72 ); --unten-2: calc( var( --luft-block ) * .47 ); --unten-3: calc( var( --luft-block ) * .85 ); --quer-1: 0px; --quer-2: 0px; --quer-3: 0px; } } /* --- Zwei Spalten, am Tablet und Handy untereinander --------------------- 991 px ist die Bricks-Stufe "Tablet Hochformat". Sie brauchen dafuer im Builder nichts umzustellen - die Datei macht es. ------------------------------------------------------------------------- */ .spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var( --platz-8 ); align-items: center; } .spalten--bild { grid-template-columns: .78fr 1.22fr; align-items: start; } .spalten > .brxe-block { gap: var( --platz-4 ); } .spalten > .brxe-block > h2 { max-width: 20ch; text-wrap: balance; } .spalten .brxe-text-basic { max-width: 56ch; } .spalten .knopfreihe { margin-top: var( --platz-4 ); } @media ( max-width: 991px ) { .spalten, .spalten--bild { grid-template-columns: 1fr; gap: var( --platz-7 ); } } /* --- Die Kachel und ihr Inhalt -------------------------------------------- Icon, Ueberschrift und Text brauchen keine eigene Klasse: Die Kachel stylt, was in ihr liegt. ------------------------------------------------------------------------- */ .kachel > .brxe-icon { margin-bottom: var( --platz-3 ); font-size: 32px; color: var( --grau-800 ); } .kachel > h3 { margin: 0 0 var( --platz-2 ); font-size: var( --text-base ); line-height: var( --zeile-knapp ); } .kachel > .brxe-text-basic { font-size: var( --text-sm ); line-height: 1.58; color: var( --grau-600 ); overflow-wrap: break-word; } /* --- Die fuenf Schritte in der Tafel -------------------------------------- Die Klasse sitzt auf dem Rich-Text. Nummern als Kreise, weil ein Kreis mit Zahl "Reihenfolge" sagt - ein Punkt nur "Aufzaehlung". ------------------------------------------------------------------------- */ .schritte ol { margin: 0; padding: 0; list-style: none; counter-reset: schritt; } .schritte li { position: relative; padding: var( --platz-3 ) 0 var( --platz-3 ) calc( 26px + var( --platz-4 ) ); border-bottom: var( --linie ); counter-increment: schritt; font-size: var( --text-sm ); line-height: 1.55; } .schritte li:first-child { padding-top: 0; } .schritte li:last-child { padding-bottom: 0; border-bottom: 0; } .schritte li::before { content: counter( schritt ); position: absolute; left: 0; top: calc( var( --platz-3 ) - 1px ); display: grid; place-items: center; width: 26px; height: 26px; border-radius: var( --radius-voll ); background-color: var( --grau-900 ); color: var( --weiss ); font-size: var( --text-xs ); font-weight: var( --stark-fett ); } .schritte li:first-child::before { top: -1px; } .schritte strong { color: var( --ton-schrift ); } /* --- Der Werdegang: eine Linie mit roten Punkten -------------------------- */ .werdegang ul { margin: 0; padding: 0; list-style: none; border-left: var( --linie ); } .werdegang li { position: relative; padding: 0 0 var( --platz-4 ) var( --platz-5 ); font-size: var( --text-sm ); } .werdegang li:last-child { padding-bottom: 0; } .werdegang li::before { content: ""; position: absolute; left: -4px; top: calc( .825em - 3px ); width: 7px; height: 7px; border-radius: var( --radius-voll ); background-color: var( --farbe-rot ); } .werdegang strong { display: block; color: var( --ton-schrift ); } /* --- Ein Bild mit der roten Kante (wie das Portraet im Held) -------------- */ .bild-kante { border-left: 4px solid var( --farbe-rot ); border-radius: 0 var( --radius-m ) var( --radius-m ) 0; } /* --- Ein Grund: Icon, Wort, Satz - mittig ---------------------------------- */ .grund { align-items: center; gap: var( --platz-2 ); text-align: center; } .grund > .brxe-icon { margin-bottom: var( --platz-2 ); font-size: 38px; color: var( --ton-aktion ); } .grund > h3 { font-size: var( --text-base ); line-height: var( --zeile-knapp ); } .grund > .brxe-text-basic { font-size: var( --text-sm ); line-height: 1.55; color: var( --grau-600 ); } /* --- Die Logos der Partner -------------------------------------------------- Jedes Logo auf einer weissen Flaeche, in Originalfarben. Kein Graufilter, keine Einfaerbung: Keiner der Hersteller gibt dafuer eine Freigabe. object-fit: contain setzt breite und hohe Logos in dieselbe Flaeche, ohne sie zu verzerren. ------------------------------------------------------------------------- */ .logoreihe { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var( --platz-5 ); } /* Seit 1.5.3: feste Hoehe, Breite nach dem Logo. Die Partner-Abzeichen von AGFEO und Hornetsecurity sind quadratisch - in der alten 220x110-Flaeche blieben davon 62 px, die Schrift war unlesbar. Jetzt 144 px hoch, ein breites Logo wird entsprechend breiter. Nachgemessen bei 1280, 390, 360 und 320 px. */ .logo-kachel { width: auto; min-width: 144px; max-width: 100%; height: 144px; padding: var( --platz-3 ); background-color: var( --weiss ); border-radius: var( --radius-m ); object-fit: contain; } /* Der Satz unter den Logos stellt sich selbst in die Mitte - ohne Einstellung im Builder. */ .logoreihe + .brxe-text-basic { align-self: center; max-width: 58ch; margin-top: var( --platz-7 ); text-align: center; color: var( --grau-300 ); } /* Am Handy kleiner; zwei Abzeichen passen nebeneinander, das breite Logo steht allein. */ @media ( max-width: 478px ) { .logo-kachel { min-width: 112px; height: 112px; padding: 10px; } } /* 1.9.0: Safari (iPhone) verzerrte die Logos - die Bild-Hoehe kam als Prozent aus Bricks, Safari nahm dann fuer die Breite die Originalbreite der Datei (AGFEO/Hornet 300 px, Securepoint 720 px) und zog das Bild in die Breite. Jetzt feste Bildhoehe in px, Breite ergibt sich aus dem Seitenverhaeltnis; object-fit: contain verhindert jede Verzerrung, falls die Breite begrenzt wird. Chrome sah vorher schon richtig aus und bleibt gleich. */ .logo-kachel { display: inline-flex; align-items: center; justify-content: center; } .logo-kachel img { display: block; width: auto; height: 120px; max-width: 100%; object-fit: contain; } @media ( max-width: 478px ) { .logo-kachel img { height: 92px; } } /* --- Vier Zahlen auf dunkler Flaeche ------------------------------------- */ .zahlen { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 120px, 100% ), 1fr ) ); gap: var( --platz-6 ); padding: var( --platz-7 ) var( --platz-6 ); background-color: var( --grau-900 ); border-radius: var( --radius-m ); } .zahl { gap: var( --platz-1 ); } .zahl > :first-child { font-size: var( --text-3xl ); font-weight: var( --stark-fett ); line-height: var( --zeile-eng ); color: var( --farbe-rot-hauch ); } .zahl > :last-child { font-size: var( --text-sm ); color: var( --grau-300 ); } /* Seiten aus dem normalen WordPress-Editor (Impressum, Datenschutz): Bricks setzt sie in
, ohne Abstand - die Ueberschrift klebte am Kopf. Bricks-Seiten sind
ohne diese Klasse und bleiben unberuehrt. Nachgemessen 1.5.2. */ #brx-content.wordpress { padding-block: var( --luft-block ); } /* Am Handy zwei und zwei - auch bei 360 px, der haeufigsten Android-Breite. Mit 32 px Rand innen und 32 px Luft passten dort nur 249 px: eine Spalte. Nachgemessen 1.5.2: zwei Spalten ab 345 px Inhaltsbreite. */ @media ( max-width: 478px ) { .zahlen { gap: var( --platz-4 ); padding: var( --platz-6 ) var( --platz-5 ); } } /* --- Die Kontaktzeilen: Bezeichnung links, Angabe rechts ------------------- Die Bezeichnung in --grau-600: Der Kontakt steht auf der grauen Flaeche, dort kaeme --ton-neben nur auf 4,26:1. ------------------------------------------------------------------------- */ .kontaktzeile { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: var( --platz-4 ); padding: var( --platz-3 ) 0; border-bottom: var( --linie ); } /* Die Spalte, in der die Zeilen stehen, bekommt keinen Zusatzabstand - die Zeilen bringen ihren eigenen mit. */ .spalten > .brxe-block:has( > .kontaktzeile ) { gap: 0; } .kontaktzeile:last-child { border-bottom: 0; } .kontaktzeile > :first-child { flex: none; width: 106px; font-size: var( --text-xs ); font-weight: var( --stark-halb ); letter-spacing: .1em; text-transform: uppercase; color: var( --grau-600 ); } .kontaktzeile > :last-child { min-width: 0; font-weight: var( --stark-halb ); color: var( --ton-schrift ); text-decoration: none; } .kontaktzeile > a:last-child:hover { color: var( --ton-aktion ); } /* --- Der Fuss ------------------------------------------------------------ Nach der Visitenkarte: dunkel, oben der rote Strich. ------------------------------------------------------------------------- */ .fuss { padding-block: var( --platz-7 ) var( --platz-5 ); background-color: var( --ton-band-dunkel ); border-top: 3px solid var( --farbe-rot ); color: var( --grau-100 ); } .fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var( --platz-6 ); } .fuss__logo { width: 168px; } .fuss__text { max-width: 34ch; margin-top: var( --platz-4 ); font-size: var( --text-sm ); } .fuss h4, .fuss .fuss__titel { margin: 0 0 var( --platz-4 ); font-size: var( --text-xs ); font-weight: var( --stark-halb ); letter-spacing: .12em; text-transform: uppercase; color: var( --weiss ); } .fuss ul { margin: 0; padding: 0; list-style: none; } .fuss li { margin-bottom: var( --platz-2 ); font-size: var( --text-sm ); line-height: 1.5; } .fuss a { color: var( --grau-100 ); text-decoration: none; } .fuss a:hover { color: var( --weiss ); text-decoration: underline; } .fuss__schluss { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var( --platz-4 ); margin-top: var( --platz-6 ); padding-top: var( --platz-4 ); border-top: 1px solid rgba( 255, 255, 255, .22 ); font-size: var( --text-xs ); color: var( --grau-200 ); } @media ( max-width: 991px ) { .fuss__raster { grid-template-columns: 1fr 1fr; } } @media ( max-width: 478px ) { .fuss__raster { grid-template-columns: 1fr; } } /* ========================================================================= Ergaenzung 1.6.0 - Textueberarbeitung der Startseite (Spezifikation Teil 1 vom 26.09.2026). Jede Klasse steht dort mit "neu, soll bewirken". ========================================================================= */ /* Overline in der H1: sieht aus wie die Marke (kleine Versalien, Sperrung, grau, roter Strich links) und steht als eigene Zeile ueber der Hauptzeile. inline-flex statt flex, damit das
dahinter den Umbruch macht und keine Leerzeile entsteht. */ .overline { display: inline-flex; align-items: center; gap: 13px; margin-bottom: var( --platz-3 ); font-size: var( --text-xs ); line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var( --ton-neben ); font-weight: var( --stark-halb ); white-space: normal; } .overline::before { content: ""; width: 3px; height: 19px; background: var( --farbe-rot ); flex: none; } /* Rotes Wort in einer Ueberschrift; nowrap, damit es nie allein umbricht. */ .akzent { color: var( --ton-aktion ); white-space: nowrap; } /* Element bleibt im Builder, wird aber nicht gezeigt (Held: der alte Marken-Block, dessen Text in die H1 gewandert ist). */ .versteckt { display: none !important; } /* Raster mit fester Spaltenzahl. Rechner zwei bzw. drei, Tablet zwei, Handy eine. Zusaetzlich zu .raster setzen. */ .raster--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .raster--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } @media ( max-width: 991px ) { .raster--3 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 767px ) { .raster--2, .raster--3 { grid-template-columns: minmax( 0, 1fr ); } } /* Die Zielgruppen-Kachel: wie .kachel, aber linksbuendig, mehr Innenabstand, ganz klickbar (der Block traegt den Link), beim Ueberfahren roter Rahmen. */ .kachel--weiche { align-items: flex-start; padding: var( --platz-6 ); text-align: left; color: inherit; cursor: pointer; } .kachel--weiche:hover, .kachel--weiche:focus-visible { border-color: var( --farbe-rot ); box-shadow: var( --schatten-m ); } .kachel--weiche > h3 { margin: 0 0 var( --platz-2 ); } .kachel--weiche > .brxe-text-basic { margin: 0; color: var( --ton-neben ); } /* Die "Mehr"-Zeile ist ein Einfacher Text, kein Link: Der ganze Block ist schon das , und ein im ist ungueltiges HTML. */ .kachel--weiche > .kachel__mehr { margin-top: auto; padding-top: var( --platz-4 ); font-weight: var( --stark-halb ); color: var( --ton-aktion ); } .kachel--weiche:hover > .kachel__mehr { text-decoration: underline; } /* Nachsatz unter einem Raster: mittig, kleiner, grau, mit dem Abstand, den auch der Kopfblock zum Raster hat (--platz-7). */ .raster-nachsatz { align-self: center; max-width: 58ch; margin-top: var( --platz-7 ); text-align: center; font-size: var( --text-sm ); color: var( --ton-neben ); } /* Ortsliste unter dem Kontakt: kleiner, grau, Abstand nach oben. */ .orte { margin-top: var( --platz-6 ); font-size: var( --text-sm ); color: var( --ton-neben ); } /* Fernwartung-Knopf im Kopf (1.6.1): am Rechner neben der Nummer, am Handy ausgeblendet - dort ist neben Logo, Nummer und Menue kein Platz, und der Link steht im Kontakt und im Fuss. */ @media ( max-width: 767px ) { .kopf__fern { display: none; } } /* ========================================================================= Ergaenzung 1.6.3 - Kontaktseite und WhatsApp ========================================================================= */ /* --- Zwei Spalten auf /kontakt/ --------------------------------------------- Links das Formular (breiter), rechts "Lieber direkt?". Oben ausgerichtet, weil die Spalten sehr unterschiedlich hoch sind. Unter 992 px untereinander - eigene Regel, weil .spalten--formular weiter unten in der Datei steht als die allgemeine Regel und sie sonst ueberschreiben wuerde. */ .spalten--formular { grid-template-columns: 1.35fr 1fr; align-items: start; gap: var( --platz-7 ); } @media ( max-width: 991px ) { .spalten--formular { grid-template-columns: 1fr; } } /* --- Das Formular --------------------------------------------------------- Bricks bringt eigene Formularstile mit. Die Klasse .formular setzt sie auf das Designsystem: gleiche Ecken, gleiche Schrift, Felder mindestens 48 px hoch (Finger), Rahmen in grau-500 - das hat 4,61:1 und erfuellt damit die 3:1, die WCAG fuer Feldrahmen verlangt. grau-400 haette nur 2,8:1. */ .formular { display: flex; flex-direction: column; gap: var( --platz-4 ); padding: var( --platz-6 ); background-color: var( --weiss ); border: var( --linie ); border-radius: var( --radius-l ); box-shadow: var( --schatten-m ); } .formular .form-group { display: flex; flex-direction: column; gap: var( --platz-2 ); width: 100%; margin: 0; padding: 0; /* 1.9.1: nicht schrumpfen - sonst ragte das Textfeld "Ihr Anliegen" am Handy 21 px in die Zeile "Datenschutz" (gemessen 390 px). */ flex-shrink: 0; } .formular .form-group > label, .formular .form-group > .label { padding: 0; font-size: var( --text-sm ); font-weight: var( --stark-halb ); color: var( --ton-schrift ); /* Bricks' eigene Formularstile setzen Grossbuchstaben - hier normal. */ text-transform: none; letter-spacing: 0; } /* Pflichtfeld-Stern (1.6.4): Die Bricks-Option "Sternchen" haengt den Stern auch an den Platzhalter ("Vor- und Nachname *"). Darum ist sie aus, und der Stern kommt von hier - an jedes Feld, das required traegt. */ .formular .form-group:has( > [required] ) > label::after { content: " *"; color: var( --ton-aktion ); } .formular input:not( [type="radio"] ):not( [type="checkbox"] ), .formular textarea { width: 100%; min-height: 48px; padding: var( --platz-3 ) var( --platz-4 ); font-family: inherit; font-size: var( --text-base ); line-height: var( --zeile-knapp ); color: var( --ton-schrift ); background-color: var( --weiss ); border: 1px solid var( --grau-500 ); border-radius: var( --radius-m ); } .formular textarea { min-height: 9rem; resize: vertical; } .formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 2px; border-color: var( --ton-schrift ); } /* Auswahl "Betrieb oder Verein / Privatperson": nebeneinander, jede Zeile 44 px hoch, damit man sie mit dem Finger trifft. */ .formular .options-wrapper { display: flex; flex-wrap: wrap; gap: 0 var( --platz-5 ); margin: 0; padding: 0; list-style: none; } .formular .options-wrapper li { display: flex; align-items: center; gap: var( --platz-2 ); min-height: 44px; margin: 0; } .formular .options-wrapper input { width: 20px; height: 20px; margin: 0; accent-color: var( --ton-aktion ); } .formular .options-wrapper label { padding: 0; font-size: var( --text-base ); font-weight: var( --stark-normal ); color: var( --ton-text ); cursor: pointer; } /* Absendeknopf: sieht aus wie .knopf.knopf--primaer. */ .formular .submit-button-wrapper { margin-top: var( --platz-2 ); } .formular .bricks-button { min-height: 48px; padding: var( --platz-3 ) var( --platz-6 ); font-family: inherit; font-size: var( --text-base ); font-weight: var( --stark-halb ); color: var( --weiss ); background-color: var( --ton-aktion ); border: 2px solid transparent; border-radius: var( --radius-m ); cursor: pointer; transition: background-color .15s ease; } .formular .bricks-button:hover { background-color: var( --ton-aktion-hover ); } .formular .bricks-button:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 2px; } /* Rueckmeldung nach dem Absenden (Bricks setzt .message.success/.error). */ .formular .message { width: 100%; padding: var( --platz-3 ) var( --platz-4 ); border-radius: var( --radius-m ); font-size: var( --text-sm ); } .formular .message.success { background-color: var( --ton-flaeche ); border-left: 3px solid var( --ton-schrift ); color: var( --ton-schrift ); } .formular .message.error { background-color: var( --farbe-rot-hauch ); border-left: 3px solid var( --ton-aktion ); color: var( --ton-aktion ); } /* Datenschutz-Hinweis unter dem Formular. */ .formular__hinweis { margin-top: var( --platz-4 ); max-width: none; font-size: var( --text-sm ); color: var( --ton-neben ); } .formular__hinweis a { color: var( --ton-aktion ); } /* --- "Lieber direkt?" ------------------------------------------------------- Graue Flaeche, drei Knoepfe untereinander in voller Breite. */ .kontakt-direkt { gap: var( --platz-4 ); padding: var( --platz-6 ); background-color: var( --ton-flaeche ); border-radius: var( --radius-l ); } .kontakt-direkt > h2 { font-size: var( --text-2xl ); } .knopfreihe--stapel { flex-direction: column; align-items: stretch; } .knopfreihe--stapel .knopf { width: 100%; } .kontakt-direkt__fern { padding-top: var( --platz-4 ); border-top: var( --linie ); font-size: var( --text-sm ); color: var( --ton-neben ); } .kontakt-direkt__fern a { color: var( --ton-aktion ); font-weight: var( --stark-halb ); } @media ( max-width: 478px ) { .formular, .kontakt-direkt { padding: var( --platz-5 ); } } /* --- WhatsApp schwebend (nur Handy) ------------------------------------------ Liegt im Fuss-Template, erscheint damit auf jeder Seite - aber nur bis 767 px. Am Rechner steht WhatsApp im Kontakt; dort stoert ein schwebender Knopf mehr, als er hilft. Farbe: Weiss auf WhatsApp-Gruen (#25D366) haette nur 2:1 - zu wenig. Darum dunkler Knopf mit weisser Schrift (15:1) und gruenem Symbol (8:1). Der Fuss bekommt unten Platz, damit der Knopf nichts verdeckt. */ .wa-schwebe { display: none; } @media ( max-width: 767px ) { /* 1.8.5: nur noch runder Symbol-Knopf 56 x 56 px, 16 px vom Rand, ohne Text - er verdeckt am Handy keinen Inhalt mehr. Die Beschriftung fuer Screenreader kommt aus aria-label="Per WhatsApp schreiben" am Link. */ .wa-schwebe { position: fixed; right: 16px; bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) ); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; line-height: 1; color: var( --weiss ); text-decoration: none; background-color: var( --grau-900 ); border-radius: 50%; box-shadow: var( --schatten-l ), 0 0 0 2px rgba( 255, 255, 255, .9 ); } .wa-schwebe__text { display: none; } .wa-schwebe > .brxe-icon { font-size: 1.75rem; color: #25D366; } .wa-schwebe:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 3px; } .fuss { padding-bottom: calc( var( --platz-5 ) + 72px ); } } @media print { .wa-schwebe { display: none !important; } } /* --- 1.9.1: Nach-oben-Knopf ---------------------------------------------- Erscheint nach etwas Scrollen (Klasse .ist-sichtbar setzt das kleine Skript aus functions.php). Am Handy sitzt er mittig ueber dem runden WhatsApp-Knopf, am Rechner unten rechts. 44 x 44 px - gross genug fuer den Finger. Beschriftung fuer Screenreader: aria-label "Nach oben". */ .nach-oben { position: fixed; right: 24px; bottom: calc( 24px + env( safe-area-inset-bottom, 0px ) ); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var( --weiss ); background-color: var( --grau-900 ); border-radius: 50%; box-shadow: var( --schatten-l ), 0 0 0 2px rgba( 255, 255, 255, .9 ); opacity: 0; visibility: hidden; transform: translateY( 8px ); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; } .nach-oben svg { width: 22px; height: 22px; } .nach-oben:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 3px; } @media ( prefers-reduced-motion: reduce ) { .nach-oben { transition: none; } } @media ( max-width: 767px ) { /* mittig ueber dem WhatsApp-Knopf (56 px, 16 px vom Rand), 12 px Abstand */ .nach-oben { right: 22px; bottom: calc( 16px + 56px + 12px + env( safe-area-inset-bottom, 0px ) ); } .fuss { padding-bottom: calc( var( --platz-5 ) + 128px ); } /* Beim Tippen in ein Formularfeld (Tastatur offen) beide Knoepfe weg - sonst lag WhatsApp auf "Nachricht senden". */ body:has( :is( input, textarea, select ):focus ) :is( .wa-schwebe, .nach-oben ) { display: none; } } @media print { .nach-oben { display: none !important; } } /* ========================================================================= Ergaenzung 1.7.0 - Unterseiten Betriebe und Privatkunden (Spezifikation Teil 2) ========================================================================= */ /* --- Detail: ein Leistungsabsatz ------------------------------------------ Links Ueberschrift und Text (ca. 60 %), rechts ein grosses Icon in CI-Grau (ca. 40 %), senkrecht mittig. detail--links tauscht die Seiten, damit die elf Absaetze nicht wie eine Liste wirken. Am Handy: Icon klein ueber dem Text. Die feine Linie trennt die Absaetze, der Abstand entspricht dem Raster zwischen zwei Kacheln (--platz-5) plus Innenabstand. */ .detail { display: grid; grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr ); gap: var( --platz-7 ); align-items: center; padding-block: var( --platz-6 ); border-top: var( --linie ); } .detail--links { grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr ); } .detail--links > .brxe-icon { order: -1; } .detail__text { gap: var( --platz-3 ); } .detail__text > h2 { font-size: var( --text-2xl ); text-wrap: balance; } .detail__text > .brxe-text-basic { max-width: 62ch; color: var( --ton-text ); } .detail > .brxe-icon { justify-self: center; font-size: clamp( 4rem, 2rem + 5vw, 7rem ); line-height: 1; color: var( --farbe-grau ); } @media ( max-width: 767px ) { .detail, .detail--links { grid-template-columns: 1fr; gap: var( --platz-4 ); } .detail > .brxe-icon { order: -1; justify-self: start; font-size: 2.5rem; } } /* --- Preistafel: Leistungen des Pakets als Definitionsliste ------------------ Sitzt als Rich-Text in der .tafel (weisser Kasten, rote Kanten). Begriff links fett, Wert rechts, feine Linie zwischen den Zeilen. */ .preistafel dl { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.3fr ); margin: 0; font-size: var( --text-sm ); line-height: 1.5; } .preistafel dt, .preistafel dd { margin: 0; padding-block: var( --platz-3 ); border-bottom: var( --linie ); } .preistafel dt { padding-right: var( --platz-4 ); font-weight: var( --stark-halb ); color: var( --ton-schrift ); } .preistafel dd { color: var( --ton-text ); } .preistafel dt:first-of-type, .preistafel dt:first-of-type + dd { padding-top: 0; } .preistafel dt:last-of-type, .preistafel dd:last-of-type { padding-bottom: 0; border-bottom: 0; } @media ( max-width: 478px ) { .preistafel dl { grid-template-columns: 1fr; } .preistafel dt { padding-bottom: 0; border-bottom: 0; } .preistafel dd { padding-top: var( --platz-1 ); } .preistafel dt:last-of-type + dd { padding-top: var( --platz-1 ); } } /* Preiszeile unter dem Paket-Text. Auf dem dunklen Band waere das normale Aktionsrot (#D10000) mit 2,9:1 zu schwach - dort gilt das helle Rot (4,55:1). */ .paket-preis { font-size: var( --text-lg ); } .paket-preis strong { font-size: var( --text-2xl ); } .band-dunkel .akzent { color: var( --ton-aktion-dunkel ); } .band-dunkel .raster-nachsatz { color: var( --grau-300 ); } /* --- FAQ: Bricks-Akkordeon ------------------------------------------------ Rahmen wie die Kachel (rote Kante links), Frage als h3, Pfeil rechts. */ .faq { display: flex; flex-direction: column; gap: var( --platz-3 ); width: 100%; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; } .faq .accordion-item { background-color: var( --weiss ); border: var( --linie ); border-left: 3px solid var( --farbe-rot ); border-radius: 0 var( --radius-m ) var( --radius-m ) 0; } .faq .accordion-title-wrapper { padding: var( --platz-4 ) var( --platz-5 ); cursor: pointer; } .faq .accordion-title-wrapper:focus-visible { outline: 3px solid var( --ton-schrift ); outline-offset: 2px; } .faq .accordion-title { display: flex; justify-content: space-between; align-items: center; gap: var( --platz-4 ); } .faq .accordion-title .title { margin: 0; font-size: var( --text-base ); line-height: var( --zeile-knapp ); color: var( --ton-schrift ); } .faq .accordion-title .icon { flex: none; font-size: 1rem; color: var( --ton-aktion ); } .faq .accordion-content-wrapper { padding: 0 var( --platz-5 ) var( --platz-5 ); font-size: var( --text-sm ); line-height: 1.6; color: var( --ton-text ); } .faq .accordion-content-wrapper p { margin: 0; } /* --- Logoleiste: Kundennamen als Text-Kaertchen -------------------------- */ .logoleiste { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var( --platz-3 ); } .logoleiste > * { padding: var( --platz-3 ) var( --platz-4 ); background-color: var( --weiss ); border: var( --linie ); border-radius: var( --radius-m ); font-size: var( --text-sm ); font-weight: var( --stark-halb ); color: var( --farbe-grau ); } /* --- Kachel-Link: "Mehr erfahren ->" unten in der Leistungskachel -------- */ .kachel > .kachel__link { margin-top: auto; padding-top: var( --platz-3 ); font-size: var( --text-sm ); font-weight: var( --stark-halb ); color: var( --ton-aktion ); text-decoration: none; } .kachel > .kachel__link:hover { text-decoration: underline; } .kachel > .kachel__link + .kachel__link { margin-top: 0; padding-top: var( --platz-1 ); } /* --- 1.7.1 --------------------------------------------------------------- */ /* .akzent haelt Woerter zusammen (nowrap). "Pfedelbach und Umgebung" ist am Handy breiter als der Bildschirm (gemessen 390 px: 17 px zu breit) - dort darf der Akzent umbrechen. Seit 1.8.9 bis 991 px: "passend zu Ihren Spielen und Ihrem Budget" (/gaming-pc/, H1) war bei 768-900 px breiter als das Fenster (gemessen 768/850 px). */ @media ( max-width: 991px ) { .akzent { white-space: normal; } } /* Werdegang-Liste als Fliesstext: Begriff fett, Beschreibung in derselben Zeile (Gaming-PC auf /computerhilfe-privat/). */ .werdegang--inline strong { display: inline; } /* Kopf mit fuenf Menuepunkten (seit Teil 2): zwischen 992 und 1199 px brachen "Für Betriebe" und "Für Privatkunden" zweizeilig um (gemessen 992/1024/1100). Menuepunkte bleiben einzeilig; der Fernwartung-Knopf weicht in dieser Breite - er steht weiter im Kontakt, auf /kontakt/ und im Fuss. Ab 1200 px und unter 992 px (Handy-Menue) bleibt er wie bisher. */ #brx-header .bricks-nav-menu > li > a { white-space: nowrap; } @media ( min-width: 992px ) and ( max-width: 1279px ) { .kopf__fern { display: none; } } /* ========================================================================= Ergaenzung 1.8.0 - Teil 2 Rev. 2 und Teil 3 (Website- und Gaming-Seite) ========================================================================= */ /* Nachsatz linksbuendig, direkt unter einem Text (Ersteinrichtung im Paket). */ .raster-nachsatz--links { align-self: stretch; max-width: 56ch; margin-top: 0; text-align: left; } /* Textlink am Ende eines Detail-Absatzes ("Pakete und Preise fuer Websites"). */ .detail__text > .detail__link { align-self: flex-start; font-size: var( --text-sm ); font-weight: var( --stark-halb ); color: var( --ton-aktion ); text-decoration: none; } .detail__text > .detail__link:hover { text-decoration: underline; } /* Vierspaltiges Raster: 4 / 2 / 1 Spalten. Das normale .raster rechnet automatisch und laesst bei 1024 px eine Kachel allein in Reihe zwei. */ .raster--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } @media ( max-width: 991px ) { .raster--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 478px ) { .raster--4 { grid-template-columns: 1fr; } } /* --- Paket: Preiskarte ---------------------------------------------------- Wie die Kachel (weiss, rote Kante links), aber linksbuendig. Name als h3, Preis gross in Aktionsrot (5,66:1 auf Weiss), Beschreibung, Liste mit roten Punkten, Knopf unten. Die Liste waechst, damit die Knoepfe dreier Karten auf einer Hoehe stehen. */ .paket { position: relative; display: flex; flex-direction: column; gap: var( --platz-3 ); min-width: 0; padding: var( --platz-6 ) var( --platz-5 ); text-align: left; background-color: var( --weiss ); border: var( --linie ); border-left: 3px solid var( --farbe-rot ); border-radius: 0 var( --radius-m ) var( --radius-m ) 0; } .paket > h3 { margin: 0; font-size: var( --text-lg ); line-height: var( --zeile-knapp ); } .paket > .paket__preis { font-size: var( --text-3xl ); font-weight: var( --stark-fett ); line-height: var( --zeile-eng ); color: var( --ton-aktion ); } .paket > p { margin: 0; font-size: var( --text-sm ); color: var( --ton-text ); } .paket > .paket__liste { flex: 1; } .paket__liste ul { display: grid; gap: var( --platz-2 ); margin: 0; padding: 0; list-style: none; } .paket__liste li { position: relative; padding-left: 18px; font-size: var( --text-sm ); line-height: 1.5; color: var( --ton-text ); } .paket__liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: var( --radius-voll ); background-color: var( --farbe-rot ); } .paket > .knopf { align-self: flex-start; margin-top: var( --platz-2 ); } /* Hervorgehobene Karte: ganzer Rahmen in CI-Rot, Etikett oben rechts. */ .paket--hervorgehoben { border: 2px solid var( --farbe-rot ); border-radius: var( --radius-m ); box-shadow: var( --schatten-m ); } .paket__etikett { position: absolute; top: var( --platz-3 ); right: var( --platz-3 ); padding: 3px 10px; font-size: var( --text-xs ); font-weight: var( --stark-halb ); line-height: 1.4; color: var( --weiss ); background-color: var( --ton-aktion ); border-radius: var( --radius-voll ); } /* Betreuung auf der Website-Seite: Text oben, Karten darunter in voller Breite (Ihre Entscheidung statt "rechts neben dem Text"). */ .betreuung-kopf { margin-bottom: var( --platz-6 ); } .betreuung-kopf > .brxe-block { gap: var( --platz-4 ); max-width: 720px; } /* 1.8.1: Die Telefonnummer im Kopf brach bei 992-1100 px in zwei Zeilen um (Knopf 67 statt 48 px hoch, gemessen mit sechs Menuepunkten). */ #brx-header .knopf { white-space: nowrap; } /* 1.8.2: Datenschutz-Checkbox im Kontaktformular. Kaestchen so gross wie die Radio-Knoepfe, oben an der ersten Textzeile ausgerichtet (der Text ist zweizeilig), Link in Aktionsrot und unterstrichen, Pflicht-Stern am Label. */ .formular .options-wrapper li:has( > input[type="checkbox"] ) { align-items: flex-start; } .formular .options-wrapper input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var( --ton-aktion ); } .formular .options-wrapper label a { color: var( --ton-aktion ); text-decoration: underline; } .formular .form-group:has( input[type="checkbox"][required] ) > :is( label, .label )::after { content: " *"; color: var( --ton-aktion ); } /* 1.8.3: Anschrift und Einzugsgebiet unter dem Fernwartungslink auf /kontakt/ - gleiche Groesse und Farbe wie die Fernwartungszeile, ohne eigene Linie. */ .kontakt-direkt__adresse { margin: 0; font-size: var( --text-sm ); line-height: 1.6; color: var( --ton-neben ); } /* 1.8.4: Links in den Rechtstexten (Impressum, Datenschutz) - diese Seiten kommen aus dem WordPress-Editor (#brx-content.wordpress). Ohne Regel sahen Links dort aus wie normaler Text. overflow-wrap faengt lange Adressen am Handy ab. */ #brx-content.wordpress a { color: var( --ton-aktion ); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } #brx-content.wordpress a:hover, #brx-content.wordpress a:focus-visible { text-decoration-thickness: 2px; } /* ------------------------------------------------------------------------- 1.9.4: Die vier Font-Awesome-Symbole als SVG statt als Schriftdatei Auf der ganzen Seite kommen nur vier Symbole aus Font Awesome vor: WhatsApp, WLAN, Telefon und Briefumschlag. Dafuer lud jede Seite zwei CSS-Dateien (ca. 100 KB) und zwei Schriftdateien (ca. 270 KB). Seit 1.9.4 laedt functions.php diese Dateien nicht mehr; die vier Symbole stehen hier als SVG. Bricks gibt weiter aus - an den Seiten im Builder aendert sich nichts, im Builder selbst ist Font Awesome weiter geladen. Technik: ::before wird mit der Textfarbe gefuellt (currentColor) und durch das SVG als Maske ausgeschnitten. Groesse und Farbe folgen also weiter der Schriftgroesse und Farbe, die in Bricks eingestellt sind - wie vorher. --fa-breite ist die Breite des Zeichens (WLAN ist breiter als hoch). 1.9.5: ::before als inline-block, damit "zentriert" aus Bricks greift (WLAN-Symbol auf der Startseite stand sonst links). Neues Font-Awesome-Symbol in Bricks gewaehlt? Dann erscheint es leer. In dem Fall hier eine Zeile ergaenzen (Pfad aus @fortawesome/...-svg-icons) oder mir Bescheid geben. Symbole: Font Awesome Free 6.7.2, Lizenz CC BY 4.0, fontawesome.com. ------------------------------------------------------------------------- */ :where( i.fa-whatsapp, i.fa-wifi, i.fa-phone, i.fa-envelope ) { display: inline-block; } i:is( .fa-whatsapp, .fa-wifi, .fa-phone, .fa-envelope ) { font-style: normal; line-height: 1; vertical-align: -0.125em; } i:is( .fa-whatsapp, .fa-wifi, .fa-phone, .fa-envelope )::before { content: ""; display: inline-block; vertical-align: top; width: var( --fa-breite, 1em ); height: 1em; background-color: currentColor; -webkit-mask: var( --fa-bild ) center / contain no-repeat; mask: var( --fa-bild ) center / contain no-repeat; } .fa-whatsapp { --fa-breite: 0.875em; --fa-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); } .fa-wifi { --fa-breite: 1.25em; --fa-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M54.2 202.9C123.2 136.7 216.8 96 320 96s196.8 40.7 265.8 106.9c12.8 12.2 33 11.8 45.2-.9s11.8-33-.9-45.2C549.7 79.5 440.4 32 320 32S90.3 79.5 9.8 156.7C-2.9 169-3.3 189.2 8.9 202s32.5 13.2 45.2 .9zM320 256c56.8 0 108.6 21.1 148.2 56c13.3 11.7 33.5 10.4 45.2-2.8s10.4-33.5-2.8-45.2C459.8 219.2 393 192 320 192s-139.8 27.2-190.5 72c-13.3 11.7-14.5 31.9-2.8 45.2s31.9 14.5 45.2 2.8c39.5-34.9 91.3-56 148.2-56zm64 160a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z'/%3E%3C/svg%3E"); } .fa-phone { --fa-breite: 1em; --fa-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E"); } .fa-envelope { --fa-breite: 1em; --fa-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z'/%3E%3C/svg%3E"); }