/* ==========================================================================
   Aurivienne Schmuck & Design, Thier-Galerie Dortmund. Entwurf, Stand 22.09.2026
   Anmutung: feminine Boutique trifft persönliches Schmuck-Album. Seidenpapier-Rosa aus dem Instagram-Profilbild,
   Weinrot aus den eigenen Story- und Community-Grafiken, Champagner als feine Linie, Gold nur als Material.
   Bildsprache: Laden-Fotos stehen ruhig in Rundbögen (wie die Bogennischen im Laden) oder mit feiner
   Champagner-Linie; persönliche Fotos sind Abzüge mit Klebeband; Produkte liegen auf weißem Karton.
   Formen: Knöpfe und Auswahl sind Pillen (999px), alles aus Papier hat fast scharfe Ecken (2px).
   ========================================================================== */

@font-face { font-family: "Bodoni"; src: url("../schrift/bodoni.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni"; src: url("../schrift/bodoni-kursiv.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../schrift/jost.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Hand"; src: url("../schrift/hand.woff2") format("woff2"); font-display: swap; }

:root {
  --papier: #fbeef1;          /* Seite */
  --papier-tief: #f6dfe6;     /* Album, Fuß */
  --rosa: #f5ccdc;            /* Profilbild-Rosa */
  --rosa-kraeftig: #f2b3c8;
  --pfirsich: #fedbbc;        /* Story-Verlauf oben links */
  --koralle: #fc9f9f;         /* Story-Verlauf unten rechts */
  --wein: #6e1f33;            /* Akzent: Überschriften, Knöpfe */
  --wein-hell: #891536;       /* Schrift in den Story-Grafiken; Handschrift, Hover */
  --tinte: #3b1a24;           /* Fließtext */
  --tinte-weich: #6f4b57;
  --weiss: #fffaf9;
  --gold-hell: #f6e3ac;
  --gold: #d6aa57;
  --gold-tief: #a7782f;
  --champagner: #dcc7a3;      /* Perlmutt-Gold: feine Linien, Bogenkontur */
  --champagner-tief: #b7996a; /* Fotoecken, Rahmenlinien auf Weiß */
  --schatten: 0 1px 1px rgb(110 31 51 / .08), 0 14px 30px -12px rgb(110 31 51 / .34);
  --schatten-flach: 0 1px 1px rgb(110 31 51 / .10), 0 8px 16px -10px rgb(110 31 51 / .36);
  --rand: clamp(16px, 4.5vw, 56px);
  --breite: 77.5rem;          /* 1240px bei 16px */
  --kopf-hoehe: 4.5rem;       /* 72px */
  --touch: 44px;              /* Mindestgröße für Tipp-Ziele */
}

/* ------------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 "Jost", ui-sans-serif, system-ui, sans-serif;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Papierkorn über allem, fest und ohne Mausereignisse (billig beim Scrollen) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("../img/korn.png");
  opacity: .5;
  mix-blend-mode: multiply;
}
img, svg { max-width: 100%; }
img { height: auto; }
::selection { background: var(--rosa-kraeftig); color: var(--wein); }
:focus-visible { outline: 2px dashed var(--wein); outline-offset: 4px; border-radius: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: "Bodoni", "Didot", "Bodoni 72", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--wein);
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 1.6rem + 3.9vw, 5.1rem); line-height: 1.03; letter-spacing: -.016em; }
h1 .zeile { display: block; }
h2 { font-size: clamp(2.3rem, 1.4rem + 2.9vw, 3.7rem); line-height: 1.07; letter-spacing: -.012em; padding-bottom: .06em; }
h3 { font-size: 1.28rem; line-height: 1.25; font-weight: 600; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
a { color: inherit; }
.hand { font-family: "Hand", cursive; font-weight: 400; color: var(--wein-hell); line-height: 1.2; }
.breite { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.anm { position: relative; z-index: 1; }

.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--wein); color: var(--weiss); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.sprung:focus { top: 12px; }

/* ------------------------------------------------------------------ Handgezeichnetes */
.kritzel { display: inline-block; width: 1em; height: auto; color: var(--wein-hell); vertical-align: middle; overflow: visible; flex: none; }
.icon { width: 1.2em; height: 1.2em; flex: none; }

/* ------------------------------------------------------------------ Knöpfe und Verweise */
.knopf {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .92em 1.6em;
  border-radius: 999px;
  background: var(--wein);
  color: var(--weiss);
  font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--touch);
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 10px 18px -10px rgb(110 31 51 / .7);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .25s, box-shadow .45s ease;
}
.knopf:hover { background: var(--wein-hell); transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 16px 24px -12px rgb(110 31 51 / .7); }
.knopf:active { transform: translateY(1px) scale(.98); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 6px 12px -8px rgb(110 31 51 / .7); transition-duration: .12s; }
.verweis {
  position: relative;
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--wein); font-weight: 500; text-decoration: none;
  padding: .3em 0;
  background: linear-gradient(var(--rosa-kraeftig), var(--rosa-kraeftig)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s ease;
}
.verweis::after { content: ""; position: absolute; inset: -7px -6px; }   /* Tippfläche ca. 44 px hoch */
.verweis:hover { background-size: 100% 45%; }
.verweis:active { translate: 0 1px; }
.verweis .icon { width: 1.05em; height: 1.05em; }

/* ------------------------------------------------------------------ Papier-Dinge */
.klebeband {
  position: absolute; z-index: 3;
  width: 96px; height: 28px;
  transform: rotate(var(--r, 0deg));
  clip-path: polygon(0 10%, 3% 0, 97% 0, 100% 12%, 98% 28%, 100% 44%, 97.5% 60%, 100% 76%, 98% 90%, 100% 100%, 3% 100%, 0 92%, 2.5% 78%, 0 62%, 2% 46%, 0 30%, 2.5% 18%);
  pointer-events: none;
}
.klebeband-rosa {
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 2px, transparent 2px 7px), rgb(236 150 178 / .55);
  mix-blend-mode: multiply;
}
.klebeband-punkte {
  background: radial-gradient(circle, rgb(255 255 255 / .85) 0 2.1px, transparent 2.6px) 0 0 / 11px 11px, rgb(242 179 200 / .82);
}
.klebeband-gold {
  background: linear-gradient(100deg, rgb(221 199 160 / .8), rgb(246 236 216 / .88) 40%, rgb(221 199 160 / .8) 66%, rgb(241 229 206 / .84));
}

.abzug {
  position: relative;
  margin: 0;
  background: var(--weiss);
  padding: 10px;
  box-shadow: var(--schatten);
  transform: rotate(var(--r, 0deg));
}
.abzug img { display: block; width: 100%; }
.abzug figcaption.hand { position: absolute; inset: auto 14px 12px 14px; text-align: right; white-space: nowrap; font-size: clamp(.95rem, 1.35vw, 1.3rem); color: var(--wein); }
/* Im Hero steht die Beschriftung unter dem Bild; die Größe folgt der Collage-Breite (eine Zeile, auf kleinen Handys zwei) */
.collage .abzug figcaption.hand { position: static; padding: 9px 2px 11px; text-align: center; white-space: normal; text-wrap: balance; line-height: 1.12; font-size: clamp(16px, calc(3.6cqi - 2px), 1.2rem); }

.sticker {
  display: block;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 1px 1px rgb(110 31 51 / .2)) drop-shadow(0 10px 12px rgb(110 31 51 / .2));
}

.klebezettel {
  position: relative;
  background: linear-gradient(175deg, #ffe7d3, #fed7b8);
  padding: 34px 24px 22px;
  box-shadow: 0 1px 1px rgb(110 31 51 / .1), 6px 16px 22px -14px rgb(110 31 51 / .5);
  transform: rotate(var(--r, 0deg));
}
.klebezettel > .klebeband { top: -12px; left: 50%; margin-left: -48px; }

/* ------------------------------------------------------------------ Kopf */
.kopf-marke { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1.5px dashed transparent;
  transition: border-color .3s, box-shadow .3s;
}
.kopf.gerollt { border-bottom-color: rgb(110 31 51 / .2); box-shadow: 0 10px 24px -22px rgb(110 31 51 / .6); }
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
}
.kopf-logo { display: block; flex: none; padding: 6px 0; }
.kopf-logo img { display: block; width: 8.5rem; height: auto; }
.kopf-nav { margin-left: auto; }
.kopf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 2.2vw, 30px); }
.kopf-nav a { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--tinte); padding: 6px 0; background: linear-gradient(var(--rosa-kraeftig), var(--rosa-kraeftig)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.kopf-nav a:hover { color: var(--wein); background-size: 100% 2px; }
.kopf-nav-zeiten { display: none; }
.kopf-offen { display: flex; align-items: center; gap: .5em; margin: 0; font-size: .9rem; color: var(--tinte-weich); white-space: nowrap; }
.kopf-offen [data-offen] { min-width: 12.6em; }   /* Platz für den längsten Status, damit die Navigation nicht springt */
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: rgb(110 31 51 / .3); flex: none; }
.status-punkt.offen { background: var(--gold); box-shadow: 0 0 0 3px rgb(214 170 87 / .25); }
.kopf-insta { display: grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: 50%; color: var(--wein); transition: background .2s; }
.kopf-insta:hover { background: var(--rosa); }
.kopf-insta .icon { width: 24px; height: 24px; }
.menue-knopf {
  display: none; align-items: center; gap: 8px; margin-left: auto;
  font: 500 .95rem "Jost", sans-serif; color: var(--wein);
  background: none; border: 1.5px solid rgb(110 31 51 / .25); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  min-height: var(--touch); min-width: var(--touch); justify-content: center;
  transition: background .2s, border-color .2s;
}
.menue-knopf:hover { background: var(--rosa); border-color: transparent; }
.menue-knopf .icon { width: 20px; height: 20px; }
.menue-knopf .icon-zu { display: none; }
.kopf.menue-offen .menue-knopf .icon-zu { display: block; }
.kopf.menue-offen .menue-knopf .icon-auf { display: none; }

/* ------------------------------------------------------------------ Hero */
main > section { overflow-x: clip; }
/* Sprung aus dem Menü: der obere Innenabstand der Abschnitte ist groß, deshalb etwas tiefer landen */
main > section[id] { scroll-margin-top: clamp(-72px, -6vw, -32px); }
.hero {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(28px, 4.5vw, 64px) var(--rand) clamp(80px, 9vw, 128px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  min-height: min(calc(100dvh - var(--kopf-hoehe)), 53.75rem);
}
.hero-gruss { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 18px; transform: rotate(-4deg); transform-origin: 0 50%; display: inline-flex; align-items: center; gap: .3em; }
.hero-herz { width: .9em; transform: rotate(12deg); }
.hero-lede { font-size: clamp(1.08rem, .98rem + .35vw, 1.22rem); line-height: 1.6; max-width: 34ch; margin: 28px 0 38px; }
.hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

.collage { position: relative; width: 100%; max-width: 35rem; justify-self: end; aspect-ratio: 100 / 110; container-type: inline-size; }
.collage > * { position: absolute; margin: 0; }
.collage > .bogen-hero { position: absolute; right: 3%; top: 3%; width: 74%; z-index: 1; }   /* > sonst setzt .bogen (weiter unten) position: relative */
.abzug-hero { left: 0; bottom: 0; width: 41%; padding: 9px 9px 0; z-index: 3; }
.abzug-hero > .klebeband { top: -13px; left: 50%; margin-left: -48px; }
.sticker-ohrringe { width: 22%; right: -3%; bottom: 14%; z-index: 4; }

/* Rundbogen wie die Nischen im Laden; eine feine Champagner-Kontur liegt versetzt dahinter */
.bogen { position: relative; isolation: isolate; margin: 0; }
.bogen::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--champagner-tief); border-radius: 1000px 1000px 0 0; translate: 14px -14px; pointer-events: none; }
.bogen-bild { overflow: hidden; border-radius: 1000px 1000px 0 0; aspect-ratio: 3 / 4; background: var(--rosa); box-shadow: 0 30px 50px -34px rgb(110 31 51 / .55); }
.bogen-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Laden-Fotos ohne Bogen: sauber, mit feiner Linie versetzt dahinter */
.rahmen { position: relative; isolation: isolate; margin: 0; }
.rahmen::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--champagner-tief); translate: -14px 14px; pointer-events: none; }
.rahmen img { display: block; width: 100%; height: auto; box-shadow: 0 30px 50px -36px rgb(110 31 51 / .55); }

/* Stücke landen nacheinander auf dem Papier */
@keyframes aufs-papier {
  from { opacity: 0; transform: translateY(-12px) rotate(calc(var(--r, 0deg) - 4deg)); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)); }
}
@keyframes sanft { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.collage > [style*="--i"] { animation: aufs-papier 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 160ms + 260ms); }
.collage > .bogen-hero { animation-name: sanft; animation-duration: 1.2s; animation-delay: 60ms; }

/* ------------------------------------------------------------------ Brief */
.brief-bereich { position: relative; padding: clamp(48px, 8vw, 120px) 0 clamp(96px, 12vw, 170px); }
.brief-rahmen { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 var(--rand); display: grid; justify-items: center; }
.brief {
  position: relative; z-index: 1;
  width: min(100%, 42.5rem);
  background: var(--weiss);
  padding: clamp(44px, 6vw, 76px) clamp(26px, 6vw, 78px) clamp(48px, 6vw, 72px);
  box-shadow: var(--schatten);
  transform: rotate(-1.1deg);
}
.brief-band { top: -12px; left: 50%; margin-left: -48px; width: 120px; }
.brief-anrede { font-size: clamp(2.3rem, 4.6vw, 3.3rem); color: var(--wein); margin: 0 0 22px; line-height: 1.1; }
.brief p:not(.hand) { font-family: "Bodoni", serif; font-size: 1.14rem; line-height: 1.72; font-optical-sizing: auto; }
.brief-gruss { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 28px 0 0; display: flex; align-items: center; gap: .35em; color: var(--wein); }
.brief-herz { width: .8em; transform: rotate(-10deg); }
.stempel { position: absolute; right: -58px; bottom: -58px; width: 148px; color: var(--wein-hell); transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .82; }
.stempel svg { display: block; width: 100%; height: auto; filter: url(#tinte); overflow: visible; }
.stempel text { fill: currentColor; font-family: "Jost", sans-serif; font-weight: 600; }
.stempel use { color: currentColor; }
.brief-foto { position: absolute; z-index: 0; margin: 0; width: 16.5rem; left: calc(50% - 21.25rem - 15.5rem); top: 28px; padding: 10px; background: var(--weiss); box-shadow: var(--schatten); transform: rotate(-4deg); }
.brief-foto img { display: block; width: 100%; height: auto; }
.randnotiz { position: absolute; right: calc(50% - 21.25rem - 15.625rem); top: 32%; width: 14.375rem; font-size: 1.6rem; transform: rotate(5deg); margin: 0; line-height: 1.3; }
.randnotiz-pfeil { display: block; width: 90px; margin-top: 8px; transform: scaleX(-1) rotate(-12deg); }

/* ------------------------------------------------------------------ Sortiment: Anhänger an der Stange */
.sortiment { padding: clamp(72px, 10vw, 140px) 0 clamp(84px, 11vw, 150px); }
.sortiment-kopf { display: grid; gap: 14px; }
.sortiment-kopf p { color: var(--tinte-weich); font-size: 1.1rem; }
.stange-rahmen { max-width: var(--breite); margin: clamp(28px, 4vw, 48px) auto 0; padding: 0 var(--rand); }
.anhaenger-liste {
  position: relative;
  list-style: none; margin: 0; padding: 0 10px 28px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 20px);
  background: linear-gradient(180deg, #f4e9d4 0%, #dec79f 42%, #bea06f 78%, #d2b88c 100%) 0 0 / 100% 10px no-repeat local;
  border-radius: 6px 6px 0 0;
}
.anhaenger {
  position: relative;
  padding-top: var(--faden);
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% 6px;
  filter: drop-shadow(0 1px 1px rgb(110 31 51 / .14)) drop-shadow(0 10px 12px rgb(110 31 51 / .2));
}
.anhaenger::before { content: ""; position: absolute; left: 50%; top: 6px; width: 1.5px; margin-left: -.75px; height: calc(var(--faden) + 12px); background: linear-gradient(#bea06f, var(--champagner)); }
.anhaenger::after { content: ""; position: absolute; left: 50%; top: -3px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid #bea06f; border-radius: 50%; }
.etikett {
  position: relative; display: block;
  min-height: 158px;
  background: var(--weiss);
  padding: 38px 8px 20px;
  text-align: center; text-decoration: none; color: var(--tinte);
  clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  mask: radial-gradient(circle 5.5px at 50% 17px, transparent 97%, #000 100%);
}
.etikett::before { content: ""; position: absolute; left: 50%; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 3px solid var(--rosa); }
.etikett strong { display: block; font-family: "Bodoni", serif; font-weight: 500; font-size: clamp(.95rem, .82rem + .3vw, 1.1rem); line-height: 1.15; color: var(--wein); hyphens: manual; }
.etikett span { display: block; margin-top: 9px; font-size: .875rem; line-height: 1.35; color: var(--tinte-weich); hyphens: auto; }
a.etikett strong::after { content: " →"; font-family: "Jost", sans-serif; font-size: .8em; opacity: 0; transition: opacity .2s; }
a.etikett:hover strong::after, a.etikett:focus-visible strong::after { opacity: 1; }
@keyframes schaukeln {
  0% { rotate: 0deg; } 18% { rotate: 4deg; } 40% { rotate: -3deg; } 60% { rotate: 1.6deg; } 80% { rotate: -.6deg; } 100% { rotate: 0deg; }
}
.anhaenger:hover, .anhaenger:focus-within { animation: schaukeln 1.5s cubic-bezier(.3, .7, .3, 1); }

/* ------------------------------------------------------------------ Vitrine: Albumseite mit Fotoecken */
.vitrine {
  position: relative;
  padding: clamp(84px, 11vw, 160px) 0;
  background:
    repeating-linear-gradient(0deg, rgb(110 31 51 / .025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(110 31 51 / .025) 0 1px, transparent 1px 4px),
    var(--papier-tief);
}
.album {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px); row-gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
  margin-top: clamp(36px, 5.5vw, 72px);
}
.album-foto { margin: 0; transform: rotate(var(--r, 0deg)); }
.js .album-foto[data-zeigen] { transition: opacity 1s ease, translate 1.1s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
.album-bild { position: relative; background: var(--weiss); padding: 10px; box-shadow: var(--schatten-flach); transition: box-shadow .6s ease; }
.album-bild img { display: block; width: 100%; }
/* Fotoecken als feine Champagner-Winkel im weißen Rand, wie auf einer Schmuckkarte */
.ecken {
  position: absolute; inset: 4px; z-index: 1; pointer-events: none;
  --l: 18px; --d: 1.5px; --c: var(--champagner-tief);
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--d), linear-gradient(var(--c) 0 0) top left / var(--d) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--d), linear-gradient(var(--c) 0 0) top right / var(--d) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--d), linear-gradient(var(--c) 0 0) bottom left / var(--d) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--d), linear-gradient(var(--c) 0 0) bottom right / var(--d) var(--l);
  background-repeat: no-repeat;
}
.album-foto figcaption { padding: 16px 4px 0; }
.stueck-name { display: block; font-family: "Bodoni", serif; font-weight: 500; font-size: clamp(1.28rem, 1.1rem + .5vw, 1.55rem); line-height: 1.2; color: var(--wein); }
.stueck-name em { font-style: italic; font-weight: 400; font-size: .74em; color: var(--tinte-weich); margin-left: .12em; }
.stueck-zeile { display: block; font-size: .95rem; line-height: 1.45; color: var(--tinte-weich); margin-top: 6px; }
/* Oben das große Stück, daneben Zettel und Stimme; darunter drei Stücke leicht versetzt */
.a-quer { grid-column: 1 / 8; grid-row: 1 / 3; --r: -.8deg; }
.vitrine-zettel { grid-column: 9 / 13; grid-row: 1; --r: 2.5deg; margin-top: 12px; justify-self: start; width: min(100%, 19rem); }
.zitat-karte { grid-column: 9 / 13; grid-row: 2; align-self: start; margin-top: 4px; }
.a-kirsche { grid-column: 1 / 5; grid-row: 3; --r: 1.2deg; margin-top: 16px; }
.a-spark { grid-column: 5 / 9; grid-row: 3; --r: -1.2deg; margin-top: 96px; }
.a-shine { grid-column: 9 / 13; grid-row: 3; --r: .8deg; margin-top: 40px; }
.zettel-titel { font-size: 1.55rem; color: var(--wein); margin: 0 0 10px; }
.haken { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.haken li { position: relative; padding-left: 30px; font-weight: 500; font-size: 1.05rem; }
.haken li::before { content: ""; position: absolute; left: 4px; top: .28em; width: 9px; height: 15px; border: solid var(--wein-hell); border-width: 0 2.5px 2.5px 0; border-radius: 0 0 3px 0; transform: rotate(40deg); }
.garantie {
  display: inline-block; margin: 4px 0 12px;
  border: 2px solid var(--wein-hell); border-radius: 4px; padding: 5px 10px 4px;
  font: 600 .84rem/1 "Jost", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--wein-hell);
  transform: rotate(-6deg); mix-blend-mode: multiply; opacity: .9;
}
.zettel-ps { font-weight: 500; font-size: 1rem; line-height: 1.45; margin: 6px 0 0; color: var(--tinte); }
.zettel-ps .hand { font-size: 1.5rem; margin-right: .15em; }
.zitat-karte {
  --r: -1.2deg;
  margin-inline: 0;
  background: var(--weiss);
  padding: 34px 28px 24px;
  box-shadow: var(--schatten-flach);
  transform: rotate(var(--r));
  clip-path: polygon(0 3%, 4% 0, 9% 2.5%, 14% .5%, 20% 3%, 26% 0, 31% 2%, 37% .5%, 43% 3%, 49% 0, 55% 2.5%, 61% .5%, 67% 3%, 73% 0, 79% 2%, 85% .5%, 91% 3%, 96% 0, 100% 2.5%, 100% 100%, 0 100%);
}
.zitat-karte blockquote { margin: 0; }
.zitat-karte p { font-family: "Bodoni", serif; font-style: italic; font-size: 1.22rem; line-height: 1.5; margin: 0; }
.zitat-karte figcaption { margin-top: 14px; font-size: .94rem; color: var(--tinte-weich); }

/* ------------------------------------------------------------------ Braut & Anlass */
.braut { padding: clamp(88px, 12vw, 170px) 0 clamp(80px, 11vw, 160px); }
.braut-kopf { text-align: center; max-width: 46rem; margin: 0 auto; }
.braut-kopf p { margin: 20px auto 0; font-size: clamp(1.06rem, 1rem + .25vw, 1.18rem); color: var(--tinte-weich); max-width: 44ch; }
.braut-bilder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(44px, 6vw, 84px); align-items: start; }
.braut-gross { grid-column: 2 / 8; grid-row: 1 / 3; }
.braut-notiz { grid-column: 9 / 13; grid-row: 1; margin: clamp(40px, 7vw, 110px) 0 22px 6%; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); transform: rotate(-5deg); }
.braut-herz { width: .8em; margin-left: .2em; }
.braut-bogen { grid-column: 9 / 13; grid-row: 2; }

/* ------------------------------------------------------------------ Piercing: Ohr-Karte */
.piercing { padding: clamp(88px, 12vw, 170px) 0; }
.piercing-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "ohr titel" "ohr text";
  column-gap: clamp(36px, 6vw, 96px); align-items: center;
}
.piercing-raster > h2 { grid-area: titel; align-self: end; margin-bottom: 22px; line-height: 1.2; }
.piercing-raster > h2 em { margin-left: .12em; }
.piercing-text { grid-area: text; align-self: start; }
.ohr-karte { grid-area: ohr; position: relative; width: min(100%, 37.5rem); justify-self: center; aspect-ratio: var(--seiten, 290 / 212); color: var(--wein); }
.ohr-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ohr-linien path { opacity: .45; transition: opacity .3s, stroke-width .3s; color: var(--wein-hell); }
.ohr-linien path.aktiv { opacity: 1; stroke-width: 1.6; }
.ohr-punkte circle { fill: var(--gold); stroke: var(--weiss); stroke-width: 1.3; transition: r .35s cubic-bezier(.2, .9, .3, 1.4), fill .3s; }
.ohr-punkte circle.aktiv { r: 5.4px; fill: var(--wein-hell); }
.ohr-schild { position: absolute; transform: translateY(-50%); font-size: clamp(1.05rem, 1.7vw, 1.45rem); white-space: nowrap; color: var(--wein-hell); transition: color .3s, scale .3s; }
.ohr-schild.links { transform: translate(-100%, -50%); text-align: right; }
.ohr-schild.aktiv { color: var(--wein); scale: 1.08; }
.piercing-arten { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 14px; }
.piercing-arten > li { position: relative; padding-left: 22px; }
.piercing-arten > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--weiss); }
.piercing-arten > li > strong { font-family: "Bodoni", serif; font-weight: 500; font-size: 1.22rem; color: var(--wein); }
.ohr-teile { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ohr-teile li { font: 500 .95rem/1.2 "Jost", sans-serif; color: var(--wein); padding: 7px 14px; border: 1px solid rgb(110 31 51 / .22); border-radius: 999px; transition: background .25s, border-color .25s; }
.ohr-teile li.aktiv, .ohr-teile li:hover { background: var(--rosa); border-color: transparent; }
.piercing-zettel { --r: 1.8deg; max-width: 360px; margin: 30px 0 26px 8px; }
.piercing-zettel p { font: 500 1rem/1.5 "Jost", sans-serif; margin: 0; color: var(--tinte); }
.piercing-zettel strong.hand { display: block; font-size: 1.6rem; font-weight: 400; line-height: 1.1; color: var(--wein-hell); margin-bottom: 6px; }
.piercing-ansprechen { color: var(--tinte-weich); }

/* ------------------------------------------------------------------ Konzept: Notizblock */
.konzept { padding: clamp(56px, 7vw, 100px) 0 clamp(96px, 13vw, 180px); }
.konzept-raster { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.konzept-text { position: relative; }
.konzept-text h2 { margin-bottom: 22px; }
.konzept-haare { display: flex; gap: 14px; align-items: flex-start; }
.haare-bluete { width: 34px; margin-top: 2px; color: var(--wein-hell); }
.konzept-foto { margin-top: clamp(30px, 3.4vw, 44px); margin-left: 14px; }
.block {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 39px, rgb(110 31 51 / .15) 39px 40px) 0 66px / 100% calc(100% - 96px) no-repeat,
    var(--weiss);
  padding: 58px clamp(20px, 3vw, 34px) 30px clamp(64px, 7vw, 82px);
  box-shadow: var(--schatten);
  transform: rotate(1.8deg);
  max-width: 33.75rem; justify-self: center; width: 100%;
  container-type: inline-size;
}
.block::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(46px, 5vw, 58px); width: 2px; background: rgb(236 110 146 / .5); }
.block::after { content: ""; position: absolute; top: 14px; left: 22px; right: 22px; height: 16px; background: radial-gradient(circle at 8px 8px, var(--papier) 0 5.5px, transparent 6.2px) 0 0 / 30px 16px repeat-x; }
.block-titel { font-size: 1.9rem; color: var(--wein); margin: 0 0 4px; line-height: 40px; }
.block-liste { list-style: none; margin: 0; padding: 0; }
.block-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; line-height: 40px; min-height: 40px; }
/* Schriftgröße folgt der Blockbreite (cqi): die längste Zeile passt immer; im Notfall bricht sie um statt abgeschnitten zu werden */
.block-liste .block-name, .block-liste .preis { font-family: "Bodoni", serif; font-size: clamp(1rem, 1rem + .3vw, 1.25rem); font-size: clamp(1rem, calc(6.2cqi), 1.25rem); color: var(--wein); }
.block-liste .block-name { font-style: italic; }
.block-liste .preis { flex: none; font-variant-numeric: lining-nums tabular-nums; color: var(--wein-hell); }
.block-fuss { font-size: .9rem; color: var(--tinte-weich); margin: 16px 0 0; }

/* ------------------------------------------------------------------ Community: Einladung */
.community {
  padding: clamp(84px, 11vw, 160px) 0;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgb(254 219 188 / .6), transparent 70%),
    radial-gradient(ellipse 60% 55% at 92% 100%, rgb(252 159 159 / .32), transparent 70%),
    var(--papier);
}
.einladung { position: relative; max-width: 67.5rem; margin: 0 auto; background: var(--weiss); padding: clamp(40px, 6vw, 84px) clamp(22px, 6vw, 84px); box-shadow: var(--schatten); }
.einladung::before { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgb(110 31 51 / .26); pointer-events: none; }
.einladung-kopf { text-align: center; max-width: 740px; margin: 0 auto clamp(36px, 5vw, 56px); }
.einladung-kopf p { margin: 18px auto 0; font-size: 1.14rem; }
.einladung-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.community-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.community-punkte li { display: flex; gap: 14px; align-items: flex-start; }
.punkt-herz { width: 20px; margin-top: 5px; }
.umfrage fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.umfrage legend { padding: 0; font-family: "Bodoni", serif; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); color: var(--wein); margin-bottom: 18px; line-height: 1.2; }
.umfrage-optionen { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.umfrage label { position: relative; cursor: pointer; }
.umfrage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.umfrage label > span {
  position: relative; display: inline-block;
  padding: .5em 1.05em .52em;
  border-radius: 999px;
  background: var(--papier);
  border: 1.5px solid rgb(110 31 51 / .18);
  font-weight: 500; font-size: .98rem;
  transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4);
}
.umfrage label:hover > span { background: var(--rosa); transform: rotate(-1.5deg); }
.umfrage input:checked + span { background: var(--rosa); border-color: transparent; }
.umfrage input:focus-visible + span { outline: 2px dashed var(--wein); outline-offset: 4px; }
.umfrage-kringel { position: absolute; left: -10px; top: -9px; width: calc(100% + 20px); height: calc(100% + 18px); color: var(--wein-hell); opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path .55s ease, opacity .05s; pointer-events: none; }
.umfrage input:checked + span .umfrage-kringel { opacity: 1; clip-path: inset(0 0 0 0); }
.umfrage-ergebnisse { margin-top: 28px; }
.ergebnis { display: none; grid-template-columns: 124px minmax(0, 1fr); gap: 20px; align-items: center; background: var(--papier); padding: 18px 20px; }
.ergebnis p { margin: 0; }
.ergebnis-name { font-family: "Bodoni", serif; font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var(--wein); margin-bottom: 6px !important; }
.abzug-mini { --r: -4deg; padding: 6px 6px 20px; box-shadow: var(--schatten-flach); }
.ergebnis-kritzel { display: grid; place-items: center; height: 124px; }
.ergebnis-kritzel .kritzel { width: 72px; color: var(--gold-tief); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.umfrage:has(input[value="schlicht"]:checked) .ergebnis[data-antwort="schlicht"],
.umfrage:has(input[value="feminin"]:checked) .ergebnis[data-antwort="feminin"],
.umfrage:has(input[value="statement"]:checked) .ergebnis[data-antwort="statement"],
.umfrage:has(input[value="gold"]:checked) .ergebnis[data-antwort="gold"],
.umfrage:has(input[value="silber"]:checked) .ergebnis[data-antwort="silber"],
.umfrage:has(input[value="glitzer"]:checked) .ergebnis[data-antwort="glitzer"] { display: grid; animation: auftauchen .45s ease both; }
.umfrage-hinweis { font-size: .95rem; color: var(--tinte-weich); margin: 18px 0 0; }
.einladung-aktion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: clamp(36px, 5vw, 56px) 0 0; max-width: none; }
.gooo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.7rem; color: var(--wein-hell); transform: rotate(-6deg); }
.gooo-pfeil { width: 58px; transform: scaleX(-1) rotate(-10deg); }
/* Wachssiegel mit Schleife, halb über der Oberkante der Karte */
.siegel {
  position: absolute; top: -40px; left: 50%; z-index: 2;
  width: 80px; height: 80px; margin-left: -40px;
  border-radius: 48% 52% 50% 50% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 36% 30%, #a3304c, var(--wein) 58%, #4f1323);
  box-shadow: 0 8px 14px -6px rgb(60 10 20 / .6), inset 0 -3px 7px rgb(0 0 0 / .28), inset 0 3px 6px rgb(255 255 255 / .16);
  display: grid; place-items: center;
  transform: rotate(-8deg);
}
.siegel::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid rgb(246 227 172 / .35); }
.siegel .kritzel { width: 42px; color: #f1d7a0; }
/* Das Armband liegt unten links halb unter der Karte: es überdeckt nur den Kartenrand, nie Text oder Knopf,
   und bleibt innerhalb des Seitenrands (--rand), damit es nicht angeschnitten wird. */
.einladung-armband {
  --armband: 190px;
  --in-karte: 110px;                       /* so weit liegt es auf der Karte; Desktop: unten links ist dort freie Fläche */
  position: absolute; z-index: 2;
  width: var(--armband);
  left: calc(20px - var(--rand));          /* 20 px: auch die gedrehte Bildecke bleibt im sichtbaren Bereich */
  bottom: calc(var(--in-karte) - var(--armband) * 1.149);
  transform: rotate(-16deg);
  filter: drop-shadow(0 8px 8px rgb(110 31 51 / .25));
  pointer-events: none;
}

/* ------------------------------------------------------------------ Besuch: Postkarte */
.besuch { padding: clamp(88px, 12vw, 170px) 0 clamp(88px, 11vw, 150px); }
.besuch-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  grid-template-areas: "karte weg" "stimmen stimmen";
  gap: clamp(36px, 5vw, 72px);
  margin-top: clamp(32px, 5vw, 56px);
  align-items: start;
}
.postkarte {
  grid-area: karte;
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--weiss);
  padding: clamp(22px, 3vw, 40px);
  box-shadow: var(--schatten);
  transform: rotate(-1.2deg);
  min-height: 380px;
}
.pk-links { padding-right: clamp(16px, 2.4vw, 32px); border-right: 1.5px solid rgb(110 31 51 / .2); display: flex; flex-direction: column; }
.pk-gruss { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.62rem); color: var(--wein); line-height: 1.28; margin-bottom: 22px; }
.zeiten { margin: 0 0 18px; }
.zeiten div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted rgb(110 31 51 / .35); padding: 7px 0; }
.zeiten dt, .zeiten dd { margin: 0; }
.zeiten dd { font-weight: 500; }
.pk-status { margin: auto 0 0; display: flex; align-items: center; gap: .55em; font-weight: 500; color: var(--wein); }
.pk-rechts { position: relative; padding-left: clamp(16px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; }
.briefmarke {
  position: absolute; top: 0; right: 0;
  width: 86px; height: 104px; padding: 7px;
  background: radial-gradient(circle at 5px 5px, transparent 0 3.3px, #fff 3.8px) -5px -5px / 10px 10px;
  filter: drop-shadow(0 1px 1.5px rgb(110 31 51 / .35));
  transform: rotate(4deg);
}
.briefmarke-motiv { height: 100%; background: var(--rosa); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--wein); }
.briefmarke-motiv .kritzel { width: 46px; color: var(--wein); }
.briefmarke-motiv span { font: italic 500 .72rem "Bodoni", serif; letter-spacing: .02em; }
.poststempel { position: absolute; top: 20px; right: 64px; width: 170px; color: var(--wein-hell); opacity: .62; transform: rotate(-10deg); mix-blend-mode: multiply; }
.poststempel svg { display: block; width: 100%; height: auto; filter: url(#tinte); }
.poststempel text { fill: currentColor; font-family: "Jost", sans-serif; font-weight: 600; }
address { font-style: normal; }
address span { display: block; font-family: "Bodoni", serif; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height: 1.3; color: var(--tinte); border-bottom: 1px solid rgb(110 31 51 / .22); padding: 12px 0 5px; }
.weg { grid-area: weg; }
.weg h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.weg h3 .icon { width: 26px; height: 26px; color: var(--wein-hell); }
.weg p { color: var(--tinte-weich); margin-bottom: 26px; }
.weg-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.weg-kontakt { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.weg-kontakt .verweis { white-space: nowrap; }
.stimmen { grid-area: stimmen; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.bewertung-zahl { font: 500 clamp(3.6rem, 3rem + 2vw, 4.8rem)/1 "Bodoni", serif; color: var(--wein); }
.stern { width: 40px; height: 40px; color: var(--gold); }
.bewertung-text { flex-basis: 100%; font-size: .95rem; color: var(--tinte-weich); line-height: 1.45; }
.stimmen-alle { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
.stimme { position: relative; margin: 0; background: var(--weiss); padding: 34px 26px 22px; box-shadow: var(--schatten-flach); transform: rotate(var(--r, 0deg)); }
.stimme > .klebeband { top: -12px; left: 50%; margin-left: -48px; }
.stimme blockquote { margin: 0; }
.stimme p { font-family: "Bodoni", serif; font-style: italic; font-size: 1.14rem; line-height: 1.5; margin: 0; }
.stimme figcaption { margin-top: 14px; font-size: .94rem; color: var(--tinte-weich); }
.stimmen > .stimme:nth-of-type(1) { grid-row: 1 / span 2; }
.stimmen > .stimme:nth-of-type(2) { grid-row: 1 / span 2; margin-top: 36px; }

/* ------------------------------------------------------------------ Fuß */
.fuss { background: var(--papier-tief); padding: clamp(56px, 8vw, 84px) 0 32px; border-top: 1.5px dashed rgb(110 31 51 / .2); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.fuss-marke img { display: block; width: 180px; }
.fuss-marke .hand { font-size: 1.4rem; margin: 18px 0 0; }
.fuss-titel { font: 600 .84rem/1.2 "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--wein); margin-bottom: 14px; }
.fuss p { font-size: .98rem; }
.fuss a { display: inline-block; padding-block: .42em; color: var(--tinte); text-decoration-color: rgb(110 31 51 / .35); text-underline-offset: 3px; }
.fuss p:has(> a) { line-height: 1.4; }
.fuss a:hover { color: var(--wein); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; font-size: .9rem; color: var(--tinte-weich); }
.fuss-unten::before { content: ""; flex-basis: 100%; border-top: 1px dotted rgb(110 31 51 / .3); margin-bottom: 8px; }
.fuss-unten p { margin: 0; }
.fuss-recht { display: flex; gap: 8px 20px; }
.fuss-recht a { padding-block: .7em; }

/* ------------------------------------------------------------------ Rechtliche Seiten und 404 */
.recht { padding: clamp(36px, 6vw, 72px) var(--rand) clamp(72px, 10vw, 120px); }
.recht-blatt { max-width: 780px; margin: 0 auto; background: var(--weiss); padding: clamp(28px, 6vw, 68px); box-shadow: var(--schatten); }
.recht h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.3rem); margin-bottom: 18px; }
.recht h2 { font-size: 1.32rem; margin: 34px 0 8px; font-weight: 600; }
.recht p { max-width: 68ch; }
.recht-hinweis { background: var(--papier); border-left: 3px solid var(--wein-hell); padding: 12px 16px; font-size: .95rem; }
.recht-stand { margin-top: 32px; color: var(--tinte-weich); }
.platzhalter { background: rgb(252 159 159 / .45); color: var(--wein); padding: 0 .3em; border-radius: 3px; font: 500 .86em ui-monospace, "Cascadia Mono", Consolas, monospace; }
.fehler .recht-blatt { text-align: center; position: relative; }
.fehler-hand { position: relative; display: inline-block; font-size: 2.4rem; margin: 0 0 22px; padding: 4px 22px; transform: rotate(-4deg); }
.fehler-kringel { position: absolute; left: -6px; top: -4px; width: calc(100% + 12px); height: calc(100% + 8px); opacity: .55; }
.fehler p { margin-inline: auto; }

/* ------------------------------------------------------------------ Einblenden beim Scrollen */
.js [data-zeigen] { opacity: 0; translate: 0 16px; transition: opacity 1s ease, translate 1.1s cubic-bezier(.2, .8, .2, 1); }
.js [data-zeigen].sichtbar { opacity: 1; translate: 0 0; }
@media print { .js [data-zeigen] { opacity: 1; translate: none; } body::after { display: none; } }

/* ------------------------------------------------------------------ Breiten */
@media (max-width: 1180px) {
  .brief-foto { width: 14rem; left: calc(50% - 21.25rem - 13rem); }
  .randnotiz { right: calc(50% - 340px - 180px); width: 170px; font-size: 1.4rem; }
}
@media (max-width: 1040px) {
  .kopf-offen { display: none; }
  .stimmen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bewertung { grid-column: 1 / -1; }
  .stimmen-alle { grid-column: 1 / -1; grid-row: auto; }
  .stimmen > .stimme:nth-of-type(1), .stimmen > .stimme:nth-of-type(2) { grid-row: auto; }
  .besuch-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "karte" "weg" "stimmen"; }
  .postkarte { max-width: 760px; }
  .brief-rahmen { justify-items: center; }
  .brief-foto { position: relative; left: auto; top: auto; width: min(58%, 15rem); margin: 0 0 -44px; transform: rotate(-3deg); }
  .randnotiz { position: relative; right: auto; top: auto; width: auto; margin: 40px 0 0; transform: rotate(-3deg); text-align: center; }
  .randnotiz-pfeil { display: none; }
}
@media (max-width: 960px) {
  .menue-knopf { display: inline-flex; }
  .kopf-insta { margin-left: 0; }
  .kopf-nav {
    position: fixed; left: 0; right: 0; top: var(--kopf-hoehe);
    display: none;
    background: var(--papier);
    padding: 12px var(--rand) 32px;
    border-bottom: 1.5px dashed rgb(110 31 51 / .2);
    box-shadow: 0 24px 40px -30px rgb(110 31 51 / .6);
  }
  .kopf.menue-offen .kopf-nav { display: block; }
  .kopf-nav ul { flex-direction: column; gap: 0; }
  .kopf-nav a { display: block; font-family: "Bodoni", serif; font-size: 1.9rem; color: var(--wein); padding: 10px 0; background: none; }
  .kopf-nav-zeiten { display: block; margin: 18px 0 0; color: var(--tinte-weich); font-size: .95rem; }
  .kopf-nav { margin-left: 0; }
  .kopf-insta { order: 3; }
  .menue-knopf { order: 4; margin-left: 0; }
  .kopf-logo { margin-right: auto; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
  .collage { justify-self: center; max-width: 30rem; margin-top: 12px; }
  .anhaenger-liste {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 38%);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: 26px; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand);
    scrollbar-width: thin; scrollbar-color: var(--rosa-kraeftig) transparent;
  }
  .anhaenger { scroll-snap-align: center; }
  /* Handy: ein Stück pro Reihe, groß und abwechselnd links und rechts */
  .album { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .a-quer, .a-kirsche, .a-spark, .a-shine, .vitrine-zettel, .zitat-karte { grid-column: 1; grid-row: auto; margin-top: 0; }
  .a-kirsche, .a-shine { width: 82%; justify-self: start; }
  .a-spark { width: 82%; justify-self: end; }
  .vitrine-zettel { justify-self: end; width: min(90%, 330px); margin-top: 6px; }
  /* Braut: großes Foto links, Bogen überlappt es unten rechts */
  .braut-bilder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .braut-gross { grid-column: 1 / 6; grid-row: 1; max-width: 30rem; }
  .braut-notiz { grid-column: 1 / 4; grid-row: 2; align-self: start; margin: 28px 0 0 2%; }
  .braut-bogen { grid-column: 4 / 7; grid-row: 2; width: 100%; max-width: 19rem; justify-self: end; margin-top: -88px; z-index: 2; }
  .konzept-foto { margin-left: 10px; max-width: 36rem; }
  .konzept-raster, .einladung-raster { grid-template-columns: minmax(0, 1fr); }
  /* Piercing: erst die Überschrift, dann die Ohr-Karte, dann der Text */
  .piercing-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "ohr" "text"; }
  .piercing-raster > h2 { align-self: auto; margin-bottom: 28px; }
  .ohr-karte { max-width: 460px; margin-bottom: 34px; }
  .stempel { right: -14px; }
  .einladung-armband { --armband: 150px; --in-karte: 36px; }   /* einspaltig: Knopf sitzt weiter links, Armband bleibt darunter */
  .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --kopf-hoehe: 4rem; }
  .einladung-armband { --armband: 118px; }
  /* Einladung kompakter, bleibt aber Karte mit Siegel und gestrichelter Linie */
  .einladung { padding: 50px 20px 40px; }
  .einladung::before { inset: 10px; }
  .einladung-kopf { margin-bottom: 30px; }
  .community-punkte { gap: 12px; }
  .gooo { font-size: 1.45rem; }
  .block { padding-left: 52px; padding-right: 16px; }
  .block::before { left: 38px; }
  .block::after { left: 14px; right: 14px; }
  .ohr-schild { font-size: .98rem; }
  .kopf-logo img { width: 7.375rem; }
  .menue-knopf-text { display: none; }
  .menue-knopf { padding: 8px 10px; }
  .hero-aktionen .knopf { width: 100%; justify-content: center; }
  .abzug { padding: 7px; }
  .abzug-hero { padding: 7px 7px 0; width: 42%; }
  .collage > .bogen-hero { width: 78%; right: 2%; }
  .stempel { width: 108px; right: 2px; bottom: -62px; }
  .randnotiz { margin-top: 84px; font-size: 1.35rem; }
  .brief { padding-bottom: 72px; }
  .postkarte { grid-template-columns: minmax(0, 1fr); transform: rotate(-.6deg); }
  .pk-links { border-right: 0; padding-right: 0; border-bottom: 1.5px solid rgb(110 31 51 / .2); padding-bottom: 22px; }
  .pk-rechts { padding-left: 0; padding-top: 130px; min-height: 0; }
  .poststempel { top: 14px; right: 88px; width: 150px; }
  .briefmarke { top: 18px; }
  .stimmen { grid-template-columns: minmax(0, 1fr); }
  .ergebnis { grid-template-columns: 92px minmax(0, 1fr); padding: 14px; gap: 14px; }
  .ergebnis-name { font-size: 1.3rem; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet (700 bis 860 px): Album wie auf dem Desktop gruppiert, nur auf sechs Spalten verteilt */
@media (min-width: 700px) and (max-width: 860px) {
  .album { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .a-quer { grid-column: 1 / 5; grid-row: 1; }
  .vitrine-zettel { grid-column: 5 / 7; grid-row: 1; justify-self: stretch; width: auto; margin: 26px 0 0; padding: 32px 18px 20px; }
  .a-kirsche { grid-column: 1 / 3; grid-row: 2; width: auto; }
  .a-spark { grid-column: 3 / 5; grid-row: 2; width: auto; justify-self: stretch; margin-top: 40px; }
  .a-shine { grid-column: 5 / 7; grid-row: 2; width: auto; margin-top: 14px; }
  .zitat-karte { grid-column: 2 / 6; grid-row: 3; margin-top: 6px; }
}

/* Sehr breite Bildschirme: alles in rem wächst proportional mit, der Inhalt wirkt nicht verloren */
@media (min-width: 1680px) {
  html { font-size: 106.25%; }
  :root { --breite: 80rem; }
}
@media (min-width: 2200px) {
  html { font-size: 112.5%; }
  :root { --breite: 84rem; }
}

/* ------------------------------------------------------------------ Feine Bewegung */
@media (hover: hover) and (pointer: fine) {
  .bogen-bild img { transition: scale 1.4s cubic-bezier(.2, .8, .2, 1); }
  .bogen:hover .bogen-bild img { scale: 1.035; }
  .album-foto:hover { transform: rotate(var(--r, 0deg)) translateY(-4px); }
  .album-foto:hover .album-bild { box-shadow: 0 1px 1px rgb(110 31 51 / .08), 0 22px 34px -18px rgb(110 31 51 / .42); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes bogen-treiben { from { transform: scale(1.1) translateY(-3.5%); } to { transform: scale(1.1) translateY(3.5%); } }
    .bogen-bild img { animation: bogen-treiben linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* ------------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-zeigen] { opacity: 1; translate: none; }
}