/* =========================================================
   HANNESKNECHTGES.DE – Minimal CSS (Tailwind-first)
   Only: hero image + floating cards + service-card styling
   ========================================================= */

:root{
  --accent: #f1d600;
  --accentSoft: rgba(241, 214, 0, 0.22);
}

/* Base */
body{
  font-family: 'Avenir Next', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* --- HERO background image --- */
.hero-bg{
  background-image: url("../img/hero/Sven_Hebbinghaus_4.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.05);
  animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.12) translateY(8px); }
}

/* --- subtle floating cards --- */
.hero-float-1 { animation: float1 7s ease-in-out infinite; }
.hero-float-2 { animation: float2 8s ease-in-out infinite; }
.hero-float-3 { animation: float3 9s ease-in-out infinite; }
.hero-float-4 { animation: float4 10s ease-in-out infinite; }

@keyframes float1 { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
@keyframes float2 { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes float3 { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }
@keyframes float4 { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg,
  .hero-float-1,
  .hero-float-2,
  .hero-float-3,
  .hero-float-4{
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Angebot-Cards: gelbes Accent-Detail
   ========================================================= */

.service-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  border-color: rgba(241,214,0,0.45);
}

.service-card:focus-within{
  outline: 3px solid var(--accentSoft);
  outline-offset: 2px;
}

/* left accent bar */
.service-card__accent{
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), rgba(241,214,0,0.45));
  box-shadow: 0 0 0 6px rgba(241,214,0,0.10);
}

/* head */
.service-card__head{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-left: 10px; /* space from accent bar */
}

.service-card__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(241,214,0,0.16);
  border: 1px solid rgba(241,214,0,0.35);
}

.service-card__meta{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(55,65,81,0.75);
}

/* button */
.service-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 14px;
  background: #111827;
  color: #fff;
  font-weight: 600;
  transition: transform .18s ease, background .18s ease;
  text-decoration: none;
}

.service-card__btn:hover{
  background: #0b1220;
  transform: translateY(-1px);
}

/* mobile tweaks */
@media (max-width: 640px){
  .service-card{ padding: 18px; }
  .service-card__head{ padding-left: 8px; }
}