/* ===========================
   Farb- & Typo-Setup
   =========================== */
:root{
  --brand: #0ea5a4;        /* Türkis */
  --brand-600: #0b8d8d;
  --ink: #0f172a;          /* sehr dunkel */
  --muted: #6b7280;        /* Grau */
  --bg: #ffffff;
  --card: #f7fafc;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
}

/* ===========================
   Navbar
   =========================== */
.navbar {
  box-shadow: 0 2px 16px rgba(0,0,0,.04);
}
.navbar-brand .logo-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background: var(--brand); margin-left:.35rem;
}
.nav-link.active, .nav-link:focus, .nav-link:hover { color: var(--brand) !important; }

/* Progress Bar (global) */
.progress-top {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand), #22c1c3);
  z-index: 2000; box-shadow: 0 0 6px rgba(34,193,195,.6);
}

/* ===========================
   Hero (Startseite anders als Unterseiten)
   =========================== */
.hero {
  padding: clamp(3rem, 6vw, 6rem) 0;
}
.hero-split {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 992px){ .hero-split { grid-template-columns: 1fr; } }

.hero h1 { letter-spacing: -0.02em; }
.kicker {
  text-transform: uppercase; letter-spacing: .16em; font-weight: 600; color: var(--brand);
}

/* Bildkarten / Mosaik */
.img-tile {
  border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow);
}
.img-tile img { width: 100%; height: 100%; object-fit: cover; display:block; }

/* ===========================
   Sections, Cards, Utilities
   =========================== */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-light { background: #f8fafc; }
.card-plain {
  background: var(--card); border: 1px solid #eef2f7;
  border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow);
}
.icon-circle {
  width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: #e6fffb; color: var(--brand);
}

.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 14,165,164;
}
a.link-brand { color: var(--brand); }
a.link-brand:hover { color: var(--brand-600); }

/* ===========================
   Gallerie / Masonry (reine CSS-Columns)
   =========================== */
.masonry { columns: 1; column-gap: 1rem; }
.masonry .masonry-item {
  break-inside: avoid; margin-bottom: 1rem; border-radius: .75rem; overflow: hidden; box-shadow: var(--shadow);
}
.masonry .masonry-item img { width: 100%; height: auto; display:block; }
@media (min-width: 576px){ .masonry{ columns: 2; } }
@media (min-width: 992px){ .masonry{ columns: 3; } }

/* ===========================
   Reveal-Animationen
   =========================== */
.reveal        { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in     { opacity: 1; transform: none; }
[data-anim="right"] { transform: translateX(32px); }
[data-anim="left"]  { transform: translateX(-32px); }
[data-anim="up"]    { transform: translateY(24px); }
[data-anim="scale"] { transform: scale(.96); }
.reveal.in[data-anim="right"],
.reveal.in[data-anim="left"],
.reveal.in[data-anim="up"],
.reveal.in[data-anim="scale"] { transform: none; }
.delay-1{ transition-delay:.1s }
.delay-2{ transition-delay:.2s }
.delay-3{ transition-delay:.3s }

/* Motion‑Reduce: Animationen skippen */
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  .progress-top { display:none; }
}