/* custom.css */
@font-face {
    font-family: 'adelia'; /*a name to be used later*/
    src: url('assets/adelia.ttf'); /*URL to font*/
}

/* 1) Dein Farbschema */
:root{
  --bg: #ffffff;
  --text: #333;
  --heading: #04502F;
  --muted: #aaa;
  --accent: #ff4d6d;

  /* 2) Bootstrap CSS-Variablen überschreiben */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-primary: var(--accent);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
}

body {
    font-family: "Josefin Sans", sans-serif;
}

/* globale Typo */
h1, h2 { color: var(--heading); font-family: "adelia", sans-serif; }
h3, h4, .navbar-brand { color: var(--heading); }
.text-secondary { color: var(--muted) !important; font-family: "Josefin Sans", sans-serif; }
a {color: var(--heading);}

/* Buttons: primary nutzt --bs-primary, hier optional Feintuning */
.btn-primary { border: none; font-family: "Josefin Sans", sans-serif; background: #04502F;}
.form-label {font-family: "Josefin Sans", sans-serif;}

/* Section spacing + Offset für Anchor-Scroll */
.section{
  padding-top: 3rem;
  padding-bottom: 3rem;
  scroll-margin-top: var(--nav-offset, 72px);
}

/* Hero */
.hero{
  position: relative;
  min-height: 75vh;
  background: url("assets/IMG_4705.jpeg") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.75));
}
.hero-content{
  position: relative;
  padding: 4rem 0;
}

/* Navbar besser lesbar auf dunklem BG */
.navbar.bg-body-tertiary{
  /* Wenn du ein dunkles Theme willst: */
  /* background: rgba(11,16,32,0.88) !important; */
  background: #f2f2f2 !important;
  backdrop-filter: blur(10px);
}
.navbar a.nav-link{ color: var(--text); }
.navbar .nav-link:hover{ color: var(--heading); }

/* Smooth scroll (zusätzlich zum JS ok) */
html { scroll-behavior: smooth; }

.thumb-post img {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}

.divider-heart{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;            /* Whitespace um das Herz */
  color: var(--text, #111);
}

.divider-heart::before,
.divider-heart::after{
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: 0.35;
}

.divider-heart span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;      /* kleines Extra-Whitespace */
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
}