/* c3hanau.de — custom styles on the shared kids/Bootstrap 5 base.
   The technical scaffolding (block-* tonal sections, img-aspect utilities,
   anchor-offset, reduced-motion scrolling) mirrors kids.c3hanau.de; the visual
   identity stays the elegant, dark mother-church look (thin headings, gold
   accent) rather than the playful kids skin. */

:root {
  --c3-gold: #FFDD99;
  --c3-gold-ink: #7a5a14;     /* readable gold on light blocks */
  --c3-gold-strong: #d9a520;  /* saturated, broken yellow for CTAs on light blocks */
}

html, body {
  background-color: #000000;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 1.1rem;
  color: #cccccc;
}

/* Headings: thin, elegant. Sizes carried over from the legacy heading-* scale. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  color: #ffffff;
  line-height: 1.15;
}

.heading-large   { font-size: 2.4rem; }
.heading-medium  { font-size: 1.8rem; }
.heading-small   { font-size: 1.25rem; }
.heading-caption { font-size: 1.1rem; }
.capitalized     { font-variant: small-caps; }

a {
  color: var(--c3-gold);
}

/* Section spacing: keep nav anchors from hiding titles under the fixed navbar. */
.anchor-offset { scroll-margin-top: 70px; }

/* Smooth in-page scrolling, disabled when the OS asks to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ---------------------------------------------------------------------------
   Tonal block classes. Pick one per section; the onepager alternates tones.
   Mother-church palette stays dark; light/white blocks add occasional contrast
   and host content that needs a bright background (e.g. the calendar embed). */
.block-black {
  color: #cccccc;
  background-color: #000000;
}
.block-dark {
  color: #cccccc;
  background-color: #161616;
}
.block-light {
  color: #222222;
  background-color: #f2f2f2;
}
.block-white {
  color: #222222;
  background-color: #ffffff;
}

.block-light h1, .block-light h2, .block-light h3,
.block-light h4, .block-light h5, .block-light h6,
.block-white h1, .block-white h2, .block-white h3,
.block-white h4, .block-white h5, .block-white h6 {
  color: #111111;
}

.block-light a, .block-white a {
  color: var(--c3-gold-ink);
}


/* Decorative full-bleed image band (no content) - a slim, ~half-viewport
   divider that just shows one photo, e.g. the auditorium after Gottesdienste.
   Plain `cover`: keeps full width, crops top/bottom. No darkening gradient -
   the image carries itself (the .band-* modifier may add its own fade). */
.image-band {
  height: 50vh;
  min-height: 280px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.band-auditorium {
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 100%),
    url('../img/section-auditorium.webp');
}
.band-auditorium2 {
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, #000 100%),
    url('../img/section-auditorium2.webp');
}

/* A big pillar that claims a full viewport "slide": content vertically centered
   with generous breathing room, so scrolling the onepager lands on it as one
   full screen. When content is taller than the viewport (e.g. stacked on
   mobile) it simply grows past 100vh and flows with its padding. */
.section-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Half-viewport sibling of .section-slide: pairs with the 50vh image band so
   the two together fill one screen on large monitors. Content vertically
   centered; on small screens it just grows with its stacked content. */
.section-half {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------------------------------------------------------------------------
   Hero */
header.hero {
  margin-top: 3.3rem; /* roughly the fixed navbar height */
  min-height: calc(100svh - 3.3rem);   /* exactly one screen below the navbar */
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  /* The cover image IS the foundation (LCP); a promo-video loop can later layer
     on top with this image as its poster. Strong scrim keeps text legible.
     Default `scroll`: iOS (Safari + Chrome, both WebKit) render a fixed
     background blank/black, so mobile must scroll normally. */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.66)),
              url('../img/hero.webp') center top/cover no-repeat;
}

/* Parallax only on desktop, where background-attachment: fixed actually works. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  header.hero { background-attachment: fixed; }
}

.hero .title-logo {
  width: 10rem;
  height: auto;
  margin: 0 auto 1.5rem;
}

/* Hero headline: short word, big type - the prägnant centerpiece between the
   longer values line above and the invite line below (lang-kurz-lang). */
.hero-title {
  font-family: 'Caveat', 'Poppins', cursive;
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 600;
  line-height: 1;
}

.hero .title-text {
  font-weight: 300;
  font-size: 1.2rem;
}


/* ---------------------------------------------------------------------------
   Gold pill CTA */
.round-cta-btn {
  display: inline-block;
  padding: 0.4rem 1.8rem 0.5rem;
  border-radius: 2rem;
  color: #111111;
  background-color: var(--c3-gold);
  text-decoration: none;
  font-variant-caps: all-small-caps;
  font-size: 1.2rem;
  font-weight: 400;
  transition: filter 0.3s ease-in-out;
}
.round-cta-btn:hover {
  color: #111111;
  filter: brightness(108%);
}
/* On light blocks the pale gold pill barely shows; use a saturated, broken
   yellow so the CTA pops (the pale gold stays the signature on dark blocks). */
.block-light .round-cta-btn,
.block-white .round-cta-btn {
  color: #111111;
  background-color: var(--c3-gold-strong);
}
.block-light .round-cta-btn:hover,
.block-white .round-cta-btn:hover {
  color: #111111;
}


/* ---------------------------------------------------------------------------
   Ministry panel: clickable tiles that open detail modals. */
.ministry-tile {
  display: block;
  text-align: center;
  padding: 2.5rem 1rem;
  height: 100%;
  color: #cccccc;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.ministry-tile:hover {
  color: #111111;
  background-color: var(--c3-gold);
  border-color: var(--c3-gold);
}
.ministry-tile .ministry-caption {
  margin-top: 1rem;
  font-variant: small-caps;
  font-size: 1.15rem;
}
/* Tile variant for light blocks (the dark-block tile would vanish on white). */
.block-light .ministry-tile,
.block-white .ministry-tile {
  color: #222222;
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
.block-light .ministry-tile:hover,
.block-white .ministry-tile:hover {
  color: #111111;
  background-color: var(--c3-gold-strong);
  border-color: var(--c3-gold-strong);
}


/* ---------------------------------------------------------------------------
   Leadership portraits: circular crops with a subtle hover. */
.leader-pic {
  width: 250px;
  max-width: 80vw;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background-position: center center;
  background-size: cover;
  box-shadow: inset 0 0 0 15px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.6s ease-in-out;
}
.leader-pic:hover {
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.9);
}
.leader-pic.pic1 { background-image: url('../img/schwarzkopf_senior.jpg'); }
.leader-pic.pic2 { background-image: url('../img/schwarzkopf_junior.jpg'); }
.leader-pic.pic3 { background-image: url('../img/christens.jpg'); }
.leader-pic.pic4 { background-image: url('../img/koehlers.jpg'); }
.leader-pic.pic5 { background-image: url('../img/thomas_meyer.jpg'); }
.leader-pic.pic6 { background-image: url('../img/wiemers.jpg'); }


/* ---------------------------------------------------------------------------
   PDF download widget */
.pdf-download-widget {
  display: inline-block;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
}
.pdf-download-widget a {
  color: #111111;
  text-decoration: none;
}
.pdf-download-widget img { margin-bottom: 0.5rem; }


/* ---------------------------------------------------------------------------
   Calendar embeds (live on a light block) */
.calendar-embed {
  width: 100%;
  border: none;
}
.calendar-embed.calendar-agenda  { height: 400px; }
.calendar-embed.calendar-classic { height: 800px; }


/* ---------------------------------------------------------------------------
   Click-to-load video facade (no third-party request until the user clicks). */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #000 center/cover no-repeat;
  overflow: hidden;
}
.video-facade::after {
  content: "\f04b"; /* fa play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease-in-out;
}
.video-facade:hover::after { background: rgba(0, 0, 0, 0.15); }
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}


/* ---------------------------------------------------------------------------
   Tagline */
.tagline {
  text-align: center;
  opacity: 0.25;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 300;
  padding: 12rem 0;
}


/* ---------------------------------------------------------------------------
   Footer */
footer.site-footer {
  color: #bbbbbb;
  font-size: 0.9rem;
}
footer.site-footer h2 { font-size: 1.8rem; color: #eeeeee; }
footer.site-footer h3 { font-size: 1.3rem; color: #eeeeee; }
footer.site-footer hr { opacity: 0.25; border-color: #ffffff; }
footer.site-footer a  { color: var(--c3-gold); }


/* ---------------------------------------------------------------------------
   Modals: one concept across the site - full-page, dark, X top-right, a
   centered gold "Schließen" pill at the bottom (mirrors the kids modal). Dark
   content also keeps the global white headings readable (they would vanish on
   the default white modal background). */
.modal-content {
  background-color: #161616;
  color: #cccccc;
}
.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 1;
}
/* Keep the centered "Schließen" pill clear of the iOS home indicator on
   notch/Dynamic-Island devices; env() is 0 where there is no inset. */
.modal-fullscreen .modal-footer {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}
/* Muted text that stays legible on the dark modal (Bootstrap's .text-secondary
   resolves to a dark grey here and would vanish). */
.text-dim { color: #8a8a8a; }
/* Let a child of .modal-body bleed to the modal edges (cancels the body
   padding) - used for the full-width Anfahrt map banner. */
.modal-banner {
  display: block;
  margin-left: calc(-1 * var(--bs-modal-padding));
  margin-right: calc(-1 * var(--bs-modal-padding));
}
/* One-off: cap the banner height on wide screens so it stays a strip, not a
   wall. The cover crop keeps it full-width; aspect-ratio still drives the
   height below the cap (narrow screens). */
.modal-banner img { max-height: 300px; }


/* ---------------------------------------------------------------------------
   Aspect-ratio image utilities. Pick exactly one per image; the slot's shape is
   reserved in CSS, so no width/height in the HTML and swapping the file never
   shifts the layout (kills CLS). Vocabulary: ratios 1-1 4-3 3-4 3-2 2-3 16-9
   9-16, modes cover (fill + crop) and contain (fit fully, no crop). */
.img-aspect-1-1-cover    { width: 100%; aspect-ratio: 1 / 1;   object-fit: cover; }
.img-aspect-1-1-contain  { width: 100%; aspect-ratio: 1 / 1;   object-fit: contain; }
.img-aspect-4-3-cover    { width: 100%; aspect-ratio: 4 / 3;   object-fit: cover; }
.img-aspect-4-3-contain  { width: 100%; aspect-ratio: 4 / 3;   object-fit: contain; }
.img-aspect-3-4-cover    { width: 100%; aspect-ratio: 3 / 4;   object-fit: cover; }
.img-aspect-3-4-contain  { width: 100%; aspect-ratio: 3 / 4;   object-fit: contain; }
.img-aspect-3-2-cover    { width: 100%; aspect-ratio: 3 / 2;   object-fit: cover; }
.img-aspect-3-2-contain  { width: 100%; aspect-ratio: 3 / 2;   object-fit: contain; }
.img-aspect-2-3-cover    { width: 100%; aspect-ratio: 2 / 3;   object-fit: cover; }
.img-aspect-2-3-contain  { width: 100%; aspect-ratio: 2 / 3;   object-fit: contain; }
.img-aspect-16-9-cover   { width: 100%; aspect-ratio: 16 / 9;  object-fit: cover; }
.img-aspect-16-9-contain { width: 100%; aspect-ratio: 16 / 9;  object-fit: contain; }
.img-aspect-9-16-cover   { width: 100%; aspect-ratio: 9 / 16;  object-fit: cover; }
.img-aspect-9-16-contain { width: 100%; aspect-ratio: 9 / 16;  object-fit: contain; }
.img-aspect-21-9-cover   { width: 100%; aspect-ratio: 21 / 9;  object-fit: cover; }
.img-aspect-21-9-contain { width: 100%; aspect-ratio: 21 / 9;  object-fit: contain; }