/* lighthouse-hanau.de - the kids.c3hanau.de layout (tonal blocks, logo card title,
   cards, full-page modals) painted in the Lighthouse corporate design
   (Brand Guide v1.1, Oktober 2026, brand package in the C3 archive under
   Lighthouse/). Palette rules from the guide: Dunkelblau carries the brand
   (header, footer, one pillar section); Weiss is the ground; the extended
   light accents (Frischgruen hell, Sonne hell, Koralle hell, Lagune, Sand,
   Blau 50) are made for website surfaces with Dunkelblau text and give the
   page its kid-friendly warmth; Sonnengelb is the light (the line under
   headings, never a text colour); Meerblau is the button colour; Koralle stays
   in the logo and in small accents. Poppins throughout: Bold 700 headings in
   mixed case, SemiBold 600 buttons and sub-headings, Medium 500 intros and
   captions, Regular 400 body. Colour names follow 04-Farben/lighthouse-farben.css (Brand Package v1.1). */

:root {
  /* Kernfarben */
  --lh-dunkelblau: #1E3150;
  --lh-koralle: #DE5F3E;
  --lh-sonnengelb: #F0B429;
  --lh-frischgruen: #5CB24F; /* fifth core colour since v1.1, never in the logo */
  --lh-elfenbein: #FBF4E5;
  --lh-nacht-koralle: #EB7458;
  /* Blau-Abstufungen */
  --lh-blau-700: #3A4D6E;   /* Fliesstext auf Hell, Hover */
  --lh-blau-500: #5B6B88;   /* Nebentext, Icons */
  --lh-blau-300: #9AA6B8;   /* Platzhalter, Linien auf Dunkel */
  --lh-blau-100: #D8DEE8;   /* Linien, Rahmen */
  --lh-blau-50:  #EEF1F5;   /* Karten, Abschnitte */
  /* Warme Neutrale */
  --lh-sand: #E9E3D6;
  --lh-weiss: #FFFFFF;
  /* Erweiterte Akzente */
  --lh-meerblau: #2B7683;
  --lh-lagune: #9FD0D6;
  --lh-frischgruen-hell: #B9DEB3;
  --lh-sonne-hell: #F6DFA3;
  --lh-koralle-hell: #F2BBA8;
}

html, body {
  background-color: var(--lh-weiss);
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 1.2rem;
  color: var(--lh-blau-700);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.1;
  color: var(--lh-dunkelblau);
}

h1 {
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  margin-top: 3rem;
  max-width: 90%;
}
/* The title under the hero: centered in its column next to the logo card. */
.title-heading {
  max-width: 100%;
}

h2 {
  font-size: 2.4rem;
  margin-top: 0.5rem;
}

h3 {
  font-size: 1.8rem;
  margin-top: 0.5rem;
}

/* Section headings carry the wordmark's Sonnengelb line underneath: the
   light. On the Sonne hell ground the line switches to Koralle so it stays
   visible. */
section > .container > h2:first-child,
section > .container > h3:first-child {
  padding-bottom: 0.6rem;
  border-bottom: 0.25rem solid var(--lh-sonnengelb);
  width: fit-content;
}
.block-sonne > .container > h2:first-child,
.block-sonne > .container > h3:first-child {
  border-bottom-color: var(--lh-koralle);
}

a {
  color: var(--lh-dunkelblau);
  text-decoration-color: var(--lh-sonnengelb);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--lh-meerblau); }

/* Intros under a heading: Poppins Medium per the guide. */
.lead-text { font-weight: 500; }

/* Navbar in Dunkelblau with Elfenbein type. Links stay on one line, tight
   enough that all of them fit from the xl breakpoint up. */
.navbar.bg-dark { background-color: var(--lh-dunkelblau) !important; }
.navbar .navbar-brand { color: var(--lh-elfenbein); font-weight: 600; }
.navbar .nav-link { color: rgba(251, 244, 229, 0.8); white-space: nowrap; }
.navbar .nav-link:hover { color: var(--lh-weiss); }
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav .nav-link { padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* Section spacing: a bit more air than Bootstrap's py-5, and a clear gap
   before every sub-heading inside a section. */
section.py-5 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
section .container > h3 {
  margin-top: 3.5rem;
}

.anchor-offset {
  scroll-margin-top: 70px; /* so nav links don't hide titles */
}

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

/* Header Banner + Title Section. The banner is the facade concept by day
   (brand v1.1 favourite F: free-standing tower with the LIGHTHOUSE wordmark
   plate, Fassadenmontagen-Brand-1.1/06 and 07); only a faint Dunkelblau scrim at the
   bottom so the logo card settles in without dulling the rendering. */
header.hero {
  position: relative;
  margin-top: 3.3rem; /* compensates roughly the bootstrap navbar height */
  height: clamp(20rem, 50vh, 32rem);
  background: linear-gradient(rgba(30, 49, 80, 0), rgba(30, 49, 80, 0.2)),
              url('../img/hero.webp') center/cover no-repeat;
}

/* Day/night: the night rendering is pixel-aligned with the day one, so a
   slow opacity crossfade reads as dusk falling and the LED-lit cones and
   lantern lighting up.
   Pure CSS, no script. Reduced motion keeps the day image only. */
header.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(30, 49, 80, 0), rgba(30, 49, 80, 0.2)),
              url('../img/hero-nacht.webp') center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
}
/* On load the page opens at night; after 2s the day breaks quickly, then
   the regular loop takes over (it starts at day, so the hand-off is seamless). */
@media (prefers-reduced-motion: no-preference) {
  header.hero::after {
    animation: hero-dawn 3.2s ease-out forwards,
               hero-day-night 20s ease-in-out 3.2s infinite;
  }
}
@keyframes hero-dawn {
  0%, 62% { opacity: 1; }  /* 2s night */
  100%    { opacity: 0; }  /* 1.2s sunrise */
}
@keyframes hero-day-night {
  0%, 30%   { opacity: 0; }  /* day */
  45%, 80%  { opacity: 1; }  /* night */
  95%, 100% { opacity: 0; }  /* back to day */
}

  /* The horizontal Lighthouse logo (SVG from the brand package, "mittel" is
     the standard for website headers) on a white card, bridging banner and
     title: pulled up out of the title block into the construction photo.
     The padding is the guide's Schutzraum. */
  .hero-logo-card {
    position: relative;
    z-index: 2; /* above the hero's night layer where they overlap */
    display: block;
    width: 36rem;
    max-width: 100%;
    height: auto;
    margin: -3.5rem auto 1.5rem 0;
    padding: 1.5rem 2rem;
    background-color: var(--lh-weiss);
    border-radius: 0.625rem;
    box-shadow: 0 0.5rem 1.5rem rgba(30, 49, 80, 0.35);
  }


/* ---------------------------------------------------------------------------
   Tonal blocks. White is the ground; the extended light accents from the
   guide colour the sections (text stays Dunkelblau on all of them); full
   Dunkelblau is reserved for the Baufortschritt pillar, the footer and the
   modals. Cards are Blau 50 on white and white everywhere else. */
.block-white {
  color: var(--lh-blau-700);
  background-color: var(--lh-weiss);
}

.block-blau50 {
  color: var(--lh-blau-700);
  background-color: var(--lh-blau-50);
}

.block-sand {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-sand);
}

.block-lagune {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-lagune);
}

.block-gruen {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-frischgruen-hell);
}

.block-sonne {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-sonne-hell);
}

.block-koralle {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-koralle-hell);
}

.block-navy {
  color: var(--lh-elfenbein);
  background-color: var(--lh-dunkelblau);
}

.block-navy h1, .block-navy h2, .block-navy h3,
.block-navy h4, .block-navy h5, .block-navy h6 {
  color: var(--lh-elfenbein);
}

.block-navy a {
  color: var(--lh-elfenbein);
  text-decoration-color: var(--lh-sonnengelb);
}
.block-navy a:hover { color: var(--lh-weiss); }

/* Cards: Blau 50 on the white ground, white on coloured grounds. Titles stay
   Dunkelblau, the captions below take Meerblau. */
.card {
  color: var(--lh-blau-700);
  background-color: var(--lh-weiss);
  border-color: var(--lh-blau-100);
}
.block-white .card {
  background-color: var(--lh-blau-50);
}
.card .card-title { color: var(--lh-dunkelblau); font-weight: 700; }
.card .text-muted { color: var(--lh-meerblau) !important; font-weight: 500; }

/* Event tiles at phone width sit two per row; shrink their type so the
   titles still fit without a wall of text. */
@media (max-width: 575.98px) {
  #section-events .col-6 .card-title { font-size: 1rem; hyphens: auto; overflow-wrap: anywhere; }
  #section-events .col-6 .card-body { padding: 0.75rem; }
  #section-events .col-6 .card-body .small { font-size: 0.8rem; }
}

/* Floor cards: bigger titles. */
.card-link .card-title { font-size: 1.6rem; }


/* SECTION: timeline cards (the kids "services-item" layout: image left, text
   right, white card on a coloured block) */
  .card.services-item {
    border-radius: .5rem;
    overflow: hidden; /* damit das Bild beim Hover-Zoom nicht raussteht */
    background: var(--lh-weiss);
    display: flex;
  }

  .services-thumb {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  img.services-thumb  {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* füllt die Box ohne Verzerrung */
    object-position: center;
    display: block;
  }

  /* Give the thumb a shape on mobile, where the column stacks and has no
     intrinsic height to fill. */
  @media (max-width: 767.98px) {
    img.services-thumb { aspect-ratio: 16 / 9; }
  }
/* / SECTION: timeline cards */



/* The pill CTA: Meerblau is the button colour in the guide. Poppins SemiBold,
   mixed case. On Dunkelblau the pill inverts to Elfenbein. */
.round-cta-btn {
  display: inline-block;
  padding: 0.45rem 1.8rem 0.5rem;
  border-radius: 2rem;
  color: var(--lh-weiss);
  background-color: var(--lh-meerblau);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.round-cta-btn:hover {
  color: var(--lh-weiss);
  background-color: var(--lh-dunkelblau);
}

.block-navy .round-cta-btn {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-elfenbein);
}
.block-navy .round-cta-btn:hover {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-weiss);
}


  .card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

    .card-link .card {
      height: 100%;
      width: 100%;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
    }

    .card-link:hover .card {
      box-shadow: 0.3rem 0.3rem 1rem rgba(30, 49, 80, 0.35);
      transform: translateX(-0.3rem) translateY(-0.3rem);
      border: 1px solid var(--lh-meerblau);
    }

    .card-link img.card-img-top {
      width: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }


/* 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: var(--lh-dunkelblau) center/cover no-repeat;
  overflow: hidden;
  border-radius: 0.5rem;
}
.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: var(--lh-elfenbein);
  background: rgba(30, 49, 80, 0.35);
  transition: background 0.3s ease-in-out;
}
.video-facade:hover::after { background: rgba(30, 49, 80, 0.15); }
.facade-update { background-image: url('../img/rendering-1.webp'); }
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.5rem;
}


/* Footer: the night variant - Dunkelblau ground, Elfenbein type, yellow underlines. */
footer.bg-dark { background-color: var(--lh-dunkelblau) !important; }

footer h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--lh-elfenbein);
}

footer hr {
  opacity: 0.25;
  color: var(--lh-elfenbein);
  border-color: var(--lh-elfenbein);
}

footer h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--lh-elfenbein);
}

footer {
  color: rgba(251, 244, 229, 0.8);
  font-size: 0.9rem;
}

footer a {
  color: var(--lh-elfenbein);
  text-decoration-color: var(--lh-sonnengelb);
}
footer a:hover { color: var(--lh-weiss); }


/* Modal Styling: the night variant, one concept across the site - full-page,
   Dunkelblau, X top-right, a centered Elfenbein "Schließen" pill at the bottom. */
.modal-content {
  color: var(--lh-elfenbein);
  background-color: var(--lh-dunkelblau);
}

.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6 {
  color: var(--lh-elfenbein);
}

.modal-content .round-cta-btn {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-elfenbein);
}

.modal-content .round-cta-btn:hover {
  color: var(--lh-dunkelblau);
  background-color: var(--lh-weiss);
}

.modal-content a {
  color: var(--lh-elfenbein);
  text-decoration-color: var(--lh-sonnengelb);
}

.modal-header,
.modal-footer {
  border: none; /* Optional: Rahmen entfernen */
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 1.0;
  border: none !important;
  box-shadow: none !important;
}
/* 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));
}
/* A floor plan at full width inside its modal, white paper on the night
   ground; the full-resolution file lets the browser zoom. */
.plan-large {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--lh-weiss);
  border-radius: 0.5rem;
}

/* Muted text that stays legible on Dunkelblau: Blau 300 from the guide. */
.text-dim { color: var(--lh-blau-300); }
/* 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));
}
.modal-banner img { max-height: 300px; }
/* / Modal Styling */


/* 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 21-9, modes cover (fill + crop to the box) and contain (fit fully, no
   crop - a mismatched file letterboxes instead of being cropped). */
.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; }

/* Briefton (Aktuelles): Anrede und Gruss abgesetzt */
.letter-greeting, .letter-signature {
  font-weight: 600;
}