/* ==========================================================================
Bestattungen HEIGOLD — Theme CSS
Extracted from Lovable/Tailwind design system; rewritten as vanilla CSS.
Design tokens preserved 1:1.
========================================================================== */
/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');
/* ---------- Design Tokens (HSL) ---------- */
:root {
--background: 270 15% 97%;
--foreground: 270 20% 15%;
--card: 270 12% 95%;
--card-foreground: 270 20% 15%;
--popover: 270 15% 98%;
--popover-foreground: 270 20% 15%;
--primary: 274 79% 25%;
--primary-foreground: 270 15% 97%;
--secondary: 270 25% 92%;
--secondary-foreground: 270 20% 20%;
--muted: 270 12% 93%;
--muted-foreground: 270 10% 45%;
--accent: 274 20% 90%;
--accent-foreground: 270 20% 15%;
--destructive: 0 65% 50%;
--destructive-foreground: 270 15% 97%;
--border: 270 15% 88%;
--input: 270 15% 88%;
--ring: 274 79% 25%;
--radius: 0.5rem;
--emergency: 274 60% 35%;
--emergency-foreground: 0 0% 100%;
--trust: 274 79% 25%;
--trust-foreground: 0 0% 100%;
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--shadow-soft: 0 4px 20px -4px hsl(270 20% 15% / 0.08);
--shadow-elevated: 0 8px 30px -8px hsl(270 20% 15% / 0.12);
--shadow-card: 0 2px 12px -2px hsl(270 20% 15% / 0.06);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
background: hsl(var(--background));
color: hsl(var(--foreground));
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img[src*="/star/f.svg"] {
filter: brightness(0) saturate(100%)
invert(8%) sepia(86%)
saturate(3915%)
hue-rotate(270deg)
brightness(88%)
contrast(103%);
}
img { width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 .5em;
line-height: 1.2;
}
h1 { font-size: 3.75rem; line-height: 1; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
:focus-visible {
outline: 2px solid hsl(var(--primary));
outline-offset: 2px;
}
.skip-link {
position: absolute; top: -40px; left: 16px; z-index: 100;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
padding: 8px 16px; border-radius: 6px; transition: top .2s ease;
}
.skip-link:focus { top: 16px; }
/* ---------- Layout Primitives ---------- */
.container-wide { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-wide, .container-narrow { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-wide, .container-narrow { padding: 0 2rem; } }
.section-padding { padding: 4rem 0; }
@media (min-width: 768px) { .section-padding { padding: 6rem 0; } }
@media (min-width: 1024px) { .section-padding { padding: 8rem 0; } }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem; padding: .75rem 1.5rem;
font-weight: 600; border-radius: .5rem;
transition: all .3s ease; text-decoration: none; line-height: 1.25;
}
.btn-emergency {
background: hsl(var(--emergency)); color: hsl(var(--emergency-foreground));
box-shadow: var(--shadow-elevated);
}
.btn-emergency:hover { filter: brightness(1.05); transform: scale(1.02); }
.btn-trust {
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
box-shadow: var(--shadow-soft); font-weight: 500;
}
.btn-trust:hover { filter: brightness(1.1); box-shadow: var(--shadow-elevated); }
.btn-soft {
background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
}
.btn-soft:hover { background: hsl(var(--accent)); }
.btn-outline {
background: transparent; color: hsl(var(--primary));
border: 1px solid hsl(var(--primary));
}
.btn-outline:hover { background: hsl(var(--primary) / 0.05); }
/* ---------- Cards ---------- */
.card-serene {
background: hsl(var(--card)); border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow-card);
transition: all .3s ease;
}
.card-serene:hover { box-shadow: var(--shadow-elevated); }
.decorative-line {
width: 4rem; height: 2px; background: hsl(var(--primary) / 0.3);
border-radius: 9999px; margin: 1rem auto;
}
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: hsl(var(--background) / 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
height: 9rem;
}
@media (min-width: 768px) { .header-inner { height: 11rem; } }
.site-logo img { max-width: 100%; height: auto !important; max-height: 5rem !important; width: auto; object-fit: contain; }
@media (min-width: 768px) { .site-logo img { height: auto !important; } }
.primary-nav {
display: none; gap: 0.25rem; align-items: center;
}
@media (min-width: 1024px) { .primary-nav { display: flex; } }
.nav-link {
padding: 0.5rem 1rem; border-radius: 0.5rem;
font-size: 0.875rem; font-weight: 500;
color: hsl(var(--foreground) / 0.8); transition: all .2s;
display: inline-flex; align-items: center; gap: 0.25rem;
}
.nav-link:hover, .nav-link.active {
background: hsl(var(--primary) / 0.1); color: hsl(var(--primary));
}
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
position: absolute; top: 100%; left: 0; margin-top: 4px;
width: 18rem; background: hsl(var(--card));
border-radius: 0.75rem; box-shadow: var(--shadow-elevated);
border: 1px solid hsl(var(--border) / 0.5);
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s, transform .2s; padding: 0.5rem;
z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-dropdown-item {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.75rem 1rem; border-radius: 0.5rem;
font-size: 0.875rem; transition: background .2s;
color: hsl(var(--foreground));
}
.nav-dropdown-item:hover { background: hsl(var(--primary) / 0.05); color: hsl(var(--primary)); }
.nav-dropdown-item .dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--primary)); margin-top: 8px; flex-shrink: 0; }
.nav-dropdown-item-sub { display: block; font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.nav-dropdown-all {
display: block; padding: 0.75rem 1rem; font-weight: 500;
border-bottom: 1px solid hsl(var(--border) / 0.5); margin-bottom: 0.5rem;
border-radius: 0.5rem;
}
.nav-dropdown-all:hover { background: hsl(var(--primary) / 0.05); color: hsl(var(--primary)); }
/* Mobile nav */
.mobile-toggle {
display: inline-flex; padding: 0.5rem; border-radius: 0.5rem;
}
@media (min-width: 1024px) { .mobile-toggle { display: none; } }
.mobile-nav {
display: none;
border-top: 1px solid hsl(var(--border) / 0.5);
padding: 1rem 0;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; }
.mobile-nav a {
display: block; padding: 0.75rem 1rem; border-radius: 0.5rem;
color: hsl(var(--foreground) / 0.8); font-weight: 500;
}
.mobile-nav a:hover { background: hsl(var(--primary) / 0.05); color: hsl(var(--primary)); }
.mobile-nav .sub-menu { padding-left: 1rem; }
.mobile-nav .sub-menu a { font-size: 0.875rem; font-weight: 400; }
/* ---------- Footer ---------- */
.site-footer {
background: hsl(var(--card));
border-top: 1px solid hsl(var(--border));
}
.footer-grid {
display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h3 {
font-family: var(--font-serif); font-size: 1.125rem;
margin: 0 0 1rem; color: hsl(var(--foreground));
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.footer-col a { color: hsl(var(--muted-foreground)); font-size: 0.875rem; transition: color .2s; }
.footer-col a:hover { color: hsl(var(--primary)); }
.footer-col p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.6; }
.footer-logo { height: 7rem; width: auto; object-fit: contain; margin-bottom: 1rem; }
@media (min-width: 768px) { .footer-logo { height: 4rem; } }
.footer-contact {
display: grid; gap: 0.75rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem;
}
.footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer-contact li::before {
content: ""; width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 4px;
background: hsl(var(--primary)); -webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.footer-contact li.addr::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.footer-contact li.tel::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.footer-contact li.mail::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.footer-contact li.clock::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.footer-bar {
border-top: 1px solid hsl(var(--border));
margin-top: 3rem; padding-top: 2rem;
display: flex; flex-direction: column; gap: 1rem;
align-items: center; justify-content: space-between;
font-size: 0.875rem; color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .footer-bar { flex-direction: row; } }
.footer-bar a:hover { color: hsl(var(--primary)); }
.footer-legal { display: flex; gap: 1.5rem; }
/* Sticky Emergency Bar – mobile only */
.emergency-bar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
background: hsl(var(--emergency)); color: hsl(var(--emergency-foreground));
padding: 0.75rem 1rem; box-shadow: var(--shadow-elevated);
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
font-weight: 600;
}
.emergency-bar a { color: inherit; }
@media (min-width: 1024px) { .emergency-bar { display: none; } }
body { padding-bottom: 60px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }
/* ==========================================================================
SECTION / LAYOUT STYLES
========================================================================== */
/* Hero – Video Homepage */
.hero-video {
position: relative; min-height: 90vh;
display: flex; align-items: center; overflow: hidden;
}
.hero-video__bg {
position: absolute; inset: 0; z-index: 0;
}
.hero-video__bg video,
.hero-video__bg img {
width: 100%; height: 100%; object-fit: cover;
}
.hero-video__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to right, hsl(var(--foreground) / 0.8), hsl(var(--foreground) / 0.6), hsl(var(--foreground) / 0.4));
opacity: 0.6;
}
.hero-video__gradient {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, hsl(var(--background)), transparent, transparent);
}
.hero-video__content {
position: relative; z-index: 10; padding: 5rem 0;
}
.hero-video__content h1 {
font-size: clamp(2rem, 5vw, 3.75rem);
line-height: 1;
color: hsl(var(--primary-foreground));
margin-bottom: 1.5rem; max-width: 52rem;
}
.hero-video__content p.lead {
font-size: clamp(1rem, 2vw, 1.25rem);
color: hsl(var(--primary-foreground) / 0.8);
max-width: 36rem; margin-bottom: 2rem;
}
.hero-video__eyebrow { color: hsl(var(--primary-foreground) / 0.9); font-weight: 500; margin-bottom: 1rem; }
.hero-video__cta { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-video__cta { flex-direction: row; } }
/* Inner-page Hero (image bg) */
.page-hero {
position: relative; min-height: 40vh;
display: flex; align-items: center; overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to right, hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.3));
}
.page-hero__content { position: relative; z-index: 10; padding: 4rem 0; }
.page-hero__content .eyebrow { color: hsl(var(--primary-foreground) / 0.9); font-weight: 500; margin-bottom: 0.75rem; }
.page-hero__content h1 { color: hsl(var(--primary-foreground)); margin-bottom: 1rem; max-width: 48rem; }
.page-hero__content p { color: hsl(var(--primary-foreground) / 0.9); max-width: 42rem; font-size: 1.125rem; }
.page-hero.center { text-align: center; }
.page-hero.center .page-hero__content p,
.page-hero.center .page-hero__content h1 { margin-left: auto; margin-right: auto; }
/* Section eyebrow + heading block */
.section-head { text-align: center; margin-bottom: 3rem; /*max-width: 48rem;*/ margin-left: auto; margin-right: auto; }
.section-head .eyebrow { color: hsl(var(--primary)); font-weight: 500; margin-bottom: 0.5rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { color: hsl(var(--muted-foreground)); }
/* Trust Points (3 columns icon/title/desc) */
.grid-3 {
display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.trust-point { text-align: center; }
.trust-point__icon {
width: 4rem; height: 4rem; margin: 0 auto 1rem;
background: hsl(var(--primary) / 0.1);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.trust-point__icon img { width: 1.75rem; height: 1.75rem; }
.trust-point h3 { margin-bottom: 0.5rem; line-height: 28px;}
.trust-point p { color: hsl(var(--muted-foreground)); }
/* Highlights cards */
.highlight-card {
display: block; background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5); border-radius: 0.75rem;
padding: 1.5rem; box-shadow: var(--shadow-card);
transition: transform .3s ease, box-shadow .3s ease, color .2s;
}
.highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.highlight-card__icon {
width: 3rem; height: 3rem; border-radius: 0.5rem;
background: hsl(var(--primary) / 0.1);
display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
padding: 10px;
}
.highlight-card__icon img { width: 1.5rem; height: 1.5rem; }
.highlight-card h3 { margin-bottom: 0.5rem; transition: color .2s; }
.highlight-card:hover h3 { color: hsl(var(--primary)); }
.highlight-card p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
/* Service cards (big image + description) */
.service-card {
display: block; overflow: hidden; background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5); border-radius: 1rem;
box-shadow: var(--shadow-card); transition: all .3s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.service-card__img {
aspect-ratio: 16 / 9; overflow: hidden;
}
.service-card__img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s;
}
.service-card:hover .service-card__img img { transform: scale(1.05); }
.service-card__body { padding: 1.5rem; }
.service-card__body p.service-card__sub { font-size: 0.75rem; color: hsl(var(--primary)); font-weight: 500; margin-bottom: 0.25rem; letter-spacing: 0.05em; }
.service-card__body h3 { margin-bottom: 0.5rem; transition: color .2s; font-size: 1.25rem; line-height: 1.75rem;}
.service-card:hover .service-card__body h3 { color: hsl(var(--primary)); }
.service-card__body p { color: #73677e; font-size: .875rem;line-height: 1.25rem; margin: 0; }
/* Two-column intro (image + text) */
.intro-2col {
display: grid; gap: 3rem; align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .intro-2col { grid-template-columns: 1fr 1fr; } }
.intro-2col.reverse .intro-2col__media { order: 2; }
@media (min-width: 1024px) { .intro-2col.reverse .intro-2col__media { order: 2; } }
.intro-2col__media img {
border-radius: 1rem; box-shadow: var(--shadow-elevated); width: 100%;
max-height: 500px; object-fit: cover;
}
.intro-2col__body .eyebrow { color: hsl(var(--primary)); font-weight: 500; margin-bottom: 0.5rem; }
.intro-2col__body h2 { margin-bottom: 2rem; }
.intro-2col__body p { color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
/* Rich text block */
.rich-text-block {
max-width: 56rem; margin: 0 auto;
color: hsl(var(--foreground));
}
.rich-text-block h2 { margin: 1.5em 0 .5em; }
.rich-text-block h3 { margin: 1em 0 .5em; }
.rich-text-block p,
.rich-text-block li { color: hsl(var(--muted-foreground)); line-height: 1.8; }
.rich-text-block a { color: hsl(var(--primary));}
.rich-text-block a:hover { text-decoration: underline; }
/*.rich-text-block strong { color: hsl(var(--foreground)); }*/
.rich-text-block ul, .rich-text-block ol { padding-left: 1.25rem; }
/* CTA phone/contact banner */
.cta-banner {
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
.cta-banner .wrap { text-align: center; }
.cta-banner h2 { color: hsl(var(--primary-foreground)); margin-bottom: 1rem; }
.cta-banner p { color: hsl(var(--primary-foreground) / 0.85); margin-bottom: 2rem; }
.cta-banner .btn-phone {
background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); font-weight: 600;
}
.cta-banner .btn-phone:hover { background: hsl(var(--primary-foreground) / 0.9); }
.cta-banner .btn-secondary {
background: hsl(var(--primary-foreground) / 0.15);
border: 1px solid hsl(var(--primary-foreground) / 0.5);
color: hsl(var(--primary-foreground));
}
.cta-banner .btn-secondary:hover { background: hsl(var(--primary-foreground) / 0.25); }
.cta-banner .btn-row {
display: flex; flex-direction: column; gap: 1rem; justify-content: center;
}
@media (min-width: 640px) { .cta-banner .btn-row { flex-direction: row; } }
/* Checklist / Tasks */
.checklist {
display: grid; gap: 1rem;
max-width: 40rem; margin: 0 auto;
}
.checklist-item {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
display: flex; gap: 1rem; align-items: flex-start;
box-shadow: var(--shadow-card);
}
.checklist-item__num {
width: 2rem; height: 2rem; border-radius: 50%;
background: hsl(var(--primary) / 0.1); color: hsl(var(--primary));
font-weight: 600; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.checklist-item h4 { margin: 0 0 0.25rem; font-family: var(--font-serif); font-size: 1.05rem; }
.checklist-item p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
/* FAQ Accordion */
.faq-list { max-width: 100%; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq-item {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.5rem;
overflow: hidden;
}
.faq-question {
width: 100%; text-align: left;
padding: 1rem 1.25rem;
display: flex; align-items: center; justify-content: space-between;
font-weight: 500; font-family: var(--font-serif); font-size: 18px; line-height: 28px;
}
.faq-question:hover { background: hsl(var(--primary) / 0.04); }
.faq-question::after {
content: "+"; font-size: 1.5rem; font-weight: 300;
transition: transform .2s;
}
.faq-item.is-open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height .3s ease;
padding: 0 1.25rem;
color: hsl(var(--muted-foreground));
}
.faq-item.is-open .faq-answer {
max-height: 800px; padding: 10px 1.25rem 2rem;
}
/* Team grid */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
background: hsl(var(--card)); border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow-card);
transition: box-shadow .3s;
}
.team-card:hover { box-shadow: var(--shadow-elevated); }
.team-card__img { aspect-ratio: 3/4; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; background: hsl(var(--muted)); }
.team-card__body { padding: 1.5rem; }
.team-card__body h3 { margin-bottom: 0.25rem; font-size: 1.15rem; }
.team-card__role { color: hsl(var(--primary)); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.5rem; }
.team-card__body p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin: 0; }
/* Timeline (vertical) */
.timeline { position: relative; max-width: 48rem; margin: 0 auto; padding-left: 2rem; }
/* .timeline::before {
content: ""; position: absolute; left: 0.5rem; top: 0; bottom: 0;
width: 2px; background: hsl(var(--primary) / 0.3);
} */
.timeline-item { position: relative; padding-bottom: 2.5rem; }
/* .timeline-item::before {
content: ""; position: absolute; left: -1.75rem; top: 0.35rem;
width: 0.75rem; height: 0.75rem; border-radius: 50%;
background: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--background));
} */
.timeline-item h4 { margin: 0 0 .25rem; font-family: var(--font-serif); font-size: 1.1rem; }
.timeline-item .timing { font-size: 0.875rem; color: hsl(var(--primary)); font-weight: 500; margin-bottom: 0.5rem; }
.timeline-item p { color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.timeline-item ul { padding-left: 1.1rem; color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
/* History / Milestones */
.milestones {
display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 40rem; margin: 0 auto;
}
.milestone {
display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline;
padding: 0.75rem 1rem; background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5); border-radius: 0.5rem;
}
.milestone .year { font-family: var(--font-serif); font-size: 1.15rem; color: hsl(var(--primary)); font-weight: 600; }
.milestone .event { color: hsl(var(--muted-foreground)); }
/* Image gallery */
.gallery-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid .item { overflow: hidden; border-radius: 0.5rem; aspect-ratio: 1/1; }
.gallery-grid .item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-grid .item:hover img { transform: scale(1.05); }
/* Contact grid (info + form) */
.contact-grid {
display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }
.contact-info h3 { font-family: var(--font-serif); font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.contact-info address { font-style: normal; color: hsl(var(--muted-foreground)); }
.contact-info ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
/* Google Map */
.map-wrap {
aspect-ratio: 16 / 9; border-radius: 0.75rem; overflow: hidden;
box-shadow: var(--shadow-elevated); background: hsl(var(--muted));
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }
/* Kosten / price examples */
.price-list { display: grid; gap: 1rem; max-width: 48rem; margin: 0 auto; }
.price-row {
display: grid; grid-template-columns: 1fr auto;
padding: 1rem 1.25rem;
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.5rem;
}
.price-row h4 { margin: 0; font-size: 1rem; }
.price-row .price { font-family: var(--font-serif); color: hsl(var(--primary)); font-weight: 600; }
/* Aktuelles / Blog grid */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
background: hsl(var(--card)); border-radius: 0.75rem; overflow: hidden;
border: 1px solid hsl(var(--border) / 0.5);
box-shadow: var(--shadow-card); transition: box-shadow .3s, transform .3s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.post-card__img { aspect-ratio: 16/9; background: hsl(var(--muted)); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.25rem; }
.post-card__meta { color: hsl(var(--primary)); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.post-card__body h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.post-card__body p { font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin: 0 0 .75rem; }
/* Reviews / Testimonials */
.review-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
background: hsl(var(--card)); padding: 1.5rem; border-radius: 0.75rem;
border: 1px solid hsl(var(--border) / 0.5);
}
.review-stars { color: hsl(45 90% 55%); font-size: 1.1rem; margin-bottom: 0.75rem; }
.review-card p { color: hsl(var(--muted-foreground)); font-style: italic; }
.review-card .author { margin-top: 1rem; font-weight: 500; color: hsl(var(--foreground)); }
/* Section background variants */
.bg-muted { background: hsl(var(--muted) / 0.3); }
.bg-secondary{ background: hsl(var(--secondary) / 0.5); }
.bg-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bg-card { background: hsl(var(--card)); }
/* Animations on scroll (kept simple; JS toggles .is-visible) */
.animate-on-scroll { transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.animate-on-scroll.is-visible { opacity: 1; transform: none; gap: 2rem; }
/* Utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.hidden { display: none; }
@media (min-width: 1024px) { .lg-flex { display: flex; } }
/* Icon (image field) presentation */
.acf-icon {
display: inline-flex; align-items: center; justify-content: center;
}
.acf-icon img { width: 100%; height: 100%; object-fit: contain; }
/* Gravity Forms softened */
.gform_wrapper form { display: grid; gap: 1rem; }
.gform_wrapper .gfield label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9rem; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
width: 100%; padding: 0.75rem 1rem;
border: 1px solid hsl(var(--input)); background: hsl(var(--background));
border-radius: 0.5rem; font: inherit; color: inherit;
}
.gform_wrapper textarea { min-height: 140px; }
.gform_wrapper .gform_button {
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
padding: 0.75rem 1.75rem; border-radius: 0.5rem; font-weight: 500;
transition: filter .3s;
}
.gform_wrapper .gform_button:hover { filter: brightness(1.1); }
/* Checklist grid (for multi-column checklist) */
.checklist-grid { display: grid; gap: 1rem; max-width: 72rem; margin: 0 auto; }
.checklist-grid.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .checklist-grid.grid-3 { grid-template-columns: repeat(3, 1fr); } }
.checklist-grid.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .checklist-grid.grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .checklist-grid.grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Big numbered style (for Vorsorge-style 01/02/03/04) */
.checklist-grid .checklist-item {
flex-direction: column; gap: 0.5rem; align-items: flex-start;
}
.checklist-grid .checklist-item__num {
width: auto; height: auto; background: transparent;
color: hsl(var(--primary) / 0.15); font-family: var(--font-serif);
font-size: 3rem; line-height: 1;
}
/* =====================================================================
FIX PASS: WP nav menu sub-menus, sticky actions, back-to-top, footer
===================================================================== */
/* ---------- WordPress wp_nav_menu output (desktop) ---------- */
.primary-nav > ul,
.primary-nav .menu {
display: flex; gap: 0.25rem; align-items: center;
list-style: none; margin: 0; padding: 0;
}
.primary-nav > ul > li {
position: relative;
}
.primary-nav > ul > li > a {
padding: 0.5rem 1rem; border-radius: 0.5rem;
font-size: 0.875rem; font-weight: 500;
color: hsl(var(--foreground) / 0.8); transition: all .2s;
display: inline-flex; align-items: center; gap: 0.25rem;
text-decoration: none;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-parent > a,
.primary-nav > ul > li.current-menu-ancestor > a {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
/* Caret on parents */
.primary-nav > ul > li.menu-item-has-children > a::after {
content: "▾"; font-size: 0.75rem; margin-left: 0.25rem;
color: hsl(var(--muted-foreground));
}
/* Sub-menu: hide by default, show on hover/focus */
.primary-nav .sub-menu {
position: absolute; top: 100%; left: 0;
margin: 4px 0 0; padding: 0.5rem;
min-width: 16rem;
background: hsl(var(--card));
border-radius: 0.75rem;
box-shadow: var(--shadow-elevated);
border: 1px solid hsl(var(--border) / 0.5);
list-style: none;
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s, transform .2s;
z-index: 60;
display: block !important; /* override default UA */
}
.primary-nav > ul > li:hover > .sub-menu,
.primary-nav > ul > li:focus-within > .sub-menu {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.primary-nav .sub-menu li { margin: 0; }
.primary-nav .sub-menu a {
display: block; padding: 0.625rem 0.875rem;
border-radius: 0.5rem; font-size: 0.875rem;
color: hsl(var(--foreground)); text-decoration: none;
transition: background .2s, color .2s;
}
.primary-nav .sub-menu a:hover {
background: hsl(var(--primary) / 0.08);
color: hsl(var(--primary));
}
/* ---------- Mobile nav (wp_nav_menu inside .mobile-nav) ---------- */
.mobile-nav > ul,
.mobile-nav .menu {
list-style: none; margin: 0; padding: 0;
}
.mobile-nav .sub-menu {
list-style: none; margin: 0; padding: 0 0 0 1rem;
}
.mobile-nav > ul > li > a {
display: block; padding: 0.625rem 1rem; border-radius: 0.5rem;
color: hsl(var(--foreground) / 0.85); font-weight: 500;
text-decoration: none;
}
.mobile-nav > ul > li > a:hover {
background: hsl(var(--primary) / 0.06); color: hsl(var(--primary));
}
/* ---------- Footer: nav menus need list-reset ---------- */
.footer-col ul,
.footer-col .menu {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 0.5rem;
}
.footer-col .menu a {
color: hsl(var(--muted-foreground)); font-size: 0.875rem;
text-decoration: none; transition: color .2s;
}
.footer-col .menu a:hover { color: hsl(var(--primary)); }
/* Footer partner logo — constrain size */
.footer-partner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.footer-partner img,
.footer-bar img { max-height: 4rem; width: auto; max-width: 10rem; object-fit: contain; }
/* Footer bar refinement */
.footer-bar {
border-top: 1px solid hsl(var(--border) / 0.5);
margin-top: 3rem; padding-top: 1.5rem;
display: flex; flex-direction: column; gap: 1rem;
align-items: center; text-align: center;
font-size: 0.875rem; color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) {
.footer-bar {
flex-direction: row; justify-content: space-between; text-align: left;
}
}
.footer-bar p { margin: 0; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-legal a {
color: hsl(var(--muted-foreground)); text-decoration: none;
font-size: 0.875rem; transition: color .2s;
}
.footer-legal a:hover { color: hsl(var(--primary)); }
/* ---------- Sticky right-edge action buttons (desktop) ---------- */
.side-actions {
position: fixed; right: 1rem; top: 50%;
transform: translateY(-50%);
display: none; flex-direction: column; gap: 0.625rem;
z-index: 40;
}
@media (min-width: 1024px) { .side-actions { display: flex; } }
.side-action {
width: 3rem; height: 3rem; border-radius: 50%;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-elevated);
text-decoration: none;
transition: transform .2s, background .2s;
}
.side-action:hover { transform: scale(1.08); background: hsl(var(--primary) / 0.9); }
.side-action svg { width: 1.25rem; height: 1.25rem; }
/* ---------- Back-to-top button ---------- */
.back-to-top {
position: fixed; bottom: 1.5rem; right: 1.5rem;
width: 3rem; height: 3rem; border-radius: 50%;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-elevated);
border: none; cursor: pointer;
opacity: 0; pointer-events: none; transform: translateY(8px);
transition: opacity .25s, transform .25s, background .2s;
z-index: 41;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: hsl(var(--primary) / 0.9); }
.back-to-top svg { width: 1.25rem; height: 1.25rem; }
/* keep mobile sticky emergency bar above back-to-top spacing */
@media (max-width: 1023px) {
.back-to-top { bottom: 5rem; }
}
/* =====================================================================
FIX PASS: WP nav menu sub-menus, sticky actions, back-to-top, footer,
locations-strip layout
===================================================================== */
/* ---------- Primary nav (wp_nav_menu output) ---------- */
.primary-nav > ul,
.primary-nav .menu {
display: flex; gap: 0.25rem; align-items: center;
list-style: none; margin: 0; padding: 0;
}
.primary-nav > ul > li { position: relative; }
.primary-nav > ul > li > a {
padding: 0.5rem 1rem; border-radius: 0.5rem;
font-size: 0.875rem; font-weight: 500;
color: hsl(var(--foreground) / 0.8); transition: all .2s;
display: inline-flex; align-items: center; gap: 0.25rem;
text-decoration: none; white-space: nowrap;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-parent > a,
.primary-nav > ul > li.current-menu-ancestor > a {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.primary-nav > ul > li.menu-item-has-children > a::after {
content: "▾"; font-size: 0.75rem; margin-left: 0.25rem;
color: hsl(var(--muted-foreground));
}
.primary-nav .sub-menu {
position: absolute; top: 100%; left: 0;
margin: 4px 0 0; padding: 0.5rem;
min-width: 16rem;
background: hsl(var(--card));
border-radius: 0.75rem;
box-shadow: var(--shadow-elevated);
border: 1px solid hsl(var(--border) / 0.5);
list-style: none;
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s, transform .2s;
z-index: 60;
}
.primary-nav > ul > li:hover > .sub-menu,
.primary-nav > ul > li:focus-within > .sub-menu {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.primary-nav .sub-menu li { margin: 0; list-style: none; }
.primary-nav .sub-menu a {
display: block; padding: 0.625rem 0.875rem;
border-radius: 0.5rem; font-size: 0.875rem;
color: hsl(var(--foreground)); text-decoration: none;
transition: background .2s, color .2s; white-space: nowrap;
}
.primary-nav .sub-menu a:hover {
background: hsl(var(--primary) / 0.08);
color: hsl(var(--primary));
}
/* ---------- Mobile nav (wp_nav_menu inside .mobile-nav) ---------- */
.mobile-nav > ul,
.mobile-nav .menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav .sub-menu {
list-style: none; margin: 0; padding: 0 0 0 1rem;
}
.mobile-nav li { margin: 0; }
.mobile-nav a {
display: block; padding: 0.625rem 1rem; border-radius: 0.5rem;
color: hsl(var(--foreground) / 0.85); font-weight: 500;
text-decoration: none;
}
.mobile-nav a:hover { background: hsl(var(--primary) / 0.06); color: hsl(var(--primary)); }
/* ---------- Footer fixes ---------- */
.footer-col ul,
.footer-col .menu {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 0.5rem;
}
.footer-col .menu a {
color: hsl(var(--muted-foreground)); font-size: 0.875rem;
text-decoration: none; transition: color .2s;
}
.footer-col .menu a:hover { color: hsl(var(--primary)); }
.footer-partner a { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.footer-partner:hover { opacity: .8; }
.footer-partner img,
.footer-bar img { max-height: 3rem; width: auto; max-width: 12rem; object-fit: contain; mix-blend-mode: multiply;}
.footer-bar {
border-top: 1px solid hsl(var(--border) / 0.5);
margin-top: 3rem; padding-top: 1.5rem;
display: flex; flex-direction: column; gap: 1rem;
align-items: center; text-align: center;
font-size: 0.875rem; color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) {
.footer-bar { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-bar p { margin: 0; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-legal a {
color: hsl(var(--muted-foreground)); text-decoration: none;
font-size: 0.875rem; transition: color .2s;
}
.footer-legal a:hover { color: hsl(var(--primary)); }
/* ---------- Sticky right-edge action buttons (desktop) ---------- */
.side-actions {
position: fixed; right: 1rem; top: 50%;
transform: translateY(-50%);
display: none; flex-direction: column; gap: 0.625rem;
z-index: 40;
}
@media (min-width: 1024px) { .side-actions { display: flex; } }
.side-action {
width: 3rem; height: 3rem; border-radius: 50%;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-elevated);
text-decoration: none;
transition: transform .2s, background .2s;
}
.side-action:hover { transform: scale(1.08); background: hsl(var(--primary) / 0.92); color: hsl(var(--primary-foreground)); }
.side-action svg { width: 1.25rem; height: 1.25rem; }
/* ---------- Back-to-top ---------- */
.back-to-top {
position: fixed; bottom: 1.5rem; right: 1.5rem;
width: 3rem; height: 3rem; border-radius: 50%;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-elevated); border: none; cursor: pointer;
opacity: 0; pointer-events: none; transform: translateY(8px);
transition: opacity .25s, transform .25s, background .2s;
z-index: 41;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: hsl(var(--primary) / 0.92); }
.back-to-top svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 1023px) { .back-to-top { bottom: 5rem; } }
/* ---------- Locations Strip layout ---------- */
.locations-strip {
display: grid; gap: 1.5rem;
grid-template-columns: 1fr;
margin-top: 1rem;
}
@media (min-width: 768px) { .locations-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .locations-strip { grid-template-columns: repeat(3, 1fr); } }
.loc-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem;
overflow: hidden;
display: flex; flex-direction: column;
transition: box-shadow .25s, transform .25s;
}
.loc-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.loc-card__media {
aspect-ratio: 16 / 9;
background: hsl(var(--muted));
overflow: hidden;
}
.loc-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .35s;
}
.loc-card:hover .loc-card__media img { transform: scale(1.05); }
.loc-card__body { padding: 1.25rem 1.25rem 1.5rem; display: grid; gap: 0.5rem; }
.loc-card__title {
font-family: var(--font-serif);
font-size: 1.25rem; margin: 0 0 0.25rem;
color: hsl(var(--foreground));
}
.loc-card__title a { color: inherit; text-decoration: none; transition: color .2s; }
.loc-card__addr,
.loc-card__phone {
display: flex; gap: 0.5rem; align-items: flex-start;
margin: 0; font-size: 0.875rem;
color: hsl(var(--muted-foreground));
}
.loc-card__phone a {
color: hsl(var(--primary)); text-decoration: none; font-weight: 500;
}
.loc-card__phone a:hover { text-decoration: underline; }
.loc-card__addr svg,
.loc-card__phone svg { color: hsl(var(--primary)); flex-shrink: 0; margin-top: 2px; }
.loc-card__hours {
margin: 0.25rem 0 0; font-size: 0.8rem;
color: hsl(var(--muted-foreground)); /*font-style: italic; */
}
/* =====================================================================
FIX PASS 2: hb_image_text — icon-square, chip eyebrow, checkmark list,
tag chips
===================================================================== */
.hb-image-text .intro-2col {
display: grid; gap: 3rem;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 1024px) {
.hb-image-text .intro-2col { grid-template-columns: 1fr 1fr; gap: 4rem; }
.hb-image-text .intro-2col.reverse .intro-2col__media { order: 2; }
.hb-image-text .intro-2col.reverse .intro-2col__body { order: 1; }
}
.hb-image-text__image {
aspect-ratio: 4 / 3;
border-radius: 1rem;
overflow: hidden;
background: hsl(var(--muted));
position: relative;
}
.hb-image-text__image img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.hb-image-text__head {
display: flex; align-items: center; gap: 0.85rem;
margin-bottom: 1.25rem;
}
.hb-image-text__icon {
flex-shrink: 0;
width: 3rem; height: 3rem;
border-radius: 0.625rem;
background: hsl(var(--primary) / 0.1);
display: inline-flex; align-items: center; justify-content: center;
color: hsl(var(--primary));
}
.hb-image-text__icon img,
.hb-image-text__icon svg {
width: 1.5rem; height: 1.5rem; object-fit: contain;
}
.hb-image-text__head-text { display: grid; gap: 0.15rem; }
p.hb-image-text__eyebrow {
margin: 0;
font-size: 16px;
font-weight: 500;
color: hsl(var(--primary));
letter-spacing: 0;
text-transform: none;
line-height: 20px;
margin-bottom: 1rem;
}
.hb-image-text__head-text h2.hb-image-text__title {
margin-bottom: 0px;
}
.hb-image-text__title {
margin: 0;
font-family: var(--font-serif);
font-size: 30px;
line-height: 36px;
}
.hb-image-text__head .hb-image-text__head-text {
gap: 0px;
}
.hb-image-text__body {
color: hsl(var(--foreground) / 0.8);
margin: 0 0 1.5rem;
max-width: none;
}
.hb-image-text__body p { margin: 0 0 1.25rem; line-height: 1.7; }
.hb-image-text__body p:last-child { margin-bottom: 0; }
/* Checkmark bullets */
.hb-image-text__body ul {
list-style: none;
padding: 0; margin: 1.25rem 0;
display: grid; gap: 0.625rem;
}
.hb-image-text__body ul li {
position: relative;
padding-left: 2rem;
line-height: 1.5;
color: hsl(var(--foreground) / 0.85);
}
.hb-image-text__body ul li::before {
content: "";
position: absolute;
left: 0; top: 0.15rem;
width: 1.25rem; height: 1.25rem;
border-radius: 50%;
background: hsl(var(--primary));
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: 70%; mask-size: 70%;
}
/* Feature tag chips */
.hb-image-text__tags {
display: flex; flex-wrap: wrap; gap: 0.625rem;
margin: 1.5rem 0 0;
}
.hb-image-text__tag {
display: inline-flex; align-items: center;
padding: 0.5rem 1rem;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
border-radius: 9999px;
font-size: 0.8125rem; font-weight: 500;
white-space: nowrap;
}
.hb-image-text__btn { margin-top: 1.75rem; }
/* =====================================================================
FIX PASS 3: Nav dropdown icon-items, correct side-actions, mobile sub
===================================================================== */
/* ---------- Nav chevron ---------- */
.nav-chevron {
width: 1rem; height: 1rem;
transition: transform .2s;
flex-shrink: 0;
}
.nav-dropdown.is-open > button .nav-chevron,
.nav-dropdown:hover > button .nav-chevron { transform: rotate(180deg); }
/* ---------- Dropdown panel reset ---------- */
.nav-dropdown-panel {
position: absolute; top: 100%; left: 0;
margin: 0px 0 0; padding: 0.5rem;
width: 18rem;
background: hsl(var(--card));
border-radius: 0.75rem;
box-shadow: 0 10px 40px hsl(0 0% 0% / 0.12), 0 2px 8px hsl(0 0% 0% / 0.06);
border: 1px solid hsl(var(--border) / 0.5);
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s, transform .2s;
z-index: 60;
}
.nav-dropdown-panel--wide { width: 22rem; }
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
/* ---------- "Alle ... im Überblick" header row ---------- */
.nav-dropdown-all {
display: block;
padding: 0.625rem 0.875rem;
font-size: 0.875rem; font-weight: 500;
color: hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--border) / 0.5);
margin-bottom: 0.375rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background .2s, color .2s;
}
.nav-dropdown-all:hover { background: hsl(var(--primary) / 0.06); color: hsl(var(--primary)); }
/* ---------- Dropdown item with icon + two-line text ---------- */
.nav-dropdown-item {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.625rem 0.875rem; border-radius: 0.5rem;
text-decoration: none; color: hsl(var(--foreground));
transition: background .2s, color .2s;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.is-active {
background: hsl(var(--primary) / 0.06);
color: hsl(var(--primary));
}
.nav-dropdown-icon {
width: 2rem; height: 2rem; flex-shrink: 0; margin-top: 0.125rem;
border-radius: 0.5rem;
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
display: inline-flex; align-items: center; justify-content: center;
}
.nav-dropdown-icon svg { width: 1rem; height: 1rem; }
.nav-dropdown-item:hover .nav-dropdown-icon,
.nav-dropdown-item.is-active .nav-dropdown-icon {
background: hsl(var(--primary) / 0.15);
}
.nav-dropdown-text { display: grid; gap: 0.1rem; }
.nav-dropdown-name { font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.nav-dropdown-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.3; }
.nav-dropdown-item:hover .nav-dropdown-sub,
.nav-dropdown-item.is-active .nav-dropdown-sub { color: hsl(var(--primary) / 0.75); }
/* ---------- Mobile sub-menu ---------- */
.mobile-has-sub > .mobile-sub-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; border-radius: 0.5rem;
font-weight: 500; font-size: 0.9375rem;
background: none; border: none; cursor: pointer;
color: hsl(var(--foreground) / 0.85);
transition: background .15s, color .15s;
}
.mobile-has-sub > .mobile-sub-toggle:hover { background: hsl(var(--primary) / 0.06); color: hsl(var(--primary)); }
.mobile-has-sub > .mobile-sub-toggle .nav-chevron { transition: transform .2s; }
.mobile-has-sub.is-open > .mobile-sub-toggle .nav-chevron { transform: rotate(180deg); }
.mobile-sub {
display: none; list-style: none; padding: 0 0 0.5rem 1rem; margin: 0;
}
.mobile-has-sub.is-open > .mobile-sub { display: block; }
.mobile-sub li a {
display: block; padding: 0.5rem 1rem; border-radius: 0.5rem;
font-size: 0.875rem; color: hsl(var(--foreground) / 0.75);
text-decoration: none; transition: background .15s, color .15s;
}
.mobile-sub li a:hover { background: hsl(var(--primary) / 0.06); color: hsl(var(--primary)); }
/* ---------- Sticky side actions (CORRECT design from source) ---------- */
/* Remove old .side-actions entirely, replace with new */
.side-actions { display: none !important; } /* kill old circular design */
.sticky-actions {
position: fixed; right: 0; top: 50%;
transform: translateY(-50%);
display: none; flex-direction: column; gap: 0.5rem;
z-index: 40; align-items: flex-end;
}
@media (min-width: 1024px) { .sticky-actions { display: flex; } }
/* Phone pills (purple, expand on hover) */
.sticky-phone {
display: flex; align-items: center;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
border-radius: 0.75rem 0 0 0.75rem;
box-shadow: 0 4px 16px hsl(var(--primary) / 0.35);
overflow: hidden; text-decoration: none;
width: 3.5rem; height: 3.5rem;
transition: width .3s ease-out;
white-space: nowrap;
}
.sticky-phone:hover { width: 16rem; color: hsl(var(--primary-foreground)); }
.sticky-phone__icon {
width: 3.5rem; height: 3.5rem; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.sticky-phone__icon svg { width: 1.375rem; height: 1.375rem; }
.sticky-phone__text {
padding-right: 1rem; overflow: hidden;
opacity: 0; transition: opacity .25s .05s;
}
.sticky-phone:hover .sticky-phone__text { opacity: 1; }
.sticky-phone__text strong { display: block; font-size: 0.8125rem; font-weight: 600; }
.sticky-phone__text span { display: block; font-size: 0.75rem; opacity: 0.8; }
/* Card pills (white/card bg, expand on hover) */
.sticky-card {
display: flex; align-items: center;
background: hsl(var(--card)); color: hsl(var(--foreground));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 0.75rem 0 0 0.75rem;
box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
overflow: hidden; text-decoration: none;
width: 3.5rem; height: 3.5rem;
transition: width .3s ease-out, background .2s, color .2s;
white-space: nowrap;
}
.sticky-card:hover { width: 14rem; background: hsl(var(--primary) / 0.05); color: hsl(var(--primary)); }
.sticky-card__icon {
width: 3.5rem; height: 3.5rem; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: hsl(var(--foreground));
}
.sticky-card:hover .sticky-card__icon { color: hsl(var(--primary)); }
.sticky-card__icon svg { width: 1.375rem; height: 1.375rem; }
.sticky-card__label {
padding-right: 1rem; font-size: 0.875rem; font-weight: 500;
overflow: hidden;
opacity: 0; transition: opacity .25s .05s;
}
.sticky-card:hover .sticky-card__label { opacity: 1; }
/* ---------- "Weitere Bestattungsarten" card (card-serene style) ---------- */
.centered-icon-card {
max-width: 48rem; margin: 0 auto;
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1.25rem;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 2px 12px hsl(0 0% 0% / 0.05);
}
.centered-icon-card__icon {
width: 2.5rem; height: 2.5rem;
color: hsl(var(--primary));
margin: 0 auto 1rem;
}
.centered-icon-card__icon svg { width: 100%; height: 100%; }
.centered-icon-card h3 {
font-family: var(--font-serif);
font-size: 24px; margin: 0 0 0.75rem;
}
.centered-icon-card p {
color: hsl(var(--muted-foreground)); line-height: 1.7;
max-width: 36rem; margin: 0 auto;
}
/* =====================================================================
GALLERY — hover zoom icon + lightbox modal
Matches Lovable ImageGallery.tsx
===================================================================== */
/* ---------- Grid ---------- */
.gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
/* ---------- Individual gallery item (button) ---------- */
.gallery-item {
position: relative; overflow: hidden;
border-radius: 0.75rem;
display: block; padding: 0; border: none; background: none;
cursor: pointer;
}
.gallery-item:focus-visible {
outline: 2px solid hsl(var(--primary));
outline-offset: 2px;
}
.gallery-item__media {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.gallery-item__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-item__media img { transform: scale(1.1); }
/* Dark overlay on hover */
.gallery-item__overlay {
position: absolute; inset: 0;
background: hsl(0 0% 0% / 0);
transition: background 0.3s ease;
pointer-events: none;
}
.gallery-item:hover .gallery-item__overlay { background: hsl(0 0% 0% / 0.2); }
/* Zoom icon — white circle, centred, fades in on hover */
.gallery-item__zoom {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease;
pointer-events: none;
}
.gallery-item:hover .gallery-item__zoom { opacity: 1; }
.gallery-item__zoom svg {
width: 3rem; height: 3rem;
background: hsl(0 0% 100% / 0.92);
border-radius: 50%;
padding: 0.625rem;
color: hsl(var(--foreground));
box-shadow: 0 2px 12px hsl(0 0% 0% / 0.15);
}
/* ---------- Lightbox overlay ---------- */
.gallery-lightbox {
position: fixed; inset: 0; z-index: 200;
background: hsl(0 0% 5% / 0.96);
display: flex; align-items: center; justify-content: center;
}
.gallery-lightbox[hidden] { display: none; }
/* Fade-in animation when opened */
.gallery-lightbox.is-open {
animation: lb-fadein 0.2s ease forwards;
}
@keyframes lb-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* ---------- Lightbox image ---------- */
.gallery-lightbox__img-wrap {
display: flex; align-items: center; justify-content: center;
max-height: 85vh; max-width: 90vw;
}
.gallery-lightbox__img {
max-height: 85vh; max-width: 90vw;
object-fit: contain;
border-radius: 0.5rem;
display: block;
animation: lb-imgfade 0.2s ease forwards;
}
@keyframes lb-imgfade {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
/* ---------- Lightbox controls (shared) ---------- */
.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next {
position: absolute;
width: 3rem; height: 3rem;
border-radius: 50%;
background: hsl(0 0% 100% / 0.1);
border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: hsl(0 0% 100%);
transition: background 0.2s;
z-index: 10;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover { background: hsl(0 0% 100% / 0.2); }
.gallery-lightbox__close svg,
.gallery-lightbox__prev svg,
.gallery-lightbox__next svg { width: 1.5rem; height: 1.5rem; }
.gallery-lightbox__close { top: 1rem; right: 1rem; }
.gallery-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
/* ---------- Counter ---------- */
.gallery-lightbox__counter {
position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
color: hsl(0 0% 100% / 0.65);
font-size: 0.875rem; font-weight: 500;
letter-spacing: 0.05em;
}
/* =====================================================================
hb_story_milestones + hb_region_tags
===================================================================== */
/* Story + Milestones 2-col */
.story-milestones {
display: grid; gap: 3rem;
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 1024px) {
.story-milestones { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}
.story-eyebrow {
font-size: 16px; font-weight: 500;
color: hsl(var(--primary)); margin: 0 0 0.5rem;
}
.story-heading {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
margin: 0 0 1.5rem; line-height: 1.2;
}
.story-body { color: hsl(var(--muted-foreground)); line-height: 1.75; }
.story-body p { margin: 0 0 1rem; }
.story-body p:last-child { margin-bottom: 0; }
/* Milestones card */
.story-milestones__card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 2px 12px hsl(0 0% 0% / 0.05);
}
.story-milestones__card-title {
font-family: var(--font-serif);
font-size: 1.25rem; text-align: center;
margin: 0 0 1.5rem; color: hsl(var(--foreground));
}
.milestones-list { display: grid; gap: 0; }
.milestone-row {
display: flex; gap: 1.25rem; align-items: flex-start;
padding: 0.875rem 0;
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.milestone-row:last-child { border-bottom: none; padding-bottom: 0; }
.milestone-year {
width: 4.5rem; flex-shrink: 0;
font-family: var(--font-serif); font-weight: 500;
color: hsl(var(--primary)); font-size: 0.9375rem;
}
.milestone-event {
font-size: 0.9375rem; color: hsl(var(--foreground)); line-height: 1.45;
}
/* Region tags */
.region-tags {
display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center;
}
.region-tag {
display: inline-flex; align-items: center;
padding: 0.5rem 1.125rem;
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 9999px;
font-size: 0.875rem; color: hsl(var(--foreground));
}
/* =====================================================================
Team card — matches Lovable Team.tsx exactly
===================================================================== */
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3,1fr); } }
/* Card wrapper */
.team-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 1px 4px hsl(0 0% 0% / 0.06);
transition: box-shadow .25s, transform .25s;
}
.team-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
/* Image area — fixed height with overflow hidden for scale effect */
.team-card__media {
position: relative;
height: 16rem; /* 256px — same as Lovable h-64 */
overflow: hidden;
}
.team-card__img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
transition: transform .5s ease;
}
.team-card:hover .team-card__img { transform: scale(1.05); }
/* Placeholder when no image */
.team-card__img-placeholder {
width: 100%; height: 100%;
background: hsl(var(--muted));
display: flex; align-items: center; justify-content: center;
}
.team-card__img-placeholder svg {
width: 4rem; height: 4rem;
color: hsl(var(--muted-foreground));
}
/* Gradient overlay on image */
.team-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, hsl(var(--foreground) / 0.6) 0%, transparent 55%);
pointer-events: none;
}
/* Name + role ON the image at bottom */
.team-card__identity {
position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
color: #fff;
}
.team-card__name {
font-family: var(--font-serif);
font-size: 1.25rem; line-height: 1.2;
margin: 0 0 0.2rem;
color: #fff;
text-shadow: 0 1px 4px hsl(0 0% 0% / 0.4);
}
.team-card__role {
font-size: 0.8125rem;
color: rgba(255,255,255,0.88);
margin: 0;
}
/* Card body */
.team-card__body { padding: 1.25rem 1.25rem 1.5rem; }
.team-card__bio {
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
line-height: 1.65;
margin: 0 0 1rem;
}
/* Expertise chips */
.team-card__tags {
display: flex; flex-wrap: wrap; gap: 0.375rem;
margin-bottom: 1rem;
}
.team-tag {
display: inline-flex; align-items: center;
padding: 0.2rem 0.625rem;
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
font-size: 0.7rem; font-weight: 500;
border-radius: 9999px;
white-space: nowrap;
}
/* Contact section */
.team-card__contact {
padding-top: 0.875rem;
border-top: 1px solid hsl(var(--border) / 0.5);
display: grid; gap: 0.5rem;
}
.team-contact-row {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color .15s;
min-width: 0;
}
.team-contact-row:hover { color: hsl(var(--primary)); }
.team-contact-icon {
width: 1rem; height: 1rem;
flex-shrink: 0;
color: inherit;
}
.team-contact-email {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* =====================================================================
Page-hero icon (frosted-glass circle above eyebrow — Team page)
===================================================================== */
.page-hero__icon {
width: 4rem; height: 4rem;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3);
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.page-hero__icon svg { width: 2rem; height: 2rem; }
.page-hero__icon img { width: 2rem; height: 2rem; object-fit: contain; filter: brightness(0) invert(1); }
/* =====================================================================
Aktuelles / Blog page — page-aktuelles.php
===================================================================== */
/* Category filter bar */
.cat-filter-bar {
padding: 1.5rem 0;
border-bottom: 1px solid hsl(var(--border) / 0.5);
position: sticky; top: 0; /* optional: remove if you don't want sticky filter */
background: hsl(var(--background) / 0.95);
backdrop-filter: blur(8px);
z-index: 30;
}
.cat-filter-tabs {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.cat-tab {
padding: 0.5rem 1.125rem;
border-radius: 9999px;
font-size: 0.875rem; font-weight: 500;
border: none; cursor: pointer;
background: hsl(var(--muted));
color: hsl(var(--foreground));
transition: background .15s, color .15s;
}
.cat-tab:hover { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.cat-tab.is-active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* Blog grid */
.blog-grid {
display: grid; gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3,1fr); } }
/* Blog card */
.blog-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem; overflow: hidden;
box-shadow: 0 1px 4px hsl(0 0% 0% / 0.06);
display: flex; flex-direction: column;
transition: box-shadow .25s;
}
.blog-card:hover { box-shadow: 0 8px 30px hsl(0 0% 0% / 0.1); }
.blog-card__media {
display: block; position: relative;
height: 12rem; overflow: hidden;
text-decoration: none;
}
.blog-card__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__img-placeholder {
width: 100%; height: 100%;
background: hsl(var(--muted));
}
/* Category chip on image */
.blog-card__cat {
position: absolute; top: 1rem; left: 1rem;
padding: 0.25rem 0.75rem;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(4px);
border-radius: 9999px;
font-size: 0.75rem; font-weight: 500;
color: hsl(var(--primary));
white-space: nowrap;
}
/* Card body */
.blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
/* Meta: date + read time with icons */
.blog-card__meta {
display: flex; align-items: center; gap: 1rem;
font-size: 0.8125rem; color: hsl(var(--muted-foreground));
margin-bottom: 0.75rem; flex-wrap: wrap;
}
.blog-card__meta-item {
display: inline-flex; align-items: center; gap: 0.3rem;
}
.post-meta-icon {
width: 0.875rem; height: 0.875rem; flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
/* Title */
.blog-card__title {
font-family: var(--font-serif);
font-size: 1.125rem; line-height: 1.35;
margin: 0 0 0.625rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__title a {
color: hsl(var(--foreground)); text-decoration: none;
transition: color .15s; font-size: 20px;
}
.blog-card:hover .blog-card__title a { color: hsl(var(--primary)); }
/* Excerpt */
.blog-card__excerpt {
font-size: 0.875rem; color: hsl(var(--muted-foreground));
line-height: 1.6; margin: 0 0 1rem;
flex: 1;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Weiterlesen link */
.blog-weiterlesen {
display: inline-flex; align-items: center; gap: 0.375rem;
font-size: 0.875rem; font-weight: 500;
color: hsl(var(--primary)); text-decoration: none;
margin-top: auto;
transition: gap .2s;
}
.blog-weiterlesen:hover { gap: 0.625rem; }
.weiterlesen-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Load more */
.load-more-wrap {
text-align: center; margin-top: 3rem;
}
.load-more-spinner { display: inline-flex; align-items: center; justify-content: center; }
.spin { animation: spin-kf 0.8s linear infinite; }
@keyframes spin-kf { to { transform: rotate(360deg); } }
/* Newsletter form (inline fallback) */
.newsletter-form {
display: flex; gap: 0.5rem; flex-direction: column; max-width: 28rem; margin: 0 auto;
}
@media (min-width: 480px) { .newsletter-form { flex-direction: row; } }
.newsletter-input {
flex: 1; padding: 0.75rem 1rem;
border: 1px solid hsl(var(--input));
border-radius: 0.5rem; font: inherit;
background: hsl(var(--background));
transition: border-color .2s;
}
.newsletter-input:focus { outline: none; border-color: hsl(var(--primary)); }
/* =====================================================================
Gedenkportal fixes: memorial cards, reviews, checklist solid, CTA icon,
locations strip image overlay
===================================================================== */
/* --- hb_memorial_cards -------------------------------------------- */
.memorial-grid {
display: grid; gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .memorial-grid { grid-template-columns: repeat(3,1fr); } }
.memorial-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem; overflow: hidden;
transition: box-shadow .25s, transform .25s;
}
.memorial-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.memorial-card__media {
position: relative; height: 12rem; overflow: hidden;
}
.memorial-card__img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease;
}
.memorial-card:hover .memorial-card__img { transform: scale(1.05); }
.memorial-card__img-placeholder { width: 100%; height: 100%; background: hsl(var(--muted)); }
.memorial-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, hsl(var(--foreground)/0.6) 0%, transparent 50%);
}
.memorial-card__identity {
position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: #fff;
}
.memorial-card__dates {
font-size: 0.75rem; color: rgba(255,255,255,0.8); margin: 0 0 0.2rem;
}
.memorial-card__name {
font-family: var(--font-serif); font-size: 1.25rem;
color: #fff; margin: 0; text-shadow: 0 1px 4px hsl(0 0% 0%/0.4);
}
.memorial-card__body { padding: 1.25rem; }
.memorial-card__quote {
font-size: 0.875rem; color: hsl(var(--muted-foreground));
font-style: italic; line-height: 1.6;
margin: 0 0 1rem;
}
.memorial-card__stats {
display: flex; align-items: center; gap: 1.25rem;
font-size: 0.8125rem; color: hsl(var(--muted-foreground));
}
.memorial-stat {
display: inline-flex; align-items: center; gap: 0.3rem;
}
.memorial-stat-icon {
width: 1rem; height: 1rem; flex-shrink: 0;
color: hsl(var(--primary));
}
/* --- hb_reviews (rewritten) --------------------------------------- */
.review-grid {
display: grid; gap: 2rem;
grid-template-columns: 1fr;
max-width: 52rem; margin: 0 auto;
}
@media (min-width: 768px) { .review-grid { grid-template-columns: 1fr 1fr; } }
.review-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem;
padding: 2rem;
margin: 0;
display: flex; flex-direction: column; gap: 1.25rem;
}
/* Stars — filled primary */
.review-stars {
display: flex; gap: 0.2rem;
}
.review-star-wrap { display: inline-flex; }
.review-star { width: 1rem; height: 1rem; color: hsl(var(--muted) / 0.4); }
.review-star-wrap.is-filled .review-star { color: hsl(var(--primary)); }
/* Italic quote */
.review-quote {
font-size: 0.9375rem; color: hsl(var(--muted-foreground));
font-style: italic; line-height: 1.7;
margin: 0;
flex: 1;
}
/* Footer: heart circle + author + location */
.review-footer {
display: flex; align-items: center; gap: 0.75rem;
padding-top: 0;
}
.review-avatar {
width: 2.5rem; height: 2.5rem; flex-shrink: 0;
border-radius: 50%;
background: hsl(var(--primary) / 0.1);
display: inline-flex; align-items: center; justify-content: center;
color: hsl(var(--primary));
}
.review-heart-icon { width: 1.25rem; height: 1.25rem; }
.review-author {
display: block; font-weight: 600; font-style: normal;
font-size: 0.9375rem; color: hsl(var(--foreground));
}
.review-location {
margin: 0.1rem 0 0; font-style: normal;
font-size: 15px.8125rem; color: hsl(var(--muted-foreground));
}
/* --- checklist solid (Gedenkportal process steps) ----------------- */
.checklist-solid .checklist-item {
flex-direction: column; align-items: center; text-align: center; gap: 1rem;
}
.checklist-solid .checklist-item__num {
width: 3.5rem; height: 3.5rem;
border-radius: 50%;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
.checklist-solid .checklist-item h4 {
font-family: var(--font-serif); font-size: 20px; margin: 0 0 0.375rem;
}
.checklist-solid .checklist-item p {
font-size: 0.875rem; color: hsl(var(--muted-foreground));
margin: 0;
}
/* --- CTA top icon (Flower2 for Gedenkportal) ---------------------- */
.cta-top-icon {
width: 3rem; height: 3rem;
margin: 0 auto 1.5rem;
color: hsl(var(--primary));
}
.cta-top-icon svg { width: 100%; height: 100%; }
.cta-top-icon img { width: 100%; height: 100%; object-fit: contain; }
.cta-btn-row {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}
.cta-btn-secondary {
display: inline-flex; align-items: center; gap: 0.5rem;
}
/* --- Locations strip: image with name overlay --------------------- */
.loc-card__media {
position: relative; aspect-ratio: 16/9; overflow: hidden;
border-radius: 1rem 1rem 0 0;
background: hsl(var(--muted));
}
.loc-card__img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .35s;
}
.loc-card:hover .loc-card__img { transform: scale(1.05); }
.loc-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, hsl(var(--foreground)/0.65) 0%, transparent 55%);
}
.loc-card__title-wrap {
position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
}
.loc-card__title {
font-family: var(--font-serif); font-size: 1.125rem; margin: 0;
color: #fff; text-shadow: 0 1px 4px hsl(0 0% 0%/0.4);
}
.loc-card__title a { color: inherit; text-decoration: none; }
/* Override old .loc-card border-radius now that image is inside */
.loc-card { border-radius: 1rem; overflow: hidden; border: 1px solid hsl(var(--border)/0.5); }
.loc-card__body { padding: 1rem 1.25rem 1.5rem; display: grid; gap: 0.5rem; }
article.loc-card .loc-card__phone a {color: hsl(var(--muted-foreground));}
article.loc-card .loc-card__phone a:hover {color: hsl(var(--primary)); text-decoration: none;}
.loc-card__addr,
.loc-card__phone,
.loc-card__hours {
display: flex; align-items: flex-start; gap: 0.5rem;
margin: 0; font-size: 0.875rem; color: hsl(var(--muted-foreground));
}
.loc-card__phone a { color: hsl(var(--primary)); font-weight: 500; text-decoration: none; }
.loc-card__phone a:hover { text-decoration: underline; }
.loc-icon {
width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 2px;
color: hsl(var(--primary));
}
/* =====================================================================
Kontakt page: emergency strip, contact cards, map, impressum/datenschutz
===================================================================== */
/* --- Emergency strip ------------------------------------------------ */
.emergency-strip-section {
padding: 1.5rem 0;
background: hsl(var(--background));
border-top: 1px solid hsl(var(--destructive) / 0.2);
border-bottom: 1px solid hsl(var(--destructive) / 0.2);
}
.emergency-strip-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: center;
}
@media (min-width: 768px) {
.emergency-strip-inner {
flex-direction: row;
justify-content: space-between;
}
}
.emergency-strip-left {
display: flex; align-items: center; gap: 1rem;
}
.emergency-icon-wrap {
width: 3rem; height: 3rem; flex-shrink: 0;
border-radius: 50%;
background: hsl(var(--destructive) / 0.1);
color: hsl(var(--destructive));
display: inline-flex; align-items: center; justify-content: center;
}
.emergency-heading {
font-family: var(--font-serif);
font-size: 1.25rem; margin: 0 0 0.2rem;
color: hsl(var(--foreground));
}
.emergency-sub {
font-size: 16px; color: hsl(var(--muted-foreground)); margin: 0;
}
.emergency-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
border-radius: 0.5rem; font-weight: 600; font-size: 0.9375rem;
text-decoration: none; white-space: nowrap;
transition: background .15s;
}
.emergency-btn:hover { background: hsl(var(--primary)/0.9); color: hsl(var(--primary-foreground)); }
/* --- Contact section 2-col grid ------------------------------------ */
.contact-grid {
display: grid; gap: 3rem;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.contact-info__heading {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
margin: 0 0 2rem;
}
/* Stack of location cards */
.contact-cards-stack { display: grid; gap: 1rem; }
/* Each card */
.contact-card { padding: 1.25rem 1.5rem !important; }
.contact-card__inner {
display: flex; align-items: flex-start; gap: 1rem;
}
.contact-icon-box {
width: 3rem; height: 3rem; flex-shrink: 0;
border-radius: 0.5rem;
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
display: inline-flex; align-items: center; justify-content: center;
}
.contact-card__body { flex: 1; min-width: 0; }
.contact-card__name {
font-family: var(--font-serif);
font-size: 1.125rem; margin: 0 0 0.375rem;
}
.contact-card__address {
font-size: 0.9375rem; color: hsl(var(--muted-foreground));
line-height: 1.6; margin: 0;
}
.contact-card__line { font-size: 0.9375rem; color: hsl(var(--foreground)); margin: 0; }
.contact-card__link {
color: hsl(var(--primary)); text-decoration: none;
font-size: 0.9375rem;
}
.contact-card__link:hover { text-decoration: underline; }
.contact-card__hours {
font-size: 0.9375rem; font-weight: 500;
color: hsl(var(--primary)); margin: 0;
}
/* Contact form right column */
.contact-form-col {}
.contact-form-col .card-serene { padding: 2rem; }
.contact-disclaimer {
margin-top: 1rem; padding: 1rem;
background: hsl(var(--muted) / 0.5);
border-radius: 0.5rem;
}
.contact-disclaimer p {
font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0;
}
/* Override GF Submit button to match design */
.contact-form-col .gform_submit_button,
.contact-form-col input[type="submit"] {
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
border: none !important;
padding: 0.75rem 1.75rem !important;
border-radius: 0.5rem !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
cursor: pointer; transition: background .15s !important;
}
.contact-form-col .gform_submit_button:hover,
.contact-form-col input[type="submit"]:hover {
background: hsl(var(--primary) / 0.9) !important;
}
/* --- Map iframe ---------------------------------------------------- */
.map-iframe-wrap {
border-radius: 1rem; overflow: hidden;
box-shadow: 0 2px 12px hsl(0 0% 0% / 0.08);
border: 1px solid hsl(var(--border) / 0.5);
}
.map-iframe-wrap iframe {
width: 100%; height: 24rem;
border: none; display: block;
}
/* --- card-serene (base) — ensures it's defined properly ------------ */
.card-serene {
background: hsl(var(--card));
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 1rem;
padding: 1.5rem 2rem;
}
/* rich-text inside card: h3 styling */
.card-serene.rich-text-block h3 {
font-family: var(--font-serif);
font-size: 1.125rem; margin: 1.25rem 0 0.5rem;
}
.card-serene.rich-text-block h3:first-child { margin-top: 0; }
.card-serene.rich-text-block p {
color: hsl(var(--muted-foreground));
font-size: 0.9375rem; line-height: 1.65; margin: 0 0 0.75rem;
}
/* New css 29-04-2026 */
ul.footer-contact li.clock p {
margin-top: 4px !important;
margin-bottom: 0px;
line-height: 20px;
}
.pt-2 {
padding-top: 0.5rem;
}
.text-foreground {
color: hsl(var(--foreground));
}
.step-form-cls .section-head {
max-width: 42rem;
}
.font-size-36-40 h2 {
font-size: 2.25rem;
line-height: 2.5rem;
}
.home-page-content-section .rich-text-block {
max-width: 42rem;
}
.home-page-content-section .rich-text-block p {
font-size: 1.125rem;
line-height: 1.75rem;
}
.para-width-42 .section-head p {
max-width: 42rem;
margin: 0 auto;
}
.para-18-28 p { font-size: 18px; line-height:28px; }
.para-marging-bottom-2 p { margin-bottom:2rem; }
section.page-hero.without-image-section p.eyebrow {
color: hsl(var(--primary));
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
section.page-hero.without-image-section h1.text-balance {
font-size: 3rem;
line-height: 1;
color: hsl(var(--foreground));
}
section.page-hero.without-image-section p {
color: hsl(var(--muted-foreground));
}
.center-48rem-card .centered-icon-card {
padding: 1.5rem;
border-radius: .75rem;
background-color: hsl(var(--card));
--tw-shadow: var(--shadow-card);
--tw-shadow-colored: var(--shadow-card);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-shadow-color: hsl(var(--card));
--tw-shadow: var(--tw-shadow-colored);
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
animation-duration: .3s;
}
.center-48rem-card .centered-icon-card p { max-width: unset; }
section.bg-secondary.center-48rem-card { background: hsl(var(--background)); padding-top: 0px; }
.faq-answer p {
font-size: 14px;
line-height: 20px;
}
.cta-telefone-banner-cls p {
max-width: 42rem;
margin: 0 auto;
margin-bottom: 2rem;
}
.inner-banner-white-text .page-hero__content h1 { max-width:49rem; }
.page-hero.inner-banner-white-text .page-hero__content p.eyebrow {
line-height: 24px;
color: white !important;
}
.page-hero .inner-banner-white-text .page-hero__content p {
font-size: 20px;
line-height: 28px;
color: #fff;
}
.all-bestattungsarten-inner-section .rich-text-block {
padding: 0;
box-shadow: unset;
background-color: unset;
}
.all-bestattungsarten-inner-section .card-serene img {
width: 24px;
height: 24px;
}
.all-bestattungsarten-inner-section aside a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: hsl(var(--primary-foreground));
color: hsl(var(--primary));
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
text-decoration: none;
font-size: 0.9rem;
}
.all-bestattungsarten-inner-section aside a:hover {
background-color: hsl(var(--primary-foreground) / .9);
}
.w-4 {
width: 1rem;
}
.h-4 {
height: 1rem;
}
.w-5 {
width: 1.25rem;
}
.h-5 {
height: 1.25rem;
}
.bg-light {
background-color: hsl(270deg 12% 93% / 0%);
}
.numeric-section-card-style .checklist-item {
border: none;
background: unset;
box-shadow: unset;
}
.three-column-content-section-cls .section-head h2 {
font-size: 24px;
line-height: 32px;
}
header.site-header .container-wide {
max-width: 90rem !important;
}
footer.site-footer .container-wide {
padding: 8rem 30px !important;
}
@media (max-width: 600px) {
.footer-logo {
height: 5rem;
width: auto;
object-fit: contain;
margin-bottom: 1rem;
}
}
.Bestattungsvorsorge_home_sec p {
font-size: 18px;
margin-bottom: 15px;
line-height: 28px;
}
.Bestattungsvorsorge_home_sec a.btn.btn-trust {
font-size: 14px;
}
.Hall_home_sec h2 {
font-size: 36px;
line-height: 40px;
}
.home_cta_sec h2 {
font-size: 36px;
line-height: 40px;
}
.home_cta_sec p {
width: 36rem;
margin: 0rem auto 2rem;
}
.locations_sections_three h2 {
font-size: 36px;
line-height: 40px;
}
.locations_sections_three p {
width: 36rem;
margin: 0rem auto 2rem;
}
.bestattungsarten_first_sec p {
font-size: 18px;
line-height: 28px;
color: #73677e !important;
}
.bestattungsarten_first_sec h1.text-balance {
font-size: 48px;
line-height: 48px;
color: #261f2e;
}
.bestattungsarten_first_sec p.eyebrow {
font-size: 16px;
color: #460d72 !important;
}
.categories_section p.hb-image-text__eyebrow {
font-size: 14px;
line-height: 20px;
margin-bottom: 0px !important;
}
.loc-card__body p {
margin: 0px;
width: 100% !important;
}
.erdbestattung_sec_sec h2 {
font-size: 30px;
line-height: 36px;
}
.erdbestattung_sec_sec p {
font-size: 16px;
line-height: 24px !important;
}
.grid-4.checklist-grid .checklist-item {
background: transparent !important;
padding: 0px;
border: none;
box-shadow: none;
}
.waldbestattung_third_sec .highlight-card .highlight-card__icon {
width: 40px;
border-radius: 30px;
margin-right: 20px;
}
.waldbestattung_third_sec .highlight-card {
display:flex;
}
.seebestattung_sec_sec .highlight-card .highlight-card__icon {
justify-content: center;
margin: 0rem auto 1rem;
border-radius: 50px;
}
.seebestattung_sec_sec .highlight-card {
text-align: center;
}
.vorsogue-cards .highlight-card .highlight-card__icon {
width: 4.5rem;
margin-right: 15px;
}
.vorsogue-cards .highlight-card {
display: flex;
}
.user_icon {
display: none;
}
.vorsorge_cta .user_icon {
display: block;
}
.vorsorge_cta .user_icon svg {
width: 64px !important;
height: 64px !important;
}
.kosten_third_sec .price-row div {
background: transparent !important;
}
.kosten_third_sec .price-row h4 {
margin: 0;
font-size: 18px;
line-height: 24px;
}
.kosten_third_sec .price-row div img {
width: 24px;
}
.ablauf_first_sec p {
font-size: 18px;
line-height: 28px;
color: #73677e !important;
}
.ablauf_first_sec h1.text-balance {
font-size: 48px;
line-height: 48px;
color: #261f2e;
}
.ablauf_first_sec p.eyebrow {
font-size: 16px;
line-height: 24px;
color: #460d72 !important;
}
section.ablauf_flower {
background: #fff;
}
.ablauf_flower .cta-btn-row {
margin-top: 20px;
}
header.site-header .container-wide {
max-width: 90rem !important;
}
footer.site-footer .container-wide {
padding: 8rem 30px !important;
}
.waldbestattung_third_sec .highlight-card_icon {
width: 3rem !important;
height: 3rem !important;
min-width: 3rem; /* shrink na ho */
border-radius: 50%;
background: hsl(var(--primary) / 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
}
section.ablauf_checklist_heading {
padding-bottom: 10px;
}
@media (max-width: 768px) {
.hero-video__content {
position: relative;
z-index: 10;
padding: 5rem 30px;
}
.hero-video__content h1 {
font-size: 48px;
line-height: 48px;
color: hsl(var(--primary-foreground));
margin-bottom: 1.5rem;
max-width: 52rem;
}
.hero-video__content p.lead {
font-size: 20px;
}
.rich-text-block {
width: 100%;
}
.intro-2col .intro-2col__media {
order: 2;
}
}
@media (max-width: 600px) {
.footer-logo {
height: 5rem;
width: auto;
object-fit: contain;
margin-bottom: 1rem;
}
.hero-video__content h1 {
font-size: 36px;
line-height: 40px;
}
.hero-video__content p.lead {
font-size: 18px;
line-height: 28px;
}
.newheading{
font-size: 20px;
}
.section-head h2 {
margin-bottom: 1rem;
font-size: 30px !important;
}
.inner-banner-white-text .page-hero__content h1{
font-size: 36px !important;
}
.checklist-grid {
display: grid;
gap: 2rem;
max-width: 72rem;
margin: 0 auto;
}
.ablauf_first_sec h1.text-balance{
font-size: 36px;
}
.ablauf_first_sec-align .center-cta-heading {
font-size: 30px;
}
.timeline-item.right .icon {
left: 0;
margin-left: 0px;
}
.bestattungsarten_first_sec h1.text-balance {
font-size: 36px;
line-height: 38px;
color: #261f2e;
}
.Hall_home_sec h2 {
font-size: 29px;
line-height: 36px;
}
.home_cta_sec h2 {
font-size: 30px;
line-height: 40px;
}
.locations_sections_three p {
width: 100%;
margin: 0rem auto;
}
.home_cta_sec p {
width: 100%;
margin: 0rem auto 2rem;
}
/* mobile page */
.mobile-head h1.text-balance {
font-size: 36px !important;
text-align: center;
}
.mobile-head .page-hero__content p {
text-align: center;
}
.lastpage-grid .grid-3 {
grid-template-columns: 1fr !important;
}
.max-w-3xl {
width: 100% !important;
margin-bottom: 0px;
padding-bottom: 40px;
}
.checklist-header {
display: block !important;
}
button.print-btn.btn.btn-muted {
padding: 10px 0px;
}
section.page-hero.updated-text-balance.new-eyebow.mobile__page-hero.mobile_page_hero.muted.center {
background: #edebef99;
min-height: 20vh !important;
}
}
@media (max-width: 1024px) {
.section-head h2 {
margin-bottom: 1rem;
font-size: 36px;
}
.inner-banner-white-text .page-hero__content h1{
font-size: 48px;
}
/* tablet */
.lastpage h1.text-balance {
text-align: center;
}
.lastpage .page-hero__content p {
text-align: center;
}
.lastpage-grid .grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
.bestattungsarten_car-sec .card-serene {
text-align: center;
}
.contact-info-crads {
margin: auto;
}
/* dsktop */
.lastpage h1.text-balance {
text-align: center;
}
.lastpage .page-hero__content p {
text-align: center;
margin: auto;
}
section.impressum_data {
width: 56rem !important;
margin: auto;
padding: 5rem 0
}
section.impressum_data h1 {
font-size: 40px;
line-height: 46px;
margin-bottom: 20px;
}
section.impressum_data p {
font-size: 16px;
line-height: 26px;
color: #73677e;
}
section.impressum_data h2 {
font-size: 36px !important;
line-height: 40px;
margin-bottom: 10px;
margin-top: 20px;
}
section.impressum_data h3 {
font-size: 30px;
line-height: 36px;
margin-bottom: 10px;
margin-top: 20px;
}
section.impressum_data h4 {
font-size: 26px;
line-height: 30px;
margin-bottom: 10px;
margin-top: 20px;
}
section.impressum_data h5 {
font-size: 20px;
line-height: 26px;
margin-bottom: 10px;
margin-top: 20px;
}
section.impressum_data li {
font-size: 16px;
line-height: 26px;
color: #73677e;
}
/* new css*/
.custom-divider {
height: 2px;
width: 8%;
background: #460d724d;
margin: 30px auto 40px;
}
/* galiere button */
.page-hero__button-wrap{
margin-top:40px;
text-align:center;
}
.page-hero__button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
background:#4B0D7A;
color:#fff !important;
text-decoration:none;
padding:16px 32px;
border-radius:12px;
font-size:16px;
font-weight:500;
line-height:1.2;
transition:all 0.3s ease;
}
.page-hero__button:hover{
background:#3e0965;
transform:translateY(-2px);
color:#fff !important;
}
.page-hero__button svg{
width:22px;
height:22px;
flex-shrink:0;
}
@media(max-width:768px){
.page-hero__button{
width:auto;
padding:18px 24px;
font-size:16px;
}
body {
padding-bottom: 10px;
}
}
/* for desktop */
section.page-hero.updated-text-balance.new-eyebow.mobile__page-hero.mobile_page_hero.muted.center {
background: #edebef99;
min-height: 50vh;
}
section.section-padding.updated-rich-text.was-it-text.newsec-padding {
padding-top: 3rem;
}
section.section-padding.bg-muted.font-size-36-40.bg-color {
background: white;
}
.gallery-item__overlay,
.gallery-item__zoom{
pointer-events: none;
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
.location-office-header {
flex-wrap: nowrap !Important;
margin-bottom: 22px;
}
section.page-hero.updated-text-balance.new-eyebow.mobile__page-hero.mobile_page_hero.muted.center {
background: #edebef99;
min-height: 26vh !important;
}
}
@media screen and (min-width: 300px) and (max-width: 400px) {
.hero-video__content h1 {
font-size: 30px;
line-height: 33px;
}
.section-head h2 {
margin-bottom: 1rem;
font-size: 26px !important;
}
.items-center {
align-items: center;
text-align: left;
}
.Hall_home_sec h2 {
font-size: 26px;
line-height: 32px;
}
.center-cta-heading {
font-size: 26px;
}
}
.gform_heading {
display: none;
}
h2.gform_submission_error {
font-size: 20px;
}
.trust-point .trusted_heading {
margin-bottom: 0.5rem;
line-height: 28px;
font-size: 1.25rem;
font-family: 'Playfair Display', Georgia, serif;
color: #261f2e;
}
.checklist_heading{ font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 .5em;
line-height: 1.2;
color: #261f2e !important;}
p.locations_heading {
font-size: 18px;
line-height: 1.1;
color: #2f2439;
font-weight: 400;
margin: 0;
font-family: 'Playfair Display';
}