/* =============================================================
Citasell Fix 1.14.0 — Korrekturen zum Audit vom 21.09.2026
Laedt nach citasell.css. Aendert keine Theme-Datei.
Rollback: Plugin deaktivieren.
Inhalt
1 Mockups und Feature-Grid auf Desktop-Breite
2 Browser-Rahmen fuer UI-Mockups
3 Layout-Spruenge beim Bildladen (CLS)
4 Primaerbutton auf hellem Grund sichtbar machen
5 CTA-Luecke zwischen 782 und 900 Pixel
6 Sichtbarer Tastatur-Fokus
7 Kleinere Lesbarkeits- und Detailkorrekturen
8 Breadcrumb (ab 1.1)
9 "Passt dazu" (ab 1.1)
10 Typografie-Feinschliff (ab 1.1)
11 Logo als Wasserzeichen (ab 1.2)
12 Klebender Kopf: gemessene Hoehe (ab 1.3)
13 Wasserzeichen in Kopf und Fuss (ab 1.3)
14 Groesse der getauschten Signage-Grafik (ab 1.4)
15 Groessen der weiteren Grafiken (ab 1.8)
16 Demo-Formular (ab 1.12)
17 Inline-Mockups der Branchenseiten (ab 1.12)
18 Grosses Wasserzeichen im Aufmacher (ab 1.12)
19 Seitenverhaeltnis des Aufmacher-Mockups (ab 1.13)
20 Getauschte Mockups nie beschneiden (ab 1.13)
21 Leistungsraster: Breite und Umbruch (ab 1.14)
============================================================= */
/* -------------------------------------------------------------
1 Mockups und Feature-Grid auf Desktop-Breite
theme.json setzt contentSize 760px / wideSize 1120px. Die fuenf
Leistungsseiten nutzen kein alignwide, deshalb stand dort alles
in einer 760px-Spalte: am 1440er-Monitor 53 Prozent der Breite,
die Oberflaeche im Mockup auf 63 Prozent geschrumpft.
Fliesstext bleibt bei 760px — das ist gewollt und gut lesbar.
------------------------------------------------------------- */
.cs-section .cs-svc-hero,
.cs-section .cs-features {
max-width: var(--wp--style--global--wide-size, 1120px);
margin-inline: auto;
}
/* Im breiteren Raster duerfen die Karten etwas mehr Luft haben. */
@media (min-width: 961px) {
.cs-section .cs-features {
gap: 1.25rem;
}
}
/* -------------------------------------------------------------
2 Browser-Rahmen fuer UI-Mockups
Ein freischwebendes Bild mit Schatten liest sich als Grafik.
Derselbe Screenshot in einem Fensterrahmen liest sich als
Produkt. Der Rahmen ist reines CSS: kein Byte Ladezeit, wirkt
unter jedem Mockup und geht beim Austausch nicht verloren.
Bewusst nur auf den vier Seiten mit Oberflaechen-Screenshots:
2037 Web & Software, 2038 KI & Automatisierung,
2040 Cybersecurity, 2041 IT-Betrieb.
2039 Social Media zeigt Hochformat-Videos — dort waere ein
Browserfenster sachlich falsch.
------------------------------------------------------------- */
.page-id-2037 .cs-svc-hero,
.page-id-2038 .cs-svc-hero,
.page-id-2040 .cs-svc-hero,
.page-id-2041 .cs-svc-hero {
position: relative;
padding-top: 36px;
background: #fff;
border: 1px solid var(--cs-line, #D5DAEA);
box-shadow: 0 30px 60px -30px rgba(20, 27, 77, .45);
}
/* Fensterleiste */
.page-id-2037 .cs-svc-hero::before,
.page-id-2038 .cs-svc-hero::before,
.page-id-2040 .cs-svc-hero::before,
.page-id-2041 .cs-svc-hero::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 36px;
background: var(--cs-frost-2, #EAEDF5);
border-bottom: 1px solid var(--cs-line, #D5DAEA);
}
/* Drei Punkte, kein Text — so bleibt der Rahmen auf jeder Seite
richtig, egal welches Mockup darin steht. */
.page-id-2037 .cs-svc-hero::after,
.page-id-2038 .cs-svc-hero::after,
.page-id-2040 .cs-svc-hero::after,
.page-id-2041 .cs-svc-hero::after {
content: "";
position: absolute;
left: 14px;
top: 15px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #C3CADF;
box-shadow: 11px 0 0 #C3CADF, 22px 0 0 #C3CADF;
}
@media (max-width: 600px) {
.page-id-2037 .cs-svc-hero,
.page-id-2038 .cs-svc-hero,
.page-id-2040 .cs-svc-hero,
.page-id-2041 .cs-svc-hero {
padding-top: 28px;
}
.page-id-2037 .cs-svc-hero::before,
.page-id-2038 .cs-svc-hero::before,
.page-id-2040 .cs-svc-hero::before,
.page-id-2041 .cs-svc-hero::before {
height: 28px;
}
.page-id-2037 .cs-svc-hero::after,
.page-id-2038 .cs-svc-hero::after,
.page-id-2040 .cs-svc-hero::after,
.page-id-2041 .cs-svc-hero::after {
top: 11px;
left: 11px;
width: 5px;
height: 5px;
box-shadow: 9px 0 0 #C3CADF, 18px 0 0 #C3CADF;
}
}
/* -------------------------------------------------------------
3 Layout-Spruenge beim Bildladen (CLS)
Die svc-Mockups sind 1200 x 760 — das belegt die Theme-Regel
.cs-svc img{aspect-ratio:1200/760}. Der Hero-Container hatte
kein Seitenverhaeltnis, deshalb sprang der Text beim Laden.
Fuer die mock-*.png auf /citarem/, /citarem-ai/ und /signage/
ist hier bewusst nichts gesetzt: deren echte Pixelmasse sind
nicht bekannt, und ein falsches Verhaeltnis wuerde das Bild
verzerren. Siehe README, Abschnitt "Noch offen".
------------------------------------------------------------- */
.cs-svc-hero img {
aspect-ratio: 1200 / 760;
max-width: 100%;
}
/* -------------------------------------------------------------
4 Primaerbutton auf hellem Grund sichtbar machen
Der globale Button war Periwinkle #8FA7FF mit Indigo-Schrift
und Hover auf Weiss. Auf Frost #F5F6FA und auf weissen
Formularkarten ergibt die Flaeche 2,1:1 — WCAG 1.4.11 verlangt
3:1 fuer Bedienelemente. Im Hover waren es 1,1:1, der Button
loeste sich optisch auf. Betroffen war "Anfrage senden".
Neu: Cobalt #2B3EAD mit weisser Schrift — 8,8:1 Schriftkontrast,
8,1:1 Flaechenkontrast. Auf dunklen Sektionen bleibt Periwinkle,
dort ist es richtig und gut.
------------------------------------------------------------- */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.cs-form button,
.cs-btn:not(.cs-btn-ghost) {
background: var(--cs-cobalt, #2B3EAD);
color: #fff;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible,
.cs-form button:hover,
.cs-form button:focus-visible,
.cs-btn:not(.cs-btn-ghost):hover,
.cs-btn:not(.cs-btn-ghost):focus-visible {
background: var(--cs-indigo, #141B4D);
color: #fff;
}
/* Dunkle Sektionen behalten Periwinkle. Muss nach den Regeln oben
stehen, sonst gewinnt bei gleicher Spezifizitaet die Reihenfolge. */
.cs-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.cs-dark .cs-btn:not(.cs-btn-ghost) {
background: var(--cs-peri, #8FA7FF);
color: var(--cs-indigo, #141B4D);
}
.cs-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.cs-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible,
.cs-dark .cs-btn:not(.cs-btn-ghost):hover,
.cs-dark .cs-btn:not(.cs-btn-ghost):focus-visible {
background: #fff;
color: var(--cs-indigo, #141B4D);
}
/* Outline-Buttons auf hellem Grund: 1,5px Indigo war korrekt,
bekommt aber im Hover eine klare Fuellung statt nur Farbwechsel. */
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
background: var(--cs-indigo, #141B4D);
color: #fff;
border-color: var(--cs-indigo, #141B4D);
}
.cs-dark .is-style-outline .wp-block-button__link:hover,
.cs-dark .is-style-outline .wp-block-button__link:focus-visible {
background: rgba(255, 255, 255, .12);
color: #fff;
border-color: #fff;
}
/* -------------------------------------------------------------
5 CTA-Luecke zwischen 782 und 900 Pixel
Der Burger erscheint ab 900px und blendet .cs-header-cta aus,
die feste Leiste unten startet aber erst ab 781px. Auf
iPad-Landscape und kleinen Laptops stand deshalb weder
"Projekt anfragen" noch sonst ein Handlungsaufruf im Bild.
------------------------------------------------------------- */
@media (min-width: 782px) and (max-width: 900px) {
.cs-header-cta {
display: inline-flex;
}
/* Im schmalen Band etwas kompakter, damit neben Logo und
Burger kein Umbruch entsteht. */
.cs-header-cta .wp-block-button__link,
.cs-header-cta .cs-btn {
padding: .5rem .85rem;
font-size: .85rem;
}
}
/* -------------------------------------------------------------
6 Sichtbarer Tastatur-Fokus
Eigene Fokus-Stile gab es nur in Formularen. Links, Buttons,
Navigation und die FAQ-Aufklapper hatten den Browser-Standard.
------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--cs-cobalt, #2B3EAD);
outline-offset: 2px;
border-radius: 6px;
}
.cs-dark a:focus-visible,
.cs-dark button:focus-visible,
.cs-dark summary:focus-visible,
.cs-nav a:focus-visible {
outline-color: var(--cs-peri, #8FA7FF);
}
/* Safari zeigt beim summary sonst noch das eigene Dreieck. */
.cs-faq summary::-webkit-details-marker {
display: none;
}
/* -------------------------------------------------------------
7 Kleinere Lesbarkeits- und Detailkorrekturen
------------------------------------------------------------- */
/* Untermenue: Beschreibungstext lag bei 4,67:1 auf 13px — knapp
ueber der Grenze. Etwas dunkler liest sich deutlich ruhiger. */
.cs-sub a span {
color: #565E85;
}
/* Pflichtfeld-Sternchen und Legende, die das JS ergaenzt. */
.cs-form .cs-req {
color: var(--cs-cobalt, #2B3EAD);
font-weight: 700;
margin-left: .15em;
}
.cs-form .cs-req-legend {
font-size: .8rem;
color: #565E85;
margin-top: -.2rem;
}
/* Kontexthinweis auf /demo/, den das JS aus ?interesse= baut. */
.cs-form .cs-context {
display: flex;
align-items: baseline;
gap: .5rem;
flex-wrap: wrap;
padding: .7rem .9rem;
border-radius: 8px;
background: var(--cs-frost-2, #EAEDF5);
border-left: 3px solid var(--cs-peri, #8FA7FF);
font-size: .9rem;
}
.cs-form .cs-context b {
font-family: Manrope, system-ui, sans-serif;
font-weight: 700;
color: var(--cs-indigo, #141B4D);
}
/* Inline-SVG-Mockups: sauberer Rahmen, damit sie neben den
PNG-Mockups nicht wie Zeichnungen ohne Buehne stehen. */
.mk-svg {
border-radius: 12px;
}
/* Sehr breite Monitore: der Inhalt soll nicht ausfransen. */
@media (min-width: 1600px) {
.cs-section .cs-svc-hero,
.cs-section .cs-features {
max-width: 1180px;
}
}
/* Bewegungsreduzierung: das Theme deckt Float, Glow und Reveal ab.
Hier nur noch die neuen Hover-Zustaende ruhigstellen. */
@media (prefers-reduced-motion: reduce) {
.wp-block-button__link,
.cs-btn,
.cs-form button {
transition: none !important;
}
}
/* =============================================================
VERSION 1.1 — Klarheit
8 Breadcrumb
9 "Passt dazu"
10 Typografie-Feinschliff
============================================================= */
/* -------------------------------------------------------------
8 Breadcrumb
Sitzt über der Überschrift und beantwortet die Frage, die auf
den Unterseiten offen war: wo bin ich, und wo ist die Ebene
darüber. Optisch bewusst leise — es ist Orientierung, kein
Navigationselement, das um Aufmerksamkeit wirbt.
------------------------------------------------------------- */
.cs-crumb {
margin-bottom: 1.1rem;
font-size: .82rem;
line-height: 1.5;
}
.cs-crumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .1rem .45rem;
margin: 0;
padding: 0;
list-style: none;
}
.cs-crumb li {
display: flex;
align-items: center;
gap: .45rem;
}
.cs-crumb li + li::before {
content: "";
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
opacity: .45;
flex: none;
}
.cs-crumb a {
color: #565E85;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.cs-crumb a:hover {
color: var(--cs-cobalt, #2B3EAD);
border-bottom-color: currentColor;
}
.cs-crumb [aria-current="page"] {
color: var(--cs-indigo, #141B4D);
font-weight: 500;
}
.cs-dark .cs-crumb a,
.cs-on-dark .cs-crumb a {
color: var(--cs-mist, #A9B3D6);
}
.cs-dark .cs-crumb a:hover,
.cs-on-dark .cs-crumb a:hover {
color: #fff;
}
.cs-dark .cs-crumb [aria-current="page"],
.cs-on-dark .cs-crumb [aria-current="page"] {
color: #fff;
}
/* -------------------------------------------------------------
9 "Passt dazu"
Die fünf Leistungsseiten hatten als einzigen Link im Inhalt die
Datenschutzerklärung. Drei Karten am Seitenende beenden das,
ohne dass eine Seite bearbeitet werden muss.
Bewusst keine Kartenoptik wie .cs-feature: das hier ist
Navigation, nicht Inhalt. Deshalb flacher, mit Pfeil.
------------------------------------------------------------- */
.cs-related {
max-width: var(--wp--style--global--wide-size, 1120px);
margin: 3rem auto 0;
padding-top: 1.6rem;
border-top: 1px solid var(--cs-line, #D5DAEA);
}
.cs-related .cs-eyebrow {
margin-bottom: .9rem;
}
.cs-rel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: .8rem;
}
.cs-rel-card {
display: grid;
align-content: start;
gap: .2rem;
padding: .95rem 2.2rem .95rem 1.1rem;
position: relative;
background: var(--cs-frost, #F5F6FA);
border: 1px solid var(--cs-line, #D5DAEA);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cs-rel-card b {
font-family: Manrope, system-ui, sans-serif;
font-weight: 700;
font-size: .97rem;
color: var(--cs-indigo, #141B4D);
}
.cs-rel-card span {
font-size: .85rem;
color: #565E85;
line-height: 1.45;
}
.cs-rel-card::after {
content: "";
position: absolute;
right: 1.1rem;
top: 1.35rem;
width: 6px;
height: 6px;
border-right: 1.6px solid var(--cs-cobalt, #2B3EAD);
border-top: 1.6px solid var(--cs-cobalt, #2B3EAD);
transform: rotate(45deg);
transition: transform .2s ease;
}
.cs-rel-card:hover {
background: #fff;
border-color: var(--cs-peri, #8FA7FF);
transform: translateY(-2px);
}
.cs-rel-card:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
/* Auf dunklen Sektionen — /citarem/ und /signage/ enden dunkel. */
.cs-dark .cs-related,
.cs-on-dark .cs-related {
border-top-color: #2F3A7A;
}
.cs-dark .cs-rel-card,
.cs-on-dark .cs-rel-card {
background: rgba(143, 167, 255, .07);
border-color: #2F3A7A;
}
.cs-dark .cs-rel-card b,
.cs-on-dark .cs-rel-card b {
color: #fff;
}
.cs-dark .cs-rel-card span,
.cs-on-dark .cs-rel-card span {
color: var(--cs-mist, #A9B3D6);
}
.cs-dark .cs-rel-card::after,
.cs-on-dark .cs-rel-card::after {
border-color: var(--cs-peri, #8FA7FF);
}
.cs-dark .cs-rel-card:hover,
.cs-on-dark .cs-rel-card:hover {
background: rgba(143, 167, 255, .14);
border-color: var(--cs-peri, #8FA7FF);
}
/* -------------------------------------------------------------
10 Typografie-Feinschliff
Kleine Dinge, die zusammen den Unterschied zwischen "gemacht"
und "gut gemacht" ausmachen.
------------------------------------------------------------- */
/* Zahlen in Kennzahlen und Preisen laufen in Spalten — gleiche
Zeichenbreite, damit sie untereinander stehen. */
.cs-kpi b,
.cs-card .cs-price,
.cs-trust-item b,
.cs-crumb {
font-variant-numeric: tabular-nums;
}
/* Deutsche Komposita brechen in einer schmalen Spalte hart.
Trennung nur mobil, wo die Zeile wirklich knapp ist —
am Desktop braucht es sie nicht und sie würde unruhig wirken. */
@media (max-width: 640px) {
p, li, .cs-lead, .cs-feature span, .cs-rel-card span {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 8 4 4;
}
}
/* Keine einzelnen Wörter in der letzten Zeile. Browser ohne
Unterstützung ignorieren die Zeile schlicht. */
p, .cs-lead, .cs-feature span, .cs-faq details p {
text-wrap: pretty;
}
/* Sprungziele: Abstand kommt aus der gemessenen Kopfhoehe,
siehe Abschnitt 12. */
/* Ein aufgeklapptes FAQ soll sichtbar anders sein als ein
geschlossenes — bisher unterschied sie nur das Pfeil-Dreieck. */
.cs-faq details[open] summary {
color: var(--cs-cobalt, #2B3EAD);
}
.cs-dark .cs-faq details[open] summary,
.cs-on-dark .cs-faq details[open] summary {
color: var(--cs-peri, #8FA7FF);
}
/* =============================================================
VERSION 1.2 — Logo als Wasserzeichen
============================================================= */
/* -------------------------------------------------------------
11 Wasserzeichen (1.2, neu gefasst 1.9)
Benjamin, 22.09.: "logo wasser zeichen ueber all und unser logo
hat punk diese nicht vergessen".
Zwei Aenderungen gegenueber 1.2:
1. Die Marke. Bis 1.8 zeigten --cs-wm-light und --cs-wm-dark auf
die Logodateien des Themes. Die sehe ich nicht, also war
ungeprueft, was das Zeichen ueberhaupt malt — und das Quadrat
fehlte. In 1.9 habe ich die Marke aus einem Screenshot
rekonstruiert; auch das war an drei Stellen falsch. Ab 1.9.1
liefert das Plugin die echte Marke aus citasell-logo_2.zip,
als Data-URI in citasell-fix.php: zwei gestrichene Klammern
mit runden Ecken und das Quadrat in der Oeffnung. Dekodiert
man die Data-URI, kommt Zeichen fuer Zeichen
citasell-mark-indigo.svg heraus. Dieselbe Marke steckt in
jedem Mockup.
2. Ueberall statt nur auf dunklen Flaechen. Es gibt jetzt drei
Staerken, damit "ueberall" nicht "aufdringlich" heisst:
dunkle Abschnitte .07 helle Marke
helle Abschnitte .045 dunkle Marke
Kopf und Fuss .05 / .08
Die hellen Werte sind niedriger als die dunklen, weil dunkles
Indigo auf Frost staerker auftraegt als Periwinkle auf Indigo.
Das Seitenverhaeltnis kommt aus --cs-wm-ratio (2.618/4.2361 —
Phi zu Phi hoch zwei), damit CSS und PHP nicht zwei Wahrheiten
ueber die Marke halten. Die Marke steht hochkant, nicht quer wie
die Wort-Bild-Marke — die Groessen sind deshalb ueber die Breite
gedeckelt und klein.
Unveraendert gilt: kein overflow:hidden am Abschnitt (das haette
.cs-ki-mock abgeschnitten, das mit width:112% absichtlich
ueberlappt), und in der indigofarbenen CTA-Karte bleibt es
draussen — die Karte ist kurz und dicht, das Zeichen lag dort
hinter dem Button.
Technik: nur position:relative am Abschnitt, sonst nichts.
In 1.2 stand hier zusaetzlich isolation:isolate, damit das
Zeichen mit z-index:-1 unter den Inhalt rutschen kann. Das
funktionierte, solange nur die dunklen Abschnitte betroffen
waren. Jetzt gilt die Regel fuer jeden Abschnitt — und
isolation macht aus jedem Abschnitt einen eigenen
Stapelkontext. Ein Element, das absichtlich ueber die
Abschnittsgrenze hinausragt (.cs-ki-mock laeuft mit width:112%
nach aussen), koennte dadurch hinter dem naechsten Abschnitt
landen. Dieses Risiko ist es nicht wert.
Deshalb ohne Stapelkontext: das Zeichen liegt ueber dem Inhalt
statt darunter. Bei 4,5 bis 8 Prozent Deckkraft ist das
nachgerechnet weniger als ein RGB-Schritt Unterschied auf Text
— sichtbar wird es nur dort, wo ohnehin Flaeche ist.
pointer-events:none haelt es aus jedem Klick heraus.
------------------------------------------------------------- */
.cs-wm .cs-section {
position: relative;
}
.cs-wm .cs-section::after {
content: "";
position: absolute;
pointer-events: none;
right: 2.4%;
bottom: 4%;
width: clamp(30px, 3vw, 48px);
aspect-ratio: var(--cs-wm-ratio, 2.618/4.2361);
background-image: var(--cs-wm-dark);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .045;
}
/* Dunkle Abschnitte: helle Marke, etwas kraeftiger. */
.cs-wm .cs-section.cs-dark::after {
background-image: var(--cs-wm-light);
opacity: .07;
}
/* Der Aufmacher bekommt sein eigenes, grosses Zeichen — siehe
Abschnitt 18. Hier nur das kleine abschalten, damit nicht
zwei uebereinanderliegen.
Bewusst nur ueber das Aufmacherbild und nicht ueber .cs-hero:
content:none loescht ein ::after auch dann, wenn es dem Theme
gehoert. Der Selektor unten trifft genau den Abschnitt, dem
Abschnitt 11 oben selbst ein Zeichen gegeben hat — und sonst
nichts. */
.cs-wm .cs-section:has(img[src*="mock-hero"])::after {
content: none;
}
/* Vorhandene Klammern-Grafik im Hero hinter das Mockup legen,
damit sich beide nicht ins Gehege kommen. */
.cs-wm .cs-hero-brackets {
z-index: 0;
}
/* Auf schmalen Bildschirmen weg: dort ist jeder Quadratzentimeter
fuer Inhalt da, und ein Wasserzeichen unter Text wird unruhig. */
@media (max-width: 781px) {
.cs-wm .cs-section::after {
display: none;
}
}
/* =============================================================
VERSION 1.3
============================================================= */
/* -------------------------------------------------------------
12 Klebender Kopf: gemessene Hoehe
Die Unterseiten-Navigation klebte im Theme mit top:58px unter
dem Kopf. 58px stimmt aber nur auf dem Handy, wo das Logo 36px
hoch ist. Am Desktop ist es 42px, dazu 2 x 0,7rem Polsterung
plus Rahmen — rund 65px. Die Leiste rutschte dort also 7px
unter den Kopf und verdeckte ihre eigene Oberkante.
--cs-header-h wird vom Skript gemessen und hier verwendet.
Der Startwert deckt den Fall ab, dass JavaScript aus ist.
------------------------------------------------------------- */
:root {
--cs-header-h: 65px;
}
.cs-subnav {
top: var(--cs-header-h);
}
/* Sprungziel-Abstand: Kopf plus Luft. Wo es zusaetzlich eine
klebende Unterseiten-Navigation gibt, kommt deren Hoehe dazu. */
[id] {
scroll-margin-top: calc(var(--cs-header-h) + 1.5rem);
}
body:has(.cs-subnav) [id] {
scroll-margin-top: calc(var(--cs-header-h) + 4rem);
}
/* -------------------------------------------------------------
13 Wasserzeichen in Kopf und Fuss
Beide Leisten laufen ueber die volle Breite, ihr Inhalt sitzt
aber in einem 1120px-Container. Auf breiten Bildschirmen bleibt
links und rechts also leerer Raum — genau dort sitzt das
Zeichen. So liegt es nie hinter Navigation, Buttons oder
Fusszeilen-Links, und es muss nichts beschnitten werden.
Wichtig: am Kopf ausdruecklich KEIN overflow:hidden. Das
Untermenue .cs-sub haengt mit position:absolute unter den Kopf
und wuerde damit abgeschnitten — die Navigation waere kaputt.
Das Zeichen liegt deshalb vollstaendig innerhalb der Leiste.
------------------------------------------------------------- */
/* Kopf. (1.2, neu 1.10)
Benjamin am 22.09.: "auf header fehlt unser logo als wasser
zeichen". Zwei Gruende, beide behoben:
1. Die Regel stand in @media (min-width:1281px). Der Container
ist 1120px breit; ab 1281px bleiben links und rechts je rund
80px Rand. Das war zu vorsichtig gerechnet - schon ab 1180px
ist genug Platz, und die meisten Notebooks liegen darunter.
Jetzt ab 1180px.
2. Fuenf Prozent auf weissem Grund sind rund ein RGB-Schritt.
Das ist kein zurueckhaltendes Zeichen, das ist gar keins.
Jetzt 11 Prozent - immer noch leise, aber vorhanden.
Die Hoehe treibt die Groesse, nicht die Breite: die Marke ist
hochkant, und die Kopfleiste ist flach. 62% der Leistenhoehe
ergibt bei 65px Kopf rund 25px hoch und 15px breit. */
@media (min-width: 1180px) {
.cs-wm .cs-header {
position: sticky;
isolation: isolate;
}
.cs-wm .cs-header::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
height: 62%;
aspect-ratio: var(--cs-wm-ratio, 2.618/4.2361);
background-image: var(--cs-wm-dark);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
opacity: .11;
}
}
/* Unter 1180px ist der Rand neben dem Container zu schmal — dort
wuerde das Zeichen hinter der Navigation liegen. Statt es ganz
wegzulassen, sitzt es am linken Rand unter dem Logo, wo im Kopf
ohnehin nichts steht ausser der Wortmarke selbst. Damit ist es
auch auf dem Notebook da, ohne je etwas zu verdecken. */
@media (min-width: 782px) and (max-width: 1179.98px) {
.cs-wm .cs-header {
position: sticky;
isolation: isolate;
}
.cs-wm .cs-header::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
right: .8rem;
top: 50%;
transform: translateY(-50%);
height: 52%;
aspect-ratio: var(--cs-wm-ratio, 2.618/4.2361);
background-image: var(--cs-wm-dark);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
opacity: .09;
}
}
/* Fuss: grosse Flaeche, dunkler Grund, also die helle Variante.
Unten rechts, mit Abstand zur Rechtszeile. */
.cs-wm .cs-footer {
position: relative;
isolation: isolate;
overflow: hidden;
}
.cs-wm .cs-footer::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
right: 2.5%;
bottom: 7%;
width: clamp(40px, 4.4vw, 66px);
aspect-ratio: var(--cs-wm-ratio, 2.618/4.2361);
background-image: var(--cs-wm-light);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
opacity: .08;
}
/* Auf dem Handy nimmt der Fuss ohnehin die ganze Hoehe ein und
traegt unten die feste Aktionsleiste — kein Platz fuer Zierrat. */
@media (max-width: 781px) {
.cs-wm .cs-footer::after {
display: none;
}
}
/* -------------------------------------------------------------
14 Groesse der getauschten Signage-Grafik (ab 1.4)
mock-signage.png kam auf /signage/ zweimal vor: gross im Hero
und klein im Einblicke-Abschnitt, dort per
img[src*="signage.png"]{max-width:420px} gedeckelt. Die neue
Datei heisst signage-schaufenster.svg und faellt aus dieser
Regel heraus — ohne die Zeile hier waere sie im unteren
Abschnitt ploetzlich in voller Breite gelaufen.
Die Szene ist im Querformat und braucht mehr Platz als die
420px des alten Hochformat-Bildes, deshalb 720px.
------------------------------------------------------------- */
.cs-insight-img img[src*="signage-schaufenster"] {
max-width: 720px;
margin-inline: auto;
}
/* -------------------------------------------------------------
15 Groessen der weiteren getauschten Grafiken (ab 1.8)
Das Theme deckelt zwei Bilder ueber den Dateinamen:
img[src*="signage.png"] {max-width:420px}
img[src*="mock-chat"] {max-width:320px}
Die neuen SVG heissen anders und fallen aus beiden Regeln
heraus — ohne die Zeilen hier liefen sie im Einblicke-Abschnitt
ploetzlich in voller Breite.
------------------------------------------------------------- */
.cs-insight-img img[src*="citarem-ai-chat"] {
max-width: 320px;
margin-inline: auto;
}
.cs-insight-img img[src*="signage-verwaltung"] {
max-width: 760px;
margin-inline: auto;
}
/* =============================================================
VERSION 1.10
============================================================= */
/* -------------------------------------------------------------
16 Demo-Formular: Aufbau und Bedienbarkeit
Benjamin am 22.09.: "demo seite bessere geastalteten ui ux und
funktionen verbessern und immer responsive und irchtig".
Das Formular auf /demo/ hatte drei Probleme:
1. Neun Felder untereinander in einer Spalte, auch auf einem
27-Zoll-Bildschirm. Name, Firma, E-Mail und Telefon sind
kurze Felder und standen jeweils allein in einer Zeile.
2. Die Auswahl "Interesse" hatte 49 Eintraege in einer
flachen Liste. Das Skript sortiert sie jetzt in Gruppen.
3. Die Felder waren an manchen Stellen unter 40px hoch. Auf
dem Handy ist das unter der Daumengroesse.
Wichtig zum Geltungsbereich: alle Regeln haengen an .cs-fx.
Diese Klasse setzt das Skript nur auf Formulare, in denen es
ein E-Mail-Feld gefunden hat — also auf Anfrageformulare, nie
auf die Suche im Kopf. Ohne JavaScript passiert hier gar
nichts, dann sieht das Formular aus wie vorher.
Zum Raster: die direkten Kinder des Formulars sind die
Feldgruppen. Welche davon kurz sind, wird ueber :has()
bestimmt, nicht ueber Klassennamen, die ich nicht kenne.
Kennt ein Browser :has() nicht, spannen alle Kinder ueber
beide Spalten — das ist genau der heutige Zustand.
------------------------------------------------------------- */
@media (min-width: 720px) {
.cs-fx {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem 1.4rem;
align-items: start;
}
/* Standard: volle Breite. Nur was ausdruecklich kurz ist,
bekommt eine halbe Zeile. */
.cs-fx > * {
grid-column: 1 / -1;
margin-block: 0;
}
.cs-fx > *:has(> input[type="text"]),
.cs-fx > *:has(> input[type="email"]),
.cs-fx > *:has(> input[type="tel"]),
.cs-fx > *:has(input[type="text"]:not([name*="nachricht" i])),
.cs-fx > *:has(input[type="email"]),
.cs-fx > *:has(input[type="tel"]) {
grid-column: span 1;
}
/* Auswahl, Freitext, Kaestchen und Knopf immer ueber beide. */
.cs-fx > *:has(select),
.cs-fx > *:has(textarea),
.cs-fx > *:has(input[type="checkbox"]),
.cs-fx > *:has(button),
.cs-fx > *:has(input[type="submit"]) {
grid-column: 1 / -1;
}
}
/* Bedienbarkeit der Felder selbst. 44px ist die Groesse, ab der
ein Daumen zuverlaessig trifft; darunter verrutscht man. */
.cs-fx input[type="text"],
.cs-fx input[type="email"],
.cs-fx input[type="tel"],
.cs-fx select,
.cs-fx textarea {
min-height: 44px;
width: 100%;
box-sizing: border-box;
font-size: max(16px, 1rem); /* unter 16px zoomt iOS beim Tippen hinein */
line-height: 1.4;
}
.cs-fx textarea {
min-height: 120px;
resize: vertical;
}
/* Beschriftungen als eigene Zeile ueber dem Feld, mit etwas Luft.
display:block schadet nichts, wenn sie es schon sind. */
.cs-fx label {
display: block;
margin-bottom: .35rem;
font-weight: 600;
line-height: 1.35;
}
/* Kaestchen und ihr Text nebeneinander statt untereinander, und
der Text nicht fett — es ist Flietext, keine Beschriftung. */
.cs-fx label:has(> input[type="checkbox"]) {
display: flex;
align-items: flex-start;
gap: .6rem;
font-weight: 400;
line-height: 1.5;
}
.cs-fx input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: .15em;
}
/* Gruppenueberschriften in der Auswahl deutlich absetzen. Ohne
das sehen optgroup-Label in manchen Browsern aus wie
deaktivierte Eintraege. */
.cs-fx select optgroup {
font-weight: 700;
font-style: normal;
color: #141B4D;
}
.cs-fx select option {
font-weight: 400;
padding-block: .2rem;
}
/* Der Absendeknopf auf dem Handy ueber die volle Breite. Ein
halbbreiter Knopf am linken Rand wird dort leicht uebersehen. */
@media (max-width: 719.98px) {
.cs-fx button[type="submit"],
.cs-fx input[type="submit"],
.cs-fx .cs-btn {
width: 100%;
}
}
/* -------------------------------------------------------------
17 Getauschte Branchen-Grafiken
Auf den Branchenseiten steckten die Kartengrafiken als
Inline-SVG im Inhalt. Das Plugin ersetzt sie durch ![]()
.
Die Theme-Regeln greifen ueber svg.mk-svg — ein ![]()
faellt
da heraus. Diese drei Zeilen stellen dasselbe Verhalten her:
volle Breite der Kachel, Seitenverhaeltnis 600:400, damit
beim Laden nichts springt.
------------------------------------------------------------- */
.mk-media img.mk-svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 600 / 400;
border-radius: inherit;
}
/* -------------------------------------------------------------
18 Grosses Wasserzeichen im Aufmacher (ab 1.11)
Benjamin am 22.09.: "wieso hier logo wasser zeichen gross
fehlt".
Es fehlte, weil ich den Aufmacher in 1.9 ausdruecklich
ausgenommen hatte — mit der Begruendung, dort liege schon die
Klammern-Grafik des Themes. Das war eine Annahme, und auf dem
Screenshot ist von dieser Grafik nichts zu sehen. Also gehoert
das Zeichen dorthin, und zwar gross: der Aufmacher ist die
groesste zusammenhaengende Flaeche des ganzen Auftritts.
Der Anker ist nicht ein Klassenname, den ich raten muesste,
sondern das Aufmacherbild selbst:
section:has(img[src*="mock-hero"])
Damit trifft die Regel genau den Abschnitt, in dem das Bild
steckt — egal wie er heisst. Der Zusatz :not(:has(section ...))
sorgt dafuer, dass nur der innerste solche Abschnitt gemeint
ist; ohne ihn bekaeme auch jeder umschliessende Container ein
Zeichen, und es laegen zwei uebereinander.
Lage: unten rechts, unter dem Mockup. Dort ist auf dem
Screenshot freie Flaeche. Die Groesse haengt an der Hoehe des
Abschnitts, nicht an der Breite — die Marke steht hochkant.
------------------------------------------------------------- */
.cs-wm .cs-hero,
.cs-wm section:has(> img[src*="mock-hero"]),
.cs-wm section:has(img[src*="mock-hero"]):not(:has(section img[src*="mock-hero"])),
.cs-wm .wp-block-group:has(img[src*="mock-hero"]):not(:has(.wp-block-group img[src*="mock-hero"])) {
position: relative;
}
.cs-wm .cs-hero::before,
.cs-wm section:has(img[src*="mock-hero"]):not(:has(section img[src*="mock-hero"]))::before,
.cs-wm .wp-block-group:has(img[src*="mock-hero"]):not(:has(.wp-block-group img[src*="mock-hero"]))::before {
content: "";
position: absolute;
pointer-events: none;
right: 4%;
bottom: 8%;
/* 26 Prozent der Abschnittshoehe waren zu viel: auf Benjamins
Startseite kam die Marke auf rund 230 x 370 Bildpunkte, und
davon war nur die Mitte zu sehen — die Klammerarme lagen
ausserhalb. Nachgemessen am Screenshot vom 22.09., 18:15.
Jetzt hoechstens 190 px hoch, und zusaetzlich ueber die
Breite gedeckelt, damit sie auch in einem flachen Aufmacher
nicht ueber die Kante laeuft. */
height: clamp(70px, 16%, 190px);
max-width: 14%;
aspect-ratio: var(--cs-wm-ratio, 2.618/4.2361);
background-image: var(--cs-wm-light);
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
opacity: .10;
}
/* Unter 900px steht der Aufmacher einspaltig, Text und Mockup
liegen untereinander und fuellen die Flaeche. Ein grosses
Zeichen haette dort keinen freien Platz mehr. */
/* Die Abschaltregel muss denselben Selektor tragen wie die Regel
oben. Mit einem kuerzeren gewinnt sie nicht: :not(:has(...))
zaehlt in die Spezifitaet hinein, und die laengere Regel schlug
die kuerzere trotz Media Query. Nachgemessen im Browser —
bei 860px stand das Zeichen noch da. */
@media (max-width: 899.98px) {
.cs-wm .cs-hero::before,
.cs-wm section:has(img[src*="mock-hero"]):not(:has(section img[src*="mock-hero"]))::before,
.cs-wm .wp-block-group:has(img[src*="mock-hero"]):not(:has(.wp-block-group img[src*="mock-hero"]))::before {
content: none;
}
}
/* -------------------------------------------------------------
19 Format des getauschten Aufmacherbildes (ab 1.11)
mock-hero.png war breit und flach: im Screenshot vom 22.09.
730 x 339 Bildpunkte, also 2,15. Die neue Datei ist 1200 x 560
und damit 2,14 — praktisch dasselbe. Die Zeile haelt das fest,
damit beim Laden nichts springt, falls das Theme fuer dieses
eine Bild kein Verhaeltnis gesetzt hat.
------------------------------------------------------------- */
img[src*="mock-hero"] {
aspect-ratio: 1200 / 560;
height: auto;
}
/* -------------------------------------------------------------
20 Getauschte Mockups nie beschneiden (ab 1.13, 1.14)
Benjamin am 22.09.: "mockup von ki autoamtisierung uaf web
abgeschnitten" — und im Screenshot danach war es noch immer so.
In 1.13 stand hier
img[src*="/citasell-fix/mockups/"]{object-fit:contain}
und das hat nicht gewirkt. Der Grund ist Spezifitaet, nicht
Cache. Das Theme setzt in citasell.css:
.cs-svc img {object-fit:cover} 0,1,1
.cs-svc:first-child img {width:58%;aspect-ratio:auto;
object-fit:cover} 0,2,1
Mein Selektor war ein Attributselektor auf img, also 0,1,0.
Er hat verloren, und zwar an beiden.
Zwei Wege waeren moeglich: jede Theme-Regel einzeln ueberbieten,
oder einmal !important. Ich nehme !important, weil der Pfad
/citasell-fix/mockups/ ausschliesslich Dateien dieses Plugins
trifft. Keine Theme-Datei, kein Medienbild, nichts, was in einem
anderen Chat entsteht, liegt unter diesem Pfad. Und es haelt
auch, wenn das Theme morgen eine weitere Regel bekommt — genau
der Fehler, der hier zweimal passiert ist.
object-fit:contain schneidet nie. Es laesst statt dessen Rand
frei — und damit der nicht als grauer Streifen auffaellt,
bekommt das Bild selbst die Hintergrundfarbe seiner Zeichnung.
Ein ![]()
darf einen Hintergrund haben, der im freien Rand
durchscheint; das Theme wird dafuer nicht angefasst.
------------------------------------------------------------- */
img[src*="/citasell-fix/mockups/"] {
object-fit: contain !important;
object-position: center !important;
}
/* Hintergrund je Zeichnung, damit der freie Rand nicht auffaellt.
Die Werte sind die Grundfarben der jeweiligen SVG. */
img[src*="/citasell-fix/mockups/svc-"],
img[src*="/citasell-fix/mockups/signage-schaufenster"],
img[src*="/citasell-fix/mockups/signage-zwei-displays"] {
background-color: #141B4D;
}
img[src*="/citasell-fix/mockups/mock-citarem"],
img[src*="/citasell-fix/mockups/mock-cita-website"],
img[src*="/citasell-fix/mockups/mock-crm-contact"],
img[src*="/citasell-fix/mockups/cita-rechner"] {
background-color: #1D2666;
}
img[src*="/citasell-fix/mockups/mk-"] {
background-color: #F5F6FA;
}
img[src*="/citasell-fix/mockups/mk-signage"] {
background-color: #141B4D;
}
/* mock-hero.svg hat bewusst keine Hintergrundflaeche — dort soll
der Aufmacher durchscheinen. Also auch hier keine. */
img[src*="/citasell-fix/mockups/mock-hero"] {
background-color: transparent;
}
/* -------------------------------------------------------------
Der Aufmacher auf /citarem/ war links angeschnitten
Im Screenshot vom 22.09. fehlte "CIT" von "CITAREM AI". Das ist
kein object-fit, dort steht height:auto. Es ist das Theme:
.cs-shot {overflow:hidden}
.cs-shot-citarem img {width:112%; max-width:none;
margin-left:-6%}
Gemessen im Harness, ohne diese Regel:
Fenster 1440 Kasten 538 px Bild 570 px links 32 px ab
Fenster 1024 Kasten 476 px Bild 505 px links 29 px ab
Die 112 Prozent sind fuer die alte PNG gedacht, die einen
durchsichtigen Rand hatte. Meine SVG zeichnet bis an die Kante,
deshalb hier zurueck auf 100 Prozent. Danach: links 0, rechts 0,
bei jeder gemessenen Fensterbreite.
------------------------------------------------------------- */
.cs-shot-citarem img[src*="/citasell-fix/mockups/"] {
width: 100%;
max-width: 100%;
margin-left: 0;
}
/* -------------------------------------------------------------
21 Leistungsraster: Breite und Umbruch (ab 1.14)
Zwei Fehler an derselben Stelle, beide im Harness gemessen.
Erstens die Breite. Abschnitt 1 hier oben zieht .cs-svc-hero und
.cs-features auf wideSize. Das Karten-Raster .cs-svc-grid hatte
ich dabei uebersehen — es blieb bei contentSize 760 px, also am
1920er Bildschirm auf 40 Prozent der Breite. Gemessen:
Fenster Raster kleine Karte Bild der grossen Karte
1920 760 239 289 x 300
1024 760 239 289 x 300
Die Ueberschrift darueber steht nach der Theme-Regel
margin-left:max(0px,calc((100% - 1120px)/2)) links an einem
1120er Kasten. Mit margin-inline:auto und max-width 1120
fluchtet das Raster damit auf den Punkt — gemessen bei 1920,
1440, 1280, 1120 und 1024: gleiche linke Kante, kein Versatz.
Zweitens der Umbruch. Das Theme hat zwei Medienabfragen fuer
dieses Raster, aber die Sammelregeln
.cs-svc-grid{grid-template-columns:repeat(6,1fr)}
.cs-svc{grid-column:span 2}
stehen in der Datei danach. Gleiche Spezifitaet, spaetere
Stelle: die Medienabfragen verlieren. Das Raster blieb deshalb
bis 390 px Fensterbreite sechsspaltig — drei Karten neben-
einander, je 105 px breit. Hier wieder eingesetzt; dieses
Stylesheet laedt nach dem Theme, gleiche Spezifitaet genuegt.
Ergebnis, gemessen:
Fenster Raster kleine Karte Bild der grossen Karte
1920 1120 359 428
1024 992 316 379
961 929 295 354
640 608 292 292
390 358 356 356
Die schmalste Anzeige ist 292 px. Gegen diese Zahl sind die
Karten-Mockups gebaut (werkzeuge/build_karten.py).
------------------------------------------------------------- */
.cs-section .cs-svc-grid {
max-width: var(--wp--style--global--wide-size, 1120px);
margin-inline: auto;
}
@media (max-width: 960px) {
.cs-svc-grid {
grid-template-columns: repeat(2, 1fr);
}
.cs-svc,
.cs-svc:first-child {
grid-column: span 1;
flex-direction: column;
}
.cs-svc:first-child img {
width: 100%;
}
.cs-svc-cta {
grid-column: span 2;
}
}
@media (max-width: 600px) {
.cs-svc-grid {
grid-template-columns: 1fr;
}
.cs-svc,
.cs-svc:first-child,
.cs-svc-cta {
grid-column: span 1;
}
}