/* =========================================================================
   Kirchgemeinde – temporäre Website
   Aesthetic: warm editorial, Swiss-tinged. Yellow identity, green accent,
   deep-ink type on warm paper. Display: Fraunces. Body: Hanken Grotesk.
   ========================================================================= */

:root {
  --yellow:      #E8D64C;   /* main brand colour */
  --yellow-deep: #D8C32E;
  --yellow-soft: #F3E892;
  --green:       #00b46f;   /* logo foreground */
  --green-deep:  #008554;
  --green-700:   #006b44;
  --ink:         #16241c;   /* near-black, green-tinted */
  --ink-soft:    #45554c;
  --paper:       #FBF8EC;   /* warm cream */
  --paper-2:     #F4EFDC;
  --line:        #DED7BB;
  --muted:       #9aa39b;   /* past / inactive */
  --muted-bg:    #EFEDE3;

  --shadow: 0 1px 2px rgba(22,36,28,.05), 0 10px 30px -12px rgba(22,36,28,.18);
  --maxw: 1080px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(115% 80% at 100% 0%, rgba(232,214,76,.30) 0%, rgba(232,214,76,0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,180,111,.07) 0%, rgba(0,180,111,0) 50%);
  background-attachment: fixed;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: var(--green-deep); text-decoration: none; }
a:hover { color: var(--green-700); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---------- Temporary banner ---------- */
.tempbar {
  display:none;
  background: var(--ink);
  color: var(--yellow-soft);
  font-size: 13.5px;
  letter-spacing: .03em;
  text-align: center;
  padding: 8px 16px;
  position: relative; z-index: 3;
}
.tempbar b { color: var(--yellow); font-weight: 600; }

/* ---------- Header / nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 5;
  background: rgba(251,248,236,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  /* display: flex; align-items: center; gap: 22px; */
  display: flex; align-items: center;
  flex-wrap: wrap; row-gap: 6px;
  padding: 14px 28px;
  max-width: var(--maxw); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand img { height: 34px; width: auto; }
.brand .name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.brand .name small {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav a.navlink {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  padding: 6px 2px;
  position: relative;
}
.nav a.navlink::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--green);
  transition: right .25s ease;
}
.nav a.navlink:hover::after { right: 0; }
.nav a.navlink.active { color: var(--green-700); }
.nav a.navlink.active::after { right: 0; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; padding: 64px 0 38px; }
.hero .eyebrow {
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 700; margin: 0 0 18px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 16ch;
}
.hero h1 em { font-style: italic; color: var(--green-deep); }
.hero p.lead {
  font-size: 19px; max-width: 54ch; color: var(--ink-soft); margin: 0 0 30px;
}
.hero-skyline {
  margin: 30px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
}
.hero-skyline img { width: 100%; max-width: 760px; opacity: .92; }

/* yellow plate behind hero */
.plate {
  position: relative;
  background: var(--yellow);
  border-radius: 26px;
  padding: 52px 48px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plate::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,111,.20), transparent 65%);
}
.plate .eyebrow { color: var(--green-700); }
.plate h1 { color: var(--ink); }
.plate p.lead { color: rgba(22,36,28,.72); }
.plate .hero-skyline { border-top-color: rgba(22,36,28,.16); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--yellow-soft);
  font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 999px;
  transition: transform .15s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--green-700); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--yellow-soft); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Info cards (home) ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 56px 0; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 30px 26px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--green); }
.card .tag {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 700;
}
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; margin: 10px 0 8px; }
.card p { margin: 0 0 16px; color: var(--ink-soft); }
.card .go { font-weight: 600; }
.card .go::after { content: " →"; transition: margin .2s ease; }
.card:hover .go::after { margin-left: 4px; }

/* Reservation/Anfragen: highlight the external link and its home card */
.nav a.navlink.reservation { color: var(--green-700); }
.nav a.navlink.reservation::after { background: var(--green-700); }
.card.card-accent { background: var(--yellow-soft); border-color: var(--yellow-deep); }
.card.card-accent:hover { border-color: var(--green); }
.card.card-accent .tag { color: var(--green-700); }

/* Anfragen page: three form cards side by side */
.forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 40px 0 80px; }
@media (max-width: 820px) { .forms { grid-template-columns: 1fr; } }

/* ---------- Generic page header ---------- */
.page-head { padding: 52px 0 8px; }
.page-head .eyebrow {
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 700; margin: 0 0 10px;
}
.page-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.5vw, 56px); letter-spacing: -0.02em; margin: 0;
}
.page-head p { color: var(--ink-soft); max-width: 60ch; margin: 14px 0 0; }

/* ---------- Menschen grid ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px;
  padding: 40px 0 80px;
}
.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.person:hover { transform: translateY(-4px); border-color: var(--green); }
.person .photo {
  aspect-ratio: 4 / 5;
  background: var(--yellow-soft);
  position: relative; overflow: hidden;
}
.person .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.person .photo .fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 52px; color: var(--green-deep);
  background:
    linear-gradient(135deg, var(--yellow) 0%, var(--yellow-soft) 100%);
}
.person .meta { padding: 16px 18px 20px; }
.person .meta .nm { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.2; }
.person .meta .role { color: var(--green-deep); font-weight: 600; font-size: 13.5px; margin-top: 3px; }
.person .meta .bio { color: var(--ink-soft); font-size: 14px; margin-top: 9px; }
.person .meta .contact { margin-top: 12px; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }

/* ---------- Agenda timeline ---------- */
.agenda { padding: 26px 0 90px; }
.now-marker {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 0 20px;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 700;
}
.now-marker::before, .now-marker::after { content: ""; height: 2px; background: var(--green); border-radius: 2px; }
.now-marker::before { width: 16px; }
.now-marker::after { flex: 1; }

.event {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: start;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0;
  cursor: pointer;
  font: inherit; color: inherit;
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .2s ease, background .2s ease;
}

/* wrapper holds the clickable card + its permalink (siblings, never nested) */
.event-wrap { position: relative; margin: 0 0 14px; }
.permalink {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1; text-decoration: none;
  color: var(--green-deep); background: rgba(0,180,111,.10);
  opacity: 0; transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.event-wrap:hover .permalink,
.permalink:focus { opacity: 1; transform: translateY(0); }
.permalink:hover { background: rgba(0,180,111,.22); }
.permalink.copied { background: var(--green); color: #fff; opacity: 1; }
.event-wrap.is-past .permalink { color: var(--muted); background: rgba(22,36,28,.06); }

/* deep-link highlight */
.event.target { border-color: var(--green); animation: ev-ring 1.6s ease both; }
@keyframes ev-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,180,111,.55), var(--shadow); }
  70%  { box-shadow: 0 0 0 12px rgba(0,180,111,0), var(--shadow); }
  100% { box-shadow: 0 0 0 3px rgba(0,180,111,.30), var(--shadow); }
}
.event:hover { transform: translateX(4px); border-color: var(--green); }
.event:hover .download-hint { opacity: 1; transform: translateY(0); }

.event .date {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 18px;
}
.event .date .day { font-family: var(--serif); font-size: 34px; line-height: 1; }
.event .date .mon { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; margin-top: 4px; }
.event .date .yr  { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.event .body .title { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.event .body .when  { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.event .body .where { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.event .body .where::before { content: "📍 "; }
.event .body .desc  { color: var(--ink-soft); font-size: 14px; margin-top: 9px; white-space: pre-line; }

.event .download-hint {
  align-self: center;
  font-size: 12.5px; font-weight: 600; color: var(--green-deep);
  white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.event .download-hint::before { content: "⤓ "; }

/* past events: grayed out */
.event.past {
  background: var(--muted-bg);
  border-color: transparent;
  box-shadow: none;
  opacity: .72;
}
.event.past .date .mon, .event.past .body .title,
.event.past .date .day { color: var(--muted); }
.event.past .body .when, .event.past .body .where,
.event.past .body .desc { color: var(--muted); }
.event.past .download-hint { color: var(--muted); }
.event.past:hover { opacity: 1; border-color: var(--green); transform: translateX(4px); }

/* status / loading */
.status { padding: 40px 0; color: var(--ink-soft); }
.status code {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 6px; font-size: 13px;
}

/* ---------- Aktuelles (flyer grid) ---------- */
.news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 26px;
  padding: 40px 0 80px;
}
.flyer {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform .18s ease, border-color .2s ease;
}
.flyer:hover { transform: translateY(-4px); border-color: var(--green); }
.flyer .thumb {
  position: relative;
  aspect-ratio: 1 / 1.414;            /* portrait, like A-series paper */
  background:
    linear-gradient(135deg, var(--paper-2) 0%, #fff 60%);
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.flyer .thumb img,
.flyer .thumb canvas {
  width: 100%; height: 100%;
  object-fit: contain;                /* show the whole flyer, never crop */
  display: block;
}
.flyer .thumb .badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 6px;
  background: var(--green); color: #fff;
}
.flyer .thumb .open-hint {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: var(--ink); color: var(--yellow-soft);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.flyer:hover .open-hint { opacity: 1; transform: translateY(0); }
.flyer .thumb .ph {
  display: grid; place-items: center; gap: 8px;
  color: var(--green-deep); text-align: center;
}
.flyer .thumb .ph-icon { font-size: 46px; line-height: 1; opacity: .55; }
.flyer .thumb .ph-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.flyer .thumb.loading {
  background: linear-gradient(100deg, var(--paper-2) 30%, #fff 50%, var(--paper-2) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.flyer .thumb .spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(0,180,111,.25); border-top-color: var(--green);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.flyer .meta { padding: 14px 16px 18px; }
.flyer .meta .date { font-size: 12.5px; color: var(--green-deep); font-weight: 700; letter-spacing: .02em; }
.flyer .meta .ttl { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; margin-top: 3px; }
.flyer .meta .txt { color: var(--ink-soft); font-size: 14px; margin-top: 7px; }

/* ---------- Footer ---------- */
.site-foot {
  margin-top: 40px;
  background: var(--ink);
  color: var(--paper-2);
  padding: 46px 0 40px;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }
.site-foot img { height: 40px; opacity: .95; }
.site-foot .fcol h4 { font-family: var(--serif); font-weight: 500; margin: 0 0 6px; color: var(--yellow); }
.site-foot a { color: var(--yellow-soft); }
.site-foot .small { font-size: 13px; color: #b9bdac; }
.site-foot .social { display: flex; gap: 10px; margin-top: 14px; }
.site-foot .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.08); color: var(--paper-2);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.site-foot .social a:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.site-foot .social svg { width: 20px; height: 20px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .plate { padding: 36px 26px; border-radius: 20px; }
  .nav { gap: 14px; padding: 12px 18px; }
  .brand .name { font-size: 17px; }
  .event { grid-template-columns: 70px 1fr; }
  .event .download-hint { display: none; }
  .event .date .day { font-size: 28px; }
  .wrap { padding: 0 18px; }
}

/* phones: hide the brand text so the nav links don't overlap it (logo stays) */
@media (max-width: 640px) {
  .brand .name { display: none; }
}

/* home cards: 4 across on desktop, 2 on tablet, 1 on phone */
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }