/* ==========================================================================
   Herzlicht — Komponenten: Buttons, Karten, Icon-Set, Blobs, Glow
   ========================================================================== */

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .95em 1.9em;
  min-height: 48px;
  border-radius: 999px;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn:active{ transform: scale(.98); }

.btn--primary{
  background: var(--sage-dark);
  color: var(--on-dark);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover{ background: var(--sage); box-shadow: var(--shadow-md); color: var(--on-dark); }

.btn--accent{
  background: var(--terracotta);
  color: var(--on-dark);
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn--ghost{
  background: transparent;
  color: var(--sage-dark);
  border-color: oklch(34% 0.05 155 / 0.28);
}
.btn--ghost:hover{ background: var(--sage-tint); border-color: transparent; }

.btn--on-dark{
  background: var(--on-dark);
  color: var(--sage-dark);
}
.btn--on-dark:hover{ background: var(--terracotta-tint); }

/* Karten — bewusst NICHT gleichförmig, unterschiedliche Radien je Kontext */
.card{
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Icon-Set: schlanke Linien, gerundete Kappen, Herzlicht-Motiv-Familie */
.icon{ stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem; height: 3.1rem;
  border-radius: var(--radius-sm);
  background: var(--sage-tint);
  color: var(--sage-dark);
  flex: 0 0 auto;
}
.icon-tile .icon{ width: 1.6rem; height: 1.6rem; }
.icon-tile--terracotta{ background: var(--terracotta-tint); color: var(--terracotta); }
.icon-tile--dove{ background: var(--dove-tint); color: oklch(40% 0.05 235); }

/* Signature-Element 1: Herzlicht-Glow — warmer Lichtschein hinter Portraits/Fotos */
.glow-frame{
  position: relative;
  isolation: isolate;
}
.glow-frame::before{
  content: '';
  position: absolute;
  inset: -8%;
  z-index: -1;
  background:
    radial-gradient(circle at 32% 28%, oklch(80% 0.09 60 / 0.55), transparent 60%),
    radial-gradient(circle at 70% 75%, oklch(70% 0.07 150 / 0.4), transparent 62%);
  filter: blur(30px);
  border-radius: inherit;
}

/* Signature-Element 2: organische Foto-Formen statt Rechteck-Crops */
.blob-frame{
  border-radius: var(--radius-blob);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.blob-frame img{ width: 100%; height: 100%; object-fit: cover; }
.blob-frame--alt{ border-radius: 42% 58% 61% 39% / 48% 42% 58% 52%; }

/* Signature-Element 3: Sonnenstrahl-Ornament — wiederkehrendes Radial-Strahlen-Motiv */
.sunray-mark{ color: var(--terracotta); opacity: .85; }

/* Zähler */
.stat{ display: flex; flex-direction: column; gap: .2rem; }
.stat__value{
  font-family: 'Fraunces', serif;
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-weight: 600;
  color: var(--sage-dark);
  font-variant-numeric: tabular-nums;
}
.stat__label{ color: var(--text-muted); font-size: .96rem; }

/* Tags / Pills */
.pill{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em 1em;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid oklch(34% 0.05 155 / 0.14);
  font-size: .85rem;
  font-weight: 600;
  color: var(--sage-dark);
}

/* Zitat / Testimonial */
.quote{
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.75rem);
  font-weight: 500;
  color: var(--sage-dark);
  line-height: 1.45;
  font-style: italic;
}
.quote::before{ content: '„'; }
.quote::after{ content: '"'; }

/* Formulare (CF7-Kompatibilität siehe forms.css-Regeln unten) */
.field{ margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.field label{ font-weight: 600; font-size: .95rem; color: var(--sage-dark); }
.field input, .field textarea, .field select,
input[type=text], input[type=email], input[type=tel], textarea{
  font-family: inherit;
  font-size: 1rem;
  padding: .9em 1.1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid oklch(34% 0.05 155 / 0.22);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, input:focus, textarea:focus{
  border-color: var(--sage);
  box-shadow: 0 0 0 4px var(--sage-tint);
  outline: none;
}
.wpcf7-submit{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95em 1.9em; min-height: 48px; border-radius: 999px;
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 1rem;
  border: none; cursor: pointer; background: var(--terracotta); color: var(--on-dark);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wpcf7-submit:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wpcf7-spinner{ margin-left: .6em; }
.wpcf7-not-valid-tip{ color: oklch(50% 0.16 30); font-size: .85rem; margin-top: .3rem; }
.wpcf7-response-output{ border-radius: var(--radius-sm) !important; margin: 1.2rem 0 0 !important; padding: 1em 1.3em !important; }