/* =========================================================================== Komponenten: Hero, Teaser, Inhaltsverzeichnis, Funnel, Terminwizard, Sticky-Kontakt, Footer, Formulare, Karten. =========================================================================== */ /* --- Lange deutsche Komposita ------------------------------------------- */ /* * Wörter wie „Einstellungsuntersuchungen“ oder „Gefährdungsbeurteilung“ sind * breiter als eine Kartenspalte. Ohne Trennung ragen sie über den Rand hinaus. * Die Silbentrennung greift, weil die Sprache „de-DE“ trägt. */ :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, summary) { overflow-wrap: break-word; hyphens: auto; } /* --- Hero ---------------------------------------------------------------- */ .asz-hero { position: relative; background: var(--wp--preset--color--primary); color: #fff; overflow: hidden; isolation: isolate; } .asz-hero__media { position: absolute; inset: 0; z-index: -2; } .asz-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .asz-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(0, 56, 47, .98) 0%, rgba(0, 56, 47, .96) 42%, rgba(0, 56, 47, .78) 58%, rgba(0, 56, 47, .45) 78%, rgba(0, 56, 47, .3) 100%), linear-gradient(180deg, rgba(0, 56, 47, .45) 0%, rgba(0, 56, 47, .15) 55%, rgba(0, 56, 47, .5) 100%); } /* organische Kurve wie bei BG prevent */ .asz-hero__curve { position: absolute; inset: -10% auto -10% -12%; width: 72%; z-index: -1; background: var(--wp--preset--color--primary); border-radius: 0 60% 55% 0 / 0 55% 45% 0; filter: blur(.2px); } .asz-hero__inner { max-width: var(--asz-shell); margin-inline: auto; padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 9vw, 7rem); position: relative; } .asz-hero__content { max-width: 44rem; } .asz-hero h1 { color: #fff; margin: 0 0 1.25rem; font-size: var(--wp--preset--font-size--display); letter-spacing: -.03em; } .asz-hero h1 em, .asz-hero .asz-accent-text { font-style: normal; color: var(--wp--preset--color--accent); } .asz-hero p { color: rgba(255, 255, 255, .88); font-size: clamp(1.0625rem, .95rem + .55vw, 1.3125rem); line-height: 1.6; max-width: 38rem; } .asz-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .asz-hero__facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .18); } .asz-fact__value { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); display: block; } .asz-fact__label { display: block; margin-top: .35rem; font-size: .875rem; color: rgba(255, 255, 255, .75); max-width: 14rem; } /* --- Vertrauensleiste / Logos -------------------------------------------- */ .asz-trust { padding-block: clamp(1.75rem, 3vw, 2.5rem); background: #fff; border-bottom: 1px solid var(--wp--preset--color--line); } .asz-trust__inner { max-width: var(--asz-shell); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); flex-wrap: wrap; justify-content: center; } .asz-trust__label { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 700; margin: 0; } .asz-trust__logos { display: flex; align-items: center; gap: clamp(1.25rem, 3.5vw, 3rem); flex-wrap: wrap; justify-content: center; } .asz-trust__logo { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; color: var(--wp--preset--color--muted); opacity: .65; filter: grayscale(1); transition: opacity var(--asz-t), filter var(--asz-t), transform var(--asz-t); } .asz-trust__logo:hover { opacity: 1; filter: none; transform: translateY(-2px); color: var(--wp--preset--color--primary); } .asz-trust__logo img { max-height: 40px; width: auto; } /* --- Bereichs-Teaser („Praxisbereiche“) ---------------------------------- */ .asz-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .asz-pillar { position: relative; display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 2.5vw, 2rem); background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-lg); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--asz-t), box-shadow var(--asz-t), border-color var(--asz-t); } .asz-pillar::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--mint); opacity: 0; transition: opacity var(--asz-t), transform var(--asz-t-slow); transform: scale(.6); z-index: 0; } .asz-pillar:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 56, 47, .13); border-color: var(--wp--preset--color--mint-strong); } .asz-pillar:hover::before { opacity: 1; transform: scale(1); } .asz-pillar > * { position: relative; z-index: 1; } .asz-pillar__icon { width: 56px; height: 56px; border-radius: 18px; background: var(--wp--preset--color--primary); display: grid; place-items: center; transition: transform var(--asz-t-slow), background-color var(--asz-t); } .asz-pillar__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--wp--preset--color--accent-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--asz-t), transform var(--asz-t-slow); } .asz-pillar:hover .asz-pillar__icon { background: var(--wp--preset--color--accent); transform: rotate(-4deg) scale(1.04); } .asz-pillar:hover .asz-pillar__icon svg { stroke: var(--wp--preset--color--primary-dark); } /* Micro-Animation je Icon-Typ */ .asz-pillar:hover .asz-icon-anim--swing { animation: asz-swing 1.1s ease-in-out; transform-origin: top center; } .asz-pillar:hover .asz-icon-anim--spin { animation: asz-spin-part .9s cubic-bezier(.3,.8,.3,1); } .asz-pillar:hover .asz-icon-anim--beat { animation: asz-beat 1s ease-in-out; } .asz-pillar:hover .asz-icon-anim--rise { animation: asz-rise .7s ease-out; } @keyframes asz-swing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } } @keyframes asz-spin-part { from { transform: rotate(0deg); } to { transform: rotate(38deg); } } @keyframes asz-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } 55% { transform: scale(.97); } } @keyframes asz-rise { from { transform: translateY(4px); } to { transform: translateY(0); } } .asz-pillar h3 { margin: 0; font-size: 1.3125rem; } .asz-pillar p { margin: 0; color: var(--wp--preset--color--muted); font-size: .9375rem; } .asz-pillar__links { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .3rem; } .asz-pillar__links li { font-size: .9375rem; color: var(--wp--preset--color--muted); padding-left: 1.1rem; position: relative; } .asz-pillar__links li::before { content: "›"; position: absolute; left: 0; color: var(--wp--preset--color--accent); font-weight: 700; } .asz-pillar__more { margin-top: auto; padding-top: .75rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .9375rem; color: var(--wp--preset--color--primary); display: inline-flex; align-items: center; gap: .4rem; } .asz-pillar:hover .asz-pillar__more { color: var(--wp--preset--color--accent); } .asz-pillar__more::after { content: "→"; transition: transform var(--asz-t); } .asz-pillar:hover .asz-pillar__more::after { transform: translateX(4px); } /* --- Werte-Sektion (CI-Motiv) ------------------------------------------- */ .asz-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .asz-value { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; } .asz-value__icon { width: 76px; height: 76px; border-radius: 24px; background: var(--wp--preset--color--primary); display: grid; place-items: center; transition: transform var(--asz-t-slow), background-color var(--asz-t); } .asz-value:hover .asz-value__icon { transform: translateY(-4px) rotate(3deg); } .asz-value__icon svg { width: 38px; height: 38px; fill: none; stroke: var(--wp--preset--color--accent-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* --- Kennzahlen ---------------------------------------------------------- */ .asz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1rem, 2vw, 2rem); } .asz-stat { padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--asz-radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .asz-stat--light { background: #fff; border-color: var(--wp--preset--color--line); } .asz-stat__value { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); } .asz-stat--light .asz-stat__value { color: var(--wp--preset--color--primary); } .asz-stat__label { margin-top: .5rem; font-size: .9375rem; color: rgba(255, 255, 255, .78); } .asz-stat--light .asz-stat__label { color: var(--wp--preset--color--muted); } /* --- Inhaltsverzeichnis (mitlaufend) ------------------------------------ */ .asz-layout-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); max-width: var(--asz-shell); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } @media (min-width: 1000px) { .asz-layout-toc { grid-template-columns: 260px minmax(0, 1fr); } .asz-layout-toc--right { grid-template-columns: minmax(0, 1fr) 300px; } } .asz-toc { position: sticky; top: calc(var(--asz-header-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--asz-header-h) - 3rem); overflow-y: auto; padding: 1.25rem; border-radius: var(--asz-radius-md); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); font-size: .9375rem; scrollbar-width: thin; } .asz-toc__title { font-family: var(--wp--preset--font-family--heading); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 .85rem; font-weight: 700; } .asz-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .asz-toc li.is-sub a { padding-left: 1.75rem; font-size: .875rem; } .asz-toc a { display: block; padding: .45rem .7rem; border-radius: var(--asz-radius-sm); color: var(--wp--preset--color--muted); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; transition: color var(--asz-t), background-color var(--asz-t), border-color var(--asz-t); } .asz-toc a:hover { color: var(--wp--preset--color--primary); background: #fff; } .asz-toc a.is-active { color: var(--wp--preset--color--primary); background: #fff; border-left-color: var(--wp--preset--color--accent); font-weight: 600; } .asz-toc__progress { height: 3px; border-radius: 3px; background: var(--wp--preset--color--line); margin-bottom: 1rem; overflow: hidden; } .asz-toc__progress span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--accent); transition: width 120ms linear; } /* mobile: aufklappbares TOC */ .asz-toc--mobile { position: static; max-height: none; margin-bottom: 1.5rem; } @media (min-width: 1000px) { .asz-toc--mobile { display: none; } } @media (max-width: 999px) { .asz-toc--desktop { display: none; } } /* --- Whitepaper-Box & Newsletter ---------------------------------------- */ .asz-leadbox { position: relative; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--asz-radius-lg); background: linear-gradient(135deg, #00594c 0%, #00382f 100%); color: #fff; overflow: hidden; } @media (min-width: 860px) { .asz-leadbox { grid-template-columns: 1.2fr .8fr; align-items: center; } } .asz-leadbox::after { content: ""; position: absolute; right: -8%; top: -40%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(18, 208, 126, .35) 0%, rgba(18, 208, 126, 0) 70%); pointer-events: none; } .asz-leadbox h2, .asz-leadbox h3 { color: #fff; margin-top: 0; } .asz-leadbox p { color: rgba(255, 255, 255, .84); } .asz-leadbox__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(18, 208, 126, .18); color: var(--wp--preset--color--accent); font-size: .8125rem; font-weight: 700; margin-bottom: .85rem; } /* --- Formulare ----------------------------------------------------------- */ .asz-form { display: grid; gap: .9rem; } .asz-form__row { display: grid; gap: .9rem; } @media (min-width: 640px) { .asz-form__row--2 { grid-template-columns: 1fr 1fr; } } .asz-field { display: grid; gap: .35rem; } .asz-field > label, .asz-label { font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--contrast); } .asz-on-dark .asz-field > label, .asz-leadbox .asz-field > label { color: rgba(255, 255, 255, .9); } .asz-input, .asz-form input[type="text"], .asz-form input[type="email"], .asz-form input[type="tel"], .asz-form input[type="number"], .asz-form select, .asz-form textarea { width: 100%; padding: .85rem 1rem; border-radius: var(--asz-radius-sm); border: 1px solid var(--wp--preset--color--line); background: #fff; color: var(--wp--preset--color--contrast); font: inherit; font-size: 1rem; transition: border-color var(--asz-t), box-shadow var(--asz-t); } .asz-input:focus, .asz-form :where(input, select, textarea):focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: var(--asz-ring); } .asz-form textarea { min-height: 140px; resize: vertical; } .asz-consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--wp--preset--color--muted); } .asz-leadbox .asz-consent, .asz-on-dark .asz-consent { color: rgba(255, 255, 255, .72); } .asz-consent input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--wp--preset--color--accent); flex: 0 0 auto; } .asz-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.75rem; border: 0; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .9375rem; cursor: pointer; transition: transform var(--asz-t), background-color var(--asz-t), box-shadow var(--asz-t); } .asz-submit:hover:not(:disabled) { transform: translateY(-1px); background: #0bb96f; box-shadow: 0 12px 28px rgba(0, 56, 47, .2); } .asz-submit:disabled { opacity: .6; cursor: not-allowed; } .asz-form__status { font-size: .9375rem; padding: .85rem 1rem; border-radius: var(--asz-radius-sm); display: none; } .asz-form__status.is-success { display: block; background: rgba(18, 208, 126, .14); color: #086b45; border: 1px solid rgba(18, 208, 126, .4); } .asz-form__status.is-error { display: block; background: rgba(220, 60, 60, .1); color: #97231f; border: 1px solid rgba(220, 60, 60, .3); } .asz-leadbox .asz-form__status.is-success { background: rgba(18, 208, 126, .2); color: #eafff4; } /* Honeypot */ .asz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* --- Funnel -------------------------------------------------------------- */ .asz-funnel { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-xl); box-shadow: 0 24px 60px rgba(0, 56, 47, .1); overflow: hidden; max-width: 880px; margin-inline: auto; } .asz-funnel__head { padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0; } .asz-funnel__steps { display: flex; gap: .5rem; margin-bottom: 1.25rem; } .asz-funnel__steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--wp--preset--color--line); transition: background-color var(--asz-t); } .asz-funnel__steps span.is-done { background: var(--wp--preset--color--accent); } .asz-funnel__stepno { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); } .asz-funnel__body { padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); min-height: 320px; } .asz-funnel h3 { margin: .35rem 0 .35rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); } .asz-funnel__hint { color: var(--wp--preset--color--muted); font-size: .9375rem; margin: 0 0 1.5rem; } .asz-funnel__panel { display: none; animation: asz-fade-up var(--asz-t-slow) both; } .asz-funnel__panel.is-active { display: block; } @keyframes asz-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .asz-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; } .asz-choice { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--asz-radius-md); border: 2px solid var(--wp--preset--color--line); background: #fff; cursor: pointer; text-align: left; font: inherit; font-weight: 600; color: var(--wp--preset--color--contrast); transition: border-color var(--asz-t), background-color var(--asz-t), transform var(--asz-t); } .asz-choice:hover { border-color: var(--wp--preset--color--accent-soft); transform: translateY(-2px); } .asz-choice.is-selected { border-color: var(--wp--preset--color--accent); background: rgba(18, 208, 126, .08); } .asz-choice__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--wp--preset--color--mint); display: grid; place-items: center; flex: 0 0 auto; } .asz-choice__icon svg { width: 20px; height: 20px; stroke: var(--wp--preset--color--primary); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .asz-choice small { display: block; font-weight: 400; color: var(--wp--preset--color--muted); font-size: .8125rem; margin-top: .15rem; } .asz-combo { position: relative; } .asz-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-md); box-shadow: 0 18px 44px rgba(0, 56, 47, .14); display: none; padding: .35rem; } .asz-combo__list.is-open { display: block; } .asz-combo__list button { display: block; width: 100%; text-align: left; padding: .6rem .75rem; border: 0; background: none; border-radius: var(--asz-radius-sm); cursor: pointer; font: inherit; font-size: .9375rem; } .asz-combo__list button:hover, .asz-combo__list button.is-highlight { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--primary); } .asz-combo__list button small { color: var(--wp--preset--color--muted); display: block; font-size: .75rem; } .asz-funnel__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); } .asz-btn-ghost { background: none; border: 0; font: inherit; font-weight: 600; color: var(--wp--preset--color--muted); cursor: pointer; padding: .6rem .25rem; display: inline-flex; align-items: center; gap: .4rem; } .asz-btn-ghost:hover { color: var(--wp--preset--color--primary); } .asz-result { background: var(--wp--preset--color--mint); border-radius: var(--asz-radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 1rem; } .asz-result__headline { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0; } .asz-result__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .asz-result__tile { background: #fff; border-radius: var(--asz-radius-md); padding: 1rem 1.15rem; } .asz-result__tile strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.75rem; color: var(--wp--preset--color--primary); line-height: 1.1; } .asz-result__tile span { font-size: .8125rem; color: var(--wp--preset--color--muted); } .asz-result__note { font-size: .8125rem; color: var(--wp--preset--color--muted); margin: 0; } /* --- Termin-Wizard (Modal) ---------------------------------------------- */ .asz-modal { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); background: rgba(0, 25, 21, .6); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity var(--asz-t), visibility var(--asz-t); } .asz-modal.is-open { opacity: 1; visibility: visible; } .asz-modal__box { width: min(760px, 100%); max-height: min(90vh, 900px); overflow-y: auto; background: #fff; border-radius: var(--asz-radius-xl); box-shadow: 0 40px 100px rgba(0, 0, 0, .35); transform: translateY(16px) scale(.98); transition: transform var(--asz-t-slow); position: relative; } .asz-modal.is-open .asz-modal__box { transform: none; } .asz-modal__head { position: sticky; top: 0; background: #fff; z-index: 2; padding: 1.25rem clamp(1.25rem, 3vw, 2rem) .75rem; border-bottom: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-xl) var(--asz-radius-xl) 0 0; } .asz-modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3; transition: background-color var(--asz-t), transform var(--asz-t); } .asz-modal__close:hover { background: var(--wp--preset--color--mint); transform: rotate(90deg); } .asz-modal__close svg { width: 18px; height: 18px; stroke: var(--wp--preset--color--primary); stroke-width: 2.4; fill: none; stroke-linecap: round; } .asz-modal__body { padding: 1.25rem clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); } .asz-wizard__crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; color: var(--wp--preset--color--muted); margin-top: .5rem; } .asz-wizard__crumb { background: var(--wp--preset--color--mint); border-radius: 999px; padding: .25rem .7rem; color: var(--wp--preset--color--primary); font-weight: 600; } .asz-checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; margin-top: .75rem; } .asz-checkgrid label { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-sm); cursor: pointer; font-size: .9375rem; transition: border-color var(--asz-t), background-color var(--asz-t); } .asz-checkgrid label:hover { border-color: var(--wp--preset--color--accent-soft); background: var(--wp--preset--color--surface); } .asz-checkgrid input { accent-color: var(--wp--preset--color--accent); width: 1.1rem; height: 1.1rem; } .asz-location-result { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--asz-radius-md); background: var(--wp--preset--color--mint); margin-top: 1rem; } .asz-location-result strong { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); } .asz-embed-frame { border-radius: var(--asz-radius-md); border: 1px solid var(--wp--preset--color--line); overflow: hidden; background: var(--wp--preset--color--surface); min-height: 320px; display: grid; place-items: center; text-align: center; padding: 1.5rem; } .asz-embed-frame iframe { width: 100%; min-height: 520px; border: 0; display: block; } /* --- Sticky-Kontakt ------------------------------------------------------ */ .asz-sticky-contact { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 180; display: flex; flex-direction: column; gap: 1px; border-radius: var(--asz-radius-md) 0 0 var(--asz-radius-md); overflow: hidden; box-shadow: -6px 0 24px rgba(0, 56, 47, .14); } .asz-sticky-contact a, .asz-sticky-contact button { display: flex; align-items: center; gap: 0; padding: .9rem 1rem; background: var(--wp--preset--color--primary); color: #fff; border: 0; cursor: pointer; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: .875rem; font-weight: 600; white-space: nowrap; transition: background-color var(--asz-t), gap var(--asz-t-slow); } .asz-sticky-contact span { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--asz-t-slow), opacity var(--asz-t); } .asz-sticky-contact a:hover, .asz-sticky-contact button:hover, .asz-sticky-contact a:focus-visible, .asz-sticky-contact button:focus-visible { background: var(--wp--preset--color--primary-dark); gap: .6rem; } .asz-sticky-contact a:hover span, .asz-sticky-contact button:hover span, .asz-sticky-contact a:focus-visible span, .asz-sticky-contact button:focus-visible span { max-width: 230px; opacity: 1; } .asz-sticky-contact .asz-sticky-contact__cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); } .asz-sticky-contact .asz-sticky-contact__cta:hover { background: #0bb96f; } .asz-sticky-contact svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 781px) { .asz-sticky-contact { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; border-radius: 0; box-shadow: 0 -4px 20px rgba(0, 56, 47, .18); } .asz-sticky-contact a, .asz-sticky-contact button { flex: 1; justify-content: center; padding: .9rem .5rem; font-size: .75rem; gap: .4rem; flex-direction: column; } .asz-sticky-contact span { max-width: none; opacity: 1; font-size: .6875rem; } body { padding-bottom: 56px; } } /* --- Breadcrumb ---------------------------------------------------------- */ .asz-breadcrumb { font-size: .8125rem; color: var(--wp--preset--color--muted); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-block: 1rem; } .asz-breadcrumb a { color: inherit; text-decoration: none; } .asz-breadcrumb a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; } .asz-breadcrumb span[aria-current] { color: var(--wp--preset--color--primary); font-weight: 600; } .asz-on-dark .asz-breadcrumb, .asz-hero .asz-breadcrumb { color: rgba(255, 255, 255, .7); } .asz-on-dark .asz-breadcrumb a:hover, .asz-hero .asz-breadcrumb a:hover { color: #fff; } .asz-hero .asz-breadcrumb span[aria-current] { color: var(--wp--preset--color--accent); } /* --- Karten-Raster für CPTs (Standorte, Seminare, Jobs, Wissen) ---------- */ .asz-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.75rem); } @media (min-width: 620px) { .asz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .asz-grid, .asz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .asz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .asz-tile { display: flex; flex-direction: column; gap: .65rem; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-lg); padding: clamp(1.25rem, 2vw, 1.6rem); text-decoration: none; color: inherit; transition: transform var(--asz-t), box-shadow var(--asz-t), border-color var(--asz-t); height: 100%; } .asz-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 56, 47, .12); border-color: var(--wp--preset--color--mint-strong); } .asz-tile__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent); } .asz-tile h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; } .asz-tile p { margin: 0; color: var(--wp--preset--color--muted); font-size: .9375rem; } .asz-tile__meta { margin-top: auto; padding-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; color: var(--wp--preset--color--muted); border-top: 1px solid var(--wp--preset--color--line); } .asz-tile__meta span { display: inline-flex; align-items: center; gap: .35rem; } .asz-tile__img { margin: calc(-1 * clamp(1.25rem, 2vw, 1.6rem)) calc(-1 * clamp(1.25rem, 2vw, 1.6rem)) .5rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--asz-radius-lg) var(--asz-radius-lg) 0 0; } .asz-tile__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--asz-t-slow); } .asz-tile:hover .asz-tile__img img { transform: scale(1.04); } /* --- Footer -------------------------------------------------------------- */ .asz-footer { background: var(--wp--preset--color--primary-dark); color: rgba(255, 255, 255, .78); padding-block: clamp(3rem, 6vw, 5rem) 0; margin-top: clamp(3rem, 6vw, 6rem); } .asz-footer__inner { max-width: var(--asz-shell); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .asz-footer__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding-bottom: clamp(2rem, 4vw, 3rem); } .asz-footer h3, .asz-footer .asz-footer__title { color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; } .asz-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .asz-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .9375rem; transition: color var(--asz-t), padding-left var(--asz-t); } .asz-footer a:hover { color: var(--wp--preset--color--accent); } .asz-footer__trust { display: flex !important; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; padding: 1.5rem 0; margin: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; } .asz-footer__trust li, .asz-footer__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; margin: 0; } .asz-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.5rem; font-size: .8125rem; color: rgba(255, 255, 255, .6); } .asz-footer__social { gap: .5rem; margin-top: 1.25rem; padding: 0; } .asz-footer__social .wp-social-link { background: rgba(255, 255, 255, .08); border-radius: 999px; transition: background-color var(--asz-t), transform var(--asz-t); } .asz-footer__social .wp-social-link:hover { background: var(--wp--preset--color--accent); transform: translateY(-2px); } .asz-footer__social .wp-social-link a { padding: .55rem; } .asz-footer__social .wp-social-link svg { width: 20px; height: 20px; fill: currentColor; } .asz-footer__social .wp-social-link:hover svg { color: var(--wp--preset--color--primary-dark); } /* --- Kontakt-/Standortkarte --------------------------------------------- */ .asz-map { border-radius: var(--asz-radius-lg); overflow: hidden; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); min-height: 300px; } .asz-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; } .asz-map__placeholder { display: grid; place-items: center; text-align: center; padding: 2rem; gap: .75rem; min-height: 300px; color: var(--wp--preset--color--muted); font-size: .9375rem; } /* --- A–Z Liste ----------------------------------------------------------- */ .asz-az__filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.5rem; } .asz-az__filter button { min-width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--primary); cursor: pointer; transition: background-color var(--asz-t), color var(--asz-t), transform var(--asz-t); } .asz-az__filter button:hover:not(:disabled), .asz-az__filter button.is-active { background: var(--wp--preset--color--primary); color: #fff; } .asz-az__filter button:disabled { opacity: .35; cursor: default; } .asz-az__group { margin-bottom: 2rem; } .asz-az__letter { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; color: var(--wp--preset--color--accent); margin: 0 0 .5rem; font-weight: 800; } .asz-az__list { columns: 3 220px; column-gap: 2rem; list-style: none; padding: 0; margin: 0; } .asz-az__list li { break-inside: avoid; margin-bottom: .4rem; } .asz-az__list a { text-decoration: none; color: var(--wp--preset--color--contrast); font-size: .9375rem; } .asz-az__list a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; } /* --- Mega-Panel: Listen aus Kern-Blöcken ------------------------------- */ .asz-panel .wp-block-columns { gap: clamp(1rem, 2vw, 2rem); margin-bottom: 0; } .asz-panel .wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .asz-panel .wp-block-list li { margin: 0; } .asz-panel .wp-block-list a { display: block; padding: .5rem .7rem; border-radius: var(--asz-radius-sm); color: var(--wp--preset--color--contrast); text-decoration: none; font-size: .9375rem; line-height: 1.35; transition: background-color var(--asz-t), color var(--asz-t), transform var(--asz-t); } .asz-panel .wp-block-list a:hover { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--primary); transform: translateX(2px); } .asz-panel__aside .wp-block-list a:hover { background: rgba(255, 255, 255, .6); } .asz-panel__aside--dark .wp-block-list a { color: rgba(255, 255, 255, .88); } .asz-panel__aside--dark .wp-block-list a:hover { background: rgba(255, 255, 255, .12); color: #fff; } .asz-panel__aside p { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--muted); } .asz-panel__aside p strong { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); } .asz-panel__aside--dark p, .asz-panel__aside--dark p strong { color: rgba(255, 255, 255, .88); } .asz-panel__aside--dark p strong { color: #fff; } .asz-panel h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--wp--preset--color--muted); margin: 0 0 .75rem; } .asz-panel__footer p { margin: 0; font-size: .9375rem; } /* --- Kontakt-Listen ----------------------------------------------------- */ .asz-contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; } .asz-contact-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; line-height: 1.5; } .asz-contact-list svg { flex: 0 0 auto; margin-top: .15rem; width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .asz-contact-list a { color: var(--wp--preset--color--primary); text-decoration: none; } .asz-contact-list a:hover { text-decoration: underline; } /* --- Formular-Block ----------------------------------------------------- */ .asz-form-block__intro h3 { margin-top: 0; margin-bottom: .5rem; } .asz-form-block__intro p { margin-top: 0; color: var(--wp--preset--color--muted); } .asz-form-block .asz-form { margin-top: 1.25rem; } .asz-leadbox .asz-form { margin-top: 0; } .asz-newsletter-band .asz-form-block__intro { display: none; } .asz-newsletter-band .asz-form { margin-top: 0; } @media (min-width: 640px) { .asz-newsletter-band .asz-form__fields { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: start; } .asz-newsletter-band .asz-consent { grid-column: 1 / -1; } } /* --- Inhaltsverzeichnis: mobile Variante -------------------------------- */ .asz-toc--mobile-wrap { margin-bottom: 1.5rem; } .asz-toc--mobile-wrap .asz-toc { background: transparent; border: 0; padding: 0 1rem 1rem; } /* --- Beitrags-Meta ------------------------------------------------------ */ .asz-post-meta { gap: 1rem; font-size: .875rem; color: rgba(255, 255, 255, .75); margin-top: .75rem; } .asz-post-meta a { color: var(--wp--preset--color--accent); text-decoration: none; } /* --- Seminar-Eckdaten --------------------------------------------------- */ .asz-seminar-facts { position: sticky; top: calc(var(--asz-header-h) + 1.5rem); } .asz-facts .asz-submit { text-decoration: none; } /* --- Leistungsseiten-Layout (Inhaltsverzeichnis + Text) ----------------- */ .asz-layout-service { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 1000px) { .asz-layout-service { grid-template-columns: 270px minmax(0, 1fr); } } .asz-entry > * { max-width: 100%; } .asz-entry h2 { margin-top: 2.5rem; scroll-margin-top: calc(var(--asz-header-h) + 24px); } .asz-entry h3 { margin-top: 1.75rem; scroll-margin-top: calc(var(--asz-header-h) + 24px); } .asz-entry > p:first-child { font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--wp--preset--color--muted); } /* --- Hero-Varianten ------------------------------------------------------ */ .asz-hero--compact .asz-hero__inner { padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); } .asz-hero--compact h1 { font-size: var(--wp--preset--font-size--xx-large); max-width: 26ch; margin-inline: 0; letter-spacing: -.025em; } .asz-hero h1, .asz-hero p, .asz-hero .asz-eyebrow { margin-inline: 0; } .asz-hero--compact .asz-hero__content { max-width: 52rem; } .asz-hero--compact p { font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); max-width: 46rem; } .asz-hero--light { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--contrast); } .asz-hero--light h1 { color: var(--wp--preset--color--primary); } .asz-hero--light p { color: var(--wp--preset--color--muted); } .asz-hero--light .asz-eyebrow { color: var(--wp--preset--color--primary); } /* Brotkrumen im Hero kompakter halten */ .asz-hero .asz-breadcrumb { max-width: 100%; margin-bottom: .75rem; font-size: .8125rem; } .asz-hero .asz-breadcrumb span[aria-current] { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } /* --- Icons: gemeinsame Grundeinstellung ---------------------------------- */ .asz-icon { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* --- Vorschaukarte (Funnel-Teaser auf der Startseite) -------------------- */ .asz-preview-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-xl); box-shadow: 0 30px 70px rgba(0, 56, 47, .14); overflow: hidden; transform: rotate(-.6deg); transition: transform var(--asz-t-slow); } .asz-preview-card:hover { transform: rotate(0deg) translateY(-4px); } .asz-preview-card { padding: clamp(1.25rem, 2.5vw, 1.85rem); } .asz-preview-card .wp-block-columns { gap: .75rem; margin-bottom: .75rem; } .asz-preview-tile { background: var(--wp--preset--color--mint); border-radius: var(--asz-radius-md); padding: .9rem 1rem; } .asz-preview-tile h4 { margin: 0; font-size: 1.5rem; line-height: 1.1; color: var(--wp--preset--color--primary); letter-spacing: -.02em; } .asz-preview-tile p { margin: .25rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); line-height: 1.4; } .asz-preview-step { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--muted); margin: 0 0 .35rem; } .asz-preview-card h3 { margin: 0 0 1.25rem; font-size: 1.5rem; color: var(--wp--preset--color--primary); } .asz-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .asz-preview-grid > div { background: var(--wp--preset--color--mint); border-radius: var(--asz-radius-md); padding: .9rem 1rem; } .asz-preview-grid strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; line-height: 1.1; color: var(--wp--preset--color--primary); } .asz-preview-grid span { font-size: .8125rem; color: var(--wp--preset--color--muted); display: block; margin-top: .25rem; } .asz-preview-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--wp--preset--color--muted); } /* --- CTA-Band ------------------------------------------------------------ */ .asz-cta-band { text-align: center; } .asz-cta-band .wp-block-buttons { justify-content: center; margin-top: 1.75rem; } .asz-cta-band .asz-lead { max-width: 46rem; margin-inline: auto; } /* --- Hinweisboxen (z. B. Newsletter-Bestätigung) ------------------------- */ .asz-notice { max-width: var(--asz-shell); margin: 0 auto 2rem; padding: 1.1rem 1.35rem; border-radius: var(--asz-radius-md); font-size: .9375rem; line-height: 1.55; } .asz-notice--success { background: rgba(18, 208, 126, .14); border: 1px solid rgba(18, 208, 126, .4); color: #086b45; } .asz-notice--error { background: rgba(220, 60, 60, .1); border: 1px solid rgba(220, 60, 60, .3); color: #97231f; } /* --- Bereichs-Kacheln: Inhalt aus echten Blöcken ------------------------- */ .asz-pillar--linked { cursor: pointer; } .asz-pillar__more { position: relative; text-decoration: none; } /* Der „Mehr erfahren“-Link deckt die ganze Kachel ab … */ .asz-pillar--linked .asz-pillar__more::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* … Links im Inhalt bleiben darüber klickbar. */ .asz-pillar__body { position: relative; z-index: 2; } .asz-pillar__body .wp-block-list, .asz-pillar__links { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .3rem; } .asz-pillar__body .wp-block-list li, .asz-pillar__links li { font-size: .9375rem; color: var(--wp--preset--color--muted); padding-left: 1.1rem; position: relative; margin: 0; } .asz-pillar__body .wp-block-list li::before, .asz-pillar__links li::before { content: "›"; position: absolute; left: 0; color: var(--wp--preset--color--accent); font-weight: 700; } .asz-pillar__body a { color: inherit; text-decoration: none; transition: color var(--asz-t); } .asz-pillar__body a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; } /* --- Werte: Schlagworte als Listenblock ---------------------------------- */ .asz-value__tags { width: 100%; } .asz-value__tags .wp-block-list { justify-content: center; } /* --- Vertrauensleiste: echte Bild- oder Textblöcke ----------------------- */ .asz-trust__logos > * { margin: 0; } .asz-trust__logos .wp-block-image, .asz-trust__logos figure { margin: 0; } .asz-trust__logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity var(--asz-t), filter var(--asz-t), transform var(--asz-t); } .asz-trust__logos img:hover { filter: none; opacity: 1; transform: translateY(-2px); } .asz-trust__logos p { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; color: var(--wp--preset--color--muted); opacity: .7; transition: opacity var(--asz-t), color var(--asz-t), transform var(--asz-t); } .asz-trust__logos p:hover { opacity: 1; color: var(--wp--preset--color--primary); transform: translateY(-2px); } /* --- Kennzahlen im Hero -------------------------------------------------- */ .asz-hero .asz-stats { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .18); gap: 1.5rem 2.75rem; } .asz-hero .asz-stat { background: transparent; border: 0; padding: 0; } .asz-hero .asz-stat__value { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); } .asz-hero .asz-stat__label { max-width: 16rem; } /* Kennzahlen im Hero nehmen die volle Breite der Aktionszeile ein */ .asz-hero__actions > .asz-stats { flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* =========================================================================== Strukturen der Kern-Blöcke (Cover-Hero, Abfrage-Raster, Kennzahlen) =========================================================================== */ /* --- Hero als Cover-Block ------------------------------------------------ */ .wp-block-cover.asz-hero { padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem); isolation: isolate; overflow: hidden; } .wp-block-cover.asz-hero--compact { padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); min-height: 0; } .wp-block-cover.asz-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--asz-shell); margin-inline: auto; text-align: left; } .wp-block-cover.asz-hero :where(h1) { color: #fff; font-size: var(--wp--preset--font-size--display); letter-spacing: -.03em; max-width: 22ch; margin: 0 0 1.25rem; } .wp-block-cover.asz-hero--compact :where(h1) { font-size: var(--wp--preset--font-size--xx-large); max-width: 30ch; } .wp-block-cover.asz-hero .asz-lead { color: rgba(255, 255, 255, .88); max-width: 46rem; } .wp-block-cover.asz-hero .asz-eyebrow { color: var(--wp--preset--color--accent); } .wp-block-cover.asz-hero .wp-block-breadcrumbs { margin-bottom: 1rem; font-size: .8125rem; } .wp-block-cover.asz-hero .wp-block-breadcrumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; } .wp-block-cover.asz-hero .wp-block-breadcrumbs a:hover { color: #fff; } .wp-block-cover.asz-hero .wp-block-breadcrumbs [aria-current] { color: var(--wp--preset--color--accent); } .wp-block-cover.asz-hero .wp-block-buttons { margin-top: 2rem; } /* Organische Kurve über dem Bild – reine Gestaltung. */ .wp-block-cover.asz-hero--dark::after { content: ""; position: absolute; inset: -10% auto -10% -12%; width: 68%; background: var(--wp--preset--color--primary); border-radius: 0 60% 55% 0 / 0 55% 45% 0; z-index: 0; pointer-events: none; } .wp-block-cover.asz-hero .wp-block-cover__inner-container { position: relative; z-index: 1; } /* --- Kennzahlen (Spalten-Block) ------------------------------------------ */ .wp-block-columns.asz-stats { gap: clamp(1rem, 2vw, 2rem); margin-block: 0; } .asz-stats .asz-stat { padding: 0; } .asz-stat__value { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) !important; font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); margin: 0 0 .4rem; font-variant-numeric: tabular-nums; } .asz-stat__label { font-size: .9375rem; color: rgba(255, 255, 255, .78); margin: 0; max-width: 18rem; } .asz-section:not(.asz-on-dark) .asz-stat__value { color: var(--wp--preset--color--primary); } .asz-section:not(.asz-on-dark) .asz-stat__label { color: var(--wp--preset--color--muted); } /* Kennzahlen im Hero */ .asz-hero .asz-stats { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .18); } /* --- Vertrauensleiste (Spalten-Block) ------------------------------------ */ .asz-trust { border-bottom: 1px solid var(--wp--preset--color--line); } .asz-trust__label { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 700; margin-bottom: 1.25rem; } .wp-block-columns.asz-trust__logos { align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-block: 0; } .asz-trust__logos p { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.125rem; color: var(--wp--preset--color--muted); opacity: .7; margin: 0; transition: opacity var(--asz-t), color var(--asz-t), transform var(--asz-t); } .asz-trust__logos p:hover { opacity: 1; color: var(--wp--preset--color--primary); transform: translateY(-2px); } .asz-trust__logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity var(--asz-t), filter var(--asz-t); } .asz-trust__logos img:hover { filter: none; opacity: 1; } /* --- Abfrage-Raster (Query Loop) ----------------------------------------- */ .wp-block-post-template.asz-tiles { gap: clamp(1rem, 2vw, 1.75rem); margin-block: 0; } .asz-tile { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--asz-radius-lg); padding: clamp(1.25rem, 2vw, 1.6rem); height: 100%; gap: .6rem; transition: transform var(--asz-t), box-shadow var(--asz-t), border-color var(--asz-t); } .asz-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 56, 47, .12); border-color: var(--wp--preset--color--mint-strong); } .asz-tile .wp-block-post-title { margin: 0; font-size: 1.1875rem; line-height: 1.25; } .asz-tile .wp-block-post-title a { text-decoration: none; } .asz-tile .wp-block-post-excerpt { margin: 0; } .asz-tile .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); font-size: .9375rem; margin: 0; } .asz-tile .asz-tile__img { margin: calc(-1 * clamp(1.25rem, 2vw, 1.6rem)) calc(-1 * clamp(1.25rem, 2vw, 1.6rem)) .5rem; border-radius: var(--asz-radius-lg) var(--asz-radius-lg) 0 0; overflow: hidden; } .asz-tile .asz-tile__img img { border-radius: 0; transition: transform var(--asz-t-slow); } .asz-tile:hover .asz-tile__img img { transform: scale(1.04); } .asz-tile__meta-item { margin: 0; font-size: .8125rem; color: var(--wp--preset--color--muted); } .asz-tile__meta-item:empty, .asz-contact-line:empty, .asz-fact-line:empty, .asz-tile__kicker:empty { display: none; } /* --- Kontakt- und Faktenzeilen (Block-Bindings) -------------------------- */ .asz-contact-card .wp-block-post-title { margin-top: 0; font-size: 1.375rem; } .asz-contact-line, .asz-fact-line { position: relative; margin: 0 0 .5rem; padding-left: 1.75rem; font-size: .9375rem; line-height: 1.5; } .asz-contact-line::before, .asz-fact-line::before { content: ""; position: absolute; left: 0; top: .25em; width: 1.15rem; height: 1.15rem; background: center/contain no-repeat; opacity: .9; } .asz-contact-line::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312d07e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } .asz-contact-line--phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312d07e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l2 5-2.5 1.5a12 12 0 0 0 5.5 5.5L16 12.5l5 2v3a2 2 0 0 1-2.2 2A17 17 0 0 1 3.5 5.2 2 2 0 0 1 5.5 3h1Z'/%3E%3C/svg%3E"); } .asz-contact-line--mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312d07e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .asz-contact-line--hours::before, .asz-fact-line::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312d07e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); } .asz-contact-card a { color: var(--wp--preset--color--primary); text-decoration: none; } .asz-contact-card a:hover { text-decoration: underline; } /* Hero-Inhalt linksbündig im Raster (Cover nutzt Fluss-Layout) */ .wp-block-cover.asz-hero .wp-block-cover__inner-container > * { max-width: none; margin-inline: 0; } .wp-block-cover.asz-hero .wp-block-cover__inner-container .asz-lead, .wp-block-cover.asz-hero .wp-block-cover__inner-container h1 { margin-inline: 0; }