:root {
  --text: #ffffff;
  --accent: #a71240;
  --radius: 14px;
  --container: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #000;
  
}

body {
  margin: 0;
  font-family: "Audiowide", sans-serif;
  color: #fff;
  line-height: 1.5;
  background: #000;   /* bez gradijenta na cijelom tijelu */
}

.hero {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background: #001324 url("images/pozadina.jpg") center / cover no-repeat; /* fallback #001324 */
}


/* 2) GRADIENT-BG: polagani fade, plus "šav-maska" na samom vrhu */
.gradient-bg {
  position: relative;
  margin-top: -2px;  /* blagi preklop ispod hero-a (ubija 1px liniju) */
  display: flow-root;
  background: linear-gradient(
    to bottom,
    #001324 0%,     /* ista boja kao dno hero */
    #001324 30%,    /* drži nijansu neko vrijeme */
    #000000 100%    /* tek onda polako u crnu */
  );
  padding: 40px 5%;
  min-height: 100vh;
}
/* 2a) "Šav-maska": tanki HORIZONTALNI gradient koji poklapa tamnije rubove i malo svjetliji centar
      — stoji NA VRHU .gradient-bg i 2px ide 'preko' hero-a da nema nikakve razlike u tonu */
.gradient-bg::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -2px;              /* malčice se penje preko ruba .hero */
  height: 10px;           /* dovoljno tanko da je nevidljivo, ali pokrije šav */
  pointer-events: none;
  background: linear-gradient(to right, #001121 0%, #001527 50%, #011122 100%);
  /* nijanse su uzete s lijevog, srednjeg i desnog dna slike */
}


/* Header als Grid */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;   /* sve u sredinu */
  padding: 20px 5% 0 5%;
  background: transparent;
  z-index: 10;
}


.header-center {
  text-align: center;
}
.title-row {
  position: relative;
  text-align: center;
  padding: 0 5%;
}

.brand {
  margin: 0;
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1.2;
}
.social-icons {
  position: absolute;
  top: 70px;      /* spušta ikone malo niže (podesi po želji) */
  right: 80px;    /* odmak od desnog ruba */
  display: flex;  /* ikone jedna pored druge */
  gap: 12px;      /* razmak između ikona */
}

.social-icons .icon img {
  width: 28px;
  height: 28px;
}

.header-right {
  position: absolute;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-select {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
}


/* Weiße Linie unter dem Titel */
.header-rule {
  width: 100%;         /* preko cijelog ekrana */
  height: 2px;         /* debljina linije */
  background: #fff;    /* bijela boja */
  margin-top: 10px;    /* razmak ispod naslova */
  position: relative;  /* osigurava da bude iznad hero slike */
  z-index: 5;          /* podigne liniju da se vidi */
}

/* Navigation */
.main-nav{
  margin: 10px 0 0 0;     /* nema velikog razmaka */
  padding: 8px 0;
  display: flex;
  justify-content: center;
  gap: 28px;
  background: transparent; /* bez pozadine */
  position: relative;
  z-index: 11;             /* iznad slike */
}
.main-nav a{
  color:#fff;
  text-decoration:none;
  font-size: 1.2rem;   /* veća veličina teksta */
  font-weight: 600;    /* malo podebljano da se istakne */
  letter-spacing: 1px; /* malo razmaka između slova */
}
.main-nav a:visited{ color:#fff; }
.main-nav a:hover{ color:#e23f6e; }

/* Sections */
.section {
  max-width: var(--container);
  margin: 40px auto;
  padding: 0 5%;
}

.section h2 {
  margin-bottom: 16px;
}

.section ul {
  list-style: disc;
  margin-left: 20px;
}

/* Shop-Bilder – gleiche Größe, zugeschnitten */
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dvije kolone */
  gap: 20px;                      /* razmak između okvira */
}

.frame {
  width: 100%;
  border-radius: 14px;
  border: 2px solid #a71240;   /* okvir u boji slova */
  background: rgba(0,0,0,0.25); /* lagana tamna pozadina da se slika istakne */
  padding: 10px;          /* mali unutarnji razmak */
}

.frame h3 {
  margin: 0 0 8px 0;     /* razmak ispod naslova */
  font-size: 1.2rem;
  text-align: center;    /* centriran naslov */
  color: #fff;
}

.frame-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
}

.frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 900px) {
  .two-cols {
    grid-template-columns: 1fr;   /* na mobitelu ide jedan ispod drugog */
  }
}

/* Phones */
.phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.phone {
  background: rgba(167, 18, 64, 0.3); /* crvena (#a71240) sa 80% vidljivosti */
  padding: 14px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  text-align: center;
}
.phone .price{
  color: #fff;               /* tekst bijel */
  font-weight: 700;
  display: inline-block;
  padding: 4px 12px;
  border: 2px solid #a71240;    /* crveni okvir */
  border-radius: 999px;   /* „pill“ okvir oko cijene */
  margin-top: 6px;
  background: transparent;   /* bez dodatne boje iza teksta */
}

/* Sekcija Über Uns */
#ueber-uns {
  display: flex;
  justify-content: center;
  padding: 60px 5%;
}

#ueber-uns .about-box {
  max-width: 800px;
  width: 100%;
  background: rgba(0,0,0,0.6); /* tamna prozirna pozadina */
  border: 2px solid #a71240;   /* akzent boja okvira */
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6); /* sjena prozora */
}

#ueber-uns h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: 2px;
  color: #a71240;
  position: relative;
}

#ueber-uns h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #a71240;
  margin: 12px auto 0;
  border-radius: 2px;
}

#ueber-uns p {
  font-size: 1.2rem;
  line-height: 2;
  color: #fff;
}


/* footer */
.site-footer {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #fff;
  background: transparent;
  border: none;
  margin-top: 60px;
}
/* ——— Angebote ——— */
.offers .offers-head {
  text-align: center;
  margin-bottom: 28px;
}
.badge-biz {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  letter-spacing: .5px;
  font-weight: 700;
  background: rgba(167,18,64,.08);
  box-shadow: 0 0 12px rgba(167,18,64,.25);
}
.offers h2 {
  font-size: clamp(28px, 4.5vw, 44px);
  margin: 12px 0 6px;
}
.offers-sub {
  opacity: .85;
  max-width: 720px;
  margin: 0 auto;
}

/* Grid kartica */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* Kartica */
.offer-card {
  position: relative;
  background: rgba(0,0,0,.25);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  border-color: #e23f6e; /* malo jači naglasak na hover */
}

/* Šira kartica za tekstualnu ponudu */
.offer-card.wide {
  grid-column: span 1; /* umjesto span 2 */
}
@media (max-width: 900px) {
  .offer-card.wide { grid-column: span 1; }
}

/* Header unutar kartice */
.offer-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.offer-header .ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--accent);
  background: rgba(167,18,64,.07);
  font-size: 20px;
}
.offer-header h3 {
  font-size: 1.2rem;
  line-height: 1.15;
}
.chip {
  font-size: .8rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: rgba(167,18,64,.12);
  white-space: nowrap;
}
.chip.ghost {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
}

/* Lista unutar kartice */
.offer-list {
  margin: 8px 0 0 1.2rem;
  line-height: 1.8;
}
.offer-list li { margin: 2px 0; }

/* Tekstualni odlomci */
.offer-text { opacity: .95; line-height: 1.9; margin: 8px 0; }
.offer-text.emph { color: var(--accent); font-weight: 700; }

/* CTA gumb */
.cta-box { margin-top: 12px; }
.btn-accent {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .4px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  background: linear-gradient(180deg, rgba(167,18,64,.18), rgba(167,18,64,.10));
  box-shadow: 0 6px 18px rgba(167,18,64,.2);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(167,18,64,.3);
  border-color: #e23f6e;
}
.btn-accent.ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.35);
}

/* Blagi „glow“ naglasak svakih par sekundi (suptilno) */
@keyframes softGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 rgba(167,18,64,0); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 18px rgba(167,18,64,.25); }
}
.offer-card:hover { animation: softGlow 2.4s ease-in-out 1; }

.offer-card .chip {
  display: block;
  margin: 6px auto 12px; /* gore i dolje razmak, centrirano */
  text-align: center;
}
/* ===== MOBILE TWEAKS ===== */
@media (max-width: 768px) {
  /* header & hero */
  .site-header { padding: 14px 4% 0; }
  .brand { font-size: clamp(28px, 8vw, 42px); }
  .social-icons { top: 56px; right: 16px; }
  .social-icons .icon img { width: 24px; height: 24px; }
  .hero { min-height: 60dvh; }

  /* nav: veći tap-targeti, prelom u dva reda */
  .main-nav {
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 10px 0;
  }
  .main-nav a {
    font-size: 1rem;
    padding: 8px 10px;     /* lakše prstom pogoditi */
    border-radius: 8px;
    background: rgba(255,255,255,.06);
  }

  /* sekcije i tipografija */
  .section { margin: 28px auto; padding: 0 4%; }
  .section h2 { font-size: clamp(22px, 6vw, 28px); }

  /* offers grid/kartice */
  .offers-grid { gap: 14px; }
  .offer-card { padding: 14px; }
  .offer-header { grid-template-columns: auto 1fr; }
  .offer-header .ico { width: 36px; height: 36px; font-size: 18px; }

  /* phones grid */
  .phones { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .phone { padding: 12px; }
  .phone .price { margin-top: 6px; }

  /* galerija okviri */
  .two-cols { grid-template-columns: 1fr; gap: 14px; }
  .frame { padding: 8px; }

  /* o nama kutija */
  #ueber-uns { padding: 40px 4%; }
  #ueber-uns .about-box { padding: 24px; }

  /* embed visine */
  #map iframe { height: 340px !important; }
  #fragebogen iframe { height: 700px !important; }

  /* footer */
  .site-footer { font-size: 11px; padding: 12px 0; }
}

@media (max-width: 480px) {
  .brand { font-size: clamp(24px, 9vw, 34px); }
  .main-nav a { font-size: .95rem; padding: 8px 10px; }
  .offers h2 { font-size: clamp(22px, 7vw, 26px); }
  .badge-biz { font-size: .85rem; padding: 5px 10px; }
  .offer-card { padding: 12px; }
  .phones { grid-template-columns: 1fr 1fr; } /* 2 u redu na najmanjim ekranima */
  #map iframe { height: 300px !important; }
  #fragebogen iframe { height: 640px !important; }
}