/* ============================================================
   Familienportal – eigenes Design (ergänzt Bootstrap)
   ============================================================ */
:root{
  --fp-bg:        #f6f3ee;
  --fp-primary:   #8a5a44;   /* warmes Braun */
  --fp-primary-d: #6f4636;
  --fp-accent:    #c67a4e;
  --fp-card:      #ffffff;
  --fp-ink:       #3a322c;
}

body{
  background: var(--fp-bg);
  color: var(--fp-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Bootstrap-Primärfarbe überschreiben */
.btn-primary{ --bs-btn-bg:var(--fp-primary); --bs-btn-border-color:var(--fp-primary);
  --bs-btn-hover-bg:var(--fp-primary-d); --bs-btn-hover-border-color:var(--fp-primary-d);
  --bs-btn-active-bg:var(--fp-primary-d); }
.btn-outline-primary{ --bs-btn-color:var(--fp-primary); --bs-btn-border-color:var(--fp-primary);
  --bs-btn-hover-bg:var(--fp-primary); --bs-btn-hover-border-color:var(--fp-primary); }
a{ color: var(--fp-primary-d); }
.nav-pills .nav-link.active{ background: var(--fp-primary); }
.text-bg-primary{ background: var(--fp-primary) !important; }

/* Navbar */
.fp-navbar{
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.fp-navbar .navbar-brand,
.fp-navbar .nav-link{ color: #fff !important; }
.fp-navbar .nav-link:hover{ color: #ffe9dc !important; }
.fp-navbar .dropdown-menu{ --bs-dropdown-link-active-bg: var(--fp-primary); }

/* Karten */
.fp-card{
  border: none;
  border-radius: .8rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Avatare */
.fp-avatar-sm,.fp-avatar-md,.fp-avatar-lg,.fp-avatar-xl{
  border-radius:50%; object-fit:cover; display:inline-flex; flex:0 0 auto;
  align-items:center; justify-content:center; background:var(--fp-accent); color:#fff; font-weight:600;
}
.fp-avatar-sm{ width:32px;height:32px;font-size:.8rem; }
.fp-avatar-md{ width:52px;height:52px;font-size:1.1rem; }
.fp-avatar-lg{ width:84px;height:84px;font-size:1.8rem; }
.fp-avatar-xl{ width:120px;height:120px;font-size:2.6rem; }
.fp-avatar-initials{ text-transform:uppercase; }

/* News */
.fp-news-img{ width:100%; max-height:380px; object-fit:cover; border-radius:.8rem .8rem 0 0; }
.fp-news-body img{ max-width:100%; height:auto; border-radius:.4rem; }
.fp-comment{ padding:.5rem 0; border-top:1px solid #eee; }
.fp-thumb{ max-height:140px; border-radius:.4rem; }

/* Galerie */
.fp-gallery-item{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:.5rem; background:#eee; }
.fp-gallery-item img{ width:100%; height:100%; object-fit:cover; cursor:pointer; transition:transform .2s; }
.fp-gallery-item:hover img{ transform:scale(1.05); }
.fp-gallery-actions{ position:absolute; top:.3rem; right:.3rem; display:flex; gap:.25rem; opacity:0; transition:opacity .2s; }
.fp-gallery-item:hover .fp-gallery-actions{ opacity:1; }

/* Album-Kacheln */
.fp-album-cover{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:.8rem .8rem 0 0; background:#e9e2d9; }
.fp-album-cover img{ width:100%; height:100%; object-fit:cover; }
.fp-album-empty{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#bbab9a; }
.fp-album-count{ position:absolute; bottom:.4rem; right:.4rem; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; padding:.1rem .5rem; border-radius:1rem; }
.fp-album-card{ transition:transform .15s; }
.fp-album-card:hover{ transform:translateY(-3px); }

/* Footer */
.fp-footer{ color:#8a7f73; border-top:1px solid #e6ddd2; }

/* Gäste-Seiten (Login etc.) */
.fp-guest{
  min-height:100vh; display:flex; align-items:center;
  background: linear-gradient(135deg, var(--fp-primary), var(--fp-accent));
}
.fp-guest-card{
  max-width:420px; margin:2rem auto; width:100%;
  background:#fff; padding:2rem; border-radius:1rem; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.fp-guest-logo{
  width:64px;height:64px;border-radius:50%;margin:0 auto;
  background:var(--fp-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.fp-message-body{ white-space:normal; line-height:1.6; }

/* Bildansicht im Album (max. 2000 px, Vor/Zurück, Drehen) */
body.fp-viewer-open{ overflow:hidden; }
.fp-viewer{ position:fixed; inset:0; z-index:2000; background:rgba(15,12,10,.95); display:flex; flex-direction:column; }
.fp-viewer[hidden]{ display:none; }
.fp-viewer-bar{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; color:#ddd; flex:0 0 auto; }
.fp-viewer-tools{ display:flex; gap:.4rem; }
.fp-viewer-count{ font-size:.9rem; }
.fp-viewer-stage{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 3.5rem 1rem; position:relative; }
.fp-viewer-stage img{ max-width:min(2000px, 100%); max-height:100%; object-fit:contain; border-radius:.3rem; box-shadow:0 .5rem 2rem rgba(0,0,0,.5); transition:opacity .15s; }
.fp-viewer-stage img.loading{ opacity:.35; }
.fp-viewer-spin{ position:absolute; }
.fp-viewer-spin[hidden]{ display:none; }
.fp-viewer-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:3rem; height:5rem; border:0; border-radius:.4rem;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.6rem; }
.fp-viewer-nav:hover:not(:disabled){ background:rgba(255,255,255,.2); }
.fp-viewer-nav:disabled{ opacity:.2; cursor:default; }
.fp-viewer-prev{ left:.4rem; }
.fp-viewer-next{ right:.4rem; }
@media (max-width:576px){ .fp-viewer-stage{ padding:0 .3rem .5rem; } .fp-viewer-nav{ width:2.4rem; height:4rem; background:rgba(0,0,0,.35); } }

/* Albumübersicht: Suche, Jahresleiste, Jahresgruppen */
.fp-album-tools{ position:sticky; top:56px; z-index:10; background:var(--bs-body-bg, #faf6f1); padding:.6rem 0 .3rem; margin-bottom:.5rem; }
.fp-year-bar{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.25rem; padding-bottom:.3rem; scrollbar-width:thin; }
.fp-year-bar a{ flex:0 0 auto; padding:.15rem .55rem; border-radius:1rem; font-size:.85rem; text-decoration:none;
  background:#efe6dc; color:var(--fp-primary-d); }
.fp-year-bar a:hover{ background:var(--fp-primary); color:#fff; }
.fp-year-bar a[hidden]{ display:none; }
.fp-year-group{ scroll-margin-top:150px; margin-bottom:2rem; }
.fp-year-title{ font-size:1.25rem; border-bottom:2px solid #e6ddd2; padding-bottom:.3rem; margin-bottom:1rem; }
.fp-album-col{ scroll-margin-top:160px; }
.fp-album-card{ scroll-margin-top:160px; }
.fp-album-flash{ box-shadow:0 0 0 4px var(--fp-primary) !important; transition:box-shadow .4s; }

/* Albumseite: Wechsel zwischen Alben */
.fp-album-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.fp-album-nav-side{ min-width:0; }
.fp-album-nav-side .btn{ max-width:100%; }

/* Videoseite */
.fp-video-thumb{ position:relative; display:block; width:100%; padding:0; border:0; background:#111; aspect-ratio:16/9; overflow:hidden; border-radius:.8rem .8rem 0 0; }
.fp-video-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .2s, opacity .2s; }
.fp-video-thumb:hover img{ transform:scale(1.04); opacity:.85; }
.fp-video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3rem; color:#fff; opacity:.75; text-shadow:0 2px 8px rgba(0,0,0,.6); transition:opacity .2s; }
.fp-video-thumb:hover .fp-video-play{ opacity:1; }
.fp-video-date{ position:absolute; top:.4rem; left:.4rem; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; padding:.05rem .45rem; border-radius:1rem; }
.fp-video-title{ line-height:1.3; }
.fp-video-col{ scroll-margin-top:160px; }
.fp-video-card form{ display:inline; }

/* Startseite: Seitenleiste */
.fp-widget .card-header{ background:transparent; font-weight:600; }
.fp-widget .list-group-item{ padding:.5rem .9rem; }
.min-w-0{ min-width:0; }
.fp-bday-today{ background:#fff3e6; }
.fp-online-chip{ position:relative; display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .6rem .15rem .15rem; border-radius:2rem; background:#f3ece4; color:inherit; text-decoration:none; }
.fp-online-chip:hover{ background:#eadfd2; }
.fp-online-dot{ position:absolute; left:1.45rem; bottom:.1rem; width:.6rem; height:.6rem; border-radius:50%; background:#22a55a; border:2px solid #fff; }
.fp-rand-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.35rem; }
.fp-rand-item{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:.4rem; background:#eee; }
.fp-rand-item img{ width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.fp-rand-item:hover img{ transform:scale(1.07); }
.fp-widget-thumb{ flex:0 0 auto; width:3.2rem; height:3.2rem; border-radius:.4rem; object-fit:cover; display:flex; align-items:center; justify-content:center; }
.fp-widget-video{ position:relative; flex:0 0 auto; width:5rem; aspect-ratio:16/9; border-radius:.4rem; overflow:hidden; background:#111; }
.fp-widget-video img{ width:100%; height:100%; object-fit:cover; }
.fp-widget-video i{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; opacity:.85; font-size:1.2rem; }
.fp-rand-main{ grid-template-columns:repeat(6, 1fr); gap:.5rem; }
@media (max-width:767.98px){ .fp-rand-main{ grid-template-columns:repeat(3, 1fr); gap:.3rem; } }
.fp-mail-option{ background:#faf6f1; border:1px solid #eee5db; border-radius:.6rem; padding:.75rem 1rem; }
@media (max-width:575.98px){ .fp-album-card .card-body{ padding:.4rem .5rem !important; } .fp-album-card .card-body .h6{ font-size:.8rem; } }