:root {
  --bg-primary: #f3ede2;
  --bg-secondary: #ece2d2;
  --surface: #fffaf1;
  --surface-strong: #fffdf8;
  --text-main: #1f2328;
  --text-muted: #4a3f31;
  --line-soft: #d6ccbe;
  --accent-hot: #a04a28;
  --accent-cool: #2f5d59;
  --accent-sand: #ddbe8a;
  --radius-xl: 1rem;
  --radius-lg: 0.7rem;
  --shadow-soft: 0 12px 26px rgba(31, 35, 40, 0.14);
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Coming Soon", casual, cursive;
  --font-script: "Segoe Script", "Brush Script MT", "Lucida Handwriting", "Bradley Hand", cursive;
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --paper-strip: url("assets/nav-paper.jpg");
  --paper-grain: url("assets/hero-paper-texture.jpg");
  --edge-top: url("assets/paper-edge-top.jpg");
  --edge-bottom: url("assets/paper-edge-bottom.jpg");
  --edge-left: url("assets/paper-edge-left.jpg");
  --edge-right: url("assets/paper-edge-right.jpg");
  /* Nahtloser Leo-Streifen mit gerissener Papierkante,
     erzeugt von assets/build-leo-strip.ps1. */
  --leo-bullet: url("assets/hero-leo-strip.png");
  --leo-edge: url("assets/hero-leo-strip-vertical.png");
  --leo-texture: url("assets/hero-leo-tile.jpg");
  /* Lange, unregelmaessige Fransenkanten aus assets/build-denim-edges.ps1. */
  --denim-bottom: url("assets/denim-edge-bottom.png");
  --denim-right: url("assets/denim-edge-right.png");
  --plumeria: url("assets/plumeria.png");
  --brush-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70' preserveAspectRatio='none'%3E%3Cpath fill='%23141210' d='M8 22C40 12 70 20 104 15 138 10 170 19 212 13l2 39c-38 8-72-2-106 3-34 5-66-5-98 2z'/%3E%3Cpath fill='%23141210' d='M2 30c4-3 9-4 14-3l-1 9c-5 1-10 0-14-2z'/%3E%3Cpath fill='%23141210' d='M208 23c5-2 9-2 13 0l-1 10c-4 1-8 0-12-2z'/%3E%3Cellipse cx='62' cy='59' rx='10' ry='2.6' fill='%23141210' opacity='.55'/%3E%3Cellipse cx='152' cy='10' rx='12' ry='2.4' fill='%23141210' opacity='.5'/%3E%3C/svg%3E");
  --brush-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22' preserveAspectRatio='none'%3E%3Cpath fill='%23141210' d='M6 9C46 3 92 15 132 8 168 2 196 12 214 6l2 9c-20 7-48-3-84 3-38 7-84-5-124 1z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-primary);
  background-image:
    url("assets/splatter-fine.png"),
    url("assets/splatter.png"),
    linear-gradient(140deg, rgba(249, 244, 233, 0.62), rgba(243, 237, 226, 0.74)),
    url("assets/shop-global-bg.jpg");
  background-size: 760px 760px, 1200px 1200px, cover, cover;
  background-position: 90px 40px, left top, center, top center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed, fixed;
  line-height: 1.6;
}

body::after {
  content: "";
  position: fixed;
  right: -160px;
  top: 170px;
  width: 620px;
  height: 620px;
  z-index: -1;
  opacity: 0.18;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(125, 102, 67, 0.25) 26% 27%, transparent 27% 38%),
    repeating-conic-gradient(from 0deg, rgba(125, 102, 67, 0.2) 0deg 5deg, transparent 5deg 10deg);
  border-radius: 50%;
  filter: blur(0.2px);
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--text-main);
  color: #ffffff;
  z-index: 20;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.shop-header,
.hero,
.studio-intro,
.shop-preview,
.story,
.gallery,
.blog-preview,
.newsletter,
.contact,
.site-footer {
  width: min(1440px, calc(100% - 1.5rem));
  margin: 0 auto;
}

.shop-header {
  margin-top: 0.5rem;
  padding: 0 0 0.3rem;
  border: 0;
  border-radius: 0;
  background: none;
  display: grid;
  gap: 0.3rem;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

/* Orientalisches Lotus-Mandala rechts am Rand. Liegt ueber dem
   Speichenrad (::after), die Menueleiste bleibt klickbar. */
.shop-header::before {
  content: "";
  position: absolute;
  right: 2%;
  bottom: -38px;
  width: clamp(210px, 24vw, 320px);
  aspect-ratio: 1;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
  background-image:
    url("assets/header-mandala.png"),
    radial-gradient(
      circle at 50% 52%,
      rgba(58, 42, 24, 0.32) 0 34%,
      rgba(58, 42, 24, 0.16) 52%,
      rgba(58, 42, 24, 0) 70%
    );
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: contain, 108% 108%;
  filter: drop-shadow(0 7px 11px rgba(40, 28, 16, 0.45));
  animation: header-mandala-spin 45s linear infinite;
  transition: opacity 0.6s ease;
}

.shop-header:hover::before {
  opacity: 1;
}

@keyframes header-mandala-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.shop-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: -46px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  opacity: 0.16;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(120, 98, 64, 0.4) 28% 29%, transparent 29% 38%),
    repeating-conic-gradient(from 0deg, rgba(120, 98, 64, 0.38) 0deg 5deg, transparent 5deg 11deg);
}

.header-brandbar {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 0.2rem 0.8rem 0.55rem;
}

.brand-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5e4f3e;
  font-family: var(--font-hand);
}

.brand {
  display: inline-flex;
  font-family: var(--font-hand);
  font-size: 2.15rem;
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 700;
  text-decoration: none;
  color: #211a14;
  text-shadow: 0 1px 0 #fff7ea;
}

.brand-logo {
  display: block;
  width: clamp(160px, 22vw, 230px);
  height: auto;
}

.header-nav {
  position: relative;
  z-index: 1;
  margin-inline: -1rem;
  min-height: 68px;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: var(--paper-strip);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  filter: drop-shadow(0 7px 9px rgba(31, 35, 40, 0.2));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.1rem, 0.6vw, 0.35rem);
  flex-wrap: nowrap;
}

.header-nav a,
.button,
.filter-chips a {
  border-radius: 0;
  text-decoration: none;
}

.header-nav a {
  position: relative;
  color: #191410;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* Sieben Punkte muessen in eine Zeile passen, ohne die Papierbahn zu sprengen. */
  font-size: clamp(0.78rem, 1.35vw, 1.02rem);
  padding: 0.4rem clamp(0.3rem, 0.9vw, 0.85rem);
  border-radius: 0;
  font-family: var(--font-hand);
  line-height: 1.15;
  background-repeat: no-repeat;
  background-position: center;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.header-nav a:nth-child(odd) {
  transform: rotate(-1.4deg);
}

.header-nav a:nth-child(even) {
  transform: rotate(1.2deg);
}

.header-nav a:hover,
.header-nav a:focus-visible {
  background-color: transparent;
  background-image: var(--brush-line);
  background-size: 100% 0.42em;
  background-position: center bottom 0.05em;
}

.header-nav a[aria-current="page"],
.header-nav a[aria-current="page"]:hover,
.header-nav a[aria-current="page"]:focus-visible {
  color: #fff6e6;
  background-image: var(--brush-block);
  background-size: 100% 122%;
  background-position: center;
}

.button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.72rem 1.6rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--brush-block), linear-gradient(#141210, #141210);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 128%, 100% 64%;
  filter: drop-shadow(0 6px 8px rgba(31, 35, 40, 0.3));
  color: #fff6e6;
  font-family: var(--font-hand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transform: rotate(-0.9deg);
  transition: transform 0.2s ease, background-size 0.2s ease;
}

/* Mini-Plumeria oben rechts auf dem Strich. */
.button::after {
  content: "";
  position: absolute;
  top: -0.65rem;
  right: -0.75rem;
  width: clamp(24px, 3.2vw, 32px);
  aspect-ratio: 1;
  background: var(--plumeria) center / contain no-repeat;
  transform-origin: 60% 70%;
  animation: button-bud 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes button-bud {
  0%,
  100% {
    transform: rotate(-9deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(7deg) translate3d(0, -3px, 0);
  }
}

.button:hover,
.button:focus-visible {
  color: #fff6e6;
  background-size: 104% 134%, 100% 64%;
  transform: rotate(-0.9deg) translateY(-2px);
}

.header-nav a:focus-visible,
.button:focus-visible,
.filter-chips a:focus-visible,
.category-link:focus-visible,
.text-link:focus-visible,
input:focus-visible {
  outline: 3px solid #134e4a;
  outline-offset: 2px;
}

.hero,
.studio-intro,
.shop-preview,
.story,
.gallery,
.blog-preview,
.newsletter,
.contact {
  padding: 2.4rem 0;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.4rem;
  align-items: center;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  right: -0.4rem;
  top: 3rem;
  width: 420px;
  height: 190px;
  z-index: 0;
  transform: rotate(5deg);
  background-image:
    linear-gradient(145deg, rgba(255, 238, 204, 0.18), rgba(50, 36, 20, 0.18)),
    var(--leo-texture);
  background-size: auto, 420px auto;
  background-position: center, center;
  opacity: 0.9;
  border-radius: 0.35rem;
}

.hero-copy,
.product-card,
.category-card,
.story,
.blog-card,
.newsletter,
.contact,
.contact-card,
.blog-cards,
.gallery-grid,
.shop-preview,
.studio-copy {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  background-image:
    linear-gradient(0deg, rgba(255, 252, 245, 0.86), rgba(255, 252, 245, 0.86)),
    var(--paper-grain);
  background-repeat: no-repeat, repeat;
  background-size: auto, 640px auto;
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.14);
}

.shop-preview {
  padding-inline: clamp(1.2rem, 3vw, 2.2rem);
}

.hero-copy {
  padding: 2.2rem;
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0.4rem;
  background-color: #efe6d5;
  /* Leo oben und links, ausgefranstes Jeans unten und rechts. Die
     Jeansstreifen sind mit 1020px laenger als jede Kante der Karte,
     deshalb ist keine Wiederholung zu sehen. */
  background-image:
    var(--leo-bullet),
    var(--leo-edge),
    var(--denim-bottom),
    var(--denim-right),
    linear-gradient(0deg, rgba(253, 248, 240, 0.9), rgba(253, 248, 240, 0.9)),
    var(--paper-grain);
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, repeat;
  background-position: top left, left top, bottom right, right bottom, center, center;
  /* auto/19 statt fester Groesse: sonst wird der Streifen verzerrt. */
  background-size: auto 19px, 19px auto, auto 26px, 26px auto, auto, 640px auto;
  box-shadow: 0 18px 32px rgba(31, 35, 40, 0.22);
  transform: rotate(-0.5deg);
}

/* Der Goldverlauf wie in der Signatur; die dunkle Grundfarbe traegt den
   Titel, falls background-clip fehlt. */
.hero-title {
  color: #6d4f0a;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title {
    background-image: linear-gradient(
      100deg,
      #6d4f0a 0%,
      #6d4f0a 40%,
      #9a7314 46%,
      #e3c368 50%,
      #9a7314 54%,
      #6d4f0a 60%,
      #6d4f0a 100%
    );
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: signature-shine 6s ease-in-out infinite;
  }
}

/* Markenzeichen: hochgestellt und klein, damit es den Schriftzug nicht sprengt. */
.rmark {
  font-size: 0.52em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

.footer-promise-link {
  margin: 0.6rem 0 0;
}

/* Plumeria-Pink, aufgehellt fuer den schwarzen Footer. */
.footer-promise .footer-promise-link a {
  color: #ff7fc0;
  font-weight: 700;
  text-decoration: none;
}

.footer-promise .footer-promise-link a::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.4em;
  vertical-align: -0.24em;
  background: var(--plumeria) center / contain no-repeat;
}

.footer-promise .footer-promise-link a:hover,
.footer-promise .footer-promise-link a:focus-visible {
  text-decoration: underline;
}

/* Textlinks im Inhalt tragen die Markenfarbe. */
main a {
  color: #7a3418;
}

main a:hover,
main a:focus-visible {
  color: #5d2711;
}

/* ---------- Warenkorb in der Menueleiste ---------- */

:root {
  --cart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3h2.2l2.1 10.4a1.8 1.8 0 0 0 1.8 1.5h8.4a1.8 1.8 0 0 0 1.8-1.4l1.5-6.3H6.1'/%3E%3Ccircle cx='9.5' cy='19.4' r='1.5'/%3E%3Ccircle cx='17.2' cy='19.4' r='1.5'/%3E%3C/svg%3E");
}

/* Die Form kommt als Maske, damit der Goldverlauf durchscheint. */
.cart-glyph {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex: none;
  background-color: #6d4f0a;
  background-image: linear-gradient(
    100deg,
    #6d4f0a 0%,
    #6d4f0a 40%,
    #9a7314 46%,
    #e3c368 50%,
    #9a7314 54%,
    #6d4f0a 60%,
    #6d4f0a 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-mask-image: var(--cart-mask);
  mask-image: var(--cart-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: signature-shine 6s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(58, 42, 24, 0.35));
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Etwas zurueckhaltender als die uebrigen Menuepunkte. */
.header-nav .cart-link {
  font-size: clamp(0.7rem, 1.15vw, 0.86rem);
  letter-spacing: 0.05em;
  padding: 0.3rem clamp(0.25rem, 0.7vw, 0.6rem);
}

.header-nav .cart-link .cart-glyph {
  width: 1.25em;
  height: 1.25em;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #7a3418;
  color: #fff6e6;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0;
}

.eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  font-family: var(--font-hand);
  color: var(--accent-hot);
}

h1,
h2,
h3 {
  margin: 0 0 0.7rem;
  line-height: 1.12;
  font-family: var(--font-display);
}

h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

.hero-copy p,
.product-card p,
.story-copy p,
.blog-card p,
.contact-copy p {
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1.1rem 0;
}

/* Die Schnipsel sollen ueber die ganze Breite verstreut liegen statt
   links zusammenzukleben. */
.hero-tags {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  padding: 0.4rem 0 0;
  margin: 0;
}

.hero-tags li {
  flex: 1 1 auto;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--paper-strip);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  box-shadow: 0 4px 8px rgba(31, 35, 40, 0.18);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  color: #2b2219;
}

.hero-tags li:nth-child(1) {
  transform: rotate(-2.1deg) translateY(-3px);
}

.hero-tags li:nth-child(2) {
  transform: rotate(1.6deg) translateY(9px);
}

.hero-tags li:nth-child(3) {
  transform: rotate(-1.1deg) translateY(1px);
}

.hero-art {
  position: relative;
  /* Wie die Bildquelle, damit nichts beschnitten oder hochskaliert wird. */
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
  /* Sichtbar, damit die Bluete ueber die Ecke ragen darf. Das Foto
     begrenzt sich selbst ueber object-fit. */
  overflow: visible;
  z-index: 1;
  transform: rotate(-1.4deg);
  border: 0;
  border-radius: 0;
  padding: 20px 20px 28px;
  background-color: #fdf8ee;
  background-image:
    var(--edge-top),
    var(--edge-bottom),
    var(--edge-left),
    var(--edge-right),
    var(--paper-grain);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, repeat;
  background-position: top left, bottom left, left top, right top, center;
  background-size: 140px 16px, 140px 16px, 16px 140px, 16px 140px, 640px auto;
  box-shadow: 0 16px 28px rgba(31, 35, 40, 0.24);
}

/* Ohne feste Masse behaelt das img seine Eigengroesse (1600px) und
   wird nur beschnitten statt eingepasst. */
.hero-photo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 48px);
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: sepia(0.16) saturate(1.02) contrast(1.03);
}

.spot,
.feather {
  position: absolute;
  animation: floaty 8s ease-in-out infinite alternate;
}

/* Haengt ueber die untere rechte Ecke des Papierrahmens. */
.plumeria {
  position: absolute;
  z-index: 2;
  width: clamp(104px, 32%, 186px);
  aspect-ratio: 1;
  right: clamp(-2.6rem, -2vw, -1rem);
  bottom: clamp(-2.8rem, -2.2vw, -1.1rem);
  background: var(--plumeria) center / contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(58, 42, 24, 0.38));
  animation: plumeria-drift 9s ease-in-out infinite;
  will-change: transform;
}

@keyframes plumeria-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-16deg);
  }
  50% {
    transform: translate3d(-7px, -13px, 0) rotate(-3deg);
  }
}

.spot {
  border-radius: 45% 55% 50% 50%;
  background: radial-gradient(circle, rgba(160, 74, 40, 0.55), rgba(93, 74, 45, 0.3));
  opacity: 0.34;
  mix-blend-mode: multiply;
}

.spot-a {
  width: 118px;
  height: 118px;
  top: 2.4rem;
  right: 2.2rem;
}

.spot-b {
  width: 88px;
  height: 88px;
  top: 12rem;
  left: 2rem;
  animation-delay: 0.6s;
}

.spot-c {
  width: 66px;
  height: 66px;
  bottom: 2.6rem;
  right: 7rem;
  animation-delay: 1.1s;
}

.feather {
  width: 120px;
  height: 160px;
  bottom: 1.8rem;
  left: 2.4rem;
  border-radius: 50% 50% 40% 60%;
  background: linear-gradient(180deg, rgba(221, 190, 138, 0.7), rgba(120, 96, 58, 0.18));
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.section-head {
  margin-bottom: 1rem;
}

/* Titelcontainer wie der Kopf der Happy-Dogs-Seite: Papierkachel mit
   Leo-Streifen oben, grosser Plumeria darueber, Text mittig. */
.studio-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.4rem;
  padding: clamp(7.8rem, 14vw, 10.4rem) 1.4rem 1.6rem;
  border-radius: 1rem;
  background-color: #efe6d5;
  background-image:
    linear-gradient(0deg, rgba(247, 240, 228, 0.72), rgba(247, 240, 228, 0.72)),
    var(--paper-grain);
  background-size: auto, 640px auto;
  background-repeat: no-repeat, repeat;
  box-shadow: 0 16px 30px rgba(31, 35, 40, 0.16);
  text-align: center;
}

.studio-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 19px;
  background-image: var(--leo-bullet);
  background-size: auto 100%;
  background-repeat: repeat-x;
}

.studio-hero::after {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.2rem);
  left: 50%;
  width: clamp(84px, 10vw, 126px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(-9deg);
  background: url("assets/plumeria-lg.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(58, 42, 24, 0.32));
  pointer-events: none;
}

/* Der Goldverlauf wird auf die Schrift zugeschnitten. Alles, was unter
   die Zeilenbox ragt, bekaeme keine Farbe und verschwaende - deshalb
   braucht die Handschrift hier mehr Zeilenhoehe fuer ihre Unterlaengen. */
.studio-hero h2 {
  margin: 0.2rem 0 0;
  padding-bottom: 0.12em;
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.45;
}

/* Grossschreibung ueber CSS, damit Vorleseprogramme die Woerter
   nicht buchstabieren. */
.studio-tagline {
  margin: 0.7rem 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  font-family: var(--font-hand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tagline-dot {
  color: var(--accent-hot);
}

/* Begruessungstext zwischen Titelkachel und den drei Kacheln. */
.studio-copy {
  position: relative;
  margin: 0 0 1.6rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.68;
}

/* Zwei schwebende Plumeria an den Ecken. Die Versaetze sind so gewaehlt,
   dass sie am schmalen Rand der Seite nicht ueberstehen. */
.studio-copy::before,
.studio-copy::after {
  content: "";
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  background: var(--plumeria) center / contain no-repeat;
  filter: drop-shadow(0 8px 13px rgba(58, 42, 24, 0.32));
  pointer-events: none;
  will-change: transform;
}

.studio-copy::before {
  top: clamp(-1.5rem, -1.3vw, -0.5rem);
  left: clamp(-1.3rem, -1.1vw, -0.4rem);
  width: clamp(56px, 6.5vw, 104px);
  animation: studio-drift-a 12s ease-in-out infinite;
}

.studio-copy::after {
  bottom: clamp(-1.5rem, -1.3vw, -0.5rem);
  right: clamp(-1.3rem, -1.1vw, -0.4rem);
  width: clamp(46px, 5.2vw, 84px);
  animation: studio-drift-b 15s ease-in-out infinite 1.4s;
}

@keyframes studio-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-13deg);
  }
  50% {
    transform: translate3d(9px, -16px, 0) rotate(4deg);
  }
}

@keyframes studio-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(11deg);
  }
  50% {
    transform: translate3d(-11px, 14px, 0) rotate(-5deg);
  }
}

/* Ueber die volle Breite waeren die Zeilen sonst 120 Zeichen lang.
   Ein Raster statt "columns", damit die Aufteilung der beiden Spalten
   festliegt und nicht vom Textumfang abhaengt. */
@media (min-width: 60rem) {
  .studio-copy {
    --spalten-luecke: clamp(2rem, 4vw, 3.5rem);
    display: grid;
    /* Fliesstext links, Foto rechts. "start" laesst beide Spalten auf
       derselben Hoehe beginnen. */
    grid-template-columns: minmax(0, 1fr) 0.42fr;
    column-gap: var(--spalten-luecke);
    align-items: start;
  }

  .studio-copy .studio-mich {
    /* Mittig zum Textblock, sonst stoesst der Rahmen oben in die
       Begruessung. */
    align-self: center;
    margin-top: 0;
  }
}

.studio-copy p {
  margin: 0 0 0.9rem;
}

.studio-copy strong,
.studio-copy em {
  color: var(--text-main);
}

.studio-greeting {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: #6d4f0a;
  /* Rueckt an der Plumeria in der linken oberen Ecke vorbei. */
  padding-left: clamp(2.6rem, 5vw, 4.6rem);
}

/* Setzt sich als Schlussformel vom Fliesstext ab. Zwei Klassen, weil
   ".studio-copy p" weiter oben sonst den Abstand ueberschreibt. */
.studio-copy .studio-outro {
  margin: 1.6rem 0 0.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-weight: 700;
  color: var(--text-main);
}

/* ---------- Atelierfoto mit Signatur ---------- */

.studio-mich {
  margin-top: 1.6rem;
}

/* Gerissener Papierrahmen, leicht schraeg aufgelegt. Die Beschriftung
   steht ueber dem Bild, weil die Signatur die Unterkante verdeckt. */
.studio-portrait {
  width: min(100%, 21rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  border: 18px solid transparent;
  border-image: url("assets/paper-torn.png") 64 stretch;
  border-radius: 0;
  background-color: #fdf8ee;
  background-origin: border-box;
  filter: drop-shadow(0 14px 24px rgba(31, 35, 40, 0.3));
  transform: rotate(-1.8deg);
}

.studio-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.studio-portrait figcaption {
  margin: 0 0 0.6rem;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #12706b;
}

/* Steht unter dem Rahmen, nicht mehr darauf. */
.studio-signatur {
  position: relative;
  z-index: 2;
  width: min(100%, 21rem);
  margin: 1.5rem auto 0;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  transform: rotate(-1.4deg);
}

/* Schwarzer Balken nur unter der Schlusszeile. */
.studio-signatur .studio-outro span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.18em 0.85em 0.3em;
  background-image: var(--brush-block);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 112%;
  filter: drop-shadow(0 5px 8px rgba(31, 35, 40, 0.32));
}

/* Mini-Plumeria auf der Ecke, wie bei den Schaltflaechen. */
.studio-signatur::after {
  content: "";
  position: absolute;
  top: -0.9rem;
  right: 0.4rem;
  width: clamp(28px, 4vw, 38px);
  aspect-ratio: 1;
  background: var(--plumeria) center / contain no-repeat;
  transform: rotate(-12deg);
  pointer-events: none;
}

.studio-copy .studio-signatur .studio-outro {
  margin: 0 0 1.5rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.95rem;
  color: #fff6e6;
}

/* Drei Klassen, weil ".studio-copy .studio-claim" sonst gewinnt. */
.studio-copy .studio-signatur .studio-claim {
  display: block;
  line-height: 1.31;
}

.studio-copy .studio-claim {
  margin: 0;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  letter-spacing: 0.03em;
  color: #6d4f0a;
}

/* Goldverlauf wie auf den Unterseiten; die dunkle Grundfarbe bleibt
   lesbar, falls background-clip fehlt. */
.title-gold {
  color: #6d4f0a;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .title-gold {
    background-image: linear-gradient(
      100deg,
      #6d4f0a 0%,
      #6d4f0a 40%,
      #9a7314 46%,
      #e3c368 50%,
      #9a7314 54%,
      #6d4f0a 60%,
      #6d4f0a 100%
    );
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: signature-shine 6s ease-in-out infinite;
  }
}

.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.text-link {
  font-weight: 700;
  color: var(--accent-cool);
}

/* ---------- Freistehende Guetesiegel ---------- */

/* Kein Kartenhintergrund: die Siegel stehen frei auf dem Papier der Seite. */
.siegel-reihe {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  justify-items: center;
  text-align: center;
}

.siegel {
  max-width: 22rem;
}

/* Runder Vintage-Stempel: zwei Textboegen auf goldenen Ringen. Die Boegen
   liegen als SVG-Pfade vor, weil CSS keine Schrift auf Kreisbahnen setzt. */
.siegel__stempel {
  margin: 0 auto 1.1rem;
  width: clamp(11rem, 20vw, 15rem);
}

.siegel__svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(31, 35, 40, 0.22));
}

.siegel__flaeche {
  fill: #fffaf1;
}

.siegel__ring {
  fill: none;
}

.siegel__bogen {
  font-family: var(--font-display);
  /* Muss auch fuer den laengsten Titel auf den halben Kreis passen,
     sonst schneidet der Bogen den ersten Buchstaben ab. */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  /* Mittig auf der Bahn, sonst schneidet die Schrift den Ring. */
  dominant-baseline: middle;
  fill: #241f1a;
}

.siegel__bogen--unten {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  fill: #6d4f0a;
}

/* Leichte Schraeglagen, damit die Siegel wie aufgedrueckt wirken. */
.siegel:nth-child(1) .siegel__stempel {
  transform: rotate(-4deg);
}

.siegel:nth-child(2) .siegel__stempel {
  transform: rotate(2.5deg);
}

.siegel:nth-child(3) .siegel__stempel {
  transform: rotate(-1.8deg);
}

/* Jede Zeile bekommt einen eigenen schwarzen Pinselstrich, deshalb
   "box-decoration-break: clone" statt eines durchgehenden Blocks. */
.siegel__text {
  margin: 0;
  line-height: 2.1;
}

.siegel__text span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.25rem 0.6rem;
  background-image: var(--brush-block);
  background-repeat: no-repeat;
  background-size: 100% 122%;
  background-position: center;
  color: #fff6e6;
  font-family: var(--font-hand);
  font-size: 0.92rem;
  font-weight: 700;
}

.filter-chips {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.filter-chips a {
  display: inline-block;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--paper-strip);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  box-shadow: 0 4px 8px rgba(31, 35, 40, 0.16);
  color: #2b2219;
  padding: 0.44rem 0.9rem;
  font-family: var(--font-hand);
  font-weight: 700;
}

.filter-chips li:nth-child(odd) a {
  transform: rotate(-1.2deg);
}

.filter-chips li:nth-child(even) a {
  transform: rotate(1deg);
}

.filter-chips a:hover {
  color: #fff6e6;
  background-image: var(--brush-block), linear-gradient(#141210, #141210);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 128%, 100% 64%;
  box-shadow: none;
}

.product-grid,
.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.product-card,
.blog-card {
  padding: 1rem;
}

.thumb {
  min-height: 190px;
  border-radius: 0.3rem;
  border: 7px solid #fdf8ee;
  box-shadow: 0 8px 14px rgba(31, 35, 40, 0.2);
  margin-bottom: 0.9rem;
  background-size: cover;
  background-position: center;
  filter: sepia(0.14) contrast(1.03);
}

.thumb-1 {
  background-image:
    linear-gradient(135deg, rgba(58, 42, 24, 0.16), rgba(58, 42, 24, 0.26)),
    url("assets/v01-assets/images/boho-jeans-leo.jpeg");
}

.thumb-2 {
  background-image:
    linear-gradient(135deg, rgba(58, 42, 24, 0.16), rgba(58, 42, 24, 0.26)),
    url("assets/v01-assets/images/boho-fringe.webp");
}

.thumb-3 {
  background-image:
    linear-gradient(135deg, rgba(58, 42, 24, 0.16), rgba(58, 42, 24, 0.26)),
    url("assets/v01-assets/images/portrait-art.webp");
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-card {
  padding: 0.9rem;
}

.category-link {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.category-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.3rem;
  border: 6px solid #fdf8ee;
  box-shadow: 0 8px 14px rgba(31, 35, 40, 0.2);
  margin: 0 0 0.5rem;
  filter: sepia(0.14) contrast(1.03);
}

/* Hochformat: der Ausschnitt sitzt sonst auf den Beinen statt auf dem Kopf. */
.category-thumb--rampenlicht {
  object-position: 50% 22%;
}

.category-name {
  margin: 0;
  font-size: 1.05rem;
}

.category-note {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.category-link:hover .category-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(2rem, 3.5vw, 3.2rem);
  /* Luft nach oben, damit der Abschnitt sich von der Galerie darueber loest. */
  margin-top: clamp(2.5rem, 6vw, 5rem);
  /* Der Rahmen steht schraeg, deshalb rundum mehr Innenabstand als bei
     den uebrigen Abschnitten. */
  padding: clamp(1.9rem, 3vw, 2.9rem);
  position: relative;
  align-items: center;
}

.story-actions {
  margin: 1.1rem 0 0.3rem;
}

/* Tuerkis der Stickdatei, abgedunkelte Fassung: das helle #44ccc1 kommt
   auf dem Papier nur auf 1,9:1 und waere als Text unlesbar. */
.story .eyebrow {
  color: #12706b;
}

/* Schraeg aufgelegtes Foto auf gerissenem Papier. Der Schlagschatten
   folgt der Alphamaske, deshalb filter statt box-shadow. */
.story-frame {
  min-height: clamp(340px, 30vw, 470px);
  border: 26px solid transparent;
  border-image: url("assets/paper-torn.png") 64 stretch;
  border-radius: 0;
  background-color: #fdf8ee;
  background-origin: border-box;
  background-image:
    linear-gradient(145deg, rgba(221, 190, 138, 0.18), rgba(120, 96, 58, 0.16)),
    url("assets/v01-assets/images/love-story-art.webp");
  background-size: cover;
  background-position: center;
  box-shadow: none;
  filter: sepia(0.14) contrast(1.03) drop-shadow(0 12px 20px rgba(31, 35, 40, 0.28));
  transform: rotate(-2.6deg);
}

.gallery {
  position: relative;
}

.gallery::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: -0.6rem;
  width: 130px;
  height: 44px;
  background-image:
    linear-gradient(145deg, rgba(255, 238, 204, 0.1), rgba(50, 36, 20, 0.18)),
    var(--leo-texture);
  background-size: auto, 220px auto;
  background-position: center, center;
  transform: rotate(-7deg);
  border-radius: 0.25rem;
  box-shadow: 0 3px 8px rgba(31, 35, 40, 0.18);
}

/* Ohne Breitenbegrenzung, damit die Zeile auf breiten Schirmen
   durchlaeuft statt nach 60 Zeichen umzubrechen. */
.gallery-intro {
  margin: 0.2rem 0 1.4rem;
  color: var(--text-muted);
  max-width: none;
}

/* Vier Kacheln pro Reihe, also 2 x 4 bei acht Bildern. */
.gallery-grid {
  padding: 1rem 0.8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 1.1rem;
  justify-items: center;
}

.gallery-item {
  margin: 0;
  width: min(232px, 100%);
  padding: 16px 16px 24px;
  border: 0;
  border-radius: 0;
  background-color: #fdf8ee;
  background-image:
    var(--edge-top),
    var(--edge-bottom),
    var(--edge-left),
    var(--edge-right),
    var(--paper-grain);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, repeat;
  background-position: top left, bottom left, left top, right top, center;
  background-size: 140px 14px, 140px 14px, 14px 140px, 14px 140px, 640px auto;
  overflow: visible;
  box-shadow: 0 10px 18px rgba(31, 35, 40, 0.22);
  transform: rotate(var(--angle, 0deg));
  animation: wiggle-float 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.gallery-item img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 50%;
  display: block;
  border-radius: 0;
  filter: sepia(0.14) contrast(1.03);
}

.gallery-item:nth-child(1) img,
.gallery-item:nth-child(2) img,
.gallery-item:nth-child(3) img,
.gallery-item:nth-child(6) img,
.gallery-item:nth-child(7) img {
  object-position: center 70%;
}

.gallery-item:nth-child(4) img,
.gallery-item:nth-child(5) img,
.gallery-item:nth-child(8) img {
  object-position: center 60%;
}

.gallery-item figcaption {
  margin-top: 0.42rem;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 0.88rem;
  font-weight: 700;
  color: #4f4438;
}

.gallery-item::before,
.gallery-item::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 12px;
  border-radius: 0.15rem;
  background-image:
    linear-gradient(145deg, rgba(255, 238, 204, 0.06), rgba(50, 36, 20, 0.14)),
    var(--leo-texture);
  background-size: auto, 70px auto;
  background-position: center, center;
  box-shadow: inset 0 0 0 1px rgba(111, 90, 58, 0.2);
  top: -6px;
  z-index: 2;
}

.gallery-item::before {
  left: -4px;
  transform: rotate(-17deg);
}

.gallery-item::after {
  right: -4px;
  transform: rotate(16deg);
}

.gallery-item {
  position: relative;
}

.gallery-item:nth-child(odd) {
  --angle: -1.4deg;
}

.gallery-item:nth-child(even) {
  --angle: 1.4deg;
}

.gallery-item:nth-child(2n) {
  --delay: 0.35s;
}

.gallery-item:nth-child(3n) {
  --delay: 0.7s;
}

.gallery-item:hover,
.gallery-item:focus-within {
  transform: translateY(-4px) rotate(0deg) scale(1.02);
  z-index: 2;
}

/* Zerrissene Jeans als Flaeche hinter den runden Kacheln. Der helle
   Schleier darueber haelt Abstand zu den Kacheln, damit sie nicht im
   Muster untergehen. */
.blog-cards {
  padding-inline: clamp(1.4rem, 4vw, 2.6rem);
  /* Die Kacheln stehen 10 % schmaler als ihre Spalte. Der Prozentanteil
     (Prozent-Padding rechnet immer gegen die Breite) gibt der Flaeche die
     verlorene Hoehe zurueck, damit der Jeans-Rahmen gleich gross bleibt. */
  padding-block: calc(clamp(1.4rem, 4vw, 2.6rem) + 1.55%);
  justify-items: center;
  align-items: center;
  border-color: #9c8f79;
  background-color: #7d8ea4;
  background-image:
    linear-gradient(0deg, rgba(255, 250, 241, 0.28), rgba(255, 250, 241, 0.28)),
    url("assets/blog-jeans.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Runde Kacheln mit Leo-Ring: die Leo-Textur fuellt den Kreis, der
   radiale Verlauf legt die helle Schreibflaeche darueber und laesst
   aussen einen breiten Fellrand stehen. Die Konturfarbe wechselt je
   Kachel und stammt aus den Stickfarben der Datei Evan. */
.blog-card {
  --kontur: #8c2a82;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: min(90%, 19.35rem);
  border: 6px solid #fdf8ee;
  border-radius: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  /* Der Fellrand darf nur so breit werden, dass der laengste Text noch in
     die Hoehe des Kreises passt. Sonst waechst die Kachel ueber ihr
     aspect-ratio hinaus und wird oval. Prozentwerte rechnen hier gegen die
     Spaltenbreite: was ueber 13,5rem hinausgeht, wird zu Rand. */
  padding: clamp(1.1rem, calc((100% - 13.5rem) / 2), 3.4rem);
  text-align: center;
  background-color: #fffaf1;
  background-image:
    radial-gradient(
      circle closest-side,
      rgba(255, 250, 241, 0.97) 0 76%,
      rgba(255, 250, 241, 0) 77%
    ),
    var(--kachel-bild, none),
    var(--leo-texture);
  background-size: auto, cover, 132px auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow:
    0 0 0 4px var(--kontur),
    0 0 0 9px rgba(255, 250, 241, 0.9),
    0 12px 22px rgba(31, 35, 40, 0.3);
}

.blog-card:nth-child(1) {
  --kontur: #8c2a82;
}

.blog-card:nth-child(2) {
  --kontur: #12706b;
}

.blog-card:nth-child(3) {
  /* Kiwi: das helle Limett der Stickdatei (#ccd555) verschwindet auf dem
     Creme-Absatz, deshalb eine gesaettigtere Fassung. */
  --kontur: #8aa61c;
}

/* Pinke Plumeria auf dem Fellrand, pro Kachel an anderer Stelle. */
.blog-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4%;
  right: 4%;
  width: clamp(48px, 24%, 78px);
  aspect-ratio: 1;
  background: var(--plumeria) center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(58, 42, 24, 0.42));
  transform: rotate(-14deg);
  pointer-events: none;
}

.blog-card:nth-child(2)::after {
  top: auto;
  right: 2%;
  bottom: 6%;
  transform: rotate(12deg);
}

.blog-card:nth-child(3)::after {
  right: auto;
  top: 6%;
  left: 3%;
  transform: rotate(-24deg);
}

/* Farbkleckse rund um den Kreis. Negativer z-index legt sie unter den
   Text, aber ueber die Papierflaeche der Kachel. */
.blog-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16%;
  background: url("assets/splatter.png") center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

.blog-card:nth-child(2)::before {
  transform: rotate(128deg);
}

.blog-card:nth-child(3)::before {
  transform: rotate(242deg) scaleX(-1);
}

.blog-card h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}

.blog-card p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Blogbereich: Ueberschriften mittig, wie auf der Blogseite selbst. */
.blog-preview .section-head.split {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.blog-preview .blog-card h3 {
  text-align: center;
}

.newsletter,
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.3rem;
}

/* Text links ueber die volle Hoehe, rechts Bild und darunter das
   Formular. Hinter allem liegt das Strandmotiv; darueber ein Schleier
   mit ungleichmaessiger Deckkraft, damit das Foto stellenweise klar
   durchkommt und der Text trotzdem lesbar bleibt. */
.newsletter {
  position: relative;
  grid-template-areas:
    "copy shot"
    "copy form";
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 1.1rem 1.5rem;
  padding: 2.6rem 2.4rem 2.8rem;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: #fdf9f1;
  background-image: url("assets/vibes-veil.png"), url("assets/vibes-bg.jpg");
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 12px 24px rgba(31, 35, 40, 0.16);
}

/* Text, Foto und Formular liegen auf gerissenen Papierschnipseln, damit
   sie sich vom Boho-Hintergrund abheben. Rahmen und Fuellung tragen
   dieselbe Farbe, der Schlagschatten folgt der Alphamaske. */
.newsletter-copy,
.newsletter .vibes-shot,
.newsletter-form {
  border: 30px solid transparent;
  border-image: url("assets/paper-torn.png") 64 stretch;
  border-radius: 0;
  background-color: #fffdf8;
  background-origin: border-box;
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(31, 35, 40, 0.24));
}

.newsletter-copy {
  grid-area: copy;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.2rem 0.5rem 0.6rem;
}

.newsletter-form {
  grid-area: form;
  min-width: 0;
  padding: 0.2rem 0.5rem 0.6rem;
}

.newsletter-lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-muted);
}

.newsletter .vibes-shot {
  grid-area: shot;
  align-self: start;
  margin: 0;
  padding: 0;
}

/* Newsletter und Kontakt sahen identisch aus. Der Kontakt-CTA wird zum
   aufgelegten, gerissenen Blatt; die Kinder drehen zurueck, damit die
   Schrift gerade steht. */
.contact {
  position: relative;
  margin-top: 2.8rem;
  padding: 0.8rem 1rem 1.1rem;
  border: 34px solid transparent;
  border-image: url("assets/paper-torn.png") 64 stretch;
  border-radius: 0;
  background-color: #fdf9f1;
  background-image: none;
  background-origin: border-box;
  box-shadow: none;
  filter: drop-shadow(0 12px 18px rgba(31, 35, 40, 0.26));
  transform: rotate(-0.5deg);
}

.contact > * {
  transform: rotate(0.5deg);
}

.contact::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: -2.6rem;
  height: 16px;
  background-image: var(--brush-line);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.4;
  pointer-events: none;
}

/* Innen reicht eine ruhige Flaeche - die Rahmung uebernimmt das Blatt. */
.contact .contact-card {
  border-color: rgba(139, 164, 161, 0.5);
  box-shadow: none;
}

.newsletter-form {
  display: grid;
  gap: 0.55rem;
  align-content: space-between;
}

.newsletter-copy {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

/* Das Motiv taucht beim Heranscrollen auf und bekommt innen einen
   langsamen Kameraschwenk. Zwei Ebenen, weil ein Element nur eine
   transform-Animation tragen kann. */
.vibes-shot {
  margin: 0 0 0.3rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 22px rgba(31, 35, 40, 0.22);
  transform: rotate(-0.8deg);
}

.vibes-shot img {
  display: block;
  width: 100%;
  height: auto;
  animation: vibes-pan 26s ease-in-out infinite alternate;
  will-change: transform;
}

@supports (animation-timeline: view()) {
  .vibes-shot {
    animation: vibes-reveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 32%;
  }
}

@keyframes vibes-pan {
  from {
    transform: scale(1.04) translate3d(-1.2%, 0.4%, 0);
  }
  to {
    transform: scale(1.12) translate3d(2%, -1.4%, 0);
  }
}

@keyframes vibes-reveal {
  from {
    opacity: 0;
    transform: translateY(20px) rotate(-2.4deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-0.8deg);
  }
}

.newsletter-title-line {
  display: block;
}

/* Markenpaar soll nicht ueber zwei Zeilen brechen. */
.newsletter-title-brands {
  white-space: nowrap;
}

.newsletter-lead strong {
  color: var(--text-main);
}

.newsletter-signature {
  position: relative;
  display: inline-block;
  margin: 0.5rem 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #6d4f0a;
}

/* Goldverlauf durch die Schrift; die Grundfarbe bleibt dunkel, damit
   der Gruss auch waehrend des Glanzes lesbar bleibt. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .signature-text {
    background-image: linear-gradient(
      100deg,
      #6d4f0a 0%,
      #6d4f0a 40%,
      #9a7314 46%,
      #e3c368 50%,
      #9a7314 54%,
      #6d4f0a 60%,
      #6d4f0a 100%
    );
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: signature-shine 6s ease-in-out infinite;
  }
}

@keyframes signature-shine {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
}

.signature-sparks {
  position: absolute;
  inset: -0.5rem -0.7rem;
  pointer-events: none;
}

.signature-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #efcb63 42%, rgba(239, 203, 99, 0) 72%);
  clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%);
  animation: signature-spark 4.6s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes signature-spark {
  0%,
  74%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  84% {
    opacity: 0.95;
    transform: scale(1) rotate(45deg);
  }
}

.newsletter-form button[type="submit"] {
  justify-self: start;
  min-width: min(15rem, 100%);
}

.newsletter-note {
  margin: 0.35rem 0 0;
  max-width: 46ch;
  font-size: 0.82rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-muted);
}

.newsletter-form label {
  font-weight: 700;
}

.newsletter-form input {
  border-radius: 0.75rem;
  border: 1px solid #8ba4a1;
  padding: 0.68rem 0.72rem;
  font-size: 1rem;
}

.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.consent-row a {
  color: var(--accent-cool);
}

.contact-form {
  display: grid;
  gap: 0.9rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.contact-form label,
.contact-form legend {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #8ba4a1;
  padding: 0.64rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form fieldset {
  border: 1px solid var(--line-soft);
  border-radius: 0.75rem;
  padding: 0.7rem;
  margin: 0;
}

.choice-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
}

.contact-meta {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.legal-teaser {
  width: min(1440px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 2.2rem 0;
}

.legal-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.legal-links a {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  background: #f5f9f8;
  text-decoration: none;
  font-weight: 600;
}

.contact-card {
  padding: 1rem;
}

.contact-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.site-footer {
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: rgba(251, 248, 242, 0.92);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.site-footer nav {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ---------- Manufaktur-Footer (3 Sektionen) ---------- */

/* Gleiches Original-Bild wie auf den uebrigen Seiten. */
/* Luft unter dem Inhalt, damit die gerissene Oberkante des Footers
   frei ueber dem hellen Hintergrund liegt. */
main {
  padding-bottom: 7rem;
}

.manufaktur-footer {
  width: min(1440px, calc(100% - 1.5rem));
  margin: -2.5rem auto 1.6rem;
  padding: 1.5rem 1.4rem 2rem;
  border-radius: var(--radius-xl);
  color: #f4e9d6;
  position: relative;
  background-color: #0a0a08;
}

.manufaktur-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -92px;
  height: 94px;
  pointer-events: none;
  background-image: url("assets/footer-tear.png");
  background-repeat: repeat-x;
  background-size: 1200px 94px;
  background-position: left bottom;
}

.manufaktur-footer::after {
  content: "";
  position: absolute;
  top: -104px;
  right: 7%;
  width: clamp(88px, 12vw, 142px);
  aspect-ratio: 1;
  pointer-events: none;
  background-image: url("assets/plumeria-lg.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-13deg);
  filter: drop-shadow(0 9px 15px rgba(0, 0, 0, 0.55));
}

.manufaktur-footer > * {
  position: relative;
  z-index: 1;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  padding-top: 0.8rem;
}

.footer-col h2,
.footer-promise h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5c98a;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.footer-col a {
  color: #f4e9d6;
  text-decoration: none;
  font-size: 0.93rem;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-col a:focus-visible {
  outline: 3px solid #f5c98a;
  outline-offset: 2px;
}

/* Social-Symbole: gemalter Farbkreis, darin ein dunkles Zeichen.
   Gleiche Definition wie in shop.css, damit alle Seiten gleich aussehen. */
.social-list {
  gap: 0.55rem;
}

.social-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
}

.social-badge {
  position: relative;
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background-image: conic-gradient(
    from 205deg,
    #f0b64a 0deg,
    #cc633a 78deg,
    #bd3eb2 154deg,
    #44ccc1 236deg,
    #ccd555 305deg,
    #f0b64a 360deg
  );
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 250, 241, 0.9);
  transition: transform 0.22s ease;
}

.social-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1a1512;
  -webkit-mask-image: var(--glyph);
  mask-image: var(--glyph);
  -webkit-mask-size: 58% 58%;
  mask-size: 58% 58%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.social-list a:hover .social-badge {
  transform: rotate(-8deg) scale(1.1);
}

.social-badge--instagram {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.4a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2zm0 2a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2zM17.7 5.9a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3E%3C/svg%3E");
}

.social-badge--facebook {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.8 3.5v3.1h-1.9c-.6 0-.9.3-.9.9v1.9h2.7l-.4 3h-2.3V21h-3.1v-8.6H7.4v-3h2.5V7.1c0-2.3 1.4-3.6 3.5-3.6h2.4z'/%3E%3C/svg%3E");
}

.social-badge--whatsapp {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9.8 9.8 0 0 0-8.4 14.9L2 22.2l5.5-1.6A9.8 9.8 0 1 0 12 2zm0 2a7.8 7.8 0 1 1-4.1 14.4l-.4-.2-2.7.8.8-2.6-.2-.4A7.8 7.8 0 0 1 12 4zM8.6 7.6c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.7 2.8 4.3 3.8 2 .8 2.4.6 2.9.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2l-.6-.3-1.6-.8c-.2-.1-.4-.1-.6.1l-.7.9c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.4-1.6-.1-.2 0-.4.1-.5l.4-.5.3-.5c0-.2 0-.3-.1-.4l-.7-1.7c-.2-.4-.4-.4-.6-.4h-.6z'/%3E%3C/svg%3E");
}

/* Briefumschlag fuer den Happy-Vibes-Letter. */
.social-badge--news {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.6 2 7.4 5.3L19.4 7H4.6zM20 8.7l-7.4 5.3a1 1 0 0 1-1.2 0L4 8.7V17h16V8.7z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .button::after,
  .plumeria,
  .studio-copy::before,
  .studio-copy::after,
  .spot,
  .feather,
  .title-gold {
    animation: none;
  }

  .title-gold {
    background-position: 50% 0;
  }

  .plumeria {
    transform: rotate(-16deg);
  }

  .social-badge,
  .social-list a:hover .social-badge {
    transition: none;
    transform: none;
  }
}

.footer-promise {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.footer-promise p {
  margin: 0;
  max-width: 42ch;
  line-height: 1.5;
  color: #eadfcb;
  font-size: 0.93rem;
}

/* Widerrufsbutton nach Paragraf 312k BGB. Schlicht und kontraststark,
   damit er gut lesbar und leicht auffindbar bleibt. */
.footer-widerruf {
  margin: 1.2rem 0 0;
}

.widerruf-button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  min-height: 2.75rem;
  border: 2px solid #fdf6e6;
  border-radius: 0.3rem;
  background-color: #fdf6e6;
  color: #16130f;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.widerruf-button:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  text-decoration: underline;
}

.widerruf-button:focus-visible {
  outline: 3px solid #f5c98a;
  outline-offset: 3px;
}

.footer-baseline {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7a992;
}

.contact-form .hint {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #56493a;
}

@media (max-width: 680px) {
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}

@keyframes floaty {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-8px) rotate(3deg);
  }
}

@keyframes wiggle-float {
  0% {
    transform: translateY(0) rotate(var(--angle, 0deg));
  }
  50% {
    transform: translateY(-5px) rotate(calc(var(--angle, 0deg) + 1deg));
  }
  100% {
    transform: translateY(0) rotate(var(--angle, 0deg));
  }
}

@media (max-width: 980px) {
  .hero,
  .product-grid,
  .story,
  .gallery-grid,
  .blog-cards,
  .newsletter,
  .contact {
    grid-template-columns: 1fr 1fr;
  }

  /* Weniger Spalten: die Hoehenkompensation von oben wuerde hier zu
     viel Luft erzeugen. */
  .blog-cards {
    padding-block: clamp(1.4rem, 4vw, 2.6rem);
  }

  .hero::after {
    width: 260px;
    height: 110px;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-nav {
    flex-wrap: wrap;
  }

  .hero,
  .product-grid,
  .story,
  .blog-cards,
  .newsletter,
  .contact {
    grid-template-columns: 1fr;
  }

  .siegel-reihe {
    grid-template-columns: 1fr;
  }

  .newsletter {
    grid-template-areas:
      "copy"
      "shot"
      "form";
    grid-template-rows: auto;
    padding: 2rem 1.7rem 2.2rem;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .section-head.split {
    flex-direction: column;
    align-items: start;
  }

  .hero-art {
    min-height: 300px;
  }
}

/* Das Kategorie-Raster haelt die 3x2-Ansicht laenger als die uebrigen
   Grids, damit beim Verkleinern nicht sofort umgebrochen wird. */
@media (max-width: 860px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    width: min(180px, 100%);
  }

  /* Weniger Innenabstand, damit "PfotenKram & RudelLook" ohne Umbruch
     in die Spalte passt. */
  .newsletter {
    padding: 1.5rem 1.2rem 1.7rem;
  }

  #newsletter-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 0.96rem;
  }

  .shop-header,
  .hero,
  .studio-intro,
  .shop-preview,
  .story,
  .gallery,
  .blog-preview,
  .newsletter,
  .contact,
  .site-footer {
    width: calc(100% - 1rem);
  }

  /* Auf sehr schmalen Geraeten laeuft "Rock-the-Wash Guide" sonst
     ueber die helle Kreisflaeche hinaus. */
  .blog-card h3 {
    font-size: 1.02rem;
  }

  .blog-card p {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Bedienelemente: Mindestgroessen ---------- */

input[type="checkbox"],
input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  accent-color: var(--accent-cool);
}

/* Touchgeraete (iPhone, Android, Tablet): 44px Antippflaeche.
   Auf Zeigergeraeten bleibt die Optik unveraendert. */
@media (pointer: coarse) {
  .header-nav a,
  .filter-chips a,
  .legal-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .newsletter-form input:not([type="checkbox"]):not([type="radio"]),
  .contact-form input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }
}