/* ====================================================================
   Vorlage „Fotoecke" · wie an die Wand geheftet

   Bilder mit weißem Rand, Klebestreifen darüber, Notizzettel mit
   Handschrift.

   DER KLEBESTREIFEN IST ZWEIMAL DASSELBE PSEUDOELEMENT: ::before für
   oben links, ::after für unten rechts. Halbdurchsichtig, mit einem
   ganz leichten Verlauf quer, damit er nicht wie ein aufgemalter
   Balken aussieht.

   DIE DREHUNGEN SIND KLEIN. Über zwei Grad wirkt nichts mehr wie
   „angeheftet", sondern wie „verrutscht", und ein Nutzer versucht,
   es geradezurücken. Alle Werte hier liegen zwischen 0,5 und 1,8
   Grad, und sie wechseln die Richtung · gleichsinnig gekippte
   Kacheln lesen sich als Fehler im Layout.
   ==================================================================== */

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

.ev--fotoecke {
  --grund: #efece5;
  --grund-2: #fffdf8;
  --schrift: #22201d;
  --schrift-2: #5d584f;
  --linie: #d8d3c8;

  --schrift-anzeige: "Figtree", system-ui, sans-serif;
  --schrift-text: "Figtree", system-ui, sans-serif;
  --schrift-hand: "Caveat", "Segoe Script", cursive;

  --ecke: 4px;
  --ecke-gross: 6px;
  --rand: clamp(1.25rem, 5vw, 3rem);

  --akzent: #2f5ecb;
  --akzent-text: #28499c;
  --auf-akzent: #fffdf8;

  /* Das Klebeband. Ein warmes, sehr blasses Gelb · durchsichtiges
     Klebeband ist auf einem Foto genau das. */
  --band: rgba(226, 205, 138, 0.5);
}

.ev--fotoecke.akzent-kobalt   { --akzent: #2f5ecb; --akzent-text: #28499c; --auf-akzent: #fffdf8; }
.ev--fotoecke.akzent-himbeere { --akzent: #e0526f; --akzent-text: #a52840; --auf-akzent: #fffdf8; }
.ev--fotoecke.akzent-sonne    { --akzent: #f0a92b; --akzent-text: #8a5a03; --auf-akzent: #22201d; }
.ev--fotoecke.akzent-moos     { --akzent: #2f7a52; --akzent-text: #256040; --auf-akzent: #fffdf8; }
.ev--fotoecke.akzent-pflaume  { --akzent: #8d6480; --akzent-text: #6a4160; --auf-akzent: #fffdf8; }

/*
 * Die Wand.
 *
 * Ein sehr feines Raster aus zwei Verläufen · sichtbar genug, dass
 * die Fläche nicht flach wirkt, leise genug, dass niemand es als
 * Muster beschreiben würde. Als Bild wären das 30 kB für etwas, das
 * man nicht bemerken soll.
 */
.ev--fotoecke {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 7px);
}

.fe-innen {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.fe-innen--schmal { max-width: 42rem; }

/* == Klebeband ======================================================
   Eine gemeinsame Klasse für alles, was angeheftet ist. */

.fe-zettel,
.fe-abzug,
.fe-karte,
.fe-ablaufblock .ev-ablauf-punkt,
.fe-hinweisblock .ev-hinweis,
.fe-galerieblock .ev-galerie-bild {
  position: relative;
  background: var(--grund-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09), 0 12px 28px rgba(0, 0, 0, 0.05);
}

.fe-zettel::before,
.fe-abzug::before,
.fe-karte::before,
.fe-ablaufblock .ev-ablauf-punkt::before,
.fe-hinweisblock .ev-hinweis::before,
.fe-galerieblock .ev-galerie-bild::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 1.5rem;
  width: 4.5rem;
  height: 1.35rem;
  background: linear-gradient(100deg, transparent 0 4%, var(--band) 4% 96%, transparent 96%);
  rotate: -2.5deg;
  pointer-events: none;
}

/* Der zweite Streifen unten rechts · nur an den großen Flächen, sonst
   sieht die Seite aus, als hätte jemand Klebeband gesammelt. */
.fe-zettel::after,
.fe-abzug--kopf::after,
.fe-galerieblock .ev-galerie-bild::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  right: 1.75rem;
  width: 3.75rem;
  height: 1.2rem;
  background: linear-gradient(80deg, transparent 0 5%, var(--band) 5% 95%, transparent 95%);
  rotate: 3deg;
  pointer-events: none;
}

/* == Kopfbereich ==================================================== */

.fe-kopf { padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(1rem, 3vw, 2rem); }

.fe-kopfraster { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 54rem) {
  .fe-kopfraster { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

.fe-zettel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  rotate: -0.8deg;
}

.fe-anlass {
  font-family: var(--schrift-hand);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--akzent-text);
}

.fe-titel {
  margin-top: 0.6rem;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.fe-name {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--schrift-2);
}

.fe-zettel .ev-termin {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 2px dashed var(--linie);
}
.fe-zettel .ev-termin-datum { font-size: 1.4rem; font-weight: 700; }
.fe-zettel .ev-countdown { margin-top: 0.9rem; }
.fe-zettel .ev-countdown-zahl { font-family: var(--schrift-hand); font-size: 3.4rem; }

/* Der Abzug: weißer Rand rundum, unten breiter · wie ein Sofortbild. */
.fe-abzug { padding: 0.75rem 0.75rem 2.75rem; }
.fe-abzug img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.fe-abzug--kopf { rotate: 1.4deg; }

/* == Abschnitte ===================================================== */

.fe-abschnitt { padding-block: clamp(2rem, 4.5vw, 3.25rem); }

.fe-ueberschrift {
  font-family: var(--schrift-hand);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.1rem;
  color: var(--akzent-text);
}

/* Der große Zettel · das Einzige, was gerade hängt. */
.fe-gruss .fe-innen--schmal {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--grund-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09), 0 14px 30px rgba(0, 0, 0, 0.05);
}
.fe-grusstext {
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

.fe-fliess { color: var(--schrift-2); max-width: 54ch; }

.fe-karte { padding: clamp(1.4rem, 3vw, 2rem); rotate: -0.6deg; }
.fe-karte--klein { rotate: 0.9deg; }
.fe-karte .ev-ort-name { font-size: 1.3rem; font-weight: 700; }

/* == Ablauf =========================================================
   Ein Stapel kleiner Zettel nebeneinander. Vier Neigungen im
   Wechsel · siehe die Begründung ganz oben. */

.fe-ablaufblock .ev-ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1.5rem 1.25rem;
}
.fe-ablaufblock .ev-ablauf-punkt { padding: 1.9rem 1.35rem 1.35rem; }
.fe-ablaufblock .ev-ablauf-punkt:nth-child(4n+1) { rotate: -1.2deg; }
.fe-ablaufblock .ev-ablauf-punkt:nth-child(4n+2) { rotate:  0.9deg; }
.fe-ablaufblock .ev-ablauf-punkt:nth-child(4n+3) { rotate: -0.5deg; }
.fe-ablaufblock .ev-ablauf-punkt:nth-child(4n)   { rotate:  1.5deg; }
.fe-ablaufblock .ev-ablauf-punkt:nth-child(3n)::before { left: auto; right: 1.5rem; rotate: 2.5deg; }

.fe-ablaufblock .ev-ablauf-zeit {
  font-family: var(--schrift-hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--akzent-text);
}
.fe-ablaufblock .ev-ablauf-titel { margin-top: 0.4rem; font-weight: 700; }
.fe-ablaufblock .ev-ablauf-satz { margin-top: 0.2rem; font-size: 0.9375rem; }

/* == Hinweise ======================================================= */

.fe-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 1.25rem;
}
.fe-hinweisblock .ev-hinweis { padding: 1.9rem 1.35rem 1.35rem; }
.fe-hinweisblock .ev-hinweis:nth-child(odd)  { rotate: -0.9deg; }
.fe-hinweisblock .ev-hinweis:nth-child(even) { rotate:  1.1deg; }
.fe-hinweisblock .ev-hinweis:nth-child(even)::before { left: auto; right: 1.5rem; rotate: 2deg; }
.fe-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-hand);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--akzent-text);
}

/* == Galerie ======================================================== */

.fe-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 1.5rem;
}
.fe-galerieblock .ev-galerie-bild { padding: 0.75rem 0.75rem 0.5rem; }
.fe-galerieblock .ev-galerie-bild:nth-child(3n+1) { rotate: -1.4deg; }
.fe-galerieblock .ev-galerie-bild:nth-child(3n+2) { rotate:  1deg; }
.fe-galerieblock .ev-galerie-bild:nth-child(3n)   { rotate: -0.6deg; }
.fe-galerieblock .ev-galerie-bild img { aspect-ratio: 1 / 1; object-fit: cover; }
.fe-galerieblock figcaption {
  font-family: var(--schrift-hand);
  font-size: 1.3rem;
  line-height: 1.15;
  text-align: center;
  color: var(--schrift-2);
  padding-block: 0.6rem 0.35rem;
}

/* == Zu- und Absage ================================================= */

.fe-rsvpblock .ev-rsvp {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--grund-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09), 0 14px 30px rgba(0, 0, 0, 0.05);
}
.fe-rsvpblock .ev-feld input,
.fe-rsvpblock .ev-feld textarea { background: #fff; border-color: var(--linie); }
.fe-rsvpblock .ev-antwort-wahl label { background: #fff; }
.fe-rsvpblock .ev-rsvp-danke { background: #fff; }
.fe-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-hand); font-size: 2.1rem; }

/* == Kontakt ======================================================== */

.fe-kontaktblock .ev-kontakt h3 { font-family: var(--schrift-hand); font-size: 1.9rem; color: var(--akzent-text); }

/* == Auftritt =======================================================
   Angeheftet wird von oben · deshalb kommen die Stücke von dort und
   drehen sich dabei in ihre Neigung hinein. Zwei Bildfolgen, weil
   Zettel und Abzug in verschiedene Richtungen kippen. */

@media (prefers-reduced-motion: no-preference) {
  .fe-zettel { animation: fe-anheften-links 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fe-abzug--kopf { animation: fe-anheften-rechts 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both; }
}

@keyframes fe-anheften-links {
  from { opacity: 0; transform: translateY(-1.25rem); rotate: -4deg; }
  to   { opacity: 1; transform: none; rotate: -0.8deg; }
}
@keyframes fe-anheften-rechts {
  from { opacity: 0; transform: translateY(-1.25rem); rotate: 5deg; }
  to   { opacity: 1; transform: none; rotate: 1.4deg; }
}

/* == Druck ==========================================================
   Klebeband und Neigung gehören nicht aufs Papier · ein Ausdruck
   soll gerade in der Hand liegen. */
@media print {
  .fe-zettel, .fe-abzug, .fe-karte,
  .fe-ablaufblock .ev-ablauf-punkt, .fe-hinweisblock .ev-hinweis { rotate: none; box-shadow: none; }
  .fe-zettel::before, .fe-zettel::after,
  .fe-abzug::before, .fe-abzug--kopf::after,
  .fe-karte::before,
  .fe-ablaufblock .ev-ablauf-punkt::before,
  .fe-hinweisblock .ev-hinweis::before { display: none; }
}