/* Vorlage „Bunt“: verspielt für Kindergeburtstage – Pillen-Navigation, Konfetti, Polaroid, Wellen, Preis-Sticker.
   Hauptfarbe kommt aus --c-primary (nie hier setzen). Schrift selbst gehostet (assets/sites/fonts/). */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

.site--bunt { --c-accent: #ffb703; --c-bg: #fffaf0; --c-alt: #fff1d6; --c-card: #ffffff; --c-text: #2e2213; --c-muted: #6b5a43; --c-line: #f1dcb2; --radius: 24px; --radius-btn: 999px; --font-head: "Fredoka", "Trebuchet MS", ui-rounded, system-ui, sans-serif; --shadow: 0 8px 0 rgba(61, 38, 0, .08); }
.site--bunt .s-nav a, .site--bunt .s-btn, .site--bunt .s-card__price, .site--bunt .s-card__cat { font-family: var(--font-head); }

/* Kopf: schwebende Pille */
.site--bunt .s-header { top: 10px; background: transparent; border: 0; padding-top: 10px; }
.site--bunt .s-header__inner { width: calc(100% - 24px); min-height: 60px; padding: 6px 8px 6px 10px; border: 3px solid var(--c-text); border-radius: 999px; background: #fff; box-shadow: 0 6px 0 var(--c-text); }
.site--bunt .s-brand__initial { border-radius: 50%; background: var(--c-accent); color: var(--c-text); font-weight: 700; transform: rotate(-8deg); }
.site--bunt .s-brand__name { font-weight: 700; }
.site--bunt .s-nav { gap: 6px; }
.site--bunt .s-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.site--bunt .s-nav a:hover { background: var(--c-alt); color: var(--c-text); }
.site--bunt .s-nav .s-nav__cta:hover { background: var(--c-primary); color: var(--c-on-primary); filter: brightness(1.08); }

/* Buttons mit Kante */
.site--bunt .s-btn { border-color: var(--c-text); box-shadow: 0 5px 0 var(--c-text); font-weight: 600; transition: transform .1s, box-shadow .1s; }
.site--bunt .s-btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--c-text); filter: none; }
.site--bunt .s-btn--ghost { background: #fff; color: var(--c-text) !important; }

/* Kopfbereich: Konfetti, Polaroid-Bild auf Farbklecks */
.site--bunt .s-hero { margin-top: -70px; padding-top: calc(clamp(40px, 7vw, 90px) + 70px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='24' cy='30' r='7' fill='%23e5484d' fill-opacity='.55'/%3E%3Crect x='150' y='22' width='16' height='8' rx='3' fill='%230367d3' fill-opacity='.45' transform='rotate(30 158 26)'/%3E%3Cpath d='M92 150l10-18 10 18z' fill='%23409d1a' fill-opacity='.5'/%3E%3Ccircle cx='190' cy='160' r='5' fill='%23ffb703'/%3E%3Crect x='40' y='176' width='14' height='7' rx='3' fill='%23ffb703' transform='rotate(-25 47 180)'/%3E%3Ccircle cx='120' cy='70' r='4' fill='%230367d3' fill-opacity='.5'/%3E%3C/svg%3E"), var(--c-bg); }
.site--bunt .s-hero h1 { font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 4rem); color: var(--c-text); text-shadow: 3px 3px 0 var(--c-accent); }
.site--bunt .s-hero__kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--c-primary); color: var(--c-on-primary); transform: rotate(-2deg); letter-spacing: .04em; }
.site--bunt .s-hero__media { position: relative; }
.site--bunt .s-hero__media::before { content: ''; position: absolute; inset: -6% -4% -8% -6%; z-index: 0; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--c-accent); opacity: .55; }
.site--bunt .s-hero__media img { position: relative; z-index: 1; padding: 12px 12px 46px; border-radius: 6px; background: #fff; box-shadow: 0 16px 30px rgba(61, 38, 0, .18); transform: rotate(-3deg); }

/* Wellen über Über-uns, Anfrage und Fuß (Füllfarbe fest = Fläche des jeweiligen Abschnitts) */
.site--bunt .s-section--alt, .site--bunt .s-section--accent, .site--bunt .s-footer { position: relative; }
.site--bunt .s-section--alt, .site--bunt .s-section--accent { margin-top: 42px; }
.site--bunt .s-section--alt + .s-section--accent { margin-top: 0; }
.site--bunt .s-section--alt::before, .site--bunt .s-section--accent::before, .site--bunt .s-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='42' viewBox='0 0 120 42'%3E%3Cpath d='M0 42V22C20 0 40 0 60 22s40 22 60 0v20z' fill='%23fff1d6'/%3E%3C/svg%3E") repeat-x bottom / 120px 42px; }
.site--bunt .s-section--accent { border-top: 0; background: #ffe2a8; }
.site--bunt .s-section--accent::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='42' viewBox='0 0 120 42'%3E%3Cpath d='M0 42V22C20 0 40 0 60 22s40 22 60 0v20z' fill='%23ffe2a8'/%3E%3C/svg%3E"); }

.site--bunt .s-title { font-weight: 700; display: inline-block; }
.site--bunt .s-title::after { content: ''; display: block; height: 10px; margin-top: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23e5484d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 40px 10px; }

/* Angebote: gekippte Karten mit bunten Schatten und Preis-Sticker */
.site--bunt .s-cards { gap: 30px; }
.site--bunt .s-card { position: relative; overflow: visible; border: 3px solid var(--c-text); box-shadow: 6px 6px 0 #ffb703; transform: rotate(-1deg); transition: transform .2s; }
.site--bunt .s-card:nth-child(even) { transform: rotate(1deg); }
.site--bunt .s-card:nth-child(4n+2) { box-shadow: 6px 6px 0 #e5484d; }
.site--bunt .s-card:nth-child(4n+3) { box-shadow: 6px 6px 0 #409d1a; }
.site--bunt .s-card:nth-child(4n) { box-shadow: 6px 6px 0 #0367d3; }
.site--bunt .s-card:hover { transform: rotate(0) scale(1.02); }
.site--bunt .s-card__media { border-radius: 20px 20px 0 0; }
.site--bunt .s-card__body h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.site--bunt .s-card__cat { color: var(--c-primary); }
.site--bunt .s-card__price { position: absolute; top: -12px; right: -10px; z-index: 2; margin: 0; padding: 10px 14px; border: 3px solid var(--c-text); border-radius: 999px; background: var(--c-accent); color: var(--c-text); font-weight: 700; font-size: .98rem; transform: rotate(8deg); box-shadow: 0 4px 0 var(--c-text); }
.site--bunt .s-card__actions { margin-top: auto; padding-top: 10px; }

/* Über uns */
.site--bunt .s-area { border: 3px dashed var(--c-accent); }

/* Bewertungen als Sprechblasen */
.site--bunt .s-review { padding: 0; border: 0; background: transparent; }
.site--bunt .s-review blockquote { position: relative; margin: 8px 0 22px; padding: 18px 20px; border: 3px solid var(--c-text); border-radius: 24px; background: #fff; }
.site--bunt .s-review blockquote::after { content: ''; position: absolute; left: 28px; bottom: -15px; width: 24px; height: 24px; border-right: 3px solid var(--c-text); border-bottom: 3px solid var(--c-text); background: #fff; transform: rotate(45deg); }
.site--bunt .s-review figcaption { padding-left: 18px; font-family: var(--font-head); color: var(--c-text); }

/* Anfrage */
.site--bunt .s-form { border: 3px dashed var(--c-text); box-shadow: none; }
.site--bunt .s-form input, .site--bunt .s-form select, .site--bunt .s-form textarea { border: 2px solid var(--c-line); border-radius: 14px; }

/* Detailseite und Kalender */
.site--bunt .s-detail__media { border: 3px solid var(--c-text); box-shadow: 8px 8px 0 var(--c-accent); }
.site--bunt .s-cal__day { border-radius: 50%; }

/* Fuß mit Welle */
.site--bunt .s-footer { background: var(--c-text); color: #fff3dd; }
.site--bunt .s-footer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='42' viewBox='0 0 120 42'%3E%3Cpath d='M0 42V22C20 0 40 0 60 22s40 22 60 0v20z' fill='%232e2213'/%3E%3C/svg%3E"); }
.site--bunt .s-footer strong { font-family: var(--font-head); font-size: 1.2rem; }

@media (max-width: 560px) {
  .site--bunt .s-header__inner { width: calc(100% - 16px); padding: 4px 6px 4px 8px; }
  .site--bunt .s-brand__name { font-size: 1rem; }
  .site--bunt .s-card, .site--bunt .s-card:nth-child(even) { transform: none; }
  .site--bunt .s-card__price { right: 6px; }
}