/* ==========================================================================
   by fabienne – cakes & creations · Coming Soon
   ========================================================================== */

:root {
  /* Markenfarben */
  --cream:          #FBF3E7;
  --cream-deep:      #EEE1D1;
  --ink:            #33454D;
  --ink-soft:        #4E606A;
  --sage:           #7F856E;
  --terracotta:      #BD836A;
  --terracotta-deep: #A06A4F;
  --forest:         #2F3D31;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 760px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Ambient background: film grain, soft blobs, dot clusters
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.blob {
  position: absolute;
  z-index: 0;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(2px);
  pointer-events: none;
}

.blob--one {
  top: -10%;
  right: -18%;
  width: min(60vw, 780px);
  height: min(60vw, 780px);
  background: radial-gradient(circle at 35% 30%, var(--cream-deep), transparent 72%);
  animation: drift-one 26s var(--ease) infinite alternate;
}

.blob--two {
  bottom: -14%;
  left: -22%;
  width: min(50vw, 620px);
  height: min(50vw, 620px);
  background: radial-gradient(circle at 60% 60%, #E4D3C0, transparent 70%);
  animation: drift-two 22s var(--ease) infinite alternate;
}

@keyframes drift-one {
  from { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  to   { transform: translate(-3%, 4%) rotate(8deg) scale(1.05); border-radius: 58% 42% 40% 60% / 55% 65% 35% 45%; }
}
@keyframes drift-two {
  from { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 55% 45% 35% 65% / 40% 55% 45% 60%; }
  to   { transform: translate(4%, -3%) rotate(-10deg) scale(1.08); border-radius: 40% 60% 55% 45% / 58% 42% 60% 40%; }
}

.dots {
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(var(--terracotta) 2.4px, transparent 2.6px);
  background-size: 20px 20px;
  opacity: .38;
  pointer-events: none;
}
.dots--top    { top: 4%;    left: 5%;   transform: rotate(-6deg); }
.dots--bottom { bottom: 6%; right: 6%;  transform: rotate(8deg); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) 1.5rem clamp(3rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Eyebrow labels
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin: 0 0 1.4rem;
}

.eyebrow--center { margin-bottom: 2.2rem; }

/* --------------------------------------------------------------------------
   Hero / Logo
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .5rem;
}

.logo-wrap {
  width: min(92vw, 540px);
  margin: 0 auto 2.2rem;
}

.logo-mark { width: 100%; height: auto; overflow: visible; }
.logo-mark path { fill: var(--ink); }
.logo-mark .st0 { fill: var(--cream); }
.logo-mark .st1 {
  fill: var(--terracotta);
  transform-origin: center;
  transform-box: fill-box;
  animation: heartbeat 3.4s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.18); }
  16%      { transform: scale(1); }
  24%      { transform: scale(1.1); }
  32%      { transform: scale(1); }
}

.hero__headline {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 1.1rem;
}

.hero__text {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.1rem;
}

.hero__text--soft {
  font-size: .94rem;
  color: #A06A4F;
  max-width: 44ch;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Services / Leistungen
   -------------------------------------------------------------------------- */

.services {
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  width: 100%;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.6rem, 2vw, 1.6rem);
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  transform: translateY(14px);
}

.service.is-visible {
  animation: rise-in .7s var(--ease) forwards;
  animation-delay: calc(var(--d) * 110ms);
}

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

.service__icon {
  width: clamp(46px, 9vw, 68px);
  height: clamp(46px, 9vw, 68px);
  color: var(--ink);
  overflow: visible;
  transition: color .35s var(--ease), transform .35s var(--ease);
  animation: float 5s ease-in-out infinite;
  animation-delay: calc(var(--d) * .4s);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.service:hover .service__icon,
.service:focus-within .service__icon {
  color: var(--terracotta);
  transform: scale(1.12) rotate(-4deg);
  animation-play-state: paused;
}

.service__label {
  font-size: clamp(.72rem, 2vw, .88rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  width: 100%;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1px 1fr;
  align-items: center;
  gap: clamp(1.6rem, 5vw, 3.2rem);
  text-align: left;
}

.contact__art {
  position: relative;
  height: clamp(220px, 32vw, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__blob {
  position: absolute;
  inset: 8% 10%;
  background: radial-gradient(circle at 45% 40%, var(--cream-deep), transparent 72%);
  border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
  animation: drift-one 20s var(--ease) infinite alternate;
}

.contact__branch {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  color: var(--sage);
}

.contact__art-dots {
  position: absolute;
  left: 2%;
  bottom: 4%;
  width: 84px;
  height: 84px;
  background-image: radial-gradient(var(--terracotta) 2.2px, transparent 2.4px);
  background-size: 15px 15px;
  opacity: .55;
}

.contact__divider {
  align-self: stretch;
  width: 1px;
  background: var(--terracotta);
  opacity: .35;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 3vw, 2rem);
}

.contact__list li { display: block; }

.contact__list a {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--ink);
}

.contact__text { display: flex; flex-direction: column; gap: .15rem; }

.contact__label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
}

.contact__value {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 500;
  transition: color .2s var(--ease);
}

.contact__list a:hover .contact__value,
.contact__list a:focus-visible .contact__value {
  color: var(--terracotta-deep);
}

.contact__icon {
  flex: none;
  width: clamp(52px, 8vw, 64px);
  height: clamp(52px, 8vw, 64px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream-deep);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.contact__icon::before {
  content: "";
  display: block;
  width: 44%;
  height: 44%;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.contact__list a:hover .contact__icon,
.contact__list a:focus-visible .contact__icon {
  background-color: var(--terracotta);
  transform: scale(1.06);
}

.contact__list a:hover .contact__icon::before,
.contact__list a:focus-visible .contact__icon::before {
  background-color: var(--cream);
}

.contact__tagline {
  margin: clamp(2.2rem, 6vw, 3.2rem) 0 0;
  text-align: center;
  font-family: "Caveat", var(--font-display), cursive;
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--ink);
}

.contact__heart {
  color: var(--terracotta);
  font-size: .85em;
}

.contact__icon[data-icon="whatsapp"]::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.31-1.93 1.38-.5.07-1.06.1-1.71-.11-.39-.12-.9-.29-1.55-.57-2.72-1.17-4.5-3.9-4.63-4.08-.14-.18-1.1-1.47-1.1-2.8s.68-1.98.93-2.25c.24-.27.53-.34.71-.34l.5.01c.16 0 .38-.06.6.46.24.56.8 1.94.87 2.08.07.14.11.3.02.48-.09.18-.14.29-.27.44-.14.16-.29.35-.41.47-.14.14-.28.29-.12.56.16.27.71 1.17 1.53 1.9 1.05.93 1.94 1.22 2.21 1.36.27.14.43.11.59-.07.16-.18.68-.79.86-1.06.18-.27.36-.22.6-.13.25.09 1.58.75 1.85.88.27.14.45.2.52.32.07.12.07.68-.17 1.36Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.31-1.93 1.38-.5.07-1.06.1-1.71-.11-.39-.12-.9-.29-1.55-.57-2.72-1.17-4.5-3.9-4.63-4.08-.14-.18-1.1-1.47-1.1-2.8s.68-1.98.93-2.25c.24-.27.53-.34.71-.34l.5.01c.16 0 .38-.06.6.46.24.56.8 1.94.87 2.08.07.14.11.3.02.48-.09.18-.14.29-.27.44-.14.16-.29.35-.41.47-.14.14-.28.29-.12.56.16.27.71 1.17 1.53 1.9 1.05.93 1.94 1.22 2.21 1.36.27.14.43.11.59-.07.16-.18.68-.79.86-1.06.18-.27.36-.22.6-.13.25.09 1.58.75 1.85.88.27.14.45.2.52.32.07.12.07.68-.17 1.36Z"/></svg>');
}

.contact__icon[data-icon="mail"]::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-13Zm2.1.5 6.9 5.4 6.9-5.4H5.1ZM19 7.3l-6.62 5.19a1.5 1.5 0 0 1-1.85 0L4 7.3V18h15V7.3Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-13Zm2.1.5 6.9 5.4 6.9-5.4H5.1ZM19 7.3l-6.62 5.19a1.5 1.5 0 0 1-1.85 0L4 7.3V18h15V7.3Z"/></svg>');
}

.contact__icon[data-icon="instagram"]::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c2.72 0 3.06.01 4.12.06 1.06.05 1.79.22 2.43.47.66.26 1.21.6 1.76 1.15.5.5.9 1.1 1.15 1.76.25.64.42 1.37.47 2.43C21.99 8.94 22 9.28 22 12s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.47 2.43a4.9 4.9 0 0 1-1.15 1.76c-.5.5-1.1.9-1.76 1.15-.64.25-1.37.42-2.43.47C15.06 21.99 14.72 22 12 22s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.43-.47a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.25-.64-.42-1.37-.47-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.47-2.43.26-.66.6-1.21 1.15-1.76.5-.5 1.1-.9 1.76-1.15.64-.25 1.37-.42 2.43-.47C8.94 2.01 9.28 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.97.04-1.5.2-1.85.34-.46.18-.79.39-1.14.74-.35.35-.56.68-.74 1.14-.14.35-.3.88-.34 1.85C3.83 9.01 3.8 9.33 3.8 12s.01 2.99.06 4.04c.04.97.2 1.5.34 1.85.18.46.39.79.74 1.14.35.35.68.56 1.14.74.35.14.88.3 1.85.34 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.97-.04 1.5-.2 1.85-.34.46-.18.79-.39 1.14-.74.35-.35.56-.68.74-1.14.14-.35.3-.88.34-1.85.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.97-.2-1.5-.34-1.85a3.1 3.1 0 0 0-.74-1.14 3.1 3.1 0 0 0-1.14-.74c-.35-.14-.88-.3-1.85-.34C14.99 3.81 14.67 3.8 12 3.8Zm0 3.06a5.14 5.14 0 1 1 0 10.28 5.14 5.14 0 0 1 0-10.28Zm0 1.8a3.34 3.34 0 1 0 0 6.68 3.34 3.34 0 0 0 0-6.68Zm5.34-1.98a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c2.72 0 3.06.01 4.12.06 1.06.05 1.79.22 2.43.47.66.26 1.21.6 1.76 1.15.5.5.9 1.1 1.15 1.76.25.64.42 1.37.47 2.43C21.99 8.94 22 9.28 22 12s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.47 2.43a4.9 4.9 0 0 1-1.15 1.76c-.5.5-1.1.9-1.76 1.15-.64.25-1.37.42-2.43.47C15.06 21.99 14.72 22 12 22s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.43-.47a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.25-.64-.42-1.37-.47-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.47-2.43.26-.66.6-1.21 1.15-1.76.5-.5 1.1-.9 1.76-1.15.64-.25 1.37-.42 2.43-.47C8.94 2.01 9.28 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.97.04-1.5.2-1.85.34-.46.18-.79.39-1.14.74-.35.35-.56.68-.74 1.14-.14.35-.3.88-.34 1.85C3.83 9.01 3.8 9.33 3.8 12s.01 2.99.06 4.04c.04.97.2 1.5.34 1.85.18.46.39.79.74 1.14.35.35.68.56 1.14.74.35.14.88.3 1.85.34 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.97-.04 1.5-.2 1.85-.34.46-.18.79-.39 1.14-.74.35-.35.56-.68.74-1.14.14-.35.3-.88.34-1.85.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.97-.2-1.5-.34-1.85a3.1 3.1 0 0 0-.74-1.14 3.1 3.1 0 0 0-1.14-.74c-.35-.14-.88-.3-1.85-.34C14.99 3.81 14.67 3.8 12 3.8Zm0 3.06a5.14 5.14 0 1 1 0 10.28 5.14 5.14 0 0 1 0-10.28Zm0 1.8a3.34 3.34 0 1 0 0 6.68 3.34 3.34 0 0 0 0-6.68Zm5.34-1.98a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0Z"/></svg>');
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: clamp(3rem, 8vw, 4.5rem);
  font-size: .8rem;
  color: var(--sage);
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Reveal-on-load / reveal-on-scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.hero .reveal:nth-child(1) { transition-delay: .05s; }
.hero .reveal:nth-child(2) { transition-delay: .18s; }
.hero .reveal:nth-child(3) { transition-delay: .32s; }
.hero .reveal:nth-child(4) { transition-delay: .46s; }
.hero .reveal:nth-child(5) { transition-delay: .58s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .services__list {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
  }
  .service:nth-child(4), .service:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 420px) {
  .services__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .dots { width: 96px; height: 96px; background-size: 16px 16px; opacity: .3; }
  .dots--top    { top: 1.2rem; left: -1.4rem; }
  .dots--bottom { bottom: 1.5rem; right: -1.4rem; }
}

@media (max-width: 720px) {
  .contact__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.6rem;
  }
  .contact__art { height: 150px; }
  .contact__branch { height: 100%; opacity: .9; }
  .contact__art-dots { display: none; }
  .contact__divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }
  .contact__list { width: 100%; max-width: 320px; align-items: center; }
  .contact__list a { justify-content: center; }
  .contact__text { align-items: center; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .blob { animation: none; }
  .reveal, .service { opacity: 1 !important; transform: none !important; }
}