/* Event Dreamz by Dess – Entwurf Seetalwebsites, 25.10.2026
   Idee: Dessire zeichnet ihre Flyer von Hand. Die Seite beschriftet ihre echten Fotos
   mit ihrer «Handschrift» (Caveat) und gezeichneten Pfeilen, wie auf dem Flyer. */

:root {
  --grund: #FFFBFA;
  --feld: #F8E9EC;
  --tinte: #2E2233;
  --tinte-2: rgba(46, 34, 51, 0.68);
  --tinte-3: rgba(46, 34, 51, 0.48);
  --linie: rgba(46, 34, 51, 0.14);
  --pink: #C42F63;
  --pink-hell: #F4D3DC;
  --papier: #FFFFFF;

  --sans: "Gabarito", ui-sans-serif, system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;

  --rand: 20px;
  --luft: 72px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.rand { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }
.hand { font-family: var(--hand); font-weight: 600; color: var(--pink); line-height: 1; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 251, 250, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out;
}
.kopf.gescrollt { border-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.marke { font-family: var(--hand); font-weight: 700; font-size: 30px; color: var(--pink); text-decoration: none; line-height: 1; }
.nav { display: flex; gap: 24px; font-size: 15px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--tinte-2); transition: color 150ms ease-out; }
.nav a:hover { color: var(--tinte); }
.nav a:not(.nav-anfrage) { display: none; }
.nav .nav-anfrage { color: var(--tinte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 900px) { .nav a:not(.nav-anfrage) { display: inline-flex; } }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--pink); color: #FFF8FA;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 17px;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: #A92452; }
.knopf:active { transform: scale(0.98); }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinte); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--pink); text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* Einstieg */
.einstieg { padding-top: 24px; padding-bottom: var(--luft); }
h1 {
  font-weight: 500; letter-spacing: -0.035em; line-height: 0.98;
  font-size: clamp(44px, 12vw, 112px);
}
h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.04em; }
h1 .zeile > span { display: inline-block; }
.lead { margin-top: 16px; max-width: 34ch; font-size: 18px; color: var(--tinte-2); }
.einstieg .knoepfe { margin-top: 24px; }

.collage { position: relative; margin-top: 32px; aspect-ratio: 1 / 1.02; }
.foto { position: absolute; background: var(--papier); padding: 6px; border-radius: 4px; box-shadow: 0 1px 2px rgba(46,34,51,.08), 0 12px 32px rgba(46,34,51,.10); }
.foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.foto-deko { right: 0; top: 0; width: 64%; transform: rotate(2deg); }
.foto-ich { left: 0; top: 22%; width: 44%; transform: rotate(-4deg); z-index: 2; }
.notiz { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--hand); font-weight: 600; color: var(--pink); font-size: 30px; line-height: 1; z-index: 3; }
.notiz-ich { left: 12%; top: 80%; }
.notiz-deko { right: 4%; top: 81%; }
.pfeil { width: 34px; height: 40px; fill: none; stroke: var(--pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pfeil path { stroke-dasharray: 140; stroke-dashoffset: 0; }

@media (min-width: 900px) {
  .einstieg { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 64px; min-height: calc(100svh - 56px); }
  .lead { font-size: 20px; }
  .collage { margin-top: 0; aspect-ratio: 1 / 1.08; }
  .notiz-ich { top: 84%; }
  .notiz-deko { top: 85%; }
  .notiz { font-size: 36px; }
}

/* Abschnitte */
.abschnitt { padding: var(--luft) 0; }
.abschnitt-feld { background: var(--feld); }
.kopfzeile { margin-bottom: 40px; max-width: 640px; }
h2 { font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-size: clamp(40px, 9vw, 80px); }
h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(28px, 6vw, 40px); }
.unter { margin-top: 16px; color: var(--tinte-2); max-width: 52ch; }

/* Galerie */
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; } }
.bild { overflow: hidden; border-radius: 4px; background: var(--pink-hell); }
.bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 600ms var(--expo); }
.galerie figure:hover .bild img { transform: scale(1.03); }
.galerie figcaption { margin-top: 8px; font-size: 15px; color: var(--tinte-2); line-height: 1.3; }
.galerie figcaption .hand { display: block; font-size: 25px; margin-bottom: 4px; }

/* Angebot */
.liste { border-top: 1px solid var(--linie); }
.liste > div { padding: 24px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 8px; }
.liste dt { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.liste dd { color: var(--tinte-2); max-width: 60ch; }
@media (min-width: 900px) {
  .liste > div { grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; }
  .liste dt { font-size: 26px; }
}

.extras { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.extra figcaption { margin-top: 8px; font-size: 15px; color: var(--tinte-2); line-height: 1.35; }
.extra figcaption .hand { display: block; font-size: 25px; margin-bottom: 4px; }
.pfeil-klein { width: 24px; height: 28px; display: block; margin: 0 0 4px 8px; }
@media (min-width: 900px) {
  .extras { gap: 40px; max-width: 880px; }
  .extra figcaption .hand { font-size: 30px; }
}

.schminken { margin-top: 64px; display: grid; gap: 24px; }
.schminken-stand .bild img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
.schminken-text p { margin-top: 16px; color: var(--tinte-2); max-width: 52ch; }
.schminken-gesichter { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; }
.schminken-gesichter .bild img { aspect-ratio: 1 / 1; object-position: 50% 35%; }
@media (min-width: 900px) {
  .schminken { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
  .schminken-stand .bild img { aspect-ratio: 5 / 4; }
}

/* Über Dessire */
.ueber { display: grid; gap: 40px; }
.flyer { position: relative; max-width: 420px; transform: rotate(-2.5deg); background: var(--papier); padding: 8px; border-radius: 4px; box-shadow: 0 1px 2px rgba(46,34,51,.08), 0 12px 32px rgba(46,34,51,.10); }
.flyer img { width: 100%; aspect-ratio: 1080 / 1316; object-fit: cover; border-radius: 2px; }
.flyer figcaption { position: absolute; right: -8px; bottom: -40px; font-size: 26px; transform: rotate(2.5deg); }
.ueber-text { padding-top: 24px; }
.ueber-text blockquote { margin: 24px 0 0; font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; max-width: 30ch; }
.ueber-text > p { margin-top: 24px; color: var(--tinte-2); max-width: 52ch; }
.ueber-text .leise { color: var(--tinte-3); font-size: 15px; margin-top: 16px; }
@media (min-width: 900px) {
  .ueber { grid-template-columns: 5fr 6fr; gap: 104px; align-items: center; }
  .ueber-text blockquote { font-size: 28px; }
}

/* Anfrage */
.anfrage { background: var(--feld); }
.anfrage-raster { display: grid; gap: 40px; }
.direkt { margin-top: 24px; display: grid; justify-items: start; }
.direkt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration-color: var(--pink); text-underline-offset: 4px; }
@media (min-width: 900px) {
  .anfrage-raster { grid-template-columns: 4fr 7fr; gap: 104px; align-items: start; }
  .anfrage-kopf { position: sticky; top: 104px; }
}
.formular { display: grid; gap: 24px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend, .formular label { font-size: 15px; font-weight: 500; color: var(--tinte-2); padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(46,34,51,.22); background: var(--grund); font-size: 16px;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chips button:hover { border-color: var(--tinte); }
.chips button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formular label { display: grid; gap: 8px; margin: 0; }
.formular input {
  min-height: 48px; padding: 0 16px; border-radius: 8px;
  border: 1px solid rgba(46,34,51,.22); background: var(--grund); font-size: 16px; color: var(--tinte);
  width: 100%; min-width: 0;
}
.formular input:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 3px rgba(196,47,99,.18); }

.zettel {
  background: var(--papier); border-radius: 4px; padding: 24px;
  box-shadow: 0 1px 2px rgba(46,34,51,.08), 0 12px 32px rgba(46,34,51,.10);
  transform: rotate(-1deg);
}
.zettel-titel { font-size: 26px; margin-bottom: 8px; }
.zettel-text { white-space: pre-line; font-size: 17px; line-height: 1.5; }
.zettel.neu { animation: zettel 400ms var(--expo); }
@keyframes zettel { from { transform: rotate(-1deg) scale(0.985); } to { transform: rotate(-1deg) scale(1); } }
.hinweis { font-size: 15px; color: var(--tinte-2); min-height: 1.5em; }

/* Fuss */
.fuss { background: var(--tinte); color: rgba(255, 248, 250, 0.92); padding: 64px 0 40px; }
.fuss-marke { font-family: var(--hand); font-weight: 700; font-size: clamp(56px, 16vw, 144px); line-height: 0.9; color: #F4B7C9; }
.fuss-marke span { display: block; margin-top: 8px; font-size: 0.45em; color: rgba(255, 248, 250, 0.68); }
.fuss-zeile { margin-top: 24px; color: rgba(255, 248, 250, 0.68); font-size: 15px; }
.fuss a { text-underline-offset: 3px; display: inline-block; padding: 8px 0; }
.entwurf { margin-top: 40px; font-size: 14px; color: rgba(255, 248, 250, 0.48); }

/* Bewegung: nur mit JS und ohne reduzierte Bewegung */
.js .zeile > span { transform: translateY(105%); }
.js .geladen .zeile > span { transform: none; transition: transform 1000ms var(--expo); }
.js .geladen .zeile:nth-child(2) > span { transition-delay: 90ms; }
.js .geladen .zeile:nth-child(3) > span { transition-delay: 180ms; }
.js .foto-deko { opacity: 0; transform: translateY(32px) rotate(6deg); }
.js .foto-ich { opacity: 0; transform: translateY(40px) rotate(-10deg); }
.js .geladen .foto-deko { opacity: 1; transform: rotate(2deg); transition: transform 1200ms var(--expo) 250ms, opacity 600ms ease-out 250ms; }
.js .geladen .foto-ich { opacity: 1; transform: rotate(-4deg); transition: transform 1200ms var(--expo) 450ms, opacity 600ms ease-out 450ms; }
.js .notiz span { opacity: 0; }
.js .notiz .pfeil path { stroke-dashoffset: 140; }
.js .geladen .notiz span { opacity: 1; transition: opacity 500ms ease-out 1300ms; }
.js .geladen .notiz .pfeil path { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--expo) 1000ms; }
.js .geladen .notiz-deko span, .js .geladen .notiz-deko .pfeil path { transition-delay: 1350ms; }

.js .aufdecken { clip-path: inset(100% 0 0 0); }
.js .aufdecken img { transform: scale(1.15); }
.js .aufdecken.sichtbar { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--expo); }
.js .aufdecken.sichtbar img { transform: scale(1); transition: transform 1200ms var(--expo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeile > span, .js .foto-deko, .js .foto-ich, .js .notiz span, .js .aufdecken, .js .aufdecken img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .js .foto-deko { transform: rotate(2deg) !important; }
  .js .foto-ich { transform: rotate(-4deg) !important; }
  .js .notiz .pfeil path { stroke-dashoffset: 0 !important; transition: none !important; }
  .zettel.neu { animation: none; }
}