/*
 * Flisanu – eigenes Stylesheet (lädt NACH Bootstrap & Font Awesome).
 *
 * Aufbau:
 *  1. Webfont (@font-face, lokal)
 *  2. Marken-Variablen & Basis (Typografie, Farben, Fokus)
 *  3. Navigation / Header
 *  4. Hero (Kreisel)
 *  5. Sektionen & Überschriften
 *  6. Sprechblasen-Karten
 *  7. CTA-Band, Listen, Kontakt
 *  8. Video-Platzhalter
 *  9. Footer
 * 10. Responsive Feinheiten
 */

/* ===========================================================================
 * 1. Webfont: Source Sans 3 (lokal, SIL OFL 1.1)
 * - Variable Font (wght 200–900) deckt Regular/Semibold/Bold in EINER Datei ab.
 * - Latin-Subset deckt Deutsch inkl. Umlauten/ß ab; Emojis fallen auf System zurück.
 * ========================================================================= */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
}

/* ===========================================================================
 * 2. Marken-Variablen & Basis
 * ========================================================================= */
:root {
  --flisanu-petrol: #156082;
  --flisanu-petrol-dark: #0f4a64;
  --flisanu-mauve: #96607d;
  --flisanu-mauve-dark: #7c4e67;
  --flisanu-orange: #ffa32d;
  --flisanu-orange-dark: #e8870a;
  --flisanu-text: #0e2841;
  --flisanu-tint: #f5f1f4;        /* zarter Mauve-Hauch für abgesetzte Sektionen */
  --flisanu-petrol-tint: #e8f1f4; /* zarter Petrol-/Teal-Hauch (wie PPT-Folie 7/11) */

  /* Bootstrap-Variablen auf die Marke mappen (precompiled CSS) */
  --bs-primary: var(--flisanu-petrol);
  --bs-primary-rgb: 21, 96, 130;
  --bs-link-color: var(--flisanu-petrol);
  --bs-link-color-rgb: 21, 96, 130;
  --bs-link-hover-color: var(--flisanu-petrol-dark);
  --bs-link-hover-color-rgb: 15, 74, 100;
  --bs-body-color: var(--flisanu-text);
  --bs-body-color-rgb: 14, 40, 65;
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-emphasis-color: var(--flisanu-text);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;   /* Anker-Sprünge nicht unter die sticky Navbar */
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--flisanu-text);
  font-size: 1.0625rem;       /* 17px – gute Lesbarkeit für die Zielgruppe */
  line-height: 1.65;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-body-font-family);
  color: var(--flisanu-petrol);
  font-weight: 700;
  line-height: 1.2;
}

a { color: var(--flisanu-petrol); }
a:hover { color: var(--flisanu-petrol-dark); }

strong { font-weight: 700; }

/* Sichtbarer Fokus-Indikator (WCAG 2.4.7) – nie outline:none ohne Ersatz */
:focus-visible {
  outline: 3px solid var(--flisanu-orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip-Link: optisch versteckt bis Fokus */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 1100;
  background: var(--flisanu-petrol);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Marken-Button (Orange = Akzent, mit DUNKLEM Text → Kontrast ok, docs/05) */
.btn-flisanu {
  --bs-btn-bg: var(--flisanu-orange);
  --bs-btn-border-color: var(--flisanu-orange);
  --bs-btn-color: var(--flisanu-text);
  --bs-btn-hover-bg: var(--flisanu-orange-dark);
  --bs-btn-hover-border-color: var(--flisanu-orange-dark);
  --bs-btn-hover-color: var(--flisanu-text);
  --bs-btn-active-bg: var(--flisanu-orange-dark);
  --bs-btn-active-border-color: var(--flisanu-orange-dark);
  --bs-btn-active-color: var(--flisanu-text);
  font-weight: 700;
}

/* ===========================================================================
 * 3. Navigation / Header
 * ========================================================================= */
.flisanu-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(14, 40, 65, 0.08);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.flisanu-logo {
  height: 44px;
  width: auto;
  display: block;
}
/* Freigestellter Baum als Marke im Header (ohne Schriftzug, wie PPT) */
.navbar-baum {
  height: 52px;
  width: auto;
  display: block;
}
.flisanu-navbar .navbar-toggler {
  border-color: var(--flisanu-petrol);
  color: var(--flisanu-petrol);
  font-size: 1.25rem;
  padding: 0.35rem 0.6rem;
}
.flisanu-navbar .nav-link {
  color: var(--flisanu-text);
  font-weight: 600;
  padding-inline: 0.85rem;
}
.flisanu-navbar .nav-link:hover,
.flisanu-navbar .nav-link:focus {
  color: var(--flisanu-petrol);
}
.flisanu-navbar .nav-link.active {
  color: var(--flisanu-petrol);
  font-weight: 700;
}
/* Navi-Punkte (inkl. Kontakt-Button) vertikal auf eine Höhe (Desktop) */
@media (min-width: 992px) {
  .flisanu-navbar .navbar-nav { align-items: center; }
}
/* CTA-Knopf in der Navi behält weiße/dunkle Logik des btn-flisanu */
.flisanu-navbar .nav-link.btn-flisanu {
  color: var(--flisanu-text);
}

/* ===========================================================================
 * 4. Hero (Kreisel-Foto mit Overlay)
 * ========================================================================= */
.hero {
  position: relative;
  min-height: clamp(420px, 70vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 40, 65, 0.30) 0%, rgba(14, 40, 65, 0.55) 100%),
    rgba(21, 96, 130, 0.35);
}
.hero-content {
  color: #fff;
  padding-block: 3rem;
}
.hero-title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 5rem);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  margin-bottom: 1rem;
}
.hero-subtitle {
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 0.25rem;
}
.hero-lead {
  max-width: 46rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.75rem;
}
.hero-actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================================================================
 * 5. Sektionen & Überschriften
 * ========================================================================= */
.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.section-tint { background-color: var(--flisanu-tint); }
.section-petrol-tint { background-color: var(--flisanu-petrol-tint); }

/* Volle Farbflächen (kräftiger Hintergrund, weißer Text) – wie PPT */
.section-fill { color: #fff; }
.section-fill h2,
.section-fill h3,
.section-fill .section-intro,
.section-fill p,
.section-fill li { color: #fff; }
.section-mauve { background-color: var(--flisanu-mauve-dark); }   /* weiß auf Mauve-dunkel ~6.7:1 */
.section-petrol { background-color: var(--flisanu-petrol); }
.section-fill .feature-list i { background: var(--flisanu-orange); color: var(--flisanu-text); }
.section-fill .ueberuns-foto {
  border: 5px solid rgba(255, 255, 255, 0.25);
}

/* Dezentes Baum-Wasserzeichen im Hintergrund (wie PPT) */
.has-baum-bg { position: relative; overflow: hidden; }
.has-baum-bg::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3.5rem;
  width: 320px;
  height: 410px;
  background: url("../img/flisanu-baum.webp") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
/* zweites, kleineres Baum-Motiv für mehr „kunstvollen" Look */
.has-baum-bg--double::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: -2rem;
  width: 180px;
  height: 230px;
  background: url("../img/flisanu-baum.webp") no-repeat center / contain;
  opacity: 0.06;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}
.has-baum-bg--light::after,
.has-baum-bg--light::before { filter: brightness(0) invert(1); opacity: 0.12; }
.has-baum-bg > .container { position: relative; z-index: 1; }

/* Dringend-Hinweis – eigenständige Sprechblasen-Card (kein Bootstrap-Standard) */
.dringend-callout {
  position: relative;
  background: linear-gradient(135deg, #fff7ea 0%, #ffe9c9 100%);
  border: 2px solid var(--flisanu-orange);
  border-radius: 1.4rem 1.4rem 0 1.4rem;     /* unten-rechts spitz (Sprechblase) */
  padding: 1.5rem 1.6rem 1.5rem 2rem;
  margin: 0 0 2rem;
  box-shadow: 0 12px 28px rgba(232, 135, 10, 0.2);
}
.dringend-icon {
  position: absolute;
  left: -1.1rem;
  top: -1.1rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--flisanu-orange);
  color: var(--flisanu-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 5px 14px rgba(232, 135, 10, 0.4);
}
.dringend-body { color: var(--flisanu-text); }
.dringend-body p:last-child { margin-bottom: 0; }

.section h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
  position: relative;
}
/* Kleiner Orange-Akzent unter den H2 (Flächenakzent, kein Text) */
.section h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: 0.6rem;
  background: var(--flisanu-orange);
  border-radius: 2px;
}
.section .text-center h2::after,
.section h2.text-center::after { margin-inline: auto; }

.section-intro {
  font-size: 1.125rem;
  max-width: 60rem;
  margin-bottom: 1.5rem;
}
.subheading { color: var(--flisanu-mauve-dark); letter-spacing: 0.04em; }

/* Rechtstexte (Impressum/Datenschutz) – gut lesbar */
.legal-content { max-width: 60rem; }
.legal-content h3 { font-size: 1.3rem; margin-top: 1.9rem; margin-bottom: 0.55rem; }
.legal-content h3:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 1rem; }

.section-willkommen .lead { color: var(--flisanu-petrol); font-weight: 600; }
.willkommen-baum { max-width: 260px; }
/* Auffälliger Leitsatz */
.willkommen-claim {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 800;
  color: var(--flisanu-petrol);
  line-height: 1.25;
  margin: 0.75rem 0 0;
  padding-left: 0.9rem;
  border-left: 4px solid var(--flisanu-orange);
}

/* ===========================================================================
 * 6. Sprechblasen-Karten (eine Ecke spitz, drei abgerundet – docs/00)
 * ========================================================================= */
.bubble-card {
  background-color: var(--flisanu-mauve);
  color: #fff;
  padding: 1.75rem 1.6rem;
  border-radius: 1.4rem 1.4rem 1.4rem 0;   /* unten-links spitz */
  box-shadow: 0 8px 22px rgba(124, 78, 103, 0.25);
  display: flex;
  flex-direction: column;
}
.bubble-card .bubble-title,
.bubble-card h3,
.bubble-card h4 { color: #fff; }
.bubble-card p { margin-bottom: 0.75rem; }
.bubble-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.bubble-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.bubble-meta li { margin-bottom: 0.55rem; }
.bubble-meta li:last-child { margin-bottom: 0; }
.bubble-meta i {
  width: 1.25rem;
  margin-right: 0.35rem;
  text-align: center;
  color: var(--flisanu-orange);
}
.bubble-note { font-size: 0.9rem; color: #fff; margin-top: 0.15rem; }
.bubble-link { color: #fff; text-decoration: underline; font-weight: 600; }
.bubble-link:hover { color: var(--flisanu-orange); }

/* ===========================================================================
 * 7. CTA-Band, Feature-Liste, Kontakt
 * ========================================================================= */
.cta-band {
  background-color: var(--flisanu-petrol);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4rem);
}
.cta-title { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.cta-lead { font-size: 1.2rem; margin-bottom: 1.5rem; }

.feature-list li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 1.075rem;
}
.feature-list i {
  color: #fff;
  background: var(--flisanu-petrol);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex: 0 0 auto;
}

.kontakt-themen li {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.kontakt-themen i {
  color: var(--flisanu-mauve);
  width: 1.6rem;
  margin-right: 0.4rem;
  text-align: center;
}
.kontakt-card {
  background: #fff;
  border-left: 5px solid var(--flisanu-orange);
  border-radius: 0.75rem;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 6px 18px rgba(14, 40, 65, 0.1);
}
.kontakt-name { font-size: 1.3rem; font-weight: 700; color: var(--flisanu-petrol); margin-bottom: 0.15rem; }
.kontakt-rolle { color: var(--flisanu-mauve-dark); margin-bottom: 1rem; }
.kontakt-card i { color: var(--flisanu-petrol); width: 1.4rem; margin-right: 0.35rem; }

/* ===========================================================================
 * 8. Video-Platzhalter (Aufgabe 7 ersetzt durch <video>)
 * ========================================================================= */
.video-placeholder {
  max-width: 800px;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--flisanu-petrol), var(--flisanu-mauve));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 28px rgba(14, 40, 65, 0.18);
}
.video-placeholder-inner i { font-size: 3.5rem; display: block; margin-bottom: 0.75rem; }
.video-placeholder-inner p { font-weight: 600; }

/* Echtes Video (selbst gehostet) */
.video-figure { max-width: 800px; margin-inline: auto; }
.flisanu-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;            /* gegen Layout-Shift (CLS) */
  border-radius: 1rem;
  background: #000;
  display: block;
  box-shadow: 0 10px 28px rgba(14, 40, 65, 0.18);
}
.video-caption { margin-top: 0.6rem; text-align: center; color: #525c68; font-size: 0.95rem; }

/* Content-Foto „Über uns" */
.ueberuns-foto {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 8px 22px rgba(14, 40, 65, 0.15);
}

/* ===========================================================================
 * 9. Footer
 * ========================================================================= */
.flisanu-footer {
  background-color: var(--flisanu-text);
  color: #d6e0ea;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0.35rem; }
/* Volles Logo (Baum + Schriftzug) auf hellem Panel – lesbar auf dunklem Footer */
.footer-logo {
  display: inline-block;
  background: #fff;
  padding: 0.65rem 0.9rem;
  border-radius: 0.6rem;
  margin-bottom: 1rem;
}
.footer-logo img { height: 48px; width: auto; display: block; }
.footer-text { color: #b9c6d4; max-width: 28rem; }
.footer-heading {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.footer-partner li { margin-bottom: 0.4rem; color: #cfdae6; }
.footer-links a { color: #d6e0ea; text-decoration: none; }
.footer-links a:hover { color: var(--flisanu-orange); text-decoration: underline; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-rule { border-color: rgba(255, 255, 255, 0.15); margin-block: 1.75rem 1.25rem; }
.footer-copy { color: #9fb0c1; font-size: 0.95rem; }
.footer-copy a { color: #d6e0ea; text-decoration: underline; }
.footer-copy a:hover { color: var(--flisanu-orange); }

/* ===========================================================================
 * 404-Seite
 * ========================================================================= */
.error-code {
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--flisanu-petrol);
  margin-bottom: 0.25rem;
}

/* ===========================================================================
 * Galerie (öffentlich)
 * ========================================================================= */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.gallery-filter-btn {
  border: 2px solid var(--flisanu-petrol);
  background: #fff;
  color: var(--flisanu-petrol);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.gallery-filter-btn:hover { background: var(--flisanu-petrol-tint); }
.gallery-filter-btn.is-active { background: var(--flisanu-petrol); color: #fff; }

/* Masonry-Spalten: Bilder behalten ihr Seitenverhältnis (kein Beschnitt) */
.gallery-grid {
  column-count: 4;
  column-gap: 0.85rem;
}
@media (max-width: 1199.98px) { .gallery-grid { column-count: 3; } }
@media (max-width: 767.98px)  { .gallery-grid { column-count: 2; } }
@media (max-width: 459.98px)  { .gallery-grid { column-count: 1; } }
.gallery-item {
  break-inside: avoid;
  margin: 0 0 0.85rem;
}
.gallery-link {
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(14, 40, 65, 0.12);
}
.gallery-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}
.gallery-link:hover img,
.gallery-link:focus-visible img { transform: scale(1.04); }
.gallery-empty, .gallery-noresult { color: #525c68; }

/* Lightbox */
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(14, 40, 65, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-inner { position: relative; max-width: 92vw; max-height: 90vh; }
.gallery-lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.gallery-lightbox-close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--flisanu-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--flisanu-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gallery-lightbox-prev { left: -1.3rem; }
.gallery-lightbox-next { right: -1.3rem; }
.gallery-lightbox-count {
  position: absolute;
  left: 50%;
  bottom: -2.1rem;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .gallery-lightbox-prev { left: 0.3rem; }
  .gallery-lightbox-next { right: 0.3rem; }
}

/* ===========================================================================
 * 10. Responsive Feinheiten
 * ========================================================================= */
@media (max-width: 991.98px) {
  .flisanu-navbar .navbar-nav { padding-top: 0.5rem; }
  .flisanu-navbar .nav-link { padding-block: 0.4rem; }
  .flisanu-navbar .nav-link.btn-flisanu { display: inline-block; margin-top: 0.4rem; }
}
@media (max-width: 575.98px) {
  .hero-actions .btn { width: 100%; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .skip-link { transition: none; }
}