Optimierung markemacht.de und adametz.media für Live-Deploy.
Beide Sites mit lokalem Font-Hosting, WebP, Build-Pipeline, SEO-Basis, HSTS, Performance-Tuning und aktualisierten Impressum/Datenschutz-Texten. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
18216e301c
commit
9c6b7ed4f3
158 changed files with 12472 additions and 873 deletions
|
|
@ -32,7 +32,7 @@
|
|||
--ff-body: "Work Sans", system-ui, sans-serif;
|
||||
--ff-mono: "Space Grotesk", ui-monospace, monospace;
|
||||
|
||||
--fs-hero: clamp(52px, 8vw, 96px);
|
||||
--fs-hero: clamp(48px, 8vw, 88px);
|
||||
--fs-section: clamp(36px, 5vw, 56px);
|
||||
--fs-editorial: clamp(20px, 2.2vw, 30px);
|
||||
|
||||
|
|
@ -110,7 +110,6 @@
|
|||
|
||||
* { box-sizing: border-box; }
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 96px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
|
@ -188,8 +187,18 @@ img, svg { max-width: 100%; display: block; }
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 1.125em;
|
||||
height: 1.125em;
|
||||
flex-shrink: 0;
|
||||
fill: currentColor;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
.icon--lg {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* --- Typography Classes ---------------------------------------------------- */
|
||||
|
|
@ -347,6 +356,11 @@ img, svg { max-width: 100%; display: block; }
|
|||
|
||||
/* --- Navigation ------------------------------------------------------------ */
|
||||
|
||||
/* Der Header wird per JS in [data-site-header] injiziert. Ohne display:contents
|
||||
begrenzt dieser Wrapper-Div (nur so hoch wie der Header) das Sticky-Verhalten,
|
||||
sodass die Nav sofort wegscrollt. */
|
||||
[data-site-header] { display: contents; }
|
||||
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -595,47 +609,99 @@ body.drawer-open { overflow: hidden; }
|
|||
.hero-keyvisual {
|
||||
position: absolute;
|
||||
inset: 0 0 0 auto;
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.hero-keyvisual { display: block; }
|
||||
/* Solange das Keyvisual die rechte Hälfte belegt, bleibt der Textspalten-
|
||||
Inhalt links davon — verhindert das Überlaufen der (im monolithischen
|
||||
Modus größeren) Headline in das Bild. Greift nur auf Seiten mit
|
||||
Keyvisual; Seiten ohne (z. B. Audit) nutzen die volle Breite. */
|
||||
.hero:has(.hero-keyvisual) .hero-grid .col-12 { max-width: 50%; }
|
||||
}
|
||||
|
||||
/* Mobil: Keyvisual nicht ausblenden, sondern als vollbreites Banner im
|
||||
normalen Fluss unterhalb des Textes zeigen (keine Überlappung).
|
||||
Per Flex-Reihenfolge wandert das Bild trotz früherer DOM-Position
|
||||
hinter den Hero-Text. */
|
||||
@media (max-width: 899px) {
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.hero-keyvisual {
|
||||
display: block;
|
||||
position: relative;
|
||||
inset: auto;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: clamp(240px, 60vw, 400px);
|
||||
margin-top: clamp(32px, 8vw, 56px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero-Bild-Slot (CHG-08): randständig, angeschnitten, harte Kante,
|
||||
flacher Flächenton als Platzhalter — kein Verlauf, kein Glow. */
|
||||
kein Verlauf, kein Glow. Flächenton dient als Fallback hinter dem Bild.
|
||||
Füllt den Keyvisual-Bereich (rechte Hälfte) bündig und auf voller Höhe.
|
||||
Bildpaare je Seite über --hero-monolith / --hero-editorial (siehe .hero--*).
|
||||
Lazy Load: Hintergrundbilder erst nach is-loaded-* (app.js). */
|
||||
.monolith {
|
||||
position: absolute;
|
||||
right: -6%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 70%;
|
||||
aspect-ratio: 3/4;
|
||||
background: rgb(var(--color-bg-surface));
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(var(--color-bg-surface));
|
||||
background-image: none;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Alternative Keyvisual-Slots für Unterseiten — ebenfalls flach */
|
||||
.monolith--edge {
|
||||
right: -20%;
|
||||
width: 60%;
|
||||
aspect-ratio: 4/5;
|
||||
background: rgb(var(--color-bg-surface));
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
.monolith.is-loaded-mono {
|
||||
background-image: var(--hero-monolith);
|
||||
}
|
||||
|
||||
.monolith--texture {
|
||||
right: -15%;
|
||||
top: 40%;
|
||||
width: 55%;
|
||||
aspect-ratio: 1/1;
|
||||
background: rgb(var(--color-bg-surface));
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
/* Wirkungswechsel: editorial zeigt die wärmere Variante des Keyvisuals.
|
||||
Das Editorial-Bild liegt als Overlay über dem Basisbild und wird per
|
||||
Opacity sanft ein-/ausgeblendet — ergibt einen weichen Crossfade beim
|
||||
Modus-Wechsel (background-image selbst ist nicht animierbar). */
|
||||
.monolith::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: none;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-medium);
|
||||
}
|
||||
.monolith.is-loaded-editorial::after {
|
||||
background-image: var(--hero-editorial);
|
||||
}
|
||||
[data-theme="editorial"] .monolith::after { opacity: 1; }
|
||||
|
||||
/* Hero-Keyvisuals je Seite (Monolith + Editorial, WebP) */
|
||||
.hero--start .monolith {
|
||||
--hero-monolith: url("../img/start-monolith.webp");
|
||||
--hero-editorial: url("../img/start-editorial.webp");
|
||||
}
|
||||
.hero--manifest .monolith {
|
||||
--hero-monolith: url("../img/manifest-monolith.webp");
|
||||
--hero-editorial: url("../img/manifest-editorial.webp");
|
||||
}
|
||||
.hero--methode .monolith {
|
||||
--hero-monolith: url("../img/methode-monolith.webp");
|
||||
--hero-editorial: url("../img/methode-editorial.webp");
|
||||
}
|
||||
.hero--denken .monolith {
|
||||
--hero-monolith: url("../img/denken-monolith.webp");
|
||||
--hero-editorial: url("../img/denken-editorial.webp");
|
||||
}
|
||||
|
||||
/* --- Buttons / Links ------------------------------------------------------- */
|
||||
|
|
@ -648,6 +714,7 @@ body.drawer-open { overflow: hidden; }
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 22px;
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--ff-mono);
|
||||
font-size: var(--fs-meta);
|
||||
letter-spacing: var(--ls-meta);
|
||||
|
|
@ -672,6 +739,32 @@ body.drawer-open { overflow: hidden; }
|
|||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
|
||||
.btn .icon {
|
||||
width: 1.125em;
|
||||
height: 1.125em;
|
||||
}
|
||||
|
||||
.btn-nav-cta {
|
||||
background: rgb(var(--color-text-primary));
|
||||
border-color: rgb(var(--color-text-primary));
|
||||
color: rgb(var(--color-accent));
|
||||
}
|
||||
[data-theme="editorial"] .btn-nav-cta {
|
||||
background: rgb(var(--color-text-primary));
|
||||
border-color: rgb(var(--color-text-primary));
|
||||
color: rgb(var(--color-bg-base));
|
||||
}
|
||||
.btn-nav-cta:hover {
|
||||
background: rgb(var(--color-accent));
|
||||
border-color: rgb(var(--color-accent));
|
||||
color: rgb(var(--color-bg-base));
|
||||
}
|
||||
[data-theme="editorial"] .btn-nav-cta:hover {
|
||||
background: rgb(var(--color-accent));
|
||||
border-color: rgb(var(--color-accent));
|
||||
color: rgb(var(--color-text-primary));
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: rgb(var(--color-text-primary));
|
||||
|
|
@ -715,6 +808,191 @@ body.drawer-open { overflow: hidden; }
|
|||
border-bottom-color: rgb(var(--color-text-primary));
|
||||
}
|
||||
|
||||
/* --- Modal / Anfrageformular --------------------------------------------- */
|
||||
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 120;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: clamp(16px, 4vw, 48px);
|
||||
background: rgb(0 0 0 / 0.72);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
.modal-backdrop.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: min(100%, 760px);
|
||||
max-height: min(88vh, 920px);
|
||||
overflow: auto;
|
||||
background: rgb(var(--color-bg-base));
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
padding: clamp(28px, 5vw, 56px);
|
||||
box-shadow: 0 24px 80px rgb(0 0 0 / 0.35);
|
||||
transform: translateY(12px);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
.modal-backdrop.is-open .modal-dialog {
|
||||
transform: translateY(0);
|
||||
}
|
||||
[data-theme="editorial"] .modal-dialog {
|
||||
background: rgb(var(--color-bg-elevated));
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: rgb(var(--color-text-primary));
|
||||
background: transparent;
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
}
|
||||
.modal-close:hover {
|
||||
border-color: rgb(var(--color-text-primary));
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.form-field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
color: rgb(var(--color-text-primary));
|
||||
background: rgb(var(--color-bg-surface));
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.form-field textarea {
|
||||
resize: vertical;
|
||||
min-height: 140px;
|
||||
}
|
||||
.form-field input:focus,
|
||||
.form-field textarea:focus {
|
||||
border-color: rgb(var(--color-accent));
|
||||
}
|
||||
.form-check {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
color: rgb(var(--color-text-dim));
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-check input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.form-switch {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: 52px;
|
||||
height: 30px;
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: 999px;
|
||||
background: rgb(var(--color-bg-surface));
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast);
|
||||
}
|
||||
.form-switch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: rgb(var(--color-text-dim));
|
||||
transition: transform var(--transition-fast), background-color var(--transition-fast);
|
||||
}
|
||||
.form-check input:checked + .form-switch {
|
||||
background: rgb(var(--color-accent));
|
||||
border-color: rgb(var(--color-accent));
|
||||
}
|
||||
.form-check input:checked + .form-switch::after {
|
||||
transform: translateX(22px);
|
||||
background: rgb(var(--color-bg-base));
|
||||
}
|
||||
.form-check input:focus-visible + .form-switch {
|
||||
outline: 2px solid rgb(var(--color-accent));
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.form-status {
|
||||
min-height: 1.4em;
|
||||
}
|
||||
|
||||
.form-success[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.form-success {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
gap: 24px;
|
||||
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px);
|
||||
background: rgb(var(--color-bg-surface));
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
[data-theme="editorial"] .form-success {
|
||||
background: rgb(var(--color-bg-base));
|
||||
}
|
||||
.form-success-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
background: rgb(var(--color-accent) / 0.08);
|
||||
color: rgb(var(--color-accent) / 0.72);
|
||||
}
|
||||
.form-success-icon .icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
.form-success .sub-headline {
|
||||
margin: 0;
|
||||
color: rgb(var(--color-text-primary));
|
||||
}
|
||||
.form-success .body-text {
|
||||
margin: 0;
|
||||
color: rgb(var(--color-text-dim));
|
||||
max-width: 32ch;
|
||||
}
|
||||
|
||||
.form-honeypot {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --- Section number ------------------------------------------------------- */
|
||||
|
||||
.section-num {
|
||||
|
|
@ -996,6 +1274,15 @@ body.drawer-open { overflow: hidden; }
|
|||
color: rgb(var(--color-text-primary));
|
||||
}
|
||||
.prose strong { font-weight: 600; color: rgb(var(--color-text-primary)); }
|
||||
.prose a,
|
||||
.form-check a {
|
||||
color: rgb(var(--color-text-primary));
|
||||
border-bottom: 1px solid rgb(var(--color-accent));
|
||||
}
|
||||
.prose a:hover,
|
||||
.form-check a:hover {
|
||||
color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
/* Footer ------------------------------------------------------------------- */
|
||||
|
||||
|
|
@ -1045,6 +1332,13 @@ body.drawer-open { overflow: hidden; }
|
|||
letter-spacing: -0.005em;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* "Anfrage" ist ein Button (öffnet das Modal), soll aber wie ein Link wirken. */
|
||||
button.footer-link {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.footer-link:hover { color: rgb(var(--color-text-primary)); }
|
||||
.footer-note { opacity: 0.8; }
|
||||
|
||||
|
|
@ -1108,8 +1402,14 @@ body.drawer-open { overflow: hidden; }
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.split-visual .monolith {
|
||||
--hero-monolith: url("../img/uebergang-monolith.webp");
|
||||
--hero-editorial: url("../img/uebergang-editorial.webp");
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* --- Scroll-Reveal -------------------------------------------------------- */
|
||||
/* --- Reveal --------------------------------------------------------------- */
|
||||
|
||||
[data-reveal] {
|
||||
opacity: 0;
|
||||
|
|
@ -1131,7 +1431,6 @@ body.drawer-open { overflow: hidden; }
|
|||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* --- Print ----------------------------------------------------------------- */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue