` **ohne Klasse** mit (kein
`fusion-button-wrapper`) — daran lässt sich nichts festmachen. */
.rjr-kontakt .rjr-kontakt__karte {
margin-top: 24px;
height: clamp(300px, 34vw, 440px);
border-radius: 28px;
overflow: hidden;
background: var(--awb-color1);
box-shadow: 0 1px 2px rgba(14, 14, 17, 0.05), 0 12px 32px -14px rgba(14, 14, 17, 0.12);
}
.rjr-kontakt .rjr-kontakt__karte iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 1000px) {
/* Radius bleibt auch gestapelt bei 20px — «Leistungen» und «Über uns»
halten ihn dort ebenfalls (nachgemessen bei 375px). */
.rjr-kontakt.fusion-fullwidth {
margin-left: 0 !important;
margin-right: 0 !important;
/* Unter 1001px steht die Kachel bei 30px — dem Innenabstand von
`#main` —, deshalb hier nur 10px: 30 + 10 + 20 Rinne = 60. */
padding: 56px 10px !important;
}
.rjr-kontakt .fusion-builder-row {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
.rjr-kontakt .rjr-kontakt__text {
padding-right: 0;
margin-bottom: 40px;
}
.rjr-kontakt .rjr-kontakt__kopf {
margin-bottom: 32px;
}
/* Gestapelt gibt es keine Karte daneben, an der sich etwas ausrichten
müsste — der Abstand zum Kopf steht schon oben. */
.rjr-kontakt .rjr-kontakt__daten {
margin-top: 0;
}
}
@media (max-width: 640px) {
.rjr-kontakt .rjr-formular__reihe {
grid-template-columns: 1fr;
}
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden {
width: 100%;
}
.rjr-kontakt .rjr-formular .rjr-formular__aktion {
display: block;
width: 100%;
}
/* Turnstile ist fest 300px breit, das Formular hier schmaler. Das Feld
steht deshalb mittig und ragt gleichmässig über die Kartenränder. */
.rjr-kontakt .rjr-formular .cf-turnstile {
margin-left: calc((100% - 300px) / 2);
}
}
/* **Schmale Telefone: der Pfeil lag auf dem Text** (Punkt 137). Die Beschriftung
misst 129px, die Polster von 101px brauchen also einen 230px breiten Knopf —
bei 375px Fenster sind es nur 207px. Polster und Pfeil rücken nach aussen,
die Summe bleibt in Ruhe und beim Rollover gleich (20 + 17 Symbol + 10 = 47). */
@media (max-width: 420px) {
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden {
padding-left: 20px !important;
padding-right: 47px !important;
}
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden:hover,
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden:focus-visible {
padding-left: 47px !important;
padding-right: 20px !important;
}
.rjr-kontakt .rjr-formular__pfeil--ruhe {
right: 20px;
}
.rjr-kontakt .rjr-formular__pfeil--hover {
left: 20px;
}
}
/* Unter 360px reicht es auch so nicht mehr: dort entfällt der Pfeil. */
@media (max-width: 359px) {
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden,
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden:hover,
.rjr-kontakt .rjr-formular.rjr-formular input.rjr-formular__senden:focus-visible {
padding-left: 8px !important;
padding-right: 8px !important;
}
.rjr-kontakt .rjr-formular__pfeil {
display: none;
}
}
/* =========================================================================
FUSS — neu aufgebaut am 25.08.2026
Vorgabe Vincenzo: der gesamte Demo-Fuss der Prebuilt-Website fällt weg,
übrig bleibt **eine** Zeile Copyright und darunter drei Social-Symbole,
beides mittig auf weissem Grund. Vorbild ist der Fuss einer anderen
Digitalminds-Seite (Bildschirmfoto vom 25.08.2026).
Der alte Fuss trug 55 037 Zeichen in vier Containern — US-Adresse,
`avada-company.com`, `+1 (800) 555 5555`, vier englische Linkspalten,
«your trusted partner in building careers» und einen Avada-Copyright-
Vermerk. Gesichert in `05_Backup/2026-08-25_Vor-Fuss-Umbau/`.
**Die Jahreszahl kommt aus dem Kurzbefehl `[rjr_jahr]`** (Child Theme,
`functions.php`) — sie zählt sich selbst weiter.
====================================================================== */
.rjr-fuss.fusion-fullwidth {
background-color: var(--awb-color1);
}
/* Avada gibt dem Fussbereich seine eigene Fläche aus den Theme-Optionen —
die stammt aus der Demo und ist dunkel. Sie liegt **unter** dem Container
und blitzte an dessen Rändern durch. */
.fusion-footer,
.fusion-footer .fusion-footer-copyright-area,
.fusion-tb-footer {
background-color: var(--awb-color1);
}
.rjr-fuss .rjr-fuss__zeile {
text-align: center;
}
.rjr-fuss .rjr-fuss__zeile p {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: var(--awb-color7);
}
/* **Keine Unterstreichung — in keinem Zustand** (Vorgabe Vincenzo,
25.08.2026). Die erste Fassung folgte dem Vorbild und unterstrich die
drei Links; erkennbar bleiben sie über den Farbwechsel beim Überfahren.
Die Regel muss **alle** Zustände nennen und `!important` tragen: Avada
legt beim Überfahren seine eigene `text-decoration: underline` darüber
und würde sie sonst zurückholen. */
.rjr-fuss .rjr-fuss__zeile a,
.rjr-fuss .rjr-fuss__zeile a:hover,
.rjr-fuss .rjr-fuss__zeile a:focus,
.rjr-fuss .rjr-fuss__zeile a:active {
text-decoration: none !important;
}
.rjr-fuss .rjr-fuss__zeile a {
color: var(--awb-color7);
transition: color 0.2s;
}
.rjr-fuss .rjr-fuss__zeile a:hover,
.rjr-fuss .rjr-fuss__zeile a:focus-visible {
color: var(--awb-color5);
}
/* Die drei Symbole: Font Awesome 5 Brands, das Avada ohnehin lädt.
**12px Abstand** (Vorgabe Vincenzo, 25.08.2026: näher zusammen) — die
Zeichen selbst sind 26px, die Trefferfläche 44px. Mitte zu Mitte sind das
56px und damit fast genau das Mass des Vorbilds (dort 55px). Der Abstand
ist bewusst am **Kasten** gespart, nicht an der Trefferfläche: die bleibt
bei 44px, wie bei den Kopf-Buttons und wie es für Finger nötig ist. */
/* **Die Reihe muss am `
` hängen, nicht am Textelement.** WordPress packt
den Inhalt eines Textelements in einen Absatz — steht `display: flex` nur
aussen, ist dieser Absatz das einzige Flex-Kind und die drei Symbole
kleben aneinander (gemessen: 44px Abstand statt 40px Lücke). Beide Ebenen
tragen die Regel, damit es auch dann stimmt, wenn der Absatz einmal
wegfällt. */
.rjr-fuss .rjr-fuss__sozial,
.rjr-fuss .rjr-fuss__sozial p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin: 0;
}
/* **14px, nicht 28** (Vorgabe Vincenzo, 25.08.2026: näher an die Zeile).
Der Wert im Stylesheet ist nicht der Abstand, den man sieht: die
Trefferfläche ist 44px hoch und hält das 26px-Zeichen mittig, also liegen
**9px Luft** über dem Zeichen. Dazu kommt der Rest der Zeilenbox des
Absatzes (16px auf 27.2px Zeilenhöhe). Gemessen ergaben 28px Rand einen
optischen Abstand von **37px**; 14px ergeben **23px** — die Zeile und die
drei Symbole lesen sich damit als ein Block. Gespart ist wieder am
Kasten, nicht an der Trefferfläche: die bleibt bei 44px. */
.rjr-fuss .rjr-fuss__sozial {
margin-top: 14px;
}
.rjr-fuss .rjr-fuss__sozial a,
.rjr-fuss .rjr-fuss__sozial a:hover,
.rjr-fuss .rjr-fuss__sozial a:focus {
text-decoration: none !important;
}
.rjr-fuss .rjr-fuss__sozial a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 26px;
color: var(--awb-color5);
transition: color 0.2s, transform 0.2s;
}
.rjr-fuss .rjr-fuss__sozial a:hover,
.rjr-fuss .rjr-fuss__sozial a:focus-visible {
color: hsla(var(--awb-color5-h), var(--awb-color5-s), calc(var(--awb-color5-l) - 9%), var(--awb-color5-a));
transform: translateY(-2px);
}
@media (max-width: 640px) {
/* Die Zeile bricht auf dem Telefon ohnehin um — etwas kleiner gesetzt
bleiben die Umbrüche ruhiger. */
.rjr-fuss .rjr-fuss__zeile p {
font-size: 15px;
}
.rjr-fuss .rjr-fuss__sozial,
.rjr-fuss .rjr-fuss__sozial p {
gap: 8px;
}
}
/* =========================================================================
COOKIE-HINWEIS — Schliesskreuz, 25.08.2026
Das Plugin «iComply Cookie Notice» setzt sein Kreuz mit `top: 0; right: 0`
in einen 45×45px-Kasten — **bündig in die Ecke der Karte**. Gemessen:
Oberkante des Zeichens exakt auf der Kartenkante (Versatz 0), rechts 14px.
Damit sitzt es im 12px-Radius der Ecke und wirkt, als hinge es heraus
(beanstandet von Vincenzo, 25.08.2026).
Zwei Ursachen, beide hier behoben:
1. **Kein Abstand zur Ecke.** Jetzt 6px von oben und rechts; das Zeichen
steht damit 26px von beiden Kanten und frei vom Radius.
2. **Das Zeichen hängt am oberen Rand seines Kastens.** Das Plugin
zentriert über `line-height: 40px` — das trägt nicht, sobald das Bild
nicht als reine Textzeile ausgeliefert wird. `flex` zentriert es in
beide Richtungen, unabhängig von der Zeilenhöhe.
Die Trefferfläche bleibt mit 40px im tastbaren Bereich.
**Warum das hier steht und nicht im Plugin:** Der Child-Theme-Stylesheet
lädt **nach** dem des Plugins (nachgesehen in der Seitenausgabe), eine
Regel mit gleicher Spezifität gewinnt also. Ein Eingriff in den
Plugincode wäre beim nächsten Update weg.
====================================================================== */
#simple-cookies .sc-closer {
top: 6px;
right: 6px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
#simple-cookies .sc-closer img {
display: block;
width: 14px;
height: auto;
}
/* =========================================================================
UNTERSEITEN — Kopf, halbhoher Hero, Rechtstext
Erste Unterseite: «Datenschutz» (Seite 4394), 02.09.2026.
Die Regeln sind bewusst allgemein gehalten — Impressum und AGB bekommen
denselben Aufbau, ohne dass hier etwas dazukommen muss.
========================================================================= */
/* --- Kopf der Unterseiten ----------------------------------------------
Eigene Layout Section 4395 «Kopf Unterseiten»: Logo links, ein einziger
Knopf «Zurück» rechts, keine Navigation. Alles Übrige — Klebeverhalten,
Ausblenden beim Scrollen, Schatten, Knopfstil — erbt sie unverändert von
`.fusion-tb-header` und `.rjr-btn-ring` weiter oben.
Ab 1301px zieht die Regel weiter oben beide Spalten auf `width: auto` und
setzt ihre Aussenabstände auf 0 — dort trug bisher die Menüspalte
(`flex: 1 1 auto`) den Zwischenraum. Ohne Menü fehlt dieser Schieber,
Logo und Knopf klebten links zusammen. `margin-left: auto` an der
Knopfspalte ersetzt ihn. Die Klasse steht doppelt, weil die Regel oben
`margin-left: 0 !important` setzt — gleiche Spezifität, spätere gewinnt
nur bei gleicher Gewichtung, und `!important` steht auf beiden Seiten. */
@media (min-width: 1301px) {
.rjr-kopf-seite .rjr-hdr-cta.rjr-hdr-cta {
margin-left: auto !important;
}
}
/* --- Hero der Unterseiten: halb so hoch --------------------------------
Vorgabe Vincenzo (02.09.2026): «Die Hero Sektion soll halb so hoch sein
wie diese aus der Startseite.» Dieselbe Rechnung wie dort, durch zwei —
und die Grenzen von `clamp()` mit: 560 → 280, 900 → 450.
Die Klasse `rjr-hero` steht am selben Container, deshalb gelten Radius,
Aussenabstand, Innenabstand und der Lesbarkeitsverlauf unverändert.
Statt des Videos trägt der Container ein statisches Bild
(`skip_lazy_load="skip"`, damit es nicht erst beim Scrollen nachgeladen
wird — es steht über der Falz).
**Warum die 280px unten:** Im Hero steht nur noch der Titel, kein
Textblock. 280px tragen die grösste Titelstufe (60px) samt 80px Polster
oben und unten mit Luft. */
.rjr-hero--seite.fusion-fullwidth {
min-height: 450px; /* Rückfall ohne clamp */
/* Rückfall für Browser ohne svh */
min-height: clamp(280px, calc((100vh - var(--rjr-kopfhoehe, 122px) - 4px - var(--rjr-randaussen)) / 2), 450px);
min-height: clamp(280px, calc((100svh - var(--rjr-kopfhoehe, 122px) - 4px - var(--rjr-randaussen)) / 2), 450px);
}
/* Unter 821px lässt die Startseite ihren Hero mitwachsen — dort stehen Badge,
Titel, Lead und Knopf untereinander, eine erzwungene Höhe würde sie stauchen.
Hier steht **nur** der Titel: ohne Mindesthöhe schrumpft die Karte auf 168px
und wirkt wie ein Streifen. Deshalb gilt die Halbierung auch auf dem Telefon,
nur mit tieferen Grenzen. Gegenprobe bei 390 x 844: Startseite 735px, hier
353px — die Hälfte, wie verlangt. */
@media (max-width: 820px) {
.rjr-hero--seite.fusion-fullwidth {
min-height: 300px;
min-height: clamp(240px, calc((100svh - var(--rjr-kopfhoehe, 122px) - 4px - var(--rjr-randaussen)) / 2), 420px);
}
}
/* --- Der Hero-Titel steht auf der Kante des Inhalts --------------------
Vorgabe Vincenzo (02.09.2026): «der Titel in der Hero Sektion bitte auch
beginnend ab dem Inhalt wie unten, damit es bündig ist.»
Auf der Startseite steht der Hero-Text **72px innerhalb der Karte** — das
ist ein eigenes Mass, keines vom Sektionsraster. Auf einer Unterseite mit
nur einer Textsektion darunter fällt der Versatz auf.
**Am System gemessen**, wo der Text tatsächlich beginnt (linke Kante des
Textelements, fünf Fensterbreiten):
Fenster Hero-Karte Text beginnt bei
1920 20 … 1900 290
1440 20 … 1420 50
1201 20 … 1181 50
1100 30 … 1070 30
390 30 … 360 30
Zwei Bereiche, zwei Rechnungen:
**Ab 1201px** liegt die Karte bei 20px, der Text auf dem 1340er-Raster.
Der Innenabstand ist deshalb keine feste Zahl, sondern **eine Rechnung**:
max(10px, (100% − 1380.2px) / 2 + 30px)
`100%` ist die Breite des Elternelements (der Inhaltsbereich, Fenster − 60),
**1380.2px** Avadas Zeilenbreite für Sektionen (`site_width` 1340 + 40
Spaltenpolster), die **30px** darin Avadas seitlicher Innenabstand.
**Warum die Zeile bei Avada erst ab 1400px stehen bleibt:** Bis dahin ist
sie nicht auf 1380.2px begrenzt, sondern **breiter als der Inhaltsbereich**
— sie trägt einen negativen Aussenrand von 1.455 % ihrer eigenen Breite, den
das Spaltenpolster innen wieder aufhebt. Beides kürzt sich weg: **die
Textkante steht bis 1400px unverrückbar auf 30px.** Darüber greift die
Begrenzung, die Zeile wird mittig gestellt und die Kante wandert mit —
1440 → 50, 1600 → 130, 1920 → 290. Genau das bildet die Rechnung ab; der
Mindestwert 10px ist der Bereich bis 1400px (Karte bei 20px + 10 = 30).
**Alles daran ist gemessen, nicht hergeleitet** — an neun Fensterbreiten
zwischen 390 und 1920px.
**Der Weg über die Zeile selbst wäre der naheliegendere und geht nicht:**
Avada schreibt `max-width: calc(100% + 0px) !important` als **Inline-Stil**
an jede `.fusion-builder-row`. Dagegen kommt kein Stylesheet an — die
bekannte Falle aus `10_AVADA-AUFBAU.md`.
**Unter 1201px** nimmt die Regel weiter oben der Karte ihren negativen
Aussenrand; sie sitzt dann bei 30px — **genau dort, wo auch der Text
beginnt**. Bündig hiesse dort Innenabstand 0, und der Titel klebte an der
Bildkante. Deshalb behält die Karte hier ihre 20px vom Fensterrand und
bekommt 10px Innenabstand: der Titel landet auf 30px wie der Text, die
Karte steht 10px weiter aussen. Dasselbe Verhältnis wie oben, nur enger. */
/* **Seit dem 02.09.2026 abends: 40px statt 30, und der Zuschlag im `calc`
fällt von 30 auf 10.** Unter dem Deckel soll der Titel auf derselben 60px-
Kante stehen wie der Rechtstext darunter — die Karte steht 20px vom Rand,
also 40px Innenabstand. Über dem Deckel zählt nur noch die Zentrierung; die
+30px sind der Rest, den die Sektionen aus ihrem eigenen Innenabstand
(10px sichtbar) und der halben Rinne (20px) mitbringen. Nachgerechnet bei 1194 / 1440 / 1920: Titel und Text auf
derselben Kante. */
.rjr-hero--seite.fusion-fullwidth {
--rjr-seite-rand: max(40px, calc((100% - 1380.2px) / 2 + 30px));
padding-left: var(--rjr-seite-rand) !important;
padding-right: var(--rjr-seite-rand) !important;
}
/* Der Innenabstand muss hier stehen, weil die Regel des Startseiten-Hero
(56px bzw. 28px) sonst gewinnt. */
@media (max-width: 1200px) {
.rjr-hero--seite.fusion-fullwidth {
padding-left: var(--rjr-seite-rand) !important;
padding-right: var(--rjr-seite-rand) !important;
}
}
/* **Die Unterseiten machen den Sprung auf 30px nicht mit.** Auf der Startseite
folgt der Hero unter 1001px den Kacheln darunter; hier gibt es keine
Kacheln, sondern den Rechtstext — und der beginnt bei 30px. Bliebe die
Karte ebenfalls bei 30px, wäre bündig gleichbedeutend mit Innenabstand 0
und der Titel klebte an der Bildkante. Sie behält deshalb ihre 20px, der
Titel seine 10px Vorlauf, und beide stehen zusammen auf der 30px-Kante des
Textes. */
@media (max-width: 1000px) {
.rjr-hero--seite.fusion-fullwidth {
margin-left: calc(var(--rjr-randaussen) - 30px) !important;
margin-right: calc(var(--rjr-randaussen) - 30px) !important;
margin-top: calc(var(--rjr-randaussen) - 16px) !important;
}
}
@media (max-width: 820px) {
.rjr-hero--seite.fusion-fullwidth {
padding-left: var(--rjr-seite-rand) !important;
padding-right: var(--rjr-seite-rand) !important;
}
}
/* --- Rechtstext (Datenschutz, später Impressum und AGB) ----------------
**Blocksatz auf Vorgabe Vincenzo (02.09.2026).** Blocksatz ohne Trennung
reisst im Deutschen Löcher in die Zeile — die Komposita sind zu lang.
Deshalb `hyphens: auto`; es greift, weil `` auf `de-CH` steht.
Safari braucht bis heute die Herstellervorsilbe.
**Zeilenbreite: die volle Inhaltsbreite** (Vorgabe Vincenzo, 02.09.2026).
Vorher standen hier 900px. Über die ganze Sektionsbreite kommen bei 17px
Schrift rund 140 Zeichen in die Zeile — mehr, als die Typografie empfiehlt
(60–90). Der Vorteil: Titel und Text stehen auf **derselben** Kante, und
der Rechtstext ist Nachschlagetext, kein Lesetext.
**Lange URLs brechen um** (`overflow-wrap`). Im Blocksatz ist das keine
Kür: eine nicht umbrechbare URL von 60 Zeichen zieht die Zeile davor
auseinander, bis sie auseinanderfällt. */
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt {
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt h2 {
/* **Nicht** über `--awb-typography2`: Der Satz «Subheadings» steht auf
diesem System auf **19px/400, Zeilenhöhe 1.1** — am 02.09.2026
ausgelesen. Das ist die Grösse des Lead-Textes und trägt keine
Überschrift; die Tabelle in `02_DESIGN-SYSTEM.md` nennt dafür 24px/600,
diese Startwerte stehen aber so nicht in Avada. Bis die Skala dort
nachgezogen ist, stehen die zwei Werte hier. Schriftfamilie und Farbe
laufen weiterhin über die Globals. */
font-size: 24px;
font-weight: 600;
line-height: 1.35;
color: var(--awb-color7);
/* Überschriften stehen im Flattersatz — eine einzeilige Zeile im
Blocksatz wäre wirkungslos, eine zweizeilige gerissen. */
text-align: left;
-webkit-hyphens: manual;
hyphens: manual;
margin: 52px 0 14px;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt h2:first-child {
margin-top: 0;
}
/* Unterüberschriften — in den AGB die Paragraphen 10.1 bis 10.4. Zwei Stufen
unter der Schrift des Fliesstextes wäre zu wenig Abstand zur Überschrift
darüber; 19px/600 hält die Rangfolge 24 → 19 → 17 lesbar. */
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt h3 {
font-size: 19px;
font-weight: 600;
line-height: 1.4;
color: var(--awb-color7);
text-align: left;
-webkit-hyphens: manual;
hyphens: manual;
margin: 34px 0 10px;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt p {
margin: 0 0 20px;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt p:last-child {
margin-bottom: 0;
}
/* Anschrift und Kontakt im Impressum: kurze Zeilen mit harten Umbrüchen.
Blocksatz würde drei Wörter über die halbe Sektionsbreite ziehen, die
Trennung eine Strasse zerlegen — beides hier ausdrücklich aus. */
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt .rjr-rechtstext__block {
text-align: left;
-webkit-hyphens: manual;
hyphens: manual;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt ul {
margin: 0 0 20px;
padding-left: 22px;
list-style: disc;
/* Aufzählungspunkte sind kurz — Blocksatz würde sie zerdehnen. */
text-align: left;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt li {
margin-bottom: 6px;
}
/* Links im Fliesstext: Markenrot, unterstrichen, und beim Überfahren die
Abdunklung der Buttons — dieselbe Rechnung, damit die Seite eine Sprache
spricht. Die Verdopplung der Klasse hebt die Spezifität über Avadas
eigene Linkfarbe. */
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt a {
color: var(--awb-color5);
text-decoration: underline;
text-underline-offset: 2px;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt a:hover,
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt a:focus-visible {
color: hsla(var(--awb-color5-h), var(--awb-color5-s), calc(var(--awb-color5-l) - 9%), var(--awb-color5-a));
}
/* Auf dem Telefon ist Blocksatz eine Zumutung: bei rund 40 Zeichen je Zeile
entstehen zwischen den Wörtern Lücken, durch die man hindurchsieht.
Dort deshalb Flattersatz. Die Trennung bleibt an. */
@media (max-width: 640px) {
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt {
text-align: left;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt h2 {
font-size: 21px;
margin-top: 40px;
}
.rjr-rechtstext__inhalt.rjr-rechtstext__inhalt h3 {
font-size: 18px;
margin-top: 28px;
}
}
/* =========================================================================
FLYOUT-MENÜ FÜR TABLET UND TELEFON — 02.09.2026
Vorgabe Vincenzo: eigenes Burger-Symbol (drei versetzte Balken, schwarz,
beim Überfahren rot); im Flyout linksbündig die Navigation, darunter die
zwei Knöpfe, darunter die Social-Symbole klein; im Querformat Navigation
links, Knöpfe und Symbole rechts. Die Knöpfe stehen unterhalb der
Umschaltgrenze **nur noch im Flyout**.
Gebaut wird das Feld von `js/rjr-menu.js` aus dem, was ohnehin auf der
Seite steht — Menüpunkte, Kopfknöpfe, Social-Symbole des Fusses.
========================================================================= */
/* --- Die Knöpfe verlassen den Kopf ------------------------------------
**1300px ist Avadas Umschaltgrenze** (`custom_breakpoint` am Menü-Element):
genau dort klappt die Navigation auf den Knopf ein. Ab derselben Breite
gehören auch die zwei Kopfknöpfe ins Flyout — sonst stünden sie doppelt.
`.rjr-hdr-cta` ist die Spalte für Tablet und Desktop, `.rjr-hdr-cta-klein`
die gestapelte Fassung, die bisher unter 821px erschien. */
/* **Nur der Kopf der Startseite** (`rjr-kopf-start`). Der Kopf der
Unterseiten (4395) benutzt dieselbe Spaltenklasse `rjr-hdr-cta` für seinen
«Zurück»-Knopf — ohne diese Einschränkung war er unter 1301px verschwunden.
Am 02.09.2026 beim Prüfen aufgefallen und sofort berichtigt. */
@media (max-width: 1300px) {
.rjr-kopf-start .rjr-hdr-cta,
.rjr-kopf-start .rjr-hdr-cta-klein {
display: none !important;
}
}
/* --- Das Burger-Symbol -------------------------------------------------
Drei versetzte Balken nach Vincenzos Vorlage: der mittlere kürzer und
links eingerückt, der untere so lang wie der mittlere endet. Gezeichnet
wird mit drei ``, die `js/rjr-menu.js` in Avadas Knopf hängt; Avadas
eigene Font-Awesome-Zeichen werden ausgeblendet, nicht entfernt — der
Screenreader-Text im selben Knopf bleibt damit unangetastet. */
.awb-menu .rjr-burger .awb-menu__m-collapse-icon {
display: none !important;
}
/* **Die Klasse steht dreifach** (`.awb-menu__m-toggle.rjr-burger` in
`.awb-menu`): Avadas eigene Regel für den Knopf hat zwei Klassen und lädt
nach dem Child-Theme — bei Gleichstand gewinnt sie. Mit `display: block`
wäre die Ausrichtung im Knopf wirkungslos geblieben.
**44 × 44px Trefferfläche**, das Symbol darin rechtsbündig: die Fläche
wächst nach innen, die sichtbare Kante bleibt, wo sie hingehört. Darunter
wäre der Knopf auf dem Telefon kaum zu treffen (WCAG 2.5.8 nennt 24px als
Mindestmass, 44px ist die verbreitete Praxis).
**5px vom Rand**, spiegelbildlich zum Logo: das steht seit heute 5px rechts
der linken Inhaltskante, das Symbol steht 5px links der rechten. */
/* **Nur im eingeklappten Zustand.** `collapse-enabled` setzt Avada selbst,
sobald die Umschaltgrenze unterschritten ist; oberhalb heisst die Klasse
`awb-menu_desktop` und der Knopf steht auf `display: none`. Ohne diese
Bedingung hätte das `!important` unten den Burger auch auf dem Desktop
sichtbar gemacht — bei 1301px stand er am 02.09.2026 neben dem vollen
Menü, bis die Regel enger gefasst war. */
.awb-menu.collapse-enabled .awb-menu__m-toggle.rjr-burger {
display: flex !important; /* Avada setzt `block` — sonst wirkt die Ausrichtung im Knopf nicht */
align-items: center;
justify-content: flex-end;
width: 44px;
height: 44px;
padding: 0 !important;
margin-right: 5px;
background: none !important;
border: 0 !important;
color: var(--awb-color7);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.awb-menu .awb-menu__m-toggle.rjr-burger:hover,
.awb-menu .awb-menu__m-toggle.rjr-burger:focus-visible {
color: var(--awb-color5);
}
/* **Zwei Zeichen aus dem Satz «Recruitment Agency»** (Beitrag 43) — demselben,
aus dem der Pfeil auf jedem Knopf der Website kommt. `menu-two` sind drei
versetzte Balken, `close` das dazu gezeichnete Kreuz. Beide liegen
übereinander; die Klasse am `` entscheidet, welches man sieht.
**Warum übereinander und nicht nacheinander:** so behält der Knopf seine
Grösse, egal welches Zeichen gerade steht — nichts springt beim Umschalten. */
.rjr-burger__symbol {
position: relative;
display: block;
width: 34px;
height: 22px;
}
.rjr-burger__symbol i {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.rjr-burger__symbol .rjr-burger__zu {
opacity: 0;
transform: rotate(-90deg);
}
.rjr-flyout-offen .rjr-burger__symbol .rjr-burger__auf {
opacity: 0;
transform: rotate(90deg);
}
.rjr-flyout-offen .rjr-burger__symbol .rjr-burger__zu {
opacity: 1;
transform: none;
}
.rjr-flyout-offen .awb-menu .awb-menu__m-toggle.rjr-burger { color: var(--awb-color5); }
/* Avadas eigener Aufklapper bleibt zu — das Feld unten ersetzt ihn. */
.awb-menu.collapse-enabled .awb-menu__main-ul {
display: none !important;
}
/* Der Knopf sitzt am rechten Rand seiner Spalte, das Logo links: damit steht
das Paar auf denselben Kanten wie Kopf und Inhalt.
**Die 44px rechts an der Menüspalte müssen weg.** Sie stehen im Element
(`padding_right="44px"`) und trennen auf dem Desktop das Menü von den zwei
Knöpfen. Unterhalb der Umschaltgrenze gibt es diese Knöpfe nicht mehr — das
Polster schob den Burger dort 44px vom Rand weg. */
.fusion-tb-header .rjr-hdr-nav .awb-menu.collapse-enabled {
width: 100%;
justify-content: flex-end;
}
@media (max-width: 1300px) {
.rjr-kopf-start .rjr-hdr-nav > .fusion-column-wrapper {
padding-right: 0 !important;
}
/* **Und die Spalte muss den freigewordenen Platz nehmen.** Die Breiten im
Element sind Prozentwerte für drei Spalten (22 / 15 / 63). Fällt die
Knopfspalte weg, endet die Menüspalte bei 37 % — der Burger stand auf
einem 1024er-Tablet mitten auf der Seite. Mit `flex: 1` reicht sie bis
zum rechten Rand, und der Knopf sitzt dort, wo er hingehört. */
.rjr-kopf-start .rjr-hdr-nav {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
}
}
/* --- Das Feld ---------------------------------------------------------
Es beginnt unter dem Kopf und füllt den Rest des Fensters. `100svh` ist
die **kleine** Fensterhöhe: die, die bleibt, wenn die Browserleisten
sichtbar sind — mit `vh` reichte das Feld auf dem Telefon unter die
Adressleiste und die letzten Zeilen wären unerreichbar.
**Weiss, leicht durchscheinend** (Vorgabe): 96 % Deckung plus eine leichte
Unschärfe dahinter. Der Inhalt scheint gerade so durch, dass man sieht,
worüber das Feld liegt — lesbar bleibt es trotzdem: Text auf 96 % Weiss
über beliebigem Grund misst gegen Anthrazit noch über 12:1. */
.rjr-flyout {
position: fixed;
inset: var(--rjr-kopfhoehe, 122px) 0 0 0;
/* **Über allem, was sonst noch schwebt.** Am 02.09.2026 nachgemessen:
der Cookie-Balken liegt auf 10 000, der Kontakt-Aufklapper des Plugins
«Any Contact Us» auf 9 999 999 — beide lagen damit über dem offenen
Menü. Der Kopf (99) bleibt darunter, das stört nicht: das Feld beginnt
erst unter ihm, überlappen tun sie nie. */
z-index: 10000000;
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.rjr-flyout-offen .rjr-flyout {
opacity: 1;
transform: none;
}
/* Das Feld nimmt beim Öffnen den Fokus auf (`tabindex="-1"`), damit
Screenreader an seinem Anfang beginnen — sichtbar sein muss dieser Fokus
nicht: er sitzt auf einem Behälter, nicht auf einem Bedienelement. Die
Links darin behalten ihren eigenen Rahmen für die Tastatur. */
.rjr-flyout:focus {
outline: none;
}
/* Der schwebende Kontaktknopf des Plugins «Any Contact Us» verschwindet,
solange das Menü offen ist — ein zweiter roter Knopf über der Navigation
ist nur Lärm. Fällt das Plugin weg (Punkt 115), fällt diese Regel mit ihm. */
html.rjr-flyout-offen .wacu-widget {
display: none !important;
}
/* Solange das Feld offen ist, scrollt die Seite dahinter nicht mit — sonst
fährt der Kopf beim Wischen weg und nimmt den Schliessknopf mit. */
html.rjr-flyout-offen,
html.rjr-flyout-offen body {
overflow: hidden;
}
/* **Und genau diese Sperre nimmt dem klebenden Kopf den Bezugspunkt.**
`position: sticky` klebt an seinem *Scroll-Behälter*; steht der auf
`overflow: hidden`, gibt es nichts mehr zu scrollen und das Element fällt
auf seine Stelle im Dokument zurück — bei 900px Scrollhöhe also 900px über
den Bildrand. Am 02.09.2026 genau so gemessen: Kopf `top: -900`, der
Schliessknopf ausser Reichweite, das Feld liess sich nicht mehr schliessen.
Solange das Feld offen ist, steht der Kopf deshalb **fest am Fensterrand**
statt zu kleben — `fixed` bezieht sich auf das Fenster und ist von der
Sperre nicht betroffen. `transform: none` hebt dazu ein allfälliges
Ausblenden auf: wer während des Scrollens auf den Knopf tippt, soll ihn
nicht mitsamt dem Kopf verlieren. */
html.rjr-flyout-offen .fusion-tb-header {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: none !important;
}
.rjr-flyout__innen {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
padding: 40px 30px 48px;
min-height: 100%;
}
/* --- Navigation: linksbündig, gross genug für den Daumen --------------- */
.rjr-flyout__nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.rjr-flyout__nav li + li {
margin-top: 4px;
}
.rjr-flyout__nav a {
display: block;
padding: 10px 0; /* zusammen mit der Zeilenhöhe > 44px */
font-size: 26px;
font-weight: 600;
line-height: 1.25;
color: var(--awb-color7);
text-decoration: none;
}
.rjr-flyout__nav a:hover,
.rjr-flyout__nav a:focus-visible {
color: var(--awb-color5);
}
/* Kein blaues Kästchen beim Antippen — Mobilbrowser legen es von sich aus
über jeden Link. Der Rahmen für die Tastatur bleibt, er kommt über
`:focus-visible` und nur dann. */
.rjr-flyout a {
-webkit-tap-highlight-color: transparent;
}
.rjr-flyout a:focus-visible {
outline: 2px solid var(--awb-color5);
outline-offset: 3px;
border-radius: 4px;
}
/* --- Knöpfe: wie im Kopf, nur untereinander und auf voller Breite ------ */
.rjr-flyout__neben {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
width: 100%;
}
.rjr-flyout__knoepfe {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 320px;
}
.rjr-flyout__knoepfe .fusion-button {
width: 100%;
justify-content: center;
}
/* **Kräftigeres Grau für den Telefonknopf** (Vorgabe Vincenzo, 02.09.2026:
«sieht man fast nicht auf dem Smartphone»). Im Kopf steht der Knopf auf
`#f5f5f5` — dort trägt ihn der rote Knopf daneben. Im Feld liegt er allein
auf 96 % Weiss und verschwand darin fast: **1.09:1** gegen den Grund.
Neu **#DFDFDF** — **1.33:1** gegen Weiss, als Fläche klar zu sehen, ohne zum
zweiten Hauptknopf zu werden. Beim Überfahren **#CFCFCF**, dieselbe
Abstufung wie vorher. Der Text bleibt anthrazit und misst **12.37:1**.
Avada schreibt die Knopffarben als **eigene Eigenschaften in den
Inline-Stil** (`--button_gradient_top_color`). Inline schlägt Stylesheet,
deshalb `!important` — auf einer Eigenschaft, nicht auf einer Deklaration
des Aussehens. */
.rjr-flyout__knoepfe .rjr-btn-tel {
--button_gradient_top_color: #DFDFDF !important;
--button_gradient_bottom_color: #DFDFDF !important;
--button_gradient_top_color_hover: #CFCFCF !important;
--button_gradient_bottom_color_hover: #CFCFCF !important;
--rjr-btn-ring: #DFDFDF !important;
}
.rjr-flyout__knoepfe .rjr-btn-tel.rjr-btn-tel:hover,
.rjr-flyout__knoepfe .rjr-btn-tel.rjr-btn-tel:focus-visible {
background-color: #CFCFCF !important;
}
/* --- Social-Symbole: klein, in einer Reihe ----------------------------- */
.rjr-flyout__sozial {
display: flex;
gap: 10px;
}
.rjr-flyout__sozial a {
display: flex;
align-items: center;
justify-content: center;
width: 40px; /* Trefferfläche, nicht Symbolgrösse */
height: 40px;
border-radius: 999px;
background: var(--awb-color2);
color: var(--awb-color7);
font-size: 16px; /* «klein, aber» — Vorgabe Vincenzo */
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.rjr-flyout__sozial a:hover,
.rjr-flyout__sozial a:focus-visible {
background: var(--awb-color5);
color: var(--awb-color1);
}
/* --- Querformat: Navigation links, Knöpfe und Symbole rechts -----------
Vorgabe Vincenzo. Im Querformat ist die Höhe knapp — nebeneinander passt
beides ohne Scrollen ins Bild, untereinander nicht. */
@media (orientation: landscape) {
.rjr-flyout__innen {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
padding: 36px 30px 40px;
}
.rjr-flyout__neben {
width: auto;
align-items: flex-end;
}
.rjr-flyout__knoepfe {
width: auto;
max-width: none;
}
.rjr-flyout__nav a {
font-size: 22px;
padding: 8px 0;
}
}
/* Sehr flache Fenster (Telefon quer): alles eine Stufe enger. Bei 844 × 390
war das Feld sonst 12px zu hoch und musste gescrollt werden — für sechs
Menüpunkte, zwei Knöpfe und drei Symbole ist das unnötig. Nachgemessen
passt es jetzt ohne Scrollen. */
@media (orientation: landscape) and (max-height: 480px) {
.rjr-flyout__nav a {
font-size: 18px;
padding: 4px 0;
}
.rjr-flyout__nav li + li {
margin-top: 0;
}
.rjr-flyout__innen {
gap: 28px;
padding: 20px 30px 24px;
}
.rjr-flyout__neben {
gap: 18px;
}
.rjr-flyout__knoepfe {
gap: 10px;
}
}
/* Wer «weniger Bewegung» eingestellt hat, bekommt keinen Übergang. */
@media (prefers-reduced-motion: reduce) {
.rjr-flyout,
.rjr-burger__symbol i {
transition: none;
}
}
/* =========================================================================
COOKIE-HINWEIS NUR AUF DEM DESKTOP — 02.09.2026
Vorgabe Vincenzo: «Den Cookies-Banner für Smartphone und Tablets
entfernen, damit er nicht angezeigt wird, nur bei Desktop.»
**Zwei Bedingungen, mit ODER verknüpft:**
· `max-width: 1300px` — dieselbe Grenze, an der auch die Navigation auf
den Burger einklappt. Was hier «Tablet» heisst, heisst dort schon
«kein Desktop»; zwei verschiedene Grenzen im selben Projekt wären eine
Fehlerquelle.
· `pointer: coarse` — ein Zeigegerät ohne feine Spitze, also ein Finger.
Damit fallen auch grosse Tablets darunter, deren Fenster breiter als
1300px ist (ein iPad Pro quer misst 1366).
Gezeigt wird der Balken also nur, wo **beides** nicht zutrifft: breites
Fenster **und** Maus. Der Balken bleibt im Dokument stehen und wird nur
ausgeblendet — das Plugin bleibt unangetastet, und die Regel ist mit einer
Zeile zurückzunehmen.
⚠️ **Das ist eine inhaltliche Entscheidung, keine gestalterische.** Ein
Cookie-Hinweis, den die Mehrheit der Besucher nie sieht, erfüllt seinen
Zweck nicht. Die offene Consent-Frage (`07_OFFENE-FRAGEN.md`, Punkte 107
und 113 — der Balken blockiert weder Google Maps noch den Instagram-Feed)
wird davon nicht berührt und bleibt vor dem Go-Live zu klären.
========================================================================= */
@media (max-width: 1300px), (pointer: coarse) {
#simple-cookies {
display: none !important;
}
}
/* =========================================================================
TABLET: INHALTE ZURÜCK IN IHREN KASTEN — 02.09.2026
Vorgabe Vincenzo, mit drei iPad-Aufnahmen: «Auf dem Tablet sind bei den
meisten Sektionen die Inhalte ausserhalb des Inhaltsbereiches.»
── Was gemessen wurde ──
Linke Kante des ersten Textes je Sektion, bei 1194px (iPad quer):
Leistungen -5 ← fünf Pixel **ausserhalb** des Fensters
Projekte 13
Über uns 13
Kontakt 37
FAQ 29
Instagram 30
Bei 1440px stehen dieselben Sektionen auf 30 / 30 / 30 / 49 / 50 — dort
stimmt es. Der Fehler liegt also im Band **unter 1400px**.
── Die Ursache: unsere eigene Regel, an einer Stelle die nicht mitwächst ──
«Leistungen» und «Über uns» tragen seit dem 24.08.2026 den Griff
width: calc(100% + 3%); margin-inline: calc(-3% / 2);
max-width: calc(var(--rjr-inhaltsbreite) * 1.03);
in einer Zeile mit `justify-content: center`. **Er funktioniert nur,
solange die Deckelung greift:** ab 1400px Fensterbreite ist die Zeile
mindestens 1340px breit, die Spalte wird auf 1380.2px begrenzt und sitzt
damit richtig. Darunter greift die Deckelung nicht mehr — die Spalte ist
3 % breiter als ihre Zeile und wird zentriert, hängt also **1.5 % auf jeder
Seite hinaus**. Und weil die Regel auf zwei verschachtelten Ebenen zieht,
addiert sich der Versatz: bei 1194px zweimal 17px, macht 35px nach links.
Bei «Projekte» ist es die Kehrseite desselben Rasters: dort haben wir das
Spaltenpolster abgewählt (`--awb-spacing-* : 0`), mit dem Avada den
negativen Aussenrand seiner Zeile ausgleicht. Ab 1440px fällt das nicht
auf, darunter schon — 17px nach links.
── Die Behebung ──
Unter 1400px wird der 3-%-Griff abgeschaltet (die Spalte füllt einfach ihre
Zeile) und das Spaltenpolster bei «Projekte» wieder eingeschaltet.
**Nicht** angetastet wird die Breite der Zeilen selbst: Avada schreibt dort
`width: calc(100% + 0px) !important` **inline** ins Markup, dagegen kommt
keine Regel an — der Versuch, sie auf 100 % zu zwingen, liess die Sektion
34px nach rechts überstehen (gemessen).
========================================================================= */
/* **Dieser Block ist am 02.09.2026 abends leer geworden und entfallen.** Er
hat unterhalb von 1400px drei Dinge zurückgenommen: den 3-%-Griff bei
«Leistungen» und «Über uns», das fehlende Spaltenpolster bei «Projekte» und
den Zeilenzug bei «Kontakt». Alle drei Griffe gibt es nicht mehr — «Das
Raster» am Ende der Datei ersetzt sie durch **eine** Rechnung, die auf
jeder Breite gilt. Die Beschreibung des Fehlers, den er behoben hat, steht
weiter oben; sie bleibt lesenswert, weil dasselbe Muster (eine Regel für
ein Band, nie im anderen geprüft) an diesem Tag dreimal aufgetreten ist. */
/* =========================================================================
DAS RASTER — EINE TEXTKANTE FÜR DIE GANZE SEITE — 02.09.2026 abends
Vorgabe Vincenzo: «Kannst du alle Textabstände / Inhaltsabstände nochmals
konsolidieren und mehr nach innen setzen, finde den Abstand nach aussen zu
knapp. Auch die Texte ohne Hintergrundkasten.»
── Was vorher war ──
Zwei Familien von Sektionen mit zwei verschiedenen Rechnungen:
| Familie | Kachel | Innenabstand | Textkante |
|----------------------------------|--------|--------------|-----------|
| Leistungen · Über uns · Kontakt | 20px | 10px | 30px |
| USP · Einleitung · Projekte · Instagram · FAQ | keine | 30px | 30 oder 50 |
In der Kachel blieben damit **10px** neben dem Text stehen — das war das
Gedrängte. Und die zweite Familie sprang: Avada zieht ihre Zeile um das
halbe Spaltenpolster heraus (−1.455 %) und legt es über den Spaltenwrapper
wieder drauf. Unterhalb von 1400px hebt sich das auf, die Textkante liegt
auf dem Innenabstand (30). **Ab 1400px greift Avadas Deckel** von 1380.2px
auf der Zeile, das Herausziehen läuft ins Leere — und das Polster steht
plötzlich allein da: 50 statt 30. Gemessen bei 1440px: Leistungen 30,
Instagram 50, FAQ 49, Kontakt 50.
── Was jetzt gilt ──
**Keine Zeile zieht mehr heraus.** `margin: auto` heisst: bleibt die Zeile
unter dem Deckel, füllt sie den Innenabstand ihrer Sektion; darüber wird
sie zentriert. Und das Spaltenpolster fällt **nur an den beiden äusseren
Kanten** weg — zwischen den Spalten bleibt es stehen, sonst klebten FAQ,
Kontakt und die USP-Zeile aneinander.
Damit ist die Textkante überall genau der Innenabstand der Sektion:
| Familie | Kachel | Innenabstand | Textkante |
|------------------|--------|-------------------|-----------|
| mit Kachel | 20px | 40px | **60px** |
| ohne Kachel | — | 60px | **60px** |
Über 1500px greift der Deckel und zentriert beide Familien auf dieselbe
Kante (bei 1920px: 270px). Der Hero ist ausgenommen: er trägt seine eigenen
72px innerhalb der Karte, seit dem 21.08.2026 auf Vincenzos Wunsch.
**Wer hier etwas ändert, misst bei 390, 768, 1024, 1194, 1366, 1440 und
1920** — jeder dieser Werte hat in dieser Datei schon einmal eine Regel
entlarvt, die nur für ein Band geschrieben war.
========================================================================= */
/* **Nur die oberste Zeile jeder Sektion.** Verschachtelte Zeilen behalten
Avadas eigenes Paar aus `width: calc(100% + 40px)` und −20px Aussenrand —
die Breite steht dort **inline mit `!important`** und lässt sich aus einem
Stylesheet nicht überstimmen; nimmt man ihr nur den Aussenrand, steht die
Zeile 40px über ihre Spalte hinaus (am 02.09.2026 beim Projekt-Banner
gemessen: rechts 20 statt 60). */
#main .fusion-fullwidth > .fusion-builder-row {
margin-left: auto !important;
margin-right: auto !important;
}
/* Avadas eigene Rinne wird abgewählt — auf **allen** Ebenen, auch in
verschachtelten Zeilen. Sie ist prozentual zur Spaltenbreite bemessen und
damit in jeder Sektion eine andere Zahl (1.455 % bei einer vollen Spalte,
3.6375 % bei einer 40-Prozent-Spalte); genau daher kamen die krummen
Kanten 49, 50, 13. */
#main .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column {
--awb-spacing-left-large: 0 !important;
--awb-spacing-right-large: 0 !important;
--awb-spacing-left-medium: 0 !important;
--awb-spacing-right-medium: 0 !important;
--awb-spacing-left-small: 0 !important;
--awb-spacing-right-small: 0 !important;
}
/* An ihre Stelle tritt **eine feste halbe Rinne von 20px je Spaltenseite** —
nur auf der obersten Ebene. Zwischen zwei nebeneinanderstehenden Spalten
ergibt das die gewohnten 40px; an den äusseren Kanten 20px, die im
Innenabstand der Sektion mitgerechnet sind (40 + 20 = 60).
Sie sitzt am Wrapper **innerhalb** der Spalte, ändert also keine
Spaltenbreite und kann nichts zum Überlaufen bringen. Der Hero ist
ausgenommen: er rechnet seit dem 21.08.2026 mit eigenen 72px. */
#main .fusion-fullwidth:not(.rjr-hero) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper {
padding-left: var(--rjr-rinne) !important;
padding-right: var(--rjr-rinne) !important;
}
/* Sektionen ohne Kachel. Die drei mit Kachel bringen ihren Innenabstand
selbst mit (20px, oben in ihren eigenen Abschnitten), der Hero seine 72px. */
#main .fusion-fullwidth:not(.rjr-hero):not(.rjr-leistungen):not(.rjr-team):not(.rjr-kontakt) {
padding-left: calc(var(--rjr-textrand) - var(--rjr-rinne)) !important;
padding-right: calc(var(--rjr-textrand) - var(--rjr-rinne)) !important;
}
/* Der Fuss steht ausserhalb von `#main` und braucht dieselbe Behandlung,
sonst stünde er als einziges Element der Seite auf einer anderen Kante
(gemessen vor der Umstellung: 30 bei 1194px, 50 bei 1440px, 290 bei 1920px). */
.fusion-tb-footer .fusion-fullwidth > .fusion-builder-row {
margin-left: auto !important;
margin-right: auto !important;
}
.fusion-tb-footer .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column {
--awb-spacing-left-large: 0 !important;
--awb-spacing-right-large: 0 !important;
--awb-spacing-left-medium: 0 !important;
--awb-spacing-right-medium: 0 !important;
--awb-spacing-left-small: 0 !important;
--awb-spacing-right-small: 0 !important;
}
.fusion-tb-footer .fusion-fullwidth > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper {
padding-left: var(--rjr-rinne) !important;
padding-right: var(--rjr-rinne) !important;
}
.fusion-tb-footer .fusion-fullwidth {
padding-left: calc(var(--rjr-textrand) - var(--rjr-rinne)) !important;
padding-right: calc(var(--rjr-textrand) - var(--rjr-rinne)) !important;
}
/* =========================================================================
TELEFON: DIE RECHTE KANTE — 03.09.2026
Vorgabe Vincenzo: «Es sieht so aus, als wäre rechts mehr Abstand zum Rand
als links.»
**Nachgemessen bei 375, 390, 414 und 430px: die Kästen stehen exakt gleich
weit vom Rand** — Kopf 35/35, Hero-Karte 30/30, Kacheln 30/30, jeder
Inhalt 60/60. Ein Fehler im Raster war es nicht.
Was man sieht, ist der **Flatterrand**. Der Text steht links auf 60 und
endet rechts, wo das nächste Wort nicht mehr passt. Über alle Absätze der
Seite gemessen (85 Zeilen bei 390px) blieben im Schnitt **57px** rechts
frei — der rechte Rand wirkt dadurch fast doppelt so breit wie der linke.
Verschärft hat es die Umstellung auf die 60px-Kante vom Vorabend: die Spalte ist auf
dem Telefon nur noch 270px breit, und deutsche Komposita wie
«Schaltanlagenbau» oder «Verteilungen» brechen darin früh um.
**Trennung statt schmalerem Rand.** `hyphens: auto` greift, weil ``
auf `de-CH` steht; nachgemessen sinkt der mittlere Rest rechts von **57
auf 42px** (−26 %). Ein schmalerer Rand hätte die Kante gerade gerückt,
aber die Flucht mit dem Hero (58px) und den Kacheln zerstört, die Vincenzo
am Vorabend bekommen hat.
**Nur Absätze und Listen.** Überschriften bleiben ungetrennt — dort fällt
ein Trennstrich auf und die Zeile ist ohnehin kurz. `.fusion-text` stand
hier zuerst mit drin und war zu grob: darunter fallen auch die roten
Eyebrows («Familienunternehmen aus Birsfelden») und die Titel der
Projektkarten, und die vertragen keinen Trennstrich. Die Absätze in diesen
Blöcken sind ohnehin `
` und damit erfasst.
========================================================================= */
@media (max-width: 1000px) {
#main p,
#main li {
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* --- Die beiden Knöpfe unter dem Instagram-Feed --------------------------
Vorgabe Vincenzo (03.09.2026): «richtig zentrieren auf dem Smartphone.» Beide standen leicht nach rechts versetzt — «Mehr laden» um
8px, «Folge uns» um 2.5px. Zwei verschiedene Ursachen, beide vom Plugin:
1. **Ein unsichtbares Element zählt mit.** `#sbi_load` ist ein
Flex-Container mit `justify-content: center` und 16px Abstand. Darin
liegt ein `sbi-screenreader`-Element mit Breite 0 — als Flex-Kind
bekommt es trotzdem seine 16px Abstand, und die Zeile wird um 8px
verschoben. `position: absolute` nimmt es aus dem Flexfluss, **ohne**
es aus dem Barrierefreiheitsbaum zu entfernen; `display: none` täte
genau das und wäre hier der falsche Griff.
2. **Ein einseitiger Aussenrand.** Der Folgen-Knopf trägt 5px links und
0 rechts.
Beides zurückgesetzt, danach stehen beide Knöpfe exakt mittig. */
#sbi_load .sbi-screenreader {
position: absolute;
}
#sbi_load .sbi_load_btn,
#sbi_load .sbi_follow_btn,
#sbi_load #sbi_load_btn {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =========================================================================
EINLEITUNG: LUFT ZWISCHEN BILD UND TEXT — 03.09.2026
Vorgabe Vincenzo: «In der ersten Sektion ist der Text zu nahe am Bild,
dieser sollte weiter nach rechts sein. Nur beim Tablet und Smartphone ist
es anders.»
── Was gemessen wurde ──
Der Abstand zwischen Bildkante und Textkante war **20px** — und zwar
**schon vorher**. Gegenprobe am 03.09.2026: die Sektion wurde im Browser
auf den Stand vor dem Rasterumbau zurückgesetzt (Avadas prozentuale Rinne
statt der festen, Zeile wieder herausgezogen), die Lücke blieb bei 20px.
Der Umbau hat sie also nicht verengt; sie war immer so eng.
**Warum 20 und nicht 40:** Die Rinne sitzt als Innenabstand am
Spaltenwrapper — links wie rechts 20px. Zwischen zwei Spalten ergäbe das
40px. Hier trägt der Wrapper der linken Spalte aber **das Bild als
Hintergrund**, und ein Hintergrund deckt den Innenabstand mit ab. Die
rechten 20px der Bildspalte sind damit unsichtbar; sichtbar bleibt allein
der linke Innenabstand der Textspalte.
── Die Regel ──
Die Textspalte bekommt links `--rjr-einleitung-luft` statt der halben
Rinne. **Erst ab 1201px**: darunter stehen die Spalten enger beieinander,
und Vincenzo hat Tablet und Telefon ausdrücklich ausgenommen. Die rechte
Kante der Sektion bleibt unangetastet — der Textblock wird schmaler, er
wandert nicht.
Klasse doppelt, weil die Rasterregel weiter oben mit `#main` beginnt und
sonst gleich schwer wiegt.
========================================================================= */
@media (min-width: 1201px) {
#main .rjr-einleitung.rjr-einleitung > .fusion-builder-row > .fusion-layout-column:last-child > .fusion-column-wrapper {
padding-left: var(--rjr-einleitung-luft) !important;
}
}
/* =========================================================================
PROJEKTE: BILDERGALERIE — 10.10.2026
Vorgabe Vincenzo: die drei Projektkarten raus, an ihre Stelle eine
Galerie nach der 21st.dev-Komponente «carousel-circular-image-gallery».
Die Bewegung macht `js/rjr-galerie.js`; hier stehen Bühne, Punkte und
Pfeile. Die Regeln der alten Karten und des Banners sind am 10.10.2026
entfernt (Hinweis im Abschnitt «Sektion Projekte»).
── Bühne ──
Volle Inhaltsbreite wie vorher die Kartenreihe, 28px Radius wie jede
Bildkachel der Seite. 16:9, aber höchstens 640px bzw. 72 % der
Fensterhöhe — sonst wäre sie bei 1440px über 730px hoch und passte nicht
unter den Kopf. Unter 768px seit dem 28.10.2026 **3:4 hochkant** (vorher
4:3): die echten Projektfotos sind alle hochkant, in 4:3 wäre ein Foto
auf dem Telefon keine 90px breit. Die Vorlage war fest quadratisch; das
Skript rechnet in Bildschirmpixeln und nimmt jedes Seitenverhältnis.
── Fotos (28.10.2026) ──
Das Foto steht ganz in der Mitte, die Seiten füllt eine unscharfe Fassung
desselben Bildes (`data-rjr-hinter`, siehe `js/rjr-galerie.js`). Passen
die Punkte nicht in eine Reihe, setzt das Skript `.rjr-galerie--ohne-punkte`:
Punkte aus, es bleiben Pfeile und Wischen. Ein Zähler «3 / 22» stand dort
nur kurz, auf dem Telefon ohne Nummer gewünscht (Vincenzo, 28.10.2026).
── Punkte und Pfeile ──
Punkte: das Vorschaubild mit weissem Ring (Vorlage), der aktuelle etwas
grösser und mit vollem Ring. Pfeile: der graue Knopf der Seite (#f5f5f5,
beim Überfahren #dedede mit Ring, siehe «Hover-Regel»), in die Bühne
gesetzt statt daneben — neben einer Bühne über die volle Breite ist kein
Platz.
── Radien (Vorgabe Vincenzo, 10.10.2026: «gleiche Rundung wie der Rest
der Webseite») ──
Erst rund wie in der Vorlage, jetzt nach den kleinen Elementen der Seite:
Pfeile 56px → **16px** wie die Formularfelder, Vorschaubilder 26px →
**8px**. Auf dem Telefon 44px → 12px und 22px → **6px** wie das
Häkchenfeld im Formular. Auch die Überblendung ist seither kein Kreis
mehr, sondern ein abgerundetes Quadrat nach derselben Regel (16px,
kleiner anteilig) — gerechnet in `js/rjr-galerie.js`, `setze()`.
Klassen doppelt: Avada gestaltet `button`, `ul` und `li` im Textelement
selbst und lädt nach dem Child-Theme.
========================================================================= */
.rjr-galerie.rjr-galerie {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: max(320px, min(640px, 72svh));
border-radius: 28px;
overflow: hidden;
isolation: isolate;
background: var(--awb-color7);
/* Senkrecht scrollt die Seite, waagrecht wischt die Galerie. */
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
/* Rückfallebene ohne JavaScript: das erste Bild füllt die Bühne. */
.rjr-galerie.rjr-galerie .rjr-galerie__bilder {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}
.rjr-galerie.rjr-galerie .rjr-galerie__bilder li {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
}
.rjr-galerie.rjr-galerie .rjr-galerie__bilder li + li {
display: none;
}
.rjr-galerie.rjr-galerie .rjr-galerie__bilder img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.rjr-galerie.rjr-galerie--bereit .rjr-galerie__bilder {
display: none;
}
.rjr-galerie__svg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.rjr-galerie__punkte {
position: absolute;
inset: 0;
pointer-events: none;
}
.rjr-galerie.rjr-galerie .rjr-galerie__punkt {
position: absolute;
width: 26px;
height: 26px;
min-height: 0;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 8px;
background-color: transparent;
background-position: center;
background-size: cover;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transform: translate(-50%, -50%);
cursor: pointer;
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
transition: transform 300ms var(--rjr-anim-kurve), border-color 300ms ease;
}
.rjr-galerie.rjr-galerie .rjr-galerie__punkt:hover {
border-color: #fff;
}
.rjr-galerie.rjr-galerie .rjr-galerie__punkt[aria-current] {
border-color: #fff;
transform: translate(-50%, -50%) scale(1.25);
}
.rjr-galerie.rjr-galerie .rjr-galerie__punkt:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 16px;
background-color: #f5f5f5;
color: var(--awb-color7);
box-shadow: inset 0 0 0 2px #f5f5f5, 0 8px 32px rgba(0, 0, 0, 0.18);
transform: translateY(-50%);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 250ms ease, transform 300ms var(--rjr-anim-kurve);
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil--zurueck {
left: 24px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil--weiter {
right: 24px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil:hover {
background-color: #dedede;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil:active {
transform: translateY(-50%) scale(0.94);
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil:focus-visible {
outline: 2px solid var(--awb-color5);
outline-offset: 3px;
}
.rjr-galerie__pfeil svg {
display: block;
width: 24px;
height: 24px;
}
.rjr-galerie.rjr-galerie--ohne-punkte .rjr-galerie__punkte {
display: none;
}
/* Nur für Bildschirmleser: «Bild 3 von 6: …» nach einem Wechsel von Hand. */
.rjr-galerie .rjr-galerie__ansage {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 767px) {
.rjr-galerie.rjr-galerie {
aspect-ratio: 3 / 4;
max-height: none;
}
.rjr-galerie.rjr-galerie .rjr-galerie__punkt {
width: 22px;
height: 22px;
border-radius: 6px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil {
width: 44px;
height: 44px;
border-radius: 12px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil--zurueck {
left: 12px;
}
.rjr-galerie.rjr-galerie .rjr-galerie__pfeil--weiter {
right: 12px;
}
.rjr-galerie__pfeil svg {
width: 20px;
height: 20px;
}
}