/* =====================================================================
   Lebenskniff.de — custom styles (complements Tailwind CDN)
   ===================================================================== */

:root {
  --brand: #0d8de0;        /* soft sky blue (primary)  */
  --brand-dark: #0b73b8;
  --brand2: #1fbd72;       /* soft green (secondary)   */
  --ink: #0f172a;          /* slate-900 (text)         */
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ---------------------------------------------------------------------
   HERO PARALLAX
   A full-bleed hero whose background image is translated on scroll via JS
   (var --parallax set in main.js) for a smooth, clearly visible effect.
   background-attachment:fixed is the no-JS fallback.
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  z-index: 30;   /* keep the hero (and its open search dropdown) above the sections below */
  /* Soft, faded light-blue backdrop ("ausgebleicht"). */
  background: linear-gradient(165deg, #eef6ff 0%, #f1f9fb 55%, #eefaf4 100%);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* the parallax: image stays put while content scrolls over it */
  background-repeat: no-repeat;
  z-index: -2;
}
/* Light wash sits ABOVE the image (z-index -1) but below the hero content,
   so the photo stays bright and the dark text remains readable. */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.75) 100%);
}

/* Touch devices (iOS/Android) ignore background-attachment:fixed, so fall
   back to a clean static cover image there. */
@media (max-width: 820px) {
  .hero__bg { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { background-attachment: scroll; }
}

/* Animated gradient blob accents (decorative) */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-24px) scale(1.08); }
}

/* ---------------------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------- */
.card-lift {
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px -20px rgba(2,6,23,.35);
}
.card-lift:hover .card-img { transform: scale(1.06); }
.card-img { transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* Category discovery tile */
.cat-tile { transition: transform .25s ease, box-shadow .25s ease; }
.cat-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(2,6,23,.4); }

/* Magazine feature-row title (modern sans, matches the rest of the site) */
.feature-title {
  font-family: inherit;          /* Inter */
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.feature-title a { color: inherit; }

/* Feature-card image with light scroll parallax + subtle hover zoom.
   The inner .feature-parallax is taller than its frame so it can shift
   vertically without ever revealing a gap. */
.feature-media {
  position: relative;
  border-radius: 6px;
  /* light shadow at rest; grows on lift (hover/parallax) */
  box-shadow: 0 14px 30px -16px rgba(15, 23, 42, .32),
              0 6px 12px -10px rgba(15, 23, 42, .20);
  transition: box-shadow .35s ease, transform .35s ease;
}
.feature-parallax {
  position: absolute;
  left: 0; right: 0; top: -13%;
  height: 126%;
  will-change: transform;
}
.feature-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Wrapper that carries the gentle scroll-parallax of the text card. */
.feature-shift { will-change: transform; }

/* The overlapping white text card — floats noticeably above the image. */
.feature-card {
  position: relative;
  background: #fff;
  border-radius: 4px;
  /* clearly visible shadow at rest; grows when lifted (hover / mobile scroll) */
  box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .38),
              0 10px 22px -10px rgba(15, 23, 42, .24);
  transition: box-shadow .35s ease, transform .35s ease;
  /* base padding (py = +15px over the horizontal value) */
  padding: calc(1.75rem + 15px) 1.75rem;
}

/* 3D lift for extra depth: on hover (desktop) or .is-active (mobile, set by
   scroll position) — bigger shadow + outward zoom of the image. */
.feature-media:hover,
.feature-media.is-active {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -14px rgba(15, 23, 42, .55),
              0 12px 24px -8px rgba(15, 23, 42, .40);
}
.feature-media:hover .feature-img,
.feature-media.is-active .feature-img { transform: scale(1.06); }
.feature-card:hover,
.feature-card.is-active {
  transform: translateY(-4px);
  box-shadow: 0 50px 82px -20px rgba(15, 23, 42, .50),
              0 22px 40px -14px rgba(15, 23, 42, .30);
}

@media (prefers-reduced-motion: reduce) {
  .feature-parallax { top: 0; height: 100%; transform: none !important; }
  .feature-img { transition: none; }
  .feature-media:hover, .feature-media.is-active,
  .feature-card:hover, .feature-card.is-active { transform: none; }
}

/* Desktop: mehr Innenabstand und 5px breiter nach links.
   (Breite/Spalten kommen aus den Klassen in featureRow.) */
@media (min-width: 768px) {
  .feature-card {
    padding: calc(2.5rem + 15px) 2.5rem;
    margin-left: -5px;
  }
}

/* Sidebar widget heading bar (soft blue) */
.widget-head {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ---------------------------------------------------------------------
   ARTICLE TYPOGRAPHY
   --------------------------------------------------------------------- */
/* Motivierender Einstiegssatz über dem Beitrag. Gleiche Größe und Stärke wie der
   Fließtext, nur der kurze Merkspruch (strong) am Anfang ist fett. */
.lk-lead { font-size: 1.125rem; line-height: 1.8; color: #374151; margin: 0 0 1.6rem; font-weight: 400; }
.lk-lead strong { color: var(--ink); font-weight: 700; }

/* Fließtext: überall gleich groß und dünn (normal). Der erste Absatz bekommt
   KEIN Sonder-Styling mehr, damit der ganze Text einheitlich aussieht. */
.article-body { color: #374151; line-height: 1.8; font-size: 1.125rem; font-weight: 400; }
.article-body p { margin: 0 0 1.35rem; font-weight: 400; }
.article-body > p:first-of-type { font-size: 1.125rem; line-height: 1.8; color: #374151; font-weight: 400; margin-bottom: 1.35rem; }

/* Mobil / App: Lesetext und Einstiegssatz eine Spur kleiner, weiterhin gleich groß. */
@media (max-width: 640px) {
  .article-body,
  .article-body > p:first-of-type,
  .lk-lead { font-size: 1rem; }
}

/* Headings with a small gradient accent underline */
.article-body h2 {
  font-size: 1.7rem; font-weight: 800; color: var(--ink);
  margin: 2.6rem 0 1rem; letter-spacing: -.015em;
}
.article-body h2::after {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 99px;
  margin-top: .65rem; background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.article-body h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 1.8rem 0 .6rem; }

/* Ordered lists keep numbers; unordered get custom dot markers */
.article-body ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.4rem; }
.article-body ul { list-style: none; padding-left: 0; margin: 0 0 1.4rem; }
.article-body ul li { position: relative; padding-left: 1.75rem; margin: .6rem 0; }
.article-body ul li::before {
  content: ""; position: absolute; left: .15rem; top: .62em;
  width: .5rem; height: .5rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.article-body li { margin: .45rem 0; }
.article-body li strong, .article-body p strong { color: var(--ink); }

.article-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* Figures: full-width rounded image with optional caption */
.article-body figure { margin: 2rem 0; }
/* All article images share one landscape ratio for a consistent look,
   no matter whether the source photo is portrait or landscape. */
.article-body figure img,
.article-body img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 1rem; margin: 1.6rem 0;
  box-shadow: 0 14px 34px -16px rgba(2,6,23,.3);
}
.article-body figure img { margin: 0; display: block; }
.article-body figcaption {
  text-align: center; font-size: .875rem; color: #94a3b8; margin-top: .65rem;
}

/* Callout / tip box */
.article-body .callout {
  display: flex; gap: .9rem; align-items: flex-start;
  background: linear-gradient(135deg, #eff8ff, #ecfdf5);
  border: 1px solid #dbeafe; border-radius: 1rem;
  padding: 1.1rem 1.3rem; margin: 1.9rem 0; line-height: 1.6;
}
.article-body .callout > span { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.article-body .callout strong { color: var(--brand-dark); }

.article-body blockquote {
  border-left: 4px solid var(--brand);
  background: #eef7ff;
  padding: 1rem 1.25rem; border-radius: 0 .75rem .75rem 0;
  color: #475569; font-style: italic; margin: 1.8rem 0;
}

/* ---------------------------------------------------------------------
   MISC
   --------------------------------------------------------------------- */
.search-results { max-height: 340px; overflow-y: auto; }

/* ===== Footer (modern, responsive, Best-Practice) =====
   Eigenes CSS -> unabhaengig vom kompilierten Tailwind, sauber auf Mobil UND Desktop. */
.site-footer { background:#eff6ff; border-top:1px solid #dbeafe; color:#475569; margin-top:2.5rem; }
.site-footer a { color:#64748b; text-decoration:none; transition:color .15s ease; }
.site-footer a:hover { color:#0b73b8; }

.site-footer__main {
  max-width:72rem; margin:0 auto; padding:3rem 1.5rem 2rem;
  display:grid; grid-template-columns:1fr; gap:2.25rem; text-align:center;
}
.site-footer__brand img { height:2.5rem; width:auto; display:block; margin:0 auto .9rem; }
.site-footer__brand p { font-size:.9rem; color:#64748b; line-height:1.6; max-width:26rem; margin:0 auto; }
.site-footer__wordmark { font-weight:800; color:#1e293b; font-size:1.125rem; margin-bottom:.75rem; }

.site-footer__themes h3 {
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#64748b; margin:0 0 .9rem;
}
.site-footer__themes #footer-categories {
  display:grid; grid-template-columns:repeat(2,auto); justify-content:center;
  column-gap:3rem; row-gap:.1rem; text-align:left;
}
.site-footer__themes #footer-categories a { display:block; padding:.45rem 0; font-size:.9rem; }

.site-footer__bar {
  border-top:1px solid #dbeafe;
  max-width:72rem; margin:0 auto; padding:1.15rem 1.25rem;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.8rem; color:#64748b; text-align:center;
}
.site-footer__legal { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; }

@media (min-width:768px) {
  .site-footer__main {
    grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
    gap:3.5rem; padding:3.5rem 1.5rem 2.5rem; align-items:start; text-align:left;
  }
  .site-footer__brand img { margin:0 0 .9rem -.4rem; }
  .site-footer__brand p { margin:0; max-width:24rem; }
  .site-footer__themes #footer-categories {
    grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:start; column-gap:1.25rem;
  }
  .site-footer__bar { flex-direction:row; justify-content:space-between; }
}
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-5 { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

.skeleton {
  background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Gradient text helper (blue -> green, readable on light backgrounds) */
.text-gradient {
  background: linear-gradient(120deg, #0d8de0, #1fbd72);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}