/* =========================================================
   Custom Styles – Malerei Schmidt
   Ergänzt Tailwind CDN um Signature-Elemente, die sich nicht
   mit Utility-Klassen abbilden lassen (Pinselstrich-SVGs,
   Farbverlauf-Texturen, Timing-Funktionen).
   ========================================================= */

:root {
  --canvas: #FAF8F3;
  --canvas-deep: #F0ECE2;
  --ink: #1B1B18;
  --primary: #1F4B43;
  --primary-light: #2E6E5F;
  --sand: #C99A5B;
  --sand-light: #E6D0A8;
  --accent: #E1552F;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--canvas);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.font-display {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
}

.font-body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Handgezeichneter Pinselstrich als Unterstreichung von Überschriften */
.brush-underline {
  position: relative;
  display: inline-block;
}
.brush-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.2em;
  height: 0.35em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 40 4, 80 18, 120 10 S 200 2, 260 12 S 290 16, 298 9' stroke='%23E1552F' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

/* Pinselstrich als Sektions-Trenner statt gerader Linie */
.brush-divider {
  width: 100%;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 150 2, 300 26, 450 14 S 750 2, 900 14 S 1100 24, 1200 12' stroke='%231F4B43' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Weicher "Farbtropfen"-Schatten hinter dem primären CTA */
.cta-glow {
  position: relative;
  isolation: isolate;
}
.cta-glow::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: var(--accent);
  border-radius: 9999px;
  opacity: 0.18;
  filter: blur(10px);
  z-index: -1;
  transition: opacity 0.3s ease, inset 0.3s ease;
}
.cta-glow:hover::before {
  opacity: 0.32;
  inset: -10px;
}

/* Roller-Textur, sehr dezent, als Hero-Hintergrund-Layer */
.roller-texture {
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 2px,
    transparent 2px,
    transparent 14px
  );
}

/* FAQ Akkordeon Pfeil-Rotation */
details.faq-item > summary {
  list-style: none;
  cursor: pointer;
}
details.faq-item > summary::-webkit-details-marker {
  display: none;
}
details.faq-item .faq-icon {
  transition: transform 0.25s ease;
}
details.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
details.faq-item[open] summary {
  color: var(--primary);
}

/* Sanftes Einblenden für scroll-reveal Elemente */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fokus-Sichtbarkeit für Tastaturnutzung (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Cookie-Hinweis Slide-In */
#cookie-hinweis {
  transform: translateY(120%);
  transition: transform 0.4s ease;
}
#cookie-hinweis.is-visible {
  transform: translateY(0);
}