/* ========================================================================== monkeyz – Komponentenschicht Baut ausschließlich auf den Tokens auf. Keine festen Farb- oder Maßangaben, damit eine Änderung an den Tokens überall durchschlägt. ========================================================================== */ /* --- Korrektur am Eltern-Theme ------------------------------------------ Hello Elementor färbt in seiner reset.css *jeden* Knopf beim Überfahren und beim Anklicken magenta ein: [type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover { background-color: #cc3366 } Das schlägt überall durch, wo ein Knopf keinen eigenen Hintergrund für diese Zustände mitbringt – Menü-Knopf, Altersabfrage, Schließen-Kreuze, FAQ. Die Regel hier hat dieselbe Gewichtung, steht aber später im Stapel und gewinnt deshalb. Damit sie nicht ihrerseits die gewollten Hintergründe überschreibt, setzt sie keinen festen Wert, sondern liest die Variable --mz-btn-bg. Jeder Knopf, der einen Hintergrund haben soll, hinterlegt ihn dort zusätzlich; alle anderen fallen auf "durchsichtig" zurück. Über eine Variable geht das deshalb, weil deren eigene Zuweisung ganz normal nach Gewichtung entschieden wird – der Umweg über die Zustandsregel des Eltern-Themes entfällt. Zusätzlich das Aufblitzen beim Antippen auf Mobilgeräten abstellen – die Zustände sind über Farbe und Rahmen sichtbar genug. ------------------------------------------------------------------------ */ button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus { background-color: var(--mz-btn-bg, transparent); } button, [type="button"], [type="submit"], [type="reset"], a { -webkit-tap-highlight-color: transparent; } /* --- Layout ------------------------------------------------------------- */ .mz-section { padding-block: var(--section-y); background: var(--bg-page); color: var(--text-primary); } .mz-section--tight { padding-block: var(--space-12); } .mz-section--airy { padding-block: var(--section-y-lg); } .mz-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .mz-container--narrow { max-width: var(--container-narrow); } .mz-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .mz-grid { display: grid; gap: var(--space-6); } .mz-grid--2 { grid-template-columns: repeat(2, 1fr); } .mz-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .mz-grid--2, .mz-grid--3 { grid-template-columns: 1fr; } .mz-section { padding-block: var(--space-12); } } /* --- Typografie --------------------------------------------------------- */ .mz-title { font-family: var(--font-display); text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: var(--ls-headline); font-weight: var(--fw-regular); color: var(--text-primary); margin: 0; } /* --- Größenstaffel der Überschriften ------------------------------------- Die Klasse allein reicht hier nicht aus. Elementor legt für die ganze Website ein eigenes Regelwerk ab ("Site-Kit", .elementor-kit-8) und schreibt darin feste Größen für h1 und h2 vor – auf schmalen Bildschirmen 29 px und 25 px. Weil diese Regeln ein Element mitnennen (.elementor-kit-8 h2), wiegen sie schwerer als eine reine Klasse und haben unsere Staffel bisher schlicht überstimmt. Genau daher kamen die zu kleinen Überschriften auf dem Telefon. Der Zusatz .mnkz-page – die Kennzeichnung am body, die jede überarbeitete Seite trägt – wiegt schwerer als das Site-Kit und stellt unsere Staffel wieder her, ohne irgendwo ein !important zu brauchen und ohne die noch nicht überarbeiteten Seiten anzufassen. Der mittlere Wert ist bewusst als "Anteil der Breite + fester Sockel" geschrieben und nicht als reiner vw-Wert: So bleibt der Anstieg flach genug, dass die Endgröße erst auf breiten Bildschirmen erreicht wird, und die Untergrenze zählt nicht nur für Winzlinge, sondern für die verbreiteten 390–430 px. ------------------------------------------------------------------------ */ /* Die Größen selbst stehen in assets/css/typo.css – dort liegt die gesamte Typografie an einer Stelle. Hier bleibt nur, was die Form der Überschrift ausmacht: Schrift, Versalien, Laufweite, Strichstärke. */ .mz-lead { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; } /* Eyebrow: auf hellem Grund ist Grün zu blass – dort dunkler Text plus grüner Signalpunkt, auf dunklem Grund grün. */ .mz-eyebrow { font-family: var(--font-core); font-size: var(--fs-sm); letter-spacing: var(--ls-eyebrow); text-transform: lowercase; color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--space-2); } .mz-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--green-500); flex: none; } .mz-dark .mz-eyebrow { color: var(--accent); } .mz-dark .mz-eyebrow::before { display: none; } /* --- Button ------------------------------------------------------------- */ .mz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 10px var(--space-6); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); font-family: var(--font-core); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.25; text-align: center; /* Langer Beschriftungstext darf umbrechen, statt abgeschnitten zu werden. */ white-space: normal; text-decoration: none; cursor: pointer; transition: var(--transition-control); } .mz-btn:active { transform: scale(var(--press-scale)); } .mz-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .mz-btn--sm { min-height: var(--control-h-sm); padding: 8px var(--space-4); font-size: var(--fs-sm); } .mz-btn--lg { min-height: var(--control-h-lg); padding: 14px var(--space-8); font-size: var(--fs-md); } .mz-btn--block { width: 100%; } .mz-btn--primary { --mz-btn-bg: var(--accent); background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .mz-btn--primary:hover { --mz-btn-bg: var(--accent-hover); background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); } .mz-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-subtle); } .mz-btn--secondary:hover { border-color: var(--accent); color: var(--accent); } /* Der Auftritts-CTA: Kontur statt Fläche. * * Vorher stand hier überall dieselbe grüne Fläche – auf der Startseite fünfmal * untereinander, dazu einmal in der Kopfleiste direkt neben der weißen Kontur * von "login". Das Grün war damit Fläche statt Akzent, und zwei gleich laute * Knöpfe standen nebeneinander, obwohl nur einer das Ziel der Seite ist. * * Als Kontur bleibt das Grün Signal und die Fläche dem Überfahren vorbehalten. * Bewusst ein eigener Zusatz und keine Änderung an --primary: In Dialogen * (Altersabfrage, Login) und in den Formularen des Plugins bleibt der * gefüllte Knopf richtig – dort gibt es nichts zu entscheiden, sondern nur * eine Handlung. * * --mz-btn-bg mitzusetzen ist Pflicht, sonst färbt das Eltern-Theme den Knopf * beim Überfahren magenta – siehe die Korrektur ganz oben in dieser Datei. */ .mz-btn--kontur { background: transparent; color: var(--accent); border-color: var(--accent); } .mz-btn--kontur:hover, .mz-btn--kontur:focus-visible { --mz-btn-bg: var(--accent); background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .mz-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .mz-btn--ghost:hover { color: var(--text-primary); } .mz-btn[disabled], .mz-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* --- Card --------------------------------------------------------------- */ .mz-card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); color: var(--text-primary); } .mz-card--flush { padding: 0; overflow: hidden; } .mz-card--raised { box-shadow: var(--shadow-md); } .mz-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .mz-card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; } .mz-card__divider { border: 0; border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-4) 0; } /* --- Badge / Tag -------------------------------------------------------- */ .mz-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; } .mz-badge--outline { border: var(--border-width) solid var(--border-subtle); color: var(--text-secondary); } .mz-badge--accent { background: var(--green-tint-16); color: var(--accent); } .mz-badge--success { background: var(--status-success-bg); color: var(--status-success); } .mz-badge--warning { background: var(--status-warning-bg); color: var(--status-warning); } .mz-badge--danger { background: var(--status-danger-bg); color: var(--status-danger); } /* --- Notice ------------------------------------------------------------- */ .mz-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border-left: var(--border-width-strong) solid var(--status-info); background: var(--status-info-bg); color: var(--black); font-size: var(--fs-sm); line-height: var(--lh-body); } .mz-notice--legal { border-left-color: var(--grey-600); background: var(--grey-100); } .mz-notice--warning { border-left-color: var(--status-warning); background: var(--status-warning-bg); } .mz-notice--danger { border-left-color: var(--status-danger); background: var(--status-danger-bg); } .mz-notice--age { border-left-color: var(--status-age); background: var(--status-danger-bg); } .mz-dark .mz-notice { background: var(--white-a08); color: var(--text-primary); border-left-color: var(--accent); } /* --- StatTile ----------------------------------------------------------- */ .mz-stat { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); } .mz-stat__label { font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); } .mz-stat__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-primary); } .mz-stat__unit { font-size: var(--fs-lg); color: var(--text-secondary); margin-left: 4px; } .mz-stat__bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden; margin-top: var(--space-4); } .mz-stat__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-base) var(--ease-standard); } .mz-stat__foot { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); } /* --- Formularfelder ----------------------------------------------------- */ .mz-field { display: flex; flex-direction: column; gap: 6px; } .mz-field__label { font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); } .mz-field__control { height: var(--control-h); padding-inline: var(--space-4); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font-family: var(--font-core); font-size: var(--fs-base); transition: var(--transition-control); } .mz-field__control:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); } .mz-field__hint { font-size: var(--fs-2xs); color: var(--text-muted); } /* Anmeldemaske: schwarze Felder mit grüner Kontur, wie im Entwurf. */ .mz-form--signup .mz-field__label { color: var(--accent); } .mz-form--signup .mz-field__control { background: var(--black); border-color: var(--accent); color: var(--white); } /* --- Trennlinie mit Signalfarbe ----------------------------------------- */ .mz-rule { border: 0; height: 4px; background: var(--accent); margin: 0; } /* --- Auftritt beim Scrollen ---------------------------------------------- * * Inhalte treten so auf, wie der Kopfbereich beim Laden der Seite auftritt: * Sie blenden auf und schieben sich dabei ein Stück nach oben. Ausgelöst wird * das, sobald ein Element in den sichtbaren Bereich kommt – und zwar jedes * Mal aufs Neue: Verlässt es das Bild vollständig, wird es zurückgesetzt und * tritt beim nächsten Mal wieder auf. Beim Hochscrollen kommt es dabei von * oben statt von unten; die Richtung steckt in --mz-von, gesetzt von * assets/js/home.js. * * Zurückgesetzt wird erst, wenn das Element restlos aus dem Bild ist – so * sieht niemand, wie es unsichtbar geschaltet wird. * * Die Staffelung macht den Auftritt aus: Kommen mehrere Elemente zugleich ins * Bild, setzen sie nacheinander ein. Wo die Reihenfolge inhaltlich feststeht, * steht die Verzögerung als --d im HTML; für alles andere vergibt * assets/js/home.js sie beim Erscheinen. * * Bewusst eine Animation und kein Übergang (transition). Elementor schaltet * bei eingeschalteter Einstellung "Bewegung reduzieren" pauschal jeden * Übergang im Dokument ab: * * @media (prefers-reduced-motion: reduce) { * html * { transition-duration: 0s !important; transition-delay: 0s !important } * } * * Ein Übergang wäre für diese Besucher also ersatzlos verschwunden – der * Auftritt der Seite fiele für sie komplett weg. Animationen lässt Elementor * in Ruhe (bis auf seine eigene Klasse .animated), deshalb der Weg über * @keyframes. Für diese Besucher entfällt weiter unten das Hochschieben; das * reine Aufblenden bleibt, denn eine Überblendung ist keine Bewegung, die * Schwindel auslösen könnte. * * Der Ausgangszustand ist "unsichtbar". Damit ohne JavaScript niemand vor * einer leeren Seite steht, nimmt ein