@font-face {
font-family: 'Montserrat';
font-style:  normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/montserrat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style:  normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style:  normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
font-family: 'WindSong';
font-style:  normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/windsong-latin-500.woff2') format('woff2');
}
:root {
--color-text:           #353535;
--color-muted:          #666666;
--color-accent:         #6592a7;
--color-accent-strong:  #4f778a;
--color-accent-soft:    #e8eef2;
--color-warm:           #ce0000;
--color-warm-soft:      #fbe9e9;
--color-coral:          #ff5e46;
--color-coral-soft:     #ffdfda;
--accent:               var(--color-coral);
--accent-dark:          var(--color-warm);
--color-border:         #e5e7eb;
--color-bg:             #faf8f5;
--color-bg-alt:         #f4f0ea;
--font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--container-max:        64rem;
--container-pad:        1.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
outline: none;
}
:focus:not(:focus-visible) { outline: none; }
@media print {
#cookie-consent,
.cookie-consent,
#blazor-error-ui,
.portfolio-crossnav,
.pricing-crossnav,
.page-cta,
.portfolio-categories,
.portfolio-section__more,
.portfolio-lightbox,
.site-header__nav,
.site-header__hamburger {
display: none !important;
}
.pricing-offer,
.pricing-offer .pricing-offer__detail {
display: block !important;
}
.pricing-offer .pricing-offer__summary::after {
display: none;
}
.portfolio-grid__item {
box-shadow: none !important;
transform: none !important;
}
}
p { margin: 0 0 0.85rem 0; }
p.lead { font-size: 1.1rem; }
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.2;
margin: 0 0 0.6rem 0;
letter-spacing: -0.005em;
}
h2 { margin-top: 2.25rem; }
h3 { margin-top: 1.5rem; }
h2:first-child, h3:first-child { margin-top: 0; }
h1 {
font-size: 2rem;
font-weight: 600;
color: var(--color-accent-strong);
}
h2 {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-accent);
}
h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-accent);
}
a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page__body { flex: 1 0 auto; padding-block: 2.5rem; }
.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
left: 0.5rem;
top: 0.5rem;
width: auto;
height: auto;
padding: 0.5rem 1rem;
background: var(--color-accent);
color: #fff;
z-index: 1001;
}
.site-header {
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.1rem;
}
.site-header__brand {
display: inline-block;
text-decoration: none;
line-height: 0;
flex-shrink: 0;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__logo {
display: block;
height: 104px;
width: auto;
aspect-ratio: 946 / 236;
mix-blend-mode: multiply;
}
@media (max-width: 1059px) {
.site-header__logo { height: 64px; }
}
.site-header__toggle { display: none; }
.site-header__hamburger { display: none; cursor: pointer; }
.site-header__nav {
display: flex;
gap: 1.5rem;
}
@media (min-width: 1060px) {
.site-header .site-header__nav .lang-switcher {
margin-inline-start: 1rem;
flex-shrink: 0;
flex-wrap: nowrap;
}
}
.site-header__link {
color: var(--color-text);
text-decoration: none;
padding-block: 0.25rem;
border-bottom: 2px solid transparent;
font-weight: 500;
white-space: nowrap;
}
.site-header__link:hover {
color: var(--color-warm);
border-bottom-color: var(--color-border);
}
.site-header__link.active {
color: var(--color-warm);
border-bottom-color: var(--color-warm);
font-weight: 600;
}
.site-header__group {
position: relative;
}
.site-header__link--group {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.site-header__caret {
font-size: 0.7em;
color: var(--color-muted);
line-height: 1;
}
.site-header__submenu {
list-style: none;
margin: 0;
padding: 0;
}
.site-header__sublink {
display: block;
color: var(--color-text);
text-decoration: none;
font-weight: 500;
}
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
color: var(--color-warm);
}
.site-header__sublink.is-active {
color: var(--color-warm);
font-weight: 600;
}
@media (min-width: 1060px) {
.site-header__submenu {
position: absolute;
top: 100%;
left: -0.6rem;
min-width: 220px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
padding: 0.4rem 0;
margin-top: 0.4rem;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 100;
}
.site-header__group:hover .site-header__submenu,
.site-header__group:focus-within .site-header__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header__sublink {
padding: 0.5rem 1rem;
}
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
background: var(--color-bg-alt);
}
}
@media (max-width: 1059px) {
.site-header__hamburger {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 1.75rem;
height: 1.25rem;
}
.site-header__hamburger span {
display: block;
height: 2px;
background: var(--color-accent);
border-radius: 1px;
}
.site-header__nav {
position: fixed;
top: calc(64px + 2.2rem + 1px);
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
gap: 0;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
overflow-y: auto;
overscroll-behavior: contain;
z-index: 100;
display: none;
}
.site-header__toggle:checked ~ .site-header__nav {
display: flex;
}
.site-header__nav .site-header__link {
padding: 0.75rem var(--container-pad);
border-bottom: 1px solid var(--color-border);
}
.site-header__caret { display: none; }
.site-header__submenu {
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.site-header__sublink {
padding: 0.55rem var(--container-pad) 0.55rem calc(var(--container-pad) + 1rem);
font-size: 0.95rem;
}
}
.site-footer {
background: var(--color-coral-soft);
border-top: 3px solid var(--color-coral);
margin-top: 3rem;
color: var(--color-text);
}
.site-footer__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 2rem;
padding-block: 2.5rem;
}
.site-footer__column p { margin: 0 0 0.5rem 0; }
.site-footer__brand {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--color-accent);
}
.site-footer__brand-tagline { color: var(--color-muted); }
.site-footer__heading {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
margin-bottom: 0.6rem;
}
.site-footer__label { color: var(--color-muted); margin-right: 0.3rem; }
.site-footer__legal {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.site-footer__bottom {
border-top: 1px solid var(--color-border);
padding-block: 1.1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem 1.5rem;
font-size: 0.85rem;
color: var(--color-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit a { color: var(--color-muted); }
.reg {
font-size: 0.65em;
vertical-align: super;
line-height: 0;
}
@media (max-width: 700px) {
.site-footer__bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
}
.site-page {}
.site-page--narrow { max-width: 42rem; }
.site-page--wide   { max-width: var(--container-max); }
.site-page--with-aside {
max-width: var(--container-max);
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2.5rem;
}
@media (max-width: 800px) {
.site-page--with-aside { grid-template-columns: 1fr; }
}
.site-page__head { margin-bottom: 1.5rem; }
.site-page__article { min-width: 0; }
.site-page__aside { color: var(--color-muted); font-size: 0.95rem; }
.cookie-consent {
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--color-accent);
color: #fff;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
padding-block: 1.1rem;
}
.cookie-consent__heading {
font-size: 1rem;
margin: 0 0 0.3rem 0;
color: #fff;
}
.cookie-consent__body { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.cookie-consent__body a { color: #fff; text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-consent__btn {
font: inherit;
padding: 0.5rem 1rem;
border-radius: 4px;
border: 1px solid #fff;
cursor: pointer;
background: transparent;
color: #fff;
}
.cookie-consent__btn--accept { background: #fff; color: var(--color-accent); font-weight: 600; }
.cookie-consent__btn:hover { filter: brightness(1.1); }
@media (max-width: 640px) {
.cookie-consent__inner { grid-template-columns: 1fr; }
}
#blazor-error-ui {
display: none;
background: #fff3cd;
border-top: 1px solid #ffc107;
color: #1f2937;
padding: 0.75rem 1rem;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 1100;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.home-hero {
padding-block: 2rem 1.5rem;
}
.home-hero__inner {}
.home-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
font-weight: 500;
color: var(--color-muted);
margin: 0 0 0.85rem 0;
}
.home-hero__eyebrow-mark {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
vertical-align: middle;
margin-right: 0.2rem;
background: var(--color-coral);
border-radius: 47% 53% 70% 30% / 45% 51% 49% 55%;
}
.home-hero__headline {
font-family: "WindSong", "Brush Script MT", "Lucida Handwriting", cursive;
font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
font-weight: 600;
line-height: 1.2;
color: var(--color-accent-strong);
margin: 0 0 1.1rem 0;
}
.home-hero__headline em {
font-style: normal;
color: var(--color-warm);
font-weight: 600;
}
.home-hero__subline { font-size: 1.15rem; margin: 0 0 1.75rem 0; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-hero__cta {
display: inline-block;
margin-left: 0.6rem;
padding: 0.45rem 1.1rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
text-decoration: none;
background: var(--color-warm);
color: #fff;
border: 1px solid var(--color-warm);
vertical-align: baseline;
transition: filter 0.15s ease;
white-space: nowrap;
}
.home-hero__cta:hover {
filter: brightness(1.07);
text-decoration: none;
}
.home-promises { margin-top: 2.5rem; }
.home-promises__grid {
list-style: none;
padding: 0;
margin: 1.25rem 0 1.5rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.25rem;
}
.home-promises__item {
padding: 1.25rem 1.4rem;
background: var(--color-bg-alt);
border-top: 2px solid var(--color-warm);
border-radius: 2px;
}
.home-promises__item p { margin: 0; }
.home-promises__closing { margin-top: 0.5rem; }
.home-cta {
margin-top: 2.5rem;
padding: 1.5rem;
background: var(--color-bg-alt);
border-radius: 4px;
}
.home-cta__intro { margin-bottom: 0.6rem; }
.home-cta__signature { margin-top: 0.8rem; color: var(--color-muted); }
.home-services { margin-top: 2.5rem; }
.home-services__grid {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.25rem;
}
.home-services__card {
padding: 1.25rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-bg);
}
.home-services__card h3 { margin: 0 0 0.4rem 0; font-size: 1.05rem; }
.home-services__card h3 a { text-decoration: none; }
.home-services__card h3 a:hover { text-decoration: underline; }
.home-services__card p { margin: 0; color: var(--color-text); font-size: 0.95rem; }
.process { margin: 3rem 0 1rem; text-align: center; }
.process > h2 { margin: 0; }
.process__lead {
max-width: 48ch;
margin: 0.6rem auto 2.4rem;
color: var(--color-muted);
}
.process__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1.5rem;
}
@media (max-width: 860px) { .process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .process__steps { grid-template-columns: 1fr; } }
.process__step { margin: 0; }
.process__icon {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto 1.1rem;
display: grid;
place-items: center;
color: var(--color-accent-strong);
}
.process__icon::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 38% 33%,
rgba(255, 94, 70, 0.34),
rgba(255, 94, 70, 0.20) 55%,
rgba(255, 94, 70, 0.06));
border-radius: 47% 53% 70% 30% / 45% 51% 49% 55%;
z-index: 0;
}
.process__step:nth-child(2) .process__icon::before { border-radius: 63% 37% 41% 59% / 56% 39% 61% 44%; }
.process__step:nth-child(3) .process__icon::before { border-radius: 38% 62% 56% 44% / 53% 58% 42% 47%; }
.process__step:nth-child(4) .process__icon::before { border-radius: 55% 45% 38% 62% / 42% 61% 39% 58%; }
.process__icon svg {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
}
.process__num {
position: absolute;
z-index: 2;
top: 0;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
display: grid;
place-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.process__step h3 {
font-size: 1.05rem;
margin: 0 0 0.35rem;
color: var(--color-accent-strong);
}
.process__step p {
margin: 0 auto;
max-width: 30ch;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-text);
}
:root {
--photo-slider-bg:             var(--color-bg-alt);
--photo-slider-radius:         4px;
--photo-slider-caption-radius: 3px;
--photo-slider-focus:          var(--color-warm);
}
.portfolio-gallery__empty { font-size: 0.95rem; color: var(--color-muted); margin: 1.5rem 0; }
.portfolio-back {
margin-top: 2rem;
font-size: 0.95rem;
color: var(--color-muted);
}
.home-highlights        { margin-block: 1rem 3rem; }
.home-highlights__more  { margin-top: 1rem; text-align: right; font-size: 0.95rem; }
.portfolio-categories {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 1.5rem 0 2.5rem;
padding: 1rem 1.25rem;
background: var(--color-bg-alt);
border-left: 4px solid var(--color-coral);
border-radius: 4px;
}
.portfolio-categories__chip {
display: inline-block;
padding: 0.55rem 1.1rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-accent-strong);
text-decoration: none;
font-weight: 500;
line-height: 1.2;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.portfolio-categories__chip:hover,
.portfolio-categories__chip:focus-visible {
background: var(--color-accent-strong);
border-color: var(--color-accent-strong);
color: #fff;
transform: translateY(-1px);
}
.portfolio-section {
padding-block: 2.5rem;
border-top: 1px solid var(--color-border);
}
.portfolio-section:first-of-type {
border-top: none;
padding-top: 0.5rem;
}
.portfolio-section__head {
margin-bottom: 1.5rem;
}
.portfolio-section__title {
margin: 0 0 0.4rem 0;
font-size: 1.6rem;
}
.portfolio-section__title-link {
color: inherit;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
}
.portfolio-section__title-link:hover,
.portfolio-section__title-link:focus-visible {
color: var(--color-warm);
border-bottom-color: var(--color-warm);
}
.portfolio-section__teaser {
margin: 0;
max-width: 50rem;
color: var(--color-text);
}
.portfolio-section__more {
margin: 1.25rem 0 0;
text-align: right;
}
.portfolio-section__cta {
display: inline-block;
padding: 0.7rem 1.5rem;
background: var(--color-coral);
color: #fff;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
line-height: 1.2;
transition: background 0.15s ease, transform 0.15s ease;
}
.portfolio-section__cta:hover,
.portfolio-section__cta:focus-visible {
background: var(--color-warm);
color: #fff;
transform: translateY(-1px);
}
.portfolio-crossnav {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.portfolio-crossnav__heading {
margin: 0 0 1rem;
font-size: 1.2rem;
color: var(--color-accent-strong);
}
.portfolio-crossnav__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media (max-width: 800px) {
.portfolio-crossnav__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.portfolio-crossnav__cards { grid-template-columns: 1fr; }
}
.portfolio-crossnav__card {
display: block;
padding: 1rem 1.2rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-accent-strong);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.portfolio-crossnav__card:hover,
.portfolio-crossnav__card:focus-visible {
background: var(--color-accent-strong);
border-color: var(--color-accent-strong);
color: #fff;
transform: translateY(-2px);
}
.portfolio-crossnav__card-label {
display: block;
font-size: 0.8rem;
color: var(--color-muted);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 0.15s ease;
}
.portfolio-crossnav__card-title {
display: block;
font-weight: 500;
font-size: 1.05rem;
}
.portfolio-crossnav__card:hover .portfolio-crossnav__card-label,
.portfolio-crossnav__card:focus-visible .portfolio-crossnav__card-label {
color: rgba(255, 255, 255, 0.75);
}
.portfolio-crossnav__overview {
margin: 1.5rem 0 0;
text-align: center;
font-size: 0.95rem;
}
.pricing-section {
margin-block: 2.5rem;
padding: 2rem 1.5rem;
border-top: 4px solid var(--color-coral);
border-radius: 4px;
}
.pricing-section--artist {
background: var(--color-bg-alt);
}
.pricing-section__head {
margin-bottom: 1.5rem;
}
.pricing-section__title {
margin: 0 0 0.4rem 0;
font-size: 1.6rem;
}
.pricing-section__intro {
margin: 0 0 1rem 0;
max-width: 50rem;
}
.pricing-section__vat {
display: inline-block;
margin: 0;
padding: 0.5rem 1rem;
font-size: 0.95rem;
border-radius: 999px;
border: 1px solid currentColor;
}
.pricing-section__vat--excl {
color: #8a3a00;
background: #fff1e7;
border-color: #f0c8a8;
}
.pricing-section__vat--incl {
color: #1f5a36;
background: #e7f4ec;
border-color: #b8d9c4;
}
.pricing-section__vat strong { font-weight: 700; }
.pricing-brief { max-width: 46rem; }
.pricing-brief__label {
margin: 1.5rem 0 0.4rem;
font-weight: 700;
}
.pricing-brief ul {
margin: 0;
padding-left: 1.3rem;
line-height: 1.8;
}
.pricing-brief__vat {
margin: 0.6rem 0 0;
font-size: 0.9rem;
color: var(--color-muted);
}
.pricing-brief__included {
margin: 0;
line-height: 1.7;
}
.pricing-brief__individual {
margin: 1.5rem 0 0;
}
.pricing-offers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pricing-offer {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
overflow: hidden;
}
.pricing-section--artist .pricing-offer {
background: var(--color-bg);
}
.pricing-offer__summary {
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
font-weight: 500;
}
.pricing-offer__summary::-webkit-details-marker { display: none; }
.pricing-offer__summary::after {
content: "+";
font-family: var(--font-display);
font-size: 1.4rem;
line-height: 1;
color: var(--color-accent);
width: 1.5rem;
text-align: center;
transition: transform 0.15s ease;
}
.pricing-offer[open] > .pricing-offer__summary::after {
content: "−";
}
.pricing-offer__summary:hover {
background: var(--color-bg-alt);
}
.pricing-offer__title {
font-size: 1.05rem;
}
.pricing-offer__price {
font-weight: 700;
color: var(--color-accent);
font-size: 1.05rem;
text-align: right;
}
.pricing-offer__vat {
display: inline-block;
margin-left: 0.35rem;
font-weight: 400;
color: var(--color-muted);
font-size: 0.82em;
white-space: nowrap;
}
.pricing-offer__detail {
padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--color-border);
padding-top: 1.1rem;
}
.pricing-offer__detail ul {
margin: 0 0 0.5rem 0;
padding-left: 1.2rem;
}
.pricing-offer__options-label {
margin-top: 1rem;
margin-bottom: 0.3rem;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
}
.pricing-closing { margin-top: 1.5rem; font-style: italic; color: var(--color-muted); }
.pricing-section__lead {
margin: 0 0 1.5rem 0;
max-width: 50rem;
font-size: 1.05rem;
color: var(--color-text);
}
.pricing-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin: 2rem 0 2.5rem;
}
@media (max-width: 900px) {
.pricing-overview { grid-template-columns: 1fr; }
}
.pricing-overview__card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.5rem;
border: 1px solid var(--color-border);
border-top: 4px solid var(--color-coral);
border-radius: 4px;
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-top-color 0.15s ease;
}
.pricing-overview__card--artist {
background: var(--color-bg-alt);
}
.pricing-overview__card:hover,
.pricing-overview__card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
border-top-color: var(--color-warm);
}
.pricing-overview__card-label {
font-size: 0.8rem;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
.pricing-overview__card-title {
margin: 0;
font-size: 1.2rem;
color: var(--color-accent-strong);
font-weight: 600;
line-height: 1.3;
}
.pricing-overview__card-teaser {
margin: 0;
color: var(--color-text);
font-size: 0.95rem;
flex-grow: 1;
}
.pricing-overview__card-cta {
margin-top: 0.25rem;
color: var(--color-warm);
font-weight: 500;
}
.pricing-crossnav {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.pricing-crossnav__heading {
margin: 0 0 1rem;
font-size: 1.2rem;
color: var(--color-accent-strong);
}
.pricing-crossnav__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.pricing-crossnav__cards { grid-template-columns: 1fr; }
}
.pricing-crossnav__card {
display: block;
padding: 1rem 1.2rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-accent-strong);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pricing-crossnav__card:hover,
.pricing-crossnav__card:focus-visible {
background: var(--color-accent-strong);
border-color: var(--color-accent-strong);
color: #fff;
transform: translateY(-2px);
}
.pricing-crossnav__card-label {
display: block;
font-size: 0.8rem;
color: var(--color-muted);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 0.15s ease;
}
.pricing-crossnav__card-title {
display: block;
font-weight: 500;
font-size: 1.05rem;
}
.pricing-crossnav__card:hover .pricing-crossnav__card-label,
.pricing-crossnav__card:focus-visible .pricing-crossnav__card-label {
color: rgba(255, 255, 255, 0.75);
}
.pricing-crossnav__overview {
margin: 1.5rem 0 0;
text-align: center;
font-size: 0.95rem;
}
.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.is-visible {
opacity: 1;
transform: none;
transition: none;
}
}
.js .stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.js .stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.js .stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.js .stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.js .stagger > .reveal:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
.js .stagger > .reveal { transition-delay: 0s !important; }
}
.page-cta {
margin: 2rem 0 0;
text-align: center;
}
.page-cta__button {
display: inline-block;
padding: 0.85rem 1.8rem;
background: var(--color-coral);
color: #fff;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
font-size: 1.02rem;
transition: background 0.15s ease, transform 0.15s ease;
}
.page-cta__button:hover,
.page-cta__button:focus-visible {
background: var(--color-warm);
color: #fff;
transform: translateY(-1px);
}
.page-cta__button--soft {
background: transparent;
color: var(--color-warm);
border: 1px solid var(--color-coral);
}
.page-cta__button--soft:hover,
.page-cta__button--soft:focus-visible {
background: var(--color-coral-soft);
color: var(--color-warm);
border-color: var(--color-warm);
}
.anfrage-helfer {
max-width: 56rem;
margin: 0 auto;
text-align: center;
padding: 1.5rem 0 1rem;
}
.anfrage-helfer__eyebrow {
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-muted);
margin: 0 0 0.85rem 0;
}
.anfrage-helfer__eyebrow-mark {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
vertical-align: middle;
margin-right: 0.2rem;
background: var(--color-coral);
border-radius: 47% 53% 70% 30% / 45% 51% 49% 55%;
}
.anfrage-helfer__headline {
font-size: clamp(1.6rem, 2.2vw + 0.9rem, 2.2rem);
font-weight: 600;
line-height: 1.2;
color: var(--color-accent-strong);
margin: 0 0 0.6rem 0;
}
.anfrage-helfer__audience {
display: inline-block;
margin: 0 auto 1rem;
padding: 0.25rem 0.75rem;
background: var(--color-coral-soft);
color: var(--color-warm);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
}
.anfrage-helfer__lead {
max-width: 56ch;
margin: 0 auto;
color: var(--color-text);
line-height: 1.6;
}
.assistant {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
gap: 2rem;
align-items: start;
margin: 1.5rem 0 2rem;
}
@media (max-width: 880px) {
.assistant {
grid-template-columns: 1fr;
gap: 1.4rem;
}
}
.assistant__questions {
display: grid;
gap: 1.8rem;
min-width: 0;
}
.assistant__group {
border: none;
padding: 0;
margin: 0;
min-width: 0;
}
.assistant__legend {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-accent-strong);
margin: 0 0 0.7rem 0;
padding: 0;
}
.assistant__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.6rem;
}
.assistant__card {
position: relative;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 4px;
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.assistant__card:hover,
.assistant__card:focus-visible {
border-color: var(--color-coral);
outline: none;
}
.assistant__card.is-active {
border-color: var(--color-coral);
background: var(--color-coral-soft);
}
.assistant__card-check {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
background: transparent;
border: 1.5px solid var(--color-border);
border-radius: 47% 53% 70% 30% / 45% 51% 49% 55%;
transition: background 0.15s ease, border-color 0.15s ease;
position: relative;
}
.assistant__card.is-active .assistant__card-check {
background: var(--color-coral);
border-color: var(--color-coral);
}
.assistant__card.is-active .assistant__card-check::after {
content: "";
position: absolute;
inset: 0;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
width: 0.32rem;
height: 0.55rem;
margin: auto;
top: -0.1rem;
transform: rotate(45deg);
}
.assistant__card-label {
font-size: 0.95rem;
line-height: 1.3;
}
.assistant__optional-toggle {
appearance: none;
border: 1px dashed var(--color-border);
background: transparent;
padding: 0.7rem 1rem;
border-radius: 4px;
cursor: pointer;
font: inherit;
color: var(--color-accent-strong);
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: start;
transition: border-color 0.15s ease, color 0.15s ease;
}
.assistant__optional-toggle:hover,
.assistant__optional-toggle:focus-visible {
border-color: var(--color-coral);
color: var(--color-warm);
outline: none;
}
.assistant__optional-chevron {
transition: transform 0.2s ease;
}
.assistant__optional-toggle.is-open .assistant__optional-chevron {
transform: rotate(180deg);
}
.assistant__optionals {
display: grid;
gap: 1.6rem;
padding-top: 0.6rem;
}
.assistant__optional-hint {
margin: 0;
font-size: 0.88rem;
color: var(--color-muted);
}
.assistant__freitext {
width: 100%;
box-sizing: border-box;
padding: 0.6rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 4px;
font: inherit;
background: var(--color-bg-alt);
resize: vertical;
min-height: 4rem;
}
.assistant__freitext:focus {
outline: none;
border-color: var(--color-coral);
background: var(--color-bg);
}
.assistant__preview {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-coral);
border-radius: 4px;
padding: 1.2rem 1.1rem;
position: sticky;
top: 1rem;
align-self: start;
}
@media (max-width: 880px) {
.assistant__preview { position: static; }
}
.assistant__preview-title {
margin: 0 0 0.6rem;
font-size: 0.95rem;
color: var(--color-accent-strong);
}
.assistant__preview-empty {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--color-muted);
font-style: italic;
}
.assistant__preview-text {
margin: 0 0 0.7rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--color-text);
}
.assistant__preview-hint {
margin: 0 0 1rem;
font-size: 0.82rem;
color: var(--color-muted);
}
.assistant__submit {
appearance: none;
width: 100%;
padding: 0.75rem 1rem;
background: var(--color-warm);
color: #fff;
border: 1px solid var(--color-warm);
border-radius: 4px;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, transform 0.12s ease;
}
.assistant__submit:hover:not(:disabled),
.assistant__submit:focus-visible:not(:disabled) {
background: #b00000;
border-color: #b00000;
outline: none;
}
.assistant__submit:disabled {
background: var(--color-bg-alt);
color: var(--color-muted);
border-color: var(--color-border);
cursor: not-allowed;
}
.assistant__submit-hint {
margin: 0.5rem 0 0;
font-size: 0.82rem;
color: var(--color-muted);
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.assistant__card,
.assistant__card-check,
.assistant__optional-toggle,
.assistant__optional-chevron,
.assistant__submit { transition: none !important; }
}
.preview-badge {
position: fixed;
top: 0.6rem;
right: 0.6rem;
z-index: 1000;
padding: 0.25rem 0.75rem;
background: var(--color-coral);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transform: rotate(2deg);
pointer-events: none;
}
.portfolio-hero { width: 100%; line-height: 0; margin-bottom: 2.5rem; overflow: hidden; }
.portfolio-hero__img {
display: block;
width: 100%;
height: clamp(220px, 34vw, 400px);
object-fit: cover;
animation: ken-burns 18s ease-out both;
}
@keyframes ken-burns {
from { transform: scale(1); }
to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.portfolio-hero__img { animation: none; }
}
#kontaktformular { scroll-margin-top: 1.5rem; }
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1.5rem 2rem;
margin: 1.5rem 0 2.5rem;
}
.contact-info-grid__card { margin: 0; }
.contact-info-grid__card h2 {
font-size: 1.05rem;
margin: 0 0 0.4rem;
}
.contact-info-grid__card p { margin: 0; }
.contact-channels {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.4rem;
}
.contact-channels .label { color: var(--color-muted); margin-right: 0.5rem; }
.terms-source {
margin-top: 2rem;
font-size: 0.85rem;
color: var(--color-muted);
font-style: italic;
}
.portrait-intro {
display: flex;
flex-wrap: wrap;
gap: 1.75rem;
align-items: center;
margin-bottom: 2rem;
}
.portrait-intro > picture {
flex: 0 0 220px;
display: block;
line-height: 0;
}
.portrait-intro > picture > img {
width: 100%;
height: auto;
border-radius: 50%;
display: block;
}
.portrait-intro .lead {
flex: 1 1 16rem;
margin: 0;
}
@media (max-width: 480px) {
.portrait-intro { gap: 1.25rem; }
.portrait-intro > picture { flex: 0 0 160px; margin-inline: auto; }
}
.about-cta {
margin-top: 2rem;
padding: 1.5rem;
background: var(--color-bg-alt);
border-radius: 4px;
}
.contact-form { margin-top: 1.5rem; }
.contact-form__sent {
padding: 1.25rem;
background: #e6f4ea;
border: 1px solid #b6e0bc;
border-radius: 4px;
color: #1a4d2a;
}
.contact-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
@media (max-width: 640px) {
.contact-form__grid { grid-template-columns: 1fr; }
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form-field--full { grid-column: 1 / -1; }
.form-field > span {
font-size: 0.9rem;
color: var(--color-text);
}
.form-field.is-required > span::after {
content: " *";
color: #b00020;
}
.form-field input,
.form-field textarea {
font: inherit;
padding: 0.55rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 3px;
background: var(--color-bg);
color: var(--color-text);
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.form-field__error {
color: #b00020;
font-size: 0.85rem;
}
.contact-form__error {
padding: 0.75rem 1rem;
background: #fdecea;
border: 1px solid #f5c2c0;
border-radius: 3px;
color: #6b1414;
}
.contact-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.contact-form__required-footnote {
margin-left: auto;
font-size: 0.85rem;
color: var(--color-muted);
}
.btn-primary,
.btn-secondary {
font: inherit;
padding: 0.6rem 1.2rem;
border-radius: 4px;
cursor: pointer;
border: 1px solid currentColor;
}
.btn-primary {
background: var(--color-warm);
border-color: var(--color-warm);
color: #fff;
font-weight: 600;
}
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn-secondary {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }