UX/DSGVO: Consent-Optionen und Top-Link ergänzt

This commit is contained in:
2026-03-17 15:51:01 +01:00
parent bf6d9e7106
commit 6e7ca9538b
5 changed files with 262 additions and 75 deletions

View File

@@ -303,7 +303,7 @@ a {
}
.site-footer {
padding: 1.4rem 0 2.4rem;
padding: 1.4rem 0 6rem;
background: #f4eee5;
}
@@ -324,6 +324,100 @@ a {
gap: 1rem;
}
.consent-panel {
position: fixed;
right: 1rem;
bottom: 1rem;
width: min(28rem, calc(100vw - 2rem));
z-index: 2000;
padding: 1.2rem;
border-radius: 1rem;
background: rgba(36, 52, 45, 0.96);
color: #fff;
box-shadow: var(--shadow-soft);
transform: translateY(120%);
transition: transform 0.25s ease;
}
.consent-panel.is-visible {
transform: translateY(0);
}
.consent-panel h2 {
margin: 0 0 0.75rem;
font-size: 1.2rem;
}
.consent-panel p {
margin: 0 0 0.9rem;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.consent-options {
margin-bottom: 1rem;
}
.consent-option {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
}
.consent-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.consent-open-button {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 1990;
border: 0;
border-radius: 999px;
padding: 0.55rem 0.95rem;
background: rgba(116, 89, 72, 0.95);
color: #fff;
font-size: 0.85rem;
}
.consent-open-button:hover,
.consent-open-button:focus {
background: #5f4739;
}
.top-link-button {
position: fixed;
right: 1.5rem;
bottom: 1rem;
z-index: 1985;
border: 0;
border-radius: 999px;
padding: 0.5rem 0.9rem;
background: rgba(49, 69, 59, 0.92);
color: #fff;
font-size: 0.82rem;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-link-button.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.top-link-button:hover,
.top-link-button:focus {
background: #24342d;
}
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 1rem;
@@ -368,4 +462,12 @@ a {
.hero-section {
padding-bottom: 4rem;
}
.consent-actions {
flex-direction: column;
}
.top-link-button {
bottom: 1rem;
}
}